zauberflote 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zauberflote",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Shared UI components for the working examples book.",
   "type": "module",
   "main": "src/ui.js",

package/src/ui.js

@@ -82,7 +82,7 @@ const ui = (() => {
       this.app = app;
       this.parent = parent || null;
       this.title = title || 'Section';
-      this.id = slugify(this.title);
+      this.sectionId = slugify(this.title);
       this.readConfig = null;
       this.listTemplate = '';
       this.actions = [];
@@ -101,13 +101,26 @@ const ui = (() => {
       this.textConfig = null;
       this.markdownConfig = null;
       this.customRenderer = null;
+      this.renderHook = null;
       this.autoConfig = null;
+      this.mockConfig = null;
       this.suppressOutput = false;
       this.noAutoRefresh = false;
       this.layoutConfig = null;
+      this.templateMode = null;
     }
     id(value) {
-      this.id = value;
+      this.sectionId = value;
+      return this;
+    }
+    mock(generator) {
+      // Signature: Smart Mocking System - show placeholder data when backend is offline.
+      this.mockConfig = generator;
+      return this;
+    }
+    onRender(callback) {
+      // Signature: Lifecycle hook for custom library initialization (Charts, Maps).
+      this.renderHook = callback;
       return this;
     }
     read(path) {
@@ -127,6 +140,11 @@ const ui = (() => {
       this.listTemplate = template || '';
       return this;
     }
+    template(name) {
+      // Signature: chapter-9 geo-search, live-poll (table display mode).
+      this.templateMode = name || 'default';
+      return this;
+    }
     listFrom(path) {
       // Signature: chapter-4/4-4-pagination (items list from query results).
       this.listFromPath = path;
@@ -501,7 +519,7 @@ const ui = (() => {
 
     if (section.actions.length > 0) {
       section.actions.forEach((action) => {
-        actionWrap.appendChild(renderActionForm(action, output, section.appStore, sectionInputs, section));
+        actionWrap.appendChild(renderActionForm(action, output, section.appStore, sectionInputs, section, selectBindings));
       });
       root.appendChild(actionWrap);
     }
@@ -592,6 +610,9 @@ const ui = (() => {
           customWrap.appendChild(result);
         }
       }
+      if (section.renderHook) {
+        section.renderHook({ data, store: section.appStore, element: root });
+      }
     };
 
     const refresh = async () => {
@@ -599,16 +620,65 @@ const ui = (() => {
       if (section.readConfig) {
         const payload = buildQueryPayload(section, sectionInputs, section.appStore);
         const path = buildQueryPath(section.readConfig.path, payload);
-        const data = await request(section.readConfig, null, false, payload, section.appStore, path);
+        let data;
+        try {
+          data = await request(section.readConfig, null, false, payload, section.appStore, path);
+          if (!data.ok && section.mockConfig) {
+            throw new Error("Backend error");
+          }
+          root.classList.remove('is-mocked');
+          root.style.borderStyle = '';
+        } catch (e) {
+          if (section.mockConfig || section.readConfig) {
+            console.warn(`⚠️ Mocking data for section "${section.title}"`);
+            let mockData;
+            if (section.mockConfig) {
+              mockData = typeof section.mockConfig === 'function' ? section.mockConfig(section.appStore) : section.mockConfig;
+            } else {
+              // Auto-inference logic
+              if (section.listTemplate) {
+                mockData = [
+                  { id: 1, name: "Sample Item 1", amount: 100, description: "Mocked data" },
+                  { id: 2, name: "Sample Item 2", amount: 200, description: "Mocked data" }
+                ];
+              } else if (section.kpiConfig) {
+                mockData = {};
+                section.kpiConfig.items.forEach(item => { if (item.key) mockData[item.key] = 0; });
+              } else {
+                mockData = { message: "Mocked response" };
+              }
+            }
+            data = { ok: true, status: 200, json: { data: mockData }, data: mockData };
+            root.classList.add('is-mocked');
+            root.style.borderStyle = 'dashed';
+            root.style.borderColor = '#cbd5e1'; // slate-300
+            if (!root.querySelector('.mock-badge')) {
+              const badge = document.createElement('span');
+              badge.className = 'mock-badge ml-2 inline-flex items-center rounded-md bg-amber-50 px-2 py-1 text-xs font-medium text-amber-700 ring-1 ring-inset ring-amber-600/20';
+              badge.textContent = 'MOCKED';
+              root.querySelector('h2').appendChild(badge);
+            }
+          } else {
+            root.classList.remove('is-mocked');
+            root.style.borderStyle = '';
+            const badge = root.querySelector('.mock-badge');
+            if (badge) badge.remove();
+            throw e;
+          }
+        }
+        if (!root.classList.contains('is-mocked')) {
+          const badge = root.querySelector('.mock-badge');
+          if (badge) badge.remove();
+        }
         section.lastData = data.json || null;
         applyStore(section.appStore, section.storeMap, data.json);
-        const hasExplicitView = section.listFromPath || section.listTemplate || section.kpiConfig || section.jsonConfig || section.textConfig || section.markdownConfig || section.customRenderer;
+        const hasExplicitView = section.listFromPath || section.listTemplate || section.templateMode || section.kpiConfig || section.jsonConfig || section.textConfig || section.markdownConfig || section.customRenderer;
         if (!hasExplicitView && !section.autoConfig) {
           section.autoConfig = { path: section.listFromPath || 'data' };
         }
         if (section.listFromPath) {
           renderList(listWrap, section, { data: getPath(section.appStore, section.listFromPath) });
-        } else if (section.listTemplate) {
+        } else if (section.listTemplate || section.templateMode) {
           renderList(listWrap, section, data);
         }
         if (metaEl && section.metaConfig) {
@@ -649,6 +719,8 @@ const ui = (() => {
 
     section.refresh = refresh;
 
+    window.addEventListener(`ui:refresh:${section.sectionId}`, refresh);
+
     return { root, refresh };
   }
 
@@ -830,12 +902,37 @@ const ui = (() => {
       target.appendChild(empty);
       return;
     }
+    // Table template mode
+    if (section.templateMode === 'table' && rows.length > 0) {
+      const table = document.createElement('table');
+      table.className = 'w-full text-sm border-collapse';
+      const keys = Object.keys(rows[0]);
+      const thead = document.createElement('thead');
+      thead.innerHTML = '<tr class="border-b border-slate-200">' + keys.map(k => `<th class="text-left py-2 px-3 font-medium text-slate-600">${k}</th>`).join('') + '</tr>';
+      table.appendChild(thead);
+      const tbody = document.createElement('tbody');
+      rows.forEach(row => {
+        const tr = document.createElement('tr');
+        tr.className = 'border-b border-slate-100 hover:bg-slate-50';
+        tr.innerHTML = keys.map(k => `<td class="py-2 px-3 text-slate-700">${row[k] ?? ''}</td>`).join('');
+        tbody.appendChild(tr);
+      });
+      table.appendChild(tbody);
+      target.appendChild(table);
+      return;
+    }
     rows.forEach((row) => {
       const card = document.createElement('div');
       card.className = 'rounded border border-slate-200 px-3 py-2 space-y-2';
       if (section.listTemplate) {
         const label = document.createElement('div');
-        label.textContent = renderTemplate(section.listTemplate, row);
+        const rendered = renderTemplate(section.listTemplate, row);
+        // Use innerHTML if template contains HTML tags, otherwise textContent
+        if (/<[^>]+>/.test(rendered)) {
+          label.innerHTML = rendered;
+        } else {
+          label.textContent = rendered;
+        }
         card.appendChild(label);
       } else {
         const label = document.createElement('div');
@@ -878,13 +975,16 @@ const ui = (() => {
     });
   }
 
-  function renderActionForm(action, output, appStore, sectionInputs, section) {
+  function renderActionForm(action, output, appStore, sectionInputs, section, selectBindings) {
     const wrap = document.createElement('div');
     wrap.className = 'grid gap-2 sm:grid-cols-4';
     const fieldInputs = {};
     action.fieldList.forEach((field) => {
       const input = renderField(field, appStore);
       fieldInputs[field.key] = input;
+      if (field.optionsFrom && selectBindings) {
+        selectBindings.push({ field, input });
+      }
       wrap.appendChild(input);
     });
     const btn = document.createElement('button');
@@ -1477,9 +1577,36 @@ const ui = (() => {
     }
   }
 
+  function loadScript(url) {
+    return new Promise((resolve, reject) => {
+      if (document.querySelector(`script[src="${url}"]`)) return resolve();
+      const s = document.createElement('script');
+      s.src = url;
+      s.onload = resolve;
+      s.onerror = reject;
+      document.head.appendChild(s);
+    });
+  }
+
+  function loadCSS(url) {
+    if (document.querySelector(`link[href="${url}"]`)) return;
+    const l = document.createElement('link');
+    l.rel = 'stylesheet';
+    l.href = url;
+    document.head.appendChild(l);
+  }
+
   autoMountPending();
 
-  return { app, mount };
+  // Global listener to bridge ui-refresh events to section-specific events
+  window.addEventListener('ui-refresh', (e) => {
+    const id = e.detail && e.detail.id;
+    if (id) {
+      window.dispatchEvent(new CustomEvent(`ui:refresh:${id}`));
+    }
+  });
+
+  return { app, mount, loadScript, loadCSS };
 })();
 
 export default ui;

package/.env

@@ -1 +0,0 @@
-TOKEN=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