@nimblebrain/synapse 0.17.1 → 0.19.0

package/dist/ui/index.js

@@ -1,5 +1,6 @@
 import { ensureStyle, injectBaseReset } from '../chunk-3HQGHPNC.js';
-import { createContext, useRef, useId, useState, useEffect, useMemo, useContext, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import '../chunk-PZ5AY32C.js';
+import { createContext, useRef, useId, useState, useMemo, useContext, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ui/tokens.ts
@@ -20,6 +21,7 @@ var tokens = {
   ring: "var(--color-ring-primary, #2563eb)",
   // ── Status / brand semantics ──
   danger: "var(--nb-color-danger, #dc2626)",
+  dangerFg: "var(--nb-color-danger-foreground, #ffffff)",
   success: "var(--nb-color-success, #059669)",
   warning: "var(--nb-color-warning, #f59e0b)",
   processing: "var(--nb-color-processing, #7c3aed)",
@@ -292,6 +294,10 @@ function Button({
     vars["--nb-btn-bg"] = tokens.accent;
     vars["--nb-btn-bg-hover"] = `color-mix(in oklab, ${tokens.accent} 88%, black)`;
     vars["--nb-btn-fg"] = tokens.accentFg;
+  } else if (variant === "danger") {
+    vars["--nb-btn-bg"] = tokens.danger;
+    vars["--nb-btn-bg-hover"] = `color-mix(in oklab, ${tokens.danger} 88%, black)`;
+    vars["--nb-btn-fg"] = tokens.dangerFg;
   } else if (variant === "secondary") {
     vars["--nb-btn-bg"] = tokens.bgSubtle;
     vars["--nb-btn-bg-hover"] = tokens.bgRaised;
@@ -410,8 +416,283 @@ function Card({
     }
   );
 }
-var STYLE_ID3 = "nb-synapse-drawer";
+function inClosedDetails(el) {
+  const details = el.closest("details:not([open])");
+  if (!details) return false;
+  const summary = details.querySelector("summary");
+  return !summary || !summary.contains(el);
+}
+var CANDIDATES = "a[href], button, input, select, textarea, summary, [tabindex]";
+function tabbables(panel) {
+  return Array.from(panel.querySelectorAll(CANDIDATES)).filter(
+    (el) => el.tabIndex >= 0 && !el.matches(":disabled") && !el.closest("[hidden]") && !inClosedDetails(el) && el.type !== "hidden"
+  );
+}
+var openOverlays = [];
+var lockedOverflow = "";
+var handledEscapes = /* @__PURE__ */ new WeakSet();
+function isInnermost(self) {
+  const selfAt = openOverlays.indexOf(self);
+  return openOverlays.every((other, at) => {
+    if (other === self || !other.panel || !self.panel) return true;
+    if (self.panel.contains(other.panel)) return false;
+    if (other.panel.contains(self.panel)) return true;
+    return at < selfAt;
+  });
+}
+function useModal(open, panelRef, { onEscape, initialFocus }) {
+  const escapeRef = useRef(onEscape);
+  escapeRef.current = onEscape;
+  const initialFocusRef = useRef(initialFocus);
+  initialFocusRef.current = initialFocus;
+  useEffect(() => {
+    if (!open) return;
+    const panel = panelRef.current;
+    const previouslyFocused = document.activeElement;
+    const entry = { panel, restoreTo: previouslyFocused };
+    const nested = openOverlays.filter((o) => panel && o.panel && panel.contains(o.panel)).at(-1);
+    if (nested) {
+      entry.restoreTo = nested.restoreTo;
+      nested.restoreTo = panel;
+    }
+    const { body } = document;
+    if (openOverlays.length === 0) lockedOverflow = body.style.overflow;
+    openOverlays.push(entry);
+    const innermost = () => isInnermost(entry);
+    if (!(panel && previouslyFocused && panel.contains(previouslyFocused))) {
+      (initialFocusRef.current?.() ?? panel)?.focus();
+    }
+    body.style.overflow = "hidden";
+    const onWindowKeyDown = (e) => {
+      if (e.key !== "Escape" || handledEscapes.has(e) || !innermost()) return;
+      handledEscapes.add(e);
+      e.preventDefault();
+      escapeRef.current();
+    };
+    window.addEventListener("keydown", onWindowKeyDown);
+    const onPanelKeyDown = (e) => {
+      if (e.key !== "Tab" || !panel || !innermost()) return;
+      const focusables = tabbables(panel);
+      if (focusables.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || active === panel)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    panel?.addEventListener("keydown", onPanelKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onWindowKeyDown);
+      panel?.removeEventListener("keydown", onPanelKeyDown);
+      const at = openOverlays.indexOf(entry);
+      if (at !== -1) openOverlays.splice(at, 1);
+      if (openOverlays.length === 0) body.style.overflow = lockedOverflow;
+      entry.restoreTo?.focus?.();
+    };
+  }, [open, panelRef]);
+}
+var STYLE_ID3 = "nb-synapse-confirm-dialog";
 var RULES3 = `
+/* border-box on both, because the kit cannot assume the host resets it: under
+   content-box a full-width panel is its padding wider than a phone screen. */
+.nb-confirm-scrim {
+  box-sizing: border-box;
+  position: fixed; inset: 0; z-index: 1010;
+  display: flex; align-items: center; justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.4);
+  animation: nb-confirm-fade 160ms ease;
+}
+.nb-confirm {
+  box-sizing: border-box;
+  width: 100%; max-width: 28rem; max-height: 100%;
+  overflow-y: auto;
+  outline: none;
+  animation: nb-confirm-in 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+.nb-confirm__actions {
+  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem;
+}
+@keyframes nb-confirm-fade { from { opacity: 0; } }
+@keyframes nb-confirm-in { from { opacity: 0; transform: translateY(4px); } }
+@media (pointer: coarse) {
+  .nb-confirm__actions .nb-btn { min-height: 44px; }
+}
+`;
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  pendingLabel,
+  destructive = false,
+  onConfirm
+}) {
+  ensureStyle(STYLE_ID3, RULES3);
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const descriptionId = useId();
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    if (open) {
+      setError(null);
+      setPending(false);
+    }
+  }, [open]);
+  const dismiss = () => {
+    if (!pending) onOpenChange(false);
+  };
+  const focusTarget = () => panelRef.current?.querySelector(
+    destructive ? "[data-nb-confirm-cancel]" : "[data-nb-confirm-confirm]"
+  );
+  useModal(open, panelRef, { onEscape: dismiss, initialFocus: focusTarget });
+  useEffect(() => {
+    if (error) focusTarget()?.focus();
+  }, [error]);
+  const confirm = async () => {
+    if (pending) return;
+    setPending(true);
+    setError(null);
+    try {
+      await onConfirm();
+      setPending(false);
+      onOpenChange(false);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message || "That didn't go through. Try again.");
+      setPending(false);
+    }
+  };
+  if (!open) return null;
+  const panelStyle = {
+    padding: "1.25rem",
+    borderRadius: tokens.radiusMd,
+    border: `${tokens.borderWidth} solid ${tokens.border}`,
+    background: tokens.bg,
+    color: tokens.fg,
+    boxShadow: tokens.shadowLg,
+    fontFamily: tokens.fontSans
+  };
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: scrim click is a bonus mouse affordance; Escape and Cancel are the keyboard dismissal paths.
+    // biome-ignore lint/a11y/noStaticElementInteractions: the scrim is a decorative dismissal backdrop; the panel below owns the alertdialog role/semantics.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "nb-confirm-scrim",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) dismiss();
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            role: "alertdialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": description != null ? descriptionId : void 0,
+            "aria-busy": pending || void 0,
+            tabIndex: -1,
+            className: "nb-confirm",
+            style: panelStyle,
+            children: [
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  id: titleId,
+                  style: {
+                    margin: 0,
+                    fontFamily: tokens.fontSans,
+                    fontSize: tokens.textBaseSize,
+                    lineHeight: tokens.textBaseLine,
+                    fontWeight: tokens.weightSemibold,
+                    color: tokens.fg
+                  },
+                  children: title
+                }
+              ),
+              description != null ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: descriptionId,
+                  style: {
+                    margin: "0.25rem 0 0",
+                    fontSize: tokens.textSmSize,
+                    lineHeight: tokens.textSmLine,
+                    color: tokens.fgMuted
+                  },
+                  children: description
+                }
+              ) : null,
+              children != null ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: "1rem",
+                    fontSize: tokens.textSmSize,
+                    lineHeight: tokens.textSmLine
+                  },
+                  children
+                }
+              ) : null,
+              error ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  role: "alert",
+                  style: {
+                    margin: "0.75rem 0 0",
+                    fontSize: tokens.textSmSize,
+                    lineHeight: tokens.textSmLine,
+                    color: tokens.danger
+                  },
+                  children: error
+                }
+              ) : null,
+              /* @__PURE__ */ jsxs("div", { className: "nb-confirm__actions", style: { marginTop: "1.25rem" }, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    "data-nb-confirm-cancel": "",
+                    disabled: pending,
+                    onClick: dismiss,
+                    children: cancelLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: destructive ? "danger" : "primary",
+                    size: "sm",
+                    "data-nb-confirm-confirm": "",
+                    disabled: pending,
+                    onClick: () => void confirm(),
+                    children: pending ? pendingLabel ?? confirmLabel : confirmLabel
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  );
+}
+var STYLE_ID4 = "nb-synapse-drawer";
+var RULES4 = `
 .nb-drawer-scrim {
   position: fixed; inset: 0; z-index: 1000;
   display: flex; background: rgba(0, 0, 0, 0.32);
@@ -438,18 +719,6 @@ var RULES3 = `
   .nb-drawer-iconbtn { min-width: 44px; min-height: 44px; }
 }
 `;
-function inClosedDetails(el) {
-  const details = el.closest("details:not([open])");
-  if (!details) return false;
-  const summary = details.querySelector("summary");
-  return !summary || !summary.contains(el);
-}
-var CANDIDATES = "a[href], button, input, select, textarea, summary, [tabindex]";
-function tabbables(panel) {
-  return Array.from(panel.querySelectorAll(CANDIDATES)).filter(
-    (el) => el.tabIndex >= 0 && !el.matches(":disabled") && !el.closest("[hidden]") && !inClosedDetails(el) && el.type !== "hidden"
-  );
-}
 var DrawerContext = createContext(null);
 function DrawerRoot({
   open,
@@ -461,54 +730,11 @@ function DrawerRoot({
   children,
   ...rest
 }) {
-  ensureStyle(STYLE_ID3, RULES3);
+  ensureStyle(STYLE_ID4, RULES4);
   const panelRef = useRef(null);
   const labelId = useId();
   const [hasTitle, setHasTitle] = useState(false);
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        (onEscape ?? onClose)();
-      }
-    };
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
-  }, [open, onEscape, onClose]);
-  useEffect(() => {
-    if (!open) return;
-    const panel = panelRef.current;
-    const previouslyFocused = document.activeElement;
-    panel?.focus();
-    const { body } = document;
-    const prevOverflow = body.style.overflow;
-    body.style.overflow = "hidden";
-    const onKeyDown = (e) => {
-      if (e.key !== "Tab" || !panel) return;
-      const focusables = tabbables(panel);
-      if (focusables.length === 0) {
-        e.preventDefault();
-        return;
-      }
-      const first = focusables[0];
-      const last = focusables[focusables.length - 1];
-      const active = document.activeElement;
-      if (e.shiftKey && (active === first || active === panel)) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && active === last) {
-        e.preventDefault();
-        first.focus();
-      }
-    };
-    panel?.addEventListener("keydown", onKeyDown);
-    return () => {
-      panel?.removeEventListener("keydown", onKeyDown);
-      body.style.overflow = prevOverflow;
-      previouslyFocused?.focus?.();
-    };
-  }, [open]);
+  useModal(open, panelRef, { onEscape: onEscape ?? onClose });
   const ctxValue = useMemo(() => ({ labelId, setHasTitle }), [labelId]);
   if (!open) return null;
   const isBottom = side === "bottom";
@@ -740,8 +966,8 @@ function EmptyState({ icon, title, description, action, style, ...rest }) {
     }
   );
 }
-var STYLE_ID4 = "nb-synapse-listrow";
-var RULES4 = `
+var STYLE_ID5 = "nb-synapse-listrow";
+var RULES5 = `
 .nb-listrow { transition: background 140ms ease; }
 .nb-listrow--interactive { cursor: pointer; }
 .nb-listrow--interactive:hover { background: var(--nb-listrow-hover); }
@@ -756,7 +982,7 @@ function ListRow({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID4, RULES4);
+  ensureStyle(STYLE_ID5, RULES5);
   const rowStyle = {
     "--nb-listrow-hover": tokens.bgSubtle,
     display: "grid",
@@ -839,8 +1065,8 @@ function ListRow({
     }
   );
 }
-var STYLE_ID5 = "nb-synapse-page-header";
-var RULES5 = `
+var STYLE_ID6 = "nb-synapse-page-header";
+var RULES6 = `
 .nb-page-header__desc {
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -859,7 +1085,7 @@ function PageHeader({
   style,
   ...rest
 }) {
-  ensureStyle(STYLE_ID5, RULES5);
+  ensureStyle(STYLE_ID6, RULES6);
   const descVars = descriptionLines > 0 ? { "--nb-ph-desc-lines": String(descriptionLines) } : {};
   return /* @__PURE__ */ jsxs(
     "header",
@@ -945,8 +1171,8 @@ function Pagination({ page, pageCount, onChange, style, ...rest }) {
     }
   );
 }
-var STYLE_ID6 = "nb-synapse-prose";
-var RULES6 = `
+var STYLE_ID7 = "nb-synapse-prose";
+var RULES7 = `
 .nb-prose {
   font-family: ${tokens.fontSans};
   font-size: ${tokens.textBaseSize};
@@ -971,15 +1197,15 @@ var RULES6 = `
 .nb-prose strong { font-weight: ${tokens.weightSemibold}; }
 `;
 function Prose({ html, children, className, ...rest }) {
-  ensureStyle(STYLE_ID6, RULES6);
+  ensureStyle(STYLE_ID7, RULES7);
   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_ID7 = "nb-synapse-searchfield";
-var RULES7 = `
+var STYLE_ID8 = "nb-synapse-searchfield";
+var RULES8 = `
 .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 {
@@ -1009,7 +1235,7 @@ function SearchField({
   type = "search",
   ...rest
 }) {
-  ensureStyle(STYLE_ID7, RULES7);
+  ensureStyle(STYLE_ID8, RULES8);
   const fieldStyle = {
     "--nb-search-font": tokens.fontSans,
     "--nb-search-fg": tokens.fg,
@@ -1032,8 +1258,8 @@ function SearchField({
     }
   );
 }
-var STYLE_ID8 = "nb-synapse-segmented";
-var RULES8 = `
+var STYLE_ID9 = "nb-synapse-segmented";
+var RULES9 = `
 .nb-seg {
   display: inline-flex;
   gap: 2px;
@@ -1068,7 +1294,7 @@ function SegmentedControl({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID8, RULES8);
+  ensureStyle(STYLE_ID9, RULES9);
   const trackStyle = {
     "--nb-seg-radius": tokens.radiusSm,
     "--nb-seg-track": tokens.bgSubtle,
@@ -1097,14 +1323,14 @@ function SegmentedControl({
     )) })
   );
 }
-var STYLE_ID9 = "nb-synapse-spinner";
-var RULES9 = `
+var STYLE_ID10 = "nb-synapse-spinner";
+var RULES10 = `
 @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_ID9, RULES9);
+  ensureStyle(STYLE_ID10, RULES10);
   const spinnerStyle = {
     display: "inline-block",
     flexShrink: 0,
@@ -1133,7 +1359,7 @@ var COLOR = {
   failed: tokens.danger,
   idle: tokens.fgFaint
 };
-var STYLE_ID10 = "nb-synapse-statusdot";
+var STYLE_ID11 = "nb-synapse-statusdot";
 var KEYFRAMES = `
 @keyframes nb-statusdot-pulse {
   0%   { box-shadow: 0 0 0 0 var(--nb-statusdot-ring); transform: scale(1); }
@@ -1155,7 +1381,7 @@ function StatusDot({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID10, KEYFRAMES);
+  ensureStyle(STYLE_ID11, KEYFRAMES);
   const dotColor = color ?? COLOR[status];
   const working = status === "working";
   const dotStyle = {
@@ -1178,8 +1404,8 @@ function StatusDot({
     }
   );
 }
-var STYLE_ID11 = "nb-synapse-table";
-var RULES10 = `
+var STYLE_ID12 = "nb-synapse-table";
+var RULES11 = `
 .nb-table { width: 100%; border-collapse: collapse; font-family: var(--nb-table-font); }
 .nb-table th, .nb-table td {
   padding: 0.55rem 0.75rem;
@@ -1209,7 +1435,7 @@ function Table({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID11, RULES10);
+  ensureStyle(STYLE_ID12, RULES11);
   const vars = {
     "--nb-table-font": tokens.fontSans,
     "--nb-table-fg": tokens.fg,
@@ -1275,8 +1501,8 @@ function Table({
     }
   );
 }
-var STYLE_ID12 = "nb-synapse-tabs";
-var RULES11 = `
+var STYLE_ID13 = "nb-synapse-tabs";
+var RULES12 = `
 .nb-tabs {
   display: flex;
   align-items: stretch;
@@ -1334,7 +1560,7 @@ function Tabs({
   onKeyDown: callerKeyDown,
   ...rest
 }) {
-  ensureStyle(STYLE_ID12, RULES11);
+  ensureStyle(STYLE_ID13, RULES12);
   const barRef = useRef(null);
   const barStyle = {
     "--nb-tabs-gap": "1.25rem",
@@ -1611,8 +1837,8 @@ function useSidebar() {
   if (!ctx) throw new Error("useSidebar must be used within <SidebarLayout>");
   return ctx;
 }
-var STYLE_ID13 = "nb-synapse-sidebarlayout";
-var RULES12 = `
+var STYLE_ID14 = "nb-synapse-sidebarlayout";
+var RULES13 = `
 .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; } }
@@ -1662,7 +1888,7 @@ function SidebarLayoutRoot({
 }
 function Sidebar({ style, children, ...rest }) {
   const { collapsed, mode, side, width, open, setOpen } = useSidebar();
-  ensureStyle(STYLE_ID13, RULES12);
+  ensureStyle(STYLE_ID14, RULES13);
   if (!collapsed) {
     const border = `${tokens.borderWidth} solid ${tokens.border}`;
     return /* @__PURE__ */ jsx(
@@ -1787,6 +2013,6 @@ function Trigger({ children, style, onClick, ...rest }) {
 }
 var SidebarLayout = Object.assign(SidebarLayoutRoot, { Sidebar, Main, Trigger });
 
-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 };
+export { AppFrame, Avatar, Badge, Breadcrumb, Button, Card, ConfirmDialog, 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