@zuilib/text-editor 0.9.0 → 0.10.1

package/dist/styles.css

@@ -366,16 +366,20 @@
 }
 
 /*
- * 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 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;
   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));
@@ -383,7 +387,151 @@
   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%);
+  transform: translateY(calc(-100% - 0.25rem));
+}
+
+/*
+ * 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;
+  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.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;
+  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;
+  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,
+    border-color 120ms ease,
+    scale 120ms ease;
+}
+
+.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-handle,
+.zui-table-rail-handle:focus-visible {
+  opacity: 1;
+}
+
+.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);
+  scale: 1.1;
+  outline: none;
+}
+
+.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;
+  opacity: 0;
+  pointer-events: none;
+  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-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-handle,
+  .zui-table-rail-preview {
+    transition: none;
+  }
 }
 
 /*

package/package.json

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