@jackuait/blok 0.6.0-beta.8 → 0.6.0

package/src/tools/table/table-row-col-drag.ts

@@ -56,6 +56,7 @@ export class TableRowColDrag {
 
   private boundDocPointerMove: (e: PointerEvent) => void;
   private boundDocPointerUp: (e: PointerEvent) => void;
+  private boundDocPointerCancel: () => void;
 
   /** Resolves when drag ends — set by beginTracking, consumed by caller */
   private resolveTracking: ((wasDrag: boolean) => void) | null = null;
@@ -67,6 +68,7 @@ export class TableRowColDrag {
 
     this.boundDocPointerMove = this.handleDocPointerMove.bind(this);
     this.boundDocPointerUp = this.handleDocPointerUp.bind(this);
+    this.boundDocPointerCancel = this.handleDocPointerCancel.bind(this);
   }
 
   /**
@@ -87,6 +89,7 @@ export class TableRowColDrag {
 
     document.addEventListener('pointermove', this.boundDocPointerMove);
     document.addEventListener('pointerup', this.boundDocPointerUp);
+    document.addEventListener('pointercancel', this.boundDocPointerCancel);
 
     return new Promise<boolean>(resolve => {
       this.resolveTracking = resolve;
@@ -113,6 +116,7 @@ export class TableRowColDrag {
 
     document.removeEventListener('pointermove', this.boundDocPointerMove);
     document.removeEventListener('pointerup', this.boundDocPointerUp);
+    document.removeEventListener('pointercancel', this.boundDocPointerCancel);
 
     this.onDragStateChange?.(false, null);
     this.isDragging = false;
@@ -139,6 +143,7 @@ export class TableRowColDrag {
   private handleDocPointerUp(e: PointerEvent): void {
     document.removeEventListener('pointermove', this.boundDocPointerMove);
     document.removeEventListener('pointerup', this.boundDocPointerUp);
+    document.removeEventListener('pointercancel', this.boundDocPointerCancel);
 
     if (this.isDragging) {
       this.finishDrag(e);
@@ -150,6 +155,15 @@ export class TableRowColDrag {
     this.cleanup();
   }
 
+  /**
+   * Handle pointercancel — browser aborted the pointer (touch gesture, system dialog, etc.).
+   * Cleans up without applying the move (treats as abort).
+   */
+  private handleDocPointerCancel(): void {
+    this.resolveTracking?.(this.isDragging);
+    this.cleanup();
+  }
+
   private startDrag(): void {
     this.grid.style.userSelect = 'none';
     document.body.style.cursor = 'grabbing';

package/src/tools/table/table-scroll-haze.ts

@@ -0,0 +1,152 @@
+/**
+ * Scroll haze overlays for the Table tool.
+ *
+ * Adds gradient overlays on the left/right edges of the table wrapper
+ * to indicate that the table content is horizontally scrollable.
+ * Uses a passive scroll event listener with rAF throttling.
+ */
+
+const HAZE_ATTR = 'data-blok-table-haze';
+const HAZE_VISIBLE_ATTR = 'data-blok-table-haze-visible';
+
+/** Minimum scrollLeft delta to consider "scrolled" (avoids sub-pixel flicker). */
+const SCROLL_THRESHOLD = 1;
+
+const HAZE_CLASSES = [
+  'absolute',
+  'top-0',
+  'bottom-0',
+  'w-12',
+  'pointer-events-none',
+  'opacity-0',
+  'transition-opacity',
+  'duration-150',
+  'z-1',
+];
+
+const LEFT_HAZE_CLASSES = [
+  'left-0',
+  'bg-linear-to-r',
+  'from-white/80',
+  'to-transparent',
+];
+
+const RIGHT_HAZE_CLASSES = [
+  'right-5',
+  'bg-linear-to-l',
+  'from-white/80',
+  'to-transparent',
+];
+
+/**
+ * Manages left/right gradient haze overlays that indicate
+ * the table can be scrolled horizontally.
+ */
+export class TableScrollHaze {
+  private leftHaze: HTMLDivElement | null = null;
+  private rightHaze: HTMLDivElement | null = null;
+  private scrollContainer: HTMLElement | null = null;
+  private boundOnScroll: (() => void) | null = null;
+  private ticking = false;
+
+  /**
+   * Create haze overlay elements and attach the scroll listener.
+   *
+   * @param wrapper - The table wrapper element (position: relative)
+   * @param scrollContainer - The scroll container with overflow-x: auto
+   */
+  public init(wrapper: HTMLElement, scrollContainer: HTMLElement): void {
+    this.scrollContainer = scrollContainer;
+
+    this.leftHaze = this.createHazeElement('left');
+    this.rightHaze = this.createHazeElement('right');
+
+    wrapper.appendChild(this.leftHaze);
+    wrapper.appendChild(this.rightHaze);
+
+    this.boundOnScroll = (): void => {
+      if (!this.ticking) {
+        requestAnimationFrame(() => {
+          this.syncVisibility();
+          this.ticking = false;
+        });
+        this.ticking = true;
+      }
+    };
+
+    scrollContainer.addEventListener('scroll', this.boundOnScroll, { passive: true });
+
+    this.syncVisibility();
+  }
+
+  /**
+   * Recalculate haze visibility (e.g. after column resize or add/delete).
+   */
+  public update(): void {
+    this.syncVisibility();
+  }
+
+  /**
+   * Remove overlay elements and detach the scroll listener.
+   */
+  public destroy(): void {
+    if (this.boundOnScroll && this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.boundOnScroll);
+    }
+
+    this.leftHaze?.remove();
+    this.rightHaze?.remove();
+
+    this.leftHaze = null;
+    this.rightHaze = null;
+    this.scrollContainer = null;
+    this.boundOnScroll = null;
+    this.ticking = false;
+  }
+
+  private createHazeElement(side: 'left' | 'right'): HTMLDivElement {
+    const el = document.createElement('div');
+
+    el.setAttribute(HAZE_ATTR, side);
+    el.setAttribute('aria-hidden', 'true');
+    el.classList.add(...HAZE_CLASSES, ...(side === 'left' ? LEFT_HAZE_CLASSES : RIGHT_HAZE_CLASSES));
+
+    return el;
+  }
+
+  private syncVisibility(): void {
+    const sc = this.scrollContainer;
+
+    if (!sc) {
+      return;
+    }
+
+    const { overflowX } = getComputedStyle(sc);
+    const canScroll = overflowX === 'auto' || overflowX === 'scroll';
+
+    if (!canScroll) {
+      this.setVisible(this.leftHaze, false);
+      this.setVisible(this.rightHaze, false);
+
+      return;
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = sc;
+    const maxScroll = scrollWidth - clientWidth;
+
+    this.setVisible(this.leftHaze, scrollLeft > SCROLL_THRESHOLD);
+    this.setVisible(this.rightHaze, maxScroll > SCROLL_THRESHOLD && scrollLeft < maxScroll - SCROLL_THRESHOLD);
+  }
+
+  private setVisible(el: HTMLElement | null, visible: boolean): void {
+    if (!el) {
+      return;
+    }
+
+    if (visible) {
+      el.setAttribute(HAZE_VISIBLE_ATTR, '');
+    } else {
+      el.removeAttribute(HAZE_VISIBLE_ATTR);
+    }
+  }
+}

package/src/tools/table/types.ts

@@ -4,7 +4,7 @@ import type { BlockToolData } from '../../../types';
  * Cell content always contains block IDs.
  * Every cell in the table is represented as an array of block references.
  */
-export type CellContent = { blocks: string[] };
+export type CellContent = { blocks: string[]; color?: string; textColor?: string; text?: string };
 
 /**
  * Legacy cell content type for migration from string-based cells.
@@ -53,4 +53,25 @@ export interface TableConfig {
   withHeadings?: boolean;
   /** Whether to start stretched */
   stretched?: boolean;
+  /** Additional tool names to restrict from being inserted into table cells */
+  restrictedTools?: string[];
+}
+
+/**
+ * Block data within a clipboard cell (no IDs — those are assigned on paste).
+ */
+export interface ClipboardBlockData {
+  tool: string;
+  data: Record<string, unknown>;
+  tunes?: Record<string, unknown>;
+}
+
+/**
+ * Clipboard payload for copied table cells.
+ * Stored as JSON in a data attribute on the HTML table element.
+ */
+export interface TableCellsClipboard {
+  rows: number;
+  cols: number;
+  cells: Array<Array<{ blocks: ClipboardBlockData[]; color?: string; textColor?: string }>>;
 }

package/src/tools/table/view/table-cell-blocks-adapter.ts

@@ -0,0 +1,47 @@
+import type { TableEventBroker, BlockLifecycleEvent } from '../ownership/table-event-broker';
+import type { TableOwnershipRegistry } from '../ownership/table-ownership-registry';
+
+/**
+ * Adapter that bridges the ownership-based event broker into the existing
+ * TableCellBlocks event handling.
+ *
+ * In shadow mode, this adapter subscribes the table to the broker and
+ * forwards routed events to the table's handler. It does NOT replace the
+ * existing global event listener — both paths run in parallel for validation.
+ *
+ * After cutover (Task 7), this adapter becomes the sole event path.
+ */
+export class TableCellBlocksAdapter {
+  private readonly tableId: string;
+  private readonly broker: TableEventBroker;
+  private readonly registry: TableOwnershipRegistry;
+  private readonly onEvent: (blockId: string, event: BlockLifecycleEvent) => void;
+
+  constructor(options: {
+    tableId: string;
+    broker: TableEventBroker;
+    registry: TableOwnershipRegistry;
+    onEvent: (blockId: string, event: BlockLifecycleEvent) => void;
+  }) {
+    this.tableId = options.tableId;
+    this.broker = options.broker;
+    this.registry = options.registry;
+    this.onEvent = options.onEvent;
+
+    this.broker.subscribe(this.tableId, this.handleBrokerEvent);
+  }
+
+  /**
+   * Destroy the adapter — unsubscribe from the broker.
+   */
+  destroy(): void {
+    this.broker.unsubscribe(this.tableId);
+  }
+
+  /**
+   * Handler for events routed through the broker.
+   */
+  private handleBrokerEvent = (blockId: string, event: BlockLifecycleEvent): void => {
+    this.onEvent(blockId, event);
+  };
+}

package/src/variants/blok-minimum.ts

@@ -59,6 +59,19 @@ class Blok {
   public exportAPI(blok: Core): void {
     const fieldsToExport = ['configuration'];
     const destroy = (): void => {
+      // Mark all modules as destroyed first so any in-flight async work stops gracefully
+      Object.values(blok.moduleInstances).forEach((moduleInstance) => {
+        if (moduleInstance === undefined || moduleInstance === null) {
+          return;
+        }
+
+        if (
+          isFunction((moduleInstance as { markDestroyed?: () => void }).markDestroyed)
+        ) {
+          (moduleInstance as { markDestroyed: () => void }).markDestroyed();
+        }
+      });
+
       Object.values(blok.moduleInstances).forEach((moduleInstance) => {
         if (moduleInstance === undefined || moduleInstance === null) {
           return;

package/types/api/block.d.ts

@@ -1,4 +1,5 @@
 import {BlockToolData, ToolConfig, ToolboxConfigEntry} from '../tools';
+import {BlockTuneData} from '../block-tunes/block-tune-data';
 import {SavedData} from '../data-formats';
 
 /**
@@ -35,6 +36,18 @@ export interface BlockAPI {
    */
   readonly selected: boolean;
 
+  /**
+   * Last successfully extracted block tool data (synchronous).
+   * Useful when async save() is not feasible, e.g. during clipboard operations.
+   */
+  readonly preservedData: BlockToolData;
+
+  /**
+   * Last successfully extracted tune data (synchronous).
+   * Useful when async save() is not feasible, e.g. during clipboard operations.
+   */
+  readonly preservedTunes: { [name: string]: BlockTuneData };
+
   /**
    * True if Block has inputs to be focused
    */

package/types/api/blocks.d.ts

@@ -7,6 +7,12 @@ import {BlockTuneData} from '../block-tunes/block-tune-data';
  * Describes methods to manipulate with Blok`s blocks
  */
 export interface Blocks {
+  /**
+   * Returns true when a Yjs sync operation (undo/redo) is in progress.
+   * Tools can use this to skip cleanup that would interfere with Yjs state management.
+   */
+  readonly isSyncingFromYjs: boolean;
+
   /**
    * Remove all blocks from Blok zone
    */
@@ -175,4 +181,14 @@ export interface Blocks {
     newBlockData: BlockToolData,
     insertIndex: number,
   ): BlockAPI;
+
+  /**
+   * Execute a function within a transaction.
+   * All block operations (insert, delete, move) within fn are grouped
+   * into a single undo entry. Prevents undo-group splitting that would
+   * make structural operations partially undoable.
+   *
+   * @param fn - The function containing block operations to group
+   */
+  transact?(fn: () => void): void;
 }

package/types/tools/table.d.ts

@@ -36,6 +36,8 @@ export interface TableConfig {
   withHeadings?: boolean;
   /** Whether to start stretched */
   stretched?: boolean;
+  /** Additional tool names to restrict from being inserted into table cells */
+  restrictedTools?: string[];
 }
 
 /**