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

package/bundled-realms/pretui/components/split-panes.usage.gts

@@ -0,0 +1,171 @@
+// Pretui — SplitPanes usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { SplitPanes } from './split-panes';
+
+// ── SplitPanes ← resizable-panel-group/usage.gts ─────────────────────────
+// Ported knobs: orientation (upstream showed it as two separate usages —
+// here a live switch), reverseCollapse, and the per-panel
+// defaultSize/minSize/maxSize/collapsible set (upstream repeats it for
+// each of three panels; here panel 1 carries the live set, panels 2–3
+// hold upstream defaults), plus panel 3's isHidden toggle. Dropped: the
+// boxel-panel-resize-handle-* cssVars rows (handle colors are pinned to
+// Pretui tokens by the wrapper).
+class SplitPanesUsage extends Component {
+  orientationOptions = ['horizontal', 'vertical'];
+  @tracked orientation = 'horizontal';
+  @tracked reverseCollapse = false;
+  @tracked p1Default = 25;
+  @tracked p1Min: number | undefined = undefined;
+  @tracked p1Max: number | undefined = undefined;
+  @tracked p1Collapsible = true;
+  @tracked p3Hidden = false;
+  setOrientation = (v: string) => (this.orientation = v);
+  setReverseCollapse = (v: boolean) => (this.reverseCollapse = v);
+  setP1Default = (v: number | null) => (this.p1Default = v ?? 25);
+  setP1Min = (v: number | null) => (this.p1Min = v ?? undefined);
+  setP1Max = (v: number | null) => (this.p1Max = v ?? undefined);
+  setP1Collapsible = (v: boolean) => (this.p1Collapsible = v);
+  setP3Hidden = (v: boolean) => (this.p3Hidden = v);
+  get orientationVal() {
+    return this.orientation as 'horizontal' | 'vertical';
+  }
+  get p2Default() {
+    return this.p3Hidden ? 75 : 50;
+  }
+  get usage() {
+    let bits = [`@orientation='${this.orientation}'`];
+    if (this.reverseCollapse) bits.push('@reverseCollapse={{true}}');
+    return `<SplitPanes ${bits.join(' ')} as |Panel Handle|>\n  <Panel @defaultSize={{${this.p1Default}}}>…</Panel>\n  <Handle />\n  <Panel @defaultSize={{${this.p2Default}}}>…</Panel>\n</SplitPanes>`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='SplitPanes'
+      @description="Split-pane layout with horizontal or vertical orientation and draggable dividers between panels — resizable IDE-style and master-detail layouts. Wraps boxel-ui's ResizablePanelGroup engine: percent-based constraint solving per panel, pointer-captured drag, double-click collapse on the outer handles. Hover a divider to reveal its handle."
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='split-host'>
+          <SplitPanes
+            @orientation={{this.orientationVal}}
+            @reverseCollapse={{this.reverseCollapse}}
+            as |Panel Handle|
+          >
+            <Panel
+              @defaultSize={{this.p1Default}}
+              @minSize={{this.p1Min}}
+              @maxSize={{this.p1Max}}
+              @collapsible={{this.p1Collapsible}}
+            >
+              <div class='split-fill'><span
+                  class='split-label'
+                >Pane 1</span></div>
+            </Panel>
+            <Handle />
+            <Panel @defaultSize={{this.p2Default}}>
+              <div class='split-fill'><span
+                  class='split-label'
+                >Pane 2</span></div>
+            </Panel>
+            {{#unless this.p3Hidden}}
+              <Handle />
+              <Panel @defaultSize={{25}}>
+                <div class='split-fill'><span
+                    class='split-label'
+                  >Pane 3</span></div>
+              </Panel>
+            {{/unless}}
+          </SplitPanes>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='orientation'
+          @defaultValue='horizontal'
+          @value={{this.orientation}}
+          @options={{this.orientationOptions}}
+          @description='Pane flow direction — upstream ships this as two separate usages; here it is one switch.'
+          @onInput={{this.setOrientation}}
+        />
+        <Args.Bool
+          @name='reverseCollapse'
+          @defaultValue={{false}}
+          @value={{this.reverseCollapse}}
+          @description='Double-clicking a handle collapses outward by default; this reverses it — preferable in two-panel setups.'
+          @onInput={{this.setReverseCollapse}}
+        />
+        <Args.Action
+          @name='onLayoutChange'
+          @description='Receives the full layout as number[] percentages after every resize.'
+          @hideControls={{true}}
+        />
+        <Args.Number
+          @name='Panel @defaultSize (pane 1)'
+          @value={{this.p1Default}}
+          @min={{0}}
+          @max={{100}}
+          @step={{5}}
+          @description='Initial size as a 0–100 percentage. Applied when the panel registers.'
+          @onInput={{this.setP1Default}}
+        />
+        <Args.Number
+          @name='Panel @minSize (pane 1)'
+          @value={{this.p1Min}}
+          @description='Lower resize bound, percent. Double-click collapse ignores it while @collapsible is true.'
+          @onInput={{this.setP1Min}}
+        />
+        <Args.Number
+          @name='Panel @maxSize (pane 1)'
+          @value={{this.p1Max}}
+          @description='Upper resize bound, percent.'
+          @onInput={{this.setP1Max}}
+        />
+        <Args.Bool
+          @name='Panel @collapsible (pane 1)'
+          @defaultValue={{true}}
+          @value={{this.p1Collapsible}}
+          @description='Allows the pane to collapse to zero; pair with @minSize when false.'
+          @onInput={{this.setP1Collapsible}}
+        />
+        <Args.Bool
+          @name='pane 3 hidden'
+          @defaultValue={{false}}
+          @value={{this.p3Hidden}}
+          @description="Demo knob — removes the third pane and its handle to show the group relayouts as panels register and unregister (upstream's isHidden)."
+          @onInput={{this.setP3Hidden}}
+        />
+        <Args.Yield
+          @description='Yields the curried (Panel, Handle) pair — alternate Panels and Handles in the block.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .split-host {
+        height: 220px;
+        border-radius: var(--radius-surface, 10px);
+        box-shadow: 0 0 0 1px var(--border);
+        overflow: hidden;
+      }
+      .split-fill {
+        height: 100%;
+        display: grid;
+        place-items: center;
+        background: var(--inset, var(--boxel-100));
+      }
+      .split-label {
+        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);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_SPLIT_PANES: Record<string, unknown> = {
+  SplitPanes: SplitPanesUsage,
+};

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

@@ -0,0 +1,174 @@
+// Pretui — Spotlight: a light that follows the pointer across a surface.
+import Component from '@glimmer/component';
+import { htmlSafe } from '@ember/template';
+// Caller-supplied hues are strings and must clear the kit-wide allowlist
+// before they reach an inline style — see pretui-css.gts.
+import { cssDeclaration, cssNumber } from '../pretui-css';
+import { pointerField } from '../internal/motion-pointer';
+
+// ── Spotlight ────────────────────────────────────────────────────────────
+// TRANSCRIBED from motion-primitives spotlight.tsx (and the highlight half
+// of react-bits TargetCursor / ClickSpark).
+//
+// Upstream engine: a rAF spring drives left/top of an absolutely
+// positioned blurred circle, and — the part that matters — the component
+// REACHES INTO ITS PARENT on mount and mutates `parent.style.position`
+// and `parent.style.overflow`. That is an invisible side effect on a node
+// it does not own, and it is why the effect silently fails inside any
+// parent that needs visible overflow. Its opacity is also 0 whenever the
+// pointer is elsewhere, so a screenshot shows nothing at all, and its
+// gradient is a `dark:` utility fork.
+//
+// This version owns its own surface: Spotlight IS the container (the
+// relative/overflow contract is on a node it declares), the light is a
+// fixed-size layer moved with `translate` — compositor-friendly, and
+// transitionable, which `background-position` on a radial gradient is
+// not — and the softness comes from a multi-stop gradient rather than
+// `filter: blur()`, which is markedly cheaper on a large layer.
+// Differences from the spring: linear ease-out travel, no overshoot.
+// Dropped: `springOptions`, and the parent-mutation behavior entirely.
+//
+// Resting state (Law 8): @rest is a real opacity floor, not 0 — the wash
+// parks at @restX/@restY so a still frame shows a lit surface rather than
+// a blank one. Encoding (Law 5): the light travels to whatever child takes
+// focus, so it reports which surface is live AND where focus sits — the
+// keyboard path upstream never had.
+// Honest limit: the surface clips its content (overflow: hidden), so a
+// Spotlight cannot host a popover that needs to escape its box.
+export interface SpotlightSignature {
+  Args: {
+    /** diameter of the light in px — default 260 */
+    size?: number;
+    /** any CSS color for the light — defaults to the --primary token */
+    hue?: string;
+    /** peak strength of the light at its centre, 0–1 — default 0.5 */
+    intensity?: number;
+    /** opacity floor when nothing is engaged, 0–1 — default 0.34. This is
+     * the resting state; 0 makes the component invisible in a still frame */
+    rest?: number;
+    /** resting x origin as a fraction of the surface width — default 0.5 */
+    restX?: number;
+    /** resting y origin as a fraction of the surface height — default 0.5 */
+    restY?: number;
+    /** travel the light to a focused child on focusin — default true */
+    followFocus?: boolean;
+  };
+  Blocks: {
+    /** the lit surface's content — sits above the light, fully interactive */
+    default: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export class Spotlight extends Component<SpotlightSignature> {
+  get followFocus(): boolean {
+    return this.args.followFocus ?? true;
+  }
+  get rootStyle(): ReturnType<typeof htmlSafe> {
+    let bits: string[] = [];
+    {
+      let n = cssNumber(this.args.size, 0, 10000);
+      if (n !== undefined) {
+        bits.push(`--pretui-spotlight-size: ${n}px`);
+      }
+    }
+    let hue = cssDeclaration('--pretui-spotlight-hue', this.args.hue);
+    if (hue) bits.push(hue);
+    if (this.args.intensity !== undefined) {
+      let pct = Math.round(
+        Math.min(1, Math.max(0, this.args.intensity)) * 100,
+      );
+      bits.push(`--pretui-spotlight-strength: ${pct}%`);
+    }
+    {
+      let n = cssNumber(this.args.rest, 0, 1);
+      if (n !== undefined) {
+        bits.push(`--pretui-spotlight-rest: ${n}`);
+      }
+    }
+    return htmlSafe(bits.join('; '));
+  }
+  <template>
+    <div
+      class='pretui-spotlight'
+      style={{this.rootStyle}}
+      data-test-pretui-spotlight
+      {{pointerField 0 this.followFocus @restX @restY}}
+      ...attributes
+    >
+      <span class='pretui-spotlight-light' aria-hidden='true'></span>
+      <div class='pretui-spotlight-content'>{{yield}}</div>
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-spotlight {
+          position: relative;
+          overflow: hidden;
+          border-radius: var(--pretui-spotlight-radius, var(--radius));
+          background: var(--pretui-spotlight-surface, var(--card));
+          box-shadow: var(
+            --pretui-shadow-card,
+            0 0 0 1px var(--border),
+            0 1px 3px rgb(16 24 40 / 0.06)
+          );
+        }
+        .pretui-spotlight-light {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          width: var(--pretui-spotlight-size, 260px);
+          height: var(--pretui-spotlight-size, 260px);
+          margin-top: calc(var(--pretui-spotlight-size, 260px) / -2);
+          margin-left: calc(var(--pretui-spotlight-size, 260px) / -2);
+          pointer-events: none;
+          border-radius: 999px;
+          background: radial-gradient(
+            circle at center,
+            color-mix(
+                in oklch,
+                var(--pretui-spotlight-hue, var(--primary))
+                  var(--pretui-spotlight-strength, 50%),
+                transparent
+              )
+              0%,
+            color-mix(
+                in oklch,
+                var(--pretui-spotlight-hue, var(--primary)) 14%,
+                transparent
+              )
+              38%,
+            color-mix(
+                in oklch,
+                var(--pretui-spotlight-hue, var(--primary)) 4%,
+                transparent
+              )
+              64%,
+            transparent 82%
+          );
+          opacity: var(--pretui-spotlight-rest, 0.34);
+          translate: var(--pretui-px, 0px) var(--pretui-py, 0px);
+          transition:
+            translate 220ms cubic-bezier(0.22, 1, 0.36, 1),
+            opacity 220ms ease-out;
+          will-change: translate;
+        }
+        .pretui-spotlight[data-pretui-pointer='fine'] .pretui-spotlight-light,
+        .pretui-spotlight[data-pretui-pointer='coarse'] .pretui-spotlight-light,
+        .pretui-spotlight[data-pretui-pointer='focus'] .pretui-spotlight-light {
+          opacity: 1;
+        }
+        .pretui-spotlight-content {
+          position: relative;
+        }
+        /* end state under reduced motion: the light sits wherever the
+           pointer/focus is, it just does not travel to get there */
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-spotlight-light {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}

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

@@ -0,0 +1,51 @@
+## What it is
+
+A pointer-anchored highlight washing a surface: a soft light under the content that follows the pointer and travels to whatever child takes focus.
+
+Use it to make a surface feel live under the cursor — a pricing card, a feature panel, a call to action. The content stays fully interactive; the light is underneath it.
+
+## The contract
+
+```
+@size?        — diameter of the light in px. Default 260
+@hue?         — any CSS colour for the light; defaults to --primary
+@intensity?   — peak strength at the centre, 0–1. Default 0.5
+@rest?        — opacity floor when nothing is engaged, 0–1. Default 0.34
+@restX?       — resting x origin as a fraction of the surface width. Default 0.5
+@restY?       — resting y origin as a fraction of the surface height. Default 0.5
+@followFocus? — travel the light to a focused child on focusin. Default true
+
+<:default> — the lit surface's content; sits above the light, fully interactive
+```
+
+**`@rest` is the resting state, and setting it to 0 makes the component invisible in a still frame.** A spotlight that only exists while a pointer is over it is a spotlight that does not exist in a screenshot, in a print, or for anyone who never hovers.
+
+**`@followFocus` is the keyboard path.** The light travels to a focused child, so tabbing through a lit surface moves the light the way hovering does. This is what stops the effect from being pointer-only decoration.
+
+**The content sits above the light and stays interactive.** The light is a sibling layer, not an overlay.
+
+**An unsafe hue is dropped** rather than interpolated, and the default token stands.
+
+## Prior art
+
+**motion-primitives' Spotlight**, plus **react-bits' TargetCursor** and **ClickSpark** as neighbours in the same idea.
+
+Where Pretui is better: **the resting floor and the focus travel.** Upstream spotlights are pointer-only and fully transparent at rest, which means they contribute nothing to a still frame and nothing to a keyboard user. Both are fixed here by default rather than by configuration. The hue also goes through the kit's colour guard rather than into a template string.
+
+Where it is thinner: one light per surface, no multiple or coloured-per-child lights, no click burst, and no blend-mode control — the wash is a fixed compositing choice. There is no cursor-replacement mode either, which is what TargetCursor does.
+
+## Accessibility
+
+- **The light is `aria-hidden`.** It is a wash under content and contributes nothing to the tree.
+- **`@followFocus` is the reason this is not pointer-only.** A keyboard user gets the same emphasis a mouse user gets, arriving at the same places — which is unusual for this family of effects and is the single most valuable thing about this implementation.
+- **The resting floor means the surface is never unstyled.** A reader who has not moved a pointer still sees a lit surface rather than a flat one.
+- **Contrast changes under the light.** Text over the brightest part of the wash sits on a different ground than text at the edge, so a surface that only just passes contrast at rest may not pass under the light at `@intensity` 0.5. Lower the intensity rather than the text's weight.
+- **Reduced motion should stop the travel**, leaving the light at its resting origin — which is why `@restX` and `@restY` exist as args rather than being fixed at centre.
+
+## Theming
+
+`--pretui-spotlight-size` (from `@size`), `--pretui-spotlight-hue` (from `@hue`, defaulting to `--primary`), `--pretui-spotlight-strength` (from `@intensity`), `--pretui-spotlight-rest` (the floor), `--pretui-spotlight-radius` and `--pretui-spotlight-surface`, plus the shared pointer channel `--pretui-px` / `--pretui-py` this module's components all write.
+
+Because the hue defaults to `--primary`, a theme's accent lights every spotlight in the product without anyone restating it — and because the light composites against the surface rather than replacing it, dark mode gets a correct dark wash from the same token.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

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

@@ -0,0 +1,197 @@
+// Pretui — Spotlight usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { Button } from './button';
+import { Chip } from './chip';
+import { Spotlight } from './spotlight';
+import { lots } from '../demo-motion-pointer';
+
+// ── Spotlight ────────────────────────────────────────────────────────────
+class SpotlightUsage extends Component {
+  @tracked size = 260;
+  @tracked hue = '';
+  @tracked intensity = 0.5;
+  @tracked rest = 0.34;
+  @tracked restX = 0.5;
+  @tracked restY = 0.5;
+  @tracked followFocus = true;
+  setSize = (v: number | null) => (this.size = v ?? 260);
+  setHue = (v: string) => (this.hue = v);
+  setIntensity = (v: number | null) => (this.intensity = v ?? 0.5);
+  setRest = (v: number | null) => (this.rest = v ?? 0.34);
+  setRestX = (v: number | null) => (this.restX = v ?? 0.5);
+  setRestY = (v: number | null) => (this.restY = v ?? 0.5);
+  setFollowFocus = (v: boolean) => (this.followFocus = v);
+  get rows() {
+    return lots('spotlight');
+  }
+  get usage() {
+    let bits = [`@size={{${this.size}}}`, `@rest={{${this.rest}}}`];
+    if (this.intensity !== 0.5) bits.push(`@intensity={{${this.intensity}}}`);
+    if (this.hue) bits.push(`@hue='${this.hue}'`);
+    if (!this.followFocus) bits.push('@followFocus={{false}}');
+    return `<Spotlight ${bits.join(' ')}>\n  … surface content …\n</Spotlight>`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='Spotlight'
+      @description='A pointer-anchored wash over a surface the component owns. motion-primitives’ Spotlight reaches into its PARENT on mount and mutates that node’s position and overflow — an invisible side effect on something it does not own, and the reason it silently fails inside any parent that needs visible overflow. Here Spotlight is the container, so the relative/overflow contract sits on a node it declares. The light is a fixed-size layer moved with translate (compositor-friendly, and transitionable in a way a radial-gradient position is not) and softened with gradient stops instead of filter: blur, which is markedly cheaper. Law 8: @rest is an opacity floor, not 0 — the surface is lit in a still frame. Law 5 encoding: the light travels to whatever child takes focus, so it reports which surface is live and where focus sits inside it. Honest limit: the surface clips its content, so a Spotlight cannot host a popover that needs to escape its box.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <Spotlight
+          @size={{this.size}}
+          @hue={{this.hue}}
+          @intensity={{this.intensity}}
+          @rest={{this.rest}}
+          @restX={{this.restX}}
+          @restY={{this.restY}}
+          @followFocus={{this.followFocus}}
+          class='spot-surface'
+        >
+          <div class='spot-head'>
+            <h4 class='spot-title'>Cupping panel · Wuyishan</h4>
+            <Chip @label='In session' @hue='#0ea5a4' />
+          </div>
+          <ul class='spot-list'>
+            {{#each this.rows as |row|}}
+              <li class='spot-row'>
+                <span class='spot-tea'>{{row.tea}}</span>
+                <span class='spot-meta'>lot {{row.lot}}</span>
+                <Button @size='xs' @appearance='plain'>Score</Button>
+              </li>
+            {{/each}}
+          </ul>
+        </Spotlight>
+      </:example>
+      <:api as |Args|>
+        <Args.Number
+          @name='size'
+          @defaultValue={{260}}
+          @value={{this.size}}
+          @min={{80}}
+          @max={{600}}
+          @step={{10}}
+          @description='Diameter of the light in px. Larger than the surface reads as a general wash rather than a pointer anchor.'
+          @onInput={{this.setSize}}
+        />
+        <Args.Number
+          @name='intensity'
+          @defaultValue={{0.5}}
+          @value={{this.intensity}}
+          @min={{0}}
+          @max={{1}}
+          @step={{0.05}}
+          @description='Peak strength of the light at its centre, mixed against the hue with color-mix. Law 6: this is chrome — nothing a reader must parse ever lives in it.'
+          @onInput={{this.setIntensity}}
+        />
+        <Args.Number
+          @name='rest'
+          @defaultValue={{0.34}}
+          @value={{this.rest}}
+          @min={{0}}
+          @max={{1}}
+          @step={{0.02}}
+          @description='Opacity floor when nothing is engaged — the resting state. Setting it to 0 reproduces the upstream behavior of vanishing entirely, which fails the screenshot test.'
+          @onInput={{this.setRest}}
+        />
+        <Args.String
+          @name='hue'
+          @value={{this.hue}}
+          @description='Any CSS color for the light. Empty falls back to the --primary token.'
+          @onInput={{this.setHue}}
+        />
+        <Args.Number
+          @name='restX'
+          @defaultValue={{0.5}}
+          @value={{this.restX}}
+          @min={{0}}
+          @max={{1}}
+          @step={{0.05}}
+          @description='Resting x origin as a fraction of the surface width — where the wash parks before anything engages.'
+          @onInput={{this.setRestX}}
+        />
+        <Args.Number
+          @name='restY'
+          @defaultValue={{0.5}}
+          @value={{this.restY}}
+          @min={{0}}
+          @max={{1}}
+          @step={{0.05}}
+          @description='Resting y origin as a fraction of the surface height.'
+          @onInput={{this.setRestY}}
+        />
+        <Args.Bool
+          @name='followFocus'
+          @defaultValue={{true}}
+          @value={{this.followFocus}}
+          @description='Travel the light to a focused child on focusin. Tab into the Score buttons to see it; this is the keyboard path upstream never had.'
+          @onInput={{this.setFollowFocus}}
+        />
+        <Args.Yield
+          @name='default'
+          @description='The lit surface’s content. It renders above the light and keeps all of its own events — the light layer is pointer-events: none and aria-hidden.'
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='pretui-spotlight-surface'
+          @type='color'
+          @description='Surface color under the light — defaults to the --card token.'
+        />
+        <Css.Basic
+          @name='pretui-spotlight-radius'
+          @type='length'
+          @description='Corner radius of the surface — defaults to the --radius token.'
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <style scoped>
+      .spot-surface {
+        padding: 18px;
+        min-height: 190px;
+      }
+      .spot-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        margin-bottom: 14px;
+      }
+      .spot-title {
+        margin: 0;
+        font-size: var(--text-heading-sm, 15px);
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: var(--card-foreground);
+      }
+      .spot-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        display: grid;
+        gap: 10px;
+      }
+      .spot-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .spot-tea {
+        font-size: var(--text-ui-lg, 13.5px);
+        color: var(--card-foreground);
+      }
+      .spot-meta {
+        flex: 1;
+        font-size: var(--text-ui-md, 12.5px);
+        font-variant-numeric: tabular-nums;
+        color: var(--muted-foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_SPOTLIGHT: Record<string, unknown> = {
+  Spotlight: SpotlightUsage,
+};

package/bundled-realms/pretui/components/stack-divider.gts

@@ -0,0 +1,58 @@
+// Pretui — StackDivider: the layout-local hairline that pairs with Stack.
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { pretuiOrientation } from '../internal/structure-layout';
+import type { Orientation, OrientationAlias } from '../internal/structure-layout';
+
+const axisOf = (orientation?: string, direction?: string): Orientation =>
+  pretuiOrientation(orientation, direction, 'vertical');
+
+// the rule runs across the Stack, so it is announced perpendicular to its axis
+const ruleOf = (orientation?: string, direction?: string): Orientation =>
+  axisOf(orientation, direction) === 'horizontal' ? 'vertical' : 'horizontal';
+
+/**
+ * A hairline, exported here because `Stack` documents it as the semantic
+ * partner to its own decorative rule and because `Separator` is the name the
+ * React corpus uses. Deliberately thin: `Divider` in the reading territory
+ * stays the canonical one — this is the layout-local rule with an
+ * `@orientation` that matches Stack's.
+ */
+export interface StackDividerSignature {
+  Args: {
+    orientation?: Orientation;
+    direction?: OrientationAlias;
+    /** Semantic separator rather than decoration — announced to readers. */
+    semantic?: boolean;
+  };
+  Element: HTMLSpanElement;
+}
+
+export const StackDivider: TemplateOnlyComponent<StackDividerSignature> =
+  <template>
+    <span
+      class='pretui-stack-divider'
+      data-orientation={{axisOf @orientation @direction}}
+      role={{if @semantic 'separator'}}
+      aria-orientation={{if @semantic (ruleOf @orientation @direction)}}
+      aria-hidden={{unless @semantic 'true'}}
+      data-test-pretui-stack-divider
+      ...attributes
+    ></span>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-stack-divider {
+          flex: none;
+          align-self: stretch;
+          background: var(--pretui-stack-rule-color, var(--border));
+        }
+        .pretui-stack-divider[data-orientation='vertical'],
+        .pretui-stack-divider[data-orientation='column'] {
+          block-size: 1px;
+        }
+        .pretui-stack-divider[data-orientation='horizontal'],
+        .pretui-stack-divider[data-orientation='row'] {
+          inline-size: 1px;
+        }
+      }
+    </style>
+  </template>;