@aquera/nile-elements 1.9.7 → 1.9.9

package/dist/src/nile-wysiwyg-editor/ui/source-view.js

@@ -1,30 +1,101 @@
 import { __decorate } from "tslib";
 import { html, css } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import hljs from 'highlight.js/lib/core';
+import xml from 'highlight.js/lib/languages/xml';
 import NileElement from '../../internal/nile-element';
+import { sanitizeHtml } from '../engine/sanitize';
+import './preview';
+// HTML highlighting only — reuses the same lib the code-block feature already
+// bundles, so this adds no new dependency. Registration is idempotent.
+hljs.registerLanguage('xml', xml);
 /**
- * Raw HTML source editing mode. Replaces the rich surface while open; the
- * host re-parses (and re-sanitizes) the HTML on apply. Emits
+ * Raw HTML source editing mode. A split view: the raw HTML on the left, a
+ * live rendered preview on the right, with a draggable divider between them
+ * and a resizable body. The preview runs the same sanitizer the host applies
+ * on the way back, so what you see is what the document becomes. Emits
  * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.
+ *
+ * The code pane is a lightweight editor: a real `<textarea>` for input, with a
+ * highlight.js-coloured layer painted behind it and a synced line-number
+ * gutter. No heavyweight code-editor dependency.
  */
 let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
     constructor() {
         super(...arguments);
         this.value = '';
+        /** Current source text, drives the live preview, highlight and gutter. */
+        this.draft = '';
+        /**
+         * Fraction of the body width given to the code pane (the rest is preview).
+         * Clamped while dragging the divider.
+         */
+        this.splitRatio = 0.5;
+        /** Whether the divider is currently being dragged. */
+        this.splitDragging = false;
+        /** Begins a pointer-driven resize of the split divider. */
+        this.startSplitDrag = (e) => {
+            const body = this.bodyEl;
+            if (!body)
+                return;
+            e.preventDefault();
+            this.splitDragging = true;
+            const rect = body.getBoundingClientRect();
+            const MIN = 0.15;
+            const MAX = 0.85;
+            const onMove = (ev) => {
+                if (rect.width === 0)
+                    return;
+                const ratio = (ev.clientX - rect.left) / rect.width;
+                this.splitRatio = Math.min(MAX, Math.max(MIN, ratio));
+            };
+            const onUp = () => {
+                this.splitDragging = false;
+                window.removeEventListener('pointermove', onMove);
+                window.removeEventListener('pointerup', onUp);
+            };
+            window.addEventListener('pointermove', onMove);
+            window.addEventListener('pointerup', onUp);
+        };
+        /** Resets the divider to a 50/50 layout (double-click affordance). */
+        this.resetSplit = () => {
+            this.splitRatio = 0.5;
+        };
+        this.onInput = (e) => {
+            this.draft = e.target.value;
+        };
+        /** Keeps the highlight layer and line-number gutter aligned with scroll. */
+        this.onScroll = (e) => {
+            const ta = e.target;
+            if (this.highlightEl) {
+                this.highlightEl.style.transform = `translate(${-ta.scrollLeft}px, ${-ta.scrollTop}px)`;
+            }
+            if (this.linenosEl) {
+                this.linenosEl.style.transform = `translateY(${-ta.scrollTop}px)`;
+            }
+        };
     }
     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)
-          );
           display: flex;
           flex-direction: column;
+          box-sizing: border-box;
+          overflow: hidden;
+          min-height: var(--nile-wysiwyg-min-height, 200px);
+          height: var(--nile-wysiwyg-source-height, 340px);
+          max-height: var(
+            --nile-wysiwyg-source-max-height,
+            var(--nile-wysiwyg-max-height, 70vh)
+          );
+          resize: vertical;
         }
 
         .bar {
+          flex: 0 0 auto;
           display: flex;
           align-items: center;
           justify-content: space-between;
@@ -56,30 +127,224 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
           color: #ffffff;
         }
 
-        textarea {
-          flex: 1;
-          min-height: var(--nile-wysiwyg-min-height, 160px);
-          padding: 12px 16px;
-          border: none;
-          outline: none;
-          resize: vertical;
+        .body {
+          flex: 1 1 auto;
+          display: flex;
+          align-items: stretch;
+          overflow: hidden;
+          min-height: 0;
+          box-sizing: border-box;
+        }
+
+        .body--dragging {
+          cursor: col-resize;
+          user-select: none;
+          -webkit-user-select: none;
+        }
+
+        .body--dragging .pane {
+          pointer-events: none;
+        }
+
+        .pane {
+          min-width: 0;
+          min-height: 0;
+          box-sizing: border-box;
+        }
+
+        /* --- Lightweight code editor: gutter + highlighted textarea --- */
+        .pane--code {
+          display: flex;
+          background: var(--nile-colors-white-base, #ffffff);
+          /* Shared code metrics, inherited by the gutter, highlight and textarea
+             so every line lines up to the pixel. */
           font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
           font-size: 12px;
-          line-height: 1.5;
+          line-height: 18px;
+          tab-size: 2;
+          -moz-tab-size: 2;
+        }
+
+        .linenos {
+          flex: 0 0 auto;
+          overflow: hidden;
+          box-sizing: border-box;
+          padding: 12px 8px 0;
+          text-align: right;
+          color: var(--nile-colors-neutral-400, #98a2b3);
+          background: var(--nile-colors-neutral-50, #f9fafb);
+          border-right: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+          user-select: none;
+        }
+
+        .linenos-inner {
+          will-change: transform;
+        }
+
+        .linenos-inner > div {
+          height: 18px;
+        }
+
+        .input-wrap {
+          position: relative;
+          flex: 1 1 0;
+          min-width: 0;
+          overflow: hidden;
+        }
+
+        /* Highlight layer and textarea share the exact same box (offset for
+           padding via top/left, extending to the edges for horizontal scroll),
+           so the coloured text sits directly under the caret. */
+        .hl,
+        textarea {
+          position: absolute;
+          top: 12px;
+          left: 16px;
+          right: 0;
+          bottom: 0;
+          margin: 0;
+          border: 0;
+          padding: 0;
+          font: inherit;
+          line-height: inherit;
+          tab-size: inherit;
+          white-space: pre;
+          word-wrap: normal;
+          overflow-wrap: normal;
+          box-sizing: border-box;
+        }
+
+        .hl {
+          overflow: hidden;
+          pointer-events: none;
           color: var(--nile-colors-neutral-900, #101828);
+        }
+
+        .hl > code {
+          display: block;
+          will-change: transform;
+        }
+
+        textarea {
+          width: auto;
+          resize: none;
+          outline: none;
+          overflow: auto;
           background: transparent;
-          box-sizing: border-box;
+          color: transparent;
+          caret-color: var(--nile-colors-neutral-900, #101828);
+        }
+
+        /* Must be translucent: the textarea's text is transparent and the
+           coloured code sits BEHIND it, so an opaque selection would hide the
+           text. A tint lets the highlighted code show through the selection. */
+        textarea::selection {
+          background: rgba(41, 112, 255, 0.3);
+        }
+        textarea::-moz-selection {
+          background: rgba(41, 112, 255, 0.3);
+        }
+
+        /* highlight.js token palette (Atom One Light), matching code blocks. */
+        .hl .hljs-comment,
+        .hl .hljs-quote { color: #a0a1a7; font-style: italic; }
+        .hl .hljs-keyword,
+        .hl .hljs-selector-tag,
+        .hl .hljs-doctag { color: #a626a4; }
+        .hl .hljs-name,
+        .hl .hljs-selector-id,
+        .hl .hljs-selector-class,
+        .hl .hljs-tag { color: #e45649; }
+        .hl .hljs-literal,
+        .hl .hljs-built_in { color: #0184bb; }
+        .hl .hljs-string,
+        .hl .hljs-attribute,
+        .hl .hljs-meta .hljs-string { color: #50a14f; }
+        .hl .hljs-attr,
+        .hl .hljs-variable,
+        .hl .hljs-type,
+        .hl .hljs-number { color: #986801; }
+        .hl .hljs-symbol,
+        .hl .hljs-meta,
+        .hl .hljs-title { color: #4078f2; }
+
+        /* Draggable divider between the code and preview panes. */
+        .gutter {
+          flex: 0 0 auto;
+          position: relative;
+          width: 1px;
+          align-self: stretch;
+          background: var(--nile-colors-neutral-300, #e4e7ec);
+          cursor: col-resize;
+          touch-action: none;
+        }
+
+        .gutter::before {
+          content: '';
+          position: absolute;
+          inset: 0 -4px;
+        }
+
+        .gutter:hover,
+        .body--dragging .gutter {
+          background: var(--ng-colors-bg-brand-primary, #2970ff);
+        }
+
+        .pane--preview {
+          flex: 1 1 0;
+          overflow: auto;
+          border-left: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+          background: var(--nile-colors-white-base, #ffffff);
+        }
+
+        nile-wysiwyg-preview {
+          display: block;
+        }
+
+        .preview-empty {
+          display: block;
+          padding: 12px 16px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          font-size: 12px;
+          opacity: 0.7;
         }
       `,
         ];
     }
+    willUpdate(changed) {
+        // Sync the draft (and thus preview/highlight) whenever the host sets value.
+        if (changed.has('value'))
+            this.draft = this.value;
+    }
+    /** The current (possibly edited) source text — what "Done" would apply. */
+    get currentValue() {
+        return this.draft;
+    }
     focusInput() {
         this.updateComplete.then(() => this.textarea?.focus());
     }
+    /** highlight.js-coloured HTML for the current draft (falls back to escaped). */
+    get highlighted() {
+        if (!this.draft)
+            return '';
+        try {
+            return hljs.highlight(this.draft, { language: 'xml' }).value;
+        }
+        catch {
+            return this.draft.replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+        }
+    }
+    get lineCount() {
+        return this.draft ? this.draft.split('\n').length : 1;
+    }
     render() {
+        const preview = sanitizeHtml(this.draft);
+        const lines = [];
+        for (let i = 1; i <= this.lineCount; i += 1)
+            lines.push(html `<div>${i}</div>`);
         return html `
       <div class="bar" part="source-bar">
-        <span>HTML source</span>
+        <span>HTML</span>
         <span class="actions">
           <button type="button" @click=${() => this.emit('wysiwyg-source-cancel')}>
             Cancel
@@ -87,23 +352,53 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
           <button
             type="button"
             class="primary"
-            @click=${() => this.emit('wysiwyg-source-apply', { html: this.textarea?.value ?? '' })}
+            @click=${() => this.emit('wysiwyg-source-apply', { html: this.draft })}
           >
             Done
           </button>
         </span>
       </div>
-      <textarea
-        part="source-textarea"
-        spellcheck="false"
-        .value=${this.value}
-        @keydown=${(e) => {
+      <div class=${classMap({ body: true, 'body--dragging': this.splitDragging })}>
+        <div class="pane pane--code" style="flex: 0 0 ${this.splitRatio * 100}%">
+          <div class="linenos" part="line-numbers" aria-hidden="true">
+            <div class="linenos-inner">${lines}</div>
+          </div>
+          <div class="input-wrap">
+            <pre class="hl" aria-hidden="true"><code>${unsafeHTML(this.highlighted)}</code></pre>
+            <textarea
+              part="source-textarea"
+              spellcheck="false"
+              autocapitalize="off"
+              autocomplete="off"
+              wrap="off"
+              .value=${this.value}
+              @input=${this.onInput}
+              @scroll=${this.onScroll}
+              @keydown=${(e) => {
             if (e.key === 'Escape') {
                 e.stopPropagation();
                 this.emit('wysiwyg-source-cancel');
             }
         }}
-      ></textarea>
+            ></textarea>
+          </div>
+        </div>
+        <div
+          class="gutter"
+          part="gutter"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize source and preview"
+          title="Drag to resize · double-click to reset"
+          @pointerdown=${this.startSplitDrag}
+          @dblclick=${this.resetSplit}
+        ></div>
+        <div class="pane pane--preview" part="preview">
+          ${this.draft.trim()
+            ? html `<nile-wysiwyg-preview .content=${preview}></nile-wysiwyg-preview>`
+            : html `<span class="preview-empty">Nothing to preview</span>`}
+        </div>
+      </div>
     `;
     }
 };
@@ -113,6 +408,24 @@ __decorate([
 __decorate([
     query('textarea')
 ], NileWysiwygSourceView.prototype, "textarea", void 0);
+__decorate([
+    query('.hl > code')
+], NileWysiwygSourceView.prototype, "highlightEl", void 0);
+__decorate([
+    query('.linenos-inner')
+], NileWysiwygSourceView.prototype, "linenosEl", void 0);
+__decorate([
+    query('.body')
+], NileWysiwygSourceView.prototype, "bodyEl", void 0);
+__decorate([
+    state()
+], NileWysiwygSourceView.prototype, "draft", void 0);
+__decorate([
+    state()
+], NileWysiwygSourceView.prototype, "splitRatio", void 0);
+__decorate([
+    state()
+], NileWysiwygSourceView.prototype, "splitDragging", void 0);
 NileWysiwygSourceView = __decorate([
     customElement('nile-wysiwyg-source-view')
 ], NileWysiwygSourceView);

package/dist/src/nile-wysiwyg-editor/ui/source-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"source-view.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/source-view.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;AAEtD;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACuB,UAAK,GAAG,EAAE,CAAC;IAqGzC,CAAC;IAjGQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAwDF;SACF,CAAC;IACJ,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IACzD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;yCAI0B,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC;;;;;;qBAM5D,GAAG,EAAE,CACZ,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;;;;;;;;;iBASpE,IAAI,CAAC,KAAK;mBACR,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AArG6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDAAY;AAEpB;IAAlB,KAAK,CAAC,UAAU,CAAC;uDAAgC;AAHvC,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAsGjC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Raw HTML source editing mode. Replaces the rich surface while open; the\n * host re-parses (and re-sanitizes) the HTML on apply. Emits\n * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.\n */\n@customElement('nile-wysiwyg-source-view')\nexport class NileWysiwygSourceView extends NileElement {\n  @property({ type: String }) value = '';\n\n  @query('textarea') textarea?: HTMLTextAreaElement;\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          display: flex;\n          flex-direction: column;\n        }\n\n        .bar {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: 6px 12px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #475467);\n          border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);\n          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));\n        }\n\n        .actions {\n          display: flex;\n          gap: 8px;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n        }\n\n        textarea {\n          flex: 1;\n          min-height: var(--nile-wysiwyg-min-height, 160px);\n          padding: 12px 16px;\n          border: none;\n          outline: none;\n          resize: vertical;\n          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n          font-size: 12px;\n          line-height: 1.5;\n          color: var(--nile-colors-neutral-900, #101828);\n          background: transparent;\n          box-sizing: border-box;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => this.textarea?.focus());\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"bar\" part=\"source-bar\">\n        <span>HTML source</span>\n        <span class=\"actions\">\n          <button type=\"button\" @click=${() => this.emit('wysiwyg-source-cancel')}>\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            class=\"primary\"\n            @click=${() =>\n              this.emit('wysiwyg-source-apply', { html: this.textarea?.value ?? '' })}\n          >\n            Done\n          </button>\n        </span>\n      </div>\n      <textarea\n        part=\"source-textarea\"\n        spellcheck=\"false\"\n        .value=${this.value}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Escape') {\n            e.stopPropagation();\n            this.emit('wysiwyg-source-cancel');\n          }\n        }}\n      ></textarea>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-source-view': NileWysiwygSourceView;\n  }\n}\n"]}
+{"version":3,"file":"source-view.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/source-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport hljs from 'highlight.js/lib/core';\nimport xml from 'highlight.js/lib/languages/xml';\nimport NileElement from '../../internal/nile-element';\nimport { sanitizeHtml } from '../engine/sanitize';\nimport './preview';\n\n// HTML highlighting only — reuses the same lib the code-block feature already\n// bundles, so this adds no new dependency. Registration is idempotent.\nhljs.registerLanguage('xml', xml);\n\n/**\n * Raw HTML source editing mode. A split view: the raw HTML on the left, a\n * live rendered preview on the right, with a draggable divider between them\n * and a resizable body. The preview runs the same sanitizer the host applies\n * on the way back, so what you see is what the document becomes. Emits\n * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.\n *\n * The code pane is a lightweight editor: a real `<textarea>` for input, with a\n * highlight.js-coloured layer painted behind it and a synced line-number\n * gutter. No heavyweight code-editor dependency.\n */\n@customElement('nile-wysiwyg-source-view')\nexport class NileWysiwygSourceView extends NileElement {\n  @property({ type: String }) value = '';\n\n  @query('textarea') private textarea?: HTMLTextAreaElement;\n\n  @query('.hl > code') private highlightEl?: HTMLElement;\n\n  @query('.linenos-inner') private linenosEl?: HTMLElement;\n\n  @query('.body') private bodyEl?: HTMLElement;\n\n  /** Current source text, drives the live preview, highlight and gutter. */\n  @state() private draft = '';\n\n  /**\n   * Fraction of the body width given to the code pane (the rest is preview).\n   * Clamped while dragging the divider.\n   */\n  @state() private splitRatio = 0.5;\n\n  /** Whether the divider is currently being dragged. */\n  @state() private splitDragging = false;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          display: flex;\n          flex-direction: column;\n          box-sizing: border-box;\n          overflow: hidden;\n          min-height: var(--nile-wysiwyg-min-height, 200px);\n          height: var(--nile-wysiwyg-source-height, 340px);\n          max-height: var(\n            --nile-wysiwyg-source-max-height,\n            var(--nile-wysiwyg-max-height, 70vh)\n          );\n          resize: vertical;\n        }\n\n        .bar {\n          flex: 0 0 auto;\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: 6px 12px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #475467);\n          border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);\n          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));\n        }\n\n        .actions {\n          display: flex;\n          gap: 8px;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n        }\n\n        .body {\n          flex: 1 1 auto;\n          display: flex;\n          align-items: stretch;\n          overflow: hidden;\n          min-height: 0;\n          box-sizing: border-box;\n        }\n\n        .body--dragging {\n          cursor: col-resize;\n          user-select: none;\n          -webkit-user-select: none;\n        }\n\n        .body--dragging .pane {\n          pointer-events: none;\n        }\n\n        .pane {\n          min-width: 0;\n          min-height: 0;\n          box-sizing: border-box;\n        }\n\n        /* --- Lightweight code editor: gutter + highlighted textarea --- */\n        .pane--code {\n          display: flex;\n          background: var(--nile-colors-white-base, #ffffff);\n          /* Shared code metrics, inherited by the gutter, highlight and textarea\n             so every line lines up to the pixel. */\n          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n          font-size: 12px;\n          line-height: 18px;\n          tab-size: 2;\n          -moz-tab-size: 2;\n        }\n\n        .linenos {\n          flex: 0 0 auto;\n          overflow: hidden;\n          box-sizing: border-box;\n          padding: 12px 8px 0;\n          text-align: right;\n          color: var(--nile-colors-neutral-400, #98a2b3);\n          background: var(--nile-colors-neutral-50, #f9fafb);\n          border-right: 1px solid var(--nile-colors-neutral-200, #eaecf0);\n          user-select: none;\n        }\n\n        .linenos-inner {\n          will-change: transform;\n        }\n\n        .linenos-inner > div {\n          height: 18px;\n        }\n\n        .input-wrap {\n          position: relative;\n          flex: 1 1 0;\n          min-width: 0;\n          overflow: hidden;\n        }\n\n        /* Highlight layer and textarea share the exact same box (offset for\n           padding via top/left, extending to the edges for horizontal scroll),\n           so the coloured text sits directly under the caret. */\n        .hl,\n        textarea {\n          position: absolute;\n          top: 12px;\n          left: 16px;\n          right: 0;\n          bottom: 0;\n          margin: 0;\n          border: 0;\n          padding: 0;\n          font: inherit;\n          line-height: inherit;\n          tab-size: inherit;\n          white-space: pre;\n          word-wrap: normal;\n          overflow-wrap: normal;\n          box-sizing: border-box;\n        }\n\n        .hl {\n          overflow: hidden;\n          pointer-events: none;\n          color: var(--nile-colors-neutral-900, #101828);\n        }\n\n        .hl > code {\n          display: block;\n          will-change: transform;\n        }\n\n        textarea {\n          width: auto;\n          resize: none;\n          outline: none;\n          overflow: auto;\n          background: transparent;\n          color: transparent;\n          caret-color: var(--nile-colors-neutral-900, #101828);\n        }\n\n        /* Must be translucent: the textarea's text is transparent and the\n           coloured code sits BEHIND it, so an opaque selection would hide the\n           text. A tint lets the highlighted code show through the selection. */\n        textarea::selection {\n          background: rgba(41, 112, 255, 0.3);\n        }\n        textarea::-moz-selection {\n          background: rgba(41, 112, 255, 0.3);\n        }\n\n        /* highlight.js token palette (Atom One Light), matching code blocks. */\n        .hl .hljs-comment,\n        .hl .hljs-quote { color: #a0a1a7; font-style: italic; }\n        .hl .hljs-keyword,\n        .hl .hljs-selector-tag,\n        .hl .hljs-doctag { color: #a626a4; }\n        .hl .hljs-name,\n        .hl .hljs-selector-id,\n        .hl .hljs-selector-class,\n        .hl .hljs-tag { color: #e45649; }\n        .hl .hljs-literal,\n        .hl .hljs-built_in { color: #0184bb; }\n        .hl .hljs-string,\n        .hl .hljs-attribute,\n        .hl .hljs-meta .hljs-string { color: #50a14f; }\n        .hl .hljs-attr,\n        .hl .hljs-variable,\n        .hl .hljs-type,\n        .hl .hljs-number { color: #986801; }\n        .hl .hljs-symbol,\n        .hl .hljs-meta,\n        .hl .hljs-title { color: #4078f2; }\n\n        /* Draggable divider between the code and preview panes. */\n        .gutter {\n          flex: 0 0 auto;\n          position: relative;\n          width: 1px;\n          align-self: stretch;\n          background: var(--nile-colors-neutral-300, #e4e7ec);\n          cursor: col-resize;\n          touch-action: none;\n        }\n\n        .gutter::before {\n          content: '';\n          position: absolute;\n          inset: 0 -4px;\n        }\n\n        .gutter:hover,\n        .body--dragging .gutter {\n          background: var(--ng-colors-bg-brand-primary, #2970ff);\n        }\n\n        .pane--preview {\n          flex: 1 1 0;\n          overflow: auto;\n          border-left: 1px solid var(--nile-colors-neutral-200, #eaecf0);\n          background: var(--nile-colors-white-base, #ffffff);\n        }\n\n        nile-wysiwyg-preview {\n          display: block;\n        }\n\n        .preview-empty {\n          display: block;\n          padding: 12px 16px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          font-size: 12px;\n          opacity: 0.7;\n        }\n      `,\n    ];\n  }\n\n  protected willUpdate(changed: Map<string, unknown>): void {\n    // Sync the draft (and thus preview/highlight) whenever the host sets value.\n    if (changed.has('value')) this.draft = this.value;\n  }\n\n  /** The current (possibly edited) source text — what \"Done\" would apply. */\n  public get currentValue(): string {\n    return this.draft;\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => this.textarea?.focus());\n  }\n\n  /** highlight.js-coloured HTML for the current draft (falls back to escaped). */\n  private get highlighted(): string {\n    if (!this.draft) return '';\n    try {\n      return hljs.highlight(this.draft, { language: 'xml' }).value;\n    } catch {\n      return this.draft.replace(/[&<>]/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]!));\n    }\n  }\n\n  private get lineCount(): number {\n    return this.draft ? this.draft.split('\\n').length : 1;\n  }\n\n  /** Begins a pointer-driven resize of the split divider. */\n  private startSplitDrag = (e: PointerEvent) => {\n    const body = this.bodyEl;\n    if (!body) return;\n    e.preventDefault();\n    this.splitDragging = true;\n\n    const rect = body.getBoundingClientRect();\n    const MIN = 0.15;\n    const MAX = 0.85;\n\n    const onMove = (ev: PointerEvent) => {\n      if (rect.width === 0) return;\n      const ratio = (ev.clientX - rect.left) / rect.width;\n      this.splitRatio = Math.min(MAX, Math.max(MIN, ratio));\n    };\n    const onUp = () => {\n      this.splitDragging = false;\n      window.removeEventListener('pointermove', onMove);\n      window.removeEventListener('pointerup', onUp);\n    };\n    window.addEventListener('pointermove', onMove);\n    window.addEventListener('pointerup', onUp);\n  };\n\n  /** Resets the divider to a 50/50 layout (double-click affordance). */\n  private resetSplit = () => {\n    this.splitRatio = 0.5;\n  };\n\n  private onInput = (e: Event) => {\n    this.draft = (e.target as HTMLTextAreaElement).value;\n  };\n\n  /** Keeps the highlight layer and line-number gutter aligned with scroll. */\n  private onScroll = (e: Event) => {\n    const ta = e.target as HTMLTextAreaElement;\n    if (this.highlightEl) {\n      this.highlightEl.style.transform = `translate(${-ta.scrollLeft}px, ${-ta.scrollTop}px)`;\n    }\n    if (this.linenosEl) {\n      this.linenosEl.style.transform = `translateY(${-ta.scrollTop}px)`;\n    }\n  };\n\n  public render(): TemplateResult {\n    const preview = sanitizeHtml(this.draft);\n    const lines: TemplateResult[] = [];\n    for (let i = 1; i <= this.lineCount; i += 1) lines.push(html`<div>${i}</div>`);\n    return html`\n      <div class=\"bar\" part=\"source-bar\">\n        <span>HTML</span>\n        <span class=\"actions\">\n          <button type=\"button\" @click=${() => this.emit('wysiwyg-source-cancel')}>\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            class=\"primary\"\n            @click=${() => this.emit('wysiwyg-source-apply', { html: this.draft })}\n          >\n            Done\n          </button>\n        </span>\n      </div>\n      <div class=${classMap({ body: true, 'body--dragging': this.splitDragging })}>\n        <div class=\"pane pane--code\" style=\"flex: 0 0 ${this.splitRatio * 100}%\">\n          <div class=\"linenos\" part=\"line-numbers\" aria-hidden=\"true\">\n            <div class=\"linenos-inner\">${lines}</div>\n          </div>\n          <div class=\"input-wrap\">\n            <pre class=\"hl\" aria-hidden=\"true\"><code>${unsafeHTML(this.highlighted)}</code></pre>\n            <textarea\n              part=\"source-textarea\"\n              spellcheck=\"false\"\n              autocapitalize=\"off\"\n              autocomplete=\"off\"\n              wrap=\"off\"\n              .value=${this.value}\n              @input=${this.onInput}\n              @scroll=${this.onScroll}\n              @keydown=${(e: KeyboardEvent) => {\n                if (e.key === 'Escape') {\n                  e.stopPropagation();\n                  this.emit('wysiwyg-source-cancel');\n                }\n              }}\n            ></textarea>\n          </div>\n        </div>\n        <div\n          class=\"gutter\"\n          part=\"gutter\"\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          aria-label=\"Resize source and preview\"\n          title=\"Drag to resize · double-click to reset\"\n          @pointerdown=${this.startSplitDrag}\n          @dblclick=${this.resetSplit}\n        ></div>\n        <div class=\"pane pane--preview\" part=\"preview\">\n          ${this.draft.trim()\n            ? html`<nile-wysiwyg-preview .content=${preview}></nile-wysiwyg-preview>`\n            : html`<span class=\"preview-empty\">Nothing to preview</span>`}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-source-view': NileWysiwygSourceView;\n  }\n}\n"]}

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

@@ -18,6 +18,7 @@ export declare class NileWysiwygSuggestList extends NileElement {
     private activeIndex;
     static get styles(): CSSResultArray;
     protected willUpdate(): void;
+    protected updated(changed: Map<string, unknown>): void;
     next(): void;
     prev(): void;
     resetActive(): void;

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

@@ -77,6 +77,15 @@ let NileWysiwygSuggestList = class NileWysiwygSuggestList extends NileElement {
         if (this.activeIndex >= this.items.length)
             this.activeIndex = 0;
     }
+    updated(changed) {
+        // Keep the highlighted item visible as the user arrows through a list
+        // that overflows the popup's max-height. `nearest` is a no-op when the
+        // item is already visible (e.g. after a hover), so it never fights the mouse.
+        if (changed.has('activeIndex') || changed.has('items')) {
+            const active = this.renderRoot.querySelector('.item.active');
+            active?.scrollIntoView({ block: 'nearest' });
+        }
+    }
     next() {
         if (this.items.length)
             this.activeIndex = (this.activeIndex + 1) % this.items.length;

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

@@ -1 +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"]}
+{"version":3,"file":"suggest-list.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/suggest-list.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\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  protected updated(changed: Map<string, unknown>): void {\n    // Keep the highlighted item visible as the user arrows through a list\n    // that overflows the popup's max-height. `nearest` is a no-op when the\n    // item is already visible (e.g. after a hover), so it never fights the mouse.\n    if (changed.has('activeIndex') || changed.has('items')) {\n      const active = this.renderRoot.querySelector('.item.active');\n      (active as HTMLElement | null)?.scrollIntoView({ block: 'nearest' });\n    }\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

@@ -1,19 +1,30 @@
 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 }`.
+ * Toolbar item: a table button that opens a hover grid which auto-expands as
+ * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a
+ * "Custom" rows×cols input for larger tables. Picking a cell or confirming the
+ * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.
  */
 export declare class NileWysiwygTablePicker extends NileElement {
     disabled: boolean;
+    /** Hard cap on the number of rows selectable via grid or custom input. */
+    maxRows: number;
+    /** Hard cap on the number of columns selectable via grid or custom input. */
+    maxCols: number;
     private open;
     private hoverRows;
     private hoverCols;
+    private customRows;
+    private customCols;
     static get styles(): CSSResultArray;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private handleOutside;
     private pick;
+    /** Clamp raw input to 1..max; returns 0 when empty/invalid. */
+    private clamp;
+    private insertCustom;
     render(): TemplateResult;
 }
 declare global {