@aquera/nile-elements 1.9.7 → 1.9.9

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

@@ -2,19 +2,28 @@ 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;
+/** Smallest grid shown before the pointer starts expanding it. */
+const MIN_ROWS = 5;
+const MIN_COLS = 5;
 /**
- * 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 }`.
  */
 let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
     constructor() {
         super(...arguments);
         this.disabled = false;
+        /** Hard cap on the number of rows selectable via grid or custom input. */
+        this.maxRows = 20;
+        /** Hard cap on the number of columns selectable via grid or custom input. */
+        this.maxCols = 20;
         this.open = false;
         this.hoverRows = 0;
         this.hoverCols = 0;
+        this.customRows = '';
+        this.customCols = '';
         this.handleOutside = (event) => {
             if (this.open && !event.composedPath().includes(this))
                 this.open = false;
@@ -70,7 +79,6 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
 
         .grid {
           display: grid;
-          grid-template-columns: repeat(${MAX_COLS}, 14px);
           gap: 2px;
         }
 
@@ -94,6 +102,71 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           font-size: 12px;
           color: var(--nile-colors-neutral-600, #475467);
         }
+
+        .custom {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          margin-top: 8px;
+          padding-top: 8px;
+          border-top: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
+        }
+
+        .custom input {
+          width: 44px;
+          height: 26px;
+          padding: 0 6px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          font-size: 12px;
+          box-sizing: border-box;
+          text-align: center;
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));
+          font-family: inherit;
+          /* Hide native number spinners: they overlap the centered text in this
+             narrow field and a stray click on the arrows mutates the value. */
+          -moz-appearance: textfield;
+          appearance: textfield;
+        }
+
+        .custom input::-webkit-outer-spin-button,
+        .custom input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+
+        .custom input:focus {
+          outline: none;
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .custom .times {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #475467);
+        }
+
+        .custom button.insert {
+          margin-left: auto;
+          height: 26px;
+          padding: 0 12px;
+          border: none;
+          border-radius: 6px;
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          color: #ffffff;
+          font-size: 12px;
+          font-weight: 600;
+          font-family: inherit;
+          cursor: pointer;
+        }
+
+        .custom button.insert:hover:not(:disabled) {
+          background: var(--nile-colors-primary-700, #1d4ed8);
+        }
+
+        .custom button.insert:disabled {
+          opacity: 0.4;
+          cursor: default;
+        }
       `,
         ];
     }
@@ -107,15 +180,33 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
     }
     pick(rows, cols) {
         this.open = false;
+        this.customRows = '';
+        this.customCols = '';
         this.emit('wysiwyg-command', {
             name: 'insertTable',
             attrs: { rows, cols, withHeaderRow: true },
         });
     }
+    /** Clamp raw input to 1..max; returns 0 when empty/invalid. */
+    clamp(raw, max) {
+        const n = parseInt(raw, 10);
+        if (!Number.isFinite(n) || n < 1)
+            return 0;
+        return Math.min(n, max);
+    }
+    insertCustom() {
+        const rows = this.clamp(this.customRows, this.maxRows);
+        const cols = this.clamp(this.customCols, this.maxCols);
+        if (rows >= 1 && cols >= 1)
+            this.pick(rows, cols);
+    }
     render() {
+        // Grow the grid by one row/col once the pointer reaches the edge, capped.
+        const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);
+        const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);
         const cells = [];
-        for (let r = 1; r <= MAX_ROWS; r += 1) {
-            for (let c = 1; c <= MAX_COLS; c += 1) {
+        for (let r = 1; r <= visibleRows; r += 1) {
+            for (let c = 1; c <= visibleCols; c += 1) {
                 cells.push(html `
           <span
             class="cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}"
@@ -128,6 +219,8 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
         `);
             }
         }
+        const customValid = this.clamp(this.customRows, this.maxRows) >= 1 &&
+            this.clamp(this.customCols, this.maxCols) >= 1;
         return html `
       <button
         type="button"
@@ -147,11 +240,62 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
       </button>
       ${this.open
             ? html `
-            <div class="panel" @mousedown=${(e) => e.preventDefault()}>
-              <div class="grid">${cells}</div>
-              <div class="label">
+            <div class="panel">
+              <div
+                class="grid"
+                style="grid-template-columns: repeat(${visibleCols}, 14px)"
+                @mousedown=${(e) => e.preventDefault()}
+                @mouseleave=${() => {
+                this.hoverRows = 0;
+                this.hoverCols = 0;
+            }}
+              >
+                ${cells}
+              </div>
+              <div class="label" @mousedown=${(e) => e.preventDefault()}>
                 ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}
               </div>
+              <div class="custom">
+                <input
+                  type="number"
+                  min="1"
+                  max=${this.maxRows}
+                  aria-label="Rows"
+                  placeholder="Rows"
+                  .value=${this.customRows}
+                  @input=${(e) => {
+                this.customRows = e.target.value;
+            }}
+                  @keydown=${(e) => {
+                if (e.key === 'Enter')
+                    this.insertCustom();
+            }}
+                />
+                <span class="times">×</span>
+                <input
+                  type="number"
+                  min="1"
+                  max=${this.maxCols}
+                  aria-label="Columns"
+                  placeholder="Cols"
+                  .value=${this.customCols}
+                  @input=${(e) => {
+                this.customCols = e.target.value;
+            }}
+                  @keydown=${(e) => {
+                if (e.key === 'Enter')
+                    this.insertCustom();
+            }}
+                />
+                <button
+                  type="button"
+                  class="insert"
+                  ?disabled=${!customValid}
+                  @click=${() => this.insertCustom()}
+                >
+                  Insert
+                </button>
+              </div>
             </div>
           `
             : ''}
@@ -161,6 +305,12 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileWysiwygTablePicker.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-rows', reflect: true })
+], NileWysiwygTablePicker.prototype, "maxRows", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-cols', reflect: true })
+], NileWysiwygTablePicker.prototype, "maxCols", void 0);
 __decorate([
     state()
 ], NileWysiwygTablePicker.prototype, "open", void 0);
@@ -170,6 +320,12 @@ __decorate([
 __decorate([
     state()
 ], NileWysiwygTablePicker.prototype, "hoverCols", void 0);
+__decorate([
+    state()
+], NileWysiwygTablePicker.prototype, "customRows", void 0);
+__decorate([
+    state()
+], NileWysiwygTablePicker.prototype, "customCols", void 0);
 NileWysiwygTablePicker = __decorate([
     customElement('nile-wysiwyg-table-picker')
 ], NileWysiwygTablePicker);

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

@@ -1 +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"]}
+{"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.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,kEAAkE;AAClE,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,QAAQ,GAAG,CAAC,CAAC;AAEnB;;;;;GAKG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE7D,0EAA0E;QACR,YAAO,GAAG,EAAE,CAAC;QAE/E,6EAA6E;QACX,YAAO,GAAG,EAAE,CAAC;QAE9D,SAAI,GAAG,KAAK,CAAC;QAEb,cAAS,GAAG,CAAC,CAAC;QAEd,cAAS,GAAG,CAAC,CAAC;QAEd,eAAU,GAAG,EAAE,CAAC;QAEhB,eAAU,GAAG,EAAE,CAAC;QA0JzB,kBAAa,GAAG,CAAC,KAAiB,EAAQ,EAAE;YAClD,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAC3E,CAAC,CAAC;IAgIJ,CAAC;IA1RQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAwIF;SACF,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC7D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAChE,CAAC;IAMO,IAAI,CAAC,IAAY,EAAE,IAAY;QACrC,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE;SAC3C,CAAC,CAAC;IACL,CAAC;IAED,+DAA+D;IACvD,KAAK,CAAC,GAAW,EAAE,GAAW;QACpC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;QAC5B,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1B,CAAC;IAEO,YAAY;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC;YAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACpD,CAAC;IAEM,MAAM;QACX,0EAA0E;QAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACnF,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAEnF,MAAM,KAAK,GAAqB,EAAE,CAAC;QACnC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;YACzC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,WAAW,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;gBACzC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;;0BAEG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE;0BACvD,GAAG,EAAE;oBACjB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;oBACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;gBACrB,CAAC;qBACQ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;;SAEjC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;QAED,MAAM,WAAW,GACf,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;YAC9C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAEjD,OAAO,IAAI,CAAA;;;;;;wBAMS,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBAChC,IAAI,CAAC,QAAQ;qBACZ,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;iBACpC,GAAG,EAAE;YACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;YACvB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACrB,CAAC;;;;QAID,IAAI,CAAC,IAAI;YACT,CAAC,CAAC,IAAI,CAAA;;;;uDAIyC,WAAW;6BACrC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;8BAC/B,GAAG,EAAE;gBACjB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;gBACnB,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC;YACrB,CAAC;;kBAEC,KAAK;;8CAEuB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;kBAC5D,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,aAAa;;;;;;wBAMtE,IAAI,CAAC,OAAO;;;2BAGT,IAAI,CAAC,UAAU;2BACf,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,CAAC,UAAU,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;YACzD,CAAC;6BACU,CAAC,CAAgB,EAAE,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;oBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;YAC7C,CAAC;;;;;;wBAMK,IAAI,CAAC,OAAO;;;2BAGT,IAAI,CAAC,UAAU;2BACf,CAAC,CAAQ,EAAE,EAAE;gBACpB,IAAI,CAAC,UAAU,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;YACzD,CAAC;6BACU,CAAC,CAAgB,EAAE,EAAE;gBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO;oBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;YAC7C,CAAC;;;;;8BAKW,CAAC,WAAW;2BACf,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE;;;;;;WAMzC;YACH,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CACF,CAAA;AA5S6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAAkB;AAGK;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAc;AAGb;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAc;AAE9D;IAAhB,KAAK,EAAE;oDAAsB;AAEb;IAAhB,KAAK,EAAE;yDAAuB;AAEd;IAAhB,KAAK,EAAE;yDAAuB;AAEd;IAAhB,KAAK,EAAE;0DAAyB;AAEhB;IAAhB,KAAK,EAAE;0DAAyB;AAjBtB,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CA6SlC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/** Smallest grid shown before the pointer starts expanding it. */\nconst MIN_ROWS = 5;\nconst MIN_COLS = 5;\n\n/**\n * Toolbar item: a table button that opens a hover grid which auto-expands as\n * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a\n * \"Custom\" rows×cols input for larger tables. Picking a cell or confirming the\n * custom size 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  /** Hard cap on the number of rows selectable via grid or custom input. */\n  @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;\n\n  /** Hard cap on the number of columns selectable via grid or custom input. */\n  @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;\n\n  @state() private open = false;\n\n  @state() private hoverRows = 0;\n\n  @state() private hoverCols = 0;\n\n  @state() private customRows = '';\n\n  @state() private customCols = '';\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          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        .custom {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          margin-top: 8px;\n          padding-top: 8px;\n          border-top: 1px solid var(--nile-colors-neutral-300, #e4e7ec);\n        }\n\n        .custom input {\n          width: 44px;\n          height: 26px;\n          padding: 0 6px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          font-size: 12px;\n          box-sizing: border-box;\n          text-align: center;\n          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #101828));\n          font-family: inherit;\n          /* Hide native number spinners: they overlap the centered text in this\n             narrow field and a stray click on the arrows mutates the value. */\n          -moz-appearance: textfield;\n          appearance: textfield;\n        }\n\n        .custom input::-webkit-outer-spin-button,\n        .custom input::-webkit-inner-spin-button {\n          -webkit-appearance: none;\n          margin: 0;\n        }\n\n        .custom input:focus {\n          outline: none;\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .custom .times {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #475467);\n        }\n\n        .custom button.insert {\n          margin-left: auto;\n          height: 26px;\n          padding: 0 12px;\n          border: none;\n          border-radius: 6px;\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n          font-size: 12px;\n          font-weight: 600;\n          font-family: inherit;\n          cursor: pointer;\n        }\n\n        .custom button.insert:hover:not(:disabled) {\n          background: var(--nile-colors-primary-700, #1d4ed8);\n        }\n\n        .custom button.insert:disabled {\n          opacity: 0.4;\n          cursor: default;\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.customRows = '';\n    this.customCols = '';\n    this.emit('wysiwyg-command', {\n      name: 'insertTable',\n      attrs: { rows, cols, withHeaderRow: true },\n    });\n  }\n\n  /** Clamp raw input to 1..max; returns 0 when empty/invalid. */\n  private clamp(raw: string, max: number): number {\n    const n = parseInt(raw, 10);\n    if (!Number.isFinite(n) || n < 1) return 0;\n    return Math.min(n, max);\n  }\n\n  private insertCustom(): void {\n    const rows = this.clamp(this.customRows, this.maxRows);\n    const cols = this.clamp(this.customCols, this.maxCols);\n    if (rows >= 1 && cols >= 1) this.pick(rows, cols);\n  }\n\n  public render(): TemplateResult {\n    // Grow the grid by one row/col once the pointer reaches the edge, capped.\n    const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);\n    const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);\n\n    const cells: TemplateResult[] = [];\n    for (let r = 1; r <= visibleRows; r += 1) {\n      for (let c = 1; c <= visibleCols; 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\n    const customValid =\n      this.clamp(this.customRows, this.maxRows) >= 1 &&\n      this.clamp(this.customCols, this.maxCols) >= 1;\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\">\n              <div\n                class=\"grid\"\n                style=\"grid-template-columns: repeat(${visibleCols}, 14px)\"\n                @mousedown=${(e: Event) => e.preventDefault()}\n                @mouseleave=${() => {\n                  this.hoverRows = 0;\n                  this.hoverCols = 0;\n                }}\n              >\n                ${cells}\n              </div>\n              <div class=\"label\" @mousedown=${(e: Event) => e.preventDefault()}>\n                ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n              </div>\n              <div class=\"custom\">\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  max=${this.maxRows}\n                  aria-label=\"Rows\"\n                  placeholder=\"Rows\"\n                  .value=${this.customRows}\n                  @input=${(e: Event) => {\n                    this.customRows = (e.target as HTMLInputElement).value;\n                  }}\n                  @keydown=${(e: KeyboardEvent) => {\n                    if (e.key === 'Enter') this.insertCustom();\n                  }}\n                />\n                <span class=\"times\">×</span>\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  max=${this.maxCols}\n                  aria-label=\"Columns\"\n                  placeholder=\"Cols\"\n                  .value=${this.customCols}\n                  @input=${(e: Event) => {\n                    this.customCols = (e.target as HTMLInputElement).value;\n                  }}\n                  @keydown=${(e: KeyboardEvent) => {\n                    if (e.key === 'Enter') this.insertCustom();\n                  }}\n                />\n                <button\n                  type=\"button\"\n                  class=\"insert\"\n                  ?disabled=${!customValid}\n                  @click=${() => this.insertCustom()}\n                >\n                  Insert\n                </button>\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

@@ -1,5 +1,6 @@
 import { TemplateResult, CSSResultArray } from 'lit';
 import NileElement from '../../internal/nile-element';
+import '../../nile-lite-tooltip/nile-lite-tooltip';
 /**
  * Compact floating bar shown while the cursor is inside a table. The host
  * positions it; operations bubble up as `wysiwyg-command` events.

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

@@ -3,6 +3,7 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import NileElement from '../../internal/nile-element';
 import { renderGlyph } from '../../internal/glyph';
+import '../../nile-lite-tooltip/nile-lite-tooltip';
 const OPS = [
     { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },
     { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },
@@ -78,14 +79,15 @@ let NileWysiwygTableMenu = class NileWysiwygTableMenu extends NileElement {
         return html `
       <div class="menu" part="table-menu" @mousedown=${(e) => e.preventDefault()}>
         ${OPS.map(op => html `
-            <button
-              type="button"
-              title=${op.label}
-              aria-label=${op.label}
-              @click=${() => this.emit('wysiwyg-command', { name: op.name })}
-            >
-              ${renderGlyph(op.icon, 16)}
-            </button>
+            <nile-lite-tooltip content=${op.label} placement="top">
+              <button
+                type="button"
+                aria-label=${op.label}
+                @click=${() => this.emit('wysiwyg-command', { name: op.name })}
+              >
+                ${renderGlyph(op.icon, 16)}
+              </button>
+            </nile-lite-tooltip>
           `)}
       </div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAsE3D,CAAC;IApEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;;;sBAGE,EAAE,CAAC,KAAK;2BACH,EAAE,CAAC,KAAK;uBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;gBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;WAE7B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAtE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAuEhC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { CommandName } from '../engine/commands';\n\ninterface TableOp {\n  name: CommandName;\n  label: string;\n  icon: string;\n}\n\nconst OPS: TableOp[] = [\n  { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n  { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n  { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n  { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n  { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n  { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n  { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n  { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n  { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n  { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n  { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/**\n * Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\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: 15;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .menu {\n          display: flex;\n          gap: 2px;\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        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          min-width: 26px;\n          height: 26px;\n          padding: 0 4px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 12px;\n          font-weight: 600;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <button\n              type=\"button\"\n              title=${op.label}\n              aria-label=${op.label}\n              @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n            >\n              ${renderGlyph(op.icon, 16)}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n  }\n}\n"]}
+{"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,2CAA2C,CAAC;AAQnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAuE3D,CAAC;IArEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;yCACqB,EAAE,CAAC,KAAK;;;6BAGpB,EAAE,CAAC,KAAK;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;kBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;;WAG/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { CommandName } from '../engine/commands';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\ninterface TableOp {\n  name: CommandName;\n  label: string;\n  icon: string;\n}\n\nconst OPS: TableOp[] = [\n  { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n  { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n  { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n  { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n  { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n  { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n  { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n  { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n  { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n  { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n  { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/**\n * Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\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: 15;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .menu {\n          display: flex;\n          gap: 2px;\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        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          min-width: 26px;\n          height: 26px;\n          padding: 0 4px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 12px;\n          font-weight: 600;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${OPS.map(\n          op => html`\n            <nile-lite-tooltip content=${op.label} placement=\"top\">\n              <button\n                type=\"button\"\n                aria-label=${op.label}\n                @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n              >\n                ${renderGlyph(op.icon, 16)}\n              </button>\n            </nile-lite-tooltip>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n  }\n}\n"]}

package/dist/src/version.js

@@ -1,5 +1,5 @@
 // Version utility - placeholders will be replaced during build
-export const NILE_ELEMENTS_VERSION = '1.9.7';
+export const NILE_ELEMENTS_VERSION = '1.9.9';
 export const NILE_VERSION = '1.2.7';
 // Set global versions for runtime access
 if (typeof window !== 'undefined') {

package/dist/src/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.9.7';\nexport const NILE_VERSION = '1.2.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,CAAC,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AACjE,MAAM,CAAC,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAE/C,yCAAyC;AACzC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IACjC,MAAc,CAAC,mBAAmB,GAAG,qBAAqB,CAAC;IAC3D,MAAc,CAAC,WAAW,GAAG,YAAY,CAAC;IAC3C,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,CAAC;AACzE,CAAC","sourcesContent":["// Version utility - placeholders will be replaced during build\nexport const NILE_ELEMENTS_VERSION = '1.9.9';\nexport const NILE_VERSION = '1.2.7';\n\n// Set global versions for runtime access\nif (typeof window !== 'undefined') {\n  (window as any).nileElementsVersion = NILE_ELEMENTS_VERSION;\n  (window as any).nileVersion = NILE_VERSION;\n  window.process = window.process || { env: { NODE_ENV: 'production' } };\n}\n"]}