@nimblebrain/synapse 0.15.0 → 0.16.0

package/dist/ui/index.js

@@ -1,5 +1,5 @@
 import { ensureStyle, injectBaseReset } from '../chunk-3HQGHPNC.js';
-import { createContext, useRef, useId, useState, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
+import { createContext, useRef, useId, useState, useEffect, useMemo, useContext, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ui/tokens.ts
@@ -160,6 +160,81 @@ function Badge({ tone = "neutral", style, children, ...rest }) {
     }
   );
 }
+var TONE2 = {
+  default: tokens.fg,
+  muted: tokens.fgMuted,
+  faint: tokens.fgFaint,
+  accent: tokens.accent,
+  danger: tokens.danger,
+  success: tokens.success
+};
+var WEIGHT = {
+  normal: tokens.weightNormal,
+  medium: tokens.weightMedium,
+  semibold: tokens.weightSemibold,
+  bold: tokens.weightBold
+};
+function Text({
+  size = "base",
+  weight = "normal",
+  tone = "default",
+  mono = false,
+  truncate = false,
+  as: As = "span",
+  style,
+  children,
+  ...rest
+}) {
+  const truncation = truncate ? {
+    display: "block",
+    minWidth: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  } : {};
+  return /* @__PURE__ */ jsx(
+    As,
+    {
+      style: {
+        margin: 0,
+        fontFamily: mono ? tokens.fontMono : tokens.fontSans,
+        fontWeight: WEIGHT[weight],
+        color: TONE2[tone],
+        ...textStyle(size),
+        ...truncation,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function Heading({
+  size = "md",
+  weight = "semibold",
+  tone = "default",
+  as: As = "h2",
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    As,
+    {
+      style: {
+        margin: 0,
+        fontFamily: tokens.fontHeading,
+        fontWeight: WEIGHT[weight],
+        color: TONE2[tone],
+        letterSpacing: "-0.015em",
+        ...headingStyle(size),
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
 var STYLE_ID = "nb-synapse-button";
 var RULES = `
 .nb-btn {
@@ -260,6 +335,41 @@ function TextLink({ tone = "muted", style, className, children, ...rest }) {
     }
   );
 }
+function Breadcrumb({ crumbs, separator = "\u203A", style, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": "Breadcrumb",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.4rem",
+        flexWrap: "wrap",
+        minWidth: 0,
+        ...style
+      },
+      ...rest,
+      children: crumbs.map((crumb, i) => {
+        const last = i === crumbs.length - 1;
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: a crumb's POSITION is its identity — "the second level" is what the step means, and two levels can legitimately carry the same label. There is no id to key on, and a trail that changed shape SHOULD remount rather than reconcile a step into a different depth.
+          /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            last || !crumb.onClick ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                size: "xs",
+                tone: last ? "muted" : "default",
+                "aria-current": last ? "page" : void 0,
+                children: crumb.label
+              }
+            ) : /* @__PURE__ */ jsx(TextLink, { onClick: crumb.onClick, style: { fontSize: tokens.textXsSize }, children: crumb.label }),
+            last ? null : /* @__PURE__ */ jsx(Text, { size: "xs", tone: "faint", "aria-hidden": "true", children: separator })
+          ] }, `${crumb.label}:${i}`)
+        );
+      })
+    }
+  );
+}
 var STYLE_ID2 = "nb-synapse-card";
 var RULES2 = `
 .nb-card--interactive {
@@ -608,75 +718,6 @@ function Divider({ orientation = "horizontal", style, ...rest }) {
     }
   );
 }
-var TONE2 = {
-  default: tokens.fg,
-  muted: tokens.fgMuted,
-  faint: tokens.fgFaint,
-  accent: tokens.accent,
-  danger: tokens.danger,
-  success: tokens.success
-};
-var WEIGHT = {
-  normal: tokens.weightNormal,
-  medium: tokens.weightMedium,
-  semibold: tokens.weightSemibold,
-  bold: tokens.weightBold
-};
-function Text({
-  size = "base",
-  weight = "normal",
-  tone = "default",
-  mono = false,
-  truncate = false,
-  as: As = "span",
-  style,
-  children,
-  ...rest
-}) {
-  const truncation = truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : {};
-  return /* @__PURE__ */ jsx(
-    As,
-    {
-      style: {
-        margin: 0,
-        fontFamily: mono ? tokens.fontMono : tokens.fontSans,
-        fontWeight: WEIGHT[weight],
-        color: TONE2[tone],
-        ...textStyle(size),
-        ...truncation,
-        ...style
-      },
-      ...rest,
-      children
-    }
-  );
-}
-function Heading({
-  size = "md",
-  weight = "semibold",
-  tone = "default",
-  as: As = "h2",
-  style,
-  children,
-  ...rest
-}) {
-  return /* @__PURE__ */ jsx(
-    As,
-    {
-      style: {
-        margin: 0,
-        fontFamily: tokens.fontHeading,
-        fontWeight: WEIGHT[weight],
-        color: TONE2[tone],
-        letterSpacing: "-0.015em",
-        ...headingStyle(size),
-        ...style
-      },
-      ...rest,
-      children
-    }
-  );
-}
 function EmptyState({ icon, title, description, action, style, ...rest }) {
   return /* @__PURE__ */ jsxs(
     Stack,
@@ -798,6 +839,81 @@ function ListRow({
     }
   );
 }
+var STYLE_ID5 = "nb-synapse-page-header";
+var RULES5 = `
+.nb-page-header__desc {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--nb-ph-desc-lines, 2);
+  line-clamp: var(--nb-ph-desc-lines, 2);
+  overflow: hidden;
+}
+`;
+function PageHeader({
+  crumbs,
+  title,
+  status,
+  actions,
+  description,
+  descriptionLines = 2,
+  style,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID5, RULES5);
+  const descVars = descriptionLines > 0 ? { "--nb-ph-desc-lines": String(descriptionLines) } : {};
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      style: { display: "flex", flexDirection: "column", gap: "0.5rem", minWidth: 0, ...style },
+      ...rest,
+      children: [
+        crumbs && crumbs.length > 0 ? /* @__PURE__ */ jsx(Breadcrumb, { crumbs }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: "1rem",
+              flexWrap: "wrap",
+              minWidth: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.6rem",
+                    flexWrap: "wrap",
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Heading, { size: "md", children: title }),
+                    status
+                  ]
+                }
+              ),
+              actions ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", flexShrink: 0 }, children: actions }) : null
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "sm",
+            tone: "muted",
+            className: descriptionLines > 0 ? "nb-page-header__desc" : void 0,
+            style: { maxWidth: "72ch", ...descVars },
+            children: description
+          }
+        ) : null
+      ]
+    }
+  );
+}
 function Pagination({ page, pageCount, onChange, style, ...rest }) {
   const total = Math.max(1, pageCount);
   const atStart = page <= 1;
@@ -829,8 +945,8 @@ function Pagination({ page, pageCount, onChange, style, ...rest }) {
     }
   );
 }
-var STYLE_ID5 = "nb-synapse-prose";
-var RULES5 = `
+var STYLE_ID6 = "nb-synapse-prose";
+var RULES6 = `
 .nb-prose {
   font-family: ${tokens.fontSans};
   font-size: ${tokens.textBaseSize};
@@ -855,15 +971,15 @@ var RULES5 = `
 .nb-prose strong { font-weight: ${tokens.weightSemibold}; }
 `;
 function Prose({ html, children, className, ...rest }) {
-  ensureStyle(STYLE_ID5, RULES5);
+  ensureStyle(STYLE_ID6, RULES6);
   const cls = `nb-prose ${className ?? ""}`.trim();
   if (html !== void 0) {
     return /* @__PURE__ */ jsx("div", { className: cls, dangerouslySetInnerHTML: { __html: html }, ...rest });
   }
   return /* @__PURE__ */ jsx("div", { className: cls, ...rest, children });
 }
-var STYLE_ID6 = "nb-synapse-searchfield";
-var RULES6 = `
+var STYLE_ID7 = "nb-synapse-searchfield";
+var RULES7 = `
 .nb-search { font-family: var(--nb-search-font); color: var(--nb-search-fg); outline: none; }
 .nb-search::placeholder { color: var(--nb-search-placeholder); }
 .nb-search--underline {
@@ -893,7 +1009,7 @@ function SearchField({
   type = "search",
   ...rest
 }) {
-  ensureStyle(STYLE_ID6, RULES6);
+  ensureStyle(STYLE_ID7, RULES7);
   const fieldStyle = {
     "--nb-search-font": tokens.fontSans,
     "--nb-search-fg": tokens.fg,
@@ -916,8 +1032,8 @@ function SearchField({
     }
   );
 }
-var STYLE_ID7 = "nb-synapse-segmented";
-var RULES7 = `
+var STYLE_ID8 = "nb-synapse-segmented";
+var RULES8 = `
 .nb-seg {
   display: inline-flex;
   gap: 2px;
@@ -952,7 +1068,7 @@ function SegmentedControl({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID7, RULES7);
+  ensureStyle(STYLE_ID8, RULES8);
   const trackStyle = {
     "--nb-seg-radius": tokens.radiusSm,
     "--nb-seg-track": tokens.bgSubtle,
@@ -981,14 +1097,14 @@ function SegmentedControl({
     )) })
   );
 }
-var STYLE_ID8 = "nb-synapse-spinner";
-var RULES8 = `
+var STYLE_ID9 = "nb-synapse-spinner";
+var RULES9 = `
 @keyframes nb-spin { to { transform: rotate(360deg); } }
 .nb-spinner { animation: nb-spin 0.7s linear infinite; }
 @media (prefers-reduced-motion: reduce) { .nb-spinner { animation-duration: 1.6s; } }
 `;
 function Spinner({ size = 16, color, style, className, ...rest }) {
-  ensureStyle(STYLE_ID8, RULES8);
+  ensureStyle(STYLE_ID9, RULES9);
   const spinnerStyle = {
     display: "inline-block",
     flexShrink: 0,
@@ -1017,7 +1133,7 @@ var COLOR = {
   failed: tokens.danger,
   idle: tokens.fgFaint
 };
-var STYLE_ID9 = "nb-synapse-statusdot";
+var STYLE_ID10 = "nb-synapse-statusdot";
 var KEYFRAMES = `
 @keyframes nb-statusdot-pulse {
   0%   { box-shadow: 0 0 0 0 var(--nb-statusdot-ring); transform: scale(1); }
@@ -1039,7 +1155,7 @@ function StatusDot({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID9, KEYFRAMES);
+  ensureStyle(STYLE_ID10, KEYFRAMES);
   const dotColor = color ?? COLOR[status];
   const working = status === "working";
   const dotStyle = {
@@ -1062,8 +1178,8 @@ function StatusDot({
     }
   );
 }
-var STYLE_ID10 = "nb-synapse-table";
-var RULES9 = `
+var STYLE_ID11 = "nb-synapse-table";
+var RULES10 = `
 .nb-table { width: 100%; border-collapse: collapse; font-family: var(--nb-table-font); }
 .nb-table th, .nb-table td {
   padding: 0.55rem 0.75rem;
@@ -1088,11 +1204,12 @@ function Table({
   rowKey,
   onRowClick,
   empty,
+  minWidth,
   style,
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID10, RULES9);
+  ensureStyle(STYLE_ID11, RULES10);
   const vars = {
     "--nb-table-font": tokens.fontSans,
     "--nb-table-fg": tokens.fg,
@@ -1108,8 +1225,14 @@ function Table({
   if (data.length === 0 && empty !== void 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: empty });
   }
-  const tableStyle = { ...vars, ...style };
-  return /* @__PURE__ */ jsxs("table", { className: `nb-table ${className ?? ""}`.trim(), style: tableStyle, ...rest, children: [
+  const fixed = columns.some((col) => col.width !== void 0);
+  const tableStyle = {
+    ...vars,
+    ...fixed ? { tableLayout: "fixed" } : {},
+    ...minWidth !== void 0 ? { minWidth } : {},
+    ...style
+  };
+  const table = /* @__PURE__ */ jsxs("table", { className: `nb-table ${className ?? ""}`.trim(), style: tableStyle, ...rest, children: [
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
       "th",
       {
@@ -1139,6 +1262,141 @@ function Table({
       );
     }) })
   ] });
+  if (minWidth === void 0) return table;
+  const label = rest["aria-label"];
+  const named = label ? { role: "region", "aria-label": label } : {};
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      tabIndex: 0,
+      ...named,
+      style: { overflowX: "auto", maxWidth: "100%" },
+      children: table
+    }
+  );
+}
+var STYLE_ID12 = "nb-synapse-tabs";
+var RULES11 = `
+.nb-tabs {
+  display: flex;
+  align-items: stretch;
+  gap: var(--nb-tabs-gap);
+  border-bottom: var(--nb-tabs-rule);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.nb-tabs::-webkit-scrollbar { display: none; }
+.nb-tabs__tab {
+  border: none;
+  background: transparent;
+  color: var(--nb-tabs-fg);
+  font-family: var(--nb-tabs-font);
+  font-weight: var(--nb-tabs-weight);
+  font-size: var(--nb-tabs-size);
+  line-height: var(--nb-tabs-line);
+  padding: 0.4rem 0.15rem 0.55rem;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+  transition: color 130ms ease;
+}
+.nb-tabs__tab::after {
+  content: "";
+  position: absolute;
+  /* bottom 0, not -1px. overflow-x auto makes the computed overflow-y auto as well, and
+     clipping happens at the PADDING box - so a negative offset put 1px of the 2px accent
+     outside it: the underline rendered half-height and left 1px of phantom overflow. */
+  left: 0; right: 0; bottom: 0;
+  height: 2px;
+  border-radius: 2px 2px 0 0;
+  background: transparent;
+  transition: background 130ms ease;
+}
+.nb-tabs__tab:hover { color: var(--nb-tabs-fg-strong); }
+.nb-tabs__tab[aria-selected="true"] {
+  color: var(--nb-tabs-fg-strong);
+  font-weight: var(--nb-tabs-weight-active);
+}
+.nb-tabs__tab[aria-selected="true"]::after { background: var(--nb-tabs-accent); }
+.nb-tabs__tab:focus-visible {
+  outline: 2px solid var(--nb-tabs-ring);
+  outline-offset: -2px;
+  border-radius: var(--nb-tabs-radius);
+}
+`;
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  label,
+  style,
+  className,
+  onKeyDown: callerKeyDown,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID12, RULES11);
+  const barRef = useRef(null);
+  const barStyle = {
+    "--nb-tabs-gap": "1.25rem",
+    "--nb-tabs-rule": `${tokens.borderWidth} solid ${tokens.border}`,
+    "--nb-tabs-fg": tokens.fgMuted,
+    "--nb-tabs-fg-strong": tokens.fg,
+    "--nb-tabs-accent": tokens.accent,
+    "--nb-tabs-ring": tokens.ring,
+    "--nb-tabs-font": tokens.fontSans,
+    "--nb-tabs-weight": tokens.weightMedium,
+    "--nb-tabs-weight-active": tokens.weightSemibold,
+    "--nb-tabs-size": tokens.textSmSize,
+    "--nb-tabs-line": tokens.textSmLine,
+    "--nb-tabs-radius": tokens.radiusXs,
+    ...style
+  };
+  const onKeyDown = (e) => {
+    callerKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    const at = tabs.findIndex((t) => t.value === value);
+    if (at < 0) return;
+    let to;
+    if (e.key === "ArrowRight") to = (at + 1) % tabs.length;
+    else if (e.key === "ArrowLeft") to = (at - 1 + tabs.length) % tabs.length;
+    else if (e.key === "Home") to = 0;
+    else if (e.key === "End") to = tabs.length - 1;
+    else return;
+    e.preventDefault();
+    if (to !== at) onChange(tabs[to].value);
+    barRef.current?.querySelectorAll('[role="tab"]')[to]?.focus();
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...rest,
+      ref: barRef,
+      role: "tablist",
+      "aria-label": label,
+      className: `nb-tabs ${className ?? ""}`.trim(),
+      style: barStyle,
+      onKeyDown,
+      children: tabs.map((tab) => {
+        const selected = tab.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": selected,
+            tabIndex: selected ? 0 : -1,
+            className: "nb-tabs__tab",
+            onClick: () => onChange(tab.value),
+            children: [
+              tab.label,
+              tab.count !== void 0 ? /* @__PURE__ */ jsx("span", { style: { marginLeft: "0.35rem", color: tokens.fgFaint }, children: tab.count }) : null
+            ]
+          },
+          tab.value
+        );
+      })
+    }
+  );
 }
 var READING_MAX = 760;
 var ContentWidthCtx = createContext("full");
@@ -1284,14 +1542,64 @@ function Back({ children, style }) {
   return /* @__PURE__ */ jsx(TextLink, { onClick: () => onBack?.(), style: { marginBottom: "0.5rem", ...style }, children: children ?? "\u2190 Back" });
 }
 var ListDetailLayout = Object.assign(ListDetailLayoutRoot, { List, Detail, Back });
+function PageLayout({
+  crumbs,
+  title,
+  status,
+  actions,
+  description,
+  descriptionLines,
+  tabs,
+  toolbar,
+  children,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { display: "flex", flexDirection: "column", gap: "1.1rem", minWidth: 0, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            crumbs,
+            title,
+            status,
+            actions,
+            description,
+            descriptionLines
+          }
+        ),
+        tabs,
+        toolbar ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              flexWrap: "wrap",
+              minWidth: 0,
+              marginBottom: "-0.35rem"
+            },
+            children: toolbar
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
 var SidebarCtx = createContext(null);
 function useSidebar() {
   const ctx = useContext(SidebarCtx);
   if (!ctx) throw new Error("useSidebar must be used within <SidebarLayout>");
   return ctx;
 }
-var STYLE_ID11 = "nb-synapse-sidebarlayout";
-var RULES10 = `
+var STYLE_ID13 = "nb-synapse-sidebarlayout";
+var RULES12 = `
 .nb-sidebar-drawer { transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); }
 .nb-sidebar-scrim { animation: nb-sidebar-fade 180ms ease; }
 @keyframes nb-sidebar-fade { from { opacity: 0; } to { opacity: 1; } }
@@ -1341,7 +1649,7 @@ function SidebarLayoutRoot({
 }
 function Sidebar({ style, children, ...rest }) {
   const { collapsed, mode, side, width, open, setOpen } = useSidebar();
-  ensureStyle(STYLE_ID11, RULES10);
+  ensureStyle(STYLE_ID13, RULES12);
   if (!collapsed) {
     const border = `${tokens.borderWidth} solid ${tokens.border}`;
     return /* @__PURE__ */ jsx(
@@ -1466,6 +1774,6 @@ function Trigger({ children, style, onClick, ...rest }) {
 }
 var SidebarLayout = Object.assign(SidebarLayoutRoot, { Sidebar, Main, Trigger });
 
-export { AppFrame, Avatar, Badge, Button, Card, Divider, Drawer, EmptyState, Heading, Inline, ListDetailLayout, ListRow, Pagination, Prose, SearchField, SegmentedControl, SidebarLayout, Spacer, Spinner, Stack, StatusDot, Table, Text, TextLink, headingStyle, textStyle, tokens, useBreakpoint, useListDetail, useSidebar };
+export { AppFrame, Avatar, Badge, Breadcrumb, Button, Card, Divider, Drawer, EmptyState, Heading, Inline, ListDetailLayout, ListRow, PageHeader, PageLayout, Pagination, Prose, SearchField, SegmentedControl, SidebarLayout, Spacer, Spinner, Stack, StatusDot, Table, Tabs, Text, TextLink, headingStyle, textStyle, tokens, useBreakpoint, useListDetail, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map