Markdown format: full rendering pipeline and tooling (CS-10780 → CS-10798)

packages/base/address.gts

@@ -3,6 +3,7 @@ import StringField from './string';
 import CountryField from './country';
 import MapPinIcon from '@cardstack/boxel-icons/map-pin';
 import { EntityDisplayWithIcon } from '@cardstack/boxel-ui/components';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 
 function getAddressRows(
   addressLine1: string | undefined,
@@ -92,4 +93,29 @@ export default class AddressField extends FieldDef {
   };
 
   static atom = Atom;
+
+  // CS-10786: emit the address as a CommonMark hard-break-delimited block so
+  // downstream consumers preserve line structure. Each logical row is
+  // markdown-escaped individually so e.g. a `#` in an apartment label
+  // doesn't become a heading.
+  static markdown = class Markdown extends Component<typeof AddressField> {
+    get text() {
+      let rows = getAddressRows(
+        this.args.model?.addressLine1,
+        this.args.model?.addressLine2,
+        this.args.model?.city,
+        this.args.model?.state,
+        this.args.model?.postalCode,
+        this.args.model?.country?.name,
+        this.args.model?.poBoxNumber,
+      );
+      if (rows.length === 0) {
+        return '';
+      }
+      // Two-space-then-newline = CommonMark hard break, matching the
+      // TextAreaField markdown convention.
+      return rows.map((r) => markdownEscape(r)).join('  \n');
+    }
+    <template>{{this.text}}</template>
+  };
 }

packages/base/base64-image.gts

@@ -8,6 +8,7 @@ import {
   primitive,
   useIndexBasedKey,
 } from './card-api';
+import { markdownEscape } from '@cardstack/boxel-ui/helpers';
 import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
@@ -321,6 +322,23 @@ export default class Base64ImageField extends FieldDef {
     </template>
   };
   static embedded = Base64ImageField.isolated;
+
+  // CS-10786: never emit the raw base64 payload — it bloats the document
+  // and is useless to downstream consumers. Emit a placeholder that names
+  // the alt text if available, mirroring MaybeBase64Field's behavior.
+  static markdown = class Markdown extends Component<typeof Base64ImageField> {
+    get text() {
+      if (!this.args.model?.base64) {
+        return '';
+      }
+      let alt = this.args.model?.altText;
+      if (alt) {
+        return `[binary image: ${markdownEscape(alt)}]`;
+      }
+      return '[binary image]';
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 // from "ember-css-url"

packages/base/big-integer.gts

@@ -1,7 +1,7 @@
 import { primitive, Component, FieldDef } from './card-api';
 import { BoxelInput } from '@cardstack/boxel-ui/components';
 import { TextInputValidator } from './text-input-validator';
-import { not } from '@cardstack/boxel-ui/helpers';
+import { markdownEscape, not } from '@cardstack/boxel-ui/helpers';
 import Number99SmallIcon from '@cardstack/boxel-icons/number-99-small';
 import {
   fieldSerializer,
@@ -64,4 +64,18 @@ export default class BigIntegerField extends FieldDef {
   static embedded = View;
   static atom = View;
   static edit = Edit;
+
+  // CS-10786: serialize the bigint to a decimal string and escape it — the
+  // leading `-` of a negative value would otherwise look like a bullet
+  // marker at line start.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      let value = this.args.model;
+      if (value == null) {
+        return '';
+      }
+      return markdownEscape(BigIntegerSerializer.serialize(value));
+    }
+    <template>{{this.text}}</template>
+  };
 }

packages/base/boolean.gts

@@ -40,6 +40,16 @@ export default class BooleanField extends FieldDef {
   static embedded = View;
   static atom = View;
 
+  // CS-10786: emit `true`/`false` literally. The primitive is already safe
+  // (neither `true` nor `false` is a markdown metacharacter), and `null`/
+  // `undefined` resolves to empty string.
+  static markdown = class Markdown extends Component<typeof this> {
+    get text() {
+      return this.args.model == null ? '' : String(this.args.model);
+    }
+    <template>{{this.text}}</template>
+  };
+
   static edit = class Edit extends Component<typeof this> {
     <template>
       <div data-test-radio-group={{@fieldName}}>

packages/base/brand-functional-palette.gts

@@ -2,6 +2,7 @@ import { GridContainer, Swatch } from '@cardstack/boxel-ui/components';
 import {
   buildCssVariableName,
   entriesToCssRuleMap,
+  markdownEscape,
 } from '@cardstack/boxel-ui/helpers';
 
 import { field, contains, Component, getFields, FieldDef } from './card-api';
@@ -94,4 +95,33 @@ export default class BrandFunctionalPalette extends FieldDef {
     }
     return entriesToCssRuleMap(this.cssVariableFields);
   }
+
+  // CS-10787: emit a bulleted list of the palette entries with their CSS
+  // color values in inline code. Skips empty slots so the output stays
+  // compact.
+  static markdown = class Markdown extends Component<
+    typeof BrandFunctionalPalette
+  > {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let rows: string[] = [];
+      let pairs: { key: keyof typeof model; label: string }[] = [
+        { key: 'primary', label: 'Primary' },
+        { key: 'secondary', label: 'Secondary' },
+        { key: 'accent', label: 'Accent' },
+        { key: 'light', label: 'Light' },
+        { key: 'dark', label: 'Dark' },
+      ];
+      for (let { key, label } of pairs) {
+        let value = model[key] as string | undefined;
+        if (!value) continue;
+        rows.push(`- ${markdownEscape(label)}: \`${value}\``);
+      }
+      return rows.join('\n');
+    }
+    <template>{{this.text}}</template>
+  };
 }

packages/base/brand-logo.gts

@@ -1,6 +1,7 @@
 import { FieldContainer, GridContainer } from '@cardstack/boxel-ui/components';
 import {
   entriesToCssRuleMap,
+  markdownEscape,
   type CssRuleMap,
 } from '@cardstack/boxel-ui/helpers';
 
@@ -14,6 +15,7 @@ import {
   getFieldDescription,
 } from './card-api';
 import { buildCssVariableName } from '@cardstack/boxel-ui/helpers';
+import { markdownLink } from './markdown-helpers';
 import {
   type CssVariableField,
   type CssVariableFieldEntry,
@@ -308,6 +310,26 @@ export class MarkField extends URLField {
       </style>
     </template>
   };
+
+  // CS-10787: render the mark as a markdown image — the URL is the asset,
+  // and the alt text is empty (callers set alt via context).
+  static markdown = class Markdown extends Component<typeof MarkField> {
+    get text() {
+      let url = this.args.model;
+      if (!url) {
+        return '';
+      }
+      let encoded: string;
+      try {
+        encoded = encodeURI(url);
+      } catch {
+        encoded = url;
+      }
+      encoded = encoded.replace(/\(/g, '%28').replace(/\)/g, '%29');
+      return `![](${encoded})`;
+    }
+    <template>{{this.text}}</template>
+  };
 }
 
 export default class BrandLogo extends FieldDef {
@@ -388,4 +410,46 @@ export default class BrandLogo extends FieldDef {
   }
 
   static embedded = Embedded;
+
+  // CS-10787: emit a bulleted list of the logo URLs that are actually
+  // populated. Skips empty slots so the output stays compact.
+  static markdown = class Markdown extends Component<typeof BrandLogo> {
+    get text() {
+      let model = this.args.model;
+      if (!model) {
+        return '';
+      }
+      let rows: { label: string; url: string }[] = [];
+      let pairs: { key: keyof typeof model; label: string }[] = [
+        { key: 'primaryMark1', label: 'Primary mark (light)' },
+        { key: 'primaryMark2', label: 'Primary mark (dark)' },
+        { key: 'primaryMarkGreyscale1', label: 'Primary mark greyscale (light)' },
+        { key: 'primaryMarkGreyscale2', label: 'Primary mark greyscale (dark)' },
+        { key: 'secondaryMark1', label: 'Secondary mark (light)' },
+        { key: 'secondaryMark2', label: 'Secondary mark (dark)' },
+        {
+          key: 'secondaryMarkGreyscale1',
+          label: 'Secondary mark greyscale (light)',
+        },
+        {
+          key: 'secondaryMarkGreyscale2',
+          label: 'Secondary mark greyscale (dark)',
+        },
+        { key: 'socialMediaProfileIcon', label: 'Social media icon' },
+      ];
+      for (let { key, label } of pairs) {
+        let url = model[key] as string | undefined;
+        if (url) {
+          rows.push({ label, url });
+        }
+      }
+      if (!rows.length) {
+        return '';
+      }
+      return rows
+        .map(({ label, url }) => `- ${markdownEscape(label)}: ${markdownLink(url, url)}`)
+        .join('\n');
+    }
+    <template>{{this.text}}</template>
+  };
 }