@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/code/index.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+type CodeProps = Omit<React.ComponentProps<'div'>, 'children'> & Pick<StyleAxisProps, 'radius' | 'border'> & {
+    code: string;
+    icon?: React.ElementType;
+    theme?: 'light' | 'dark';
+    /** Shiki theme IDs for light/dark; see https://shiki.style/themes */
+    themes?: {
+        light: string;
+        dark: string;
+    };
+    /**
+     * Show copy control in the header. Defaults to `true` when `lang` is set; pass `false` to hide.
+     */
+    copyButton?: boolean;
+    lang?: string;
+    fileName?: string | React.ReactNode;
+    /** Fixes the outer wrapper height (number = px). Code body scrolls vertically. */
+    height?: number | string;
+    /** Number every line in a gutter beside the code. The numbers are not selected or copied with the code. */
+    lineNumbers?: boolean;
+    /** 1-based lines to mark with a tint across the full width (a search hit, a linked line). */
+    highlightLines?: readonly number[];
+    /** Gives each line an `id` of this prefix plus its number (`L` → `L42`), so a page can scroll to or link a line. Keep it unique on the page. */
+    lineIdPrefix?: string;
+    /** Above this many characters the code is shown as plain text, so a very large file stays quick. Default `200000`. */
+    maxHighlightLength?: number;
+    /**
+     * Something to show beside a line, by 1-based line number: drawn at the
+     * line's left edge, in the padding before the numbers, and scrolling with
+     * it. Keep it to a small icon or icon button (about 14px); it may be
+     * interactive, and comes after the code in the reading order. A line the
+     * code does not have gets nothing. Default none.
+     */
+    lineMarks?: Readonly<Record<number, React.ReactNode>>;
+};
+declare function Code({ className, code, icon: Icon, theme, themes, copyButton, lang, fileName, height, style, radius, border, lineNumbers, highlightLines, lineIdPrefix, maxHighlightLength, lineMarks, ...props }: CodeProps): React.JSX.Element;
+
+export { Code, type CodeProps };

package/dist/components/code/index.js

@@ -0,0 +1,2 @@
+import { Code } from "../../core/animate-ui/components/animate/code.js";
+export { Code };

package/dist/components/code-editor/code-editor.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { buttonVariants } from "../../core/animate-ui/components/buttons/copy.js";
 import { FieldLabelRow, fieldHintClassName } from "../../core/field-label-row.js";
 import { CodeHeader } from "../../core/animate-ui/components/animate/code-header.js";
@@ -69,7 +70,12 @@ function toCssSize(size) {
 * then Tab, to move focus out of the editor. For JSON (or with a custom
 * `formatter`) the header has a Format button next to Copy.
 */
-var CodeEditor = React$1.forwardRef(({ className, style, lang = "json", theme = "light", themes = DEFAULT_CODE_EDITOR_THEMES, hideHeader = false, fileName, icon, copyButton = true, formatButton, formatter, onFormatError, formatLabel = "Format", copyLabel, headerActions, label, required, hintContent, error, errorContent, minHeight, maxHeight, wrap = false, tabSize = 2, maxHighlightLength = 1e4, id, value, defaultValue, onChange, onKeyDown, onBlur, onScroll, disabled, readOnly, "aria-describedby": ariaDescribedBy, ...textareaProps }, forwardedRef) => {
+var CodeEditor = React$1.forwardRef(({ className, style, radius, border, lang = "json", theme = "light", themes = DEFAULT_CODE_EDITOR_THEMES, hideHeader = false, fileName, icon, copyButton = true, formatButton, formatter, onFormatError, formatLabel = "Format", copyLabel, headerActions, label, required, hintContent, error, errorContent, minHeight, maxHeight, wrap = false, tabSize = 2, maxHighlightLength = 1e4, id, value, defaultValue, onChange, onKeyDown, onBlur, onScroll, disabled, readOnly, "aria-describedby": ariaDescribedBy, ...textareaProps }, forwardedRef) => {
+	const axes = useStyleAxes({
+		radius,
+		border,
+		style
+	}, ["radius", "border"]);
 	const autoId = React$1.useId();
 	const textareaId = id || autoId;
 	const errorId = `${textareaId}-error`;
@@ -151,8 +157,8 @@ var CodeEditor = React$1.forwardRef(({ className, style, lang = "json", theme =
 	const editor = /* @__PURE__ */ jsxs("div", {
 		"data-slot": "code-editor",
 		"data-disabled": disabled ? "" : void 0,
-		className: cn("relative flex flex-col overflow-hidden rounded-lg border bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", "has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring has-[textarea:focus-visible]:ring-offset-2", hasError && "border-destructive has-[textarea:focus-visible]:ring-destructive", className),
-		style,
+		className: cn("relative flex flex-col overflow-hidden rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-lg)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] bg-background ring-offset-background transition-[box-shadow,border-color] duration-200 ease-in-out", "has-[textarea:focus-visible]:ring-2 has-[textarea:focus-visible]:ring-ring has-[textarea:focus-visible]:ring-offset-2", hasError && "border-destructive has-[textarea:focus-visible]:ring-destructive", className),
+		style: axes.style,
 		children: [showHeader && /* @__PURE__ */ jsx(CodeHeader, {
 			icon,
 			fileName,

package/dist/components/code-editor/index.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+/**
+ * Props for `CodeEditor`. Native textarea props (`value`, `defaultValue`,
+ * `onChange`, `onBlur`, `name`, `id`, `disabled`, `readOnly`, `placeholder`,
+ * `rows`, `aria-*`, …) go to the underlying `<textarea>`, and the forwarded
+ * ref points at it, so `{...field}` / `{...register(name)}` from
+ * react-hook-form work unchanged. `className` and `style` go to the framed
+ * editor box, not the textarea.
+ */
+interface CodeEditorProps extends Omit<React.ComponentProps<"textarea">, "size" | "wrap" | "children" | "ref">, Pick<StyleAxisProps, "radius" | "border"> {
+    /** Shiki language. Default `"json"`. Languages outside the curated bundle render as plain text; `"text"` never highlights. */
+    lang?: string;
+    /** Which of `themes` to colour with. Pass the app's dark-mode flag. Default `"light"`. */
+    theme?: "light" | "dark";
+    /** Shiki theme IDs; see `Code`. Default `everforest-light` / `everforest-dark`. */
+    themes?: {
+        light: string;
+        dark: string;
+    };
+    /**
+     * Hides the header, including its copy and format buttons. Without it the
+     * header is left out automatically when there is nothing to show: no
+     * `fileName`, no `headerActions`, and neither a copy nor a format button.
+     */
+    hideHeader?: boolean;
+    /** Header: same behaviour as `Code`. */
+    fileName?: React.ReactNode;
+    icon?: React.ElementType;
+    /** Copy button in the header; copies the current value. Default `true`. */
+    copyButton?: boolean;
+    /**
+     * Format button in the header, before the copy button. Shown by default
+     * when a formatter is available: built in for `lang="json"` (pretty-prints
+     * with `tabSize` spaces), or any `lang` when `formatter` is passed. Pass
+     * `false` to hide it. Formatting is undoable (Cmd/Ctrl+Z) and fires `onChange`.
+     */
+    formatButton?: boolean;
+    /** Custom formatter; replaces the built-in JSON one. Throw to reject content that can't be formatted. */
+    formatter?: (value: string) => string;
+    /** Called when the formatter throws, e.g. on invalid JSON. The value is left unchanged. */
+    onFormatError?: (error: unknown) => void;
+    /** Accessible name and tooltip of the format button. Default `"Format"`. */
+    formatLabel?: string;
+    /** Accessible name and tooltip of the copy button. Default `"Copy"`. */
+    copyLabel?: string;
+    /** Extra header controls before the format and copy buttons. */
+    headerActions?: React.ReactNode;
+    /** Field chrome: same meaning as `Textarea`. */
+    label?: React.ReactNode;
+    required?: boolean;
+    hintContent?: React.ReactNode;
+    error?: boolean;
+    errorContent?: React.ReactNode;
+    /** Minimum height of the editing area (below the header). Numbers are pixels. */
+    minHeight?: number | string;
+    /** Maximum height of the editing area; taller content scrolls. Numbers are pixels. */
+    maxHeight?: number | string;
+    /** Soft-wrap long lines. Default `false` (long lines scroll horizontally). */
+    wrap?: boolean;
+    /** Spaces inserted by Tab and removed by Shift+Tab; also the width of a tab character. Default `2`. */
+    tabSize?: number;
+    /**
+     * Above this many characters, highlighting stops and plain text is shown,
+     * so typing in a very large document stays responsive. Default `10000`.
+     */
+    maxHighlightLength?: number;
+}
+
+/**
+ * Editable, syntax-highlighted code input. Looks like `Code` (same header,
+ * copy button and Shiki themes) and behaves like `Textarea` in a form:
+ * controlled or uncontrolled, native `onChange`, ref to the `<textarea>`.
+ *
+ * Tab indents, Shift+Tab outdents, Enter keeps the indentation. Press Esc,
+ * then Tab, to move focus out of the editor. For JSON (or with a custom
+ * `formatter`) the header has a Format button next to Copy.
+ */
+declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { CodeEditor, type CodeEditorProps };

package/dist/components/code-editor/index.js

@@ -0,0 +1,2 @@
+import { CodeEditor } from "./code-editor.js";
+export { CodeEditor };

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Animated container that holds the collapsible body.
+ *
+ * Lifecycle (inherited from Radix `@radix-ui/react-collapsible`):
+ * - While the parent `Collapsible` is closed and `forceMount` is unset, the
+ *   subtree is gated by Radix's `Presence` and `isOpen && children`, so it is
+ *   never rendered into the DOM. `useEffect`/`useQuery`/etc. inside it do not
+ *   fire.
+ * - On first expand, the subtree mounts and effects fire.
+ * - On collapse, the subtree unmounts after the close animation. On the next
+ *   expand it remounts, so any data-fetching effect runs again. Cache at the
+ *   data layer (e.g. React Query) if you need to avoid refetching per toggle.
+ *
+ * Footgun — JSX eager evaluation:
+ * Any synchronous expression placed directly as a child of `CollapsibleContent`
+ * is evaluated by the parent during its own render, before Radix sees it. No
+ * collapsible primitive can prevent this. Wrap fetching/expensive work inside
+ * a component so its effects fire on mount.
+ *
+ * @example
+ * // Safe: DeviceDetails only mounts when expanded, so its fetch only runs then.
+ * <CollapsibleContent>
+ *   <DeviceDetails id={id} />
+ * </CollapsibleContent>
+ *
+ * // Unsafe: fetchData(id) runs on every parent render for every card,
+ * // regardless of open state.
+ * <CollapsibleContent>
+ *   {fetchData(id)}
+ * </CollapsibleContent>
+ *
+ * Pass `forceMount` if you explicitly need the subtree mounted while closed
+ * (e.g. SEO crawlers, layout measurement).
+ */
+declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/collapsible/index.js

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../core/collapsible.js";
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/column-panel/column-panel.js

@@ -0,0 +1,38 @@
+import { ResizablePanel } from "../resizable/resizable-panel.js";
+import { usePanelFlag } from "./use-panel-flag.js";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/column-panel/column-panel.tsx
+/**
+* A panel of a `ResizableGroup` that can be shown and hidden (a chat, a
+* details column, a terminal): collapsible to nothing, following its `open`
+* flag. Hidden, it stays mounted — a conversation survives being put away —
+* but leaves the accessibility tree and the tab order.
+*/
+function ColumnPanel({ id, open, children, minSize, openSize, maxSize, size, className }) {
+	const panelRef = usePanelFlag(open, openSize);
+	useEffect(() => {
+		if (!open || size === void 0) return;
+		try {
+			panelRef.current?.resize(`${size}%`);
+		} catch {}
+	}, [size]);
+	return /* @__PURE__ */ jsx(ResizablePanel, {
+		id,
+		panelRef,
+		collapsible: true,
+		collapsedSize: 0,
+		minSize,
+		maxSize,
+		className,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "h-full min-h-0",
+			"data-state": open ? "open" : "collapsed",
+			"aria-hidden": !open,
+			inert: !open,
+			children
+		})
+	});
+}
+//#endregion
+export { ColumnPanel };

package/dist/components/column-panel/index.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ReactNode, RefObject } from 'react';
+import { P as PanelSize, b as ResizablePanelHandle } from '../../resizable.props-RxFY5tm_.js';
+import 'react-resizable-panels';
+
+interface ColumnPanelProps {
+    id: string;
+    /** Showing, or collapsed to nothing. */
+    open: boolean;
+    children: ReactNode;
+    minSize: PanelSize;
+    /** The size to open at (a percentage): the last size it was open at. */
+    openSize: number;
+    maxSize?: PanelSize;
+    /** While open, the size to be at (a percentage); it goes there whenever this changes. For a size set by a button (a maximize), not by a drag. */
+    size?: number;
+    className?: string;
+}
+
+/**
+ * A panel of a `ResizableGroup` that can be shown and hidden (a chat, a
+ * details column, a terminal): collapsible to nothing, following its `open`
+ * flag. Hidden, it stays mounted — a conversation survives being put away —
+ * but leaves the accessibility tree and the tab order.
+ */
+declare function ColumnPanel({ id, open, children, minSize, openSize, maxSize, size, className }: ColumnPanelProps): React.JSX.Element;
+
+/**
+ * Keeps a collapsible `ResizablePanel` in step with a flag: open → at its
+ * remembered size (`openSize`, a percentage), closed → collapsed. The flag is
+ * the truth and the panel follows it; the other direction (a drag shut)
+ * reaches the flag through the group's `onLayoutChanged`, never from here, so
+ * the two cannot chase each other. Pass the returned ref as `panelRef`.
+ */
+declare function usePanelFlag(open: boolean, openSize: number): RefObject<ResizablePanelHandle | null>;
+
+export { ColumnPanel, type ColumnPanelProps, usePanelFlag };

package/dist/components/column-panel/index.js

@@ -0,0 +1,3 @@
+import { usePanelFlag } from "./use-panel-flag.js";
+import { ColumnPanel } from "./column-panel.js";
+export { ColumnPanel, usePanelFlag };

package/dist/components/column-panel/use-panel-flag.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from "react";
+//#region src/components/column-panel/use-panel-flag.ts
+/**
+* Keeps a collapsible `ResizablePanel` in step with a flag: open → at its
+* remembered size (`openSize`, a percentage), closed → collapsed. The flag is
+* the truth and the panel follows it; the other direction (a drag shut)
+* reaches the flag through the group's `onLayoutChanged`, never from here, so
+* the two cannot chase each other. Pass the returned ref as `panelRef`.
+*/
+function usePanelFlag(open, openSize) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const panel = ref.current;
+		if (!panel) return;
+		let collapsed;
+		try {
+			collapsed = panel.isCollapsed();
+		} catch {
+			return;
+		}
+		if (open && collapsed) panel.resize(`${openSize}%`);
+		else if (!open && !collapsed) panel.collapse();
+	}, [open]);
+	return ref;
+}
+//#endregion
+export { usePanelFlag };

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+}
+interface AsyncComboboxProps extends Pick<StyleAxisProps, "radius" | "border"> {
+    value?: string;
+    onValueChange?: (value: string | undefined) => void;
+    options: ComboboxOption[];
+    onSearchChange?: (query: string) => void;
+    isLoading?: boolean;
+    placeholder?: string;
+    emptyText?: string;
+    searchPlaceholder?: string;
+    label?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** When true, user can clear the selection (parent group optional). */
+    clearable?: boolean;
+    hasMore?: boolean;
+    onLoadMore?: () => void;
+}
+declare function AsyncCombobox({ value, onValueChange, options, onSearchChange, isLoading, placeholder, emptyText, searchPlaceholder, label, required, disabled, className, clearable, hasMore, onLoadMore, radius, border, }: AsyncComboboxProps): React.JSX.Element;
+
+export { AsyncCombobox, type AsyncComboboxProps, type ComboboxOption };

package/dist/components/combobox/index.js

@@ -0,0 +1,2 @@
+import { AsyncCombobox } from "../../core/combobox/combobox.js";
+export { AsyncCombobox };

package/dist/components/confirmation-dialog/confirmation-dialog.js

@@ -1,6 +1,6 @@
 import { Button } from "../button/button.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../../core/animate-ui/components/radix/dialog.js";
 import { Alert } from "../alert/alert.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../../core/animate-ui/components/radix/dialog.js";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/confirmation-dialog/confirmation-dialog.tsx

package/dist/components/confirmation-dialog/index.d.ts

@@ -0,0 +1,40 @@
+import * as React$1 from 'react';
+import { b as ButtonProps } from '../../button-BxJ7s6sR.js';
+export { DialogTrigger } from '../dialog/index.js';
+import '../../button-BK-DIR_L.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../../style-axes-DSQ2DGc5.js';
+import '../../index-BQANnKs9.js';
+import 'radix-ui';
+import 'motion/react';
+
+interface ConfirmationDialogProps {
+    title: string;
+    description: string;
+    onConfirm: () => void | Promise<void>;
+    onCancel: () => void;
+    children?: React.ReactNode;
+    cancelButtonText?: string;
+    confirmButtonText?: string;
+    cancelButtonVariant?: ButtonProps["variant"];
+    confirmButtonVariant?: ButtonProps["variant"];
+    cancelButtonColor?: ButtonProps["color"];
+    confirmButtonColor?: ButtonProps["color"];
+    /** Leading icon on the cancel button. Omit for no icon. */
+    cancelButtonStartIcon?: React.ReactNode;
+    /** Trailing icon on the confirm button. Omit for no icon. */
+    confirmButtonEndIcon?: React.ReactNode;
+    isLoading?: boolean;
+    error?: string | React.ReactNode | null;
+    /**
+     * Controlled open state. Omit to let the dialog manage its own, driven by `children`
+     * as the trigger. Use this to open the dialog from somewhere that cannot host a
+     * trigger, such as a menu item.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+declare function ConfirmationDialog({ title, description, onConfirm, onCancel, children, cancelButtonText, confirmButtonText, cancelButtonVariant, confirmButtonVariant, cancelButtonColor, confirmButtonColor, cancelButtonStartIcon, confirmButtonEndIcon, isLoading, error, open, onOpenChange, }: ConfirmationDialogProps): React$1.JSX.Element;
+
+export { ConfirmationDialog, type ConfirmationDialogProps };

package/dist/components/confirmation-dialog/index.js

@@ -0,0 +1,3 @@
+import { DialogTrigger } from "../../core/animate-ui/components/radix/dialog.js";
+import { ConfirmationDialog } from "./confirmation-dialog.js";
+export { ConfirmationDialog, DialogTrigger };

package/dist/components/content-container/index.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { P as PageContainerMaxWidth } from '../../page-container.props-JutTvKFq.js';
+
+type ContentContainerMaxWidth = PageContainerMaxWidth;
+interface ContentContainerProps {
+    maxWidth?: ContentContainerMaxWidth;
+    children: ReactNode;
+    className?: string;
+    /** When true, omits the top margin (`mt-[72px]`) reserved for a fixed workspace header. */
+    noGutters?: boolean;
+}
+
+declare const ContentContainer: React.ForwardRefExoticComponent<ContentContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ContentContainer, type ContentContainerMaxWidth, type ContentContainerProps };

package/dist/components/content-container/index.js

@@ -0,0 +1,2 @@
+import { ContentContainer } from "./content-container.js";
+export { ContentContainer };

package/dist/components/copiable-text/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { S as Size } from '../../index-BQANnKs9.js';
+
+interface CopiableTextProps {
+    text: string | number;
+    /**
+     * Rendered immediately before the copy button. Buttons are joined into a single
+     * segmented group, so pass plain icon buttons with the copy button's chrome.
+     */
+    actions?: React.ReactNode;
+    /**
+     * Keep the action cluster visible instead of revealing it on hover/focus. The cluster then
+     * takes layout space, so the text truncates beside the buttons rather than sliding under them.
+     */
+    alwaysShowActions?: boolean;
+    /**
+     * Hide the action cluster on devices that can't hover (touch screens). Use it where a tap on
+     * the text should go to its container, e.g. a table row that opens a details page which
+     * offers the same copy action.
+     */
+    hideActionsOnTouch?: boolean;
+    /**
+     * Scale of the row height and the action buttons. Pass any `actions` at a matching
+     * size so the segmented group stays even.
+     *
+     * @default 'default'
+     */
+    size?: Size;
+    className?: string;
+}
+declare function CopiableText({ text, actions, alwaysShowActions, hideActionsOnTouch, size, className, }: CopiableTextProps): React.JSX.Element;
+
+export { CopiableText, type CopiableTextProps };

package/dist/components/copiable-text/index.js

@@ -0,0 +1,2 @@
+import { CopiableText } from "./copiable-text.js";
+export { CopiableText };

package/dist/components/coverflow/_constants/coverflow-poses.js

@@ -0,0 +1,23 @@
+//#region src/components/coverflow/_constants/coverflow-poses.ts
+/** Cards further than this from the front are hidden. */
+var VISIBLE_REACH = 3;
+var POSES = {
+	[-3]: "-translate-x-9/5 rotate-y-72 scale-80 brightness-70 z-0",
+	[-2]: "-translate-x-13/10 rotate-y-72 scale-86 brightness-80 z-10",
+	[-1]: "-translate-x-4/5 rotate-y-72 scale-92 brightness-90 z-20",
+	[0]: "translate-x-0 rotate-y-0 scale-100 brightness-100 z-30",
+	[1]: "translate-x-4/5 -rotate-y-72 scale-92 brightness-90 z-20",
+	[2]: "translate-x-13/10 -rotate-y-72 scale-86 brightness-80 z-10",
+	[3]: "translate-x-9/5 -rotate-y-72 scale-80 brightness-70 z-0"
+};
+/** Beyond the reach: further round still, and out of sight (where a card wraps from one end of the ring to the other). */
+var HIDDEN_LEFT = "-translate-x-23/10 rotate-y-80 scale-70 opacity-0 pointer-events-none z-0";
+var HIDDEN_RIGHT = "translate-x-23/10 -rotate-y-80 scale-70 opacity-0 pointer-events-none z-0";
+/** The pose for a card `offset` places from the front one. */
+function poseFor(offset) {
+	if (offset < -3) return HIDDEN_LEFT;
+	if (offset > VISIBLE_REACH) return HIDDEN_RIGHT;
+	return `${POSES[offset] ?? HIDDEN_RIGHT} opacity-100`;
+}
+//#endregion
+export { VISIBLE_REACH, poseFor };

package/dist/components/coverflow/_constants/coverflow-shapes.js

@@ -0,0 +1,23 @@
+//#region src/components/coverflow/_constants/coverflow-shapes.ts
+/**
+* The two card shapes (`aspect`) a coverflow comes in, each a set of sizes that fit
+* together: the card's width, its face's aspect, the reflection's depth (a
+* third of the face, so the floor mirrors only the nearer part) and the
+* stage's height (face + reflection, at each breakpoint).
+*/
+var COVERFLOW_SHAPES = {
+	square: {
+		card: "w-60 sm:w-80 lg:w-96",
+		face: "aspect-square",
+		reflection: "aspect-3/1",
+		stage: "h-80 sm:h-110 lg:h-128"
+	},
+	landscape: {
+		card: "w-56 sm:w-80 lg:w-96",
+		face: "aspect-4/3",
+		reflection: "aspect-4/1",
+		stage: "h-60 sm:h-84 lg:h-100"
+	}
+};
+//#endregion
+export { COVERFLOW_SHAPES };

package/dist/components/coverflow/_hooks/use-coverflow.js

@@ -0,0 +1,90 @@
+import { useControlledState } from "../../../core/hooks/use-controlled-state.js";
+import { ringSize, stepsTo, wrap } from "../_utils/ring.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/coverflow/_hooks/use-coverflow.ts
+/** A horizontal drag longer than this (CSS pixels) is a swipe. */
+var SWIPE_PX = 40;
+/** Arrow keys belong to a field that has focus, not to the ring. */
+function isEditable(target) {
+	return target instanceof HTMLElement && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName));
+}
+/**
+* Which slot of the ring is in front, and every way to change it: arrows, keys, a swipe,
+* a click on a side card, a dot. With `autoplayMs` it also turns by itself, and
+* holds still while someone is using it.
+*
+* It counts in ring SLOTS (so a turn always goes the way it was asked, even past
+* the end of the list) and reports ITEMS: `index` / `onIndexChange` are item
+* indices, and a controlled `index` that moves is reached the short way round.
+*/
+function useCoverflow({ count, index, defaultIndex = 0, onIndexChange, autoplayMs }) {
+	const slots = ringSize(count);
+	const [item, setItem] = useControlledState({
+		value: index === void 0 ? void 0 : wrap(index, count),
+		defaultValue: wrap(defaultIndex, count),
+		onChange: onIndexChange
+	});
+	const [slot, setSlot] = useState(() => wrap(item, count));
+	const [held, setHeld] = useState(false);
+	const swipeFrom = useRef(null);
+	const swiped = useRef(false);
+	const front = wrap(slot, slots);
+	if (count > 0 && wrap(front, count) !== item) setSlot(wrap(front + stepsTo(item, front, count), slots));
+	function turn(steps) {
+		const next = wrap(front + steps, slots);
+		setSlot(next);
+		const nextItem = wrap(next, count);
+		if (nextItem !== item) setItem(nextItem);
+	}
+	useEffect(() => {
+		if (!autoplayMs || held || count < 2) return;
+		const timer = window.setTimeout(() => turn(1), autoplayMs);
+		return () => window.clearTimeout(timer);
+	}, [
+		autoplayMs,
+		held,
+		count,
+		front,
+		item
+	]);
+	function onKeyDown(event) {
+		if (isEditable(event.target)) return;
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			turn(-1);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			turn(1);
+		}
+	}
+	function onPointerDown(event) {
+		swipeFrom.current = event.clientX;
+		swiped.current = false;
+	}
+	function onPointerUp(event) {
+		const from = swipeFrom.current;
+		swipeFrom.current = null;
+		if (from === null || Math.abs(event.clientX - from) < SWIPE_PX) return;
+		swiped.current = true;
+		turn(event.clientX < from ? 1 : -1);
+	}
+	function wasSwipe() {
+		const was = swiped.current;
+		swiped.current = false;
+		return was;
+	}
+	return {
+		slots,
+		slot: front,
+		index: wrap(front, count),
+		turn,
+		show: (target) => turn(stepsTo(target, front, count)),
+		hold: setHeld,
+		onKeyDown,
+		onPointerDown,
+		onPointerUp,
+		wasSwipe
+	};
+}
+//#endregion
+export { useCoverflow };

package/dist/components/coverflow/_utils/ring.js

@@ -0,0 +1,24 @@
+import { VISIBLE_REACH } from "../_constants/coverflow-poses.js";
+//#region src/components/coverflow/_utils/ring.ts
+/** Smallest ring with a hidden slot beyond the visible reach on both sides. */
+var MIN_RING = 2 * VISIBLE_REACH + 3;
+/** How many slots the ring has for `count` items: whole copies of the list, at least MIN_RING. */
+function ringSize(count) {
+	if (count < 2) return count;
+	return count * Math.ceil(MIN_RING / count);
+}
+/** `value` wrapped into 0…size-1. */
+function wrap(value, size) {
+	return size === 0 ? 0 : (value % size + size) % size;
+}
+/** Where `slot` stands relative to the front slot `index`, the short way round: 0 is the front, negative is left. */
+function ringOffset(slot, index, size) {
+	const ahead = wrap(slot - index, size);
+	return ahead > size / 2 ? ahead - size : ahead;
+}
+/** The steps (negative = left) that bring item `target` to the front from slot `index`, the short way round. */
+function stepsTo(target, index, count) {
+	return ringOffset(target, wrap(index, count), count);
+}
+//#endregion
+export { MIN_RING, ringOffset, ringSize, stepsTo, wrap };