@industry-theme/principal-view-panels 0.1.12 → 0.1.14

package/dist/mocks/panelContext.d.ts

@@ -8,9 +8,7 @@ export declare const createMockContext: (overrides?: Partial<PanelContextValue>)
  * Mock Panel Actions for Storybook
  */
 export declare const createMockActions: (overrides?: Partial<PanelActions> & {
-    readFile?: (path: string) => Promise<{
-        content: string;
-    }>;
+    readFile?: (path: string) => Promise<string>;
     writeFile?: (path: string, content: string) => Promise<void>;
 }) => PanelActions & Record<string, any>;
 /**
@@ -25,9 +23,7 @@ export declare const MockPanelProvider: React.FC<{
     children: (props: PanelComponentProps) => React.ReactNode;
     contextOverrides?: Partial<PanelContextValue>;
     actionsOverrides?: Partial<PanelActions> & {
-        readFile?: (path: string) => Promise<{
-            content: string;
-        }>;
+        readFile?: (path: string) => Promise<string>;
         writeFile?: (path: string, content: string) => Promise<void>;
     };
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"panelContext.d.ts","sourceRoot":"","sources":["../../src/mocks/panelContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EAIlB,MAAM,UAAU,CAAC;AA+BlB;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,iBAAiB,CAAC,KACrC,iBAiHF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,YAAY,CAAC,GAAG;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D,KAEA,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CA6BlC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,iBAwCnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG;QACzC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;YAAE,OAAO,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QAC1D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KAC9D,CAAC;CACH,CAMA,CAAC"}
+{"version":3,"file":"panelContext.d.ts","sourceRoot":"","sources":["../../src/mocks/panelContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EACjB,YAAY,EACZ,iBAAiB,EAIlB,MAAM,UAAU,CAAC;AA+BlB;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,iBAAiB,CAAC,KACrC,iBAiHF,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,YAAY,OAAO,CAAC,YAAY,CAAC,GAAG;IAClC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9D,KAEA,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CA6BlC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,gBAAgB,QAAO,iBAwCnC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IACvC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG;QACzC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;QAC7C,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KAC9D,CAAC;CACH,CAMA,CAAC"}

package/dist/panels/PrincipalViewGraphPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrincipalViewGraphPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAoD/E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+hCjE,CAAC"}
+{"version":3,"file":"PrincipalViewGraphPanel.d.ts","sourceRoot":"","sources":["../../src/panels/PrincipalViewGraphPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAC;AAoD/E;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8hCjE,CAAC"}

package/dist/panels.bundle.js

@@ -47788,19 +47788,11 @@ function requireEdgeInfoPanel() {
   EdgeInfoPanel.EdgeInfoPanel = void 0;
   const jsx_runtime_1 = require$$0;
   const industry_theme_1 = requireCjs();
-  const EdgeInfoPanel$1 = ({ edge, typeDefinition, sourceNodeId, targetNodeId, onClose, onDelete }) => {
+  const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
+  const EdgeInfoPanel$1 = ({ edge, typeDefinition, sourceNodeId, targetNodeId, onClose, onDelete, onUpdateSides }) => {
+    var _a, _b;
     const { theme } = (0, industry_theme_1.useTheme)();
     const edgeColor = typeDefinition.color || theme.colors.primary;
-    const displayFields = typeDefinition.dataSchema ? Object.entries(typeDefinition.dataSchema).filter(([, schema2]) => schema2.displayInInfo).map(([field, schema2]) => {
-      var _a;
-      return {
-        field,
-        label: schema2.label || field,
-        value: (_a = edge.data) == null ? void 0 : _a[field]
-      };
-    }) : [];
-    const hasSchemaFields = displayFields.length > 0;
-    const edgeDataEntries = edge.data ? Object.entries(edge.data) : [];
     return (0, jsx_runtime_1.jsxs)("div", { style: {
       position: "absolute",
       top: "60px",
@@ -47850,17 +47842,37 @@ function requireEdgeInfoPanel() {
       backgroundColor: theme.colors.muted,
       padding: "2px 6px",
       borderRadius: "3px"
-    }, children: targetNodeId })] })] }), hasSchemaFields && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-      fontSize: "10px",
-      color: theme.colors.textSecondary,
-      marginBottom: "8px",
-      fontWeight: "bold"
-    }, children: "Properties" }), displayFields.map(({ field, label, value }) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px" }, children: value !== void 0 && value !== null ? typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) : "-" })] }, field))] }), !hasSchemaFields && edgeDataEntries.length > 0 && (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
-      fontSize: "10px",
-      color: theme.colors.textSecondary,
-      marginBottom: "8px",
-      fontWeight: "bold"
-    }, children: "Data" }), edgeDataEntries.map(([key, value]) => (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "8px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "2px" }, children: key }), (0, jsx_runtime_1.jsx)("div", { style: { fontSize: "12px", 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: {
+    }, children: targetNodeId })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: "12px" }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textSecondary, marginBottom: "8px" }, children: "Connection Sides" }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textMuted, marginBottom: "4px" }, children: "From Side" }), (0, jsx_runtime_1.jsx)("select", { value: ((_a = edge.data) == null ? void 0 : _a.fromSide) || "right", onChange: (e) => {
+      var _a2;
+      if (onUpdateSides) {
+        onUpdateSides(edge.id, e.target.value, ((_a2 = edge.data) == null ? void 0 : _a2.toSide) || "left");
+      }
+    }, disabled: !onUpdateSides, style: {
+      width: "100%",
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderRadius: "4px",
+      border: `1px solid ${theme.colors.border}`,
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
+      cursor: onUpdateSides ? "pointer" : "not-allowed",
+      opacity: onUpdateSides ? 1 : 0.6
+    }, children: SIDE_OPTIONS.map((side) => (0, jsx_runtime_1.jsx)("option", { value: side, children: side }, side)) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: "10px", color: theme.colors.textMuted, marginBottom: "4px" }, children: "To Side" }), (0, jsx_runtime_1.jsx)("select", { value: ((_b = edge.data) == null ? void 0 : _b.toSide) || "left", onChange: (e) => {
+      var _a2;
+      if (onUpdateSides) {
+        onUpdateSides(edge.id, ((_a2 = edge.data) == null ? void 0 : _a2.fromSide) || "right", e.target.value);
+      }
+    }, disabled: !onUpdateSides, style: {
+      width: "100%",
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderRadius: "4px",
+      border: `1px solid ${theme.colors.border}`,
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text,
+      cursor: onUpdateSides ? "pointer" : "not-allowed",
+      opacity: onUpdateSides ? 1 : 0.6
+    }, children: SIDE_OPTIONS.map((side) => (0, jsx_runtime_1.jsx)("option", { value: side, children: side }, side)) })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: {
       fontSize: "10px",
       color: theme.colors.textMuted,
       marginTop: "12px",
@@ -48237,6 +48249,16 @@ function requireGraphRenderer() {
       const onCloseEdgeInfoPanel = (0, react_1.useCallback)(() => {
         setSelectedEdgeId(null);
       }, []);
+      const handleUpdateEdgeSides = (0, react_1.useCallback)((edgeId, fromSide, toSide) => {
+        setLocalEdges((currentEdges) => currentEdges.map((edge) => edge.id === edgeId ? {
+          ...edge,
+          data: {
+            ...edge.data,
+            fromSide,
+            toSide
+          }
+        } : edge));
+      }, []);
       const onCloseNodeInfoPanel = (0, react_1.useCallback)(() => {
         setSelectedNodeId(null);
       }, []);
@@ -48675,11 +48697,11 @@ function requireGraphRenderer() {
         }, 100);
         return () => clearTimeout(timeoutId);
       }, [baseNodesKey, fitView]);
-      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: editable, nodesConnectable: editable, edgesReconnectable: editable, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
+      return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.ReactFlow, { nodes: xyflowNodes, edges: xyflowEdges, nodeTypes, edgeTypes, minZoom: 0.1, maxZoom: 4, defaultEdgeOptions: { type: "custom" }, onEdgeClick, onNodeClick, proOptions: { hideAttribution: true }, nodesDraggable: editable, elementsSelectable: true, nodesConnectable: editable, edgesReconnectable: editable, reconnectRadius: 100, elevateEdgesOnSelect: true, onNodesChange: handleNodesChange, onConnect: handleConnect, onReconnectStart: handleReconnectStart, onReconnect: handleReconnect, onReconnectEnd: handleReconnectEnd, panOnDrag: true, selectionOnDrag: false, children: [showBackground && (0, jsx_runtime_1.jsx)(react_2.Background, { color: theme.colors.border, gap: 16, size: 1 }), showControls && (0, jsx_runtime_1.jsx)(react_2.Controls, { showZoom: true, showFitView: true, showInteractive: true }), showMinimap && (0, jsx_runtime_1.jsx)(react_2.MiniMap, { nodeColor: (node) => {
         var _a;
         const nodeData = node.data;
         return ((_a = nodeData == null ? void 0 : nodeData.typeDefinition) == null ? void 0 : _a.color) || theme.colors.secondary;
-      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0 }), selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
+      }, nodeBorderRadius: 2, pannable: true, zoomable: true })] }, baseNodesKey), selectedEdge && selectedEdgeTypeDefinition && (0, jsx_runtime_1.jsx)(EdgeInfoPanel_1.EdgeInfoPanel, { edge: selectedEdge, typeDefinition: selectedEdgeTypeDefinition, sourceNodeId: selectedEdge.from, targetNodeId: selectedEdge.to, onClose: onCloseEdgeInfoPanel, onDelete: editable ? handleEdgeDelete : void 0, onUpdateSides: editable ? handleUpdateEdgeSides : void 0 }), selectedNode && selectedNodeTypeDefinition && (0, jsx_runtime_1.jsx)(NodeInfoPanel_1.NodeInfoPanel, { node: selectedNode, typeDefinition: selectedNodeTypeDefinition, availableNodeTypes: configuration.nodeTypes, onClose: onCloseNodeInfoPanel, onDelete: editable ? handleNodeDelete : void 0, onUpdate: editable ? handleNodeUpdate : void 0 }), pendingConnection && (0, jsx_runtime_1.jsxs)("div", { style: {
         position: "absolute",
         top: "50%",
         left: "50%",
@@ -53345,20 +53367,19 @@ const PrincipalViewGraphPanel = ({
         throw new Error("Repository path not available");
       }
       const fullPath = `${repositoryPath}/${selectedConfig.path}`;
-      const fileResult = await readFile(fullPath);
-      if (!fileResult || typeof fileResult !== "object" || !("content" in fileResult)) {
+      const configContent = await readFile(fullPath);
+      if (!configContent || typeof configContent !== "string") {
         throw new Error("Failed to read config file");
       }
-      const configContent = fileResult.content;
       const canvas = ConfigLoader.parseCanvas(configContent);
       let library = null;
       const libraryPath = ConfigLoader.findLibraryPath(fileTreeData2.allFiles);
       if (libraryPath) {
         try {
           const libraryFullPath = `${repositoryPath}/${libraryPath}`;
-          const libraryResult = await readFile(libraryFullPath);
-          if (libraryResult && typeof libraryResult === "object" && "content" in libraryResult) {
-            library = ConfigLoader.parseLibrary(libraryResult.content);
+          const libraryContent = await readFile(libraryFullPath);
+          if (libraryContent && typeof libraryContent === "string") {
+            library = ConfigLoader.parseLibrary(libraryContent);
           }
         } catch (libraryError) {
           console.warn("[PrincipalView] Failed to load library.yaml:", libraryError);
@@ -53374,9 +53395,9 @@ const PrincipalViewGraphPanel = ({
           if (config.id === selectedConfig.id) continue;
           try {
             const configFullPath = `${repositoryPath}/${config.path}`;
-            const configResult = await readFile(configFullPath);
-            if (configResult && typeof configResult === "object" && "content" in configResult) {
-              const configCanvas = ConfigLoader.parseCanvas(configResult.content);
+            const configContentStr = await readFile(configFullPath);
+            if (configContentStr && typeof configContentStr === "string") {
+              const configCanvas = ConfigLoader.parseCanvas(configContentStr);
               setState((prev) => {
                 var _a3, _b2;
                 return {