@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-editor/x-editor.js

@@ -1,4 +1,4 @@
-import { h, Host, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { EditorSelection } from "./editor-selection";
 import { EditorNormalizer } from "./editor-normalizer";
 import { EditorHistory } from "./editor-history";
@@ -53,7 +53,7 @@ export class XEditor {
             actions: [
                 { type: 'undo', title: translate('Editor.undo', {}, 'Undo (Ctrl+Z)') },
                 { type: 'redo', title: translate('Editor.redo', {}, 'Redo (Ctrl+Shift+Z)') },
-            ]
+            ],
         },
         'divider',
         {
@@ -63,7 +63,7 @@ export class XEditor {
                 { type: 'italic', title: translate('Editor.italic', {}, 'Italic (Ctrl+I)') },
                 { type: 'underline', title: translate('Editor.underline', {}, 'Underline (Ctrl+U)') },
                 { type: 'strikethrough', title: translate('Editor.strikethrough', {}, 'Strikethrough') },
-            ]
+            ],
         },
         'divider',
         {
@@ -71,7 +71,7 @@ export class XEditor {
             actions: [
                 { type: 'textColor', title: translate('Editor.textColor', {}, 'Text Color') },
                 { type: 'backgroundColor', title: translate('Editor.backgroundColor', {}, 'Background Color') },
-            ]
+            ],
         },
         'divider',
         {
@@ -79,7 +79,7 @@ export class XEditor {
             actions: [
                 { type: 'fontFamily', title: translate('Editor.fontFamily', {}, 'Font Family') },
                 { type: 'fontSize', title: translate('Editor.fontSize', {}, 'Font Size') },
-            ]
+            ],
         },
         'divider',
         {
@@ -94,7 +94,7 @@ export class XEditor {
                 { type: 'paragraph', title: translate('Editor.paragraph', {}, 'Paragraph') },
                 { type: 'blockquote', title: translate('Editor.blockquote', {}, 'Quote') },
                 { type: 'code', title: translate('Editor.codeBlock', {}, 'Code Block') },
-            ]
+            ],
         },
         'divider',
         {
@@ -104,7 +104,7 @@ export class XEditor {
                 { type: 'alignCenter', title: translate('Editor.alignCenter', {}, 'Align Center') },
                 { type: 'alignRight', title: translate('Editor.alignRight', {}, 'Align Right') },
                 { type: 'alignJustify', title: translate('Editor.alignJustify', {}, 'Align Justify') },
-            ]
+            ],
         },
         'divider',
         {
@@ -112,7 +112,7 @@ export class XEditor {
             actions: [
                 { type: 'outdent', title: translate('Editor.outdent', {}, 'Decrease Indent') },
                 { type: 'indent', title: translate('Editor.indent', {}, 'Increase Indent') },
-            ]
+            ],
         },
         'divider',
         {
@@ -124,7 +124,7 @@ export class XEditor {
                 { type: 'file', title: translate('Editor.insertFile', {}, 'Insert File') },
                 { type: 'table', title: translate('Editor.insertTable', {}, 'Insert Table') },
                 { type: 'hr', title: translate('Editor.horizontalLine', {}, 'Horizontal Line') },
-            ]
+            ],
         },
     ];
     /**
@@ -512,9 +512,7 @@ export class XEditor {
         if (!range)
             return;
         const container = range.startContainer;
-        const element = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
+        const element = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
         const blockElement = element?.closest('p, h1, h2, h3, h4, h5, h6, blockquote, pre');
         if (!blockElement)
             return;
@@ -575,9 +573,7 @@ export class XEditor {
         if (!range)
             return;
         const container = range.startContainer;
-        const element = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
+        const element = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
         const blockElement = element?.closest('p, h1, h2, h3, h4, h5, h6, blockquote, pre');
         if (!blockElement || !blockElement.previousSibling) {
             // If at start of first block, maybe convert to paragraph if it's special
@@ -719,9 +715,7 @@ export class XEditor {
         if (!range)
             return;
         const container = range.startContainer;
-        const element = container.nodeType === Node.TEXT_NODE
-            ? container.parentElement
-            : container;
+        const element = container.nodeType === Node.TEXT_NODE ? container.parentElement : container;
         const blockElement = element?.closest('p, h1, h2, h3, h4, h5, h6, blockquote, pre');
         if (!blockElement)
             return;
@@ -767,7 +761,7 @@ export class XEditor {
                 const start = preRange.toString().length;
                 offsets = {
                     start,
-                    end: start + currentRange.toString().length
+                    end: start + currentRange.toString().length,
                 };
             }
         }
@@ -780,7 +774,7 @@ export class XEditor {
             const newRange = document.createRange();
             if (offsets) {
                 // Try to restore offsets (simplified)
-                // For now, let's just select the whole new element if it was a selection, 
+                // For now, let's just select the whole new element if it was a selection,
                 // or put cursor at the same text offset.
                 // Actually, just putting it at the start is safer unless we do proper text node traversal.
                 // Let's at least keep it highlighting the content if it was more than a cursor.
@@ -853,8 +847,7 @@ export class XEditor {
             return this.slashCommands;
         }
         const filter = this._slashFilter.toLowerCase();
-        return this.slashCommands.filter(cmd => cmd.label.toLowerCase().includes(filter) ||
-            cmd.id.toLowerCase().includes(filter));
+        return this.slashCommands.filter(cmd => cmd.label.toLowerCase().includes(filter) || cmd.id.toLowerCase().includes(filter));
     }
     renderToolbarItem(item) {
         if (item === 'divider') {
@@ -864,23 +857,27 @@ export class XEditor {
             const group = item;
             // Alignment group as dropdown
             if (group.name === 'alignment') {
-                const items = group.actions.filter(a => a !== 'divider').map(a => ({
+                const items = group.actions
+                    .filter(a => a !== 'divider')
+                    .map(a => ({
                     key: a.type,
                     label: a.title || a.type,
-                    icon: this.getIconSvg(a.type)
+                    icon: this.getIconSvg(a.type),
                 }));
                 const isActive = group.actions.some(a => a.type.toLowerCase().includes(this._activeAlignment));
                 return (h("x-dropdown", { trigger: "click", menu: { items }, onXOpenChange: (e) => this.handleDropdownOpenChange(e.detail.open), onXMenuClick: (e) => this.handleToolbarAction({ type: e.detail.key }) }, h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: { 'toolbar-btn': true, 'active': isActive } }, this.renderToolbarIcon(('align' + this._activeAlignment.charAt(0).toUpperCase() + this._activeAlignment.slice(1))))));
             }
             // Blocks (Heading) group as dropdown
             if (group.name === 'blocks') {
-                const items = group.actions.filter(a => a !== 'divider').map(a => {
+                const items = group.actions
+                    .filter(a => a !== 'divider')
+                    .map(a => {
                     const action = a;
                     const level = action.type.startsWith('h') ? action.type.slice(1) : null;
                     return {
                         key: action.type,
-                        label: level ? `<h${level} style="margin:0; font-size: 1.1em; line-height: 1.2;">${action.title || action.type}</h${level}>` : (action.title || action.type),
-                        icon: action.type.startsWith('h') ? `<span class="text-icon">H${level}</span>` : this.getIconSvg(action.type)
+                        label: level ? `<h${level} style="margin:0; font-size: 1.1em; line-height: 1.2;">${action.title || action.type}</h${level}>` : action.title || action.type,
+                        icon: action.type.startsWith('h') ? `<span class="text-icon">H${level}</span>` : this.getIconSvg(action.type),
                     };
                 });
                 const isActive = group.actions.some(a => a.type === this._activeBlockType);
@@ -897,7 +894,7 @@ export class XEditor {
                             { key: 'Arial', label: 'Arial' },
                             { key: 'Georgia', label: 'Georgia' },
                             { key: 'Times New Roman', label: 'Times New Roman' },
-                            { key: 'Courier New', label: 'Courier New' }
+                            { key: 'Courier New', label: 'Courier New' },
                         ]
                         : [
                             { key: '12px', label: '12' },
@@ -905,7 +902,7 @@ export class XEditor {
                             { key: '16px', label: '16' },
                             { key: '18px', label: '18' },
                             { key: '24px', label: '24' },
-                            { key: '32px', label: '32' }
+                            { key: '32px', label: '32' },
                         ];
                     const isActive = false;
                     //  const currentLabel = action.type === 'fontFamily' ? this._activeFontFamily : this._activeFontSize;
@@ -914,14 +911,16 @@ export class XEditor {
             }
             // Insert group as dropdown
             if (group.name === 'insert') {
-                const items = group.actions.filter(a => a !== 'divider').map(a => ({
+                const items = group.actions
+                    .filter(a => a !== 'divider')
+                    .map(a => ({
                     key: a.type,
                     label: a.title || a.type,
-                    icon: this.getIconSvg(a.type)
+                    icon: this.getIconSvg(a.type),
                 }));
                 return (h("x-dropdown", { trigger: "click", menu: { items }, onXOpenChange: (e) => this.handleDropdownOpenChange(e.detail.open), onXMenuClick: (e) => this.handleToolbarAction({ type: e.detail.key }) }, h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: "toolbar-btn" }, h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" })))));
             }
-            return (h("div", { class: "toolbar-group" }, group.actions.map(action => action === 'divider' ? h("div", { class: "toolbar-divider" }) : this.renderToolbarAction(action))));
+            return h("div", { class: "toolbar-group" }, group.actions.map(action => (action === 'divider' ? h("div", { class: "toolbar-divider" }) : this.renderToolbarAction(action))));
         }
         return this.renderToolbarAction(item);
     }
@@ -937,7 +936,7 @@ export class XEditor {
         }
         // Dropdowns
         if (action.type === 'h1' || action.type === 'h2' || action.type === 'h3') {
-            // We'll render Heading as a single dropdown if we encounter h1? 
+            // We'll render Heading as a single dropdown if we encounter h1?
             // Actually, let's keep it simple for now or combine them.
         }
         const type = action.type;
@@ -945,7 +944,7 @@ export class XEditor {
         if (isDropdown) {
             // For now, let's just use the current button but we'll adapt for dropdowns if they were grouped.
             // But the user said "Toolbar align, Heading, fontFamily, font size, thì sử dụng component dropdown"
-            // This implies these should be dropdowns. 
+            // This implies these should be dropdowns.
             // I'll implement specific renderers for these.
         }
         return (h("x-button", { onMouseDown: (e) => e.preventDefault(), type: "text", size: "small", shape: "round", class: { 'toolbar-btn-wrapper': true, [type]: true, 'active': isActive }, onXClick: (e) => {
@@ -1077,67 +1076,74 @@ export class XEditor {
             table: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"/></svg>',
             hr: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M19 13H5v-2h14v2z"/></svg>',
             blockquote: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z"/></svg>',
-            code: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>'
+            code: '<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>',
         };
         return svgs[type] || '';
     }
     renderToolbarIcon(type) {
         switch (type) {
             case 'bold':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M15.6 11.8c1-.7 1.6-1.8 1.6-2.8 0-2.5-2-4.5-4.5-4.5H7v14h7c2.2 0 4-1.8 4-4 0-1.2-.6-2.2-1.4-2.7zM10 7.5h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H10v-3zm3.5 9H10v-3h3.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M15.6 11.8c1-.7 1.6-1.8 1.6-2.8 0-2.5-2-4.5-4.5-4.5H7v14h7c2.2 0 4-1.8 4-4 0-1.2-.6-2.2-1.4-2.7zM10 7.5h2.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5H10v-3zm3.5 9H10v-3h3.5c.8 0 1.5.7 1.5 1.5s-.7 1.5-1.5 1.5z" })));
             case 'italic':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M10 5v3h2.2l-3.4 8H6v3h8v-3h-2.2l3.4-8H18V5h-8z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M10 5v3h2.2l-3.4 8H6v3h8v-3h-2.2l3.4-8H18V5h-8z" })));
             case 'underline':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M12 17c3.3 0 6-2.7 6-6V3h-2.5v8c0 1.9-1.6 3.5-3.5 3.5S8.5 12.9 8.5 11V3H6v8c0 3.3 2.7 6 6 6zm-7 2v2h14v-2H5z" }));
-            case 'h1': return h("span", { class: "text-icon" }, "H1");
-            case 'h2': return h("span", { class: "text-icon" }, "H2");
-            case 'h3': return h("span", { class: "text-icon" }, "H3");
-            case 'h4': return h("span", { class: "text-icon" }, "H4");
-            case 'h5': return h("span", { class: "text-icon" }, "H5");
-            case 'h6': return h("span", { class: "text-icon" }, "H6");
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M12 17c3.3 0 6-2.7 6-6V3h-2.5v8c0 1.9-1.6 3.5-3.5 3.5S8.5 12.9 8.5 11V3H6v8c0 3.3 2.7 6 6 6zm-7 2v2h14v-2H5z" })));
+            case 'h1':
+                return h("span", { class: "text-icon" }, "H1");
+            case 'h2':
+                return h("span", { class: "text-icon" }, "H2");
+            case 'h3':
+                return h("span", { class: "text-icon" }, "H3");
+            case 'h4':
+                return h("span", { class: "text-icon" }, "H4");
+            case 'h5':
+                return h("span", { class: "text-icon" }, "H5");
+            case 'h6':
+                return h("span", { class: "text-icon" }, "H6");
             case 'blockquote':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z" })));
             case 'code':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" })));
             case 'undo':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M12.5 8c-2.6 0-5 1-6.9 2.6L3 8v9h9l-3.6-3.6c1.3-1.1 3-1.8 4.7-1.8 3.5 0 6.4 2.5 7.1 5.8l2.4-.6c-1-4.2-4.7-7.4-9.1-7.4z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M12.5 8c-2.6 0-5 1-6.9 2.6L3 8v9h9l-3.6-3.6c1.3-1.1 3-1.8 4.7-1.8 3.5 0 6.4 2.5 7.1 5.8l2.4-.6c-1-4.2-4.7-7.4-9.1-7.4z" })));
             case 'redo':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M18.4 10.6C16.5 9 14.1 8 11.5 8c-4.4 0-8.1 3.2-9.1 7.4l2.4.6c.7-3.3 3.6-5.8 7.1-5.8 1.7 0 3.4.7 4.7 1.8L13 17h9V8l-2.6 2.6z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M18.4 10.6C16.5 9 14.1 8 11.5 8c-4.4 0-8.1 3.2-9.1 7.4l2.4.6c.7-3.3 3.6-5.8 7.1-5.8 1.7 0 3.4.7 4.7 1.8L13 17h9V8l-2.6 2.6z" })));
             case 'strikethrough':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" })));
             case 'alignLeft':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" })));
             case 'alignCenter':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M7 15v2h10v-2H7zm-4 4v2h18v-2H3zm0-16v2h18V3H3zm4 4v2h10V7H7zm-4 4v2h18v-2H3z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M7 15v2h10v-2H7zm-4 4v2h18v-2H3zm0-16v2h18V3H3zm4 4v2h10V7H7zm-4 4v2h18v-2H3z" })));
             case 'alignRight':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M21 15H9v2h12v-2zM21 7H9v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M21 15H9v2h12v-2zM21 7H9v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" })));
             case 'alignJustify':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V3H3v2z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V3H3v2z" })));
             case 'indent':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" })));
             case 'outdent':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M11 17h10v-2H11v2zM7 16V8l-4 4 4 4zm-4 5h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M11 17h10v-2H11v2zM7 16V8l-4 4 4 4zm-4 5h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z" })));
             case 'link':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" })));
             case 'image':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" })));
             case 'video':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" })));
             case 'file':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" })));
             case 'table':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z" })));
             case 'hr':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M19 13H5v-2h14v2z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M19 13H5v-2h14v2z" })));
             case 'textColor':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62zM4 20v2h16v-2H4z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62zM4 20v2h16v-2H4z" })));
             case 'backgroundColor':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z" })));
             case 'fontFamily':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" }));
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z" })));
             case 'fontSize':
-                return h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z" }));
-            default: return type;
+                return (h("svg", { viewBox: "0 0 24 24", width: "18", height: "18" }, h("path", { fill: "currentColor", d: "M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z" })));
+            default:
+                return type;
         }
     }
     renderModal() {
@@ -1173,7 +1179,7 @@ export class XEditor {
                     } }))));
                 break;
         }
-        return (h("x-modal", { visible: !!this._activeModal, modalTitle: title, onXOk: () => this.handleModalOk(), onXCancel: () => this._activeModal = null }, content));
+        return (h("x-modal", { visible: !!this._activeModal, modalTitle: title, onXOk: () => this.handleModalOk(), onXCancel: () => (this._activeModal = null) }, content));
     }
     /**
      * Handles the 'OK' action from insertion modals (Link, Image, etc.).
@@ -1223,7 +1229,7 @@ export class XEditor {
         this.emitValueChange();
     }
     render() {
-        return (h(Host, { key: 'e8b30279f566786aea6b0f12fd877a079c3fb2c0' }, h("div", { key: '10727c39d7d0b71cb50f81696623772a1fdc624e', class: "editor-container" }, this.showToolbar && !this.disabled && (h("div", { key: '75ab27cfb4f754d59bc418c79ab63e4f49898bc6', class: "editor-toolbar", onMouseDown: (e) => e.preventDefault() }, this.toolbar.map(item => this.renderToolbarItem(item)))), h("div", { key: 'da9b8193b67f62c22f090a28e1495d08a20edc25', ref: (el) => {
+        return (h(Host, { key: 'b1b50a6c438a5c68ddbeff783ac78e0201ca64c8' }, h("div", { key: '199564366f70443efd53e72ecf6fb060d1cd0d19', class: "editor-container" }, this.showToolbar && !this.disabled && (h("div", { key: '85a14c279d17f285cb0f7b010c251e546f2e99e6', class: "editor-toolbar", onMouseDown: e => e.preventDefault() }, this.toolbar.map(item => this.renderToolbarItem(item)))), h("div", { key: '51882fb88a59591536002e94adbdbc76eb143f2d', ref: el => {
                 this.editorRoot = el;
                 if (el) {
                     this.selectionHelper.setRootElement(el);
@@ -1231,10 +1237,10 @@ export class XEditor {
             }, class: {
                 'editor-content': true,
                 'disabled': this.disabled,
-            }, contentEditable: !this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onPaste: this.handlePaste, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onMouseUp: this.updateActiveStates, "data-placeholder": this.placeholder }), this._showSlashMenu && (h("div", { key: '85242de39b0eeac2c99735b390926ed9391f7ddf', class: "slash-menu", style: {
+            }, contentEditable: !this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onPaste: this.handlePaste, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd, onMouseUp: this.updateActiveStates, "data-placeholder": this.placeholder }), this._showSlashMenu && (h("div", { key: 'a2693203058522bd68615ee7af1c9a6acad272df', class: "slash-menu", style: {
                 left: `${this._slashMenuPosition.x}px`,
                 top: `${this._slashMenuPosition.y}px`,
-            } }, this.getFilteredSlashCommands().map((cmd) => (h("div", { class: "slash-menu-item", onClick: () => this.executeSlashCommand(cmd) }, h("div", { class: "slash-menu-icon" }, cmd.icon), h("span", { class: "slash-menu-label" }, cmd.label))))))), this.renderModal()));
+            } }, this.getFilteredSlashCommands().map(cmd => (h("div", { class: "slash-menu-item", onClick: () => this.executeSlashCommand(cmd) }, h("div", { class: "slash-menu-icon" }, cmd.icon), h("span", { class: "slash-menu-label" }, cmd.label))))))), this.renderModal()));
     }
     static get is() { return "x-editor"; }
     static get encapsulation() { return "shadow"; }
@@ -1376,11 +1382,11 @@ export class XEditor {
                             "name": "type",
                             "text": "{ToolbarConfig}"
                         }],
-                    "text": "Configuration for the toolbar groups and actions.\r\nAllows customizing which tools are available to the user."
+                    "text": "Configuration for the toolbar groups and actions.\nAllows customizing which tools are available to the user."
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    {\r\n      name: 'history',\r\n      actions: [\r\n        { type: 'undo', title: translate('Editor.undo', {}, 'Undo (Ctrl+Z)') },\r\n        { type: 'redo', title: translate('Editor.redo', {}, 'Redo (Ctrl+Shift+Z)') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'text',\r\n      actions: [\r\n        { type: 'bold', title: translate('Editor.bold', {}, 'Bold (Ctrl+B)') },\r\n        { type: 'italic', title: translate('Editor.italic', {}, 'Italic (Ctrl+I)') },\r\n        { type: 'underline', title: translate('Editor.underline', {}, 'Underline (Ctrl+U)') },\r\n        { type: 'strikethrough', title: translate('Editor.strikethrough', {}, 'Strikethrough') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'colors',\r\n      actions: [\r\n        { type: 'textColor', title: translate('Editor.textColor', {}, 'Text Color') },\r\n        { type: 'backgroundColor', title: translate('Editor.backgroundColor', {}, 'Background Color') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'typography',\r\n      actions: [\r\n        { type: 'fontFamily', title: translate('Editor.fontFamily', {}, 'Font Family') },\r\n        { type: 'fontSize', title: translate('Editor.fontSize', {}, 'Font Size') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'blocks',\r\n      actions: [\r\n        { type: 'h1', title: translate('Editor.h1', {}, 'Heading 1') },\r\n        { type: 'h2', title: translate('Editor.h2', {}, 'Heading 2') },\r\n        { type: 'h3', title: translate('Editor.h3', {}, 'Heading 3') },\r\n        { type: 'h4', title: translate('Editor.h4', {}, 'Heading 4') },\r\n        { type: 'h5', title: translate('Editor.h5', {}, 'Heading 5') },\r\n        { type: 'h6', title: translate('Editor.h6', {}, 'Heading 6') },\r\n        { type: 'paragraph', title: translate('Editor.paragraph', {}, 'Paragraph') },\r\n        { type: 'blockquote', title: translate('Editor.blockquote', {}, 'Quote') },\r\n        { type: 'code', title: translate('Editor.codeBlock', {}, 'Code Block') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'alignment',\r\n      actions: [\r\n        { type: 'alignLeft', title: translate('Editor.alignLeft', {}, 'Align Left') },\r\n        { type: 'alignCenter', title: translate('Editor.alignCenter', {}, 'Align Center') },\r\n        { type: 'alignRight', title: translate('Editor.alignRight', {}, 'Align Right') },\r\n        { type: 'alignJustify', title: translate('Editor.alignJustify', {}, 'Align Justify') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'indentation',\r\n      actions: [\r\n        { type: 'outdent', title: translate('Editor.outdent', {}, 'Decrease Indent') },\r\n        { type: 'indent', title: translate('Editor.indent', {}, 'Increase Indent') },\r\n      ]\r\n    },\r\n    'divider',\r\n    {\r\n      name: 'insert',\r\n      actions: [\r\n        { type: 'link', title: translate('Editor.insertLink', {}, 'Insert Link') },\r\n        { type: 'image', title: translate('Editor.insertImage', {}, 'Insert Image') },\r\n        { type: 'video', title: translate('Editor.insertVideo', {}, 'Insert Video') },\r\n        { type: 'file', title: translate('Editor.insertFile', {}, 'Insert File') },\r\n        { type: 'table', title: translate('Editor.insertTable', {}, 'Insert Table') },\r\n        { type: 'hr', title: translate('Editor.horizontalLine', {}, 'Horizontal Line') },\r\n      ]\r\n    },\r\n  ]"
+                "defaultValue": "[\n    {\n      name: 'history',\n      actions: [\n        { type: 'undo', title: translate('Editor.undo', {}, 'Undo (Ctrl+Z)') },\n        { type: 'redo', title: translate('Editor.redo', {}, 'Redo (Ctrl+Shift+Z)') },\n      ],\n    },\n    'divider',\n    {\n      name: 'text',\n      actions: [\n        { type: 'bold', title: translate('Editor.bold', {}, 'Bold (Ctrl+B)') },\n        { type: 'italic', title: translate('Editor.italic', {}, 'Italic (Ctrl+I)') },\n        { type: 'underline', title: translate('Editor.underline', {}, 'Underline (Ctrl+U)') },\n        { type: 'strikethrough', title: translate('Editor.strikethrough', {}, 'Strikethrough') },\n      ],\n    },\n    'divider',\n    {\n      name: 'colors',\n      actions: [\n        { type: 'textColor', title: translate('Editor.textColor', {}, 'Text Color') },\n        { type: 'backgroundColor', title: translate('Editor.backgroundColor', {}, 'Background Color') },\n      ],\n    },\n    'divider',\n    {\n      name: 'typography',\n      actions: [\n        { type: 'fontFamily', title: translate('Editor.fontFamily', {}, 'Font Family') },\n        { type: 'fontSize', title: translate('Editor.fontSize', {}, 'Font Size') },\n      ],\n    },\n    'divider',\n    {\n      name: 'blocks',\n      actions: [\n        { type: 'h1', title: translate('Editor.h1', {}, 'Heading 1') },\n        { type: 'h2', title: translate('Editor.h2', {}, 'Heading 2') },\n        { type: 'h3', title: translate('Editor.h3', {}, 'Heading 3') },\n        { type: 'h4', title: translate('Editor.h4', {}, 'Heading 4') },\n        { type: 'h5', title: translate('Editor.h5', {}, 'Heading 5') },\n        { type: 'h6', title: translate('Editor.h6', {}, 'Heading 6') },\n        { type: 'paragraph', title: translate('Editor.paragraph', {}, 'Paragraph') },\n        { type: 'blockquote', title: translate('Editor.blockquote', {}, 'Quote') },\n        { type: 'code', title: translate('Editor.codeBlock', {}, 'Code Block') },\n      ],\n    },\n    'divider',\n    {\n      name: 'alignment',\n      actions: [\n        { type: 'alignLeft', title: translate('Editor.alignLeft', {}, 'Align Left') },\n        { type: 'alignCenter', title: translate('Editor.alignCenter', {}, 'Align Center') },\n        { type: 'alignRight', title: translate('Editor.alignRight', {}, 'Align Right') },\n        { type: 'alignJustify', title: translate('Editor.alignJustify', {}, 'Align Justify') },\n      ],\n    },\n    'divider',\n    {\n      name: 'indentation',\n      actions: [\n        { type: 'outdent', title: translate('Editor.outdent', {}, 'Decrease Indent') },\n        { type: 'indent', title: translate('Editor.indent', {}, 'Increase Indent') },\n      ],\n    },\n    'divider',\n    {\n      name: 'insert',\n      actions: [\n        { type: 'link', title: translate('Editor.insertLink', {}, 'Insert Link') },\n        { type: 'image', title: translate('Editor.insertImage', {}, 'Insert Image') },\n        { type: 'video', title: translate('Editor.insertVideo', {}, 'Insert Video') },\n        { type: 'file', title: translate('Editor.insertFile', {}, 'Insert File') },\n        { type: 'table', title: translate('Editor.insertTable', {}, 'Insert Table') },\n        { type: 'hr', title: translate('Editor.horizontalLine', {}, 'Horizontal Line') },\n      ],\n    },\n  ]"
             }
         };
     }
@@ -1435,7 +1441,7 @@ export class XEditor {
                     "return": "Promise<EditorState>"
                 },
                 "docs": {
-                    "text": "Retrieves the current editor state as a structured object.\r\nThis includes the block hierarchy and formatting metadata.",
+                    "text": "Retrieves the current editor state as a structured object.\nThis includes the block hierarchy and formatting metadata.",
                     "tags": [{
                             "name": "returns",
                             "text": "The parsed state object."
@@ -1512,7 +1518,7 @@ export class XEditor {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Replaces the entire editor content with the provided HTML string.\r\nContent is automatically normalized after insertion.",
+                    "text": "Replaces the entire editor content with the provided HTML string.\nContent is automatically normalized after insertion.",
                     "tags": [{
                             "name": "param",
                             "text": "html - The new HTML content."

package/dist/collection/components/x-empty/x-empty.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-empty/x-empty.js

@@ -33,7 +33,7 @@ export class XEmpty {
      * <x-empty><button>Reload</button></x-empty>
      */
     render() {
-        return (h(Host, { key: '469be171be9d04e6300015e89a595bbb45043a12', class: "x-empty" }, h("div", { key: 'ce2dae6c52b40a694855d29325dd2c5ec718efdf', class: "x-empty-image" }, h("slot", { key: '75c9b54023a90faadbee8e876573a27402087886', name: "image" }, this.image === 'empty' ? (this.empty()) : this.image === 'simple' ? (this.simple()) : this.image ? (h("img", { src: this.image, alt: this.description })) : (h("svg", { class: "x-empty-img-default", width: "184", height: "152", viewBox: "0 0 184 152", xmlns: "http://www.w3.org/2000/svg" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(24 31.67)" }, h("ellipse", { "fill-opacity": ".8", fill: "#F5F5F7", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668" }), h("path", { d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z", fill: "#AEB8C2" }), h("path", { d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z", fill: "url(#linearGradient-1)", transform: "translate(13.56)" }), h("path", { d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z", fill: "#F5F5F7" }), h("path", { d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z", fill: "#DCE0E6" })), h("path", { d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z", fill: "#DCE0E6" }), h("g", { transform: "translate(149.65 15.383)", fill: "#FFF" }, h("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }), h("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" }))))))), h("div", { key: '4fa3688125e177a0531e106f49ab47bf68099414', class: "x-empty-description" }, h("slot", { key: '51d1c8d52bdd9746ac3842847ebb4387a3abd2dc', name: "description" }, this.description)), h("div", { key: 'e0b09e0c0ebe5f9ce3293472b93a13f884e67436', class: "x-empty-footer" }, h("slot", { key: 'acad6fdc48320f378535b03f97df753504ac9928' }))));
+        return (h(Host, { key: 'e9f74536a095432977b48fe86626120f73755300', class: "x-empty" }, h("div", { key: '15331cdcbd14ced17b55c25bce791bc05dcb3a33', class: "x-empty-image" }, h("slot", { key: '498e21a359050dcdc46abfc48b5b38ad1209a23a', name: "image" }, this.image === 'empty' ? (this.empty()) : this.image === 'simple' ? (this.simple()) : this.image ? (h("img", { src: this.image, alt: this.description })) : (h("svg", { class: "x-empty-img-default", width: "184", height: "152", viewBox: "0 0 184 152", xmlns: "http://www.w3.org/2000/svg" }, h("g", { fill: "none", "fill-rule": "evenodd" }, h("g", { transform: "translate(24 31.67)" }, h("ellipse", { "fill-opacity": ".8", fill: "#F5F5F7", cx: "67.797", cy: "106.89", rx: "67.797", ry: "12.668" }), h("path", { d: "M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z", fill: "#AEB8C2" }), h("path", { d: "M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z", fill: "url(#linearGradient-1)", transform: "translate(13.56)" }), h("path", { d: "M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z", fill: "#F5F5F7" }), h("path", { d: "M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z", fill: "#DCE0E6" })), h("path", { d: "M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z", fill: "#DCE0E6" }), h("g", { transform: "translate(149.65 15.383)", fill: "#FFF" }, h("ellipse", { cx: "20.654", cy: "3.167", rx: "2.849", ry: "2.815" }), h("path", { d: "M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" }))))))), h("div", { key: '0bea4a4a4e12cf33a68abcca7a864de22d7bd869', class: "x-empty-description" }, h("slot", { key: '3dcf3b8a1110383e927ccc7acdc1d2ab288c45dc', name: "description" }, this.description)), h("div", { key: 'c7ff39656cf7f33040a4b0d8487093c047f043b7', class: "x-empty-footer" }, h("slot", { key: '42616de3f344f85ded08a63b69c00820d40baf7e' }))));
     }
     /**
      * Render the "empty" preset SVG.

package/dist/collection/components/x-finder/services/finder-service.js

@@ -14,7 +14,7 @@ export class FinderService {
         sortBy: 'name',
         sortOrder: 'asc',
         showDetails: true,
-        storage: { used: 12.4, total: 20 }
+        storage: { used: 12.4, total: 20 },
     };
     onChange;
     constructor(config, onStateChange) {
@@ -64,7 +64,7 @@ export class FinderService {
                     return true;
                 }
                 return false;
-            }
+            },
         });
     }
     async createProject() {
@@ -83,7 +83,7 @@ export class FinderService {
                     return true;
                 }
                 return false;
-            }
+            },
         });
     }
     async upload(file) {
@@ -116,7 +116,7 @@ export class FinderService {
                     return true;
                 }
                 return false;
-            }
+            },
         });
     }
     async delete(item) {
@@ -132,7 +132,7 @@ export class FinderService {
                 if (success) {
                     await this.loadItems();
                 }
-            }
+            },
         });
     }
     download(item) {
@@ -180,9 +180,7 @@ export class FinderService {
     selectItem(item, multi = false) {
         if (multi) {
             const index = this.state.selectedItems.findIndex(i => i.id === item.id);
-            const newSelection = index > -1
-                ? this.state.selectedItems.filter(i => i.id !== item.id)
-                : [...this.state.selectedItems, item];
+            const newSelection = index > -1 ? this.state.selectedItems.filter(i => i.id !== item.id) : [...this.state.selectedItems, item];
             this.updateState({ selectedItems: newSelection });
         }
         else {
@@ -214,7 +212,7 @@ export class FinderService {
                 valB = b.name.toLowerCase();
             }
             const order = this.state.sortOrder === 'asc' ? 1 : -1;
-            return valA > valB ? order : (valA < valB ? -order : 0);
+            return valA > valB ? order : valA < valB ? -order : 0;
         });
         this.state.filteredItems = result;
     }

package/dist/collection/components/x-finder/x-finder.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;
@@ -438,7 +441,8 @@
   width: 100%;
   aspect-ratio: 16/10;
 }
-.grid-item .thumbnail img, .grid-item .thumbnail x-image {
+.grid-item .thumbnail img,
+.grid-item .thumbnail x-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -523,7 +527,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.list-item .type, .list-item .size, .list-item .date {
+.list-item .type,
+.list-item .size,
+.list-item .date {
   font-size: 13px;
   color: var(--x-finder-text-secondary, var(--x-text-color-secondary, #64748b));
   width: 120px;