@campxdev/pdfme 1.2.2 → 1.3.0

package/dist/cjs/chunks/{index-CVqJfcgy.js → index-CsEKt088.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var helper = require('./helper-BfoMn47R.js');
+var helper = require('./helper-DGH62Z2s.js');
 var fontkit = require('fontkit');
 var buffer = require('buffer');
 var colors = require('./colors-BeBcxfhb.js');
@@ -1810,74 +1810,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 = expression.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(lucide.Bold);
 createSvgStr(lucide.Italic);
 const TextStrikethroughIcon = createSvgStr(lucide.Strikethrough);
@@ -1961,128 +1893,111 @@ const UseDynamicFontSize = (props) => {
     label.appendChild(span);
     rootElement.appendChild(label);
 };
-const propPanel$1 = {
+const propPanel$2 = {
     schema: ({ options, activeSchema, i18n }) => {
         const font = options.font || { [helper.DEFAULT_FONT_NAME]: { data: '', fallback: true } };
         const fontNames = Object.keys(font);
         const fallbackFontName = helper.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,
@@ -2091,259 +2006,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();
@@ -2384,9 +2054,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')) {
@@ -2408,7 +2079,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
@@ -2458,7 +2129,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;
             }
@@ -2476,123 +2147,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 = expression.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
@@ -2602,8 +2563,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,
@@ -2624,11 +2585,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 });
                     }
@@ -2813,7 +2797,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' ||
@@ -2835,15 +2818,179 @@ const keyPressShouldBeChecked = (event) => {
     return true;
 };
 
+const schema$1 = {
+    pdf: pdfRender,
+    ui: uiRender$1,
+    propPanel: propPanel$1,
+    icon: createSvgStr(lucide.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 || helper.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(lucide.Type),
-    uninterruptedEditMode: true,
+    icon: createSvgStr(lucide.BetweenHorizontalStart),
+};
+
+const textSchema = {
+    pdf: pdfRender$1,
+    ui: uiRender$2,
+    propPanel: propPanel$2,
+    icon: createSvgStr(lucide.TextCursorInput),
 };
 
-const builtInPlugins = { Text: schema };
+const builtInPlugins = {
+    Text: textSchema,
+    'Dynamic Text': schema,
+    'Rich Text': schema$1,
+};
 
 exports.DEFAULT_ALIGNMENT = DEFAULT_ALIGNMENT;
 exports.DEFAULT_CHARACTER_SPACING = DEFAULT_CHARACTER_SPACING;
@@ -2854,10 +3001,10 @@ exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
 exports.HEX_COLOR_PATTERN = HEX_COLOR_PATTERN;
 exports.VERTICAL_ALIGN_MIDDLE = VERTICAL_ALIGN_MIDDLE;
 exports.addAlphaToHex = addAlphaToHex;
+exports.buildStyledTextContainer = buildStyledTextContainer;
 exports.builtInPlugins = builtInPlugins;
 exports.convertForPdfLayoutProps = convertForPdfLayoutProps;
 exports.createErrorElm = createErrorElm;
-exports.createInsertVariableWidget = createInsertVariableWidget;
 exports.createSingleTable = createSingleTable;
 exports.createSvgStr = createSvgStr;
 exports.getBody = getBody;
@@ -2867,13 +3014,16 @@ exports.getColumnStylesPropPanelSchema = getColumnStylesPropPanelSchema;
 exports.getDefaultCellStyles = getDefaultCellStyles;
 exports.getDynamicHeightsForTable = getDynamicHeightsForTable;
 exports.getExtraFormatterSchema = getExtraFormatterSchema;
+exports.getFontKitFont = getFontKitFont;
 exports.hex2PrintingColor = hex2PrintingColor;
 exports.isEditable = isEditable;
+exports.makeElementPlainTextContentEditable = makeElementPlainTextContentEditable;
 exports.mapVerticalAlignToFlex = mapVerticalAlignToFlex;
 exports.pdfRender = pdfRender$1;
-exports.propPanel = propPanel$1;
+exports.propPanel = propPanel$2;
 exports.readFile = readFile;
 exports.rotatePoint = rotatePoint;
-exports.schema = schema;
-exports.substituteVariables = substituteVariables;
-exports.uiRender = uiRender$1;
+exports.schema = schema$1;
+exports.schema$1 = schema;
+exports.textSchema = textSchema;
+exports.uiRender = uiRender$2;