@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.129.1 → 0.7.0-beta.131.1

package/dist/components/composed/DataAppShell/DataAppShell.d.ts

@@ -0,0 +1,88 @@
+import { DataAppShellNavVariant } from './ShellContext';
+import { NavGroup } from './PrimaryNav';
+import * as React from "react";
+export type { NavPage, NavGroup } from './PrimaryNav';
+export interface BreadcrumbItemConfig {
+    /** Display label */
+    label: string;
+    /** If provided, renders as a link */
+    href?: string;
+    /** Click handler (used when no href is provided) */
+    onClick?: () => void;
+}
+export interface DataAppShellProps {
+    /** Application name/abbreviation shown in the logo button */
+    appName: string;
+    /** Full application name shown in the app dropdown and mobile nav header */
+    appFullName?: string;
+    /** Custom icon element shown in the logo area */
+    appIcon?: React.ReactNode;
+    /** Optional version string shown below the app name/icon in the sidebar header */
+    version?: string;
+    /** Navigation groups; each group contains one or more pages */
+    navGroups: NavGroup[];
+    /** Callback when the app name / icon is clicked in the dropdown */
+    onAppNameClick?: () => void;
+    /** TDP path to navigate to when "Back to TDP Platform" is clicked (uses TDPLink — requires TdpNavigationProvider) */
+    backToPlatformPath?: string;
+    /** Fallback callback when "Back to TDP Platform" is clicked and no backToPlatformPath is set */
+    onBackToPlatform?: () => void;
+    /** Slot rendered at the bottom of the sidebar (e.g. user avatar + menu) */
+    userMenu?: React.ReactNode;
+    /** Breadcrumb items from root to current page */
+    breadcrumbs?: BreadcrumbItemConfig[];
+    /** Slot rendered after the breadcrumbs in the top bar's left group
+     *  (e.g. a collapsed horizontal workflow's step dropdown) */
+    headerLeft?: React.ReactNode;
+    /** Center "context" slot in the top bar (e.g. a version / status selector) */
+    headerCenter?: React.ReactNode;
+    /** Slot for right-side actions in the top nav (e.g. data count pills, next button) */
+    headerActions?: React.ReactNode;
+    /** Primary nav axis — `vertical` (sidebar/rail, default) or `horizontal` (top nav row) */
+    navVariant?: DataAppShellNavVariant;
+    /**
+     * Vertical primary nav presentation:
+     * - `rail` (default) — permanent 48px icon-only rail.
+     * - `sidebar` — collapsible 220px sidebar with labels; its brand-row chevron
+     *   collapses it to an icon rail (with an expand chevron under the logo),
+     *   driven by the shell's `collapsed` state.
+     */
+    primaryNav?: "rail" | "sidebar";
+    /** Slot rendered between the primary nav and the content (e.g. a vertical `DataAppShellSecondaryNav`) */
+    sidebarPanel?: React.ReactNode;
+    /** Full-width zone between the top bar and the content row (e.g. a horizontal `DataAppShellSecondaryNav`) */
+    secondaryBar?: React.ReactNode;
+    /** Slot rendered after the content (e.g. a DataAppShellRightPanel) — its FAB anchors to the content row */
+    rightPanel?: React.ReactNode;
+    /** Show the primary nav zone. Set false to hide it entirely. */
+    showNavRail?: boolean;
+    /** Show the top bar zone. Set false to hide it entirely. */
+    showTopBar?: boolean;
+    /** Controlled collapse state — drives the secondary zone (via ShellContext)
+     *  and, with `hideNavOnCollapse`, the primary rail */
+    collapsed?: boolean;
+    /** Uncontrolled initial collapse state */
+    defaultCollapsed?: boolean;
+    /** Called whenever the shell collapse state flips */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Collapsing also hides the primary rail, leaving one icon rail (the secondary
+     *  nav) with an expand affordance — or a floating expand button if there is none. */
+    hideNavOnCollapse?: boolean;
+    /** Media query that auto-collapses the shell while it matches.
+     *  Pass `false` to disable. Defaults to `"(max-width: 1023px)"`. */
+    autoCollapse?: string | false;
+    /** Main content area */
+    children: React.ReactNode;
+    /** Additional className for the root container */
+    className?: string;
+}
+interface AppHeaderMenuProps extends Pick<DataAppShellProps, "appName" | "appFullName" | "appIcon" | "version" | "onAppNameClick" | "backToPlatformPath" | "onBackToPlatform"> {
+    /** compact=true → icon-only trigger (rail); compact=false → icon + name row */
+    compact: boolean;
+    /** Which side of the trigger the dropdown opens on — `right` beside a rail, `bottom` under a top bar */
+    menuSide?: "right" | "bottom";
+}
+declare function AppHeaderMenu({ appName, appFullName, appIcon, version, onAppNameClick, backToPlatformPath, onBackToPlatform, compact, menuSide, }: AppHeaderMenuProps): import("react/jsx-runtime").JSX.Element;
+declare function DataAppShell({ appName, appFullName, appIcon, version, navGroups, onAppNameClick, backToPlatformPath, onBackToPlatform, userMenu, breadcrumbs, headerLeft, headerCenter, headerActions, navVariant, primaryNav, sidebarPanel, secondaryBar, rightPanel, showNavRail, showTopBar, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, hideNavOnCollapse, autoCollapse, children, className, }: DataAppShellProps): import("react/jsx-runtime").JSX.Element;
+export default DataAppShell;
+export { AppHeaderMenu, DataAppShell };

package/dist/components/composed/DataAppShell/DataAppShell.js

@@ -4,12 +4,12 @@ import * as m from "react";
 import { ShellCollapseButton as I } from "./CollapseButton.js";
 import { DataAppShellPrimaryNav as N } from "./PrimaryNav.js";
 import { DataAppShellProvider as te } from "./ShellContext.js";
-import { TDPLink as ne } from "../tdp-link.js";
+import { TDPLink as ne } from "../../../composed/tdp-link.js";
 import { TopBar as le } from "../TopBar/TopBar.js";
-import { Breadcrumb as ie, BreadcrumbList as se, BreadcrumbSeparator as oe, BreadcrumbItem as de, BreadcrumbPage as ce, BreadcrumbLink as me } from "../../ui/breadcrumb.js";
-import { Button as G } from "../../ui/button.js";
-import { DropdownMenu as ue, DropdownMenuTrigger as pe, DropdownMenuContent as fe, DropdownMenuItem as O, DropdownMenuSeparator as he } from "../../ui/dropdown-menu.js";
-import { Sheet as be, SheetContent as ge, SheetTitle as ve, SheetDescription as xe, SheetTrigger as we } from "../../ui/sheet.js";
+import { Breadcrumb as ie, BreadcrumbList as se, BreadcrumbSeparator as oe, BreadcrumbItem as de, BreadcrumbPage as ce, BreadcrumbLink as me } from "../../../ui/breadcrumb.js";
+import { Button as G } from "../../../ui/button.js";
+import { DropdownMenu as ue, DropdownMenuTrigger as pe, DropdownMenuContent as fe, DropdownMenuItem as O, DropdownMenuSeparator as he } from "../../../ui/dropdown-menu.js";
+import { Sheet as be, SheetContent as ge, SheetTitle as ve, SheetDescription as xe, SheetTrigger as we } from "../../../ui/sheet.js";
 import { cn as M } from "../../../lib/utils.js";
 function k({
   appName: t,

package/dist/components/composed/DataAppShell/PrimaryNav.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("class-variance-authority"),V=require("react"),b=require("../../ui/badge.cjs"),x=require("../../ui/tooltip.cjs"),i=require("../../../lib/utils.cjs");function k(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const y=k(V),j=l.cva("flex min-w-0",{variants:{variant:{rail:"flex-col",sidebar:"flex-col",top:"flex-row items-center w-full gap-2"}},defaultVariants:{variant:"rail"}}),A=l.cva("shrink-0 flex",{variants:{variant:{rail:"justify-center py-2",sidebar:"px-3 py-2.5 border-b border-sidebar-border",top:"items-center"}},defaultVariants:{variant:"rail"}}),S=l.cva("flex min-h-0",{variants:{variant:{rail:"flex-1 flex-col items-center gap-1 px-2 pt-2 overflow-y-auto",sidebar:"flex-1 flex-col px-1 py-2 overflow-y-auto",top:"flex-1 flex-row items-center gap-1 min-w-0 overflow-x-auto"}},defaultVariants:{variant:"rail"}}),P=l.cva("flex",{variants:{variant:{rail:"flex-col items-center gap-3 w-full",sidebar:"flex-col gap-0.5",top:"flex-row items-center gap-1"}},defaultVariants:{variant:"rail"}}),C=l.cva("border-sidebar-border",{variants:{variant:{rail:"border-t w-8 my-2",sidebar:"border-t mx-3 my-1",top:"border-l h-5 mx-1 self-center"}},defaultVariants:{variant:"rail"}}),T=l.cva("shrink-0",{variants:{variant:{rail:"flex flex-col items-center py-2",sidebar:"p-2 border-t border-sidebar-border",top:"flex items-center gap-2"}},defaultVariants:{variant:"rail"}}),v=l.cva("cursor-pointer bg-transparent border-none transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",{variants:{variant:{rail:"flex flex-col items-center p-0 w-full",sidebar:"flex items-center gap-3 w-full px-3 py-2 text-sm text-left rounded-md",top:"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap focus-visible:ring-inset"},active:{true:"",false:""}},compoundVariants:[{variant:"sidebar",active:!0,class:"bg-sidebar-accent text-sidebar-foreground font-medium"},{variant:"sidebar",active:!1,class:"text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground"},{variant:"top",active:!0,class:"bg-primary/10 text-primary font-medium"},{variant:"top",active:!1,class:"text-muted-foreground hover:bg-accent hover:text-foreground"}],defaultVariants:{variant:"rail",active:!1}}),q=l.cva("relative flex items-center justify-center rounded-lg transition-colors duration-150",{variants:{active:{true:"bg-primary/10",false:"bg-transparent"},variant:{rail:"w-[30px] h-[30px] hover:bg-accent",sidebar:"w-8 h-8",top:""}},defaultVariants:{active:!1,variant:"rail"}});function O({page:e,variant:t,active:r,onSelect:o}){const s=e.icon,c=()=>{e.onClick?.(),o?.(e.id,e)};if(t==="top")return a.jsxs("button",{type:"button","data-slot":"data-app-shell-primary-nav-item","aria-current":r?"page":void 0,className:i.cn(v({variant:t,active:r})),onClick:c,children:[s&&a.jsx(s,{className:"w-4 h-4"}),a.jsx("span",{children:e.label}),e.badge!=null&&a.jsx(b.Badge,{variant:"secondary",className:"h-4 px-1.5 text-[10px]",children:e.badge})]});const p=s?a.jsx(s,{className:i.cn("w-4 h-4",r?"text-primary":"text-muted-foreground")}):a.jsx("div",{className:i.cn("w-2 h-2 rounded-full",r?"bg-primary":"bg-muted-foreground/40")}),u=a.jsxs("div",{className:i.cn(q({active:r,variant:t})),children:[p,t==="rail"&&e.badge!=null&&a.jsx(b.Badge,{className:"absolute -top-1 -right-1 h-3.5 min-w-3.5 px-1 text-[9px] leading-none",children:e.badge})]});return t==="rail"?a.jsxs(x.Tooltip,{children:[a.jsx(x.TooltipTrigger,{asChild:!0,children:a.jsx("button",{type:"button","data-slot":"data-app-shell-primary-nav-item","aria-label":e.label,"aria-current":r?"page":void 0,className:i.cn(v({variant:t,active:r})),onClick:c,children:u})}),a.jsx(x.TooltipContent,{side:"right",children:e.label})]}):a.jsxs("button",{type:"button","data-slot":"data-app-shell-primary-nav-item","aria-current":r?"page":void 0,className:i.cn(v({variant:t,active:r})),onClick:c,children:[u,a.jsx("span",{className:"truncate",children:e.label}),e.badge!=null&&a.jsx(b.Badge,{variant:"secondary",className:"ml-auto h-4 px-1.5 text-[10px]",children:e.badge})]})}function B({variant:e,navGroups:t,activeKey:r,onSelect:o,header:s,user:c,actions:p,renderItem:u,className:N,...w}){const n=e??"rail",f=n==="rail";return a.jsx("nav",{"data-slot":"data-app-shell-primary-nav","data-variant":n,className:i.cn(j({variant:n}),N),...w,children:a.jsxs(x.TooltipProvider,{children:[s!=null&&a.jsx("div",{"data-slot":"data-app-shell-primary-nav-header",className:i.cn(A({variant:n})),children:s}),f&&s!=null&&a.jsx("div",{className:"shrink-0 mx-auto w-8 border-t border-sidebar-border"}),a.jsx("div",{"data-slot":"data-app-shell-primary-nav-items",className:i.cn(S({variant:n})),children:t.map((m,h)=>a.jsxs(y.Fragment,{children:[h>0&&a.jsx("div",{className:i.cn(C({variant:n}))}),n==="sidebar"&&m.label&&a.jsx("span",{className:"px-3 py-1 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-semibold",children:m.label}),a.jsx("div",{className:i.cn(P({variant:n})),children:m.pages.map(d=>{const g=r==null?d.isActive??!1:d.id===r;return u?a.jsx(y.Fragment,{children:u(d,{active:g,variant:n})},d.id):a.jsx(O,{page:d,variant:n,active:g,onSelect:o},d.id)})})]},`${h}-${m.label??""}`))}),(c!=null||p!=null)&&a.jsxs(a.Fragment,{children:[f&&a.jsx("div",{className:"shrink-0 mx-auto w-8 border-t border-sidebar-border"}),a.jsxs("div",{"data-slot":"data-app-shell-primary-nav-user",className:i.cn(T({variant:n})),children:[p,c]})]})]})})}exports.DataAppShellPrimaryNav=B;exports.dataAppShellPrimaryNavItemVariants=v;exports.dataAppShellPrimaryNavVariants=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),l=require("class-variance-authority"),V=require("react"),b=require("../../../ui/badge.cjs"),x=require("../../../ui/tooltip.cjs"),i=require("../../../lib/utils.cjs");function k(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const y=k(V),j=l.cva("flex min-w-0",{variants:{variant:{rail:"flex-col",sidebar:"flex-col",top:"flex-row items-center w-full gap-2"}},defaultVariants:{variant:"rail"}}),A=l.cva("shrink-0 flex",{variants:{variant:{rail:"justify-center py-2",sidebar:"px-3 py-2.5 border-b border-sidebar-border",top:"items-center"}},defaultVariants:{variant:"rail"}}),S=l.cva("flex min-h-0",{variants:{variant:{rail:"flex-1 flex-col items-center gap-1 px-2 pt-2 overflow-y-auto",sidebar:"flex-1 flex-col px-1 py-2 overflow-y-auto",top:"flex-1 flex-row items-center gap-1 min-w-0 overflow-x-auto"}},defaultVariants:{variant:"rail"}}),P=l.cva("flex",{variants:{variant:{rail:"flex-col items-center gap-3 w-full",sidebar:"flex-col gap-0.5",top:"flex-row items-center gap-1"}},defaultVariants:{variant:"rail"}}),C=l.cva("border-sidebar-border",{variants:{variant:{rail:"border-t w-8 my-2",sidebar:"border-t mx-3 my-1",top:"border-l h-5 mx-1 self-center"}},defaultVariants:{variant:"rail"}}),T=l.cva("shrink-0",{variants:{variant:{rail:"flex flex-col items-center py-2",sidebar:"p-2 border-t border-sidebar-border",top:"flex items-center gap-2"}},defaultVariants:{variant:"rail"}}),v=l.cva("cursor-pointer bg-transparent border-none transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",{variants:{variant:{rail:"flex flex-col items-center p-0 w-full",sidebar:"flex items-center gap-3 w-full px-3 py-2 text-sm text-left rounded-md",top:"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap focus-visible:ring-inset"},active:{true:"",false:""}},compoundVariants:[{variant:"sidebar",active:!0,class:"bg-sidebar-accent text-sidebar-foreground font-medium"},{variant:"sidebar",active:!1,class:"text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground"},{variant:"top",active:!0,class:"bg-primary/10 text-primary font-medium"},{variant:"top",active:!1,class:"text-muted-foreground hover:bg-accent hover:text-foreground"}],defaultVariants:{variant:"rail",active:!1}}),q=l.cva("relative flex items-center justify-center rounded-lg transition-colors duration-150",{variants:{active:{true:"bg-primary/10",false:"bg-transparent"},variant:{rail:"w-[30px] h-[30px] hover:bg-accent",sidebar:"w-8 h-8",top:""}},defaultVariants:{active:!1,variant:"rail"}});function O({page:e,variant:t,active:r,onSelect:o}){const s=e.icon,c=()=>{e.onClick?.(),o?.(e.id,e)};if(t==="top")return a.jsxs("button",{type:"button","data-slot":"data-app-shell-primary-nav-item","aria-current":r?"page":void 0,className:i.cn(v({variant:t,active:r})),onClick:c,children:[s&&a.jsx(s,{className:"w-4 h-4"}),a.jsx("span",{children:e.label}),e.badge!=null&&a.jsx(b.Badge,{variant:"secondary",className:"h-4 px-1.5 text-[10px]",children:e.badge})]});const p=s?a.jsx(s,{className:i.cn("w-4 h-4",r?"text-primary":"text-muted-foreground")}):a.jsx("div",{className:i.cn("w-2 h-2 rounded-full",r?"bg-primary":"bg-muted-foreground/40")}),u=a.jsxs("div",{className:i.cn(q({active:r,variant:t})),children:[p,t==="rail"&&e.badge!=null&&a.jsx(b.Badge,{className:"absolute -top-1 -right-1 h-3.5 min-w-3.5 px-1 text-[9px] leading-none",children:e.badge})]});return t==="rail"?a.jsxs(x.Tooltip,{children:[a.jsx(x.TooltipTrigger,{asChild:!0,children:a.jsx("button",{type:"button","data-slot":"data-app-shell-primary-nav-item","aria-label":e.label,"aria-current":r?"page":void 0,className:i.cn(v({variant:t,active:r})),onClick:c,children:u})}),a.jsx(x.TooltipContent,{side:"right",children:e.label})]}):a.jsxs("button",{type:"button","data-slot":"data-app-shell-primary-nav-item","aria-current":r?"page":void 0,className:i.cn(v({variant:t,active:r})),onClick:c,children:[u,a.jsx("span",{className:"truncate",children:e.label}),e.badge!=null&&a.jsx(b.Badge,{variant:"secondary",className:"ml-auto h-4 px-1.5 text-[10px]",children:e.badge})]})}function _({variant:e,navGroups:t,activeKey:r,onSelect:o,header:s,user:c,actions:p,renderItem:u,className:N,...w}){const n=e??"rail",f=n==="rail";return a.jsx("nav",{"data-slot":"data-app-shell-primary-nav","data-variant":n,className:i.cn(j({variant:n}),N),...w,children:a.jsxs(x.TooltipProvider,{children:[s!=null&&a.jsx("div",{"data-slot":"data-app-shell-primary-nav-header",className:i.cn(A({variant:n})),children:s}),f&&s!=null&&a.jsx("div",{className:"shrink-0 mx-auto w-8 border-t border-sidebar-border"}),a.jsx("div",{"data-slot":"data-app-shell-primary-nav-items",className:i.cn(S({variant:n})),children:t.map((m,h)=>a.jsxs(y.Fragment,{children:[h>0&&a.jsx("div",{className:i.cn(C({variant:n}))}),n==="sidebar"&&m.label&&a.jsx("span",{className:"px-3 py-1 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-semibold",children:m.label}),a.jsx("div",{className:i.cn(P({variant:n})),children:m.pages.map(d=>{const g=r==null?d.isActive??!1:d.id===r;return u?a.jsx(y.Fragment,{children:u(d,{active:g,variant:n})},d.id):a.jsx(O,{page:d,variant:n,active:g,onSelect:o},d.id)})})]},`${h}-${m.label??""}`))}),(c!=null||p!=null)&&a.jsxs(a.Fragment,{children:[f&&a.jsx("div",{className:"shrink-0 mx-auto w-8 border-t border-sidebar-border"}),a.jsxs("div",{"data-slot":"data-app-shell-primary-nav-user",className:i.cn(T({variant:n})),children:[p,c]})]})]})})}exports.DataAppShellPrimaryNav=_;exports.dataAppShellPrimaryNavItemVariants=v;exports.dataAppShellPrimaryNavVariants=j;
 //# sourceMappingURL=PrimaryNav.cjs.map

package/dist/components/composed/DataAppShell/PrimaryNav.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryNav.cjs","sources":["../../../../src/components/composed/DataAppShell/PrimaryNav.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { type LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface NavPage {\n  /** Unique identifier */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Lucide icon or custom React SVG component */\n  icon?: LucideIcon | React.FC<React.SVGProps<SVGSVGElement>>;\n  /** Optional count/status badge — overlaid on the icon in `rail`, inline in `sidebar`/`top` */\n  badge?: React.ReactNode;\n  /** Whether this page is currently active (ignored when `activeKey` is set on the nav) */\n  isActive?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n}\n\nexport interface NavGroup {\n  /** Optional group label shown as a section header in the `sidebar` variant */\n  label?: string;\n  /** Page entries in this group */\n  pages: NavPage[];\n}\n\nexport type DataAppShellPrimaryNavVariant = \"rail\" | \"sidebar\" | \"top\";\n\n// =============================================================================\n// CVA variants — one placement per `variant`\n// =============================================================================\n\nconst dataAppShellPrimaryNavVariants = cva(\"flex min-w-0\", {\n  variants: {\n    variant: {\n      /** Vertical icon-only rail — tooltips on hover, user slot at the bottom */\n      rail: \"flex-col\",\n      /** Vertical icon + label panel — group labels, user slot at the bottom */\n      sidebar: \"flex-col\",\n      /** Horizontal bar — labels inline, user/actions slot on the right */\n      top: \"flex-row items-center w-full gap-2\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst headerAreaVariants = cva(\"shrink-0 flex\", {\n  variants: {\n    variant: {\n      rail: \"justify-center py-2\",\n      sidebar: \"px-3 py-2.5 border-b border-sidebar-border\",\n      top: \"items-center\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst itemsAreaVariants = cva(\"flex min-h-0\", {\n  variants: {\n    variant: {\n      rail: \"flex-1 flex-col items-center gap-1 px-2 pt-2 overflow-y-auto\",\n      // px-1 — the inset previously lived on each row as `mx-1` alongside\n      // `w-full`, which made every row 8px wider than its container and got\n      // clipped by this scroll area (SW-2118 sidebar row cut-off).\n      sidebar: \"flex-1 flex-col px-1 py-2 overflow-y-auto\",\n      top: \"flex-1 flex-row items-center gap-1 min-w-0 overflow-x-auto\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst groupItemsVariants = cva(\"flex\", {\n  variants: {\n    variant: {\n      rail: \"flex-col items-center gap-3 w-full\",\n      sidebar: \"flex-col gap-0.5\",\n      top: \"flex-row items-center gap-1\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst groupSeparatorVariants = cva(\"border-sidebar-border\", {\n  variants: {\n    variant: {\n      rail: \"border-t w-8 my-2\",\n      sidebar: \"border-t mx-3 my-1\",\n      top: \"border-l h-5 mx-1 self-center\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst userAreaVariants = cva(\"shrink-0\", {\n  variants: {\n    variant: {\n      rail: \"flex flex-col items-center py-2\",\n      sidebar: \"p-2 border-t border-sidebar-border\",\n      top: \"flex items-center gap-2\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst dataAppShellPrimaryNavItemVariants = cva(\n  \"cursor-pointer bg-transparent border-none transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n  {\n    variants: {\n      variant: {\n        rail: \"flex flex-col items-center p-0 w-full\",\n        sidebar: \"flex items-center gap-3 w-full px-3 py-2 text-sm text-left rounded-md\",\n        // ring-inset — the items row is an overflow-x-auto scroll container,\n        // which would clip an outset ring at the row's edges\n        top: \"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap focus-visible:ring-inset\",\n      },\n      active: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"sidebar\",\n        active: true,\n        class: \"bg-sidebar-accent text-sidebar-foreground font-medium\",\n      },\n      {\n        variant: \"sidebar\",\n        active: false,\n        class: \"text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground\",\n      },\n      {\n        variant: \"top\",\n        active: true,\n        class: \"bg-primary/10 text-primary font-medium\",\n      },\n      {\n        variant: \"top\",\n        active: false,\n        class: \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n      },\n    ],\n    defaultVariants: { variant: \"rail\", active: false },\n  }\n);\n\nconst pageIconVariants = cva(\n  \"relative flex items-center justify-center rounded-lg transition-colors duration-150\",\n  {\n    variants: {\n      active: {\n        true: \"bg-primary/10\",\n        false: \"bg-transparent\",\n      },\n      variant: {\n        rail: \"w-[30px] h-[30px] hover:bg-accent\",\n        sidebar: \"w-8 h-8\",\n        top: \"\",\n      },\n    },\n    defaultVariants: { active: false, variant: \"rail\" },\n  }\n);\n\n// =============================================================================\n// Props\n// =============================================================================\n\nexport interface DataAppShellPrimaryNavProps\n  extends Omit<React.ComponentProps<\"nav\">, \"children\" | \"onSelect\">,\n    VariantProps<typeof dataAppShellPrimaryNavVariants> {\n  /** Navigation groups; each group contains one or more pages */\n  navGroups: NavGroup[];\n  /** Controlled active page id — takes precedence over per-page `isActive` */\n  activeKey?: string;\n  /** Called with the selected page id after the page's own `onClick` */\n  onSelect?: (key: string, page: NavPage) => void;\n  /** Slot above the items in `rail`/`sidebar`, left of the items in `top` (e.g. app logo) */\n  header?: React.ReactNode;\n  /** User slot (e.g. `<UserMenu/>`) — bottom in `rail`/`sidebar`, right in `top` */\n  user?: React.ReactNode;\n  /** Action slot rendered alongside `user` */\n  actions?: React.ReactNode;\n  /** Escape hatch — full control over an item's rendering */\n  renderItem?: (\n    page: NavPage,\n    state: { active: boolean; variant: DataAppShellPrimaryNavVariant }\n  ) => React.ReactNode;\n}\n\n// =============================================================================\n// NavItem\n// =============================================================================\n\ninterface NavItemProps {\n  page: NavPage;\n  variant: DataAppShellPrimaryNavVariant;\n  active: boolean;\n  onSelect?: (key: string, page: NavPage) => void;\n}\n\nfunction NavItem({ page, variant, active, onSelect }: NavItemProps) {\n  const Icon = page.icon;\n\n  const handleClick = () => {\n    page.onClick?.();\n    onSelect?.(page.id, page);\n  };\n\n  if (variant === \"top\") {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"data-app-shell-primary-nav-item\"\n        aria-current={active ? \"page\" : undefined}\n        className={cn(dataAppShellPrimaryNavItemVariants({ variant, active }))}\n        onClick={handleClick}\n      >\n        {Icon && <Icon className=\"w-4 h-4\" />}\n        <span>{page.label}</span>\n        {page.badge != null && (\n          <Badge variant=\"secondary\" className=\"h-4 px-1.5 text-[10px]\">\n            {page.badge}\n          </Badge>\n        )}\n      </button>\n    );\n  }\n\n  const iconEl = Icon ? (\n    <Icon\n      className={cn(\"w-4 h-4\", active ? \"text-primary\" : \"text-muted-foreground\")}\n    />\n  ) : (\n    <div\n      className={cn(\n        \"w-2 h-2 rounded-full\",\n        active ? \"bg-primary\" : \"bg-muted-foreground/40\"\n      )}\n    />\n  );\n\n  const iconBox = (\n    <div className={cn(pageIconVariants({ active, variant }))}>\n      {iconEl}\n      {variant === \"rail\" && page.badge != null && (\n        <Badge className=\"absolute -top-1 -right-1 h-3.5 min-w-3.5 px-1 text-[9px] leading-none\">\n          {page.badge}\n        </Badge>\n      )}\n    </div>\n  );\n\n  if (variant === \"rail\") {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"data-app-shell-primary-nav-item\"\n            aria-label={page.label}\n            aria-current={active ? \"page\" : undefined}\n            className={cn(dataAppShellPrimaryNavItemVariants({ variant, active }))}\n            onClick={handleClick}\n          >\n            {iconBox}\n          </button>\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{page.label}</TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  // sidebar — icon + label row\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"data-app-shell-primary-nav-item\"\n      aria-current={active ? \"page\" : undefined}\n      className={cn(dataAppShellPrimaryNavItemVariants({ variant, active }))}\n      onClick={handleClick}\n    >\n      {iconBox}\n      <span className=\"truncate\">{page.label}</span>\n      {page.badge != null && (\n        <Badge variant=\"secondary\" className=\"ml-auto h-4 px-1.5 text-[10px]\">\n          {page.badge}\n        </Badge>\n      )}\n    </button>\n  );\n}\n\n// =============================================================================\n// DataAppShellPrimaryNav\n// =============================================================================\n\n/**\n * The Data App Shell's nav engine — one `navGroups` model rendered in three\n * placements via `variant`:\n *\n * - **rail** — vertical icon-only (48px rail); labels via tooltip, user slot at the bottom\n * - **sidebar** — vertical icon + label with group headers, user slot at the bottom\n * - **top** — horizontal bar; user/actions slot on the right\n *\n * Active state is either controlled via `activeKey` or per-page `isActive`.\n * Width/background chrome is owned by the container (the shell's rail wrapper,\n * a Sheet, or a TopBar) — this component is layout-neutral.\n */\nfunction DataAppShellPrimaryNav({\n  variant,\n  navGroups,\n  activeKey,\n  onSelect,\n  header,\n  user,\n  actions,\n  renderItem,\n  className,\n  ...props\n}: DataAppShellPrimaryNavProps) {\n  const resolvedVariant: DataAppShellPrimaryNavVariant = variant ?? \"rail\";\n  const isRail = resolvedVariant === \"rail\";\n\n  return (\n    <nav\n      data-slot=\"data-app-shell-primary-nav\"\n      data-variant={resolvedVariant}\n      className={cn(dataAppShellPrimaryNavVariants({ variant: resolvedVariant }), className)}\n      {...props}\n    >\n      <TooltipProvider>\n        {header != null && (\n          <div\n            data-slot=\"data-app-shell-primary-nav-header\"\n            className={cn(headerAreaVariants({ variant: resolvedVariant }))}\n          >\n            {header}\n          </div>\n        )}\n        {/* Rail: short centered divider under the header, aligned with the icon column */}\n        {isRail && header != null && (\n          <div className=\"shrink-0 mx-auto w-8 border-t border-sidebar-border\" />\n        )}\n\n        <div\n          data-slot=\"data-app-shell-primary-nav-items\"\n          className={cn(itemsAreaVariants({ variant: resolvedVariant }))}\n        >\n          {navGroups.map((group, groupIndex) => (\n            <React.Fragment key={`${groupIndex}-${group.label ?? \"\"}`}>\n              {groupIndex > 0 && (\n                <div className={cn(groupSeparatorVariants({ variant: resolvedVariant }))} />\n              )}\n              {resolvedVariant === \"sidebar\" && group.label && (\n                <span className=\"px-3 py-1 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-semibold\">\n                  {group.label}\n                </span>\n              )}\n              <div className={cn(groupItemsVariants({ variant: resolvedVariant }))}>\n                {group.pages.map((page) => {\n                  const active =\n                    activeKey == null ? (page.isActive ?? false) : page.id === activeKey;\n                  if (renderItem) {\n                    return (\n                      <React.Fragment key={page.id}>\n                        {renderItem(page, { active, variant: resolvedVariant })}\n                      </React.Fragment>\n                    );\n                  }\n                  return (\n                    <NavItem\n                      key={page.id}\n                      page={page}\n                      variant={resolvedVariant}\n                      active={active}\n                      onSelect={onSelect}\n                    />\n                  );\n                })}\n              </div>\n            </React.Fragment>\n          ))}\n        </div>\n\n        {(user != null || actions != null) && (\n          <>\n            {/* Rail: short centered divider above the user slot */}\n            {isRail && (\n              <div className=\"shrink-0 mx-auto w-8 border-t border-sidebar-border\" />\n            )}\n            <div\n              data-slot=\"data-app-shell-primary-nav-user\"\n              className={cn(userAreaVariants({ variant: resolvedVariant }))}\n            >\n              {actions}\n              {user}\n            </div>\n          </>\n        )}\n      </TooltipProvider>\n    </nav>\n  );\n}\n\nexport {\n  DataAppShellPrimaryNav,\n  dataAppShellPrimaryNavVariants,\n  dataAppShellPrimaryNavItemVariants,\n};\n"],"names":["dataAppShellPrimaryNavVariants","cva","headerAreaVariants","itemsAreaVariants","groupItemsVariants","groupSeparatorVariants","userAreaVariants","dataAppShellPrimaryNavItemVariants","pageIconVariants","NavItem","page","variant","active","onSelect","Icon","handleClick","jsxs","cn","jsx","Badge","iconEl","iconBox","Tooltip","TooltipTrigger","TooltipContent","DataAppShellPrimaryNav","navGroups","activeKey","header","user","actions","renderItem","className","props","resolvedVariant","isRail","TooltipProvider","group","groupIndex","React","Fragment"],"mappings":"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"}
+{"version":3,"file":"PrimaryNav.cjs","sources":["../../../../src/components/composed/DataAppShell/PrimaryNav.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { type LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface NavPage {\n  /** Unique identifier */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Lucide icon or custom React SVG component */\n  icon?: LucideIcon | React.FC<React.SVGProps<SVGSVGElement>>;\n  /** Optional count/status badge — overlaid on the icon in `rail`, inline in `sidebar`/`top` */\n  badge?: React.ReactNode;\n  /** Whether this page is currently active (ignored when `activeKey` is set on the nav) */\n  isActive?: boolean;\n  /** Click handler */\n  onClick?: () => void;\n}\n\nexport interface NavGroup {\n  /** Optional group label shown as a section header in the `sidebar` variant */\n  label?: string;\n  /** Page entries in this group */\n  pages: NavPage[];\n}\n\nexport type DataAppShellPrimaryNavVariant = \"rail\" | \"sidebar\" | \"top\";\n\n// =============================================================================\n// CVA variants — one placement per `variant`\n// =============================================================================\n\nconst dataAppShellPrimaryNavVariants = cva(\"flex min-w-0\", {\n  variants: {\n    variant: {\n      /** Vertical icon-only rail — tooltips on hover, user slot at the bottom */\n      rail: \"flex-col\",\n      /** Vertical icon + label panel — group labels, user slot at the bottom */\n      sidebar: \"flex-col\",\n      /** Horizontal bar — labels inline, user/actions slot on the right */\n      top: \"flex-row items-center w-full gap-2\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst headerAreaVariants = cva(\"shrink-0 flex\", {\n  variants: {\n    variant: {\n      rail: \"justify-center py-2\",\n      sidebar: \"px-3 py-2.5 border-b border-sidebar-border\",\n      top: \"items-center\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst itemsAreaVariants = cva(\"flex min-h-0\", {\n  variants: {\n    variant: {\n      rail: \"flex-1 flex-col items-center gap-1 px-2 pt-2 overflow-y-auto\",\n      // px-1 — the inset previously lived on each row as `mx-1` alongside\n      // `w-full`, which made every row 8px wider than its container and got\n      // clipped by this scroll area (SW-2118 sidebar row cut-off).\n      sidebar: \"flex-1 flex-col px-1 py-2 overflow-y-auto\",\n      top: \"flex-1 flex-row items-center gap-1 min-w-0 overflow-x-auto\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst groupItemsVariants = cva(\"flex\", {\n  variants: {\n    variant: {\n      rail: \"flex-col items-center gap-3 w-full\",\n      sidebar: \"flex-col gap-0.5\",\n      top: \"flex-row items-center gap-1\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst groupSeparatorVariants = cva(\"border-sidebar-border\", {\n  variants: {\n    variant: {\n      rail: \"border-t w-8 my-2\",\n      sidebar: \"border-t mx-3 my-1\",\n      top: \"border-l h-5 mx-1 self-center\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst userAreaVariants = cva(\"shrink-0\", {\n  variants: {\n    variant: {\n      rail: \"flex flex-col items-center py-2\",\n      sidebar: \"p-2 border-t border-sidebar-border\",\n      top: \"flex items-center gap-2\",\n    },\n  },\n  defaultVariants: { variant: \"rail\" },\n});\n\nconst dataAppShellPrimaryNavItemVariants = cva(\n  \"cursor-pointer bg-transparent border-none transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n  {\n    variants: {\n      variant: {\n        rail: \"flex flex-col items-center p-0 w-full\",\n        sidebar: \"flex items-center gap-3 w-full px-3 py-2 text-sm text-left rounded-md\",\n        // ring-inset — the items row is an overflow-x-auto scroll container,\n        // which would clip an outset ring at the row's edges\n        top: \"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap focus-visible:ring-inset\",\n      },\n      active: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"sidebar\",\n        active: true,\n        class: \"bg-sidebar-accent text-sidebar-foreground font-medium\",\n      },\n      {\n        variant: \"sidebar\",\n        active: false,\n        class: \"text-muted-foreground hover:bg-sidebar-accent/60 hover:text-foreground\",\n      },\n      {\n        variant: \"top\",\n        active: true,\n        class: \"bg-primary/10 text-primary font-medium\",\n      },\n      {\n        variant: \"top\",\n        active: false,\n        class: \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n      },\n    ],\n    defaultVariants: { variant: \"rail\", active: false },\n  }\n);\n\nconst pageIconVariants = cva(\n  \"relative flex items-center justify-center rounded-lg transition-colors duration-150\",\n  {\n    variants: {\n      active: {\n        true: \"bg-primary/10\",\n        false: \"bg-transparent\",\n      },\n      variant: {\n        rail: \"w-[30px] h-[30px] hover:bg-accent\",\n        sidebar: \"w-8 h-8\",\n        top: \"\",\n      },\n    },\n    defaultVariants: { active: false, variant: \"rail\" },\n  }\n);\n\n// =============================================================================\n// Props\n// =============================================================================\n\nexport interface DataAppShellPrimaryNavProps\n  extends Omit<React.ComponentProps<\"nav\">, \"children\" | \"onSelect\">,\n    VariantProps<typeof dataAppShellPrimaryNavVariants> {\n  /** Navigation groups; each group contains one or more pages */\n  navGroups: NavGroup[];\n  /** Controlled active page id — takes precedence over per-page `isActive` */\n  activeKey?: string;\n  /** Called with the selected page id after the page's own `onClick` */\n  onSelect?: (key: string, page: NavPage) => void;\n  /** Slot above the items in `rail`/`sidebar`, left of the items in `top` (e.g. app logo) */\n  header?: React.ReactNode;\n  /** User slot (e.g. `<UserMenu/>`) — bottom in `rail`/`sidebar`, right in `top` */\n  user?: React.ReactNode;\n  /** Action slot rendered alongside `user` */\n  actions?: React.ReactNode;\n  /** Escape hatch — full control over an item's rendering */\n  renderItem?: (\n    page: NavPage,\n    state: { active: boolean; variant: DataAppShellPrimaryNavVariant }\n  ) => React.ReactNode;\n}\n\n// =============================================================================\n// NavItem\n// =============================================================================\n\ninterface NavItemProps {\n  page: NavPage;\n  variant: DataAppShellPrimaryNavVariant;\n  active: boolean;\n  onSelect?: (key: string, page: NavPage) => void;\n}\n\nfunction NavItem({ page, variant, active, onSelect }: NavItemProps) {\n  const Icon = page.icon;\n\n  const handleClick = () => {\n    page.onClick?.();\n    onSelect?.(page.id, page);\n  };\n\n  if (variant === \"top\") {\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"data-app-shell-primary-nav-item\"\n        aria-current={active ? \"page\" : undefined}\n        className={cn(dataAppShellPrimaryNavItemVariants({ variant, active }))}\n        onClick={handleClick}\n      >\n        {Icon && <Icon className=\"w-4 h-4\" />}\n        <span>{page.label}</span>\n        {page.badge != null && (\n          <Badge variant=\"secondary\" className=\"h-4 px-1.5 text-[10px]\">\n            {page.badge}\n          </Badge>\n        )}\n      </button>\n    );\n  }\n\n  const iconEl = Icon ? (\n    <Icon\n      className={cn(\"w-4 h-4\", active ? \"text-primary\" : \"text-muted-foreground\")}\n    />\n  ) : (\n    <div\n      className={cn(\n        \"w-2 h-2 rounded-full\",\n        active ? \"bg-primary\" : \"bg-muted-foreground/40\"\n      )}\n    />\n  );\n\n  const iconBox = (\n    <div className={cn(pageIconVariants({ active, variant }))}>\n      {iconEl}\n      {variant === \"rail\" && page.badge != null && (\n        <Badge className=\"absolute -top-1 -right-1 h-3.5 min-w-3.5 px-1 text-[9px] leading-none\">\n          {page.badge}\n        </Badge>\n      )}\n    </div>\n  );\n\n  if (variant === \"rail\") {\n    return (\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"data-app-shell-primary-nav-item\"\n            aria-label={page.label}\n            aria-current={active ? \"page\" : undefined}\n            className={cn(dataAppShellPrimaryNavItemVariants({ variant, active }))}\n            onClick={handleClick}\n          >\n            {iconBox}\n          </button>\n        </TooltipTrigger>\n        <TooltipContent side=\"right\">{page.label}</TooltipContent>\n      </Tooltip>\n    );\n  }\n\n  // sidebar — icon + label row\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"data-app-shell-primary-nav-item\"\n      aria-current={active ? \"page\" : undefined}\n      className={cn(dataAppShellPrimaryNavItemVariants({ variant, active }))}\n      onClick={handleClick}\n    >\n      {iconBox}\n      <span className=\"truncate\">{page.label}</span>\n      {page.badge != null && (\n        <Badge variant=\"secondary\" className=\"ml-auto h-4 px-1.5 text-[10px]\">\n          {page.badge}\n        </Badge>\n      )}\n    </button>\n  );\n}\n\n// =============================================================================\n// DataAppShellPrimaryNav\n// =============================================================================\n\n/**\n * The Data App Shell's nav engine — one `navGroups` model rendered in three\n * placements via `variant`:\n *\n * - **rail** — vertical icon-only (48px rail); labels via tooltip, user slot at the bottom\n * - **sidebar** — vertical icon + label with group headers, user slot at the bottom\n * - **top** — horizontal bar; user/actions slot on the right\n *\n * Active state is either controlled via `activeKey` or per-page `isActive`.\n * Width/background chrome is owned by the container (the shell's rail wrapper,\n * a Sheet, or a TopBar) — this component is layout-neutral.\n */\nfunction DataAppShellPrimaryNav({\n  variant,\n  navGroups,\n  activeKey,\n  onSelect,\n  header,\n  user,\n  actions,\n  renderItem,\n  className,\n  ...props\n}: DataAppShellPrimaryNavProps) {\n  const resolvedVariant: DataAppShellPrimaryNavVariant = variant ?? \"rail\";\n  const isRail = resolvedVariant === \"rail\";\n\n  return (\n    <nav\n      data-slot=\"data-app-shell-primary-nav\"\n      data-variant={resolvedVariant}\n      className={cn(dataAppShellPrimaryNavVariants({ variant: resolvedVariant }), className)}\n      {...props}\n    >\n      <TooltipProvider>\n        {header != null && (\n          <div\n            data-slot=\"data-app-shell-primary-nav-header\"\n            className={cn(headerAreaVariants({ variant: resolvedVariant }))}\n          >\n            {header}\n          </div>\n        )}\n        {/* Rail: short centered divider under the header, aligned with the icon column */}\n        {isRail && header != null && (\n          <div className=\"shrink-0 mx-auto w-8 border-t border-sidebar-border\" />\n        )}\n\n        <div\n          data-slot=\"data-app-shell-primary-nav-items\"\n          className={cn(itemsAreaVariants({ variant: resolvedVariant }))}\n        >\n          {navGroups.map((group, groupIndex) => (\n            <React.Fragment key={`${groupIndex}-${group.label ?? \"\"}`}>\n              {groupIndex > 0 && (\n                <div className={cn(groupSeparatorVariants({ variant: resolvedVariant }))} />\n              )}\n              {resolvedVariant === \"sidebar\" && group.label && (\n                <span className=\"px-3 py-1 text-[10px] uppercase tracking-widest text-muted-foreground/60 font-semibold\">\n                  {group.label}\n                </span>\n              )}\n              <div className={cn(groupItemsVariants({ variant: resolvedVariant }))}>\n                {group.pages.map((page) => {\n                  const active =\n                    activeKey == null ? (page.isActive ?? false) : page.id === activeKey;\n                  if (renderItem) {\n                    return (\n                      <React.Fragment key={page.id}>\n                        {renderItem(page, { active, variant: resolvedVariant })}\n                      </React.Fragment>\n                    );\n                  }\n                  return (\n                    <NavItem\n                      key={page.id}\n                      page={page}\n                      variant={resolvedVariant}\n                      active={active}\n                      onSelect={onSelect}\n                    />\n                  );\n                })}\n              </div>\n            </React.Fragment>\n          ))}\n        </div>\n\n        {(user != null || actions != null) && (\n          <>\n            {/* Rail: short centered divider above the user slot */}\n            {isRail && (\n              <div className=\"shrink-0 mx-auto w-8 border-t border-sidebar-border\" />\n            )}\n            <div\n              data-slot=\"data-app-shell-primary-nav-user\"\n              className={cn(userAreaVariants({ variant: resolvedVariant }))}\n            >\n              {actions}\n              {user}\n            </div>\n          </>\n        )}\n      </TooltipProvider>\n    </nav>\n  );\n}\n\nexport {\n  DataAppShellPrimaryNav,\n  dataAppShellPrimaryNavVariants,\n  dataAppShellPrimaryNavItemVariants,\n};\n"],"names":["dataAppShellPrimaryNavVariants","cva","headerAreaVariants","itemsAreaVariants","groupItemsVariants","groupSeparatorVariants","userAreaVariants","dataAppShellPrimaryNavItemVariants","pageIconVariants","NavItem","page","variant","active","onSelect","Icon","handleClick","jsxs","cn","jsx","Badge","iconEl","iconBox","Tooltip","TooltipTrigger","TooltipContent","DataAppShellPrimaryNav","navGroups","activeKey","header","user","actions","renderItem","className","props","resolvedVariant","isRail","TooltipProvider","group","groupIndex","React","Fragment"],"mappings":"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"}

package/dist/components/composed/DataAppShell/PrimaryNav.d.ts

@@ -0,0 +1,64 @@
+import { VariantProps } from 'class-variance-authority';
+import { LucideIcon } from 'lucide-react';
+import * as React from "react";
+export interface NavPage {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Lucide icon or custom React SVG component */
+    icon?: LucideIcon | React.FC<React.SVGProps<SVGSVGElement>>;
+    /** Optional count/status badge — overlaid on the icon in `rail`, inline in `sidebar`/`top` */
+    badge?: React.ReactNode;
+    /** Whether this page is currently active (ignored when `activeKey` is set on the nav) */
+    isActive?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+}
+export interface NavGroup {
+    /** Optional group label shown as a section header in the `sidebar` variant */
+    label?: string;
+    /** Page entries in this group */
+    pages: NavPage[];
+}
+export type DataAppShellPrimaryNavVariant = "rail" | "sidebar" | "top";
+declare const dataAppShellPrimaryNavVariants: (props?: ({
+    variant?: "top" | "rail" | "sidebar" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const dataAppShellPrimaryNavItemVariants: (props?: ({
+    variant?: "top" | "rail" | "sidebar" | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DataAppShellPrimaryNavProps extends Omit<React.ComponentProps<"nav">, "children" | "onSelect">, VariantProps<typeof dataAppShellPrimaryNavVariants> {
+    /** Navigation groups; each group contains one or more pages */
+    navGroups: NavGroup[];
+    /** Controlled active page id — takes precedence over per-page `isActive` */
+    activeKey?: string;
+    /** Called with the selected page id after the page's own `onClick` */
+    onSelect?: (key: string, page: NavPage) => void;
+    /** Slot above the items in `rail`/`sidebar`, left of the items in `top` (e.g. app logo) */
+    header?: React.ReactNode;
+    /** User slot (e.g. `<UserMenu/>`) — bottom in `rail`/`sidebar`, right in `top` */
+    user?: React.ReactNode;
+    /** Action slot rendered alongside `user` */
+    actions?: React.ReactNode;
+    /** Escape hatch — full control over an item's rendering */
+    renderItem?: (page: NavPage, state: {
+        active: boolean;
+        variant: DataAppShellPrimaryNavVariant;
+    }) => React.ReactNode;
+}
+/**
+ * The Data App Shell's nav engine — one `navGroups` model rendered in three
+ * placements via `variant`:
+ *
+ * - **rail** — vertical icon-only (48px rail); labels via tooltip, user slot at the bottom
+ * - **sidebar** — vertical icon + label with group headers, user slot at the bottom
+ * - **top** — horizontal bar; user/actions slot on the right
+ *
+ * Active state is either controlled via `activeKey` or per-page `isActive`.
+ * Width/background chrome is owned by the container (the shell's rail wrapper,
+ * a Sheet, or a TopBar) — this component is layout-neutral.
+ */
+declare function DataAppShellPrimaryNav({ variant, navGroups, activeKey, onSelect, header, user, actions, renderItem, className, ...props }: DataAppShellPrimaryNavProps): import("react/jsx-runtime").JSX.Element;
+export { DataAppShellPrimaryNav, dataAppShellPrimaryNavVariants, dataAppShellPrimaryNavItemVariants, };

package/dist/components/composed/DataAppShell/PrimaryNav.js

@@ -1,8 +1,8 @@
 import { jsx as a, jsxs as s, Fragment as V } from "react/jsx-runtime";
 import { cva as o } from "class-variance-authority";
 import * as y from "react";
-import { Badge as b } from "../../ui/badge.js";
-import { TooltipProvider as k, Tooltip as A, TooltipTrigger as C, TooltipContent as T } from "../../ui/tooltip.js";
+import { Badge as b } from "../../../ui/badge.js";
+import { TooltipProvider as k, Tooltip as A, TooltipTrigger as C, TooltipContent as T } from "../../../ui/tooltip.js";
 import { cn as t } from "../../../lib/utils.js";
 const j = o("flex min-w-0", {
   variants: {

package/dist/components/composed/DataAppShell/RightPanel.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),H=require("class-variance-authority"),E=require("lucide-react"),U=require("radix-ui"),$=require("react"),G=require("../../ui/button.cjs"),m=require("../../ui/sheet.cjs"),x=require("../../../lib/utils.cjs");function L(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,o.get?o:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const u=L($),Y="ts-ui.right-panel";function q(t){return`${Y}.${t}.width`}function b(t,e,r){return Math.min(r,Math.max(e,t))}function Z(t,e,r,o){if(typeof window>"u")return e;let l;try{l=Number(window.localStorage.getItem(q(t)))}catch{return e}return!Number.isFinite(l)||l<=0?e:b(l,r,o)}function J(t,e){if(!(typeof window>"u"))try{window.localStorage.setItem(q(t),String(Math.round(e)))}catch{}}const I=H.cva("inline-flex items-center justify-center border-none cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",{variants:{variant:{fab:"absolute bottom-4 right-4 z-40 rounded-full bg-primary text-primary-foreground shadow-elevation-4 hover:bg-primary/90 focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95",icon:"rounded-lg bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-foreground"},size:{default:"",lg:""}},compoundVariants:[{variant:"fab",size:"default",class:"size-10 [&_svg:not([class*='size-'])]:size-4"},{variant:"fab",size:"lg",class:"size-12 [&_svg:not([class*='size-'])]:size-5"},{variant:"icon",size:"default",class:"size-7 [&_svg:not([class*='size-'])]:size-4"},{variant:"icon",size:"lg",class:"size-8 [&_svg:not([class*='size-'])]:size-4"}],defaultVariants:{variant:"fab",size:"default"}});function M({className:t,variant:e,size:r,asChild:o=!1,children:l,...f}){const s=o?U.Slot.Root:"button";return n.jsx(s,{...o?{}:{type:"button"},"data-slot":"data-app-shell-right-panel-trigger","data-variant":e??"fab",className:x.cn(I({variant:e,size:r}),t),...f,children:o?l:l??n.jsx(E.PanelRightOpen,{})})}const _=16;function Q({width:t,minWidth:e,maxWidth:r,onResize:o,onCommit:l,onDraggingChange:f}){const s=u.useRef(null),c=u.useRef(t);c.current=t;const g=a=>{if(a.button===0){s.current={startX:a.clientX,startWidth:c.current,liveWidth:c.current};try{a.currentTarget.setPointerCapture(a.pointerId)}catch{}f(!0)}},d=a=>{if(!s.current)return;const i=s.current.startX-a.clientX,v=b(s.current.startWidth+i,e,r);s.current.liveWidth=v,o(v)},p=a=>{if(!s.current)return;const i=s.current.liveWidth;s.current=null,a.currentTarget.hasPointerCapture(a.pointerId)&&a.currentTarget.releasePointerCapture(a.pointerId),f(!1),l(i)},y=a=>{let i=null;switch(a.key){case"ArrowLeft":i=b(c.current+_,e,r);break;case"ArrowRight":i=b(c.current-_,e,r);break;case"Home":i=e;break;case"End":i=r;break}i!=null&&(a.preventDefault(),o(i),l(i))};return n.jsx("div",{"data-slot":"data-app-shell-right-panel-drag-handle",role:"separator","aria-orientation":"vertical","aria-label":"Resize panel","aria-valuemin":e,"aria-valuemax":r,"aria-valuenow":Math.round(t),tabIndex:0,className:x.cn("absolute inset-y-0 left-0 z-10 w-px cursor-col-resize touch-none select-none bg-transparent transition-colors","after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2","hover:bg-border active:bg-border focus-visible:outline-none focus-visible:bg-ring","flex items-center justify-center","[&>div]:opacity-0 hover:[&>div]:opacity-100 active:[&>div]:opacity-100 focus-visible:[&>div]:opacity-100"),onPointerDown:g,onPointerMove:d,onPointerUp:p,onPointerCancel:p,onKeyDown:y,children:n.jsx("div",{className:"z-10 h-6 w-1 shrink-0 rounded-lg bg-muted-foreground/40 transition-opacity"})})}function W({id:t,open:e,onOpenChange:r,variant:o="docked",resizable:l=!0,defaultWidth:f=320,minWidth:s=240,maxWidth:c=560,persist:g=!0,title:d,icon:p,headerActions:y,showTrigger:a=!0,triggerIcon:i,triggerLabel:v="Open panel",triggerRef:C,children:O,className:w,ref:X,...R}){const[S,F]=u.useState(()=>g?Z(t,f,s,c):b(f,s,c)),[K,V]=u.useState(!1),z=u.useRef(null),P=u.useRef(null),j=a?P:C,B=u.useCallback(h=>{g&&J(t,h)},[t,g]),D=u.useRef(!1);u.useEffect(()=>{if(!D.current){D.current=!0;return}e?z.current?.focus({preventScroll:!0}):j?.current?.focus({preventScroll:!0})},[e,j]);const k=typeof d=="string"?d:"Side panel",N=a?n.jsx(M,{ref:P,"aria-label":v,"aria-expanded":!1,onClick:()=>r?.(!0),children:i}):null,A=n.jsxs("div",{"data-slot":"data-app-shell-right-panel-header",className:"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2",children:[p!=null&&n.jsx("span",{className:"flex shrink-0 items-center justify-center",children:p}),d!=null&&n.jsx("span",{className:"min-w-0 flex-1 truncate text-sm font-semibold text-foreground",children:d}),d==null&&n.jsx("span",{className:"flex-1"}),y,n.jsx(G.Button,{ref:z,variant:"ghost",size:"icon-sm",className:"text-muted-foreground","aria-label":"Close panel",onClick:()=>r?.(!1),children:n.jsx(E.X,{})})]}),T=n.jsx("div",{"data-slot":"data-app-shell-right-panel-content",className:"flex min-h-0 flex-1 flex-col overflow-auto",children:O});return o==="overlay"?n.jsxs(n.Fragment,{children:[n.jsx(m.Sheet,{open:e,onOpenChange:r,children:n.jsxs(m.SheetContent,{side:"right",showCloseButton:!1,"data-slot":"data-app-shell-right-panel","data-variant":"overlay",onCloseAutoFocus:h=>{h.preventDefault(),j?.current?.focus({preventScroll:!0})},style:{width:S},className:x.cn("gap-0 data-[side=right]:sm:max-w-none",w),...R,children:[n.jsx(m.SheetTitle,{className:"sr-only",children:k}),n.jsx(m.SheetDescription,{className:"sr-only",children:"Side panel overlay"}),A,T]})}),!e&&N]}):e?n.jsxs("aside",{ref:X,"data-slot":"data-app-shell-right-panel","data-variant":"docked","aria-label":k,style:{width:S},className:x.cn("relative flex h-full shrink-0 flex-col overflow-hidden border-l border-border bg-background","motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-right-4",!K&&"motion-safe:transition-[width] motion-safe:duration-200",w),onKeyDown:h=>{h.key==="Escape"&&r?.(!1)},...R,children:[l&&n.jsx(Q,{width:S,minWidth:s,maxWidth:c,onResize:F,onCommit:B,onDraggingChange:V}),A,T]}):N}exports.DataAppShellRightPanel=W;exports.DataAppShellRightPanelTrigger=M;exports.dataAppShellRightPanelTriggerVariants=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),H=require("class-variance-authority"),E=require("lucide-react"),U=require("radix-ui"),$=require("react"),G=require("../../../ui/button.cjs"),m=require("../../../ui/sheet.cjs"),x=require("../../../lib/utils.cjs");function L(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,i.get?i:{enumerable:!0,get:()=>t[r]})}}return e.default=t,Object.freeze(e)}const u=L($),Y="ts-ui.right-panel";function q(t){return`${Y}.${t}.width`}function b(t,e,r){return Math.min(r,Math.max(e,t))}function Z(t,e,r,i){if(typeof window>"u")return e;let l;try{l=Number(window.localStorage.getItem(q(t)))}catch{return e}return!Number.isFinite(l)||l<=0?e:b(l,r,i)}function J(t,e){if(!(typeof window>"u"))try{window.localStorage.setItem(q(t),String(Math.round(e)))}catch{}}const I=H.cva("inline-flex items-center justify-center border-none cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",{variants:{variant:{fab:"absolute bottom-4 right-4 z-40 rounded-full bg-primary text-primary-foreground shadow-elevation-4 hover:bg-primary/90 focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95",icon:"rounded-lg bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-foreground"},size:{default:"",lg:""}},compoundVariants:[{variant:"fab",size:"default",class:"size-10 [&_svg:not([class*='size-'])]:size-4"},{variant:"fab",size:"lg",class:"size-12 [&_svg:not([class*='size-'])]:size-5"},{variant:"icon",size:"default",class:"size-7 [&_svg:not([class*='size-'])]:size-4"},{variant:"icon",size:"lg",class:"size-8 [&_svg:not([class*='size-'])]:size-4"}],defaultVariants:{variant:"fab",size:"default"}});function M({className:t,variant:e,size:r,asChild:i=!1,children:l,...f}){const s=i?U.Slot.Root:"button";return n.jsx(s,{...i?{}:{type:"button"},"data-slot":"data-app-shell-right-panel-trigger","data-variant":e??"fab",className:x.cn(I({variant:e,size:r}),t),...f,children:i?l:l??n.jsx(E.PanelRightOpen,{})})}const T=16;function Q({width:t,minWidth:e,maxWidth:r,onResize:i,onCommit:l,onDraggingChange:f}){const s=u.useRef(null),c=u.useRef(t);c.current=t;const g=a=>{if(a.button===0){s.current={startX:a.clientX,startWidth:c.current,liveWidth:c.current};try{a.currentTarget.setPointerCapture(a.pointerId)}catch{}f(!0)}},d=a=>{if(!s.current)return;const o=s.current.startX-a.clientX,v=b(s.current.startWidth+o,e,r);s.current.liveWidth=v,i(v)},p=a=>{if(!s.current)return;const o=s.current.liveWidth;s.current=null,a.currentTarget.hasPointerCapture(a.pointerId)&&a.currentTarget.releasePointerCapture(a.pointerId),f(!1),l(o)},y=a=>{let o=null;switch(a.key){case"ArrowLeft":o=b(c.current+T,e,r);break;case"ArrowRight":o=b(c.current-T,e,r);break;case"Home":o=e;break;case"End":o=r;break}o!=null&&(a.preventDefault(),i(o),l(o))};return n.jsx("div",{"data-slot":"data-app-shell-right-panel-drag-handle",role:"separator","aria-orientation":"vertical","aria-label":"Resize panel","aria-valuemin":e,"aria-valuemax":r,"aria-valuenow":Math.round(t),tabIndex:0,className:x.cn("absolute inset-y-0 left-0 z-10 w-px cursor-col-resize touch-none select-none bg-transparent transition-colors","after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2","hover:bg-border active:bg-border focus-visible:outline-none focus-visible:bg-ring","flex items-center justify-center","[&>div]:opacity-0 hover:[&>div]:opacity-100 active:[&>div]:opacity-100 focus-visible:[&>div]:opacity-100"),onPointerDown:g,onPointerMove:d,onPointerUp:p,onPointerCancel:p,onKeyDown:y,children:n.jsx("div",{className:"z-10 h-6 w-1 shrink-0 rounded-lg bg-muted-foreground/40 transition-opacity"})})}function W({id:t,open:e,onOpenChange:r,variant:i="docked",resizable:l=!0,defaultWidth:f=320,minWidth:s=240,maxWidth:c=560,persist:g=!0,title:d,icon:p,headerActions:y,showTrigger:a=!0,triggerIcon:o,triggerLabel:v="Open panel",triggerRef:C,children:O,className:w,ref:X,...R}){const[S,F]=u.useState(()=>g?Z(t,f,s,c):b(f,s,c)),[K,V]=u.useState(!1),z=u.useRef(null),P=u.useRef(null),j=a?P:C,B=u.useCallback(h=>{g&&J(t,h)},[t,g]),D=u.useRef(!1);u.useEffect(()=>{if(!D.current){D.current=!0;return}e?z.current?.focus({preventScroll:!0}):j?.current?.focus({preventScroll:!0})},[e,j]);const k=typeof d=="string"?d:"Side panel",N=a?n.jsx(M,{ref:P,"aria-label":v,"aria-expanded":!1,onClick:()=>r?.(!0),children:o}):null,A=n.jsxs("div",{"data-slot":"data-app-shell-right-panel-header",className:"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2",children:[p!=null&&n.jsx("span",{className:"flex shrink-0 items-center justify-center",children:p}),d!=null&&n.jsx("span",{className:"min-w-0 flex-1 truncate text-sm font-semibold text-foreground",children:d}),d==null&&n.jsx("span",{className:"flex-1"}),y,n.jsx(G.Button,{ref:z,variant:"ghost",size:"icon-sm",className:"text-muted-foreground","aria-label":"Close panel",onClick:()=>r?.(!1),children:n.jsx(E.X,{})})]}),_=n.jsx("div",{"data-slot":"data-app-shell-right-panel-content",className:"flex min-h-0 flex-1 flex-col overflow-auto",children:O});return i==="overlay"?n.jsxs(n.Fragment,{children:[n.jsx(m.Sheet,{open:e,onOpenChange:r,children:n.jsxs(m.SheetContent,{side:"right",showCloseButton:!1,"data-slot":"data-app-shell-right-panel","data-variant":"overlay",onCloseAutoFocus:h=>{h.preventDefault(),j?.current?.focus({preventScroll:!0})},style:{width:S},className:x.cn("gap-0 data-[side=right]:sm:max-w-none",w),...R,children:[n.jsx(m.SheetTitle,{className:"sr-only",children:k}),n.jsx(m.SheetDescription,{className:"sr-only",children:"Side panel overlay"}),A,_]})}),!e&&N]}):e?n.jsxs("aside",{ref:X,"data-slot":"data-app-shell-right-panel","data-variant":"docked","aria-label":k,style:{width:S},className:x.cn("relative flex h-full shrink-0 flex-col overflow-hidden border-l border-border bg-background","motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-right-4",!K&&"motion-safe:transition-[width] motion-safe:duration-200",w),onKeyDown:h=>{h.key==="Escape"&&r?.(!1)},...R,children:[l&&n.jsx(Q,{width:S,minWidth:s,maxWidth:c,onResize:F,onCommit:B,onDraggingChange:V}),A,_]}):N}exports.DataAppShellRightPanel=W;exports.DataAppShellRightPanelTrigger=M;exports.dataAppShellRightPanelTriggerVariants=I;
 //# sourceMappingURL=RightPanel.cjs.map

package/dist/components/composed/DataAppShell/RightPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.cjs","sources":["../../../../src/components/composed/DataAppShell/RightPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelRightOpen, X } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from \"@/components/ui/sheet\";\nimport { cn } from \"@/lib/utils\";\n\n// =============================================================================\n// Width persistence — one localStorage entry per panel `id`\n// =============================================================================\n\nconst STORAGE_PREFIX = \"ts-ui.right-panel\";\n\nfunction storageKey(id: string): string {\n  return `${STORAGE_PREFIX}.${id}.width`;\n}\n\nfunction clampWidth(width: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, width));\n}\n\nfunction readWidth(id: string, fallback: number, min: number, max: number): number {\n  if (typeof window === \"undefined\") return fallback;\n  let v: number;\n  try {\n    v = Number(window.localStorage.getItem(storageKey(id)));\n  } catch {\n    // Storage can be blocked (privacy mode, sandboxed iframe) — fall back.\n    return fallback;\n  }\n  if (!Number.isFinite(v) || v <= 0) return fallback;\n  return clampWidth(v, min, max);\n}\n\nfunction persistWidth(id: string, width: number) {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey(id), String(Math.round(width)));\n  } catch {\n    // Storage blocked or full — resizing still works, the width just isn't persisted.\n  }\n}\n\n// =============================================================================\n// Trigger — FAB over the content area, or an icon button for the top bar\n// =============================================================================\n\nconst dataAppShellRightPanelTriggerVariants = cva(\n  \"inline-flex items-center justify-center border-none cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n  {\n    variants: {\n      variant: {\n        /** Floating action button, bottom-right of the nearest `relative` container */\n        fab: \"absolute bottom-4 right-4 z-40 rounded-full bg-primary text-primary-foreground shadow-elevation-4 hover:bg-primary/90 focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95\",\n        /** Ghost icon button matching top-bar actions — place in `headerActions` */\n        icon: \"rounded-lg bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-foreground\",\n      },\n      size: {\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"fab\", size: \"default\", class: \"size-10 [&_svg:not([class*='size-'])]:size-4\" },\n      { variant: \"fab\", size: \"lg\", class: \"size-12 [&_svg:not([class*='size-'])]:size-5\" },\n      { variant: \"icon\", size: \"default\", class: \"size-7 [&_svg:not([class*='size-'])]:size-4\" },\n      { variant: \"icon\", size: \"lg\", class: \"size-8 [&_svg:not([class*='size-'])]:size-4\" },\n    ],\n    defaultVariants: { variant: \"fab\", size: \"default\" },\n  },\n);\n\nexport interface DataAppShellRightPanelTriggerProps\n  extends React.ComponentProps<\"button\">,\n    VariantProps<typeof dataAppShellRightPanelTriggerVariants> {\n  /** Merge the trigger styling/props onto the child element instead of\n   *  rendering a `<button>` — makes anything clickable a panel trigger. */\n  asChild?: boolean;\n}\n\n/**\n * Trigger for a `DataAppShellRightPanel`, in two variants:\n *\n * - `fab` (default) — floating action button; what the panel auto-renders\n *   while closed. Positioned `absolute` — place inside a `relative` container\n *   (normally the shell's content area).\n * - `icon` — ghost icon button sized like the shell's top-bar actions. Place\n *   it in the shell's `headerActions`, set `showTrigger={false}` on the panel,\n *   and pass the same ref to the panel's `triggerRef` so focus returns here\n *   when the panel closes.\n *\n * With `asChild` the trigger renders no element of its own and instead merges\n * onto its child — any clickable element (a link, menu item, custom button)\n * can act as the trigger.\n */\nfunction DataAppShellRightPanelTrigger({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  ...props\n}: DataAppShellRightPanelTriggerProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      // `type` only when we own the element — a slotted child may not be a button\n      {...(asChild ? {} : { type: \"button\" as const })}\n      data-slot=\"data-app-shell-right-panel-trigger\"\n      data-variant={variant ?? \"fab\"}\n      className={cn(dataAppShellRightPanelTriggerVariants({ variant, size }), className)}\n      {...props}\n    >\n      {asChild ? children : (children ?? <PanelRightOpen />)}\n    </Comp>\n  );\n}\n\n// =============================================================================\n// DragHandle — pointer + keyboard resize on the panel's left edge\n// =============================================================================\n\n/** Pixels per arrow-key press when resizing with the keyboard. */\nconst KEYBOARD_RESIZE_STEP = 16;\n\ninterface DragHandleProps {\n  width: number;\n  minWidth: number;\n  maxWidth: number;\n  /** Live width updates while dragging (not yet persisted). */\n  onResize: (width: number) => void;\n  /** Final width once the interaction ends — persist here. */\n  onCommit: (width: number) => void;\n  onDraggingChange: (dragging: boolean) => void;\n}\n\n/**\n * Vertical resize handle docked on the panel's left edge. Pointer-driven\n * (px-based, unlike the percentage-based `Resizable` group primitive) so the\n * panel keeps an absolute width that can be persisted per `id`. Also a\n * keyboard-operable ARIA separator: arrows resize, Home/End jump to min/max.\n */\nfunction DragHandle({ width, minWidth, maxWidth, onResize, onCommit, onDraggingChange }: DragHandleProps) {\n  const dragState = React.useRef<{ startX: number; startWidth: number; liveWidth: number } | null>(null);\n  const widthRef = React.useRef(width);\n  widthRef.current = width;\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    // Primary button / touch only\n    if (e.button !== 0) return;\n    dragState.current = { startX: e.clientX, startWidth: widthRef.current, liveWidth: widthRef.current };\n    try {\n      e.currentTarget.setPointerCapture(e.pointerId);\n    } catch {\n      // Synthetic pointer events (play tests) have no active pointer to\n      // capture; move/up still arrive via the handle's own listeners.\n    }\n    onDraggingChange(true);\n  };\n\n  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (!dragState.current) return;\n    // Handle sits on the left edge — dragging left grows the panel.\n    const delta = dragState.current.startX - e.clientX;\n    const next = clampWidth(dragState.current.startWidth + delta, minWidth, maxWidth);\n    dragState.current.liveWidth = next;\n    onResize(next);\n  };\n\n  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (!dragState.current) return;\n    // Commit the drag state's own width — pointermove renders lazily, so the\n    // width prop can be one frame stale when pointerup lands.\n    const finalWidth = dragState.current.liveWidth;\n    dragState.current = null;\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n      e.currentTarget.releasePointerCapture(e.pointerId);\n    }\n    onDraggingChange(false);\n    onCommit(finalWidth);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    let next: number | null = null;\n    switch (e.key) {\n      case \"ArrowLeft\": // handle moves left → panel grows\n        next = clampWidth(widthRef.current + KEYBOARD_RESIZE_STEP, minWidth, maxWidth);\n        break;\n      case \"ArrowRight\":\n        next = clampWidth(widthRef.current - KEYBOARD_RESIZE_STEP, minWidth, maxWidth);\n        break;\n      case \"Home\":\n        next = minWidth;\n        break;\n      case \"End\":\n        next = maxWidth;\n        break;\n    }\n    if (next == null) return;\n    e.preventDefault();\n    onResize(next);\n    onCommit(next);\n  };\n\n  return (\n    <div\n      data-slot=\"data-app-shell-right-panel-drag-handle\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label=\"Resize panel\"\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={Math.round(width)}\n      tabIndex={0}\n      className={cn(\n        // 1px seam over the panel's left border; wide invisible grab area via ::after\n        \"absolute inset-y-0 left-0 z-10 w-px cursor-col-resize touch-none select-none bg-transparent transition-colors\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2\",\n        // reveal on hover / drag (border color) and keyboard focus (ring color)\n        \"hover:bg-border active:bg-border focus-visible:outline-none focus-visible:bg-ring\",\n        // centered grip dots, revealed with the seam\n        \"flex items-center justify-center\",\n        \"[&>div]:opacity-0 hover:[&>div]:opacity-100 active:[&>div]:opacity-100 focus-visible:[&>div]:opacity-100\",\n      )}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onKeyDown={handleKeyDown}\n    >\n      <div className=\"z-10 h-6 w-1 shrink-0 rounded-lg bg-muted-foreground/40 transition-opacity\" />\n    </div>\n  );\n}\n\n// =============================================================================\n// DataAppShellRightPanel\n// =============================================================================\n\nexport type DataAppShellRightPanelVariant = \"docked\" | \"overlay\";\n\nexport interface DataAppShellRightPanelProps extends Omit<React.ComponentProps<\"aside\">, \"id\" | \"title\"> {\n  /** Unique panel id — keys the persisted width in localStorage. */\n  id: string;\n  /** Whether the panel is shown or collapsed to the FAB trigger. */\n  open: boolean;\n  /** Called with the next open state (close button, Esc, scrim click, FAB). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `docked` (default) — in-flow flex sibling: opening/resizing pushes main narrower.\n   * `overlay` — reuses the design-system `Sheet`: slides in over content with a scrim, no reflow.\n   */\n  variant?: DataAppShellRightPanelVariant;\n  /** Show the drag handle and allow resizing. Defaults to `true`. Docked only — the overlay has a fixed width. */\n  resizable?: boolean;\n  /** Width in px when nothing is persisted yet. */\n  defaultWidth?: number;\n  /** Minimum width in px the panel can be resized to. */\n  minWidth?: number;\n  /** Maximum width in px the panel can be resized to. */\n  maxWidth?: number;\n  /** Persist the width to localStorage. Defaults to `true`. */\n  persist?: boolean;\n  /** Header title. The header row also carries the close button. */\n  title?: React.ReactNode;\n  /** Optional element rendered before the title (e.g. an app icon). */\n  icon?: React.ReactNode;\n  /** Extra elements rendered in the header, before the close button. */\n  headerActions?: React.ReactNode;\n  /** Render the floating FAB trigger while closed. Defaults to `true`. Set\n   *  `false` when the trigger lives elsewhere (e.g. an `icon`-variant\n   *  `DataAppShellRightPanelTrigger` in the shell's `headerActions`). */\n  showTrigger?: boolean;\n  /** Icon inside the FAB trigger. Defaults to a panel-open icon. */\n  triggerIcon?: React.ReactNode;\n  /** Accessible label for the FAB trigger. */\n  triggerLabel?: string;\n  /** Ref to an external trigger (e.g. a top-bar icon trigger) that receives\n   *  focus when the panel closes and `showTrigger` is `false`. */\n  triggerRef?: React.RefObject<HTMLButtonElement | null>;\n  /** Panel content — any React node (a chat, history list, inspector, …). */\n  children?: React.ReactNode;\n}\n\n/**\n * Right-hand panel for the Data App Shell (SW-2117), in two variants:\n *\n * - `docked` (default) — rendered in normal flow as a flex sibling of the main\n *   content, so opening/resizing pushes main narrower. Width is drag-resizable\n *   and persisted per `id`.\n * - `overlay` — reuses the design-system `Sheet` (`side=\"right\"`): slides in\n *   over the content with a scrim and does not reflow main.\n *\n * In both variants a floating FAB trigger re-opens the panel while it is\n * closed, and the body is a plain slot — a chat, history list, inspector, ….\n * Pass it to the shell's `rightPanel` slot, or place it after the main content\n * inside a `relative` flex row:\n *\n * ```tsx\n * <div className=\"relative flex flex-1 min-h-0\">\n *   <main className=\"flex-1 min-w-0\">…</main>\n *   <DataAppShellRightPanel id=\"chat\" open={open} onOpenChange={setOpen} title=\"Chat\">\n *     …\n *   </DataAppShellRightPanel>\n * </div>\n * ```\n */\nfunction DataAppShellRightPanel({\n  id,\n  open,\n  onOpenChange,\n  variant = \"docked\",\n  resizable = true,\n  defaultWidth = 320,\n  minWidth = 240,\n  maxWidth = 560,\n  persist = true,\n  title,\n  icon,\n  headerActions,\n  showTrigger = true,\n  triggerIcon,\n  triggerLabel = \"Open panel\",\n  triggerRef,\n  children,\n  className,\n  ref,\n  ...props\n}: DataAppShellRightPanelProps) {\n  const [width, setWidth] = React.useState<number>(() =>\n    persist ? readWidth(id, defaultWidth, minWidth, maxWidth) : clampWidth(defaultWidth, minWidth, maxWidth),\n  );\n  const [dragging, setDragging] = React.useState(false);\n\n  const closeButtonRef = React.useRef<HTMLButtonElement>(null);\n  const fabRef = React.useRef<HTMLButtonElement>(null);\n  // Focus lands on the built-in FAB when it renders, else on the external trigger.\n  const closeFocusRef = showTrigger ? fabRef : triggerRef;\n\n  const commitWidth = React.useCallback(\n    (next: number) => {\n      if (persist) persistWidth(id, next);\n    },\n    [id, persist],\n  );\n\n  // Focus follows the open state: into the panel on open, back to the FAB on\n  // close — but only on actual transitions, not on mount.\n  const mountedRef = React.useRef(false);\n  React.useEffect(() => {\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return;\n    }\n    // preventScroll — plain .focus() scrolls the target into view, which\n    // jolts any scrollable ancestor (e.g. a Storybook docs page) on toggle.\n    if (open) closeButtonRef.current?.focus({ preventScroll: true });\n    else closeFocusRef?.current?.focus({ preventScroll: true });\n  }, [open, closeFocusRef]);\n\n  const accessibleName = typeof title === \"string\" ? title : \"Side panel\";\n\n  const fab = showTrigger ? (\n    <DataAppShellRightPanelTrigger\n      ref={fabRef}\n      aria-label={triggerLabel}\n      aria-expanded={false}\n      onClick={() => onOpenChange?.(true)}\n    >\n      {triggerIcon}\n    </DataAppShellRightPanelTrigger>\n  ) : null;\n\n  const header = (\n    <div\n      data-slot=\"data-app-shell-right-panel-header\"\n      className=\"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2\"\n    >\n      {icon != null && <span className=\"flex shrink-0 items-center justify-center\">{icon}</span>}\n      {title != null && <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-foreground\">{title}</span>}\n      {title == null && <span className=\"flex-1\" />}\n      {headerActions}\n      <Button\n        ref={closeButtonRef}\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        className=\"text-muted-foreground\"\n        aria-label=\"Close panel\"\n        onClick={() => onOpenChange?.(false)}\n      >\n        <X />\n      </Button>\n    </div>\n  );\n\n  const content = (\n    <div data-slot=\"data-app-shell-right-panel-content\" className=\"flex min-h-0 flex-1 flex-col overflow-auto\">\n      {children}\n    </div>\n  );\n\n  // Overlay — reuse the design-system Sheet: scrim, slide-in, Esc/click-out\n  // close and focus trapping all come from the primitive. No reflow of main.\n  if (variant === \"overlay\") {\n    return (\n      <>\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent\n            side=\"right\"\n            showCloseButton={false}\n            data-slot=\"data-app-shell-right-panel\"\n            data-variant=\"overlay\"\n            // The FAB remounts on close, so radix's default \"restore previous\n            // focus\" targets a dead node — send focus to the new FAB instead.\n            onCloseAutoFocus={(e) => {\n              e.preventDefault();\n              closeFocusRef?.current?.focus({ preventScroll: true });\n            }}\n            style={{ width }}\n            className={cn(\"gap-0 data-[side=right]:sm:max-w-none\", className)}\n            {...props}\n          >\n            <SheetTitle className=\"sr-only\">{accessibleName}</SheetTitle>\n            <SheetDescription className=\"sr-only\">Side panel overlay</SheetDescription>\n            {header}\n            {content}\n          </SheetContent>\n        </Sheet>\n        {!open && fab}\n      </>\n    );\n  }\n\n  if (!open) return fab;\n\n  return (\n    <aside\n      ref={ref}\n      data-slot=\"data-app-shell-right-panel\"\n      data-variant=\"docked\"\n      aria-label={accessibleName}\n      style={{ width }}\n      className={cn(\n        \"relative flex h-full shrink-0 flex-col overflow-hidden border-l border-border bg-background\",\n        \"motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-right-4\",\n        !dragging && \"motion-safe:transition-[width] motion-safe:duration-200\",\n        className,\n      )}\n      onKeyDown={(e) => {\n        if (e.key === \"Escape\") onOpenChange?.(false);\n      }}\n      {...props}\n    >\n      {resizable && (\n        <DragHandle\n          width={width}\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          onResize={setWidth}\n          onCommit={commitWidth}\n          onDraggingChange={setDragging}\n        />\n      )}\n\n      {header}\n      {content}\n    </aside>\n  );\n}\n\nexport { DataAppShellRightPanel, DataAppShellRightPanelTrigger, dataAppShellRightPanelTriggerVariants };\n"],"names":["STORAGE_PREFIX","storageKey","id","clampWidth","width","min","max","readWidth","fallback","v","persistWidth","dataAppShellRightPanelTriggerVariants","cva","DataAppShellRightPanelTrigger","className","variant","size","asChild","children","props","Comp","Slot","jsx","cn","PanelRightOpen","KEYBOARD_RESIZE_STEP","DragHandle","minWidth","maxWidth","onResize","onCommit","onDraggingChange","dragState","React","widthRef","handlePointerDown","e","handlePointerMove","delta","next","endDrag","finalWidth","handleKeyDown","DataAppShellRightPanel","open","onOpenChange","resizable","defaultWidth","persist","title","icon","headerActions","showTrigger","triggerIcon","triggerLabel","triggerRef","ref","setWidth","dragging","setDragging","closeButtonRef","fabRef","closeFocusRef","commitWidth","mountedRef","accessibleName","fab","header","jsxs","Button","X","content","Fragment","Sheet","SheetContent","SheetTitle","SheetDescription"],"mappings":"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"}
+{"version":3,"file":"RightPanel.cjs","sources":["../../../../src/components/composed/DataAppShell/RightPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { PanelRightOpen, X } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Sheet, SheetContent, SheetDescription, SheetTitle } from \"@/components/ui/sheet\";\nimport { cn } from \"@/lib/utils\";\n\n// =============================================================================\n// Width persistence — one localStorage entry per panel `id`\n// =============================================================================\n\nconst STORAGE_PREFIX = \"ts-ui.right-panel\";\n\nfunction storageKey(id: string): string {\n  return `${STORAGE_PREFIX}.${id}.width`;\n}\n\nfunction clampWidth(width: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, width));\n}\n\nfunction readWidth(id: string, fallback: number, min: number, max: number): number {\n  if (typeof window === \"undefined\") return fallback;\n  let v: number;\n  try {\n    v = Number(window.localStorage.getItem(storageKey(id)));\n  } catch {\n    // Storage can be blocked (privacy mode, sandboxed iframe) — fall back.\n    return fallback;\n  }\n  if (!Number.isFinite(v) || v <= 0) return fallback;\n  return clampWidth(v, min, max);\n}\n\nfunction persistWidth(id: string, width: number) {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey(id), String(Math.round(width)));\n  } catch {\n    // Storage blocked or full — resizing still works, the width just isn't persisted.\n  }\n}\n\n// =============================================================================\n// Trigger — FAB over the content area, or an icon button for the top bar\n// =============================================================================\n\nconst dataAppShellRightPanelTriggerVariants = cva(\n  \"inline-flex items-center justify-center border-none cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n  {\n    variants: {\n      variant: {\n        /** Floating action button, bottom-right of the nearest `relative` container */\n        fab: \"absolute bottom-4 right-4 z-40 rounded-full bg-primary text-primary-foreground shadow-elevation-4 hover:bg-primary/90 focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-safe:animate-in motion-safe:fade-in-0 motion-safe:zoom-in-95\",\n        /** Ghost icon button matching top-bar actions — place in `headerActions` */\n        icon: \"rounded-lg bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-foreground\",\n      },\n      size: {\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"fab\", size: \"default\", class: \"size-10 [&_svg:not([class*='size-'])]:size-4\" },\n      { variant: \"fab\", size: \"lg\", class: \"size-12 [&_svg:not([class*='size-'])]:size-5\" },\n      { variant: \"icon\", size: \"default\", class: \"size-7 [&_svg:not([class*='size-'])]:size-4\" },\n      { variant: \"icon\", size: \"lg\", class: \"size-8 [&_svg:not([class*='size-'])]:size-4\" },\n    ],\n    defaultVariants: { variant: \"fab\", size: \"default\" },\n  },\n);\n\nexport interface DataAppShellRightPanelTriggerProps\n  extends React.ComponentProps<\"button\">,\n    VariantProps<typeof dataAppShellRightPanelTriggerVariants> {\n  /** Merge the trigger styling/props onto the child element instead of\n   *  rendering a `<button>` — makes anything clickable a panel trigger. */\n  asChild?: boolean;\n}\n\n/**\n * Trigger for a `DataAppShellRightPanel`, in two variants:\n *\n * - `fab` (default) — floating action button; what the panel auto-renders\n *   while closed. Positioned `absolute` — place inside a `relative` container\n *   (normally the shell's content area).\n * - `icon` — ghost icon button sized like the shell's top-bar actions. Place\n *   it in the shell's `headerActions`, set `showTrigger={false}` on the panel,\n *   and pass the same ref to the panel's `triggerRef` so focus returns here\n *   when the panel closes.\n *\n * With `asChild` the trigger renders no element of its own and instead merges\n * onto its child — any clickable element (a link, menu item, custom button)\n * can act as the trigger.\n */\nfunction DataAppShellRightPanelTrigger({\n  className,\n  variant,\n  size,\n  asChild = false,\n  children,\n  ...props\n}: DataAppShellRightPanelTriggerProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      // `type` only when we own the element — a slotted child may not be a button\n      {...(asChild ? {} : { type: \"button\" as const })}\n      data-slot=\"data-app-shell-right-panel-trigger\"\n      data-variant={variant ?? \"fab\"}\n      className={cn(dataAppShellRightPanelTriggerVariants({ variant, size }), className)}\n      {...props}\n    >\n      {asChild ? children : (children ?? <PanelRightOpen />)}\n    </Comp>\n  );\n}\n\n// =============================================================================\n// DragHandle — pointer + keyboard resize on the panel's left edge\n// =============================================================================\n\n/** Pixels per arrow-key press when resizing with the keyboard. */\nconst KEYBOARD_RESIZE_STEP = 16;\n\ninterface DragHandleProps {\n  width: number;\n  minWidth: number;\n  maxWidth: number;\n  /** Live width updates while dragging (not yet persisted). */\n  onResize: (width: number) => void;\n  /** Final width once the interaction ends — persist here. */\n  onCommit: (width: number) => void;\n  onDraggingChange: (dragging: boolean) => void;\n}\n\n/**\n * Vertical resize handle docked on the panel's left edge. Pointer-driven\n * (px-based, unlike the percentage-based `Resizable` group primitive) so the\n * panel keeps an absolute width that can be persisted per `id`. Also a\n * keyboard-operable ARIA separator: arrows resize, Home/End jump to min/max.\n */\nfunction DragHandle({ width, minWidth, maxWidth, onResize, onCommit, onDraggingChange }: DragHandleProps) {\n  const dragState = React.useRef<{ startX: number; startWidth: number; liveWidth: number } | null>(null);\n  const widthRef = React.useRef(width);\n  widthRef.current = width;\n\n  const handlePointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    // Primary button / touch only\n    if (e.button !== 0) return;\n    dragState.current = { startX: e.clientX, startWidth: widthRef.current, liveWidth: widthRef.current };\n    try {\n      e.currentTarget.setPointerCapture(e.pointerId);\n    } catch {\n      // Synthetic pointer events (play tests) have no active pointer to\n      // capture; move/up still arrive via the handle's own listeners.\n    }\n    onDraggingChange(true);\n  };\n\n  const handlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (!dragState.current) return;\n    // Handle sits on the left edge — dragging left grows the panel.\n    const delta = dragState.current.startX - e.clientX;\n    const next = clampWidth(dragState.current.startWidth + delta, minWidth, maxWidth);\n    dragState.current.liveWidth = next;\n    onResize(next);\n  };\n\n  const endDrag = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (!dragState.current) return;\n    // Commit the drag state's own width — pointermove renders lazily, so the\n    // width prop can be one frame stale when pointerup lands.\n    const finalWidth = dragState.current.liveWidth;\n    dragState.current = null;\n    if (e.currentTarget.hasPointerCapture(e.pointerId)) {\n      e.currentTarget.releasePointerCapture(e.pointerId);\n    }\n    onDraggingChange(false);\n    onCommit(finalWidth);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    let next: number | null = null;\n    switch (e.key) {\n      case \"ArrowLeft\": // handle moves left → panel grows\n        next = clampWidth(widthRef.current + KEYBOARD_RESIZE_STEP, minWidth, maxWidth);\n        break;\n      case \"ArrowRight\":\n        next = clampWidth(widthRef.current - KEYBOARD_RESIZE_STEP, minWidth, maxWidth);\n        break;\n      case \"Home\":\n        next = minWidth;\n        break;\n      case \"End\":\n        next = maxWidth;\n        break;\n    }\n    if (next == null) return;\n    e.preventDefault();\n    onResize(next);\n    onCommit(next);\n  };\n\n  return (\n    <div\n      data-slot=\"data-app-shell-right-panel-drag-handle\"\n      role=\"separator\"\n      aria-orientation=\"vertical\"\n      aria-label=\"Resize panel\"\n      aria-valuemin={minWidth}\n      aria-valuemax={maxWidth}\n      aria-valuenow={Math.round(width)}\n      tabIndex={0}\n      className={cn(\n        // 1px seam over the panel's left border; wide invisible grab area via ::after\n        \"absolute inset-y-0 left-0 z-10 w-px cursor-col-resize touch-none select-none bg-transparent transition-colors\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2\",\n        // reveal on hover / drag (border color) and keyboard focus (ring color)\n        \"hover:bg-border active:bg-border focus-visible:outline-none focus-visible:bg-ring\",\n        // centered grip dots, revealed with the seam\n        \"flex items-center justify-center\",\n        \"[&>div]:opacity-0 hover:[&>div]:opacity-100 active:[&>div]:opacity-100 focus-visible:[&>div]:opacity-100\",\n      )}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={endDrag}\n      onPointerCancel={endDrag}\n      onKeyDown={handleKeyDown}\n    >\n      <div className=\"z-10 h-6 w-1 shrink-0 rounded-lg bg-muted-foreground/40 transition-opacity\" />\n    </div>\n  );\n}\n\n// =============================================================================\n// DataAppShellRightPanel\n// =============================================================================\n\nexport type DataAppShellRightPanelVariant = \"docked\" | \"overlay\";\n\nexport interface DataAppShellRightPanelProps extends Omit<React.ComponentProps<\"aside\">, \"id\" | \"title\"> {\n  /** Unique panel id — keys the persisted width in localStorage. */\n  id: string;\n  /** Whether the panel is shown or collapsed to the FAB trigger. */\n  open: boolean;\n  /** Called with the next open state (close button, Esc, scrim click, FAB). */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * `docked` (default) — in-flow flex sibling: opening/resizing pushes main narrower.\n   * `overlay` — reuses the design-system `Sheet`: slides in over content with a scrim, no reflow.\n   */\n  variant?: DataAppShellRightPanelVariant;\n  /** Show the drag handle and allow resizing. Defaults to `true`. Docked only — the overlay has a fixed width. */\n  resizable?: boolean;\n  /** Width in px when nothing is persisted yet. */\n  defaultWidth?: number;\n  /** Minimum width in px the panel can be resized to. */\n  minWidth?: number;\n  /** Maximum width in px the panel can be resized to. */\n  maxWidth?: number;\n  /** Persist the width to localStorage. Defaults to `true`. */\n  persist?: boolean;\n  /** Header title. The header row also carries the close button. */\n  title?: React.ReactNode;\n  /** Optional element rendered before the title (e.g. an app icon). */\n  icon?: React.ReactNode;\n  /** Extra elements rendered in the header, before the close button. */\n  headerActions?: React.ReactNode;\n  /** Render the floating FAB trigger while closed. Defaults to `true`. Set\n   *  `false` when the trigger lives elsewhere (e.g. an `icon`-variant\n   *  `DataAppShellRightPanelTrigger` in the shell's `headerActions`). */\n  showTrigger?: boolean;\n  /** Icon inside the FAB trigger. Defaults to a panel-open icon. */\n  triggerIcon?: React.ReactNode;\n  /** Accessible label for the FAB trigger. */\n  triggerLabel?: string;\n  /** Ref to an external trigger (e.g. a top-bar icon trigger) that receives\n   *  focus when the panel closes and `showTrigger` is `false`. */\n  triggerRef?: React.RefObject<HTMLButtonElement | null>;\n  /** Panel content — any React node (a chat, history list, inspector, …). */\n  children?: React.ReactNode;\n}\n\n/**\n * Right-hand panel for the Data App Shell (SW-2117), in two variants:\n *\n * - `docked` (default) — rendered in normal flow as a flex sibling of the main\n *   content, so opening/resizing pushes main narrower. Width is drag-resizable\n *   and persisted per `id`.\n * - `overlay` — reuses the design-system `Sheet` (`side=\"right\"`): slides in\n *   over the content with a scrim and does not reflow main.\n *\n * In both variants a floating FAB trigger re-opens the panel while it is\n * closed, and the body is a plain slot — a chat, history list, inspector, ….\n * Pass it to the shell's `rightPanel` slot, or place it after the main content\n * inside a `relative` flex row:\n *\n * ```tsx\n * <div className=\"relative flex flex-1 min-h-0\">\n *   <main className=\"flex-1 min-w-0\">…</main>\n *   <DataAppShellRightPanel id=\"chat\" open={open} onOpenChange={setOpen} title=\"Chat\">\n *     …\n *   </DataAppShellRightPanel>\n * </div>\n * ```\n */\nfunction DataAppShellRightPanel({\n  id,\n  open,\n  onOpenChange,\n  variant = \"docked\",\n  resizable = true,\n  defaultWidth = 320,\n  minWidth = 240,\n  maxWidth = 560,\n  persist = true,\n  title,\n  icon,\n  headerActions,\n  showTrigger = true,\n  triggerIcon,\n  triggerLabel = \"Open panel\",\n  triggerRef,\n  children,\n  className,\n  ref,\n  ...props\n}: DataAppShellRightPanelProps) {\n  const [width, setWidth] = React.useState<number>(() =>\n    persist ? readWidth(id, defaultWidth, minWidth, maxWidth) : clampWidth(defaultWidth, minWidth, maxWidth),\n  );\n  const [dragging, setDragging] = React.useState(false);\n\n  const closeButtonRef = React.useRef<HTMLButtonElement>(null);\n  const fabRef = React.useRef<HTMLButtonElement>(null);\n  // Focus lands on the built-in FAB when it renders, else on the external trigger.\n  const closeFocusRef = showTrigger ? fabRef : triggerRef;\n\n  const commitWidth = React.useCallback(\n    (next: number) => {\n      if (persist) persistWidth(id, next);\n    },\n    [id, persist],\n  );\n\n  // Focus follows the open state: into the panel on open, back to the FAB on\n  // close — but only on actual transitions, not on mount.\n  const mountedRef = React.useRef(false);\n  React.useEffect(() => {\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return;\n    }\n    // preventScroll — plain .focus() scrolls the target into view, which\n    // jolts any scrollable ancestor (e.g. a Storybook docs page) on toggle.\n    if (open) closeButtonRef.current?.focus({ preventScroll: true });\n    else closeFocusRef?.current?.focus({ preventScroll: true });\n  }, [open, closeFocusRef]);\n\n  const accessibleName = typeof title === \"string\" ? title : \"Side panel\";\n\n  const fab = showTrigger ? (\n    <DataAppShellRightPanelTrigger\n      ref={fabRef}\n      aria-label={triggerLabel}\n      aria-expanded={false}\n      onClick={() => onOpenChange?.(true)}\n    >\n      {triggerIcon}\n    </DataAppShellRightPanelTrigger>\n  ) : null;\n\n  const header = (\n    <div\n      data-slot=\"data-app-shell-right-panel-header\"\n      className=\"flex shrink-0 items-center gap-2 border-b border-border px-3 py-2\"\n    >\n      {icon != null && <span className=\"flex shrink-0 items-center justify-center\">{icon}</span>}\n      {title != null && <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-foreground\">{title}</span>}\n      {title == null && <span className=\"flex-1\" />}\n      {headerActions}\n      <Button\n        ref={closeButtonRef}\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        className=\"text-muted-foreground\"\n        aria-label=\"Close panel\"\n        onClick={() => onOpenChange?.(false)}\n      >\n        <X />\n      </Button>\n    </div>\n  );\n\n  const content = (\n    <div data-slot=\"data-app-shell-right-panel-content\" className=\"flex min-h-0 flex-1 flex-col overflow-auto\">\n      {children}\n    </div>\n  );\n\n  // Overlay — reuse the design-system Sheet: scrim, slide-in, Esc/click-out\n  // close and focus trapping all come from the primitive. No reflow of main.\n  if (variant === \"overlay\") {\n    return (\n      <>\n        <Sheet open={open} onOpenChange={onOpenChange}>\n          <SheetContent\n            side=\"right\"\n            showCloseButton={false}\n            data-slot=\"data-app-shell-right-panel\"\n            data-variant=\"overlay\"\n            // The FAB remounts on close, so radix's default \"restore previous\n            // focus\" targets a dead node — send focus to the new FAB instead.\n            onCloseAutoFocus={(e) => {\n              e.preventDefault();\n              closeFocusRef?.current?.focus({ preventScroll: true });\n            }}\n            style={{ width }}\n            className={cn(\"gap-0 data-[side=right]:sm:max-w-none\", className)}\n            {...props}\n          >\n            <SheetTitle className=\"sr-only\">{accessibleName}</SheetTitle>\n            <SheetDescription className=\"sr-only\">Side panel overlay</SheetDescription>\n            {header}\n            {content}\n          </SheetContent>\n        </Sheet>\n        {!open && fab}\n      </>\n    );\n  }\n\n  if (!open) return fab;\n\n  return (\n    <aside\n      ref={ref}\n      data-slot=\"data-app-shell-right-panel\"\n      data-variant=\"docked\"\n      aria-label={accessibleName}\n      style={{ width }}\n      className={cn(\n        \"relative flex h-full shrink-0 flex-col overflow-hidden border-l border-border bg-background\",\n        \"motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-right-4\",\n        !dragging && \"motion-safe:transition-[width] motion-safe:duration-200\",\n        className,\n      )}\n      onKeyDown={(e) => {\n        if (e.key === \"Escape\") onOpenChange?.(false);\n      }}\n      {...props}\n    >\n      {resizable && (\n        <DragHandle\n          width={width}\n          minWidth={minWidth}\n          maxWidth={maxWidth}\n          onResize={setWidth}\n          onCommit={commitWidth}\n          onDraggingChange={setDragging}\n        />\n      )}\n\n      {header}\n      {content}\n    </aside>\n  );\n}\n\nexport { DataAppShellRightPanel, DataAppShellRightPanelTrigger, dataAppShellRightPanelTriggerVariants };\n"],"names":["STORAGE_PREFIX","storageKey","id","clampWidth","width","min","max","readWidth","fallback","v","persistWidth","dataAppShellRightPanelTriggerVariants","cva","DataAppShellRightPanelTrigger","className","variant","size","asChild","children","props","Comp","Slot","jsx","cn","PanelRightOpen","KEYBOARD_RESIZE_STEP","DragHandle","minWidth","maxWidth","onResize","onCommit","onDraggingChange","dragState","React","widthRef","handlePointerDown","e","handlePointerMove","delta","next","endDrag","finalWidth","handleKeyDown","DataAppShellRightPanel","open","onOpenChange","resizable","defaultWidth","persist","title","icon","headerActions","showTrigger","triggerIcon","triggerLabel","triggerRef","ref","setWidth","dragging","setDragging","closeButtonRef","fabRef","closeFocusRef","commitWidth","mountedRef","accessibleName","fab","header","jsxs","Button","X","content","Fragment","Sheet","SheetContent","SheetTitle","SheetDescription"],"mappings":"mmBAeMA,EAAiB,oBAEvB,SAASC,EAAWC,EAAoB,CACtC,MAAO,GAAGF,CAAc,IAAIE,CAAE,QAChC,CAEA,SAASC,EAAWC,EAAeC,EAAaC,EAAqB,CACnE,OAAO,KAAK,IAAIA,EAAK,KAAK,IAAID,EAAKD,CAAK,CAAC,CAC3C,CAEA,SAASG,EAAUL,EAAYM,EAAkBH,EAAaC,EAAqB,CACjF,GAAI,OAAO,OAAW,IAAa,OAAOE,EAC1C,IAAIC,EACJ,GAAI,CACFA,EAAI,OAAO,OAAO,aAAa,QAAQR,EAAWC,CAAE,CAAC,CAAC,CACxD,MAAQ,CAEN,OAAOM,CACT,CACA,MAAI,CAAC,OAAO,SAASC,CAAC,GAAKA,GAAK,EAAUD,EACnCL,EAAWM,EAAGJ,EAAKC,CAAG,CAC/B,CAEA,SAASI,EAAaR,EAAYE,EAAe,CAC/C,GAAI,SAAO,OAAW,KACtB,GAAI,CACF,OAAO,aAAa,QAAQH,EAAWC,CAAE,EAAG,OAAO,KAAK,MAAME,CAAK,CAAC,CAAC,CACvE,MAAQ,CAER,CACF,CAMA,MAAMO,EAAwCC,EAAAA,IAC5C,+JACA,CACE,SAAU,CACR,QAAS,CAEP,IAAK,6PAEL,KAAM,oJAAA,EAER,KAAM,CACJ,QAAS,GACT,GAAI,EAAA,CACN,EAEF,iBAAkB,CAChB,CAAE,QAAS,MAAO,KAAM,UAAW,MAAO,8CAAA,EAC1C,CAAE,QAAS,MAAO,KAAM,KAAM,MAAO,8CAAA,EACrC,CAAE,QAAS,OAAQ,KAAM,UAAW,MAAO,6CAAA,EAC3C,CAAE,QAAS,OAAQ,KAAM,KAAM,MAAO,6CAAA,CAA8C,EAEtF,gBAAiB,CAAE,QAAS,MAAO,KAAM,SAAA,CAAU,CAEvD,EAyBA,SAASC,EAA8B,CACrC,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,GAAGC,CACL,EAAuC,CACrC,MAAMC,EAAOH,EAAUI,EAAAA,KAAK,KAAO,SACnC,OACEC,EAAAA,IAACF,EAAA,CAEE,GAAIH,EAAU,CAAA,EAAK,CAAE,KAAM,QAAA,EAC5B,YAAU,qCACV,eAAcF,GAAW,MACzB,UAAWQ,EAAAA,GAAGZ,EAAsC,CAAE,QAAAI,EAAS,KAAAC,CAAA,CAAM,EAAGF,CAAS,EAChF,GAAGK,EAEH,SAAAF,EAAUC,EAAYA,GAAYI,EAAAA,IAACE,EAAAA,eAAA,CAAA,CAAe,CAAA,CAAA,CAGzD,CAOA,MAAMC,EAAuB,GAmB7B,SAASC,EAAW,CAAE,MAAAtB,EAAO,SAAAuB,EAAU,SAAAC,EAAU,SAAAC,EAAU,SAAAC,EAAU,iBAAAC,GAAqC,CACxG,MAAMC,EAAYC,EAAM,OAAyE,IAAI,EAC/FC,EAAWD,EAAM,OAAO7B,CAAK,EACnC8B,EAAS,QAAU9B,EAEnB,MAAM+B,EAAqBC,GAA0C,CAEnE,GAAIA,EAAE,SAAW,EACjB,CAAAJ,EAAU,QAAU,CAAE,OAAQI,EAAE,QAAS,WAAYF,EAAS,QAAS,UAAWA,EAAS,OAAA,EAC3F,GAAI,CACFE,EAAE,cAAc,kBAAkBA,EAAE,SAAS,CAC/C,MAAQ,CAGR,CACAL,EAAiB,EAAI,EACvB,EAEMM,EAAqBD,GAA0C,CACnE,GAAI,CAACJ,EAAU,QAAS,OAExB,MAAMM,EAAQN,EAAU,QAAQ,OAASI,EAAE,QACrCG,EAAOpC,EAAW6B,EAAU,QAAQ,WAAaM,EAAOX,EAAUC,CAAQ,EAChFI,EAAU,QAAQ,UAAYO,EAC9BV,EAASU,CAAI,CACf,EAEMC,EAAWJ,GAA0C,CACzD,GAAI,CAACJ,EAAU,QAAS,OAGxB,MAAMS,EAAaT,EAAU,QAAQ,UACrCA,EAAU,QAAU,KAChBI,EAAE,cAAc,kBAAkBA,EAAE,SAAS,GAC/CA,EAAE,cAAc,sBAAsBA,EAAE,SAAS,EAEnDL,EAAiB,EAAK,EACtBD,EAASW,CAAU,CACrB,EAEMC,EAAiBN,GAA2C,CAChE,IAAIG,EAAsB,KAC1B,OAAQH,EAAE,IAAA,CACR,IAAK,YACHG,EAAOpC,EAAW+B,EAAS,QAAUT,EAAsBE,EAAUC,CAAQ,EAC7E,MACF,IAAK,aACHW,EAAOpC,EAAW+B,EAAS,QAAUT,EAAsBE,EAAUC,CAAQ,EAC7E,MACF,IAAK,OACHW,EAAOZ,EACP,MACF,IAAK,MACHY,EAAOX,EACP,KAAA,CAEAW,GAAQ,OACZH,EAAE,eAAA,EACFP,EAASU,CAAI,EACbT,EAASS,CAAI,EACf,EAEA,OACEjB,EAAAA,IAAC,MAAA,CACC,YAAU,yCACV,KAAK,YACL,mBAAiB,WACjB,aAAW,eACX,gBAAeK,EACf,gBAAeC,EACf,gBAAe,KAAK,MAAMxB,CAAK,EAC/B,SAAU,EACV,UAAWmB,EAAAA,GAET,gHACA,iFAEA,oFAEA,mCACA,0GAAA,EAEF,cAAeY,EACf,cAAeE,EACf,YAAaG,EACb,gBAAiBA,EACjB,UAAWE,EAEX,SAAApB,EAAAA,IAAC,MAAA,CAAI,UAAU,4EAAA,CAA6E,CAAA,CAAA,CAGlG,CA0EA,SAASqB,EAAuB,CAC9B,GAAAzC,EACA,KAAA0C,EACA,aAAAC,EACA,QAAA9B,EAAU,SACV,UAAA+B,EAAY,GACZ,aAAAC,EAAe,IACf,SAAApB,EAAW,IACX,SAAAC,EAAW,IACX,QAAAoB,EAAU,GACV,MAAAC,EACA,KAAAC,EACA,cAAAC,EACA,YAAAC,EAAc,GACd,YAAAC,EACA,aAAAC,EAAe,aACf,WAAAC,EACA,SAAArC,EACA,UAAAJ,EACA,IAAA0C,EACA,GAAGrC,CACL,EAAgC,CAC9B,KAAM,CAACf,EAAOqD,CAAQ,EAAIxB,EAAM,SAAiB,IAC/Ce,EAAUzC,EAAUL,EAAI6C,EAAcpB,EAAUC,CAAQ,EAAIzB,EAAW4C,EAAcpB,EAAUC,CAAQ,CAAA,EAEnG,CAAC8B,EAAUC,CAAW,EAAI1B,EAAM,SAAS,EAAK,EAE9C2B,EAAiB3B,EAAM,OAA0B,IAAI,EACrD4B,EAAS5B,EAAM,OAA0B,IAAI,EAE7C6B,EAAgBV,EAAcS,EAASN,EAEvCQ,EAAc9B,EAAM,YACvBM,GAAiB,CACZS,GAAStC,EAAaR,EAAIqC,CAAI,CACpC,EACA,CAACrC,EAAI8C,CAAO,CAAA,EAKRgB,EAAa/B,EAAM,OAAO,EAAK,EACrCA,EAAM,UAAU,IAAM,CACpB,GAAI,CAAC+B,EAAW,QAAS,CACvBA,EAAW,QAAU,GACrB,MACF,CAGIpB,EAAMgB,EAAe,SAAS,MAAM,CAAE,cAAe,GAAM,KAC3C,SAAS,MAAM,CAAE,cAAe,GAAM,CAC5D,EAAG,CAAChB,EAAMkB,CAAa,CAAC,EAExB,MAAMG,EAAiB,OAAOhB,GAAU,SAAWA,EAAQ,aAErDiB,EAAMd,EACV9B,EAAAA,IAACT,EAAA,CACC,IAAKgD,EACL,aAAYP,EACZ,gBAAe,GACf,QAAS,IAAMT,IAAe,EAAI,EAEjC,SAAAQ,CAAA,CAAA,EAED,KAEEc,EACJC,EAAAA,KAAC,MAAA,CACC,YAAU,oCACV,UAAU,oEAET,SAAA,CAAAlB,GAAQ,MAAQ5B,EAAAA,IAAC,OAAA,CAAK,UAAU,4CAA6C,SAAA4B,EAAK,EAClFD,GAAS,MAAQ3B,EAAAA,IAAC,OAAA,CAAK,UAAU,gEAAiE,SAAA2B,EAAM,EACxGA,GAAS,MAAQ3B,EAAAA,IAAC,OAAA,CAAK,UAAU,SAAS,EAC1C6B,EACD7B,EAAAA,IAAC+C,EAAAA,OAAA,CACC,IAAKT,EACL,QAAQ,QACR,KAAK,UACL,UAAU,wBACV,aAAW,cACX,QAAS,IAAMf,IAAe,EAAK,EAEnC,eAACyB,EAAAA,EAAA,CAAA,CAAE,CAAA,CAAA,CACL,CAAA,CAAA,EAIEC,EACJjD,MAAC,MAAA,CAAI,YAAU,qCAAqC,UAAU,6CAC3D,SAAAJ,EACH,EAKF,OAAIH,IAAY,UAEZqD,EAAAA,KAAAI,WAAA,CACE,SAAA,CAAAlD,EAAAA,IAACmD,EAAAA,MAAA,CAAM,KAAA7B,EAAY,aAAAC,EACjB,SAAAuB,EAAAA,KAACM,EAAAA,aAAA,CACC,KAAK,QACL,gBAAiB,GACjB,YAAU,6BACV,eAAa,UAGb,iBAAmBtC,GAAM,CACvBA,EAAE,eAAA,EACF0B,GAAe,SAAS,MAAM,CAAE,cAAe,GAAM,CACvD,EACA,MAAO,CAAE,MAAA1D,CAAA,EACT,UAAWmB,EAAAA,GAAG,wCAAyCT,CAAS,EAC/D,GAAGK,EAEJ,SAAA,CAAAG,EAAAA,IAACqD,EAAAA,WAAA,CAAW,UAAU,UAAW,SAAAV,EAAe,EAChD3C,EAAAA,IAACsD,EAAAA,iBAAA,CAAiB,UAAU,UAAU,SAAA,qBAAkB,EACvDT,EACAI,CAAA,CAAA,CAAA,EAEL,EACC,CAAC3B,GAAQsB,CAAA,EACZ,EAICtB,EAGHwB,EAAAA,KAAC,QAAA,CACC,IAAAZ,EACA,YAAU,6BACV,eAAa,SACb,aAAYS,EACZ,MAAO,CAAE,MAAA7D,CAAA,EACT,UAAWmB,EAAAA,GACT,8FACA,iFACA,CAACmC,GAAY,0DACb5C,CAAA,EAEF,UAAYsB,GAAM,CACZA,EAAE,MAAQ,UAAUS,IAAe,EAAK,CAC9C,EACC,GAAG1B,EAEH,SAAA,CAAA2B,GACCxB,EAAAA,IAACI,EAAA,CACC,MAAAtB,EACA,SAAAuB,EACA,SAAAC,EACA,SAAU6B,EACV,SAAUM,EACV,iBAAkBJ,CAAA,CAAA,EAIrBQ,EACAI,CAAA,CAAA,CAAA,EAhCaL,CAmCpB"}

package/dist/components/composed/DataAppShell/RightPanel.d.ts

@@ -0,0 +1,95 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const dataAppShellRightPanelTriggerVariants: (props?: ({
+    variant?: "icon" | "fab" | null | undefined;
+    size?: "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DataAppShellRightPanelTriggerProps extends React.ComponentProps<"button">, VariantProps<typeof dataAppShellRightPanelTriggerVariants> {
+    /** Merge the trigger styling/props onto the child element instead of
+     *  rendering a `<button>` — makes anything clickable a panel trigger. */
+    asChild?: boolean;
+}
+/**
+ * Trigger for a `DataAppShellRightPanel`, in two variants:
+ *
+ * - `fab` (default) — floating action button; what the panel auto-renders
+ *   while closed. Positioned `absolute` — place inside a `relative` container
+ *   (normally the shell's content area).
+ * - `icon` — ghost icon button sized like the shell's top-bar actions. Place
+ *   it in the shell's `headerActions`, set `showTrigger={false}` on the panel,
+ *   and pass the same ref to the panel's `triggerRef` so focus returns here
+ *   when the panel closes.
+ *
+ * With `asChild` the trigger renders no element of its own and instead merges
+ * onto its child — any clickable element (a link, menu item, custom button)
+ * can act as the trigger.
+ */
+declare function DataAppShellRightPanelTrigger({ className, variant, size, asChild, children, ...props }: DataAppShellRightPanelTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type DataAppShellRightPanelVariant = "docked" | "overlay";
+export interface DataAppShellRightPanelProps extends Omit<React.ComponentProps<"aside">, "id" | "title"> {
+    /** Unique panel id — keys the persisted width in localStorage. */
+    id: string;
+    /** Whether the panel is shown or collapsed to the FAB trigger. */
+    open: boolean;
+    /** Called with the next open state (close button, Esc, scrim click, FAB). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * `docked` (default) — in-flow flex sibling: opening/resizing pushes main narrower.
+     * `overlay` — reuses the design-system `Sheet`: slides in over content with a scrim, no reflow.
+     */
+    variant?: DataAppShellRightPanelVariant;
+    /** Show the drag handle and allow resizing. Defaults to `true`. Docked only — the overlay has a fixed width. */
+    resizable?: boolean;
+    /** Width in px when nothing is persisted yet. */
+    defaultWidth?: number;
+    /** Minimum width in px the panel can be resized to. */
+    minWidth?: number;
+    /** Maximum width in px the panel can be resized to. */
+    maxWidth?: number;
+    /** Persist the width to localStorage. Defaults to `true`. */
+    persist?: boolean;
+    /** Header title. The header row also carries the close button. */
+    title?: React.ReactNode;
+    /** Optional element rendered before the title (e.g. an app icon). */
+    icon?: React.ReactNode;
+    /** Extra elements rendered in the header, before the close button. */
+    headerActions?: React.ReactNode;
+    /** Render the floating FAB trigger while closed. Defaults to `true`. Set
+     *  `false` when the trigger lives elsewhere (e.g. an `icon`-variant
+     *  `DataAppShellRightPanelTrigger` in the shell's `headerActions`). */
+    showTrigger?: boolean;
+    /** Icon inside the FAB trigger. Defaults to a panel-open icon. */
+    triggerIcon?: React.ReactNode;
+    /** Accessible label for the FAB trigger. */
+    triggerLabel?: string;
+    /** Ref to an external trigger (e.g. a top-bar icon trigger) that receives
+     *  focus when the panel closes and `showTrigger` is `false`. */
+    triggerRef?: React.RefObject<HTMLButtonElement | null>;
+    /** Panel content — any React node (a chat, history list, inspector, …). */
+    children?: React.ReactNode;
+}
+/**
+ * Right-hand panel for the Data App Shell (SW-2117), in two variants:
+ *
+ * - `docked` (default) — rendered in normal flow as a flex sibling of the main
+ *   content, so opening/resizing pushes main narrower. Width is drag-resizable
+ *   and persisted per `id`.
+ * - `overlay` — reuses the design-system `Sheet` (`side="right"`): slides in
+ *   over the content with a scrim and does not reflow main.
+ *
+ * In both variants a floating FAB trigger re-opens the panel while it is
+ * closed, and the body is a plain slot — a chat, history list, inspector, ….
+ * Pass it to the shell's `rightPanel` slot, or place it after the main content
+ * inside a `relative` flex row:
+ *
+ * ```tsx
+ * <div className="relative flex flex-1 min-h-0">
+ *   <main className="flex-1 min-w-0">…</main>
+ *   <DataAppShellRightPanel id="chat" open={open} onOpenChange={setOpen} title="Chat">
+ *     …
+ *   </DataAppShellRightPanel>
+ * </div>
+ * ```
+ */
+declare function DataAppShellRightPanel({ id, open, onOpenChange, variant, resizable, defaultWidth, minWidth, maxWidth, persist, title, icon, headerActions, showTrigger, triggerIcon, triggerLabel, triggerRef, children, className, ref, ...props }: DataAppShellRightPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export { DataAppShellRightPanel, DataAppShellRightPanelTrigger, dataAppShellRightPanelTriggerVariants };

package/dist/components/composed/DataAppShell/RightPanel.js

@@ -3,8 +3,8 @@ import { cva as H } from "class-variance-authority";
 import { PanelRightOpen as $, X as G } from "lucide-react";
 import { Slot as L } from "radix-ui";
 import * as u from "react";
-import { Button as O } from "../../ui/button.js";
-import { Sheet as U, SheetContent as Y, SheetTitle as Z, SheetDescription as q } from "../../ui/sheet.js";
+import { Button as O } from "../../../ui/button.js";
+import { Sheet as U, SheetContent as Y, SheetTitle as Z, SheetDescription as q } from "../../../ui/sheet.js";
 import { cn as y } from "../../../lib/utils.js";
 const J = "ts-ui.right-panel";
 function T(t) {