@principal-ai/principal-view-react 0.16.33 → 0.16.35

package/src/subsystem/ComponentDetail.tsx

@@ -0,0 +1,187 @@
+/**
+ * ComponentDetail — selection detail panel for a subsystem component: the
+ * verifiable identity (symbol/file/purpose/purl) plus graphify drill-down
+ * sections. File content lives in the bottom FileDrawer, not here.
+ */
+
+import type { ReactNode } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import {
+  KIND_COLOR,
+  deriveNameFromSymbol,
+  type SubsystemComponent,
+} from './model';
+import type { GraphifyComponentDetail } from '../graphify';
+
+/** Detail panel for the selected component — the verifiable identity + sources
+ *  moved off the canvas so nodes stay minimal. */
+export function ComponentDetail({ component }: { component: SubsystemComponent }) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const color = KIND_COLOR[component.kind] ?? '#888';
+  const displayName = deriveNameFromSymbol(component.symbol, component.kind, component.name, component.file);
+  const rows: Array<[string, string]> = [];
+  if (component.symbol) rows.push(['Symbol', component.symbol]);
+  if (component.file) rows.push(['File', component.file]);
+  if (component.purpose) rows.push(['Purpose', component.purpose]);
+  rows.push(['PURL', component.purl]);
+
+  return (
+    <div
+      style={{
+        borderTop: `1px solid ${theme.colors.border}`,
+        background: theme.colors.background,
+        padding: '10px 12px',
+        fontFamily: theme.fonts.body,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          fontSize: theme.fontSizes[1],
+          fontWeight: 600,
+          marginBottom: 6,
+        }}
+      >
+        <span style={{ color }}>{displayName}</span>
+        <span
+          style={{
+            fontSize: theme.fontSizes[0] * 0.8,
+            fontFamily: theme.fonts.monospace,
+            textTransform: 'uppercase',
+            color,
+          }}
+        >
+          {component.kind}
+        </span>
+      </div>
+      {rows.map(([k, v]) => (
+        <div
+          key={k}
+          style={{ display: 'flex', gap: 8, fontSize: theme.fontSizes[0], lineHeight: 1.5 }}
+        >
+          <span
+            style={{
+              width: 64,
+              flexShrink: 0,
+              color: muted,
+              fontFamily: theme.fonts.monospace,
+              textTransform: 'uppercase',
+              fontSize: theme.fontSizes[0] * 0.8,
+            }}
+          >
+            {k}
+          </span>
+          <span style={{ color: theme.colors.text, fontFamily: theme.fonts.monospace }}>
+            {v}
+          </span>
+        </div>
+      ))}
+      {component.detail && <GraphifyDetailSections detail={component.detail} />}
+    </div>
+  );
+}
+
+/** Renders the graphify drill-down payload for a component. */
+function GraphifyDetailSections({ detail }: { detail: GraphifyComponentDetail }) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+
+  const label = (k: string) => (
+    <span
+      style={{
+        width: 64,
+        flexShrink: 0,
+        color: muted,
+        fontFamily: theme.fonts.monospace,
+        textTransform: 'uppercase',
+        fontSize: theme.fontSizes[0] * 0.8,
+      }}
+    >
+      {k}
+    </span>
+  );
+  const chip = (name: string, meta?: string, key?: string | number) => (
+    <span
+      key={key}
+      style={{
+        fontFamily: theme.fonts.monospace,
+        fontSize: theme.fontSizes[0],
+        color: theme.colors.text,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: 4,
+        padding: '1px 6px',
+        marginRight: 6,
+        marginBottom: 4,
+        display: 'inline-block',
+      }}
+    >
+      {name}
+      {meta ? <span style={{ color: muted }}> {meta}</span> : ''}
+    </span>
+  );
+  const row = (k: string, children: ReactNode) => (
+    <div
+      style={{ display: 'flex', gap: 8, fontSize: theme.fontSizes[0], lineHeight: 1.5, marginBottom: 4 }}
+    >
+      {label(k)}
+      <div style={{ minWidth: 0 }}>{children}</div>
+    </div>
+  );
+
+  switch (detail.kind) {
+    case 'class':
+      return (
+        <>
+          {detail.methods.length > 0 &&
+            row('methods', detail.methods.map((m, i) => chip(m.name, m.returnType, i)))}
+          {detail.properties.length > 0 &&
+            row('props', detail.properties.map((p, i) => chip(p.name, p.type, i)))}
+          {detail.extends.length > 0 && row('extends', detail.extends.map((e, i) => chip(e, undefined, i)))}
+          {detail.implements.length > 0 && row('impl', detail.implements.map((e, i) => chip(e, undefined, i)))}
+          {detail.instantiations.length > 0 &&
+            row('insts', detail.instantiations.map((i, idx) => chip(i.name, undefined, idx)))}
+          {detail.references.length > 0 &&
+            row('refs', detail.references.map((r, idx) => chip(r.name, undefined, idx)))}
+        </>
+      );
+    case 'function':
+      return (
+        <>
+          {detail.parameters.length > 0 &&
+            row('params', detail.parameters.map((p, i) => chip(p.type, undefined, i)))}
+          {detail.returnType && row('return', <span>{detail.returnType}</span>)}
+          {detail.callers.length > 0 &&
+            row('callers', detail.callers.map((c, i) => chip(c.name, undefined, i)))}
+          {detail.callees.length > 0 &&
+            row('callees', detail.callees.map((c, i) => chip(c.name, undefined, i)))}
+        </>
+      );
+    case 'type':
+      return (
+        <>
+          {detail.properties.length > 0 &&
+            row('props', detail.properties.map((p, i) => chip(p.name, p.type, i)))}
+          {detail.usedBy.length > 0 &&
+            row('used by', detail.usedBy.map((u, i) => chip(u.name, undefined, i)))}
+          {detail.implementors.length > 0 &&
+            row('impl', detail.implementors.map((e, i) => chip(e, undefined, i)))}
+        </>
+      );
+    case 'module':
+      return (
+        <>
+          {detail.exports.length > 0 &&
+            row('exports', detail.exports.map((e, i) => chip(e, undefined, i)))}
+          {detail.imports.length > 0 &&
+            row('imports', detail.imports.map((i, idx) => chip(i.name, undefined, idx)))}
+          {detail.symbols.length > 0 &&
+            row('symbols', detail.symbols.map((s, i) => chip(s, undefined, i)))}
+        </>
+      );
+    case 'external':
+      return row('source', <span>{detail.label}</span>);
+  }
+}

package/src/subsystem/EdgeLegendModal.tsx

@@ -0,0 +1,146 @@
+/**
+ * EdgeLegendModal — modal over the graph area showing the edge-mechanism
+ * legend (moved out of the sidebar), plus the canonical mechanism
+ * descriptions table shared with the canvas's edge-label overlay.
+ */
+
+import { useEffect } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { X } from 'lucide-react';
+import { MECHANISM_COLOR, type SubsystemEdgeMechanism } from './model';
+
+/** Mechanism → [description, verifiable-with-graphify]. Drives the legend
+ *  modal and the "not directly verifiable" styling of edge labels. */
+export const MECHANISM_DESCRIPTIONS: [SubsystemEdgeMechanism, string, boolean][] = [
+  ['imports', 'import statement (code-level dependency)', true],
+  ['imports_from', 'imported by (reverse dependency)', true],
+  ['re_exports', 're-exports symbols from', true],
+  ['defines', 'defines / declares symbol', true],
+  ['calls', 'function/method call (call graph edge)', true],
+  ['extends', 'class inheritance', true],
+  ['inherits', 'class inheritance', true],
+  ['implements', 'implements interface / protocol', true],
+  ['mixes_in', 'applies mixin', true],
+  ['uses', 'general dependency (import, call, or reference)', false],
+  ['method', 'structural: has method / member', true],
+  ['references', 'type / symbol reference (not a call)', true],
+  ['contains', 'structural: contains / encapsulates', true],
+  ['feeds', 'data flow: output feeds into input', false],
+  ['produces', 'data flow: produces / outputs', false],
+  ['registers-into', 'registration pattern', false],
+];
+
+/** Modal over the graph area showing the edge-mechanism legend (moved out of
+ *  the sidebar). Closes on backdrop click or Escape; renders nothing when
+ *  closed. */
+export function EdgeLegendModal({
+  open,
+  mechanisms,
+  onClose,
+}: {
+  open: boolean;
+  mechanisms: Set<string>;
+  onClose: () => void;
+}) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      onClick={onClose}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 20,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        background: 'rgba(0,0,0,0.5)',
+      }}
+    >
+      <div
+        onClick={(e) => e.stopPropagation()}
+        style={{
+          background: theme.colors.background,
+          border: `1px solid ${theme.colors.border}`,
+          borderRadius: 8,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
+          padding: '16px',
+          width: 420,
+          maxWidth: '90%',
+          maxHeight: '80%',
+          overflowY: 'auto',
+          fontFamily: theme.fonts.body,
+        }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 12,
+          }}
+        >
+          <span
+            style={{
+              fontSize: theme.fontSizes[1],
+              fontWeight: 600,
+              color: theme.colors.text,
+            }}
+          >
+            Edge Legend
+          </span>
+          <button
+            type="button"
+            onClick={onClose}
+            aria-label="Close legend"
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: 22,
+              height: 22,
+              padding: 0,
+              border: 'none',
+              borderRadius: 4,
+              background: 'transparent',
+              color: theme.colors.text,
+              cursor: 'pointer',
+            }}
+          >
+            <X size={14} />
+          </button>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {MECHANISM_DESCRIPTIONS.filter(([m]) => mechanisms.has(m)).map(([mechanism, desc, verifiable]) => (
+            <div key={mechanism} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: theme.fontSizes[0] }}>
+              <span
+                style={{
+                  width: 10,
+                  height: 10,
+                  borderRadius: verifiable ? '50%' : '30% 70% 70% 30% / 30% 30% 70% 70%',
+                  background: MECHANISM_COLOR[mechanism],
+                  border: verifiable ? 'none' : `1px dashed ${MECHANISM_COLOR[mechanism]}`,
+                  flexShrink: 0,
+                }}
+              />
+              <span style={{ fontFamily: theme.fonts.monospace, color: MECHANISM_COLOR[mechanism], fontWeight: 500 }}>{mechanism}</span>
+              <span style={{ color: muted }}>{desc}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/subsystem/FileDrawer.tsx

@@ -0,0 +1,105 @@
+/**
+ * FileDrawer — bottom panel that slides up from the bottom of the graph area
+ * to show a file's contents. Opened by sidebar file-tree clicks (and any host
+ * wiring); content is injected as children by the graph component.
+ */
+
+import { useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+import { X } from 'lucide-react';
+
+/** Bottom panel that slides up from the bottom of the graph area to show a
+ *  file's contents — opened by node clicks and sidebar file-tree clicks
+ *  alike. Sits in normal flow (canvas shrinks while open, nothing covered)
+ *  and animates via height; stays mounted so open/close animates. */
+export function FileDrawer({
+  file,
+  onClose,
+  children,
+}: {
+  file: string | null;
+  onClose: () => void;
+  children?: ReactNode;
+}) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const open = file !== null;
+
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        // Above the absolute edge-label overlay (zIndex 5), which spans the
+        // whole graph-area container including this panel's slice.
+        zIndex: 6,
+        flexShrink: 0,
+        height: open ? '45%' : 0,
+        minHeight: 0,
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        background: theme.colors.background,
+        borderTop: open ? `1px solid ${theme.colors.border}` : 'none',
+        transition: 'height 200ms ease',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 8,
+          padding: '6px 10px',
+          borderBottom: `1px solid ${theme.colors.border}`,
+          flexShrink: 0,
+        }}
+      >
+        <span
+          title={file ?? undefined}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+            color: muted,
+          }}
+        >
+          {file}
+        </span>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close file"
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 22,
+            height: 22,
+            padding: 0,
+            border: 'none',
+            borderRadius: 4,
+            background: 'transparent',
+            color: theme.colors.text,
+            cursor: 'pointer',
+          }}
+        >
+          <X size={14} />
+        </button>
+      </div>
+      <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>{children}</div>
+    </div>
+  );
+}