@charcuterie/ui 4.12.1 → 4.13.1

package/dist/MediaTile/MediaTile.d.ts

@@ -12,6 +12,13 @@ export type MediaTileProps = Omit<ComponentPropsWithRef<"figure">, "children"> &
     badge?: ReactNode;
     /** Shown in place of the image when it fails. */
     fallback?: ReactNode;
+    /** Untruncated content beneath the title and subtitle. No nested controls in an interactive tile. */
+    details?: ReactNode;
+    /** Keep the entire object visible, or fill the frame. */
+    imageFit?: "cover" | "contain";
+    /** Put a thumbnail beside the caption for a compact list. */
+    layout?: "vertical" | "horizontal";
+    isTitleTruncated?: boolean;
     href?: string;
     /**
      * Makes the tile a button. Hover, focus-visible and
@@ -50,5 +57,5 @@ export type MediaTileProps = Omit<ComponentPropsWithRef<"figure">, "children"> &
  * `useState<string>`, which is what makes `loaded → error`
  * impossible instead of merely unlikely — see `mediaStatus.ts`.
  */
-export declare const MediaTile: ({ alt, aspectRatio, badge, className, fallback, href, isDisabled, onClick, src, subtitle, title, ...figureProps }: MediaTileProps) => ReactNode;
+export declare const MediaTile: ({ alt, aspectRatio, badge, className, fallback, details, imageFit, layout, isTitleTruncated, href, isDisabled, onClick, src, subtitle, title, ...figureProps }: MediaTileProps) => ReactNode;
 //# sourceMappingURL=MediaTile.d.ts.map

package/dist/MediaTile/MediaTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaTile.d.ts","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,CACX,GAAG;IACF;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAA;IACpD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,GAAI,mHAavB,cAAc,KAAG,SA2KnB,CAAA"}
+{"version":3,"file":"MediaTile.d.ts","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,qBAAqB,EACrB,SAAS,EACV,MAAM,OAAO,CAAA;AAQd,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE1D,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,CACX,GAAG;IACF;;;;OAIG;IACH,GAAG,EAAE,MAAM,CAAA;IACX,WAAW,CAAC,EAAE,cAAc,CAAA;IAC5B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qGAAqG;IACrG,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IAC9B,6DAA6D;IAC7D,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAA;IAClC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAA;IACpD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,SAAS,GAAI,gKAiBvB,cAAc,KAAG,SA+MnB,CAAA"}

package/dist/MediaTile/MediaTile.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useStatus } from "@charcuterie/logic";
 import { useEffect, useRef } from "react";
+import { UnstyledLink } from "../RouterLink/UnstyledLink.js";
 import { Skeleton } from "../Skeleton/Skeleton.js";
 import { toClassName } from "../toClassName.js";
 import { mediaTransitions } from "./mediaStatus.js";
@@ -9,7 +10,7 @@ import { mediaTransitions } from "./mediaStatus.js";
  * className="block">` does not get these, which is why a
  * Collection thumbnail looked inert under the pointer.
  */
-const INTERACTIVE_CLASS = "group flex cursor-pointer flex-col rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring";
+const INTERACTIVE_CLASS = "group flex cursor-pointer rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring";
 const RATIO_CLASS = {
     // 2:3 is the standard poster trim, which is what Plex, Kavita, and
     // every physical sleeve in the collection actually are.
@@ -42,7 +43,7 @@ const RATIO_CLASS = {
  * `useState<string>`, which is what makes `loaded → error`
  * impossible instead of merely unlikely — see `mediaStatus.ts`.
  */
-export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallback, href, isDisabled = false, onClick, src, subtitle, title, ...figureProps }) => {
+export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallback, details, imageFit = "cover", layout = "vertical", isTitleTruncated = true, href, isDisabled = false, onClick, src, subtitle, title, ...figureProps }) => {
     const imageRef = useRef(null);
     const { can, reset, status, transitionTo } = useStatus({
         initialState: "loading",
@@ -51,6 +52,8 @@ export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallb
     useEffect(() => {
         // A new `src` is a new load, including after a failure.
         reset();
+        if (!src)
+            return;
         const image = imageRef.current;
         if (!image?.complete) {
             return;
@@ -67,8 +70,11 @@ export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallb
         if (can("error")) {
             transitionTo("error");
         }
-    }, [can, reset, transitionTo]);
-    const media = (_jsxs("div", { className: toClassName("relative overflow-hidden rounded-md bg-surface-sunken", RATIO_CLASS[aspectRatio]), children: [status === "error" ? (_jsx("div", { "aria-label": alt, className: "flex size-full flex-col items-center justify-center gap-1 p-2 text-center text-content-muted text-xs", role: "img", children: fallback ?? _jsx("span", { children: "Image unavailable" }) })) : (_jsxs(_Fragment, { children: [status === "loading" ? (_jsx(Skeleton, { className: "absolute inset-0 size-full" })) : null, _jsx("img", { alt: href || onClick ? "" : alt, className: toClassName("size-full object-cover transition-opacity duration-(--duration-normal) ease-standard", status === "loaded"
+    }, [can, reset, src, transitionTo]);
+    const media = (_jsxs("div", { className: toClassName("relative overflow-hidden rounded-md bg-surface-sunken", RATIO_CLASS[aspectRatio], layout === "horizontal" &&
+            "w-24 shrink-0 self-start cq-sm:w-32"), children: [!src || status === "error" ? (_jsx("div", { "aria-label": alt, className: "flex size-full flex-col items-center justify-center gap-1 p-2 text-center text-content-muted text-xs", role: "img", children: fallback ?? _jsx("span", { children: "Image unavailable" }) })) : (_jsxs(_Fragment, { children: [status === "loading" ? (_jsx(Skeleton, { className: "absolute inset-0 size-full" })) : null, _jsx("img", { alt: href || onClick ? "" : alt, className: toClassName("size-full transition-opacity duration-(--duration-normal) ease-standard", imageFit === "contain"
+                            ? "object-contain"
+                            : "object-cover", status === "loaded"
                             ? "opacity-100"
                             : "opacity-0"), decoding: "async", loading: "lazy", onError: () => {
                             if (can("error")) {
@@ -79,13 +85,21 @@ export const MediaTile = ({ alt, aspectRatio = "poster", badge, className, fallb
                                 transitionTo("loaded");
                             }
                         }, ref: imageRef, src: src })] })), badge ? (_jsx("div", { className: "absolute top-2 start-2", children: badge })) : null] }));
-    const caption = title === "" ? null : (_jsxs("figcaption", { className: "flex flex-col gap-0.5 pt-2", children: [_jsx("span", { className: "truncate font-medium text-content-primary text-sm cq-sm:text-md", children: title }), subtitle ? (_jsx("span", { className: "truncate text-content-muted text-xs", children: subtitle })) : null] }));
+    const caption = title === "" ? null : (_jsxs("figcaption", { className: toClassName("min-w-0 flex-1 flex flex-col gap-1", layout === "vertical" && "pt-2"), children: [_jsx("span", { className: toClassName("font-medium text-content-primary text-sm cq-sm:text-md", isTitleTruncated ? "truncate" : "wrap-anywhere"), title: isTitleTruncated ? title : undefined, children: title }), subtitle ? (_jsx("span", { className: "truncate text-content-muted text-xs", children: subtitle })) : null, details ? (_jsx("div", { className: "min-w-0 wrap-anywhere text-sm text-content-secondary", children: details })) : null] }));
     // An empty `title` is how a tile sits next to a name the
     // parent already printed. The control still needs a name, so
     // the alt is the fallback — wrapping it in a nameless
     // `<button>` was how Collection's cover thumbnail became
     // unfindable as well as un-hoverable.
     const accessibleName = title === "" ? alt : title;
-    return (_jsx("figure", { ...figureProps, className: toClassName("@container flex flex-col", className), children: href ? (_jsxs("a", { "aria-label": accessibleName, className: INTERACTIVE_CLASS, href: href, children: [media, caption] })) : onClick ? (_jsxs("button", { "aria-label": accessibleName, className: toClassName(INTERACTIVE_CLASS, "w-full border-0 bg-transparent p-0 text-start disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50"), disabled: isDisabled, onClick: onClick, type: "button", children: [media, caption] })) : (_jsxs(_Fragment, { children: [media, caption] })) }));
+    return (_jsx("figure", { ...figureProps, className: toClassName("@container flex", !href && !onClick
+            ? layout === "horizontal"
+                ? "flex-row gap-4"
+                : "flex-col"
+            : "flex-col", className), children: href ? (_jsxs(UnstyledLink, { "aria-label": accessibleName, className: toClassName(INTERACTIVE_CLASS, layout === "horizontal"
+                ? "flex-row gap-4"
+                : "flex-col"), href: href, children: [media, caption] })) : onClick ? (_jsxs("button", { "aria-label": accessibleName, className: toClassName(INTERACTIVE_CLASS, layout === "horizontal"
+                ? "flex-row gap-4"
+                : "flex-col", "w-full border-0 bg-transparent p-0 text-start disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50"), disabled: isDisabled, onClick: onClick, type: "button", children: [media, caption] })) : (_jsxs(_Fragment, { children: [media, caption] })) }));
 };
 //# sourceMappingURL=MediaTile.js.map

package/dist/MediaTile/MediaTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaTile.js","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MediaTile.js","sourceRoot":"","sources":["../../src/MediaTile/MediaTile.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "4.12.1",
+  "version": "4.13.1",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",
@@ -53,7 +53,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@charcuterie/logic": "2.4.0",
+    "@charcuterie/logic": "2.5.0",
     "@charcuterie/tokens": "1.10.2",
     "@floating-ui/react": "^0.27.20",
     "@tanstack/react-virtual": "^3.13.12",

package/src/MediaTile/MediaTile.mdx

@@ -54,3 +54,14 @@ The caption's type steps up past `--cq-sm`, so a tile in a dense 8-across grid a
 tile in a 3-across one are both legible.
 
 <Canvas of={MediaTileStories.Responsive} />
+
+## Cards and compact rows
+
+`layout="horizontal"` places a bounded thumbnail beside the caption. Use
+`imageFit="contain"` for product images that must remain uncropped, and
+`isTitleTruncated={false}` to wrap distinguishing model names. `details` accepts
+wrapped metadata beneath the caption; it must not contain controls when the tile is a link
+or button. Links use the shared router adapter. An absent source shows the fallback
+immediately, while a supplied source retains the loading and failure states.
+
+<Canvas of={MediaTileStories.Compact} />

package/src/MediaTile/MediaTile.stories.tsx

@@ -103,12 +103,12 @@ export const AllStates: Story = {
 
       <StoryCell
         align="stretch"
-        label="loading — skeleton holds the box"
+        label="missing — honest fallback"
       >
         <MediaTile
-          alt="Poster loading"
-          subtitle="waiting for the image"
-          title="Still loading"
+          alt="No cover added"
+          subtitle="Add a cover when one is available"
+          title="No cover"
         />
       </StoryCell>
 
@@ -225,3 +225,37 @@ export const InteractiveButton: Story = {
     title: "",
   },
 }
+
+export const Compact: Story = {
+  args: {
+    alt: "Portable field recorder",
+    aspectRatio: "square",
+    details: (
+      <>
+        <p>3 here</p>
+        <p>Audio · Portable</p>
+      </>
+    ),
+    href: "#recorder",
+    imageFit: "contain",
+    isTitleTruncated: false,
+    layout: "horizontal",
+    src: toPosterSrc("Recorder"),
+    title:
+      "Portable field recorder with interchangeable microphones",
+  },
+  render: (args) => (
+    <ContainerBoard>
+      <MediaTile {...args} />
+    </ContainerBoard>
+  ),
+}
+
+export const MissingImage: Story = {
+  args: {
+    alt: "No photo of field recorder",
+    fallback: "No photo yet",
+    title: "Field recorder",
+    aspectRatio: "video",
+  },
+}

package/src/MediaTile/MediaTile.test.tsx

@@ -1,5 +1,5 @@
 import { composeStories } from "@storybook/react"
-import { expect, userEvent } from "storybook/test"
+import { expect, userEvent, within } from "storybook/test"
 import { test } from "vitest"
 
 import { mountStory } from "../mountStory.testHelpers.ts"
@@ -55,3 +55,39 @@ test("a clickable tile is one button with a pointer cursor", async () => {
 
   await expect(button).toHaveFocus()
 })
+
+test("compact tiles contain the whole image and keep long names readable", async () => {
+  const { canvas } = await mountStory(
+    composeStories(stories).Compact,
+  )
+  const links = canvas.getAllByRole("link", {
+    name: "Portable field recorder with interchangeable microphones",
+  })
+  for (const link of links) {
+    expectAgentDrivable(
+      within(link.parentElement as HTMLElement),
+      {
+        role: "link",
+        name: "Portable field recorder with interchangeable microphones",
+      },
+    )
+    const image = link.querySelector("img")
+    await expect(image).toHaveStyle({
+      objectFit: "contain",
+    })
+    expect(link.scrollWidth).toBeLessThanOrEqual(
+      link.clientWidth,
+    )
+  }
+})
+
+test("an absent image shows the fallback without waiting for a failed request", async () => {
+  const { canvas } = await mountStory(
+    composeStories(stories).MissingImage,
+  )
+  const fallback = expectAgentDrivable(canvas, {
+    role: "img",
+    name: "No photo of field recorder",
+  })
+  await expect(fallback).toHaveTextContent("No photo yet")
+})

package/src/MediaTile/MediaTile.tsx

@@ -5,6 +5,7 @@ import type {
 } from "react"
 import { useEffect, useRef } from "react"
 
+import { UnstyledLink } from "../RouterLink/UnstyledLink.tsx"
 import { Skeleton } from "../Skeleton/Skeleton.tsx"
 import { toClassName } from "../toClassName.ts"
 import { mediaTransitions } from "./mediaStatus.ts"
@@ -26,6 +27,13 @@ export type MediaTileProps = Omit<
   badge?: ReactNode
   /** Shown in place of the image when it fails. */
   fallback?: ReactNode
+  /** Untruncated content beneath the title and subtitle. No nested controls in an interactive tile. */
+  details?: ReactNode
+  /** Keep the entire object visible, or fill the frame. */
+  imageFit?: "cover" | "contain"
+  /** Put a thumbnail beside the caption for a compact list. */
+  layout?: "vertical" | "horizontal"
+  isTitleTruncated?: boolean
   href?: string
   /**
    * Makes the tile a button. Hover, focus-visible and
@@ -46,7 +54,7 @@ export type MediaTileProps = Omit<
  * Collection thumbnail looked inert under the pointer.
  */
 const INTERACTIVE_CLASS =
-  "group flex cursor-pointer flex-col rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring"
+  "group flex cursor-pointer rounded-md outline-offset-2 hover:opacity-90 focus-visible:outline-solid focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-focus-ring"
 
 const RATIO_CLASS: Record<MediaTileRatio, string> = {
   // 2:3 is the standard poster trim, which is what Plex, Kavita, and
@@ -87,6 +95,10 @@ export const MediaTile = ({
   badge,
   className,
   fallback,
+  details,
+  imageFit = "cover",
+  layout = "vertical",
+  isTitleTruncated = true,
   href,
   isDisabled = false,
   onClick,
@@ -106,6 +118,8 @@ export const MediaTile = ({
     // A new `src` is a new load, including after a failure.
     reset()
 
+    if (!src) return
+
     const image = imageRef.current
 
     if (!image?.complete) {
@@ -126,16 +140,18 @@ export const MediaTile = ({
     if (can("error")) {
       transitionTo("error")
     }
-  }, [can, reset, transitionTo])
+  }, [can, reset, src, transitionTo])
 
   const media = (
     <div
       className={toClassName(
         "relative overflow-hidden rounded-md bg-surface-sunken",
         RATIO_CLASS[aspectRatio],
+        layout === "horizontal" &&
+          "w-24 shrink-0 self-start cq-sm:w-32",
       )}
     >
-      {status === "error" ? (
+      {!src || status === "error" ? (
         <div
           // Unconditionally an `img` carrying the same `alt`, even
           // inside a link. The link's own `aria-label` is a name from
@@ -164,7 +180,10 @@ export const MediaTile = ({
           <img
             alt={href || onClick ? "" : alt}
             className={toClassName(
-              "size-full object-cover transition-opacity duration-(--duration-normal) ease-standard",
+              "size-full transition-opacity duration-(--duration-normal) ease-standard",
+              imageFit === "contain"
+                ? "object-contain"
+                : "object-cover",
               status === "loaded"
                 ? "opacity-100"
                 : "opacity-0",
@@ -197,8 +216,19 @@ export const MediaTile = ({
 
   const caption =
     title === "" ? null : (
-      <figcaption className="flex flex-col gap-0.5 pt-2">
-        <span className="truncate font-medium text-content-primary text-sm cq-sm:text-md">
+      <figcaption
+        className={toClassName(
+          "min-w-0 flex-1 flex flex-col gap-1",
+          layout === "vertical" && "pt-2",
+        )}
+      >
+        <span
+          className={toClassName(
+            "font-medium text-content-primary text-sm cq-sm:text-md",
+            isTitleTruncated ? "truncate" : "wrap-anywhere",
+          )}
+          title={isTitleTruncated ? title : undefined}
+        >
           {title}
         </span>
 
@@ -207,6 +237,11 @@ export const MediaTile = ({
             {subtitle}
           </span>
         ) : null}
+        {details ? (
+          <div className="min-w-0 wrap-anywhere text-sm text-content-secondary">
+            {details}
+          </div>
+        ) : null}
       </figcaption>
     )
 
@@ -221,7 +256,12 @@ export const MediaTile = ({
     <figure
       {...figureProps}
       className={toClassName(
-        "@container flex flex-col",
+        "@container flex",
+        !href && !onClick
+          ? layout === "horizontal"
+            ? "flex-row gap-4"
+            : "flex-col"
+          : "flex-col",
         className,
       )}
     >
@@ -232,20 +272,28 @@ export const MediaTile = ({
         // have to know whether a subtitle happened to be rendered.
         // The `<img>` inside goes `alt=""` for the same reason: two
         // names for one link is a screen reader reading it twice.
-        <a
+        <UnstyledLink
           aria-label={accessibleName}
-          className={INTERACTIVE_CLASS}
+          className={toClassName(
+            INTERACTIVE_CLASS,
+            layout === "horizontal"
+              ? "flex-row gap-4"
+              : "flex-col",
+          )}
           href={href}
         >
           {media}
 
           {caption}
-        </a>
+        </UnstyledLink>
       ) : onClick ? (
         <button
           aria-label={accessibleName}
           className={toClassName(
             INTERACTIVE_CLASS,
+            layout === "horizontal"
+              ? "flex-row gap-4"
+              : "flex-col",
             "w-full border-0 bg-transparent p-0 text-start disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:opacity-50",
           )}
           disabled={isDisabled}

package/src/markdownEditorCodeMirror/MarkdownView.test.tsx

@@ -157,6 +157,10 @@ test("it renders what the editor renders", async () => {
 test("a link is a real anchor in the tab order", async () => {
   const { canvas } = await mountStory(Interactive)
 
+  // Markdown decorations arrive after the editor's asynchronous parse.
+  // Wait for the link before checking its accessibility and keyboard behavior.
+  await canvas.findByRole("link", { name: "the runbook" })
+
   const link = expectAgentDrivable(canvas, {
     name: "the runbook",
     role: "link",