@zuilib/text-editor 0.8.0 → 0.10.0

package/dist/styles.css

@@ -366,16 +366,19 @@
 }
 
 /*
- * Floating table settings (width, density), straddling the top-right corner
- * of the table the caret is in (positioned within .zui-text-editor-main). 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).
+ * 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).
  */
 .zui-table-settings {
   position: absolute;
   z-index: 5;
   display: flex;
+  align-items: center;
   gap: 0.125rem;
   padding: 0.125rem;
   border: 1px solid var(--border, color-mix(in srgb, currentColor 12%, transparent));
@@ -386,6 +389,107 @@
   transform: translateY(-70%);
 }
 
+.zui-table-settings > .zui-text-editor-toolbar-divider {
+  margin: 0 0.125rem;
+}
+
+/*
+ * 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.
+ */
+.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-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),
+    height 140ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+.zui-table-rail-add {
+  position: absolute;
+  left: 2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 1px solid var(--border, color-mix(in srgb, currentColor 14%, transparent));
+  border-radius: 999px;
+  background: var(--popover, #ffffff);
+  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),
+    opacity 140ms ease,
+    background-color 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease,
+    scale 120ms ease;
+}
+
+.zui-table-rail-add.is-resting {
+  opacity: 0.4;
+}
+
+.zui-table-rail:hover .zui-table-rail-add,
+.zui-table-rail-add:focus-visible {
+  opacity: 1;
+}
+
+.zui-table-rail-add:hover,
+.zui-table-rail-add:focus-visible {
+  border-color: var(--zui-table-rail-accent);
+  background: var(--zui-table-rail-accent);
+  color: var(--zui-table-rail-accent-foreground);
+  scale: 1.1;
+  outline: none;
+}
+
+.zui-table-rail-line {
+  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),
+    opacity 120ms ease;
+}
+
+.zui-table-rail-add:hover + .zui-table-rail-line,
+.zui-table-rail-add:focus-visible + .zui-table-rail-line {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zui-table-rail-marker,
+  .zui-table-rail-add,
+  .zui-table-rail-line {
+    transition: none;
+  }
+}
+
 /*
  * Drawing canvas.
  *
@@ -884,3 +988,20 @@
 .zui-token-meta { color: var(--zui-code-meta); }
 .zui-token-inserted { color: var(--zui-code-inserted); background: var(--zui-code-inserted-background); }
 .zui-token-deleted { color: var(--zui-code-deleted); background: var(--zui-code-deleted-background); }
+
+/*
+ * Ink drawing style (`drawingStyle="ink"`). Geometry is handled by the
+ * renderer (drawing/ink.ts); the stylesheet only switches the face: Recursive
+ * on its casual/cursive axes when the host loads it, the regular font
+ * otherwise. Load it with e.g.
+ * https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..1000,0..1,0..1,0..1
+ */
+.zui-drawing-canvas.is-ink {
+  --zui-drawing-font: 'Recursive', ui-sans-serif, system-ui, sans-serif;
+  --zui-drawing-grid: rgba(0, 0, 0, 0.06);
+}
+
+.zui-drawing-canvas.is-ink :is(.zui-drawing-surface text, .zui-drawing-text-input) {
+  font-variation-settings: 'CASL' 1, 'CRSV' 1, 'MONO' 0, 'wght' 440, 'slnt' -3;
+  letter-spacing: 0.01em;
+}

package/package.json

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