2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30: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; 31: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}; } 23:["$","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":["$","$L2c",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":["$","$L2c",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":"Art upload"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Art upload"}],["$","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":"Drop a PNG on the print with Kobra's magnetic dropzone: type and size validated, previewed on the stage instantly, with a reset back to the library art."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"art-upload","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/customizer/art-upload/art-upload.tsx","code":"$30"},{"path":"blocks/customizer/_shared/customizer-context.tsx","code":"$31"},{"path":"blocks/customizer/art-upload/demo.tsx","code":"\"use client\";\n\nimport { DemoFrame } from \"../_shared/demo-frame\";\nimport { GarmentStage } from \"../garment-preview/garment-preview\";\nimport { ArtUpload } from \"./art-upload\";\n\nexport function ArtUploadDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n

\n \n );\n}\n\nexport default ArtUploadDemo;\n"},{"path":"blocks/customizer/art-upload/meta.ts","code":"import type { BlockMeta } from \"../../../lib/block-meta\";\n\nexport const artUploadMeta: BlockMeta = {\n slug: \"art-upload\",\n title: \"Art upload\",\n description:\n \"Drop a PNG on the print with Kobra's magnetic dropzone: type and size validated, previewed on the stage instantly, with a reset back to the library art.\",\n group: \"customizer\",\n kobraDeps: [\"magnetic-dropzone\", \"button\", \"file-badge\"],\n files: [\"blocks/customizer/art-upload/art-upload.tsx\", \"blocks/customizer/_shared/customizer-context.tsx\"],\n props: [\n { name: \"maxSize\", type: \"number\", default: \"6291456\", description: \"Largest accepted file in bytes.\" },\n { name: \"index\", type: \"number\", description: \"Section number; renders the numbered header with its hairline.\" },\n { name: \"className\", type: \"string\", description: \"Layout slotting on the root.\" },\n ],\n tags: [\"customizer\", \"upload\", \"dropzone\"],\n status: \"ready\",\n};\n"}]}],"props":"$L32"}],"$L33"]}]