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/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"],""] 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/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"] 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/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"] 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/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"] 30:T1f16,"use client"; import { useCallback, useEffect, useRef, useState, type ComponentProps, type CSSProperties, type FocusEvent, type ReactNode } from "react"; import { motion, useReducedMotion } from "motion/react"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; export type HookSidebarItem = string | { id?: string; label: string; href?: string; icon?: ReactNode; }; export type HookSidebarValue = string | number; export type HookSidebarProps = Omit, "onChange"> & { items: HookSidebarItem[]; label?: string; /** Controlled selection; ids are preferred, with indices supported for the earlier API. */ value?: HookSidebarValue; defaultValue?: HookSidebarValue; onValueChange?: (value: HookSidebarValue) => void; /** Earlier API alias; receives the selected item index. */ onChange?: (index: number) => void; /** Hook color. railColor is the explicit name; color remains a supported alias. */ railColor?: string; color?: string; /** Draw the rail as a dotted guide or a continuous line. */ dashed?: boolean; }; function itemLabel(item: HookSidebarItem) { return typeof item === "string" ? item : item.label; } function itemId(item: HookSidebarItem, index: number): HookSidebarValue { return typeof item === "string" ? index : item.id ?? index; } function pathTo(y: number) { const elbow = Math.max(0, y - 8); return "M 8 0 V " + elbow + " Q 8 " + y + " 16 " + y; } export function HookSidebar({ items, label, value, defaultValue, onValueChange, onChange, railColor, color, dashed = true, className, style, ...navProps }: HookSidebarProps) { const reduceMotion = useReducedMotion(); const [internalValue, setInternalValue] = useState(defaultValue ?? itemId(items[0] ?? "", 0)); const [hovered, setHovered] = useState(null); const listRef = useRef(null); const rowRefs = useRef<(HTMLElement | null)[]>([]); const [centers, setCenters] = useState([]); const [listHeight, setListHeight] = useState(0); const selectedValue = value === undefined ? internalValue : value; const selectedIndex = typeof selectedValue === "number" ? Math.min(Math.max(0, selectedValue), Math.max(0, items.length - 1)) : Math.max(0, items.findIndex((item) => typeof item !== "string" && item.id === selectedValue)); const previewIndex = hovered ?? selectedIndex; const previewY = centers[previewIndex] ?? 0; const activeY = centers[selectedIndex] ?? 0; const measure = useCallback(() => { const list = listRef.current; if (!list) return; const top = list.getBoundingClientRect().top; const nextCenters = rowRefs.current.slice(0, items.length).map((row) => { if (!row) return 0; const bounds = row.getBoundingClientRect(); return bounds.top - top + bounds.height / 2; }); setListHeight(list.getBoundingClientRect().height); setCenters(nextCenters); }, [items.length]); useEffect(() => { const list = listRef.current; if (!list) return; measure(); const observer = new ResizeObserver(measure); observer.observe(list); rowRefs.current.forEach((row) => { if (row) observer.observe(row); }); window.addEventListener("resize", measure); return () => { observer.disconnect(); window.removeEventListener("resize", measure); }; }, [items, label, measure]); const choose = (index: number) => { const next = itemId(items[index] ?? "", index); if (value === undefined) setInternalValue(next); onValueChange?.(next); onChange?.(index); }; const accent = railColor ?? color ?? "var(--primary)"; const navStyle = { ...style, "--hook-sidebar-accent": accent, } as CSSProperties; const transition = reduceMotion ? { duration: 0 } : { type: "spring" as const, stiffness: 380, damping: 34, mass: 0.7 }; return (

{label ?

{label}

: null}

{listHeight > 0 ? ( ) : null} {items.map((item, index) => { const text = itemLabel(item); const href = typeof item === "string" ? undefined : item.href; const icon = typeof item === "string" ? undefined : item.icon; const active = selectedIndex === index; const commonClass = cn( "h-auto min-h-9 w-full justify-start gap-2.5 whitespace-normal px-2.5 py-2 text-left", active ? "text-foreground" : "text-muted-foreground", ); const rowEvents = { onPointerEnter: () => setHovered(index), onPointerLeave: () => setHovered(null), onFocus: () => setHovered(index), onBlur: (event: FocusEvent) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setHovered(null); }, }; return (

{ rowRefs.current[index] = element; }} {...rowEvents} > {href ? ( choose(index)} > {icon ? {icon} : null} {text} ) : ( )}

); })}

); } 31:T14e6,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { IconFileText, IconMessageCircle, IconPackage, IconTruck } from "@tabler/icons-react"; import { Card } from "@/components/ui/card"; import { demoProduct } from "../../../lib/commerce/fixtures"; import { formatMoney, optionValues } from "../../../lib/commerce/select"; import { DemoCell, DemoGrid, DemoPage, DemoSection } from "../../_shared/variant-frame"; import { HookSidebar, type HookSidebarValue } from "./hook-sidebar"; const sections = [ { id: "overview", label: "Overview", icon: }, { id: "options", label: "Options", icon: }, { id: "delivery", label: "Delivery", icon: }, { id: "reviews", label: "Reviews", icon: }, ] as const; const sidebarSections = sections.map((section) => ({ ...section })); function ProductPane() { const scrollRef = useRef(null); const sectionRefs = useRef<(HTMLElement | null)[]>([]); const lockUntil = useRef(0); const [active, setActive] = useState("overview"); const colors = optionValues(demoProduct, "Color"); const garments = optionValues(demoProduct, "Garment"); const bodies = [ demoProduct.description, [...garments, ...colors].filter(Boolean).join(" · ") || "One standard option.", "Made to order · " + demoProduct.variants.length + " available variants.", "From " + formatMoney(demoProduct.priceRange.min) + " · Made for repeat wear.", ]; const selectSection = useCallback((value: HookSidebarValue) => { const index = sections.findIndex((section) => section.id === String(value)); if (index < 0) return; setActive(sections[index]!.id); const container = scrollRef.current; const element = sectionRefs.current[index]; if (!container || !element) return; lockUntil.current = Date.now() + 800; const top = element.getBoundingClientRect().top - container.getBoundingClientRect().top + container.scrollTop; container.scrollTo({ top: top - 8, behavior: "smooth" }); }, []); useEffect(() => { const container = scrollRef.current; if (!container) return; const onScroll = () => { if (Date.now() < lockUntil.current) return; if (container.scrollTop + container.clientHeight >= container.scrollHeight - 4) { setActive(sections[sections.length - 1]!.id); return; } const top = container.getBoundingClientRect().top; let current = 0; sectionRefs.current.forEach((element, index) => { if (element && element.getBoundingClientRect().top - top <= 80) current = index; }); setActive(sections[current]!.id); }; container.addEventListener("scroll", onScroll, { passive: true }); return () => container.removeEventListener("scroll", onScroll); }, []); return (

{demoProduct.title}

{sections.map((section, index) => (

{ sectionRefs.current[index] = element; }} className="mb-8 last:mb-0" >

{section.label}

{bodies[index]}

))}

); } export function HookSidebarDemo({ brand }: { brand?: string }) { const [solid, setSolid] = useState(1); return (

); } 32:T583,import type { BlockMeta } from "../../../lib/block-meta"; export const hookSidebarMeta: BlockMeta = { slug: "hook-sidebar", title: "Hook sidebar", description: "A vertical section navigator with a springing hooked rail and a muted preview for hovered rows.", group: "showcase", kobraDeps: ["button", "card"], files: [ "blocks/showcase/hook-sidebar/hook-sidebar.tsx", "blocks/showcase/hook-sidebar/demo.tsx", ], props: [ { name: "items", type: "HookSidebarItem[]", description: "Rows with optional id, label, href, and icon; plain strings remain supported." }, { name: "label", type: "string", description: "Accessible navigation name and optional visible heading." }, { name: "value / defaultValue", type: "string | number", description: "Controlled or uncontrolled selected item id or index." }, { name: "onValueChange", type: "(value: string | number) => void", description: "Called when a row is selected." }, { name: "railColor", type: "string", default: "'var(--primary)'", description: "Accent for the active hooked rail." }, { name: "dashed", type: "boolean", default: "true", description: "Use a dotted rail instead of a continuous one." }, ], tags: ["navigation", "sidebar", "scrollspy", "motion"], status: "ready", origin: { name: "Original (behavior reference: rareui.com)", url: "https://rareui.com", license: "Original implementation" }, }; 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":"/#showcase","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Showcase"}]}],["$","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":"Hook sidebar"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Hook sidebar"}],["$","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 vertical section navigator with a springing hooked rail and a muted preview for hovered rows."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"hook-sidebar","group":"showcase","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/showcase/hook-sidebar/hook-sidebar.tsx","code":"$30"},{"path":"blocks/showcase/hook-sidebar/demo.tsx","code":"$31"},{"path":"blocks/showcase/hook-sidebar/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]