@nimblebrain/synapse 0.9.0 → 0.10.0

package/dist/ui/index.d.ts

@@ -43,7 +43,7 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare function Card({ padding, interactive, style, className, children, ...rest }: CardProps): react_jsx_runtime.JSX.Element;
 
-type Side$1 = "left" | "right";
+type Side$1 = "left" | "right" | "bottom";
 interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "onCancel" | "onClick"> {
     open: boolean;
     /** Called by the backdrop and the Header close button. */
@@ -52,17 +52,26 @@ interface DrawerProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "tit
      * (e.g. pop one level of a panel stack before closing). */
     onEscape?: () => void;
     side?: Side$1;
-    /** Panel width. Default 480. */
+    /** Panel width (ignored for `side="bottom"`, which is full width). Default 480. */
     width?: number | string;
     children?: ReactNode;
 }
 declare function DrawerRoot({ open, onClose, onEscape, side, width, style, children, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
-interface HeaderProps extends HTMLAttributes<HTMLElement> {
+interface HeaderProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /**
+     * Heading text — rendered as an `<h2>` and wired as the drawer's accessible
+     * name. Renders **instead of** `children` (pass one or the other, not both).
+     */
+    title?: ReactNode;
+    /** Show a leading back button (e.g. pop one level of a panel stack). */
+    onBack?: () => void;
+    /** Trailing controls placed before the close button. */
+    actions?: ReactNode;
     /** Show a close button that calls this. */
     onClose?: () => void;
     children?: ReactNode;
 }
-declare function Header$1({ onClose, style, children, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare function Header$1({ title, onBack, actions, onClose, style, children, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
 declare function Body$1({ style, children, ...rest }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
 declare function Footer$1({ style, children, ...rest }: HTMLAttributes<HTMLElement>): react_jsx_runtime.JSX.Element;
 /** `Drawer` with `.Header`, `.Body`, `.Footer` slots. */

package/dist/ui/index.js

@@ -1,4 +1,4 @@
-import { createContext, useRef, useEffect, useContext, useState, useLayoutEffect } from 'react';
+import { createContext, useRef, useId, useState, useEffect, useMemo, useContext, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ui/components/Avatar.tsx
@@ -322,14 +322,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 = createContext(null);
 function DrawerRoot({
   open,
   onClose,
@@ -342,42 +353,51 @@ function DrawerRoot({
 }) {
   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 = {
-    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__ */ 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 = 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({ onClose, style, children, ...rest }) {
+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",
     {
@@ -395,41 +415,75 @@ function Header({ onClose, style, children, ...rest }) {
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children }),
-        onClose ? /* @__PURE__ */ jsx(CloseButton, { onClose }) : null
+        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 CloseButton({ onClose }) {
+function IconButton({
+  label,
+  onClick,
+  children
+}) {
   return /* @__PURE__ */ 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__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-        "path",
-        {
-          d: "M4 4l8 8M12 4l-8 8",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round"
-        }
-      ) })
+      children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": "true", children })
     }
   );
 }