@zuilib/text-editor 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog — @zuilib/text-editor
 
+## 0.7.0
+
+**Themed drawing canvas.** The canvas chrome now follows the host theme
+instead of shipping its own look.
+
+- Tool row and contextual property row are a flat header in the editor's
+  own toolbar idiom (in flow, no floating panels over the drawing)
+- Every color, radius, shadow and font of the canvas is a
+  `--zui-drawing-*` custom property defaulting to the core theme tokens
+  (`--primary`, `--foreground`, `--border`, `--popover`, `--radius`,
+  `--shadow-medium`, …), so light and dark mode come from the tokens;
+  override them on `.zui-drawing-canvas` or an ancestor. See README,
+  "Theming the canvas"
+- Selection frame, handles, marquee, bind highlight and connector label
+  plates are drawn in `currentColor`/theme variables; the table selection
+  tint uses `--primary` too, so the editor shares one accent
+- `--zui-drawing-dark-filter` exposes the dark-mode inversion of the
+  drawing area (`none` opts out)
+
 ## 0.6.0
 
 **Text measure and `text` block width.** Additive: markdown, JSON, class

package/README.md

@@ -353,6 +353,41 @@ The full skeleton spec (attach sides, explicit positions, free texts) is
 in [DRAWING_FORMAT.md](./DRAWING_FORMAT.md). Programmatic access:
 `parseDrawingSkeleton`, `expandSkeleton`, `DRAWING_SKELETON_JSON_SCHEMA`.
 
+### Theming the canvas
+
+The canvas chrome (header, property row, popover, selection handles) is
+styled entirely through `--zui-drawing-*` custom properties. They default
+to the ZUI core tokens (`--primary`, `--foreground`, `--border`,
+`--popover`, `--radius`, `--shadow-medium`, …), so the canvas follows the
+host theme in light and dark mode. Override any of them on
+`.zui-drawing-canvas` or an ancestor:
+
+```css
+.my-app .zui-drawing-canvas {
+  --zui-drawing-accent: #0f766e;        /* selection, active tool, handles */
+  --zui-drawing-surface: #fbfbf7;       /* drawing area (pre dark-mode filter) */
+  --zui-drawing-grid: rgba(0, 0, 0, 0.12);
+  --zui-drawing-grid-size: 16px;
+  --zui-drawing-font: 'Inter', sans-serif;
+}
+```
+
+| Variable | Default | Used for |
+|----------|---------|----------|
+| `--zui-drawing-accent` | `var(--primary)` | Selection frame and handles, active tool, focus ring, bind highlight |
+| `--zui-drawing-foreground` | `var(--foreground)` | Header text and icons |
+| `--zui-drawing-muted-foreground` | `var(--muted-foreground)` | Swatch labels, empty-state hint |
+| `--zui-drawing-border` | `var(--border)` | Block border, header divider, popover border |
+| `--zui-drawing-chrome` | `var(--background)` | Header and property row background |
+| `--zui-drawing-popover` / `-foreground` | `var(--popover)` / `var(--popover-foreground)` | "More shapes" menu |
+| `--zui-drawing-danger` / `--zui-drawing-success` | `var(--destructive)` / `var(--success)` | Delete button, "copied" state |
+| `--zui-drawing-radius` / `--zui-drawing-control-radius` | `var(--radius-lg)` / `var(--radius)` | Block corners / buttons and menus |
+| `--zui-drawing-shadow` | `var(--shadow-medium)` | Popover |
+| `--zui-drawing-font` | system sans | Shape text and the inline editor |
+| `--zui-drawing-surface` / `--zui-drawing-grid` / `--zui-drawing-grid-size` | white / 9% black / `20px` | Drawing area and its dot grid, before the dark filter |
+| `--zui-drawing-dark-filter` | `invert(93%) hue-rotate(180deg)` | Applied to the drawing area under `.dark`; set to `none` to opt out |
+| `--zui-drawing-hover` / `--zui-drawing-active` | `currentColor` 8% / 12% | Button hover and pressed backgrounds |
+
 ## Outline & section folding
 
 `outline` docks a collapsible table-of-contents sidebar: live heading list

package/dist/index.js

@@ -1652,7 +1652,6 @@ function PropertyBar({
 
 // src/drawing/canvas/SelectionOverlay.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var SELECTION_COLOR = "#6965db";
 var HANDLE = 7;
 function Handle({
   x,
@@ -1664,8 +1663,6 @@ function Handle({
 }) {
   const props = {
     className: "zui-drawing-handle",
-    fill: "#fff",
-    stroke: SELECTION_COLOR,
     strokeWidth: 1.5,
     style: { cursor },
     onPointerDown
@@ -1694,12 +1691,10 @@ function SelectionOverlay({
       ghosts.map(({ index, x, y }) => /* @__PURE__ */ jsx3(
         "circle",
         {
-          className: "zui-drawing-ghost",
+          className: "zui-drawing-handle zui-drawing-ghost",
           cx: x,
           cy: y,
           r: 4.5,
-          fill: "#fff",
-          stroke: SELECTION_COLOR,
           strokeWidth: 1.5,
           strokeDasharray: "2 2",
           style: { cursor: "copy" },
@@ -1795,7 +1790,7 @@ function SelectionFrame({ rect, pad }) {
       height: rect.h + pad * 2,
       rx: 6,
       fill: "none",
-      stroke: SELECTION_COLOR,
+      stroke: "currentColor",
       strokeWidth: 1,
       strokeDasharray: "5 4",
       pointerEvents: "none"
@@ -1826,7 +1821,7 @@ function GroupSelectionOverlay({
         height: r.h + 6,
         rx: 4,
         fill: "none",
-        stroke: SELECTION_COLOR,
+        stroke: "currentColor",
         strokeWidth: 1,
         opacity: 0.45
       },
@@ -1839,14 +1834,15 @@ function MarqueeOverlay({ rect }) {
   return /* @__PURE__ */ jsx3(
     "rect",
     {
+      className: "zui-drawing-selection",
       x: rect.x,
       y: rect.y,
       width: rect.w,
       height: rect.h,
       rx: 3,
-      fill: SELECTION_COLOR,
+      fill: "currentColor",
       fillOpacity: 0.08,
-      stroke: SELECTION_COLOR,
+      stroke: "currentColor",
       strokeWidth: 1,
       pointerEvents: "none"
     }
@@ -2000,7 +1996,6 @@ function BoxGeometry({
 // src/drawing/canvas/ShapeView.tsx
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 import { createElement } from "react";
-var FONT_FAMILY = "ui-sans-serif, system-ui, sans-serif";
 var CONNECTOR_FONT_SIZE = 12;
 var CONNECTOR_LABEL_MAX_WIDTH = 160;
 function slotLayout(shape) {
@@ -2036,7 +2031,6 @@ function BoxTexts({
   const mainStart = area.y + area.h / 2 - (mainLines.length - 1) * mainLineH / 2 + FONT_SIZE * 0.35;
   const common = {
     fill: shape.stroke,
-    fontFamily: FONT_FAMILY,
     textAnchor: "middle"
   };
   return /* @__PURE__ */ jsxs5("g", { children: [
@@ -2134,7 +2128,7 @@ function ConnectorLabel({
         width: size.w + 10,
         height: size.h + 6,
         rx: 5,
-        fill: "#ffffff",
+        className: "zui-drawing-label-plate",
         opacity: 0.94
       }
     ),
@@ -2145,7 +2139,6 @@ function ConnectorLabel({
         y: startY + i * lineH,
         fill: shape.stroke,
         fontSize: CONNECTOR_FONT_SIZE,
-        fontFamily: FONT_FAMILY,
         textAnchor: "middle",
         style: textStyle,
         children: line
@@ -2190,7 +2183,6 @@ function ShapeView({
       y: shape.y + FONT_SIZE,
       fill: shape.stroke,
       fontSize: FONT_SIZE,
-      fontFamily: FONT_FAMILY,
       style: { userSelect: "none", whiteSpace: "pre" },
       children: (shape.text ?? "").split("\n").map((line, i) => /* @__PURE__ */ jsx5("tspan", { x: shape.x, dy: i === 0 ? 0 : FONT_SIZE * LINE_HEIGHT, children: line }, i))
     }
@@ -2262,7 +2254,7 @@ function TextEditOverlay({
   }, []);
   const style = {
     color: shape.stroke,
-    fontFamily: FONT_FAMILY,
+    fontFamily: "var(--zui-drawing-font)",
     lineHeight: LINE_HEIGHT
   };
   if (shape.type === "text") {
@@ -3027,118 +3019,120 @@ function DrawingCanvas({ nodeKey, data }) {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxs8(
-          "svg",
-          {
-            ref: svgRef,
-            className: "zui-drawing-surface",
-            style: {
-              height: logicalWidth ? void 0 : canvasHeight,
-              width: logicalWidth ?? void 0,
-              maxWidth: "100%",
-              aspectRatio: logicalWidth ? `${logicalWidth} / ${canvasHeight}` : void 0,
-              cursor: canvasCursor
-            },
-            viewBox: logicalWidth ? `0 0 ${logicalWidth} ${canvasHeight}` : void 0,
-            preserveAspectRatio: "xMinYMin meet",
-            onPointerDown: handleBackgroundPointerDown,
-            onPointerMove: handlePointerMove,
-            onPointerUp: handlePointerUp,
-            onPointerCancel: handlePointerUp,
-            onDoubleClick: (e) => {
-              if (!isEditable) return;
-              const target = e.target.closest("[data-shape-id]");
-              const id = target?.getAttribute("data-shape-id");
-              const shape = id ? shapes.find((s) => s.id === id) : null;
-              if (!shape) return;
-              if (shape.type === "text" || isConnectorType(shape.type)) {
-                startTextEditing(shape.id, "text");
-              } else {
-                startTextEditing(shape.id, slotAt(shape, getPoint(e).y));
-              }
-            },
-            children: [
-              shapes.map((shape) => /* @__PURE__ */ jsxs8(
-                "g",
-                {
-                  "data-shape-id": shape.id,
-                  className: `zui-drawing-shape ${selectedIds.has(shape.id) ? "is-selected" : ""}`,
-                  style: { cursor: isEditable && tool === "select" ? "move" : void 0 },
-                  onPointerDown: (e) => handleShapePointerDown(e, shape),
-                  children: [
-                    /* @__PURE__ */ jsx9(HitArea, { shape, points: paths.get(shape.id) }),
-                    shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx9(
-                      ShapeView,
-                      {
-                        shape,
-                        points: paths.get(shape.id),
-                        hideField: shape.id === editingText?.id ? editingText.field : null,
-                        showHints: isEditable && tool === "select" && single?.id === shape.id && shape.id !== editingText?.id
-                      }
-                    )
-                  ]
-                },
-                shape.id
-              )),
-              hoverBox && /* @__PURE__ */ jsx9(
-                "polygon",
-                {
-                  className: "zui-drawing-bind-target",
-                  points: boxOutline(hoverBox).map((p) => `${p.x},${p.y}`).join(" "),
-                  fill: SELECTION_COLOR,
-                  fillOpacity: 0.06,
-                  stroke: SELECTION_COLOR,
-                  strokeWidth: 2,
-                  strokeLinejoin: "round",
-                  pointerEvents: "none"
-                }
-              ),
-              single && isEditable && !editingText && /* @__PURE__ */ jsx9(
-                SelectionOverlay,
-                {
-                  shape: single,
-                  points: paths.get(single.id) ?? [],
-                  onHandlePointerDown: handleHandlePointerDown,
-                  onWaypointAdd: addWaypoint,
-                  onWaypointRemove: removeWaypoint
+        /* @__PURE__ */ jsxs8("div", { className: "zui-drawing-stage", children: [
+          /* @__PURE__ */ jsxs8(
+            "svg",
+            {
+              ref: svgRef,
+              className: "zui-drawing-surface",
+              style: {
+                height: logicalWidth ? void 0 : canvasHeight,
+                width: logicalWidth ?? void 0,
+                maxWidth: "100%",
+                aspectRatio: logicalWidth ? `${logicalWidth} / ${canvasHeight}` : void 0,
+                cursor: canvasCursor
+              },
+              viewBox: logicalWidth ? `0 0 ${logicalWidth} ${canvasHeight}` : void 0,
+              preserveAspectRatio: "xMinYMin meet",
+              onPointerDown: handleBackgroundPointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              onPointerCancel: handlePointerUp,
+              onDoubleClick: (e) => {
+                if (!isEditable) return;
+                const target = e.target.closest("[data-shape-id]");
+                const id = target?.getAttribute("data-shape-id");
+                const shape = id ? shapes.find((s) => s.id === id) : null;
+                if (!shape) return;
+                if (shape.type === "text" || isConnectorType(shape.type)) {
+                  startTextEditing(shape.id, "text");
+                } else {
+                  startTextEditing(shape.id, slotAt(shape, getPoint(e).y));
                 }
-              ),
-              selection.length > 1 && isEditable && /* @__PURE__ */ jsx9(GroupSelectionOverlay, { shapes: selection, paths }),
-              marquee && /* @__PURE__ */ jsx9(MarqueeOverlay, { rect: marqueeRect(marquee.origin, marquee.current) })
-            ]
-          }
-        ),
-        isEditable && shapes.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-empty", "aria-hidden": "true", children: "Pick a shape above, then click or drag on the canvas" }),
-        editingShape && editingText && /* @__PURE__ */ jsx9(
-          "div",
-          {
-            className: "zui-drawing-overlay",
-            style: {
-              transform: `scale(${scale})`,
-              width: logicalWidth ?? void 0,
-              height: logicalWidth ? canvasHeight : void 0
-            },
-            children: /* @__PURE__ */ jsx9(
-              TextEditOverlay,
-              {
-                shape: editingShape,
-                field: editingText.field,
-                points: paths.get(editingShape.id),
-                onCommit: commitText
               },
-              `${editingShape.id}:${editingText.field}`
-            )
-          }
-        ),
-        isEditable && /* @__PURE__ */ jsx9(
-          HeightHandle,
-          {
-            height: canvasHeight,
-            scale,
-            onChange: setCanvasHeight,
-            onCommit: (h) => commit(shapesRef.current, { height: h })
-          }
-        )
+              children: [
+                shapes.map((shape) => /* @__PURE__ */ jsxs8(
+                  "g",
+                  {
+                    "data-shape-id": shape.id,
+                    className: `zui-drawing-shape ${selectedIds.has(shape.id) ? "is-selected" : ""}`,
+                    style: { cursor: isEditable && tool === "select" ? "move" : void 0 },
+                    onPointerDown: (e) => handleShapePointerDown(e, shape),
+                    children: [
+                      /* @__PURE__ */ jsx9(HitArea, { shape, points: paths.get(shape.id) }),
+                      shape.id === editingText?.id && shape.type === "text" ? null : /* @__PURE__ */ jsx9(
+                        ShapeView,
+                        {
+                          shape,
+                          points: paths.get(shape.id),
+                          hideField: shape.id === editingText?.id ? editingText.field : null,
+                          showHints: isEditable && tool === "select" && single?.id === shape.id && shape.id !== editingText?.id
+                        }
+                      )
+                    ]
+                  },
+                  shape.id
+                )),
+                hoverBox && /* @__PURE__ */ jsx9(
+                  "polygon",
+                  {
+                    className: "zui-drawing-selection zui-drawing-bind-target",
+                    points: boxOutline(hoverBox).map((p) => `${p.x},${p.y}`).join(" "),
+                    fill: "currentColor",
+                    fillOpacity: 0.06,
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    strokeLinejoin: "round",
+                    pointerEvents: "none"
+                  }
+                ),
+                single && isEditable && !editingText && /* @__PURE__ */ jsx9(
+                  SelectionOverlay,
+                  {
+                    shape: single,
+                    points: paths.get(single.id) ?? [],
+                    onHandlePointerDown: handleHandlePointerDown,
+                    onWaypointAdd: addWaypoint,
+                    onWaypointRemove: removeWaypoint
+                  }
+                ),
+                selection.length > 1 && isEditable && /* @__PURE__ */ jsx9(GroupSelectionOverlay, { shapes: selection, paths }),
+                marquee && /* @__PURE__ */ jsx9(MarqueeOverlay, { rect: marqueeRect(marquee.origin, marquee.current) })
+              ]
+            }
+          ),
+          isEditable && shapes.length === 0 && /* @__PURE__ */ jsx9("div", { className: "zui-drawing-empty", "aria-hidden": "true", children: "Pick a shape above, then click or drag on the canvas" }),
+          editingShape && editingText && /* @__PURE__ */ jsx9(
+            "div",
+            {
+              className: "zui-drawing-overlay",
+              style: {
+                transform: `scale(${scale})`,
+                width: logicalWidth ?? void 0,
+                height: logicalWidth ? canvasHeight : void 0
+              },
+              children: /* @__PURE__ */ jsx9(
+                TextEditOverlay,
+                {
+                  shape: editingShape,
+                  field: editingText.field,
+                  points: paths.get(editingShape.id),
+                  onCommit: commitText
+                },
+                `${editingShape.id}:${editingText.field}`
+              )
+            }
+          ),
+          isEditable && /* @__PURE__ */ jsx9(
+            HeightHandle,
+            {
+              height: canvasHeight,
+              scale,
+              onChange: setCanvasHeight,
+              onCommit: (h) => commit(shapesRef.current, { height: h })
+            }
+          )
+        ] })
       ]
     }
   );

package/dist/styles.css

@@ -362,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);
 }
 
 /*
@@ -391,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-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);
 }
 
@@ -417,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));
 }
 
@@ -448,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;
 }
@@ -464,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 {
@@ -510,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 {
@@ -519,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 {
@@ -578,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;
@@ -586,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 {
@@ -602,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;
@@ -612,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 {
@@ -651,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:
@@ -682,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);
 }
 
@@ -703,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;
 }
@@ -728,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;
@@ -753,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;
@@ -769,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.6.0",
+  "version": "0.7.0",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",