Merge branch 'main' into code-block-refactor

Author: jurgenwerk

Diff for: packages/host/app/components/card-catalog/modal.gts

@@ -43,7 +43,7 @@ import {
 
 import type { CardDef } from 'https://cardstack.com/base/card-api';
 
-import { getSearch, type SearchQuery } from '../../resources/search';
+import { getSearch, type SearchResource } from '../../resources/search';
 
 import {
   suggestCardChooserTitle,
@@ -71,7 +71,7 @@ interface Signature {
 }
 
 type Request = {
-  search: SearchQuery;
+  search: SearchResource;
   deferred: Deferred<CardDef | undefined>;
   opts?: {
     offerToCreate?: {

Diff for: packages/host/app/components/operator-mode/code-submode.gts

@@ -31,6 +31,7 @@ import {
   identifyCard,
   isFieldDef,
   isCardDocumentString,
+  isPrimitive,
   hasExecutableExtension,
   RealmPaths,
   isResolvedCodeRef,
@@ -82,7 +83,7 @@ import CardURLBar from './card-url-bar';
 import CodeEditor from './code-editor';
 import InnerContainer from './code-submode/inner-container';
 import CodeSubmodeLeftPanelToggle from './code-submode/left-panel-toggle';
-import PlaygroundPanel from './code-submode/playground-panel';
+import PlaygroundPanel from './code-submode/playground/playground-panel';
 import SchemaEditor, { SchemaEditorTitle } from './code-submode/schema-editor';
 import SpecPreview from './code-submode/spec-preview';
 import CreateFileModal, { type FileType } from './create-file-modal';
@@ -480,12 +481,8 @@ export default class CodeSubmode extends Component<Signature> {
   }
 
   private get selectedCodeRef(): ResolvedCodeRef | undefined {
-    let baseDefType = this.selectedCardOrField?.cardOrField;
-    let codeRef = identifyCard(baseDefType);
-    if (!isResolvedCodeRef(codeRef)) {
-      return undefined;
-    }
-    return codeRef;
+    let codeRef = identifyCard(this.selectedCardOrField?.cardOrField);
+    return isResolvedCodeRef(codeRef) ? codeRef : undefined;
   }
 
   get showSpecPreview() {
@@ -993,32 +990,54 @@ export default class CodeSubmode extends Component<Signature> {
                           </:content>
                         </A.Item>
                       </SchemaEditor>
-                      {{#if this.selectedCodeRef}}
-                        <A.Item
-                          class='accordion-item'
-                          @contentClass='accordion-item-content'
-                          @onClick={{fn this.selectAccordionItem 'playground'}}
-                          @isOpen={{eq this.selectedAccordionItem 'playground'}}
-                          data-test-accordion-item='playground'
-                        >
-                          <:title>Playground</:title>
-                          <:content>
-                            {{#if (eq this.selectedAccordionItem 'playground')}}
+                      <A.Item
+                        class='accordion-item'
+                        @contentClass='accordion-item-content'
+                        @onClick={{fn this.selectAccordionItem 'playground'}}
+                        @isOpen={{eq this.selectedAccordionItem 'playground'}}
+                        data-test-accordion-item='playground'
+                      >
+                        <:title>Playground</:title>
+                        <:content>
+                          {{#if (eq this.selectedAccordionItem 'playground')}}
+                            {{#if
+                              (isPrimitive this.selectedCardOrField.cardOrField)
+                            }}
+                              <p
+                                class='file-incompatible-message'
+                                data-test-incompatible-primitives
+                              >
+                                <span>Playground is not currently supported for
+                                  primitive fields.</span>
+                              </p>
+                            {{else if this.selectedCodeRef}}
                               <PlaygroundPanel
                                 @codeRef={{this.selectedCodeRef}}
                                 @isUpdating={{this.moduleContentsResource.isLoading}}
-                                @isLoadingNewModule={{this.moduleContentsResource.isLoadingNewModule}}
                                 @isFieldDef={{isFieldDef
                                   this.selectedCardOrField.cardOrField
                                 }}
                               />
+                            {{else}}
+                              <p
+                                class='file-incompatible-message'
+                                data-test-incompatible-nonexports
+                              >
+                                <span>Playground is not currently supported for
+                                  card or field definitions that are not
+                                  exported.</span>
+                              </p>
                             {{/if}}
-                          </:content>
-                        </A.Item>
-                      {{/if}}
+                          {{/if}}
+                        </:content>
+                      </A.Item>
                       {{#if this.showSpecPreview}}
                         <SpecPreview
                           @selectedDeclaration={{this.selectedDeclaration}}
+                          @onPlaygroundAccordionToggle={{fn
+                            this.selectAccordionItem
+                            'playground'
+                          }}
                           as |SpecPreviewTitle SpecPreviewContent|
                         >
                           <A.Item
@@ -1207,6 +1226,10 @@ export default class CodeSubmode extends Component<Signature> {
         color: var(--boxel-450);
         font-weight: 500;
         padding: var(--boxel-sp-xl);
+        margin-block: 0;
+      }
+      .file-incompatible-message > span {
+        max-width: 400px;
       }
       .empty-container {
         background-color: var(--boxel-light-100);