@principal-ai/principal-view-react 0.7.40 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/components/EdgeInfoPanel.d.ts.map +1 -1
  2. package/dist/components/EdgeInfoPanel.js +18 -12
  3. package/dist/components/EdgeInfoPanel.js.map +1 -1
  4. package/dist/components/NodeInfoPanel.d.ts.map +1 -1
  5. package/dist/components/NodeInfoPanel.js +46 -30
  6. package/dist/components/NodeInfoPanel.js.map +1 -1
  7. package/dist/components/NodeTooltip.d.ts.map +1 -1
  8. package/dist/components/NodeTooltip.js +11 -6
  9. package/dist/components/NodeTooltip.js.map +1 -1
  10. package/dist/components/SelectionSidebar.d.ts.map +1 -1
  11. package/dist/components/SelectionSidebar.js +24 -13
  12. package/dist/components/SelectionSidebar.js.map +1 -1
  13. package/dist/edges/CustomEdge.d.ts.map +1 -1
  14. package/dist/edges/CustomEdge.js +8 -4
  15. package/dist/edges/CustomEdge.js.map +1 -1
  16. package/dist/nodes/CustomNode.d.ts.map +1 -1
  17. package/dist/nodes/CustomNode.js +32 -19
  18. package/dist/nodes/CustomNode.js.map +1 -1
  19. package/dist/utils/orientationUtils.d.ts +1 -1
  20. package/dist/utils/orientationUtils.d.ts.map +1 -1
  21. package/package.json +2 -2
  22. package/src/components/EdgeInfoPanel.tsx +20 -14
  23. package/src/components/NodeInfoPanel.tsx +48 -32
  24. package/src/components/NodeTooltip.tsx +11 -6
  25. package/src/components/SelectionSidebar.tsx +24 -13
  26. package/src/edges/CustomEdge.tsx +8 -4
  27. package/src/nodes/CustomNode.tsx +32 -19
  28. package/src/utils/orientationUtils.ts +1 -1
  29. package/dist/components/NarrativeRenderer.d.ts +0 -19
  30. package/dist/components/NarrativeRenderer.d.ts.map +0 -1
  31. package/dist/components/NarrativeRenderer.js +0 -103
  32. package/dist/components/NarrativeRenderer.js.map +0 -1
  33. package/dist/components/TestEventPanel.d.ts +0 -44
  34. package/dist/components/TestEventPanel.d.ts.map +0 -1
  35. package/dist/components/TestEventPanel.js +0 -277
  36. package/dist/components/TestEventPanel.js.map +0 -1
  37. package/dist/utils/narrative-converter.d.ts +0 -45
  38. package/dist/utils/narrative-converter.d.ts.map +0 -1
  39. package/dist/utils/narrative-converter.js +0 -121
  40. package/dist/utils/narrative-converter.js.map +0 -1
  41. package/dist/utils/narrative-loader.d.ts +0 -53
  42. package/dist/utils/narrative-loader.d.ts.map +0 -1
  43. package/dist/utils/narrative-loader.js +0 -163
  44. package/dist/utils/narrative-loader.js.map +0 -1
package/src/components/NodeInfoPanel.tsx CHANGED
@@ -188,7 +188,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
188
188
  borderBottom: `2px solid ${nodeColor}`,
189
189
  }}
190
190
  >
191
- <div style={{ fontWeight: 'bold', fontSize: '14px', color: nodeColor }}>
191
+ <div style={{ fontWeight: theme.fontWeights.bold, fontSize: theme.fontSizes[1], fontFamily: theme.fonts.body, color: nodeColor }}>
192
192
  {node.name || node.id}
193
193
  </div>
194
194
  <button
@@ -197,7 +197,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
197
197
  border: 'none',
198
198
  background: 'none',
199
199
  cursor: 'pointer',
200
- fontSize: '18px',
200
+ fontSize: theme.fontSizes[3],
201
+ fontFamily: theme.fonts.body,
201
202
  color: theme.colors.textSecondary,
202
203
  padding: '0',
203
204
  width: '24px',
@@ -214,17 +215,17 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
214
215
  {/* Description - first field under header */}
215
216
  {node.data?.description && (
216
217
  <div style={{ marginBottom: '12px' }}>
217
- <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
218
+ <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
218
219
  Description
219
220
  </div>
220
- <div style={{ fontSize: '12px' }}>{String(node.data.description)}</div>
221
+ <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}>{String(node.data.description)}</div>
221
222
  </div>
222
223
  )}
223
224
 
224
225
  {/* Sources - shown after description */}
225
226
  {sources.length > 0 && (
226
227
  <div style={{ marginBottom: '12px' }}>
227
- <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
228
+ <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
228
229
  Sources
229
230
  </div>
230
231
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
@@ -234,7 +235,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
234
235
  key={index}
235
236
  onClick={() => onSourceClick(node.id, source)}
236
237
  style={{
237
- fontSize: '11px',
238
+ fontSize: theme.fontSizes[0],
239
+ fontFamily: theme.fonts.body,
238
240
  padding: '2px 8px',
239
241
  backgroundColor: theme.colors.muted,
240
242
  borderRadius: '4px',
@@ -258,7 +260,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
258
260
  <span
259
261
  key={index}
260
262
  style={{
261
- fontSize: '11px',
263
+ fontSize: theme.fontSizes[0],
264
+ fontFamily: theme.fonts.body,
262
265
  padding: '2px 8px',
263
266
  backgroundColor: theme.colors.muted,
264
267
  borderRadius: '4px',
@@ -276,7 +279,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
276
279
  {/* OTEL Info - shown after sources */}
277
280
  {otelInfo && (
278
281
  <div style={{ marginBottom: '12px' }}>
279
- <div style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}>
282
+ <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}>
280
283
  OpenTelemetry
281
284
  </div>
282
285
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center' }}>
@@ -284,8 +287,9 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
284
287
  {otelInfo.kind && (
285
288
  <span
286
289
  style={{
287
- fontSize: '10px',
288
- fontWeight: 600,
290
+ fontSize: theme.fontSizes[0],
291
+ fontWeight: theme.fontWeights.semibold,
292
+ fontFamily: theme.fonts.body,
289
293
  padding: '3px 8px',
290
294
  borderRadius: '4px',
291
295
  textTransform: 'uppercase',
@@ -307,7 +311,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
307
311
  {otelInfo.category && (
308
312
  <span
309
313
  style={{
310
- fontSize: '11px',
314
+ fontSize: theme.fontSizes[0],
315
+ fontFamily: theme.fonts.body,
311
316
  color: theme.colors.textSecondary,
312
317
  }}
313
318
  >
@@ -318,8 +323,9 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
318
323
  {otelInfo.isNew && (
319
324
  <span
320
325
  style={{
321
- fontSize: '9px',
322
- fontWeight: 600,
326
+ fontSize: theme.fontSizes[0],
327
+ fontWeight: theme.fontWeights.semibold,
328
+ fontFamily: theme.fonts.body,
323
329
  padding: '2px 6px',
324
330
  borderRadius: '3px',
325
331
  backgroundColor: '#F5A623',
@@ -343,7 +349,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
343
349
  border: `1px solid ${theme.colors.border}`,
344
350
  borderRadius: '4px',
345
351
  cursor: 'pointer',
346
- fontSize: '12px',
352
+ fontSize: theme.fontSizes[0],
353
+ fontFamily: theme.fonts.body,
347
354
  color: theme.colors.textSecondary,
348
355
  display: 'flex',
349
356
  alignItems: 'center',
@@ -369,7 +376,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
369
376
  {/* Icon Selector */}
370
377
  <div style={{ marginBottom: '12px' }}>
371
378
  <div
372
- style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}
379
+ style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}
373
380
  >
374
381
  Icon
375
382
  </div>
@@ -388,7 +395,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
388
395
  : `1px solid ${theme.colors.border}`,
389
396
  borderRadius: '4px',
390
397
  cursor: canEdit ? 'pointer' : 'default',
391
- fontSize: '12px',
398
+ fontSize: theme.fontSizes[0],
399
+ fontFamily: theme.fonts.body,
392
400
  width: '100%',
393
401
  justifyContent: 'flex-start',
394
402
  color: theme.colors.text,
@@ -400,7 +408,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
400
408
  <span>{currentIcon || 'No icon'}</span>
401
409
  {canEdit && (
402
410
  <span
403
- style={{ marginLeft: 'auto', color: theme.colors.textMuted, fontSize: '10px' }}
411
+ style={{ marginLeft: 'auto', color: theme.colors.textMuted, fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}
404
412
  >
405
413
  ✎
406
414
  </span>
@@ -468,7 +476,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
468
476
  {/* Node Type - Editable if availableNodeTypes provided */}
469
477
  <div style={{ marginBottom: '12px' }}>
470
478
  <div
471
- style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}
479
+ style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}
472
480
  >
473
481
  Type
474
482
  </div>
@@ -477,7 +485,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
477
485
  value={node.type}
478
486
  onChange={(e) => handleTypeChange(e.target.value)}
479
487
  style={{
480
- fontSize: '12px',
488
+ fontSize: theme.fontSizes[0],
489
+ fontFamily: theme.fonts.body,
481
490
  padding: '4px 8px',
482
491
  borderRadius: '4px',
483
492
  border: `1px solid ${theme.colors.border}`,
@@ -496,7 +505,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
496
505
  ) : (
497
506
  <div
498
507
  style={{
499
- fontSize: '12px',
508
+ fontSize: theme.fontSizes[0],
509
+ fontFamily: theme.fonts.body,
500
510
  padding: '4px 8px',
501
511
  backgroundColor: nodeColor,
502
512
  color: theme.colors.background,
@@ -513,13 +523,14 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
513
523
  {node.state && (
514
524
  <div style={{ marginBottom: '12px' }}>
515
525
  <div
516
- style={{ fontSize: '10px', color: theme.colors.textSecondary, marginBottom: '4px' }}
526
+ style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, color: theme.colors.textSecondary, marginBottom: '4px' }}
517
527
  >
518
528
  State
519
529
  </div>
520
530
  <div
521
531
  style={{
522
- fontSize: '12px',
532
+ fontSize: theme.fontSizes[0],
533
+ fontFamily: theme.fonts.body,
523
534
  padding: '4px 8px',
524
535
  backgroundColor:
525
536
  typeDefinition?.states?.[node.state]?.color || theme.colors.secondary,
@@ -538,10 +549,11 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
538
549
  <div style={{ marginBottom: '12px' }}>
539
550
  <div
540
551
  style={{
541
- fontSize: '10px',
552
+ fontSize: theme.fontSizes[0],
553
+ fontFamily: theme.fonts.body,
542
554
  color: theme.colors.textSecondary,
543
555
  marginBottom: '8px',
544
- fontWeight: 'bold',
556
+ fontWeight: theme.fontWeights.bold,
545
557
  }}
546
558
  >
547
559
  Properties
@@ -559,7 +571,7 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
559
571
  >
560
572
  {label}
561
573
  </div>
562
- <div style={{ fontSize: '12px' }}>
574
+ <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}>
563
575
  {value !== undefined && value !== null
564
576
  ? typeof value === 'object'
565
577
  ? JSON.stringify(value, null, 2)
@@ -576,10 +588,11 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
576
588
  <div style={{ marginBottom: '12px' }}>
577
589
  <div
578
590
  style={{
579
- fontSize: '10px',
591
+ fontSize: theme.fontSizes[0],
592
+ fontFamily: theme.fonts.body,
580
593
  color: theme.colors.textSecondary,
581
594
  marginBottom: '8px',
582
- fontWeight: 'bold',
595
+ fontWeight: theme.fontWeights.bold,
583
596
  }}
584
597
  >
585
598
  Data
@@ -588,14 +601,15 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
588
601
  <div key={key} style={{ marginBottom: '8px' }}>
589
602
  <div
590
603
  style={{
591
- fontSize: '10px',
604
+ fontSize: theme.fontSizes[0],
605
+ fontFamily: theme.fonts.body,
592
606
  color: theme.colors.textSecondary,
593
607
  marginBottom: '2px',
594
608
  }}
595
609
  >
596
610
  {key}
597
611
  </div>
598
- <div style={{ fontSize: '12px', wordBreak: 'break-word' }}>
612
+ <div style={{ fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body, wordBreak: 'break-word' }}>
599
613
  {value !== undefined && value !== null
600
614
  ? typeof value === 'object'
601
615
  ? JSON.stringify(value, null, 2)
@@ -610,7 +624,8 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
610
624
  {/* Metadata */}
611
625
  <div
612
626
  style={{
613
- fontSize: '10px',
627
+ fontSize: theme.fontSizes[0],
628
+ fontFamily: theme.fonts.body,
614
629
  color: theme.colors.textMuted,
615
630
  marginTop: '12px',
616
631
  paddingTop: '8px',
@@ -638,8 +653,9 @@ export const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
638
653
  border: 'none',
639
654
  borderRadius: '4px',
640
655
  cursor: 'pointer',
641
- fontSize: '12px',
642
- fontWeight: 'bold',
656
+ fontSize: theme.fontSizes[0],
657
+ fontFamily: theme.fonts.body,
658
+ fontWeight: theme.fontWeights.bold,
643
659
  }}
644
660
  >
645
661
  Delete Node
package/src/components/NodeTooltip.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { createPortal } from 'react-dom';
3
+ import { useTheme } from '@principal-ade/industry-theme';
3
4
 
4
5
  export interface OtelInfo {
5
6
  kind: 'type' | 'service' | 'instance';
@@ -25,6 +26,7 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
25
26
  visible,
26
27
  nodeRef,
27
28
  }) => {
29
+ const { theme } = useTheme();
28
30
  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
29
31
 
30
32
  useEffect(() => {
@@ -83,7 +85,8 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
83
85
  backgroundColor: 'rgba(0, 0, 0, 0.9)',
84
86
  color: 'white',
85
87
  borderRadius: '6px',
86
- fontSize: '11px',
88
+ fontSize: theme.fontSizes[0],
89
+ fontFamily: theme.fonts.body,
87
90
  maxWidth: '250px',
88
91
  zIndex: 99999,
89
92
  pointerEvents: 'none',
@@ -123,15 +126,16 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
123
126
  color: 'white',
124
127
  padding: '2px 6px',
125
128
  borderRadius: '3px',
126
- fontSize: '9px',
127
- fontWeight: 600,
129
+ fontSize: theme.fontSizes[0],
130
+ fontWeight: theme.fontWeights.semibold,
131
+ fontFamily: theme.fonts.body,
128
132
  textTransform: 'uppercase',
129
133
  }}
130
134
  >
131
135
  {getKindLabel(otel.kind)}
132
136
  </span>
133
137
  {otel.category && (
134
- <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: '10px' }}>
138
+ <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: theme.fontSizes[0], fontFamily: theme.fonts.body }}>
135
139
  {otel.category}
136
140
  </span>
137
141
  )}
@@ -142,8 +146,9 @@ export const NodeTooltip: React.FC<NodeTooltipProps> = ({
142
146
  color: 'white',
143
147
  padding: '1px 4px',
144
148
  borderRadius: '3px',
145
- fontSize: '8px',
146
- fontWeight: 600,
149
+ fontSize: theme.fontSizes[0],
150
+ fontWeight: theme.fontWeights.semibold,
151
+ fontFamily: theme.fonts.body,
147
152
  }}
148
153
  >
149
154
  NEW
package/src/components/SelectionSidebar.tsx CHANGED
@@ -91,7 +91,7 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
91
91
  borderBottom: `2px solid ${theme.colors.primary}`,
92
92
  }}
93
93
  >
94
- <div style={{ fontWeight: 'bold', fontSize: '14px', color: theme.colors.primary }}>
94
+ <div style={{ fontWeight: theme.fontWeights.bold, fontSize: theme.fontSizes[1], fontFamily: theme.fonts.body, color: theme.colors.primary }}>
95
95
  {selectedNodes.length} nodes selected
96
96
  </div>
97
97
  <button
@@ -100,7 +100,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
100
100
  border: 'none',
101
101
  background: 'none',
102
102
  cursor: 'pointer',
103
- fontSize: '18px',
103
+ fontSize: theme.fontSizes[3],
104
+ fontFamily: theme.fonts.body,
104
105
  color: theme.colors.textSecondary,
105
106
  padding: '0',
106
107
  width: '24px',
@@ -175,8 +176,9 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
175
176
  <div style={{ flex: 1, minWidth: 0 }}>
176
177
  <div
177
178
  style={{
178
- fontWeight: 600,
179
- fontSize: '13px',
179
+ fontWeight: theme.fontWeights.semibold,
180
+ fontSize: theme.fontSizes[1],
181
+ fontFamily: theme.fonts.body,
180
182
  color: theme.colors.text,
181
183
  marginBottom: description ? '2px' : 0,
182
184
  }}
@@ -186,7 +188,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
186
188
  {description && (
187
189
  <div
188
190
  style={{
189
- fontSize: '11px',
191
+ fontSize: theme.fontSizes[0],
192
+ fontFamily: theme.fonts.body,
190
193
  color: theme.colors.textSecondary,
191
194
  overflow: 'hidden',
192
195
  textOverflow: 'ellipsis',
@@ -227,7 +230,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
227
230
  <div style={{ marginTop: '10px' }}>
228
231
  <div
229
232
  style={{
230
- fontSize: '10px',
233
+ fontSize: theme.fontSizes[0],
234
+ fontFamily: theme.fonts.body,
231
235
  color: theme.colors.textSecondary,
232
236
  marginBottom: '4px',
233
237
  }}
@@ -236,7 +240,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
236
240
  </div>
237
241
  <div
238
242
  style={{
239
- fontSize: '11px',
243
+ fontSize: theme.fontSizes[0],
244
+ fontFamily: theme.fonts.body,
240
245
  padding: '3px 8px',
241
246
  backgroundColor: nodeColor,
242
247
  color: 'white',
@@ -253,7 +258,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
253
258
  <div style={{ marginTop: '8px' }}>
254
259
  <div
255
260
  style={{
256
- fontSize: '10px',
261
+ fontSize: theme.fontSizes[0],
262
+ fontFamily: theme.fonts.body,
257
263
  color: theme.colors.textSecondary,
258
264
  marginBottom: '4px',
259
265
  }}
@@ -262,7 +268,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
262
268
  </div>
263
269
  <div
264
270
  style={{
265
- fontSize: '11px',
271
+ fontSize: theme.fontSizes[0],
272
+ fontFamily: theme.fonts.body,
266
273
  padding: '3px 8px',
267
274
  backgroundColor:
268
275
  typeDefinition?.states?.[node.state]?.color || theme.colors.secondary,
@@ -281,7 +288,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
281
288
  <div style={{ marginTop: '8px' }}>
282
289
  <div
283
290
  style={{
284
- fontSize: '10px',
291
+ fontSize: theme.fontSizes[0],
292
+ fontFamily: theme.fonts.body,
285
293
  color: theme.colors.textSecondary,
286
294
  marginBottom: '6px',
287
295
  fontWeight: 'bold',
@@ -293,7 +301,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
293
301
  <div key={key} style={{ marginBottom: '6px' }}>
294
302
  <div
295
303
  style={{
296
- fontSize: '10px',
304
+ fontSize: theme.fontSizes[0],
305
+ fontFamily: theme.fonts.body,
297
306
  color: theme.colors.textSecondary,
298
307
  marginBottom: '2px',
299
308
  }}
@@ -302,7 +311,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
302
311
  </div>
303
312
  <div
304
313
  style={{
305
- fontSize: '11px',
314
+ fontSize: theme.fontSizes[0],
315
+ fontFamily: theme.fonts.body,
306
316
  color: theme.colors.text,
307
317
  wordBreak: 'break-word',
308
318
  }}
@@ -321,7 +331,8 @@ export const SelectionSidebar: React.FC<SelectionSidebarProps> = ({
321
331
  {/* Node ID */}
322
332
  <div
323
333
  style={{
324
- fontSize: '10px',
334
+ fontSize: theme.fontSizes[0],
335
+ fontFamily: theme.fonts.body,
325
336
  color: theme.colors.textMuted,
326
337
  marginTop: '8px',
327
338
  paddingTop: '6px',
package/src/edges/CustomEdge.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react';
2
2
  import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react';
3
3
  import type { EdgeProps } from '@xyflow/react';
4
4
  import type { EdgeTypeDefinition } from '@principal-ai/principal-view-core/browser';
5
+ import { useTheme } from '@principal-ade/industry-theme';
5
6
 
6
7
  export interface CustomEdgeData extends Record<string, unknown> {
7
8
  typeDefinition: EdgeTypeDefinition;
@@ -34,6 +35,7 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
34
35
  markerEnd,
35
36
  selected,
36
37
  }) => {
38
+ const { theme } = useTheme();
37
39
  const edgeProps = data as CustomEdgeData | undefined;
38
40
  const {
39
41
  typeDefinition,
@@ -276,8 +278,9 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
276
278
  backgroundColor: 'white',
277
279
  padding: '2px 6px',
278
280
  borderRadius: '4px',
279
- fontSize: '10px',
280
- fontWeight: 500,
281
+ fontSize: theme.fontSizes[0],
282
+ fontWeight: theme.fontWeights.medium,
283
+ fontFamily: theme.fonts.body,
281
284
  border: `1px solid ${color}`,
282
285
  pointerEvents: 'all',
283
286
  }}
@@ -299,8 +302,9 @@ export const CustomEdge: React.FC<EdgeProps<any>> = ({
299
302
  color: 'white',
300
303
  padding: '4px 8px',
301
304
  borderRadius: '4px',
302
- fontSize: '11px',
303
- fontWeight: 500,
305
+ fontSize: theme.fontSizes[0],
306
+ fontWeight: theme.fontWeights.medium,
307
+ fontFamily: theme.fonts.body,
304
308
  whiteSpace: 'nowrap',
305
309
  pointerEvents: 'none',
306
310
  zIndex: 1000,
package/src/nodes/CustomNode.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
2
2
  import { Handle, Position, NodeResizer } from '@xyflow/react';
3
3
  import type { NodeProps } from '@xyflow/react';
4
4
  import type { NodeTypeDefinition } from '@principal-ai/principal-view-core/browser';
5
+ import { useTheme } from '@principal-ade/industry-theme';
5
6
  import { resolveIcon } from '../utils/iconResolver';
6
7
  import { NodeTooltip } from '../components/NodeTooltip';
7
8
  import type { OtelInfo } from '../components/NodeTooltip';
@@ -59,6 +60,7 @@ export interface CustomNodeData extends Record<string, unknown> {
59
60
  */
60
61
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
61
62
  export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging }) => {
63
+ const { theme } = useTheme();
62
64
  const [isHovered, setIsHovered] = useState(false);
63
65
  const nodeRef = useRef<HTMLDivElement>(null);
64
66
  const nodeProps = data as CustomNodeData;
@@ -116,8 +118,9 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
116
118
  borderRadius: '50%',
117
119
  backgroundColor: badgeColor,
118
120
  color: 'white',
119
- fontSize: '10px',
120
- fontWeight: 700,
121
+ fontSize: theme.fontSizes[0],
122
+ fontWeight: theme.fontWeights.bold,
123
+ fontFamily: theme.fonts.body,
121
124
  display: 'flex',
122
125
  alignItems: 'center',
123
126
  justifyContent: 'center',
@@ -148,8 +151,9 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
148
151
  borderRadius: '50%',
149
152
  backgroundColor: '#10b981', // Green for sources
150
153
  color: 'white',
151
- fontSize: '10px',
152
- fontWeight: 700,
154
+ fontSize: theme.fontSizes[0],
155
+ fontWeight: theme.fontWeights.bold,
156
+ fontFamily: theme.fonts.body,
153
157
  display: 'flex',
154
158
  alignItems: 'center',
155
159
  justifyContent: 'center',
@@ -229,8 +233,9 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
229
233
  backgroundColor: isGroup ? 'rgba(255, 255, 255, 0.7)' : hexToLightColor(fillColor),
230
234
  color: '#000',
231
235
  border: `2px solid ${hasViolations ? '#D0021B' : strokeColor}`,
232
- fontSize: '12px',
233
- fontWeight: 500,
236
+ fontSize: theme.fontSizes[0],
237
+ fontWeight: theme.fontWeights.medium,
238
+ fontFamily: theme.fonts.body,
234
239
  // Use 100% width/height to fill the node container (for resizing support)
235
240
  width: '100%',
236
241
  height: '100%',
@@ -345,8 +350,9 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
345
350
  flexDirection: 'column',
346
351
  alignItems: 'center',
347
352
  justifyContent: 'center',
348
- fontSize: '12px',
349
- fontWeight: 500,
353
+ fontSize: theme.fontSizes[0],
354
+ fontWeight: theme.fontWeights.medium,
355
+ fontFamily: theme.fonts.body,
350
356
  gap: '4px',
351
357
  }
352
358
  : {};
@@ -388,8 +394,9 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
388
394
  flexDirection: 'column',
389
395
  alignItems: 'center',
390
396
  justifyContent: 'center',
391
- fontSize: '12px',
392
- fontWeight: 500,
397
+ fontSize: theme.fontSizes[0],
398
+ fontWeight: theme.fontWeights.medium,
399
+ fontFamily: theme.fonts.body,
393
400
  gap: '4px',
394
401
  }
395
402
  : {};
@@ -479,7 +486,8 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
479
486
  {state && (
480
487
  <div
481
488
  style={{
482
- fontSize: '10px',
489
+ fontSize: theme.fontSizes[0],
490
+ fontFamily: theme.fonts.body,
483
491
  backgroundColor: color,
484
492
  color: 'white',
485
493
  padding: '2px 6px',
@@ -493,9 +501,10 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
493
501
  {hasViolations && (
494
502
  <div
495
503
  style={{
496
- fontSize: '10px',
504
+ fontSize: theme.fontSizes[0],
505
+ fontFamily: theme.fonts.body,
497
506
  color: '#D0021B',
498
- fontWeight: 'bold',
507
+ fontWeight: theme.fontWeights.bold,
499
508
  }}
500
509
  >
501
510
  ⚠️
@@ -532,7 +541,8 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
532
541
  {state && (
533
542
  <div
534
543
  style={{
535
- fontSize: '10px',
544
+ fontSize: theme.fontSizes[0],
545
+ fontFamily: theme.fonts.body,
536
546
  backgroundColor: color,
537
547
  color: 'white',
538
548
  padding: '2px 6px',
@@ -546,9 +556,10 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
546
556
  {hasViolations && (
547
557
  <div
548
558
  style={{
549
- fontSize: '10px',
559
+ fontSize: theme.fontSizes[0],
560
+ fontFamily: theme.fonts.body,
550
561
  color: '#D0021B',
551
- fontWeight: 'bold',
562
+ fontWeight: theme.fontWeights.bold,
552
563
  }}
553
564
  >
554
565
  ⚠️
@@ -610,7 +621,8 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
610
621
  {state && (
611
622
  <div
612
623
  style={{
613
- fontSize: '10px',
624
+ fontSize: theme.fontSizes[0],
625
+ fontFamily: theme.fonts.body,
614
626
  backgroundColor: color,
615
627
  color: 'white',
616
628
  padding: '2px 6px',
@@ -624,9 +636,10 @@ export const CustomNode: React.FC<NodeProps<any>> = ({ data, selected, dragging
624
636
  {hasViolations && (
625
637
  <div
626
638
  style={{
627
- fontSize: '10px',
639
+ fontSize: theme.fontSizes[0],
640
+ fontFamily: theme.fonts.body,
628
641
  color: '#D0021B',
629
- fontWeight: 'bold',
642
+ fontWeight: theme.fontWeights.bold,
630
643
  }}
631
644
  >
632
645
  ⚠️
package/src/utils/orientationUtils.ts CHANGED
@@ -1,4 +1,4 @@
1
- import type { NodeState, EdgeState, CanvasSide } from '@principal-ai/principal-view-core';
1
+ import type { NodeState, EdgeState, CanvasSide } from '@principal-ai/principal-view-core/browser';
2
2
 
3
3
  /**
4
4
  * Swaps the orientation of a graph from horizontal to vertical or vice versa.
package/dist/components/NarrativeRenderer.d.ts DELETED
@@ -1,19 +0,0 @@
1
- import React from 'react';
2
- import type { NarrativeTemplate, OtelEvent } from '@principal-ai/principal-view-core/browser';
3
- export interface NarrativeRendererProps {
4
- /** Narrative template to use for rendering */
5
- template: NarrativeTemplate;
6
- /** OTEL events to render */
7
- events: OtelEvent[];
8
- /** Optional CSS class name */
9
- className?: string;
10
- /** Optional custom style */
11
- style?: React.CSSProperties;
12
- /** Show metadata panel */
13
- showMetadata?: boolean;
14
- }
15
- /**
16
- * Renders OTEL events as a human-readable narrative using a template
17
- */
18
- export declare const NarrativeRenderer: React.FC<NarrativeRendererProps>;
19
- //# sourceMappingURL=NarrativeRenderer.d.ts.map
package/dist/components/NarrativeRenderer.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"NarrativeRenderer.d.ts","sourceRoot":"","sources":["../../src/components/NarrativeRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,2CAA2C,CAAC;AAG9F,MAAM,WAAW,sBAAsB;IACrC,8CAA8C;IAC9C,QAAQ,EAAE,iBAAiB,CAAC;IAE5B,4BAA4B;IAC5B,MAAM,EAAE,SAAS,EAAE,CAAC;IAEpB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiJ9D,CAAC"}