@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/list-details/list-details.js

@@ -1,5 +1,6 @@
 "use client";
 import { cn } from "../../utils/cn.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
 import { SectionCard } from "../cards/section-card.js";
 import { ScrollArea } from "../../core/scroll-area.js";
 import { ListDetailsItemButton } from "./list-details-item-button.js";
@@ -47,7 +48,8 @@ function pickSelectedId({ data, controlledValue, currentSelectedId }) {
 	if (currentSelectedId != null && data.some((item) => item.id === currentSelectedId)) return currentSelectedId;
 	return firstId;
 }
-function ListDetails({ value, onSelect, data, height, className, titleListPanelColumnWidth = 4, footer, unmountOnExit = false, variant = "outline", color = "mist", size = "default", mobileNavigation = "dropdown", labels }) {
+function ListDetails({ value, onSelect, data, height, className, titleListPanelColumnWidth = 4, footer, unmountOnExit = false, variant = "outline", color = "mist", size = "default", mobileNavigation = "dropdown", labels, radius }) {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
 	const [selectedId, setSelectedId] = useState(() => pickSelectedId({
 		data,
 		controlledValue: value
@@ -120,7 +122,8 @@ function ListDetails({ value, onSelect, data, height, className, titleListPanelC
 							className: "md:hidden"
 						}),
 						/* @__PURE__ */ jsx(ScrollArea, {
-							className: "items-list-container hidden min-h-0 flex-1 rounded-md border border-border md:block",
+							style: partStyle,
+							className: "items-list-container hidden min-h-0 flex-1 rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-md)))] border-[length:var(--espd-own-border-width,var(--espd-border-width-surface,1px))] border-border md:block",
 							children: /* @__PURE__ */ jsx("div", {
 								className: "flex flex-col gap-2 p-2",
 								children: data.map((item) => /* @__PURE__ */ jsx(ListDetailsItemButton, {

package/dist/components/lottie-animation-container/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+interface LottieAnimationContainerProps {
+    animationData: object | string;
+    height?: number;
+    width?: number;
+}
+declare function LottieAnimationContainer({ animationData, height, width, }: LottieAnimationContainerProps): React.JSX.Element | null;
+
+export { LottieAnimationContainer, type LottieAnimationContainerProps };

package/dist/components/lottie-animation-container/index.js

@@ -0,0 +1,2 @@
+import { LottieAnimationContainer } from "./lottie-animation-container.js";
+export { LottieAnimationContainer };

package/dist/components/lottie-animation-container/lottie-animation-container.js

@@ -1,9 +1,28 @@
-import Lottie from "../../_vendor/lottie-react/build/index.es.js";
-import { useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/lottie-animation-container/lottie-animation-container.tsx
 var DEFAULT_SIZE = 200;
+var loadedLottie = null;
+var lottiePromise = null;
+function loadLottie() {
+	lottiePromise ?? (lottiePromise = import("../../_vendor/lottie-react/build/index.es.js").then((mod) => loadedLottie = mod.default, (error) => {
+		lottiePromise = null;
+		throw error;
+	}));
+	return lottiePromise;
+}
 function LottieAnimationContainer({ animationData, height = DEFAULT_SIZE, width = DEFAULT_SIZE }) {
+	const [Lottie, setLottie] = useState(() => loadedLottie);
+	useEffect(() => {
+		if (Lottie) return;
+		let active = true;
+		loadLottie().then((component) => {
+			if (active) setLottie(() => component);
+		}, () => {});
+		return () => {
+			active = false;
+		};
+	}, [Lottie]);
 	const parsedData = useMemo(() => {
 		if (typeof animationData === "string") try {
 			return JSON.parse(animationData);
@@ -18,7 +37,7 @@ function LottieAnimationContainer({ animationData, height = DEFAULT_SIZE, width
 			height,
 			width
 		},
-		children: /* @__PURE__ */ jsx(Lottie, {
+		children: Lottie && /* @__PURE__ */ jsx(Lottie, {
 			animationData: parsedData,
 			style: {
 				height,

package/dist/components/lottie-animations/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+interface VerificationInProgressProps {
+    title?: string;
+}
+declare function VerificationInProgress({ title }: VerificationInProgressProps): React.JSX.Element;
+
+export { VerificationInProgress, type VerificationInProgressProps };

package/dist/components/lottie-animations/index.js

@@ -0,0 +1,2 @@
+import { VerificationInProgress } from "./verification-in-progress/verification-in-progress.js";
+export { VerificationInProgress };

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ElementType } from 'react';
+
+interface MarkdownContentProps {
+    /**
+     * Raw markdown source. Treated as trusted input: embedded raw HTML is **not** parsed
+     * (no `rehype-raw`), which is what makes a sanitizer unnecessary here.
+     */
+    content: string;
+    /**
+     * Router `Link`, forwarded to the library `Link` so internal hrefs navigate client-side
+     * instead of triggering a full page reload. Omit to render internal links as plain `<a>`.
+     */
+    linkComponent?: ElementType;
+    /** Theme for fenced code blocks. Forwarded to the library `Code`. */
+    colorTheme?: "light" | "dark";
+    className?: string;
+}
+
+/**
+ * Renders markdown using this library's own primitives (`Typography`, `Code`, `Link`,
+ * `Table`, `Separator`), so documents inherit the app's typography and theming.
+ *
+ * GitHub-flavoured markdown (tables, strikethrough, task lists, autolinks) via `remark-gfm`;
+ * headings get stable slug `id`s via `rehype-slug`, so `#anchor` links into a document work.
+ *
+ * `rehype-raw` is deliberately absent: embedded raw HTML is never parsed, so there is no
+ * injection surface and no sanitizer to keep in step. Content is expected to be trusted.
+ */
+declare const MarkdownContent: React.ForwardRefExoticComponent<MarkdownContentProps & React.RefAttributes<HTMLDivElement>>;
+
+export { MarkdownContent, type MarkdownContentProps };

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

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

package/dist/components/media-card/index.d.ts

@@ -0,0 +1,125 @@
+import * as React from 'react';
+import { HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface MediaCardProps extends HTMLAttributes<HTMLDivElement>, Pick<StyleAxisProps, "radius" | "elevation" | "border"> {
+    /** Rise a little on hover and keyboard focus. Default true. */
+    lift?: boolean;
+}
+interface MediaCardMediaProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * `bleed` (default): edge to edge at the top of the card, a rule below it —
+     * for a photo. `inset`: a rounded stage set in from the card's edge — for a
+     * tile or an icon on a tint (give the tint as a `className`, `bg-swatch-2-light`).
+     */
+    layout?: "bleed" | "inset";
+}
+interface MediaCardImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "loading"> {
+    src: string;
+    /** `cover` (default) fills the media and crops — a photo. `contain` shows all of it — a diagram. */
+    fit?: "cover" | "contain";
+    /** Load right away instead of when it nears the viewport: the cards in the first screenful. */
+    eager?: boolean;
+    /** Shown instead when the image fails to load. Nothing when omitted. */
+    fallback?: ReactNode;
+}
+interface MediaCardRevealProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * How the layer appears on hover and keyboard focus:
+     * - `circle`: a dark scrim opens as a circle from the media's centre, a ring
+     *   bursts out of it, and its parts (`MediaCardRevealItem`,
+     *   `MediaCardRevealChips`, `MediaCardRevealFooter`) spring in one after
+     *   another. Hidden on touch screens, which have no hover: put the action in
+     *   the body for them too.
+     * - `strip`: a strip fades in along the bottom edge, for one or two actions.
+     *   Always shown on touch screens.
+     */
+    variant?: "circle" | "strip";
+    /** `circle` only: draw the ring that bursts out as it opens. Default true. */
+    burst?: boolean;
+    /** `circle` only: the ring's colour and size (`text-swatch-2 size-19`). */
+    burstClassName?: string;
+}
+interface MediaCardRevealItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Its place in the entrance. Set by `MediaCardReveal` from the order of its children. */
+    step?: number;
+}
+interface MediaCardRevealChipsProps extends HTMLAttributes<HTMLUListElement> {
+    /** The chips, in order; each pops in a little after the one before. */
+    items: {
+        key: string;
+        label: ReactNode;
+        title?: string;
+    }[];
+    /** A last, dashed chip — "+5" — for what did not fit. */
+    more?: ReactNode;
+}
+interface MediaCardRevealFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** The action (a button), swinging in last. */
+    action?: ReactNode;
+    step?: number;
+}
+interface MediaCardLinkProps extends HTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    /** Render your own link (a router's `<Link>`) with the stretched-link styling. */
+    asChild?: boolean;
+}
+type MediaCardActionProps = HTMLAttributes<HTMLSpanElement>;
+
+/**
+ * A card led by a picture — a product photo, a person's tile — that opens as
+ * one link: the title's `MediaCardLink` is stretched over the whole card, and
+ * anything interactive goes in a `MediaCardAction` (or the reveal), which sits
+ * above that link so a button is never nested in it. `MediaCardReveal` adds a
+ * layer over the media on hover and keyboard focus.
+ *
+ *   <MediaCard>
+ *     <MediaCardMedia>…<MediaCardReveal variant="strip">…</MediaCardReveal></MediaCardMedia>
+ *     <MediaCardBody>
+ *       <MediaCardTitle><MediaCardLink href="…">Name</MediaCardLink></MediaCardTitle>
+ *       <MediaCardMeta>@handle</MediaCardMeta>
+ *       <MediaCardFooter>…</MediaCardFooter>
+ *     </MediaCardBody>
+ *   </MediaCard>
+ */
+declare function MediaCard({ lift, className, children, ...props }: MediaCardProps): React.JSX.Element;
+/** The picture area, 16:9. Put the image, tile or icon inside, and a `MediaCardReveal` after it. */
+declare function MediaCardMedia({ layout, className, ...props }: MediaCardMediaProps): React.JSX.Element;
+/** The text below the media: title, meta and footer, stacked. */
+declare function MediaCardBody({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** The card's name, one line, truncated. Holds the `MediaCardLink`. */
+declare function MediaCardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>): React.JSX.Element;
+/**
+ * The card's one link, stretched over the whole card so a click anywhere opens
+ * it. `asChild` renders your router's link instead of an `<a>`.
+ */
+declare function MediaCardLink({ asChild, className, ...props }: MediaCardLinkProps): React.JSX.Element;
+/** A line under the title — a handle, a byline. */
+declare function MediaCardMeta({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** The bottom of the body (counters, a touch-screen action), pushed to the card's end. */
+declare function MediaCardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+/** Lifts what it holds above the card's stretched link, so it can be clicked or hovered on its own. */
+declare function MediaCardAction({ className, ...props }: MediaCardActionProps): React.JSX.Element;
+
+/**
+ * The picture in a `MediaCardMedia`, with its loading handled: a pulsing
+ * placeholder fills the media until the image arrives, the image then fades
+ * in, and if it fails the `fallback` (a tint with an icon, say) takes its
+ * place. Lazy by default; pass `eager` for the cards in the first screenful.
+ */
+declare function MediaCardImage({ src, alt, fit, eager, fallback, className, onLoad, onError, ...props }: MediaCardImageProps): React.JSX.Element;
+
+/**
+ * The layer over a `MediaCardMedia` that appears on hover and keyboard focus.
+ * `circle` opens a scrim from the centre and staggers its parts in, in the
+ * order they are given; `strip` fades a strip in along the bottom.
+ */
+declare function MediaCardReveal({ variant, burst, burstClassName, className, children, ...props }: MediaCardRevealProps): React.JSX.Element;
+/** A block of the circle panel (a bio, a heading with chips), springing up in turn. */
+declare function MediaCardRevealItem({ step, className, ...props }: MediaCardRevealItemProps): React.JSX.Element;
+/** A row of small labels (the latest builds) popping in one by one, with an optional "+N". */
+declare function MediaCardRevealChips({ items, more, className, ...props }: MediaCardRevealChipsProps): React.JSX.Element;
+/** The circle panel's last row, at its bottom: a note on the left, the action swinging in on the right. */
+declare function MediaCardRevealFooter({ action, step, className, children, ...props }: MediaCardRevealFooterProps): React.JSX.Element;
+
+export { MediaCard, MediaCardAction, type MediaCardActionProps, MediaCardBody, MediaCardFooter, MediaCardImage, type MediaCardImageProps, MediaCardLink, type MediaCardLinkProps, MediaCardMedia, type MediaCardMediaProps, MediaCardMeta, type MediaCardProps, MediaCardReveal, MediaCardRevealChips, type MediaCardRevealChipsProps, MediaCardRevealFooter, type MediaCardRevealFooterProps, MediaCardRevealItem, type MediaCardRevealItemProps, type MediaCardRevealProps, MediaCardTitle };

package/dist/components/media-card/index.js

@@ -0,0 +1,4 @@
+import { MediaCard, MediaCardAction, MediaCardBody, MediaCardFooter, MediaCardLink, MediaCardMedia, MediaCardMeta, MediaCardTitle } from "./media-card.js";
+import { MediaCardImage } from "./media-card-image.js";
+import { MediaCardReveal, MediaCardRevealChips, MediaCardRevealFooter, MediaCardRevealItem } from "./media-card-reveal.js";
+export { MediaCard, MediaCardAction, MediaCardBody, MediaCardFooter, MediaCardImage, MediaCardLink, MediaCardMedia, MediaCardMeta, MediaCardReveal, MediaCardRevealChips, MediaCardRevealFooter, MediaCardRevealItem, MediaCardTitle };

package/dist/components/media-card/media-card-image.js

@@ -0,0 +1,59 @@
+import { cn } from "../../utils/cn.js";
+import { useCallback, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/media-card/media-card-image.tsx
+/**
+* The picture in a `MediaCardMedia`, with its loading handled: a pulsing
+* placeholder fills the media until the image arrives, the image then fades
+* in, and if it fails the `fallback` (a tint with an icon, say) takes its
+* place. Lazy by default; pass `eager` for the cards in the first screenful.
+*/
+function MediaCardImage({ src, alt = "", fit = "cover", eager = false, fallback, className, onLoad, onError, ...props }) {
+	const [state, setState] = useState({
+		src,
+		status: "loading"
+	});
+	if (state.src !== src) setState({
+		src,
+		status: "loading"
+	});
+	const status = state.src === src ? state.status : "loading";
+	const imageRef = useCallback((node) => {
+		if (node?.complete && node.naturalWidth > 0) setState((current) => current.src === src && current.status === "loading" ? {
+			src,
+			status: "loaded"
+		} : current);
+	}, [src]);
+	if (status === "error") return /* @__PURE__ */ jsx(Fragment$1, { children: fallback ?? null });
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [status === "loading" && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "media-card-image-placeholder",
+		className: "absolute inset-0 animate-pulse bg-muted"
+	}), /* @__PURE__ */ jsx("img", {
+		ref: imageRef,
+		"data-slot": "media-card-image",
+		"data-status": status,
+		src,
+		alt,
+		loading: eager ? "eager" : "lazy",
+		decoding: "async",
+		onLoad: (event) => {
+			setState({
+				src,
+				status: "loaded"
+			});
+			onLoad?.(event);
+		},
+		onError: (event) => {
+			setState({
+				src,
+				status: "error"
+			});
+			onError?.(event);
+		},
+		className: cn("absolute inset-0 h-full w-full transition-opacity duration-300 ease-out motion-reduce:transition-none", fit === "cover" ? "object-cover" : "object-contain", status === "loaded" ? "opacity-100" : "opacity-0", className),
+		...props
+	})] });
+}
+//#endregion
+export { MediaCardImage };

package/dist/components/media-card/media-card-reveal.js

@@ -0,0 +1,76 @@
+import { cn } from "../../utils/cn.js";
+import { BURST, CHIP_POPS, CIRCLE_PANEL, RISE_STEPS, STRIP, SWING, at } from "./media-card.classes.js";
+import { Children, cloneElement, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/media-card/media-card-reveal.tsx
+/**
+* The layer over a `MediaCardMedia` that appears on hover and keyboard focus.
+* `circle` opens a scrim from the centre and staggers its parts in, in the
+* order they are given; `strip` fades a strip in along the bottom.
+*/
+function MediaCardReveal({ variant = "circle", burst = true, burstClassName, className, children, ...props }) {
+	if (variant === "strip") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-card-reveal",
+		"data-variant": "strip",
+		className: cn("pointer-events-none absolute inset-x-0 bottom-0 z-20 flex justify-end bg-linear-to-t from-background/90 to-transparent p-2 pt-8 [&>*]:pointer-events-auto", STRIP, className),
+		...props,
+		children
+	});
+	const parts = Children.toArray(children).map((child, index) => isValidElement(child) && child.props.step === void 0 ? cloneElement(child, { step: index }) : child);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		"data-slot": "media-card-reveal",
+		"data-variant": "circle",
+		className: cn("pointer-events-none absolute inset-0 z-20 flex flex-col gap-2.5 bg-scrim/85 p-3.5 text-scrim-foreground pointer-coarse:hidden", CIRCLE_PANEL, className),
+		...props,
+		children: parts
+	}), burst && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "media-card-burst",
+		className: cn("pointer-events-none absolute top-1/2 left-1/2 z-30 size-19 -translate-1/2 rounded-full border-2 border-current", BURST, burstClassName)
+	})] });
+}
+/** A block of the circle panel (a bio, a heading with chips), springing up in turn. */
+function MediaCardRevealItem({ step = 0, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-card-reveal-item",
+		className: cn("flex min-w-0 flex-col gap-1.5", at(RISE_STEPS, step), className),
+		...props
+	});
+}
+/** A row of small labels (the latest builds) popping in one by one, with an optional "+N". */
+function MediaCardRevealChips({ items, more, className, ...props }) {
+	const chip = "inline-flex min-w-0 max-w-full items-center rounded-full px-2.5 py-1 text-xs font-semibold";
+	return /* @__PURE__ */ jsxs("ul", {
+		"data-slot": "media-card-reveal-chips",
+		className: cn("m-0 flex list-none flex-wrap gap-1.5 p-0", className),
+		...props,
+		children: [items.map((item, index) => /* @__PURE__ */ jsx("li", {
+			title: item.title,
+			className: cn(chip, "bg-scrim-foreground/15", at(CHIP_POPS, index)),
+			children: /* @__PURE__ */ jsx("span", {
+				className: "truncate",
+				children: item.label
+			})
+		}, item.key)), more !== void 0 && more !== null && /* @__PURE__ */ jsx("li", {
+			className: cn(chip, "border border-dashed border-scrim-foreground/40", at(CHIP_POPS, items.length)),
+			children: more
+		})]
+	});
+}
+/** The circle panel's last row, at its bottom: a note on the left, the action swinging in on the right. */
+function MediaCardRevealFooter({ action, step = 2, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "media-card-reveal-footer",
+		className: cn("mt-auto flex items-center justify-between gap-2.5", at(RISE_STEPS, step), className),
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 truncate font-mono text-xs text-scrim-foreground/75",
+			children
+		}), action && /* @__PURE__ */ jsx("span", {
+			className: cn("pointer-events-auto relative z-30", SWING),
+			children: action
+		})]
+	});
+}
+//#endregion
+export { MediaCardReveal, MediaCardRevealChips, MediaCardRevealFooter, MediaCardRevealItem };

package/dist/components/media-card/media-card.classes.js

@@ -0,0 +1,37 @@
+//#region src/components/media-card/media-card.classes.ts
+/** The card: lifts a little on hover and focus. */
+var LIFT = "transition duration-200 ease-out hover:-translate-y-0.75 focus-within:-translate-y-0.75 motion-reduce:transform-none";
+/**
+* The circle panel: a scrim clipped to a circle that opens from the centre.
+* No backdrop blur, on purpose: Chrome paints a backdrop-filter across the
+* whole layer while its clip-path animates, so the circle would never show.
+*/
+var CIRCLE_PANEL = "invisible clip-circle-closed transition-clip duration-300 ease-in group-hover/media-card:visible group-hover/media-card:clip-circle-open group-hover/media-card:duration-500 group-hover/media-card:ease-emphasized group-focus-within/media-card:visible group-focus-within/media-card:clip-circle-open group-focus-within/media-card:duration-500 group-focus-within/media-card:ease-emphasized motion-reduce:transition-none";
+/** The ring bursting out of the centre as the circle opens (drawn above the panel). */
+var BURST = "opacity-0 motion-safe:group-hover/media-card:animate-burst motion-safe:group-focus-within/media-card:animate-burst";
+/** The strip: fades in along the bottom; always there on a touch screen. */
+var STRIP = "opacity-0 transition-opacity group-hover/media-card:opacity-100 group-focus-within/media-card:opacity-100 pointer-coarse:opacity-100";
+var RISE = "translate-y-3 scale-96 opacity-0 transition duration-150 group-hover/media-card:translate-y-0 group-hover/media-card:scale-100 group-hover/media-card:opacity-100 group-hover/media-card:duration-500 group-hover/media-card:ease-spring group-focus-within/media-card:translate-y-0 group-focus-within/media-card:scale-100 group-focus-within/media-card:opacity-100 group-focus-within/media-card:duration-500 group-focus-within/media-card:ease-spring motion-reduce:translate-y-0 motion-reduce:scale-100 motion-reduce:transition-none";
+/** A part of the circle panel springing up; one per step, the last repeated. */
+var RISE_STEPS = [
+	`${RISE} group-hover/media-card:delay-120 group-focus-within/media-card:delay-120`,
+	`${RISE} group-hover/media-card:delay-180 group-focus-within/media-card:delay-180`,
+	`${RISE} group-hover/media-card:delay-260 group-focus-within/media-card:delay-260`
+];
+var POP = "scale-50 -rotate-6 opacity-0 transition duration-120 group-hover/media-card:scale-100 group-hover/media-card:rotate-0 group-hover/media-card:opacity-100 group-hover/media-card:duration-550 group-hover/media-card:ease-overshoot group-focus-within/media-card:scale-100 group-focus-within/media-card:rotate-0 group-focus-within/media-card:opacity-100 group-focus-within/media-card:duration-550 group-focus-within/media-card:ease-overshoot motion-reduce:scale-100 motion-reduce:rotate-0 motion-reduce:transition-none";
+/** A chip popping in with a little turn; one per position, the last repeated. */
+var CHIP_POPS = [
+	`${POP} group-hover/media-card:delay-240 group-focus-within/media-card:delay-240`,
+	`${POP} group-hover/media-card:delay-310 group-focus-within/media-card:delay-310`,
+	`${POP} group-hover/media-card:delay-380 group-focus-within/media-card:delay-380`,
+	`${POP} group-hover/media-card:delay-450 group-focus-within/media-card:delay-450`,
+	`${POP} group-hover/media-card:delay-520 group-focus-within/media-card:delay-520`
+];
+/** The footer's action swinging in last; under the pointer it lifts at once. */
+var SWING = "inline-flex translate-x-4 rotate-8 transition duration-150 group-hover/media-card:translate-x-0 group-hover/media-card:rotate-0 group-hover/media-card:duration-600 group-hover/media-card:ease-overshoot group-hover/media-card:delay-300 group-focus-within/media-card:translate-x-0 group-focus-within/media-card:rotate-0 group-focus-within/media-card:duration-600 group-focus-within/media-card:ease-overshoot group-focus-within/media-card:delay-300 hover:-translate-y-px hover:scale-104 hover:delay-0 hover:duration-200 hover:ease-spring motion-reduce:translate-x-0 motion-reduce:rotate-0 motion-reduce:transition-none motion-reduce:hover:translate-y-0 motion-reduce:hover:scale-100";
+/** Pick the class for a position, repeating the last one past the end. */
+function at(list, index) {
+	return list[Math.min(Math.max(index, 0), list.length - 1)] ?? "";
+}
+//#endregion
+export { BURST, CHIP_POPS, CIRCLE_PANEL, LIFT, RISE_STEPS, STRIP, SWING, at };

package/dist/components/media-card/media-card.js

@@ -0,0 +1,91 @@
+import { cn } from "../../utils/cn.js";
+import { Card } from "../../core/card.js";
+import { LIFT } from "./media-card.classes.js";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/media-card/media-card.tsx
+/**
+* A card led by a picture — a product photo, a person's tile — that opens as
+* one link: the title's `MediaCardLink` is stretched over the whole card, and
+* anything interactive goes in a `MediaCardAction` (or the reveal), which sits
+* above that link so a button is never nested in it. `MediaCardReveal` adds a
+* layer over the media on hover and keyboard focus.
+*
+*   <MediaCard>
+*     <MediaCardMedia>…<MediaCardReveal variant="strip">…</MediaCardReveal></MediaCardMedia>
+*     <MediaCardBody>
+*       <MediaCardTitle><MediaCardLink href="…">Name</MediaCardLink></MediaCardTitle>
+*       <MediaCardMeta>@handle</MediaCardMeta>
+*       <MediaCardFooter>…</MediaCardFooter>
+*     </MediaCardBody>
+*   </MediaCard>
+*/
+function MediaCard({ lift = true, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Card, {
+		"data-slot": "media-card",
+		className: cn("group/media-card relative flex w-full flex-col overflow-hidden", "has-[[data-slot=media-card-link]:focus-visible]:ring-2 has-[[data-slot=media-card-link]:focus-visible]:ring-primary", lift && LIFT, className),
+		...props,
+		children
+	});
+}
+/** The picture area, 16:9. Put the image, tile or icon inside, and a `MediaCardReveal` after it. */
+function MediaCardMedia({ layout = "bleed", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-card-media",
+		className: cn("relative flex aspect-video items-center justify-center overflow-hidden", layout === "inset" ? "m-2 mb-0 rounded-xl" : "border-b border-border", className),
+		...props
+	});
+}
+/** The text below the media: title, meta and footer, stacked. */
+function MediaCardBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-card-body",
+		className: cn("flex flex-1 flex-col gap-2 p-4", className),
+		...props
+	});
+}
+/** The card's name, one line, truncated. Holds the `MediaCardLink`. */
+function MediaCardTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-slot": "media-card-title",
+		className: cn("m-0 min-w-0 truncate text-base font-bold leading-snug text-foreground", className),
+		...props
+	});
+}
+/**
+* The card's one link, stretched over the whole card so a click anywhere opens
+* it. `asChild` renders your router's link instead of an `<a>`.
+*/
+function MediaCardLink({ asChild, className, ...props }) {
+	return /* @__PURE__ */ jsx(asChild ? Slot : "a", {
+		"data-slot": "media-card-link",
+		className: cn("text-inherit no-underline after:absolute after:inset-0 after:z-10 after:content-[''] focus-visible:outline-none", className),
+		...props
+	});
+}
+/** A line under the title — a handle, a byline. */
+function MediaCardMeta({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-card-meta",
+		className: cn("flex min-w-0 items-center gap-2 text-sm text-foreground-secondary", className),
+		...props
+	});
+}
+/** The bottom of the body (counters, a touch-screen action), pushed to the card's end. */
+function MediaCardFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "media-card-footer",
+		className: cn("mt-auto flex items-center gap-2", className),
+		...props
+	});
+}
+/** Lifts what it holds above the card's stretched link, so it can be clicked or hovered on its own. */
+function MediaCardAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "media-card-action",
+		className: cn("relative z-30 inline-flex", className),
+		...props
+	});
+}
+//#endregion
+export { MediaCard, MediaCardAction, MediaCardBody, MediaCardFooter, MediaCardLink, MediaCardMedia, MediaCardMeta, MediaCardTitle };

package/dist/components/media-stage/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * `photo`: the picture letterboxed over a blurred, darkened copy of itself, so
+ * a portrait, a panorama or a tiny image fills the frame without being cropped.
+ * `diagram`: the picture on the dotted canvas surface (a wiring diagram, a
+ * schematic), no blur.
+ */
+type MediaStageVariant = "photo" | "diagram";
+/** The frame's proportions. It never takes its height from what is inside it. */
+type MediaStageAspect = "4/3" | "16/9" | "1/1";
+interface MediaStageProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The picture, shown whole. Absent: the bare frame, for a video player or a placeholder passed as `children`. */
+    src?: string;
+    /** The picture's alt text. The blurred copy behind it is always hidden from assistive technology. */
+    alt?: string;
+    /** Default `photo`. */
+    variant?: MediaStageVariant;
+    /** Default `4/3`. */
+    aspect?: MediaStageAspect;
+    /** `lazy` (default) or `eager`, for the picture above the fold. */
+    loading?: "lazy" | "eager";
+    /**
+     * Drawn over the picture: arrows, a caption chip, a play button, an iframe.
+     * Place them yourself (`absolute`, `inset-0`); the frame is `relative`.
+     */
+    children?: ReactNode;
+}
+
+/**
+ * A fixed-proportion frame for one picture — a product photo, a video poster,
+ * a wiring diagram. The frame's height comes from its width and `aspect`
+ * alone, so a gallery never jumps between pictures of different shapes and a
+ * column beside it never stretches it. A photo is shown whole (`object-contain`)
+ * over a blurred copy of itself; a diagram sits on the dotted canvas.
+ * Everything else — arrows, captions, a play button — is `children`, drawn on top.
+ */
+declare function MediaStage({ src, alt, variant, aspect, loading, className, children, ...rest }: MediaStageProps): React.JSX.Element;
+
+export { MediaStage, type MediaStageAspect, type MediaStageProps, type MediaStageVariant };

package/dist/components/media-stage/index.js

@@ -0,0 +1,2 @@
+import { MediaStage } from "./media-stage.js";
+export { MediaStage };

package/dist/components/media-stage/media-stage.js

@@ -0,0 +1,48 @@
+import { cn } from "../../utils/cn.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/media-stage/media-stage.tsx
+var ASPECTS = {
+	"4/3": "aspect-4/3",
+	"16/9": "aspect-video",
+	"1/1": "aspect-square"
+};
+var DOT_GRID = "bg-canvas bg-[image:radial-gradient(var(--color-canvas-dot)_1px,transparent_1.5px)] bg-[size:16px_16px]";
+/**
+* A fixed-proportion frame for one picture — a product photo, a video poster,
+* a wiring diagram. The frame's height comes from its width and `aspect`
+* alone, so a gallery never jumps between pictures of different shapes and a
+* column beside it never stretches it. A photo is shown whole (`object-contain`)
+* over a blurred copy of itself; a diagram sits on the dotted canvas.
+* Everything else — arrows, captions, a play button — is `children`, drawn on top.
+*/
+function MediaStage({ src, alt = "", variant = "photo", aspect = "4/3", loading = "lazy", className, children, ...rest }) {
+	const diagram = variant === "diagram";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "media-stage",
+		"data-variant": variant,
+		className: cn("relative isolate w-full overflow-hidden rounded-xl", ASPECTS[aspect], diagram ? DOT_GRID : "bg-scrim", className),
+		...rest,
+		children: [
+			src && !diagram && /* @__PURE__ */ jsx("img", {
+				src,
+				alt: "",
+				"aria-hidden": true,
+				loading,
+				decoding: "async",
+				draggable: false,
+				className: "absolute inset-0 -z-10 size-full scale-110 object-cover blur-2xl brightness-85"
+			}),
+			src && /* @__PURE__ */ jsx("img", {
+				src,
+				alt,
+				loading,
+				decoding: "async",
+				draggable: false,
+				className: cn("absolute inset-0 size-full object-contain", diagram && "p-4")
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { MediaStage };

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

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+interface MenuProps {
+    children: React__default.ReactNode;
+    trigger: React__default.ReactNode;
+    align?: "start" | "center" | "end";
+    side?: "top" | "right" | "bottom" | "left";
+    sideOffset?: number;
+    minWidth?: string | number;
+}
+
+declare function Menu({ children, trigger, align, side, sideOffset, minWidth, }: MenuProps): React__default.JSX.Element;
+
+export { Menu, type MenuProps };

package/dist/components/menu/index.js

@@ -0,0 +1,2 @@
+import Menu from "./menu.js";
+export { Menu };