@flanksource/clicky-ui 0.2.18 → 0.2.19

package/dist/layout/AppShell.d.ts

@@ -0,0 +1,75 @@
+import { ReactNode } from 'react';
+import { StaticIconComponent } from '../data/Icon';
+export type AppShellNavItem = {
+    /** Stable key; also the React key. */
+    key: string;
+    /** Visible label (hidden when the rail is collapsed). */
+    label: ReactNode;
+    /** Leading icon (icon name or component). */
+    icon?: string | StaticIconComponent;
+    /** Highlights the item as the current location. */
+    active?: boolean;
+    /** Click handler (rendered as a button when no `href`). */
+    onClick?: () => void;
+    /** Destination (rendered as an anchor). */
+    href?: string;
+    /** Opens `href` in a new tab. */
+    external?: boolean;
+    /** Trailing adornment (count, status dot). */
+    badge?: ReactNode;
+};
+export type AppShellNavSection = {
+    /** Section heading; collapses to a divider when the rail is collapsed. */
+    label?: string;
+    items: AppShellNavItem[];
+};
+export type AppShellProps = {
+    /** Brand mark / wordmark. Shown in the rail header when a rail is present, else in the top bar. */
+    brand?: ReactNode;
+    /** Inline primary nav (e.g. tabs) shown after the brand in the top bar. */
+    nav?: ReactNode;
+    /** Centered search slot; grows to fill and is width-capped. */
+    search?: ReactNode;
+    /** Right-aligned cluster (icon buttons, settings/org picker, …). */
+    actions?: ReactNode;
+    /** Optional second top-bar row for filters / bulk actions. */
+    toolbar?: ReactNode;
+    /** Max width of the centered search slot. Defaults to 28rem. */
+    searchMaxWidth?: string | number;
+    /** Declarative nav sections rendered into the rail (collapse-aware). */
+    navSections?: AppShellNavSection[];
+    /** Custom sidebar content; receives the collapsed flag. Overrides navSections. */
+    sidebar?: ReactNode | ((collapsed: boolean) => ReactNode);
+    /** Pinned below the rail header (e.g. a context switcher). */
+    sidebarHeader?: ReactNode;
+    /** Pinned to the bottom of the rail (version, account). */
+    sidebarFooter?: ReactNode;
+    /** Show the collapse toggle. Defaults to true when a rail is present. */
+    collapsible?: boolean;
+    /** Initial collapsed state (uncontrolled). */
+    defaultCollapsed?: boolean;
+    /** localStorage key persisting the collapsed state. */
+    collapsedStorageKey?: string;
+    /** Expanded rail width in px. Defaults to 240. */
+    sidebarWidth?: number;
+    /** Collapsed rail width in px. Defaults to 56. */
+    collapsedWidth?: number;
+    /** Fixed header row, left side (breadcrumb, title, tabs). */
+    bodyHeader?: ReactNode;
+    /** Fixed header row, right side (entity actions) — same row as bodyHeader. */
+    bodyActions?: ReactNode;
+    /** Optional independent-scroll pane (e.g. a tree). Renders a SplitPane vs body-main. */
+    bodySidebar?: ReactNode;
+    /** bodySidebar width as a percent when present. Defaults to 24. */
+    bodySplit?: number;
+    /** Main content (body-main); fills the remaining space and scrolls. */
+    children: ReactNode;
+    className?: string;
+    headerClassName?: string;
+    toolbarClassName?: string;
+    sidebarClassName?: string;
+    bodyHeaderClassName?: string;
+    contentClassName?: string;
+};
+export declare function AppShell(props: AppShellProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AppShell.d.ts.map

package/dist/layout/AppShell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/layout/AppShell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAY9D,MAAM,MAAM,eAAe,GAAG;IAC5B,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,yDAAyD;IACzD,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAE1B,mGAAmG;IACnG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2EAA2E;IAC3E,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAGjC,wEAAwE;IACxE,WAAW,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACnC,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,SAAS,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC;IAC1D,8DAA8D;IAC9D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,yEAAyE;IACzE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wFAAwF;IACxF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,QAAQ,EAAE,SAAS,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAOF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAwK5C"}

package/dist/layout/AppShell.js

@@ -0,0 +1,182 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+import { SplitPane } from "./SplitPane.js";
+import { UiSidebar } from "../icons/components/UiSidebar.js";
+function readStored(key) {
+  if (!key || typeof window === "undefined") return null;
+  return window.localStorage.getItem(key);
+}
+function AppShell(props) {
+  const {
+    brand,
+    nav,
+    search,
+    actions,
+    toolbar,
+    searchMaxWidth = "28rem",
+    navSections,
+    sidebar,
+    sidebarHeader,
+    sidebarFooter,
+    collapsible = true,
+    defaultCollapsed = false,
+    collapsedStorageKey,
+    sidebarWidth = 240,
+    collapsedWidth = 56,
+    bodyHeader,
+    bodyActions,
+    bodySidebar,
+    bodySplit = 24,
+    children,
+    className,
+    headerClassName,
+    toolbarClassName,
+    sidebarClassName,
+    bodyHeaderClassName,
+    contentClassName
+  } = props;
+  const hasSidebar = sidebar !== void 0 || ((navSections == null ? void 0 : navSections.length) ?? 0) > 0;
+  const [collapsed, setCollapsed] = useState(
+    () => readStored(collapsedStorageKey) === "true" || readStored(collapsedStorageKey) === null && defaultCollapsed
+  );
+  useEffect(() => {
+    if (collapsedStorageKey && typeof window !== "undefined")
+      window.localStorage.setItem(collapsedStorageKey, String(collapsed));
+  }, [collapsed, collapsedStorageKey]);
+  const railWidth = collapsed ? collapsedWidth : sidebarWidth;
+  const hasTopBar = !hasSidebar && brand !== void 0 || nav !== void 0 || search !== void 0 || actions !== void 0 || toolbar !== void 0;
+  const hasBodyHeader = bodyHeader !== void 0 || bodyActions !== void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 w-full bg-background", className), children: [
+    hasSidebar && /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        style: { width: railWidth },
+        className: cn(
+          "flex shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200",
+          sidebarClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex h-14 shrink-0 items-center border-b border-sidebar-border",
+                collapsed ? "justify-center px-2" : "justify-between px-density-3"
+              ),
+              children: [
+                !collapsed && brand && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: brand }),
+                collapsible && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setCollapsed((c) => !c),
+                    "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                    title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+                    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",
+                    children: /* @__PURE__ */ jsx(Icon, { icon: UiSidebar, className: "h-4 w-4" })
+                  }
+                )
+              ]
+            }
+          ),
+          sidebarHeader && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-sidebar-border px-density-3 py-density-2", children: sidebarHeader }),
+          /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-density-2", children: typeof sidebar === "function" ? sidebar(collapsed) : sidebar !== void 0 ? sidebar : navSections && /* @__PURE__ */ jsx(NavSections, { sections: navSections, collapsed }) }),
+          sidebarFooter && /* @__PURE__ */ jsx("div", { className: "mt-auto shrink-0 border-t border-sidebar-border px-density-3 py-density-2", children: sidebarFooter })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+      hasTopBar && /* @__PURE__ */ jsxs("header", { className: "shrink-0 border-b border-border bg-card", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn("flex h-14 items-center gap-density-3 px-density-4", headerClassName),
+            children: [
+              !hasSidebar && brand && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: brand }),
+              nav && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center", children: nav }),
+              search !== void 0 && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-full", style: { maxWidth: searchMaxWidth }, children: search }) }),
+              search === void 0 && /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: actions })
+            ]
+          }
+        ),
+        toolbar && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-density-2 border-t border-border bg-muted px-density-4 py-density-2",
+              toolbarClassName
+            ),
+            children: toolbar
+          }
+        )
+      ] }),
+      hasBodyHeader && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex shrink-0 items-start justify-between gap-density-3 border-b border-border bg-card px-density-4 py-density-2",
+            bodyHeaderClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: bodyHeader }),
+            bodyActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-density-2", children: bodyActions })
+          ]
+        }
+      ),
+      bodySidebar !== void 0 ? /* @__PURE__ */ jsx(
+        SplitPane,
+        {
+          className: "min-h-0 flex-1",
+          defaultSplit: bodySplit,
+          minLeft: 12,
+          minRight: 30,
+          left: bodySidebar,
+          right: /* @__PURE__ */ jsx("div", { className: cn("h-full min-w-0", contentClassName), children }),
+          rightClass: "overflow-y-auto"
+        }
+      ) : /* @__PURE__ */ jsx("main", { className: cn("min-h-0 min-w-0 flex-1 overflow-auto", contentClassName), children })
+    ] })
+  ] });
+}
+function NavSections({
+  sections,
+  collapsed
+}) {
+  return /* @__PURE__ */ jsx("nav", { className: cn("flex flex-col gap-0.5", collapsed ? "px-2" : "px-density-2"), children: sections.map((section, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+    section.label && (collapsed ? /* @__PURE__ */ jsx("div", { className: "mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1" }) : /* @__PURE__ */ jsx("div", { className: "mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1", children: section.label })),
+    section.items.map((item) => /* @__PURE__ */ jsx(NavItemRow, { item, collapsed }, item.key))
+  ] }, section.label ?? `section-${i}`)) });
+}
+function NavItemRow({ item, collapsed }) {
+  const className = cn(
+    "flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+    collapsed && "justify-center px-0",
+    item.active && "bg-sidebar-accent font-medium text-sidebar-primary"
+  );
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(Icon, { ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon } }) }),
+    !collapsed && /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+    !collapsed && item.badge
+  ] });
+  const title = collapsed && typeof item.label === "string" ? item.label : void 0;
+  if (item.href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: item.href,
+        className,
+        title,
+        ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        children: inner
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("button", { type: "button", onClick: item.onClick, className, title, children: inner });
+}
+export {
+  AppShell
+};
+//# sourceMappingURL=AppShell.js.map

package/dist/layout/AppShell.js.map

@@ -0,0 +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 { UiSidebar } from \"../icons\";\nimport { SplitPane } from \"./SplitPane\";\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  /** Click handler (rendered as a button when no `href`). */\n  onClick?: () => void;\n  /** Destination (rendered as an anchor). */\n  href?: string;\n  /** Opens `href` 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  /** 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\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\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    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    bodyHeader,\n    bodyActions,\n    bodySidebar,\n    bodySplit = 24,\n    children,\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\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  const railWidth = collapsed ? collapsedWidth : sidebarWidth;\n  const hasTopBar =\n    (!hasSidebar && brand !== undefined) ||\n    nav !== undefined ||\n    search !== undefined ||\n    actions !== undefined ||\n    toolbar !== undefined;\n  const hasBodyHeader = bodyHeader !== undefined || bodyActions !== undefined;\n\n  return (\n    <div className={cn(\"flex h-full min-h-0 w-full bg-background\", className)}>\n      {hasSidebar && (\n        <aside\n          style={{ width: railWidth }}\n          className={cn(\n            \"flex shrink-0 flex-col overflow-hidden border-r border-sidebar-border bg-sidebar text-sidebar-foreground transition-[width] duration-200\",\n            sidebarClassName,\n          )}\n        >\n          <div\n            className={cn(\n              \"flex h-14 shrink-0 items-center border-b border-sidebar-border\",\n              collapsed ? \"justify-center px-2\" : \"justify-between px-density-3\",\n            )}\n          >\n            {!collapsed && brand && <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>}\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 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            {typeof sidebar === \"function\"\n              ? sidebar(collapsed)\n              : sidebar !== undefined\n                ? sidebar\n                : navSections && <NavSections sections={navSections} collapsed={collapsed} />}\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      )}\n\n      <div className=\"flex min-h-0 min-w-0 flex-1 flex-col\">\n        {hasTopBar && (\n          <header className=\"shrink-0 border-b border-border bg-card\">\n            <div\n              className={cn(\"flex h-14 items-center gap-density-3 px-density-4\", headerClassName)}\n            >\n              {!hasSidebar && brand && (\n                <div className=\"flex shrink-0 items-center gap-density-2\">{brand}</div>\n              )}\n              {nav && <div className=\"flex shrink-0 items-center\">{nav}</div>}\n              {search !== undefined && (\n                <div className=\"flex min-w-0 flex-1 justify-center\">\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 className=\"flex shrink-0 items-center gap-density-2\">{actions}</div>\n              )}\n            </div>\n            {toolbar && (\n              <div\n                className={cn(\n                  \"flex items-center gap-density-2 border-t border-border bg-muted px-density-4 py-density-2\",\n                  toolbarClassName,\n                )}\n              >\n                {toolbar}\n              </div>\n            )}\n          </header>\n        )}\n\n        {hasBodyHeader && (\n          <div\n            className={cn(\n              \"flex shrink-0 items-start justify-between gap-density-3 border-b border-border bg-card px-density-4 py-density-2\",\n              bodyHeaderClassName,\n            )}\n          >\n            <div className=\"min-w-0 flex-1\">{bodyHeader}</div>\n            {bodyActions && (\n              <div className=\"flex shrink-0 items-center gap-density-2\">{bodyActions}</div>\n            )}\n          </div>\n        )}\n\n        {bodySidebar !== undefined ? (\n          <SplitPane\n            className=\"min-h-0 flex-1\"\n            defaultSplit={bodySplit}\n            minLeft={12}\n            minRight={30}\n            left={bodySidebar}\n            right={<div className={cn(\"h-full min-w-0\", contentClassName)}>{children}</div>}\n            rightClass=\"overflow-y-auto\"\n          />\n        ) : (\n          <main className={cn(\"min-h-0 min-w-0 flex-1 overflow-auto\", contentClassName)}>\n            {children}\n          </main>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction NavSections({\n  sections,\n  collapsed,\n}: {\n  sections: AppShellNavSection[];\n  collapsed: boolean;\n}) {\n  return (\n    <nav className={cn(\"flex flex-col gap-0.5\", collapsed ? \"px-2\" : \"px-density-2\")}>\n      {sections.map((section, i) => (\n        <div key={section.label ?? `section-${i}`} className=\"flex flex-col\">\n          {section.label &&\n            (collapsed ? (\n              <div className=\"mx-2 mb-1 mt-3 border-t border-sidebar-border first:mt-1\" />\n            ) : (\n              <div className=\"mb-0.5 mt-3 px-density-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/55 first:mt-1\">\n                {section.label}\n              </div>\n            ))}\n          {section.items.map((item) => (\n            <NavItemRow key={item.key} item={item} collapsed={collapsed} />\n          ))}\n        </div>\n      ))}\n    </nav>\n  );\n}\n\nfunction NavItemRow({ item, collapsed }: { item: AppShellNavItem; collapsed: boolean }) {\n  const className = cn(\n    \"flex w-full items-center gap-2.5 rounded-md px-density-2 py-1.5 text-left text-[13px] text-sidebar-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n    collapsed && \"justify-center px-0\",\n    item.active && \"bg-sidebar-accent font-medium text-sidebar-primary\",\n  );\n  const inner = (\n    <>\n      {item.icon && (\n        <span className=\"flex h-4 w-4 shrink-0 items-center justify-center\">\n          <Icon {...(typeof item.icon === \"string\" ? { name: item.icon } : { icon: item.icon })} />\n        </span>\n      )}\n      {!collapsed && <span className=\"flex-1 truncate\">{item.label}</span>}\n      {!collapsed && item.badge}\n    </>\n  );\n  const title = collapsed && typeof item.label === \"string\" ? item.label : undefined;\n\n  if (item.href) {\n    return (\n      <a\n        href={item.href}\n        className={className}\n        title={title}\n        {...(item.external ? { target: \"_blank\", rel: \"noopener noreferrer\" } : {})}\n      >\n        {inner}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" onClick={item.onClick} className={className} title={title}>\n      {inner}\n    </button>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/layout/Panel.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-l-red-500",
+  warning: "border-l-2 border-l-yellow-500",
+  success: "border-l-2 border-l-green-500",
+  info: "border-l-2 border-l-blue-500"
+};
+function Panel({
+  title,
+  icon,
+  count,
+  actions,
+  footer,
+  tone = "default",
+  padded = true,
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  const hasHeader = title !== void 0 || icon !== void 0 || actions !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "rounded-md border border-border bg-card overflow-hidden",
+        toneRing[tone],
+        className
+      ),
+      children: [
+        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex items-center gap-2 px-density-3 py-density-2 border-b border-border",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon.Icon,
+                  {
+                    ...typeof icon === "string" ? { name: icon } : { icon },
+                    className: "text-base text-muted-foreground"
+                  }
+                ),
+                title !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm truncate text-card-foreground", children: title }),
+                count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
+              ] }),
+              actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(padded && "px-density-3 py-density-2", bodyClassName), children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-2 border-t border-border", children: footer })
+      ]
+    }
+  );
+}
+exports.Panel = Panel;
+//# sourceMappingURL=Panel.cjs.map

package/dist/layout/Panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.cjs","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader = title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <div\n      className={cn(\n        \"rounded-md border border-border bg-card overflow-hidden\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {hasHeader && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2 border-b border-border\",\n            headerClassName,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n                className=\"text-base text-muted-foreground\"\n              />\n            )}\n            {title !== undefined && (\n              <span className=\"font-medium text-sm truncate text-card-foreground\">{title}</span>\n            )}\n            {count !== undefined && (\n              <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                {count}\n              </span>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n        </div>\n      )}\n      <div className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}>{children}</div>\n      {footer && <div className=\"px-density-3 py-density-2 border-t border-border\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon"],"mappings":";;;;;AA+BA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAOO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aACCD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,QACCE,2BAAAA;AAAAA,kBAACC,KAAAA;AAAAA,kBAAA;AAAA,oBACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,oBACnD,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,UAAU,UACTD,2BAAAA,IAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAM;AAAA,gBAE5E,UAAU,UACTA,2BAAAA,IAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACC,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3EA,+BAAC,SAAI,WAAWD,MAAAA,GAAG,UAAU,6BAA6B,aAAa,GAAI,UAAS;AAAA,QACnF,UAAUC,2BAAAA,IAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3F;;"}

package/dist/layout/Panel.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { StaticIconComponent } from '../data/Icon';
+export type PanelTone = "default" | "danger" | "warning" | "success" | "info";
+export type PanelProps = {
+    /** Header title. Omit (with no icon/count/actions) to render a headerless card. */
+    title?: ReactNode;
+    /** Optional leading icon. */
+    icon?: string | StaticIconComponent;
+    /** Optional count pill shown after the title. */
+    count?: number;
+    /** Right-aligned header content (copy buttons, summaries, links). */
+    actions?: ReactNode;
+    /** Optional footer row below the body. */
+    footer?: ReactNode;
+    /** Semantic left-border accent. */
+    tone?: PanelTone;
+    /** Pad the body. Defaults to true; pass false for flush row lists. */
+    padded?: boolean;
+    /** Classes applied to the panel root. */
+    className?: string;
+    /** Classes applied to the header row. */
+    headerClassName?: string;
+    /** Classes applied to the body. */
+    bodyClassName?: string;
+    /** Panel content. */
+    children: ReactNode;
+};
+/**
+ * A non-collapsible carded surface with an optional header. Use for content
+ * panels (checks, results, comments) where {@link Section}'s disclosure
+ * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.
+ */
+export declare function Panel({ title, icon, count, actions, footer, tone, padded, className, headerClassName, bodyClassName, children, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/layout/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/layout/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,IAAgB,EAChB,MAAa,EACb,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,UAAU,2CAwCZ"}

package/dist/layout/Panel.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-l-red-500",
+  warning: "border-l-2 border-l-yellow-500",
+  success: "border-l-2 border-l-green-500",
+  info: "border-l-2 border-l-blue-500"
+};
+function Panel({
+  title,
+  icon,
+  count,
+  actions,
+  footer,
+  tone = "default",
+  padded = true,
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  const hasHeader = title !== void 0 || icon !== void 0 || actions !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-md border border-border bg-card overflow-hidden",
+        toneRing[tone],
+        className
+      ),
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-density-3 py-density-2 border-b border-border",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                icon && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    ...typeof icon === "string" ? { name: icon } : { icon },
+                    className: "text-base text-muted-foreground"
+                  }
+                ),
+                title !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate text-card-foreground", children: title }),
+                count !== void 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
+              ] }),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn(padded && "px-density-3 py-density-2", bodyClassName), children }),
+        footer && /* @__PURE__ */ jsx("div", { className: "px-density-3 py-density-2 border-t border-border", children: footer })
+      ]
+    }
+  );
+}
+export {
+  Panel
+};
+//# sourceMappingURL=Panel.js.map

package/dist/layout/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader = title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <div\n      className={cn(\n        \"rounded-md border border-border bg-card overflow-hidden\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {hasHeader && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2 border-b border-border\",\n            headerClassName,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n                className=\"text-base text-muted-foreground\"\n              />\n            )}\n            {title !== undefined && (\n              <span className=\"font-medium text-sm truncate text-card-foreground\">{title}</span>\n            )}\n            {count !== undefined && (\n              <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                {count}\n              </span>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n        </div>\n      )}\n      <div className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}>{children}</div>\n      {footer && <div className=\"px-density-3 py-density-2 border-t border-border\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA+BA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAOO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,QACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,oBACnD,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAM;AAAA,gBAE5E,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACC,WAAW,oBAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3E,oBAAC,SAAI,WAAW,GAAG,UAAU,6BAA6B,aAAa,GAAI,UAAS;AAAA,QACnF,UAAU,oBAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3F;"}

package/dist/layout/Tabs.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const TabButton = require("../data/TabButton.cjs");
+function Tabs({ tabs, value, onChange, variant = "underline", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      className: utils.cn(
+        "flex items-center gap-density-1",
+        variant === "underline" && "border-b border-border",
+        className
+      ),
+      children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        TabButton.TabButton,
+        {
+          active: tab.id === value,
+          onClick: () => {
+            if (!tab.disabled) onChange(tab.id);
+          },
+          label: tab.label,
+          variant,
+          ...tab.icon !== void 0 ? { icon: tab.icon } : {},
+          ...tab.count !== void 0 ? { count: tab.count } : {},
+          ...tab.countColor !== void 0 ? { countColor: tab.countColor } : {},
+          ...tab.disabled ? { className: "opacity-50 pointer-events-none" } : {}
+        },
+        tab.id
+      ))
+    }
+  );
+}
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.cjs.map

package/dist/layout/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","sources":["../../src/layout/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { TabButton, type TabButtonVariant } from \"../data/TabButton\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\nexport type TabItem = {\n  /** Stable id; also the value compared against the selected `value`. */\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge; hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Disables selecting this tab. */\n  disabled?: boolean;\n};\n\nexport type TabsProps = {\n  /** Tabs to render, in order. */\n  tabs: TabItem[];\n  /** Currently selected tab id. */\n  value: string;\n  /** Called with the next tab id when a tab is clicked. */\n  onChange: (id: string) => void;\n  /** Visual style. Defaults to `underline`. */\n  variant?: TabButtonVariant;\n  /** Classes applied to the tablist row. */\n  className?: string;\n};\n\n/**\n * A controlled tab strip built on {@link TabButton}. Defaults to the\n * `underline` variant — the row carries a bottom border and the active tab's\n * underline overlaps it. Render the matching panel yourself based on `value`.\n */\nexport function Tabs({ tabs, value, onChange, variant = \"underline\", className }: TabsProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        \"flex items-center gap-density-1\",\n        variant === \"underline\" && \"border-b border-border\",\n        className,\n      )}\n    >\n      {tabs.map((tab) => (\n        <TabButton\n          key={tab.id}\n          active={tab.id === value}\n          onClick={() => {\n            if (!tab.disabled) onChange(tab.id);\n          }}\n          label={tab.label}\n          variant={variant}\n          {...(tab.icon !== undefined ? { icon: tab.icon } : {})}\n          {...(tab.count !== undefined ? { count: tab.count } : {})}\n          {...(tab.countColor !== undefined ? { countColor: tab.countColor } : {})}\n          {...(tab.disabled ? { className: \"opacity-50 pointer-events-none\" } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["jsx","cn","TabButton"],"mappings":";;;;;AAsCO,SAAS,KAAK,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,aAAwB;AAC3F,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,eAAe;AAAA,QAC3B;AAAA,MAAA;AAAA,MAGD,UAAA,KAAK,IAAI,CAAC,QACTD,2BAAAA;AAAAA,QAACE,UAAAA;AAAAA,QAAA;AAAA,UAEC,QAAQ,IAAI,OAAO;AAAA,UACnB,SAAS,MAAM;AACb,gBAAI,CAAC,IAAI,SAAU,UAAS,IAAI,EAAE;AAAA,UACpC;AAAA,UACA,OAAO,IAAI;AAAA,UACX;AAAA,UACC,GAAI,IAAI,SAAS,SAAY,EAAE,MAAM,IAAI,KAAA,IAAS,CAAA;AAAA,UAClD,GAAI,IAAI,UAAU,SAAY,EAAE,OAAO,IAAI,MAAA,IAAU,CAAA;AAAA,UACrD,GAAI,IAAI,eAAe,SAAY,EAAE,YAAY,IAAI,WAAA,IAAe,CAAA;AAAA,UACpE,GAAI,IAAI,WAAW,EAAE,WAAW,iCAAA,IAAqC,CAAA;AAAA,QAAC;AAAA,QAVlE,IAAI;AAAA,MAAA,CAYZ;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/layout/Tabs.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { TabButtonVariant } from '../data/TabButton';
+import { StaticIconComponent } from '../data/Icon';
+export type TabItem = {
+    /** Stable id; also the value compared against the selected `value`. */
+    id: string;
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional leading icon (icon name or component). */
+    icon?: string | StaticIconComponent;
+    /** Optional count badge; hidden when zero. */
+    count?: number;
+    /** Classes for the count badge background. */
+    countColor?: string;
+    /** Disables selecting this tab. */
+    disabled?: boolean;
+};
+export type TabsProps = {
+    /** Tabs to render, in order. */
+    tabs: TabItem[];
+    /** Currently selected tab id. */
+    value: string;
+    /** Called with the next tab id when a tab is clicked. */
+    onChange: (id: string) => void;
+    /** Visual style. Defaults to `underline`. */
+    variant?: TabButtonVariant;
+    /** Classes applied to the tablist row. */
+    className?: string;
+};
+/**
+ * A controlled tab strip built on {@link TabButton}. Defaults to the
+ * `underline` variant — the row carries a bottom border and the active tab's
+ * underline overlaps it. Render the matching panel yourself based on `value`.
+ */
+export declare function Tabs({ tabs, value, onChange, variant, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/layout/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/layout/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,MAAM,OAAO,GAAG;IACpB,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,gCAAgC;IAChC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAqB,EAAE,SAAS,EAAE,EAAE,SAAS,2CA2B1F"}

package/dist/layout/Tabs.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { TabButton } from "../data/TabButton.js";
+function Tabs({ tabs, value, onChange, variant = "underline", className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn(
+        "flex items-center gap-density-1",
+        variant === "underline" && "border-b border-border",
+        className
+      ),
+      children: tabs.map((tab) => /* @__PURE__ */ jsx(
+        TabButton,
+        {
+          active: tab.id === value,
+          onClick: () => {
+            if (!tab.disabled) onChange(tab.id);
+          },
+          label: tab.label,
+          variant,
+          ...tab.icon !== void 0 ? { icon: tab.icon } : {},
+          ...tab.count !== void 0 ? { count: tab.count } : {},
+          ...tab.countColor !== void 0 ? { countColor: tab.countColor } : {},
+          ...tab.disabled ? { className: "opacity-50 pointer-events-none" } : {}
+        },
+        tab.id
+      ))
+    }
+  );
+}
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/layout/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../src/layout/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { TabButton, type TabButtonVariant } from \"../data/TabButton\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\nexport type TabItem = {\n  /** Stable id; also the value compared against the selected `value`. */\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge; hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Disables selecting this tab. */\n  disabled?: boolean;\n};\n\nexport type TabsProps = {\n  /** Tabs to render, in order. */\n  tabs: TabItem[];\n  /** Currently selected tab id. */\n  value: string;\n  /** Called with the next tab id when a tab is clicked. */\n  onChange: (id: string) => void;\n  /** Visual style. Defaults to `underline`. */\n  variant?: TabButtonVariant;\n  /** Classes applied to the tablist row. */\n  className?: string;\n};\n\n/**\n * A controlled tab strip built on {@link TabButton}. Defaults to the\n * `underline` variant — the row carries a bottom border and the active tab's\n * underline overlaps it. Render the matching panel yourself based on `value`.\n */\nexport function Tabs({ tabs, value, onChange, variant = \"underline\", className }: TabsProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        \"flex items-center gap-density-1\",\n        variant === \"underline\" && \"border-b border-border\",\n        className,\n      )}\n    >\n      {tabs.map((tab) => (\n        <TabButton\n          key={tab.id}\n          active={tab.id === value}\n          onClick={() => {\n            if (!tab.disabled) onChange(tab.id);\n          }}\n          label={tab.label}\n          variant={variant}\n          {...(tab.icon !== undefined ? { icon: tab.icon } : {})}\n          {...(tab.count !== undefined ? { count: tab.count } : {})}\n          {...(tab.countColor !== undefined ? { countColor: tab.countColor } : {})}\n          {...(tab.disabled ? { className: \"opacity-50 pointer-events-none\" } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAsCO,SAAS,KAAK,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,aAAwB;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,YAAY,eAAe;AAAA,QAC3B;AAAA,MAAA;AAAA,MAGD,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,QAAQ,IAAI,OAAO;AAAA,UACnB,SAAS,MAAM;AACb,gBAAI,CAAC,IAAI,SAAU,UAAS,IAAI,EAAE;AAAA,UACpC;AAAA,UACA,OAAO,IAAI;AAAA,UACX;AAAA,UACC,GAAI,IAAI,SAAS,SAAY,EAAE,MAAM,IAAI,KAAA,IAAS,CAAA;AAAA,UAClD,GAAI,IAAI,UAAU,SAAY,EAAE,OAAO,IAAI,MAAA,IAAU,CAAA;AAAA,UACrD,GAAI,IAAI,eAAe,SAAY,EAAE,YAAY,IAAI,WAAA,IAAe,CAAA;AAAA,UACpE,GAAI,IAAI,WAAW,EAAE,WAAW,iCAAA,IAAqC,CAAA;AAAA,QAAC;AAAA,QAVlE,IAAI;AAAA,MAAA,CAYZ;AAAA,IAAA;AAAA,EAAA;AAGP;"}