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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.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/0zz-qr4ehfg-y.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/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31:Tbfb,"use client"; import { IconX } from "@tabler/icons-react"; import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@/components/ui/empty"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { useCustomizer } from "../_shared/customizer-context"; import { FOCUS_RING } from "../_shared/motion"; import { useRecentDesigns } from "../_shared/recent"; import { StageCanvas } from "../_shared/stage-canvas"; /** * Designs saved with "Save design", kept in localStorage per brand, as small stage thumbnails * (the same CSS composite). Click one to load it onto the stage. Designed loading and empty states. */ export function RecentDesigns({ className }: { className?: string }) { const { options, actions } = useCustomizer(); const { items, ready, remove } = useRecentDesigns(options.brand.slug); if (!ready) return (

{[0, 1, 2].map((i) => ( ))}

); if (items.length === 0) return ( No saved designs Press Save on a design and it waits here, in this browser. ); return (

); } export default RecentDesigns; 32:T946,"use client"; import { useCallback, useMemo, useSyncExternalStore } from "react"; import type { CustomizerConfig } from "./types"; export type RecentDesign = { id: string; savedAt: number; label: string; config: CustomizerConfig }; const MAX = 8; const EVENT = "kc-customizer-recent"; const key = (brand: string) => `kc-customizer-recent:${brand}`; function readRaw(brand: string): string { try { return window.localStorage.getItem(key(brand)) ?? "[]"; } catch { return "[]"; } } function parse(raw: string): RecentDesign[] { try { const data: unknown = JSON.parse(raw); return Array.isArray(data) ? (data as RecentDesign[]).filter((d) => d?.config?.v === 1) : []; } catch { return []; } } function subscribe(brand: string, cb: () => void) { const onStorage = (e: StorageEvent) => e.key === key(brand) && cb(); window.addEventListener("storage", onStorage); window.addEventListener(EVENT, cb); return () => { window.removeEventListener("storage", onStorage); window.removeEventListener(EVENT, cb); }; } const noop = () => () => {}; /** localStorage-backed list of saved designs for a brand. `ready` is false on the server and first paint. */ export function useRecentDesigns(brand: string) { const raw = useSyncExternalStore( useCallback((cb) => subscribe(brand, cb), [brand]), () => readRaw(brand), () => "[]", ); const ready = useSyncExternalStore(noop, () => true, () => false); const items = useMemo(() => parse(raw), [raw]); const write = useCallback( (next: RecentDesign[]) => { try { window.localStorage.setItem(key(brand), JSON.stringify(next)); } catch { /* private mode: nothing persists */ } window.dispatchEvent(new Event(EVENT)); }, [brand], ); const save = useCallback( (config: CustomizerConfig, label: string) => { const stored: CustomizerConfig = config.art.kind === "upload" ? { ...config, art: { kind: "none" } } : config; write([{ id: Date.now().toString(36), savedAt: Date.now(), label, config: stored }, ...parse(readRaw(brand))].slice(0, MAX)); }, [brand, write], ); const remove = useCallback((id: string) => write(parse(readRaw(brand)).filter((d) => d.id !== id)), [brand, write]); const clear = useCallback(() => write([]), [write]); return { items, ready, save, remove, clear }; } 33:T478c,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent } from "react"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { deriveState, type CustomizerOptions } from "./customizer-context"; import { EASE_EXIT, EASE_OUT, FOCUS_RING } from "./motion"; import { resizeFromCorner, type ArtPlacement } from "./print-area"; import { artHeightFrac } from "./print-area"; import type { CustomizerConfig } from "./types"; export type StageEdit = { /** Called with a partial placement (already relative to the print area). */ onPlacement: (p: Partial) => void; onTextY: (y: number) => void; /** Snap the art to the horizontal centre when close. */ snap: boolean; }; type Props = { config: CustomizerConfig; options: CustomizerOptions; /** Show the dashed print area + handles. */ guides?: boolean; /** Pointer/keyboard editing; omit for a static render. */ edit?: StageEdit; zoom?: boolean; className?: string; /** Drop the empty-state label (thumbnails). */ quiet?: boolean; /** Lower priority image loading for thumbnails. */ lazy?: boolean; }; const SNAP_THRESHOLD = 0.02; /** * The art composited onto the real blank, in CSS (no canvas, so it stays crisp at any zoom). * * Colour: real colourways are swapped (all colourways of the garment are mounted and cross-faded, * so a swap is one opacity flip and never waits on the network). Only when a custom hex is chosen * and no colourway matches does it fall back to the White blank multiplied by the hex through the * garment silhouette mask (`mask-image`), carried in --garment-tint / --garment-mask. * * Art sits in the detected print area. Dynamic geometry travels as CSS custom properties only: * --pa-x/--pa-y/--pa-w/--pa-h (percent of the photo), --art-x/--art-y/--art-scale (fractions of the * print area, used with container units). */ export function StageCanvas({ config, options, guides: guidesAllowed = false, edit, zoom = false, className, quiet = false, lazy = false }: Props) { const d = deriveState(config, options); const { garment, view, printArea: pa } = d; const paRef = useRef(null); const artRef = useRef(null); const drag = useRef(null); const [dragging, setDragging] = useState(false); const [animating, setAnimating] = useState(false); const [loaded, setLoaded] = useState>({}); // Guides and handles show only while editing: pointer down / drag, focus inside the stage, or any // placement change; they fade out 600ms after the last interaction. const [focusWithin, setFocusWithin] = useState(false); const [recent, setRecent] = useState(false); const recentTimer = useRef(undefined); const touch = () => { window.clearTimeout(recentTimer.current); setRecent(true); recentTimer.current = window.setTimeout(() => setRecent(false), 600); }; useEffect(() => () => window.clearTimeout(recentTimer.current), []); const firstRender = useRef(true); useEffect(() => { if (firstRender.current) { firstRender.current = false; return; } if (guidesAllowed) { const t = window.setTimeout(touch, 0); return () => window.clearTimeout(t); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [config.placement.scale, config.placement.cx, config.placement.top, config.text.y, config.preset]); const live = useRef(config); useLayoutEffect(() => { live.current = config; }); const pathId = useId().replace(/:/g, ""); const guides = guidesAllowed && (dragging || focusWithin || recent); // preset changes glide for 150ms; direct manipulation never lags const lastPreset = useRef(config.preset); useEffect(() => { if (lastPreset.current === config.preset) return; lastPreset.current = config.preset; if (config.preset === "custom") return; const t0 = window.setTimeout(() => setAnimating(true), 0); const t1 = window.setTimeout(() => setAnimating(false), 200); return () => { window.clearTimeout(t0); window.clearTimeout(t1); }; }, [config.preset]); const imgW = view.width; const imgH = view.height; const place = config.placement; const hf = artHeightFrac(place.scale, d.artAspect, pa); const art = d.art; /* ---- all blanks of this garment for this side, mounted together ------------------------- */ const blanks = garment.colors.map((c) => ({ name: c.name, v: c.views[d.side] ?? c.views.front! })); const activeName = d.tint ? (garment.tint?.base ?? d.colorway.name) : d.colorway.name; const activeSrc = (blanks.find((b) => b.name === activeName) ?? blanks[0]).v.src; const ready = !!loaded[activeSrc]; const pointerRect = () => paRef.current?.getBoundingClientRect(); const onArtDown = (e: PointerEvent) => { if (!edit || (e.target as HTMLElement).closest("[data-grip]")) return; e.currentTarget.setPointerCapture(e.pointerId); drag.current = { mode: "move", x: e.clientX, y: e.clientY, start: live.current.placement, ty: live.current.text.y }; setDragging(true); }; const onGripDown = (e: PointerEvent) => { if (!edit) return; e.stopPropagation(); e.currentTarget.setPointerCapture(e.pointerId); drag.current = { mode: "resize", x: e.clientX, y: e.clientY, start: live.current.placement, ty: 0 }; setDragging(true); }; const onTextDown = (e: PointerEvent) => { if (!edit) return; e.currentTarget.setPointerCapture(e.pointerId); drag.current = { mode: "text", x: e.clientX, y: e.clientY, start: live.current.placement, ty: live.current.text.y }; setDragging(true); }; const onMove = (e: PointerEvent) => { const s = drag.current; const r = pointerRect(); if (!s || !r || !edit) return; if (s.mode === "move") { let cx = s.start.cx + (e.clientX - s.x) / r.width; const top = s.start.top + (e.clientY - s.y) / r.height; if (edit.snap && Math.abs(cx - 0.5) <= SNAP_THRESHOLD) { cx = 0.5; setAnimating(true); } else setAnimating(false); edit.onPlacement({ cx, top }); } else if (s.mode === "resize") { const left = (artRef.current?.getBoundingClientRect().left ?? r.left) - r.left; const next = resizeFromCorner(live.current.placement, (e.clientX - r.left - left) / r.width, d.artAspect, pa); edit.onPlacement({ scale: next.scale, cx: next.cx, top: next.top }); } else { edit.onTextY(Math.min(0.96, Math.max(0.04, s.ty + (e.clientY - s.y) / r.height))); } }; const onUp = (e: PointerEvent) => { if (!drag.current) return; drag.current = null; setDragging(false); setAnimating(false); if ((e.currentTarget as Element).hasPointerCapture?.(e.pointerId)) (e.currentTarget as Element).releasePointerCapture(e.pointerId); }; const onKey = (e: KeyboardEvent) => { if (!edit) return; const step = e.shiftKey ? 0.05 : 0.01; const p = live.current.placement; const keys: Record> = { ArrowLeft: { cx: p.cx - step }, ArrowRight: { cx: p.cx + step }, ArrowUp: { top: p.top - step }, ArrowDown: { top: p.top + step }, "+": { scale: p.scale + step }, "=": { scale: p.scale + step }, "-": { scale: p.scale - step }, }; const patch = keys[e.key]; if (!patch) return; e.preventDefault(); edit.onPlacement(patch); }; /* ---- text ------------------------------------------------------------------------------ */ const t = config.text; const hasText = t.enabled && t.value.trim().length > 0; const vbH = (100 * pa.h) / pa.w; const textRef = useRef(null); const [fit, setFit] = useState(1); useLayoutEffect(() => { const el = textRef.current; if (!el || !hasText) return; const raw = el.getComputedTextLength(); const avail = t.curve ? 94 : 96; // textPath length is measured along the arc; the arc is ~avail wide setFit(raw > avail ? avail / raw : 1); }, [t.value, t.size, t.curve, hasText, t.align, config.garmentId]); const fontSize = Math.max(2, t.size * fit); const cy = t.y * vbH; const anchor = t.align === "start" ? "start" : t.align === "end" ? "end" : "middle"; const ax = t.align === "start" ? 4 : t.align === "end" ? 96 : 50; const sag = fontSize * 1.7; const arc = `M 4 ${cy + sag} Q 50 ${cy - sag} 96 ${cy + sag}`; const vars = { "--stage-ar": `${imgW} / ${imgH}`, "--pa-x": `${(pa.x / imgW) * 100}%`, "--pa-y": `${(pa.y / imgH) * 100}%`, "--pa-w": `${(pa.w / imgW) * 100}%`, "--pa-h": `${(pa.h / imgH) * 100}%`, "--zoom-origin": `${((pa.x + pa.w / 2) / imgW) * 100}% ${((pa.y + pa.h / 2) / imgH) * 100}%`, "--art-x": place.cx - place.scale / 2, "--art-y": place.top, "--art-scale": place.scale, "--art-h": hf, "--art-ar": `${d.artAspect}`, "--garment-tint": d.tint?.hex ?? "transparent", "--garment-mask": d.tint ? `url(${d.tint.mask})` : "none", "--text-ink": d.textColor, } as CSSProperties; const blendCls = d.blend === "multiply" ? "mix-blend-multiply" : ""; const artSrcs = art ? (art.onLight === art.onDark ? [{ key: "one", src: art.onLight, active: true }] : [ { key: "light", src: art.onLight, active: !d.isDark }, { key: "dark", src: art.onDark, active: d.isDark }, ]) : []; return (

{ if ((e.target as HTMLElement).matches(":focus-visible")) setFocusWithin(true); } : undefined} onBlurCapture={ guidesAllowed ? (e) => { if (!e.currentTarget.contains(e.relatedTarget as Node | null)) { setFocusWithin(false); touch(); } } : undefined } style={vars} className={cn( "relative isolate aspect-(--stage-ar) w-full origin-(--zoom-origin) overflow-hidden bg-surface-product", "transition-transform duration-200 data-zoom:scale-[1.9] motion-reduce:transition-none", EASE_OUT, className, )} > {/* blanks: every colourway mounted, one visible */} {blanks.map((b) => ( // eslint-disable-next-line @next/next/no-img-element {b.name

{ if (el?.complete && el.naturalWidth) setLoaded((l) => (l[b.v.src] ? l : { ...l, [b.v.src]: true })); }} onLoad={() => setLoaded((l) => (l[b.v.src] ? l : { ...l, [b.v.src]: true }))} className={cn( "pointer-events-none absolute inset-0 size-full object-cover transition-opacity", b.name === activeName ? cn("opacity-100 duration-150", EASE_OUT) : cn("opacity-0 duration-100", EASE_EXIT), "motion-reduce:transition-none", )} /> ))} {d.tint ? ( ) : null} {!ready ? : null} {/* print area */}

{[ "-start-1 -top-1", "-end-1 -top-1", "-start-1 -bottom-1", "-end-1 -bottom-1", ].map((pos) => ( ))} {!art && !hasText && !quiet ? ( Pick art or add a line ) : null} {art && edit ? ( ) : null} {art ? (

{artSrcs.map((a) => ( // eslint-disable-next-line @next/next/no-img-element {a.active

))} {edit ? ( <> ) : null}

) : null} {hasText ? ( ) : null}

); } 34:T45b,"use client"; import { DemoFrame } from "../_shared/demo-frame"; import { ArtPicker } from "../art-picker/art-picker"; import { ColorSwap } from "../color-swap/color-swap"; import { CustomizerAddBar } from "../customizer-add-bar/customizer-add-bar"; import { GarmentStage } from "../garment-preview/garment-preview"; import { Section } from "../_shared/section"; import { RecentDesigns } from "./recent-designs"; export function RecentDesignsDemo({ brand }: { brand?: string }) { return (

); } export default RecentDesignsDemo; 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":"Recent designs"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Recent designs"}],["$","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":"Designs saved from the customizer, remembered in localStorage per brand and shown as small stage thumbnails. Click to load one back onto the stage; designed loading and empty states."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"recent-designs","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/recent-designs/recent-designs.tsx","code":"$31"},{"path":"blocks/customizer/_shared/recent.ts","code":"$32"},{"path":"blocks/customizer/_shared/stage-canvas.tsx","code":"$33"},{"path":"blocks/customizer/recent-designs/demo.tsx","code":"$34"},{"path":"blocks/customizer/recent-designs/meta.ts","code":"import type { BlockMeta } from \"../../../lib/block-meta\";\n\nexport const recentDesignsMeta: BlockMeta = {\n slug: \"recent-designs\",\n title: \"Recent designs\",\n description:\n \"Designs saved from the customizer, remembered in localStorage per brand and shown as small stage thumbnails. Click to load one back onto the stage; designed loading and empty states.\",\n group: \"customizer\",\n kobraDeps: [\"empty\", \"skeleton\"],\n files: [\n \"blocks/customizer/recent-designs/recent-designs.tsx\",\n \"blocks/customizer/_shared/recent.ts\",\n \"blocks/customizer/_shared/stage-canvas.tsx\",\n ],\n props: [{ name: \"className\", type: \"string\", description: \"Layout slotting on the root.\" }],\n tags: [\"customizer\", \"storage\", \"thumbnails\"],\n status: \"ready\",\n};\n"}]}],"props":"$L35"}],"$L36"]}]