@dnd-block-tree/svelte 2.1.0

package/README.md

@@ -0,0 +1,62 @@
+# @dnd-block-tree/svelte
+
+[![npm version](https://img.shields.io/npm/v/@dnd-block-tree/svelte.svg)](https://www.npmjs.com/package/@dnd-block-tree/svelte)
+
+Svelte 5 adapter for [dnd-block-tree](https://github.com/thesandybridge/dnd-block-tree) — components, state factories, and [@dnd-kit/svelte](https://dndkit.com/) integration for building hierarchical drag-and-drop interfaces.
+
+## Installation
+
+```bash
+npm install @dnd-block-tree/svelte @dnd-kit/svelte @dnd-kit/dom svelte
+```
+
+Requires **Svelte 5.29+**, **@dnd-kit/svelte 0.3+**, and **@dnd-kit/dom 0.3+**.
+
+## What's Included
+
+- **Components** — `BlockTree`, `BlockTreeSSR`, `TreeRenderer`, `DropZone`, `DraggableBlock`, `DragOverlay`, `GhostPreview`, `BlockTreeDevTools`
+- **State Factories** — `createBlockState`, `createTreeState`, `createBlockHistory` (runes-based)
+- **Collision Bridge** — `adaptCollisionDetection` to bridge core's `CoreCollisionDetection` to @dnd-kit/svelte
+- **Re-exports** — all types and utilities from `@dnd-block-tree/core`
+
+## Quick Example
+
+```svelte
+<script lang="ts">
+  import { BlockTree, type BaseBlock } from '@dnd-block-tree/svelte'
+
+  interface MyBlock extends BaseBlock {
+    type: 'section' | 'task'
+    title: string
+  }
+
+  let blocks = $state<MyBlock[]>([
+    { id: '1', type: 'section', title: 'Tasks', parentId: null, order: 0 },
+    { id: '2', type: 'task', title: 'Do something', parentId: '1', order: 0 },
+  ])
+</script>
+
+<BlockTree
+  {blocks}
+  containerTypes={['section']}
+  onChange={(b) => blocks = b}
+>
+  {#snippet renderBlock({ block, children, isExpanded, onToggleExpand })}
+    <div>
+      {#if onToggleExpand}
+        <button onclick={onToggleExpand}>{isExpanded ? '▼' : '▶'}</button>
+      {/if}
+      {block.title}
+      {#if children}{@render children()}{/if}
+    </div>
+  {/snippet}
+</BlockTree>
+```
+
+## Documentation
+
+Full docs at **[blocktree.sandybridge.io](https://blocktree.sandybridge.io/docs)**.
+
+## License
+
+MIT

package/dist/bridge.d.ts

@@ -0,0 +1,13 @@
+import type { CoreCollisionDetection } from '@dnd-block-tree/core';
+/**
+ * Adapt a framework-agnostic CoreCollisionDetection into a @dnd-kit/dom CollisionDetection.
+ *
+ * @dnd-kit/dom collision detection receives a DragOperation and returns collisions.
+ * We bridge by extracting droppable rects and the pointer rect, running the core
+ * detector, and mapping results back.
+ */
+export declare function adaptCollisionDetection(coreDetector: CoreCollisionDetection): (args: {
+    droppables: any[];
+    dragOperation: any;
+}) => any[];
+//# sourceMappingURL=bridge.d.ts.map

package/dist/bridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bridge.d.ts","sourceRoot":"","sources":["../src/bridge.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EAIvB,MAAM,sBAAsB,CAAA;AAE7B;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,sBAAsB,GACnC,CAAC,IAAI,EAAE;IAAE,UAAU,EAAE,GAAG,EAAE,CAAC;IAAC,aAAa,EAAE,GAAG,CAAA;CAAE,KAAK,GAAG,EAAE,CAgD5D"}

package/dist/bridge.js

@@ -0,0 +1,55 @@
+/**
+ * Adapt a framework-agnostic CoreCollisionDetection into a @dnd-kit/dom CollisionDetection.
+ *
+ * @dnd-kit/dom collision detection receives a DragOperation and returns collisions.
+ * We bridge by extracting droppable rects and the pointer rect, running the core
+ * detector, and mapping results back.
+ */
+export function adaptCollisionDetection(coreDetector) {
+    return ({ droppables, dragOperation }) => {
+        const pointerPosition = dragOperation?.position?.current;
+        if (!pointerPosition)
+            return [];
+        // Build collision candidates from droppable elements
+        const candidates = [];
+        for (const droppable of droppables) {
+            const el = droppable.element;
+            if (!el)
+                continue;
+            const domRect = el.getBoundingClientRect();
+            candidates.push({
+                id: String(droppable.id),
+                rect: {
+                    top: domRect.top,
+                    left: domRect.left,
+                    width: domRect.width,
+                    height: domRect.height,
+                    right: domRect.right,
+                    bottom: domRect.bottom,
+                },
+            });
+        }
+        // Build pointer rect
+        const pointerRect = {
+            top: pointerPosition.y,
+            left: pointerPosition.x,
+            width: 1,
+            height: 1,
+            right: pointerPosition.x + 1,
+            bottom: pointerPosition.y + 1,
+        };
+        // Call core detector
+        const results = coreDetector(candidates, pointerRect);
+        // Map results back to droppable references
+        return results.map(result => {
+            const droppable = droppables.find((d) => String(d.id) === result.id);
+            if (!droppable)
+                return null;
+            return {
+                id: result.id,
+                value: result.value,
+                droppable,
+            };
+        }).filter(Boolean);
+    };
+}

package/dist/components/BlockTree.svelte

@@ -0,0 +1,368 @@
+<script lang="ts">
+  import { DragDropProvider } from '@dnd-kit/svelte'
+  import type {
+    BaseBlock,
+    BlockTreeCallbacks,
+    BlockPosition,
+    DragStartEvent,
+    DragMoveEvent,
+    DragEndEvent,
+    BlockMoveEvent,
+    MoveOperation,
+    ExpandChangeEvent,
+    HoverChangeEvent,
+    DropZoneType,
+    Rect,
+    SnapshotRectsRef,
+  } from '@dnd-block-tree/core'
+  import {
+    getDropZoneType,
+    extractBlockId,
+    createStickyCollision,
+    computeNormalizedIndex,
+    reparentBlockIndex,
+    reparentMultipleBlocks,
+    buildOrderedBlocks,
+    debounce,
+  } from '@dnd-block-tree/core'
+  import type { BlockTreeCustomization } from '../types'
+  import { adaptCollisionDetection } from '../bridge'
+  import { triggerHaptic } from '../utils/haptic'
+  import TreeRenderer from './TreeRenderer.svelte'
+  import DragOverlay from './DragOverlay.svelte'
+  import type { Snippet } from 'svelte'
+
+  interface Props extends BlockTreeCallbacks<BaseBlock>, BlockTreeCustomization<BaseBlock> {
+    blocks: BaseBlock[]
+    containerTypes?: readonly string[]
+    onChange?: (blocks: BaseBlock[]) => void
+    renderBlock: Snippet<[{
+      block: BaseBlock
+      isDragging: boolean
+      depth: number
+      isExpanded: boolean
+      onToggleExpand: (() => void) | null
+      children: Snippet | null
+    }]>
+    dragOverlay?: Snippet<[BaseBlock]>
+    activationDistance?: number
+    previewDebounce?: number
+    showDropPreview?: boolean
+    multiSelect?: boolean
+    selectedIds?: Set<string>
+    onSelectionChange?: (selectedIds: Set<string>) => void
+    dropZoneClass?: string
+    dropZoneActiveClass?: string
+    class?: string
+  }
+
+  let {
+    blocks,
+    containerTypes = [],
+    onChange,
+    renderBlock,
+    dragOverlay,
+    activationDistance = 8,
+    previewDebounce = 150,
+    showDropPreview = true,
+    class: className = '',
+    dropZoneClass = '',
+    dropZoneActiveClass = '',
+    // Callbacks
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+    onDragCancel,
+    onBeforeMove,
+    onBlockMove,
+    onExpandChange,
+    onHoverChange,
+    // Customization
+    canDrag,
+    canDrop,
+    collisionDetection: userCollisionDetection,
+    sensors: sensorConfig,
+    animation,
+    initialExpanded,
+    orderingStrategy = 'integer',
+    maxDepth,
+    multiSelect = false,
+    selectedIds: externalSelectedIds,
+    onSelectionChange,
+  }: Props = $props()
+
+  // Sticky collision detection bridged from core
+  const coreStickyDetector = createStickyCollision(20)
+  const adaptedCollision = adaptCollisionDetection(
+    userCollisionDetection ?? coreStickyDetector
+  )
+
+  // Internal state
+  let activeId = $state<string | null>(null)
+  let hoverZone = $state<string | null>(null)
+  let expandedMap = $state<Record<string, boolean>>(
+    computeInitialExpanded(blocks, containerTypes, initialExpanded)
+  )
+  let virtualState = $state<ReturnType<typeof computeNormalizedIndex> | null>(null)
+  let isDragging = $state(false)
+
+  // Non-reactive refs
+  let initialBlocksRef: BaseBlock[] = []
+  let cachedReorderRef: { targetId: string; reorderedBlocks: BaseBlock[] } | null = null
+  let fromPositionRef: BlockPosition | null = null
+  let draggedIdsRef: string[] = []
+
+  // Selection
+  let internalSelectedIds = $state(new Set<string>())
+  const selectedIds = $derived(externalSelectedIds ?? internalSelectedIds)
+
+  function setSelectedIds(ids: Set<string>) {
+    if (onSelectionChange) {
+      onSelectionChange(ids)
+    } else {
+      internalSelectedIds = ids
+    }
+  }
+
+  // Computed
+  const originalIndex = $derived(computeNormalizedIndex(blocks, orderingStrategy))
+
+  const blocksByParent = $derived.by(() => {
+    const effectiveIdx = virtualState ?? originalIndex
+    const map = new Map<string | null, BaseBlock[]>()
+    for (const [parentId, ids] of effectiveIdx.byParent.entries()) {
+      map.set(parentId, ids.map(id => effectiveIdx.byId.get(id)!).filter(Boolean))
+    }
+    return map
+  })
+
+  const activeBlock = $derived(
+    activeId ? originalIndex.byId.get(activeId) ?? null : null
+  )
+
+  const previewPosition = $derived.by(() => {
+    if (!showDropPreview || !virtualState || !activeId) return null
+    const block = virtualState.byId.get(activeId)
+    if (!block) return null
+    const parentId = block.parentId ?? null
+    const siblings = virtualState.byParent.get(parentId) ?? []
+    const index = siblings.indexOf(activeId)
+    return { parentId, index }
+  })
+
+  const debouncedSetVirtual = debounce((newBlocks: BaseBlock[] | null) => {
+    if (newBlocks) {
+      virtualState = computeNormalizedIndex(newBlocks)
+    } else {
+      virtualState = null
+    }
+  }, previewDebounce)
+
+  // Event handlers
+  function handleDragStart(event: any) {
+    const id = String(event.operation?.source?.id ?? event.active?.id)
+    const block = blocks.find(b => b.id === id)
+    if (!block) return
+    if (canDrag && !canDrag(block)) return
+
+    const dragEvent: DragStartEvent<BaseBlock> = { block, blockId: id }
+    const result = onDragStart?.(dragEvent)
+    if (result === false) return
+
+    coreStickyDetector.reset()
+    fromPositionRef = getBlockPosition(blocks, id)
+
+    if (multiSelect && selectedIds.has(id)) {
+      draggedIdsRef = blocks.filter(b => selectedIds.has(b.id)).map(b => b.id)
+    } else {
+      draggedIdsRef = [id]
+    }
+
+    if (sensorConfig?.hapticFeedback) triggerHaptic()
+
+    activeId = id
+    isDragging = true
+    initialBlocksRef = [...blocks]
+    cachedReorderRef = null
+  }
+
+  function handleDragOver(event: any) {
+    const targetId = String(event.operation?.target?.id ?? event.over?.id ?? '')
+    if (!targetId || !activeId) return
+    processHover(targetId)
+  }
+
+  function processHover(targetZone: string) {
+    const block = blocks.find(b => b.id === activeId)
+    const targetBlockId = extractBlockId(targetZone)
+    const targetBlock = blocks.find(b => b.id === targetBlockId) ?? null
+
+    if (canDrop && block && !canDrop(block, targetZone, targetBlock)) return
+
+    if (hoverZone !== targetZone) {
+      const zoneType: DropZoneType = getDropZoneType(targetZone)
+      onHoverChange?.({ zoneId: targetZone, zoneType, targetBlock })
+    }
+
+    hoverZone = targetZone
+
+    const baseIndex = computeNormalizedIndex(initialBlocksRef, orderingStrategy)
+    const ids = draggedIdsRef
+    const updatedIndex = ids.length > 1
+      ? reparentMultipleBlocks(baseIndex, ids, targetZone, containerTypes, orderingStrategy, maxDepth)
+      : reparentBlockIndex(baseIndex, activeId!, targetZone, containerTypes, orderingStrategy, maxDepth)
+    const orderedBlocks = buildOrderedBlocks(updatedIndex, containerTypes, orderingStrategy)
+
+    cachedReorderRef = { targetId: targetZone, reorderedBlocks: orderedBlocks }
+    if (showDropPreview) debouncedSetVirtual(orderedBlocks)
+  }
+
+  function handleDragEnd(event: any) {
+    debouncedSetVirtual.cancel()
+
+    let cached = cachedReorderRef
+    const dragId = activeId
+    const block = dragId ? blocks.find(b => b.id === dragId) : null
+    const cancelled = event?.canceled ?? false
+
+    if (cancelled) {
+      if (block && dragId) {
+        const cancelEvent: DragEndEvent<BaseBlock> = { block, blockId: dragId, targetZone: null, cancelled: true }
+        onDragCancel?.(cancelEvent)
+        onDragEnd?.(cancelEvent)
+      }
+      resetDragState()
+      return
+    }
+
+    // onBeforeMove middleware
+    if (cached && block && fromPositionRef && onBeforeMove) {
+      const operation: MoveOperation<BaseBlock> = {
+        block,
+        from: fromPositionRef,
+        targetZone: cached.targetId,
+      }
+      const result = onBeforeMove(operation)
+      if (result === false) {
+        resetDragState()
+        return
+      }
+      if (result && result.targetZone !== cached.targetId) {
+        const baseIndex = computeNormalizedIndex(initialBlocksRef, orderingStrategy)
+        const ids = draggedIdsRef
+        const updatedIndex = ids.length > 1
+          ? reparentMultipleBlocks(baseIndex, ids, result.targetZone, containerTypes, orderingStrategy, maxDepth)
+          : reparentBlockIndex(baseIndex, dragId!, result.targetZone, containerTypes, orderingStrategy, maxDepth)
+        cached = { targetId: result.targetZone, reorderedBlocks: buildOrderedBlocks(updatedIndex, containerTypes, orderingStrategy) }
+      }
+    }
+
+    if (block && dragId) {
+      onDragEnd?.({ block, blockId: dragId, targetZone: cached?.targetId ?? null, cancelled: false })
+    }
+
+    if (cached && block && fromPositionRef) {
+      const toPosition = getBlockPosition(cached.reorderedBlocks, block.id)
+      onBlockMove?.({ block, from: fromPositionRef, to: toPosition, blocks: cached.reorderedBlocks, movedIds: [...draggedIdsRef] })
+    }
+
+    if (cached && onChange) {
+      onChange(cached.reorderedBlocks)
+    }
+
+    resetDragState()
+  }
+
+  function resetDragState() {
+    activeId = null
+    hoverZone = null
+    virtualState = null
+    isDragging = false
+    cachedReorderRef = null
+    initialBlocksRef = []
+    fromPositionRef = null
+    draggedIdsRef = []
+  }
+
+  function handleToggleExpand(id: string) {
+    const newExpanded = expandedMap[id] === false
+    expandedMap = { ...expandedMap, [id]: newExpanded }
+
+    const block = blocks.find(b => b.id === id)
+    if (block && onExpandChange) {
+      onExpandChange({ block, blockId: id, expanded: newExpanded })
+    }
+  }
+
+  function handleHover(zoneId: string, _parentId: string | null) {
+    if (!activeId) return
+    processHover(zoneId)
+  }
+
+  function getBlockPosition(blocks: BaseBlock[], blockId: string): BlockPosition {
+    const block = blocks.find(b => b.id === blockId)
+    if (!block) return { parentId: null, index: 0 }
+    const siblings = blocks.filter(b => b.parentId === block.parentId)
+    const index = siblings.findIndex(b => b.id === blockId)
+    return { parentId: block.parentId, index }
+  }
+
+  function computeInitialExpanded(
+    blocks: BaseBlock[],
+    containerTypes: readonly string[],
+    initialExpanded: string[] | 'all' | 'none' | undefined
+  ): Record<string, boolean> {
+    if (initialExpanded === 'none') {
+      const map: Record<string, boolean> = {}
+      for (const b of blocks) {
+        if (containerTypes.includes(b.type)) map[b.id] = false
+      }
+      return map
+    }
+    const map: Record<string, boolean> = {}
+    if (initialExpanded === 'all' || initialExpanded === undefined) {
+      for (const b of blocks) {
+        if (containerTypes.includes(b.type)) map[b.id] = true
+      }
+    } else if (Array.isArray(initialExpanded)) {
+      for (const id of initialExpanded) {
+        map[id] = true
+      }
+    }
+    return map
+  }
+</script>
+
+<DragDropProvider
+  onDragStart={handleDragStart}
+  onDragOver={handleDragOver}
+  onDragEnd={handleDragEnd}
+>
+  <div class={className} style:min-width="0">
+    <TreeRenderer
+      {blocks}
+      {blocksByParent}
+      parentId={null}
+      {activeId}
+      {expandedMap}
+      {containerTypes}
+      onHover={handleHover}
+      onToggleExpand={handleToggleExpand}
+      {renderBlock}
+      {dropZoneClass}
+      {dropZoneActiveClass}
+      {canDrag}
+      {previewPosition}
+      draggedBlock={activeBlock}
+      {selectedIds}
+      {animation}
+    />
+  </div>
+  <DragOverlay {activeBlock} selectedCount={multiSelect ? selectedIds.size : 0}>
+    {#snippet children(block)}
+      {#if dragOverlay}
+        {@render dragOverlay(block)}
+      {/if}
+    {/snippet}
+  </DragOverlay>
+</DragDropProvider>

package/dist/components/BlockTree.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { BaseBlock, BlockTreeCallbacks } from '@dnd-block-tree/core';
+import type { BlockTreeCustomization } from '../types';
+import type { Snippet } from 'svelte';
+interface Props extends BlockTreeCallbacks<BaseBlock>, BlockTreeCustomization<BaseBlock> {
+    blocks: BaseBlock[];
+    containerTypes?: readonly string[];
+    onChange?: (blocks: BaseBlock[]) => void;
+    renderBlock: Snippet<[
+        {
+            block: BaseBlock;
+            isDragging: boolean;
+            depth: number;
+            isExpanded: boolean;
+            onToggleExpand: (() => void) | null;
+            children: Snippet | null;
+        }
+    ]>;
+    dragOverlay?: Snippet<[BaseBlock]>;
+    activationDistance?: number;
+    previewDebounce?: number;
+    showDropPreview?: boolean;
+    multiSelect?: boolean;
+    selectedIds?: Set<string>;
+    onSelectionChange?: (selectedIds: Set<string>) => void;
+    dropZoneClass?: string;
+    dropZoneActiveClass?: string;
+    class?: string;
+}
+declare const BlockTree: import("svelte").Component<Props, {}, "">;
+type BlockTree = ReturnType<typeof BlockTree>;
+export default BlockTree;
+//# sourceMappingURL=BlockTree.svelte.d.ts.map

package/dist/components/BlockTree.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTree.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BlockTree.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,SAAS,EACT,kBAAkB,EAYnB,MAAM,sBAAsB,CAAA;AAW/B,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAKtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAM,SAAQ,kBAAkB,CAAC,SAAS,CAAC,EAAE,sBAAsB,CAAC,SAAS,CAAC;IACtF,MAAM,EAAE,SAAS,EAAE,CAAA;IACnB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,IAAI,CAAA;IACxC,WAAW,EAAE,OAAO,CAAC;QAAC;YACpB,KAAK,EAAE,SAAS,CAAA;YAChB,UAAU,EAAE,OAAO,CAAA;YACnB,KAAK,EAAE,MAAM,CAAA;YACb,UAAU,EAAE,OAAO,CAAA;YACnB,cAAc,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,CAAA;YACnC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;SACzB;KAAC,CAAC,CAAA;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;IAClC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IACzB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,IAAI,CAAA;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAiTH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/BlockTreeDevTools.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { BaseBlock } from '@dnd-block-tree/core'
+
+  interface Props {
+    blocks: BaseBlock[]
+    expandedMap: Record<string, boolean>
+    activeId?: string | null
+    hoverZone?: string | null
+    open?: boolean
+  }
+
+  let {
+    blocks,
+    expandedMap,
+    activeId = null,
+    hoverZone = null,
+    open = false,
+  }: Props = $props()
+
+  let isOpen = $state(open)
+</script>
+
+{#if isOpen}
+  <div
+    style="position: fixed; bottom: 10px; right: 10px; width: 360px; max-height: 400px; overflow: auto; background: #1f2937; color: #e5e7eb; font-family: monospace; font-size: 12px; padding: 12px; border-radius: 8px; z-index: 9999; box-shadow: 0 4px 16px rgba(0,0,0,0.3);"
+  >
+    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+      <strong>BlockTree DevTools</strong>
+      <button onclick={() => isOpen = false} style="background: none; border: none; color: #9ca3af; cursor: pointer;">x</button>
+    </div>
+    <div style="margin-bottom: 8px;">
+      <span style="color: #9ca3af;">Blocks:</span> {blocks.length}
+      {#if activeId}
+        <span style="color: #fbbf24; margin-left: 8px;">Dragging: {activeId.slice(0, 8)}</span>
+      {/if}
+      {#if hoverZone}
+        <span style="color: #34d399; margin-left: 8px;">Hover: {hoverZone}</span>
+      {/if}
+    </div>
+    <pre style="margin: 0; white-space: pre-wrap; font-size: 11px;">{JSON.stringify(blocks.map(b => ({
+      id: b.id.slice(0, 8),
+      type: b.type,
+      parentId: b.parentId?.slice(0, 8) ?? null,
+      order: b.order,
+    })), null, 2)}</pre>
+  </div>
+{:else}
+  <button
+    onclick={() => isOpen = true}
+    style="position: fixed; bottom: 10px; right: 10px; background: #1f2937; color: #e5e7eb; border: none; border-radius: 8px; padding: 8px 12px; font-size: 12px; cursor: pointer; z-index: 9999; box-shadow: 0 2px 8px rgba(0,0,0,0.2);"
+  >
+    DevTools
+  </button>
+{/if}

package/dist/components/BlockTreeDevTools.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { BaseBlock } from '@dnd-block-tree/core';
+interface Props {
+    blocks: BaseBlock[];
+    expandedMap: Record<string, boolean>;
+    activeId?: string | null;
+    hoverZone?: string | null;
+    open?: boolean;
+}
+declare const BlockTreeDevTools: import("svelte").Component<Props, {}, "">;
+type BlockTreeDevTools = ReturnType<typeof BlockTreeDevTools>;
+export default BlockTreeDevTools;
+//# sourceMappingURL=BlockTreeDevTools.svelte.d.ts.map

package/dist/components/BlockTreeDevTools.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTreeDevTools.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BlockTreeDevTools.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGpD,UAAU,KAAK;IACb,MAAM,EAAE,SAAS,EAAE,CAAA;IACnB,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AA8CH,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/BlockTreeSSR.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import type { Snippet } from 'svelte'
+
+  interface Props {
+    children: Snippet
+    fallback?: Snippet
+  }
+
+  let { children, fallback }: Props = $props()
+  let mounted = $state(false)
+
+  onMount(() => {
+    mounted = true
+  })
+</script>
+
+{#if mounted}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

package/dist/components/BlockTreeSSR.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    fallback?: Snippet;
+}
+declare const BlockTreeSSR: import("svelte").Component<Props, {}, "">;
+type BlockTreeSSR = ReturnType<typeof BlockTreeSSR>;
+export default BlockTreeSSR;
+//# sourceMappingURL=BlockTreeSSR.svelte.d.ts.map

package/dist/components/BlockTreeSSR.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTreeSSR.svelte.d.ts","sourceRoot":"","sources":["../../src/components/BlockTreeSSR.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAsBH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}