active_canvas 0.0.4 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 72294f59d8513e96f33a6320c30e07ff22a94a404c7184145dd3ec0f2720c620
-  data.tar.gz: 6bdb95ac11f18b17de836347fa6a701dd2160e31da5792eef809d4231546b6b5
+  metadata.gz: 4ed0bd1aa5668045e321bcd222a3efb4bd5085bef5a543e23ad9446d4150e9be
+  data.tar.gz: d621f1e61c16427c4f00c1412d491e6ae1916cf4a4b134ce3e6d8db1d9730109
 SHA512:
-  metadata.gz: d9b3065b225b1b0a6775920d27a536adec1905520f78bc9242362d578462a5a552aabeb399ff8e06af570801d186e0bf6061da05f2a8b031a5834a39c034e054
-  data.tar.gz: ab54bbe8bfafc2cb60900c11bfa4f02716f81742bffa3eea7c623d9c91ab1aeada485197eb968cd605e7cb17e6676f17c73a965f8c753e224f5789f0f7b04562
+  metadata.gz: e2f5babe38d167c0a09d589b1eff5576b092aacdbbe0713bb106453da48b82a6c940523ea2ec4b35788fd7e0445351458141cf1f0fb7cc7cef7cdf6decf8142b
+  data.tar.gz: f086909f84dac86a3d9fc625f7bebcf42c16801d675f29a5170446c76b3ad008991bff8ae6264d11e27d3b549d46cb862ede994704cdbb8d11330587e4ed1cf6

data/README.md

@@ -1,6 +1,8 @@
 # ActiveCanvas
 
-![ActiveCanvas Demo](docs/images/active-canvas-demo.gif)
+![Live data in the ActiveCanvas editor: the switch flips between rendered values and Liquid source](docs/images/active-canvas-live-data.gif)
+
+*The Live data switch: every chip shows the value it renders, loops show every item, conditions dim what they hide. Switch it off to see the Liquid source. The saved page always keeps the source.*
 
 A mountable Rails engine that turns any Rails app into a full-featured CMS. Includes a visual drag-and-drop editor (GrapesJS), AI-powered content generation, Tailwind CSS compilation, media management, page versioning, and SEO controls -- all behind an admin interface that works out of the box.
 
@@ -14,9 +16,29 @@ A mountable Rails engine that turns any Rails app into a full-featured CMS. Incl
 - **Header & Footer Partials** -- Reusable components, togglable per page
 - **SEO** -- Meta tags, Open Graph, Twitter Cards, JSON-LD structured data
 - **Page Types** -- Categorize pages (blog posts, landing pages, etc.)
+- **Dynamic Content** -- Bind host-app data sources or admin-managed collections, repeat and show elements with attributes, see real data while editing ([docs](docs/dynamic_content.md))
+- **Collections** -- Typed content lists (text, rich text, number, boolean, date, media, select) with draft and published versions, editable in the admin without code
 - **Authentication** -- Pluggable auth (Devise, custom, or HTTP Basic)
 - **Isolated Namespace** -- No conflicts with your host application
 
+## A look inside
+
+**A page built from collections.** Cards, pricing with a featured badge, FAQs, filters, loop modifiers and conditions, all from data the admin edits.
+
+![The public Showcase page: a hero from literal bindings and one card per team member](docs/images/showcase-public.jpg)
+
+**Bindings edited in place.** The Data tab lists every binding. A literal shows its value in a text box, a collection shows its parameters, and the canvas updates as you type.
+
+![The editor with the Data tab open next to the canvas showing the team cards](docs/images/editor-data-panel.jpg)
+
+**Collections in the admin.** Typed fields, a draft and a published version per item, publish and unpublish, and a history of every publish.
+
+![The Plans collection items grid with status, publish and history actions](docs/images/collections-items.jpg)
+
+**Version history.** Every save is a version with size deltas, a quick diff and a full view.
+
+![The version history of a page with quick diff and view details actions](docs/images/version-history.jpg)
+
 ## Requirements
 
 - Ruby 3.1+

data/app/assets/javascripts/active_canvas/admin/data_panel.js

@@ -0,0 +1,357 @@
+(function() {
+  const container = document.getElementById('data-panel-container');
+  if (!container) return;
+
+  let registry = []; // [{ name, params: { limit: { type, default, ... } } }]
+  let bindings = {}; // { localName: { source, params } | { source: '_literal', value } }
+  const NAME_RE = /^[a-z][a-z0-9_]*$/;
+
+  const csrf = () => document.querySelector('meta[name="csrf-token"]').content;
+  const post = (url, body) => fetch(url, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf(), 'Accept': 'application/json' },
+    body: JSON.stringify(body),
+  }).then(r => r.json().then(b => ({ ok: r.ok, body: b })));
+  const get = (url) => fetch(url, { headers: { Accept: 'application/json' } }).then(r => r.json());
+
+  function init() {
+    loadBindings();
+    renderBindings();
+    const addBtn = document.getElementById('ac-add-binding-btn');
+    const emptyAddBtn = document.getElementById('ac-empty-add-btn');
+    addBtn.disabled = true;
+    emptyAddBtn.disabled = true;
+    loadRegistry()
+      .then(() => {
+        addBtn.disabled = false;
+        emptyAddBtn.disabled = false;
+        renderBindings(); // labels and snippets need the registry
+      })
+      .catch(err => {
+        console.error('ActiveCanvas: data sources unavailable', err);
+        showPanelMessage('Data sources could not be loaded. Reload the page to try again.');
+      });
+    addBtn.addEventListener('click', showForm);
+    emptyAddBtn.addEventListener('click', showForm);
+    const toggle = document.getElementById('ac-template-toggle');
+    if (toggle) toggle.addEventListener('change', onTemplateToggle);
+  }
+
+  function showPanelMessage(text) {
+    const el = document.getElementById('ac-panel-message');
+    if (!el) return;
+    el.textContent = text;
+    el.hidden = !text;
+  }
+
+  // Saving with template_enabled flips how the editor loads the page, so a
+  // successful save is followed by a reload.
+  function onTemplateToggle(e) {
+    const toggle = e.target;
+    const save = window.ActiveCanvasEditor && window.ActiveCanvasEditor.saveContent;
+    if (!save) { toggle.checked = !toggle.checked; return; }
+    toggle.disabled = true;
+    save(false, { template_enabled: toggle.checked }).then(ok => {
+      if (ok) { window.location.reload(); return; }
+      toggle.checked = !toggle.checked;
+      toggle.disabled = false;
+    });
+  }
+
+  function loadBindings() {
+    bindings = window.ActiveCanvasBindings.read();
+  }
+
+  function persistBindings() {
+    window.ActiveCanvasBindings.write(bindings);
+  }
+
+  function loadRegistry() {
+    const url = container.dataset.dataSourcesUrl;
+    return get(url).then(json => {
+      registry = json;
+      window.ActiveCanvasBindings.setRegistry(json);
+    });
+  }
+
+  function renderBindings() {
+    const list = document.getElementById('ac-bindings-list');
+    const names = Object.keys(bindings);
+    list.dataset.empty = names.length === 0 ? 'true' : 'false';
+    list.innerHTML = names.map(name => bindingRowHTML(name, bindings[name])).join('');
+    wireRowEvents(list);
+  }
+
+  function bindingRowHTML(name, spec) {
+    const B = window.ActiveCanvasBindings;
+    const src = B.source(spec.source);
+    const item = B.itemName(name);
+    const firstField = src && src.fields && src.fields[0] ? src.fields[0].id : 'title';
+    const sourceLabel = spec.source === '_literal' ? 'Literal' : ((src && src.label) || spec.source);
+    const snippet = `{{ ${name} }}`;
+    const loopSnippet = `<div data-ac-for="${item} in ${name}">{{ ${item}.${firstField} }}</div>`;
+    return `
+      <li class="data-panel-row">
+        <div class="data-panel-row-header">
+          <strong class="data-panel-row-name">${escape(name)}</strong>
+          <span class="data-panel-row-source">${escape(sourceLabel)}</span>
+          <button type="button" class="data-panel-row-action" data-edit="${escape(name)}" title="Edit binding">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 20h9"/>
+              <path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>
+            </svg>
+          </button>
+          <button type="button" class="data-panel-row-action data-panel-row-remove" data-remove="${escape(name)}" title="Remove binding">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="18" y1="6" x2="6" y2="18"/>
+              <line x1="6" y1="6" x2="18" y2="18"/>
+            </svg>
+          </button>
+        </div>
+        ${valueLineHTML(name, spec)}
+        <div class="data-panel-row-chips">
+          <button type="button" class="data-panel-chip" data-snippet="${escape(snippet)}" title="Copy ${escape(snippet)}">{{ }}</button>
+          ${B.isList(name) ? `<button type="button" class="data-panel-chip" data-snippet="${escape(loopSnippet)}" title="Copy loop">for&hellip;</button>` : ''}
+        </div>
+        <details class="data-panel-sample" data-sample-for="${escape(name)}">
+          <summary>Sample data</summary>
+          <pre class="data-panel-sample-body">Loading…</pre>
+        </details>
+      </li>
+    `;
+  }
+
+  // A literal shows its value in a text box you can type in. Any other
+  // binding shows its parameters; the pencil opens the form to change them.
+  function valueLineHTML(name, spec) {
+    if (spec.source === '_literal') {
+      if (typeof spec.value !== 'string') {
+        return `<code class="data-panel-row-params" title="Edit with the pencil">${escape(JSON.stringify(spec.value))}</code>`;
+      }
+      return `<input type="text" class="data-panel-row-literal" data-literal="${escape(name)}" value="${escape(spec.value)}" placeholder="Value" title="The value of {{ ${escape(name)} }}">`;
+    }
+    const params = Object.entries(spec.params || {}).filter(([, v]) => v != null && v !== '');
+    return `<span class="data-panel-row-params">${params.length ? params.map(([k, v]) => `${escape(k)}: ${escape(v)}`).join(' · ') : 'default parameters'}</span>`;
+  }
+
+  function wireRowEvents(list) {
+    list.querySelectorAll('[data-literal]').forEach(input => {
+      input.addEventListener('change', () => {
+        bindings[input.dataset.literal].value = input.value;
+        persistBindings();
+      });
+      input.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); input.blur(); } });
+    });
+    list.querySelectorAll('[data-edit]').forEach(btn => {
+      btn.addEventListener('click', () => showForm(btn.dataset.edit));
+    });
+    list.querySelectorAll('[data-remove]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        delete bindings[btn.dataset.remove];
+        persistBindings();
+        renderBindings();
+      });
+    });
+    list.querySelectorAll('.data-panel-chip').forEach(chip => {
+      chip.addEventListener('click', () => copySnippet(chip));
+    });
+    list.querySelectorAll('.data-panel-sample').forEach(details => {
+      details.addEventListener('toggle', () => {
+        if (details.open && !details.dataset.loaded) loadSample(details);
+      });
+    });
+  }
+
+  function loadSample(details) {
+    const body = details.querySelector('.data-panel-sample-body');
+    const url = container.dataset.sampleDataUrl;
+    body.textContent = 'Loading…';
+    post(url, { binding: details.dataset.sampleFor, bindings: window.ActiveCanvasBindings.readJson() })
+      .then(({ ok, body: json }) => {
+        details.dataset.loaded = 'true';
+        body.textContent = ok ? JSON.stringify(json.rows, null, 2) : `Could not load: ${json.error || 'unknown error'}`;
+      })
+      .catch(() => { body.textContent = 'Could not reach the server.'; });
+  }
+
+  function copySnippet(chip) {
+    const text = chip.dataset.snippet;
+    const write = navigator.clipboard?.writeText(text);
+    if (write && typeof write.then === 'function') {
+      write.then(() => flashCopied(chip, 'Copied!')).catch(() => flashCopied(chip, 'Press Ctrl+C'));
+    } else {
+      flashCopied(chip, 'Copy unavailable');
+    }
+  }
+
+  function flashCopied(el, message) {
+    const original = el.textContent;
+    el.textContent = message || 'Copied!';
+    el.classList.add('is-copied');
+    setTimeout(() => {
+      el.textContent = original;
+      el.classList.remove('is-copied');
+    }, 1000);
+  }
+
+  // With a name, the form opens prefilled to edit that binding in place.
+  function showForm(existing) {
+    showPanelMessage('');
+    const list = document.getElementById('ac-bindings-list');
+    if (list.querySelector('#ac-binding-form')) return;
+    const tpl = document.getElementById('ac-binding-form-template');
+    const form = tpl.content.firstElementChild.cloneNode(true);
+    const li = document.createElement('li');
+    li.className = 'data-panel-add-card-wrapper';
+    li.appendChild(form);
+    list.dataset.empty = 'false';
+    list.prepend(li);
+    renderSources(form);
+    form.addEventListener('submit', onSave);
+    form.querySelector('#ac-binding-cancel').addEventListener('click', hideForm);
+    form.querySelector('[data-cancel]').addEventListener('click', hideForm);
+    form.querySelector('select[name="source"]').addEventListener('change', () => renderParamInputs(form));
+    form.querySelector('input[name="name"]').addEventListener('input', () => showNameError(form, ''));
+    if (typeof existing === 'string' && bindings[existing]) {
+      prefill(form, existing, bindings[existing]);
+    } else {
+      form.querySelector('input[name="name"]').focus();
+    }
+  }
+
+  function prefill(form, name, spec) {
+    form.dataset.editing = name;
+    form.querySelector('.data-panel-add-card-title').textContent = `Edit ${name}`;
+    form.querySelector('button[type="submit"]').textContent = 'Save changes';
+    const nameInput = form.querySelector('input[name="name"]');
+    nameInput.value = name;
+    nameInput.readOnly = true;
+    const sel = form.querySelector('select[name="source"]');
+    if (![...sel.options].some(o => o.value === spec.source)) return;
+    sel.value = spec.source;
+    renderParamInputs(form);
+    const params = spec.source === '_literal' ? { value: spec.value } : (spec.params || {});
+    Object.entries(params).forEach(([pname, value]) => {
+      const el = form.querySelector(`[name="param_${pname}"]`);
+      if (!el || value == null) return;
+      if (el.type === 'checkbox') el.checked = !!value;
+      else el.value = typeof value === 'string' ? value : JSON.stringify(value);
+      if (pname === 'filter_field') el.dispatchEvent(new Event('change'));
+    });
+    const filterValue = form.querySelector('[name="param_filter_value"]');
+    if (filterValue && params.filter_value != null) filterValue.value = params.filter_value;
+    const first = form.querySelector('#ac-binding-params input, #ac-binding-params select');
+    if (first) first.focus();
+  }
+
+  function hideForm() {
+    renderBindings();
+  }
+
+  function showNameError(form, text) {
+    const el = form.querySelector('#ac-binding-name-error');
+    if (!el) return;
+    el.textContent = text;
+    el.hidden = !text;
+  }
+
+  function renderSources(form) {
+    const sel = form.querySelector('select[name="source"]');
+    const groups = [
+      ['Values', registry.filter(s => s.kind === 'literal')],
+      ['Data sources', registry.filter(s => s.kind === 'source')],
+      ['Collections', registry.filter(s => s.kind === 'collection')]
+    ];
+    sel.innerHTML = groups
+      .filter(([, list]) => list.length > 0)
+      .map(([label, list]) =>
+        `<optgroup label="${escape(label)}">` +
+        list.map(s => `<option value="${escape(s.name)}">${escape(s.label || s.name)}</option>`).join('') +
+        '</optgroup>')
+      .join('');
+    renderParamInputs(form);
+  }
+
+  function renderParamInputs(form) {
+    const sel = form.querySelector('select[name="source"]');
+    const source = registry.find(s => s.name === sel.value);
+    const target = form.querySelector('#ac-binding-params');
+    if (!source) { target.innerHTML = ''; return; }
+    target.innerHTML = Object.entries(source.params || {})
+      .map(([pname, spec]) => paramInputHTML(pname, spec || {}))
+      .join('');
+    if (source.kind === 'collection') wireFilterValue(form, source);
+  }
+
+  // One input per param spec: allowed -> select (with labels), integer ->
+  // number with min/max from range, boolean -> checkbox, else text.
+  function paramInputHTML(pname, spec, allowedOverride) {
+    const label = `<span class="data-panel-field-label">${escape(pname)}</span>`;
+    const allowed = allowedOverride || spec.allowed;
+    if (allowed) {
+      const labels = spec.labels || {};
+      const blank = spec.default == null ? '<option value="">— none —</option>' : '';
+      const opts = allowed.map(v =>
+        `<option value="${escape(v)}" ${String(spec.default) === String(v) ? 'selected' : ''}>${escape(labels[v] || v)}</option>`
+      ).join('');
+      return `<label class="data-panel-field">${label}<select name="param_${escape(pname)}">${blank}${opts}</select></label>`;
+    }
+    if (spec.type === 'integer') {
+      const range = Array.isArray(spec.range) ? `min="${escape(spec.range[0])}" max="${escape(spec.range[1])}"` : '';
+      return `<label class="data-panel-field">${label}<input type="number" name="param_${escape(pname)}" ${range} value="${escape(spec.default ?? '')}"></label>`;
+    }
+    if (spec.type === 'boolean') {
+      return `<label class="data-panel-field data-panel-field-inline"><input type="checkbox" name="param_${escape(pname)}" ${spec.default ? 'checked' : ''}>${label}</label>`;
+    }
+    return `<label class="data-panel-field">${label}<input type="text" name="param_${escape(pname)}" value="${escape(spec.default ?? '')}"></label>`;
+  }
+
+  // When the chosen filter field is a select field, offer its options.
+  function wireFilterValue(form, source) {
+    const fieldSel = form.querySelector('[name="param_filter_field"]');
+    if (!fieldSel) return;
+    fieldSel.addEventListener('change', () => {
+      const field = (source.fields || []).find(f => f.id === fieldSel.value);
+      const current = form.querySelector('[name="param_filter_value"]');
+      if (!current) return;
+      const options = field && field.type === 'select' ? field.options : null;
+      current.closest('label').outerHTML = paramInputHTML('filter_value', source.params.filter_value || {}, options);
+    });
+  }
+
+  function onSave(e) {
+    e.preventDefault();
+    const form = e.target;
+    const name = form.name.value.trim();
+    if (!NAME_RE.test(name)) {
+      showNameError(form, 'Use lowercase letters, digits and underscores, starting with a letter.');
+      form.querySelector('input[name="name"]').focus();
+      return;
+    }
+    if (bindings[name] && form.dataset.editing !== name && !window.confirm(`A binding named "${name}" already exists. Replace it?`)) return;
+    const sourceName = form.source.value;
+    const source = registry.find(s => s.name === sourceName);
+    if (!source) { showPanelMessage('Pick a source.'); return; }
+    const params = {};
+    Object.keys(source.params || {}).forEach(pname => {
+      const el = form.querySelector(`[name="param_${pname}"]`);
+      if (!el) return;
+      if (el.type === 'checkbox') params[pname] = el.checked;
+      else if (el.type === 'number') params[pname] = el.value === '' ? null : Number(el.value);
+      else params[pname] = el.value === '' ? null : el.value;
+    });
+    if (sourceName === '_literal') {
+      bindings[name] = { source: '_literal', value: params.value };
+    } else {
+      bindings[name] = { source: sourceName, params: params };
+    }
+    persistBindings();
+    hideForm();
+  }
+
+  function escape(s) {
+    return String(s).replace(/[<>&"']/g, c => ({ '<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;',"'":'&#39;' }[c]));
+  }
+
+  document.addEventListener('DOMContentLoaded', init);
+})();

data/app/assets/javascripts/active_canvas/admin/field_builder.js

@@ -0,0 +1,84 @@
+(function() {
+  const builder = document.getElementById('ac-field-builder');
+  if (!builder) return;
+
+  const list = document.getElementById('ac-fields-list');
+  const template = document.getElementById('ac-field-row-template');
+  const hidden = document.getElementById('ac-fields-json');
+  const form = builder.closest('form');
+
+  function addRow(field) {
+    const row = template.content.firstElementChild.cloneNode(true);
+    if (field) {
+      row.querySelector('[data-field="id"]').value = field.id || '';
+      row.querySelector('[data-field="label"]').value = field.label || '';
+      row.querySelector('[data-field="type"]').value = field.type || 'text';
+      row.querySelector('[data-field="required"]').checked = !!field.required;
+      row.querySelector('[data-field="options"]').value = (field.options || []).join(', ');
+    }
+    toggleOptions(row);
+    showId(row);
+    wireRow(row);
+    list.appendChild(row);
+    return row;
+  }
+
+  function wireRow(row) {
+    row.querySelector('[data-field="label"]').addEventListener('input', () => showId(row));
+    row.querySelector('[data-field="type"]').addEventListener('change', () => toggleOptions(row));
+    row.querySelector('[data-remove]').addEventListener('click', () => {
+      const existing = row.querySelector('[data-field="id"]').value.trim() !== '';
+      if (existing && !confirm('Remove this field? Existing item data for it is kept but no longer shown.')) return;
+      row.remove();
+    });
+    row.querySelector('[data-move="up"]').addEventListener('click', () => {
+      if (row.previousElementSibling) list.insertBefore(row, row.previousElementSibling);
+    });
+    row.querySelector('[data-move="down"]').addEventListener('click', () => {
+      if (row.nextElementSibling) list.insertBefore(row.nextElementSibling, row);
+    });
+  }
+
+  function toggleOptions(row) {
+    const isSelect = row.querySelector('[data-field="type"]').value === 'select';
+    row.querySelector('[data-field="options"]').hidden = !isSelect;
+  }
+
+  // Existing rows show their stable id; new rows preview the id the server
+  // will derive from the label. Approximation: the server also transliterates
+  // accents and de-duplicates, so the saved id may differ.
+  function showId(row) {
+    const idEl = row.querySelector('[data-field-id-display]');
+    const existing = row.querySelector('[data-field="id"]').value.trim();
+    if (existing) { idEl.textContent = existing; return; }
+    const label = row.querySelector('[data-field="label"]').value;
+    let id = label.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
+    if (id && !/^[a-z]/.test(id)) id = 'f_' + id;
+    idEl.textContent = id ? `${id} (assigned on save)` : '';
+  }
+
+  function serialize() {
+    const rows = Array.from(list.querySelectorAll('.ac-field-row'));
+    const fields = rows.map(row => {
+      const id = row.querySelector('[data-field="id"]').value.trim();
+      const type = row.querySelector('[data-field="type"]').value;
+      const options = row.querySelector('[data-field="options"]').value
+        .split(',').map(s => s.trim()).filter(s => s.length > 0);
+      const field = {
+        label: row.querySelector('[data-field="label"]').value.trim(),
+        type: type,
+        required: row.querySelector('[data-field="required"]').checked,
+        options: type === 'select' ? options : []
+      };
+      if (id) field.id = id;
+      return field;
+    });
+    hidden.value = JSON.stringify(fields);
+  }
+
+  document.getElementById('ac-add-field-btn').addEventListener('click', () => addRow(null).querySelector('[data-field="label"]').focus());
+  if (form) form.addEventListener('submit', serialize);
+
+  const initial = JSON.parse(document.getElementById('ac-fields-data').textContent || '[]');
+  initial.forEach(addRow);
+})();

data/app/assets/javascripts/active_canvas/admin/media_select_preview.js

@@ -0,0 +1,11 @@
+(function() {
+  document.querySelectorAll('select[data-media-select]').forEach(function(select) {
+    const preview = select.parentElement.querySelector('.ac-media-preview');
+    if (!preview) return;
+    select.addEventListener('change', function() {
+      const url = select.options[select.selectedIndex].dataset.url;
+      if (url) { preview.src = url; preview.style.display = ''; }
+      else { preview.removeAttribute('src'); preview.style.display = 'none'; }
+    });
+  });
+})();

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

@@ -0,0 +1,81 @@
+/**
+ * ActiveCanvas Editor - Bindings store
+ *
+ * The one place that knows where the page's bindings live while editing
+ * (localStorage, seeded from the server on every load) and which data
+ * sources exist. Every other module reads and writes through here.
+ *
+ * Events on document:
+ *   ac:bindings-changed  { bindings }   after write()
+ *   ac:registry-loaded   { registry }   after setRegistry()
+ */
+(function() {
+  'use strict';
+
+  const container = document.getElementById('data-panel-container');
+  const pageId = container ? container.dataset.pageId : null;
+  const key = pageId ? `ac:bindings:${pageId}` : null;
+  let registry = [];
+
+  function read() {
+    if (!key) return {};
+    try {
+      return JSON.parse(localStorage.getItem(key) || '{}') || {};
+    } catch (e) {
+      return {};
+    }
+  }
+
+  function save(bindings) {
+    if (!key) return;
+    try { localStorage.setItem(key, JSON.stringify(bindings)); } catch (e) { /* storage unavailable */ }
+  }
+
+  function write(bindings) {
+    save(bindings);
+    document.dispatchEvent(new CustomEvent('ac:bindings-changed', { detail: { bindings } }));
+  }
+
+  function readJson() {
+    return JSON.stringify(read());
+  }
+
+  function setRegistry(list) {
+    registry = Array.isArray(list) ? list : [];
+    document.dispatchEvent(new CustomEvent('ac:registry-loaded', { detail: { registry } }));
+  }
+
+  function source(name) {
+    return registry.find(s => s.name === name) || null;
+  }
+
+  // True when the binding resolves to something a loop can iterate.
+  function isList(name) {
+    const spec = read()[name];
+    if (!spec) return false;
+    if (spec.source === '_literal') return Array.isArray(spec.value);
+    const src = source(spec.source);
+    return !!src && (src.kind === 'collection' || src.list === true);
+  }
+
+  function listNames() {
+    return Object.keys(read()).filter(isList);
+  }
+
+  function itemName(name) {
+    const spec = read()[name];
+    const src = spec ? source(spec.source) : null;
+    return (src && src.item_name) || 'item';
+  }
+
+  // The server's copy wins on load: the page may have been saved elsewhere.
+  const seed = document.getElementById('ac-server-bindings');
+  if (seed) {
+    try { save(JSON.parse(seed.textContent || '{}')); } catch (e) { save({}); }
+  }
+
+  window.ActiveCanvasBindings = {
+    pageId, read, save, write, readJson, setRegistry, source, isList, listNames, itemName,
+    registry: () => registry
+  };
+})();