@hirokisakabe/pom-editor 0.2.4 → 0.2.6

package/README.md

@@ -1,14 +1,33 @@
-# @hirokisakabe/pom-editor
+<h1 align="center">pom-editor</h1>
+<p align="center">
+  Visual AST editor for <a href="https://www.npmjs.com/package/@hirokisakabe/pom">pom</a> — drag-and-drop reordering of slide node trees.
+</p>
 
-Visual AST editor for [pom](https://github.com/hirokisakabe/pom) — drag-and-drop reordering of slide node trees.
+<p align="center">
+  <a href="https://www.npmjs.com/package/@hirokisakabe/pom-editor"><img src="https://img.shields.io/npm/v/@hirokisakabe/pom-editor.svg" alt="npm version"></a>
+  <a href="https://github.com/hirokisakabe/pom/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@hirokisakabe/pom-editor.svg" alt="License"></a>
+</p>
 
-## Install
+---
+
+## 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.
+- **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.
+
+## Installation
+
+> Requires React 18+
 
 ```bash
-npm install @hirokisakabe/pom-editor @hirokisakabe/pom react
+npm install @hirokisakabe/pom-editor react
 ```
 
-## Usage
+`@hirokisakabe/pom` is pulled in automatically as a regular dependency — no separate install needed.
+
+## Quick Start
 
 ```tsx
 import { PomAstEditor } from "@hirokisakabe/pom-editor";
@@ -50,11 +69,6 @@ function App() {
 
 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.
 
-## Requirements
-
-- React 18 or later
-- `@hirokisakabe/pom` (peer dependency resolved automatically as a workspace dependency; install separately in non-monorepo setups)
-
 ## License
 
 MIT

package/dist/AstTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AstTree.d.ts","sourceRoot":"","sources":["../src/AstTree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AA0J3D,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,qBAoEtD"}
+{"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"}

package/dist/AstTree.js

@@ -1,4 +1,5 @@
 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";
@@ -44,7 +45,10 @@ 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 },
@@ -54,6 +58,11 @@ function SortableItem({ astNode, depth, onChange, ast }) {
         transition,
         opacity: isDragging ? 0.4 : 1,
     };
+    const handleCursor = isInvalidOver
+        ? "not-allowed"
+        : isDragging
+            ? "grabbing"
+            : "grab";
     return (_jsxs("div", { ref: setNodeRef, style: style, children: [_jsxs("div", { style: {
                     display: "flex",
                     alignItems: "center",
@@ -63,9 +72,12 @@ 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: isDragging ? "grabbing" : "grab",
-                            color: "#9ca3af",
+                            cursor: handleCursor,
+                            color: isInvalidOver ? "#dc2626" : "#9ca3af",
                             fontSize: "12px",
                             lineHeight: 1,
                             flexShrink: 0,
@@ -82,32 +94,57 @@ 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;
+}
 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);
+            return;
+        }
+        const activeParentId = getParentId(active.data.current);
+        const overParentId = getParentId(over.data.current);
+        if (activeParentId !== overParentId) {
+            setInvalidOverId(over.id);
+        }
+        else {
+            setInvalidOverId(null);
+        }
+    }
     function onDragEnd({ active, over }) {
+        setInvalidOverId(null);
         if (!over || active.id === over.id)
             return;
-        const activeParentId = active.data.current
-            .parentId;
-        const overParentId = over.data.current.parentId;
-        if (activeParentId !== overParentId)
+        const activeParentId = getParentId(active.data.current);
+        const overParentId = getParentId(over.data.current);
+        if (activeParentId === null || activeParentId !== overParentId)
             return;
         const newAst = applyReorder(ast, active.id, over.id, activeParentId);
         onChange(rebuildNodes(newAst));
     }
+    function onDragCancel() {
+        setInvalidOverId(null);
+    }
     const rootIds = ast.map((n) => n.id);
-    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: onDragEnd, 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", { 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))) }) }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hirokisakabe/pom-editor",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Visual AST editor component for pom — drag-and-drop slide structure editing.",
   "type": "module",
   "main": "./dist/index.js",
@@ -37,20 +37,30 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@hirokisakabe/pom": "^8.5.0"
+    "@hirokisakabe/pom": "^8.6.0"
   },
   "devDependencies": {
-    "@types/react": "^19"
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^28.0.1",
+    "react": "^19",
+    "react-dom": "^19",
+    "vitest": "^4.1.8"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc -p tsconfig.build.json",
     "fmt": "prettier --write .",
     "fmt:check": "prettier --check .",
     "knip": "knip",
     "lint": "eslint",
+    "test": "vitest",
+    "test:run": "vitest run",
     "typecheck": "tsc --noEmit -p tsconfig.json"
   }
 }