@officexapp/catalogs-cli 0.2.6 → 0.2.7

package/dist/index.js

@@ -853,20 +853,64 @@ function buildPreviewHtml(schema, port) {
     .dev-banner .stub-tags { margin-left: auto; display: flex; gap: 6px; }
     .dev-banner .stub-tag { background: rgba(255,255,255,0.1); border-radius: 3px; padding: 1px 6px; font-size: 11px; color: #fbbf24; }
 
-    /* Dev page nav */
-    .dev-page-nav {
-      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 99998;
-      background: rgba(26,26,46,0.95); backdrop-filter: blur(12px); border-radius: 16px;
-      padding: 6px; display: flex; gap: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.3);
-      max-width: calc(100vw - 32px); overflow-x: auto;
+    /* Pages mindmap overlay */
+    .pages-overlay {
+      position: fixed; inset: 0; z-index: 99990; background: rgba(10,10,20,0.92);
+      backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center;
+      font-family: var(--font-display);
+    }
+    .pages-overlay.open { display: flex; }
+    .pages-overlay .close-btn {
+      position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.1);
+      border: none; color: white; width: 32px; height: 32px; border-radius: 8px;
+      cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;
+    }
+    .pages-overlay .close-btn:hover { background: rgba(255,255,255,0.2); }
+    .mindmap-container { position: relative; padding: 40px; }
+    .mindmap-container svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
+    .mindmap-nodes { position: relative; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-start; max-width: 900px; }
+    .mindmap-node {
+      background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15);
+      border-radius: 14px; padding: 14px 20px; min-width: 140px; text-align: center;
+      cursor: pointer; transition: all 0.2s ease; position: relative;
     }
-    .dev-page-nav button {
-      padding: 6px 14px; border-radius: 12px; font-size: 12px; font-family: var(--font-display);
-      font-weight: 500; border: none; cursor: pointer; white-space: nowrap;
-      transition: all 0.2s ease; color: rgba(255,255,255,0.6); background: transparent;
+    .mindmap-node:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
+    .mindmap-node.entry { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); }
+    .mindmap-node.current { border-color: var(--theme-color); box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }
+    .mindmap-node .node-title { color: white; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
+    .mindmap-node .node-id { color: rgba(255,255,255,0.35); font-size: 10px; font-family: monospace; }
+    .mindmap-node .node-badge {
+      position: absolute; top: -8px; right: -8px; background: #4ade80; color: #0a2010;
+      font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 6px; text-transform: uppercase;
+    }
+    .mindmap-node .node-components { color: rgba(255,255,255,0.3); font-size: 10px; margin-top: 4px; }
+    .mindmap-edge-label {
+      position: absolute; background: rgba(251,191,36,0.15); color: #fbbf24;
+      font-size: 9px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none;
+    }
+    .dev-banner .stub-tag.clickable { cursor: pointer; transition: all 0.15s ease; }
+    .dev-banner .stub-tag.clickable:hover { background: rgba(255,255,255,0.2); color: #a5b4fc; }
+
+    /* Element inspector (local dev) */
+    .inspector-highlight {
+      position: fixed; z-index: 99997; pointer-events: none; border: 2px solid #6366f1;
+      background: rgba(99,102,241,0.06); border-radius: 8px; transition: all 80ms ease-out;
+    }
+    .inspector-tooltip {
+      position: fixed; z-index: 99998; pointer-events: none; background: #1e1b4b;
+      color: #e0e7ff; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
+      padding: 6px 10px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+      max-width: 360px;
+    }
+    .inspector-tooltip .ref { font-weight: 700; color: #a5b4fc; }
+    .inspector-tooltip .type { color: rgba(165,180,252,0.5); margin-left: 6px; }
+    .inspector-tooltip .hint { color: rgba(165,180,252,0.3); font-size: 9px; margin-top: 3px; }
+    .inspector-active-banner {
+      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 99998;
+      background: rgba(99,102,241,0.92); color: white; font-size: 11px; font-weight: 600;
+      padding: 6px 14px; border-radius: 10px; font-family: system-ui; pointer-events: none;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
     }
-    .dev-page-nav button:hover { color: white; background: rgba(255,255,255,0.1); }
-    .dev-page-nav button.active { color: white; background: var(--theme-color); }
 
     /* Checkout stub */
     .checkout-stub {
@@ -893,8 +937,16 @@ function buildPreviewHtml(schema, port) {
     <span class="stub-tags">
       <span class="stub-tag">Checkout: stubbed</span>
       <span class="stub-tag">Analytics: off</span>
+      <span class="stub-tag clickable" id="pages-btn">Pages</span>
     </span>
   </div>
+  <div class="pages-overlay" id="pages-overlay">
+    <button class="close-btn" id="pages-close">&times;</button>
+    <div class="mindmap-container" id="mindmap-container"></div>
+  </div>
+  <div class="inspector-highlight" id="inspector-highlight" style="display:none"></div>
+  <div class="inspector-tooltip" id="inspector-tooltip" style="display:none"></div>
+  <div class="inspector-active-banner" id="inspector-banner" style="display:none">Inspector active &mdash; hover elements, click to copy</div>
   <div id="catalog-root"></div>
 
   <script id="__catalog_data" type="application/json">${schemaJson}</script>
@@ -1384,6 +1436,12 @@ function buildPreviewHtml(schema, port) {
       const [formState, setFormState] = React.useState({});
       const [history, setHistory] = React.useState([]);
 
+      // Expose navigation for mindmap
+      React.useEffect(() => {
+        window.__devNavigateTo = (id) => { setCurrentPageId(id); setHistory([]); window.scrollTo({ top: 0, behavior: 'smooth' }); };
+        window.__devSetCurrentPage && window.__devSetCurrentPage(currentPageId);
+      }, [currentPageId]);
+
       const page = currentPageId ? pages[currentPageId] : null;
       const isCover = page?.layout === 'cover';
       const isLastPage = (() => {
@@ -1424,7 +1482,7 @@ function buildPreviewHtml(schema, port) {
 
       // Cover page layout
       if (isCover) {
-        return h('div', null,
+        return h('div', { 'data-page-id': currentPageId },
           h('div', {
             className: 'cf-page cf-noise min-h-screen flex items-center justify-center relative overflow-hidden',
             style: {
@@ -1435,7 +1493,9 @@ function buildPreviewHtml(schema, port) {
             h('div', { className: 'cf-cover-overlay absolute inset-0' }),
             h('div', { className: 'cf-cover-content relative max-w-2xl mx-auto px-6 py-20 text-center text-white' },
               h('div', { className: 'page-enter-active space-y-7 flex flex-col items-stretch text-center' },
-                ...components.map((comp, i) => h(RenderComponent, { key: comp.id || i, comp, isCover: true, formState, onFieldChange })),
+                ...components.map((comp, i) => h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type },
+                  h(RenderComponent, { comp, isCover: true, formState, onFieldChange })
+                )),
                 // CTA button
                 h('div', { className: 'mt-8' },
                   h('button', {
@@ -1446,9 +1506,7 @@ function buildPreviewHtml(schema, port) {
                 )
               )
             )
-          ),
-          // Page nav
-          h(PageNav, { pageKeys, pages, currentPageId, onSelect: (id) => { setCurrentPageId(id); setHistory([]); } })
+          )
         );
       }
 
@@ -1457,7 +1515,7 @@ function buildPreviewHtml(schema, port) {
       const progressSteps = catalog.settings?.progress_steps;
       const topBarEnabled = topBar?.enabled !== false && catalog.settings?.top_bar;
 
-      return h('div', null,
+      return h('div', { 'data-page-id': currentPageId },
         h('div', {
           className: 'cf-page min-h-screen',
           style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)' },
@@ -1482,7 +1540,9 @@ function buildPreviewHtml(schema, port) {
           h('div', { className: 'max-w-2xl mx-auto px-6 pb-8', style: { paddingTop: topBarEnabled ? '100px' : '60px' } },
             page.description ? h('p', { className: 'text-sm text-gray-400 mb-8 text-center font-medium tracking-wide', style: { fontFamily: 'var(--font-display)' } }, page.description) : null,
             h('div', { className: 'page-enter-active space-y-5' },
-              ...components.map((comp, i) => h(RenderComponent, { key: comp.id || i, comp, isCover: false, formState, onFieldChange })),
+              ...components.map((comp, i) => h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type },
+                h(RenderComponent, { comp, isCover: false, formState, onFieldChange })
+              )),
               // Navigation button
               !page.hide_navigation ? h('div', { className: 'mt-8' },
                 h('button', {
@@ -1500,9 +1560,7 @@ function buildPreviewHtml(schema, port) {
             ),
             h('div', { className: 'mt-10 text-center text-[11px] text-gray-300 font-medium tracking-wide', style: { fontFamily: 'var(--font-display)' } }, 'Powered by Catalog Kit'),
           )
-        ),
-        // Page nav
-        h(PageNav, { pageKeys, pages, currentPageId, onSelect: (id) => { setCurrentPageId(id); setHistory([]); } })
+        )
       );
     }
 
@@ -1532,16 +1590,6 @@ function buildPreviewHtml(schema, port) {
       );
     }
 
-    function PageNav({ pageKeys, pages, currentPageId, onSelect }) {
-      return h('div', { className: 'dev-page-nav' },
-        ...pageKeys.map(key => h('button', {
-          key,
-          className: key === currentPageId ? 'active' : '',
-          onClick: () => onSelect(key),
-        }, pages[key].title || key))
-      );
-    }
-
     // --- Auto-reload via SSE ---
     const evtSource = new EventSource('/__dev_sse');
     evtSource.onmessage = (e) => {
@@ -1553,6 +1601,224 @@ function buildPreviewHtml(schema, port) {
     // --- Mount ---
     const root = ReactDOM.createRoot(document.getElementById('catalog-root'));
     root.render(h(CatalogPreview, { catalog: schema }));
+
+    // --- Pages mindmap ---
+    (function initPagesMindmap() {
+      const btn = document.getElementById('pages-btn');
+      const overlay = document.getElementById('pages-overlay');
+      const closeBtn = document.getElementById('pages-close');
+      const container = document.getElementById('mindmap-container');
+      let currentPageRef = { id: schema.routing?.entry || Object.keys(schema.pages || {})[0] };
+
+      // Expose setter for CatalogPreview to update current page
+      window.__devSetCurrentPage = (id) => { currentPageRef.id = id; };
+
+      btn.addEventListener('click', () => {
+        overlay.classList.add('open');
+        renderMindmap();
+      });
+      closeBtn.addEventListener('click', () => overlay.classList.remove('open'));
+      overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.remove('open'); });
+
+      function renderMindmap() {
+        const pages = schema.pages || {};
+        const routing = schema.routing || {};
+        const edges = routing.edges || [];
+        const entry = routing.entry || Object.keys(pages)[0];
+        const pageIds = Object.keys(pages);
+
+        // Build adjacency for layout (BFS layers)
+        const adj = {};
+        pageIds.forEach(id => { adj[id] = []; });
+        edges.forEach(e => { if (adj[e.from]) adj[e.from].push(e.to); });
+
+        // BFS to assign layers
+        const layers = {};
+        const visited = new Set();
+        const queue = [entry];
+        visited.add(entry);
+        layers[entry] = 0;
+        while (queue.length > 0) {
+          const id = queue.shift();
+          for (const next of (adj[id] || [])) {
+            if (!visited.has(next)) {
+              visited.add(next);
+              layers[next] = (layers[id] || 0) + 1;
+              queue.push(next);
+            }
+          }
+        }
+        // Assign orphans
+        pageIds.forEach(id => { if (layers[id] === undefined) layers[id] = 999; });
+
+        // Group by layer
+        const layerGroups = {};
+        pageIds.forEach(id => {
+          const l = layers[id];
+          if (!layerGroups[l]) layerGroups[l] = [];
+          layerGroups[l].push(id);
+        });
+        const sortedLayers = Object.keys(layerGroups).map(Number).sort((a, b) => a - b);
+
+        // Render nodes in rows
+        let html = '<div style="display:flex;flex-direction:column;align-items:center;gap:32px;">';
+        const nodePositions = {};
+        let rowIdx = 0;
+        for (const layer of sortedLayers) {
+          const ids = layerGroups[layer];
+          html += '<div style="display:flex;gap:20px;justify-content:center;flex-wrap:wrap;">';
+          ids.forEach(id => {
+            const page = pages[id];
+            const isEntry = id === entry;
+            const isCurrent = id === currentPageRef.id;
+            const compCount = (page.components || []).length;
+            const cls = 'mindmap-node' + (isEntry ? ' entry' : '') + (isCurrent ? ' current' : '');
+            html += '<div class="' + cls + '" data-node-id="' + id + '">';
+            if (isEntry) html += '<span class="node-badge">entry</span>';
+            html += '<div class="node-title">' + (page.title || id) + '</div>';
+            html += '<div class="node-id">' + id + '</div>';
+            html += '<div class="node-components">' + compCount + ' component' + (compCount !== 1 ? 's' : '') + '</div>';
+            html += '</div>';
+          });
+          html += '</div>';
+          rowIdx++;
+        }
+        html += '</div>';
+
+        container.innerHTML = html;
+
+        // Draw SVG edges after layout
+        requestAnimationFrame(() => {
+          const containerRect = container.getBoundingClientRect();
+          const nodeEls = container.querySelectorAll('[data-node-id]');
+          const nodeRects = {};
+          nodeEls.forEach(el => { nodeRects[el.dataset.nodeId] = el.getBoundingClientRect(); });
+
+          let svgContent = '';
+          edges.forEach(edge => {
+            const fromRect = nodeRects[edge.from];
+            const toRect = nodeRects[edge.to];
+            if (!fromRect || !toRect) return;
+            const x1 = fromRect.left + fromRect.width / 2 - containerRect.left;
+            const y1 = fromRect.top + fromRect.height - containerRect.top;
+            const x2 = toRect.left + toRect.width / 2 - containerRect.left;
+            const y2 = toRect.top - containerRect.top;
+            const midY = (y1 + y2) / 2;
+            const hasConditions = edge.conditions && edge.conditions.length > 0;
+            const color = hasConditions ? '#fbbf24' : 'rgba(255,255,255,0.25)';
+            svgContent += '<path d="M' + x1 + ',' + y1 + ' C' + x1 + ',' + midY + ' ' + x2 + ',' + midY + ' ' + x2 + ',' + y2 + '" fill="none" stroke="' + color + '" stroke-width="2" stroke-dasharray="' + (hasConditions ? '6,4' : 'none') + '"/>';
+            // Arrow
+            svgContent += '<polygon points="' + (x2-4) + ',' + (y2-6) + ' ' + x2 + ',' + y2 + ' ' + (x2+4) + ',' + (y2-6) + '" fill="' + color + '"/>';
+            // Condition label
+            if (hasConditions) {
+              const lx = (x1 + x2) / 2;
+              const ly = midY - 8;
+              const label = edge.conditions.map(c => c.field + ' ' + c.operator + ' ' + c.value).join(', ');
+              svgContent += '<text x="' + lx + '" y="' + ly + '" text-anchor="middle" fill="#fbbf24" font-size="9" font-family="monospace">' + label + '</text>';
+            }
+          });
+
+          const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+          svgEl.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;';
+          svgEl.innerHTML = svgContent;
+          // Remove old svg
+          const oldSvg = container.querySelector('svg');
+          if (oldSvg) oldSvg.remove();
+          container.insertBefore(svgEl, container.firstChild);
+        });
+
+        // Click nodes to navigate
+        container.querySelectorAll('[data-node-id]').forEach(el => {
+          el.addEventListener('click', () => {
+            const id = el.dataset.nodeId;
+            window.__devNavigateTo && window.__devNavigateTo(id);
+            overlay.classList.remove('open');
+          });
+        });
+      }
+    })();
+
+    // --- Element Inspector (Shift+Alt) ---
+    (function initInspector() {
+      const highlight = document.getElementById('inspector-highlight');
+      const tooltip = document.getElementById('inspector-tooltip');
+      const banner = document.getElementById('inspector-banner');
+      let active = false;
+
+      document.addEventListener('keydown', (e) => {
+        if (e.shiftKey && e.altKey && !active) {
+          active = true;
+          banner.style.display = 'block';
+          document.body.style.cursor = 'crosshair';
+        }
+      });
+      document.addEventListener('keyup', (e) => {
+        if (!e.shiftKey || !e.altKey) {
+          active = false;
+          banner.style.display = 'none';
+          highlight.style.display = 'none';
+          tooltip.style.display = 'none';
+          document.body.style.cursor = '';
+        }
+      });
+      window.addEventListener('blur', () => {
+        active = false;
+        banner.style.display = 'none';
+        highlight.style.display = 'none';
+        tooltip.style.display = 'none';
+        document.body.style.cursor = '';
+      });
+
+      document.addEventListener('mousemove', (e) => {
+        if (!active) return;
+        let el = e.target;
+        // Walk up to find data-component-id
+        while (el && !el.dataset?.componentId) el = el.parentElement;
+        if (!el) {
+          highlight.style.display = 'none';
+          tooltip.style.display = 'none';
+          return;
+        }
+        const compId = el.dataset.componentId;
+        const compType = el.dataset.componentType || 'unknown';
+        let pageEl = el;
+        while (pageEl && !pageEl.dataset?.pageId) pageEl = pageEl.parentElement;
+        const pageId = pageEl?.dataset?.pageId || 'unknown';
+        const rect = el.getBoundingClientRect();
+        highlight.style.display = 'block';
+        highlight.style.top = (rect.top - 2) + 'px';
+        highlight.style.left = (rect.left - 2) + 'px';
+        highlight.style.width = (rect.width + 4) + 'px';
+        highlight.style.height = (rect.height + 4) + 'px';
+        const ref = pageId + '/' + compId;
+        tooltip.style.display = 'block';
+        tooltip.style.top = Math.max(8, rect.top - 44) + 'px';
+        tooltip.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - 340)) + 'px';
+        tooltip.innerHTML = '<span class="ref">' + ref + '</span><span class="type">(' + compType + ')</span><div class="hint">click to copy</div>';
+        tooltip.dataset.ref = ref;
+        tooltip.dataset.compId = compId;
+        tooltip.dataset.compType = compType;
+        tooltip.dataset.pageId = pageId;
+      });
+
+      document.addEventListener('click', (e) => {
+        if (!active || tooltip.style.display === 'none') return;
+        e.stopPropagation();
+        e.preventDefault();
+        const data = {
+          ref: tooltip.dataset.ref,
+          page_id: tooltip.dataset.pageId,
+          component_id: tooltip.dataset.compId,
+          component_type: tooltip.dataset.compType,
+          schema_path: 'schema.pages.' + tooltip.dataset.pageId + '.components[id="' + tooltip.dataset.compId + '"]',
+          catalog_slug: schema.slug || '',
+        };
+        navigator.clipboard.writeText(JSON.stringify(data, null, 2)).then(() => {
+          tooltip.innerHTML = '<span style="color:#86efac;font-weight:700;">Copied!</span>';
+          setTimeout(() => { tooltip.style.display = 'none'; }, 1200);
+        });
+      }, true);
+    })();
   </script>
 </body>
 </html>`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@officexapp/catalogs-cli",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "CLI for Catalog Kit — upload videos, push catalogs, manage assets",
   "type": "module",
   "bin": {