atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/assets/js/demos/tree-demo.js

@@ -14,23 +14,23 @@ export function initTreeDemo() {
   section.innerHTML = `
     <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;">
       <h2 style="margin:0;">🌳 Unified Tree Component</h2>
-      <ui-button onclick="showSection('home')" variant="outline" color="secondary" label="← Back" size="md"ui-button>
+   
     </div>
-    <p style="color:#6b7280; margin-bottom:24px;">
+    <p style="color:var(--text-secondary, #6b7280); margin-bottom:24px;">
       Enterprise-grade hierarchical data component. Features high-end curved connectors, L-shape logic, real-time search, drag-and-drop, and professional "Modern Green" aesthetic.
     </p>
 
     <div class="demo-controls" style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px;">
       <ui-button onclick="window.showTreeBasic()" data-demo="basic" variant="outline" label="Basic" icon="leaf" library="lucide"></ui-button>
       <ui-button onclick="window.showTreeModernGreen()" data-demo="moderngeen" variant="outline" label="Modern Green" icon="beaker" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeCheckboxes()" data-demo="checkboxes" variant="outline" label="Checkboxes" icon="check-square" library="lucide" style="background:#34d399;"></ui-button>
+      <ui-button onclick="window.showTreeCheckboxes()" data-demo="checkboxes" variant="outline" label="Checkboxes" icon="check-square" library="lucide" ></ui-button>
       <ui-button onclick="window.showTreeDND()" data-demo="dnd" variant="outline" label="Drag & Drop" icon="move" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeOrgChart()" data-demo="orgchart" variant="outline" label="Org Chart" icon="users" library="lucide" style="background:#8b5cf6;"></ui-button>
-      <ui-button onclick="window.showTreeAesthetics()" data-demo="aesthetics" variant="outline" label="Aesthetics" icon="palette" library="lucide" style="background:#14b8a6;"></ui-button>
+
+      <ui-button onclick="window.showTreeAesthetics()" data-demo="aesthetics" variant="outline" label="Aesthetics" icon="palette" library="lucide" ></ui-button>
       <ui-button onclick="window.showTreeStress()" data-demo="stress" variant="outline" label="Stress Test" icon="flame" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeGitGraph()" data-demo="gitgraph" variant="outline" label="Git Graph" icon="git-branch" library="lucide" style="background:#64748b;"></ui-button>
+      <ui-button onclick="window.showTreeGitGraph()" data-demo="gitgraph" variant="outline" label="Git Graph" icon="git-branch" library="lucide" ></ui-button>
       <ui-button onclick="window.showTreeIcons()" data-demo="icons" variant="outline" label="Custom Icons" icon="plus" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreePlayground()" data-demo="playground" variant="outline" label="Playground" icon="gamepad-2" library="lucide" style="background:#6366f1;"></ui-button>
+      <ui-button onclick="window.showTreePlayground()" data-demo="playground" variant="outline" label="Playground" icon="gamepad-2" library="lucide" ></ui-button>
     </div>
 
     <div id="treeDemoContainer" style="margin-top:8px; display:grid; grid-template-columns: 1fr; gap:32px;"></div>
@@ -381,11 +381,11 @@ window.showTreeBasic = function () {
   if (!container) return;
   container.innerHTML = `
     <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap:24px;">
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Default Vertical</h4>
         <ui-tree id="basic-tree" size="md"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Icons and Colors</h4>
         <ui-tree id="icon-tree" variant="bordered" size="md"></ui-tree>
       </div>
@@ -402,13 +402,13 @@ window.showTreeModernGreen = function () {
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-card" style="background:#0f172a; padding:40px; border-radius:16px; box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.5);">
-      <div style="margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.1); padding-bottom:15px;">
+    <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:40px; border-radius:16px; box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.5);">
+      <div style="margin-bottom:20px; border-bottom:1px solid var(--border-subtle, rgba(0,0,0,0.1)); padding-bottom:15px;">
         <h3 style="color:#10b981; margin:0; font-size:1.5rem; display:flex; align-items:center; gap:10px;">
           <span style="display:inline-block; width:12px; height:12px; background:#10b981; border-radius:50%; box-shadow:0 0 10px #10b981;"></span>
           Scientific Engineering Mode
         </h3>
-        <p style="color:#94a3b8; font-size:14px; margin:5px 0 0 22px;">High-precision navigation with real-time hierarchical search filtering.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size:14px; margin:5px 0 0 22px;">High-precision navigation with real-time hierarchical search filtering.</p>
       </div>
       <ui-tree id="modern-green-tree" variant="modern-green" theme="dark" show-search="true" connector-shape="square"></ui-tree>
     </div>
@@ -424,11 +424,11 @@ window.showTreeCheckboxes = function () {
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+    <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
       <h4 style="margin-top:0;">Multiselect with Checkboxes</h4>
-      <p style="color:#6b7280; font-size:14px; margin-bottom:16px;">Cascading selection logic: parent checks all children, children partially check parents.</p>
+      <p style="color:var(--text-secondary, #6b7280); font-size:14px; margin-bottom:16px;">Cascading selection logic: parent checks all children, children partially check parents.</p>
       <ui-tree id="checkbox-tree" checkboxes="true" selectable="true" multi-select="true"></ui-tree>
-      <div id="selection-log" style="margin-top:20px; padding:12px; background:#f8fafc; border-radius:6px; font-family:monospace; font-size:12px;">Selection: []</div>
+      <div id="selection-log" style="margin-top:20px; padding:12px; background:var(--bg-secondary,#f8fafc); border-radius:6px; font-family:monospace; font-size:12px;">Selection: []</div>
     </div>
   `;
   setTimeout(() => {
@@ -445,11 +445,11 @@ window.showTreeDND = function () {
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+    <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
        <h4 style="margin-top:0;">Native Drag and Drop</h4>
-       <p style="color:#6b7280; font-size:14px; margin-bottom:16px;">Drag nodes to reorder within the same level or move between folders.</p>
+       <p style="color:var(--text-secondary, #6b7280); font-size:14px; margin-bottom:16px;">Drag nodes to reorder within the same level or move between folders.</p>
        <ui-tree id="drag-tree" enable-drag="true"></ui-tree>
-       <div id="drag-log" style="margin-top:20px; padding:12px; background:#fff7ed; border-left:4px solid #f97316; border-radius:4px; font-size:13px; color:#c2410c;">Ready to drag...</div>
+       <div id="drag-log" style="margin-top:20px; padding:12px; background:var(--accent-orange-soft,#fff7ed); border-left:4px solid #f97316; border-radius:4px; font-size:13px; color:var(--accent-orange,#c2410c);">Ready to drag...</div>
     </div>
   `;
   setTimeout(() => {
@@ -464,23 +464,7 @@ window.showTreeDND = function () {
   }, 50);
 };
 
-window.showTreeOrgChart = function () {
-  updateTreeActiveBtn('orgchart');
-  const container = document.getElementById('treeDemoContainer');
-  if (!container) return;
-  container.innerHTML = `
-    <div class="demo-card" style="background:#fff; padding:32px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05); overflow:auto;">
-       <h4 style="margin-top:0;">Organization Chart Layout</h4>
-       <p style="color:#6b7280; font-size:14px; margin-bottom:32px;">Horizontal hierarchy flow with specialized connector routing.</p>
-       <div style="min-width:800px;">
-         <ui-tree id="org-tree" layout="org-chart" connector-shape="square"></ui-tree>
-       </div>
-    </div>
-  `;
-  setTimeout(() => {
-    document.getElementById('org-tree').nodes = ORG_CHART_DATA;
-  }, 50);
-};
+
 
 window.showTreeAesthetics = function () {
   updateTreeActiveBtn('aesthetics');
@@ -488,20 +472,20 @@ window.showTreeAesthetics = function () {
   if (!container) return;
   container.innerHTML = `
     <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap:24px;">
-      <div class="demo-card" style="background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); padding:24px; border-radius:12px; color:white; border: 1px solid rgba(255,255,255,0.1);">
-        <h4 style="margin-top:0; color:#818cf8;">🌌 Zenith Deep Space</h4>
-        <p style="font-size:12px; opacity:0.7; margin-top:-10px;">Glassmorphism with illuminated structural paths.</p>
-        <ui-tree id="glass-tree" variant="glass" theme="dark" show-glow="true" selectable="true" connector-opacity="0.2"></ui-tree>
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; border:1px solid var(--border-subtle, #f1f5f9);">
+        <h4 style="margin-top:0;">🌌 Zenith Deep Space</h4>
+        <p style="font-size:12px; color:var(--text-secondary,#64748b); margin-top:-10px;">Glassmorphism with illuminated structural paths.</p>
+        <ui-tree id="glass-tree" variant="glass" show-glow="true" selectable="true" connector-opacity="0.2"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05); border: 1px solid #f1f5f9;">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05); border:1px solid var(--border-subtle,#f1f5f9);">
         <h4 style="margin-top:0; color:#10b981;">🌿 Bio-Logical Branching</h4>
-        <p style="font-size:12px; color:#64748b; margin-top:-10px;">Depth-weighted connectors that thin as hierarchy grows.</p>
+        <p style="font-size:12px; color:var(--text-secondary,#64748b); margin-top:-10px;">Depth-weighted connectors that thin as hierarchy grows.</p>
         <ui-tree id="glow-tree" show-glow="true" selectable="true" variant="bordered" connector-color="#10b981" connector-width="2.5"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#0f172a; padding:24px; border-radius:12px; border:1px solid rgba(255,255,255,0.05);">
-        <h4 style="margin-top:0; color:#f59e0b;">⚡ Plasma Trail</h4>
-        <p style="font-size:12px; color:#94a3b8; margin-top:-10px;">High-contrast neon path highlighting on selection.</p>
-        <ui-tree id="minimal-tree" variant="minimal" show-glow="true" selectable="true" theme="dark" connector-color="#f59e0b"></ui-tree>
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; border:1px solid var(--border-subtle, #f1f5f9);">
+        <h4 style="margin-top:0; color:var(--accent-yellow,#f59e0b);">⚡ Plasma Trail</h4>
+        <p style="font-size:12px; color:var(--text-secondary,#64748b); margin-top:-10px;">High-contrast neon path highlighting on selection.</p>
+        <ui-tree id="minimal-tree" variant="minimal" show-glow="true" selectable="true" connector-color="#f59e0b"></ui-tree>
       </div>
     </div>
   `;
@@ -522,17 +506,17 @@ window.showTreeStress = function () {
 
   container.innerHTML = `
     <div style="display:grid; grid-template-columns: 1fr 1fr; gap:24px;">
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
-        <h4 style="margin-top:0; color:#ef4444;">🔥 Deep Hierarchy (10 Levels)</h4>
-        <p style="color:#64748b; font-size:12px; margin-bottom:16px;">Recursive generation with depth-based branching. Total nodes: <strong>${total}</strong></p>
-        <div style="height:400px; border:1px solid #f1f5f9; border-radius:8px; overflow:hidden;">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+        <h4 style="margin-top:0; color:var(--accent-red,#ef4444);">🔥 Deep Hierarchy (10 Levels)</h4>
+        <p style="color:var(--text-secondary,#64748b); font-size:12px; margin-bottom:16px;">Recursive generation with depth-based branching. Total nodes: <strong>${total}</strong></p>
+        <div style="height:400px; border:1px solid var(--border-subtle,#f1f5f9); border-radius:8px; overflow:hidden;">
           <ui-tree id="stress-tree-deep" variant="directory" show-lines="true" animated="true" virtual-scroll="true" virtual-scroll-height="400"></ui-tree>
         </div>
       </div>
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0; color:#10b981;">🚀 Virtual Scroll (150+ Nodes)</h4>
-        <p style="color:#64748b; font-size:12px; margin-bottom:16px;">Testing large flat-level performance with virtualized rendering.</p>
-        <div style="height:400px; border:1px solid #f1f5f9; border-radius:8px; overflow:hidden;">
+        <p style="color:var(--text-secondary,#64748b); font-size:12px; margin-bottom:16px;">Testing large flat-level performance with virtualized rendering.</p>
+        <div style="height:400px; border:1px solid var(--border-subtle,#f1f5f9); border-radius:8px; overflow:hidden;">
           <ui-tree id="stress-tree-large" variant="bordered" searchable="true" virtual-scroll="true" virtual-scroll-height="400"></ui-tree>
         </div>
       </div>
@@ -551,15 +535,15 @@ window.showTreeGitGraph = function () {
   if (!container) return;
   container.innerHTML = `
     <div style="display:grid; grid-template-columns: 1fr 1fr; gap:24px;">
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Git Graph Variant (Light)</h4>
-        <p style="color:#64748b; font-size:12px; margin-bottom:16px;">Simplified commit history view with dot-based nodes and vertical lanes.</p>
+        <p style="color:var(--text-secondary,#64748b); font-size:12px; margin-bottom:16px;">Simplified commit history view with dot-based nodes and vertical lanes.</p>
         <ui-tree id="git-tree-light" variant="git-graph" selectable="true" show-icons="false" animated="true"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#0f172a; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05); color:#fff; border:1px solid rgba(255,255,255,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05); border:1px solid var(--border-subtle, #f1f5f9);">
         <h4 style="margin-top:0; color:#10b981;">Git Graph Variant (Dark)</h4>
-        <p style="color:#94a3b8; font-size:12px; margin-bottom:16px;">Professional developer-centric commit log aesthetic.</p>
-        <ui-tree id="git-tree-dark" variant="git-graph" theme="dark" selectable="true" show-icons="false" animated="true"></ui-tree>
+        <p style="color:var(--text-secondary,#64748b); font-size:12px; margin-bottom:16px;">Professional developer-centric commit log aesthetic.</p>
+        <ui-tree id="git-tree-dark" variant="git-graph" selectable="true" show-icons="false" animated="true"></ui-tree>
       </div>
     </div>
   `;
@@ -575,23 +559,23 @@ window.showTreeIcons = function () {
   if (!container) return;
   container.innerHTML = `
     <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:24px;">
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Plus / Minus Icons</h4>
         <ui-tree id="tree-plus-minus" expand-icon-type="plus-minus"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Caret Style</h4>
         <ui-tree id="tree-caret" expand-icon-type="caret"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Arrow Style</h4>
         <ui-tree id="tree-arrow" expand-icon-type="arrow"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Custom Icons (Folder)</h4>
         <ui-tree id="tree-custom-icons" expand-icon-type="custom" expanded-icon="folder-open" collapsed-icon="folder"></ui-tree>
       </div>
-      <div class="demo-card" style="background:#fff; padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
+      <div class="demo-card" style="background:var(--bg-secondary, #fff); padding:24px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.05);">
         <h4 style="margin-top:0;">Colored & Larger Icons</h4>
         <ui-tree id="tree-colored-icons" expand-icon-type="plus-minus" expand-icon-size="16px" expand-icon-color="#ef4444"></ui-tree>
       </div>
@@ -611,10 +595,10 @@ window.showTreePlayground = function () {
   if (!container) return;
 
   container.innerHTML = `
-    <div class="demo-card" style="background:#fff; padding:32px; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,0.05);">
+    <div class="demo-block">
       <h3 style="margin-top:0; display:flex; align-items:center; gap:12px;">
         🎮 Interactive Zenith Playground
-        <span style="font-size:12px; font-weight:normal; background:#f1f5f9; padding:4px 10px; border-radius:20px; color:#64748b;">v2.0 Elite Architecture</span>
+        <span style="font-size:12px; font-weight:normal; background: var(--bg-secondary, #f1f5f9); padding:4px 10px; border-radius:20px; color: var(--text-secondary, #64748b);">v2.0 Elite Architecture</span>
       </h3>
       
       <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:20px; background: var(--bg-secondary); padding:24px; border-radius:12px; margin-bottom:24px; border:1px solid var(--border-default);">
@@ -653,11 +637,11 @@ window.showTreePlayground = function () {
         </div>
       </div>
 
-      <div style="min-height:300px; padding:20px; border:2px dashed #e2e8f0; border-radius:12px;">
+      <div class="playground-preview" style="min-height:300px; padding:20px;">
         <ui-tree id="playground-tree" size="md"></ui-tree>
       </div>
 
-      <div style="margin-top:24px; padding:16px; background:#1e293b; border-radius:8px; color:#94a3b8; font-family:monospace; font-size:12px;">
+      <div style="margin-top:24px; padding:16px; background:#1e293b; border-radius:8px; color:var(--text-secondary,#64748b); font-family:monospace; font-size:12px;">
         <div style="color:#f8fafc; margin-bottom:8px; font-weight:bold;">📋 EVENT LOG</div>
         <div id="pg-event-log" style="max-height:100px; overflow-y:auto;">System ready...</div>
       </div>

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

@@ -1,4 +1,4 @@
-import { loadLayoutConfigs, applyLayoutConfig } from '../utils/layout-loader.js';
+import { loadLayoutConfigs, applyLayoutConfig } from '../utils/layout-loader.js';
 
 /**
  * Workspace Manager Demo (Zenith Layout Experience)
@@ -22,8 +22,8 @@ export async function initWorkspaceManagerDemo() {
       <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;">
+        <div class="control-card" style="background:var(--bg-primary,white); border-radius: 12px; padding: 20px; border:1px solid var(--border-default,#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:var(--text-secondary,#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;">
@@ -41,7 +41,7 @@ export async function initWorkspaceManagerDemo() {
             </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>
+              <span style="font-size: 11px; color:var(--accent-orange,#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>
@@ -51,15 +51,15 @@ export async function initWorkspaceManagerDemo() {
         </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;">
+        <div class="control-card" style="background:var(--bg-primary,white); border-radius: 12px; padding: 20px; border:1px solid var(--border-default,#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:var(--text-secondary,#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-split-h-btn" variant="outline" color="secondary" label="Split H" style="background-color:var(--accent-purple,#8b5cf6);"></ui-button>
+            <ui-button id="wm-split-v-btn" variant="outline" color="secondary" label="Split V" style="background-color:var(--accent-purple,#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>
@@ -67,26 +67,26 @@ export async function initWorkspaceManagerDemo() {
         </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 class="control-card" style="background:var(--bg-secondary,#f8fafc); border-radius: 12px; padding: 20px; border:1px solid var(--border-default,#e2e8f0);">
+          <h4 style="margin: 0 0 12px; font-size: 12px; text-transform: uppercase; color:var(--text-secondary,#64748b); 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>
+              <span style="font-size: 13px; color:var(--text-secondary,#64748b);">Active Regions</span>
+              <span id="stat-regions" style="font-weight: 700; color:var(--text-primary,#1e293b); background:var(--bg-primary,white); padding: 2px 8px; border-radius: 4px; border:1px solid var(--border-default,#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>
+              <span style="font-size: 13px; color:var(--text-secondary,#64748b);">Total Panels</span>
+              <span id="stat-panels" style="font-weight: 700; color:var(--text-primary,#1e293b); background:var(--bg-primary,white); padding: 2px 8px; border-radius: 4px; border:1px solid var(--border-default,#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>
+              <span style="font-size: 13px; color:var(--text-secondary,#64748b);">Persistence</span>
+              <span style="font-size: 11px; background:var(--accent-green-soft,#dcfce7); color:var(--accent-green,#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;">
+        <div style="padding: 16px; background:var(--accent-blue-soft,#eff6ff); border-radius: 10px; border-left: 4px solid #10b981;">
+          <p style="margin: 0; font-size: 12px; color:var(--accent-blue,#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>
@@ -94,7 +94,7 @@ export async function initWorkspaceManagerDemo() {
 
       <!-- 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;">
+        <div style="background:var(--bg-primary,white); border-radius: 16px; border:1px solid var(--border-default,#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" 
@@ -106,7 +106,7 @@ export async function initWorkspaceManagerDemo() {
         <!-- 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>
+            <h4 style="margin: 0; font-size: 14px; color:var(--text-secondary,#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>

package/dist/collection/collection-manifest.json

@@ -56,7 +56,6 @@
     "components/checkbox/checkbox.js",
     "components/code-editor/code-editor.js",
     "components/code-preview/ui-code-preview.js",
-    "components/color-controller/color-controller.js",
     "components/dock-host/ui-dock-host.js",
     "components/drag-drop/drag-drop.js",
     "components/empty-state/empty-state.js",
@@ -64,6 +63,7 @@
     "components/fab-item/fab-item.js",
     "components/icon/icon.js",
     "components/input/input.js",
+    "components/label/label.js",
     "components/layout-manager/layout-manager.js",
     "components/layout-manager/lm-container/lm-container.js",
     "components/layout-manager/lm-floating-window/lm-floating-window.js",
@@ -84,7 +84,6 @@
     "components/progress/progress.js",
     "components/radio/radio.js",
     "components/resizable-panel/resizable-panel.js",
-    "components/smart-location-dropdown/smart-location-dropdown.js",
     "components/smart-stepper/smart-step.js",
     "components/smart-stepper/smart-stepper.js",
     "components/stack/stack.js",