@aquera/nile-elements 2.0.0 → 2.0.2

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.js

@@ -18,7 +18,7 @@ export const styles = css `
     border: 1px solid
       var(
         --nile-wysiwyg-border-color,
-        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral, #d0d5dd))
+        var(--nile-colors-neutral-400, var(--ng-colors-border-neutral))
       );
     border-radius: var(
       --nile-wysiwyg-radius,
@@ -26,7 +26,7 @@ export const styles = css `
     );
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
     box-sizing: border-box;
   }
@@ -38,7 +38,7 @@ export const styles = css `
     z-index: var(--nile-wysiwyg-fullscreen-z-index, 1000);
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
   }
 
@@ -53,18 +53,18 @@ export const styles = css `
   }
 
   :host([disabled]) .nile-wysiwyg {
-    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled, #98a2b3));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-disabled));
     background: var(
       --nile-wysiwyg-disabled-bg,
-      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7))
+      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle))
     );
     cursor: not-allowed;
     pointer-events: none;
   }
 
   :host([disabled]) .ProseMirror {
-    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7));
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled, #98a2b3));
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
   }
 
   .nile-wysiwyg__surface {
@@ -92,7 +92,7 @@ export const styles = css `
     word-break: break-word;
     color: var(
       --nile-wysiwyg-color,
-      var(--nile-colors-dark-900, var(--ng-colors-text-primary, #101828))
+      var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))
     );
     box-sizing: border-box;
     border-radius: 0 0 var(--nile-wysiwyg-radius, var(--nile-radius-radius-xl, 8px))
@@ -117,7 +117,7 @@ export const styles = css `
 
   .ProseMirror-selectednode {
     outline: 2px solid
-      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb)));
+      var(--nile-wysiwyg-focus-border-color, var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600)));
   }
 
   /* Gap cursor (inlined from prosemirror-gapcursor/style) */
@@ -157,7 +157,7 @@ export const styles = css `
     opacity: 0.7;
     color: var(
       --nile-wysiwyg-placeholder-color,
-      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3))
+      var(--nile-colors-neutral-500, var(--ng-colors-text-secondary))
     );
   }
 
@@ -215,9 +215,12 @@ export const styles = css `
     border-left: 3px solid
       var(
         --nile-wysiwyg-blockquote-border,
-        var(--nile-colors-neutral-300, #d0d5dd)
+        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))
       );
-    color: var(--nile-wysiwyg-blockquote-color, var(--nile-colors-neutral-600, #475467));
+    color: var(
+      --nile-wysiwyg-blockquote-color,
+      var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600))
+    );
   }
 
   .ProseMirror ul,
@@ -228,7 +231,8 @@ export const styles = css `
 
   .ProseMirror hr {
     border: none;
-    border-top: 1px solid var(--nile-wysiwyg-border-color, #d0d5dd);
+    border-top: 1px solid
+      var(--nile-wysiwyg-border-color, var(--ng-colors-border-neutral));
     margin: 1em 0;
   }
 
@@ -236,7 +240,7 @@ export const styles = css `
   .ProseMirror a {
     color: var(
       --nile-wysiwyg-link-color,
-      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600, #2563eb))
+      var(--nile-colors-primary-600, var(--ng-colors-text-brand-tertiary-600))
     );
     text-decoration: none;
     cursor: pointer;
@@ -245,7 +249,10 @@ export const styles = css `
   .ProseMirror code.nile-wysiwyg__inline-code {
     font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
     font-size: 0.9em;
-    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
+    background: var(
+      --nile-wysiwyg-code-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
     border-radius: 4px;
     padding: 0.1em 0.35em;
   }
@@ -254,8 +261,11 @@ export const styles = css `
   .ProseMirror pre.nile-wysiwyg__code-block {
     font-family: var(--nile-wysiwyg-code-font, ui-monospace, SFMono-Regular, Menlo, monospace);
     font-size: 0.9em;
-    background: var(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));
-    border: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+    background: var(
+      --nile-wysiwyg-code-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
+    border: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
     border-radius: 6px;
     padding: 12px 14px;
     margin: 0.5em 0;
@@ -280,13 +290,20 @@ export const styles = css `
     vertical-align: top;
     box-sizing: border-box;
     position: relative;
-    border: 1px solid var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, #d0d5dd));
+    border: 1px solid
+      var(
+        --nile-wysiwyg-table-border,
+        var(--nile-colors-neutral-300, var(--ng-colors-border-primary))
+      );
     padding: 6px 8px;
     min-width: 1em;
   }
 
   .ProseMirror th {
-    background: var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, #f9fafb));
+    background: var(
+      --nile-wysiwyg-table-header-bg,
+      var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary))
+    );
     font-weight: 600;
     text-align: left;
   }
@@ -305,7 +322,7 @@ export const styles = css `
     bottom: 0;
     width: 4px;
     z-index: 20;
-    background-color: var(--nile-colors-primary-300, #b692f6);
+    background-color: var(--nile-colors-primary-300, var(--ng-componentcolors-utility-purple-300));
     pointer-events: none;
   }
 
@@ -318,7 +335,7 @@ export const styles = css `
      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, #e4e7ec);
+    border: 1px dashed var(--nile-colors-neutral-300, var(--ng-colors-border-primary));
     background: transparent;
     font-weight: inherit;
     text-align: inherit;
@@ -337,7 +354,7 @@ export const styles = css `
     font-size: 12px;
     line-height: 1;
     padding: 0 1px;
-    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    color: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror .selectedCell:after {
@@ -372,8 +389,8 @@ export const styles = css `
     position: absolute;
     width: 9px;
     height: 9px;
-    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
-    border: 1.5px solid #ffffff;
+    background: var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
+    border: 1.5px solid var(--ng-colors-bg-primary);
     border-radius: 2px;
     z-index: 2;
   }
@@ -383,7 +400,7 @@ export const styles = css `
   }
 
   .ProseMirror .nile-wysiwyg__image-resizer--selected img {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror .nile-wysiwyg__resize-handle--nw { top: -5px; left: -5px; cursor: nwse-resize; }
@@ -418,7 +435,7 @@ export const styles = css `
 
   .ProseMirror .nile-wysiwyg__figcaption {
     font-size: 0.85em;
-    color: var(--nile-colors-neutral-500, #667085);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
     text-align: center;
     padding: 4px 8px;
     line-height: 1.4;
@@ -429,7 +446,7 @@ export const styles = css `
     float: left;
     width: 100%;
     pointer-events: none;
-    color: var(--nile-colors-neutral-400, #98a2b3);
+    color: var(--nile-colors-neutral-400, var(--ng-colors-text-quaternary-500));
     margin-bottom: -1.4em;
   }
 
@@ -448,7 +465,7 @@ export const styles = css `
     max-width: 100%;
     margin: 0.75em 0;
     border-radius: 8px;
-    background: var(--nile-colors-neutral-100, #f2f4f7);
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
   }
 
   .ProseMirror div.nile-wysiwyg__embed iframe {
@@ -468,7 +485,7 @@ export const styles = css `
   }
 
   .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   .ProseMirror div.nile-wysiwyg__embed.ProseMirror-selectednode .nile-wysiwyg__resize-handle {
@@ -480,10 +497,13 @@ export const styles = css `
     pointer-events: none !important;
   }
 
-  /* --- Code highlighting (compact light theme for hljs tokens) --- */
+  /* --- Code highlighting (hljs tokens) ---
+     Each hue routes through an --ng-componentcolors-utility-* token, which the
+     token layer remaps to its lighter 400 step in the dark theme. Hardcoding the
+     one-light palette here left syntax unreadable on the dark code surface. --- */
   .ProseMirror .hljs-comment,
   .ProseMirror .hljs-quote {
-    color: #a0a1a7;
+    color: var(--ng-componentcolors-utility-gray-500);
     font-style: italic;
   }
 
@@ -491,7 +511,7 @@ export const styles = css `
   .ProseMirror .hljs-selector-tag,
   .ProseMirror .hljs-formula,
   .ProseMirror .hljs-doctag {
-    color: #a626a4;
+    color: var(--ng-componentcolors-utility-purple-600);
   }
 
   .ProseMirror .hljs-section,
@@ -501,13 +521,13 @@ export const styles = css `
   .ProseMirror .hljs-deletion,
   .ProseMirror .hljs-subst,
   .ProseMirror .hljs-tag {
-    color: #e45649;
+    color: var(--ng-componentcolors-utility-error-600);
   }
 
   .ProseMirror .hljs-literal,
   .ProseMirror .hljs-built_in,
   .ProseMirror .hljs-bullet {
-    color: #0184bb;
+    color: var(--ng-componentcolors-utility-blue-600);
   }
 
   .ProseMirror .hljs-string,
@@ -515,7 +535,7 @@ export const styles = css `
   .ProseMirror .hljs-addition,
   .ProseMirror .hljs-attribute,
   .ProseMirror .hljs-meta .hljs-string {
-    color: #50a14f;
+    color: var(--ng-componentcolors-utility-green-600);
   }
 
   .ProseMirror .hljs-attr,
@@ -525,7 +545,7 @@ export const styles = css `
   .ProseMirror .hljs-selector-attr,
   .ProseMirror .hljs-selector-pseudo,
   .ProseMirror .hljs-number {
-    color: #986801;
+    color: var(--ng-componentcolors-utility-orange-600);
   }
 
   .ProseMirror .hljs-symbol,
@@ -535,7 +555,7 @@ export const styles = css `
   .ProseMirror .hljs-title,
   .ProseMirror .hljs-title.class_,
   .ProseMirror .hljs-title.function_ {
-    color: #4078f2;
+    color: var(--ng-componentcolors-utility-indigo-600);
   }
 
   .ProseMirror .hljs-emphasis {
@@ -565,7 +585,10 @@ export const styles = css `
     height: 14px;
     flex: none;
     cursor: pointer;
-    accent-color: var(--nile-colors-primary-600, #2563eb);
+    accent-color: var(
+      --nile-colors-primary-600,
+      var(--ng-componentcolors-utility-blue-600)
+    );
   }
 
   .ProseMirror li.nile-wysiwyg__task-item > .nile-wysiwyg__task-content {
@@ -588,7 +611,7 @@ export const styles = css `
   }
 
   .ProseMirror li.nile-wysiwyg__task-item[data-checked='true'] > .nile-wysiwyg__task-content {
-    color: var(--nile-colors-neutral-500, #98a2b3);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-quaternary-500));
     text-decoration: line-through;
   }
 
@@ -597,12 +620,12 @@ export const styles = css `
     padding: 4px 12px 6px;
     text-align: right;
     font-size: 12px;
-    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary, #98a2b3));
-    border-top: 1px solid var(--nile-colors-neutral-200, #eaecf0);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-secondary));
+    border-top: 1px solid var(--nile-colors-neutral-200, var(--ng-colors-border-secondary));
   }
 
   .nile-wysiwyg__counter.over {
-    color: var(--nile-colors-error-600, #d92d20);
+    color: var(--nile-colors-error-600, var(--ng-componentcolors-utility-error-600));
     font-weight: 600;
   }
 
@@ -626,7 +649,7 @@ export const styles = css `
     z-index: 12;
     background: var(
       --nile-wysiwyg-bg,
-      var(--nile-colors-white-base, var(--ng-colors-bg-primary, #ffffff))
+      var(--nile-colors-white-base, var(--ng-colors-bg-primary))
     );
   }
 
@@ -635,14 +658,14 @@ export const styles = css `
     display: inline-block;
     padding: 0 4px;
     border-radius: 4px;
-    background: var(--nile-wysiwyg-mention-bg, var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff)));
-    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8)));
+    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;
   }
 
   .ProseMirror span.nile-wysiwyg__mention.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   /* --- Merge fields --- */
@@ -650,16 +673,22 @@ export const styles = css `
     display: inline-block;
     padding: 0 4px;
     border-radius: 4px;
-    background: var(--nile-wysiwyg-merge-bg, var(--nile-colors-neutral-100, #f2f4f7));
-    color: var(--nile-wysiwyg-merge-color, var(--nile-colors-neutral-700, #344054));
-    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
+    background: var(
+      --nile-wysiwyg-merge-bg,
+      var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary))
+    );
+    color: var(
+      --nile-wysiwyg-merge-color,
+      var(--nile-colors-neutral-700, var(--ng-colors-text-primary-900))
+    );
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
     font-size: 0.9em;
     white-space: nowrap;
   }
 
   .ProseMirror span.nile-wysiwyg__merge-field.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
   }
 
   /* --- Math --- */
@@ -676,7 +705,7 @@ export const styles = css `
   }
 
   .ProseMirror span.nile-wysiwyg__math.ProseMirror-selectednode {
-    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600, #2563eb));
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-componentcolors-utility-blue-600));
     border-radius: 3px;
   }
 
@@ -686,7 +715,7 @@ export const styles = css `
   }
 
   .ProseMirror .nile-wysiwyg__suggestion {
-    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50, #eff4ff));
+    background: var(--nile-colors-primary-50, var(--ng-componentcolors-utility-blue-50));
     border-radius: 3px;
   }
 
@@ -704,10 +733,10 @@ export const styles = css `
   .nile-wysiwyg__upload-placeholder {
     display: inline-block;
     padding: 6px 12px;
-    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);
+    border: 1px dashed var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
     border-radius: 6px;
-    background: var(--nile-colors-neutral-50, #f9fafb);
-    color: var(--nile-colors-neutral-600, #475467);
+    background: var(--nile-colors-neutral-50, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-neutral-600, var(--ng-colors-text-tertiary-600));
     font-size: 0.85em;
   }
 
@@ -747,7 +776,11 @@ export const styles = css `
   .nile-wysiwyg--show-blocks .ProseMirror ol,
   .nile-wysiwyg--show-blocks .ProseMirror li,
   .nile-wysiwyg--show-blocks .ProseMirror table {
-    outline: 1px dashed var(--nile-wysiwyg-block-outline, var(--nile-colors-neutral-400, #d0d5dd));
+    outline: 1px dashed
+      var(
+        --nile-wysiwyg-block-outline,
+        var(--nile-colors-neutral-400, var(--ng-colors-border-primary))
+      );
     outline-offset: -1px;
   }
 
@@ -782,8 +815,8 @@ export const styles = css `
     font-style: normal;
     line-height: 14px;
     letter-spacing: 0.5px;
-    color: var(--nile-colors-neutral-500, #667085);
-    background: var(--nile-colors-neutral-100, #f2f4f7);
+    color: var(--nile-colors-neutral-500, var(--ng-colors-text-tertiary-600));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-tertiary));
     border-radius: 0 0 4px 0;
     pointer-events: none;
   }

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-wysiwyg-editor.css.js","sourceRoot":"","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8xBxB,CAAC","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, #d0d5dd))\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, #ffffff))\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, #ffffff))\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, #98a2b3));\n    background: var(\n      --nile-wysiwyg-disabled-bg,\n      var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle, #f2f4f7))\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, #f2f4f7));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled, #98a2b3));\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, #101828))\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, #2563eb)));\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, #98a2b3))\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, #d0d5dd)\n      );\n    color: var(--nile-wysiwyg-blockquote-color, var(--nile-colors-neutral-600, #475467));\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 var(--nile-wysiwyg-border-color, #d0d5dd);\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, #2563eb))\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(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));\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(--nile-wysiwyg-code-bg, var(--nile-colors-neutral-100, #f2f4f7));\n    border: 1px solid var(--nile-colors-neutral-200, #eaecf0);\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 var(--nile-wysiwyg-table-border, var(--nile-colors-neutral-300, #d0d5dd));\n    padding: 6px 8px;\n    min-width: 1em;\n  }\n\n  .ProseMirror th {\n    background: var(--nile-wysiwyg-table-header-bg, var(--nile-colors-neutral-50, #f9fafb));\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, #b692f6);\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, #e4e7ec);\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, #2563eb));\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, #2563eb));\n    border: 1.5px solid #ffffff;\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, #2563eb));\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, #667085);\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, #98a2b3);\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, #f2f4f7);\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, #2563eb));\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 (compact light theme for hljs tokens) --- */\n  .ProseMirror .hljs-comment,\n  .ProseMirror .hljs-quote {\n    color: #a0a1a7;\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: #a626a4;\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: #e45649;\n  }\n\n  .ProseMirror .hljs-literal,\n  .ProseMirror .hljs-built_in,\n  .ProseMirror .hljs-bullet {\n    color: #0184bb;\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: #50a14f;\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: #986801;\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: #4078f2;\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(--nile-colors-primary-600, #2563eb);\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, #98a2b3);\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, #98a2b3));\n    border-top: 1px solid var(--nile-colors-neutral-200, #eaecf0);\n  }\n\n  .nile-wysiwyg__counter.over {\n    color: var(--nile-colors-error-600, #d92d20);\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, #ffffff))\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, #eff4ff)));\n    color: var(--nile-wysiwyg-mention-color, var(--nile-colors-primary-700, var(--ng-componentcolors-utility-blue-700, #1d4ed8)));\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, #2563eb));\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(--nile-wysiwyg-merge-bg, var(--nile-colors-neutral-100, #f2f4f7));\n    color: var(--nile-wysiwyg-merge-color, var(--nile-colors-neutral-700, #344054));\n    border: 1px dashed var(--nile-colors-neutral-400, #d0d5dd);\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, #2563eb));\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, #2563eb));\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, #eff4ff));\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, #d0d5dd);\n    border-radius: 6px;\n    background: var(--nile-colors-neutral-50, #f9fafb);\n    color: var(--nile-colors-neutral-600, #475467);\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 var(--nile-wysiwyg-block-outline, var(--nile-colors-neutral-400, #d0d5dd));\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, #667085);\n    background: var(--nile-colors-neutral-100, #f2f4f7);\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"]}
+{"version":3,"file":"nile-wysiwyg-editor.css.js","sourceRoot":"","sources":["../../../src/nile-wysiwyg-editor/nile-wysiwyg-editor.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+zBxB,CAAC","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"]}

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.d.ts

@@ -50,7 +50,7 @@ import './ui/markdown-panel';
  * @csspart base - Outer container.
  * @csspart toolbar - The toolbar element.
  * @csspart surface - The scrollable editing surface.
- */
+  */
 export declare class NileWysiwygEditor extends NileElement {
     static formAssociated: boolean;
     /** Document content as HTML. Not reflected to the attribute. */
@@ -187,6 +187,7 @@ export declare class NileWysiwygEditor extends NileElement {
     private pendingChange;
     /** Body overflow value before fullscreen locked it; null = not locked. */
     private previousBodyOverflow;
+    private readonly onAnyScroll;
     static get styles(): CSSResultArray;
     constructor();
     connectedCallback(): void;

package/dist/src/nile-wysiwyg-editor/nile-wysiwyg-editor.js

@@ -80,7 +80,7 @@ const CHANGE_DEBOUNCE_MS = 250;
  * @csspart base - Outer container.
  * @csspart toolbar - The toolbar element.
  * @csspart surface - The scrollable editing surface.
- */
+  */
 let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
     static get styles() {
         return [styles];
@@ -167,6 +167,20 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         this.pendingChange = false;
         /** Body overflow value before fullscreen locked it; null = not locked. */
         this.previousBodyOverflow = null;
+        this.onAnyScroll = () => {
+            if (!this.bubbleMenuEl)
+                return;
+            [
+                this.bubbleMenuEl,
+                this.tableMenuEl,
+                this.codeMenuEl,
+                this.imageMenuEl,
+                this.embedMenuEl,
+            ].forEach(menu => {
+                if (menu?.open)
+                    menu.open = false;
+            });
+        };
         /**
          * True while a drag-selection is in progress with the format painter armed.
          * Suppresses the mid-drag auto-apply in {@link handleTransaction} so the
@@ -224,6 +238,11 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         // Format painter applies on pointer release so a drag-selection is painted
         // whole, not on the first mid-drag selection change.
         document.addEventListener('mouseup', this.onPainterPointerUp);
+        // Floating menus can't track their anchor through a scroll, so dismiss them.
+        document.addEventListener('scroll', this.onAnyScroll, {
+            capture: true,
+            passive: true,
+        });
         // Discover an author-supplied toolbar / bubble menu (light-DOM
         // <nile-wysiwyg-toolbar-item> / <nile-wysiwyg-bubble-item> children) and
         // keep them in sync as they change.
@@ -246,6 +265,8 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
         super.disconnectedCallback();
         document.removeEventListener('pointerdown', this.onOutsidePointerDown, true);
         document.removeEventListener('mouseup', this.onPainterPointerUp);
+        document.removeEventListener('scroll', this.onAnyScroll, { capture: true });
+        this.surfaceEl?.removeEventListener('scroll', this.onAnyScroll);
         this.toolbarObserver?.disconnect();
         if (this.changeTimer)
             clearTimeout(this.changeTimer);
@@ -484,6 +505,7 @@ let NileWysiwygEditor = class NileWysiwygEditor extends NileElement {
             },
         });
         this.view.dom.addEventListener('mousedown', this.onPainterPointerDown);
+        this.surfaceEl.addEventListener('scroll', this.onAnyScroll, { passive: true });
         this.toolbarState = this.snapshotToolbar(this.view.state);
         this.counter = countWords(this.view.state.doc);
         this.syncFormValue(this.view.state.doc);