feat: add rich fields, expression engine updates, and mobile builder UX

- Introduce new rich field types (Display, Signature, Diagram, DrawingPad) under fields/rich
- Register and export rich fields via @msheet/fields and builder defaults
- Add test-rich-content-schema.json for validation and development

- Enhance expression engine:
  - Support identifier tokens as field references in parsePrimary
  - Export evaluateExpression from core
  - Update condition tests to reflect new behavior

- Refactor core types and registry:
  - Simplify and consolidate field definition types
  - Clean up registry registration logic
  - Minor form-store adjustments
  - Update related tests

- Improve builder mobile UX:
  - Add MobileBottomDrawer for field editing
  - Responsive layout and sticky "Add field" control
  - Fix header layering (z-index)
  - Improve ToolPanel status and actions
  - Update FieldWrapper mobile edit behavior
  - Minor LogicEditor fix

- Wire rich field types into builder registration

Overall: introduces rich content field support, expands expression capabilities,
and significantly improves mobile builder experience

Author: lattln

apps/builder/public/test-rich-content-schema.json

@@ -0,0 +1,227 @@
+{
+  "schemaType": "mieforms-v1.0",
+  "id": "rich-content-test-schema",
+  "title": "Rich Content Fields — Comprehensive Test",
+  "fields": [
+
+    {
+      "id": "intro-html",
+      "fieldType": "html",
+      "htmlContent": "<h2>Rich Content Fields Test</h2><p>This form exercises all five rich content field types:</p><ul><li><strong>HTML</strong> — arbitrary HTML rendered in a sandboxed iframe</li><li><strong>Image</strong> — upload / display an image with caption</li><li><strong>Diagram</strong> — freehand drawing pad with a background hint</li><li><strong>Signature</strong> — signature capture pad</li><li><strong>Display</strong> — computed read-only text with live field interpolation and markdown formatting</li></ul><p>Fill in the inputs below to observe the Display field update in real-time.</p>",
+      "iframeHeight": 230
+    },
+
+    {
+      "id": "section-inputs",
+      "fieldType": "section",
+      "title": "Inputs (drive the Display field)",
+      "fields": [
+
+        {
+          "id": "first-name",
+          "fieldType": "text",
+          "question": "First name",
+          "inputType": "string",
+          "required": true
+        },
+
+        {
+          "id": "last-name",
+          "fieldType": "text",
+          "question": "Last name",
+          "inputType": "string",
+          "required": true
+        },
+
+        {
+          "id": "weight-kg",
+          "fieldType": "text",
+          "question": "Weight (kg)",
+          "inputType": "number",
+          "required": true,
+          "unit": "kg"
+        },
+
+        {
+          "id": "height-cm",
+          "fieldType": "text",
+          "question": "Height (cm)",
+          "inputType": "number",
+          "required": true,
+          "unit": "cm"
+        },
+
+        {
+          "id": "score-a",
+          "fieldType": "slider",
+          "question": "Score A (1–10)",
+          "required": true,
+          "options": [
+            { "id": "sa-1",  "value": "1",  "text": "1"  },
+            { "id": "sa-2",  "value": "2",  "text": "2"  },
+            { "id": "sa-3",  "value": "3",  "text": "3"  },
+            { "id": "sa-4",  "value": "4",  "text": "4"  },
+            { "id": "sa-5",  "value": "5",  "text": "5"  },
+            { "id": "sa-6",  "value": "6",  "text": "6"  },
+            { "id": "sa-7",  "value": "7",  "text": "7"  },
+            { "id": "sa-8",  "value": "8",  "text": "8"  },
+            { "id": "sa-9",  "value": "9",  "text": "9"  },
+            { "id": "sa-10", "value": "10", "text": "10" }
+          ]
+        },
+
+        {
+          "id": "score-b",
+          "fieldType": "slider",
+          "question": "Score B (1–10)",
+          "required": true,
+          "options": [
+            { "id": "sb-1",  "value": "1",  "text": "1"  },
+            { "id": "sb-2",  "value": "2",  "text": "2"  },
+            { "id": "sb-3",  "value": "3",  "text": "3"  },
+            { "id": "sb-4",  "value": "4",  "text": "4"  },
+            { "id": "sb-5",  "value": "5",  "text": "5"  },
+            { "id": "sb-6",  "value": "6",  "text": "6"  },
+            { "id": "sb-7",  "value": "7",  "text": "7"  },
+            { "id": "sb-8",  "value": "8",  "text": "8"  },
+            { "id": "sb-9",  "value": "9",  "text": "9"  },
+            { "id": "sb-10", "value": "10", "text": "10" }
+          ]
+        }
+
+      ]
+    },
+
+    {
+      "id": "section-display",
+      "fieldType": "section",
+      "title": "Display Field Tests",
+      "fields": [
+
+        {
+          "id": "display-simple-ref",
+          "fieldType": "display",
+          "question": "Simple field reference — {field-id}",
+          "content": "Hello, {first-name} {last-name}!\n\nYour first name is *{first-name}* and your last name is *{last-name}*."
+        },
+
+        {
+          "id": "display-arithmetic",
+          "fieldType": "display",
+          "question": "Arithmetic expressions — <expression>",
+          "content": "# Score Summary\n\n- Score A: {score-a}\n- Score B: {score-b}\n- Combined: <{score-a} + {score-b}>\n- Average: <({score-a} + {score-b}) / 2>\n- Product: <{score-a} * {score-b}>"
+        },
+
+        {
+          "id": "display-bmi",
+          "fieldType": "display",
+          "question": "Multi-step calculation — BMI",
+          "content": "## BMI Calculator\n\n- Weight: {weight-kg} kg\n- Height: {height-cm} cm\n- BMI: <{weight-kg} / (({height-cm} / 100) * ({height-cm} / 100))>"
+        },
+
+        {
+          "id": "display-markdown",
+          "fieldType": "display",
+          "question": "Markdown formatting — bold, italic, underline, strike, bullets, headings",
+          "content": "# Heading 1\n## Heading 2\n### Heading 3\n\n*bold text* and -italic text- and _underlined text_ and ~strikethrough text~\n\n- Bullet one\n- Bullet two\n- Bullet three: score is {score-a}"
+        },
+
+        {
+          "id": "display-conditional-shown",
+          "fieldType": "display",
+          "question": "Conditionally visible — appears when Score A > 7",
+          "content": "## High Score Alert\n\n*{first-name}* scored *{score-a}* on Score A — that's above the threshold of 7!\n\nCombined total: <{score-a} + {score-b}>",
+          "rules": [
+            {
+              "effect": "visible",
+              "logic": "AND",
+              "conditions": [
+                { "conditionType": "expression", "expression": "{score-a} > 7" }
+              ]
+            }
+          ]
+        },
+
+        {
+          "id": "display-conditional-hidden",
+          "fieldType": "display",
+          "question": "Conditionally visible — appears when Score A <= 7",
+          "content": "Score A is {score-a} — under the threshold. Try increasing it above 7 to swap these two display fields.",
+          "rules": [
+            {
+              "effect": "visible",
+              "logic": "AND",
+              "conditions": [
+                { "conditionType": "expression", "expression": "{score-a} <= 7" }
+              ]
+            }
+          ]
+        }
+
+      ]
+    },
+
+    {
+      "id": "section-html",
+      "fieldType": "section",
+      "title": "HTML Field Tests",
+      "fields": [
+
+        {
+          "id": "html-basic",
+          "fieldType": "html",
+          "htmlContent": "<h3>Basic HTML rendering</h3><p>This field renders arbitrary HTML in a <code>sandbox=\"\"</code> iframe.</p><p>Supported content: headings, paragraphs, lists, tables, images, links, inline styles.</p>",
+          "iframeHeight": 140
+        },
+
+        {
+          "id": "html-table",
+          "fieldType": "html",
+          "htmlContent": "<h3>Table example</h3><table style=\"border-collapse:collapse;width:100%\"><thead><tr style=\"background:#f3f4f6\"><th style=\"padding:8px 12px;border:1px solid #e5e7eb;text-align:left\">Item</th><th style=\"padding:8px 12px;border:1px solid #e5e7eb;text-align:left\">Value</th></tr></thead><tbody><tr><td style=\"padding:8px 12px;border:1px solid #e5e7eb\">Alpha</td><td style=\"padding:8px 12px;border:1px solid #e5e7eb\">100</td></tr><tr><td style=\"padding:8px 12px;border:1px solid #e5e7eb\">Beta</td><td style=\"padding:8px 12px;border:1px solid #e5e7eb\">200</td></tr><tr><td style=\"padding:8px 12px;border:1px solid #e5e7eb\">Gamma</td><td style=\"padding:8px 12px;border:1px solid #e5e7eb\">300</td></tr></tbody></table>",
+          "iframeHeight": 180
+        },
+
+        {
+          "id": "html-xss-probe",
+          "fieldType": "html",
+          "htmlContent": "<!-- XSS / injection test vectors — all must be inert inside sandbox=\"\" -->\n<script>document.title='XSS';<\/script>\n<img src=\"x\" onerror=\"document.title='XSS'\" />\n<a href=\"javascript:alert('XSS')\">Click me (href must be inert)</a>\n<iframe src=\"https://example.com\"></iframe>\n<p><strong>Expected:</strong> All vectors above are inert. Page title unchanged, no alert fires, no navigation.</p>",
+          "iframeHeight": 120
+        }
+
+      ]
+    },
+
+    {
+      "id": "section-drawing",
+      "fieldType": "section",
+      "title": "Drawing Fields (Image / Diagram / Signature)",
+      "fields": [
+
+        {
+          "id": "test-image",
+          "fieldType": "image",
+          "question": "Image field — upload a file or paste a URL",
+          "altText": "Test image upload",
+          "caption": "Supports PNG, JPG, GIF, WebP. Stored as a data URL in the response."
+        },
+
+        {
+          "id": "test-diagram",
+          "fieldType": "diagram",
+          "question": "Diagram field — freehand drawing pad",
+          "padPlaceholder": "Draw anything here — the pad records normalised strokes"
+        },
+
+        {
+          "id": "test-signature",
+          "fieldType": "signature",
+          "question": "Signature field — sign your name",
+          "padPlaceholder": "Sign here",
+          "required": true
+        }
+
+      ]
+    }
+
+  ]
+}

packages/builder/src/lib/MsheetBuilder.tsx

@@ -12,6 +12,7 @@ import { ToolPanel } from './components/ToolPanel.js';
 import { EditPanel } from './components/edit-panel/EditPanel.js';
 import { BuilderHeader } from './components/BuilderHeader.js';
 import { CodeView } from './components/CodeView.js';
+import { PlusIcon } from './icons.js';
 
 // ---------------------------------------------------------------------------
 // Contexts
@@ -57,6 +58,47 @@ export interface MsheetBuilderProps {
   children?: React.ReactNode;
 }
 
+interface MobileBottomDrawerProps {
+  title: string;
+  open: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+function MobileBottomDrawer({
+  title,
+  open,
+  onClose,
+  children,
+}: MobileBottomDrawerProps) {
+  if (!open) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="ms:lg:hidden ms:fixed ms:inset-0 ms:z-40 ms:bg-msoverlay ms:border-0"
+        onClick={onClose}
+        aria-label={`Close ${title} drawer`}
+      />
+      <div className="ms:lg:hidden ms:fixed ms:left-0 ms:right-0 ms:bottom-0 ms:z-50 ms:h-[50dvh] ms:bg-mssurface ms:border-t ms:border-msborder ms:rounded-t-2xl ms:shadow-2xl ms:overflow-hidden">
+        <div className="ms:flex ms:items-center ms:justify-between ms:px-4 ms:py-2 ms:border-b ms:border-msborder">
+          <span className="ms:text-sm ms:font-medium ms:text-mstext">{title}</span>
+          <button
+            type="button"
+            onClick={onClose}
+            className="ms:px-2 ms:py-1 ms:bg-transparent ms:text-mstextmuted ms:border-0 ms:outline-none ms:focus:outline-none"
+            aria-label={`Close ${title} drawer`}
+          >
+            Close
+          </button>
+        </div>
+        <div className="ms:h-[calc(50dvh-45px)] ms:overflow-y-auto">{children}</div>
+      </div>
+    </>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -90,6 +132,30 @@ export function MsheetBuilder({
     () => ui.getState().mode,
     () => ui.getState().mode
   );
+  const selectedFieldId = useSyncExternalStore(
+    (cb) => ui.subscribe(cb),
+    () => ui.getState().selectedFieldId,
+    () => ui.getState().selectedFieldId
+  );
+  const editModalOpen = useSyncExternalStore(
+    (cb) => ui.subscribe(cb),
+    () => ui.getState().editModalOpen,
+    () => ui.getState().editModalOpen
+  );
+  const [toolsModalOpen, setToolsModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (mode !== 'build') {
+      setToolsModalOpen(false);
+      ui.getState().setEditModalOpen(false);
+    }
+  }, [mode, ui]);
+
+  React.useEffect(() => {
+    if (!selectedFieldId && editModalOpen) {
+      ui.getState().setEditModalOpen(false);
+    }
+  }, [selectedFieldId, editModalOpen, ui]);
 
   // Subscribe to form changes and forward to onChange.
   React.useEffect(() => {
@@ -107,21 +173,48 @@ export function MsheetBuilder({
             className={`ms-builder-root ms:flex ms:h-full ms:flex-1 ms:min-h-0 ms:max-h-full ms:w-full ms:min-w-0 ms:max-w-full ms:flex-col ms:gap-2 
                         ms:overflow-x-hidden ms:bg-msbackground ms:text-mstext ${className}`.trim()}
           >
-            <div className="ms:sticky ms:top-0 ms:z-999 ms:bg-msbackground">
+            <div className="ms:sticky ms:top-0 ms:z-50 ms:bg-msbackground">
               <BuilderHeader form={form} ui={ui} />
             </div>
             {children}
             {mode === 'build' && (
-              <div className="builder-layout ms:grid ms:flex-1 ms:min-h-0 ms:min-w-0 ms:grid-cols-[18rem_minmax(0,1fr)_340px] ms:gap-3 ms:overflow-hidden">
-                <aside className="panel-tools-wrap panel-tools ms:flex ms:self-start ms:min-h-0 ms:max-h-[calc(100dvh-12.5rem)] ms:overflow-y-auto ms:flex-col ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface">
+              <div className="builder-layout ms:grid ms:flex-1 ms:min-h-0 ms:min-w-0 ms:grid-cols-1 ms:lg:grid-cols-[18rem_minmax(0,1fr)_340px] ms:gap-3 ms:overflow-hidden">
+                <aside className="panel-tools-wrap panel-tools ms:hidden ms:lg:flex ms:self-start ms:min-h-0 ms:max-h-[calc(100dvh-12.5rem)] ms:overflow-y-auto ms:flex-col ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface">
                   <ToolPanel form={form} ui={ui} />
                 </aside>
                 <main className="panel-canvas ms:self-start ms:min-w-0 ms:max-h-[calc(100dvh-12.5rem)] ms:overflow-y-auto ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface ms:p-4">
                   <Canvas form={form} ui={ui} dragEnabled={dragEnabled} />
+                  <div className="ms:lg:hidden ms:sticky ms:bottom-0 ms:z-20 ms:pt-2 ms:pb-3 ms:flex ms:justify-center ms:pointer-events-none">
+                    <button
+                      type="button"
+                      onClick={() => setToolsModalOpen(true)}
+                      className="ms:pointer-events-auto ms:inline-flex ms:items-center ms:gap-1.5 ms:px-3.5 ms:py-2 ms:rounded-full ms:bg-mssurface/95 ms:backdrop-blur-sm ms:text-mstext ms:text-sm ms:font-semibold ms:border ms:border-msprimary/35 ms:shadow-lg ms:shadow-msprimary/10 ms:outline-none ms:focus:outline-none ms:hover:bg-mssurface ms:hover:border-msprimary/50 ms:hover:shadow-xl ms:hover:shadow-msprimary/15 ms:transition-all"
+                      aria-label="Open add field tools"
+                    >
+                      <PlusIcon className="ms:w-3.5 ms:h-3.5 ms:text-msprimary" />
+                      <span>Add field</span>
+                    </button>
+                  </div>
                 </main>
-                <aside className="panel-editor-wrap panel-editor ms:flex ms:self-start ms:min-h-0 ms:max-h-[calc(100dvh-12.5rem)] ms:overflow-y-auto ms:flex-col ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface">
+                <aside className="panel-editor-wrap panel-editor ms:hidden ms:lg:flex ms:self-start ms:min-h-0 ms:max-h-[calc(100dvh-12.5rem)] ms:overflow-y-auto ms:flex-col ms:rounded-lg ms:border ms:border-msborder ms:bg-mssurface">
                   <EditPanel form={form} ui={ui} />
                 </aside>
+
+                <MobileBottomDrawer
+                  title="Add Field"
+                  open={toolsModalOpen}
+                  onClose={() => setToolsModalOpen(false)}
+                >
+                  <ToolPanel form={form} ui={ui} />
+                </MobileBottomDrawer>
+
+                <MobileBottomDrawer
+                  title="Edit Field"
+                  open={editModalOpen && !!selectedFieldId}
+                  onClose={() => ui.getState().setEditModalOpen(false)}
+                >
+                  <EditPanel form={form} ui={ui} />
+                </MobileBottomDrawer>
               </div>
             )}
             {mode === 'code' && (
@@ -130,7 +223,7 @@ export function MsheetBuilder({
               </div>
             )}
             {mode === 'preview' && (
-              <div className="preview-layout ms:flex-1 ms:min-h-0 ms:min-w-0 ms:w-full ms:max-w-2xl ms:mx-auto ms:p-4">
+              <div className="preview-layout ms:flex-1 ms:min-h-0 ms:min-w-0 ms:w-full ms:max-w-2xl ms:mx-auto ms:p-4 ms:max-h-[calc(100dvh-12.5rem)] ms:overflow-y-auto">
                 <Canvas form={form} ui={ui} dragEnabled={false} />
               </div>
             )}

packages/builder/src/lib/components/FieldWrapper.tsx

@@ -294,7 +294,15 @@ export function FieldWrapper({
           {/* Edit button (mobile only) */}
           <button
             type="button"
-            onClick={handleSelect}
+            onClick={(e) => {
+              e.stopPropagation();
+              if (onSelectOverride) {
+                onSelectOverride(e);
+              } else {
+                ui.getState().selectField(fieldId);
+              }
+              ui.getState().setEditModalOpen(true);
+            }}
             className="field-edit-btn ms:block ms:lg:hidden ms:p-1.5 ms:bg-transparent ms:text-mstextmuted ms:hover:bg-msbackgroundhover ms:rounded ms:transition-colors ms:border-0 ms:outline-none ms:focus:outline-none"
             title="Edit"
             aria-label="Edit field"