@nimblebrain/synapse 0.9.0 → 0.10.1

package/dist/ui/index.cjs

@@ -324,14 +324,25 @@ var RULES3 = `
 }
 .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 = react.createContext(null);
 function DrawerRoot({
   open,
   onClose,
@@ -344,42 +355,51 @@ function DrawerRoot({
 }) {
   ensureStyle(STYLE_ID3, RULES3);
   const dialogRef = react.useRef(null);
+  const labelId = react.useId();
+  const [hasTitle, setHasTitle] = react.useState(false);
   react.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 = {
-    width,
+    ...isBottom ? { width: "100%", maxWidth: "100%" } : { width },
     background: tokens.bg,
     color: tokens.fg,
     boxShadow: tokens.shadowLg,
-    ...side === "right" ? { borderLeft: `${tokens.borderWidth} solid ${tokens.border}` } : { borderRight: `${tokens.borderWidth} solid ${tokens.border}` },
+    ...side === "right" ? { borderLeft: `${tokens.borderWidth} solid ${tokens.border}` } : side === "left" ? { borderRight: `${tokens.borderWidth} solid ${tokens.border}` } : { borderTop: `${tokens.borderWidth} solid ${tokens.border}` },
     ...style
   };
-  return (
-    // biome-ignore lint/a11y/useKeyWithClickEvents: backdrop click is a mouse convenience; the dialog's Escape (onCancel) is the keyboard dismissal path.
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "dialog",
-      {
-        ref: dialogRef,
-        className: `nb-drawer nb-drawer--${side}`,
-        style: panelStyle,
-        onCancel: (e) => {
-          e.preventDefault();
-          (onEscape ?? onClose)();
-        },
-        onClick: (e) => {
-          if (e.target === dialogRef.current) onClose();
-        },
-        ...rest,
-        children
-      }
-    )
-  );
+  const ctxValue = react.useMemo(() => ({ labelId, setHasTitle }), [labelId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(DrawerContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.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({ onClose, style, children, ...rest }) {
+function Header({ title, onBack, actions, onClose, style, children, ...rest }) {
+  const ctx = react.useContext(DrawerContext);
+  const hasTitle = title != null;
+  react.useEffect(() => {
+    if (!ctx || !hasTitle) return;
+    ctx.setHasTitle(true);
+    return () => ctx.setHasTitle(false);
+  }, [ctx, hasTitle]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "header",
     {
@@ -397,41 +417,75 @@ function Header({ onClose, style, children, ...rest }) {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minWidth: 0 }, children }),
-        onClose ? /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClose }) : null
+        onBack ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { label: "Back", onClick: onBack, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M10 3L5 8l5 5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            fill: "none",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }) : null,
+        hasTitle ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { flex: 1, minWidth: 0 }, children }),
+        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem", flexShrink: 0 }, children: actions }) : null,
+        onClose ? /* @__PURE__ */ jsxRuntime.jsx(IconButton, { label: "Close", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M4 4l8 8M12 4l-8 8",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round"
+          }
+        ) }) : null
       ]
     }
   );
 }
-function CloseButton({ onClose }) {
+function IconButton({
+  label,
+  onClick,
+  children
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
-      "aria-label": "Close",
-      onClick: onClose,
+      "aria-label": label,
+      onClick,
+      className: "nb-drawer-iconbtn",
       style: {
         flexShrink: 0,
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        width: 28,
-        height: 28,
         border: "none",
         background: "transparent",
         color: tokens.fgMuted,
         cursor: "pointer",
         borderRadius: tokens.radiusSm
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          d: "M4 4l8 8M12 4l-8 8",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      ) })
+      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children })
     }
   );
 }
@@ -1161,8 +1215,13 @@ function List({ style, children, ...rest }) {
     "section",
     {
       style: {
-        overflowY: "auto",
-        ...collapsed ? { flex: 1, minWidth: 0 } : { width: listWidth, flexShrink: 0, borderRight: border },
+        // Clip horizontally, scroll vertically. A too-wide child (e.g. an
+        // auto-layout <table> that won't shrink below its content) would
+        // otherwise spill out of this fixed-width rail and paint over the
+        // detail pane. `minWidth: 0` lets the rail participate in flex
+        // sizing without being forced wider by its content.
+        overflow: "hidden auto",
+        ...collapsed ? { flex: 1, minWidth: 0 } : { width: listWidth, minWidth: 0, flexShrink: 0, borderRight: border },
         ...style
       },
       ...rest,