@stll/ui 0.65.1 → 0.67.0

package/dist/calendar/day-calendar.d.ts

@@ -1,11 +1,17 @@
 import { DayCalendarGranularity, DayCalendarRange } from "./day-calendar.logic.js";
 import { ReactElement, ReactNode } from "react";
-//#region src/calendar/day-calendar.d.ts
-/** A block paints in its matter's colour, or in the neutral surface tone. */
+/**
+ * A block paints in its matter's colour; in a topic's colour, a lighter tint
+ * from the same palette keyed by a stable topic key and without the matter's
+ * edge; or in the neutral surface tone.
+ */
 export type DayCalendarTone = {
   color: string | null;
   matterId: string;
   type: "matter";
+} | {
+  key: string;
+  type: "topic";
 } | {
   type: "neutral";
 };
@@ -91,5 +97,4 @@ type DayCalendarProps = {
   timeZone: string;
 };
 export declare const DayCalendar: ({ ariaLabel, columns, date, granularity, hours, locale, nowMs, onSelectRange, selection, timeZone }: DayCalendarProps) => ReactElement;
-//#endregion
 export {};

package/dist/calendar/day-calendar.js

@@ -1,12 +1,12 @@
-import { cn } from "../lib/utils.js";
 import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "../components/tooltip.js";
+import { getMatterColor, resolveMatterColor } from "../lib/matter-colors.js";
+import { cn } from "../lib/utils.js";
 import { DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, extendRange, getDayBounds, getHourTicks, isRepeatedWallTime, layoutOverlaps, moveRange, offsetToTime, rangeFromDrag, slotAt, timeToOffset } from "./day-calendar.logic.js";
-import { resolveMatterColor } from "../lib/matter-colors.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
-//#region src/calendar/day-calendar.tsx
+// src/calendar/day-calendar.tsx
 const isSameDraftView = (left, right) => left.date === right.date && left.endHour === right.endHour && left.granularity === right.granularity && left.startHour === right.startHour && left.timeZone === right.timeZone;
 /**
 * A draft's range belongs to the day and grid it was made on; once they
@@ -367,27 +367,25 @@ const DayCalendarBlockView = ({ block, grid, lane, range }) => {
 		})] })
 	});
 };
-const MIXED_STRIPES = "repeating-linear-gradient(135deg, var(--muted) 0 6px, transparent 6px 12px)";
 /** A suggestion's tint is half an entry's, so proposed time reads lighter. */
 const TONE_TINT_PERCENT = {
 	entry: 16,
 	suggestion: 8
 };
+/** A topic is not a matter yet: its tint sits between a suggestion's and an
+* entry's. */
+const TOPIC_TINT_PERCENT = 12;
 function blockSurfaceStyle(block) {
 	const tone = block.tone;
-	const stripes = block.kind === "mixed" ? MIXED_STRIPES : void 0;
 	const suggestion = block.kind === "entry" && block.state === "suggestion";
 	switch (tone.type) {
-		case "neutral": return {
-			backgroundColor: suggestion ? "transparent" : void 0,
-			backgroundImage: stripes
-		};
+		case "neutral": return { backgroundColor: suggestion ? "transparent" : void 0 };
+		case "topic": return { backgroundColor: `color-mix(in srgb, ${getMatterColor(tone.key)} ${String(TOPIC_TINT_PERCENT)}%, var(--card))` };
 		case "matter": {
 			const color = resolveMatterColor(tone.matterId, tone.color);
 			const tint = suggestion ? TONE_TINT_PERCENT.suggestion : TONE_TINT_PERCENT.entry;
 			return {
 				backgroundColor: `color-mix(in srgb, ${color} ${String(tint)}%, var(--card))`,
-				backgroundImage: stripes,
 				borderColor: suggestion ? color : void 0,
 				borderInlineStartColor: color
 			};
@@ -493,5 +491,4 @@ const LockedColumnBody = ({ action }) => /* @__PURE__ */ jsxs("div", {
 function assertDayCalendarContract(columns) {
 	if (new Set(columns.map(({ id }) => id)).size !== columns.length) panic("Day calendar column ids must be unique");
 }
-//#endregion
 export { DayCalendar };

package/dist/calendar/day-calendar.logic.d.ts

@@ -1,4 +1,3 @@
-//#region src/calendar/day-calendar.logic.d.ts
 export declare const DAY_CALENDAR_GRANULARITIES: readonly [15, 30, 60];
 export type DayCalendarGranularity = (typeof DAY_CALENDAR_GRANULARITIES)[number];
 /** Below this height a block cannot hold one line of its label, so it draws
@@ -112,5 +111,4 @@ export declare const mergeShortSegments: <Segment extends DayCalendarRange & {
 }>(segments: readonly Segment[], { thresholdMs }: {
   thresholdMs: number;
 }) => MergedSegment<Segment>[];
-//#endregion
 export {};

package/dist/calendar/day-calendar.logic.js

@@ -1,6 +1,6 @@
 import { Result, panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
-//#region src/calendar/day-calendar.logic.ts
+// src/calendar/day-calendar.logic.ts
 const DAY_CALENDAR_GRANULARITIES = [
 	15,
 	30,
@@ -234,5 +234,4 @@ function compareIds(left, right) {
 	if (left < right) return -1;
 	return left > right ? 1 : 0;
 }
-//#endregion
 export { DAY_CALENDAR_GRANULARITIES, DAY_CALENDAR_ONE_LINE_BLOCK_MIN_PX, DAY_CALENDAR_SLOT_HEIGHT_PX, boundsHeight, clampToBounds, extendRange, getDayBounds, getHourTicks, granularityMs, isRepeatedWallTime, layoutOverlaps, mergeShortSegments, moveRange, offsetToTime, rangeFromDrag, slotAt, snapToGrid, timeToOffset };

package/dist/calendar/primitives.d.ts

@@ -1,9 +1,7 @@
 import * as React$1 from "react";
-//#region src/calendar/primitives.d.ts
 export declare const CalendarGrid: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 export declare const CalendarHeaderRow: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 export declare const CalendarHeaderCell: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 export declare const CalendarCell: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 export declare const CalendarEntryButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
-export declare const CalendarEntrySurface: ({ className, ...props }: React$1.ComponentProps<"article">) => React$1.JSX.Element;
-//#endregion
+export declare const CalendarEntrySurface: ({ className, ...props }: React$1.ComponentProps<"article">) => React$1.JSX.Element;

package/dist/calendar/primitives.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/calendar/primitives.tsx
+// src/calendar/primitives.tsx
 const CalendarGrid = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("grid", className),
 	"data-slot": "calendar-grid",
@@ -32,5 +32,4 @@ const CalendarEntrySurface = ({ className, ...props }) => /* @__PURE__ */ jsx("a
 	"data-slot": "calendar-entry",
 	...props
 });
-//#endregion
 export { CalendarCell, CalendarEntryButton, CalendarEntrySurface, CalendarGrid, CalendarHeaderCell, CalendarHeaderRow };

package/dist/calendar/resource-calendar.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement, ReactNode } from "react";
-//#region src/calendar/resource-calendar.d.ts
 export type ResourceCalendarColumn = {
   date: string;
   label: ReactNode;
@@ -31,5 +30,4 @@ type ResourceCalendarProps = {
   resources: readonly ResourceCalendarResource[];
 };
 export declare const ResourceCalendar: ({ ariaLabel, columns, empty, entries, onSelectEntry, resourceHeader, resources }: ResourceCalendarProps) => ReactElement;
-//#endregion
 export {};

package/dist/calendar/resource-calendar.js

@@ -4,7 +4,7 @@ import { assertConsecutiveCalendarDates, layoutResourceCalendarEntries, nextCale
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { panic } from "better-result";
-//#region src/calendar/resource-calendar.tsx
+// src/calendar/resource-calendar.tsx
 const ResourceCalendar = ({ ariaLabel, columns, empty, entries, onSelectEntry, resourceHeader, resources }) => {
 	assertResourceCalendarContract({
 		columns,
@@ -181,5 +181,4 @@ const assertResourceCalendarContract = ({ columns, entries, resources }) => {
 	const orphan = entries.find(({ resourceId }) => !resourceIds.has(resourceId));
 	if (orphan !== void 0) panic(`Resource calendar entry ${orphan.id} references an unknown resource`);
 };
-//#endregion
 export { ResourceCalendar };

package/dist/calendar/resource-calendar.logic.d.ts

@@ -1,4 +1,3 @@
-//#region src/calendar/resource-calendar.logic.d.ts
 export type CalendarDateRange = {
   endDateExclusive: string;
   startDate: string;
@@ -23,5 +22,4 @@ export declare const assertConsecutiveCalendarDates: (dates: readonly string[])
 export declare const nextCalendarDate: (value: string) => string;
 export declare const layoutResourceCalendarEntries: (entries: readonly (CalendarDateRange & {
   id: string;
-})[], visibleRange: CalendarDateRange) => ResourceCalendarLaneLayout;
-//#endregion
+})[], visibleRange: CalendarDateRange) => ResourceCalendarLaneLayout;

package/dist/calendar/resource-calendar.logic.js

@@ -1,6 +1,6 @@
 import { Result, panic } from "better-result";
 import { Temporal } from "temporal-polyfill/full";
-//#region src/calendar/resource-calendar.logic.ts
+// src/calendar/resource-calendar.logic.ts
 const ISO_DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/u;
 const toPlainDate = (value) => {
 	if (!ISO_DATE_PATTERN.test(value)) return null;
@@ -83,5 +83,4 @@ const layoutResourceCalendarEntries = (entries, visibleRange) => {
 		rowCount: Math.max(1, laneEnds.length)
 	};
 };
-//#endregion
 export { assertConsecutiveCalendarDates, getResourceCalendarPlacement, layoutResourceCalendarEntries, nextCalendarDate };

package/dist/components/accordion.d.ts

@@ -1,5 +1,4 @@
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
-//#region src/components/accordion.d.ts
 /**
  * Closed panels stay in the document. Once mounted they are
  * `hidden="until-found"`, so find-in-page reaches their content and opens
@@ -38,5 +37,4 @@ declare const AccordionTrigger: ({ className, children, size, variant, trailing,
 declare const AccordionPanel: ({ className, children, size, ...props }: Accordion$1.Panel.Props & {
   size?: AccordionSize;
 }) => import("react").JSX.Element;
-//#endregion
 export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/accordion.js

@@ -3,7 +3,7 @@ import { ChevronDownIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/accordion.tsx
+// src/components/accordion.tsx
 /**
 * Closed panels stay in the document. Once mounted they are
 * `hidden="until-found"`, so find-in-page reaches their content and opens
@@ -65,5 +65,4 @@ const AccordionPanel = ({ className, children, size = "default", ...props }) =>
 		children
 	})
 });
-//#endregion
 export { Accordion, AccordionPanel as AccordionContent, AccordionPanel, AccordionItem, AccordionTrigger };

package/dist/components/ai-label.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/ai-label.d.ts
 type AiLabelProps = {
   /**
    * The words the mark shows ("AI", "AI topics"), already translated. They
@@ -30,5 +29,4 @@ type AiLabelProps = {
  * technology.
  */
 export declare const AiLabel: ({ label, disclosure, className }: AiLabelProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/ai-label.js

@@ -3,7 +3,7 @@ import { SparklesIcon } from "../icons.js";
 import { cn } from "../lib/utils.js";
 import { Popover, PopoverContent as PopoverPopup, PopoverDescription, PopoverTrigger } from "./popover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/ai-label.tsx
+// src/components/ai-label.tsx
 /**
 * The mark on content a model wrote, and the one place a reader learns what
 * that means.
@@ -38,5 +38,4 @@ const AiLabel = ({ label, disclosure, className }) => /* @__PURE__ */ jsxs(Popov
 		children: disclosure
 	})
 })] });
-//#endregion
 export { AiLabel };

package/dist/components/alert-dialog.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 import { OverlayLayer } from "../lib/overlay-layer.js";
-//#region src/components/alert-dialog.d.ts
 declare const AlertDialogCreateHandle: typeof AlertDialog$1.createHandle;
 declare const AlertDialog: typeof AlertDialog$1.Root;
 declare const AlertDialogPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").DialogPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -28,5 +27,4 @@ declare const AlertDialogDescription: ({ className, ...props }: AlertDialog$1.De
 declare function AlertDialogClose({ tooltip, ...props }: AlertDialog$1.Close.Props & {
   tooltip?: React$1.ReactNode;
 }): React$1.JSX.Element;
-//#endregion
 export { AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };

package/dist/components/alert-dialog.js

@@ -1,11 +1,11 @@
 "use client";
-import { cn } from "../lib/utils.js";
 import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
 import { SAFE_AREA_OVERLAY_GUTTER_CLASS_NAME } from "../lib/safe-area.js";
+import { cn } from "../lib/utils.js";
 import { renderTooltipTrigger } from "./tooltip-trigger-helper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
-//#region src/components/alert-dialog.tsx
+// src/components/alert-dialog.tsx
 const AlertDialogCreateHandle = AlertDialog$1.createHandle;
 const AlertDialog = AlertDialog$1.Root;
 const AlertDialogPortal = AlertDialog$1.Portal;
@@ -72,5 +72,4 @@ function AlertDialogClose({ tooltip, ...props }) {
 		})
 	});
 }
-//#endregion
 export { AlertDialog, AlertDialogBackdrop, AlertDialogBackdrop as AlertDialogOverlay, AlertDialogClose, AlertDialogPopup as AlertDialogContent, AlertDialogPopup, AlertDialogCreateHandle, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPanel, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertDialogViewport };

package/dist/components/animated-count.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/animated-count.d.ts
 /**
  * A formatted number whose changed characters fade in. The caller formats
  * (locale digits, units); the glyphs stay plain inline text so bidirectional
@@ -9,5 +8,4 @@ declare const AnimatedCount: ({ className, value }: {
   className?: string;
   value: string;
 }) => import("react").JSX.Element;
-//#endregion
 export { AnimatedCount };

package/dist/components/animated-count.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-//#region src/components/animated-count.tsx
+// src/components/animated-count.tsx
 /**
 * Aligns characters from the end, where digits keep their place value, so
 * 99 → 100 changes every glyph but 120 → 121 only the last one. An unchanged
@@ -59,5 +59,4 @@ const AnimatedCount = ({ className, value }) => {
 		})]
 	});
 };
-//#endregion
 export { AnimatedCount };

package/dist/components/animated-preview.css

@@ -0,0 +1,152 @@
+/*
+ * AnimatedPreview (animated-preview.tsx): the one animation system for
+ * previews that explain a feature by playing it.
+ *
+ * A frame stacks its stages in one grid cell. Stage `i` comes in at
+ * `i * hold` after the frame starts and goes out one hold later, cross-fading
+ * with its neighbour. A frame starts with the stage that holds it (plus its
+ * own stagger), so nested frames play inside their stage. Everything runs on
+ * CSS time; only a looping frame restarts itself, from JavaScript, once its
+ * last stage has gone out. With reduced motion nothing animates and the
+ * component renders only the final stage.
+ */
+
+[data-slot="animated-preview"] {
+  --animated-preview-crossfade: 208ms;
+  --animated-preview-frame-start: calc(
+    var(--animated-preview-stage-start, 0ms) +
+      var(--animated-preview-stagger, 0) * 160ms
+  );
+
+  display: grid;
+}
+
+span[data-slot="animated-preview"] {
+  display: inline-grid;
+  justify-items: start;
+}
+
+[data-slot="animated-preview-stage"] {
+  --animated-preview-stage-start: calc(
+    var(--animated-preview-frame-start) + var(--animated-preview-stage-index) *
+      var(--animated-preview-hold)
+  );
+
+  grid-area: 1 / 1;
+}
+
+[data-pace="glance"] {
+  --animated-preview-hold: 1664ms;
+}
+
+[data-pace="read"] {
+  --animated-preview-hold: 2600ms;
+}
+
+[data-pace="beat"] {
+  --animated-preview-hold: 640ms;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  [data-slot="animated-preview-stage"][data-incoming] {
+    animation: animated-preview-fade-in var(--animated-preview-crossfade) linear
+      var(--animated-preview-stage-start) both;
+  }
+
+  /* `forwards` only: a backwards fill would hold the stage visible before
+     it has come in. */
+  [data-slot="animated-preview-stage"][data-outgoing] {
+    animation: animated-preview-fade-out var(--animated-preview-crossfade)
+      linear
+      calc(var(--animated-preview-stage-start) + var(--animated-preview-hold))
+      forwards;
+  }
+
+  [data-slot="animated-preview-stage"][data-incoming][data-outgoing] {
+    animation:
+      animated-preview-fade-in var(--animated-preview-crossfade) linear
+        var(--animated-preview-stage-start) both,
+      animated-preview-fade-out var(--animated-preview-crossfade) linear
+        calc(var(--animated-preview-stage-start) + var(--animated-preview-hold))
+        forwards;
+  }
+
+  /* The carry lands as the frame inside crosses from its first stage to its
+     second: that crossover sits at 64% of the gesture. */
+  [data-slot="animated-preview-motion"][data-motion="full"] {
+    animation: animated-preview-carry calc(var(--animated-preview-hold) / 0.64)
+      ease-in-out var(--animated-preview-stage-start, 0ms) forwards;
+  }
+}
+
+[data-slot="animated-preview-motion"][data-motion="reduced"] {
+  transform: translate(
+    var(--animated-preview-carry-x),
+    var(--animated-preview-carry-y)
+  );
+}
+
+@keyframes animated-preview-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes animated-preview-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+/*
+ * Picked up (a small nudge, a 0.375rem lift, tilt and shadow), carried to the
+ * caller's target, and put down there. The caller sets
+ * `--animated-preview-carry-x` and `--animated-preview-carry-y`.
+ */
+@keyframes animated-preview-carry {
+  0%,
+  28% {
+    transform: none;
+    filter: none;
+  }
+
+  38% {
+    transform: translate(
+        0.25rem,
+        calc(var(--animated-preview-carry-y) - 0.375rem)
+      )
+      rotate(2.5deg) scale(1.05);
+    filter: drop-shadow(
+      0 8px 10px color-mix(in srgb, var(--color-black) 28%, transparent)
+    );
+  }
+
+  64% {
+    transform: translate(
+        var(--animated-preview-carry-x),
+        calc(var(--animated-preview-carry-y) - 0.375rem)
+      )
+      rotate(2.5deg) scale(1.05);
+    filter: drop-shadow(
+      0 8px 10px color-mix(in srgb, var(--color-black) 28%, transparent)
+    );
+  }
+
+  74%,
+  100% {
+    transform: translate(
+        var(--animated-preview-carry-x),
+        var(--animated-preview-carry-y)
+      )
+      rotate(0deg) scale(1);
+    filter: none;
+  }
+}

package/dist/components/animated-preview.d.ts

@@ -0,0 +1,75 @@
+import * as React$1 from "react";
+/**
+ * The one animation system for previews that explain a feature by playing it:
+ * a frame of ordered stages that cross-fade into each other, an optional
+ * carry gesture around a frame, and a hover card that hosts a preview beside
+ * the control it explains.
+ *
+ * The styles live in `animated-preview.css`, shipped through
+ * `@stll/ui/theme.css`. A stage's clock is CSS only: stage `i` comes in at
+ * `i` holds after its frame starts and goes out one hold later, so a frame
+ * nested inside a stage starts when that stage does. With reduced motion a
+ * frame renders only its final stage, statically.
+ */
+/**
+ * `once` plays the stages through and rests on the last one. `loop` lets the
+ * last stage go out and starts again from the first.
+ */
+export type AnimatedPreviewPlayback = "once" | "loop";
+/**
+ * How long each stage holds before the next one crosses over: `glance` for a
+ * gesture read at a glance, `read` for a stage carrying a sentence, `beat` for
+ * a step inside a stage.
+ */
+export type AnimatedPreviewPace = "glance" | "read" | "beat";
+export type AnimatedPreviewStage = {
+  id: string;
+  content: React$1.ReactNode;
+};
+type AnimatedPreviewProps = {
+  stages: readonly [AnimatedPreviewStage, ...AnimatedPreviewStage[]];
+  playback?: AnimatedPreviewPlayback;
+  pace?: AnimatedPreviewPace;
+  /**
+   * Steps this frame waits after the stage holding it comes in, so frames
+   * nested in one stage can follow each other.
+   */
+  stagger?: number;
+  /** Lays the frame out inline, to sit inside a sentence. */
+  inline?: boolean;
+  className?: string;
+};
+export declare const AnimatedPreview: ({ stages, playback, pace, stagger, inline, className }: AnimatedPreviewProps) => React$1.JSX.Element;
+type AnimatedPreviewMotionProps = React$1.ComponentProps<"div"> & {
+  pace?: AnimatedPreviewPace;
+};
+/**
+ * Carries its content along: picked up (lift, tilt, shadow), moved, and put
+ * down as the frame inside it crosses from its first stage to its second.
+ * The caller places the drop with `--animated-preview-carry-x` and
+ * `--animated-preview-carry-y`; with reduced motion the content rests there.
+ */
+export declare const AnimatedPreviewMotion: ({ className, pace, ...props }: AnimatedPreviewMotionProps) => React$1.JSX.Element;
+/** How long a pointer or keyboard focus rests on the trigger before the card opens. */
+export declare const ANIMATED_PREVIEW_CARD_DELAY_MS = 400;
+type AnimatedPreviewCardProps = React$1.PropsWithChildren<{
+  /**
+   * The control the card explains. It must take the props it is handed, as a
+   * `Button` does: the card opens from its hover and focus events.
+   */
+  trigger: React$1.ReactElement;
+  /**
+   * One line on what the control does. Shown under the preview and read as
+   * the control's description, so the moving preview itself stays out of the
+   * accessibility tree.
+   */
+  description: React$1.ReactNode;
+  className?: string;
+}>;
+/**
+ * A preview card opened by hovering or focusing a control. It takes no focus
+ * and traps none: the card describes the control, and the control stays the
+ * thing that is used.
+ */
+export declare const AnimatedPreviewCard: ({ trigger, description, className, children }: AnimatedPreviewCardProps) => React$1.JSX.Element;
+export {};

package/dist/components/animated-preview.js

@@ -0,0 +1,105 @@
+"use client";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { HoverCard as PreviewCard, HoverCardContent as PreviewCardPopup, HoverCardTrigger as PreviewCardTrigger } from "./preview-card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+// src/components/animated-preview.tsx
+/** Must match the keyframes name in `animated-preview.css`. */
+const STAGE_OUT_KEYFRAMES = "animated-preview-fade-out";
+const AnimatedPreview = ({ stages, playback = "once", pace = "glance", stagger = 0, inline = false, className }) => {
+	const reducedMotion = usePrefersReducedMotion();
+	const [cycle, setCycle] = React$1.useState(0);
+	const Frame = inline ? "span" : "div";
+	const lastIndex = stages.length - 1;
+	const finalStage = stages[lastIndex] ?? stages[0];
+	const frameStyle = { "--animated-preview-stagger": stagger };
+	const restartLoop = (event) => {
+		const stage = event.target;
+		if (playback === "loop" && event.animationName === STAGE_OUT_KEYFRAMES && stage instanceof HTMLElement && stage.parentElement === event.currentTarget && stage.dataset["stageIndex"] === String(lastIndex)) setCycle((current) => current + 1);
+	};
+	return /* @__PURE__ */ jsx(Frame, {
+		className,
+		"data-motion": reducedMotion ? "reduced" : "full",
+		"data-pace": pace,
+		"data-playback": playback,
+		"data-slot": "animated-preview",
+		onAnimationEnd: reducedMotion ? void 0 : restartLoop,
+		style: frameStyle,
+		children: reducedMotion ? /* @__PURE__ */ jsx(StageFrame, {
+			incoming: false,
+			index: lastIndex,
+			inline,
+			outgoing: false,
+			children: finalStage.content
+		}) : stages.map((stage, index) => /* @__PURE__ */ jsx(StageFrame, {
+			incoming: index > 0 || playback === "loop",
+			index,
+			inline,
+			outgoing: index < lastIndex || playback === "loop",
+			children: stage.content
+		}, `${cycle}:${stage.id}`))
+	});
+};
+const StageFrame = ({ index, incoming, outgoing, inline, children }) => {
+	return /* @__PURE__ */ jsx(inline ? "span" : "div", {
+		"data-incoming": incoming ? "" : void 0,
+		"data-outgoing": outgoing ? "" : void 0,
+		"data-slot": "animated-preview-stage",
+		"data-stage-index": index,
+		style: { "--animated-preview-stage-index": index },
+		children
+	});
+};
+/**
+* Carries its content along: picked up (lift, tilt, shadow), moved, and put
+* down as the frame inside it crosses from its first stage to its second.
+* The caller places the drop with `--animated-preview-carry-x` and
+* `--animated-preview-carry-y`; with reduced motion the content rests there.
+*/
+const AnimatedPreviewMotion = ({ className, pace = "glance", ...props }) => {
+	const reducedMotion = usePrefersReducedMotion();
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-motion": reducedMotion ? "reduced" : "full",
+		"data-pace": pace,
+		"data-slot": "animated-preview-motion",
+		...props
+	});
+};
+/** How long a pointer or keyboard focus rests on the trigger before the card opens. */
+const ANIMATED_PREVIEW_CARD_DELAY_MS = 400;
+/**
+* A preview card opened by hovering or focusing a control. It takes no focus
+* and traps none: the card describes the control, and the control stays the
+* thing that is used.
+*/
+const AnimatedPreviewCard = ({ trigger, description, className, children }) => {
+	const descriptionId = React$1.useId();
+	return /* @__PURE__ */ jsxs(PreviewCard, { children: [
+		/* @__PURE__ */ jsx(PreviewCardTrigger, {
+			"aria-describedby": descriptionId,
+			delay: 400,
+			render: trigger
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			id: descriptionId,
+			children: description
+		}),
+		/* @__PURE__ */ jsx(PreviewCardPopup, {
+			className: cn("w-72 flex-col gap-2 p-3", className),
+			"data-slot": "animated-preview-card",
+			children: /* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				className: "flex flex-col gap-2",
+				children: [children, /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					"data-slot": "animated-preview-card-description",
+					children: description
+				})]
+			})
+		})
+	] });
+};
+export { ANIMATED_PREVIEW_CARD_DELAY_MS, AnimatedPreview, AnimatedPreviewCard, AnimatedPreviewMotion };

package/dist/components/application-rail.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/application-rail.d.ts
 export declare const APPLICATION_RAIL_WIDTH: "w-12";
 export declare const APPLICATION_RAIL_BUTTON_SIZE: "size-11";
 export declare const APPLICATION_RAIL_ICON_SIZE: "size-4";
@@ -15,5 +14,4 @@ export declare const ApplicationRailContent: ({ className, ...props }: React$1.C
 export declare const ApplicationRailMenu: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 export declare const ApplicationRailButton: ({ className, ...props }: React$1.ComponentProps<"button">) => React$1.JSX.Element;
 export declare const ApplicationRailSeparator: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-export declare const ApplicationRailFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-//#endregion
+export declare const ApplicationRailFooter: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;