@charcuterie/ui 0.1.0 → 0.2.0

package/dist/FileDropZone/FileDropZone.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "@charcuterie/logic";
+import { useRef, useState } from "react";
+import { toClassName } from "../toClassName.js";
+/**
+ * The one drag target in the fleet is gallery-downloader's, and it
+ * gets the hard part right: `dragenter`/`dragleave` fire once per
+ * *element* the pointer crosses, not once per zone, so a naive
+ * implementation flickers over every child — and that page keeps a
+ * `dragDepth` counter, which is the correct fix. It is reproduced
+ * below with credit.
+ *
+ * What it has no answer for is the part that cannot be fixed by
+ * counting:
+ *
+ * ### Dragging is pointer-only, so the zone is a label around an input
+ *
+ * There is **no keyboard gesture for drag-and-drop**. WCAG 2.5.7
+ * (AA since 2.2) requires a single-pointer alternative for any
+ * dragging movement, and the honest one has existed since 1995: a
+ * real `<input type="file">`. So this component is a `<label>`
+ * wrapping a visually-hidden input — the whole zone is the label's
+ * click target, Tab reaches the input, Space and Enter open the
+ * picker, and the drop handlers are an *enhancement* on top of a
+ * control that already works without them.
+ *
+ * That ordering is the entire design. Building the drop zone first
+ * and bolting on a "or browse" link is how the fleet's version ended
+ * up with an `alert()` as its error channel and no keyboard path at
+ * all.
+ *
+ * ### `dragover` must be prevented, and the reason is a footgun
+ *
+ * A browser's default for `dragover` is *reject the drop*. Not
+ * preventing it means `drop` never fires — nothing errors, the
+ * cursor shows a "no entry" sign, and the zone looks like it has a
+ * broken handler when it in fact has no handler running at all.
+ *
+ * ### It reports text as well as files
+ *
+ * Dragging a link gives you `text/plain` and an empty `files` list.
+ * A zone that only reads `.files` silently ignores the single most
+ * common thing a user drags into a downloader, which is why
+ * `onDropText` is here rather than being someone's follow-up.
+ */
+export const FileDropZone = ({ accept, className, description, isDisabled = false, isMultiple = false, label, onDropFiles, onDropText, }) => {
+    const baseId = useUniqueId();
+    const inputId = `${baseId}-input`;
+    const labelId = `${baseId}-label`;
+    const descriptionId = `${baseId}-description`;
+    const [isDragActive, setIsDragActive] = useState(false);
+    /**
+     * The counter gallery-downloader's page already keeps, and the
+     * reason it has to exist: `dragenter` fires again for every child
+     * element the pointer crosses, and `dragleave` fires for the one
+     * it left — so a plain boolean turns off halfway across the zone
+     * and the highlight strobes.
+     *
+     * A ref rather than state: nothing renders from the depth itself,
+     * only from whether it is above zero, and a re-render per crossed
+     * child during a drag is exactly the jank this is avoiding.
+     */
+    const dragDepth = useRef(0);
+    const endDrag = () => {
+        dragDepth.current = 0;
+        setIsDragActive(false);
+    };
+    const handleDrop = (dropEvent) => {
+        dropEvent.preventDefault();
+        endDrag();
+        if (isDisabled) {
+            return;
+        }
+        const files = Array.from(dropEvent.dataTransfer.files);
+        if (files.length > 0) {
+            onDropFiles(isMultiple ? files : files.slice(0, 1));
+            return;
+        }
+        const text = dropEvent.dataTransfer.getData("text");
+        if (text !== "") {
+            onDropText?.(text);
+        }
+    };
+    return (_jsxs("label", { className: toClassName("flex cursor-pointer flex-col items-center gap-1 rounded-md border-2 border-border-default border-dashed p-6 text-center transition-colors duration-(--duration-fast) ease-standard", isDragActive
+            ? "border-intent-accent-border bg-intent-accent-surface"
+            : "bg-surface-sunken hover:border-border-strong", isDisabled &&
+            "cursor-not-allowed border-border-subtle text-content-disabled hover:border-border-subtle", 
+        // The ring is on the label, driven by the input inside it —
+        // the input is what actually takes focus, and it is
+        // visually hidden, so a ring on the input paints nothing.
+        "focus-within:outline-solid focus-within:outline-(length:--focus-ring-width) focus-within:outline-offset-(--focus-ring-offset) focus-within:outline-focus-ring", className), htmlFor: inputId, onDragEnter: (dragEvent) => {
+            dragEvent.preventDefault();
+            dragDepth.current += 1;
+            if (dragDepth.current === 1) {
+                setIsDragActive(true);
+            }
+        }, onDragLeave: (dragEvent) => {
+            dragEvent.preventDefault();
+            dragDepth.current -= 1;
+            if (dragDepth.current === 0) {
+                setIsDragActive(false);
+            }
+        }, onDragOver: (dragEvent) => {
+            // Not optional. The default action for `dragover` is to
+            // reject the drop, so without this `onDrop` below never runs
+            // and the zone looks broken rather than unhandled.
+            dragEvent.preventDefault();
+        }, onDrop: handleDrop, children: [_jsx("input", { accept: accept, "aria-describedby": description === undefined
+                    ? undefined
+                    : descriptionId, "aria-labelledby": labelId, className: "sr-only", disabled: isDisabled, id: inputId, multiple: isMultiple, onChange: (changeEvent) => {
+                    const files = Array.from(changeEvent.currentTarget.files ?? []);
+                    if (files.length > 0) {
+                        onDropFiles(files);
+                    }
+                    // Cleared so choosing the *same* file twice fires again.
+                    // A file input keeps its value, so the second pick is not
+                    // a change and the handler never runs — which reads as
+                    // "it ignored me" and is the oldest bug in this control.
+                    changeEvent.currentTarget.value = "";
+                }, type: "file" }), _jsx("span", { className: "font-medium text-content-primary text-sm", id: labelId, children: label }), description === undefined ? null : (_jsx("span", { className: "text-content-secondary text-xs", id: descriptionId, children: description }))] }));
+};
+//# sourceMappingURL=FileDropZone.js.map

package/dist/FileDropZone/FileDropZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDropZone.js","sourceRoot":"","sources":["../../src/FileDropZone/FileDropZone.tsx"],"names":[],"mappings":"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"}

package/dist/LogViewer/LogViewer.d.ts

@@ -0,0 +1,88 @@
+import type { IntentName } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+export type LogLine = {
+    intent?: IntentName;
+    key: string;
+    text: string;
+};
+export type LogViewerProps = {
+    className?: string;
+    /**
+     * Announce new lines to a screen reader. **Off by default**, and
+     * that is a considered choice rather than an oversight — see
+     * below.
+     */
+    isAnnounced?: boolean;
+    /** The pane's accessible name. Required. */
+    label: string;
+    lines: LogLine[];
+    /**
+     * Oldest lines past this are dropped from the DOM. A rip in
+     * progress emits a line every few hundred milliseconds for an
+     * hour, and the browser keeps every node.
+     */
+    maxLines?: number;
+};
+/**
+ * Three repos render a scrolling log pane —
+ * mux-magic's `JobLogsDisclosure` and `StepLogs`, rip-deck's
+ * `LogModal` — and between them they have four defects that this
+ * component exists to not have.
+ *
+ * ### 1. The one that follows nothing
+ *
+ * ```tsx
+ * useEffect(() => {
+ *   const pane = paneRef.current
+ *   if (pane) pane.scrollTop = pane.scrollHeight
+ * }, [])          // ← empty deps
+ * ```
+ *
+ * That is mux-magic's auto-scroll, and it runs **once**, on mount,
+ * when the pane is empty and `scrollHeight` is `clientHeight`. Every
+ * line after it arrives below the fold. It reads as correct, it is
+ * the shape everyone writes, and the log simply never follows.
+ *
+ * ### 2. Following that cannot be escaped
+ *
+ * The naive fix — scroll to the bottom on every render — is worse:
+ * a user scrolling back to read the line that mentioned an error is
+ * yanked to the end twice a second. Following has to be *pinned to
+ * the user's own position*, which is what `isFollowing` below is: it
+ * turns off the moment the user scrolls away and back on when they
+ * return to the bottom, and there is a button for when they do not
+ * want to scroll all that way.
+ *
+ * ### 3. `data-log-id`
+ *
+ * mux-magic's pane carries one. It is a `data-testid` under a
+ * different name — a handle only the test suite can see — and this
+ * package's `sourceRules.test.ts` bans the practice rather than the
+ * spelling. The pane here is found by its `label`, the same query
+ * Playwright makes.
+ *
+ * ### 4. Announcing an hour of build output
+ *
+ * `role="log"` is the correct role and `aria-live` is off unless
+ * asked for. A live log pane emitting a line every 300 ms is a
+ * screen reader that cannot be interrupted and a user who cannot
+ * read anything else on the page — the accessible answer for a
+ * long-running job is a `LiveStatusIndicator` announcing *state*
+ * and a log that is there to be read when wanted. `isAnnounced`
+ * exists for the short case: a five-line result panel where the
+ * lines *are* the outcome.
+ *
+ * ### Not every boolean is a state kind
+ *
+ * `isFollowing` is `useState`, not `useVisibility`, and this is the
+ * first component in the library to say so out loud. The kinds in
+ * `@charcuterie/logic` earn their keep when state is **registered**
+ * (members join a group), **composed** (focus and selection
+ * disagreeing), or **shared** (a trigger and a panel at opposite
+ * ends of a tree). None of that is true here: one component reads
+ * one boolean it wrote itself. Reaching for `useVisibility` because
+ * it is also a boolean would make `isVisible` mean "is following",
+ * which is how a state layer stops meaning anything.
+ */
+export declare const LogViewer: ({ className, isAnnounced, label, lines, maxLines, }: LogViewerProps) => ReactNode;
+//# sourceMappingURL=LogViewer.d.ts.map

package/dist/LogViewer/LogViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.d.ts","sourceRoot":"","sources":["../../src/LogViewer/LogViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOtC,MAAM,MAAM,OAAO,GAAG;IACpB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,OAAO,EAAE,CAAA;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,eAAO,MAAM,SAAS,GAAI,qDAMvB,cAAc,KAAG,SA8FnB,CAAA"}

package/dist/LogViewer/LogViewer.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Button } from "../Button/Button.js";
+import { INTENT_CONTENT_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * Three repos render a scrolling log pane —
+ * mux-magic's `JobLogsDisclosure` and `StepLogs`, rip-deck's
+ * `LogModal` — and between them they have four defects that this
+ * component exists to not have.
+ *
+ * ### 1. The one that follows nothing
+ *
+ * ```tsx
+ * useEffect(() => {
+ *   const pane = paneRef.current
+ *   if (pane) pane.scrollTop = pane.scrollHeight
+ * }, [])          // ← empty deps
+ * ```
+ *
+ * That is mux-magic's auto-scroll, and it runs **once**, on mount,
+ * when the pane is empty and `scrollHeight` is `clientHeight`. Every
+ * line after it arrives below the fold. It reads as correct, it is
+ * the shape everyone writes, and the log simply never follows.
+ *
+ * ### 2. Following that cannot be escaped
+ *
+ * The naive fix — scroll to the bottom on every render — is worse:
+ * a user scrolling back to read the line that mentioned an error is
+ * yanked to the end twice a second. Following has to be *pinned to
+ * the user's own position*, which is what `isFollowing` below is: it
+ * turns off the moment the user scrolls away and back on when they
+ * return to the bottom, and there is a button for when they do not
+ * want to scroll all that way.
+ *
+ * ### 3. `data-log-id`
+ *
+ * mux-magic's pane carries one. It is a `data-testid` under a
+ * different name — a handle only the test suite can see — and this
+ * package's `sourceRules.test.ts` bans the practice rather than the
+ * spelling. The pane here is found by its `label`, the same query
+ * Playwright makes.
+ *
+ * ### 4. Announcing an hour of build output
+ *
+ * `role="log"` is the correct role and `aria-live` is off unless
+ * asked for. A live log pane emitting a line every 300 ms is a
+ * screen reader that cannot be interrupted and a user who cannot
+ * read anything else on the page — the accessible answer for a
+ * long-running job is a `LiveStatusIndicator` announcing *state*
+ * and a log that is there to be read when wanted. `isAnnounced`
+ * exists for the short case: a five-line result panel where the
+ * lines *are* the outcome.
+ *
+ * ### Not every boolean is a state kind
+ *
+ * `isFollowing` is `useState`, not `useVisibility`, and this is the
+ * first component in the library to say so out loud. The kinds in
+ * `@charcuterie/logic` earn their keep when state is **registered**
+ * (members join a group), **composed** (focus and selection
+ * disagreeing), or **shared** (a trigger and a panel at opposite
+ * ends of a tree). None of that is true here: one component reads
+ * one boolean it wrote itself. Reaching for `useVisibility` because
+ * it is also a boolean would make `isVisible` mean "is following",
+ * which is how a state layer stops meaning anything.
+ */
+export const LogViewer = ({ className, isAnnounced = false, label, lines, maxLines = 500, }) => {
+    const paneRef = useRef(null);
+    const [isFollowing, setIsFollowing] = useState(true);
+    const shownLines = lines.length > maxLines
+        ? lines.slice(lines.length - maxLines)
+        : lines;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `shownLines` is read through the DOM, not through the closure — `pane.scrollHeight` is a *consequence* of the lines having rendered, so the linter sees a dependency it cannot trace and calls it unnecessary. Removing it is not a style change: the effect then runs only when `isFollowing` flips, which is mux-magic's `}, [])` bug rebuilt exactly. `yarn lint` runs `--write --unsafe`, so this was applied silently once already and the log stopped following.
+    useEffect(() => {
+        const pane = paneRef.current;
+        if (!pane || !isFollowing) {
+            return;
+        }
+        pane.scrollTop = pane.scrollHeight;
+        // `shownLines` rather than an empty array — this is the whole fix
+        // for defect 1, and the dependency *is* the fix.
+    }, [isFollowing, shownLines]);
+    return (_jsxs("div", { className: toClassName("relative flex flex-col", className), children: [_jsx("div", { "aria-label": label, "aria-live": isAnnounced ? "polite" : "off", className: "max-h-64 overflow-y-auto rounded-md border border-border-subtle bg-surface-sunken p-2 font-mono text-content-secondary text-xs", onScroll: (scrollEvent) => {
+                    const pane = scrollEvent.currentTarget;
+                    // A few pixels of slack, because a fractional device pixel
+                    // ratio means `scrollTop + clientHeight` never lands
+                    // exactly on `scrollHeight` — an equality test here
+                    // un-pins the pane on a 125% display and on nothing else,
+                    // which is the kind of bug that gets reported as "it works
+                    // on my machine".
+                    const isPinnedToBottom = pane.scrollHeight -
+                        pane.scrollTop -
+                        pane.clientHeight <
+                        4;
+                    setIsFollowing(isPinnedToBottom);
+                }, ref: paneRef, role: "log", 
+                // biome-ignore lint/a11y/noNoninteractiveTabindex: a scroll container must be focusable or a keyboard user can see the pane and cannot scroll it — axe's `scrollable-region-focusable`, which fails this component without the line. Chrome started doing it automatically in 2024; Firefox and Safari have not. The rule is right about `<div>`s in general and wrong about scrollers.
+                tabIndex: 0, children: shownLines.length === 0 ? (_jsx("p", { className: "text-content-muted", children: "Waiting for output\u2026" })) : (shownLines.map((line) => (_jsx("p", { className: toClassName("whitespace-pre-wrap break-all", line.intent === undefined
+                        ? null
+                        : INTENT_CONTENT_CLASS[line.intent]), children: line.text }, line.key)))) }), isFollowing ? null : (_jsx(Button, { appearance: "soft", className: "absolute inset-x-0 bottom-2 mx-auto w-fit", intent: "neutral", onClick: () => {
+                    setIsFollowing(true);
+                }, size: "sm", children: "Jump to latest" }))] }));
+};
+//# sourceMappingURL=LogViewer.js.map

package/dist/LogViewer/LogViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogViewer.js","sourceRoot":"","sources":["../../src/LogViewer/LogViewer.tsx"],"names":[],"mappings":"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"}

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,81 @@
+import type { Placement } from "@floating-ui/react";
+import type { ReactElement, ReactNode } from "react";
+export type MenuItem = {
+    icon?: ReactNode;
+    isDisabled?: boolean;
+    key: string;
+    label: ReactNode;
+    onSelect: () => void;
+};
+export type MenuProps = {
+    className?: string;
+    isVisible: boolean;
+    items: MenuItem[];
+    /** Outside press, Escape, and choosing an item all land here. */
+    onDismiss: () => void;
+    placement?: Placement;
+    /** The control the menu hangs off. **Cloned, not wrapped.** */
+    trigger: ReactElement;
+};
+/**
+ * A menu is **not** a listbox, and mux-magic's `TypePicker` is the
+ * fleet's one attempt at telling them apart — it renders
+ * `role="menu"` over items that set a value, which is a listbox
+ * wearing the wrong role. The distinction is what the items *are*:
+ *
+ *  - `menuitem` **does** something. Rename, Delete, Copy path.
+ *  - `option` **is** something. It is a value you are choosing.
+ *
+ * A screen reader announces "menu, 4 items" for one and "listbox,
+ * selected, 2 of 4" for the other, and an agent driving the app
+ * needs the second to know what state it left behind. Getting it
+ * wrong is invisible in a browser and invisible to axe.
+ *
+ * ### There is no `label` prop, and that corrects a lesson
+ *
+ * `Spinner` (M3), `Popover` and `Modal` (M4) all take a **required**
+ * name, because a `role="status"` and a `role="dialog"` take none
+ * from their content. The obvious move here was a `label` prop doing
+ * the same job, and it was written that way first — then measured
+ * as doing nothing.
+ *
+ * `useRole(context, { role: "menu" })` puts **`aria-labelledby` on
+ * the panel pointing at the trigger**, and `aria-labelledby` beats
+ * `aria-label`. So the menu was already named — "Bay 3", from the
+ * button — and the prop was silently discarded. That is also the ARIA
+ * Authoring Practices menu-button pattern, where a menu is named by
+ * the control that opens it.
+ *
+ * The rule the other three teach is therefore narrower than it
+ * looked: **an overlay with no trigger relationship needs its own
+ * name.** A menu has one, so the requirement moves to the trigger —
+ * which `Button` and `IconButton` already enforce.
+ *
+ * ### Roving focus, and the composition `Tabs` already proved
+ *
+ * `RovingFocus` alone this time — there is no selection, because a
+ * menu item is not selected, it is invoked. That is the same
+ * two-kinds argument from the other side: `Tabs` needed both kinds
+ * because a tab is chosen *and* focused, and a menu needs one
+ * because a menu item is only ever focused.
+ *
+ * ### Focus moves in, once, and only on opening
+ *
+ * A menu is one of the few patterns where focus must jump on open —
+ * otherwise the keyboard user who pressed Enter on the trigger is
+ * still on the trigger with a menu they cannot reach. It happens in
+ * the panel's own effect rather than through
+ * `FloatingFocusManager`'s `initialFocus`, because the element to
+ * focus is whichever one `RovingFocus` says is active, and that is
+ * not known until the items have registered.
+ *
+ * ### No type-ahead, deliberately
+ *
+ * The APG lists type-ahead as optional for a menu and required for a
+ * listbox, and none of the fleet's menus are long enough to need it
+ * — the largest has six items. Adding it would mean a keystroke
+ * buffer and a timer in a component that currently has neither, for
+ * a menu you can cross in three arrow presses.
+ */
+export declare const Menu: ({ className, isVisible, items, onDismiss, placement, trigger, }: MenuProps) => ReactNode;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAYnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMpD,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,iEAAiE;IACjE,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,+DAA+D;IAC/D,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,eAAO,MAAM,IAAI,GAAI,iEAOlB,SAAS,KAAG,SA8Ld,CAAA"}

package/dist/Menu/Menu.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { selectTabIndex, useClonedChild, useRovingFocus, } from "@charcuterie/logic";
+import { autoUpdate, FloatingFocusManager, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { useEffect, useRef } from "react";
+import { toClassName } from "../toClassName.js";
+import { MenuAction } from "./MenuAction.js";
+/**
+ * A menu is **not** a listbox, and mux-magic's `TypePicker` is the
+ * fleet's one attempt at telling them apart — it renders
+ * `role="menu"` over items that set a value, which is a listbox
+ * wearing the wrong role. The distinction is what the items *are*:
+ *
+ *  - `menuitem` **does** something. Rename, Delete, Copy path.
+ *  - `option` **is** something. It is a value you are choosing.
+ *
+ * A screen reader announces "menu, 4 items" for one and "listbox,
+ * selected, 2 of 4" for the other, and an agent driving the app
+ * needs the second to know what state it left behind. Getting it
+ * wrong is invisible in a browser and invisible to axe.
+ *
+ * ### There is no `label` prop, and that corrects a lesson
+ *
+ * `Spinner` (M3), `Popover` and `Modal` (M4) all take a **required**
+ * name, because a `role="status"` and a `role="dialog"` take none
+ * from their content. The obvious move here was a `label` prop doing
+ * the same job, and it was written that way first — then measured
+ * as doing nothing.
+ *
+ * `useRole(context, { role: "menu" })` puts **`aria-labelledby` on
+ * the panel pointing at the trigger**, and `aria-labelledby` beats
+ * `aria-label`. So the menu was already named — "Bay 3", from the
+ * button — and the prop was silently discarded. That is also the ARIA
+ * Authoring Practices menu-button pattern, where a menu is named by
+ * the control that opens it.
+ *
+ * The rule the other three teach is therefore narrower than it
+ * looked: **an overlay with no trigger relationship needs its own
+ * name.** A menu has one, so the requirement moves to the trigger —
+ * which `Button` and `IconButton` already enforce.
+ *
+ * ### Roving focus, and the composition `Tabs` already proved
+ *
+ * `RovingFocus` alone this time — there is no selection, because a
+ * menu item is not selected, it is invoked. That is the same
+ * two-kinds argument from the other side: `Tabs` needed both kinds
+ * because a tab is chosen *and* focused, and a menu needs one
+ * because a menu item is only ever focused.
+ *
+ * ### Focus moves in, once, and only on opening
+ *
+ * A menu is one of the few patterns where focus must jump on open —
+ * otherwise the keyboard user who pressed Enter on the trigger is
+ * still on the trigger with a menu they cannot reach. It happens in
+ * the panel's own effect rather than through
+ * `FloatingFocusManager`'s `initialFocus`, because the element to
+ * focus is whichever one `RovingFocus` says is active, and that is
+ * not known until the items have registered.
+ *
+ * ### No type-ahead, deliberately
+ *
+ * The APG lists type-ahead as optional for a menu and required for a
+ * listbox, and none of the fleet's menus are long enough to need it
+ * — the largest has six items. Adding it would mean a keystroke
+ * buffer and a timer in a component that currently has neither, for
+ * a menu you can cross in three arrow presses.
+ */
+export const Menu = ({ className, isVisible, items, onDismiss, placement = "bottom-start", trigger, }) => {
+    const itemElements = useRef(new Map());
+    const panelElement = useRef(null);
+    const focus = useRovingFocus();
+    const { activeValue, registeredValues, setActiveValue } = focus;
+    const [firstValue] = registeredValues;
+    const { context, floatingStyles, refs } = useFloating({
+        open: isVisible,
+        onOpenChange: (isNextVisible) => {
+            if (!isNextVisible) {
+                onDismiss();
+            }
+        },
+        placement,
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+        strategy: "fixed",
+        whileElementsMounted: autoUpdate,
+    });
+    const { getFloatingProps, getReferenceProps } = useInteractions([
+        useDismiss(context),
+        useRole(context, { role: "menu" }),
+    ]);
+    const clonedTrigger = useClonedChild(trigger, {
+        ...getReferenceProps(),
+        ref: refs.setReference,
+    });
+    /**
+     * The other half of the `isConnected` guard below. If the ref
+     * fired while the node was still detached, nothing has shown the
+     * popover — and a `[popover]` that was never shown is
+     * `display: none`, so the menu renders, passes typecheck, and is
+     * invisible to `getByRole` and to a user alike.
+     *
+     * Effects run after the tree is connected, so this is the
+     * backstop. It is idempotent: `:popover-open` is the same question
+     * the ref asks.
+     */
+    useEffect(() => {
+        const panel = panelElement.current;
+        if (isVisible &&
+            panel?.isConnected &&
+            !panel.matches(":popover-open")) {
+            panel.showPopover();
+        }
+    }, [isVisible]);
+    /**
+     * Opening **makes** a member active, and this is the step the
+     * first version was missing.
+     *
+     * `RovingFocus` leaves `activeValue` at `null` until something
+     * sets it — `selectTabIndex` covers the first paint by giving the
+     * tab stop to `registeredValues[0]` while it is still null, which
+     * is exactly why nothing looked wrong: the menu had a correct tab
+     * stop, correct roles, and no focus. `Tabs` never hit it because a
+     * tab bar seeds itself from its selected key.
+     *
+     * Re-running on every open is deliberate. The APG says a menu
+     * opens on its first item, so a menu reopened after arrowing to
+     * the third one starts at the top again rather than resuming a
+     * position the user has forgotten.
+     */
+    useEffect(() => {
+        if (!isVisible || firstValue === undefined) {
+            return;
+        }
+        setActiveValue(firstValue);
+    }, [firstValue, isVisible, setActiveValue]);
+    useEffect(() => {
+        if (!isVisible || activeValue === null) {
+            return;
+        }
+        itemElements.current.get(activeValue)?.focus();
+    }, [activeValue, isVisible]);
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingFocusManager, { context: context, 
+                // `false`, so Tab leaves the menu and lands on the next
+                // control in the page — which is what closes it, through
+                // `useDismiss`. A trapped menu is a dialog.
+                modal: false, 
+                // Focus is moved by the effect above, to whichever item
+                // `RovingFocus` made active. Letting the manager also aim
+                // it is two owners for one caret.
+                initialFocus: -1, children: _jsx("div", { ...getFloatingProps(), className: toClassName("inset-auto m-0 flex min-w-48 flex-col gap-0.5 rounded-md border border-border-default bg-surface-overlay p-1 shadow-medium", className), onKeyDown: (keyEvent) => {
+                        const commands = {
+                            ArrowDown: focus.next,
+                            ArrowUp: focus.previous,
+                            End: focus.last,
+                            Home: focus.first,
+                        };
+                        const command = commands[keyEvent.key];
+                        if (command) {
+                            // Arrow keys scroll the page by default, and a menu
+                            // that scrolls the document behind it while moving
+                            // focus is the hand-rolled version of this
+                            // component.
+                            keyEvent.preventDefault();
+                            command();
+                        }
+                    }, popover: "manual", ref: (node) => {
+                        refs.setFloating(node);
+                        panelElement.current = node;
+                        // A ref callback rather than an effect, for the same
+                        // reason as `Popover`: a `[popover]` is
+                        // `display: none` until shown, and every child effect
+                        // — including the focus move above — would otherwise
+                        // be aiming at a hidden element.
+                        //
+                        // `isConnected` is the guard `Popover` does not need
+                        // and this does. `FloatingFocusManager` renders a pair
+                        // of focus guards around its child, so React commits
+                        // this subtree in an order where the ref can fire
+                        // while the node is still detached — and
+                        // `showPopover()` on a disconnected element throws
+                        // `InvalidStateError`, which surfaces as an unhandled
+                        // rejection rather than as a failing assertion.
+                        if (node?.isConnected &&
+                            !node.matches(":popover-open")) {
+                            node.showPopover();
+                        }
+                    }, 
+                    // Duplicated from `getFloatingProps()` on purpose, and
+                    // the two cannot differ — `useRole(context, { role:
+                    // "menu" })` above is where it comes from. Stated here
+                    // because a linter cannot see a role through a spread.
+                    role: "menu", style: floatingStyles, children: items.map((item) => (_jsx(MenuAction, { item: item, onDismiss: onDismiss, register: focus.register, tabIndex: selectTabIndex(focus, item.key), trackElement: (key, element) => {
+                            if (element) {
+                                itemElements.current.set(key, element);
+                            }
+                            else {
+                                itemElements.current.delete(key);
+                            }
+                        } }, item.key))) }) })) : null] }));
+};
+//# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"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"}

package/dist/Menu/MenuAction.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+import type { MenuItem } from "./Menu.tsx";
+export type MenuActionProps = {
+    item: MenuItem;
+    onDismiss: () => void;
+    /** `RovingFocus.register` — membership of the arrow-key group. */
+    register: (value: string) => () => void;
+    tabIndex: number;
+    trackElement: (key: string, element: HTMLButtonElement | null) => void;
+};
+/**
+ * Its own file because **registration is an effect**, and an effect
+ * cannot run in a loop — the same reason `TabTrigger` and
+ * `AccordionSection` are separate. Any member of a registering group
+ * ends up shaped like this.
+ *
+ * A disabled item is simply not registered, so the arrow keys skip
+ * it without any command in `RovingFocus` knowing what "disabled"
+ * means. It stays in the DOM and stays announced, which is the
+ * difference between "you cannot do this right now" and "this does
+ * not exist".
+ */
+export declare const MenuAction: ({ item, onDismiss, register, tabIndex, trackElement, }: MenuActionProps) => ReactNode;
+//# sourceMappingURL=MenuAction.d.ts.map