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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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/0cxdppusfso3e.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:T194a,"use client"; import { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { PendingButton } from "../_shared/pending-button"; import { EASE_EXIT, EASE_OUT } from "../_shared/motion"; import { useLocked, type Locked } from "../_shared/use-locked"; import { useAddToCart } from "../_shared/use-add-to-cart"; import { useResolvedSelection, type VariantSelection } from "../_shared/use-variant-selection"; const SuppressContext = createContext<{ suppressed: boolean; setSuppressed: (s: boolean) => void }>({ suppressed: false, setSuppressed: () => {}, }); /** Wrap the PDP once; a tab (Customize) calls useStickyBarControl().setSuppressed(true) to hide the bar. */ export function StickyBarProvider({ children }: { children: ReactNode }) { const [suppressed, setSuppressed] = useState(false); const value = useMemo(() => ({ suppressed, setSuppressed }), [suppressed]); return {children}; } export const useStickyBarSuppressed = () => useContext(SuppressContext).suppressed; export const useStickyBarControl = () => useContext(SuppressContext); export type PdpStickyBuyBarProps = { product: Product; selection?: VariantSelection; /** CSS selector of the buy box to watch. The bar appears once it has scrolled out of view above. */ watch?: string; /** fixed: pinned to the viewport edge. sticky: pinned inside a scroll container (galleries, previews). */ position?: "fixed" | "sticky"; /** bottom (default) or top edge. */ edge?: "bottom" | "top"; /** Show regardless of scroll (previews, tests). */ forceVisible?: boolean; /** Pre-drop: the button reads a disabled "Drops in 13d" until dropsAt. */ locked?: Locked; /** Hide the bar (and clear --kc-sticky-offset), e.g. while a Customize tab is active. Also honors StickyBarProvider. */ suppressed?: boolean; className?: string; }; /** One hairline strip: thumbnail, title, price, small Add. Slides in over 200ms (--ease-out), out in 150ms; reduced motion fades only. */ export function PdpStickyBuyBar({ product, selection, watch = "[data-kc-buy-box]", position = "fixed", edge = "bottom", forceVisible, locked, suppressed, className, }: PdpStickyBuyBarProps) { const sel = useResolvedSelection(product, selection); const { pending, add } = useAddToCart(sel); const [past, setPast] = useState(false); const bar = useRef(null); const drop = useLocked(locked); useEffect(() => { const target = document.querySelector(watch); if (!target || typeof IntersectionObserver === "undefined") return; const io = new IntersectionObserver( ([entry]) => setPast(!entry.isIntersecting && entry.boundingClientRect.bottom < 0), { threshold: 0 }, ); io.observe(target); return () => io.disconnect(); }, [watch]); const hiddenByContext = useStickyBarSuppressed(); const visible = !(suppressed || hiddenByContext) && (forceVisible || past); // Publish the bar height as --kc-sticky-offset on while visible, so toasts stack above it. useEffect(() => { const el = bar.current; if (!el || !visible || position !== "fixed" || edge !== "bottom") return; const set = () => document.body.style.setProperty("--kc-sticky-offset", `${el.offsetHeight}px`); set(); const ro = new ResizeObserver(set); ro.observe(el); return () => { ro.disconnect(); document.body.style.removeProperty("--kc-sticky-offset"); }; }, [visible, position, edge]); const image = sel.image ?? product.featuredImage; const top = edge === "top"; const onAdd = async () => { if (!sel.available || drop.locked) return; if (sel.needsSize && !sel.size) { sel.flagSizeError(); document.querySelector(watch)?.scrollIntoView({ behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth", block: "center", }); return; } await add(1); }; return (

{/* eslint-disable-next-line @next/next/no-img-element */}

{product.title}

{[sel.selected.Garment, sel.selected.Color, sel.needsSize ? sel.size : undefined].filter(Boolean).join(" / ")}

{drop.locked ? ( {drop.label} {drop.text} ) : sel.available ? (sel.needsSize && !sel.size ? "Choose size" : "Add") : "Sold out"}

); } export default PdpStickyBuyBar; 32:T76c,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { toast } from "@/components/ui/toast"; import { useCart } from "./cart-store"; import type { VariantSelection } from "./use-variant-selection"; /* * Add to cart with the Kobra pending contract: the control keeps its word and shows a spinner * (`pending`), repeat presses are dropped. Demo latency is simulated (`delayMs`, default 600). * Success is a Kobra toast "Added" with an "Open cart" action. * * const { pending, add } = useAddToCart(selection); * add(qty) -> Promise false when nothing was added (sold out, no size, pending) */ export function useAddToCart(selection: VariantSelection, opts: { delayMs?: number } = {}) { const cart = useCart(); const [pending, setPending] = useState(false); const busy = useRef(false); const mounted = useRef(true); const delay = opts.delayMs ?? 600; useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); const add = useCallback( async (qty = 1) => { const { variant, product, size, needsSize } = selection; if (busy.current || !variant || !variant.available) return false; if (needsSize && !size) { selection.flagSizeError(); return false; } busy.current = true; setPending(true); await new Promise((r) => setTimeout(r, delay)); cart.add({ variantId: variant.id, productHandle: product.handle, qty, size: needsSize ? size : undefined }, product); busy.current = false; if (mounted.current) setPending(false); if (cart.ready) { toast({ message: "Added", state: "success", action: { label: "Open cart", run: () => cart.setOpen(true) }, }); } return true; }, [selection, cart, delay], ); return { pending, add }; } 33: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 ( ); } 34:T1d21,"use client"; /* * Variant selection for PDP blocks. * * const selection = useVariantSelection(product, { sizes?, initial?, initialSize? }); * * Returns a VariantSelection (see the type below): selected options, the resolved * `variant` (via `variantFor`), `price` / `compareAt`, gallery `images` (via * `imagesFor`, the variant image first), availability, and a static size list. * * Size is NOT a product option in brand-factory data (no per-size data exists), so it is * tracked beside the options: `size`, `setSize`, `needsSize`. When a product DOES have a * "Size" option (Shopify/Printify), it behaves like any other option and `needsSize` is false. * * Share one selection between blocks either by passing `selection` down as a prop, or by * wrapping them in ; every PDP block resolves * its selection with `useResolvedSelection(product, selectionProp)`. */ import { createContext, createElement, useCallback, useContext, useMemo, useState, type ReactNode, } from "react"; import { findCheapestVariant, variantFor } from "../../../lib/commerce/select"; import { DEFAULT_SIZES, sizesFor } from "./sizes"; import { imagesForVariant, initialVariant } from "./variant-images"; import type { Money, Product, ProductImage, Variant } from "../../../lib/commerce/types"; export { DEFAULT_SIZES }; export type VariantSelection = { product: Product; /** Selected product options, e.g. { Garment: "hoodie", Color: "Black" }. */ selected: Record; /** Select one option. If the combination does not exist, the other options snap to the closest variant. */ select: (name: string, value: string) => void; /** The resolved variant (undefined only if the product has no variants). */ variant: Variant | undefined; price: Money; compareAt: Money | undefined; /** Gallery images for the selection: the variant image first, then the product's. */ images: ProductImage[]; /** Set when the photo shown belongs to a different Color than the one selected ("photo shows "). */ imageNote: string | undefined; /** images[0]. */ image: ProductImage | undefined; /** The selected variant can be bought (not sold out). */ available: boolean; /** Available AND has a store URL ("coming soon" when false but available). */ buyable: boolean; /** Selected variant's mrch.shop / checkout URL, or null ("coming soon"). */ storeUrl: string | null; /** Static size list (empty when the product has its own "Size" option). */ sizes: readonly string[]; size: string | undefined; setSize: (size: string) => void; /** True when a size must be chosen before adding to the cart. */ needsSize: boolean; /** Set when an add was attempted without a size; clears when a size is chosen. */ sizeError: boolean; flagSizeError: () => void; /** Whether any available variant carries this option value (a sold-out value is disabled). */ isOptionAvailable: (name: string, value: string) => boolean; /** The image a variant with this option value shows (for swatch hover previews). */ imageForOption: (name: string, value: string) => ProductImage | undefined; }; export type UseVariantSelectionOptions = { initial?: Record; sizes?: readonly string[]; initialSize?: string; }; export function hasSizeOption(product: Product): boolean { return product.options.some((o) => o.name === "Size"); } function closest(product: Product, name: string, value: string, selected: Record) { const pool = product.variants.filter((v) => v.options[name] === value); if (pool.length === 0) return undefined; const score = (v: Variant) => Object.entries(selected).filter(([k, val]) => k !== name && v.options[k] === val).length + (v.available ? 0.5 : 0); return pool.reduce((a, b) => (score(b) > score(a) ? b : a)); } export function useVariantSelection( product: Product, opts: UseVariantSelectionOptions = {}, ): VariantSelection { const [selected, setSelected] = useState>(() => ({ ...(initialVariant(product)?.options ?? {}), ...opts.initial, })); const [size, setSizeState] = useState(opts.initialSize); const [sizeError, setSizeError] = useState(false); // Garment-aware: a product Size option wins; else the explicit `sizes` option; else sizesFor(garment) (null = one size). const rule = opts.sizes ?? sizesFor(selected.Garment); const needsSize = !hasSizeOption(product) && rule !== null; const sizes = needsSize && rule ? rule : []; const variant = useMemo(() => variantFor(product, selected), [product, selected]); const shown = useMemo(() => imagesForVariant(product, variant), [product, variant]); const images = shown.images; const select = useCallback( (name: string, value: string) => { setSelected((prev) => { const next = { ...prev, [name]: value }; if (variantFor(product, next)) return next; const near = closest(product, name, value, prev); return near ? { ...near.options } : prev; }); }, [product], ); const setSize = useCallback((value: string) => { setSizeState(value); setSizeError(false); }, []); const flagSizeError = useCallback(() => setSizeError(true), []); const isOptionAvailable = useCallback( (name: string, value: string) => product.variants.some((v) => v.options[name] === value && v.available), [product], ); const imageForOption = useCallback( (name: string, value: string) => (closest(product, name, value, selected) ?? undefined)?.image, [product, selected], ); const fallback = findCheapestVariant(product); // A product with no variants is "unavailable": no throw, price falls back to the catalog range. const available = Boolean(variant?.available); return { product, selected, select, variant, price: (variant ?? fallback)?.price ?? product.priceRange.min, compareAt: variant?.compareAt, images, imageNote: shown.mismatch ? shown.shownColor : undefined, image: images[0], available, buyable: available && Boolean(variant?.storeUrl), storeUrl: variant?.storeUrl ?? null, sizes, size, setSize, needsSize, sizeError, flagSizeError, isOptionAvailable, imageForOption, }; } const SelectionContext = createContext(null); /** Shares one selection with every PDP block below it. */ export function VariantSelectionProvider({ product, children, ...opts }: UseVariantSelectionOptions & { product: Product; children: ReactNode }) { const selection = useVariantSelection(product, opts); return createElement(SelectionContext.Provider, { value: selection }, children); } /** The selection from a surrounding VariantSelectionProvider, or null (for optional wiring). */ export function useSharedSelection(): VariantSelection | null { return useContext(SelectionContext); } /** The explicit prop, else the provider's selection for the same product, else a private one. */ export function useResolvedSelection( product: Product, selection?: VariantSelection, opts?: UseVariantSelectionOptions, ): VariantSelection { const shared = useContext(SelectionContext); const own = useVariantSelection(product, opts); if (selection) return selection; if (shared && shared.product.handle === product.handle) return shared; return own; } 35:T6df,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Money } from "../../../lib/commerce/types"; const price = cva("tabular inline-flex items-baseline gap-2 text-ink", { variants: { variant: { default: "text-base", large: "display-m", "strike-compare": "text-base", "from-range": "text-base", }, }, defaultVariants: { variant: "default" }, }); export type PriceProps = VariantProps & { money: Money; /** Original price, shown struck through with the `strike-compare` variant. */ compareAt?: Money; /** Upper bound; with `from-range` renders "From $min" or "$min to $max". */ max?: Money; locale?: string; className?: string; }; export function Price({ variant = "default", money, compareAt, max, locale, className, }: PriceProps) { const now = formatMoney(money, locale); if (variant === "strike-compare" && compareAt) { return ( {now} ~~{formatMoney(compareAt, locale)}~~ ); } if (variant === "from-range") { const range = max && max.amount !== money.amount; return ( {range ? ( <> From {now} ) : ( {now} )} ); } return {now}; } 36:T5d6,import { pdpDemoData } from "../../../lib/commerce/fixtures/pdp"; import { CartProvider } from "../_shared/cart-store"; import { VariantSelectionProvider } from "../_shared/use-variant-selection"; import { PdpBuyBox } from "../pdp-buy-box/pdp-buy-box"; import { PdpGallery } from "../pdp-gallery/pdp-gallery"; import { PdpStickyBuyBar, StickyBarProvider } from "./pdp-sticky-buy-bar"; import { SuppressToggle } from "./suppress-toggle"; export async function PdpStickyBuyBarDemo({ brand }: { brand?: string }) { const { brand: b, product, products } = await pdpDemoData(brand); return (

scroll: the bar appears when the buy box leaves the screen

More page content scrolls here.

); } export default PdpStickyBuyBarDemo; 37:T64a,import type { BlockMeta } from "../../../lib/block-meta"; export const pdpStickyBuyBarMeta: BlockMeta = { slug: "pdp-sticky-buy-bar", title: "Sticky buy bar", description: "A hairline strip with thumbnail, title, price and a small Add button that slides in once the buy box scrolls out of view (IntersectionObserver).", group: "pdp", kobraDeps: ["button", "spinner", "toast"], files: [ "blocks/pdp/pdp-sticky-buy-bar/pdp-sticky-buy-bar.tsx", "blocks/pdp/_shared/use-add-to-cart.ts", "blocks/pdp/_shared/pending-button.tsx", "blocks/pdp/_shared/use-variant-selection.ts", "blocks/pdp/_shared/motion.ts", "blocks/ui/price/price.tsx", ], props: [ { name: "locked", type: "{ dropsAt: string; label?: string }", description: "Pre-drop: while now < dropsAt the primary button is a disabled Drops in 13d (tabular, live); reverts after dropsAt." }, { name: "product", type: "Product", description: "The product." }, { name: "selection", type: "VariantSelection", description: "Shared selection so the bar follows the buy box." }, { name: "watch", type: "string", default: "'[data-kc-buy-box]'", description: "Selector of the element whose exit reveals the bar." }, { name: "position", type: "'fixed' | 'sticky'", default: "'fixed'", description: "Viewport-pinned or pinned inside a scroll container." }, { name: "edge", type: "'bottom' | 'top'", default: "'bottom'", description: "Which edge the bar sits on." }, { name: "forceVisible", type: "boolean", description: "Always visible." }, ], tags: ["pdp", "sticky", "buy"], 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":"/#pdp","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"PDP"}]}],["$","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":"Sticky buy bar"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Sticky buy 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":"A hairline strip with thumbnail, title, price and a small Add button that slides in once the buy box scrolls out of view (IntersectionObserver)."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"pdp-sticky-buy-bar","group":"pdp","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/pdp/pdp-sticky-buy-bar/pdp-sticky-buy-bar.tsx","code":"$31"},{"path":"blocks/pdp/_shared/use-add-to-cart.ts","code":"$32"},{"path":"blocks/pdp/_shared/pending-button.tsx","code":"$33"},{"path":"blocks/pdp/_shared/use-variant-selection.ts","code":"$34"},{"path":"blocks/pdp/_shared/motion.ts","code":"/*\n * House motion for the PDP blocks (Kobra design-eng numbers).\n * Full literal class strings so Tailwind can see them.\n * enter: 150-250ms on EASE_OUT exit: shorter, on EASE_EXIT\n * Use together with `motion-reduce:transition-none` / `motion-reduce:animate-none`.\n */\nexport const EASE_OUT = \"ease-[cubic-bezier(0.23,1,0.32,1)]\";\nexport const EASE_EXIT = \"ease-[cubic-bezier(0.4,0,0.6,1)]\";\n\n/** Shared focus ring (Kobra: one ring, keyboard only). */\nexport const FOCUS_RING = \"outline-none focus-visible:ring-3 focus-visible:ring-ring/50\";\n"},{"path":"blocks/ui/price/price.tsx","code":"$35"},{"path":"blocks/pdp/pdp-sticky-buy-bar/demo.tsx","code":"$36"},{"path":"blocks/pdp/pdp-sticky-buy-bar/meta.ts","code":"$37"}]}],"props":"$L38"}],"$L39"]}]