@cardstack/boxel-cli 0.11.0-unstable.2 → 0.11.0-unstable.3

package/bundled-realms/pretui/components/code-block.gts

@@ -115,7 +115,12 @@ const GRAMMARS: Record<string, Rule[]> = {
     ['string', sticky('`(?:\\\\[\\s\\S]|[^`\\\\])*`')],
     ['string', sticky("'(?:\\\\.|[^'\\\\\\n])*'")],
     ['string', sticky('"(?:\\\\.|[^"\\\\\\n])*"')],
-    ['number', sticky('0[xXbBoO][0-9a-fA-F_]+|\\d[\\d_]*(?:\\.\\d[\\d_]*)?(?:[eE][+-]?\\d+)?')],
+    [
+      'number',
+      sticky(
+        '0[xXbBoO][0-9a-fA-F_]+|\\d[\\d_]*(?:\\.\\d[\\d_]*)?(?:[eE][+-]?\\d+)?',
+      ),
+    ],
     ['keyword', sticky('(?:' + TS_KEYWORDS + ')\\b')],
     ['name', sticky('[A-Za-z_$][\\w$]*(?=\\s*\\()')],
     ['name', sticky('[A-Z][\\w$]*')],
@@ -131,7 +136,7 @@ const GRAMMARS: Record<string, Rule[]> = {
   ],
   css: [
     ['comment', sticky('/\\*[\\s\\S]*?\\*/')],
-    ['string', sticky("'(?:\\\\.|[^'\\\\\\n])*'|\"(?:\\\\.|[^\"\\\\\\n])*\"")],
+    ['string', sticky('\'(?:\\\\.|[^\'\\\\\\n])*\'|"(?:\\\\.|[^"\\\\\\n])*"')],
     ['keyword', sticky('@[\\w-]+')],
     ['name', sticky('--[\\w-]+')],
     ['number', sticky('#[0-9a-fA-F]{3,8}\\b|-?\\d*\\.?\\d+(?:%|[a-z]{1,4})?')],
@@ -154,7 +159,7 @@ const GRAMMARS: Record<string, Rule[]> = {
   ],
   shell: [
     ['comment', sticky('#[^\\n]*')],
-    ['string', sticky("'[^'\\n]*'|\"(?:\\\\.|[^\"\\\\\\n])*\"")],
+    ['string', sticky('\'[^\'\\n]*\'|"(?:\\\\.|[^"\\\\\\n])*"')],
     ['name', sticky('\\$\\{?[\\w]+\\}?')],
     ['number', sticky('\\b\\d+\\b')],
     ['keyword', sticky('(?:' + SHELL_KEYWORDS + ')\\b')],
@@ -173,8 +178,18 @@ const GRAMMARS: Record<string, Rule[]> = {
   python: [
     ['comment', sticky('#[^\\n]*')],
     ['string', sticky('"""[\\s\\S]*?"""|\'\'\'[\\s\\S]*?\'\'\'')],
-    ['string', sticky("[rbfu]{0,2}'(?:\\\\.|[^'\\\\\\n])*'|[rbfu]{0,2}\"(?:\\\\.|[^\"\\\\\\n])*\"")],
-    ['number', sticky('0[xXbBoO][0-9a-fA-F_]+|\\d[\\d_]*(?:\\.\\d[\\d_]*)?(?:[eE][+-]?\\d+)?')],
+    [
+      'string',
+      sticky(
+        '[rbfu]{0,2}\'(?:\\\\.|[^\'\\\\\\n])*\'|[rbfu]{0,2}"(?:\\\\.|[^"\\\\\\n])*"',
+      ),
+    ],
+    [
+      'number',
+      sticky(
+        '0[xXbBoO][0-9a-fA-F_]+|\\d[\\d_]*(?:\\.\\d[\\d_]*)?(?:[eE][+-]?\\d+)?',
+      ),
+    ],
     ['keyword', sticky('(?:' + PY_KEYWORDS + ')\\b')],
     ['name', sticky('[A-Za-z_][\\w]*(?=\\s*\\()')],
     ['plain', sticky('[A-Za-z_][\\w]*')],
@@ -227,7 +242,9 @@ export function grammarFor(language: string | undefined): string | undefined {
 
 /** A language guessed from a filename. Used only when `@language` is absent —
  * an explicit language always wins over an extension. */
-export function languageForFilename(name: string | undefined): string | undefined {
+export function languageForFilename(
+  name: string | undefined,
+): string | undefined {
   let match = /\.([a-z0-9]+)$/i.exec((name ?? '').trim());
   if (!match) {
     return undefined;
@@ -253,10 +270,7 @@ const CLASS_FOR: Record<CodeTokenKind, string> = {
  * and spaces is one span rather than thirty. With no grammar the whole input is
  * a single `plain` token, which is exactly what "no highlighting" should cost.
  */
-export function tokenizeCode(
-  code: string,
-  language?: string,
-): CodeToken[] {
+export function tokenizeCode(code: string, language?: string): CodeToken[] {
   let text = code ?? '';
   let key = grammarFor(language);
   if (!key) {
@@ -420,6 +434,9 @@ export interface CodeBlockSignature {
     highlight?: string | number[];
     /** soft-wrap long lines instead of scrolling sideways */
     wrap?: boolean;
+    /** 'compact': a slim header, the smallest data type size and tight
+     * padding, for code inside a transcript row. Default 'regular' */
+    density?: 'regular' | 'compact';
     /** scroll ceiling, in lines. The source this replaced had none, so a
      * five-hundred-line snippet rendered five hundred lines tall. */
     maxLines?: number;
@@ -549,7 +566,8 @@ export class CodeBlock extends Component<CodeBlockSignature> {
    * custom property so the gutter sizes itself; only a digit string ever
    * reaches the style attribute, and `cssStyle` validates that. */
   get gutterDigits(): number {
-    let last = Math.max(1, Math.floor(this.args.startLine ?? 1)) +
+    let last =
+      Math.max(1, Math.floor(this.args.startLine ?? 1)) +
       Math.max(0, this.lineCount - 1);
     return Math.max(2, String(last).length);
   }
@@ -580,6 +598,7 @@ export class CodeBlock extends Component<CodeBlockSignature> {
     <figure
       class='pretui-code'
       data-wrap={{if @wrap 'true' 'false'}}
+      data-density={{if @density @density 'regular'}}
       data-gutter={{if this.showGutter 'true' 'false'}}
       style={{this.gutterStyle}}
       data-test-pretui-code
@@ -597,7 +616,8 @@ export class CodeBlock extends Component<CodeBlockSignature> {
             <CopyButton
               @text={{this.code}}
               @label='Copy the code'
-              @variant='ghost'
+              @tone='neutral'
+              @appearance='plain'
               data-test-pretui-code-copy
             />
           </span>
@@ -626,7 +646,10 @@ export class CodeBlock extends Component<CodeBlockSignature> {
           data-clamped={{if this.clamped 'true' 'false'}}
           style={{if this.clamped this.clampStyle}}
           data-test-pretui-code-body
-        ><code class='pretui-code-code'>{{#each this.lines key='key' as |line|}}<span
+        ><code class='pretui-code-code'>{{#each
+              this.lines key='key'
+              as |line|
+            }}<span
                 class='pretui-code-line'
                 data-marked={{if line.marked 'true' 'false'}}
               >{{#if this.showGutter}}<span
@@ -657,18 +680,40 @@ export class CodeBlock extends Component<CodeBlockSignature> {
         .pretui-code {
           margin: 0;
           display: grid;
-          border-radius: var(--radius);
-          background: var(--card);
+          border-radius: var(--boxel-border-radius);
+          background-color: var(--card);
+          color: var(--card-foreground);
           box-shadow: var(--pretui-shadow-card, 0 0 0 1px var(--border));
           overflow: hidden;
           container-type: inline-size;
         }
+        /* compact: code inside a row is a glance, not a read: small, short,
+           and scrolled */
+        .pretui-code[data-density='compact'] {
+          --pretui-code-size: var(--boxel-font-size-2xs);
+          --pretui-code-leading: 1.45;
+        }
+        .pretui-code[data-density='compact'] .pretui-code-head {
+          padding: var(--boxel-sp-6xs) var(--boxel-sp-2xs) var(--boxel-sp-6xs)
+            var(--boxel-sp-xs);
+        }
+        .pretui-code[data-density='compact'] .pretui-code-body {
+          padding-block: var(--boxel-sp-4xs);
+        }
+        .pretui-code[data-density='compact']
+          .pretui-code-body[data-clamped='true'] {
+          max-height: calc(
+            var(--pretui-code-max, 24) * var(--pretui-code-leading, 1.6) *
+              var(--pretui-code-size, var(--boxel-font-size-xs)) +
+              var(--boxel-sp-4xs) * 2
+          );
+        }
         .pretui-code-head {
           display: flex;
           align-items: center;
-          gap: var(--space-3, 8px);
-          padding: var(--space-2, 6px) var(--space-3, 8px);
-          background: color-mix(
+          gap: var(--boxel-sp-xs);
+          padding: var(--boxel-sp-2xs) var(--boxel-sp-xs);
+          background-color: color-mix(
             in oklch,
             var(--foreground) 4%,
             var(--card)
@@ -682,12 +727,11 @@ export class CodeBlock extends Component<CodeBlockSignature> {
           text-overflow: ellipsis;
           white-space: nowrap;
           font-family: var(--font-mono);
-          font-size: var(--text-ui-sm, 11.5px);
-          color: var(--foreground);
+          font-size: var(--boxel-font-size-xs);
         }
         .pretui-code-count {
           flex: 0 0 auto;
-          font-size: var(--text-ui-xs, 10.5px);
+          font-size: var(--boxel-font-size-2xs);
           font-variant-numeric: tabular-nums;
           color: var(--muted-foreground);
         }
@@ -697,26 +741,25 @@ export class CodeBlock extends Component<CodeBlockSignature> {
         }
         .pretui-code-caption {
           margin: 0;
-          padding: var(--space-2, 6px) var(--space-3, 8px) 0;
-          font-size: var(--text-ui-sm, 11.5px);
+          padding: var(--boxel-sp-2xs) var(--boxel-sp-xs) 0;
+          font-size: var(--boxel-font-size-xs);
           color: var(--muted-foreground);
         }
         .pretui-code-binary {
           margin: 0;
-          padding: var(--space-4, 12px) var(--space-3, 8px);
-          font-size: var(--text-ui-sm, 11.5px);
+          padding: var(--boxel-sp-sm) var(--boxel-sp-xs);
+          font-size: var(--boxel-font-size-xs);
           color: var(--muted-foreground);
         }
         .pretui-code-body {
           margin: 0;
-          padding: var(--space-3, 8px) 0;
+          padding: var(--boxel-sp-xs) 0;
           overflow: auto;
           font-family: var(--font-mono);
-          font-size: var(--pretui-code-size, 12px);
+          font-size: var(--pretui-code-size, var(--boxel-font-size-xs));
           line-height: var(--pretui-code-leading, 1.6);
           /* Law 8 — code is numerals as often as it is words. */
           font-variant-numeric: tabular-nums;
-          color: var(--foreground);
           tab-size: var(--pretui-code-tab, 2);
         }
         /* The scroll ceiling. `--pretui-code-max` is a line COUNT set from the
@@ -725,7 +768,8 @@ export class CodeBlock extends Component<CodeBlockSignature> {
         .pretui-code-body[data-clamped='true'] {
           max-height: calc(
             var(--pretui-code-max, 24) * var(--pretui-code-leading, 1.6) *
-              var(--pretui-code-size, 12px) + var(--space-3, 8px) * 2
+              var(--pretui-code-size, var(--boxel-font-size-xs)) +
+              var(--boxel-sp-xs) * 2
           );
         }
         .pretui-code-body:focus-visible {
@@ -734,12 +778,14 @@ export class CodeBlock extends Component<CodeBlockSignature> {
         }
         .pretui-code-code {
           display: block;
-          font: inherit;
+          font-family: inherit;
+          font-size: inherit;
+          line-height: inherit;
           min-width: max-content;
         }
         .pretui-code-line {
           display: block;
-          padding-inline: var(--space-3, 8px);
+          padding-inline: var(--boxel-sp-xs);
           /* A blank line is still a line. Without this an empty block collapses
              to nothing and the code silently loses its paragraphing. */
           min-height: calc(var(--pretui-code-leading, 1.6) * 1em);
@@ -747,7 +793,7 @@ export class CodeBlock extends Component<CodeBlockSignature> {
         /* The mark carries a SHAPE as well as a tint, so it
            survives greyscale and a colour-blind reader. */
         .pretui-code-line[data-marked='true'] {
-          background: color-mix(
+          background-color: color-mix(
             in oklch,
             var(--primary) 10%,
             transparent
@@ -763,7 +809,7 @@ export class CodeBlock extends Component<CodeBlockSignature> {
             --pretui-code-gutter,
             calc(var(--pretui-code-digits, 2) * 1ch + 0.5ch)
           );
-          margin-inline-end: var(--space-3, 8px);
+          margin-inline-end: var(--boxel-sp-xs);
           text-align: end;
           /* Not selectable, so dragging across the code does not drag the
              numbers into the clipboard with it. The prefix is not optional:
@@ -771,11 +817,7 @@ export class CodeBlock extends Component<CodeBlockSignature> {
              where a drag-select is most likely. */
           -webkit-user-select: none;
           user-select: none;
-          color: color-mix(
-            in oklch,
-            var(--muted-foreground) 65%,
-            transparent
-          );
+          color: color-mix(in oklch, var(--muted-foreground) 65%, transparent);
         }
         .pretui-code-text {
           white-space: pre;
@@ -824,7 +866,7 @@ export class CodeBlock extends Component<CodeBlockSignature> {
             var(--foreground) 18%,
             var(--pretui-code-keyword, var(--chart-4))
           );
-          font-weight: var(--weight-medium, 500);
+          font-weight: 500;
         }
         .pretui-code-name {
           color: color-mix(
@@ -844,22 +886,22 @@ export class CodeBlock extends Component<CodeBlockSignature> {
           appearance: none;
           border: 0;
           width: 100%;
-          padding: var(--space-2, 6px);
-          background: color-mix(
+          padding: var(--boxel-sp-2xs);
+          background-color: color-mix(
             in oklch,
             var(--foreground) 4%,
             var(--card)
           );
           box-shadow: inset 0 1px 0 var(--border);
-          font: inherit;
-          font-size: var(--text-ui-sm, 11.5px);
+          font-family: inherit;
+          font-size: var(--boxel-font-size-xs);
           color: var(--muted-foreground);
           cursor: pointer;
           transition: background-color 160ms
             var(--pretui-ease-snap, cubic-bezier(0.23, 1, 0.32, 1));
         }
         .pretui-code-more:hover {
-          background: var(--hover, color-mix(in oklch, var(--foreground) 7%, var(--card)));
+          background-color: var(--hover);
           color: var(--foreground);
         }
         .pretui-code-more:active {
@@ -871,7 +913,7 @@ export class CodeBlock extends Component<CodeBlockSignature> {
         }
         @media (pointer: coarse) {
           .pretui-code-more {
-            min-height: 44px;
+            min-height: 2.75rem;
           }
         }
         @media (prefers-reduced-motion: reduce) {

package/bundled-realms/pretui/components/collapsed-turn.gts

@@ -1,42 +1,163 @@
 // Pretui — CollapsedTurn: a settled conversation turn folded to a one-line receipt.
 import Component from '@glimmer/component';
+import { StateGlyph } from './state-glyph';
 import { on } from '@ember/modifier';
 
 export interface CollapsedTurnSignature {
-  Args: { summary: string; onExpand?: () => void };
+  Args: {
+    summary: string;
+    /** called when the reader presses the line */
+    onExpand?: () => void;
+    /** the line is a toggle: set while the turn's work is shown, so the
+     * line says it can fold again (aria-expanded, a turned chevron) */
+    expanded?: boolean;
+    /** the element the line shows and hides, for aria-controls */
+    controls?: string;
+    /** 'pill' (default): a capsule. 'row': a line on ToolRow's grid, its
+     * check in the disc column and its words on the row's text edge, so a
+     * folded turn reads as one more row in a transcript of rows */
+    variant?: 'pill' | 'row';
+  };
   Element: HTMLButtonElement;
 }
 
 // Settled history earns its quiet: a receipt of counts, not content.
 export class CollapsedTurn extends Component<CollapsedTurnSignature> {
   expand = () => this.args.onExpand?.();
+  get isToggle() {
+    return this.args.expanded !== undefined;
+  }
+  get expandedState() {
+    if (!this.isToggle) {
+      return undefined;
+    }
+    return this.args.expanded ? 'true' : 'false';
+  }
   <template>
-    <button type='button' class='pretui-collapsed' data-test-pretui-collapsed-turn {{on 'click' this.expand}} ...attributes>
-      <span class='pretui-collapsed-check'>✓</span>{{@summary}}
+    <button
+      type='button'
+      class='pretui-collapsed'
+      data-variant={{if @variant @variant 'pill'}}
+      aria-expanded={{this.expandedState}}
+      aria-controls={{@controls}}
+      {{on 'click' this.expand}}
+      data-test-pretui-collapsed-turn
+      ...attributes
+    >
+      <StateGlyph
+        class='pretui-collapsed-check'
+        @glyph='done'
+        data-test-pretui-collapsed-turn-check
+      />
+      <span
+        class='pretui-collapsed-summary'
+        data-test-pretui-collapsed-turn-summary
+      >{{@summary}}</span>
+      {{#if this.isToggle}}
+        <span
+          class='pretui-collapsed-chevron'
+          data-open={{if @expanded 'true'}}
+          aria-hidden='true'
+          data-test-pretui-collapsed-turn-chevron
+        ></span>
+      {{/if}}
     </button>
     <style scoped>
       @layer PretComponent {
         .pretui-collapsed {
           display: inline-flex;
           align-items: center;
-          gap: 7px;
-          height: 24px;
-          padding: 0 calc(5px * var(--pretui-capsule-base, 1.35) + 12px * var(--pretui-radius-encroach, 0.35));
-          border-radius: 12px;
+          gap: var(--boxel-sp-xs);
+          max-width: 100%;
+          min-height: 1.5rem;
+          padding: 0
+            calc(
+              0.3125rem * var(--pretui-capsule-base, 1.35) +
+                var(--boxel-border-radius-sm) *
+                var(--pretui-radius-encroach, 0.35)
+            );
+          border-radius: var(--boxel-border-radius-sm);
           border: 0;
-          background: var(--inset, var(--boxel-100));
+          background-color: var(--inset);
           box-shadow: var(--pretui-shadow-hairline, 0 0 0 1px var(--border));
-          font: inherit;
-          font-size: var(--text-ui-sm, 11.5px);
+          font-family: inherit;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
           color: var(--muted-foreground);
           cursor: pointer;
           font-variant-numeric: tabular-nums;
+          text-align: start;
         }
         .pretui-collapsed:hover {
-          background: var(--hover, var(--boxel-100));
+          background-color: var(--hover);
+          color: var(--foreground);
         }
+        .pretui-collapsed:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+        /* done is ink with a check, not green */
         .pretui-collapsed-check {
-          color: var(--success, var(--boxel-success));
+          flex: none;
+          color: var(--foreground);
+        }
+        .pretui-collapsed-summary {
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        /* points right while folded, down while the work shows */
+        .pretui-collapsed-chevron {
+          flex: none;
+          width: 0.3125rem;
+          height: 0.3125rem;
+          margin-inline-start: 0.0625rem;
+          border-inline-end: 1.5px solid currentColor;
+          border-block-end: 1.5px solid currentColor;
+          transform: rotate(-45deg);
+          transition: transform 160ms
+            var(--pretui-ease-enter, cubic-bezier(0.22, 0.61, 0.25, 1));
+        }
+        .pretui-collapsed-chevron[data-open] {
+          transform: rotate(45deg);
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .pretui-collapsed-chevron {
+            transition: none;
+          }
+        }
+        /* the row form: ToolRow's grid (inset, disc, gap), its height, and
+           the receipt's quiet caption voice (sans, tabular), with no capsule
+           around it */
+        /* the row form keeps a hover pad but hangs it outside the text
+           edge, so its check lines up with every other mark in the thread */
+        .pretui-collapsed[data-variant='row'] {
+          display: flex;
+          box-sizing: content-box;
+          width: 100%;
+          min-height: 1.625rem;
+          gap: var(--pretui-toolrow-gap, var(--boxel-sp-xs));
+          margin-inline: calc(
+            -1 * var(--pretui-toolrow-inset, var(--boxel-sp-xs))
+          );
+          padding: 0 var(--pretui-toolrow-inset, var(--boxel-sp-xs));
+          border-radius: var(--boxel-border-radius-sm);
+          background-color: transparent;
+          box-shadow: none;
+          font-size: var(--boxel-caption-font-size);
+          line-height: var(--boxel-caption-line-height);
+          color: var(--subtle-foreground);
+        }
+        .pretui-collapsed[data-variant='row']:hover {
+          background-color: var(--inset);
+          color: var(--muted-foreground);
+        }
+        .pretui-collapsed[data-variant='row'] .pretui-collapsed-check {
+          width: var(--pretui-toolrow-disc, 1rem);
+          text-align: center;
+          font-size: var(--boxel-ui-label-font-size);
+          line-height: var(--boxel-ui-label-line-height);
         }
       }
     </style>