@charcuterie/ui 1.0.1 → 1.1.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/Lightbox/Lightbox.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from "react";
+export type LightboxProps = {
+    /**
+     * Required, and the whole reason this is not a bare `<img>` in a
+     * dialog. It names both the enlarged image and — via `heading`'s
+     * default below — the dialog itself, and a poster grid of unnamed
+     * images is unnavigable rather than merely imperfect. Same rule
+     * `MediaTile` makes.
+     */
+    alt: string;
+    /** Shown under the enlarged image. A year, a source, a filename. */
+    caption?: ReactNode;
+    /** Applied to the built-in trigger button, not the dialog. */
+    className?: string;
+    /**
+     * The dialog's accessible name and visible heading. Defaults to
+     * `alt`, which is right when the thumbnail's alt is already the
+     * title ("THE OUTFIT poster"); pass it when the two should differ.
+     */
+    heading?: string;
+    /**
+     * **Controlled** open state. Omit for the uncontrolled default,
+     * where the trigger owns it through `useVisibility`. Present means
+     * the caller owns it and the built-in trigger becomes a plain
+     * button that only *reports* intent through `onOpenChange`.
+     */
+    isOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    src: string;
+    /**
+     * The clickable thumbnail — a smaller `<img>`, usually. Omitted in
+     * the controlled, trigger-elsewhere case, where something else in
+     * the page opens the lightbox and this renders only the overlay.
+     */
+    thumbnail?: ReactNode;
+};
+/**
+ * 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.
+ *
+ * ### Controlled and not, one component
+ *
+ * `useVisibility` runs unconditionally — hooks cannot be conditional
+ * — but is *consulted* only when `isOpen` is absent. A caller that
+ * passes `isOpen` owns the truth; the internal store is then an
+ * unread two-field object, which is cheaper than splitting this into
+ * two components that share a Modal body.
+ */
+export declare const Lightbox: ({ alt, caption, className, heading, isOpen, onOpenChange, src, thumbnail, }: LightboxProps) => ReactNode;
+//# sourceMappingURL=Lightbox.d.ts.map

package/dist/Lightbox/Lightbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox.d.ts","sourceRoot":"","sources":["../../src/Lightbox/Lightbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,aAAa,GAAG;IAC1B;;;;;;OAMG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,GAAG,EAAE,MAAM,CAAA;IACX;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,GAAI,6EAStB,aAAa,KAAG,SAwElB,CAAA"}

package/dist/Lightbox/Lightbox.js

@@ -0,0 +1,50 @@
+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 { 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.
+ *
+ * ### Controlled and not, one component
+ *
+ * `useVisibility` runs unconditionally — hooks cannot be conditional
+ * — but is *consulted* only when `isOpen` is absent. A caller that
+ * passes `isOpen` owns the truth; the internal store is then an
+ * unread two-field object, which is cheaper than splitting this into
+ * two components that share a Modal body.
+ */
+export const Lightbox = ({ alt, caption, className, heading, isOpen, onOpenChange, src, thumbnail, }) => {
+    const isControlled = isOpen !== undefined;
+    const { hide, isVisible, show } = useVisibility();
+    const isShown = isControlled ? isOpen : isVisible;
+    const requestOpen = () => {
+        if (!isControlled) {
+            show();
+        }
+        onOpenChange?.(true);
+    };
+    const requestClose = () => {
+        if (!isControlled) {
+            hide();
+        }
+        onOpenChange?.(false);
+    };
+    return (_jsxs(_Fragment, { children: [thumbnail === undefined ? null : (_jsx("button", { "aria-label": `Enlarge ${heading ?? alt}`, className: toClassName(
+                // `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, 
+                            // `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.
+                            className: "max-h-[75dvh] w-auto max-w-full rounded-md object-contain", src: src }), caption ? (_jsx("figcaption", { className: "text-center text-content-muted text-sm", children: caption })) : null] }) })] }));
+};
+//# sourceMappingURL=Lightbox.js.map

package/dist/Lightbox/Lightbox.js.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -40,6 +40,10 @@ export type { ButtonProps } from "./Button/Button.tsx";
 export { Button } from "./Button/Button.tsx";
 export type { CardPadding, CardProps, CardSurface, } from "./Card/Card.tsx";
 export { Card } from "./Card/Card.tsx";
+export type { ColorSchemeSwitcherProps } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.tsx";
+export { ColorSchemeSwitcher } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.tsx";
+export type { ColorSchemeIcons, ColorSchemeToggleProps, } from "./ColorSchemeToggle/ColorSchemeToggle.tsx";
+export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.tsx";
 export type { BadgeSize } from "./controlStyles.ts";
 export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.ts";
 export type { EmptyStateProps, EmptyStateSize, } from "./EmptyState/EmptyState.tsx";
@@ -54,6 +58,8 @@ export type { IconButtonProps } from "./IconButton/IconButton.tsx";
 export { IconButton } from "./IconButton/IconButton.tsx";
 export type { IntentAppearance } from "./intentStyles.ts";
 export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.ts";
+export type { LightboxProps } from "./Lightbox/Lightbox.tsx";
+export { Lightbox } from "./Lightbox/Lightbox.tsx";
 export type { LiveStatusIndicatorProps, LiveStatusIndicatorSize, } from "./LiveStatusIndicator/LiveStatusIndicator.tsx";
 export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.tsx";
 export type { LogLine, LogViewerProps, } from "./LogViewer/LogViewer.tsx";

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -35,6 +35,8 @@ export { Alert } from "./Alert/Alert.js";
 export { Badge } from "./Badge/Badge.js";
 export { Button } from "./Button/Button.js";
 export { Card } from "./Card/Card.js";
+export { ColorSchemeSwitcher } from "./ColorSchemeSwitcher/ColorSchemeSwitcher.js";
+export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.js";
 export { BADGE_SIZE_CLASS, CONTROL_SIZE_CLASS, DOT_SIZE_CLASS, ICON_CONTROL_SIZE_CLASS, MIN_TOUCH_TARGET_CLASS, SPINNER_SIZE_CLASS, } from "./controlStyles.js";
 export { EmptyState } from "./EmptyState/EmptyState.js";
 export { Field } from "./Field/Field.js";
@@ -42,6 +44,7 @@ export { FieldGroup } from "./Field/FieldGroup.js";
 export { FileDropZone } from "./FileDropZone/FileDropZone.js";
 export { IconButton } from "./IconButton/IconButton.js";
 export { DISABLED_CLASS, FOCUS_RING_CLASS, INTENT_APPEARANCE_CLASS, INTENT_CONTENT_CLASS, INTENT_HOVER_CLASS, INTENT_SOLID_FILL_CLASS, } from "./intentStyles.js";
+export { Lightbox } from "./Lightbox/Lightbox.js";
 export { LiveStatusIndicator } from "./LiveStatusIndicator/LiveStatusIndicator.js";
 export { LogViewer } from "./LogViewer/LogViewer.js";
 export { MediaTile } from "./MediaTile/MediaTile.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAwB,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAK1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAO1E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAyB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAOH,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAM5C,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA2C,CAAA;AAE7E,OAAO,EACL,gBAAgB,EAChB,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAwB,CAAA;AAEnD,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAiC,CAAA;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA6B,CAAA;AAExD,OAAO,EACL,cAAc,EACd,gBAAgB,EAChB,uBAAuB,EACvB,oBAAoB,EACpB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,mBAAmB,CAAA;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAKnF,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAKrD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA2B,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAK7D,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAKtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAK/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA+B,CAAA;AAE3D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAKvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAyC,CAAA;AAO1E,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAqB,CAAA;AAK5C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAyB,CAAA;AAKlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA+C,CAAA;AAEnF,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,EACL,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,mBAAmB,CAAA;AAO1B,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAiB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAmB,CAAA;AAKzC,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAyB,CAAA;AAErD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAE5D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAuB,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,oCAAqC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -43,8 +43,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@charcuterie/logic": "1.0.1",
-    "@charcuterie/tokens": "1.0.0",
+    "@charcuterie/logic": "1.1.0",
+    "@charcuterie/tokens": "1.1.0",
     "@floating-ui/react": "^0.27.20"
   },
   "peerDependencies": {

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.mdx

@@ -0,0 +1,70 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
+
+import * as ColorSchemeSwitcherStories from "./ColorSchemeSwitcher.stories";
+
+<Meta of={ColorSchemeSwitcherStories} />
+
+# ColorSchemeSwitcher
+
+The connected switcher — **Layer 3, and the only layer that touches the browser.** It wires
+the [`useColorScheme`](/) hook to the three defaults from `@charcuterie/logic/browser`
+(`matchMedia` + `localStorage` + `data-scheme` on `<html>`) and renders the presentational
+[`ColorSchemeToggle`](?path=/docs/components-colorschemetoggle--docs). Drop it in and the app
+follows the OS, remembers the user's choice, and re-themes with zero React re-render.
+
+<Canvas of={ColorSchemeSwitcherStories.Default} />
+
+## Props
+
+<Controls />
+
+## Every seam is overridable — that is the point
+
+`resolver`, `persistence`, and `apply` all default to the browser implementations but can be
+replaced. Isolating the browser dependency to this one component is what lets a **non-browser
+host** reuse the entire stack unchanged.
+
+### Electron (`nativeTheme`) — copy-paste
+
+The image-viewer is Electron, which owns the OS appearance through `nativeTheme`. Pass it as
+the resolver and nothing else changes:
+
+```tsx
+import { ColorSchemeSwitcher } from "@charcuterie/ui";
+import type { ColorSchemeResolver } from "@charcuterie/logic";
+import { nativeTheme } from "electron";
+import { Monitor, Moon, Sun } from "lucide-react";
+
+const nativeThemeResolver: ColorSchemeResolver = {
+  get: () => (nativeTheme.shouldUseDarkColors ? "dark" : "light"),
+  subscribe: (listener) => {
+    nativeTheme.on("updated", listener);
+    return () => nativeTheme.off("updated", listener);
+  },
+};
+
+<ColorSchemeSwitcher
+  resolver={nativeThemeResolver}
+  icons={{ light: <Sun />, dark: <Moon />, system: <Monitor /> }}
+/>;
+```
+
+`persistence` and `apply` keep their browser defaults in an Electron **renderer** (it has
+`localStorage` and a `document`). Only the resolver needs replacing, because only the OS
+answer comes from outside the DOM.
+
+### React-Native — the shape
+
+RN has no `data-scheme` and no `matchMedia`. Replace **all three** seams: a resolver over
+`Appearance.getColorScheme()` / `Appearance.addChangeListener`, a persistence over
+`AsyncStorage`, and an `apply` that sets a theme **context value** instead of a DOM
+attribute. `ColorSchemeToggle` renders as-is; only the seams differ.
+
+## First paint
+
+Following the OS/persisted choice means `<html data-scheme>` must be set **before first
+paint**, or the page flashes the wrong theme for a frame. `@charcuterie/tokens` ships the
+inline snippet — `buildFirstPaintScript(variant, { storageKey })`, emitted to
+`dist/first-paint-script.html`. Paste it into `<head>` before any stylesheet, and keep its
+`storageKey` equal to the one `localStoragePersistence(key)` uses — the shared default is
+`DEFAULT_COLOR_SCHEME_STORAGE_KEY` (`"charcuterie-scheme"`), exported from both packages.

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.stories.tsx

@@ -0,0 +1,118 @@
+import type {
+  ColorSchemePersistence,
+  ColorSchemeResolver,
+  ResolvedColorScheme,
+} from "@charcuterie/logic"
+import type { Meta, StoryObj } from "@storybook/react"
+import { useRef, useState } from "react"
+import type { ColorSchemeIcons } from "../ColorSchemeToggle/ColorSchemeToggle.tsx"
+import {
+  MonitorIcon,
+  MoonIcon,
+  SunIcon,
+} from "../icons.storyHelpers.tsx"
+import { ColorSchemeSwitcher } from "./ColorSchemeSwitcher.tsx"
+
+const ICONS: ColorSchemeIcons = {
+  dark: <MoonIcon />,
+  light: <SunIcon />,
+  system: <MonitorIcon />,
+}
+
+/**
+ * A controllable stand-in for `matchMedia` — the same shape Electron
+ * `nativeTheme` and RN `Appearance` satisfy. The stories inject it
+ * instead of the real one so the board never reads the CI machine's
+ * OS setting and never writes `localStorage`.
+ */
+const makeFakeResolver = (
+  initial: ResolvedColorScheme,
+): ColorSchemeResolver => ({
+  get: () => initial,
+  subscribe: () => () => {},
+})
+
+const inMemoryPersistence = (): ColorSchemePersistence => {
+  let value:
+    | Parameters<ColorSchemePersistence["write"]>[0]
+    | null = null
+
+  return {
+    read: () => value,
+    write: (mode) => {
+      value = mode
+    },
+  }
+}
+
+/**
+ * Drives a **scoped** demo: the switcher writes `data-scheme` onto
+ * this panel rather than `<html>`, so the surrounding Storybook
+ * chrome is untouched and the effect is contained and visible. In a
+ * real app the default `apply` targets `<html>`.
+ */
+const ScopedSwitcherDemo = () => {
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  const [seams] = useState(() => ({
+    persistence: inMemoryPersistence(),
+    resolver: makeFakeResolver("dark"),
+  }))
+
+  return (
+    <div
+      className="inline-flex items-center gap-3 rounded-lg border border-border-subtle bg-surface-base p-3 text-content-primary"
+      data-scheme="dark"
+      ref={panelRef}
+    >
+      <ColorSchemeSwitcher
+        apply={(resolvedScheme) => {
+          panelRef.current?.setAttribute(
+            "data-scheme",
+            resolvedScheme,
+          )
+        }}
+        icons={ICONS}
+        persistence={seams.persistence}
+        resolver={seams.resolver}
+      />
+
+      <span className="text-sm text-content-secondary">
+        This panel follows the switcher.
+      </span>
+    </div>
+  )
+}
+
+const meta = {
+  title: "Components/ColorSchemeSwitcher",
+  component: ColorSchemeSwitcher,
+  parameters: { layout: "padded" },
+  // The three injected seams are functions/objects, not values a
+  // Controls panel can render — `react-docgen` sees them as opaque
+  // names from `@charcuterie/logic`. Disabled explicitly rather than
+  // left to fall through to the object control.
+  argTypes: {
+    apply: { control: false },
+    persistence: { control: false },
+    resolver: { control: false },
+  },
+  args: {
+    icons: ICONS,
+  },
+} satisfies Meta<typeof ColorSchemeSwitcher>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+/**
+ * Connected: the switcher builds its own state through
+ * `useColorScheme` and applies the resolved scheme. Here the OS
+ * resolver and persistence are injected fakes and the applier is
+ * scoped to the demo panel, which is exactly how a non-browser host
+ * (Electron `nativeTheme`) wires it — by replacing those seams.
+ */
+export const Default: Story = {
+  render: () => <ScopedSwitcherDemo />,
+}

package/src/ColorSchemeSwitcher/ColorSchemeSwitcher.test.tsx

@@ -0,0 +1,53 @@
+import { composeStories } from "@storybook/react"
+import { expect, userEvent, within } from "storybook/test"
+import { test } from "vitest"
+
+import { expectNoAxeViolations } from "../expectNoAxeViolations.testHelpers.ts"
+import { mountStory } from "../mountStory.testHelpers.ts"
+import { expectAgentDrivable } from "../testing/index.ts"
+import * as stories from "./ColorSchemeSwitcher.stories.tsx"
+
+const { Default } = composeStories(stories)
+
+/**
+ * The connected switcher is agent-drivable and cycles like the
+ * toggle — the extra thing proven here is that the resolved scheme
+ * reaches the applier: the demo panel's `data-scheme` tracks it.
+ */
+test("it renders a named, drivable button", async () => {
+  const { canvas } = await mountStory(Default)
+
+  expectAgentDrivable(canvas, {
+    name: /colour scheme/i,
+    role: "button",
+  })
+})
+
+test("system resolves through the injected resolver to the panel", async () => {
+  const { canvasElement } = await mountStory(Default)
+
+  const panel = canvasElement.querySelector("[data-scheme]")
+
+  // The injected resolver answers "dark", mode starts on system.
+  expect(panel?.getAttribute("data-scheme")).toBe("dark")
+})
+
+test("cycling to a concrete mode re-applies the scheme", async () => {
+  const { canvasElement } = await mountStory(Default)
+
+  const canvas = within(canvasElement)
+
+  const button = expectAgentDrivable(canvas, {
+    name: /colour scheme/i,
+    role: "button",
+  })
+
+  const panel = canvasElement.querySelector("[data-scheme]")
+
+  // system → light: resolved scheme is now light regardless of OS.
+  await userEvent.click(button)
+
+  expect(panel?.getAttribute("data-scheme")).toBe("light")
+
+  await expectNoAxeViolations(canvasElement)
+})