@jackuait/blok 0.10.0-beta.9 → 0.10.0

package/src/components/constants/data-attributes.ts

@@ -220,6 +220,16 @@ export const DATA_ATTR = {
   /** Active placeholder text */
   placeholderActive: 'data-blok-placeholder-active',
 
+  // ============================================
+  // Nested Blocks
+  // ============================================
+
+  /** Container that hosts nested block holders (table cells, toggle/callout/header children).
+   *  Used as a universal guard: before moving a block holder via appendChild,
+   *  check `holder.closest([nestedBlocks])` — if truthy, the holder is already
+   *  claimed by another container and must not be stolen. */
+  nestedBlocks: 'data-blok-nested-blocks',
+
   // ============================================
   // Mutation Tracking
   // ============================================

package/src/components/icons/index.ts

@@ -95,6 +95,22 @@ export const IconPlus = `
 </svg>
 `;
 
+// Chevron Down icon
+export const IconChevronDown = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m6 8 4 4 4-4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Ellipsis (horizontal three dots) icon
+export const IconEllipsis = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="10" r="1.25" fill="currentColor"/>
+  <circle cx="10" cy="10" r="1.25" fill="currentColor"/>
+  <circle cx="15" cy="10" r="1.25" fill="currentColor"/>
+</svg>
+`;
+
 // Chevron Left icon
 export const IconChevronLeft = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/components/modules/blockEvents/composers/keyboardNavigation.ts

@@ -344,6 +344,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       // Previous sibling exists in the same parent — fall through to merge/remove logic
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the start of the first input in a table cell, Backspace should be a no-op
+     * rather than merging the previous cell's last block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * Backspace at the start of the first Block should do nothing
      */
@@ -447,6 +456,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       return;
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the end of the last input in a table cell, Delete should be a no-op
+     * rather than merging the next cell's first block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * If next Block is empty, it should be removed just like a character
      */

package/src/components/modules/blockManager/hierarchy.ts

@@ -4,6 +4,7 @@
  * @module BlockHierarchy
  */
 import type { Block } from '../../block';
+import { DATA_ATTR } from '../../constants/data-attributes';
 
 import type { BlockRepository } from './repository';
 
@@ -113,7 +114,9 @@ export class BlockHierarchy {
 
     // Move block holder into toggle child container if the new parent has one,
     // honouring the flat-array order so the DOM order matches the logical order.
-    if (newParentId !== null && newParent !== undefined) {
+    // Skip if the holder is already claimed by another nested-blocks container
+    // (e.g. a table cell) — moving it would steal it from that container.
+    if (newParentId !== null && newParent !== undefined && !block.holder.closest(`[${DATA_ATTR.nestedBlocks}]`)) {
       const newContainer = newParent.holder.querySelector('[data-blok-toggle-children]');
       if (newContainer) {
         const allBlocks = this.repository.blocks;

package/src/components/modules/readonly.ts

@@ -16,6 +16,11 @@ export class ReadOnly extends Module {
    */
   private toolsDontSupportReadOnly: string[] = [];
 
+  /**
+   * Array of tools name which don't support in-place read-only toggle via setReadOnly()
+   */
+  private toolsDontSupportInPlaceToggle: string[] = [];
+
   /**
    * Value to track read-only state
    * @type {boolean}
@@ -29,6 +34,19 @@ export class ReadOnly extends Module {
     return this.readOnlyEnabled;
   }
 
+  /**
+   * Whether tool support for in-place toggle has been checked during prepare()
+   */
+  private inPlaceToggleChecked = false;
+
+  /**
+   * Whether all registered block tools support in-place read-only toggle.
+   * Returns false until prepare() has run the check.
+   */
+  private get supportsInPlaceToggle(): boolean {
+    return this.inPlaceToggleChecked && this.toolsDontSupportInPlaceToggle.length === 0;
+  }
+
   /**
    * Set initial state
    */
@@ -43,9 +61,13 @@ export class ReadOnly extends Module {
         if (!tool.isReadOnlySupported) {
           toolsDontSupportReadOnly.push(name);
         }
+        if (!tool.supportsInPlaceReadOnly) {
+          this.toolsDontSupportInPlaceToggle.push(name);
+        }
       });
 
     this.toolsDontSupportReadOnly = toolsDontSupportReadOnly;
+    this.inPlaceToggleChecked = true;
 
     if (this.config.readOnly === true && toolsDontSupportReadOnly.length > 0) {
       this.throwCriticalError();
@@ -101,6 +123,24 @@ export class ReadOnly extends Module {
       return this.readOnlyEnabled;
     }
 
+    /**
+     * If all tools support in-place toggle, call setReadOnly on each block
+     * instead of the full save/clear/render cycle
+     */
+    if (this.supportsInPlaceToggle) {
+      this.Blok.ModificationsObserver.disable();
+
+      const blocks = (this.Blok.BlockManager as { blocks?: Array<{ setReadOnly: (s: boolean) => void }> }).blocks ?? [];
+
+      for (const block of blocks) {
+        block.setReadOnly(state);
+      }
+
+      this.Blok.ModificationsObserver.enable();
+
+      return this.readOnlyEnabled;
+    }
+
     /**
      * Mutex for modifications observer to prevent onChange call when read-only mode is enabled
      */
@@ -117,6 +157,8 @@ export class ReadOnly extends Module {
       return this.readOnlyEnabled;
     }
 
+    const savedScrollY = window.scrollY;
+
     this.Blok.Renderer.markRenderStart();
 
     try {
@@ -126,6 +168,10 @@ export class ReadOnly extends Module {
       this.Blok.Renderer.markRenderEnd();
     }
 
+    if (window.scrollY !== savedScrollY) {
+      window.scrollTo(0, savedScrollY);
+    }
+
     this.Blok.ModificationsObserver.enable();
 
     return this.readOnlyEnabled;

package/src/components/modules/rectangleSelection.ts

@@ -72,6 +72,14 @@ export class RectangleSelection extends Module {
    */
   private mouseDownWithinBoundsFromContentEditable = false;
 
+  /**
+   * Set when the user mousedowns in a position that should eventually close the toolbar
+   * if a drag begins, but NOT immediately (to avoid interfering with button clicks like
+   * the plus button). The toolbar is closed on the first mousemove after mousedown.
+   * Cleared on mouseup / endSelection.
+   */
+  private pendingToolbarClose = false;
+
   /**
    *  Is scrolling now
    */
@@ -187,7 +195,7 @@ export class RectangleSelection extends Module {
 
     const selectorsToAvoid = [
       createSelector(DATA_ATTR.elementContent),
-      createSelector(DATA_ATTR.toolbar),
+      createSelector(DATA_ATTR.settingsToggler),
       createSelector(DATA_ATTR.popover),
       INLINE_TOOLBAR_INTERFACE_SELECTOR,
     ];
@@ -202,12 +210,13 @@ export class RectangleSelection extends Module {
     }
 
     /**
-     * Hide the toolbar immediately so it does not obstruct drag selection.
-     * Only close the toolbar if the selection starts within the horizontal bounds of the editor.
-     * This allows rectangle selection to start from outside (e.g., left margin) without closing the toolbar.
+     * Schedule toolbar close for the first mousemove (i.e. when the user actually drags).
+     * Deferring prevents a plain click (e.g. on the plus button) from accidentally closing
+     * the toolbar before its own click handler fires.
+     * Only close if starting within the horizontal bounds of the editor.
      */
     if (withinEditorHorizontally) {
-      this.Blok.Toolbar.close();
+      this.pendingToolbarClose = true;
     }
 
     this.mousedown = true;
@@ -221,6 +230,7 @@ export class RectangleSelection extends Module {
   public endSelection(): void {
     this.mousedown = false;
     this.mouseDownWithinBoundsFromContentEditable = false;
+    this.pendingToolbarClose = false;
     this.startX = 0;
     this.startY = 0;
     this.anchorBlockIndex = null;
@@ -361,6 +371,16 @@ export class RectangleSelection extends Module {
       this.Blok.Toolbar.close();
     }
 
+    /**
+     * Close the toolbar on the first actual drag movement after a mousedown
+     * that was scheduled to close it. Using mousemove instead of mousedown ensures
+     * plain button clicks (e.g. the plus button) don't close the toolbar prematurely.
+     */
+    if (this.pendingToolbarClose) {
+      this.pendingToolbarClose = false;
+      this.Blok.Toolbar.close();
+    }
+
     this.changingRectangle(mouseEvent);
     this.scrollByZones(mouseEvent.clientY);
   }

package/src/components/modules/toolbar/index.ts

@@ -289,11 +289,17 @@ export class Toolbar extends Module<ToolbarNodes> {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         this.nodes.actions?.classList.remove(this.CSS.actionsOpened);
         this.nodes.actions?.removeAttribute('data-blok-opened');
+        if (this.nodes.actions) {
+          this.nodes.actions.style.pointerEvents = 'none';
+        }
       },
       show: (): void => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         this.nodes.actions?.classList.add(this.CSS.actionsOpened);
         this.nodes.actions?.setAttribute('data-blok-opened', 'true');
+        if (this.nodes.actions) {
+          this.nodes.actions.style.pointerEvents = 'auto';
+        }
       },
     };
   }
@@ -421,8 +427,11 @@ export class Toolbar extends Module<ToolbarNodes> {
      */
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.isFirstChildOfCallout(targetBlock);
+    const isCalloutBlock = targetBlock.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    // Hide plus button for callout blocks and their first children to avoid
+    // overlap with the callout emoji icon in the left padding area.
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
@@ -478,15 +487,6 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     if (blockContentElement) {
       this.toolboxInstance.updateLeftAlignElement(blockContentElement);
-
-      /**
-       * Sync toolbar content wrapper's margin with the block content element
-       * so toolbar buttons align with the block content edge, even when
-       * consumer CSS overrides the block content's margin.
-       */
-      if (this.nodes.content) {
-        this.nodes.content.style.marginLeft = getComputedStyle(blockContentElement).marginLeft;
-      }
     }
 
     /**
@@ -507,6 +507,39 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     this.open();
+
+    /**
+     * For blocks with interactive elements at the left edge (toggle arrows,
+     * callout emoji buttons), disable pointer-events on the actions
+     * container so clicks pass through to the block content.
+     * Must run after open() which sets pointer-events: auto on actions.
+     */
+    const isToggleHeader = targetBlock.name === 'header'
+      && targetBlock.holder.querySelector('[data-blok-toggle-arrow]') !== null;
+    const hasLeftEdgeInteraction = targetBlock.name === 'callout'
+      || targetBlock.name === 'toggle'
+      || isToggleHeader;
+
+    if (hasLeftEdgeInteraction && this.nodes.actions) {
+      this.nodes.actions.style.pointerEvents = 'none';
+      this.restoreSettingsTogglerForLeftEdgeBlock(targetBlock);
+    }
+
+    /**
+     * Sync toolbar content wrapper's margin with the block content element
+     * so toolbar buttons align with the block content edge, even when
+     * consumer CSS overrides the block content's margin.
+     *
+     * Uses Math.max to guarantee the actions container (positioned via right:100%)
+     * never extends beyond the left edge of the viewport, which would make the
+      * drag handle unreachable by pointer events.
+     */
+    if (blockContentElement && this.nodes.content) {
+      const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
+
+      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+    }
   }
 
   /**
@@ -607,18 +640,10 @@ export class Toolbar extends Module<ToolbarNodes> {
       targetBlock.setupDraggable(settingsToggler, this.Blok.DragManager);
     }
 
-    /**
-     * Sync toolbar content wrapper's margin with the block content element
-     * so toolbar buttons align with the block content edge.
-     */
     const blockContentElement = targetBlockHolder.querySelector<HTMLElement>(`[${DATA_ATTR.elementContent}]`);
 
     if (blockContentElement) {
       this.toolboxInstance.updateLeftAlignElement(blockContentElement);
-
-      if (this.nodes.content) {
-        this.nodes.content.style.marginLeft = getComputedStyle(blockContentElement).marginLeft;
-      }
     }
 
     /**
@@ -632,6 +657,17 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.blockTunesToggler.show();
 
     this.open();
+
+    /**
+     * Sync toolbar content wrapper's margin with the block content element.
+     * Clamp to actionsWidth so actions never extend beyond the left viewport edge.
+     */
+    if (blockContentElement && this.nodes.content) {
+      const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
+
+      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+    }
   }
 
   /**
@@ -822,14 +858,48 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.hoveredBlock !== null && this.isFirstChildOfCallout(this.hoveredBlock);
+    const isCalloutBlock = this.hoveredBlock?.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
     }
   }
 
+  /**
+   * Re-enables pointer-events on the settings toggler (and callout drag zone) after
+   * the actions container has been set to pointer-events: none for left-edge blocks.
+   *
+   * For callout blocks: also wires the dedicated drag zone as the drag handle and
+   * re-enables the settings toggler so the settings menu remains accessible.
+   * The emoji button (at x=32px) no longer overlaps the actions zone (x=[0,29px])
+   * because the callout uses pl-8 (32px) left padding.
+   *
+   * For all other left-edge blocks (toggle, header with arrow): simply re-enables the
+   * settings toggler so it continues to function as the drag handle.
+   */
+  private restoreSettingsTogglerForLeftEdgeBlock(targetBlock: Block): void {
+    if (targetBlock.name === 'callout') {
+      if (this.nodes.settingsToggler) {
+        this.nodes.settingsToggler.style.pointerEvents = 'auto';
+      }
+
+      const calloutDragZone = targetBlock.holder.querySelector<HTMLElement>('[data-callout-drag-zone]');
+
+      if (calloutDragZone) {
+        calloutDragZone.style.pointerEvents = 'auto';
+        targetBlock.setupDraggable(calloutDragZone, this.Blok.DragManager);
+      }
+
+      return;
+    }
+
+    if (this.nodes.settingsToggler) {
+      this.nodes.settingsToggler.style.pointerEvents = 'auto';
+    }
+  }
+
   /**
    * If the block is inside a table cell, resolve to the parent table block.
    * This ensures the toolbar shows for the table when clicking/focusing inside cells.
@@ -915,6 +985,13 @@ export class Toolbar extends Module<ToolbarNodes> {
       this.CSS.actions,
     ]);
 
+    /**
+     * Start with pointer-events disabled so invisible (opacity-0) actions
+     * don't intercept clicks on elements underneath (e.g. toggle arrows).
+     * blockActions.show()/hide() toggles this inline style.
+     */
+    actions.style.pointerEvents = 'none';
+
     this.nodes.content = content;
 
     this.nodes.actions = actions;

package/src/components/modules/toolbar/styles.ts

@@ -19,8 +19,6 @@ export const getToolbarStyles = (): { [name: string]: string } => {
     actions: twJoin(
       'absolute flex opacity-0 pr-[5px]',
       'right-full',
-      // Re-enable pointer events for interactive elements
-      'pointer-events-auto',
       // Mobile styles
       'mobile:right-auto',
       // RTL styles

package/src/components/modules/uiControllers/controllers/blockHover.ts

@@ -34,6 +34,13 @@ export class BlockHoverController extends Controller {
    */
   private static readonly HOVER_COOLDOWN_MS = 50;
 
+  /**
+   * Maximum horizontal distance from content edges for extended hover zone.
+   * When cursor is within this distance of the content area, nearest-block
+   * detection activates. Beyond this distance, no hover event is emitted.
+   */
+  private static readonly HOVER_ZONE_SIZE = 100;
+
   constructor(options: {
     config: Controller['config'];
     eventsDispatcher: Controller['eventsDispatcher'];
@@ -104,9 +111,10 @@ export class BlockHoverController extends Controller {
 
       /**
        * If no block element found directly, find the nearest block by Y distance
+       * but only if the cursor is within the extended hover zone (100px from content edges).
        */
       if (!hoveredBlockElement) {
-        this.emitNearestBlockHovered(event.clientY);
+        this.emitNearestBlockHoveredInZone(event.clientX, event.clientY);
 
         return;
       }
@@ -169,6 +177,41 @@ export class BlockHoverController extends Controller {
     });
   }
 
+  /**
+   * Emits a BlockHovered event for the nearest block, but only if the cursor
+   * is within the extended hover zone (HOVER_ZONE_SIZE px from content edges).
+   * @param clientX - Cursor X position
+   * @param clientY - Cursor Y position
+   */
+  private emitNearestBlockHoveredInZone(clientX: number, clientY: number): void {
+    const blocks = this.Blok.BlockManager.blocks;
+    const topLevelBlocks = blocks.filter(block =>
+      block.holder.closest('[data-blok-table-cell-blocks], [data-blok-toggle-children]') === null
+    );
+
+    if (topLevelBlocks.length === 0) {
+      return;
+    }
+
+    const contentEl = topLevelBlocks[0].holder.querySelector<HTMLElement>('[data-blok-element-content]');
+
+    if (!contentEl) {
+      this.emitNearestBlockHovered(clientY);
+
+      return;
+    }
+
+    const contentRect = contentEl.getBoundingClientRect();
+    const distLeft = Math.abs(clientX - contentRect.left);
+    const distRight = Math.abs(clientX - contentRect.right);
+    const withinZone = distLeft <= BlockHoverController.HOVER_ZONE_SIZE
+      || distRight <= BlockHoverController.HOVER_ZONE_SIZE;
+
+    if (withinZone) {
+      this.emitNearestBlockHovered(clientY);
+    }
+  }
+
   /**
    * Finds the nearest block by vertical distance to cursor position.
    * Returns the block whose vertical center is closest to the cursor Y position.

package/src/components/tools/block.ts

@@ -69,6 +69,16 @@ export class BlockToolAdapter extends BaseToolAdapter<ToolType.Block, IBlockTool
     return (this.constructable as BlockToolConstructable)[InternalBlockToolSettings.IsReadOnlySupported] === true;
   }
 
+  /**
+   * Returns true if the Tool's prototype has a setReadOnly method,
+   * enabling the in-place read-only toggle path (no save/clear/render cycle).
+   */
+  public get supportsInPlaceReadOnly(): boolean {
+    const prototype = (this.constructable as unknown as { prototype?: { setReadOnly?: unknown } })?.prototype;
+
+    return typeof prototype?.setReadOnly === 'function';
+  }
+
   /**
    * Returns true if Tool supports linebreaks
    */

package/src/components/utils/placeholder.ts

@@ -132,11 +132,18 @@ export const setupPlaceholder = (
   element: HTMLElement,
   placeholder?: string,
   attributeName: 'data-placeholder' | 'data-blok-placeholder-active' = 'data-placeholder'
-): void => {
+): (() => void) => {
   // Always set the attribute, even if empty (for consistency and testing)
   element.setAttribute(attributeName, placeholder ?? '');
 
-  element.addEventListener('focus', () => handleEmptyElement(element));
+  const handler = (): void => handleEmptyElement(element);
+
+  element.addEventListener('focus', handler);
+
+  return () => {
+    element.removeEventListener('focus', handler);
+    element.removeAttribute(attributeName);
+  };
 };
 
 /**

package/src/styles/main.css

@@ -644,6 +644,10 @@
   --color-swatch-ring-hover: var(--blok-swatch-ring-hover);
   --color-swatch-ring-active: var(--blok-swatch-ring-active);
 
+  /* Surface tokens (code blocks, secondary containers) */
+  --color-bg-secondary: var(--blok-bg-secondary);
+  --color-border-secondary: var(--blok-border-secondary);
+
 }
 
 @layer utilities {
@@ -725,6 +729,10 @@
   --blok-swatch-ring-hover: rgba(0, 0, 0, 0.10);
   --blok-swatch-ring-active: rgba(0, 0, 0, 0.30);
 
+  /* Surface tokens (code blocks, secondary containers) */
+  --blok-bg-secondary: #f7f8fa;
+  --blok-border-secondary: rgba(55, 53, 47, 0.09);
+
   /* Marker colors — light theme */
   --blok-color-gray-text: #787774;
   --blok-color-gray-bg: #f1f1ef;
@@ -818,6 +826,10 @@
     --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
     --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);
 
+    /* Surface tokens (code blocks, secondary containers) */
+    --blok-bg-secondary: rgba(255, 255, 255, 0.04);
+    --blok-border-secondary: rgba(255, 255, 255, 0.08);
+
     /* Marker colors — dark theme */
     --blok-color-gray-text: #9b9b9b;
     --blok-color-gray-bg: #2f2f2f;
@@ -910,6 +922,10 @@
   --blok-swatch-ring-hover: rgba(255, 255, 255, 0.15);
   --blok-swatch-ring-active: rgba(255, 255, 255, 0.35);
 
+  /* Surface tokens (code blocks, secondary containers) */
+  --blok-bg-secondary: rgba(255, 255, 255, 0.04);
+  --blok-border-secondary: rgba(255, 255, 255, 0.08);
+
   /* Marker colors — dark theme */
   --blok-color-gray-text: #9b9b9b;
   --blok-color-gray-bg: #2f2f2f;

package/src/tools/callout/constants.ts

@@ -25,7 +25,8 @@ export const EMOJI_CATEGORY_FLAGS_KEY = 'tools.callout.emojiCategoryFlags';
 export const DEFAULT_EMOJI = '💡';
 
 // CSS — Tailwind classes
-export const WRAPPER_STYLES = 'rounded-xl px-4 py-[5px] my-1 flex items-start gap-2';
+export const WRAPPER_STYLES = 'rounded-xl pl-8 pr-4 py-[5px] my-1 flex items-start gap-2 relative';
 // h-[38px] = py-[7px]×2 + 1.5rem×1 = 14+24; explicit height prevents platform-specific emoji font metrics from inflating the button
 export const EMOJI_BUTTON_STYLES = 'text-[1.5rem] leading-[1] cursor-pointer bg-transparent border-0 px-0 py-[7px] h-[38px] flex-shrink-0 select-none';
 export const CHILDREN_STYLES = 'flex-1 min-w-0';
+export const DRAG_ZONE_STYLES = 'absolute left-0 top-0 h-full cursor-grab select-none';

package/src/tools/callout/dom-builder.ts

@@ -1,16 +1,19 @@
 // src/tools/callout/dom-builder.ts
 
+import { DATA_ATTR } from '../../components/constants/data-attributes';
 import { TOGGLE_ATTR } from '../toggle/constants';
 import {
   WRAPPER_STYLES,
   EMOJI_BUTTON_STYLES,
   CHILDREN_STYLES,
+  DRAG_ZONE_STYLES,
 } from './constants';
 
 export interface CalloutDOMRefs {
   wrapper: HTMLElement;
   emojiButton: HTMLButtonElement;
   childContainer: HTMLElement;
+  dragZone: HTMLElement;
 }
 
 export interface BuildCalloutDOMOptions {
@@ -43,11 +46,20 @@ export function buildCalloutDOM(options: BuildCalloutDOMOptions): CalloutDOMRefs
   const childContainer = document.createElement('div');
   childContainer.className = CHILDREN_STYLES;
   childContainer.setAttribute(TOGGLE_ATTR.toggleChildren, '');
+  childContainer.setAttribute(DATA_ATTR.nestedBlocks, '');
   childContainer.setAttribute('data-blok-child-toolbar', '');
   childContainer.setAttribute('data-blok-mutation-free', 'true');
 
   wrapper.appendChild(emojiButton);
   wrapper.appendChild(childContainer);
 
-  return { wrapper, emojiButton, childContainer };
+  // Drag zone — covers left padding area (x=[0,16px]) for drag handle,
+  // sits behind emoji button so emoji clicks pass through
+  const dragZone = document.createElement('span');
+  dragZone.className = DRAG_ZONE_STYLES;
+  dragZone.style.width = '32px'; // matches pl-8 left padding
+  dragZone.setAttribute('data-callout-drag-zone', '');
+  wrapper.prepend(dragZone);
+
+  return { wrapper, emojiButton, childContainer, dragZone };
 }