@zuilib/text-editor 0.11.1 → 0.13.0

package/dist/styles.css

@@ -1,8 +1,22 @@
+/**
+ * Prefix for the generated plain-CSS entry. The build appends the editor and
+ * plugin CSS so dist/styles.css stays directly inspectable and usable by
+ * processors that do not inline relative imports.
+ */
+@import "@zuilib/tokens/tokens.css";
+/*
+ * The root is an inline-size container: the toolbar, the outline and the
+ * document respond to the editor's own width (see the small-container
+ * rules at the end), so an editor in a sidebar lays out like one on a
+ * phone. Containment also makes the root a stacking context, so the
+ * sticky toolbar's z-index stays inside the editor.
+ */
 .zui-text-editor {
   position: relative;
   width: 100%;
   height: 100%;
   overflow-y: auto;
+  container-type: inline-size;
 }
 
 .zui-text-editor-body {
@@ -41,6 +55,28 @@
   min-height: 100%;
   padding: 1.5rem var(--zui-text-editor-gutter, 2rem);
   outline: none;
+  /* A URL or token longer than the line wraps instead of widening the pane */
+  overflow-wrap: break-word;
+}
+
+/* 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);
 }
 
 /*
@@ -48,7 +84,7 @@
  * 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 +131,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 +147,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 +160,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 +174,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 +192,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 +233,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 +241,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 +256,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 +274,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 +290,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 +299,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;
@@ -271,6 +321,7 @@
   display: flex;
   align-items: center;
   gap: 0.125rem;
+  min-width: 0;
   padding: 0.375rem 0.75rem;
   border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
   background: inherit;
@@ -279,12 +330,13 @@
 
 .zui-text-editor-toolbar-button {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   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;
@@ -308,6 +360,7 @@
 }
 
 .zui-text-editor-toolbar-divider {
+  flex-shrink: 0;
   width: 1px;
   height: 1.125rem;
   margin: 0 0.375rem;
@@ -326,9 +379,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 +389,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 +415,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 +439,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 +455,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 +494,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 +511,7 @@
 }
 
 .zui-table-rail.is-row .zui-table-rail-handle {
-  left: 2px;
+  inset-inline-start: 2px;
   transform: translateY(-50%);
 }
 
@@ -498,6 +553,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;
 }
 
@@ -526,6 +582,24 @@
   opacity: 1;
 }
 
+/*
+ * Touch: a tap on the rail pins the handle where the finger was (there is
+ * no hover to follow); a second tap on the handle acts. A finger sliding
+ * along the rail moves the handle, so the rail claims that axis.
+ */
+.zui-table-rail.is-row {
+  touch-action: pan-x;
+}
+
+.zui-table-rail.is-column {
+  touch-action: pan-y;
+}
+
+.zui-table-rail.is-pinned .zui-table-rail-handle,
+.zui-table-rail.is-pinned .zui-table-rail-preview {
+  opacity: 1;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .zui-table-rail-marker,
   .zui-table-rail-handle,
@@ -559,14 +633,14 @@
   --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, #dc2626);
+  --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-sm, 0.375rem);
-  --zui-drawing-shadow: var(--shadow-medium, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+  --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);
@@ -588,6 +662,10 @@
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--zui-drawing-accent) 12%, transparent);
 }
 
+.zui-drawing-canvas.is-editable:focus-within .zui-drawing-surface {
+  touch-action: none;
+}
+
 .zui-drawing-canvas.is-content-width {
   width: fit-content;
   max-width: 100%;
@@ -601,7 +679,12 @@
   display: block;
   width: 100%;
   max-width: 100%;
-  touch-action: none;
+  /*
+   * A finger on an idle canvas scrolls the page; once the canvas is
+   * active (tapped, so focused) touches draw and drag. Mouse input is
+   * unaffected either way.
+   */
+  touch-action: pan-y pinch-zoom;
   font-family: var(--zui-drawing-font);
   background-color: var(--zui-drawing-surface);
   background-image: radial-gradient(circle, var(--zui-drawing-grid) 1px, transparent 1px);
@@ -678,12 +761,15 @@
 
 .zui-drawing-toolbar-group {
   display: flex;
+  /* Narrow canvases: the tools flow onto a second line rather than being clipped */
+  flex-wrap: wrap;
   align-items: center;
   gap: 0.125rem;
+  min-width: 0;
 }
 
 .zui-drawing-toolbar-group-end {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .zui-drawing-toolbar-divider {
@@ -741,11 +827,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 +843,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 +868,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 +901,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 +912,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 +930,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 +963,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 +974,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 +1002,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 +1028,67 @@
   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;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  /* Never wider than the pane (`cqw` is .zui-text-editor-main's width) */
+  max-width: calc(100cqw - 0.5rem);
+  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 {
+  flex: 1 1 auto;
+  width: 14rem;
+  min-width: 0;
+  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 +1107,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 +1195,373 @@
   font-variation-settings: 'CASL' 1, 'CRSV' 1, 'MONO' 0, 'wght' 440, 'slnt' -3;
   letter-spacing: 0.01em;
 }
+
+/*
+ * Small containers. `.zui-text-editor` and `.zui-text-editor-main` are
+ * inline-size containers, so these rules follow the editor's own width,
+ * not the viewport. Nothing here applies to a pane wider than 40rem.
+ */
+@container (max-width: 40rem) {
+  /* Toolbar: order matters, so it scrolls sideways (snapping) rather than wrapping */
+  .zui-text-editor-toolbar {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    scroll-snap-type: x proximity;
+    scroll-padding-inline: 0.75rem;
+    overscroll-behavior-x: contain;
+  }
+
+  .zui-text-editor-toolbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .zui-text-editor-toolbar > * {
+    scroll-snap-align: start;
+  }
+
+  /* Outline: a collapsible strip above the document instead of a side column */
+  .zui-text-editor-body {
+    flex-direction: column;
+  }
+
+  .zui-text-editor-outline {
+    order: -1;
+    position: static;
+    align-self: stretch;
+    width: auto;
+    max-height: 30dvh;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  }
+
+  .zui-text-editor-outline-item,
+  .zui-text-editor-outline-empty {
+    font-size: 0.875rem;
+  }
+
+  /*
+   * Tables: the table becomes its own horizontal scroll container (its
+   * rows form an anonymous table inside) and every column keeps a
+   * readable minimum, so a wide table scrolls within the pane instead of
+   * squeezing or widening the page. `!important` beats the inline
+   * `width: auto` of a content-width table.
+   */
+  .zui-table {
+    display: block;
+    width: fit-content !important;
+    overflow: auto hidden;
+    scrollbar-width: thin;
+  }
+
+  .zui-table-cell {
+    min-width: 6rem;
+  }
+
+  /* Display sizes step down with the pane */
+  .zui-text-editor-content .zui-heading-1 {
+    font-size: 2rem;
+    line-height: 1.15;
+  }
+
+  .zui-text-editor-content .zui-heading-2 {
+    font-size: 1.625rem;
+    line-height: 1.2;
+  }
+
+  .zui-text-editor-content .zui-heading-3 {
+    font-size: 1.375rem;
+    line-height: 1.25;
+  }
+}
+
+/*
+ * Coarse pointers (touch). Targets grow to 44px — visibly for buttons,
+ * as an invisible hit area (::before) for the small controls whose
+ * geometry the layout depends on — and hover-revealed controls are shown
+ * by default. Fine-pointer geometry is unchanged.
+ */
+@media (pointer: coarse) {
+  .zui-text-editor-toolbar-button,
+  .zui-drawing-tool,
+  .zui-text-editor-outline-toggle {
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+  }
+
+  .zui-drawing-popover-item,
+  .zui-text-editor-mention-option,
+  .zui-text-editor-link-input {
+    min-height: 2.75rem;
+  }
+
+  .zui-text-editor-mention-option {
+    align-items: center;
+  }
+
+  .zui-text-editor-outline-item {
+    padding-block: 0.8125rem;
+  }
+
+  .zui-text-editor-fold {
+    opacity: 0.45;
+  }
+
+  .zui-table-rail-handle,
+  .zui-table-rail-handle.is-resting {
+    opacity: 1;
+  }
+
+  .zui-drawing-swatch {
+    position: relative;
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0 0.25rem;
+  }
+
+  .zui-table-rail-handle::before,
+  .zui-text-editor-fold::before,
+  .zui-drawing-swatch::before,
+  .zui-drawing-resize::before {
+    content: '';
+    position: absolute;
+    inset: -0.75rem;
+  }
+
+  .zui-text-editor-fold::before {
+    inset: -0.8125rem;
+  }
+
+  .zui-drawing-swatch::before {
+    inset: -0.625rem;
+  }
+}
+
+/* Phones: editable text renders at 16px or more, so iOS does not zoom on focus */
+@media (max-width: 40rem) {
+  .zui-text-editor-content,
+  .zui-text-editor-textarea,
+  .zui-text-editor-link-input,
+  .zui-drawing-popover-item {
+    font-size: max(16px, 1em);
+  }
+}
+
+/*
+ * 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: min(12rem, calc(100cqw - 0.5rem));
+  /* Inside the pane (`cqw` is .zui-text-editor-main's width) and above a soft keyboard */
+  max-width: min(20rem, calc(100cqw - 0.5rem));
+  max-height: min(18rem, 50dvh);
+  overflow-y: auto;
+  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: min(14rem, calc(100cqw - 0.5rem));
+  max-width: min(22rem, calc(100cqw - 0.5rem));
+  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;
+  max-width: calc(100cqw - 1rem);
+  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;
+  }
+}