@charcuterie/ui 1.1.0 → 2.0.1

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,53 @@
+import type { ReactNode } from "react";
+export type DialogSize = "full" | "lg" | "md" | "sm" | "xl";
+export type DialogProps = {
+    /**
+     * The scrolling body. Optional: a confirm dialog whose question is
+     * its `heading` and whose answers are its `footer` has no body, and
+     * the old chrome `Modal` (which extended `<dialog>`'s DOM props)
+     * allowed that — `Dialog` keeps it.
+     */
+    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;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,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"}

package/dist/Dialog/Dialog.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUniqueId } from "@charcuterie/logic";
+import { Button } from "../Button/Button.js";
+import { Modal } from "../Modal/Modal.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * `85dvh` rather than `85vh` — on a phone the two differ by the
+ * address bar, and a dialog whose footer is under it is a dialog
+ * with no buttons.
+ */
+const SIZE_CLASS = {
+    sm: "max-h-[85dvh] w-full max-w-sm",
+    md: "max-h-[85dvh] w-full max-w-md",
+    lg: "max-h-[85dvh] w-full max-w-2xl",
+    // M5 added this, because the scale jumped from 42rem straight to
+    // the whole viewport and rip-deck's capture tail lands in the
+    // gap: a MakeMKV robot log is fixed-width `MSG:5072,0,1,"…"`
+    // lines that wrap badly at 42rem, and a full-screen dialog over a
+    // nine-bay dashboard hides the thing being diagnosed. 56rem is
+    // what that app's hand-rolled `<dialog>` used before the swap.
+    xl: "max-h-[85dvh] w-full max-w-4xl",
+    full: "h-[100dvh] max-h-[100dvh] w-full max-w-full rounded-none",
+};
+/**
+ * `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 const Dialog = ({ children, className, footer, heading, headingLevel = 2, isDismissable = true, isVisible, onClose, size = "md", }) => {
+    const headingId = useUniqueId();
+    const Heading = `h${headingLevel}`;
+    return (_jsxs(Modal, { "aria-labelledby": headingId, className: toClassName(SIZE_CLASS[size], className), isDismissable: isDismissable, isVisible: isVisible, onClose: onClose, children: [_jsxs("header", { className: "flex shrink-0 items-start justify-between gap-3 border-b border-border-subtle p-4", children: [_jsx(Heading, { className: "font-semibold text-lg leading-tight", id: headingId, children: heading }), isDismissable ? (_jsx(Button, { appearance: "ghost", intent: "neutral", onClick: onClose, size: "sm", children: "Close" })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: children }), footer ? (_jsx("footer", { className: "flex shrink-0 flex-wrap justify-end gap-2 border-t border-border-subtle p-4", children: footer })) : null] }));
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../src/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAoB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AA+B/C;;;;GAIG;AACH,MAAM,UAAU,GAA+B;IAC7C,EAAE,EAAE,+BAA+B;IACnC,EAAE,EAAE,+BAA+B;IACnC,EAAE,EAAE,gCAAgC;IACpC,iEAAiE;IACjE,8DAA8D;IAC9D,6DAA6D;IAC7D,kEAAkE;IAClE,+DAA+D;IAC/D,+DAA+D;IAC/D,EAAE,EAAE,gCAAgC;IACpC,IAAI,EAAE,0DAA0D;CACjE,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,aAAa,GAAG,IAAI,EACpB,SAAS,EACT,OAAO,EACP,IAAI,GAAG,IAAI,GACC,EAAa,EAAE;IAC3B,MAAM,SAAS,GAAG,WAAW,EAAE,CAAA;IAE/B,MAAM,OAAO,GAAG,IAAI,YAAY,EAAW,CAAA;IAE3C,OAAO,CACL,MAAC,KAAK,uBACa,SAAS,EAC1B,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,EACnD,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,aAEhB,kBAAQ,SAAS,EAAC,mFAAmF,aACnG,KAAC,OAAO,IACN,SAAS,EAAC,qCAAqC,EAC/C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,EAET,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,UAAU,EAAC,OAAO,EAClB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,IAAI,sBAGF,CACV,CAAC,CAAC,CAAC,IAAI,IACD,EAET,cAAK,SAAS,EAAC,kCAAkC,YAC9C,QAAQ,GACL,EAEL,MAAM,CAAC,CAAC,CAAC,CACR,iBAAQ,SAAS,EAAC,6EAA6E,YAC5F,MAAM,GACA,CACV,CAAC,CAAC,CAAC,IAAI,IACF,CACT,CAAA;AACH,CAAC,CAAA"}

package/dist/Lightbox/Lightbox.d.ts

@@ -37,13 +37,13 @@ export type LightboxProps = {
 /**
  * A thumbnail that opens its own full-size view — the one image
  * interaction three apps hand-roll and none get the focus trap or
- * the scroll lock right. It is a **skin over `Modal`**, not a second
- * dialog: `Modal` owns `showModal()`, the top layer, Escape, the
- * `::backdrop` scrim and `lockScrollBehind`, and everything that
- * makes those correct in every browser the fleet runs. What this
- * adds is the image-specific part — a `cursor-zoom-in` trigger and
- * an `object-contain` image clamped to the viewport so a 2:3 poster
- * and a 16:9 still both land whole.
+ * the scroll lock right. It is a **skin over `Dialog`**, not a second
+ * dialog: `Dialog` (through `Modal`/`OverlayPanel`) owns the portal,
+ * the scrim, Escape, the focus trap and `lockScrollBehind`, and
+ * everything that makes those correct in every browser the fleet
+ * runs. What this adds is the image-specific part — a `cursor-zoom-in`
+ * trigger and an `object-contain` image clamped to the viewport so a
+ * 2:3 poster and a 16:9 still both land whole.
  *
  * ### Controlled and not, one component
  *

package/dist/Lightbox/Lightbox.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useVisibility } from "@charcuterie/logic";
-import { Modal } from "../Modal/Modal.js";
+import { Dialog } from "../Dialog/Dialog.js";
 import { toClassName } from "../toClassName.js";
 /**
  * A thumbnail that opens its own full-size view — the one image
  * interaction three apps hand-roll and none get the focus trap or
- * the scroll lock right. It is a **skin over `Modal`**, not a second
- * dialog: `Modal` owns `showModal()`, the top layer, Escape, the
- * `::backdrop` scrim and `lockScrollBehind`, and everything that
- * makes those correct in every browser the fleet runs. What this
- * adds is the image-specific part — a `cursor-zoom-in` trigger and
- * an `object-contain` image clamped to the viewport so a 2:3 poster
- * and a 16:9 still both land whole.
+ * the scroll lock right. It is a **skin over `Dialog`**, not a second
+ * dialog: `Dialog` (through `Modal`/`OverlayPanel`) owns the portal,
+ * the scrim, Escape, the focus trap and `lockScrollBehind`, and
+ * everything that makes those correct in every browser the fleet
+ * runs. What this adds is the image-specific part — a `cursor-zoom-in`
+ * trigger and an `object-contain` image clamped to the viewport so a
+ * 2:3 poster and a 16:9 still both land whole.
  *
  * ### Controlled and not, one component
  *
@@ -41,7 +41,7 @@ export const Lightbox = ({ alt, caption, className, heading, isOpen, onOpenChang
                 // `cursor-zoom-in` is the affordance a bare `<img>`
                 // never had, and the focus ring is the fleet's standard
                 // — the same one `MediaTile`'s link wears.
-                "group block cursor-zoom-in rounded-md outline-offset-2 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring", className), onClick: requestOpen, type: "button", children: thumbnail })), _jsx(Modal, { heading: heading ?? alt, isVisible: isShown, onClose: requestClose, size: "xl", children: _jsxs("figure", { className: "flex flex-col items-center gap-3", children: [_jsx("img", { alt: alt, 
+                "group block cursor-zoom-in rounded-md outline-offset-2 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring", className), onClick: requestOpen, type: "button", children: thumbnail })), _jsx(Dialog, { heading: heading ?? alt, isVisible: isShown, onClose: requestClose, size: "xl", children: _jsxs("figure", { className: "flex flex-col items-center gap-3", children: [_jsx("img", { alt: alt, 
                             // `object-contain`, not `cover`: the enlarged view must
                             // show the whole image, and the clamp is `dvh` for the
                             // same address-bar reason `Modal`'s is.

package/dist/Lightbox/Lightbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAoB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAsC/C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,GAAG,EACH,OAAO,EACP,SAAS,EACT,OAAO,EACP,MAAM,EACN,YAAY,EACZ,GAAG,EACH,SAAS,GACK,EAAa,EAAE;IAC7B,MAAM,YAAY,GAAG,MAAM,KAAK,SAAS,CAAA;IAEzC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;IAEjD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,EAAE,CAAA;QACR,CAAC;QAED,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,EAAE,CAAA;QACR,CAAC;QAED,YAAY,EAAE,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,OAAO,CACL,8BACG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,+BAMc,WAAW,OAAO,IAAI,GAAG,EAAE,EACvC,SAAS,EAAE,WAAW;gBACpB,oDAAoD;gBACpD,wDAAwD;gBACxD,2CAA2C;gBAC3C,uKAAuK,EACvK,SAAS,CACV,EACD,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,YAEZ,SAAS,GACH,CACV,EAED,KAAC,KAAK,IACJ,OAAO,EAAE,OAAO,IAAI,GAAG,EACvB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,YAET,kBAAQ,SAAS,EAAC,kCAAkC,aAClD,cACE,GAAG,EAAE,GAAG;4BACR,wDAAwD;4BACxD,uDAAuD;4BACvD,wCAAwC;4BACxC,SAAS,EAAC,2DAA2D,EACrE,GAAG,EAAE,GAAG,GACR,EAED,OAAO,CAAC,CAAC,CAAC,CACT,qBAAY,SAAS,EAAC,wCAAwC,YAC3D,OAAO,GACG,CACd,CAAC,CAAC,CAAC,IAAI,IACD,GACH,IACP,CACJ,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Lightbox.js","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAGlD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAsB,CAAA;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAsC/C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,GAAG,EACH,OAAO,EACP,SAAS,EACT,OAAO,EACP,MAAM,EACN,YAAY,EACZ,GAAG,EACH,SAAS,GACK,EAAa,EAAE;IAC7B,MAAM,YAAY,GAAG,MAAM,KAAK,SAAS,CAAA;IAEzC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAA;IAEjD,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;IAEjD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,EAAE,CAAA;QACR,CAAC;QAED,YAAY,EAAE,CAAC,IAAI,CAAC,CAAA;IACtB,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,EAAE,CAAA;QACR,CAAC;QAED,YAAY,EAAE,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,CAAA;IAED,OAAO,CACL,8BACG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAChC,+BAMc,WAAW,OAAO,IAAI,GAAG,EAAE,EACvC,SAAS,EAAE,WAAW;gBACpB,oDAAoD;gBACpD,wDAAwD;gBACxD,2CAA2C;gBAC3C,uKAAuK,EACvK,SAAS,CACV,EACD,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,YAEZ,SAAS,GACH,CACV,EAED,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,IAAI,GAAG,EACvB,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,YAAY,EACrB,IAAI,EAAC,IAAI,YAET,kBAAQ,SAAS,EAAC,kCAAkC,aAClD,cACE,GAAG,EAAE,GAAG;4BACR,wDAAwD;4BACxD,uDAAuD;4BACvD,wCAAwC;4BACxC,SAAS,EAAC,2DAA2D,EACrE,GAAG,EAAE,GAAG,GACR,EAED,OAAO,CAAC,CAAC,CAAC,CACT,qBAAY,SAAS,EAAC,wCAAwC,YAC3D,OAAO,GACG,CACd,CAAC,CAAC,CAAC,IAAI,IACD,GACF,IACR,CACJ,CAAA;AACH,CAAC,CAAA"}

package/dist/Listbox/Listbox.d.ts

@@ -0,0 +1,56 @@
+import type { Placement } from "@floating-ui/react";
+import type { ReactElement, ReactNode } from "react";
+export type ListboxItem = {
+    isDisabled?: boolean;
+    label: ReactNode;
+    /**
+     * Required when `label` is rich (an icon, two lines, a badge): it is
+     * the type-ahead target and the accessible name a screen reader
+     * reads. When `label` is a plain string it is used as the fallback.
+     */
+    textValue?: string;
+    value: string;
+};
+export type ListboxProps = {
+    className?: string;
+    isVisible: boolean;
+    /** Outside press and Escape both land here. */
+    onDismiss: () => void;
+    onSelect: (value: string) => void;
+    options: readonly ListboxItem[];
+    placement?: Placement;
+    /** The initial seed. The live selection is the listbox's after that. */
+    selectedValue?: string;
+    /** The control the listbox hangs off. **Cloned, not wrapped.** */
+    trigger: ReactElement;
+};
+/**
+ * The single-select fancy dropdown — the rich-option sibling of the
+ * native `Select`. `Select` keeps type-ahead, the mobile wheel, form
+ * submission and autofill; `Listbox` is for the cases `<option>`
+ * cannot render: an icon, two lines, a trailing badge.
+ *
+ * A listbox is **not** a menu, and that distinction is the whole
+ * reason it is a separate component from `Menu`. An `option` *is*
+ * something you are choosing — so it carries `aria-selected`, it
+ * type-aheads (which the APG requires of a listbox and `Menu`
+ * deliberately omits), and a screen reader announces "listbox,
+ * selected, 2 of 4". A `menuitem` only ever *does* something.
+ *
+ * ### Two kinds of state, composed
+ *
+ * `useRovingFocus` owns which option is tabbable (exactly one, so Tab
+ * enters and leaves the group once and the arrow keys move within it),
+ * and `useSinglePicker` owns which option is chosen. They are the same
+ * two kinds `Tabs` composes, and they never disturb each other:
+ * arrowing moves focus without selecting, Enter selects the focused
+ * option.
+ *
+ * ### Portalled, and named by its trigger
+ *
+ * Like `Menu`, the panel portals to `document.body` and `useRole` names
+ * it by pointing `aria-labelledby` at the trigger — so there is no
+ * `heading` prop; the button that opens it is its label.
+ */
+export declare const Listbox: ({ className, isVisible, onDismiss, onSelect, options, placement, selectedValue, trigger, }: ListboxProps) => ReactNode;
+//# sourceMappingURL=Listbox.d.ts.map

package/dist/Listbox/Listbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.d.ts","sourceRoot":"","sources":["../../src/Listbox/Listbox.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAKnD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAQpD,MAAM,MAAM,WAAW,GAAG;IACxB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,kEAAkE;IAClE,OAAO,EAAE,YAAY,CAAA;CACtB,CAAA;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,OAAO,GAAI,4FASrB,YAAY,KAAG,SA+MjB,CAAA"}