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

package/bundled-realms/pretui/components/reorder.usage.gts

@@ -0,0 +1,171 @@
+// Pretui — demo-controls-reorder: freestyle usage pages for Reorder and
+// ActionBar. Knob sets derived from each component's Pretui signature.
+//
+// The Reorder page is written so the keyboard path can be exercised without
+// a mouse at all: Tab to a handle, Enter to pick the row up, arrows to move
+// it, Enter to drop, Escape to put it back. The live-region text is mirrored
+// on screen underneath, so a reviewer can SEE what a screen reader would
+// hear — the part of this component that is otherwise unreviewable.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { FreestyleUsage } from './freestyle-usage';
+import { Button } from './button';
+import { Reorder } from './reorder';
+import { TEAS } from '../examples-kit';
+
+// ── Reorder ─────────────────────────────────────────────────────────────
+class ReorderDemo extends Component {
+  @tracked items: string[] = TEAS.slice(0, 6);
+  @tracked label = 'Cupping order';
+  @tracked disabled = false;
+  @tracked lastMove = 'No moves yet.';
+
+  setLabel = (v: string) => (this.label = v);
+  setDisabled = (v: boolean) => (this.disabled = v);
+
+  keyFor = (item: string) => item;
+  labelFor = (item: string) => item;
+
+  onReorder = (next: string[], from: number, to: number) => {
+    this.items = next;
+    this.lastMove =
+      'Moved from position ' + (from + 1) + ' to position ' + (to + 1) + '.';
+  };
+
+  reset = () => {
+    this.items = TEAS.slice(0, 6);
+    this.lastMove = 'Reset.';
+  };
+
+  get orderText(): string {
+    return this.items.join(' · ');
+  }
+
+  get usage(): string {
+    return (
+      '<Reorder @items={{this.teas}} @label=' +
+      "'" +
+      this.label +
+      "'" +
+      ' @keyFor={{this.keyFor}} @labelFor={{this.labelFor}}' +
+      ' @onReorder={{this.reorder}} as |tea|>{{tea}}</Reorder>'
+    );
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='Reorder'
+      @description='Rearrange a list by dragging a handle, or from the keyboard with exactly equal capability. It consumes the kit shared drag foundation from design-tools (pointer capture, and keyboardNudge for the key map) rather than adding a third drag engine. Focus a handle, press Enter or Space to pick the row up, move it with the arrows, drop with Enter, cancel with Escape.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='pretui-reorder-demo'>
+          <Reorder
+            @items={{this.items}}
+            @label={{this.label}}
+            @disabled={{this.disabled}}
+            @keyFor={{this.keyFor}}
+            @labelFor={{this.labelFor}}
+            @onReorder={{this.onReorder}}
+            as |tea index|
+          >
+            <span class='pretui-reorder-demo-row'>
+              <span class='pretui-reorder-demo-rank'>{{index}}</span>
+              <span class='pretui-reorder-demo-name'>{{tea}}</span>
+            </span>
+          </Reorder>
+          <p class='pretui-reorder-demo-note'>{{this.lastMove}}</p>
+          <p class='pretui-reorder-demo-order'>{{this.orderText}}</p>
+          <Button
+            @size='xs'
+            @appearance='outlined'
+            {{on 'click' this.reset}}
+          >Reset order</Button>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.Array
+          @name='items'
+          @required={{true}}
+          @description='The list, in its current order. Reorder never mutates it — onReorder receives a new array.'
+        />
+        <Args.String
+          @name='label'
+          @value={{this.label}}
+          @defaultValue='Reorderable list'
+          @description='Accessible name for the list.'
+          @onInput={{this.setLabel}}
+        />
+        <Args.Bool
+          @name='disabled'
+          @value={{this.disabled}}
+          @defaultValue={{false}}
+          @description='Dimmed; neither pointer nor keyboard can move a row.'
+          @onInput={{this.setDisabled}}
+        />
+        <Args.Action
+          @name='keyFor'
+          @description='A stable key per item. Without one, moving a row re-creates every row after it and focus is lost mid-drag.'
+        />
+        <Args.Action
+          @name='labelFor'
+          @description='The row name used for the handle accessible name and for every announcement.'
+        />
+        <Args.Action
+          @name='onReorder'
+          @description='Receives the reordered list plus where the row came from and went. Called once per completed move, never during one.'
+        />
+        <Args.Yield
+          @name='default'
+          @description='The row content, receiving the item and its index. Only the handle starts a drag, so controls in the row keep their own focus.'
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='pretui-reorder-handle-size'
+          @type='dimension'
+          @description='The drag handle box on a fine pointer.'
+        />
+        <Css.Basic
+          @name='pretui-reorder-handle-touch'
+          @type='dimension'
+          @description='The handle box on a coarse pointer, where 44px is the floor.'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <style scoped>
+      .pretui-reorder-demo {
+        display: grid;
+        gap: var(--space-3, 8px);
+        justify-items: start;
+        max-width: 420px;
+      }
+      .pretui-reorder-demo-row {
+        display: flex;
+        align-items: baseline;
+        gap: var(--space-3, 8px);
+      }
+      .pretui-reorder-demo-rank {
+        font-family: var(--font-mono);
+        font-size: var(--text-ui-xs, 11px);
+        font-variant-numeric: tabular-nums;
+        color: var(--muted-foreground);
+      }
+      .pretui-reorder-demo-name {
+        font-size: var(--text-ui-md, 12.5px);
+        color: var(--foreground);
+      }
+      .pretui-reorder-demo-note,
+      .pretui-reorder-demo-order {
+        margin: 0;
+        font-size: var(--text-ui-sm, 11.5px);
+        color: var(--muted-foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_CONTROLS_REORDER: Record<string, unknown> = {
+  Reorder: ReorderDemo,
+};

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

@@ -0,0 +1,2 @@
+// Pretui — Resizable: The shadcn name for SplitPanes.
+export { SplitPanes as Resizable } from './split-panes';

package/bundled-realms/pretui/components/resizable.md

@@ -0,0 +1,37 @@
+## What it is
+
+**Resizable** is **SplitPanes** under the shadcn name (shadcn `Resizable` is built on `react-resizable-panels`). The export is the same component. Import it when a port already says Resizable; the **SplitPanes** writeup carries the depth. It lays out two or more panes with draggable handles between them, on boxel-ui's ResizablePanelGroup engine.
+
+## The contract
+
+```
+@orientation? ('horizontal' | 'vertical'; default 'horizontal')
+@reverseCollapse?   — double-click collapse folds the last pane instead of the first
+@onLayoutChange?    — called with the pane sizes, as percentages
+<:default as |Panel Handle|>
+Element: HTMLDivElement
+```
+
+Identical to SplitPanes. The block yields the Panel and Handle components. A Panel takes `defaultSize`, `minSize`, `maxSize` and `collapsible` args.
+
+## Prior art
+
+**shadcn `ResizablePanelGroup` / `ResizablePanel` / `ResizableHandle`** map one to one onto SplitPanes and its yielded `Panel` / `Handle`. shadcn takes `direction` where SplitPanes takes `@orientation`, and `onLayout` where it takes `@onLayoutChange`. `react-resizable-panels` also has `autoSaveId` to persist sizes, which SplitPanes does not: persist the `@onLayoutChange` sizes yourself and pass them back as `@defaultSize`.
+
+## Accessibility
+
+Identical to SplitPanes. A handle is an interactive `separator` with `aria-valuenow` for its position. All of that belongs to boxel-ui's engine rather than this wrapper, so check that each handle is keyboard reachable and operable in your boxel-ui version. A drag-only divider fails WCAG 2.1.1.
+
+## Theming
+
+Identical to SplitPanes: `--foreground`, `--muted-foreground`, `--primary` (the active handle), `--text-ui-md` and `--track-ui`, plus boxel-ui's `--boxel-panel-resize-handle-*` properties on the handle.
+
+## React ecosystem
+
+| shadcn                            | Pretui                                         |
+| --------------------------------- | ---------------------------------------------- |
+| `<ResizablePanelGroup direction>` | `<Resizable @orientation as \|Panel Handle\|>` |
+| `<ResizablePanel defaultSize>`    | `<Panel @defaultSize>`                         |
+| `<ResizableHandle withHandle />`  | `<Handle />`                                   |
+| `onLayout`                        | `@onLayoutChange`                              |
+| `autoSaveId`                      | not supported; persist `@onLayoutChange`       |

package/bundled-realms/pretui/components/resizable.usage.gts

@@ -0,0 +1,53 @@
+// Pretui — Resizable usage page.
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { FreestyleUsage } from './freestyle-usage';
+import { Resizable } from './resizable';
+
+const SOURCE = `<Resizable as |Panel Handle|>
+  <Panel @defaultSize={{40}}>…</Panel>
+  <Handle />
+  <Panel @defaultSize={{60}}>…</Panel>
+</Resizable>`;
+
+const ResizableUsage: TemplateOnlyComponent = <template>
+  <FreestyleUsage
+    @name='Resizable'
+    @description='SplitPanes under the shadcn name: panes with draggable handles between them, on the boxel-ui ResizablePanelGroup engine. Import it when a port already says Resizable; the component and its writeup are SplitPanes.'
+    @source={{SOURCE}}
+  >
+    <:example>
+      <div class='rz-demo-host'>
+        <Resizable as |Panel Handle|>
+          <Panel @defaultSize={{40}}><div class='rz-demo-fill'>Lots</div></Panel>
+          <Handle />
+          <Panel @defaultSize={{60}}><div class='rz-demo-fill'>Roast profile</div></Panel>
+        </Resizable>
+      </div>
+    </:example>
+    <:api as |Args|>
+      <Args.String @name='orientation' @defaultValue='horizontal' @description='horizontal lays panes left to right.' />
+      <Args.Bool @name='reverseCollapse' @defaultValue={{false}} @description='Double-click collapse folds the last pane instead of the first.' />
+      <Args.Action @name='onLayoutChange' @description='Called with the pane sizes as percentages.' />
+      <Args.Yield @name='default' @description='Yields the Panel and Handle components.' />
+    </:api>
+  </FreestyleUsage>
+  <style scoped>
+    .rz-demo-host {
+      block-size: 10rem;
+      border-radius: var(--radius-surface, 10px);
+      box-shadow: 0 0 0 1px var(--border);
+      overflow: hidden;
+    }
+    .rz-demo-fill {
+      display: grid;
+      place-items: center;
+      block-size: 100%;
+      font-size: var(--text-ui-md, 0.78rem);
+      color: var(--muted-foreground);
+    }
+  </style>
+</template>;
+
+export const DEMOS_RESIZABLE: Record<string, unknown> = {
+  Resizable: ResizableUsage,
+};

package/bundled-realms/pretui/components/result-card.gts

@@ -0,0 +1,68 @@
+// Pretui — ResultCard: the settled outcome of an agent run.
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+
+export interface ResultCardSignature {
+  Args: { eyebrow?: string; title: string; lines?: string[]; onMenu?: () => void };
+  Element: HTMLDivElement;
+}
+
+// What you approve is card-shaped, never a JSON blob.
+export class ResultCard extends Component<ResultCardSignature> {
+  menu = () => this.args.onMenu?.();
+  <template>
+    <div class='pretui-resultcard' data-test-pretui-result-card ...attributes>
+      <div class='pretui-resultcard-head'>
+        {{#if @eyebrow}}<span class='pretui-eyebrow'>{{@eyebrow}}</span>{{/if}}
+        <span class='pretui-resultcard-title'>{{@title}}</span>
+        {{#if @onMenu}}
+          <button type='button' class='pretui-resultcard-menu' aria-label='More' {{on 'click' this.menu}}>⋯</button>
+        {{/if}}
+      </div>
+      {{#each @lines as |line|}}<div class='pretui-resultcard-line'>{{line}}</div>{{/each}}
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-resultcard {
+          background: var(--field, var(--boxel-light));
+          border-radius: 8px;
+          box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
+          padding: 9px 11px;
+          display: flex;
+          flex-direction: column;
+          gap: 3px;
+        }
+        .pretui-resultcard-head {
+          display: flex;
+          align-items: baseline;
+          gap: 8px;
+        }
+        .pretui-resultcard-title {
+          font-weight: 600;
+          font-size: var(--text-ui-md, 12.5px);
+        }
+        .pretui-eyebrow {
+          font-family: var(--font-mono);
+          font-size: var(--text-ui-xs, 11px);
+          font-weight: 500;
+          letter-spacing: var(--track-eyebrow, 0.08em);
+          text-transform: uppercase;
+          color: var(--muted-foreground);
+        }
+        .pretui-resultcard-menu {
+          margin-left: auto;
+          color: var(--ink-3, var(--boxel-400));
+          cursor: pointer;
+          letter-spacing: 0.1em;
+          border: 0;
+          background: none;
+          font: inherit;
+        }
+        .pretui-resultcard-line {
+          font-size: var(--text-ui-sm, 11.5px);
+          color: var(--muted-foreground);
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/result-card.md

@@ -0,0 +1,45 @@
+## What it is
+
+What an agent produced, as a small card: an eyebrow, a title, a few lines, and an overflow menu. Use it when a run yields an artifact worth surfacing — a file it wrote, a record it created, a summary it generated. If you are showing a _change_ rather than a product, **DiffBlock**. If you are showing progress, **WorkItem**. If the result is a real Boxel card, **FittedCard** renders the card itself and is the better choice.
+
+## The contract
+
+```
+@eyebrow?, @title (required), @lines?: string[], @onMenu?
+```
+
+**`@lines` is an array of strings, not a block.** That is the constraining decision: a ResultCard cannot contain arbitrary markup, so it cannot grow into a mini-dashboard inside a transcript. Three or four lines of plain text, and anything richer is a different component. In a territory whose failure mode is transcript rows competing with each other for attention, that is a discipline rather than a limitation.
+
+**The overflow menu is a single `@onMenu` callback**, not a **Menu**. The `⋯` button calls you and you decide what opens. That keeps the card free of dropdown machinery and means a transcript of forty results is not forty **Menu** instances — but it also means the affordance is a button that _looks_ like a menu trigger and has none of the semantics (see below).
+
+`@eyebrow` uses the kit's mono uppercase voice, shared with **Panel**, **Toolbar** and **DataGrid** headers.
+
+## Prior art
+
+Nothing in a component library corresponds. The references are product surfaces: Claude Code's file-write summaries, ChatGPT's canvas cards, Slack's unfurl blocks, and Linear's inline entity previews.
+
+The comparison worth drawing is against **Slack's Block Kit unfurls**, which is the most mature version of "a small card summarising an artefact inside a conversation". Block Kit lets an unfurl contain fields, images, buttons and accessories — and the result is that conversations fill with rich blocks that dominate the messages around them. Pretui's `@lines: string[]` is the deliberate opposite bet, and in a territory where the transcript is the primary reading surface it is the better one.
+
+Where it is thin, and these are real: **no link or click target on the card itself** (a result you cannot open is a dead end — the menu is the only affordance), **no icon or thumbnail**, **no state** (a result that has since been deleted or superseded has no way to say so), and **no relationship to the WorkItem that produced it**.
+
+## Accessibility
+
+No pattern governs it; it is a small content card with one button.
+
+Gaps, and the menu button is the clearest:
+
+- **The `⋯` button is labeled `aria-label="More"` and nothing else.** It carries no `aria-haspopup`, no `aria-expanded`, and — because the menu is the caller's — nothing connects it to whatever it opens. "More" also does not say more _about what_: on a transcript with eight results, eight buttons all announce identically. `aria-label="More actions for {{@title}}"` would fix the second problem; `aria-haspopup="menu"` plus `aria-expanded` managed by the caller would fix the first. Note **Menu** in this kit has the same wiring gap, so composing them does not resolve it.
+- **The card has no accessible name or grouping.** Eyebrow, title and lines are sibling elements, so a screen-reader user hears them as one run with no indication that they form a unit or where it ends. `role="group"` with `aria-labelledby` pointing at the title would give it a boundary — worth doing precisely because a transcript is a long series of these.
+- **The title is not a heading**, so a transcript of results has no structure to navigate by. Same gap as **Panel**, **Toolbar**, **EmptyState** and **Stat** — the kit needs an authorable heading level.
+- **The eyebrow is announced as loose text before the title**, so the title alone is often not self-describing.
+- **No announcement when a result appears.** An agent producing output mid-run is a status message (**WCAG 4.1.3**); nothing here or in the territory announces it. This is the territory-wide gap that **ApprovalFooter** and **AgentQuestion** also have.
+- **`@lines` are plain strings**, so a line containing a path or an id gets no `<code>` treatment and is announced as prose — **Token** exists for exactly that and cannot be used here.
+- Target size: the `⋯` button should be checked against WCAG **2.5.8**'s 24×24 minimum; overflow affordances are conventionally small.
+
+## Theming
+
+`--card` (the surface), `--border` and `--pretui-shadow-card` (its edge), `--foreground` (title), `--muted-foreground` (eyebrow and lines), `--font-mono` + `--text-ui-xs` + `--track-eyebrow` (the eyebrow voice), `--hover` (the menu button's hover), `--text-ui-md`.
+
+Because the surface is `--card` and it sits inside a transcript that is usually also on `--card`, a theme must keep `--pretui-shadow-card` doing real work — the hairline is the only thing separating a result from the rows around it. A theme that reduces it to nothing leaves the card indistinguishable from the transcript, which is exactly the distinction this component exists to draw.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/result-card.usage.gts

@@ -0,0 +1,29 @@
+// Pretui — ResultCard usage page.
+import Component from '@glimmer/component';
+import { FreestyleUsage } from './freestyle-usage';
+import { ResultCard } from './result-card';
+
+class ResultCardUsage extends Component {
+  lines = ['3 records updated', 'No validation errors', 'Receipt run_8F3C'];
+  <template>
+    <FreestyleUsage
+      @name='ResultCard'
+      @description='A human-readable receipt for agent output. The result is card-shaped and names both outcome and evidence.'
+      @source='ResultCard usage'
+    >
+      <:example>
+        <ResultCard @eyebrow='Tea lots' @title='Import complete' @lines={{this.lines}} />
+      </:example>
+      <:api as |Args|>
+        <Args.String @name='title' @value='Import complete' />
+        <Args.Object @name='lines' @value={{this.lines}} />
+        <Args.String @name='eyebrow' @value='Tea lots' />
+        <Args.Action @name='onMenu' />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_RESULT_CARD: Record<string, unknown> = {
+  ResultCard: ResultCardUsage,
+};

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

@@ -0,0 +1,204 @@
+// Pretui — Result: the page-level outcome scene — done, failed, not found, not allowed.
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+import { resolveTone } from '../pretui-primitives';
+
+export type ResultStatus =
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | '403'
+  | '404'
+  | '500';
+
+const STATUSES: readonly ResultStatus[] = [
+  'success',
+  'info',
+  'warning',
+  'danger',
+  '403',
+  '404',
+  '500',
+];
+
+// An HTTP code is a status, not a tone, but it still needs a hue: a missing
+// page is information, a refused one a warning, a server failure danger.
+const HUES: Record<ResultStatus, string> = {
+  success: 'var(--success)',
+  info: 'var(--pretui-info)',
+  warning: 'var(--warning)',
+  danger: 'var(--destructive)',
+  '403': 'var(--warning)',
+  '404': 'var(--pretui-info)',
+  '500': 'var(--destructive)',
+};
+
+const GLYPHS: Record<ResultStatus, string> = {
+  success: '✓',
+  info: 'i',
+  warning: '!',
+  danger: '✕',
+  '403': '403',
+  '404': '404',
+  '500': '500',
+};
+
+// The title a code gets when the caller gives none, so a bare
+// `<Result @status='404' />` still says something a person can read.
+const DEFAULT_TITLES: Partial<Record<ResultStatus, string>> = {
+  '403': 'You do not have access to this page',
+  '404': 'This page does not exist',
+  '500': 'Something went wrong on our side',
+};
+
+export interface ResultSignature {
+  Args: {
+    /** The outcome. Accepts the kit's tone spellings too (`error`, `positive`…). Default 'info'. */
+    status?: ResultStatus | number | string;
+    /** The one sentence that says what happened. Codes get a default. */
+    title?: string;
+    /** What it means for the reader, and what to do next. */
+    description?: string;
+    /** The title's heading level (default 2). */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  };
+  Blocks: {
+    /** Replaces the status glyph — an illustration, a product mark. */
+    icon: [];
+    /** Anything between the description and the actions: a list of what failed, an order number. */
+    default: [];
+    /** The ways forward, usually one or two Buttons. */
+    extra: [];
+  };
+  Element: HTMLElement;
+}
+
+/**
+ * EmptyState is a region with no data yet; ResultCard is an agent's output
+ * card; Alert is an inline message. Result is the scene that replaces a whole
+ * pane once an outcome is known — a submitted form, a missing page, a refused
+ * request — with one heading, one explanation and the ways forward.
+ *
+ * The glyph is static (Law 5): an outcome is not a process, so nothing spins
+ * or bounces. HTTP codes render as their numerals, set large, because "404"
+ * is the most recognisable thing that can be said about a missing page.
+ */
+export class Result extends Component<ResultSignature> {
+  get status(): ResultStatus {
+    let raw = this.args.status;
+    return resolveTone(raw === undefined ? undefined : String(raw), STATUSES, 'info');
+  }
+  get isCode(): boolean {
+    return /^\d+$/.test(this.status);
+  }
+  get title(): string | undefined {
+    return this.args.title ?? DEFAULT_TITLES[this.status];
+  }
+  get level(): number {
+    let level = this.args.headingLevel ?? 2;
+    return level >= 1 && level <= 6 ? level : 2;
+  }
+  get glyph(): string {
+    return GLYPHS[this.status];
+  }
+  get hueStyle() {
+    return htmlSafe(`--pretui-result-hue: ${HUES[this.status]}`);
+  }
+
+  <template>
+    <section
+      class='pretui-result'
+      data-status={{this.status}}
+      style={{this.hueStyle}}
+      data-test-pretui-result
+      ...attributes
+    >
+      <div class='pretui-result-mark' aria-hidden='true'>
+        {{#if (has-block 'icon')}}
+          {{yield to='icon'}}
+        {{else if this.isCode}}
+          <span class='pretui-result-code'>{{this.glyph}}</span>
+        {{else}}
+          <span class='pretui-result-glyph'>{{this.glyph}}</span>
+        {{/if}}
+      </div>
+      {{#if this.title}}
+        <div class='pretui-result-title' role='heading' aria-level={{this.level}} data-test-pretui-result-title>
+          {{this.title}}
+        </div>
+      {{/if}}
+      {{#if @description}}
+        <p class='pretui-result-desc' data-test-pretui-result-description>{{@description}}</p>
+      {{/if}}
+      {{#if (has-block)}}
+        <div class='pretui-result-body'>{{yield}}</div>
+      {{/if}}
+      {{#if (has-block 'extra')}}
+        <div class='pretui-result-extra' data-test-pretui-result-extra>{{yield to='extra'}}</div>
+      {{/if}}
+    </section>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-result {
+          display: grid;
+          justify-items: center;
+          text-align: center;
+          gap: var(--space-3, 0.5rem);
+          padding: var(--space-9, 2.75rem) var(--space-6, 1.25rem);
+          min-inline-size: 0;
+        }
+        .pretui-result-mark {
+          display: grid;
+          place-items: center;
+          margin-block-end: var(--space-2, 0.375rem);
+          color: var(--pretui-result-hue);
+        }
+        .pretui-result-glyph {
+          display: grid;
+          place-items: center;
+          inline-size: 3.5rem;
+          block-size: 3.5rem;
+          border-radius: 50%;
+          font-size: 1.5rem;
+          font-weight: 600;
+          line-height: 1;
+          color: color-mix(in oklch, var(--foreground) 30%, var(--pretui-result-hue));
+          background: color-mix(in oklch, var(--pretui-result-hue) var(--pretui-chip-mix, 20%), var(--card));
+          box-shadow: 0 0 0 1px color-mix(in oklch, var(--pretui-result-hue) 45%, var(--border));
+        }
+        .pretui-result-code {
+          font-family: var(--font-serif);
+          font-size: var(--pretui-result-code-size, 4.5rem);
+          font-variant-numeric: tabular-nums;
+          line-height: 1;
+          letter-spacing: -0.02em;
+          color: color-mix(in oklch, var(--foreground) 25%, var(--pretui-result-hue));
+        }
+        .pretui-result-title {
+          font-family: var(--font-serif);
+          font-size: var(--text-heading, 1.1875rem);
+          color: var(--foreground);
+          max-inline-size: 36ch;
+        }
+        .pretui-result-desc {
+          margin: 0;
+          font-size: var(--text-ui-md, 0.8125rem);
+          color: var(--muted-foreground);
+          max-inline-size: 44ch;
+        }
+        .pretui-result-body {
+          inline-size: min(100%, 32rem);
+          text-align: start;
+        }
+        .pretui-result-extra {
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+          gap: var(--space-3, 0.5rem);
+          margin-block-start: var(--space-3, 0.5rem);
+        }
+      }
+    </style>
+  </template>
+}