npm - @aquera/nile-elements - Versions diffs - 2.0.16 → 2.0.18 - Mend

@aquera/nile-elements 2.0.16 → 2.0.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (383) hide show

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

	@@ -1 +1 @@
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, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-text-primary-900));\n }\n\n .hint {\n font-size: 12px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\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, var(--ng-colors-border-primary));\n border-radius: 6px;\n outline: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n }\n\n textarea:focus {\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\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 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"]}
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, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-text-primary-900));\n }\n\n .hint {\n font-size: 12px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\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, var(--ng-colors-border-primary));\n border-radius: 6px;\n outline: none;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n }\n\n textarea:focus {\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\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 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.js CHANGED Viewed

@@ -43,7 +43,7 @@ let NileWysiwygMathPanel = class NileWysiwygMathPanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

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

	@@ -1 +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, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-text-secondary-700));\n }\n\n .hint {\n font-size: 12px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\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"]}
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, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-text-secondary-700));\n }\n\n .hint {\n font-size: 12px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\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/shortcut-help.js CHANGED Viewed

@@ -124,7 +124,7 @@ let NileWysiwygShortcutHelp = class NileWysiwygShortcutHelp extends NileElement
           overflow-y: auto;
           overscroll-behavior: contain;
           outline: none;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 10px;
           box-shadow: var(

package/dist/src/nile-wysiwyg-editor/ui/shortcut-help.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shortcut-help.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/shortcut-help.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray, PropertyValues, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\nconst isMac =\n typeof navigator !== 'undefined' && /Mac\|iP(hone\|[oa]d)/.test(navigator.platform);\n\n/** Renders a binding like 'Mod-B' with platform-appropriate key labels. /\nfunction keyLabel(binding: string): string {\n return binding\n .split('-')\n .map(part => {\n switch (part) {\n case 'Mod':\n return isMac ? '⌘' : 'Ctrl';\n case 'Shift':\n return isMac ? '⇧' : 'Shift';\n case 'Alt':\n return isMac ? '⌥' : 'Alt';\n case 'Ctrl':\n return isMac ? '⌃' : 'Ctrl';\n default:\n return part;\n }\n })\n .join(isMac ? '' : '+');\n}\n\ninterface ShortcutGroup {\n title: string;\n items: { keys: string[]; label: string }[];\n}\n\nconst GROUPS: ShortcutGroup[] = [\n {\n title: 'Formatting',\n items: [\n { keys: ['Mod-B'], label: 'Bold' },\n { keys: ['Mod-I'], label: 'Italic' },\n { keys: ['Mod-U'], label: 'Underline' },\n { keys: ['Mod-Shift-X'], label: 'Strikethrough' },\n { keys: ['Mod-,'], label: 'Subscript' },\n { keys: ['Mod-.'], label: 'Superscript' },\n ],\n },\n {\n title: 'Blocks',\n items: [\n { keys: ['Ctrl-Shift-0'], label: 'Paragraph' },\n { keys: ['Ctrl-Shift-1…6'], label: 'Heading 1–6' },\n { keys: ['Mod-Shift-8'], label: 'Bulleted list' },\n { keys: ['Mod-Shift-7'], label: 'Numbered list' },\n { keys: ['Mod-Shift-9'], label: 'Blockquote' },\n { keys: ['Mod-Alt-C'], label: 'Code block' },\n { keys: ['Tab', 'Shift-Tab'], label: 'Indent / outdent list item' },\n { keys: ['Mod-]', 'Mod-['], label: 'Indent / outdent block' },\n { keys: ['Shift-Enter'], label: 'Line break' },\n ],\n },\n {\n title: 'Editing & tools',\n items: [\n { keys: ['Mod-Z'], label: 'Undo' },\n { keys: ['Mod-Shift-Z'], label: 'Redo' },\n { keys: ['Mod-K'], label: 'Insert or edit link' },\n { keys: ['Mod-F'], label: 'Find & replace' },\n { keys: ['Mod-Shift-V'], label: 'Paste without formatting' },\n { keys: ['Mod-/'], label: 'This dialog' },\n ],\n },\n {\n title: 'Typing shortcuts',\n items: [\n { keys: ['# + space'], label: 'Heading (## for level 2 …)' },\n { keys: ['- + space'], label: 'Bulleted list' },\n { keys: ['1. + space'], label: 'Numbered list' },\n { keys: ['[] + space'], label: 'Checklist' },\n { keys: ['> + space'], label: 'Blockquote' },\n { keys: ['```'], label: 'Code block' },\n { keys: ['text'], label: 'Bold as you type' },\n { keys: ['URL + space'], label: 'Automatic link' },\n { keys: ['/'], label: 'Command menu' },\n { keys: [': + name'], label: 'Emoji picker' },\n ],\n },\n];\n\n/\n Keyboard shortcut reference dialog, opened from the toolbar or Mod-/.\n * Emits `wysiwyg-shortcut-help-close` when dismissed (Esc, ✕ or backdrop).\n /\n@customElement('nile-wysiwyg-shortcut-help')\nexport class NileWysiwygShortcutHelp extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @query('.help__panel') private panelEl?: HTMLElement;\n\n /* Body overflow value before we locked it; null = not locked by us. /\n private previousBodyOverflow: string \| null = null;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n / Fixed so the dialog overlays the viewport instead of being\n clipped by a small editor. /\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: fixed;\n inset: 0;\n z-index: var(--nile-wysiwyg-dialog-z-index, 1100);\n display: none;\n }\n\n :host([open]) {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .help__backdrop {\n position: absolute;\n inset: 0;\n background: rgba(16, 24, 40, 0.4);\n }\n\n .help__panel {\n position: relative;\n max-width: 560px;\n max-height: min(80%, 480px);\n margin: 16px;\n padding: 16px 20px;\n overflow-y: auto;\n overscroll-behavior: contain;\n outline: none;\n background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 10px;\n box-shadow: var(\n --nile-wysiwyg-popover-shadow,\n 0 8px 24px rgba(16, 24, 40, 0.18)\n );\n font-size: 13px;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n .help__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n\n .help__title {\n font-size: 14px;\n font-weight: 600;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .help__close {\n font: inherit;\n border: none;\n background: transparent;\n border-radius: 5px;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n .help__close:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .help__columns {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 4px 24px;\n }\n\n .help__group-title {\n margin: 10px 0 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n }\n\n .help__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 3px 0;\n }\n\n .help__keys {\n white-space: nowrap;\n }\n\n kbd {\n display: inline-block;\n padding: 1px 6px;\n font-family: inherit;\n font-size: 12px;\n line-height: 1.5;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-bottom-width: 2px;\n border-radius: 5px;\n }\n `,\n ];\n }\n\n /\n Locks page scrolling while the dialog is open (the fixed backdrop blocks\n * clicks but not wheel/touch scrolling of the document behind it).\n * Save/restore keeps it composable with other locks (e.g. fullscreen).\n /\n protected updated(changed: PropertyValues): void {\n if (!changed.has('open')) return;\n if (this.open) {\n if (this.previousBodyOverflow === null) {\n this.previousBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n } else if (this.previousBodyOverflow !== null) {\n document.body.style.overflow = this.previousBodyOverflow;\n this.previousBodyOverflow = null;\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.previousBodyOverflow !== null) {\n document.body.style.overflow = this.previousBodyOverflow;\n this.previousBodyOverflow = null;\n }\n }\n\n /* Moves focus into the dialog so Esc lands here. */\n public focusPanel(): void {\n this.updateComplete.then(() => this.panelEl?.focus());\n }\n\n private close(): void {\n this.emit('wysiwyg-shortcut-help-close');\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.close();\n }\n }\n\n public render(): TemplateResult \| typeof nothing {\n if (!this.open) return nothing;\n return html`\n <div class=\"help__backdrop\" @click=${this.close}></div>\n <div\n class=\"help__panel\"\n part=\"shortcut-help\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Keyboard shortcuts\"\n tabindex=\"-1\"\n @keydown=${this.handleKeydown}\n >\n <div class=\"help__header\">\n <span class=\"help__title\">Keyboard shortcuts</span>\n <button type=\"button\" class=\"help__close\" title=\"Close (Esc)\" @click=${this.close}>\n ✕\n </button>\n </div>\n <div class=\"help__columns\">\n ${GROUPS.map(\n group => html`\n <div>\n <div class=\"help__group-title\">${group.title}</div>\n ${group.items.map(\n item => html`\n <div class=\"help__row\">\n <span>${item.label}</span>\n <span class=\"help__keys\">\n ${item.keys.map(\n (key, index) => html`${index > 0 ? ' / ' : nothing}<kbd\n >${keyLabel(key)}</kbd\n >`\n )}\n </span>\n </div>\n `\n )}\n </div>\n `\n )}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-shortcut-help': NileWysiwygShortcutHelp;\n }\n}\n"]}
1	+ {"version":3,"file":"shortcut-help.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/shortcut-help.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray, PropertyValues, nothing } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\nconst isMac =\n typeof navigator !== 'undefined' && /Mac\|iP(hone\|[oa]d)/.test(navigator.platform);\n\n/** Renders a binding like 'Mod-B' with platform-appropriate key labels. /\nfunction keyLabel(binding: string): string {\n return binding\n .split('-')\n .map(part => {\n switch (part) {\n case 'Mod':\n return isMac ? '⌘' : 'Ctrl';\n case 'Shift':\n return isMac ? '⇧' : 'Shift';\n case 'Alt':\n return isMac ? '⌥' : 'Alt';\n case 'Ctrl':\n return isMac ? '⌃' : 'Ctrl';\n default:\n return part;\n }\n })\n .join(isMac ? '' : '+');\n}\n\ninterface ShortcutGroup {\n title: string;\n items: { keys: string[]; label: string }[];\n}\n\nconst GROUPS: ShortcutGroup[] = [\n {\n title: 'Formatting',\n items: [\n { keys: ['Mod-B'], label: 'Bold' },\n { keys: ['Mod-I'], label: 'Italic' },\n { keys: ['Mod-U'], label: 'Underline' },\n { keys: ['Mod-Shift-X'], label: 'Strikethrough' },\n { keys: ['Mod-,'], label: 'Subscript' },\n { keys: ['Mod-.'], label: 'Superscript' },\n ],\n },\n {\n title: 'Blocks',\n items: [\n { keys: ['Ctrl-Shift-0'], label: 'Paragraph' },\n { keys: ['Ctrl-Shift-1…6'], label: 'Heading 1–6' },\n { keys: ['Mod-Shift-8'], label: 'Bulleted list' },\n { keys: ['Mod-Shift-7'], label: 'Numbered list' },\n { keys: ['Mod-Shift-9'], label: 'Blockquote' },\n { keys: ['Mod-Alt-C'], label: 'Code block' },\n { keys: ['Tab', 'Shift-Tab'], label: 'Indent / outdent list item' },\n { keys: ['Mod-]', 'Mod-['], label: 'Indent / outdent block' },\n { keys: ['Shift-Enter'], label: 'Line break' },\n ],\n },\n {\n title: 'Editing & tools',\n items: [\n { keys: ['Mod-Z'], label: 'Undo' },\n { keys: ['Mod-Shift-Z'], label: 'Redo' },\n { keys: ['Mod-K'], label: 'Insert or edit link' },\n { keys: ['Mod-F'], label: 'Find & replace' },\n { keys: ['Mod-Shift-V'], label: 'Paste without formatting' },\n { keys: ['Mod-/'], label: 'This dialog' },\n ],\n },\n {\n title: 'Typing shortcuts',\n items: [\n { keys: ['# + space'], label: 'Heading (## for level 2 …)' },\n { keys: ['- + space'], label: 'Bulleted list' },\n { keys: ['1. + space'], label: 'Numbered list' },\n { keys: ['[] + space'], label: 'Checklist' },\n { keys: ['> + space'], label: 'Blockquote' },\n { keys: ['```'], label: 'Code block' },\n { keys: ['text'], label: 'Bold as you type' },\n { keys: ['URL + space'], label: 'Automatic link' },\n { keys: ['/'], label: 'Command menu' },\n { keys: [': + name'], label: 'Emoji picker' },\n ],\n },\n];\n\n/\n Keyboard shortcut reference dialog, opened from the toolbar or Mod-/.\n * Emits `wysiwyg-shortcut-help-close` when dismissed (Esc, ✕ or backdrop).\n /\n@customElement('nile-wysiwyg-shortcut-help')\nexport class NileWysiwygShortcutHelp extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @query('.help__panel') private panelEl?: HTMLElement;\n\n /* Body overflow value before we locked it; null = not locked by us. /\n private previousBodyOverflow: string \| null = null;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n / Fixed so the dialog overlays the viewport instead of being\n clipped by a small editor. /\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: fixed;\n inset: 0;\n z-index: var(--nile-wysiwyg-dialog-z-index, 1100);\n display: none;\n }\n\n :host([open]) {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .help__backdrop {\n position: absolute;\n inset: 0;\n background: rgba(16, 24, 40, 0.4);\n }\n\n .help__panel {\n position: relative;\n max-width: 560px;\n max-height: min(80%, 480px);\n margin: 16px;\n padding: 16px 20px;\n overflow-y: auto;\n overscroll-behavior: contain;\n outline: none;\n background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 10px;\n box-shadow: var(\n --nile-wysiwyg-popover-shadow,\n 0 8px 24px rgba(16, 24, 40, 0.18)\n );\n font-size: 13px;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n .help__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 8px;\n }\n\n .help__title {\n font-size: 14px;\n font-weight: 600;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .help__close {\n font: inherit;\n border: none;\n background: transparent;\n border-radius: 5px;\n padding: 4px 8px;\n cursor: pointer;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n .help__close:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n .help__columns {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 4px 24px;\n }\n\n .help__group-title {\n margin: 10px 0 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n }\n\n .help__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 3px 0;\n }\n\n .help__keys {\n white-space: nowrap;\n }\n\n kbd {\n display: inline-block;\n padding: 1px 6px;\n font-family: inherit;\n font-size: 12px;\n line-height: 1.5;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-bottom-width: 2px;\n border-radius: 5px;\n }\n `,\n ];\n }\n\n /\n Locks page scrolling while the dialog is open (the fixed backdrop blocks\n * clicks but not wheel/touch scrolling of the document behind it).\n * Save/restore keeps it composable with other locks (e.g. fullscreen).\n /\n protected updated(changed: PropertyValues): void {\n if (!changed.has('open')) return;\n if (this.open) {\n if (this.previousBodyOverflow === null) {\n this.previousBodyOverflow = document.body.style.overflow;\n document.body.style.overflow = 'hidden';\n }\n } else if (this.previousBodyOverflow !== null) {\n document.body.style.overflow = this.previousBodyOverflow;\n this.previousBodyOverflow = null;\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n if (this.previousBodyOverflow !== null) {\n document.body.style.overflow = this.previousBodyOverflow;\n this.previousBodyOverflow = null;\n }\n }\n\n /* Moves focus into the dialog so Esc lands here. */\n public focusPanel(): void {\n this.updateComplete.then(() => this.panelEl?.focus());\n }\n\n private close(): void {\n this.emit('wysiwyg-shortcut-help-close');\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.close();\n }\n }\n\n public render(): TemplateResult \| typeof nothing {\n if (!this.open) return nothing;\n return html`\n <div class=\"help__backdrop\" @click=${this.close}></div>\n <div\n class=\"help__panel\"\n part=\"shortcut-help\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"Keyboard shortcuts\"\n tabindex=\"-1\"\n @keydown=${this.handleKeydown}\n >\n <div class=\"help__header\">\n <span class=\"help__title\">Keyboard shortcuts</span>\n <button type=\"button\" class=\"help__close\" title=\"Close (Esc)\" @click=${this.close}>\n ✕\n </button>\n </div>\n <div class=\"help__columns\">\n ${GROUPS.map(\n group => html`\n <div>\n <div class=\"help__group-title\">${group.title}</div>\n ${group.items.map(\n item => html`\n <div class=\"help__row\">\n <span>${item.label}</span>\n <span class=\"help__keys\">\n ${item.keys.map(\n (key, index) => html`${index > 0 ? ' / ' : nothing}<kbd\n >${keyLabel(key)}</kbd\n >`\n )}\n </span>\n </div>\n `\n )}\n </div>\n `\n )}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-shortcut-help': NileWysiwygShortcutHelp;\n }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/source-view.js CHANGED Viewed

@@ -124,7 +124,7 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
         button.primary {
           background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
-          color: var(--ng-colors-text-white);
+          color: var(--nile-colors-white-base, var(--ng-colors-text-white));
         }
         .body {
@@ -287,7 +287,7 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
         .gutter:hover,
         .body--dragging .gutter {
-          background: var(--ng-colors-bg-brand-primary);
+          background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
         }
         .pane--preview {

package/dist/src/nile-wysiwyg-editor/ui/source-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"source-view.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/source-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport hljs from 'highlight.js/lib/core';\nimport xml from 'highlight.js/lib/languages/xml';\nimport NileElement from '../../internal/nile-element';\nimport { sanitizeHtml } from '../engine/sanitize';\nimport './preview';\n\n// HTML highlighting only — reuses the same lib the code-block feature already\n// bundles, so this adds no new dependency. Registration is idempotent.\nhljs.registerLanguage('xml', xml);\n\n/*\n Raw HTML source editing mode. A split view: the raw HTML on the left, a\n * live rendered preview on the right, with a draggable divider between them\n * and a resizable body. The preview runs the same sanitizer the host applies\n * on the way back, so what you see is what the document becomes. Emits\n * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.\n \n The code pane is a lightweight editor: a real `<textarea>` for input, with a\n * highlight.js-coloured layer painted behind it and a synced line-number\n * gutter. No heavyweight code-editor dependency.\n /\n@customElement('nile-wysiwyg-source-view')\nexport class NileWysiwygSourceView extends NileElement {\n @property({ type: String }) value = '';\n\n @query('textarea') private textarea?: HTMLTextAreaElement;\n\n @query('.hl > code') private highlightEl?: HTMLElement;\n\n @query('.linenos-inner') private linenosEl?: HTMLElement;\n\n @query('.body') private bodyEl?: HTMLElement;\n\n /* Current source text, drives the live preview, highlight and gutter. /\n @state() private draft = '';\n\n /\n Fraction of the body width given to the code pane (the rest is preview).\n * Clamped while dragging the divider.\n /\n @state() private splitRatio = 0.5;\n\n /* Whether the divider is currently being dragged. /\n @state() private splitDragging = false;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow: hidden;\n min-height: var(--nile-wysiwyg-min-height, 200px);\n height: var(--nile-wysiwyg-source-height, 340px);\n max-height: var(\n --nile-wysiwyg-source-max-height,\n var(--nile-wysiwyg-max-height, 70vh)\n );\n resize: vertical;\n }\n\n .bar {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 12px;\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary)));\n }\n\n .actions {\n display: flex;\n gap: 8px;\n }\n\n button {\n font: inherit;\n font-size: 12px;\n padding: 4px 12px;\n border-radius: 6px;\n border: 1px solid transparent;\n cursor: pointer;\n background: transparent;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n button.primary {\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n color: var(--ng-colors-text-white);\n }\n\n .body {\n flex: 1 1 auto;\n display: flex;\n align-items: stretch;\n overflow: hidden;\n min-height: 0;\n box-sizing: border-box;\n }\n\n .body--dragging {\n cursor: col-resize;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .body--dragging .pane {\n pointer-events: none;\n }\n\n .pane {\n min-width: 0;\n min-height: 0;\n box-sizing: border-box;\n }\n\n / --- Lightweight code editor: gutter + highlighted textarea --- /\n .pane--code {\n display: flex;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n / Shared code metrics, inherited by the gutter, highlight and textarea\n so every line lines up to the pixel. /\n font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 12px;\n line-height: 18px;\n tab-size: 2;\n -moz-tab-size: 2;\n }\n\n .linenos {\n flex: 0 0 auto;\n overflow: hidden;\n box-sizing: border-box;\n padding: 12px 8px 0;\n text-align: right;\n color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n user-select: none;\n }\n\n .linenos-inner {\n will-change: transform;\n }\n\n .linenos-inner > div {\n height: 18px;\n }\n\n .input-wrap {\n position: relative;\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n }\n\n / Highlight layer and textarea share the exact same box (offset for\n padding via top/left, extending to the edges for horizontal scroll),\n so the coloured text sits directly under the caret. /\n .hl,\n textarea {\n position: absolute;\n top: 12px;\n left: 16px;\n right: 0;\n bottom: 0;\n margin: 0;\n border: 0;\n padding: 0;\n font: inherit;\n line-height: inherit;\n tab-size: inherit;\n white-space: pre;\n word-wrap: normal;\n overflow-wrap: normal;\n box-sizing: border-box;\n }\n\n .hl {\n overflow: hidden;\n pointer-events: none;\n color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary-900));\n }\n\n .hl > code {\n display: block;\n will-change: transform;\n }\n\n textarea {\n width: auto;\n resize: none;\n outline: none;\n overflow: auto;\n background: transparent;\n color: transparent;\n caret-color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary-900));\n }\n\n / Must be translucent: the textarea's text is transparent and the\n coloured code sits BEHIND it, so an opaque selection would hide the\n text. A tint lets the highlighted code show through the selection. /\n textarea::selection {\n background: rgba(41, 112, 255, 0.3);\n }\n textarea::-moz-selection {\n background: rgba(41, 112, 255, 0.3);\n }\n\n / highlight.js token palette (Atom One Light), matching code blocks. /\n .hl .hljs-comment,\n .hl .hljs-quote { color: var(--ng-componentcolors-utility-gray-500); font-style: italic; }\n .hl .hljs-keyword,\n .hl .hljs-selector-tag,\n .hl .hljs-doctag { color: var(--ng-componentcolors-utility-purple-600); }\n .hl .hljs-name,\n .hl .hljs-selector-id,\n .hl .hljs-selector-class,\n .hl .hljs-tag { color: var(--ng-componentcolors-utility-error-600); }\n .hl .hljs-literal,\n .hl .hljs-built_in { color: var(--ng-componentcolors-utility-blue-600); }\n .hl .hljs-string,\n .hl .hljs-attribute,\n .hl .hljs-meta .hljs-string { color: var(--ng-componentcolors-utility-green-600); }\n .hl .hljs-attr,\n .hl .hljs-variable,\n .hl .hljs-type,\n .hl .hljs-number { color: var(--ng-componentcolors-utility-orange-600); }\n .hl .hljs-symbol,\n .hl .hljs-meta,\n .hl .hljs-title { color: var(--ng-componentcolors-utility-indigo-600); }\n\n / Draggable divider between the code and preview panes. /\n .gutter {\n flex: 0 0 auto;\n position: relative;\n width: 1px;\n align-self: stretch;\n background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n cursor: col-resize;\n touch-action: none;\n }\n\n .gutter::before {\n content: '';\n position: absolute;\n inset: 0 -4px;\n }\n\n .gutter:hover,\n .body--dragging .gutter {\n background: var(--ng-colors-bg-brand-primary);\n }\n\n .pane--preview {\n flex: 1 1 0;\n overflow: auto;\n border-left: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n nile-wysiwyg-preview {\n display: block;\n }\n\n .preview-empty {\n display: block;\n padding: 12px 16px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n font-size: 12px;\n opacity: 0.7;\n }\n `,\n ];\n }\n\n protected willUpdate(changed: Map<string, unknown>): void {\n // Sync the draft (and thus preview/highlight) whenever the host sets value.\n if (changed.has('value')) this.draft = this.value;\n }\n\n /* The current (possibly edited) source text — what \"Done\" would apply. /\n public get currentValue(): string {\n return this.draft;\n }\n\n public focusInput(): void {\n this.updateComplete.then(() => this.textarea?.focus());\n }\n\n /* highlight.js-coloured HTML for the current draft (falls back to escaped). /\n private get highlighted(): string {\n if (!this.draft) return '';\n try {\n return hljs.highlight(this.draft, { language: 'xml' }).value;\n } catch {\n return this.draft.replace(/[&<>]/g, c => ({ '&': '&', '<': '<', '>': '>' }[c]!));\n }\n }\n\n private get lineCount(): number {\n return this.draft ? this.draft.split('\\n').length : 1;\n }\n\n /* Begins a pointer-driven resize of the split divider. /\n private startSplitDrag = (e: PointerEvent) => {\n const body = this.bodyEl;\n if (!body) return;\n e.preventDefault();\n this.splitDragging = true;\n\n const rect = body.getBoundingClientRect();\n const MIN = 0.15;\n const MAX = 0.85;\n\n const onMove = (ev: PointerEvent) => {\n if (rect.width === 0) return;\n const ratio = (ev.clientX - rect.left) / rect.width;\n this.splitRatio = Math.min(MAX, Math.max(MIN, ratio));\n };\n const onUp = () => {\n this.splitDragging = false;\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n };\n\n /* Resets the divider to a 50/50 layout (double-click affordance). /\n private resetSplit = () => {\n this.splitRatio = 0.5;\n };\n\n private onInput = (e: Event) => {\n this.draft = (e.target as HTMLTextAreaElement).value;\n };\n\n /* Keeps the highlight layer and line-number gutter aligned with scroll. /\n private onScroll = (e: Event) => {\n const ta = e.target as HTMLTextAreaElement;\n if (this.highlightEl) {\n this.highlightEl.style.transform = `translate(${-ta.scrollLeft}px, ${-ta.scrollTop}px)`;\n }\n if (this.linenosEl) {\n this.linenosEl.style.transform = `translateY(${-ta.scrollTop}px)`;\n }\n };\n\n public render(): TemplateResult {\n const preview = sanitizeHtml(this.draft);\n const lines: TemplateResult[] = [];\n for (let i = 1; i <= this.lineCount; i += 1) lines.push(html`<div>${i}</div>`);\n return html`\n <div class=\"bar\" part=\"source-bar\">\n <span>HTML</span>\n <span class=\"actions\">\n <button type=\"button\" @click=${() => this.emit('wysiwyg-source-cancel')}>\n Cancel\n </button>\n <button\n type=\"button\"\n class=\"primary\"\n @click=${() => this.emit('wysiwyg-source-apply', { html: this.draft })}\n >\n Done\n </button>\n </span>\n </div>\n <div class=${classMap({ body: true, 'body--dragging': this.splitDragging })}>\n <div class=\"pane pane--code\" style=\"flex: 0 0 ${this.splitRatio 100}%\">\n <div class=\"linenos\" part=\"line-numbers\" aria-hidden=\"true\">\n <div class=\"linenos-inner\">${lines}</div>\n </div>\n <div class=\"input-wrap\">\n <pre class=\"hl\" aria-hidden=\"true\"><code>${unsafeHTML(this.highlighted)}</code></pre>\n <textarea\n part=\"source-textarea\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n wrap=\"off\"\n .value=${this.value}\n @input=${this.onInput}\n @scroll=${this.onScroll}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n this.emit('wysiwyg-source-cancel');\n }\n }}\n ></textarea>\n </div>\n </div>\n <div\n class=\"gutter\"\n part=\"gutter\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label=\"Resize source and preview\"\n title=\"Drag to resize · double-click to reset\"\n @pointerdown=${this.startSplitDrag}\n @dblclick=${this.resetSplit}\n ></div>\n <div class=\"pane pane--preview\" part=\"preview\">\n ${this.draft.trim()\n ? html`<nile-wysiwyg-preview .content=${preview}></nile-wysiwyg-preview>`\n : html`<span class=\"preview-empty\">Nothing to preview</span>`}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-source-view': NileWysiwygSourceView;\n }\n}\n"]}
1	+ {"version":3,"file":"source-view.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/source-view.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport hljs from 'highlight.js/lib/core';\nimport xml from 'highlight.js/lib/languages/xml';\nimport NileElement from '../../internal/nile-element';\nimport { sanitizeHtml } from '../engine/sanitize';\nimport './preview';\n\n// HTML highlighting only — reuses the same lib the code-block feature already\n// bundles, so this adds no new dependency. Registration is idempotent.\nhljs.registerLanguage('xml', xml);\n\n/*\n Raw HTML source editing mode. A split view: the raw HTML on the left, a\n * live rendered preview on the right, with a draggable divider between them\n * and a resizable body. The preview runs the same sanitizer the host applies\n * on the way back, so what you see is what the document becomes. Emits\n * `wysiwyg-source-apply` detail: { html } and `wysiwyg-source-cancel`.\n \n The code pane is a lightweight editor: a real `<textarea>` for input, with a\n * highlight.js-coloured layer painted behind it and a synced line-number\n * gutter. No heavyweight code-editor dependency.\n /\n@customElement('nile-wysiwyg-source-view')\nexport class NileWysiwygSourceView extends NileElement {\n @property({ type: String }) value = '';\n\n @query('textarea') private textarea?: HTMLTextAreaElement;\n\n @query('.hl > code') private highlightEl?: HTMLElement;\n\n @query('.linenos-inner') private linenosEl?: HTMLElement;\n\n @query('.body') private bodyEl?: HTMLElement;\n\n /* Current source text, drives the live preview, highlight and gutter. /\n @state() private draft = '';\n\n /\n Fraction of the body width given to the code pane (the rest is preview).\n * Clamped while dragging the divider.\n /\n @state() private splitRatio = 0.5;\n\n /* Whether the divider is currently being dragged. /\n @state() private splitDragging = false;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n overflow: hidden;\n min-height: var(--nile-wysiwyg-min-height, 200px);\n height: var(--nile-wysiwyg-source-height, 340px);\n max-height: var(\n --nile-wysiwyg-source-max-height,\n var(--nile-wysiwyg-max-height, 70vh)\n );\n resize: vertical;\n }\n\n .bar {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 6px 12px;\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary)));\n }\n\n .actions {\n display: flex;\n gap: 8px;\n }\n\n button {\n font: inherit;\n font-size: 12px;\n padding: 4px 12px;\n border-radius: 6px;\n border: 1px solid transparent;\n cursor: pointer;\n background: transparent;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n button.primary {\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n }\n\n .body {\n flex: 1 1 auto;\n display: flex;\n align-items: stretch;\n overflow: hidden;\n min-height: 0;\n box-sizing: border-box;\n }\n\n .body--dragging {\n cursor: col-resize;\n user-select: none;\n -webkit-user-select: none;\n }\n\n .body--dragging .pane {\n pointer-events: none;\n }\n\n .pane {\n min-width: 0;\n min-height: 0;\n box-sizing: border-box;\n }\n\n / --- Lightweight code editor: gutter + highlighted textarea --- /\n .pane--code {\n display: flex;\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n / Shared code metrics, inherited by the gutter, highlight and textarea\n so every line lines up to the pixel. /\n font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 12px;\n line-height: 18px;\n tab-size: 2;\n -moz-tab-size: 2;\n }\n\n .linenos {\n flex: 0 0 auto;\n overflow: hidden;\n box-sizing: border-box;\n padding: 12px 8px 0;\n text-align: right;\n color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n user-select: none;\n }\n\n .linenos-inner {\n will-change: transform;\n }\n\n .linenos-inner > div {\n height: 18px;\n }\n\n .input-wrap {\n position: relative;\n flex: 1 1 0;\n min-width: 0;\n overflow: hidden;\n }\n\n / Highlight layer and textarea share the exact same box (offset for\n padding via top/left, extending to the edges for horizontal scroll),\n so the coloured text sits directly under the caret. /\n .hl,\n textarea {\n position: absolute;\n top: 12px;\n left: 16px;\n right: 0;\n bottom: 0;\n margin: 0;\n border: 0;\n padding: 0;\n font: inherit;\n line-height: inherit;\n tab-size: inherit;\n white-space: pre;\n word-wrap: normal;\n overflow-wrap: normal;\n box-sizing: border-box;\n }\n\n .hl {\n overflow: hidden;\n pointer-events: none;\n color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary-900));\n }\n\n .hl > code {\n display: block;\n will-change: transform;\n }\n\n textarea {\n width: auto;\n resize: none;\n outline: none;\n overflow: auto;\n background: transparent;\n color: transparent;\n caret-color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary-900));\n }\n\n / Must be translucent: the textarea's text is transparent and the\n coloured code sits BEHIND it, so an opaque selection would hide the\n text. A tint lets the highlighted code show through the selection. /\n textarea::selection {\n background: rgba(41, 112, 255, 0.3);\n }\n textarea::-moz-selection {\n background: rgba(41, 112, 255, 0.3);\n }\n\n / highlight.js token palette (Atom One Light), matching code blocks. /\n .hl .hljs-comment,\n .hl .hljs-quote { color: var(--ng-componentcolors-utility-gray-500); font-style: italic; }\n .hl .hljs-keyword,\n .hl .hljs-selector-tag,\n .hl .hljs-doctag { color: var(--ng-componentcolors-utility-purple-600); }\n .hl .hljs-name,\n .hl .hljs-selector-id,\n .hl .hljs-selector-class,\n .hl .hljs-tag { color: var(--ng-componentcolors-utility-error-600); }\n .hl .hljs-literal,\n .hl .hljs-built_in { color: var(--ng-componentcolors-utility-blue-600); }\n .hl .hljs-string,\n .hl .hljs-attribute,\n .hl .hljs-meta .hljs-string { color: var(--ng-componentcolors-utility-green-600); }\n .hl .hljs-attr,\n .hl .hljs-variable,\n .hl .hljs-type,\n .hl .hljs-number { color: var(--ng-componentcolors-utility-orange-600); }\n .hl .hljs-symbol,\n .hl .hljs-meta,\n .hl .hljs-title { color: var(--ng-componentcolors-utility-indigo-600); }\n\n / Draggable divider between the code and preview panes. /\n .gutter {\n flex: 0 0 auto;\n position: relative;\n width: 1px;\n align-self: stretch;\n background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n cursor: col-resize;\n touch-action: none;\n }\n\n .gutter::before {\n content: '';\n position: absolute;\n inset: 0 -4px;\n }\n\n .gutter:hover,\n .body--dragging .gutter {\n background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));\n }\n\n .pane--preview {\n flex: 1 1 0;\n overflow: auto;\n border-left: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n }\n\n nile-wysiwyg-preview {\n display: block;\n }\n\n .preview-empty {\n display: block;\n padding: 12px 16px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n font-size: 12px;\n opacity: 0.7;\n }\n `,\n ];\n }\n\n protected willUpdate(changed: Map<string, unknown>): void {\n // Sync the draft (and thus preview/highlight) whenever the host sets value.\n if (changed.has('value')) this.draft = this.value;\n }\n\n /* The current (possibly edited) source text — what \"Done\" would apply. /\n public get currentValue(): string {\n return this.draft;\n }\n\n public focusInput(): void {\n this.updateComplete.then(() => this.textarea?.focus());\n }\n\n /* highlight.js-coloured HTML for the current draft (falls back to escaped). /\n private get highlighted(): string {\n if (!this.draft) return '';\n try {\n return hljs.highlight(this.draft, { language: 'xml' }).value;\n } catch {\n return this.draft.replace(/[&<>]/g, c => ({ '&': '&', '<': '<', '>': '>' }[c]!));\n }\n }\n\n private get lineCount(): number {\n return this.draft ? this.draft.split('\\n').length : 1;\n }\n\n /* Begins a pointer-driven resize of the split divider. /\n private startSplitDrag = (e: PointerEvent) => {\n const body = this.bodyEl;\n if (!body) return;\n e.preventDefault();\n this.splitDragging = true;\n\n const rect = body.getBoundingClientRect();\n const MIN = 0.15;\n const MAX = 0.85;\n\n const onMove = (ev: PointerEvent) => {\n if (rect.width === 0) return;\n const ratio = (ev.clientX - rect.left) / rect.width;\n this.splitRatio = Math.min(MAX, Math.max(MIN, ratio));\n };\n const onUp = () => {\n this.splitDragging = false;\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n };\n\n /* Resets the divider to a 50/50 layout (double-click affordance). /\n private resetSplit = () => {\n this.splitRatio = 0.5;\n };\n\n private onInput = (e: Event) => {\n this.draft = (e.target as HTMLTextAreaElement).value;\n };\n\n /* Keeps the highlight layer and line-number gutter aligned with scroll. /\n private onScroll = (e: Event) => {\n const ta = e.target as HTMLTextAreaElement;\n if (this.highlightEl) {\n this.highlightEl.style.transform = `translate(${-ta.scrollLeft}px, ${-ta.scrollTop}px)`;\n }\n if (this.linenosEl) {\n this.linenosEl.style.transform = `translateY(${-ta.scrollTop}px)`;\n }\n };\n\n public render(): TemplateResult {\n const preview = sanitizeHtml(this.draft);\n const lines: TemplateResult[] = [];\n for (let i = 1; i <= this.lineCount; i += 1) lines.push(html`<div>${i}</div>`);\n return html`\n <div class=\"bar\" part=\"source-bar\">\n <span>HTML</span>\n <span class=\"actions\">\n <button type=\"button\" @click=${() => this.emit('wysiwyg-source-cancel')}>\n Cancel\n </button>\n <button\n type=\"button\"\n class=\"primary\"\n @click=${() => this.emit('wysiwyg-source-apply', { html: this.draft })}\n >\n Done\n </button>\n </span>\n </div>\n <div class=${classMap({ body: true, 'body--dragging': this.splitDragging })}>\n <div class=\"pane pane--code\" style=\"flex: 0 0 ${this.splitRatio 100}%\">\n <div class=\"linenos\" part=\"line-numbers\" aria-hidden=\"true\">\n <div class=\"linenos-inner\">${lines}</div>\n </div>\n <div class=\"input-wrap\">\n <pre class=\"hl\" aria-hidden=\"true\"><code>${unsafeHTML(this.highlighted)}</code></pre>\n <textarea\n part=\"source-textarea\"\n spellcheck=\"false\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n wrap=\"off\"\n .value=${this.value}\n @input=${this.onInput}\n @scroll=${this.onScroll}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n e.stopPropagation();\n this.emit('wysiwyg-source-cancel');\n }\n }}\n ></textarea>\n </div>\n </div>\n <div\n class=\"gutter\"\n part=\"gutter\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n aria-label=\"Resize source and preview\"\n title=\"Drag to resize · double-click to reset\"\n @pointerdown=${this.startSplitDrag}\n @dblclick=${this.resetSplit}\n ></div>\n <div class=\"pane pane--preview\" part=\"preview\">\n ${this.draft.trim()\n ? html`<nile-wysiwyg-preview .content=${preview}></nile-wysiwyg-preview>`\n : html`<span class=\"preview-empty\">Nothing to preview</span>`}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-source-view': NileWysiwygSourceView;\n }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/special-chars.js CHANGED Viewed

@@ -93,7 +93,7 @@ let NileWysiwygSpecialChars = class NileWysiwygSpecialChars extends NileElement
         .panel {
           width: 316px;
           padding: 8px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));

package/dist/src/nile-wysiwyg-editor/ui/special-chars.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"special-chars.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/special-chars.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-button-toggle-group/index';\nimport '../../nile-button-toggle/index';\n\ninterface CharCategory {\n key: string;\n label: string;\n /** Representative glyph shown as the (iconified) tab label. /\n icon: string;\n chars: string[];\n}\n\nconst CATEGORIES: CharCategory[] = [\n {\n key: 'punctuation',\n label: 'Punctuation',\n icon: '¶',\n chars: [\n '–', '—', '…', '‘', '’', '“', '”', '‚', '„', '«', '»', '‹', '›', '§',\n '¶', '†', '‡', '•', '·', '¡', '¿', '′', '″', '‰',\n ],\n },\n {\n key: 'currency',\n label: 'Currency',\n icon: '$',\n chars: [\n '$', '€', '£', '¥', '₹', '¢', '₩', '₽', '₺', '₪', '₫', '₦', '₴', '₱',\n '฿', '₿',\n ],\n },\n {\n key: 'math',\n label: 'Math',\n icon: '∑',\n chars: [\n '±', '×', '÷', '≠', '≈', '≤', '≥', '¬', '∞', '∑', '∏', '√', '∫', '∂',\n '∆', '∇', '∈', '∉', '∩', '∪', '⊂', '⊃', '°', 'µ', '‰', '½', '⅓', '¼',\n '¾', '⅛',\n ],\n },\n {\n key: 'arrows',\n label: 'Arrows',\n icon: '→',\n chars: [\n '←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔', '↩', '↪', '↖',\n '↗', '↘', '↙', '⟵', '⟶',\n ],\n },\n {\n key: 'latin',\n label: 'Latin',\n icon: 'Á',\n chars: [\n 'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í',\n 'Î', 'Ï', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'ß',\n 'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í',\n 'î', 'ï', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ÿ',\n ],\n },\n {\n key: 'symbols',\n label: 'Symbols',\n icon: '★',\n chars: [\n '©', '®', '™', '℠', '№', '℮', '✓', '✗', '★', '☆', '♠', '♣', '♥', '♦',\n '☀', '☁', '☂', '♻', '⚠', '⌘', '⌥', '⇧', '⏎', '⌫',\n ],\n },\n];\n\n/\n Special characters picker (the Ω toolbar item). Emits\n * `wysiwyg-char-select` detail: { char } and `wysiwyg-char-cancel`.\n */\n@customElement('nile-wysiwyg-special-chars')\nexport class NileWysiwygSpecialChars extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @state() private category = CATEGORIES[0].key;\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, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n .tabs {\n flex-wrap: wrap;\n margin-bottom: 8px;\n max-width: 100%;\n }\n\n .cat-icon {\n display: inline-block;\n min-width: 16px;\n font-size: 15px;\n line-height: 1;\n text-align: center;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n gap: 2px;\n max-height: 180px;\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n .char {\n font: inherit;\n font-size: 15px;\n height: 28px;\n border: none;\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .char:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n `,\n ];\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.emit('wysiwyg-char-cancel');\n }\n }\n\n public render(): TemplateResult {\n const current = CATEGORIES.find(c => c.key === this.category) ?? CATEGORIES[0];\n return html`\n <div\n class=\"panel\"\n part=\"special-chars\"\n @keydown=${this.handleKeydown}\n @mousedown=${(e: Event) => e.preventDefault()}\n >\n <nile-button-toggle-group\n class=\"tabs\"\n .value=${this.category}\n @nile-change=${(e: CustomEvent) => {\n this.category = e.detail.value as string;\n }}\n >\n ${CATEGORIES.map(\n cat => html`\n <nile-button-toggle\n value=${cat.key}\n title=${cat.label}\n aria-label=${cat.label}\n ><span class=\"cat-icon\">${cat.icon}</span></nile-button-toggle\n >\n `\n )}\n </nile-button-toggle-group>\n <div class=\"grid\" role=\"listbox\" aria-label=\"Special characters\">\n ${current.chars.map(\n char => html`\n <button\n type=\"button\"\n class=\"char\"\n title=${char}\n @click=${() => this.emit('wysiwyg-char-select', { char })}\n >\n ${char}\n </button>\n `\n )}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-special-chars': NileWysiwygSpecialChars;\n }\n}\n"]}
1	+ {"version":3,"file":"special-chars.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/special-chars.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-button-toggle-group/index';\nimport '../../nile-button-toggle/index';\n\ninterface CharCategory {\n key: string;\n label: string;\n /** Representative glyph shown as the (iconified) tab label. /\n icon: string;\n chars: string[];\n}\n\nconst CATEGORIES: CharCategory[] = [\n {\n key: 'punctuation',\n label: 'Punctuation',\n icon: '¶',\n chars: [\n '–', '—', '…', '‘', '’', '“', '”', '‚', '„', '«', '»', '‹', '›', '§',\n '¶', '†', '‡', '•', '·', '¡', '¿', '′', '″', '‰',\n ],\n },\n {\n key: 'currency',\n label: 'Currency',\n icon: '$',\n chars: [\n '$', '€', '£', '¥', '₹', '¢', '₩', '₽', '₺', '₪', '₫', '₦', '₴', '₱',\n '฿', '₿',\n ],\n },\n {\n key: 'math',\n label: 'Math',\n icon: '∑',\n chars: [\n '±', '×', '÷', '≠', '≈', '≤', '≥', '¬', '∞', '∑', '∏', '√', '∫', '∂',\n '∆', '∇', '∈', '∉', '∩', '∪', '⊂', '⊃', '°', 'µ', '‰', '½', '⅓', '¼',\n '¾', '⅛',\n ],\n },\n {\n key: 'arrows',\n label: 'Arrows',\n icon: '→',\n chars: [\n '←', '→', '↑', '↓', '↔', '↕', '⇐', '⇒', '⇑', '⇓', '⇔', '↩', '↪', '↖',\n '↗', '↘', '↙', '⟵', '⟶',\n ],\n },\n {\n key: 'latin',\n label: 'Latin',\n icon: 'Á',\n chars: [\n 'À', 'Á', 'Â', 'Ã', 'Ä', 'Å', 'Æ', 'Ç', 'È', 'É', 'Ê', 'Ë', 'Ì', 'Í',\n 'Î', 'Ï', 'Ñ', 'Ò', 'Ó', 'Ô', 'Õ', 'Ö', 'Ø', 'Ù', 'Ú', 'Û', 'Ü', 'ß',\n 'à', 'á', 'â', 'ã', 'ä', 'å', 'æ', 'ç', 'è', 'é', 'ê', 'ë', 'ì', 'í',\n 'î', 'ï', 'ñ', 'ò', 'ó', 'ô', 'õ', 'ö', 'ø', 'ù', 'ú', 'û', 'ü', 'ÿ',\n ],\n },\n {\n key: 'symbols',\n label: 'Symbols',\n icon: '★',\n chars: [\n '©', '®', '™', '℠', '№', '℮', '✓', '✗', '★', '☆', '♠', '♣', '♥', '♦',\n '☀', '☁', '☂', '♻', '⚠', '⌘', '⌥', '⇧', '⏎', '⌫',\n ],\n },\n];\n\n/\n Special characters picker (the Ω toolbar item). Emits\n * `wysiwyg-char-select` detail: { char } and `wysiwyg-char-cancel`.\n */\n@customElement('nile-wysiwyg-special-chars')\nexport class NileWysiwygSpecialChars extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @state() private category = CATEGORIES[0].key;\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, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n .tabs {\n flex-wrap: wrap;\n margin-bottom: 8px;\n max-width: 100%;\n }\n\n .cat-icon {\n display: inline-block;\n min-width: 16px;\n font-size: 15px;\n line-height: 1;\n text-align: center;\n }\n\n .grid {\n display: grid;\n grid-template-columns: repeat(10, 1fr);\n gap: 2px;\n max-height: 180px;\n overflow-y: auto;\n overscroll-behavior: contain;\n }\n\n .char {\n font: inherit;\n font-size: 15px;\n height: 28px;\n border: none;\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n .char:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n `,\n ];\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.emit('wysiwyg-char-cancel');\n }\n }\n\n public render(): TemplateResult {\n const current = CATEGORIES.find(c => c.key === this.category) ?? CATEGORIES[0];\n return html`\n <div\n class=\"panel\"\n part=\"special-chars\"\n @keydown=${this.handleKeydown}\n @mousedown=${(e: Event) => e.preventDefault()}\n >\n <nile-button-toggle-group\n class=\"tabs\"\n .value=${this.category}\n @nile-change=${(e: CustomEvent) => {\n this.category = e.detail.value as string;\n }}\n >\n ${CATEGORIES.map(\n cat => html`\n <nile-button-toggle\n value=${cat.key}\n title=${cat.label}\n aria-label=${cat.label}\n ><span class=\"cat-icon\">${cat.icon}</span></nile-button-toggle\n >\n `\n )}\n </nile-button-toggle-group>\n <div class=\"grid\" role=\"listbox\" aria-label=\"Special characters\">\n ${current.chars.map(\n char => html`\n <button\n type=\"button\"\n class=\"char\"\n title=${char}\n @click=${() => this.emit('wysiwyg-char-select', { char })}\n >\n ${char}\n </button>\n `\n )}\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-special-chars': NileWysiwygSpecialChars;\n }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/suggest-list.js CHANGED Viewed

@@ -34,11 +34,14 @@ let NileWysiwygSuggestList = class NileWysiwygSuggestList extends NileElement {
         .list {
           min-width: 200px;
-          max-width: 320px;
+          /* Wide enough for long field names (e.g. source.JobAssignment…); longer
+             labels wrap rather than scrolling sideways. */
+          max-width: min(480px, calc(100vw - 32px));
           max-height: 240px;
           overflow-y: auto;
+          overflow-x: hidden;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
@@ -56,12 +59,20 @@ let NileWysiwygSuggestList = class NileWysiwygSuggestList extends NileElement {
           color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
+        .label {
+          min-width: 0;
+          /* Wrap a long label instead of truncating it: names that differ only in
+             their last word (…JobFunction / …JobFunctionCode) must stay tellable apart. */
+          overflow-wrap: anywhere;
+        }
         .item.active {
           background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
           color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
         .hint {
+          flex-shrink: 0;
           font-size: 11px;
           color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
@@ -117,7 +128,7 @@ let NileWysiwygSuggestList = class NileWysiwygSuggestList extends NileElement {
             }}
                   @click=${() => this.selectCurrent()}
                 >
-                  <span>${item.label}</span>
+                  <span class="label" title=${item.label}>${item.label}</span>
                   ${item.hint ? html `<span class="hint">${item.hint}</span>` : ''}
                 </div>
               `)

package/dist/src/nile-wysiwyg-editor/ui/suggest-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"suggest-list.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/suggest-list.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;AAStD;;;;;GAKG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,WAAW;IAAhD;;QACuC,SAAI,GAAG,KAAK,CAAC;QAEzB,UAAK,GAAkB,EAAE,CAAC;QAEzC,gBAAW,GAAG,CAAC,CAAC;~~IAsHnC~~,CAAC;~~IApHQ~~,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqDF~~;SACF,CAAC;IACJ,CAAC;IAES,UAAU;QAClB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IAClE,CAAC;IAES,OAAO,CAAC,OAA6B;QAC7C,sEAAsE;QACtE,uEAAuE;QACvE,8EAA8E;QAC9E,IAAI,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACvD,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;YAC5D,MAA6B,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAEM,IAAI;QACT,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IACvF,CAAC;IAEM,IAAI;QACT,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACtB,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACpF,CAAC;IACH,CAAC;IAEM,WAAW;QAChB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACvB,CAAC;IAEM,aAAa;QAClB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,wBAAwB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;yDAC0C,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC/E,IAAI,CAAC,KAAK,CAAC,MAAM;YACjB,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CACZ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;gCAEH,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;gCAC1C,GAAG,EAAE;gBACjB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAC3B,CAAC;2BACQ,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;~~0BAE3B~~,IAAI,CAAC,KAAK;~~oBAChB~~,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE;;eAElE,CACF;YACH,CAAC,CAAC,IAAI,CAAA,qCAAqC;;KAEhD,CAAC;IACJ,CAAC;CACF,CAAA;~~AA1H6C~~;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAc;AAEzB;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAA2B;AAEzC;IAAhB,KAAK,EAAE;2DAAyB;AALtB,sBAAsB;IADlC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,sBAAsB,~~CA2HlC~~","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\nexport interface SuggestItem {\n key: string;\n label: string;\n /** Secondary text shown right-aligned (e.g. slash-command hint). /\n hint?: string;\n}\n\n/\n Keyboard-navigable suggestion popup shared by mentions and slash commands.\n * The host positions it, feeds `items`, and drives navigation through\n * next()/prev()/selectCurrent(); picking an item emits\n * `wysiwyg-suggest-select` with the item.\n */\n@customElement('nile-wysiwyg-suggest-list')\nexport class NileWysiwygSuggestList extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ attribute: false }) items: SuggestItem[] = [];\n\n @state() private activeIndex = 0;\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: 25;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .list {\n min-width: 200px;\n max-width: ~~320px~~;\n max-height: 240px;\n overflow-y: auto;\n padding: 4px;\n background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n font-size: 13px;\n }\n\n .item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 6px 8px;\n border-radius: 5px;\n cursor: pointer;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n .item.active {\n background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n }\n\n .hint {\n font-size: 11px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n }\n\n .empty {\n padding: 6px 8px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n }\n `,\n ];\n }\n\n protected willUpdate(): void {\n if (this.activeIndex >= this.items.length) this.activeIndex = 0;\n }\n\n protected updated(changed: Map<string, unknown>): void {\n // Keep the highlighted item visible as the user arrows through a list\n // that overflows the popup's max-height. `nearest` is a no-op when the\n // item is already visible (e.g. after a hover), so it never fights the mouse.\n if (changed.has('activeIndex') \|\| changed.has('items')) {\n const active = this.renderRoot.querySelector('.item.active');\n (active as HTMLElement \| null)?.scrollIntoView({ block: 'nearest' });\n }\n }\n\n public next(): void {\n if (this.items.length) this.activeIndex = (this.activeIndex + 1) % this.items.length;\n }\n\n public prev(): void {\n if (this.items.length) {\n this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;\n }\n }\n\n public resetActive(): void {\n this.activeIndex = 0;\n }\n\n public selectCurrent(): boolean {\n const item = this.items[this.activeIndex];\n if (!item) return false;\n this.emit('wysiwyg-suggest-select', { item });\n return true;\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"list\" part=\"suggest-list\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${this.items.length\n ? this.items.map(\n (item, index) => html`\n <div\n class=\"item ${index === this.activeIndex ? 'active' : ''}\"\n @mouseenter=${() => {\n this.activeIndex = index;\n }}\n @click=${() => this.selectCurrent()}\n >\n <span>${item.label}</span>\n ${item.hint ? html`<span class=\"hint\">${item.hint}</span>` : ''}\n </div>\n `\n )\n : html`<div class=\"empty\">No results</div>`}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-suggest-list': NileWysiwygSuggestList;\n }\n}\n"]}
1	+ {"version":3,"file":"suggest-list.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/suggest-list.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';\n\nexport interface SuggestItem {\n key: string;\n label: string;\n /** Secondary text shown right-aligned (e.g. slash-command hint). /\n hint?: string;\n}\n\n/\n Keyboard-navigable suggestion popup shared by mentions and slash commands.\n * The host positions it, feeds `items`, and drives navigation through\n * next()/prev()/selectCurrent(); picking an item emits\n * `wysiwyg-suggest-select` with the item.\n /\n@customElement('nile-wysiwyg-suggest-list')\nexport class NileWysiwygSuggestList extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ attribute: false }) items: SuggestItem[] = [];\n\n @state() private activeIndex = 0;\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: 25;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .list {\n min-width: 200px;\n / Wide enough for long field names (e.g. source.JobAssignment…); longer\n labels wrap rather than scrolling sideways. /\n max-width: min(480px, calc(100vw - 32px));\n max-height: 240px;\n overflow-y: auto;\n overflow-x: hidden;\n padding: 4px;\n background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n font-size: 13px;\n }\n\n .item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 6px 8px;\n border-radius: 5px;\n cursor: pointer;\n color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));\n }\n\n .label {\n min-width: 0;\n / Wrap a long label instead of truncating it: names that differ only in\n their last word (…JobFunction / …JobFunctionCode) must stay tellable apart. */\n overflow-wrap: anywhere;\n }\n\n .item.active {\n background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n }\n\n .hint {\n flex-shrink: 0;\n font-size: 11px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n }\n\n .empty {\n padding: 6px 8px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n }\n `,\n ];\n }\n\n protected willUpdate(): void {\n if (this.activeIndex >= this.items.length) this.activeIndex = 0;\n }\n\n protected updated(changed: Map<string, unknown>): void {\n // Keep the highlighted item visible as the user arrows through a list\n // that overflows the popup's max-height. `nearest` is a no-op when the\n // item is already visible (e.g. after a hover), so it never fights the mouse.\n if (changed.has('activeIndex') \|\| changed.has('items')) {\n const active = this.renderRoot.querySelector('.item.active');\n (active as HTMLElement \| null)?.scrollIntoView({ block: 'nearest' });\n }\n }\n\n public next(): void {\n if (this.items.length) this.activeIndex = (this.activeIndex + 1) % this.items.length;\n }\n\n public prev(): void {\n if (this.items.length) {\n this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;\n }\n }\n\n public resetActive(): void {\n this.activeIndex = 0;\n }\n\n public selectCurrent(): boolean {\n const item = this.items[this.activeIndex];\n if (!item) return false;\n this.emit('wysiwyg-suggest-select', { item });\n return true;\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"list\" part=\"suggest-list\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${this.items.length\n ? this.items.map(\n (item, index) => html`\n <div\n class=\"item ${index === this.activeIndex ? 'active' : ''}\"\n @mouseenter=${() => {\n this.activeIndex = index;\n }}\n @click=${() => this.selectCurrent()}\n >\n <span class=\"label\" title=${item.label}>${item.label}</span>\n ${item.hint ? html`<span class=\"hint\">${item.hint}</span>` : ''}\n </div>\n `\n )\n : html`<div class=\"empty\">No results</div>`}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-suggest-list': NileWysiwygSuggestList;\n }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js CHANGED Viewed

@@ -71,7 +71,7 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           left: 0;
           z-index: 30;
           padding: 8px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));
@@ -152,7 +152,7 @@ let NileWysiwygTablePicker = class NileWysiwygTablePicker extends NileElement {
           border: none;
           border-radius: 6px;
           background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
-          color: var(--ng-colors-text-white);
+          color: var(--nile-colors-white-base, var(--ng-colors-text-white));
           font-size: 12px;
           font-weight: 600;
           font-family: inherit;

package/dist/src/nile-wysiwyg-editor/ui/table-grid-picker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.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';\n\n/** Smallest grid shown before the pointer starts expanding it. /\nconst MIN_ROWS = 5;\nconst MIN_COLS = 5;\n\n/\n Toolbar item: a table button that opens a hover grid which auto-expands as\n * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a\n * \"Custom\" rows×cols input for larger tables. Picking a cell or confirming the\n * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.\n /\n@customElement('nile-wysiwyg-table-picker')\nexport class NileWysiwygTablePicker extends NileElement {\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Hard cap on the number of rows selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;\n\n /* Hard cap on the number of columns selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;\n\n @state() private open = false;\n\n @state() private hoverRows = 0;\n\n @state() private hoverCols = 0;\n\n @state() private customRows = '';\n\n @state() private customCols = '';\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: relative;\n display: inline-flex;\n }\n\n button.trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0 6px;\n box-sizing: border-box;\n border: none;\n border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n background: transparent;\n cursor: pointer;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n button.trigger:hover:not(:disabled) {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n button.trigger:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: 30;\n padding: 8px;\n background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n .grid {\n display: grid;\n gap: 2px;\n }\n\n .cell {\n width: 14px;\n height: 14px;\n border: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n border-radius: 2px;\n box-sizing: border-box;\n cursor: pointer;\n }\n\n .cell.hot {\n background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100));\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .label {\n margin-top: 6px;\n text-align: center;\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n }\n\n .custom {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n }\n\n .custom input {\n width: 44px;\n height: 26px;\n padding: 0 6px;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 6px;\n font-size: 12px;\n box-sizing: border-box;\n text-align: center;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: inherit;\n / Hide native number spinners: they overlap the centered text in this\n narrow field and a stray click on the arrows mutates the value. /\n -moz-appearance: textfield;\n appearance: textfield;\n }\n\n .custom input::-webkit-outer-spin-button,\n .custom input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n .custom input:focus {\n outline: none;\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .custom .times {\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n }\n\n .custom button.insert {\n margin-left: auto;\n height: 26px;\n padding: 0 12px;\n border: none;\n border-radius: 6px;\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n color: var(--ng-colors-text-white);\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n }\n\n .custom button.insert:hover:not(:disabled) {\n background: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n }\n\n .custom button.insert:disabled {\n opacity: 0.4;\n cursor: default;\n }\n `,\n ];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('mousedown', this.handleOutside);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('mousedown', this.handleOutside);\n }\n\n private handleOutside = (event: MouseEvent): void => {\n if (this.open && !event.composedPath().includes(this)) this.open = false;\n };\n\n private pick(rows: number, cols: number): void {\n this.open = false;\n this.customRows = '';\n this.customCols = '';\n this.emit('wysiwyg-command', {\n name: 'insertTable',\n attrs: { rows, cols, withHeaderRow: true },\n });\n }\n\n /* Clamp raw input to 1..max; returns 0 when empty/invalid. */\n private clamp(raw: string, max: number): number {\n const n = parseInt(raw, 10);\n if (!Number.isFinite(n) \|\| n < 1) return 0;\n return Math.min(n, max);\n }\n\n private insertCustom(): void {\n const rows = this.clamp(this.customRows, this.maxRows);\n const cols = this.clamp(this.customCols, this.maxCols);\n if (rows >= 1 && cols >= 1) this.pick(rows, cols);\n }\n\n public render(): TemplateResult {\n // Grow the grid by one row/col once the pointer reaches the edge, capped.\n const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);\n const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);\n\n const cells: TemplateResult[] = [];\n for (let r = 1; r <= visibleRows; r += 1) {\n for (let c = 1; c <= visibleCols; c += 1) {\n cells.push(html`\n <span\n class=\"cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}\"\n @mouseenter=${() => {\n this.hoverRows = r;\n this.hoverCols = c;\n }}\n @click=${() => this.pick(r, c)}\n ></span>\n `);\n }\n }\n\n const customValid =\n this.clamp(this.customRows, this.maxRows) >= 1 &&\n this.clamp(this.customCols, this.maxCols) >= 1;\n\n return html`\n <button\n type=\"button\"\n class=\"trigger\"\n part=\"button\"\n aria-label=\"Insert table\"\n aria-expanded=${this.open ? 'true' : 'false'}\n ?disabled=${this.disabled}\n @mousedown=${(e: Event) => e.preventDefault()}\n @click=${() => {\n this.open = !this.open;\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n <nile-glyph name=\"grid-01\" size=\"18\" method=\"stroke\"></nile-glyph>\n </button>\n ${this.open\n ? html`\n <div class=\"panel\">\n <div\n class=\"grid\"\n style=\"grid-template-columns: repeat(${visibleCols}, 14px)\"\n @mousedown=${(e: Event) => e.preventDefault()}\n @mouseleave=${() => {\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n ${cells}\n </div>\n <div class=\"label\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n </div>\n <div class=\"custom\">\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxRows}\n aria-label=\"Rows\"\n placeholder=\"Rows\"\n .value=${this.customRows}\n @input=${(e: Event) => {\n this.customRows = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <span class=\"times\">×</span>\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxCols}\n aria-label=\"Columns\"\n placeholder=\"Cols\"\n .value=${this.customCols}\n @input=${(e: Event) => {\n this.customCols = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <button\n type=\"button\"\n class=\"insert\"\n ?disabled=${!customValid}\n @click=${() => this.insertCustom()}\n >\n Insert\n </button>\n </div>\n </div>\n `\n : ''}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-picker': NileWysiwygTablePicker;\n }\n}\n"]}
1	+ {"version":3,"file":"table-grid-picker.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-grid-picker.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';\n\n/** Smallest grid shown before the pointer starts expanding it. /\nconst MIN_ROWS = 5;\nconst MIN_COLS = 5;\n\n/\n Toolbar item: a table button that opens a hover grid which auto-expands as\n * the pointer reaches the last row/column (up to `maxRows`×`maxCols`), plus a\n * \"Custom\" rows×cols input for larger tables. Picking a cell or confirming the\n * custom size emits `wysiwyg-command` with `insertTable { rows, cols }`.\n /\n@customElement('nile-wysiwyg-table-picker')\nexport class NileWysiwygTablePicker extends NileElement {\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /* Hard cap on the number of rows selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-rows', reflect: true }) maxRows = 20;\n\n /* Hard cap on the number of columns selectable via grid or custom input. /\n @property({ type: Number, attribute: 'max-cols', reflect: true }) maxCols = 20;\n\n @state() private open = false;\n\n @state() private hoverRows = 0;\n\n @state() private hoverCols = 0;\n\n @state() private customRows = '';\n\n @state() private customCols = '';\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: relative;\n display: inline-flex;\n }\n\n button.trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0 6px;\n box-sizing: border-box;\n border: none;\n border-radius: var(--nile-radius-radius-lg, var(--ng-radius-md, 8px));\n background: transparent;\n cursor: pointer;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n }\n\n button.trigger:hover:not(:disabled) {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n\n button.trigger:disabled {\n opacity: 0.4;\n cursor: default;\n }\n\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: 30;\n padding: 8px;\n background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n .grid {\n display: grid;\n gap: 2px;\n }\n\n .cell {\n width: 14px;\n height: 14px;\n border: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n border-radius: 2px;\n box-sizing: border-box;\n cursor: pointer;\n }\n\n .cell.hot {\n background: var(--nile-colors-primary-100, var(--ng-componentcolors-utility-blue-100));\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .label {\n margin-top: 6px;\n text-align: center;\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n }\n\n .custom {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));\n }\n\n .custom input {\n width: 44px;\n height: 26px;\n padding: 0 6px;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 6px;\n font-size: 12px;\n box-sizing: border-box;\n text-align: center;\n color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n font-family: inherit;\n / Hide native number spinners: they overlap the centered text in this\n narrow field and a stray click on the arrows mutates the value. /\n -moz-appearance: textfield;\n appearance: textfield;\n }\n\n .custom input::-webkit-outer-spin-button,\n .custom input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n .custom input:focus {\n outline: none;\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .custom .times {\n font-size: 12px;\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n }\n\n .custom button.insert {\n margin-left: auto;\n height: 26px;\n padding: 0 12px;\n border: none;\n border-radius: 6px;\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n font-size: 12px;\n font-weight: 600;\n font-family: inherit;\n cursor: pointer;\n }\n\n .custom button.insert:hover:not(:disabled) {\n background: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));\n }\n\n .custom button.insert:disabled {\n opacity: 0.4;\n cursor: default;\n }\n `,\n ];\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('mousedown', this.handleOutside);\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('mousedown', this.handleOutside);\n }\n\n private handleOutside = (event: MouseEvent): void => {\n if (this.open && !event.composedPath().includes(this)) this.open = false;\n };\n\n private pick(rows: number, cols: number): void {\n this.open = false;\n this.customRows = '';\n this.customCols = '';\n this.emit('wysiwyg-command', {\n name: 'insertTable',\n attrs: { rows, cols, withHeaderRow: true },\n });\n }\n\n /* Clamp raw input to 1..max; returns 0 when empty/invalid. */\n private clamp(raw: string, max: number): number {\n const n = parseInt(raw, 10);\n if (!Number.isFinite(n) \|\| n < 1) return 0;\n return Math.min(n, max);\n }\n\n private insertCustom(): void {\n const rows = this.clamp(this.customRows, this.maxRows);\n const cols = this.clamp(this.customCols, this.maxCols);\n if (rows >= 1 && cols >= 1) this.pick(rows, cols);\n }\n\n public render(): TemplateResult {\n // Grow the grid by one row/col once the pointer reaches the edge, capped.\n const visibleRows = Math.min(Math.max(MIN_ROWS, this.hoverRows + 1), this.maxRows);\n const visibleCols = Math.min(Math.max(MIN_COLS, this.hoverCols + 1), this.maxCols);\n\n const cells: TemplateResult[] = [];\n for (let r = 1; r <= visibleRows; r += 1) {\n for (let c = 1; c <= visibleCols; c += 1) {\n cells.push(html`\n <span\n class=\"cell ${r <= this.hoverRows && c <= this.hoverCols ? 'hot' : ''}\"\n @mouseenter=${() => {\n this.hoverRows = r;\n this.hoverCols = c;\n }}\n @click=${() => this.pick(r, c)}\n ></span>\n `);\n }\n }\n\n const customValid =\n this.clamp(this.customRows, this.maxRows) >= 1 &&\n this.clamp(this.customCols, this.maxCols) >= 1;\n\n return html`\n <button\n type=\"button\"\n class=\"trigger\"\n part=\"button\"\n aria-label=\"Insert table\"\n aria-expanded=${this.open ? 'true' : 'false'}\n ?disabled=${this.disabled}\n @mousedown=${(e: Event) => e.preventDefault()}\n @click=${() => {\n this.open = !this.open;\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n <nile-glyph name=\"grid-01\" size=\"18\" method=\"stroke\"></nile-glyph>\n </button>\n ${this.open\n ? html`\n <div class=\"panel\">\n <div\n class=\"grid\"\n style=\"grid-template-columns: repeat(${visibleCols}, 14px)\"\n @mousedown=${(e: Event) => e.preventDefault()}\n @mouseleave=${() => {\n this.hoverRows = 0;\n this.hoverCols = 0;\n }}\n >\n ${cells}\n </div>\n <div class=\"label\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${this.hoverRows > 0 ? `${this.hoverRows} × ${this.hoverCols}` : 'Pick a size'}\n </div>\n <div class=\"custom\">\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxRows}\n aria-label=\"Rows\"\n placeholder=\"Rows\"\n .value=${this.customRows}\n @input=${(e: Event) => {\n this.customRows = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <span class=\"times\">×</span>\n <input\n type=\"number\"\n min=\"1\"\n max=${this.maxCols}\n aria-label=\"Columns\"\n placeholder=\"Cols\"\n .value=${this.customCols}\n @input=${(e: Event) => {\n this.customCols = (e.target as HTMLInputElement).value;\n }}\n @keydown=${(e: KeyboardEvent) => {\n if (e.key === 'Enter') this.insertCustom();\n }}\n />\n <button\n type=\"button\"\n class=\"insert\"\n ?disabled=${!customValid}\n @click=${() => this.insertCustom()}\n >\n Insert\n </button>\n </div>\n </div>\n `\n : ''}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-picker': NileWysiwygTablePicker;\n }\n}\n"]}

package/dist/src/nile-wysiwyg-editor/ui/table-menu.js CHANGED Viewed

@@ -47,7 +47,7 @@ let NileWysiwygTableMenu = class NileWysiwygTableMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
+          background: var(--nile-wysiwyg-popover-bg, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));
           border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 8px;
           box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));

package/dist/src/nile-wysiwyg-editor/ui/table-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-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;AAEnD,OAAO,2CAA2C,CAAC;AAQnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAuE3D,CAAC;IArEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;yCACqB,EAAE,CAAC,KAAK;;;6BAGpB,EAAE,CAAC,KAAK;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;kBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;;WAG/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC","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 { CommandName } from '../engine/commands';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\ninterface TableOp {\n name: CommandName;\n label: string;\n icon: string;\n}\n\nconst OPS: TableOp[] = [\n { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/*\n Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\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, var(--ng-colors-bg-primary));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-text-secondary-700));\n }\n\n button:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n `,\n ];\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${OPS.map(\n op => html`\n <nile-lite-tooltip content=${op.label} placement=\"top\">\n <button\n type=\"button\"\n aria-label=${op.label}\n @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n >\n ${renderGlyph(op.icon, 16)}\n </button>\n </nile-lite-tooltip>\n `\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n }\n}\n"]}
1	+ {"version":3,"file":"table-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/table-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;AAEnD,OAAO,2CAA2C,CAAC;AAQnD,MAAM,GAAG,GAAc;IACrB,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACnF,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,yBAAyB,EAAE;IAChF,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,6BAA6B,EAAE;IAC1F,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,2BAA2B,EAAE;IACxF,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,WAAW,EAAE;IAC7D,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,cAAc,EAAE;IACtE,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,sBAAsB,EAAE;IAC1E,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACxE,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,cAAc,EAAE;IAC7E,EAAE,IAAI,EAAE,mBAAmB,EAAE,KAAK,EAAE,kCAAkC,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7F,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,YAAY,EAAE;CACnE,CAAC;AAEF;;;GAGG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QACuC,SAAI,GAAG,KAAK,CAAC;IAuE3D,CAAC;IArEQ,MAAM,KAAK,MAAM;QACtB,OAAO;YACL,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4CF;SACF,CAAC;IACJ,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;uDACwC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;UAC7E,GAAG,CAAC,GAAG,CACP,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA;yCACqB,EAAE,CAAC,KAAK;;;6BAGpB,EAAE,CAAC,KAAK;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC;;kBAE5D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC;;;WAG/B,CACF;;KAEJ,CAAC;IACJ,CAAC;CACF,CAAA;AAvE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAc;AAD9C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAwEhC","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 { CommandName } from '../engine/commands';\nimport '../../nile-lite-tooltip/nile-lite-tooltip';\n\ninterface TableOp {\n name: CommandName;\n label: string;\n icon: string;\n}\n\nconst OPS: TableOp[] = [\n { name: 'addRowBefore', label: 'Add row above', icon: 'ng-between-vertical-start' },\n { name: 'addRowAfter', label: 'Add row below', icon: 'ng-between-vertical-end' },\n { name: 'addColumnBefore', label: 'Add column left', icon: 'ng-between-horizontal-start' },\n { name: 'addColumnAfter', label: 'Add column right', icon: 'ng-between-horizontal-end' },\n { name: 'deleteRow', label: 'Delete row', icon: 'ng-rows-2' },\n { name: 'deleteColumn', label: 'Delete column', icon: 'ng-columns-2' },\n { name: 'mergeCells', label: 'Merge cells', icon: 'ng-table-cells-merge' },\n { name: 'splitCell', label: 'Split cell', icon: 'ng-table-cells-split' },\n { name: 'toggleHeaderRow', label: 'Toggle header row', icon: 'ng-panel-top' },\n { name: 'toggleLayoutTable', label: 'Toggle layout table (borderless)', icon: 'ng-grid-2x2' },\n { name: 'deleteTable', label: 'Delete table', icon: 'ng-trash-2' },\n];\n\n/*\n Compact floating bar shown while the cursor is inside a table. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-table-menu')\nexport class NileWysiwygTableMenu extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\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, var(--nile-colors-white-base, var(--ng-colors-bg-primary)));\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\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, var(--ng-colors-text-secondary-700));\n }\n\n button:hover {\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));\n }\n `,\n ];\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"menu\" part=\"table-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${OPS.map(\n op => html`\n <nile-lite-tooltip content=${op.label} placement=\"top\">\n <button\n type=\"button\"\n aria-label=${op.label}\n @click=${() => this.emit('wysiwyg-command', { name: op.name })}\n >\n ${renderGlyph(op.icon, 16)}\n </button>\n </nile-lite-tooltip>\n `\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-table-menu': NileWysiwygTableMenu;\n }\n}\n"]}