atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/assets/js/demos/transfer-list-demo.js

@@ -42,8 +42,8 @@ export function initTransferListDemo() {
     <p>Efficiently move and reorder items between lists with advanced modes and premium features.</p>
 
     <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
-      <ui-button onclick="window.showGodTierDemo()"  label="🌌 God Tier" style="background: linear-gradient(45deg, #f59e0b, #ef4444);" variant="outline"></ui-button>
-      <ui-button onclick="showTransferPlayground()"  label="🎮 Playground" class="playground-btn" variant="outline"></ui-button>
+      <ui-button onclick="window.showGodTierDemo()"  label="🌌 God Tier"  variant="outline"></ui-button>
+      <ui-button onclick="showTransferPlayground()"  label="🎮 Playground" variant="outline"></ui-button>
       <ui-button onclick="showDragDemo()"  label="Drag & Drop" variant="outline"></ui-button>
       <ui-button onclick="showTreeDemo()"  label="Tree Mode" variant="outline"></ui-button>
       <ui-button onclick="showTableDemo()"  label="Table Mode" variant="outline"></ui-button>
@@ -72,27 +72,25 @@ export function initTransferListDemo() {
             border-color: #9ca3af;
         }
         .playground-btn {
-            background-color: #8b5cf6;
+            background-color:var(--accent-purple,#8b5cf6);
             color: white;
-            border-color: #7c3aed;
+            border-color:var(--accent-purple,#7c3aed);
         }
         .playground-btn:hover {
-            background-color: #7c3aed;
+            background-color:var(--accent-purple,#7c3aed);
         }
         .premium-btn {
             background-color: #ecfdf5;
-            color: #047857;
+            color:var(--accent-green,#047857);
             border-color: #a7f3d0;
         }
         .premium-btn:hover {
-            background-color: #d1fae5;
+            background-color: var(--accent-green-soft,#d1fae5);
             border-color: #34d399;
         }
         .playground-settings {
-            background: #f9fafb;
             padding: 20px;
             border-radius: 8px;
-            border: 1px solid #e5e7eb;
             margin-bottom: 20px;
         }
         .settings-grid {
@@ -108,13 +106,15 @@ export function initTransferListDemo() {
         .setting-item label {
             font-size: 13px;
             font-weight: 600;
-            color: #374151;
+            color: var(--text-secondary, #374151);
         }
         .setting-item select, .setting-item input[type="text"], .setting-item input[type="number"] {
             padding: 6px 10px;
-            border: 1px solid #d1d5db;
+            border: 1px solid var(--border-default, #d1d5db);
             border-radius: 4px;
             font-size: 14px;
+            background-color: var(--bg-primary, white);
+            color: var(--text-primary, black);
         }
         .setting-row {
             display: flex;
@@ -135,7 +135,7 @@ export function initTransferListDemo() {
     container.innerHTML = `
       <div class="demo-block">
         <h3>🎮 Interactive Playground</h3>
-        <p style="color: #6b7280; margin-bottom: 20px;">Toggle props and see the Transfer List in action.</p>
+        <p style="color: var(--text-secondary, #6b7280); margin-bottom: 20px;">Toggle props and see the Transfer List in action.</p>
         
         <div class="playground-settings" style="background: var(--bg-secondary); border: 1px solid var(--border-default);">
           <div class="settings-grid">
@@ -168,12 +168,12 @@ export function initTransferListDemo() {
           </div>
         </div>
 
-        <div id="playgroundPreview" style="background: white; padding: 20px; border: 1px dashed #d1d5db; border-radius: 8px;">
+        <div id="playgroundPreview" class="playground-preview" style="padding: 20px;">
           <ui-transfer-list id="playground-component" icon-library="lucide"></ui-transfer-list>
         </div>
         
-        <div id="pg-events" style="margin-top: 20px; padding: 15px; background: #f8fafc; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 150px; overflow: auto; border: 1px solid #e2e8f0;">
-          <div style="color: #64748b; margin-bottom: 5px;">Events Log:</div>
+        <div id="pg-events" style="margin-top: 20px; padding: 15px; background: var(--bg-secondary, #f8fafc); border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 150px; overflow: auto; border: 1px solid var(--border-default, #e2e8f0); color: var(--text-primary);">
+          <div style="color: var(--text-secondary, #64748b); margin-bottom: 5px;">Events Log:</div>
           <div id="pg-log-content"></div>
         </div>
 
@@ -271,10 +271,10 @@ export function initTransferListDemo() {
       } else {
         el.sourceItems = pagination
           ? Array.from({ length: 30 }, (_, i) => ({
-              key: i,
-              label: `Item ${i + 1}`,
-              description: `Pageable item ${i + 1}`,
-            }))
+            key: i,
+            label: `Item ${i + 1}`,
+            description: `Pageable item ${i + 1}`,
+          }))
           : sourceItems;
         el.targetItems = [];
       }
@@ -479,7 +479,7 @@ export function initTransferListDemo() {
           <div style="display: flex; align-items: center; width: 100%;">
             <span style="font-size: 20px; margin-right: 8px;">${item.icon || 'file'}</span>
             <div style="display: flex; flex-direction: column;">
-              <span style="font-weight: bold; color: #111827;">${item.label}</span>
+              <span style="font-weight: bold; color:var(--text-primary,#111827);">${item.label}</span>
               <span style="font-size: 11px; color: #6b7280; font-style: italic;">${item.description} (Key: ${item.key})</span>
             </div>
           </div>

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

@@ -1,4 +1,12 @@
 /* eslint-disable no-undef */
+function updateTreeActiveBtn(demoName) {
+  const section = document.getElementById('tree');
+  if (!section) return;
+  section.querySelectorAll('.demo-controls ui-button').forEach(btn => {
+    btn.selected = btn.getAttribute('data-demo') === demoName;
+  });
+}
+
 export function initTreeDemo() {
   const section = document.getElementById('tree');
   if (!section) return;
@@ -6,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()" variant="outline" label="Basic" icon="leaf" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeModernGreen()" variant="outline" label="Modern Green" icon="beaker" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeCheckboxes()" variant="outline" label="Checkboxes" icon="check-square" library="lucide" style="background:#34d399;"></ui-button>
-      <ui-button onclick="window.showTreeDND()"  variant="outline" color="warning" label="Drag & Drop" icon="move" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeOrgChart()" variant="outline" color="primary" label="Org Chart" icon="users" library="lucide" style="background:#8b5cf6;"></ui-button>
-      <ui-button onclick="window.showTreeAesthetics()" variant="outline" color="info" label="Aesthetics" icon="palette" library="lucide" style="background:#14b8a6;"></ui-button>
-      <ui-button onclick="window.showTreeStress()" variant="outline" color="danger" label="Stress Test" icon="flame" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreeGitGraph()" variant="outline" color="secondary" label="Git Graph" icon="git-branch" library="lucide" style="background:#64748b;"></ui-button>
-      <ui-button onclick="window.showTreeIcons()" variant="outline" color="warning" label="Custom Icons" icon="plus" library="lucide"></ui-button>
-      <ui-button onclick="window.showTreePlayground()" variant="outline" color="primary" label="Playground" icon="gamepad-2" library="lucide" style="background:#6366f1;"></ui-button>
+      <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" ></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.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" ></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" ></ui-button>
     </div>
 
     <div id="treeDemoContainer" style="margin-top:8px; display:grid; grid-template-columns: 1fr; gap:32px;"></div>
@@ -368,15 +376,16 @@ function generateStressTestData() {
 }
 
 window.showTreeBasic = function () {
+  updateTreeActiveBtn('basic');
   const container = document.getElementById('treeDemoContainer');
   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>
@@ -389,16 +398,17 @@ window.showTreeBasic = function () {
 };
 
 window.showTreeModernGreen = function () {
+  updateTreeActiveBtn('moderngeen');
   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>
@@ -410,14 +420,15 @@ window.showTreeModernGreen = function () {
 };
 
 window.showTreeCheckboxes = function () {
+  updateTreeActiveBtn('checkboxes');
   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(() => {
@@ -430,14 +441,15 @@ window.showTreeCheckboxes = function () {
 };
 
 window.showTreeDND = function () {
+  updateTreeActiveBtn('dnd');
   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(() => {
@@ -452,42 +464,28 @@ window.showTreeDND = function () {
   }, 50);
 };
 
-window.showTreeOrgChart = function () {
-  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');
   const container = document.getElementById('treeDemoContainer');
   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>
   `;
@@ -499,6 +497,7 @@ window.showTreeAesthetics = function () {
 };
 
 window.showTreeStress = function () {
+  updateTreeActiveBtn('stress');
   const container = document.getElementById('treeDemoContainer');
   if (!container) return;
 
@@ -507,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>
@@ -531,19 +530,20 @@ window.showTreeStress = function () {
 };
 
 window.showTreeGitGraph = function () {
+  updateTreeActiveBtn('gitgraph');
   const container = document.getElementById('treeDemoContainer');
   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>
   `;
@@ -554,27 +554,28 @@ window.showTreeGitGraph = function () {
 };
 
 window.showTreeIcons = function () {
+  updateTreeActiveBtn('icons');
   const container = document.getElementById('treeDemoContainer');
   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>
@@ -589,14 +590,15 @@ window.showTreeIcons = function () {
 };
 
 window.showTreePlayground = function () {
+  updateTreeActiveBtn('playground');
   const container = document.getElementById('treeDemoContainer');
   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);">
@@ -635,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

@@ -21,6 +21,7 @@
     "components/button/button.js",
     "components/horizontal-nav/horizontal-nav.js",
     "components/knob/knob.js",
+    "components/loader/loader.js",
     "components/meter-group/meter-group.js",
     "components/my-component/my-component.js",
     "components/workspace-manager/workspace-manager.js",
@@ -53,19 +54,16 @@
     "components/callout-banner/callout-banner.js",
     "components/carousel/carousel.js",
     "components/checkbox/checkbox.js",
-    "components/checkbox-group/checkbox-group.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",
     "components/fab/fab.js",
     "components/fab-item/fab-item.js",
     "components/icon/icon.js",
-    "components/image-button/image-button.js",
     "components/input/input.js",
-    "components/input-pair/input-pair.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",
@@ -85,9 +83,7 @@
     "components/pattern-input/pattern-input.js",
     "components/progress/progress.js",
     "components/radio/radio.js",
-    "components/radio-group/radio-group.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",