le-kit 0.5.3 → 0.5.4

package/dist/collection/components/le-component/le-component.css

@@ -1,189 +0,0 @@
-/**
- * le-component styles
- * 
- * In default mode, the component is invisible (passthrough).
- * In admin mode, it shows a wrapper with header and settings.
- */
-
-:host {
-  display: contents;
-}
-
-:host(.admin-mode) {
-  display: block;
-}
-
-/* Admin mode wrapper */
-.le-component-wrapper {
-  position: relative;
-  border: 2px dashed var(--le-admin-border-color, #90caf9);
-  border-radius: var(--le-radius-md, 8px);
-  background: var(--le-admin-bg, rgba(144, 202, 249, 0.05));
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.le-component-wrapper:hover {
-  border-color: var(--le-admin-border-hover, #42a5f5);
-  box-shadow: 0 0 0 2px var(--le-admin-glow, rgba(66, 165, 245, 0.2));
-}
-
-/* Component header */
-.le-component-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--le-spacing-1, 4px);
-  padding: 0 0 0 var(--le-spacing-1, 4px);
-  background: var(--le-admin-header-bg, rgba(144, 202, 249, 0.15));
-  border-bottom: 1px solid var(--le-admin-border-color, #90caf9);
-  border-radius: var(--le-radius-md, 8px) var(--le-radius-md, 8px) 0 0;
-  font-size: var(--le-font-size-xs, 11px);
-}
-
-.le-component-name {
-  font-weight: var(--le-font-weight-medium, 500);
-  color: var(--le-admin-text, #1976d2);
-  text-transform: capitalize;
-  text-align: start;
-  overflow: hidden;
-  width: 0;
-  flex: 1 1 0%;
-}
-
-/* Component content area */
-.le-component-content {
-  padding: var(--le-space-xs, 4px);
-}
-
-.le-component-trigger {
-  font-size: 24px;
-  line-height: 0px;
-  width: 12px;
-  height: 12px;
-}
-.le-component-button {
-  width: 20px;
-}
-
-/* Property editor styles */
-.property-editor {
-  display: flex;
-  flex-direction: column;
-  gap: var(--le-space-sm, 8px);
-  max-width: 380px;
-}
-
-.property-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--le-space-xs, 4px);
-}
-
-.property-field label {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: var(--le-font-size-sm, 13px);
-  font-weight: var(--le-font-weight-medium, 500);
-  color: var(--le-color-text, #333);
-}
-
-.property-hint {
-  font-size: var(--le-font-size-xs, 11px);
-  font-weight: normal;
-  color: var(--le-color-text-secondary, #666);
-  line-height: 1.3;
-}
-
-.property-field input[type="text"],
-.property-field input[type="number"],
-.property-field select {
-  padding: var(--le-space-xs, 4px) var(--le-space-sm, 8px);
-  border: 1px solid var(--le-color-border, #ddd);
-  border-radius: var(--le-radius-md, 7px);
-  font-size: var(--le-font-size-sm, 13px);
-  font-family: inherit;
-  background: var(--le-color-surface, #fff);
-  color: var(--le-color-text, #333);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.property-field input:focus,
-.property-field select:focus {
-  outline: none;
-  border-color: var(--le-color-primary, #1976d2);
-  box-shadow: 0 0 0 2px var(--le-color-primary-light, rgba(25, 118, 210, 0.2));
-}
-
-/* Checkbox field */
-.property-field--checkbox {
-  flex-direction: column;
-}
-
-.property-field--checkbox label {
-  flex-direction: row;
-  align-items: center;
-  gap: var(--le-space-sm, 8px);
-  cursor: pointer;
-}
-
-.property-field--checkbox input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  margin: 0;
-  cursor: pointer;
-  accent-color: var(--le-color-primary, #1976d2);
-}
-
-.property-field--checkbox .property-hint {
-  margin-left: 24px;
-}
-
-/* No properties message */
-.no-properties {
-  margin: 0;
-  padding: var(--le-space-sm, 8px);
-  font-size: var(--le-font-size-sm, 13px);
-  color: var(--le-color-text-secondary, #666);
-  text-align: center;
-}
-
-/* Property editor container */
-.property-editor-container {
-  display: flex;
-  flex-direction: column;
-  gap: var(--le-space-md, 12px);
-}
-
-/* Actions section at bottom of editor */
-.property-editor-actions {
-  padding-top: var(--le-space-sm, 8px);
-  border-top: 1px solid var(--le-color-border, #e5e5e5);
-}
-
-/* Delete component button */
-.delete-component-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--le-space-xs, 4px);
-  width: 100%;
-  padding: var(--le-space-sm, 8px) var(--le-space-md, 12px);
-  border: 1px solid var(--le-color-danger, #e53935);
-  border-radius: var(--le-radius-md, 6px);
-  background: transparent;
-  color: var(--le-color-danger, #e53935);
-  font-size: var(--le-font-size-sm, 13px);
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.15s, color 0.15s;
-}
-
-.delete-component-btn:hover {
-  background: var(--le-color-danger, #e53935);
-  color: white;
-}
-
-.delete-component-btn:active {
-  opacity: 0.9;
-}

package/dist/collection/components/le-component/le-component.js

@@ -1,343 +0,0 @@
-import { h, Host, getAssetPath } from "@stencil/core";
-import { classnames, observeModeChanges } from "../../utils/utils";
-import { getLeKitConfig } from "../../global/app";
-import { leConfirm } from "../le-popup/le-popup.api";
-/**
- * Component wrapper for admin mode editing.
- *
- * This component is used internally by other components to provide admin-mode
- * editing capabilities. It wraps the component's rendered output and shows
- * a settings popover for editing properties.
- *
- * In default mode, it acts as a simple passthrough (display: contents).
- * In admin mode, it shows a border, component name header, and settings popover.
- *
- * The host element is found automatically by traversing up through the shadow DOM.
- *
- * Usage inside a component's render method:
- * ```tsx
- * render() {
- *   return (
- *     <le-component component="le-card">
- *       <Host>...</Host>
- *     </le-component>
- *   );
- * }
- * ```
- *
- * @slot - The component's rendered content
- *
- * @cmsInternal true
- * @cmsCategory System
- */
-export class LeComponent {
-    constructor() {
-        /**
-         * Internal state to track admin mode
-         */
-        this.adminMode = false;
-        /**
-         * Component metadata loaded from Custom Elements Manifest
-         */
-        this.componentMeta = null;
-        /**
-         * Current property values of the host component
-         */
-        this.propertyValues = {};
-    }
-    connectedCallback() {
-        // Find the host element - le-component is rendered inside the component's shadow DOM,
-        // so we need to find the shadow root's host element
-        this.findHostElement();
-        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
-            this.adminMode = mode === 'admin';
-            // Load metadata and refresh property values only when entering admin mode
-            if (this.adminMode) {
-                if (!this.componentMeta) {
-                    this.loadComponentMetadata();
-                }
-                else {
-                    this.readPropertyValues();
-                }
-            }
-        });
-    }
-    /**
-     * Find the host element by traversing up through shadow DOM
-     */
-    findHostElement() {
-        // Get the shadow root that contains this le-component
-        const rootNode = this.el.getRootNode();
-        if (rootNode instanceof ShadowRoot) {
-            // The host of this shadow root is our target component (e.g., le-card)
-            this.hostElement = rootNode.host;
-        }
-    }
-    componentDidLoad() {
-        // Read initial property values from the host element
-        this.readPropertyValues();
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    /**
-     * Formats a tag name into a display name
-     * e.g., 'le-card' -> 'Card'
-     */
-    formatDisplayName(tagName) {
-        if (!tagName || typeof tagName !== 'string')
-            return 'unknown';
-        return tagName
-            .replace(/^le-/, '') // Remove 'le-' prefix
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-            .join(' ');
-    }
-    /**
-     * Load component metadata from the Custom Elements Manifest
-     */
-    async loadComponentMetadata() {
-        try {
-            // Fetch the manifest from configured URL
-            const { manifestFile } = getLeKitConfig();
-            const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);
-            const response = await fetch(manifestFileResolved);
-            const manifest = await response.json();
-            // Find the component definition
-            for (const module of manifest.modules) {
-                for (const declaration of module.declarations || []) {
-                    if (declaration.tagName === this.component) {
-                        const attributes = (declaration.attributes || []).filter((attr) => !this.isInternalAttribute(attr.name));
-                        this.componentMeta = {
-                            tagName: declaration.tagName,
-                            description: declaration.description,
-                            attributes,
-                        };
-                        // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);
-                        // Read property values after metadata is loaded
-                        this.readPropertyValues();
-                        return;
-                    }
-                }
-            }
-            // console.warn(`[le-component] No metadata found for component: ${this.component}`);
-        }
-        catch (error) {
-            // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);
-        }
-    }
-    /**
-     * Check if an attribute is internal (should not be shown in editor)
-     */
-    isInternalAttribute(name) {
-        const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];
-        return internalAttrs.includes(name);
-    }
-    /**
-     * Read current property values from the host element
-     */
-    readPropertyValues() {
-        if (!this.hostElement || !this.componentMeta)
-            return;
-        const values = {};
-        for (const attr of this.componentMeta.attributes) {
-            const value = this.hostElement.getAttribute(attr.name);
-            values[attr.name] = this.parseAttributeValue(value, attr.type?.text);
-        }
-        this.propertyValues = values;
-    }
-    /**
-     * Parse an attribute value based on its type
-     */
-    parseAttributeValue(value, type) {
-        if (value === null)
-            return undefined;
-        if (type === 'boolean') {
-            return value !== null && value !== 'false';
-        }
-        if (type === 'number') {
-            return parseFloat(value);
-        }
-        return value;
-    }
-    /**
-     * Handle property value changes from the editor
-     */
-    handlePropertyChange(attrName, value, type) {
-        if (!this.hostElement)
-            return;
-        // Update the host element's attribute
-        if (type === 'boolean') {
-            if (value) {
-                this.hostElement.setAttribute(attrName, '');
-            }
-            else {
-                this.hostElement.removeAttribute(attrName);
-            }
-        }
-        else if (value === undefined || value === '') {
-            this.hostElement.removeAttribute(attrName);
-        }
-        else {
-            this.hostElement.setAttribute(attrName, String(value));
-        }
-        // Update local state
-        this.propertyValues = { ...this.propertyValues, [attrName]: value };
-        // update the host element the way the parent element mutation observer would catch it?
-    }
-    /**
-     * Delete this component from the DOM
-     */
-    deleteComponent() {
-        if (!this.hostElement)
-            return;
-        // Confirm deletion
-        const name = this.displayName || this.formatDisplayName(this.component);
-        if (!leConfirm(`Delete this ${name}?`))
-            return;
-        // Remove the host element from its parent
-        const parent = this.hostElement.parentElement;
-        if (parent) {
-            this.hostElement.remove();
-        }
-    }
-    /**
-     * Render the property editor form
-     */
-    renderPropertyEditor() {
-        const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;
-        return (h("div", { class: "property-editor-container" }, hasProperties ? (h("form", { class: "property-editor", onSubmit: e => e.preventDefault() }, this.componentMeta.attributes.map(attr => this.renderPropertyField(attr)))) : (h("p", { class: "no-properties" }, "No editable properties")), h("div", { class: "property-editor-actions" }, h("le-button", { type: "button", variant: "outlined", color: "danger", "full-width": true, onClick: () => this.deleteComponent() }, h("span", { slot: "icon-start" }, "\uD83D\uDDD1\uFE0F"), h("span", null, "Delete Component")))));
-    }
-    /**
-     * Render a single property field based on its type
-     */
-    renderPropertyField(attr) {
-        const value = this.propertyValues[attr.name];
-        const type = attr.type?.text || 'string';
-        // Check if type is a union of string literals (e.g., "'default' | 'outlined' | 'elevated'")
-        const enumMatch = type.match(/^'[^']+'/);
-        if (enumMatch) {
-            const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("le-select", { options: [...options.map(opt => ({ label: opt, value: opt }))], "full-width": true, value: value ?? attr.default?.replace(/'/g, ''), placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) })));
-        }
-        // Boolean type
-        if (type === 'boolean') {
-            return (h("div", { class: "property-field property-field--checkbox" }, h("le-checkbox", { name: `prop-${attr.name}`, checked: value === true || value === '', onChange: e => this.handlePropertyChange(attr.name, e.target.checked, type) }, attr.name, attr.description && h("div", { slot: "description" }, attr.description))));
-        }
-        // Number type
-        if (type === 'number') {
-            return (h("div", { class: "property-field" }, h("label", { htmlFor: `prop-${attr.name}` }, attr.name, attr.description && h("span", { class: "property-hint" }, attr.description)), h("input", { type: "number", id: `prop-${attr.name}`, value: value ?? '', placeholder: attr.default, onChange: e => this.handlePropertyChange(attr.name, e.target.value, type) })));
-        }
-        // Default: string/text input
-        return (h("div", { class: "property-field" }, h("le-string-input", { name: `prop-${attr.name}`, label: attr.name, value: value ?? '', placeholder: attr.default?.replace(/'/g, ''), onChange: (e) => this.handlePropertyChange(attr.name, e.detail.value, type) }, h("span", { slot: "description" }, attr.description))));
-    }
-    render() {
-        const name = this.displayName || this.formatDisplayName(this.component);
-        // In default mode, just pass through content with host classes
-        if (!this.adminMode) {
-            return (h(Host, { class: classnames(this.component, this.hostClass), style: this.hostStyle }, h("slot", null)));
-        }
-        // In admin mode, show wrapper with header and settings
-        return (h(Host, { class: classnames(this.component, this.hostClass, 'admin-mode'), style: this.hostStyle }, h("div", { class: "le-component-wrapper" }, h("div", { class: "le-component-header" }, h("span", { class: "le-component-name" }, name), h("le-popover", { popoverTitle: `${name} Settings`, position: "right", align: "start", "min-width": "300px", mode: "default" }, h("le-button", { type: "button", class: "le-component-button", slot: "trigger", variant: "clear", size: "small", "aria-label": "Edit component properties", "icon-only": true }, h("span", { class: "le-component-trigger", slot: "icon-only" }, "\u2699")), this.renderPropertyEditor())), h("div", { class: "le-component-content" }, h("slot", null)))));
-    }
-    static get is() { return "le-component"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-component.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-component.css"]
-        };
-    }
-    static get assetsDirs() { return ["assets"]; }
-    static get properties() {
-        return {
-            "component": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The tag name of the component (e.g., 'le-card').\nUsed to look up property metadata and display the component name."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "component"
-            },
-            "displayName": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Optional display name for the component.\nIf not provided, the tag name will be formatted as the display name."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "display-name"
-            },
-            "hostClass": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Classes to apply to the host element.\nAllows parent components to pass their styling classes."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "host-class"
-            },
-            "hostStyle": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "{ [key: string]: string }",
-                    "resolved": "{ [key: string]: string; }",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Inline styles to apply to the host element.\nAllows parent components to pass dynamic styles (e.g., flex properties)."
-                },
-                "getter": false,
-                "setter": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "adminMode": {},
-            "componentMeta": {},
-            "propertyValues": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=le-component.js.map

package/dist/collection/components/le-component/le-component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"le-component.js","sourceRoot":"","sources":["../../../src/components/le-component/le-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAOH,MAAM,OAAO,WAAW;IANxB;QAsCE;;WAEG;QACc,cAAS,GAAY,KAAK,CAAC;QAE5C;;WAEG;QACc,kBAAa,GAA6B,IAAI,CAAC;QAEhE;;WAEG;QACc,mBAAc,GAAwB,EAAE,CAAC;KA+U3D;IA3UC,iBAAiB;QACf,sFAAsF;QACtF,oDAAoD;QACpD,IAAI,CAAC,eAAe,EAAE,CAAC;QAEvB,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE;YAC/D,IAAI,CAAC,SAAS,GAAG,IAAI,KAAK,OAAO,CAAC;YAClC,0EAA0E;YAC1E,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBACxB,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC/B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,sDAAsD;QACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC;QACvC,IAAI,QAAQ,YAAY,UAAU,EAAE,CAAC;YACnC,uEAAuE;YACvE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,IAAmB,CAAC;QAClD,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,qDAAqD;QACrD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,sBAAsB,EAAE,EAAE,CAAC;IAClC,CAAC;IAED;;;OAGG;IACK,iBAAiB,CAAC,OAAe;QACvC,IAAI,CAAC,OAAO,IAAI,OAAO,OAAO,KAAK,QAAQ;YAAE,OAAO,SAAS,CAAC;QAC9D,OAAO,OAAO;aACX,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,sBAAsB;aAC1C,KAAK,CAAC,GAAG,CAAC;aACV,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;aACzD,IAAI,CAAC,GAAG,CAAC,CAAC;IACf,CAAC;IAED;;OAEG;IACK,KAAK,CAAC,qBAAqB;QACjC,IAAI,CAAC;YACH,yCAAyC;YACzC,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAAC;YAC1C,MAAM,oBAAoB,GAAG,YAAY,CAAC,YAAY,YAAY,EAAE,CAAC,CAAC;YACtE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,oBAAoB,CAAC,CAAC;YACnD,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;YAEvC,gCAAgC;YAChC,KAAK,MAAM,MAAM,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACtC,KAAK,MAAM,WAAW,IAAI,MAAM,CAAC,YAAY,IAAI,EAAE,EAAE,CAAC;oBACpD,IAAI,WAAW,CAAC,OAAO,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;wBAC3C,MAAM,UAAU,GAAG,CAAC,WAAW,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,MAAM,CACtD,CAAC,IAAuB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAClE,CAAC;wBACF,IAAI,CAAC,aAAa,GAAG;4BACnB,OAAO,EAAE,WAAW,CAAC,OAAO;4BAC5B,WAAW,EAAE,WAAW,CAAC,WAAW;4BACpC,UAAU;yBACX,CAAC;wBACF,4FAA4F;wBAC5F,gDAAgD;wBAChD,IAAI,CAAC,kBAAkB,EAAE,CAAC;wBAC1B,OAAO;oBACT,CAAC;gBACH,CAAC;YACH,CAAC;YACD,qFAAqF;QACvF,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,kGAAkG;QACpG,CAAC;IACH,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,IAAY;QACtC,MAAM,aAAa,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACxE,OAAO,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAED;;OAEG;IACK,kBAAkB;QACxB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAErD,MAAM,MAAM,GAAwB,EAAE,CAAC;QACvC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,CAAC;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACvD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACvE,CAAC;QACD,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;IAC/B,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,KAAoB,EAAE,IAAa;QAC7D,IAAI,KAAK,KAAK,IAAI;YAAE,OAAO,SAAS,CAAC;QAErC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,OAAO,CAAC;QAC7C,CAAC;QACD,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,OAAO,UAAU,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;OAEG;IACK,oBAAoB,CAAC,QAAgB,EAAE,KAAU,EAAE,IAAa;QACtE,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,sCAAsC;QACtC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,KAAK,EAAE,CAAC;gBACV,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;YAC9C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;YAC7C,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;YAC/C,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC7C,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACzD,CAAC;QAED,qBAAqB;QACrB,IAAI,CAAC,cAAc,GAAG,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC;QAEpE,uFAAuF;IACzF,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,IAAI,CAAC,WAAW;YAAE,OAAO;QAE9B,mBAAmB;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxE,IAAI,CAAC,SAAS,CAAC,eAAe,IAAI,GAAG,CAAC;YAAE,OAAO;QAE/C,0CAA0C;QAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC;QAC9C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAErF,OAAO,CACL,WAAK,KAAK,EAAC,2BAA2B;YACnC,aAAa,CAAC,CAAC,CAAC,CACf,YAAM,KAAK,EAAC,iBAAiB,EAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,IAC5D,IAAI,CAAC,aAAc,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CACtE,CACR,CAAC,CAAC,CAAC,CACF,SAAG,KAAK,EAAC,eAAe,6BAA2B,CACpD;YACD,WAAK,KAAK,EAAC,yBAAyB;gBAClC,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,QAAQ,sBAEd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;oBAErC,YAAM,IAAI,EAAC,YAAY,yBAAW;oBAClC,mCAA6B,CACnB,CACR,CACF,CACP,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,mBAAmB,CAAC,IAAuB;QACjD,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,IAAI,IAAI,QAAQ,CAAC;QAEzC,4FAA4F;QAC5F,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACzC,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;YACzE,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;gBACzB,aAAO,OAAO,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;oBAChC,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,WAAW,CAAQ,CACpE;gBACR,iBACE,OAAO,EAAE,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,sBAE9D,KAAK,EAAE,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC/C,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAoC,EAAE,EAAE,CACjD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAEjD,CACT,CACP,CAAC;QACJ,CAAC;QAED,eAAe;QACf,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,OAAO,CACL,WAAK,KAAK,EAAC,yCAAyC;gBAClD,mBACE,IAAI,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EACzB,OAAO,EAAE,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,EAAE,EACvC,QAAQ,EAAE,CAAC,CAAC,EAAE,CACZ,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,OAAO,EAAE,IAAI,CAAC;oBAGnF,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,WAAW,IAAI,WAAK,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAO,CACzD,CACV,CACP,CAAC;QACJ,CAAC;QAED,cAAc;QACd,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;YACtB,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;gBACzB,aAAO,OAAO,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE;oBAChC,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,WAAW,CAAQ,CACpE;gBACR,aACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EACvB,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,IAAI,CAAC,OAAO,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,CACZ,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,IAAI,CAAC,GAElF,CACE,CACP,CAAC;QACJ,CAAC;QAED,6BAA6B;QAC7B,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB;YACzB,uBACE,IAAI,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,EACzB,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,IAAI,EAAE,EAClB,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5C,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC;gBAEhF,YAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAClC,CACd,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAExE,+DAA+D;QAC/D,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS;gBAC5E,eAAa,CACR,CACR,CAAC;QACJ,CAAC;QAED,uDAAuD;QACvD,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS;YAC1F,WAAK,KAAK,EAAC,sBAAsB;gBAC/B,WAAK,KAAK,EAAC,qBAAqB;oBAC9B,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAQ;oBAC7C,kBACE,YAAY,EAAE,GAAG,IAAI,WAAW,EAChC,QAAQ,EAAC,OAAO,EAChB,KAAK,EAAC,OAAO,eACH,OAAO,EACjB,IAAI,EAAC,SAAS;wBAEd,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,gBACD,2BAA2B;4BAGtC,YAAM,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,WAAW,aAE5C,CACG;wBACX,IAAI,CAAC,oBAAoB,EAAE,CACjB,CACT;gBACN,WAAK,KAAK,EAAC,sBAAsB;oBAC/B,eAAa,CACT,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, h, Host, Element, getAssetPath } from '@stencil/core';\nimport { classnames, observeModeChanges } from '../../utils/utils';\nimport { getLeKitConfig } from '../../global/app';\nimport { leConfirm } from '../le-popup/le-popup.api';\nimport { LeOptionSelectDetail } from '../..';\n\n/**\n * Component wrapper for admin mode editing.\n *\n * This component is used internally by other components to provide admin-mode\n * editing capabilities. It wraps the component's rendered output and shows\n * a settings popover for editing properties.\n *\n * In default mode, it acts as a simple passthrough (display: contents).\n * In admin mode, it shows a border, component name header, and settings popover.\n *\n * The host element is found automatically by traversing up through the shadow DOM.\n *\n * Usage inside a component's render method:\n * ```tsx\n * render() {\n *   return (\n *     <le-component component=\"le-card\">\n *       <Host>...</Host>\n *     </le-component>\n *   );\n * }\n * ```\n *\n * @slot - The component's rendered content\n *\n * @cmsInternal true\n * @cmsCategory System\n */\n@Component({\n  tag: 'le-component',\n  styleUrl: 'le-component.css',\n  shadow: true,\n  assetsDirs: ['assets'],\n})\nexport class LeComponent {\n  @Element() el: HTMLElement;\n\n  /**\n   * The tag name of the component (e.g., 'le-card').\n   * Used to look up property metadata and display the component name.\n   */\n  @Prop() component!: string;\n\n  /**\n   * Optional display name for the component.\n   * If not provided, the tag name will be formatted as the display name.\n   */\n  @Prop() displayName?: string;\n\n  /**\n   * Classes to apply to the host element.\n   * Allows parent components to pass their styling classes.\n   */\n  @Prop() hostClass?: string;\n\n  /**\n   * Inline styles to apply to the host element.\n   * Allows parent components to pass dynamic styles (e.g., flex properties).\n   */\n  @Prop() hostStyle?: { [key: string]: string };\n\n  /**\n   * Reference to the host element (found automatically from parent)\n   */\n  private hostElement?: HTMLElement;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * Component metadata loaded from Custom Elements Manifest\n   */\n  @State() private componentMeta: ComponentMetadata | null = null;\n\n  /**\n   * Current property values of the host component\n   */\n  @State() private propertyValues: Record<string, any> = {};\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    // Find the host element - le-component is rendered inside the component's shadow DOM,\n    // so we need to find the shadow root's host element\n    this.findHostElement();\n\n    this.disconnectModeObserver = observeModeChanges(this.el, mode => {\n      this.adminMode = mode === 'admin';\n      // Load metadata and refresh property values only when entering admin mode\n      if (this.adminMode) {\n        if (!this.componentMeta) {\n          this.loadComponentMetadata();\n        } else {\n          this.readPropertyValues();\n        }\n      }\n    });\n  }\n\n  /**\n   * Find the host element by traversing up through shadow DOM\n   */\n  private findHostElement() {\n    // Get the shadow root that contains this le-component\n    const rootNode = this.el.getRootNode();\n    if (rootNode instanceof ShadowRoot) {\n      // The host of this shadow root is our target component (e.g., le-card)\n      this.hostElement = rootNode.host as HTMLElement;\n    }\n  }\n\n  componentDidLoad() {\n    // Read initial property values from the host element\n    this.readPropertyValues();\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  /**\n   * Formats a tag name into a display name\n   * e.g., 'le-card' -> 'Card'\n   */\n  private formatDisplayName(tagName: string): string {\n    if (!tagName || typeof tagName !== 'string') return 'unknown';\n    return tagName\n      .replace(/^le-/, '') // Remove 'le-' prefix\n      .split('-')\n      .map(word => word.charAt(0).toUpperCase() + word.slice(1))\n      .join(' ');\n  }\n\n  /**\n   * Load component metadata from the Custom Elements Manifest\n   */\n  private async loadComponentMetadata() {\n    try {\n      // Fetch the manifest from configured URL\n      const { manifestFile } = getLeKitConfig();\n      const manifestFileResolved = getAssetPath(`./assets/${manifestFile}`);\n      const response = await fetch(manifestFileResolved);\n      const manifest = await response.json();\n\n      // Find the component definition\n      for (const module of manifest.modules) {\n        for (const declaration of module.declarations || []) {\n          if (declaration.tagName === this.component) {\n            const attributes = (declaration.attributes || []).filter(\n              (attr: AttributeMetadata) => !this.isInternalAttribute(attr.name),\n            );\n            this.componentMeta = {\n              tagName: declaration.tagName,\n              description: declaration.description,\n              attributes,\n            };\n            // console.log(`[le-component] Loaded metadata for ${this.component}:`, this.componentMeta);\n            // Read property values after metadata is loaded\n            this.readPropertyValues();\n            return;\n          }\n        }\n      }\n      // console.warn(`[le-component] No metadata found for component: ${this.component}`);\n    } catch (error) {\n      // console.warn(`[le-component] Failed to load metadata for component: ${this.component}`, error);\n    }\n  }\n\n  /**\n   * Check if an attribute is internal (should not be shown in editor)\n   */\n  private isInternalAttribute(name: string): boolean {\n    const internalAttrs = ['mode', 'theme', 'class', 'style', 'id', 'slot'];\n    return internalAttrs.includes(name);\n  }\n\n  /**\n   * Read current property values from the host element\n   */\n  private readPropertyValues() {\n    if (!this.hostElement || !this.componentMeta) return;\n\n    const values: Record<string, any> = {};\n    for (const attr of this.componentMeta.attributes) {\n      const value = this.hostElement.getAttribute(attr.name);\n      values[attr.name] = this.parseAttributeValue(value, attr.type?.text);\n    }\n    this.propertyValues = values;\n  }\n\n  /**\n   * Parse an attribute value based on its type\n   */\n  private parseAttributeValue(value: string | null, type?: string): any {\n    if (value === null) return undefined;\n\n    if (type === 'boolean') {\n      return value !== null && value !== 'false';\n    }\n    if (type === 'number') {\n      return parseFloat(value);\n    }\n    return value;\n  }\n\n  /**\n   * Handle property value changes from the editor\n   */\n  private handlePropertyChange(attrName: string, value: any, type?: string) {\n    if (!this.hostElement) return;\n\n    // Update the host element's attribute\n    if (type === 'boolean') {\n      if (value) {\n        this.hostElement.setAttribute(attrName, '');\n      } else {\n        this.hostElement.removeAttribute(attrName);\n      }\n    } else if (value === undefined || value === '') {\n      this.hostElement.removeAttribute(attrName);\n    } else {\n      this.hostElement.setAttribute(attrName, String(value));\n    }\n\n    // Update local state\n    this.propertyValues = { ...this.propertyValues, [attrName]: value };\n\n    // update the host element the way the parent element mutation observer would catch it?\n  }\n\n  /**\n   * Delete this component from the DOM\n   */\n  private deleteComponent() {\n    if (!this.hostElement) return;\n\n    // Confirm deletion\n    const name = this.displayName || this.formatDisplayName(this.component);\n    if (!leConfirm(`Delete this ${name}?`)) return;\n\n    // Remove the host element from its parent\n    const parent = this.hostElement.parentElement;\n    if (parent) {\n      this.hostElement.remove();\n    }\n  }\n\n  /**\n   * Render the property editor form\n   */\n  private renderPropertyEditor() {\n    const hasProperties = this.componentMeta && this.componentMeta.attributes.length > 0;\n\n    return (\n      <div class=\"property-editor-container\">\n        {hasProperties ? (\n          <form class=\"property-editor\" onSubmit={e => e.preventDefault()}>\n            {this.componentMeta!.attributes.map(attr => this.renderPropertyField(attr))}\n          </form>\n        ) : (\n          <p class=\"no-properties\">No editable properties</p>\n        )}\n        <div class=\"property-editor-actions\">\n          <le-button\n            type=\"button\"\n            variant=\"outlined\"\n            color=\"danger\"\n            full-width\n            onClick={() => this.deleteComponent()}\n          >\n            <span slot=\"icon-start\">🗑️</span>\n            <span>Delete Component</span>\n          </le-button>\n        </div>\n      </div>\n    );\n  }\n\n  /**\n   * Render a single property field based on its type\n   */\n  private renderPropertyField(attr: AttributeMetadata) {\n    const value = this.propertyValues[attr.name];\n    const type = attr.type?.text || 'string';\n\n    // Check if type is a union of string literals (e.g., \"'default' | 'outlined' | 'elevated'\")\n    const enumMatch = type.match(/^'[^']+'/);\n    if (enumMatch) {\n      const options = type.split('|').map(opt => opt.trim().replace(/'/g, ''));\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <le-select\n            options={[...options.map(opt => ({ label: opt, value: opt }))]}\n            full-width\n            value={value ?? attr.default?.replace(/'/g, '')}\n            placeholder={attr.default?.replace(/'/g, '')}\n            onChange={(e: CustomEvent<LeOptionSelectDetail>) =>\n              this.handlePropertyChange(attr.name, e.detail.value, type)\n            }\n          ></le-select>\n        </div>\n      );\n    }\n\n    // Boolean type\n    if (type === 'boolean') {\n      return (\n        <div class=\"property-field property-field--checkbox\">\n          <le-checkbox\n            name={`prop-${attr.name}`}\n            checked={value === true || value === ''}\n            onChange={e =>\n              this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).checked, type)\n            }\n          >\n            {attr.name}\n            {attr.description && <div slot=\"description\">{attr.description}</div>}\n          </le-checkbox>\n        </div>\n      );\n    }\n\n    // Number type\n    if (type === 'number') {\n      return (\n        <div class=\"property-field\">\n          <label htmlFor={`prop-${attr.name}`}>\n            {attr.name}\n            {attr.description && <span class=\"property-hint\">{attr.description}</span>}\n          </label>\n          <input\n            type=\"number\"\n            id={`prop-${attr.name}`}\n            value={value ?? ''}\n            placeholder={attr.default}\n            onChange={e =>\n              this.handlePropertyChange(attr.name, (e.target as HTMLInputElement).value, type)\n            }\n          />\n        </div>\n      );\n    }\n\n    // Default: string/text input\n    return (\n      <div class=\"property-field\">\n        <le-string-input\n          name={`prop-${attr.name}`}\n          label={attr.name}\n          value={value ?? ''}\n          placeholder={attr.default?.replace(/'/g, '')}\n          onChange={(e: any) => this.handlePropertyChange(attr.name, e.detail.value, type)}\n        >\n          <span slot=\"description\">{attr.description}</span>\n        </le-string-input>\n      </div>\n    );\n  }\n\n  render() {\n    const name = this.displayName || this.formatDisplayName(this.component);\n\n    // In default mode, just pass through content with host classes\n    if (!this.adminMode) {\n      return (\n        <Host class={classnames(this.component, this.hostClass)} style={this.hostStyle}>\n          <slot></slot>\n        </Host>\n      );\n    }\n\n    // In admin mode, show wrapper with header and settings\n    return (\n      <Host class={classnames(this.component, this.hostClass, 'admin-mode')} style={this.hostStyle}>\n        <div class=\"le-component-wrapper\">\n          <div class=\"le-component-header\">\n            <span class=\"le-component-name\">{name}</span>\n            <le-popover\n              popoverTitle={`${name} Settings`}\n              position=\"right\"\n              align=\"start\"\n              min-width=\"300px\"\n              mode=\"default\"\n            >\n              <le-button\n                type=\"button\"\n                class=\"le-component-button\"\n                slot=\"trigger\"\n                variant=\"clear\"\n                size=\"small\"\n                aria-label=\"Edit component properties\"\n                icon-only\n              >\n                <span class=\"le-component-trigger\" slot=\"icon-only\">\n                  ⚙\n                </span>\n              </le-button>\n              {this.renderPropertyEditor()}\n            </le-popover>\n          </div>\n          <div class=\"le-component-content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n/**\n * Type definitions for component metadata\n */\ninterface ComponentMetadata {\n  tagName: string;\n  description?: string;\n  attributes: AttributeMetadata[];\n}\n\ninterface AttributeMetadata {\n  name: string;\n  fieldName?: string;\n  description?: string;\n  default?: string;\n  type?: {\n    text: string;\n  };\n}\n"]}

package/dist/collection/components/le-current-heading/le-current-heading.css

@@ -1,13 +0,0 @@
-:host {
-  display: inline-flex;
-  min-width: 0;
-}
-
-.title {
-  font: inherit;
-  min-width: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--le-current-heading-color, var(--le-color-text-primary));
-}