@charcuterie/ui 0.1.0

package/dist/ProgressBar/progressValue.js

@@ -0,0 +1,55 @@
+/**
+ * Clamped, rounded, and NaN-proof, in a file a Node test can reach
+ * without a browser.
+ *
+ * All three cases are real. rip-deck's `fillPercent` comes from a
+ * ripper's stdout, and a progress value that arrives as `-1`,
+ * `101`, or `NaN` from a log parse currently renders as a bar that
+ * overflows its track or vanishes. `max: 0` is the one that looks
+ * hypothetical and is not: it is "0 of 0 files done", which every
+ * empty queue produces on its first render.
+ */
+export const toProgressPercent = (value, max) => {
+    if (!Number.isFinite(value) || !Number.isFinite(max)) {
+        return 0;
+    }
+    if (max <= 0) {
+        return 0;
+    }
+    return Math.min(100, Math.max(0, Math.round((value / max) * 100)));
+};
+/**
+ * The same clamp in the value's own units, for `aria-valuenow`.
+ *
+ * Reporting the raw prop there would hand assistive technology a
+ * `valuenow` outside its own `valuemin`/`valuemax` — which some
+ * screen readers render as a nonsense percentage and others drop
+ * entirely — while the bar on screen showed the clamped one. The
+ * two must not disagree.
+ */
+export const toProgressValue = (value, max) => {
+    if (!Number.isFinite(value) || !Number.isFinite(max)) {
+        return 0;
+    }
+    return Math.min(Math.max(0, max), Math.max(0, value));
+};
+/**
+ * The threshold colour, or the component's own intent when no
+ * threshold applies.
+ *
+ * This is the piece rip-deck hardcodes as `FILL_CLASS` keyed by a
+ * rip state, and mux-magic does not have at all. Generalising it to
+ * "percentage → intent" covers both the "green when done" case and
+ * the "amber past 80% of the disk" case with one mechanism.
+ */
+export const getProgressIntent = (percent, intent, thresholds) => {
+    if (!thresholds || thresholds.length === 0) {
+        return intent;
+    }
+    const matched = thresholds
+        .filter((threshold) => percent >= threshold.from)
+        .sort((first, second) => second.from - first.from)
+        .at(0);
+    return matched?.intent ?? intent;
+};
+//# sourceMappingURL=progressValue.js.map

package/dist/ProgressBar/progressValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressValue.js","sourceRoot":"","sources":["../../src/ProgressBar/progressValue.ts"],"names":[],"mappings":"AAaA;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,KAAa,EACb,GAAW,EACX,EAAE;IACF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACrD,OAAO,CAAC,CAAA;IACV,CAAC;IAED,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC;QACb,OAAO,CAAC,CAAA;IACV,CAAC;IAED,OAAO,IAAI,CAAC,GAAG,CACb,GAAG,EACH,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAC7C,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAa,EACb,GAAW,EACX,EAAE;IACF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACrD,OAAO,CAAC,CAAA;IACV,CAAC;IAED,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAA;AACvD,CAAC,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,OAAe,EACf,MAAkB,EAClB,UAAyC,EAC7B,EAAE;IACd,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC3C,OAAO,MAAM,CAAA;IACf,CAAC;IAED,MAAM,OAAO,GAAG,UAAU;SACvB,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,CAAC;SAChD,IAAI,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;SACjD,EAAE,CAAC,CAAC,CAAC,CAAA;IAER,OAAO,OAAO,EAAE,MAAM,IAAI,MAAM,CAAA;AAClC,CAAC,CAAA"}

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,59 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+export type SegmentedItem = {
+    /**
+     * A disabled option is simply **not registered** with the roving
+     * group, so the arrow keys skip it without any command in
+     * `RovingFocus` having to know what "disabled" means. It stays
+     * registered with the picker: it is still one of the options.
+     */
+    isDisabled?: boolean;
+    label: ReactNode;
+    value: string;
+};
+export type SegmentedControlProps = {
+    className?: string;
+    items: readonly SegmentedItem[];
+    /** The group's accessible name. Required. */
+    label: string;
+    onChange?: (selectedValue: string | null) => void;
+    /** **Initial** only. Charcuterie owns it from then on. */
+    selectedValue?: string;
+    size?: ControlSize;
+};
+/**
+ * One choice out of a handful, all of them on screen at once.
+ *
+ * This is `Tabs`' composition — `SinglePicker` + `RovingFocus` —
+ * with the panels taken away, and it exists because taking the
+ * panels away used to be impossible. Under M4's model a tab bar's
+ * selection *was* a group of visibilities, so a control that chooses
+ * something without revealing anything had nothing to reuse and
+ * hand-rolled its own state. rip-deck's `ColumnPicker` is that
+ * hand-roll
+ * ([decision](../../../docs/decisions/2026-07-30-tab-selection-is-a-single-picker.md)).
+ *
+ * ### `radiogroup`, not a row of pressed buttons
+ *
+ * rip-deck's version is five `<button aria-pressed>` in a
+ * `<fieldset>`, which is the **toolbar of independent toggles**
+ * pattern: nothing in it says the five are mutually exclusive, so a
+ * screen reader announces "auto, pressed" with no "1 of 5" and no
+ * clue that pressing another un-presses this one. A single choice
+ * from a named set is a radio group, and ARIA has a pattern for it.
+ *
+ * ### Selection follows focus, and here that is correct
+ *
+ * `Tabs` has two activation modes because a tab panel can cost a
+ * network request. A radio group has one: APG says the arrow keys
+ * both move focus and check, and there is nothing behind an option
+ * here to be expensive. So the mode is `automatic` and there is no
+ * prop — a `manual` segmented control would be a control the arrow
+ * keys appear to do nothing in.
+ *
+ * The two kinds are still separate underneath, which is what makes
+ * Space's behaviour trivial rather than a special case: it checks
+ * whatever focus is on, whether or not focus moved there by arrow.
+ */
+export declare const SegmentedControl: ({ className, items, label, onChange, selectedValue, size, }: SegmentedControlProps) => ReactNode;
+//# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/SegmentedControl/SegmentedControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,SAAS,aAAa,EAAE,CAAA;IAC/B,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACjD,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,gBAAgB,GAAI,6DAO9B,qBAAqB,KAAG,SAwI1B,CAAA"}

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { selectTabIndex, useRovingFocus, useSinglePicker, } from "@charcuterie/logic";
+import { useCallback, useEffect, useRef } from "react";
+import { toClassName } from "../toClassName.js";
+import { SegmentedOption } from "./SegmentedOption.js";
+const GAP_CLASS = {
+    sm: "gap-0.5",
+    md: "gap-1",
+    lg: "gap-1",
+};
+/**
+ * One choice out of a handful, all of them on screen at once.
+ *
+ * This is `Tabs`' composition — `SinglePicker` + `RovingFocus` —
+ * with the panels taken away, and it exists because taking the
+ * panels away used to be impossible. Under M4's model a tab bar's
+ * selection *was* a group of visibilities, so a control that chooses
+ * something without revealing anything had nothing to reuse and
+ * hand-rolled its own state. rip-deck's `ColumnPicker` is that
+ * hand-roll
+ * ([decision](../../../docs/decisions/2026-07-30-tab-selection-is-a-single-picker.md)).
+ *
+ * ### `radiogroup`, not a row of pressed buttons
+ *
+ * rip-deck's version is five `<button aria-pressed>` in a
+ * `<fieldset>`, which is the **toolbar of independent toggles**
+ * pattern: nothing in it says the five are mutually exclusive, so a
+ * screen reader announces "auto, pressed" with no "1 of 5" and no
+ * clue that pressing another un-presses this one. A single choice
+ * from a named set is a radio group, and ARIA has a pattern for it.
+ *
+ * ### Selection follows focus, and here that is correct
+ *
+ * `Tabs` has two activation modes because a tab panel can cost a
+ * network request. A radio group has one: APG says the arrow keys
+ * both move focus and check, and there is nothing behind an option
+ * here to be expensive. So the mode is `automatic` and there is no
+ * prop — a `manual` segmented control would be a control the arrow
+ * keys appear to do nothing in.
+ *
+ * The two kinds are still separate underneath, which is what makes
+ * Space's behaviour trivial rather than a special case: it checks
+ * whatever focus is on, whether or not focus moved there by arrow.
+ */
+export const SegmentedControl = ({ className, items, label, onChange, selectedValue, size = "md", }) => {
+    const groupRef = useRef(null);
+    const optionElements = useRef(new Map());
+    const initialValue = selectedValue ??
+        items.find((one) => !one.isDisabled)?.value ??
+        null;
+    const selection = useSinglePicker({
+        onChange,
+        selectedValue: initialValue,
+    });
+    const focus = useRovingFocus({
+        activeValue: initialValue,
+    });
+    const { select } = selection;
+    const { activeValue, setActiveValue } = focus;
+    /**
+     * Selected **or** pending. Members register from an effect, so on
+     * the first paint `selectedValue` is still null and the intent
+     * lives in `pendingValue` — reading only the former renders a
+     * group with nothing checked, then corrects itself a frame later.
+     * A flash on a desktop; a visible blank on a kiosk Pi.
+     */
+    const checkedValue = selection.selectedValue ?? selection.pendingValue;
+    const chooseOption = useCallback((value) => {
+        setActiveValue(value);
+        select(value);
+    }, [select, setActiveValue]);
+    useEffect(() => {
+        // Selection follows focus — the radio-group rule, and the one
+        // line that would be absent in a `manual` mode this component
+        // deliberately does not have.
+        if (activeValue !== null) {
+            select(activeValue);
+        }
+    }, [activeValue, select]);
+    useEffect(() => {
+        const group = groupRef.current;
+        if (!group ||
+            activeValue === null ||
+            !group.contains(document.activeElement)) {
+            return;
+        }
+        optionElements.current.get(activeValue)?.focus();
+    }, [activeValue]);
+    return (_jsx("div", { "aria-label": label, className: toClassName("inline-flex items-center rounded-md border border-border-subtle bg-surface-sunken p-0.5", GAP_CLASS[size], className), onKeyDown: (keyEvent) => {
+            const commands = {
+                ArrowDown: focus.next,
+                ArrowLeft: focus.previous,
+                ArrowRight: 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 control
+                // that scrolls the window while it moves focus is the
+                // hand-rolled version of this component.
+                keyEvent.preventDefault();
+                command();
+                return;
+            }
+            // Space checks the focused option. In a group where
+            // selection already follows focus this is almost always a
+            // no-op — which is the point: it is one command, not a
+            // second code path, because `select` is idempotent.
+            if (keyEvent.key === " " && activeValue !== null) {
+                keyEvent.preventDefault();
+                select(activeValue);
+            }
+        }, ref: groupRef, role: "radiogroup", children: items.map((item) => (_jsx(SegmentedOption, { isChecked: checkedValue === item.value, item: item, onChoose: chooseOption, registerFocus: focus.register, registerSelection: selection.register, size: size, 
+            // The roving-tabindex rule read from the core rather than
+            // restated here: exactly one option is in the tab order,
+            // so Tab enters and leaves the group once while the arrow
+            // keys move inside it.
+            tabIndex: selectTabIndex(focus, item.value), trackElement: (value, element) => {
+                if (element) {
+                    optionElements.current.set(value, element);
+                }
+                else {
+                    optionElements.current.delete(value);
+                }
+            } }, item.value))) }));
+};
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/SegmentedControl/SegmentedControl.js.map

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

package/dist/SegmentedControl/SegmentedOption.d.ts

@@ -0,0 +1,28 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ReactNode } from "react";
+import type { SegmentedItem } from "./SegmentedControl.tsx";
+export type SegmentedOptionProps = {
+    isChecked: boolean;
+    item: SegmentedItem;
+    onChoose: (value: string) => void;
+    /** `RovingFocus.register` — membership of the arrow-key group. */
+    registerFocus: (value: string) => () => void;
+    /** `SinglePicker.register` — membership of the choice. */
+    registerSelection: (value: string) => () => void;
+    size: ControlSize;
+    tabIndex: number;
+    trackElement: (value: string, element: HTMLButtonElement | null) => void;
+};
+/**
+ * Its own file for the same reason `TabTrigger` is: **both
+ * registrations are effects**, and an effect cannot run in a loop.
+ * Any member of a registering group ends up shaped like this.
+ *
+ * The checked option is filled rather than merely tinted. A
+ * segmented control's whole job is to be readable at a glance from
+ * across a room — rip-deck's lives above a nine-bay grid on a wall
+ * display — and a one-shade difference does not survive that or a
+ * `daylight` theme in sunlight.
+ */
+export declare const SegmentedOption: ({ isChecked, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }: SegmentedOptionProps) => ReactNode;
+//# sourceMappingURL=SegmentedOption.d.ts.map

package/dist/SegmentedControl/SegmentedOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedOption.d.ts","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAE3D,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,GAAI,gGAS7B,oBAAoB,KAAG,SAgDzB,CAAA"}

package/dist/SegmentedControl/SegmentedOption.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { CONTROL_SIZE_CLASS } from "../controlStyles.js";
+import { FOCUS_RING_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * Its own file for the same reason `TabTrigger` is: **both
+ * registrations are effects**, and an effect cannot run in a loop.
+ * Any member of a registering group ends up shaped like this.
+ *
+ * The checked option is filled rather than merely tinted. A
+ * segmented control's whole job is to be readable at a glance from
+ * across a room — rip-deck's lives above a nine-bay grid on a wall
+ * display — and a one-shade difference does not survive that or a
+ * `daylight` theme in sunlight.
+ */
+export const SegmentedOption = ({ isChecked, item, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }) => {
+    const { isDisabled = false, label, value } = item;
+    useEffect(() => registerSelection(value), [registerSelection, value]);
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        return registerFocus(value);
+    }, [isDisabled, registerFocus, value]);
+    return (_jsx("button", { "aria-checked": isChecked, className: toClassName("cursor-pointer rounded-sm border border-transparent font-medium tabular-nums transition-colors duration-(--duration-fast) ease-standard", CONTROL_SIZE_CLASS[size], 
+        // Two entries rather than one interpolated string:
+        // `tailwindCandidates.test.ts` rejects a template literal in
+        // a className outright, because Tailwind's scanner cannot
+        // see a class that only exists at runtime.
+        isChecked
+            ? "bg-intent-accent-solid text-intent-accent-on-solid"
+            : "text-content-secondary hover:bg-intent-neutral-surface hover:text-content-primary", isDisabled &&
+            "cursor-not-allowed text-content-disabled hover:bg-transparent hover:text-content-disabled", FOCUS_RING_CLASS), disabled: isDisabled, onClick: () => {
+            onChoose(value);
+        }, ref: (element) => {
+            trackElement(value, element);
+        }, role: "radio", tabIndex: tabIndex, type: "button", children: label }));
+};
+//# sourceMappingURL=SegmentedOption.js.map

package/dist/SegmentedControl/SegmentedOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedOption.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAmB/C;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,iBAAiB,EACjB,IAAI,EACJ,QAAQ,EACR,YAAY,GACS,EAAa,EAAE;IACpC,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,CAAA;IAEjD,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9B,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAC3B,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,KAAK,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IAEtC,OAAO,CAEL,iCACgB,SAAS,EACvB,SAAS,EAAE,WAAW,CACpB,yIAAyI,EACzI,kBAAkB,CAAC,IAAI,CAAC;QACxB,mDAAmD;QACnD,6DAA6D;QAC7D,0DAA0D;QAC1D,2CAA2C;QAC3C,SAAS;YACP,CAAC,CAAC,oDAAoD;YACtD,CAAC,CAAC,mFAAmF,EACvF,UAAU;YACR,2FAA2F,EAC7F,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,KAAK,CAAC,CAAA;QACjB,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA;QAC9B,CAAC,EACD,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,YAEZ,KAAK,GACC,CACV,CAAA;AACH,CAAC,CAAA"}

package/dist/Skeleton/Skeleton.d.ts

@@ -0,0 +1,30 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type SkeletonShape = "block" | "circle" | "text";
+export type SkeletonProps = Omit<ComponentPropsWithRef<"div">, "children"> & {
+    blockSize?: string;
+    inlineSize?: string;
+    /**
+     * Text skeletons render this many bars, the last one short —
+     * because a paragraph placeholder whose every line is full width
+     * reads as a table, not as prose.
+     */
+    lineCount?: number;
+    shape?: SkeletonShape;
+};
+/**
+ * **Also zero of these fleet-wide.** The counterpart to `Spinner`
+ * and the better answer wherever the shape of the incoming content
+ * is already known: a poster grid that skeletons does not reflow
+ * when the images land, and layout shift is the thing users
+ * actually notice.
+ *
+ * `aria-hidden` is not an optimisation, it is the contract. A
+ * skeleton is decoration standing in for content that does not
+ * exist yet; announcing it means a screen reader reading three
+ * empty bars. **The load has to be announced by the region that
+ * owns it** — a `Spinner`, or an `aria-busy` on the container — and
+ * a skeleton that AT can see is a bug, which is why the story
+ * asserts it cannot be found by role.
+ */
+export declare const Skeleton: ({ blockSize, className, inlineSize, lineCount, shape, style, ...divProps }: SkeletonProps) => ReactNode;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/Skeleton/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAId,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,qBAAqB,CAAC,KAAK,CAAC,EAC5B,UAAU,CACX,GAAG;IACF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAuBD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,GAAI,4EAQtB,aAAa,KAAG,SAqClB,CAAA"}

package/dist/Skeleton/Skeleton.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { toClassName } from "../toClassName.js";
+const SHAPE_CLASS = {
+    block: "rounded-md",
+    circle: "rounded-full",
+    text: "rounded-sm",
+};
+/**
+ * The bars of a multi-line text skeleton, described rather than
+ * indexed.
+ *
+ * The last line is **60%**, fixed. Not random: a placeholder that
+ * differs between two renders of the same list makes every
+ * screenshot diff useless, and visual regression over P0 x scheme x
+ * density is a planned addition once tokens stop moving.
+ */
+const buildLines = (lineCount) => Array.from({ length: lineCount }, (_, index) => ({
+    id: `charcuterie-skeleton-line-${index + 1}`,
+    inlineSize: index === lineCount - 1 ? "60%" : undefined,
+}));
+/**
+ * **Also zero of these fleet-wide.** The counterpart to `Spinner`
+ * and the better answer wherever the shape of the incoming content
+ * is already known: a poster grid that skeletons does not reflow
+ * when the images land, and layout shift is the thing users
+ * actually notice.
+ *
+ * `aria-hidden` is not an optimisation, it is the contract. A
+ * skeleton is decoration standing in for content that does not
+ * exist yet; announcing it means a screen reader reading three
+ * empty bars. **The load has to be announced by the region that
+ * owns it** — a `Spinner`, or an `aria-busy` on the container — and
+ * a skeleton that AT can see is a bug, which is why the story
+ * asserts it cannot be found by role.
+ */
+export const Skeleton = ({ blockSize, className, inlineSize, lineCount = 1, shape = "block", style, ...divProps }) => {
+    const barClassName = toClassName("charcuterie-shimmer block bg-surface-sunken", SHAPE_CLASS[shape], shape === "text" && "h-[1em]");
+    if (shape === "text" && lineCount > 1) {
+        return (_jsx("div", { ...divProps, "aria-hidden": "true", className: toClassName("flex flex-col gap-2", className), style: { inlineSize, ...style }, children: buildLines(lineCount).map((line) => (_jsx("span", { className: barClassName, style: { inlineSize: line.inlineSize } }, line.id))) }));
+    }
+    return (_jsx("div", { ...divProps, "aria-hidden": "true", className: toClassName(barClassName, className), style: { blockSize, inlineSize, ...style } }));
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../src/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAmB/C,MAAM,WAAW,GAAkC;IACjD,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,cAAc;IACtB,IAAI,EAAE,YAAY;CACnB,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,GAAG,CAAC,SAAiB,EAAE,EAAE,CACvC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IAC/C,EAAE,EAAE,6BAA6B,KAAK,GAAG,CAAC,EAAE;IAC5C,UAAU,EAAE,KAAK,KAAK,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;CACxD,CAAC,CAAC,CAAA;AAEL;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,GAAG,CAAC,EACb,KAAK,GAAG,OAAO,EACf,KAAK,EACL,GAAG,QAAQ,EACG,EAAa,EAAE;IAC7B,MAAM,YAAY,GAAG,WAAW,CAC9B,6CAA6C,EAC7C,WAAW,CAAC,KAAK,CAAC,EAClB,KAAK,KAAK,MAAM,IAAI,SAAS,CAC9B,CAAA;IAED,IAAI,KAAK,KAAK,MAAM,IAAI,SAAS,GAAG,CAAC,EAAE,CAAC;QACtC,OAAO,CACL,iBACM,QAAQ,iBACA,MAAM,EAClB,SAAS,EAAE,WAAW,CACpB,qBAAqB,EACrB,SAAS,CACV,EACD,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,YAE9B,UAAU,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnC,eACE,SAAS,EAAE,YAAY,EAEvB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IADjC,IAAI,CAAC,EAAE,CAEZ,CACH,CAAC,GACE,CACP,CAAA;IACH,CAAC;IAED,OAAO,CACL,iBACM,QAAQ,iBACA,MAAM,EAClB,SAAS,EAAE,WAAW,CAAC,YAAY,EAAE,SAAS,CAAC,EAC/C,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAC1C,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,37 @@
+import type { ControlSize } from "@charcuterie/tokens";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export type SpinnerProps = Omit<ComponentPropsWithRef<"span">, "children"> & {
+    /**
+     * Required by omission of a default that could be wrong.
+     * "Loading…" is right for a fetch and wrong for "Ripping disc 3",
+     * and the label is the *only* thing a screen-reader user gets —
+     * the animation says nothing.
+     */
+    label?: string;
+    isLabelVisible?: boolean;
+    size?: ControlSize;
+};
+/**
+ * **Zero of these exist anywhere in the fleet.** Not one repo has a
+ * spinner; every app renders bare `"loading…"` text, which is why
+ * this is the best effort-to-payoff component in the M3 list.
+ *
+ * Three things it does that a hand-rolled `animate-spin` does not:
+ *
+ *  - **It is a live region.** `role="status"` with the label inside
+ *    means a screen reader announces the load starting. A bare
+ *    rotating `<div>` announces nothing, which is the state of the
+ *    art in every repo that renders `"loading…"` into a `<span>`.
+ *  - **It stops.** The animation is `--duration-loop-fast`, which
+ *    `prefers-reduced-motion` zeroes and
+ *    `@charcuterie/ui/styles.css` then switches off outright —
+ *    vestibular-triggering motion is the single most common a11y
+ *    complaint about spinners, and Tailwind's `animate-spin`
+ *    hardcodes 1s past the media query.
+ *  - **It leaves a static fallback that still reads.** With motion
+ *    off, the ring stays a ring and the label stays a label, so the
+ *    component degrades to "there is a thing here, and it says
+ *    loading" rather than to nothing.
+ */
+export declare const Spinner: ({ className, isLabelVisible, label, size, ...spanProps }: SpinnerProps) => ReactNode;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAMd,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,qBAAqB,CAAC,MAAM,CAAC,EAC7B,UAAU,CACX,GAAG;IACF;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,CAAC,EAAE,WAAW,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,OAAO,GAAI,0DAMrB,YAAY,KAAG,SAsCjB,CAAA"}

package/dist/Spinner/Spinner.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SPINNER_SIZE_CLASS } from "../controlStyles.js";
+import { toClassName } from "../toClassName.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+/**
+ * **Zero of these exist anywhere in the fleet.** Not one repo has a
+ * spinner; every app renders bare `"loading…"` text, which is why
+ * this is the best effort-to-payoff component in the M3 list.
+ *
+ * Three things it does that a hand-rolled `animate-spin` does not:
+ *
+ *  - **It is a live region.** `role="status"` with the label inside
+ *    means a screen reader announces the load starting. A bare
+ *    rotating `<div>` announces nothing, which is the state of the
+ *    art in every repo that renders `"loading…"` into a `<span>`.
+ *  - **It stops.** The animation is `--duration-loop-fast`, which
+ *    `prefers-reduced-motion` zeroes and
+ *    `@charcuterie/ui/styles.css` then switches off outright —
+ *    vestibular-triggering motion is the single most common a11y
+ *    complaint about spinners, and Tailwind's `animate-spin`
+ *    hardcodes 1s past the media query.
+ *  - **It leaves a static fallback that still reads.** With motion
+ *    off, the ring stays a ring and the label stays a label, so the
+ *    component degrades to "there is a thing here, and it says
+ *    loading" rather than to nothing.
+ */
+export const Spinner = ({ className, isLabelVisible = false, label = "Loading…", size = "md", ...spanProps }) => (_jsxs("span", { ...spanProps, "aria-label": label, className: toClassName("inline-flex items-center gap-2 align-middle text-current", className), role: "status", children: [_jsx("span", { "aria-hidden": "true", className: toClassName(
+            // `border-current` on three sides and a transparent fourth
+            // is the whole trick: it inherits the parent's text colour,
+            // so a spinner inside a solid button is legible without the
+            // button telling it anything.
+            "charcuterie-spin inline-block shrink-0 rounded-full border-current border-t-transparent", SPINNER_SIZE_CLASS[size]) }), isLabelVisible ? (_jsx("span", { className: "text-content-secondary", children: label })) : (_jsx(VisuallyHidden, { children: label }))] }));
+//# sourceMappingURL=Spinner.js.map

package/dist/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAsC,CAAA;AAiBrE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,KAAK,GAAG,UAAU,EAClB,IAAI,GAAG,IAAI,EACX,GAAG,SAAS,EACC,EAAa,EAAE,CAAC,CAC7B,mBACM,SAAS,gBASD,KAAK,EACjB,SAAS,EAAE,WAAW,CACpB,0DAA0D,EAC1D,SAAS,CACV,EACD,IAAI,EAAC,QAAQ,aAEb,8BACc,MAAM,EAClB,SAAS,EAAE,WAAW;YACpB,2DAA2D;YAC3D,4DAA4D;YAC5D,4DAA4D;YAC5D,8BAA8B;YAC9B,yFAAyF,EACzF,kBAAkB,CAAC,IAAI,CAAC,CACzB,GACD,EAED,cAAc,CAAC,CAAC,CAAC,CAChB,eAAM,SAAS,EAAC,wBAAwB,YACrC,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,cAAE,KAAK,GAAkB,CACzC,IACI,CACR,CAAA"}

package/dist/Tabs/TabTrigger.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import type { TabItem, TabsOrientation } from "./Tabs.tsx";
+export type TabTriggerProps = {
+    id: string;
+    isSelected: boolean;
+    onSelect: (key: string) => void;
+    orientation: TabsOrientation;
+    panelId: string;
+    /** `RovingFocus.register` — membership of the arrow-key group. */
+    registerFocus: (value: string) => () => void;
+    /** `SinglePicker.register` — membership of the choice. */
+    registerSelection: (value: string) => () => void;
+    tab: TabItem;
+    tabIndex: number;
+    trackElement: (key: string, element: HTMLButtonElement | null) => void;
+};
+/**
+ * Its own file for a reason that is not style: **both
+ * registrations are effects**, and an effect cannot run in a loop.
+ * Any member of a registering group ends up shaped like this, so
+ * it is worth seeing on its own.
+ *
+ * The two registrations are separate on purpose. A disabled tab
+ * joins the *choice* — it is still one of the options, still owns
+ * a panel and an id, and can still be the one selected when a
+ * consumer says so — and stays out of the *focus* group, so the
+ * arrow keys skip it without any command in `RovingFocus` having
+ * to know what "disabled" means. Registration is membership; that
+ * is the whole mechanism.
+ */
+export declare const TabTrigger: ({ id, isSelected, onSelect, orientation, panelId, registerFocus, registerSelection, tab, tabIndex, trackElement, }: TabTriggerProps) => ReactNode;
+//# sourceMappingURL=TabTrigger.d.ts.map

package/dist/Tabs/TabTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTrigger.d.ts","sourceRoot":"","sources":["../../src/Tabs/TabTrigger.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,OAAO,KAAK,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAyB1D,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,UAAU,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,WAAW,EAAE,eAAe,CAAA;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC5C,0DAA0D;IAC1D,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAChD,GAAG,EAAE,OAAO,CAAA;IACZ,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,CACZ,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,iBAAiB,GAAG,IAAI,KAC9B,IAAI,CAAA;CACV,CAAA;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,oHAWxB,eAAe,KAAG,SAoDpB,CAAA"}

package/dist/Tabs/TabTrigger.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { FOCUS_RING_CLASS } from "../intentStyles.js";
+import { toClassName } from "../toClassName.js";
+/**
+ * The selected marker runs along the edge the tab list itself
+ * sits on — under a horizontal bar, down the inline-end of a
+ * vertical rail — and the negative margin pulls it over the
+ * list's own border so the two read as one line rather than two.
+ *
+ * Logical properties throughout, which is the house rule and also
+ * the only way a vertical rail lands on the correct side in RTL.
+ */
+const ORIENTATION_EDGE_CLASS = {
+    horizontal: {
+        base: "-mb-px border-b-2",
+        selected: "border-b-intent-accent-solid",
+    },
+    vertical: {
+        base: "-me-px border-e-2 text-start",
+        selected: "border-e-intent-accent-solid",
+    },
+};
+/**
+ * Its own file for a reason that is not style: **both
+ * registrations are effects**, and an effect cannot run in a loop.
+ * Any member of a registering group ends up shaped like this, so
+ * it is worth seeing on its own.
+ *
+ * The two registrations are separate on purpose. A disabled tab
+ * joins the *choice* — it is still one of the options, still owns
+ * a panel and an id, and can still be the one selected when a
+ * consumer says so — and stays out of the *focus* group, so the
+ * arrow keys skip it without any command in `RovingFocus` having
+ * to know what "disabled" means. Registration is membership; that
+ * is the whole mechanism.
+ */
+export const TabTrigger = ({ id, isSelected, onSelect, orientation, panelId, registerFocus, registerSelection, tab, tabIndex, trackElement, }) => {
+    const { isDisabled = false, key, label } = tab;
+    const edge = ORIENTATION_EDGE_CLASS[orientation];
+    useEffect(() => registerSelection(key), [key, registerSelection]);
+    useEffect(() => {
+        if (isDisabled) {
+            return;
+        }
+        return registerFocus(key);
+    }, [isDisabled, key, registerFocus]);
+    return (_jsx("button", { "aria-controls": panelId, "aria-selected": isSelected, className: toClassName("cursor-pointer border-transparent px-3 py-2 font-medium text-sm whitespace-nowrap transition-colors duration-(--duration-fast) ease-standard", edge.base, 
+        // Two entries rather than one interpolated string:
+        // `tailwindCandidates.test.ts` rejects a template literal
+        // in a className outright, because Tailwind's scanner
+        // cannot see a class that only exists at runtime.
+        isSelected && edge.selected, isSelected
+            ? "text-content-primary"
+            : "text-content-secondary hover:text-content-primary", isDisabled &&
+            "cursor-not-allowed text-content-disabled hover:text-content-disabled", FOCUS_RING_CLASS), disabled: isDisabled, id: id, onClick: () => {
+            onSelect(key);
+        }, ref: (element) => {
+            trackElement(key, element);
+        }, role: "tab", tabIndex: tabIndex, type: "button", children: label }));
+};
+//# sourceMappingURL=TabTrigger.js.map

package/dist/Tabs/TabTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabTrigger.js","sourceRoot":"","sources":["../../src/Tabs/TabTrigger.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C;;;;;;;;GAQG;AACH,MAAM,sBAAsB,GAGxB;IACF,UAAU,EAAE;QACV,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,8BAA8B;KACzC;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,8BAA8B;QACpC,QAAQ,EAAE,8BAA8B;KACzC;CACF,CAAA;AAoBD;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,EAAE,EACF,UAAU,EACV,QAAQ,EACR,WAAW,EACX,OAAO,EACP,aAAa,EACb,iBAAiB,EACjB,GAAG,EACH,QAAQ,EACR,YAAY,GACI,EAAa,EAAE;IAC/B,MAAM,EAAE,UAAU,GAAG,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,CAAA;IAE9C,MAAM,IAAI,GAAG,sBAAsB,CAAC,WAAW,CAAC,CAAA;IAEhD,SAAS,CACP,GAAG,EAAE,CAAC,iBAAiB,CAAC,GAAG,CAAC,EAC5B,CAAC,GAAG,EAAE,iBAAiB,CAAC,CACzB,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,OAAO,aAAa,CAAC,GAAG,CAAC,CAAA;IAC3B,CAAC,EAAE,CAAC,UAAU,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC,CAAA;IAEpC,OAAO,CACL,kCACiB,OAAO,mBACP,UAAU,EACzB,SAAS,EAAE,WAAW,CACpB,8IAA8I,EAC9I,IAAI,CAAC,IAAI;QACT,mDAAmD;QACnD,0DAA0D;QAC1D,sDAAsD;QACtD,kDAAkD;QAClD,UAAU,IAAI,IAAI,CAAC,QAAQ,EAC3B,UAAU;YACR,CAAC,CAAC,sBAAsB;YACxB,CAAC,CAAC,mDAAmD,EACvD,UAAU;YACR,sEAAsE,EACxE,gBAAgB,CACjB,EACD,QAAQ,EAAE,UAAU,EACpB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,GAAG,CAAC,CAAA;QACf,CAAC,EACD,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE;YACf,YAAY,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;QAC5B,CAAC,EACD,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,YAEZ,KAAK,GACC,CACV,CAAA;AACH,CAAC,CAAA"}