atomicuilibrary 0.0.1

package/dist/collection/assets/js/demos/workspace-manager-demo.js

@@ -0,0 +1,241 @@
+import { loadLayoutConfigs, applyLayoutConfig } from '../utils/layout-loader.js';
+
+/**
+ * Workspace Manager Demo (Zenith Layout Experience)
+ * Showcases advanced layout management, persistence, and dynamic panel operations.
+ */
+export async function initWorkspaceManagerDemo() {
+  const container = document.getElementById('workspace-manager');
+  if (!container) return;
+
+  container.innerHTML = `
+    <div class="zenith-playground-header" style="margin-bottom: 24px; padding: 20px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); border-radius: 12px; color: white;">
+      <h2 style="margin: 0; display: flex; align-items: center; gap: 12px;">
+        <span style="font-size: 28px;">🏗️</span> Zenith Workspace Manager
+        <span style="font-size: 12px; background: #10b981; padding: 4px 8px; border-radius: 20px; font-weight: normal; margin-left: 10px;">Enterprise Edition</span>
+      </h2>
+      <p style="margin: 10px 0 0; opacity: 0.8; font-size: 15px;">Advanced multi-region layout engine with dynamic split-testing, persistence, and component-based docking.</p>
+    </div>
+
+    <div class="playground-grid" style="display: grid; grid-template-columns: 280px 1fr; gap: 24px; min-height: 800px;">
+      <!-- Sidebar Controls -->
+      <div class="controls-column" style="display: flex; flex-direction: column; gap: 20px;">
+        
+        <!-- Templates Section -->
+        <div class="control-card" style="background: white; border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+          <h4 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;">
+            <span style="color: #10b981;">📐</span> Layout Templates
+          </h4>
+          <div style="display: flex; flex-direction: column; gap: 10px;">
+            <ui-button class="template-btn" data-layout="copilot" variant="outline" color="secondary" style="--btn-width: 100%; text-align: left; display: block; border: 1.5px solid var(--border-default); padding: 12px;">
+              <strong style="display: block; font-size: 14px; color: var(--text-primary);">GitHub Copilot</strong>
+              <span style="font-size: 11px; color: var(--text-secondary);">Editor + AI Assistant (70:30)</span>
+            </ui-button>
+            <ui-button class="template-btn" data-layout="ide" variant="outline" color="secondary" style="--btn-width: 100%; text-align: left; display: block; border: 1.5px solid var(--border-default); padding: 12px;">
+              <strong style="display: block; font-size: 14px; color: var(--text-primary);">IDE Layout</strong>
+              <span style="font-size: 11px; color: var(--text-secondary);">Explorer + Editor + Console</span>
+            </ui-button>
+            <ui-button class="template-btn" data-layout="dashboard" variant="outline" color="secondary" style="--btn-width: 100%; text-align: left; display: block; border: 1.5px solid var(--border-default); padding: 12px;">
+              <strong style="display: block; font-size: 14px; color: var(--text-primary);">Grid Dashboard</strong>
+              <span style="font-size: 11px; color: var(--text-secondary);">Multi-widget visual layout</span>
+            </ui-button>
+            <ui-button class="template-btn" data-layout="data-center" variant="outline" color="warning" style="--btn-width: 100%; text-align: left; display: block; border: 1.5px solid #ffedd5; padding: 12px;">
+              <strong style="display: block; font-size: 14px; color: #9a3412;">📊 Data Center</strong>
+              <span style="font-size: 11px; color: #c2410c;">Rich tables & metrics demo</span>
+            </ui-button>
+            <ui-button class="template-btn" data-layout="containers" variant="outline" color="secondary" style="--btn-width: 100%; text-align: left; display: block; border: 1.5px solid var(--border-default); padding: 12px;">
+              <strong style="display: block; font-size: 14px; color: var(--text-primary);">Container Types</strong>
+              <span style="font-size: 11px; color: var(--text-secondary);">Content, Nav, and Header-only</span>
+            </ui-button>
+          </div>
+        </div>
+
+        <!-- Component Actions -->
+        <div class="control-card" style="background: white; border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+          <h4 style="margin: 0 0 16px; font-size: 14px; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; display: flex; align-items: center; gap: 8px;">
+            <span style="color: #10b981;">⚡</span> Quick Actions
+          </h4>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+            <ui-button id="wm-add-panel-btn" variant="outline" color="primary" label="+ Panel"></ui-button>
+            <ui-button id="wm-add-region-btn" variant="outline" color="success" label="+ Region"></ui-button>
+            <ui-button id="wm-split-h-btn" variant="outline" color="secondary" label="Split H" style="background-color: #8b5cf6;"></ui-button>
+            <ui-button id="wm-split-v-btn" variant="outline" color="secondary" label="Split V" style="background-color: #8b5cf6;"></ui-button>
+            <ui-button id="wm-merge-btn" variant="outline" color="warning" label="Merge Regions"></ui-button>
+            <ui-button id="wm-export-btn" variant="outline" color="secondary" label="Export JSON"></ui-button>
+            <ui-button id="wm-reset-btn" variant="outline" color="danger" label="Reset All" style="grid-column: span 2;"></ui-button>
+          </div>
+        </div>
+
+        <!-- Status & Stats -->
+        <div class="control-card" style="background: #f8fafc; border-radius: 12px; padding: 20px; border: 1px solid #e2e8f0;">
+          <h4 style="margin: 0 0 12px; font-size: 12px; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.05em;">Workspace Status</h4>
+          <div style="display: flex; flex-direction: column; gap: 12px;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="font-size: 13px; color: #64748b;">Active Regions</span>
+              <span id="stat-regions" style="font-weight: 700; color: #1e293b; background: white; padding: 2px 8px; border-radius: 4px; border: 1px solid #e2e8f0;">0</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="font-size: 13px; color: #64748b;">Total Panels</span>
+              <span id="stat-panels" style="font-weight: 700; color: #1e293b; background: white; padding: 2px 8px; border-radius: 4px; border: 1px solid #e2e8f0;">0</span>
+            </div>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="font-size: 13px; color: #64748b;">Persistence</span>
+              <span style="font-size: 11px; background: #dcfce7; color: #15803d; padding: 2px 6px; border-radius: 4px; font-weight: bold;">Enabled</span>
+            </div>
+          </div>
+        </div>
+
+        <div style="padding: 16px; background: #eff6ff; border-radius: 10px; border-left: 4px solid #10b981;">
+          <p style="margin: 0; font-size: 12px; color: #1e40af; line-height: 1.5;">
+            <strong>Pro Tip:</strong> Layouts are persisted to localStorage using the <code>state-key</code> property. Splitters are bidirectionally resizable.
+          </p>
+        </div>
+      </div>
+
+      <!-- Main Canvas Area -->
+      <div class="canvas-column" style="display: flex; flex-direction: column; gap: 20px;">
+        <div style="background: white; border-radius: 16px; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); height: 750px; position: relative;">
+          <ui-workspace-manager 
+            id="zenith-wm-playground" 
+            save-state="true" 
+            state-key="zenith-playground-v1" 
+            direction="horizontal"
+          ></ui-workspace-manager>
+        </div>
+
+        <!-- Data Output -->
+        <div id="wm-json-output" style="display: none;">
+          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <h4 style="margin: 0; font-size: 14px; color: #64748b; text-transform: uppercase;">Exported Layout JSON</h4>
+            <ui-button onclick="this.closest('#wm-json-output').style.display='none'" variant="ghost" color="danger" label="Close ×"></ui-button>
+          </div>
+          <pre id="wm-json-display" style="background: #0f172a; color: #38bdf8; padding: 20px; border-radius: 12px; font-family: 'Fira Code', monospace; font-size: 12px; overflow-x: auto; max-height: 400px; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);"></pre>
+        </div>
+      </div>
+    </div>
+  `;
+
+  const wm = document.getElementById('zenith-wm-playground');
+  const configs = await loadLayoutConfigs('/build/assets/layout-configs.json');
+
+  // Handle template selection
+  const templateBtns = container.querySelectorAll('.template-btn');
+  templateBtns.forEach(btn => {
+    btn.onclick = async () => {
+      const layoutKey = btn.getAttribute('data-layout');
+      if (configs && configs[layoutKey]) {
+        // Visual feedback
+        templateBtns.forEach(b => (b.style.borderColor = '#e2e8f0'));
+        btn.style.borderColor = '#10b981';
+        btn.style.background = '#eff6ff';
+
+        await applyLayoutConfig('zenith-wm-playground', configs[layoutKey]);
+        updateStats();
+      }
+    };
+  });
+
+  // Action Buttons
+  document.getElementById('wm-add-panel-btn').onclick = () => {
+    const regions = wm.regions || [];
+    if (regions.length === 0) {
+      alert('Please add a region first or load a template.');
+      return;
+    }
+    const targetRegion = regions[Math.floor(Math.random() * regions.length)].id;
+    const panelId = `panel-${Date.now()}`;
+    wm.addPanel({
+      regionId: targetRegion,
+      id: panelId,
+      title: `Dynamic Panel`,
+      icon: 'box',
+      iconLibrary: 'lucide',
+      html: `<div style="padding: 20px; text-align: center;"><h4>Custom Content</h4><p>Added to region: ${targetRegion}</p></div>`,
+      closable: true,
+    });
+    updateStats();
+  };
+
+  document.getElementById('wm-add-region-btn').onclick = () => {
+    const id = `region-${Date.now().toString().slice(-4)}`;
+    wm.addRegion({
+      id,
+      title: `Region ${id.split('-')[1]}`,
+      size: 25,
+      collapsible: true,
+    });
+    updateStats();
+  };
+
+  document.getElementById('wm-split-h-btn').onclick = () => {
+    const regions = wm.regions || [];
+    if (regions.length === 0) return;
+    const targetId = regions[0].id; // For demo, split first region
+    wm.splitRegion(targetId, 'horizontal');
+    updateStats();
+  };
+
+  document.getElementById('wm-split-v-btn').onclick = () => {
+    const regions = wm.regions || [];
+    if (regions.length === 0) return;
+    const targetId = regions[0].id;
+    wm.splitRegion(targetId, 'vertical');
+    updateStats();
+  };
+
+  document.getElementById('wm-merge-btn').onclick = () => {
+    const regions = wm.regions || [];
+    if (regions.length < 2) {
+      alert('Need at least 2 regions to merge.');
+      return;
+    }
+    const targetId = regions[0].id;
+    const sourceId = regions[1].id;
+    wm.mergeRegion(targetId, sourceId);
+    updateStats();
+  };
+
+  document.getElementById('wm-reset-btn').onclick = () => {
+    if (confirm('Are you sure you want to clear the entire workspace?')) {
+      wm.clearAllRegions();
+      localStorage.removeItem('zenith-playground-v1');
+      updateStats();
+    }
+  };
+
+  document.getElementById('wm-export-btn').onclick = async () => {
+    const state = await wm.getLayoutState();
+    const output = document.getElementById('wm-json-output');
+    const display = document.getElementById('wm-json-display');
+    output.style.display = 'block';
+    display.textContent = JSON.stringify(state, null, 2);
+    output.scrollIntoView({ behavior: 'smooth' });
+  };
+
+  // Stats Update
+  function updateStats() {
+    setTimeout(() => {
+      const regionCount = wm.regions ? wm.regions.length : 0;
+      let panelCount = 0;
+      // Note: This assumes wm exposes regions with their panels for counting,
+      // or we can count via the DOM if needed. For now, we'll try to estimate or get from state.
+      document.getElementById('stat-regions').textContent = regionCount;
+      wm.getLayoutState().then(state => {
+        let count = 0;
+        if (state.regions) {
+          state.regions.forEach(r => (count += r.panels ? r.panels.length : 0));
+        }
+        document.getElementById('stat-panels').textContent = count;
+      });
+    }, 200);
+  }
+
+  // Initial Load - Try to restore or load default
+  setTimeout(() => {
+    const saved = localStorage.getItem('zenith-playground-v1');
+    if (!saved && configs && configs.copilot) {
+      applyLayoutConfig('zenith-wm-playground', configs.copilot);
+    }
+    updateStats();
+  }, 500);
+}

package/dist/collection/assets/js/index-boot.js

@@ -0,0 +1,104 @@
+import { initTimelinePlayground } from '/build/assets/js/demos/timeline-playground.js';
+import { initChipDemo } from '/build/assets/js/demos/chip-demo.js';
+import { initTagDemo } from '/build/assets/js/demos/tag-demo.js';
+import { initSpeedometerDemo } from '/build/assets/js/demos/speedometer-demo.js';
+import { initStepperDemo } from '/build/assets/js/demos/stepper-demo.js';
+import { initBarChartDemo } from '/build/assets/js/demos/bar-chart-demo.js';
+import { initSmartMenuDemo } from '/build/assets/js/demos/smart-menu-demo.js';
+import { initSmartStepperDemo } from '/build/assets/js/demos/smart-stepper-demo.js';
+
+import { initContextMenuDemo } from '/build/assets/js/demos/context-menu-demo.js';
+import { initPatternInputDemo } from '/build/assets/js/demos/pattern-input-demo.js';
+import { initSwitchDemo } from '/build/assets/js/demos/switch-demo.js';
+import { initButtonDemo } from '/build/assets/js/demos/button-demo.js';
+import { initPillDemo } from '/build/assets/js/demos/pill-demo.js';
+
+// Hook into global showSection and initialize demos when sections are shown
+window.addEventListener('DOMContentLoaded', () => {
+  const originalShowSection = window.showSection;
+  window.showSection = function (sectionId) {
+    // Preserve original behavior if present
+    if (typeof originalShowSection === 'function') {
+      originalShowSection(sectionId);
+    } else {
+      // Fallback section activation
+      document.querySelectorAll('.demo-section').forEach(el => el.classList.remove('section-active'));
+      const target = document.getElementById(sectionId);
+      if (target) target.classList.add('section-active');
+    }
+
+    // Initialize specific demos
+    switch (sectionId) {
+      case 'dock-host':
+        import('/build/assets/js/demos/dock-host-init.js').then(m => m.initDockHostDemo());
+        break;
+      case 'nav-bar':
+        try { import('/build/assets/js/demos/nav-bar-demo.js').then(m => m.initNavBarDemo()); } catch (e) { console.warn('initNavBarDemo failed', e); }
+        break;
+      case 'chip':
+        try { initChipDemo(); } catch (e) { console.warn('initChipDemo failed', e); }
+        break;
+      case 'pill':
+        try { initPillDemo(); } catch (e) { console.warn('initPillDemo failed', e); }
+        break;
+      case 'tag':
+        try { initTagDemo(); } catch (e) { console.warn('initTagDemo failed', e); }
+        break;
+      case 'speedometer':
+        try { initSpeedometerDemo(); } catch (e) { console.warn('initSpeedometerDemo failed', e); }
+        break;
+      case 'stepper':
+        try { initStepperDemo(); } catch (e) { console.warn('initStepperDemo failed', e); }
+        break;
+      case 'bar-chart':
+        try { initBarChartDemo(); } catch (e) { console.warn('initBarChartDemo failed', e); }
+        break;
+      case 'smart-menu':
+        try { initSmartMenuDemo(); } catch (e) { console.warn('initSmartMenuDemo failed', e); }
+        break;
+      case 'smart-stepper':
+        try { initSmartStepperDemo(); } catch (e) { console.warn('initSmartStepperDemo failed', e); }
+        break;
+      case 'cascade-select':
+      case 'pattern-input':
+        try { initPatternInputDemo(); } catch (e) { console.warn('initPatternInputDemo failed', e); }
+        break;
+      case 'switch':
+        try { initSwitchDemo(); } catch (e) { console.warn('initSwitchDemo failed', e); }
+        break;
+      case 'button':
+        try { initButtonDemo(); } catch (e) { console.warn('initButtonDemo failed', e); }
+        break;
+        try { initCascadingMenuDemo(); } catch (e) { console.warn('initCascadingMenuDemo failed', e); }
+        break;
+      case 'context-menu':
+        try { initContextMenuDemo(); } catch (e) { console.warn('initContextMenuDemo failed', e); }
+        break;
+      case 'timeline':
+        try { initTimelinePlayground(); } catch (e) { console.warn('initTimelinePlayground failed', e); }
+        break;
+      default:
+        break;
+    }
+  };
+
+  // Initialize active section on load if necessary
+  const active = document.querySelector('.demo-section.section-active');
+  if (active) {
+    if (active.id === 'chip') initChipDemo();
+    if (active.id === 'pill') initPillDemo();
+    if (active.id === 'tag') initTagDemo();
+    if (active.id === 'speedometer') initSpeedometerDemo();
+    if (active.id === 'stepper') initStepperDemo();
+    if (active.id === 'bar-chart') initBarChartDemo();
+    if (active.id === 'smart-menu') initSmartMenuDemo();
+    if (active.id === 'smart-stepper') initSmartStepperDemo();
+    if (active.id === 'cascade-select') initCascadingMenuDemo();
+    if (active.id === 'pattern-input') initPatternInputDemo();
+    if (active.id === 'switch') initSwitchDemo();
+    if (active.id === 'button') initButtonDemo();
+    if (active.id === 'context-menu') initContextMenuDemo();
+    if (active.id === 'timeline') initTimelinePlayground();
+    if (active.id === 'dock-host') import('/build/assets/js/demos/dock-host-init.js').then(m => m.initDockHostDemo());
+  }
+});

package/dist/collection/assets/js/nav-bar-demo.js

@@ -0,0 +1,20 @@
+// Demo loader for ui-nav-bar navigation items
+export function initNavBarDemo() {
+  const navBar = document.getElementById('mainNav');
+  if (!navBar) return;
+  navBar.items = [
+    { key: 'dashboard', icon: '🏠', label: 'Dashboard', active: true },
+    { key: 'projects', icon: '📁', label: 'Projects', children: [
+      { key: 'active', label: 'Active', icon: '✅' },
+      { key: 'archived', label: 'Archived', icon: '🗄️' },
+      { key: 'more', label: 'More', icon: '➕', children: [
+        { key: 'deep1', label: 'Deep 1', icon: '🔎' },
+        { key: 'deep2', label: 'Deep 2', icon: '🔬' }
+      ]}
+    ]},
+    { key: 'settings', icon: '⚙️', label: 'Settings', badge: 2 },
+    { key: 'help', icon: '❓', label: 'Help', disabled: true }
+  ];
+}
+// Auto-init on DOMContentLoaded
+window.addEventListener('DOMContentLoaded', initNavBarDemo);

package/dist/collection/assets/js/nav-bar-init.js

@@ -0,0 +1,119 @@
+// Nav-bar component initialization
+setTimeout(() => {
+  const mainNav = document.getElementById('mainNav');
+  if (!mainNav) {
+    console.error('Nav-bar element not found');
+    return;
+  }
+
+  console.log('Initializing nav-bar...');
+  mainNav.collapsed = true;
+  mainNav.appTitle = 'My App';
+  mainNav.showSearch = true;
+  mainNav.searchPlaceholder = 'Search navigation...';
+  mainNav.maxVisibleItems = 5;
+
+  const topItemsData = [
+    {
+      id: 'dashboard',
+      label: 'Dashboard',
+      sectionHeader: 'Main',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>',
+      href: '#dashboard',
+      active: true,
+    },
+    {
+      id: 'products',
+      label: 'Products',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 7h-9"></path><path d="M14 17H5"></path><circle cx="17" cy="17" r="3"></circle><circle cx="7" cy="7" r="3"></circle></svg>',
+      badge: '12',
+      subitems: [
+        { id: 'all-products', label: 'All Products', href: '#products', active: false },
+        { id: 'categories', label: 'Categories', href: '#categories' },
+        { id: 'new-product', label: 'Add New', href: '#new' },
+      ],
+    },
+    {
+      id: 'orders',
+      label: 'Orders',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 2v4"></path><path d="M15 2v4"></path><rect x="3" y="4" width="18" height="18" rx="2"></rect><path d="M3 10h18"></path></svg>',
+      badge: '3',
+      href: '#orders',
+    },
+    {
+      id: 'customers',
+      label: 'Customers',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>',
+      subitems: [
+        { id: 'all-customers', label: 'All Customers', href: '#customers' },
+        { id: 'vip-customers', label: 'VIP Customers', href: '#vip' },
+        { id: 'new-customer', label: 'Add Customer', href: '#new-customer' },
+      ],
+    },
+    {
+      id: 'analytics',
+      label: 'Analytics',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>',
+      href: '#analytics',
+    },
+    {
+      id: 'reports',
+      label: 'Reports',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>',
+      href: '#reports',
+    },
+    {
+      id: 'inventory',
+      label: 'Inventory',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>',
+      badge: '5',
+      href: '#inventory',
+    },
+    {
+      id: 'shipping',
+      label: 'Shipping',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"></rect><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon><circle cx="5.5" cy="18.5" r="2.5"></circle><circle cx="18.5" cy="18.5" r="2.5"></circle></svg>',
+      href: '#shipping',
+    },
+    {
+      id: 'invoices',
+      label: 'Invoices',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>',
+      badge: '2',
+      href: '#invoices',
+    },
+  ];
+
+  const bottomItemsData = [
+    {
+      id: 'help',
+      label: 'Help & Support',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>',
+      href: '#help',
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"></circle><path d="M12 1v6m0 6v6M5.64 5.64l4.24 4.24m4.24 4.24l4.24 4.24M1 12h6m6 0h6M5.64 18.36l4.24-4.24m4.24-4.24l4.24-4.24"></path></svg>',
+      subitems: [
+        { id: 'profile', label: 'Profile', href: '#profile' },
+        { id: 'preferences', label: 'Preferences', href: '#preferences' },
+        { id: 'logout', label: 'Logout', href: '#logout' },
+      ],
+    },
+  ];
+
+  mainNav.topItems = topItemsData;
+  mainNav.bottomItems = bottomItemsData;
+  console.log('Nav-bar initialized with', topItemsData.length, 'top items and', bottomItemsData.length, 'bottom items');
+
+  mainNav.addEventListener('navItemClicked', e => {
+    console.log('Nav item clicked:', e.detail);
+  });
+
+  mainNav.addEventListener('navToggled', e => {
+    console.log('Nav toggled. Collapsed:', e.detail.collapsed);
+  });
+
+  console.log('Nav-bar initialization complete');
+}, 200);

package/dist/collection/assets/js/utils/layout-loader.js

@@ -0,0 +1,80 @@
+/**
+ * Layout Loader Utility
+ * Provides helper functions for managing complex Zenith layouts.
+ */
+
+export async function loadLayoutConfigs(url = '/assets/layout-configs.json') {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+    return await response.json();
+  } catch (error) {
+    console.error('Failed to load layout configurations:', error);
+    return null;
+  }
+}
+
+export async function applyLayoutConfig(workspaceId, config) {
+  const workspace = document.getElementById(workspaceId);
+  if (!workspace) {
+    console.error(`Workspace with ID "${workspaceId}" not found`);
+    return false;
+  }
+
+  try {
+    // 1. Clear existing layout if requested
+    if (config.clearExisting) {
+      if (typeof workspace.clearAllRegions === 'function') {
+        await workspace.clearAllRegions();
+      }
+    }
+
+    // 2. Clear localStorage if saveState is disabled or specific key provided
+    if (config.saveState === false || config.clearStorage) {
+      const stateKey = workspace.getAttribute('state-key') || config.stateKey;
+      if (stateKey) {
+        localStorage.removeItem(stateKey);
+      }
+    }
+
+    // 3. Set global config properties if they exist
+    if (config.direction) {
+      workspace.setAttribute('direction', config.direction);
+    }
+
+    // 4. Apply regions and panels sequentially to ensure stability
+    if (config.regions && Array.isArray(config.regions)) {
+      // Set regions property directly to clear/reset structure
+      workspace.regions = config.regions.map(r => ({
+        id: r.id,
+        title: r.title,
+        size: r.size,
+        minSize: r.minSize,
+        maxSize: r.maxSize,
+        collapsible: r.collapsible,
+        type: r.type || 'default'
+      }));
+
+      // Small delay to let the component process region changes
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      // Add panels to their respective regions
+      for (const region of config.regions) {
+        if (region.panels && Array.isArray(region.panels)) {
+          for (const panel of region.panels) {
+            await workspace.addPanel({
+              regionId: region.id,
+              ...panel,
+              content: typeof panel.content === 'object' ? panel.content.html : panel.content
+            });
+          }
+        }
+      }
+    }
+
+    return true;
+  } catch (error) {
+    console.error('Error applying layout configuration:', error);
+    return false;
+  }
+}