@aquera/nile-elements 1.9.5 → 1.9.7

package/dist/src/nile-wysiwyg-editor/ui/special-chars.js

@@ -0,0 +1,199 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import '../../nile-button-toggle-group/index';
+import '../../nile-button-toggle/index';
+const CATEGORIES = [
+    {
+        key: 'punctuation',
+        label: 'Punctuation',
+        icon: '¶',
+        chars: [
+            '–', '—', '…', '‘', '’', '“', '”', '‚', '„', '«', '»', '‹', '›', '§',
+            '¶', '†', '‡', '•', '·', '¡', '¿', '′', '″', '‰',
+        ],
+    },
+    {
+        key: 'currency',
+        label: 'Currency',
+        icon: '$',
+        chars: [
+            '$', '€', '£', '¥', '₹', '¢', '₩', '₽', '₺', '₪', '₫', '₦', '₴', '₱',
+            '฿', '₿',
+        ],
+    },
+    {
+        key: 'math',
+        label: 'Math',
+        icon: '∑',
+        chars: [
+            '±', '×', '÷', '≠', '≈', '≤', '≥', '¬', '∞', '∑', '∏', '√', '∫', '∂',
+            '∆', '∇', '∈', '∉', '∩', '∪', '⊂', '⊃', '°', 'µ', '‰', '½', '⅓', '¼',
+            '¾', '⅛',
+        ],
+    },
+    {
+        key: 'arrows',
+        label: 'Arrows',
+        icon: '→',
+        chars: [
+            '←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔', '↩', '↪', '↖',
+            '↗', '↘', '↙', '⟵', '⟶',
+        ],
+    },
+    {
+        key: 'latin',
+        label: 'Latin',
+        icon: 'Á',
+        chars: [
+            'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í',
+            'Î', 'Ï', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'ß',
+            'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í',
+            'î', 'ï', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ÿ',
+        ],
+    },
+    {
+        key: 'symbols',
+        label: 'Symbols',
+        icon: '★',
+        chars: [
+            '©', '®', '™', '℠', '№', '℮', '✓', '✗', '★', '☆', '♠', '♣', '♥', '♦',
+            '☀', '☁', '☂', '♻', '⚠', '⌘', '⌥', '⇧', '⏎', '⌫',
+        ],
+    },
+];
+/**
+ * Special characters picker (the Ω toolbar item). Emits
+ * `wysiwyg-char-select` detail: { char } and `wysiwyg-char-cancel`.
+ */
+let NileWysiwygSpecialChars = class NileWysiwygSpecialChars extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.category = CATEGORIES[0].key;
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          z-index: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .panel {
+          width: 316px;
+          padding: 8px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+        }
+
+        .tabs {
+          flex-wrap: wrap;
+          margin-bottom: 8px;
+          max-width: 100%;
+        }
+
+        .cat-icon {
+          display: inline-block;
+          min-width: 16px;
+          font-size: 15px;
+          line-height: 1;
+          text-align: center;
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(10, 1fr);
+          gap: 2px;
+          max-height: 180px;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+        }
+
+        .char {
+          font: inherit;
+          font-size: 15px;
+          height: 28px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-dark-900, #101828);
+        }
+
+        .char:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+      `,
+        ];
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-char-cancel');
+        }
+    }
+    render() {
+        const current = CATEGORIES.find(c => c.key === this.category) ?? CATEGORIES[0];
+        return html `
+      <div
+        class="panel"
+        part="special-chars"
+        @keydown=${this.handleKeydown}
+        @mousedown=${(e) => e.preventDefault()}
+      >
+        <nile-button-toggle-group
+          class="tabs"
+          .value=${this.category}
+          @nile-change=${(e) => {
+            this.category = e.detail.value;
+        }}
+        >
+          ${CATEGORIES.map(cat => html `
+              <nile-button-toggle
+                value=${cat.key}
+                title=${cat.label}
+                aria-label=${cat.label}
+                ><span class="cat-icon">${cat.icon}</span></nile-button-toggle
+              >
+            `)}
+        </nile-button-toggle-group>
+        <div class="grid" role="listbox" aria-label="Special characters">
+          ${current.chars.map(char => html `
+              <button
+                type="button"
+                class="char"
+                title=${char}
+                @click=${() => this.emit('wysiwyg-char-select', { char })}
+              >
+                ${char}
+              </button>
+            `)}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygSpecialChars.prototype, "open", void 0);
+__decorate([
+    state()
+], NileWysiwygSpecialChars.prototype, "category", void 0);
+NileWysiwygSpecialChars = __decorate([
+    customElement('nile-wysiwyg-special-chars')
+], NileWysiwygSpecialChars);
+export { NileWysiwygSpecialChars };
+//# sourceMappingURL=special-chars.js.map

package/dist/src/nile-wysiwyg-editor/ui/special-chars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"special-chars.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/special-chars.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport '../../nile-button-toggle-group/index';\nimport '../../nile-button-toggle/index';\n\ninterface CharCategory {\n  key: string;\n  label: string;\n  /** Representative glyph shown as the (iconified) tab label. */\n  icon: string;\n  chars: string[];\n}\n\nconst CATEGORIES: CharCategory[] = [\n  {\n    key: 'punctuation',\n    label: 'Punctuation',\n    icon: '¶',\n    chars: [\n      '–', '—', '…', '‘', '’', '“', '”', '‚', '„', '«', '»', '‹', '›', '§',\n      '¶', '†', '‡', '•', '·', '¡', '¿', '′', '″', '‰',\n    ],\n  },\n  {\n    key: 'currency',\n    label: 'Currency',\n    icon: '$',\n    chars: [\n      '$', '€', '£', '¥', '₹', '¢', '₩', '₽', '₺', '₪', '₫', '₦', '₴', '₱',\n      '฿', '₿',\n    ],\n  },\n  {\n    key: 'math',\n    label: 'Math',\n    icon: '∑',\n    chars: [\n      '±', '×', '÷', '≠', '≈', '≤', '≥', '¬', '∞', '∑', '∏', '√', '∫', '∂',\n      '∆', '∇', '∈', '∉', '∩', '∪', '⊂', '⊃', '°', 'µ', '‰', '½', '⅓', '¼',\n      '¾', '⅛',\n    ],\n  },\n  {\n    key: 'arrows',\n    label: 'Arrows',\n    icon: '→',\n    chars: [\n      '←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔', '↩', '↪', '↖',\n      '↗', '↘', '↙', '⟵', '⟶',\n    ],\n  },\n  {\n    key: 'latin',\n    label: 'Latin',\n    icon: 'Á',\n    chars: [\n      'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í',\n      'Î', 'Ï', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'ß',\n      'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í',\n      'î', 'ï', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ÿ',\n    ],\n  },\n  {\n    key: 'symbols',\n    label: 'Symbols',\n    icon: '★',\n    chars: [\n      '©', '®', '™', '℠', '№', '℮', '✓', '✗', '★', '☆', '♠', '♣', '♥', '♦',\n      '☀', '☁', '☂', '♻', '⚠', '⌘', '⌥', '⇧', '⏎', '⌫',\n    ],\n  },\n];\n\n/**\n * Special characters picker (the Ω toolbar item). Emits\n * `wysiwyg-char-select` detail: { char } and `wysiwyg-char-cancel`.\n */\n@customElement('nile-wysiwyg-special-chars')\nexport class NileWysiwygSpecialChars extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private category = CATEGORIES[0].key;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .panel {\n          width: 316px;\n          padding: 8px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n        }\n\n        .tabs {\n          flex-wrap: wrap;\n          margin-bottom: 8px;\n          max-width: 100%;\n        }\n\n        .cat-icon {\n          display: inline-block;\n          min-width: 16px;\n          font-size: 15px;\n          line-height: 1;\n          text-align: center;\n        }\n\n        .grid {\n          display: grid;\n          grid-template-columns: repeat(10, 1fr);\n          gap: 2px;\n          max-height: 180px;\n          overflow-y: auto;\n          overscroll-behavior: contain;\n        }\n\n        .char {\n          font: inherit;\n          font-size: 15px;\n          height: 28px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          color: var(--nile-colors-dark-900, #101828);\n        }\n\n        .char:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n      `,\n    ];\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-char-cancel');\n    }\n  }\n\n  public render(): TemplateResult {\n    const current = CATEGORIES.find(c => c.key === this.category) ?? CATEGORIES[0];\n    return html`\n      <div\n        class=\"panel\"\n        part=\"special-chars\"\n        @keydown=${this.handleKeydown}\n        @mousedown=${(e: Event) => e.preventDefault()}\n      >\n        <nile-button-toggle-group\n          class=\"tabs\"\n          .value=${this.category}\n          @nile-change=${(e: CustomEvent) => {\n            this.category = e.detail.value as string;\n          }}\n        >\n          ${CATEGORIES.map(\n            cat => html`\n              <nile-button-toggle\n                value=${cat.key}\n                title=${cat.label}\n                aria-label=${cat.label}\n                ><span class=\"cat-icon\">${cat.icon}</span></nile-button-toggle\n              >\n            `\n          )}\n        </nile-button-toggle-group>\n        <div class=\"grid\" role=\"listbox\" aria-label=\"Special characters\">\n          ${current.chars.map(\n            char => html`\n              <button\n                type=\"button\"\n                class=\"char\"\n                title=${char}\n                @click=${() => this.emit('wysiwyg-char-select', { char })}\n              >\n                ${char}\n              </button>\n            `\n          )}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-special-chars': NileWysiwygSpecialChars;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/suggest-list.d.ts

@@ -0,0 +1,31 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+export interface SuggestItem {
+    key: string;
+    label: string;
+    /** Secondary text shown right-aligned (e.g. slash-command hint). */
+    hint?: string;
+}
+/**
+ * Keyboard-navigable suggestion popup shared by mentions and slash commands.
+ * The host positions it, feeds `items`, and drives navigation through
+ * next()/prev()/selectCurrent(); picking an item emits
+ * `wysiwyg-suggest-select` with the item.
+ */
+export declare class NileWysiwygSuggestList extends NileElement {
+    open: boolean;
+    items: SuggestItem[];
+    private activeIndex;
+    static get styles(): CSSResultArray;
+    protected willUpdate(): void;
+    next(): void;
+    prev(): void;
+    resetActive(): void;
+    selectCurrent(): boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-suggest-list': NileWysiwygSuggestList;
+    }
+}

package/dist/src/nile-wysiwyg-editor/ui/suggest-list.js

@@ -0,0 +1,133 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+/**
+ * Keyboard-navigable suggestion popup shared by mentions and slash commands.
+ * The host positions it, feeds `items`, and drives navigation through
+ * next()/prev()/selectCurrent(); picking an item emits
+ * `wysiwyg-suggest-select` with the item.
+ */
+let NileWysiwygSuggestList = class NileWysiwygSuggestList extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.items = [];
+        this.activeIndex = 0;
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          z-index: 25;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .list {
+          min-width: 200px;
+          max-width: 320px;
+          max-height: 240px;
+          overflow-y: auto;
+          padding: 4px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+          font-size: 13px;
+        }
+
+        .item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 12px;
+          padding: 6px 8px;
+          border-radius: 5px;
+          cursor: pointer;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        .item.active {
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+        }
+
+        .hint {
+          font-size: 11px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .empty {
+          padding: 6px 8px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+      `,
+        ];
+    }
+    willUpdate() {
+        if (this.activeIndex >= this.items.length)
+            this.activeIndex = 0;
+    }
+    next() {
+        if (this.items.length)
+            this.activeIndex = (this.activeIndex + 1) % this.items.length;
+    }
+    prev() {
+        if (this.items.length) {
+            this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
+        }
+    }
+    resetActive() {
+        this.activeIndex = 0;
+    }
+    selectCurrent() {
+        const item = this.items[this.activeIndex];
+        if (!item)
+            return false;
+        this.emit('wysiwyg-suggest-select', { item });
+        return true;
+    }
+    render() {
+        return html `
+      <div class="list" part="suggest-list" @mousedown=${(e) => e.preventDefault()}>
+        ${this.items.length
+            ? this.items.map((item, index) => html `
+                <div
+                  class="item ${index === this.activeIndex ? 'active' : ''}"
+                  @mouseenter=${() => {
+                this.activeIndex = index;
+            }}
+                  @click=${() => this.selectCurrent()}
+                >
+                  <span>${item.label}</span>
+                  ${item.hint ? html `<span class="hint">${item.hint}</span>` : ''}
+                </div>
+              `)
+            : html `<div class="empty">No results</div>`}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygSuggestList.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygSuggestList.prototype, "items", void 0);
+__decorate([
+    state()
+], NileWysiwygSuggestList.prototype, "activeIndex", void 0);
+NileWysiwygSuggestList = __decorate([
+    customElement('nile-wysiwyg-suggest-list')
+], NileWysiwygSuggestList);
+export { NileWysiwygSuggestList };
+//# sourceMappingURL=suggest-list.js.map

package/dist/src/nile-wysiwyg-editor/ui/suggest-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggest-list.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/suggest-list.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,WAAW,MAAM,6BAA6B,CAAC;AAStD;;;;;GAKG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QACuC,SAAI,GAAG,KAAK,CAAC;QAEzB,UAAK,GAAkB,EAAE,CAAC;QAEzC,gBAAW,GAAG,CAAC,CAAC;IA4GnC,CAAC;IA1GQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqDF;SACF,CAAC;IACJ,CAAC;IAES,UAAU;QAClB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IAClE,CAAC;IAEM,IAAI;QACT,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IACvF,CAAC;IAEM,IAAI;QACT,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACpF,CAAC;IACH,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACvB,CAAC;IAEM,aAAa;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;yDAC0C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC/E,IAAI,CAAC,KAAK,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CACZ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;gCAEH,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gCAC1C,GAAG,EAAE;gBACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC;2BACQ,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;0BAE3B,IAAI,CAAC,KAAK;oBAChB,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;;eAElE,CACF;YACH,CAAC,CAAC,IAAI,CAAA,qCAAqC;;KAEhD,CAAC;IACJ,CAAC;CACF,CAAA;AAhH6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAA2B;AAEzC;IAAhB,KAAK,EAAE;2DAAyB;AALtB,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAiHlC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\nexport interface SuggestItem {\n  key: string;\n  label: string;\n  /** Secondary text shown right-aligned (e.g. slash-command hint). */\n  hint?: string;\n}\n\n/**\n * Keyboard-navigable suggestion popup shared by mentions and slash commands.\n * The host positions it, feeds `items`, and drives navigation through\n * next()/prev()/selectCurrent(); picking an item emits\n * `wysiwyg-suggest-select` with the item.\n */\n@customElement('nile-wysiwyg-suggest-list')\nexport class NileWysiwygSuggestList extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) items: SuggestItem[] = [];\n\n  @state() private activeIndex = 0;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 25;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .list {\n          min-width: 200px;\n          max-width: 320px;\n          max-height: 240px;\n          overflow-y: auto;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n          font-size: 13px;\n        }\n\n        .item {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          gap: 12px;\n          padding: 6px 8px;\n          border-radius: 5px;\n          cursor: pointer;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        .item.active {\n          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));\n          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));\n        }\n\n        .hint {\n          font-size: 11px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        .empty {\n          padding: 6px 8px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n      `,\n    ];\n  }\n\n  protected willUpdate(): void {\n    if (this.activeIndex >= this.items.length) this.activeIndex = 0;\n  }\n\n  public next(): void {\n    if (this.items.length) this.activeIndex = (this.activeIndex + 1) % this.items.length;\n  }\n\n  public prev(): void {\n    if (this.items.length) {\n      this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;\n    }\n  }\n\n  public resetActive(): void {\n    this.activeIndex = 0;\n  }\n\n  public selectCurrent(): boolean {\n    const item = this.items[this.activeIndex];\n    if (!item) return false;\n    this.emit('wysiwyg-suggest-select', { item });\n    return true;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"list\" part=\"suggest-list\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${this.items.length\n          ? this.items.map(\n              (item, index) => html`\n                <div\n                  class=\"item ${index === this.activeIndex ? 'active' : ''}\"\n                  @mouseenter=${() => {\n                    this.activeIndex = index;\n                  }}\n                  @click=${() => this.selectCurrent()}\n                >\n                  <span>${item.label}</span>\n                  ${item.hint ? html`<span class=\"hint\">${item.hint}</span>` : ''}\n                </div>\n              `\n            )\n          : html`<div class=\"empty\">No results</div>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-suggest-list': NileWysiwygSuggestList;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.d.ts

@@ -0,0 +1,23 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+/**
+ * Toolbar item: a table button that opens an N×M hover grid. Picking a cell
+ * emits `wysiwyg-command` with `insertTable { rows, cols }`.
+ */
+export declare class NileWysiwygTablePicker extends NileElement {
+    disabled: boolean;
+    private open;
+    private hoverRows;
+    private hoverCols;
+    static get styles(): CSSResultArray;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleOutside;
+    private pick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-table-picker': NileWysiwygTablePicker;
+    }
+}

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js

@@ -0,0 +1,177 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+const MAX_ROWS = 8;
+const MAX_COLS = 10;
+/**
+ * Toolbar item: a table button that opens an N×M hover grid. Picking a cell
+ * emits `wysiwyg-command` with `insertTable { rows, cols }`.
+ */
+let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.open = false;
+        this.hoverRows = 0;
+        this.hoverCols = 0;
+        this.handleOutside = (event) => {
+            if (this.open && !event.composedPath().includes(this))
+                this.open = false;
+        };
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: relative;
+          display: inline-flex;
+        }
+
+        button.trigger {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+          padding: 0 6px;
+          box-sizing: border-box;
+          border: none;
+          border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+        }
+
+        button.trigger:hover:not(:disabled) {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        button.trigger:disabled {
+          opacity: 0.4;
+          cursor: default;
+        }
+
+        .panel {
+          position: absolute;
+          top: calc(100% + 4px);
+          left: 0;
+          z-index: 30;
+          padding: 8px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(${MAX_COLS}, 14px);
+          gap: 2px;
+        }
+
+        .cell {
+          width: 14px;
+          height: 14px;
+          border: 1px solid var(--nile-colors-neutral-300, #d0d5dd);
+          border-radius: 2px;
+          box-sizing: border-box;
+          cursor: pointer;
+        }
+
+        .cell.hot {
+          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100, #dbeafe));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .label {
+          margin-top: 6px;
+          text-align: center;
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #475467);
+        }
+      `,
+        ];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutside);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutside);
+    }
+    pick(rows, cols) {
+        this.open = false;
+        this.emit('wysiwyg-command', {
+            name: 'insertTable',
+            attrs: { rows, cols, withHeaderRow: true },
+        });
+    }
+    render() {
+        const cells = [];
+        for (let r = 1; r <= MAX_ROWS; r += 1) {
+            for (let c = 1; c <= MAX_COLS; c += 1) {
+                cells.push(html `
+          <span
+            class="cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}"
+            @mouseenter=${() => {
+                    this.hoverRows = r;
+                    this.hoverCols = c;
+                }}
+            @click=${() => this.pick(r, c)}
+          ></span>
+        `);
+            }
+        }
+        return html `
+      <button
+        type="button"
+        class="trigger"
+        part="button"
+        aria-label="Insert table"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        ?disabled=${this.disabled}
+        @mousedown=${(e) => e.preventDefault()}
+        @click=${() => {
+            this.open = !this.open;
+            this.hoverRows = 0;
+            this.hoverCols = 0;
+        }}
+      >
+        <nile-glyph name="grid-01" size="18" method="stroke"></nile-glyph>
+      </button>
+      ${this.open
+            ? html `
+            <div class="panel" @mousedown=${(e) => e.preventDefault()}>
+              <div class="grid">${cells}</div>
+              <div class="label">
+                ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}
+              </div>
+            </div>
+          `
+            : ''}
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygTablePicker.prototype, "disabled", void 0);
+__decorate([
+    state()
+], NileWysiwygTablePicker.prototype, "open", void 0);
+__decorate([
+    state()
+], NileWysiwygTablePicker.prototype, "hoverRows", void 0);
+__decorate([
+    state()
+], NileWysiwygTablePicker.prototype, "hoverCols", void 0);
+NileWysiwygTablePicker = __decorate([
+    customElement('nile-wysiwyg-table-picker')
+], NileWysiwygTablePicker);
+export { NileWysiwygTablePicker };
+//# sourceMappingURL=table-grid-picker.js.map

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\nconst MAX_ROWS = 8;\nconst MAX_COLS = 10;\n\n/**\n * Toolbar item: a table button that opens an N×M hover grid. Picking a cell\n * emits `wysiwyg-command` with `insertTable { rows, cols }`.\n */\n@customElement('nile-wysiwyg-table-picker')\nexport class NileWysiwygTablePicker extends NileElement {\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private open = false;\n\n  @state() private hoverRows = 0;\n\n  @state() private hoverCols = 0;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: relative;\n          display: inline-flex;\n        }\n\n        button.trigger {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          width: 32px;\n          height: 32px;\n          padding: 0 6px;\n          box-sizing: border-box;\n          border: none;\n          border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n          background: transparent;\n          cursor: pointer;\n          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n        }\n\n        button.trigger:hover:not(:disabled) {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        button.trigger:disabled {\n          opacity: 0.4;\n          cursor: default;\n        }\n\n        .panel {\n          position: absolute;\n          top: calc(100% + 4px);\n          left: 0;\n          z-index: 30;\n          padding: 8px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n        }\n\n        .grid {\n          display: grid;\n          grid-template-columns: repeat(${MAX_COLS}, 14px);\n          gap: 2px;\n        }\n\n        .cell {\n          width: 14px;\n          height: 14px;\n          border: 1px solid var(--nile-colors-neutral-300, #d0d5dd);\n          border-radius: 2px;\n          box-sizing: border-box;\n          cursor: pointer;\n        }\n\n        .cell.hot {\n          background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100, #dbeafe));\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .label {\n          margin-top: 6px;\n          text-align: center;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #475467);\n        }\n      `,\n    ];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('mousedown', this.handleOutside);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('mousedown', this.handleOutside);\n  }\n\n  private handleOutside = (event: MouseEvent): void => {\n    if (this.open && !event.composedPath().includes(this)) this.open = false;\n  };\n\n  private pick(rows: number, cols: number): void {\n    this.open = false;\n    this.emit('wysiwyg-command', {\n      name: 'insertTable',\n      attrs: { rows, cols, withHeaderRow: true },\n    });\n  }\n\n  public render(): TemplateResult {\n    const cells: TemplateResult[] = [];\n    for (let r = 1; r <= MAX_ROWS; r += 1) {\n      for (let c = 1; c <= MAX_COLS; c += 1) {\n        cells.push(html`\n          <span\n            class=\"cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}\"\n            @mouseenter=${() => {\n              this.hoverRows = r;\n              this.hoverCols = c;\n            }}\n            @click=${() => this.pick(r, c)}\n          ></span>\n        `);\n      }\n    }\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        part=\"button\"\n        aria-label=\"Insert table\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        ?disabled=${this.disabled}\n        @mousedown=${(e: Event) => e.preventDefault()}\n        @click=${() => {\n          this.open = !this.open;\n          this.hoverRows = 0;\n          this.hoverCols = 0;\n        }}\n      >\n        <nile-glyph name=\"grid-01\" size=\"18\" method=\"stroke\"></nile-glyph>\n      </button>\n      ${this.open\n        ? html`\n            <div class=\"panel\" @mousedown=${(e: Event) => e.preventDefault()}>\n              <div class=\"grid\">${cells}</div>\n              <div class=\"label\">\n                ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n              </div>\n            </div>\n          `\n        : ''}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-table-picker': NileWysiwygTablePicker;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/table-menu.d.ts

@@ -0,0 +1,16 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+/**
+ * Compact floating bar shown while the cursor is inside a table. The host
+ * positions it; operations bubble up as `wysiwyg-command` events.
+ */
+export declare class NileWysiwygTableMenu extends NileElement {
+    open: boolean;
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-table-menu': NileWysiwygTableMenu;
+    }
+}