Fix default templates crashing when card model is transiently undefined

packages/base/default-templates/field-edit.gts

@@ -1,18 +1,19 @@
 import GlimmerComponent from '@glimmer/component';
-import type { FieldDef } from '../card-api';
+import type { BaseDef, FieldDef } from '../card-api';
 import { FieldContainer } from '@cardstack/boxel-ui/components';
 import { eq } from '@cardstack/boxel-ui/helpers';
 import { startCase } from 'lodash-es';
 import { getField } from '@cardstack/runtime-common';
 
 export default class FieldDefEditTemplate extends GlimmerComponent<{
   Args: {
+    cardOrField: typeof BaseDef;
     model: FieldDef;
     fields: Record<string, new () => GlimmerComponent>;
   };
 }> {
   getFieldIcon = (key: string) => {
-    return getField(this.args.model.constructor, key)?.card?.icon;
+    return getField(this.args.cardOrField, key)?.card?.icon;
   };
   <template>
     <div class='field-def-edit-template'>

packages/base/default-templates/isolated-and-edit.gts

@@ -1,5 +1,5 @@
 import GlimmerComponent from '@glimmer/component';
-import type { CardDef, FieldsTypeFor, Format } from '../card-api';
+import type { BaseDef, CardDef, FieldsTypeFor, Format } from '../card-api';
 import { FieldContainer, Header } from '@cardstack/boxel-ui/components';
 import { cn, eq } from '@cardstack/boxel-ui/helpers';
 import { startCase } from 'lodash-es';
@@ -12,6 +12,7 @@ import CardInfoTemplates from './card-info';
 
 export default class DefaultCardDefTemplate extends GlimmerComponent<{
   Args: {
+    cardOrField: typeof BaseDef;
     model: CardDef;
     fields: FieldsTypeFor<CardDef>;
     format: Format;
@@ -29,7 +30,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
   // then display its edit format alongside other top-level fields.
   private get cardInfoFieldDisplayNames(): string[] | undefined {
     let fieldNames = this.standardComputedFields.filter((fieldName) => {
-      const field = getField(this.args.model.constructor, fieldName);
+      // the card class arrives as @cardOrField, so this works even while
+      // the model instance is still loading
+      const field = getField(this.args.cardOrField, fieldName);
       return field?.computeVia == undefined;
     });
 
@@ -38,6 +41,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
 
   // Fields to display in between the cardInfo header and notes footer
   private get displayFields(): FieldsTypeFor<CardDef> | undefined {
+    if (!this.args.fields) {
+      return undefined;
+    }
     let excludedFields = this.excludedFields.filter(
       (name) => !this.cardInfoFieldDisplayNames?.includes(name),
     );
@@ -52,7 +58,9 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
 
   private get isThemeCard() {
     return Boolean(
-      Object.entries(this.args.fields).find(([key]) => key === 'cssVariables'),
+      Object.entries(this.args.fields ?? {}).find(
+        ([key]) => key === 'cssVariables',
+      ),
     );
   }
 
@@ -69,7 +77,7 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
             @cardThumbnailURL={{@model.cardThumbnailURL}}
             @icon={{@model.constructor.icon}}
           />
-        {{else}}
+        {{else if @fields.cardInfo}}
           <CardInfoTemplates.edit
             @fields={{@fields}}
             @model={{@model}}
@@ -90,15 +98,17 @@ export default class DefaultCardDefTemplate extends GlimmerComponent<{
           {{/each-in}}
         </section>
       {{/if}}
-      <footer class='notes-footer'>
-        <FieldContainer
-          @label='Notes'
-          @icon={{getFieldIcon @model.cardInfo 'notes'}}
-          data-test-field='cardInfo-notes'
-        >
-          <@fields.cardInfo.notes />
-        </FieldContainer>
-      </footer>
+      {{#if @fields.cardInfo.notes}}
+        <footer class='notes-footer'>
+          <FieldContainer
+            @label='Notes'
+            @icon={{getFieldIcon @model.cardInfo 'notes'}}
+            data-test-field='cardInfo-notes'
+          >
+            <@fields.cardInfo.notes />
+          </FieldContainer>
+        </footer>
+      {{/if}}
     </div>
     <style scoped>
       .default-card-template {