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

package/bundled-realms/pretui/demo-forms-expression.gts

@@ -0,0 +1,76 @@
+// Pretui — demo-forms-expression: the resources and condition helper the rule-builder usage pages share.
+import type { SelectOption } from './components/select';
+import { newCondition } from './internal/forms-expression';
+import type { ExpressionCondition, ExpressionResource } from './internal/forms-expression';
+import { SUPPLIERS, TEAS } from './examples';
+
+// ── The record shape the rules are written against ───────────────────────
+// Every `value` is a BXL label path, already quoted where it needs quoting.
+// The last one is a PREDICATE path: it contains dots, brackets, quotes and a
+// space, which is exactly why nothing in this territory ever splits a path.
+
+const STAGE_OPTIONS: SelectOption[] = [
+  { value: 'Sourcing', label: 'Sourcing' },
+  { value: 'Cupping', label: 'Cupping' },
+  { value: 'Negotiation', label: 'Negotiation' },
+  { value: 'Closed Won', label: 'Closed Won' },
+  { value: 'Closed Lost', label: 'Closed Lost' },
+];
+
+const SUPPLIER_OPTIONS: SelectOption[] = SUPPLIERS.slice(0, 8).map((s) => ({
+  value: s,
+  label: s,
+}));
+
+const GRADE_OPTIONS: SelectOption[] = TEAS.slice(0, 6).map((t) => ({
+  value: t,
+  label: t,
+}));
+
+const BOOLEAN_OPTIONS: SelectOption[] = [
+  { value: 'true', label: 'Yes' },
+  { value: 'false', label: 'No' },
+];
+
+export const REQUEST_RESOURCES: ExpressionResource[] = [
+  { value: 'Total', label: 'Total', type: 'currency' },
+  { value: '"Approved Budget"', label: 'Approved Budget', type: 'currency' },
+  { value: '"Approver Email"', label: 'Approver Email', type: 'text' },
+  { value: 'Stage', label: 'Stage', type: 'picklist', options: STAGE_OPTIONS },
+  {
+    value: 'Supplier',
+    label: 'Supplier',
+    type: 'picklist',
+    options: SUPPLIER_OPTIONS,
+  },
+  { value: 'Lot', label: 'Lot', type: 'picklist', options: GRADE_OPTIONS },
+  {
+    value: '"Requested Delivery Days"',
+    label: 'Requested Delivery Days',
+    type: 'number',
+  },
+  { value: '"Close Date"', label: 'Close Date', type: 'date' },
+  {
+    value: '"Terms Accepted"',
+    label: 'Terms Accepted',
+    type: 'boolean',
+    options: BOOLEAN_OPTIONS,
+  },
+  {
+    value: '"Line Item"[SKU = "DHP-04"].Quantity',
+    label: 'Line item DHP-04 · Quantity',
+    type: 'number',
+  },
+];
+
+export const LOGIC_KNOB = ['all', 'any', 'custom', 'always'];
+
+export function condition(
+  targetPath: string,
+  operator: string,
+  value: string,
+  valueKind?: 'literal' | 'path',
+): ExpressionCondition {
+  return newCondition({ targetPath, operator, value, valueKind });
+}
+

package/bundled-realms/pretui/demo-forms-record.gts

@@ -0,0 +1,16 @@
+// Pretui — demo-forms-record: the seed and option helpers the CompoundField and RecordDetail usage pages share.
+import type { SelectOption } from './components/select';
+import { seedFrom } from './examples';
+
+export const SEED = seedFrom('pretui-forms-record');
+
+/** The record's values are PLAIN — no FieldDef anywhere in this territory —
+ *  so an editor block gets `unknown` and coerces at the boundary it owns. */
+export function str(value: unknown): string {
+  return value === null || value === undefined ? '' : String(value);
+}
+
+export function asOptions(values: string[]): SelectOption[] {
+  return values.map((v) => ({ value: v, label: v }));
+}
+

package/bundled-realms/pretui/demo-foundations-more.gts

@@ -0,0 +1,10 @@
+// Pretui — demo-foundations-more: the layout and receipt wrappers the foundation usage pages share.
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+interface LayoutSignature { Blocks: { default: [] } }
+export const DemoStack: TemplateOnlyComponent<LayoutSignature> = <template><div class='demo-stack'>{{yield}}</div><style scoped>.demo-stack { display: grid; gap: 9px; }</style></template>;
+export const DemoRow: TemplateOnlyComponent<LayoutSignature> = <template><div class='demo-row'>{{yield}}</div><style scoped>.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6, 19px); }</style></template>;
+
+interface ReceiptSignature { Blocks: { default: [] } }
+export const DemoReceipt: TemplateOnlyComponent<ReceiptSignature> = <template><span class='demo-receipt'>{{yield}}</span><style scoped>.demo-receipt { color: var(--muted-foreground); font-family: var(--font-mono); font-size: var(--text-ui-xs); }</style></template>;
+

package/bundled-realms/pretui/demo-foundations.gts

@@ -0,0 +1,8 @@
+// Pretui — demo-foundations: the lot rows the Table and DataGrid usage pages share.
+
+export const LOT_ROWS = [
+  { lot: 'B-101', tea: 'White Peony', origin: 'Fuding', chests: 75 },
+  { lot: 'B-102', tea: 'Da Hong Pao', origin: 'Wuyishan', chests: 196 },
+  { lot: 'B-103', tea: 'Gyokuro', origin: 'Shizuoka', chests: 65 },
+];
+

package/bundled-realms/pretui/demo-ink-feedback.gts

@@ -0,0 +1,12 @@
+// Pretui — demo-ink-feedback: the hue rail the ink and feedback usage pages share.
+
+export const HUE_OPTIONS = [
+  '',
+  'var(--chart-1)',
+  'var(--chart-2)',
+  'var(--chart-3)',
+  'var(--chart-4)',
+  'var(--chart-5)',
+  'var(--warning)',
+];
+

package/bundled-realms/pretui/demo-json.gts

@@ -0,0 +1,17 @@
+// Pretui — demo-json: the sample document the JsonEditor usage page renders.
+/** The awkward document. Every oddity here is load-bearing for a demo. */
+export const SAMPLE = [
+  '{',
+  '  "order": "SO-4471",',
+  '  "customer": { "name": "Ada Lovelace", "email": "ada@example.com", "vip": true },',
+  '  "ledgerId": 9007199254740993,',
+  '  "note": "",',
+  '  "cancelledAt": null,',
+  '  "lines": [',
+  '    { "sku": "TEA-001", "qty": 2, "unit": 12.5 },',
+  '    { "sku": "TEA-014", "qty": 1, "unit": 31 },',
+  '    { "sku": "POT-002", "qty": 1, "unit": 48.75 }',
+  '  ],',
+  '  "meta": { "channel": { "source": { "campaign": "spring", "medium": "email" } } }',
+  '}',
+].join('\n');

package/bundled-realms/pretui/demo-locations.ts

@@ -0,0 +1,103 @@
+// Pretui — where each component's usage page and examples live, loaded on
+// demand.
+//
+// A page lives at components/<kebab-name>.usage, beside the component it
+// documents. Nothing here imports a page: the Spec card loads the one it
+// shows when it renders, so the card's import closure stays the modules it
+// draws rather than every page and every component they reach.
+import type { Loader } from '@cardstack/runtime-common';
+import type { ExampleSpec } from './examples-kit';
+
+export interface DemoSubject {
+  name: string;
+  implementationStatus?: string;
+  ownership?: string;
+  tier?: string;
+}
+
+function kebabName(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * The module holding `subject`'s usage page, relative to the realm root. Every
+ * entry is looked up by its name, whatever its status, ownership or tier: a
+ * planned, host or Runtime entry that has a page shows it.
+ */
+export function demoModuleFor(subject: DemoSubject): string {
+  return `./components/${kebabName(subject.name)}.usage`;
+}
+
+/** Unbuilt, host and Runtime entries often have no page; that is not worth a warning. */
+function pageExpected(subject: DemoSubject): boolean {
+  return !(
+    subject.implementationStatus === 'planned' ||
+    subject.implementationStatus === 'designed' ||
+    subject.ownership === 'host' ||
+    subject.tier === 'Runtime'
+  );
+}
+
+/** The page `name` is registered under among a module's `DEMOS_*` exports. */
+function demoIn(
+  mod: Record<string, unknown>,
+  name: string,
+): unknown | undefined {
+  for (let [exportName, value] of Object.entries(mod)) {
+    if (!exportName.startsWith('DEMOS_') || !value) continue;
+    let page = (value as Record<string, unknown>)[name];
+    if (page) {
+      return page;
+    }
+  }
+  return undefined;
+}
+
+// the realm loader hands each module its own loader on import.meta
+function meta(): ImportMeta & { loader: Loader } {
+  // @ts-ignore tsc checks realm modules as CommonJS and rejects import.meta
+  return import.meta as ImportMeta & { loader: Loader };
+}
+
+/** The URL of a module in this package, wherever the package is served. */
+export function siblingHref(path: string): string {
+  return new URL(path, meta().url).href;
+}
+
+async function importSibling(path: string): Promise<Record<string, unknown>> {
+  return (await meta().loader.import(siblingHref(path))) as Record<
+    string,
+    unknown
+  >;
+}
+
+/** A 404 for the page itself, not for a module the page imports. */
+function isMissingPage(e: unknown, href: string): boolean {
+  let { status, deps } = (e ?? {}) as { status?: number; deps?: string[] };
+  return (
+    status === 404 && (!deps?.length || deps.some((d) => d.startsWith(href)))
+  );
+}
+
+/** Load `subject`'s usage page; undefined when it has none or its module fails to load. */
+export async function loadDemo(
+  subject: DemoSubject,
+): Promise<unknown | undefined> {
+  let path = demoModuleFor(subject);
+  try {
+    return demoIn(await importSibling(path), subject.name);
+  } catch (e) {
+    if (pageExpected(subject) || !isMissingPage(e, siblingHref(path))) {
+      console.warn(`Pretui: no usage page for ${subject.name} at ${path}`, e);
+    }
+    return undefined;
+  }
+}
+
+/** Load the example gallery registered for `name` in ./examples, if any. */
+export async function loadExamples(
+  name: string,
+): Promise<ExampleSpec[] | undefined> {
+  let mod = await importSibling('./examples');
+  return (mod.EXAMPLES as Record<string, ExampleSpec[]>)[name];
+}

package/bundled-realms/pretui/demo-media-library.gts

@@ -0,0 +1,101 @@
+// Pretui — demo-media-library: usage pages for AssetWell and Gallery.
+//
+// Everything on these pages works with no network. The pictures are the
+// deterministic SVG posters `media-examples.gts` builds from a seeded hash,
+// so a "photograph" here is arithmetic and the pages render identically on
+// every machine and in every test run.
+//
+// The AssetWell page is a state machine you can drive by hand: the four
+// states are switches in the properties rail rather than four separate
+// examples, because the whole point of the component is that they are ONE
+// slot with one layout and nothing jumps between them.
+import Component from '@glimmer/component';
+
+import { FreestyleUsage } from './components/freestyle-usage';
+import { Gallery } from './components/gallery';
+import type { MediaAssetSpec } from './internal/media-viewer';
+import { platePoster, TONE_ASSET } from './media-examples';
+
+// ── Fixtures ─────────────────────────────────────────────────────────────
+
+/** Deliberately mixed ratios — a square, a portrait, two panoramas — because
+ * the intrinsic rail is the claim and a set of identical 4:3 plates would
+ * hide whether it is true. */
+const PLATES: Array<[string, number, number]> = [
+  ['Chest 118, front', 1600, 1067],
+  ['Grading chart', 2400, 800],
+  ['Second flush, wet leaf', 1200, 1200],
+  ['Manifest, page 3', 1000, 1414],
+  ['Auction floor', 2000, 1333],
+  ['Estate boundary, aerial', 2600, 780],
+  ['Cupping table', 1500, 1000],
+  ['Dust grade macro', 1100, 1100],
+];
+
+export const GALLERY_SET: readonly MediaAssetSpec[] = PLATES.map(
+  ([name, width, height]) => ({
+    src: platePoster(name, `${width} / ${height}`),
+    thumbnail: platePoster(name, `${width} / ${height}`),
+    name,
+    kind: 'image' as const,
+    mimeType: 'image/svg+xml',
+    alt: `${name} — a generated stand-in plate`,
+    width,
+    height,
+  }),
+);
+
+/** One non-image in the set, so the hero's adapter routing is visible rather
+ * than asserted: selecting it swaps the stage to an audio player without the
+ * gallery knowing what an audio player is. */
+export const MIXED_SET: readonly MediaAssetSpec[] = GALLERY_SET.slice(0, 5).concat([
+  TONE_ASSET,
+]);
+
+// ── Gallery, mixed kinds ─────────────────────────────────────────────────
+
+class GalleryMixedDemo extends Component {
+  mixed = MIXED_SET;
+
+  get usage(): string {
+    return [
+      '<Gallery',
+      '  @assets={{this.mixed}}',
+      "  @label='Lot 118 — pictures and the tasting note'",
+      "  @ratio='16 / 9'",
+      '/>',
+    ].join('\n');
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='Gallery — mixed kinds'
+      @description='The adapter contract doing its job. Five pictures and one audio file in one set: step to the last cell and the stage swaps to an audio player, with transport and captions, without Gallery knowing what an audio player is. That is the whole value of MediaViewer being the hero — a later kind (PDF, SVG, font, CAD) is an adapter registration, not a rewrite of this component. The rail marks the non-image with its own kind glyph and duration badge, so the swap is not a surprise.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <Gallery
+          @assets={{this.mixed}}
+          @label='Lot 118 — pictures and the tasting note'
+          @ratio='16 / 9'
+          @selectionMode='single'
+        />
+      </:example>
+
+      <:api as |Args|>
+        <Args.Array
+          @name='assets'
+          @description='Five generated plates and the six-second tone that media-examples.gts builds from twelve fixed notes. Nothing here touches the network.'
+          @value={{this.mixed}}
+          @hideControls={{true}}
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+// ── The registry ─────────────────────────────────────────────────────────
+
+export const DEMOS_MEDIA_LIBRARY: Record<string, unknown> = {
+  GalleryMixed: GalleryMixedDemo,
+};

package/bundled-realms/pretui/demo-media.gts

@@ -0,0 +1,6 @@
+// Pretui — demo-media: the chrome options the media player usage pages share.
+
+export const CHROMES: string[] = ['full', 'compact', 'minimal', 'none'];
+
+// ── The registry ─────────────────────────────────────────────────────────
+

package/bundled-realms/pretui/demo-menu.gts

@@ -0,0 +1,182 @@
+// Pretui — demo-menu: the `MenuState` fixture and platform options the menu usage pages share.
+import GlimmerComponent from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type { MenuEntry, ShortcutPlatform } from './internal/menu';
+
+export const PLATFORM_OPTIONS = ['apple', 'other'];
+
+/**
+ * The whole taxonomy in one tree: commands with shortcuts, an ellipsis item,
+ * a default (bold) item, a dynamic item that swaps while Option/Alt is held,
+ * a checkmark toggle in mixed state, a radio group, a submenu, a section
+ * header, a separator, and a destructive item sitting alone at the end.
+ */
+export class MenuState extends GlimmerComponent {
+  @tracked align = 'start';
+  @tracked platform: string = 'apple';
+  @tracked notes: boolean | 'mixed' = 'mixed';
+  @tracked grade = 'cupping';
+  @tracked pinned = false;
+  @tracked log = '—';
+  @tracked paletteOpen = false;
+
+  setAlign = (value: string) => (this.align = value);
+  setPlatform = (value: string) => (this.platform = value);
+  openPalette = () => (this.paletteOpen = true);
+  closePalette = () => (this.paletteOpen = false);
+
+  get alignValue() {
+    return this.align as 'start' | 'end';
+  }
+  get platformValue() {
+    return this.platform as ShortcutPlatform;
+  }
+
+  private ran = (what: string) => () => (this.log = what);
+
+  // Handlers live OUT of the `items` getter: an assignment lexically inside a
+  // getter is a side effect in a computed, which realm lint rejects — and it
+  // is the right shape anyway, since the tree is data and these are actions.
+  setNotes = (next: boolean) => {
+    this.notes = next;
+    this.log = next ? 'Cupping notes on' : 'Cupping notes off';
+  };
+  setPinned = (next: boolean) => {
+    this.pinned = next;
+    this.log = next ? 'Pinned to desk' : 'Unpinned';
+  };
+  sortByCupping = () => {
+    this.grade = 'cupping';
+    this.log = 'Sort: cupping score';
+  };
+  sortByArrival = () => {
+    this.grade = 'arrival';
+    this.log = 'Sort: arrival date';
+  };
+  sortByOrigin = () => {
+    this.grade = 'origin';
+    this.log = 'Sort: origin';
+  };
+
+  get items(): MenuEntry[] {
+    return [
+      {
+        label: 'Open lot',
+        kbd: 'Mod+O',
+        isDefault: true,
+        icon: 'rectangle-horizontal',
+        onSelect: this.ran('Open lot'),
+      },
+      {
+        label: 'Duplicate',
+        kbd: 'Mod+D',
+        icon: 'copy',
+        // dynamic item: hold Option/Alt and this becomes "Duplicate 10×"
+        alt: { label: 'Duplicate 10×', kbd: 'Mod+Alt+D' },
+        onSelect: this.ran('Duplicate'),
+      },
+      {
+        label: 'Rename',
+        // the ellipsis is a promise that a dialog is coming — the component
+        // appends U+2026 so no caller can type three periods instead
+        needsInput: true,
+        kbd: 'Enter',
+        icon: 'pencil',
+        onSelect: this.ran('Rename…'),
+      },
+      '---',
+      {
+        kind: 'toggle',
+        label: 'Show cupping notes',
+        kbd: 'Mod+Shift+N',
+        checked: this.notes,
+        description: 'Three of five selected lots have notes shown',
+        onChange: this.setNotes,
+      },
+      {
+        kind: 'toggle',
+        label: 'Pin to desk',
+        checked: this.pinned,
+        onChange: this.setPinned,
+      },
+      '---',
+      {
+        kind: 'section',
+        label: 'Sort by',
+        items: [
+          {
+            kind: 'radio',
+            group: 'grade',
+            label: 'Cupping score',
+            checked: this.grade === 'cupping',
+            onSelect: this.sortByCupping,
+          },
+          {
+            kind: 'radio',
+            group: 'grade',
+            label: 'Arrival date',
+            checked: this.grade === 'arrival',
+            onSelect: this.sortByArrival,
+          },
+          {
+            kind: 'radio',
+            group: 'grade',
+            label: 'Origin',
+            checked: this.grade === 'origin',
+            onSelect: this.sortByOrigin,
+          },
+        ],
+      },
+      '---',
+      {
+        kind: 'submenu',
+        label: 'Share',
+        icon: 'send',
+        items: [
+          {
+            label: 'Copy lot link',
+            kbd: 'Mod+Shift+C',
+            keywords: 'url permalink',
+            onSelect: this.ran('Copy lot link'),
+          },
+          {
+            label: 'Email the grower',
+            needsInput: true,
+            onSelect: this.ran('Email the grower…'),
+          },
+          '---',
+          {
+            kind: 'submenu',
+            label: 'Export as',
+            items: [
+              { label: 'CSV', onSelect: this.ran('Export CSV') },
+              { label: 'Contract PDF', onSelect: this.ran('Export PDF') },
+            ],
+          },
+          {
+            label: 'Publish to catalog',
+            disabled: true,
+            description: 'Needs a signed contract first',
+          },
+        ],
+      },
+      {
+        label: 'Move to warehouse',
+        kbd: 'Mod+M',
+        disabled: true,
+        onSelect: this.ran('Move'),
+      },
+      // HIG: destructive commands sit apart, below a separator, at the end —
+      // never adjacent to a common command where a slip lands on them
+      '---',
+      {
+        label: 'Withdraw lot',
+        kbd: 'Mod+Backspace',
+        destructive: true,
+        needsInput: true,
+        onSelect: this.ran('Withdraw lot…'),
+      },
+    ];
+  }
+}
+

package/bundled-realms/pretui/demo-motion-core.gts

@@ -0,0 +1,4 @@
+// Pretui — demo-motion-core: the entrance presets the motion-primitive usage pages share.
+
+export const PRESETS = ['fade', 'rise', 'fall', 'scale', 'slide'];
+

package/bundled-realms/pretui/demo-motion-pointer.gts

@@ -0,0 +1,21 @@
+// Pretui — demo-motion-pointer: the seeded lot fixtures the pointer-motion usage pages share.
+import {
+  PLACES,
+  TEAS,
+  pick,
+  seedFrom,
+} from './examples';
+
+export function lots(seed: string): { tea: string; place: string; lot: string }[] {
+  let s = seedFrom(seed);
+  let out: { tea: string; place: string; lot: string }[] = [];
+  for (let i = 0; i < 3; i++) {
+    out.push({
+      tea: pick(s, i, TEAS),
+      place: pick(s, i + 7, PLACES),
+      lot: `B-${1100 + i * 41}`,
+    });
+  }
+  return out;
+}
+

package/bundled-realms/pretui/demo-reading-format.gts

@@ -0,0 +1,10 @@
+// Pretui — demo-reading-format: the option lists the format usage pages share.
+
+export const SPOKEN_MODES = ['auto', 'always', 'off'];
+export const NUMBER_STYLES = ['decimal', 'currency', 'percent', 'unit'];
+// Typed as the union rather than string[] so the notation matrix can be
+// iterated straight into @notation. Assignable to string[] for @options.
+export const NOTATIONS: Array<'standard' | 'compact' | 'scientific' | 'engineering'> =
+  ['standard', 'compact', 'scientific', 'engineering'];
+export const LOCALES = ['en-US', 'de-DE', 'fr-FR', 'hi-IN', 'ja-JP', 'ar-EG'];
+