cmssy-cli 0.21.0 → 0.25.0

package/dist/dev-ui/app.js

@@ -20,6 +20,27 @@ let availableTags = [];
 async function init() {
   await loadBlocks();
   setupSSE();
+
+  // Check for block parameter in URL
+  const urlParams = new URLSearchParams(window.location.search);
+  const blockParam = urlParams.get('block');
+  if (blockParam) {
+    const block = blocks.find(b => b.name === blockParam);
+    if (block) {
+      await selectBlock(blockParam);
+    }
+  }
+}
+
+// Update URL with current block (without page reload)
+function updateUrlWithBlock(blockName) {
+  const url = new URL(window.location);
+  if (blockName) {
+    url.searchParams.set('block', blockName);
+  } else {
+    url.searchParams.delete('block');
+  }
+  window.history.replaceState({}, '', url);
 }
 
 // Load all blocks from API
@@ -295,26 +316,70 @@ function renderBlockItem(block) {
   `;
 }
 
-// Select a block
+// Select a block (lazy loads config)
 async function selectBlock(blockName) {
   const block = blocks.find(b => b.name === blockName);
   if (!block) return;
 
   currentBlock = block;
-  renderBlocksList(); // Update active state
+  updateUrlWithBlock(blockName);
+  renderBlocksList();
 
-  // Load preview data
+  // Show loading state in editor
+  document.getElementById('preview-title').textContent = block.displayName || block.name;
+  document.getElementById('editor-subtitle').textContent = block.name;
+  document.getElementById('editor-content').innerHTML = `
+    <div class="loading">
+      <div class="spinner"></div>
+      <span>Loading properties...</span>
+    </div>
+  `;
+
+  // Lazy load full config and preview data
   try {
-    const response = await fetch(`/api/preview/${blockName}`);
-    previewData = await response.json();
+    const response = await fetch(`/api/blocks/${blockName}/config`);
+    if (!response.ok) {
+      throw new Error('Failed to load block config');
+    }
+    const config = await response.json();
+
+    // Update block with loaded config
+    block.schema = config.schema;
+    block.category = config.category;
+    block.tags = config.tags;
+    block.displayName = config.displayName;
+    block.description = config.description;
+    previewData = config.previewData || {};
+
+    // For templates, also load pages info
+    if (block.type === 'template') {
+      try {
+        const pagesResponse = await fetch(`/api/templates/${blockName}/pages`);
+        if (pagesResponse.ok) {
+          const templateData = await pagesResponse.json();
+          block.pages = templateData.pages;
+          block.layoutSlots = templateData.layoutSlots;
+        }
+      } catch (err) {
+        console.warn('Could not load template pages:', err);
+      }
+    }
+
+    // Update filters if we got new category/tags
+    populateFilters();
   } catch (error) {
-    console.error('Failed to load preview data:', error);
-    previewData = {};
+    console.error('Failed to load block config:', error);
+    document.getElementById('editor-content').innerHTML = `
+      <div class="editor-empty" style="color: #e53935;">
+        Failed to load block config.<br>
+        <small>Check console for details.</small>
+      </div>
+    `;
+    return;
   }
 
   // Update UI
   document.getElementById('preview-title').textContent = block.displayName || block.name;
-  document.getElementById('editor-subtitle').textContent = block.name;
 
   // Show publish button
   const publishBtn = document.getElementById('publish-btn');
@@ -334,27 +399,51 @@ function renderPreview() {
   if (!currentBlock) return;
 
   const previewContent = document.getElementById('preview-content');
-  previewContent.innerHTML = `
-    <div class="preview-iframe-wrapper">
-      <iframe
-        class="preview-iframe"
-        src="/preview/${currentBlock.name}"
-        id="preview-iframe"
-      ></iframe>
-    </div>
-  `;
+  const isTemplate = currentBlock.type === 'template' && currentBlock.pages && currentBlock.pages.length > 0;
+
+  if (isTemplate) {
+    // Template preview - show page selector and full page preview
+    const firstPage = currentBlock.pages[0];
+    previewContent.innerHTML = `
+      <div class="preview-iframe-wrapper template-preview">
+        <iframe
+          class="preview-iframe"
+          src="/preview/template/${currentBlock.name}/${firstPage.slug}"
+          id="preview-iframe"
+        ></iframe>
+      </div>
+    `;
+  } else {
+    // Block preview - single block
+    previewContent.innerHTML = `
+      <div class="preview-iframe-wrapper">
+        <iframe
+          class="preview-iframe"
+          src="/preview/${currentBlock.name}"
+          id="preview-iframe"
+        ></iframe>
+      </div>
+    `;
+  }
 }
 
 // Render editor form
 function renderEditor() {
+  const editorContent = document.getElementById('editor-content');
+
+  // For templates, show pages overview
+  if (currentBlock && currentBlock.type === 'template' && currentBlock.pages) {
+    editorContent.innerHTML = renderTemplateEditor();
+    return;
+  }
+
   if (!currentBlock || !currentBlock.schema) {
-    document.getElementById('editor-content').innerHTML = `
+    editorContent.innerHTML = `
       <div class="editor-empty">No schema defined for this block</div>
     `;
     return;
   }
 
-  const editorContent = document.getElementById('editor-content');
   const fields = Object.entries(currentBlock.schema);
 
   editorContent.innerHTML = fields.map(([key, field]) =>
@@ -365,6 +454,64 @@ function renderEditor() {
   attachFieldListeners();
 }
 
+// Render template editor with pages list
+function renderTemplateEditor() {
+  const pages = currentBlock.pages || [];
+  const layoutSlots = currentBlock.layoutSlots || [];
+
+  const pagesHtml = pages.map((page, index) => `
+    <div class="template-page-item" onclick="navigateToTemplatePage('${page.slug}')">
+      <div class="template-page-header">
+        <span class="template-page-name">${escapeHtml(page.name)}</span>
+        <span class="template-page-blocks">${page.blocksCount} blocks</span>
+      </div>
+      <div class="template-page-slug">/${page.slug}</div>
+    </div>
+  `).join('');
+
+  const layoutHtml = layoutSlots.length > 0 ? `
+    <div class="template-section">
+      <h4 class="template-section-title">Layout Slots</h4>
+      ${layoutSlots.map(slot => `
+        <div class="template-layout-slot">
+          <span class="slot-type">${slot.slot}</span>
+          <span class="slot-block">${slot.type}</span>
+        </div>
+      `).join('')}
+    </div>
+  ` : '';
+
+  return `
+    <div class="template-editor">
+      <div class="template-info">
+        <div class="template-info-badge">Template</div>
+        <p class="template-info-desc">${escapeHtml(currentBlock.description || 'No description')}</p>
+      </div>
+
+      <div class="template-section">
+        <h4 class="template-section-title">Pages (${pages.length})</h4>
+        <div class="template-pages-list">
+          ${pagesHtml || '<div class="editor-empty">No pages defined</div>'}
+        </div>
+      </div>
+
+      ${layoutHtml}
+
+      <div class="template-hint">
+        <p>Click on a page to preview it, or use the tabs in the preview header.</p>
+      </div>
+    </div>
+  `;
+}
+
+// Navigate to template page in preview
+window.navigateToTemplatePage = function(pageSlug) {
+  const iframe = document.getElementById('preview-iframe');
+  if (iframe && currentBlock) {
+    iframe.src = `/preview/template/${currentBlock.name}/${pageSlug}`;
+  }
+};
+
 // Render a single field based on type
 function renderField(key, field, value) {
   const required = field.required ? '<span class="field-required">*</span>' : '';

package/dist/dev-ui/index.html

@@ -302,6 +302,9 @@
         display: flex;
         flex-wrap: wrap;
         gap: 6px;
+        max-height: 120px;
+        overflow-y: auto;
+        padding-right: 4px;
       }
 
       .tag-chip {
@@ -1118,6 +1121,141 @@
       .editor-content {
         transition: opacity 0.2s ease;
       }
+
+      /* Template Editor Styles */
+      .template-editor {
+        padding: 0;
+      }
+
+      .template-info {
+        padding: 16px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 8px;
+        margin-bottom: 20px;
+      }
+
+      .template-info-badge {
+        display: inline-block;
+        background: rgba(255,255,255,0.2);
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 8px;
+      }
+
+      .template-info-desc {
+        margin: 0;
+        font-size: 13px;
+        opacity: 0.9;
+        line-height: 1.5;
+      }
+
+      .template-section {
+        margin-bottom: 24px;
+      }
+
+      .template-section-title {
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #666;
+        margin: 0 0 12px 0;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #eee;
+      }
+
+      .template-pages-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .template-page-item {
+        padding: 12px 16px;
+        background: #f8f9fa;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .template-page-item:hover {
+        background: #e9ecef;
+        border-color: #667eea;
+      }
+
+      .template-page-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 4px;
+      }
+
+      .template-page-name {
+        font-weight: 500;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .template-page-blocks {
+        font-size: 11px;
+        color: #666;
+        background: #e9ecef;
+        padding: 2px 8px;
+        border-radius: 10px;
+      }
+
+      .template-page-slug {
+        font-size: 12px;
+        color: #999;
+        font-family: monospace;
+      }
+
+      .template-layout-slot {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 14px;
+        background: #f8f9fa;
+        border-radius: 6px;
+        margin-bottom: 8px;
+      }
+
+      .slot-type {
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: capitalize;
+        color: #667eea;
+      }
+
+      .slot-block {
+        font-size: 12px;
+        color: #666;
+        font-family: monospace;
+      }
+
+      .template-hint {
+        padding: 12px;
+        background: #fff3cd;
+        border-radius: 6px;
+        margin-top: 20px;
+      }
+
+      .template-hint p {
+        margin: 0;
+        font-size: 12px;
+        color: #856404;
+      }
+
+      /* Template preview style */
+      .template-preview {
+        background: #1a1a2e;
+      }
     </style>
   </head>
   <body>

package/dist/dev-ui-react/App.tsx

@@ -0,0 +1,164 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { BlocksList } from './components/BlocksList';
+import { Preview } from './components/Preview';
+import { Editor } from './components/Editor';
+import { useBlocks, useBlockConfig } from './hooks/useBlocks';
+import { Block } from './types';
+import './styles.css';
+
+export function App() {
+  const { blocks, loading: blocksLoading } = useBlocks();
+  const [selectedBlock, setSelectedBlock] = useState<Block | null>(null);
+  const [previewData, setPreviewData] = useState<Record<string, unknown>>({});
+  const [currentPage, setCurrentPage] = useState<string | undefined>();
+  const [isDirty, setIsDirty] = useState(false);
+  // Keep reference to complete config data for merging during save
+  const configDataRef = useRef<Record<string, unknown>>({});
+
+  const { config, loading: configLoading } = useBlockConfig(
+    selectedBlock?.name || null,
+    selectedBlock?.type || null
+  );
+
+  // Update selected block with loaded config
+  useEffect(() => {
+    if (selectedBlock && config) {
+      const updatedBlock: Block = {
+        ...selectedBlock,
+        schema: config.schema as Block['schema'],
+        pages: config.pages,
+        layoutSlots: config.layoutSlots,
+      };
+      setSelectedBlock(updatedBlock);
+
+      // Store complete config data in ref for merging during save
+      const configData = config.previewData || {};
+      configDataRef.current = configData;
+
+      // Set previewData from config (complete data)
+      setPreviewData(configData);
+
+      // Set first page for templates
+      if (config.pages && config.pages.length > 0) {
+        setCurrentPage(config.pages[0].slug);
+      }
+    }
+  }, [config, selectedBlock?.name]);
+
+  // Handle block selection
+  const handleSelectBlock = useCallback((block: Block) => {
+    setSelectedBlock(block);
+    setPreviewData({});
+    setCurrentPage(undefined);
+    setIsDirty(false);
+    configDataRef.current = {};
+
+    // Update URL based on type
+    const url = new URL(window.location.href);
+    url.searchParams.delete('block');
+    url.searchParams.delete('template');
+    if (block.type === 'template') {
+      url.searchParams.set('template', block.name);
+    } else {
+      url.searchParams.set('block', block.name);
+    }
+    window.history.replaceState({}, '', url.toString());
+  }, []);
+
+  // Handle preview data change - just update state, effect handles saving
+  const handlePreviewDataChange = useCallback(
+    (newData: Record<string, unknown>) => {
+      setPreviewData(newData);
+      setIsDirty(true);
+    },
+    []
+  );
+
+  // Debounced save effect - saves when data changes and is dirty
+  useEffect(() => {
+    // Don't save if loading, not dirty, no block selected, or config not loaded yet
+    // configDataRef must have data to prevent losing fields
+    if (configLoading || !isDirty || !selectedBlock || Object.keys(configDataRef.current).length === 0) {
+      return;
+    }
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(async () => {
+      try {
+        // Merge user edits with complete config data to never lose fields
+        const dataToSave = { ...configDataRef.current, ...previewData };
+
+        await fetch(`/api/preview/${selectedBlock.name}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(dataToSave),
+          signal: controller.signal,
+        });
+        setIsDirty(false);
+      } catch (error) {
+        if (error instanceof Error && error.name !== 'AbortError') {
+          console.error('Failed to save preview data:', error);
+        }
+      }
+    }, 500);
+
+    // Cleanup: cancel timeout and abort fetch on unmount or dependency change
+    return () => {
+      clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [previewData, selectedBlock, configLoading, isDirty]);
+
+  // Handle template page navigation
+  const handleNavigateToPage = useCallback((pageSlug: string) => {
+    setCurrentPage(pageSlug);
+  }, []);
+
+  // Load block/template from URL on mount (runs once when blocks are loaded)
+  const urlLoadedRef = useRef(false);
+  useEffect(() => {
+    if (blocks.length === 0 || urlLoadedRef.current) return;
+
+    const params = new URLSearchParams(window.location.search);
+    const blockName = params.get('block');
+    const templateName = params.get('template');
+
+    if (templateName) {
+      const template = blocks.find((b) => b.name === templateName && b.type === 'template');
+      if (template) {
+        urlLoadedRef.current = true;
+        handleSelectBlock(template);
+      }
+    } else if (blockName) {
+      const block = blocks.find((b) => b.name === blockName);
+      if (block) {
+        urlLoadedRef.current = true;
+        handleSelectBlock(block);
+      }
+    }
+  }, [blocks, handleSelectBlock]);
+
+  return (
+    <div className="container">
+      <BlocksList
+        blocks={blocks}
+        selectedBlock={selectedBlock}
+        onSelectBlock={handleSelectBlock}
+        loading={blocksLoading}
+      />
+      <Preview
+        block={selectedBlock}
+        previewData={previewData}
+        currentPage={currentPage}
+        loading={configLoading}
+      />
+      <Editor
+        block={selectedBlock}
+        loading={configLoading}
+        previewData={previewData}
+        onPreviewDataChange={handlePreviewDataChange}
+        onNavigateToPage={handleNavigateToPage}
+      />
+    </div>
+  );
+}