@campxdev/pdfme 1.2.1 → 1.3.0

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

@@ -1,9 +1,9 @@
-import { q as getFallbackFontName, p as getDefaultFont, D as DEFAULT_FONT_NAME, c as b64toUint8Array, w as pt2px, v as pt2mm, u as mm2pt, s as isBlankPdf, l as cloneDeep, t as isHexValid } from './helper-D7XF1bxK.js';
+import { r as getFallbackFontName, q as getDefaultFont, D as DEFAULT_FONT_NAME, c as b64toUint8Array, A as pt2px, y as mm2pt, z as pt2mm, v as isBlankPdf, l as cloneDeep, x as isHexValid, w as isGoogleFont } from './helper-DSxGxZ0j.js';
 import * as fontkit from 'fontkit';
 import { Buffer } from 'buffer';
 import { d as degrees, c as cmyk, r as rgb, a as degreesToRadians } from './colors-jzbEzNi4.js';
 import { r as replacePlaceholders } from './expression-B-F1KCfk.js';
-import { Bold, Italic, Strikethrough, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify, ArrowUpToLine, ArrowDownToLine, Type } from 'lucide';
+import { Strikethrough, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify, ArrowUpToLine, ArrowDownToLine, Bold, Italic, FileText, BetweenHorizontalStart, TextCursorInput } from 'lucide';
 
 const DEFAULT_FONT_SIZE = 13;
 const ALIGN_LEFT = 'left';
@@ -99,6 +99,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`
@@ -167,7 +197,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)
             : b64toUint8Array(fontData);
     }
     // Convert fontData to Buffer if it's not already a Buffer
@@ -1593,26 +1623,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())
-                : 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) : 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
@@ -1634,18 +1672,12 @@ const pdfRender$1 = async (arg) => {
         return;
     const { font = 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 - mm2pt(schema.position.y) - height / 2 };
@@ -1756,76 +1788,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 = 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(Bold);
-const TextItalicIcon = createSvgStr(Italic);
+createSvgStr(Bold);
+createSvgStr(Italic);
 const TextStrikethroughIcon = createSvgStr(Strikethrough);
 const TextUnderlineIcon = createSvgStr(Underline);
 const TextAlignLeftIcon = createSvgStr(AlignLeft);
@@ -1849,8 +1813,7 @@ var Formatter;
 })(Formatter || (Formatter = {}));
 function getExtraFormatterSchema(i18n) {
     const buttons = [
-        { key: Formatter.BOLD, icon: TextBoldIcon, type: 'boolean' },
-        { key: Formatter.ITALIC, icon: TextItalicIcon, type: 'boolean' },
+        // TODO: re-enable bold/italic controls when ready
         { key: Formatter.STRIKETHROUGH, icon: TextStrikethroughIcon, type: 'boolean' },
         { key: Formatter.UNDERLINE, icon: TextUnderlineIcon, type: 'boolean' },
         { key: Formatter.ALIGNMENT, icon: TextAlignLeftIcon, type: 'select', value: DEFAULT_ALIGNMENT },
@@ -1908,120 +1871,111 @@ const UseDynamicFontSize = (props) => {
     label.appendChild(span);
     rootElement.appendChild(label);
 };
-const propPanel$1 = {
+const propPanel$2 = {
     schema: ({ options, activeSchema, i18n }) => {
         const font = options.font || { [DEFAULT_FONT_NAME]: { data: '', fallback: true } };
         const fontNames = Object.keys(font);
         const fallbackFontName = getFallbackFontName(font);
         const enableDynamicFont = Boolean(activeSchema?.dynamicFontSize);
-        const textSchema = {
-            fontName: {
-                title: i18n('schemas.text.fontName'),
-                type: 'string',
-                widget: 'select',
-                default: fallbackFontName,
-                placeholder: fallbackFontName,
-                props: { options: fontNames.map((name) => ({ label: name, value: name })) },
-                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,
@@ -2040,338 +1994,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) || !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 || 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 = 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 || 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;
             }
@@ -2501,11 +2237,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 = 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
@@ -2515,8 +2541,8 @@ const uiRender = async (arg) => {
         await formUiRender(arg);
         return;
     }
-    await uiRender$1({
-        value: isEditable(mode, schema) ? text : substituteVariables(text, value, pageContext),
+    await uiRender$2({
+        value: isEditable(mode, schema) ? text : formatTemplateDisplay$1(text),
         schema,
         mode: mode === 'form' ? 'viewer' : mode, // if no variables for form it's just a viewer
         rootElement,
@@ -2537,11 +2563,34 @@ const uiRender = async (arg) => {
         throw new Error('Text block not found. Ensure the text block has an id of "text-" + schema.id');
     }
     if (mode === 'designer') {
-        textBlock.addEventListener('keyup', (event) => {
+        // Show formatted display initially: {value} → {{ value }}
+        if (text) {
+            textBlock.textContent = formatTemplateDisplay$1(text);
+        }
+        textBlock.addEventListener('focus', () => {
+            // Switch to raw template for editing
+            textBlock.textContent = text;
+            const sel = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(textBlock);
+            range.collapse(false);
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+        });
+        textBlock.addEventListener('blur', () => {
             text = textBlock.textContent || '';
+            if (onChange) {
+                onChange({ key: 'text', value: text });
+            }
+            // Show formatted display again
+            textBlock.textContent = formatTemplateDisplay$1(text);
+        });
+        textBlock.addEventListener('keyup', (event) => {
+            const currentText = textBlock.textContent || '';
             if (keyPressShouldBeChecked(event)) {
-                const newNumVariables = countUniqueVariableNames(text);
+                const newNumVariables = countUniqueVariableNames(currentText);
                 if (numVariables !== newNumVariables) {
+                    text = currentText;
                     if (onChange) {
                         onChange({ key: 'text', value: text });
                     }
@@ -2726,7 +2775,6 @@ const countUniqueVariableNames = (content) => {
 /**
  * An optimisation to try to minimise jank while typing.
  * Only check whether variables were modified based on certain key presses.
- * Regex would otherwise be performed on every key press (which isn't terrible, but this code helps).
  */
 const keyPressShouldBeChecked = (event) => {
     if (event.key === 'ArrowUp' ||
@@ -2748,14 +2796,178 @@ const keyPressShouldBeChecked = (event) => {
     return true;
 };
 
+const schema$1 = {
+    pdf: pdfRender,
+    ui: uiRender$1,
+    propPanel: propPanel$1,
+    icon: createSvgStr(FileText),
+    uninterruptedEditMode: true,
+};
+
+/** Replaces any existing {var} in the template with {newVar}, or appends if none exists */
+const replaceOrAppendVariable = (currentText, varName) => {
+    // Replace any existing {identifier} block with the new variable
+    const replaced = currentText.replace(/\{[a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*\}/g, `{${varName}}`);
+    if (replaced !== currentText)
+        return replaced;
+    // No existing variable — append with a space separator
+    return currentText ? `${currentText} {${varName}}` : `{${varName}}`;
+};
+const singleVariablePickerWidget = (props) => {
+    const { rootElement, changeSchemas, activeSchema, options } = props;
+    const schema = activeSchema;
+    const variables = options.variables?.textVariables ?? [];
+    if (variables.length === 0)
+        return;
+    const container = document.createElement('div');
+    container.style.cssText = 'display:flex;gap:6px;align-items:center;margin-bottom:10px;';
+    const label = document.createElement('span');
+    label.textContent = 'Variable:';
+    label.style.cssText = 'font-size:12px;color:#666;white-space:nowrap;';
+    const select = document.createElement('select');
+    select.style.cssText =
+        'flex:1;height:30px;border:1px solid #E0E0E0;border-radius:4px;padding:0 8px;font-size:13px;background:#fff;cursor:pointer;';
+    const blank = document.createElement('option');
+    blank.value = '';
+    blank.textContent = '— pick variable —';
+    select.appendChild(blank);
+    for (const v of variables) {
+        const opt = document.createElement('option');
+        opt.value = v.value;
+        opt.textContent = v.label;
+        select.appendChild(opt);
+    }
+    select.onchange = (e) => {
+        const varName = e.target.value;
+        if (!varName)
+            return;
+        const current = String(schema.text ?? '');
+        const next = replaceOrAppendVariable(current, varName);
+        changeSchemas([{ key: 'text', value: next, schemaId: activeSchema.id }]);
+        select.value = '';
+    };
+    container.appendChild(label);
+    container.appendChild(select);
+    rootElement.appendChild(container);
+};
+const mapDynamicVariables = (props) => {
+    const { rootElement, changeSchemas, activeSchema } = props;
+    const svtSchema = activeSchema;
+    const text = svtSchema.text ?? '';
+    if (!text) {
+        rootElement.style.display = 'none';
+        return;
+    }
+    // Extract all simple variable references from the template
+    const varMatches = [...text.matchAll(/\{([a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*)\}/g)].map(m => m[1]);
+    // Keep only the first unique variable (enforce single-variable restriction)
+    const uniqueVars = [...new Set(varMatches)];
+    const variable = uniqueVars[0];
+    const varNames = variable ? [variable] : [];
+    const variables = {};
+    if (variable) {
+        const existing = JSON.parse(svtSchema.content && svtSchema.content !== '' ? svtSchema.content : '{}');
+        const existingVal = existing[variable];
+        const isOldFormat = typeof existingVal === 'string' && (/^[A-Z][A-Z0-9_]*$/.test(existingVal) || /^\{\{.*\}\}$/.test(existingVal));
+        const isStaleObject = typeof existingVal === 'string' && (() => {
+            try {
+                const p = JSON.parse(existingVal);
+                return typeof p === 'object' && p !== null;
+            }
+            catch {
+                return false;
+            }
+        })();
+        variables[variable] = (!existingVal || isOldFormat || isStaleObject) ? variable.replace(/\./g, ' ') : existingVal;
+    }
+    const content = varNames.length > 0 ? JSON.stringify(variables) : '';
+    const changed = JSON.stringify(svtSchema.variables ?? []) !== JSON.stringify(varNames) ||
+        (svtSchema.content ?? '') !== content;
+    if (changed) {
+        changeSchemas([
+            { key: 'content', value: content, schemaId: activeSchema.id },
+            { key: 'variables', value: varNames, schemaId: activeSchema.id },
+            { key: 'readOnly', value: varNames.length === 0, schemaId: activeSchema.id },
+        ]);
+    }
+    rootElement.style.display = 'none';
+};
+const propPanel = {
+    schema: (propPanelProps) => {
+        if (typeof propPanel$1.schema !== 'function') {
+            throw new Error('richText propPanel schema is not a function');
+        }
+        const parentSchema = propPanel$1.schema(propPanelProps);
+        // Strip out richText-specific structural keys; we'll re-add our own versions
+        const { insertVariablePicker: _ip, '----': _div, dynamicVariables: _dv, ...textFields } = parentSchema;
+        return {
+            insertVariablePicker: {
+                type: 'void',
+                widget: 'singleVariablePickerWidget',
+                bind: false,
+                span: 24,
+            },
+            '----': { type: 'void', widget: 'Divider' },
+            ...textFields,
+            dynamicVariables: {
+                type: 'object',
+                widget: 'mapDynamicVariables',
+                bind: false,
+                span: 0,
+            },
+        };
+    },
+    widgets: {
+        ...(propPanel$1.widgets || {}),
+        singleVariablePickerWidget,
+        mapDynamicVariables,
+    },
+    defaultSchema: {
+        ...propPanel$1.defaultSchema,
+        type: 'singleVariableText',
+        text: '',
+        content: '',
+        height: 7,
+        variables: [],
+    },
+};
+
+/** Format {expr} → {{ expr with dots as spaces }} */
+const formatTemplateDisplay = (text) => text.replace(/\{([^{}]+)\}/g, (_, expr) => '{{ ' + expr.trim().replace(/\./g, ' ') + ' }}');
+const uiRender = async (arg) => {
+    const { mode, schema, options, _cache } = arg;
+    if (mode === 'designer') {
+        // ReadOnly preview — show {{ variable }} formatted display
+        const text = schema.text ?? '';
+        const displayText = text ? formatTemplateDisplay(text) : '';
+        const font = options?.font || getDefaultFont();
+        const fontKitFont = await getFontKitFont(schema.fontName, font, _cache);
+        const textBlock = buildStyledTextContainer(arg, fontKitFont, displayText);
+        textBlock.textContent = displayText;
+        textBlock.style.cursor = 'default';
+        return;
+    }
+    // Viewer/form modes: delegate to richText render
+    await uiRender$1(arg);
+};
 const schema = {
     pdf: pdfRender,
     ui: uiRender,
     propPanel,
-    icon: createSvgStr(Type),
-    uninterruptedEditMode: true,
+    icon: createSvgStr(BetweenHorizontalStart),
 };
 
-const builtInPlugins = { Text: schema };
+const textSchema = {
+    pdf: pdfRender$1,
+    ui: uiRender$2,
+    propPanel: propPanel$2,
+    icon: createSvgStr(TextCursorInput),
+};
+
+const builtInPlugins = {
+    Text: textSchema,
+    'Dynamic Text': schema,
+    'Rich Text': schema$1,
+};
 
-export { getExtraFormatterSchema as A, DEFAULT_LINE_HEIGHT as B, mapVerticalAlignToFlex as C, DEFAULT_OPACITY as D, Formatter as F, HEX_COLOR_PATTERN as H, VERTICAL_ALIGN_MIDDLE as V, addAlphaToHex as a, builtInPlugins as b, createSvgStr as c, convertForPdfLayoutProps as d, rotatePoint as e, getDefaultCellStyles as f, getDynamicHeightsForTable as g, hex2PrintingColor as h, isEditable as i, substituteVariables as j, createErrorElm as k, createInsertVariableWidget as l, propPanel$1 as m, getBodyWithRange as n, createSingleTable as o, pdfRender$1 as p, getBody as q, readFile as r, schema as s, getColumnStylesPropPanelSchema as t, uiRender$1 as u, getCellPropPanelSchema as v, DEFAULT_FONT_COLOR as w, DEFAULT_CHARACTER_SPACING as x, DEFAULT_FONT_SIZE as y, DEFAULT_ALIGNMENT as z };
+export { DEFAULT_CHARACTER_SPACING as A, DEFAULT_FONT_SIZE as B, DEFAULT_ALIGNMENT as C, DEFAULT_OPACITY as D, getExtraFormatterSchema as E, Formatter as F, DEFAULT_LINE_HEIGHT as G, HEX_COLOR_PATTERN as H, mapVerticalAlignToFlex as I, VERTICAL_ALIGN_MIDDLE as V, schema as a, builtInPlugins as b, createSvgStr as c, addAlphaToHex as d, convertForPdfLayoutProps as e, rotatePoint as f, getDynamicHeightsForTable as g, hex2PrintingColor as h, isEditable as i, getDefaultCellStyles as j, createErrorElm as k, propPanel$2 as l, getFontKitFont as m, buildStyledTextContainer as n, makeElementPlainTextContentEditable as o, pdfRender$1 as p, getBodyWithRange as q, readFile as r, schema$1 as s, textSchema as t, uiRender$2 as u, createSingleTable as v, getBody as w, getColumnStylesPropPanelSchema as x, getCellPropPanelSchema as y, DEFAULT_FONT_COLOR as z };