atomicuilibrary 0.0.1

package/dist/collection/components/code-preview/ui-code-preview.js

@@ -0,0 +1,548 @@
+import { h } from "@stencil/core";
+export class UiCodePreview {
+    el;
+    /**
+     * The JavaScript/JSX code to display (Legacy)
+     */
+    jsCode = '';
+    /**
+     * The TypeScript/TSX code to display (Legacy)
+     */
+    tsCode = '';
+    /**
+     * The CSS code to display (Legacy)
+     */
+    cssCode = '';
+    /**
+     * The HTML code to display (Legacy)
+     */
+    htmlCode = '';
+    /**
+     * Array of code snippets to display.
+     * Can be a JSON string or an array of { language, code, label? } objects.
+     * Supports any language supported by PrismJS (e.g., 'python', 'java', 'csharp', 'json').
+     */
+    snippets = [];
+    /**
+     * Current active language tab
+     */
+    activeLang = '';
+    /**
+     * Label for the code block (optional)
+     */
+    label = '';
+    /**
+     * Whether the code block is expanded or collapsed
+     */
+    expanded = true;
+    /**
+     * Whether to show the reset button
+     */
+    showReset = false;
+    /**
+     * Emitted when the reset button is clicked
+     */
+    uiReset;
+    /**
+     * Emitted when expansion state changes
+     */
+    expandedChange;
+    copied = false;
+    resetting = false;
+    prismLoaded = false;
+    internalSnippets = [];
+    handleStateChange() {
+        this.highlightCode();
+    }
+    handleCodeChange() {
+        this.processSnippets();
+        if (this.expanded) {
+            this.highlightCode();
+        }
+    }
+    componentWillLoad() {
+        this.processSnippets();
+        if (!this.activeLang && this.internalSnippets.length > 0) {
+            this.activeLang = this.internalSnippets[0].language;
+        }
+    }
+    componentDidLoad() {
+        this.loadPrism();
+    }
+    processSnippets() {
+        let snippets = [];
+        // 1. Process 'snippets' prop
+        if (this.snippets) {
+            if (typeof this.snippets === 'string') {
+                try {
+                    snippets = JSON.parse(this.snippets);
+                }
+                catch (e) {
+                    console.error('Failed to parse snippets JSON', e);
+                }
+            }
+            else if (Array.isArray(this.snippets)) {
+                snippets = [...this.snippets];
+            }
+        }
+        // 2. Add legacy props if valid and not already covered (or merge them)
+        // We append legacy props to ensure backward compatibility
+        if (this.tsCode)
+            snippets.push({ language: 'typescript', code: this.tsCode, label: 'TS' });
+        else if (this.jsCode)
+            snippets.push({ language: 'javascript', code: this.jsCode, label: 'JS' }); // Give preference to TS if both exist, usually
+        // Note: The original logic treated TS/JS sort of mutually exclusive for default view, but we can show both if explicitly passed
+        // However, usually we might want to deduplicate if snippets covers it. For now, simple append.
+        if (this.htmlCode)
+            snippets.push({ language: 'markup', code: this.htmlCode, label: 'HTML' });
+        if (this.cssCode)
+            snippets.push({ language: 'css', code: this.cssCode, label: 'CSS' });
+        // Deduplicate? (Optional)
+        // For now, allow duplicates if user sends them.
+        this.internalSnippets = snippets;
+        // Logic to set default activeLang if not set or invalid
+        const activeExists = this.internalSnippets.some(s => s.language === this.activeLang);
+        if (!activeExists && this.internalSnippets.length > 0) {
+            this.activeLang = this.internalSnippets[0].language;
+        }
+    }
+    loadPrism() {
+        if (window.Prism?.languages?.tsx) {
+            // Basic check for existence, but we might need new languages
+            this.checkAndLoadLanguages();
+            return;
+        }
+        if (!window.PRISM_LOADING) {
+            window.PRISM_LOADING = true;
+            const firstScript = document.createElement('script');
+            firstScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';
+            firstScript.onload = () => {
+                this.checkAndLoadLanguages();
+            };
+            document.head.appendChild(firstScript);
+            const themeLink = document.createElement('link');
+            themeLink.rel = 'stylesheet';
+            themeLink.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css';
+            document.head.appendChild(themeLink);
+        }
+        else {
+            // Already loading, wait for it
+            const check = setInterval(() => {
+                if (window.Prism) {
+                    clearInterval(check);
+                    this.checkAndLoadLanguages();
+                }
+            }, 100);
+        }
+    }
+    checkAndLoadLanguages() {
+        if (!window.Prism)
+            return;
+        // Identify needed languages
+        const neededLangs = new Set(this.internalSnippets.map(s => s.language));
+        // Always load these basics
+        ['javascript', 'typescript', 'jsx', 'tsx', 'css', 'markup'].forEach(l => neededLangs.add(l));
+        // Map common aliases to Prism components/filenames
+        const langMap = {
+            'js': 'javascript',
+            'ts': 'typescript',
+            'html': 'markup',
+            'xml': 'markup',
+            'svg': 'markup',
+            'py': 'python',
+            'cs': 'csharp',
+            'c#': 'csharp',
+            'pdk': 'php',
+            'rb': 'ruby',
+            'go': 'go',
+            'java': 'java',
+            'json': 'json',
+            'bash': 'bash',
+            'sh': 'bash',
+            'shell': 'bash'
+        };
+        const toLoad = [];
+        neededLangs.forEach(lang => {
+            const mapped = langMap[lang.toLowerCase()] || lang.toLowerCase();
+            // Check if loaded
+            if (!window.Prism.languages[mapped]) {
+                toLoad.push(mapped);
+            }
+        });
+        if (toLoad.length === 0) {
+            this.prismLoaded = true;
+            this.highlightCode();
+            return;
+        }
+        let loadedCount = 0;
+        toLoad.forEach(comp => {
+            // Prevent double loading
+            if (document.querySelector(`script[src*="prism-${comp}.min.js"]`)) {
+                loadedCount++;
+                if (loadedCount === toLoad.length) {
+                    this.prismLoaded = true;
+                    this.highlightCode();
+                }
+                return;
+            }
+            const s = document.createElement('script');
+            s.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${comp}.min.js`;
+            s.onload = () => {
+                loadedCount++;
+                if (loadedCount === toLoad.length) {
+                    this.prismLoaded = true;
+                    this.highlightCode();
+                }
+            };
+            s.onerror = () => {
+                console.warn(`Failed to load Prism language: ${comp}`);
+                loadedCount++;
+                // Still proceed even if one fails
+                if (loadedCount === toLoad.length) {
+                    this.prismLoaded = true;
+                    this.highlightCode();
+                }
+            };
+            document.head.appendChild(s);
+        });
+    }
+    highlightCode() {
+        if (this.expanded) {
+            const activeSnippet = this.internalSnippets.find(s => s.language === this.activeLang) || this.internalSnippets[0];
+            const code = activeSnippet ? activeSnippet.code : '';
+            setTimeout(() => {
+                const codeEl = this.el.querySelector('code');
+                if (codeEl) {
+                    // Reset content to plain text before Prism highlights it
+                    codeEl.textContent = code;
+                    if (window.Prism) {
+                        window.Prism.highlightElement(codeEl);
+                    }
+                }
+            }, 50);
+        }
+    }
+    handleCopy = (e) => {
+        e.stopPropagation();
+        const currentSnippet = this.internalSnippets.find(s => s.language === this.activeLang);
+        if (currentSnippet?.code) {
+            navigator.clipboard.writeText(currentSnippet.code).then(() => {
+                this.copied = true;
+                setTimeout(() => (this.copied = false), 2000);
+            });
+        }
+    };
+    handleReset = (e) => {
+        e.stopPropagation();
+        this.resetting = true;
+        this.uiReset.emit();
+        setTimeout(() => (this.resetting = false), 600);
+    };
+    toggleExpanded = (e) => {
+        e.stopPropagation();
+        this.expanded = !this.expanded;
+        this.expandedChange.emit(this.expanded);
+    };
+    getPrismLanguage(lang) {
+        const map = {
+            'js': 'javascript',
+            'ts': 'typescript',
+            'html': 'markup',
+            'c#': 'csharp'
+        };
+        return map[lang.toLowerCase()] || lang.toLowerCase();
+    }
+    getLabel(snippet) {
+        if (snippet.label)
+            return snippet.label;
+        const lang = snippet.language.toLowerCase();
+        const map = {
+            'javascript': 'JS',
+            'typescript': 'TS',
+            'markup': 'HTML',
+            'css': 'CSS',
+            'python': 'Python',
+            'java': 'Java',
+            'csharp': 'C#',
+            'go': 'Go',
+            'json': 'JSON'
+        };
+        return map[lang] || lang.toUpperCase();
+    }
+    render() {
+        const activeSnippet = this.internalSnippets.find(s => s.language === this.activeLang) || this.internalSnippets[0];
+        const currentCode = activeSnippet ? activeSnippet.code : '';
+        const displayLang = activeSnippet ? activeSnippet.language : 'markup';
+        const prismLang = this.getPrismLanguage(displayLang);
+        return (h("div", { key: '7a1351cde2fe115457ca505a74ddbeac1f6dcddd', class: { 'code-preview-root': true, 'is-expanded': this.expanded } }, h("div", { key: '1f9addfe7e96493bccb7257ddb5069d1a7e70c7e', class: "code-toolbar" }, h("div", { key: '080be5bd471895a49e949192b4980dc0de1e6226', class: "left-actions" }, this.label && h("span", { key: 'd658281d365881a28fa22b875f5f091b4fe157a4', class: "code-label" }, this.label), this.internalSnippets.length > 1 && (h("div", { key: 'e61fb82ff28f045b037bf30310c730c4280fa4d8', class: "lang-tabs" }, this.internalSnippets.map(snippet => (h("ui-button", { variant: this.activeLang === snippet.language ? 'primary' : 'ghost', class: { 'active': this.activeLang === snippet.language }, onClick: () => this.activeLang = snippet.language, size: "sm", label: this.getLabel(snippet) }))))), this.internalSnippets.length === 1 && !this.label && (h("span", { key: 'd0e2caca56998e929749f305ac2af37be47ea4b6', class: "code-label", style: { opacity: '0.7', fontSize: '12px' } }, this.getLabel(this.internalSnippets[0])))), h("div", { key: '49fa1c00084fa56f46acc5efd41a6008abf3a136', class: "right-actions" }, this.showReset && (h("ui-button", { key: '4d65ee2605b003d51bb6ec924b086310f3c398f2', variant: "ghost", onClick: this.handleReset, title: "Reset demo", ariaLabel: "Reset demo", icon: "rotate-cw", iconLibrary: "lucide", iconOnly: true, size: "sm", loading: this.resetting })), h("ui-button", { key: '0889f503e1703a2f07bc2fbc489282495667637c', variant: "ghost", onClick: this.toggleExpanded, title: this.expanded ? 'Hide code' : 'Show code', ariaLabel: this.expanded ? 'Hide code' : 'Show code', size: "sm", label: this.expanded ? 'Hide code' : 'Show code', icon: this.expanded ? 'chevron-up' : 'chevron-down', iconLibrary: "lucide" }), h("ui-button", { key: 'e31e13096084bfeac8115e778423ec6693411b92', variant: "ghost", onClick: this.handleCopy, title: "Copy code", ariaLabel: "Copy code", size: "sm", icon: this.copied ? 'check' : 'copy', iconLibrary: "lucide", iconOnly: true, iconColor: this.copied ? '#4caf50' : undefined }))), h("div", { key: '4e94f96825f20eb61feadf421a08cbc76cdec0db', class: "code-container", style: { maxHeight: this.expanded ? '800px' : '0' } }, h("pre", { key: '8206cc5718503cdcc151d816897fffdaebdf0195', class: `language-${prismLang}` }, h("code", { key: '32aed72ceca967b3f29aaccf03e8746033df5dea', class: `language-${prismLang}` }, currentCode)))));
+    }
+    static get is() { return "ui-code-preview"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-code-preview.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-code-preview.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "jsCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The JavaScript/JSX code to display (Legacy)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "js-code",
+                "defaultValue": "''"
+            },
+            "tsCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The TypeScript/TSX code to display (Legacy)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "ts-code",
+                "defaultValue": "''"
+            },
+            "cssCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The CSS code to display (Legacy)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "css-code",
+                "defaultValue": "''"
+            },
+            "htmlCode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The HTML code to display (Legacy)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "html-code",
+                "defaultValue": "''"
+            },
+            "snippets": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CodeSnippet[] | string",
+                    "resolved": "CodeSnippet[] | string",
+                    "references": {
+                        "CodeSnippet": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/code-preview/types.ts::CodeSnippet",
+                            "referenceLocation": "CodeSnippet"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of code snippets to display.\r\nCan be a JSON string or an array of { language, code, label? } objects.\r\nSupports any language supported by PrismJS (e.g., 'python', 'java', 'csharp', 'json')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "snippets",
+                "defaultValue": "[]"
+            },
+            "activeLang": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current active language tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-lang",
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the code block (optional)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "expanded": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the code block is expanded or collapsed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded",
+                "defaultValue": "true"
+            },
+            "showReset": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the reset button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-reset",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "copied": {},
+            "resetting": {},
+            "prismLoaded": {},
+            "internalSnippets": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiReset",
+                "name": "uiReset",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the reset button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "expandedChange",
+                "name": "expandedChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when expansion state changes"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "activeLang",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "expanded",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "jsCode",
+                "methodName": "handleCodeChange"
+            }, {
+                "propName": "tsCode",
+                "methodName": "handleCodeChange"
+            }, {
+                "propName": "htmlCode",
+                "methodName": "handleCodeChange"
+            }, {
+                "propName": "cssCode",
+                "methodName": "handleCodeChange"
+            }, {
+                "propName": "snippets",
+                "methodName": "handleCodeChange"
+            }];
+    }
+}

package/dist/collection/components/color-controller/color-controller.css

@@ -0,0 +1,108 @@
+.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;
+  font-family: inherit;
+  width: 100%;
+  max-width: 2a0px;
+}
+
+.col-ctrl-label {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--color-primary, #6366f1);
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.col-ctrl-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.col-ctrl-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.col-ctrl-key {
+  flex: 0 0 20px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary, #4b5563);
+}
+
+.col-ctrl-input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-default, #e5e7eb);
+  border-radius: 4px;
+  background: var(--bg-primary, #ffffff);
+  padding: 2px 6px;
+  transition: all 0.2s;
+}
+.col-ctrl-input-wrapper:focus-within {
+  border-color: var(--color-primary, #6366f1);
+  box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb, 99, 102, 241), 0.1);
+}
+
+.col-ctrl-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  padding: 4px;
+  width: 100%;
+  color: var(--text-primary, #111827);
+  font-family: monospace;
+  text-align: right;
+}
+.col-ctrl-input::-webkit-outer-spin-button, .col-ctrl-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.hex-row .col-ctrl-key {
+  font-family: monospace;
+  font-weight: 700;
+}
+
+.col-ctrl-unit {
+  font-size: 12px;
+  color: var(--text-muted, #9ca3af);
+  margin-left: 4px;
+  min-width: 12px;
+}
+
+.hex-input {
+  text-align: left;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+}