@jackuait/blok 0.6.0-beta.9 → 0.7.0-beta.1

package/src/tools/table/ownership/table-event-broker.ts

@@ -0,0 +1,74 @@
+import type { TableOwnershipRegistry } from './table-ownership-registry';
+
+/**
+ * Block lifecycle event data routed through the broker.
+ * Keeps the shape generic — the broker doesn't interpret event content,
+ * it just routes based on block ownership.
+ */
+export interface BlockLifecycleEvent {
+  readonly type: string;
+  readonly [key: string]: unknown;
+}
+
+/**
+ * Handler callback for routed block lifecycle events.
+ */
+export type BlockEventHandler = (blockId: string, event: BlockLifecycleEvent) => void;
+
+/**
+ * Ownership-based event broker for table block lifecycle events.
+ *
+ * Instead of every table instance listening to global `'block changed'` events
+ * and using heuristics to determine if a block belongs to it, the broker:
+ *
+ * 1. Receives a single global event (one listener)
+ * 2. Resolves the owning table via the ownership registry (O(1) lookup)
+ * 3. Routes the event to the correct table subscriber
+ *
+ * This eliminates adjacency heuristics and cross-table interference.
+ */
+export class TableEventBroker {
+  private readonly registry: TableOwnershipRegistry;
+  private readonly subscribers = new Map<string, BlockEventHandler>();
+
+  constructor(registry: TableOwnershipRegistry) {
+    this.registry = registry;
+  }
+
+  /**
+   * Subscribe a table to receive block lifecycle events for its owned blocks.
+   */
+  subscribe(tableId: string, handler: BlockEventHandler): void {
+    this.subscribers.set(tableId, handler);
+  }
+
+  /**
+   * Unsubscribe a table from block lifecycle events.
+   */
+  unsubscribe(tableId: string): void {
+    this.subscribers.delete(tableId);
+  }
+
+  /**
+   * Route a block lifecycle event to the owning table's handler.
+   *
+   * If the block is not owned by any table, or no subscriber exists
+   * for the owning table, the event is silently dropped — no heuristic
+   * claim is attempted.
+   */
+  routeBlockEvent(blockId: string, event: BlockLifecycleEvent): void {
+    const owner = this.registry.getOwner(blockId);
+
+    if (owner === null) {
+      return;
+    }
+
+    const handler = this.subscribers.get(owner.tableId);
+
+    if (handler === undefined) {
+      return;
+    }
+
+    handler(blockId, event);
+  }
+}

package/src/tools/table/ownership/table-ownership-registry.ts

@@ -0,0 +1,126 @@
+import type { TableModel } from '../table-model';
+import type { CellContent } from '../types';
+
+/**
+ * Ownership entry for a block within a table cell.
+ */
+export interface BlockOwnership {
+  readonly tableId: string;
+  readonly row: number;
+  readonly col: number;
+}
+
+/**
+ * Deterministic block-to-table-cell ownership registry.
+ *
+ * Provides O(1) lookup: given a block ID, determine which table and cell
+ * owns it. This replaces adjacency heuristics in `TableCellBlocks` with
+ * a single source of truth for block ownership.
+ *
+ * The registry is global — all table instances share one registry so that
+ * multi-table ownership conflicts are detected immediately.
+ */
+export class TableOwnershipRegistry {
+  /** blockId → ownership info */
+  private readonly owners = new Map<string, BlockOwnership>();
+
+  /**
+   * Set or update ownership for a block.
+   * A block can only be owned by one table cell at a time.
+   */
+  setOwner(blockId: string, ownership: BlockOwnership): void {
+    this.owners.set(blockId, ownership);
+  }
+
+  /**
+   * Get the ownership info for a block.
+   * Returns null if the block is not tracked.
+   */
+  getOwner(blockId: string): BlockOwnership | null {
+    return this.owners.get(blockId) ?? null;
+  }
+
+  /**
+   * Remove ownership tracking for a block.
+   */
+  removeOwner(blockId: string): void {
+    this.owners.delete(blockId);
+  }
+
+  /**
+   * Check if a block is owned by a specific table.
+   */
+  isOwnedByTable(blockId: string, tableId: string): boolean {
+    const owner = this.owners.get(blockId);
+
+    return owner !== null && owner !== undefined && owner.tableId === tableId;
+  }
+
+  /**
+   * Get all block IDs owned by a specific table.
+   */
+  getBlocksForTable(tableId: string): string[] {
+    const result: string[] = [];
+
+    for (const [blockId, ownership] of this.owners) {
+      if (ownership.tableId === tableId) {
+        result.push(blockId);
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Reconcile the registry with a model snapshot for a specific table.
+   *
+   * After this call, the registry will exactly match the model's block-cell
+   * mapping for the given table. Stale entries for the table are removed,
+   * and entries for other tables are left untouched.
+   */
+  reconcileWithModel(tableId: string, model: TableModel): void {
+    // Remove all existing entries for this table
+    const toRemove: string[] = [];
+
+    for (const [blockId, ownership] of this.owners) {
+      if (ownership.tableId === tableId) {
+        toRemove.push(blockId);
+      }
+    }
+
+    for (const blockId of toRemove) {
+      this.owners.delete(blockId);
+    }
+
+    // Re-populate from model snapshot
+    const snapshot = model.snapshot();
+
+    snapshot.content.forEach((row, r) => {
+      row.forEach((cell, c) => {
+        const cellContent = cell as CellContent;
+
+        for (const blockId of cellContent.blocks) {
+          this.owners.set(blockId, { tableId, row: r, col: c });
+        }
+      });
+    });
+  }
+
+  /**
+   * Remove all blocks owned by a specific table.
+   * Used when a table is destroyed.
+   */
+  removeTable(tableId: string): void {
+    const toRemove: string[] = [];
+
+    for (const [blockId, ownership] of this.owners) {
+      if (ownership.tableId === tableId) {
+        toRemove.push(blockId);
+      }
+    }
+
+    for (const blockId of toRemove) {
+      this.owners.delete(blockId);
+    }
+  }
+}

package/src/tools/table/table-add-controls.ts

@@ -75,6 +75,7 @@ export class TableAddControls {
   private colHideTimeout: ReturnType<typeof setTimeout> | null = null;
   private rowVisible = false;
   private colVisible = false;
+  private interactive = true;
   private dragState: DragState | null = null;
 
   private boundMouseMove: (e: MouseEvent) => void;
@@ -89,6 +90,7 @@ export class TableAddControls {
   private onDragEnd: () => void;
   private boundPointerMove: (e: PointerEvent) => void;
   private boundPointerUp: (e: PointerEvent) => void;
+  private boundPointerCancel: (e: PointerEvent) => void;
   private boundRowPointerDown: (e: PointerEvent) => void;
   private boundColPointerDown: (e: PointerEvent) => void;
   private getNewColumnWidth: (() => number) | undefined;
@@ -111,6 +113,7 @@ export class TableAddControls {
     this.boundMouseLeave = this.handleMouseLeave.bind(this);
     this.boundPointerMove = this.handlePointerMove.bind(this);
     this.boundPointerUp = this.handlePointerUp.bind(this);
+    this.boundPointerCancel = this.handlePointerCancel.bind(this);
     this.boundRowPointerDown = (e: PointerEvent): void => this.handlePointerDown('row', e);
     this.boundColPointerDown = (e: PointerEvent): void => this.handlePointerDown('col', e);
 
@@ -118,7 +121,7 @@ export class TableAddControls {
     this.addColBtn = this.createAddColumnButton();
 
     this.wrapper.appendChild(this.addRowBtn);
-    this.grid.appendChild(this.addColBtn);
+    this.wrapper.appendChild(this.addColBtn);
     this.syncRowButtonWidth();
 
     this.wrapper.addEventListener('mousemove', this.boundMouseMove);
@@ -130,17 +133,51 @@ export class TableAddControls {
   }
 
   /**
-   * Match the add-row button width to the grid's explicit width.
-   * When the grid has a pixel width (from colWidths), the button must use
-   * the same value so it scrolls with the table instead of staying at 100%
-   * of the wrapper's visible area.
+   * Match the add-row button width and horizontal position to the grid.
+   *
+   * Pixel mode (colWidths set): clamp to the scroll container's visible
+   * width so the button never overflows the table boundary.
+   *
+   * Percent mode (no colWidths): clear `width` and use `left`/`right`
+   * constraints so the browser auto-sizes the button to the wrapper's
+   * content area, avoiding the wrapper's right padding.
    */
   public syncRowButtonWidth(): void {
     const gridWidth = this.grid.style.width;
 
-    this.addRowBtn.style.width = gridWidth && gridWidth.endsWith('px')
-      ? gridWidth
-      : '100%';
+    if (gridWidth && gridWidth.endsWith('px')) {
+      const numericWidth = parseFloat(gridWidth);
+      const scrollContainer = this.grid.parentElement;
+      const isInsideScrollContainer = scrollContainer !== null && scrollContainer !== this.wrapper;
+
+      /**
+       * When a scroll container exists and the grid overflows it,
+       * clamp to the visible width so the button stays within bounds.
+       * Guard clientWidth > 0 for pre-layout / jsdom environments.
+       */
+      const visibleWidth = isInsideScrollContainer && scrollContainer.clientWidth > 0
+        ? Math.min(numericWidth, scrollContainer.clientWidth)
+        : numericWidth;
+
+      this.addRowBtn.style.width = `${visibleWidth}px`;
+      this.addRowBtn.style.right = '';
+      this.addRowBtn.style.left = '0px';
+      this.addRowBtn.style.transform = '';
+
+      this.addColBtn.style.left = `${visibleWidth}px`;
+      this.addColBtn.style.right = '';
+    } else {
+      this.addRowBtn.style.width = '';
+      this.addRowBtn.style.left = '0px';
+      this.addRowBtn.style.transform = '';
+
+      const paddingRight = parseFloat(getComputedStyle(this.wrapper).paddingRight) || 0;
+
+      this.addRowBtn.style.right = `${paddingRight}px`;
+
+      this.addColBtn.style.left = '';
+      this.addColBtn.style.right = '-36px';
+    }
   }
 
   /**
@@ -159,6 +196,8 @@ export class TableAddControls {
    * Disables pointer events and hover effects during cell selection.
    */
   public setInteractive(interactive: boolean): void {
+    this.interactive = interactive;
+
     if (!interactive) {
       this.addRowBtn.style.pointerEvents = 'none';
       this.addColBtn.style.pointerEvents = 'none';
@@ -181,6 +220,7 @@ export class TableAddControls {
 
       target.removeEventListener('pointermove', this.boundPointerMove);
       target.removeEventListener('pointerup', this.boundPointerUp);
+      target.removeEventListener('pointercancel', this.boundPointerCancel);
       document.body.style.cursor = '';
       this.dragState = null;
     }
@@ -212,6 +252,7 @@ export class TableAddControls {
 
     target.addEventListener('pointermove', this.boundPointerMove);
     target.addEventListener('pointerup', this.boundPointerUp);
+    target.addEventListener('pointercancel', this.boundPointerCancel);
   }
 
   private handlePointerMove(e: PointerEvent): void {
@@ -264,6 +305,7 @@ export class TableAddControls {
     target.releasePointerCapture(pointerId);
     target.removeEventListener('pointermove', this.boundPointerMove);
     target.removeEventListener('pointerup', this.boundPointerUp);
+    target.removeEventListener('pointercancel', this.boundPointerCancel);
 
     document.body.style.cursor = '';
     this.dragState = null;
@@ -279,6 +321,31 @@ export class TableAddControls {
     this.onDragEnd();
   }
 
+  /**
+   * Handle pointercancel — browser aborted the pointer (touch gesture, system dialog, etc.).
+   * Cleans up drag state without triggering click or commit actions.
+   */
+  private handlePointerCancel(_e: PointerEvent): void {
+    if (!this.dragState) {
+      return;
+    }
+
+    const { axis, didDrag } = this.dragState;
+
+    const target = axis === 'row' ? this.addRowBtn : this.addColBtn;
+
+    target.removeEventListener('pointermove', this.boundPointerMove);
+    target.removeEventListener('pointerup', this.boundPointerUp);
+    target.removeEventListener('pointercancel', this.boundPointerCancel);
+
+    document.body.style.cursor = '';
+    this.dragState = null;
+
+    if (didDrag) {
+      this.onDragEnd();
+    }
+  }
+
   private measureUnitSize(axis: 'row' | 'col'): number {
     if (axis === 'row') {
       const rows = this.grid.querySelectorAll('[data-blok-table-row]');
@@ -305,8 +372,14 @@ export class TableAddControls {
 
   private handleMouseMove(e: MouseEvent): void {
     const gridRect = this.grid.getBoundingClientRect();
+    const scrollContainer = this.grid.parentElement;
+    const isInsideScrollContainer = scrollContainer !== null && scrollContainer !== this.wrapper;
+    const visibleRight = isInsideScrollContainer
+      ? Math.min(gridRect.right, scrollContainer.getBoundingClientRect().right)
+      : gridRect.right;
+
     const distFromBottom = Math.abs(e.clientY - gridRect.bottom);
-    const distFromRight = Math.abs(e.clientX - gridRect.right);
+    const distFromRight = Math.abs(e.clientX - visibleRight);
 
     if (distFromBottom <= PROXIMITY_PX) {
       this.showRow();
@@ -331,7 +404,7 @@ export class TableAddControls {
 
     if (!this.rowVisible) {
       this.addRowBtn.style.opacity = '1';
-      this.addRowBtn.style.pointerEvents = '';
+      this.addRowBtn.style.pointerEvents = this.interactive ? '' : 'none';
       this.rowVisible = true;
     }
   }
@@ -341,7 +414,7 @@ export class TableAddControls {
 
     if (!this.colVisible) {
       this.addColBtn.style.opacity = '1';
-      this.addColBtn.style.pointerEvents = '';
+      this.addColBtn.style.pointerEvents = this.interactive ? '' : 'none';
       this.colVisible = true;
     }
   }
@@ -397,11 +470,8 @@ export class TableAddControls {
     btn.style.position = 'absolute';
     btn.style.left = '0';
     btn.style.bottom = '-36px';
-    btn.style.boxSizing = 'content-box';
-    btn.style.width = '100%';
+    btn.style.zIndex = '1';
     btn.style.height = '32px';
-    btn.style.padding = '4px 8px 0';
-    btn.style.marginLeft = '-8px';
 
     const visual = document.createElement('div');