@elabs-ai/components-ai 5.4.0 → 5.5.0

package/src/_media-fixtures.ts

@@ -0,0 +1,47 @@
+/**
+ * Story fixtures synthesized at module scope, so no story needs a network
+ * origin (`docs/CSP-AND-NETWORK.md`) or a binary file. Internal to this
+ * package's stories — not exported from the barrel.
+ */
+
+/** A silent 8-bit mono PCM WAV of `seconds` length, as a data URL. */
+export function silentWavDataUrl(seconds = 1.5, sampleRate = 8000): string {
+  const samples = Math.floor(seconds * sampleRate);
+  const bytes = new Uint8Array(44 + samples).fill(128); // 128 == silence (8-bit unsigned)
+  const view = new DataView(bytes.buffer);
+  const ascii = (offset: number, text: string) => {
+    for (let i = 0; i < text.length; i += 1) view.setUint8(offset + i, text.charCodeAt(i));
+  };
+  ascii(0, "RIFF");
+  view.setUint32(4, 36 + samples, true);
+  ascii(8, "WAVEfmt ");
+  view.setUint32(16, 16, true); // PCM header size
+  view.setUint16(20, 1, true); // format: PCM
+  view.setUint16(22, 1, true); // channels: mono
+  view.setUint32(24, sampleRate, true);
+  view.setUint32(28, sampleRate, true); // byte rate
+  view.setUint16(32, 1, true); // block align
+  view.setUint16(34, 8, true); // bits per sample
+  ascii(36, "data");
+  view.setUint32(40, samples, true);
+  let binary = "";
+  for (const byte of bytes) binary += String.fromCharCode(byte);
+  return `data:audio/wav;base64,${btoa(binary)}`;
+}
+
+/**
+ * A screenshot-like chart panel (axes, a latency line with a spike, a caption),
+ * as an SVG data URL. Paints with CSS system colours only, so no raw colour
+ * literal enters this package.
+ */
+export function placeholderChartDataUrl(caption: string): string {
+  const svg =
+    `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 400">` +
+    `<rect width="640" height="400" fill="Canvas"/>` +
+    `<rect x="0.5" y="0.5" width="639" height="399" fill="none" stroke="GrayText" opacity="0.5"/>` +
+    `<path d="M60 40 V320 H600" fill="none" stroke="GrayText" stroke-width="2"/>` +
+    `<path d="M60 250 L160 240 L260 255 L360 235 L420 120 L480 140 L540 210 L600 215" fill="none" stroke="Highlight" stroke-width="4" stroke-linejoin="round"/>` +
+    `<text x="330" y="370" font-family="sans-serif" font-size="22" text-anchor="middle" fill="CanvasText">${caption}</text>` +
+    `</svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}

package/src/_persona-rive.tsx

@@ -277,8 +277,7 @@ export default PersonaRive;
  * typecheck — caught by `pnpm --filter @elabs-ai/components-ai typecheck`
  * locally, never shipped as a silent mismatch to a consumer.
  *
- * `AssertAssignable` itself is shared with `_audio-player-media-chrome.tsx`
- * via `_lazy-boundary-conformance.ts` — see that module's doc comment for
+ * `AssertAssignable` itself lives in `_lazy-boundary-conformance.ts` — see that module's doc comment for
  * what this check can and cannot prove (it is one-directional: it cannot
  * catch the owned type being NARROWER than the real one, which is exactly
  * what `PersonaRiveEvent["data"]` is — see the CHANGELOG's "Breaking (types)"

package/src/a2ui/catalog.source.json

@@ -574,7 +574,7 @@
         "spec": {
           "type": "object",
           "required": true,
-          "description": "{ data: row[], x: string, series: string[] | { key, label?, axis?: left|right, mark?: line|area|column }[] (type: \"dual-axis\" only: default axis left, mark line; needs ≥1 line series, no right-axis columns), type?: line|area|bar|pie|scatter|radar|funnel|candlestick|heatmap|calendar|waterfall|dumbbell|unit|treemap|histogram|box|strip|bump|stream|diverging-bar|dual-axis, xType?: time|category|number, y2?, axes?: { y2?: { align?: independent|ticks, proportional?: boolean, zero?: both|auto } } (type: \"dual-axis\" only, right axis vs left; default align ticks, zero auto), group?, title?, description?, stacked?: boolean|percent|diverging, orientation?: vertical|horizontal, donut?, legend?: boolean (an object form exists; AutoChart reads it as boolean truthy today), valueFormat?: number|compact|currency|percent, currency?, palette?: mono|sequential|categorical, emphasis?: analytical|editorial, kind?: steps|records|ranking|change (change: a two-measure spec reads as a before/after move, for dumbbell), nulls?: gap|zero|connect (line/area/stream non-numeric sample, default gap), curve?: linear|monotone|natural|step|step-before|step-after (line/area/stream, default monotone), symbols?: { placement?: all|ends|first|last, shape?: circle|square|triangle|diamond|cross|star|plus|hexagon, style?: filled|hollow, size? } (line/area/stream point markers), size?: { key, range?: [lo,hi] } (scatter bubble size), shapeBy?: { key, shapes?: marker-shape[] } (scatter shape by category), trend?: linear|log (scatter trend line), shapes?: [{ kind: line|path, … }] (scatter reference lines/areas), variant?: dumbbell|slope|arrow|dots (dumbbell only, default dumbbell), delta?: { show, mode: absolute|percent } (dumbbell delta label), groupSmall?: { threshold?, max?, label? } (pie: fold small slices into an Other slice), half?: boolean (pie half-donut, default false), labels?: { series?: end|key|none, values?: { placement: first|last|all|peaks, count?, minGap?, outline?, matchColor?, format? }, points?: { key, mode?: auto|all, priorityKey? }, slices?: { placement?: inside|outside|none, show: (label|value|percent)[], matchColor?, minAngle? }, comparison?: value|difference|none } (label engine), annotations?: [{ kind: text|range|line|row, … }] (notes, bands, reference lines, row notes in data units), analytics?: [{ kind: line|band|trend|window|forecast|errorBars, of?: series|all, … }] (computed overlays — line: { value: mean|median|min|max|sum|number|{ percentile }|{ stddev, around? }, axis?: x|y, label?: none|value|computation|text, ifOverflow?: clip|extend }; band: { from, to } | { spread: { percentiles: [lo,hi] }|{ stddev }|{ ci } }; trend: { model?: linear|log|exp|pow|{ poly: 2..6 }|{ loess }, ci?, extent?: data|domain }; window: { k, reduce?: mean|median|sum|min|max|ewm, replace? }; forecast: { horizon, season?, interval? }; errorBars: { low: field|{ percent }, high?, band? }), selection?: { gestures: (range|rect|lasso|radial)[], confirm?: immediate|explicit, field? } (bar/line/area/scatter/heatmap/histogram/box/strip selection gestures with a toolbar — a bar chart with range and lasso selection is { gestures: [range, lasso] }; explicit previews until the reader confirms; intents arrive as the selectionIntent event), divergingCenter?: string (neutral series when stacked is diverging), sort?: asc|desc|none|{by,dir} (bar) | start|end|delta|deltaPercent|data|label|none (dumbbell) | desc|none (pie) | data|increasesFirst|decreasesFirst (waterfall, default data), groupBy?: string (bar/dumbbell row grouping; waterfall: a subtotal after each group), colorBy?: { key, scale?: categorical|sequential|diverging, steps? } (bar per-bar / scatter per-point colour), overlays?: [{ kind: value|range, … }] (bar value markers, range spans), comparison?: { key, label? } (bar muted prior-period column), notes?: string (italic notes under an enclosing ChartFrame), byline?: { kind?: chart|map|table, author } (ChartFrame footer: kind + author), source?: string | { name, href? } (ChartFrame footer attribution), altText?: string (image text alternative, default: description), tooltip?: { variant?: rows|table|inline, focus?: boolean, pin?: boolean } (forwarded to ChartTooltip, default rows), facet?: { by: string | { series: true }, columns?, scales?: { y?: shared|independent, rangeRounding? }, sort?: start|end|delta|deltaPercent|range|title|data, baseline?: { key } | { series }, panelHeight? } (line/area/bar/pie small multiples), dataFormat?: differences|runningTotals (waterfall only, default differences), zoomToDifferences?: boolean (waterfall only, default false), scrollbar?: miniChart|bar|auto|none (bar/diverging-bar/heatmap/calendar and line/area on a category x: an overview strip that scrolls the categories; default none, or auto when maxVisibleItems is set), maxVisibleItems?: number (categories shown at once, the rest scroll behind the strip and the value axis keeps the full domain; for > 30 categories set maxVisibleItems) }"
+          "description": "{ data: row[], x: string, series: string[] | { key, label?, axis?: left|right, mark?: line|area|column }[] (type: \"dual-axis\" only: default axis left, mark line; needs ≥1 line series, no right-axis columns), type?: line|area|bar|pie|scatter|radar|funnel|candlestick|heatmap|calendar|waterfall|dumbbell|unit|treemap|histogram|box|strip|bump|stream|diverging-bar|dual-axis, xType?: time|category|number, y2?, axes?: { y2?: { align?: independent|ticks, proportional?: boolean, zero?: both|auto } } (type: \"dual-axis\" only, right axis vs left; default align ticks, zero auto), group?, title?, description?, stacked?: boolean|percent|diverging, orientation?: vertical|horizontal, donut?, legend?: boolean (an object form exists; AutoChart reads it as boolean truthy today), valueFormat?: number|compact|currency|percent, currency?, palette?: mono|sequential|categorical, emphasis?: analytical|editorial, kind?: steps|records|ranking|change (change: a two-measure spec reads as a before/after move, for dumbbell), nulls?: gap|zero|connect (line/area/stream non-numeric sample, default gap), curve?: linear|monotone|natural|step|step-before|step-after (line/area/stream, default monotone), symbols?: { placement?: all|ends|first|last, shape?: circle|square|triangle|diamond|cross|star|plus|hexagon, style?: filled|hollow, size? } (line/area/stream point markers), size?: { key, range?: [lo,hi] } (scatter bubble size), shapeBy?: { key, shapes?: marker-shape[] } (scatter shape by category), trend?: linear|log (scatter trend line), shapes?: [{ kind: line|path, … }] (scatter reference lines/areas), variant?: dumbbell|slope|arrow|dots (dumbbell only, default dumbbell), valueKeys?: string[] (dumbbell variant dots only: one dot per key, in order, and one legend entry each; default the two measures), delta?: { show, mode: absolute|percent } (dumbbell delta label), groupSmall?: { threshold?, max?, label? } (pie: fold small slices into an Other slice), half?: boolean (pie half-donut, default false), labels?: { series?: end|key|none, values?: { placement: first|last|all|peaks, count?, minGap?, outline?, matchColor?, format? }, points?: { key, mode?: auto|all, priorityKey? }, slices?: { placement?: inside|outside|none, show: (label|value|percent)[], matchColor?, minAngle? }, comparison?: value|difference|none } (label engine), annotations?: [{ kind: text|range|line|row, … }] (notes, bands, reference lines, row notes in data units), analytics?: [{ kind: line|band|trend|window|forecast|errorBars, of?: series|all, … }] (computed overlays — line: { value: mean|median|min|max|sum|number|{ percentile }|{ stddev, around? }, axis?: x|y, label?: none|value|computation|text, ifOverflow?: clip|extend }; band: { from, to } | { spread: { percentiles: [lo,hi] }|{ stddev }|{ ci } }; trend: { model?: linear|log|exp|pow|{ poly: 2..6 }|{ loess }, ci?, extent?: data|domain }; window: { k, reduce?: mean|median|sum|min|max|ewm, replace? }; forecast: { horizon, season?, interval? }; errorBars: { low: field|{ percent }, high?, band? }), selection?: { gestures: (range|rect|lasso|radial)[], confirm?: immediate|explicit, field? } (bar/line/area/scatter/heatmap/histogram/box/strip selection gestures with a toolbar — a bar chart with range and lasso selection is { gestures: [range, lasso] }; explicit previews until the reader confirms; intents arrive as the selectionIntent event), divergingCenter?: string (neutral series when stacked is diverging), sort?: asc|desc|none|{by,dir} (bar) | start|end|delta|deltaPercent|data|label|none (dumbbell) | desc|none (pie) | data|increasesFirst|decreasesFirst (waterfall, default data), groupBy?: string (bar/dumbbell row grouping; waterfall: a subtotal after each group), colorBy?: { key, scale?: categorical|sequential|diverging, steps? } (bar per-bar / scatter per-point colour), overlays?: [{ kind: value|range, … }] (bar value markers, range spans), comparison?: { key, label? } (bar muted prior-period column), notes?: string (italic notes under an enclosing ChartFrame), byline?: { kind?: chart|map|table, author } (ChartFrame footer: kind + author), source?: string | { name, href? } (ChartFrame footer attribution), altText?: string (image text alternative, default: description), tooltip?: { variant?: rows|table|inline, focus?: boolean, pin?: boolean } (forwarded to ChartTooltip, default rows), facet?: { by: string | { series: true }, columns?, scales?: { y?: shared|independent, rangeRounding? }, sort?: start|end|delta|deltaPercent|range|title|data, baseline?: { key } | { series }, panelHeight? } (line/area/bar/pie small multiples), dataFormat?: differences|runningTotals (waterfall only, default differences), zoomToDifferences?: boolean (waterfall only, default false), scrollbar?: miniChart|bar|auto|none (bar/diverging-bar/heatmap/calendar and line/area on a category x: an overview strip that scrolls the categories; default none, or auto when maxVisibleItems is set), maxVisibleItems?: number (categories shown at once, the rest scroll behind the strip and the value axis keeps the full domain; for > 30 categories set maxVisibleItems) }"
         },
         "height": {
           "type": "number",

package/src/asset-preview.stories.tsx

@@ -59,6 +59,18 @@ export const Csv: Story = {
   },
 };
 
+/** Offline, deterministic placeholder (inline SVG data URL) — no network round-trip. */
+const CHART_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200"><rect width="320" height="200" fill="#46618a"/><rect x="40" y="120" width="40" height="60" fill="#b08949"/><rect x="110" y="80" width="40" height="100" fill="#b08949"/><rect x="180" y="50" width="40" height="130" fill="#b08949"/></svg>',
+)}`;
+
+/** Image renders through the ui `Image` primitive (`fit="contain"`, lazy) — no Raw toggle. */
+export const Image: Story = {
+  args: {
+    asset: { id: "revenue-chart", name: "revenue-chart.svg", type: "image", content: CHART_IMAGE },
+  },
+};
+
 /** Raw mode as the initial state. */
 export const RawByDefault: Story = {
   args: {

package/src/asset-preview.test.tsx

@@ -46,6 +46,20 @@ describe("AssetPreview (#193, research 04 §5 ASSET-4)", () => {
     expect(screen.getByText("2 rows")).toBeInTheDocument();
   });
 
+  it("renders an image through the ui Image primitive, with no Raw toggle", () => {
+    render(
+      <AssetPreview
+        asset={{ id: "chart", name: "chart.png", type: "image", content: "/chart.png" }}
+      />,
+    );
+    const img = screen.getByRole("img", { name: "chart.png" });
+    expect(img).toHaveAttribute("src", "/chart.png");
+    expect(img).toHaveAttribute("data-slot", "image");
+    expect(img).toHaveAttribute("loading", "lazy");
+    expect(img).toHaveClass("object-contain");
+    expect(screen.queryByRole("button", { name: "Raw" })).not.toBeInTheDocument();
+  });
+
   it("renders an empty state for missing content, never broken UI", () => {
     render(<AssetPreview asset={{ id: "x", name: "empty.md", type: "markdown" }} />);
     expect(screen.getByText("No preview available…")).toBeInTheDocument();

package/src/asset-preview.tsx

@@ -24,6 +24,7 @@
  */
 import {
   Button,
+  Image,
   Table,
   TableBody,
   TableCell,
@@ -242,11 +243,12 @@ export const AssetPreview = ({
       }
       case "image": {
         body = (
-          <img
+          <Image
             src={content || asset.path}
             alt={asset.name}
+            fit="contain"
             loading="lazy"
-            className="max-w-full rounded-md"
+            className="rounded-md"
           />
         );
         break;

package/src/attachments.stories.tsx

@@ -0,0 +1,147 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import {
+  Attachment,
+  AttachmentHoverCard,
+  AttachmentHoverCardContent,
+  AttachmentHoverCardTrigger,
+  AttachmentInfo,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+  type AttachmentData,
+} from "./attachments";
+import { silentWavDataUrl } from "./_media-fixtures";
+
+/** Offline, deterministic placeholder (inline SVG data URL) — no network round-trip. */
+function photo(label: string, bg: string): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192"><rect width="192" height="192" fill="${bg}"/><text x="96" y="104" font-family="system-ui,sans-serif" font-size="20" fill="#ffffff" text-anchor="middle">${label}</text></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
+const ITEMS: AttachmentData[] = [
+  {
+    id: "photo",
+    type: "file",
+    mediaType: "image/svg+xml",
+    filename: "harbour-fog.svg",
+    url: photo("Harbour", "#46618a"),
+  },
+  {
+    id: "clip",
+    type: "file",
+    mediaType: "video/webm",
+    filename: "product-demo.webm",
+    url: silentWavDataUrl(1, 3000),
+  },
+  {
+    id: "report",
+    type: "file",
+    mediaType: "application/pdf",
+    filename: "q3-board-report.pdf",
+    url: "",
+  },
+  {
+    id: "source",
+    type: "source-document",
+    sourceId: "src-1",
+    mediaType: "text/html",
+    title: "Revenue recognition policy",
+    filename: "policy.html",
+  },
+];
+
+const noop = () => {};
+
+const meta = {
+  title: "AI/Attachments",
+  component: Attachments,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Files attached to a message or a composer — image and video thumbnails through the ui `Image`/`Video` primitives, a typed icon for everything else — as a grid of tiles, an inline row of chips or a full-width list, each with an optional remove action.",
+      },
+    },
+  },
+} satisfies Meta<typeof Attachments>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Grid (the default) — 96 px tiles: image and video thumbnails, icons for the rest. */
+export const Default: Story = {
+  args: {
+    variant: "grid",
+    children: ITEMS.map((item) => (
+      <Attachment key={item.id} data={item} onRemove={noop}>
+        <AttachmentPreview />
+        <AttachmentRemove />
+      </Attachment>
+    )),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("img", { name: "harbour-fog.svg" })).toBeInTheDocument();
+    // The video thumbnail is decorative: hidden from AT, muted, no controls.
+    const video = canvasElement.querySelector("video");
+    await expect(video).not.toBeNull();
+    await expect(video?.muted).toBe(true);
+    await expect(video?.controls).toBe(false);
+    await expect(video?.closest('[aria-hidden="true"]')).not.toBeNull();
+  },
+};
+
+/** Inline — compact chips for a composer row. */
+export const Inline: Story = {
+  args: {
+    variant: "inline",
+    children: ITEMS.map((item) => (
+      <Attachment key={item.id} data={item} onRemove={noop}>
+        <AttachmentPreview />
+        <AttachmentInfo />
+        <AttachmentRemove />
+      </Attachment>
+    )),
+  },
+};
+
+/** List — full-width rows with the media type. */
+export const List: Story = {
+  args: {
+    variant: "list",
+    className: "max-w-sm",
+    children: ITEMS.map((item) => (
+      <Attachment key={item.id} data={item} onRemove={noop}>
+        <AttachmentPreview />
+        <AttachmentInfo showMediaType />
+        <AttachmentRemove />
+      </Attachment>
+    )),
+  },
+};
+
+/** Preview — an inline chip that opens a larger preview on hover. */
+export const Preview: Story = {
+  args: {
+    variant: "inline",
+    children: ITEMS.slice(0, 2).map((item) => (
+      <AttachmentHoverCard key={item.id}>
+        <AttachmentHoverCardTrigger asChild>
+          <Attachment data={item}>
+            <AttachmentPreview />
+            <AttachmentInfo />
+          </Attachment>
+        </AttachmentHoverCardTrigger>
+        <AttachmentHoverCardContent>
+          <Attachments variant="grid">
+            <Attachment data={item}>
+              <AttachmentPreview />
+            </Attachment>
+          </Attachments>
+        </AttachmentHoverCardContent>
+      </AttachmentHoverCard>
+    )),
+  },
+};

package/src/attachments.test.tsx

@@ -0,0 +1,104 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  Attachment,
+  AttachmentInfo,
+  AttachmentPreview,
+  AttachmentRemove,
+  Attachments,
+  getMediaCategory,
+  type AttachmentData,
+  type AttachmentVariant,
+} from "./attachments";
+
+afterEach(cleanup);
+
+const IMAGE: AttachmentData = {
+  id: "photo",
+  type: "file",
+  mediaType: "image/png",
+  filename: "photo.png",
+  url: "data:image/png;base64,iVBORw0KGgo=",
+};
+const VIDEO: AttachmentData = {
+  id: "clip",
+  type: "file",
+  mediaType: "video/mp4",
+  filename: "clip.mp4",
+  url: "data:video/mp4;base64,AAAA",
+};
+const DOC: AttachmentData = {
+  id: "doc",
+  type: "file",
+  mediaType: "application/pdf",
+  filename: "report.pdf",
+  url: "",
+};
+
+function renderAll(variant: AttachmentVariant, onRemove = vi.fn()) {
+  render(
+    <Attachments variant={variant}>
+      {[IMAGE, VIDEO, DOC].map((item) => (
+        <Attachment key={item.id} data={item} onRemove={() => onRemove(item.id)}>
+          <AttachmentPreview />
+          <AttachmentInfo />
+          <AttachmentRemove />
+        </Attachment>
+      ))}
+    </Attachments>,
+  );
+  return onRemove;
+}
+
+describe("Attachments", () => {
+  it.each<AttachmentVariant>(["grid", "inline", "list"])(
+    "renders image and video thumbnails in the %s variant",
+    (variant) => {
+      renderAll(variant);
+      const img = screen.getByRole("img", { name: "photo.png" });
+      expect(img.tagName).toBe("IMG");
+      expect(img).toHaveAttribute("data-slot", "image");
+      expect(img).toHaveClass("object-cover");
+      expect(img).toHaveAttribute("width", variant === "grid" ? "96" : "20");
+
+      const video = document.querySelector("video");
+      expect(video).not.toBeNull();
+      expect(video?.muted).toBe(true);
+      expect(video).not.toHaveAttribute("controls");
+      expect(video?.closest('[aria-hidden="true"]')).not.toBeNull();
+    },
+  );
+
+  it("shows the file name outside the grid variant, never in it", () => {
+    renderAll("list");
+    expect(screen.getByText("report.pdf")).toBeInTheDocument();
+    cleanup();
+    renderAll("grid");
+    expect(screen.queryByText("report.pdf")).not.toBeInTheDocument();
+  });
+
+  it("calls onRemove for the clicked item only", () => {
+    const onRemove = renderAll("list");
+    fireEvent.click(screen.getAllByRole("button", { name: "Remove" })[0]!);
+    expect(onRemove).toHaveBeenCalledTimes(1);
+    expect(onRemove).toHaveBeenCalledWith("photo");
+  });
+
+  it("renders no remove button without an onRemove callback", () => {
+    render(
+      <Attachments>
+        <Attachment data={IMAGE}>
+          <AttachmentPreview />
+          <AttachmentRemove />
+        </Attachment>
+      </Attachments>,
+    );
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("classifies media types", () => {
+    expect(getMediaCategory(IMAGE)).toBe("image");
+    expect(getMediaCategory(VIDEO)).toBe("video");
+    expect(getMediaCategory(DOC)).toBe("document");
+  });
+});

package/src/attachments.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button } from "@elabs-ai/components-ui";
+import { Button, Image, Video } from "@elabs-ai/components-ui";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import type { FileUIPart, SourceDocumentUIPart } from "ai";
@@ -79,24 +79,17 @@ export const getAttachmentLabel = (data: AttachmentData): string => {
   return data.filename || (category === "image" ? "Image" : "Attachment");
 };
 
-const renderAttachmentImage = (url: string, filename: string | undefined, isGrid: boolean) =>
-  isGrid ? (
-    <img
-      alt={filename || "Image"}
-      className="size-full object-cover"
-      height={96}
-      src={url}
-      width={96}
-    />
-  ) : (
-    <img
-      alt={filename || "Image"}
-      className="size-full rounded object-cover"
-      height={20}
-      src={url}
-      width={20}
-    />
-  );
+const renderAttachmentImage = (url: string, filename: string | undefined, isGrid: boolean) => (
+  <Image
+    alt={filename || "Image"}
+    className={isGrid ? "size-full" : "size-full rounded"}
+    fit="cover"
+    height={isGrid ? 96 : 20}
+    showSkeleton={false}
+    src={url}
+    width={isGrid ? 96 : 20}
+  />
+);
 
 // ============================================================================
 // Contexts
@@ -157,6 +150,8 @@ export const Attachments = ({
           variant === "grid" && "ms-auto w-fit",
           className,
         )}
+        data-slot="attachments"
+        data-variant={variant}
         {...props}
       >
         {children}
@@ -201,6 +196,7 @@ export const Attachment = ({ data, onRemove, className, children, ...props }: At
           ],
           className,
         )}
+        data-slot="attachment"
         {...props}
       >
         {children}
@@ -236,7 +232,19 @@ export const AttachmentPreview = ({
     }
 
     if (mediaCategory === "video" && data.type === "file" && data.url) {
-      return <video className="size-full object-cover" muted src={data.url} />;
+      // Control-less, decorative thumbnail: the attachment's name is the label.
+      return (
+        <Video
+          src={data.url}
+          muted
+          preload="metadata"
+          controls={false}
+          fit="cover"
+          aria-hidden
+          tabIndex={-1}
+          className="size-full"
+        />
+      );
     }
 
     const Icon = mediaCategoryIcons[mediaCategory];

package/src/audio-player.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, waitFor } from "storybook/test";
 
+import { silentWavDataUrl } from "./_media-fixtures";
 import {
   AudioPlayer,
   AudioPlayerControlBar,
@@ -24,11 +25,10 @@ const meta = {
     docs: {
       description: {
         component:
-          "A token-themed **media-chrome** audio player for spoken agent replies. Every " +
-          "control is a media-chrome custom element re-skinned through the `--media-*` " +
-          "custom properties, so it tracks the active theme. The engine is loaded through " +
-          "a dynamic `import()` (ADR 0019) — it is not in any consumer's entry chunk — so " +
-          "the player renders a layout-shaped `Skeleton` for the first frame.",
+          "An audio player for spoken agent replies — thin presets over ui's " +
+          "`MediaPlayer*` parts, so the controls are real buttons and sliders themed " +
+          "through tokens. Keyboard: Space/k play·pause, ←/→ seek, ↑/↓ volume, m mute. " +
+          "The root is transparent; the bubble or card around it is the surface.",
       },
     },
   },
@@ -37,36 +37,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/**
- * A ~1.5 s silent 8-bit mono WAV, synthesized at module scope so the story needs
- * no network origin (see `docs/CSP-AND-NETWORK.md`) and no binary fixture.
- */
-function silentWavSrc(seconds = 1.5, sampleRate = 8000): string {
-  const samples = Math.floor(seconds * sampleRate);
-  const bytes = new Uint8Array(44 + samples).fill(128); // 128 == silence, 8-bit unsigned
-  const view = new DataView(bytes.buffer);
-  const ascii = (offset: number, text: string) => {
-    for (let i = 0; i < text.length; i += 1) view.setUint8(offset + i, text.charCodeAt(i));
-  };
-  ascii(0, "RIFF");
-  view.setUint32(4, 36 + samples, true);
-  ascii(8, "WAVEfmt ");
-  view.setUint32(16, 16, true); // PCM header size
-  view.setUint16(20, 1, true); // format: PCM
-  view.setUint16(22, 1, true); // channels: mono
-  view.setUint32(24, sampleRate, true);
-  view.setUint32(28, sampleRate, true); // byte rate
-  view.setUint16(32, 1, true); // block align
-  view.setUint16(34, 8, true); // bits per sample
-  ascii(36, "data");
-  view.setUint32(40, samples, true);
-
-  let binary = "";
-  for (const byte of bytes) binary += String.fromCharCode(byte);
-  return `data:audio/wav;base64,${btoa(binary)}`;
-}
-
-const SILENT_WAV = silentWavSrc();
+const SILENT_WAV = silentWavDataUrl();
 
 export const Default: Story = {
   render: () => (
@@ -85,15 +56,9 @@ export const Default: Story = {
     </AudioPlayer>
   ),
   play: async ({ canvasElement }) => {
-    // media-chrome arrives in a lazy chunk (#313): the controls are absent for
-    // the first frame, so this also locks in that the chunk actually resolves.
-    await waitFor(
-      () => {
-        expect(canvasElement.querySelector("media-controller")).not.toBeNull();
-        expect(canvasElement.querySelector("media-play-button")).not.toBeNull();
-        expect(canvasElement.querySelector("media-time-range")).not.toBeNull();
-      },
-      { timeout: 10000 },
-    );
+    await waitFor(() => {
+      expect(canvasElement.querySelector('[data-slot="media-player-play-button"]')).not.toBeNull();
+      expect(canvasElement.querySelector('[data-slot="media-player-time-slider"]')).not.toBeNull();
+    });
   },
 };