@aquera/nile-elements 1.9.5 → 1.9.7

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

@@ -0,0 +1,189 @@
+import { __decorate } from "tslib";
+import { html, css, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+/**
+ * Floating link create/edit panel. The host positions it absolutely inside
+ * the editor chrome and listens for:
+ *  - `wysiwyg-link-apply`  detail: { href, text }
+ *  - `wysiwyg-link-remove`
+ *  - `wysiwyg-link-cancel`
+ */
+let NileWysiwygLinkEditor = class NileWysiwygLinkEditor extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.href = '';
+        this.text = '';
+        /** Show the text field (only when creating a link from a cursor). */
+        this.allowText = false;
+        /** Show the remove button (when editing an existing link). */
+        this.canRemove = 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: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .link-editor {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+          min-width: 280px;
+          padding: 12px;
+          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          border: 1px solid
+            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));
+          border-radius: var(--nile-wysiwyg-radius, 8px);
+          box-shadow: var(
+            --nile-wysiwyg-popover-shadow,
+            0 4px 12px rgba(16, 24, 40, 0.12)
+          );
+          font-size: 13px;
+        }
+
+        label {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        input {
+          font: inherit;
+          padding: 6px 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));
+        }
+
+        .link-editor__actions {
+          display: flex;
+          gap: 8px;
+          justify-content: flex-end;
+        }
+
+        button {
+          font: inherit;
+          padding: 6px 12px;
+          border-radius: 6px;
+          border: 1px solid transparent;
+          cursor: pointer;
+          background: transparent;
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        button.primary {
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          color: #ffffff;
+        }
+
+        button.danger {
+          color: var(--nile-colors-error-600, #d92d20);
+        }
+      `,
+        ];
+    }
+    /** Focuses the URL field; called by the host after opening. */
+    focusInput() {
+        this.updateComplete.then(() => this.hrefInput?.focus());
+    }
+    handleSubmit(event) {
+        event.preventDefault();
+        const href = this.hrefInput?.value.trim() ?? '';
+        if (!href)
+            return;
+        const textInput = this.shadowRoot?.querySelector('.link-editor__text');
+        this.emit('wysiwyg-link-apply', { href, text: textInput?.value.trim() ?? '' });
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-link-cancel');
+        }
+    }
+    render() {
+        return html `
+      <form
+        class="link-editor"
+        part="link-editor"
+        @submit=${this.handleSubmit}
+        @keydown=${this.handleKeydown}
+      >
+        <label>
+          URL
+          <input
+            class="link-editor__href"
+            type="url"
+            placeholder="https://"
+            .value=${this.href}
+          />
+        </label>
+        ${this.allowText
+            ? html `
+              <label>
+                Text
+                <input class="link-editor__text" type="text" .value=${this.text} />
+              </label>
+            `
+            : nothing}
+        <div class="link-editor__actions">
+          ${this.canRemove
+            ? html `
+                <button
+                  type="button"
+                  class="danger"
+                  @click=${() => this.emit('wysiwyg-link-remove')}
+                >
+                  Remove
+                </button>
+              `
+            : nothing}
+          <button type="button" @click=${() => this.emit('wysiwyg-link-cancel')}>
+            Cancel
+          </button>
+          <button type="submit" class="primary">Apply</button>
+        </div>
+      </form>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygLinkEditor.prototype, "open", void 0);
+__decorate([
+    property({ type: String })
+], NileWysiwygLinkEditor.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], NileWysiwygLinkEditor.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileWysiwygLinkEditor.prototype, "allowText", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileWysiwygLinkEditor.prototype, "canRemove", void 0);
+__decorate([
+    query('.link-editor__href')
+], NileWysiwygLinkEditor.prototype, "hrefInput", void 0);
+NileWysiwygLinkEditor = __decorate([
+    customElement('nile-wysiwyg-link-editor')
+], NileWysiwygLinkEditor);
+export { NileWysiwygLinkEditor };
+//# sourceMappingURL=link-editor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link-editor.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/link-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/**\n * Floating link create/edit panel. The host positions it absolutely inside\n * the editor chrome and listens for:\n *  - `wysiwyg-link-apply`  detail: { href, text }\n *  - `wysiwyg-link-remove`\n *  - `wysiwyg-link-cancel`\n */\n@customElement('nile-wysiwyg-link-editor')\nexport class NileWysiwygLinkEditor extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @property({ type: String }) href = '';\n\n  @property({ type: String }) text = '';\n\n  /** Show the text field (only when creating a link from a cursor). */\n  @property({ type: Boolean }) allowText = false;\n\n  /** Show the remove button (when editing an existing link). */\n  @property({ type: Boolean }) canRemove = false;\n\n  @query('.link-editor__href') hrefInput?: 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        .link-editor {\n          display: flex;\n          flex-direction: column;\n          gap: 8px;\n          min-width: 280px;\n          padding: 12px;\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          font-size: 13px;\n        }\n\n        label {\n          display: flex;\n          flex-direction: column;\n          gap: 4px;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        input {\n          font: inherit;\n          padding: 6px 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        .link-editor__actions {\n          display: flex;\n          gap: 8px;\n          justify-content: flex-end;\n        }\n\n        button {\n          font: inherit;\n          padding: 6px 12px;\n          border-radius: 6px;\n          border: 1px solid transparent;\n          cursor: pointer;\n          background: transparent;\n          color: var(--nile-colors-neutral-700, #344054);\n        }\n\n        button.primary {\n          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n          color: #ffffff;\n        }\n\n        button.danger {\n          color: var(--nile-colors-error-600, #d92d20);\n        }\n      `,\n    ];\n  }\n\n  /** Focuses the URL field; called by the host after opening. */\n  public focusInput(): void {\n    this.updateComplete.then(() => this.hrefInput?.focus());\n  }\n\n  private handleSubmit(event: Event): void {\n    event.preventDefault();\n    const href = this.hrefInput?.value.trim() ?? '';\n    if (!href) return;\n    const textInput = this.shadowRoot?.querySelector<HTMLInputElement>('.link-editor__text');\n    this.emit('wysiwyg-link-apply', { href, text: textInput?.value.trim() ?? '' });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-link-cancel');\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <form\n        class=\"link-editor\"\n        part=\"link-editor\"\n        @submit=${this.handleSubmit}\n        @keydown=${this.handleKeydown}\n      >\n        <label>\n          URL\n          <input\n            class=\"link-editor__href\"\n            type=\"url\"\n            placeholder=\"https://\"\n            .value=${this.href}\n          />\n        </label>\n        ${this.allowText\n          ? html`\n              <label>\n                Text\n                <input class=\"link-editor__text\" type=\"text\" .value=${this.text} />\n              </label>\n            `\n          : nothing}\n        <div class=\"link-editor__actions\">\n          ${this.canRemove\n            ? html`\n                <button\n                  type=\"button\"\n                  class=\"danger\"\n                  @click=${() => this.emit('wysiwyg-link-remove')}\n                >\n                  Remove\n                </button>\n              `\n            : nothing}\n          <button type=\"button\" @click=${() => this.emit('wysiwyg-link-cancel')}>\n            Cancel\n          </button>\n          <button type=\"submit\" class=\"primary\">Apply</button>\n        </div>\n      </form>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-link-editor': NileWysiwygLinkEditor;\n  }\n}\n"]}

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

@@ -0,0 +1,24 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+import '../../nile-button/index';
+/**
+ * Floating "Paste Markdown" panel: paste/type Markdown and insert it into the
+ * document as formatted content. The host converts and inserts on apply.
+ * Emits `wysiwyg-markdown-apply` detail: { markdown } and
+ * `wysiwyg-markdown-cancel`.
+ */
+export declare class NileWysiwygMarkdownPanel extends NileElement {
+    open: boolean;
+    textarea?: HTMLTextAreaElement;
+    static get styles(): CSSResultArray;
+    focusInput(): void;
+    reset(): void;
+    private submit;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-markdown-panel': NileWysiwygMarkdownPanel;
+    }
+}

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

@@ -0,0 +1,144 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import '../../nile-button/index';
+/**
+ * Floating "Paste Markdown" panel: paste/type Markdown and insert it into the
+ * document as formatted content. The host converts and inserts on apply.
+ * Emits `wysiwyg-markdown-apply` detail: { markdown } and
+ * `wysiwyg-markdown-cancel`.
+ */
+let NileWysiwygMarkdownPanel = class NileWysiwygMarkdownPanel 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: 20;
+          display: none;
+        }
+
+        :host([open]) {
+          display: block;
+        }
+
+        .md-panel {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          width: 460px;
+          max-width: 90vw;
+          padding: 14px;
+          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;
+        }
+
+        .heading {
+          font-weight: 600;
+          color: var(--nile-colors-neutral-800, #1d2939);
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        textarea {
+          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
+          font-size: 13px;
+          line-height: 1.5;
+          min-height: 180px;
+          resize: vertical;
+          padding: 10px;
+          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border-radius: 6px;
+          outline: none;
+          color: var(--nile-colors-dark-900, #101828);
+          background: var(--nile-colors-neutral-50, #f9fafb);
+        }
+
+        textarea:focus {
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+        }
+      `,
+        ];
+    }
+    focusInput() {
+        this.updateComplete.then(() => this.textarea?.focus());
+    }
+    reset() {
+        this.updateComplete.then(() => {
+            if (this.textarea)
+                this.textarea.value = '';
+        });
+    }
+    submit() {
+        const markdown = this.textarea?.value ?? '';
+        if (!markdown.trim()) {
+            this.emit('wysiwyg-markdown-cancel');
+            return;
+        }
+        this.emit('wysiwyg-markdown-apply', { markdown });
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-markdown-cancel');
+        }
+        else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+            // Ctrl/Cmd+Enter inserts (plain Enter keeps adding newlines).
+            event.preventDefault();
+            event.stopPropagation();
+            this.submit();
+        }
+    }
+    render() {
+        return html `
+      <div class="md-panel" part="markdown-panel" @keydown=${this.handleKeydown}>
+        <span class="heading">Paste Markdown</span>
+        <textarea
+          part="markdown-textarea"
+          placeholder="# Heading&#10;&#10;Paste **Markdown** here — lists, \`code\`, tables…"
+          spellcheck="false"
+        ></textarea>
+        <span class="hint">Converts to formatted content on insert (⌘/Ctrl+Enter).</span>
+        <div class="actions">
+          <nile-button variant="tertiary" @click=${() => this.emit('wysiwyg-markdown-cancel')}
+            >Cancel</nile-button
+          >
+          <nile-button variant="primary" @click=${() => this.submit()}>Insert</nile-button>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygMarkdownPanel.prototype, "open", void 0);
+__decorate([
+    query('textarea')
+], NileWysiwygMarkdownPanel.prototype, "textarea", void 0);
+NileWysiwygMarkdownPanel = __decorate([
+    customElement('nile-wysiwyg-markdown-panel')
+], NileWysiwygMarkdownPanel);
+export { NileWysiwygMarkdownPanel };
+//# sourceMappingURL=markdown-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-panel.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/markdown-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAkC,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,WAAW,MAAM,6BAA6B,CAAC;AACtD,OAAO,yBAAyB,CAAC;AAEjC;;;;;GAKG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,WAAW;IAAlD;;QACuC,SAAI,GAAG,KAAK,CAAC;IA2H3D,CAAC;IAvHQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA+DF;SACF,CAAC;IACJ,CAAC;IAEM,UAAU;QACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC;IACzD,CAAC;IAEM,KAAK;QACV,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;YAC5B,IAAI,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,EAAE,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,MAAM;QACZ,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,EAAE,CAAC;QAC5C,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;YACrC,OAAO;QACT,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC;IACpD,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,yBAAyB,CAAC,CAAC;QACvC,CAAC;aAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;YACrE,8DAA8D;YAC9D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;6DAC8C,IAAI,CAAC,aAAa;;;;;;;;;mDAS5B,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC;;;kDAG3C,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE;;;KAGhE,CAAC;IACJ,CAAC;CACF,CAAA;AA3H6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDAAc;AAEtC;IAAlB,KAAK,CAAC,UAAU,CAAC;0DAAgC;AAHvC,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CA4HpC","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport '../../nile-button/index';\n\n/**\n * Floating \"Paste Markdown\" panel: paste/type Markdown and insert it into the\n * document as formatted content. The host converts and inserts on apply.\n * Emits `wysiwyg-markdown-apply` detail: { markdown } and\n * `wysiwyg-markdown-cancel`.\n */\n@customElement('nile-wysiwyg-markdown-panel')\nexport class NileWysiwygMarkdownPanel extends NileElement {\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @query('textarea') textarea?: HTMLTextAreaElement;\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        .md-panel {\n          display: flex;\n          flex-direction: column;\n          gap: 10px;\n          width: 460px;\n          max-width: 90vw;\n          padding: 14px;\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        .heading {\n          font-weight: 600;\n          color: var(--nile-colors-neutral-800, #1d2939);\n        }\n\n        .hint {\n          font-size: 12px;\n          color: var(--nile-colors-neutral-500, #98a2b3);\n        }\n\n        textarea {\n          font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n          font-size: 13px;\n          line-height: 1.5;\n          min-height: 180px;\n          resize: vertical;\n          padding: 10px;\n          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\n          border-radius: 6px;\n          outline: none;\n          color: var(--nile-colors-dark-900, #101828);\n          background: var(--nile-colors-neutral-50, #f9fafb);\n        }\n\n        textarea:focus {\n          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));\n        }\n\n        .actions {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: 8px;\n        }\n      `,\n    ];\n  }\n\n  public focusInput(): void {\n    this.updateComplete.then(() => this.textarea?.focus());\n  }\n\n  public reset(): void {\n    this.updateComplete.then(() => {\n      if (this.textarea) this.textarea.value = '';\n    });\n  }\n\n  private submit(): void {\n    const markdown = this.textarea?.value ?? '';\n    if (!markdown.trim()) {\n      this.emit('wysiwyg-markdown-cancel');\n      return;\n    }\n    this.emit('wysiwyg-markdown-apply', { markdown });\n  }\n\n  private handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.emit('wysiwyg-markdown-cancel');\n    } else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {\n      // Ctrl/Cmd+Enter inserts (plain Enter keeps adding newlines).\n      event.preventDefault();\n      event.stopPropagation();\n      this.submit();\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"md-panel\" part=\"markdown-panel\" @keydown=${this.handleKeydown}>\n        <span class=\"heading\">Paste Markdown</span>\n        <textarea\n          part=\"markdown-textarea\"\n          placeholder=\"# Heading&#10;&#10;Paste **Markdown** here — lists, \\`code\\`, tables…\"\n          spellcheck=\"false\"\n        ></textarea>\n        <span class=\"hint\">Converts to formatted content on insert (⌘/Ctrl+Enter).</span>\n        <div class=\"actions\">\n          <nile-button variant=\"tertiary\" @click=${() => this.emit('wysiwyg-markdown-cancel')}\n            >Cancel</nile-button\n          >\n          <nile-button variant=\"primary\" @click=${() => this.submit()}>Insert</nile-button>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-wysiwyg-markdown-panel': NileWysiwygMarkdownPanel;\n  }\n}\n"]}

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

@@ -0,0 +1,31 @@
+import { TemplateResult, CSSResultArray } from 'lit';
+import NileElement from '../../internal/nile-element';
+import '../../nile-input/index';
+import '../../nile-button/index';
+import '../../nile-button-toggle-group/index';
+import '../../nile-button-toggle/index';
+/**
+ * Floating math-insert panel: enter a LaTeX expression. Styled to match the
+ * image/embed panels (nile-input + nile-button). Emits `wysiwyg-math-apply`
+ * detail: { latex, display } and `wysiwyg-math-cancel`. Rendering of the
+ * formula itself is the host's job (via a mathRenderer).
+ */
+export declare class NileWysiwygMathPanel extends NileElement {
+    open: boolean;
+    private latexValue;
+    private display;
+    static get styles(): CSSResultArray;
+    /** Opens with an optional initial value (editing an existing formula). */
+    focusInput(initial?: string): void;
+    /** Clears the field. */
+    reset(): void;
+    private onLatex;
+    private handleSubmit;
+    private handleKeydown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-math-panel': NileWysiwygMathPanel;
+    }
+}

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

@@ -0,0 +1,172 @@
+import { __decorate } from "tslib";
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import NileElement from '../../internal/nile-element';
+import '../../nile-input/index';
+import '../../nile-button/index';
+import '../../nile-button-toggle-group/index';
+import '../../nile-button-toggle/index';
+/**
+ * Floating math-insert panel: enter a LaTeX expression. Styled to match the
+ * image/embed panels (nile-input + nile-button). Emits `wysiwyg-math-apply`
+ * detail: { latex, display } and `wysiwyg-math-cancel`. Rendering of the
+ * formula itself is the host's job (via a mathRenderer).
+ */
+let NileWysiwygMathPanel = class NileWysiwygMathPanel extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.latexValue = '';
+        this.display = 'inline';
+    }
+    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;
+        }
+
+        .math-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%;
+        }
+
+        /* Keep the LaTeX field monospaced. */
+        nile-input::part(input) {
+          font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        }
+
+        .display-row {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        .display-label {
+          color: var(--nile-colors-neutral-700, #344054);
+        }
+
+        .hint {
+          font-size: 12px;
+          color: var(--nile-colors-neutral-500, #98a2b3);
+        }
+
+        .actions {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          gap: 8px;
+          width: 100%;
+        }
+      `,
+        ];
+    }
+    /** Opens with an optional initial value (editing an existing formula). */
+    focusInput(initial = '') {
+        this.latexValue = initial;
+        this.updateComplete.then(() => {
+            const input = this.shadowRoot?.querySelector('nile-input');
+            input?.focus();
+        });
+    }
+    /** Clears the field. */
+    reset() {
+        this.latexValue = '';
+        this.display = 'inline';
+    }
+    onLatex(event) {
+        this.latexValue = (event.detail?.value ?? '');
+    }
+    handleSubmit() {
+        const latex = this.latexValue.trim();
+        if (!latex) {
+            this.emit('wysiwyg-math-cancel');
+            return;
+        }
+        this.emit('wysiwyg-math-apply', { latex, display: this.display });
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.emit('wysiwyg-math-cancel');
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.handleSubmit();
+        }
+    }
+    render() {
+        return html `
+      <div class="math-panel" part="math-panel" @keydown=${this.handleKeydown}>
+        <nile-input
+          label="LaTeX expression"
+          placeholder="e.g. \\frac{a}{b} = c^2"
+          .value=${this.latexValue}
+          @nile-input=${this.onLatex}
+        ></nile-input>
+
+        <div class="display-row">
+          <span class="display-label">Display</span>
+          <nile-button-toggle-group
+            class="toggle"
+            .value=${this.display}
+            @nile-change=${(e) => {
+            this.display = e.detail.value === 'block' ? 'block' : 'inline';
+        }}
+          >
+            <nile-button-toggle value="inline">Inline</nile-button-toggle>
+            <nile-button-toggle value="block">Block</nile-button-toggle>
+          </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()}
+            >Insert</nile-button
+          >
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileWysiwygMathPanel.prototype, "open", void 0);
+__decorate([
+    state()
+], NileWysiwygMathPanel.prototype, "latexValue", void 0);
+__decorate([
+    state()
+], NileWysiwygMathPanel.prototype, "display", void 0);
+NileWysiwygMathPanel = __decorate([
+    customElement('nile-wysiwyg-math-panel')
+], NileWysiwygMathPanel);
+export { NileWysiwygMathPanel };
+//# sourceMappingURL=math-panel.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,30 @@
+import { TemplateResult, CSSResultArray, PropertyValues, nothing } from 'lit';
+import NileElement from '../../internal/nile-element';
+/**
+ * Keyboard shortcut reference dialog, opened from the toolbar or Mod-/.
+ * Emits `wysiwyg-shortcut-help-close` when dismissed (Esc, ✕ or backdrop).
+ */
+export declare class NileWysiwygShortcutHelp extends NileElement {
+    open: boolean;
+    private panelEl?;
+    /** Body overflow value before we locked it; null = not locked by us. */
+    private previousBodyOverflow;
+    static get styles(): CSSResultArray;
+    /**
+     * Locks page scrolling while the dialog is open (the fixed backdrop blocks
+     * clicks but not wheel/touch scrolling of the document behind it).
+     * Save/restore keeps it composable with other locks (e.g. fullscreen).
+     */
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    /** Moves focus into the dialog so Esc lands here. */
+    focusPanel(): void;
+    private close;
+    private handleKeydown;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-wysiwyg-shortcut-help': NileWysiwygShortcutHelp;
+    }
+}