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:Td47,"use client"; import { IconCheck, IconLink } from "@tabler/icons-react"; import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import { Button } from "@/components/ui/button"; import { QRCode } from "@/components/ui/qr-code"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import { designUrl } from "../_shared/codec"; import { useCustomizer } from "../_shared/customizer-context"; import { StageCanvas } from "../_shared/stage-canvas"; const FALLBACK_BASE = "https://www.mrch.shop/make"; /** * A shareable card for the design on the stage. html-to-image is not installed, so the card is * itself the artefact: the layered preview (same CSS composite, guides off) beside the brand, * title, spec and price, with a Kobra QR code of the saved-design URL (`#d=` hash). The QR ripples * when the design changes. `baseUrl` is where the hash lands (defaults to the current page). */ export function DesignShareCard({ baseUrl, className }: { baseUrl?: string; className?: string }) { const { config, options, derived } = useCustomizer(); // current page once mounted; server and first client render agree on the fallback const page = useSyncExternalStore( () => () => {}, () => window.location.href.split("#")[0], () => FALLBACK_BASE, ); const base = baseUrl ?? page; const [copied, setCopied] = useState(false); const timer = useRef(0); useEffect(() => () => window.clearTimeout(timer.current), []); const url = designUrl(config, base); const title = derived.art?.title ?? (config.text.enabled && config.text.value) ?? "Custom design"; const copy = async () => { try { await navigator.clipboard.writeText(url); setCopied(true); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setCopied(false), 1800); } catch { /* clipboard blocked: the QR still carries the link */ } }; return (

{options.brand.name}

{title}

{derived.garment.label} / {config.color === "Custom" ? config.customColor : config.color} / {config.size}

{formatMoney({ amount: derived.price.total, currency: derived.price.currency })}

); } export default DesignShareCard; 32: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}

); } 33:Tf10,import type { ArtAsset, BlankGarment, CustomizerConfig } from "./types"; import { clampPlacement, type PlacementPresetId } from "./print-area.ts"; /** Config <-> URL hash. Compact JSON, base64url. Uploads (blob URLs) are dropped. */ type Wire = { v: 1; g: string; c: string; cc?: string; s: string; sd: "front" | "back"; a?: string; p: [number, number, number]; pr: string; t?: { v: string; z: number; al: string; c: string; cu: 0 | 1; y: number }; }; const b64 = (s: string) => btoa(String.fromCharCode(...new TextEncoder().encode(s))) .replace(/\+/g, "-") .replace(/\//g, "_") .replace(/=+$/, ""); const unb64 = (s: string) => { const pad = s.replace(/-/g, "+").replace(/_/g, "/") + "=".repeat((4 - (s.length % 4)) % 4); return new TextDecoder().decode(Uint8Array.from(atob(pad), (c) => c.charCodeAt(0))); }; const r3 = (n: number) => Math.round(n * 1000) / 1000; export function encodeConfig(c: CustomizerConfig): string { const w: Wire = { v: 1, g: c.garmentId, c: c.color, s: c.size, sd: c.side, p: [r3(c.placement.scale), r3(c.placement.cx), r3(c.placement.top)], pr: c.preset, }; if (c.customColor) w.cc = c.customColor; if (c.art.kind === "library") w.a = c.art.id; if (c.text.enabled && c.text.value) w.t = { v: c.text.value, z: c.text.size, al: c.text.align, c: c.text.color, cu: c.text.curve ? 1 : 0, y: r3(c.text.y) }; return b64(JSON.stringify(w)); } /** Decode and validate against what this brand offers; returns null when unusable. */ export function decodeConfig( raw: string, base: CustomizerConfig, garments: BlankGarment[], art: ArtAsset[], ): CustomizerConfig | null { try { const w = JSON.parse(unb64(raw)) as Wire; if (w.v !== 1) return null; const garment = garments.find((g) => g.id === w.g); if (!garment) return null; const colorOk = garment.colors.some((c) => c.name === w.c) || (w.c === "Custom" && !!garment.tint && !!w.cc); const color = colorOk ? w.c : garment.defaultColor; const side = w.sd === "back" && garment.colors.find((c) => c.name === color)?.views.back ? "back" : "front"; const asset = art.find((a) => a.id === w.a); const aspect = asset?.aspect ?? 0.8; const view = (garment.colors.find((c) => c.name === color) ?? garment.colors[0]).views[side] ?? garment.colors[0].views.front!; const next: CustomizerConfig = { ...base, garmentId: garment.id, color, customColor: color === "Custom" ? w.cc : undefined, size: typeof w.s === "string" ? w.s : base.size, side, art: asset ? { kind: "library", id: asset.id } : { kind: "none" }, placement: clampPlacement({ scale: w.p[0], cx: w.p[1], top: w.p[2] }, aspect, view.printArea), preset: (w.pr as PlacementPresetId | "custom") ?? "custom", text: w.t ? { enabled: true, value: String(w.t.v).slice(0, 40), size: Math.min(24, Math.max(4, Number(w.t.z) || 10)), align: (["start", "center", "end"].includes(w.t.al) ? w.t.al : "center") as "start" | "center" | "end", color: typeof w.t.c === "string" ? w.t.c : "", curve: w.t.cu === 1, y: Math.min(1, Math.max(0, Number(w.t.y) || 0.9)), } : { ...base.text, enabled: false, value: "" }, }; return next; } catch { return null; } } export const HASH_KEY = "d"; export function designUrl(config: CustomizerConfig, origin?: string): string { const base = origin ?? (typeof window !== "undefined" ? window.location.href.split("#")[0] : ""); return `${base}#${HASH_KEY}=${encodeConfig(config)}`; } export function readHash(): string | null { if (typeof window === "undefined") return null; const m = window.location.hash.match(new RegExp(`[#&]${HASH_KEY}=([^&]+)`)); return m ? m[1] : null; } 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":"Design share card"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Design share card"}],["$","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":"A shareable card of the design: layered CSS preview (no snapshot library needed), brand, title, spec and price, with a Kobra QR code of the saved-design URL that ripples when the design changes."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"design-share-card","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/design-share-card/design-share-card.tsx","code":"$31"},{"path":"blocks/customizer/_shared/stage-canvas.tsx","code":"$32"},{"path":"blocks/customizer/_shared/codec.ts","code":"$33"},{"path":"blocks/customizer/design-share-card/demo.tsx","code":"\"use client\";\n\nimport { DemoFrame } from \"../_shared/demo-frame\";\nimport { ColorSwap } from \"../color-swap/color-swap\";\nimport { ArtPicker } from \"../art-picker/art-picker\";\nimport { DesignShareCard } from \"./design-share-card\";\n\nexport function DesignShareCardDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n

\n \n \n

\n \n );\n}\n\nexport default DesignShareCardDemo;\n"},{"path":"blocks/customizer/design-share-card/meta.ts","code":"import type { BlockMeta } from \"../../../lib/block-meta\";\n\nexport const designShareCardMeta: BlockMeta = {\n slug: \"design-share-card\",\n title: \"Design share card\",\n description:\n \"A shareable card of the design: layered CSS preview (no snapshot library needed), brand, title, spec and price, with a Kobra QR code of the saved-design URL that ripples when the design changes.\",\n group: \"customizer\",\n kobraDeps: [\"qr-code\", \"button\"],\n files: [\n \"blocks/customizer/design-share-card/design-share-card.tsx\",\n \"blocks/customizer/_shared/stage-canvas.tsx\",\n \"blocks/customizer/_shared/codec.ts\",\n ],\n props: [\n { name: \"baseUrl\", type: \"string\", description: \"Page the #d= hash lands on; defaults to the current page.\" },\n { name: \"className\", type: \"string\", description: \"Layout slotting on the root.\" },\n ],\n tags: [\"customizer\", \"share\", \"qr\"],\n status: \"ready\",\n};\n"}]}],"props":"$L34"}],"$L35"]}]