@estiva-app/ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -75,16 +75,25 @@ function AppShell({ variant = "solid", menu, logo, search, identity, banner, nav
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full min-h-0 flex-col bg-bg-base text-text-primary", children: [
-    bar,
-    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1", children: [
-      nav,
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
-        banner,
-        /* @__PURE__ */ jsx2("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
+  return (
+    /* `relative overflow-hidden` is the seal the floating manner already has,
+       and it takes both halves: an absolutely positioned descendant with no
+       positioned ancestor belongs to the *viewport*, so a scroll container
+       never clips it and the document itself gains its position as scroll
+       range — the whole page scrolls, navigation and top bar included.
+       `relative` claims such strays for the shell; `overflow-hidden` clips
+       them at its edge. Either alone seals nothing. */
+    /* @__PURE__ */ jsxs2("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary", children: [
+      bar,
+      /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 flex-1", children: [
+        nav,
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+          banner,
+          /* @__PURE__ */ jsx2("main", { className: "min-w-0 flex-1 overflow-y-auto", children })
+        ] })
       ] })
     ] })
-  ] });
+  );
 }
 
 // src/Avatar.tsx
@@ -109,7 +118,7 @@ function Avatar({ src, name, alt = "", size = 36, className }) {
   return /* @__PURE__ */ jsx3("div", { className: cn("rounded-sm overflow-hidden shrink-0 bg-bg-inset", className), style: { width: size, height: size }, children: picture ? /* @__PURE__ */ jsx3("img", { src: picture, alt: alt || name || "", className: "w-full h-full object-cover", onError: () => setBroken(true) }) : label ? /* @__PURE__ */ jsx3(
     "div",
     {
-      className: "w-full h-full flex items-center justify-center font-semibold",
+      className: "w-full h-full flex items-center justify-center font-semibold leading-none",
       style: {
         color: "#08121c",
         fontSize: Math.round(size * 0.36),
@@ -122,18 +131,25 @@ function Avatar({ src, name, alt = "", size = 36, className }) {
 
 // src/AvatarGroup.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-function AvatarGroup({ members }) {
+function AvatarGroup({ members, size = 24 }) {
   const visible = members.slice(0, 3);
-  return /* @__PURE__ */ jsx4("div", { className: "flex items-center pr-2", children: visible.map((member, i) => /* @__PURE__ */ jsx4(
-    Avatar,
-    {
-      size: 24,
-      name: member.name,
-      src: member.picture,
-      alt: member.name,
-      className: "-mr-2 relative border-2 border-bg-surface"
-    },
-    i
+  const overlap = Math.round(size / 3);
+  const ring = size / 12;
+  return /* @__PURE__ */ jsx4("div", { className: "flex items-center", style: { paddingRight: overlap }, children: visible.map((member, i) => (
+    /*
+      The wrapper carries the overlap and the ring; the face carries
+      neither. It must never clip — see the note at the top of the file —
+      so it has the avatar's own radius and no overflow of its own.
+    */
+    /* @__PURE__ */ jsx4(
+      "span",
+      {
+        className: "relative flex rounded-sm",
+        style: { marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` },
+        children: /* @__PURE__ */ jsx4(Avatar, { size, name: member.name, src: member.picture, alt: member.name })
+      },
+      i
+    )
   )) });
 }
 
@@ -238,12 +254,48 @@ function Chip({ type = "neutral", label, leadingIcon, trailingIcon, className })
 }
 
 // src/ChipInput.tsx
-import { useState as useState2, useRef as useRef2, useMemo, useEffect as useEffect2, useLayoutEffect } from "react";
+import { useState as useState3, useRef as useRef2, useMemo, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { IconX } from "@tabler/icons-react";
 
+// src/fit.ts
+var MARGIN = 8;
+var GAP = 4;
+function fitMenu({
+  anchor,
+  menu,
+  viewport,
+  cap = Number.POSITIVE_INFINITY
+}) {
+  const left = Math.max(MARGIN, Math.min(anchor.left, viewport.width - menu.width - MARGIN));
+  const below = viewport.height - anchor.bottom - GAP - MARGIN;
+  const above = anchor.top - GAP - MARGIN;
+  const openUp = below < Math.min(menu.contentHeight, cap) && above > below;
+  const maxHeight = Math.max(Math.min(cap, openUp ? above : below), 120);
+  return openUp ? { left, bottom: viewport.height - anchor.top + GAP, maxHeight } : { left, top: anchor.bottom + GAP, maxHeight };
+}
+function clampBox({
+  box,
+  viewport
+}) {
+  const left = Math.max(MARGIN, Math.min(box.left, viewport.width - box.width - MARGIN));
+  const maxHeight = Math.max(Math.min(box.height, viewport.height - 2 * MARGIN), 120);
+  const top = Math.max(MARGIN, Math.min(box.top, viewport.height - maxHeight - MARGIN));
+  return { left, top, maxHeight };
+}
+function fitSubmenu({
+  row,
+  panel,
+  viewport
+}) {
+  const fitsRight = row.right + GAP + panel.width <= viewport.width - MARGIN;
+  const left = Math.max(MARGIN, fitsRight ? row.right + GAP : row.left - GAP - panel.width);
+  const top = Math.max(MARGIN, Math.min(row.top, viewport.height - panel.height - MARGIN));
+  return { left, top };
+}
+
 // src/Menu.tsx
-import { useEffect, useRef } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
 import { IconChevronRight } from "@tabler/icons-react";
 import { createPortal } from "react-dom";
 
@@ -264,8 +316,19 @@ function SectionLabel({ children, className }) {
 
 // src/Menu.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function Menu({ onClose, position, children, className }) {
+var MenuHoverContext = createContext(null);
+function Menu({ onClose, anchor, align = "left", position, closeOnLeave = false, children, className }) {
   const ref = useRef(null);
+  const leaveTimer = useRef(void 0);
+  const hold = useCallback(() => clearTimeout(leaveTimer.current), []);
+  const release = useCallback(() => {
+    if (!closeOnLeave) return;
+    clearTimeout(leaveTimer.current);
+    leaveTimer.current = setTimeout(onClose, 150);
+  }, [closeOnLeave, onClose]);
+  useEffect(() => () => clearTimeout(leaveTimer.current), []);
+  const portalled = Boolean(anchor || position);
+  const [placed, setPlaced] = useState2(null);
   useEffect(() => {
     const onDown = (event) => {
       if (!ref.current?.contains(event.target)) onClose();
@@ -280,8 +343,46 @@ function Menu({ onClose, position, children, className }) {
       document.removeEventListener("keydown", onKey);
     };
   }, [onClose]);
-  const style = position ? { top: position.top, ..."left" in position ? { left: position.left } : { right: position.right } } : void 0;
-  const node = /* @__PURE__ */ jsx9(
+  const posLeft = position && "left" in position ? position.left : void 0;
+  const posRight = position && "right" in position ? position.right : void 0;
+  const posTop = position?.top;
+  useLayoutEffect(() => {
+    if (!portalled || !ref.current) return;
+    const viewport = { width: window.innerWidth, height: window.innerHeight };
+    const menu = ref.current;
+    if (anchor) {
+      const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor;
+      const left = align === "right" ? rect.right - menu.offsetWidth : rect.left;
+      setPlaced(
+        fitMenu({
+          anchor: { left, top: rect.top, bottom: rect.bottom },
+          menu: { width: menu.offsetWidth, contentHeight: menu.scrollHeight },
+          viewport
+        })
+      );
+    } else if (posTop !== void 0) {
+      const left = posLeft ?? viewport.width - (posRight ?? 0) - menu.offsetWidth;
+      setPlaced(clampBox({ box: { left, top: posTop, width: menu.offsetWidth, height: menu.offsetHeight }, viewport }));
+    }
+  }, [portalled, anchor, align, posLeft, posRight, posTop]);
+  useEffect(() => {
+    if (!anchor) return;
+    const onScroll = (event) => {
+      if (event.target instanceof Node && ref.current?.contains(event.target)) return;
+      onClose();
+    };
+    window.addEventListener("resize", onClose);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      window.removeEventListener("resize", onClose);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [anchor, onClose]);
+  const style = portalled ? placed ? { left: placed.left, top: placed.top, bottom: placed.bottom, maxHeight: placed.maxHeight } : (
+    // The provisional render: measured by the layout effect, never seen.
+    { left: 0, top: 0, visibility: "hidden" }
+  ) : void 0;
+  const node = /* @__PURE__ */ jsx9(MenuHoverContext.Provider, { value: { hold, release }, children: /* @__PURE__ */ jsx9(
     "div",
     {
       ref,
@@ -289,15 +390,68 @@ function Menu({ onClose, position, children, className }) {
       "data-interactive": true,
       className: cn(
         "z-50 flex min-w-[180px] flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg",
-        position ? "fixed" : "absolute right-0 top-full mt-1",
+        portalled ? "fixed overflow-y-auto" : "absolute right-0 top-full mt-1",
         className
       ),
       style,
       onClick: (event) => event.stopPropagation(),
+      onMouseEnter: closeOnLeave ? hold : void 0,
+      onMouseLeave: closeOnLeave ? release : void 0,
       children
     }
-  );
-  return position ? createPortal(node, document.body) : node;
+  ) });
+  return portalled ? createPortal(node, document.body) : node;
+}
+function MenuSub({ label, leading, selected, children, className }) {
+  const [open, setOpen] = useState2(false);
+  const rowRef = useRef(null);
+  const panelRef = useRef(null);
+  const closeTimer = useRef(void 0);
+  const [placed, setPlaced] = useState2(null);
+  const menuHover = useContext(MenuHoverContext);
+  const enter = () => {
+    clearTimeout(closeTimer.current);
+    menuHover?.hold();
+    setOpen(true);
+  };
+  const leave = () => {
+    closeTimer.current = setTimeout(() => setOpen(false), 150);
+    menuHover?.release();
+  };
+  useEffect(() => () => clearTimeout(closeTimer.current), []);
+  useLayoutEffect(() => {
+    if (!open || !rowRef.current || !panelRef.current) {
+      setPlaced(null);
+      return;
+    }
+    const row = rowRef.current.getBoundingClientRect();
+    setPlaced(
+      fitSubmenu({
+        row: { left: row.left, right: row.right, top: row.top },
+        panel: { width: panelRef.current.offsetWidth, height: panelRef.current.offsetHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight }
+      })
+    );
+  }, [open]);
+  return /* @__PURE__ */ jsxs5("div", { ref: rowRef, onMouseEnter: enter, onMouseLeave: leave, children: [
+    /* @__PURE__ */ jsx9(MenuItem, { label, leading, selected, submenu: true }),
+    open && createPortal(
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          ref: panelRef,
+          role: "menu",
+          "data-interactive": true,
+          className: cn("fixed z-50 flex w-[160px] flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg", className),
+          style: placed ?? { left: 0, top: 0, visibility: "hidden" },
+          onMouseEnter: enter,
+          onMouseLeave: leave,
+          children
+        }
+      ),
+      document.body
+    )
+  ] });
 }
 function MenuItem({ label, children, size = "default", description, leading, trailing, shortcut, submenu, destructive, selected, className, ...props }) {
   const edge = trailing ?? (shortcut ? /* @__PURE__ */ jsx9("kbd", { className: "inline-flex shrink-0 items-center justify-center rounded-sm border border-border-strong bg-bg-inset px-1 py-px text-caption text-text-secondary", children: shortcut }) : submenu ? /* @__PURE__ */ jsx9(IconChevronRight, { size: 16, stroke: 1.5, className: "shrink-0 text-text-muted" }) : null);
@@ -392,10 +546,10 @@ function ChipInput({
   chipLeading,
   rowLeading
 }) {
-  const [query, setQuery] = useState2("");
-  const [highlight, setHighlight] = useState2(0);
-  const [isFocused, setIsFocused] = useState2(false);
-  const [anchorRect, setAnchorRect] = useState2(null);
+  const [query, setQuery] = useState3("");
+  const [highlight, setHighlight] = useState3(0);
+  const [isFocused, setIsFocused] = useState3(false);
+  const [anchorRect, setAnchorRect] = useState3(null);
   const wrapperRef = useRef2(null);
   const inputRef = useRef2(null);
   const matches = useMemo(() => {
@@ -413,7 +567,7 @@ function ChipInput({
     setHighlight(0);
   }, [query, matches.length]);
   const showDropdown = isFocused && query.trim().length > 0 && matches.length > 0;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     if (!showDropdown) return;
     const update = () => {
       if (wrapperRef.current) setAnchorRect(wrapperRef.current.getBoundingClientRect());
@@ -496,10 +650,14 @@ function ChipInput({
       /* @__PURE__ */ jsx10(
         "div",
         {
-          className: "fixed z-[60] max-h-[240px] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg",
+          className: "fixed z-[60] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg",
           style: {
-            top: anchorRect.bottom + 4,
-            left: anchorRect.left,
+            ...fitMenu({
+              anchor: { left: anchorRect.left, top: anchorRect.top, bottom: anchorRect.bottom },
+              menu: { width: anchorRect.width, contentHeight: matches.length * 48 },
+              viewport: { width: window.innerWidth, height: window.innerHeight },
+              cap: 240
+            }),
             width: anchorRect.width
           },
           children: matches.map((o, i) => /* @__PURE__ */ jsx10(
@@ -527,31 +685,34 @@ function ChipInput({
 }
 
 // src/Tooltip.tsx
-import { useCallback, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect3, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function Tooltip({ label, className }) {
   return /* @__PURE__ */ jsx11("div", { role: "tooltip", className: cn("bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center px-2 shadow-lg", className), children: /* @__PURE__ */ jsx11("span", { className: "text-caption text-text-primary whitespace-nowrap", children: label }) });
 }
-var GAP = 6;
+var GAP2 = 6;
 var VIEWPORT_PAD = 8;
 function WithTooltip({ label, placement = "top", wrapperClassName, children }) {
-  const [show, setShow] = useState3(false);
+  const [show, setShow] = useState4(false);
   const ref = useRef3(null);
   const tooltipRef = useRef3(null);
-  const [style, setStyle] = useState3({ position: "fixed", zIndex: 9999, pointerEvents: "none", visibility: "hidden" });
-  const reposition = useCallback(() => {
+  const [style, setStyle] = useState4({ position: "fixed", zIndex: 9999, pointerEvents: "none", visibility: "hidden" });
+  const reposition = useCallback2(() => {
     const trigger = ref.current;
     const tip = tooltipRef.current;
     if (!trigger || !tip) return;
     const triggerRect = trigger.getBoundingClientRect();
     const tipRect = tip.getBoundingClientRect();
-    const top = placement === "bottom" ? triggerRect.bottom + GAP : triggerRect.top - tipRect.height - GAP;
+    let top = placement === "bottom" ? triggerRect.bottom + GAP2 : triggerRect.top - tipRect.height - GAP2;
+    if (placement === "top" && top < VIEWPORT_PAD) top = triggerRect.bottom + GAP2;
+    else if (placement === "bottom" && top + tipRect.height > window.innerHeight - VIEWPORT_PAD) top = triggerRect.top - tipRect.height - GAP2;
+    top = Math.max(VIEWPORT_PAD, Math.min(top, window.innerHeight - tipRect.height - VIEWPORT_PAD));
     let left = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2;
     left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_PAD));
     setStyle({ position: "fixed", top, left, zIndex: 9999, pointerEvents: "none", visibility: "visible" });
   }, [placement]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (show) reposition();
   }, [show, reposition]);
   return /* @__PURE__ */ jsxs7("div", { ref, className: cn("inline-flex shrink-0", wrapperClassName), onMouseEnter: () => setShow(true), onMouseLeave: () => setShow(false), children: [
@@ -602,7 +763,7 @@ function IconButton({
 }
 
 // src/IdentityMenu.tsx
-import { useState as useState4 } from "react";
+import { useRef as useRef4, useState as useState5 } from "react";
 
 // src/Divider.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -673,13 +834,13 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
 
 // src/IdentityMenu.tsx
 import { Fragment, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, className, children }) {
+function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, anchor, className, children }) {
   const act = (action) => () => {
     onClose();
     action();
   };
   const appRows = typeof children === "function" ? children(onClose) : children;
-  return /* @__PURE__ */ jsxs10(Menu, { onClose, className: cn("w-72", className), children: [
+  return /* @__PURE__ */ jsxs10(Menu, { onClose, anchor, align: "right", className: cn("w-72", className), children: [
     /* @__PURE__ */ jsxs10(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
       /* @__PURE__ */ jsx16(MenuRow, { children: /* @__PURE__ */ jsx16(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28, className: "text-body-2-strong" }) }),
       /* @__PURE__ */ jsx16(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
@@ -712,8 +873,9 @@ function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, o
   ] });
 }
 function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
-  const [open, setOpen] = useState4(false);
-  return /* @__PURE__ */ jsxs10("div", { className: cn("relative", className), children: [
+  const [open, setOpen] = useState5(false);
+  const anchorRef = useRef4(null);
+  return /* @__PURE__ */ jsxs10("div", { ref: anchorRef, className: cn("relative", className), children: [
     /* @__PURE__ */ jsx16(
       PersonTrigger,
       {
@@ -738,6 +900,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
         onCopyKey,
         onSignOut,
         onClose: () => setOpen(false),
+        anchor: anchorRef.current,
         children
       }
     )
@@ -748,55 +911,55 @@ function Note({ children }) {
 }
 
 // src/Field.tsx
+import { createContext as createContext2, useContext as useContext2, useId } from "react";
 import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
-function Field({ label, required = false, children }) {
+var FieldControlIdContext = createContext2(void 0);
+function useFieldControlId(ownId) {
+  const fromField = useContext2(FieldControlIdContext);
+  return fromField ?? ownId;
+}
+function Field({ label, required = false, htmlFor, children }) {
+  const generated = useId();
+  const id = htmlFor ?? generated;
   return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
-    /* @__PURE__ */ jsxs11("label", { className: `text-input-label text-text-primary${required ? " flex items-center" : ""}`, children: [
-      label,
-      required && /* @__PURE__ */ jsx17("span", { className: "text-error-default ml-0.5", children: "*" })
-    ] }),
-    children
+    /* @__PURE__ */ jsxs11(
+      "label",
+      {
+        htmlFor: id,
+        className: `text-input-label text-text-primary${required ? " flex items-center" : ""}`,
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx17("span", { className: "text-error-default ml-0.5", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx17(FieldControlIdContext.Provider, { value: id, children })
   ] });
 }
 
 // src/Select.tsx
 import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
-import { useCallback as useCallback2, useEffect as useEffect3, useId, useLayoutEffect as useLayoutEffect3, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect3, useId as useId2, useLayoutEffect as useLayoutEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState6 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-function fitMenu({
-  anchor,
-  menu,
-  viewport
-}) {
-  const MARGIN = 8;
-  const GAP2 = 4;
-  const CAP = 288;
-  const left = Math.max(MARGIN, Math.min(anchor.left, viewport.width - menu.width - MARGIN));
-  const below = viewport.height - anchor.bottom - GAP2 - MARGIN;
-  const above = anchor.top - GAP2 - MARGIN;
-  const openUp = below < Math.min(menu.contentHeight, CAP) && above > below;
-  const maxHeight = Math.max(Math.min(CAP, openUp ? above : below), 120);
-  return openUp ? { left, bottom: viewport.height - anchor.top + GAP2, maxHeight } : { left, top: anchor.bottom + GAP2, maxHeight };
-}
 function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, className }) {
-  const id = useId();
-  const triggerRef = useRef4(null);
-  const menuRef = useRef4(null);
-  const [rect, setRect] = useState5(null);
-  const [placement, setPlacement] = useState5(null);
+  const id = useId2();
+  const triggerRef = useRef5(null);
+  const menuRef = useRef5(null);
+  const [rect, setRect] = useState6(null);
+  const [placement, setPlacement] = useState6(null);
   const open = rect !== null;
   const selectedIndex = useMemo2(() => Math.max(0, options.findIndex((o) => o.value === value)), [options, value]);
-  const [activeIndex, setActiveIndex] = useState5(selectedIndex);
-  const close = useCallback2((refocus) => {
+  const [activeIndex, setActiveIndex] = useState6(selectedIndex);
+  const close = useCallback3((refocus) => {
     setRect(null);
     if (refocus) triggerRef.current?.focus();
   }, []);
-  const openMenu = useCallback2(() => {
+  const openMenu = useCallback3(() => {
     setActiveIndex(selectedIndex);
     setRect(triggerRef.current?.getBoundingClientRect() ?? null);
   }, [selectedIndex]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!rect || !menuRef.current) {
       setPlacement(null);
       return;
@@ -805,7 +968,10 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
       fitMenu({
         anchor: { left: rect.left, top: rect.top, bottom: rect.bottom },
         menu: { width: menuRef.current.offsetWidth, contentHeight: menuRef.current.scrollHeight },
-        viewport: { width: window.innerWidth, height: window.innerHeight }
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        // The option list keeps its classic height (the old max-h-72); a menu
+        // panel passes no cap and stands as tall as the room it opens into.
+        cap: 288
       })
     );
   }, [rect, options.length]);
@@ -974,11 +1140,13 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
 // src/TextInput.tsx
 import { forwardRef } from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
-var TextInput = forwardRef(function TextInput2({ className, type = "text", ...props }, ref) {
+var TextInput = forwardRef(function TextInput2({ className, type = "text", id, ...props }, ref) {
+  const controlId = useFieldControlId(id);
   return /* @__PURE__ */ jsx19(
     "input",
     {
       ref,
+      id: controlId,
       type,
       className: cn(
         "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2",
@@ -996,11 +1164,13 @@ var TextInput = forwardRef(function TextInput2({ className, type = "text", ...pr
 // src/Textarea.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx20 } from "react/jsx-runtime";
-var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
+var Textarea = forwardRef2(function Textarea2({ className, id, ...props }, ref) {
+  const controlId = useFieldControlId(id);
   return /* @__PURE__ */ jsx20(
     "textarea",
     {
       ref,
+      id: controlId,
       className: cn(
         "bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2",
         "text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted",
@@ -1015,7 +1185,7 @@ var Textarea = forwardRef2(function Textarea2({ className, ...props }, ref) {
 });
 
 // src/ConfirmDialog.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/DialogShell.tsx
 import { useEffect as useEffect4 } from "react";
@@ -1059,7 +1229,7 @@ function DialogShell({ title, onClose, headerContent, footer, children, bodyClas
 // src/ConfirmDialog.tsx
 import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
-  const [busy, setBusy] = useState6(false);
+  const [busy, setBusy] = useState7(false);
   const confirm = async () => {
     setBusy(true);
     try {
@@ -1085,13 +1255,13 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
 }
 
 // src/EditableText.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState7 } from "react";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState8 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
-  const [editing, setEditing] = useState7(false);
-  const [draft, setDraft] = useState7(value);
-  const [busy, setBusy] = useState7(false);
-  const fieldRef = useRef5(null);
+  const [editing, setEditing] = useState8(false);
+  const [draft, setDraft] = useState8(value);
+  const [busy, setBusy] = useState8(false);
+  const fieldRef = useRef6(null);
   useEffect5(() => {
     if (editing) {
       fieldRef.current?.focus();
@@ -1219,20 +1389,20 @@ function SkeletonList({ rows = 8, className }) {
 }
 
 // src/Breadcrumb.tsx
-import { Fragment as Fragment5, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef6, useState as useState8 } from "react";
+import { Fragment as Fragment5, useCallback as useCallback4, useLayoutEffect as useLayoutEffect5, useRef as useRef7, useState as useState9 } from "react";
 import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 function Breadcrumb({ items, className }) {
-  const navRef = useRef6(null);
-  const labelRefs = useRef6([]);
-  const [truncated, setTruncated] = useState8(/* @__PURE__ */ new Set());
-  const measure = useCallback3(() => {
+  const navRef = useRef7(null);
+  const labelRefs = useRef7([]);
+  const [truncated, setTruncated] = useState9(/* @__PURE__ */ new Set());
+  const measure = useCallback4(() => {
     const next = /* @__PURE__ */ new Set();
     labelRefs.current.forEach((el, index) => {
       if (el && el.scrollWidth > el.clientWidth) next.add(index);
     });
     setTruncated((prev) => prev.size === next.size && [...next].every((i) => prev.has(i)) ? prev : next);
   }, []);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     measure();
     const nav = navRef.current;
     if (!nav || typeof ResizeObserver === "undefined") return;
@@ -1399,11 +1569,11 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
 }
 
 // src/SectionHeader.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { IconChevronRight as IconChevronRight2 } from "@tabler/icons-react";
 import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
 function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = "hover", className }) {
-  const [isHovered, setIsHovered] = useState9(false);
+  const [isHovered, setIsHovered] = useState10(false);
   return /* @__PURE__ */ jsxs22(
     "div",
     {
@@ -1479,7 +1649,7 @@ function Tabs({ tabs, active, onChange, size = "default", className }) {
 }
 
 // src/Toast.tsx
-import { createContext, useCallback as useCallback4, useContext, useEffect as useEffect6, useMemo as useMemo3, useState as useState10 } from "react";
+import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useEffect as useEffect6, useMemo as useMemo3, useState as useState11 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { IconCircleCheck } from "@tabler/icons-react";
 import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
@@ -1533,14 +1703,14 @@ function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAct
     }
   );
 }
-var ToastContext = createContext(null);
+var ToastContext = createContext3(null);
 var toastSeq = 0;
 function ToastProvider({ children }) {
-  const [toast, setToast] = useState10(null);
-  const showToast = useCallback4((opts) => {
+  const [toast, setToast] = useState11(null);
+  const showToast = useCallback5((opts) => {
     setToast({ ...opts, id: ++toastSeq });
   }, []);
-  const dismissToast = useCallback4(() => {
+  const dismissToast = useCallback5(() => {
     setToast(null);
   }, []);
   useEffect6(() => {
@@ -1575,7 +1745,7 @@ function ToastProvider({ children }) {
   ] });
 }
 function useToast() {
-  const ctx = useContext(ToastContext);
+  const ctx = useContext3(ToastContext);
   if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }
@@ -1604,6 +1774,7 @@ export {
   MenuItem,
   MenuRow,
   MenuSection,
+  MenuSub,
   NavItem,
   Person,
   PersonTrigger,
@@ -1626,9 +1797,13 @@ export {
   Tooltip,
   TopBar,
   WithTooltip,
+  clampBox,
   cn,
+  fitMenu,
+  fitSubmenu,
   hueFor,
   initialsFor,
+  useFieldControlId,
   useToast
 };
 //# sourceMappingURL=index.js.map