@zuilib/text-editor 0.5.0 → 0.7.0

package/dist/styles.css

@@ -11,21 +11,62 @@
   min-height: 100%;
 }
 
+/*
+ * Text measure (opt in). `--zui-text-editor-measure` — a CSS length, unset
+ * by default — caps the text column. The pane's gutter grows from the base
+ * 2rem to centre that column, and `--zui-text-editor-bleed` is how far a
+ * full-width block extends past the column on each side. With the measure
+ * unset both resolve to the previous layout (2rem gutter, no bleed).
+ *
+ * The pane is a container so `cqw` measures *its* width in every
+ * descendant, whatever the descendant's own width; the outline sidebar is
+ * a sibling, so full-width blocks stop short of it.
+ */
 .zui-text-editor-main {
   position: relative;
   display: flex;
   flex-direction: column;
   flex: 1;
   min-width: 0;
+  container-type: inline-size;
+  --zui-text-editor-gutter: max(
+    2rem,
+    calc((100cqw - var(--zui-text-editor-measure, 100cqw)) / 2)
+  );
+  --zui-text-editor-bleed: calc(var(--zui-text-editor-gutter) - 2rem);
 }
 
 .zui-text-editor-content {
   flex: 1;
   min-height: 100%;
-  padding: 1.5rem 2rem;
+  padding: 1.5rem var(--zui-text-editor-gutter, 2rem);
   outline: none;
 }
 
+/*
+ * 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
+ * selectors, so one class rule overrides any block kind, e.g.
+ * `.zui-code { --zui-text-editor-block-bleed: var(--zui-text-editor-bleed) }`.
+ */
+:where(.zui-text-editor-content > *) {
+  margin-inline: calc(-1 * var(--zui-text-editor-block-bleed, 0px));
+}
+
+:where(.zui-table, .zui-drawing) {
+  --zui-text-editor-block-bleed: var(--zui-text-editor-bleed, 0px);
+}
+
+:where(
+  .zui-drawing:has(> .is-text-width),
+  .zui-drawing:has(> .is-content-width)
+) {
+  --zui-text-editor-block-bleed: 0px;
+}
+
 /* Outline (table of contents) sidebar */
 .zui-text-editor-outline {
   position: sticky;
@@ -115,7 +156,8 @@
 
 .zui-text-editor-fold {
   position: absolute;
-  left: 0.45rem;
+  /* Just left of the text column; 0.45rem with the default gutter */
+  left: calc(var(--zui-text-editor-gutter, 2rem) - 1.55rem);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -155,7 +197,7 @@
 .zui-text-editor-placeholder {
   position: absolute;
   top: 1.5rem;
-  left: 2rem;
+  left: var(--zui-text-editor-gutter, 2rem);
   pointer-events: none;
   user-select: none;
 }
@@ -209,7 +251,7 @@
 .zui-frontmatter {
   display: block;
   white-space: pre-wrap;
-  margin: 0 0 1rem;
+  margin-block: 0 1rem;
   padding: 0.75rem 1rem;
   border: 1px solid currentColor;
   border-radius: 0.375rem;
@@ -272,11 +314,15 @@
   background: color-mix(in srgb, currentColor 15%, transparent);
 }
 
-/* Tables — artifact-style: rounded outer border, subtle header, tight rules */
+/*
+ * Tables — artifact-style: rounded outer border, subtle header, tight rules.
+ * Width follows the block bleed above (inline margins come from the shared
+ * block rule); a `content` table sets `width: auto` inline instead.
+ */
 .zui-table {
-  width: 100%;
-  max-width: 100%;
-  margin: 1rem 0;
+  width: calc(100% + 2 * var(--zui-text-editor-block-bleed, 0px));
+  max-width: calc(100% + 2 * var(--zui-text-editor-block-bleed, 0px));
+  margin-block: 1rem;
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
@@ -316,7 +362,7 @@
 .zui-table-selected,
 .zui-table-cell.zui-table-selected {
   outline: none;
-  background: color-mix(in srgb, #6965db 14%, transparent);
+  background: color-mix(in srgb, var(--primary, #6965db) 14%, transparent);
 }
 
 /*
@@ -345,24 +391,57 @@
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
 }
 
-/* Drawing canvas */
+/*
+ * Drawing canvas.
+ *
+ * Every color, radius and shadow of the canvas chrome comes from a
+ * `--zui-drawing-*` custom property. They default to the ZUI core theme
+ * tokens (`--primary`, `--foreground`, `--border`, …) so the canvas follows
+ * the host theme, light and dark, and consumers override them on
+ * `.zui-drawing-canvas` (or any ancestor) to restyle without touching
+ * selectors. `--zui-drawing-surface` and `--zui-drawing-grid` are the
+ * pre-filter colors of the drawing area: in dark mode the whole area is
+ * passed through `--zui-drawing-dark-filter` so stored shape colors stay
+ * theme-agnostic (set the filter to `none` to opt out).
+ */
 .zui-drawing {
-  margin: 1rem 0;
+  margin-block: 1rem;
 }
 
 .zui-drawing-canvas {
-  --zui-drawing-accent: #6965db;
+  --zui-drawing-accent: var(--primary, #3b82f6);
+  --zui-drawing-foreground: var(--foreground, #0a0a0a);
+  --zui-drawing-muted-foreground: var(--muted-foreground, #71717a);
+  --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-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-font: ui-sans-serif, system-ui, sans-serif;
+  --zui-drawing-surface: #ffffff;
+  --zui-drawing-grid: 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);
+  --zui-drawing-active: color-mix(in srgb, currentColor 12%, transparent);
+
   position: relative;
-  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
-  border-radius: 0.875rem;
-  background: #ffffff;
+  border: 1px solid var(--zui-drawing-border);
+  border-radius: var(--zui-drawing-radius);
+  background: var(--zui-drawing-chrome);
+  color: var(--zui-drawing-foreground);
+  font-family: var(--zui-drawing-font);
   outline: none;
   overflow: hidden;
-  transition: box-shadow 0.18s ease, border-color 0.18s ease;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease;
 }
 
 .zui-drawing-canvas.is-editable:focus-within {
-  border-color: color-mix(in srgb, var(--zui-drawing-accent) 45%, transparent);
+  border-color: color-mix(in srgb, var(--zui-drawing-accent) 50%, var(--zui-drawing-border));
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--zui-drawing-accent) 12%, transparent);
 }
 
@@ -371,25 +450,30 @@
   max-width: 100%;
 }
 
+.zui-drawing-stage {
+  position: relative;
+}
+
 .zui-drawing-surface {
   display: block;
   width: 100%;
   max-width: 100%;
   touch-action: none;
-  background-color: #ffffff;
-  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
-  background-size: 20px 20px;
-}
-
-.zui-drawing-shape {
-  transition: filter 0.12s ease;
+  font-family: var(--zui-drawing-font);
+  background-color: var(--zui-drawing-surface);
+  background-image: radial-gradient(circle, var(--zui-drawing-grid) 1px, transparent 1px);
+  background-size: var(--zui-drawing-grid-size) var(--zui-drawing-grid-size);
 }
 
-.zui-drawing-canvas.is-editable .zui-drawing-shape:hover:not(.is-selected) {
-  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--zui-drawing-accent) 55%, transparent));
+/* Selection chrome inside the SVG: everything is drawn in `currentColor` */
+.zui-drawing-selection,
+.zui-drawing-bind-target {
+  color: var(--zui-drawing-accent);
 }
 
 .zui-drawing-handle {
+  fill: var(--zui-drawing-surface);
+  stroke: currentColor;
   filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
 }
 
@@ -402,6 +486,18 @@
   opacity: 1;
 }
 
+.zui-drawing-label-plate {
+  fill: var(--zui-drawing-surface);
+}
+
+.zui-drawing-shape {
+  transition: filter 0.12s ease;
+}
+
+.zui-drawing-canvas.is-editable .zui-drawing-shape:hover:not(.is-selected) {
+  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--zui-drawing-accent) 55%, transparent));
+}
+
 .zui-drawing-bind-target {
   animation: zui-drawing-pulse 0.9s ease-in-out infinite alternate;
 }
@@ -418,43 +514,29 @@
 @keyframes zui-drawing-pop {
   from {
     opacity: 0;
-    transform: translateY(4px) scale(0.98);
+    transform: translateY(-3px);
   }
   to {
     opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateY(0);
   }
 }
 
-/* Floating toolbar */
+/* Header: tools row (+ contextual properties row), same idiom as the editor toolbar */
 .zui-drawing-toolbar {
-  position: absolute;
-  top: 0.625rem;
-  left: 0.625rem;
-  right: 0.625rem;
-  z-index: 5;
   display: flex;
   flex-wrap: wrap;
-  align-items: flex-start;
-  gap: 0.5rem;
-  pointer-events: none;
+  align-items: center;
+  gap: 0.125rem 0.5rem;
+  padding: 0.375rem 0.625rem;
+  border-bottom: 1px solid var(--zui-drawing-border);
+  background: var(--zui-drawing-chrome);
 }
 
-.zui-drawing-toolbar-group,
-.zui-drawing-props {
+.zui-drawing-toolbar-group {
   display: flex;
   align-items: center;
   gap: 0.125rem;
-  padding: 0.25rem;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-  border-radius: 0.625rem;
-  background: rgba(255, 255, 255, 0.88);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.05),
-    0 6px 20px -8px rgba(0, 0, 0, 0.18);
-  pointer-events: auto;
 }
 
 .zui-drawing-toolbar-group-end {
@@ -464,8 +546,8 @@
 .zui-drawing-toolbar-divider {
   width: 1px;
   height: 1.125rem;
-  margin: 0 0.25rem;
-  background: rgba(0, 0, 0, 0.1);
+  margin: 0 0.375rem;
+  background: color-mix(in srgb, currentColor 15%, transparent);
 }
 
 .zui-drawing-tool {
@@ -473,57 +555,56 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.875rem;
-  height: 1.875rem;
+  width: 1.75rem;
+  height: 1.75rem;
   border: none;
-  border-radius: 0.5rem;
+  border-radius: var(--zui-drawing-control-radius);
   background: transparent;
-  color: #1e1e1e;
+  color: inherit;
+  opacity: 0.65;
   cursor: pointer;
   transition:
     background-color 0.12s ease,
-    color 0.12s ease,
-    transform 0.12s ease;
+    opacity 0.12s ease;
 }
 
 .zui-drawing-tool:hover {
-  background: rgba(0, 0, 0, 0.06);
-}
-
-.zui-drawing-tool:active {
-  transform: scale(0.94);
+  opacity: 1;
+  background: var(--zui-drawing-hover);
 }
 
 .zui-drawing-tool.is-active {
-  background: color-mix(in srgb, var(--zui-drawing-accent) 16%, transparent);
-  color: #4a47b1;
+  opacity: 1;
+  color: var(--zui-drawing-accent);
+  background: color-mix(in srgb, var(--zui-drawing-accent) 14%, transparent);
 }
 
 .zui-drawing-tool.is-success {
-  color: #2f9e44;
+  opacity: 1;
+  color: var(--zui-drawing-success);
 }
 
 .zui-drawing-tool-danger {
-  color: #e03131;
+  color: var(--zui-drawing-danger);
 }
 
 .zui-drawing-tool-danger:hover {
-  background: rgba(224, 49, 49, 0.1);
+  background: color-mix(in srgb, var(--zui-drawing-danger) 12%, transparent);
 }
 
 .zui-drawing-tool-more {
-  width: 2.375rem;
+  width: 2.25rem;
 }
 
 .zui-drawing-caret {
   position: absolute;
-  right: 0.3rem;
-  bottom: 0.3rem;
+  right: 0.25rem;
+  bottom: 0.25rem;
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-top: 4px solid currentColor;
-  opacity: 0.6;
+  opacity: 0.7;
 }
 
 .zui-drawing-more {
@@ -532,7 +613,7 @@
 
 .zui-drawing-popover {
   position: absolute;
-  top: calc(100% + 0.375rem);
+  top: calc(100% + 0.25rem);
   left: 0;
   z-index: 7;
   display: flex;
@@ -540,14 +621,12 @@
   gap: 0.125rem;
   min-width: 9.5rem;
   padding: 0.25rem;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 0.625rem;
-  background: #ffffff;
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.06),
-    0 10px 28px -8px rgba(0, 0, 0, 0.25);
-  animation: zui-drawing-pop 0.14s ease-out;
-  transform-origin: top left;
+  border: 1px solid var(--zui-drawing-border);
+  border-radius: var(--zui-drawing-control-radius);
+  background: var(--zui-drawing-popover);
+  color: var(--zui-drawing-popover-foreground);
+  box-shadow: var(--zui-drawing-shadow);
+  animation: zui-drawing-pop 0.12s ease-out;
 }
 
 .zui-drawing-popover-item {
@@ -556,9 +635,9 @@
   gap: 0.5rem;
   padding: 0.375rem 0.5rem;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--zui-drawing-control-radius);
   background: transparent;
-  color: #1e1e1e;
+  color: inherit;
   font-size: 0.8125rem;
   text-align: left;
   cursor: pointer;
@@ -566,36 +645,39 @@
 }
 
 .zui-drawing-popover-item:hover {
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--zui-drawing-hover);
 }
 
 .zui-drawing-popover-item.is-active {
-  background: color-mix(in srgb, var(--zui-drawing-accent) 16%, transparent);
-  color: #4a47b1;
+  color: var(--zui-drawing-accent);
+  background: color-mix(in srgb, var(--zui-drawing-accent) 14%, transparent);
 }
 
-/* Contextual property bar: its own row under the tools */
+/* Contextual properties: a second row that expands under the tools */
 .zui-drawing-props-host {
   flex-basis: 100%;
   display: flex;
+  max-height: 0;
+  overflow: hidden;
   opacity: 0;
-  transform: translateY(-4px);
   pointer-events: none;
   transition:
-    opacity 0.16s ease,
-    transform 0.16s ease;
+    max-height 0.18s ease,
+    opacity 0.18s ease;
 }
 
 .zui-drawing-props-host.is-visible {
+  max-height: 6rem;
   opacity: 1;
-  transform: translateY(0);
   pointer-events: auto;
 }
 
 .zui-drawing-props {
+  display: flex;
   flex-wrap: wrap;
+  align-items: center;
   gap: 0.25rem;
-  padding: 0.25rem 0.375rem;
+  padding: 0.25rem 0 0.125rem;
 }
 
 .zui-drawing-props-group {
@@ -605,24 +687,24 @@
 }
 
 .zui-drawing-props-group + .zui-drawing-props-group {
-  padding-left: 0.375rem;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  padding-left: 0.5rem;
+  border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent);
 }
 
 .zui-drawing-swatch-label {
   margin: 0 0.25rem 0 0.125rem;
   font-size: 0.6875rem;
   letter-spacing: 0.02em;
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--zui-drawing-muted-foreground);
   user-select: none;
 }
 
 .zui-drawing-swatch {
-  width: 1.125rem;
-  height: 1.125rem;
+  width: 1rem;
+  height: 1rem;
   margin: 0 0.125rem;
   padding: 0;
-  border: 1px solid rgba(0, 0, 0, 0.14);
+  border: 1px solid rgba(0, 0, 0, 0.18);
   border-radius: 999px;
   cursor: pointer;
   transition:
@@ -636,7 +718,7 @@
 
 .zui-drawing-swatch.is-active {
   box-shadow:
-    0 0 0 2px #ffffff,
+    0 0 0 2px var(--zui-drawing-chrome),
     0 0 0 3.5px var(--zui-drawing-accent);
 }
 
@@ -657,9 +739,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-top: 2rem;
   font-size: 0.8125rem;
-  color: rgba(0, 0, 0, 0.4);
+  color: var(--zui-drawing-muted-foreground);
   pointer-events: none;
   user-select: none;
 }
@@ -682,10 +763,11 @@
   padding: 0;
   border: 0;
   border-radius: 3px;
-  outline: 1.5px dashed var(--zui-drawing-accent, #6965db);
+  outline: 1.5px dashed var(--zui-drawing-accent);
   outline-offset: 3px;
-  background: rgba(255, 255, 255, 0.85);
+  background: color-mix(in srgb, var(--zui-drawing-surface) 85%, transparent);
   color: inherit;
+  font-family: var(--zui-drawing-font);
   resize: none;
   overflow: hidden;
   box-sizing: content-box;
@@ -707,7 +789,7 @@
   justify-content: center;
   width: 1.375rem;
   height: 1.375rem;
-  border-radius: 0.375rem;
+  border-radius: var(--zui-drawing-control-radius);
   color: #1e1e1e;
   opacity: 0.35;
   cursor: ns-resize;
@@ -723,70 +805,15 @@
 }
 
 /*
- * Dark mode (zui `.dark` class convention). The drawing surface, the color
- * swatches, and the inline text input are darkened with a color-inversion
- * filter, so stored shape colors stay theme-agnostic: the default
- * near-black stroke renders light on the dark canvas, and the swatches
- * preview exactly what will be drawn.
+ * Dark mode (zui `.dark` class convention). The chrome follows the theme
+ * tokens on its own; the drawing area, the swatches and the inline text
+ * input are inverted so stored shape colors stay theme-agnostic.
  */
-.dark .zui-drawing-canvas {
-  background: #18181b;
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
 .dark .zui-drawing-surface,
 .dark .zui-drawing-swatch,
-.dark .zui-drawing-text-input {
-  filter: invert(93%) hue-rotate(180deg);
-}
-
-.dark .zui-drawing-toolbar-group,
-.dark .zui-drawing-props,
-.dark .zui-drawing-popover {
-  background: rgba(35, 35, 41, 0.9);
-  border-color: rgba(255, 255, 255, 0.1);
-  box-shadow:
-    0 1px 2px rgba(0, 0, 0, 0.3),
-    0 8px 24px -8px rgba(0, 0, 0, 0.6);
-}
-
-.dark .zui-drawing-tool,
-.dark .zui-drawing-popover-item,
+.dark .zui-drawing-text-input,
 .dark .zui-drawing-resize {
-  color: #e3e3e8;
-}
-
-.dark .zui-drawing-tool:hover,
-.dark .zui-drawing-popover-item:hover,
-.dark .zui-drawing-resize:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.dark .zui-drawing-tool.is-active,
-.dark .zui-drawing-popover-item.is-active {
-  background: #45437a;
-  color: #dcdaff;
-}
-
-.dark .zui-drawing-toolbar-divider,
-.dark .zui-drawing-props-group + .zui-drawing-props-group {
-  border-color: rgba(255, 255, 255, 0.12);
-  background-color: rgba(255, 255, 255, 0.12);
-}
-
-.dark .zui-drawing-props-group + .zui-drawing-props-group {
-  background-color: transparent;
-}
-
-.dark .zui-drawing-swatch-label,
-.dark .zui-drawing-empty {
-  color: rgba(255, 255, 255, 0.55);
-}
-
-.dark .zui-drawing-swatch.is-active {
-  box-shadow:
-    0 0 0 2px #232329,
-    0 0 0 3.5px #8f8bff;
+  filter: var(--zui-drawing-dark-filter);
 }
 
 .zui-text-editor-textarea {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",