@principal-ai/principal-view-react 0.8.1 → 0.8.2

package/dist/utils/animationMapping.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animationMapping.d.ts","sourceRoot":"","sources":["../../src/utils/animationMapping.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AAE1E;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,QAAQ,GAAG,aAAa,CAkCtE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,aAAa,CAiDpF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,aAAa,GAAG,aAAa,CAShG;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAE,QAAiB,GAAG,OAAO,CAMnF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,MAAM,EAClB,WAAW,GAAE,MAAa,GACzB,MAAM,CAIR"}
+{"version":3,"file":"animationMapping.d.ts","sourceRoot":"","sources":["../../src/utils/animationMapping.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC5C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,eAAe,CAAC;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;GAQG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,QAAQ,GAAG,aAAa,CAkCtE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,aAAa,CAiDpF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,aAAa,GAAG,aAAa,CAShG;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAE,QAAiB,GAAG,OAAO,CAMnF;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,MAAM,EACrB,UAAU,EAAE,MAAM,EAClB,WAAW,GAAE,MAAa,GACzB,MAAM,CAIR"}

package/dist/utils/graphConverter.d.ts

@@ -1,5 +1,5 @@
 import { type Node, type Edge } from '@xyflow/react';
-import type { NodeState, EdgeState, GraphConfiguration, Violation } from '@principal-ai/principal-view-core/browser';
+import type { NodeState, EdgeState, GraphConfiguration, Violation } from '@principal-ai/principal-view-core';
 import type { CustomNodeData } from '../nodes/CustomNode';
 import type { CustomEdgeData } from '../edges/CustomEdge';
 /**

package/dist/utils/graphConverter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graphConverter.d.ts","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,SAAS,EACV,MAAM,2CAA2C,CAAC;AACnD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CAgCxB;AAED,yEAAyE;AACzE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmBD;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,CAAC,SAAS,GAAG,oBAAoB,CAAC,EAAE,EAC3C,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CAiDxB"}
+{"version":3,"file":"graphConverter.d.ts","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,KAAK,EACV,SAAS,EACT,SAAS,EACT,kBAAkB,EAClB,SAAS,EACV,MAAM,mCAAmC,CAAC;AAC3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1D;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CAgCxB;AAED,yEAAyE;AACzE,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAmBD;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,CAAC,SAAS,GAAG,oBAAoB,CAAC,EAAE,EAC3C,aAAa,EAAE,kBAAkB,EACjC,UAAU,GAAE,SAAS,EAAO,GAC3B,IAAI,CAAC,cAAc,CAAC,EAAE,CAiDxB"}

package/dist/utils/orientationUtils.d.ts

@@ -1,4 +1,4 @@
-import type { NodeState, EdgeState } from '@principal-ai/principal-view-core/browser';
+import type { NodeState, EdgeState } from '@principal-ai/principal-view-core';
 /**
  * Swaps the orientation of a graph from horizontal to vertical or vice versa.
  * This swaps x/y coordinates and adjusts edge connection sides accordingly.

package/dist/utils/orientationUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"orientationUtils.d.ts","sourceRoot":"","sources":["../../src/utils/orientationUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,2CAA2C,CAAC;AAElG;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,KAAK,EAAE,SAAS,EAAE,GACjB;IAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,CAK5C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAQjE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAuB7D"}
+{"version":3,"file":"orientationUtils.d.ts","sourceRoot":"","sources":["../../src/utils/orientationUtils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAc,MAAM,mCAAmC,CAAC;AAE1F;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,EAAE,EAClB,KAAK,EAAE,SAAS,EAAE,GACjB;IAAE,KAAK,EAAE,SAAS,EAAE,CAAC;IAAC,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,CAK5C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAQjE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAuB7D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ConfigurationSelector.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ConfigurationFile } from '@principal-ai/principal-view-core/browser';
+import type { ConfigurationFile } from '@principal-ai/principal-view-core';
 
 export interface ConfigurationSelectorProps {
   /** Available configurations */

package/src/components/EdgeInfoPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core/browser';
+import type { EdgeState, EdgeTypeDefinition } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
 
 export interface EdgeInfoPanelProps {
@@ -35,17 +35,17 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
     <div
       style={{
         position: 'absolute',
-        top: '60px',
-        right: '20px',
+        bottom: 0,
+        left: 0,
+        right: 0,
         backgroundColor: theme.colors.background,
         color: theme.colors.text,
-        borderRadius: '8px',
-        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
-        padding: '16px',
-        minWidth: '250px',
-        maxWidth: '350px',
+        borderTop: `2px solid ${edgeColor}`,
+        boxShadow: '0 -4px 12px rgba(0,0,0,0.15)',
+        padding: '16px 24px',
         zIndex: 1000,
-        border: `1px solid ${theme.colors.border}`,
+        maxHeight: '40%',
+        overflowY: 'auto',
       }}
     >
       {/* Header */}
@@ -53,14 +53,17 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
         style={{
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center',
-          marginBottom: '12px',
-          paddingBottom: '8px',
-          borderBottom: `2px solid ${edgeColor}`,
+          alignItems: 'flex-start',
+          marginBottom: '16px',
         }}
       >
-        <div style={{ fontWeight: theme.fontWeights.bold, fontSize: theme.fontSizes[1], fontFamily: theme.fonts.body, color: edgeColor }}>
-          Edge Information
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flex: 1 }}>
+          <div style={{ fontWeight: theme.fontWeights.bold, fontSize: theme.fontSizes[2], fontFamily: theme.fonts.body, color: edgeColor }}>
+            Edge Information
+          </div>
+          <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textMuted }}>
+            {edge.type}
+          </div>
         </div>
         <button
           onClick={onClose}
@@ -71,183 +74,174 @@ export const EdgeInfoPanel: React.FC<EdgeInfoPanelProps> = ({
             fontSize: theme.fontSizes[3],
             fontFamily: theme.fonts.body,
             color: theme.colors.textSecondary,
-            padding: '0',
-            width: '24px',
-            height: '24px',
+            padding: '4px',
+            width: '28px',
+            height: '28px',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
+            borderRadius: '4px',
+            transition: 'background-color 0.15s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = theme.colors.muted;
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
           }}
         >
           ×
         </button>
       </div>
 
-      {/* Edge Type */}
-      <div style={{ marginBottom: '12px' }}>
-        <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
-          Type
-        </div>
-        <div
-          style={{
-            fontSize: theme.fontSizes[0],
-            fontFamily: theme.fonts.body,
-            padding: '4px 8px',
-            backgroundColor: edgeColor,
-            color: theme.colors.background,
-            borderRadius: '4px',
-            display: 'inline-block',
-          }}
-        >
-          {edge.type}
-        </div>
-      </div>
+      {/* Content - use horizontal layout */}
+      <div style={{ display: 'flex', gap: '32px', alignItems: 'flex-start' }}>
 
-      {/* Connection Info */}
-      <div style={{ marginBottom: '12px' }}>
-        <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
-          Connection
-        </div>
-        <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}>
-          <span
-            style={{
-              fontFamily: theme.fonts.monospace,
-              backgroundColor: theme.colors.muted,
-              padding: '2px 6px',
-              borderRadius: '3px',
-            }}
-          >
-            {sourceNodeId}
-          </span>
-          <span style={{ margin: '0 8px', color: theme.colors.textMuted }}>→</span>
-          <span
+        {/* Left section - Connection Info */}
+        <div style={{ flex: 1 }}>
+          <div style={{ marginBottom: '12px' }}>
+            <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
+              Connection
+            </div>
+            <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}>
+              <span
+                style={{
+                  fontFamily: theme.fonts.monospace,
+                  backgroundColor: theme.colors.muted,
+                  padding: '2px 6px',
+                  borderRadius: '3px',
+                }}
+              >
+                {sourceNodeId}
+              </span>
+              <span style={{ margin: '0 8px', color: theme.colors.textMuted }}>→</span>
+              <span
+                style={{
+                  fontFamily: theme.fonts.monospace,
+                  backgroundColor: theme.colors.muted,
+                  padding: '2px 6px',
+                  borderRadius: '3px',
+                }}
+              >
+                {targetNodeId}
+              </span>
+            </div>
+          </div>
+
+          {/* Metadata */}
+          <div
             style={{
-              fontFamily: theme.fonts.monospace,
-              backgroundColor: theme.colors.muted,
-              padding: '2px 6px',
-              borderRadius: '3px',
+              fontSize: theme.fontSizes[0],
+              fontFamily: theme.fonts.body,
+              color: theme.colors.textMuted,
             }}
           >
-            {targetNodeId}
-          </span>
+            ID: {edge.id}
+          </div>
         </div>
-      </div>
 
-      {/* Connection Sides */}
-      <div style={{ marginBottom: '12px' }}>
-        <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '8px' }}>
-          Connection Sides
-        </div>
-        <div style={{ display: 'flex', gap: '12px' }}>
-          <div style={{ flex: 1 }}>
-            <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textMuted, marginBottom: '4px' }}>
-              From Side
-            </div>
-            <select
-              value={(edge.data?.fromSide as string) || 'right'}
-              onChange={(e) => {
-                if (onUpdateSides) {
-                  onUpdateSides(edge.id, e.target.value, (edge.data?.toSide as string) || 'left');
-                }
-              }}
-              disabled={!onUpdateSides}
-              style={{
-                width: '100%',
-                padding: '6px 8px',
-                fontSize: theme.fontSizes[0],
-                fontFamily: theme.fonts.body,
-                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,
-              }}
-            >
-              {SIDE_OPTIONS.map((side) => (
-                <option key={side} value={side}>
-                  {side}
-                </option>
-              ))}
-            </select>
+        {/* Center section - Connection Sides */}
+        <div style={{ flex: 1 }}>
+          <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '8px' }}>
+            Connection Sides
           </div>
-          <div style={{ flex: 1 }}>
-            <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textMuted, marginBottom: '4px' }}>
-              To Side
+          <div style={{ display: 'flex', gap: '12px' }}>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textMuted, marginBottom: '4px' }}>
+                From Side
+              </div>
+              <select
+                value={(edge.data?.fromSide as string) || 'right'}
+                onChange={(e) => {
+                  if (onUpdateSides) {
+                    onUpdateSides(edge.id, e.target.value, (edge.data?.toSide as string) || 'left');
+                  }
+                }}
+                disabled={!onUpdateSides}
+                style={{
+                  width: '100%',
+                  padding: '6px 8px',
+                  fontSize: theme.fontSizes[0],
+                  fontFamily: theme.fonts.body,
+                  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,
+                }}
+              >
+                {SIDE_OPTIONS.map((side) => (
+                  <option key={side} value={side}>
+                    {side}
+                  </option>
+                ))}
+              </select>
             </div>
-            <select
-              value={(edge.data?.toSide as string) || 'left'}
-              onChange={(e) => {
-                if (onUpdateSides) {
-                  onUpdateSides(
-                    edge.id,
-                    (edge.data?.fromSide as string) || 'right',
-                    e.target.value
-                  );
-                }
+            <div style={{ flex: 1 }}>
+              <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textMuted, marginBottom: '4px' }}>
+                To Side
+              </div>
+              <select
+                value={(edge.data?.toSide as string) || 'left'}
+                onChange={(e) => {
+                  if (onUpdateSides) {
+                    onUpdateSides(
+                      edge.id,
+                      (edge.data?.fromSide as string) || 'right',
+                      e.target.value
+                    );
+                  }
+                }}
+                disabled={!onUpdateSides}
+                style={{
+                  width: '100%',
+                  padding: '6px 8px',
+                  fontSize: theme.fontSizes[0],
+                  fontFamily: theme.fonts.body,
+                  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,
+                }}
+              >
+                {SIDE_OPTIONS.map((side) => (
+                  <option key={side} value={side}>
+                    {side}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </div>
+
+        {/* Right section - Delete Button */}
+        {onDelete && (
+          <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+            <button
+              onClick={() => {
+                onDelete(edge.id);
+                onClose();
               }}
-              disabled={!onUpdateSides}
               style={{
-                width: '100%',
-                padding: '6px 8px',
+                padding: '8px 16px',
+                backgroundColor: theme.colors.error,
+                color: theme.colors.background,
+                border: 'none',
+                borderRadius: '4px',
+                cursor: 'pointer',
                 fontSize: theme.fontSizes[0],
                 fontFamily: theme.fonts.body,
-                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,
+                fontWeight: theme.fontWeights.bold,
               }}
             >
-              {SIDE_OPTIONS.map((side) => (
-                <option key={side} value={side}>
-                  {side}
-                </option>
-              ))}
-            </select>
+              Delete Edge
+            </button>
           </div>
-        </div>
-      </div>
-
-      {/* Metadata */}
-      <div
-        style={{
-          fontSize: theme.fontSizes[0],
-          fontFamily: theme.fonts.body,
-          color: theme.colors.textMuted,
-          marginTop: '12px',
-          paddingTop: '8px',
-          borderTop: `1px solid ${theme.colors.border}`,
-        }}
-      >
-        ID: {edge.id}
+        )}
       </div>
-
-      {/* Delete Button */}
-      {onDelete && (
-        <button
-          onClick={() => {
-            onDelete(edge.id);
-            onClose();
-          }}
-          style={{
-            marginTop: '12px',
-            width: '100%',
-            padding: '8px 12px',
-            backgroundColor: theme.colors.error,
-            color: theme.colors.background,
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: theme.fontSizes[0],
-            fontFamily: theme.fonts.body,
-            fontWeight: theme.fontWeights.bold,
-          }}
-        >
-          Delete Edge
-        </button>
-      )}
     </div>
   );
 };

package/src/components/GraphRenderer.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { GraphRenderer } from './GraphRenderer';
-import type { GraphConfiguration, NodeState, EdgeState } from '@principal-ai/principal-view-core/browser';
+import type { GraphConfiguration, NodeState, EdgeState } from '@principal-ai/principal-view-core';
 
 describe('GraphRenderer', () => {
   const testConfig: GraphConfiguration = {

package/src/components/GraphRenderer.tsx

@@ -38,8 +38,8 @@ import type {
   ExtendedCanvas,
   ComponentLibrary,
   JsonValue,
-} from '@principal-ai/principal-view-core/browser';
-import { CanvasConverter } from '@principal-ai/principal-view-core/browser';
+} from '@principal-ai/principal-view-core';
+import { CanvasConverter } from '@principal-ai/principal-view-core';
 import { useTheme } from '@principal-ade/industry-theme';
 import { CustomNode } from '../nodes/CustomNode';
 import type { CustomNodeData } from '../nodes/CustomNode';