atomicuilibrary 0.0.1

package/dist/collection/components/layout-manager/lm-tabs/lm-tabs.js

@@ -0,0 +1,130 @@
+import { h } from "@stencil/core";
+import { GlobalEventBus } from "../../../service/event-bus";
+export class LmTabs {
+    panels;
+    activeTabId;
+    containerId;
+    mode = 'horizontal';
+    switchTab(id) {
+        GlobalEventBus.emit('tab:changed', { containerId: this.containerId, tabId: id });
+    }
+    closePanel(e, id) {
+        e.stopPropagation();
+        GlobalEventBus.emit('panel:closed', id);
+    }
+    onTabMouseDown(e, id) {
+        if (e.button !== 0)
+            return; // Only left click
+        // Don't drag if clicking the close button
+        if (e.target.classList.contains('lm-tab-close'))
+            return;
+        GlobalEventBus.emit('panel:dragstart', { panelId: id, x: e.clientX, y: e.clientY });
+    }
+    render() {
+        return (h("div", { key: '83f1cde2f6966da615dd0e0b5ab821e0f035ce22', class: `lm-tabs ${this.mode}` }, h("div", { key: '507a672779ab113ca9da4d724c6d59451084daf4', class: "lm-tab-list" }, this.panels.map(p => (h("div", { class: `lm-tab ${p.id === this.activeTabId ? 'active' : ''}`, "data-id": p.id, onClick: () => this.switchTab(p.id), onMouseDown: (e) => this.onTabMouseDown(e, p.id) }, h("span", { class: "lm-tab-title", style: { display: 'flex', alignItems: 'center' } }, p.icon && h("ui-icon", { name: p.icon, library: "lucide", style: { width: '14px', height: '14px', marginRight: '6px' } }), p.title), p.closable !== false && (h("span", { class: "lm-tab-close", onClick: (e) => this.closePanel(e, p.id) }, "\u00D7"))))))));
+    }
+    static get is() { return "lm-tabs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lm-tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lm-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "panels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PanelState[]",
+                    "resolved": "PanelState[]",
+                    "references": {
+                        "PanelState": {
+                            "location": "import",
+                            "path": "../../../types",
+                            "id": "src/types/index.ts::PanelState",
+                            "referenceLocation": "PanelState"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "activeTabId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-tab-id"
+            },
+            "containerId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "container-id"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Orientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "Orientation": {
+                            "location": "import",
+                            "path": "../../../types/common.type",
+                            "id": "src/types/common.type.d.ts::Orientation",
+                            "referenceLocation": "Orientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'horizontal'"
+            }
+        };
+    }
+}

package/dist/collection/components/layout-manager/types.js

@@ -0,0 +1 @@
+/** Re-exports all layout-manager shared types */

package/dist/collection/components/library/category-section.css

@@ -0,0 +1,147 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: block;
+  margin-bottom: 32px;
+}
+
+.category {
+  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 24px;
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.category:hover {
+  border-color: rgba(99, 102, 241, 0.3);
+}
+
+.category-header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 24px 28px;
+  background: transparent;
+  border: none;
+  width: 100%;
+  cursor: pointer;
+  text-align: left;
+  color: inherit;
+  font-family: inherit;
+  transition: background 0.2s ease;
+}
+
+.category-header:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.category-icon {
+  font-size: 1.8rem;
+  width: 52px;
+  height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
+  border-radius: 14px;
+  flex-shrink: 0;
+}
+
+.category-title {
+  margin: 0;
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: #f1f5f9;
+  flex: 1;
+  letter-spacing: -0.02em;
+}
+
+.category-count {
+  font-size: 0.85rem;
+  font-weight: 600;
+  padding: 6px 14px;
+  background: rgba(99, 102, 241, 0.15);
+  color: #a5b4fc;
+  border-radius: 20px;
+}
+
+.chevron {
+  color: #64748b;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chevron.rotated {
+  transform: rotate(-90deg);
+}
+
+.category-content {
+  padding: 0 24px 24px;
+  max-height: 2000px;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: 1;
+}
+
+.category.collapsed .category-content {
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  opacity: 0;
+}
+
+.cards-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 16px;
+}
+
+@media (max-width: 768px) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+  .category-header {
+    padding: 16px 20px;
+  }
+  .category-content {
+    padding: 0 16px 16px;
+  }
+  .category-title {
+    font-size: 1.2rem;
+  }
+}
+/* Light mode overrides */
+:host-context(.light) .category {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
+  border-color: rgba(0, 0, 0, 0.08);
+}
+
+:host-context(.light) .category-title {
+  color: #1e293b;
+}
+
+:host-context(.light) .chevron {
+  color: #94a3b8;
+}

package/dist/collection/components/library/category-section.js

@@ -0,0 +1,139 @@
+import { h, Host } from "@stencil/core";
+export class CategorySection {
+    /** Category name */
+    categoryName;
+    /** Category icon */
+    categoryIcon = '📦';
+    /** Components in this category */
+    components = [];
+    /** Whether the section is expanded */
+    expanded = true;
+    /** Mode: 'demo' or 'doc' */
+    mode = 'demo';
+    toggleExpanded = () => {
+        this.expanded = !this.expanded;
+    };
+    render() {
+        return (h(Host, { key: 'e3a09ce08fdb7d41a84a0513c9bd9307d7d0fb2f' }, h("div", { key: '68321cc0d827decbd472217460b97dc7955c818c', class: { 'category': true, 'collapsed': !this.expanded } }, h("ui-button", { key: '4b232b38aa4f84d8526206801aa1c562a051da64', class: "category-header", onButtonClick: this.toggleExpanded, variant: "plain", fullWidth: true, align: "start" }, h("span", { key: 'c4d4449576357c8a85e131fd6e51d550b61bcb0e', class: "category-icon" }, this.categoryIcon), h("h2", { key: 'dd646cf30106d5665fd7cf16a33a1646dd576be5', class: "category-title" }, this.categoryName), h("span", { key: 'e174d5fa4e6eeaf3e6998f583c5a38329e66e176', class: "category-count" }, this.components.length), h("svg", { key: '5e926d6ace89797270d978e2c51aeeb362e57e33', class: { 'chevron': true, 'rotated': !this.expanded }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'f02857e200d2f5562c19a1fecc3a4584fd52271e', points: "6,9 12,15 18,9" }))), h("div", { key: '3e70d09a10eda7220b63253dca6638220326ea0a', class: "category-content" }, h("div", { key: 'a51ebf47c0fafe095ca8616ee3f661ee4124c805', class: "cards-grid" }, this.components.map(comp => (h("library-card", { key: comp.id, "component-id": comp.id, "card-title": comp.name, description: comp.description, icon: comp.icon, badge: comp.badge, docs: comp.docs, mode: this.mode }))))))));
+    }
+    static get is() { return "category-section"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["category-section.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["category-section.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "categoryName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Category name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category-name"
+            },
+            "categoryIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Category icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category-icon",
+                "defaultValue": "'\uD83D\uDCE6'"
+            },
+            "components": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComponentData[]",
+                    "resolved": "ComponentData[]",
+                    "references": {
+                        "ComponentData": {
+                            "location": "import",
+                            "path": "./data",
+                            "id": "src/components/library/data.ts::ComponentData",
+                            "referenceLocation": "ComponentData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Components in this category"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the section is expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "expanded",
+                "defaultValue": "true"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'demo' | 'doc'",
+                    "resolved": "\"demo\" | \"doc\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode: 'demo' or 'doc'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "defaultValue": "'demo'"
+            }
+        };
+    }
+}

package/dist/collection/components/library/data.js

@@ -0,0 +1,74 @@
+export const componentsData = [
+    // Foundation & Layout
+    { id: 'accordion', name: 'Accordion', description: 'Expandable/collapsible content', icon: '📑', category: 'Foundation & Layout', docs: '/docs/index.html?page=accordion' },
+    { id: 'aside-panel', name: 'Aside Panel', description: 'Side content panel', icon: '📱', category: 'Foundation & Layout', docs: '/docs/index.html?page=aside-panel' },
+    { id: 'card', name: 'Card', description: 'Content container', icon: '🃏', category: 'Foundation & Layout', docs: '/docs/index.html?page=card' },
+    { id: 'divider', name: 'Divider', description: 'Content separator', icon: '➖', category: 'Foundation & Layout', docs: '/docs/index.html?page=divider' },
+    { id: 'dock', name: 'Dock', description: 'Docking layout', icon: '🚢', category: 'Foundation & Layout', docs: '/docs/index.html?page=dock' },
+    { id: 'dock-host', name: 'Dock Host', description: 'Host for dockable components', icon: '🗂️', category: 'Foundation & Layout', docs: '/docs/index.html?page=dock-host' },
+    {
+        id: 'layout-manager',
+        name: 'Layout Manager',
+        description: 'Manage complex layouts',
+        icon: '🏗️',
+        category: 'Foundation & Layout',
+        docs: '/docs/index.html?page=layout-manager',
+    },
+    { id: 'panel', name: 'Panel', description: 'Content panel', icon: '📋', category: 'Foundation & Layout', docs: '/docs/index.html?page=panel' },
+    { id: 'stack', name: 'Stack', description: 'Vertical/Horizontal stack', icon: '📚', category: 'Foundation & Layout', docs: '/docs/index.html?page=stack' },
+    // Navigation
+    { id: 'anchor', name: 'Anchor', description: 'Anchor link navigation', icon: '⚓', category: 'Navigation', docs: '/docs/index.html?page=anchor' },
+    { id: 'breadcrumb', name: 'Breadcrumb', description: 'Indicate current page location', icon: '🍞', category: 'Navigation', docs: '/docs/index.html?page=breadcrumb' },
+    { id: 'context-menu', name: 'Context Menu', description: 'Right-click context menu', icon: '📋', category: 'Navigation', docs: '/docs/index.html?page=context-menu' },
+    { id: 'horizontal-nav', name: 'Horizontal Nav', description: 'Horizontal navigation menu', icon: '↔️', category: 'Navigation', docs: '/docs/index.html?page=horizontal-nav' },
+    { id: 'nav-bar', name: 'Nav Bar', description: 'Navigation bar', icon: '🧭', category: 'Navigation', docs: '/docs/index.html?page=nav-bar' },
+    { id: 'pagination', name: 'Pagination', description: 'Navigate through pages of data', icon: '📄', category: 'Navigation', docs: '/docs/index.html?page=pagination' },
+    { id: 'scroll-top', name: 'Scroll Top', description: 'Button to scroll to top', icon: '⬆️', category: 'Navigation', docs: '/docs/index.html?page=scroll-top' },
+    { id: 'smart-menu', name: 'Smart Menu', description: 'Intelligent menu component', icon: '🧠', category: 'Navigation', docs: '/docs/index.html?page=smart-menu' },
+    { id: 'smart-stepper', name: 'Smart Stepper', description: 'Intelligent stepper wizard', icon: '🧠', category: 'Navigation', docs: '/docs/index.html?page=smart-stepper' },
+    { id: 'speed-dial', name: 'Speed Dial', description: 'Floating action button speed dial', icon: '⚡', category: 'Navigation', docs: '/docs/index.html?page=speed-dial' },
+    { id: 'stepper', name: 'Stepper', description: 'Step-by-step wizard', icon: '👣', category: 'Navigation', docs: '/docs/index.html?page=stepper' },
+    { id: 'tabs', name: 'Tabs', description: 'Tabbed content navigation', icon: '📑', category: 'Navigation', docs: '/docs/index.html?page=tabs' },
+    { id: 'top-bar', name: 'Top Bar', description: 'Top navigation bar', icon: '📌', category: 'Navigation', docs: '/docs/index.html?page=top-bar' },
+    // Inputs & Forms
+    { id: 'button', name: 'Button', description: 'Clickable button element', icon: '🔘', category: 'Inputs & Forms', docs: '/docs/index.html?page=button' },
+    { id: 'button-group', name: 'Button Group', description: 'Layout container for buttons', icon: '🍱', category: 'Inputs & Forms', docs: '/docs/index.html?page=button-group' },
+    { id: 'cascade-select', name: 'Cascade Select', description: 'Hierarchical selection', icon: '🔽', category: 'Inputs & Forms', docs: '/docs/index.html?page=cascade-select' },
+    { id: 'dropdown', name: 'Dropdown', description: 'Select hidden items from a list', icon: '📋', category: 'Inputs & Forms', docs: '/docs/index.html?page=dropdown' },
+    { id: 'knob', name: 'Knob', description: 'Rotary control knob', icon: '🎛️', category: 'Inputs & Forms', docs: '/docs/index.html?page=knob' },
+    { id: 'pattern-input', name: 'Pattern Input', description: 'Input with pattern validation', icon: '🎯', category: 'Inputs & Forms', docs: '/docs/index.html?page=pattern-input' },
+    { id: 'picklist', name: 'Picklist', description: 'List for selecting multiple items', icon: '📋', category: 'Inputs & Forms', docs: '/docs/index.html?page=picklist' },
+    { id: 'range-slider', name: 'Range Slider', description: 'Slider for range selection', icon: '🎚️', category: 'Inputs & Forms', docs: '/docs/index.html?page=range-slider' },
+    { id: 'rating', name: 'Rating', description: 'Star rating control', icon: '⭐', category: 'Inputs & Forms', docs: '/docs/index.html?page=rating' },
+    { id: 'switch', name: 'Switch', description: 'Toggle switch control', icon: '🔘', category: 'Inputs & Forms', docs: '/docs/index.html?page=switch' },
+    { id: 'transfer-list', name: 'Transfer List', description: 'Move items between lists', icon: '⇄', category: 'Inputs & Forms', docs: '/docs/index.html?page=transfer-list' },
+    // Data Display
+    {
+        id: 'advanced-data-table',
+        name: 'Advanced Table',
+        description: 'Data table with advanced features',
+        icon: '📊',
+        category: 'Data Display',
+        docs: '/docs/index.html?page=advanced-data-table',
+    },
+    { id: 'avatar', name: 'Avatar', description: 'User profile image', icon: '👤', category: 'Data Display', docs: '/docs/index.html?page=avatar' },
+    { id: 'avatar-group', name: 'Avatar Group', description: 'Group of avatars', icon: '👥', category: 'Data Display', docs: '/docs/index.html?page=avatar-group' },
+    { id: 'badge', name: 'Badge', description: 'Notification badge', icon: '🔔', category: 'Data Display', docs: '/docs/index.html?page=badge' },
+    { id: 'bar-chart', name: 'Bar Chart', description: 'Bar chart visualization', icon: '📊', category: 'Data Display', docs: '/docs/index.html?page=bar-chart' },
+    { id: 'chart', name: 'Chart', description: 'General chart component', icon: '📈', category: 'Data Display', docs: '/docs/index.html?page=chart' },
+    { id: 'chip', name: 'Chip', description: 'Compact element for input, attribute, or action', icon: '🏷️', category: 'Data Display', docs: '/docs/index.html?page=chip' },
+    { id: 'meter-group', name: 'Meter', description: 'Visual meter display', icon: '📊', category: 'Data Display', docs: '/docs/index.html?page=meter-group' },
+    { id: 'pill', name: 'Pill', description: 'Rounded status indicator', icon: '💊', category: 'Data Display', docs: '/docs/index.html?page=pill' },
+    { id: 'speedometer', name: 'Speedometer', description: 'Speedometer gauge', icon: '🎯', category: 'Data Display', docs: '/docs/index.html?page=speedometer' },
+    { id: 'tag', name: 'Tag', description: 'Label for clear categorization', icon: '🏷', category: 'Data Display', docs: '/docs/index.html?page=tag' },
+    { id: 'timeline', name: 'Timeline', description: 'Events in chronological order', icon: '⏱️', category: 'Data Display', docs: '/docs/index.html?page=timeline' },
+    { id: 'tree-list', name: 'Tree List', description: 'Hierarchical tree view', icon: '🌳', category: 'Data Display', docs: '/docs/index.html?page=tree-list' },
+    // Feedback & Overlays
+    { id: 'dialog', name: 'Dialog', description: 'Modal dialog box', icon: '💬', category: 'Feedback & Overlays', docs: '/docs/index.html?page=dialog' },
+    { id: 'popover', name: 'Popover', description: 'Pop-up content', icon: '💭', category: 'Feedback & Overlays', docs: '/docs/index.html?page=popover' },
+    { id: 'skeleton', name: 'Skeleton', description: 'Loading state placeholder', icon: '💀', category: 'Feedback & Overlays', docs: '/docs/index.html?page=skeleton' },
+    { id: 'snackbar', name: 'Snackbar', description: 'Brief feedback message', icon: '🍞', category: 'Feedback & Overlays', docs: '/docs/index.html?page=snackbar' },
+    { id: 'loader', name: 'Loader', description: 'Advanced loading indicators', icon: '🔄', category: 'Feedback & Overlays', docs: '/docs/index.html?page=loader' },
+    { id: 'timer', name: 'Timer', description: 'Countdown or stopwatch', icon: '⏱️', category: 'Feedback & Overlays', docs: '/docs/index.html?page=timer' },
+];
+export const categories = ['Foundation & Layout', 'Navigation', 'Inputs & Forms', 'Data Display', 'Feedback & Overlays'];

package/dist/collection/components/library/library-card.css

@@ -0,0 +1,181 @@
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+.a11y-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+:host {
+  display: block;
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: linear-gradient(145deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.8));
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 20px;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  backdrop-filter: blur(10px);
+  position: relative;
+  overflow: hidden;
+}
+
+.card::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.05));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+.card:hover {
+  transform: translateY(-4px) scale(1.02);
+  border-color: rgba(99, 102, 241, 0.5);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(99, 102, 241, 0.2);
+}
+
+.card:hover::before {
+  opacity: 1;
+}
+
+.card:active {
+  transform: translateY(-2px) scale(1.01);
+}
+
+.card-icon {
+  font-size: 2rem;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
+  border-radius: 14px;
+  flex-shrink: 0;
+  transition: transform 0.3s ease;
+}
+
+.card:hover .card-icon {
+  transform: scale(1.1) rotate(5deg);
+}
+
+.card-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.card-title {
+  margin: 0 0 6px 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #f1f5f9;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.badge {
+  font-size: 0.65rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 3px 8px;
+  background: linear-gradient(135deg, #6366f1, #a855f7);
+  border-radius: 20px;
+  color: white;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+.card-description {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #94a3b8;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card-action {
+  flex-shrink: 0;
+}
+
+.play-btn {
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.card:hover .play-btn {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.play-btn:hover {
+  background: linear-gradient(135deg, #818cf8, #a78bfa);
+  transform: scale(1.15);
+  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
+}
+
+.play-btn:active {
+  transform: scale(1.05);
+}
+
+/* Light mode overrides */
+:host-context(.light) .card {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8));
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+:host-context(.light) .card-title {
+  color: #1e293b;
+}
+
+:host-context(.light) .card-description {
+  color: #64748b;
+}