atomicuilibrary 0.0.1

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

@@ -0,0 +1,422 @@
+// Dock Component Demo Functions
+export function initDockDemo() {
+  const section = document.getElementById('dock');
+  if (!section) return;
+
+  section.innerHTML = `
+    
+    <p>macOS-style dock with magnification effect and smooth animations.</p>
+
+    <div class="demo-controls" style="margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap;">
+      <ui-button id="btnDockPlayground"  label="🎮 Interactive Playground" style="--btn-bg: #8b5cf6;" variant="outline"></ui-button>
+      <ui-button id="btnDockBasic"  label="Basic" variant="outline"></ui-button>
+      <ui-button id="btnDockPositions"  label="Positions" variant="outline"></ui-button>
+      <ui-button id="btnDockSizes"  label="Sizes" variant="outline"></ui-button>
+      <ui-button id="btnDockBadges"  label="With Badges" variant="outline"></ui-button>
+      <ui-button id="btnDockPremium"  label="✨ OS Experience" style="--btn-bg: #ec4899;" variant="outline"></ui-button>
+    </div>
+
+    <div id="dockDemoContainer" style="margin-top: 20px;"></div>
+  `;
+
+  setTimeout(() => {
+    document.getElementById('btnDockPlayground')?.addEventListener('click', () => window.showInteractiveDock());
+    document.getElementById('btnDockBasic')?.addEventListener('click', () => window.showBasicDock());
+    document.getElementById('btnDockPositions')?.addEventListener('click', () => window.showDockPositions());
+    document.getElementById('btnDockSizes')?.addEventListener('click', () => window.showDockSizes());
+    document.getElementById('btnDockBadges')?.addEventListener('click', () => window.showDockWithBadges());
+    document.getElementById('btnDockPremium')?.addEventListener('click', () => window.showPremiumDock());
+
+    window.showInteractiveDock();
+  }, 100);
+
+  window.showBasicDock = function () {
+    const container = document.getElementById('dockDemoContainer');
+    if (!container) return;
+
+    const items = JSON.stringify([
+      { id: 'finder', label: 'Finder', icon: 'smile' },
+      { id: 'mail', label: 'Mail', icon: 'mail' },
+      { id: 'browser', label: 'Browser', icon: 'globe' },
+      { id: 'music', label: 'Music', icon: 'music' },
+      { id: 'photos', label: 'Photos', icon: 'image' },
+      { id: 'settings', label: 'Settings', icon: 'settings' },
+    ]);
+
+    container.innerHTML = `
+      <div style="margin-bottom: 30px;">
+        <h4>Bottom Dock (Default)</h4>
+        <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Hover over icons to see magnification effect</p>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+          <ui-dock items='${items}' icon-library="lucide"></ui-dock>
+        </div>
+      </div>
+    `;
+
+    setTimeout(() => {
+      const dock = container.querySelector('ui-dock');
+      if (dock) {
+        dock.addEventListener('dockItemClick', e => {
+          console.log('Dock item clicked:', e.detail);
+        });
+      }
+    }, 100);
+  };
+
+  window.showDockPositions = function () {
+    const container = document.getElementById('dockDemoContainer');
+    if (!container) return;
+
+    const items = JSON.stringify([
+      { id: '1', label: 'Home', icon: 'home' },
+      { id: '2', label: 'Search', icon: 'search' },
+      { id: '3', label: 'Heart', icon: 'heart' },
+      { id: '4', label: 'Star', icon: 'star' },
+      { id: '5', label: 'Settings', icon: 'settings' },
+    ]);
+
+    container.innerHTML = `
+      <div style="margin-bottom: 30px;">
+        <h4>Bottom Position</h4>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+          <ui-dock items='${items}' position="bottom" icon-library="lucide"></ui-dock>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 30px;">
+        <h4>Top Position</h4>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+          <ui-dock items='${items}' position="top" icon-library="lucide"></ui-dock>
+        </div>
+      </div>
+
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+        <div>
+          <h4>Left Position</h4>
+          <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+            <ui-dock items='${items}' position="left" icon-library="lucide"></ui-dock>
+          </div>
+        </div>
+
+        <div>
+          <h4>Right Position</h4>
+          <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+            <ui-dock items='${items}' position="right" icon-library="lucide"></ui-dock>
+          </div>
+        </div>
+      </div>
+    `;
+  };
+
+  window.showDockSizes = function () {
+    const container = document.getElementById('dockDemoContainer');
+    if (!container) return;
+
+    const items = JSON.stringify([
+      { id: '1', label: 'File', icon: 'file-text' },
+      { id: '2', label: 'Folder', icon: 'folder' },
+      { id: '3', label: 'Image', icon: 'image' },
+      { id: '4', label: 'Video', icon: 'clapperboard' },
+    ]);
+
+    container.innerHTML = `
+      <div style="margin-bottom: 30px;">
+        <h4>Small Size</h4>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+          <ui-dock items='${items}' size="md" icon-library="lucide"></ui-dock>
+        </div>
+      </div>
+
+      <div style="margin-bottom: 30px;">
+        <h4>md Size (Default)</h4>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+          <ui-dock items='${items}' size="md" icon-library="lucide"></ui-dock>
+        </div>
+      </div>
+
+      <div>
+        <h4>Large Size</h4>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+          <ui-dock items='${items}' size="lg" icon-library="lucide"></ui-dock>
+        </div>
+      </div>
+    `;
+  };
+
+  window.showDockWithBadges = function () {
+    const container = document.getElementById('dockDemoContainer');
+    if (!container) return;
+
+    const items = JSON.stringify([
+      { id: 'mail', label: 'Mail', icon: 'mail', badge: 12 },
+      { id: 'messages', label: 'Messages', icon: 'message-square', badge: 5 },
+      { id: 'notifications', label: 'Notifications', icon: 'bell', badge: 99 },
+      { id: 'calendar', label: 'Calendar', icon: 'calendar' },
+      { id: 'tasks', label: 'Tasks', icon: 'check-square', badge: 3 },
+    ]);
+
+    container.innerHTML = `
+      <div style="margin-bottom: 30px;">
+        <h4>Dock with Badge Indicators</h4>
+        <p style="color: #6b7280; font-size: 14px; margin-bottom: 16px;">Icons can display notification badges</p>
+        <div style="display: flex; justify-content: center; padding: 40px; background-color: #f3f4f6; border-radius: 8px;">
+          <ui-dock items='${items}' icon-library="lucide"></ui-dock>
+        </div>
+      </div>
+    `;
+  };
+
+  window.showPremiumDock = function () {
+    const container = document.getElementById('dockDemoContainer');
+    if (!container) return;
+
+    // Simulate OS Dock
+    const items = JSON.stringify([
+      { id: 'finder', label: 'Finder', icon: 'smile', active: true },
+      { id: 'launchpad', label: 'Launchpad', icon: 'rocket' },
+      { id: 'browser', label: 'Safari', icon: 'compass', active: true },
+      { id: 'mail', label: 'Mail', icon: 'mail', badge: 3, bounce: true },
+      { id: 'maps', label: 'Maps', icon: 'map' },
+      { id: 'separator1', separator: true },
+      { id: 'music', label: 'Music', icon: 'music', active: true },
+      { id: 'podcasts', label: 'Podcasts', icon: 'mic' },
+      { id: 'tv', label: 'TV', icon: 'tv' },
+      { id: 'separator2', separator: true },
+      { id: 'settings', label: 'System Settings', icon: 'settings' },
+      { id: 'trash', label: 'Trash', icon: 'trash-2' },
+    ]);
+
+    container.innerHTML = `
+      <div style="margin-bottom: 30px;">
+        <h3>✨ OS Experience</h3>
+        <p style="color: #6b7280; font-size: 14px; margin-bottom: 24px;">
+          Demonstrating Active Indicators, Separators, and Bounce Animations.
+        </p>
+        
+        <div style="
+          display: flex; 
+          flex-direction: column;
+          justify-content: flex-end; 
+          align-items: center; 
+          height: 300px; 
+          background: linear-gradient(to bottom, #38bdf8, #0ea5e9); 
+          border-radius: 12px;
+          position: relative;
+          overflow: hidden;
+          padding-bottom: 20px;
+        ">
+          <!-- Background Wallpaper Effect -->
+          <div style="position: absolute; top: 20px; left: 20px; color: rgba(255,255,255,0.8); font-family: monospace;">
+             10:42 AM<br>Tuesday 11 Jan
+          </div>
+
+          <!-- The Dock -->
+          <ui-dock 
+            items='${items}' 
+            position="bottom" 
+            size="md" 
+            magnify="true" 
+            blur-effect="true"
+            icon-library="lucide">
+          </ui-dock>
+        </div>
+        
+        <div style="margin-top: 20px; display: flex; gap: 10px; justify-content: center;">
+             <ui-button id="btnToggleBounce" variant="outline" color="secondary" label="Stop Animation"></ui-button>
+        </div>
+      </div>
+    `;
+
+    window.toggleBounce = function () {
+      alert("In a real React/Angular app, you'd update the 'items' prop to remove 'bounce: true'.");
+    };
+  };
+
+  window.showInteractiveDock = function () {
+    const container = document.getElementById('dockDemoContainer');
+    if (!container) return;
+
+    container.innerHTML = `
+      <h3>🎮 Interactive Dock Playground</h3>
+      <p style="color: #6b7280; margin-bottom: 20px;">Customize the dock in real-time</p>
+
+      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; padding: 20px; background-color: white; border-radius: 8px;">
+        <div>
+          <label style="display: block; margin-bottom: 8px; font-weight: 600;">Position:</label>
+          <ui-dropdown id="dockPosition" value="bottom" options='[
+            {"label": "Bottom", "value": "bottom"},
+            {"label": "Top", "value": "top"},
+            {"label": "Left", "value": "left"},
+            {"label": "Right", "value": "right"}
+          ]'></ui-dropdown>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 8px; font-weight: 600;">Size:</label>
+          <ui-dropdown id="dockSize" value="md" options='[
+            {"label": "Small", "value": "sm"},
+            {"label": "Medium", "value": "md"},
+            {"label": "Large", "value": "lg"}
+          ]'></ui-dropdown>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 8px; font-weight: 600;">Magnify:</label>
+          <ui-dropdown id="dockMagnify" value="true" options='[
+            {"label": "Yes", "value": "true"},
+            {"label": "No", "value": "false"}
+          ]'></ui-dropdown>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 8px; font-weight: 600;">Blur Effect:</label>
+          <ui-dropdown id="dockBlur" value="true" options='[
+            {"label": "Yes", "value": "true"},
+            {"label": "No", "value": "false"}
+          ]'></ui-dropdown>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 8px; font-weight: 600;">Show Labels:</label>
+          <ui-dropdown id="dockShowLabels" value="true" options='[
+            {"label": "Yes", "value": "true"},
+            {"label": "No", "value": "false"}
+          ]'></ui-dropdown>
+        </div>
+
+        <div>
+          <label style="display: block; margin-bottom: 8px; font-weight: 600;">Item Count:</label>
+          <ui-dropdown id="dockItemCount" value="7" options='[
+            {"label": "3 Items", "value": "3"},
+            {"label": "5 Items", "value": "5"},
+            {"label": "7 Items", "value": "7"},
+            {"label": "10 Items", "value": "10"}
+          ]'></ui-dropdown>
+        </div>
+
+        <!-- Premium Toggles -->
+        <div>
+          <label style="display: block; margin-bottom: 8px; font-weight: 600;">Premium Features:</label>
+          <div style="display: flex; gap: 10px; flex-wrap: wrap;">
+             <ui-checkbox id="dockShowActive" label="Active Dot" checked></ui-checkbox>
+             <ui-checkbox id="dockShowBounce" label="Bounce"></ui-checkbox>
+             <ui-checkbox id="dockShowSeparator" label="Separator"></ui-checkbox>
+          </div>
+        </div>
+      </div>
+
+      <div id="dockPlaygroundPreview" style="display: flex; justify-content: center; align-items: center; min-height: 200px; padding: 60px; background-color: #f3f4f6; border-radius: 8px;"></div>
+
+      <div id="dockClickLog" style="margin-top: 20px; padding: 16px; background-color: white; border-radius: 8px; border: 1px solid #e5e7eb;">
+        <h4 style="margin: 0 0 12px;">Click Events Log:</h4>
+        <div id="dockLogContent" style="color: #6b7280; font-size: 14px; font-family: monospace;">Click on dock items to see events...</div>
+      </div>
+      
+      <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
+        <ui-button id="btnCopyDockCode" variant="ghost" color="secondary" label="Copy" size="md"yle="position: absolute; top: 10px; right: 10px; --btn-bg: rgba(255,255,255,0.1); --btn-text: white;"></ui-button>
+        <code id="dockCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 13px; display: block; overflow-x: auto; padding-right: 50px; white-space: pre-wrap;">
+          <ui-dock ...></ui-dock>
+        </code>
+      </div>
+    `;
+
+    window.updateDockPlayground = function () {
+      const preview = document.getElementById('dockPlaygroundPreview');
+      const position = document.getElementById('dockPosition').value;
+      const size = document.getElementById('dockSize').value;
+      const magnify = document.getElementById('dockMagnify').value;
+      const blur = document.getElementById('dockBlur').value;
+      const showLabels = document.getElementById('dockShowLabels').value;
+      const itemCount = parseInt(document.getElementById('dockItemCount').value);
+
+      const showActive = document.getElementById('dockShowActive').checked;
+      const showBounce = document.getElementById('dockShowBounce').checked;
+      const showSeparator = document.getElementById('dockShowSeparator').checked;
+
+      const allItems = [
+        { id: 'home', label: 'Home', icon: 'home', active: showActive },
+        { id: 'search', label: 'Search', icon: 'search' },
+        { id: 'mail', label: 'Mail', icon: 'mail', badge: 3, bounce: showBounce },
+        { id: 'separator1', separator: true },
+        { id: 'messages', label: 'Messages', icon: 'message-square', badge: 5 },
+        { id: 'calendar', label: 'Calendar', icon: 'calendar' },
+        { id: 'music', label: 'Music', icon: 'music', active: showActive },
+        { id: 'photos', label: 'Photos', icon: 'camera' },
+        { id: 'videos', label: 'Videos', icon: 'clapperboard' },
+        { id: 'documents', label: 'Documents', icon: 'file-text' },
+        { id: 'settings', label: 'Settings', icon: 'settings' },
+      ];
+
+      // Filter logic: Remove separator if not checked
+      let displayItems = allItems.slice(0, 11); // Take enough to potentially include separator
+      if (!showSeparator) {
+        displayItems = displayItems.filter(i => !i.separator);
+      }
+      displayItems = displayItems.slice(0, itemCount);
+
+      const items = JSON.stringify(displayItems);
+
+      preview.innerHTML = `
+        <ui-dock 
+          id="playgroundDock"
+          items='${items}'
+          position="${position}"
+          size="${size}"
+          magnify="${magnify}"
+          blur-effect="${blur}"
+          show-labels="${showLabels}"
+          icon-library="lucide">
+        </ui-dock>
+      `;
+
+      setTimeout(() => {
+        const dock = document.getElementById('playgroundDock');
+        if (dock) {
+          dock.addEventListener('dockItemClick', e => {
+            const logContent = document.getElementById('dockLogContent');
+            const timestamp = new Date().toLocaleTimeString();
+            const newLog = `[${timestamp}] Clicked: ${e.detail.item.label} (ID: ${e.detail.itemId})`;
+            logContent.innerHTML = newLog + '<br>' + logContent.innerHTML;
+          });
+        }
+      }, 100);
+
+      // Generate code block
+      const codeBlock = document.getElementById('dockCodeBlock');
+      if (codeBlock) {
+        let code = '<ui-dock';
+        if (position !== 'bottom') code += `\n  position="${position}"`;
+        if (size !== 'md') code += `\n  size="${size}"`;
+        if (magnify !== 'true') code += `\n  magnify="${magnify}"`;
+        if (blur !== 'true') code += `\n  blur-effect="${blur}"`;
+        code += `\n  show-labels="${showLabels}"`;
+        code += `\n  items='${items}'`;
+        code += `\n  icon-library="lucide"`;
+        code += '\n></ui-dock>';
+        codeBlock.innerText = code;
+      }
+    };
+
+    window.copyDockCode = () => {
+      const code = document.getElementById('dockCodeBlock').innerText;
+      const btn = document.getElementById('btnCopyDockCode');
+      navigator.clipboard.writeText(code).then(() => {
+        const originalText = btn.label;
+        btn.label = 'Copied!';
+        setTimeout(() => {
+          btn.label = originalText;
+        }, 2000);
+      });
+    };
+    setTimeout(() => {
+      ['dockPosition', 'dockSize', 'dockMagnify', 'dockBlur', 'dockShowLabels', 'dockItemCount'].forEach(id => {
+        document.getElementById(id)?.addEventListener('dropdownChange', () => window.updateDockPlayground());
+      });
+      ['dockShowActive', 'dockShowBounce', 'dockShowSeparator'].forEach(id => {
+        document.getElementById(id)?.addEventListener('checkboxChange', () => window.updateDockPlayground());
+      });
+      document.getElementById('btnCopyDockCode')?.addEventListener('click', () => window.copyDockCode());
+    }, 100);
+    updateDockPlayground();
+  };
+}

package/dist/collection/assets/js/demos/dock-host-init.js

@@ -0,0 +1,117 @@
+export function initDockHostDemo() {
+  const container = document.getElementById('dock-host');
+  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 style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px;">
+        <h2 style="margin: 0; display: flex; align-items: center; gap: 10px;">
+          <span style="font-size: 24px;">⚓</span> Dock Host
+        </h2>
+        <div style="display: flex; gap: 10px;">
+          <ui-button label="Left" variant="outline" color="success" size="md"click="toggleDockPosition('left')"></ui-button>
+          <ui-button label="Right" variant="outline" color="success" size="md"click="toggleDockPosition('right')"></ui-button>
+          <ui-button label="Bottom" variant="outline" color="success" size="md"click="toggleDockPosition('bottom')"></ui-button>
+        </div>
+      </div>
+      
+      <p style="color: #64748b; margin-bottom: 30px;">
+        The <code>ui-dock-host</code> provides a persistent region for tools and panels. It supports <strong>relative positioning</strong> to stay within its parent container and a <strong>floating mode</strong> for multi-window experiences.
+      </p>
+
+      <div id="dock-host-playground" style="position: relative; height: 600px; border: 2px solid #e2e8f0; border-radius: 16px; background: #f8fafc; overflow: hidden;">
+        <ui-dock-host id="demoDockHost" dock="left" width="280px" height="100%" relative="true">
+          <div slot="header">Project Explorer</div>
+          
+          <!-- Main Content Slot -->
+          <div slot="main" style="padding: 40px; height: 100%;">
+            <div style="max-width: 900px; margin: 0 auto;">
+              <header style="margin-bottom: 30px;">
+                <h3 style="margin: 0; font-size: 24px; color: #1e293b;">Project Dashboard</h3>
+                <p style="color: #64748b; margin: 5px 0 0;">Welcome back! Here is what is happening with your library.</p>
+              </header>
+              
+              <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px;">
+                <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
+                   <div style="color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Total Components</div>
+                   <div style="font-size: 28px; font-weight: 800; color: #6366f1;">42</div>
+                   <div style="margin-top: 10px; font-size: 12px; color: #10b981;">↑ 12% from last month</div>
+                </div>
+                <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
+                   <div style="color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Weekly Downloads</div>
+                   <div style="font-size: 28px; font-weight: 800; color: #8b5cf6;">1.2k</div>
+                   <div style="margin-top: 10px; font-size: 12px; color: #10b981;">↑ 8% from last week</div>
+                </div>
+                <div style="background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0,0,0,0.02);">
+                   <div style="color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Open Issues</div>
+                   <div style="font-size: 28px; font-weight: 800; color: #f59e0b;">5</div>
+                   <div style="margin-top: 10px; font-size: 12px; color: #ef4444;">↓ 2 from yesterday</div>
+                </div>
+              </div>
+
+              <div style="background: white; padding: 30px; border-radius: 16px; border: 1px solid #e2e8f0; height: 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;">
+                <div style="flex: 1; display: flex; align-items: flex-end; gap: 15px; padding-bottom: 10px;">
+                   <div style="flex: 1; height: 40%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 65%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 45%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 85%; background: #6366f1; border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 60%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 75%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
+                   <div style="flex: 1; height: 50%; background: #eef2ff; border-radius: 4px; transition: height 0.5s;"></div>
+                </div>
+                <div style="display: flex; justify-content: space-between; color: #94a3b8; font-size: 12px; font-family: monospace;">
+                   <span>MON</span><span>TUE</span><span>WED</span><span>THU</span><span>FRI</span><span>SAT</span><span>SUN</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Dock Content Slot (named content or just children) -->
+          <div style="padding: 20px;">
+            <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 20px; color: #1e293b;">
+               <span style="font-size: 18px;">📁</span>
+               <strong style="font-size: 1.1rem;">ui-ui-library</strong>
+            </div>
+            <ul style="list-style: none; padding: 0; font-family: monospace; font-size: 0.9rem; color: #475569; display: flex; flex-direction: column; gap: 10px;">
+              <li style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer;" onmouseover="this.style.background='rgba(99, 102, 241, 0.05)'" onmouseout="this.style.background='transparent'">
+                <span style="color: #6366f1;">📄</span> index.html
+              </li>
+              <li style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; background: rgba(99, 102, 241, 0.08); font-weight: 600;" onmouseover="this.style.background='rgba(99, 102, 241, 0.12)'" onmouseout="this.style.background='rgba(99, 102, 241, 0.08)'">
+                <span style="color: #6366f1;">📜</span> dock.css
+              </li>
+              <li style="display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer;" onmouseover="this.style.background='rgba(99, 102, 241, 0.05)'" onmouseout="this.style.background='transparent'">
+                <span style="color: #6366f1;">TS</span> main.ts
+              </li>
+            </ul>
+            
+            <div style="margin-top: 40px; border-top: 1px solid #e2e8f0; padding-top: 20px;">
+              <span style="font-size: 12px; color: #94a3b8; font-weight: bold; text-transform: uppercase;">Features</span>
+              <p style="margin-top: 10px; font-size: 0.85rem; color: #64748b; line-height: 1.5;">
+                • Auto-Responsive Layout<br>
+                • Flex Displacement<br>
+                • Shared Main Context
+              </p>
+            </div>
+          </div>
+        </ui-dock-host>
+      </div>
+    </div>
+  `;
+
+  // Global helper for toggling positions in demo
+  window.toggleDockPosition = pos => {
+    const dock = document.getElementById('demoDockHost');
+    if (dock) {
+      dock.dock = pos;
+
+      // Adjust dimensions for horizontal docking
+      if (pos === 'bottom' || pos === 'top') {
+        dock.height = '180px';
+        dock.width = '100%';
+      } else {
+        dock.height = '100%';
+        dock.width = '280px';
+      }
+    }
+  };
+}

package/dist/collection/assets/js/demos/dock-host-playground.js

@@ -0,0 +1,59 @@
+// Playground demo for ui-dock-host
+
+function renderDockHostPlayground() {
+  const container = document.getElementById('dockhost-playground');
+  if (!container) return;
+  container.innerHTML = `
+    <ui-dock-host dock="left" width="320px" height="100vh" id="dock-left">
+      <span slot="header">Left Dock</span>
+      <div>
+        <h3>Docked Left</h3>
+        <p>This panel is docked to the left edge. You can float and drag it.</p>
+        <ui-button label="Float" variant="outline" color="primary" size="md"click="window.floatDock('dock-left')"></ui-button>
+        <ui-button label="Test Action" variant="outline" color="success" size="md"click="alert('Left Dock Action!')"></ui-button>
+      </div>
+    </ui-dock-host>
+    <ui-dock-host dock="right" width="320px" height="100vh" id="dock-right">
+      <span slot="header">Right Dock</span>
+      <div>
+        <h3>Docked Right</h3>
+        <p>This panel is docked to the right edge.</p>
+        <ui-button label="Float" variant="outline" color="primary" size="md"click="window.floatDock('dock-right')"></ui-button>
+      </div>
+    </ui-dock-host>
+    <ui-dock-host dock="top" width="100vw" height="120px" id="dock-top">
+      <span slot="header">Top Dock</span>
+      <div>
+        <h3>Docked Top</h3>
+        <p>This panel is docked to the top edge.</p>
+        <ui-button label="Float" variant="outline" color="primary" size="md"click="window.floatDock('dock-top')"></ui-button>
+      </div>
+    </ui-dock-host>
+    <ui-dock-host dock="bottom" width="100vw" height="180px" id="dock-bottom">
+      <span slot="header">Bottom Dock</span>
+      <div>
+        <h3>Docked Bottom</h3>
+        <p>This panel is docked to the bottom edge.</p>
+        <ui-button label="Float" variant="outline" color="primary" size="md"click="window.floatDock('dock-bottom')"></ui-button>
+      </div>
+    </ui-dock-host>
+    <ui-dock-host dock="float" width="340px" height="220px" id="dock-float">
+      <span slot="header">Floating Dock</span>
+      <div>
+        <h3>Floating Panel</h3>
+        <p>This panel starts floating and can be dragged anywhere.</p>
+        <ui-button label="Float Action" variant="outline" color="success" size="md"click="alert('Floating Dock Action!')"></ui-button>
+      </div>
+    </ui-dock-host>
+  `;
+}
+
+window.floatDock = function (id) {
+  const dock = document.getElementById(id);
+  if (dock) {
+    dock.dock = 'float';
+    dock.floating = true;
+  }
+};
+
+document.addEventListener('DOMContentLoaded', renderDockHostPlayground);

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

@@ -0,0 +1,34 @@
+export function initDocumentationDemo() {
+  const section = document.getElementById('documentation');
+  if (!section) return;
+  section.innerHTML = `
+    <div style="padding: 40px; max-width: 800px; margin: 0 auto;">
+      <h1 style="font-size: 2.5rem; margin-bottom: 24px;">🚀 Getting Started</h1>
+      <p style="font-size: 1.2rem; color: #64748b; margin-bottom: 32px;">Learn how to integrate our premium component library into your projects.</p>
+      
+      <div style="background: #1e293b; padding: 24px; border-radius: 12px; margin-bottom: 32px;">
+        <code style="color: #38bdf8; font-size: 1.1rem;">npm install @stencil/app-ui</code>
+      </div>
+
+      <h2 style="margin-bottom: 16px;">Core Concepts</h2>
+      <ul style="line-height: 1.8; color: #334155; padding-left: 20px;">
+        <li><strong>Web Components:</strong> Standards-based components that work anywhere (React, Vue, Angular, or Vanilla JS).</li>
+        <li><strong>Design Tokens:</strong> Harmonious color, spacing, and typography variables managed via CSS Custom Properties.</li>
+        <li><strong>Modern Tooling:</strong> Optimized for performance and developer experience using Stencil.js.</li>
+      </ul>
+
+      <h2 style="margin: 32px 0 16px;">Framework Integration</h2>
+      <p style="margin-bottom: 16px;">Follow our specific guides to get the most out of our components in your favorite framework:</p>
+      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+        <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px;">
+          <h4 style="margin-bottom: 8px;">React</h4>
+          <p style="font-size: 14px; color: #64748b;">Full type support and event mapping for React 18+ applications.</p>
+        </div>
+        <div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 8px;">
+          <h4 style="margin-bottom: 8px;">Angular</h4>
+          <p style="font-size: 14px; color: #64748b;">Seamless integration with NgModule and standalone component patterns.</p>
+        </div>
+      </div>
+    </div>
+  `;
+}