@hirokisakabe/pom-editor 0.2.0

package/README.md

@@ -0,0 +1,60 @@
+# @hirokisakabe/pom-editor
+
+Visual AST editor for [pom](https://github.com/hirokisakabe/pom) — drag-and-drop reordering of slide node trees.
+
+## Install
+
+```bash
+npm install @hirokisakabe/pom-editor @hirokisakabe/pom react
+```
+
+## Usage
+
+```tsx
+import { PomAstEditor } from "@hirokisakabe/pom-editor";
+import { useState } from "react";
+
+const initialXml = `
+<Slide>
+  <VStack gap="16" padding="24">
+    <Text fontSize="32" bold="true">Title</Text>
+    <Text>Body text</Text>
+  </VStack>
+</Slide>
+`;
+
+function App() {
+  const [xml, setXml] = useState(initialXml);
+
+  return (
+    <div style={{ display: "flex", height: "100vh" }}>
+      <div style={{ width: 300, borderRight: "1px solid #e5e7eb" }}>
+        <PomAstEditor xml={xml} onChange={setXml} />
+      </div>
+      <div style={{ flex: 1, padding: 24 }}>
+        <pre>{xml}</pre>
+      </div>
+    </div>
+  );
+}
+```
+
+## API
+
+### `<PomAstEditor xml onChange />`
+
+| Prop       | Type                    | Description                                              |
+| ---------- | ----------------------- | -------------------------------------------------------- |
+| `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.
+
+## 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

@@ -0,0 +1,8 @@
+import type { AstNode } from "./ast.ts";
+import type { POMNode } from "@hirokisakabe/pom/clientApi";
+export interface AstTreeProps {
+    ast: AstNode[];
+    onChange: (nodes: POMNode[]) => void;
+}
+export declare function AstTree({ ast, onChange }: AstTreeProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AstTree.d.ts.map

package/dist/AstTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AstTree.d.ts","sourceRoot":"","sources":["../src/AstTree.tsx"],"names":[],"mappings":"AAeA,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,2CAoEtD"}

package/dist/AstTree.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+const NODE_LABELS = {
+    text: "Text",
+    image: "Image",
+    table: "Table",
+    shape: "Shape",
+    chart: "Chart",
+    timeline: "Timeline",
+    matrix: "Matrix",
+    tree: "Tree",
+    flow: "Flow",
+    processArrow: "ProcessArrow",
+    pyramid: "Pyramid",
+    ul: "Ul",
+    ol: "Ol",
+    line: "Line",
+    arrow: "Arrow",
+    vstack: "VStack",
+    hstack: "HStack",
+    layer: "Layer",
+    icon: "Icon",
+    svg: "Svg",
+};
+function nodeLabel(node) {
+    const base = NODE_LABELS[node.type] ?? node.type;
+    const record = node;
+    if (node.type === "text" && typeof record.text === "string") {
+        const preview = record.text.slice(0, 20);
+        return `${base}: "${preview}${record.text.length > 20 ? "…" : ""}"`;
+    }
+    if (node.type === "image" && typeof record.src === "string") {
+        return `${base}: ${record.src.split("/").pop() ?? record.src}`;
+    }
+    if (node.type === "icon" && typeof record.name === "string") {
+        return `${base}: ${record.name}`;
+    }
+    if (node.type === "shape" && typeof record.text === "string") {
+        const preview = record.text.slice(0, 20);
+        return `${base}: "${preview}${record.text.length > 20 ? "…" : ""}"`;
+    }
+    return base;
+}
+function SortableItem({ astNode, depth, onChange, ast }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({
+        id: astNode.id,
+        data: { parentId: astNode.parentId },
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.4 : 1,
+    };
+    return (_jsxs("div", { ref: setNodeRef, style: style, children: [_jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    paddingLeft: `${depth * 16}px`,
+                    paddingTop: "3px",
+                    paddingBottom: "3px",
+                    borderRadius: "4px",
+                    userSelect: "none",
+                }, children: [_jsx("span", { ...listeners, ...attributes, style: {
+                            cursor: isDragging ? "grabbing" : "grab",
+                            color: "#9ca3af",
+                            fontSize: "12px",
+                            lineHeight: 1,
+                            flexShrink: 0,
+                        }, title: "\u30C9\u30E9\u30C3\u30B0\u3057\u3066\u4E26\u3073\u66FF\u3048", children: "\u283F" }), _jsx("span", { style: {
+                            fontSize: "13px",
+                            fontFamily: "monospace",
+                            color: astNode.children ? "#1d4ed8" : "#374151",
+                            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 }))] }));
+}
+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))) }));
+}
+export function AstTree({ ast, onChange }) {
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 4 },
+    }));
+    function onDragEnd({ active, over }) {
+        if (!over || active.id === over.id)
+            return;
+        const activeParentId = active.data.current
+            .parentId;
+        const overParentId = over.data.current.parentId;
+        if (activeParentId !== overParentId)
+            return;
+        const newAst = applyReorder(ast, active.id, over.id, activeParentId);
+        onChange(rebuildNodes(newAst));
+    }
+    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))) }) }));
+}

package/dist/PomAstEditor.d.ts

@@ -0,0 +1,6 @@
+export interface PomAstEditorProps {
+    xml: string;
+    onChange: (xml: string) => void;
+}
+export declare function PomAstEditor({ xml, onChange }: PomAstEditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PomAstEditor.d.ts.map

package/dist/PomAstEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PomAstEditor.d.ts","sourceRoot":"","sources":["../src/PomAstEditor.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;AAED,wBAAgB,YAAY,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA0DhE"}

package/dist/PomAstEditor.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { parseXml, serializeXml } from "@hirokisakabe/pom/clientApi";
+import { AstTree } from "./AstTree.js";
+import { buildAst } from "./ast.js";
+export function PomAstEditor({ xml, onChange }) {
+    const [ast, setAst] = useState([]);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        try {
+            const nodes = parseXml(xml);
+            const counter = { value: 0 };
+            setAst(buildAst(nodes, "root", counter));
+            setError(null);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : "XML parse error");
+        }
+    }, [xml]);
+    function handleChange(nodes) {
+        const counter = { value: 0 };
+        const newAst = buildAst(nodes, "root", counter);
+        setAst(newAst);
+        onChange(serializeXml(nodes));
+    }
+    if (error) {
+        return (_jsx("div", { style: {
+                padding: "12px",
+                fontSize: "12px",
+                color: "#dc2626",
+                fontFamily: "monospace",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-word",
+            }, children: error }));
+    }
+    if (ast.length === 0) {
+        return (_jsx("div", { style: {
+                padding: "12px",
+                fontSize: "13px",
+                color: "#9ca3af",
+            }, children: "No nodes" }));
+    }
+    return (_jsx("div", { style: { overflow: "auto", height: "100%", padding: "8px" }, children: _jsx(AstTree, { ast: ast, onChange: handleChange }) }));
+}

package/dist/ast.d.ts

@@ -0,0 +1,13 @@
+import type { POMNode } from "@hirokisakabe/pom/clientApi";
+export interface AstNode {
+    id: string;
+    node: POMNode;
+    parentId: string;
+    children?: AstNode[];
+}
+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[];
+//# sourceMappingURL=ast.d.ts.map

package/dist/ast.d.ts.map

@@ -0,0 +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"}

package/dist/ast.js

@@ -0,0 +1,71 @@
+import { arrayMove } from "@dnd-kit/sortable";
+const CONTAINER_TYPES = new Set(["vstack", "hstack", "layer"]);
+export function buildAst(nodes, parentId, counter) {
+    return nodes.map((node) => {
+        const id = String(counter.value++);
+        if (CONTAINER_TYPES.has(node.type)) {
+            const children = node.children ?? [];
+            return {
+                id,
+                node,
+                parentId,
+                children: buildAst(children, id, counter),
+            };
+        }
+        return { id, node, parentId };
+    });
+}
+export function rebuildNodes(astNodes) {
+    return astNodes.map(({ node, children }) => {
+        if (children) {
+            return { ...node, children: rebuildNodes(children) };
+        }
+        return node;
+    });
+}
+function findNode(astNodes, id) {
+    for (const n of astNodes) {
+        if (n.id === id)
+            return n;
+        if (n.children) {
+            const found = findNode(n.children, id);
+            if (found)
+                return found;
+        }
+    }
+    return null;
+}
+function reorderInParent(astNodes, parentId, oldIndex, newIndex) {
+    return astNodes.map((astNode) => {
+        if (astNode.id === parentId && astNode.children) {
+            return {
+                ...astNode,
+                children: arrayMove(astNode.children, oldIndex, newIndex),
+            };
+        }
+        if (astNode.children) {
+            return {
+                ...astNode,
+                children: reorderInParent(astNode.children, parentId, oldIndex, newIndex),
+            };
+        }
+        return astNode;
+    });
+}
+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)
+            return ast;
+        return arrayMove(ast, oldIndex, newIndex);
+    }
+    const parent = findNode(ast, activeParentId);
+    if (!parent?.children)
+        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)
+        return ast;
+    return reorderInParent(ast, activeParentId, oldIndex, newIndex);
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { PomAstEditor } from "./PomAstEditor.tsx";
+export type { PomAstEditorProps } from "./PomAstEditor.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { PomAstEditor } from "./PomAstEditor.js";

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@hirokisakabe/pom-editor",
+  "version": "0.2.0",
+  "description": "Visual AST editor component for pom — drag-and-drop slide structure editing.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "homepage": "https://github.com/hirokisakabe/pom#readme",
+  "bugs": {
+    "url": "https://github.com/hirokisakabe/pom/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirokisakabe/pom.git",
+    "directory": "packages/pom-editor"
+  },
+  "license": "MIT",
+  "author": "Hiroki Sakabe",
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc",
+    "fmt": "prettier --write .",
+    "fmt:check": "prettier --check .",
+    "knip": "knip",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hirokisakabe/pom": "^8.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript-eslint": "^8.59.4"
+  }
+}