@principal-ai/principal-view-react 0.16.56 → 0.16.58

package/src/subsystem/nodes.tsx

@@ -16,18 +16,26 @@ import {
 } from '@xyflow/react';
 import { useTheme } from '@principal-ade/industry-theme';
 import {
-  KIND_COLOR,
   MECHANISM_COLOR,
+  MECHANISM_STYLE,
+  ROLE_COLOR,
+  ROLE_LABEL,
   deriveNameFromSymbol,
   type SubsystemGraphNode,
   type SubsystemGraphEdge,
 } from './model';
+import { constructColorsFromPierreTheme } from '../pierre/constructColors';
+import { resolvePierreSyntaxThemeName } from '../pierre/pierreSyntaxTheme';
 
-export const KIND_LABEL: Record<string, string> = {
+export const CONSTRUCT_LABEL: Record<string, string> = {
   class: 'class',
   function: 'function',
-  type: 'type',
+  method: 'method',
+  interface: 'interface',
+  type_alias: 'type alias',
+  enum: 'enum',
   module: 'module',
+  store: 'store',
   external: 'external',
 };
 
@@ -48,6 +56,9 @@ function breakWords(s: string): string {
 export interface SubsystemGraphCallbacks {
   /** Click a component — open its file/entry point. */
   onSelect?: (componentId: string) => void;
+  /** Click the filename badge — open that component's file in the drawer
+   *  (same path as clicking the file link in the declaration panel). */
+  onOpenFile?: (componentId: string) => void;
   /** Click an edge (or its label) — select the relationship. */
   onEdgeSelect?: (edgeId: string) => void;
   /** Hover a component (null on leave) — associates it with the file tree. */
@@ -60,15 +71,19 @@ export interface SubsystemGraphCallbacks {
 export const SUBSYSTEM_CALLBACKS: SubsystemGraphCallbacks = {};
 
 export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
-  const { theme } = useTheme();
+  const { theme, mode } = useTheme();
   const { data, selected, width: nodeWidth, height: nodeHeight } = props;
   const c = data.component;
-  const color = KIND_COLOR[c.kind] ?? '#888';
+  // Construct owns node color, derived from the active Pierre syntax theme —
+  // the same palette the declaration panel and file drawer render with. Role
+  // shows as the hover badge, not as color — for now; a role glyph/accent may
+  // come later.
+  const color = constructColorsFromPierreTheme(resolvePierreSyntaxThemeName(mode))[c.construct];
   const [hover, setHover] = useState(false);
   const configuredMax = SUBSYSTEM_CALLBACKS.maxNodeWidth;
   const maxWidth = configuredMax ?? 300;
   // `symbol` is the source of truth; `name` is derived from it consistently.
-  const displayName = deriveNameFromSymbol(c.symbol, c.kind, c.name, c.file);
+  const displayName = deriveNameFromSymbol(c.symbol, c.construct, c.name, c.file);
   // Set while a file is open in the drawer: true → spotlight, false → dim,
   // absent (no file open) → neutral.
   const fileMatch = data.fileMatch as boolean | undefined;
@@ -111,42 +126,97 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
         boxShadow: fileMatch
           ? `0 1px 4px rgba(0,0,0,0.25), 0 0 12px ${theme.colors.primary}55`
           : '0 1px 4px rgba(0,0,0,0.25)',
-        opacity: fileMatch === false ? 0.18 : 1,
+        opacity: fileMatch === false || data.dimmed === true ? 0.18 : 1,
         transition: 'opacity 150ms ease',
         cursor: 'pointer',
         fontFamily: theme.fonts.body,
       }}
     >
-      {/* Kind + package tooltip, shown at the top on hover */}
-      {hover && (
+      {/* Construct badge — a small tab riding the top-right border, in the
+          construct color. Persistent (no hover needed); pointer-events none so
+          clicks pass through to the node. */}
+      <div
+        style={{
+          position: 'absolute',
+          top: -9,
+          left: 10,
+          zIndex: 1,
+          fontFamily: theme.fonts.monospace,
+          fontSize: theme.fontSizes[0] * 1.1,
+          letterSpacing: 0.5,
+          textTransform: 'uppercase',
+          lineHeight: '17px',
+          color,
+          background: theme.colors.backgroundSecondary ?? theme.colors.background,
+          border: `1px solid ${color}`,
+          borderRadius: 4,
+          padding: '0 5px',
+        }}
+      >
+        {CONSTRUCT_LABEL[c.construct] ?? c.construct}
+      </div>
+
+      {/* Role badge — top-right, only when the node carries a topology role.
+          Role color (entry orange / service blue) on the badge; the node
+          border stays construct-colored. */}
+      {c.role != null && (
         <div
           style={{
             position: 'absolute',
-            top: -26,
-            left: 0,
-            zIndex: 1000,
-            display: 'flex',
-            alignItems: 'center',
-            gap: 6,
-            whiteSpace: 'nowrap',
-            fontSize: theme.fontSizes[0] * 0.8,
+            top: -9,
+            right: 10,
+            zIndex: 1,
             fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0] * 1.1,
             letterSpacing: 0.5,
-            color,
-            background: theme.colors.background,
-            border: `1px solid ${theme.colors.border}`,
+            textTransform: 'uppercase',
+            lineHeight: '17px',
+            color: ROLE_COLOR[c.role],
+            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+            border: `1px solid ${ROLE_COLOR[c.role]}`,
             borderRadius: 4,
-            padding: '1px 6px',
+            padding: '0 5px',
           }}
         >
-          <span style={{ textTransform: 'uppercase' }}>
-            {KIND_LABEL[c.kind] ?? c.kind}
-          </span>
-          {c.file ? ` · ${c.file.split('/').pop()}` : ''}
-          {c.capture && c.capture !== 'edited' ? ` · ${c.capture}` : ''}
+          {ROLE_LABEL[c.role]}
         </div>
       )}
 
+      {/* Filename badge — a strip across the bottom border, shown on hover
+          and pinned while this node's file is open in the drawer (fileMatch).
+          Mirrors the construct/role tab badges; hidden for fileless nodes. */}
+      {(hover || fileMatch === true) && c.file ? (
+        <div
+          style={{
+            position: 'absolute',
+            bottom: -13,
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1,
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0] * 1.1,
+            letterSpacing: 0.5,
+            lineHeight: '17px',
+            whiteSpace: 'nowrap',
+            // filename stays neutral — the construct color belongs to the
+            // borders and badges, not the file name
+            color: theme.colors.text ?? theme.colors.textSecondary,
+            background: theme.colors.backgroundSecondary ?? theme.colors.background,
+            border: `1px solid ${color}`,
+            borderRadius: 4,
+            padding: '0 5px',
+            cursor: 'pointer',
+          }}
+          onClick={(e) => {
+            // Open the file directly; don't also toggle node selection.
+            e.stopPropagation();
+            SUBSYSTEM_CALLBACKS.onOpenFile?.(c.id);
+          }}
+        >
+          {c.file.split('/').pop()}
+        </div>
+      ) : null}
+
       {/* Purpose is no longer shown as a hover tooltip below the node — it
           lives in the declaration panel and the graphify detail payload. */}
 
@@ -168,7 +238,11 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
         {breakWords(displayName)}
       </div>
 
-      {c.symbol && c.symbol !== displayName && (
+      {/* Hide the identity line when the symbol is just the title without its
+          decoration (`()` or ` {}`) — only show it when it adds information
+          (e.g. the dotted host on methods, or a different code identity). */}
+      {c.symbol &&
+        c.symbol !== displayName.replace(/ ?\{\}$/, '').replace(/\(\)$/, '') && (
         <div
           style={{
             fontSize: theme.fontSizes[0] * 0.82,
@@ -193,6 +267,58 @@ export function SubsystemComponentNode(props: NodeProps<SubsystemGraphNode>) {
   );
 }
 
+/** `#rrggbb` + alpha → `#rrggbbaa`. Used to dim a stroke/marker by color so
+ *  each opacity gets its own SVG marker id — path `opacity` leaks across every
+ *  edge that shares a `url(#marker)` (the focused edge's arrowhead dims). */
+export function hexWithAlpha(hex: string, alpha: number): string {
+  const raw = hex.replace('#', '');
+  const full = raw.length === 3 ? [...raw].map((c) => c + c).join('') : raw;
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) return hex;
+  const a = Math.round(Math.min(1, Math.max(0, alpha)) * 255)
+    .toString(16)
+    .padStart(2, '0');
+  return `#${full}${a}`;
+}
+
+/**
+ * File-open spotlight flag for a node. `true` = lives in the open file,
+ * `false` = dim, `undefined` = render neutrally.
+ *
+ * Focused-edge endpoints stay neutral when they don't live in the open file
+ * (the target of a focused edge must not dim with the rest).
+ */
+export function fileMatchForNode(
+  nodeFile: string | undefined,
+  openFile: string | null,
+  isFocusEndpoint: boolean,
+): boolean | undefined {
+  if (!openFile) return undefined;
+  if (nodeFile === openFile) return true;
+  if (isFocusEndpoint) return undefined;
+  return false;
+}
+
+/**
+ * Hide / dim a node or edge while flows are open.
+ * - not in any opened flow → hidden
+ * - in an opened flow, but not the selected flow/step → dimmed
+ * - in the selected flow or step (or opened with nothing selected) → full
+ */
+export function flowElementVisibility(opts: {
+  inOpened: boolean;
+  inSelected: boolean;
+  anyOpened: boolean;
+  anySelected: boolean;
+}): { hidden: boolean; dimmed: boolean } {
+  const { inOpened, inSelected, anyOpened, anySelected } = opts;
+  if (!anyOpened && !anySelected) return { hidden: false, dimmed: false };
+  if (!inOpened && !inSelected) return { hidden: true, dimmed: false };
+  if (anySelected && !inSelected) return { hidden: false, dimmed: true };
+  return { hidden: false, dimmed: false };
+}
+
+export const EDGE_DIM_ALPHA = 0.15;
+
 /** Subsystem edge — SVG path only. The mechanism label is rendered as an
  *  absolutely-positioned HTML overlay OUTSIDE the ReactFlow tree (by the
  *  parent Inner component) so it sits above the pane and receives pointer
@@ -204,9 +330,14 @@ export function SubsystemEdge({
   const path = data?.elkPath ?? '';
   const mechanism = data?.mechanism ?? 'imports';
   const color = MECHANISM_COLOR[mechanism] ?? '#888';
-  const isDashed = mechanism === 'registers-into';
+  // Dash style comes from the mechanism table (dashed = inverted-control or
+  // observational relationships: hierarchy, registration, watches).
+  const isDashed = MECHANISM_STYLE[mechanism] === 'dashed';
   const dimmed = data?.dimmed === true;
-  const opacity = dimmed ? 0.15 : 1;
+  // Dim the stroke by color, never via path `opacity`. SVG markers are shared
+  // by id; opacity on the referencing path paints every arrowhead that uses
+  // the same marker — including the focused edge's target.
+  const stroke = dimmed ? hexWithAlpha(color, EDGE_DIM_ALPHA) : color;
 
   return (
     <>
@@ -225,10 +356,9 @@ export function SubsystemEdge({
       <path
         d={path}
         fill="none"
-        stroke={color}
+        stroke={stroke}
         strokeWidth={1.5}
         strokeDasharray={isDashed ? '6 4' : undefined}
-        opacity={opacity}
         markerEnd={markerEnd}
         style={{ pointerEvents: 'none' }}
       />

package/src/subsystem/tokenizeComponent.ts

@@ -50,7 +50,7 @@ export async function tokenizeComponent(
   if (component.tokens) return component.tokens;
 
   // External kind — not valid TypeScript, bypass Prettier.
-  const kind = component.detail?.kind ?? component.kind;
+  const kind = component.detail?.kind ?? component.construct;
   if (kind === 'external') {
     const label = component.detail?.kind === 'external' ? component.detail.label : component.name;
     const escaped = label.replace(/\\/g, '\\\\').replace(/'/g, "\\'");

package/src/utils/elkLayout.ts

@@ -529,9 +529,10 @@ export async function computeElkLayout(
         // and apply the same coordinate offset.
         if (edge.labels && edge.labels.length > 0) {
           const elkLabel = edge.labels[0];
-          // Raw ELK label position — no conversion.
-          let lx = elkLabel.x ?? 0;
-          let ly = elkLabel.y ?? 0;
+          // ELK reports the label's top-left; convert to center so screen-space
+          // overlays can anchor with translate(-50%, -50%) at any zoom.
+          let lx = (elkLabel.x ?? 0) + (elkLabel.width ?? 0) / 2;
+          let ly = (elkLabel.y ?? 0) + (elkLabel.height ?? 0) / 2;
           if (preserveNodePositions && sourceOriginal && sourceElk && targetOriginal && targetElk) {
             const sourceOffset = {
               x: sourceOriginal.x - sourceElk.x,