le-kit 0.5.2 → 0.5.4

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

@@ -1,475 +0,0 @@
-import { h, Host } from "@stencil/core";
-import { observeModeChanges } from "../../utils/utils";
-/**
- * A text component with rich text editing capabilities in admin mode.
- *
- * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)
- * and provides a Notion-like rich text editor in admin mode with formatting
- * toolbar for bold, italic, links, and paragraph type selection.
- *
- * @slot - Default slot for text content
- *
- * @cssprop --le-text-color - Text color
- * @cssprop --le-text-font-size - Font size
- * @cssprop --le-text-line-height - Line height
- * @cssprop --le-text-font-weight - Font weight
- *
- * @csspart text - The text container element
- *
- * @cmsEditable true
- * @cmsCategory Content
- */
-export class LeText {
-    el;
-    /**
-     * The semantic variant/type of text element
-     * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
-     */
-    variant = 'p';
-    /**
-     * Text alignment
-     * @allowedValues left | center | right | justify
-     */
-    align = 'left';
-    /**
-     * Text color (CSS value or theme token)
-     */
-    color;
-    /**
-     * Whether the text should truncate with ellipsis
-     */
-    truncate = false;
-    /**
-     * Maximum number of lines before truncating (requires truncate=true)
-     */
-    maxLines;
-    /**
-     * Internal state to track admin mode
-     */
-    adminMode = false;
-    /**
-     * The HTML content being edited
-     */
-    content = '';
-    /**
-     * Whether the editor is focused (shows toolbar)
-     */
-    isFocused = false;
-    /**
-     * Current selection state for toolbar button highlighting
-     */
-    selectionState = {
-        isBold: false,
-        isItalic: false,
-        isUnderline: false,
-        isStrikethrough: false,
-        isLink: false,
-        blockType: 'p',
-    };
-    /**
-     * Reference to the contenteditable element
-     */
-    editorRef;
-    /**
-     * Reference to the slot element
-     */
-    slotRef;
-    disconnectModeObserver;
-    connectedCallback() {
-        this.disconnectModeObserver = observeModeChanges(this.el, mode => {
-            const wasAdmin = this.adminMode;
-            this.adminMode = mode === 'admin';
-            if (this.adminMode && !wasAdmin) {
-                // Entering admin mode - read content from slot
-                requestAnimationFrame(() => this.readSlottedContent());
-            }
-            else if (!this.adminMode && wasAdmin) {
-                // Leaving admin mode - sync content back to slot
-                this.syncContentToSlot();
-            }
-        });
-    }
-    disconnectedCallback() {
-        this.disconnectModeObserver?.();
-    }
-    onVariantChange() {
-        // When variant changes in admin mode, update the content wrapper
-        if (this.adminMode && this.editorRef) {
-            this.syncContentToSlot();
-        }
-    }
-    /**
-     * Read content from slotted elements
-     */
-    readSlottedContent() {
-        if (!this.slotRef)
-            return;
-        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
-        // Collect all content from assigned nodes
-        let html = '';
-        assignedNodes.forEach(node => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                html += node.textContent;
-            }
-            else if (node.nodeType === Node.ELEMENT_NODE) {
-                html += node.innerHTML || node.textContent;
-            }
-        });
-        this.content = html.trim();
-    }
-    /**
-     * Sync edited content back to the slot
-     */
-    syncContentToSlot() {
-        if (!this.editorRef)
-            return;
-        const newContent = this.editorRef.innerHTML;
-        // Update the light DOM content
-        // We need to update the actual slotted content
-        const slot = this.slotRef;
-        if (slot) {
-            const assignedNodes = slot.assignedNodes({ flatten: true });
-            if (assignedNodes.length > 0) {
-                const firstNode = assignedNodes[0];
-                if (firstNode.nodeType === Node.ELEMENT_NODE) {
-                    firstNode.innerHTML = newContent;
-                }
-                else if (firstNode.nodeType === Node.TEXT_NODE) {
-                    // Replace text node with the new content
-                    const parent = firstNode.parentNode;
-                    if (parent) {
-                        // Create a temporary element to parse HTML
-                        const temp = document.createElement('span');
-                        temp.innerHTML = newContent;
-                        // Replace the text node
-                        parent.replaceChild(temp, firstNode);
-                        // Unwrap the span if it only contains text
-                        if (temp.childNodes.length === 1 && temp.firstChild?.nodeType === Node.TEXT_NODE) {
-                            parent.replaceChild(temp.firstChild, temp);
-                        }
-                    }
-                }
-            }
-            else {
-                // No assigned nodes, set innerHTML on the host's light DOM
-                this.el.innerHTML = newContent;
-            }
-        }
-    }
-    /**
-     * Handle input in the contenteditable
-     */
-    handleInput = () => {
-        if (this.editorRef) {
-            this.content = this.editorRef.innerHTML;
-            this.updateSelectionState();
-        }
-    };
-    /**
-     * Handle focus on the editor
-     */
-    handleFocus = () => {
-        this.isFocused = true;
-        this.updateSelectionState();
-    };
-    /**
-     * Handle blur on the editor
-     */
-    handleBlur = (e) => {
-        // Check if focus moved to toolbar
-        const relatedTarget = e.relatedTarget;
-        const toolbar = this.el.shadowRoot?.querySelector('.le-text-toolbar');
-        if (toolbar?.contains(relatedTarget)) {
-            // Focus moved to toolbar, keep it open
-            return;
-        }
-        // Small delay to allow toolbar clicks to register
-        setTimeout(() => {
-            if (!this.el.shadowRoot?.activeElement) {
-                this.isFocused = false;
-                this.syncContentToSlot();
-            }
-        }, 150);
-    };
-    /**
-     * Handle selection change to update toolbar state
-     */
-    handleSelectionChange = () => {
-        this.updateSelectionState();
-    };
-    /**
-     * Update the selection state for toolbar highlighting
-     */
-    updateSelectionState() {
-        const selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        this.selectionState = {
-            isBold: document.queryCommandState('bold'),
-            isItalic: document.queryCommandState('italic'),
-            isUnderline: document.queryCommandState('underline'),
-            isStrikethrough: document.queryCommandState('strikeThrough'),
-            isLink: this.isSelectionInLink(selection),
-            blockType: this.variant,
-        };
-    }
-    /**
-     * Check if current selection is within a link
-     */
-    isSelectionInLink(selection) {
-        if (!selection.anchorNode)
-            return false;
-        let node = selection.anchorNode;
-        while (node && node !== this.editorRef) {
-            if (node.nodeName === 'A')
-                return true;
-            node = node.parentNode;
-        }
-        return false;
-    }
-    /**
-     * Execute a formatting command
-     */
-    execCommand(command, value) {
-        // Focus the editor first
-        this.editorRef?.focus();
-        // Execute the command
-        document.execCommand(command, false, value);
-        // Update state
-        this.handleInput();
-        this.updateSelectionState();
-    }
-    /**
-     * Toggle bold formatting
-     */
-    toggleBold = (e) => {
-        e.preventDefault();
-        this.execCommand('bold');
-    };
-    /**
-     * Toggle italic formatting
-     */
-    toggleItalic = (e) => {
-        e.preventDefault();
-        this.execCommand('italic');
-    };
-    /**
-     * Toggle underline formatting
-     */
-    toggleUnderline = (e) => {
-        e.preventDefault();
-        this.execCommand('underline');
-    };
-    /**
-     * Toggle strikethrough formatting
-     */
-    toggleStrikethrough = (e) => {
-        e.preventDefault();
-        this.execCommand('strikeThrough');
-    };
-    /**
-     * Add or edit a link
-     */
-    toggleLink = (e) => {
-        e.preventDefault();
-        if (this.selectionState.isLink) {
-            // Remove link
-            this.execCommand('unlink');
-        }
-        else {
-            // Add link
-            const url = prompt('Enter URL:', 'https://');
-            if (url) {
-                this.execCommand('createLink', url);
-            }
-        }
-    };
-    /**
-     * Change the block type/variant
-     */
-    changeVariant = (e) => {
-        const select = e.target;
-        this.variant = select.value;
-    };
-    /**
-     * Render the formatting toolbar
-     */
-    renderToolbar() {
-        return (h("div", { class: "le-text-toolbar" }, h("select", { class: "le-text-toolbar-select", onChange: this.changeVariant, onMouseDown: e => e.preventDefault() }, h("option", { value: "p", selected: this.variant === 'p' }, "Paragraph"), h("option", { value: "h1", selected: this.variant === 'h1' }, "Heading 1"), h("option", { value: "h2", selected: this.variant === 'h2' }, "Heading 2"), h("option", { value: "h3", selected: this.variant === 'h3' }, "Heading 3"), h("option", { value: "h4", selected: this.variant === 'h4' }, "Heading 4"), h("option", { value: "h5", selected: this.variant === 'h5' }, "Heading 5"), h("option", { value: "h6", selected: this.variant === 'h6' }, "Heading 6"), h("option", { value: "quote", selected: this.variant === 'quote' }, "Quote"), h("option", { value: "code", selected: this.variant === 'code' }, "Code"), h("option", { value: "label", selected: this.variant === 'label' }, "Label"), h("option", { value: "small", selected: this.variant === 'small' }, "Small")), h("div", { class: "le-text-toolbar-divider" }), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }, onMouseDown: this.toggleBold, title: "Bold (Ctrl+B)" }, h("strong", null, "B")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }, onMouseDown: this.toggleItalic, title: "Italic (Ctrl+I)" }, h("em", null, "I")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }, onMouseDown: this.toggleUnderline, title: "Underline (Ctrl+U)" }, h("span", { style: { textDecoration: 'underline' } }, "U")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }, onMouseDown: this.toggleStrikethrough, title: "Strikethrough" }, h("span", { style: { textDecoration: 'line-through' } }, "S")), h("div", { class: "le-text-toolbar-divider" }), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isLink }, onMouseDown: this.toggleLink, title: this.selectionState.isLink ? 'Remove link' : 'Add link' }, "\uD83D\uDD17")));
-    }
-    /**
-     * Get the semantic tag for the current variant
-     */
-    getTag() {
-        switch (this.variant) {
-            case 'quote':
-                return 'blockquote';
-            case 'code':
-                return 'pre';
-            case 'label':
-                return 'label';
-            case 'small':
-                return 'small';
-            default:
-                return this.variant; // h1-h6, p
-        }
-    }
-    render() {
-        const Tag = this.getTag();
-        const textStyle = {};
-        if (this.color) {
-            textStyle.color = this.color;
-        }
-        if (this.align) {
-            textStyle.textAlign = this.align;
-        }
-        const textClass = {
-            'le-text': true,
-            [`variant-${this.variant}`]: true,
-            'truncate': this.truncate,
-            [`max-lines-${this.maxLines}`]: this.truncate && this.maxLines,
-        };
-        // Admin mode - show rich text editor
-        if (this.adminMode) {
-            return (h(Host, { class: "admin-mode" }, h("le-component", { component: "le-text" }, h("div", { class: "le-text-editor-wrapper" }, this.isFocused && this.renderToolbar(), h(Tag, { class: textClass, part: "text", style: textStyle }, h("div", { ref: el => (this.editorRef = el), class: "le-text-editor", contentEditable: true, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleSelectionChange, onMouseUp: this.handleSelectionChange, innerHTML: this.content })), h("div", { class: "hidden-slot" }, h("slot", { ref: el => (this.slotRef = el), onSlotchange: () => this.readSlottedContent() }))))));
-        }
-        // Default mode - render semantic element with slotted content
-        return (h(Host, null, h(Tag, { class: textClass, part: "text", style: textStyle }, h("slot", { ref: el => (this.slotRef = el) }))));
-    }
-    static get is() { return "le-text"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["le-text.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["le-text.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "variant": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "| 'p'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'code'\n    | 'quote'\n    | 'label'\n    | 'small'",
-                    "resolved": "\"code\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"label\" | \"p\" | \"quote\" | \"small\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small"
-                        }],
-                    "text": "The semantic variant/type of text element"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "variant",
-                "defaultValue": "'p'"
-            },
-            "align": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'left' | 'center' | 'right' | 'justify'",
-                    "resolved": "\"center\" | \"justify\" | \"left\" | \"right\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "allowedValues",
-                            "text": "left | center | right | justify"
-                        }],
-                    "text": "Text alignment"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "align",
-                "defaultValue": "'left'"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Text color (CSS value or theme token)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color"
-            },
-            "truncate": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Whether the text should truncate with ellipsis"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "truncate",
-                "defaultValue": "false"
-            },
-            "maxLines": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Maximum number of lines before truncating (requires truncate=true)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-lines"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "adminMode": {},
-            "content": {},
-            "isFocused": {},
-            "selectionState": {}
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "variant",
-                "methodName": "onVariantChange"
-            }];
-    }
-}
-//# sourceMappingURL=le-text.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"le-text.js","sourceRoot":"","sources":["../../../src/components/le-text/le-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, h, Host, Element, Watch } from '@stencil/core';\nimport { observeModeChanges } from '../../utils/utils';\n\n/**\n * A text component with rich text editing capabilities in admin mode.\n *\n * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)\n * and provides a Notion-like rich text editor in admin mode with formatting\n * toolbar for bold, italic, links, and paragraph type selection.\n *\n * @slot - Default slot for text content\n *\n * @cssprop --le-text-color - Text color\n * @cssprop --le-text-font-size - Font size\n * @cssprop --le-text-line-height - Line height\n * @cssprop --le-text-font-weight - Font weight\n *\n * @csspart text - The text container element\n *\n * @cmsEditable true\n * @cmsCategory Content\n */\n@Component({\n  tag: 'le-text',\n  styleUrl: 'le-text.css',\n  shadow: true,\n})\nexport class LeText {\n  @Element() el: HTMLElement;\n\n  /**\n   * The semantic variant/type of text element\n   * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small\n   */\n  @Prop({ mutable: true, reflect: true }) variant:\n    | 'p'\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'code'\n    | 'quote'\n    | 'label'\n    | 'small' = 'p';\n\n  /**\n   * Text alignment\n   * @allowedValues left | center | right | justify\n   */\n  @Prop({ reflect: true }) align: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  /**\n   * Text color (CSS value or theme token)\n   */\n  @Prop() color?: string;\n\n  /**\n   * Whether the text should truncate with ellipsis\n   */\n  @Prop() truncate: boolean = false;\n\n  /**\n   * Maximum number of lines before truncating (requires truncate=true)\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * The HTML content being edited\n   */\n  @State() private content: string = '';\n\n  /**\n   * Whether the editor is focused (shows toolbar)\n   */\n  @State() private isFocused: boolean = false;\n\n  /**\n   * Current selection state for toolbar button highlighting\n   */\n  @State() private selectionState: SelectionState = {\n    isBold: false,\n    isItalic: false,\n    isUnderline: false,\n    isStrikethrough: false,\n    isLink: false,\n    blockType: 'p',\n  };\n\n  /**\n   * Reference to the contenteditable element\n   */\n  private editorRef?: HTMLDivElement;\n\n  /**\n   * Reference to the slot element\n   */\n  private slotRef?: HTMLSlotElement;\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    this.disconnectModeObserver = observeModeChanges(this.el, mode => {\n      const wasAdmin = this.adminMode;\n      this.adminMode = mode === 'admin';\n\n      if (this.adminMode && !wasAdmin) {\n        // Entering admin mode - read content from slot\n        requestAnimationFrame(() => this.readSlottedContent());\n      } else if (!this.adminMode && wasAdmin) {\n        // Leaving admin mode - sync content back to slot\n        this.syncContentToSlot();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    // When variant changes in admin mode, update the content wrapper\n    if (this.adminMode && this.editorRef) {\n      this.syncContentToSlot();\n    }\n  }\n\n  /**\n   * Read content from slotted elements\n   */\n  private readSlottedContent() {\n    if (!this.slotRef) return;\n\n    const assignedNodes = this.slotRef.assignedNodes({ flatten: true });\n\n    // Collect all content from assigned nodes\n    let html = '';\n    assignedNodes.forEach(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        html += node.textContent;\n      } else if (node.nodeType === Node.ELEMENT_NODE) {\n        html += (node as Element).innerHTML || node.textContent;\n      }\n    });\n\n    this.content = html.trim();\n  }\n\n  /**\n   * Sync edited content back to the slot\n   */\n  private syncContentToSlot() {\n    if (!this.editorRef) return;\n\n    const newContent = this.editorRef.innerHTML;\n\n    // Update the light DOM content\n    // We need to update the actual slotted content\n    const slot = this.slotRef;\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true });\n      if (assignedNodes.length > 0) {\n        const firstNode = assignedNodes[0];\n        if (firstNode.nodeType === Node.ELEMENT_NODE) {\n          (firstNode as Element).innerHTML = newContent;\n        } else if (firstNode.nodeType === Node.TEXT_NODE) {\n          // Replace text node with the new content\n          const parent = firstNode.parentNode;\n          if (parent) {\n            // Create a temporary element to parse HTML\n            const temp = document.createElement('span');\n            temp.innerHTML = newContent;\n            // Replace the text node\n            parent.replaceChild(temp, firstNode);\n            // Unwrap the span if it only contains text\n            if (temp.childNodes.length === 1 && temp.firstChild?.nodeType === Node.TEXT_NODE) {\n              parent.replaceChild(temp.firstChild, temp);\n            }\n          }\n        }\n      } else {\n        // No assigned nodes, set innerHTML on the host's light DOM\n        this.el.innerHTML = newContent;\n      }\n    }\n  }\n\n  /**\n   * Handle input in the contenteditable\n   */\n  private handleInput = () => {\n    if (this.editorRef) {\n      this.content = this.editorRef.innerHTML;\n      this.updateSelectionState();\n    }\n  };\n\n  /**\n   * Handle focus on the editor\n   */\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.updateSelectionState();\n  };\n\n  /**\n   * Handle blur on the editor\n   */\n  private handleBlur = (e: FocusEvent) => {\n    // Check if focus moved to toolbar\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    const toolbar = this.el.shadowRoot?.querySelector('.le-text-toolbar');\n\n    if (toolbar?.contains(relatedTarget)) {\n      // Focus moved to toolbar, keep it open\n      return;\n    }\n\n    // Small delay to allow toolbar clicks to register\n    setTimeout(() => {\n      if (!this.el.shadowRoot?.activeElement) {\n        this.isFocused = false;\n        this.syncContentToSlot();\n      }\n    }, 150);\n  };\n\n  /**\n   * Handle selection change to update toolbar state\n   */\n  private handleSelectionChange = () => {\n    this.updateSelectionState();\n  };\n\n  /**\n   * Update the selection state for toolbar highlighting\n   */\n  private updateSelectionState() {\n    const selection = window.getSelection();\n    if (!selection || selection.rangeCount === 0) return;\n\n    this.selectionState = {\n      isBold: document.queryCommandState('bold'),\n      isItalic: document.queryCommandState('italic'),\n      isUnderline: document.queryCommandState('underline'),\n      isStrikethrough: document.queryCommandState('strikeThrough'),\n      isLink: this.isSelectionInLink(selection),\n      blockType: this.variant,\n    };\n  }\n\n  /**\n   * Check if current selection is within a link\n   */\n  private isSelectionInLink(selection: Selection): boolean {\n    if (!selection.anchorNode) return false;\n\n    let node: Node | null = selection.anchorNode;\n    while (node && node !== this.editorRef) {\n      if (node.nodeName === 'A') return true;\n      node = node.parentNode;\n    }\n    return false;\n  }\n\n  /**\n   * Execute a formatting command\n   */\n  private execCommand(command: string, value?: string) {\n    // Focus the editor first\n    this.editorRef?.focus();\n\n    // Execute the command\n    document.execCommand(command, false, value);\n\n    // Update state\n    this.handleInput();\n    this.updateSelectionState();\n  }\n\n  /**\n   * Toggle bold formatting\n   */\n  private toggleBold = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('bold');\n  };\n\n  /**\n   * Toggle italic formatting\n   */\n  private toggleItalic = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('italic');\n  };\n\n  /**\n   * Toggle underline formatting\n   */\n  private toggleUnderline = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('underline');\n  };\n\n  /**\n   * Toggle strikethrough formatting\n   */\n  private toggleStrikethrough = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('strikeThrough');\n  };\n\n  /**\n   * Add or edit a link\n   */\n  private toggleLink = (e: Event) => {\n    e.preventDefault();\n\n    if (this.selectionState.isLink) {\n      // Remove link\n      this.execCommand('unlink');\n    } else {\n      // Add link\n      const url = prompt('Enter URL:', 'https://');\n      if (url) {\n        this.execCommand('createLink', url);\n      }\n    }\n  };\n\n  /**\n   * Change the block type/variant\n   */\n  private changeVariant = (e: Event) => {\n    const select = e.target as HTMLSelectElement;\n    this.variant = select.value as typeof this.variant;\n  };\n\n  /**\n   * Render the formatting toolbar\n   */\n  private renderToolbar() {\n    return (\n      <div class=\"le-text-toolbar\">\n        <select\n          class=\"le-text-toolbar-select\"\n          onChange={this.changeVariant}\n          onMouseDown={e => e.preventDefault()}\n        >\n          <option value=\"p\" selected={this.variant === 'p'}>\n            Paragraph\n          </option>\n          <option value=\"h1\" selected={this.variant === 'h1'}>\n            Heading 1\n          </option>\n          <option value=\"h2\" selected={this.variant === 'h2'}>\n            Heading 2\n          </option>\n          <option value=\"h3\" selected={this.variant === 'h3'}>\n            Heading 3\n          </option>\n          <option value=\"h4\" selected={this.variant === 'h4'}>\n            Heading 4\n          </option>\n          <option value=\"h5\" selected={this.variant === 'h5'}>\n            Heading 5\n          </option>\n          <option value=\"h6\" selected={this.variant === 'h6'}>\n            Heading 6\n          </option>\n          <option value=\"quote\" selected={this.variant === 'quote'}>\n            Quote\n          </option>\n          <option value=\"code\" selected={this.variant === 'code'}>\n            Code\n          </option>\n          <option value=\"label\" selected={this.variant === 'label'}>\n            Label\n          </option>\n          <option value=\"small\" selected={this.variant === 'small'}>\n            Small\n          </option>\n        </select>\n\n        <div class=\"le-text-toolbar-divider\"></div>\n\n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }}\n          onMouseDown={this.toggleBold}\n          title=\"Bold (Ctrl+B)\"\n        >\n          <strong>B</strong>\n        </button>\n\n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }}\n          onMouseDown={this.toggleItalic}\n          title=\"Italic (Ctrl+I)\"\n        >\n          <em>I</em>\n        </button>\n\n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }}\n          onMouseDown={this.toggleUnderline}\n          title=\"Underline (Ctrl+U)\"\n        >\n          <span style={{ textDecoration: 'underline' }}>U</span>\n        </button>\n\n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }}\n          onMouseDown={this.toggleStrikethrough}\n          title=\"Strikethrough\"\n        >\n          <span style={{ textDecoration: 'line-through' }}>S</span>\n        </button>\n\n        <div class=\"le-text-toolbar-divider\"></div>\n\n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isLink }}\n          onMouseDown={this.toggleLink}\n          title={this.selectionState.isLink ? 'Remove link' : 'Add link'}\n        >\n          🔗\n        </button>\n      </div>\n    );\n  }\n\n  /**\n   * Get the semantic tag for the current variant\n   */\n  private getTag(): string {\n    switch (this.variant) {\n      case 'quote':\n        return 'blockquote';\n      case 'code':\n        return 'pre';\n      case 'label':\n        return 'label';\n      case 'small':\n        return 'small';\n      default:\n        return this.variant; // h1-h6, p\n    }\n  }\n\n  render() {\n    const Tag = this.getTag();\n\n    const textStyle: { [key: string]: string } = {};\n    if (this.color) {\n      textStyle.color = this.color;\n    }\n    if (this.align) {\n      textStyle.textAlign = this.align;\n    }\n\n    const textClass = {\n      'le-text': true,\n      [`variant-${this.variant}`]: true,\n      'truncate': this.truncate,\n      [`max-lines-${this.maxLines}`]: this.truncate && this.maxLines,\n    };\n\n    // Admin mode - show rich text editor\n    if (this.adminMode) {\n      return (\n        <Host class=\"admin-mode\">\n          <le-component component=\"le-text\">\n            <div class=\"le-text-editor-wrapper\">\n              {this.isFocused && this.renderToolbar()}\n              <Tag class={textClass} part=\"text\" style={textStyle}>\n                <div\n                  ref={el => (this.editorRef = el)}\n                  class=\"le-text-editor\"\n                  contentEditable={true}\n                  onInput={this.handleInput}\n                  onFocus={this.handleFocus}\n                  onBlur={this.handleBlur}\n                  onKeyUp={this.handleSelectionChange}\n                  onMouseUp={this.handleSelectionChange}\n                  innerHTML={this.content}\n                ></div>\n              </Tag>\n              {/* Hidden slot to receive light DOM content */}\n              <div class=\"hidden-slot\">\n                <slot\n                  ref={el => (this.slotRef = el as HTMLSlotElement)}\n                  onSlotchange={() => this.readSlottedContent()}\n                ></slot>\n              </div>\n            </div>\n          </le-component>\n        </Host>\n      );\n    }\n\n    // Default mode - render semantic element with slotted content\n    return (\n      <Host>\n        <Tag class={textClass} part=\"text\" style={textStyle}>\n          <slot ref={el => (this.slotRef = el as HTMLSlotElement)}></slot>\n        </Tag>\n      </Host>\n    );\n  }\n}\n\n/**\n * Selection state for toolbar\n */\ninterface SelectionState {\n  isBold: boolean;\n  isItalic: boolean;\n  isUnderline: boolean;\n  isStrikethrough: boolean;\n  isLink: boolean;\n  blockType: string;\n}\n"]}

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

@@ -1,10 +0,0 @@
-:host {
-  display: block;
-  cursor: grab;
-}
-
-div.turntable {
-  width: 100%;
-  height: 100%;
-  padding: 1px;
-}