@campxdev/pdfme 1.2.1 → 1.3.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var helper = require('./helper-C2o2tpNj.js');
+var helper = require('./helper-DGH62Z2s.js');
 var fontkit = require('fontkit');
 var buffer = require('buffer');
 var colors = require('./colors-BeBcxfhb.js');
@@ -121,6 +121,36 @@ const LINE_END_FORBIDDEN_CHARS = [
     '«',
 ];
 
+/**
+ * Global font binary cache for URL-based fonts.
+ * Fonts are fetched on demand and cached so subsequent uses are instant.
+ */
+const _binaryCache = new Map();
+const _inflight = new Map();
+/**
+ * Fetch font binary data for a URL, using the global cache.
+ * Returns cached ArrayBuffer if available, otherwise fetches and caches.
+ * Deduplicates concurrent requests for the same URL.
+ */
+const fetchFontBinary = async (url) => {
+    const cached = _binaryCache.get(url);
+    if (cached)
+        return cached;
+    // Deduplicate: if a fetch for this URL is already in flight, reuse it
+    const inflight = _inflight.get(url);
+    if (inflight)
+        return inflight;
+    const promise = fetch(url)
+        .then((res) => res.arrayBuffer())
+        .then((buf) => {
+        _binaryCache.set(url, buf);
+        _inflight.delete(url);
+        return buf;
+    });
+    _inflight.set(url, promise);
+    return promise;
+};
+
 const getBrowserVerticalFontAdjustments = (fontKitFont, fontSize, lineHeight, verticalAlignment) => {
     const { ascent, descent, unitsPerEm } = fontKitFont;
     // Fonts have a designed line height that the browser renders when using `line-height: normal`
@@ -189,7 +219,7 @@ const getFontKitFont = async (fontName, font, _cache) => {
     if (typeof fontData === 'string') {
         const isUrl = fontData.startsWith('http') || fontData.startsWith('/') || fontData.startsWith('./');
         fontData = isUrl
-            ? await fetch(fontData).then((res) => res.arrayBuffer())
+            ? await fetchFontBinary(fontData)
             : helper.b64toUint8Array(fontData);
     }
     // Convert fontData to Buffer if it's not already a Buffer
@@ -1615,26 +1645,34 @@ const createSvgStr = (icon, attrs) => {
     return `<svg ${svgAttrString}>${elementsString}</svg>`;
 };
 
-const embedAndGetFontObj = async (arg) => {
-    const { pdfDoc, font, _cache } = arg;
-    if (_cache.has(pdfDoc)) {
-        return _cache.get(pdfDoc);
-    }
-    const fontValues = await Promise.all(Object.values(font).map(async (v) => {
-        let fontData = v.data;
-        if (typeof fontData === 'string') {
-            const isUrl = fontData.startsWith('http') || fontData.startsWith('/') || fontData.startsWith('./');
-            fontData = isUrl
-                ? await fetch(fontData).then((res) => res.arrayBuffer())
-                : helper.b64toUint8Array(fontData);
-        }
-        return pdfDoc.embedFont(fontData, {
-            subset: typeof v.subset === 'undefined' ? true : v.subset,
-        });
-    }));
-    const fontObj = Object.keys(font).reduce((acc, cur, i) => Object.assign(acc, { [cur]: fontValues[i] }), {});
-    _cache.set(pdfDoc, fontObj);
-    return fontObj;
+const embedPdfFont = async (pdfDoc, fontName, font, _cache) => {
+    const cacheKey = `embedPdfFont-${fontName}`;
+    if (_cache.has(cacheKey))
+        return _cache.get(cacheKey);
+    const fontEntry = font[fontName];
+    if (!fontEntry)
+        throw new Error(`Font "${fontName}" not found`);
+    let fontData = fontEntry.data;
+    if (typeof fontData === 'string') {
+        const isUrl = fontData.startsWith('http') || fontData.startsWith('/') || fontData.startsWith('./');
+        fontData = isUrl ? await fetchFontBinary(fontData) : helper.b64toUint8Array(fontData);
+    }
+    const useSubset = typeof fontEntry.subset === 'undefined' ? true : fontEntry.subset;
+    let pdfFont;
+    try {
+        pdfFont = await pdfDoc.embedFont(fontData, { subset: useSubset });
+    }
+    catch (err) {
+        // CFF/OpenType fonts fail subsetting (glyph._decode is not a function) — retry without subset
+        if (useSubset) {
+            pdfFont = await pdfDoc.embedFont(fontData, { subset: false });
+        }
+        else {
+            throw err;
+        }
+    }
+    _cache.set(cacheKey, pdfFont);
+    return pdfFont;
 };
 const getFontProp = ({ value, fontKitFont, schema, colorType, }) => {
     const fontSize = schema.dynamicFontSize
@@ -1656,18 +1694,12 @@ const pdfRender$1 = async (arg) => {
         return;
     const { font = helper.getDefaultFont(), colorType } = options;
     const resolvedFontName = resolveFontName(schema.fontName, schema.bold, schema.italic, font);
-    const [pdfFontObj, fontKitFont] = await Promise.all([
-        embedAndGetFontObj({
-            pdfDoc,
-            font,
-            _cache: _cache,
-        }),
+    const [pdfFontValue, fontKitFont] = await Promise.all([
+        embedPdfFont(pdfDoc, resolvedFontName, font, _cache),
         getFontKitFont(resolvedFontName, font, _cache),
     ]);
     const fontProp = getFontProp({ value, fontKitFont, schema, colorType });
     const { fontSize, color, alignment, verticalAlignment, lineHeight, characterSpacing } = fontProp;
-    const fontName = resolvedFontName;
-    const pdfFontValue = pdfFontObj && pdfFontObj[fontName];
     const pageHeight = page.getHeight();
     const { width, height, rotate, position: { x, y }, opacity, } = convertForPdfLayoutProps({ schema, pageHeight, applyRotateTranslate: false });
     const pivotPoint = { x: x + width / 2, y: pageHeight - helper.mm2pt(schema.position.y) - height / 2 };
@@ -1778,76 +1810,8 @@ 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);
-};
-
-const TextBoldIcon = createSvgStr(lucide.Bold);
-const TextItalicIcon = createSvgStr(lucide.Italic);
+createSvgStr(lucide.Bold);
+createSvgStr(lucide.Italic);
 const TextStrikethroughIcon = createSvgStr(lucide.Strikethrough);
 const TextUnderlineIcon = createSvgStr(lucide.Underline);
 const TextAlignLeftIcon = createSvgStr(lucide.AlignLeft);
@@ -1871,8 +1835,7 @@ exports.Formatter = void 0;
 })(exports.Formatter || (exports.Formatter = {}));
 function getExtraFormatterSchema(i18n) {
     const buttons = [
-        { key: exports.Formatter.BOLD, icon: TextBoldIcon, type: 'boolean' },
-        { key: exports.Formatter.ITALIC, icon: TextItalicIcon, type: 'boolean' },
+        // TODO: re-enable bold/italic controls when ready
         { key: exports.Formatter.STRIKETHROUGH, icon: TextStrikethroughIcon, type: 'boolean' },
         { key: exports.Formatter.UNDERLINE, icon: TextUnderlineIcon, type: 'boolean' },
         { key: exports.Formatter.ALIGNMENT, icon: TextAlignLeftIcon, type: 'select', value: DEFAULT_ALIGNMENT },
@@ -1930,120 +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 })) },
-                span: 12,
-            },
-            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,
@@ -2062,338 +2016,120 @@ const propPanel$1 = {
     },
 };
 
-/**
- * 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;
+const _loadedGoogleFonts = new Set();
+const ensureGoogleFontLoaded = (fontName, fontData) => {
+    if (!fontName || _loadedGoogleFonts.has(fontName) || !helper.isGoogleFont(fontName))
+        return;
+    if (!document?.fonts)
+        return;
+    _loadedGoogleFonts.add(fontName);
+    const fontFace = new FontFace(fontName, typeof fontData === 'string' ? `url(${fontData})` : fontData, { display: 'swap' });
+    fontFace.load().then(() => document.fonts.add(fontFace)).catch(() => { });
+};
+const replaceUnsupportedChars = (text, fontKitFont) => {
+    const charSupportCache = {};
+    const isCharSupported = (char) => {
+        if (char in charSupportCache) {
+            return charSupportCache[char];
         }
-        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 isSupported = fontKitFont.hasGlyphForCodePoint(char.codePointAt(0) || 0);
+        charSupportCache[char] = isSupported;
+        return isSupported;
     };
+    const segments = text.split(/(\r\n|\n|\r)/);
+    return segments
+        .map((segment) => {
+        if (/\r\n|\n|\r/.test(segment)) {
+            return segment;
+        }
+        return segment
+            .split('')
+            .map((char) => {
+            if (/\s/.test(char) || char.charCodeAt(0) < 32) {
+                return char;
+            }
+            return isCharSupported(char) ? char : '〿';
+        })
+            .join('');
+    })
+        .join('');
 };
-
-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';
+const uiRender$2 = async (arg) => {
+    const { value, schema, mode, onChange, stopEditing, tabIndex, placeholder, options, _cache } = arg;
+    const effectivePlaceholder = placeholder || 'Type Something...';
+    const usePlaceholder = isEditable(mode, schema) && !value;
+    const getText = (element) => {
+        let text = element.innerText;
+        if (text.endsWith('\n')) {
+            // contenteditable adds additional newline char retrieved with innerText
+            text = text.slice(0, -1);
+        }
+        return text;
+    };
+    const font = options?.font || helper.getDefaultFont();
+    const resolvedFontName = resolveFontName(schema.fontName, schema.bold, schema.italic, font);
+    // Lazily load Google Font for CSS rendering if needed
+    if (resolvedFontName && font[resolvedFontName]) {
+        ensureGoogleFontLoaded(resolvedFontName, font[resolvedFontName].data);
+    }
+    // Show a subtle loading state while the font binary is being fetched
+    const isLoading = helper.isGoogleFont(resolvedFontName);
+    if (isLoading) {
+        arg.rootElement.style.opacity = '0.4';
+        arg.rootElement.style.transition = 'opacity 0.15s ease-out';
+    }
+    const fontKitFont = await getFontKitFont(resolvedFontName, font, _cache);
+    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
+        void arg.rootElement.offsetHeight;
+        arg.rootElement.style.opacity = '1';
+    }
+    const processedText = replaceUnsupportedChars(value, fontKitFont);
+    if (!isEditable(mode, schema)) {
+        // Read-only mode
+        textBlock.innerHTML = processedText
+            .split('')
+            .map((l, i) => `<span style="letter-spacing:${String(value).length === i + 1 ? 0 : 'inherit'};">${l}</span>`)
+            .join('');
         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;
-};
-
-const replaceUnsupportedChars = (text, fontKitFont) => {
-    const charSupportCache = {};
-    const isCharSupported = (char) => {
-        if (char in charSupportCache) {
-            return charSupportCache[char];
-        }
-        const isSupported = fontKitFont.hasGlyphForCodePoint(char.codePointAt(0) || 0);
-        charSupportCache[char] = isSupported;
-        return isSupported;
-    };
-    const segments = text.split(/(\r\n|\n|\r)/);
-    return segments
-        .map((segment) => {
-        if (/\r\n|\n|\r/.test(segment)) {
-            return segment;
-        }
-        return segment
-            .split('')
-            .map((char) => {
-            if (/\s/.test(char) || char.charCodeAt(0) < 32) {
-                return char;
-            }
-            return isCharSupported(char) ? char : '〿';
-        })
-            .join('');
-    })
-        .join('');
-};
-const uiRender$1 = async (arg) => {
-    const { value, schema, mode, onChange, stopEditing, tabIndex, placeholder, options, _cache } = arg;
-    const usePlaceholder = isEditable(mode, schema) && placeholder && !value;
-    const getText = (element) => {
-        let text = element.innerText;
-        if (text.endsWith('\n')) {
-            // contenteditable adds additional newline char retrieved with innerText
-            text = text.slice(0, -1);
-        }
-        return text;
-    };
-    const font = options?.font || helper.getDefaultFont();
-    const resolvedFontName = resolveFontName(schema.fontName, schema.bold, schema.italic, font);
-    const fontKitFont = await getFontKitFont(resolvedFontName, font, _cache);
-    const textBlock = buildStyledTextContainer(arg, fontKitFont, usePlaceholder ? placeholder : value);
-    const processedText = replaceUnsupportedChars(value, fontKitFont);
-    if (!isEditable(mode, schema)) {
-        // Read-only mode
-        textBlock.innerHTML = processedText
-            .split('')
-            .map((l, i) => `<span style="letter-spacing:${String(value).length === i + 1 ? 0 : 'inherit'};">${l}</span>`)
-            .join('');
-        return;
-    }
-    makeElementPlainTextContentEditable(textBlock);
-    textBlock.tabIndex = tabIndex || 0;
-    textBlock.innerText = mode === 'designer' ? value : processedText;
-    textBlock.addEventListener('blur', (e) => {
-        if (onChange)
-            onChange({ key: 'content', value: getText(e.target) });
-        if (stopEditing)
-            stopEditing();
-    });
-    if (schema.dynamicFontSize) {
-        let dynamicFontSize = undefined;
-        textBlock.addEventListener('keyup', () => {
-            setTimeout(() => {
-                // Use a regular function instead of an async one since we don't need await
-                (() => {
-                    if (!textBlock.textContent)
-                        return;
-                    dynamicFontSize = calculateDynamicFontSize({
-                        textSchema: schema,
-                        fontKitFont,
-                        value: getText(textBlock),
-                        startingFontSize: dynamicFontSize,
-                    });
-                    textBlock.style.fontSize = `${dynamicFontSize}pt`;
-                    const { topAdj: newTopAdj, bottomAdj: newBottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE, schema.lineHeight ?? DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
-                    textBlock.style.paddingTop = `${newTopAdj}px`;
-                    textBlock.style.marginBottom = `${newBottomAdj}px`;
-                })();
-            }, 0);
-        });
+    makeElementPlainTextContentEditable(textBlock);
+    textBlock.tabIndex = tabIndex || 0;
+    textBlock.innerText = mode === 'designer' ? value : processedText;
+    textBlock.addEventListener('blur', (e) => {
+        if (onChange)
+            onChange({ key: 'content', value: getText(e.target) });
+        if (stopEditing)
+            stopEditing();
+    });
+    if (schema.dynamicFontSize) {
+        let dynamicFontSize = undefined;
+        textBlock.addEventListener('keyup', () => {
+            setTimeout(() => {
+                // Use a regular function instead of an async one since we don't need await
+                (() => {
+                    if (!textBlock.textContent)
+                        return;
+                    dynamicFontSize = calculateDynamicFontSize({
+                        textSchema: schema,
+                        fontKitFont,
+                        value: getText(textBlock),
+                        startingFontSize: dynamicFontSize,
+                    });
+                    textBlock.style.fontSize = `${dynamicFontSize}pt`;
+                    const { topAdj: newTopAdj, bottomAdj: newBottomAdj } = getBrowserVerticalFontAdjustments(fontKitFont, dynamicFontSize ?? schema.fontSize ?? DEFAULT_FONT_SIZE, schema.lineHeight ?? DEFAULT_LINE_HEIGHT, schema.verticalAlignment ?? DEFAULT_VERTICAL_ALIGNMENT);
+                    textBlock.style.paddingTop = `${newTopAdj}px`;
+                    textBlock.style.marginBottom = `${newBottomAdj}px`;
+                })();
+            }, 0);
+        });
     }
     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;
             }
@@ -2523,11 +2259,301 @@ const getBackgroundColor = (value, schema) => {
     return schema.backgroundColor;
 };
 
-const uiRender = 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] 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 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;
+        }
+    }
+    return added;
+};
+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);
+        }
+    }
+    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;
+            }
+        }
+    }
+    for (const varName of Object.keys(variables)) {
+        if (!allRoots.has(varName)) {
+            delete variables[varName];
+            changed = true;
+        }
+    }
+    return changed;
+};
+
+/** 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
@@ -2537,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,
@@ -2559,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 });
                     }
@@ -2748,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' ||
@@ -2770,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 builtInPlugins = { Text: schema };
+const textSchema = {
+    pdf: pdfRender$1,
+    ui: uiRender$2,
+    propPanel: propPanel$2,
+    icon: createSvgStr(lucide.TextCursorInput),
+};
+
+const builtInPlugins = {
+    Text: textSchema,
+    'Dynamic Text': schema,
+    'Rich Text': schema$1,
+};
 
 exports.DEFAULT_ALIGNMENT = DEFAULT_ALIGNMENT;
 exports.DEFAULT_CHARACTER_SPACING = DEFAULT_CHARACTER_SPACING;
@@ -2789,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;
@@ -2802,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;