@zeyos/zx 2.2.1 → 3.0.0

package/src/components/split-view/split-view.js

@@ -1,12 +1,10 @@
 import { Component } from '../../core/component.js';
+export { resolveSize } from '../../core/drag-axis.js';
+import { STEP, STEP_LARGE, dragAxis, resolveSize } from '../../core/drag-axis.js';
 import { h, restoreTarget, snapshotTarget } from '../../core/dom.js';
 import { storage } from '../../core/storage.js';
 import { uid } from '../../core/util.js';
 
-/** Pixels an arrow key moves the divider. */
-const STEP = 16;
-/** Pixels a shifted arrow key moves the divider. */
-const STEP_LARGE = 64;
 /** Storage namespace shared by every split view that opted into persistence. */
 const STORAGE_NAMESPACE = 'split-view';
 
@@ -79,6 +77,8 @@ export class SplitView extends Component {
   #observer = null;
   /** @type {ReturnType<typeof storage>|null} */
   #store = null;
+  /** @type {ReturnType<typeof dragAxis>|null} */
+  #drag = null;
 
   /**
    * Creates a split view, or turns an existing element into one.
@@ -102,11 +102,33 @@ export class SplitView extends Component {
     }
 
     const divider = this.refs.divider;
-    this.listen(divider, 'pointerdown', (event) => this.#onPointerDown(/** @type {PointerEvent} */ (event)));
-    this.listen(divider, 'pointermove', (event) => this.#onPointerMove(/** @type {PointerEvent} */ (event)));
-    this.listen(divider, 'pointerup', (event) => this.#endDrag(/** @type {PointerEvent} */ (event)));
-    this.listen(divider, 'pointercancel', (event) => this.#endDrag(/** @type {PointerEvent} */ (event)));
-    this.listen(divider, 'keydown', (event) => this.#onKeyDown(/** @type {KeyboardEvent} */ (event)));
+    this.#drag = dragAxis(divider, {
+      orientation: this._orientation,
+      disabled: () => this._disabled,
+      onStart: () => {
+        this._startSize = this.getSize();
+        /** @type {HTMLElement} */ (this.el).dataset.dragging = 'true';
+      },
+      onMove: (delta) => this.#trackDelta(delta, false),
+      onEnd: (delta, moved) => {
+        // A drag that ends back where it started still has a final position to restore.
+        if (moved) this.#trackDelta(delta, true);
+        delete /** @type {HTMLElement} */ (this.el).dataset.dragging;
+        if (!moved) return;
+        this.#persist();
+        this.#emitResizeEnd();
+      },
+      onStep: (direction, large) => this.#stepBy(direction * (large ? STEP_LARGE : STEP)),
+      onJump: (edge) => this.#jumpTo(edge),
+      onActivate: () => {
+        if (!this.options.collapsible) return;
+        if (this._collapsed === null) {
+          this.collapse(/** @type {'start'|'end'} */ (this.options.collapsible));
+        } else {
+          this.expand();
+        }
+      }
+    });
     this.listen(divider, 'dblclick', () => this.#onDoubleClick());
 
     if (typeof ResizeObserver === 'function') {
@@ -133,16 +155,8 @@ export class SplitView extends Component {
     this._collapsed = null;
     this._disabled = Boolean(options.disabled);
     this._destroyed = false;
-    this._dragging = false;
-    /** Handle of the frame a pending drag update is scheduled in; `0` if none. */
-    this._frame = 0;
-    /** @type {number|null} */
-    this._pointerId = null;
-    this._startClient = 0;
+    /** Start-pane size when the current drag began, in pixels. */
     this._startSize = 0;
-    this._pointerClient = 0;
-    /** Whether the pointer left its starting position, which separates a drag from a click. */
-    this._moved = false;
     /** Container size of the last observer pass; `-1` forces the next one to run. */
     this._lastTotal = -1;
 
@@ -307,7 +321,8 @@ export class SplitView extends Component {
    */
   disable() {
     this._disabled = true;
-    this.#endDrag(null);
+    this.#drag?.cancel();
+    delete /** @type {HTMLElement} */ (this.el).dataset.dragging;
     this.refs.divider.setAttribute('aria-disabled', 'true');
     this.refs.divider.setAttribute('tabindex', '-1');
     return this;
@@ -328,11 +343,8 @@ export class SplitView extends Component {
   destroy() {
     if (this._destroyed) return;
     this._destroyed = true;
-    if (this._frame !== 0) {
-      cancelAnimationFrame(this._frame);
-      this._frame = 0;
-    }
-    this.#releasePointer();
+    this.#drag?.destroy();
+    this.#drag = null;
     this.#observer?.disconnect();
     this.#observer = null;
     super.destroy();
@@ -390,55 +402,20 @@ export class SplitView extends Component {
     return this;
   }
 
-  /** @param {PointerEvent} event @returns {void} */
-  #onPointerDown(event) {
-    if (this._disabled || this._dragging || event.button !== 0) return;
-    // No preventDefault(): cancelling pointerdown suppresses the compatibility mouse events the
-    // double-click reset is built on. `user-select: none` on the divider stops the text selection
-    // this would otherwise be guarding against.
-    this._dragging = true;
-    this._pointerId = event.pointerId;
-    this._startClient = axisClient(event, this._orientation);
-    this._pointerClient = this._startClient;
-    this._startSize = this.getSize();
-    this._moved = false;
-    /** @type {HTMLElement} */ (this.el).dataset.dragging = 'true';
-    try {
-      this.refs.divider.setPointerCapture(event.pointerId);
-    } catch {
-      // A pointer that ended between the event and this call cannot be captured; the drag simply
-      // finishes on the next pointerup.
-    }
-  }
-
-  /** @param {PointerEvent} event @returns {void} */
-  #onPointerMove(event) {
-    if (!this._dragging || event.pointerId !== this._pointerId) return;
-    this._pointerClient = axisClient(event, this._orientation);
-    if (this._pointerClient !== this._startClient) this._moved = true;
-    if (this._frame !== 0) return;
-    // One write and at most one `resize` per frame, however fast the pointer reports.
-    this._frame = requestAnimationFrame(() => {
-      this._frame = 0;
-      this.#trackPointer(false);
-    });
-  }
-
   /**
-   * Clamps the pointer position into a legal size and applies it.
+   * Applies a pointer delta as a new start-pane size.
+   * @param {number} delta Pixels travelled along the axis since the drag began.
    * @param {boolean} settle Whether to apply the snap radius, which only makes sense at drag end.
    * @returns {void}
    */
-  #trackPointer(settle) {
-    if (!this._dragging || this._destroyed) return;
+  #trackDelta(delta, settle) {
+    if (this._destroyed) return;
     const { total, divider, min, max } = this.#metrics();
     if (total <= 0) return;
     // Dragging a folded pane brings it back rather than doing nothing; a plain click does not,
     // because this runs only once the pointer has actually moved.
     if (this._collapsed !== null) this.expand();
-    let next = clampSize({
-      size: this._startSize + (this._pointerClient - this._startClient), min, max, total, divider
-    });
+    let next = clampSize({ size: this._startSize + delta, min, max, total, divider });
     if (settle) {
       next = clampSize({
         size: snapSize(next, this.#snapTargets(total, divider), Number(this.options.snap)),
@@ -451,91 +428,36 @@ export class SplitView extends Component {
   }
 
   /**
-   * @param {number} total
-   * @param {number} divider
-   * @returns {number[]}
+   * Moves the divider by a keyboard step and reports it as a completed resize.
+   * @param {number} amount Signed pixels.
+   * @returns {void}
    */
-  #snapTargets(total, divider) {
-    const { min, max } = this.#metrics();
-    const bounds = sizeBounds({ min, max, total, divider });
-    const targets = [bounds.min, bounds.max];
-    const initial = resolveSize(this.options.size, total);
-    if (Number.isFinite(initial)) targets.unshift(initial);
-    return targets;
+  #stepBy(amount) {
+    const { total, divider, min, max } = this.#metrics();
+    if (total <= 0) return;
+    if (this._collapsed !== null) this.expand();
+    this.#commit(clampSize({ size: this.getSize() + amount, min, max, total, divider }), total);
   }
 
   /**
-   * Finishes a drag: flushes the last frame, applies the snap radius, releases the capture,
-   * persists, and reports. A press that never moved is a click, not a resize, and reports nothing.
-   * @param {PointerEvent|null} event Ending pointer event, or null when ending programmatically.
+   * Sends the divider to one end of its travel.
+   * @param {'min'|'max'} edge Bound to jump to.
    * @returns {void}
-   * @fires SplitView#resizeend
    */
-  #endDrag(event) {
-    if (!this._dragging) return;
-    if (event && event.pointerId !== this._pointerId) return;
-    if (this._frame !== 0) {
-      cancelAnimationFrame(this._frame);
-      this._frame = 0;
-    }
-    if (event) this._pointerClient = axisClient(event, this._orientation);
-    const moved = this._moved;
-    // A drag that ends back where it started still has a final position to restore and report.
-    if (moved) this.#trackPointer(true);
-    this._dragging = false;
-    this._moved = false;
-    this.#releasePointer();
-    delete /** @type {HTMLElement} */ (this.el).dataset.dragging;
-    if (!moved) return;
-    this.#persist();
-    this.#emitResizeEnd();
-  }
-
-  /** @returns {void} */
-  #releasePointer() {
-    const pointerId = this._pointerId;
-    this._pointerId = null;
-    if (pointerId === null) return;
-    try {
-      this.refs.divider.releasePointerCapture(pointerId);
-    } catch {
-      // The capture is already gone once the pointer was cancelled or the node was detached.
-    }
-  }
-
-  /** @param {KeyboardEvent} event @returns {void} */
-  #onKeyDown(event) {
-    if (this._disabled) return;
-    const key = event.key;
-
-    if (key === 'Enter' || key === ' ') {
-      if (!this.options.collapsible) return;
-      event.preventDefault();
-      if (this._collapsed === null) {
-        this.collapse(/** @type {'start'|'end'} */ (this.options.collapsible));
-      } else {
-        this.expand();
-      }
-      return;
-    }
-
-    const horizontal = this._orientation === 'horizontal';
-    const shrink = horizontal ? 'ArrowLeft' : 'ArrowUp';
-    const grow = horizontal ? 'ArrowRight' : 'ArrowDown';
-    if (key !== shrink && key !== grow && key !== 'Home' && key !== 'End') return;
-    event.preventDefault();
-    // A key that moves the divider implies the pane should be visible again.
-    if (this._collapsed !== null) this.expand();
-
+  #jumpTo(edge) {
     const { total, divider, min, max } = this.#metrics();
     if (total <= 0) return;
+    if (this._collapsed !== null) this.expand();
     const bounds = sizeBounds({ min, max, total, divider });
-    const step = event.shiftKey ? STEP_LARGE : STEP;
-    let next = bounds.min;
-    if (key === 'End') next = bounds.max;
-    else if (key !== 'Home') next = this.getSize() + (key === grow ? step : -step);
+    this.#commit(clampSize({ size: bounds[edge], min, max, total, divider }), total);
+  }
 
-    const size = clampSize({ size: next, min, max, total, divider });
+  /**
+   * @param {number} size
+   * @param {number} total
+   * @returns {void}
+   */
+  #commit(size, total) {
     if (size === this._size) return;
     this.#applySize(size);
     this.emit('resize', { size, ratio: size / total });
@@ -543,6 +465,20 @@ export class SplitView extends Component {
     this.#emitResizeEnd();
   }
 
+  /**
+   * @param {number} total
+   * @param {number} divider
+   * @returns {number[]}
+   */
+  #snapTargets(total, divider) {
+    const { min, max } = this.#metrics();
+    const bounds = sizeBounds({ min, max, total, divider });
+    const targets = [bounds.min, bounds.max];
+    const initial = resolveSize(this.options.size, total);
+    if (Number.isFinite(initial)) targets.unshift(initial);
+    return targets;
+  }
+
   /**
    * Resets the divider to the initial `size`. A percentage goes back to being a percentage rather
    * than to the pixel value it happens to work out at, so the pane keeps tracking the container.
@@ -583,7 +519,7 @@ export class SplitView extends Component {
    * @returns {void}
    */
   #onContainerResize() {
-    if (this._destroyed || this._dragging) return;
+    if (this._destroyed || this.#drag?.isDragging()) return;
     const { total, divider, min, max } = this.#metrics();
     if (total <= 0 || total === this._lastTotal) return;
     this._lastTotal = total;
@@ -688,27 +624,6 @@ export function clampSize({ size, min = 0, max = null, total = 0, divider = 0 })
   return Math.min(bounds.max, Math.max(bounds.min, requested));
 }
 
-/**
- * Resolves a size option to pixels without touching the DOM.
- *
- * Numbers, bare numeric strings, and `px` lengths are pixels; a percentage resolves against
- * `total`. Every other CSS length — `rem`, `vh`, `calc()` — needs the browser, so it returns `NaN`
- * and the caller hands the value to CSS instead of guessing at it.
- * @param {number|string} value Size option.
- * @param {number} total Container size along the split axis, in pixels.
- * @returns {number} Pixels, or `NaN` when only the browser can resolve the value.
- */
-export function resolveSize(value, total) {
-  if (typeof value === 'number') return Number.isFinite(value) ? value : Number.NaN;
-  if (typeof value !== 'string') return Number.NaN;
-  const match = /^([+-]?(?:\d+\.?\d*|\.\d+))(px|%)?$/i.exec(value.trim());
-  if (!match) return Number.NaN;
-  const amount = Number(match[1]);
-  if (!Number.isFinite(amount)) return Number.NaN;
-  if ((match[2] ?? '').toLowerCase() !== '%') return amount;
-  const span = Number(total);
-  return Number.isFinite(span) ? (amount / 100) * span : Number.NaN;
-}
 
 /**
  * Pulls a size onto the nearest target within a radius, leaving it alone when nothing is close.

package/src/components/stepper/stepper.css

@@ -175,13 +175,23 @@ button.zx-stepper__control:disabled {
   gap: var(--zx-space-2);
 }
 
+/* Every step but the last one grows, and inside it only the connector can take the extra, so the
+   rail spans its container: the labels stay their own width and the rules stretch between them.
+   The last step is left shrink-to-fit — growing it would strand the space behind its label. */
 .zx-stepper[data-orientation="horizontal"] .zx-stepper__step {
   flex: 0 1 auto;
   gap: var(--zx-space-2);
 }
 
-/* The connector doubles as the flexible gap, so the steps size to their labels and the rules
-   absorb whatever is left over. */
+.zx-stepper[data-orientation="horizontal"] .zx-stepper__step:not(:last-child) {
+  flex: 1 1 auto;
+}
+
+/* The slack belongs to the connector, not to the label, so hover chrome keeps hugging the text. */
+.zx-stepper[data-orientation="horizontal"] .zx-stepper__control {
+  flex: 0 1 auto;
+}
+
 .zx-stepper[data-orientation="horizontal"] .zx-stepper__step:not(:last-child)::after {
   content: "";
   flex: 1 1 var(--zx-space-6);

package/src/components/tabbox/tabbox.css

@@ -249,9 +249,19 @@
   text-align: center;
 }
 
-.zx-tabbox__close {
-  margin-inline-start: calc(-1 * var(--zx-space-1));
-  color: var(--zx-color-text-muted);
+/* Chrome comes from the shared .zx-icon-btn ghost utility; only the box is reset here, because
+   a full control-height square would widen every closable tab. The extra .zx-tabbox raises the
+   specificity to match `.zx-scope .zx-icon-btn` in base.css, which sets the size. */
+.zx-tabbox .zx-tabbox__close {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  margin-inline: calc(-1 * var(--zx-space-1));
+}
+
+/* The tab under the pointer is already filled with bg-hover, so the close control needs a tint
+   that still reads on top of it — in both themes, over any variant's tab background. */
+.zx-tabbox .zx-tabbox__close:hover {
+  background: color-mix(in srgb, var(--zx-color-text) 12%, transparent);
 }
 
 /* ----------------------------------------------------------------------- panels -- */

package/src/components/tabbox/tabbox.js

@@ -11,7 +11,7 @@ import { uid } from '../../core/util.js';
  * @property {string} title Visible tab label.
  * @property {TabContent} content Panel content or a lazy content factory.
  * @property {string} [icon] Icon name passed to `icon()`, shown before the title.
- * @property {boolean} [closable=false] Whether Delete can close the tab.
+ * @property {boolean} [closable=false] Whether the tab shows a close control and Delete closes it.
  * @property {boolean} [disabled=false] Whether the tab is unavailable.
  */
 
@@ -38,7 +38,8 @@ const VARIANTS = new Set(['divided', 'bracket', 'line', 'segmented']);
  *   control, for a toolbar or card header.
  * @property {boolean} [keepAlive=true] Keep inactive panel elements mounted.
  * @property {(event: CustomEvent<{name: string, previous: string|null}>) => void} [onchange] Change callback.
- * @property {(event: CustomEvent<{name: string}>) => void} [onclose] Close callback.
+ * @property {(event: CustomEvent<{name: string}>) => void} [onclose] Close callback, fired when the
+ *   user dismisses a closable tab.
  */
 
 /**
@@ -121,6 +122,10 @@ export class Tabbox extends Component {
       if (!tab || !tablist.contains(tab)) return;
       const record = this._recordForTab(tab);
       if (!record || record.definition.disabled) return;
+      if (event.target.closest?.('.zx-tabbox__close')) {
+        this._closeTab(record);
+        return;
+      }
       this._setFocused(record);
       this.openTab(record.definition.name);
     });
@@ -168,9 +173,13 @@ export class Tabbox extends Component {
     }
     children.push(title, badge);
     if (normalized.closable) {
+      // Deliberately a span and not a nested <button>: the tab itself is a button, and buttons
+      // cannot nest. The tablist click handler routes clicks that land in here to _closeTab(),
+      // and it stays out of the accessibility tree because Delete is the keyboard equivalent.
       children.push(h('span', {
-        class: 'zx-tabbox__close',
-        ariaHidden: 'true'
+        class: 'zx-tabbox__close zx-icon-btn',
+        ariaHidden: 'true',
+        title: 'Close'
       }, icon('x', { size: 14 })));
     }
     const tab = /** @type {HTMLButtonElement} */ (h('button', {
@@ -353,14 +362,28 @@ export class Tabbox extends Component {
     }
     if (event.key === 'Delete' && current.definition.closable) {
       event.preventDefault();
-      const index = this._tabs.indexOf(current);
-      if (!this._removeTab(current.definition.name, true)) return;
-      const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
-      const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
-      if (focusTarget) this._setFocused(focusTarget);
+      this._closeTab(current);
     }
   }
 
+  /**
+   * Closes a tab on a user gesture, keeping roving focus inside the tablist.
+   * @param {TabRecord} record Tab to close.
+   * @returns {void}
+   * @fires Tabbox#close
+   */
+  _closeTab(record) {
+    const index = this._tabs.indexOf(record);
+    // Clicking the close control focuses its tab first in most browsers, so the element about to
+    // be removed holds the focus; left alone, focus would fall back to <body>.
+    const held = record.tab.contains(document.activeElement);
+    if (!this._removeTab(record.definition.name, true)) return;
+    const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
+    const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
+    // Roving tabindex has to move even for a mouse close, or Tab has no entry point left.
+    if (focusTarget) this._setFocused(focusTarget, held);
+  }
+
   /** @param {string} name @param {boolean} emitClose @returns {boolean} */
   _removeTab(name, emitClose) {
     const record = this._find(name);
@@ -453,7 +476,8 @@ export class Tabbox extends Component {
  */
 
 /**
- * Fired after a closable tab is removed through the keyboard.
+ * Fired after the user removes a closable tab, through its close control or Delete.
+ * `removeTab()` is silent.
  * @event Tabbox#close
  * @type {CustomEvent<{name: string}>}
  */

package/src/components/table/table.css

@@ -177,6 +177,49 @@
   text-align: center;
 }
 
+/* --- Hierarchical line items --------------------------------------------------------------- */
+
+.zx-table__tree-cell {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: var(--zx-space-1);
+  padding-inline-start: calc(var(--zx-table-depth, 0) * var(--zx-space-4));
+}
+
+.zx-table__tree-toggle,
+.zx-table__tree-spacer {
+  inline-size: 24px;
+  block-size: 24px;
+  flex: 0 0 24px;
+}
+
+.zx-table__tree-toggle {
+  display: inline-grid;
+  min-block-size: 0;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--zx-radius-sm);
+  background: transparent;
+  color: var(--zx-color-text-muted);
+  cursor: pointer;
+}
+
+.zx-table__tree-toggle:hover {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-table__tree-toggle:focus-visible {
+  outline: 0;
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-table__cell-content {
+  min-inline-size: 0;
+}
+
 /* --- Inline editing (Table editMode) -------------------------------------------------------- */
 
 /* Reserve a control-sized content box in every body cell as soon as the table is editable, so