@eifi1/ui-kit 0.6.1 → 0.7.0

package/dist/components/hover-menu.js

@@ -2,14 +2,32 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
-import { useOutsideClick } from "../hooks/use-dismiss.js";
+import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
 const OPEN_DELAY_MS = 120;
 const CLOSE_DELAY_MS = 120;
+const ALIGN_CLASS = { start: "start-0", end: "end-0", left: "left-0", right: "right-0" };
+const ITEM_ROLES = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
+const PLAIN_ITEMS = "button:not([role]),a[href]:not([role])";
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function applyMenuSemantics(menu) {
+  for (const el of menu.querySelectorAll(PLAIN_ITEMS)) el.setAttribute("role", "menuitem");
+  const items = Array.from(menu.querySelectorAll(ITEM_ROLES));
+  for (const item of items) {
+    item.setAttribute("tabindex", "-1");
+    for (let el = item.parentElement; el && el !== menu; el = el.parentElement) {
+      if (!el.hasAttribute("role")) el.setAttribute("role", "none");
+    }
+  }
+  for (const el of menu.querySelectorAll("ul:not([role]),ol:not([role]),li:not([role])")) {
+    el.setAttribute("role", "none");
+  }
+  return items.filter((el) => !el.hasAttribute("disabled") && el.getAttribute("aria-disabled") !== "true");
+}
 let activeClose = null;
 function HoverMenu({
   trigger,
   children,
-  align = "right",
+  align = "end",
   panelClassName,
   className,
   ariaLabel,
@@ -62,6 +80,67 @@ function HoverMenu({
     };
   }, [open, close]);
   useOutsideClick(wrapperRef, close, open);
+  const menuRef = useRef(null);
+  const focusOnOpenRef = useRef(null);
+  const triggerEl = () => Array.from(wrapperRef.current?.querySelectorAll(FOCUSABLE) ?? []).find(
+    (el) => !menuRef.current?.contains(el)
+  ) ?? null;
+  const items = () => menuRef.current ? applyMenuSemantics(menuRef.current) : [];
+  useEscapeKey(() => {
+    const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;
+    close();
+    if (hadFocus) triggerEl()?.focus();
+  }, open);
+  useLayoutEffect(() => {
+    if (!open) return;
+    const list = items();
+    const want = focusOnOpenRef.current;
+    focusOnOpenRef.current = null;
+    if (want) (want === "last" ? list[list.length - 1] : list[0])?.focus();
+  });
+  useLayoutEffect(() => {
+    const el = triggerEl();
+    if (!el) return;
+    if (!el.hasAttribute("aria-haspopup")) el.setAttribute("aria-haspopup", "menu");
+    if (el.getAttribute("aria-haspopup") === "menu") el.setAttribute("aria-expanded", String(open));
+  });
+  const onKeyDown = (e) => {
+    const target = e.target;
+    const inMenu = menuRef.current?.contains(target) ?? false;
+    if (!inMenu) {
+      if (target !== triggerEl()) return;
+      if (e.key === "Enter" || e.key === " ") {
+        if (!open) focusOnOpenRef.current = "first";
+      } else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        const edge = e.key === "ArrowDown" ? "first" : "last";
+        if (open) {
+          const list2 = items();
+          (edge === "last" ? list2[list2.length - 1] : list2[0])?.focus();
+        } else {
+          focusOnOpenRef.current = edge;
+          openedByHoverRef.current = false;
+          setPhase("open");
+        }
+      }
+      return;
+    }
+    if (e.key === "Tab") {
+      close();
+      return;
+    }
+    const list = items();
+    if (list.length === 0) return;
+    const at = list.indexOf(document.activeElement);
+    let next = null;
+    if (e.key === "ArrowDown") next = at < 0 ? 0 : (at + 1) % list.length;
+    else if (e.key === "ArrowUp") next = at < 0 ? list.length - 1 : (at - 1 + list.length) % list.length;
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = list.length - 1;
+    if (next === null) return;
+    e.preventDefault();
+    list[next].focus();
+  };
   const panelRef = useRef(null);
   const [shiftX, setShiftX] = useState(0);
   useLayoutEffect(() => {
@@ -89,7 +168,10 @@ function HoverMenu({
       className: cn("relative", className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      "aria-label": ariaLabelAttr ?? ariaLabel,
+      onKeyDown: (e) => {
+        rest.onKeyDown?.(e);
+        onKeyDown(e);
+      },
       children: [
         trigger({ open, toggle }),
         open && /* @__PURE__ */ jsx(
@@ -98,13 +180,15 @@ function HoverMenu({
             ref: panelRef,
             className: cn(
               "absolute top-full z-40 pt-2",
-              align === "right" ? "right-0" : "left-0"
+              ALIGN_CLASS[align]
             ),
             style: shiftX ? { transform: `translateX(${shiftX}px)` } : void 0,
             children: /* @__PURE__ */ jsx(
               "div",
               {
+                ref: menuRef,
                 role: "menu",
+                "aria-label": ariaLabelAttr ?? ariaLabel,
                 className: cn(
                   "min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
                   panelClassName

package/dist/components/hover-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useOutsideClick } from \"../hooks/use-dismiss\";\n\n/**\n * Exported and `<div>`-shaped: the top bar composes several of these side by side, and\n * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an\n * attribute the kit does not know about. A closed prop list dropped every one of them.\n *\n * `children` is omitted from the div attributes because here it is a render prop taking\n * the panel's `close`, not a `ReactNode`.\n */\nexport interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  align?: \"left\" | \"right\";\n  panelClassName?: string;\n  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */\n  className?: string;\n  /**\n   * @deprecated Use the DOM spelling `aria-label`, which now reaches the wrapper like\n   * any other attribute. Kept working because keksdose, kastlan and lenkbank all pass\n   * this today and a rename to save one line of resolution is not a patch release; it\n   * loses to `aria-label` wherever both are given. Removal is a later minor.\n   */\n  ariaLabel?: string;\n}\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({\n  trigger,\n  children,\n  align = \"right\",\n  panelClassName,\n  className,\n  ariaLabel,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  const openedByHoverRef = useRef(false);\n\n  const close = useCallback(() => {\n    openedByHoverRef.current = false;\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(\n    () =>\n      setPhase((p) => {\n        if (p === \"open\" || p === \"closing\") return openedByHoverRef.current ? p : \"closed\";\n        openedByHoverRef.current = false;\n        return \"open\";\n      }),\n    [],\n  );\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        openedByHoverRef.current = true;\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  useOutsideClick(wrapperRef, close, open);\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin. Recomputed on each open; `shiftX` is\n  // subtracted first so the measurement is against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  useLayoutEffect(() => {\n    if (!open) {\n      setShiftX(0);\n      return;\n    }\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const margin = 8;\n    const naturalLeft = rect.left - shiftX;\n    const naturalRight = rect.right - shiftX;\n    let next = 0;\n    if (naturalRight > window.innerWidth - margin) next = window.innerWidth - margin - naturalRight;\n    if (naturalLeft + next < margin) next = margin - naturalLeft;\n    setShiftX(next);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    <div\n      // `...rest` first: the hover handlers below are the whole component, and a caller\n      // passing one of its own must not silently replace them.\n      {...rest}\n      ref={wrapperRef}\n      className={cn(\"relative\", className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      // The DOM spelling wins; {@link HoverMenuProps.ariaLabel} is the deprecated alias\n      // three apps still pass, so it stays as the fallback rather than as the answer.\n      aria-label={ariaLabelAttr ?? ariaLabel}\n    >\n      {trigger({ open, toggle })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            \"absolute top-full z-40 pt-2\",\n            align === \"right\" ? \"right-0\" : \"left-0\",\n          )}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            role=\"menu\"\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\n/**\n * Exported and `<div>`-shaped: the top bar composes several of these side by side, and\n * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an\n * attribute the kit does not know about. A closed prop list dropped every one of them.\n *\n * `children` is omitted from the div attributes because here it is a render prop taking\n * the panel's `close`, not a `ReactNode`.\n */\nexport interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  trigger: (state: { open: boolean; toggle: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * Which edge of the trigger the panel lines up with. `start`/`end` follow the\n   * reading direction (`end` is the right edge in LTR, the left in RTL); `left`/`right`\n   * are physical and kept for existing callers. Default `end` — the same right-aligned\n   * panel as before in LTR, mirrored in RTL.\n   */\n  align?: \"start\" | \"end\" | \"left\" | \"right\";\n  panelClassName?: string;\n  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */\n  className?: string;\n  /**\n   * @deprecated Use the DOM spelling `aria-label`, which names the `role=\"menu\"` panel. Kept working because keksdose, kastlan and lenkbank all pass\n   * this today and a rename to save one line of resolution is not a patch release; it\n   * loses to `aria-label` wherever both are given. Removal is a later minor.\n   */\n  ariaLabel?: string;\n}\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\nconst ALIGN_CLASS = { start: \"start-0\", end: \"end-0\", left: \"left-0\", right: \"right-0\" } as const;\n\n/** Explicit menu-item roles a caller may already have written. */\nconst ITEM_ROLES = '[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]';\n/** What the panel promotes to `menuitem` when the caller wrote plain controls. */\nconst PLAIN_ITEMS = \"button:not([role]),a[href]:not([role])\";\n/** The trigger: the first focusable in the wrapper that is not inside the panel. */\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Give the caller's markup menu semantics.\n *\n * `children` is arbitrary — every caller in the kit renders a `<ul>` of `<li>`s holding\n * `<button>`s and router `<Link>`s — so the panel was a `role=\"menu\"` whose children\n * were a list, list items and plain buttons: no `menuitem` anywhere, which is a menu\n * with nothing in it as far as a screen reader is concerned. Rather than make every\n * caller rewrite its rows, the panel upgrades them after render: controls become\n * `menuitem`s out of the Tab order (the arrow keys move between them), and the list\n * markup in between becomes `role=\"none\"` so the menu owns its items directly. An\n * element that already carries a role is the caller's decision and is left alone.\n */\nfunction applyMenuSemantics(menu: HTMLElement): HTMLElement[] {\n  for (const el of menu.querySelectorAll<HTMLElement>(PLAIN_ITEMS)) el.setAttribute(\"role\", \"menuitem\");\n  const items = Array.from(menu.querySelectorAll<HTMLElement>(ITEM_ROLES));\n  for (const item of items) {\n    item.setAttribute(\"tabindex\", \"-1\");\n    for (let el = item.parentElement; el && el !== menu; el = el.parentElement) {\n      if (!el.hasAttribute(\"role\")) el.setAttribute(\"role\", \"none\");\n    }\n  }\n  for (const el of menu.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role]),li:not([role])\")) {\n    el.setAttribute(\"role\", \"none\");\n  }\n  return items.filter((el) => !el.hasAttribute(\"disabled\") && el.getAttribute(\"aria-disabled\") !== \"true\");\n}\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({\n  trigger,\n  children,\n  align = \"end\",\n  panelClassName,\n  className,\n  ariaLabel,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  const openedByHoverRef = useRef(false);\n\n  const close = useCallback(() => {\n    openedByHoverRef.current = false;\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(\n    () =>\n      setPhase((p) => {\n        if (p === \"open\" || p === \"closing\") return openedByHoverRef.current ? p : \"closed\";\n        openedByHoverRef.current = false;\n        return \"open\";\n      }),\n    [],\n  );\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        openedByHoverRef.current = true;\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  useOutsideClick(wrapperRef, close, open);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n  /** Set by a keyboard press on the trigger, so the open that follows moves focus into\n   *  the menu. A hover or a mouse click opens it without taking focus off the page. */\n  const focusOnOpenRef = useRef<\"first\" | \"last\" | null>(null);\n\n  const triggerEl = () =>\n    Array.from(wrapperRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []).find(\n      (el) => !menuRef.current?.contains(el),\n    ) ?? null;\n  const items = () => (menuRef.current ? applyMenuSemantics(menuRef.current) : []);\n\n  // Escape closes, from anywhere — it did nothing at all before. Focus goes back to the\n  // trigger only when it was inside the menu: a panel opened by hover while the user is\n  // typing elsewhere must not yank the caret over here on the way out.\n  useEscapeKey(() => {\n    const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;\n    close();\n    if (hadFocus) triggerEl()?.focus();\n  }, open);\n\n  // Upgrade the markup every render while open (the caller's rows can change), then\n  // honour a pending keyboard open.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const list = items();\n    const want = focusOnOpenRef.current;\n    focusOnOpenRef.current = null;\n    if (want) (want === \"last\" ? list[list.length - 1] : list[0])?.focus();\n  });\n\n  // Trigger state for assistive technology, on whatever element the caller rendered.\n  // Only where the caller has not said something of its own.\n  useLayoutEffect(() => {\n    const el = triggerEl();\n    if (!el) return;\n    if (!el.hasAttribute(\"aria-haspopup\")) el.setAttribute(\"aria-haspopup\", \"menu\");\n    if (el.getAttribute(\"aria-haspopup\") === \"menu\") el.setAttribute(\"aria-expanded\", String(open));\n  });\n\n  /** ↑/↓ roving focus with wrap, Home/End, Tab leaves (and closes); on the trigger,\n   *  Enter/Space/↓ open onto the first item and ↑ onto the last. */\n  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement;\n    const inMenu = menuRef.current?.contains(target) ?? false;\n    if (!inMenu) {\n      if (target !== triggerEl()) return;\n      if (e.key === \"Enter\" || e.key === \" \") {\n        // The trigger's own click handler does the toggling; this only records that\n        // the press came from a keyboard.\n        if (!open) focusOnOpenRef.current = \"first\";\n      } else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const edge = e.key === \"ArrowDown\" ? \"first\" : \"last\";\n        if (open) {\n          const list = items();\n          (edge === \"last\" ? list[list.length - 1] : list[0])?.focus();\n        } else {\n          focusOnOpenRef.current = edge;\n          openedByHoverRef.current = false;\n          setPhase(\"open\");\n        }\n      }\n      return;\n    }\n    if (e.key === \"Tab\") {\n      close();\n      return;\n    }\n    const list = items();\n    if (list.length === 0) return;\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    let next: number | null = null;\n    if (e.key === \"ArrowDown\") next = at < 0 ? 0 : (at + 1) % list.length;\n    else if (e.key === \"ArrowUp\") next = at < 0 ? list.length - 1 : (at - 1 + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === null) return;\n    e.preventDefault();\n    list[next].focus();\n  };\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin. Recomputed on each open; `shiftX` is\n  // subtracted first so the measurement is against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  useLayoutEffect(() => {\n    if (!open) {\n      setShiftX(0);\n      return;\n    }\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const margin = 8;\n    const naturalLeft = rect.left - shiftX;\n    const naturalRight = rect.right - shiftX;\n    let next = 0;\n    if (naturalRight > window.innerWidth - margin) next = window.innerWidth - margin - naturalRight;\n    if (naturalLeft + next < margin) next = margin - naturalLeft;\n    setShiftX(next);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    <div\n      // `...rest` first: the hover handlers below are the whole component, and a caller\n      // passing one of its own must not silently replace them.\n      {...rest}\n      ref={wrapperRef}\n      className={cn(\"relative\", className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onKeyDown={(e) => {\n        rest.onKeyDown?.(e);\n        onKeyDown(e);\n      }}\n    >\n      {trigger({ open, toggle })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            \"absolute top-full z-40 pt-2\",\n            ALIGN_CLASS[align],\n          )}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            ref={menuRef}\n            role=\"menu\"\n            // On the element with the role. It used to sit on the role-less wrapper,\n            // where no screen reader reads a name. The DOM spelling wins;\n            // {@link HoverMenuProps.ariaLabel} is the deprecated alias three apps still\n            // pass, so it stays as the fallback rather than as the answer.\n            aria-label={ariaLabelAttr ?? ariaLabel}\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["list"]}

package/dist/components/icon-picker.d.ts

@@ -54,6 +54,15 @@ interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithoutRe
     searchable?: boolean;
     /** 28 / 32 / 44px tiles. Default "md"; "lg" is the touch-target size. */
     size?: TileSize;
+    /**
+     * Classes for every tile's frame, merged after the kit's own — so a caller's
+     * `size-*` beats `size`'s. For a tile that has to follow a container query or a
+     * breakpoint (keksdose grows its tiles to 40px in a narrow card:
+     * `tileClassName="@max-md:size-10"`) without reaching into the kit's markup with an
+     * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s
+     * dimensions; the tile grows round it.
+     */
+    tileClassName?: string;
     disabled?: boolean;
     labels?: Partial<IconPickerLabels>;
 }
@@ -67,6 +76,6 @@ interface IconPickerProps<T extends string> extends Omit<ComponentPropsWithoutRe
  * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a
  * right-to-left page), Home and End.
  */
-declare function IconPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, searchable, size, disabled, labels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: IconPickerProps<T>): react.JSX.Element;
+declare function IconPicker<T extends string>({ options, value, onChange, allowNone, mixed, activation, searchable, size, tileClassName, disabled, labels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: IconPickerProps<T>): react.JSX.Element;
 
 export { DEFAULT_ICON_PICKER_LABELS, type IconOption, IconPicker, type IconPickerLabels, type IconPickerProps };

package/dist/components/icon-picker.js

@@ -24,6 +24,7 @@ function IconPicker({
   activation = "automatic",
   searchable = false,
   size = "md",
+  tileClassName,
   disabled = false,
   labels,
   className,
@@ -84,7 +85,10 @@ function IconPicker({
               const Icon = item.key === null ? void 0 : byValue.get(item.key)?.icon;
               return Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: TILE_SIZE[size].glyph }) : null;
             },
-            tileClassName: (_item, selected) => selected ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]"
+            tileClassName: (_item, selected) => cn(
+              selected ? "text-[var(--text-primary)]" : "text-[var(--text-secondary)]",
+              tileClassName
+            )
           }
         )
       }

package/dist/components/icon-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\nexport const DEFAULT_ICON_PICKER_LABELS: IconPickerLabels = {\n  none: \"No icon\",\n  mixed: \"Mixed: the selected items have different icons\",\n  search: \"Search icons\",\n  noResults: \"No icons match\",\n  resultCount: (count) => (count === 1 ? \"1 icon\" : `${count} icons`),\n};\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  disabled?: boolean;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  disabled?: boolean;\n  labels?: Partial<IconPickerLabels>;\n}\n\n/** Case- and accent-insensitive, so \"cafe\" finds \"Café\". */\nfunction fold(text: string, locale: string | undefined): string {\n  return text.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").toLocaleLowerCase(locale);\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  disabled = false,\n  labels,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const [query, setQuery] = useState(\"\");\n  const needle = fold(query.trim(), locale);\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            [o.label, ...(o.keywords ?? [])].some((w) => fold(w, locale).includes(needle)),\n          )\n        : options,\n    [options, needle, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled })),\n  ];\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={[ariaDescribedBy, mixed && mixedId].filter(Boolean).join(\" \") || undefined}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          onSelect={onChange}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            selected ? \"text-[var(--text-primary)]\" : \"text-[var(--text-secondary)]\"\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-[var(--text-muted)]\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/icon-picker.tsx"],"sourcesContent":["import { useId, useMemo, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentType } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { SearchField } from \"./search-field\";\nimport { TILE_SIZE, TileRadioGroup } from \"./tile-radio\";\nimport type { TileItem, TileSize } from \"./tile-radio\";\n\nexport interface IconPickerLabels {\n  /** The \"no icon\" tile's name, when `allowNone` is set. */\n  none: string;\n  /** Describes the group while `mixed` is set — a bulk edit over rows that disagree. */\n  mixed: string;\n  /** The search box's accessible name and placeholder, when `searchable` is set. */\n  search: string;\n  /** Shown in place of the tiles when the search matches nothing. */\n  noResults: string;\n  /** Announced as the search narrows the grid. Receives the number of matches. */\n  resultCount: (count: number) => string;\n}\n\nexport const DEFAULT_ICON_PICKER_LABELS: IconPickerLabels = {\n  none: \"No icon\",\n  mixed: \"Mixed: the selected items have different icons\",\n  search: \"Search icons\",\n  noResults: \"No icons match\",\n  resultCount: (count) => (count === 1 ? \"1 icon\" : `${count} icons`),\n};\n\nexport interface IconOption<T extends string> {\n  value: T;\n  /** A Lucide icon, or any component that takes a `className`. Rendered `aria-hidden`\n   *  — the tile's name is `label`. */\n  icon: ComponentType<{ className?: string; \"aria-hidden\"?: boolean }>;\n  /** What the symbol IS, in the user's language (\"Game controller\") — not the icon\n   *  library's identifier (`Gamepad2`), which is nobody's word for anything. */\n  label: string;\n  /** More words the search matches (\"games\", \"play\"), besides `label`. */\n  keywords?: string[];\n  /** A remark read after the name and shown under it in the bubble (\"used by\n   *  Leisure\"). The tile wears a dot while it has one. */\n  note?: string;\n  disabled?: boolean;\n}\n\nexport interface IconPickerProps<T extends string>\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"children\" | \"defaultValue\"> {\n  options: IconOption<T>[];\n  /** The chosen icon, or `null` for none. */\n  value: T | null;\n  onChange: (value: T | null) => void;\n  /** Lead with a \"no icon\" tile whose value is `null`. */\n  allowNone?: boolean;\n  /** See {@link SwatchPickerProps.mixed}: nothing is checked, and the group is\n   *  described as mixed. */\n  mixed?: boolean;\n  /**\n   * \"automatic\" (default): an arrow key moves AND chooses, the APG radio group.\n   * \"manual\": arrows move focus only; Space or Enter chooses. For a picker whose every\n   * change is expensive — a bulk edit that saves as it goes.\n   */\n  activation?: \"automatic\" | \"manual\";\n  /** A search box above the grid, matching `label` and `keywords`. For a set large\n   *  enough that scanning it is slower than typing. */\n  searchable?: boolean;\n  /** 28 / 32 / 44px tiles. Default \"md\"; \"lg\" is the touch-target size. */\n  size?: TileSize;\n  /**\n   * Classes for every tile's frame, merged after the kit's own — so a caller's\n   * `size-*` beats `size`'s. For a tile that has to follow a container query or a\n   * breakpoint (keksdose grows its tiles to 40px in a narrow card:\n   * `tileClassName=\"@max-md:size-10\"`) without reaching into the kit's markup with an\n   * `[&_[role=radio]]` selector. The swatch dot / glyph inside keeps `size`'s\n   * dimensions; the tile grows round it.\n   */\n  tileClassName?: string;\n  disabled?: boolean;\n  labels?: Partial<IconPickerLabels>;\n}\n\n/** Case- and accent-insensitive, so \"cafe\" finds \"Café\". */\nfunction fold(text: string, locale: string | undefined): string {\n  return text.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").toLocaleLowerCase(locale);\n}\n\n/**\n * A grid of symbols that is one radio group, with an optional search.\n *\n * Name the group with `aria-label` or `aria-labelledby`. The name lands on the\n * radiogroup itself, not on the outer box: with `searchable` the outer box also holds\n * the search field, which has a name of its own.\n *\n * Keyboard is {@link SwatchPicker}'s: one tab stop, arrows to move (flipped in a\n * right-to-left page), Home and End.\n */\nexport function IconPicker<T extends string>({\n  options,\n  value,\n  onChange,\n  allowNone = false,\n  mixed = false,\n  activation = \"automatic\",\n  searchable = false,\n  size = \"md\",\n  tileClassName,\n  disabled = false,\n  labels,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: IconPickerProps<T>) {\n  const text = useKitLabels(\"iconPicker\", DEFAULT_ICON_PICKER_LABELS, labels);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale();\n  const mixedId = useId();\n  const [query, setQuery] = useState(\"\");\n  const needle = fold(query.trim(), locale);\n\n  const visible = useMemo(\n    () =>\n      needle\n        ? options.filter((o) =>\n            [o.label, ...(o.keywords ?? [])].some((w) => fold(w, locale).includes(needle)),\n          )\n        : options,\n    [options, needle, locale],\n  );\n  const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);\n  const items: TileItem<T>[] = [\n    // \"None\" stays through a search: it is the way back to no icon, and it matches\n    // no word anybody would type for it.\n    ...(allowNone ? [{ key: null, label: text.none }] : []),\n    ...visible.map((o) => ({ key: o.value, label: o.label, note: o.note, disabled: o.disabled })),\n  ];\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      {searchable && (\n        <SearchField\n          value={query}\n          onChange={setQuery}\n          aria-label={text.search}\n          clearLabel={common.clear}\n          disabled={disabled}\n        />\n      )}\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={[ariaDescribedBy, mixed && mixedId].filter(Boolean).join(\" \") || undefined}\n        aria-disabled={disabled || undefined}\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        <TileRadioGroup\n          items={items}\n          checked={mixed ? undefined : value}\n          onSelect={onChange}\n          activation={activation}\n          disabled={disabled}\n          size={size}\n          renderTile={(item) => {\n            const Icon = item.key === null ? undefined : byValue.get(item.key)?.icon;\n            return Icon ? <Icon aria-hidden className={TILE_SIZE[size].glyph} /> : null;\n          }}\n          tileClassName={(_item, selected) =>\n            cn(\n              selected ? \"text-[var(--text-primary)]\" : \"text-[var(--text-secondary)]\",\n              tileClassName,\n            )\n          }\n        />\n      </div>\n      {needle && visible.length === 0 && (\n        <p className=\"text-xs text-[var(--text-muted)]\">{text.noResults}</p>\n      )}\n      {mixed && (\n        <span id={mixedId} hidden>\n          {text.mixed}\n        </span>\n      )}\n      {searchable && (\n        // Typing moves no focus and the grid changes silently, so the count is said.\n        // `sr-only-fixed`: this sits inside a consumer's markup and must not extend\n        // the document height (see tokens.css).\n        <span role=\"status\" aria-live=\"polite\" aria-atomic className=\"sr-only-fixed\">\n          {needle ? text.resultCount(visible.length) : \"\"}\n        </span>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/measured-grid.d.ts

@@ -0,0 +1,165 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/**
+ * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a
+ * block out of a spreadsheet — and the hook that holds it as a draft.
+ *
+ * Moved from Lenkbank (`shared/ui/measured-grid.tsx`), where four gear editors and a
+ * setpoint dialog type rig measurements into it. Nothing in it knows what a column
+ * holds: the caller passes `{ label, unit }[]`, and the vocabulary of this file is
+ * cells, rows, a caret and a paste. The lexing under it is `@eifi1/ui-kit/table-text`.
+ *
+ * What it is NOT: a `DataTable` mode (that one finds rows among many; this one types
+ * numbers into columns), a spreadsheet (no formulas, no multi-cell selection, no undo
+ * beyond the browser's per-input one), or typed columns — every cell is a string that
+ * should read as a number.
+ */
+/**
+ * Every string the grid can speak — the `measuredGrid` namespace of
+ * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The
+ * ones that carry a number are functions of it, for the reason `DataTableLabels` gives:
+ * the grammar around a count moves with it in most languages.
+ */
+interface MeasuredGridLabels {
+    /** Accessible name of the cells/text toggle. */
+    view: string;
+    cellsView: string;
+    textView: string;
+    addRow: string;
+    /** The row's remove button, given its 1-based number. */
+    removeRow: (row: number) => string;
+    /** Empties the whole table. */
+    clear: string;
+    /** The footer's standing note that a block can be pasted into any cell. */
+    pasteHint: string;
+    /**
+     * Accessible name of one cell's input, given its column's label and 1-based row.
+     * A screen reader in a grid announces the headers on its own when the caret crosses
+     * one; this is what it reads when the caret lands on an input with no crossing — and
+     * what a voice-control user says to reach it.
+     */
+    cell: (column: string, row: number) => string;
+    /** The row-number column's header, which shows only "#". */
+    rowNumber: string;
+    /** The remove-button column's header, which shows nothing. */
+    rowActions: string;
+    /** The grid's description: how its keyboard works. Read once, on entry. */
+    keyboardHint: string;
+    /** The text view could not read this 1-based line of what was typed or pasted. */
+    lineError: (line: number) => string;
+    /** How many filled rows (measured points) the table holds. */
+    points: (count: number) => string;
+    /** How many cells are typed but are not numbers. */
+    problems: (count: number) => string;
+}
+/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`
+ *  (src/i18n), the complete reference a translation is written against. */
+declare const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels;
+/** One column of a measured table: what it holds and what it is measured in. The unit
+ *  is separate from the name because the header shows it small and underneath, and
+ *  because a column with no unit (a count, an index) should not render empty brackets. */
+interface MeasuredGridColumn {
+    label: string;
+    unit?: string;
+}
+/** The two ways to look at the same table. */
+type MeasuredGridView = "cells" | "text";
+interface UseMeasuredRowsOptions {
+    /** Decimals a computed number is rounded to on its way into a cell. Default 4. */
+    digits?: number;
+    /** BCP 47 tag whose decimal mark the cells are written with, else the
+     *  `<UiKitProvider locale>`, else the runtime's. */
+    locale?: string;
+}
+interface MeasuredRows {
+    /** The draft, as text — what the grid shows and edits. */
+    cells: string[][];
+    setCells: (next: string[][]) => void;
+    /** The filled rows as numbers — EMPTY until the table is `ready`. */
+    rows: number[][];
+    /** Replace the whole table with computed numbers (a generated shape, say). */
+    setRows: (next: number[][]) => void;
+    /** At least two filled rows, and every cell in them is a number. */
+    ready: boolean;
+    /** How many cells are typed but are not numbers — what the grid marks invalid. */
+    problems: number;
+    /** Everything `MeasuredGrid` needs, so a caller spreads it in one line. */
+    props: {
+        cells: string[][];
+        onCells: (next: string[][]) => void;
+    };
+}
+/**
+ * The draft a measured table is edited as.
+ *
+ * **Strings, not numbers.** A cell is text while it is being typed — `"-"`, `"1."` and
+ * `"1e"` are all states a number passes through on its way to being one, and a grid
+ * that parses on every keystroke turns each of them into a `NaN` and then into a `0`.
+ * So the draft is text, and the numbers are what falls out when every cell is one.
+ *
+ * **"Whole" is a question this answers**, because every editor asks it before it
+ * offers to save: `ready` wants at least two filled rows with a number in every cell.
+ * An empty cell is a hole in the measurement, not a zero; a wholly empty row is not a
+ * row at all (it is what walking off the bottom of the grid leaves behind).
+ *
+ * `initial` is read once, like `useState`'s.
+ */
+declare function useMeasuredRows(initial: number[][] | (() => number[][]), options?: UseMeasuredRowsOptions): MeasuredRows;
+interface MeasuredGridProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onChange"> {
+    /** What the table is — shown above it, and the grid's accessible name. */
+    label: string;
+    /** A note under the table (which columns a layout expects, say). Also the grid's
+     *  description. */
+    hint?: ReactNode;
+    columns: MeasuredGridColumn[];
+    /** The draft — typically `useMeasuredRows().props`. */
+    cells: string[][];
+    onCells: (next: string[][]) => void;
+    /** Read-only: the cells can still be walked and read, nothing can be changed. */
+    disabled?: boolean;
+    /** Which views the toggle offers, the first being where it opens. Default both;
+     *  one view hides the toggle. */
+    views?: ReadonlyArray<MeasuredGridView>;
+    /** Row height in pixels, for the windowing. Fixed on purpose. Default 28. */
+    rowHeight?: number;
+    /** BCP 47 tag for the decimal mark of cells written by a paste or the text view,
+     *  and for the row numbers; else the `<UiKitProvider locale>`. */
+    locale?: string;
+    labels?: Partial<MeasuredGridLabels>;
+}
+/**
+ * A measured table as a grid of cells, one number each, with a text view beside it.
+ *
+ * The grid is the primary form because a linkage typed off a drawing arrives as
+ * numbers somebody reads out loud, and a textarea made that an exercise in counting
+ * tab characters. The paste still works: a block pasted into any cell fills from that
+ * cell outwards, growing the table to fit. The text view is kept for what a grid is
+ * worst at — reading a thousand-row export back in one piece.
+ *
+ * **It is a grid in the APG sense**, which the Lenkbank original was not (a `<table>`
+ * of inputs, fifteen tab stops per row). One tab stop — the roving tabindex — and the
+ * keyboard inside it, as a spreadsheet has it:
+ *
+ *   - **Arrows** move between cells. Left/Right flip under `dir="rtl"`.
+ *   - **Home/End** go to the first/last column; with Ctrl (or ⌘), to the first/last
+ *     cell of the table. **PageUp/PageDown** move a screenful.
+ *   - **Enter** (and ArrowDown) move down a column, and past the last row ADD one —
+ *     typing down a column is how measured data is entered, and stopping at the last
+ *     row to reach for a button is what makes people paste instead. Shift+Enter moves up.
+ *   - **Typing** replaces the cell: arriving by keyboard selects its text, so the first
+ *     key overwrites it. That is the edit mode data entry wants, entered without a key.
+ *     **F2** edits in place instead (caret at the end). Either way the cell is then
+ *     *editing*: Left/Right move the caret, and cross to the next cell only at the edge
+ *     of the text; Home/End stay in the text. **Escape** puts back what the cell held
+ *     when the caret arrived, and leaves editing.
+ *
+ * APG's grid pattern pairs Enter with F2 as the keys that start editing. Enter is
+ * spent on "next row" here on purpose — it is the one key a person typing a column of
+ * numbers presses between every one of them, and every spreadsheet spends it the same
+ * way — and typing-to-replace makes an explicit "start editing" key unnecessary for
+ * the common case. F2 remains for the uncommon one.
+ */
+declare function MeasuredGrid({ label, hint, columns, cells, onCells, disabled, views, rowHeight, locale: localeProp, labels: labelsProp, className, ...rest }: MeasuredGridProps): react.JSX.Element;
+
+export { DEFAULT_MEASURED_GRID_LABELS, MeasuredGrid, type MeasuredGridColumn, type MeasuredGridLabels, type MeasuredGridProps, type MeasuredGridView, type MeasuredRows, type UseMeasuredRowsOptions, useMeasuredRows };