2d:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2e:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2f:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 30:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/0zz-qr4ehfg-y.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/0x4o-jqryzpjy.js","/_next/static/immutable/chunks/35wq0ehn8yo1w.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/40nsmaivjxzl9.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2iimfs9klm8ee.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/1v12dieyr7wjf.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/42c4hv7h_qef7.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2a84g45p9ue92.js","/_next/static/immutable/chunks/174-kkyy6-c5l.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 31: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; 32:T1977,/** * Print-area math for the customizer. Pure functions, no DOM, no React. * * Four coordinate spaces, always converted through these helpers: * * 1. IMAGE PX pixels of the blank photo (e.g. 1536 x 1536). The detected * print area (`plates.detected.json` printBox) is a Rect here. * 2. IMAGE PERCENT the same rect as percentages of the photo. This is what CSS * uses (`--pa-x/--pa-y/--pa-w/--pa-h`), so the stage scales * with its container and never needs a resize observer. * 3. PLACEMENT art relative to the print area, as fractions (0..1). This is * the single source of truth stored in the config: * scale art width / print-area width (Printify `widthPct`) * cx art centre x / print-area width (0.5 = centred) * top art top edge / print-area height (Printify `topPx` / canvas height) * Art height follows from its aspect ratio, never stored. * 4. PRINTIFY the vendor canvas (brand.json `printArea`, e.g. 4500 x 5100) * and `placement { widthPct, topPx }`, plus the product API's * `{ x, y, scale, angle }` image placement (x,y = centre, 0..1). * * Because placement is stored as fractions, the small difference between the * detected print-area aspect (e.g. 692x771) and the Printify canvas aspect * (4500x5100) scales proportionally rather than drifting. Width is exact; * vertical offsets differ by at most the aspect ratio difference (about 2%). */ export type Rect = { x: number; y: number; w: number; h: number }; export type Size = { w: number; h: number }; export type ArtPlacement = { scale: number; cx: number; top: number }; export type PercentRect = { left: number; top: number; width: number; height: number }; export const MIN_SCALE = 0.08; export const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n)); /** Art height as a fraction of print-area height. */ export function artHeightFrac(scale: number, aspect: number, pa: Size): number { return (scale * pa.w) / (aspect * pa.h); } /** Largest scale that still fits the print area in both axes. */ export function maxScale(aspect: number, pa: Size): number { return Math.min(1, (aspect * pa.h) / pa.w); } /** Keep art fully inside the print area. */ export function clampPlacement(p: ArtPlacement, aspect: number, pa: Size): ArtPlacement { const scale = clamp(p.scale, MIN_SCALE, Math.max(MIN_SCALE, maxScale(aspect, pa))); const hf = artHeightFrac(scale, aspect, pa); return { scale, cx: clamp(p.cx, scale / 2, 1 - scale / 2), top: clamp(p.top, 0, Math.max(0, 1 - hf)), }; } /** Art box in print-area px. */ export function placementToRect(p: ArtPlacement, aspect: number, pa: Size): Rect { const hf = artHeightFrac(p.scale, aspect, pa); return { x: (p.cx - p.scale / 2) * pa.w, y: p.top * pa.h, w: p.scale * pa.w, h: hf * pa.h }; } export function rectToPlacement(r: Rect, pa: Size): ArtPlacement { return { scale: r.w / pa.w, cx: (r.x + r.w / 2) / pa.w, top: r.y / pa.h }; } /** Print-area px rect to image px (adds the print area origin). */ export function printAreaRectToImage(r: Rect, pa: Rect): Rect { return { x: pa.x + r.x, y: pa.y + r.y, w: r.w, h: r.h }; } export function toPercent(r: Rect, img: Size): PercentRect { return { left: (r.x / img.w) * 100, top: (r.y / img.h) * 100, width: (r.w / img.w) * 100, height: (r.h / img.h) * 100, }; } /** Move by a delta expressed in print-area fractions; result is clamped. */ export function movePlacement( p: ArtPlacement, dx: number, dy: number, aspect: number, pa: Size, ): ArtPlacement { return clampPlacement({ ...p, cx: p.cx + dx, top: p.top + dy }, aspect, pa); } /** Resize keeping the top-start corner fixed (what dragging the end corner does). */ export function resizeFromCorner(p: ArtPlacement, newScale: number, aspect: number, pa: Size): ArtPlacement { const left = p.cx - p.scale / 2; const scale = clamp(newScale, MIN_SCALE, Math.max(MIN_SCALE, maxScale(aspect, pa))); return clampPlacement({ scale, cx: left + scale / 2, top: p.top }, aspect, pa); } /** Snap the horizontal centre to the middle when within `threshold` (fraction). */ export function snapCenter(p: ArtPlacement, threshold = 0.02): { placement: ArtPlacement; snapped: boolean } { if (Math.abs(p.cx - 0.5) <= threshold && p.cx !== 0.5) return { placement: { ...p, cx: 0.5 }, snapped: true }; return { placement: p, snapped: p.cx === 0.5 }; } export type PlacementPresetId = "center-chest" | "left-chest" | "full-front" | "back"; /** Preset placements. `back` is the same as full-width but on the back view. */ export function presetPlacement(id: PlacementPresetId, aspect: number, pa: Size): ArtPlacement { const base: Record = { "center-chest": { scale: 0.7, cx: 0.5, top: 0.04 }, "left-chest": { scale: 0.26, cx: 0.77, top: 0.03 }, "full-front": { scale: 1, cx: 0.5, top: 0 }, back: { scale: 0.86, cx: 0.5, top: 0.04 }, }; return clampPlacement(base[id], aspect, pa); } export type PrintifyPlacement = { /** brand.json garments[].placement.widthPct (0..1 of print-area width). */ widthPct: number; /** brand.json garments[].placement.topPx, in vendor canvas px. */ topPx: number; /** Extra: left offset in vendor canvas px (brand.json assumes centred). */ leftPx: number; /** Printify product API image placement: centre x/y 0..1, scale = art width / area width. */ image: { x: number; y: number; scale: number; angle: 0 }; }; export function toPrintify(p: ArtPlacement, aspect: number, canvas: Size): PrintifyPlacement { const hf = artHeightFrac(p.scale, aspect, canvas); return { widthPct: round(p.scale, 4), topPx: Math.round(p.top * canvas.h), leftPx: Math.round((p.cx - p.scale / 2) * canvas.w), image: { x: round(p.cx, 4), y: round(p.top + hf / 2, 4), scale: round(p.scale, 4), angle: 0 }, }; } export function fromPrintify( pl: { widthPct: number; topPx: number; leftPx?: number }, aspect: number, canvas: Size, pa: Size, ): ArtPlacement { const cx = pl.leftPx === undefined ? 0.5 : pl.leftPx / canvas.w + pl.widthPct / 2; return clampPlacement({ scale: pl.widthPct, cx, top: pl.topPx / canvas.h }, aspect, pa); } export function round(n: number, digits = 3): number { const f = 10 ** digits; return Math.round(n * f) / f; } 33:T8ef,"use client"; import type { ReactNode } from "react"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { cn } from "@/lib/utils"; export type Choice = { value: string; label?: ReactNode; disabled?: boolean; hint?: string }; /** * Single-choice pills on Kobra toggle-group (garment, size, placement presets). * `segmented` joins them into one bar; `grid` makes equal tiles. 44px touch targets. */ export function ChoicePills({ options, value, onValueChange, label, variant = "pill", className, }: { options: Choice[]; value: string | undefined; onValueChange: (value: string) => void; label: string; variant?: "pill" | "segmented" | "grid"; className?: string; }) { return ( next[0] && onValueChange(next[0])} spacing={variant === "segmented" ? 0 : 2} className={cn( variant === "pill" && "flex-wrap", variant === "segmented" && "grid w-full auto-cols-fr grid-flow-col", variant === "grid" && "grid w-full grid-cols-2 min-[30rem]:grid-cols-4", className, )} > {options.map((o) => ( {o.label ?? o.value} ))} ); } 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#customizer","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Customizer"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Placement controls"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Placement controls"}],["$","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":"Width percent and top offset as Printify-style placement (widthPct, topPx) with keyboard-stepped sliders, plus left chest, center chest, full front and back presets. Tabular readouts."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"placement-controls","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/placement-controls/placement-controls.tsx","code":"$31"},{"path":"blocks/customizer/_shared/print-area.ts","code":"$32"},{"path":"blocks/customizer/_shared/choice-pills.tsx","code":"$33"},{"path":"blocks/customizer/placement-controls/demo.tsx","code":"\"use client\";\n\nimport { DemoFrame } from \"../_shared/demo-frame\";\nimport { GarmentStage } from \"../garment-preview/garment-preview\";\nimport { PlacementControls } from \"./placement-controls\";\n\nexport function PlacementControlsDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n \n

\n \n );\n}\n\nexport default PlacementControlsDemo;\n"},{"path":"blocks/customizer/placement-controls/meta.ts","code":"import type { BlockMeta } from \"../../../lib/block-meta\";\n\nexport const placementControlsMeta: BlockMeta = {\n slug: \"placement-controls\",\n title: \"Placement controls\",\n description:\n \"Width percent and top offset as Printify-style placement (widthPct, topPx) with keyboard-stepped sliders, plus left chest, center chest, full front and back presets. Tabular readouts.\",\n group: \"customizer\",\n kobraDeps: [\"slider\", \"toggle-group\", \"button\"],\n files: [\n \"blocks/customizer/placement-controls/placement-controls.tsx\",\n \"blocks/customizer/_shared/print-area.ts\",\n \"blocks/customizer/_shared/choice-pills.tsx\",\n ],\n props: [\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\", \"placement\", \"slider\", \"printify\"],\n status: \"ready\",\n};\n"}]}],"props":"$L34"}],"$L35"]}]