@industry-theme/principal-view-panels 0.1.1 → 0.1.3

package/dist/panels.bundle.js

@@ -5304,8 +5304,23 @@ class CanvasConverter {
     var _a, _b;
     const pv = node.pv;
     const color = resolveCanvasColor(node.color);
+    let nodeName;
+    switch (node.type) {
+      case "text":
+        nodeName = node.text.split("\n")[0].replace(/^#+ /, "").substring(0, 50);
+        break;
+      case "file":
+        nodeName = node.file.split("/").pop() || node.file;
+        break;
+      case "link":
+        nodeName = node.url;
+        break;
+      case "group":
+        nodeName = node.label || "Group";
+        break;
+    }
     const data = {
-      label: this.getNodeLabel(node),
+      name: nodeName,
       nodeType: (pv == null ? void 0 : pv.nodeType) || node.id,
       canvasType: node.type,
       shape: (pv == null ? void 0 : pv.shape) || "rectangle",
@@ -5320,8 +5335,6 @@ class CanvasConverter {
       data.file = node.file;
     } else if (node.type === "link") {
       data.url = node.url;
-    } else if (node.type === "group") {
-      data.label = node.label || data.label;
     }
     if (pv) {
       data.states = pv.states;
@@ -5342,26 +5355,6 @@ class CanvasConverter {
       }
     };
   }
-  /**
-   * Get display label for a node
-   */
-  static getNodeLabel(node) {
-    var _a;
-    if ((_a = node.pv) == null ? void 0 : _a.nodeType) {
-      return node.pv.nodeType;
-    }
-    switch (node.type) {
-      case "text":
-        const firstLine = node.text.split("\n")[0];
-        return firstLine.replace(/^#+ /, "").substring(0, 50);
-      case "file":
-        return node.file.split("/").pop() || node.file;
-      case "link":
-        return node.url;
-      case "group":
-        return node.label || "Group";
-    }
-  }
   /**
    * Convert a single canvas edge to React Flow edge
    */
@@ -5411,11 +5404,27 @@ class CanvasConverter {
     if (canvas.nodes) {
       for (const node of canvas.nodes) {
         const pv = node.pv;
+        let nodeName;
+        switch (node.type) {
+          case "text":
+            nodeName = node.text.split("\n")[0].replace(/^#+ /, "").substring(0, 50);
+            break;
+          case "file":
+            nodeName = node.file.split("/").pop() || node.file;
+            break;
+          case "link":
+            nodeName = node.url;
+            break;
+          case "group":
+            nodeName = node.label || "Group";
+            break;
+        }
         nodes.push({
           id: node.id,
           type: (pv == null ? void 0 : pv.nodeType) || node.type,
           data: {
-            label: this.getNodeLabel(node),
+            name: nodeName,
+            description: pv == null ? void 0 : pv.description,
             shape: (pv == null ? void 0 : pv.shape) || "rectangle",
             icon: pv == null ? void 0 : pv.icon,
             // Color priority: pv.fill > node.color
@@ -8892,19 +8901,19 @@ class ConfigurationLoader {
     this.fsAdapter = fsAdapter;
   }
   /**
-   * Check if the .vgc/ configuration directory exists
+   * Check if the .principal-views/ configuration directory exists
    *
    * @param baseDir - Base directory to search from
-   * @returns True if .vgc/ directory exists
+   * @returns True if .principal-views/ directory exists
    */
   hasConfigDirectory(baseDir) {
     const configPath = this.fsAdapter.join(baseDir, ConfigurationLoader.CONFIG_DIR);
     return this.fsAdapter.exists(configPath) && this.fsAdapter.isDirectory(configPath);
   }
   /**
-   * List all available configuration names in .vgc/ folder
+   * List all available configuration names in .principal-views/ folder
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Array of configuration names (without extensions)
    */
   listConfigurations(baseDir) {
@@ -8919,7 +8928,7 @@ class ConfigurationLoader {
    * Load a specific configuration by name
    *
    * @param name - Configuration name (without extension)
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Configuration file or null if not found/invalid
    */
   loadByName(name, baseDir) {
@@ -8949,9 +8958,9 @@ class ConfigurationLoader {
     return null;
   }
   /**
-   * Load all configurations from .vgc/ folder
+   * Load all configurations from .principal-views/ folder
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Result containing all loaded configs and any errors
    */
   loadAll(baseDir) {
@@ -8961,8 +8970,8 @@ class ConfigurationLoader {
     };
     if (!this.hasConfigDirectory(baseDir)) {
       result.errors.push({
-        file: ".vgc",
-        error: "Configuration directory .vgc/ not found"
+        file: ".principal-views",
+        error: "Configuration directory .principal-views/ not found"
       });
       return result;
     }
@@ -9004,25 +9013,25 @@ class ConfigurationLoader {
    * Get the configuration directory path
    *
    * @param baseDir - Base directory
-   * @returns Full path to .vgc/ directory
+   * @returns Full path to .principal-views/ directory
    */
   getConfigDirectoryPath(baseDir) {
     return this.fsAdapter.join(baseDir, ConfigurationLoader.CONFIG_DIR);
   }
 }
-ConfigurationLoader.CONFIG_DIR = ".vgc";
+ConfigurationLoader.CONFIG_DIR = ".principal-views";
 const DEFAULT_LIBRARY_FILES = ["library.yaml", "library.yml", "library.json"];
-const CONFIG_DIR = ".vgc";
+const CONFIG_DIR = ".principal-views";
 class LibraryLoader {
   constructor(fsAdapter) {
     this.fsAdapter = fsAdapter;
   }
   /**
-   * Load the component library from the .vgc/ folder
+   * Load the component library from the .principal-views/ folder
    *
    * Searches for library.yaml, library.yml, or library.json (in that order).
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns Library load result
    */
   load(baseDir) {
@@ -9030,7 +9039,7 @@ class LibraryLoader {
     if (!this.fsAdapter.exists(configPath) || !this.fsAdapter.isDirectory(configPath)) {
       return {
         success: false,
-        error: "Configuration directory .vgc/ not found",
+        error: "Configuration directory .principal-views/ not found",
         path: configPath
       };
     }
@@ -9080,9 +9089,9 @@ class LibraryLoader {
     }
   }
   /**
-   * Check if a library file exists in the .vgc/ folder
+   * Check if a library file exists in the .principal-views/ folder
    *
-   * @param baseDir - Base directory containing .vgc/ folder
+   * @param baseDir - Base directory containing .principal-views/ folder
    * @returns True if a library file exists
    */
   hasLibrary(baseDir) {
@@ -9679,14 +9688,11 @@ function createRulesEngine(rules) {
   return engine;
 }
 const CONFIG_FILE_NAMES = [
-  ".vgcrc.json",
-  ".vgcrc.yaml",
-  ".vgcrc.yml",
-  "vgc.config.json",
-  "vgc.config.yaml",
-  "vgc.config.yml"
-];
-const DEFAULT_INCLUDE_PATTERNS = [".vgc/**/*.yaml", ".vgc/**/*.yml", ".vgc/**/*.json"];
+  ".privurc.yaml",
+  ".privurc.yml",
+  ".privurc.json"
+];
+const DEFAULT_INCLUDE_PATTERNS = [".principal-views/**/*.yaml", ".principal-views/**/*.yml", ".principal-views/**/*.json"];
 const DEFAULT_EXCLUDE_PATTERNS = ["**/node_modules/**", "**/*.test.*"];
 const VALID_SEVERITIES = [
   "off",
@@ -45056,7 +45062,7 @@ function requireCustomNode() {
   const react_1 = /* @__PURE__ */ requireUmd();
   const iconResolver_1 = requireIconResolver();
   const CustomNode$1 = ({ data, selected }) => {
-    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i, _j, _k, _l, _m, _n2;
     const nodeProps = data;
     const { typeDefinition, state, hasViolations, data: nodeData, animationType, animationDuration = 1e3, editable = false } = nodeProps;
     if (!typeDefinition) {
@@ -45064,14 +45070,14 @@ function requireCustomNode() {
     }
     const nodeDataColor = nodeData.color;
     const baseColor = nodeDataColor || typeDefinition.color || "#888";
-    const stateColor = state && ((_b = (_a = typeDefinition.states) == null ? void 0 : _a[state]) == null ? void 0 : _b.color);
+    const nodeDataStates = nodeData.states;
+    const stateColor = state && (((_a = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _a.color) || ((_c = (_b = typeDefinition.states) == null ? void 0 : _b[state]) == null ? void 0 : _c.color));
     const fillColor = stateColor || baseColor;
     const nodeDataStroke = nodeData.stroke;
     const strokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
     const color = fillColor;
-    const labelField = (_c = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _c[0];
-    const displayLabel = labelField && nodeData[labelField] ? String(nodeData[labelField]) : nodeProps.label;
-    const icon = nodeData.icon || state && ((_e2 = (_d = typeDefinition.states) == null ? void 0 : _d[state]) == null ? void 0 : _e2.icon) || typeDefinition.icon;
+    const displayName = nodeProps.name;
+    const icon = nodeData.icon || state && (((_d = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _d.icon) || ((_f = (_e2 = typeDefinition.states) == null ? void 0 : _e2[state]) == null ? void 0 : _f.icon)) || typeDefinition.icon;
     const getAnimationClass = () => {
       switch (animationType) {
         case "pulse":
@@ -45155,8 +45161,8 @@ function requireCustomNode() {
       position: "relative",
       clipPath: hexagonClipPath,
       backgroundColor: hasViolations ? "#D0021B" : strokeColor,
-      width: ((_f = typeDefinition.size) == null ? void 0 : _f.width) || 120,
-      height: ((_g = typeDefinition.size) == null ? void 0 : _g.height) || 120,
+      width: ((_g = typeDefinition.size) == null ? void 0 : _g.width) || 120,
+      height: ((_h = typeDefinition.size) == null ? void 0 : _h.height) || 120,
       boxShadow: selected ? `0 0 0 2px ${strokeColor}` : "0 2px 4px rgba(0,0,0,0.1)",
       transition: "all 0.2s ease"
     } : {};
@@ -45214,25 +45220,25 @@ function requireCustomNode() {
       }
       return offsetStyle;
     };
-    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle("right") }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayLabel }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Top, id: "top", style: getHandleStyle("top") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Left, id: "left", style: getHandleStyle("left") }), (0, jsx_runtime_1.jsx)(react_1.Handle, { type: "target", position: react_1.Position.Right, id: "right", style: getHandleStyle("right") }), isHexagon ? (0, jsx_runtime_1.jsx)("div", { style: hexagonBorderStyle, className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: hexagonInnerStyle, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_i = (_h = typeDefinition.states) == null ? void 0 : _h[state]) == null ? void 0 : _i.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_i = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _i.label) || ((_k = (_j = typeDefinition.states) == null ? void 0 : _j[state]) == null ? void 0 : _k.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
-    }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: isDiamond ? { transform: "rotate(-45deg)" } : {}, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayLabel }), state && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: "⚠️" })] }) }) : (0, jsx_runtime_1.jsx)("div", { style: getShapeStyles(), className: animationClass, children: (0, jsx_runtime_1.jsxs)("div", { style: isDiamond ? { transform: "rotate(-45deg)" } : {}, children: [icon && (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", justifyContent: "center", alignItems: "center" }, children: (0, iconResolver_1.resolveIcon)(icon, 20) }), (0, jsx_runtime_1.jsx)("div", { style: { textAlign: "center", wordBreak: "break-word" }, children: displayName }), state && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       backgroundColor: color,
       color: "white",
       padding: "2px 6px",
       borderRadius: "4px",
       textAlign: "center"
-    }, children: ((_k = (_j = typeDefinition.states) == null ? void 0 : _j[state]) == null ? void 0 : _k.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
+    }, children: ((_l = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _l.label) || ((_n2 = (_m = typeDefinition.states) == null ? void 0 : _m[state]) == null ? void 0 : _n2.label) || state }), hasViolations && (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "10px",
       color: "#D0021B",
       fontWeight: "bold"
@@ -45358,7 +45364,8 @@ function requireCustomEdge() {
     if (!typeDefinition) {
       return null;
     }
-    const color = hasViolations ? "#D0021B" : typeDefinition.color || "#888";
+    const edgeColor = edgeData == null ? void 0 : edgeData.color;
+    const color = hasViolations ? "#D0021B" : edgeColor || typeDefinition.color || "#888";
     const width = typeDefinition.width || 2;
     const [edgePath, labelX, labelY] = (0, react_2.getBezierPath)({
       sourceX,
@@ -45541,7 +45548,7 @@ function requireGraphConverter() {
         type: "custom",
         position: node.position || { x: 0, y: 0 },
         data: {
-          label: node.id,
+          name: node.data.name || node.id,
           typeDefinition,
           state: node.state,
           hasViolations,
@@ -45552,18 +45559,20 @@ function requireGraphConverter() {
   }
   function convertToXYFlowEdges(edges, configuration, violations = []) {
     return edges.map((edge) => {
+      var _a;
       const typeDefinition = configuration.edgeTypes[edge.type];
       if (!typeDefinition) {
         console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
       }
       const hasViolations = violations.some((v) => {
-        var _a;
-        return ((_a = v.context) == null ? void 0 : _a.edgeId) === edge.id;
+        var _a2;
+        return ((_a2 = v.context) == null ? void 0 : _a2.edgeId) === edge.id;
       });
       const edgeWithHandles = edge;
+      const edgeColor = (_a = edge.data) == null ? void 0 : _a.color;
       const markerEnd = (typeDefinition == null ? void 0 : typeDefinition.directed) !== false ? {
         type: react_1.MarkerType.ArrowClosed,
-        color: (typeDefinition == null ? void 0 : typeDefinition.color) || "#888",
+        color: edgeColor || (typeDefinition == null ? void 0 : typeDefinition.color) || "#888",
         width: 20,
         height: 20
       } : void 0;
@@ -45813,20 +45822,13 @@ function requireNodeInfoPanel() {
     "GitPullRequest"
   ];
   const NodeInfoPanel$1 = ({ node, typeDefinition, availableNodeTypes, onClose, onDelete, onUpdate }) => {
-    var _a, _b, _c, _d, _e2, _f, _g;
+    var _a, _b, _c, _d, _e2, _f, _g, _h, _i;
     const color = (typeDefinition == null ? void 0 : typeDefinition.color) || "#888";
     const canEdit = Boolean(onUpdate);
-    const [editingName, setEditingName] = (0, react_1.useState)(false);
-    const [nameValue, setNameValue] = (0, react_1.useState)("");
     const [showIconPicker, setShowIconPicker] = (0, react_1.useState)(false);
+    const [showDetails, setShowDetails] = (0, react_1.useState)(false);
     const currentIcon = ((_a = node.data) == null ? void 0 : _a.icon) || (typeDefinition == null ? void 0 : typeDefinition.icon);
     const nameField = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? (_b = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _b[0] : null;
-    (0, react_1.useEffect)(() => {
-      var _a2;
-      if (nameField && ((_a2 = node.data) == null ? void 0 : _a2[nameField])) {
-        setNameValue(String(node.data[nameField]));
-      }
-    }, [node.id, nameField, node.data]);
     const displayFields = (typeDefinition == null ? void 0 : typeDefinition.dataSchema) ? Object.entries(typeDefinition.dataSchema).filter(([, schema2]) => schema2.displayInLabel).map(([field]) => {
       var _a2;
       return {
@@ -45836,16 +45838,8 @@ function requireNodeInfoPanel() {
       };
     }) : [];
     const hasSchemaFields = displayFields.length > 0;
-    const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => key !== "icon") : [];
-    const handleNameSave = () => {
-      var _a2;
-      if (onUpdate && nameField && nameValue !== ((_a2 = node.data) == null ? void 0 : _a2[nameField])) {
-        onUpdate(node.id, {
-          data: { ...node.data, [nameField]: nameValue }
-        });
-      }
-      setEditingName(false);
-    };
+    const nodeDataEntries = node.data ? Object.entries(node.data).filter(([key]) => !["icon", "name", "description", "sources"].includes(key)) : [];
+    const sources = ((_c = node.data) == null ? void 0 : _c.sources) || [];
     const handleTypeChange = (newType) => {
       if (onUpdate && newType !== node.type) {
         onUpdate(node.id, { type: newType });
@@ -45877,7 +45871,7 @@ function requireNodeInfoPanel() {
       marginBottom: "12px",
       paddingBottom: "8px",
       borderBottom: `2px solid ${color}`
-    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px" }, children: "Node Information" }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
+    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontWeight: "bold", fontSize: "14px" }, children: ((_d = node.data) == null ? void 0 : _d.name) || node.id }), (0, jsx_runtime_1.jsx)("button", { onClick: onClose, style: {
       border: "none",
       background: "none",
       cursor: "pointer",
@@ -45889,7 +45883,30 @@ function requireNodeInfoPanel() {
       display: "flex",
       alignItems: "center",
       justifyContent: "center"
-    }, children: "×" })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => canEdit && setShowIconPicker(!showIconPicker), disabled: !canEdit, style: {
+    }, children: "×" })] }), ((_e2 = node.data) == null ? void 0 : _e2.description) && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Description" }), (0, jsx_runtime_1.jsx)("div", { style: {
+      fontSize: "12px",
+      color: "#333"
+    }, children: String(node.data.description) })] }), sources.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Sources" }), (0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: sources.map((source, index2) => (0, jsx_runtime_1.jsx)("span", { style: {
+      fontSize: "11px",
+      padding: "2px 8px",
+      backgroundColor: "#f0f0f0",
+      borderRadius: "4px",
+      color: "#555"
+    }, children: source }, index2)) })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => setShowDetails(!showDetails), style: {
+      width: "100%",
+      padding: "8px",
+      backgroundColor: "#f5f5f5",
+      border: "1px solid #ddd",
+      borderRadius: "4px",
+      cursor: "pointer",
+      fontSize: "12px",
+      color: "#666",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "6px",
+      marginBottom: showDetails ? "12px" : "0"
+    }, children: [(0, jsx_runtime_1.jsx)("span", { style: { transform: showDetails ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }, children: "▼" }), showDetails ? "Hide Details" : "Show Details"] }), showDetails && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Icon" }), (0, jsx_runtime_1.jsxs)("div", { style: { position: "relative" }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => canEdit && setShowIconPicker(!showIconPicker), disabled: !canEdit, style: {
       display: "flex",
       alignItems: "center",
       gap: "8px",
@@ -45946,38 +45963,11 @@ function requireNodeInfoPanel() {
     }, children: node.type })] }), node.state && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "State" }), (0, jsx_runtime_1.jsx)("div", { style: {
       fontSize: "12px",
       padding: "4px 8px",
-      backgroundColor: ((_d = (_c = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _c[node.state]) == null ? void 0 : _d.color) || "#888",
+      backgroundColor: ((_g = (_f = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _f[node.state]) == null ? void 0 : _g.color) || "#888",
       color: "white",
       borderRadius: "4px",
       display: "inline-block"
-    }, children: ((_f = (_e2 = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _e2[node.state]) == null ? void 0 : _f.label) || node.state })] }), nameField && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "4px" }, children: "Name" }), canEdit && editingName ? (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [(0, jsx_runtime_1.jsx)("input", { type: "text", value: nameValue, onChange: (e) => setNameValue(e.target.value), onKeyDown: (e) => {
-      if (e.key === "Enter")
-        handleNameSave();
-      if (e.key === "Escape")
-        setEditingName(false);
-    }, autoFocus: true, style: {
-      flex: 1,
-      fontSize: "12px",
-      padding: "4px 8px",
-      borderRadius: "4px",
-      border: "1px solid #4A90E2",
-      outline: "none"
-    } }), (0, jsx_runtime_1.jsx)("button", { onClick: handleNameSave, style: {
-      padding: "4px 8px",
-      backgroundColor: "#4A90E2",
-      color: "white",
-      border: "none",
-      borderRadius: "4px",
-      cursor: "pointer",
-      fontSize: "11px"
-    }, children: "Save" })] }) : (0, jsx_runtime_1.jsxs)("div", { onClick: () => canEdit && setEditingName(true), style: {
-      fontSize: "12px",
-      padding: "4px 8px",
-      backgroundColor: "#f5f5f5",
-      borderRadius: "4px",
-      cursor: canEdit ? "pointer" : "default",
-      border: canEdit ? "1px dashed #ccc" : "none"
-    }, title: canEdit ? "Click to edit" : void 0, children: [((_g = node.data) == null ? void 0 : _g[nameField]) ?? "-", canEdit && (0, jsx_runtime_1.jsx)("span", { style: { marginLeft: "8px", color: "#999", fontSize: "10px" }, children: "✎" })] })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Properties" }), displayFields.filter((f) => f.field !== nameField).map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && nodeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Data" }), nodeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "10px", color: "#999", marginTop: "12px", paddingTop: "8px", borderTop: "1px solid #eee" }, children: ["ID: ", node.id] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+    }, children: ((_i = (_h = typeDefinition == null ? void 0 : typeDefinition.states) == null ? void 0 : _h[node.state]) == null ? void 0 : _i.label) || node.state })] }), hasSchemaFields && displayFields.filter((f) => f.field !== nameField).length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Properties" }), displayFields.filter((f) => f.field !== nameField).map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && nodeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "8px", fontWeight: "bold" }, children: "Data" }), nodeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: "#666", marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", color: "#333", wordBreak: "break-word" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, key))] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: "10px", color: "#999", marginTop: "12px", paddingTop: "8px", borderTop: "1px solid #eee" }, children: ["ID: ", node.id] })] }), onDelete && (0, jsx_runtime_1.jsx)("button", { onClick: () => {
       onDelete(node.id);
       onClose();
     }, style: {
@@ -46051,7 +46041,7 @@ function requireGraphRenderer() {
           onPendingChangesChange == null ? void 0 : onPendingChangesChange(false);
         }
       }, [propNodes, propEdges, editStateRef, onEditStateChange, onPendingChangesChange]);
-      const nodes = editable ? localNodes : propNodes;
+      const nodes = localNodes;
       const edges = editable ? localEdges : propEdges;
       const checkHasChanges = (0, react_1.useCallback)((state) => {
         return state.positionChanges.size > 0 || state.nodeUpdates.size > 0 || state.deletedNodeIds.size > 0 || state.createdEdges.length > 0 || state.deletedEdges.length > 0;
@@ -46323,6 +46313,7 @@ function requireGraphRenderer() {
           const nodeId = stateEvent.nodeId;
           const newState = stateEvent.newState;
           if (nodeId && newState) {
+            setLocalNodes((prev) => prev.map((node) => node.id === nodeId ? { ...node, state: newState } : node));
             const stateToAnimation = {
               processing: "pulse",
               completed: "flash",
@@ -46347,8 +46338,8 @@ function requireGraphRenderer() {
                   });
                 }, duration);
               }
-              onEventProcessed == null ? void 0 : onEventProcessed(latestEvent);
             }
+            onEventProcessed == null ? void 0 : onEventProcessed(latestEvent);
           }
         }
         if (latestEvent.category === "node" && latestEvent.operation === "create") {