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:T14b2,"use client"; import { useEffect, useRef, useState, type ReactNode } from "react"; import type { Product } from "../../../lib/commerce/types"; import { useStickyBarControl } from "../../pdp/pdp-sticky-buy-bar/pdp-sticky-buy-bar"; import { useResolvedSelection, useSharedSelection, type VariantSelection } from "../../pdp/_shared/use-variant-selection"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; import { CustomizerLayout } from "../customizer-layout/customizer-layout"; import { useCustomizer } from "../_shared/customizer-context"; /** * Compact PDP tabs: Details / Customize. Customize mounts the minimal customizer layout * (stage, colour, size, add). Needs a ; `details` is any content. */ /** Keeps the PDP's selected Color and the customizer colorway in step (guarded, so no loops). */ function SelectionSync({ product, selection }: { product: Product; selection?: VariantSelection }) { const sel = useResolvedSelection(product, selection); const { config, derived, actions } = useCustomizer(); const pdpColor = sel.selected.Color; // Propagate only the side that changed (the PDP wins on mount), so the two never ping-pong. const seen = useRef<{ pdp?: string; cust?: string }>({}); useEffect(() => { const last = seen.current; const custChanged = last.cust !== undefined && last.cust !== config.color; const pdpChanged = last.pdp !== pdpColor; if (pdpChanged || last.cust === undefined) { const match = derived.garment.colors.find((c) => c.name.toLowerCase() === pdpColor?.toLowerCase()); if (match && match.name !== config.color) { actions.setColor(match.name); seen.current = { pdp: pdpColor, cust: match.name }; return; } } else if (custChanged) { const value = product.options.find((o) => o.name === "Color")?.values.find((v) => v.toLowerCase() === config.color.toLowerCase()); if (value && value !== pdpColor) { sel.select("Color", value); seen.current = { pdp: value, cust: config.color }; return; } } seen.current = { pdp: pdpColor, cust: config.color }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [pdpColor, config.color]); return null; } export function PdpCustomizeTab({ details, defaultTab = "details", product: productProp, selection, onActiveChange, className, }: { details?: ReactNode; defaultTab?: "details" | "customize"; /** The PDP product: offers only its own colors (no custom hex) and syncs the Color selection. */ product?: Product; /** Shared PDP variant selection (else the provider's, else private). */ selection?: VariantSelection; /** Called when the Customize tab becomes (in)active. The sticky buy bar is also suppressed through StickyBarProvider. */ onActiveChange?: (active: boolean) => void; className?: string; }) { const { options, derived } = useCustomizer(); // Picks up the PDP product from a surrounding VariantSelectionProvider when no product is passed. const shared = useSharedSelection(); const product = productProp ?? selection?.product ?? shared?.product; const [tab, setTab] = useState(defaultTab); const { setSuppressed } = useStickyBarControl(); const active = tab === "customize"; useEffect(() => { setSuppressed(active); onActiveChange?.(active); return () => setSuppressed(false); // eslint-disable-next-line react-hooks/exhaustive-deps }, [active]); const colors = product?.options.find((o) => o.name === "Color")?.values; return ( setTab(String(v))} data-slot="pdp-customize-tab" className={cn("gap-5", className)}> {product ? : null} Details Customize {details ?? (

Styles: {options.garments.map((g) => g.label).join(", ")}
Colors: {derived.garment.colors.map((c) => c.name).join(", ")}
Sizes: {options.sizes.join(", ")}

)} ); } export default PdpCustomizeTab; 32:T1428,"use client"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; import { ArtPicker } from "../art-picker/art-picker"; import { ArtUpload } from "../art-upload/art-upload"; import { ChoicePills } from "../_shared/choice-pills"; import { ColorSwap } from "../color-swap/color-swap"; import { CustomizerAddBar } from "../customizer-add-bar/customizer-add-bar"; import { GarmentStage } from "../garment-preview/garment-preview"; import { MakeYourOwnCta } from "../make-your-own-cta/make-your-own-cta"; import { PlacementControls } from "../placement-controls/placement-controls"; import { TextLineEditor } from "../text-line-editor/text-line-editor"; import { useCustomizer } from "../_shared/customizer-context"; import { Section } from "../_shared/section"; import { SizePicker } from "../_shared/size-section"; export type CustomizerLayoutVariant = "split" | "stacked" | "minimal"; function GarmentSection({ index }: { index: number }) { const { options, config, actions } = useCustomizer(); return (

({ value: g.id, label: g.label }))} value={config.garmentId} onValueChange={actions.setGarment} />

); } function ArtSection({ index }: { index: number }) { const { config } = useCustomizer(); return (

Library Your art{config.art.kind === "upload" ? " (on)" : ""}

); } /** * The full customizer screen. Needs a . * split stage sticky at the start (7/5 from lg), numbered sections 01 garment, 02 color, 03 art, * 04 text, 05 placement, 06 size, price + Add bar pinned to the bottom of the rail * stacked one column, mobile first: the stage stays pinned under the top edge while controls scroll * minimal stage + color + size only (for a PDP "customize" tab) */ export function CustomizerLayout({ variant = "split", colors, customColor, className, }: { variant?: CustomizerLayoutVariant; /** Offer only these colorway names in the minimal layout (the PDP product's colors). */ colors?: string[]; customColor?: boolean; className?: string; }) { const { derived } = useCustomizer(); if (variant === "minimal") { return (

); } const sections = ( <> ); if (variant === "stacked") { return (

{sections}

); } return (

{sections}

{derived.garment.label}, {derived.colorway.name}

); } export default CustomizerLayout; 33:T589,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpCustomizeTabMeta: BlockMeta = { slug: "pdp-customize-tab", title: "PDP customize tab", description: "Kobra tabs for a product page: Details and Customize, where Customize mounts the minimal customizer (stage, color, size, add).", group: "customizer", kobraDeps: ["tabs"], files: ["blocks/customizer/pdp-customize-tab/pdp-customize-tab.tsx", "blocks/customizer/customizer-layout/customizer-layout.tsx"], props: [ { name: "details", type: "ReactNode", description: "Content of the Details tab; defaults to styles, colors, sizes." }, { name: "product", type: "Product", description: "The PDP product: only its own colors are offered (no custom hex) and its Color selection stays in sync." }, { name: "selection", type: "VariantSelection", description: "Shared PDP selection (optional; also resolved from VariantSelectionProvider)." }, { name: "onActiveChange", type: "(active: boolean) => void", description: "Fires when the Customize tab becomes active or inactive. The sticky buy bar is suppressed through StickyBarProvider automatically." }, { name: "defaultTab", type: "'details' | 'customize'", default: "'details'", description: "Tab shown first." }, { name: "className", type: "string", description: "Layout slotting on the root." }, ], tags: ["customizer", "pdp", "tabs"], 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":"PDP customize tab"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"PDP customize tab"}],["$","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":"Kobra tabs for a product page: Details and Customize, where Customize mounts the minimal customizer (stage, color, size, add)."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"pdp-customize-tab","group":"customizer","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/customizer/pdp-customize-tab/pdp-customize-tab.tsx","code":"$31"},{"path":"blocks/customizer/customizer-layout/customizer-layout.tsx","code":"$32"},{"path":"blocks/customizer/pdp-customize-tab/demo.tsx","code":"\"use client\";\n\nimport { DemoFrame } from \"../_shared/demo-frame\";\nimport { PdpCustomizeTab } from \"./pdp-customize-tab\";\n\nexport function PdpCustomizeTabDemo({ brand }: { brand?: string }) {\n return (\n \n

\n \n

\n \n );\n}\n\nexport default PdpCustomizeTabDemo;\n"},{"path":"blocks/customizer/pdp-customize-tab/meta.ts","code":"$33"}]}],"props":"$L34"}],"$L35"]}]