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:Tf47,"use client"; import { IconFrame, IconZoomIn, IconZoomOut } from "@tabler/icons-react"; import { Toggle } from "@/components/ui/toggle"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { useCustomizer } from "../_shared/customizer-context"; import { StageCanvas } from "../_shared/stage-canvas"; const CHIP = "relative border border-rule bg-canvas/85 text-ink backdrop-blur-sm before:absolute before:-inset-1.5 before:content-[''] hover:bg-canvas"; /** * Garment stage: the art composited onto the real blank, draggable inside the print area. * Needs a . Front/back toggle appears only when the blank has a back view. */ export function GarmentStage({ className, chrome = true, caption = true, }: { className?: string; /** Front/back, zoom and guides toggles over the stage. */ chrome?: boolean; /** "Preview. The printed shirt may vary slightly." */ caption?: boolean; }) { const { config, options, derived, actions, ui } = useCustomizer(); return (

actions.setText({ y }), }} /> {chrome ? (

{derived.hasBack ? ( next[0] && actions.setSide(next[0] as "front" | "back")} className={cn(CHIP, "rounded-control p-0")} > Front Back ) : null}

{ui.zoom ? : }

) : null}

{caption ? (

Preview. The printed {derived.garment.kind === "hoodie" ? "hoodie" : "garment"} may vary slightly. {derived.garment.label} / {derived.side}

) : null} ); } export default GarmentStage; 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: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:T1977,/** * Print-area math for the customizer. Pure functions, no DOM, no React. * * Four coordinate spaces, always converted through these helpers: * * 1. IMAGE PX pixels of the blank photo (e.g. 1536 x 1536). The detected * print area (`plates.detected.json` printBox) is a Rect here. * 2. IMAGE PERCENT the same rect as percentages of the photo. This is what CSS * uses (`--pa-x/--pa-y/--pa-w/--pa-h`), so the stage scales * with its container and never needs a resize observer. * 3. PLACEMENT art relative to the print area, as fractions (0..1). This is * the single source of truth stored in the config: * scale art width / print-area width (Printify `widthPct`) * cx art centre x / print-area width (0.5 = centred) * top art top edge / print-area height (Printify `topPx` / canvas height) * Art height follows from its aspect ratio, never stored. * 4. PRINTIFY the vendor canvas (brand.json `printArea`, e.g. 4500 x 5100) * and `placement { widthPct, topPx }`, plus the product API's * `{ x, y, scale, angle }` image placement (x,y = centre, 0..1). * * Because placement is stored as fractions, the small difference between the * detected print-area aspect (e.g. 692x771) and the Printify canvas aspect * (4500x5100) scales proportionally rather than drifting. Width is exact; * vertical offsets differ by at most the aspect ratio difference (about 2%). */ export type Rect = { x: number; y: number; w: number; h: number }; export type Size = { w: number; h: number }; export type ArtPlacement = { scale: number; cx: number; top: number }; export type PercentRect = { left: number; top: number; width: number; height: number }; export const MIN_SCALE = 0.08; export const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n)); /** Art height as a fraction of print-area height. */ export function artHeightFrac(scale: number, aspect: number, pa: Size): number { return (scale * pa.w) / (aspect * pa.h); } /** Largest scale that still fits the print area in both axes. */ export function maxScale(aspect: number, pa: Size): number { return Math.min(1, (aspect * pa.h) / pa.w); } /** Keep art fully inside the print area. */ export function clampPlacement(p: ArtPlacement, aspect: number, pa: Size): ArtPlacement { const scale = clamp(p.scale, MIN_SCALE, Math.max(MIN_SCALE, maxScale(aspect, pa))); const hf = artHeightFrac(scale, aspect, pa); return { scale, cx: clamp(p.cx, scale / 2, 1 - scale / 2), top: clamp(p.top, 0, Math.max(0, 1 - hf)), }; } /** Art box in print-area px. */ export function placementToRect(p: ArtPlacement, aspect: number, pa: Size): Rect { const hf = artHeightFrac(p.scale, aspect, pa); return { x: (p.cx - p.scale / 2) * pa.w, y: p.top * pa.h, w: p.scale * pa.w, h: hf * pa.h }; } export function rectToPlacement(r: Rect, pa: Size): ArtPlacement { return { scale: r.w / pa.w, cx: (r.x + r.w / 2) / pa.w, top: r.y / pa.h }; } /** Print-area px rect to image px (adds the print area origin). */ export function printAreaRectToImage(r: Rect, pa: Rect): Rect { return { x: pa.x + r.x, y: pa.y + r.y, w: r.w, h: r.h }; } export function toPercent(r: Rect, img: Size): PercentRect { return { left: (r.x / img.w) * 100, top: (r.y / img.h) * 100, width: (r.w / img.w) * 100, height: (r.h / img.h) * 100, }; } /** Move by a delta expressed in print-area fractions; result is clamped. */ export function movePlacement( p: ArtPlacement, dx: number, dy: number, aspect: number, pa: Size, ): ArtPlacement { return clampPlacement({ ...p, cx: p.cx + dx, top: p.top + dy }, aspect, pa); } /** Resize keeping the top-start corner fixed (what dragging the end corner does). */ export function resizeFromCorner(p: ArtPlacement, newScale: number, aspect: number, pa: Size): ArtPlacement { const left = p.cx - p.scale / 2; const scale = clamp(newScale, MIN_SCALE, Math.max(MIN_SCALE, maxScale(aspect, pa))); return clampPlacement({ scale, cx: left + scale / 2, top: p.top }, aspect, pa); } /** Snap the horizontal centre to the middle when within `threshold` (fraction). */ export function snapCenter(p: ArtPlacement, threshold = 0.02): { placement: ArtPlacement; snapped: boolean } { if (Math.abs(p.cx - 0.5) <= threshold && p.cx !== 0.5) return { placement: { ...p, cx: 0.5 }, snapped: true }; return { placement: p, snapped: p.cx === 0.5 }; } export type PlacementPresetId = "center-chest" | "left-chest" | "full-front" | "back"; /** Preset placements. `back` is the same as full-width but on the back view. */ export function presetPlacement(id: PlacementPresetId, aspect: number, pa: Size): ArtPlacement { const base: Record = { "center-chest": { scale: 0.7, cx: 0.5, top: 0.04 }, "left-chest": { scale: 0.26, cx: 0.77, top: 0.03 }, "full-front": { scale: 1, cx: 0.5, top: 0 }, back: { scale: 0.86, cx: 0.5, top: 0.04 }, }; return clampPlacement(base[id], aspect, pa); } export type PrintifyPlacement = { /** brand.json garments[].placement.widthPct (0..1 of print-area width). */ widthPct: number; /** brand.json garments[].placement.topPx, in vendor canvas px. */ topPx: number; /** Extra: left offset in vendor canvas px (brand.json assumes centred). */ leftPx: number; /** Printify product API image placement: centre x/y 0..1, scale = art width / area width. */ image: { x: number; y: number; scale: number; angle: 0 }; }; export function toPrintify(p: ArtPlacement, aspect: number, canvas: Size): PrintifyPlacement { const hf = artHeightFrac(p.scale, aspect, canvas); return { widthPct: round(p.scale, 4), topPx: Math.round(p.top * canvas.h), leftPx: Math.round((p.cx - p.scale / 2) * canvas.w), image: { x: round(p.cx, 4), y: round(p.top + hf / 2, 4), scale: round(p.scale, 4), angle: 0 }, }; } export function fromPrintify( pl: { widthPct: number; topPx: number; leftPx?: number }, aspect: number, canvas: Size, pa: Size, ): ArtPlacement { const cx = pl.leftPx === undefined ? 0.5 : pl.leftPx / canvas.w + pl.widthPct / 2; return clampPlacement({ scale: pl.widthPct, cx, top: pl.topPx / canvas.h }, aspect, pa); } export function round(n: number, digits = 3): number { const f = 10 ** digits; return Math.round(n * f) / f; } 35:Tbc0,import type { ArtPlacement, PlacementPresetId, Rect, Size } from "./print-area"; export type Side = "front" | "back"; export type Blend = "multiply" | "normal"; /** One photographed view of a blank (front or back) in one colorway. */ export type BlankView = { src: string; width: number; height: number; /** Detected print area, in image px of `src`. */ printArea: Rect; garmentBox?: Rect; blend: Blend; }; export type BlankColorway = { name: string; hex: string; blend: Blend; views: Partial>; }; export type BlankGarment = { id: string; label: string; kind: string; defaultColor: string; /** Default colorway, front view (flat copy of colors[default].views.front). */ src: string; width: number; height: number; printArea: Rect; colors: BlankColorway[]; /** Silhouette mask of the White colorway; lets any hex be tinted when no real colorway exists. */ tint?: { base: string; mask: string }; /** Vendor canvas for Printify math (brand.json garments[].printArea). */ printifyCanvas?: Size; }; export type ArtAsset = { id: string; designSlug: string; title: string; style?: string; brands?: string[]; src: { onLight: string; onDark: string }; /** width / height */ aspect: number; width?: number; height?: number; inkVariants?: boolean; }; export type Pricing = { currency: string; /** Price of `baseGarmentId`. */ base: number; baseGarmentId: string; /** Upcharge over base per garment id (e.g. hoodie). */ upcharge: Record; backPrint: number; textLine: number; upload: number; sizeUpcharge: Record; }; export type TextAlign = "start" | "center" | "end"; export type TextLine = { enabled: boolean; value: string; /** Font size, % of print-area width (4..24). */ size: number; align: TextAlign; /** Ink hex. */ color: string; /** Arc the line over an arch. */ curve: boolean; /** Vertical centre, fraction of print-area height. */ y: number; }; export type ArtSource = { kind: "none" } | { kind: "library"; id: string } | { kind: "upload"; src: string; name: string; aspect: number }; /** * The customizer config: everything needed to reproduce the stage and the order. * Serialisable except an upload's blob URL (the hash codec drops uploads). */ export type CustomizerConfig = { v: 1; garmentId: string; /** Colorway name, or "Custom" when `customColor` is set. */ color: string; /** Hex tint for garments without a real colorway (needs `garment.tint`). */ customColor?: string; size: string; side: Side; art: ArtSource; placement: ArtPlacement; preset: PlacementPresetId | "custom"; text: TextLine; }; export type PriceLine = { id: string; label: string; amount: number }; export type PriceBreakdown = { lines: PriceLine[]; total: number; currency: string }; export type CustomizerBrand = { slug: string; name: string; caps: boolean }; export const DEFAULT_SIZES = ["S", "M", "L", "XL", "2XL"]; 36:T595,"use client"; import { DemoFrame } from "../_shared/demo-frame"; import { GarmentStage } from "./garment-preview"; import { useCustomizer } from "../_shared/customizer-context"; import { ChoicePills } from "../_shared/choice-pills"; function Controls() { const { options, config, actions, derived } = useCustomizer(); return (

({ value: g.id, label: g.label }))} value={config.garmentId} onValueChange={actions.setGarment} /> ({ value: c.name }))} value={config.color} onValueChange={actions.setColor} /> ({ value: a.id, label: a.title.split(" ").slice(0, 2).join(" ") }))} value={config.art.kind === "library" ? config.art.id : ""} onValueChange={actions.selectArt} />

); } export function GarmentPreviewDemo({ brand }: { brand?: string }) { return (

); } export default GarmentPreviewDemo; 37:T4b7,import type { BlockMeta } from "../../../lib/block-meta"; export const garmentPreviewMeta: BlockMeta = { slug: "garment-preview", title: "Garment stage", description: "The art composited onto a real garment photo: dashed print area with corner handles, draggable and resizable art clamped to the print area, colourway swap, front/back, zoom.", group: "customizer", kobraDeps: ["toggle", "toggle-group", "skeleton"], files: [ "blocks/customizer/garment-preview/garment-preview.tsx", "blocks/customizer/_shared/stage-canvas.tsx", "blocks/customizer/_shared/customizer-context.tsx", "blocks/customizer/_shared/print-area.ts", "blocks/customizer/_shared/types.ts", "public/customizer/blanks.json", "public/customizer/art.json", ], props: [ { name: "className", type: "string", description: "Layout slotting on the root." }, { name: "chrome", type: "boolean", default: "true", description: "Front/back, print-area and zoom toggles over the stage." }, { name: "caption", type: "boolean", default: "true", description: "The 'preview, may vary slightly' line." }, ], tags: ["customizer", "stage", "print-area", "drag", "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":"Garment stage"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Garment stage"}],["$","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":"The art composited onto a real garment photo: dashed print area with corner handles, draggable and resizable art clamped to the print area, colourway swap, front/back, zoom."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"garment-preview","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/garment-preview/garment-preview.tsx","code":"$31"},{"path":"blocks/customizer/_shared/stage-canvas.tsx","code":"$32"},{"path":"blocks/customizer/_shared/customizer-context.tsx","code":"$33"},{"path":"blocks/customizer/_shared/print-area.ts","code":"$34"},{"path":"blocks/customizer/_shared/types.ts","code":"$35"},{"path":"blocks/customizer/garment-preview/demo.tsx","code":"$36"},{"path":"blocks/customizer/garment-preview/meta.ts","code":"$37"}]}],"props":"$L38"}],"$L39"]}]