npm - atomicuilibrary - Versions diffs - 0.0.1 → 0.1.3 - Mend

atomicuilibrary 0.0.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (675) hide show

package/dist/collection/assets/js/demos/layout-manager-demo.js CHANGED Viewed

@@ -44,7 +44,7 @@ window.showSimpleLayout = function () {
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <span style="font-size: 24px;">📐</span>
         Layout Playground
@@ -64,7 +64,7 @@ window.showSimpleLayout = function () {
         </ui-button>
       </div>
-      <div style="margin-top: 30px; background: #f9fafb; padding: 20px; border-radius: 8px;">
+      <div style="margin-top: 30px; background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px;">
         <h4 style="margin-top: 0; color: #374151;">About This Layout</h4>
         <p style="color: #6b7280; margin: 10px 0;">This demonstrates a basic horizontal split layout with two panels. The layout manager provides:</p>
         <ul style="color: #6b7280; line-height: 1.8;">
@@ -139,7 +139,7 @@ window.showComplexLayout = function () {
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <ui-icon name="settings-2" library="lucide" size="24px"></ui-icon> Complex Nested Layout
       </h3>
@@ -149,25 +149,25 @@ window.showComplexLayout = function () {
         <layout-manager id="complexLayoutManager" style="display: block; height: 500px;"></layout-manager>
       </div>
-      <div style="margin-top: 30px; background: #f9fafb; padding: 20px; border-radius: 8px;">
+      <div style="margin-top: 30px; background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px;">
         <h4 style="margin-top: 0; color: #374151;">Complex Layout Features</h4>
         <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px;">
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="git-fork" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Nested Layouts</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Combine horizontal and vertical splits</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="move-horizontal" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Resizable Splitters</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Drag to resize any section</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="layout-dashboard" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Panel Management</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Add, remove, and organize panels</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="save" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">State Management</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Save and restore configurations</p>
@@ -223,7 +223,7 @@ window.showComplexLayout = function () {
                       id: 'preview',
                       title: 'Preview',
                       icon: 'eye',
-                      content: '<div style="padding: 20px; background: #f0fdf4; height: 100%;"><h3>Preview Panel</h3><p>Live preview of changes</p></div>',
+                      content: '<div style="padding: 20px; background:var(--accent-green-soft,#f0fdf4); height: 100%;"><h3>Preview Panel</h3><p>Live preview of changes</p></div>',
                       closable: true,
                     },
                   ],
@@ -251,7 +251,7 @@ window.showVSCodeLayout = function () {
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px;">
         <div>
           <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
@@ -388,7 +388,7 @@ window.showDashboardLayout = function () {
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <ui-icon name="bar-chart-2" library="lucide" size="24px"></ui-icon> Dashboard Layout
       </h3>
@@ -398,20 +398,20 @@ window.showDashboardLayout = function () {
         <layout-manager id="dashboardLayoutManager" style="display: block; height: 500px;"></layout-manager>
       </div>
-      <div style="margin-top: 30px; background: #f9fafb; padding: 20px; border-radius: 8px;">
+      <div style="margin-top: 30px; background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px;">
         <h4 style="margin-top: 0; color: #374151;">Dashboard Use Cases</h4>
         <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px;">
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="trending-up" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Analytics</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Real-time metrics and charts</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="target" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">KPI Tracking</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Monitor key performance indicators</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="bell" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Notifications</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Real-time alerts and updates</p>
@@ -491,15 +491,15 @@ window.showDashboardLayout = function () {
                   title: 'Recent Activity',
                   icon: 'bell',
                   content: `<div style="padding: 20px; height: 100%;">
-                    <div style="margin-bottom: 15px; padding: 12px; background: #f0fdf4; border-left: 3px solid #10b981;">
+                    <div style="margin-bottom: 15px; padding: 12px; background:var(--accent-green-soft,#f0fdf4); border-left: 3px solid #10b981;">
                       <strong>New user registration</strong>
                       <div style="color: #6b7280; font-size: 13px; margin-top: 3px;">2 minutes ago</div>
                     </div>
-                    <div style="margin-bottom: 15px; padding: 12px; background: #eff6ff; border-left: 3px solid #10b981;">
+                    <div style="margin-bottom: 15px; padding: 12px; background:var(--accent-blue-soft,#eff6ff); border-left: 3px solid #10b981;">
                       <strong>Payment received</strong>
                       <div style="color: #6b7280; font-size: 13px; margin-top: 3px;">5 minutes ago</div>
                     </div>
-                    <div style="padding: 12px; background: #fef3c7; border-left: 3px solid #f59e0b;">
+                    <div style="padding: 12px; background:var(--accent-yellow-soft,#fef3c7); border-left: 3px solid #f59e0b;">
                       <strong>System update available</strong>
                       <div style="color: #6b7280; font-size: 13px; margin-top: 3px;">1 hour ago</div>
                     </div>
@@ -532,7 +532,7 @@ window.showCopilotLayout = function () {
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <ui-icon name="bot" library="lucide" size="24px"></ui-icon> AI Copilot Layout
       </h3>
@@ -542,25 +542,25 @@ window.showCopilotLayout = function () {
         <layout-manager id="copilotLayoutManager" style="display: block; height: 600px;"></layout-manager>
       </div>
-      <div style="margin-top: 30px; background: #f9fafb; padding: 20px; border-radius: 8px;">
+      <div style="margin-top: 30px; background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px;">
         <h4 style="margin-top: 0; color: #374151;">Copilot Layout Features</h4>
         <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px;">
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="message-circle" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">AI Chat Interface</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Interactive conversation panel for AI assistance</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="code" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Code Editor</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Main workspace for code editing</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="book" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Context Panel</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Display relevant code context and references</p>
           </div>
-          <div style="background: white; padding: 15px; border-radius: 6px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-primary,white); padding: 15px; border-radius: 6px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="font-size: 24px; margin-bottom: 8px;"><ui-icon name="search" library="lucide" size="24px"></ui-icon></div>
             <strong style="color: #1f2937;">Search & Navigation</strong>
             <p style="margin: 5px 0 0; color: #6b7280; font-size: 14px;">Quick file search and workspace navigation</p>
@@ -593,9 +593,9 @@ window.showCopilotLayout = function () {
                       title: 'Explorer',
                       icon: 'folder',
                       size: 20,
-                      content: `<div style="padding: 15px; height: 100%; overflow-y: auto; background: #f9fafb;">
+                      content: `<div style="padding: 15px; height: 100%; overflow-y: auto; background:var(--bg-secondary,#f9fafb);">
                         <div style="margin-bottom: 8px;">
-                          <ui-input type="text" placeholder="Search files..." style="width: 100%; padding: 8px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 12px;" />
+                          <ui-input type="text" placeholder="Search files..." style="width: 100%; padding: 8px; border:1px solid var(--border-default,#e5e7eb); border-radius: 6px; font-size: 12px;" />
                         </div>
                         <div style="margin-top: 15px;">
                           <div style="font-weight: 600; color: #1f2937; font-size: 13px; margin-bottom: 8px; display: flex; align-items: center; gap: 5px;">
@@ -606,7 +606,7 @@ window.showCopilotLayout = function () {
                               <span><ui-icon name="folder" library="lucide" size="14px"></ui-icon></span> data-structures
                             </div>
                             <div style="margin-left: 15px;">
-                              <div style="padding: 6px; cursor: pointer; border-radius: 4px; font-size: 12px; color: #374151; background: #dbeafe; font-weight: 600; display: flex; align-items: center; gap: 5px;">
+                              <div style="padding: 6px; cursor: pointer; border-radius: 4px; font-size: 12px; color: #374151; background:var(--accent-blue-soft,#dbeafe); font-weight: 600; display: flex; align-items: center; gap: 5px;">
                                 <span><ui-icon name="file" library="lucide" size="14px"></ui-icon></span> tree.js
                               </div>
                               <div style="padding: 6px; cursor: pointer; border-radius: 4px; font-size: 12px; color: #374151; display: flex; align-items: center; gap: 5px;" onmouseover="this.style.background='#e5e7eb'" onmouseout="this.style.background='transparent'">
@@ -628,7 +628,7 @@ window.showCopilotLayout = function () {
                       icon: 'file-edit',
                       size: 80,
                       content: `<div style="padding: 0; height: 100%; background: #1f2937;">
-                        <div style="background: #111827; padding: 8px 16px; border-bottom: 1px solid #374151; display: flex; justify-content: space-between; align-items: center;">
+                        <div style="background:var(--bg-secondary,#f8fafc); padding: 8px 16px; border-bottom: 1px solid #374151; display: flex; justify-content: space-between; align-items: center;">
                           <div style="display: flex; gap: 15px; font-size: 12px; color: #9ca3af;">
                             <span>JavaScript</span>
                             <span>UTF-8</span>
@@ -688,13 +688,13 @@ window.showCopilotLayout = function () {
                       id: 'problems-panel',
                       title: 'Problems',
                       icon: 'alert-triangle',
-                      content: `<div style="padding: 15px; height: 100%; overflow-y: auto; background: white;">
-                        <div style="padding: 10px; background: #fef3c7; border-left: 3px solid #f59e0b; border-radius: 4px; margin-bottom: 10px;">
-                          <div style="font-weight: 600; color: #92400e; font-size: 13px; display: flex; align-items: center; gap: 5px;"><span><ui-icon name="alert-triangle" library="lucide" size="14px"></ui-icon></span> Warning</div>
+                      content: `<div style="padding: 15px; height: 100%; overflow-y: auto; background:var(--bg-primary,white);">
+                        <div style="padding: 10px; background:var(--accent-yellow-soft,#fef3c7); border-left: 3px solid #f59e0b; border-radius: 4px; margin-bottom: 10px;">
+                          <div style="font-weight: 600; color:var(--accent-yellow,#92400e); font-size: 13px; display: flex; align-items: center; gap: 5px;"><span><ui-icon name="alert-triangle" library="lucide" size="14px"></ui-icon></span> Warning</div>
                           <div style="color: #78350f; font-size: 12px; margin-top: 4px;">Unused variable 'temp' at line 23</div>
                         </div>
-                        <div style="padding: 10px; background: #dbeafe; border-left: 3px solid #10b981; border-radius: 4px;">
-                          <div style="font-weight: 600; color: #1e40af; font-size: 13px; display: flex; align-items: center; gap: 5px;"><span><ui-icon name="info" library="lucide" size="14px"></ui-icon></span> Info</div>
+                        <div style="padding: 10px; background:var(--accent-blue-soft,#dbeafe); border-left: 3px solid #10b981; border-radius: 4px;">
+                          <div style="font-weight: 600; color:var(--accent-blue,#1e40af); font-size: 13px; display: flex; align-items: center; gap: 5px;"><span><ui-icon name="info" library="lucide" size="14px"></ui-icon></span> Info</div>
                           <div style="color: #1e3a8a; font-size: 12px; margin-top: 4px;">Consider adding JSDoc comments</div>
                         </div>
                       </div>`,
@@ -716,12 +716,12 @@ window.showCopilotLayout = function () {
                   icon: 'message-circle',
                   size: 70,
                   content: `<div style="padding: 20px; height: 100%; display: flex; flex-direction: column; background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);">
-                    <div style="flex: 1; overflow-y: auto; margin-bottom: 15px; padding: 15px; background: white; border-radius: 8px; border: 1px solid #e5e7eb;">
-                      <div style="margin-bottom: 15px; padding: 12px; background: #eff6ff; border-radius: 8px; border-left: 3px solid #10b981;">
+                    <div style="flex: 1; overflow-y: auto; margin-bottom: 15px; padding: 15px; background:var(--bg-primary,white); border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
+                      <div style="margin-bottom: 15px; padding: 12px; background:var(--accent-blue-soft,#eff6ff); border-radius: 8px; border-left: 3px solid #10b981;">
                         <div style="font-weight: 600; color: #1f2937; margin-bottom: 5px; display: flex; align-items: center; gap: 6px;"><ui-icon name="user" library="lucide" size="14px"></ui-icon> You</div>
                         <div style="color: #374151;">How do I implement a binary search tree?</div>
                       </div>
-                      <div style="margin-bottom: 15px; padding: 12px; background: #f0fdf4; border-radius: 8px; border-left: 3px solid #10b981;">
+                      <div style="margin-bottom: 15px; padding: 12px; background:var(--accent-green-soft,#f0fdf4); border-radius: 8px; border-left: 3px solid #10b981;">
                         <div style="font-weight: 600; color: #1f2937; margin-bottom: 5px; display: flex; align-items: center; gap: 6px;"><ui-icon name="bot" library="lucide" size="14px"></ui-icon> Copilot</div>
                         <div style="color: #374151;">I'll help you create a binary search tree. Here's a basic implementation with insert and search methods...</div>
                         <pre style="background: #1f2937; color: #10b981; padding: 12px; border-radius: 4px; margin-top: 8px; font-size: 12px; overflow-x: auto;"><code>class Node {
@@ -732,17 +732,17 @@ window.showCopilotLayout = function () {
   }
 }</code></pre>
                       </div>
-                      <div style="margin-bottom: 15px; padding: 12px; background: #eff6ff; border-radius: 8px; border-left: 3px solid #10b981;">
+                      <div style="margin-bottom: 15px; padding: 12px; background:var(--accent-blue-soft,#eff6ff); border-radius: 8px; border-left: 3px solid #10b981;">
                         <div style="font-weight: 600; color: #1f2937; margin-bottom: 5px; display: flex; align-items: center; gap: 6px;"><ui-icon name="user" library="lucide" size="14px"></ui-icon> You</div>
                         <div style="color: #374151;">Add a delete method as well</div>
                       </div>
-                      <div style="padding: 12px; background: #f0fdf4; border-radius: 8px; border-left: 3px solid #10b981;">
+                      <div style="padding: 12px; background:var(--accent-green-soft,#f0fdf4); border-radius: 8px; border-left: 3px solid #10b981;">
                         <div style="font-weight: 600; color: #1f2937; margin-bottom: 5px; display: flex; align-items: center; gap: 6px;"><ui-icon name="bot" library="lucide" size="14px"></ui-icon> Copilot</div>
                         <div style="color: #374151;">I'll add a delete method that handles all three cases: node with no children, one child, and two children...</div>
                       </div>
                     </div>
                     <div style="display: flex; gap: 8px;">
-                      <ui-input type="text" placeholder="Ask Copilot anything..." style="flex: 1; padding: 10px; border: 1px solid #e5e7eb; border-radius: 6px; font-size: 14px;" />
+                      <ui-input type="text" placeholder="Ask Copilot anything..." style="flex: 1; padding: 10px; border:1px solid var(--border-default,#e5e7eb); border-radius: 6px; font-size: 14px;" />
                       <ui-button style="padding: 10px 16px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">Send</ui-button>
                     </div>
                   </div>`,
@@ -757,14 +757,14 @@ window.showCopilotLayout = function () {
                   content: `<div style="padding: 20px; height: 100%; overflow-y: auto;">
                     <h4 style="margin-top: 0; color: #1f2937; font-size: 14px; display: flex; align-items: center; gap: 6px;"><ui-icon name="folder-open" library="lucide" size="14px"></ui-icon> Referenced Files</h4>
                     <div style="margin-bottom: 20px;">
-                      <div style="padding: 10px; background: #f9fafb; border-radius: 6px; margin-bottom: 8px; border: 1px solid #e5e7eb; cursor: pointer;" onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='#f9fafb'">
+                      <div style="padding: 10px; background:var(--bg-secondary,#f9fafb); border-radius: 6px; margin-bottom: 8px; border:1px solid var(--border-default,#e5e7eb); cursor: pointer;" onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='#f9fafb'">
                         <div style="display: flex; align-items: center; gap: 8px;">
                           <span style="color: #10b981;"><ui-icon name="file-text" library="lucide" size="14px"></ui-icon></span>
                           <span style="color: #1f2937; font-size: 13px;">data-structures/tree.js</span>
                         </div>
                         <div style="color: #6b7280; font-size: 11px; margin-top: 4px; margin-left: 24px;">Line 45-67</div>
                       </div>
-                      <div style="padding: 10px; background: #f9fafb; border-radius: 6px; margin-bottom: 8px; border: 1px solid #e5e7eb; cursor: pointer;" onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='#f9fafb'">
+                      <div style="padding: 10px; background:var(--bg-secondary,#f9fafb); border-radius: 6px; margin-bottom: 8px; border:1px solid var(--border-default,#e5e7eb); cursor: pointer;" onmouseover="this.style.background='#f3f4f6'" onmouseout="this.style.background='#f9fafb'">
                         <div style="display: flex; align-items: center; gap: 8px;">
                           <span style="color: #10b981;"><ui-icon name="file-text" library="lucide" size="14px"></ui-icon></span>
                           <span style="color: #1f2937; font-size: 13px;">utils/comparator.js</span>
@@ -774,13 +774,13 @@ window.showCopilotLayout = function () {
                     </div>
                     <h4 style="margin-top: 20px; color: #1f2937; font-size: 14px; display: flex; align-items: center; gap: 6px;"><ui-icon name="bookmark" library="lucide" size="14px"></ui-icon> Suggested Actions</h4>
                     <div style="display: flex; flex-direction: column; gap: 8px;">
-                      <ui-button style="padding: 8px 12px; background: white; border: 1px solid #e5e7eb; border-radius: 6px; text-align: left; cursor: pointer; font-size: 13px; color: #374151;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
+                      <ui-button style="padding: 8px 12px; background:var(--bg-primary,white); border:1px solid var(--border-default,#e5e7eb); border-radius: 6px; text-align: left; cursor: pointer; font-size: 13px; color: #374151;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
                         <div style="font-weight: 600; display: flex; align-items: center; gap: 6px;"><ui-icon name="lightbulb" library="lucide" size="14px"></ui-icon> Add unit tests</div>
                       </ui-button>
-                      <ui-button style="padding: 8px 12px; background: white; border: 1px solid #e5e7eb; border-radius: 6px; text-align: left; cursor: pointer; font-size: 13px; color: #374151;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
+                      <ui-button style="padding: 8px 12px; background:var(--bg-primary,white); border:1px solid var(--border-default,#e5e7eb); border-radius: 6px; text-align: left; cursor: pointer; font-size: 13px; color: #374151;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
                         <div style="font-weight: 600; display: flex; align-items: center; gap: 6px;"><ui-icon name="file-plus" library="lucide" size="14px"></ui-icon> Generate docs</div>
                       </ui-button>
-                      <ui-button style="padding: 8px 12px; background: white; border: 1px solid #e5e7eb; border-radius: 6px; text-align: left; cursor: pointer; font-size: 13px; color: #374151;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
+                      <ui-button style="padding: 8px 12px; background:var(--bg-primary,white); border:1px solid var(--border-default,#e5e7eb); border-radius: 6px; text-align: left; cursor: pointer; font-size: 13px; color: #374151;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='white'">
                         <div style="font-weight: 600; display: flex; align-items: center; gap: 6px;"><ui-icon name="search" library="lucide" size="14px"></ui-icon> Find similar code</div>
                       </ui-button>
                     </div>
@@ -813,7 +813,7 @@ window.showAPIReference = function () {
   if (!container) return;
   container.innerHTML = `
-    <div class="demo-block" style="background: white; border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
+    <div class="demo-block" style="background:var(--bg-primary,white); border-radius: 12px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);">
       <h3 style="margin-top: 0; display: flex; align-items: center; gap: 10px;">
         <ui-icon name="book-open" library="lucide" size="24px"></ui-icon>
         Layout Manager API Reference
@@ -821,7 +821,7 @@ window.showAPIReference = function () {
       <div style="margin-top: 30px;">
         <h4 style="color: #1f2937; margin-bottom: 15px;">Component Properties</h4>
-        <div style="background: #f9fafb; border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb;">
+        <div style="background:var(--bg-secondary,#f9fafb); border-radius: 8px; overflow: hidden; border:1px solid var(--border-default,#e5e7eb);">
           <table style="width: 100%; border-collapse: collapse;">
             <thead>
               <tr style="background: #f3f4f6;">
@@ -842,7 +842,7 @@ window.showAPIReference = function () {
         <h4 style="color: #1f2937; margin: 30px 0 15px 0;">Methods</h4>
         <div style="display: flex; flex-direction: column; gap: 15px;">
-          <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
               <code style="background: #10b981; color: white; padding: 4px 8px; border-radius: 4px; font-size: 14px;">addPanel</code>
               <span style="color: #6b7280; font-size: 14px;">(config: PanelConfig) => Promise&lt;string&gt;</span>
@@ -856,16 +856,16 @@ window.showAPIReference = function () {
 });</code></pre>
           </div>
-          <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-              <code style="background: #ef4444; color: white; padding: 4px 8px; border-radius: 4px; font-size: 14px;">removePanel</code>
+              <code style="background: var(--accent-red,#ef4444); color: white; padding: 4px 8px; border-radius: 4px; font-size: 14px;">removePanel</code>
               <span style="color: #6b7280; font-size: 14px;">(id: string) => Promise&lt;boolean&gt;</span>
             </div>
             <p style="margin: 0; color: #6b7280;">Remove a panel by ID. Returns true if successful.</p>
-            <pre style="background: #1f2937; color: #ef4444; padding: 15px; border-radius: 6px; margin-top: 10px; overflow-x: auto;"><code>await manager.removePanel('panel-1');</code></pre>
+            <pre style="background: #1f2937; color:var(--accent-red,#ef4444); padding: 15px; border-radius: 6px; margin-top: 10px; overflow-x: auto;"><code>await manager.removePanel('panel-1');</code></pre>
           </div>
-          <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
               <code style="background: #10b981; color: white; padding: 4px 8px; border-radius: 4px; font-size: 14px;">saveLayout</code>
               <span style="color: #6b7280; font-size: 14px;">() => Promise&lt;string&gt;</span>
@@ -875,19 +875,19 @@ window.showAPIReference = function () {
 localStorage.setItem('myLayout', layout);</code></pre>
           </div>
-          <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+          <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
             <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
-              <code style="background: #f59e0b; color: white; padding: 4px 8px; border-radius: 4px; font-size: 14px;">loadLayout</code>
+              <code style="background: var(--accent-yellow,#f59e0b); color: white; padding: 4px 8px; border-radius: 4px; font-size: 14px;">loadLayout</code>
               <span style="color: #6b7280; font-size: 14px;">(json: string) => Promise&lt;boolean&gt;</span>
             </div>
             <p style="margin: 0; color: #6b7280;">Load a layout from a JSON string.</p>
-            <pre style="background: #1f2937; color: #f59e0b; padding: 15px; border-radius: 6px; margin-top: 10px; overflow-x: auto;"><code>const saved = localStorage.getItem('myLayout');
+            <pre style="background: #1f2937; color:var(--accent-yellow,#f59e0b); padding: 15px; border-radius: 6px; margin-top: 10px; overflow-x: auto;"><code>const saved = localStorage.getItem('myLayout');
 await manager.loadLayout(saved);</code></pre>
           </div>
         </div>
         <h4 style="color: #1f2937; margin: 30px 0 15px 0;">Layout Structure</h4>
-        <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
+        <div style="background:var(--bg-secondary,#f9fafb); padding: 20px; border-radius: 8px; border:1px solid var(--border-default,#e5e7eb);">
           <p style="margin: 0 0 15px 0; color: #6b7280;">The layout configuration follows this structure:</p>
           <pre style="background: #1f2937; color: #e5e7eb; padding: 20px; border-radius: 6px; overflow-x: auto; margin: 0;"><code>{
   root: {