@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/image-cropper.md

@@ -0,0 +1,52 @@
+## What it is
+
+Crop, rotate and flip an image, with the crop box reachable by pointer _and_ by four real sliders.
+
+Use it after a pick — wire it between **AssetWell**'s `@onSelect` and your upload — or wherever a stored image needs reframing. For viewing rather than editing, **ImageFrame** or **Lightbox**.
+
+## The contract
+
+```
+@src (required) — URL of the image to crop; passed through untouched
+@alt?           — alt text; an empty string marks the image decorative
+@label?         — accessible name of the crop controls. Default 'Crop'
+@aspectRatio?   — locked ratio, or 0/omitted for free
+@height?        — crop surface height in px. Default 320
+@transforms?    — offer rotate and flip. Default true
+@onChange?      — fires on every crop-box change, pointer or keyboard
+@onExport?      — fires on Export, with a PNG data URL and the box
+```
+
+**The height is reserved before the image decodes**, so nothing reflows when it lands.
+
+**The crop box is one state reachable two ways.** Pointer drag is Cropper's; the sliders are the kit's; both go through the same apply path, so they cannot disagree and there is no "keyboard mode" that behaves differently from the pointer.
+
+**`@onExport` hands back a PNG data URL.** The component does not upload, resize or re-encode to anything else — what you do with the bytes is yours.
+
+**The ratio list leads with free.** A locked ratio is a constraint you opt into rather than the default.
+
+## Prior art
+
+**Cropper.js v2** (MIT, web components), used declaratively — the custom elements are placed in the template, so there is no `new Cropper(img)`, no imperative mount and no instance to hold.
+
+Where Pretui is better: **Cropper's own `keyboard` attribute is deliberately off, and the keyboard support is better for it.** That attribute attaches a keydown listener to the _document_ — turn it on and every arrow key anywhere on the page nudges the crop box, whether or not the cropper has focus. That is not accessibility, it is a global hotkey with no owner. Four native `<input type='range'>` controls replace it, which means arrows, Shift, PageUp/PageDown, Home and End all behave the way the platform already defines them, with no re-implementation to get subtly wrong.
+
+Where it is thinner: PNG export only — no JPEG, no quality control, no output-size cap — one crop box rather than several, no straighten-by-angle beyond the rotate steps, and no zoom or pan of the source under a fixed box. There is also no round or custom-shape crop.
+
+## Accessibility
+
+- **Four real sliders, one per edge of the box** — x, y, width, height — each a native range input, so the full platform key contract comes for free.
+- **Each announces a value a human can act on**: "crop width 320 of 640 pixels" rather than a bare float. That phrasing is the difference between a usable slider and a technically-labelled one.
+- **The four sliders are in a `role='group'` named by `@label`**, so they are announced as one control rather than as four loose ranges.
+- **The ratio chips are a `role='group'` labelled "Crop ratio"**, each with `aria-pressed`, so the current lock is announced rather than shown only as a highlighted chip.
+- **`@alt` with an empty string marks the image decorative**, which is right when the surrounding UI already says what is being cropped.
+- **The error state carries a hidden glyph and visible text.**
+- **No document-level key handling.** Focus decides what responds to the keyboard, which is the invariant the upstream's `keyboard` attribute breaks.
+
+## Theming
+
+`--pretui-crop-h` (the reserved surface height, from `@height`), `--pretui-destructive-ink` (the error state), `--pretui-shadow-hairline`.
+
+The crop surface itself — the grid, the shading outside the box, the handles — comes from Cropper's own elements, which is the one part of this component a theme does not reach. The chrome around it, the ratio chips and the sliders are the kit's and follow the theme normally, so the editor reads as part of the product even though the crop surface is the library's.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/image-cropper.usage.gts

@@ -0,0 +1,108 @@
+// Pretui — ImageCropper usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { ImageCropper } from './image-cropper';
+import type { CropBox } from './image-cropper';
+import { platePoster } from '../media-examples';
+import { Token } from './token';
+
+// ── ImageCropper ─────────────────────────────────────────────────────────
+const CROP_SOURCE = platePoster('Kandy plate 04', '1600 / 1067');
+
+/** Google's own sample model. Networked, and the one thing on these pages
+ * that is. */
+
+class ImageCropperUsage extends Component {
+  src = CROP_SOURCE;
+
+  @tracked height = 320;
+  @tracked transforms = true;
+  @tracked box = '—';
+
+  setHeight = (v: number | null) => (this.height = v ?? 320);
+  setTransforms = (v: boolean) => (this.transforms = v);
+  noteBox = (b: CropBox) => (this.box = `${b.width}×${b.height} @ ${b.x},${b.y}`);
+
+  get usage(): string {
+    return [
+      '<ImageCropper',
+      '  @src={{this.src}}',
+      "  @alt='Kandy plate 04'",
+      '  @onChange={{this.noteBox}}',
+      '  @onExport={{this.save}}',
+      '/>',
+    ].join('\n');
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='ImageCropper'
+      @description="Cropper.js 2.1.1 (MIT, vendored at ./cropper) is a Web Component suite in v2, so the crop surface is plain tags in a Glimmer template — no `new Cropper(img)` and no instance to hold. The interesting decision is what was left OFF: Cropper's own `keyboard` attribute attaches a keydown listener to the DOCUMENT, so every arrow key anywhere on the page nudges the crop box whether or not the cropper has focus. That is a global hotkey with no owner, not accessibility. It is off, and the four range sliders below are the keyboard path instead — native inputs, so arrows, Shift, PageUp/PageDown, Home and End all behave the way the platform already defines, and each announces something a person can act on. Drag the box with a pointer and watch the sliders follow: one state, two ways in."
+      @source={{this.usage}}
+    >
+      <:example>
+        <ImageCropper
+          @src={{this.src}}
+          @alt='Kandy plate 04 — a generated stand-in plate'
+          @height={{this.height}}
+          @transforms={{this.transforms}}
+          @onChange={{this.noteBox}}
+        />
+        <p class='dm-readout'>
+          <span class='dm-readoutLabel'>@onChange</span>
+          <Token @value={{this.box}} />
+        </p>
+      </:example>
+
+      <:api as |Args|>
+        <Args.String
+          @name='src'
+          @value={{this.src}}
+          @description='URL of the image. A generated SVG here, so the page crops something real with no network.'
+          @hideControls={{true}}
+        />
+        <Args.String
+          @name='alt'
+          @value='Kandy plate 04'
+          @description='Alt text. An empty string marks the image decorative.'
+          @hideControls={{true}}
+        />
+        <Args.Number
+          @name='height'
+          @value={{this.height}}
+          @min={{160}}
+          @max={{560}}
+          @defaultValue={{320}}
+          @description='Height of the crop surface in px, reserved before the image decodes so the toolbar below does not jump down the page when it lands.'
+          @onInput={{this.setHeight}}
+        />
+        <Args.Bool
+          @name='transforms'
+          @value={{this.transforms}}
+          @defaultValue={{true}}
+          @description='Offer rotate and flip alongside the ratio chips.'
+          @onInput={{this.setTransforms}}
+        />
+        <Args.Number
+          @name='aspectRatio'
+          @value={{0}}
+          @description='Lock the box to a ratio; 0 or omitted is free. The chips set the same state, so a caller-locked ratio and a user-chosen one are the same thing.'
+          @hideControls={{true}}
+        />
+        <Args.Action
+          @name='onChange'
+          @description='({x, y, width, height}) on every change, from pointer or slider.'
+        />
+        <Args.Action
+          @name='onExport'
+          @description='(dataUrl, box) when Export is pressed. A PNG data URL, never an object URL — nothing to revoke means nothing to leak. A cross-origin source taints the canvas and lands on the error line instead, which is a real and common outcome rather than a hypothetical.'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_IMAGE_CROPPER: Record<string, unknown> = {
+  ImageCropper: ImageCropperUsage,
+};

package/bundled-realms/pretui/components/image-frame.gts

@@ -0,0 +1,91 @@
+// Pretui — ImageFrame: a framed still that reserves its aspect ratio and carries real alt text.
+import Component from '@glimmer/component';
+import { cssStyle } from '../pretui-css';
+import { Token } from './token';
+import type { ResolvedMediaAsset } from '../internal/media-viewer';
+
+/**
+ * A framed still. Deliberately small: zooming and cropping belong to Lightbox
+ * (PhotoSwipe) and ImageCropper (Cropper.js). What this DOES do is the part
+ * those libraries do not — reserve the
+ * exact aspect ratio before the bytes arrive, so nothing reflows, and carry
+ * real alt text.
+ */
+export interface ImageFrameSignature {
+  Args: { asset: ResolvedMediaAsset };
+  Element: HTMLDivElement;
+}
+
+export class ImageFrame extends Component<ImageFrameSignature> {
+  /** Validate-or-drop through the shared guard rather than interpolating a
+   * caller string into a style attribute. `undefined` when the ratio does not
+   * pass, so the frame keeps the stylesheet's own `auto`. */
+  get style() {
+    return cssStyle('--pretui-frame-aspect', this.args.asset.aspectRatio);
+  }
+  get alt(): string {
+    return this.args.asset.alt ?? this.args.asset.label;
+  }
+  get dims(): string {
+    const { width, height } = this.args.asset;
+    return width && height ? `${width} × ${height}` : '';
+  }
+
+  <template>
+    <div
+      class='pretui-frame'
+      style={{this.style}}
+      data-test-pretui-image-frame
+      ...attributes
+    >
+      <img
+        class='pretui-frame-img'
+        src={{@asset.src}}
+        alt={{this.alt}}
+        width={{@asset.width}}
+        height={{@asset.height}}
+        loading='lazy'
+        decoding='async'
+      />
+      {{#if this.dims}}
+        <p class='pretui-frame-meta'>
+          <Token @value={{this.dims}} />
+        </p>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      @layer PretComponent {
+        .pretui-frame {
+          --pretui-frame-aspect: auto;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          min-width: 0;
+        }
+        .pretui-frame-img {
+          display: block;
+          width: 100%;
+          height: auto;
+          /* Reserved BEFORE the bytes arrive — the Law-8 corollary. When the
+             caller gave no dimensions this collapses to `auto` and the
+             intrinsic size takes over, which is the honest degrade. */
+          aspect-ratio: var(--pretui-frame-aspect);
+          object-fit: contain;
+          background: color-mix(
+            in oklch,
+            var(--foreground) 6%,
+            var(--card)
+          );
+          border-radius: var(--radius);
+          box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+        }
+        .pretui-frame-meta {
+          margin: 0;
+          font-size: var(--text-ui-sm, 11.5px);
+          color: var(--muted-foreground);
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/image-frame.md

@@ -0,0 +1,42 @@
+## What it is
+
+The image adapter: a still picture with its aspect ratio reserved before the bytes arrive, real alt text, and its pixel dimensions printed underneath as a machine value.
+
+It is what **MediaViewer** renders for an `image` asset, and it takes a resolved asset rather than loose args — so you rarely construct one directly. Reach for it when you have a `ResolvedMediaAsset` in hand and want the image without the router.
+
+## The contract
+
+```
+@asset (required) — a ResolvedMediaAsset: src, label, alt?, width?, height?
+```
+
+One arg. Everything the frame renders is derived from it.
+
+**The aspect ratio is reserved as a custom property before the image loads**, which is what stops the picture's arrival from reflowing the page. The ratio comes from the resolved asset — `width / height`, rounded — and goes through the kit's CSS guard rather than being interpolated. A ratio that does not pass the guard is dropped entirely, so the frame falls back to the stylesheet's own `auto` instead of carrying half a declaration.
+
+**Alt text falls back to the label.** `asset.alt` wins; without it the frame uses the asset's resolved label, which is the caller's `name` or the basename of the URL. That is a worse alt text than a real one and better than an empty attribute on a content image.
+
+**Dimensions are shown only when both are known**, rendered through **Token** as `800 × 600` — a machine value in the mono treatment, not prose.
+
+**The image is lazy-loaded and asynchronously decoded**, and carries its intrinsic `width` and `height` attributes as well as the CSS ratio, so the browser can reserve space even before the stylesheet applies.
+
+## Prior art
+
+A kit addition — the adapter **MediaViewer** routes image assets to. The comparison is against the bare `<img>` a call site would otherwise write, and the three things it tends to get wrong: no reserved space, so the page jumps when the image arrives; alt text omitted entirely rather than derived from something; and dimensions either absent or rendered as prose.
+
+Where it is thinner: there is no fit or crop control — the frame does not take `object-fit`, a focal point, or a max height — no zoom, and no loading or error state of its own. A broken image renders as the browser's broken-image affordance with the alt text beside it. **ImageCropper** owns framing, **Lightbox** owns zoom.
+
+## Accessibility
+
+- **The alt text always exists**, because it falls back to the label rather than to nothing. Worth being explicit about the consequence: a decorative image passed through this frame will be announced by its filename, which is noise. This component assumes its image is content — if it is decoration, it is the wrong component.
+- **The reserved ratio is an accessibility feature, not only a visual one.** Content that reflows under a reader who is partway down the page is the same failure whether they are using a screen magnifier or not, and reserving the box removes it.
+- **The dimensions line is a `<p>` containing a Token**, so it is announced as text after the image rather than being conveyed by the image's own name.
+- **Nothing here is focusable**, which is correct: a still image with no zoom has nothing to operate.
+
+## Theming
+
+`--pretui-frame-aspect` (the reserved ratio, written per instance and defaulting to `auto` in the stylesheet), plus `--pretui-shadow-hairline` shared across this module.
+
+The 8px gap between picture and dimensions is fixed. The dimensions themselves inherit **Token**'s treatment, so a theme that retunes the mono jewelry retunes this line with it rather than needing a frame-specific value.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/image-frame.usage.gts

@@ -0,0 +1,28 @@
+// Pretui — ImageFrame usage page.
+import Component from '@glimmer/component';
+import { FreestyleUsage } from './freestyle-usage';
+import { ImageFrame } from './image-frame';
+
+const IMAGE_ASSET = {
+  src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='960' height='540' viewBox='0 0 960 540'%3E%3Crect width='960' height='540' fill='%23e7ece7'/%3E%3Cpath d='M0 390C190 285 340 440 520 330S790 260 960 350V540H0Z' fill='%23b8cbb7'/%3E%3Cpath d='M0 430C210 350 350 485 575 390S820 330 960 410V540H0Z' fill='%238ca98c'/%3E%3Ccircle cx='760' cy='130' r='58' fill='%23fff8d7'/%3E%3C/svg%3E",
+  label: 'Tea terraces at first light',
+  alt: 'Layered green tea terraces beneath a pale morning sun',
+  kind: 'image' as const,
+  width: 960,
+  height: 540,
+  aspectRatio: '16 / 9',
+};
+
+class ImageFrameUsage extends Component {
+  asset = IMAGE_ASSET;
+  <template>
+    <FreestyleUsage @name='ImageFrame' @description='A still-image frame that reserves intrinsic aspect ratio before bytes arrive and carries real alt text plus dimensions.' @source='<ImageFrame @asset={{this.asset}} />' @viewportMode='wide'>
+      <:example><ImageFrame @asset={{this.asset}} /></:example>
+      <:api as |Args|><Args.Object @name='asset' @value={{this.asset}} /></:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_IMAGE_FRAME: Record<string, unknown> = {
+  ImageFrame: ImageFrameUsage,
+};

package/bundled-realms/pretui/components/image.gts

@@ -0,0 +1,326 @@
+// Pretui — Image: an image in a reserved frame, with a load state, a fallback and an optional preview.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+// type-only gap: 'ember-modifier' resolves at realm runtime; glint cannot see
+// it here (accepted parse baseline, same as toaster.gts / focus.gts)
+import { modifier } from 'ember-modifier';
+import { AspectRatio } from './aspect-ratio';
+import { Dialog } from './dialog';
+
+export type ImageStatus = 'loading' | 'loaded' | 'error';
+
+interface LoadAttempt {
+  for: string | undefined;
+  triedFallback: boolean;
+  failed: boolean;
+  loaded: boolean;
+}
+
+function freshAttempt(src: string | undefined): LoadAttempt {
+  return { for: src, triedFallback: false, failed: false, loaded: false };
+}
+
+export interface ImageSignature {
+  Args: {
+    src?: string;
+    /**
+     * Required. The image's accessible name, or `''` for a decorative image.
+     * There is no default: an omitted alt is a decision nobody made.
+     */
+    alt: string;
+    /** The ratio to reserve, a number or `'16 / 9'`. Defaults to `@width / @height`, then 4 / 3. */
+    ratio?: number | string;
+    /** `cover` (default) crops to the frame; `contain` letterboxes. */
+    fit?: 'cover' | 'contain';
+    /** Intrinsic pixel size; also the ratio when `@ratio` is absent. */
+    width?: number;
+    height?: number;
+    /** `lazy` (default) or `eager`. */
+    loading?: 'lazy' | 'eager';
+    /** A second source tried once when `@src` fails. */
+    fallback?: string;
+    /** Click or Enter opens the image larger in a dialog. */
+    preview?: boolean;
+    /** The preview button's name prefix (default 'View larger'). */
+    previewLabel?: string;
+    /** Corner radius, any kit-valid CSS length. */
+    radius?: string;
+    /** Draw the kit hairline around the frame. */
+    bordered?: boolean;
+    /** Fires whenever the load state changes. */
+    onStatusChange?: (status: ImageStatus) => void;
+  };
+  Blocks: {
+    /** What shows when every source has failed. Defaults to a glyph and the alt text. */
+    fallback: [];
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * The public image agents reach for. AspectRatio is the frame it sits in:
+ * the ratio is reserved before the bytes arrive, so nothing reflows (Law 8).
+ * On top of that frame it adds what every React kit's Image adds — a load
+ * state, a fallback source, a failure face that is not the browser's broken
+ * icon, and a preview.
+ *
+ * ImageFrame is the media adapter MediaViewer renders a resolved asset with,
+ * dimensions caption included. Image takes plain args and is the one to use
+ * in a card.
+ */
+export class Image extends Component<ImageSignature> {
+  // The load state belongs to one `@src`: a new source starts fresh.
+  @tracked private attempt: LoadAttempt = freshAttempt(undefined);
+  @tracked previewOpen = false;
+
+  private get current(): LoadAttempt {
+    return this.attempt.for === this.args.src ? this.attempt : freshAttempt(this.args.src);
+  }
+  private update(change: Partial<LoadAttempt>) {
+    this.attempt = { ...this.current, ...change };
+  }
+
+  get currentSrc(): string | undefined {
+    return this.current.triedFallback ? this.args.fallback : this.args.src;
+  }
+  get status(): ImageStatus {
+    if (this.current.failed || !this.currentSrc) {
+      return 'error';
+    }
+    return this.current.loaded ? 'loaded' : 'loading';
+  }
+  get errored(): boolean {
+    return this.status === 'error';
+  }
+  get ratio(): number | string {
+    if (this.args.ratio !== undefined) {
+      return this.args.ratio;
+    }
+    let { width, height } = this.args;
+    return width && height ? `${width} / ${height}` : '4 / 3';
+  }
+  get alt(): string {
+    return (this.args.alt ?? '').trim();
+  }
+  get previewName(): string {
+    let prefix = this.args.previewLabel ?? 'View larger';
+    return this.alt ? `${prefix}: ${this.alt}` : prefix;
+  }
+  get canPreview(): boolean {
+    return (this.args.preview ?? false) && this.status === 'loaded';
+  }
+
+  private report() {
+    this.args.onStatusChange?.(this.status);
+  }
+
+  private settle(img: HTMLImageElement) {
+    if (img.naturalWidth > 0) {
+      if (!this.current.loaded) {
+        this.update({ loaded: true });
+        this.report();
+      }
+    } else {
+      this.fail();
+    }
+  }
+
+  private fail() {
+    // a fallback identical to the source would never fire a second error
+    let fallback = this.args.fallback;
+    if (!this.current.triedFallback && fallback && fallback !== this.args.src) {
+      this.update({ triedFallback: true, loaded: false });
+    } else {
+      this.update({ failed: true, loaded: false });
+    }
+    this.report();
+  }
+
+  onLoad = (event: Event) => {
+    this.settle(event.currentTarget as HTMLImageElement);
+  };
+  onError = () => {
+    this.fail();
+  };
+
+  /** A cached image can finish before the listeners exist; read its state once they do. */
+  watchComplete = modifier((img: HTMLImageElement) => {
+    if (img.complete && img.currentSrc) {
+      queueMicrotask(() => this.settle(img));
+    }
+  });
+
+  openPreview = () => {
+    this.previewOpen = true;
+  };
+  closePreview = () => {
+    this.previewOpen = false;
+  };
+
+  <template>
+    <AspectRatio
+      @ratio={{this.ratio}}
+      @radius={{@radius}}
+      @bordered={{@bordered}}
+      class='pretui-image'
+      data-status={{this.status}}
+      data-fit={{if @fit @fit 'cover'}}
+      data-test-pretui-image
+      ...attributes
+    >
+      {{#if this.errored}}
+        <div class='pretui-image-fallback' data-test-pretui-image-fallback>
+          {{#if (has-block 'fallback')}}
+            {{yield to='fallback'}}
+          {{else}}
+            <svg class='pretui-image-broken' width='20' height='20' viewBox='0 0 20 20' aria-hidden='true'><path
+                d='M3 4h14v12H3zM3 13l4-4 3 3 2-2 5 5M13 7.5a1 1 0 1 0 0 .01'
+                fill='none'
+                stroke='currentColor'
+                stroke-width='1.4'
+                stroke-linejoin='round'
+              /></svg>
+            {{#if this.alt}}<span class='pretui-image-alt' role='img' aria-label={{this.alt}}>{{this.alt}}</span>{{/if}}
+          {{/if}}
+        </div>
+      {{else if @preview}}
+        <button
+          type='button'
+          class='pretui-image-trigger'
+          aria-label={{this.previewName}}
+          aria-haspopup='dialog'
+          disabled={{if this.canPreview false true}}
+          data-test-pretui-image-preview-trigger
+          {{on 'click' this.openPreview}}
+        >
+          <img
+            class='pretui-image-img'
+            src={{this.currentSrc}}
+            alt=''
+            width={{@width}}
+            height={{@height}}
+            loading={{if @loading @loading 'lazy'}}
+            decoding='async'
+            data-test-pretui-image-img
+            {{on 'load' this.onLoad}}
+            {{on 'error' this.onError}}
+            {{this.watchComplete}}
+          />
+        </button>
+      {{else}}
+        <img
+          class='pretui-image-img'
+          src={{this.currentSrc}}
+          alt={{this.alt}}
+          width={{@width}}
+          height={{@height}}
+          loading={{if @loading @loading 'lazy'}}
+          decoding='async'
+          data-test-pretui-image-img
+          {{on 'load' this.onLoad}}
+          {{on 'error' this.onError}}
+          {{this.watchComplete}}
+        />
+      {{/if}}
+    </AspectRatio>
+    {{#if @preview}}
+      <Dialog
+        @open={{this.previewOpen}}
+        @onClose={{this.closePreview}}
+        @label={{if this.alt this.alt 'Image preview'}}
+        @size='l'
+        data-test-pretui-image-preview
+      >
+        <:default>
+          {{#if this.previewOpen}}
+            <img class='pretui-image-large' src={{this.currentSrc}} alt={{this.alt}} />
+          {{/if}}
+        </:default>
+      </Dialog>
+    {{/if}}
+    <style scoped>
+      /* above AspectRatio's layer, so these win by layer order, not file order */
+      @layer PretComponent, PretComposite;
+      @layer PretComposite {
+        .pretui-image-img {
+          display: block;
+          inline-size: 100%;
+          block-size: 100%;
+          object-fit: cover;
+          opacity: 1;
+          transition: opacity var(--pretui-dur-enter, 220ms) var(--pretui-ease-enter, ease-out);
+        }
+        .pretui-image[data-fit='contain'] .pretui-image-img {
+          object-fit: contain;
+        }
+        .pretui-image[data-status='loading'] .pretui-image-img {
+          opacity: 0;
+        }
+        .pretui-image[data-status='loading'] {
+          background-image: linear-gradient(
+            100deg,
+            transparent 30%,
+            color-mix(in oklch, var(--card) 55%, transparent) 50%,
+            transparent 70%
+          );
+          background-size: 200% 100%;
+          animation: pretui-image-shimmer 1.4s linear infinite;
+        }
+        .pretui-image-trigger {
+          display: block;
+          inline-size: 100%;
+          block-size: 100%;
+          padding: 0;
+          border: 0;
+          background: none;
+          cursor: zoom-in;
+        }
+        .pretui-image-trigger:disabled {
+          cursor: default;
+        }
+        .pretui-image-trigger:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: -2px;
+        }
+        .pretui-image-fallback {
+          display: grid;
+          place-content: center;
+          justify-items: center;
+          gap: var(--space-2, 0.375rem);
+          padding: var(--space-4, 0.6875rem);
+          color: var(--muted-foreground);
+          text-align: center;
+        }
+        .pretui-image-alt {
+          font-size: var(--text-ui-sm, 0.72rem);
+          max-inline-size: 28ch;
+          overflow-wrap: anywhere;
+        }
+        .pretui-image-large {
+          display: block;
+          max-inline-size: 100%;
+          max-block-size: 75vh;
+          margin-inline: auto;
+          object-fit: contain;
+        }
+        @keyframes pretui-image-shimmer {
+          from {
+            background-position: 150% 0;
+          }
+          to {
+            background-position: -50% 0;
+          }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-image[data-status='loading'] {
+            animation: none;
+          }
+          .pretui-image-img {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}