@tinacms/astro 0.4.1 → 0.5.0

package/dist/types.d.ts

@@ -35,10 +35,54 @@ export type CodeBlockElement = {
         children: TextElement[];
     }[];
 };
-export type BlockElement = {
+/** Per-column horizontal alignment for table cells. */
+export type TableAlign = 'left' | 'right' | 'center';
+/** A paragraph — the block wrapper Tina puts around inline content. */
+export type ParagraphElement = {
     type: 'p';
     children: InlineElement[];
-} | {
+};
+/** A single table cell. Its content is wrapped in a paragraph by the parser. */
+export type TableCellElement = {
+    type: 'td';
+    children: ParagraphElement[];
+};
+export type TableRowElement = {
+    type: 'tr';
+    children: TableCellElement[];
+};
+/**
+ * Native markdown table node (the shape `@tinacms/mdx` emits from a GFM
+ * table). Rows/cells are plain `tr`/`td`; per-column text-align lives on
+ * `props.align`. Mirrors `TableElement` in
+ * `packages/@tinacms/mdx/src/parse/plate.ts`.
+ */
+export type TableElement = {
+    type: 'table';
+    props?: {
+        align?: TableAlign[];
+    };
+    children: TableRowElement[];
+};
+/** A cell in the legacy MDX-flow table; its `value` is itself rich text. */
+export type MdxTableCell = {
+    value: TinaRichTextContent;
+};
+export type MdxTableRow = {
+    tableCells: MdxTableCell[];
+};
+/**
+ * Props of the legacy MDX-flow table — an `mdxJsxFlowElement` named `table`
+ * whose cells live on `props.tableRows` rather than as `tr`/`td` child nodes.
+ * Older editors produced this shape; `MdxTableNode.astro` still renders it.
+ */
+export type MdxTableProps = {
+    align?: TableAlign[];
+    /** When true, the first row is rendered as a `<thead>` of `<th>`. */
+    firstRowHeader?: boolean;
+    tableRows?: MdxTableRow[];
+};
+export type BlockElement = ParagraphElement | {
     type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     children: InlineElement[];
 } | {
@@ -57,7 +101,7 @@ export type BlockElement = {
     type: 'hr';
 } | {
     type: 'break';
-} | ImageElement | CodeBlockElement | {
+} | ImageElement | CodeBlockElement | TableElement | {
     type: 'maybe_mdx';
 } | {
     type: 'html';
@@ -88,5 +132,86 @@ export type MdxElement = {
     children?: TinaRichTextNode[];
 };
 export type TinaRichTextContent = TinaRichTextRoot | TinaRichTextNode[] | null | undefined;
-/** A map of mdxJsx name (or default tag override) → Astro component. */
-export type CustomComponentsMap = Record<string, AstroComponent>;
+/**
+ * An Astro (or framework) component that accepts props `P`. Astro's language
+ * server types an imported `.astro` component as `(props: Props) => any`, so
+ * this both accepts such a component and checks that its `Props` match what
+ * the renderer passes to the override.
+ */
+export type AstroComponentWithProps<P> = (props: P) => any;
+/** Props passed to an `a` (link) override. */
+export interface LinkComponentProps {
+    url: string;
+}
+/** Props passed to an `img` (image) override. */
+export interface ImageComponentProps {
+    url: string;
+    alt?: string;
+    caption?: string;
+}
+/** Props passed to a `code_block` override. */
+export interface CodeBlockComponentProps {
+    value: string;
+    lang?: string;
+}
+/** Props passed to `html` / `html_inline` overrides. */
+export interface HtmlComponentProps {
+    value: string;
+}
+/** Props passed to a `table` override (native table node). */
+export interface TableComponentProps {
+    node: TableElement;
+}
+/** Props passed to `td` / `th` overrides. */
+export interface TableCellComponentProps {
+    align?: TableAlign;
+}
+/**
+ * Map of component name → Astro component, passed to `<TinaMarkdown>`.
+ *
+ * The built-in keys below are suggested by editor autocomplete and override
+ * the matching default element/tag; the named-prop overrides are typed with
+ * the exact props the renderer passes (e.g. `code_block` receives
+ * `{ value, lang }`).
+ *
+ * Custom rich-text **templates** render as mdxJsx nodes dispatched by `name`,
+ * with their fields passed as props. Register one under its template name.
+ * By default a custom key accepts any component; supply the optional `Custom`
+ * type param to type them precisely and have the registration checked:
+ *
+ * ```ts
+ * // template `cta` with a `title: string` field
+ * const components: CustomComponentsMap<{ cta: { title: string } }> = {
+ *   cta: Cta, // ← Cta's Props must be assignable from `{ title: string }`
+ * };
+ * ```
+ */
+export type CustomComponentsMap<Custom extends Record<string, object> = Record<never, never>> = {
+    p?: AstroComponent;
+    h1?: AstroComponent;
+    h2?: AstroComponent;
+    h3?: AstroComponent;
+    h4?: AstroComponent;
+    h5?: AstroComponent;
+    h6?: AstroComponent;
+    ul?: AstroComponent;
+    ol?: AstroComponent;
+    li?: AstroComponent;
+    lic?: AstroComponent;
+    blockquote?: AstroComponent;
+    tr?: AstroComponent;
+    hr?: AstroComponent;
+    break?: AstroComponent;
+    a?: AstroComponentWithProps<LinkComponentProps>;
+    img?: AstroComponentWithProps<ImageComponentProps>;
+    code_block?: AstroComponentWithProps<CodeBlockComponentProps>;
+    html?: AstroComponentWithProps<HtmlComponentProps>;
+    html_inline?: AstroComponentWithProps<HtmlComponentProps>;
+    table?: AstroComponentWithProps<TableComponentProps>;
+    td?: AstroComponentWithProps<TableCellComponentProps>;
+    th?: AstroComponentWithProps<TableCellComponentProps>;
+} & {
+    [K in keyof Custom]?: AstroComponentWithProps<Custom[K]>;
+} & {
+    [name: string]: AstroComponent | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/astro",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "type": "module",
   "main": "src/TinaMarkdown.astro",
   "types": "dist/index.d.ts",

package/src/MdxNode.astro

@@ -2,9 +2,13 @@
 /**
  * mdxJsx{Flow,Text}Element nodes are dispatched by `node.name` — registered
  * components on the `components` map render with the node's props spread in.
- * Unregistered names emit a visible placeholder so missing registrations
- * surface during development.
+ *
+ * When no component is registered for the name, an `mdxJsxFlowElement` named
+ * `table` renders the built-in legacy table (`MdxTableNode`), mirroring the
+ * React renderer. Any other unregistered name emits a visible placeholder so
+ * missing registrations surface during development.
  */
+import MdxTableNode from './MdxTableNode.astro';
 import type { CustomComponentsMap, MdxElement } from './types';
 
 interface Props {
@@ -13,10 +17,17 @@ interface Props {
 }
 
 const { node, components } = Astro.props;
+// Single place that guarantees mdx props are an object, so neither the
+// component spread nor the legacy-table renderer downstream needs its own
+// guard. Parsed content always sets props; this only defends malformed nodes.
+const props: Record<string, unknown> = node.props ?? {};
 const MdxComponent = components[node.name];
+const isLegacyTable = !MdxComponent && node.name === 'table';
 ---
 {MdxComponent ? (
-  <MdxComponent {...(node.props ?? {})} />
+  <MdxComponent {...props} />
+) : isLegacyTable ? (
+  <MdxTableNode node={{ ...node, props }} components={components} />
 ) : (
   <span style="display:inline-block;padding:0.25rem 0.5rem;background:#fee;color:#900;border-radius:0.25rem;font-family:monospace;font-size:0.85em;">
     No component provided for {node.name}

package/src/MdxTableNode.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * Renders the legacy MDX-flow table shape — an `mdxJsxFlowElement` named
+ * `table` whose cells live on `props.tableRows` (rather than as `tr`/`td`
+ * child nodes). Mirrors the matching branch of
+ * `packages/tinacms/src/rich-text/index.tsx`: when `props.firstRowHeader` is
+ * set the first row becomes a `<thead>` of `<th>` and the rest are `<td>` in
+ * `<tbody>`. Per-column alignment comes from `props.align`, and the `th` / `td`
+ * overrides apply. The `table` / `tr` overrides are intentionally NOT honored
+ * here: the `table` override is typed to receive a native `{ node:
+ * TableElement }`, which this legacy `MdxElement`-based shape can't provide.
+ */
+import TinaMarkdown from './TinaMarkdown.astro';
+import type {
+  CustomComponentsMap,
+  InlineElement,
+  MdxElement,
+  MdxTableProps,
+  TinaRichTextContent,
+} from './types';
+
+interface Props {
+  node: MdxElement;
+  components: CustomComponentsMap;
+}
+
+const { node, components } = Astro.props;
+// `node.props` is guaranteed to be an object — MdxNode defaults it before
+// dispatching here — so no further guard is needed at this layer.
+const props = node.props as MdxTableProps;
+
+const align = props.align ?? [];
+const allRows = props.tableRows ?? [];
+const header = props.firstRowHeader ? allRows.at(0) : undefined;
+const bodyRows = props.firstRowHeader ? allRows.slice(1) : allRows;
+
+const ThOverride = components.th;
+const TdOverride = components.td;
+
+// A cell `value` is rich text; unwrap each wrapping paragraph to its inline
+// nodes so a cell renders `<td>text</td>` rather than `<td><p>text</p></td>`.
+const cellInline = (value: TinaRichTextContent): InlineElement[] => {
+  const nodes = Array.isArray(value) ? value : (value?.children ?? []);
+  return nodes.flatMap((n) => (n.type === 'p' ? n.children : []));
+};
+
+const cellStyle = (i: number) => `text-align:${align[i] ?? 'auto'}`;
+---
+<table>
+  {header && (
+    <thead>
+      <tr>
+        {(header.tableCells ?? []).map((cell, i) =>
+          ThOverride ? (
+            <ThOverride align={align[i]}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </ThOverride>
+          ) : (
+            <th style={cellStyle(i)}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </th>
+          )
+        )}
+      </tr>
+    </thead>
+  )}
+  <tbody>
+    {bodyRows.map((row) => (
+      <tr>
+        {(row?.tableCells ?? []).map((cell, i) =>
+          TdOverride ? (
+            <TdOverride align={align[i]}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </TdOverride>
+          ) : (
+            <td style={cellStyle(i)}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </td>
+          )
+        )}
+      </tr>
+    ))}
+  </tbody>
+</table>

package/src/Node.astro

@@ -12,12 +12,14 @@ import ImageNode from './ImageNode.astro';
 import Leaf from './Leaf.astro';
 import LinkNode from './LinkNode.astro';
 import MdxNode from './MdxNode.astro';
+import TableNode from './TableNode.astro';
 import type {
   CodeBlockElement,
   CustomComponentsMap,
   ImageElement,
   LinkElement,
   MdxElement,
+  TableElement,
   TextElement,
   TinaRichTextNode,
 } from './types';
@@ -54,6 +56,8 @@ const containerTypes = new Set([
   <ImageNode node={node as ImageElement} components={components} />
 ) : t === 'code_block' ? (
   <CodeBlockNode node={node as CodeBlockElement} components={components} />
+) : t === 'table' ? (
+  <TableNode node={node as TableElement} components={components} />
 ) : t === 'text' ? (
   <Leaf node={node as TextElement} />
 ) : t === 'mdxJsxFlowElement' || t === 'mdxJsxTextElement' ? (

package/src/TableNode.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * Renders a native markdown `table` node. Mirrors the `case 'table'` branch
+ * in `packages/tinacms/src/rich-text/index.tsx`: every row goes into a single
+ * `<tbody>` as `<td>` cells (the first row is NOT promoted to a header — that
+ * matches the React renderer's native-table path), per-column alignment comes
+ * from `node.props.align`, and `components.table` / `.tr` / `.td` override the
+ * default tags. Each cell's content is the inline content of its paragraph,
+ * rendered without a wrapping `<p>` (the equivalent of React's `p` → `td`
+ * override).
+ */
+import TinaMarkdown from './TinaMarkdown.astro';
+import type {
+  CustomComponentsMap,
+  InlineElement,
+  TableCellElement,
+  TableElement,
+} from './types';
+
+interface Props {
+  node: TableElement;
+  components: CustomComponentsMap;
+}
+
+const { node, components } = Astro.props;
+
+const TableOverride = components.table;
+const TrOverride = components.tr;
+const TdOverride = components.td;
+
+const align = node.props?.align ?? [];
+const rows = node.children ?? [];
+
+const TABLE_STYLE = 'border:1px solid #EDECF3';
+const tdStyle = (i: number) =>
+  `text-align:${align[i] ?? 'auto'};border:1px solid #EDECF3;padding:0.25rem`;
+
+// A cell wraps its content in a paragraph; unwrap to the inline nodes so the
+// cell renders `<td>text</td>` rather than `<td><p>text</p></td>`.
+const cellContent = (cell: TableCellElement): InlineElement[] =>
+  (cell?.children ?? []).flatMap((paragraph) => paragraph?.children ?? []);
+
+const Table = TableOverride ?? 'table';
+const tableProps = TableOverride ? { node } : { style: TABLE_STYLE };
+const Tr = TrOverride ?? 'tr';
+---
+<Table {...tableProps}>
+  <tbody>
+    {rows.map((row) => (
+      <Tr>
+        {(row?.children ?? []).map((cell, i) =>
+          TdOverride ? (
+            <TdOverride align={align[i]}>
+              <TinaMarkdown content={cellContent(cell)} components={components} />
+            </TdOverride>
+          ) : (
+            <td style={tdStyle(i)}>
+              <TinaMarkdown content={cellContent(cell)} components={components} />
+            </td>
+          )
+        )}
+      </Tr>
+    ))}
+  </tbody>
+</Table>

package/src/__tests__/TinaMarkdown.test.ts

@@ -6,6 +6,8 @@ import codeBlock from './fixtures/code-block.json';
 import leafMarks from './fixtures/leaf-marks.json';
 import mdxJsxFlow from './fixtures/mdx-jsx-flow.json';
 import mdxJsxText from './fixtures/mdx-jsx-text.json';
+import mdxTable from './fixtures/mdx-table.json';
+import table from './fixtures/table.json';
 
 let container: AstroContainer;
 
@@ -84,6 +86,51 @@ describe('TinaMarkdown', () => {
   });
 });
 
+describe('TinaMarkdown — tables', () => {
+  it('renders a native table node with rows, cells and column alignment', async () => {
+    const html = await render({ props: { content: table } });
+    expect(html).toMatchSnapshot();
+    expect(html).toContain('<table');
+    expect(html).toContain('<tbody>');
+    expect(html).toContain('<tr>');
+    expect(html).toContain('<td');
+    // Per-column alignment from props.align.
+    expect(html).toContain('text-align:left');
+    expect(html).toContain('text-align:center');
+    expect(html).toContain('text-align:right');
+    // Inline marks render inside cells.
+    expect(html).toContain('<strong>Ada</strong>');
+    // No <thead>/<th> on the native path (matches the React renderer).
+    expect(html).not.toContain('<thead>');
+    expect(html).not.toContain('<th');
+    // Cell content is not wrapped in an extra <p>.
+    expect(html).not.toMatch(/<td[^>]*><p[\s>]/);
+  });
+
+  it('overrides the table tag via components.table', async () => {
+    const FancyTable = await import('./fixtures/FancyTable.astro');
+    const html = await render({
+      props: { content: table, components: { table: FancyTable.default } },
+    });
+    expect(html).toContain('class="fancy-table"');
+    expect(html).toContain('Name');
+    expect(html).toContain('Eng');
+  });
+
+  it('renders the legacy mdx-flow table with a header row', async () => {
+    const html = await render({ props: { content: mdxTable } });
+    expect(html).toMatchSnapshot();
+    expect(html).toContain('<thead>');
+    expect(html).toContain('<th');
+    expect(html).toContain('Header A');
+    expect(html).toContain('<tbody>');
+    expect(html).toContain('a1');
+    expect(html).toContain('text-align:left');
+    expect(html).toContain('text-align:right');
+    expect(html).not.toContain('No component provided for table');
+  });
+});
+
 describe('TinaMarkdown — components map', () => {
   it('dispatches a registered mdxJsx component by name', async () => {
     const MyFeature = await import('./fixtures/MyFeature.astro');

package/src/__tests__/__snapshots__/TinaMarkdown.test.ts.snap

@@ -5,3 +5,7 @@ exports[`TinaMarkdown > renders code blocks with language class 1`] = `"<pre><co
 exports[`TinaMarkdown > renders nested leaf-mark formatting 1`] = `"<p>Some <strong>bold</strong> text</p><p>Some <strong><em>bold and emphasized</em></strong> text</p><p>Marks with <em>emphasized text nesting </em><strong><em>bold</em></strong><em> text</em></p><p><strong>Hello </strong><strong><em>world</em></strong><strong>, again</strong> <em>here</em></p><p>Some <code>inline code</code> examples</p><p><em>Hello </em><em><code>some code</code></em><em>, again</em></p><p><strong>Hello </strong><a href="https://example.com"><strong>world</strong></a></p><p><strong><em>Hello </em></strong><a href="https://example.com"><strong><em>world</em></strong></a><em> And some other text, which has a </em><a href="https://something.com"><em>link to something</em></a></p>"`;
 
 exports[`TinaMarkdown > renders the basic kitchen-sink fixture 1`] = `"<h1>Heading</h1><p>A paragraph.</p><blockquote>A quote.</blockquote><ul><li><div>An item</div></li></ul><hr><p>A <a href="http://example.com">link</a>.</p><p><img src="https://get.svg.workers.dev" alt="Alt Text"></p>"`;
+
+exports[`TinaMarkdown — tables > renders a native table node with rows, cells and column alignment 1`] = `"<table style="border:1px solid #EDECF3"> <tbody> <tr><td style="text-align:left;border:1px solid #EDECF3;padding:0.25rem"> Name </td><td style="text-align:center;border:1px solid #EDECF3;padding:0.25rem"> Role </td><td style="text-align:right;border:1px solid #EDECF3;padding:0.25rem"> Score </td></tr><tr><td style="text-align:left;border:1px solid #EDECF3;padding:0.25rem"> <strong>Ada</strong> </td><td style="text-align:center;border:1px solid #EDECF3;padding:0.25rem"> Eng </td><td style="text-align:right;border:1px solid #EDECF3;padding:0.25rem"> 99 </td></tr> </tbody> </table>"`;
+
+exports[`TinaMarkdown — tables > renders the legacy mdx-flow table with a header row 1`] = `"<table> <thead> <tr> <th style="text-align:left"> Header A </th><th style="text-align:right"> Header B </th> </tr> </thead> <tbody> <tr> <td style="text-align:left"> a1 </td><td style="text-align:right"> b1 </td> </tr> </tbody> </table>"`;

package/src/__tests__/fixtures/FancyTable.astro

@@ -0,0 +1,3 @@
+---
+---
+<table class="fancy-table"><slot /></table>

package/src/__tests__/fixtures/mdx-table.json

@@ -0,0 +1,44 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "mdxJsxFlowElement",
+      "name": "table",
+      "props": {
+        "firstRowHeader": true,
+        "align": ["left", "right"],
+        "tableRows": [
+          {
+            "tableCells": [
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "Header A" }] }
+                ]
+              },
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "Header B" }] }
+                ]
+              }
+            ]
+          },
+          {
+            "tableCells": [
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "a1" }] }
+                ]
+              },
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "b1" }] }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "children": [{ "type": "text", "text": "" }]
+    }
+  ]
+}

package/src/__tests__/fixtures/table.json

@@ -0,0 +1,60 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "table",
+      "props": { "align": ["left", "center", "right"] },
+      "children": [
+        {
+          "type": "tr",
+          "children": [
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Name" }] }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Role" }] }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Score" }] }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "tr",
+          "children": [
+            {
+              "type": "td",
+              "children": [
+                {
+                  "type": "p",
+                  "children": [{ "type": "text", "text": "Ada", "bold": true }]
+                }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Eng" }] }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "99" }] }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/types.ts

@@ -44,8 +44,57 @@ export type CodeBlockElement = {
   children?: { children: TextElement[] }[];
 };
 
+/** Per-column horizontal alignment for table cells. */
+export type TableAlign = 'left' | 'right' | 'center';
+
+/** A paragraph — the block wrapper Tina puts around inline content. */
+export type ParagraphElement = {
+  type: 'p';
+  children: InlineElement[];
+};
+
+/** A single table cell. Its content is wrapped in a paragraph by the parser. */
+export type TableCellElement = {
+  type: 'td';
+  children: ParagraphElement[];
+};
+
+export type TableRowElement = {
+  type: 'tr';
+  children: TableCellElement[];
+};
+
+/**
+ * Native markdown table node (the shape `@tinacms/mdx` emits from a GFM
+ * table). Rows/cells are plain `tr`/`td`; per-column text-align lives on
+ * `props.align`. Mirrors `TableElement` in
+ * `packages/@tinacms/mdx/src/parse/plate.ts`.
+ */
+export type TableElement = {
+  type: 'table';
+  props?: { align?: TableAlign[] };
+  children: TableRowElement[];
+};
+
+/** A cell in the legacy MDX-flow table; its `value` is itself rich text. */
+export type MdxTableCell = { value: TinaRichTextContent };
+
+export type MdxTableRow = { tableCells: MdxTableCell[] };
+
+/**
+ * Props of the legacy MDX-flow table — an `mdxJsxFlowElement` named `table`
+ * whose cells live on `props.tableRows` rather than as `tr`/`td` child nodes.
+ * Older editors produced this shape; `MdxTableNode.astro` still renders it.
+ */
+export type MdxTableProps = {
+  align?: TableAlign[];
+  /** When true, the first row is rendered as a `<thead>` of `<th>`. */
+  firstRowHeader?: boolean;
+  tableRows?: MdxTableRow[];
+};
+
 export type BlockElement =
-  | { type: 'p'; children: InlineElement[] }
+  | ParagraphElement
   | {
       type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
       children: InlineElement[];
@@ -58,6 +107,7 @@ export type BlockElement =
   | { type: 'break' }
   | ImageElement
   | CodeBlockElement
+  | TableElement
   | { type: 'maybe_mdx' }
   | { type: 'html'; value: string }
   | { type: 'invalid_markdown'; value: string };
@@ -93,5 +143,94 @@ export type TinaRichTextContent =
   | null
   | undefined;
 
-/** A map of mdxJsx name (or default tag override) → Astro component. */
-export type CustomComponentsMap = Record<string, AstroComponent>;
+/**
+ * An Astro (or framework) component that accepts props `P`. Astro's language
+ * server types an imported `.astro` component as `(props: Props) => any`, so
+ * this both accepts such a component and checks that its `Props` match what
+ * the renderer passes to the override.
+ */
+export type AstroComponentWithProps<P> = (props: P) => any;
+
+/** Props passed to an `a` (link) override. */
+export interface LinkComponentProps {
+  url: string;
+}
+/** Props passed to an `img` (image) override. */
+export interface ImageComponentProps {
+  url: string;
+  alt?: string;
+  caption?: string;
+}
+/** Props passed to a `code_block` override. */
+export interface CodeBlockComponentProps {
+  value: string;
+  lang?: string;
+}
+/** Props passed to `html` / `html_inline` overrides. */
+export interface HtmlComponentProps {
+  value: string;
+}
+/** Props passed to a `table` override (native table node). */
+export interface TableComponentProps {
+  node: TableElement;
+}
+/** Props passed to `td` / `th` overrides. */
+export interface TableCellComponentProps {
+  align?: TableAlign;
+}
+
+/**
+ * Map of component name → Astro component, passed to `<TinaMarkdown>`.
+ *
+ * The built-in keys below are suggested by editor autocomplete and override
+ * the matching default element/tag; the named-prop overrides are typed with
+ * the exact props the renderer passes (e.g. `code_block` receives
+ * `{ value, lang }`).
+ *
+ * Custom rich-text **templates** render as mdxJsx nodes dispatched by `name`,
+ * with their fields passed as props. Register one under its template name.
+ * By default a custom key accepts any component; supply the optional `Custom`
+ * type param to type them precisely and have the registration checked:
+ *
+ * ```ts
+ * // template `cta` with a `title: string` field
+ * const components: CustomComponentsMap<{ cta: { title: string } }> = {
+ *   cta: Cta, // ← Cta's Props must be assignable from `{ title: string }`
+ * };
+ * ```
+ */
+export type CustomComponentsMap<
+  Custom extends Record<string, object> = Record<never, never>,
+> = {
+  // Block/inline overrides whose content comes through the default slot.
+  p?: AstroComponent;
+  h1?: AstroComponent;
+  h2?: AstroComponent;
+  h3?: AstroComponent;
+  h4?: AstroComponent;
+  h5?: AstroComponent;
+  h6?: AstroComponent;
+  ul?: AstroComponent;
+  ol?: AstroComponent;
+  li?: AstroComponent;
+  lic?: AstroComponent;
+  blockquote?: AstroComponent;
+  tr?: AstroComponent;
+  hr?: AstroComponent;
+  break?: AstroComponent;
+  // Overrides that receive named props.
+  a?: AstroComponentWithProps<LinkComponentProps>;
+  img?: AstroComponentWithProps<ImageComponentProps>;
+  code_block?: AstroComponentWithProps<CodeBlockComponentProps>;
+  html?: AstroComponentWithProps<HtmlComponentProps>;
+  html_inline?: AstroComponentWithProps<HtmlComponentProps>;
+  table?: AstroComponentWithProps<TableComponentProps>;
+  td?: AstroComponentWithProps<TableCellComponentProps>;
+  th?: AstroComponentWithProps<TableCellComponentProps>;
+} & {
+  // Custom templates declared via the `Custom` param — typed by their props.
+  [K in keyof Custom]?: AstroComponentWithProps<Custom[K]>;
+} & {
+  // Any other custom mdxJsx component name (matched by `node.name`).
+  [name: string]: AstroComponent | undefined;
+};