@mobile-reality/mdma-renderer-vanilla 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Marcin Sadowski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,127 @@
+# @mobile-reality/mdma-renderer-vanilla
+
+Render MDMA documents with **no framework** — plain DOM, no React, no Vue, no build step required.
+Same components, same `.mdma-*` class names, and the same `styles.css` as
+[`renderer-react`](../renderer-react) and [`renderer-vue`](../renderer-vue), so a theme is portable
+across all three.
+
+Reach for this when the host has no framework: a static page, a `<script>` tag, a CMS template, a
+web-component wrapper, or an app whose framework MDMA shouldn't dictate. If you already have React
+or Vue, use those renderers — they'll be less code for you.
+
+```sh
+pnpm add @mobile-reality/mdma-renderer-vanilla
+```
+
+## Quick start
+
+```ts
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkGfm from 'remark-gfm';
+import { remarkMdma } from '@mobile-reality/mdma-parser';
+import { AttachableRegistry, createDocumentStore } from '@mobile-reality/mdma-runtime';
+import { registerAllCoreAttachables } from '@mobile-reality/mdma-attachables-core';
+import { mountMdmaDocument } from '@mobile-reality/mdma-renderer-vanilla';
+import '@mobile-reality/mdma-renderer-vanilla/styles.css';
+
+const processor = unified().use(remarkParse).use(remarkGfm).use(remarkMdma, {});
+const ast = await processor.run(processor.parse(markdown), markdown);
+
+const registry = new AttachableRegistry();
+registerAllCoreAttachables(registry);
+const store = createDocumentStore(ast, { registry });
+
+const doc = mountMdmaDocument(document.getElementById('app')!, { ast, store, theme: 'auto' });
+```
+
+`mountMdmaDocument` returns a handle:
+
+```ts
+doc.el;                      // the .mdma-document root
+doc.update({ ast: next });   // feed a re-parse (see Streaming)
+doc.destroy();               // unsubscribe from the store and detach
+```
+
+It subscribes to the store itself, so a dispatch from any component re-renders the document without
+you wiring anything.
+
+## Streaming
+
+This is the part a framework normally does for you, and the reason this package is more than a pile
+of `document.createElement` calls.
+
+A streamed model reply re-parses on **every chunk**, so `update({ ast })` gets a brand-new AST many
+times a second — while the user may already be typing into a form the document drew. There is no
+virtual DOM here. Instead each renderer owns its element and is re-fed props, so it decides what to
+touch:
+
+- **Form inputs are updated in place**, and `setInputValue` refuses to write to a focused field —
+  your half-typed value and caret position survive every re-parse.
+- **Nodes are only moved when the order actually changed.** Re-appending a node that is already in
+  position would detach it, and detaching blurs a focused input.
+- **A block that has parsed once is kept.** Mid-stream a complete fence can briefly revert to a
+  pending code node; without the cache the document would flicker back to a loading skeleton.
+- **Blocks are keyed by id *and* type**, so a truncated type (`approval-gat` → `approval-gate`)
+  re-mounts into the right renderer instead of updating the wrong one.
+- **A `thinking` block streams its content live** rather than sitting behind a skeleton.
+
+Components with nothing worth preserving simply rebuild; `tests/streaming.test.ts` pins all of it.
+
+## Customization
+
+```ts
+mountMdmaDocument(container, {
+  ast,
+  store,
+  theme: 'dark',
+  customizations: {
+    components: {
+      chart: MyChartRenderer,                    // replace a built-in renderer
+      form: { elements: { input: GlassInput } }, // or just one sub-element
+    },
+    customVariants: { 'graph-3d': Graph3D },     // draw `type: custom` blocks
+    dataSources: { countries: [{ label: 'Poland', value: 'pl' }] },
+  },
+});
+```
+
+A renderer is a function returning an instance — no class, no lifecycle to learn:
+
+```ts
+import { el, type MdmaBlockRenderer } from '@mobile-reality/mdma-renderer-vanilla';
+
+const MyChartRenderer: MdmaBlockRenderer = (initial) => {
+  const root = el('div', { class: 'my-chart' });
+  const instance = {
+    el: root,
+    update(props) { /* re-feed, mutate what changed */ },
+    destroy() { /* optional cleanup */ },
+  };
+  return instance;
+};
+```
+
+For the common case where nothing needs preserving, `stateless(props => element)` writes the
+instance for you, and `withState(init, (props, state) => element)` keeps view state (a revealed PII
+cell, a fired webhook) across rebuilds.
+
+## Theming
+
+Identical to the other web renderers: `theme` takes `'light' | 'dark' | 'auto'` or a full
+`MdmaTheme` token object, applied as `data-theme` or inline `--mdma-*` variables. `styles.css` is
+byte-identical to the React package's and a test enforces that, so the three renderers can never
+drift apart visually.
+
+## What's here
+
+All ten core component types — `form`, `button`, `tasklist`, `table`, `callout`, `approval-gate`,
+`webhook`, `chart`, `thinking`, `custom` — plus Markdown rendering, loading skeletons, element
+overrides, and theming.
+
+Two deliberate limits, matching the framework renderers: `chart` draws a table rather than a real
+chart (override it with a charting library), and `webhook` routes the trigger rather than performing
+the HTTP call.
+
+Raw HTML in Markdown is rendered as **text**, never parsed into live markup — model output must not
+become executable DOM.

package/dist/components/ApprovalGateRenderer.d.ts

@@ -0,0 +1,2 @@
+export declare const ApprovalGateRenderer: import("../index.js").MdmaBlockRenderer;
+//# sourceMappingURL=ApprovalGateRenderer.d.ts.map

package/dist/components/ApprovalGateRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalGateRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ApprovalGateRenderer.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,yCAsD/B,CAAC"}

package/dist/components/ApprovalGateRenderer.js

@@ -0,0 +1,43 @@
+import { el } from '../dom/el.js';
+import { stateless } from '../renderers/renderer-props.js';
+export const ApprovalGateRenderer = stateless(({ component, componentState, dispatch }) => {
+    if (component.type !== 'approval-gate')
+        return el('div');
+    const status = componentState?.values.status ?? 'pending';
+    return el('div', {
+        class: `mdma-approval-gate mdma-approval-gate--${status}`,
+        dataset: { 'component-id': component.id },
+    }, [
+        el('h3', { class: 'mdma-approval-gate-title' }, [component.title]),
+        component.description &&
+            el('p', { class: 'mdma-approval-gate-description' }, [component.description]),
+        el('div', { class: 'mdma-approval-gate-status' }, ['Status: ', el('strong', {}, [status])]),
+        status === 'pending' &&
+            el('div', { class: 'mdma-approval-gate-actions' }, [
+                el('button', {
+                    type: 'button',
+                    class: 'mdma-button mdma-button--primary',
+                    on: {
+                        click: () => dispatch({
+                            type: 'APPROVAL_GRANTED',
+                            componentId: component.id,
+                            actor: { id: 'current-user' },
+                        }),
+                    },
+                }, ['Approve']),
+                el('button', {
+                    type: 'button',
+                    class: 'mdma-button mdma-button--danger',
+                    on: {
+                        click: () => dispatch({
+                            type: 'APPROVAL_DENIED',
+                            componentId: component.id,
+                            actor: { id: 'current-user' },
+                            reason: '',
+                        }),
+                    },
+                }, ['Deny']),
+            ]),
+    ]);
+});
+//# sourceMappingURL=ApprovalGateRenderer.js.map

package/dist/components/ApprovalGateRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalGateRenderer.js","sourceRoot":"","sources":["../../src/components/ApprovalGateRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxF,IAAI,SAAS,CAAC,IAAI,KAAK,eAAe;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IAEzD,MAAM,MAAM,GAAI,cAAc,EAAE,MAAM,CAAC,MAAiB,IAAI,SAAS,CAAC;IAEtE,OAAO,EAAE,CACP,KAAK,EACL;QACE,KAAK,EAAE,0CAA0C,MAAM,EAAE;QACzD,OAAO,EAAE,EAAE,cAAc,EAAE,SAAS,CAAC,EAAE,EAAE;KAC1C,EACD;QACE,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,0BAA0B,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAClE,SAAS,CAAC,WAAW;YACnB,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,gCAAgC,EAAE,EAAE,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QAC/E,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,CAAC,UAAU,EAAE,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC3F,MAAM,KAAK,SAAS;YAClB,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,EAAE;gBACjD,EAAE,CACA,QAAQ,EACR;oBACE,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,kCAAkC;oBACzC,EAAE,EAAE;wBACF,KAAK,EAAE,GAAG,EAAE,CACV,QAAQ,CAAC;4BACP,IAAI,EAAE,kBAAkB;4BACxB,WAAW,EAAE,SAAS,CAAC,EAAE;4BACzB,KAAK,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;yBAC9B,CAAC;qBACL;iBACF,EACD,CAAC,SAAS,CAAC,CACZ;gBACD,EAAE,CACA,QAAQ,EACR;oBACE,IAAI,EAAE,QAAQ;oBACd,KAAK,EAAE,iCAAiC;oBACxC,EAAE,EAAE;wBACF,KAAK,EAAE,GAAG,EAAE,CACV,QAAQ,CAAC;4BACP,IAAI,EAAE,iBAAiB;4BACvB,WAAW,EAAE,SAAS,CAAC,EAAE;4BACzB,KAAK,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;4BAC7B,MAAM,EAAE,EAAE;yBACX,CAAC;qBACL;iBACF,EACD,CAAC,MAAM,CAAC,CACT;aACF,CAAC;KACL,CACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/ButtonRenderer.d.ts

@@ -0,0 +1,2 @@
+export declare const ButtonRenderer: import("../index.js").MdmaBlockRenderer;
+//# sourceMappingURL=ButtonRenderer.d.ts.map

package/dist/components/ButtonRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ButtonRenderer.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,yCAsBzB,CAAC"}

package/dist/components/ButtonRenderer.js

@@ -0,0 +1,23 @@
+import { el } from '../dom/el.js';
+import { stateless } from '../renderers/renderer-props.js';
+export const ButtonRenderer = stateless(({ component, dispatch }) => {
+    if (component.type !== 'button')
+        return el('div');
+    return el('button', {
+        type: 'button',
+        class: `mdma-button mdma-button--${component.variant ?? 'primary'}`,
+        dataset: { 'component-id': component.id },
+        on: {
+            click: () => {
+                if (!component.onAction)
+                    return;
+                dispatch({
+                    type: 'ACTION_TRIGGERED',
+                    componentId: component.id,
+                    actionId: component.onAction,
+                });
+            },
+        },
+    }, [component.text]);
+});
+//# sourceMappingURL=ButtonRenderer.js.map

package/dist/components/ButtonRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonRenderer.js","sourceRoot":"","sources":["../../src/components/ButtonRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClE,IAAI,SAAS,CAAC,IAAI,KAAK,QAAQ;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IAElD,OAAO,EAAE,CACP,QAAQ,EACR;QACE,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,4BAA4B,SAAS,CAAC,OAAO,IAAI,SAAS,EAAE;QACnE,OAAO,EAAE,EAAE,cAAc,EAAE,SAAS,CAAC,EAAE,EAAE;QACzC,EAAE,EAAE;YACF,KAAK,EAAE,GAAG,EAAE;gBACV,IAAI,CAAC,SAAS,CAAC,QAAQ;oBAAE,OAAO;gBAChC,QAAQ,CAAC;oBACP,IAAI,EAAE,kBAAkB;oBACxB,WAAW,EAAE,SAAS,CAAC,EAAE;oBACzB,QAAQ,EAAE,SAAS,CAAC,QAAQ;iBAC7B,CAAC,CAAC;YACL,CAAC;SACF;KACF,EACD,CAAC,SAAS,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/CalloutRenderer.d.ts

@@ -0,0 +1,2 @@
+export declare const CalloutRenderer: import("../index.js").MdmaBlockRenderer;
+//# sourceMappingURL=CalloutRenderer.d.ts.map

package/dist/components/CalloutRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutRenderer.d.ts","sourceRoot":"","sources":["../../src/components/CalloutRenderer.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,yCAsC1B,CAAC"}

package/dist/components/CalloutRenderer.js

@@ -0,0 +1,33 @@
+import { el } from '../dom/el.js';
+import { stateless } from '../renderers/renderer-props.js';
+export const CalloutRenderer = stateless(({ component, componentState, dispatch }) => {
+    if (component.type !== 'callout')
+        return el('div');
+    // Dismissal is document state, so a dismissed callout stays dismissed across a
+    // re-parse of the same document. An empty span keeps the slot without markup.
+    if (componentState?.values.dismissed)
+        return el('span', { class: 'mdma-callout--dismissed' });
+    return el('div', {
+        class: `mdma-callout mdma-callout--${component.variant ?? 'info'}`,
+        dataset: { 'component-id': component.id },
+        role: 'alert',
+    }, [
+        component.title && el('strong', { class: 'mdma-callout-title' }, [component.title]),
+        el('p', { class: 'mdma-callout-content' }, [component.content]),
+        component.dismissible &&
+            el('button', {
+                type: 'button',
+                class: 'mdma-callout-dismiss',
+                'aria-label': 'Dismiss',
+                on: {
+                    click: () => dispatch({
+                        type: 'FIELD_CHANGED',
+                        componentId: component.id,
+                        field: 'dismissed',
+                        value: true,
+                    }),
+                },
+            }, ['×']),
+    ]);
+});
+//# sourceMappingURL=CalloutRenderer.js.map

package/dist/components/CalloutRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutRenderer.js","sourceRoot":"","sources":["../../src/components/CalloutRenderer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAE3D,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnF,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS;QAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IAEnD,+EAA+E;IAC/E,8EAA8E;IAC9E,IAAI,cAAc,EAAE,MAAM,CAAC,SAAS;QAAE,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,CAAC,CAAC;IAE9F,OAAO,EAAE,CACP,KAAK,EACL;QACE,KAAK,EAAE,8BAA8B,SAAS,CAAC,OAAO,IAAI,MAAM,EAAE;QAClE,OAAO,EAAE,EAAE,cAAc,EAAE,SAAS,CAAC,EAAE,EAAE;QACzC,IAAI,EAAE,OAAO;KACd,EACD;QACE,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnF,EAAE,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EAAE,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC/D,SAAS,CAAC,WAAW;YACnB,EAAE,CACA,QAAQ,EACR;gBACE,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,sBAAsB;gBAC7B,YAAY,EAAE,SAAS;gBACvB,EAAE,EAAE;oBACF,KAAK,EAAE,GAAG,EAAE,CACV,QAAQ,CAAC;wBACP,IAAI,EAAE,eAAe;wBACrB,WAAW,EAAE,SAAS,CAAC,EAAE;wBACzB,KAAK,EAAE,WAAW;wBAClB,KAAK,EAAE,IAAI;qBACZ,CAAC;iBACL;aACF,EACD,CAAC,GAAG,CAAC,CACN;KACJ,CACF,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/ChartRenderer.d.ts

@@ -0,0 +1,3 @@
+/** Draws chart data as a table. Override with a charting library via customizations. */
+export declare const ChartRenderer: import("../index.js").MdmaBlockRenderer;
+//# sourceMappingURL=ChartRenderer.d.ts.map

package/dist/components/ChartRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartRenderer.d.ts","sourceRoot":"","sources":["../../src/components/ChartRenderer.ts"],"names":[],"mappings":"AA8BA,wFAAwF;AACxF,eAAO,MAAM,aAAa,yCA8CxB,CAAC"}

package/dist/components/ChartRenderer.js

@@ -0,0 +1,52 @@
+import { el } from '../dom/el.js';
+import { stateless } from '../renderers/renderer-props.js';
+function parseCsvData(raw) {
+    const lines = raw
+        .trim()
+        .split('\n')
+        .filter((line) => line.trim() !== '');
+    if (lines.length === 0)
+        return { headers: [], rows: [] };
+    const headers = lines[0].split(',').map((header) => header.trim());
+    const rows = lines.slice(1).map((line) => {
+        const values = line.split(',').map((value) => value.trim());
+        const row = {};
+        headers.forEach((header, index) => {
+            const value = values[index] ?? '';
+            const numeric = Number(value);
+            row[header] = value !== '' && !Number.isNaN(numeric) ? numeric : value;
+        });
+        return row;
+    });
+    return { headers, rows };
+}
+/** Draws chart data as a table. Override with a charting library via customizations. */
+export const ChartRenderer = stateless(({ component, resolveBinding }) => {
+    if (component.type !== 'chart')
+        return el('div');
+    const raw = component.data;
+    let data = { headers: [], rows: [] };
+    if (typeof raw === 'string' && raw.startsWith('{{')) {
+        const resolved = resolveBinding(raw);
+        if (typeof resolved === 'string')
+            data = parseCsvData(resolved);
+    }
+    else if (typeof raw === 'string') {
+        data = parseCsvData(raw);
+    }
+    const label = component.label && el('div', { class: 'mdma-chart-label' }, [component.label]);
+    if (data.rows.length === 0) {
+        return el('div', { class: 'mdma-chart mdma-chart--empty', dataset: { 'component-id': component.id } }, [label, el('div', { class: 'mdma-chart-empty' }, ['No chart data'])]);
+    }
+    return el('div', { class: 'mdma-chart', dataset: { 'component-id': component.id } }, [
+        label,
+        el('div', { class: 'mdma-chart-variant' }, [`${component.variant ?? 'line'} chart`]),
+        el('table', { class: 'mdma-chart-data' }, [
+            el('thead', {}, [
+                el('tr', {}, data.headers.map((header) => el('th', {}, [header]))),
+            ]),
+            el('tbody', {}, data.rows.map((row) => el('tr', {}, data.headers.map((header) => el('td', {}, [String(row[header] ?? '')]))))),
+        ]),
+    ]);
+});
+//# sourceMappingURL=ChartRenderer.js.map

package/dist/components/ChartRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartRenderer.js","sourceRoot":"","sources":["../../src/components/ChartRenderer.ts"],"names":[],"mappings":"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"}

package/dist/components/CustomRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { MdmaBlockRenderer } from '../renderers/renderer-props.js';
+/**
+ * Draws a `custom` component with the variant registered under its `name`. An
+ * unregistered name degrades to an inline notice rather than crashing, mirroring
+ * how an unknown component type is handled.
+ */
+export declare const CustomRenderer: MdmaBlockRenderer;
+//# sourceMappingURL=CustomRenderer.d.ts.map

package/dist/components/CustomRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomRenderer.d.ts","sourceRoot":"","sources":["../../src/components/CustomRenderer.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,iBAAiB,EAGlB,MAAM,gCAAgC,CAAC;AAkBxC;;;;GAIG;AACH,eAAO,MAAM,cAAc,EAAE,iBAoC5B,CAAC"}

package/dist/components/CustomRenderer.js

@@ -0,0 +1,51 @@
+import { el } from '../dom/el.js';
+const variantPropsOf = (component, props) => ({
+    component,
+    props: component.props,
+    componentState: props.componentState,
+    dispatch: props.dispatch,
+    resolveBinding: props.resolveBinding,
+});
+const unknown = (component) => el('div', { class: 'mdma-unknown-component', dataset: { 'component-id': component.id } }, [
+    `Unknown custom component: ${component.name}`,
+]);
+/**
+ * Draws a `custom` component with the variant registered under its `name`. An
+ * unregistered name degrades to an inline notice rather than crashing, mirroring
+ * how an unknown component type is handled.
+ */
+export const CustomRenderer = (initial) => {
+    let variant;
+    const create = (props) => {
+        if (props.component.type !== 'custom')
+            return el('div');
+        const component = props.component;
+        const factory = props.context.customVariants?.[component.name];
+        if (!factory) {
+            variant = undefined;
+            return unknown(component);
+        }
+        variant = factory(variantPropsOf(component, props));
+        return variant.el;
+    };
+    const instance = {
+        el: create(initial),
+        update(next) {
+            if (next.component.type !== 'custom')
+                return;
+            const component = next.component;
+            const factory = next.context.customVariants?.[component.name];
+            // A live variant keeps its own element and is re-fed props, so a custom
+            // component with internal state (a canvas, a chart) survives a re-render.
+            if (variant && factory) {
+                variant.update(variantPropsOf(component, next));
+                return;
+            }
+            const replacement = create(next);
+            instance.el.replaceWith(replacement);
+            instance.el = replacement;
+        },
+    };
+    return instance;
+};
+//# sourceMappingURL=CustomRenderer.js.map

package/dist/components/CustomRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomRenderer.js","sourceRoot":"","sources":["../../src/components/CustomRenderer.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAOlC,MAAM,cAAc,GAAG,CACrB,SAA0B,EAC1B,KAA6B,EACT,EAAE,CAAC,CAAC;IACxB,SAAS;IACT,KAAK,EAAE,SAAS,CAAC,KAAK;IACtB,cAAc,EAAE,KAAK,CAAC,cAAc;IACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ;IACxB,cAAc,EAAE,KAAK,CAAC,cAAc;CACrC,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,CAAC,SAA0B,EAAE,EAAE,CAC7C,EAAE,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,OAAO,EAAE,EAAE,cAAc,EAAE,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE;IACxF,6BAA6B,SAAS,CAAC,IAAI,EAAE;CAC9C,CAAC,CAAC;AAEL;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAsB,CAAC,OAAO,EAAE,EAAE;IAC3D,IAAI,OAAwD,CAAC;IAE7D,MAAM,MAAM,GAAG,CAAC,KAA6B,EAAe,EAAE;QAC5D,IAAI,KAAK,CAAC,SAAS,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;QAClC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,GAAG,SAAS,CAAC;YACpB,OAAO,OAAO,CAAC,SAAS,CAAC,CAAC;QAC5B,CAAC;QACD,OAAO,GAAG,OAAO,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;QACpD,OAAO,OAAO,CAAC,EAAE,CAAC;IACpB,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAqB;QACjC,EAAE,EAAE,MAAM,CAAC,OAAO,CAAC;QACnB,MAAM,CAAC,IAAI;YACT,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,KAAK,QAAQ;gBAAE,OAAO;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAE9D,wEAAwE;YACxE,0EAA0E;YAC1E,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;gBACvB,OAAO,CAAC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC;gBAChD,OAAO;YACT,CAAC;YAED,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;YACjC,QAAQ,CAAC,EAAE,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;YACrC,QAAQ,CAAC,EAAE,GAAG,WAAW,CAAC;QAC5B,CAAC;KACF,CAAC;IAEF,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC"}

package/dist/components/FormRenderer.d.ts

@@ -0,0 +1,8 @@
+import type { MdmaBlockRenderer } from '../renderers/renderer-props.js';
+/**
+ * The one renderer that must update in place. A streamed document re-parses on
+ * every chunk, and rebuilding the inputs each time would wipe whatever the user
+ * is typing — so the field elements persist and are only re-fed their props.
+ */
+export declare const FormRenderer: MdmaBlockRenderer;
+//# sourceMappingURL=FormRenderer.d.ts.map

package/dist/components/FormRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRenderer.d.ts","sourceRoot":"","sources":["../../src/components/FormRenderer.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,iBAAiB,EAGlB,MAAM,gCAAgC,CAAC;AAkKxC;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,iBA6B1B,CAAC"}

package/dist/components/FormRenderer.js

@@ -0,0 +1,149 @@
+import { resolveElementOverride } from '../context/render-context.js';
+import { el } from '../dom/el.js';
+import { DefaultCheckbox, DefaultFile, DefaultInput, DefaultSelect, DefaultSensitiveIndicator, DefaultSubmitButton, DefaultTextarea, } from './form/default-elements.js';
+/** Any change here alters the form's structure, so the fields are rebuilt rather than updated. */
+const shapeOf = (component) => [
+    component.label ?? '',
+    component.onSubmit ?? '',
+    ...component.fields.map((field) => `${field.name}:${field.type}:${field.label}:${field.required}:${field.sensitive}`),
+].join('|');
+function optionsFor(field, props) {
+    if (typeof field.options === 'string') {
+        return props.context.dataSources?.[field.options] ?? [];
+    }
+    return field.options ?? [];
+}
+function elementPropsFor(field, component, props, getProps) {
+    const values = props.componentState?.values ?? {};
+    const shared = {
+        id: `${component.id}-${field.name}`,
+        name: field.name,
+        label: field.label,
+        required: field.required,
+        sensitive: field.sensitive,
+    };
+    const change = (value) => getProps().dispatch({
+        type: 'FIELD_CHANGED',
+        componentId: component.id,
+        field: field.name,
+        value,
+    });
+    if (field.type === 'checkbox') {
+        return {
+            id: shared.id,
+            name: field.name,
+            label: field.label,
+            sensitive: field.sensitive,
+            checked: Boolean(values[field.name]),
+            onChange: (checked) => change(checked),
+        };
+    }
+    if (field.type === 'file') {
+        return {
+            ...shared,
+            value: Array.isArray(values[field.name]) ? values[field.name] : [],
+            onChange: (files) => change(files),
+        };
+    }
+    if (field.type === 'select') {
+        return {
+            ...shared,
+            type: 'select',
+            value: String(values[field.name] ?? ''),
+            options: optionsFor(field, props),
+            onChange: (value) => change(value),
+        };
+    }
+    if (field.type === 'textarea') {
+        return {
+            ...shared,
+            value: String(values[field.name] ?? ''),
+            onChange: (value) => change(value),
+        };
+    }
+    return {
+        ...shared,
+        type: field.type,
+        value: String(values[field.name] ?? ''),
+        onChange: (value) => change(value),
+    };
+}
+function elementFor(field, props) {
+    const override = (name) => resolveElementOverride(props.context, 'form', name);
+    if (field.type === 'select')
+        return override('select') ?? DefaultSelect;
+    if (field.type === 'checkbox')
+        return override('checkbox') ?? DefaultCheckbox;
+    if (field.type === 'textarea')
+        return override('textarea') ?? DefaultTextarea;
+    if (field.type === 'file')
+        return override('file') ?? DefaultFile;
+    return override('input') ?? DefaultInput;
+}
+function build(props, component, getProps) {
+    const fields = new Map();
+    const rows = component.fields.map((field) => {
+        const create = elementFor(field, props);
+        const instance = create(elementPropsFor(field, component, props, getProps));
+        fields.set(field.name, instance);
+        const indicator = field.sensitive
+            ? (resolveElementOverride(props.context, 'form', 'sensitiveIndicator') ??
+                DefaultSensitiveIndicator)({ name: field.name, label: field.label })
+            : undefined;
+        return el('div', { class: `mdma-form-field ${field.sensitive ? 'mdma-form-field--sensitive' : ''}`.trim() }, [
+            el('label', { for: `${component.id}-${field.name}` }, [field.label, indicator?.el]),
+            instance.el,
+        ]);
+    });
+    let submit;
+    if (component.onSubmit) {
+        const create = (resolveElementOverride(props.context, 'form', 'submitButton') ??
+            DefaultSubmitButton);
+        submit = create({
+            label: 'Submit',
+            onClick: () => getProps().dispatch({
+                type: 'ACTION_TRIGGERED',
+                componentId: component.id,
+                actionId: component.onSubmit,
+            }),
+        });
+    }
+    const root = el('div', { class: 'mdma-form', dataset: { 'component-id': component.id } }, [
+        component.label && el('h3', { class: 'mdma-form-label' }, [component.label]),
+        ...rows,
+        submit?.el,
+    ]);
+    return { el: root, fields, submit, shape: shapeOf(component) };
+}
+const emptyBuild = () => ({ el: el('div'), fields: new Map(), shape: '' });
+/**
+ * The one renderer that must update in place. A streamed document re-parses on
+ * every chunk, and rebuilding the inputs each time would wipe whatever the user
+ * is typing — so the field elements persist and are only re-fed their props.
+ */
+export const FormRenderer = (initial) => {
+    let props = initial;
+    const getProps = () => props;
+    let built = initial.component.type === 'form' ? build(initial, initial.component, getProps) : emptyBuild();
+    const instance = {
+        el: built.el,
+        update(next) {
+            props = next;
+            if (next.component.type !== 'form')
+                return;
+            if (shapeOf(next.component) !== built.shape) {
+                const rebuilt = build(next, next.component, getProps);
+                built.el.replaceWith(rebuilt.el);
+                built = rebuilt;
+                instance.el = rebuilt.el;
+                return;
+            }
+            for (const field of next.component.fields) {
+                const element = built.fields.get(field.name);
+                element?.update(elementPropsFor(field, next.component, next, getProps));
+            }
+        },
+    };
+    return instance;
+};
+//# sourceMappingURL=FormRenderer.js.map

package/dist/components/FormRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormRenderer.js","sourceRoot":"","sources":["../../src/components/FormRenderer.ts"],"names":[],"mappings":"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"}

package/dist/components/MdmaBlockLoading.d.ts

@@ -0,0 +1,11 @@
+/** Pull a component type hint out of partial YAML (e.g. "type: form"). */
+export declare function extractTypeHint(yaml?: string): string | null;
+/**
+ * Skeleton for an `mdma` fence that hasn't finished streaming (or failed
+ * validation). The hint comes from the partial YAML so the placeholder can name
+ * what is arriving instead of showing a generic spinner.
+ */
+export declare function renderBlockLoading(node: {
+    value?: string;
+}): HTMLElement;
+//# sourceMappingURL=MdmaBlockLoading.d.ts.map

package/dist/components/MdmaBlockLoading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MdmaBlockLoading.d.ts","sourceRoot":"","sources":["../../src/components/MdmaBlockLoading.ts"],"names":[],"mappings":"AAEA,0EAA0E;AAC1E,wBAAgB,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAI5D;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,WAAW,CAYxE"}