@campxdev/pdfme 1.2.2 → 1.3.0

package/dist/esm/chunks/{index-C7jr4GIK.js → index-D_-j4c4P.js}

@@ -1,9 +1,9 @@
-import { r as getFallbackFontName, q as getDefaultFont, D as DEFAULT_FONT_NAME, c as b64toUint8Array, A as pt2px, z as pt2mm, y as mm2pt, v as isBlankPdf, l as cloneDeep, x as isHexValid, w as isGoogleFont } from './helper-D5PPN6Bv.js';
+import { r as getFallbackFontName, q as getDefaultFont, D as DEFAULT_FONT_NAME, c as b64toUint8Array, A as pt2px, y as mm2pt, z as pt2mm, v as isBlankPdf, l as cloneDeep, x as isHexValid, w as isGoogleFont } from './helper-DSxGxZ0j.js';
 import * as fontkit from 'fontkit';
 import { Buffer } from 'buffer';
 import { d as degrees, c as cmyk, r as rgb, a as degreesToRadians } from './colors-jzbEzNi4.js';
 import { r as replacePlaceholders } from './expression-B-F1KCfk.js';
-import { Strikethrough, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify, ArrowUpToLine, ArrowDownToLine, Bold, Italic, Type } from 'lucide';
+import { Strikethrough, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify, ArrowUpToLine, ArrowDownToLine, Bold, Italic, FileText, BetweenHorizontalStart, TextCursorInput } from 'lucide';
 
 const DEFAULT_FONT_SIZE = 13;
 const ALIGN_LEFT = 'left';
@@ -1788,74 +1788,6 @@ const pdfRender$1 = async (arg) => {
     });
 };
 
-const substituteVariables = (text, variablesIn, extraContext) => {
-    if (!text) {
-        return '';
-    }
-    let variables;
-    try {
-        variables =
-            typeof variablesIn === 'string'
-                ? JSON.parse(variablesIn || '{}')
-                : variablesIn;
-    }
-    catch {
-        throw new SyntaxError(`[@campxdev/schemas] MVT: invalid JSON string '${variablesIn}'`);
-    }
-    // Merge extra context (e.g. currentPage, totalPages) with user variables
-    // System context takes precedence over user variables
-    const merged = extraContext ? { ...variables, ...extraContext } : variables;
-    // Use the full JS expression evaluator — supports {varName}, {expr * 2}, {str.toUpperCase()}, etc.
-    const result = replacePlaceholders({ content: text, variables: merged, schemas: [] });
-    // Strip any remaining unresolved {placeholders} for clean output
-    return result.replace(/\{[^{}]+\}/g, '');
-};
-const validateVariables = (value, schema) => {
-    if (!schema.variables || schema.variables.length === 0) {
-        return true;
-    }
-    let values;
-    try {
-        values = value ? JSON.parse(value) : {};
-    }
-    catch {
-        throw new SyntaxError(`[@campxdev/generator] invalid JSON string '${value}' for variables in field ${schema.name}`);
-    }
-    for (const variable of schema.variables) {
-        if (!values[variable]) {
-            if (schema.required) {
-                throw new Error(`[@campxdev/generator] variable ${variable} is missing for field ${schema.name}`);
-            }
-            return false;
-        }
-    }
-    return true;
-};
-
-const pdfRender = async (arg) => {
-    const { value, schema, pageContext, ...rest } = arg;
-    // Static mode: no template text → render value directly as plain text
-    if (!schema.text) {
-        await pdfRender$1({ value, schema, ...rest });
-        return;
-    }
-    // readOnly: value is already resolved by generate.ts via replacePlaceholders
-    if (schema.readOnly) {
-        await pdfRender$1({ value, schema, ...rest });
-        return;
-    }
-    // Dynamic mode (form): substitute variables in template
-    if (!validateVariables(value, schema)) {
-        return;
-    }
-    const renderArgs = {
-        value: substituteVariables(schema.text, value || '{}', pageContext),
-        schema,
-        ...rest,
-    };
-    await pdfRender$1(renderArgs);
-};
-
 createSvgStr(Bold);
 createSvgStr(Italic);
 const TextStrikethroughIcon = createSvgStr(Strikethrough);
@@ -1939,128 +1871,111 @@ const UseDynamicFontSize = (props) => {
     label.appendChild(span);
     rootElement.appendChild(label);
 };
-const propPanel$1 = {
+const propPanel$2 = {
     schema: ({ options, activeSchema, i18n }) => {
         const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
         const fontNames = Object.keys(font);
         const fallbackFontName = getFallbackFontName(font);
         const enableDynamicFont = Boolean(activeSchema?.dynamicFontSize);
-        const textSchema = {
-            fontName: {
-                title: i18n('schemas.text.fontName'),
-                type: 'string',
-                widget: 'select',
-                default: fallbackFontName,
-                placeholder: fallbackFontName,
-                props: {
-                    options: fontNames.map((name) => ({ label: name, value: name })),
-                    showSearch: true,
-                    virtual: true,
-                    filterOption: (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
-                    popupMatchSelectWidth: false,
-                    listHeight: 300,
-                    style: { width: '100%' },
-                },
-                span: 24,
-            },
-            fontSize: {
-                title: i18n('schemas.text.size'),
-                type: 'number',
-                widget: 'inputNumber',
-                span: 6,
-                disabled: enableDynamicFont,
-                props: { min: 0 },
-            },
-            characterSpacing: {
-                title: i18n('schemas.text.spacing'),
-                type: 'number',
-                widget: 'inputNumber',
-                span: 6,
-                props: { min: 0 },
-            },
-            formatter: getExtraFormatterSchema(i18n),
-            lineHeight: {
-                title: i18n('schemas.text.lineHeight'),
-                type: 'number',
-                widget: 'inputNumber',
-                props: { step: 0.1, min: 0 },
-                span: 8,
+        const result = {};
+        result.fontName = {
+            title: i18n('schemas.text.fontName'),
+            type: 'string',
+            widget: 'select',
+            default: fallbackFontName,
+            placeholder: fallbackFontName,
+            props: {
+                options: fontNames.map((name) => ({ label: name, value: name })),
+                showSearch: true,
+                virtual: true,
+                filterOption: (input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
+                popupMatchSelectWidth: false,
+                listHeight: 300,
+                style: { width: '100%' },
             },
-            useDynamicFontSize: { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 },
-            dynamicFontSize: {
-                type: 'object',
-                widget: 'card',
-                column: 3,
-                properties: {
-                    min: {
-                        title: i18n('schemas.text.min'),
-                        type: 'number',
-                        widget: 'inputNumber',
-                        hidden: !enableDynamicFont,
-                        props: { min: 0 },
-                    },
-                    max: {
-                        title: i18n('schemas.text.max'),
-                        type: 'number',
-                        widget: 'inputNumber',
-                        hidden: !enableDynamicFont,
-                        props: { min: 0 },
-                    },
-                    fit: {
-                        title: i18n('schemas.text.fit'),
-                        type: 'string',
-                        widget: 'select',
-                        hidden: !enableDynamicFont,
-                        props: {
-                            options: [
-                                { label: i18n('schemas.horizontal'), value: DYNAMIC_FIT_HORIZONTAL },
-                                { label: i18n('schemas.vertical'), value: DYNAMIC_FIT_VERTICAL },
-                            ],
-                        },
-                    },
+            span: 24,
+        };
+        result.fontSize = {
+            title: i18n('schemas.text.size'),
+            type: 'number',
+            widget: 'inputNumber',
+            span: 6,
+            disabled: enableDynamicFont,
+            props: { min: 0 },
+        };
+        result.characterSpacing = {
+            title: i18n('schemas.text.spacing'),
+            type: 'number',
+            widget: 'inputNumber',
+            span: 6,
+            props: { min: 0 },
+        };
+        result.formatter = getExtraFormatterSchema(i18n);
+        result.lineHeight = {
+            title: i18n('schemas.text.lineHeight'),
+            type: 'number',
+            widget: 'inputNumber',
+            props: { step: 0.1, min: 0 },
+            span: 8,
+        };
+        result.useDynamicFontSize = { type: 'boolean', widget: 'UseDynamicFontSize', bind: false, span: 16 };
+        result.dynamicFontSize = {
+            type: 'object',
+            widget: 'card',
+            column: 3,
+            properties: {
+                min: {
+                    title: i18n('schemas.text.min'),
+                    type: 'number',
+                    widget: 'inputNumber',
+                    hidden: !enableDynamicFont,
+                    props: { min: 0 },
                 },
-            },
-            fontColor: {
-                title: i18n('schemas.textColor'),
-                type: 'string',
-                widget: 'color',
-                props: {
-                    disabledAlpha: true,
+                max: {
+                    title: i18n('schemas.text.max'),
+                    type: 'number',
+                    widget: 'inputNumber',
+                    hidden: !enableDynamicFont,
+                    props: { min: 0 },
                 },
-                rules: [
-                    {
-                        pattern: HEX_COLOR_PATTERN,
-                        message: i18n('validation.hexColor'),
+                fit: {
+                    title: i18n('schemas.text.fit'),
+                    type: 'string',
+                    widget: 'select',
+                    hidden: !enableDynamicFont,
+                    props: {
+                        options: [
+                            { label: i18n('schemas.horizontal'), value: DYNAMIC_FIT_HORIZONTAL },
+                            { label: i18n('schemas.vertical'), value: DYNAMIC_FIT_VERTICAL },
+                        ],
                     },
-                ],
-            },
-            backgroundColor: {
-                title: i18n('schemas.bgColor'),
-                type: 'string',
-                widget: 'color',
-                props: {
-                    disabledAlpha: true,
                 },
-                rules: [
-                    {
-                        pattern: HEX_COLOR_PATTERN,
-                        message: i18n('validation.hexColor'),
-                    },
-                ],
             },
         };
-        return textSchema;
+        result.fontColor = {
+            title: i18n('schemas.textColor'),
+            type: 'string',
+            widget: 'color',
+            props: { disabledAlpha: true },
+            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+        };
+        result.backgroundColor = {
+            title: i18n('schemas.bgColor'),
+            type: 'string',
+            widget: 'color',
+            props: { disabledAlpha: true },
+            rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
+        };
+        return result;
     },
     widgets: { UseDynamicFontSize },
     defaultSchema: {
         name: '',
         type: 'text',
-        content: 'Type Something...',
+        content: '',
         position: { x: 0, y: 0 },
         width: 45,
-        height: 10,
-        // If the value of "rotate" is set to undefined or not set at all, rotation will be disabled in the UI.
-        // Check this document: https://pdfme.com//docs/custom-schemas#learning-how-to-create-from-pdfmeschemas-code
+        height: 7,
         rotate: 0,
         alignment: DEFAULT_ALIGNMENT,
         verticalAlignment: DEFAULT_VERTICAL_ALIGNMENT,
@@ -2069,259 +1984,14 @@ const propPanel$1 = {
         characterSpacing: DEFAULT_CHARACTER_SPACING,
         dynamicFontSize: undefined,
         fontColor: DEFAULT_FONT_COLOR,
-        fontName: undefined,
-        backgroundColor: '',
-        opacity: DEFAULT_OPACITY,
-        bold: false,
-        italic: false,
-        strikethrough: false,
-        underline: false,
-    },
-};
-
-/**
- * Factory function that creates an "Insert Variable" widget for a specific schema field.
- * The widget renders a dropdown of available variables and appends {varName} to the field value.
- *
- * @param targetKey - The schema field key to insert variables into (e.g., 'text', 'content')
- * @returns A PropPanelWidgetProps function that renders the variable picker
- */
-const createInsertVariableWidget = (targetKey) => {
-    return (props) => {
-        const { rootElement, changeSchemas, activeSchema, options } = props;
-        const variables = options.variables?.textVariables ?? [];
-        console.log('[insertVariableWidget] targetKey:', targetKey);
-        console.log('[insertVariableWidget] options:', options);
-        console.log('[insertVariableWidget] options.variables:', options.variables);
-        console.log('[insertVariableWidget] variables:', variables);
-        console.log('[insertVariableWidget] variables.length:', variables.length);
-        if (variables.length === 0) {
-            console.log('[insertVariableWidget] NO VARIABLES - returning early');
-            return;
-        }
-        console.log('[insertVariableWidget] Creating widget UI...');
-        const container = document.createElement('div');
-        container.style.cssText =
-            'display:flex; gap:6px; align-items:center; margin-bottom:10px; z-index:9999; position:relative;';
-        console.log('[insertVariableWidget] rootElement:', rootElement);
-        console.log('[insertVariableWidget] rootElement.parentElement:', rootElement.parentElement);
-        console.log('[insertVariableWidget] rootElement computed style:', window.getComputedStyle(rootElement));
-        const label = document.createElement('span');
-        label.textContent = 'Insert Variable:';
-        label.style.cssText = 'font-size:12px; color:#666; white-space:nowrap;';
-        const select = document.createElement('select');
-        select.style.cssText =
-            'flex:1; height:30px; border:1px solid #E0E0E0; border-radius:4px; padding:0 8px; font-size:13px; background:#fff; cursor:pointer; z-index:9999;';
-        const blank = document.createElement('option');
-        blank.value = '';
-        blank.textContent = '— pick variable —';
-        select.appendChild(blank);
-        for (const v of variables) {
-            const opt = document.createElement('option');
-            opt.value = v.value;
-            opt.textContent = v.label;
-            select.appendChild(opt);
-        }
-        select.onchange = (e) => {
-            const varName = e.target.value;
-            if (!varName)
-                return;
-            const current = String(activeSchema[targetKey] ?? '');
-            changeSchemas([{ key: targetKey, value: current + `{${varName}}`, schemaId: activeSchema.id }]);
-            select.value = '';
-        };
-        container.appendChild(label);
-        container.appendChild(select);
-        rootElement.appendChild(container);
-        console.log('[insertVariableWidget] Successfully created and appended widget');
-    };
-};
-
-const insertVariableWidget = createInsertVariableWidget('text');
-const mapDynamicVariables = (props) => {
-    const { rootElement, changeSchemas, activeSchema } = props;
-    const mvtSchema = activeSchema;
-    const text = mvtSchema.text ?? '';
-    if (!text) {
-        rootElement.style.display = 'none';
-        return;
-    }
-    const variables = JSON.parse(mvtSchema.content || '{}');
-    const variablesChanged = updateVariablesFromText(text, variables);
-    const varNames = Object.keys(variables);
-    if (variablesChanged) {
-        changeSchemas([
-            { key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id },
-            { key: 'variables', value: varNames, schemaId: activeSchema.id },
-            { key: 'readOnly', value: varNames.length === 0, schemaId: activeSchema.id },
-        ]);
-    }
-    // No UI needed — sample data is auto-generated from variable paths
-    rootElement.style.display = 'none';
-};
-const propPanel = {
-    schema: (propPanelProps) => {
-        if (typeof propPanel$1.schema !== 'function') {
-            throw new Error('Oops, is text schema no longer a function?');
-        }
-        // Safely call schema function with proper type handling
-        const parentSchema = typeof propPanel$1.schema === 'function' ? propPanel$1.schema(propPanelProps) : {};
-        return {
-            insertVariablePicker: {
-                type: 'void',
-                widget: 'insertVariableWidget',
-                bind: false,
-                span: 24,
-            },
-            '----': { type: 'void', widget: 'Divider' },
-            ...parentSchema,
-            dynamicVariables: {
-                type: 'object',
-                widget: 'mapDynamicVariables',
-                bind: false,
-                span: 0,
-            },
-        };
-    },
-    widgets: { ...(propPanel$1.widgets || {}), mapDynamicVariables, insertVariableWidget },
-    defaultSchema: {
-        ...propPanel$1.defaultSchema,
-        readOnly: false,
-        type: 'text',
-        text: 'Type Something...',
-        width: 50,
-        height: 15,
-        content: '{}',
-        variables: [],
-    },
-};
-/** Known JS globals/keywords that should NOT be treated as user-defined variables */
-const RESERVED_NAMES$1 = new Set([
-    'true', 'false', 'null', 'undefined', 'typeof', 'instanceof', 'in',
-    'void', 'delete', 'new', 'this', 'NaN', 'Infinity',
-    'Math', 'String', 'Number', 'Boolean', 'Array', 'Object', 'Date', 'JSON',
-    'isNaN', 'parseFloat', 'parseInt', 'decodeURI', 'decodeURIComponent',
-    'encodeURI', 'encodeURIComponent', 'date', 'dateTime',
-    'currentPage', 'totalPages',
-]);
-/**
- * Extract full dot-notation paths from an expression string.
- * E.g. "student.marks.sem1 > 80" → ["student.marks.sem1"]
- * Handles method calls: "student.name.toUpperCase()" → ["student.name"]
- * Skips string literals and reserved names.
- */
-const extractDotPaths = (expr) => {
-    // Replace string literals with spaces (preserving positions for nextChar lookup)
-    const cleaned = expr.replace(/'[^']*'|"[^"]*"|`[^`]*`/g, (m) => ' '.repeat(m.length));
-    const pathRegex = /[a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*/g;
-    const paths = new Set();
-    let m;
-    while ((m = pathRegex.exec(cleaned)) !== null) {
-        let path = m[0];
-        // If followed by '(', the last segment is a method call — trim it
-        const nextChar = cleaned[m.index + path.length];
-        if (nextChar === '(') {
-            const lastDot = path.lastIndexOf('.');
-            if (lastDot !== -1) {
-                path = path.substring(0, lastDot);
-            }
-            else {
-                // Standalone function call like parseInt(...) — skip
-                continue;
-            }
-        }
-        const root = path.split('.')[0];
-        if (!RESERVED_NAMES$1.has(root))
-            paths.add(path);
-    }
-    return Array.from(paths);
-};
-/**
- * Build a nested default object from dot-paths.
- * E.g. ["student.name", "student.marks.sem1"] →
- *   { name: "NAME", marks: { sem1: "SEM1" } }
- * Merges into an existing object, only adding missing leaves.
- * Returns true if anything was added.
- */
-const buildNestedDefault = (obj, paths) => {
-    let added = false;
-    for (const path of paths) {
-        const parts = path.split('.');
-        if (parts.length <= 1)
-            continue; // no nested parts
-        let current = obj;
-        for (let i = 1; i < parts.length - 1; i++) {
-            if (!(parts[i] in current) || typeof current[parts[i]] !== 'object' || current[parts[i]] === null) {
-                current[parts[i]] = {};
-                added = true;
-            }
-            current = current[parts[i]];
-        }
-        const leaf = parts[parts.length - 1];
-        if (!(leaf in current)) {
-            current[leaf] = path.replace(/\./g, '_').toUpperCase();
-            added = true;
-        }
-    }
-    return added;
-};
-const updateVariablesFromText = (text, variables) => {
-    // Find all {...} blocks and extract dot-notation paths from each
-    const blockRegex = /\{([^{}]+)\}/g;
-    const allPaths = new Set();
-    let blockMatch;
-    while ((blockMatch = blockRegex.exec(text)) !== null) {
-        for (const path of extractDotPaths(blockMatch[1])) {
-            allPaths.add(path);
-        }
-    }
-    // Group paths by root identifier
-    const rootToPaths = new Map();
-    for (const path of allPaths) {
-        const root = path.split('.')[0];
-        if (!rootToPaths.has(root))
-            rootToPaths.set(root, []);
-        rootToPaths.get(root).push(path);
-    }
-    const allRoots = new Set(rootToPaths.keys());
-    let changed = false;
-    for (const [root, paths] of rootToPaths) {
-        const hasNested = paths.some((p) => p.includes('.'));
-        if (hasNested) {
-            // Parse existing value or start fresh
-            let obj = {};
-            if (root in variables) {
-                try {
-                    const parsed = JSON.parse(variables[root]);
-                    if (typeof parsed === 'object' && parsed !== null) {
-                        obj = parsed;
-                    }
-                }
-                catch {
-                    /* not JSON, will rebuild */
-                }
-            }
-            const added = buildNestedDefault(obj, paths);
-            if (!(root in variables) || added) {
-                variables[root] = JSON.stringify(obj);
-                changed = true;
-            }
-        }
-        else {
-            if (!(root in variables)) {
-                variables[root] = root.toUpperCase();
-                changed = true;
-            }
-        }
-    }
-    // Remove variables whose root is no longer referenced
-    for (const varName of Object.keys(variables)) {
-        if (!allRoots.has(varName)) {
-            delete variables[varName];
-            changed = true;
-        }
-    }
-    return changed;
+        fontName: undefined,
+        backgroundColor: '',
+        opacity: DEFAULT_OPACITY,
+        bold: false,
+        italic: false,
+        strikethrough: false,
+        underline: false,
+    },
 };
 
 const _loadedGoogleFonts = new Set();
@@ -2362,9 +2032,10 @@ const replaceUnsupportedChars = (text, fontKitFont) => {
     })
         .join('');
 };
-const uiRender$1 = async (arg) => {
+const uiRender$2 = async (arg) => {
     const { value, schema, mode, onChange, stopEditing, tabIndex, placeholder, options, _cache } = arg;
-    const usePlaceholder = isEditable(mode, schema) && placeholder && !value;
+    const effectivePlaceholder = placeholder || 'Type Something...';
+    const usePlaceholder = isEditable(mode, schema) && !value;
     const getText = (element) => {
         let text = element.innerText;
         if (text.endsWith('\n')) {
@@ -2386,7 +2057,7 @@ const uiRender$1 = async (arg) => {
         arg.rootElement.style.transition = 'opacity 0.15s ease-out';
     }
     const fontKitFont = await getFontKitFont(resolvedFontName, font, _cache);
-    const textBlock = buildStyledTextContainer(arg, fontKitFont, usePlaceholder ? placeholder : value);
+    const textBlock = buildStyledTextContainer(arg, fontKitFont, usePlaceholder ? effectivePlaceholder : value);
     // Fade in once the font is ready
     if (isLoading) {
         // Force a reflow so the transition triggers from the dimmed state
@@ -2436,7 +2107,7 @@ const uiRender$1 = async (arg) => {
     if (usePlaceholder) {
         textBlock.style.color = PLACEHOLDER_FONT_COLOR;
         textBlock.addEventListener('focus', () => {
-            if (textBlock.innerText === placeholder) {
+            if (textBlock.innerText === effectivePlaceholder) {
                 textBlock.innerText = '';
                 textBlock.style.color = schema.fontColor ?? DEFAULT_FONT_COLOR;
             }
@@ -2454,123 +2125,413 @@ const uiRender$1 = async (arg) => {
                 selection?.removeAllRanges();
                 selection?.addRange(range);
             }
-        });
+        });
+    }
+};
+const buildStyledTextContainer = (arg, fontKitFont, value) => {
+    const { schema, rootElement, mode } = arg;
+    let dynamicFontSize = undefined;
+    if (schema.dynamicFontSize && value) {
+        dynamicFontSize = calculateDynamicFontSize({
+            textSchema: schema,
+            fontKitFont,
+            value,
+            startingFontSize: dynamicFontSize,
+        });
+    }
+    // Depending on vertical alignment, we need to move the top or bottom of the font to keep
+    // it within it's defined box and align it with the generated pdf.
+    const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE, schema.lineHeight ?? DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
+    const topAdjustment = topAdj.toString();
+    const bottomAdjustment = bottomAdj.toString();
+    const container = document.createElement('div');
+    const containerStyle = {
+        padding: 0,
+        resize: 'none',
+        backgroundColor: getBackgroundColor(value, schema),
+        border: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
+        width: '100%',
+        height: '100%',
+        cursor: isEditable(mode, schema) ? 'text' : 'default',
+    };
+    Object.assign(container.style, containerStyle);
+    rootElement.innerHTML = '';
+    rootElement.appendChild(container);
+    // text decoration
+    const textDecorations = [];
+    if (schema.strikethrough)
+        textDecorations.push('line-through');
+    if (schema.underline)
+        textDecorations.push('underline');
+    const textBlockStyle = {
+        // Font formatting styles
+        fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
+        fontWeight: schema.bold ? 'bold' : 'normal',
+        fontStyle: schema.italic ? 'italic' : 'normal',
+        color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
+        fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
+        letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
+        lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
+        textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
+        whiteSpace: 'pre-wrap',
+        wordBreak: 'break-word',
+        // Block layout styles
+        resize: 'none',
+        border: 'none',
+        outline: 'none',
+        marginBottom: `${bottomAdjustment}px`,
+        paddingTop: `${topAdjustment}px`,
+        backgroundColor: 'transparent',
+        textDecoration: textDecorations.join(' '),
+    };
+    const textBlock = document.createElement('div');
+    textBlock.id = 'text-' + String(schema.id);
+    Object.assign(textBlock.style, textBlockStyle);
+    container.appendChild(textBlock);
+    return textBlock;
+};
+/**
+ * Firefox doesn't support 'plaintext-only' contentEditable mode, which we want to avoid mark-up.
+ * This function adds a workaround for Firefox to make the contentEditable element behave like 'plaintext-only'.
+ */
+const makeElementPlainTextContentEditable = (element) => {
+    if (!isFirefox()) {
+        element.contentEditable = 'plaintext-only';
+        return;
+    }
+    element.contentEditable = 'true';
+    element.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            document.execCommand('insertLineBreak', false, undefined);
+        }
+    });
+    element.addEventListener('paste', (e) => {
+        e.preventDefault();
+        const paste = e.clipboardData?.getData('text');
+        const selection = window.getSelection();
+        if (!selection?.rangeCount)
+            return;
+        selection.deleteFromDocument();
+        selection.getRangeAt(0).insertNode(document.createTextNode(paste || ''));
+        selection.collapseToEnd();
+    });
+};
+const mapVerticalAlignToFlex = (verticalAlignmentValue) => {
+    switch (verticalAlignmentValue) {
+        case VERTICAL_ALIGN_TOP:
+            return 'flex-start';
+        case VERTICAL_ALIGN_MIDDLE:
+            return 'center';
+        case VERTICAL_ALIGN_BOTTOM:
+            return 'flex-end';
+    }
+    return 'flex-start';
+};
+const getBackgroundColor = (value, schema) => {
+    if (!value || !schema.backgroundColor)
+        return 'transparent';
+    return schema.backgroundColor;
+};
+
+const substituteVariables = (text, variablesIn, extraContext) => {
+    if (!text) {
+        return '';
+    }
+    let variables;
+    try {
+        variables =
+            typeof variablesIn === 'string'
+                ? JSON.parse(variablesIn || '{}')
+                : variablesIn;
+    }
+    catch {
+        throw new SyntaxError(`[@campxdev/schemas] richText: invalid JSON string '${variablesIn}'`);
+    }
+    // Merge extra context (e.g. currentPage, totalPages) with user variables
+    // System context takes precedence over user variables
+    const merged = extraContext ? { ...variables, ...extraContext } : variables;
+    // Use the full JS expression evaluator — supports {varName}, {expr * 2}, {str.toUpperCase()}, etc.
+    const result = replacePlaceholders({ content: text, variables: merged, schemas: [] });
+    // Strip any remaining unresolved {placeholders} for clean output
+    return result.replace(/\{[^{}]+\}/g, '');
+};
+const validateVariables = (value, schema) => {
+    if (!schema.variables || schema.variables.length === 0) {
+        return true;
+    }
+    let values;
+    try {
+        values = value ? JSON.parse(value) : {};
+    }
+    catch {
+        throw new SyntaxError(`[@campxdev/generator] invalid JSON string '${value}' for variables in field ${schema.name}`);
+    }
+    for (const variable of schema.variables) {
+        if (!values[variable]) {
+            if (schema.required) {
+                throw new Error(`[@campxdev/generator] variable ${variable} is missing for field ${schema.name}`);
+            }
+            return false;
+        }
+    }
+    return true;
+};
+
+const pdfRender = async (arg) => {
+    const { value, schema, pageContext, ...rest } = arg;
+    // Static mode: no template text → render value directly as plain text
+    if (!schema.text) {
+        await pdfRender$1({ value, schema, ...rest });
+        return;
+    }
+    // readOnly: value is already resolved by generate.ts via replacePlaceholders
+    if (schema.readOnly) {
+        await pdfRender$1({ value, schema, ...rest });
+        return;
+    }
+    // Dynamic mode (form): substitute variables in template
+    if (!validateVariables(value, schema)) {
+        return;
+    }
+    const renderArgs = {
+        value: substituteVariables(schema.text, value || '{}', pageContext),
+        schema,
+        ...rest,
+    };
+    await pdfRender$1(renderArgs);
+};
+
+const variablePrefixSuffixWidget = (props) => {
+    const { rootElement, changeSchemas, activeSchema, options } = props;
+    const schema = activeSchema;
+    const variables = options.variables?.textVariables ?? [];
+    if (variables.length === 0) {
+        const hint = document.createElement('div');
+        hint.textContent = 'Type {variableName} directly in the text field';
+        hint.style.cssText = 'font-size:11px;color:#aaa;margin-bottom:8px;font-style:italic;';
+        rootElement.appendChild(hint);
+        return;
+    }
+    const container = document.createElement('div');
+    container.style.cssText = 'display:flex;flex-direction:column;gap:4px;margin-bottom:8px;';
+    const title = document.createElement('div');
+    title.textContent = 'Insert Variable:';
+    title.style.cssText = 'font-size:12px;color:#666;margin-bottom:2px;';
+    container.appendChild(title);
+    for (const v of variables) {
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;align-items:center;gap:6px;';
+        const makeBtn = (side) => {
+            const btn = document.createElement('button');
+            btn.textContent = '+';
+            btn.title = side === 'prefix' ? `Add ${v.label} as prefix` : `Add ${v.label} as suffix`;
+            btn.style.cssText =
+                'width:22px;height:22px;cursor:pointer;border:1px solid #d9d9d9;border-radius:4px;' +
+                    'background:#fff;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;';
+            btn.onclick = () => {
+                const current = String(schema.text ?? '');
+                const next = side === 'prefix' ? `{${v.value}} ${current}` : `${current} {${v.value}}`;
+                changeSchemas([{ key: 'text', value: next, schemaId: activeSchema.id }]);
+            };
+            return btn;
+        };
+        const label = document.createElement('span');
+        label.textContent = v.label;
+        label.style.cssText = 'font-size:12px;flex:1;color:#333;';
+        row.appendChild(makeBtn('prefix'));
+        row.appendChild(label);
+        row.appendChild(makeBtn('suffix'));
+        container.appendChild(row);
+    }
+    rootElement.appendChild(container);
+};
+const mapDynamicVariables$1 = (props) => {
+    const { rootElement, changeSchemas, activeSchema } = props;
+    const rtSchema = activeSchema;
+    const text = rtSchema.text ?? '';
+    if (!text) {
+        rootElement.style.display = 'none';
+        return;
+    }
+    const variables = JSON.parse((rtSchema.content && rtSchema.content !== '' ? rtSchema.content : '{}'));
+    const variablesChanged = updateVariablesFromText(text, variables);
+    const varNames = Object.keys(variables);
+    if (variablesChanged) {
+        changeSchemas([
+            { key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id },
+            { key: 'variables', value: varNames, schemaId: activeSchema.id },
+            { key: 'readOnly', value: varNames.length === 0, schemaId: activeSchema.id },
+        ]);
+    }
+    rootElement.style.display = 'none';
+};
+const propPanel$1 = {
+    schema: (propPanelProps) => {
+        if (typeof propPanel$2.schema !== 'function') {
+            throw new Error('Oops, is text schema no longer a function?');
+        }
+        const parentSchema = typeof propPanel$2.schema === 'function' ? propPanel$2.schema(propPanelProps) : {};
+        return {
+            insertVariablePicker: {
+                type: 'void',
+                widget: 'variablePrefixSuffixWidget',
+                bind: false,
+                span: 24,
+            },
+            '----': { type: 'void', widget: 'Divider' },
+            ...parentSchema,
+            dynamicVariables: {
+                type: 'object',
+                widget: 'mapDynamicVariables',
+                bind: false,
+                span: 0,
+            },
+        };
+    },
+    widgets: { ...(propPanel$2.widgets || {}), mapDynamicVariables: mapDynamicVariables$1, variablePrefixSuffixWidget },
+    defaultSchema: {
+        ...propPanel$2.defaultSchema,
+        readOnly: false,
+        type: 'richText',
+        text: '',
+        width: 50,
+        height: 7,
+        content: '',
+        variables: [],
+    },
+};
+/** Known JS globals/keywords that should NOT be treated as user-defined variables */
+const RESERVED_NAMES$1 = new Set([
+    'true', 'false', 'null', 'undefined', 'typeof', 'instanceof', 'in',
+    'void', 'delete', 'new', 'this', 'NaN', 'Infinity',
+    'Math', 'String', 'Number', 'Boolean', 'Array', 'Object', 'Date', 'JSON',
+    'isNaN', 'parseFloat', 'parseInt', 'decodeURI', 'decodeURIComponent',
+    'encodeURI', 'encodeURIComponent', 'date', 'dateTime',
+    'currentPage', 'totalPages',
+]);
+const extractDotPaths = (expr) => {
+    const cleaned = expr.replace(/'[^']*'|"[^"]*"|`[^`]*`/g, (m) => ' '.repeat(m.length));
+    const pathRegex = /[a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*/g;
+    const paths = new Set();
+    let m;
+    while ((m = pathRegex.exec(cleaned)) !== null) {
+        let path = m[0];
+        const nextChar = cleaned[m.index + path.length];
+        if (nextChar === '(') {
+            const lastDot = path.lastIndexOf('.');
+            if (lastDot !== -1) {
+                path = path.substring(0, lastDot);
+            }
+            else {
+                continue;
+            }
+        }
+        const root = path.split('.')[0];
+        if (!RESERVED_NAMES$1.has(root))
+            paths.add(path);
     }
+    return Array.from(paths);
 };
-const buildStyledTextContainer = (arg, fontKitFont, value) => {
-    const { schema, rootElement, mode } = arg;
-    let dynamicFontSize = undefined;
-    if (schema.dynamicFontSize && value) {
-        dynamicFontSize = calculateDynamicFontSize({
-            textSchema: schema,
-            fontKitFont,
-            value,
-            startingFontSize: dynamicFontSize,
-        });
+const buildNestedDefault = (obj, paths) => {
+    let added = false;
+    for (const path of paths) {
+        const parts = path.split('.');
+        if (parts.length <= 1)
+            continue;
+        let current = obj;
+        for (let i = 1; i < parts.length - 1; i++) {
+            if (!(parts[i] in current) || typeof current[parts[i]] !== 'object' || current[parts[i]] === null) {
+                current[parts[i]] = {};
+                added = true;
+            }
+            current = current[parts[i]];
+        }
+        const leaf = parts[parts.length - 1];
+        const isOldLeafFormat = leaf in current && (/^[A-Z][A-Z0-9_]+$/.test(String(current[leaf])) || /^\{\{.*\}\}$/.test(String(current[leaf])));
+        if (!(leaf in current) || isOldLeafFormat) {
+            current[leaf] = path.replace(/\./g, ' ');
+            added = true;
+        }
     }
-    // Depending on vertical alignment, we need to move the top or bottom of the font to keep
-    // it within it's defined box and align it with the generated pdf.
-    const { topAdj, bottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE, schema.lineHeight ?? DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
-    const topAdjustment = topAdj.toString();
-    const bottomAdjustment = bottomAdj.toString();
-    const container = document.createElement('div');
-    const containerStyle = {
-        padding: 0,
-        resize: 'none',
-        backgroundColor: getBackgroundColor(value, schema),
-        border: 'none',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: mapVerticalAlignToFlex(schema.verticalAlignment),
-        width: '100%',
-        height: '100%',
-        cursor: isEditable(mode, schema) ? 'text' : 'default',
-    };
-    Object.assign(container.style, containerStyle);
-    rootElement.innerHTML = '';
-    rootElement.appendChild(container);
-    // text decoration
-    const textDecorations = [];
-    if (schema.strikethrough)
-        textDecorations.push('line-through');
-    if (schema.underline)
-        textDecorations.push('underline');
-    const textBlockStyle = {
-        // Font formatting styles
-        fontFamily: schema.fontName ? `'${schema.fontName}'` : 'inherit',
-        fontWeight: schema.bold ? 'bold' : 'normal',
-        fontStyle: schema.italic ? 'italic' : 'normal',
-        color: schema.fontColor ? schema.fontColor : DEFAULT_FONT_COLOR,
-        fontSize: `${dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE}pt`,
-        letterSpacing: `${schema.characterSpacing ?? DEFAULT_CHARACTER_SPACING}pt`,
-        lineHeight: `${schema.lineHeight ?? DEFAULT_LINE_HEIGHT}em`,
-        textAlign: schema.alignment ?? DEFAULT_ALIGNMENT,
-        whiteSpace: 'pre-wrap',
-        wordBreak: 'break-word',
-        // Block layout styles
-        resize: 'none',
-        border: 'none',
-        outline: 'none',
-        marginBottom: `${bottomAdjustment}px`,
-        paddingTop: `${topAdjustment}px`,
-        backgroundColor: 'transparent',
-        textDecoration: textDecorations.join(' '),
-    };
-    const textBlock = document.createElement('div');
-    textBlock.id = 'text-' + String(schema.id);
-    Object.assign(textBlock.style, textBlockStyle);
-    container.appendChild(textBlock);
-    return textBlock;
+    return added;
 };
-/**
- * Firefox doesn't support 'plaintext-only' contentEditable mode, which we want to avoid mark-up.
- * This function adds a workaround for Firefox to make the contentEditable element behave like 'plaintext-only'.
- */
-const makeElementPlainTextContentEditable = (element) => {
-    if (!isFirefox()) {
-        element.contentEditable = 'plaintext-only';
-        return;
+const updateVariablesFromText = (text, variables) => {
+    const blockRegex = /\{([^{}]+)\}/g;
+    const allPaths = new Set();
+    let blockMatch;
+    while ((blockMatch = blockRegex.exec(text)) !== null) {
+        for (const path of extractDotPaths(blockMatch[1])) {
+            allPaths.add(path);
+        }
     }
-    element.contentEditable = 'true';
-    element.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            document.execCommand('insertLineBreak', false, undefined);
+    const rootToPaths = new Map();
+    for (const path of allPaths) {
+        const root = path.split('.')[0];
+        if (!rootToPaths.has(root))
+            rootToPaths.set(root, []);
+        rootToPaths.get(root).push(path);
+    }
+    const allRoots = new Set(rootToPaths.keys());
+    let changed = false;
+    for (const [root, paths] of rootToPaths) {
+        const hasNested = paths.some((p) => p.includes('.'));
+        if (hasNested) {
+            let obj = {};
+            if (root in variables) {
+                try {
+                    const parsed = JSON.parse(variables[root]);
+                    if (typeof parsed === 'object' && parsed !== null) {
+                        obj = parsed;
+                    }
+                }
+                catch {
+                    /* not JSON, will rebuild */
+                }
+            }
+            const added = buildNestedDefault(obj, paths);
+            if (!(root in variables) || added) {
+                variables[root] = JSON.stringify(obj);
+                changed = true;
+            }
+        }
+        else {
+            const existingVal = variables[root];
+            const isStaleObject = typeof existingVal === 'string' && (() => {
+                try {
+                    const p = JSON.parse(existingVal);
+                    return typeof p === 'object' && p !== null;
+                }
+                catch {
+                    return false;
+                }
+            })();
+            const isOldFormat = typeof existingVal === 'string' && (/^[A-Z][A-Z0-9_]*$/.test(existingVal) || /^\{\{.*\}\}$/.test(existingVal));
+            if (!(root in variables) || isStaleObject || isOldFormat) {
+                variables[root] = root;
+                changed = true;
+            }
         }
-    });
-    element.addEventListener('paste', (e) => {
-        e.preventDefault();
-        const paste = e.clipboardData?.getData('text');
-        const selection = window.getSelection();
-        if (!selection?.rangeCount)
-            return;
-        selection.deleteFromDocument();
-        selection.getRangeAt(0).insertNode(document.createTextNode(paste || ''));
-        selection.collapseToEnd();
-    });
-};
-const mapVerticalAlignToFlex = (verticalAlignmentValue) => {
-    switch (verticalAlignmentValue) {
-        case VERTICAL_ALIGN_TOP:
-            return 'flex-start';
-        case VERTICAL_ALIGN_MIDDLE:
-            return 'center';
-        case VERTICAL_ALIGN_BOTTOM:
-            return 'flex-end';
     }
-    return 'flex-start';
-};
-const getBackgroundColor = (value, schema) => {
-    if (!value || !schema.backgroundColor)
-        return 'transparent';
-    return schema.backgroundColor;
+    for (const varName of Object.keys(variables)) {
+        if (!allRoots.has(varName)) {
+            delete variables[varName];
+            changed = true;
+        }
+    }
+    return changed;
 };
 
-const uiRender = async (arg) => {
+/** Format {expr} → {{ expr with dots as spaces }} for display */
+const formatTemplateDisplay$1 = (text) => text.replace(/\{([^{}]+)\}/g, (_, expr) => '{{ ' + expr.trim().replace(/\./g, ' ') + ' }}');
+const uiRender$1 = async (arg) => {
     const { value, schema, rootElement, mode, onChange, pageContext, ...rest } = arg;
     // Static mode: no template text → delegate to plain text behavior
     if (!schema.text) {
-        await uiRender$1(arg);
+        await uiRender$2({ ...arg, value: value || '' });
         return;
     }
     // Dynamic mode: template with optional variables
@@ -2580,8 +2541,8 @@ const uiRender = async (arg) => {
         await formUiRender(arg);
         return;
     }
-    await uiRender$1({
-        value: isEditable(mode, schema) ? text : substituteVariables(text, value, pageContext),
+    await uiRender$2({
+        value: isEditable(mode, schema) ? text : formatTemplateDisplay$1(text),
         schema,
         mode: mode === 'form' ? 'viewer' : mode, // if no variables for form it's just a viewer
         rootElement,
@@ -2602,11 +2563,34 @@ const uiRender = async (arg) => {
         throw new Error('Text block not found. Ensure the text block has an id of "text-" + schema.id');
     }
     if (mode === 'designer') {
-        textBlock.addEventListener('keyup', (event) => {
+        // Show formatted display initially: {value} → {{ value }}
+        if (text) {
+            textBlock.textContent = formatTemplateDisplay$1(text);
+        }
+        textBlock.addEventListener('focus', () => {
+            // Switch to raw template for editing
+            textBlock.textContent = text;
+            const sel = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(textBlock);
+            range.collapse(false);
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+        });
+        textBlock.addEventListener('blur', () => {
             text = textBlock.textContent || '';
+            if (onChange) {
+                onChange({ key: 'text', value: text });
+            }
+            // Show formatted display again
+            textBlock.textContent = formatTemplateDisplay$1(text);
+        });
+        textBlock.addEventListener('keyup', (event) => {
+            const currentText = textBlock.textContent || '';
             if (keyPressShouldBeChecked(event)) {
-                const newNumVariables = countUniqueVariableNames(text);
+                const newNumVariables = countUniqueVariableNames(currentText);
                 if (numVariables !== newNumVariables) {
+                    text = currentText;
                     if (onChange) {
                         onChange({ key: 'text', value: text });
                     }
@@ -2791,7 +2775,6 @@ const countUniqueVariableNames = (content) => {
 /**
  * An optimisation to try to minimise jank while typing.
  * Only check whether variables were modified based on certain key presses.
- * Regex would otherwise be performed on every key press (which isn't terrible, but this code helps).
  */
 const keyPressShouldBeChecked = (event) => {
     if (event.key === 'ArrowUp' ||
@@ -2813,14 +2796,178 @@ const keyPressShouldBeChecked = (event) => {
     return true;
 };
 
+const schema$1 = {
+    pdf: pdfRender,
+    ui: uiRender$1,
+    propPanel: propPanel$1,
+    icon: createSvgStr(FileText),
+    uninterruptedEditMode: true,
+};
+
+/** Replaces any existing {var} in the template with {newVar}, or appends if none exists */
+const replaceOrAppendVariable = (currentText, varName) => {
+    // Replace any existing {identifier} block with the new variable
+    const replaced = currentText.replace(/\{[a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*\}/g, `{${varName}}`);
+    if (replaced !== currentText)
+        return replaced;
+    // No existing variable — append with a space separator
+    return currentText ? `${currentText} {${varName}}` : `{${varName}}`;
+};
+const singleVariablePickerWidget = (props) => {
+    const { rootElement, changeSchemas, activeSchema, options } = props;
+    const schema = activeSchema;
+    const variables = options.variables?.textVariables ?? [];
+    if (variables.length === 0)
+        return;
+    const container = document.createElement('div');
+    container.style.cssText = 'display:flex;gap:6px;align-items:center;margin-bottom:10px;';
+    const label = document.createElement('span');
+    label.textContent = 'Variable:';
+    label.style.cssText = 'font-size:12px;color:#666;white-space:nowrap;';
+    const select = document.createElement('select');
+    select.style.cssText =
+        'flex:1;height:30px;border:1px solid #E0E0E0;border-radius:4px;padding:0 8px;font-size:13px;background:#fff;cursor:pointer;';
+    const blank = document.createElement('option');
+    blank.value = '';
+    blank.textContent = '— pick variable —';
+    select.appendChild(blank);
+    for (const v of variables) {
+        const opt = document.createElement('option');
+        opt.value = v.value;
+        opt.textContent = v.label;
+        select.appendChild(opt);
+    }
+    select.onchange = (e) => {
+        const varName = e.target.value;
+        if (!varName)
+            return;
+        const current = String(schema.text ?? '');
+        const next = replaceOrAppendVariable(current, varName);
+        changeSchemas([{ key: 'text', value: next, schemaId: activeSchema.id }]);
+        select.value = '';
+    };
+    container.appendChild(label);
+    container.appendChild(select);
+    rootElement.appendChild(container);
+};
+const mapDynamicVariables = (props) => {
+    const { rootElement, changeSchemas, activeSchema } = props;
+    const svtSchema = activeSchema;
+    const text = svtSchema.text ?? '';
+    if (!text) {
+        rootElement.style.display = 'none';
+        return;
+    }
+    // Extract all simple variable references from the template
+    const varMatches = [...text.matchAll(/\{([a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*)\}/g)].map(m => m[1]);
+    // Keep only the first unique variable (enforce single-variable restriction)
+    const uniqueVars = [...new Set(varMatches)];
+    const variable = uniqueVars[0];
+    const varNames = variable ? [variable] : [];
+    const variables = {};
+    if (variable) {
+        const existing = JSON.parse(svtSchema.content && svtSchema.content !== '' ? svtSchema.content : '{}');
+        const existingVal = existing[variable];
+        const isOldFormat = typeof existingVal === 'string' && (/^[A-Z][A-Z0-9_]*$/.test(existingVal) || /^\{\{.*\}\}$/.test(existingVal));
+        const isStaleObject = typeof existingVal === 'string' && (() => {
+            try {
+                const p = JSON.parse(existingVal);
+                return typeof p === 'object' && p !== null;
+            }
+            catch {
+                return false;
+            }
+        })();
+        variables[variable] = (!existingVal || isOldFormat || isStaleObject) ? variable.replace(/\./g, ' ') : existingVal;
+    }
+    const content = varNames.length > 0 ? JSON.stringify(variables) : '';
+    const changed = JSON.stringify(svtSchema.variables ?? []) !== JSON.stringify(varNames) ||
+        (svtSchema.content ?? '') !== content;
+    if (changed) {
+        changeSchemas([
+            { key: 'content', value: content, schemaId: activeSchema.id },
+            { key: 'variables', value: varNames, schemaId: activeSchema.id },
+            { key: 'readOnly', value: varNames.length === 0, schemaId: activeSchema.id },
+        ]);
+    }
+    rootElement.style.display = 'none';
+};
+const propPanel = {
+    schema: (propPanelProps) => {
+        if (typeof propPanel$1.schema !== 'function') {
+            throw new Error('richText propPanel schema is not a function');
+        }
+        const parentSchema = propPanel$1.schema(propPanelProps);
+        // Strip out richText-specific structural keys; we'll re-add our own versions
+        const { insertVariablePicker: _ip, '----': _div, dynamicVariables: _dv, ...textFields } = parentSchema;
+        return {
+            insertVariablePicker: {
+                type: 'void',
+                widget: 'singleVariablePickerWidget',
+                bind: false,
+                span: 24,
+            },
+            '----': { type: 'void', widget: 'Divider' },
+            ...textFields,
+            dynamicVariables: {
+                type: 'object',
+                widget: 'mapDynamicVariables',
+                bind: false,
+                span: 0,
+            },
+        };
+    },
+    widgets: {
+        ...(propPanel$1.widgets || {}),
+        singleVariablePickerWidget,
+        mapDynamicVariables,
+    },
+    defaultSchema: {
+        ...propPanel$1.defaultSchema,
+        type: 'singleVariableText',
+        text: '',
+        content: '',
+        height: 7,
+        variables: [],
+    },
+};
+
+/** Format {expr} → {{ expr with dots as spaces }} */
+const formatTemplateDisplay = (text) => text.replace(/\{([^{}]+)\}/g, (_, expr) => '{{ ' + expr.trim().replace(/\./g, ' ') + ' }}');
+const uiRender = async (arg) => {
+    const { mode, schema, options, _cache } = arg;
+    if (mode === 'designer') {
+        // ReadOnly preview — show {{ variable }} formatted display
+        const text = schema.text ?? '';
+        const displayText = text ? formatTemplateDisplay(text) : '';
+        const font = options?.font || getDefaultFont();
+        const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
+        const textBlock = buildStyledTextContainer(arg, fontKitFont, displayText);
+        textBlock.textContent = displayText;
+        textBlock.style.cursor = 'default';
+        return;
+    }
+    // Viewer/form modes: delegate to richText render
+    await uiRender$1(arg);
+};
 const schema = {
     pdf: pdfRender,
     ui: uiRender,
     propPanel,
-    icon: createSvgStr(Type),
-    uninterruptedEditMode: true,
+    icon: createSvgStr(BetweenHorizontalStart),
+};
+
+const textSchema = {
+    pdf: pdfRender$1,
+    ui: uiRender$2,
+    propPanel: propPanel$2,
+    icon: createSvgStr(TextCursorInput),
 };
 
-const builtInPlugins = { Text: schema };
+const builtInPlugins = {
+    Text: textSchema,
+    'Dynamic Text': schema,
+    'Rich Text': schema$1,
+};
 
-export { getExtraFormatterSchema as A, DEFAULT_LINE_HEIGHT as B, mapVerticalAlignToFlex as C, DEFAULT_OPACITY as D, Formatter as F, HEX_COLOR_PATTERN as H, VERTICAL_ALIGN_MIDDLE as V, addAlphaToHex as a, builtInPlugins as b, createSvgStr as c, convertForPdfLayoutProps as d, rotatePoint as e, getDefaultCellStyles as f, getDynamicHeightsForTable as g, hex2PrintingColor as h, isEditable as i, substituteVariables as j, createErrorElm as k, createInsertVariableWidget as l, propPanel$1 as m, getBodyWithRange as n, createSingleTable as o, pdfRender$1 as p, getBody as q, readFile as r, schema as s, getColumnStylesPropPanelSchema as t, uiRender$1 as u, getCellPropPanelSchema as v, DEFAULT_FONT_COLOR as w, DEFAULT_CHARACTER_SPACING as x, DEFAULT_FONT_SIZE as y, DEFAULT_ALIGNMENT as z };
+export { DEFAULT_CHARACTER_SPACING as A, DEFAULT_FONT_SIZE as B, DEFAULT_ALIGNMENT as C, DEFAULT_OPACITY as D, getExtraFormatterSchema as E, Formatter as F, DEFAULT_LINE_HEIGHT as G, HEX_COLOR_PATTERN as H, mapVerticalAlignToFlex as I, VERTICAL_ALIGN_MIDDLE as V, schema as a, builtInPlugins as b, createSvgStr as c, addAlphaToHex as d, convertForPdfLayoutProps as e, rotatePoint as f, getDynamicHeightsForTable as g, hex2PrintingColor as h, isEditable as i, getDefaultCellStyles as j, createErrorElm as k, propPanel$2 as l, getFontKitFont as m, buildStyledTextContainer as n, makeElementPlainTextContentEditable as o, pdfRender$1 as p, getBodyWithRange as q, readFile as r, schema$1 as s, textSchema as t, uiRender$2 as u, createSingleTable as v, getBody as w, getColumnStylesPropPanelSchema as x, getCellPropPanelSchema as y, DEFAULT_FONT_COLOR as z };