@principal-ai/subsystems-react 0.17.0

package/src/subsystem/FileDrawer.tsx

@@ -0,0 +1,106 @@
+/**
+ * FileDrawer — bottom panel that slides up from the bottom of the graph area
+ * to show file / throughline code. Opened by sidebar file-tree clicks,
+ * declaration links, and throughline step focus; 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.
+ *  Sits in normal flow (canvas shrinks while open, nothing covered)
+ *  and animates via height; stays mounted so open/close animates. */
+export function FileDrawer({
+  title,
+  onClose,
+  children,
+}: {
+  /** Drawer chrome title; `null` closes the drawer. */
+  title: string | null;
+  onClose: () => void;
+  children?: ReactNode;
+}) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const open = title !== 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={title ?? undefined}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+            color: muted,
+          }}
+        >
+          {title}
+        </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>
+  );
+}

package/src/subsystem/GraphLayoutCover.tsx

@@ -0,0 +1,69 @@
+/**
+ * GraphLayoutCover — opaque overlay that hides a graph's startup sequence
+ * (initial measurement render, layout swap, camera settle animation).
+ *
+ * Must sit inside a `position: relative` ancestor sized to the canvas; it
+ * covers exactly that box. Renders covered from mount and fades out
+ * `holdMs` after `revealed` flips true, then stays transparent until the
+ * next `revealed → false` reset.
+ */
+
+import { useEffect, useState } from 'react';
+import { useTheme } from '@principal-ade/industry-theme';
+
+export interface GraphLayoutCoverProps {
+  /** True once the final layout is ready and the camera has settled. */
+  revealed: boolean;
+  /** How long to stay fully opaque after `revealed`. @default 650 */
+  holdMs?: number;
+  /** Label shown while covered. @default 'Laying out graph…' */
+  label?: string;
+}
+
+export function GraphLayoutCover({
+  revealed,
+  holdMs = 650,
+  label = 'Laying out graph…',
+}: GraphLayoutCoverProps) {
+  const { theme } = useTheme();
+  const muted = theme.colors.textMuted ?? theme.colors.textSecondary;
+  const [coverUp, setCoverUp] = useState(true);
+
+  useEffect(() => {
+    if (!revealed) {
+      setCoverUp(true);
+      return;
+    }
+    const t = setTimeout(() => setCoverUp(false), holdMs);
+    return () => clearTimeout(t);
+  }, [revealed, holdMs]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 15,
+        background: theme.colors.background,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        opacity: coverUp ? 1 : 0,
+        transition: 'opacity 200ms ease',
+        pointerEvents: 'none',
+      }}
+    >
+      {coverUp && (
+        <span
+          style={{
+            color: muted,
+            fontFamily: theme.fonts.monospace,
+            fontSize: theme.fontSizes[0],
+          }}
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}