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

package/bundled-realms/pretui/components/doc-report.usage.gts

@@ -0,0 +1,126 @@
+// Pretui — DocReport usage page.
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { DocReport } from './doc-report';
+import type { DocCard } from './doc-report';
+
+// ── DocReport ────────────────────────────────────────────────────────────
+const REPORT_CARDS: DocCard[] = [
+  {
+    id: 'c1',
+    label: 'Kandy lot 118',
+    icon: 'rectangle-horizontal',
+    summary: 'Cupping 88.6 · unsold · 1,240 kg · Nuwara Eliya estate',
+  },
+  {
+    id: 'c2',
+    label: 'Kandy lot 104',
+    icon: 'rectangle-horizontal',
+    summary: 'Cupping 84.1 · unsold · 980 kg · below the 2025 mean once netted',
+  },
+  {
+    id: 'c3',
+    label: '2025 pricing rule',
+    icon: 'layout-grid',
+    summary: 'Rewritten twice this session; current receipt changeset-m3k1',
+  },
+];
+
+const REPORT_META = ['12 sources', '6 min read', 'changeset-m3k1'];
+
+class DocReportUsage extends GlimmerComponent {
+  @tracked expanded = false;
+  @tracked opened = '—';
+
+  setExpanded = (expanded: boolean) => (this.expanded = expanded);
+  open = (card: DocCard) => (this.opened = card.label);
+
+  <template>
+    <FreestyleUsage
+      @name='DocReport'
+      @description='The deliverable at the end of a research run: a document, not a chat message. Two things make it a component rather than a div of prose — it is capped, so a 4000-word report cannot swallow the transcript, and the cards it cites are pills you can preview without leaving the report. The cap is a mask gradient rather than a hard edge, so the reader can see that there IS more instead of guessing. The body is a slot, never a string, because a report is markdown, tables and embedded cards, whatever the run produced. Prose supplies the reading measure and the inline-code treatment; Tooltip supplies the pill preview, and being CSS-only on hover AND focus-within it works from the keyboard — which the design mirror’s hover-only fit-preview did not.'
+    >
+      <:example>
+        <DocReport
+          @title='Should we bid on the Kandy catalogue?'
+          @eyebrow='Research · sourcing desk'
+          @meta={{REPORT_META}}
+          @cards={{REPORT_CARDS}}
+          @onOpenCard={{this.open}}
+          @expanded={{this.expanded}}
+          @onExpandedChange={{this.setExpanded}}
+        >
+          <p>The catalogue lists eighteen lots, of which four remain unsold at
+            the close of the second session. Only one of those four scores
+            above 88 on the cupping sheet.</p>
+          <p><strong>Lot 118</strong>
+            scores 88.6 and carries 1,240 kg from a Nuwara Eliya estate that
+            has appeared in three of the last five catalogues. Its 2024
+            comparable cleared at twelve per cent over the seasonal mean.</p>
+          <p><strong>Lot 104</strong>
+            is the obvious alternative on price alone. It scores 84.1, and
+            once Colombo freight is netted out its landed cost exceeds lot
+            118 — the saving is nominal rather than real. This is the finding
+            that changed the recommendation between the first and second
+            drafts.</p>
+          <p>Freight is quoted flat this quarter, which is what makes the
+            netting stable enough to price against. Were it floating, the
+            comparison would collapse to a guess and the recommendation would
+            drop to medium confidence.</p>
+          <p>The pricing rule was rewritten twice during this run: once to add
+            the unsold filter, and once to correct the 2025 mean, which had
+            been computed across all lots rather than across cleared lots
+            only. Both changes are in
+            <code>changeset-m3k1</code>.</p>
+        </DocReport>
+        <p class='demo-log'>last pill opened:
+          <strong>{{this.opened}}</strong></p>
+      </:example>
+      <:api as |Args|>
+        <Args.Object
+          @name='cards'
+          @description='The cards this report cites: { id, label, summary?, icon? }. The icon is a boxel-ui export name resolved through icon-registry — data, never a static component. Each pill is a real button, so the preview is reachable by Tab as well as by pointer.'
+          @value={{REPORT_CARDS}}
+        />
+        <Args.Array
+          @name='meta'
+          @description='Short facts rendered as a machine-value strip under the title: source counts, read time, the receipt id.'
+          @value={{REPORT_META}}
+        />
+        <Args.Bool
+          @name='expanded'
+          @description='Controlled expansion. Collapsed, the body is capped at --pretui-doc-cap (16rem by default) and faded out at the bottom edge.'
+          @value={{this.expanded}}
+          @onInput={{this.setExpanded}}
+          @defaultValue={{false}}
+        />
+        <Args.Base
+          @name='title / eyebrow / onOpenCard / expandLabel / collapseLabel'
+          @description='The heading pair, the pill callback, and the two button faces (default "Full report" / "Collapse").'
+          @hideControls={{true}}
+        />
+        <Args.Yield
+          @name='default / actions'
+          @description='The report body, and actions in the header right of the title. The body is a slot rather than a markdown string so that an embedded card, a table or a chart is a first-class part of a report.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .demo-log {
+        margin: var(--space-4, 11px) 0 0;
+        font-size: var(--text-ui-sm, 11.5px);
+        color: var(--muted-foreground);
+      }
+      .demo-log strong {
+        color: var(--foreground);
+        font-weight: 600;
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_DOC_REPORT: Record<string, unknown> = {
+  DocReport: DocReportUsage,
+};

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

@@ -0,0 +1,165 @@
+// Pretui — Dock: a macOS-style dock whose items magnify toward the pointer.
+import Component from '@glimmer/component';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { cssNumber } from '../pretui-css';
+import { styleVar } from '../internal/structure-scenes';
+
+// ── Dock — TRANSCRIBED from motion-primitives Dock ───────────────────────
+// Magnifying shortcut rail. The original tracks mouseX as a motion value
+// and gives every item a spring-smoothed width from its cursor DISTANCE
+// (continuous falloff over a 150px window, mass/stiffness/damping
+// physics). This transcription is CSS-only: a discrete 3-level sibling
+// falloff — the hovered (or keyboard-focused) item scales to 1.4×, its
+// immediate neighbors to 1.2× (next sibling via `+`, previous via
+// `:has(+ :hover)`), everything else rests at 1.0× — animated by a plain
+// width/height transition. Documented deltas vs the cursor-distance
+// original: magnification follows the hovered ELEMENT, not the pointer
+// position within it; the falloff window is exactly one sibling rather
+// than a px radius; no spring physics; no DockLabel tooltip (items carry
+// title= from @label); adjacency does not light up around a focused item
+// (CSS has no sibling-of-:focus-visible in both directions — the focused
+// item itself still magnifies). Items grow upward out of the rail
+// (align-items: flex-end), pushing siblings apart exactly like the
+// original's width animation. Reduced motion: the transition is removed —
+// magnification snaps instantly instead of animating.
+
+export interface DockSignature {
+  Args: {
+    /** base item size in px — default 40 */
+    size?: number;
+    /** accessible toolbar label — default 'Dock' */
+    label?: string;
+  };
+  Blocks: {
+    /** yields { Item } — the magnifying slots */
+    default: [{ Item: typeof DockItem }];
+  };
+  Element: HTMLDivElement;
+}
+
+interface DockItemSignature {
+  Args: {
+    /** accessible name (and title tooltip) for the item */
+    label: string;
+    onClick?: (e: Event) => void;
+  };
+  Blocks: {
+    /** the glyph — size it 100%×100% to ride the magnification */
+    default: [];
+  };
+  Element: HTMLButtonElement;
+}
+
+class DockItem extends Component<DockItemSignature> {
+  handleClick = (e: Event) => {
+    this.args.onClick?.(e);
+  };
+  <template>
+    <button
+      type='button'
+      class='pretui-dock-item'
+      aria-label={{@label}}
+      title={{@label}}
+      data-test-pretui-dock-item
+      {{on 'click' this.handleClick}}
+      ...attributes
+    >
+      <span class='pretui-dock-item-glyph' aria-hidden='true'>
+        {{yield}}
+      </span>
+    </button>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-dock-item {
+          --pretui-dock-scale: 1;
+          width: calc(var(--pretui-dock-size, 40px) * var(--pretui-dock-scale));
+          height: calc(
+            var(--pretui-dock-size, 40px) * var(--pretui-dock-scale)
+          );
+          flex: none;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0;
+          border: 0;
+          border-radius: calc(var(--radius-surface, 10px) * 0.8);
+          background: var(--inset, var(--boxel-100));
+          color: var(--muted-foreground);
+          box-shadow: 0 0 0 1px var(--border);
+          cursor: pointer;
+          transition:
+            width var(--pretui-dur-snap, 180ms) var(--pretui-ease-snap, ease),
+            height var(--pretui-dur-snap, 180ms) var(--pretui-ease-snap, ease);
+        }
+        .pretui-dock-item:hover,
+        .pretui-dock-item:focus-visible {
+          --pretui-dock-scale: 1.4;
+          color: var(--foreground);
+        }
+        /* one-sibling falloff: next via `+`, previous via :has() */
+        .pretui-dock-item:hover + .pretui-dock-item,
+        .pretui-dock-item:has(+ .pretui-dock-item:hover) {
+          --pretui-dock-scale: 1.2;
+        }
+        .pretui-dock-item:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        .pretui-dock-item-glyph {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 55%;
+          height: 55%;
+          pointer-events: none;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-dock-item {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}
+
+export class Dock extends Component<DockSignature> {
+  get sizeStyle(): string {
+    return styleVar(
+      '--pretui-dock-size',
+      `${cssNumber(this.args.size, 0, 512) ?? 40}px`,
+    );
+  }
+  <template>
+    <div
+      class='pretui-dock'
+      role='toolbar'
+      aria-label={{if @label @label 'Dock'}}
+      style={{this.sizeStyle}}
+      data-test-pretui-dock
+      ...attributes
+    >
+      {{yield (hash Item=DockItem)}}
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        /* The rail's height is pinned to the RESTING item size; magnified
+           items grow upward past the rail top (overflow stays visible),
+           pushing siblings apart like the original's width animation. */
+        .pretui-dock {
+          display: inline-flex;
+          align-items: flex-end;
+          gap: var(--space-3, 8px);
+          height: calc(var(--pretui-dock-size, 40px) + 2 * var(--space-3, 8px));
+          padding: var(--space-3, 8px);
+          border-radius: var(--radius-surface, 10px);
+          background: var(--card);
+          box-shadow:
+            0 0 0 1px var(--border),
+            var(--pretui-shadow-card, 0 1px 3px rgba(20, 18, 26, 0.1));
+        }
+      }
+    </style>
+  </template>
+}

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

@@ -0,0 +1,42 @@
+## What it is
+
+A magnifying dock: a row of items that grow as the pointer approaches, like the macOS dock.
+
+## The contract
+
+```
+@size?  — base item size in px. Default 40
+@label? — accessible toolbar label. Default 'Dock'
+
+<:default> — yields { Item }, the magnifying slots
+```
+
+Two args. The item is yielded rather than imported, so it cannot be used outside a dock, where the magnification would have nothing to respond to.
+
+**The magnification is pointer proximity**, which means it does not exist for a keyboard user or on a touchscreen — the dock is a toolbar that happens to have an effect, and the effect is not load-bearing.
+
+## Prior art
+
+The macOS dock, and the same effect in web component kits.
+
+Where Pretui is better: it is a real toolbar with a real role underneath the effect, rather than a row of divs that magnify.
+
+Where it is thinner: no drag-to-reorder, no running indicators, no separators, and no overflow — a dock wider than its container clips.
+
+**A known gap:** it uses `role='toolbar'` without the toolbar keyboard contract — arrow-key navigation between items. That is a real defect rather than a simplification: a toolbar role promises arrow navigation, and a reader who tries it gets nothing.
+
+## Accessibility
+
+- **`role='toolbar'` with a label**, defaulting to 'Dock'.
+- **The missing arrow-key contract is the thing to know.** The role announces a keyboard model the component does not implement, which is worse than not claiming the role at all.
+- **The magnification conveys nothing.** It is decoration, and its absence for keyboard and touch users costs them no information.
+- **Each item needs its own name**, since a dock is usually glyphs.
+- **Reduced motion should hold the items at base size**, which is the resting state.
+
+## Theming
+
+`--pretui-dock-size` (from `@size`) and `--pretui-dock-scale` (the magnification factor), over the shared `--pretui-dur-snap` and `--pretui-ease-snap`.
+
+Keeping the scale as a token lets a theme dial the effect down — or to 1, which turns the dock into a plain toolbar without the caller changing anything.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

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

@@ -0,0 +1,114 @@
+// Pretui — Dock usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import {
+  Copy,
+  Eye,
+  Folder,
+  Grid3x3,
+  IconGlobe,
+} from '@cardstack/boxel-ui/icons';
+import { FreestyleUsage } from './freestyle-usage';
+import { Dock } from './dock';
+
+// ── Dock ← motion-primitives Dock ────────────────────────────────────────
+// Live knob: size (the original's panelHeight/base width pair collapses
+// to one square base size). Dropped surface: magnification + distance
+// (the continuous cursor-distance window becomes the fixed 1.4/1.2/1.0
+// sibling falloff), spring config (CSS transition instead), and the
+// DockLabel tooltip subcomponent (items carry title= from @label). Item
+// clicks land in @onClick — the readout below proves the wiring.
+const DOCK_APPS = [
+  { key: 'files', label: 'Files' },
+  { key: 'preview', label: 'Preview' },
+  { key: 'copy', label: 'Duplicate' },
+  { key: 'grid', label: 'Grid view' },
+  { key: 'publish', label: 'Publish' },
+];
+
+class DockUsage extends Component {
+  apps = DOCK_APPS;
+  @tracked size = 40;
+  @tracked lastClicked: string | null = null;
+  setSize = (v: number | null) => (this.size = v ?? 40);
+  clickFiles = (_e: Event) => (this.lastClicked = 'Files');
+  clickPreview = (_e: Event) => (this.lastClicked = 'Preview');
+  clickCopy = (_e: Event) => (this.lastClicked = 'Duplicate');
+  clickGrid = (_e: Event) => (this.lastClicked = 'Grid view');
+  clickPublish = (_e: Event) => (this.lastClicked = 'Publish');
+  get usage() {
+    return `<Dock @size={{${this.size}}} @label='Card actions' as |d|>\n  <d.Item @label='Files' @onClick={{this.openFiles}}>\n    <FolderIcon width='100%' height='100%' />\n  </d.Item>\n</Dock>`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='Dock'
+      @description="Magnifying shortcut rail — a toolbar row of square item slots that scale up near the hovered item: hovered 1.4×, immediate neighbors 1.2×, the rest resting at 1.0×. CSS-only: the falloff is :hover plus sibling selectors (`+` for the next item, :has() for the previous), animated by a width/height transition that reduced-motion removes (magnification then snaps). Items grow upward out of the rail, pushing siblings apart. Transcribed from motion-primitives Dock, which magnifies continuously by cursor DISTANCE with spring physics — the documented delta of the discrete sibling cut."
+      @source={{this.usage}}
+    >
+      <:example>
+        <div class='dock-host'>
+          <Dock @size={{this.size}} @label='Card actions' as |d|>
+            <d.Item @label='Files' @onClick={{this.clickFiles}}>
+              <Folder width='100%' height='100%' />
+            </d.Item>
+            <d.Item @label='Preview' @onClick={{this.clickPreview}}>
+              <Eye width='100%' height='100%' />
+            </d.Item>
+            <d.Item @label='Duplicate' @onClick={{this.clickCopy}}>
+              <Copy width='100%' height='100%' />
+            </d.Item>
+            <d.Item @label='Grid view' @onClick={{this.clickGrid}}>
+              <Grid3x3 width='100%' height='100%' />
+            </d.Item>
+            <d.Item @label='Publish' @onClick={{this.clickPublish}}>
+              <IconGlobe width='100%' height='100%' />
+            </d.Item>
+          </Dock>
+          {{#if this.lastClicked}}
+            <p class='dock-note'>Clicked: {{this.lastClicked}}</p>
+          {{/if}}
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.Number
+          @name='size'
+          @defaultValue={{40}}
+          @value={{this.size}}
+          @min={{28}}
+          @max={{64}}
+          @step={{4}}
+          @description='Base (resting) item size in px — the magnified sizes are 1.2× and 1.4× of this.'
+          @onInput={{this.setSize}}
+        />
+        <Args.String
+          @name='label'
+          @defaultValue='Dock'
+          @description='Accessible label for the toolbar rail.'
+          @hideControls={{true}}
+        />
+        <Args.Yield
+          @description='Yields { Item } — a real button per slot. Item args: @label (required; aria-label + title tooltip), @onClick. The default block is the glyph — size it 100%×100% so it rides the magnification.'
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+    <style scoped>
+      .dock-host {
+        display: grid;
+        gap: var(--space-3, 8px);
+        justify-items: start;
+        /* headroom for the 1.4× growth above the rail */
+        padding-top: 28px;
+      }
+      .dock-note {
+        margin: 0;
+        font-size: var(--text-ui-sm, 11.5px);
+        color: var(--muted-foreground);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_DOCK: Record<string, unknown> = {
+  Dock: DockUsage,
+};

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

@@ -0,0 +1,166 @@
+// Pretui — Drawer: a slide-over panel on the native <dialog> top layer.
+import Component from '@glimmer/component';
+import { emit } from '../pretui-primitives';
+import { provide } from 'ember-provide-consume-context';
+import { POPUPS_IN_PLACE, resolveDrawerPlacement, resolveOpen, modalBehavior } from '../internal/overlay';
+import type { PlacementArgs, DrawerPlacement, OpenArgs } from '../internal/overlay';
+
+// An agent asking for a "Sheet" means THIS component (shadcn's Sheet is a
+// slide-over; Pretui's Sheet is a spreadsheet grid). Vaul and shadcn spell
+// the edge `direction='right'`, Mantine `position='right'`, Radix `side`;
+// all three land on the logical `@placement` here — `right` → `end`.
+export interface DrawerSignature {
+  Args: OpenArgs &
+    PlacementArgs & {
+      /** Canonical close notify — optional, see Dialog. */
+      onClose?: () => void;
+      /** alias — the Radix/shadcn layer notify, called with `false` */
+      onOpenChange?: (open: boolean) => void;
+      label?: string;
+      placement?: DrawerPlacement | string;
+      dismissible?: boolean;
+    };
+  Blocks: { title: []; default: []; footer: [] };
+  Element: HTMLDialogElement;
+}
+
+export class Drawer extends Component<DrawerSignature> {
+  @provide(POPUPS_IN_PLACE)
+  get popupsInPlace() {
+    return true;
+  }
+  get dismissible() {
+    return this.args.dismissible ?? true;
+  }
+  get open() {
+    return resolveOpen(this.args);
+  }
+  get placement(): DrawerPlacement {
+    return resolveDrawerPlacement(this.args);
+  }
+  private requestClose() {
+    emit([this.args.onClose]);
+    emit([this.args.onOpenChange], false);
+  }
+  onCancel = (e: Event) => {
+    e.preventDefault();
+    if (this.dismissible) {
+      this.requestClose();
+    }
+  };
+  onClick = (e: Event) => {
+    if (this.dismissible && e.target === e.currentTarget) {
+      this.requestClose();
+    }
+  };
+  <template>
+    <dialog
+      class='pretui-drawer'
+      data-placement={{this.placement}}
+      aria-label={{@label}}
+      data-test-pretui-drawer
+      {{modalBehavior this.open this.onCancel this.onClick}}
+      ...attributes
+    >
+      <div class='pretui-drawer-inner'>
+        {{#if (has-block 'title')}}
+          <header class='pretui-drawer-title'>{{yield to='title'}}</header>
+        {{/if}}
+        <div class='pretui-drawer-body'>{{yield}}</div>
+        {{#if (has-block 'footer')}}
+          <footer class='pretui-drawer-footer'>{{yield to='footer'}}</footer>
+        {{/if}}
+      </div>
+    </dialog>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-drawer {
+          border: 0;
+          padding: 0;
+          background: var(--card);
+          color: var(--foreground);
+          box-shadow: var(--pretui-shadow-overlay, 0 0 0 1px var(--border), 0 12px 40px rgb(16 24 40 / 0.18));
+          font-family: var(--font-sans);
+          font-size: var(--text-body, 15px);
+          max-width: none;
+          max-height: none;
+        }
+        .pretui-drawer[data-placement='end'],
+        .pretui-drawer[data-placement='start'] {
+          width: min(var(--pretui-drawer-size, 360px), calc(100vw - 48px));
+          height: 100dvh;
+          margin-block: 0;
+        }
+        .pretui-drawer[data-placement='end'] {
+          margin-inline: auto 0;
+          border-radius: var(--radius-surface, 10px) 0 0 var(--radius-surface, 10px);
+        }
+        .pretui-drawer[data-placement='start'] {
+          margin-inline: 0 auto;
+          border-radius: 0 var(--radius-surface, 10px) var(--radius-surface, 10px) 0;
+        }
+        .pretui-drawer[data-placement='bottom'] {
+          width: 100vw;
+          margin: auto 0 0;
+          max-height: min(var(--pretui-drawer-size, 420px), 80dvh);
+          border-radius: var(--radius-surface, 10px) var(--radius-surface, 10px) 0 0;
+        }
+        .pretui-drawer::backdrop {
+          background: var(--pretui-overlay-scrim, rgb(16 24 40 / 0.4));
+        }
+        .pretui-drawer[open] {
+          opacity: 1;
+          transform: none;
+          transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1),
+            transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
+        }
+        @starting-style {
+          .pretui-drawer[open][data-placement='end'] {
+            opacity: 0;
+            transform: translateX(24px);
+          }
+          .pretui-drawer[open][data-placement='start'] {
+            opacity: 0;
+            transform: translateX(-24px);
+          }
+          .pretui-drawer[open][data-placement='bottom'] {
+            opacity: 0;
+            transform: translateY(24px);
+          }
+        }
+        .pretui-drawer-inner {
+          display: grid;
+          grid-template-rows: auto 1fr auto;
+          gap: var(--space-4, 11px);
+          padding: var(--space-6, 19px);
+          height: 100%;
+          box-sizing: border-box;
+          align-content: start;
+        }
+        .pretui-drawer-title {
+          font-size: var(--text-heading, 19px);
+          font-weight: var(--weight-heading, 700);
+          letter-spacing: var(--track-heading, -0.02em);
+        }
+        .pretui-drawer-body {
+          overflow-y: auto;
+          color: var(--muted-foreground);
+          line-height: calc(var(--leading-body, 24px) / var(--text-body, 15px));
+        }
+        .pretui-drawer-footer {
+          display: flex;
+          justify-content: flex-end;
+          gap: var(--space-3, 8px);
+          border-top: 1px solid var(--border);
+          padding-top: var(--space-4, 11px);
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-drawer[open] {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>
+}
+