@mobile-reality/mdma-renderer-vue 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,117 @@
+# @mobile-reality/mdma-renderer-vue
+
+Vue 3 renderer for [MDMA](https://github.com/MobileReality/mdma) documents — the Vue sibling of
+[`@mobile-reality/mdma-renderer-react`](../renderer-react). Renders all 10 MDMA component types
+plus inline Markdown, emitting the same `.mdma-*` class names and shipping the same
+`styles.css`, so a theme is portable between the two renderers.
+
+It reuses MDMA's headless stack unchanged — `spec`, `parser`, `runtime`, and (registered at the
+app layer) `attachables-core` — and reimplements only the view layer. The document store,
+binding graph, policy, audit log, PII redaction, and streaming state-preservation all come from
+`runtime`; each Vue component emits the same store actions its React counterpart does.
+
+## Install
+
+```sh
+npm install @mobile-reality/mdma-renderer-vue \
+  @mobile-reality/mdma-spec @mobile-reality/mdma-runtime vue
+```
+
+## Usage
+
+```ts
+import { createDocumentStore } from '@mobile-reality/mdma-runtime';
+import { MdmaDocument } from '@mobile-reality/mdma-renderer-vue';
+import '@mobile-reality/mdma-renderer-vue/styles.css';
+```
+
+```vue
+<script setup lang="ts">
+import { MdmaDocument } from '@mobile-reality/mdma-renderer-vue';
+
+// `ast` comes from @mobile-reality/mdma-parser; `store` is created from it.
+const props = defineProps<{ ast: MdmaRoot; store: DocumentStore }>();
+</script>
+
+<template>
+  <MdmaDocument :ast="props.ast" :store="props.store" theme="dark" />
+</template>
+```
+
+### Theming
+
+Pass `theme="light" | "dark" | "auto"` (`"auto"` follows the OS color scheme) or a full
+`MdmaTheme` token object; omit it for the default light palette. Built-in palettes are applied
+as a `data-theme` attribute, a custom theme as inline `--mdma-*` CSS variables. To theme
+components rendered outside a `MdmaDocument` (a lone `MdmaBlock`, say), wrap them in
+`MdmaThemeProvider`.
+
+The `MdmaTheme` token shape is shared with the React and React Native renderers, so a theme
+object is portable across all three. See the repo [Theming guide](../../docs/guides/theming.md)
+for the full token reference.
+
+### Customizations
+
+Override a whole component renderer, or just a sub-element inside one:
+
+```ts
+<MdmaDocument
+  :ast="ast"
+  :store="store"
+  :customizations="{
+    components: {
+      chart: MyChartRenderer,                  // full renderer
+      form: { elements: { input: GlassInput } }, // sub-element only
+    },
+    customVariants: { 'signature-pad': SignaturePad },
+    dataSources: { countries: [{ label: 'Poland', value: 'PL' }] },
+  }"
+/>
+```
+
+Element overrides resolve scope-specific → global (`'*'`) → built-in. Custom component types
+also need a Zod schema registered with the parser via `customSchemas`.
+
+A custom renderer should spread the exported prop declaration so Vue passes the props through
+rather than dropping them on the root element as attributes:
+
+```ts
+import { defineComponent, h } from 'vue';
+import { blockRendererProps } from '@mobile-reality/mdma-renderer-vue';
+
+export const MyChartRenderer = defineComponent({
+  props: blockRendererProps,
+  setup(props) {
+    return () => h('div', props.component.id);
+  },
+});
+```
+
+## Differences from the React renderer
+
+The public API mirrors `renderer-react` name for name (a test asserts every value export
+exists here too), with these deliberate differences:
+
+| | React | Vue |
+|---|---|---|
+| Composables | `useMdmaTheme()`, `useComponentState()` … return plain values | return `ComputedRef`s, so they stay reactive — read `.value` |
+| Context | `createContext` / `useContext` | `provide` / `inject` with exported `InjectionKey`s |
+| Renderer props | type-only `MdmaBlockRendererProps` | plus the runtime declaration `blockRendererProps` |
+| Element overrides | components receive `onChange` props | same — an override may declare an `onChange` prop *or* `emits: ['change']` |
+| Memoization | `memo` + `useCallback` | none needed; Vue caches renders itself |
+
+Components are authored as `defineComponent` + `h()` render functions in plain `.ts` — no
+`.vue` SFCs — so the package builds with the workspace's `tsc` and needs no bundler.
+
+## What's shared vs. reimplemented
+
+| Shared (headless, verbatim) | Reimplemented (Vue view layer) |
+|---|---|
+| `createDocumentStore`, reducer, bindings | 10 component renderers |
+| policy, audit log, PII redaction | inline Markdown → vnodes |
+| streaming `updateAst` state preservation | `styles.css` (mirrored from the web renderer) |
+| binding resolution | store subscription → Vue reactivity bridge |
+
+## License
+
+Apache-2.0

package/dist/components/ApprovalGateRenderer.d.ts

@@ -0,0 +1,40 @@
+export declare const ApprovalGateRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    componentState: import("@mobile-reality/mdma-runtime").ComponentState;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA2D/B,CAAC"}

package/dist/components/ApprovalGateRenderer.js

@@ -0,0 +1,48 @@
+import { defineComponent, h } from 'vue';
+import { blockRendererProps } from '../renderers/renderer-props.js';
+export const ApprovalGateRenderer = defineComponent({
+    name: 'ApprovalGateRenderer',
+    props: blockRendererProps,
+    setup(props) {
+        return () => {
+            const component = props.component;
+            if (component.type !== 'approval-gate')
+                return null;
+            const status = props.componentState?.values.status ?? 'pending';
+            return h('div', {
+                class: `mdma-approval-gate mdma-approval-gate--${status}`,
+                'data-component-id': component.id,
+            }, [
+                h('h3', { class: 'mdma-approval-gate-title' }, component.title),
+                component.description
+                    ? h('p', { class: 'mdma-approval-gate-description' }, component.description)
+                    : null,
+                h('div', { class: 'mdma-approval-gate-status' }, ['Status: ', h('strong', status)]),
+                status === 'pending'
+                    ? h('div', { class: 'mdma-approval-gate-actions' }, [
+                        h('button', {
+                            type: 'button',
+                            class: 'mdma-button mdma-button--primary',
+                            onClick: () => props.dispatch({
+                                type: 'APPROVAL_GRANTED',
+                                componentId: component.id,
+                                actor: { id: 'current-user' },
+                            }),
+                        }, 'Approve'),
+                        h('button', {
+                            type: 'button',
+                            class: 'mdma-button mdma-button--danger',
+                            onClick: () => props.dispatch({
+                                type: 'APPROVAL_DENIED',
+                                componentId: component.id,
+                                actor: { id: 'current-user' },
+                                reason: '',
+                            }),
+                        }, 'Deny'),
+                    ])
+                    : null,
+            ]);
+        };
+    },
+});
+//# 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,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,MAAM,CAAC,MAAM,oBAAoB,GAAG,eAAe,CAAC;IAClD,IAAI,EAAE,sBAAsB;IAC5B,KAAK,EAAE,kBAAkB;IACzB,KAAK,CAAC,KAAK;QACT,OAAO,GAAG,EAAE;YACV,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;YAClC,IAAI,SAAS,CAAC,IAAI,KAAK,eAAe;gBAAE,OAAO,IAAI,CAAC;YAEpD,MAAM,MAAM,GAAI,KAAK,CAAC,cAAc,EAAE,MAAM,CAAC,MAAiB,IAAI,SAAS,CAAC;YAE5E,OAAO,CAAC,CACN,KAAK,EACL;gBACE,KAAK,EAAE,0CAA0C,MAAM,EAAE;gBACzD,mBAAmB,EAAE,SAAS,CAAC,EAAE;aAClC,EACD;gBACE,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,0BAA0B,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC;gBAC/D,SAAS,CAAC,WAAW;oBACnB,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,gCAAgC,EAAE,EAAE,SAAS,CAAC,WAAW,CAAC;oBAC5E,CAAC,CAAC,IAAI;gBACR,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,2BAA2B,EAAE,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;gBACnF,MAAM,KAAK,SAAS;oBAClB,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,4BAA4B,EAAE,EAAE;wBAChD,CAAC,CACC,QAAQ,EACR;4BACE,IAAI,EAAE,QAAQ;4BACd,KAAK,EAAE,kCAAkC;4BACzC,OAAO,EAAE,GAAG,EAAE,CACZ,KAAK,CAAC,QAAQ,CAAC;gCACb,IAAI,EAAE,kBAAkB;gCACxB,WAAW,EAAE,SAAS,CAAC,EAAE;gCACzB,KAAK,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;6BAC9B,CAAC;yBACL,EACD,SAAS,CACV;wBACD,CAAC,CACC,QAAQ,EACR;4BACE,IAAI,EAAE,QAAQ;4BACd,KAAK,EAAE,iCAAiC;4BACxC,OAAO,EAAE,GAAG,EAAE,CACZ,KAAK,CAAC,QAAQ,CAAC;gCACb,IAAI,EAAE,iBAAiB;gCACvB,WAAW,EAAE,SAAS,CAAC,EAAE;gCACzB,KAAK,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE;gCAC7B,MAAM,EAAE,EAAE;6BACX,CAAC;yBACL,EACD,MAAM,CACP;qBACF,CAAC;oBACJ,CAAC,CAAC,IAAI;aACT,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/components/ButtonRenderer.d.ts

@@ -0,0 +1,40 @@
+export declare const ButtonRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    componentState: import("@mobile-reality/mdma-runtime").ComponentState;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA4BzB,CAAC"}

package/dist/components/ButtonRenderer.js

@@ -0,0 +1,28 @@
+import { defineComponent, h } from 'vue';
+import { blockRendererProps } from '../renderers/renderer-props.js';
+export const ButtonRenderer = defineComponent({
+    name: 'ButtonRenderer',
+    props: blockRendererProps,
+    setup(props) {
+        return () => {
+            const component = props.component;
+            if (component.type !== 'button')
+                return null;
+            return h('button', {
+                type: 'button',
+                class: `mdma-button mdma-button--${component.variant ?? 'primary'}`,
+                'data-component-id': component.id,
+                onClick: () => {
+                    if (component.onAction) {
+                        props.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,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,kBAAkB;IACzB,KAAK,CAAC,KAAK;QACT,OAAO,GAAG,EAAE;YACV,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;YAClC,IAAI,SAAS,CAAC,IAAI,KAAK,QAAQ;gBAAE,OAAO,IAAI,CAAC;YAE7C,OAAO,CAAC,CACN,QAAQ,EACR;gBACE,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,4BAA4B,SAAS,CAAC,OAAO,IAAI,SAAS,EAAE;gBACnE,mBAAmB,EAAE,SAAS,CAAC,EAAE;gBACjC,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;wBACvB,KAAK,CAAC,QAAQ,CAAC;4BACb,IAAI,EAAE,kBAAkB;4BACxB,WAAW,EAAE,SAAS,CAAC,EAAE;4BACzB,QAAQ,EAAE,SAAS,CAAC,QAAQ;yBAC7B,CAAC,CAAC;oBACL,CAAC;gBACH,CAAC;aACF,EACD,SAAS,CAAC,IAAI,CACf,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/components/CalloutRenderer.d.ts

@@ -0,0 +1,40 @@
+export declare const CalloutRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    componentState: import("@mobile-reality/mdma-runtime").ComponentState;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA4C1B,CAAC"}

package/dist/components/CalloutRenderer.js

@@ -0,0 +1,39 @@
+import { defineComponent, h } from 'vue';
+import { blockRendererProps } from '../renderers/renderer-props.js';
+export const CalloutRenderer = defineComponent({
+    name: 'CalloutRenderer',
+    props: blockRendererProps,
+    setup(props) {
+        return () => {
+            const component = props.component;
+            if (component.type !== 'callout')
+                return null;
+            // Dismissal is document state, so a dismissed callout stays dismissed
+            // across a re-parse of the same document.
+            if (props.componentState?.values.dismissed)
+                return null;
+            return h('div', {
+                class: `mdma-callout mdma-callout--${component.variant ?? 'info'}`,
+                'data-component-id': component.id,
+                role: 'alert',
+            }, [
+                component.title ? h('strong', { class: 'mdma-callout-title' }, component.title) : null,
+                h('p', { class: 'mdma-callout-content' }, component.content),
+                component.dismissible
+                    ? h('button', {
+                        type: 'button',
+                        class: 'mdma-callout-dismiss',
+                        'aria-label': 'Dismiss',
+                        onClick: () => props.dispatch({
+                            type: 'FIELD_CHANGED',
+                            componentId: component.id,
+                            field: 'dismissed',
+                            value: true,
+                        }),
+                    }, '×')
+                    : null,
+            ]);
+        };
+    },
+});
+//# 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,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;IAC7C,IAAI,EAAE,iBAAiB;IACvB,KAAK,EAAE,kBAAkB;IACzB,KAAK,CAAC,KAAK;QACT,OAAO,GAAG,EAAE;YACV,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;YAClC,IAAI,SAAS,CAAC,IAAI,KAAK,SAAS;gBAAE,OAAO,IAAI,CAAC;YAE9C,sEAAsE;YACtE,0CAA0C;YAC1C,IAAI,KAAK,CAAC,cAAc,EAAE,MAAM,CAAC,SAAS;gBAAE,OAAO,IAAI,CAAC;YAExD,OAAO,CAAC,CACN,KAAK,EACL;gBACE,KAAK,EAAE,8BAA8B,SAAS,CAAC,OAAO,IAAI,MAAM,EAAE;gBAClE,mBAAmB,EAAE,SAAS,CAAC,EAAE;gBACjC,IAAI,EAAE,OAAO;aACd,EACD;gBACE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACtF,CAAC,CAAC,GAAG,EAAE,EAAE,KAAK,EAAE,sBAAsB,EAAE,EAAE,SAAS,CAAC,OAAO,CAAC;gBAC5D,SAAS,CAAC,WAAW;oBACnB,CAAC,CAAC,CAAC,CACC,QAAQ,EACR;wBACE,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE,sBAAsB;wBAC7B,YAAY,EAAE,SAAS;wBACvB,OAAO,EAAE,GAAG,EAAE,CACZ,KAAK,CAAC,QAAQ,CAAC;4BACb,IAAI,EAAE,eAAe;4BACrB,WAAW,EAAE,SAAS,CAAC,EAAE;4BACzB,KAAK,EAAE,WAAW;4BAClB,KAAK,EAAE,IAAI;yBACZ,CAAC;qBACL,EACD,GAAG,CACJ;oBACH,CAAC,CAAC,IAAI;aACT,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/components/ChartRenderer.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Basic built-in chart renderer.
+ * Renders chart data as a simple HTML table.
+ * Override with a richer renderer (e.g. a charting library) via customizations.
+ */
+export declare const ChartRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    componentState: import("@mobile-reality/mdma-runtime").ComponentState;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# 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;;;;GAIG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAyDxB,CAAC"}

package/dist/components/ChartRenderer.js

@@ -0,0 +1,66 @@
+import { computed, defineComponent, h } from 'vue';
+import { blockRendererProps } from '../renderers/renderer-props.js';
+function parseCsvData(raw) {
+    const lines = raw
+        .trim()
+        .split('\n')
+        .filter((l) => l.trim() !== '');
+    if (lines.length === 0)
+        return { headers: [], rows: [] };
+    const headers = lines[0].split(',').map((h) => h.trim());
+    const rows = lines.slice(1).map((line) => {
+        const values = line.split(',').map((v) => v.trim());
+        const row = {};
+        headers.forEach((header, i) => {
+            const val = values[i] ?? '';
+            const num = Number(val);
+            row[header] = val !== '' && !Number.isNaN(num) ? num : val;
+        });
+        return row;
+    });
+    return { headers, rows };
+}
+/**
+ * Basic built-in chart renderer.
+ * Renders chart data as a simple HTML table.
+ * Override with a richer renderer (e.g. a charting library) via customizations.
+ */
+export const ChartRenderer = defineComponent({
+    name: 'ChartRenderer',
+    props: blockRendererProps,
+    setup(props) {
+        const data = computed(() => {
+            const component = props.component;
+            if (component.type !== 'chart')
+                return { headers: [], rows: [] };
+            const raw = component.data;
+            if (typeof raw === 'string' && raw.startsWith('{{')) {
+                const resolved = props.resolveBinding(raw);
+                return typeof resolved === 'string' ? parseCsvData(resolved) : { headers: [], rows: [] };
+            }
+            return parseCsvData(raw);
+        });
+        return () => {
+            const component = props.component;
+            if (component.type !== 'chart')
+                return null;
+            if (data.value.rows.length === 0) {
+                return h('div', { class: 'mdma-chart mdma-chart--empty', 'data-component-id': component.id }, [
+                    component.label ? h('div', { class: 'mdma-chart-label' }, component.label) : null,
+                    h('div', { class: 'mdma-chart-empty' }, 'No chart data'),
+                ]);
+            }
+            return h('div', { class: 'mdma-chart', 'data-component-id': component.id }, [
+                component.label ? h('div', { class: 'mdma-chart-label' }, component.label) : null,
+                h('div', { class: 'mdma-chart-variant' }, `${component.variant ?? 'line'} chart`),
+                h('table', { class: 'mdma-chart-data' }, [
+                    h('thead', [
+                        h('tr', data.value.headers.map((header) => h('th', { key: header }, header))),
+                    ]),
+                    h('tbody', data.value.rows.map((row, i) => h('tr', { key: i }, data.value.headers.map((header) => h('td', { key: header }, 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":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAOpE,SAAS,YAAY,CAAC,GAAW;IAC/B,MAAM,KAAK,GAAG,GAAG;SACd,IAAI,EAAE;SACN,KAAK,CAAC,IAAI,CAAC;SACX,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IAClC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;IAEzD,MAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;IACzD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACvC,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACpD,MAAM,GAAG,GAAoC,EAAE,CAAC;QAChD,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC5B,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;YAC5B,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;YACxB,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;QAC7D,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,CAAC;IACb,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC3B,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;IAC3C,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,kBAAkB;IACzB,KAAK,CAAC,KAAK;QACT,MAAM,IAAI,GAAG,QAAQ,CAAkB,GAAG,EAAE;YAC1C,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;YAClC,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO;gBAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;YAEjE,MAAM,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC;YAC3B,IAAI,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC;gBACpD,MAAM,QAAQ,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;gBAC3C,OAAO,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;YAC3F,CAAC;YACD,OAAO,YAAY,CAAC,GAAa,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;YAClC,IAAI,SAAS,CAAC,IAAI,KAAK,OAAO;gBAAE,OAAO,IAAI,CAAC;YAE5C,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjC,OAAO,CAAC,CACN,KAAK,EACL,EAAE,KAAK,EAAE,8BAA8B,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAE,EAAE,EAC5E;oBACE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;oBACjF,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,eAAe,CAAC;iBACzD,CACF,CAAC;YACJ,CAAC;YAED,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAE,EAAE,EAAE;gBAC1E,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;gBACjF,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,GAAG,SAAS,CAAC,OAAO,IAAI,MAAM,QAAQ,CAAC;gBACjF,CAAC,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE;oBACvC,CAAC,CAAC,OAAO,EAAE;wBACT,CAAC,CACC,IAAI,EACJ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,CAAC,CACrE;qBACF,CAAC;oBACF,CAAC,CACC,OAAO,EACP,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAC7B,CAAC,CACC,IAAI,EACJ,EAAE,GAAG,EAAE,CAAC,EAAE,EACV,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAChC,CAAC,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CACpD,CACF,CACF,CACF;iBACF,CAAC;aACH,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/dist/components/CustomRenderer.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Renders a `custom` component by dispatching to the variant registered under
+ * its `name`. Unknown names degrade to an inline fallback rather than crashing,
+ * mirroring how unknown component types are handled.
+ */
+export declare const CustomRenderer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    component: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-spec").MdmaComponent>;
+        required: true;
+    };
+    componentState: {
+        type: import("vue").PropType<import("@mobile-reality/mdma-runtime").ComponentState>;
+        default: undefined;
+    };
+    dispatch: {
+        type: import("vue").PropType<(action: import("@mobile-reality/mdma-spec").StoreAction) => void>;
+        required: true;
+    };
+    resolveBinding: {
+        type: import("vue").PropType<(expr: string) => unknown>;
+        required: true;
+    };
+}>> & Readonly<{}>, {
+    componentState: import("@mobile-reality/mdma-runtime").ComponentState;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# 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":"AAIA;;;;GAIG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EA6BzB,CAAC"}

package/dist/components/CustomRenderer.js

@@ -0,0 +1,32 @@
+import { defineComponent, h } from 'vue';
+import { blockRendererProps } from '../renderers/renderer-props.js';
+import { useCustomVariants } from '../context/CustomVariantContext.js';
+/**
+ * Renders a `custom` component by dispatching to the variant registered under
+ * its `name`. Unknown names degrade to an inline fallback rather than crashing,
+ * mirroring how unknown component types are handled.
+ */
+export const CustomRenderer = defineComponent({
+    name: 'CustomRenderer',
+    props: blockRendererProps,
+    setup(props) {
+        const variants = useCustomVariants();
+        return () => {
+            const component = props.component;
+            if (component.type !== 'custom')
+                return null;
+            const Variant = variants.value[component.name];
+            if (!Variant) {
+                return h('div', { class: 'mdma-unknown-component', 'data-component-id': component.id }, `Unknown custom component: ${component.name}`);
+            }
+            return h(Variant, {
+                component,
+                props: component.props,
+                componentState: props.componentState,
+                dispatch: props.dispatch,
+                resolveBinding: props.resolveBinding,
+            });
+        };
+    },
+});
+//# 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":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE,kBAAkB;IACzB,KAAK,CAAC,KAAK;QACT,MAAM,QAAQ,GAAG,iBAAiB,EAAE,CAAC;QAErC,OAAO,GAAG,EAAE;YACV,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;YAClC,IAAI,SAAS,CAAC,IAAI,KAAK,QAAQ;gBAAE,OAAO,IAAI,CAAC;YAE7C,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;YAE/C,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,CAAC,CACN,KAAK,EACL,EAAE,KAAK,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAAE,EAAE,EACtE,6BAA6B,SAAS,CAAC,IAAI,EAAE,CAC9C,CAAC;YACJ,CAAC;YAED,OAAO,CAAC,CAAC,OAAO,EAAE;gBAChB,SAAS;gBACT,KAAK,EAAE,SAAS,CAAC,KAAK;gBACtB,cAAc,EAAE,KAAK,CAAC,cAAc;gBACpC,QAAQ,EAAE,KAAK,CAAC,QAAQ;gBACxB,cAAc,EAAE,KAAK,CAAC,cAAc;aACrC,CAAC,CAAC;QACL,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}