@aquera/nile-elements 1.9.6 → 1.9.7

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

@@ -0,0 +1,349 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import '../../nile-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)
+ */
+let NileWysiwygImagePanel = class NileWysiwygImagePanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        /** True when editing an already-inserted image (shows Remove, "Save"). */
+        this.editing = false;
+        /** Shows the "Upload from computer" button below the URL field. */
+        this.uploadFromComputer = false;
+        /** Maximum allowed upload size in bytes (default 2 MB). */
+        this.maxFileSize = 2 * 1024 * 1024;
+        this.srcValue = '';
+        this.altValue = '';
+        this.captionValue = '';
+        this.uploadedFileName = '';
+        this.errorMessage = '';
+        /** File staged by "Upload from computer", applied on Insert. */
+        this.stagedFile = null;
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          z-index: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .image-panel {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+          min-width: 340px;
+          max-width: 420px;
+          padding: 12px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+          font-size: 13px;
+        }
+
+        nile-input {
+          width: 100%;
+        }
+
+        .divider {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          font-size: 12px;
+        }
+
+        .divider::before,
+        .divider::after {
+          content: '';
+          flex: 1;
+          height: 1px;
+          background: var(--nile-colors-neutral-300, #e4e7ec);
+        }
+
+        .upload-row {
+          display: flex;
+          flex-direction: column;
+          align-items: stretch;
+          gap: 6px;
+        }
+
+        .upload-btn {
+          width: 100%;
+        }
+
+        /* Center the icon + label within the full-width upload button. */
+        .upload-btn::part(base) {
+          width: 100%;
+          justify-content: center;
+        }
+
+        .upload-filename {
+          color: var(--nile-colors-neutral-600, #475467);
+          font-size: 12px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .hidden-file {
+          display: none;
+        }
+
+        .error {
+          color: var(--nile-colors-danger-600, #d92d20);
+          font-size: 12px;
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+        }
+
+        .actions .spacer {
+          flex: 1;
+        }
+      `,
+        ];
+    }
+    focusInput() {
+        this.updateComplete.then(() => {
+            const input = this.shadowRoot?.querySelector('nile-input');
+            input?.focus();
+        });
+    }
+    /** Clears every field and returns to insert (non-editing) mode. */
+    reset() {
+        this.editing = false;
+        this.srcValue = '';
+        this.altValue = '';
+        this.captionValue = '';
+        this.uploadedFileName = '';
+        this.errorMessage = '';
+        this.stagedFile = null;
+    }
+    /** Pre-fills the panel for editing an existing image. */
+    prefill(data) {
+        this.editing = true;
+        this.srcValue = data.src ?? '';
+        this.altValue = data.alt ?? '';
+        this.captionValue = data.caption ?? '';
+        this.uploadedFileName = '';
+        this.errorMessage = '';
+        this.stagedFile = null;
+    }
+    onSrc(event) {
+        this.srcValue = (event.detail?.value ?? '');
+        if (this.srcValue && this.stagedFile) {
+            this.stagedFile = null;
+            this.uploadedFileName = '';
+        }
+        this.errorMessage = '';
+    }
+    onAlt(event) {
+        this.altValue = (event.detail?.value ?? '');
+    }
+    onCaption(event) {
+        this.captionValue = (event.detail?.value ?? '');
+    }
+    triggerFilePicker() {
+        const input = this.shadowRoot?.querySelector('.hidden-file');
+        input?.click();
+    }
+    onFileChange(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        if (!file.type.startsWith('image/')) {
+            this.errorMessage = 'Please choose an image file.';
+            input.value = '';
+            return;
+        }
+        if (file.size > this.maxFileSize) {
+            const mb = Math.round((this.maxFileSize / (1024 * 1024)) * 10) / 10;
+            this.errorMessage = `Image must be under ${mb} MB.`;
+            input.value = '';
+            return;
+        }
+        this.stagedFile = file;
+        this.uploadedFileName = file.name;
+        this.srcValue = '';
+        this.errorMessage = '';
+        input.value = '';
+    }
+    handleSubmit() {
+        const alt = this.altValue.trim();
+        const caption = this.captionValue.trim();
+        if (this.stagedFile) {
+            this.emit('wysiwyg-image-file', { file: this.stagedFile, alt, caption });
+            return;
+        }
+        const src = this.srcValue.trim();
+        if (!src) {
+            this.errorMessage = this.uploadFromComputer
+                ? 'Add an image URL or upload a file.'
+                : 'Add an image URL.';
+            return;
+        }
+        this.emit('wysiwyg-image-apply', { src, alt, caption });
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-image-cancel');
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleSubmit();
+        }
+    }
+    render() {
+        return html `
+      <div class="image-panel" part="image-panel" @keydown=${this.handleKeydown}>
+        <nile-input
+          label="Image URL"
+          placeholder="Paste image link here"
+          .value=${this.srcValue}
+          @nile-input=${this.onSrc}
+        ></nile-input>
+
+        ${this.uploadFromComputer
+            ? html `
+              <div class="divider">or</div>
+              <div class="upload-row">
+                <nile-button
+                  class="upload-btn"
+                  variant="secondary"
+                  @click=${this.triggerFilePicker}
+                >
+                  <svg
+                    slot="prefix"
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    aria-hidden="true"
+                  >
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="17 8 12 3 7 8" />
+                    <line x1="12" y1="3" x2="12" y2="15" />
+                  </svg>
+                  Upload from computer
+                </nile-button>
+                ${this.uploadedFileName
+                ? html `<span class="upload-filename" title=${this.uploadedFileName}
+                      >${this.uploadedFileName}</span
+                    >`
+                : null}
+              </div>
+              <input
+                class="hidden-file"
+                type="file"
+                accept="image/*"
+                @change=${this.onFileChange}
+              />
+            `
+            : null}
+
+        ${this.errorMessage
+            ? html `<span class="error" part="error">${this.errorMessage}</span>`
+            : null}
+
+        <nile-input
+          label="Alt text"
+          placeholder="Describe the image"
+          .value=${this.altValue}
+          @nile-input=${this.onAlt}
+        ></nile-input>
+
+        <nile-input
+          label="Caption"
+          placeholder="Add a caption (optional)"
+          .value=${this.captionValue}
+          @nile-input=${this.onCaption}
+        ></nile-input>
+
+        <div class="actions">
+          ${this.editing
+            ? html `<nile-button
+                  variant="destructive"
+                  @click=${() => this.emit('wysiwyg-image-remove')}
+                  >Remove</nile-button
+                >
+                <span class="spacer"></span>`
+            : null}
+          <nile-button variant="primary" @click=${() => this.handleSubmit()}
+            >${this.editing ? 'Save' : 'Insert'}</nile-button
+          >
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygImagePanel.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileWysiwygImagePanel.prototype, "editing", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'upload-from-computer' })
+], NileWysiwygImagePanel.prototype, "uploadFromComputer", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-file-size' })
+], NileWysiwygImagePanel.prototype, "maxFileSize", void 0);
+__decorate([
+    state()
+], NileWysiwygImagePanel.prototype, "srcValue", void 0);
+__decorate([
+    state()
+], NileWysiwygImagePanel.prototype, "altValue", void 0);
+__decorate([
+    state()
+], NileWysiwygImagePanel.prototype, "captionValue", void 0);
+__decorate([
+    state()
+], NileWysiwygImagePanel.prototype, "uploadedFileName", void 0);
+__decorate([
+    state()
+], NileWysiwygImagePanel.prototype, "errorMessage", void 0);
+NileWysiwygImagePanel = __decorate([
+    customElement('nile-wysiwyg-image-panel')
+], NileWysiwygImagePanel);
+export { NileWysiwygImagePanel };
+//# sourceMappingURL=image-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/image-panel.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport '../../nile-input/index';\nimport '../../nile-button/index';\n\n/**\n * Floating image insert/edit panel, matching nile-rich-text-editor's image\n * dialog: URL + alt + caption (nile-input) and an Insert action. When\n * `upload-from-computer` is set it also offers an \"or / Upload from computer\"\n * button (with max-size validation), matching the RTE's `uploadfromcomputer`\n * flag. An edit mode pre-fills the fields and adds Remove.\n *\n * The host positions it and listens for:\n *  - `wysiwyg-image-apply`  detail: { src, alt, caption }         (insert / edit)\n *  - `wysiwyg-image-file`   detail: { file, alt, caption }        (upload)\n *  - `wysiwyg-image-remove`                                       (delete active image)\n *  - `wysiwyg-image-cancel`                                       (Escape)\n */\n@customElement('nile-wysiwyg-image-panel')\nexport class NileWysiwygImagePanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** True when editing an already-inserted image (shows Remove, \"Save\"). */\n  @property({ type: Boolean }) editing = false;\n\n  /** Shows the \"Upload from computer\" button below the URL field. */\n  @property({ type: Boolean, attribute: 'upload-from-computer' })\n  uploadFromComputer = false;\n\n  /** Maximum allowed upload size in bytes (default 2 MB). */\n  @property({ type: Number, attribute: 'max-file-size' }) maxFileSize = 2 * 1024 * 1024;\n\n  @state() private srcValue = '';\n  @state() private altValue = '';\n  @state() private captionValue = '';\n  @state() private uploadedFileName = '';\n  @state() private errorMessage = '';\n\n  /** File staged by \"Upload from computer\", applied on Insert. */\n  private stagedFile: File | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .image-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n          min-width: 340px;\n          max-width: 420px;\n          padding: 12px;\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: 0 4px 16px rgba(0, 0, 0, 0.08);\n          font-size: 13px;\n        }\n\n        nile-input {\n          width: 100%;\n        }\n\n        .divider {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          font-size: 12px;\n        }\n\n        .divider::before,\n        .divider::after {\n          content: '';\n          flex: 1;\n          height: 1px;\n          background: var(--nile-colors-neutral-300, #e4e7ec);\n        }\n\n        .upload-row {\n          display: flex;\n          flex-direction: column;\n          align-items: stretch;\n          gap: 6px;\n        }\n\n        .upload-btn {\n          width: 100%;\n        }\n\n        /* Center the icon + label within the full-width upload button. */\n        .upload-btn::part(base) {\n          width: 100%;\n          justify-content: center;\n        }\n\n        .upload-filename {\n          color: var(--nile-colors-neutral-600, #475467);\n          font-size: 12px;\n          text-align: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        .hidden-file {\n          display: none;\n        }\n\n        .error {\n          color: var(--nile-colors-danger-600, #d92d20);\n          font-size: 12px;\n        }\n\n        .actions {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: 8px;\n          width: 100%;\n        }\n\n        .actions .spacer {\n          flex: 1;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => {\n      const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement | null;\n      input?.focus();\n    });\n  }\n\n  /** Clears every field and returns to insert (non-editing) mode. */\n  public reset(): void {\n    this.editing = false;\n    this.srcValue = '';\n    this.altValue = '';\n    this.captionValue = '';\n    this.uploadedFileName = '';\n    this.errorMessage = '';\n    this.stagedFile = null;\n  }\n\n  /** Pre-fills the panel for editing an existing image. */\n  public prefill(data: { src?: string; alt?: string; caption?: string }): void {\n    this.editing = true;\n    this.srcValue = data.src ?? '';\n    this.altValue = data.alt ?? '';\n    this.captionValue = data.caption ?? '';\n    this.uploadedFileName = '';\n    this.errorMessage = '';\n    this.stagedFile = null;\n  }\n\n  private onSrc(event: CustomEvent): void {\n    this.srcValue = (event.detail?.value ?? '') as string;\n    if (this.srcValue && this.stagedFile) {\n      this.stagedFile = null;\n      this.uploadedFileName = '';\n    }\n    this.errorMessage = '';\n  }\n\n  private onAlt(event: CustomEvent): void {\n    this.altValue = (event.detail?.value ?? '') as string;\n  }\n\n  private onCaption(event: CustomEvent): void {\n    this.captionValue = (event.detail?.value ?? '') as string;\n  }\n\n  private triggerFilePicker(): void {\n    const input = this.shadowRoot?.querySelector('.hidden-file') as HTMLInputElement | null;\n    input?.click();\n  }\n\n  private onFileChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    const file = input.files?.[0];\n    if (!file) return;\n    if (!file.type.startsWith('image/')) {\n      this.errorMessage = 'Please choose an image file.';\n      input.value = '';\n      return;\n    }\n    if (file.size > this.maxFileSize) {\n      const mb = Math.round((this.maxFileSize / (1024 * 1024)) * 10) / 10;\n      this.errorMessage = `Image must be under ${mb} MB.`;\n      input.value = '';\n      return;\n    }\n    this.stagedFile = file;\n    this.uploadedFileName = file.name;\n    this.srcValue = '';\n    this.errorMessage = '';\n    input.value = '';\n  }\n\n  private handleSubmit(): void {\n    const alt = this.altValue.trim();\n    const caption = this.captionValue.trim();\n    if (this.stagedFile) {\n      this.emit('wysiwyg-image-file', { file: this.stagedFile, alt, caption });\n      return;\n    }\n    const src = this.srcValue.trim();\n    if (!src) {\n      this.errorMessage = this.uploadFromComputer\n        ? 'Add an image URL or upload a file.'\n        : 'Add an image URL.';\n      return;\n    }\n    this.emit('wysiwyg-image-apply', { src, alt, caption });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-image-cancel');\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.handleSubmit();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"image-panel\" part=\"image-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"Image URL\"\n          placeholder=\"Paste image link here\"\n          .value=${this.srcValue}\n          @nile-input=${this.onSrc}\n        ></nile-input>\n\n        ${this.uploadFromComputer\n          ? html`\n              <div class=\"divider\">or</div>\n              <div class=\"upload-row\">\n                <nile-button\n                  class=\"upload-btn\"\n                  variant=\"secondary\"\n                  @click=${this.triggerFilePicker}\n                >\n                  <svg\n                    slot=\"prefix\"\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" />\n                    <polyline points=\"17 8 12 3 7 8\" />\n                    <line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\" />\n                  </svg>\n                  Upload from computer\n                </nile-button>\n                ${this.uploadedFileName\n                  ? html`<span class=\"upload-filename\" title=${this.uploadedFileName}\n                      >${this.uploadedFileName}</span\n                    >`\n                  : null}\n              </div>\n              <input\n                class=\"hidden-file\"\n                type=\"file\"\n                accept=\"image/*\"\n                @change=${this.onFileChange}\n              />\n            `\n          : null}\n\n        ${this.errorMessage\n          ? html`<span class=\"error\" part=\"error\">${this.errorMessage}</span>`\n          : null}\n\n        <nile-input\n          label=\"Alt text\"\n          placeholder=\"Describe the image\"\n          .value=${this.altValue}\n          @nile-input=${this.onAlt}\n        ></nile-input>\n\n        <nile-input\n          label=\"Caption\"\n          placeholder=\"Add a caption (optional)\"\n          .value=${this.captionValue}\n          @nile-input=${this.onCaption}\n        ></nile-input>\n\n        <div class=\"actions\">\n          ${this.editing\n            ? html`<nile-button\n                  variant=\"destructive\"\n                  @click=${() => this.emit('wysiwyg-image-remove')}\n                  >Remove</nile-button\n                >\n                <span class=\"spacer\"></span>`\n            : null}\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >${this.editing ? 'Save' : 'Insert'}</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-image-panel': NileWysiwygImagePanel;\n  }\n}\n"]}

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

@@ -0,0 +1,25 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+export interface InsertMenuItem {
+    label: string;
+    description?: string;
+}
+/**
+ * Generic list popover for "pick one and insert" toolbar actions — used by the
+ * template and merge-field pickers. Emits `wysiwyg-insert-select` { index } and
+ * `wysiwyg-insert-cancel`. Never takes focus, so the editor selection survives.
+ */
+export declare class NileWysiwygInsertMenu extends NileElement {
+    open: boolean;
+    heading: string;
+    emptyText: string;
+    items: InsertMenuItem[];
+    static get styles(): CSSResultArray;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-insert-menu': NileWysiwygInsertMenu;
+    }
+}

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

@@ -0,0 +1,142 @@
+import { __decorate } from "tslib";
+import { html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+/**
+ * Generic list popover for "pick one and insert" toolbar actions — used by the
+ * template and merge-field pickers. Emits `wysiwyg-insert-select` { index } and
+ * `wysiwyg-insert-cancel`. Never takes focus, so the editor selection survives.
+ */
+let NileWysiwygInsertMenu = class NileWysiwygInsertMenu extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.heading = '';
+        this.emptyText = 'Nothing configured.';
+        this.items = [];
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          z-index: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .panel {
+          width: 260px;
+          max-height: 300px;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+          padding: 6px;
+          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));
+        }
+
+        .heading {
+          font-size: 11px;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.04em;
+          color: var(--nile-colors-neutral-600, #667085);
+          padding: 4px 8px;
+        }
+
+        .item {
+          display: block;
+          width: 100%;
+          text-align: left;
+          font: inherit;
+          padding: 6px 8px;
+          border: none;
+          border-radius: 6px;
+          background: transparent;
+          cursor: pointer;
+          color: var(--nile-colors-dark-900, #101828);
+        }
+
+        .item:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        .item .label {
+          font-size: 13px;
+        }
+
+        .item .desc {
+          font-size: 11px;
+          color: var(--nile-colors-neutral-600, #667085);
+          margin-top: 1px;
+        }
+
+        .empty {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-600, #667085);
+          padding: 8px;
+        }
+      `,
+        ];
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-insert-cancel');
+        }
+    }
+    render() {
+        return html `
+      <div
+        class="panel"
+        part="insert-menu"
+        role="menu"
+        @keydown=${this.handleKeydown}
+        @mousedown=${(e) => e.preventDefault()}
+      >
+        ${this.heading ? html `<div class="heading">${this.heading}</div>` : nothing}
+        ${this.items.length === 0
+            ? html `<div class="empty">${this.emptyText}</div>`
+            : this.items.map((item, index) => html `
+                <button
+                  type="button"
+                  class="item"
+                  role="menuitem"
+                  @click=${() => this.emit('wysiwyg-insert-select', { index })}
+                >
+                  <div class="label">${item.label}</div>
+                  ${item.description
+                ? html `<div class="desc">${item.description}</div>`
+                : nothing}
+                </button>
+              `)}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygInsertMenu.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], NileWysiwygInsertMenu.prototype, "heading", void 0);
+__decorate([
+    property({ type: String, attribute: 'empty-text' })
+], NileWysiwygInsertMenu.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygInsertMenu.prototype, "items", void 0);
+NileWysiwygInsertMenu = __decorate([
+    customElement('nile-wysiwyg-insert-menu')
+], NileWysiwygInsertMenu);
+export { NileWysiwygInsertMenu };
+//# sourceMappingURL=insert-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"insert-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/insert-menu.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,OAAO,EAAE,MAAM,KAAK,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,6BAA6B,CAAC;AAOtD;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACuC,SAAI,GAAG,KAAK,CAAC;QAE7B,YAAO,GAAG,EAAE,CAAC;QAEY,cAAS,GAAG,qBAAqB,CAAC;QAEvD,UAAK,GAAqB,EAAE,CAAC;IAiH/D,CAAC;IA/GQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoEF;SACF,CAAC;IACJ,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,uBAAuB,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;mBAKI,IAAI,CAAC,aAAa;qBAChB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;;UAE3C,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,IAAI,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,OAAO;UACzE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC;YACvB,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,SAAS,QAAQ;YAClD,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CACZ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;2BAKR,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,EAAE,EAAE,KAAK,EAAE,CAAC;;uCAEvC,IAAI,CAAC,KAAK;oBAC7B,IAAI,CAAC,WAAW;gBAChB,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,WAAW,QAAQ;gBACnD,CAAC,CAAC,OAAO;;eAEd,CACF;;KAER,CAAC;IACJ,CAAC;CACF,CAAA;AAvH6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAc;AAE7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDAAc;AAEY;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;wDAAmC;AAEvD;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDAA8B;AAPlD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAwHjC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\nexport interface InsertMenuItem {\n  label: string;\n  description?: string;\n}\n\n/**\n * Generic list popover for \"pick one and insert\" toolbar actions — used by the\n * template and merge-field pickers. Emits `wysiwyg-insert-select` { index } and\n * `wysiwyg-insert-cancel`. Never takes focus, so the editor selection survives.\n */\n@customElement('nile-wysiwyg-insert-menu')\nexport class NileWysiwygInsertMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: String }) heading = '';\n\n  @property({ type: String, attribute: 'empty-text' }) emptyText = 'Nothing configured.';\n\n  @property({ attribute: false }) items: InsertMenuItem[] = [];\n\n  public static get styles(): CSSResultArray {\n    return [\n      css`\n        :host {\n          font-family: var(\n            --nile-font-family-sans-serif,\n            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n          );\n          position: absolute;\n          z-index: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .panel {\n          width: 260px;\n          max-height: 300px;\n          overflow-y: auto;\n          overscroll-behavior: contain;\n          padding: 6px;\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        .heading {\n          font-size: 11px;\n          font-weight: 600;\n          text-transform: uppercase;\n          letter-spacing: 0.04em;\n          color: var(--nile-colors-neutral-600, #667085);\n          padding: 4px 8px;\n        }\n\n        .item {\n          display: block;\n          width: 100%;\n          text-align: left;\n          font: inherit;\n          padding: 6px 8px;\n          border: none;\n          border-radius: 6px;\n          background: transparent;\n          cursor: pointer;\n          color: var(--nile-colors-dark-900, #101828);\n        }\n\n        .item:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        .item .label {\n          font-size: 13px;\n        }\n\n        .item .desc {\n          font-size: 11px;\n          color: var(--nile-colors-neutral-600, #667085);\n          margin-top: 1px;\n        }\n\n        .empty {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-600, #667085);\n          padding: 8px;\n        }\n      `,\n    ];\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-insert-cancel');\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div\n        class=\"panel\"\n        part=\"insert-menu\"\n        role=\"menu\"\n        @keydown=${this.handleKeydown}\n        @mousedown=${(e: Event) => e.preventDefault()}\n      >\n        ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n        ${this.items.length === 0\n          ? html`<div class=\"empty\">${this.emptyText}</div>`\n          : this.items.map(\n              (item, index) => html`\n                <button\n                  type=\"button\"\n                  class=\"item\"\n                  role=\"menuitem\"\n                  @click=${() => this.emit('wysiwyg-insert-select', { index })}\n                >\n                  <div class=\"label\">${item.label}</div>\n                  ${item.description\n                    ? html`<div class=\"desc\">${item.description}</div>`\n                    : nothing}\n                </button>\n              `\n            )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-insert-menu': NileWysiwygInsertMenu;\n  }\n}\n"]}

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

@@ -0,0 +1,30 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+/**
+ * Floating link create/edit panel. The host positions it absolutely inside
+ * the editor chrome and listens for:
+ *  - `wysiwyg-link-apply`  detail: { href, text }
+ *  - `wysiwyg-link-remove`
+ *  - `wysiwyg-link-cancel`
+ */
+export declare class NileWysiwygLinkEditor extends NileElement {
+    open: boolean;
+    href: string;
+    text: string;
+    /** Show the text field (only when creating a link from a cursor). */
+    allowText: boolean;
+    /** Show the remove button (when editing an existing link). */
+    canRemove: boolean;
+    hrefInput?: HTMLInputElement;
+    static get styles(): CSSResultArray;
+    /** Focuses the URL field; called by the host after opening. */
+    focusInput(): void;
+    private handleSubmit;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-link-editor': NileWysiwygLinkEditor;
+    }
+}