@zuilib/text-editor 0.10.0 → 0.11.0

package/dist/styles.css

@@ -369,10 +369,11 @@
  * Floating table controls (positioned within .zui-text-editor-main, so they
  * scroll with the document; TableControlsPlugin.tsx).
  *
- * The toolbar — layout presets and row actions — straddles the top-right
- * corner of the table the caret is in. It stays inside the table's own top
- * margin so it never covers the previous paragraph. The settings
- * themselves are an inline style on the <table> (see tableSettings.ts).
+ * 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).
  */
 .zui-table-settings {
   position: absolute;
@@ -386,44 +387,52 @@
   background: var(--popover, #ffffff);
   color: var(--popover-foreground, inherit);
   box-shadow: var(--shadow-medium, 0 1px 4px rgba(0, 0, 0, 0.08));
-  transform: translateY(-70%);
-}
-
-.zui-table-settings > .zui-text-editor-toolbar-divider {
-  margin: 0 0.125rem;
+  transform: translateY(calc(-100% - 0.25rem));
 }
 
 /*
- * The row rail hugs the table's left edge, inside the pane gutter. A bar
- * marks the caret's row and slides with it; the `+` handle rests under the
- * last row and, while the rail is hovered, snaps to the nearest row
- * boundary. Hovering the handle previews the insertion as a line across
- * the table. Motion is short and eased so the controls feel attached to
- * the table rather than popping in.
+ * Rails: the row rail hugs the table's left edge (inside the pane gutter),
+ * the column rail its top edge (inside the block margin). A bar marks the
+ * caret's row / column and slides with it. One handle rests after the last
+ * lane as a `+` and, while the rail is hovered, follows the pointer: a `+`
+ * near a boundary (hover previews the insertion line), a `−` over a lane
+ * (hover tints the lane it will remove). Motion is short and eased so the
+ * controls feel attached to the table rather than popping in.
  */
 .zui-table-rail {
   position: absolute;
   z-index: 4;
   --zui-table-rail-accent: var(--primary, #6965db);
   --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-marker {
   position: absolute;
-  right: 5px;
-  width: 3px;
   border-radius: 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),
+    width 140ms cubic-bezier(0.2, 0, 0, 1),
     height 140ms cubic-bezier(0.2, 0, 0, 1);
 }
 
-.zui-table-rail-add {
+.zui-table-rail.is-row .zui-table-rail-marker {
+  right: 5px;
+  width: 3px;
+}
+
+.zui-table-rail.is-column .zui-table-rail-marker {
+  bottom: 5px;
+  height: 3px;
+}
+
+.zui-table-rail-handle {
   position: absolute;
-  left: 2px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -436,9 +445,9 @@
   color: var(--popover-foreground, inherit);
   box-shadow: var(--shadow-medium, 0 1px 4px rgba(0, 0, 0, 0.08));
   cursor: pointer;
-  transform: translateY(-50%);
   transition:
     top 140ms cubic-bezier(0.2, 0, 0, 1),
+    left 140ms cubic-bezier(0.2, 0, 0, 1),
     opacity 140ms ease,
     background-color 120ms ease,
     color 120ms ease,
@@ -446,17 +455,27 @@
     scale 120ms ease;
 }
 
-.zui-table-rail-add.is-resting {
+.zui-table-rail.is-row .zui-table-rail-handle {
+  left: 2px;
+  transform: translateY(-50%);
+}
+
+.zui-table-rail.is-column .zui-table-rail-handle {
+  top: 2px;
+  transform: translateX(-50%);
+}
+
+.zui-table-rail-handle.is-resting {
   opacity: 0.4;
 }
 
-.zui-table-rail:hover .zui-table-rail-add,
-.zui-table-rail-add:focus-visible {
+.zui-table-rail:hover .zui-table-rail-handle,
+.zui-table-rail-handle:focus-visible {
   opacity: 1;
 }
 
-.zui-table-rail-add:hover,
-.zui-table-rail-add:focus-visible {
+.zui-table-rail-handle:hover,
+.zui-table-rail-handle:focus-visible {
   border-color: var(--zui-table-rail-accent);
   background: var(--zui-table-rail-accent);
   color: var(--zui-table-rail-accent-foreground);
@@ -464,28 +483,53 @@
   outline: none;
 }
 
-.zui-table-rail-line {
+.zui-table-rail-handle.is-delete:hover,
+.zui-table-rail-handle.is-delete:focus-visible {
+  border-color: var(--zui-table-rail-danger);
+  background: var(--zui-table-rail-danger);
+  color: var(--zui-table-rail-danger-foreground);
+}
+
+/* Insertion line, or the tinted row / column about to be removed */
+.zui-table-rail-preview {
   position: absolute;
-  height: 2px;
-  border-radius: 1px;
-  background: var(--zui-table-rail-accent);
   opacity: 0;
   pointer-events: none;
-  transform: translateY(-50%);
   transition:
     top 140ms cubic-bezier(0.2, 0, 0, 1),
+    left 140ms cubic-bezier(0.2, 0, 0, 1),
     opacity 120ms ease;
 }
 
-.zui-table-rail-add:hover + .zui-table-rail-line,
-.zui-table-rail-add:focus-visible + .zui-table-rail-line {
+.zui-table-rail-preview.is-insert {
+  border-radius: 1px;
+  background: var(--zui-table-rail-accent);
+}
+
+.zui-table-rail.is-row .zui-table-rail-preview.is-insert {
+  height: 2px;
+  transform: translateY(-50%);
+}
+
+.zui-table-rail.is-column .zui-table-rail-preview.is-insert {
+  width: 2px;
+  transform: translateX(-50%);
+}
+
+.zui-table-rail-preview.is-delete {
+  background: color-mix(in srgb, var(--zui-table-rail-danger) 10%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zui-table-rail-danger) 45%, transparent);
+}
+
+.zui-table-rail-handle:hover + .zui-table-rail-preview,
+.zui-table-rail-handle:focus-visible + .zui-table-rail-preview {
   opacity: 1;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .zui-table-rail-marker,
-  .zui-table-rail-add,
-  .zui-table-rail-line {
+  .zui-table-rail-handle,
+  .zui-table-rail-preview {
     transition: none;
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zuilib/text-editor",
-  "version": "0.10.0",
-  "description": "ZUI — A markdown editor component wrapping Lexical",
+  "version": "0.11.0",
+  "description": "ZUI \u2014 A markdown editor component wrapping Lexical",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -34,12 +34,15 @@
     "@lexical/rich-text": "^0.35.0",
     "@lexical/table": "^0.35.0",
     "@lexical/utils": "^0.35.0",
+    "@zuilib/tokens": "^0.0.1",
     "lexical": "^0.35.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
-  "dependencies": {
-    "@zuilib/core": "^0.0.0"
+  "peerDependenciesMeta": {
+    "@zuilib/tokens": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@lexical/code": "^0.35.0",
@@ -55,7 +58,8 @@
     "@types/react-dom": "^18.0.0 || ^19.0.0",
     "lexical": "^0.35.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@zuilib/tokens": "workspace:^"
   },
   "keywords": [
     "lexical",