@zuilib/text-editor 0.11.0 → 0.12.0

package/dist/styles.css

@@ -43,12 +43,32 @@
   outline: none;
 }
 
+/* Keyboard focus: an inset ring so it is visible without changing layout */
+.zui-text-editor-content:focus-visible,
+.zui-text-editor-textarea:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--ring, var(--primary, currentColor));
+}
+
+.zui-text-editor-content[aria-invalid='true'],
+.zui-text-editor-textarea[aria-invalid='true'] {
+  box-shadow: inset 0 0 0 1px var(--danger, currentColor);
+}
+
+/* Invalid and focused: the focus ring stays visible, the invalid line sits inside it */
+.zui-text-editor-content[aria-invalid='true']:focus-visible,
+.zui-text-editor-textarea[aria-invalid='true']:focus-visible {
+  box-shadow:
+    inset 0 0 0 2px var(--ring, var(--primary, currentColor)),
+    inset 0 0 0 3px var(--danger, currentColor);
+}
+
 /*
  * Block width. Every top-level block sits in the text column and may bleed
  * past it by `--zui-text-editor-block-bleed` (0 unless set). Tables and
  * drawings default it to the pane's bleed (`full`); their `text` and
  * `content` settings pin it to 0 — as an inline style on the table (see
- * tableSettings.ts) and a class on the drawing canvas. Zero-specificity
+ * table-settings.ts) and a class on the drawing canvas. Zero-specificity
  * selectors, so one class rule overrides any block kind, e.g.
  * `.zui-code { --zui-text-editor-block-bleed: var(--zui-text-editor-bleed) }`.
  */
@@ -95,7 +115,7 @@
   height: 1.5rem;
   margin-bottom: 0.25rem;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--radius-sm, 0.375rem);
   background: transparent;
   color: inherit;
   opacity: 0.55;
@@ -111,7 +131,7 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  border-left: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  border-inline-start: 1px solid color-mix(in srgb, currentColor 12%, transparent);
 }
 
 .zui-text-editor-outline-item {
@@ -124,7 +144,7 @@
   opacity: 0.6;
   font-size: 0.8125rem;
   line-height: 1.35;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -138,7 +158,7 @@
 .zui-text-editor-outline-item.is-active {
   opacity: 1;
   font-weight: 600;
-  box-shadow: inset 2px 0 0 #6965db;
+  box-shadow: inset 2px 0 0 var(--primary, currentColor);
 }
 
 .zui-text-editor-outline-empty {
@@ -156,15 +176,15 @@
 
 .zui-text-editor-fold {
   position: absolute;
-  /* Just left of the text column; 0.45rem with the default gutter */
-  left: calc(var(--zui-text-editor-gutter, 2rem) - 1.55rem);
+  /* Just before the text column; 0.45rem with the default gutter */
+  inset-inline-start: calc(var(--zui-text-editor-gutter, 2rem) - 1.55rem);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.125rem;
   height: 1.125rem;
   border: none;
-  border-radius: 0.25rem;
+  border-radius: var(--radius-sm, 0.25rem);
   background: transparent;
   color: inherit;
   opacity: 0;
@@ -197,7 +217,7 @@
 .zui-text-editor-placeholder {
   position: absolute;
   top: 1.5rem;
-  left: var(--zui-text-editor-gutter, 2rem);
+  inset-inline-start: var(--zui-text-editor-gutter, 2rem);
   pointer-events: none;
   user-select: none;
 }
@@ -205,14 +225,14 @@
 /* Checklist styles */
 .zui-checklist {
   list-style: none;
-  margin-left: 0;
-  padding-left: 0;
+  margin-inline-start: 0;
+  padding-inline-start: 0;
 }
 
 .zui-checklist li[role='checkbox'] {
   position: relative;
-  padding-left: 1.75rem;
-  margin-left: 0;
+  padding-inline-start: 1.75rem;
+  margin-inline-start: 0;
   cursor: pointer;
   list-style: none;
 }
@@ -220,12 +240,12 @@
 .zui-checklist li[role='checkbox']::before {
   content: '';
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0.25em;
   width: 1rem;
   height: 1rem;
   border: 2px solid currentColor;
-  border-radius: 0.2rem;
+  border-radius: var(--radius-sm, 0.2rem);
   opacity: 0.5;
   background: transparent;
 }
@@ -238,7 +258,7 @@
 .zui-checklist li[role='checkbox'][aria-checked='true']::after {
   content: '';
   position: absolute;
-  left: 0.3rem;
+  inset-inline-start: 0.3rem;
   top: 0.35em;
   width: 0.4rem;
   height: 0.7rem;
@@ -254,8 +274,8 @@
   margin-block: 0 1rem;
   padding: 0.75rem 1rem;
   border: 1px solid currentColor;
-  border-radius: 0.375rem;
-  border-left-width: 3px;
+  border-radius: var(--radius-md, 0.375rem);
+  border-inline-start-width: 3px;
   font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
     'Liberation Mono', monospace;
   font-size: 0.8125rem;
@@ -263,6 +283,20 @@
   opacity: 0.7;
 }
 
+/* Polite live region for row / column / fold announcements */
+.zui-text-editor-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* Toolbar */
 .zui-text-editor-toolbar {
   position: sticky;
@@ -284,7 +318,7 @@
   width: 1.75rem;
   height: 1.75rem;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--radius-sm, 0.375rem);
   background: transparent;
   color: inherit;
   opacity: 0.65;
@@ -326,9 +360,9 @@
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-  border-radius: 0.625rem;
+  border-radius: var(--radius-lg, 0.625rem);
   overflow: hidden;
-  /* Density presets set these custom properties inline (tableSettings.ts) */
+  /* Density presets set these custom properties inline (table-settings.ts) */
   font-size: var(--zui-table-font-size, 0.875rem);
   table-layout: fixed;
 }
@@ -336,13 +370,13 @@
 .zui-table-cell {
   padding: var(--zui-table-cell-padding, 0.5rem 0.75rem);
   border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
-  border-right: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+  border-inline-end: 1px solid color-mix(in srgb, currentColor 10%, transparent);
   vertical-align: top;
-  text-align: left;
+  text-align: start;
 }
 
 .zui-table-cell:last-child {
-  border-right: none;
+  border-inline-end: none;
 }
 
 .zui-table tr:last-child > .zui-table-cell {
@@ -362,18 +396,18 @@
 .zui-table-selected,
 .zui-table-cell.zui-table-selected {
   outline: none;
-  background: color-mix(in srgb, var(--primary, #6965db) 14%, transparent);
+  background: color-mix(in srgb, var(--primary, currentColor) 14%, transparent);
 }
 
 /*
  * Floating table controls (positioned within .zui-text-editor-main, so they
- * scroll with the document; TableControlsPlugin.tsx).
+ * scroll with the document; table-controls-plugin.tsx).
  *
  * The layout presets sit above the table the caret is in, aligned with
  * its right edge and stacked above the column rail (the plugin sets `top`
  * to the rail's top; the transform lifts the toolbar clear of it). The
  * settings themselves are an inline style on the <table> (see
- * tableSettings.ts).
+ * table-settings.ts).
  */
 .zui-table-settings {
   position: absolute;
@@ -386,7 +420,7 @@
   border-radius: var(--radius-md, 0.5rem);
   background: var(--popover, #ffffff);
   color: var(--popover-foreground, inherit);
-  box-shadow: var(--shadow-medium, 0 1px 4px rgba(0, 0, 0, 0.08));
+  box-shadow: var(--shadow-2, 0 1px 4px rgba(0, 0, 0, 0.08));
   transform: translateY(calc(-100% - 0.25rem));
 }
 
@@ -402,27 +436,28 @@
 .zui-table-rail {
   position: absolute;
   z-index: 4;
-  --zui-table-rail-accent: var(--primary, #6965db);
+  --zui-table-rail-accent: var(--primary, currentColor);
   --zui-table-rail-accent-foreground: var(--primary-foreground, #ffffff);
-  --zui-table-rail-danger: var(--destructive, #dc2626);
-  --zui-table-rail-danger-foreground: var(--destructive-foreground, #ffffff);
+  --zui-table-rail-danger: var(--danger, #dc2626);
+  --zui-table-rail-danger-foreground: var(--danger-foreground, #ffffff);
 }
 
 .zui-table-rail-marker {
   position: absolute;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: var(--zui-table-rail-accent);
   opacity: 0.55;
   pointer-events: none;
   transition:
     top 140ms cubic-bezier(0.2, 0, 0, 1),
     left 140ms cubic-bezier(0.2, 0, 0, 1),
+    inset-inline-start 140ms cubic-bezier(0.2, 0, 0, 1),
     width 140ms cubic-bezier(0.2, 0, 0, 1),
     height 140ms cubic-bezier(0.2, 0, 0, 1);
 }
 
 .zui-table-rail.is-row .zui-table-rail-marker {
-  right: 5px;
+  inset-inline-end: 5px;
   width: 3px;
 }
 
@@ -440,14 +475,15 @@
   height: 20px;
   padding: 0;
   border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent));
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   background: var(--popover, #ffffff);
   color: var(--popover-foreground, inherit);
-  box-shadow: var(--shadow-medium, 0 1px 4px rgba(0, 0, 0, 0.08));
+  box-shadow: var(--shadow-2, 0 1px 4px rgba(0, 0, 0, 0.08));
   cursor: pointer;
   transition:
     top 140ms cubic-bezier(0.2, 0, 0, 1),
     left 140ms cubic-bezier(0.2, 0, 0, 1),
+    inset-inline-start 140ms cubic-bezier(0.2, 0, 0, 1),
     opacity 140ms ease,
     background-color 120ms ease,
     color 120ms ease,
@@ -456,7 +492,7 @@
 }
 
 .zui-table-rail.is-row .zui-table-rail-handle {
-  left: 2px;
+  inset-inline-start: 2px;
   transform: translateY(-50%);
 }
 
@@ -498,6 +534,7 @@
   transition:
     top 140ms cubic-bezier(0.2, 0, 0, 1),
     left 140ms cubic-bezier(0.2, 0, 0, 1),
+    inset-inline-start 140ms cubic-bezier(0.2, 0, 0, 1),
     opacity 120ms ease;
 }
 
@@ -552,21 +589,21 @@
 }
 
 .zui-drawing-canvas {
-  --zui-drawing-accent: var(--primary, #3b82f6);
+  --zui-drawing-accent: var(--primary, #2563eb);
   --zui-drawing-foreground: var(--foreground, #0a0a0a);
-  --zui-drawing-muted-foreground: var(--muted-foreground, #71717a);
+  --zui-drawing-muted-foreground: var(--muted-foreground, #65656d);
   --zui-drawing-border: var(--border, #e4e4e7);
   --zui-drawing-chrome: var(--background, #ffffff);
   --zui-drawing-popover: var(--popover, #ffffff);
   --zui-drawing-popover-foreground: var(--popover-foreground, var(--zui-drawing-foreground));
-  --zui-drawing-danger: var(--destructive, #ef4444);
-  --zui-drawing-success: var(--success, #22c55e);
+  --zui-drawing-danger: var(--danger, #dc2626);
+  --zui-drawing-success: var(--success, #15803d);
   --zui-drawing-radius: var(--radius-lg, 0.75rem);
-  --zui-drawing-control-radius: var(--radius, 0.375rem);
-  --zui-drawing-shadow: var(--shadow-medium, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+  --zui-drawing-control-radius: var(--radius-sm, 0.375rem);
+  --zui-drawing-shadow: var(--shadow-2, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
   --zui-drawing-font: ui-sans-serif, system-ui, sans-serif;
-  --zui-drawing-surface: #ffffff;
-  --zui-drawing-grid: rgba(0, 0, 0, 0.09);
+  --zui-drawing-surface: var(--zui-drawing-surface-color, #ffffff);
+  --zui-drawing-grid: var(--zui-drawing-grid-color, rgba(0, 0, 0, 0.09));
   --zui-drawing-grid-size: 20px;
   --zui-drawing-dark-filter: invert(93%) hue-rotate(180deg);
   --zui-drawing-hover: color-mix(in srgb, currentColor 8%, transparent);
@@ -683,7 +720,7 @@
 }
 
 .zui-drawing-toolbar-group-end {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .zui-drawing-toolbar-divider {
@@ -741,11 +778,11 @@
 
 .zui-drawing-caret {
   position: absolute;
-  right: 0.25rem;
+  inset-inline-end: 0.25rem;
   bottom: 0.25rem;
   width: 0;
   height: 0;
-  border-left: 4px solid transparent;
+  border-inline-start: 4px solid transparent;
   border-top: 4px solid currentColor;
   opacity: 0.7;
 }
@@ -757,7 +794,7 @@
 .zui-drawing-popover {
   position: absolute;
   top: calc(100% + 0.25rem);
-  left: 0;
+  inset-inline-start: 0;
   z-index: 7;
   display: flex;
   flex-direction: column;
@@ -782,7 +819,7 @@
   background: transparent;
   color: inherit;
   font-size: 0.8125rem;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color 0.12s ease;
 }
@@ -815,8 +852,8 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
-  padding-left: 0.5rem;
-  border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+  padding-inline-start: 0.5rem;
+  border-inline-start: 1px solid color-mix(in srgb, currentColor 15%, transparent);
 }
 
 .zui-drawing-props-group {
@@ -826,12 +863,12 @@
 }
 
 .zui-drawing-props-group + .zui-drawing-props-group {
-  padding-left: 0.5rem;
-  border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent);
+  padding-inline-start: 0.5rem;
+  border-inline-start: 1px solid color-mix(in srgb, currentColor 15%, transparent);
 }
 
 .zui-drawing-swatch-label {
-  margin: 0 0.25rem 0 0.125rem;
+  margin-inline: 0.125rem 0.25rem;
   font-size: 0.6875rem;
   letter-spacing: 0.02em;
   color: var(--zui-drawing-muted-foreground);
@@ -844,7 +881,7 @@
   margin: 0 0.125rem;
   padding: 0;
   border: 2px solid rgba(0, 0, 0, 0.18);
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   cursor: pointer;
   transition:
     transform 0.12s ease,
@@ -877,10 +914,7 @@
 /* Inline text editing */
 .zui-drawing-overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: 0;
   transform-origin: top left;
   pointer-events: none;
 }
@@ -891,7 +925,7 @@
   margin: 0;
   padding: 0;
   border: 0;
-  border-radius: 3px;
+  border-radius: var(--radius-sm, 3px);
   outline: 1.5px dashed var(--zui-drawing-accent);
   outline-offset: 3px;
   background: color-mix(in srgb, var(--zui-drawing-surface) 85%, transparent);
@@ -919,7 +953,7 @@
   width: 1.375rem;
   height: 1.375rem;
   border-radius: var(--zui-drawing-control-radius);
-  color: #1e1e1e;
+  color: var(--zui-drawing-foreground);
   opacity: 0.35;
   cursor: ns-resize;
   touch-action: none;
@@ -945,6 +979,62 @@
   filter: var(--zui-drawing-dark-filter);
 }
 
+/* Link bubble (link-bubble-plugin.tsx): under the link the caret is in */
+.zui-text-editor-link-bubble {
+  position: absolute;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--popover, #ffffff);
+  color: var(--popover-foreground, inherit);
+  box-shadow: var(--shadow-2, 0 1px 4px rgba(0, 0, 0, 0.08));
+}
+
+.zui-text-editor-link-input {
+  min-width: 14rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--border, color-mix(in srgb, currentColor 15%, transparent));
+  border-radius: var(--radius-sm, 0.375rem);
+  background: var(--background, transparent);
+  color: inherit;
+  font: inherit;
+  font-size: 0.8125rem;
+}
+
+.zui-text-editor-link-input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ring, var(--primary, currentColor));
+}
+
+.zui-text-editor-link-input[aria-invalid='true'] {
+  border-color: var(--danger, currentColor);
+}
+
+.zui-text-editor-link-bubble .zui-text-editor-toolbar-button {
+  width: auto;
+  padding-inline: 0.5rem;
+  font-size: 0.8125rem;
+}
+
+/* Character counter (character-count.tsx); its limit announcements use .zui-text-editor-live */
+.zui-text-editor-count {
+  position: sticky;
+  bottom: 0;
+  padding: 0.25rem var(--zui-text-editor-gutter, 2rem);
+  text-align: end;
+  font-size: 0.75rem;
+  opacity: 0.6;
+}
+
+.zui-text-editor-count.is-over {
+  opacity: 1;
+  color: var(--danger, currentColor);
+}
+
 .zui-text-editor-textarea {
   width: 100%;
   height: 100%;
@@ -963,55 +1053,57 @@
 
 /*
  * Code block syntax highlighting. Each semantic token type (see
- * src/code/types.ts) gets one class and one color custom property, so a host
+ * src/code/grammar.ts) gets one class and one color custom property, so a host
  * theme restyles the palette by overriding `--zui-code-<type>` on `.zui-code`
  * (or any ancestor) — light and dark defaults follow the `.dark` convention.
  * Operators and punctuation inherit the text color on purpose: fewer colors,
- * calmer blocks.
+ * calmer blocks. The defaults read `--zui-code-<type>-light` /
+ * `--zui-code-<type>-dark` (defined by @zuilib/tokens) before their
+ * built-in fallbacks.
  */
 .zui-code {
-  --zui-code-comment: #6e7781;
-  --zui-code-string: #0a3069;
-  --zui-code-number: #0550ae;
-  --zui-code-keyword: #cf222e;
-  --zui-code-builtin: #6639ba;
-  --zui-code-type: #953800;
-  --zui-code-function: #8250df;
-  --zui-code-property: #0550ae;
-  --zui-code-variable: #953800;
-  --zui-code-constant: #0550ae;
+  --zui-code-comment: var(--zui-code-comment-light, #6e7781);
+  --zui-code-string: var(--zui-code-string-light, #0a3069);
+  --zui-code-number: var(--zui-code-number-light, #0550ae);
+  --zui-code-keyword: var(--zui-code-keyword-light, #cf222e);
+  --zui-code-builtin: var(--zui-code-builtin-light, #6639ba);
+  --zui-code-type: var(--zui-code-type-light, #953800);
+  --zui-code-function: var(--zui-code-function-light, #8250df);
+  --zui-code-property: var(--zui-code-property-light, #0550ae);
+  --zui-code-variable: var(--zui-code-variable-light, #953800);
+  --zui-code-constant: var(--zui-code-constant-light, #0550ae);
   --zui-code-operator: currentColor;
   --zui-code-punctuation: currentColor;
-  --zui-code-tag: #116329;
-  --zui-code-attr: #0550ae;
-  --zui-code-regex: #0a3069;
-  --zui-code-meta: #6639ba;
-  --zui-code-inserted: #116329;
-  --zui-code-inserted-background: #dafbe1;
-  --zui-code-deleted: #82071e;
-  --zui-code-deleted-background: #ffebe9;
+  --zui-code-tag: var(--zui-code-tag-light, #116329);
+  --zui-code-attr: var(--zui-code-attr-light, #0550ae);
+  --zui-code-regex: var(--zui-code-regex-light, #0a3069);
+  --zui-code-meta: var(--zui-code-meta-light, #6639ba);
+  --zui-code-inserted: var(--zui-code-inserted-light, #116329);
+  --zui-code-inserted-background: var(--zui-code-inserted-background-light, #dafbe1);
+  --zui-code-deleted: var(--zui-code-deleted-light, #82071e);
+  --zui-code-deleted-background: var(--zui-code-deleted-background-light, #ffebe9);
   tab-size: 2;
 }
 
 .dark .zui-code {
-  --zui-code-comment: #8b949e;
-  --zui-code-string: #a5d6ff;
-  --zui-code-number: #79c0ff;
-  --zui-code-keyword: #ff7b72;
-  --zui-code-builtin: #d2a8ff;
-  --zui-code-type: #ffa657;
-  --zui-code-function: #d2a8ff;
-  --zui-code-property: #79c0ff;
-  --zui-code-variable: #ffa657;
-  --zui-code-constant: #79c0ff;
-  --zui-code-tag: #7ee787;
-  --zui-code-attr: #79c0ff;
-  --zui-code-regex: #a5d6ff;
-  --zui-code-meta: #d2a8ff;
-  --zui-code-inserted: #7ee787;
-  --zui-code-inserted-background: rgba(63, 185, 80, 0.15);
-  --zui-code-deleted: #ffa198;
-  --zui-code-deleted-background: rgba(248, 81, 73, 0.15);
+  --zui-code-comment: var(--zui-code-comment-dark, #8b949e);
+  --zui-code-string: var(--zui-code-string-dark, #a5d6ff);
+  --zui-code-number: var(--zui-code-number-dark, #79c0ff);
+  --zui-code-keyword: var(--zui-code-keyword-dark, #ff7b72);
+  --zui-code-builtin: var(--zui-code-builtin-dark, #d2a8ff);
+  --zui-code-type: var(--zui-code-type-dark, #ffa657);
+  --zui-code-function: var(--zui-code-function-dark, #d2a8ff);
+  --zui-code-property: var(--zui-code-property-dark, #79c0ff);
+  --zui-code-variable: var(--zui-code-variable-dark, #ffa657);
+  --zui-code-constant: var(--zui-code-constant-dark, #79c0ff);
+  --zui-code-tag: var(--zui-code-tag-dark, #7ee787);
+  --zui-code-attr: var(--zui-code-attr-dark, #79c0ff);
+  --zui-code-regex: var(--zui-code-regex-dark, #a5d6ff);
+  --zui-code-meta: var(--zui-code-meta-dark, #d2a8ff);
+  --zui-code-inserted: var(--zui-code-inserted-dark, #7ee787);
+  --zui-code-inserted-background: var(--zui-code-inserted-background-dark, rgba(63, 185, 80, 0.15));
+  --zui-code-deleted: var(--zui-code-deleted-dark, #ffa198);
+  --zui-code-deleted-background: var(--zui-code-deleted-background-dark, rgba(248, 81, 73, 0.15));
 }
 
 .zui-token-comment { color: var(--zui-code-comment); font-style: italic; }
@@ -1049,3 +1141,218 @@
   font-variation-settings: 'CASL' 1, 'CRSV' 1, 'MONO' 0, 'wght' 440, 'slnt' -3;
   letter-spacing: 0.01em;
 }
+
+/*
+ * First-party plugins (mentions, comments, images). Appended to styles.css
+ * at build time; every color comes from the host theme tokens.
+ */
+
+/* Mentions (MentionNode + MentionsPlugin) */
+.zui-mention {
+  display: inline;
+  padding-inline: 0.2em;
+  border-radius: var(--radius-sm, 0.375rem);
+  background: color-mix(in srgb, var(--primary, currentColor) 12%, transparent);
+  color: var(--primary, inherit);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.zui-text-editor-mentions {
+  position: absolute;
+  z-index: 6;
+  min-width: 12rem;
+  max-width: 20rem;
+  padding: 0.25rem;
+  border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--popover, var(--background, #ffffff));
+  color: var(--popover-foreground, inherit);
+  box-shadow: var(--shadow-2, 0 1px 4px rgba(0, 0, 0, 0.08));
+  font-size: 0.875rem;
+}
+
+.zui-text-editor-mention-option {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: var(--radius-sm, 0.375rem);
+  cursor: pointer;
+}
+
+.zui-text-editor-mention-option.is-active {
+  background: var(--accent, color-mix(in srgb, currentColor 8%, transparent));
+  color: var(--accent-foreground, inherit);
+}
+
+.zui-text-editor-mention-hint,
+.zui-text-editor-mention-empty {
+  color: var(--muted-foreground, inherit);
+  opacity: 0.8;
+  font-size: 0.8125rem;
+}
+
+.zui-text-editor-mention-empty {
+  padding: 0.375rem 0.5rem;
+}
+
+/* Comments (MarkNode + CommentsPlugin) */
+.zui-comment {
+  background: color-mix(in srgb, var(--zui-comment-color, var(--warning, #eab308)) 28%, transparent);
+  border-block-end: 2px solid color-mix(in srgb, var(--zui-comment-color, var(--warning, #eab308)) 70%, transparent);
+  transition: background-color 120ms ease;
+}
+
+.zui-comment.is-resolved {
+  background: transparent;
+  border-block-end-color: color-mix(in srgb, currentColor 20%, transparent);
+}
+
+.zui-comment-overlap {
+  background: color-mix(in srgb, var(--zui-comment-color, var(--warning, #eab308)) 45%, transparent);
+}
+
+.zui-text-editor-comment-add {
+  position: absolute;
+  z-index: 6;
+}
+
+.zui-text-editor-comment-add .zui-text-editor-toolbar-button {
+  width: auto;
+  gap: 0.375rem;
+  padding-inline: 0.5rem;
+  border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--popover, var(--background, #ffffff));
+  color: var(--popover-foreground, inherit);
+  box-shadow: var(--shadow-2, 0 1px 4px rgba(0, 0, 0, 0.08));
+  font-size: 0.8125rem;
+}
+
+.zui-text-editor-comments {
+  position: absolute;
+  z-index: 6;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 14rem;
+  max-width: 22rem;
+  padding: 0.5rem;
+  border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--popover, var(--background, #ffffff));
+  color: var(--popover-foreground, inherit);
+  box-shadow: var(--shadow-2, 0 1px 4px rgba(0, 0, 0, 0.08));
+  font-size: 0.8125rem;
+}
+
+.zui-text-editor-comment-quote {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-style: italic;
+  color: var(--muted-foreground, inherit);
+}
+
+.zui-text-editor-comment.is-resolved .zui-text-editor-comment-quote {
+  text-decoration: line-through;
+}
+
+.zui-text-editor-comment-state {
+  font-style: normal;
+  font-weight: 500;
+}
+
+.zui-text-editor-comment-actions {
+  display: flex;
+  gap: 0.25rem;
+  margin-block-start: 0.25rem;
+}
+
+.zui-text-editor-comment-actions .zui-text-editor-toolbar-button {
+  width: auto;
+  padding-inline: 0.5rem;
+  font-size: 0.8125rem;
+}
+
+/* Images (ImageNode + ImagesPlugin) */
+.zui-image {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+.zui-paragraph > .zui-image:only-child {
+  display: block;
+  margin-block: 0.5rem;
+}
+
+.zui-image-frame {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  border-radius: var(--radius-md, 0.5rem);
+}
+
+.zui-image-frame img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: inherit;
+}
+
+.zui-image-frame.is-selected {
+  box-shadow: 0 0 0 2px var(--ring, var(--primary, currentColor));
+}
+
+.zui-image-alt {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: calc(100% + 0.25rem);
+  z-index: 6;
+  display: flex;
+  padding: 0.25rem;
+  border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--popover, var(--background, #ffffff));
+  color: var(--popover-foreground, inherit);
+  box-shadow: var(--shadow-2, 0 1px 4px rgba(0, 0, 0, 0.08));
+}
+
+.zui-image-pending {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 8rem;
+  height: 5rem;
+  border: 1px dashed var(--border, color-mix(in srgb, currentColor 25%, transparent));
+  border-radius: var(--radius-md, 0.5rem);
+  background: var(--muted, color-mix(in srgb, currentColor 5%, transparent));
+  vertical-align: middle;
+}
+
+.zui-image-spinner {
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
+  border-block-start-color: var(--primary, currentColor);
+  border-radius: var(--radius-full, 9999px);
+  animation: zui-image-spin 0.8s linear infinite;
+}
+
+@keyframes zui-image-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zui-comment {
+    transition: none;
+  }
+  .zui-image-spinner {
+    animation: none;
+    border-block-start-color: currentColor;
+  }
+}