@nimblebrain/synapse 0.17.1 → 0.18.0

package/dist/ui/index.d.cts

@@ -30,7 +30,12 @@ interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, "children">
 }
 declare function Breadcrumb({ crumbs, separator, style, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
-type Variant = "primary" | "secondary" | "ghost";
+/**
+ * `danger` is for the verb that destroys something — Delete, Remove, Forget. It is
+ * filled like `primary`, so it is never the quiet option beside one, and red so the
+ * difference reads before the label does.
+ */
+type Variant = "primary" | "secondary" | "ghost" | "danger";
 type Size = "sm" | "md";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: Variant;
@@ -55,6 +60,27 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare function Card({ padding, interactive, style, className, children, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
 
+interface ConfirmDialogProps {
+    open: boolean;
+    /** Every dismissal path — Escape, the scrim, Cancel — calls this with `false`. */
+    onOpenChange: (open: boolean) => void;
+    /** Names the dialog (`aria-labelledby`). */
+    title: ReactNode;
+    /** One line under the title. Becomes the dialog's accessible description. */
+    description?: ReactNode;
+    /** What the action will do, and any control that shapes it. */
+    children?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Confirm's label while `onConfirm` is in flight. Defaults to `confirmLabel`. */
+    pendingLabel?: string;
+    /** Render Confirm as a `danger` button, and open with focus on Cancel. */
+    destructive?: boolean;
+    /** Resolve to close. Throw to stay open with the error's message shown. */
+    onConfirm: () => void | Promise<void>;
+}
+declare function ConfirmDialog({ open, onOpenChange, title, description, children, confirmLabel, cancelLabel, pendingLabel, destructive, onConfirm, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
+
 type Side$1 = "left" | "right" | "bottom";
 interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     open: boolean;
@@ -446,6 +472,7 @@ declare const tokens: {
     readonly borderStrong: "var(--color-border-secondary, #d1d5db)";
     readonly ring: "var(--color-ring-primary, #2563eb)";
     readonly danger: "var(--nb-color-danger, #dc2626)";
+    readonly dangerFg: "var(--nb-color-danger-foreground, #ffffff)";
     readonly success: "var(--nb-color-success, #059669)";
     readonly warning: "var(--nb-color-warning, #f59e0b)";
     readonly processing: "var(--nb-color-processing, #7c3aed)";
@@ -534,4 +561,4 @@ interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "color">
 /** Display heading using the heading font slot. Defaults to md, semibold. */
 declare function Heading({ size, weight, tone, as: As, style, children, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
 
-export { AppFrame, Avatar, Badge, type BadgeTone, Breadcrumb, Button, Card, type Column, type Crumb, Divider, Drawer, EmptyState, Heading, type HeadingSize, Inline, ListDetailLayout, ListRow, PageHeader, PageLayout, Pagination, Prose, SearchField, SegmentedControl, SidebarLayout, Spacer, Spinner, Stack, type Status, StatusDot, Table, Tabs, Text, TextLink, type TextSize, type Tokens, headingStyle, textStyle, tokens, useBreakpoint, useListDetail, useSidebar };
+export { AppFrame, Avatar, Badge, type BadgeTone, Breadcrumb, Button, Card, type Column, ConfirmDialog, type Crumb, Divider, Drawer, EmptyState, Heading, type HeadingSize, Inline, ListDetailLayout, ListRow, PageHeader, PageLayout, Pagination, Prose, SearchField, SegmentedControl, SidebarLayout, Spacer, Spinner, Stack, type Status, StatusDot, Table, Tabs, Text, TextLink, type TextSize, type Tokens, headingStyle, textStyle, tokens, useBreakpoint, useListDetail, useSidebar };

package/dist/ui/index.d.ts

@@ -30,7 +30,12 @@ interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, "children">
 }
 declare function Breadcrumb({ crumbs, separator, style, ...rest }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
-type Variant = "primary" | "secondary" | "ghost";
+/**
+ * `danger` is for the verb that destroys something — Delete, Remove, Forget. It is
+ * filled like `primary`, so it is never the quiet option beside one, and red so the
+ * difference reads before the label does.
+ */
+type Variant = "primary" | "secondary" | "ghost" | "danger";
 type Size = "sm" | "md";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: Variant;
@@ -55,6 +60,27 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare function Card({ padding, interactive, style, className, children, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
 
+interface ConfirmDialogProps {
+    open: boolean;
+    /** Every dismissal path — Escape, the scrim, Cancel — calls this with `false`. */
+    onOpenChange: (open: boolean) => void;
+    /** Names the dialog (`aria-labelledby`). */
+    title: ReactNode;
+    /** One line under the title. Becomes the dialog's accessible description. */
+    description?: ReactNode;
+    /** What the action will do, and any control that shapes it. */
+    children?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Confirm's label while `onConfirm` is in flight. Defaults to `confirmLabel`. */
+    pendingLabel?: string;
+    /** Render Confirm as a `danger` button, and open with focus on Cancel. */
+    destructive?: boolean;
+    /** Resolve to close. Throw to stay open with the error's message shown. */
+    onConfirm: () => void | Promise<void>;
+}
+declare function ConfirmDialog({ open, onOpenChange, title, description, children, confirmLabel, cancelLabel, pendingLabel, destructive, onConfirm, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
+
 type Side$1 = "left" | "right" | "bottom";
 interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onClick"> {
     open: boolean;
@@ -446,6 +472,7 @@ declare const tokens: {
     readonly borderStrong: "var(--color-border-secondary, #d1d5db)";
     readonly ring: "var(--color-ring-primary, #2563eb)";
     readonly danger: "var(--nb-color-danger, #dc2626)";
+    readonly dangerFg: "var(--nb-color-danger-foreground, #ffffff)";
     readonly success: "var(--nb-color-success, #059669)";
     readonly warning: "var(--nb-color-warning, #f59e0b)";
     readonly processing: "var(--nb-color-processing, #7c3aed)";
@@ -534,4 +561,4 @@ interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "color">
 /** Display heading using the heading font slot. Defaults to md, semibold. */
 declare function Heading({ size, weight, tone, as: As, style, children, ...rest }: HeadingProps): react_jsx_runtime.JSX.Element;
 
-export { AppFrame, Avatar, Badge, type BadgeTone, Breadcrumb, Button, Card, type Column, type Crumb, Divider, Drawer, EmptyState, Heading, type HeadingSize, Inline, ListDetailLayout, ListRow, PageHeader, PageLayout, Pagination, Prose, SearchField, SegmentedControl, SidebarLayout, Spacer, Spinner, Stack, type Status, StatusDot, Table, Tabs, Text, TextLink, type TextSize, type Tokens, headingStyle, textStyle, tokens, useBreakpoint, useListDetail, useSidebar };
+export { AppFrame, Avatar, Badge, type BadgeTone, Breadcrumb, Button, Card, type Column, ConfirmDialog, type Crumb, Divider, Drawer, EmptyState, Heading, type HeadingSize, Inline, ListDetailLayout, ListRow, PageHeader, PageLayout, Pagination, Prose, SearchField, SegmentedControl, SidebarLayout, Spacer, Spinner, Stack, type Status, StatusDot, Table, Tabs, Text, TextLink, type TextSize, type Tokens, headingStyle, textStyle, tokens, useBreakpoint, useListDetail, useSidebar };

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, Fragment as Fragment$1 } from 'react';
+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 +20,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 +293,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 +415,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 +718,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 +729,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 +965,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 +981,7 @@ function ListRow({
   className,
   ...rest
 }) {
-  ensureStyle(STYLE_ID4, RULES4);
+  ensureStyle(STYLE_ID5, RULES5);
   const rowStyle = {
     "--nb-listrow-hover": tokens.bgSubtle,
     display: "grid",
@@ -839,8 +1064,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 +1084,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 +1170,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 +1196,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 +1234,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 +1257,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 +1293,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 +1322,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 +1358,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 +1380,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 +1403,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 +1434,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 +1500,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 +1559,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 +1836,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 +1887,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 +2012,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