Markdown embed chooser modal (CS-11675/76/77)

packages/host/app/components/card-chooser/mini/index.gts

@@ -82,10 +82,15 @@ export default class MiniCardChooser extends Component<Signature> {
         height: 100%;
         min-height: 0;
         background-color: var(--boxel-light);
+        /* Share the file chooser's compact scale so the two lists match when
+           toggling tabs in the markdown embed chooser. */
+        font: var(--boxel-font-sm);
       }
       .mini-card-chooser__header {
         flex: 0 0 auto;
-        padding: var(--boxel-sp-xs) var(--boxel-sp-xs) 0;
+        /* Small bottom inset so the search bar's 2px focus outline isn't
+           painted over by the results list sitting directly below it. */
+        padding: var(--boxel-sp-xs) var(--boxel-sp-xs) var(--boxel-sp-4xs);
       }
       /* Pill-shaped, design-matched bar height. SearchBar's defaults are
          tuned for the full search-sheet (50px tall, generous focus ring);

packages/host/app/components/card-search/panel-content.gts

@@ -461,6 +461,11 @@ export default class PanelContent extends Component<Signature> {
       .search-sheet-content.mini :deep(.search-result-header) {
         padding-block: var(--boxel-sp-xs);
       }
+      /* The summary is 16px bold in the full sheet; in the mini envelope drop
+         it to the chooser's shared 14px scale (weight stays 600). */
+      .search-sheet-content.mini :deep(.search-result-header .summary) {
+        font: 600 var(--boxel-font-sm);
+      }
       /* Summary + Sort sit on one row, with the Sort dropdown shrunk to
          fit its label rather than padded to a comfortable touch target. */
       .search-sheet-content.mini :deep(.search-result-header .controls) {

packages/host/app/components/card-search/sheet-results.gts

@@ -205,6 +205,20 @@ export default class SheetResults extends Component<Signature> {
     return [...new Set(urls)];
   }
 
+  // The global summary + Sort row. Hidden in the mini chooser's default
+  // Recents view (empty search): there the Recents section supplies its own
+  // header (label + count), and the design shows no Sort control until the
+  // user actually searches. Unaffected for the full search sheet.
+  private get showGlobalHeader(): boolean {
+    if (!this.args.showHeader || this.args.isCompact) {
+      return false;
+    }
+    if (this.args.variant === 'mini' && this.args.isSearchKeyEmpty) {
+      return false;
+    }
+    return true;
+  }
+
   private get hasNoResults(): boolean {
     return (
       this.sections.length === 0 &&
@@ -230,24 +244,22 @@ export default class SheetResults extends Component<Signature> {
   }
 
   <template>
-    {{#if @showHeader}}
-      {{#unless @isCompact}}
-        <SearchResultHeader
-          @summaryText={{this.summaryText}}
-          @viewOptions={{this.VIEW_OPTIONS}}
-          @activeViewId={{@activeViewId}}
-          @activeSort={{@activeSort}}
-          @sortOptions={{this.SORT_OPTIONS}}
-          @onChangeView={{@onChangeView}}
-          @onChangeSort={{@onChangeSort}}
-          @multiSelect={{@multiSelect}}
-          @selectedCards={{@selectedCards}}
-          @allCards={{this.allCards}}
-          @onSelectAll={{@onSelectAll}}
-          @onDeselectAll={{@onDeselectAll}}
-          @hideViewSelector={{eq @variant 'mini'}}
-        />
-      {{/unless}}
+    {{#if this.showGlobalHeader}}
+      <SearchResultHeader
+        @summaryText={{this.summaryText}}
+        @viewOptions={{this.VIEW_OPTIONS}}
+        @activeViewId={{@activeViewId}}
+        @activeSort={{@activeSort}}
+        @sortOptions={{this.SORT_OPTIONS}}
+        @onChangeView={{@onChangeView}}
+        @onChangeSort={{@onChangeSort}}
+        @multiSelect={{@multiSelect}}
+        @selectedCards={{@selectedCards}}
+        @allCards={{this.allCards}}
+        @onSelectAll={{@onSelectAll}}
+        @onDeselectAll={{@onDeselectAll}}
+        @hideViewSelector={{eq @variant 'mini'}}
+      />
     {{/if}}
 
     {{! Handle empty URL search state — only after loading completes }}

packages/host/app/components/file-chooser/mini/index.gts

@@ -16,10 +16,15 @@ import FileChooser, { type FileChooserRealm } from '../panel';
 interface Signature {
   Element: HTMLDivElement;
   Args: {
-    // Fired with the absolute URL of the file the user picks from the tree or
-    // finishes uploading. The hosting container decides what to do with it
-    // (this primitive never confirms or dismisses on its own).
+    // Fired with the absolute URL of the file the user confirms (Enter on a
+    // tree row) or finishes uploading. The hosting container decides what to do
+    // with it (this primitive never confirms or dismisses on its own).
     onSelect: (url: string) => void;
+    // Fired on a single-click highlight of a tree row, before confirmation.
+    // Lets a host preview the highlighted file without committing to it — the
+    // card chooser previews on a single click, so this keeps the file chooser
+    // symmetric for consumers that want the same.
+    onHighlight?: (url: string) => void;
     // Workspace to open on first render. Read once at mount; later parent
     // updates are ignored. Defaults to the first known realm.
     initialRealmURL?: string;
@@ -72,8 +77,11 @@ export default class MiniFileChooser extends Component<Signature> {
       return;
     }
     this.userSelectedFile = path;
-    // Deliberately does NOT call this.args.onSelect — that only happens on
-    // confirmation (Enter) to avoid double-fire.
+    // Single click highlights the row and previews it via onHighlight, but does
+    // NOT call onSelect — that's reserved for confirmation (Enter) so a host
+    // can distinguish "previewing" from "committing".
+    let url = new RealmPaths(realm.url).fileURL(path);
+    this.args.onHighlight?.(url.href);
   }
 
   @action
@@ -211,7 +219,7 @@ export default class MiniFileChooser extends Component<Signature> {
         padding: var(--boxel-sp-xs);
         background-color: var(--boxel-light);
         color: var(--boxel-dark);
-        font: var(--boxel-font-xs);
+        font: var(--boxel-font-sm);
       }
       .mini-file-chooser__field {
         display: flex;