@industry-theme/principal-view-panels 0.1.2 → 0.1.4

package/dist/mocks/vvfConfigs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vvfConfigs.d.ts","sourceRoot":"","sources":["../../src/mocks/vvfConfigs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE;;GAEG;AAEH,eAAO,MAAM,gBAAgB,EAAE,cA0F9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,cA8KpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,cA+G/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,cA0JlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,cAwHrC,CAAC;AAGF,eAAO,MAAM,oBAAoB,QAA4C,CAAC;AAC9E,eAAO,MAAM,qBAAqB,QAA6C,CAAC;AAChF,eAAO,MAAM,0BAA0B,QAAkD,CAAC;AAC1F,eAAO,MAAM,wBAAwB,QAAgD,CAAC;AACtF,eAAO,MAAM,2BAA2B,QAAmD,CAAC;AAG5F,eAAO,MAAM,kBAAkB,GAAI,QAAQ,QAAQ,GAAG,SAAS,GAAG,eAAe,GAAG,aAAa,GAAG,gBAAgB,GAAG,MAAM;;cAChG,MAAM;sBAAgB,MAAM;cAAQ,MAAM;kBAAY,MAAM;;CAgDxF,CAAC"}
+{"version":3,"file":"vvfConfigs.d.ts","sourceRoot":"","sources":["../../src/mocks/vvfConfigs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE;;GAEG;AAEH,eAAO,MAAM,gBAAgB,EAAE,cA6F9B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,cAqLpC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,cAmH/B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,EAAE,cAiKlC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,cA8HrC,CAAC;AAGF,eAAO,MAAM,oBAAoB,QAA4C,CAAC;AAC9E,eAAO,MAAM,qBAAqB,QAA6C,CAAC;AAChF,eAAO,MAAM,0BAA0B,QAAkD,CAAC;AAC1F,eAAO,MAAM,wBAAwB,QAAgD,CAAC;AACtF,eAAO,MAAM,2BAA2B,QAAmD,CAAC;AAG5F,eAAO,MAAM,kBAAkB,GAAI,QAAQ,QAAQ,GAAG,SAAS,GAAG,eAAe,GAAG,aAAa,GAAG,gBAAgB,GAAG,MAAM;;cAChG,MAAM;sBAAgB,MAAM;cAAQ,MAAM;kBAAY,MAAM;;CAgDxF,CAAC"}

package/dist/panels/ControlTowerIntegration.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ControlTowerIntegration.stories.d.ts","sourceRoot":"","sources":["../../src/panels/ControlTowerIntegration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA+K5D,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,QAyb7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,QA0I/B,CAAC"}
+{"version":3,"file":"ControlTowerIntegration.stories.d.ts","sourceRoot":"","sources":["../../src/panels/ControlTowerIntegration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAsL5D,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,QAyb7B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,QA0I/B,CAAC"}

package/dist/panels/EventControllerPanel.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventControllerPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/EventControllerPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAGpF;;;;GAIG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAsBmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAiNnC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAuC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAmEjC,CAAC"}
+{"version":3,"file":"EventControllerPanel.stories.d.ts","sourceRoot":"","sources":["../../src/panels/EventControllerPanel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AAGrD,OAAO,KAAK,EAAkB,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAGpF;;;;GAIG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAsBmC,CAAC;AAE9C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAoNnC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAuC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAUlC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAUxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,KAoBxB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAmEjC,CAAC"}

package/dist/panels/EventRecordingIntegration.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EventRecordingIntegration.stories.d.ts","sourceRoot":"","sources":["../../src/panels/EventRecordingIntegration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAqE5D,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,QA0S/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,QAgFzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAgKlC,CAAC"}
+{"version":3,"file":"EventRecordingIntegration.stories.d.ts","sourceRoot":"","sources":["../../src/panels/EventRecordingIntegration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAwE5D,QAAA,MAAM,IAAI,EAAE,IASX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,QA0S/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,QAgFzC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAgKlC,CAAC"}

package/dist/panels.bundle.js

@@ -4454,12 +4454,14 @@ class EventProcessor {
     }
   }
   handleNodeEvent(event, timestamp2) {
+    var _a;
     const payload = event.payload;
     switch (payload.operation) {
       case "create":
         this.state.nodes.set(payload.nodeId, {
           id: payload.nodeId,
           type: payload.nodeType,
+          name: ((_a = payload.data) == null ? void 0 : _a.name) || payload.nodeId,
           data: payload.data || {},
           position: payload.position,
           createdAt: timestamp2,
@@ -5185,6 +5187,7 @@ class GraphConverter {
       nodes.push({
         id,
         type: id,
+        name: id,
         data: {
           label: id,
           shape: nodeType.shape,
@@ -5304,8 +5307,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 +5338,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 +5358,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 +5407,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,
+          name: nodeName,
           data: {
-            label: this.getNodeLabel(node),
+            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
@@ -5498,6 +5510,7 @@ class CanvasConverter {
       if (node.data.nodeType || node.data.shape || ((_c = node.data.sources) == null ? void 0 : _c.length)) {
         canvasNode.pv = {
           nodeType: node.data.nodeType || node.id,
+          description: node.data.description || `${node.data.nodeType || node.id} node`,
           shape: node.data.shape,
           icon: node.data.icon,
           states: node.data.states,
@@ -9188,6 +9201,7 @@ class LibraryConverter {
     const { id, x: x2, y: y2, label, data } = options;
     const pv = {
       nodeType: componentKey,
+      description: component.description,
       shape: component.shape,
       icon: component.icon,
       states: component.states,
@@ -10066,6 +10080,18 @@ const validNodeTypes = {
     }
     for (const [typeId, nodeType] of Object.entries(configuration.nodeTypes)) {
       const basePath = `nodeTypes.${typeId}`;
+      if (!nodeType.description) {
+        violations.push({
+          ruleId: "valid-node-types",
+          severity: "error",
+          file: configPath,
+          path: `${basePath}.description`,
+          message: `Node type "${typeId}" is missing required "description" field`,
+          impact: "Node type must have a description explaining its purpose",
+          suggestion: "Add a description field explaining what this node type represents",
+          fixable: false
+        });
+      }
       if (!nodeType.shape) {
         violations.push({
           ruleId: "valid-node-types",
@@ -10463,6 +10489,7 @@ const ALLOWED_FIELDS = {
   root: ["metadata", "nodeTypes", "edgeTypes", "allowedConnections", "validation", "display"],
   metadata: ["name", "version", "description"],
   nodeType: [
+    "description",
     "shape",
     "icon",
     "color",
@@ -45053,7 +45080,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, _l, _m, _n2, _o2;
+    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) {
@@ -45067,9 +45094,8 @@ function requireCustomNode() {
     const nodeDataStroke = nodeData.stroke;
     const strokeColor = nodeDataStroke || typeDefinition.stroke || fillColor;
     const color = fillColor;
-    const labelField = (_d = Object.entries(typeDefinition.dataSchema).find(([, schema2]) => schema2.displayInLabel)) == null ? void 0 : _d[0];
-    const displayLabel = labelField && nodeData[labelField] ? String(nodeData[labelField]) : nodeProps.label;
-    const icon = nodeData.icon || state && (((_e2 = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _e2.icon) || ((_g = (_f = typeDefinition.states) == null ? void 0 : _f[state]) == null ? void 0 : _g.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":
@@ -45153,8 +45179,8 @@ function requireCustomNode() {
       position: "relative",
       clipPath: hexagonClipPath,
       backgroundColor: hasViolations ? "#D0021B" : strokeColor,
-      width: ((_h = typeDefinition.size) == null ? void 0 : _h.width) || 120,
-      height: ((_i = typeDefinition.size) == null ? void 0 : _i.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"
     } : {};
@@ -45212,25 +45238,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: ((_j = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _j.label) || ((_l = (_k = typeDefinition.states) == null ? void 0 : _k[state]) == null ? void 0 : _l.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: ((_m = nodeDataStates == null ? void 0 : nodeDataStates[state]) == null ? void 0 : _m.label) || ((_o2 = (_n2 = typeDefinition.states) == null ? void 0 : _n2[state]) == null ? void 0 : _o2.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"
@@ -45540,7 +45566,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,
@@ -45814,20 +45840,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 {
@@ -45837,16 +45856,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 });
@@ -45878,7 +45889,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",
@@ -45890,7 +45901,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",
@@ -45947,38 +45981,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: {
@@ -46515,6 +46522,7 @@ function requireGraphRenderer() {
         if (library == null ? void 0 : library.nodeComponents) {
           for (const [id, component] of Object.entries(library.nodeComponents)) {
             nodeTypes2[id] = {
+              description: component.description,
               shape: component.shape || "rectangle",
               icon: component.icon,
               color: component.color,
@@ -46539,6 +46547,7 @@ function requireGraphRenderer() {
         if ((_a = canvas.pv) == null ? void 0 : _a.nodeTypes) {
           for (const [id, def] of Object.entries(canvas.pv.nodeTypes)) {
             nodeTypes2[id] = {
+              description: def.description,
               shape: def.shape || "rectangle",
               icon: def.icon,
               color: def.color,
@@ -46552,6 +46561,7 @@ function requireGraphRenderer() {
           if (!nodeTypes2[nodeType]) {
             const fillColor = (vv == null ? void 0 : vv.fill) || (typeof node.color === "string" ? node.color : void 0) || ((_c = (_b = vv == null ? void 0 : vv.states) == null ? void 0 : _b.idle) == null ? void 0 : _c.color);
             nodeTypes2[nodeType] = {
+              description: (vv == null ? void 0 : vv.description) || `${nodeType} node`,
               shape: (vv == null ? void 0 : vv.shape) || "rectangle",
               icon: vv == null ? void 0 : vv.icon,
               color: fillColor,