@flanksource/clicky-ui 0.3.16 → 0.3.17

package/dist/layout/AppShell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.cjs","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections } from \"./AppShell.nav\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div data-slot=\"app-shell-brand\" className=\"flex min-w-0 items-center gap-2\">\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div data-slot=\"app-shell-nav\" className=\"flex shrink-0 items-center\">\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className=\"flex min-w-0 flex-1 justify-center\"\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div\n                data-slot=\"app-shell-body-sidebar\"\n                className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\"\n              >\n                {bodySidebar}\n              </div>\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            </div>\n            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={<div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">{bodySidebar}</div>}\n              right={\n                <div\n                  data-slot=\"app-shell-main\"\n                  className={cn(\"h-full min-w-0\", contentClassName)}\n                >\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={contentWidthClassName(contentWidth)}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["contentWidth","useState","useEffect","useEscapeLayer","jsx","NavSections","jsxs","cn","AppShellSlotOutlines","Icon","UiSidebar","UiMenu","contentWidthClassName","Fragment","SplitPane","UiClose"],"mappings":"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"}
+{"version":3,"file":"AppShell.cjs","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections } from \"./AppShell.nav\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div data-slot=\"app-shell-brand\" className=\"flex min-w-0 items-center gap-2\">\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div data-slot=\"app-shell-nav\" className=\"flex shrink-0 items-center\">\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className=\"flex min-w-0 flex-1 justify-center\"\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div\n                data-slot=\"app-shell-body-sidebar\"\n                className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\"\n              >\n                {bodySidebar}\n              </div>\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            </div>\n            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={<div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">{bodySidebar}</div>}\n              right={\n                <div\n                  data-slot=\"app-shell-main\"\n                  className={cn(\"h-full min-w-0\", contentClassName)}\n                >\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":["contentWidth","useState","useEffect","useEscapeLayer","jsx","NavSections","jsxs","cn","AppShellSlotOutlines","Icon","UiSidebar","UiMenu","contentWidthClassName","Fragment","SplitPane","UiClose"],"mappings":"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"}

package/dist/layout/AppShell.js

@@ -298,7 +298,7 @@ function AppShell(props) {
                     {
                       "data-slot": "app-shell-content",
                       "data-content-width": contentWidth,
-                      className: contentWidthClassName(contentWidth),
+                      className: cn(contentWidthClassName(contentWidth), "h-full"),
                       children
                     }
                   )

package/dist/layout/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections } from \"./AppShell.nav\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div data-slot=\"app-shell-brand\" className=\"flex min-w-0 items-center gap-2\">\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div data-slot=\"app-shell-nav\" className=\"flex shrink-0 items-center\">\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className=\"flex min-w-0 flex-1 justify-center\"\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div\n                data-slot=\"app-shell-body-sidebar\"\n                className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\"\n              >\n                {bodySidebar}\n              </div>\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            </div>\n            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={<div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">{bodySidebar}</div>}\n              right={\n                <div\n                  data-slot=\"app-shell-main\"\n                  className={cn(\"h-full min-w-0\", contentClassName)}\n                >\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={contentWidthClassName(contentWidth)}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.js","sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiClose, UiMenu, UiSidebar } from \"../icons\";\nimport { useEscapeLayer } from \"../overlay/modalStack\";\nimport { SplitPane } from \"./SplitPane\";\nimport { AppShellSlotOutlines } from \"./AppShell.debug\";\nimport { NavSections } from \"./AppShell.nav\";\nimport {\n  contentWidthClassName,\n  type ContentWidth,\n} from \"./content-width\";\n\n// AppShell is a sidebar-first application shell. The full-height DARK nav rail\n// owns the brand + collapse toggle and renders grouped nav sections; the top bar\n// (search, actions) sits to the RIGHT of the rail — there is no full-width top\n// bar when a rail is present. With no rail, the top bar spans full width. The\n// body carries a fixed bodyHeader + bodyActions row over an optional\n// bodySidebar | body-main split (body-main scrolls; bodySidebar — e.g. a tree —\n// scrolls independently via a resizable SplitPane).\n\nexport type AppShellNavItem = {\n  /** Stable key; also the React key. */\n  key: string;\n  /** Visible label (hidden when the rail is collapsed). */\n  label: ReactNode;\n  /** Leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Highlights the item as the current location. */\n  active?: boolean;\n  /** Routing destination; rendered as an anchor via the RouterAdapter. */\n  to: string;\n  /** Opens `to` in a new tab. */\n  external?: boolean;\n  /** Trailing adornment (count, status dot). */\n  badge?: ReactNode;\n};\n\nexport type AppShellNavSection = {\n  /** Section heading; collapses to a divider when the rail is collapsed. */\n  label?: string;\n  items: AppShellNavItem[];\n};\n\nexport type AppShellProps = {\n  // ── Top bar (right of the rail; full width when no rail) ─\n  /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */\n  brand?: ReactNode;\n  /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */\n  nav?: ReactNode;\n  /** Centered search slot; grows to fill and is width-capped. */\n  search?: ReactNode;\n  /** Right-aligned cluster (icon buttons, settings/org picker, …). */\n  actions?: ReactNode;\n  /** Compact action cluster used in the mobile header. Defaults to `actions`. */\n  mobileActions?: ReactNode;\n  /** Optional second top-bar row for filters / bulk actions. */\n  toolbar?: ReactNode;\n  /** Max width of the centered search slot. Defaults to 28rem. */\n  searchMaxWidth?: string | number;\n\n  // ── Left nav rail (dark, collapsible, fixed width) ───────\n  /** Declarative nav sections rendered into the rail (collapse-aware). */\n  navSections?: AppShellNavSection[];\n  /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */\n  sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);\n  /** Pinned below the rail header (e.g. a context switcher). */\n  sidebarHeader?: ReactNode;\n  /** Pinned to the bottom of the rail (version, account). */\n  sidebarFooter?: ReactNode;\n  /** Show the collapse toggle. Defaults to true when a rail is present. */\n  collapsible?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultCollapsed?: boolean;\n  /** localStorage key persisting the collapsed state. */\n  collapsedStorageKey?: string;\n  /** Expanded rail width in px. Defaults to 240. */\n  sidebarWidth?: number;\n  /** Collapsed rail width in px. Defaults to 56. */\n  collapsedWidth?: number;\n  /** Accessible label for the mobile navigation drawer. Defaults to \"Navigation\". */\n  mobileSidebarLabel?: string;\n\n  // ── Body ─────────────────────────────────────────────────\n  /** Fixed header row, left side (breadcrumb, title, tabs). */\n  bodyHeader?: ReactNode;\n  /** Fixed header row, right side (entity actions) — same row as bodyHeader. */\n  bodyActions?: ReactNode;\n  /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */\n  bodySidebar?: ReactNode;\n  /** bodySidebar width as a percent when present. Defaults to 24. */\n  bodySplit?: number;\n  /** Main content (body-main); fills the remaining space and scrolls. */\n  children: ReactNode;\n  /** Centers content at responsive wide breakpoints, or allows it to fill the workspace. */\n  contentWidth?: ContentWidth;\n\n  /**\n   * Outlines every slot in its own colour and labels it with its `data-slot`\n   * name — a layout-debugging aid for working out which region owns a given\n   * area or scrollbar. Uses `outline`, so enabling it does not shift layout.\n   */\n  debugSlots?: boolean;\n\n  className?: string;\n  headerClassName?: string;\n  toolbarClassName?: string;\n  sidebarClassName?: string;\n  bodyHeaderClassName?: string;\n  contentClassName?: string;\n};\n\nfunction readStored(key: string | undefined): string | null {\n  if (!key || typeof window === \"undefined\") return null;\n  return window.localStorage.getItem(key);\n}\n\nexport function AppShell(props: AppShellProps) {\n  const {\n    brand,\n    nav,\n    search,\n    actions,\n    mobileActions,\n    toolbar,\n    searchMaxWidth = \"28rem\",\n    navSections,\n    sidebar,\n    sidebarHeader,\n    sidebarFooter,\n    collapsible = true,\n    defaultCollapsed = false,\n    collapsedStorageKey,\n    sidebarWidth = 240,\n    collapsedWidth = 56,\n    mobileSidebarLabel = \"Navigation\",\n    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\n    contentWidth = \"contained\",\n    debugSlots = false,\n    className,\n    headerClassName,\n    toolbarClassName,\n    sidebarClassName,\n    bodyHeaderClassName,\n    contentClassName,\n  } = props;\n\n  const hasSidebar = sidebar !== undefined || (navSections?.length ?? 0) > 0;\n  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);\n\n  const [collapsed, setCollapsed] = useState(\n    () =>\n      readStored(collapsedStorageKey) === \"true\" ||\n      (readStored(collapsedStorageKey) === null && defaultCollapsed),\n  );\n\n  useEffect(() => {\n    if (collapsedStorageKey && typeof window !== \"undefined\")\n      window.localStorage.setItem(collapsedStorageKey, String(collapsed));\n  }, [collapsed, collapsedStorageKey]);\n\n  useEscapeLayer(mobileSidebarOpen, () => setMobileSidebarOpen(false));\n\n  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const compactActions = mobileActions ?? actions;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    mobileActions !== undefined ||\n    toolbar !== undefined;\n  const hasMobileHeader = hasSidebar;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n  const effectiveContentWidth =\n    bodySidebar === undefined ? contentWidth : \"full\";\n  const renderSidebarContent = (collapsedValue: boolean, onNavigate?: () => void) =>\n    typeof sidebar === \"function\"\n      ? sidebar(collapsedValue)\n      : sidebar !== undefined\n        ? sidebar\n        : navSections && (\n            <NavSections\n              sections={navSections}\n              collapsed={collapsedValue}\n              {...(onNavigate ? { onNavigate } : {})}\n            />\n          );\n\n  return (\n    <div\n      className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}\n      {...(debugSlots ? { \"data-debug-slots\": \"true\" } : {})}\n    >\n      {debugSlots && <AppShellSlotOutlines />}\n      {hasSidebar && (\n        <aside\n          data-slot=\"app-shell-sidebar\"\n          style={{ width: railWidth }}\n          className={cn(\n            \"hidden shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200 md:flex\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed\n                ? \"justify-center px-2\"\n                : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && (\n              <div data-slot=\"app-shell-brand\" className=\"flex min-w-0 items-center gap-2\">\n                {brand}\n              </div>\n            )}\n            {collapsible && (\n              <button\n                type=\"button\"\n                onClick={() => setCollapsed((c) => !c)}\n                aria-label={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                title={collapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <Icon icon={UiSidebar} className=\"h-4 w-4\" />\n              </button>\n            )}\n          </div>\n          {sidebarHeader && (\n            <div\n              data-slot=\"app-shell-sidebar-header\"\n              className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarHeader}\n            </div>\n          )}\n          <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n            {renderSidebarContent(collapsed)}\n          </div>\n          {sidebarFooter && (\n            <div\n              data-slot=\"app-shell-sidebar-footer\"\n              className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\"\n            >\n              {sidebarFooter}\n            </div>\n          )}\n        </aside>\n      )}\n\n      <div\n        data-slot=\"app-shell-column\"\n        className=\"@container/app-content flex min-h-0 min-w-0 flex-1 flex-col\"\n      >\n        {(hasTopBar || hasMobileHeader) && (\n          <header\n            data-slot=\"app-shell-header\"\n            className=\"shrink-0 border-b border-border bg-card\"\n          >\n            {hasMobileHeader && (\n              <div className=\"flex flex-wrap items-center gap-density-2 px-density-3 py-density-2 md:hidden\">\n                <button\n                  type=\"button\"\n                  aria-label={`Open ${mobileSidebarLabel}`}\n                  title={mobileSidebarLabel}\n                  className=\"inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground transition-colors hover:bg-accent\"\n                  onClick={() => setMobileSidebarOpen(true)}\n                >\n                  <Icon icon={UiMenu} className=\"h-4 w-4\" />\n                </button>\n                {brand && (\n                  <div className=\"flex min-w-0 flex-1 items-center gap-density-2\">\n                    {brand}\n                  </div>\n                )}\n                {compactActions && (\n                  <div className=\"ml-auto flex min-w-0 shrink items-center justify-end gap-density-2\">\n                    {compactActions}\n                  </div>\n                )}\n                {search !== undefined && (\n                  <div className=\"basis-full min-w-0\">\n                    {search}\n                  </div>\n                )}\n                {nav && (\n                  <div className=\"basis-full min-w-0 overflow-x-auto\">\n                    {nav}\n                  </div>\n                )}\n              </div>\n            )}\n            <div\n              className={cn(\n                \"hidden h-14 items-center gap-density-3 px-density-4 md:flex\",\n                !hasSidebar && \"flex\",\n                headerClassName,\n              )}\n            >\n              {!hasSidebar && brand && (\n                <div\n                  data-slot=\"app-shell-brand\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {brand}\n                </div>\n              )}\n              {nav && (\n                <div data-slot=\"app-shell-nav\" className=\"flex shrink-0 items-center\">\n                  {nav}\n                </div>\n              )}\n              {search !== undefined && (\n                <div\n                  data-slot=\"app-shell-search\"\n                  className=\"flex min-w-0 flex-1 justify-center\"\n                >\n                  <div className=\"w-full\" style={{ maxWidth: searchMaxWidth }}>\n                    {search}\n                  </div>\n                </div>\n              )}\n              {search === undefined && <div className=\"flex-1\" />}\n              {actions && (\n                <div\n                  data-slot=\"app-shell-actions\"\n                  className=\"flex shrink-0 items-center gap-density-2\"\n                >\n                  {actions}\n                </div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                data-slot=\"app-shell-toolbar\"\n                className={cn(\n                  \"flex flex-wrap items-center gap-density-2 border-t border-border bg-muted px-density-3 py-density-2 md:px-density-4\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            data-slot=\"app-shell-body-header\"\n            className={cn(\n              \"shrink-0 border-b border-border bg-card\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-body-header-content\"\n              data-content-width={effectiveContentWidth}\n              className={cn(\n                \"flex flex-col items-stretch gap-density-2 px-density-3 py-density-2 md:flex-row md:items-start md:justify-between md:gap-density-3 md:px-density-4\",\n                contentWidthClassName(effectiveContentWidth),\n              )}\n            >\n              <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n              {bodyActions && (\n                <div\n                  data-slot=\"app-shell-body-actions\"\n                  className=\"flex shrink-0 flex-wrap items-center gap-density-2\"\n                >\n                  {bodyActions}\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <>\n            <div className=\"flex min-h-0 flex-1 flex-col overflow-hidden md:hidden\">\n              <div\n                data-slot=\"app-shell-body-sidebar\"\n                className=\"max-h-[40vh] shrink-0 overflow-y-auto border-b border-border bg-background\"\n              >\n                {bodySidebar}\n              </div>\n              <main\n                data-slot=\"app-shell-main\"\n                className={cn(\n                  \"min-h-0 min-w-0 flex-1 overflow-auto\",\n                  contentClassName,\n                )}\n              >\n                {children}\n              </main>\n            </div>\n            <SplitPane\n              className=\"hidden min-h-0 flex-1 md:flex\"\n              defaultSplit={bodySplit}\n              minLeft={12}\n              minRight={30}\n              left={<div data-slot=\"app-shell-body-sidebar\" className=\"h-full\">{bodySidebar}</div>}\n              right={\n                <div\n                  data-slot=\"app-shell-main\"\n                  className={cn(\"h-full min-w-0\", contentClassName)}\n                >\n                  {children}\n                </div>\n              }\n              rightClass=\"overflow-y-auto\"\n            />\n          </>\n        ) : (\n          <main\n            data-slot=\"app-shell-main\"\n            className={cn(\n              \"min-h-0 min-w-0 flex-1 overflow-auto\",\n              contentClassName,\n            )}\n          >\n            <div\n              data-slot=\"app-shell-content\"\n              data-content-width={contentWidth}\n              className={cn(contentWidthClassName(contentWidth), \"h-full\")}\n            >\n              {children}\n            </div>\n          </main>\n        )}\n      </div>\n      {hasSidebar && mobileSidebarOpen && (\n        <div\n          className=\"fixed inset-0 z-50 md:hidden\"\n          role=\"presentation\"\n          onClick={() => setMobileSidebarOpen(false)}\n        >\n          <div className=\"absolute inset-0 bg-black/40\" />\n          <aside\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={mobileSidebarLabel}\n            className={cn(\n              \"relative z-10 flex h-full w-[min(20rem,85vw)] flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground shadow-xl\",\n              sidebarClassName,\n            )}\n            onClick={(event) => event.stopPropagation()}\n          >\n            <div className=\"flex h-14 shrink-0 items-center justify-between border-b border-sidebar-border px-density-3\">\n              {brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\n              <button\n                type=\"button\"\n                aria-label={`Close ${mobileSidebarLabel}`}\n                title=\"Close\"\n                className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                onClick={() => setMobileSidebarOpen(false)}\n              >\n                <Icon icon={UiClose} className=\"h-4 w-4\" />\n              </button>\n            </div>\n            {sidebarHeader && (\n              <div className=\"shrink-0 border-b border-sidebar-border px-density-3 py-density-2\">\n                {sidebarHeader}\n              </div>\n            )}\n            <div className=\"min-h-0 flex-1 overflow-y-auto py-density-2\">\n              {renderSidebarContent(false, () => setMobileSidebarOpen(false))}\n            </div>\n            {sidebarFooter && (\n              <div className=\"mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2\">\n                {sidebarFooter}\n              </div>\n            )}\n          </aside>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/overlay/HoverCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.cjs","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { useFloatingZIndex } from \"./modalStack\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string;\n  /** Classes applied to the floating card. */\n  cardClassName?: string;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={{\n              ...(position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }),\n              zIndex: floatingZ,\n            }}\n            className={cn(\n              \"rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["useState","useFloatingZIndex","useRef","useLayoutEffect","trigger","card","useEffect","createPortal","jsxs","cn","jsx"],"mappings":"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"}
+{"version":3,"file":"HoverCard.cjs","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { useFloatingZIndex } from \"./modalStack\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string | undefined;\n  /** Classes applied to the floating card. */\n  cardClassName?: string | undefined;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={{\n              ...(position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }),\n              zIndex: floatingZ,\n            }}\n            className={cn(\n              \"rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["useState","useFloatingZIndex","useRef","useLayoutEffect","trigger","card","useEffect","createPortal","jsxs","cn","jsx"],"mappings":"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"}

package/dist/overlay/HoverCard.d.ts

@@ -12,9 +12,9 @@ export type HoverCardProps = {
     /** Show the directional arrow. */
     arrow?: boolean;
     /** Classes applied to the trigger wrapper. */
-    className?: string;
+    className?: string | undefined;
     /** Classes applied to the floating card. */
-    cardClassName?: string;
+    cardClassName?: string | undefined;
 };
 export declare function HoverCard({ trigger, children, placement, delay, arrow, className, cardClassName, }: HoverCardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=HoverCard.d.ts.map

package/dist/overlay/HoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/overlay/HoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAC3B,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAUF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAS,EACT,KAAY,EACZ,SAAS,EACT,aAAa,GACd,EAAE,cAAc,2CAgIhB"}
+{"version":3,"file":"HoverCard.d.ts","sourceRoot":"","sources":["../../src/overlay/HoverCard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrF,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErE,MAAM,MAAM,cAAc,GAAG;IAC3B,0DAA0D;IAC1D,OAAO,EAAE,SAAS,CAAC;IACnB,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC,CAAC;AAUF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,SAAiB,EACjB,KAAS,EACT,KAAY,EACZ,SAAS,EACT,aAAa,GACd,EAAE,cAAc,2CAgIhB"}

package/dist/overlay/HoverCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverCard.js","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { useFloatingZIndex } from \"./modalStack\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string;\n  /** Classes applied to the floating card. */\n  cardClassName?: string;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={{\n              ...(position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }),\n              zIndex: floatingZ,\n            }}\n            className={cn(\n              \"rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["trigger","card"],"mappings":"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"}
+{"version":3,"file":"HoverCard.js","sources":["../../src/overlay/HoverCard.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { useFloatingZIndex } from \"./modalStack\";\n\nexport type HoverCardPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type HoverCardProps = {\n  /** Trigger content that opens the card on hover/focus. */\n  trigger: ReactNode;\n  /** Floating card content. */\n  children: ReactNode;\n  /** Preferred placement around the trigger. */\n  placement?: HoverCardPlacement;\n  /** Open delay in milliseconds. */\n  delay?: number;\n  /** Show the directional arrow. */\n  arrow?: boolean;\n  /** Classes applied to the trigger wrapper. */\n  className?: string | undefined;\n  /** Classes applied to the floating card. */\n  cardClassName?: string | undefined;\n};\n\nconst GAP_PX = 6;\n\ntype Position = { top: number; left: number };\n\n// Grace period that lets the cursor cross the gap from the trigger to the\n// portaled card without the card disappearing.\nconst HOVER_CLOSE_DELAY_MS = 120;\n\nexport function HoverCard({\n  trigger,\n  children,\n  placement = \"top\",\n  delay = 0,\n  arrow = true,\n  className,\n  cardClassName,\n}: HoverCardProps) {\n  const [open, setOpen] = useState(false);\n  const [position, setPosition] = useState<Position | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const triggerRef = useRef<HTMLSpanElement | null>(null);\n  const cardRef = useRef<HTMLDivElement | null>(null);\n  const openTimerRef = useRef<number | null>(null);\n  const closeTimerRef = useRef<number | null>(null);\n\n  const cancelClose = () => {\n    if (closeTimerRef.current !== null) {\n      window.clearTimeout(closeTimerRef.current);\n      closeTimerRef.current = null;\n    }\n  };\n\n  function onEnter() {\n    cancelClose();\n    if (delay > 0) {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = window.setTimeout(() => setOpen(true), delay);\n    } else {\n      setOpen(true);\n    }\n  }\n  function onLeave() {\n    if (openTimerRef.current !== null) {\n      window.clearTimeout(openTimerRef.current);\n      openTimerRef.current = null;\n    }\n    cancelClose();\n    closeTimerRef.current = window.setTimeout(() => setOpen(false), HOVER_CLOSE_DELAY_MS);\n  }\n\n  // Recompute position whenever the card opens or the viewport scrolls/resizes\n  // while it's open. We position via fixed coordinates so the card escapes\n  // every overflow-hidden / transform ancestor — important when the trigger\n  // sits inside a table row, dropdown, or modal that would otherwise clip it.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const update = () => {\n      const trigger = triggerRef.current;\n      const card = cardRef.current;\n      if (!trigger || !card) return;\n      const t = trigger.getBoundingClientRect();\n      const c = card.getBoundingClientRect();\n      let top = 0;\n      let left = 0;\n      switch (placement) {\n        case \"top\":\n          top = t.top - c.height - GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"bottom\":\n          top = t.bottom + GAP_PX;\n          left = t.left + t.width / 2 - c.width / 2;\n          break;\n        case \"left\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.left - c.width - GAP_PX;\n          break;\n        case \"right\":\n          top = t.top + t.height / 2 - c.height / 2;\n          left = t.right + GAP_PX;\n          break;\n      }\n      // Clamp to viewport so cards near the edge don't overflow off-screen.\n      const margin = 4;\n      left = Math.min(Math.max(margin, left), window.innerWidth - c.width - margin);\n      top = Math.min(Math.max(margin, top), window.innerHeight - c.height - margin);\n      setPosition({ top, left });\n    };\n    update();\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, placement, children]);\n\n  useEffect(() => {\n    return () => {\n      if (openTimerRef.current !== null) window.clearTimeout(openTimerRef.current);\n      if (closeTimerRef.current !== null) window.clearTimeout(closeTimerRef.current);\n    };\n  }, []);\n\n  const card =\n    open && typeof document !== \"undefined\"\n      ? createPortal(\n          <div\n            ref={cardRef}\n            role=\"tooltip\"\n            onMouseEnter={cancelClose}\n            onMouseLeave={onLeave}\n            style={{\n              ...(position\n                ? { position: \"fixed\", top: position.top, left: position.left }\n                : { position: \"fixed\", top: -9999, left: -9999, visibility: \"hidden\" }),\n              zIndex: floatingZ,\n            }}\n            className={cn(\n              \"rounded-md border border-border bg-background px-2.5 py-1.5 text-[11px] shadow-lg\",\n              \"whitespace-nowrap\",\n              cardClassName,\n            )}\n          >\n            {children}\n            {arrow && position && <Arrow placement={placement} />}\n          </div>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <span\n      ref={triggerRef}\n      className={cn(\"relative inline-flex items-center\", className)}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n      onFocus={onEnter}\n      onBlur={onLeave}\n    >\n      {trigger}\n      {card}\n    </span>\n  );\n}\n\nfunction Arrow({ placement }: { placement: HoverCardPlacement }) {\n  // The arrow is a small rotated square clipped to look like a notch on the\n  // card edge that points back at the trigger. Drawn relative to the card.\n  const base = \"absolute h-1.5 w-1.5 rotate-45 border bg-background border-border\";\n  switch (placement) {\n    case \"top\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -bottom-0.5 border-l-0 border-t-0\")}\n        />\n      );\n    case \"bottom\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"left-1/2 -translate-x-1/2 -top-0.5 border-r-0 border-b-0\")}\n        />\n      );\n    case \"left\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -right-0.5 border-l-0 border-b-0\")}\n        />\n      );\n    case \"right\":\n      return (\n        <span\n          aria-hidden\n          className={cn(base, \"top-1/2 -translate-y-1/2 -left-0.5 border-r-0 border-t-0\")}\n        />\n      );\n  }\n}\n"],"names":["trigger","card"],"mappings":"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"}

package/dist/rpc/OperationCatalog.cjs

@@ -4,8 +4,6 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const reactDom = require("react-dom");
 const reactQuery = require("@tanstack/react-query");
-const button = require("../components/button.cjs");
-const Icon = require("../data/Icon.cjs");
 const classify = require("./classify.cjs");
 const clickyMetadata = require("./clickyMetadata.cjs");
 const EndpointList = require("./EndpointList.cjs");
@@ -14,8 +12,6 @@ const OperationResultView = require("./OperationResultView.cjs");
 const filterBarUtils = require("../components/filter-bar-utils.cjs");
 const useOperations = require("./useOperations.cjs");
 const formMetadata = require("./formMetadata.cjs");
-const UiTable = require("../icons/components/UiTable.cjs");
-const UiListFlat = require("../icons/components/UiListFlat.cjs");
 const defaultCommandHref = (operationId) => `/commands/${operationId}`;
 function defaultRenderError(err, title) {
   const message = err instanceof Error ? err.message : String(err ?? "");
@@ -40,11 +36,10 @@ function OperationCatalog({
   formActions,
   actionLabels,
   resultRenderer,
-  actionsContainer,
-  viewToggleContainer
+  actionsContainer
 }) {
+  var _a, _b;
   const { operations, isLoading } = useOperations.useOperations(client);
-  const [view, setView] = react.useState("table");
   const surfaceOps = react.useMemo(
     () => clickyMetadata.filterOperationsBySurface(operations, surfaceKey),
     [operations, surfaceKey]
@@ -67,8 +62,8 @@ function OperationCatalog({
   );
   const listParameters = (listEndpoint == null ? void 0 : listEndpoint.operation.parameters) ?? [];
   const download = react.useMemo(() => {
-    var _a;
-    const meta = (_a = listEndpoint == null ? void 0 : listEndpoint.operation["x-clicky"]) == null ? void 0 : _a.export;
+    var _a2;
+    const meta = (_a2 = listEndpoint == null ? void 0 : listEndpoint.operation["x-clicky"]) == null ? void 0 : _a2.export;
     if (!meta) return void 0;
     return {
       label: definition.title,
@@ -98,7 +93,7 @@ function OperationCatalog({
         Accept: "application/json+clicky"
       }
     ),
-    enabled: !!listEndpoint && view === "table",
+    enabled: !!listEndpoint,
     placeholderData: reactQuery.keepPreviousData,
     staleTime: 3e4,
     retry: 0
@@ -111,8 +106,8 @@ function OperationCatalog({
       filters
     ],
     queryFn: async () => {
-      var _a;
-      return await ((_a = client.lookupFilters) == null ? void 0 : _a.call(
+      var _a2;
+      return await ((_a2 = client.lookupFilters) == null ? void 0 : _a2.call(
         client,
         listEndpoint.path,
         listEndpoint.method,
@@ -120,7 +115,7 @@ function OperationCatalog({
         { Accept: "application/json+clicky" }
       )) ?? { filters: {} };
     },
-    enabled: !!listEndpoint && view === "table" && !!client.lookupFilters,
+    enabled: !!listEndpoint && !!client.lookupFilters,
     staleTime: 3e4,
     retry: 0
   });
@@ -147,8 +142,22 @@ function OperationCatalog({
     ),
     [filterBarConfig.filters, filterPre]
   );
-  const hasTable = !!listEndpoint;
-  const showTable = hasTable && view === "table";
+  const showTable = !!listEndpoint;
+  let listError;
+  if (!listQuery.isFetching) {
+    if (listQuery.isError) {
+      listError = listQuery.error;
+    } else if (((_a = listQuery.data) == null ? void 0 : _a.success) === false) {
+      listError = new Error(
+        listQuery.data.error || listQuery.data.message || listQuery.data.stderr || `Command failed with exit code ${listQuery.data.exit_code}`
+      );
+    }
+  }
+  const tableError = listError !== void 0 ? renderError(
+    listError,
+    `Failed to load ${(listEndpoint == null ? void 0 : listEndpoint.path) ?? ""}`
+  ) : void 0;
+  const tableResponse = ((_b = listQuery.data) == null ? void 0 : _b.success) === false ? null : listQuery.data ?? null;
   function getActionLockedValues(op) {
     const meta = clickyMetadata.getOperationClickyMeta(op);
     if (meta == null || !meta.supportsFilterMode) {
@@ -176,34 +185,6 @@ function OperationCatalog({
       Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-12" }, i))
     ] });
   }
-  const viewToggle = hasTable ? /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "operation-catalog-view-toggle", className: "flex gap-1 rounded-lg border p-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      button.Button,
-      {
-        type: "button",
-        variant: view === "table" ? "secondary" : "ghost",
-        size: "sm",
-        className: "h-7 w-7 p-0",
-        "aria-label": "Table view",
-        "aria-pressed": view === "table",
-        onClick: () => setView("table"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiTable.UiTable })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      button.Button,
-      {
-        type: "button",
-        variant: view === "endpoints" ? "secondary" : "ghost",
-        size: "sm",
-        className: "h-7 w-7 p-0",
-        "aria-label": "Endpoint list view",
-        "aria-pressed": view === "endpoints",
-        onClick: () => setView("endpoints"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiListFlat.UiListFlat })
-      }
-    )
-  ] }) : null;
   const actionBar = /* @__PURE__ */ jsxRuntime.jsx(
     OperationActionBar.OperationActionBar,
     {
@@ -221,25 +202,20 @@ function OperationCatalog({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "flex h-full min-h-0 flex-col gap-6",
+      className: "flex h-full min-h-0 flex-col gap-2",
       "data-slot": "operation-catalog",
       children: [
-        viewToggle && !viewToggleContainer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-start justify-end gap-4", children: viewToggle }),
-        viewToggle && viewToggleContainer && reactDom.createPortal(viewToggle, viewToggleContainer),
         actionsContainer ? reactDom.createPortal(actionBar, actionsContainer) : actionBar,
         showTable ? /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "min-h-0 flex-1",
             "data-slot": "operation-catalog-results",
-            children: listQuery.isError && !listQuery.data ? renderError(
-              listQuery.error,
-              `Failed to load ${(listEndpoint == null ? void 0 : listEndpoint.path) ?? ""}`
-            ) : (() => {
+            children: (() => {
               const defaultView = /* @__PURE__ */ jsxRuntime.jsx(
                 OperationResultView.OperationResultView,
                 {
-                  response: listQuery.data ?? null,
+                  response: tableResponse,
                   loading: listQuery.isFetching,
                   loadingMessage: `Loading ${definition.title} results…`,
                   emptyMessage: "No records returned",
@@ -251,6 +227,7 @@ function OperationCatalog({
                     ...filterBarConfig.search ? { search: filterBarConfig.search } : {},
                     ...filterBarConfig.timeRange ? { timeRange: filterBarConfig.timeRange } : {}
                   },
+                  ...tableError ? { error: tableError } : {},
                   ...commandRuntime ? { commandRuntime } : {},
                   ...dataTablePagination ? { pagination: dataTablePagination } : {},
                   ...download ? { download } : {}