@charcuterie/ui 1.0.1 → 2.0.0

package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.d.ts

@@ -0,0 +1,35 @@
+import type { ColorSchemeApplier, ColorSchemePersistence, ColorSchemeResolver } from "@charcuterie/logic";
+import type { ReactNode } from "react";
+import type { ColorSchemeIcons, ColorSchemeToggleProps } from "../ColorSchemeToggle/ColorSchemeToggle.tsx";
+export type ColorSchemeSwitcherProps = Pick<ColorSchemeToggleProps, "appearance" | "className" | "isDisabled" | "label" | "order" | "size"> & {
+    /** Override where the resolved scheme is written. Default `<html>`. */
+    apply?: ColorSchemeApplier;
+    icons: ColorSchemeIcons;
+    /** Override persistence. Default `localStorage` under `storageKey`. */
+    persistence?: ColorSchemePersistence;
+    /**
+     * Override the OS resolver. Default `matchMedia`. This is the seam
+     * the image-viewer passes Electron `nativeTheme` into, and a
+     * future React-Native app passes `Appearance` — the whole reason
+     * the browser dependency is isolated to this one layer.
+     */
+    resolver?: ColorSchemeResolver;
+    storageKey?: string;
+};
+/**
+ * The connected colour-scheme switcher — Layer 3, and the only
+ * layer that touches the browser.
+ *
+ * It is a thin wrapper: it wires `useColorScheme` to the three
+ * browser defaults from `@charcuterie/logic/browser`
+ * (`matchMedia` + `localStorage` + `data-scheme` on `<html>`), and
+ * renders the presentational `ColorSchemeToggle`. Every seam is
+ * overridable, so a non-browser host swaps `resolver`/`persistence`/
+ * `apply` and the same component drives Electron or React-Native.
+ *
+ * The seams are built once (lazy `useState`) so the `matchMedia`
+ * query and the core survive re-renders and StrictMode's double
+ * mount.
+ */
+export declare const ColorSchemeSwitcher: ({ apply, icons, order, persistence, resolver, storageKey, ...toggleProps }: ColorSchemeSwitcherProps) => ReactNode;
+//# sourceMappingURL=ColorSchemeSwitcher.d.ts.map

package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeSwitcher.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,kBAAkB,EAClB,sBAAsB,EACtB,mBAAmB,EACpB,MAAM,oBAAoB,CAAA;AAO3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EACV,gBAAgB,EAChB,sBAAsB,EACvB,MAAM,4CAA4C,CAAA;AAGnD,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,sBAAsB,EACpB,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,CACT,GAAG;IACF,uEAAuE;IACvE,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,KAAK,EAAE,gBAAgB,CAAA;IACvB,uEAAuE;IACvE,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,mBAAmB,CAAA;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,GAAI,4EAQjC,wBAAwB,KAAG,SAsB7B,CAAA"}

package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useColorScheme } from "@charcuterie/logic";
+import { dataSchemeApplier, localStoragePersistence, matchMediaResolver, } from "@charcuterie/logic/browser";
+import { useState } from "react";
+import { ColorSchemeToggle } from "../ColorSchemeToggle/ColorSchemeToggle.js";
+/**
+ * The connected colour-scheme switcher — Layer 3, and the only
+ * layer that touches the browser.
+ *
+ * It is a thin wrapper: it wires `useColorScheme` to the three
+ * browser defaults from `@charcuterie/logic/browser`
+ * (`matchMedia` + `localStorage` + `data-scheme` on `<html>`), and
+ * renders the presentational `ColorSchemeToggle`. Every seam is
+ * overridable, so a non-browser host swaps `resolver`/`persistence`/
+ * `apply` and the same component drives Electron or React-Native.
+ *
+ * The seams are built once (lazy `useState`) so the `matchMedia`
+ * query and the core survive re-renders and StrictMode's double
+ * mount.
+ */
+export const ColorSchemeSwitcher = ({ apply, icons, order, persistence, resolver, storageKey, ...toggleProps }) => {
+    const [seams] = useState(() => ({
+        apply: apply ?? dataSchemeApplier(),
+        persistence: persistence ?? localStoragePersistence(storageKey),
+        resolver: resolver ?? matchMediaResolver(),
+    }));
+    const { cycle, mode } = useColorScheme({
+        ...seams,
+        order,
+    });
+    return (_jsx(ColorSchemeToggle, { ...toggleProps, icons: icons, mode: mode, onCycle: cycle, order: order }));
+};
+//# sourceMappingURL=ColorSchemeSwitcher.js.map

package/dist/ColorSchemeSwitcher/ColorSchemeSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeSwitcher.js","sourceRoot":"","sources":["../../src/ColorSchemeSwitcher/ColorSchemeSwitcher.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AACnD,OAAO,EACL,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,4BAA4B,CAAA;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAMhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA4C,CAAA;AA0B9E;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,GAAG,WAAW,EACW,EAAa,EAAE;IACxC,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,KAAK,IAAI,iBAAiB,EAAE;QACnC,WAAW,EACT,WAAW,IAAI,uBAAuB,CAAC,UAAU,CAAC;QACpD,QAAQ,EAAE,QAAQ,IAAI,kBAAkB,EAAE;KAC3C,CAAC,CAAC,CAAA;IAEH,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,cAAc,CAAC;QACrC,GAAG,KAAK;QACR,KAAK;KACN,CAAC,CAAA;IAEF,OAAO,CACL,KAAC,iBAAiB,OACZ,WAAW,EACf,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/ColorSchemeToggle/ColorSchemeToggle.d.ts

@@ -0,0 +1,54 @@
+import type { ColorSchemeMode } from "@charcuterie/logic";
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+import type { IntentAppearance } from "../intentStyles.ts";
+/**
+ * One `ReactNode` per mode. The library ships **no icons** — lucide
+ * (ISC) is the fleet recommendation — so an app passes its own
+ * `Sun` / `Moon` / `Monitor`, exactly as `IconButton` takes its
+ * glyph as `children`
+ * ([decision](../../../../docs/decisions/2026-07-29-ship-no-icons-and-no-symbol-glyphs.md)).
+ */
+export type ColorSchemeIcons = Record<ColorSchemeMode, ReactNode>;
+export type ColorSchemeToggleProps = {
+    appearance?: IntentAppearance;
+    className?: string;
+    icons: ColorSchemeIcons;
+    isDisabled?: boolean;
+    /**
+     * Builds the accessible name from the current and next mode.
+     * Default announces the current mode and where a press goes —
+     * "Colour scheme: dark. Activate to switch to system." — so the
+     * name updates as the control cycles and
+     * `getByRole("button", { name: /colour scheme/i })` resolves.
+     */
+    label?: (mode: ColorSchemeMode, nextMode: ColorSchemeMode) => string;
+    mode: ColorSchemeMode;
+    /**
+     * Called with the next mode on activation. **Controlled**: this
+     * component stores nothing — it renders `mode` and reports intent,
+     * which is what keeps it free of `matchMedia`/`document` and
+     * usable in any runtime. `<ColorSchemeSwitcher>` wires this to the
+     * `useColorScheme` hook; a plain consumer wires it to its own
+     * state.
+     */
+    onCycle: (nextMode: ColorSchemeMode) => void;
+    order?: readonly ColorSchemeMode[];
+    size?: ControlSize;
+};
+/**
+ * The cycling colour-scheme button — light → dark → system → light.
+ *
+ * Layer 2 of the three: presentational and controlled, with no
+ * browser coupling. It is an `IconButton`, so it inherits the one
+ * rule that makes the fleet agent-drivable — a glyph is not a name,
+ * and this control's name states the current mode rather than
+ * leaving a screen reader to read a sun path as nothing.
+ *
+ * A *segmented* all-three-visible form was considered and deferred
+ * (owner chose cycling-only, 2026-08-03); `icons` and `order` are
+ * shaped so a `ColorSchemePicker` could join later without changing
+ * this API.
+ */
+export declare const ColorSchemeToggle: ({ appearance, className, icons, isDisabled, label, mode, onCycle, order, size, }: ColorSchemeToggleProps) => ReactNode;
+//# sourceMappingURL=ColorSchemeToggle.d.ts.map

package/dist/ColorSchemeToggle/ColorSchemeToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeToggle.d.ts","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAKzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,CACnC,eAAe,EACf,SAAS,CACV,CAAA;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,gBAAgB,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,CACN,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,eAAe,KACtB,MAAM,CAAA;IACX,IAAI,EAAE,eAAe,CAAA;IACrB;;;;;;;OAOG;IACH,OAAO,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAA;IAC5C,KAAK,CAAC,EAAE,SAAS,eAAe,EAAE,CAAA;IAClC,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAcD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,GAAI,kFAU/B,sBAAsB,KAAG,SAiB3B,CAAA"}

package/dist/ColorSchemeToggle/ColorSchemeToggle.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DEFAULT_COLOR_SCHEME_ORDER, nextColorSchemeMode, } from "@charcuterie/logic";
+import { IconButton } from "../IconButton/IconButton.js";
+const MODE_LABEL = {
+    dark: "Dark",
+    light: "Light",
+    system: "System",
+};
+const defaultLabel = (mode, nextMode) => `Colour scheme: ${MODE_LABEL[mode]}. Activate to switch to ${MODE_LABEL[nextMode]}.`;
+/**
+ * The cycling colour-scheme button — light → dark → system → light.
+ *
+ * Layer 2 of the three: presentational and controlled, with no
+ * browser coupling. It is an `IconButton`, so it inherits the one
+ * rule that makes the fleet agent-drivable — a glyph is not a name,
+ * and this control's name states the current mode rather than
+ * leaving a screen reader to read a sun path as nothing.
+ *
+ * A *segmented* all-three-visible form was considered and deferred
+ * (owner chose cycling-only, 2026-08-03); `icons` and `order` are
+ * shaped so a `ColorSchemePicker` could join later without changing
+ * this API.
+ */
+export const ColorSchemeToggle = ({ appearance = "ghost", className, icons, isDisabled = false, label = defaultLabel, mode, onCycle, order = DEFAULT_COLOR_SCHEME_ORDER, size = "md", }) => {
+    const nextMode = nextColorSchemeMode(mode, order);
+    return (_jsx(IconButton, { appearance: appearance, className: className, isDisabled: isDisabled, label: label(mode, nextMode), onClick: () => {
+            onCycle(nextMode);
+        }, size: size, children: icons[mode] }));
+};
+//# sourceMappingURL=ColorSchemeToggle.js.map

package/dist/ColorSchemeToggle/ColorSchemeToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeToggle.js","sourceRoot":"","sources":["../../src/ColorSchemeToggle/ColorSchemeToggle.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,oBAAoB,CAAA;AAI3B,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA8B,CAAA;AA6CzD,MAAM,UAAU,GAAoC;IAClD,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;CACjB,CAAA;AAED,MAAM,YAAY,GAAG,CACnB,IAAqB,EACrB,QAAyB,EACzB,EAAE,CACF,kBAAkB,UAAU,CAAC,IAAI,CAAC,2BAA2B,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAA;AAEtF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,UAAU,GAAG,OAAO,EACpB,SAAS,EACT,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,KAAK,GAAG,YAAY,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,GAAG,0BAA0B,EAClC,IAAI,GAAG,IAAI,GACY,EAAa,EAAE;IACtC,MAAM,QAAQ,GAAG,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;IAEjD,OAAO,CACL,KAAC,UAAU,IACT,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAC,EAC5B,OAAO,EAAE,GAAG,EAAE;YACZ,OAAO,CAAC,QAAQ,CAAC,CAAA;QACnB,CAAC,EACD,IAAI,EAAE,IAAI,YAET,KAAK,CAAC,IAAI,CAAC,GACD,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/Combobox/Combobox.d.ts

@@ -0,0 +1,54 @@
+import type { ReactElement, ReactNode } from "react";
+import type { ListboxItem } from "../Listbox/Listbox.tsx";
+export type ComboboxProps = {
+    className?: string;
+    /** Shown when nothing matches. Default "No matches". */
+    emptyLabel?: string;
+    /** The error panel state (`PathPicker`). */
+    error?: ReactNode;
+    /** A sticky footer hint (`LinkPicker`'s "type a path directly"). */
+    footer?: ReactNode;
+    /** Enter commits the raw query as a value (`AssFieldPicker`). */
+    isCreatable?: boolean;
+    /** The loading panel state. */
+    isLoading?: boolean;
+    /** Multi-select, rendered as removable chips (`LanguageCodeField`). */
+    isMultiple?: boolean;
+    /** Windowing. Auto-on above ~100 options when left undefined. */
+    isVirtualized?: boolean;
+    isVisible: boolean;
+    onDismiss: () => void;
+    onSelect: (value: string) => void;
+    /**
+     * Omit to filter internally by `textValue`; supply to own the query
+     * (a react-query search, say), in which case `options` arrives
+     * pre-filtered.
+     */
+    onQueryChange?: (query: string) => void;
+    options: readonly ListboxItem[];
+    placeholder?: string;
+    /** Controlled query; uncontrolled when absent. */
+    query?: string;
+    selectedValue?: readonly string[] | string;
+    /** The control the popup hangs off. **Cloned, not wrapped.** */
+    trigger: ReactElement;
+};
+/**
+ * The searchable, filtering, virtualized picker — the other half of
+ * the picker family, and the one that consolidates the fleet's
+ * hand-rolled dropdowns.
+ *
+ * The ARIA contract differs from `Listbox` and the difference is
+ * forced, not stylistic: **focus stays in the text input**, so the
+ * active option is tracked with `aria-activedescendant`, not roving
+ * tabindex. The input is the `role="combobox"`; the popup is a
+ * `role="listbox"`. Arrows move the active descendant while the caret
+ * stays put; Enter selects; Escape clears the query before it closes.
+ *
+ * Filtering is the consumer's when `onQueryChange` is supplied (the
+ * `options` then arrive pre-filtered — a react-query search owns the
+ * debounce, the request token, the cache), and internal on `textValue`
+ * otherwise.
+ */
+export declare const Combobox: ({ className, emptyLabel, error, footer, isCreatable, isLoading, isMultiple, isVirtualized, isVisible, onDismiss, onQueryChange, onSelect, options, placeholder, query, selectedValue, trigger, }: ComboboxProps) => ReactNode;
+//# sourceMappingURL=Combobox.d.ts.map

package/dist/Combobox/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAMzD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,oEAAoE;IACpE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iEAAiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,CAAA;IAC1C,gEAAgE;IAChE,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AA4BD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,GAAI,kMAkBtB,aAAa,KAAG,SAmZlB,CAAA"}

package/dist/Combobox/Combobox.js

@@ -0,0 +1,216 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FloatingFocusManager, FloatingPortal, } from "@floating-ui/react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useEffect, useRef, useState } from "react";
+import { PANEL_SURFACE_CLASS } from "../Overlay/overlayPanelClass.js";
+import { useAnchoredOverlay } from "../Overlay/useAnchoredOverlay.js";
+import { toClassName } from "../toClassName.js";
+import { ComboboxOption } from "./ComboboxOption.js";
+const AUTO_VIRTUALIZE_THRESHOLD = 100;
+const getOptionText = (item) => (item.textValue ??
+    (typeof item.label === "string" ? item.label : "")).toLowerCase();
+const nextEnabledIndex = (options, from, step) => {
+    for (let index = from + step; index >= 0 && index < options.length; index += step) {
+        if (!options[index]?.isDisabled) {
+            return index;
+        }
+    }
+    return from;
+};
+/**
+ * The searchable, filtering, virtualized picker — the other half of
+ * the picker family, and the one that consolidates the fleet's
+ * hand-rolled dropdowns.
+ *
+ * The ARIA contract differs from `Listbox` and the difference is
+ * forced, not stylistic: **focus stays in the text input**, so the
+ * active option is tracked with `aria-activedescendant`, not roving
+ * tabindex. The input is the `role="combobox"`; the popup is a
+ * `role="listbox"`. Arrows move the active descendant while the caret
+ * stays put; Enter selects; Escape clears the query before it closes.
+ *
+ * Filtering is the consumer's when `onQueryChange` is supplied (the
+ * `options` then arrive pre-filtered — a react-query search owns the
+ * debounce, the request token, the cache), and internal on `textValue`
+ * otherwise.
+ */
+export const Combobox = ({ className, emptyLabel = "No matches", error, footer, isCreatable = false, isLoading = false, isMultiple = false, isVirtualized, isVisible, onDismiss, onQueryChange, onSelect, options, placeholder = "Search…", query, selectedValue, trigger, }) => {
+    const inputElement = useRef(null);
+    const listElement = useRef(null);
+    const isQueryControlled = query !== undefined;
+    const [internalQuery, setInternalQuery] = useState("");
+    const currentQuery = query ?? internalQuery;
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [selected, setSelected] = useState(selectedValue === undefined
+        ? []
+        : typeof selectedValue === "string"
+            ? [selectedValue]
+            : [...selectedValue]);
+    // The consumer owns filtering when it owns the query; otherwise it is
+    // a plain `textValue` contains-match.
+    const filtered = onQueryChange === undefined
+        ? options.filter((option) => getOptionText(option).includes(currentQuery.toLowerCase()))
+        : options;
+    const isWindowed = isVirtualized ??
+        filtered.length > AUTO_VIRTUALIZE_THRESHOLD;
+    const { clonedTrigger, context, floatingStyles, getFloatingProps, setFloating, triggerId, } = useAnchoredOverlay({
+        // Escape is handled here so it can clear the query before closing.
+        isEscapeDismissable: false,
+        isVisible,
+        maxHeightPx: 384,
+        offsetValue: 4,
+        onDismiss,
+        role: "listbox",
+        trigger,
+    });
+    // The panel wraps an input *and* a listbox, so the wrapper is a
+    // plain div: the `role="listbox"`/`id` `useRole` produced go on the
+    // inner list, which is what the trigger's and input's `aria-controls`
+    // then resolve to.
+    const { id: listboxId, role: _discardedPanelRole, ...floatingProps } = getFloatingProps();
+    const setQuery = (nextQuery) => {
+        if (!isQueryControlled) {
+            setInternalQuery(nextQuery);
+        }
+        setActiveIndex(0);
+        onQueryChange?.(nextQuery);
+    };
+    useEffect(() => {
+        if (isVisible) {
+            inputElement.current?.focus();
+        }
+    }, [isVisible]);
+    const rowVirtualizer = useVirtualizer({
+        count: filtered.length,
+        estimateSize: () => 36,
+        getScrollElement: () => listElement.current,
+        overscan: 8,
+    });
+    const optionDomId = (value) => `${listboxId}-opt-${value}`;
+    // `activeIndex` is seeded at 0 on open and on every query reset, which
+    // can land on a disabled option; arrowing skips disabled but the seed
+    // does not. Resolve to the nearest enabled row and drive the highlight,
+    // `aria-activedescendant`, arrow moves and commit off *this* — never the
+    // raw index — so a disabled option is neither announced nor committable.
+    const resolvedActiveIndex = filtered.length === 0
+        ? -1
+        : filtered[activeIndex] !== undefined &&
+            !filtered[activeIndex]?.isDisabled
+            ? activeIndex
+            : nextEnabledIndex(filtered, -1, 1);
+    const activeValue = resolvedActiveIndex < 0
+        ? undefined
+        : filtered[resolvedActiveIndex]?.value;
+    const commitValue = (value) => {
+        if (isMultiple) {
+            setSelected((previous) => previous.includes(value)
+                ? previous.filter((one) => one !== value)
+                : [...previous, value]);
+            onSelect(value);
+            // Multi-select stays open and clears the query for the next one.
+            setQuery("");
+            inputElement.current?.focus();
+            return;
+        }
+        setSelected([value]);
+        onSelect(value);
+        onDismiss();
+    };
+    const handleKeyDown = (keyEvent) => {
+        if (keyEvent.key === "ArrowDown") {
+            keyEvent.preventDefault();
+            setActiveIndex(nextEnabledIndex(filtered, resolvedActiveIndex, 1));
+            return;
+        }
+        if (keyEvent.key === "ArrowUp") {
+            keyEvent.preventDefault();
+            setActiveIndex(nextEnabledIndex(filtered, resolvedActiveIndex, -1));
+            return;
+        }
+        if (keyEvent.key === "Enter" ||
+            // Tab-to-accept (`PathPicker`): the active suggestion is taken.
+            // Single-select only — in multi-select `commitValue` refocuses the
+            // input, so accepting on Tab would trap forward focus in the field.
+            (keyEvent.key === "Tab" &&
+                !keyEvent.shiftKey &&
+                !isMultiple &&
+                activeValue !== undefined)) {
+            if (activeValue !== undefined) {
+                keyEvent.preventDefault();
+                commitValue(activeValue);
+                return;
+            }
+            // Creatable: Enter on a query with no match commits it raw.
+            if (isCreatable &&
+                keyEvent.key === "Enter" &&
+                currentQuery.trim().length > 0) {
+                keyEvent.preventDefault();
+                commitValue(currentQuery.trim());
+            }
+            return;
+        }
+        if (keyEvent.key === "Escape") {
+            // Clears the query first, closes only when it is already empty.
+            if (currentQuery.length > 0) {
+                keyEvent.preventDefault();
+                setQuery("");
+                return;
+            }
+            onDismiss();
+        }
+    };
+    // Keep the active row in view — a real bug in every fleet picker:
+    // arrowing past the panel edge did not scroll.
+    useEffect(() => {
+        if (!isVisible) {
+            return;
+        }
+        if (isWindowed) {
+            rowVirtualizer.scrollToIndex(resolvedActiveIndex);
+            return;
+        }
+        if (activeValue !== undefined) {
+            listElement.current
+                ?.querySelector(`#${CSS.escape(`${listboxId}-opt-${activeValue}`)}`)
+                ?.scrollIntoView({ block: "nearest" });
+        }
+    }, [
+        resolvedActiveIndex,
+        activeValue,
+        isVisible,
+        isWindowed,
+        listboxId,
+        rowVirtualizer.scrollToIndex,
+    ]);
+    const renderOption = (option, index) => (_jsx(ComboboxOption, { id: optionDomId(option.value), isActive: index === resolvedActiveIndex, isSelected: selected.includes(option.value), item: option, onSelect: commitValue, posInSet: isWindowed ? index + 1 : undefined, setSize: isWindowed ? filtered.length : undefined }, option.value));
+    return (_jsxs(_Fragment, { children: [clonedTrigger, isVisible ? (_jsx(FloatingPortal, { children: _jsx(FloatingFocusManager, { context: context, initialFocus: inputElement, modal: false, children: _jsxs("div", { ...floatingProps, className: toClassName(PANEL_SURFACE_CLASS, "z-[var(--layer-modal)] flex min-w-64 flex-col overflow-hidden", className), ref: setFloating, style: floatingStyles, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1 border-border-subtle border-b p-2", children: [isMultiple
+                                        ? selected.map((value) => {
+                                            const chip = options.find((option) => option.value === value);
+                                            return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-sm bg-intent-neutral-surface px-1.5 py-0.5 text-content-primary text-xs", children: [chip?.textValue ?? value, _jsx("button", { "aria-label": `Remove ${chip?.textValue ?? value}`, className: "cursor-pointer text-content-secondary hover:text-content-primary", onClick: () => {
+                                                            setSelected((previous) => previous.filter((one) => one !== value));
+                                                            // Mirror the list toggle-off: the parent
+                                                            // tracks selection through `onSelect`, so a
+                                                            // chip removal must report the same value.
+                                                            onSelect(value);
+                                                        }, type: "button", children: "\u2715" })] }, value));
+                                        })
+                                        : null, _jsx("input", { "aria-activedescendant": activeValue === undefined
+                                            ? undefined
+                                            : optionDomId(activeValue), "aria-autocomplete": "list", "aria-controls": listboxId, "aria-expanded": "true", "aria-labelledby": triggerId, className: "min-w-24 flex-1 bg-transparent text-content-primary text-sm outline-none placeholder:text-content-muted", onChange: (changeEvent) => {
+                                            setQuery(changeEvent.target.value);
+                                        }, onKeyDown: handleKeyDown, placeholder: placeholder, ref: inputElement, role: "combobox", type: "text", value: currentQuery })] }), _jsx("div", { "aria-labelledby": triggerId, className: "min-h-0 flex-1 overflow-auto p-1", id: listboxId, ref: listElement, role: "listbox", children: isLoading ? (_jsx("p", { className: "px-2 py-3 text-center text-content-secondary text-sm", children: "Loading\u2026" })) : error ? (_jsx("div", { className: "px-2 py-3 text-center text-intent-danger-content text-sm", children: error })) : filtered.length === 0 ? (_jsx("p", { className: "px-2 py-3 text-center text-content-secondary text-sm", children: emptyLabel })) : isWindowed ? (_jsx("div", { className: "relative w-full", style: {
+                                        height: `${rowVirtualizer.getTotalSize()}px`,
+                                    }, children: rowVirtualizer
+                                        .getVirtualItems()
+                                        .map((virtualRow) => {
+                                        const option = filtered[virtualRow.index];
+                                        if (!option) {
+                                            return null;
+                                        }
+                                        return (_jsx("div", { className: "absolute start-0 top-0 w-full", style: {
+                                                height: `${virtualRow.size}px`,
+                                                transform: `translateY(${virtualRow.start}px)`,
+                                            }, children: renderOption(option, virtualRow.index) }, option.value));
+                                    }) })) : (filtered.map((option, index) => renderOption(option, index))) }), footer ? (_jsx("div", { className: "shrink-0 border-border-subtle border-t p-2 text-content-secondary text-xs", children: footer })) : null] }) }) })) : null] }));
+};
+//# sourceMappingURL=Combobox.js.map

package/dist/Combobox/Combobox.js.map

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

package/dist/Combobox/ComboboxOption.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import type { ListboxItem } from "../Listbox/Listbox.tsx";
+export type ComboboxOptionProps = {
+    /** The stable DOM id `aria-activedescendant` points at. */
+    id: string;
+    isActive: boolean;
+    isSelected: boolean;
+    item: ListboxItem;
+    onSelect: (value: string) => void;
+    /**
+     * `aria-posinset`/`aria-setsize`, required when the list is
+     * virtualized: most of it is not in the DOM, so a screen reader
+     * would otherwise announce "2 of 12" for a 4,000-item list.
+     */
+    posInSet?: number;
+    setSize?: number;
+};
+/**
+ * `role="option"` with **`tabIndex={-1}`**, and both halves matter.
+ * The APG combobox keeps focus in the text input and tracks the
+ * active option with `aria-activedescendant`, so no option is ever a
+ * tab stop — `tabIndex={-1}` is that. It is a `<button>` (which
+ * ARIA-in-HTML allows `role="option"` on, and `Listbox` uses too)
+ * rather than a `<div>`, so `onClick` carries its own keyboard route
+ * and the package keeps its no-Biome-suppression record.
+ *
+ * The one caveat is not to run `expectAgentDrivable` on an individual
+ * option: its roving-tabindex rule would (correctly) reject a native
+ * control with `tabIndex={-1}`, and a combobox legitimately has zero
+ * tab stops in its popup. Tests query the options with `getByRole`.
+ *
+ * "Active" is a visual state only — the option the arrow keys have
+ * moved to, highlighted because nothing here holds real focus.
+ */
+export declare const ComboboxOption: ({ id, isActive, isSelected, item, onSelect, posInSet, setSize, }: ComboboxOptionProps) => ReactNode;
+//# sourceMappingURL=ComboboxOption.d.ts.map

package/dist/Combobox/ComboboxOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxOption.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGzD,MAAM,MAAM,mBAAmB,GAAG;IAChC,2DAA2D;IAC3D,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,GAAI,kEAQ5B,mBAAmB,KAAG,SAyCxB,CAAA"}

package/dist/Combobox/ComboboxOption.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toClassName } from "../toClassName.js";
+/**
+ * `role="option"` with **`tabIndex={-1}`**, and both halves matter.
+ * The APG combobox keeps focus in the text input and tracks the
+ * active option with `aria-activedescendant`, so no option is ever a
+ * tab stop — `tabIndex={-1}` is that. It is a `<button>` (which
+ * ARIA-in-HTML allows `role="option"` on, and `Listbox` uses too)
+ * rather than a `<div>`, so `onClick` carries its own keyboard route
+ * and the package keeps its no-Biome-suppression record.
+ *
+ * The one caveat is not to run `expectAgentDrivable` on an individual
+ * option: its roving-tabindex rule would (correctly) reject a native
+ * control with `tabIndex={-1}`, and a combobox legitimately has zero
+ * tab stops in its popup. Tests query the options with `getByRole`.
+ *
+ * "Active" is a visual state only — the option the arrow keys have
+ * moved to, highlighted because nothing here holds real focus.
+ */
+export const ComboboxOption = ({ id, isActive, isSelected, item, onSelect, posInSet, setSize, }) => {
+    const { isDisabled = false, label, value } = item;
+    return (_jsxs("button", { "aria-posinset": posInSet, "aria-selected": isSelected, "aria-setsize": setSize, className: toClassName("flex w-full cursor-pointer items-center justify-between gap-2 rounded-sm bg-transparent px-2 py-1.5 text-start text-content-primary text-sm", isActive && "bg-intent-neutral-surface", isSelected && "bg-intent-accent-surface", isDisabled &&
+            "cursor-not-allowed text-content-disabled"), disabled: isDisabled, id: id, 
+        // `onMouseDown` rather than `onClick`: the input holds focus, and
+        // a click would blur it first. Prevented default keeps the caret
+        // in the input while the choice is made.
+        onMouseDown: (mouseEvent) => {
+            mouseEvent.preventDefault();
+            onSelect(value);
+        }, role: "option", tabIndex: -1, type: "button", children: [label, isSelected ? (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-intent-accent-content", children: "\u2713" })) : null] }));
+};
+//# sourceMappingURL=ComboboxOption.js.map

package/dist/Combobox/ComboboxOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxOption.js","sourceRoot":"","sources":["../../src/Combobox/ComboboxOption.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAkB/C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,EAAE,EACF,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,GACa,EAAa,EAAE;IACnC,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAEjD,OAAO,CACL,mCACiB,QAAQ,mBACR,UAAU,kBACX,OAAO,EACrB,SAAS,EAAE,WAAW,CACpB,6IAA6I,EAC7I,QAAQ,IAAI,2BAA2B,EACvC,UAAU,IAAI,0BAA0B,EACxC,UAAU;YACR,0CAA0C,CAC7C,EACD,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,EAAE;QACN,kEAAkE;QAClE,iEAAiE;QACjE,yCAAyC;QACzC,WAAW,EAAE,CAAC,UAAU,EAAE,EAAE;YAC1B,UAAU,CAAC,cAAc,EAAE,CAAA;YAE3B,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,aAEZ,KAAK,EAEL,UAAU,CAAC,CAAC,CAAC,CACZ,8BACc,MAAM,EAClB,SAAS,EAAC,qCAAqC,uBAG1C,CACR,CAAC,CAAC,CAAC,IAAI,IACD,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+export type DialogSize = "full" | "lg" | "md" | "sm" | "xl";
+export type DialogProps = {
+    children: ReactNode;
+    className?: string;
+    /** The footer row. Buttons, usually. */
+    footer?: ReactNode;
+    heading: string;
+    headingLevel?: 2 | 3 | 4;
+    /**
+     * Escape and a backdrop press both close. Off for the one honest
+     * case — a destructive confirm the user has to answer.
+     */
+    isDismissable?: boolean;
+    isVisible: boolean;
+    /**
+     * Every route out lands here: the close button, Escape, a backdrop
+     * press. Wire it to a `useVisibility()`'s `hide`.
+     */
+    onClose: () => void;
+    size?: DialogSize;
+};
+/**
+ * `Modal` plus the chrome — heading, a Close button, a scrolling body,
+ * an optional footer, and five sizes. This is what `Modal` *was*
+ * before the M8 rebuild renamed it: a dialog is one kind of modal, so
+ * it takes the specific name and hands the generic one back to the
+ * base layer.
+ *
+ * Everything modal — the portal, the scrim, Escape and outside-press
+ * dismiss, the focus trap, the scroll lock, the stacking — is `Modal`'s
+ * (via `OverlayPanel`), so this component is just the box's contents
+ * and the size class it wants that box to be. `SIZE_CLASS` is composed
+ * over `Modal`'s default surface, which is why `full` carries
+ * `rounded-none` to square off the base's `rounded-lg` at the viewport
+ * edge.
+ *
+ * ### The accessible name
+ *
+ * `heading` is required and is a string, not a `ReactNode`. It names
+ * both the visible header and — through `aria-labelledby` on the
+ * modal — the dialog itself. A dialog with no name is announced as
+ * "dialog" and nothing else, which is what every hand-rolled modal in
+ * the inventory does.
+ */
+export declare const Dialog: ({ children, className, footer, heading, headingLevel, isDismissable, isVisible, onClose, size, }: DialogProps) => ReactNode;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/Dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE3D,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,CAAA;AAqBD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM,GAAI,kGAUpB,WAAW,KAAG,SA4ChB,CAAA"}