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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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:T1428,"use client"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; import { ArtPicker } from "../art-picker/art-picker"; import { ArtUpload } from "../art-upload/art-upload"; import { ChoicePills } from "../_shared/choice-pills"; import { ColorSwap } from "../color-swap/color-swap"; import { CustomizerAddBar } from "../customizer-add-bar/customizer-add-bar"; import { GarmentStage } from "../garment-preview/garment-preview"; import { MakeYourOwnCta } from "../make-your-own-cta/make-your-own-cta"; import { PlacementControls } from "../placement-controls/placement-controls"; import { TextLineEditor } from "../text-line-editor/text-line-editor"; import { useCustomizer } from "../_shared/customizer-context"; import { Section } from "../_shared/section"; import { SizePicker } from "../_shared/size-section"; export type CustomizerLayoutVariant = "split" | "stacked" | "minimal"; function GarmentSection({ index }: { index: number }) { const { options, config, actions } = useCustomizer(); return (

({ value: g.id, label: g.label }))} value={config.garmentId} onValueChange={actions.setGarment} />

); } function ArtSection({ index }: { index: number }) { const { config } = useCustomizer(); return (

Library Your art{config.art.kind === "upload" ? " (on)" : ""}

); } /** * The full customizer screen. Needs a . * split stage sticky at the start (7/5 from lg), numbered sections 01 garment, 02 color, 03 art, * 04 text, 05 placement, 06 size, price + Add bar pinned to the bottom of the rail * stacked one column, mobile first: the stage stays pinned under the top edge while controls scroll * minimal stage + color + size only (for a PDP "customize" tab) */ export function CustomizerLayout({ variant = "split", colors, customColor, className, }: { variant?: CustomizerLayoutVariant; /** Offer only these colorway names in the minimal layout (the PDP product's colors). */ colors?: string[]; customColor?: boolean; className?: string; }) { const { derived } = useCustomizer(); if (variant === "minimal") { return (

); } const sections = ( <> ); if (variant === "stacked") { return (

{sections}

); } return (

{sections}

{derived.garment.label}, {derived.colorway.name}

); } export default CustomizerLayout; 32: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; 33:T1c79,"use client"; import { useState } from "react"; import { Input } from "@/components/ui/input"; import { ColorPalette, COLOR_WHEEL } from "@/components/ui/color-palette"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { toHex } from "../_shared/color"; import { cn } from "@/lib/utils"; import { ColorDots } from "../_shared/color-dots"; import { useCustomizer } from "../_shared/customizer-context"; import { Section } from "../_shared/section"; import { FOCUS_RING } from "../_shared/motion"; /* Same geometry as Kobra's wheel: 19 discs (ring 2: 12, ring 1: 6, centre: 1). */ const RIM_RADIUS = 0.4; const RING = { 0: 0, 1: 0.3405, 2: 0.5986 } as const; const DISC_R = 0.2366 * RIM_RADIUS * 100; function swatchAt(clientX: number, clientY: number, box: DOMRect): string | null { const x = ((clientX - box.left) / box.width) * 100 - 50; const y = ((clientY - box.top) / box.height) * 100 - 50; for (let i = COLOR_WHEEL.length - 1; i >= 0; i -= 1) { const s = COLOR_WHEEL[i]!; const dist = RIM_RADIUS * 100 * RING[s.ring]; const a = ((s.angle - 90) * Math.PI) / 180; if (Math.hypot(x - Math.cos(a) * dist, y - Math.sin(a) * dist) <= DISC_R) return s.color; } return null; } function CustomColor({ hex, active, onPick }: { hex?: string; active: boolean; onPick: (hex: string) => void }) { const [draft, setDraft] = useState(hex ?? "#a9c1e8"); const [open, setOpen] = useState(false); const apply = (css: string) => { const h = toHex(css); setDraft(h); onPick(h); }; return ( { const s = swatchAt(e.clientX, e.clientY, e.currentTarget.getBoundingClientRect()); if (s) apply(s); }} />

Hex setDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && /^#?[0-9a-f]{6}$/i.test(draft)) apply(draft.startsWith("#") ? draft : `#${draft}`); }} onBlur={() => /^#[0-9a-f]{6}$/i.test(draft) && apply(draft)} className="tabular h-10 font-micro" />

); } /** * Garment colour: real colourways first (swapped, never recoloured); a custom colour only where the * garment ships a silhouette mask (`tint`) and the brand allows it. A garment with one colourway * shows its name read-only instead of a one-item picker. */ export function ColorSwap({ variant = "dots", index, colors: allowed, customColor = true, className, }: { variant?: "dots" | "cards"; /** Offer only these colorway names (case-insensitive), e.g. the PDP product's own colors. */ colors?: string[]; /** Offer the custom colour picker when the brand and garment allow it. */ customColor?: boolean; /** Section number; omit for a bare control. */ index?: number; className?: string; }) { const { config, derived, options, actions } = useCustomizer(); const all = derived.garment.colors; const wanted = allowed?.map((n) => n.toLowerCase()); const filtered = wanted ? all.filter((c) => wanted.includes(c.name.toLowerCase())) : all; const colors = filtered.length ? filtered : all; const custom = customColor && options.allowCustomColor && !!derived.garment.tint; const name = config.color === "Custom" ? `Custom ${config.customColor}` : config.color; const body = colors.length < 2 && !custom ? (

{colors[0].name} is the only colour for this garment.

) : variant === "cards" ? (

{colors.map((c) => { const on = config.color === c.name; const view = c.views.front!; return ( ); })}

) : (

({ value: c.name, label: c.name, hex: c.hex }))} /> {custom ? : null}

); const content = (

{body} {index === undefined ?

{name}

: null}

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

{body}

); } export default ColorSwap; 34:Te6c,"use client"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; import { useCustomizer } from "../_shared/customizer-context"; import { EASE_OUT, FOCUS_RING } from "../_shared/motion"; import { Section } from "../_shared/section"; import type { ArtAsset } from "../_shared/types"; /** * Grid of the brand's prints, shown on the colour of the garment you have picked (art variant that * suits the ground). The active print is ringed and loads onto the stage. A horizontal Kobra * scroll-area below md, a grid from md up. `designs` overrides the provider's art list. */ export function ArtPicker({ designs, index, className, }: { designs?: ArtAsset[]; index?: number; className?: string; }) { const { config, derived, options, actions } = useCustomizer(); const list = designs ?? options.art; const current = config.art.kind === "library" ? config.art.id : null; const ground = derived.tint?.hex ?? derived.colorway.hex; const body = list.length === 0 ? (

No prints yet. Upload your own below.

) : (

{list.map((a) => { const on = a.id === current; return ( ); })}

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

{body}

); } export default ArtPicker; 35:Tbfb,"use client"; import { IconRefresh } from "@tabler/icons-react"; import { useEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Dropzone } from "@/components/ui/magnetic-dropzone"; import { cn } from "@/lib/utils"; import { useCustomizer } from "../_shared/customizer-context"; import { Section } from "../_shared/section"; const MAX = 6 * 1024 * 1024; /** * Drop a PNG (or WebP/JPEG) onto the print. Kobra's magnetic dropzone validates type and size; * the file stays in the browser (a blob URL) and goes straight onto the stage. Reset puts the * first library print back. Transparent PNGs print best, and dark garments cannot swap ink for * an upload, so the note says so. */ export function ArtUpload({ index, className, maxSize = MAX }: { index?: number; className?: string; maxSize?: number }) { const { config, options, actions } = useCustomizer(); const [round, setRound] = useState(0); const [error, setError] = useState(null); const url = useRef(null); useEffect( () => () => { if (url.current) URL.revokeObjectURL(url.current); }, [], ); const uploaded = config.art.kind === "upload" ? config.art : null; const onFiles = (files: File[]) => { const file = files[0]; if (!file) return; const src = URL.createObjectURL(file); const img = new Image(); img.onload = () => { if (url.current) URL.revokeObjectURL(url.current); url.current = src; setError(null); actions.setUpload({ src, name: file.name.replace(/\.[^.]+$/, ""), aspect: img.naturalWidth / img.naturalHeight }); }; img.onerror = () => { URL.revokeObjectURL(src); setError("That file could not be read as an image."); }; img.src = src; }; const reset = () => { if (url.current) URL.revokeObjectURL(url.current); url.current = null; const first = options.art[0]; if (first) actions.selectArt(first.id); else actions.clearArt(); setRound((n) => n + 1); setError(null); }; const body = (

{error ?? (uploaded ? `${uploaded.name} is on the print.` : "PNG with a transparent background prints best. Up to 6 MB.")}

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

{body}

); } export default ArtUpload; 36:T1c9e,"use client"; import { IconAlignCenter, IconAlignLeft, IconAlignRight } from "@tabler/icons-react"; import { useId, useRef, useState } from "react"; import { ColorPicker } from "@/components/ui/color-picker"; import { Input } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Slider } from "@/components/ui/slider"; import { Toggle } from "@/components/ui/toggle"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; import { toHex } from "../_shared/color"; import { ColorDots } from "../_shared/color-dots"; import { useCustomizer } from "../_shared/customizer-context"; import { FOCUS_RING } from "../_shared/motion"; import { Section } from "../_shared/section"; import { shakeOnce } from "../_shared/shake"; import type { TextAlign } from "../_shared/types"; const ArcIcon = () => ( ); /** * Text line for the print: brand display font (--kc-display), CAPS when the brand token says so, * live on the stage. Max length with a tabular counter and one shake on overflow, size slider, * alignment, ink swatches + picker, and an arc toggle (SVG textPath on the stage). */ export function TextLineEditor({ maxLength = 24, index, className, }: { maxLength?: number; index?: number; className?: string; }) { const { config, options, derived, actions } = useCustomizer(); const t = config.text; const fieldId = useId(); const wrap = useRef(null); const [full, setFull] = useState(false); const inks = options.inkSet.map((hex) => ({ value: hex, label: hex.toUpperCase(), hex })); const active = t.color || derived.textColor; const body = (

Text line

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

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

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

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

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

Ink

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

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

{body}

); } export default TextLineEditor; 37:T137c,"use client"; import { IconAlignCenter } from "@tabler/icons-react"; import { useId } from "react"; import { Button } from "@/components/ui/button"; import { Slider } from "@/components/ui/slider"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; import { ChoicePills, type Choice } from "../_shared/choice-pills"; import { useCustomizer } from "../_shared/customizer-context"; import { artHeightFrac, maxScale, toPrintify, type PlacementPresetId } from "../_shared/print-area"; import { Section } from "../_shared/section"; const CANVAS = { w: 4500, h: 5100 }; /** Human label; the vendor mapping lives in the tooltip (hover or focus). */ function Hint({ id, label, hint }: { id: string; label: string; hint: string }) { return ( } > {label} {hint} ); } /** * Placement: width percent and top offset as Printify-style `placement { widthPct, topPx }` * (px on the vendor canvas), plus presets. Sliders step by 1% / 25px; arrow keys nudge, * PageUp/PageDown take larger steps. Numbers are tabular so nothing shifts as they change. */ export function PlacementControls({ index, className }: { index?: number; className?: string }) { const { config, derived, actions } = useCustomizer(); const id = useId(); const canvas = derived.garment.printifyCanvas ?? CANVAS; const p = config.placement; const pf = toPrintify(p, derived.artAspect, canvas); const maxPct = Math.floor(maxScale(derived.artAspect, derived.printArea) * 100); const hf = artHeightFrac(p.scale, derived.artAspect, derived.printArea); const maxTop = Math.max(0, Math.floor((1 - hf) * canvas.h)); const noArt = !derived.art; const presets: Choice[] = [ { value: "left-chest", label: "Left chest" }, { value: "center-chest", label: "Center chest" }, { value: "full-front", label: "Full front" }, { value: "back", label: "Back", disabled: !derived.hasBack, hint: "No back view for this garment" }, ]; const body = (

actions.applyPreset(v as PlacementPresetId)} />

{Math.round(p.scale * 100)}%

actions.setPlacement({ scale: (Array.isArray(v) ? v[0] : v) / 100 })} />

{pf.topPx} px

actions.setPlacement({ top: (Array.isArray(v) ? v[0] : v) / canvas.h })} />

Centre {Math.round(p.cx * 100)}% across. Preview only: final placement is confirmed at order.

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

{body}

); } export default PlacementControls; 38:Ta73,"use client"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import { useCustomizer } from "../_shared/customizer-context"; import { EASE_OUT } from "../_shared/motion"; import { useTween } from "../_shared/use-tween"; /** * Live price: base garment + the options that are actually on (hoodie upcharge, back print, text * line, upload, size). Rows exist only when real; with no options it is one price and nothing * else. The total eases between values in tabular digits, so it never shifts the layout. * receipt rows, a hairline, the total (default) * inline total plus a one-line hint of the latest delta (mockup: "$34.00 $4.00 for custom text") */ export function PriceDelta({ variant = "receipt", className, }: { variant?: "receipt" | "inline"; className?: string; }) { const { derived } = useCustomizer(); const { lines, total, currency } = derived.price; const shown = useTween(total); const fmt = (n: number) => formatMoney({ amount: n, currency }); const deltas = lines.slice(1); if (variant === "inline") { const last = deltas[deltas.length - 1]; return (

{fmt(shown)} {last ? `${fmt(last.amount)} for ${last.label.toLowerCase()}` : lines[0]?.label}

); } return (

{l.label}: {i === 0 ? fmt(l.amount) : `+${fmt(l.amount)}`}
Total: {fmt(shown)}

); } export default PriceDelta; 39:Te04,"use client"; import { useEffect, useRef } from "react"; import { IconBookmark, IconCheck } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { PendingButton } from "../../pdp/_shared/pending-button"; import { PriceDelta } from "../price-delta/price-delta"; import { useCustomizer } from "../_shared/customizer-context"; import { EASE_OUT } from "../_shared/motion"; import { useCustomizerCart } from "../_shared/use-customizer-cart"; import { useSaveDesign } from "../_shared/use-save-design"; /** * Sticky add bar: live total and Add to cart (Kobra busy contract: spinner turns in, label turns * out, never disabled), with Save design beside it. Sticks to the bottom of its scroll parent, so * it pins to the viewport on mobile and to the control rail on desktop. */ export function CustomizerAddBar({ className, sticky = true }: { className?: string; sticky?: boolean }) { const { derived } = useCustomizer(); const cart = useCustomizerCart(); const design = useSaveDesign(); const bar = useRef(null); // Publish the bar height (same var as pdp-sticky-buy-bar) so toasts stack above it, and keep focus // scrolling clear of it. useEffect(() => { const el = bar.current; if (!el || !sticky) return; const set = () => { document.body.style.setProperty("--kc-sticky-offset", `${el.offsetHeight}px`); document.documentElement.style.scrollPaddingBottom = `${el.offsetHeight}px`; }; set(); const ro = new ResizeObserver(set); ro.observe(el); return () => { ro.disconnect(); document.body.style.removeProperty("--kc-sticky-offset"); document.documentElement.style.removeProperty("scroll-padding-bottom"); }; }, [sticky]); const empty = !derived.art && !derived.price.lines.some((l) => l.id === "text"); return (

void cart.add()} className="h-11 flex-1 text-base" aria-describedby={empty ? "kc-empty-note" : undefined} > Add to cart

{empty ? (

Nothing on the print yet. Pick art or add a line of text.

) : null}

); } export default CustomizerAddBar; 3a:Tb94,"use client"; import { IconArrowUpRight } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import { makeYourOwnUrl } from "../../../lib/commerce/adapters/mrch"; import { useCustomizer } from "../_shared/customizer-context"; /** * "Make your own with MRCH": the sellmerch.ai make-your-own intake, seeded with the design in * play (`makeYourOwnUrl`: base64url {v:1, p, t}, p trimmed to 600, utm_medium = placement). * The link is external, rel noopener, and carries the analytics data attributes the brand kit reads. */ export function MakeYourOwnCta({ variant = "card", placement = "make-your-own-card", title, className, }: { variant?: "card" | "link"; placement?: string; /** Design title for the prompt; defaults to the design on the stage. */ title?: string; className?: string; }) { const { options, derived } = useCustomizer(); const design = title ?? derived.art?.title ?? options.designTitle; const slug = derived.art?.id ?? "custom"; const href = makeYourOwnUrl({ slug: options.brand.slug, medium: placement, title: `Customize ${design}`, prompt: `I want a custom ${derived.garment.label.toLowerCase()} based on the "${design}" design from ${options.brand.name}.`, content: `customize-${slug}`, }); const anchor = { href, target: "_blank", rel: "noopener", "data-mp-placement": placement, "data-design-slug": slug, "data-garment": derived.garment.id, "data-color": derived.colorway.name.toLowerCase(), } as const; if (variant === "link") { return ( Make your own with MRCH ); } return ( ); } export default MakeYourOwnCta; 3b: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}; } 3c: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}

); } 3d:T1977,