64:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 65:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 66:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollArea"] 67:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 68:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 69:T2de8,"use client"; import { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode, } from "react"; export type MortiseSlipTab = { id: string; label: string; content: ReactNode; }; // --------------------------------------------------------------------------- // MortiseSlip — tabs as joinery. The tab strip's bottom rule is a single // SVG with a notch (mortise) missing under the active tab, and the // panel below carries a matching raised tenon (a 6px-radius nub) that pokes // up 1px into that gap — the two pieces read as one interrupted border, not // a floating bar under a label (contrast tabs-carriage/shadcn/Radix) and // not a cut-based caret (contrast streaming-markdown-caret, which is a streaming-text // cursor, not a tab indicator at all). At rest, with zero motion, which // panel belongs to which tab is legible from the joint alone. On switch the // notch's x/width chase the newly active tab's measured rect on an // underdamped spring (k=300, c=26 — a small overshoot reads as the joint // tapping home) while the panel content translates ±16px from the travel // direction and cross-fades in over ~220ms, the outgoing content fading out // on top over ~120ms. Direction always matches index delta. Pure DOM+SVG, // no canvas; ink is token-relative (--border/--foreground/--ns-muted/ // --background) throughout. Reduced motion: the notch snaps instantly and // the panel does a plain opacity cross-fade with no translate. // --------------------------------------------------------------------------- const SPRING_K = 300; // s^-2 stiffness const SPRING_C = 26; // s^-1 damping — underdamped, a tiny overshoot on arrival const TENON_PROTRUDE = 6; // px the tenon pokes above the boundary const TENON_OVERLAP = 1; // px the tenon overlaps below the boundary const TENON_H = TENON_PROTRUDE + TENON_OVERLAP; const PANEL_SHIFT = 16; // px const ENTER_MS = 220; const FADE_MS = 120; const EASE_OUT_EXPO = "cubic-bezier(0.16, 1, 0.3, 1)"; export function MortiseSlip({ tabs, defaultTab, value, onValueChange, className = "", "aria-label": ariaLabel = "Sections", }: { /** the tabs, in order */ tabs: MortiseSlipTab[]; /** id of the initially selected tab (uncontrolled); defaults to the first */ defaultTab?: string; /** controlled selected tab id; omit for uncontrolled */ value?: string; /** called with the new id when a different tab is selected */ onValueChange?: (id: string) => void; /** extra classes merged onto the rendered root element */ className?: string; /** accessible name for the tab list. Default "Sections". */ "aria-label"?: string; }) { const baseId = useId(); const isControlled = value !== undefined; const [internalActive, setInternalActive] = useState( () => defaultTab ?? tabs[0]?.id ?? "" ); const active = isControlled ? (value as string) : internalActive; let activeIndex = tabs.findIndex((t) => t.id === active); if (activeIndex < 0) activeIndex = 0; const activeTab = tabs[activeIndex]; const rootRef = useRef(null); const listRef = useRef(null); const svgRef = useRef(null); const pathRef = useRef(null); const tenonRef = useRef(null); const panelRef = useRef(null); const outgoingRef = useRef(null); const tabRefs = useRef(new Map()); // hot-path spring state lives in a ref — the rAF loop never touches React const sim = useRef({ x: 0, w: 0, vx: 0, vw: 0, tx: 0, tw: 0, full: 0, boundaryY: 0, raf: 0, sized: false, reduced: false, }); const [transition, setTransition] = useState<{ key: number; dir: 1 | -1; from: ReactNode; } | null>(null); const transitionSeq = useRef(0); function selectTab(id: string) { const toIndex = tabs.findIndex((t) => t.id === id); if (toIndex < 0 || toIndex === activeIndex) return; const dir: 1 | -1 = toIndex > activeIndex ? 1 : -1; transitionSeq.current += 1; setTransition({ key: transitionSeq.current, dir, from: activeTab?.content }); if (!isControlled) setInternalActive(id); onValueChange?.(id); } // -- the joint: notch x/width chase the active tab's measured rect ------- useEffect(() => { const root = rootRef.current; const list = listRef.current; const svg = svgRef.current; const path = pathRef.current; const tenon = tenonRef.current; if (!root || !list || !svg || !path || !tenon) return; const s = sim.current; s.reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const paint = () => { const y = s.boundaryY; const x1 = Math.max(0, Math.min(s.full, s.x)); const x2 = Math.max(0, Math.min(s.full, s.x + s.w)); svg.style.top = `${y - 1}px`; path.setAttribute( "d", `M0,1 L${x1.toFixed(2)},1 M${x2.toFixed(2)},1 L${s.full.toFixed(2)},1` ); tenon.style.top = `${y - TENON_PROTRUDE}px`; tenon.style.left = `${s.x.toFixed(2)}px`; tenon.style.width = `${Math.max(0, s.w).toFixed(2)}px`; }; const wake = () => { if (!s.raf && !s.reduced) { last = 0; s.raf = requestAnimationFrame(loop); } }; const measure = () => { const rootRect = root.getBoundingClientRect(); const listRect = list.getBoundingClientRect(); s.boundaryY = listRect.bottom - rootRect.top; s.full = rootRect.width; svg.style.width = `${s.full}px`; svg.setAttribute("viewBox", `0 0 ${Math.max(1, s.full)} 2`); svg.setAttribute("preserveAspectRatio", "none"); const el = tabRefs.current.get(active); if (!el) return; const r = el.getBoundingClientRect(); s.tx = r.left - rootRect.left; s.tw = r.width; if (!s.sized || s.reduced) { s.x = s.tx; s.w = s.tw; s.vx = s.vw = 0; s.sized = true; svg.style.opacity = "1"; tenon.style.opacity = "1"; paint(); return; } paint(); // keep the boundary/full-width in sync even while resting wake(); }; const step = (dt: number) => { s.vx += (SPRING_K * (s.tx - s.x) - SPRING_C * s.vx) * dt; s.vw += (SPRING_K * (s.tw - s.w) - SPRING_C * s.vw) * dt; s.x += s.vx * dt; s.w += s.vw * dt; }; let last = 0; const loop = (t: number) => { const dt = Math.min((t - (last || t)) / 1000, 1 / 30); last = t; step(dt); const settled = Math.abs(s.tx - s.x) < 0.25 && Math.abs(s.tw - s.w) < 0.25 && Math.abs(s.vx) < 4 && Math.abs(s.vw) < 4; if (settled) { s.x = s.tx; s.w = s.tw; s.vx = s.vw = 0; } paint(); if (settled) { s.raf = 0; return; } s.raf = requestAnimationFrame(loop); }; measure(); const ro = new ResizeObserver(measure); ro.observe(root); ro.observe(list); return () => { ro.disconnect(); if (s.raf) cancelAnimationFrame(s.raf); s.raf = 0; }; }, [active, tabs.length]); // -- panel: translate + cross-fade on every switch ------------------------ useEffect(() => { if (!transition) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const panel = panelRef.current; const outgoing = outgoingRef.current; if (panel) { if (reduced) { panel.animate([{ opacity: 0 }, { opacity: 1 }], { duration: FADE_MS, easing: "linear", }); } else { panel.animate( [ { opacity: 0, transform: `translateX(${transition.dir * PANEL_SHIFT}px)`, }, { opacity: 1, transform: "translateX(0)" }, ], { duration: ENTER_MS, easing: EASE_OUT_EXPO } ); } } if (outgoing) { outgoing.animate([{ opacity: 1 }, { opacity: 0 }], { duration: FADE_MS, easing: "linear", fill: "forwards", }); } const t = window.setTimeout( () => setTransition(null), reduced ? FADE_MS : Math.max(ENTER_MS, FADE_MS) ); return () => window.clearTimeout(t); }, [transition]); const onKeyDown = (e: KeyboardEvent) => { if (tabs.length === 0) return; let next = -1; if (e.key === "ArrowRight") next = (activeIndex + 1) % tabs.length; else if (e.key === "ArrowLeft") next = (activeIndex - 1 + tabs.length) % tabs.length; else if (e.key === "Home") next = 0; else if (e.key === "End") next = tabs.length - 1; if (next === -1) return; e.preventDefault(); const id = tabs[next]?.id; if (!id) return; selectTab(id); tabRefs.current.get(id)?.focus(); }; return (

{tabs.map((tab) => { const selected = tab.id === active; return ( ); })}

{/* the rule: one path, notched under the active tab — aria-hidden, selection is carried entirely by aria-selected + label weight */} {/* the tenon: a raised nub that slots into the notch above */} ); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/tabs-notch-tenon/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/tabs-notch-tenon.tsx"}],"className":"h-[70svh] min-h-80"}]]}]