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

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

@@ -0,0 +1,181 @@
+// Pretui — NodeCard: the default node body on a NodeCanvas.
+import Component from '@glimmer/component';
+import { cssStyle } from '../pretui-css';
+import { Chip } from './chip';
+import { Token } from './token';
+import { statusHue } from '../internal/ink';
+import type { CanvasNode, NodeCardData } from '../internal/surfaces-canvas';
+
+// ── NodeCard — the default node body ─────────────────────────────────────
+// React Flow's stock node is `<div style={{padding:10, border:'1px solid
+// #1a192b', borderRadius:3, background:'#fff', width:150}}>{label}</div>`:
+// one string, fixed pixels, hard-coded colors, no place for structure.
+// NodeCard is the Pretui reply — an eyebrow Token for the machine value,
+// a real title, a supporting line, and a status Chip whose hue is derived
+// from the status string (Law 2), so "roasting" is the same hue on every
+// node authored by every caller. Depth is hairline + shadow (Law 1); the
+// hue appears as a rail on the inline-start edge, which is the part that
+// survives the screenshot test (Law 8).
+//
+// Handles are NOT drawn here — the shell around the body owns them, so a
+// caller swapping in their own body never has to think about connectors.
+
+export interface NodeBodySignature {
+  Args: {
+    /** the whole node record */
+    node?: CanvasNode;
+    /** node id */
+    id?: string;
+    /** the node's `data` payload */
+    data?: NodeCardData;
+    /** true while this node is in the engine's selection */
+    selected?: boolean;
+    /** true during a pointer drag of this node */
+    dragging?: boolean;
+  };
+  Element: HTMLDivElement;
+}
+
+/** Shape any `@nodeBody` must satisfy: a Glimmer component over NodeBodySignature. */
+export type NodeBodyComponent = new (
+  owner: unknown,
+  args: NodeBodySignature['Args'],
+) => Component<NodeBodySignature>;
+
+export class NodeCard extends Component<NodeBodySignature> {
+  get data(): NodeCardData {
+    return this.args.data ?? {};
+  }
+  get title(): string {
+    let d = this.data;
+    return d.title ?? d.label ?? this.args.id ?? 'Untitled';
+  }
+  get hue(): string {
+    let d = this.data;
+    return d.hue ?? statusHue(d.status ?? d.kind ?? this.title);
+  }
+  get style() {
+    return cssStyle('--pretui-node-hue', this.hue);
+  }
+  <template>
+    <div
+      class='pretui-node-card'
+      style={{this.style}}
+      data-selected={{if @selected 'true' 'false'}}
+      data-dragging={{if @dragging 'true' 'false'}}
+      data-test-pretui-node-card
+      ...attributes
+    >
+      {{#if this.data.kind}}
+        <div class='pnc-kind'><Token
+            @value={{this.data.kind}}
+            @hue={{this.hue}}
+          /></div>
+      {{/if}}
+      <p class='pnc-title'>{{this.title}}</p>
+      {{#if this.data.meta}}
+        <p class='pnc-meta'>{{this.data.meta}}</p>
+      {{/if}}
+      {{#if this.data.status}}
+        <div class='pnc-status'><Chip
+            @label={{this.data.status}}
+            @hue={{this.hue}}
+          /></div>
+      {{/if}}
+    </div>
+
+    <style scoped>
+      @layer PretComponent {
+        .pretui-node-card {
+          --_hue: var(--pretui-node-hue, var(--primary));
+          position: relative;
+          display: grid;
+          gap: var(--pretui-node-gap, var(--space-2, 5px));
+          justify-items: start;
+          box-sizing: border-box;
+          width: var(--pretui-node-width, 200px);
+          padding: var(--pretui-node-padding, var(--space-4, 11px))
+            var(--pretui-node-padding, var(--space-4, 11px))
+            var(--pretui-node-padding, var(--space-4, 11px))
+            calc(var(--pretui-node-padding, var(--space-4, 11px)) + 4px);
+          border-radius: var(--pretui-node-radius, var(--radius-surface, 10px));
+          background: var(--pretui-node-bg, var(--card));
+          color: var(--card-foreground);
+          text-align: start;
+          /* Law 1 — depth is ONE property: spread hairline first, soft
+             layers after. Never a border for separation. */
+          box-shadow: var(
+            --pretui-node-shadow,
+            var(
+              --pretui-shadow-card,
+              0 0 0 1px var(--border),
+              0 1px 2px rgb(0 0 0 / 0.14),
+              0 2px 6px rgb(0 0 0 / 0.1)
+            )
+          );
+          transition:
+            box-shadow var(--pretui-dur-snap, 160ms)
+              var(--pretui-ease-snap, ease),
+            transform var(--pretui-dur-snap, 160ms) var(--pretui-ease-snap, ease);
+        }
+
+        /* Law 2 — one hue in, a complete treatment out. The rail is the
+           pure hue; nothing else in the card is hand-picked. */
+        .pretui-node-card::before {
+          content: '';
+          position: absolute;
+          inset-block: var(--pretui-node-padding, 11px);
+          inset-inline-start: 0;
+          width: 3px;
+          border-radius: 0 3px 3px 0;
+          background: var(--_hue);
+        }
+
+        .pretui-node-card[data-selected='true'] {
+          box-shadow:
+            0 0 0 1px var(--primary),
+            0 0 0 4px color-mix(in oklch, var(--primary) 18%, transparent),
+            0 4px 14px rgb(0 0 0 / 0.14);
+        }
+
+        .pretui-node-card[data-dragging='true'] {
+          box-shadow: var(
+            --pretui-shadow-overlay,
+            0 0 0 1px var(--border),
+            0 8px 28px rgb(0 0 0 / 0.22)
+          );
+        }
+
+        .pnc-kind {
+          line-height: 1;
+        }
+
+        .pnc-title {
+          margin: 0;
+          font-size: var(--text-ui-md, 12.5px);
+          font-weight: 600;
+          line-height: 1.35;
+          letter-spacing: var(--track-heading, -0.01em);
+          color: var(--card-foreground);
+        }
+
+        .pnc-meta {
+          margin: 0;
+          font-size: var(--text-ui-sm, 11.5px);
+          line-height: 1.4;
+          color: var(--muted-foreground);
+        }
+
+        .pnc-status {
+          margin-block-start: 1px;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-node-card {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}

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

@@ -0,0 +1,53 @@
+## What it is
+
+The default node shell inside a **NodeCanvas**: a titled card carrying a machine value, a supporting line and a status, with handles drawn on the sides `@flow` selected. It is what a node looks like when you do not supply your own `@nodeBody`. Use it as-is for most graphs; replace it when a node needs real content. Outside a canvas it is not useful — for a record row use **EntityDisplay**, for a tile **FittedCard**.
+
+## The contract
+
+```
+@node?, @id?, @data?: NodeCardData, @selected?, @dragging?
+Element: HTMLDivElement
+```
+
+`NodeCardData` is `{ title?, kind?, meta?, status?, hue?, label?, … }` — **and any extra keys are yours to use in a custom body**, so the payload is a real data bag rather than a closed shape.
+
+**The title falls back four deep**: `title` → `label` (the engine's own bare-label key) → `id` → `'Untitled'`. That chain matters because a graph assembled from an engine's default shape has only `label`, and a graph assembled from raw records may have only ids — a node with no visible name is a dot with an edge, and the fallback guarantees there is always something to read.
+
+**The hue is derived**: `data.hue ?? statusHue(status ?? kind ?? title)`. Same 32-bit hash as **StatusChip** and **Avatar**, so a node's colour is stable across renders and across canvases with no registry — and an explicit `hue` overrides it. Law 2: one hue in, a complete treatment out.
+
+`kind` renders as a **Token** (Law 3 — machine values as jewelry) and `status` as a derived-hue chip, so a node wears the same vocabulary as the rest of the kit rather than inventing a canvas-only look.
+
+## Prior art
+
+**React Flow's default node** is a bordered box with a label and nothing else — deliberately minimal, on the assumption that everyone writes their own. **xyflow's** node types (`default`, `input`, `output`, `group`) differ only in which handles they draw.
+
+Pretui's shell is a considered default rather than a placeholder, and the differences are:
+
+- **Depth is hairline plus shadow (Law 1); the stock node border is gone.** A graph of bordered rectangles reads as a wireframe; a graph of cards reads as objects.
+- **Four content slots with a defined typographic hierarchy** — title, kind, meta, status — rather than one label. A node that can carry its type and its state without a custom component is a node most graphs will not need to replace.
+- **Derived hue** (above), so a graph of thirty nodes is legible by colour without anyone assigning colours.
+- **Handles follow `@flow`**, drawn by the shell to match the edge endpoints the canvas set. This is the fix for the React Flow foot-gun where a custom node draws handles on the right while the engine routes edges from the bottom.
+
+Where it is thin: no ports beyond the single source/target pair (multi-port nodes need a custom `@nodeBody`), no expand/collapse, no inline editing, and no icon slot.
+
+## Accessibility
+
+No pattern of its own — the node's semantics come from **NodeCanvas**, which gives every visible node `tabindex="0"` and `aria-roledescription="node"`, and moves selection between them with Tab and the arrow keys.
+
+What that means for this component:
+
+- **The node's accessible name is its rendered content**, which is why the four-deep title fallback matters: a node that would otherwise be nameless still announces something.
+- **`kind`, `meta` and `status` are announced as part of the node**, in DOM order, with no structure — "Ingest, pipeline-04, upstream feed, running" reads as one run. Grouping them, or marking `kind` and `meta` as descriptions, would give it shape.
+- **`status` is a derived-hue chip and the hue means nothing** (it is a hash, exactly as in **StatusChip**), so the word carries the meaning and colour is not doing semantic work. That is the right arrangement and it satisfies **WCAG 1.4.1** by construction.
+- **`@selected` and `@dragging` are visual states with no announced counterpart.** Selection in particular is the canvas's primary state, and a screen-reader user moving selection with Tab hears the node's name but nothing confirming it is now selected. `aria-selected` on the node would close it — though it belongs to the engine, not to this shell.
+- **The handles are decorative to assistive tech and load-bearing to pointer users.** There is no keyboard path to create or reconnect an edge anywhere in this stack (see **NodeCanvas** gap 1), so the handles are pointer-only affordances.
+- **The graph's text form is `@summary` on NodeCanvas**, not here. A NodeCard's real accessibility comes from being enumerated in that list, which is why giving nodes meaningful titles matters more than anything this component does.
+- Focus visibility is restored by the canvas's injected skin sheet — the engine sets `outline: none` and Pretui puts it back.
+
+## Theming
+
+`--card` (node surface), `--border` and the kit's shadow tokens (the hairline-plus-shadow depth that replaces the stock border), `--foreground` and `--muted-foreground` (title and meta), plus **Token**'s tokens for `kind`, the derived-hue chip dress for `status`, and the `--chart-1` … `--chart-5` palette the hash indexes into.
+
+As with **StatusChip**, the palette must work as a *set*: nodes sit side by side at small sizes with arbitrary hue assignment, so all five chart hues need to be mutually distinguishable and legible as an ink/fill pair. Handle and edge colours come from **NodeCanvas**'s `--xy-*` mapping, not from here.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

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

@@ -0,0 +1,156 @@
+// Pretui — NodeCard usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { statusHue } from '../internal/ink';
+import { NodeCard } from './node-card';
+import type { NodeCardData } from '../internal/surfaces-canvas';
+
+// ── NodeCard ─────────────────────────────────────────────────────────────
+// The default node body, shown here OUT of the canvas — it is a plain
+// component and renders anywhere, which is the quickest way to read the
+// cloth. React Flow's stock node is a 150px div with a hard-coded border
+// and one label string; this page shows what replaced it. Dropped from
+// upstream: nothing — the stock node had no surface to drop.
+class NodeCardUsage extends Component {
+  @tracked title = 'Da Hong Pao';
+  @tracked kind = 'LOT-1181';
+  @tracked meta = '96 kg · spring pick';
+  @tracked status = 'curing';
+  @tracked hue = '';
+  @tracked selected = false;
+  @tracked dragging = false;
+
+  setTitle = (v: string) => (this.title = v);
+  setKind = (v: string) => (this.kind = v);
+  setMeta = (v: string) => (this.meta = v);
+  setStatus = (v: string) => (this.status = v);
+  setHue = (v: string) => (this.hue = v);
+  setSelected = (v: boolean) => (this.selected = v);
+  setDragging = (v: boolean) => (this.dragging = v);
+
+  get data(): NodeCardData {
+    return {
+      title: this.title,
+      kind: this.kind,
+      meta: this.meta,
+      status: this.status,
+      ...(this.hue ? { hue: this.hue } : {}),
+    };
+  }
+
+  get derivedHue() {
+    return this.hue || statusHue(this.status);
+  }
+
+  get usage() {
+    return `<NodeCard\n  @id='lot-dahongpao'\n  @data={{hash title='${this.title}' kind='${this.kind}' meta='${this.meta}' status='${this.status}'}}\n  @selected={{${this.selected}}}\n  @dragging={{${this.dragging}}}\n/>`;
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='NodeCard'
+      @description="The default body inside every NodeCanvas node, and a usable card anywhere else. Four parts, each optional: a mono Token for the machine value (Law 3), a title, one supporting line, and a status Chip whose hue is DERIVED from the status string by statusHue — so 'curing' is the same hue on every node every caller authors, without anyone picking a colour. Depth is a hairline plus a shadow, never a border for separation (Law 1); the hue shows as a rail on the inline-start edge, which is the part that survives a still frame (Law 8). Selection and drag are data-states set by the engine, shown live below. Handles are NOT drawn here — the canvas shell owns them, so a replacement body never has to think about connectors."
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='nodecard-stage'>
+          <NodeCard
+            @id='lot-dahongpao'
+            @data={{this.data}}
+            @selected={{this.selected}}
+            @dragging={{this.dragging}}
+          />
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='data.title'
+          @value={{this.title}}
+          @onInput={{this.setTitle}}
+          @description='The headline — the one line a reader scans for. Falls back to data.label, then to @id, then to “Untitled”.'
+        />
+        <Args.String
+          @name='data.kind'
+          @value={{this.kind}}
+          @onInput={{this.setKind}}
+          @description='Machine value (id, version, enum) rendered as an accent-tinted mono Token above the title. Omit it and the eyebrow disappears.'
+        />
+        <Args.String
+          @name='data.meta'
+          @value={{this.meta}}
+          @onInput={{this.setMeta}}
+          @description='One supporting line under the title, in the muted token.'
+        />
+        <Args.String
+          @name='data.status'
+          @value={{this.status}}
+          @onInput={{this.setStatus}}
+          @description='Short state word, rendered as a Chip. Its hue is a stable hash of this string — type anything and watch the whole treatment follow (Law 2).'
+        />
+        <Args.String
+          @name='data.hue'
+          @value={{this.hue}}
+          @onInput={{this.setHue}}
+          @description='Escape hatch: an explicit colour or var() that overrides the derived hue. Leave it empty and the hue is derived from the status; the Default column shows the hue currently in force.'
+          @defaultValue={{this.derivedHue}}
+        />
+        <Args.Bool
+          @name='selected'
+          @value={{this.selected}}
+          @defaultValue={{false}}
+          @onInput={{this.setSelected}}
+          @description='Set by the engine while the node is in the selection: primary ring plus a soft halo.'
+        />
+        <Args.Bool
+          @name='dragging'
+          @value={{this.dragging}}
+          @defaultValue={{false}}
+          @onInput={{this.setDragging}}
+          @description='Set by the engine during a pointer drag: the card lifts to the overlay shadow.'
+        />
+        <Args.Object
+          @name='data'
+          @value={{this.data}}
+          @description='NodeCardData — the whole payload. Extra keys are yours to read from a custom body.'
+        />
+        <Args.String
+          @name='id'
+          @hideControls={{true}}
+          @description='Node id, passed by the engine. Used as the last-resort title.'
+        />
+        <Args.Object
+          @name='node'
+          @hideControls={{true}}
+          @description='The whole CanvasNode record, passed by the engine — position, type, handle sides, flags.'
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='pretui-node-width'
+          @defaultValue='200px'
+          @description='Card width. The canvas measures the rendered node, so changing this re-routes the edges with it.'
+        />
+        <Css.Basic
+          @name='pretui-node-radius'
+          @description='Corner radius, defaulting to the --radius-surface token. Also used for the focus ring around a focused node.'
+        />
+        <Css.Basic
+          @name='pretui-node-shadow'
+          @description='Whole resting depth in one property — hairline and shadow together.'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <style scoped>
+      .nodecard-stage {
+        display: grid;
+        justify-items: start;
+        padding: var(--space-6, 18px);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_NODE_CARD: Record<string, unknown> = {
+  NodeCard: NodeCardUsage,
+};

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

@@ -0,0 +1,242 @@
+// Pretui — Notification: a persistent notification item — title, message, tone, action, dismiss.
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { Spinner } from './spinner';
+import { toastLive, toastRole } from './toaster';
+import type { ToastTone } from './toaster';
+import { resolveTone } from '../pretui-primitives';
+import type { PretuiToneArg } from '../pretui-primitives';
+
+const TONES: readonly ToastTone[] = ['neutral', 'info', 'success', 'warning', 'danger'];
+
+export interface NotificationSignature {
+  Args: {
+    title: string;
+    /** The second line. `<:default>` takes markup instead. */
+    message?: string;
+    /** Alias of `@message` — the Sonner / shadcn / Mantine name. */
+    description?: string;
+    /** Severity: paints the stripe and, with `@live`, picks the politeness. Accepts the kit's tone spellings. */
+    tone?: ToastTone | PretuiToneArg;
+    /** Replace the icon with a spinner while the thing it reports is still happening. */
+    busy?: boolean;
+    /** Announce the notification when it appears: `alert` for warning and danger, `status` otherwise. */
+    live?: boolean;
+    /** A single inline action ("Undo", "View"). */
+    actionLabel?: string;
+    onAction?: () => void;
+    /** Shows the dismiss button. Without it the notification cannot be closed from inside. */
+    onDismiss?: () => void;
+    /** The dismiss button's accessible name (default 'Dismiss'). */
+    dismissLabel?: string;
+  };
+  Blocks: {
+    icon: [];
+    default: [];
+    action: [];
+  };
+  Element: HTMLDivElement;
+}
+
+/**
+ * The item a notification centre lists and a Toaster stacks, without the
+ * clock: it stays until someone dismisses it. It wears the Toaster's face —
+ * the tone stripe, the title and message, the inline action, the dismiss
+ * button — so a toast that ages out and the notification it leaves behind
+ * read as the same object. Toast is the slimmer transient card.
+ */
+export class Notification extends Component<NotificationSignature> {
+  get tone(): ToastTone {
+    return resolveTone(this.args.tone, TONES, 'neutral');
+  }
+  get message(): string | undefined {
+    return this.args.message ?? this.args.description;
+  }
+  get role(): 'alert' | 'status' | undefined {
+    return this.args.live ? toastRole(this.tone) : undefined;
+  }
+  get ariaLive(): 'assertive' | 'polite' | undefined {
+    return this.args.live ? toastLive(this.tone) : undefined;
+  }
+  get dismissLabel(): string {
+    return this.args.dismissLabel ?? 'Dismiss';
+  }
+  onAction = () => {
+    this.args.onAction?.();
+  };
+  onDismiss = () => {
+    this.args.onDismiss?.();
+  };
+
+  <template>
+    <div
+      class='pretui-notification'
+      role={{this.role}}
+      aria-live={{this.ariaLive}}
+      aria-atomic={{if @live 'true'}}
+      aria-busy={{if @busy 'true'}}
+      data-tone={{this.tone}}
+      data-test-pretui-notification
+      ...attributes
+    >
+      {{#if @busy}}
+        <span class='pretui-notification-icon'><Spinner @size='s' aria-hidden='true' role='presentation' /></span>
+      {{else if (has-block 'icon')}}
+        <span class='pretui-notification-icon' aria-hidden='true'>{{yield to='icon'}}</span>
+      {{/if}}
+      <div class='pretui-notification-text'>
+        <span class='pretui-notification-title' data-test-pretui-notification-title>{{@title}}</span>
+        {{#if (has-block)}}
+          <div class='pretui-notification-msg'>{{yield}}</div>
+        {{else if this.message}}
+          <span class='pretui-notification-msg' data-test-pretui-notification-message>{{this.message}}</span>
+        {{/if}}
+      </div>
+      {{#if (has-block 'action')}}
+        <div class='pretui-notification-action'>{{yield to='action'}}</div>
+      {{else if @actionLabel}}
+        <button
+          type='button'
+          class='pretui-notification-do'
+          data-test-pretui-notification-action
+          {{on 'click' this.onAction}}
+        >{{@actionLabel}}</button>
+      {{/if}}
+      {{#if @onDismiss}}
+        <button
+          type='button'
+          class='pretui-notification-x'
+          aria-label={{this.dismissLabel}}
+          data-test-pretui-notification-dismiss
+          {{on 'click' this.onDismiss}}
+        >
+          <svg width='10' height='10' viewBox='0 0 12 12' aria-hidden='true'><path
+              d='M2 2l8 8M10 2l-8 8'
+              fill='none'
+              stroke='currentColor'
+              stroke-width='1.6'
+              stroke-linecap='round'
+            /></svg>
+        </button>
+      {{/if}}
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-notification {
+          position: relative;
+          overflow: hidden;
+          display: flex;
+          align-items: flex-start;
+          gap: var(--space-3, 0.5rem);
+          padding: var(--space-4, 0.6875rem);
+          padding-inline-start: calc(var(--space-4, 0.6875rem) + 3px);
+          min-inline-size: 0;
+          max-inline-size: var(--pretui-notification-width, 26rem);
+          background: var(--popover);
+          color: var(--popover-foreground);
+          border-radius: var(--radius-surface, 10px);
+          box-shadow: var(--pretui-shadow-raised, 0 0 0 1px var(--border), 0 6px 20px rgb(16 24 40 / 0.12));
+          font-family: var(--font-sans);
+          font-size: var(--text-ui-md, 0.78rem);
+        }
+        /* The stripe is the only place a tone paints, as in Toaster, so a
+           neutral notification is genuinely neutral. */
+        .pretui-notification::before {
+          content: '';
+          position: absolute;
+          inset-block: 0;
+          inset-inline-start: 0;
+          inline-size: 3px;
+          background: var(--pretui-notification-tone, var(--muted-foreground));
+        }
+        .pretui-notification[data-tone='info'] {
+          --pretui-notification-tone: var(--pretui-info, var(--boxel-blue));
+        }
+        .pretui-notification[data-tone='success'] {
+          --pretui-notification-tone: var(--success, var(--boxel-success));
+        }
+        .pretui-notification[data-tone='warning'] {
+          --pretui-notification-tone: var(--warning, var(--boxel-warning));
+        }
+        .pretui-notification[data-tone='danger'] {
+          --pretui-notification-tone: var(--destructive);
+        }
+        .pretui-notification-icon {
+          flex: none;
+          display: grid;
+          place-items: center;
+          min-block-size: 1.25rem;
+          color: var(--pretui-notification-tone, var(--muted-foreground));
+        }
+        .pretui-notification-text {
+          display: grid;
+          gap: 2px;
+          flex: 1;
+          min-inline-size: 0;
+        }
+        .pretui-notification-title {
+          font-weight: 600;
+          overflow-wrap: anywhere;
+        }
+        .pretui-notification-msg {
+          color: var(--muted-foreground);
+          font-size: var(--text-ui-sm, 0.72rem);
+          line-height: 1.5;
+        }
+        .pretui-notification-action {
+          flex: none;
+        }
+        .pretui-notification-do {
+          flex: none;
+          border: 0;
+          background: transparent;
+          color: var(--pretui-notification-tone, var(--primary));
+          font: inherit;
+          font-weight: 600;
+          padding: 2px 4px;
+          border-radius: var(--radius-control, 6px);
+          cursor: pointer;
+        }
+        .pretui-notification[data-tone='neutral'] .pretui-notification-do {
+          color: var(--primary);
+        }
+        .pretui-notification-do:hover,
+        .pretui-notification-x:hover {
+          background: var(--hover, color-mix(in oklch, currentColor 10%, transparent));
+        }
+        .pretui-notification-x {
+          position: relative;
+          flex: none;
+          display: grid;
+          place-items: center;
+          inline-size: 1.25rem;
+          block-size: 1.25rem;
+          border: 0;
+          border-radius: var(--radius-control, 6px);
+          background: transparent;
+          color: var(--muted-foreground);
+          cursor: pointer;
+        }
+        .pretui-notification-x:hover {
+          color: var(--foreground);
+        }
+        .pretui-notification-do:focus-visible,
+        .pretui-notification-x:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 1px;
+        }
+        /* Touch: grow the hit area, not the ink. */
+        @media (any-pointer: coarse) {
+          .pretui-notification-x::after {
+            content: '';
+            position: absolute;
+            inset: 50% auto auto 50%;
+            translate: -50% -50%;
+            min-inline-size: 44px;
+            min-block-size: 44px;
+          }
+        }
+      }
+    </style>
+  </template>
+}