2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:T1c9e,"use client"; import { IconAlignCenter, IconAlignLeft, IconAlignRight } from "@tabler/icons-react"; import { useId, useRef, useState } from "react"; import { ColorPicker } from "@/components/ui/color-picker"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Slider } from "@/components/ui/slider"; import { Toggle } from "@/components/ui/toggle"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { toHex } from "../_shared/color"; import { ColorDots } from "../_shared/color-dots"; import { useCustomizer } from "../_shared/customizer-context"; import { FOCUS_RING } from "../_shared/motion"; import { Section } from "../_shared/section"; import { shakeOnce } from "../_shared/shake"; import type { TextAlign } from "../_shared/types"; const ArcIcon = () => ( ); /** * Text line for the print: brand display font (--kc-display), CAPS when the brand token says so, * live on the stage. Max length with a tabular counter and one shake on overflow, size slider, * alignment, ink swatches + picker, and an arc toggle (SVG textPath on the stage). */ export function TextLineEditor({ maxLength = 24, index, className, }: { maxLength?: number; index?: number; className?: string; }) { const { config, options, derived, actions } = useCustomizer(); const t = config.text; const fieldId = useId(); const wrap = useRef(null); const [full, setFull] = useState(false); const inks = options.inkSet.map((hex) => ({ value: hex, label: hex.toUpperCase(), hex })); const active = t.color || derived.textColor; const body = (

Text line

{ const raw = options.brand.caps ? e.target.value.toUpperCase() : e.target.value; const over = raw.length > maxLength; if (over) shakeOnce(wrap.current); setFull(over); const value = raw.slice(0, maxLength); actions.setText({ value, enabled: value.trim().length > 0 }); }} className="block h-11 pe-14 font-display text-base [text-transform:var(--kc-display-transform)]" /> {t.value.length}/{maxLength}

{full ? `Up to ${maxLength} characters.` : options.brand.caps ? "Set in capitals." : "Appears on the print, below the art."}

Size {t.size.toFixed(1)}%

actions.setText({ size: Array.isArray(v) ? v[0] : v })} />

next[0] && actions.setText({ align: next[0] as TextAlign })} spacing={0} className="rounded-control" > {( [ ["start", IconAlignLeft, "Align start"], ["center", IconAlignCenter, "Align centre"], ["end", IconAlignRight, "Align end"], ] as const ).map(([value, Icon, label]) => ( ))} actions.setText({ curve })} variant="outline" className="micro h-11 gap-2 rounded-control border-rule px-3 active:scale-[0.97] motion-reduce:active:scale-100" > Arc

Ink

d.hex.toLowerCase() === active.toLowerCase())?.value} onValueChange={(hex) => actions.setText({ color: hex })} /> actions.setText({ color: toHex(css) })} />

); if (index === undefined) return body; return (

{body}

); } export default TextLineEditor; 32:T6d0,"use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; export type Dot = { value: string; label: string; hex: string }; /** * Round colour dots on Kobra toggle-group. Hex-aware (the shared `swatch` primitive maps names). * Selection is an ink ring, never a colour change. 44px hit area via a pseudo-element. */ export function ColorDots({ dots, value, onValueChange, label, className, size = "md", }: { dots: Dot[]; value: string | undefined; onValueChange: (value: string) => void; label: string; className?: string; size?: "sm" | "md"; }) { return ( next[0] && onValueChange(next[0])} spacing={3} className={cn("flex-wrap", className)} > {dots.map((d) => ( ))} ); } 33:T2c56,"use client"; import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode, } from "react"; import { readHash, decodeConfig } from "./codec"; import { isDarkHex } from "./color"; import { computePrice } from "./pricing"; import { clampPlacement, movePlacement as movePlacementMath, presetPlacement, type ArtPlacement, type PlacementPresetId, type Rect, } from "./print-area"; import { DEFAULT_SIZES, type ArtAsset, type Blend, type BlankColorway, type BlankGarment, type BlankView, type CustomizerBrand, type CustomizerConfig, type PriceBreakdown, type Pricing, type Side, type TextLine, } from "./types"; export type CustomizerOptions = { brand: CustomizerBrand; garments: BlankGarment[]; art: ArtAsset[]; pricing: Pricing; /** Brand ink set for text colour swatches. */ inkSet: string[]; sizes: string[]; /** Offer the colour palette for garments with a silhouette mask (tint fallback). */ allowCustomColor: boolean; /** Title used in the make-your-own prompt. */ designTitle: string; }; export type ResolvedArt = { id: string; title: string; aspect: number; onLight: string; onDark: string; upload: boolean; }; export type Derived = { garment: BlankGarment; colorway: BlankColorway; view: BlankView; side: Side; hasBack: boolean; printArea: Rect; art: ResolvedArt | null; /** Aspect used for clamping (falls back to 0.8 with no art). */ artAspect: number; isDark: boolean; blend: Blend; /** Set when a custom hex is tinted over the White blank via its silhouette mask. */ tint: { hex: string; mask: string } | null; textColor: string; price: PriceBreakdown; }; export type CustomizerActions = { setGarment: (id: string) => void; setColor: (name: string) => void; setCustomColor: (hex: string) => void; setSize: (size: string) => void; setSide: (side: Side) => void; selectArt: (id: string) => void; setUpload: (u: { src: string; name: string; aspect: number }) => void; clearArt: () => void; setPlacement: (p: Partial) => void; movePlacement: (dx: number, dy: number) => void; applyPreset: (id: PlacementPresetId) => void; setText: (patch: Partial) => void; reset: () => void; load: (c: CustomizerConfig) => void; }; export type CustomizerUi = { editing: boolean; setEditing: (v: boolean) => void; zoom: boolean; setZoom: (v: boolean) => void; snap: boolean; setSnap: (v: boolean) => void; }; export type CustomizerContextValue = { config: CustomizerConfig; derived: Derived; options: CustomizerOptions; actions: CustomizerActions; ui: CustomizerUi; onAddToCart?: (config: CustomizerConfig, price: PriceBreakdown) => void; }; const Ctx = createContext(null); export function useCustomizer(): CustomizerContextValue { const v = useContext(Ctx); if (!v) throw new Error("useCustomizer() must be used inside ."); return v; } /** Same as useCustomizer but returns null outside a provider (for optional wiring). */ export function useOptionalCustomizer() { return useContext(Ctx); } /* ---- resolution --------------------------------------------------------------------------- */ function findColorway(g: BlankGarment, color: string, custom: boolean): BlankColorway { const direct = g.colors.find((c) => c.name === color); if (direct) return direct; if (custom && g.tint) { const base = g.colors.find((c) => c.name === g.tint!.base); if (base) return base; } return g.colors.find((c) => c.name === g.defaultColor) ?? g.colors[0]; } function resolveArt(config: CustomizerConfig, art: ArtAsset[]): ResolvedArt | null { if (config.art.kind === "library") { const id = config.art.id; const a = art.find((x) => x.id === id); return a ? { id: a.id, title: a.title, aspect: a.aspect, onLight: a.src.onLight, onDark: a.src.onDark, upload: false } : null; } if (config.art.kind === "upload") return { id: "upload", title: config.art.name, aspect: config.art.aspect, onLight: config.art.src, onDark: config.art.src, upload: true }; return null; } /** Make any config valid for these options (garment/colour/side exist, placement inside the area). */ export function normalizeConfig(c: CustomizerConfig, o: CustomizerOptions): CustomizerConfig { const garment = o.garments.find((g) => g.id === c.garmentId) ?? o.garments[0]; const custom = c.color === "Custom" && !!c.customColor && !!garment.tint; const colorway = findColorway(garment, custom ? garment.tint!.base : c.color, custom); const color = custom ? "Custom" : colorway.name; const side: Side = c.side === "back" && colorway.views.back ? "back" : "front"; const view = colorway.views[side] ?? colorway.views.front!; const art = resolveArt(c, o.art); const aspect = art?.aspect ?? 0.8; const art2 = c.art.kind === "library" && !art ? ({ kind: "none" } as const) : c.art; return { ...c, garmentId: garment.id, color, customColor: custom ? c.customColor : undefined, side, art: art2, placement: clampPlacement(c.placement, aspect, view.printArea), text: { ...c.text, value: o.brand.caps ? c.text.value.toUpperCase() : c.text.value }, }; } export function deriveState(config: CustomizerConfig, o: CustomizerOptions): Derived { const garment = o.garments.find((g) => g.id === config.garmentId) ?? o.garments[0]; const custom = config.color === "Custom" && !!config.customColor && !!garment.tint; const colorway = findColorway(garment, config.color, custom); const side: Side = config.side === "back" && colorway.views.back ? "back" : "front"; const view = colorway.views[side] ?? colorway.views.front!; const art = resolveArt(config, o.art); const isDark = custom ? isDarkHex(config.customColor!) : isDarkHex(colorway.hex); return { garment, colorway, view, side, hasBack: !!colorway.views.back, printArea: view.printArea, art, artAspect: art?.aspect ?? 0.8, isDark, blend: custom ? "multiply" : colorway.blend, tint: custom ? { hex: config.customColor!, mask: garment.tint!.mask } : null, textColor: config.text.color || (isDark ? "#f2f0eb" : "#101010"), price: computePrice(config, o.garments, o.pricing), }; } export function initialConfig(o: CustomizerOptions, partial?: Partial): CustomizerConfig { const garment = o.garments[0]; const first = o.art[0]; const base: CustomizerConfig = { v: 1, garmentId: garment.id, color: garment.defaultColor, size: o.sizes.includes("M") ? "M" : o.sizes[0], side: "front", art: first ? { kind: "library", id: first.id } : { kind: "none" }, placement: { scale: 0.7, cx: 0.5, top: 0.04 }, preset: "center-chest", text: { enabled: false, value: "", size: 9, align: "center", color: "", curve: false, y: 0.92 }, ...partial, }; return normalizeConfig(base, o); } /* ---- provider ----------------------------------------------------------------------------- */ export type CustomizerProviderProps = { brand: CustomizerBrand; garments: BlankGarment[]; art: ArtAsset[]; pricing: Pricing; inkSet?: string[]; sizes?: string[]; allowCustomColor?: boolean; designTitle?: string; initial?: Partial; /** Restore a saved design from `#d=...` on mount (use on one customizer per page). */ restoreFromHash?: boolean; /** Fallback when no is mounted. */ onAddToCart?: (config: CustomizerConfig, price: PriceBreakdown) => void; /** Start with the editing guides hidden (share cards, thumbnails). */ editing?: boolean; children: ReactNode; }; export function CustomizerProvider({ brand, garments, art, pricing, inkSet = [], sizes = DEFAULT_SIZES, allowCustomColor = false, designTitle, initial, restoreFromHash = false, onAddToCart, editing = true, children, }: CustomizerProviderProps) { const options = useMemo( () => ({ brand, garments, art, pricing, inkSet, sizes, allowCustomColor, designTitle: designTitle ?? art[0]?.title ?? brand.name, }), [brand, garments, art, pricing, inkSet, sizes, allowCustomColor, designTitle], ); const [config, setConfig] = useState(() => initialConfig(options, initial)); const [isEditing, setEditing] = useState(editing); const [zoom, setZoom] = useState(false); const [snap, setSnap] = useState(true); const update = useCallback( (fn: (c: CustomizerConfig) => CustomizerConfig) => setConfig((c) => normalizeConfig(fn(c), options)), [options], ); useEffect(() => { if (!restoreFromHash) return; const raw = readHash(); if (!raw) return; const restored = decodeConfig(raw, initialConfig(options), options.garments, options.art); if (!restored) return; // after mount, off the effect's synchronous path (server and first client render agree) const id = requestAnimationFrame(() => setConfig(normalizeConfig(restored, options))); return () => cancelAnimationFrame(id); }, [restoreFromHash, options]); const actions = useMemo(() => { const paFor = (c: CustomizerConfig) => deriveState(c, options); return { setGarment: (id) => update((c) => ({ ...c, garmentId: id, preset: c.preset })), setColor: (name) => update((c) => ({ ...c, color: name, customColor: undefined })), setCustomColor: (hex) => update((c) => ({ ...c, color: "Custom", customColor: hex })), setSize: (size) => update((c) => ({ ...c, size })), setSide: (side) => update((c) => ({ ...c, side, preset: side === "back" ? "back" : c.preset === "back" ? "center-chest" : c.preset })), selectArt: (id) => update((c) => ({ ...c, art: { kind: "library", id } })), setUpload: (u) => update((c) => ({ ...c, art: { kind: "upload", ...u } })), clearArt: () => update((c) => ({ ...c, art: { kind: "none" } })), setPlacement: (p) => update((c) => ({ ...c, placement: { ...c.placement, ...p }, preset: "custom" })), movePlacement: (dx, dy) => update((c) => { const d = paFor(c); return { ...c, placement: movePlacementMath(c.placement, dx, dy, d.artAspect, d.printArea), preset: "custom" }; }), applyPreset: (id) => update((c) => { const side: Side = id === "back" ? "back" : "front"; const d = paFor({ ...c, side }); return { ...c, side, preset: id, placement: presetPlacement(id, d.artAspect, d.printArea) }; }), setText: (patch) => update((c) => ({ ...c, text: { ...c.text, ...patch } })), reset: () => setConfig(initialConfig(options, initial)), load: (c) => setConfig(normalizeConfig(c, options)), }; }, [update, options, initial]); const derived = useMemo(() => deriveState(config, options), [config, options]); const ui = useMemo( () => ({ editing: isEditing, setEditing, zoom, setZoom, snap, setSnap }), [isEditing, zoom, snap], ); const value = useMemo( () => ({ config, derived, options, actions, ui, onAddToCart }), [config, derived, options, actions, ui, onAddToCart], ); return {children}; } 34:T465,import type { BlockMeta } from "../../../lib/block-meta"; export const textLineEditorMeta: BlockMeta = { slug: "text-line-editor", title: "Text line editor", description: "One line of text on the print: brand display font, CAPS when the brand voice says so, max length with a tabular counter and a single shake, size slider, alignment, ink swatches with picker, arc toggle. Live on the stage.", group: "customizer", kobraDeps: ["input", "slider", "toggle", "toggle-group", "popover", "color-picker"], files: [ "blocks/customizer/text-line-editor/text-line-editor.tsx", "blocks/customizer/_shared/color-dots.tsx", "blocks/customizer/_shared/shake.ts", "blocks/customizer/_shared/customizer-context.tsx", ], props: [ { name: "maxLength", type: "number", default: "24", description: "Character limit." }, { name: "index", type: "number", description: "Section number; renders the numbered header with its hairline." }, { name: "className", type: "string", description: "Layout slotting on the root." }, ], tags: ["customizer", "text", "input", "star"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#customizer","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Customizer"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Text line editor"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Text line editor"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"One line of text on the print: brand display font, CAPS when the brand voice says so, max length with a tabular counter and a single shake, size slider, alignment, ink swatches with picker, arc toggle. Live on the stage."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"text-line-editor","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/text-line-editor/text-line-editor.tsx","code":"$31"},{"path":"blocks/customizer/_shared/color-dots.tsx","code":"$32"},{"path":"blocks/customizer/_shared/shake.ts","code":"/** One brief shake for an invalid field (Kobra: errors shake once). No-op under reduced motion. */\nexport function shakeOnce(el: HTMLElement | null) {\n if (!el || typeof window === \"undefined\") return;\n if (window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n el.animate(\n [{ translate: \"0\" }, { translate: \"-6px\" }, { translate: \"5px\" }, { translate: \"-3px\" }, { translate: \"1.5px\" }, { translate: \"0\" }],\n { duration: 320, easing: \"cubic-bezier(0.23, 1, 0.32, 1)\" },\n );\n}\n"},{"path":"blocks/customizer/_shared/customizer-context.tsx","code":"$33"},{"path":"blocks/customizer/text-line-editor/demo.tsx","code":"\"use client\";\n\nimport { DemoFrame } from \"../_shared/demo-frame\";\nimport { GarmentStage } from \"../garment-preview/garment-preview\";\nimport { TextLineEditor } from \"./text-line-editor\";\n\nexport function TextLineEditorDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n \n

\n \n );\n}\n\nexport default TextLineEditorDemo;\n"},{"path":"blocks/customizer/text-line-editor/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]