@zuilib/text-editor 0.4.0 → 0.6.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);
@@ -347,20 +393,28 @@
 
 /* Drawing canvas */
 .zui-drawing {
-  margin: 1rem 0;
-}
-
-.zui-drawing-canvas.is-content-width {
-  width: fit-content;
-  max-width: 100%;
+  margin-block: 1rem;
 }
 
 .zui-drawing-canvas {
+  --zui-drawing-accent: #6965db;
   position: relative;
-  border-radius: 0.75rem;
+  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
+  border-radius: 0.875rem;
   background: #ffffff;
   outline: none;
   overflow: hidden;
+  transition: box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.zui-drawing-canvas.is-editable:focus-within {
+  border-color: color-mix(in srgb, var(--zui-drawing-accent) 45%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zui-drawing-accent) 12%, transparent);
+}
+
+.zui-drawing-canvas.is-content-width {
+  width: fit-content;
+  max-width: 100%;
 }
 
 .zui-drawing-surface {
@@ -369,121 +423,242 @@
   max-width: 100%;
   touch-action: none;
   background-color: #ffffff;
-  background-image: radial-gradient(
-    circle,
-    rgba(0, 0, 0, 0.07) 1px,
-    transparent 1px
-  );
+  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.09) 1px, transparent 1px);
   background-size: 20px 20px;
 }
 
-/*
- * Dark mode (zui `.dark` class convention). The drawing surface, the color
- * swatches, and the inline text input are darkened Excalidraw-style 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 .zui-drawing-canvas {
-  background: #18181b;
-}
-
-.dark .zui-drawing-surface,
-.dark .zui-drawing-swatch,
-.dark .zui-drawing-text-input {
-  filter: invert(93%) hue-rotate(180deg);
+.zui-drawing-shape {
+  transition: filter 0.12s ease;
 }
 
-.dark .zui-drawing-toolbar-group {
-  background: #232329;
-  border-color: rgba(255, 255, 255, 0.1);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+.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));
 }
 
-.dark .zui-drawing-tool {
-  color: #e3e3e8;
+.zui-drawing-handle {
+  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
 }
 
-.dark .zui-drawing-tool:hover {
-  background: rgba(255, 255, 255, 0.08);
+.zui-drawing-ghost {
+  opacity: 0.55;
+  transition: opacity 0.12s ease;
 }
 
-.dark .zui-drawing-tool.is-active {
-  background: #45437a;
-  color: #dcdaff;
+.zui-drawing-ghost:hover {
+  opacity: 1;
 }
 
-.dark .zui-drawing-swatch-label {
-  color: rgba(255, 255, 255, 0.55);
+.zui-drawing-bind-target {
+  animation: zui-drawing-pulse 0.9s ease-in-out infinite alternate;
 }
 
-.dark .zui-drawing-resize {
-  background: rgba(255, 255, 255, 0.2);
+@keyframes zui-drawing-pulse {
+  from {
+    stroke-opacity: 0.55;
+  }
+  to {
+    stroke-opacity: 1;
+  }
 }
 
-.dark .zui-drawing-resize:hover {
-  background: rgba(255, 255, 255, 0.35);
+@keyframes zui-drawing-pop {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 
+/* Floating toolbar */
 .zui-drawing-toolbar {
   position: absolute;
-  top: 0.5rem;
-  left: 0.5rem;
-  right: 0.5rem;
+  top: 0.625rem;
+  left: 0.625rem;
+  right: 0.625rem;
   z-index: 5;
   display: flex;
   flex-wrap: wrap;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.5rem;
   pointer-events: none;
 }
 
-.zui-drawing-toolbar-group {
+.zui-drawing-toolbar-group,
+.zui-drawing-props {
   display: flex;
   align-items: center;
   gap: 0.125rem;
   padding: 0.25rem;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 0.5rem;
-  background: #ffffff;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+  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;
 }
 
-/* Canvas-level controls (width) sit at the far right of the toolbar row */
 .zui-drawing-toolbar-group-end {
   margin-left: auto;
 }
 
+.zui-drawing-toolbar-divider {
+  width: 1px;
+  height: 1.125rem;
+  margin: 0 0.25rem;
+  background: rgba(0, 0, 0, 0.1);
+}
+
 .zui-drawing-tool {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
+  width: 1.875rem;
+  height: 1.875rem;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: 0.5rem;
   background: transparent;
   color: #1e1e1e;
   cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease,
+    transform 0.12s ease;
 }
 
 .zui-drawing-tool:hover {
   background: rgba(0, 0, 0, 0.06);
 }
 
+.zui-drawing-tool:active {
+  transform: scale(0.94);
+}
+
 .zui-drawing-tool.is-active {
-  background: #e0dfff;
+  background: color-mix(in srgb, var(--zui-drawing-accent) 16%, transparent);
   color: #4a47b1;
 }
 
+.zui-drawing-tool.is-success {
+  color: #2f9e44;
+}
+
 .zui-drawing-tool-danger {
   color: #e03131;
 }
 
+.zui-drawing-tool-danger:hover {
+  background: rgba(224, 49, 49, 0.1);
+}
+
+.zui-drawing-tool-more {
+  width: 2.375rem;
+}
+
+.zui-drawing-caret {
+  position: absolute;
+  right: 0.3rem;
+  bottom: 0.3rem;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-top: 4px solid currentColor;
+  opacity: 0.6;
+}
+
+.zui-drawing-more {
+  position: relative;
+}
+
+.zui-drawing-popover {
+  position: absolute;
+  top: calc(100% + 0.375rem);
+  left: 0;
+  z-index: 7;
+  display: flex;
+  flex-direction: column;
+  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;
+}
+
+.zui-drawing-popover-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: #1e1e1e;
+  font-size: 0.8125rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.12s ease;
+}
+
+.zui-drawing-popover-item:hover {
+  background: rgba(0, 0, 0, 0.06);
+}
+
+.zui-drawing-popover-item.is-active {
+  background: color-mix(in srgb, var(--zui-drawing-accent) 16%, transparent);
+  color: #4a47b1;
+}
+
+/* Contextual property bar: its own row under the tools */
+.zui-drawing-props-host {
+  flex-basis: 100%;
+  display: flex;
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition:
+    opacity 0.16s ease,
+    transform 0.16s ease;
+}
+
+.zui-drawing-props-host.is-visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.zui-drawing-props {
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.25rem 0.375rem;
+}
+
+.zui-drawing-props-group {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+
+.zui-drawing-props-group + .zui-drawing-props-group {
+  padding-left: 0.375rem;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 .zui-drawing-swatch-label {
-  margin: 0 0.25rem;
+  margin: 0 0.25rem 0 0.125rem;
   font-size: 0.6875rem;
+  letter-spacing: 0.02em;
   color: rgba(0, 0, 0, 0.5);
   user-select: none;
 }
@@ -491,58 +666,173 @@
 .zui-drawing-swatch {
   width: 1.125rem;
   height: 1.125rem;
-  margin: 0 0.0625rem;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 0.3125rem;
-  cursor: pointer;
+  margin: 0 0.125rem;
   padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.14);
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    transform 0.12s ease,
+    box-shadow 0.12s ease;
+}
+
+.zui-drawing-swatch:hover {
+  transform: scale(1.12);
 }
 
 .zui-drawing-swatch.is-active {
-  outline: 2px solid #6965db;
-  outline-offset: 1px;
+  box-shadow:
+    0 0 0 2px #ffffff,
+    0 0 0 3.5px var(--zui-drawing-accent);
 }
 
 .zui-drawing-swatch.is-transparent {
   background-image: linear-gradient(
     45deg,
-    transparent 46%,
-    #e03131 46%,
-    #e03131 54%,
-    transparent 54%
+    transparent 44%,
+    #e03131 44%,
+    #e03131 56%,
+    transparent 56%
   );
 }
 
+/* Empty state */
+.zui-drawing-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 2rem;
+  font-size: 0.8125rem;
+  color: rgba(0, 0, 0, 0.4);
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Inline text editing */
+.zui-drawing-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform-origin: top left;
+  pointer-events: none;
+}
+
 .zui-drawing-text-input {
   position: absolute;
   z-index: 6;
-  padding: 2px 4px;
-  border: 1px dashed #6965db;
-  border-radius: 0.25rem;
-  background: rgba(255, 255, 255, 0.9);
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  line-height: 1.35;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  outline: 1.5px dashed var(--zui-drawing-accent, #6965db);
+  outline-offset: 3px;
+  background: rgba(255, 255, 255, 0.85);
+  color: inherit;
   resize: none;
-  outline: none;
   overflow: hidden;
-  white-space: pre;
+  box-sizing: content-box;
+  pointer-events: auto;
 }
 
+.zui-drawing-text-input::placeholder {
+  color: currentColor;
+  opacity: 0.35;
+}
+
+/* Canvas height grip (bottom-right) */
 .zui-drawing-resize {
   position: absolute;
-  bottom: 0.25rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 3rem;
-  height: 0.375rem;
-  border-radius: 999px;
-  background: rgba(0, 0, 0, 0.15);
+  right: 0.375rem;
+  bottom: 0.375rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.375rem;
+  color: #1e1e1e;
+  opacity: 0.35;
   cursor: ns-resize;
   touch-action: none;
+  transition:
+    opacity 0.12s ease,
+    background-color 0.12s ease;
 }
 
 .zui-drawing-resize:hover {
-  background: rgba(0, 0, 0, 0.3);
+  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.06);
+}
+
+/*
+ * 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 .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-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;
 }
 
 .zui-text-editor-textarea {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "ZUI — A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,7 +15,7 @@
   ],
   "scripts": {
     "build": "tsup",
-    "test": "node tests/roundtrip.mjs"
+    "test": "node tests/roundtrip.mjs && node --test tests/*.test.mjs"
   },
   "exports": {
     ".": {