@powerhousedao/vetra 4.1.0-dev.9 → 4.1.0-dev.90

package/dist/editors/vetra-package/components/MetaForm.d.ts

@@ -0,0 +1,25 @@
+import type { Keyword } from "../../../document-models/vetra-package/index.js";
+export interface MetaFormProps {
+    name: string;
+    description: string;
+    category: string;
+    publisher: string;
+    publisherUrl: string;
+    githubRepository: string;
+    npmPackage: string;
+    keywords: Keyword[];
+    onNameChange?: (name: string) => void;
+    onDescriptionChange?: (description: string) => void;
+    onCategoryChange?: (category: string) => void;
+    onPublisherChange?: (publisher: string) => void;
+    onPublisherUrlChange?: (publisherUrl: string) => void;
+    onGithubRepositoryChange?: (githubRepository: string) => void;
+    onNpmPackageChange?: (npmPackage: string) => void;
+    onAddKeyword?: (keyword: {
+        id: string;
+        label: string;
+    }) => void;
+    onRemoveKeyword?: (id: string) => void;
+}
+export declare const MetaForm: React.FC<MetaFormProps>;
+//# sourceMappingURL=MetaForm.d.ts.map

package/dist/editors/vetra-package/components/MetaForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetaForm.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-package/components/MetaForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iDAAiD,CAAC;AAE/E,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,wBAAwB,CAAC,EAAE,CAAC,gBAAgB,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAChE,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgS5C,CAAC"}

package/dist/editors/vetra-package/components/MetaForm.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useDebounce } from "../../hooks/index.js";
+export const MetaForm = (props) => {
+    const { name: initialName, description: initialDescription, category: initialCategory, publisher: initialPublisher, publisherUrl: initialPublisherUrl, githubRepository: initialGithubRepository, npmPackage: initialNpmPackage, keywords: initialKeywords, onNameChange, onDescriptionChange, onCategoryChange, onPublisherChange, onPublisherUrlChange, onGithubRepositoryChange, onNpmPackageChange, onAddKeyword, onRemoveKeyword, } = props;
+    const [name, setName] = useState(initialName);
+    const [description, setDescription] = useState(initialDescription);
+    const [category, setCategory] = useState(initialCategory);
+    const [publisher, setPublisher] = useState(initialPublisher);
+    const [publisherUrl, setPublisherUrl] = useState(initialPublisherUrl);
+    const [githubRepository, setGithubRepository] = useState(initialGithubRepository);
+    const [npmPackage, setNpmPackage] = useState(initialNpmPackage);
+    // Keywords state
+    const [keywords, setKeywords] = useState(initialKeywords);
+    const [keywordInput, setKeywordInput] = useState("");
+    // Use the debounce hook with callbacks
+    useDebounce(name, onNameChange, 300);
+    useDebounce(description, onDescriptionChange, 300);
+    useDebounce(publisher, onPublisherChange, 300);
+    useDebounce(publisherUrl, onPublisherUrlChange, 300);
+    useDebounce(githubRepository, onGithubRepositoryChange, 300);
+    useDebounce(npmPackage, onNpmPackageChange, 300);
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-6 bg-white p-6 lg:grid-cols-3", children: [_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "package-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Name" }), _jsx("input", { id: "package-name", type: "text", value: name, onChange: (e) => setName(e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-description", className: "mb-2 block text-sm font-medium text-gray-700", children: "Description" }), _jsx("textarea", { id: "package-description", rows: 6, value: description, onChange: (e) => setDescription(e.target.value), className: "w-full resize-none rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "package-category", className: "mb-2 block text-sm font-medium text-gray-700", children: "Category" }), _jsxs("select", { id: "package-category", value: category, onChange: (e) => {
+                                    const newValue = e.target.value;
+                                    setCategory(newValue);
+                                    onCategoryChange?.(newValue);
+                                }, className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "", children: "Not selected" }), _jsx("option", { value: "Productivity", children: "Productivity" }), _jsx("option", { value: "Governance", children: "Governance" }), _jsx("option", { value: "Project Management", children: "Project Management" }), _jsx("option", { value: "Finance", children: "Finance" }), _jsx("option", { value: "Legal", children: "Legal" }), _jsx("option", { value: "People & Culture", children: "People & Culture" }), _jsx("option", { value: "Engineering", children: "Engineering" })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-publisher", className: "mb-2 block text-sm font-medium text-gray-700", children: "Publisher" }), _jsx("input", { id: "package-publisher", type: "text", value: publisher, onChange: (e) => setPublisher(e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-publisher-url", className: "mb-2 block text-sm font-medium text-gray-700", children: "Publisher URL" }), _jsx("input", { id: "package-publisher-url", type: "text", value: publisherUrl, onChange: (e) => setPublisherUrl(e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-keywords", className: "mb-2 block text-sm font-medium text-gray-700", children: "Keywords" }), _jsxs("div", { className: "space-y-2", children: [_jsx("input", { id: "package-keywords", type: "text", value: keywordInput, onChange: (e) => setKeywordInput(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === "Enter" && keywordInput.trim()) {
+                                                e.preventDefault();
+                                                const newKeyword = {
+                                                    id: Date.now().toString(), // Generate a unique ID
+                                                    label: keywordInput.trim(),
+                                                };
+                                                setKeywords([...keywords, newKeyword]);
+                                                onAddKeyword?.(newKeyword);
+                                                setKeywordInput("");
+                                            }
+                                        }, placeholder: "Type a keyword and press Enter", className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" }), _jsx("div", { className: "flex min-h-[80px] flex-wrap gap-2 rounded-md border border-gray-300 p-3", children: keywords.map((keyword) => (_jsxs("span", { className: "inline-flex items-center rounded border border-blue-300 bg-blue-100 px-2 py-0.5 text-xs text-blue-800", children: [keyword.label, _jsx("button", { onClick: () => {
+                                                        setKeywords(keywords.filter((k) => k.id !== keyword.id));
+                                                        onRemoveKeyword?.(keyword.id);
+                                                    }, className: "ml-1 text-blue-600 hover:text-blue-800 focus:outline-none", children: "\u00D7" })] }, keyword.id))) })] })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("label", { htmlFor: "package-github", className: "mb-2 block text-sm font-medium text-gray-700", children: "Github Repository" }), _jsx("input", { id: "package-github", type: "text", value: githubRepository, onChange: (e) => setGithubRepository(e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-npm", className: "mb-2 block text-sm font-medium text-gray-700", children: "NPM-package" }), _jsx("input", { id: "package-npm", type: "text", value: npmPackage, onChange: (e) => setNpmPackage(e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-version", className: "mb-2 block text-sm font-medium text-gray-700", children: "Version" }), _jsx("input", { id: "package-version", type: "text", placeholder: "1.0.0-dev", readOnly: true, className: "w-full cursor-not-allowed rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-gray-500" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-license", className: "mb-2 block text-sm font-medium text-gray-700", children: "License" }), _jsx("input", { id: "package-license", type: "text", placeholder: "AGPL-3.0-only", readOnly: true, className: "w-full cursor-not-allowed rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-gray-500" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "package-install", className: "mb-2 block text-sm font-medium text-gray-700", children: "Install with:" }), _jsx("input", { id: "package-install", type: "text", placeholder: "@powerhousedao/todo-demo-package", readOnly: true, className: "w-full cursor-not-allowed rounded-md border border-gray-300 bg-gray-50 px-3 py-2 text-gray-500" })] })] })] }));
+};

package/dist/editors/vetra-package/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MetaForm.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/editors/vetra-package/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../editors/vetra-package/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/editors/vetra-package/components/index.js

@@ -0,0 +1 @@
+export * from "./MetaForm.js";

package/dist/editors/vetra-package/config.d.ts

@@ -0,0 +1,3 @@
+import type { PHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+export declare const editorConfig: PHDocumentEditorConfig;
+//# sourceMappingURL=config.d.ts.map

package/dist/editors/vetra-package/config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../editors/vetra-package/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAE7E,eAAO,MAAM,YAAY,EAAE,sBAE1B,CAAC"}

package/dist/editors/vetra-package/config.js

@@ -0,0 +1,3 @@
+export const editorConfig = {
+    isExternalControlsEnabled: false,
+};

package/dist/editors/vetra-package/editor.d.ts

@@ -0,0 +1,5 @@
+export type EditorProps = {
+    displayToolbar?: boolean;
+};
+export declare function Editor(props: EditorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=editor.d.ts.map

package/dist/editors/vetra-package/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/vetra-package/editor.tsx"],"names":[],"mappings":"AAQA,MAAM,MAAM,WAAW,GAAG;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,2CA2GxC"}

package/dist/editors/vetra-package/editor.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DocumentToolbar } from "@powerhousedao/design-system";
+import { useSetPHDocumentEditorConfig } from "@powerhousedao/reactor-browser";
+import { useCallback } from "react";
+import { actions } from "../../document-models/vetra-package/index.js";
+import { useSelectedDriveVetraPackage } from "../hooks/useVetraDocument.js";
+import { MetaForm } from "./components/MetaForm.js";
+import { editorConfig } from "./config.js";
+export function Editor(props) {
+    const { displayToolbar = true } = props;
+    useSetPHDocumentEditorConfig(editorConfig);
+    const [document, dispatch] = useSelectedDriveVetraPackage();
+    const onNameChange = useCallback((name) => {
+        if (!document.state.global.name && !name)
+            return;
+        if (name === document.state.global.name)
+            return;
+        dispatch(actions.setPackageName({ name }));
+    }, [document.state.global.name]);
+    const onDescriptionChange = useCallback((description) => {
+        if (!document.state.global.description && !description)
+            return;
+        if (description === document.state.global.description)
+            return;
+        dispatch(actions.setPackageDescription({ description }));
+    }, [document.state.global.description]);
+    const onCategoryChange = useCallback((category) => {
+        if (!document.state.global.category && !category)
+            return;
+        if (category === document.state.global.category)
+            return;
+        dispatch(actions.setPackageCategory({ category }));
+    }, [document.state.global.category]);
+    const onPublisherChange = useCallback((name) => {
+        if (!document.state.global.author.name && !name)
+            return;
+        if (name === document.state.global.author.name)
+            return;
+        dispatch(actions.setPackageAuthorName({ name }));
+    }, [document.state.global.author.name]);
+    const onPublisherUrlChange = useCallback((website) => {
+        if (!document.state.global.author.website && !website)
+            return;
+        if (website === document.state.global.author.website)
+            return;
+        dispatch(actions.setPackageAuthorWebsite({ website }));
+    }, [document.state.global.author.website]);
+    const onGithubRepositoryChange = useCallback((url) => {
+        if (!document.state.global.githubUrl && !url)
+            return;
+        if (url === document.state.global.githubUrl)
+            return;
+        dispatch(actions.setPackageGithubUrl({ url }));
+    }, [document.state.global.githubUrl]);
+    const onNpmPackageChange = useCallback((url) => {
+        if (!document.state.global.npmUrl && !url)
+            return;
+        if (url === document.state.global.npmUrl)
+            return;
+        dispatch(actions.setPackageNpmUrl({ url }));
+    }, [document.state.global.npmUrl]);
+    const onAddKeyword = useCallback((keyword) => {
+        dispatch(actions.addPackageKeyword(keyword));
+    }, []);
+    const onRemoveKeyword = useCallback((id) => {
+        dispatch(actions.removePackageKeyword({ id }));
+    }, []);
+    return (_jsxs("div", { children: [displayToolbar && _jsx(DocumentToolbar, {}), _jsx(MetaForm, { name: document.state.global.name ?? "", description: document.state.global.description ?? "", category: document.state.global.category ?? "", publisher: document.state.global.author.name ?? "", publisherUrl: document.state.global.author.website ?? "", githubRepository: document.state.global.githubUrl ?? "", npmPackage: document.state.global.npmUrl ?? "", keywords: document.state.global.keywords, onNameChange: onNameChange, onDescriptionChange: onDescriptionChange, onCategoryChange: onCategoryChange, onPublisherChange: onPublisherChange, onPublisherUrlChange: onPublisherUrlChange, onGithubRepositoryChange: onGithubRepositoryChange, onNpmPackageChange: onNpmPackageChange, onAddKeyword: onAddKeyword, onRemoveKeyword: onRemoveKeyword })] }));
+}

package/dist/editors/vetra-package/editor.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=editor.test.d.ts.map

package/dist/editors/vetra-package/editor.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.test.d.ts","sourceRoot":"","sources":["../../../editors/vetra-package/editor.test.tsx"],"names":[],"mappings":""}

package/dist/editors/vetra-package/editor.test.js

@@ -0,0 +1,330 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { useSelectedDriveVetraPackage } from "../hooks/useVetraDocument.js";
+import { Editor } from "./editor.js";
+vi.mock("../hooks/useVetraDocument.js", () => ({
+    useSelectedDriveVetraPackage: vi.fn(),
+}));
+describe("VetraPackage Editor", () => {
+    let mockDispatch;
+    beforeEach(() => {
+        mockDispatch = vi.fn();
+        vi.mocked(useSelectedDriveVetraPackage).mockReturnValue([
+            {
+                state: {
+                    global: {
+                        name: null,
+                        description: null,
+                        category: null,
+                        author: {
+                            name: null,
+                            website: null,
+                        },
+                        keywords: [],
+                        githubUrl: null,
+                        npmUrl: null,
+                    },
+                },
+            },
+            mockDispatch,
+        ]);
+    });
+    describe("Core Rendering", () => {
+        it("should render all main form sections and labels", () => {
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("Name")).toBeInTheDocument();
+            expect(screen.getByText("Description")).toBeInTheDocument();
+            expect(screen.getByText("Category")).toBeInTheDocument();
+            expect(screen.getByText("Publisher")).toBeInTheDocument();
+            expect(screen.getByText("Publisher URL")).toBeInTheDocument();
+            expect(screen.getByText("Keywords")).toBeInTheDocument();
+            expect(screen.getByText("Github Repository")).toBeInTheDocument();
+            expect(screen.getByText("NPM-package")).toBeInTheDocument();
+        });
+    });
+    describe("Initial Data Display", () => {
+        it("should display existing package data when document has values", () => {
+            vi.mocked(useSelectedDriveVetraPackage).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test-package",
+                            description: "A test package",
+                            category: "Productivity",
+                            author: {
+                                name: "John Doe",
+                                website: "https://johndoe.com",
+                            },
+                            keywords: [
+                                { id: "kw-1", label: "react" },
+                                { id: "kw-2", label: "typescript" },
+                            ],
+                            githubUrl: "https://github.com/test/package",
+                            npmUrl: "https://npmjs.com/package/test",
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            render(_jsx(Editor, {}));
+            expect(screen.getByDisplayValue("test-package")).toBeInTheDocument();
+            expect(screen.getByDisplayValue("A test package")).toBeInTheDocument();
+            expect(screen.getByDisplayValue("Productivity")).toBeInTheDocument();
+            expect(screen.getByDisplayValue("John Doe")).toBeInTheDocument();
+            expect(screen.getByDisplayValue("https://johndoe.com")).toBeInTheDocument();
+            expect(screen.getByText("react")).toBeInTheDocument();
+            expect(screen.getByText("typescript")).toBeInTheDocument();
+            expect(screen.getByDisplayValue("https://github.com/test/package")).toBeInTheDocument();
+            expect(screen.getByDisplayValue("https://npmjs.com/package/test")).toBeInTheDocument();
+        });
+    });
+    describe("Text Input Fields - Dispatch Verification", () => {
+        it("should dispatch setPackageName when name changes", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Name");
+            await user.type(nameInput, "new-package");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_NAME",
+                    input: { name: "new-package" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch setPackageDescription when description changes", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const descriptionInput = screen.getByLabelText("Description");
+            await user.type(descriptionInput, "New description");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_DESCRIPTION",
+                    input: { description: "New description" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch setPackageAuthorName when publisher changes", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const publisherInput = screen.getByLabelText("Publisher");
+            await user.type(publisherInput, "Acme Corp");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_AUTHOR_NAME",
+                    input: { name: "Acme Corp" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch setPackageAuthorWebsite when publisher URL changes", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const publisherUrlInput = screen.getByLabelText("Publisher URL");
+            await user.type(publisherUrlInput, "https://acme.com");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_AUTHOR_WEBSITE",
+                    input: { website: "https://acme.com" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch setPackageGithubUrl when Github repository changes", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const githubInput = screen.getByLabelText("Github Repository");
+            await user.type(githubInput, "https://github.com/acme/test");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_GITHUB_URL",
+                    input: { url: "https://github.com/acme/test" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should dispatch setPackageNpmUrl when NPM package changes", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const npmInput = screen.getByLabelText("NPM-package");
+            await user.type(npmInput, "https://npmjs.com/package/acme");
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_NPM_URL",
+                    input: { url: "https://npmjs.com/package/acme" },
+                }));
+            }, { timeout: 500 });
+        });
+    });
+    describe("Conditional Dispatch Logic", () => {
+        it("should dispatch when clearing a non-empty field", async () => {
+            vi.mocked(useSelectedDriveVetraPackage).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "existing-package",
+                            description: null,
+                            category: null,
+                            author: { name: null, website: null },
+                            keywords: [],
+                            githubUrl: null,
+                            npmUrl: null,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Name");
+            await user.clear(nameInput);
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_NAME",
+                    input: { name: "" },
+                }));
+            }, { timeout: 500 });
+        });
+        it("should NOT dispatch when typing identical value without clearing", async () => {
+            vi.mocked(useSelectedDriveVetraPackage).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: "test",
+                            description: null,
+                            category: null,
+                            author: { name: null, website: null },
+                            keywords: [],
+                            githubUrl: null,
+                            npmUrl: null,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Name");
+            // Simulate user selecting all text and typing the same value
+            await user.tripleClick(nameInput); // Select all
+            await user.type(nameInput, "test");
+            await waitFor(() => {
+                expect(mockDispatch).not.toHaveBeenCalled();
+            });
+        });
+        it("should NOT dispatch when both old and new values are empty", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Name");
+            await user.click(nameInput);
+            await user.tab(); // Focus and blur without typing
+            await waitFor(() => {
+                expect(mockDispatch).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe("Category Selection", () => {
+        it("should dispatch category change immediately (no debounce)", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const categorySelect = screen.getByLabelText("Category");
+            await user.selectOptions(categorySelect, "Productivity");
+            // Should dispatch immediately without waiting for debounce
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "SET_PACKAGE_CATEGORY",
+                input: { category: "Productivity" },
+            }));
+        });
+    });
+    describe("Debounce Behavior", () => {
+        it("should debounce text input changes (300ms delay)", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const nameInput = screen.getByLabelText("Name");
+            // Type multiple characters quickly
+            await user.type(nameInput, "test");
+            // Should not dispatch immediately
+            expect(mockDispatch).not.toHaveBeenCalled();
+            // Should dispatch after debounce delay
+            await waitFor(() => {
+                expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                    type: "SET_PACKAGE_NAME",
+                    input: { name: "test" },
+                }));
+            }, { timeout: 500 });
+        });
+    });
+    describe("Keywords Management", () => {
+        it("should add keyword on Enter with valid input", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const keywordInput = screen.getByPlaceholderText("Type a keyword and press Enter");
+            await user.type(keywordInput, "react{Enter}");
+            expect(screen.getByText("react")).toBeInTheDocument();
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "ADD_PACKAGE_KEYWORD",
+                input: expect.objectContaining({
+                    label: "react",
+                }),
+            }));
+        });
+        it("should NOT add empty or whitespace-only keyword", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            const keywordInput = screen.getByPlaceholderText("Type a keyword and press Enter");
+            // Try to add empty keyword
+            await user.type(keywordInput, "{Enter}");
+            expect(mockDispatch).not.toHaveBeenCalled();
+            // Try to add whitespace-only keyword
+            await user.type(keywordInput, "   {Enter}");
+            expect(mockDispatch).not.toHaveBeenCalled();
+        });
+        it("should display keywords and allow removal", async () => {
+            vi.mocked(useSelectedDriveVetraPackage).mockReturnValue([
+                {
+                    state: {
+                        global: {
+                            name: null,
+                            description: null,
+                            category: null,
+                            author: { name: null, website: null },
+                            keywords: [
+                                { id: "kw-1", label: "react" },
+                                { id: "kw-2", label: "typescript" },
+                            ],
+                            githubUrl: null,
+                            npmUrl: null,
+                        },
+                    },
+                },
+                mockDispatch,
+            ]);
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            expect(screen.getByText("react")).toBeInTheDocument();
+            expect(screen.getByText("typescript")).toBeInTheDocument();
+            // Find and click the remove button for "react"
+            const reactKeyword = screen.getByText("react").closest("span");
+            const removeButton = reactKeyword?.querySelector("button");
+            if (removeButton) {
+                await user.click(removeButton);
+            }
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "REMOVE_PACKAGE_KEYWORD",
+                input: { id: "kw-1" },
+            }));
+        });
+        it("should dispatch addKeyword action with correct payload", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Editor, {}));
+            // Add keyword
+            const keywordInput = screen.getByPlaceholderText("Type a keyword and press Enter");
+            await user.type(keywordInput, "testing{Enter}");
+            expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({
+                type: "ADD_PACKAGE_KEYWORD",
+                input: expect.objectContaining({
+                    label: "testing",
+                    id: expect.any(String),
+                }),
+            }));
+        });
+    });
+});

package/dist/editors/vetra-package/index.d.ts

@@ -0,0 +1,5 @@
+import type { EditorModule } from "document-model";
+import { type EditorProps } from "./editor.js";
+export declare const module: EditorModule<EditorProps>;
+export default module;
+//# sourceMappingURL=index.d.ts.map

package/dist/editors/vetra-package/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../editors/vetra-package/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,eAAO,MAAM,MAAM,EAAE,YAAY,CAAC,WAAW,CAO5C,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/editors/vetra-package/index.js

@@ -0,0 +1,10 @@
+import { Editor } from "./editor.js";
+export const module = {
+    Component: Editor,
+    documentTypes: ["powerhouse/package"],
+    config: {
+        id: "vetra-package-editor",
+        name: "Vetra Package Editor",
+    },
+};
+export default module;

package/dist/index.d.ts

@@ -1,5 +1,11 @@
-import type { Manifest } from "document-model";
+import type { DocumentModelModule, EditorModule, Manifest } from "document-model";
+import type { AppModulePHState } from "./document-models/app-module/gen/types.js";
+import type { DocumentEditorPHState } from "./document-models/document-editor/gen/types.js";
+import type { ProcessorModulePHState } from "./document-models/processor-module/gen/types.js";
+import type { SubgraphModulePHState } from "./document-models/subgraph-module/gen/types.js";
+import type { VetraPackagePHState } from "./document-models/vetra-package/gen/types.js";
 export declare const manifest: Manifest;
-export declare const documentModels: import("document-model").DocumentModelModule<import("./document-models/vetra-package/index.js").VetraPackageDocument>[];
-export declare const editors: unknown[];
+export declare const documentModels: (DocumentModelModule<DocumentEditorPHState> | DocumentModelModule<VetraPackagePHState> | DocumentModelModule<SubgraphModulePHState> | DocumentModelModule<ProcessorModulePHState> | DocumentModelModule<AppModulePHState>)[];
+export declare const editors: EditorModule[];
+export * from "./editors/hooks/useVetraDocument.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAK/C,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,yHAAuC,CAAC;AACnE,eAAO,MAAM,OAAO,WAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACT,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AAE5F,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AAC9F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AAIxF,eAAO,MAAM,QAAQ,EAAE,QAAuB,CAAC;AAC/C,eAAO,MAAM,cAAc,EAAE,CACzB,mBAAmB,CAAC,qBAAqB,CAAC,GAC1C,mBAAmB,CAAC,mBAAmB,CAAC,GACxC,mBAAmB,CAAC,qBAAqB,CAAC,GAC1C,mBAAmB,CAAC,sBAAsB,CAAC,GAC3C,mBAAmB,CAAC,gBAAgB,CAAC,CACxC,EAAyC,CAAC;AAC3C,eAAO,MAAM,OAAO,EAAE,YAAY,EAAkC,CAAC;AAErE,cAAc,qCAAqC,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
-import * as documentModelsExports from './document-models/index.js';
-import * as editorsExports from './editors/index.js';
+import * as documentModelsExports from "./document-models/index.js";
+import * as editorsExports from "./editors/index.js";
 import manifestJson from "./powerhouse.manifest.json" with { type: "json" };
 export const manifest = manifestJson;
 export const documentModels = Object.values(documentModelsExports);
 export const editors = Object.values(editorsExports);
-//# sourceMappingURL=index.js.map
+export * from "./editors/hooks/useVetraDocument.js";