npm - @aquera/nile-elements - Versions diffs - 2.0.15 → 2.0.17 - Mend

@aquera/nile-elements 2.0.15 → 2.0.17

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

Files changed (376) hide show

package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.css.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    font-family: var(\n      --nile-wysiwyg-font-family,\n      var(\n        --nile-font-family-sans-serif,\n        var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n      )\n    );\n  }\n\n  .nile-wysiwyg {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-border-color,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))\n      );\n    border-radius: var(\n      --nile-wysiwyg-radius,\n      var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))\n    );\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n    box-sizing: border-box;\n  }\n\n  /* --- Fullscreen (distraction-free) mode --- */\n  :host([fullscreen]) {\n    position: fixed;\n    inset: 0;\n    z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  :host([fullscreen]) .nile-wysiwyg {\n    height: 100%;\n    border: none;\n    border-radius: 0;\n  }\n\n  :host([fullscreen]) .nile-wysiwyg__surface {\n    max-height: none;\n  }\n\n  :host([disabled]) .nile-wysiwyg {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    background: var(\n      --nile-wysiwyg-disabled-bg,\n      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))\n    );\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .ProseMirror {\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  .nile-wysiwyg__surface {\n    flex: 1;\n    overflow-y: auto;\n    max-height: var(--nile-wysiwyg-max-height, none);\n  }\n\n  /* --- ProseMirror base rules (inlined from prosemirror-view/style) --- */\n  .ProseMirror {\n    position: relative;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n    white-space: break-spaces;\n    -webkit-font-variant-ligatures: none;\n    font-variant-ligatures: none;\n    font-feature-settings: 'liga' 0;\n    outline: none;\n    padding: var(--nile-wysiwyg-content-padding, 12px);\n    min-height: var(--nile-wysiwyg-min-height, 160px);\n    font-size: var(--nile-wysiwyg-font-size, inherit);\n    line-height: var(--nile-wysiwyg-line-height, inherit);\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    color: var(\n      --nile-wysiwyg-color,\n      var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    );\n    box-sizing: border-box;\n    border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))\n      var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));\n  }\n\n  .ProseMirror pre {\n    white-space: pre-wrap;\n  }\n\n  .ProseMirror li {\n    position: relative;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection {\n    caret-color: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: 2px solid\n      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));\n  }\n\n  /* Gap cursor (inlined from prosemirror-gapcursor/style) */\n  .ProseMirror-gapcursor {\n    display: none;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .ProseMirror-gapcursor:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: -2px;\n    width: 20px;\n    border-top: 1px solid currentColor;\n    animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;\n  }\n\n  @keyframes nile-wysiwyg-cursor-blink {\n    to {\n      visibility: hidden;\n    }\n  }\n\n  .ProseMirror-focused .ProseMirror-gapcursor {\n    display: block;\n  }\n\n  /* --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- */\n  .nile-wysiwyg__empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n    user-select: none;\n    opacity: 0.7;\n    color: var(\n      --nile-wysiwyg-placeholder-color,\n      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))\n    );\n  }\n\n  /* --- Document content typography --- */\n  .ProseMirror > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Legacy nile-rich-text-editor typography */\n  .ProseMirror p {\n    margin: 1em 0;\n  }\n\n  .ProseMirror h1,\n  .ProseMirror h2,\n  .ProseMirror h3,\n  .ProseMirror h4,\n  .ProseMirror h5,\n  .ProseMirror h6 {\n    font-weight: bold;\n  }\n\n  .ProseMirror h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n  }\n  .ProseMirror h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n  }\n  .ProseMirror h3 {\n    font-size: 1.17em;\n    margin: 1em 0;\n  }\n  .ProseMirror h4 {\n    font-size: 1em;\n    margin: 1.33em 0;\n  }\n  .ProseMirror h5 {\n    font-size: 0.83em;\n    margin: 1.67em 0;\n  }\n  .ProseMirror h6 {\n    font-size: 0.67em;\n    margin: 2.33em 0;\n  }\n\n  .ProseMirror blockquote {\n    margin: 0.5em 0;\n    padding: 0.25em 0 0.25em 1em;\n    border-left: 3px solid\n      var(\n        --nile-wysiwyg-blockquote-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    color: var(\n      --nile-wysiwyg-blockquote-color,\n      var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))\n    );\n  }\n\n  .ProseMirror ul,\n  .ProseMirror ol {\n    list-style-position: outside;\n    padding-inline-start: 24px;\n  }\n\n  .ProseMirror hr {\n    border: none;\n    border-top: 1px solid\n      var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));\n    margin: 1em 0;\n  }\n\n  /* Legacy: brand color, no underline */\n  .ProseMirror a {\n    color: var(\n      --nile-wysiwyg-link-color,\n      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))\n    );\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .ProseMirror code.nile-wysiwyg__inline-code {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border-radius: 4px;\n    padding: 0.1em 0.35em;\n  }\n\n  /* --- Code blocks --- */\n  .ProseMirror pre.nile-wysiwyg__code-block {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n    border-radius: 6px;\n    padding: 12px 14px;\n    margin: 0.5em 0;\n    overflow-x: auto;\n  }\n\n  /* --- Tables (rules required by prosemirror-tables) --- */\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 0.5em 0;\n  }\n\n  .ProseMirror table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .ProseMirror td,\n  .ProseMirror th {\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-table-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    padding: 6px 8px;\n    min-width: 1em;\n  }\n\n  .ProseMirror th {\n    background: var(\n      --nile-wysiwyg-table-header-bg,\n      var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))\n    );\n    font-weight: 600;\n    text-align: left;\n  }\n\n \n  .ProseMirror td > *,\n  .ProseMirror th > * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: -2px;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n\n  /* --- Layout tables (role=\"presentation\"): borderless output, dashed\n     guides while editing so the structure stays visible. --- */\n  .ProseMirror table[data-layout] td,\n  .ProseMirror table[data-layout] th {\n    border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n    background: transparent;\n    font-weight: inherit;\n    text-align: inherit;\n  }\n\n  /* --- Bookmarks: invisible anchors get a flag marker while editing --- */\n  .ProseMirror a[data-bookmark] {\n    display: inline-block;\n    vertical-align: baseline;\n    cursor: default;\n    text-decoration: none;\n  }\n\n  .ProseMirror a[data-bookmark]::after {\n    content: '\u2691';\n    font-size: 12px;\n    line-height: 1;\n    padding: 0 1px;\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: '';\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));\n    pointer-events: none;\n  }\n\n  /* --- Images (ProseMirror's standard inline image node) --- */\n  .ProseMirror img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 4px;\n  }\n\n  /* --- Image resize handles --- */\n  .ProseMirror .nile-wysiwyg__image-resizer {\n    position: relative;\n    display: inline-block;\n    line-height: 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle {\n    display: none;\n    position: absolute;\n    width: 9px;\n    height: 9px;\n    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border: 1.5px solid var(--ng-colors-bg-primary);\n    border-radius: 2px;\n    z-index: 2;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected img {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }\n\n  /* --- Captioned figures --- */\n  .ProseMirror figure.nile-wysiwyg__figure {\n    margin: 0.75em 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure img {\n    width: 100%;\n    display: block;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__figcaption {\n    font-size: 0.85em;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    text-align: center;\n    padding: 4px 8px;\n    line-height: 1.4;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {\n    content: 'Add a caption\u2026';\n    float: left;\n    width: 100%;\n    pointer-events: none;\n    color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n    margin-bottom: -1.4em;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--selected {\n    border-radius: 4px;\n  }\n\n  /* --- Embeds --- */\n  .ProseMirror div.nile-wysiwyg__embed {\n    position: relative;\n    aspect-ratio: 16 / 9;\n    /* Default size; an inline width from drag-resize overrides it, capped by\n       max-width. overflow stays visible so the resize handles aren't clipped\n       (rounding lives on the iframe). */\n    width: min(640px, 100%);\n    max-width: 100%;\n    margin: 0.75em 0;\n    border-radius: 8px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n    border-radius: 8px;\n    /* Editing mode: the first click selects the node instead of hitting the\n       iframe; once selected (or in readonly) the video is interactive. */\n    pointer-events: none;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,\n  :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {\n    pointer-events: auto;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  /* A live resize drag must not lose mousemove to the embedded document. */\n  .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {\n    pointer-events: none !important;\n  }\n\n  /* --- Code highlighting (hljs tokens) ---\n     Each hue routes through an --ng-componentcolors-utility-* token, which the\n     token layer remaps to its lighter 400 step in the dark theme. Hardcoding the\n     one-light palette here left syntax unreadable on the dark code surface. --- */\n  .ProseMirror .hljs-comment,\n  .ProseMirror .hljs-quote {\n    color: var(--ng-componentcolors-utility-gray-500);\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-keyword,\n  .ProseMirror .hljs-selector-tag,\n  .ProseMirror .hljs-formula,\n  .ProseMirror .hljs-doctag {\n    color: var(--ng-componentcolors-utility-purple-600);\n  }\n\n  .ProseMirror .hljs-section,\n  .ProseMirror .hljs-name,\n  .ProseMirror .hljs-selector-id,\n  .ProseMirror .hljs-selector-class,\n  .ProseMirror .hljs-deletion,\n  .ProseMirror .hljs-subst,\n  .ProseMirror .hljs-tag {\n    color: var(--ng-componentcolors-utility-error-600);\n  }\n\n  .ProseMirror .hljs-literal,\n  .ProseMirror .hljs-built_in,\n  .ProseMirror .hljs-bullet {\n    color: var(--ng-componentcolors-utility-blue-600);\n  }\n\n  .ProseMirror .hljs-string,\n  .ProseMirror .hljs-regexp,\n  .ProseMirror .hljs-addition,\n  .ProseMirror .hljs-attribute,\n  .ProseMirror .hljs-meta .hljs-string {\n    color: var(--ng-componentcolors-utility-green-600);\n  }\n\n  .ProseMirror .hljs-attr,\n  .ProseMirror .hljs-variable,\n  .ProseMirror .hljs-template-variable,\n  .ProseMirror .hljs-type,\n  .ProseMirror .hljs-selector-attr,\n  .ProseMirror .hljs-selector-pseudo,\n  .ProseMirror .hljs-number {\n    color: var(--ng-componentcolors-utility-orange-600);\n  }\n\n  .ProseMirror .hljs-symbol,\n  .ProseMirror .hljs-meta,\n  .ProseMirror .hljs-link,\n  .ProseMirror .hljs-operator,\n  .ProseMirror .hljs-title,\n  .ProseMirror .hljs-title.class_,\n  .ProseMirror .hljs-title.function_ {\n    color: var(--ng-componentcolors-utility-indigo-600);\n  }\n\n  .ProseMirror .hljs-emphasis {\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-strong {\n    font-weight: bold;\n  }\n\n  /* --- Checklists --- */\n  .ProseMirror ul.nile-wysiwyg__task-list {\n    list-style: none;\n    padding-inline-start: 4px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {\n    /* Center on the first text line: (1 line box - checkbox height) / 2. */\n    margin: calc((1em * 1.45 - 14px) / 2) 0 0;\n    width: 14px;\n    height: 14px;\n    flex: none;\n    cursor: pointer;\n    accent-color: var(\n      --nile-colors-primary-600,\n      var(--ng-componentcolors-utility-blue-600)\n    );\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* The content's paragraph margins (legacy 1em) push text below the\n     checkbox \u2014 strip them at the edges of each item. */\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {\n    margin-bottom: 0;\n  }\n\n  .ProseMirror ul.nile-wysiwyg__task-list > li + li {\n    margin-top: 0.35em;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n    text-decoration: line-through;\n  }\n\n  /* --- Counter footer --- */\n  .nile-wysiwyg__counter {\n    padding: 4px 12px 6px;\n    text-align: right;\n    font-size: 12px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n  }\n\n  .nile-wysiwyg__counter.over {\n    color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));\n    font-weight: 600;\n  }\n\n  /* --- Author <style> block (from HTML source) ---\n     Applied live by StyleBlockView (a hidden <style> host, scoped to the\n     content); the block renders nothing in the editor. */\n  .nile-wysiwyg__style-block {\n    display: none;\n  }\n\n  /* --- Sticky toolbar ---\n     Pins to the top of the scroll container. Note: sticky anchors to the\n     container's PADDING box, so if the scroll container has top padding, a\n     band of content shows above the toolbar \u2014 set --nile-wysiwyg-sticky-top\n     (or remove the container's top padding) to compensate. The opaque\n     background makes the pinned bar self-backing so content can never bleed\n     through it. */\n  :host([sticky-toolbar]) nile-wysiwyg-toolbar {\n    position: sticky;\n    top: var(--nile-wysiwyg-sticky-top, 0);\n    z-index: 12;\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  /* --- Mentions & suggestions --- */\n  .ProseMirror span.nile-wysiwyg__mention {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));\n    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));\n    font-weight: 500;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Merge fields --- */\n  .ProseMirror span.nile-wysiwyg__merge-field {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(\n      --nile-wysiwyg-merge-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    color: var(\n      --nile-wysiwyg-merge-color,\n      var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))\n    );\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.9em;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Math --- */\n  .ProseMirror span.nile-wysiwyg__math {\n    display: inline-block;\n    padding: 0 2px;\n    font-family: \"Cambria Math\", \"Latin Modern Math\", serif;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math--block {\n    display: block;\n    text-align: center;\n    margin: 8px 0;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border-radius: 3px;\n  }\n\n  /* Format painter armed: hint the next selection will be painted. */\n  .ProseMirror.nile-wysiwyg--painting {\n    cursor: cell;\n  }\n\n  .ProseMirror .nile-wysiwyg__suggestion {\n    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n    border-radius: 3px;\n  }\n\n  /* --- Find & replace highlights --- */\n  .ProseMirror .nile-wysiwyg__find-match {\n    background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));\n    border-radius: 2px;\n  }\n\n  .ProseMirror .nile-wysiwyg__find-active {\n    background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));\n  }\n\n  /* --- Upload placeholder --- */\n  .nile-wysiwyg__upload-placeholder {\n    display: inline-block;\n    padding: 6px 12px;\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    border-radius: 6px;\n    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n    font-size: 0.85em;\n  }\n\n  /* --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.\n     Serialized output carries data-list-style=\"multilevel\"; consumers\n     rendering it outside the editor need these same counter rules. --- */\n  .ProseMirror ol[data-list-style='multilevel'],\n  .ProseMirror ol[data-list-style='multilevel'] ol {\n    list-style: none;\n    counter-reset: nile-multilevel;\n  }\n\n  .ProseMirror ol[data-list-style='multilevel'] > li,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li {\n    counter-increment: nile-multilevel;\n  }\n\n  /* The number sits inside the item's first paragraph so it shares a line. */\n  .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {\n    content: counters(nile-multilevel, '.') '. ';\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* --- Show blocks: dashed outlines + tag labels while editing --- */\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre,\n  .nile-wysiwyg--show-blocks .ProseMirror figure,\n  .nile-wysiwyg--show-blocks .ProseMirror ul,\n  .nile-wysiwyg--show-blocks .ProseMirror ol,\n  .nile-wysiwyg--show-blocks .ProseMirror li,\n  .nile-wysiwyg--show-blocks .ProseMirror table {\n    outline: 1px dashed\n      var(\n        --nile-wysiwyg-block-outline,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n      );\n    outline-offset: -1px;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre {\n    position: relative;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0 3px;\n    font-family: system-ui, sans-serif;\n    font-size: 9px;\n    font-weight: 600;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.5px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    border-radius: 0 0 4px 0;\n    pointer-events: none;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",e=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: block;\n    font-family: var(\n      --nile-wysiwyg-font-family,\n      var(\n        --nile-font-family-sans-serif,\n        var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n      )\n    );\n  }\n\n  .nile-wysiwyg {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-border-color,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))\n      );\n    border-radius: var(\n      --nile-wysiwyg-radius,\n      var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))\n    );\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n    box-sizing: border-box;\n  }\n\n  /* --- Fullscreen (distraction-free) mode --- */\n  :host([fullscreen]) {\n    position: fixed;\n    inset: 0;\n    z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  :host([fullscreen]) .nile-wysiwyg {\n    height: 100%;\n    border: none;\n    border-radius: 0;\n  }\n\n  :host([fullscreen]) .nile-wysiwyg__surface {\n    max-height: none;\n  }\n\n  :host([disabled]) .nile-wysiwyg {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n    background: var(\n      --nile-wysiwyg-disabled-bg,\n      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))\n    );\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) .ProseMirror {\n    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n  }\n\n  .nile-wysiwyg__surface {\n    flex: 1;\n    overflow-y: auto;\n    max-height: var(--nile-wysiwyg-max-height, none);\n  }\n\n  /* --- ProseMirror base rules (inlined from prosemirror-view/style) --- */\n  .ProseMirror {\n    position: relative;\n    word-wrap: break-word;\n    white-space: pre-wrap;\n    white-space: break-spaces;\n    -webkit-font-variant-ligatures: none;\n    font-variant-ligatures: none;\n    font-feature-settings: 'liga' 0;\n    outline: none;\n    padding: var(--nile-wysiwyg-content-padding, 12px);\n    min-height: var(--nile-wysiwyg-min-height, 160px);\n    font-size: var(--nile-wysiwyg-font-size, inherit);\n    line-height: var(--nile-wysiwyg-line-height, inherit);\n    tab-size: 4;\n    -moz-tab-size: 4;\n    word-break: break-word;\n    color: var(\n      --nile-wysiwyg-color,\n      var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    );\n    box-sizing: border-box;\n    border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))\n      var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));\n  }\n\n  .ProseMirror pre {\n    white-space: pre-wrap;\n  }\n\n  .ProseMirror li {\n    position: relative;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection {\n    caret-color: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: 2px solid\n      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));\n  }\n\n  /* Gap cursor (inlined from prosemirror-gapcursor/style) */\n  .ProseMirror-gapcursor {\n    display: none;\n    pointer-events: none;\n    position: absolute;\n  }\n\n  .ProseMirror-gapcursor:after {\n    content: '';\n    display: block;\n    position: absolute;\n    top: -2px;\n    width: 20px;\n    border-top: 1px solid currentColor;\n    animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;\n  }\n\n  @keyframes nile-wysiwyg-cursor-blink {\n    to {\n      visibility: hidden;\n    }\n  }\n\n  .ProseMirror-focused .ProseMirror-gapcursor {\n    display: block;\n  }\n\n  /* --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- */\n  .nile-wysiwyg__empty::before {\n    content: attr(data-placeholder);\n    float: left;\n    height: 0;\n    pointer-events: none;\n    user-select: none;\n    opacity: 0.7;\n    color: var(\n      --nile-wysiwyg-placeholder-color,\n      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))\n    );\n  }\n\n  /* --- Document content typography --- */\n  .ProseMirror > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror > :last-child {\n    margin-bottom: 0;\n  }\n\n  /* Legacy nile-rich-text-editor typography */\n  .ProseMirror p {\n    margin: 1em 0;\n  }\n\n  .ProseMirror h1,\n  .ProseMirror h2,\n  .ProseMirror h3,\n  .ProseMirror h4,\n  .ProseMirror h5,\n  .ProseMirror h6 {\n    font-weight: bold;\n  }\n\n  .ProseMirror h1 {\n    font-size: 2em;\n    margin: 0.67em 0;\n  }\n  .ProseMirror h2 {\n    font-size: 1.5em;\n    margin: 0.83em 0;\n  }\n  .ProseMirror h3 {\n    font-size: 1.17em;\n    margin: 1em 0;\n  }\n  .ProseMirror h4 {\n    font-size: 1em;\n    margin: 1.33em 0;\n  }\n  .ProseMirror h5 {\n    font-size: 0.83em;\n    margin: 1.67em 0;\n  }\n  .ProseMirror h6 {\n    font-size: 0.67em;\n    margin: 2.33em 0;\n  }\n\n  .ProseMirror blockquote {\n    margin: 0.5em 0;\n    padding: 0.25em 0 0.25em 1em;\n    border-left: 3px solid\n      var(\n        --nile-wysiwyg-blockquote-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    color: var(\n      --nile-wysiwyg-blockquote-color,\n      var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))\n    );\n  }\n\n  .ProseMirror ul,\n  .ProseMirror ol {\n    list-style-position: outside;\n    padding-inline-start: 24px;\n  }\n\n  .ProseMirror hr {\n    border: none;\n    border-top: 1px solid\n      var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));\n    margin: 1em 0;\n  }\n\n  /* Legacy: brand color, no underline */\n  .ProseMirror a {\n    color: var(\n      --nile-wysiwyg-link-color,\n      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))\n    );\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  .ProseMirror code.nile-wysiwyg__inline-code {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border-radius: 4px;\n    padding: 0.1em 0.35em;\n  }\n\n  /* --- Code blocks --- */\n  .ProseMirror pre.nile-wysiwyg__code-block {\n    font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n    font-size: 0.9em;\n    background: var(\n      --nile-wysiwyg-code-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n    border-radius: 6px;\n    padding: 12px 14px;\n    margin: 0.5em 0;\n    overflow-x: auto;\n  }\n\n  /* --- Tables (rules required by prosemirror-tables) --- */\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n    margin: 0.5em 0;\n  }\n\n  .ProseMirror table {\n    border-collapse: collapse;\n    table-layout: fixed;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .ProseMirror td,\n  .ProseMirror th {\n    vertical-align: top;\n    box-sizing: border-box;\n    position: relative;\n    border: 1px solid\n      var(\n        --nile-wysiwyg-table-border,\n        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n      );\n    padding: 6px 8px;\n    min-width: 1em;\n  }\n\n  .ProseMirror th {\n    background: var(\n      --nile-wysiwyg-table-header-bg,\n      var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))\n    );\n    font-weight: 600;\n    text-align: left;\n  }\n\n \n  .ProseMirror td > *,\n  .ProseMirror th > * {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  .ProseMirror .column-resize-handle {\n    position: absolute;\n    right: -2px;\n    top: 0;\n    bottom: 0;\n    width: 4px;\n    z-index: 20;\n    background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));\n    pointer-events: none;\n  }\n\n  .ProseMirror.resize-cursor {\n    cursor: ew-resize;\n    cursor: col-resize;\n  }\n\n  /* --- Email fidelity: an unsized layout table (e.g. a button) fits its\n     content, as it does in mail clients, instead of the 100% default. --- */\n  :host([email-fidelity]) .ProseMirror table[data-autowidth] {\n    width: auto;\n  }\n\n  /* Column resizing sets an inline min-width of 100px per column; on a nested\n     layout table (e.g. a row of social icons) that overflows the cell holding it. */\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] {\n    min-width: 0 !important;\n  }\n\n  /* Email fidelity: the wrapper is editor-only (it holds the resize handles), so\n     its margin would add space the saved email doesn't have. */\n  :host([email-fidelity]) .ProseMirror .tableWrapper {\n    margin: 0;\n  }\n\n  /* Email fidelity: draw unstyled layout-table cells like a mail client (no padding, centred, no header fill). */\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > td,\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {\n    padding: 0;\n    vertical-align: middle;\n  }\n\n  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {\n    background: none;\n  }\n\n  /* --- Layout tables (role=\"presentation\"): borderless output, dashed\n     guides while editing so the structure stays visible. --- */\n  .ProseMirror table[data-layout] td,\n  .ProseMirror table[data-layout] th {\n    /* Draw the editing guide with an inset outline, not a border/background, so\n       author-set cell borders and backgrounds (email fidelity) are preserved. */\n    outline: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n    outline-offset: -1px;\n    font-weight: inherit;\n    text-align: inherit;\n  }\n\n  /* --- Bookmarks: invisible anchors get a flag marker while editing --- */\n  .ProseMirror a[data-bookmark] {\n    display: inline-block;\n    vertical-align: baseline;\n    cursor: default;\n    text-decoration: none;\n  }\n\n  .ProseMirror a[data-bookmark]::after {\n    content: '\u2691';\n    font-size: 12px;\n    line-height: 1;\n    padding: 0 1px;\n    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .selectedCell:after {\n    z-index: 2;\n    position: absolute;\n    content: '';\n    left: 0;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));\n    pointer-events: none;\n  }\n\n  /* --- Images (ProseMirror's standard inline image node) --- */\n  .ProseMirror img {\n    max-width: 100%;\n    height: auto;\n    border-radius: 4px;\n  }\n\n  /* --- Image resize handles --- */\n  .ProseMirror .nile-wysiwyg__image-resizer {\n    position: relative;\n    display: inline-block;\n    line-height: 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle {\n    display: none;\n    position: absolute;\n    width: 9px;\n    height: 9px;\n    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border: 1.5px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: 2px;\n    z-index: 2;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__image-resizer--selected img {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }\n  .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }\n\n  /* --- Captioned figures --- */\n  .ProseMirror figure.nile-wysiwyg__figure {\n    margin: 0.75em 0;\n    max-width: 100%;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {\n    margin-left: auto;\n    margin-right: auto;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure img {\n    width: 100%;\n    display: block;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {\n    display: block;\n  }\n\n  .ProseMirror .nile-wysiwyg__figcaption {\n    font-size: 0.85em;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    text-align: center;\n    padding: 4px 8px;\n    line-height: 1.4;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {\n    content: 'Add a caption\u2026';\n    float: left;\n    width: 100%;\n    pointer-events: none;\n    color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n    margin-bottom: -1.4em;\n  }\n\n  .ProseMirror figure.nile-wysiwyg__figure--selected {\n    border-radius: 4px;\n  }\n\n  /* --- Embeds --- */\n  .ProseMirror div.nile-wysiwyg__embed {\n    position: relative;\n    aspect-ratio: 16 / 9;\n    /* Default size; an inline width from drag-resize overrides it, capped by\n       max-width. overflow stays visible so the resize handles aren't clipped\n       (rounding lives on the iframe). */\n    width: min(640px, 100%);\n    max-width: 100%;\n    margin: 0.75em 0;\n    border-radius: 8px;\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed iframe {\n    width: 100%;\n    height: 100%;\n    border: 0;\n    display: block;\n    border-radius: 8px;\n    /* Editing mode: the first click selects the node instead of hitting the\n       iframe; once selected (or in readonly) the video is interactive. */\n    pointer-events: none;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,\n  :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {\n    pointer-events: auto;\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {\n    display: block;\n  }\n\n  /* A live resize drag must not lose mousemove to the embedded document. */\n  .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {\n    pointer-events: none !important;\n  }\n\n  /* --- Code highlighting (hljs tokens) ---\n     Each hue routes through an --ng-componentcolors-utility-* token, which the\n     token layer remaps to its lighter 400 step in the dark theme. Hardcoding the\n     one-light palette here left syntax unreadable on the dark code surface. --- */\n  .ProseMirror .hljs-comment,\n  .ProseMirror .hljs-quote {\n    color: var(--ng-componentcolors-utility-gray-500);\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-keyword,\n  .ProseMirror .hljs-selector-tag,\n  .ProseMirror .hljs-formula,\n  .ProseMirror .hljs-doctag {\n    color: var(--ng-componentcolors-utility-purple-600);\n  }\n\n  .ProseMirror .hljs-section,\n  .ProseMirror .hljs-name,\n  .ProseMirror .hljs-selector-id,\n  .ProseMirror .hljs-selector-class,\n  .ProseMirror .hljs-deletion,\n  .ProseMirror .hljs-subst,\n  .ProseMirror .hljs-tag {\n    color: var(--ng-componentcolors-utility-error-600);\n  }\n\n  .ProseMirror .hljs-literal,\n  .ProseMirror .hljs-built_in,\n  .ProseMirror .hljs-bullet {\n    color: var(--ng-componentcolors-utility-blue-600);\n  }\n\n  .ProseMirror .hljs-string,\n  .ProseMirror .hljs-regexp,\n  .ProseMirror .hljs-addition,\n  .ProseMirror .hljs-attribute,\n  .ProseMirror .hljs-meta .hljs-string {\n    color: var(--ng-componentcolors-utility-green-600);\n  }\n\n  .ProseMirror .hljs-attr,\n  .ProseMirror .hljs-variable,\n  .ProseMirror .hljs-template-variable,\n  .ProseMirror .hljs-type,\n  .ProseMirror .hljs-selector-attr,\n  .ProseMirror .hljs-selector-pseudo,\n  .ProseMirror .hljs-number {\n    color: var(--ng-componentcolors-utility-orange-600);\n  }\n\n  .ProseMirror .hljs-symbol,\n  .ProseMirror .hljs-meta,\n  .ProseMirror .hljs-link,\n  .ProseMirror .hljs-operator,\n  .ProseMirror .hljs-title,\n  .ProseMirror .hljs-title.class_,\n  .ProseMirror .hljs-title.function_ {\n    color: var(--ng-componentcolors-utility-indigo-600);\n  }\n\n  .ProseMirror .hljs-emphasis {\n    font-style: italic;\n  }\n\n  .ProseMirror .hljs-strong {\n    font-weight: bold;\n  }\n\n  /* --- Checklists --- */\n  .ProseMirror ul.nile-wysiwyg__task-list {\n    list-style: none;\n    padding-inline-start: 4px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {\n    /* Center on the first text line: (1 line box - checkbox height) / 2. */\n    margin: calc((1em * 1.45 - 14px) / 2) 0 0;\n    width: 14px;\n    height: 14px;\n    flex: none;\n    cursor: pointer;\n    accent-color: var(\n      --nile-colors-primary-600,\n      var(--ng-componentcolors-utility-blue-600)\n    );\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {\n    flex: 1;\n    min-width: 0;\n  }\n\n  /* The content's paragraph margins (legacy 1em) push text below the\n     checkbox \u2014 strip them at the edges of each item. */\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {\n    margin-top: 0;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {\n    margin-bottom: 0;\n  }\n\n  .ProseMirror ul.nile-wysiwyg__task-list > li + li {\n    margin-top: 0.35em;\n  }\n\n  .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n    text-decoration: line-through;\n  }\n\n  /* --- Counter footer --- */\n  .nile-wysiwyg__counter {\n    padding: 4px 12px 6px;\n    text-align: right;\n    font-size: 12px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n    border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n  }\n\n  .nile-wysiwyg__counter.over {\n    color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));\n    font-weight: 600;\n  }\n\n  /* --- Author <style> block (from HTML source) ---\n     Applied live by StyleBlockView (a hidden <style> host, scoped to the\n     content); the block renders nothing in the editor. */\n  .nile-wysiwyg__style-block {\n    display: none;\n  }\n\n  /* --- Sticky toolbar ---\n     Pins to the top of the scroll container. Note: sticky anchors to the\n     container's PADDING box, so if the scroll container has top padding, a\n     band of content shows above the toolbar \u2014 set --nile-wysiwyg-sticky-top\n     (or remove the container's top padding) to compensate. The opaque\n     background makes the pinned bar self-backing so content can never bleed\n     through it. */\n  :host([sticky-toolbar]) nile-wysiwyg-toolbar {\n    position: sticky;\n    top: var(--nile-wysiwyg-sticky-top, 0);\n    z-index: 12;\n    background: var(\n      --nile-wysiwyg-bg,\n      var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n    );\n  }\n\n  /* --- Mentions & suggestions --- */\n  .ProseMirror span.nile-wysiwyg__mention {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));\n    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));\n    font-weight: 500;\n    /* Short mentions stay on one line; a long one (e.g. a deep field path) wraps\n       inside its container instead of overflowing a table cell or the editor. */\n    max-width: 100%;\n    overflow-wrap: anywhere;\n  }\n\n  /* The chip's 500 is only a default \u2014 bold, headings and an explicit\n     font-weight from the content win, so the chip looks the way it exports. */\n  .ProseMirror :is(strong, b, h1, h2, h3, h4, h5, h6, th, [style*='font-weight'])\n    span.nile-wysiwyg__mention {\n    font-weight: inherit;\n  }\n\n  .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Merge fields --- */\n  .ProseMirror span.nile-wysiwyg__merge-field {\n    display: inline-block;\n    padding: 0 4px;\n    border-radius: 4px;\n    background: var(\n      --nile-wysiwyg-merge-bg,\n      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n    );\n    color: var(\n      --nile-wysiwyg-merge-color,\n      var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))\n    );\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n    font-size: 0.9em;\n    white-space: nowrap;\n  }\n\n  .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n  }\n\n  /* --- Math --- */\n  .ProseMirror span.nile-wysiwyg__math {\n    display: inline-block;\n    padding: 0 2px;\n    font-family: \"Cambria Math\", \"Latin Modern Math\", serif;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math--block {\n    display: block;\n    text-align: center;\n    margin: 8px 0;\n  }\n\n  .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {\n    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n    border-radius: 3px;\n  }\n\n  /* Format painter armed: hint the next selection will be painted. */\n  .ProseMirror.nile-wysiwyg--painting {\n    cursor: cell;\n  }\n\n  .ProseMirror .nile-wysiwyg__suggestion {\n    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n    border-radius: 3px;\n  }\n\n  /* --- Find & replace highlights --- */\n  .ProseMirror .nile-wysiwyg__find-match {\n    background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));\n    border-radius: 2px;\n  }\n\n  .ProseMirror .nile-wysiwyg__find-active {\n    background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));\n  }\n\n  /* --- Upload placeholder --- */\n  .nile-wysiwyg__upload-placeholder {\n    display: inline-block;\n    padding: 6px 12px;\n    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    border-radius: 6px;\n    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n    color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n    font-size: 0.85em;\n  }\n\n  /* --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.\n     Serialized output carries data-list-style=\"multilevel\"; consumers\n     rendering it outside the editor need these same counter rules. --- */\n  .ProseMirror ol[data-list-style='multilevel'],\n  .ProseMirror ol[data-list-style='multilevel'] ol {\n    list-style: none;\n    counter-reset: nile-multilevel;\n  }\n\n  .ProseMirror ol[data-list-style='multilevel'] > li,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li {\n    counter-increment: nile-multilevel;\n  }\n\n  /* The number sits inside the item's first paragraph so it shares a line. */\n  .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,\n  .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {\n    content: counters(nile-multilevel, '.') '. ';\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* --- Show blocks: dashed outlines + tag labels while editing --- */\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre,\n  .nile-wysiwyg--show-blocks .ProseMirror figure,\n  .nile-wysiwyg--show-blocks .ProseMirror ul,\n  .nile-wysiwyg--show-blocks .ProseMirror ol,\n  .nile-wysiwyg--show-blocks .ProseMirror li,\n  .nile-wysiwyg--show-blocks .ProseMirror table {\n    outline: 1px dashed\n      var(\n        --nile-wysiwyg-block-outline,\n        var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n      );\n    outline-offset: -1px;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p,\n  .nile-wysiwyg--show-blocks .ProseMirror h1,\n  .nile-wysiwyg--show-blocks .ProseMirror h2,\n  .nile-wysiwyg--show-blocks .ProseMirror h3,\n  .nile-wysiwyg--show-blocks .ProseMirror h4,\n  .nile-wysiwyg--show-blocks .ProseMirror h5,\n  .nile-wysiwyg--show-blocks .ProseMirror h6,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n  .nile-wysiwyg--show-blocks .ProseMirror pre {\n    position: relative;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after,\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after,\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after {\n    position: absolute;\n    top: 0;\n    left: 0;\n    padding: 0 3px;\n    font-family: system-ui, sans-serif;\n    font-size: 9px;\n    font-weight: 600;\n    font-style: normal;\n    line-height: 14px;\n    letter-spacing: 0.5px;\n    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n    border-radius: 0 0 4px 0;\n    pointer-events: none;\n  }\n\n  .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }\n  .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }\n  .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }\n  .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }\n"]))));}};});
 //# sourceMappingURL=nile-wysiwyg-editor.css.cjs.js.map

package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.css.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nile-wysiwyg-editor.css.cjs.js","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n font-family: var(\n --nile-wysiwyg-font-family,\n var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n )\n );\n }\n\n .nile-wysiwyg {\n position: relative;\n display: flex;\n flex-direction: column;\n border: 1px solid\n var(\n --nile-wysiwyg-border-color,\n var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))\n );\n border-radius: var(\n --nile-wysiwyg-radius,\n var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))\n );\n background: var(\n --nile-wysiwyg-bg,\n var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n );\n box-sizing: border-box;\n }\n\n /* --- Fullscreen (distraction-free) mode --- /\n :host([fullscreen]) {\n position: fixed;\n inset: 0;\n z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);\n background: var(\n --nile-wysiwyg-bg,\n var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n );\n }\n\n :host([fullscreen]) .nile-wysiwyg {\n height: 100%;\n border: none;\n border-radius: 0;\n }\n\n :host([fullscreen]) .nile-wysiwyg__surface {\n max-height: none;\n }\n\n :host([disabled]) .nile-wysiwyg {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n background: var(\n --nile-wysiwyg-disabled-bg,\n var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))\n );\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([disabled]) .ProseMirror {\n background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n\n .nile-wysiwyg__surface {\n flex: 1;\n overflow-y: auto;\n max-height: var(--nile-wysiwyg-max-height, none);\n }\n\n / --- ProseMirror base rules (inlined from prosemirror-view/style) --- /\n .ProseMirror {\n position: relative;\n word-wrap: break-word;\n white-space: pre-wrap;\n white-space: break-spaces;\n -webkit-font-variant-ligatures: none;\n font-variant-ligatures: none;\n font-feature-settings: 'liga' 0;\n outline: none;\n padding: var(--nile-wysiwyg-content-padding, 12px);\n min-height: var(--nile-wysiwyg-min-height, 160px);\n font-size: var(--nile-wysiwyg-font-size, inherit);\n line-height: var(--nile-wysiwyg-line-height, inherit);\n tab-size: 4;\n -moz-tab-size: 4;\n word-break: break-word;\n color: var(\n --nile-wysiwyg-color,\n var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n );\n box-sizing: border-box;\n border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))\n var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));\n }\n\n .ProseMirror pre {\n white-space: pre-wrap;\n }\n\n .ProseMirror li {\n position: relative;\n }\n\n .ProseMirror-hideselection ::selection {\n background: transparent;\n }\n\n .ProseMirror-hideselection {\n caret-color: transparent;\n }\n\n .ProseMirror-selectednode {\n outline: 2px solid\n var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));\n }\n\n /* Gap cursor (inlined from prosemirror-gapcursor/style) /\n .ProseMirror-gapcursor {\n display: none;\n pointer-events: none;\n position: absolute;\n }\n\n .ProseMirror-gapcursor:after {\n content: '';\n display: block;\n position: absolute;\n top: -2px;\n width: 20px;\n border-top: 1px solid currentColor;\n animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;\n }\n\n @keyframes nile-wysiwyg-cursor-blink {\n to {\n visibility: hidden;\n }\n }\n\n .ProseMirror-focused .ProseMirror-gapcursor {\n display: block;\n }\n\n / --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- /\n .nile-wysiwyg__empty::before {\n content: attr(data-placeholder);\n float: left;\n height: 0;\n pointer-events: none;\n user-select: none;\n opacity: 0.7;\n color: var(\n --nile-wysiwyg-placeholder-color,\n var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))\n );\n }\n\n / --- Document content typography --- /\n .ProseMirror > :first-child {\n margin-top: 0;\n }\n\n .ProseMirror > :last-child {\n margin-bottom: 0;\n }\n\n / Legacy nile-rich-text-editor typography /\n .ProseMirror p {\n margin: 1em 0;\n }\n\n .ProseMirror h1,\n .ProseMirror h2,\n .ProseMirror h3,\n .ProseMirror h4,\n .ProseMirror h5,\n .ProseMirror h6 {\n font-weight: bold;\n }\n\n .ProseMirror h1 {\n font-size: 2em;\n margin: 0.67em 0;\n }\n .ProseMirror h2 {\n font-size: 1.5em;\n margin: 0.83em 0;\n }\n .ProseMirror h3 {\n font-size: 1.17em;\n margin: 1em 0;\n }\n .ProseMirror h4 {\n font-size: 1em;\n margin: 1.33em 0;\n }\n .ProseMirror h5 {\n font-size: 0.83em;\n margin: 1.67em 0;\n }\n .ProseMirror h6 {\n font-size: 0.67em;\n margin: 2.33em 0;\n }\n\n .ProseMirror blockquote {\n margin: 0.5em 0;\n padding: 0.25em 0 0.25em 1em;\n border-left: 3px solid\n var(\n --nile-wysiwyg-blockquote-border,\n var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n );\n color: var(\n --nile-wysiwyg-blockquote-color,\n var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))\n );\n }\n\n .ProseMirror ul,\n .ProseMirror ol {\n list-style-position: outside;\n padding-inline-start: 24px;\n }\n\n .ProseMirror hr {\n border: none;\n border-top: 1px solid\n var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));\n margin: 1em 0;\n }\n\n / Legacy: brand color, no underline /\n .ProseMirror a {\n color: var(\n --nile-wysiwyg-link-color,\n var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))\n );\n text-decoration: none;\n cursor: pointer;\n }\n\n .ProseMirror code.nile-wysiwyg__inline-code {\n font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 0.9em;\n background: var(\n --nile-wysiwyg-code-bg,\n var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n );\n border-radius: 4px;\n padding: 0.1em 0.35em;\n }\n\n / --- Code blocks --- /\n .ProseMirror pre.nile-wysiwyg__code-block {\n font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 0.9em;\n background: var(\n --nile-wysiwyg-code-bg,\n var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n );\n border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n border-radius: 6px;\n padding: 12px 14px;\n margin: 0.5em 0;\n overflow-x: auto;\n }\n\n / --- Tables (rules required by prosemirror-tables) --- /\n .ProseMirror .tableWrapper {\n overflow-x: auto;\n margin: 0.5em 0;\n }\n\n .ProseMirror table {\n border-collapse: collapse;\n table-layout: fixed;\n width: 100%;\n overflow: hidden;\n }\n\n .ProseMirror td,\n .ProseMirror th {\n vertical-align: top;\n box-sizing: border-box;\n position: relative;\n border: 1px solid\n var(\n --nile-wysiwyg-table-border,\n var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n );\n padding: 6px 8px;\n min-width: 1em;\n }\n\n .ProseMirror th {\n background: var(\n --nile-wysiwyg-table-header-bg,\n var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))\n );\n font-weight: 600;\n text-align: left;\n }\n\n \n .ProseMirror td > ,\n .ProseMirror th > * {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .ProseMirror .column-resize-handle {\n position: absolute;\n right: -2px;\n top: 0;\n bottom: 0;\n width: 4px;\n z-index: 20;\n background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));\n pointer-events: none;\n }\n\n .ProseMirror.resize-cursor {\n cursor: ew-resize;\n cursor: col-resize;\n }\n\n /* --- Layout tables (role=\"presentation\"): borderless output, dashed\n guides while editing so the structure stays visible. --- /\n .ProseMirror table[data-layout] td,\n .ProseMirror table[data-layout] th {\n border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n background: transparent;\n font-weight: inherit;\n text-align: inherit;\n }\n\n / --- Bookmarks: invisible anchors get a flag marker while editing --- /\n .ProseMirror a[data-bookmark] {\n display: inline-block;\n vertical-align: baseline;\n cursor: default;\n text-decoration: none;\n }\n\n .ProseMirror a[data-bookmark]::after {\n content: '⚑';\n font-size: 12px;\n line-height: 1;\n padding: 0 1px;\n color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .ProseMirror .selectedCell:after {\n z-index: 2;\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));\n pointer-events: none;\n }\n\n / --- Images (ProseMirror's standard inline image node) --- /\n .ProseMirror img {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n }\n\n / --- Image resize handles --- /\n .ProseMirror .nile-wysiwyg__image-resizer {\n position: relative;\n display: inline-block;\n line-height: 0;\n max-width: 100%;\n }\n\n .ProseMirror .nile-wysiwyg__resize-handle {\n display: none;\n position: absolute;\n width: 9px;\n height: 9px;\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n border: 1.5px solid var(--ng-colors-bg-primary);\n border-radius: 2px;\n z-index: 2;\n }\n\n .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {\n display: block;\n }\n\n .ProseMirror .nile-wysiwyg__image-resizer--selected img {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }\n .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }\n .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }\n .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }\n\n / --- Captioned figures --- /\n .ProseMirror figure.nile-wysiwyg__figure {\n margin: 0.75em 0;\n max-width: 100%;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {\n margin-left: auto;\n margin-right: auto;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {\n margin-left: auto;\n margin-right: 0;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure img {\n width: 100%;\n display: block;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {\n display: block;\n }\n\n .ProseMirror .nile-wysiwyg__figcaption {\n font-size: 0.85em;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n text-align: center;\n padding: 4px 8px;\n line-height: 1.4;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {\n content: 'Add a caption…';\n float: left;\n width: 100%;\n pointer-events: none;\n color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n margin-bottom: -1.4em;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure--selected {\n border-radius: 4px;\n }\n\n / --- Embeds --- /\n .ProseMirror div.nile-wysiwyg__embed {\n position: relative;\n aspect-ratio: 16 / 9;\n / Default size; an inline width from drag-resize overrides it, capped by\n max-width. overflow stays visible so the resize handles aren't clipped\n (rounding lives on the iframe). /\n width: min(640px, 100%);\n max-width: 100%;\n margin: 0.75em 0;\n border-radius: 8px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n }\n\n .ProseMirror div.nile-wysiwyg__embed iframe {\n width: 100%;\n height: 100%;\n border: 0;\n display: block;\n border-radius: 8px;\n / Editing mode: the first click selects the node instead of hitting the\n iframe; once selected (or in readonly) the video is interactive. /\n pointer-events: none;\n }\n\n .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,\n :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {\n pointer-events: auto;\n }\n\n .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {\n display: block;\n }\n\n / A live resize drag must not lose mousemove to the embedded document. /\n .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {\n pointer-events: none !important;\n }\n\n / --- Code highlighting (hljs tokens) ---\n Each hue routes through an --ng-componentcolors-utility-* token, which the\n token layer remaps to its lighter 400 step in the dark theme. Hardcoding the\n one-light palette here left syntax unreadable on the dark code surface. --- /\n .ProseMirror .hljs-comment,\n .ProseMirror .hljs-quote {\n color: var(--ng-componentcolors-utility-gray-500);\n font-style: italic;\n }\n\n .ProseMirror .hljs-keyword,\n .ProseMirror .hljs-selector-tag,\n .ProseMirror .hljs-formula,\n .ProseMirror .hljs-doctag {\n color: var(--ng-componentcolors-utility-purple-600);\n }\n\n .ProseMirror .hljs-section,\n .ProseMirror .hljs-name,\n .ProseMirror .hljs-selector-id,\n .ProseMirror .hljs-selector-class,\n .ProseMirror .hljs-deletion,\n .ProseMirror .hljs-subst,\n .ProseMirror .hljs-tag {\n color: var(--ng-componentcolors-utility-error-600);\n }\n\n .ProseMirror .hljs-literal,\n .ProseMirror .hljs-built_in,\n .ProseMirror .hljs-bullet {\n color: var(--ng-componentcolors-utility-blue-600);\n }\n\n .ProseMirror .hljs-string,\n .ProseMirror .hljs-regexp,\n .ProseMirror .hljs-addition,\n .ProseMirror .hljs-attribute,\n .ProseMirror .hljs-meta .hljs-string {\n color: var(--ng-componentcolors-utility-green-600);\n }\n\n .ProseMirror .hljs-attr,\n .ProseMirror .hljs-variable,\n .ProseMirror .hljs-template-variable,\n .ProseMirror .hljs-type,\n .ProseMirror .hljs-selector-attr,\n .ProseMirror .hljs-selector-pseudo,\n .ProseMirror .hljs-number {\n color: var(--ng-componentcolors-utility-orange-600);\n }\n\n .ProseMirror .hljs-symbol,\n .ProseMirror .hljs-meta,\n .ProseMirror .hljs-link,\n .ProseMirror .hljs-operator,\n .ProseMirror .hljs-title,\n .ProseMirror .hljs-title.class_,\n .ProseMirror .hljs-title.function_ {\n color: var(--ng-componentcolors-utility-indigo-600);\n }\n\n .ProseMirror .hljs-emphasis {\n font-style: italic;\n }\n\n .ProseMirror .hljs-strong {\n font-weight: bold;\n }\n\n / --- Checklists --- /\n .ProseMirror ul.nile-wysiwyg__task-list {\n list-style: none;\n padding-inline-start: 4px;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {\n / Center on the first text line: (1 line box - checkbox height) / 2. /\n margin: calc((1em 1.45 - 14px) / 2) 0 0;\n width: 14px;\n height: 14px;\n flex: none;\n cursor: pointer;\n accent-color: var(\n --nile-colors-primary-600,\n var(--ng-componentcolors-utility-blue-600)\n );\n }\n\n .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {\n flex: 1;\n min-width: 0;\n }\n\n /* The content's paragraph margins (legacy 1em) push text below the\n checkbox — strip them at the edges of each item. /\n .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {\n margin-top: 0;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {\n margin-bottom: 0;\n }\n\n .ProseMirror ul.nile-wysiwyg__task-list > li + li {\n margin-top: 0.35em;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n text-decoration: line-through;\n }\n\n / --- Counter footer --- /\n .nile-wysiwyg__counter {\n padding: 4px 12px 6px;\n text-align: right;\n font-size: 12px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n }\n\n .nile-wysiwyg__counter.over {\n color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));\n font-weight: 600;\n }\n\n / --- Author <style> block (from HTML source) ---\n Applied live by StyleBlockView (a hidden <style> host, scoped to the\n content); the block renders nothing in the editor. /\n .nile-wysiwyg__style-block {\n display: none;\n }\n\n / --- Sticky toolbar ---\n Pins to the top of the scroll container. Note: sticky anchors to the\n container's PADDING box, so if the scroll container has top padding, a\n band of content shows above the toolbar — set --nile-wysiwyg-sticky-top\n (or remove the container's top padding) to compensate. The opaque\n background makes the pinned bar self-backing so content can never bleed\n through it. /\n :host([sticky-toolbar]) nile-wysiwyg-toolbar {\n position: sticky;\n top: var(--nile-wysiwyg-sticky-top, 0);\n z-index: 12;\n background: var(\n --nile-wysiwyg-bg,\n var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n );\n }\n\n / --- Mentions & suggestions --- /\n .ProseMirror span.nile-wysiwyg__mention {\n display: inline-block;\n padding: 0 4px;\n border-radius: 4px;\n background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));\n color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));\n font-weight: 500;\n white-space: nowrap;\n }\n\n .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n / --- Merge fields --- /\n .ProseMirror span.nile-wysiwyg__merge-field {\n display: inline-block;\n padding: 0 4px;\n border-radius: 4px;\n background: var(\n --nile-wysiwyg-merge-bg,\n var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n );\n color: var(\n --nile-wysiwyg-merge-color,\n var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))\n );\n border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: 0.9em;\n white-space: nowrap;\n }\n\n .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n / --- Math --- /\n .ProseMirror span.nile-wysiwyg__math {\n display: inline-block;\n padding: 0 2px;\n font-family: \"Cambria Math\", \"Latin Modern Math\", serif;\n }\n\n .ProseMirror span.nile-wysiwyg__math--block {\n display: block;\n text-align: center;\n margin: 8px 0;\n }\n\n .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n border-radius: 3px;\n }\n\n / Format painter armed: hint the next selection will be painted. /\n .ProseMirror.nile-wysiwyg--painting {\n cursor: cell;\n }\n\n .ProseMirror .nile-wysiwyg__suggestion {\n background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n border-radius: 3px;\n }\n\n / --- Find & replace highlights --- /\n .ProseMirror .nile-wysiwyg__find-match {\n background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));\n border-radius: 2px;\n }\n\n .ProseMirror .nile-wysiwyg__find-active {\n background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));\n }\n\n / --- Upload placeholder --- /\n .nile-wysiwyg__upload-placeholder {\n display: inline-block;\n padding: 6px 12px;\n border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 6px;\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n font-size: 0.85em;\n }\n\n / --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.\n Serialized output carries data-list-style=\"multilevel\"; consumers\n rendering it outside the editor need these same counter rules. --- /\n .ProseMirror ol[data-list-style='multilevel'],\n .ProseMirror ol[data-list-style='multilevel'] ol {\n list-style: none;\n counter-reset: nile-multilevel;\n }\n\n .ProseMirror ol[data-list-style='multilevel'] > li,\n .ProseMirror ol[data-list-style='multilevel'] ol > li {\n counter-increment: nile-multilevel;\n }\n\n / The number sits inside the item's first paragraph so it shares a line. /\n .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,\n .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {\n content: counters(nile-multilevel, '.') '. ';\n font-variant-numeric: tabular-nums;\n }\n\n / --- Show blocks: dashed outlines + tag labels while editing --- */\n .nile-wysiwyg--show-blocks .ProseMirror p,\n .nile-wysiwyg--show-blocks .ProseMirror h1,\n .nile-wysiwyg--show-blocks .ProseMirror h2,\n .nile-wysiwyg--show-blocks .ProseMirror h3,\n .nile-wysiwyg--show-blocks .ProseMirror h4,\n .nile-wysiwyg--show-blocks .ProseMirror h5,\n .nile-wysiwyg--show-blocks .ProseMirror h6,\n .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n .nile-wysiwyg--show-blocks .ProseMirror pre,\n .nile-wysiwyg--show-blocks .ProseMirror figure,\n .nile-wysiwyg--show-blocks .ProseMirror ul,\n .nile-wysiwyg--show-blocks .ProseMirror ol,\n .nile-wysiwyg--show-blocks .ProseMirror li,\n .nile-wysiwyg--show-blocks .ProseMirror table {\n outline: 1px dashed\n var(\n --nile-wysiwyg-block-outline,\n var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n );\n outline-offset: -1px;\n }\n\n .nile-wysiwyg--show-blocks .ProseMirror p,\n .nile-wysiwyg--show-blocks .ProseMirror h1,\n .nile-wysiwyg--show-blocks .ProseMirror h2,\n .nile-wysiwyg--show-blocks .ProseMirror h3,\n .nile-wysiwyg--show-blocks .ProseMirror h4,\n .nile-wysiwyg--show-blocks .ProseMirror h5,\n .nile-wysiwyg--show-blocks .ProseMirror h6,\n .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n .nile-wysiwyg--show-blocks .ProseMirror pre {\n position: relative;\n }\n\n .nile-wysiwyg--show-blocks .ProseMirror p::after,\n .nile-wysiwyg--show-blocks .ProseMirror h1::after,\n .nile-wysiwyg--show-blocks .ProseMirror h2::after,\n .nile-wysiwyg--show-blocks .ProseMirror h3::after,\n .nile-wysiwyg--show-blocks .ProseMirror h4::after,\n .nile-wysiwyg--show-blocks .ProseMirror h5::after,\n .nile-wysiwyg--show-blocks .ProseMirror h6::after,\n .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,\n .nile-wysiwyg--show-blocks .ProseMirror pre::after {\n position: absolute;\n top: 0;\n left: 0;\n padding: 0 3px;\n font-family: system-ui, sans-serif;\n font-size: 9px;\n font-weight: 600;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.5px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n border-radius: 0 0 4px 0;\n pointer-events: none;\n }\n\n .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }\n .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }\n .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }\n .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }\n .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }\n .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }\n .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }\n .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }\n .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
1	+ {"version":3,"file":"nile-wysiwyg-editor.css.cjs.js","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n font-family: var(\n --nile-wysiwyg-font-family,\n var(\n --nile-font-family-sans-serif,\n var(--ng-font-family-body, system-ui, -apple-system, sans-serif)\n )\n );\n }\n\n .nile-wysiwyg {\n position: relative;\n display: flex;\n flex-direction: column;\n border: 1px solid\n var(\n --nile-wysiwyg-border-color,\n var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))\n );\n border-radius: var(\n --nile-wysiwyg-radius,\n var(--nile-radius-radius-xl, var(--ng-radius-md, 8px))\n );\n background: var(\n --nile-wysiwyg-bg,\n var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n );\n box-sizing: border-box;\n }\n\n /* --- Fullscreen (distraction-free) mode --- /\n :host([fullscreen]) {\n position: fixed;\n inset: 0;\n z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);\n background: var(\n --nile-wysiwyg-bg,\n var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n );\n }\n\n :host([fullscreen]) .nile-wysiwyg {\n height: 100%;\n border: none;\n border-radius: 0;\n }\n\n :host([fullscreen]) .nile-wysiwyg__surface {\n max-height: none;\n }\n\n :host([disabled]) .nile-wysiwyg {\n border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));\n background: var(\n --nile-wysiwyg-disabled-bg,\n var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))\n );\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([disabled]) .ProseMirror {\n background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n }\n\n .nile-wysiwyg__surface {\n flex: 1;\n overflow-y: auto;\n max-height: var(--nile-wysiwyg-max-height, none);\n }\n\n / --- ProseMirror base rules (inlined from prosemirror-view/style) --- /\n .ProseMirror {\n position: relative;\n word-wrap: break-word;\n white-space: pre-wrap;\n white-space: break-spaces;\n -webkit-font-variant-ligatures: none;\n font-variant-ligatures: none;\n font-feature-settings: 'liga' 0;\n outline: none;\n padding: var(--nile-wysiwyg-content-padding, 12px);\n min-height: var(--nile-wysiwyg-min-height, 160px);\n font-size: var(--nile-wysiwyg-font-size, inherit);\n line-height: var(--nile-wysiwyg-line-height, inherit);\n tab-size: 4;\n -moz-tab-size: 4;\n word-break: break-word;\n color: var(\n --nile-wysiwyg-color,\n var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n );\n box-sizing: border-box;\n border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))\n var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px));\n }\n\n .ProseMirror pre {\n white-space: pre-wrap;\n }\n\n .ProseMirror li {\n position: relative;\n }\n\n .ProseMirror-hideselection ::selection {\n background: transparent;\n }\n\n .ProseMirror-hideselection {\n caret-color: transparent;\n }\n\n .ProseMirror-selectednode {\n outline: 2px solid\n var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));\n }\n\n /* Gap cursor (inlined from prosemirror-gapcursor/style) /\n .ProseMirror-gapcursor {\n display: none;\n pointer-events: none;\n position: absolute;\n }\n\n .ProseMirror-gapcursor:after {\n content: '';\n display: block;\n position: absolute;\n top: -2px;\n width: 20px;\n border-top: 1px solid currentColor;\n animation: nile-wysiwyg-cursor-blink 1.1s steps(2, start) infinite;\n }\n\n @keyframes nile-wysiwyg-cursor-blink {\n to {\n visibility: hidden;\n }\n }\n\n .ProseMirror-focused .ProseMirror-gapcursor {\n display: block;\n }\n\n / --- Placeholder (legacy: neutral-500 at 0.7 opacity) --- /\n .nile-wysiwyg__empty::before {\n content: attr(data-placeholder);\n float: left;\n height: 0;\n pointer-events: none;\n user-select: none;\n opacity: 0.7;\n color: var(\n --nile-wysiwyg-placeholder-color,\n var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))\n );\n }\n\n / --- Document content typography --- /\n .ProseMirror > :first-child {\n margin-top: 0;\n }\n\n .ProseMirror > :last-child {\n margin-bottom: 0;\n }\n\n / Legacy nile-rich-text-editor typography /\n .ProseMirror p {\n margin: 1em 0;\n }\n\n .ProseMirror h1,\n .ProseMirror h2,\n .ProseMirror h3,\n .ProseMirror h4,\n .ProseMirror h5,\n .ProseMirror h6 {\n font-weight: bold;\n }\n\n .ProseMirror h1 {\n font-size: 2em;\n margin: 0.67em 0;\n }\n .ProseMirror h2 {\n font-size: 1.5em;\n margin: 0.83em 0;\n }\n .ProseMirror h3 {\n font-size: 1.17em;\n margin: 1em 0;\n }\n .ProseMirror h4 {\n font-size: 1em;\n margin: 1.33em 0;\n }\n .ProseMirror h5 {\n font-size: 0.83em;\n margin: 1.67em 0;\n }\n .ProseMirror h6 {\n font-size: 0.67em;\n margin: 2.33em 0;\n }\n\n .ProseMirror blockquote {\n margin: 0.5em 0;\n padding: 0.25em 0 0.25em 1em;\n border-left: 3px solid\n var(\n --nile-wysiwyg-blockquote-border,\n var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n );\n color: var(\n --nile-wysiwyg-blockquote-color,\n var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))\n );\n }\n\n .ProseMirror ul,\n .ProseMirror ol {\n list-style-position: outside;\n padding-inline-start: 24px;\n }\n\n .ProseMirror hr {\n border: none;\n border-top: 1px solid\n var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));\n margin: 1em 0;\n }\n\n / Legacy: brand color, no underline /\n .ProseMirror a {\n color: var(\n --nile-wysiwyg-link-color,\n var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))\n );\n text-decoration: none;\n cursor: pointer;\n }\n\n .ProseMirror code.nile-wysiwyg__inline-code {\n font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 0.9em;\n background: var(\n --nile-wysiwyg-code-bg,\n var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n );\n border-radius: 4px;\n padding: 0.1em 0.35em;\n }\n\n / --- Code blocks --- /\n .ProseMirror pre.nile-wysiwyg__code-block {\n font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);\n font-size: 0.9em;\n background: var(\n --nile-wysiwyg-code-bg,\n var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n );\n border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n border-radius: 6px;\n padding: 12px 14px;\n margin: 0.5em 0;\n overflow-x: auto;\n }\n\n / --- Tables (rules required by prosemirror-tables) --- /\n .ProseMirror .tableWrapper {\n overflow-x: auto;\n margin: 0.5em 0;\n }\n\n .ProseMirror table {\n border-collapse: collapse;\n table-layout: fixed;\n width: 100%;\n overflow: hidden;\n }\n\n .ProseMirror td,\n .ProseMirror th {\n vertical-align: top;\n box-sizing: border-box;\n position: relative;\n border: 1px solid\n var(\n --nile-wysiwyg-table-border,\n var(--nile-colors-neutral-300, var(--ng-colors-border-primary))\n );\n padding: 6px 8px;\n min-width: 1em;\n }\n\n .ProseMirror th {\n background: var(\n --nile-wysiwyg-table-header-bg,\n var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))\n );\n font-weight: 600;\n text-align: left;\n }\n\n \n .ProseMirror td > ,\n .ProseMirror th > * {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n .ProseMirror .column-resize-handle {\n position: absolute;\n right: -2px;\n top: 0;\n bottom: 0;\n width: 4px;\n z-index: 20;\n background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));\n pointer-events: none;\n }\n\n .ProseMirror.resize-cursor {\n cursor: ew-resize;\n cursor: col-resize;\n }\n\n /* --- Email fidelity: an unsized layout table (e.g. a button) fits its\n content, as it does in mail clients, instead of the 100% default. --- /\n :host([email-fidelity]) .ProseMirror table[data-autowidth] {\n width: auto;\n }\n\n / Column resizing sets an inline min-width of 100px per column; on a nested\n layout table (e.g. a row of social icons) that overflows the cell holding it. /\n :host([email-fidelity]) .ProseMirror table[data-layout-table] {\n min-width: 0 !important;\n }\n\n / Email fidelity: the wrapper is editor-only (it holds the resize handles), so\n its margin would add space the saved email doesn't have. /\n :host([email-fidelity]) .ProseMirror .tableWrapper {\n margin: 0;\n }\n\n / Email fidelity: draw unstyled layout-table cells like a mail client (no padding, centred, no header fill). /\n :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > td,\n :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {\n padding: 0;\n vertical-align: middle;\n }\n\n :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {\n background: none;\n }\n\n / --- Layout tables (role=\"presentation\"): borderless output, dashed\n guides while editing so the structure stays visible. --- /\n .ProseMirror table[data-layout] td,\n .ProseMirror table[data-layout] th {\n / Draw the editing guide with an inset outline, not a border/background, so\n author-set cell borders and backgrounds (email fidelity) are preserved. /\n outline: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));\n outline-offset: -1px;\n font-weight: inherit;\n text-align: inherit;\n }\n\n / --- Bookmarks: invisible anchors get a flag marker while editing --- /\n .ProseMirror a[data-bookmark] {\n display: inline-block;\n vertical-align: baseline;\n cursor: default;\n text-decoration: none;\n }\n\n .ProseMirror a[data-bookmark]::after {\n content: '⚑';\n font-size: 12px;\n line-height: 1;\n padding: 0 1px;\n color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .ProseMirror .selectedCell:after {\n z-index: 2;\n position: absolute;\n content: '';\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n background: var(--nile-wysiwyg-cell-selection, rgba(127, 86, 217, 0.12));\n pointer-events: none;\n }\n\n / --- Images (ProseMirror's standard inline image node) --- /\n .ProseMirror img {\n max-width: 100%;\n height: auto;\n border-radius: 4px;\n }\n\n / --- Image resize handles --- /\n .ProseMirror .nile-wysiwyg__image-resizer {\n position: relative;\n display: inline-block;\n line-height: 0;\n max-width: 100%;\n }\n\n .ProseMirror .nile-wysiwyg__resize-handle {\n display: none;\n position: absolute;\n width: 9px;\n height: 9px;\n background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n border: 1.5px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n border-radius: 2px;\n z-index: 2;\n }\n\n .ProseMirror .nile-wysiwyg__image-resizer--selected .nile-wysiwyg__resize-handle {\n display: block;\n }\n\n .ProseMirror .nile-wysiwyg__image-resizer--selected img {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }\n .ProseMirror .nile-wysiwyg__resize-handle--ne { top: -5px; right: -5px; cursor: nesw-resize; }\n .ProseMirror .nile-wysiwyg__resize-handle--sw { bottom: -5px; left: -5px; cursor: nesw-resize; }\n .ProseMirror .nile-wysiwyg__resize-handle--se { bottom: -5px; right: -5px; cursor: nwse-resize; }\n\n / --- Captioned figures --- /\n .ProseMirror figure.nile-wysiwyg__figure {\n margin: 0.75em 0;\n max-width: 100%;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure[data-align='center'] {\n margin-left: auto;\n margin-right: auto;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure[data-align='right'] {\n margin-left: auto;\n margin-right: 0;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure img {\n width: 100%;\n display: block;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure .nile-wysiwyg__image-resizer {\n display: block;\n }\n\n .ProseMirror .nile-wysiwyg__figcaption {\n font-size: 0.85em;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n text-align: center;\n padding: 4px 8px;\n line-height: 1.4;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure--empty-caption .nile-wysiwyg__figcaption::before {\n content: 'Add a caption…';\n float: left;\n width: 100%;\n pointer-events: none;\n color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));\n margin-bottom: -1.4em;\n }\n\n .ProseMirror figure.nile-wysiwyg__figure--selected {\n border-radius: 4px;\n }\n\n / --- Embeds --- /\n .ProseMirror div.nile-wysiwyg__embed {\n position: relative;\n aspect-ratio: 16 / 9;\n / Default size; an inline width from drag-resize overrides it, capped by\n max-width. overflow stays visible so the resize handles aren't clipped\n (rounding lives on the iframe). /\n width: min(640px, 100%);\n max-width: 100%;\n margin: 0.75em 0;\n border-radius: 8px;\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n }\n\n .ProseMirror div.nile-wysiwyg__embed iframe {\n width: 100%;\n height: 100%;\n border: 0;\n display: block;\n border-radius: 8px;\n / Editing mode: the first click selects the node instead of hitting the\n iframe; once selected (or in readonly) the video is interactive. /\n pointer-events: none;\n }\n\n .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode iframe,\n :host([readonly]) .ProseMirror div.nile-wysiwyg__embed iframe {\n pointer-events: auto;\n }\n\n .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {\n display: block;\n }\n\n / A live resize drag must not lose mousemove to the embedded document. /\n .ProseMirror div.nile-wysiwyg__embed.nile-wysiwyg__resizing iframe {\n pointer-events: none !important;\n }\n\n / --- Code highlighting (hljs tokens) ---\n Each hue routes through an --ng-componentcolors-utility-* token, which the\n token layer remaps to its lighter 400 step in the dark theme. Hardcoding the\n one-light palette here left syntax unreadable on the dark code surface. --- /\n .ProseMirror .hljs-comment,\n .ProseMirror .hljs-quote {\n color: var(--ng-componentcolors-utility-gray-500);\n font-style: italic;\n }\n\n .ProseMirror .hljs-keyword,\n .ProseMirror .hljs-selector-tag,\n .ProseMirror .hljs-formula,\n .ProseMirror .hljs-doctag {\n color: var(--ng-componentcolors-utility-purple-600);\n }\n\n .ProseMirror .hljs-section,\n .ProseMirror .hljs-name,\n .ProseMirror .hljs-selector-id,\n .ProseMirror .hljs-selector-class,\n .ProseMirror .hljs-deletion,\n .ProseMirror .hljs-subst,\n .ProseMirror .hljs-tag {\n color: var(--ng-componentcolors-utility-error-600);\n }\n\n .ProseMirror .hljs-literal,\n .ProseMirror .hljs-built_in,\n .ProseMirror .hljs-bullet {\n color: var(--ng-componentcolors-utility-blue-600);\n }\n\n .ProseMirror .hljs-string,\n .ProseMirror .hljs-regexp,\n .ProseMirror .hljs-addition,\n .ProseMirror .hljs-attribute,\n .ProseMirror .hljs-meta .hljs-string {\n color: var(--ng-componentcolors-utility-green-600);\n }\n\n .ProseMirror .hljs-attr,\n .ProseMirror .hljs-variable,\n .ProseMirror .hljs-template-variable,\n .ProseMirror .hljs-type,\n .ProseMirror .hljs-selector-attr,\n .ProseMirror .hljs-selector-pseudo,\n .ProseMirror .hljs-number {\n color: var(--ng-componentcolors-utility-orange-600);\n }\n\n .ProseMirror .hljs-symbol,\n .ProseMirror .hljs-meta,\n .ProseMirror .hljs-link,\n .ProseMirror .hljs-operator,\n .ProseMirror .hljs-title,\n .ProseMirror .hljs-title.class_,\n .ProseMirror .hljs-title.function_ {\n color: var(--ng-componentcolors-utility-indigo-600);\n }\n\n .ProseMirror .hljs-emphasis {\n font-style: italic;\n }\n\n .ProseMirror .hljs-strong {\n font-weight: bold;\n }\n\n / --- Checklists --- /\n .ProseMirror ul.nile-wysiwyg__task-list {\n list-style: none;\n padding-inline-start: 4px;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item > input[type='checkbox'] {\n / Center on the first text line: (1 line box - checkbox height) / 2. /\n margin: calc((1em 1.45 - 14px) / 2) 0 0;\n width: 14px;\n height: 14px;\n flex: none;\n cursor: pointer;\n accent-color: var(\n --nile-colors-primary-600,\n var(--ng-componentcolors-utility-blue-600)\n );\n }\n\n .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {\n flex: 1;\n min-width: 0;\n }\n\n /* The content's paragraph margins (legacy 1em) push text below the\n checkbox — strip them at the edges of each item. /\n .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :first-child {\n margin-top: 0;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content > :last-child {\n margin-bottom: 0;\n }\n\n .ProseMirror ul.nile-wysiwyg__task-list > li + li {\n margin-top: 0.35em;\n }\n\n .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));\n text-decoration: line-through;\n }\n\n / --- Counter footer --- /\n .nile-wysiwyg__counter {\n padding: 4px 12px 6px;\n text-align: right;\n font-size: 12px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));\n border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));\n }\n\n .nile-wysiwyg__counter.over {\n color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));\n font-weight: 600;\n }\n\n / --- Author <style> block (from HTML source) ---\n Applied live by StyleBlockView (a hidden <style> host, scoped to the\n content); the block renders nothing in the editor. /\n .nile-wysiwyg__style-block {\n display: none;\n }\n\n / --- Sticky toolbar ---\n Pins to the top of the scroll container. Note: sticky anchors to the\n container's PADDING box, so if the scroll container has top padding, a\n band of content shows above the toolbar — set --nile-wysiwyg-sticky-top\n (or remove the container's top padding) to compensate. The opaque\n background makes the pinned bar self-backing so content can never bleed\n through it. /\n :host([sticky-toolbar]) nile-wysiwyg-toolbar {\n position: sticky;\n top: var(--nile-wysiwyg-sticky-top, 0);\n z-index: 12;\n background: var(\n --nile-wysiwyg-bg,\n var(--nile-colors-white-base, var(--ng-colors-bg-primary))\n );\n }\n\n / --- Mentions & suggestions --- /\n .ProseMirror span.nile-wysiwyg__mention {\n display: inline-block;\n padding: 0 4px;\n border-radius: 4px;\n background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));\n color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));\n font-weight: 500;\n / Short mentions stay on one line; a long one (e.g. a deep field path) wraps\n inside its container instead of overflowing a table cell or the editor. /\n max-width: 100%;\n overflow-wrap: anywhere;\n }\n\n / The chip's 500 is only a default — bold, headings and an explicit\n font-weight from the content win, so the chip looks the way it exports. /\n .ProseMirror :is(strong, b, h1, h2, h3, h4, h5, h6, th, [style='font-weight'])\n span.nile-wysiwyg__mention {\n font-weight: inherit;\n }\n\n .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n /* --- Merge fields --- /\n .ProseMirror span.nile-wysiwyg__merge-field {\n display: inline-block;\n padding: 0 4px;\n border-radius: 4px;\n background: var(\n --nile-wysiwyg-merge-bg,\n var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))\n );\n color: var(\n --nile-wysiwyg-merge-color,\n var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))\n );\n border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: 0.9em;\n white-space: nowrap;\n }\n\n .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n }\n\n / --- Math --- /\n .ProseMirror span.nile-wysiwyg__math {\n display: inline-block;\n padding: 0 2px;\n font-family: \"Cambria Math\", \"Latin Modern Math\", serif;\n }\n\n .ProseMirror span.nile-wysiwyg__math--block {\n display: block;\n text-align: center;\n margin: 8px 0;\n }\n\n .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {\n outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));\n border-radius: 3px;\n }\n\n / Format painter armed: hint the next selection will be painted. /\n .ProseMirror.nile-wysiwyg--painting {\n cursor: cell;\n }\n\n .ProseMirror .nile-wysiwyg__suggestion {\n background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));\n border-radius: 3px;\n }\n\n / --- Find & replace highlights --- /\n .ProseMirror .nile-wysiwyg__find-match {\n background: var(--nile-wysiwyg-find-bg, rgba(255, 214, 102, 0.45));\n border-radius: 2px;\n }\n\n .ProseMirror .nile-wysiwyg__find-active {\n background: var(--nile-wysiwyg-find-active-bg, rgba(255, 170, 0, 0.65));\n }\n\n / --- Upload placeholder --- /\n .nile-wysiwyg__upload-placeholder {\n display: inline-block;\n padding: 6px 12px;\n border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n border-radius: 6px;\n background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));\n color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));\n font-size: 0.85em;\n }\n\n / --- Multi-level (legal) ordered lists: 1 / 1.1 / 1.1.1 numbering.\n Serialized output carries data-list-style=\"multilevel\"; consumers\n rendering it outside the editor need these same counter rules. --- /\n .ProseMirror ol[data-list-style='multilevel'],\n .ProseMirror ol[data-list-style='multilevel'] ol {\n list-style: none;\n counter-reset: nile-multilevel;\n }\n\n .ProseMirror ol[data-list-style='multilevel'] > li,\n .ProseMirror ol[data-list-style='multilevel'] ol > li {\n counter-increment: nile-multilevel;\n }\n\n / The number sits inside the item's first paragraph so it shares a line. /\n .ProseMirror ol[data-list-style='multilevel'] > li > p:first-child::before,\n .ProseMirror ol[data-list-style='multilevel'] ol > li > p:first-child::before {\n content: counters(nile-multilevel, '.') '. ';\n font-variant-numeric: tabular-nums;\n }\n\n / --- Show blocks: dashed outlines + tag labels while editing --- */\n .nile-wysiwyg--show-blocks .ProseMirror p,\n .nile-wysiwyg--show-blocks .ProseMirror h1,\n .nile-wysiwyg--show-blocks .ProseMirror h2,\n .nile-wysiwyg--show-blocks .ProseMirror h3,\n .nile-wysiwyg--show-blocks .ProseMirror h4,\n .nile-wysiwyg--show-blocks .ProseMirror h5,\n .nile-wysiwyg--show-blocks .ProseMirror h6,\n .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n .nile-wysiwyg--show-blocks .ProseMirror pre,\n .nile-wysiwyg--show-blocks .ProseMirror figure,\n .nile-wysiwyg--show-blocks .ProseMirror ul,\n .nile-wysiwyg--show-blocks .ProseMirror ol,\n .nile-wysiwyg--show-blocks .ProseMirror li,\n .nile-wysiwyg--show-blocks .ProseMirror table {\n outline: 1px dashed\n var(\n --nile-wysiwyg-block-outline,\n var(--nile-colors-neutral-400, var(--ng-colors-border-primary))\n );\n outline-offset: -1px;\n }\n\n .nile-wysiwyg--show-blocks .ProseMirror p,\n .nile-wysiwyg--show-blocks .ProseMirror h1,\n .nile-wysiwyg--show-blocks .ProseMirror h2,\n .nile-wysiwyg--show-blocks .ProseMirror h3,\n .nile-wysiwyg--show-blocks .ProseMirror h4,\n .nile-wysiwyg--show-blocks .ProseMirror h5,\n .nile-wysiwyg--show-blocks .ProseMirror h6,\n .nile-wysiwyg--show-blocks .ProseMirror blockquote,\n .nile-wysiwyg--show-blocks .ProseMirror pre {\n position: relative;\n }\n\n .nile-wysiwyg--show-blocks .ProseMirror p::after,\n .nile-wysiwyg--show-blocks .ProseMirror h1::after,\n .nile-wysiwyg--show-blocks .ProseMirror h2::after,\n .nile-wysiwyg--show-blocks .ProseMirror h3::after,\n .nile-wysiwyg--show-blocks .ProseMirror h4::after,\n .nile-wysiwyg--show-blocks .ProseMirror h5::after,\n .nile-wysiwyg--show-blocks .ProseMirror h6::after,\n .nile-wysiwyg--show-blocks .ProseMirror blockquote::after,\n .nile-wysiwyg--show-blocks .ProseMirror pre::after {\n position: absolute;\n top: 0;\n left: 0;\n padding: 0 3px;\n font-family: system-ui, sans-serif;\n font-size: 9px;\n font-weight: 600;\n font-style: normal;\n line-height: 14px;\n letter-spacing: 0.5px;\n color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));\n background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));\n border-radius: 0 0 4px 0;\n pointer-events: none;\n }\n\n .nile-wysiwyg--show-blocks .ProseMirror p::after { content: 'P'; }\n .nile-wysiwyg--show-blocks .ProseMirror h1::after { content: 'H1'; }\n .nile-wysiwyg--show-blocks .ProseMirror h2::after { content: 'H2'; }\n .nile-wysiwyg--show-blocks .ProseMirror h3::after { content: 'H3'; }\n .nile-wysiwyg--show-blocks .ProseMirror h4::after { content: 'H4'; }\n .nile-wysiwyg--show-blocks .ProseMirror h5::after { content: 'H5'; }\n .nile-wysiwyg--show-blocks .ProseMirror h6::after { content: 'H6'; }\n .nile-wysiwyg--show-blocks .ProseMirror blockquote::after { content: 'QUOTE'; }\n .nile-wysiwyg--show-blocks .ProseMirror pre::after { content: 'PRE'; }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAEaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-wysiwyg-editor/nile-wysiwyg-editor.css.esm.js CHANGED Viewed

@@ -330,12 +330,43 @@ import{css as r}from"lit";const e=r`
     cursor: col-resize;
   }
+  /* --- Email fidelity: an unsized layout table (e.g. a button) fits its
+     content, as it does in mail clients, instead of the 100% default. --- */
+  :host([email-fidelity]) .ProseMirror table[data-autowidth] {
+    width: auto;
+  }
+  /* Column resizing sets an inline min-width of 100px per column; on a nested
+     layout table (e.g. a row of social icons) that overflows the cell holding it. */
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] {
+    min-width: 0 !important;
+  }
+  /* Email fidelity: the wrapper is editor-only (it holds the resize handles), so
+     its margin would add space the saved email doesn't have. */
+  :host([email-fidelity]) .ProseMirror .tableWrapper {
+    margin: 0;
+  }
+  /* Email fidelity: draw unstyled layout-table cells like a mail client (no padding, centred, no header fill). */
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > td,
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {
+    padding: 0;
+    vertical-align: middle;
+  }
+  :host([email-fidelity]) .ProseMirror table[data-layout-table] > tbody > tr > th {
+    background: none;
+  }
   /* --- Layout tables (role="presentation"): borderless output, dashed
      guides while editing so the structure stays visible. --- */
   .ProseMirror table[data-layout] td,
   .ProseMirror table[data-layout] th {
-    border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
-    background: transparent;
+    /* Draw the editing guide with an inset outline, not a border/background, so
+       author-set cell borders and backgrounds (email fidelity) are preserved. */
+    outline: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
+    outline-offset: -1px;
     font-weight: inherit;
     text-align: inherit;
   }
@@ -389,7 +420,7 @@ import{css as r}from"lit";const e=r`
     width: 9px;
     height: 9px;
     background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
-    border: 1.5px solid var(--ng-colors-bg-primary);
+    border: 1.5px solid var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     border-radius: 2px;
     z-index: 2;
   }
@@ -660,7 +691,17 @@ import{css as r}from"lit";const e=r`
     background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50)));
     color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700)));
     font-weight: 500;
-    white-space: nowrap;
+    /* Short mentions stay on one line; a long one (e.g. a deep field path) wraps
+       inside its container instead of overflowing a table cell or the editor. */
+    max-width: 100%;
+    overflow-wrap: anywhere;
+  }
+  /* The chip's 500 is only a default — bold, headings and an explicit
+     font-weight from the content win, so the chip looks the way it exports. */
+  .ProseMirror :is(strong, b, h1, h2, h3, h4, h5, h6, th, [style*='font-weight'])
+    span.nile-wysiwyg__mention {
+    font-weight: inherit;
   }
   .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {