@jackuait/blok 0.10.7 → 0.10.9

package/src/components/modules/yjs/undo-history.ts

@@ -102,6 +102,15 @@ export class UndoHistory {
    */
   private moveCallback: (blockId: string, toIndex: number, origin: 'local' | 'move-undo' | 'move-redo') => void;
 
+  /**
+   * Callback to restore a block's parent during move-undo/move-redo.
+   *
+   * Must not record its own history entry — the call is part of replaying
+   * an existing `SingleMoveEntry`. Set by YjsManager to route through
+   * `transactWithoutCapture` + a direct in-memory reparent.
+   */
+  private parentRestoreCallback: (blockId: string, parentId: string | null) => void;
+
   constructor(
     yblocks: Y.Array<Y.Map<unknown>>,
     blok: BlokModules
@@ -120,6 +129,9 @@ export class UndoHistory {
     this.moveCallback = () => {
       // Placeholder, will be set by setMoveCallback
     };
+    this.parentRestoreCallback = () => {
+      // Placeholder, will be set by setParentRestoreCallback
+    };
   }
 
   /**
@@ -131,6 +143,16 @@ export class UndoHistory {
     this.moveCallback = callback;
   }
 
+  /**
+   * Set the parent-restore callback used by move-undo/move-redo to rewind
+   * drag-reparent side effects. See `parentRestoreCallback`.
+   */
+  public setParentRestoreCallback(
+    callback: (blockId: string, parentId: string | null) => void
+  ): void {
+    this.parentRestoreCallback = callback;
+  }
+
   /**
    * Set the Blok modules. Called when Blok modules are initialized.
    */
@@ -216,10 +238,14 @@ export class UndoHistory {
       // Push to redo stack for potential redo
       this.moveRedoStack.push(lastMoveGroup);
 
-      // Reverse all moves in the group, in reverse order
-      // This is crucial for multi-block moves to restore correctly
+      // Reverse all moves in the group, in reverse order.
+      // This is crucial for multi-block moves to restore correctly.
+      //
+      // Drag-reparent entries may additionally carry `fromParentId`; restore
+      // the parent BEFORE the position so the block lands in the correct
+      // flat-array slot relative to its (soon-to-be-restored) parent siblings.
       [...lastMoveGroup].reverse().forEach((move) => {
-        this.moveCallback(move.blockId, move.fromIndex, 'move-undo');
+        this.replayMoveUndo(move);
       });
 
       // Pop caret entry only after move succeeds
@@ -257,9 +283,12 @@ export class UndoHistory {
       // Push back to undo stack
       this.moveUndoStack.push(lastMoveGroup);
 
-      // Redo all moves in the group, in original order
+      // Redo all moves in the group, in original order. Drag-reparent
+      // entries restore the destination parent AFTER the position so that
+      // the flat-array splice settles first and the parent's contentIds
+      // then re-attach cleanly.
       for (const move of lastMoveGroup) {
-        this.moveCallback(move.blockId, move.toIndex, 'move-redo');
+        this.replayMoveRedo(move);
       }
 
       // Pop caret entry only after move succeeds
@@ -307,6 +336,36 @@ export class UndoHistory {
     this.restoreCaretSnapshot(snapshot);
   }
 
+  /**
+   * Replay a single move entry in the undo direction.
+   * Parent restore runs BEFORE the position restore so the block lands in
+   * the correct slot relative to its (soon-to-be-restored) parent siblings.
+   */
+  private replayMoveUndo(move: SingleMoveEntry): void {
+    if (move.fromParentId !== undefined) {
+      this.parentRestoreCallback(move.blockId, move.fromParentId);
+    }
+
+    if (move.fromIndex !== -1) {
+      this.moveCallback(move.blockId, move.fromIndex, 'move-undo');
+    }
+  }
+
+  /**
+   * Replay a single move entry in the redo direction.
+   * Position restore runs BEFORE the parent restore so the flat-array splice
+   * settles first and the destination parent's contentIds re-attach cleanly.
+   */
+  private replayMoveRedo(move: SingleMoveEntry): void {
+    if (move.toIndex !== -1) {
+      this.moveCallback(move.blockId, move.toIndex, 'move-redo');
+    }
+
+    if (move.toParentId !== undefined) {
+      this.parentRestoreCallback(move.blockId, move.toParentId);
+    }
+  }
+
   /**
    * Execute a Yjs UndoManager operation with the isPerformingUndoRedo flag set.
    * This prevents the stack-item-added listener from modifying caret stacks during
@@ -438,6 +497,58 @@ export class UndoHistory {
     }
   }
 
+  /**
+   * Attach a parent change to the in-flight move entry (or create a
+   * parent-only entry if the block hasn't been moved inside the group yet).
+   *
+   * Used by drag-reparent so that `undo` restores the parent relationship
+   * atomically with the array move. The caller (`BlockManager.setBlockParent`
+   * when `YjsManager.isInMoveGroup` is true) is responsible for writing the
+   * parentId/contentIds to Yjs through `transactWithoutCapture` so the
+   * Y.UndoManager does not also record the change.
+   * @param blockId - id of the reparented block
+   * @param fromParentId - parent id before the reparent (null for root)
+   * @param toParentId - parent id after the reparent (null for root)
+   */
+  public recordParentChangeForPendingMove(
+    blockId: string,
+    fromParentId: string | null,
+    toParentId: string | null
+  ): void {
+    if (this.pendingMoveGroup === null) {
+      // Not inside a move group — nothing to attach to. Drop the hint.
+      return;
+    }
+
+    const existing = this.pendingMoveGroup.find(
+      entry => entry.blockId === blockId
+    );
+
+    if (existing !== undefined) {
+      // Preserve the earliest known `fromParentId` (first write wins — that's
+      // the parent BEFORE the drag started). Always update `toParentId` to
+      // the most recent write.
+      if (existing.fromParentId === undefined) {
+        existing.fromParentId = fromParentId;
+      }
+      existing.toParentId = toParentId;
+
+      return;
+    }
+
+    // No matching move entry yet (e.g. a same-index reparent within a toggle
+    // body, where DragController calls setBlockParent without a prior move).
+    // Push a parent-only entry with identical from/to indices so the undo
+    // walker still has something to unwind.
+    this.pendingMoveGroup.push({
+      blockId,
+      fromIndex: -1,
+      toIndex: -1,
+      fromParentId,
+      toParentId,
+    });
+  }
+
   /**
    * Capture the current caret position as a snapshot.
    * @returns CaretSnapshot or null if no block is focused

package/src/components/utils/data-model-transform.ts

@@ -368,6 +368,45 @@ const expandListToHierarchical = (
   return blocks;
 };
 
+/**
+ * Recursively expand a list of legacy body blocks into hierarchical flat blocks.
+ * Each body block is routed through expandToHierarchical so that nested legacy
+ * toggleList/callout/list structures are fully flattened instead of passing
+ * through with their legacy type (which would hit Renderer's "unknown tool"
+ * fallback and render as a stub).
+ *
+ * Returns both the direct-child IDs (for the parent's `content` array) and
+ * the flattened descendant blocks in document order.
+ * @param bodyBlocks - legacy body blocks to expand
+ * @param parentId - id of the parent block (toggle/callout) that owns them
+ */
+const expandLegacyBodyBlocks = (
+  bodyBlocks: OutputBlockData[],
+  parentId: BlockId
+): { childIds: BlockId[]; childBlocks: OutputBlockData[] } => {
+  const childIds: BlockId[] = [];
+  const childBlocks: OutputBlockData[] = [];
+
+  for (const childBlock of bodyBlocks) {
+    const expanded = expandToHierarchical([childBlock]);
+
+    if (expanded.length === 0) {
+      continue;
+    }
+
+    // The first emitted block corresponds to the original input block.
+    // Re-parent it to the legacy container; descendants already carry the
+    // correct parent refs assigned during their own recursive expansion.
+    const [first, ...rest] = expanded;
+    const childId = first.id ?? generateBlockId();
+
+    childIds.push(childId);
+    childBlocks.push({ ...first, id: childId, parent: parentId }, ...rest);
+  }
+
+  return { childIds, childBlocks };
+};
+
 /**
  * Expand a legacy toggleList block into flat toggle block + child blocks
  */
@@ -378,20 +417,7 @@ const expandToggleListToHierarchical = (
   const toggleId = block.id ?? generateBlockId();
   const bodyBlocks = block.data.body?.blocks ?? [];
 
-  // Collect child IDs, ensuring each child has an ID
-  const childIds: BlockId[] = [];
-  const childBlocks: OutputBlockData[] = [];
-
-  for (const childBlock of bodyBlocks) {
-    const childId = childBlock.id ?? generateBlockId();
-
-    childIds.push(childId);
-    childBlocks.push({
-      ...childBlock,
-      id: childId,
-      parent: toggleId,
-    });
-  }
+  const { childIds, childBlocks } = expandLegacyBodyBlocks(bodyBlocks, toggleId);
 
   const sharedFields = {
     id: toggleId,
@@ -439,20 +465,7 @@ const expandCalloutToHierarchical = (
   const calloutId = block.id ?? generateBlockId();
   const bodyBlocks = block.data.body?.blocks ?? [];
 
-  // Collect child IDs, ensuring each child has an ID
-  const childIds: BlockId[] = [];
-  const childBlocks: OutputBlockData[] = [];
-
-  for (const childBlock of bodyBlocks) {
-    const childId = childBlock.id ?? generateBlockId();
-
-    childIds.push(childId);
-    childBlocks.push({
-      ...childBlock,
-      id: childId,
-      parent: calloutId,
-    });
-  }
+  const { childIds, childBlocks } = expandLegacyBodyBlocks(bodyBlocks, calloutId);
 
   // Map variant → backgroundColor preset
   const variant = block.data.variant ?? 'general';
@@ -831,31 +844,105 @@ const processRootCalloutItem = (
  * @param blocks - array of flat blocks with parent/content references
  * @returns collapsed array with nested structures
  */
+/**
+ * Groups one block under its parent in the derived-content map if it has a
+ * valid parent reference. Helper extracted for collapseToLegacy reconciliation.
+ */
+const appendChildToDerivedContent = (
+  block: OutputBlockData,
+  blockById: Map<BlockId, OutputBlockData>,
+  derivedContent: Map<BlockId, BlockId[]>
+): void => {
+  if (!block.id || !block.parent || !blockById.has(block.parent)) {
+    return;
+  }
+  const siblings = derivedContent.get(block.parent);
+
+  if (siblings === undefined) {
+    derivedContent.set(block.parent, [block.id]);
+
+    return;
+  }
+  siblings.push(block.id);
+};
+
+/**
+ * Merges live (parent-derived) ids into the existing content[] preserving its
+ * order, dropping any dead ids that don't resolve to a block in the input.
+ */
+const mergeContentIds = (
+  existingContent: BlockId[] | undefined,
+  derivedIds: BlockId[],
+  blockById: Map<BlockId, OutputBlockData>
+): BlockId[] => {
+  const existing = Array.isArray(existingContent) ? existingContent : [];
+  const merged = existing.filter((id) => blockById.has(id));
+
+  for (const id of derivedIds) {
+    if (!merged.includes(id)) {
+      merged.push(id);
+    }
+  }
+
+  return merged;
+};
+
 export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] => {
+  // Defense-in-depth: reconcile each parent's content[] from children's parent
+  // fields before processing. Saver is the primary source of truth for content[]
+  // (see src/components/modules/saver.ts#doSave), but this pass guarantees the
+  // invariant `child.parent === X ⇒ X.content.includes(child.id)` even when
+  // OutputBlockData originates from a path that bypassed the saver — migrations,
+  // external JSON, tests, 3rd-party consumers. Without this, stale content[]
+  // causes processRootCalloutItem to eject real children as root siblings.
+  const reconciledBlocks = blocks.map((block) => ({ ...block }));
+  const reconciledById = new Map<BlockId, OutputBlockData>();
+
+  for (const block of reconciledBlocks) {
+    if (block.id) {
+      reconciledById.set(block.id, block);
+    }
+  }
+
+  const derivedContent = new Map<BlockId, BlockId[]>();
+
+  for (const block of reconciledBlocks) {
+    appendChildToDerivedContent(block, reconciledById, derivedContent);
+  }
+
+  for (const [parentId, derivedIds] of derivedContent) {
+    const parent = reconciledById.get(parentId);
+
+    if (parent === undefined) {
+      continue;
+    }
+    parent.content = mergeContentIds(parent.content, derivedIds, reconciledById);
+  }
+
   // Build a map of blocks by ID for quick lookup
   const blockMap = new Map<BlockId, OutputBlockData>();
 
-  for (const block of blocks) {
+  for (const block of reconciledBlocks) {
     if (block.id) {
       blockMap.set(block.id, block);
     }
   }
 
   // If no flat-model list, toggle, or callout blocks, just strip hierarchy fields and return
-  const hasFlatListBlocks = blocks.some(isFlatModelListBlock);
-  const hasFlatToggleBlocks = blocks.some(isFlatModelToggleBlock);
-  const hasFlatToggleableHeaders = blocks.some(b => isToggleableHeaderBlock(b) && !b.parent);
-  const hasFlatCalloutBlocks = blocks.some(isFlatModelCalloutBlock);
+  const hasFlatListBlocks = reconciledBlocks.some(isFlatModelListBlock);
+  const hasFlatToggleBlocks = reconciledBlocks.some(isFlatModelToggleBlock);
+  const hasFlatToggleableHeaders = reconciledBlocks.some(b => isToggleableHeaderBlock(b) && !b.parent);
+  const hasFlatCalloutBlocks = reconciledBlocks.some(isFlatModelCalloutBlock);
 
   if (!hasFlatListBlocks && !hasFlatToggleBlocks && !hasFlatToggleableHeaders && !hasFlatCalloutBlocks) {
-    return blocks.map(stripHierarchyFields);
+    return reconciledBlocks.map(stripHierarchyFields);
   }
 
   // Process blocks, converting root flat-model list blocks to legacy List blocks
   const result: OutputBlockData[] = [];
   const processedIds = new Set<BlockId>();
 
-  for (const block of blocks) {
+  for (const block of reconciledBlocks) {
     const alreadyProcessed = block.id && processedIds.has(block.id);
 
     if (alreadyProcessed) {
@@ -905,6 +992,131 @@ export const collapseToLegacy = (blocks: OutputBlockData[]): OutputBlockData[] =
   return result;
 };
 
+/**
+ * A table cell that references its content blocks by id.
+ * Tables persist their child blocks via `data.content[row][col].blocks = [<id>, ...]`
+ * rather than nesting block payloads inline, so the parent/content relationship
+ * is implicit in the table data instead of explicit on each child block.
+ */
+interface CellWithBlockRefs {
+  blocks: string[];
+}
+
+const isCellWithBlockRefs = (cell: unknown): cell is CellWithBlockRefs => {
+  return (
+    typeof cell === 'object' &&
+    cell !== null &&
+    Array.isArray((cell as { blocks?: unknown }).blocks)
+  );
+};
+
+interface TableDataShape {
+  content?: unknown;
+}
+
+const getTableContentRows = (data: unknown): unknown[][] | null => {
+  if (typeof data !== 'object' || data === null) {
+    return null;
+  }
+  const content = (data as TableDataShape).content;
+
+  if (!Array.isArray(content)) {
+    return null;
+  }
+  return content as unknown[][];
+};
+
+/**
+ * When a flat block array contains `table` blocks that reference child blocks
+ * via `data.content[row][col].blocks = [<id>, ...]`, ensure each referenced
+ * child carries `parent: <tableId>`. This makes the parent/content invariant
+ * explicit even for externally-authored data shapes that omit the `parent`
+ * field on children.
+ *
+ * Without this normalization, downstream readers that key on parentId
+ * (`mountCellBlocksReadOnly`'s cross-table guard, the table saver's
+ * own-child filter, hierarchy queries, drag-and-drop) skip those children
+ * and leak them out of the table, rendering them at the bottom of the page
+ * instead of inside the cells.
+ *
+ * The function is idempotent, never mutates the input array, and leaves
+ * pre-existing `parent` fields unchanged. Children referenced by multiple
+ * tables get assigned to the first table that lists them (first-writer-wins);
+ * corrupted cross-table references are preserved as-is so defensive guards
+ * downstream can still reject them.
+ * @param blocks - flat block array potentially containing tables with cell refs
+ */
+const collectCellChildRefs = (
+  cell: unknown,
+  tableId: BlockId,
+  childToTable: Map<BlockId, BlockId>
+): void => {
+  if (!isCellWithBlockRefs(cell)) {
+    return;
+  }
+  for (const childId of cell.blocks) {
+    if (typeof childId !== 'string' || childToTable.has(childId)) {
+      continue;
+    }
+    childToTable.set(childId, tableId);
+  }
+};
+
+const collectRowChildRefs = (
+  row: unknown,
+  tableId: BlockId,
+  childToTable: Map<BlockId, BlockId>
+): void => {
+  if (!Array.isArray(row)) {
+    return;
+  }
+  row.forEach(cell => collectCellChildRefs(cell, tableId, childToTable));
+};
+
+const collectTableChildRefs = (
+  tableBlock: OutputBlockData,
+  childToTable: Map<BlockId, BlockId>
+): void => {
+  if (tableBlock.id === undefined || tableBlock.id === null) {
+    return;
+  }
+  const rows = getTableContentRows(tableBlock.data);
+
+  if (rows === null) {
+    return;
+  }
+  const tableId = tableBlock.id;
+
+  rows.forEach(row => collectRowChildRefs(row, tableId, childToTable));
+};
+
+export const normalizeTableChildParents = (blocks: OutputBlockData[]): OutputBlockData[] => {
+  const childToTable = new Map<BlockId, BlockId>();
+
+  blocks
+    .filter(block => block.type === 'table')
+    .forEach(tableBlock => collectTableChildRefs(tableBlock, childToTable));
+
+  if (childToTable.size === 0) {
+    return blocks;
+  }
+
+  return blocks.map(block => {
+    if (block.id === undefined || block.id === null) {
+      return block;
+    }
+    const tableId = childToTable.get(block.id);
+
+    if (tableId === undefined) {
+      return block;
+    }
+    if (block.parent !== undefined && block.parent !== null) {
+      return block;
+    }
+    return { ...block, parent: tableId };
+  });
+};
+
 /**
  * Check if transformation is needed based on config and detected format
  */

package/src/components/utils/hierarchy-invariant.ts

@@ -0,0 +1,137 @@
+import type { OutputBlockData } from '@/types';
+import type { BlockId } from '../../../types/data-formats/block-id';
+
+/**
+ * Hierarchy invariant validator.
+ *
+ * Every block with `parent: X` must appear in `X.content`, and every id in a
+ * block's `content[]` must resolve to a block whose `parent` points back. Any
+ * drift between the two representations is the signature of the callout paste
+ * ejection bug (and its siblings across toggle, toggleable header, list, and
+ * any future container block).
+ *
+ * This util exists so tests and saver-level assertions can detect drift at
+ * any point in the pipeline — load, save, collapse, or post-mutation — without
+ * hand-rolling the same loop. Treat it as the single source of truth for the
+ * parent/content invariant.
+ */
+
+export interface HierarchyViolation {
+  kind:
+    | 'child-parent-missing'
+    | 'child-not-in-parent-content'
+    | 'content-id-dangling'
+    | 'content-parent-mismatch'
+    | 'content-duplicate';
+  blockId: BlockId | undefined;
+  parentId?: BlockId;
+  childId?: BlockId;
+  message: string;
+}
+
+const pushViolation = (violations: HierarchyViolation[], v: HierarchyViolation): void => {
+  violations.push(v);
+};
+
+const checkParentLinks = (
+  block: OutputBlockData,
+  blockById: Map<BlockId, OutputBlockData>,
+  violations: HierarchyViolation[]
+): void => {
+  if (block.parent === undefined || block.parent === null) {
+    return;
+  }
+  const parent = blockById.get(block.parent);
+
+  if (parent === undefined) {
+    pushViolation(violations, {
+      kind: 'child-parent-missing',
+      blockId: block.id,
+      parentId: block.parent,
+      message: `Block ${String(block.id)} references missing parent ${String(block.parent)}`,
+    });
+
+    return;
+  }
+  if (block.id === undefined || !Array.isArray(parent.content) || !parent.content.includes(block.id)) {
+    pushViolation(violations, {
+      kind: 'child-not-in-parent-content',
+      blockId: block.id,
+      parentId: block.parent,
+      message: `Block ${String(block.id)} has parent=${String(block.parent)} but that parent's content[] does not include it`,
+    });
+  }
+};
+
+const checkContentArray = (
+  block: OutputBlockData,
+  blockById: Map<BlockId, OutputBlockData>,
+  violations: HierarchyViolation[]
+): void => {
+  if (!Array.isArray(block.content)) {
+    return;
+  }
+  const seen = new Set<BlockId>();
+
+  for (const childId of block.content) {
+    if (seen.has(childId)) {
+      pushViolation(violations, {
+        kind: 'content-duplicate',
+        blockId: block.id,
+        childId,
+        message: `Block ${String(block.id)}.content[] contains duplicate id ${String(childId)}`,
+      });
+      continue;
+    }
+    seen.add(childId);
+
+    const child = blockById.get(childId);
+
+    if (child === undefined) {
+      pushViolation(violations, {
+        kind: 'content-id-dangling',
+        blockId: block.id,
+        childId,
+        message: `Block ${String(block.id)}.content[] references missing child ${String(childId)}`,
+      });
+      continue;
+    }
+    if (child.parent !== block.id) {
+      pushViolation(violations, {
+        kind: 'content-parent-mismatch',
+        blockId: block.id,
+        childId,
+        message: `Block ${String(block.id)}.content[] includes ${String(childId)} but that child's parent is ${String(child.parent)}`,
+      });
+    }
+  }
+};
+
+export const validateHierarchy = (blocks: OutputBlockData[]): HierarchyViolation[] => {
+  const violations: HierarchyViolation[] = [];
+  const blockById = new Map<BlockId, OutputBlockData>();
+
+  for (const block of blocks) {
+    if (block.id !== undefined) {
+      blockById.set(block.id, block);
+    }
+  }
+
+  for (const block of blocks) {
+    checkParentLinks(block, blockById, violations);
+    checkContentArray(block, blockById, violations);
+  }
+
+  return violations;
+};
+
+export const assertHierarchy = (blocks: OutputBlockData[], context: string): void => {
+  const violations = validateHierarchy(blocks);
+
+  if (violations.length === 0) {
+    return;
+  }
+  const summary = violations.map(v => `  - ${v.message}`).join('\n');
+
+  throw new Error(`Hierarchy invariant violated at ${context}:\n${summary}`);
+};

package/src/markdown/markdown-handler.ts

@@ -6,6 +6,7 @@ import type { HandlerContext } from '../components/modules/paste/types';
 import type { PasteHandler } from '../components/modules/paste/handlers/base';
 import { BasePasteHandler } from '../components/modules/paste/handlers/base';
 import { Block } from '../components/block';
+import { normalizeTableChildParents } from '../components/utils/data-model-transform';
 
 /**
  * Patterns that indicate text is likely Markdown rather than plain text.
@@ -66,12 +67,18 @@ export class MarkdownHandler extends BasePasteHandler implements PasteHandler {
     }
 
     const { markdownToBlocks } = await import('./index');
-    const outputBlocks = await markdownToBlocks(data);
+    const rawOutputBlocks = await markdownToBlocks(data);
 
-    if (!outputBlocks.length) {
+    if (!rawOutputBlocks.length) {
       return false;
     }
 
+    // Defense-in-depth: backfill `parent` on table cell children so that any
+    // future regression in mdast-to-blocks (or external converter) cannot
+    // produce the dodopizza shape (children referenced by table cells but
+    // lacking explicit parent), which would render them at page bottom.
+    const outputBlocks = normalizeTableChildParents(rawOutputBlocks);
+
     const { BlockManager, Caret } = this.Blok;
 
     // Replace empty default block if present

package/src/styles/main.css

@@ -1306,6 +1306,11 @@
   @apply p-0 m-0 min-h-[1.6em];
 }
 
+/* List items inside table cells use tight 2px top/bottom spacing */
+[data-blok-table-cell-blocks] [data-blok-tool="list"] {
+  @apply py-0 mt-[2px] mb-[2px];
+}
+
 /* ─── Cell content placement ──────────────────────────────────── */
 
 [data-blok-cell-placement="top-center"] {

package/src/tools/callout/constants.ts

@@ -29,4 +29,3 @@ export const WRAPPER_STYLES = 'rounded-xl pl-8 pr-4 py-[5px] my-1 flex items-sta
 // 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';