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

package/bundled-realms/pretui/components/compaction-chip.usage.gts

@@ -0,0 +1,110 @@
+// Pretui — CompactionChip usage page.
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { FreestyleUsage } from './freestyle-usage';
+import { Button } from './button';
+import { CompactionChip } from './compaction-chip';
+
+// ── CompactionChip ───────────────────────────────────────────────────────
+const COMPACTION_SUMMARY =
+  'The session opened on the Kandy auction catalogue, settled on lot 118 as the ' +
+  'lead candidate, and rewrote the pricing rule twice — once to add the ' +
+  'unsold filter and once to correct the 2025 mean. Everything before the ' +
+  'pricing rewrite is condensed to this paragraph; the rewrite itself and ' +
+  'both receipts are still in the transcript.';
+
+const COMPACTION_STATES = ['running', 'done'];
+
+class CompactionUsage extends GlimmerComponent {
+  @tracked state = 'done';
+  @tracked expanded = false;
+
+  setState = (state: string) => (this.state = state);
+  setExpanded = (expanded: boolean) => (this.expanded = expanded);
+  flip = () => (this.state = this.state === 'done' ? 'running' : 'done');
+
+  get stateValue(): 'running' | 'done' {
+    return this.state === 'running' ? 'running' : 'done';
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='CompactionChip'
+      @description='Compaction is the moment a session quietly loses its history, and the law the spec states is that it must be RENDERED — a transcript that silently forgets is a transcript the reader cannot reason about. So: a marker in the stream while it runs, and a receipt afterwards that expands to the written summary of what was condensed. The counts are text beside the label, not a tooltip, so the receipt survives the screenshot test and greyscale. Without a summary the chip does not pretend to have one; it says so.'
+    >
+      <:example>
+        <div class='demo-stream'>
+          <p class='demo-msg'>…and that is why lot 104 was dropped.</p>
+          <CompactionChip
+            @state={{this.stateValue}}
+            @messageCount={{14}}
+            @toolCallCount={{9}}
+            @summary={{COMPACTION_SUMMARY}}
+            @expanded={{this.expanded}}
+            @onExpandedChange={{this.setExpanded}}
+          />
+          <p class='demo-msg'>Re-running the valuation with the corrected mean.</p>
+        </div>
+        <Button
+          @tone='neutral'
+          @appearance='outlined'
+          @size='s'
+          {{on 'click' this.flip}}
+        >Toggle running</Button>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='state'
+          @description='"running" shows the spinner marker and no disclosure; "done" (default) shows the receipt chip with its counts and, when there is a summary, the expander.'
+          @value={{this.state}}
+          @options={{COMPACTION_STATES}}
+          @onInput={{this.setState}}
+          @defaultValue='done'
+        />
+        <Args.Number
+          @name='messageCount'
+          @description='Messages condensed; joined with toolCallCount into the "14 messages · 9 tool calls condensed" line. Omit both and the line does not appear.'
+          @value={{14}}
+          @hideControls={{true}}
+        />
+        <Args.Bool
+          @name='expanded'
+          @description='Controlled disclosure of the written summary.'
+          @value={{this.expanded}}
+          @onInput={{this.setExpanded}}
+          @defaultValue={{false}}
+        />
+        <Args.Base
+          @name='summary / runningLabel / doneLabel / toolCallCount / onExpandedChange'
+          @description='The written summary and the two labels. A summary is a plain string here; for a rich one, use the <:summary> block instead.'
+          @hideControls={{true}}
+        />
+        <Args.Yield
+          @name='summary'
+          @description='Rich summary content, replacing the @summary string — a Prose block, a list of dropped receipts, an embedded report.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .demo-stream {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4, 11px);
+        margin-bottom: var(--space-4, 11px);
+      }
+      .demo-msg {
+        margin: 0;
+        max-width: 62ch;
+        font-size: var(--text-ui-md, 12.5px);
+        line-height: 1.6;
+        color: var(--muted-foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_COMPACTION_CHIP: Record<string, unknown> = {
+  CompactionChip: CompactionUsage,
+};

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

@@ -0,0 +1,223 @@
+// Pretui — Comparison: a before/after slider over two layers.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { clamp01to100, styleVar } from '../internal/structure-scenes';
+
+// ── Comparison — TRANSCRIBED from wa-comparison + ImageComparison ────────
+// Before/after split with a draggable seam. Layer mechanics follow both
+// originals: the after layer sits absolutely over the before layer and is
+// clipped to the left --split% via clip-path inset — before content sizes
+// the host and shows right of the seam. Interaction follows
+// wa-comparison: the seam handle is the focusable control (arrows move
+// ±1, shift+arrows ±10, Home/End jump; value clamped 0–100), but with
+// role='slider' semantics (wa ships role='scrollbar'; slider is the
+// truthful role for a 0–100 value control). Dragging uses the
+// pointer-capture modifier pattern from freestyle.gts Viewport — every
+// pointer event stays on the handle, no document listeners. Skipped from
+// the originals: motion-primitives' spring smoothing and hover-follow
+// mode (the seam tracks the pointer directly — no animation, so there is
+// no motion for reduced-motion to remove), wa's RTL mirroring, and the
+// bubbling change Event (a typed @onValueChange callback instead).
+// Controlled like the kit Slider: pass @value to own it, omit it for
+// internal state; @onValueChange reports either way.
+
+export interface ComparisonSignature {
+  Args: {
+    /** seam position 0–100 (percent from the left); omit for uncontrolled */
+    value?: number;
+    onValueChange?: (value: number) => void;
+    /** accessible name for the seam slider — default 'Comparison position' */
+    label?: string;
+  };
+  Blocks: {
+    /** full-bleed "before" layer — sizes the host, shows right of seam */
+    before: [];
+    /** full-bleed "after" layer — clipped to the left of the seam */
+    after: [];
+  };
+  Element: HTMLDivElement;
+}
+
+export class Comparison extends Component<ComparisonSignature> {
+  @tracked internal = 50;
+  @tracked dragging = false;
+  get value(): number {
+    return clamp01to100(this.args.value ?? this.internal);
+  }
+  get roundedValue(): number {
+    return Math.round(this.value);
+  }
+  get splitStyle(): string {
+    return styleVar('--split', `${this.value}%`);
+  }
+  setValue = (next: number) => {
+    let v = Math.round(clamp01to100(next) * 10) / 10;
+    if (v === this.value) {
+      return;
+    }
+    if (this.args.value === undefined) {
+      this.internal = v;
+    }
+    this.args.onValueChange?.(v);
+  };
+  setFromClientX = (host: HTMLElement | null, clientX: number) => {
+    if (!host) {
+      return;
+    }
+    let rect = host.getBoundingClientRect();
+    if (rect.width <= 0) {
+      return;
+    }
+    this.setValue(((clientX - rect.left) / rect.width) * 100);
+  };
+  // Pointer capture keeps every event on the handle — no document
+  // listeners (backdrop-close discipline, per the Viewport resizeHandle).
+  seamDrag = modifier((handle: HTMLElement) => {
+    let host = handle.closest('.pretui-comparison') as HTMLElement | null;
+    let active = false;
+    let down = (e: PointerEvent) => {
+      active = true;
+      this.dragging = true;
+      handle.setPointerCapture(e.pointerId);
+      this.setFromClientX(host, e.clientX);
+    };
+    let move = (e: PointerEvent) => {
+      if (active) {
+        this.setFromClientX(host, e.clientX);
+      }
+    };
+    let up = () => {
+      active = false;
+      this.dragging = false;
+    };
+    handle.addEventListener('pointerdown', down);
+    handle.addEventListener('pointermove', move);
+    handle.addEventListener('pointerup', up);
+    handle.addEventListener('pointercancel', up);
+    return () => {
+      handle.removeEventListener('pointerdown', down);
+      handle.removeEventListener('pointermove', move);
+      handle.removeEventListener('pointerup', up);
+      handle.removeEventListener('pointercancel', up);
+    };
+  });
+  handleKeyDown = (e: Event) => {
+    let ev = e as KeyboardEvent;
+    let step = ev.shiftKey ? 10 : 1;
+    let next: number | undefined;
+    if (ev.key === 'ArrowLeft' || ev.key === 'ArrowDown') {
+      next = this.value - step;
+    } else if (ev.key === 'ArrowRight' || ev.key === 'ArrowUp') {
+      next = this.value + step;
+    } else if (ev.key === 'Home') {
+      next = 0;
+    } else if (ev.key === 'End') {
+      next = 100;
+    }
+    if (next !== undefined) {
+      ev.preventDefault();
+      this.setValue(next);
+    }
+  };
+  <template>
+    <div
+      class='pretui-comparison'
+      style={{this.splitStyle}}
+      data-dragging={{if this.dragging 'true'}}
+      data-test-pretui-comparison
+      ...attributes
+    >
+      <div class='pretui-comparison-before'>{{yield to='before'}}</div>
+      <div class='pretui-comparison-after'>{{yield to='after'}}</div>
+      <div class='pretui-comparison-seam'>
+        <div
+          class='pretui-comparison-handle'
+          role='slider'
+          tabindex='0'
+          aria-label={{if @label @label 'Comparison position'}}
+          aria-valuemin='0'
+          aria-valuemax='100'
+          aria-valuenow={{this.roundedValue}}
+          {{this.seamDrag}}
+          {{on 'keydown' this.handleKeyDown}}
+        >
+          <svg
+            class='pretui-comparison-grip'
+            viewBox='0 0 24 24'
+            role='presentation'
+          >
+            <path role='presentation' d='M9 6l-4 6 4 6M15 6l4 6-4 6' />
+          </svg>
+        </div>
+      </div>
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-comparison {
+          position: relative;
+          overflow: hidden;
+          user-select: none;
+          -webkit-user-select: none;
+          border-radius: var(--radius-surface, 10px);
+          box-shadow: 0 0 0 1px var(--border);
+          --split: 50%;
+        }
+        .pretui-comparison-before {
+          display: block;
+        }
+        .pretui-comparison-after {
+          position: absolute;
+          inset: 0;
+          clip-path: inset(0 calc(100% - var(--split)) 0 0);
+        }
+        .pretui-comparison-seam {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: var(--split);
+          width: var(--pretui-comparison-seam-w, 2px);
+          transform: translateX(-50%);
+          background: var(--card);
+          box-shadow: 0 0 0 1px
+            color-mix(in oklch, var(--foreground) 12%, transparent);
+        }
+        .pretui-comparison-handle {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: var(--pretui-comparison-handle-size, 28px);
+          height: var(--pretui-comparison-handle-size, 28px);
+          display: grid;
+          place-items: center;
+          border-radius: 999px;
+          background: var(--card);
+          color: var(--muted-foreground);
+          box-shadow:
+            0 0 0 1px var(--border),
+            var(--pretui-shadow-card, 0 1px 3px rgba(20, 18, 26, 0.12));
+          cursor: ew-resize;
+          touch-action: none;
+        }
+        .pretui-comparison-handle:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        .pretui-comparison[data-dragging='true'] .pretui-comparison-handle {
+          color: var(--pretui-primary-ink, var(--boxel-highlight-hover));
+        }
+        .pretui-comparison-grip {
+          width: 60%;
+          height: 60%;
+          fill: none;
+          stroke: currentColor;
+          stroke-width: 2;
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+      }
+    </style>
+  </template>
+}

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

@@ -0,0 +1,46 @@
+## What it is
+
+A before/after reveal split by a draggable seam: two full-bleed layers, one clipped to the seam, and a slider that moves it.
+
+Both panes are yielded blocks, so it compares _any_ content — two themed states of a component, two renderings, two revisions — not only two images.
+
+## The contract
+
+```
+@value?         — seam position 0–100, percent from the left; omit for uncontrolled
+@onValueChange? — fires with the requested position
+@label?         — accessible name for the seam. Default 'Comparison position'
+
+<:before> full-bleed layer that sizes the host and shows right of the seam
+<:after>  full-bleed layer, clipped to the left of the seam
+```
+
+**`<:before>` sizes the host.** The after layer is clipped over it, so the component's dimensions come from the before pane and the two must be the same size to compare honestly.
+
+**The seam rests at the middle** and moves by keyboard as well as pointer: arrows step by one, Shift+arrow by ten, Home and End go to the edges. Everything is clamped to 0–100 and reported.
+
+**A controlled `@value` holds the seam still and reports the request.** The component does not move itself when controlled, which is the kit's standard controlled contract and the behaviour a test can rely on.
+
+## Prior art
+
+**Web Awesome's `wa-comparison`** and **motion-primitives' `ImageComparison`** — two similar surfaces split by a draggable seam.
+
+Where Pretui is better: **arbitrary content panes.** Both upstreams take images; here the blocks accept anything, which is what makes it useful for comparing two themed component states rather than only two photographs. The reveal is `clip-path` driven by a custom property, so it is all paint and no measurement.
+
+Where it is thinner: **no vertical seam** — the split is horizontal only, where `wa-comparison` offers both. There is **no hover-follow mode**, which motion-primitives has; that is deliberate, since a seam that tracks the pointer without a press is hard to hold still. And there is no initial-position arg beyond controlling `@value` from the first render, so "start at 30%" means owning the state.
+
+## Accessibility
+
+- **The seam is a `role='slider'`** with `aria-label`, `aria-valuemin='0'`, `aria-valuemax='100'` and a rounded `aria-valuenow`, so the position is announced as a percentage rather than as a pixel offset.
+- **One tab stop**, and the full arrow/Shift/Home/End contract over it — the same keyboard model as every other slider in the kit.
+- **The handle's glyph is `role='presentation'`**, including the SVG path inside it, so the chevrons never reach the accessibility tree.
+- **The value is rounded before it is announced.** A seam at 47.3187% is announced as 47, because the fractional part is noise to a listener.
+- **The comparison itself is visual.** Two panes differing only by appearance are not perceivable without sight, and the slider's value says where the seam is, not what changed. If the difference matters, it needs describing in text nearby — the component cannot do that for you.
+
+## Theming
+
+`--pretui-comparison-seam-w` (the seam's width) and `--pretui-comparison-handle-size` (the grip), plus `--pretui-primary-ink` for both, `--pretui-shadow-card` for the grip's elevation, and `--pretui-dur-snap` / `--pretui-ease-snap` for the glide as the seam moves.
+
+Riding the shared snap duration and easing is what makes the seam feel like the rest of the kit rather than like a bespoke drag surface — a theme that changes how things snap changes this with it.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

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

@@ -0,0 +1,148 @@
+// Pretui — Comparison usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { Comparison } from './comparison';
+
+// ── Comparison ← wa-comparison + motion-primitives ImageComparison ───────
+// Live knobs: value (wa's position, here controlled through
+// @onValueChange) and label. Dropped surface: motion-primitives'
+// springOptions and enableHover (hover-follow) modes — the seam tracks
+// the pointer directly; wa's RTL mirroring and --divider-width /
+// --handle-size cssVars rows (the channel is pinned to Pretui tokens;
+// --pretui-comparison-seam-w / -handle-size remain for per-instance
+// tuning).
+class ComparisonUsage extends Component {
+  @tracked value = 50;
+  @tracked label = 'Before and after';
+  handleValueChange = (v: number) => (this.value = v);
+  setValue = (v: number | null) => (this.value = v ?? 50);
+  setLabel = (v: string) => (this.label = v);
+  get roundedValue() {
+    return Math.round(this.value);
+  }
+  get usage() {
+    return `<Comparison @value={{${this.roundedValue}}} @onValueChange={{this.handleValueChange}} @label='${this.label}'>\n  <:before>…</:before>\n  <:after>…</:after>\n</Comparison>`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='Comparison'
+      @description="Before/after split with a draggable seam — two full-bleed layers, the after layer clipped to the seam's percent position via clip-path. Drag the handle (pointer capture, no document listeners), or focus it and use arrows (shift for ±10, Home/End to jump): the handle carries role='slider' with live aria-valuenow, per wa-comparison's keyboard contract. No animation is involved — the seam tracks input directly, so reduced-motion needs nothing removed."
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='cmp-host'>
+          <Comparison
+            @value={{this.value}}
+            @onValueChange={{this.handleValueChange}}
+            @label={{this.label}}
+          >
+            <:before>
+              <div class='cmp-layer cmp-layer-before'>
+                <span class='cmp-tag'>Before</span>
+                <p class='cmp-copy'>The bare wireframe — grayscale, flat, no
+                  accent hue.</p>
+              </div>
+            </:before>
+            <:after>
+              <div class='cmp-layer cmp-layer-after'>
+                <span class='cmp-tag'>After</span>
+                <p class='cmp-copy'>The Pretui cut — tokens, ink, and the
+                  theme's attention hue.</p>
+              </div>
+            </:after>
+          </Comparison>
+          <p class='cmp-note'>Seam at {{this.roundedValue}}%</p>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.Number
+          @name='value'
+          @defaultValue={{50}}
+          @value={{this.roundedValue}}
+          @min={{0}}
+          @max={{100}}
+          @step={{1}}
+          @description='Seam position as a 0–100 percent from the left. Pass it to control the seam; omit it for internal state.'
+          @onInput={{this.setValue}}
+        />
+        <Args.String
+          @name='label'
+          @defaultValue='Comparison position'
+          @value={{this.label}}
+          @description='Accessible name for the seam slider handle.'
+          @onInput={{this.setLabel}}
+        />
+        <Args.Action
+          @name='onValueChange'
+          @description='Receives the next 0–100 value on every drag move, keystroke, or jump — reported for controlled and uncontrolled use alike.'
+          @hideControls={{true}}
+        />
+        <Args.Yield
+          @name='before'
+          @description='Full-bleed before layer — sizes the host and shows to the RIGHT of the seam.'
+          @hideControls={{true}}
+        />
+        <Args.Yield
+          @name='after'
+          @description='Full-bleed after layer — absolutely stacked and clipped to the LEFT of the seam.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .cmp-host {
+        display: grid;
+        gap: var(--space-3, 8px);
+        max-width: 560px;
+      }
+      .cmp-layer {
+        height: 220px;
+        display: grid;
+        align-content: end;
+        gap: 4px;
+        padding: var(--space-5, 16px);
+      }
+      .cmp-layer-before {
+        background:
+          repeating-linear-gradient(
+            -45deg,
+            transparent 0 10px,
+            rgba(101, 106, 115, 0.08) 10px 11px
+          ),
+          var(--inset, var(--boxel-100));
+        color: var(--muted-foreground);
+      }
+      .cmp-layer-after {
+        background: linear-gradient(
+          135deg,
+          var(--primary),
+          color-mix(in oklch, var(--primary) 55%, var(--boxel-dark))
+        );
+        color: var(--primary-foreground);
+      }
+      .cmp-tag {
+        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;
+      }
+      .cmp-copy {
+        margin: 0;
+        font-size: var(--text-ui-md, 12.5px);
+        max-width: 34ch;
+      }
+      .cmp-note {
+        margin: 0;
+        font-size: var(--text-ui-sm, 11.5px);
+        color: var(--muted-foreground);
+        font-variant-numeric: tabular-nums;
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_COMPARISON: Record<string, unknown> = {
+  Comparison: ComparisonUsage,
+};