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

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

{empty ? (

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

) : null}

); } export default CustomizerAddBar; 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:T271d,"use client"; /* * Tiny client cart (no zustand): React context + a module store read with * useSyncExternalStore, persisted to localStorage per brand (`kc-cart:`). * * API (stable; the customizer imports this): * * * ...blocks... * * - `products` resolves stored lines back to product + variant for display. Lines whose * product is not in `products` (or registered through `add(item, product)`) are hidden. * - mounts Kobra (bottom-center) unless `toaster={false}`. * * const cart = useCart(); // safe outside a provider: `ready: false` and every method is a no-op * cart.ready boolean * cart.brand Brand | undefined * cart.shopifyDomain string | null set when the brand checks out on its own Shopify store * cart.items CartItem[] { variantId, productHandle, qty, size? } * cart.lines CartLine[] item + product + variant + lineTotal + key + checkoutHref * cart.count number total quantity * cart.subtotal Money | null null when the bag is empty * cart.open / cart.setOpen(boolean) drawer visibility (cart-drawer reads this) * cart.add(item: Omit & { qty?: number }, product?: Product) * cart.remove(key) cart.setQty(key, qty) cart.clear() (key = lineKey(item)) * cart.checkoutUrl(items?: CartItem[]) => string | null (items default to the bag) * * checkoutUrl(items, { brandSlug, shopifyDomain?, products }) => string | null (pure) * - brand has shopifyDomain -> https:///cart/:,: * - else the mrch.shop storeUrl of the FIRST item, wrapped with mrchShopUrl (UTM + attribution) * - else null ("checkout on mrch.shop coming soon") * mrch.shop checks out one design at a time, so the bag exits per line (CartLine.checkoutHref). * * lineKey(item) => string variantId + size, the identity of a bag line. */ import { createContext, useCallback, useContext, useMemo, useState, useSyncExternalStore, type ReactNode, } from "react"; import { Toasts } from "@/components/ui/toast"; import { PortalScope } from "./portal-scope"; import { mrchShopUrl } from "../../../lib/commerce/adapters/mrch"; import type { Brand, Money, Product, Variant } from "../../../lib/commerce/types"; import { buildCheckoutUrl, clampQty, lineKey, parseCart, type CartItem, type CheckoutContext } from "./cart-core"; export { lineKey, type CartItem }; export type CartLine = CartItem & { key: string; product: Product; variant: Variant; lineTotal: Money; /** Where this single line checks out (mrch.shop URL with UTM, or the Shopify permalink), or null. */ checkoutHref: string | null; }; export type Cart = { ready: boolean; brand: Brand | undefined; shopifyDomain: string | null; items: CartItem[]; lines: CartLine[]; count: number; subtotal: Money | null; open: boolean; setOpen: (open: boolean) => void; add: (item: Omit & { qty?: number }, product?: Product) => void; remove: (key: string) => void; setQty: (key: string, qty: number) => void; clear: () => void; checkoutUrl: (items?: CartItem[]) => string | null; }; export type { CheckoutContext }; export function checkoutUrl(items: CartItem[], ctx: CheckoutContext): string | null { return buildCheckoutUrl(items, ctx, (slug, placement, url, designSlug) => mrchShopUrl(slug, placement, url, { designSlug })); } /* ---- persistence: one module store per storage key --------------------------------------- */ type Store = { key: string; items: CartItem[]; loaded: boolean; listeners: Set<() => void>; }; const EMPTY: CartItem[] = []; const stores = new Map(); function storeFor(key: string): Store { let store = stores.get(key); if (!store) { store = { key, items: EMPTY, loaded: false, listeners: new Set() }; stores.set(key, store); } return store; } const parse = (raw: string | null): CartItem[] => { const items = parseCart(raw); return items.length ? items : EMPTY; }; function snapshot(store: Store): CartItem[] { if (!store.loaded && typeof window !== "undefined") { store.loaded = true; try { store.items = parse(window.localStorage.getItem(store.key)); } catch { store.items = EMPTY; } } return store.items; } function commit(store: Store, items: CartItem[]) { store.items = items.length ? items : EMPTY; store.loaded = true; try { window.localStorage.setItem(store.key, JSON.stringify(store.items)); } catch { /* private mode: the bag lives for the session */ } store.listeners.forEach((l) => l()); } function subscribe(store: Store, listener: () => void) { store.listeners.add(listener); const onStorage = (e: StorageEvent) => { if (e.key !== store.key) return; store.items = parse(e.newValue); listener(); }; window.addEventListener("storage", onStorage); return () => { store.listeners.delete(listener); window.removeEventListener("storage", onStorage); }; } /* ---- context ------------------------------------------------------------------------------ */ const noop = () => {}; const NO_CART: Cart = { ready: false, brand: undefined, shopifyDomain: null, items: EMPTY, lines: [], count: 0, subtotal: null, open: false, setOpen: noop, add: noop, remove: noop, setQty: noop, clear: noop, checkoutUrl: () => null, }; const CartContext = createContext(NO_CART); export function useCart(): Cart { return useContext(CartContext); } export type CartProviderProps = { brand: Brand; products: Product[]; shopifyDomain?: string | null; /** Mount the Kobra toast stack (the add-to-cart "Added" toast needs one). Default true. */ toaster?: boolean; children: ReactNode; }; export function CartProvider({ brand, products, shopifyDomain = null, toaster = true, children, }: CartProviderProps) { const store = storeFor(`kc-cart:${brand.slug}`); const items = useSyncExternalStore( (l) => subscribe(store, l), () => snapshot(store), () => EMPTY, ); const [open, setOpen] = useState(false); const [extra, setExtra] = useState([]); const catalog = useMemo(() => { const byHandle = new Map(); for (const p of extra) byHandle.set(p.handle, p); for (const p of products) byHandle.set(p.handle, p); return byHandle; }, [products, extra]); const checkoutFor = useCallback( (list: CartItem[]) => checkoutUrl(list, { brandSlug: brand.slug, shopifyDomain, products: [...catalog.values()], }), [brand.slug, shopifyDomain, catalog], ); const lines = useMemo(() => { const out: CartLine[] = []; for (const item of items) { const product = catalog.get(item.productHandle); const variant = product?.variants.find((v) => v.id === item.variantId); if (!product || !variant) continue; out.push({ ...item, key: lineKey(item), product, variant, lineTotal: { amount: variant.price.amount * item.qty, currency: variant.price.currency }, checkoutHref: checkoutFor([item]), }); } return out; }, [items, catalog, checkoutFor]); const add = useCallback( (item, product) => { if (product && !catalog.has(product.handle)) { setExtra((list) => [...list, product]); } const qty = clampQty(item.qty); const key = lineKey(item); const current = snapshot(store); const found = current.some((i) => lineKey(i) === key); commit( store, found ? current.map((i) => (lineKey(i) === key ? { ...i, qty: Math.min(99, i.qty + qty) } : i)) : [...current, { variantId: item.variantId, productHandle: item.productHandle, size: item.size, qty }], ); }, [store, catalog], ); const remove = useCallback( (key) => commit(store, snapshot(store).filter((i) => lineKey(i) !== key)), [store], ); const setQty = useCallback( (key, qty) => commit( store, !(qty >= 1) ? snapshot(store).filter((i) => lineKey(i) !== key) : snapshot(store).map((i) => (lineKey(i) === key ? { ...i, qty: clampQty(qty) } : i)), ), [store], ); const clear = useCallback(() => commit(store, EMPTY), [store]); const value = useMemo(() => { const count = lines.reduce((n, l) => n + l.qty, 0); const subtotal: Money | null = lines.length ? { amount: lines.reduce((n, l) => n + l.lineTotal.amount, 0), currency: lines[0].lineTotal.currency, } : null; return { ready: true, brand, shopifyDomain, items, lines, count, subtotal, open, setOpen, add, remove, setQty, clear, checkoutUrl: (list = items) => checkoutFor(list), }; }, [brand, shopifyDomain, items, lines, open, add, remove, setQty, clear, checkoutFor]); return ( {children} {toaster ? ( // A transformed ancestor becomes the containing block of the toast stack's fixed container, // so shifting this wrapper lifts the toasts above a sticky bar (--kc-sticky-offset, set by pdp-sticky-buy-bar).

) : null} ); } 35:T7c9,"use client"; import type { ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; import { EASE_EXIT, EASE_OUT } from "./motion"; type Props = ComponentProps & { pending?: boolean }; /** * The Kobra busy button: the label turns out and a spinner turns in (one shared flip, in the * same grid cell so the width never changes). `aria-busy`, repeat presses dropped, never * `disabled` (that would dim the spinner). Reduced motion: plain crossfade, the spinner still turns. */ export function PendingButton({ pending = false, children, onClick, className, ...props }: Props) { const handle: Props["onClick"] = (e) => { if (pending) { e.preventDefault(); return; } onClick?.(e); }; return ( ); } 36:T40d,import type { BlockMeta } from "../../../lib/block-meta"; export const customizerAddBarMeta: BlockMeta = { slug: "customizer-add-bar", title: "Customizer add bar", description: "Sticky price and Add to cart for the customizer: live total, Kobra busy button (spinner in, label out, never disabled) wired to the cart store, and a Save design button that writes the design to the URL hash.", group: "customizer", kobraDeps: ["button", "spinner", "toast"], files: [ "blocks/customizer/customizer-add-bar/customizer-add-bar.tsx", "blocks/customizer/_shared/use-customizer-cart.ts", "blocks/customizer/_shared/use-save-design.ts", "blocks/pdp/_shared/cart-store.tsx", "blocks/pdp/_shared/pending-button.tsx", ], props: [ { name: "sticky", type: "boolean", default: "true", description: "Stick to the bottom of the scroll parent." }, { name: "className", type: "string", description: "Layout slotting on the root." }, ], tags: ["customizer", "cart", "sticky", "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 add bar"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Customizer add bar"}],["$","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":"Sticky price and Add to cart for the customizer: live total, Kobra busy button (spinner in, label out, never disabled) wired to the cart store, and a Save design button that writes the design to the URL hash."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"customizer-add-bar","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/customizer-add-bar/customizer-add-bar.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/pdp/_shared/cart-store.tsx","code":"$34"},{"path":"blocks/pdp/_shared/pending-button.tsx","code":"$35"},{"path":"blocks/customizer/customizer-add-bar/demo.tsx","code":"\"use client\";\n\nimport { DemoFrame } from \"../_shared/demo-frame\";\nimport { GarmentStage } from \"../garment-preview/garment-preview\";\nimport { CustomizerAddBar } from \"./customizer-add-bar\";\n\nexport function CustomizerAddBarDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n \n

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