@hirokisakabe/pom-editor 0.2.6 → 0.3.0

package/README.md

@@ -12,10 +12,11 @@
 
 ## Features
 
-- **Drag-and-Drop Reordering** — Sort sibling nodes within `VStack` / `HStack` / `Layer` containers, plus top-level slides, by dragging them in the AST tree.
-- **XML In / XML Out** — Accepts a pom XML string via `xml` and returns the updated XML via `onChange` after each reorder, so it drops into any editor / preview layout.
+- **Drag-and-Drop Structure Editing** — Reorder siblings, move nodes between `VStack` / `HStack` / `Layer` containers, pull container children up to the root, or nest a container inside another — all by dragging in the AST tree.
+- **Distinct "between" vs "inside" Drop Targets** — Dropping on the gap before/after a row inserts as a sibling; dropping on a container body itself nests the node inside.
+- **XML In / XML Out** — Accepts a pom XML string via `xml` and returns the updated XML via `onChange` after each edit, so it drops into any editor / preview layout.
 - **AST-Aware Tree View** — Renders the parsed pom AST as a labeled tree so the structure of slides and nested containers is visible at a glance.
-- **Powered by `@dnd-kit`** — Built on `@dnd-kit/core` + `@dnd-kit/sortable` for accessible, keyboard-friendly drag interactions.
+- **Powered by `@dnd-kit/core`** — Built on `@dnd-kit/core`'s `PointerSensor` for pointer-driven drag interactions.
 
 ## Installation
 
@@ -67,7 +68,12 @@ function App() {
 | `xml`      | `string`                | pom XML string (one or more `<Slide>` elements)          |
 | `onChange` | `(xml: string) => void` | Called with updated XML after each drag-and-drop reorder |
 
-Renders a tree of nodes from the parsed XML. Nodes within the same parent container (`VStack`, `HStack`, `Layer`) can be reordered by dragging. Top-level slides can also be reordered.
+Renders a tree of nodes from the parsed XML. Each row supports two drop targets:
+
+- A thin gap between rows — drop here to insert as a **sibling** at that position (works across parents, so a node can be moved to any container or pulled up to the root).
+- The container row body itself — drop here to nest the dragged node as the **last child of that container** (`VStack` / `HStack` / `Layer` only). Drops on non-container bodies are ignored.
+
+Top-level slides can be reordered via the root-level gaps. Cycle-forming drops (e.g. moving a container into its own descendant) are silently rejected.
 
 ## License
 

package/dist/AstTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AstTree.d.ts","sourceRoot":"","sources":["../src/AstTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAgBnE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAuK3D,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,OAAO,EAAE,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CACtC;AAUD,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,YAAY,qBA+FtD"}
+{"version":3,"file":"AstTree.d.ts","sourceRoot":"","sources":["../src/AstTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAYnE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAmN3D,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,OAAO,EAAE,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,YAAY,qBAwFtD"}

package/dist/AstTree.js

@@ -1,9 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
-import { DndContext, PointerSensor, useSensor, useSensors, closestCenter, } from "@dnd-kit/core";
-import { SortableContext, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { applyReorder, rebuildNodes } from "./ast.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { createContext, useContext, useState } from "react";
+import { DndContext, PointerSensor, useDraggable, useDroppable, useSensor, useSensors, pointerWithin, } from "@dnd-kit/core";
+import { applyMoveInside, applyMoveToGap, isContainerType, rebuildNodes, } from "./ast.js";
 const NODE_LABELS = {
     text: "Text",
     image: "Image",
@@ -45,25 +43,64 @@ function nodeLabel(node) {
     }
     return base;
 }
-const InvalidOverContext = createContext(null);
-function SortableItem({ astNode, depth, onChange, ast }) {
-    const invalidOverId = useContext(InvalidOverContext);
-    const isInvalidOver = invalidOverId === astNode.id;
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({
-        id: astNode.id,
-        data: { parentId: astNode.parentId },
+const OverIdContext = createContext(null);
+const ActiveIdContext = createContext(null);
+const GAP_PREFIX = "gap:";
+const INSIDE_PREFIX = "inside:";
+function gapId(parentId, index) {
+    return `${GAP_PREFIX}${parentId}:${index}`;
+}
+function insideId(nodeId) {
+    return `${INSIDE_PREFIX}${nodeId}`;
+}
+function parseGapId(id) {
+    if (!id.startsWith(GAP_PREFIX))
+        return null;
+    const rest = id.slice(GAP_PREFIX.length);
+    const sep = rest.lastIndexOf(":");
+    if (sep === -1)
+        return null;
+    const parentId = rest.slice(0, sep);
+    const index = Number.parseInt(rest.slice(sep + 1), 10);
+    if (Number.isNaN(index))
+        return null;
+    return { parentId, index };
+}
+function parseInsideId(id) {
+    if (!id.startsWith(INSIDE_PREFIX))
+        return null;
+    return id.slice(INSIDE_PREFIX.length);
+}
+function GapStrip({ parentId, index, depth }) {
+    const id = gapId(parentId, index);
+    const { setNodeRef } = useDroppable({ id });
+    const overId = useContext(OverIdContext);
+    const activeId = useContext(ActiveIdContext);
+    const isOver = overId === id;
+    const isDragging = activeId !== null;
+    return (_jsx("div", { ref: setNodeRef, "data-testid": id, style: {
+            height: isOver ? "10px" : isDragging ? "8px" : "2px",
+            marginLeft: `${depth * 16}px`,
+            backgroundColor: isOver ? "#3b82f6" : "transparent",
+            borderRadius: "2px",
+        } }));
+}
+function Row({ astNode, depth }) {
+    const isContainer = isContainerType(astNode.node.type);
+    const overId = useContext(OverIdContext);
+    const activeId = useContext(ActiveIdContext);
+    const drag = useDraggable({ id: astNode.id });
+    const isDragging = activeId === astNode.id;
+    const inside = useDroppable({
+        id: insideId(astNode.id),
+        disabled: !isContainer || isDragging,
     });
-    const style = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-        opacity: isDragging ? 0.4 : 1,
+    const setBodyRef = (el) => {
+        inside.setNodeRef(el);
+        drag.setNodeRef(el);
     };
-    const handleCursor = isInvalidOver
-        ? "not-allowed"
-        : isDragging
-            ? "grabbing"
-            : "grab";
-    return (_jsxs("div", { ref: setNodeRef, style: style, children: [_jsxs("div", { style: {
+    const isInsideOver = isContainer && overId === insideId(astNode.id);
+    return (_jsxs("div", { children: [_jsxs("div", { ref: setBodyRef, style: {
                     display: "flex",
                     alignItems: "center",
                     gap: "6px",
@@ -72,12 +109,13 @@ function SortableItem({ astNode, depth, onChange, ast }) {
                     paddingBottom: "3px",
                     borderRadius: "4px",
                     userSelect: "none",
-                    backgroundColor: isInvalidOver ? "#fee2e2" : undefined,
-                    outline: isInvalidOver ? "1px solid #dc2626" : undefined,
-                    cursor: isInvalidOver ? "not-allowed" : undefined,
-                }, children: [_jsx("span", { ...listeners, ...attributes, style: {
-                            cursor: handleCursor,
-                            color: isInvalidOver ? "#dc2626" : "#9ca3af",
+                    opacity: isDragging ? 0.4 : 1,
+                    backgroundColor: isInsideOver ? "#dbeafe" : undefined,
+                    outline: isInsideOver ? "1px solid #2563eb" : undefined,
+                    transition: "background-color 50ms",
+                }, children: [_jsx("span", { ...drag.listeners, ...drag.attributes, style: {
+                            cursor: isDragging ? "grabbing" : "grab",
+                            color: "#9ca3af",
                             fontSize: "12px",
                             lineHeight: 1,
                             flexShrink: 0,
@@ -88,63 +126,59 @@ function SortableItem({ astNode, depth, onChange, ast }) {
                             whiteSpace: "nowrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
-                        }, children: nodeLabel(astNode.node) })] }), astNode.children && astNode.children.length > 0 && (_jsx(SortableChildrenList, { children: astNode.children, depth: depth + 1, onChange: onChange, ast: ast }))] }));
+                        }, children: nodeLabel(astNode.node) })] }), astNode.children && (_jsx(ChildList, { parentId: astNode.id, nodes: astNode.children, depth: depth + 1 }))] }));
 }
-function SortableChildrenList({ children, depth, onChange, ast, }) {
-    const ids = children.map((c) => c.id);
-    return (_jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: children.map((child) => (_jsx(SortableItem, { astNode: child, depth: depth, onChange: onChange, ast: ast }, child.id))) }));
-}
-function getParentId(data) {
-    if (typeof data === "object" && data !== null && "parentId" in data) {
-        const value = data.parentId;
-        return typeof value === "string" ? value : null;
-    }
-    return null;
+function ChildList({ parentId, nodes, depth }) {
+    return (_jsxs(_Fragment, { children: [_jsx(GapStrip, { parentId: parentId, index: 0, depth: depth }), nodes.map((child, i) => (_jsxs(React.Fragment, { children: [_jsx(Row, { astNode: child, depth: depth }), _jsx(GapStrip, { parentId: parentId, index: i + 1, depth: depth })] }, child.id)))] }));
 }
 export function AstTree({ ast, onChange }) {
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: { distance: 4 },
     }));
-    const [invalidOverId, setInvalidOverId] = useState(null);
-    function onDragOver({ active, over }) {
-        if (!over || active.id === over.id) {
-            setInvalidOverId(null);
+    const [overId, setOverId] = useState(null);
+    const [activeId, setActiveId] = useState(null);
+    function onDragStart(event) {
+        setActiveId(String(event.active.id));
+    }
+    function onDragOver({ over }) {
+        setOverId(over ? String(over.id) : null);
+    }
+    function applyDrop(activeId, overId) {
+        const gap = parseGapId(overId);
+        if (gap) {
+            const newAst = applyMoveToGap(ast, activeId, gap.parentId, gap.index);
+            if (newAst !== ast)
+                onChange(rebuildNodes(newAst));
             return;
         }
-        const activeParentId = getParentId(active.data.current);
-        const overParentId = getParentId(over.data.current);
-        if (activeParentId !== overParentId) {
-            setInvalidOverId(over.id);
-        }
-        else {
-            setInvalidOverId(null);
+        const insideTarget = parseInsideId(overId);
+        if (insideTarget !== null) {
+            const newAst = applyMoveInside(ast, activeId, insideTarget);
+            if (newAst !== ast)
+                onChange(rebuildNodes(newAst));
         }
     }
     function onDragEnd({ active, over }) {
-        setInvalidOverId(null);
-        if (!over || active.id === over.id)
-            return;
-        const activeParentId = getParentId(active.data.current);
-        const overParentId = getParentId(over.data.current);
-        if (activeParentId === null || activeParentId !== overParentId)
+        setOverId(null);
+        setActiveId(null);
+        if (!over)
             return;
-        const newAst = applyReorder(ast, active.id, over.id, activeParentId);
-        onChange(rebuildNodes(newAst));
+        applyDrop(String(active.id), String(over.id));
     }
     function onDragCancel() {
-        setInvalidOverId(null);
+        setOverId(null);
+        setActiveId(null);
     }
-    const rootIds = ast.map((n) => n.id);
-    return (_jsx("div", { style: { cursor: invalidOverId !== null ? "not-allowed" : undefined }, children: _jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragOver: onDragOver, onDragEnd: onDragEnd, onDragCancel: onDragCancel, children: _jsx(InvalidOverContext.Provider, { value: invalidOverId, children: _jsx(SortableContext, { items: rootIds, strategy: verticalListSortingStrategy, children: ast.map((astNode, i) => (_jsxs("div", { children: [i > 0 && (_jsx("div", { style: {
-                                    height: "1px",
-                                    backgroundColor: "#e5e7eb",
-                                    margin: "8px 0",
-                                } })), _jsxs("div", { style: {
-                                    fontSize: "11px",
-                                    color: "#6b7280",
-                                    padding: "2px 0 4px 0",
-                                    fontWeight: 600,
-                                    letterSpacing: "0.05em",
-                                    textTransform: "uppercase",
-                                }, children: ["Slide ", i + 1] }), _jsx(SortableItem, { astNode: astNode, depth: 0, onChange: onChange, ast: ast })] }, astNode.id))) }) }) }) }));
+    return (_jsx("div", { children: _jsx(DndContext, { sensors: sensors, collisionDetection: pointerWithin, onDragStart: onDragStart, onDragOver: onDragOver, onDragEnd: onDragEnd, onDragCancel: onDragCancel, children: _jsx(ActiveIdContext.Provider, { value: activeId, children: _jsxs(OverIdContext.Provider, { value: overId, children: [_jsx(GapStrip, { parentId: "root", index: 0, depth: 0 }), ast.map((astNode, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("div", { style: {
+                                        height: "1px",
+                                        backgroundColor: "#e5e7eb",
+                                        margin: "8px 0",
+                                    } })), _jsxs("div", { style: {
+                                        fontSize: "11px",
+                                        color: "#6b7280",
+                                        padding: "2px 0 4px 0",
+                                        fontWeight: 600,
+                                        letterSpacing: "0.05em",
+                                        textTransform: "uppercase",
+                                    }, children: ["Slide ", i + 1] }), _jsx(Row, { astNode: astNode, depth: 0 }), _jsx(GapStrip, { parentId: "root", index: i + 1, depth: 0 })] }, astNode.id)))] }) }) }) }));
 }

package/dist/ast.d.ts

@@ -5,9 +5,11 @@ export interface AstNode {
     parentId: string;
     children?: AstNode[];
 }
+export declare function isContainerType(type: string): boolean;
 export declare function buildAst(nodes: POMNode[], parentId: string, counter: {
     value: number;
 }): AstNode[];
 export declare function rebuildNodes(astNodes: AstNode[]): POMNode[];
-export declare function applyReorder(ast: AstNode[], activeId: string, overId: string, activeParentId: string): AstNode[];
+export declare function applyMoveToGap(ast: AstNode[], activeId: string, newParentId: string, newIndex: number): AstNode[];
+export declare function applyMoveInside(ast: AstNode[], activeId: string, containerId: string): AstNode[];
 //# sourceMappingURL=ast.d.ts.map

package/dist/ast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ast.d.ts","sourceRoot":"","sources":["../src/ast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAG3D,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAID,wBAAgB,QAAQ,CACtB,KAAK,EAAE,OAAO,EAAE,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GACzB,OAAO,EAAE,CAeX;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAO3D;AAyCD,wBAAgB,YAAY,CAC1B,GAAG,EAAE,OAAO,EAAE,EACd,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,MAAM,GACrB,OAAO,EAAE,CAgBX"}
+{"version":3,"file":"ast.d.ts","sourceRoot":"","sources":["../src/ast.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAE3D,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAID,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAErD;AAED,wBAAgB,QAAQ,CACtB,KAAK,EAAE,OAAO,EAAE,EAChB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,GACzB,OAAO,EAAE,CAeX;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,CAO3D;AAmFD,wBAAgB,cAAc,CAC5B,GAAG,EAAE,OAAO,EAAE,EACd,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,EAAE,CA+BX;AAED,wBAAgB,eAAe,CAC7B,GAAG,EAAE,OAAO,EAAE,EACd,QAAQ,EAAE,MAAM,EAChB,WAAW,EAAE,MAAM,GAClB,OAAO,EAAE,CAqBX"}

package/dist/ast.js

@@ -1,5 +1,7 @@
-import { arrayMove } from "@dnd-kit/sortable";
 const CONTAINER_TYPES = new Set(["vstack", "hstack", "layer"]);
+export function isContainerType(type) {
+    return CONTAINER_TYPES.has(type);
+}
 export function buildAst(nodes, parentId, counter) {
     return nodes.map((node) => {
         const id = String(counter.value++);
@@ -35,37 +37,110 @@ function findNode(astNodes, id) {
     }
     return null;
 }
-function reorderInParent(astNodes, parentId, oldIndex, newIndex) {
-    return astNodes.map((astNode) => {
-        if (astNode.id === parentId && astNode.children) {
+function isDescendantOrSelf(node, id) {
+    if (node.id === id)
+        return true;
+    if (!node.children)
+        return false;
+    return node.children.some((c) => isDescendantOrSelf(c, id));
+}
+function removeById(astNodes, id) {
+    for (let i = 0; i < astNodes.length; i++) {
+        const current = astNodes[i];
+        if (current.id === id) {
+            return {
+                newAst: [...astNodes.slice(0, i), ...astNodes.slice(i + 1)],
+                removed: current,
+            };
+        }
+        if (current.children) {
+            const result = removeById(current.children, id);
+            if (result) {
+                return {
+                    newAst: [
+                        ...astNodes.slice(0, i),
+                        { ...current, children: result.newAst },
+                        ...astNodes.slice(i + 1),
+                    ],
+                    removed: result.removed,
+                };
+            }
+        }
+    }
+    return null;
+}
+function insertAt(astNodes, parentId, index, insertion) {
+    if (parentId === "root") {
+        const node = { ...insertion, parentId: "root" };
+        return [...astNodes.slice(0, index), node, ...astNodes.slice(index)];
+    }
+    return astNodes.map((n) => {
+        if (n.id === parentId) {
+            const children = n.children ?? [];
+            const node = { ...insertion, parentId };
             return {
-                ...astNode,
-                children: arrayMove(astNode.children, oldIndex, newIndex),
+                ...n,
+                children: [...children.slice(0, index), node, ...children.slice(index)],
             };
         }
-        if (astNode.children) {
+        if (n.children) {
             return {
-                ...astNode,
-                children: reorderInParent(astNode.children, parentId, oldIndex, newIndex),
+                ...n,
+                children: insertAt(n.children, parentId, index, insertion),
             };
         }
-        return astNode;
+        return n;
     });
 }
-export function applyReorder(ast, activeId, overId, activeParentId) {
-    if (activeParentId === "root") {
-        const oldIndex = ast.findIndex((c) => c.id === activeId);
-        const newIndex = ast.findIndex((c) => c.id === overId);
-        if (oldIndex === -1 || newIndex === -1)
+function siblingsOf(ast, parentId) {
+    if (parentId === "root")
+        return ast;
+    const parent = findNode(ast, parentId);
+    return parent?.children ?? null;
+}
+export function applyMoveToGap(ast, activeId, newParentId, newIndex) {
+    const active = findNode(ast, activeId);
+    if (!active)
+        return ast;
+    if (newParentId !== "root") {
+        const newParent = findNode(ast, newParentId);
+        if (!newParent)
+            return ast;
+        if (!isContainerType(newParent.node.type))
             return ast;
-        return arrayMove(ast, oldIndex, newIndex);
+        if (isDescendantOrSelf(active, newParentId))
+            return ast;
+    }
+    let adjustedIndex = newIndex;
+    if (active.parentId === newParentId) {
+        const siblings = siblingsOf(ast, newParentId);
+        if (siblings) {
+            const activeIndex = siblings.findIndex((c) => c.id === activeId);
+            if (activeIndex !== -1 && activeIndex < newIndex) {
+                adjustedIndex = newIndex - 1;
+            }
+        }
     }
-    const parent = findNode(ast, activeParentId);
-    if (!parent?.children)
+    const removeResult = removeById(ast, activeId);
+    if (!removeResult)
+        return ast;
+    return insertAt(removeResult.newAst, newParentId, adjustedIndex, removeResult.removed);
+}
+export function applyMoveInside(ast, activeId, containerId) {
+    const active = findNode(ast, activeId);
+    if (!active)
+        return ast;
+    if (isDescendantOrSelf(active, containerId))
+        return ast;
+    const container = findNode(ast, containerId);
+    if (!container)
+        return ast;
+    if (!isContainerType(container.node.type))
         return ast;
-    const oldIndex = parent.children.findIndex((c) => c.id === activeId);
-    const newIndex = parent.children.findIndex((c) => c.id === overId);
-    if (oldIndex === -1 || newIndex === -1)
+    const removeResult = removeById(ast, activeId);
+    if (!removeResult)
         return ast;
-    return reorderInParent(ast, activeParentId, oldIndex, newIndex);
+    const containerAfterRemove = findNode(removeResult.newAst, containerId);
+    const insertIndex = containerAfterRemove?.children?.length ?? 0;
+    return insertAt(removeResult.newAst, containerId, insertIndex, removeResult.removed);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hirokisakabe/pom-editor",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "Visual AST editor component for pom — drag-and-drop slide structure editing.",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,9 +35,7 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@hirokisakabe/pom": "^8.6.0"
+    "@hirokisakabe/pom": "^8.8.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -45,10 +43,10 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^6.0.2",
-    "jsdom": "^28.0.1",
+    "jsdom": "^29.1.1",
     "react": "^19",
     "react-dom": "^19",
-    "vitest": "^4.1.8"
+    "vitest": "^4.1.9"
   },
   "publishConfig": {
     "access": "public"