active_canvas 0.0.4 → 0.1.0

data/app/assets/javascripts/active_canvas/editor/ac_chips.js

@@ -0,0 +1,192 @@
+/**
+ * ActiveCanvas Editor - Liquid chips
+ *
+ * The canvas always holds the page SOURCE. On load every `{{ expr }}` found in
+ * a text node is wrapped in <span data-ac-var> so it can be styled and locked;
+ * before save, preview, validation and the code view the wrapper is removed
+ * again. Attributes, <script> and <style> are never touched, so the round
+ * trip is lossless by construction. Loops and conditions are attributes
+ * (data-ac-for / data-ac-if) that GrapesJS preserves on its own.
+ */
+(function() {
+  'use strict';
+
+  const VAR_RE = /\{\{[\s\S]*?\}\}/g;
+  const SKIP_PARENTS = ['SCRIPT', 'STYLE', 'TEXTAREA'];
+  let chipCounter = 0;
+
+  // Chip ids only need to be unique within one editor session; the server
+  // keys live values by them and they never reach the saved source.
+  function nextId() {
+    return `c${++chipCounter}`;
+  }
+
+  function sourceOf(el) {
+    return el.getAttribute('data-ac-source') || el.textContent;
+  }
+
+  // Live-data ghosts (the other items of a loop) are display only.
+  function stripGhosts(doc) {
+    doc.querySelectorAll('[data-ac-ghost]').forEach(el => el.remove());
+  }
+
+  function parse(html) {
+    return new DOMParser().parseFromString(`<!doctype html><body>${html}</body>`, 'text/html');
+  }
+
+  // Wrap each {{ expr }} in a text node with a chip span.
+  function decorate(html) {
+    const doc = parse(html);
+    stripGhosts(doc);
+    const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+    const nodes = [];
+    while (walker.nextNode()) nodes.push(walker.currentNode);
+
+    nodes.forEach(node => {
+      const parent = node.parentNode;
+      if (!parent || SKIP_PARENTS.includes(parent.nodeName)) return;
+      if (parent.nodeType === 1 && parent.hasAttribute('data-ac-var')) return;
+      const text = node.nodeValue;
+      if (!/\{\{[\s\S]*?\}\}/.test(text)) return;
+
+      const frag = doc.createDocumentFragment();
+      let last = 0;
+      let match;
+      VAR_RE.lastIndex = 0;
+      while ((match = VAR_RE.exec(text))) {
+        if (match.index > last) frag.appendChild(doc.createTextNode(text.slice(last, match.index)));
+        const span = doc.createElement('span');
+        span.setAttribute('data-ac-var', '');
+        span.setAttribute('data-ac-source', match[0]);
+        span.setAttribute('data-ac-id', nextId());
+        span.textContent = match[0];
+        frag.appendChild(span);
+        last = match.index + match[0].length;
+      }
+      if (last < text.length) frag.appendChild(doc.createTextNode(text.slice(last)));
+      parent.replaceChild(frag, node);
+    });
+
+    return doc.body.innerHTML;
+  }
+
+  // Replace each chip span with its text. The inverse of decorate().
+  function undecorate(html) {
+    // GrapesJS serializes text nodes the same way DOMParser does, so skipping the round trip when there are no chips changes nothing.
+    if (!html || (html.indexOf('data-ac-var') === -1 && html.indexOf('data-ac-ghost') === -1)) return html;
+    const doc = parse(html);
+    stripGhosts(doc);
+    doc.querySelectorAll('span[data-ac-var]').forEach(el => {
+      el.replaceWith(doc.createTextNode(sourceOf(el)));
+    });
+    return doc.body.innerHTML;
+  }
+
+  const CANVAS_CSS = `
+    span[data-ac-var] {
+      display: inline; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
+      border-radius: 4px; padding: 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 0.9em; white-space: nowrap; cursor: default;
+    }
+    [data-ac-for] { outline: 1px dashed #6366f1; outline-offset: 2px; }
+    [data-ac-for]::before {
+      content: "\\21BB " attr(data-ac-for); display: inline-block; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+      background: #6366f1; color: #fff; padding: 0 5px; border-radius: 3px; margin-right: 4px; vertical-align: top;
+    }
+    .ac-live-data span[data-ac-var] {
+      background: #dcfce7; color: #14532d; border-color: #86efac;
+      font-family: inherit; font-size: inherit; white-space: normal; cursor: help;
+    }
+    .ac-live-data span[data-ac-var].ac-chip-empty { opacity: 0.6; }
+    [data-ac-ghost] { opacity: 0.55; pointer-events: none; user-select: none; }
+    [data-ac-ghost] [data-ac-for]::before, [data-ac-ghost] [data-ac-if]::after { content: none; }
+    [data-ac-ghost] [data-ac-for], [data-ac-ghost] [data-ac-if] { outline: none; }
+    [data-ac-if] { outline: 1px dotted #f59e0b; outline-offset: 2px; }
+    [data-ac-if]::after {
+      content: "if " attr(data-ac-if); display: inline-block; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+      background: #f59e0b; color: #1f2937; padding: 0 5px; border-radius: 3px; margin-left: 4px; vertical-align: top;
+    }
+  `;
+
+  // GrapesJS plugin: registers the chip component type and styles the canvas.
+  function plugin(editor) {
+    editor.DomComponents.addType('ac-chip', {
+      isComponent: el => el.nodeType === 1 && el.tagName === 'SPAN' && el.hasAttribute('data-ac-var'),
+      model: {
+        defaults: {
+          name: 'Variable',
+          tagName: 'span',
+          editable: false,
+          droppable: false,
+          copyable: true,
+          removable: true,
+          layerable: false,
+          traits: [],
+          attributes: { 'data-ac-var': '' }
+        },
+        init() {
+          // The view marks the element contenteditable=false so the RTE skips
+          // it; that must never leak into the model (and so into the source).
+          this.removeAttributes('contenteditable');
+          // The model's text is always the source, even when the canvas shows
+          // a live value and the RTE re-parsed the element around it.
+          const attrs = this.getAttributes();
+          if (!attrs['data-ac-source']) {
+            this.addAttributes({ 'data-ac-source': this.components().map(c => c.get('content') || '').join('') });
+          }
+          if (!attrs['data-ac-id']) this.addAttributes({ 'data-ac-id': nextId() });
+          const source = this.getAttributes()['data-ac-source'];
+          const text = this.components().map(c => c.get('content') || '').join('');
+          if (text !== source) this.components([{ type: 'textnode', content: source }]);
+        },
+        source() {
+          return this.getAttributes()['data-ac-source'] || '';
+        }
+      },
+      view: {
+        events: { dblclick: 'editExpression' },
+        onRender() {
+          this.el.setAttribute('contenteditable', 'false');
+          if (window.ActiveCanvasLiveData) window.ActiveCanvasLiveData.applyChip(this.el);
+        },
+        editExpression(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          const next = window.prompt('Liquid expression', this.model.source());
+          if (next === null) return;
+          const expr = next.trim();
+          if (!expr) return;
+          const tag = expr.startsWith('{{') ? expr : `{{ ${expr} }}`;
+          this.model.addAttributes({ 'data-ac-source': tag });
+          this.model.components([{ type: 'textnode', content: tag }]);
+        }
+      }
+    });
+
+    // Text typed into the canvas becomes chips once the author leaves the
+    // element, so new {{ }} tags get locked and can show live values.
+    editor.on('rte:disable', view => {
+      const component = view && view.model;
+      if (!component || !component.getInnerHTML) return;
+      setTimeout(() => {
+        // Ghost copies caught by the RTE re-parse must not become components.
+        component.find('[data-ac-ghost]').forEach(ghost => ghost.remove());
+        const inner = component.getInnerHTML();
+        if (!/\{\{[\s\S]*?\}\}/.test(undecorate(inner))) return;
+        const decorated = decorate(inner);
+        if (decorated !== inner) component.components(decorated);
+      }, 0);
+    });
+
+    editor.on('load', () => {
+      const doc = editor.Canvas.getDocument();
+      if (!doc || doc.getElementById('ac-chips-css')) return;
+      const style = doc.createElement('style');
+      style.id = 'ac-chips-css';
+      style.textContent = CANVAS_CSS;
+      doc.head.appendChild(style);
+    });
+  }
+
+  window.ActiveCanvasChips = { decorate, undecorate, sourceOf, plugin };
+})();

data/app/assets/javascripts/active_canvas/editor/code_panel.js

@@ -35,6 +35,9 @@
     let editingComponent = null;
     let isComponentMode = false;
 
+    const toSource = html => (window.ActiveCanvasChips ? window.ActiveCanvasChips.undecorate(html) : html);
+    const toCanvas = html => (window.ActiveCanvasChips && config.templateEnabled ? window.ActiveCanvasChips.decorate(html) : html);
+
     // Initialize Monaco editors
     function initMonacoEditors() {
       if (monacoInitialized) return;
@@ -91,7 +94,7 @@
 
         // Create HTML editor
         htmlMonacoEditor = monaco.editor.create(document.getElementById('monaco-html-container'), {
-          value: editor.getHtml(),
+          value: toSource(editor.getHtml()),
           language: 'html',
           ...editorOptions
         });
@@ -205,9 +208,9 @@
       isSyncing = true;
 
       if (isComponentMode && editingComponent) {
-        htmlMonacoEditor.setValue(editingComponent.toHTML());
+        htmlMonacoEditor.setValue(toSource(editingComponent.toHTML()));
       } else {
-        htmlMonacoEditor.setValue(editor.getHtml());
+        htmlMonacoEditor.setValue(toSource(editor.getHtml()));
       }
       cssMonacoEditor.setValue(editor.getCss());
       setTimeout(async () => {
@@ -226,11 +229,11 @@
       try {
         if (isComponentMode && editingComponent) {
           const newHtml = htmlMonacoEditor.getValue();
-          updateComponentFromHtml(editingComponent, newHtml);
+          updateComponentFromHtml(editingComponent, toCanvas(newHtml));
         } else {
           const newHtml = htmlMonacoEditor.getValue();
           const newCss = cssMonacoEditor.getValue();
-          editor.setComponents(newHtml);
+          editor.setComponents(toCanvas(newHtml));
           editor.setStyle(newCss);
         }
         if (statusEl) {
@@ -296,7 +299,7 @@
         initMonacoEditors();
         setTimeout(() => {
           isSyncing = true;
-          htmlMonacoEditor.setValue(component.toHTML());
+          htmlMonacoEditor.setValue(toSource(component.toHTML()));
           setTimeout(async () => {
             try {
               await htmlMonacoEditor.getAction('editor.action.formatDocument').run();
@@ -314,7 +317,7 @@
         }, 200);
       } else {
         isSyncing = true;
-        htmlMonacoEditor.setValue(component.toHTML());
+        htmlMonacoEditor.setValue(toSource(component.toHTML()));
         setTimeout(async () => {
           try {
             await htmlMonacoEditor.getAction('editor.action.formatDocument').run();

data/app/assets/javascripts/active_canvas/editor/directive_traits.js

@@ -0,0 +1,95 @@
+/**
+ * ActiveCanvas Editor - Loop and condition traits
+ *
+ * Every selectable component gets three traits in the Settings tab:
+ *   Repeat for each  -> data-ac-for="<item> in <binding>"
+ *   Item name        -> the <item> part
+ *   Show only if     -> data-ac-if="<condition>"
+ * The traits are (re)built on selection so the binding list is current.
+ * Liquid loop modifiers after the binding (limit:, offset:, reversed) are
+ * kept as they are when the item or the binding changes.
+ */
+(function() {
+  'use strict';
+
+  window.ActiveCanvasEditor = window.ActiveCanvasEditor || {};
+
+  const SKIP_TYPES = ['wrapper', 'textnode', 'comment', 'ac-chip'];
+  const PROPS = ['ac-repeat', 'ac-item', 'ac-tail'];
+
+  function setupDirectiveTraits(editor, config) {
+    if (!config.templateEnabled) return;
+
+    editor.on('component:selected', component => {
+      if (!component || SKIP_TYPES.includes(component.get('type'))) return;
+      ensureTraits(component);
+    });
+  }
+
+  function parseFor(value) {
+    const match = /^\s*(\S+)\s+in\s+(\S+)(.*)$/.exec(value || '');
+    return match
+      ? { item: match[1], binding: match[2], tail: match[3].trim() }
+      : { item: '', binding: '', tail: '' };
+  }
+
+  function ensureTraits(component) {
+    const bindings = window.ActiveCanvasBindings;
+    const current = parseFor(component.getAttributes()['data-ac-for']);
+
+    ['ac-repeat', 'ac-item', 'data-ac-if'].forEach(name => component.removeTrait(name));
+    component.set({ 'ac-repeat': current.binding, 'ac-item': current.item, 'ac-tail': current.tail }, { silent: true });
+
+    const names = bindings.listNames();
+    const options = [{ id: '', name: '— none —' }].concat(names.map(name => ({ id: name, name })));
+    if (current.binding && !names.includes(current.binding)) {
+      const note = bindings.read()[current.binding] ? 'not a list' : 'missing';
+      options.push({ id: current.binding, name: `${current.binding} (${note})` });
+    }
+
+    component.addTrait([
+      { type: 'select', name: 'ac-repeat', label: 'Repeat for each', changeProp: true, options },
+      { type: 'text', name: 'ac-item', label: 'Item name', changeProp: true, placeholder: 'item' },
+      { type: 'text', name: 'data-ac-if', label: 'Show only if', placeholder: `${current.item || 'item'}.featured` }
+    ], { at: 0 });
+
+    if (!component.__acDirectivesWired) {
+      component.__acDirectivesWired = true;
+      component.set('_undoexc', (component.get('_undoexc') || []).concat(PROPS), { silent: true });
+      component.on('change:ac-repeat change:ac-item', () => applyFor(component));
+      component.on('change:attributes:data-ac-for', () => syncFromAttribute(component));
+      component.on('change:attributes:data-ac-if', () => {
+        const value = (component.getAttributes()['data-ac-if'] || '').trim();
+        if (!value) component.removeAttributes('data-ac-if');
+      });
+    }
+  }
+
+  function applyFor(component) {
+    const binding = component.get('ac-repeat');
+    if (!binding) {
+      if ('data-ac-for' in component.getAttributes()) component.removeAttributes('data-ac-for');
+      return;
+    }
+    let item = (component.get('ac-item') || '').trim();
+    if (!item) {
+      item = window.ActiveCanvasBindings.itemName(binding);
+      component.set('ac-item', item); // not silent: the trait input must show it
+      return; // the change:ac-item handler calls applyFor again with the item set
+    }
+    const tail = component.get('ac-tail') || '';
+    const next = `${item} in ${binding}${tail ? ' ' + tail : ''}`;
+    if (component.getAttributes()['data-ac-for'] !== next) component.addAttributes({ 'data-ac-for': next });
+  }
+
+  // Keeps the trait values in step with the attribute when it changes behind
+  // the traits' back (undo, code panel, another handler). Non-silent so the
+  // inputs re-render; applyFor is a no-op when nothing differs.
+  function syncFromAttribute(component) {
+    const parsed = parseFor(component.getAttributes()['data-ac-for']);
+    if (component.get('ac-repeat') === parsed.binding && component.get('ac-item') === parsed.item && component.get('ac-tail') === parsed.tail) return;
+    component.set({ 'ac-repeat': parsed.binding, 'ac-item': parsed.item, 'ac-tail': parsed.tail });
+  }
+
+  window.ActiveCanvasEditor.setupDirectiveTraits = setupDirectiveTraits;
+})();

data/app/assets/javascripts/active_canvas/editor/live_data.js

@@ -0,0 +1,178 @@
+/**
+ * ActiveCanvas Editor - Live data
+ *
+ * With the "Live data" switch on, every chip in the canvas shows the value
+ * it renders, a loop shows all its items (the first one is the editable
+ * element, the others are dimmed ghost copies), and an element whose
+ * condition is false is dimmed with a "hidden" badge. This is a view layer
+ * only: the chip's source stays in its data-ac-source attribute and ghosts
+ * never enter the model, so saving, validating and the code panel keep
+ * working on the source. Values come from chip_values, refreshed after
+ * edits and binding changes.
+ */
+(function() {
+  'use strict';
+
+  window.ActiveCanvasEditor = window.ActiveCanvasEditor || {};
+
+  const state = { enabled: false, values: {}, loops: [], conds: [], doc: null };
+
+  function applyChip(el) {
+    const source = window.ActiveCanvasChips.sourceOf(el);
+    if (el.closest('[data-ac-ghost]')) return; // ghost copies arrive rendered
+    if (!state.enabled) {
+      if (el.textContent !== source) el.textContent = source;
+      el.removeAttribute('title');
+      el.classList.remove('ac-chip-empty');
+      return;
+    }
+    const id = el.getAttribute('data-ac-id');
+    const has = !!id && Object.prototype.hasOwnProperty.call(state.values, id);
+    const value = has ? state.values[id] : null;
+    const shown = has ? (value === '' ? '\u2014' : value) : source;
+    if (el.textContent !== shown) el.textContent = shown;
+    el.title = has ? source : `${source} (no value yet)`;
+    el.classList.toggle('ac-chip-empty', has && value === '');
+  }
+
+  function cssString(text) {
+    return `"${String(text).replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`;
+  }
+
+  // Loop and condition elements in the order the server numbered them:
+  // document order, ghosts excluded.
+  function directiveElements(doc, attr) {
+    return [...doc.querySelectorAll(`[${attr}]`)].filter(el => !el.closest('[data-ac-ghost]'));
+  }
+
+  function removeGhosts(doc) {
+    doc.querySelectorAll('[data-ac-ghost]').forEach(el => el.remove());
+  }
+
+  // The other items of a loop, inserted after the real element as dimmed,
+  // unselectable copies. They are never components, and the chips module
+  // strips them from anything that reaches the source.
+  function insertGhosts(doc) {
+    directiveElements(doc, 'data-ac-for').forEach((el, i) => {
+      const loop = state.loops[i];
+      if (!loop || !loop.copies) return;
+      let anchor = el;
+      loop.copies.forEach(html => {
+        anchor.insertAdjacentHTML('afterend', html);
+        const ghost = anchor.nextElementSibling;
+        if (!ghost) return;
+        ghost.setAttribute('data-ac-ghost', '');
+        ghost.setAttribute('contenteditable', 'false');
+        anchor = ghost;
+      });
+    });
+  }
+
+  // Counts and hidden conditions are shown through generated CSS keyed by
+  // the expression, so no attribute or class is added to the element itself
+  // (those would end up in the saved source).
+  function applyBadges(doc) {
+    let style = doc.getElementById('ac-live-badges');
+    if (!state.enabled) { if (style) style.remove(); return; }
+    if (!style) {
+      style = doc.createElement('style');
+      style.id = 'ac-live-badges';
+      doc.head.appendChild(style);
+    }
+    const rules = [];
+    state.loops.forEach(loop => {
+      const shown = 1 + (loop.copies ? loop.copies.length : 0);
+      const more = loop.count > shown ? `, ${shown} shown` : '';
+      const label = `\u21BB ${loop.expr} \u00B7 ${loop.count} item${loop.count === 1 ? '' : 's'}${more}`;
+      rules.push(`[data-ac-for=${cssString(loop.expr)}]::before { content: ${cssString(label)}; }`);
+    });
+    state.conds.forEach(cond => {
+      const label = cond.shown ? `if ${cond.expr}` : `if ${cond.expr} \u00B7 hidden`;
+      rules.push(`[data-ac-if=${cssString(cond.expr)}]::after { content: ${cssString(label)}; }`);
+      if (!cond.shown) rules.push(`[data-ac-if=${cssString(cond.expr)}] { opacity: 0.35; }`);
+    });
+    style.textContent = rules.join('\n');
+  }
+
+  function render() {
+    const doc = state.doc;
+    const btn = document.getElementById('btn-live-data');
+    if (btn) {
+      btn.classList.toggle('active', state.enabled);
+      btn.setAttribute('aria-pressed', String(state.enabled));
+    }
+    if (!doc) return;
+    removeGhosts(doc);
+    doc.body.classList.toggle('ac-live-data', state.enabled);
+    doc.querySelectorAll('span[data-ac-var]').forEach(applyChip);
+    if (state.enabled) insertGhosts(doc);
+    applyBadges(doc);
+  }
+
+  function setupLiveData(editor, config) {
+    const container = document.getElementById('data-panel-container');
+    const btn = document.getElementById('btn-live-data');
+    if (!container || !btn) return;
+    if (!config.templateEnabled) { btn.hidden = true; return; }
+
+    const url = container.dataset.chipValuesUrl;
+    const key = `ac:livedata:${config.pageId}`;
+    const csrf = window.ActiveCanvasEditor.getCsrfToken();
+    let seq = 0;
+    let timer = null;
+    let lastFingerprint = null;
+
+    try { state.enabled = localStorage.getItem(key) !== 'off'; } catch (e) { state.enabled = true; }
+
+    function fingerprint(html) {
+      return (html.match(/data-ac-source="[^"]*"|data-ac-(?:for|if)="[^"]*"/g) || []).join('\n') + '\n' + window.ActiveCanvasBindings.readJson();
+    }
+
+    function refresh(force) {
+      if (!state.enabled) return;
+      const html = editor.getHtml();
+      const fp = fingerprint(html);
+      if (!force && fp === lastFingerprint) return;
+      lastFingerprint = fp;
+      const id = ++seq;
+
+      fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf, 'Accept': 'application/json' },
+        body: JSON.stringify({ content: html, bindings: window.ActiveCanvasBindings.readJson() })
+      })
+        .then(r => r.json())
+        .then(body => {
+          if (id !== seq) return;
+          state.values = body.values || {};
+          state.loops = Array.isArray(body.loops) ? body.loops : [];
+          state.conds = Array.isArray(body.conds) ? body.conds : [];
+          render();
+        })
+        .catch(() => { /* the validator banner reports server trouble */ });
+    }
+
+    function schedule() {
+      clearTimeout(timer);
+      timer = setTimeout(() => refresh(false), 1500);
+    }
+
+    btn.addEventListener('click', () => {
+      state.enabled = !state.enabled;
+      try { localStorage.setItem(key, state.enabled ? 'on' : 'off'); } catch (e) { /* storage unavailable */ }
+      render();
+      refresh(true);
+    });
+
+    editor.on('load', () => {
+      state.doc = editor.Canvas.getDocument();
+      render();
+      refresh(true);
+    });
+    editor.on('component:update component:add component:remove', schedule);
+    document.addEventListener('ac:bindings-changed', () => refresh(true));
+  }
+
+  window.ActiveCanvasLiveData = { applyChip, enabled: () => state.enabled, removeGhosts };
+  window.ActiveCanvasEditor.setupLiveData = setupLiveData;
+})();

data/app/assets/javascripts/active_canvas/editor/panels.js

@@ -93,10 +93,12 @@
           const blocksContainer = document.getElementById('blocks-container');
           const assetsContainer = document.getElementById('assets-container');
           const layersContainer = document.getElementById('layers-container');
+          const dataContainer = document.getElementById('data-panel-container');
 
           if (blocksContainer) blocksContainer.style.display = panel === 'blocks' ? 'block' : 'none';
           if (assetsContainer) assetsContainer.style.display = panel === 'assets' ? 'block' : 'none';
           if (layersContainer) layersContainer.style.display = panel === 'layers' ? 'block' : 'none';
+          if (dataContainer) dataContainer.style.display = panel === 'data' ? '' : 'none';
         } else {
           const stylesContainer = document.getElementById('styles-container');
           const traitsContainer = document.getElementById('traits-container');
@@ -192,28 +194,37 @@
       saveContent(true);
     }, 60000);
 
-    function saveContent(isAutoSave) {
-      if (saveInProgress) return;
+    function saveContent(isAutoSave, extra) {
+      if (saveInProgress) return Promise.resolve(false);
       saveInProgress = true;
 
       if (saveBtn) saveBtn.disabled = true;
 
-      const html = editor.getHtml();
+      // The canvas holds the Liquid source with chip wrappers; strip them.
+      const rawHtml = editor.getHtml();
+      const html = window.ActiveCanvasChips ? window.ActiveCanvasChips.undecorate(rawHtml) : rawHtml;
       const css = editor.getCss();
       const js = window.ActiveCanvasEditor.getJs ? window.ActiveCanvasEditor.getJs() : '';
-      const components = JSON.stringify(editor.getComponents());
+      // Dynamic pages reload from `content`; their components JSON would only
+      // carry chip wrappers, so it is not persisted.
+      const components = config.templateEnabled ? null : JSON.stringify(editor.getComponents());
 
       // Use entityType from config (defaults to 'page' for backwards compatibility)
       const entityType = config.entityType || 'page';
+      const bindingsJson = window.ActiveCanvasBindings ? window.ActiveCanvasBindings.readJson() : '{}';
       const payload = {};
       payload[entityType] = {
         content: html,
         content_css: css,
         content_js: js,
-        content_components: components
+        content_components: components,
+        bindings: bindingsJson
       };
+      // The Data tab's dynamic-rendering toggle passes template_enabled here;
+      // otherwise the page form remains the authority for that field.
+      Object.assign(payload[entityType], extra || {});
 
-      fetch(config.saveUrl, {
+      return fetch(config.saveUrl, {
         method: 'PATCH',
         headers: {
           'Content-Type': 'application/json',
@@ -234,24 +245,29 @@
               message += ` · Tailwind compiled (${sizeKb}KB in ${result.tailwind.elapsed_ms}ms)`;
             } else {
               showToast('Page saved, but Tailwind compilation failed: ' + result.tailwind.error, 'warning');
-              return;
+              return true; // the page itself was saved
             }
           }
 
           showToast(message, 'success');
+          return true;
         } else {
           showToast(result.errors ? result.errors.join(', ') : 'Save failed', 'error');
+          return false;
         }
       })
       .catch(error => {
         showToast('Save failed', 'error');
         console.error('Save error:', error);
+        return false;
       })
       .finally(() => {
         saveInProgress = false;
         if (saveBtn) saveBtn.disabled = false;
       });
     }
+
+    window.ActiveCanvasEditor.saveContent = saveContent;
   }
 
   /**