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/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"],""] 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/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"] 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/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"] 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/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"] 31:Tcf6,"use client"; 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 { MakeYourOwnCta } from "../make-your-own-cta/make-your-own-cta"; import { PriceDelta } from "../price-delta/price-delta"; import { SizePicker } from "../_shared/size-section"; import { useCustomizer } from "../_shared/customizer-context"; import { useCustomizerCart } from "../_shared/use-customizer-cart"; import { useSaveDesign } from "../_shared/use-save-design"; const PRESET_LABEL: Record = { "center-chest": "Center chest", "left-chest": "Left chest", "full-front": "Full front", back: "Back", custom: "Custom", }; /** * Summary of the choices (garment, colour, size, art, text, placement) with size pills, * the live price, Add to cart (cart store when mounted, else the provider's `onAddToCart`), * Save design (URL hash + clipboard + recent list) and the external "Make your own with MRCH" link. */ export function CustomizerSummary({ showSize = true, className }: { showSize?: boolean; className?: string }) { const { config, derived } = useCustomizer(); const cart = useCustomizerCart(); const design = useSaveDesign(); const rows: [string, string][] = [ ["Garment", derived.garment.label], ["Color", config.color === "Custom" ? `Custom ${config.customColor}` : config.color], ["Art", derived.art ? derived.art.title : "None"], ["Text", config.text.enabled && config.text.value ? `${config.text.value}${config.text.curve ? " (arc)" : ""}` : "None"], ["Placement", `${PRESET_LABEL[config.preset]}, ${derived.side}`], ]; return (

Your design

{k}: {v}

{showSize ? (

Size

) : null}

void cart.add()} className="h-11 flex-1 text-base"> Add to cart

); } export default CustomizerSummary; 32:Tcee,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { toast } from "@/components/ui/toast"; import { useCart } from "../../pdp/_shared/cart-store"; import type { Product } from "../../../lib/commerce/types"; import { encodeConfig } from "./codec.ts"; import { designHandle } from "./design-handle.ts"; import { useCustomizer } from "./customizer-context"; /** * Add the current design to the bag. With a mounted (pdp/_shared/cart-store) the * design becomes a synthetic one-variant product priced at the live total (design bags exit to * mrch.shop per line, and storeUrl is null until the backend creates the product, so checkout * reads "coming soon"). Without a cart it calls the provider's `onAddToCart(config, price)`. * Pending contract: spinner in, repeat presses dropped, never disabled. Demo latency 600ms. */ export function useCustomizerCart(delayMs = 600) { const { config, derived, options, onAddToCart } = useCustomizer(); const cart = useCart(); const [pending, setPending] = useState(false); const busy = useRef(false); const mounted = useRef(true); useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); const add = useCallback(async () => { if (busy.current) return false; busy.current = true; setPending(true); await new Promise((r) => setTimeout(r, delayMs)); const { price, garment, view } = derived; const money = { amount: price.total, currency: price.currency }; if (cart.ready) { const handle = designHandle(derived.art?.id ?? options.brand.slug, encodeConfig(config)); const colour = config.color === "Custom" ? `Custom ${config.customColor}` : config.color; const image = { src: view.src, alt: `${garment.label}, ${colour}, with your design`, width: view.width, height: view.height, view: derived.side }; const variantId = `${handle}:${garment.id}:${colour}:${config.size}`; const product: Product = { id: handle, handle, title: `Custom ${garment.label.toLowerCase()}${derived.art ? `: ${derived.art.title}` : ""}`, description: "Made with the customizer.", collection: "custom", tags: ["custom"], images: [image], options: [ { name: "Garment", values: [garment.label] }, { name: "Color", values: [colour] }, ], variants: [ { id: variantId, title: `${garment.label} / ${colour}`, options: { Garment: garment.label, Color: colour }, price: money, available: true, image, storeUrl: null, }, ], featuredImage: image, priceRange: { min: money, max: money }, source: { kind: "mrch", ref: "customizer" }, }; cart.add({ variantId, productHandle: handle, size: config.size, qty: 1 }, product); toast({ message: "Added", state: "success", action: { label: "Open cart", run: () => cart.setOpen(true) } }); } else { onAddToCart?.(config, price); } busy.current = false; if (mounted.current) setPending(false); return true; }, [cart, config, delayMs, derived, onAddToCart, options.brand.slug]); return { pending, add }; } 33:T65e,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { toast } from "@/components/ui/toast"; import { designUrl, encodeConfig, HASH_KEY } from "./codec"; import { useCustomizer } from "./customizer-context"; import { useRecentDesigns } from "./recent"; /** * Save the design: serialise to `#d=...` on the current URL (history.replaceState), copy the link, * and remember it in the brand's recent list (localStorage). `saved` flips true for 1.8s. */ export function useSaveDesign() { const { config, options, derived } = useCustomizer(); const recent = useRecentDesigns(options.brand.slug); const [saved, setSaved] = useState(false); const timer = useRef(0); useEffect(() => () => window.clearTimeout(timer.current), []); const save = useCallback(async () => { const url = designUrl(config); try { window.history.replaceState(null, "", `#${HASH_KEY}=${encodeConfig(config)}`); } catch { /* sandboxed frame: the link still copies */ } let copied = false; try { await navigator.clipboard.writeText(url); copied = true; } catch { copied = false; } recent.save(config, `${derived.art?.title ?? "Text only"} / ${derived.garment.label}`); toast({ message: copied ? "Design link copied" : "Design saved to this page's link", state: "success" }); setSaved(true); window.clearTimeout(timer.current); timer.current = window.setTimeout(() => setSaved(false), 1800); return url; }, [config, derived.art?.title, derived.garment.label, recent]); return { saved, save, url: () => designUrl(config) }; } 34:Tf10,import type { ArtAsset, BlankGarment, CustomizerConfig } from "./types"; import { clampPlacement, type PlacementPresetId } from "./print-area.ts"; /** Config <-> URL hash. Compact JSON, base64url. Uploads (blob URLs) are dropped. */ type Wire = { v: 1; g: string; c: string; cc?: string; s: string; sd: "front" | "back"; a?: string; p: [number, number, number]; pr: string; t?: { v: string; z: number; al: string; c: string; cu: 0 | 1; y: number }; }; const b64 = (s: string) => btoa(String.fromCharCode(...new TextEncoder().encode(s))) .replace(/\+/g, "-") .replace(/\//g, "_") .replace(/=+$/, ""); const unb64 = (s: string) => { const pad = s.replace(/-/g, "+").replace(/_/g, "/") + "=".repeat((4 - (s.length % 4)) % 4); return new TextDecoder().decode(Uint8Array.from(atob(pad), (c) => c.charCodeAt(0))); }; const r3 = (n: number) => Math.round(n * 1000) / 1000; export function encodeConfig(c: CustomizerConfig): string { const w: Wire = { v: 1, g: c.garmentId, c: c.color, s: c.size, sd: c.side, p: [r3(c.placement.scale), r3(c.placement.cx), r3(c.placement.top)], pr: c.preset, }; if (c.customColor) w.cc = c.customColor; if (c.art.kind === "library") w.a = c.art.id; if (c.text.enabled && c.text.value) w.t = { v: c.text.value, z: c.text.size, al: c.text.align, c: c.text.color, cu: c.text.curve ? 1 : 0, y: r3(c.text.y) }; return b64(JSON.stringify(w)); } /** Decode and validate against what this brand offers; returns null when unusable. */ export function decodeConfig( raw: string, base: CustomizerConfig, garments: BlankGarment[], art: ArtAsset[], ): CustomizerConfig | null { try { const w = JSON.parse(unb64(raw)) as Wire; if (w.v !== 1) return null; const garment = garments.find((g) => g.id === w.g); if (!garment) return null; const colorOk = garment.colors.some((c) => c.name === w.c) || (w.c === "Custom" && !!garment.tint && !!w.cc); const color = colorOk ? w.c : garment.defaultColor; const side = w.sd === "back" && garment.colors.find((c) => c.name === color)?.views.back ? "back" : "front"; const asset = art.find((a) => a.id === w.a); const aspect = asset?.aspect ?? 0.8; const view = (garment.colors.find((c) => c.name === color) ?? garment.colors[0]).views[side] ?? garment.colors[0].views.front!; const next: CustomizerConfig = { ...base, garmentId: garment.id, color, customColor: color === "Custom" ? w.cc : undefined, size: typeof w.s === "string" ? w.s : base.size, side, art: asset ? { kind: "library", id: asset.id } : { kind: "none" }, placement: clampPlacement({ scale: w.p[0], cx: w.p[1], top: w.p[2] }, aspect, view.printArea), preset: (w.pr as PlacementPresetId | "custom") ?? "custom", text: w.t ? { enabled: true, value: String(w.t.v).slice(0, 40), size: Math.min(24, Math.max(4, Number(w.t.z) || 10)), align: (["start", "center", "end"].includes(w.t.al) ? w.t.al : "center") as "start" | "center" | "end", color: typeof w.t.c === "string" ? w.t.c : "", curve: w.t.cu === 1, y: Math.min(1, Math.max(0, Number(w.t.y) || 0.9)), } : { ...base.text, enabled: false, value: "" }, }; return next; } catch { return null; } } export const HASH_KEY = "d"; export function designUrl(config: CustomizerConfig, origin?: string): string { const base = origin ?? (typeof window !== "undefined" ? window.location.href.split("#")[0] : ""); return `${base}#${HASH_KEY}=${encodeConfig(config)}`; } export function readHash(): string | null { if (typeof window === "undefined") return null; const m = window.location.hash.match(new RegExp(`[#&]${HASH_KEY}=([^&]+)`)); return m ? m[1] : null; } 35: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; 36:T423,import type { BlockMeta } from "../../../lib/block-meta"; export const customizerSummaryMeta: BlockMeta = { slug: "customizer-summary", title: "Customizer summary", description: "Summary of every choice with size pills, live price, Add to cart (cart store or onAddToCart), Save design to a URL hash, and the external Make your own with MRCH link.", group: "customizer", kobraDeps: ["button", "toggle-group", "spinner", "toast"], files: [ "blocks/customizer/customizer-summary/customizer-summary.tsx", "blocks/customizer/_shared/use-customizer-cart.ts", "blocks/customizer/_shared/use-save-design.ts", "blocks/customizer/_shared/codec.ts", "blocks/customizer/make-your-own-cta/make-your-own-cta.tsx", ], props: [ { name: "showSize", type: "boolean", default: "true", description: "Show the size pills (the layout shows them as its own section)." }, { name: "className", type: "string", description: "Layout slotting on the root." }, ], tags: ["customizer", "summary", "cart", "star"], status: "ready", }; 24:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2d",null,{"href":"/#customizer","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Customizer"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Customizer summary"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Customizer summary"}],["$","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":"Summary of every choice with size pills, live price, Add to cart (cart store or onAddToCart), Save design to a URL hash, and the external Make your own with MRCH link."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"customizer-summary","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/customizer-summary/customizer-summary.tsx","code":"$31"},{"path":"blocks/customizer/_shared/use-customizer-cart.ts","code":"$32"},{"path":"blocks/customizer/_shared/use-save-design.ts","code":"$33"},{"path":"blocks/customizer/_shared/codec.ts","code":"$34"},{"path":"blocks/customizer/make-your-own-cta/make-your-own-cta.tsx","code":"$35"},{"path":"blocks/customizer/customizer-summary/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 { CustomizerSummary } from \"./customizer-summary\";\n\nexport function CustomizerSummaryDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n \n

\n \n

\n \n );\n}\n\nexport default CustomizerSummaryDemo;\n"},{"path":"blocks/customizer/customizer-summary/meta.ts","code":"$36"}]}],"props":"$L37"}],"$L38"]}]