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

@aquera/nile-elements 2.0.0 → 2.0.2

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

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, ~~#ffffff~~);\n border: 1px solid var(--nile-colors-neutral-400, ~~#d0d5dd~~);\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);\n font-size: 13px;\n }\n\n nile-input {\n width: 100%;\n }\n\n / Keep the LaTeX field monospaced. /\n nile-input::part(input) {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n }\n\n .display-row {\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .display-label {\n color: var(--nile-colors-neutral-700, ~~#344054~~);\n }\n\n .hint {\n font-size: 12px;\n color: var(--nile-colors-neutral-500, ~~#98a2b3~~);\n }\n\n .actions {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 8px;\n width: 100%;\n }\n `,\n ];\n }\n\n /* Opens with an optional initial value (editing an existing formula). /\n public focusInput(initial = ''): void {\n this.latexValue = initial;\n this.updateComplete.then(() => {\n const input = this.shadowRoot?.querySelector('nile-input') as HTMLElement \| null;\n input?.focus();\n });\n }\n\n /* Clears the field. */\n public reset(): void {\n this.latexValue = '';\n this.display = 'inline';\n }\n\n private onLatex(event: CustomEvent): void {\n this.latexValue = (event.detail?.value ?? '') as string;\n }\n\n private handleSubmit(): void {\n const latex = this.latexValue.trim();\n if (!latex) {\n this.emit('wysiwyg-math-cancel');\n return;\n }\n this.emit('wysiwyg-math-apply', { latex, display: this.display });\n }\n\n private handleKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') {\n event.stopPropagation();\n this.emit('wysiwyg-math-cancel');\n } else if (event.key === 'Enter') {\n event.preventDefault();\n event.stopPropagation();\n this.handleSubmit();\n }\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"math-panel\" part=\"math-panel\" @keydown=${this.handleKeydown}>\n <nile-input\n label=\"LaTeX expression\"\n placeholder=\"e.g. \\\\frac{a}{b} = c^2\"\n .value=${this.latexValue}\n @nile-input=${this.onLatex}\n ></nile-input>\n\n <div class=\"display-row\">\n <span class=\"display-label\">Display</span>\n <nile-button-toggle-group\n class=\"toggle\"\n .value=${this.display}\n @nile-change=${(e: CustomEvent) => {\n this.display = e.detail.value === 'block' ? 'block' : 'inline';\n }}\n >\n <nile-button-toggle value=\"inline\">Inline</nile-button-toggle>\n <nile-button-toggle value=\"block\">Block</nile-button-toggle>\n </nile-button-toggle-group>\n </div>\n\n\n <div class=\"actions\">\n <nile-button variant=\"primary\" @click=${() => this.handleSubmit()}\n >Insert</nile-button\n >\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-wysiwyg-math-panel': NileWysiwygMathPanel;\n }\n}\n"]}
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"]}

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

@@ -124,15 +124,15 @@ let NileWysiwygShortcutHelp = class NileWysiwygShortcutHelp extends NileElement
           overflow-y: auto;
           overscroll-behavior: contain;
           outline: none;
-          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: 10px;
           box-shadow: var(
             --nile-wysiwyg-popover-shadow,
             0 8px 24px rgba(16, 24, 40, 0.18)
           );
           font-size: 13px;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         .help__header {
@@ -145,7 +145,7 @@ let NileWysiwygShortcutHelp = class NileWysiwygShortcutHelp extends NileElement
         .help__title {
           font-size: 14px;
           font-weight: 600;
-          color: var(--nile-colors-dark-900, #101828);
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
         }
         .help__close {
@@ -155,11 +155,11 @@ let NileWysiwygShortcutHelp = class NileWysiwygShortcutHelp extends NileElement
           border-radius: 5px;
           padding: 4px 8px;
           cursor: pointer;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         .help__close:hover {
-          background: var(--nile-colors-neutral-100, #f2f4f7);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
         }
         .help__columns {
@@ -174,7 +174,7 @@ let NileWysiwygShortcutHelp = class NileWysiwygShortcutHelp extends NileElement
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.04em;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
         .help__row {
@@ -195,8 +195,8 @@ let NileWysiwygShortcutHelp = class NileWysiwygShortcutHelp extends NileElement
           font-family: inherit;
           font-size: 12px;
           line-height: 1.5;
-          background: var(--nile-colors-neutral-100, #f2f4f7);
-          border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);
+          background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+          border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
           border-bottom-width: 2px;
           border-radius: 5px;
         }

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, #ffffff);\n border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\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, #344054);\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, #101828);\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, #344054);\n }\n\n .help__close:hover {\n background: var(--nile-colors-neutral-100, #f2f4f7);\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, #98a2b3);\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, #f2f4f7);\n border: 1px solid var(--nile-colors-neutral-400, #d0d5dd);\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(--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

@@ -101,9 +101,9 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
           justify-content: space-between;
           padding: 6px 12px;
           font-size: 12px;
-          color: var(--nile-colors-neutral-600, #475467);
-          border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);
-          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));
+          color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
+          border-bottom: 1px solid var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
+          background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary)));
         }
         .actions {
@@ -119,12 +119,12 @@ let NileWysiwygSourceView = class NileWysiwygSourceView 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);
         }
         .body {
@@ -155,7 +155,7 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
         /* --- Lightweight code editor: gutter + highlighted textarea --- */
         .pane--code {
           display: flex;
-          background: var(--nile-colors-white-base, #ffffff);
+          background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
           /* Shared code metrics, inherited by the gutter, highlight and textarea
              so every line lines up to the pixel. */
           font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
@@ -171,9 +171,9 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
           box-sizing: border-box;
           padding: 12px 8px 0;
           text-align: right;
-          color: var(--nile-colors-neutral-400, #98a2b3);
-          background: var(--nile-colors-neutral-50, #f9fafb);
-          border-right: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+          color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));
+          background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
+          border-right: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
           user-select: none;
         }
@@ -217,7 +217,7 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
         .hl {
           overflow: hidden;
           pointer-events: none;
-          color: var(--nile-colors-neutral-900, #101828);
+          color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary-900));
         }
         .hl > code {
@@ -232,7 +232,7 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
           overflow: auto;
           background: transparent;
           color: transparent;
-          caret-color: var(--nile-colors-neutral-900, #101828);
+          caret-color: var(--nile-colors-neutral-900, var(--ng-colors-text-primary-900));
         }
         /* Must be translucent: the textarea's text is transparent and the
@@ -247,26 +247,26 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
         /* highlight.js token palette (Atom One Light), matching code blocks. */
         .hl .hljs-comment,
-        .hl .hljs-quote { color: #a0a1a7; font-style: italic; }
+        .hl .hljs-quote { color: var(--ng-componentcolors-utility-gray-500); font-style: italic; }
         .hl .hljs-keyword,
         .hl .hljs-selector-tag,
-        .hl .hljs-doctag { color: #a626a4; }
+        .hl .hljs-doctag { color: var(--ng-componentcolors-utility-purple-600); }
         .hl .hljs-name,
         .hl .hljs-selector-id,
         .hl .hljs-selector-class,
-        .hl .hljs-tag { color: #e45649; }
+        .hl .hljs-tag { color: var(--ng-componentcolors-utility-error-600); }
         .hl .hljs-literal,
-        .hl .hljs-built_in { color: #0184bb; }
+        .hl .hljs-built_in { color: var(--ng-componentcolors-utility-blue-600); }
         .hl .hljs-string,
         .hl .hljs-attribute,
-        .hl .hljs-meta .hljs-string { color: #50a14f; }
+        .hl .hljs-meta .hljs-string { color: var(--ng-componentcolors-utility-green-600); }
         .hl .hljs-attr,
         .hl .hljs-variable,
         .hl .hljs-type,
-        .hl .hljs-number { color: #986801; }
+        .hl .hljs-number { color: var(--ng-componentcolors-utility-orange-600); }
         .hl .hljs-symbol,
         .hl .hljs-meta,
-        .hl .hljs-title { color: #4078f2; }
+        .hl .hljs-title { color: var(--ng-componentcolors-utility-indigo-600); }
         /* Draggable divider between the code and preview panes. */
         .gutter {
@@ -274,7 +274,7 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
           position: relative;
           width: 1px;
           align-self: stretch;
-          background: var(--nile-colors-neutral-300, #e4e7ec);
+          background: var(--nile-colors-neutral-300, var(--ng-colors-border-secondary));
           cursor: col-resize;
           touch-action: none;
         }
@@ -287,14 +287,14 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
         .gutter:hover,
         .body--dragging .gutter {
-          background: var(--ng-colors-bg-brand-primary, #2970ff);
+          background: var(--ng-colors-bg-brand-primary);
         }
         .pane--preview {
           flex: 1 1 0;
           overflow: auto;
-          border-left: 1px solid var(--nile-colors-neutral-200, #eaecf0);
-          background: var(--nile-colors-white-base, #ffffff);
+          border-left: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
+          background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
         }
         nile-wysiwyg-preview {
@@ -304,7 +304,7 @@ let NileWysiwygSourceView = class NileWysiwygSourceView extends NileElement {
         .preview-empty {
           display: block;
           padding: 12px 16px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
           font-size: 12px;
           opacity: 0.7;
         }

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, #475467);\n border-bottom: 1px solid var(--nile-colors-neutral-300, #e4e7ec);\n background: var(--nile-wysiwyg-toolbar-bg, var(--nile-colors-neutral-50, #f9fafb));\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, #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 .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, #ffffff);\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, #98a2b3);\n background: var(--nile-colors-neutral-50, #f9fafb);\n border-right: 1px solid var(--nile-colors-neutral-200, #eaecf0);\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, #101828);\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, #101828);\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: #a0a1a7; font-style: italic; }\n .hl .hljs-keyword,\n .hl .hljs-selector-tag,\n .hl .hljs-doctag { color: #a626a4; }\n .hl .hljs-name,\n .hl .hljs-selector-id,\n .hl .hljs-selector-class,\n .hl .hljs-tag { color: #e45649; }\n .hl .hljs-literal,\n .hl .hljs-built_in { color: #0184bb; }\n .hl .hljs-string,\n .hl .hljs-attribute,\n .hl .hljs-meta .hljs-string { color: #50a14f; }\n .hl .hljs-attr,\n .hl .hljs-variable,\n .hl .hljs-type,\n .hl .hljs-number { color: #986801; }\n .hl .hljs-symbol,\n .hl .hljs-meta,\n .hl .hljs-title { color: #4078f2; }\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, #e4e7ec);\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, #2970ff);\n }\n\n .pane--preview {\n flex: 1 1 0;\n overflow: auto;\n border-left: 1px solid var(--nile-colors-neutral-200, #eaecf0);\n background: var(--nile-colors-white-base, #ffffff);\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, #98a2b3);\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(--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"]}

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

@@ -93,8 +93,8 @@ let NileWysiwygSpecialChars = class NileWysiwygSpecialChars extends NileElement
         .panel {
           width: 316px;
           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));
         }
@@ -130,11 +130,11 @@ let NileWysiwygSpecialChars = class NileWysiwygSpecialChars extends NileElement
           border-radius: 5px;
           background: transparent;
           cursor: pointer;
-          color: var(--nile-colors-dark-900, #101828);
+          color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
         }
         .char: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/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, ~~#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 .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, ~~#101828~~);\n }\n\n .char:hover {\n background: var(--nile-colors-neutral-100, ~~#f2f4f7~~);\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(--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

@@ -38,8 +38,8 @@ let NileWysiwygSuggestList = class NileWysiwygSuggestList extends NileElement {
           max-height: 240px;
           overflow-y: auto;
           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));
           font-size: 13px;
@@ -53,22 +53,22 @@ let NileWysiwygSuggestList = class NileWysiwygSuggestList extends NileElement {
           padding: 6px 8px;
           border-radius: 5px;
           cursor: pointer;
-          color: var(--nile-colors-neutral-700, #344054);
+          color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
         }
         .item.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));
         }
         .hint {
           font-size: 11px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
         .empty {
           padding: 6px 8px;
-          color: var(--nile-colors-neutral-500, #98a2b3);
+          color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
         }
       `,
         ];

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":"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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 max-width: 320px;\n max-height: 240px;\n overflow-y: auto;\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 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, ~~#344054~~);\n }\n\n .item.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 .hint {\n font-size: 11px;\n color: var(--nile-colors-neutral-500, ~~#98a2b3~~);\n }\n\n .empty {\n padding: 6px 8px;\n color: var(--nile-colors-neutral-500, ~~#98a2b3~~);\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 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"]}