@aquera/nile-elements 1.9.6 → 1.9.7

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

@@ -0,0 +1,107 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { CODE_LANGUAGES } from '../engine/plugins/code-highlight';
+/**
+ * Compact floating language picker shown while the cursor is inside a code
+ * block. Selection dispatches `wysiwyg-command` with setCodeBlockLanguage.
+ */
+let NileWysiwygCodeMenu = class NileWysiwygCodeMenu extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        /** Current language attr ('' = auto, null treated as ''). */
+        this.language = 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: 15;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .menu {
+          display: inline-flex;
+          align-items: center;
+          gap: 6px;
+          padding: 4px 4px 4px 10px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          background: var(--nile-colors-white-base, #ffffff);
+          box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
+        }
+
+        .label {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          white-space: nowrap;
+        }
+
+        select {
+          font: inherit;
+          font-size: 12px;
+          height: 24px;
+          padding: 0 4px;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          color: var(--nile-colors-neutral-700, #344054);
+          cursor: pointer;
+          outline: none;
+        }
+
+        select:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+      `,
+        ];
+    }
+    render() {
+        const value = this.language ?? '';
+        return html `
+      <span class="menu" part="code-language" @mousedown=${(e) => e.stopPropagation()}>
+        <span class="label">Language</span>
+        <select
+          aria-label="Code block language"
+          title="Syntax highlighting language for this code block"
+          .value=${value}
+          @change=${(e) => {
+            const language = e.target.value;
+            this.emit('wysiwyg-command', {
+                name: 'setCodeBlockLanguage',
+                attrs: { language: language || null },
+            });
+        }}
+        >
+          ${CODE_LANGUAGES.map(lang => html `
+              <option value=${lang.value} ?selected=${lang.value === value}>
+                ${lang.label}
+              </option>
+            `)}
+        </select>
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygCodeMenu.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], NileWysiwygCodeMenu.prototype, "language", void 0);
+NileWysiwygCodeMenu = __decorate([
+    customElement('nile-wysiwyg-code-menu')
+], NileWysiwygCodeMenu);
+export { NileWysiwygCodeMenu };
+//# sourceMappingURL=code-block-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-block-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/code-block-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,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE;;;GAGG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACuC,SAAI,GAAG,KAAK,CAAC;QAEzD,6DAA6D;QACjC,aAAQ,GAAkB,IAAI,CAAC;IAoF7D,CAAC;IAlFQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgDF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC;QAClC,OAAO,IAAI,CAAA;2DAC4C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;;;;;mBAKzE,KAAK;oBACJ,CAAC,CAAQ,EAAE,EAAE;YACrB,MAAM,QAAQ,GAAI,CAAC,CAAC,MAA4B,CAAC,KAAK,CAAC;YACvD,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;gBAC3B,IAAI,EAAE,sBAAsB;gBAC5B,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAAE;aACtC,CAAC,CAAC;QACL,CAAC;;YAEC,cAAc,CAAC,GAAG,CAClB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;8BACM,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,KAAK,KAAK,KAAK;kBACxD,IAAI,CAAC,KAAK;;aAEf,CACF;;;KAGN,CAAC;IACJ,CAAC;CACF,CAAA;AAvF6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAc;AAG7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAgC;AAJhD,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CAwF/B","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { CODE_LANGUAGES } from '../engine/plugins/code-highlight';\n\n/**\n * Compact floating language picker shown while the cursor is inside a code\n * block. Selection dispatches `wysiwyg-command` with setCodeBlockLanguage.\n */\n@customElement('nile-wysiwyg-code-menu')\nexport class NileWysiwygCodeMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Current language attr ('' = auto, null treated as ''). */\n  @property({ type: String }) language: string | 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: 15;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .menu {\n          display: inline-flex;\n          align-items: center;\n          gap: 6px;\n          padding: 4px 4px 4px 10px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          background: var(--nile-colors-white-base, #ffffff);\n          box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);\n        }\n\n        .label {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          white-space: nowrap;\n        }\n\n        select {\n          font: inherit;\n          font-size: 12px;\n          height: 24px;\n          padding: 0 4px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n          cursor: pointer;\n          outline: none;\n        }\n\n        select:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    const value = this.language ?? '';\n    return html`\n      <span class=\"menu\" part=\"code-language\" @mousedown=${(e: Event) => e.stopPropagation()}>\n        <span class=\"label\">Language</span>\n        <select\n          aria-label=\"Code block language\"\n          title=\"Syntax highlighting language for this code block\"\n          .value=${value}\n          @change=${(e: Event) => {\n            const language = (e.target as HTMLSelectElement).value;\n            this.emit('wysiwyg-command', {\n              name: 'setCodeBlockLanguage',\n              attrs: { language: language || null },\n            });\n          }}\n        >\n          ${CODE_LANGUAGES.map(\n            lang => html`\n              <option value=${lang.value} ?selected=${lang.value === value}>\n                ${lang.label}\n              </option>\n            `\n          )}\n        </select>\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-code-menu': NileWysiwygCodeMenu;\n  }\n}\n"]}

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

@@ -0,0 +1,19 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+import type { ToolbarState } from '../engine/selection-state';
+/**
+ * Compact floating bar shown while a video embed is selected — mirrors the
+ * image menu (align left/center/right, delete). The host positions it;
+ * operations bubble up as `wysiwyg-command` events.
+ */
+export declare class NileWysiwygEmbedMenu extends NileElement {
+    open: boolean;
+    toolbarState?: ToolbarState;
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-embed-menu': NileWysiwygEmbedMenu;
+    }
+}

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

@@ -0,0 +1,123 @@
+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: 'setEmbedAlign',
+        attrs: { align: 'left' },
+        active: s => s.embedAlign === 'left' || s.embedAlign === null,
+    },
+    {
+        label: 'Align center',
+        icon: 'format_align_middle',
+        command: 'setEmbedAlign',
+        attrs: { align: 'center' },
+        active: s => s.embedAlign === 'center',
+    },
+    {
+        label: 'Align right',
+        icon: 'format_align_right',
+        command: 'setEmbedAlign',
+        attrs: { align: 'right' },
+        active: s => s.embedAlign === 'right',
+    },
+    { label: 'Delete video', icon: 'ng-trash-01', command: 'deleteEmbed' },
+];
+/**
+ * Compact floating bar shown while a video embed is selected — mirrors the
+ * image menu (align left/center/right, delete). The host positions it;
+ * operations bubble up as `wysiwyg-command` events.
+ */
+let NileWysiwygEmbedMenu = class NileWysiwygEmbedMenu 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="embed-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 })
+], NileWysiwygEmbedMenu.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygEmbedMenu.prototype, "toolbarState", void 0);
+NileWysiwygEmbedMenu = __decorate([
+    customElement('nile-wysiwyg-embed-menu')
+], NileWysiwygEmbedMenu);
+export { NileWysiwygEmbedMenu };
+//# sourceMappingURL=embed-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"embed-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-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;AAYnD,MAAM,GAAG,GAAc;IACrB;QACE,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,mBAAmB;QACzB,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,MAAM,IAAI,CAAC,CAAC,UAAU,KAAK,IAAI;KAC9D;IACD;QACE,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,qBAAqB;QAC3B,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,QAAQ;KACvC;IACD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,oBAAoB;QAC1B,OAAO,EAAE,eAAe;QACxB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;QACzB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,KAAK,OAAO;KACtC;IACD,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE;CACvE,CAAC;AAEF;;;;GAIG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IA+E3D,CAAC;IA3EQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiDF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,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;6BACN,KAAK,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;uBACnD,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC;;gBAEhF,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI;;WAEjD,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AA/E6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0DAA6B;AAHjD,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAgFhC","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 EmbedOp {\n  label: string;\n  icon?: string;\n  text?: string;\n  command: string;\n  attrs?: Record<string, unknown>;\n  active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: EmbedOp[] = [\n  {\n    label: 'Align left',\n    icon: 'format_align_left',\n    command: 'setEmbedAlign',\n    attrs: { align: 'left' },\n    active: s => s.embedAlign === 'left' || s.embedAlign === null,\n  },\n  {\n    label: 'Align center',\n    icon: 'format_align_middle',\n    command: 'setEmbedAlign',\n    attrs: { align: 'center' },\n    active: s => s.embedAlign === 'center',\n  },\n  {\n    label: 'Align right',\n    icon: 'format_align_right',\n    command: 'setEmbedAlign',\n    attrs: { align: 'right' },\n    active: s => s.embedAlign === 'right',\n  },\n  { label: 'Delete video', icon: 'ng-trash-01', command: 'deleteEmbed' },\n];\n\n/**\n * Compact floating bar shown while a video embed is selected — mirrors the\n * image menu (align left/center/right, delete). The host positions it;\n * operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-embed-menu')\nexport class NileWysiwygEmbedMenu 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=\"embed-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-embed-menu': NileWysiwygEmbedMenu;\n  }\n}\n"]}

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

@@ -0,0 +1,27 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+import '../../nile-input/index';
+import '../../nile-button/index';
+/**
+ * Floating embed-insert panel: paste a YouTube/Vimeo/Loom link. Styled to
+ * match the image panel (nile-input + nile-button). Emits
+ * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.
+ */
+export declare class NileWysiwygEmbedPanel extends NileElement {
+    open: boolean;
+    private urlValue;
+    private error;
+    static get styles(): CSSResultArray;
+    focusInput(): void;
+    /** Clears the field. */
+    reset(): void;
+    private onUrl;
+    private handleSubmit;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;
+    }
+}

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

@@ -0,0 +1,146 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { toEmbedUrl } from '../engine/plugins/embeds';
+import '../../nile-input/index';
+import '../../nile-button/index';
+/**
+ * Floating embed-insert panel: paste a YouTube/Vimeo/Loom link. Styled to
+ * match the image panel (nile-input + nile-button). Emits
+ * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.
+ */
+let NileWysiwygEmbedPanel = class NileWysiwygEmbedPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.urlValue = '';
+        this.error = '';
+    }
+    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;
+        }
+
+        .embed-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%;
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .error {
+          font-size: 12px;
+          color: var(--nile-colors-danger-600, #d92d20);
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+        }
+      `,
+        ];
+    }
+    focusInput() {
+        this.updateComplete.then(() => {
+            const input = this.shadowRoot?.querySelector('nile-input');
+            input?.focus();
+        });
+    }
+    /** Clears the field. */
+    reset() {
+        this.urlValue = '';
+        this.error = '';
+    }
+    onUrl(event) {
+        this.urlValue = (event.detail?.value ?? '');
+        this.error = '';
+    }
+    handleSubmit() {
+        const target = toEmbedUrl(this.urlValue.trim());
+        if (!target) {
+            this.error = 'Only YouTube, Vimeo, and Loom links are supported.';
+            return;
+        }
+        this.error = '';
+        this.emit('wysiwyg-embed-apply', target);
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-embed-cancel');
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleSubmit();
+        }
+    }
+    render() {
+        return html `
+      <div class="embed-panel" part="embed-panel" @keydown=${this.handleKeydown}>
+        <nile-input
+          label="Video URL"
+          placeholder="https://www.youtube.com/watch?v=…"
+          .value=${this.urlValue}
+          @nile-input=${this.onUrl}
+        ></nile-input>
+
+        ${this.error
+            ? html `<span class="error" part="error">${this.error}</span>`
+            : html `<span class="hint">YouTube, Vimeo, or Loom</span>`}
+
+        <div class="actions">
+          <nile-button variant="primary" @click=${() => this.handleSubmit()}
+            >Embed</nile-button
+          >
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygEmbedPanel.prototype, "open", void 0);
+__decorate([
+    state()
+], NileWysiwygEmbedPanel.prototype, "urlValue", void 0);
+__decorate([
+    state()
+], NileWysiwygEmbedPanel.prototype, "error", void 0);
+NileWysiwygEmbedPanel = __decorate([
+    customElement('nile-wysiwyg-embed-panel')
+], NileWysiwygEmbedPanel);
+export { NileWysiwygEmbedPanel };
+//# sourceMappingURL=embed-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"embed-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/embed-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 { toEmbedUrl } from '../engine/plugins/embeds';\nimport '../../nile-input/index';\nimport '../../nile-button/index';\n\n/**\n * Floating embed-insert panel: paste a YouTube/Vimeo/Loom link. Styled to\n * match the image panel (nile-input + nile-button). Emits\n * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.\n */\n@customElement('nile-wysiwyg-embed-panel')\nexport class NileWysiwygEmbedPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private urlValue = '';\n  @state() private error = '';\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        .embed-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        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        .error {\n          font-size: 12px;\n          color: var(--nile-colors-danger-600, #d92d20);\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    ];\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 the field. */\n  public reset(): void {\n    this.urlValue = '';\n    this.error = '';\n  }\n\n  private onUrl(event: CustomEvent): void {\n    this.urlValue = (event.detail?.value ?? '') as string;\n    this.error = '';\n  }\n\n  private handleSubmit(): void {\n    const target = toEmbedUrl(this.urlValue.trim());\n    if (!target) {\n      this.error = 'Only YouTube, Vimeo, and Loom links are supported.';\n      return;\n    }\n    this.error = '';\n    this.emit('wysiwyg-embed-apply', target);\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-embed-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=\"embed-panel\" part=\"embed-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"Video URL\"\n          placeholder=\"https://www.youtube.com/watch?v=…\"\n          .value=${this.urlValue}\n          @nile-input=${this.onUrl}\n        ></nile-input>\n\n        ${this.error\n          ? html`<span class=\"error\" part=\"error\">${this.error}</span>`\n          : html`<span class=\"hint\">YouTube, Vimeo, or Loom</span>`}\n\n        <div class=\"actions\">\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >Embed</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-embed-panel': NileWysiwygEmbedPanel;\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+/**
+ * Emoji picker panel (the 😊 toolbar item). Shares the emoji set with the
+ * ":" autocomplete; the search box filters by name. Emits
+ * `wysiwyg-emoji-select` detail: { char } and `wysiwyg-emoji-cancel`.
+ */
+export declare class NileWysiwygEmojiPicker extends NileElement {
+    open: boolean;
+    private filter;
+    searchInput?: HTMLInputElement;
+    static get styles(): CSSResultArray;
+    focusInput(): void;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-emoji-picker': NileWysiwygEmojiPicker;
+    }
+}

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

@@ -0,0 +1,154 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import { EMOJI } from '../emoji';
+/**
+ * Emoji picker panel (the 😊 toolbar item). Shares the emoji set with the
+ * ":" autocomplete; the search box filters by name. Emits
+ * `wysiwyg-emoji-select` detail: { char } and `wysiwyg-emoji-cancel`.
+ */
+let NileWysiwygEmojiPicker = class NileWysiwygEmojiPicker extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.filter = '';
+    }
+    static get styles() {
+        return [
+            css `
+        :host {
+          font-family: var(
+            --nile-font-family-sans-serif,
+            var(--ng-font-family-body, system-ui, -apple-system, sans-serif)
+          );
+          position: absolute;
+          z-index: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .panel {
+          width: 316px;
+          padding: 8px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 8px;
+          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
+        }
+
+        input {
+          font: inherit;
+          font-size: 13px;
+          width: 100%;
+          box-sizing: border-box;
+          margin-bottom: 6px;
+          padding: 5px 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));
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(9, 1fr);
+          gap: 2px;
+          max-height: 200px;
+          overflow-y: auto;
+          overscroll-behavior: contain;
+        }
+
+        .emoji {
+          font: inherit;
+          font-size: 18px;
+          height: 30px;
+          padding: 0;
+          border: none;
+          border-radius: 5px;
+          background: transparent;
+          cursor: pointer;
+          line-height: 1;
+        }
+
+        .emoji:hover {
+          background: var(--nile-colors-neutral-100, #f2f4f7);
+        }
+
+        .empty {
+          padding: 12px 4px;
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+          text-align: center;
+        }
+      `,
+        ];
+    }
+    focusInput() {
+        this.filter = '';
+        this.updateComplete.then(() => {
+            if (this.searchInput)
+                this.searchInput.value = '';
+            this.searchInput?.focus();
+        });
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-emoji-cancel');
+        }
+    }
+    render() {
+        const query = this.filter.trim().toLowerCase();
+        const shown = query ? EMOJI.filter(e => e.name.includes(query)) : EMOJI;
+        return html `
+      <div class="panel" part="emoji-picker" @keydown=${this.handleKeydown}>
+        <input
+          class="emoji-picker__search"
+          type="text"
+          placeholder="Search emoji…"
+          aria-label="Search emoji"
+          @input=${(e) => {
+            this.filter = e.target.value;
+        }}
+        />
+        <div class="grid" role="listbox" aria-label="Emoji">
+          ${shown.map(e => html `
+              <button
+                type="button"
+                class="emoji"
+                title=${e.name}
+                @mousedown=${(ev) => ev.preventDefault()}
+                @click=${() => this.emit('wysiwyg-emoji-select', { char: e.char })}
+              >
+                ${e.char}
+              </button>
+            `)}
+          ${shown.length === 0
+            ? html `<div class="empty" style="grid-column: 1 / -1">No emoji found</div>`
+            : ''}
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygEmojiPicker.prototype, "open", void 0);
+__decorate([
+    state()
+], NileWysiwygEmojiPicker.prototype, "filter", void 0);
+__decorate([
+    query('.emoji-picker__search')
+], NileWysiwygEmojiPicker.prototype, "searchInput", void 0);
+NileWysiwygEmojiPicker = __decorate([
+    customElement('nile-wysiwyg-emoji-picker')
+], NileWysiwygEmojiPicker);
+export { NileWysiwygEmojiPicker };
+//# sourceMappingURL=emoji-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"emoji-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/emoji-picker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC;;;;GAIG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QACuC,SAAI,GAAG,KAAK,CAAC;QAExC,WAAM,GAAG,EAAE,CAAC;IAmI/B,CAAC;IA/HQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAuEF;SACF,CAAC;IACJ,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,WAAW;gBAAE,IAAI,CAAC,WAAW,CAAC,KAAK,GAAG,EAAE,CAAC;YAClD,IAAI,CAAC,WAAW,EAAE,KAAK,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,sBAAsB,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAC/C,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACxE,OAAO,IAAI,CAAA;wDACyC,IAAI,CAAC,aAAa;;;;;;mBAMvD,CAAC,CAAQ,EAAE,EAAE;YACpB,IAAI,CAAC,MAAM,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;QACrD,CAAC;;;YAGC,KAAK,CAAC,GAAG,CACT,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;;;;wBAIG,CAAC,CAAC,IAAI;6BACD,CAAC,EAAS,EAAE,EAAE,CAAC,EAAE,CAAC,cAAc,EAAE;yBACtC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,sBAAsB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;;kBAEhE,CAAC,CAAC,IAAI;;aAEX,CACF;YACC,KAAK,CAAC,MAAM,KAAK,CAAC;YAClB,CAAC,CAAC,IAAI,CAAA,qEAAqE;YAC3E,CAAC,CAAC,EAAE;;;KAGX,CAAC;IACJ,CAAC;CACF,CAAA;AArI6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAc;AAExC;IAAhB,KAAK,EAAE;sDAAqB;AAEG;IAA/B,KAAK,CAAC,uBAAuB,CAAC;2DAAgC;AALpD,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,CAsIlC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { EMOJI } from '../emoji';\n\n/**\n * Emoji picker panel (the 😊 toolbar item). Shares the emoji set with the\n * \":\" autocomplete; the search box filters by name. Emits\n * `wysiwyg-emoji-select` detail: { char } and `wysiwyg-emoji-cancel`.\n */\n@customElement('nile-wysiwyg-emoji-picker')\nexport class NileWysiwygEmojiPicker extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private filter = '';\n\n  @query('.emoji-picker__search') searchInput?: 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          z-index: 20;\n          display: none;\n        }\n\n        :host([open]) {\n          display: block;\n        }\n\n        .panel {\n          width: 316px;\n          padding: 8px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 8px;\n          box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n        }\n\n        input {\n          font: inherit;\n          font-size: 13px;\n          width: 100%;\n          box-sizing: border-box;\n          margin-bottom: 6px;\n          padding: 5px 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        .grid {\n          display: grid;\n          grid-template-columns: repeat(9, 1fr);\n          gap: 2px;\n          max-height: 200px;\n          overflow-y: auto;\n          overscroll-behavior: contain;\n        }\n\n        .emoji {\n          font: inherit;\n          font-size: 18px;\n          height: 30px;\n          padding: 0;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          line-height: 1;\n        }\n\n        .emoji:hover {\n          background: var(--nile-colors-neutral-100, #f2f4f7);\n        }\n\n        .empty {\n          padding: 12px 4px;\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n          text-align: center;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.filter = '';\n    this.updateComplete.then(() => {\n      if (this.searchInput) this.searchInput.value = '';\n      this.searchInput?.focus();\n    });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-emoji-cancel');\n    }\n  }\n\n  public render(): TemplateResult {\n    const query = this.filter.trim().toLowerCase();\n    const shown = query ? EMOJI.filter(e => e.name.includes(query)) : EMOJI;\n    return html`\n      <div class=\"panel\" part=\"emoji-picker\" @keydown=${this.handleKeydown}>\n        <input\n          class=\"emoji-picker__search\"\n          type=\"text\"\n          placeholder=\"Search emoji…\"\n          aria-label=\"Search emoji\"\n          @input=${(e: Event) => {\n            this.filter = (e.target as HTMLInputElement).value;\n          }}\n        />\n        <div class=\"grid\" role=\"listbox\" aria-label=\"Emoji\">\n          ${shown.map(\n            e => html`\n              <button\n                type=\"button\"\n                class=\"emoji\"\n                title=${e.name}\n                @mousedown=${(ev: Event) => ev.preventDefault()}\n                @click=${() => this.emit('wysiwyg-emoji-select', { char: e.char })}\n              >\n                ${e.char}\n              </button>\n            `\n          )}\n          ${shown.length === 0\n            ? html`<div class=\"empty\" style=\"grid-column: 1 / -1\">No emoji found</div>`\n            : ''}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-emoji-picker': NileWysiwygEmojiPicker;\n  }\n}\n"]}