npm - @aquera/nile-elements - Versions diffs - 2.0.0 → 2.0.1 - Mend

@aquera/nile-elements 2.0.0 → 2.0.1

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 (194) hide show

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

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

package/dist/src/nile-wysiwyg-editor/ui/find-replace.js CHANGED Viewed

@@ -42,8 +42,8 @@ let NileWysiwygFindBar = class NileWysiwygFindBar extends NileElement {
           align-items: center;
           gap: 6px;
           padding: 8px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, 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));
           font-size: 13px;
@@ -54,19 +54,19 @@ let NileWysiwygFindBar = class NileWysiwygFindBar extends NileElement {
           font-size: 13px;
           width: 160px;
           padding: 4px 8px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 6px;
           outline: none;
         }
         input:focus {
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
         .count {
           min-width: 42px;
           text-align: center;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           font-variant-numeric: tabular-nums;
         }
@@ -78,11 +78,11 @@ let NileWysiwygFindBar = class NileWysiwygFindBar extends NileElement {
           border-radius: 5px;
           background: transparent;
           cursor: pointer;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
       `,
         ];

package/dist/src/nile-wysiwyg-editor/ui/find-replace.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"find-replace.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/find-replace.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/*\n Find & replace bar pinned to the top-right of the editor. Emits:\n * - `wysiwyg-find` detail: { query }\n * - `wysiwyg-find-step` detail: { direction: 'next' \| 'prev' }\n * - `wysiwyg-replace` detail: { value }\n * - `wysiwyg-replace-all` detail: { value }\n * - `wysiwyg-find-close`\n */\n@customElement('nile-wysiwyg-find-bar')\nexport class NileWysiwygFindBar extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ type: Number }) matchCount = 0;\n\n @property({ type: Number }) activeIndex = 0;\n\n @query('.find-bar__query') queryInput?: HTMLInputElement;\n\n @query('.find-bar__replace') replaceInput?: HTMLInputElement;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 25;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .find-bar {\n display: grid;\n grid-template-columns: auto auto auto auto;\n align-items: center;\n gap: 6px;\n padding: 8px;\n background: var(--nile-wysiwyg-popover-bg, ~~#ffffff~~);\n border: 1px solid var(--nile-colors-neutral-400, ~~#d0d5dd~~);\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n font-size: 13px;\n }\n\n input {\n font: inherit;\n font-size: 13px;\n width: 160px;\n padding: 4px 8px;\n border: 1px solid var(--nile-colors-neutral-400, ~~#d0d5dd~~);\n border-radius: 6px;\n outline: none;\n }\n\n input:focus {\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600~~, #2563eb~~));\n }\n\n .count {\n min-width: 42px;\n text-align: center;\n color: var(--nile-colors-neutral-500, ~~#98a2b3~~);\n font-variant-numeric: tabular-nums;\n }\n\n button {\n font: inherit;\n font-size: 12px;\n padding: 4px 8px;\n border: none;\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\n color: var(--nile-colors-neutral-700, ~~#344054~~);\n }\n\n button:hover {\n background: var(--nile-colors-neutral-100, ~~#f2f4f7~~);\n }\n `,\n ];\n }\n\n public focusInput(): void {\n this.updateComplete.then(() => {\n this.queryInput?.focus();\n this.queryInput?.select();\n });\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.emit('wysiwyg-find-close');\n } else if (event.key === 'Enter' && event.target === this.queryInput) {\n event.preventDefault();\n this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });\n }\n }\n\n public render(): TemplateResult {\n const count = this.matchCount\n ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`\n : '0/0';\n return html`\n <div class=\"find-bar\" part=\"find-bar\" @keydown=${this.handleKeydown}>\n <input\n class=\"find-bar__query\"\n type=\"text\"\n placeholder=\"Find\"\n aria-label=\"Find\"\n @input=${(e: Event) =>\n this.emit('wysiwyg-find', { query: (e.target as HTMLInputElement).value })}\n />\n <span class=\"count\">${count}</span>\n <button\n type=\"button\"\n title=\"Previous match\"\n @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}\n >\n ↑\n </button>\n <button\n type=\"button\"\n title=\"Next match\"\n @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}\n >\n ↓\n </button>\n <input\n class=\"find-bar__replace\"\n type=\"text\"\n placeholder=\"Replace with\"\n aria-label=\"Replace with\"\n />\n <button\n type=\"button\"\n @click=${() =>\n this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}\n >\n Replace\n </button>\n <button\n type=\"button\"\n @click=${() =>\n this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}\n >\n All\n </button>\n <button type=\"button\" title=\"Close (Esc)\" @click=${() => this.emit('wysiwyg-find-close')}>\n ✕\n </button>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-find-bar': NileWysiwygFindBar;\n }\n}\n"]}
1	+ {"version":3,"file":"find-replace.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/find-replace.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\n\n/*\n Find & replace bar pinned to the top-right of the editor. Emits:\n * - `wysiwyg-find` detail: { query }\n * - `wysiwyg-find-step` detail: { direction: 'next' \| 'prev' }\n * - `wysiwyg-replace` detail: { value }\n * - `wysiwyg-replace-all` detail: { value }\n * - `wysiwyg-find-close`\n */\n@customElement('nile-wysiwyg-find-bar')\nexport class NileWysiwygFindBar extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ type: Number }) matchCount = 0;\n\n @property({ type: Number }) activeIndex = 0;\n\n @query('.find-bar__query') queryInput?: HTMLInputElement;\n\n @query('.find-bar__replace') replaceInput?: HTMLInputElement;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 25;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .find-bar {\n display: grid;\n grid-template-columns: auto auto auto auto;\n align-items: center;\n gap: 6px;\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 font-size: 13px;\n }\n\n input {\n font: inherit;\n font-size: 13px;\n width: 160px;\n padding: 4px 8px;\n border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 6px;\n outline: none;\n }\n\n input:focus {\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .count {\n min-width: 42px;\n text-align: center;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n font-variant-numeric: tabular-nums;\n }\n\n button {\n font: inherit;\n font-size: 12px;\n padding: 4px 8px;\n border: none;\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\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 focusInput(): void {\n this.updateComplete.then(() => {\n this.queryInput?.focus();\n this.queryInput?.select();\n });\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.emit('wysiwyg-find-close');\n } else if (event.key === 'Enter' && event.target === this.queryInput) {\n event.preventDefault();\n this.emit('wysiwyg-find-step', { direction: event.shiftKey ? 'prev' : 'next' });\n }\n }\n\n public render(): TemplateResult {\n const count = this.matchCount\n ? `${Math.min(this.activeIndex + 1, this.matchCount)}/${this.matchCount}`\n : '0/0';\n return html`\n <div class=\"find-bar\" part=\"find-bar\" @keydown=${this.handleKeydown}>\n <input\n class=\"find-bar__query\"\n type=\"text\"\n placeholder=\"Find\"\n aria-label=\"Find\"\n @input=${(e: Event) =>\n this.emit('wysiwyg-find', { query: (e.target as HTMLInputElement).value })}\n />\n <span class=\"count\">${count}</span>\n <button\n type=\"button\"\n title=\"Previous match\"\n @click=${() => this.emit('wysiwyg-find-step', { direction: 'prev' })}\n >\n ↑\n </button>\n <button\n type=\"button\"\n title=\"Next match\"\n @click=${() => this.emit('wysiwyg-find-step', { direction: 'next' })}\n >\n ↓\n </button>\n <input\n class=\"find-bar__replace\"\n type=\"text\"\n placeholder=\"Replace with\"\n aria-label=\"Replace with\"\n />\n <button\n type=\"button\"\n @click=${() =>\n this.emit('wysiwyg-replace', { value: this.replaceInput?.value ?? '' })}\n >\n Replace\n </button>\n <button\n type=\"button\"\n @click=${() =>\n this.emit('wysiwyg-replace-all', { value: this.replaceInput?.value ?? '' })}\n >\n All\n </button>\n <button type=\"button\" title=\"Close (Esc)\" @click=${() => this.emit('wysiwyg-find-close')}>\n ✕\n </button>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-find-bar': NileWysiwygFindBar;\n }\n}\n"]}

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

@@ -64,8 +64,8 @@ let NileWysiwygImageMenu = class NileWysiwygImageMenu extends NileElement {
           display: flex;
           gap: 2px;
           padding: 4px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, 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));
         }
@@ -83,16 +83,16 @@ let NileWysiwygImageMenu = class NileWysiwygImageMenu extends NileElement {
           cursor: pointer;
           font-size: 12px;
           font-weight: 600;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         button:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
         button[data-active] {
-          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
-          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8));
+          background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
+          color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700));
         }
       `,
         ];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"image-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/image-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { ToolbarState } from '../engine/selection-state';\n\ninterface ImageOp {\n label: string;\n /** Design-system icon name; `text` is the fallback when no glyph fits. /\n icon?: string;\n text?: string;\n command: string;\n attrs?: Record<string, unknown>;\n active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: ImageOp[] = [\n {\n label: 'Align left',\n icon: 'format_align_left',\n command: 'setImageAlign',\n attrs: { align: 'left' },\n active: s => s.imageAlign === 'left',\n },\n {\n label: 'Align center',\n icon: 'format_align_middle',\n command: 'setImageAlign',\n attrs: { align: 'center' },\n active: s => s.imageAlign === 'center',\n },\n {\n label: 'Align right',\n icon: 'format_align_right',\n command: 'setImageAlign',\n attrs: { align: 'right' },\n active: s => s.imageAlign === 'right',\n },\n {\n label: 'Toggle caption',\n icon: 'ng-captions',\n command: 'toggleImageCaption',\n active: s => s.imageIsFigure,\n },\n { label: 'Original size', text: '1:1', command: 'setImageWidth', attrs: { width: null } },\n { label: 'Delete image', icon: 'ng-trash-01', command: 'deleteImage' },\n];\n\n/\n Compact floating bar shown while an image or figure is selected. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-image-menu')\nexport class NileWysiwygImageMenu extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ attribute: false }) toolbarState?: ToolbarState;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: absolute;\n z-index: 15;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .menu {\n display: flex;\n gap: 2px;\n padding: 4px;\n background: var(--nile-wysiwyg-popover-bg, ~~#ffffff~~);\n border: 1px solid var(--nile-colors-neutral-400, ~~#d0d5dd~~);\n border-radius: 8px;\n box-shadow: var(--nile-wysiwyg-popover-shadow, 0 4px 12px rgba(16, 24, 40, 0.12));\n }\n\n button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 26px;\n height: 26px;\n padding: 0 4px;\n border: none;\n border-radius: 5px;\n background: transparent;\n cursor: pointer;\n font-size: 12px;\n font-weight: 600;\n color: var(--nile-colors-neutral-700, ~~#344054~~);\n }\n\n button:hover {\n background: var(--nile-colors-neutral-100, ~~#f2f4f7~~);\n }\n\n button[data-active] {\n background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50~~, #eff4ff~~));\n color: var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700~~, #1d4ed8~~));\n }\n `,\n ];\n }\n\n public render(): TemplateResult {\n const state = this.toolbarState;\n return html`\n <div class=\"menu\" part=\"image-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${OPS.map(\n op => html`\n <button\n type=\"button\"\n title=${op.label}\n aria-label=${op.label}\n ?data-active=${state && op.active ? op.active(state) : false}\n @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}\n >\n ${op.icon ? renderGlyph(op.icon, 16) : op.text}\n </button>\n `\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-image-menu': NileWysiwygImageMenu;\n }\n}\n"]}
1	+ {"version":3,"file":"image-menu.js","sourceRoot":"","sources":["../../../../src/nile-wysiwyg-editor/ui/image-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, TemplateResult, CSSResultArray } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../../internal/nile-element';\nimport { renderGlyph } from '../../internal/glyph';\nimport type { ToolbarState } from '../engine/selection-state';\n\ninterface ImageOp {\n label: string;\n /** Design-system icon name; `text` is the fallback when no glyph fits. /\n icon?: string;\n text?: string;\n command: string;\n attrs?: Record<string, unknown>;\n active?: (s: ToolbarState) => boolean;\n}\n\nconst OPS: ImageOp[] = [\n {\n label: 'Align left',\n icon: 'format_align_left',\n command: 'setImageAlign',\n attrs: { align: 'left' },\n active: s => s.imageAlign === 'left',\n },\n {\n label: 'Align center',\n icon: 'format_align_middle',\n command: 'setImageAlign',\n attrs: { align: 'center' },\n active: s => s.imageAlign === 'center',\n },\n {\n label: 'Align right',\n icon: 'format_align_right',\n command: 'setImageAlign',\n attrs: { align: 'right' },\n active: s => s.imageAlign === 'right',\n },\n {\n label: 'Toggle caption',\n icon: 'ng-captions',\n command: 'toggleImageCaption',\n active: s => s.imageIsFigure,\n },\n { label: 'Original size', text: '1:1', command: 'setImageWidth', attrs: { width: null } },\n { label: 'Delete image', icon: 'ng-trash-01', command: 'deleteImage' },\n];\n\n/\n Compact floating bar shown while an image or figure is selected. The host\n * positions it; operations bubble up as `wysiwyg-command` events.\n */\n@customElement('nile-wysiwyg-image-menu')\nexport class NileWysiwygImageMenu extends NileElement {\n @property({ type: Boolean, reflect: true }) open = false;\n\n @property({ attribute: false }) toolbarState?: ToolbarState;\n\n public static get styles(): CSSResultArray {\n return [\n css`\n :host {\n font-family: var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n );\n position: absolute;\n z-index: 15;\n display: none;\n }\n\n :host([open]) {\n display: block;\n }\n\n .menu {\n display: flex;\n gap: 2px;\n padding: 4px;\n background: var(--nile-wysiwyg-popover-bg, 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 button[data-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 ];\n }\n\n public render(): TemplateResult {\n const state = this.toolbarState;\n return html`\n <div class=\"menu\" part=\"image-menu\" @mousedown=${(e: Event) => e.preventDefault()}>\n ${OPS.map(\n op => html`\n <button\n type=\"button\"\n title=${op.label}\n aria-label=${op.label}\n ?data-active=${state && op.active ? op.active(state) : false}\n @click=${() => this.emit('wysiwyg-command', { name: op.command, attrs: op.attrs })}\n >\n ${op.icon ? renderGlyph(op.icon, 16) : op.text}\n </button>\n `\n )}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-image-menu': NileWysiwygImageMenu;\n }\n}\n"]}

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

@@ -59,8 +59,8 @@ let NileWysiwygImagePanel = class NileWysiwygImagePanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, 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);
           font-size: 13px;
@@ -74,7 +74,7 @@ let NileWysiwygImagePanel = class NileWysiwygImagePanel extends NileElement {
           display: flex;
           align-items: center;
           gap: 8px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           font-size: 12px;
         }
@@ -83,7 +83,7 @@ let NileWysiwygImagePanel = class NileWysiwygImagePanel extends NileElement {
           content: '';
           flex: 1;
           height: 1px;
-          background: var(--nile-colors-neutral-300, #e4e7ec);
+          background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
         }
         .upload-row {
@@ -104,7 +104,7 @@ let NileWysiwygImagePanel = class NileWysiwygImagePanel extends NileElement {
         }
         .upload-filename {
-          color: var(--nile-colors-neutral-600, #475467);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           font-size: 12px;
           text-align: center;
           overflow: hidden;
@@ -117,7 +117,7 @@ let NileWysiwygImagePanel = class NileWysiwygImagePanel extends NileElement {
         }
         .error {
-          color: var(--nile-colors-danger-600, #d92d20);
+          color: var(--nile-colors-danger-600, var(--ng-componentcolors-utility-error-600));
           font-size: 12px;
         }

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

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

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

@@ -38,8 +38,8 @@ let NileWysiwygInsertMenu = class NileWysiwygInsertMenu extends NileElement {
           overflow-y: auto;
           overscroll-behavior: contain;
           padding: 6px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, 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));
         }
@@ -49,7 +49,7 @@ let NileWysiwygInsertMenu = class NileWysiwygInsertMenu extends NileElement {
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.04em;
-          color: var(--nile-colors-neutral-600, #667085);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           padding: 4px 8px;
         }
@@ -63,11 +63,11 @@ let NileWysiwygInsertMenu = class NileWysiwygInsertMenu extends NileElement {
           border-radius: 6px;
           background: transparent;
           cursor: pointer;
-          color: var(--nile-colors-dark-900, #101828);
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
         }
         .item:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
         .item .label {
@@ -76,13 +76,13 @@ let NileWysiwygInsertMenu = class NileWysiwygInsertMenu extends NileElement {
         .item .desc {
           font-size: 11px;
-          color: var(--nile-colors-neutral-600, #667085);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           margin-top: 1px;
         }
         .empty {
           font-size: 12px;
-          color: var(--nile-colors-neutral-600, #667085);
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
           padding: 8px;
         }
       `,

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

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

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

@@ -43,9 +43,9 @@ let NileWysiwygLinkEditor = class NileWysiwygLinkEditor extends NileElement {
           gap: 8px;
           min-width: 280px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
+          background: var(--nile-wysiwyg-popover-bg, var(--ng-colors-bg-primary));
           border: 1px solid
-            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, #d0d5dd));
+            var(--nile-wysiwyg-border-color, var(--nile-colors-neutral-400, var(--ng-colors-border-primary)));
           border-radius: var(--nile-wysiwyg-radius, 8px);
           box-shadow: var(
             --nile-wysiwyg-popover-shadow,
@@ -58,19 +58,19 @@ let NileWysiwygLinkEditor = class NileWysiwygLinkEditor extends NileElement {
           display: flex;
           flex-direction: column;
           gap: 4px;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         input {
           font: inherit;
           padding: 6px 8px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 6px;
           outline: none;
         }
         input:focus {
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
         .link-editor__actions {
@@ -86,16 +86,16 @@ let NileWysiwygLinkEditor = class NileWysiwygLinkEditor extends NileElement {
           border: 1px solid transparent;
           cursor: pointer;
           background: transparent;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         button.primary {
-          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
-          color: #ffffff;
+          background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
+          color: var(--ng-colors-text-white);
         }
         button.danger {
-          color: var(--nile-colors-error-600, #d92d20);
+          color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));
         }
       `,
         ];

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

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

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

@@ -38,8 +38,8 @@ let NileWysiwygMarkdownPanel = class NileWysiwygMarkdownPanel extends NileElemen
           width: 460px;
           max-width: 90vw;
           padding: 14px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, 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);
           font-size: 13px;
@@ -47,12 +47,12 @@ let NileWysiwygMarkdownPanel = class NileWysiwygMarkdownPanel extends NileElemen
         .heading {
           font-weight: 600;
-          color: var(--nile-colors-neutral-800, #1d2939);
+          color: var(--nile-colors-neutral-800, var(--ng-colors-text-primary-900));
         }
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
         textarea {
@@ -62,15 +62,15 @@ let NileWysiwygMarkdownPanel = class NileWysiwygMarkdownPanel extends NileElemen
           min-height: 180px;
           resize: vertical;
           padding: 10px;
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-radius: 6px;
           outline: none;
-          color: var(--nile-colors-dark-900, #101828);
-          background: var(--nile-colors-neutral-50, #f9fafb);
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+          background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
         }
         textarea:focus {
-          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+          border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
         }
         .actions {

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, ~~#ffffff~~);\n border: 1px solid var(--nile-colors-neutral-400, ~~#d0d5dd~~);\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n font-size: 13px;\n }\n\n .heading {\n font-weight: 600;\n color: var(--nile-colors-neutral-800, ~~#1d2939~~);\n }\n\n .hint {\n font-size: 12px;\n color: var(--nile-colors-neutral-500, ~~#98a2b3~~);\n }\n\n textarea {\n font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 13px;\n line-height: 1.5;\n min-height: 180px;\n resize: vertical;\n padding: 10px;\n border: 1px solid var(--nile-colors-neutral-400, ~~#d0d5dd~~);\n border-radius: 6px;\n outline: none;\n color: var(--nile-colors-dark-900, ~~#101828~~);\n background: var(--nile-colors-neutral-50, ~~#f9fafb~~);\n }\n\n textarea:focus {\n border-color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600~~, #2563eb~~));\n }\n\n .actions {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 8px;\n }\n `,\n ];\n }\n\n public focusInput(): void {\n this.updateComplete.then(() => this.textarea?.focus());\n }\n\n public reset(): void {\n this.updateComplete.then(() => {\n if (this.textarea) this.textarea.value = '';\n });\n }\n\n private submit(): void {\n const markdown = this.textarea?.value ?? '';\n if (!markdown.trim()) {\n this.emit('wysiwyg-markdown-cancel');\n return;\n }\n this.emit('wysiwyg-markdown-apply', { markdown });\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.emit('wysiwyg-markdown-cancel');\n } else if (event.key === 'Enter' && (event.metaKey \|\| event.ctrlKey)) {\n // Ctrl/Cmd+Enter inserts (plain Enter keeps adding newlines).\n event.preventDefault();\n event.stopPropagation();\n this.submit();\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"md-panel\" part=\"markdown-panel\" @keydown=${this.handleKeydown}>\n <span class=\"heading\">Paste Markdown</span>\n <textarea\n part=\"markdown-textarea\"\n placeholder=\"# Heading 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(--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,8 +43,8 @@ let NileWysiwygMathPanel = class NileWysiwygMathPanel extends NileElement {
           min-width: 340px;
           max-width: 420px;
           padding: 12px;
-          background: var(--nile-wysiwyg-popover-bg, #ffffff);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-wysiwyg-popover-bg, 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);
           font-size: 13px;
@@ -66,12 +66,12 @@ let NileWysiwygMathPanel = class NileWysiwygMathPanel extends NileElement {
         }
         .display-label {
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         .hint {
           font-size: 12px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
         .actions {