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:Ta73,"use client"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import { useCustomizer } from "../_shared/customizer-context"; import { EASE_OUT } from "../_shared/motion"; import { useTween } from "../_shared/use-tween"; /** * Live price: base garment + the options that are actually on (hoodie upcharge, back print, text * line, upload, size). Rows exist only when real; with no options it is one price and nothing * else. The total eases between values in tabular digits, so it never shifts the layout. * receipt rows, a hairline, the total (default) * inline total plus a one-line hint of the latest delta (mockup: "$34.00 $4.00 for custom text") */ export function PriceDelta({ variant = "receipt", className, }: { variant?: "receipt" | "inline"; className?: string; }) { const { derived } = useCustomizer(); const { lines, total, currency } = derived.price; const shown = useTween(total); const fmt = (n: number) => formatMoney({ amount: n, currency }); const deltas = lines.slice(1); if (variant === "inline") { const last = deltas[deltas.length - 1]; return (

{fmt(shown)} {last ? `${fmt(last.amount)} for ${last.label.toLowerCase()}` : lines[0]?.label}

); } return (

{l.label}: {i === 0 ? fmt(l.amount) : `+${fmt(l.amount)}`}
Total: {fmt(shown)}

); } export default PriceDelta; 31:T64c,import type { BlankGarment, CustomizerConfig, PriceBreakdown, PriceLine, Pricing } from "./types"; /** * Live price: base garment + options. Only real rows are shown (no invented * surcharges): a row exists when its option is active AND its amount is > 0. */ export function computePrice( config: CustomizerConfig, garments: BlankGarment[], pricing: Pricing, ): PriceBreakdown { const lines: PriceLine[] = []; const baseGarment = garments.find((g) => g.id === pricing.baseGarmentId) ?? garments[0]; const garment = garments.find((g) => g.id === config.garmentId) ?? baseGarment; lines.push({ id: "base", label: baseGarment?.label ?? "Garment", amount: pricing.base }); const up = garment && garment.id !== baseGarment?.id ? (pricing.upcharge[garment.id] ?? 0) : 0; if (garment && up > 0) lines.push({ id: "garment", label: `${garment.label} upcharge`, amount: up }); if (config.side === "back" && pricing.backPrint > 0) lines.push({ id: "back", label: "Back print", amount: pricing.backPrint }); if (config.text.enabled && config.text.value.trim() && pricing.textLine > 0) lines.push({ id: "text", label: "Custom text line", amount: pricing.textLine }); if (config.art.kind === "upload" && pricing.upload > 0) lines.push({ id: "upload", label: "Your art", amount: pricing.upload }); const sizeUp = pricing.sizeUpcharge[config.size] ?? 0; if (sizeUp > 0) lines.push({ id: "size", label: `Size ${config.size}`, amount: sizeUp }); const total = Math.round(lines.reduce((n, l) => n + l.amount, 0) * 100) / 100; return { lines, total, currency: pricing.currency }; } 32:T4bd,"use client"; import { useEffect, useRef, useState } from "react"; /** Eases a number toward `target` over `ms` (ease-out). Reduced motion and first paint: no tween. */ export function useTween(target: number, ms = 240): number { const [value, setValue] = useState(target); const from = useRef(target); const raf = useRef(0); const current = useRef(target); useEffect(() => { const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reduce || from.current === target) { current.current = target; from.current = target; raf.current = requestAnimationFrame(() => setValue(target)); return () => cancelAnimationFrame(raf.current); } const start = performance.now(); const a = current.current; const tick = (now: number) => { const t = Math.min(1, (now - start) / ms); const e = 1 - Math.pow(1 - t, 4); current.current = a + (target - a) * e; setValue(current.current); if (t < 1) raf.current = requestAnimationFrame(tick); else from.current = target; }; raf.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf.current); }, [target, ms]); return value; } 33:Ta9c,import type { Money, Product, ProductImage, Variant } from "./types"; /** Price range of a variant list. Empty list gives a zero range in `currency`. */ export function priceRangeOf( variants: Variant[], currency = "USD", ): { min: Money; max: Money } { if (variants.length === 0) { const zero = { amount: 0, currency }; return { min: zero, max: zero }; } const sorted = [...variants].sort((a, b) => a.price.amount - b.price.amount); return { min: sorted[0].price, max: sorted[sorted.length - 1].price }; } /** Lowest priced variant, preferring available ones. Undefined when the product has no variants. */ export function findCheapestVariant(product: Product): Variant | undefined { if (product.variants.length === 0) return undefined; const pool = product.variants.some((v) => v.available) ? product.variants.filter((v) => v.available) : product.variants; return pool.reduce((a, b) => (b.price.amount < a.price.amount ? b : a)); } /** * Same as `findCheapestVariant` but typed non-optional so existing call sites keep compiling. * Adapters never emit a product without variants, so the throw is unreachable for adapter * output; hand-built products should use `findCheapestVariant`. */ export function cheapestVariant(product: Product): Variant { const v = findCheapestVariant(product); if (!v) throw new Error(`cheapestVariant: product "${product.handle}" has no variants (use findCheapestVariant)`); return v; } /** First variant whose options contain every given key/value. */ export function variantFor( product: Product, options: Record, ): Variant | undefined { return product.variants.find((v) => Object.entries(options).every(([k, val]) => v.options[k] === val), ); } export function optionValues(product: Product, name: string): string[] { return product.options.find((o) => o.name === name)?.values ?? []; } /** Images to show for a variant: its own image first, then the rest of the product. */ export function imagesFor(product: Product, variant?: Variant): ProductImage[] { if (!variant?.image) return product.images; const own = variant.image; return [own, ...product.images.filter((i) => i.src !== own.src)]; } export function formatMoney(money: Money, locale = "en-US"): string { const whole = Number.isInteger(money.amount); return new Intl.NumberFormat(locale, { style: "currency", currency: money.currency, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: 2, }).format(money.amount); } /** True when at least one variant can be bought somewhere. */ export function isBuyable(product: Product): boolean { return product.variants.some((v) => v.available && v.storeUrl); } 34:T618,"use client"; import { DemoFrame } from "../_shared/demo-frame"; import { ChoicePills } from "../_shared/choice-pills"; import { useCustomizer } from "../_shared/customizer-context"; import { Input } from "@/components/ui/input"; import { Section } from "../_shared/section"; import { PriceDelta } from "./price-delta"; function Body() { const { options, config, actions, derived } = useCustomizer(); return (

({ value: g.id, label: g.label }))} value={config.garmentId} onValueChange={actions.setGarment} /> ({ value: s }))} value={config.size} onValueChange={actions.setSize} /> {derived.hasBack ? ( actions.setSide(v as "front" | "back")} /> ) : null} actions.setText({ value: e.target.value.slice(0, 24), enabled: !!e.target.value.trim() })} className="h-11" />

); } export function PriceDeltaDemo({ brand }: { brand?: string }) { return ( ); } export default PriceDeltaDemo; 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":"Price delta"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Price delta"}],["$","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":"Live price breakdown: base garment plus the options that are on (garment upcharge, back print, text line, upload, size). Tabular digits ease between totals with no layout shift; never invents a surcharge."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"price-delta","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/customizer/price-delta/price-delta.tsx","code":"$30"},{"path":"blocks/customizer/_shared/pricing.ts","code":"$31"},{"path":"blocks/customizer/_shared/use-tween.ts","code":"$32"},{"path":"lib/commerce/select.ts","code":"$33"},{"path":"blocks/customizer/price-delta/demo.tsx","code":"$34"},{"path":"blocks/customizer/price-delta/meta.ts","code":"import type { BlockMeta } from \"../../../lib/block-meta\";\n\nexport const priceDeltaMeta: BlockMeta = {\n slug: \"price-delta\",\n title: \"Price delta\",\n description:\n \"Live price breakdown: base garment plus the options that are on (garment upcharge, back print, text line, upload, size). Tabular digits ease between totals with no layout shift; never invents a surcharge.\",\n group: \"customizer\",\n kobraDeps: [],\n files: [\n \"blocks/customizer/price-delta/price-delta.tsx\",\n \"blocks/customizer/_shared/pricing.ts\",\n \"blocks/customizer/_shared/use-tween.ts\",\n \"lib/commerce/select.ts\",\n ],\n props: [\n { name: \"variant\", type: \"'receipt' | 'inline'\", default: \"'receipt'\", description: \"Rows with a total, or total plus the latest delta in one line.\" },\n { name: \"className\", type: \"string\", description: \"Layout slotting on the root.\" },\n ],\n tags: [\"customizer\", \"price\", \"tabular\", \"star\"],\n status: \"ready\",\n};\n"}]}],"props":"$L35"}],"$L36"]}]