@industry-theme/principal-view-panels 0.1.2 → 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
@@ -45053,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, _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 +45076,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 +45161,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 +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: ((_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 +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,
@@ -45814,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 {
@@ -45837,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 });
@@ -45878,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",
@@ -45890,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",
@@ -45947,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: {