@powerhousedao/vetra 6.0.0-dev.14 → 6.0.0-dev.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -97,7 +97,7 @@ export const AppEditorForm = () => {
97
97
  handleAddDocumentType(selectedValue);
98
98
  }
99
99
  };
100
- return (_jsxs("div", { className: "space-y-6 bg-white p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "App Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "app-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "App Name" }), _jsx("input", { id: "app-name", type: "text", value: appName, onChange: (e) => setAppName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter app name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && (_jsxs("select", { onChange: (e) => handleDocumentTypeSelection(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", children: [_jsx("option", { children: "Select a document type to add" }), _jsx("option", { children: "--- Vetra drive document types ---" }), _jsx("option", { value: ALL_IN_DRIVE, children: "Add all document types in Vetra drive" }), documentTypesInSelectedDrive
100
+ return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "App Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "app-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "App Name" }), _jsx("input", { id: "app-name", type: "text", value: appName, onChange: (e) => setAppName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter app name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && (_jsxs("select", { onChange: (e) => handleDocumentTypeSelection(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", children: [_jsx("option", { children: "Select a document type to add" }), _jsx("option", { children: "--- Vetra drive document types ---" }), _jsx("option", { value: ALL_IN_DRIVE, children: "Add all document types in Vetra drive" }), documentTypesInSelectedDrive
101
101
  ?.filter((dt) => !selectedDocumentTypes.includes(dt))
102
102
  .map((docType) => (_jsx("option", { value: docType, children: docType }, docType))), _jsx("option", { children: "--- Reactor document types ---" }), _jsx("option", { value: ALL_IN_REACTOR, children: "Add all document types in Reactor" }), supportedDocumentTypesInReactor
103
103
  ?.filter((dt) => !selectedDocumentTypes.includes(dt))
@@ -5,5 +5,5 @@ import { AppEditorForm } from "./components/AppEditorForm.js";
5
5
  import { editorConfig } from "./config.js";
6
6
  export default function Editor() {
7
7
  useSetPHDocumentEditorConfig(editorConfig);
8
- return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(AppEditorForm, {})] }));
8
+ return (_jsxs("div", { className: "bg-gray-50 p-6", children: [_jsx(DocumentToolbar, {}), _jsx(AppEditorForm, {})] }));
9
9
  }
@@ -59,7 +59,7 @@ export const DocumentEditorForm = ({ editorName: initialEditorName = "", documen
59
59
  onConfirm?.();
60
60
  }
61
61
  };
62
- return (_jsxs("div", { className: "space-y-6 bg-white p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "Editor Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "editor-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Editor Name" }), _jsx("input", { id: "editor-name", type: "text", value: editorName, onChange: (e) => setEditorName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}` })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "supported-document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Supported Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && (_jsx(Suspense, { fallback: _jsx(DocumentTypeSelectUI, {}), children: _jsx(DocumentTypeSelect, { documentTypes: documentTypes, setDocumentTypes: setDocumentTypes, onAddDocumentType: onAddDocumentType, onRemoveDocumentType: onRemoveDocumentType }) })), _jsx("div", { className: "space-y-1", children: documentTypes.map((type) => (_jsxs("div", { className: "flex items-center py-1", children: [_jsx("span", { className: "text-sm text-gray-700", children: type.documentType }), !isReadOnly && (_jsx("button", { onClick: () => {
62
+ return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "Editor Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "editor-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Editor Name" }), _jsx("input", { id: "editor-name", type: "text", value: editorName, onChange: (e) => setEditorName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}` })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "supported-document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Supported Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && (_jsx(Suspense, { fallback: _jsx(DocumentTypeSelectUI, {}), children: _jsx(DocumentTypeSelect, { documentTypes: documentTypes, setDocumentTypes: setDocumentTypes, onAddDocumentType: onAddDocumentType, onRemoveDocumentType: onRemoveDocumentType }) })), _jsx("div", { className: "space-y-1", children: documentTypes.map((type) => (_jsxs("div", { className: "flex items-center py-1", children: [_jsx("span", { className: "text-sm text-gray-700", children: type.documentType }), !isReadOnly && (_jsx("button", { onClick: () => {
63
63
  setDocumentTypes([]);
64
64
  onRemoveDocumentType?.({ id: type.id });
65
65
  }, className: "ml-2 text-gray-400 hover:text-gray-600 focus:outline-none", children: "\u00D7" }))] }, type.id))) })] })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !editorName.trim() || documentTypes.length === 0, className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-300", children: "Confirm" }) }))] }));
@@ -25,5 +25,5 @@ export default function Editor() {
25
25
  const onConfirm = useCallback(() => {
26
26
  dispatch(actions.setEditorStatus({ status: "CONFIRMED" }));
27
27
  }, [dispatch]);
28
- return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(DocumentEditorForm, { status: document.state.global.status, editorName: document.state.global.name ?? "", documentTypes: document.state.global.documentTypes, onEditorNameChange: onEditorNameChange, onAddDocumentType: onAddDocumentType, onRemoveDocumentType: onRemoveDocumentType, onConfirm: onConfirm })] }));
28
+ return (_jsxs("div", { className: "bg-gray-50 p-6", children: [_jsx(DocumentToolbar, {}), _jsx(DocumentEditorForm, { status: document.state.global.status, editorName: document.state.global.name ?? "", documentTypes: document.state.global.documentTypes, onEditorNameChange: onEditorNameChange, onAddDocumentType: onAddDocumentType, onRemoveDocumentType: onRemoveDocumentType, onConfirm: onConfirm })] }));
29
29
  }
@@ -42,7 +42,7 @@ export const ProcessorEditorForm = ({ processorName: initialProcessorName = "",
42
42
  onRemoveDocumentType?.(id);
43
43
  };
44
44
  const canConfirm = processorName.trim() && processorType && documentTypes.length > 0;
45
- return (_jsxs("div", { className: "space-y-6 bg-white p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "Processor Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "processor-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Processor Name" }), _jsx("input", { id: "processor-name", type: "text", value: processorName, onChange: (e) => setProcessorName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter processor name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "processor-type", className: "mb-2 block text-sm font-medium text-gray-700", children: "Type" }), _jsxs("select", { id: "processor-type", value: processorType, onChange: (e) => setProcessorType(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, children: [_jsx("option", { value: "", children: "Select type..." }), _jsx("option", { value: "analytics", children: "Analytics" }), _jsx("option", { value: "relational", children: "Relational Database" })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && availableDocumentTypes.length > 0 && (_jsxs("select", { id: "document-types", value: selectedDocumentType, onChange: (e) => {
45
+ return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "Processor Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "processor-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Processor Name" }), _jsx("input", { id: "processor-name", type: "text", value: processorName, onChange: (e) => setProcessorName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter processor name" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "processor-type", className: "mb-2 block text-sm font-medium text-gray-700", children: "Type" }), _jsxs("select", { id: "processor-type", value: processorType, onChange: (e) => setProcessorType(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, children: [_jsx("option", { value: "", children: "Select type..." }), _jsx("option", { value: "analytics", children: "Analytics" }), _jsx("option", { value: "relational", children: "Relational Database" })] })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "document-types", className: "mb-2 block text-sm font-medium text-gray-700", children: "Document Types" }), _jsxs("div", { className: "space-y-2", children: [!isReadOnly && availableDocumentTypes.length > 0 && (_jsxs("select", { id: "document-types", value: selectedDocumentType, onChange: (e) => {
46
46
  const selectedValue = e.target.value;
47
47
  if (selectedValue &&
48
48
  !documentTypes.some((dt) => dt.documentType === selectedValue)) {
@@ -29,5 +29,5 @@ export default function Editor() {
29
29
  const onRemoveDocumentType = useCallback((id) => {
30
30
  dispatch(actions.removeDocumentType({ id }));
31
31
  }, [dispatch]);
32
- return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(ProcessorEditorForm, { onNameChange: onNameChange, onTypeChange: onTypeChange, onAddDocumentType: onAddDocumentType, onRemoveDocumentType: onRemoveDocumentType, status: document.state.global.status, processorName: document.state.global.name ?? "", processorType: document.state.global.type ?? "", documentTypes: document.state.global.documentTypes ?? [], onConfirm: onConfirm })] }));
32
+ return (_jsxs("div", { className: "bg-gray-50 p-6", children: [_jsx(DocumentToolbar, {}), _jsx(ProcessorEditorForm, { onNameChange: onNameChange, onTypeChange: onTypeChange, onAddDocumentType: onAddDocumentType, onRemoveDocumentType: onRemoveDocumentType, status: document.state.global.status, processorName: document.state.global.name ?? "", processorType: document.state.global.type ?? "", documentTypes: document.state.global.documentTypes ?? [], onConfirm: onConfirm })] }));
33
33
  }
@@ -25,5 +25,5 @@ export const SubgraphEditorForm = ({ subgraphName: initialSubgraphName = "", sta
25
25
  onConfirm?.();
26
26
  }
27
27
  };
28
- return (_jsxs("div", { className: "space-y-6 bg-white p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "Subgraph Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "subgraph-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Subgraph Name" }), _jsx("input", { id: "subgraph-name", type: "text", value: subgraphName, onChange: (e) => setSubgraphName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter subgraph name" })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !subgraphName.trim(), className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-300", children: "Confirm" }) }))] }));
28
+ return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-medium text-gray-900", children: "Subgraph Configuration" }), _jsx(StatusPill, { status: status === "CONFIRMED" ? "confirmed" : "draft", label: status === "CONFIRMED" ? "Confirmed" : "Draft" })] }), _jsxs("div", { children: [_jsx("label", { htmlFor: "subgraph-name", className: "mb-2 block text-sm font-medium text-gray-700", children: "Subgraph Name" }), _jsx("input", { id: "subgraph-name", type: "text", value: subgraphName, onChange: (e) => setSubgraphName(e.target.value), disabled: isReadOnly, 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 ${isReadOnly ? "cursor-not-allowed bg-gray-100" : ""}`, placeholder: "Enter subgraph name" })] }), !isReadOnly && (_jsx("div", { children: _jsx("button", { onClick: handleConfirm, disabled: !subgraphName.trim(), className: "rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-300", children: "Confirm" }) }))] }));
29
29
  };
@@ -17,5 +17,5 @@ export default function Editor() {
17
17
  const onConfirm = useCallback(() => {
18
18
  dispatch(actions.setSubgraphStatus({ status: "CONFIRMED" }));
19
19
  }, [dispatch]);
20
- return (_jsxs("div", { children: [_jsx(DocumentToolbar, {}), _jsx(SubgraphEditorForm, { subgraphName: document.state.global.name ?? "", status: document.state.global.status, onNameChange: onNameChange, onConfirm: onConfirm })] }));
20
+ return (_jsxs("div", { className: "bg-gray-50 p-6", children: [_jsx(DocumentToolbar, {}), _jsx(SubgraphEditorForm, { subgraphName: document.state.global.name ?? "", status: document.state.global.status, onNameChange: onNameChange, onConfirm: onConfirm })] }));
21
21
  }
@@ -3,5 +3,5 @@ import { DriveHeader } from "./components/DriveHeader.js";
3
3
  import { ModuleSpecificationsSection } from "./components/ModuleSpecificationsSection.js";
4
4
  import { PackageInformationSection } from "./components/PackageInformationSection.js";
5
5
  export const DriveExplorer = ({ driveId, driveName, driveUrl, documentModels = [], editors = [], apps = [], subgraphs = [], processors = [], codegenProcessors = [], onAddDocumentModel, onAddEditor, onAddApp, onAddSubgraph, onAddProcessor, onAddCodegenProcessor, packageDocumentId, onAddPackageDocument, onOpenPackageDocument, onOpenDocument, onDelete, }) => {
6
- return (_jsxs("div", { className: "min-h-screen bg-white", children: [_jsx(DriveHeader, { driveId: driveId, driveName: driveName, driveUrl: driveUrl }), _jsxs("div", { className: "mx-6 mt-6 bg-white", children: [_jsx(PackageInformationSection, { className: "mb-6", packageDocumentId: packageDocumentId, onAddPackageDocument: onAddPackageDocument, onOpenPackageDocument: onOpenPackageDocument }), _jsx(ModuleSpecificationsSection, { documentModels: documentModels, editors: editors, apps: apps, subgraphs: subgraphs, processors: processors, codegenProcessors: codegenProcessors, onAddDocumentModel: onAddDocumentModel, onAddEditor: onAddEditor, onAddApp: onAddApp, onAddSubgraph: onAddSubgraph, onAddProcessor: onAddProcessor, onAddCodegenProcessor: onAddCodegenProcessor, onOpenDocument: onOpenDocument, onDelete: onDelete })] })] }));
6
+ return (_jsxs("div", { className: "min-h-screen", children: [_jsx(DriveHeader, { driveId: driveId, driveName: driveName, driveUrl: driveUrl }), _jsxs("div", { className: "mx-6 mt-6", children: [_jsx(PackageInformationSection, { className: "mb-6", packageDocumentId: packageDocumentId, onAddPackageDocument: onAddPackageDocument, onOpenPackageDocument: onOpenPackageDocument }), _jsx(ModuleSpecificationsSection, { documentModels: documentModels, editors: editors, apps: apps, subgraphs: subgraphs, processors: processors, codegenProcessors: codegenProcessors, onAddDocumentModel: onAddDocumentModel, onAddEditor: onAddEditor, onAddApp: onAddApp, onAddSubgraph: onAddSubgraph, onAddProcessor: onAddProcessor, onAddCodegenProcessor: onAddCodegenProcessor, onOpenDocument: onOpenDocument, onDelete: onDelete })] })] }));
7
7
  };
@@ -56,5 +56,5 @@ export const DriveHeader = ({ driveId, driveName, driveUrl, }) => {
56
56
  return "";
57
57
  }
58
58
  }, [driveUrl]);
59
- return (_jsx("div", { className: "bg-white px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(VetraIcon, { width: 20, height: 20 }), _jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Vetra Studio Drive" }), _jsxs("div", { className: "relative", ref: infoMenuRef, children: [_jsx("button", { "aria-label": "Drive information", "aria-expanded": isInfoMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleInfoMenu, children: _jsx(InfoIcon, { className: "text-gray-500" }) }), isInfoMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex flex-col items-start gap-2 rounded-lg bg-white p-3 shadow-lg", children: [_jsx(DriveInfoItem, { label: "Name", value: driveName }), _jsx(DriveInfoItem, { label: "Drive ID", value: driveId })] }))] }), driveUrl && (_jsxs("div", { className: "relative", ref: shareMenuRef, children: [_jsx("button", { "aria-label": "Share drive", "aria-expanded": isShareMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleShareMenu, children: _jsx(ShareIcon, { width: 16, height: 16, stroke: "#343839" }) }), isShareMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex w-max flex-col gap-4 rounded-lg bg-white p-4 shadow-lg", children: [_jsx(ShareMenuItem, { label: "Copy the Drive URL", url: driveUrl }), _jsx(ShareMenuItem, { label: "Share this Drive directly in Connect", url: shareUrl })] }))] }))] }), _jsxs("a", { href: "https://academy.vetra.io/", target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 text-sm text-gray-900 underline transition-colors hover:text-gray-700", children: [_jsx(ExternalLinkIcon, { fill: "#111827" }), "Vetra Academy"] })] }) }));
59
+ return (_jsx("div", { className: "bg-gray-50 px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(VetraIcon, { width: 20, height: 20 }), _jsx("h1", { className: "text-lg font-semibold text-gray-900", children: "Vetra Studio Drive" }), _jsxs("div", { className: "relative", ref: infoMenuRef, children: [_jsx("button", { "aria-label": "Drive information", "aria-expanded": isInfoMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleInfoMenu, children: _jsx(InfoIcon, { className: "text-gray-500" }) }), isInfoMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex flex-col items-start gap-2 rounded-lg bg-white p-3 shadow-lg", children: [_jsx(DriveInfoItem, { label: "Name", value: driveName }), _jsx(DriveInfoItem, { label: "Drive ID", value: driveId })] }))] }), driveUrl && (_jsxs("div", { className: "relative", ref: shareMenuRef, children: [_jsx("button", { "aria-label": "Share drive", "aria-expanded": isShareMenuOpen, className: "rounded-full p-1 transition-colors hover:bg-gray-100", onClick: toggleShareMenu, children: _jsx(ShareIcon, { width: 16, height: 16, stroke: "#343839" }) }), isShareMenuOpen && (_jsxs("div", { role: "menu", className: "absolute left-0 top-full z-10 mt-2 flex w-max flex-col gap-4 rounded-lg bg-white p-4 shadow-lg", children: [_jsx(ShareMenuItem, { label: "Copy the Drive URL", url: driveUrl }), _jsx(ShareMenuItem, { label: "Share this Drive directly in Connect", url: shareUrl })] }))] }))] }), _jsxs("a", { href: "https://academy.vetra.io/", target: "_blank", rel: "noopener noreferrer", className: "flex items-center gap-2 text-sm text-gray-900 underline transition-colors hover:text-gray-700", children: [_jsx(ExternalLinkIcon, { fill: "#111827" }), "Vetra Academy"] })] }) }));
60
60
  };
@@ -41,7 +41,7 @@ export function BaseEditor(props) {
41
41
  }
42
42
  }, [packageNode]);
43
43
  const showDocumentEditor = !!children;
44
- return showDocumentEditor ? (children) : (_jsx("div", { style: { height: "100%" }, className: "bg-white after:pointer-events-none after:absolute after:inset-0 after:bg-blue-500 after:opacity-0 after:transition after:content-['']", children: _jsx(DriveExplorer, { driveId: driveId, driveName: driveName, driveUrl: driveUrl, documentModels: docModelsNodes, editors: docEditorsNodes, apps: docAppsNodes, subgraphs: docSubgraphsNodes, processors: docProcessorsNodes, codegenProcessors: [], onAddDocumentModel: () => onCreateDocument(DOCUMENT_TYPES.documentModel), onAddEditor: () => onCreateDocument(DOCUMENT_TYPES.documentEditor), onAddApp: () => onCreateDocument(DOCUMENT_TYPES.documentApp), onAddSubgraph: () => onCreateDocument(DOCUMENT_TYPES.documentSubgraph), onAddProcessor: () => onCreateDocument(DOCUMENT_TYPES.documentProcessor), onAddCodegenProcessor: () => console.log("add codegen processor"), packageDocumentId: packageDocumentId, onAddPackageDocument: onCreatePackageFile, onOpenPackageDocument: onOpenPackageDocument, onOpenDocument: (node) => setSelectedNode(node), onDelete: onDeleteDocument }) }));
44
+ return showDocumentEditor ? (children) : (_jsx("div", { style: { height: "100%" }, className: "bg-gray-50 p-6 after:pointer-events-none after:absolute after:inset-0 after:bg-blue-500 after:opacity-0 after:transition after:content-['']", children: _jsx(DriveExplorer, { driveId: driveId, driveName: driveName, driveUrl: driveUrl, documentModels: docModelsNodes, editors: docEditorsNodes, apps: docAppsNodes, subgraphs: docSubgraphsNodes, processors: docProcessorsNodes, codegenProcessors: [], onAddDocumentModel: () => onCreateDocument(DOCUMENT_TYPES.documentModel), onAddEditor: () => onCreateDocument(DOCUMENT_TYPES.documentEditor), onAddApp: () => onCreateDocument(DOCUMENT_TYPES.documentApp), onAddSubgraph: () => onCreateDocument(DOCUMENT_TYPES.documentSubgraph), onAddProcessor: () => onCreateDocument(DOCUMENT_TYPES.documentProcessor), onAddCodegenProcessor: () => console.log("add codegen processor"), packageDocumentId: packageDocumentId, onAddPackageDocument: onCreatePackageFile, onOpenPackageDocument: onOpenPackageDocument, onOpenDocument: (node) => setSelectedNode(node), onDelete: onDeleteDocument }) }));
45
45
  }
46
46
  export default function Editor(props) {
47
47
  useSetPHDriveEditorConfig(editorConfig);
@@ -20,7 +20,7 @@ export const MetaForm = (props) => {
20
20
  useDebounce(publisherUrl, onPublisherUrlChange, 300);
21
21
  useDebounce(githubRepository, onGithubRepositoryChange, 300);
22
22
  useDebounce(npmPackage, onNpmPackageChange, 300);
23
- 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) => {
23
+ return (_jsxs("div", { className: "grid grid-cols-1 gap-6 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) => {
24
24
  const newValue = e.target.value;
25
25
  setCategory(newValue);
26
26
  onCategoryChange?.(newValue);
@@ -65,5 +65,5 @@ export default function Editor(props) {
65
65
  const onRemoveKeyword = useCallback((id) => {
66
66
  dispatch(actions.removePackageKeyword({ id }));
67
67
  }, []);
68
- 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 })] }));
68
+ return (_jsxs("div", { className: "bg-gray-50 p-6", 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 })] }));
69
69
  }