@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/LauncherCard.tsx

@@ -1,50 +1,50 @@
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface LauncherCardProps extends Omit<AnchorHTMLAttributes<HTMLElement>, "title"> {
-  /** Tinted icon tile content (inline SVG). */
-  icon?: ReactNode;
-  title: ReactNode;
-  /** Trailing badge inside the title. */
-  badge?: ReactNode;
-  description?: ReactNode;
-  /** Footer text, e.g. why the card is disabled. */
-  footer?: ReactNode;
-  /** Current card (`aria-current="true"`). */
-  active?: boolean;
-  /** Not clickable (`aria-disabled`); renders a <span>. */
-  disabled?: boolean;
-}
-
-/** `.oc-launcher`: an `<a>` (with `href`), a `<button>` (with `onClick`), or a `<span>` when disabled. */
-export const LauncherCard = forwardRef<HTMLElement, LauncherCardProps>(function LauncherCard(
-  { icon, title, badge, description, footer, active, disabled, className, href, onClick, ...rest },
-  ref,
-) {
-  const content = (
-    <>
-      {icon != null && <span className="oc-launcher-icon" aria-hidden="true">{icon}</span>}
-      <h3 className="oc-launcher-title">{title}{badge != null && <> {badge}</>}</h3>
-      {description != null && <p className="oc-launcher-description">{description}</p>}
-      {footer != null && <span className="oc-launcher-footer">{footer}</span>}
-    </>
-  );
-  const cls = cx("oc-launcher", className);
-  const common = { className: cls, "aria-current": active ? ("true" as const) : undefined };
-  if (disabled) {
-    return <span ref={ref} {...common} aria-disabled="true">{content}</span>;
-  }
-  if (href === undefined && onClick) {
-    return (
-      <button ref={ref as React.Ref<HTMLButtonElement>} type="button" {...common} onClick={onClick as never}>
-        {content}
-      </button>
-    );
-  }
-  return (
-    <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} {...common} onClick={onClick} {...rest}>
-      {content}
-    </a>
-  );
-});
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface LauncherCardProps extends Omit<AnchorHTMLAttributes<HTMLElement>, "title"> {
+  /** Tinted icon tile content (inline SVG). */
+  icon?: ReactNode;
+  title: ReactNode;
+  /** Trailing badge inside the title. */
+  badge?: ReactNode;
+  description?: ReactNode;
+  /** Footer text, e.g. why the card is disabled. */
+  footer?: ReactNode;
+  /** Current card (`aria-current="true"`). */
+  active?: boolean;
+  /** Not clickable (`aria-disabled`); renders a <span>. */
+  disabled?: boolean;
+}
+
+/** `.oc-launcher`: an `<a>` (with `href`), a `<button>` (with `onClick`), or a `<span>` when disabled. */
+export const LauncherCard = forwardRef<HTMLElement, LauncherCardProps>(function LauncherCard(
+  { icon, title, badge, description, footer, active, disabled, className, href, onClick, ...rest },
+  ref,
+) {
+  const content = (
+    <>
+      {icon != null && <span className="oc-launcher-icon" aria-hidden="true">{icon}</span>}
+      <h3 className="oc-launcher-title">{title}{badge != null && <> {badge}</>}</h3>
+      {description != null && <p className="oc-launcher-description">{description}</p>}
+      {footer != null && <span className="oc-launcher-footer">{footer}</span>}
+    </>
+  );
+  const cls = cx("oc-launcher", className);
+  const common = { className: cls, "aria-current": active ? ("true" as const) : undefined };
+  if (disabled) {
+    return <span ref={ref} {...common} aria-disabled="true">{content}</span>;
+  }
+  if (href === undefined && onClick) {
+    return (
+      <button ref={ref as React.Ref<HTMLButtonElement>} type="button" {...common} onClick={onClick as never}>
+        {content}
+      </button>
+    );
+  }
+  return (
+    <a ref={ref as React.Ref<HTMLAnchorElement>} href={href} {...common} onClick={onClick} {...rest}>
+      {content}
+    </a>
+  );
+});

package/src/components/Lightbox.tsx

@@ -1,83 +1,83 @@
-// File: packages/react/src/components/Lightbox.tsx
-// Map: types -> Lightbox (thumbnails + <dialog> with a snap track of slides) -> jump-to-slide effect
-// Same markup as packages/ui/snippets/lightbox.html. Prev / next stay plain anchor links (no JS needed);
-// React only opens the dialog and scrolls to the clicked photo.
-"use client";
-
-import { forwardRef, useEffect, useId, useRef, useState } from "react";
-import type { DialogHTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-import { useDialog, useMergedRef } from "../hooks";
-import type { DialogState } from "../hooks";
-
-export interface LightboxImage {
-  /** Image URL. Leave empty to show placeholder art (`.oc-media-art`). */
-  src?: string;
-  alt: string;
-  caption?: ReactNode;
-  /** Smaller image for the thumbnail (defaults to `src`). */
-  thumb?: string;
-}
-
-export interface LightboxProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
-  images: LightboxImage[];
-  /** Text in the top bar (`oc-lightbox__title`). */
-  title?: ReactNode;
-  /** Render the thumbnail grid that opens the viewer. Default true. */
-  thumbnails?: boolean;
-}
-
-const media = (img: LightboxImage, src?: string) =>
-  src ? <img src={src} alt={img.alt} /> : <span className="oc-media-art" role="img" aria-label={img.alt} />;
-
-/** `.oc-lightbox-thumbs` + `<dialog class="oc-lightbox">`. Controlled with `open` / `onOpenChange`, or uncontrolled. */
-export const Lightbox = forwardRef<HTMLDialogElement, LightboxProps>(function Lightbox(
-  { images, title, thumbnails = true, open, defaultOpen, onOpenChange, className, "aria-label": label = "Photo viewer", ...rest },
-  forwardedRef,
-) {
-  const inner = useRef<HTMLDialogElement>(null);
-  const ref = useMergedRef(inner, forwardedRef);
-  const base = `oc-lightbox-${useId().replace(/:/g, "")}`;
-  const [start, setStart] = useState(0);
-  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
-  const single = images.length === 1;
-  const slideId = (i: number) => `${base}-${((i % images.length) + images.length) % images.length + 1}`;
-
-  // After opening: jump (without animation) to the photo that was clicked.
-  useEffect(() => {
-    if (dlg.open) document.getElementById(slideId(start))?.scrollIntoView?.({ behavior: "instant" as ScrollBehavior, block: "nearest", inline: "center" });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [dlg.open, start]);
-
-  return (
-    <>
-      {thumbnails && (
-        <div className="oc-lightbox-thumbs">
-          {images.map((img, i) => (
-            <button key={i} type="button" className="oc-lightbox-thumb" aria-label={`Open photo ${i + 1}: ${img.alt}`} onClick={() => { setStart(i); dlg.setOpen(true); }}>
-              {media(img, img.thumb ?? img.src)}
-            </button>
-          ))}
-        </div>
-      )}
-      <dialog ref={ref} className={cx("oc-lightbox", single && "oc-lightbox--single", className)} aria-label={label} {...attrs({ closedby: "any" })} {...rest} onClose={dlg.onClose}>
-        <div className="oc-lightbox__bar">
-          {title != null ? <h2 className="oc-lightbox__title">{title}</h2> : <span />}
-          <button type="button" className="oc-lightbox__close" aria-label="Close" onClick={dlg.close}>&#10005;</button>
-        </div>
-        <div className="oc-lightbox__track" tabIndex={0} aria-label="Photos, use the arrow keys">
-          {images.map((img, i) => (
-            <figure key={i} className="oc-lightbox__slide" id={slideId(i)}>
-              <div className="oc-lightbox__media">{media(img, img.src)}</div>
-              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--prev" href={`#${slideId(i - 1)}`} aria-label="Previous photo">&#8592;</a>}
-              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--next" href={`#${slideId(i + 1)}`} aria-label="Next photo">&#8594;</a>}
-              <figcaption className="oc-lightbox__caption">
-                {!single && <span className="oc-lightbox__counter">{i + 1} / {images.length}</span>} {img.caption ?? img.alt}
-              </figcaption>
-            </figure>
-          ))}
-        </div>
-      </dialog>
-    </>
-  );
-});
+// File: packages/react/src/components/Lightbox.tsx
+// Map: types -> Lightbox (thumbnails + <dialog> with a snap track of slides) -> jump-to-slide effect
+// Same markup as packages/ui/snippets/lightbox.html. Prev / next stay plain anchor links (no JS needed);
+// React only opens the dialog and scrolls to the clicked photo.
+"use client";
+
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import type { DialogHTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { useDialog, useMergedRef } from "../hooks";
+import type { DialogState } from "../hooks";
+
+export interface LightboxImage {
+  /** Image URL. Leave empty to show placeholder art (`.oc-media-art`). */
+  src?: string;
+  alt: string;
+  caption?: ReactNode;
+  /** Smaller image for the thumbnail (defaults to `src`). */
+  thumb?: string;
+}
+
+export interface LightboxProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "title" | "open" | "onClose">, DialogState {
+  images: LightboxImage[];
+  /** Text in the top bar (`oc-lightbox__title`). */
+  title?: ReactNode;
+  /** Render the thumbnail grid that opens the viewer. Default true. */
+  thumbnails?: boolean;
+}
+
+const media = (img: LightboxImage, src?: string) =>
+  src ? <img src={src} alt={img.alt} /> : <span className="oc-media-art" role="img" aria-label={img.alt} />;
+
+/** `.oc-lightbox-thumbs` + `<dialog class="oc-lightbox">`. Controlled with `open` / `onOpenChange`, or uncontrolled. */
+export const Lightbox = forwardRef<HTMLDialogElement, LightboxProps>(function Lightbox(
+  { images, title, thumbnails = true, open, defaultOpen, onOpenChange, className, "aria-label": label = "Photo viewer", ...rest },
+  forwardedRef,
+) {
+  const inner = useRef<HTMLDialogElement>(null);
+  const ref = useMergedRef(inner, forwardedRef);
+  const base = `oc-lightbox-${useId().replace(/:/g, "")}`;
+  const [start, setStart] = useState(0);
+  const dlg = useDialog(inner, { open, defaultOpen, onOpenChange });
+  const single = images.length === 1;
+  const slideId = (i: number) => `${base}-${((i % images.length) + images.length) % images.length + 1}`;
+
+  // After opening: jump (without animation) to the photo that was clicked.
+  useEffect(() => {
+    if (dlg.open) document.getElementById(slideId(start))?.scrollIntoView?.({ behavior: "instant" as ScrollBehavior, block: "nearest", inline: "center" });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dlg.open, start]);
+
+  return (
+    <>
+      {thumbnails && (
+        <div className="oc-lightbox-thumbs">
+          {images.map((img, i) => (
+            <button key={i} type="button" className="oc-lightbox-thumb" aria-label={`Open photo ${i + 1}: ${img.alt}`} onClick={() => { setStart(i); dlg.setOpen(true); }}>
+              {media(img, img.thumb ?? img.src)}
+            </button>
+          ))}
+        </div>
+      )}
+      <dialog ref={ref} className={cx("oc-lightbox", single && "oc-lightbox--single", className)} aria-label={label} {...attrs({ closedby: "any" })} {...rest} onClose={dlg.onClose}>
+        <div className="oc-lightbox__bar">
+          {title != null ? <h2 className="oc-lightbox__title">{title}</h2> : <span />}
+          <button type="button" className="oc-lightbox__close" aria-label="Close" onClick={dlg.close}>&#10005;</button>
+        </div>
+        <div className="oc-lightbox__track" tabIndex={0} aria-label="Photos, use the arrow keys">
+          {images.map((img, i) => (
+            <figure key={i} className="oc-lightbox__slide" id={slideId(i)}>
+              <div className="oc-lightbox__media">{media(img, img.src)}</div>
+              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--prev" href={`#${slideId(i - 1)}`} aria-label="Previous photo">&#8592;</a>}
+              {!single && <a className="oc-lightbox__nav oc-lightbox__nav--next" href={`#${slideId(i + 1)}`} aria-label="Next photo">&#8594;</a>}
+              <figcaption className="oc-lightbox__caption">
+                {!single && <span className="oc-lightbox__counter">{i + 1} / {images.length}</span>} {img.caption ?? img.alt}
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+      </dialog>
+    </>
+  );
+});

package/src/components/LinkArrow.tsx

@@ -1,27 +1,27 @@
-// File: packages/react/src/components/LinkArrow.tsx | Map: types -> LinkArrow (a.oc-link-arrow + modifiers)
-import { forwardRef } from "react";
-import type { AnchorHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export type LinkArrowDirection = "forward" | "back" | "external";
-
-export interface LinkArrowProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-  direction?: LinkArrowDirection;
-  tone?: "default" | "accent" | "muted";
-  size?: "sm" | "default" | "lg";
-}
-
-/** `<a class="oc-link-arrow">`: text link with an arrow that moves on hover and focus. */
-export const LinkArrow = forwardRef<HTMLAnchorElement, LinkArrowProps>(function LinkArrow(
-  { direction = "forward", tone = "default", size = "default", className, ...rest },
-  ref,
-) {
-  const classes = cx(
-    "oc-link-arrow",
-    direction !== "forward" && `oc-link-arrow--${direction}`,
-    tone !== "default" && `oc-link-arrow--${tone}`,
-    size !== "default" && `oc-link-arrow--${size}`,
-    className,
-  );
-  return <a ref={ref} className={classes} {...rest} />;
-});
+// File: packages/react/src/components/LinkArrow.tsx | Map: types -> LinkArrow (a.oc-link-arrow + modifiers)
+import { forwardRef } from "react";
+import type { AnchorHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export type LinkArrowDirection = "forward" | "back" | "external";
+
+export interface LinkArrowProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  direction?: LinkArrowDirection;
+  tone?: "default" | "accent" | "muted";
+  size?: "sm" | "default" | "lg";
+}
+
+/** `<a class="oc-link-arrow">`: text link with an arrow that moves on hover and focus. */
+export const LinkArrow = forwardRef<HTMLAnchorElement, LinkArrowProps>(function LinkArrow(
+  { direction = "forward", tone = "default", size = "default", className, ...rest },
+  ref,
+) {
+  const classes = cx(
+    "oc-link-arrow",
+    direction !== "forward" && `oc-link-arrow--${direction}`,
+    tone !== "default" && `oc-link-arrow--${tone}`,
+    size !== "default" && `oc-link-arrow--${size}`,
+    className,
+  );
+  return <a ref={ref} className={classes} {...rest} />;
+});

package/src/components/ListToolbar.tsx

@@ -1,67 +1,67 @@
-// File: packages/react/src/components/ListToolbar.tsx
-// Map: ListToolbar = toolbar row -> search -> count -> spacer -> view radios -> actions
-// The view toggle is a radio group. In React you usually render only the active view yourself
-// (use `view` + `onViewChange`); the CSS-only `.oc-list-toolbar-scope` switch also works.
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface ListToolbarView {
-  /** "cards", "table" or "list" (matches `.oc-list-toolbar-panel[data-view]`). */
-  value: string;
-  label: string;
-  icon: ReactNode;
-}
-
-export interface ListToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
-  /** Search area content, e.g. `<input class="oc-input" type="search">`. */
-  search?: ReactNode;
-  /** Result count text, e.g. "3 items". */
-  count?: ReactNode;
-  views?: ListToolbarView[];
-  view?: string;
-  defaultView?: string;
-  onViewChange?: (view: string) => void;
-  viewsLabel?: string;
-  actions?: ReactNode;
-  sticky?: boolean;
-  bordered?: boolean;
-}
-
-/** `.oc-list-toolbar`: search, count, view toggle and actions above a list. */
-export const ListToolbar = forwardRef<HTMLDivElement, ListToolbarProps>(function ListToolbar(
-  { search, count, views, view, defaultView, onViewChange, viewsLabel = "View", actions, sticky, bordered, className, ...rest },
-  ref,
-) {
-  const name = `oc-list-view-${useId().replace(/:/g, "")}`;
-  const [current, setCurrent] = useControllable(view, defaultView ?? views?.[0]?.value ?? "", onViewChange);
-  const cls = cx("oc-list-toolbar", sticky && "oc-list-toolbar--sticky", bordered && "oc-list-toolbar--bordered", className);
-  return (
-    <div ref={ref} className={cls} role="toolbar" {...rest}>
-      {search != null && <div className="oc-list-toolbar-search">{search}</div>}
-      {count != null && <span className="oc-list-toolbar-count">{count}</span>}
-      <span className="oc-list-toolbar-spacer" />
-      {views && views.length > 0 && (
-        <div className="oc-list-toolbar-views" role="radiogroup" aria-label={viewsLabel}>
-          {views.map((v) => (
-            <label className="oc-list-toolbar-view" title={v.label} key={v.value}>
-              <input
-                type="radio"
-                name={name}
-                value={v.value}
-                aria-label={v.label}
-                checked={current === v.value}
-                onChange={() => setCurrent(v.value)}
-              />
-              {v.icon}
-            </label>
-          ))}
-        </div>
-      )}
-      {actions != null && <div className="oc-list-toolbar-actions">{actions}</div>}
-    </div>
-  );
-});
+// File: packages/react/src/components/ListToolbar.tsx
+// Map: ListToolbar = toolbar row -> search -> count -> spacer -> view radios -> actions
+// The view toggle is a radio group. In React you usually render only the active view yourself
+// (use `view` + `onViewChange`); the CSS-only `.oc-list-toolbar-scope` switch also works.
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface ListToolbarView {
+  /** "cards", "table" or "list" (matches `.oc-list-toolbar-panel[data-view]`). */
+  value: string;
+  label: string;
+  icon: ReactNode;
+}
+
+export interface ListToolbarProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Search area content, e.g. `<input class="oc-input" type="search">`. */
+  search?: ReactNode;
+  /** Result count text, e.g. "3 items". */
+  count?: ReactNode;
+  views?: ListToolbarView[];
+  view?: string;
+  defaultView?: string;
+  onViewChange?: (view: string) => void;
+  viewsLabel?: string;
+  actions?: ReactNode;
+  sticky?: boolean;
+  bordered?: boolean;
+}
+
+/** `.oc-list-toolbar`: search, count, view toggle and actions above a list. */
+export const ListToolbar = forwardRef<HTMLDivElement, ListToolbarProps>(function ListToolbar(
+  { search, count, views, view, defaultView, onViewChange, viewsLabel = "View", actions, sticky, bordered, className, ...rest },
+  ref,
+) {
+  const name = `oc-list-view-${useId().replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable(view, defaultView ?? views?.[0]?.value ?? "", onViewChange);
+  const cls = cx("oc-list-toolbar", sticky && "oc-list-toolbar--sticky", bordered && "oc-list-toolbar--bordered", className);
+  return (
+    <div ref={ref} className={cls} role="toolbar" {...rest}>
+      {search != null && <div className="oc-list-toolbar-search">{search}</div>}
+      {count != null && <span className="oc-list-toolbar-count">{count}</span>}
+      <span className="oc-list-toolbar-spacer" />
+      {views && views.length > 0 && (
+        <div className="oc-list-toolbar-views" role="radiogroup" aria-label={viewsLabel}>
+          {views.map((v) => (
+            <label className="oc-list-toolbar-view" title={v.label} key={v.value}>
+              <input
+                type="radio"
+                name={name}
+                value={v.value}
+                aria-label={v.label}
+                checked={current === v.value}
+                onChange={() => setCurrent(v.value)}
+              />
+              {v.icon}
+            </label>
+          ))}
+        </div>
+      )}
+      {actions != null && <div className="oc-list-toolbar-actions">{actions}</div>}
+    </div>
+  );
+});

package/src/components/Marquee.tsx

@@ -1,38 +1,38 @@
-// File: packages/react/src/components/Marquee.tsx | Map: props -> Marquee (track with items + aria-hidden copy)
-import { forwardRef } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
-  /** Items of the strip. They are rendered twice; the copy is aria-hidden. */
-  items: ReactNode[];
-  reverse?: boolean;
-  speed?: "default" | "slow" | "fast";
-  /** Text only, no pills. */
-  plain?: boolean;
-  /** No soft fade at the edges. */
-  noFade?: boolean;
-}
-
-/** `.oc-marquee`: endless strip that pauses on hover / focus and stands still with reduced motion. */
-export const Marquee = forwardRef<HTMLDivElement, MarqueeProps>(function Marquee(
-  { items, reverse = false, speed = "default", plain = false, noFade = false, className, ...rest },
-  ref,
-) {
-  const classes = cx(
-    "oc-marquee",
-    reverse && "oc-marquee--reverse",
-    speed !== "default" && `oc-marquee--${speed}`,
-    plain && "oc-marquee--plain",
-    noFade && "oc-marquee--no-fade",
-    className,
-  );
-  return (
-    <div ref={ref} className={classes} {...rest}>
-      <div className="oc-marquee__track">
-        {items.map((item, i) => <span className="oc-marquee__item" key={i}>{item}</span>)}
-        {items.map((item, i) => <span className="oc-marquee__item" aria-hidden="true" key={`copy-${i}`}>{item}</span>)}
-      </div>
-    </div>
-  );
-});
+// File: packages/react/src/components/Marquee.tsx | Map: props -> Marquee (track with items + aria-hidden copy)
+import { forwardRef } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {
+  /** Items of the strip. They are rendered twice; the copy is aria-hidden. */
+  items: ReactNode[];
+  reverse?: boolean;
+  speed?: "default" | "slow" | "fast";
+  /** Text only, no pills. */
+  plain?: boolean;
+  /** No soft fade at the edges. */
+  noFade?: boolean;
+}
+
+/** `.oc-marquee`: endless strip that pauses on hover / focus and stands still with reduced motion. */
+export const Marquee = forwardRef<HTMLDivElement, MarqueeProps>(function Marquee(
+  { items, reverse = false, speed = "default", plain = false, noFade = false, className, ...rest },
+  ref,
+) {
+  const classes = cx(
+    "oc-marquee",
+    reverse && "oc-marquee--reverse",
+    speed !== "default" && `oc-marquee--${speed}`,
+    plain && "oc-marquee--plain",
+    noFade && "oc-marquee--no-fade",
+    className,
+  );
+  return (
+    <div ref={ref} className={classes} {...rest}>
+      <div className="oc-marquee__track">
+        {items.map((item, i) => <span className="oc-marquee__item" key={i}>{item}</span>)}
+        {items.map((item, i) => <span className="oc-marquee__item" aria-hidden="true" key={`copy-${i}`}>{item}</span>)}
+      </div>
+    </div>
+  );
+});

package/src/components/MediaCard.tsx

@@ -1,47 +1,47 @@
-// File: packages/react/src/components/MediaCard.tsx
-// Map: props -> MediaCard (MediaThumb -> body: avatar, title link + meta, menu button -> popover menu)
-// Same markup as packages/ui/snippets/media-card.html.
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { attrs, cx } from "../utils";
-import { MediaThumb } from "./MediaThumb";
-import type { MediaThumbProps } from "./MediaThumb";
-
-export interface MediaCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title: ReactNode;
-  /** Link of the title; it covers the whole card. */
-  href: string;
-  /** "Channel · 24K views · 3 days ago". */
-  meta?: ReactNode;
-  /** Initials, an <img>, or any node. Leave out for no avatar. */
-  avatar?: ReactNode;
-  /** Props for the MediaThumb on top (src, duration, progress, …). */
-  thumb?: MediaThumbProps;
-  /** Items of the ⋮ menu (`.oc-dropdown-item` elements). No menu button when empty. */
-  menu?: ReactNode;
-  compact?: boolean;
-}
-
-/** `article.oc-media-card`. */
-export const MediaCard = forwardRef<HTMLElement, MediaCardProps>(function MediaCard(
-  { title, href, meta, avatar, thumb, menu, compact, className, ...rest },
-  ref,
-) {
-  const menuId = `oc-media-card-menu-${useId().replace(/:/g, "")}`;
-  return (
-    <article ref={ref} className={cx("oc-media-card", compact && "oc-media-card--compact", className)} {...rest}>
-      <MediaThumb {...thumb} />
-      <div className="oc-media-card__body">
-        {avatar != null && <span className="oc-media-card__avatar" aria-hidden="true">{avatar}</span>}
-        <div className="oc-media-card__text">
-          <h3 className="oc-media-card__title"><a href={href}>{title}</a></h3>
-          {meta != null && <p className="oc-media-card__meta">{meta}</p>}
-        </div>
-        {menu != null && (
-          <button type="button" className="oc-media-card__menu" aria-label="More actions" {...attrs({ popovertarget: menuId })}>&#8942;</button>
-        )}
-      </div>
-      {menu != null && <div className="oc-dropdown-menu" id={menuId} {...attrs({ popover: "" })}>{menu}</div>}
-    </article>
-  );
-});
+// File: packages/react/src/components/MediaCard.tsx
+// Map: props -> MediaCard (MediaThumb -> body: avatar, title link + meta, menu button -> popover menu)
+// Same markup as packages/ui/snippets/media-card.html.
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { attrs, cx } from "../utils";
+import { MediaThumb } from "./MediaThumb";
+import type { MediaThumbProps } from "./MediaThumb";
+
+export interface MediaCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+  title: ReactNode;
+  /** Link of the title; it covers the whole card. */
+  href: string;
+  /** "Channel · 24K views · 3 days ago". */
+  meta?: ReactNode;
+  /** Initials, an <img>, or any node. Leave out for no avatar. */
+  avatar?: ReactNode;
+  /** Props for the MediaThumb on top (src, duration, progress, …). */
+  thumb?: MediaThumbProps;
+  /** Items of the ⋮ menu (`.oc-dropdown-item` elements). No menu button when empty. */
+  menu?: ReactNode;
+  compact?: boolean;
+}
+
+/** `article.oc-media-card`. */
+export const MediaCard = forwardRef<HTMLElement, MediaCardProps>(function MediaCard(
+  { title, href, meta, avatar, thumb, menu, compact, className, ...rest },
+  ref,
+) {
+  const menuId = `oc-media-card-menu-${useId().replace(/:/g, "")}`;
+  return (
+    <article ref={ref} className={cx("oc-media-card", compact && "oc-media-card--compact", className)} {...rest}>
+      <MediaThumb {...thumb} />
+      <div className="oc-media-card__body">
+        {avatar != null && <span className="oc-media-card__avatar" aria-hidden="true">{avatar}</span>}
+        <div className="oc-media-card__text">
+          <h3 className="oc-media-card__title"><a href={href}>{title}</a></h3>
+          {meta != null && <p className="oc-media-card__meta">{meta}</p>}
+        </div>
+        {menu != null && (
+          <button type="button" className="oc-media-card__menu" aria-label="More actions" {...attrs({ popovertarget: menuId })}>&#8942;</button>
+        )}
+      </div>
+      {menu != null && <div className="oc-dropdown-menu" id={menuId} {...attrs({ popover: "" })}>{menu}</div>}
+    </article>
+  );
+});