@nimblebrain/synapse 0.17.1 → 0.19.0

package/dist/ui/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var chunkRX6XCLFF_cjs = require('../chunk-RX6XCLFF.cjs');
+require('../chunk-Q7SFCCGT.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -22,6 +23,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)",
@@ -294,6 +296,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;
@@ -412,8 +418,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 = react.useRef(onEscape);
+  escapeRef.current = onEscape;
+  const initialFocusRef = react.useRef(initialFocus);
+  initialFocusRef.current = initialFocus;
+  react.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
+}) {
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID3, RULES3);
+  const panelRef = react.useRef(null);
+  const titleId = react.useId();
+  const descriptionId = react.useId();
+  const [pending, setPending] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  react.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 });
+  react.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "nb-confirm-scrim",
+        onClick: (e) => {
+          if (e.target === e.currentTarget) dismiss();
+        },
+        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: "1rem",
+                    fontSize: tokens.textSmSize,
+                    lineHeight: tokens.textSmLine
+                  },
+                  children
+                }
+              ) : null,
+              error ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  role: "alert",
+                  style: {
+                    margin: "0.75rem 0 0",
+                    fontSize: tokens.textSmSize,
+                    lineHeight: tokens.textSmLine,
+                    color: tokens.danger
+                  },
+                  children: error
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nb-confirm__actions", style: { marginTop: "1.25rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    size: "sm",
+                    "data-nb-confirm-cancel": "",
+                    disabled: pending,
+                    onClick: dismiss,
+                    children: cancelLabel
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.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);
@@ -440,18 +721,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 = react.createContext(null);
 function DrawerRoot({
   open,
@@ -463,54 +732,11 @@ function DrawerRoot({
   children,
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID3, RULES3);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID4, RULES4);
   const panelRef = react.useRef(null);
   const labelId = react.useId();
   const [hasTitle, setHasTitle] = react.useState(false);
-  react.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]);
-  react.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 = react.useMemo(() => ({ labelId, setHasTitle }), [labelId]);
   if (!open) return null;
   const isBottom = side === "bottom";
@@ -742,8 +968,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); }
@@ -758,7 +984,7 @@ function ListRow({
   className,
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID4, RULES4);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID5, RULES5);
   const rowStyle = {
     "--nb-listrow-hover": tokens.bgSubtle,
     display: "grid",
@@ -841,8 +1067,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;
@@ -861,7 +1087,7 @@ function PageHeader({
   style,
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID5, RULES5);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID6, RULES6);
   const descVars = descriptionLines > 0 ? { "--nb-ph-desc-lines": String(descriptionLines) } : {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
@@ -947,8 +1173,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};
@@ -973,15 +1199,15 @@ var RULES6 = `
 .nb-prose strong { font-weight: ${tokens.weightSemibold}; }
 `;
 function Prose({ html, children, className, ...rest }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID6, RULES6);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID7, RULES7);
   const cls = `nb-prose ${className ?? ""}`.trim();
   if (html !== void 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls, dangerouslySetInnerHTML: { __html: html }, ...rest });
   }
   return /* @__PURE__ */ jsxRuntime.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 {
@@ -1011,7 +1237,7 @@ function SearchField({
   type = "search",
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID7, RULES7);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID8, RULES8);
   const fieldStyle = {
     "--nb-search-font": tokens.fontSans,
     "--nb-search-fg": tokens.fg,
@@ -1034,8 +1260,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;
@@ -1070,7 +1296,7 @@ function SegmentedControl({
   className,
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID8, RULES8);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID9, RULES9);
   const trackStyle = {
     "--nb-seg-radius": tokens.radiusSm,
     "--nb-seg-track": tokens.bgSubtle,
@@ -1099,14 +1325,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 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID9, RULES9);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID10, RULES10);
   const spinnerStyle = {
     display: "inline-block",
     flexShrink: 0,
@@ -1135,7 +1361,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); }
@@ -1157,7 +1383,7 @@ function StatusDot({
   className,
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID10, KEYFRAMES);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID11, KEYFRAMES);
   const dotColor = color ?? COLOR[status];
   const working = status === "working";
   const dotStyle = {
@@ -1180,8 +1406,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;
@@ -1211,7 +1437,7 @@ function Table({
   className,
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID11, RULES10);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID12, RULES11);
   const vars = {
     "--nb-table-font": tokens.fontSans,
     "--nb-table-fg": tokens.fg,
@@ -1277,8 +1503,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;
@@ -1336,7 +1562,7 @@ function Tabs({
   onKeyDown: callerKeyDown,
   ...rest
 }) {
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID12, RULES11);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID13, RULES12);
   const barRef = react.useRef(null);
   const barStyle = {
     "--nb-tabs-gap": "1.25rem",
@@ -1613,8 +1839,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; } }
@@ -1664,7 +1890,7 @@ function SidebarLayoutRoot({
 }
 function Sidebar({ style, children, ...rest }) {
   const { collapsed, mode, side, width, open, setOpen } = useSidebar();
-  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID13, RULES12);
+  chunkRX6XCLFF_cjs.ensureStyle(STYLE_ID14, RULES13);
   if (!collapsed) {
     const border = `${tokens.borderWidth} solid ${tokens.border}`;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1795,6 +2021,7 @@ exports.Badge = Badge;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
 exports.Card = Card;
+exports.ConfirmDialog = ConfirmDialog;
 exports.Divider = Divider;
 exports.Drawer = Drawer;
 exports.EmptyState = EmptyState;