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/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"],""] 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/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"] 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/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"] 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/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"] 30: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; 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 picker"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Art picker"}],["$","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 brand's prints as a grid, each shown on the colour of the chosen garment with the ink variant that suits it. Active print ringed; Kobra scroll-area rail on mobile."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"art-picker","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/customizer/art-picker/art-picker.tsx","code":"$30"},{"path":"blocks/customizer/_shared/customizer-context.tsx","code":"$31"},{"path":"blocks/customizer/art-picker/demo.tsx","code":"\"use client\";\n\nimport { DemoFrame } from \"../_shared/demo-frame\";\nimport { ColorSwap } from \"../color-swap/color-swap\";\nimport { GarmentStage } from \"../garment-preview/garment-preview\";\nimport { ArtPicker } from \"./art-picker\";\n\nexport function ArtPickerDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n

\n \n \n

\n \n );\n}\n\nexport default ArtPickerDemo;\n"},{"path":"blocks/customizer/art-picker/meta.ts","code":"import type { BlockMeta } from \"../../../lib/block-meta\";\n\nexport const artPickerMeta: BlockMeta = {\n slug: \"art-picker\",\n title: \"Art picker\",\n description:\n \"The brand's prints as a grid, each shown on the colour of the chosen garment with the ink variant that suits it. Active print ringed; Kobra scroll-area rail on mobile.\",\n group: \"customizer\",\n kobraDeps: [\"scroll-area\"],\n files: [\"blocks/customizer/art-picker/art-picker.tsx\", \"blocks/customizer/_shared/customizer-context.tsx\", \"public/customizer/art.json\"],\n props: [\n { name: \"designs\", type: \"ArtAsset[]\", description: \"Overrides the provider's art list.\" },\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\", \"art\", \"grid\", \"star\"],\n status: \"ready\",\n};\n"}]}],"props":"$L32"}],"$L33"]}]