@nimblebrain/synapse 0.8.0 → 0.10.0

package/dist/ui/index.js

@@ -0,0 +1,1420 @@
+import { createContext, useRef, useId, useState, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/ui/components/Avatar.tsx
+
+// src/ui/tokens.ts
+var tokens = {
+  // ── Surfaces ──
+  bg: "var(--color-background-primary, #ffffff)",
+  bgRaised: "var(--color-background-secondary, #fafafa)",
+  bgSubtle: "var(--color-background-tertiary, #f3f4f6)",
+  // ── Text ──
+  fg: "var(--color-text-primary, #111827)",
+  fgMuted: "var(--color-text-secondary, #6b7280)",
+  fgFaint: "var(--color-text-tertiary, #9ca3af)",
+  accent: "var(--color-text-accent, #2563eb)",
+  accentFg: "var(--nb-color-accent-foreground, #ffffff)",
+  // ── Border / ring ──
+  border: "var(--color-border-primary, #e5e7eb)",
+  borderStrong: "var(--color-border-secondary, #d1d5db)",
+  ring: "var(--color-ring-primary, #2563eb)",
+  // ── Status / brand semantics ──
+  danger: "var(--nb-color-danger, #dc2626)",
+  success: "var(--nb-color-success, #059669)",
+  warning: "var(--nb-color-warning, #f59e0b)",
+  warm: "var(--nb-color-warm, #d4620a)",
+  warmLight: "var(--nb-color-warm-light, #fef5ee)",
+  processing: "var(--nb-color-processing, #7c3aed)",
+  processingLight: "var(--nb-color-processing-light, #f3eeff)",
+  infoLight: "var(--nb-color-info-light, #eef4ff)",
+  // ── Typography ──
+  fontSans: "var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, sans-serif)",
+  fontMono: "var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace)",
+  fontHeading: "var(--nb-font-heading, Georgia, 'Times New Roman', serif)",
+  weightNormal: "var(--font-weight-normal, 400)",
+  weightMedium: "var(--font-weight-medium, 500)",
+  weightSemibold: "var(--font-weight-semibold, 600)",
+  weightBold: "var(--font-weight-bold, 700)",
+  // ── Type scale (size + line-height pairs) ──
+  textXsSize: "var(--font-text-xs-size, 0.75rem)",
+  textXsLine: "var(--font-text-xs-line-height, 1rem)",
+  textSmSize: "var(--font-text-sm-size, 0.875rem)",
+  textSmLine: "var(--font-text-sm-line-height, 1.25rem)",
+  textBaseSize: "var(--font-text-base-size, 1rem)",
+  textBaseLine: "var(--font-text-base-line-height, 1.5rem)",
+  textLgSize: "var(--font-text-lg-size, 1.125rem)",
+  textLgLine: "var(--font-text-lg-line-height, 1.75rem)",
+  headingSmSize: "var(--font-heading-sm-size, 1.25rem)",
+  headingSmLine: "var(--font-heading-sm-line-height, 1.75rem)",
+  headingMdSize: "var(--font-heading-md-size, 1.5rem)",
+  headingMdLine: "var(--font-heading-md-line-height, 2rem)",
+  headingLgSize: "var(--font-heading-lg-size, 2rem)",
+  headingLgLine: "var(--font-heading-lg-line-height, 2.5rem)",
+  // ── Radius / border width ──
+  radiusXs: "var(--border-radius-xs, 0.25rem)",
+  radiusSm: "var(--border-radius-sm, 0.5rem)",
+  radiusMd: "var(--border-radius-md, 0.75rem)",
+  radiusLg: "var(--border-radius-lg, 1rem)",
+  radiusXl: "var(--border-radius-xl, 1.5rem)",
+  borderWidth: "var(--border-width-regular, 1px)",
+  // ── Shadows ──
+  shadowHairline: "var(--shadow-hairline, 0 0 0 1px rgba(0,0,0,0.06))",
+  shadowSm: "var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05))",
+  shadowMd: "var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1))",
+  shadowLg: "var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1))"
+};
+var TEXT_SCALE = {
+  xs: { fontSize: tokens.textXsSize, lineHeight: tokens.textXsLine },
+  sm: { fontSize: tokens.textSmSize, lineHeight: tokens.textSmLine },
+  base: { fontSize: tokens.textBaseSize, lineHeight: tokens.textBaseLine },
+  lg: { fontSize: tokens.textLgSize, lineHeight: tokens.textLgLine }
+};
+var HEADING_SCALE = {
+  sm: { fontSize: tokens.headingSmSize, lineHeight: tokens.headingSmLine },
+  md: { fontSize: tokens.headingMdSize, lineHeight: tokens.headingMdLine },
+  lg: { fontSize: tokens.headingLgSize, lineHeight: tokens.headingLgLine }
+};
+function textStyle(size) {
+  return TEXT_SCALE[size];
+}
+function headingStyle(size) {
+  return HEADING_SCALE[size];
+}
+function initialsOf(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const first = parts[0] ?? "";
+  if (parts.length === 1) return first.charAt(0).toUpperCase();
+  const last = parts[parts.length - 1] ?? "";
+  return (first.charAt(0) + last.charAt(0)).toUpperCase();
+}
+function Avatar({ name, src, size = 28, style, ...rest }) {
+  const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [src]);
+  const showImage = Boolean(src) && !failed;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        overflow: "hidden",
+        background: tokens.bgSubtle,
+        color: tokens.fgMuted,
+        fontFamily: tokens.fontSans,
+        fontSize: Math.round(size * 0.4),
+        fontWeight: tokens.weightSemibold,
+        userSelect: "none",
+        ...style
+      },
+      ...rest,
+      children: showImage ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: name,
+          width: size,
+          height: size,
+          onError: () => setFailed(true),
+          style: { width: "100%", height: "100%", objectFit: "cover" }
+        }
+      ) : initialsOf(name)
+    }
+  );
+}
+var TONE = {
+  neutral: { bg: tokens.bgSubtle, fg: tokens.fgMuted },
+  accent: { bg: tokens.infoLight, fg: tokens.accent },
+  success: { bg: `color-mix(in oklab, ${tokens.success} 14%, transparent)`, fg: tokens.success },
+  warning: { bg: `color-mix(in oklab, ${tokens.warning} 14%, transparent)`, fg: tokens.warning },
+  danger: { bg: `color-mix(in oklab, ${tokens.danger} 14%, transparent)`, fg: tokens.danger },
+  processing: { bg: tokens.processingLight, fg: tokens.processing },
+  warm: { bg: tokens.warmLight, fg: tokens.warm }
+};
+function Badge({ tone = "neutral", style, children, ...rest }) {
+  const { bg, fg } = TONE[tone];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.25rem",
+        padding: "0.1rem 0.45rem",
+        borderRadius: tokens.radiusXs,
+        background: bg,
+        color: fg,
+        fontFamily: tokens.fontSans,
+        fontSize: tokens.textXsSize,
+        lineHeight: tokens.textXsLine,
+        fontWeight: tokens.weightSemibold,
+        letterSpacing: "0.02em",
+        textTransform: "uppercase",
+        whiteSpace: "nowrap",
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+
+// src/ui/internal/inject-style.ts
+function ensureStyle(id, css) {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(id)) return;
+  const style = document.createElement("style");
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+var STYLE_ID = "nb-synapse-button";
+var RULES = `
+.nb-btn {
+  --nb-btn-bg: transparent;
+  --nb-btn-bg-hover: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  border: var(--nb-btn-border, none);
+  border-radius: var(--nb-btn-radius);
+  background: var(--nb-btn-bg);
+  color: var(--nb-btn-fg);
+  font-family: var(--nb-btn-font);
+  font-weight: var(--nb-btn-weight);
+  cursor: pointer;
+  transition: background 130ms ease, color 130ms ease, opacity 130ms ease;
+  white-space: nowrap;
+}
+.nb-btn:hover { background: var(--nb-btn-bg-hover); }
+.nb-btn:active { transform: translateY(0.5px); }
+.nb-btn:disabled { opacity: 0.5; cursor: default; }
+.nb-btn:disabled:hover { background: var(--nb-btn-bg); }
+.nb-textlink {
+  border: none;
+  background: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: var(--nb-tl-font);
+  color: var(--nb-tl-fg);
+  transition: color 130ms ease, opacity 130ms ease;
+}
+.nb-textlink:hover { color: var(--nb-tl-fg-hover); }
+.nb-textlink:disabled { opacity: 0.45; cursor: default; }
+`;
+var SIZE_PAD = {
+  sm: "0.3rem 0.6rem",
+  md: "0.45rem 0.85rem"
+};
+function Button({
+  variant = "primary",
+  size = "md",
+  style,
+  className,
+  children,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID, RULES);
+  const vars = {
+    "--nb-btn-radius": tokens.radiusSm,
+    "--nb-btn-font": tokens.fontSans,
+    "--nb-btn-weight": tokens.weightMedium
+  };
+  if (variant === "primary") {
+    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 === "secondary") {
+    vars["--nb-btn-bg"] = tokens.bgSubtle;
+    vars["--nb-btn-bg-hover"] = tokens.bgRaised;
+    vars["--nb-btn-fg"] = tokens.fg;
+    vars["--nb-btn-border"] = `${tokens.borderWidth} solid ${tokens.border}`;
+  } else {
+    vars["--nb-btn-bg"] = "transparent";
+    vars["--nb-btn-bg-hover"] = tokens.bgSubtle;
+    vars["--nb-btn-fg"] = tokens.fg;
+  }
+  const btnStyle = {
+    ...vars,
+    padding: SIZE_PAD[size],
+    fontSize: size === "sm" ? tokens.textSmSize : tokens.textBaseSize,
+    lineHeight: size === "sm" ? tokens.textSmLine : tokens.textBaseLine,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("button", { type: "button", className: `nb-btn ${className ?? ""}`.trim(), style: btnStyle, ...rest, children });
+}
+function TextLink({ tone = "muted", style, className, children, ...rest }) {
+  ensureStyle(STYLE_ID, RULES);
+  const resting = tone === "danger" ? tokens.danger : tone === "default" ? tokens.fg : tokens.fgMuted;
+  const hover = tone === "danger" ? tokens.danger : tokens.accent;
+  const linkStyle = {
+    "--nb-tl-font": tokens.fontSans,
+    "--nb-tl-fg": resting,
+    "--nb-tl-fg-hover": hover,
+    fontSize: tokens.textXsSize,
+    lineHeight: tokens.textXsLine,
+    letterSpacing: "0.02em",
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `nb-textlink ${className ?? ""}`.trim(),
+      style: linkStyle,
+      ...rest,
+      children
+    }
+  );
+}
+var STYLE_ID2 = "nb-synapse-card";
+var RULES2 = `
+.nb-card--interactive {
+  cursor: pointer;
+  transition: box-shadow 140ms ease, border-color 140ms ease;
+}
+.nb-card--interactive:hover {
+  box-shadow: var(--nb-card-shadow-hover);
+  border-color: var(--nb-card-border-hover);
+}
+`;
+function Card({
+  padding = "0.875rem",
+  interactive = false,
+  style,
+  className,
+  children,
+  ...rest
+}) {
+  if (interactive) ensureStyle(STYLE_ID2, RULES2);
+  const cardStyle = {
+    background: tokens.bgRaised,
+    border: `${tokens.borderWidth} solid ${tokens.border}`,
+    borderRadius: tokens.radiusMd,
+    padding,
+    boxShadow: tokens.shadowSm,
+    "--nb-card-shadow-hover": tokens.shadowMd,
+    "--nb-card-border-hover": tokens.borderStrong,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: interactive ? `nb-card--interactive ${className ?? ""}`.trim() : className,
+      style: cardStyle,
+      ...rest,
+      children
+    }
+  );
+}
+var STYLE_ID3 = "nb-synapse-drawer";
+var RULES3 = `
+.nb-drawer {
+  margin: 0; padding: 0; border: none; max-width: 92%;
+  height: 100%; max-height: 100%; display: flex; flex-direction: column;
+}
+.nb-drawer--right { margin-left: auto; }
+.nb-drawer--left { margin-right: auto; }
+.nb-drawer--bottom {
+  margin-top: auto; width: 100%; max-width: 100%;
+  height: auto; max-height: 92%;
+}
+.nb-drawer--right[open] { animation: nb-drawer-in-right 240ms cubic-bezier(0.2, 0, 0, 1); }
+.nb-drawer--left[open] { animation: nb-drawer-in-left 240ms cubic-bezier(0.2, 0, 0, 1); }
+.nb-drawer--bottom[open] { animation: nb-drawer-in-bottom 240ms cubic-bezier(0.2, 0, 0, 1); }
+.nb-drawer::backdrop { background: rgba(0, 0, 0, 0.32); }
+.nb-drawer[open]::backdrop { animation: nb-drawer-fade 200ms ease; }
+@keyframes nb-drawer-in-right { from { transform: translateX(100%); } }
+@keyframes nb-drawer-in-left { from { transform: translateX(-100%); } }
+@keyframes nb-drawer-in-bottom { from { transform: translateY(100%); } }
+@keyframes nb-drawer-fade { from { opacity: 0; } }
+.nb-drawer-iconbtn { width: 28px; height: 28px; }
+@media (pointer: coarse) {
+  .nb-drawer-iconbtn { min-width: 44px; min-height: 44px; }
+}
+`;
+var DrawerContext = createContext(null);
+function DrawerRoot({
+  open,
+  onClose,
+  onEscape,
+  side = "right",
+  width = 480,
+  style,
+  children,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID3, RULES3);
+  const dialogRef = useRef(null);
+  const labelId = useId();
+  const [hasTitle, setHasTitle] = useState(false);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog || typeof dialog.showModal !== "function") return;
+    if (open && !dialog.open) dialog.showModal();
+    else if (!open && dialog.open) dialog.close();
+  }, [open]);
+  const isBottom = side === "bottom";
+  const panelStyle = {
+    ...isBottom ? { width: "100%", maxWidth: "100%" } : { width },
+    background: tokens.bg,
+    color: tokens.fg,
+    boxShadow: tokens.shadowLg,
+    ...side === "right" ? { borderLeft: `${tokens.borderWidth} solid ${tokens.border}` } : side === "left" ? { borderRight: `${tokens.borderWidth} solid ${tokens.border}` } : { borderTop: `${tokens.borderWidth} solid ${tokens.border}` },
+    ...style
+  };
+  const ctxValue = useMemo(() => ({ labelId, setHasTitle }), [labelId]);
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      className: `nb-drawer nb-drawer--${side}`,
+      style: panelStyle,
+      "aria-labelledby": hasTitle ? labelId : void 0,
+      onCancel: (e) => {
+        e.preventDefault();
+        (onEscape ?? onClose)();
+      },
+      onClick: (e) => {
+        if (e.target === dialogRef.current) onClose();
+      },
+      ...rest,
+      children
+    }
+  ) });
+}
+function Header({ title, onBack, actions, onClose, style, children, ...rest }) {
+  const ctx = useContext(DrawerContext);
+  const hasTitle = title != null;
+  useEffect(() => {
+    if (!ctx || !hasTitle) return;
+    ctx.setHasTitle(true);
+    return () => ctx.setHasTitle(false);
+  }, [ctx, hasTitle]);
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      style: {
+        flexShrink: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: "0.75rem",
+        padding: "0.875rem 1rem",
+        borderBottom: `${tokens.borderWidth} solid ${tokens.border}`,
+        fontFamily: tokens.fontSans,
+        fontWeight: tokens.weightSemibold,
+        color: tokens.fg,
+        ...style
+      },
+      ...rest,
+      children: [
+        onBack ? /* @__PURE__ */ jsx(IconButton, { label: "Back", onClick: onBack, children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10 3L5 8l5 5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) : null,
+        hasTitle ? /* @__PURE__ */ jsx(
+          "h2",
+          {
+            id: ctx?.labelId,
+            style: {
+              flex: 1,
+              minWidth: 0,
+              margin: 0,
+              fontFamily: tokens.fontSans,
+              fontSize: tokens.textBaseSize,
+              lineHeight: tokens.textBaseLine,
+              fontWeight: tokens.weightSemibold,
+              color: tokens.fg,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            },
+            children: title
+          }
+        ) : /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children }),
+        actions ? /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", flexShrink: 0 }, children: actions }) : null,
+        onClose ? /* @__PURE__ */ jsx(IconButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M4 4l8 8M12 4l-8 8",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+function IconButton({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      onClick,
+      className: "nb-drawer-iconbtn",
+      style: {
+        flexShrink: 0,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: "none",
+        background: "transparent",
+        color: tokens.fgMuted,
+        cursor: "pointer",
+        borderRadius: tokens.radiusSm
+      },
+      children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children })
+    }
+  );
+}
+function Body({ style, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", padding: "1rem", ...style }, ...rest, children });
+}
+function Footer({ style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      style: {
+        flexShrink: 0,
+        padding: "0.75rem 1rem",
+        borderTop: `${tokens.borderWidth} solid ${tokens.border}`,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+var Drawer = Object.assign(DrawerRoot, { Header, Body, Footer });
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function flexStyle(direction, { gap, align, justify, wrap }) {
+  return {
+    display: "flex",
+    flexDirection: direction,
+    gap,
+    alignItems: align ? ALIGN[align] : void 0,
+    justifyContent: justify ? JUSTIFY[justify] : void 0,
+    flexWrap: wrap ? "wrap" : void 0
+  };
+}
+function Stack({ gap, align, justify, wrap, style, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { style: { ...flexStyle("column", { gap, align, justify, wrap }), ...style }, ...rest, children });
+}
+function Inline({
+  gap,
+  align = "center",
+  justify,
+  wrap,
+  style,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx("div", { style: { ...flexStyle("row", { gap, align, justify, wrap }), ...style }, ...rest, children });
+}
+function Spacer({ style, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { style: { flex: 1, ...style }, ...rest });
+}
+function Divider({ orientation = "horizontal", style, ...rest }) {
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        flexShrink: 0,
+        background: tokens.border,
+        ...isVertical ? { width: tokens.borderWidth, alignSelf: "stretch" } : { height: tokens.borderWidth, width: "100%" },
+        ...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,
+    {
+      align: "center",
+      gap: "0.5rem",
+      style: {
+        textAlign: "center",
+        padding: "4rem 1.5rem",
+        color: tokens.fgMuted,
+        ...style
+      },
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { style: { color: tokens.fgFaint, marginBottom: "0.25rem" }, children: icon }) : null,
+        title ? /* @__PURE__ */ jsx(Heading, { size: "sm", children: title }) : null,
+        description ? /* @__PURE__ */ jsx(Text, { size: "sm", tone: "muted", style: { maxWidth: 360 }, children: description }) : null,
+        action ? /* @__PURE__ */ jsx("div", { style: { marginTop: "0.75rem" }, children: action }) : null
+      ]
+    }
+  );
+}
+var STYLE_ID4 = "nb-synapse-listrow";
+var RULES4 = `
+.nb-listrow { transition: background 140ms ease; }
+.nb-listrow--interactive { cursor: pointer; }
+.nb-listrow--interactive:hover { background: var(--nb-listrow-hover); }
+`;
+function ListRow({
+  title,
+  meta,
+  leading,
+  trailing,
+  interactive = false,
+  style,
+  className,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID4, RULES4);
+  const rowStyle = {
+    "--nb-listrow-hover": tokens.bgSubtle,
+    display: "grid",
+    gridTemplateColumns: `${leading ? "auto " : ""}minmax(0, 1fr)${trailing ? " auto" : ""}`,
+    columnGap: "0.75rem",
+    alignItems: "baseline",
+    padding: "0.65rem 0.75rem",
+    borderRadius: tokens.radiusSm,
+    ...style
+  };
+  const interactiveProps = interactive ? {
+    role: "button",
+    tabIndex: 0,
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.currentTarget.click();
+      }
+    }
+  } : {};
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `nb-listrow ${interactive ? "nb-listrow--interactive" : ""} ${className ?? ""}`.trim(),
+      style: rowStyle,
+      ...interactiveProps,
+      ...rest,
+      children: [
+        leading ? /* @__PURE__ */ jsx("div", { style: { alignSelf: "center", display: "flex" }, children: leading }) : null,
+        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                fontFamily: tokens.fontSans,
+                fontSize: tokens.textBaseSize,
+                lineHeight: tokens.textBaseLine,
+                fontWeight: tokens.weightMedium,
+                color: tokens.fg,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: title
+            }
+          ),
+          meta ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                marginTop: "0.15rem",
+                fontFamily: tokens.fontSans,
+                fontSize: tokens.textXsSize,
+                lineHeight: tokens.textXsLine,
+                color: tokens.fgMuted,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: meta
+            }
+          ) : null
+        ] }),
+        trailing ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              alignSelf: "center",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              fontSize: tokens.textXsSize,
+              color: tokens.fgMuted,
+              whiteSpace: "nowrap"
+            },
+            children: trailing
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Pagination({ page, pageCount, onChange, style, ...rest }) {
+  const total = Math.max(1, pageCount);
+  const atStart = page <= 1;
+  const atEnd = page >= total;
+  return /* @__PURE__ */ jsxs(
+    Inline,
+    {
+      justify: "between",
+      style: {
+        fontFamily: tokens.fontSans,
+        fontSize: tokens.textXsSize,
+        color: tokens.fgMuted,
+        letterSpacing: "0.02em",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("span", { style: { fontVariantNumeric: "tabular-nums" }, children: [
+          "Page ",
+          page,
+          " of ",
+          total
+        ] }),
+        /* @__PURE__ */ jsxs(Inline, { gap: "1rem", children: [
+          /* @__PURE__ */ jsx(TextLink, { disabled: atStart, onClick: () => onChange(page - 1), children: "\u2190 Prev" }),
+          /* @__PURE__ */ jsx(TextLink, { disabled: atEnd, onClick: () => onChange(page + 1), children: "Next \u2192" })
+        ] })
+      ]
+    }
+  );
+}
+var STYLE_ID5 = "nb-synapse-prose";
+var RULES5 = `
+.nb-prose {
+  font-family: ${tokens.fontSans};
+  font-size: ${tokens.textBaseSize};
+  line-height: 1.7;
+  color: ${tokens.fg};
+}
+.nb-prose > :first-child { margin-top: 0; }
+.nb-prose > :last-child { margin-bottom: 0; }
+.nb-prose h1, .nb-prose h2 { font-family: ${tokens.fontHeading}; letter-spacing: -0.015em; color: ${tokens.fg}; }
+.nb-prose h1 { font-size: ${tokens.headingMdSize}; line-height: ${tokens.headingMdLine}; margin: 2rem 0 0.75rem; }
+.nb-prose h2 { font-size: ${tokens.headingSmSize}; line-height: ${tokens.headingSmLine}; margin: 1.75rem 0 0.5rem; }
+.nb-prose h3 { font-size: ${tokens.textBaseSize}; font-weight: ${tokens.weightSemibold}; margin: 1.5rem 0 0.35rem; color: ${tokens.fg}; }
+.nb-prose p { margin: 0 0 1rem; }
+.nb-prose ul, .nb-prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
+.nb-prose li { margin: 0.25rem 0; }
+.nb-prose a { color: ${tokens.accent}; text-decoration: underline; text-underline-offset: 2px; }
+.nb-prose blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 2px solid ${tokens.accent}; color: ${tokens.fgMuted}; font-style: italic; }
+.nb-prose code { font-family: ${tokens.fontMono}; font-size: 0.88em; padding: 0.08rem 0.32rem; border-radius: ${tokens.radiusXs}; background: ${tokens.bgSubtle}; }
+.nb-prose pre { font-family: ${tokens.fontMono}; font-size: ${tokens.textSmSize}; line-height: 1.55; margin: 0 0 1.25rem; padding: 0.875rem 1rem; background: ${tokens.bgSubtle}; border-radius: ${tokens.radiusSm}; overflow-x: auto; }
+.nb-prose pre code { padding: 0; background: none; }
+.nb-prose hr { border: none; border-top: 1px solid ${tokens.border}; margin: 2rem 0; }
+.nb-prose strong { font-weight: ${tokens.weightSemibold}; }
+`;
+function Prose({ html, children, className, ...rest }) {
+  ensureStyle(STYLE_ID5, RULES5);
+  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 = `
+.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 {
+  border: none;
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  padding: 0.3rem 0.1rem;
+  transition: border-color 160ms ease;
+}
+.nb-search--underline:focus { border-bottom-color: var(--nb-search-accent); }
+.nb-search--boxed {
+  border: 1px solid var(--nb-search-border);
+  border-radius: var(--nb-search-radius);
+  background: var(--nb-search-bg);
+  padding: 0.4rem 0.6rem;
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+.nb-search--boxed:focus {
+  border-color: var(--nb-search-accent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--nb-search-accent) 18%, transparent);
+}
+`;
+function SearchField({
+  variant = "underline",
+  style,
+  className,
+  type = "search",
+  ...rest
+}) {
+  ensureStyle(STYLE_ID6, RULES6);
+  const fieldStyle = {
+    "--nb-search-font": tokens.fontSans,
+    "--nb-search-fg": tokens.fg,
+    "--nb-search-placeholder": tokens.fgFaint,
+    "--nb-search-accent": tokens.accent,
+    "--nb-search-border": tokens.border,
+    "--nb-search-bg": tokens.bgSubtle,
+    "--nb-search-radius": tokens.radiusSm,
+    fontSize: tokens.textSmSize,
+    lineHeight: tokens.textSmLine,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      className: `nb-search nb-search--${variant} ${className ?? ""}`.trim(),
+      style: fieldStyle,
+      ...rest
+    }
+  );
+}
+var STYLE_ID7 = "nb-synapse-segmented";
+var RULES7 = `
+.nb-seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border-radius: var(--nb-seg-radius);
+  background: var(--nb-seg-track);
+}
+.nb-seg__btn {
+  border: none;
+  background: transparent;
+  color: var(--nb-seg-fg);
+  font-family: var(--nb-seg-font);
+  font-weight: var(--nb-seg-weight);
+  padding: 0.25rem 0.7rem;
+  border-radius: calc(var(--nb-seg-radius) - 2px);
+  cursor: pointer;
+  transition: color 130ms ease, background 130ms ease;
+  white-space: nowrap;
+}
+.nb-seg__btn:hover:not([aria-pressed="true"]) { color: var(--nb-seg-fg-strong); }
+.nb-seg__btn[aria-pressed="true"] {
+  background: var(--nb-seg-active-bg);
+  color: var(--nb-seg-fg-strong);
+  box-shadow: var(--nb-seg-active-shadow);
+}
+`;
+function SegmentedControl({
+  options,
+  value,
+  onChange,
+  style,
+  className,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID7, RULES7);
+  const trackStyle = {
+    "--nb-seg-radius": tokens.radiusSm,
+    "--nb-seg-track": tokens.bgSubtle,
+    "--nb-seg-fg": tokens.fgMuted,
+    "--nb-seg-fg-strong": tokens.fg,
+    "--nb-seg-font": tokens.fontSans,
+    "--nb-seg-weight": tokens.weightMedium,
+    "--nb-seg-active-bg": tokens.bgRaised,
+    "--nb-seg-active-shadow": tokens.shadowSm,
+    fontSize: tokens.textSmSize,
+    lineHeight: tokens.textSmLine,
+    ...style
+  };
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" with aria-label is the correct grouping for a set of toggle buttons; <fieldset> would impose form semantics this control doesn't have.
+    /* @__PURE__ */ jsx("div", { className: `nb-seg ${className ?? ""}`.trim(), role: "group", style: trackStyle, ...rest, children: options.map((opt) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "nb-seg__btn",
+        "aria-pressed": opt.value === value,
+        onClick: () => onChange(opt.value),
+        children: opt.label
+      },
+      opt.value
+    )) })
+  );
+}
+var STYLE_ID8 = "nb-synapse-spinner";
+var RULES8 = `
+@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);
+  const spinnerStyle = {
+    display: "inline-block",
+    flexShrink: 0,
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    border: `2px solid ${tokens.border}`,
+    borderTopColor: color ?? tokens.accent,
+    boxSizing: "border-box",
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `nb-spinner ${className ?? ""}`.trim(),
+      role: "status",
+      "aria-label": "Loading",
+      style: spinnerStyle,
+      ...rest
+    }
+  );
+}
+var COLOR = {
+  working: tokens.accent,
+  completed: tokens.success,
+  failed: tokens.danger,
+  idle: tokens.fgFaint
+};
+var STYLE_ID9 = "nb-synapse-statusdot";
+var KEYFRAMES = `
+@keyframes nb-statusdot-pulse {
+  0%   { box-shadow: 0 0 0 0 var(--nb-statusdot-ring); transform: scale(1); }
+  70%  { box-shadow: 0 0 0 7px transparent; transform: scale(1.15); }
+  100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
+}
+.nb-statusdot--working {
+  animation: nb-statusdot-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .nb-statusdot--working { animation: none; box-shadow: 0 0 0 2px var(--nb-statusdot-ring); }
+}
+`;
+function StatusDot({
+  status = "idle",
+  color,
+  size = 8,
+  style,
+  className,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID9, KEYFRAMES);
+  const dotColor = color ?? COLOR[status];
+  const working = status === "working";
+  const dotStyle = {
+    display: "inline-block",
+    flexShrink: 0,
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    background: dotColor,
+    // Ring color for the pulse keyframe — a faded copy of the dot color.
+    "--nb-statusdot-ring": `color-mix(in oklab, ${dotColor} 45%, transparent)`,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: working ? `nb-statusdot--working ${className ?? ""}`.trim() : className,
+      style: dotStyle,
+      ...rest
+    }
+  );
+}
+var STYLE_ID10 = "nb-synapse-table";
+var RULES9 = `
+.nb-table { width: 100%; border-collapse: collapse; font-family: var(--nb-table-font); }
+.nb-table th, .nb-table td {
+  padding: 0.55rem 0.75rem;
+  border-bottom: var(--nb-table-border);
+  font-size: var(--nb-table-size); line-height: var(--nb-table-line);
+}
+.nb-table thead th {
+  position: sticky; top: 0; z-index: 1;
+  background: var(--nb-table-head-bg);
+  color: var(--nb-table-muted);
+  font-weight: var(--nb-table-semibold);
+  font-size: var(--nb-table-xs); text-align: left;
+  text-transform: uppercase; letter-spacing: 0.04em;
+}
+.nb-table tbody td { color: var(--nb-table-fg); }
+.nb-table tbody tr.nb-table__row--clickable { cursor: pointer; }
+.nb-table tbody tr.nb-table__row--clickable:hover { background: var(--nb-table-hover); }
+`;
+function Table({
+  data,
+  columns,
+  rowKey,
+  onRowClick,
+  empty,
+  style,
+  className,
+  ...rest
+}) {
+  ensureStyle(STYLE_ID10, RULES9);
+  const vars = {
+    "--nb-table-font": tokens.fontSans,
+    "--nb-table-fg": tokens.fg,
+    "--nb-table-muted": tokens.fgMuted,
+    "--nb-table-head-bg": tokens.bg,
+    "--nb-table-hover": tokens.bgSubtle,
+    "--nb-table-border": `${tokens.borderWidth} solid ${tokens.border}`,
+    "--nb-table-size": tokens.textSmSize,
+    "--nb-table-line": tokens.textSmLine,
+    "--nb-table-xs": tokens.textXsSize,
+    "--nb-table-semibold": tokens.weightSemibold
+  };
+  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: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((col) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        style: { width: col.width, textAlign: col.align ?? "left" },
+        children: col.header
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.map((row, i) => {
+      const clickable = Boolean(onRowClick);
+      return /* @__PURE__ */ jsx(
+        "tr",
+        {
+          className: clickable ? "nb-table__row--clickable" : void 0,
+          tabIndex: clickable ? 0 : void 0,
+          onClick: clickable ? () => onRowClick?.(row, i) : void 0,
+          onKeyDown: clickable ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onRowClick?.(row, i);
+            }
+          } : void 0,
+          children: columns.map((col) => /* @__PURE__ */ jsx("td", { style: { textAlign: col.align ?? "left" }, children: col.render(row, i) }, col.key))
+        },
+        rowKey(row, i)
+      );
+    }) })
+  ] });
+}
+var READING_MAX = 760;
+var ContentWidthCtx = createContext("full");
+function columnStyle(width) {
+  return width === "reading" ? { maxWidth: READING_MAX, marginInline: "auto", width: "100%" } : {};
+}
+function AppFrameRoot({ contentWidth = "full", style, children, ...rest }) {
+  return /* @__PURE__ */ jsx(ContentWidthCtx.Provider, { value: contentWidth, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0,
+        background: tokens.bg,
+        color: tokens.fg,
+        fontFamily: tokens.fontSans,
+        ...style
+      },
+      ...rest,
+      children
+    }
+  ) });
+}
+function Header2({ style, children, ...rest }) {
+  const width = useContext(ContentWidthCtx);
+  return /* @__PURE__ */ jsx("header", { style: { flexShrink: 0, padding: "1.25rem 1.5rem 0.75rem", ...style }, ...rest, children: /* @__PURE__ */ jsx("div", { style: columnStyle(width), children }) });
+}
+function Body2({ bleed = false, style, children, ...rest }) {
+  const width = useContext(ContentWidthCtx);
+  if (bleed) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          minHeight: 0,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0, overflowY: "auto", ...style }, ...rest, children: /* @__PURE__ */ jsx("div", { style: { ...columnStyle(width), padding: "0.75rem 1.5rem 1.5rem" }, children }) });
+}
+function Footer2({ style, children, ...rest }) {
+  const width = useContext(ContentWidthCtx);
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      style: {
+        flexShrink: 0,
+        padding: "0.75rem 1.5rem",
+        borderTop: `${tokens.borderWidth} solid ${tokens.border}`,
+        ...style
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", { style: columnStyle(width), children })
+    }
+  );
+}
+var AppFrame = Object.assign(AppFrameRoot, { Header: Header2, Body: Body2, Footer: Footer2 });
+function useBreakpoint(breakpoint) {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setWidth(el.getBoundingClientRect().width);
+    if (typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const w = entry?.borderBoxSize?.[0]?.inlineSize ?? entry?.contentRect.width;
+      if (typeof w === "number") setWidth(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return { ref, isNarrow: width !== null && width < breakpoint };
+}
+var ListDetailCtx = createContext(null);
+function useListDetail() {
+  const ctx = useContext(ListDetailCtx);
+  if (!ctx) throw new Error("useListDetail must be used within <ListDetailLayout>");
+  return ctx;
+}
+function ListDetailLayoutRoot({
+  selected = false,
+  onBack,
+  listWidth = 320,
+  breakpoint = 720,
+  style,
+  children,
+  ...rest
+}) {
+  const { ref, isNarrow } = useBreakpoint(breakpoint);
+  return /* @__PURE__ */ jsx(ListDetailCtx.Provider, { value: { collapsed: isNarrow, selected, listWidth, onBack }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      style: { display: "flex", flexDirection: "row", height: "100%", minHeight: 0, ...style },
+      ...rest,
+      children
+    }
+  ) });
+}
+function List({ style, children, ...rest }) {
+  const { collapsed, selected, listWidth } = useListDetail();
+  if (collapsed && selected) return null;
+  const border = `${tokens.borderWidth} solid ${tokens.border}`;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      style: {
+        overflowY: "auto",
+        ...collapsed ? { flex: 1, minWidth: 0 } : { width: listWidth, flexShrink: 0, borderRight: border },
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+function Detail({ style, children, ...rest }) {
+  const { collapsed, selected } = useListDetail();
+  if (collapsed && !selected) return null;
+  return /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0, minHeight: 0, overflowY: "auto", ...style }, ...rest, children });
+}
+function Back({ children, style }) {
+  const { collapsed, selected, onBack } = useListDetail();
+  if (!collapsed || !selected) return null;
+  return /* @__PURE__ */ jsx(TextLink, { onClick: () => onBack?.(), style: { marginBottom: "0.5rem", ...style }, children: children ?? "\u2190 Back" });
+}
+var ListDetailLayout = Object.assign(ListDetailLayoutRoot, { List, Detail, Back });
+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 = `
+.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; } }
+@media (prefers-reduced-motion: reduce) {
+  .nb-sidebar-drawer { transition: none; }
+  .nb-sidebar-scrim { animation: none; }
+}
+`;
+function SidebarLayoutRoot({
+  side = "left",
+  width = 240,
+  breakpoint = 640,
+  collapseMode = "reflow",
+  style,
+  children,
+  ...rest
+}) {
+  const { ref, isNarrow } = useBreakpoint(breakpoint);
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+  useEffect(() => {
+    if (!isNarrow && open) setOpen(false);
+  }, [isNarrow, open]);
+  const reflowed = isNarrow && collapseMode === "reflow";
+  const rootStyle = {
+    position: "relative",
+    display: "flex",
+    flexDirection: reflowed ? "column" : side === "right" ? "row-reverse" : "row",
+    height: "100%",
+    minHeight: 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    SidebarCtx.Provider,
+    {
+      value: { collapsed: isNarrow, mode: collapseMode, side, width, open, setOpen },
+      children: /* @__PURE__ */ jsx("div", { ref, style: rootStyle, ...rest, children })
+    }
+  );
+}
+function Sidebar({ style, children, ...rest }) {
+  const { collapsed, mode, side, width, open, setOpen } = useSidebar();
+  ensureStyle(STYLE_ID11, RULES10);
+  if (!collapsed) {
+    const border = `${tokens.borderWidth} solid ${tokens.border}`;
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        style: {
+          width,
+          flexShrink: 0,
+          overflowY: "auto",
+          display: "flex",
+          flexDirection: "column",
+          gap: "0.125rem",
+          padding: "0.5rem 0.5rem",
+          ...side === "right" ? { borderLeft: border } : { borderRight: border },
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+  if (mode === "reflow") {
+    return /* @__PURE__ */ jsx(
+      "aside",
+      {
+        style: {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          gap: "0.25rem",
+          width: "100%",
+          overflowX: "auto",
+          padding: "0.5rem 0.75rem",
+          borderBottom: `${tokens.borderWidth} solid ${tokens.border}`,
+          ...style
+        },
+        ...rest,
+        children
+      }
+    );
+  }
+  const closed = side === "right" ? "translateX(100%)" : "translateX(-100%)";
+  const drawerStyle = {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    [side]: 0,
+    width,
+    maxWidth: "85%",
+    overflowY: "auto",
+    background: tokens.bgRaised,
+    boxShadow: tokens.shadowLg,
+    transform: open ? "translateX(0)" : closed,
+    zIndex: 11,
+    ...side === "right" ? { borderLeft: `${tokens.borderWidth} solid ${tokens.border}` } : { borderRight: `${tokens.borderWidth} solid ${tokens.border}` },
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    open ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Close sidebar",
+        className: "nb-sidebar-scrim",
+        onClick: () => setOpen(false),
+        style: {
+          position: "absolute",
+          inset: 0,
+          border: "none",
+          padding: 0,
+          cursor: "pointer",
+          background: "rgba(0,0,0,0.32)",
+          zIndex: 10
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ jsx("aside", { className: "nb-sidebar-drawer", inert: !open, style: drawerStyle, ...rest, children })
+  ] });
+}
+function Main({ style, children, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0, minHeight: 0, overflowY: "auto", ...style }, ...rest, children });
+}
+function Trigger({ children, style, onClick, ...rest }) {
+  const ctx = useContext(SidebarCtx);
+  if (!ctx?.collapsed || ctx.mode !== "drawer") return null;
+  const { open, setOpen } = ctx;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Toggle sidebar",
+      "aria-expanded": open,
+      onClick: (e) => {
+        setOpen(!open);
+        onClick?.(e);
+      },
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 32,
+        height: 32,
+        border: "none",
+        background: "transparent",
+        color: tokens.fg,
+        cursor: "pointer",
+        borderRadius: tokens.radiusSm,
+        ...style
+      },
+      ...rest,
+      children: children ?? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M2 4.5h14M2 9h14M2 13.5h14",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ) })
+    }
+  );
+}
+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 };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map