@aquera/nile-elements 1.9.7 → 1.9.9

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

@@ -1,8 +1,83 @@
 import { __decorate } from "tslib";
-import { html, css } from 'lit';
+import { html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import NileElement from '../../internal/nile-element';
 import { renderGlyph } from '../../internal/glyph';
+import '../../nile-lite-tooltip/nile-lite-tooltip';
+/**
+ * Registry of controls addressable by `<nile-wysiwyg-bubble-item name="…">`.
+ * Icons/labels mirror the main toolbar so both surfaces look identical.
+ */
+const BUBBLE_ITEMS = {
+    bold: { command: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },
+    italic: { command: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },
+    underline: {
+        command: 'underline',
+        label: 'Underline',
+        icon: 'format_underline',
+        active: s => s.underline,
+    },
+    strike: {
+        command: 'strike',
+        label: 'Strikethrough',
+        icon: 'ng-strikethrough',
+        active: s => s.strike,
+    },
+    code: { command: 'code', label: 'Inline code', icon: 'ng-code', active: s => s.code },
+    subscript: {
+        command: 'subscript',
+        label: 'Subscript',
+        icon: 'ng-subscript',
+        active: s => s.subscript,
+    },
+    superscript: {
+        command: 'superscript',
+        label: 'Superscript',
+        icon: 'ng-superscript',
+        active: s => s.superscript,
+    },
+    link: { command: 'openLink', label: 'Link', icon: 'link_2', active: s => s.linkActive },
+    bulletList: {
+        command: 'bulletList',
+        label: 'Bulleted list',
+        icon: 'format_list_bulleted',
+        active: s => s.inBulletList,
+    },
+    orderedList: {
+        command: 'orderedList',
+        label: 'Numbered list',
+        icon: 'format_list_numbered',
+        active: s => s.inOrderedList,
+    },
+    alignLeft: {
+        command: 'align',
+        label: 'Align left',
+        icon: 'format_align_left',
+        attrs: { align: 'left' },
+        active: s => s.align === 'left',
+    },
+    alignCenter: {
+        command: 'align',
+        label: 'Align center',
+        icon: 'format_align_middle',
+        attrs: { align: 'center' },
+        active: s => s.align === 'center',
+    },
+    alignRight: {
+        command: 'align',
+        label: 'Align right',
+        icon: 'format_align_right',
+        attrs: { align: 'right' },
+        active: s => s.align === 'right',
+    },
+    clearFormatting: {
+        command: 'clearFormatting',
+        label: 'Clear formatting',
+        icon: 'format_clear',
+    },
+};
+/** Built-in default when no `<nile-wysiwyg-bubble-item>` children are authored. */
+const DEFAULT_BUBBLE = ['bold', 'italic', 'underline', 'strike', 'link'];
 /**
  * Balloon toolbar shown over non-empty selections. The host owns positioning
  * (absolute left/top) and visibility; commands bubble up as
@@ -12,29 +87,6 @@ let NileWysiwygBubbleMenu = class NileWysiwygBubbleMenu extends NileElement {
     constructor() {
         super(...arguments);
         this.open = false;
-        /** Same icon set as the main toolbar, so both surfaces look identical. */
-        this.items = [
-            { name: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },
-            { name: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },
-            {
-                name: 'underline',
-                label: 'Underline',
-                icon: 'format_underline',
-                active: s => s.underline,
-            },
-            {
-                name: 'strike',
-                label: 'Strikethrough',
-                icon: 'ng-strikethrough',
-                active: s => s.strike,
-            },
-            {
-                name: 'openLink',
-                label: 'Link',
-                icon: 'link_2',
-                active: s => s.linkActive,
-            },
-        ];
     }
     static get styles() {
         return [
@@ -90,27 +142,65 @@ let NileWysiwygBubbleMenu = class NileWysiwygBubbleMenu extends NileElement {
           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));
         }
+
+        .divider {
+          align-self: stretch;
+          width: 1px;
+          margin: 3px 2px;
+          background: var(--nile-colors-neutral-300, #e4e7ec);
+        }
       `,
         ];
     }
+    /**
+     * True when this instance is an author's declarative `<nile-wysiwyg-bubble-menu>`
+     * container in an editor's light DOM (holding `<nile-wysiwyg-bubble-item>`
+     * children). It renders nothing — the editor reads the items and renders the
+     * real bubble menu in its own shadow DOM. The editor's internal instance
+     * lives in a shadow root, so `closest` never matches it.
+     */
+    get isAuthoringContainer() {
+        return !!this.closest('nile-wysiwyg-editor');
+    }
     render() {
+        if (this.isAuthoringContainer)
+            return html ``;
         const state = this.toolbarState;
+        const entries = this.items && this.items.length
+            ? this.items
+            : DEFAULT_BUBBLE.map(name => ({ name }));
         return html `
       <div class="bubble" part="bubble-menu" @mousedown=${(e) => e.preventDefault()}>
-        ${this.items.map(item => html `
-            <button
-              type="button"
-              title=${item.label}
-              aria-label=${item.label}
-              ?data-active=${state ? item.active(state) : false}
-              @click=${() => this.emit('wysiwyg-command', { name: item.name })}
-            >
-              ${renderGlyph(item.icon, 16)}
-            </button>
-          `)}
+        ${entries.map(entry => this.renderEntry(entry, state))}
       </div>
     `;
     }
+    renderEntry(entry, state) {
+        if (entry.name === '|') {
+            return html `<span class="divider" part="bubble-divider"></span>`;
+        }
+        const base = BUBBLE_ITEMS[entry.name];
+        const label = entry.label || base?.label || entry.name;
+        const icon = entry.icon || base?.icon;
+        // Unknown command with no icon to draw → nothing to render.
+        if (!icon)
+            return nothing;
+        const command = base?.command ?? entry.name;
+        const attrs = base?.attrs;
+        const isActive = base?.active && state ? base.active(state) : false;
+        return html `
+      <nile-lite-tooltip content=${label} placement="top">
+        <button
+          type="button"
+          aria-label=${label}
+          ?data-active=${isActive}
+          @click=${() => this.emit('wysiwyg-command', attrs ? { name: command, attrs } : { name: command })}
+        >
+          ${renderGlyph(icon, 16)}
+        </button>
+      </nile-lite-tooltip>
+    `;
+    }
 };
 __decorate([
     property({ type: Boolean, reflect: true })
@@ -118,6 +208,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], NileWysiwygBubbleMenu.prototype, "toolbarState", void 0);
+__decorate([
+    property({ attribute: false })
+], NileWysiwygBubbleMenu.prototype, "items", void 0);
 NileWysiwygBubbleMenu = __decorate([
     customElement('nile-wysiwyg-bubble-menu')
 ], NileWysiwygBubbleMenu);

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

@@ -1 +1 @@
-{"version":3,"file":"bubble-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/bubble-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;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACuC,SAAI,GAAG,KAAK,CAAC;QA8DzD,0EAA0E;QAClE,UAAK,GAAiB;YAC5B,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;YACzE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;YACjF;gBACE,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE,kBAAkB;gBACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;aACzB;YACD;gBACE,IAAI,EAAE,QAAQ;gBACd,KAAK,EAAE,eAAe;gBACtB,IAAI,EAAE,kBAAkB;gBACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;aACtB;YACD;gBACE,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,MAAM;gBACb,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;aAC1B;SACF,CAAC;IAsBJ,CAAC;IAtGQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAoDF;SACF,CAAC;IACJ,CAAC;IA0BM,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,OAAO,IAAI,CAAA;0DAC2C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAChF,IAAI,CAAC,KAAK,CAAC,GAAG,CACd,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;;sBAGA,IAAI,CAAC,KAAK;2BACL,IAAI,CAAC,KAAK;6BACR,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;uBACxC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;gBAE9D,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,CAAC;;WAE/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AA1G6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2DAA6B;AAHjD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CA2GjC","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';\nimport type { WysiwygCommandDetail } from '../types';\n\ninterface BubbleItem {\n  name: WysiwygCommandDetail['name'];\n  label: string;\n  /** nile-glyph icon name (ng-* names are stroke-drawn). */\n  icon: string;\n  active: (state: ToolbarState) => boolean;\n}\n\n/**\n * Balloon toolbar shown over non-empty selections. The host owns positioning\n * (absolute left/top) and visibility; commands bubble up as\n * `wysiwyg-command` events, same contract as the main toolbar.\n */\n@customElement('nile-wysiwyg-bubble-menu')\nexport class NileWysiwygBubbleMenu 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        .bubble {\n          display: flex;\n          gap: 2px;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid\n            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(\n            --nile-wysiwyg-popover-shadow,\n            0 4px 12px rgba(16, 24, 40, 0.12)\n          );\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          width: 26px;\n          height: 26px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 13px;\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  /** Same icon set as the main toolbar, so both surfaces look identical. */\n  private items: BubbleItem[] = [\n    { name: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },\n    { name: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },\n    {\n      name: 'underline',\n      label: 'Underline',\n      icon: 'format_underline',\n      active: s => s.underline,\n    },\n    {\n      name: 'strike',\n      label: 'Strikethrough',\n      icon: 'ng-strikethrough',\n      active: s => s.strike,\n    },\n    {\n      name: 'openLink',\n      label: 'Link',\n      icon: 'link_2',\n      active: s => s.linkActive,\n    },\n  ];\n\n  public render(): TemplateResult {\n    const state = this.toolbarState;\n    return html`\n      <div class=\"bubble\" part=\"bubble-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${this.items.map(\n          item => html`\n            <button\n              type=\"button\"\n              title=${item.label}\n              aria-label=${item.label}\n              ?data-active=${state ? item.active(state) : false}\n              @click=${() => this.emit('wysiwyg-command', { name: item.name })}\n            >\n              ${renderGlyph(item.icon, 16)}\n            </button>\n          `\n        )}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bubble-menu': NileWysiwygBubbleMenu;\n  }\n}\n"]}
+{"version":3,"file":"bubble-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/bubble-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;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,OAAO,2CAA2C,CAAC;AAcnD;;;GAGG;AACH,MAAM,YAAY,GAA8B;IAC9C,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;IAClF,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE;IAC5F,SAAS,EAAE;QACT,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,kBAAkB;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;KACzB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,QAAQ;QACjB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,kBAAkB;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;KACtB;IACD,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE;IACrF,SAAS,EAAE;QACT,OAAO,EAAE,WAAW;QACpB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,cAAc;QACpB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;KACzB;IACD,WAAW,EAAE;QACX,OAAO,EAAE,aAAa;QACtB,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;KAC3B;IACD,IAAI,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE;IACvF,UAAU,EAAE;QACV,OAAO,EAAE,YAAY;QACrB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;KAC5B;IACD,WAAW,EAAE;QACX,OAAO,EAAE,aAAa;QACtB,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;KAC7B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,MAAM;KAChC;IACD,WAAW,EAAE;QACX,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,qBAAqB;QAC3B,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;QAC1B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ;KAClC;IACD,UAAU,EAAE;QACV,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,oBAAoB;QAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;QACzB,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,OAAO;KACjC;IACD,eAAe,EAAE;QACf,OAAO,EAAE,iBAAiB;QAC1B,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,cAAc;KACrB;CACF,CAAC;AAEF,mFAAmF;AACnF,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;AAEzE;;;;GAIG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAmI3D,CAAC;IAxHQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2DF;SACF,CAAC;IACJ,CAAC;IAED;;;;;;OAMG;IACH,IAAY,oBAAoB;QAC9B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;IAC/C,CAAC;IAEM,MAAM;QACX,IAAI,IAAI,CAAC,oBAAoB;YAAE,OAAO,IAAI,CAAA,EAAE,CAAC;QAE7C,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;QAChC,MAAM,OAAO,GACX,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAC7B,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC7C,OAAO,IAAI,CAAA;0DAC2C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAChF,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;;KAEzD,CAAC;IACJ,CAAC;IAEO,WAAW,CACjB,KAA0B,EAC1B,KAAoB;QAEpB,IAAI,KAAK,CAAC,IAAI,KAAK,GAAG,EAAE,CAAC;YACvB,OAAO,IAAI,CAAA,qDAAqD,CAAC;QACnE,CAAC;QACD,MAAM,IAAI,GAAG,YAAY,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,IAAI,EAAE,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC;QACvD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,IAAI,EAAE,IAAI,CAAC;QACtC,4DAA4D;QAC5D,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC1B,MAAM,OAAO,GAAG,IAAI,EAAE,OAAO,IAAK,KAAK,CAAC,IAAqC,CAAC;QAC9E,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,CAAC;QAC1B,MAAM,QAAQ,GAAG,IAAI,EAAE,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QACpE,OAAO,IAAI,CAAA;mCACoB,KAAK;;;uBAGjB,KAAK;yBACH,QAAQ;mBACd,GAAG,EAAE,CACZ,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;YAElF,WAAW,CAAC,IAAI,EAAE,EAAE,CAAC;;;KAG5B,CAAC;IACJ,CAAC;CACF,CAAA;AAnI6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;2DAA6B;AAO5B;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDAA+B;AAVnD,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAoIjC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray, nothing } 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';\nimport type { WysiwygCommandDetail } from '../types';\nimport type { AuthoredToolbarItem } from '../nile-wysiwyg-toolbar/nile-wysiwyg-toolbar';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\n/** A control the bubble menu knows how to render, keyed by its authored name. */\ninterface BubbleDef {\n  /** The command dispatched on click. */\n  command: WysiwygCommandDetail['name'];\n  label: string;\n  /** nile-glyph icon name (ng-* names are stroke-drawn). */\n  icon: string;\n  /** Static attrs sent with the command (e.g. alignment direction). */\n  attrs?: WysiwygCommandDetail['attrs'];\n  active?: (state: ToolbarState) => boolean;\n}\n\n/**\n * Registry of controls addressable by `<nile-wysiwyg-bubble-item name=\"…\">`.\n * Icons/labels mirror the main toolbar so both surfaces look identical.\n */\nconst BUBBLE_ITEMS: Record<string, BubbleDef> = {\n  bold: { command: 'bold', label: 'Bold', icon: 'format_bold', active: s => s.bold },\n  italic: { command: 'italic', label: 'Italic', icon: 'format_italic', active: s => s.italic },\n  underline: {\n    command: 'underline',\n    label: 'Underline',\n    icon: 'format_underline',\n    active: s => s.underline,\n  },\n  strike: {\n    command: 'strike',\n    label: 'Strikethrough',\n    icon: 'ng-strikethrough',\n    active: s => s.strike,\n  },\n  code: { command: 'code', label: 'Inline code', icon: 'ng-code', active: s => s.code },\n  subscript: {\n    command: 'subscript',\n    label: 'Subscript',\n    icon: 'ng-subscript',\n    active: s => s.subscript,\n  },\n  superscript: {\n    command: 'superscript',\n    label: 'Superscript',\n    icon: 'ng-superscript',\n    active: s => s.superscript,\n  },\n  link: { command: 'openLink', label: 'Link', icon: 'link_2', active: s => s.linkActive },\n  bulletList: {\n    command: 'bulletList',\n    label: 'Bulleted list',\n    icon: 'format_list_bulleted',\n    active: s => s.inBulletList,\n  },\n  orderedList: {\n    command: 'orderedList',\n    label: 'Numbered list',\n    icon: 'format_list_numbered',\n    active: s => s.inOrderedList,\n  },\n  alignLeft: {\n    command: 'align',\n    label: 'Align left',\n    icon: 'format_align_left',\n    attrs: { align: 'left' },\n    active: s => s.align === 'left',\n  },\n  alignCenter: {\n    command: 'align',\n    label: 'Align center',\n    icon: 'format_align_middle',\n    attrs: { align: 'center' },\n    active: s => s.align === 'center',\n  },\n  alignRight: {\n    command: 'align',\n    label: 'Align right',\n    icon: 'format_align_right',\n    attrs: { align: 'right' },\n    active: s => s.align === 'right',\n  },\n  clearFormatting: {\n    command: 'clearFormatting',\n    label: 'Clear formatting',\n    icon: 'format_clear',\n  },\n};\n\n/** Built-in default when no `<nile-wysiwyg-bubble-item>` children are authored. */\nconst DEFAULT_BUBBLE = ['bold', 'italic', 'underline', 'strike', 'link'];\n\n/**\n * Balloon toolbar shown over non-empty selections. The host owns positioning\n * (absolute left/top) and visibility; commands bubble up as\n * `wysiwyg-command` events, same contract as the main toolbar.\n */\n@customElement('nile-wysiwyg-bubble-menu')\nexport class NileWysiwygBubbleMenu extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ attribute: false }) toolbarState?: ToolbarState;\n\n  /**\n   * Structured item list authored in light DOM (from\n   * `<nile-wysiwyg-bubble-item>` children). `'|'` is a separator. Falls back to\n   * {@link DEFAULT_BUBBLE} when empty.\n   */\n  @property({ attribute: false }) items?: AuthoredToolbarItem[];\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        .bubble {\n          display: flex;\n          gap: 2px;\n          padding: 4px;\n          background: var(--nile-wysiwyg-popover-bg, #ffffff);\n          border: 1px solid\n            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));\n          border-radius: var(--nile-wysiwyg-radius, 8px);\n          box-shadow: var(\n            --nile-wysiwyg-popover-shadow,\n            0 4px 12px rgba(16, 24, 40, 0.12)\n          );\n        }\n\n        button {\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          width: 26px;\n          height: 26px;\n          border: none;\n          border-radius: 5px;\n          background: transparent;\n          cursor: pointer;\n          font-size: 13px;\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        .divider {\n          align-self: stretch;\n          width: 1px;\n          margin: 3px 2px;\n          background: var(--nile-colors-neutral-300, #e4e7ec);\n        }\n      `,\n    ];\n  }\n\n  /**\n   * True when this instance is an author's declarative `<nile-wysiwyg-bubble-menu>`\n   * container in an editor's light DOM (holding `<nile-wysiwyg-bubble-item>`\n   * children). It renders nothing — the editor reads the items and renders the\n   * real bubble menu in its own shadow DOM. The editor's internal instance\n   * lives in a shadow root, so `closest` never matches it.\n   */\n  private get isAuthoringContainer(): boolean {\n    return !!this.closest('nile-wysiwyg-editor');\n  }\n\n  public render(): TemplateResult {\n    if (this.isAuthoringContainer) return html``;\n\n    const state = this.toolbarState;\n    const entries: AuthoredToolbarItem[] =\n      this.items && this.items.length\n        ? this.items\n        : DEFAULT_BUBBLE.map(name => ({ name }));\n    return html`\n      <div class=\"bubble\" part=\"bubble-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n        ${entries.map(entry => this.renderEntry(entry, state))}\n      </div>\n    `;\n  }\n\n  private renderEntry(\n    entry: AuthoredToolbarItem,\n    state?: ToolbarState\n  ): TemplateResult | typeof nothing {\n    if (entry.name === '|') {\n      return html`<span class=\"divider\" part=\"bubble-divider\"></span>`;\n    }\n    const base = BUBBLE_ITEMS[entry.name];\n    const label = entry.label || base?.label || entry.name;\n    const icon = entry.icon || base?.icon;\n    // Unknown command with no icon to draw → nothing to render.\n    if (!icon) return nothing;\n    const command = base?.command ?? (entry.name as WysiwygCommandDetail['name']);\n    const attrs = base?.attrs;\n    const isActive = base?.active && state ? base.active(state) : false;\n    return html`\n      <nile-lite-tooltip content=${label} placement=\"top\">\n        <button\n          type=\"button\"\n          aria-label=${label}\n          ?data-active=${isActive}\n          @click=${() =>\n            this.emit('wysiwyg-command', attrs ? { name: command, attrs } : { name: command })}\n        >\n          ${renderGlyph(icon, 16)}\n        </button>\n      </nile-lite-tooltip>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-bubble-menu': NileWysiwygBubbleMenu;\n  }\n}\n"]}

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

@@ -3,7 +3,8 @@ 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
+ * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom
+ * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to
  * match the image panel (nile-input + nile-button). Emits
  * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.
  */

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

@@ -6,7 +6,8 @@ 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
+ * Floating embed-insert panel: paste any https:// link (YouTube/Vimeo/Loom
+ * are auto-formatted; anything else embeds as a sandboxed iframe). Styled to
  * match the image panel (nile-input + nile-button). Emits
  * `wysiwyg-embed-apply` detail: { src, provider } and `wysiwyg-embed-cancel`.
  */
@@ -90,7 +91,7 @@ let NileWysiwygEmbedPanel = class NileWysiwygEmbedPanel extends NileElement {
     handleSubmit() {
         const target = toEmbedUrl(this.urlValue.trim());
         if (!target) {
-            this.error = 'Only YouTube, Vimeo, and Loom links are supported.';
+            this.error = 'Enter a valid https:// URL.';
             return;
         }
         this.error = '';
@@ -119,7 +120,7 @@ let NileWysiwygEmbedPanel = class NileWysiwygEmbedPanel extends NileElement {
 
         ${this.error
             ? html `<span class="error" part="error">${this.error}</span>`
-            : html `<span class="hint">YouTube, Vimeo, or Loom</span>`}
+            : html `<span class="hint">Add any link to it</span>`}
 
         <div class="actions">
           <nile-button variant="primary" @click=${() => this.handleSubmit()}

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

@@ -1 +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"]}
+{"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 any https:// link (YouTube/Vimeo/Loom\n * are auto-formatted; anything else embeds as a sandboxed iframe). 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 = 'Enter a valid https:// URL.';\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\">Add any link to it</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/math-panel.js

@@ -143,9 +143,6 @@ let NileWysiwygMathPanel = class NileWysiwygMathPanel extends NileElement {
           </nile-button-toggle-group>
         </div>
 
-        <span class="hint"
-          >LaTeX is stored as-is; rendering uses your math renderer if configured.</span
-        >
 
         <div class="actions">
           <nile-button variant="primary" @click=${() => this.handleSubmit()}

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

@@ -1 +1 @@
-{"version":3,"file":"math-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/math-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';\nimport '../../nile-button-toggle-group/index';\nimport '../../nile-button-toggle/index';\n\n/**\n * Floating math-insert panel: enter a LaTeX expression. Styled to match the\n * image/embed panels (nile-input + nile-button). Emits `wysiwyg-math-apply`\n * detail: { latex, display } and `wysiwyg-math-cancel`. Rendering of the\n * formula itself is the host's job (via a mathRenderer).\n */\n@customElement('nile-wysiwyg-math-panel')\nexport class NileWysiwygMathPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private latexValue = '';\n  @state() private display: 'inline' | 'block' = 'inline';\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        .math-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        /* Keep the LaTeX field monospaced. */\n        nile-input::part(input) {\n          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n        }\n\n        .display-row {\n          display: flex;\n          align-items: center;\n          gap: 10px;\n        }\n\n        .display-label {\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\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  /** Opens with an optional initial value (editing an existing formula). */\n  public focusInput(initial = ''): void {\n    this.latexValue = initial;\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.latexValue = '';\n    this.display = 'inline';\n  }\n\n  private onLatex(event: CustomEvent): void {\n    this.latexValue = (event.detail?.value ?? '') as string;\n  }\n\n  private handleSubmit(): void {\n    const latex = this.latexValue.trim();\n    if (!latex) {\n      this.emit('wysiwyg-math-cancel');\n      return;\n    }\n    this.emit('wysiwyg-math-apply', { latex, display: this.display });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-math-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=\"math-panel\" part=\"math-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"LaTeX expression\"\n          placeholder=\"e.g. \\\\frac{a}{b} = c^2\"\n          .value=${this.latexValue}\n          @nile-input=${this.onLatex}\n        ></nile-input>\n\n        <div class=\"display-row\">\n          <span class=\"display-label\">Display</span>\n          <nile-button-toggle-group\n            class=\"toggle\"\n            .value=${this.display}\n            @nile-change=${(e: CustomEvent) => {\n              this.display = e.detail.value === 'block' ? 'block' : 'inline';\n            }}\n          >\n            <nile-button-toggle value=\"inline\">Inline</nile-button-toggle>\n            <nile-button-toggle value=\"block\">Block</nile-button-toggle>\n          </nile-button-toggle-group>\n        </div>\n\n        <span class=\"hint\"\n          >LaTeX is stored as-is; rendering uses your math renderer if configured.</span\n        >\n\n        <div class=\"actions\">\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >Insert</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-math-panel': NileWysiwygMathPanel;\n  }\n}\n"]}
+{"version":3,"file":"math-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/math-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';\nimport '../../nile-button-toggle-group/index';\nimport '../../nile-button-toggle/index';\n\n/**\n * Floating math-insert panel: enter a LaTeX expression. Styled to match the\n * image/embed panels (nile-input + nile-button). Emits `wysiwyg-math-apply`\n * detail: { latex, display } and `wysiwyg-math-cancel`. Rendering of the\n * formula itself is the host's job (via a mathRenderer).\n */\n@customElement('nile-wysiwyg-math-panel')\nexport class NileWysiwygMathPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private latexValue = '';\n  @state() private display: 'inline' | 'block' = 'inline';\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        .math-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        /* Keep the LaTeX field monospaced. */\n        nile-input::part(input) {\n          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n        }\n\n        .display-row {\n          display: flex;\n          align-items: center;\n          gap: 10px;\n        }\n\n        .display-label {\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\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  /** Opens with an optional initial value (editing an existing formula). */\n  public focusInput(initial = ''): void {\n    this.latexValue = initial;\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.latexValue = '';\n    this.display = 'inline';\n  }\n\n  private onLatex(event: CustomEvent): void {\n    this.latexValue = (event.detail?.value ?? '') as string;\n  }\n\n  private handleSubmit(): void {\n    const latex = this.latexValue.trim();\n    if (!latex) {\n      this.emit('wysiwyg-math-cancel');\n      return;\n    }\n    this.emit('wysiwyg-math-apply', { latex, display: this.display });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-math-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=\"math-panel\" part=\"math-panel\" @keydown=${this.handleKeydown}>\n        <nile-input\n          label=\"LaTeX expression\"\n          placeholder=\"e.g. \\\\frac{a}{b} = c^2\"\n          .value=${this.latexValue}\n          @nile-input=${this.onLatex}\n        ></nile-input>\n\n        <div class=\"display-row\">\n          <span class=\"display-label\">Display</span>\n          <nile-button-toggle-group\n            class=\"toggle\"\n            .value=${this.display}\n            @nile-change=${(e: CustomEvent) => {\n              this.display = e.detail.value === 'block' ? 'block' : 'inline';\n            }}\n          >\n            <nile-button-toggle value=\"inline\">Inline</nile-button-toggle>\n            <nile-button-toggle value=\"block\">Block</nile-button-toggle>\n          </nile-button-toggle-group>\n        </div>\n\n\n        <div class=\"actions\">\n          <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n            >Insert</nile-button\n          >\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-math-panel': NileWysiwygMathPanel;\n  }\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult, CSSResultArray } from 'lit';
+/**
+ * Renders sanitized document HTML inside its OWN shadow root. Any author
+ * `<style>` block in the content is therefore scoped to this element and
+ * cannot leak into the surrounding source-view / editor chrome (which lives in
+ * a different shadow root). Reuses the editor's content styles so the render
+ * matches the live editor. The content wrapper is an `<article>`, not a
+ * `<div>`, so a blanket `div { … }` rule doesn't paint the wrapper itself.
+ */
+export declare class NileWysiwygPreview extends LitElement {
+    /** Sanitized HTML to render (already run through sanitizeHtml). */
+    content: string;
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-preview': NileWysiwygPreview;
+    }
+}

package/dist/src/nile-wysiwyg-editor/ui/preview.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { styles as editorStyles } from '../nile-wysiwyg-editor.css';
+/**
+ * Renders sanitized document HTML inside its OWN shadow root. Any author
+ * `<style>` block in the content is therefore scoped to this element and
+ * cannot leak into the surrounding source-view / editor chrome (which lives in
+ * a different shadow root). Reuses the editor's content styles so the render
+ * matches the live editor. The content wrapper is an `<article>`, not a
+ * `<div>`, so a blanket `div { … }` rule doesn't paint the wrapper itself.
+ */
+let NileWysiwygPreview = class NileWysiwygPreview extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Sanitized HTML to render (already run through sanitizeHtml). */
+        this.content = '';
+    }
+    static get styles() {
+        return [
+            editorStyles,
+            css `
+        :host {
+          display: block;
+        }
+        .ProseMirror {
+          min-height: 0;
+        }
+      `,
+        ];
+    }
+    render() {
+        return html `<article class="ProseMirror">${unsafeHTML(this.content)}</article>`;
+    }
+};
+__decorate([
+    property({ type: String })
+], NileWysiwygPreview.prototype, "content", void 0);
+NileWysiwygPreview = __decorate([
+    customElement('nile-wysiwyg-preview')
+], NileWysiwygPreview);
+export { NileWysiwygPreview };
+//# sourceMappingURL=preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/preview.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;;;;GAOG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QACL,mEAAmE;QACvC,YAAO,GAAG,EAAE,CAAC;IAmB3C,CAAC;IAjBQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,YAAY;YACZ,GAAG,CAAA;;;;;;;OAOF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,gCAAgC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC;IAClF,CAAC;CACF,CAAA;AAnB6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAc;AAF9B,kBAAkB;IAD9B,aAAa,CAAC,sBAAsB,CAAC;GACzB,kBAAkB,CAqB9B","sourcesContent":["import { LitElement, html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { styles as editorStyles } from '../nile-wysiwyg-editor.css';\n\n/**\n * Renders sanitized document HTML inside its OWN shadow root. Any author\n * `<style>` block in the content is therefore scoped to this element and\n * cannot leak into the surrounding source-view / editor chrome (which lives in\n * a different shadow root). Reuses the editor's content styles so the render\n * matches the live editor. The content wrapper is an `<article>`, not a\n * `<div>`, so a blanket `div { … }` rule doesn't paint the wrapper itself.\n */\n@customElement('nile-wysiwyg-preview')\nexport class NileWysiwygPreview extends LitElement {\n  /** Sanitized HTML to render (already run through sanitizeHtml). */\n  @property({ type: String }) content = '';\n\n  public static get styles(): CSSResultArray {\n    return [\n      editorStyles,\n      css`\n        :host {\n          display: block;\n        }\n        .ProseMirror {\n          min-height: 0;\n        }\n      `,\n    ];\n  }\n\n  public render(): TemplateResult {\n    return html`<article class=\"ProseMirror\">${unsafeHTML(this.content)}</article>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-preview': NileWysiwygPreview;\n  }\n}\n"]}

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

@@ -1,15 +1,47 @@
 import { TemplateResult, CSSResultArray } from 'lit';
 import NileElement from '../../internal/nile-element';
+import './preview';
 /**
- * Raw HTML source editing mode. Replaces the rich surface while open; the
- * host re-parses (and re-sanitizes) the HTML on apply. Emits
+ * Raw HTML source editing mode. A split view: the raw HTML on the left, a
+ * live rendered preview on the right, with a draggable divider between them
+ * and a resizable body. The preview runs the same sanitizer the host applies
+ * on the way back, so what you see is what the document becomes. Emits
  * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.
+ *
+ * The code pane is a lightweight editor: a real `<textarea>` for input, with a
+ * highlight.js-coloured layer painted behind it and a synced line-number
+ * gutter. No heavyweight code-editor dependency.
  */
 export declare class NileWysiwygSourceView extends NileElement {
     value: string;
-    textarea?: HTMLTextAreaElement;
+    private textarea?;
+    private highlightEl?;
+    private linenosEl?;
+    private bodyEl?;
+    /** Current source text, drives the live preview, highlight and gutter. */
+    private draft;
+    /**
+     * Fraction of the body width given to the code pane (the rest is preview).
+     * Clamped while dragging the divider.
+     */
+    private splitRatio;
+    /** Whether the divider is currently being dragged. */
+    private splitDragging;
     static get styles(): CSSResultArray;
+    protected willUpdate(changed: Map<string, unknown>): void;
+    /** The current (possibly edited) source text — what "Done" would apply. */
+    get currentValue(): string;
     focusInput(): void;
+    /** highlight.js-coloured HTML for the current draft (falls back to escaped). */
+    private get highlighted();
+    private get lineCount();
+    /** Begins a pointer-driven resize of the split divider. */
+    private startSplitDrag;
+    /** Resets the divider to a 50/50 layout (double-click affordance). */
+    private resetSplit;
+    private onInput;
+    /** Keeps the highlight layer and line-number gutter aligned with scroll. */
+    private onScroll;
     render(): TemplateResult;
 }
 declare global {