@cardstack/boxel-cli 0.12.0 → 0.13.0-unstable.0

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

@@ -8,6 +8,9 @@ import {
   type PretuiToneArg,
 } from '../pretui-primitives';
 
+export const PRETUI_CHIP_APPEARANCES = ['outlined', 'soft', 'plain'] as const;
+export type PretuiChipAppearance = (typeof PRETUI_CHIP_APPEARANCES)[number];
+
 export interface ChipSignature {
   Args: {
     label?: string;
@@ -16,6 +19,10 @@ export interface ChipSignature {
     /** neutral (the default) is the muted pill; any other tone is outlined in
      * that tone, with its -ink as the text */
     tone?: PretuiToneArg;
+    /** 'outlined' (the default) keeps the treatment above; 'soft' tints the
+     * fill with the tone and drops the ring; 'plain' drops the whole frame to
+     * dot + text, for dense tables and lists. The tone's -ink stays the text */
+    appearance?: PretuiChipAppearance;
     dot?: boolean;
   };
   Blocks: { default: [] };
@@ -23,12 +30,20 @@ export interface ChipSignature {
 }
 
 export class Chip extends Component<ChipSignature> {
+  // plain has no frame, so the dot always stays: never hue or fill alone
   get showDot() {
-    return this.args.dot ?? true;
+    return this.appearance === 'plain' || (this.args.dot ?? true);
   }
   get tone(): PretuiTone {
     return resolveTone(this.args.tone, PRETUI_TONES, 'neutral');
   }
+  get appearance(): PretuiChipAppearance {
+    return resolveTone(
+      this.args.appearance,
+      PRETUI_CHIP_APPEARANCES,
+      'outlined',
+    );
+  }
   get style() {
     return hueStyle('--pretui-chip-hue', this.args.hue);
   }
@@ -37,10 +52,14 @@ export class Chip extends Component<ChipSignature> {
       class='pretui-chip'
       style={{this.style}}
       data-tone={{this.tone}}
+      data-appearance={{this.appearance}}
       data-test-pretui-chip
       ...attributes
     >
-      {{#if this.showDot}}<span class='pretui-chip-dot'></span>{{/if}}
+      {{#if this.showDot}}<span
+          class='pretui-chip-dot'
+          data-test-pretui-chip-dot
+        ></span>{{/if}}
       {{#if @label}}{{@label}}{{else}}{{yield}}{{/if}}
     </span>
     <style scoped>
@@ -95,34 +114,60 @@ export class Chip extends Component<ChipSignature> {
         }
         .pretui-chip[data-tone='primary'] {
           --pretui-chip-hue: var(--primary);
+          --pretui-chip-tone: var(--primary);
 
           color: var(--primary-ink);
         }
         .pretui-chip[data-tone='info'] {
           --pretui-chip-hue: var(--info);
+          --pretui-chip-tone: var(--info);
 
           color: var(--info-ink);
         }
         .pretui-chip[data-tone='success'] {
           --pretui-chip-hue: var(--success);
+          --pretui-chip-tone: var(--success);
 
           color: var(--success-ink);
         }
         .pretui-chip[data-tone='warning'] {
           --pretui-chip-hue: var(--warning);
+          --pretui-chip-tone: var(--warning);
 
           color: var(--warning-ink);
         }
         .pretui-chip[data-tone='danger'] {
           --pretui-chip-hue: var(--destructive);
+          --pretui-chip-tone: var(--destructive);
 
           color: var(--destructive-ink);
         }
         .pretui-chip[data-tone='attention'] {
           --pretui-chip-hue: var(--attention);
+          --pretui-chip-tone: var(--attention);
 
           color: var(--attention-ink);
         }
+        /* soft: the tone tints the fill and the ring drops; the tone's -ink
+           (or --foreground when neutral) stays the text. The tone, not the
+           hue, so an @hue on a toned chip still recolors only the dot; a
+           neutral chip has no tone and tints from its hue */
+        .pretui-chip[data-appearance='soft'] {
+          background-color: color-mix(
+            in oklch,
+            var(--pretui-chip-tone, var(--pretui-chip-hue))
+              var(--pretui-chip-soft-mix, 12%),
+            var(--card)
+          );
+          box-shadow: none;
+        }
+        /* plain: no fill, ring or radius, just dot + text in the tone's -ink */
+        .pretui-chip[data-appearance='plain'] {
+          padding-inline: 0;
+          border-radius: 0;
+          background: none;
+          box-shadow: none;
+        }
         .pretui-chip-dot {
           width: var(--pretui-chip-dot-size);
           height: var(--pretui-chip-dot-size);

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

@@ -5,12 +5,15 @@ A small pill for a categorical value: a status, a tag, a label. It is display on
 ## The contract
 
 ```
-@label?, @tone? (default neutral), @hue?, @dot? (default true)
+@label?, @tone? (default neutral), @hue?, @dot? (default true),
+@appearance? ('outlined' default | 'soft' | 'plain')
 <:default>   — used when @label is absent
 ```
 
 **Tone outlines, hue colors the dot.** A neutral chip (the default) is the theme's `--muted` surface with `--foreground` text. Any other `@tone` outlines it on `--card` instead: the tone's `-ink` (`--success-ink`, `--destructive-ink` for `danger`…) for the text and the ring, and the tone itself for the dot, the same tone names and inks Button and Alert use. `@hue` recolors only the dot (any CSS color, or a `var(--chart-3)`).
 
+**`@appearance` picks the frame.** `soft` tints instead of outlining: the fill becomes the tone mixed 12% into `--card` (the hue on a neutral chip, which has no tone) and the ring drops, so `@hue` on a toned chip still recolors only the dot. `plain` drops the frame entirely, with no fill, ring, radius or side padding, leaving dot + text as one compound unit. Use it in table cells and dense lists, where a frame inside an already-rounded card is noise. The dot is always shown on a plain chip, even with `@dot={{false}}`, so the category never rests on colour alone. In every appearance the text stays the tone's `-ink` (`--foreground` when neutral). `outlined` is the default and is unchanged.
+
 **The dot is on by default.** That is the decision most kits get backwards: without it, a row of chips is distinguished only by fill colour, and colour alone is a WCAG 1.4.1 problem _and_ hard to scan. The dot gives the hue a saturated anchor next to muted ink, so the category reads at a glance even when the fills are close. Turn it off (`@dot={{false}}`) only when the chip's own text already names the category unambiguously.
 
 ## Prior art
@@ -36,7 +39,7 @@ That is the right answer for a static chip, and it means the accessibility quest
 
 ## Theming
 
-`--muted` / `--foreground` (a neutral pill and its text), `--card` with each tone's `--x-ink` (text and ring) and `--x` (dot) for a toned chip, `--pretui-chip-hue` (the dot, defaulting to `--muted-foreground`, or the tone on a toned chip), `--boxel-border-radius-xs`, `--boxel-font-size-2xs`, `--boxel-lsp-xs`, and the `--boxel-sp-*` spacing scale. `--pretui-chip-height`, `--pretui-chip-dot-size` and `--pretui-chip-font-size` set the pill height, dot size and text size.
+`--muted` / `--foreground` (a neutral pill and its text), `--card` with each tone's `--x-ink` (text and ring) and `--x` (dot) for a toned chip, `--pretui-chip-hue` (the dot, defaulting to `--muted-foreground`, or the tone on a toned chip), `--boxel-border-radius-xs`, `--boxel-font-size-2xs`, `--boxel-lsp-xs`, and the `--boxel-sp-*` spacing scale. `--pretui-chip-height`, `--pretui-chip-dot-size` and `--pretui-chip-font-size` set the pill height, dot size and text size. `--pretui-chip-soft-mix` (default `12%`) sets how strongly a soft chip's fill is tinted.
 
 A theme restyles every chip through `--muted` and `--foreground`, and the dot colors through the `--chart-*` tokens. Dark mode needs nothing extra: the theme's dark `--muted` / `--foreground` pair applies.
 

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

@@ -2,11 +2,20 @@
 import GlimmerComponent from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { FreestyleUsage } from './freestyle-usage';
-import { Chip } from './chip';
+import {
+  Chip,
+  PRETUI_CHIP_APPEARANCES,
+  type PretuiChipAppearance,
+} from './chip';
 import { HUE_OPTIONS } from '../demo-ink-feedback';
-import { PRETUI_TONES, type PretuiTone } from '../pretui-primitives';
+import {
+  PRETUI_TONES,
+  resolveTone,
+  type PretuiTone,
+} from '../pretui-primitives';
 
 const TONE_OPTIONS = [...PRETUI_TONES];
+const APPEARANCE_OPTIONS = [...PRETUI_CHIP_APPEARANCES];
 
 // ── Chip ← pill/usage.gts + tag/usage.gts ────────────────────────────────
 // Dropped knobs: kind (Chip is never a button), variant + size (no
@@ -18,6 +27,9 @@ class ChipUsage extends GlimmerComponent {
   @tracked hue = '';
   @tracked tone: PretuiTone = 'neutral';
   @tracked dot = true;
+  @tracked appearance: PretuiChipAppearance = 'outlined';
+  setAppearance = (v: string) =>
+    (this.appearance = resolveTone(v, PRETUI_CHIP_APPEARANCES, 'outlined'));
   setLabel = (v: string) => (this.label = v);
   setHue = (v: string) => (this.hue = v);
   setTone = (v: string) => (this.tone = v as PretuiTone);
@@ -33,6 +45,9 @@ class ChipUsage extends GlimmerComponent {
     if (this.hue) {
       bits.push(`@hue='${this.hue}'`);
     }
+    if (this.appearance !== 'outlined') {
+      bits.push(`@appearance='${this.appearance}'`);
+    }
     if (!this.dot) {
       bits.push('@dot={{false}}');
     }
@@ -50,6 +65,7 @@ class ChipUsage extends GlimmerComponent {
           @tone={{this.tone}}
           @hue={{this.hueVal}}
           @dot={{this.dot}}
+          @appearance={{this.appearance}}
         />
         <Chip @label='Gelato' @hue='var(--chart-3)' />
         <Chip @label='Catering' @hue='var(--chart-4)' />
@@ -57,6 +73,17 @@ class ChipUsage extends GlimmerComponent {
         <Chip @label='draft' />
         <Chip @label='live' @tone='success' />
         <Chip @label='blocked' @tone='danger' />
+        <Chip @label='hired' @tone='success' @appearance='soft' />
+        <Chip @label='on hold' @tone='warning' @appearance='soft' />
+        <Chip @label='rejected' @tone='danger' @appearance='soft' />
+        <Chip @label='screening' @tone='info' @appearance='plain' />
+        <Chip
+          @label='flagged'
+          @tone='danger'
+          @hue='var(--chart-2)'
+          @appearance='soft'
+        />
+        <Chip @label='archived' @appearance='plain' />
       </:example>
       <:api as |Args|>
         <Args.String
@@ -80,6 +107,14 @@ class ChipUsage extends GlimmerComponent {
           @value={{this.tone}}
           @onInput={{this.setTone}}
         />
+        <Args.String
+          @name='appearance'
+          @description='outlined (default) keeps the tone treatment; soft tints the fill with the tone and drops the ring; plain is dot + text with no frame, for dense tables.'
+          @options={{APPEARANCE_OPTIONS}}
+          @defaultValue='outlined'
+          @value={{this.appearance}}
+          @onInput={{this.setAppearance}}
+        />
         <Args.Bool
           @name='dot'
           @description='Leading status dot (Pretui addition).'

package/bundled-realms/pretui/components/status-chip.gts

@@ -1,6 +1,6 @@
 // Pretui — StatusChip: a Chip whose hue is derived from its status value, stable across cards.
 import Component from '@glimmer/component';
-import { Chip } from './chip';
+import { Chip, type PretuiChipAppearance } from './chip';
 import { statusHue } from '../internal/ink';
 import {
   PRETUI_TONES,
@@ -9,7 +9,15 @@ import {
 } from '../pretui-primitives';
 
 export interface StatusChipSignature {
-  Args: { value: string; hue?: string; tone?: PretuiToneArg };
+  Args: {
+    value: string;
+    hue?: string;
+    tone?: PretuiToneArg;
+    /** passed to Chip: 'outlined' (default), 'soft' or 'plain' */
+    appearance?: PretuiChipAppearance;
+    /** passed to Chip: false drops the dot (default true) */
+    dot?: boolean;
+  };
   Element: HTMLSpanElement;
 }
 
@@ -30,6 +38,8 @@ export class StatusChip extends Component<StatusChipSignature> {
       @label={{@value}}
       @hue={{this.dotHue}}
       @tone={{@tone}}
+      @appearance={{@appearance}}
+      @dot={{@dot}}
       data-test-pretui-status-chip
       ...attributes
     />

package/bundled-realms/pretui/components/status-chip.md

@@ -8,9 +8,10 @@ A **Chip** whose color is derived from the value rather than chosen. Pass `@valu
 @value: string   (required)
 @hue?            — override; the exception, not the norm
 @tone?           — Chip's tone (default neutral)
+@appearance?, @dot?  — passed straight to Chip
 ```
 
-Three args, and the last two you should rarely reach for. A toned StatusChip is outlined in that tone and its dot takes the tone unless `@hue` is passed, so `@tone` is for a status whose meaning is fixed, like `live`; the hash hue stays on a neutral chip.
+`@value` is the one that matters; `@hue` and `@tone` you should rarely reach for, and `@appearance` / `@dot` are Chip's look knobs, forwarded unchanged. A toned StatusChip is outlined in that tone and its dot takes the tone unless `@hue` is passed, so `@tone` is for a status whose meaning is fixed, like `live`; the hash hue stays on a neutral chip.
 
 **The hue is a hash, and the hash is the point.** `statusHue()` runs a 32-bit polynomial rolling hash (`h * 31 + charCode`, unsigned) over the string and takes `h % 5` to index `--chart-1` … `--chart-5`. Deterministic, dependency-free, and — the property that matters — **stable across cards, realms and sessions**. No registry, no config, no design review to add a status.
 

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

@@ -17,6 +17,8 @@ class StatusChipUsage extends GlimmerComponent {
         <StatusChip @value='overdue' />
         <StatusChip @value='review' />
         <StatusChip @value='active' />
+        <StatusChip @value='interviewing' @appearance='soft' />
+        <StatusChip @value='offer' @appearance='plain' />
       </:example>
       <:api as |Args|>
         <Args.String

package/bundled-test-harness/assets/{ai-module-creation-test-B9lSKNq1.js → ai-module-creation-test-Czsh1MyP.js}

@@ -8,7 +8,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
-import { t as OperatorModeContainer } from "./container-XSX5809v.js";
+import { t as OperatorModeContainer } from "./container-CXZoEvul.js";
 import { d as click, i as findAll, o as waitFor } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { F as setupLocalIndexing, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-Ci72h1Wf.js";

package/bundled-test-harness/assets/{aibot-message-LXV0UlzI.js → aibot-message-Dg5nzE1b.js}

@@ -46,7 +46,7 @@ import { t as IconComponent$310 } from "./search-BDcFn7oI.js";
 import { t as IconComponent$311 } from "./shield-check-BrDqWC6I.js";
 import { t as Spinner } from "./spinner-DtpQhFga.js";
 import { n as markReplyFurniture, t as cardRefLabel } from "./reply-furniture-Cu7OoDDn.js";
-import { t as RenderedMarkdown } from "./rendered-markdown-B8TH0yN4.js";
+import { t as RenderedMarkdown } from "./rendered-markdown-DPEXS7MQ.js";
 import "./sanitized-html-DK1gR9yP.js";
 import { t as IconComponent$312 } from "./circle-check-DuIm6oML.js";
 import { t as IconComponent$313 } from "./file-BeJnCIX2.js";

package/bundled-test-harness/assets/{app-BIQcKrVT.js → app-hXF_bqWy.js}

@@ -49,10 +49,10 @@ import { r as modifier, t as ClassBasedModifier } from "./dist-nMt-N14r.js";
 import { n as isPresent, r as isBlank$1 } from "./is-equal-CgIVjIN-.js";
 import { i as all, r as timeout } from "./dist-DEVZvbin.js";
 import { t as buildWaiter } from "./dist-CSQ-y1Ft.js";
-import { C as auto_attached_card_exports, S as tool_service_exports, _ as FocusPill, b as AiAssistantAttachmentPicker, c as ai_assist_icon_2x_default, d as AiAssistantConversation, f as AiAssistantMessage, l as AiAssistantSkillMenu, v as AiAssistantComposerCap, y as AiAssistantChatInput } from "./panel-t9QyU1lY.js";
+import { c as ai_assist_icon_2x_default, d as AiAssistantConversation, f as AiAssistantMessage, g as AiAssistantAttachmentPicker, h as AiAssistantChatInput, l as AiAssistantSkillMenu, m as AiAssistantComposerCap, p as FocusPill, v as tool_service_exports, y as auto_attached_card_exports } from "./panel-CXmB6GMs.js";
 import { n as getCardCollection, t as card_collection_exports } from "./card-collection-DROiEsNV.js";
 import { n as getCard, t as card_resource_exports } from "./card-resource-BF1P-sI3.js";
-import { C as directory_exports, S as inheritance_chain_exports, _ as titleize_exports, a as CardChooserModal, b as moduleContentsResource, c as run_while_active_exports, d as id_from_card_or_url_exports, f as clipboard_exports, g as titleize, h as ai_assistant_panel_service_exports, i as SearchSheetModes, l as publish_progress_exports, m as card_type_service_exports, n as HostModeContent, o as stack_item_focus_exports, p as search_sheet_state_exports, r as SearchSheet, s as schema_editor_exports, t as OperatorModeContainer, u as idFromCardOrURL, v as url_bar_exports, w as card_type_exports, x as module_contents_exports, y as stack_backgrounds_exports } from "./container-XSX5809v.js";
+import { C as directory_exports, S as inheritance_chain_exports, _ as titleize_exports, a as CardChooserModal, b as moduleContentsResource, c as run_while_active_exports, d as id_from_card_or_url_exports, f as clipboard_exports, g as titleize, h as ai_assistant_panel_service_exports, i as SearchSheetModes, l as publish_progress_exports, m as card_type_service_exports, n as HostModeContent, o as stack_item_focus_exports, p as search_sheet_state_exports, r as SearchSheet, s as schema_editor_exports, t as OperatorModeContainer, u as idFromCardOrURL, v as url_bar_exports, w as card_type_exports, x as module_contents_exports, y as stack_backgrounds_exports } from "./container-CXZoEvul.js";
 import { n as element_tracker_exports } from "./element-tracker-CT_tRvjz.js";
 import { n as file_tree_from_index_exports } from "./file-tree-from-index-BDO4hYe_.js";
 import { a as normalized_dir_path_exports, c as isReady, o as maybe_exports, r as operator_mode_state_service_exports, s as file_exports } from "./operator-mode-state-service-BWfXVE95.js";
@@ -90,9 +90,9 @@ import { d as PERSONAL_REALM_ENDPOINT, f as getRandomBackgroundURL, o as skillsI
 import { t as decideRoomInvite } from "./room-invite-policy-B8_Ewl1p.js";
 import { t as getUniqueValidToolDefinitions } from "./tool-definitions-Bhcf5vKh.js";
 import { n as monaco_test_waiter_exports, t as createMonacoWaiterManager } from "./monaco-test-waiter-lvFEYpFj.js";
-import { r as shimBundledBase } from "./bundled-base-DldokUSJ.js";
+import { r as shimBundledBase } from "./bundled-base-DtxlKFXx.js";
 import "./dist-BOAdzfkP.js";
-import { a as microwait, i as allSettled, n as task, o as rAF, r as afterRender, t as shimExternals } from "./externals--YMzwHwd.js";
+import { a as microwait, i as allSettled, n as task, o as rAF, r as afterRender, t as shimExternals } from "./externals-Ddhtv753.js";
 import { t as file_name_exports } from "./file-name-BBWa-sfG.js";
 import { n as write_text_file_exports } from "./write-text-file-_xf3REMH.js";
 import { n as add_field_to_card_definition_exports } from "./add-field-to-card-definition-Dh-2u-FW.js";
@@ -193,9 +193,9 @@ import { o as sections_exports } from "./sections-a1Q3Clrw.js";
 import { r as text_suggestion_exports } from "./text-suggestion-Dja5vvDZ.js";
 import { n as trusted_message_origin_exports } from "./trusted-message-origin-C7kiFszV.js";
 import { a as _defineProperty$10, i as _applyDecoratedDescriptor$19, n as isKey, r as listenerName } from "./on-key-lN1E-7x2.js";
-import { u as AiAssistantApplyButton } from "./aibot-message-LXV0UlzI.js";
+import { u as AiAssistantApplyButton } from "./aibot-message-Dg5nzE1b.js";
 import { t as ModalContainer } from "./modal-container-YcHMXQhl.js";
-import { t as PillMenu } from "./pill-menu-DaRpDMUm.js";
+import { t as PillMenu } from "./pill-menu-Ctn3JNqG.js";
 import { t as MiniFileChooser } from "./mini-C3GO7Nt2.js";
 import { n as EmbedFormatSelection, t as MarkdownEmbedPreviewPane } from "./pane-Bx9vM9qf.js";
 import { t as MarkdownEmbedPreview } from "./preview-De0kL7qt.js";

package/bundled-test-harness/assets/{assistant-transcript-test-CG_2-bog.js → assistant-transcript-test-kILRv_pf.js}

@@ -1,6 +1,6 @@
 import { s as __toESM } from "./chunk-Rp0pCe6z.js";
 import { c as resultDiff, i as compactDiff, n as DIFF_IN_DETAIL } from "./edits-D50tA7_G.js";
-import { r as settledTitle, t as turnSummary } from "./turn-summary-0XOoAv3j.js";
+import { r as settledTitle, t as turnSummary } from "./turn-summary-CAZVdcBd.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 //#region tests/unit/lib/assistant-transcript-test.ts
 var import_qunit = /* @__PURE__ */ __toESM(require_qunit());

package/bundled-test-harness/assets/{binary-upload-dedupe-test-Q7e6bzl1.js → binary-upload-dedupe-test-Bt5RqtEk.js}

@@ -6,7 +6,7 @@ import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
 import "./component-BJO47HTh.js";
 import { t as Component } from "./dist-CkA1rgqO.js";
 import "./template-factory-ds9s0u8l.js";
-import { t as OperatorModeContainer } from "./container-XSX5809v.js";
+import { t as OperatorModeContainer } from "./container-CXZoEvul.js";
 import { T as settled, d as click, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
 import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
 import { Ct as getTestRealmRegistry, D as realmConfigCardJSON, F as setupLocalIndexing, I as setupOnSave, M as setupCardLogs, P as setupIntegrationTestRealm, lt as setupRenderingTest, ot as setupOperatorModeStateCleanup, t as setupMockMatrix } from "./mock-matrix-Ci72h1Wf.js";