@elabs-ai/components-ai 5.3.1 → 5.5.0

package/src/_audio-player-media-chrome.tsx

@@ -1,233 +0,0 @@
-"use client";
-
-/**
- * The media-chrome half of `AudioPlayer`, split out so it can be `lazy()`-loaded.
- *
- * `media-chrome` declares no `sideEffects`, so a static import from
- * `audio-player.tsx` put the whole custom-element library (and the
- * `media-chrome/react` wrappers that register it) into the entry chunk of every
- * `@elabs-ai/components-ai` consumer — including the vast majority that
- * never render an `AudioPlayer`. Keeping every media-chrome *value* import in
- * this module, reached only through
- * `lazy(() => import("./_audio-player-media-chrome"))`, confines it to its own
- * chunk. `audio-player.tsx` owns the public prop types, and — since issue #101
- * — owns them as OWNED types (`AudioPlayerPartProps` and its ten aliases) that
- * never reference `media-chrome/react`'s own types; this module still imports
- * the REAL media-chrome values (below) and, at the bottom of the file, proves
- * every owned type stays assignable to its real counterpart.
- *
- * See ADR 0019 and `pnpm heavy-deps:check`.
- *
- * @lazy-boundary This module must only ever be reached via `import()`. The gate
- * fails if anything imports it statically, which would put media-chrome back in
- * the entry chunk and make the `lazy()` pointless.
- */
-import { Button, ButtonGroup, ButtonGroupText } from "@elabs-ai/components-ui";
-import { cn } from "@elabs-ai/components-ui/lib/cn";
-// A NAMED import (`import { MediaController } from "media-chrome/react"`) is a
-// static ESM binding a bundler must resolve at build time. Now that
-// `media-chrome` is a genuinely optional peer (issue #33), a consumer who has
-// not installed it hits that resolution at the worst possible time: Vite's own
-// optional-peer-dependency handling swaps in a build-time stub with no
-// exports, and Rollup's static named-export check then fails the WHOLE APP
-// BUILD — not a runtime error any `.catch()`/error boundary could ever see
-// (confirmed against `fixtures/consumer-smoke`'s real Vite build). A namespace
-// import defers every one of these to a plain property lookup, which Rollup
-// does not statically validate, so the build always succeeds; a genuinely
-// missing peer instead resolves the destructured names below to `undefined`,
-// and the guard turns that into a render-phase throw `LazyEngineBoundary`
-// already catches (see `persona.tsx`'s identical pattern).
-import * as MediaChromeReactModule from "media-chrome/react";
-import type { ComponentProps, CSSProperties } from "react";
-
-import type { AssertAssignable } from "./_lazy-boundary-conformance";
-import type {
-  AudioPlayerControlBarProps,
-  AudioPlayerDurationDisplayProps,
-  AudioPlayerMuteButtonProps,
-  AudioPlayerPlayButtonProps,
-  AudioPlayerProps,
-  AudioPlayerSeekBackwardButtonProps,
-  AudioPlayerSeekForwardButtonProps,
-  AudioPlayerTimeDisplayProps,
-  AudioPlayerTimeRangeProps,
-  AudioPlayerVolumeRangeProps,
-} from "./audio-player";
-
-const {
-  MediaControlBar,
-  MediaController,
-  MediaDurationDisplay,
-  MediaMuteButton,
-  MediaPlayButton,
-  MediaSeekBackwardButton,
-  MediaSeekForwardButton,
-  MediaTimeDisplay,
-  MediaTimeRange,
-  MediaVolumeRange,
-} = MediaChromeReactModule;
-
-// The peer is genuinely absent (Vite's build-time stub, or any other bundler
-// that resolves an optional peer to an empty module) — surface a message
-// `isModuleNotFoundMessage` recognizes, so the caller's `renderMissing` still
-// gets the actionable "install media-chrome" copy rather than a raw
-// "MediaController is not a valid JSX element" crash.
-if (!MediaController) {
-  throw new Error("Cannot find module 'media-chrome'");
-}
-
-export const AudioPlayer = ({ children, style, ...props }: AudioPlayerProps) => (
-  <MediaController
-    audio
-    style={
-      {
-        "--media-background-color": "transparent",
-        "--media-button-icon-height": "1rem",
-        "--media-button-icon-width": "1rem",
-        "--media-control-background": "transparent",
-        "--media-control-hover-background": "var(--color-accent)",
-        "--media-control-padding": "0",
-        "--media-font": "var(--font-sans)",
-        "--media-font-size": "10px",
-        "--media-icon-color": "currentColor",
-        "--media-preview-time-background": "var(--color-background)",
-        "--media-preview-time-border-radius": "var(--radius-md)",
-        "--media-preview-time-text-shadow": "none",
-        "--media-primary-color": "var(--color-primary)",
-        "--media-range-bar-color": "var(--color-primary)",
-        "--media-range-track-background": "var(--color-secondary)",
-        "--media-secondary-color": "var(--color-secondary)",
-        "--media-text-color": "var(--color-foreground)",
-        "--media-tooltip-arrow-display": "none",
-        "--media-tooltip-background": "var(--color-background)",
-        "--media-tooltip-border-radius": "var(--radius-md)",
-        ...style,
-      } as CSSProperties
-    }
-    {...props}
-  >
-    {children}
-  </MediaController>
-);
-
-export const AudioPlayerControlBar = ({ children, ...props }: AudioPlayerControlBarProps) => (
-  <MediaControlBar {...props}>
-    <ButtonGroup orientation="horizontal">{children}</ButtonGroup>
-  </MediaControlBar>
-);
-
-export const AudioPlayerPlayButton = ({ className, ...props }: AudioPlayerPlayButtonProps) => (
-  <Button asChild size="icon-sm" variant="outline">
-    <MediaPlayButton className={cn("bg-transparent", className)} {...props} />
-  </Button>
-);
-
-export const AudioPlayerSeekBackwardButton = ({
-  seekOffset = 10,
-  ...props
-}: AudioPlayerSeekBackwardButtonProps) => (
-  <Button asChild size="icon-sm" variant="outline">
-    <MediaSeekBackwardButton seekOffset={seekOffset} {...props} />
-  </Button>
-);
-
-export const AudioPlayerSeekForwardButton = ({
-  seekOffset = 10,
-  ...props
-}: AudioPlayerSeekForwardButtonProps) => (
-  <Button asChild size="icon-sm" variant="outline">
-    <MediaSeekForwardButton seekOffset={seekOffset} {...props} />
-  </Button>
-);
-
-export const AudioPlayerTimeDisplay = ({ className, ...props }: AudioPlayerTimeDisplayProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaTimeDisplay className={cn("tabular-nums", className)} {...props} />
-  </ButtonGroupText>
-);
-
-export const AudioPlayerTimeRange = ({ className, ...props }: AudioPlayerTimeRangeProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaTimeRange className={cn("", className)} {...props} />
-  </ButtonGroupText>
-);
-
-export const AudioPlayerDurationDisplay = ({
-  className,
-  ...props
-}: AudioPlayerDurationDisplayProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaDurationDisplay className={cn("tabular-nums", className)} {...props} />
-  </ButtonGroupText>
-);
-
-export const AudioPlayerMuteButton = ({ className, ...props }: AudioPlayerMuteButtonProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaMuteButton className={cn("", className)} {...props} />
-  </ButtonGroupText>
-);
-
-export const AudioPlayerVolumeRange = ({ className, ...props }: AudioPlayerVolumeRangeProps) => (
-  <ButtonGroupText asChild className="bg-transparent">
-    <MediaVolumeRange className={cn("", className)} {...props} />
-  </ButtonGroupText>
-);
-
-/**
- * Conformance assertions (issue #101): compile-time proof that every OWNED
- * type declared in `audio-player.tsx` stays assignable to its REAL
- * `media-chrome/react` counterpart — this module still has the real values
- * (and therefore the real types) in scope, since it is the one place they are
- * allowed to be (see the module doc comment above). `AssertAssignable`'s type
- * parameter is constrained (`TOwned extends TReal`), so if a future
- * media-chrome release narrows an element's props in a way the owned type no
- * longer satisfies, ONE of these ten lines fails to typecheck — caught by
- * `pnpm --filter @elabs-ai/components-ai typecheck` locally, never shipped as
- * a silent mismatch to a consumer using the real component underneath.
- *
- * `AssertAssignable` itself is shared with `_persona-rive.tsx` via
- * `_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 these
- * owned types are — see the CHANGELOG's "Breaking (types)" entry).
- */
-export type _AudioPlayerPropsConformance = AssertAssignable<
-  AudioPlayerProps,
-  Omit<ComponentProps<typeof MediaController>, "audio">
->;
-export type _AudioPlayerControlBarPropsConformance = AssertAssignable<
-  AudioPlayerControlBarProps,
-  ComponentProps<typeof MediaControlBar>
->;
-export type _AudioPlayerPlayButtonPropsConformance = AssertAssignable<
-  AudioPlayerPlayButtonProps,
-  ComponentProps<typeof MediaPlayButton>
->;
-export type _AudioPlayerSeekBackwardButtonPropsConformance = AssertAssignable<
-  AudioPlayerSeekBackwardButtonProps,
-  ComponentProps<typeof MediaSeekBackwardButton>
->;
-export type _AudioPlayerSeekForwardButtonPropsConformance = AssertAssignable<
-  AudioPlayerSeekForwardButtonProps,
-  ComponentProps<typeof MediaSeekForwardButton>
->;
-export type _AudioPlayerTimeDisplayPropsConformance = AssertAssignable<
-  AudioPlayerTimeDisplayProps,
-  ComponentProps<typeof MediaTimeDisplay>
->;
-export type _AudioPlayerTimeRangePropsConformance = AssertAssignable<
-  AudioPlayerTimeRangeProps,
-  ComponentProps<typeof MediaTimeRange>
->;
-export type _AudioPlayerDurationDisplayPropsConformance = AssertAssignable<
-  AudioPlayerDurationDisplayProps,
-  ComponentProps<typeof MediaDurationDisplay>
->;
-export type _AudioPlayerMuteButtonPropsConformance = AssertAssignable<
-  AudioPlayerMuteButtonProps,
-  ComponentProps<typeof MediaMuteButton>
->;
-export type _AudioPlayerVolumeRangePropsConformance = AssertAssignable<
-  AudioPlayerVolumeRangeProps,
-  ComponentProps<typeof MediaVolumeRange>
->;

package/src/image.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Image } from "./image";
-
-// A tiny 1x1 solid-red PNG — enough to exercise decode + skeleton timing
-// without shipping a real asset in the story.
-const RED_DOT =
-  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC";
-
-const meta = {
-  title: "AI/Image",
-  component: Image,
-  parameters: { layout: "padded" },
-} satisfies Meta<typeof Image>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// `showSkeleton` (default `Boolean(width && height)` — true here, since both
-// are given) covers the box with a `Skeleton` until the `<img>` finishes
-// decoding, reserving the `width`/`height` box so there is no layout shift
-// (loading-states.md, interaction-guidelines.md 'Images'). Without both
-// dimensions there is no box to reserve, so the skeleton defaults off in that
-// case rather than collapsing to nothing (see the `NoSkeleton` story). The
-// Skeleton window is real-decode-timed (there is no consumer `loading` prop
-// like Gallery's — see image.tsx), so it is too fast/racy to freeze reliably
-// in a real-browser Storybook snapshot; it is instead exercised
-// deterministically in image.test.tsx (jsdom never auto-resolves `<img>`
-// loads, so the pending state holds until the test fires `load` itself).
-export const Default: Story = {
-  args: {
-    base64: RED_DOT,
-    mediaType: "image/png",
-    uint8Array: new Uint8Array(),
-    alt: "A generated red square",
-    width: 128,
-    height: 128,
-  },
-};
-
-// BROKEN — a genuinely undecodable payload settles into the `onError`
-// fallback (an `ImageOff` glyph on a muted box, sized to `width`/`height`)
-// instead of leaving the browser's native broken-image glyph bleeding through
-// a perpetually-pulsing Skeleton.
-export const Broken: Story = {
-  args: {
-    base64: "not-a-real-image",
-    mediaType: "image/png",
-    uint8Array: new Uint8Array(),
-    alt: "A generated image",
-    width: 128,
-    height: 128,
-  },
-};
-
-// Disabling `showSkeleton` opts out for a context that already has its own
-// placeholder (e.g. a Gallery tile).
-export const NoSkeleton: Story = {
-  name: "showSkeleton=false",
-  args: {
-    base64: RED_DOT,
-    mediaType: "image/png",
-    uint8Array: new Uint8Array(),
-    alt: "A generated red square",
-    width: 128,
-    height: 128,
-    showSkeleton: false,
-  },
-};

package/src/image.test.tsx

@@ -1,105 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { fireEvent, render } from "@testing-library/react";
-import { createRef } from "react";
-import { Image, type ImageProps } from "./image";
-
-const RED_DOT =
-  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC";
-
-const BASE_PROPS: Pick<ImageProps, "base64" | "mediaType" | "uint8Array"> = {
-  base64: RED_DOT,
-  mediaType: "image/png",
-  uint8Array: new Uint8Array(),
-};
-
-describe("Image", () => {
-  it("renders the img with the base64 data URI, alt, width and height", () => {
-    const { container } = render(
-      <Image {...BASE_PROPS} alt="A red square" width={64} height={64} />,
-    );
-    const img = container.querySelector("img");
-    expect(img).not.toBeNull();
-    expect(img?.getAttribute("src")).toBe(`data:image/png;base64,${RED_DOT}`);
-    expect(img?.getAttribute("alt")).toBe("A red square");
-    expect(img?.getAttribute("width")).toBe("64");
-    expect(img?.getAttribute("height")).toBe("64");
-  });
-
-  it("defaults alt to empty (decorative) rather than omitting it", () => {
-    const { container } = render(<Image {...BASE_PROPS} />);
-    expect(container.querySelector("img")?.getAttribute("alt")).toBe("");
-  });
-
-  it("forwards a ref to the underlying <img>", () => {
-    const ref = createRef<HTMLImageElement>();
-    render(<Image ref={ref} {...BASE_PROPS} />);
-    expect(ref.current).toBeInstanceOf(HTMLImageElement);
-  });
-});
-
-describe("Image showSkeleton (#269, loading-states.md)", () => {
-  it("shows a Skeleton (decorative + a live region) until onLoad fires, when width+height are given", () => {
-    const { container } = render(<Image {...BASE_PROPS} alt="" width={64} height={64} />);
-    const skeleton = container.querySelector(".animate-pulse");
-    expect(skeleton).not.toBeNull();
-    expect(skeleton).toHaveAttribute("aria-hidden", "true");
-    // Exactly one live region for the region.
-    expect(container.querySelectorAll('[role="status"]')).toHaveLength(1);
-
-    const img = container.querySelector("img")!;
-    fireEvent.load(img);
-    expect(container.querySelector(".animate-pulse")).toBeNull();
-  });
-
-  it("defaults to no skeleton (and no live region) when width/height are not given — nothing to reserve", () => {
-    const { container } = render(<Image {...BASE_PROPS} alt="" />);
-    expect(container.querySelector(".animate-pulse")).toBeNull();
-    expect(container.querySelector('[role="status"]')).toBeNull();
-  });
-
-  it("skips the skeleton entirely when showSkeleton is explicitly false, even with width+height", () => {
-    const { container } = render(
-      <Image {...BASE_PROPS} alt="" width={64} height={64} showSkeleton={false} />,
-    );
-    expect(container.querySelector(".animate-pulse")).toBeNull();
-    expect(container.querySelector('[role="status"]')).toBeNull();
-  });
-
-  it("shows the skeleton when explicitly enabled even without width/height", () => {
-    const { container } = render(<Image {...BASE_PROPS} alt="" showSkeleton />);
-    expect(container.querySelector(".animate-pulse")).not.toBeNull();
-  });
-
-  it("does not wrap the <img> in a sizing span when no skeleton is shown, so className keeps resolving against the real parent", () => {
-    const { container } = render(<Image {...BASE_PROPS} alt="" className="w-full" />);
-    expect(container.firstElementChild?.tagName).toBe("IMG");
-  });
-
-  it("calls the consumer's onLoad in addition to clearing the skeleton", () => {
-    const onLoad = vi.fn();
-    const { container } = render(
-      <Image {...BASE_PROPS} alt="" width={64} height={64} onLoad={onLoad} />,
-    );
-    fireEvent.load(container.querySelector("img")!);
-    expect(onLoad).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe("Image onError fallback (visual regression: broken image bled through the pulsing Skeleton)", () => {
-  it("replaces the img with an ImageOff fallback box instead of leaving the Skeleton pulsing forever", () => {
-    const { container } = render(<Image {...BASE_PROPS} alt="A generated image" />);
-    fireEvent.error(container.querySelector("img")!);
-    // No native <img> (and its browser broken-image glyph) remains in the DOM.
-    expect(container.querySelector("img")).toBeNull();
-    // No skeleton keeps pulsing behind a failed image.
-    expect(container.querySelector(".animate-pulse")).toBeNull();
-    expect(container.querySelector("svg")).not.toBeNull();
-  });
-
-  it("calls the consumer's onError in addition to showing the fallback", () => {
-    const onError = vi.fn();
-    const { container } = render(<Image {...BASE_PROPS} alt="" onError={onError} />);
-    fireEvent.error(container.querySelector("img")!);
-    expect(onError).toHaveBeenCalledTimes(1);
-  });
-});