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

package/bundled-realms/pretui/components/angle-dial.usage.gts

@@ -0,0 +1,166 @@
+// Pretui — AngleDial usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { AngleDial } from './angle-dial';
+import type { AngleUnit } from './angle-dial';
+
+// ── AngleDial ────────────────────────────────────────────────────────────
+const ANGLE_UNITS = ['deg', 'rad', 'turn'];
+
+class AngleDialUsage extends Component {
+  unitOptions = ANGLE_UNITS;
+
+  @tracked degrees = 45;
+  @tracked unit = 'deg';
+  @tracked snap = 15;
+  @tracked step = 1;
+  @tracked precision = 1;
+  @tracked showDial = true;
+  @tracked showInput = true;
+  @tracked rotations = true;
+  @tracked disabled = false;
+
+  set = (v: number) => (this.degrees = v);
+  setUnit = (v: string) => (this.unit = v);
+  setSnap = (v: number) => (this.snap = v);
+  setStep = (v: number) => (this.step = v);
+  setPrecision = (v: number) => (this.precision = v);
+  setDial = (v: boolean) => (this.showDial = v);
+  setInput = (v: boolean) => (this.showInput = v);
+  setRotations = (v: boolean) => (this.rotations = v);
+  setDisabled = (v: boolean) => (this.disabled = v);
+
+  get unitVal() {
+    return this.unit as AngleUnit;
+  }
+  get usage() {
+    return (
+      "<AngleDial @label='Rotation' @value={{this.degrees}}" +
+      (this.unit === 'deg' ? '' : " @unit='" + this.unit + "'") +
+      ' @rotations={{true}} @onInput={{this.set}} />'
+    );
+  }
+  <template>
+    <FreestyleUsage
+      @name='AngleDial'
+      @description='A circular angle dial paired with a numeric field. Dragging accumulates the SHORTEST signed delta each frame, so winding clockwise through 359°→1° adds +2 rather than −358 — which is what lets the value pass 360° and keep going, and what the ×N rotation badge counts. Shift snaps to 15° while dragging; arrows step, Shift/Alt change the rate, Home/End go to the bounds. Ported from figui3 fig-input-angle.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='pretui-angle-demo'>
+          <AngleDial
+            @label='Rotation'
+            @value={{this.degrees}}
+            @unit={{this.unitVal}}
+            @snap={{this.snap}}
+            @step={{this.step}}
+            @precision={{this.precision}}
+            @showDial={{this.showDial}}
+            @showInput={{this.showInput}}
+            @rotations={{this.rotations}}
+            @disabled={{this.disabled}}
+            @onInput={{this.set}}
+          />
+          <p class='pretui-demo-readout' data-test-angle-readout>
+            {{this.degrees}}° stored (the model is always degrees)
+          </p>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.Number
+          @name='value'
+          @value={{this.degrees}}
+          @description='Angle in DEGREES, always — @unit is a display concern only. Unbounded unless @min/@max are given, so 765 stays 765.'
+          @onInput={{this.set}}
+        />
+        <Args.String
+          @name='unit'
+          @defaultValue='deg'
+          @value={{this.unit}}
+          @options={{this.unitOptions}}
+          @description='Display unit for the paired field. figui3 stores the value in this unit, which silently re-interprets the model when it changes; here the conversion is one documented function at the edge.'
+          @onInput={{this.setUnit}}
+        />
+        <Args.Number
+          @name='snap'
+          @defaultValue={{15}}
+          @value={{this.snap}}
+          @min={{0}}
+          @max={{90}}
+          @description='Degrees the dial snaps to while Shift is held during a drag. 0 disables snapping.'
+          @onInput={{this.setSnap}}
+        />
+        <Args.Number
+          @name='step'
+          @defaultValue={{1}}
+          @value={{this.step}}
+          @description='Degrees per arrow press, before the shared Shift ×10 / Alt ×0.1 multipliers.'
+          @onInput={{this.setStep}}
+        />
+        <Args.Number
+          @name='precision'
+          @defaultValue={{1}}
+          @value={{this.precision}}
+          @min={{0}}
+          @max={{4}}
+          @onInput={{this.setPrecision}}
+        />
+        <Args.Bool
+          @name='showDial'
+          @defaultValue={{true}}
+          @value={{this.showDial}}
+          @description='Render the circular dial.'
+          @onInput={{this.setDial}}
+        />
+        <Args.Bool
+          @name='showInput'
+          @defaultValue={{true}}
+          @value={{this.showInput}}
+          @description='Render the paired ScrubInput — the exact-value path.'
+          @onInput={{this.setInput}}
+        />
+        <Args.Bool
+          @name='rotations'
+          @defaultValue={{false}}
+          @value={{this.rotations}}
+          @description='Show the ×N badge AND fold the turn count into aria-valuetext, so a screen-reader user can tell 45° from 765°. Upstream renders the badge but never announces it.'
+          @onInput={{this.setRotations}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @defaultValue={{false}}
+          @value={{this.disabled}}
+          @onInput={{this.setDisabled}}
+        />
+        <Args.Number @name='min' @description='Lower bound. Omit for an unbounded, winding dial.' />
+        <Args.Number @name='max' @description='Upper bound.' />
+        <Args.Action @name='onInput' @description='Continuous, in degrees.' />
+        <Args.Action @name='onChange' @description='Committed, in degrees.' />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='pretui-dial-size'
+          @type='length'
+          @description='Diameter of the dial. Coarse pointers floor it at 44px regardless.'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <style scoped>
+      .pretui-angle-demo {
+        max-width: 220px;
+      }
+      .pretui-demo-readout {
+        margin: 8px 0 0;
+        font-family: var(--font-mono);
+        font-size: var(--text-ui-xs, 11px);
+        color: var(--muted-foreground);
+        font-variant-numeric: tabular-nums;
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_ANGLE_DIAL: Record<string, unknown> = {
+  AngleDial: AngleDialUsage,
+};

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

@@ -0,0 +1,291 @@
+// Pretui — AnimatedImage: an animated image with a pause control that respects reduced motion.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { prefersReducedMotion } from '../internal/structure-morph';
+
+// ── AnimatedImage ────────────────────────────────────────────────────────
+
+/**
+ * Pairs the `<img>` with a `<canvas>` that holds one frozen frame.
+ *
+ * The mechanism, and the one thing worth knowing about it: pausing does NOT
+ * stop the image. Browsers expose no way to pause an animated GIF or WEBP,
+ * and the two workarounds both lose the reader's place — reassigning `src`
+ * restarts from frame 0, and `display: none` stops it in some engines and
+ * not others. So the canvas is painted with the current frame and laid over
+ * the image. Resuming is therefore SEAMLESS: the animation the reader comes
+ * back to is the one that would have been playing, not a rewind.
+ *
+ * The cost is honest and worth stating: a paused image still decodes. If
+ * that matters more than seamless resume, the caller should unrender the
+ * component.
+ */
+const framePause = modifier(
+  (root: HTMLElement, [playing, _src]: [boolean, string]) => {
+    let image = root.querySelector('img');
+    let canvas = root.querySelector('canvas');
+    if (!image || !canvas) {
+      return;
+    }
+    let img = image;
+    let target = canvas;
+
+    let freeze = () => {
+      if (!img.complete || img.naturalWidth === 0) {
+        root.dataset['frame'] = 'pending';
+        return;
+      }
+      target.width = img.naturalWidth;
+      target.height = img.naturalHeight;
+      let context = target.getContext('2d');
+      if (!context) {
+        return;
+      }
+      try {
+        context.drawImage(img, 0, 0);
+      } catch {
+        // A cross-origin image without CORS headers taints the canvas.
+        // drawImage itself is allowed, but be defensive: if anything here
+        // throws, fall back to simply letting the image play rather than
+        // showing a blank white box over it.
+        root.dataset['frame'] = 'unavailable';
+        return;
+      }
+      root.dataset['frame'] = 'frozen';
+    };
+
+    // The image may not have decoded yet on first render — freeze once it
+    // has, so a component that starts paused (which it does under reduced
+    // motion) still shows a frame rather than nothing.
+    let onLoad = () => {
+      if (!playing) {
+        freeze();
+      }
+    };
+    img.addEventListener('load', onLoad);
+
+    if (playing) {
+      root.dataset['frame'] = 'playing';
+    } else {
+      freeze();
+    }
+
+    return () => {
+      img.removeEventListener('load', onLoad);
+    };
+  },
+);
+
+export interface AnimatedImageSignature {
+  Args: {
+    /** Source of the animated image (GIF, animated WEBP, animated PNG). */
+    src: string;
+    /** Alternative text. Required, and required to describe the CONTENT —
+     * "an animation of…" is what the control beside it already says. */
+    alt: string;
+    /** Controlled playback. Omit for uncontrolled. */
+    playing?: boolean;
+    /** Initial playback for the uncontrolled case. Defaults to `false` when
+     * the reader has asked for reduced motion and `true` otherwise. */
+    defaultPlaying?: boolean;
+    /** Fires with the next playback state on every change. */
+    onPlayingChange?: (playing: boolean) => void;
+    /** Hide the built-in control. Only do this when the caller supplies its
+     * own — an animation with no pause fails WCAG 2.2.2. */
+    hideControl?: boolean;
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * An animated image that can actually be stopped.
+ *
+ * ```hbs
+ * <AnimatedImage @src={{this.loopUrl}} @alt='The kettle coming to boil' />
+ * ```
+ *
+ * Better than the inspiration (`wa-animated-image`): upstream always
+ * autoplays, which is a WCAG 2.2.2 failure the moment the loop runs past
+ * five seconds and a `prefers-reduced-motion` failure regardless. Here the
+ * default respects the reader's stated preference, the control is a real
+ * `<button>` with a name that changes with its state (not an icon with a
+ * fixed label), the playing state is announced politely, and pause is
+ * frame-accurate rather than a restart.
+ */
+export class AnimatedImage extends Component<AnimatedImageSignature> {
+  @tracked private internalPlaying: boolean | undefined = undefined;
+
+  get playing(): boolean {
+    if (this.args.playing !== undefined) {
+      return this.args.playing;
+    }
+    if (this.internalPlaying !== undefined) {
+      return this.internalPlaying;
+    }
+    return this.args.defaultPlaying ?? !prefersReducedMotion();
+  }
+
+  get controlLabel(): string {
+    return this.playing ? 'Pause animation' : 'Play animation';
+  }
+
+  get status(): string {
+    return this.playing ? 'Animation playing' : 'Animation paused';
+  }
+
+  toggle = () => {
+    let next = !this.playing;
+    if (this.args.playing === undefined) {
+      this.internalPlaying = next;
+    }
+    this.args.onPlayingChange?.(next);
+  };
+
+  <template>
+    <div
+      class='pretui-animated'
+      data-playing={{if this.playing 'true' 'false'}}
+      data-test-pretui-animated-image
+      {{framePause this.playing @src}}
+      ...attributes
+    >
+      <img class='pretui-animated-img' src={{@src}} alt={{@alt}} />
+      {{! The frozen frame. aria-hidden because the <img> beside it already
+          carries the alternative text — announcing both is a stutter. }}
+      <canvas class='pretui-animated-canvas' aria-hidden='true'></canvas>
+
+      {{#unless @hideControl}}
+        <button
+          type='button'
+          class='pretui-animated-control'
+          aria-label={{this.controlLabel}}
+          data-test-pretui-animated-toggle
+          {{on 'click' this.toggle}}
+        >
+          <span
+            class='pretui-animated-glyph'
+            data-glyph={{if this.playing 'pause' 'play'}}
+            aria-hidden='true'
+          ></span>
+        </button>
+      {{/unless}}
+
+      <p class='pretui-sr' role='status'>{{this.status}}</p>
+    </div>
+
+    <style scoped>
+      @layer PretComponent {
+        .pretui-animated {
+          position: relative;
+          display: block;
+          inline-size: fit-content;
+          max-inline-size: 100%;
+          border-radius: var(--radius-surface, 10px);
+          overflow: hidden;
+          background: var(--muted);
+          box-shadow: var(
+            --pretui-shadow-hairline,
+            0 0 0 1px var(--border)
+          );
+          font-family: var(--font-sans);
+        }
+        .pretui-animated-img {
+          display: block;
+          max-inline-size: 100%;
+          block-size: auto;
+        }
+        .pretui-animated-canvas {
+          position: absolute;
+          inset: 0;
+          inline-size: 100%;
+          block-size: 100%;
+          opacity: 0;
+          pointer-events: none;
+        }
+        /* The canvas only covers the image once it actually holds a frame —
+           `pending` and `unavailable` both leave the live image showing rather
+           than painting a blank rectangle over it. */
+        .pretui-animated[data-playing='false'] .pretui-animated-canvas {
+          opacity: 1;
+        }
+        .pretui-animated[data-playing='false'][data-frame='pending']
+          .pretui-animated-canvas,
+        .pretui-animated[data-playing='false'][data-frame='unavailable']
+          .pretui-animated-canvas {
+          opacity: 0;
+        }
+        .pretui-animated-control {
+          position: absolute;
+          inset-block-end: var(--space-3, 8px);
+          inset-inline-start: var(--space-3, 8px);
+          inline-size: 34px;
+          block-size: 34px;
+          display: grid;
+          place-items: center;
+          border: 0;
+          border-radius: 999px;
+          background: color-mix(in oklch, var(--card) 84%, transparent);
+          color: var(--foreground);
+          box-shadow: var(
+            --pretui-shadow-control,
+            0 0 0 1px var(--border),
+            0 1px 2px rgb(0 0 0 / 0.3)
+          );
+          cursor: pointer;
+          backdrop-filter: blur(6px);
+        }
+        @media (any-pointer: coarse) {
+          .pretui-animated-control {
+            inline-size: 44px;
+            block-size: 44px;
+          }
+        }
+        .pretui-animated-control:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        /* CSS glyphs rather than svg: lint's require-presentational-children
+           rejects any <svg> inside a button subtree. */
+        .pretui-animated-glyph {
+          position: relative;
+          inline-size: 12px;
+          block-size: 12px;
+        }
+        .pretui-animated-glyph[data-glyph='play'] {
+          inline-size: 0;
+          block-size: 0;
+          border-block-start: 6px solid transparent;
+          border-block-end: 6px solid transparent;
+          border-inline-start: 10px solid currentColor;
+          margin-inline-start: 3px;
+        }
+        .pretui-animated-glyph[data-glyph='pause']::before,
+        .pretui-animated-glyph[data-glyph='pause']::after {
+          content: '';
+          position: absolute;
+          inset-block: 0;
+          inline-size: 4px;
+          background: currentColor;
+          border-radius: 1px;
+        }
+        .pretui-animated-glyph[data-glyph='pause']::before {
+          inset-inline-start: 0;
+        }
+        .pretui-animated-glyph[data-glyph='pause']::after {
+          inset-inline-end: 0;
+        }
+        .pretui-sr {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          overflow: hidden;
+          clip: rect(0 0 0 0);
+          white-space: nowrap;
+          margin: 0;
+        }
+      }
+    </style>
+  </template>
+}

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

@@ -0,0 +1,49 @@
+## What it is
+
+An animated image — GIF, animated WEBP, animated PNG — that can actually be stopped.
+
+Browsers expose no pause API for animated images, which is why almost every one on the web runs until the page closes. This component supplies the missing control, and it is the component to reach for whenever an animation is content rather than decoration.
+
+## The contract
+
+```
+@src (required)   — source of the animated image
+@alt (required)   — alternative text, describing the CONTENT
+@playing?         — controlled playback; omit for uncontrolled
+@defaultPlaying?  — initial playback; defaults to false under reduced motion, true otherwise
+@onPlayingChange? — fires with the next playback state
+@hideControl?     — hide the built-in control
+```
+
+**Pausing paints the current frame onto a canvas and lays it over the image.** That is what makes resuming frame-accurate rather than a rewind. The two common workarounds both lose the reader's place: reassigning `src` restarts the animation, and `display: none` discards it.
+
+**It starts paused when the reader has asked for reduced motion.** Not merely pausable — paused, on first paint, without anyone touching the control.
+
+**`@alt` must describe the content, not the medium.** "An animation of…" is what the control beside it already says.
+
+**`@hideControl` is for callers supplying their own, and nothing else.** An animation with no pause affordance fails WCAG 2.2.2.
+
+## Prior art
+
+**Web Awesome's `wa-animated-image`** is the source — the same frozen-frame trick, re-cut on this kit's bones.
+
+Where Pretui is better: **reduced-motion users get a still frame by default.** The upstream honours its own control but not the media query, so a reader who has asked the whole operating system for less motion still gets an animation until they find the button. That is the difference between a pause affordance and an accessible animation. The control is also the kit's own button with the kit's tone tokens rather than a bespoke shadow-DOM one, and `@onPlayingChange` lets a gallery coordinate several.
+
+Where it is thinner: no scrubbing, no frame count, no loop count or "play once" mode, and no poster — the first paint is the image's own first frame, paused or not. There is also no lazy decode: the animated source loads whether or not it will play.
+
+## Accessibility
+
+- **WCAG 2.2.2 is the requirement this component exists to meet**: anything that moves for more than five seconds must be pausable. Hiding the control without replacing it re-breaks that.
+- **Reduced motion is honoured at the default, not only at the control.** This is the part upstream skips, and it is the part that matters for a reader who never interacts.
+- **The frozen-frame canvas is `aria-hidden`.** It is a visual stand-in for the image beside it and must not be announced as a second graphic.
+- **The state change is announced through a polite `role='status'` line**, so pressing the control tells a screen-reader user what happened rather than leaving the change silent.
+- **The control's accessible name follows the state** — it says what pressing it will do — and its glyph is `aria-hidden`, so the meaning is never carried by a symbol alone.
+- **`@alt` is required by the type.** An undescribed animation is worse than an undescribed still, because the reader cannot even tell what they are missing.
+
+## Theming
+
+The control rides the kit's shared surface and shadow tokens — `--pretui-shadow-control` for the button, `--pretui-shadow-hairline` for the frame — rather than carrying a token surface of its own.
+
+That is deliberate: an animated image should look like an image with a button on it, not like a media player. A theme retunes the button everywhere and this follows, so the pause control here matches the controls on every other overlay in the product.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

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

@@ -0,0 +1,127 @@
+// Pretui — AnimatedImage usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { AnimatedImage } from './animated-image';
+
+// ── AnimatedImage ────────────────────────────────────────────────────────
+function animatedSvg(): string {
+  let svg = [
+    "<svg xmlns='http://www.w3.org/2000/svg' width='320' height='200' viewBox='0 0 320 200'>",
+    "<rect width='320' height='200' fill='#17161c'/>",
+    '<style>',
+    '@keyframes rise { 0% { transform: scaleY(0.15) } 50% { transform: scaleY(1) } 100% { transform: scaleY(0.15) } }',
+    '.b { transform-origin: 0 160px; animation: rise 1.6s ease-in-out infinite }',
+    '.b2 { animation-delay: -0.2s } .b3 { animation-delay: -0.4s }',
+    '.b4 { animation-delay: -0.6s } .b5 { animation-delay: -0.8s }',
+    '</style>',
+    "<g fill='#10b981'>",
+    "<rect class='b b1' x='40' y='40' width='34' height='120'/>",
+    "<rect class='b b2' x='92' y='40' width='34' height='120'/>",
+    "<rect class='b b3' x='144' y='40' width='34' height='120'/>",
+    "<rect class='b b4' x='196' y='40' width='34' height='120'/>",
+    "<rect class='b b5' x='248' y='40' width='34' height='120'/>",
+    '</g>',
+    "<rect x='40' y='160' width='242' height='2' fill='#6b7280'/>",
+    '</svg>',
+  ].join('');
+  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+}
+
+const ANIMATED_SRC = animatedSvg();
+
+export class AnimatedImageUsage extends Component {
+  @tracked playing = true;
+  @tracked hideControl = false;
+
+  src = ANIMATED_SRC;
+
+  setPlaying = (v: boolean) => {
+    this.playing = v;
+  };
+  setHideControl = (v: boolean) => {
+    this.hideControl = v;
+  };
+  onPlayingChange = (v: boolean) => {
+    this.playing = v;
+  };
+
+  get usage(): string {
+    return [
+      '<AnimatedImage',
+      '  @src={{this.loopUrl}}',
+      "  @alt='The kettle coming to boil'",
+      '/>',
+    ].join('\n');
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='AnimatedImage'
+      @description='An animated image that can actually be stopped. Pausing paints the current frame onto a canvas and lays it over the image, so resuming is frame-accurate rather than a rewind — browsers expose no pause API, and both common workarounds (reassigning src, display:none) lose the reader’s place. It starts PAUSED when the reader has asked for reduced motion, which is the WCAG 2.2.2 behaviour the upstream component skips.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='animated-stage'>
+          <AnimatedImage
+            @src={{this.src}}
+            @alt='Five bars rising and falling in sequence'
+            @playing={{this.playing}}
+            @onPlayingChange={{this.onPlayingChange}}
+            @hideControl={{this.hideControl}}
+          />
+          <p class='animated-note'>Pause and resume: the bars pick up exactly
+            where the eye left them. The fixture is a self-contained animated
+            SVG — no network, no licence, and byte-identical on every
+            machine.</p>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='src'
+          @description='Source of the animated image — GIF, animated WEBP, animated PNG, or an animated SVG.'
+        />
+        <Args.String
+          @name='alt'
+          @description='Alternative text. Required, and required to describe the CONTENT — “an animation of…” is what the control beside it already says.'
+        />
+        <Args.Bool
+          @name='playing'
+          @description='Controlled playback. Omit for uncontrolled; the uncontrolled default is false under prefers-reduced-motion and true otherwise.'
+          @defaultValue={{true}}
+          @value={{this.playing}}
+          @onInput={{this.setPlaying}}
+        />
+        <Args.Action
+          @name='onPlayingChange'
+          @description='Fires with the next playback state on every change.'
+        />
+        <Args.Bool
+          @name='hideControl'
+          @description='Hide the built-in control. Only do this when the caller supplies its own — an animation with no pause fails WCAG 2.2.2.'
+          @defaultValue={{false}}
+          @value={{this.hideControl}}
+          @onInput={{this.setHideControl}}
+        />
+      </:api>
+    </FreestyleUsage>
+
+    <style scoped>
+      .animated-stage {
+        display: grid;
+        gap: var(--space-3, 8px);
+        justify-items: start;
+      }
+      .animated-note {
+        margin: 0;
+        max-inline-size: 52ch;
+        font-size: var(--text-ui-xs, 11px);
+        color: var(--muted-foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_ANIMATED_IMAGE: Record<string, unknown> = {
+  AnimatedImage: AnimatedImageUsage,
+};

package/bundled-realms/pretui/components/app-shell.gts

@@ -0,0 +1,19 @@
+// Pretui — AppShell: the Mantine / Ant Layout name for PageScaffold.
+//
+// Mantine AppShell and Ant Layout are the five regions PageScaffold already
+// has — header, navbar, main, aside, footer — with the same landmarks, so
+// AppShell is PageScaffold re-exported under that name, not a wrapper.
+// A wrapper with Mantine's argument shape would be worse than none: Glimmer
+// cannot conditionally forward a named block, so it would make PageScaffold
+// emit empty <nav>, <aside> and <footer> landmarks for regions the caller
+// never supplied. Collapse belongs to Sidebar inside the navigation block.
+//
+//   Mantine / Ant                       →  Pretui
+//   ─────────────────────────────────────────────────────────────────────
+//   AppShell.Header  / Layout.Header    →  <:masthead>
+//   AppShell.Navbar  / Layout.Sider     →  <:navigation>, Sidebar inside it
+//   AppShell.Main    / Layout.Content   →  the default block
+//   AppShell.Aside                      →  <:aside>
+//   AppShell.Footer  / Layout.Footer    →  <:footer>
+//   AppShell.Section grow               →  a Stack cell with flex: 1
+export { PageScaffold as AppShell } from './page-scaffold';