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

package/bundled-realms/pretui/index.json

@@ -0,0 +1,11 @@
+{
+  "data": {
+    "type": "card",
+    "meta": {
+      "adoptsFrom": {
+        "module": "https://cardstack.com/base/workspace",
+        "name": "Workspace"
+      }
+    }
+  }
+}

package/bundled-realms/pretui/internal/agentic-chat.gts

@@ -0,0 +1,101 @@
+// Pretui — agentic territory, the conversation surface.
+//
+// Five components that live in and around an agent transcript, plus the one
+// primitive all five needed:
+//
+//   Collapse        the collapse mechanism (grid 0fr→1fr + `inert`)
+//   Composer          the prompt bar — modes, attachments, queue awareness
+//   InteractiveInput  the agent asks for a TYPED value, then re-runs
+//   Thinking          the reasoning-trace rail
+//   CompactionChip    history compaction, rendered rather than silent
+//   JumpChip          "new message" / "back to bottom" scroll orientation
+//
+// Source: `pretui-extractions/agent-work-items.md` items 7, 10, 11, 14, 15
+// and the design mirror's `components/agentic/{Composer,Thinking}.jsx`.
+//
+// Everything here is a presentational shell over caller-supplied data: none
+// of it owns a state machine, talks to a model, or keeps a transcript. The
+// only state a component holds is its own disclosure/mode/draft, and every
+// one of those is controllable from outside (pass the arg and you own it).
+//
+// **Better than the inspiration.** The design-mirror JSX these descend from
+// (and the Claude/Copilot surfaces behind it) collapse content with
+// `gridTemplateRows: 0fr` and `opacity: 0` alone — the collapsed subtree
+// stays in the accessibility tree and stays tabbable, so a keyboard user
+// tabs into a panel they cannot see. `Collapse` adds `inert`, which is the
+// platform's own answer, and wires `aria-controls`/`aria-expanded` from ids
+// the components mint themselves rather than asking the caller for one.
+// Composer's mode note is a `role='status'` (upstream renders it as inert
+// prose, so switching Ask→Act announces nothing); InteractiveInput is a real
+// `<fieldset>` of native radios instead of a div soup of swatches, which is
+// how it gets arrow keys, Home/End and grouped announcement for free.
+//
+// Realm laws observed throughout: no timers anywhere (every reveal is CSS
+// with a precomputed delay), no `Date.now()`/`Math.random()`, no named
+// container queries, boolean attributes bound as `true | undefined`, and the
+// one event listener that exists (`scrollEdge`) lives in an `ember-modifier`
+// and removes itself in the destructor.
+//
+// Pretui — Collapse: the kit's inline 0fr → 1fr collapse, shared by the agentic components (not a catalog component).
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+// ── Collapse ───────────────────────────────────────────────────────────
+// The kit's inline collapse: a grid whose single row animates 0fr → 1fr, so
+// the panel grows to its own content height with no measured pixel value and
+// no timer. Extracted here because Thinking, CompactionChip, TaskRow,
+// DocReport and Recommendation all needed the identical mechanism — one
+// implementation, correct once.
+//
+// The correctness that upstream copies of this trick miss: a zero-height
+// grid row still contains a focusable, announced subtree. `inert` removes it
+// from the tab order and the accessibility tree in one attribute, and it is
+// bound as `true | undefined` because Glimmer assigns dynamic attributes
+// through the DOM property — `inert={{''}}` would silently do nothing.
+
+export interface CollapseSignature {
+  Args: {
+    /** whether the panel is revealed; the caller owns this */
+    open?: boolean;
+  };
+  Blocks: { default: [] };
+  Element: HTMLDivElement;
+}
+
+export const Collapse: TemplateOnlyComponent<CollapseSignature> =
+  <template>
+    <div
+      class='pretui-disclosure'
+      data-open={{if @open 'true'}}
+      inert={{unless @open true}}
+      data-test-pretui-disclosure
+      ...attributes
+    >
+      <div class='pretui-disclosure-inner'>{{yield}}</div>
+    </div>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-disclosure {
+          display: grid;
+          grid-template-rows: 0fr;
+          opacity: 0;
+          transition:
+            grid-template-rows var(--pretui-disclosure-duration, 320ms)
+              var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1)),
+            opacity 180ms linear;
+        }
+        .pretui-disclosure[data-open] {
+          grid-template-rows: 1fr;
+          opacity: 1;
+        }
+        .pretui-disclosure-inner {
+          overflow: hidden;
+          min-height: 0;
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-disclosure {
+            transition: none;
+          }
+        }
+      }
+    </style>
+  </template>;

package/bundled-realms/pretui/internal/blocks.gts

@@ -0,0 +1,35 @@
+// Pretui — blocks: stateless sample assemblies (the Blocks tier).
+//
+// A BLOCK is not a component. It takes all of its data through args,
+// composes components the kit already ships, and owns nothing persistent —
+// no @tracked, no state machine, no timers, no internal selection. The
+// moment one of these needs to remember something between renders it has
+// stopped being a block and become a component, and it moves out of this
+// file. That line is the whole point of the tier: blocks are how the kit
+// shows what its components look like standing next to each other, and a
+// block that hides state is a lie about composition.
+//
+// Corollary, and it is load-bearing: there is almost no new CSS here beyond
+// layout and the kit's variant recipes. Where one of these blocks
+// wanted a visual treatment the kit does not own, the gap is written down
+// in the doc comment as a finding against the COMPONENT rather than patched
+// locally. `!important`, `:deep()` and `:global()` do not appear, and the
+// reason they do not appear is that nothing here reaches into a child.
+//
+// Sourced from boxel-catalog.md Bucket 3 (B1–B4). Every source defect named
+// there is listed against the block that inherits the idea, with what this
+// cut does instead.
+//
+// Pretui — the heading-level contract every block shares.
+
+/** Heading level a block's own headline should occupy in the host page.
+ * A block cannot know where it sits, so the caller says. */
+export type BlockHeadingLevel = 1 | 2 | 3 | 4;
+
+/** `aria-level` for the block's `<h2>`, or `undefined` at the native level
+ * so no redundant attribute is emitted. Every block renders a real heading
+ * element and overrides only the LEVEL, which is the one thing that is a
+ * property of the page rather than of the block. */
+export function ariaLevelFor(level: BlockHeadingLevel | undefined) {
+  return level === undefined || level === 2 ? undefined : String(level);
+}

package/bundled-realms/pretui/internal/choice-cards.gts

@@ -0,0 +1,258 @@
+// Pretui — RadioCard and CheckboxCard: a choice where each option is a card.
+// The card is the label and the hit target; a real radio or checkbox sits
+// inside it, so the keyboard model and the group semantics are the
+// platform's, and `@name` makes the group a form field. Selection reads as the tone hairline around the card,
+// not a heavier border, and the small mark in the corner echoes Checkbox and
+// RadioGroup so the three read as one family.
+//
+// Pretui — the card cloth and grid shared by RadioCard and CheckboxCard.
+import { on } from '@ember/modifier';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+export interface ChoiceCardOption {
+  value: string;
+  title: string;
+  description?: string;
+  /** a short trailing figure — a price, a quota, a count */
+  meta?: string;
+  disabled?: boolean;
+}
+
+export type ChoiceCardOrientation = 'vertical' | 'horizontal';
+
+interface OptionCardSignature {
+  Args: {
+    kind: 'radio' | 'checkbox';
+    option: ChoiceCardOption;
+    /** the form field name; radios also group by it */
+    name?: string;
+    selected: boolean;
+    disabled: boolean;
+    onChange: (ev: Event) => void;
+    /** the owner has a default block that replaces the generated body */
+    custom: boolean;
+    /** the owner has a media block */
+    hasMedia: boolean;
+  };
+  Blocks: {
+    default: [option: ChoiceCardOption, selected: boolean];
+    media: [option: ChoiceCardOption];
+  };
+  Element: HTMLLabelElement;
+}
+
+// The card cloth, written once for both kinds.
+export const OptionCard: TemplateOnlyComponent<OptionCardSignature> = <template>
+  <label
+    class='pretui-optioncard'
+    data-kind={{@kind}}
+    data-selected={{if @selected 'true' 'false'}}
+    data-disabled={{if @disabled 'true' 'false'}}
+    ...attributes
+  >
+    <input
+      type={{@kind}}
+      class='pretui-optioncard-input'
+      name={{@name}}
+      value={{@option.value}}
+      checked={{@selected}}
+      disabled={{@disabled}}
+      {{on 'change' @onChange}}
+    />
+    {{#if @hasMedia}}
+      <span class='pretui-optioncard-media'>{{yield @option to='media'}}</span>
+    {{/if}}
+    <span class='pretui-optioncard-body'>
+      {{#if @custom}}
+        {{yield @option @selected}}
+      {{else}}
+        <span class='pretui-optioncard-title'>{{@option.title}}</span>
+        {{#if @option.description}}
+          <span class='pretui-optioncard-desc'>{{@option.description}}</span>
+        {{/if}}
+      {{/if}}
+    </span>
+    {{#if @option.meta}}
+      <span class='pretui-optioncard-meta'>{{@option.meta}}</span>
+    {{/if}}
+    <span class='pretui-optioncard-mark' aria-hidden='true'></span>
+  </label>
+  <style scoped>
+    @layer PretComponent {
+      .pretui-optioncard {
+        --oc-pad: var(--space-4, 0.6875rem);
+        --oc-gap: var(--space-3, 0.5rem);
+        --oc-text: var(--text-ui-md, 0.78rem);
+        --oc-small: var(--text-ui-sm, 0.72rem);
+        --oc-strong: var(--weight-strong, 600);
+        --oc-radius: var(--radius-surface, 0.625rem);
+        --oc-snap: var(--pretui-dur-snap, 180ms) var(--pretui-ease-snap, ease);
+        --oc-shadow: var(--pretui-shadow-control, 0 1px 2px rgb(0 0 0 / 0.04));
+        --oc-highlight: var(--pretui-edge-highlight, inset 0 1px 0 rgb(255 255 255 / 0.14));
+        --oc-tone: var(--primary);
+        --oc-mark: 0.9375rem;
+        position: relative;
+        display: flex;
+        align-items: flex-start;
+        gap: var(--oc-gap);
+        min-inline-size: 0;
+        padding: var(--oc-pad);
+        padding-inline-end: calc(var(--oc-pad) * 2 + var(--oc-mark));
+        background-color: var(--card);
+        color: var(--card-foreground);
+        border-radius: var(--oc-radius);
+        box-shadow:
+          0 0 0 1px var(--border),
+          var(--oc-shadow);
+        font-size: var(--oc-text);
+        cursor: pointer;
+        transition:
+          box-shadow var(--oc-snap),
+          background-color var(--oc-snap);
+      }
+      .pretui-optioncard:hover {
+        background-color: var(--hover);
+      }
+      .pretui-optioncard[data-selected='true'] {
+        box-shadow:
+          0 0 0 1px var(--oc-tone),
+          0 0 0 4px color-mix(in oklch, var(--oc-tone) 12%, transparent),
+          var(--oc-shadow);
+      }
+      .pretui-optioncard:has(.pretui-optioncard-input:focus-visible) {
+        outline: 2px solid var(--ring);
+        outline-offset: 2px;
+      }
+      .pretui-optioncard[data-disabled='true'] {
+        opacity: 0.45;
+        cursor: default;
+      }
+      /* the real control: in the tree and in the tab order, painted by the mark */
+      .pretui-optioncard-input {
+        position: absolute;
+        inline-size: 1px;
+        block-size: 1px;
+        margin: 0;
+        opacity: 0;
+        pointer-events: none;
+      }
+      .pretui-optioncard-media {
+        flex: none;
+        display: inline-flex;
+      }
+      .pretui-optioncard-body {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+        min-inline-size: 0;
+      }
+      .pretui-optioncard-title {
+        font-weight: var(--oc-strong);
+      }
+      .pretui-optioncard-desc {
+        font-size: var(--oc-small);
+        color: var(--muted-foreground);
+      }
+      .pretui-optioncard-meta {
+        flex: none;
+        font-size: var(--oc-small);
+        font-variant-numeric: tabular-nums;
+        color: var(--muted-foreground);
+        white-space: nowrap;
+      }
+      .pretui-optioncard-mark {
+        position: absolute;
+        inset-block-start: var(--oc-pad);
+        inset-inline-end: var(--oc-pad);
+        inline-size: var(--oc-mark);
+        block-size: var(--oc-mark);
+        display: grid;
+        place-content: center;
+        border-radius: 50%;
+        background-color: var(--field);
+        box-shadow: 0 0 0 1px var(--input);
+        transition:
+          background-color var(--oc-snap),
+          box-shadow var(--oc-snap);
+      }
+      .pretui-optioncard[data-kind='checkbox'] .pretui-optioncard-mark {
+        border-radius: 0.3125rem;
+      }
+      .pretui-optioncard[data-selected='true'] .pretui-optioncard-mark {
+        background-color: var(--oc-tone);
+        box-shadow:
+          0 0 0 1px var(--oc-tone),
+          var(--oc-highlight);
+      }
+      .pretui-optioncard[data-selected='true'] .pretui-optioncard-mark::before {
+        content: '';
+        display: block;
+      }
+      .pretui-optioncard[data-kind='radio'][data-selected='true'] .pretui-optioncard-mark::before {
+        inline-size: 0.375rem;
+        block-size: 0.375rem;
+        border-radius: 50%;
+        background-color: var(--card);
+        box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
+      }
+      .pretui-optioncard[data-kind='checkbox'][data-selected='true'] .pretui-optioncard-mark::before {
+        inline-size: 0.5625rem;
+        block-size: 0.5625rem;
+        background-color: var(--primary-foreground);
+        clip-path: polygon(14% 47%, 38% 70%, 86% 18%, 96% 30%, 39% 89%, 4% 58%);
+      }
+    }
+  </style>
+</template>;
+
+interface ChoiceGridSignature {
+  Blocks: { default: [] };
+  Element: HTMLDivElement;
+}
+
+// The group's grid, written once for both kinds; role, name and data
+// attributes arrive through `...attributes` from the owner.
+export const ChoiceGrid: TemplateOnlyComponent<ChoiceGridSignature> = <template>
+  <div class='pretui-choicecards' ...attributes>{{yield}}</div>
+  <style scoped>
+    @layer PretComponent {
+      .pretui-choicecards {
+        --cc-gap: var(--space-3, 0.5rem);
+        --cc-min: 11rem;
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--cc-gap);
+      }
+      .pretui-choicecards[data-orientation='horizontal'] {
+        grid-template-columns: repeat(auto-fit, minmax(var(--cc-min), 1fr));
+      }
+      .pretui-choicecards[data-orientation='horizontal'][data-columns='2'] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+      .pretui-choicecards[data-orientation='horizontal'][data-columns='3'] {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+      .pretui-choicecards[data-orientation='horizontal'][data-columns='4'] {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+    }
+  </style>
+</template>;
+
+export interface ChoiceCardsSharedArgs {
+  options?: ChoiceCardOption[];
+  /** alias — the canonical flat-collection noun */
+  items?: ChoiceCardOption[];
+  disabled?: boolean;
+  /** alias — React Aria / Base UI spelling of @disabled */
+  isDisabled?: boolean;
+  /** the group's accessible name when no label element points at it */
+  label?: string;
+  /** the form field name every input in the group submits under */
+  name?: string;
+  /** `vertical` (default) stacks the cards; `horizontal` lays them side by side */
+  orientation?: ChoiceCardOrientation;
+  /** a fixed column count for `horizontal` (2, 3 or 4); default: as many as fit */
+  columns?: 2 | 3 | 4;
+}

package/bundled-realms/pretui/internal/color-fixtures.gts

@@ -0,0 +1,3 @@
+// Pretui — fixtures shared by the color usage pages.
+
+export const GAMUT_NAMES = ['srgb', 'p3', 'rec2020'];

package/bundled-realms/pretui/internal/composites-fixtures.gts

@@ -0,0 +1,16 @@
+// Pretui — fixtures shared by the composites usage pages.
+import type { StepItem } from '../components/step-list';
+
+export const ORIENTATIONS = ['horizontal', 'vertical'];
+
+export const DEPLOY_STEPS: StepItem[] = [
+  { label: 'Build', state: 'complete', detail: 'Finished in 42s' },
+  { label: 'Lint', state: 'in-progress', detail: 'Re-running lint\u2026' },
+  {
+    label: 'Sign',
+    state: 'blocked',
+    detail: 'Waiting on a release approval',
+  },
+  { label: 'Publish', state: 'upcoming', detail: '' },
+];
+

package/bundled-realms/pretui/internal/corner-mark.gts

@@ -0,0 +1,83 @@
+// Pretui — corner marks: the placement and hue Badge and Indicator share.
+//
+// A corner mark sits on the edge of another control — a count on an inbox
+// icon, a presence dot on an avatar. Both components wrap their child in an
+// inline box and position the mark against one of its four logical corners,
+// so RTL moves the mark with the reading direction.
+import { htmlSafe } from '@ember/template';
+// type-only gap: 'ember-modifier' resolves at realm runtime; glint cannot see
+// it here (accepted parse baseline, same as toaster.gts / focus.gts)
+import { modifier } from 'ember-modifier';
+import type { SafeString } from '@ember/template';
+import { PRETUI_TONES, resolveTone } from '../pretui-primitives';
+import type { PretuiTone, PretuiToneArg } from '../pretui-primitives';
+
+export type CornerPlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';
+
+const PLACEMENTS: readonly CornerPlacement[] = ['top-end', 'top-start', 'bottom-end', 'bottom-start'];
+
+// The MUI anchorOrigin and Mantine position spellings are physical.
+const PLACEMENT_ALIASES: Record<string, CornerPlacement> = {
+  'top-right': 'top-end',
+  'top-left': 'top-start',
+  'bottom-right': 'bottom-end',
+  'bottom-left': 'bottom-start',
+};
+
+export function resolveCorner(value: string | undefined): CornerPlacement {
+  let canonical = value ? (PLACEMENT_ALIASES[value] ?? value) : 'top-end';
+  return (PLACEMENTS as readonly string[]).includes(canonical) ? (canonical as CornerPlacement) : 'top-end';
+}
+
+/** A tone's hue as a CSS value — one map for every component that paints a tone as a single colour. */
+export const TONE_HUES: Record<PretuiTone, string> = {
+  neutral: 'var(--muted-foreground)',
+  primary: 'var(--primary)',
+  info: 'var(--pretui-info)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  danger: 'var(--destructive)',
+  attention: 'var(--pretui-attention)',
+};
+
+export function resolveCornerTone(tone: PretuiToneArg | string | undefined, fallback: PretuiTone): PretuiTone {
+  return resolveTone(tone, PRETUI_TONES, fallback);
+}
+
+/** The mark's hue as one custom property; the stylesheet derives the rest. */
+export function cornerHueStyle(tone: PretuiTone): SafeString {
+  return htmlSafe(`--pretui-mark-hue: ${TONE_HUES[tone]}`);
+}
+
+const FOCUSABLE = 'a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])';
+
+/**
+ * Points the first focusable element inside the mark's wrapper at the
+ * spoken run with `aria-describedby`, so focusing the control reads its own
+ * name and then the mark's meaning ("Messages, button, 3 unread"). Without
+ * it the run is a sibling a screen reader only reaches by reading on. The
+ * control's existing descriptions are kept; only this id is added and
+ * removed.
+ */
+export const describesFocusable = modifier((root: HTMLElement, [id]: [string | undefined]) => {
+  if (!id) {
+    return;
+  }
+  let target = root.querySelector<HTMLElement>(FOCUSABLE);
+  if (!target) {
+    return;
+  }
+  let before = target.getAttribute('aria-describedby');
+  let ids = (before ?? '').split(/\s+/).filter(Boolean);
+  if (!ids.includes(id)) {
+    target.setAttribute('aria-describedby', [...ids, id].join(' '));
+  }
+  return () => {
+    let now = (target.getAttribute('aria-describedby') ?? '').split(/\s+/).filter((t) => t && t !== id);
+    if (now.length) {
+      target.setAttribute('aria-describedby', now.join(' '));
+    } else {
+      target.removeAttribute('aria-describedby');
+    }
+  };
+});