atomicuilibrary 0.0.1

package/dist/esm/layout-manager.entry.js

@@ -0,0 +1,614 @@
+import { r as registerInstance, a as getElement, h } from './index-DUsoYu9r.js';
+import { g as getTransformedAncestorOffset } from './dom-BMFah5q3.js';
+import { G as GlobalEventBus } from './event-bus-vwwmWKs9.js';
+
+const Serialization = {
+    serialize(layout) {
+        return JSON.stringify(layout);
+    },
+    deserialize(s) {
+        return JSON.parse(s);
+    }
+};
+
+class StateEngine {
+    state;
+    constructor(initial) {
+        this.state = initial || StateEngine.emptyLayout();
+    }
+    static emptyLayout() {
+        return {
+            version: 1,
+            root: { id: 'root', type: 'row', children: [] },
+            floating: []
+        };
+    }
+    findPanel(id, node = this.state.root) {
+        for (let i = 0; i < node.children.length; i++) {
+            const child = node.children[i];
+            if (child.type === 'panel' && child.id === id)
+                return { parent: node, index: i };
+            if (child.children) {
+                const res = this.findPanel(id, child);
+                if (res)
+                    return res;
+            }
+        }
+        return null;
+    }
+    addPanel(panel, targetContainerId) {
+        const p = { ...panel, id: panel.id || `p_${Date.now()}`, type: 'panel' };
+        // If no target string, default to root or first active container
+        let target = targetContainerId ? this.findContainer(targetContainerId) : null;
+        if (!target) {
+            // Find valid target (row/column/tabs)
+            // Recursive search for first suitable container
+            const findFirst = (node) => {
+                if (['row', 'column', 'tabs'].includes(node.type))
+                    return node;
+                for (const c of node.children) {
+                    if (c.children) {
+                        const res = findFirst(c);
+                        if (res)
+                            return res;
+                    }
+                }
+                return null;
+            };
+            target = findFirst(this.state.root);
+        }
+        if (target) {
+            // Enforce 'single' container limit
+            if (target.type === 'single' && target.children.length > 0) {
+                console.warn(`Container ${target.id} is 'single' and already has a panel. Rejecting add.`);
+                return null; // Reject
+            }
+            target.children.push(p);
+        }
+        else {
+            // Fallback: root children
+            this.state.root.children.push(p);
+        }
+        GlobalEventBus.emit('panel:added', p);
+        return p.id;
+    }
+    removePanel(id) {
+        const found = this.findPanel(id);
+        if (!found || !found.parent)
+            return false;
+        const removed = found.parent.children.splice(found.index, 1)[0];
+        GlobalEventBus.emit('panel:removed', removed);
+        return true;
+    }
+    resizePanel(containerId, index, delta) {
+        const container = this.findContainer(containerId);
+        if (!container || !container.children || container.children.length <= index + 1)
+            return;
+        const current = container.children[index];
+        const next = container.children[index + 1];
+        if (!current.size)
+            current.size = 50;
+        if (!next.size)
+            next.size = 50;
+        const change = delta * 0.1;
+        current.size += change;
+        next.size -= change;
+        if (current.size < 5)
+            current.size = 5;
+        if (next.size < 5)
+            next.size = 5;
+        GlobalEventBus.emit('layout:updated', this.state);
+    }
+    setActiveTab(containerId, tabId) {
+        const container = this.findContainer(containerId);
+        if (!container || container.type !== 'tabs')
+            return;
+        container.activeTabId = tabId;
+        GlobalEventBus.emit('layout:updated', this.state);
+    }
+    findContainer(id, node = this.state.root) {
+        if (node.id === id)
+            return node;
+        for (const c of node.children) {
+            if (c.children) {
+                const res = this.findContainer(id, c);
+                if (res)
+                    return res;
+            }
+        }
+        return null;
+    }
+    save() {
+        return JSON.parse(JSON.stringify(this.state));
+    }
+    load(s) {
+        this.state = s;
+        GlobalEventBus.emit('layout:loaded', s);
+        GlobalEventBus.emit('layout:updated', this.state);
+    }
+    splitPanel(targetPanelId, direction, newPanel) {
+        const found = this.findPanel(targetPanelId);
+        if (!found || !found.parent)
+            return false;
+        const { parent, index } = found;
+        const currentPanel = parent.children[index];
+        const nextPanel = { ...newPanel, id: newPanel.id || `p_${Date.now()}`, type: 'panel' };
+        const targetType = direction === 'horizontal' ? 'row' : 'column';
+        // Redistribute size
+        const totalSize = currentPanel.size || 100;
+        const halfSize = totalSize / 2;
+        currentPanel.size = halfSize;
+        nextPanel.size = halfSize;
+        if (parent.type === targetType) {
+            parent.children.splice(index + 1, 0, nextPanel);
+        }
+        else {
+            const newContainer = {
+                id: `c_${Date.now()}`,
+                type: targetType,
+                children: [currentPanel, nextPanel]
+            };
+            parent.children.splice(index, 1, newContainer);
+        }
+        this.rebalanceSizes(parent);
+        GlobalEventBus.emit('layout:updated', this.state);
+        GlobalEventBus.emit('panel:added', nextPanel);
+        return nextPanel.id;
+    }
+    getPanelState(id, node = this.state.root) {
+        const found = this.findPanel(id, node);
+        if (found)
+            return found.parent.children[found.index];
+        return null;
+    }
+    movePanel(id, targetContainerId, targetIndex) {
+        const found = this.findPanel(id);
+        if (!found || !found.parent)
+            return false;
+        const panel = found.parent.children.splice(found.index, 1)[0];
+        const target = this.findContainer(targetContainerId);
+        if (!target) {
+            const targetPanel = this.findPanel(targetContainerId);
+            if (targetPanel) {
+                targetPanel.parent.children.splice(targetPanel.index + 1, 0, panel);
+                this.cleanupContainers(this.state.root);
+                GlobalEventBus.emit('layout:updated', this.state);
+                return true;
+            }
+            return false;
+        }
+        if (typeof targetIndex === 'number')
+            target.children.splice(targetIndex, 0, panel);
+        else
+            target.children.push(panel);
+        this.cleanupContainers(this.state.root);
+        GlobalEventBus.emit('panel:moved', panel, targetContainerId);
+        GlobalEventBus.emit('layout:updated', this.state);
+        return true;
+    }
+    mergePanel(id, targetId) {
+        const panelCfg = this.getPanelState(id);
+        const foundTargetContainer = this.findContainer(targetId);
+        if (foundTargetContainer && foundTargetContainer.type === 'tabs') {
+            return this.movePanel(id, targetId);
+        }
+        const foundTargetPanel = this.findPanel(targetId);
+        if (foundTargetPanel) {
+            const { parent, index } = foundTargetPanel;
+            const targetPanel = parent.children[index];
+            // Remove self
+            this.removePanel(id);
+            // Create new tabs container
+            const newTabs = {
+                id: `c_tabs_${Date.now()}`,
+                type: 'tabs',
+                children: [targetPanel, { ...panelCfg, id }]
+            };
+            parent.children.splice(index, 1, newTabs);
+            this.cleanupContainers(this.state.root);
+            GlobalEventBus.emit('layout:updated', this.state);
+            return true;
+        }
+        return false;
+    }
+    cleanupContainers(node) {
+        node.children = node.children.filter(child => {
+            if (child.children) {
+                this.cleanupContainers(child);
+                return child.children.length > 0;
+            }
+            return true;
+        });
+        this.rebalanceSizes(node);
+    }
+    rebalanceSizes(node) {
+        if (!node.children || node.children.length === 0)
+            return;
+        // Ensure all children have a size
+        const childrenWithNoSize = node.children.filter(c => !c.size);
+        if (childrenWithNoSize.length > 0) {
+            const totalSize = node.children.reduce((acc, c) => acc + (c.size || 0), 0);
+            const remaining = Math.max(0, 100 - totalSize);
+            const perEmpty = remaining / childrenWithNoSize.length;
+            childrenWithNoSize.forEach(c => c.size = perEmpty);
+        }
+        // Optional: normalize to 100% total if many panels
+        const total = node.children.reduce((acc, c) => acc + (c.size || 0), 0);
+        if (total > 0 && Math.abs(total - 100) > 0.1) {
+            node.children.forEach(c => c.size = (c.size / total) * 100);
+        }
+    }
+    collapsePanel(id) {
+        const p = this.getPanelState(id);
+        if (p && !p.collapsed) {
+            p.collapsed = true;
+            GlobalEventBus.emit('layout:updated', this.state);
+            return true;
+        }
+        return false;
+    }
+    expandPanel(id) {
+        const p = this.getPanelState(id);
+        if (p && p.collapsed) {
+            p.collapsed = false;
+            GlobalEventBus.emit('layout:updated', this.state);
+            return true;
+        }
+        return false;
+    }
+}
+
+const layoutManagerCss = () => `.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}.lm-root{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;position:relative}.lm-floating{position:absolute;top:0;left:0;width:0;height:0;z-index:9999}`;
+
+const LayoutManager = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    initialLayout; // JSON string
+    layout;
+    engine;
+    isDragging = false;
+    draggedPanelId = null;
+    dropIndicator = null;
+    currentDropTargetId = null;
+    currentDropIndex = null;
+    componentWillLoad() {
+        if (this.initialLayout) {
+            try {
+                const s = Serialization.deserialize(this.initialLayout);
+                this.engine = new StateEngine(s);
+            }
+            catch (err) {
+                console.warn('Invalid initial layout, using empty layout', err);
+                this.engine = new StateEngine();
+            }
+        }
+        else
+            this.engine = new StateEngine();
+        this.layout = this.engine.save();
+        // Listen to drag events
+        GlobalEventBus.on('panel:dragstart', (data) => {
+            this.isDragging = true;
+            this.draggedPanelId = data.panelId;
+            document.addEventListener('mousemove', this.onGlobalMouseMove);
+            document.addEventListener('mouseup', this.onGlobalMouseUp);
+        });
+        // Listen to resize events
+        GlobalEventBus.on('splitter:drag', (data) => {
+            // ... (existing resize logic)
+            // Check orientation of container to decide dx or dy
+            const container = this.engine.findContainer(data.containerId);
+            let delta = 0;
+            if (container) {
+                if (container.type === 'row' || container.type === 'horizontal')
+                    delta = data.dx;
+                else if (container.type === 'column' || container.type === 'vertical')
+                    delta = data.dy;
+                if (delta !== 0) {
+                    this.engine.resizePanel(data.containerId, data.index, delta);
+                    this.layout = this.engine.save(); // trigger re-render
+                }
+            }
+        });
+        GlobalEventBus.on('tab:changed', (data) => {
+            this.engine.setActiveTab(data.containerId, data.tabId);
+            this.layout = this.engine.save();
+        });
+        GlobalEventBus.on('panel:closed', (id) => {
+            this.engine.removePanel(id);
+            this.layout = this.engine.save();
+        });
+        GlobalEventBus.on('layout:updated', () => {
+            this.layout = this.engine.save();
+        });
+        // Expose for demo use
+        window.LayoutEventBus = GlobalEventBus;
+    }
+    resizeObserver;
+    componentDidLoad() {
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkAutoCollapse();
+            });
+            this.resizeObserver.observe(this.el);
+        }
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver)
+            this.resizeObserver.disconnect();
+        document.removeEventListener('mousemove', this.onGlobalMouseMove);
+        document.removeEventListener('mouseup', this.onGlobalMouseUp);
+    }
+    checkAutoCollapse() {
+        if (!this.el)
+            return;
+        const panels = Array.from(this.el.querySelectorAll('.lm-panel'));
+        panels.forEach(panelEl => {
+            const id = panelEl.getAttribute('data-id');
+            const p = this.engine.getPanelState(id);
+            if (!p || !p.collapsible || p.collapsed)
+                return;
+            const rect = panelEl.getBoundingClientRect();
+            const minW = p.minWidth || 100;
+            const minH = p.minHeight || 100;
+            // Logic: if panel is smer than its min size, collapse it
+            // For row containers, check width. For columns, check height.
+            // Or just check both.
+            if (rect.width < minW || rect.height < minH) {
+                this.engine.collapsePanel(id);
+                this.layout = this.engine.save();
+            }
+        });
+    }
+    async addPanel(cfg) {
+        const id = this.engine.addPanel(cfg);
+        this.layout = this.engine.save();
+        return id;
+    }
+    async removePanel(id) {
+        const ok = this.engine.removePanel(id);
+        this.layout = this.engine.save();
+        return ok;
+    }
+    async saveLayout() {
+        return Serialization.serialize(this.engine.save());
+    }
+    async loadLayout(json) {
+        const s = Serialization.deserialize(json);
+        this.engine.load(s);
+        this.layout = this.engine.save();
+        return true;
+    }
+    async splitPanel(targetPanelId, direction, newPanel) {
+        const id = this.engine.splitPanel(targetPanelId, direction, newPanel);
+        if (id) {
+            this.layout = this.engine.save();
+            return id;
+        }
+        return null;
+    }
+    getIndicatorStyle() {
+        if (!this.dropIndicator)
+            return {};
+        const { rect, zone } = this.dropIndicator;
+        const offset = getTransformedAncestorOffset(this.el);
+        const style = {
+            position: 'fixed',
+            pointerEvents: 'none',
+            zIndex: '10000',
+            background: 'rgba(59, 130, 246, 0.3)',
+            border: '2px solid #3bf673',
+            transition: 'all 0.1s ease-out',
+            borderRadius: '4px',
+        };
+        const left = rect.left - offset.x;
+        const top = rect.top - offset.y;
+        const width = rect.width;
+        const height = rect.height;
+        switch (zone) {
+            case 'left':
+                style.left = `${left}px`;
+                style.top = `${top}px`;
+                style.width = `${width / 2}px`;
+                style.height = `${height}px`;
+                break;
+            case 'right':
+                style.left = `${left + width / 2}px`;
+                style.top = `${top}px`;
+                style.width = `${width / 2}px`;
+                style.height = `${height}px`;
+                break;
+            case 'top':
+                style.left = `${left}px`;
+                style.top = `${top}px`;
+                style.width = `${width}px`;
+                style.height = `${height / 2}px`;
+                break;
+            case 'bottom':
+                style.left = `${left}px`;
+                style.top = `${top + height / 2}px`;
+                style.width = `${width}px`;
+                style.height = `${height / 2}px`;
+                break;
+            case 'root-left':
+                style.left = `${left}px`;
+                style.top = `${top}px`;
+                style.width = `40px`;
+                style.height = `${height}px`;
+                break;
+            case 'root-right':
+                style.left = `${left + width - 40}px`;
+                style.top = `${top}px`;
+                style.width = `40px`;
+                style.height = `${height}px`;
+                break;
+            case 'root-top':
+                style.left = `${left}px`;
+                style.top = `${top}px`;
+                style.width = `${width}px`;
+                style.height = `40px`;
+                break;
+            case 'root-bottom':
+                style.left = `${left}px`;
+                style.top = `${top + height - 40}px`;
+                style.width = `${width}px`;
+                style.height = `40px`;
+                break;
+            case 'center':
+            default:
+                style.left = `${left}px`;
+                style.top = `${top}px`;
+                style.width = `${width}px`;
+                style.height = `${height}px`;
+                break;
+        }
+        return style;
+    }
+    onGlobalMouseMove = (e) => {
+        if (!this.isDragging)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        // Check Root Edges first (VS Code-style full length sidebars)
+        let rootZone = null;
+        const edgeThreshold = 30; // 30px from edge
+        if (x < edgeThreshold)
+            rootZone = 'root-left';
+        else if (x > rect.width - edgeThreshold)
+            rootZone = 'root-right';
+        else if (y < edgeThreshold)
+            rootZone = 'root-top';
+        else if (y > rect.height - edgeThreshold)
+            rootZone = 'root-bottom';
+        if (rootZone) {
+            this.currentDropTargetId = 'root';
+            this.dropIndicator = { rect, zone: rootZone };
+            return;
+        }
+        // Find the panel/container we are hovering over
+        const elements = document.elementsFromPoint(e.clientX, e.clientY);
+        const targetEl = elements.find(el => el.classList.contains('lm-panel') || el.classList.contains('lm-container') || el.classList.contains('lm-tabs'));
+        if (targetEl) {
+            let id = targetEl.getAttribute('data-id');
+            const targetRect = targetEl.getBoundingClientRect();
+            // Special case for tabs: we want to find the insertion index
+            if (targetEl.classList.contains('lm-tabs')) {
+                const tabList = targetEl.querySelector('.lm-tab-list');
+                if (tabList) {
+                    const tabs = Array.from(tabList.querySelectorAll('.lm-tab'));
+                    let closestIndex = tabs.length;
+                    tabs.forEach((tab, idx) => {
+                        const tr = tab.getBoundingClientRect();
+                        if (e.clientX < tr.left + tr.width / 2) {
+                            if (closestIndex === tabs.length)
+                                closestIndex = idx;
+                        }
+                    });
+                    this.currentDropTargetId = targetEl.getAttribute('data-id');
+                    this.currentDropIndex = closestIndex;
+                    this.dropIndicator = { rect: targetRect, zone: 'center', index: closestIndex };
+                    return;
+                }
+            }
+            if (id === this.draggedPanelId) {
+                this.dropIndicator = null;
+                this.currentDropTargetId = null;
+                return;
+            }
+            const relX = (e.clientX - targetRect.left) / targetRect.width;
+            const relY = (e.clientY - targetRect.top) / targetRect.height;
+            let zone = 'center';
+            if (relX < 0.25)
+                zone = 'left';
+            else if (relX > 0.75)
+                zone = 'right';
+            else if (relY < 0.25)
+                zone = 'top';
+            else if (relY > 0.85)
+                zone = 'bottom';
+            this.currentDropTargetId = id;
+            this.currentDropIndex = null;
+            this.dropIndicator = { rect: targetRect, zone };
+        }
+        else {
+            this.dropIndicator = null;
+            this.currentDropTargetId = null;
+            this.currentDropIndex = null;
+        }
+    };
+    onGlobalMouseUp = () => {
+        if (this.isDragging && this.draggedPanelId && this.currentDropTargetId) {
+            const zone = this.dropIndicator?.zone;
+            const targetId = this.currentDropTargetId;
+            const draggedId = this.draggedPanelId;
+            if (zone === 'center') {
+                // Merge with target (into tabs)
+                if (draggedId.startsWith('new:')) {
+                    const type = draggedId.split(':')[1];
+                    const newId = `p_${Date.now()}`;
+                    this.engine.addPanel({ id: newId, title: type, content: `Content for ${type}` });
+                    if (this.currentDropIndex !== null) {
+                        this.engine.movePanel(newId, targetId, this.currentDropIndex);
+                    }
+                    else {
+                        this.engine.mergePanel(newId, targetId);
+                    }
+                }
+                else {
+                    if (this.currentDropIndex !== null) {
+                        this.engine.movePanel(draggedId, targetId, this.currentDropIndex);
+                    }
+                    else {
+                        this.engine.mergePanel(draggedId, targetId);
+                    }
+                }
+            }
+            else if (zone.startsWith('root-')) {
+                // Root split
+                const dir = zone === 'root-left' || zone === 'root-right' ? 'horizontal' : 'vertical';
+                let panelCfg;
+                if (draggedId.startsWith('new:')) {
+                    const type = draggedId.split(':')[1];
+                    panelCfg = { id: `p_${Date.now()}`, title: type, content: `Content for ${type}` };
+                }
+                else {
+                    panelCfg = this.engine.getPanelState(draggedId);
+                    this.engine.removePanel(draggedId);
+                }
+                if (panelCfg) {
+                    this.engine.splitPanel(this.layout.root.id, dir, panelCfg);
+                }
+            }
+            else if (zone) {
+                // Split logic
+                const direction = zone === 'left' || zone === 'right' ? 'horizontal' : 'vertical';
+                let panelCfg;
+                if (draggedId.startsWith('new:')) {
+                    const type = draggedId.split(':')[1];
+                    panelCfg = { id: `p_${Date.now()}`, title: type, content: `New ${type}` };
+                }
+                else {
+                    panelCfg = this.engine.getPanelState(draggedId);
+                    this.engine.removePanel(draggedId);
+                }
+                if (panelCfg) {
+                    this.engine.splitPanel(targetId, direction, panelCfg);
+                }
+            }
+            this.layout = this.engine.save();
+        }
+        this.isDragging = false;
+        this.draggedPanelId = null;
+        this.dropIndicator = null;
+        document.removeEventListener('mousemove', this.onGlobalMouseMove);
+        document.removeEventListener('mouseup', this.onGlobalMouseUp);
+    };
+    render() {
+        return (h("div", { key: 'f569e28b4534614afdb516bf769ad888c11b103f', class: "lm-root" }, h("lm-container", { key: 'fd8a5616176a28a3da539012d2e683f5216209fb', node: this.layout.root }), this.dropIndicator && h("div", { key: '27e38072647723cba399914c9f1684dc9ea62de5', class: `lm-drop-indicator ${this.dropIndicator.zone}`, style: this.getIndicatorStyle() }), h("div", { key: 'dfc23cda195b1b5ef6096c2fb76f52a0fd57cd3f', class: "lm-floating" }, this.layout.floating.map(f => (h("lm-floating-window", { "panel-id": f.id }))))));
+    }
+};
+LayoutManager.style = layoutManagerCss();
+
+export { LayoutManager as layout_manager };

package/dist/esm/library-card.entry.js

@@ -0,0 +1,61 @@
+import { r as registerInstance, h, H as Host } from './index-DUsoYu9r.js';
+
+const libraryCardCss = () => `.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)}: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}`;
+
+const LibraryCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Component ID (used for linking) */
+    componentId;
+    /** Title of the component */
+    cardTitle;
+    /** Short description */
+    description;
+    /** Icon emoji */
+    icon = '📦';
+    /** Optional badge text */
+    badge;
+    /** Optional documentation URL */
+    docs;
+    /** Mode: 'demo' or 'doc' */
+    mode = 'demo';
+    handleViewDemo = () => {
+        if (this.mode === 'doc') {
+            if (this.docs) {
+                window.location.href = this.docs;
+            }
+            return;
+        }
+        // Check if global showSection exists (defined in dashboard.html)
+        if (window.showSection) {
+            window.showSection(this.componentId);
+            return;
+        }
+        // Fallback navigation
+        const targetUrl = `/index.html#${this.componentId}`;
+        try {
+            if (window.parent !== window) {
+                window.parent.location.href = targetUrl;
+            }
+            else {
+                window.location.href = targetUrl;
+            }
+        }
+        catch (e) {
+            window.location.href = targetUrl;
+        }
+    };
+    handleViewDocs = (e) => {
+        e.stopPropagation();
+        if (this.docs) {
+            window.location.href = this.docs;
+        }
+    };
+    render() {
+        return (h(Host, { key: '3a3ff13a2954f14c350206fdad4ba6340f653e4e' }, h("div", { key: 'b92cca51b6cc6af60d8476f386482ccfdd475a34', class: "card", onClick: this.handleViewDemo }, h("div", { key: '30a68d761de621658d2fc34a40ea101fbf04141e', class: "card-icon" }, this.icon), h("div", { key: '9ac9cba2c76b9568e2a5f319f0b04cb283a5e682', class: "card-content" }, h("h3", { key: '0b62e3e8b4839a79a4f567dee7ff1da61a8799cf', class: "card-title" }, this.cardTitle, this.badge && h("span", { key: '2254007ce97d9a0cc9cbcf66f8b397e48eaca256', class: "badge" }, this.badge)), h("p", { key: '4d5a519fd7d9759ae9f17783e680002e66a82106', class: "card-description" }, this.description)), h("div", { key: '71b72af77182f87ce4e09ad2f17a3f66618ffc12', class: "card-action" }, this.docs && (h("ui-button", { key: '3b9318ef02116646198e2535f97394ccf634f674', variant: "ghost", size: "md", icon: "file-text", "icon-library": "lucide", title: "View Documentation", onClick: this.handleViewDocs })), h("ui-button", { key: 'de3abccdcdd7e3504e7fc57d3525e0a41b27b731', variant: "filled", color: "primary", size: "md", icon: "play", "icon-library": "lucide", title: "View Demo" })))));
+    }
+};
+LibraryCard.style = libraryCardCss();
+
+export { LibraryCard as library_card };