50: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 51: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/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.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"] 52:T15ce,"use client"; import type { ComponentProps, ReactNode } from "react"; import { useEffect, useRef, useState } from "react"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { cn } from "@/lib/utils"; export interface WorkspaceTab { /** Stable id, doubles as the panel value, e.g. "preview". */ id: string; /** Mono label, e.g. "preview". */ label: string; /** Optional leading icon. */ icon?: ReactNode; /** Optional count rendered after the label, e.g. checkpoints. */ count?: number; /** Right-aligned actions shown only while this tab is active. */ actions?: ReactNode; /** The pane content. */ content: ReactNode; disabled?: boolean; } export type WorkspaceTabsProps = Omit< ComponentProps, "children" > & { tabs: WorkspaceTab[]; /** Controlled active tab id. */ value?: string; /** Uncontrolled initial tab id; defaults to the first tab. */ defaultValue?: string; onValueChange?: (id: string) => void; }; /* ───────────────────────────────────────────────────────── * TAB BAR STORYBOARD * * rest mono lowercase labels, muted; the active tab * holds foreground with a primary underline * switch the underline glides to the new tab (240ms * strong ease-out, transform-only) and the new * pane fades up 4px; the old pane just leaves * actions each tab owns a right-aligned action slot that * crossfades with the tab switch — the bar's * height never changes * hover label warms to foreground, nothing moves * ───────────────────────────────────────────────────────── */ const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)"; /** The underline that glides between active tabs. */ const GlideUnderline = ({ activeId }: { activeId: string }) => { const ref = useRef(null); const [rect, setRect] = useState<{ left: number; width: number } | null>( null ); useEffect(() => { const list = ref.current?.closest('[data-slot="tabs-list"]'); if (!(list instanceof HTMLElement)) { return; } const measure = () => { const active = list.querySelector("[data-active]"); if (active) { setRect({ left: active.offsetLeft, width: active.offsetWidth }); } }; measure(); const observer = new ResizeObserver(measure); observer.observe(list); return () => observer.disconnect(); }, [activeId]); return ( ); }; export const WorkspaceTabs = ({ className, defaultValue, onValueChange, tabs, value, ...props }: WorkspaceTabsProps) => { const fallback = defaultValue ?? tabs[0]?.id; const [internal, setInternal] = useState(fallback); const active = value ?? internal; const activeTab = tabs.find((tab) => tab.id === active); const handleChange = (next: unknown) => { const id = String(next); setInternal(id); onValueChange?.(id); }; return (

{tabs.map((tab) => ( {tab.icon} {tab.label} {typeof tab.count === "number" ? ( {tab.count} ) : null} ))} {activeTab?.actions ? (

{activeTab.actions}

) : null}

{tabs.map((tab) => ( {tab.content} ))} ); }; 4f:["$","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,["$","$L50",null,{"namespace":"@neon-ui","registryDependencies":["utils","https://ui.neon.com/r/neon-tokens.json","https://ui.neon.com/r/tabs.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/components/workspace-tabs/workspace-tabs.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]