@tetrascience-npm/tetrascience-react-ui 0.7.0 → 1.0.0

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

@@ -0,0 +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 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

@@ -0,0 +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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"}

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

@@ -0,0 +1,282 @@
+import { jsxs as b, Fragment as V, jsx as a } from "react/jsx-runtime";
+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 { cn as y } from "../../../lib/utils.js";
+const J = "ts-ui.right-panel";
+function T(t) {
+  return `${J}.${t}.width`;
+}
+function m(t, e, n) {
+  return Math.min(n, Math.max(e, t));
+}
+function Q(t, e, n, l) {
+  if (typeof window > "u") return e;
+  let s;
+  try {
+    s = Number(window.localStorage.getItem(T(t)));
+  } catch {
+    return e;
+  }
+  return !Number.isFinite(s) || s <= 0 ? e : m(s, n, l);
+}
+function W(t, e) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(T(t), String(Math.round(e)));
+    } catch {
+    }
+}
+const ee = H(
+  "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: {
+        /** Floating action button, bottom-right of the nearest `relative` container */
+        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",
+        /** Ghost icon button matching top-bar actions — place in `headerActions` */
+        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 te({
+  className: t,
+  variant: e,
+  size: n,
+  asChild: l = !1,
+  children: s,
+  ...f
+}) {
+  const o = l ? L.Root : "button";
+  return /* @__PURE__ */ a(
+    o,
+    {
+      ...l ? {} : { type: "button" },
+      "data-slot": "data-app-shell-right-panel-trigger",
+      "data-variant": e ?? "fab",
+      className: y(ee({ variant: e, size: n }), t),
+      ...f,
+      children: l ? s : s ?? /* @__PURE__ */ a($, {})
+    }
+  );
+}
+const C = 16;
+function re({ width: t, minWidth: e, maxWidth: n, onResize: l, onCommit: s, onDraggingChange: f }) {
+  const o = u.useRef(null), c = u.useRef(t);
+  c.current = t;
+  const g = (r) => {
+    if (r.button === 0) {
+      o.current = { startX: r.clientX, startWidth: c.current, liveWidth: c.current };
+      try {
+        r.currentTarget.setPointerCapture(r.pointerId);
+      } catch {
+      }
+      f(!0);
+    }
+  }, d = (r) => {
+    if (!o.current) return;
+    const i = o.current.startX - r.clientX, v = m(o.current.startWidth + i, e, n);
+    o.current.liveWidth = v, l(v);
+  }, p = (r) => {
+    if (!o.current) return;
+    const i = o.current.liveWidth;
+    o.current = null, r.currentTarget.hasPointerCapture(r.pointerId) && r.currentTarget.releasePointerCapture(r.pointerId), f(!1), s(i);
+  }, w = (r) => {
+    let i = null;
+    switch (r.key) {
+      case "ArrowLeft":
+        i = m(c.current + C, e, n);
+        break;
+      case "ArrowRight":
+        i = m(c.current - C, e, n);
+        break;
+      case "Home":
+        i = e;
+        break;
+      case "End":
+        i = n;
+        break;
+    }
+    i != null && (r.preventDefault(), l(i), s(i));
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "data-app-shell-right-panel-drag-handle",
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": "Resize panel",
+      "aria-valuemin": e,
+      "aria-valuemax": n,
+      "aria-valuenow": Math.round(t),
+      tabIndex: 0,
+      className: y(
+        // 1px seam over the panel's left border; wide invisible grab area via ::after
+        "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",
+        // reveal on hover / drag (border color) and keyboard focus (ring color)
+        "hover:bg-border active:bg-border focus-visible:outline-none focus-visible:bg-ring",
+        // centered grip dots, revealed with the seam
+        "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: w,
+      children: /* @__PURE__ */ a("div", { className: "z-10 h-6 w-1 shrink-0 rounded-lg bg-muted-foreground/40 transition-opacity" })
+    }
+  );
+}
+function ue({
+  id: t,
+  open: e,
+  onOpenChange: n,
+  variant: l = "docked",
+  resizable: s = !0,
+  defaultWidth: f = 320,
+  minWidth: o = 240,
+  maxWidth: c = 560,
+  persist: g = !0,
+  title: d,
+  icon: p,
+  headerActions: w,
+  showTrigger: r = !0,
+  triggerIcon: i,
+  triggerLabel: v = "Open panel",
+  triggerRef: _,
+  children: M,
+  className: R,
+  ref: X,
+  ...S
+}) {
+  const [x, j] = u.useState(
+    () => g ? Q(t, f, o, c) : m(f, o, c)
+  ), [F, K] = u.useState(!1), k = u.useRef(null), N = u.useRef(null), z = r ? N : _, B = u.useCallback(
+    (h) => {
+      g && W(t, h);
+    },
+    [t, g]
+  ), P = u.useRef(!1);
+  u.useEffect(() => {
+    if (!P.current) {
+      P.current = !0;
+      return;
+    }
+    e ? k.current?.focus({ preventScroll: !0 }) : z?.current?.focus({ preventScroll: !0 });
+  }, [e, z]);
+  const D = typeof d == "string" ? d : "Side panel", E = r ? /* @__PURE__ */ a(
+    te,
+    {
+      ref: N,
+      "aria-label": v,
+      "aria-expanded": !1,
+      onClick: () => n?.(!0),
+      children: i
+    }
+  ) : null, A = /* @__PURE__ */ b(
+    "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 && /* @__PURE__ */ a("span", { className: "flex shrink-0 items-center justify-center", children: p }),
+        d != null && /* @__PURE__ */ a("span", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-foreground", children: d }),
+        d == null && /* @__PURE__ */ a("span", { className: "flex-1" }),
+        w,
+        /* @__PURE__ */ a(
+          O,
+          {
+            ref: k,
+            variant: "ghost",
+            size: "icon-sm",
+            className: "text-muted-foreground",
+            "aria-label": "Close panel",
+            onClick: () => n?.(!1),
+            children: /* @__PURE__ */ a(G, {})
+          }
+        )
+      ]
+    }
+  ), I = /* @__PURE__ */ a("div", { "data-slot": "data-app-shell-right-panel-content", className: "flex min-h-0 flex-1 flex-col overflow-auto", children: M });
+  return l === "overlay" ? /* @__PURE__ */ b(V, { children: [
+    /* @__PURE__ */ a(U, { open: e, onOpenChange: n, children: /* @__PURE__ */ b(
+      Y,
+      {
+        side: "right",
+        showCloseButton: !1,
+        "data-slot": "data-app-shell-right-panel",
+        "data-variant": "overlay",
+        onCloseAutoFocus: (h) => {
+          h.preventDefault(), z?.current?.focus({ preventScroll: !0 });
+        },
+        style: { width: x },
+        className: y("gap-0 data-[side=right]:sm:max-w-none", R),
+        ...S,
+        children: [
+          /* @__PURE__ */ a(Z, { className: "sr-only", children: D }),
+          /* @__PURE__ */ a(q, { className: "sr-only", children: "Side panel overlay" }),
+          A,
+          I
+        ]
+      }
+    ) }),
+    !e && E
+  ] }) : e ? /* @__PURE__ */ b(
+    "aside",
+    {
+      ref: X,
+      "data-slot": "data-app-shell-right-panel",
+      "data-variant": "docked",
+      "aria-label": D,
+      style: { width: x },
+      className: y(
+        "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",
+        !F && "motion-safe:transition-[width] motion-safe:duration-200",
+        R
+      ),
+      onKeyDown: (h) => {
+        h.key === "Escape" && n?.(!1);
+      },
+      ...S,
+      children: [
+        s && /* @__PURE__ */ a(
+          re,
+          {
+            width: x,
+            minWidth: o,
+            maxWidth: c,
+            onResize: j,
+            onCommit: B,
+            onDraggingChange: K
+          }
+        ),
+        A,
+        I
+      ]
+    }
+  ) : E;
+}
+export {
+  ue as DataAppShellRightPanel,
+  te as DataAppShellRightPanelTrigger,
+  ee as dataAppShellRightPanelTriggerVariants
+};
+//# sourceMappingURL=RightPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RightPanel.js","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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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),B=require("class-variance-authority"),R=require("lucide-react"),$=require("react"),v=require("./CollapseButton.cjs"),F=require("./ShellContext.cjs"),A=require("../../../ui/badge.cjs"),c=require("../../../ui/select.cjs"),m=require("../../../ui/tooltip.cjs"),s=require("../../../lib/utils.cjs");function E(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const i=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(l,r,i.get?i:{enumerable:!0,get:()=>n[r]})}}return l.default=n,Object.freeze(l)}const C=E($),k=B.cva("shrink-0",{variants:{orientation:{vertical:"flex flex-col bg-sidebar border-r border-sidebar-border overflow-hidden",horizontal:"flex flex-row items-center min-w-0"}},defaultVariants:{orientation:"vertical"}}),g=B.cva("cursor-pointer bg-transparent transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-45 disabled:cursor-not-allowed",{variants:{orientation:{vertical:"flex items-center gap-2 py-2 px-2.5 w-full text-left whitespace-nowrap leading-tight border-l-[5px] border-r-0 border-t-0 border-b-0",rail:"flex justify-center items-center py-3.5 w-full border-l-[5px] border-r-0 border-t-0 border-b-0",horizontal:"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap border-none focus-visible:ring-inset"},status:{done:"",active:"",todo:""}},compoundVariants:[{orientation:"vertical",status:"active",class:"border-l-sidebar-primary bg-sidebar-accent font-semibold text-sidebar-foreground shadow-sm"},{orientation:"vertical",status:"done",class:"border-l-sidebar-border text-foreground hover:bg-sidebar-accent/50"},{orientation:"vertical",status:"todo",class:"border-l-sidebar-border text-muted-foreground hover:bg-sidebar-accent/50"},{orientation:"rail",status:"active",class:"border-l-primary"},{orientation:"rail",status:"done",class:"border-l-border"},{orientation:"rail",status:"todo",class:"border-l-border"},{orientation:"horizontal",status:"active",class:"bg-primary/10 text-primary font-medium"},{orientation:"horizontal",status:"done",class:"text-foreground hover:bg-accent"},{orientation:"horizontal",status:"todo",class:"text-muted-foreground hover:bg-accent hover:text-foreground"}],defaultVariants:{orientation:"vertical",status:"todo"}});function G(n){return n.flatMap(l=>[l,...l.steps??[]])}function H(n,l,r){return n.status?n.status:r<0?"todo":l===r?"active":l<r?"done":"todo"}function N({step:n,status:l,className:r}){const i=n.icon;return l==="done"?a.jsx(R.Check,{className:s.cn("w-4 h-4 text-positive",r)}):i?a.jsx(i,{className:s.cn("w-4 h-4",l==="active"?"text-primary":"text-muted-foreground",r)}):a.jsx("div",{className:s.cn("w-2.5 h-2.5 rounded-full",l==="active"?"bg-primary":"bg-muted-foreground/40",r)})}function J({orientation:n,steps:l,activeKey:r,onSelect:i,title:z,collapsible:u=!1,collapsed:j,defaultCollapsed:T=!1,onCollapsedChange:I,className:b,...h}){const y=n??"vertical",p=F.useOptionalDataAppShell(),q=j===void 0&&p!=null&&p.hideNavOnCollapse,[_,D]=C.useState(T),O=j??(q?p.collapsed:_),f=e=>{j===void 0&&(q?p.setCollapsed(e):D(e)),I?.(e)},d=G(l),S=new Map(d.map((e,t)=>[e.id,t])),M=r==null?-1:S.get(r)??-1,w=e=>H(e,S.get(e.id)??-1,M),x=e=>{e.disabled||i?.(e.id,e)};if(y==="vertical"&&O)return a.jsx("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"vertical","data-collapsed":"true",className:s.cn("flex flex-col shrink-0 w-[46px] bg-sidebar border-r border-sidebar-border",b),...h,children:a.jsxs(m.TooltipProvider,{children:[a.jsx("div",{className:"flex justify-center items-center h-11 shrink-0 border-b border-sidebar-border",children:a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"right",label:"Expand",onClick:()=>f(!1)})}),a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-col overflow-y-auto",children:d.map(e=>{const t=w(e);return a.jsxs(m.Tooltip,{children:[a.jsx(m.TooltipTrigger,{asChild:!0,children:a.jsx("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":t,"aria-label":e.label,"aria-current":t==="active"?"step":void 0,"aria-disabled":e.disabled||void 0,className:s.cn(g({orientation:"rail",status:t}),e.disabled&&"opacity-45 cursor-not-allowed"),onClick:()=>x(e),children:a.jsx(N,{step:e,status:t})})}),a.jsx(m.TooltipContent,{side:"right",children:e.disabled?e.disabledReason??e.label:e.label})]},e.id)})})]})});if(y==="horizontal"&&u&&O){const e=r==null?void 0:d.find(t=>t.id===r);return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"horizontal","data-collapsed":"true",className:s.cn("flex items-center gap-1.5 min-w-0",b),...h,children:[a.jsxs(c.Select,{value:r,onValueChange:t=>{const o=d.find(P=>P.id===t);o&&x(o)},children:[a.jsx(c.SelectTrigger,{"data-slot":"data-app-shell-secondary-nav-step-select",size:"sm","aria-label":"Current step",className:"h-7 min-w-0",children:a.jsx(c.SelectValue,{placeholder:"Select step",children:e?`Step ${(S.get(e.id)??0)+1} · ${e.label}`:"Select step"})}),a.jsx(c.SelectContent,{children:d.map((t,o)=>a.jsx(c.SelectItem,{value:t.id,disabled:t.disabled,children:`Step ${o+1} · ${t.label}`},t.id))})]}),a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"down",label:"Show steps",tooltipSide:"bottom",onClick:()=>f(!1)})]})}if(y==="horizontal")return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"horizontal","data-collapsed":"false",className:s.cn(k({orientation:"horizontal"}),b),...h,children:[a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-row items-center gap-1 min-w-0 overflow-x-auto flex-1",children:d.map((e,t)=>{const o=w(e);return a.jsxs(C.Fragment,{children:[t>0&&a.jsx(R.ChevronRight,{"aria-hidden":"true",className:"w-4 h-4 shrink-0 text-muted-foreground/50"}),a.jsxs("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":o,"aria-current":o==="active"?"step":void 0,title:e.disabled?e.disabledReason??e.label:void 0,className:s.cn(g({orientation:"horizontal",status:o})),onClick:()=>x(e),disabled:e.disabled,children:[a.jsx(N,{step:e,status:o,className:"shrink-0"}),a.jsx("span",{children:e.label}),e.badge!=null&&a.jsx(A.Badge,{variant:"secondary",className:"h-4 px-1.5 text-[10px]",children:e.badge})]})]},e.id)})}),u&&a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"up",label:"Collapse steps",tooltipSide:"bottom",className:"ml-2",onClick:()=>f(!0)})]});const V=(e,t)=>{const o=w(e);return a.jsxs("button",{type:"button","data-slot":"data-app-shell-secondary-nav-item","data-status":o,"aria-current":o==="active"?"step":void 0,title:e.disabled?e.disabledReason??e.label:void 0,className:s.cn(g({orientation:"vertical",status:o}),t&&"pl-8"),onClick:()=>x(e),disabled:e.disabled,children:[a.jsx("span",{className:"flex items-center justify-center w-6 h-6 shrink-0",children:a.jsx(N,{step:e,status:o})}),a.jsx("span",{className:s.cn("text-sm truncate min-w-0",o==="todo"&&"font-light"),children:e.label}),e.badge!=null&&a.jsx(A.Badge,{variant:"secondary",className:"ml-auto h-4 px-1.5 text-[10px]",children:e.badge})]},e.id)};return a.jsxs("nav",{"data-slot":"data-app-shell-secondary-nav","data-orientation":"vertical","data-collapsed":"false",className:s.cn(k({orientation:"vertical"}),"w-[180px]",b),...h,children:[(z!=null||u)&&a.jsxs("div",{"data-slot":"data-app-shell-secondary-nav-header",className:"flex items-center gap-1.5 h-11 px-2.5 pl-4 shrink-0 text-xs font-medium text-muted-foreground whitespace-nowrap border-b border-sidebar-border",children:[a.jsx("span",{className:"flex-1 truncate",children:z}),u&&a.jsx(v.ShellCollapseButton,{"data-slot":"data-app-shell-secondary-nav-toggle",direction:"left",label:"Collapse",onClick:()=>f(!0)})]}),a.jsx("div",{"data-slot":"data-app-shell-secondary-nav-items",className:"flex flex-col overflow-y-auto",children:l.map(e=>a.jsxs(C.Fragment,{children:[V(e,!1),e.steps?.map(t=>V(t,!0))]},e.id))})]})}exports.DataAppShellSecondaryNav=J;exports.dataAppShellSecondaryNavItemVariants=g;exports.dataAppShellSecondaryNavVariants=k;
+//# sourceMappingURL=SecondaryNav.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecondaryNav.cjs","sources":["../../../../src/components/composed/DataAppShell/SecondaryNav.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, ChevronRight, type LucideIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { ShellCollapseButton } from \"./CollapseButton\";\nimport { useOptionalDataAppShell } from \"./ShellContext\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\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 type NavStepStatus = \"done\" | \"active\" | \"todo\";\n\nexport interface NavStep {\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 */\n  badge?: React.ReactNode;\n  /** Explicit status — overrides the linear derivation from `activeKey` */\n  status?: NavStepStatus;\n  /** Disables the step */\n  disabled?: boolean;\n  /** Tooltip/title text explaining why the step is disabled */\n  disabledReason?: string;\n  /** One level of nesting — child steps rendered indented under this step */\n  steps?: NavStep[];\n}\n\nexport type DataAppShellSecondaryNavOrientation = \"vertical\" | \"horizontal\";\n\n// =============================================================================\n// CVA variants\n// =============================================================================\n\nconst dataAppShellSecondaryNavVariants = cva(\"shrink-0\", {\n  variants: {\n    orientation: {\n      /** Collapsible left panel; collapses to an icon-only rail */\n      vertical: \"flex flex-col bg-sidebar border-r border-sidebar-border overflow-hidden\",\n      /** Wizard/stepper row rendered above the main content */\n      horizontal: \"flex flex-row items-center min-w-0\",\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n});\n\nconst dataAppShellSecondaryNavItemVariants = cva(\n  \"cursor-pointer bg-transparent transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-45 disabled:cursor-not-allowed\",\n  {\n    variants: {\n      orientation: {\n        vertical:\n          \"flex items-center gap-2 py-2 px-2.5 w-full text-left whitespace-nowrap leading-tight border-l-[5px] border-r-0 border-t-0 border-b-0\",\n        /** Icon-only row in the collapsed rail */\n        rail: \"flex justify-center items-center py-3.5 w-full border-l-[5px] border-r-0 border-t-0 border-b-0\",\n        // ring-inset — the steps row is an overflow-x-auto scroll container,\n        // which would clip an outset ring at the row's edges\n        horizontal:\n          \"flex items-center gap-2 h-7 px-2.5 text-sm rounded-md whitespace-nowrap border-none focus-visible:ring-inset\",\n      },\n      status: {\n        done: \"\",\n        active: \"\",\n        todo: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        orientation: \"vertical\",\n        status: \"active\",\n        class: \"border-l-sidebar-primary bg-sidebar-accent font-semibold text-sidebar-foreground shadow-sm\",\n      },\n      {\n        orientation: \"vertical\",\n        status: \"done\",\n        class: \"border-l-sidebar-border text-foreground hover:bg-sidebar-accent/50\",\n      },\n      {\n        orientation: \"vertical\",\n        status: \"todo\",\n        class: \"border-l-sidebar-border text-muted-foreground hover:bg-sidebar-accent/50\",\n      },\n      { orientation: \"rail\", status: \"active\", class: \"border-l-primary\" },\n      { orientation: \"rail\", status: \"done\", class: \"border-l-border\" },\n      { orientation: \"rail\", status: \"todo\", class: \"border-l-border\" },\n      {\n        orientation: \"horizontal\",\n        status: \"active\",\n        class: \"bg-primary/10 text-primary font-medium\",\n      },\n      {\n        orientation: \"horizontal\",\n        status: \"done\",\n        class: \"text-foreground hover:bg-accent\",\n      },\n      {\n        orientation: \"horizontal\",\n        status: \"todo\",\n        class: \"text-muted-foreground hover:bg-accent hover:text-foreground\",\n      },\n    ],\n    defaultVariants: { orientation: \"vertical\", status: \"todo\" },\n  }\n);\n\n// =============================================================================\n// Props\n// =============================================================================\n\nexport interface DataAppShellSecondaryNavProps\n  extends Omit<React.ComponentProps<\"nav\">, \"onSelect\" | \"title\">,\n    VariantProps<typeof dataAppShellSecondaryNavVariants> {\n  /** Step entries; one level of nesting via `steps` on a step */\n  steps: NavStep[];\n  /** Controlled active step id — steps before it derive `done`, after it `todo` */\n  activeKey?: string;\n  /** Called with the selected step id after the step resolves as enabled */\n  onSelect?: (key: string, step: NavStep) => void;\n  /** Panel title shown in the vertical header (e.g. \"Steps\") */\n  title?: React.ReactNode;\n  /** Renders the collapse toggle. Vertical collapses to an icon rail;\n   *  horizontal collapses to a compact step dropdown. */\n  collapsible?: boolean;\n  /** Controlled collapsed state. When omitted inside a `DataAppShell`, the\n   *  shell's single collapse state drives it (one toggle for all zones). */\n  collapsed?: boolean;\n  /** Uncontrolled initial collapsed state */\n  defaultCollapsed?: boolean;\n  /** Called when the collapse toggle flips the state */\n  onCollapsedChange?: (collapsed: boolean) => void;\n}\n\n// =============================================================================\n// Status derivation\n// =============================================================================\n\n/** Depth-first flatten — parents immediately followed by their children. */\nfunction flattenSteps(steps: NavStep[]): NavStep[] {\n  return steps.flatMap((step) => [step, ...(step.steps ?? [])]);\n}\n\n/**\n * Explicit `status` wins; otherwise derived linearly from `activeKey`:\n * before the active step → `done`, after it (or no active step) → `todo`.\n */\nfunction resolveStatus(step: NavStep, index: number, activeIndex: number): NavStepStatus {\n  if (step.status) return step.status;\n  if (activeIndex < 0) return \"todo\";\n  if (index === activeIndex) return \"active\";\n  return index < activeIndex ? \"done\" : \"todo\";\n}\n\n// =============================================================================\n// Step icon — status-aware (done → check)\n// =============================================================================\n\nfunction StepIcon({\n  step,\n  status,\n  className,\n}: {\n  step: NavStep;\n  status: NavStepStatus;\n  className?: string;\n}) {\n  const Icon = step.icon;\n  if (status === \"done\") {\n    return <Check className={cn(\"w-4 h-4 text-positive\", className)} />;\n  }\n  if (Icon) {\n    return (\n      <Icon\n        className={cn(\n          \"w-4 h-4\",\n          status === \"active\" ? \"text-primary\" : \"text-muted-foreground\",\n          className\n        )}\n      />\n    );\n  }\n  return (\n    <div\n      className={cn(\n        \"w-2.5 h-2.5 rounded-full\",\n        status === \"active\" ? \"bg-primary\" : \"bg-muted-foreground/40\",\n        className\n      )}\n    />\n  );\n}\n\n// =============================================================================\n// DataAppShellSecondaryNav\n// =============================================================================\n\n/**\n * The Data App Shell's secondary (per-page/step) nav — one `steps` model\n * rendered on either axis via `orientation`:\n *\n * - **vertical** — collapsible left panel; collapses to an icon-only rail\n *   with tooltips and a ▸ expand toggle\n * - **horizontal** — wizard/stepper row above the main content\n *\n * Step status (`done` / `active` / `todo`) is derived linearly from\n * `activeKey`, or set explicitly per step. Supports one level of nesting.\n */\nfunction DataAppShellSecondaryNav({\n  orientation,\n  steps,\n  activeKey,\n  onSelect,\n  title,\n  collapsible = false,\n  collapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  className,\n  ...props\n}: DataAppShellSecondaryNavProps) {\n  const resolvedOrientation: DataAppShellSecondaryNavOrientation = orientation ?? \"vertical\";\n\n  // Inside a DataAppShell with `hideNavOnCollapse`, the shell's single collapse\n  // toggle drives this zone too (nav rail + secondary collapse together into\n  // one icon rail). Otherwise the zone owns its collapse — unless explicitly\n  // controlled via the `collapsed` prop, which always wins.\n  const shell = useOptionalDataAppShell();\n  const followShell = collapsed === undefined && shell != null && shell.hideNavOnCollapse;\n  const [internalCollapsed, setInternalCollapsed] = React.useState(defaultCollapsed);\n  const isCollapsed = collapsed ?? (followShell ? shell.collapsed : internalCollapsed);\n  const setCollapsed = (next: boolean) => {\n    if (collapsed === undefined) {\n      if (followShell) shell.setCollapsed(next);\n      else setInternalCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  };\n\n  const flat = flattenSteps(steps);\n  const indexById = new Map(flat.map((step, index) => [step.id, index] as const));\n  const activeIndex = activeKey == null ? -1 : (indexById.get(activeKey) ?? -1);\n  const statusOf = (step: NavStep) =>\n    resolveStatus(step, indexById.get(step.id) ?? -1, activeIndex);\n\n  const handleSelect = (step: NavStep) => {\n    if (step.disabled) return;\n    onSelect?.(step.id, step);\n  };\n\n  // ── Collapsed icon rail (vertical) ───────────────────────────────────────\n  if (resolvedOrientation === \"vertical\" && isCollapsed) {\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"vertical\"\n        data-collapsed=\"true\"\n        className={cn(\n          \"flex flex-col shrink-0 w-[46px] bg-sidebar border-r border-sidebar-border\",\n          className\n        )}\n        {...props}\n      >\n        <TooltipProvider>\n          <div className=\"flex justify-center items-center h-11 shrink-0 border-b border-sidebar-border\">\n            <ShellCollapseButton\n              data-slot=\"data-app-shell-secondary-nav-toggle\"\n              direction=\"right\"\n              label=\"Expand\"\n              onClick={() => setCollapsed(false)}\n            />\n          </div>\n          <div\n            data-slot=\"data-app-shell-secondary-nav-items\"\n            className=\"flex flex-col overflow-y-auto\"\n          >\n            {flat.map((step) => {\n              const status = statusOf(step);\n              return (\n                <Tooltip key={step.id}>\n                  <TooltipTrigger asChild>\n                    {/* aria-disabled (not disabled) — a disabled button gets no\n                        pointer/focus events, which would make the tooltip carrying\n                        the label/disabledReason unreachable in the icon-only rail */}\n                    <button\n                      type=\"button\"\n                      data-slot=\"data-app-shell-secondary-nav-item\"\n                      data-status={status}\n                      aria-label={step.label}\n                      aria-current={status === \"active\" ? \"step\" : undefined}\n                      aria-disabled={step.disabled || undefined}\n                      className={cn(\n                        dataAppShellSecondaryNavItemVariants({ orientation: \"rail\", status }),\n                        step.disabled && \"opacity-45 cursor-not-allowed\"\n                      )}\n                      onClick={() => handleSelect(step)}\n                    >\n                      <StepIcon step={step} status={status} />\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    {step.disabled ? (step.disabledReason ?? step.label) : step.label}\n                  </TooltipContent>\n                </Tooltip>\n              );\n            })}\n          </div>\n        </TooltipProvider>\n      </nav>\n    );\n  }\n\n  // ── Collapsed horizontal — compact step dropdown (place in the top bar) ───\n  if (resolvedOrientation === \"horizontal\" && collapsible && isCollapsed) {\n    const active = activeKey == null ? undefined : flat.find((s) => s.id === activeKey);\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"horizontal\"\n        data-collapsed=\"true\"\n        className={cn(\"flex items-center gap-1.5 min-w-0\", className)}\n        {...props}\n      >\n        <Select\n          value={activeKey}\n          onValueChange={(id) => {\n            const step = flat.find((s) => s.id === id);\n            if (step) handleSelect(step);\n          }}\n        >\n          <SelectTrigger\n            data-slot=\"data-app-shell-secondary-nav-step-select\"\n            size=\"sm\"\n            aria-label=\"Current step\"\n            className=\"h-7 min-w-0\"\n          >\n            <SelectValue placeholder=\"Select step\">\n              {active\n                ? `Step ${(indexById.get(active.id) ?? 0) + 1} · ${active.label}`\n                : \"Select step\"}\n            </SelectValue>\n          </SelectTrigger>\n          <SelectContent>\n            {flat.map((step, index) => (\n              <SelectItem key={step.id} value={step.id} disabled={step.disabled}>\n                {`Step ${index + 1} · ${step.label}`}\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <ShellCollapseButton\n          data-slot=\"data-app-shell-secondary-nav-toggle\"\n          direction=\"down\"\n          label=\"Show steps\"\n          tooltipSide=\"bottom\"\n          onClick={() => setCollapsed(false)}\n        />\n      </nav>\n    );\n  }\n\n  // ── Horizontal stepper ───────────────────────────────────────────────────\n  if (resolvedOrientation === \"horizontal\") {\n    return (\n      <nav\n        data-slot=\"data-app-shell-secondary-nav\"\n        data-orientation=\"horizontal\"\n        data-collapsed=\"false\"\n        className={cn(dataAppShellSecondaryNavVariants({ orientation: \"horizontal\" }), className)}\n        {...props}\n      >\n        <div\n          data-slot=\"data-app-shell-secondary-nav-items\"\n          className=\"flex flex-row items-center gap-1 min-w-0 overflow-x-auto flex-1\"\n        >\n          {flat.map((step, index) => {\n            const status = statusOf(step);\n            return (\n              <React.Fragment key={step.id}>\n                {index > 0 && (\n                  <ChevronRight aria-hidden=\"true\" className=\"w-4 h-4 shrink-0 text-muted-foreground/50\" />\n                )}\n                <button\n                  type=\"button\"\n                  data-slot=\"data-app-shell-secondary-nav-item\"\n                  data-status={status}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  title={step.disabled ? (step.disabledReason ?? step.label) : undefined}\n                  className={cn(\n                    dataAppShellSecondaryNavItemVariants({ orientation: \"horizontal\", status })\n                  )}\n                  onClick={() => handleSelect(step)}\n                  disabled={step.disabled}\n                >\n                  <StepIcon step={step} status={status} className=\"shrink-0\" />\n                  <span>{step.label}</span>\n                  {step.badge != null && (\n                    <Badge variant=\"secondary\" className=\"h-4 px-1.5 text-[10px]\">\n                      {step.badge}\n                    </Badge>\n                  )}\n                </button>\n              </React.Fragment>\n            );\n          })}\n        </div>\n        {collapsible && (\n          <ShellCollapseButton\n            data-slot=\"data-app-shell-secondary-nav-toggle\"\n            direction=\"up\"\n            label=\"Collapse steps\"\n            tooltipSide=\"bottom\"\n            className=\"ml-2\"\n            onClick={() => setCollapsed(true)}\n          />\n        )}\n      </nav>\n    );\n  }\n\n  // ── Vertical expanded panel ──────────────────────────────────────────────\n  const renderStep = (step: NavStep, nested: boolean) => {\n    const status = statusOf(step);\n    return (\n      <button\n        type=\"button\"\n        key={step.id}\n        data-slot=\"data-app-shell-secondary-nav-item\"\n        data-status={status}\n        aria-current={status === \"active\" ? \"step\" : undefined}\n        title={step.disabled ? (step.disabledReason ?? step.label) : undefined}\n        className={cn(\n          dataAppShellSecondaryNavItemVariants({ orientation: \"vertical\", status }),\n          nested && \"pl-8\"\n        )}\n        onClick={() => handleSelect(step)}\n        disabled={step.disabled}\n      >\n        <span className=\"flex items-center justify-center w-6 h-6 shrink-0\">\n          <StepIcon step={step} status={status} />\n        </span>\n        <span className={cn(\"text-sm truncate min-w-0\", status === \"todo\" && \"font-light\")}>\n          {step.label}\n        </span>\n        {step.badge != null && (\n          <Badge variant=\"secondary\" className=\"ml-auto h-4 px-1.5 text-[10px]\">\n            {step.badge}\n          </Badge>\n        )}\n      </button>\n    );\n  };\n\n  return (\n    <nav\n      data-slot=\"data-app-shell-secondary-nav\"\n      data-orientation=\"vertical\"\n      data-collapsed=\"false\"\n      className={cn(\n        dataAppShellSecondaryNavVariants({ orientation: \"vertical\" }),\n        \"w-[180px]\",\n        className\n      )}\n      {...props}\n    >\n      {(title != null || collapsible) && (\n        <div\n          data-slot=\"data-app-shell-secondary-nav-header\"\n          className=\"flex items-center gap-1.5 h-11 px-2.5 pl-4 shrink-0 text-xs font-medium text-muted-foreground whitespace-nowrap border-b border-sidebar-border\"\n        >\n          <span className=\"flex-1 truncate\">{title}</span>\n          {collapsible && (\n            <ShellCollapseButton\n              data-slot=\"data-app-shell-secondary-nav-toggle\"\n              direction=\"left\"\n              label=\"Collapse\"\n              onClick={() => setCollapsed(true)}\n            />\n          )}\n        </div>\n      )}\n      <div\n        data-slot=\"data-app-shell-secondary-nav-items\"\n        className=\"flex flex-col overflow-y-auto\"\n      >\n        {steps.map((step) => (\n          <React.Fragment key={step.id}>\n            {renderStep(step, false)}\n            {step.steps?.map((child) => renderStep(child, true))}\n          </React.Fragment>\n        ))}\n      </div>\n    </nav>\n  );\n}\n\nexport {\n  DataAppShellSecondaryNav,\n  dataAppShellSecondaryNavVariants,\n  dataAppShellSecondaryNavItemVariants,\n};\n"],"names":["dataAppShellSecondaryNavVariants","cva","dataAppShellSecondaryNavItemVariants","flattenSteps","steps","step","resolveStatus","index","activeIndex","StepIcon","status","className","Icon","Check","cn","jsx","DataAppShellSecondaryNav","orientation","activeKey","onSelect","title","collapsible","collapsed","defaultCollapsed","onCollapsedChange","props","resolvedOrientation","shell","useOptionalDataAppShell","followShell","internalCollapsed","setInternalCollapsed","React","isCollapsed","setCollapsed","next","flat","indexById","statusOf","handleSelect","TooltipProvider","ShellCollapseButton","Tooltip","TooltipTrigger","TooltipContent","active","s","jsxs","Select","id","SelectTrigger","SelectValue","SelectContent","SelectItem","ChevronRight","Badge","renderStep","nested","child"],"mappings":"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"}