@aquera/nile-elements 1.9.5 → 1.9.7

package/dist/src/nile-wysiwyg-editor/ui/find-replace.d.ts

@@ -0,0 +1,26 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+/**
+ * Find & replace bar pinned to the top-right of the editor. Emits:
+ *  - `wysiwyg-find`         detail: { query }
+ *  - `wysiwyg-find-step`    detail: { direction: 'next' | 'prev' }
+ *  - `wysiwyg-replace`      detail: { value }
+ *  - `wysiwyg-replace-all`  detail: { value }
+ *  - `wysiwyg-find-close`
+ */
+export declare class NileWysiwygFindBar extends NileElement {
+    open: boolean;
+    matchCount: number;
+    activeIndex: number;
+    queryInput?: HTMLInputElement;
+    replaceInput?: HTMLInputElement;
+    static get styles(): CSSResultArray;
+    focusInput(): void;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-find-bar': NileWysiwygFindBar;
+    }
+}

package/dist/src/nile-wysiwyg-editor/ui/find-replace.js

@@ -0,0 +1,178 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+/**
+ * Find & replace bar pinned to the top-right of the editor. Emits:
+ *  - `wysiwyg-find`         detail: { query }
+ *  - `wysiwyg-find-step`    detail: { direction: 'next' | 'prev' }
+ *  - `wysiwyg-replace`      detail: { value }
+ *  - `wysiwyg-replace-all`  detail: { value }
+ *  - `wysiwyg-find-close`
+ */
+let NileWysiwygFindBar = class NileWysiwygFindBar extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.matchCount = 0;
+        this.activeIndex = 0;
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          top: 8px;
+          right: 8px;
+          z-index: 25;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .find-bar {
+          display: grid;
+          grid-template-columns: auto auto auto auto;
+          align-items: center;
+          gap: 6px;
+          padding: 8px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+          font-size: 13px;
+        }
+
+        input {
+          font: inherit;
+          font-size: 13px;
+          width: 160px;
+          padding: 4px 8px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          outline: none;
+        }
+
+        input:focus {
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .count {
+          min-width: 42px;
+          text-align: center;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          font-variant-numeric: tabular-nums;
+        }
+
+        button {
+          font: inherit;
+          font-size: 12px;
+          padding: 4px 8px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        button:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+      `,
+        ];
+    }
+    focusInput() {
+        this.updateComplete.then(() => {
+            this.queryInput?.focus();
+            this.queryInput?.select();
+        });
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-find-close');
+        }
+        else if (event.key === 'Enter' && event.target === this.queryInput) {
+            event.preventDefault();
+            this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });
+        }
+    }
+    render() {
+        const count = this.matchCount
+            ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`
+            : '0/0';
+        return html `
+      <div class="find-bar" part="find-bar" @keydown=${this.handleKeydown}>
+        <input
+          class="find-bar__query"
+          type="text"
+          placeholder="Find"
+          aria-label="Find"
+          @input=${(e) => this.emit('wysiwyg-find', { query: e.target.value })}
+        />
+        <span class="count">${count}</span>
+        <button
+          type="button"
+          title="Previous match"
+          @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}
+        >
+          ↑
+        </button>
+        <button
+          type="button"
+          title="Next match"
+          @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}
+        >
+          ↓
+        </button>
+        <input
+          class="find-bar__replace"
+          type="text"
+          placeholder="Replace with"
+          aria-label="Replace with"
+        />
+        <button
+          type="button"
+          @click=${() => this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}
+        >
+          Replace
+        </button>
+        <button
+          type="button"
+          @click=${() => this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}
+        >
+          All
+        </button>
+        <button type="button" title="Close (Esc)" @click=${() => this.emit('wysiwyg-find-close')}>
+          ✕
+        </button>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygFindBar.prototype, "open", void 0);
+__decorate([
+    property({ type: Number })
+], NileWysiwygFindBar.prototype, "matchCount", void 0);
+__decorate([
+    property({ type: Number })
+], NileWysiwygFindBar.prototype, "activeIndex", void 0);
+__decorate([
+    query('.find-bar__query')
+], NileWysiwygFindBar.prototype, "queryInput", void 0);
+__decorate([
+    query('.find-bar__replace')
+], NileWysiwygFindBar.prototype, "replaceInput", void 0);
+NileWysiwygFindBar = __decorate([
+    customElement('nile-wysiwyg-find-bar')
+], NileWysiwygFindBar);
+export { NileWysiwygFindBar };
+//# sourceMappingURL=find-replace.js.map

package/dist/src/nile-wysiwyg-editor/ui/find-replace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"find-replace.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/find-replace.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;;;;;;;GAOG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,WAAW;IAA5C;;QACuC,SAAI,GAAG,KAAK,CAAC;QAE7B,eAAU,GAAG,CAAC,CAAC;QAEf,gBAAW,GAAG,CAAC,CAAC;IAqJ9C,CAAC;IA/IQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiEF;SACF,CAAC;IACJ,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC3B,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAClC,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,EAAE,CAAC;YACrE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU;YAC3B,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;YACzE,CAAC,CAAC,KAAK,CAAC;QACV,OAAO,IAAI,CAAA;uDACwC,IAAI,CAAC,aAAa;;;;;;mBAMtD,CAAC,CAAQ,EAAE,EAAE,CACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,KAAK,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK,EAAE,CAAC;;8BAExD,KAAK;;;;mBAIhB,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;;;;;;;mBAO3D,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;;;;;;;;;;;;mBAY3D,GAAG,EAAE,CACZ,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;;;;;;mBAMhE,GAAG,EAAE,CACZ,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;;;;2DAI5B,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC;;;;KAI3F,CAAC;IACJ,CAAC;CACF,CAAA;AAzJ6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAc;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAgB;AAEf;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDAAiB;AAEjB;IAA1B,KAAK,CAAC,kBAAkB,CAAC;sDAA+B;AAE5B;IAA5B,KAAK,CAAC,oBAAoB,CAAC;wDAAiC;AATlD,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CA0J9B","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 * Find & replace bar pinned to the top-right of the editor. Emits:\n *  - `wysiwyg-find`         detail: { query }\n *  - `wysiwyg-find-step`    detail: { direction: 'next' | 'prev' }\n *  - `wysiwyg-replace`      detail: { value }\n *  - `wysiwyg-replace-all`  detail: { value }\n *  - `wysiwyg-find-close`\n */\n@customElement('nile-wysiwyg-find-bar')\nexport class NileWysiwygFindBar extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: Number }) matchCount = 0;\n\n  @property({ type: Number }) activeIndex = 0;\n\n  @query('.find-bar__query') queryInput?: HTMLInputElement;\n\n  @query('.find-bar__replace') replaceInput?: HTMLInputElement;\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          top: 8px;\n          right: 8px;\n          z-index: 25;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .find-bar {\n          display: grid;\n          grid-template-columns: auto auto auto auto;\n          align-items: center;\n          gap: 6px;\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          font-size: 13px;\n        }\n\n        input {\n          font: inherit;\n          font-size: 13px;\n          width: 160px;\n          padding: 4px 8px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n        }\n\n        input:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .count {\n          min-width: 42px;\n          text-align: center;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          font-variant-numeric: tabular-nums;\n        }\n\n        button {\n          font: inherit;\n          font-size: 12px;\n          padding: 4px 8px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\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 focusInput(): void {\n    this.updateComplete.then(() => {\n      this.queryInput?.focus();\n      this.queryInput?.select();\n    });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-find-close');\n    } else if (event.key === 'Enter' && event.target === this.queryInput) {\n      event.preventDefault();\n      this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });\n    }\n  }\n\n  public render(): TemplateResult {\n    const count = this.matchCount\n      ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`\n      : '0/0';\n    return html`\n      <div class=\"find-bar\" part=\"find-bar\" @keydown=${this.handleKeydown}>\n        <input\n          class=\"find-bar__query\"\n          type=\"text\"\n          placeholder=\"Find\"\n          aria-label=\"Find\"\n          @input=${(e: Event) =>\n            this.emit('wysiwyg-find', { query: (e.target as HTMLInputElement).value })}\n        />\n        <span class=\"count\">${count}</span>\n        <button\n          type=\"button\"\n          title=\"Previous match\"\n          @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}\n        >\n          ↑\n        </button>\n        <button\n          type=\"button\"\n          title=\"Next match\"\n          @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}\n        >\n          ↓\n        </button>\n        <input\n          class=\"find-bar__replace\"\n          type=\"text\"\n          placeholder=\"Replace with\"\n          aria-label=\"Replace with\"\n        />\n        <button\n          type=\"button\"\n          @click=${() =>\n            this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}\n        >\n          Replace\n        </button>\n        <button\n          type=\"button\"\n          @click=${() =>\n            this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}\n        >\n          All\n        </button>\n        <button type=\"button\" title=\"Close (Esc)\" @click=${() => this.emit('wysiwyg-find-close')}>\n          ✕\n        </button>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-find-bar': NileWysiwygFindBar;\n  }\n}\n"]}

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

@@ -0,0 +1,18 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+import type { ToolbarState } from '../engine/selection-state';
+/**
+ * Compact floating bar shown while an image or figure is selected. The host
+ * positions it; operations bubble up as `wysiwyg-command` events.
+ */
+export declare class NileWysiwygImageMenu extends NileElement {
+    open: boolean;
+    toolbarState?: ToolbarState;
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-image-menu': NileWysiwygImageMenu;
+    }
+}

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

@@ -0,0 +1,129 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { renderGlyph } from '../../internal/glyph';
+const OPS = [
+    {
+        label: 'Align left',
+        icon: 'format_align_left',
+        command: 'setImageAlign',
+        attrs: { align: 'left' },
+        active: s => s.imageAlign === 'left',
+    },
+    {
+        label: 'Align center',
+        icon: 'format_align_middle',
+        command: 'setImageAlign',
+        attrs: { align: 'center' },
+        active: s => s.imageAlign === 'center',
+    },
+    {
+        label: 'Align right',
+        icon: 'format_align_right',
+        command: 'setImageAlign',
+        attrs: { align: 'right' },
+        active: s => s.imageAlign === 'right',
+    },
+    {
+        label: 'Toggle caption',
+        icon: 'ng-captions',
+        command: 'toggleImageCaption',
+        active: s => s.imageIsFigure,
+    },
+    { label: 'Original size', text: '1:1', command: 'setImageWidth', attrs: { width: null } },
+    { label: 'Delete image', icon: 'ng-trash-01', command: 'deleteImage' },
+];
+/**
+ * Compact floating bar shown while an image or figure is selected. The host
+ * positions it; operations bubble up as `wysiwyg-command` events.
+ */
+let NileWysiwygImageMenu = class NileWysiwygImageMenu extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          z-index: 15;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .menu {
+          display: flex;
+          gap: 2px;
+          padding: 4px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+        }
+
+        button {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          min-width: 26px;
+          height: 26px;
+          padding: 0 4px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          font-size: 12px;
+          font-weight: 600;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        button:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        button[data-active] {
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+        }
+      `,
+        ];
+    }
+    render() {
+        const state = this.toolbarState;
+        return html `
+      <div class="menu" part="image-menu" @mousedown=${(e) => e.preventDefault()}>
+        ${OPS.map(op => html `
+            <button
+              type="button"
+              title=${op.label}
+              aria-label=${op.label}
+              ?data-active=${state && op.active ? op.active(state) : false}
+              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}
+            >
+              ${op.icon ? renderGlyph(op.icon, 16) : op.text}
+            </button>
+          `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygImageMenu.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygImageMenu.prototype, "toolbarState", void 0);
+NileWysiwygImageMenu = __decorate([
+    customElement('nile-wysiwyg-image-menu')
+], NileWysiwygImageMenu);
+export { NileWysiwygImageMenu };
+//# sourceMappingURL=image-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/image-menu.ts"],"names":[],"mappings":"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","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 { ToolbarState } from '../engine/selection-state';\n\ninterface ImageOp {\n  label: string;\n  /** Design-system icon name; `text` is the fallback when no glyph fits. */\n  icon?: string;\n  text?: string;\n  command: string;\n  attrs?: Record<string, unknown>;\n  active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: ImageOp[] = [\n  {\n    label: 'Align left',\n    icon: 'format_align_left',\n    command: 'setImageAlign',\n    attrs: { align: 'left' },\n    active: s => s.imageAlign === 'left',\n  },\n  {\n    label: 'Align center',\n    icon: 'format_align_middle',\n    command: 'setImageAlign',\n    attrs: { align: 'center' },\n    active: s => s.imageAlign === 'center',\n  },\n  {\n    label: 'Align right',\n    icon: 'format_align_right',\n    command: 'setImageAlign',\n    attrs: { align: 'right' },\n    active: s => s.imageAlign === 'right',\n  },\n  {\n    label: 'Toggle caption',\n    icon: 'ng-captions',\n    command: 'toggleImageCaption',\n    active: s => s.imageIsFigure,\n  },\n  { label: 'Original size', text: '1:1', command: 'setImageWidth', attrs: { width: null } },\n  { label: 'Delete image', icon: 'ng-trash-01', command: 'deleteImage' },\n];\n\n/**\n * Compact floating bar shown while an image or figure is selected. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-image-menu')\nexport class NileWysiwygImageMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\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        button[data-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    ];\n  }\n\n  public render(): TemplateResult {\n    const state = this.toolbarState;\n    return html`\n      <div class=\"menu\" part=\"image-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              ?data-active=${state && op.active ? op.active(state) : false}\n              @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}\n            >\n              ${op.icon ? renderGlyph(op.icon, 16) : op.text}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-image-menu': NileWysiwygImageMenu;\n  }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/image-panel.d.ts

@@ -0,0 +1,56 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+import '../../nile-input/index';
+import '../../nile-button/index';
+/**
+ * Floating image insert/edit panel, matching nile-rich-text-editor's image
+ * dialog: URL + alt + caption (nile-input) and an Insert action. When
+ * `upload-from-computer` is set it also offers an "or / Upload from computer"
+ * button (with max-size validation), matching the RTE's `uploadfromcomputer`
+ * flag. An edit mode pre-fills the fields and adds Remove.
+ *
+ * The host positions it and listens for:
+ *  - `wysiwyg-image-apply`  detail: { src, alt, caption }         (insert / edit)
+ *  - `wysiwyg-image-file`   detail: { file, alt, caption }        (upload)
+ *  - `wysiwyg-image-remove`                                       (delete active image)
+ *  - `wysiwyg-image-cancel`                                       (Escape)
+ */
+export declare class NileWysiwygImagePanel extends NileElement {
+    open: boolean;
+    /** True when editing an already-inserted image (shows Remove, "Save"). */
+    editing: boolean;
+    /** Shows the "Upload from computer" button below the URL field. */
+    uploadFromComputer: boolean;
+    /** Maximum allowed upload size in bytes (default 2 MB). */
+    maxFileSize: number;
+    private srcValue;
+    private altValue;
+    private captionValue;
+    private uploadedFileName;
+    private errorMessage;
+    /** File staged by "Upload from computer", applied on Insert. */
+    private stagedFile;
+    static get styles(): CSSResultArray;
+    focusInput(): void;
+    /** Clears every field and returns to insert (non-editing) mode. */
+    reset(): void;
+    /** Pre-fills the panel for editing an existing image. */
+    prefill(data: {
+        src?: string;
+        alt?: string;
+        caption?: string;
+    }): void;
+    private onSrc;
+    private onAlt;
+    private onCaption;
+    private triggerFilePicker;
+    private onFileChange;
+    private handleSubmit;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-image-panel': NileWysiwygImagePanel;
+    }
+}