@aquera/nile-elements 2.0.0 → 2.0.2

package/dist/nile-wysiwyg-editor/ui/shortcut-help.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"shortcut-help.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/shortcut-help.ts"],"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"],"names":["isMac","navigator","test","platform","GROUPS","title","items","keys","label","NileWysiwygShortcutHelp","_n","p","this","open","previousBodyOverflow","_this","_inherits","_createClass","key","value","updated","changed","has","document","body","style","overflow","disconnectedCallback","super","focusPanel","updateComplete","then","_this2$panelEl","panelEl","focus","close","emit","handleKeydown","event","stopPropagation","render","html","_templateObject","_taggedTemplateLiteral","map","group","_templateObject2","item","_templateObject3","index","i","_templateObject4","nothing","binding","split","part","join","get","styles","css","_templateObject5","NileElement","__decorate","property","type","Boolean","reflect","prototype","query","customElement"],"mappings":"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"}
+{"version":3,"file":"shortcut-help.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/shortcut-help.ts"],"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"],"names":["isMac","navigator","test","platform","GROUPS","title","items","keys","label","NileWysiwygShortcutHelp","_r","p","this","open","previousBodyOverflow","_this","_inherits","_createClass","key","value","updated","changed","has","document","body","style","overflow","disconnectedCallback","super","focusPanel","updateComplete","then","_this2$panelEl","panelEl","focus","close","emit","handleKeydown","event","stopPropagation","render","html","_templateObject","_taggedTemplateLiteral","map","group","_templateObject2","item","_templateObject3","index","o","_templateObject4","nothing","binding","split","part","join","get","styles","css","_templateObject5","NileElement","__decorate","property","type","Boolean","reflect","prototype","query","customElement"],"mappings":"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"}

package/dist/nile-wysiwyg-editor/ui/shortcut-help.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"lit";import{property as s,query as o,customElement as a}from"lit/decorators.js";import{N as n}from"../../internal/nile-element.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";const r="undefined"!=typeof navigator&&/Mac|iP(hone|[oa]d)/.test(navigator.platform);const d=[{title:"Formatting",items:[{keys:["Mod-B"],label:"Bold"},{keys:["Mod-I"],label:"Italic"},{keys:["Mod-U"],label:"Underline"},{keys:["Mod-Shift-X"],label:"Strikethrough"},{keys:["Mod-,"],label:"Subscript"},{keys:["Mod-."],label:"Superscript"}]},{title:"Blocks",items:[{keys:["Ctrl-Shift-0"],label:"Paragraph"},{keys:["Ctrl-Shift-1…6"],label:"Heading 1–6"},{keys:["Mod-Shift-8"],label:"Bulleted list"},{keys:["Mod-Shift-7"],label:"Numbered list"},{keys:["Mod-Shift-9"],label:"Blockquote"},{keys:["Mod-Alt-C"],label:"Code block"},{keys:["Tab","Shift-Tab"],label:"Indent / outdent list item"},{keys:["Mod-]","Mod-["],label:"Indent / outdent block"},{keys:["Shift-Enter"],label:"Line break"}]},{title:"Editing & tools",items:[{keys:["Mod-Z"],label:"Undo"},{keys:["Mod-Shift-Z"],label:"Redo"},{keys:["Mod-K"],label:"Insert or edit link"},{keys:["Mod-F"],label:"Find & replace"},{keys:["Mod-Shift-V"],label:"Paste without formatting"},{keys:["Mod-/"],label:"This dialog"}]},{title:"Typing shortcuts",items:[{keys:["# + space"],label:"Heading (## for level 2 …)"},{keys:["- + space"],label:"Bulleted list"},{keys:["1. + space"],label:"Numbered list"},{keys:["[] + space"],label:"Checklist"},{keys:["> + space"],label:"Blockquote"},{keys:["```"],label:"Code block"},{keys:["**text**"],label:"Bold as you type"},{keys:["URL + space"],label:"Automatic link"},{keys:["/"],label:"Command menu"},{keys:[": + name"],label:"Emoji picker"}]}];let p=class extends n{constructor(){super(...arguments),this.open=!1,this.previousBodyOverflow=null}static get styles(){return[l`
+import{__decorate as e}from"tslib";import{css as l,nothing as t,html as o}from"lit";import{property as s,query as i,customElement as a}from"lit/decorators.js";import{N as r}from"../../internal/nile-element.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";const n="undefined"!=typeof navigator&&/Mac|iP(hone|[oa]d)/.test(navigator.platform);const d=[{title:"Formatting",items:[{keys:["Mod-B"],label:"Bold"},{keys:["Mod-I"],label:"Italic"},{keys:["Mod-U"],label:"Underline"},{keys:["Mod-Shift-X"],label:"Strikethrough"},{keys:["Mod-,"],label:"Subscript"},{keys:["Mod-."],label:"Superscript"}]},{title:"Blocks",items:[{keys:["Ctrl-Shift-0"],label:"Paragraph"},{keys:["Ctrl-Shift-1…6"],label:"Heading 1–6"},{keys:["Mod-Shift-8"],label:"Bulleted list"},{keys:["Mod-Shift-7"],label:"Numbered list"},{keys:["Mod-Shift-9"],label:"Blockquote"},{keys:["Mod-Alt-C"],label:"Code block"},{keys:["Tab","Shift-Tab"],label:"Indent / outdent list item"},{keys:["Mod-]","Mod-["],label:"Indent / outdent block"},{keys:["Shift-Enter"],label:"Line break"}]},{title:"Editing & tools",items:[{keys:["Mod-Z"],label:"Undo"},{keys:["Mod-Shift-Z"],label:"Redo"},{keys:["Mod-K"],label:"Insert or edit link"},{keys:["Mod-F"],label:"Find & replace"},{keys:["Mod-Shift-V"],label:"Paste without formatting"},{keys:["Mod-/"],label:"This dialog"}]},{title:"Typing shortcuts",items:[{keys:["# + space"],label:"Heading (## for level 2 …)"},{keys:["- + space"],label:"Bulleted list"},{keys:["1. + space"],label:"Numbered list"},{keys:["[] + space"],label:"Checklist"},{keys:["> + space"],label:"Blockquote"},{keys:["```"],label:"Code block"},{keys:["**text**"],label:"Bold as you type"},{keys:["URL + space"],label:"Automatic link"},{keys:["/"],label:"Command menu"},{keys:[": + name"],label:"Emoji picker"}]}];let p=class extends r{constructor(){super(...arguments),this.open=!1,this.previousBodyOverflow=null}static get styles(){return[l`
         /* Fixed so the dialog overlays the viewport instead of being
            clipped by a small editor. */
         :host {
@@ -33,15 +33,15 @@ import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"l
           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 {
@@ -54,7 +54,7 @@ import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"l
         .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 {
@@ -64,11 +64,11 @@ import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"l
           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 {
@@ -83,7 +83,7 @@ import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"l
           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 {
@@ -104,12 +104,12 @@ import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"l
           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;
         }
-      `]}updated(e){e.has("open")&&(this.open?null===this.previousBodyOverflow&&(this.previousBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden"):null!==this.previousBodyOverflow&&(document.body.style.overflow=this.previousBodyOverflow,this.previousBodyOverflow=null))}disconnectedCallback(){super.disconnectedCallback(),null!==this.previousBodyOverflow&&(document.body.style.overflow=this.previousBodyOverflow,this.previousBodyOverflow=null)}focusPanel(){this.updateComplete.then((()=>this.panelEl?.focus()))}close(){this.emit("wysiwyg-shortcut-help-close")}handleKeydown(e){"Escape"===e.key&&(e.stopPropagation(),this.close())}render(){return this.open?i`
+      `]}updated(e){e.has("open")&&(this.open?null===this.previousBodyOverflow&&(this.previousBodyOverflow=document.body.style.overflow,document.body.style.overflow="hidden"):null!==this.previousBodyOverflow&&(document.body.style.overflow=this.previousBodyOverflow,this.previousBodyOverflow=null))}disconnectedCallback(){super.disconnectedCallback(),null!==this.previousBodyOverflow&&(document.body.style.overflow=this.previousBodyOverflow,this.previousBodyOverflow=null)}focusPanel(){this.updateComplete.then((()=>this.panelEl?.focus()))}close(){this.emit("wysiwyg-shortcut-help-close")}handleKeydown(e){"Escape"===e.key&&(e.stopPropagation(),this.close())}render(){return this.open?o`
       <div class="help__backdrop" @click=${this.close}></div>
       <div
         class="help__panel"
@@ -127,15 +127,15 @@ import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"l
           </button>
         </div>
         <div class="help__columns">
-          ${d.map((e=>i`
+          ${d.map((e=>o`
               <div>
                 <div class="help__group-title">${e.title}</div>
-                ${e.items.map((e=>i`
+                ${e.items.map((e=>o`
                     <div class="help__row">
                       <span>${e.label}</span>
                       <span class="help__keys">
-                        ${e.keys.map(((e,l)=>{return i`${l>0?" / ":t}<kbd
-                              >${s=e,s.split("-").map((e=>{switch(e){case"Mod":return r?"⌘":"Ctrl";case"Shift":return r?"⇧":"Shift";case"Alt":return r?"⌥":"Alt";case"Ctrl":return r?"⌃":"Ctrl";default:return e}})).join(r?"":"+")}</kbd
+                        ${e.keys.map(((e,l)=>{return o`${l>0?" / ":t}<kbd
+                              >${s=e,s.split("-").map((e=>{switch(e){case"Mod":return n?"⌘":"Ctrl";case"Shift":return n?"⇧":"Shift";case"Alt":return n?"⌥":"Alt";case"Ctrl":return n?"⌃":"Ctrl";default:return e}})).join(n?"":"+")}</kbd
                             >`;var s}))}
                       </span>
                     </div>
@@ -144,4 +144,4 @@ import{__decorate as e}from"tslib";import{css as l,nothing as t,html as i}from"l
             `))}
         </div>
       </div>
-    `:t}};e([s({type:Boolean,reflect:!0})],p.prototype,"open",void 0),e([o(".help__panel")],p.prototype,"panelEl",void 0),p=e([a("nile-wysiwyg-shortcut-help")],p);
+    `:t}};e([s({type:Boolean,reflect:!0})],p.prototype,"open",void 0),e([i(".help__panel")],p.prototype,"panelEl",void 0),p=e([a("nile-wysiwyg-shortcut-help")],p);

package/dist/nile-wysiwyg-editor/ui/source-view.cjs.js

@@ -1,2 +1,2 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","lit/directives/unsafe-html.js","../../xml-90fd974e.cjs.js","../../internal/nile-element.cjs.js","../engine/sanitize.cjs.js","./preview.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js","../engine/plugins/embeds.cjs.js","../../index-89c520e9.cjs.js","../nile-wysiwyg-editor.css.cjs.js"],function(_export,_context){"use strict";var e,t,i,r,o,s,l,n,a,h,c,d,p,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,g;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.css;i=_lit.html;},function(_litDecoratorsJs){r=_litDecoratorsJs.property;o=_litDecoratorsJs.query;s=_litDecoratorsJs.state;l=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){n=_litDirectivesClassMapJs.classMap;},function(_litDirectivesUnsafeHtmlJs){a=_litDirectivesUnsafeHtmlJs.unsafeHTML;},function(_xml00cCjsJs){h=_xml00cCjsJs.H;c=_xml00cCjsJs.x;},function(_internalNileElementCjsJs){d=_internalNileElementCjsJs.N;},function(_engineSanitizeCjsJs){p=_engineSanitizeCjsJs.s;},function(_previewCjsJs){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){},function(_enginePluginsEmbedsCjsJs){},function(_index00bCjsJs){},function(_nileWysiwygEditorCssCjsJs){}],execute:function execute(){h.registerLanguage("xml",c);g=/*#__PURE__*/function(_d){function g(){var _this;_classCallCheck(this,g);_this=_callSuper(this,g,arguments),_this.value="",_this.draft="",_this.splitRatio=.5,_this.splitDragging=!1,_this.startSplitDrag=function(e){var t=_this.bodyEl;if(!t)return;e.preventDefault(),_this.splitDragging=!0;var i=t.getBoundingClientRect(),r=function r(e){if(0===i.width)return;var t=(e.clientX-i.left)/i.width;_this.splitRatio=Math.min(.85,Math.max(.15,t));},_o=function o(){_this.splitDragging=!1,window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",_o);};window.addEventListener("pointermove",r),window.addEventListener("pointerup",_o);},_this.resetSplit=function(){_this.splitRatio=.5;},_this.onInput=function(e){_this.draft=e.target.value;},_this.onScroll=function(e){var t=e.target;_this.highlightEl&&(_this.highlightEl.style.transform="translate(".concat(-t.scrollLeft,"px, ").concat(-t.scrollTop,"px)")),_this.linenosEl&&(_this.linenosEl.style.transform="translateY(".concat(-t.scrollTop,"px)"));};return _this;}_inherits(g,_d);return _createClass(g,[{key:"willUpdate",value:function willUpdate(e){e.has("value")&&(this.draft=this.value);}},{key:"currentValue",get:function get(){return this.draft;}},{key:"focusInput",value:function focusInput(){var _this2=this;this.updateComplete.then(function(){var _this2$textarea;return(_this2$textarea=_this2.textarea)===null||_this2$textarea===void 0?void 0:_this2$textarea.focus();});}},{key:"highlighted",get:function get(){if(!this.draft)return"";try{return h.highlight(this.draft,{language:"xml"}).value;}catch(_unused){return this.draft.replace(/[&<>]/g,function(e){return{"&":"&amp;","<":"&lt;",">":"&gt;"}[e];});}}},{key:"lineCount",get:function get(){return this.draft?this.draft.split("\n").length:1;}},{key:"render",value:function render(){var _this3=this;var e=p(this.draft),t=[];for(var _e=1;_e<=this.lineCount;_e+=1)t.push(i(_templateObject||(_templateObject=_taggedTemplateLiteral(["<div>","</div>"])),_e));return i(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n      <div class=\"bar\" part=\"source-bar\">\n        <span>HTML</span>\n        <span class=\"actions\">\n          <button type=\"button\" @click=",">\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            class=\"primary\"\n            @click=","\n          >\n            Done\n          </button>\n        </span>\n      </div>\n      <div class=",">\n        <div class=\"pane pane--code\" style=\"flex: 0 0 ","%\">\n          <div class=\"linenos\" part=\"line-numbers\" aria-hidden=\"true\">\n            <div class=\"linenos-inner\">","</div>\n          </div>\n          <div class=\"input-wrap\">\n            <pre class=\"hl\" aria-hidden=\"true\"><code>","</code></pre>\n            <textarea\n              part=\"source-textarea\"\n              spellcheck=\"false\"\n              autocapitalize=\"off\"\n              autocomplete=\"off\"\n              wrap=\"off\"\n              .value=","\n              @input=","\n              @scroll=","\n              @keydown=","\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 \xB7 double-click to reset\"\n          @pointerdown=","\n          @dblclick=","\n        ></div>\n        <div class=\"pane pane--preview\" part=\"preview\">\n          ","\n        </div>\n      </div>\n    "])),function(){return _this3.emit("wysiwyg-source-cancel");},function(){return _this3.emit("wysiwyg-source-apply",{html:_this3.draft});},n({body:!0,"body--dragging":this.splitDragging}),100*this.splitRatio,t,a(this.highlighted),this.value,this.onInput,this.onScroll,function(e){"Escape"===e.key&&(e.stopPropagation(),_this3.emit("wysiwyg-source-cancel"));},this.startSplitDrag,this.resetSplit,this.draft.trim()?i(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<nile-wysiwyg-preview .content=","></nile-wysiwyg-preview>"])),e):i(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["<span class=\"preview-empty\">Nothing to preview</span>"]))));}}],[{key:"styles",get:function get(){return[t(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\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      "])))];}}]);}(d);e([r({type:String})],g.prototype,"value",void 0),e([o("textarea")],g.prototype,"textarea",void 0),e([o(".hl > code")],g.prototype,"highlightEl",void 0),e([o(".linenos-inner")],g.prototype,"linenosEl",void 0),e([o(".body")],g.prototype,"bodyEl",void 0),e([s()],g.prototype,"draft",void 0),e([s()],g.prototype,"splitRatio",void 0),e([s()],g.prototype,"splitDragging",void 0),g=e([l("nile-wysiwyg-source-view")],g);}};});
+function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o;}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o;},_typeof(o);}System.register(["tslib","lit","lit/decorators.js","lit/directives/class-map.js","lit/directives/unsafe-html.js","../../xml-90fd974e.cjs.js","../../internal/nile-element.cjs.js","../engine/sanitize.cjs.js","./preview.cjs.js","../../internal/accessibility/a11y.state.enum.cjs.js","../../internal/accessibility/a11y.property.enum.cjs.js","../../internal/accessibility/role.enum.cjs.js","../engine/plugins/embeds.cjs.js","../../index-89c520e9.cjs.js","../nile-wysiwyg-editor.css.cjs.js"],function(_export,_context){"use strict";var e,t,r,o,i,n,s,l,a,c,h,d,p,_templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,g;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function");}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o);}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e;}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+"";}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.");}return("string"===r?String:Number)(t);}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e));}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t);}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e;}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t;})();}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t);},_getPrototypeOf(t);}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e);}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t;},_setPrototypeOf(t,e);}return{setters:[function(_tslib){e=_tslib.__decorate;},function(_lit){t=_lit.css;r=_lit.html;},function(_litDecoratorsJs){o=_litDecoratorsJs.property;i=_litDecoratorsJs.query;n=_litDecoratorsJs.state;s=_litDecoratorsJs.customElement;},function(_litDirectivesClassMapJs){l=_litDirectivesClassMapJs.classMap;},function(_litDirectivesUnsafeHtmlJs){a=_litDirectivesUnsafeHtmlJs.unsafeHTML;},function(_xml00cCjsJs){c=_xml00cCjsJs.H;h=_xml00cCjsJs.x;},function(_internalNileElementCjsJs){d=_internalNileElementCjsJs.N;},function(_engineSanitizeCjsJs){p=_engineSanitizeCjsJs.s;},function(_previewCjsJs){},function(_internalAccessibilityA11yStateEnumCjsJs){},function(_internalAccessibilityA11yPropertyEnumCjsJs){},function(_internalAccessibilityRoleEnumCjsJs){},function(_enginePluginsEmbedsCjsJs){},function(_index00bCjsJs){},function(_nileWysiwygEditorCssCjsJs){}],execute:function execute(){c.registerLanguage("xml",h);g=/*#__PURE__*/function(_d){function g(){var _this;_classCallCheck(this,g);_this=_callSuper(this,g,arguments),_this.value="",_this.draft="",_this.splitRatio=.5,_this.splitDragging=!1,_this.startSplitDrag=function(e){var t=_this.bodyEl;if(!t)return;e.preventDefault(),_this.splitDragging=!0;var r=t.getBoundingClientRect(),o=function o(e){if(0===r.width)return;var t=(e.clientX-r.left)/r.width;_this.splitRatio=Math.min(.85,Math.max(.15,t));},_i=function i(){_this.splitDragging=!1,window.removeEventListener("pointermove",o),window.removeEventListener("pointerup",_i);};window.addEventListener("pointermove",o),window.addEventListener("pointerup",_i);},_this.resetSplit=function(){_this.splitRatio=.5;},_this.onInput=function(e){_this.draft=e.target.value;},_this.onScroll=function(e){var t=e.target;_this.highlightEl&&(_this.highlightEl.style.transform="translate(".concat(-t.scrollLeft,"px, ").concat(-t.scrollTop,"px)")),_this.linenosEl&&(_this.linenosEl.style.transform="translateY(".concat(-t.scrollTop,"px)"));};return _this;}_inherits(g,_d);return _createClass(g,[{key:"willUpdate",value:function willUpdate(e){e.has("value")&&(this.draft=this.value);}},{key:"currentValue",get:function get(){return this.draft;}},{key:"focusInput",value:function focusInput(){var _this2=this;this.updateComplete.then(function(){var _this2$textarea;return(_this2$textarea=_this2.textarea)===null||_this2$textarea===void 0?void 0:_this2$textarea.focus();});}},{key:"highlighted",get:function get(){if(!this.draft)return"";try{return c.highlight(this.draft,{language:"xml"}).value;}catch(_unused){return this.draft.replace(/[&<>]/g,function(e){return{"&":"&amp;","<":"&lt;",">":"&gt;"}[e];});}}},{key:"lineCount",get:function get(){return this.draft?this.draft.split("\n").length:1;}},{key:"render",value:function render(){var _this3=this;var e=p(this.draft),t=[];for(var _e=1;_e<=this.lineCount;_e+=1)t.push(r(_templateObject||(_templateObject=_taggedTemplateLiteral(["<div>","</div>"])),_e));return r(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n      <div class=\"bar\" part=\"source-bar\">\n        <span>HTML</span>\n        <span class=\"actions\">\n          <button type=\"button\" @click=",">\n            Cancel\n          </button>\n          <button\n            type=\"button\"\n            class=\"primary\"\n            @click=","\n          >\n            Done\n          </button>\n        </span>\n      </div>\n      <div class=",">\n        <div class=\"pane pane--code\" style=\"flex: 0 0 ","%\">\n          <div class=\"linenos\" part=\"line-numbers\" aria-hidden=\"true\">\n            <div class=\"linenos-inner\">","</div>\n          </div>\n          <div class=\"input-wrap\">\n            <pre class=\"hl\" aria-hidden=\"true\"><code>","</code></pre>\n            <textarea\n              part=\"source-textarea\"\n              spellcheck=\"false\"\n              autocapitalize=\"off\"\n              autocomplete=\"off\"\n              wrap=\"off\"\n              .value=","\n              @input=","\n              @scroll=","\n              @keydown=","\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 \xB7 double-click to reset\"\n          @pointerdown=","\n          @dblclick=","\n        ></div>\n        <div class=\"pane pane--preview\" part=\"preview\">\n          ","\n        </div>\n      </div>\n    "])),function(){return _this3.emit("wysiwyg-source-cancel");},function(){return _this3.emit("wysiwyg-source-apply",{html:_this3.draft});},l({body:!0,"body--dragging":this.splitDragging}),100*this.splitRatio,t,a(this.highlighted),this.value,this.onInput,this.onScroll,function(e){"Escape"===e.key&&(e.stopPropagation(),_this3.emit("wysiwyg-source-cancel"));},this.startSplitDrag,this.resetSplit,this.draft.trim()?r(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["<nile-wysiwyg-preview .content=","></nile-wysiwyg-preview>"])),e):r(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["<span class=\"preview-empty\">Nothing to preview</span>"]))));}}],[{key:"styles",get:function get(){return[t(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\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      "])))];}}]);}(d);e([o({type:String})],g.prototype,"value",void 0),e([i("textarea")],g.prototype,"textarea",void 0),e([i(".hl > code")],g.prototype,"highlightEl",void 0),e([i(".linenos-inner")],g.prototype,"linenosEl",void 0),e([i(".body")],g.prototype,"bodyEl",void 0),e([n()],g.prototype,"draft",void 0),e([n()],g.prototype,"splitRatio",void 0),e([n()],g.prototype,"splitDragging",void 0),g=e([s("nile-wysiwyg-source-view")],g);}};});
 //# sourceMappingURL=source-view.cjs.js.map

package/dist/nile-wysiwyg-editor/ui/source-view.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"source-view.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/source-view.ts"],"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 => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[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"],"names":["hljs","registerLanguage","xml","NileWysiwygSourceView","_d","g","constructor","this","value","draft","splitRatio","splitDragging","startSplitDrag","e","body","bodyEl","preventDefault","rect","getBoundingClientRect","onMove","ev","width","ratio","clientX","left","Math","min","max","onUp","window","removeEventListener","addEventListener","resetSplit","onInput","target","onScroll","ta","highlightEl","style","transform","scrollLeft","scrollTop","linenosEl","_this","_inherits","_createClass","key","willUpdate","changed","has","get","currentValue","focusInput","updateComplete","then","_this2$textarea","textarea","focus","highlighted","highlight","language","_unused","replace","c","lineCount","split","length","render","_this3","preview","sanitizeHtml","lines","i","push","html","_templateObject","_taggedTemplateLiteral","_templateObject2","emit","classMap","unsafeHTML","stopPropagation","trim","_templateObject3","_templateObject4","css","_templateObject5","NileElement","__decorate","property","type","String","prototype","query","state","customElement"],"mappings":"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"}
+{"version":3,"file":"source-view.cjs.js","sources":["../../../../src/nile-wysiwyg-editor/ui/source-view.ts"],"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 => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[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"],"names":["hljs","registerLanguage","xml","NileWysiwygSourceView","_d","g","constructor","this","value","draft","splitRatio","splitDragging","startSplitDrag","e","body","bodyEl","preventDefault","rect","getBoundingClientRect","onMove","ev","width","ratio","clientX","left","Math","min","max","onUp","window","removeEventListener","addEventListener","resetSplit","onInput","target","onScroll","ta","highlightEl","style","transform","scrollLeft","scrollTop","linenosEl","_this","_inherits","_createClass","key","willUpdate","changed","has","get","currentValue","focusInput","updateComplete","then","_this2$textarea","textarea","focus","highlighted","highlight","language","_unused","replace","c","lineCount","split","length","render","_this3","preview","sanitizeHtml","lines","i","push","html","_templateObject","_taggedTemplateLiteral","_templateObject2","emit","classMap","unsafeHTML","stopPropagation","trim","_templateObject3","_templateObject4","css","_templateObject5","NileElement","__decorate","property","type","String","prototype","query","state","customElement"],"mappings":"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"}

package/dist/nile-wysiwyg-editor/ui/source-view.esm.js

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{property as r,query as o,state as s,customElement as l}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import{H as h,x as c}from"../../xml-25c4108a.esm.js";import{N as d}from"../../internal/nile-element.esm.js";import{s as p}from"../engine/sanitize.esm.js";import"./preview.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";import"../engine/plugins/embeds.esm.js";import"../../index-6f3fa4ab.esm.js";import"../nile-wysiwyg-editor.css.esm.js";h.registerLanguage("xml",c);let g=class extends d{constructor(){super(...arguments),this.value="",this.draft="",this.splitRatio=.5,this.splitDragging=!1,this.startSplitDrag=e=>{const t=this.bodyEl;if(!t)return;e.preventDefault(),this.splitDragging=!0;const i=t.getBoundingClientRect(),r=e=>{if(0===i.width)return;const t=(e.clientX-i.left)/i.width;this.splitRatio=Math.min(.85,Math.max(.15,t))},o=()=>{this.splitDragging=!1,window.removeEventListener("pointermove",r),window.removeEventListener("pointerup",o)};window.addEventListener("pointermove",r),window.addEventListener("pointerup",o)},this.resetSplit=()=>{this.splitRatio=.5},this.onInput=e=>{this.draft=e.target.value},this.onScroll=e=>{const t=e.target;this.highlightEl&&(this.highlightEl.style.transform=`translate(${-t.scrollLeft}px, ${-t.scrollTop}px)`),this.linenosEl&&(this.linenosEl.style.transform=`translateY(${-t.scrollTop}px)`)}}static get styles(){return[t`
+import{__decorate as e}from"tslib";import{css as t,html as r}from"lit";import{property as o,query as i,state as n,customElement as s}from"lit/decorators.js";import{classMap as l}from"lit/directives/class-map.js";import{unsafeHTML as a}from"lit/directives/unsafe-html.js";import{H as c,x as h}from"../../xml-25c4108a.esm.js";import{N as d}from"../../internal/nile-element.esm.js";import{s as p}from"../engine/sanitize.esm.js";import"./preview.esm.js";import"../../internal/accessibility/a11y.state.enum.esm.js";import"../../internal/accessibility/a11y.property.enum.esm.js";import"../../internal/accessibility/role.enum.esm.js";import"../engine/plugins/embeds.esm.js";import"../../index-6f3fa4ab.esm.js";import"../nile-wysiwyg-editor.css.esm.js";c.registerLanguage("xml",h);let g=class extends d{constructor(){super(...arguments),this.value="",this.draft="",this.splitRatio=.5,this.splitDragging=!1,this.startSplitDrag=e=>{const t=this.bodyEl;if(!t)return;e.preventDefault(),this.splitDragging=!0;const r=t.getBoundingClientRect(),o=e=>{if(0===r.width)return;const t=(e.clientX-r.left)/r.width;this.splitRatio=Math.min(.85,Math.max(.15,t))},i=()=>{this.splitDragging=!1,window.removeEventListener("pointermove",o),window.removeEventListener("pointerup",i)};window.addEventListener("pointermove",o),window.addEventListener("pointerup",i)},this.resetSplit=()=>{this.splitRatio=.5},this.onInput=e=>{this.draft=e.target.value},this.onScroll=e=>{const t=e.target;this.highlightEl&&(this.highlightEl.style.transform=`translate(${-t.scrollLeft}px, ${-t.scrollTop}px)`),this.linenosEl&&(this.linenosEl.style.transform=`translateY(${-t.scrollTop}px)`)}}static get styles(){return[t`
         :host {
           display: flex;
           flex-direction: column;
@@ -20,9 +20,9 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           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 {
@@ -38,12 +38,12 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           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 {
@@ -74,7 +74,7 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
         /* --- 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);
@@ -90,9 +90,9 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           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;
         }
 
@@ -136,7 +136,7 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
         .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 {
@@ -151,7 +151,7 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           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
@@ -166,26 +166,26 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
 
         /* 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 {
@@ -193,7 +193,7 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           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;
         }
@@ -206,14 +206,14 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
 
         .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 {
@@ -223,11 +223,11 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
         .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;
         }
-      `]}willUpdate(e){e.has("value")&&(this.draft=this.value)}get currentValue(){return this.draft}focusInput(){this.updateComplete.then((()=>this.textarea?.focus()))}get highlighted(){if(!this.draft)return"";try{return h.highlight(this.draft,{language:"xml"}).value}catch{return this.draft.replace(/[&<>]/g,(e=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[e])))}}get lineCount(){return this.draft?this.draft.split("\n").length:1}render(){const e=p(this.draft),t=[];for(let e=1;e<=this.lineCount;e+=1)t.push(i`<div>${e}</div>`);return i`
+      `]}willUpdate(e){e.has("value")&&(this.draft=this.value)}get currentValue(){return this.draft}focusInput(){this.updateComplete.then((()=>this.textarea?.focus()))}get highlighted(){if(!this.draft)return"";try{return c.highlight(this.draft,{language:"xml"}).value}catch{return this.draft.replace(/[&<>]/g,(e=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[e])))}}get lineCount(){return this.draft?this.draft.split("\n").length:1}render(){const e=p(this.draft),t=[];for(let e=1;e<=this.lineCount;e+=1)t.push(r`<div>${e}</div>`);return r`
       <div class="bar" part="source-bar">
         <span>HTML</span>
         <span class="actions">
@@ -243,7 +243,7 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           </button>
         </span>
       </div>
-      <div class=${n({body:!0,"body--dragging":this.splitDragging})}>
+      <div class=${l({body:!0,"body--dragging":this.splitDragging})}>
         <div class="pane pane--code" style="flex: 0 0 ${100*this.splitRatio}%">
           <div class="linenos" part="line-numbers" aria-hidden="true">
             <div class="linenos-inner">${t}</div>
@@ -274,7 +274,7 @@ import{__decorate as e}from"tslib";import{css as t,html as i}from"lit";import{pr
           @dblclick=${this.resetSplit}
         ></div>
         <div class="pane pane--preview" part="preview">
-          ${this.draft.trim()?i`<nile-wysiwyg-preview .content=${e}></nile-wysiwyg-preview>`:i`<span class="preview-empty">Nothing to preview</span>`}
+          ${this.draft.trim()?r`<nile-wysiwyg-preview .content=${e}></nile-wysiwyg-preview>`:r`<span class="preview-empty">Nothing to preview</span>`}
         </div>
       </div>
-    `}};e([r({type:String})],g.prototype,"value",void 0),e([o("textarea")],g.prototype,"textarea",void 0),e([o(".hl > code")],g.prototype,"highlightEl",void 0),e([o(".linenos-inner")],g.prototype,"linenosEl",void 0),e([o(".body")],g.prototype,"bodyEl",void 0),e([s()],g.prototype,"draft",void 0),e([s()],g.prototype,"splitRatio",void 0),e([s()],g.prototype,"splitDragging",void 0),g=e([l("nile-wysiwyg-source-view")],g);
+    `}};e([o({type:String})],g.prototype,"value",void 0),e([i("textarea")],g.prototype,"textarea",void 0),e([i(".hl > code")],g.prototype,"highlightEl",void 0),e([i(".linenos-inner")],g.prototype,"linenosEl",void 0),e([i(".body")],g.prototype,"bodyEl",void 0),e([n()],g.prototype,"draft",void 0),e([n()],g.prototype,"splitRatio",void 0),e([n()],g.prototype,"splitDragging",void 0),g=e([s("nile-wysiwyg-source-view")],g);