@transitrix/diagrams 1.0.0

package/src/fgca/chain-table.ts

@@ -0,0 +1,225 @@
+// Chain-table model for the FGCA / FGA previews (vkgeorgia/strategy#137).
+//
+// The tree/chain preview (`layoutFGCAPreview`) shows Factor → Goal → Change →
+// Activity as columns of nodes joined by edges. This module produces the
+// *tabular* alternative: the same chain flattened into rows, with shared
+// parents collapsed into vertically-merged (rowspan) cells.
+//
+// It is the pure, unit-testable half of the feature — no DOM, no vscode. The
+// Studio preview renders the returned model as an HTML `<table>`.
+//
+// Link semantics mirror `layoutFGCAPreview` exactly (the authoritative source):
+//   - F → G via `goal.factor[]`
+//   - G → C via `change.goal_id`            (FGCA only)
+//   - C → A via `change.activity_ids[]`     (FGCA only)
+//   - G → A directly via `activity.goal_id` for activities not covered by any
+//     change (FGCA) / for every activity (FGA, no Change column)
+//
+// Broken references are validation *warnings*, not errors, so a rendered doc
+// can contain a goal with a missing factor, a change with a missing goal, or an
+// unlinked activity. Every element still appears in the table — rooted where it
+// links, or as a trailing orphan row with empty cells to its left — so the
+// table mirrors the document the same way the tree does.
+
+import type { FGCAPreviewDoc } from './preview-layout.js';
+
+export type ChainColumn = 'factor' | 'goal' | 'change' | 'activity';
+
+export interface ChainCell {
+  /** Column-qualified identity (e.g. "goal:3") — stable, unique across columns. */
+  key: string;
+  /** Display text — the element name, falling back to its id. */
+  label: string;
+}
+
+export interface ChainTableCell {
+  /** The element to render, or null for a gap in the chain (empty cell). */
+  cell: ChainCell | null;
+  /** Vertical span — how many rows this cell covers. */
+  rowSpan: number;
+}
+
+export interface ChainTable {
+  /** Columns left→right: FGA omits 'change'. */
+  columns: ChainColumn[];
+  /**
+   * Grid of rendered cells. `rows[r][c]` is the cell to emit at (r, c), or null
+   * when that position is covered by a `rowSpan` from a row above (emit no
+   * `<td>`). Each row corresponds to one path through the chain.
+   */
+  rows: Array<Array<ChainTableCell | null>>;
+}
+
+export interface ChainTableOptions {
+  /** FGA hides the Change column (Goal links straight to Activity). */
+  hideChanges?: boolean;
+}
+
+function cellOf(col: ChainColumn, id: number | string, name: string): ChainCell {
+  const label = name && name.trim() ? name : String(id);
+  return { key: `${col}:${id}`, label };
+}
+
+/** Identity comparison for the rowspan grouping; both-null counts as equal. */
+function sameCell(a: ChainCell | null, b: ChainCell | null): boolean {
+  if (a === null || b === null) return a === b;
+  return a.key === b.key;
+}
+
+/**
+ * Flattens an FGCA/FGA doc into a chain table with rowspan-merged parent cells.
+ *
+ * Rows are enumerated in document order (deterministic). A parent that links to
+ * several children spans those children's rows; an element with no downstream
+ * link still appears, with empty cells to its right.
+ */
+export function buildChainTable(doc: FGCAPreviewDoc, options: ChainTableOptions = {}): ChainTable {
+  const { hideChanges = false } = options;
+  const columns: ChainColumn[] = hideChanges
+    ? ['factor', 'goal', 'activity']
+    : ['factor', 'goal', 'change', 'activity'];
+
+  const changes = doc.changes ?? [];
+  const factorIds = new Set(doc.factors.map(f => f.id));
+  const activityById = new Map(doc.activities.map(a => [a.id, a] as const));
+  // An activity is "covered" by a change when any change lists it — those render
+  // under their change, not directly under the goal (mirrors the tree).
+  const coveredActivityIds = new Set(changes.flatMap(c => c.activity_ids));
+
+  const emittedGoals = new Set<number | string>();
+  const emittedChanges = new Set<number | string>();
+  const emittedActivities = new Set<number | string>();
+
+  // Each path is an array (length = columns.length) of ChainCell | null.
+  const paths: Array<Array<ChainCell | null>> = [];
+  const pad = (cells: Array<ChainCell | null>): Array<ChainCell | null> => {
+    // Defensive: ensure every path matches the column count.
+    while (cells.length < columns.length) cells.push(null);
+    return cells;
+  };
+
+  const emitGoal = (factorCell: ChainCell | null, goal: FGCAPreviewDoc['goals'][number]): void => {
+    emittedGoals.add(goal.id);
+    const goalCell = cellOf('goal', goal.id, goal.name);
+
+    if (hideChanges) {
+      const acts = doc.activities.filter(a => a.goal_id != null && a.goal_id === goal.id);
+      if (acts.length === 0) {
+        paths.push(pad([factorCell, goalCell]));
+        return;
+      }
+      for (const a of acts) {
+        emittedActivities.add(a.id);
+        paths.push([factorCell, goalCell, cellOf('activity', a.id, a.name)]);
+      }
+      return;
+    }
+
+    const goalChanges = changes.filter(c => c.goal_id === goal.id);
+    const directActs = doc.activities.filter(
+      a => a.goal_id != null && a.goal_id === goal.id && !coveredActivityIds.has(a.id),
+    );
+
+    if (goalChanges.length === 0 && directActs.length === 0) {
+      paths.push([factorCell, goalCell, null, null]);
+      return;
+    }
+    for (const c of goalChanges) {
+      emittedChanges.add(c.id);
+      const changeCell = cellOf('change', c.id, c.name);
+      const acts = c.activity_ids.map(id => activityById.get(id)).filter((a): a is NonNullable<typeof a> => a != null);
+      if (acts.length === 0) {
+        paths.push([factorCell, goalCell, changeCell, null]);
+        continue;
+      }
+      for (const a of acts) {
+        emittedActivities.add(a.id);
+        paths.push([factorCell, goalCell, changeCell, cellOf('activity', a.id, a.name)]);
+      }
+    }
+    // Change-less paths: activities bound straight to the goal (gap in Change).
+    for (const a of directActs) {
+      emittedActivities.add(a.id);
+      paths.push([factorCell, goalCell, null, cellOf('activity', a.id, a.name)]);
+    }
+  };
+
+  // Phase 1 — factor-rooted paths.
+  for (const f of doc.factors) {
+    const factorCell = cellOf('factor', f.id, f.name);
+    const goalsOfFactor = doc.goals.filter(g => (g.factor ?? []).some(ref => ref.id === f.id));
+    if (goalsOfFactor.length === 0) {
+      paths.push(pad([factorCell]));
+      continue;
+    }
+    for (const g of goalsOfFactor) emitGoal(factorCell, g);
+  }
+
+  // Phase 2 — goals with no existing factor (orphan or broken-ref): empty Factor.
+  for (const g of doc.goals) {
+    if (emittedGoals.has(g.id)) continue;
+    const hasExistingFactor = (g.factor ?? []).some(ref => factorIds.has(ref.id));
+    if (hasExistingFactor) continue; // emitted under its factor in phase 1
+    emitGoal(null, g);
+  }
+
+  // Phase 3 — changes whose goal is missing (FGCA only): empty Factor + Goal.
+  if (!hideChanges) {
+    for (const c of changes) {
+      if (emittedChanges.has(c.id)) continue;
+      emittedChanges.add(c.id);
+      const changeCell = cellOf('change', c.id, c.name);
+      const acts = c.activity_ids.map(id => activityById.get(id)).filter((a): a is NonNullable<typeof a> => a != null);
+      if (acts.length === 0) {
+        paths.push([null, null, changeCell, null]);
+        continue;
+      }
+      for (const a of acts) {
+        emittedActivities.add(a.id);
+        paths.push([null, null, changeCell, cellOf('activity', a.id, a.name)]);
+      }
+    }
+  }
+
+  // Phase 4 — activities linked to nothing: empty cells to their left.
+  for (const a of doc.activities) {
+    if (emittedActivities.has(a.id)) continue;
+    const row: Array<ChainCell | null> = columns.map(() => null);
+    row[columns.length - 1] = cellOf('activity', a.id, a.name);
+    paths.push(row);
+  }
+
+  return { columns, rows: computeRowSpans(paths, columns.length) };
+}
+
+/**
+ * Turns a flat list of equal-length paths into a render grid. For each column,
+ * a cell spans the run of consecutive rows that share identical values in every
+ * column from 0 through that column (so a child only merges within one parent).
+ */
+function computeRowSpans(
+  paths: Array<Array<ChainCell | null>>,
+  colCount: number,
+): Array<Array<ChainTableCell | null>> {
+  const n = paths.length;
+  const grid: Array<Array<ChainTableCell | null>> = paths.map(() => new Array(colCount).fill(null));
+
+  for (let c = 0; c < colCount; c++) {
+    let r = 0;
+    while (r < n) {
+      let end = r + 1;
+      while (end < n && prefixEqual(paths[end], paths[r], c)) end++;
+      grid[r][c] = { cell: paths[r][c], rowSpan: end - r };
+      r = end;
+    }
+  }
+  return grid;
+}
+
+/** True when two paths agree on every column 0..c (inclusive). */
+function prefixEqual(a: Array<ChainCell | null>, b: Array<ChainCell | null>, c: number): boolean {
+  for (let i = 0; i <= c; i++) {
+    if (!sameCell(a[i], b[i])) return false;
+  }
+  return true;
+}

package/src/fgca/index.ts

@@ -0,0 +1,45 @@
+export { buildFGCALayout, NODE_WIDTH, NODE_HEIGHT, COLUMN_GAP, ROW_GAP, COLUMN_BG } from "./layout";
+export type { FGCALayoutInput } from "./layout";
+export {
+  layoutFGCAPreview,
+  selectScopedFGCA,
+  FGCA_NODE_W,
+  FGCA_NODE_H,
+  FGCA_HEADER_H,
+  FGCA_PAD,
+  FGCA_DEFAULT_COL_GAP,
+  FGCA_DEFAULT_ROW_GAP,
+} from "./preview-layout";
+export type {
+  FGCAPreviewColumn,
+  FGCAPreviewDoc,
+  FGCAPreviewLayout,
+  FGCAPreviewLayoutOptions,
+  FGCAPreviewNode,
+  FGCAPreviewEdge,
+  FGCAPreviewColumnPos,
+} from "./preview-layout";
+export { buildChainTable } from "./chain-table";
+export type { ChainTable, ChainTableCell, ChainColumn, ChainCell, ChainTableOptions } from "./chain-table";
+export { validateFGCADoc } from "./validate";
+export type { FGCADoc, FGCAValidationResult, FGCAValidationError, FGCAValidationWarning } from "./validate";
+export {
+  ALL_FGCA_COLUMNS,
+  FGCA_COLUMN_LABELS,
+} from "./types";
+export type {
+  FactorItem,
+  GoalItem,
+  BdnChangeWithActivities,
+  ActivityItem,
+  ActivityTypeItem,
+  DiagramStyle,
+  FGCAColumn,
+} from "./types";
+export { default as FGCAFactorNode } from "./nodes/FGCAFactorNode";
+export { default as FGCAGoalNode } from "./nodes/FGCAGoalNode";
+export { default as FGCAChangeNode } from "./nodes/FGCAChangeNode";
+export { default as FGCAActivityNode } from "./nodes/FGCAActivityNode";
+
+/** ReactFlow nodeTypes map — pass directly to <ReactFlow nodeTypes={FGCA_NODE_TYPES} /> */
+export { FGCA_NODE_TYPES } from "./nodeTypes";

package/src/fgca/layout.ts

@@ -0,0 +1,204 @@
+import type { Node, Edge } from "reactflow";
+import { Position, MarkerType } from "reactflow";
+import type {
+  FactorItem,
+  GoalItem,
+  BdnChangeWithActivities,
+  ActivityItem,
+  ActivityTypeItem,
+  DiagramStyle,
+  FGCAColumn,
+} from "./types";
+import { ALL_FGCA_COLUMNS } from "./types";
+
+export const NODE_WIDTH = 250;
+export const NODE_HEIGHT = 80;
+export const COLUMN_GAP = 180;
+export const ROW_GAP = 24;
+
+/** Default background colours per column. */
+export const COLUMN_BG: Record<FGCAColumn, string> = {
+  factor: "#fef3c7",
+  goal: "#e0e7ff",
+  change: "#dbeafe",
+  activity: "#d4edda",
+};
+
+export interface FGCALayoutInput {
+  factors: FactorItem[];
+  goals: GoalItem[];
+  changes: BdnChangeWithActivities[];
+  activities: ActivityItem[];
+  visibleColumns: Set<FGCAColumn>;
+  diagramStyle?: DiagramStyle;
+  activityTypeList?: ActivityTypeItem[];
+  /** Per-level goal background colours. Fallback used when a level is not in the map. */
+  goalLevelColors?: Record<number, string>;
+}
+
+/**
+ * Pure layout function: converts raw FGCA data into ReactFlow nodes + edges.
+ * No React, no Redux, no DOM. Safe to call in Node.js or a test environment.
+ */
+export function buildFGCALayout({
+  factors,
+  goals,
+  changes,
+  activities,
+  visibleColumns,
+  diagramStyle = {},
+  activityTypeList = [],
+  goalLevelColors = {},
+}: FGCALayoutInput): { nodes: Node[]; edges: Edge[] } {
+  const nodes: Node[] = [];
+  const edges: Edge[] = [];
+
+  const { edgeColor = "#94a3b8", edgeWidth = 1, nodeBorderColor = "#94a3b8", nodeBorderWidth = 1 } =
+    diagramStyle;
+
+  const visibleCols = ALL_FGCA_COLUMNS.filter((c) => visibleColumns.has(c));
+  const colX: Partial<Record<FGCAColumn, number>> = {};
+  visibleCols.forEach((col, idx) => {
+    colX[col] = idx * (NODE_WIDTH + COLUMN_GAP);
+  });
+
+  const goalIds = new Set(goals.map((g) => g.id));
+  const edgeStyle = { strokeWidth: edgeWidth, stroke: edgeColor };
+  const baseNodeStyle = { borderColor: nodeBorderColor, borderWidth: nodeBorderWidth, borderStyle: "solid" };
+
+  if (visibleColumns.has("factor")) {
+    factors.forEach((f, i) => {
+      nodes.push({
+        id: `factor_${f.id}`,
+        type: "fgcaFactor",
+        position: { x: colX["factor"]!, y: i * (NODE_HEIGHT + ROW_GAP) },
+        data: { id: f.id, name: f.name, ...baseNodeStyle },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+      });
+    });
+  }
+
+  if (visibleColumns.has("goal")) {
+    goals.forEach((g, i) => {
+      const level = g.level ?? 0;
+      const bgColor = goalLevelColors[level] ?? COLUMN_BG.goal;
+      nodes.push({
+        id: `goal_${g.id}`,
+        type: "fgcaGoal",
+        position: { x: colX["goal"]!, y: i * (NODE_HEIGHT + ROW_GAP) },
+        data: { id: g.id, name: g.name, level, bgColor, ...baseNodeStyle },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+      });
+    });
+  }
+
+  if (visibleColumns.has("change")) {
+    changes.forEach((c, i) => {
+      nodes.push({
+        id: `change_${c.id}`,
+        type: "fgcaChange",
+        position: { x: colX["change"]!, y: i * (NODE_HEIGHT + ROW_GAP) },
+        data: { id: c.id, name: c.name, ...baseNodeStyle },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+      });
+    });
+  }
+
+  if (visibleColumns.has("activity")) {
+    activities.forEach((a, i) => {
+      const activityTypeName =
+        (a.activity_type_id != null &&
+          activityTypeList.find((t) => t.id === a.activity_type_id)?.name) ||
+        "Activity";
+      nodes.push({
+        id: `activity_${a.id}`,
+        type: "fgcaActivity",
+        position: { x: colX["activity"]!, y: i * (NODE_HEIGHT + ROW_GAP) },
+        data: { id: a.id, name: a.name, activityTypeName, ...baseNodeStyle },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+      });
+    });
+  }
+
+  // Factor→Goal edges (via embedded factor[] on each goal)
+  if (visibleColumns.has("factor") && visibleColumns.has("goal")) {
+    goals.forEach((g) => {
+      g.factor?.forEach((f) => {
+        edges.push({
+          id: `edge_f${f.id}_g${g.id}`,
+          source: `factor_${f.id}`,
+          target: `goal_${g.id}`,
+          markerEnd: { type: MarkerType.ArrowClosed },
+          type: "smoothstep",
+          style: edgeStyle,
+        });
+      });
+    });
+  }
+
+  // Goal→Change edges
+  if (visibleColumns.has("goal") && visibleColumns.has("change")) {
+    changes.forEach((c) => {
+      if (goalIds.has(c.goal_id)) {
+        edges.push({
+          id: `edge_g${c.goal_id}_c${c.id}`,
+          source: `goal_${c.goal_id}`,
+          target: `change_${c.id}`,
+          markerEnd: { type: MarkerType.ArrowClosed },
+          type: "smoothstep",
+          style: edgeStyle,
+        });
+      }
+    });
+  }
+
+  // Change→Activity edges
+  if (visibleColumns.has("change") && visibleColumns.has("activity")) {
+    changes.forEach((c) => {
+      (c.activity_ids ?? []).forEach((aid) => {
+        edges.push({
+          id: `edge_c${c.id}_a${aid}`,
+          source: `change_${c.id}`,
+          target: `activity_${aid}`,
+          markerEnd: { type: MarkerType.ArrowClosed },
+          type: "smoothstep",
+          style: edgeStyle,
+        });
+      });
+    });
+  }
+
+  // Goal→Activity direct edges (only for activities not already covered via a Change link)
+  if (visibleColumns.has("goal") && visibleColumns.has("activity")) {
+    const coveredActivityIds = visibleColumns.has("change")
+      ? new Set(changes.flatMap((c) => c.activity_ids ?? []))
+      : new Set<number>();
+    activities.forEach((a) => {
+      const gid = a.goal_id;
+      if (gid != null && goalIds.has(gid) && !coveredActivityIds.has(a.id)) {
+        edges.push({
+          id: `edge_g${gid}_a${a.id}`,
+          source: `goal_${gid}`,
+          target: `activity_${a.id}`,
+          markerEnd: { type: MarkerType.ArrowClosed },
+          type: "smoothstep",
+          style: edgeStyle,
+        });
+      }
+    });
+  }
+
+  return { nodes, edges };
+}

package/src/fgca/nodeTypes.ts

@@ -0,0 +1,11 @@
+import FGCAFactorNode from "./nodes/FGCAFactorNode";
+import FGCAGoalNode from "./nodes/FGCAGoalNode";
+import FGCAChangeNode from "./nodes/FGCAChangeNode";
+import FGCAActivityNode from "./nodes/FGCAActivityNode";
+
+export const FGCA_NODE_TYPES = {
+  fgcaFactor: FGCAFactorNode,
+  fgcaGoal: FGCAGoalNode,
+  fgcaChange: FGCAChangeNode,
+  fgcaActivity: FGCAActivityNode,
+} as const;

package/src/fgca/nodes/FGCAActivityNode.tsx

@@ -0,0 +1,65 @@
+import React, { memo } from "react";
+import { Handle, Position } from "reactflow";
+
+const NODE_WIDTH = 250;
+const NODE_HEIGHT = 80;
+
+export interface FGCAActivityNodeProps {
+  data: {
+    id: number;
+    name: string;
+    activityTypeName?: string;
+    borderColor?: string;
+    borderWidth?: number;
+  };
+  isConnectable?: boolean;
+}
+
+const FGCAActivityNode = memo(({ data, isConnectable }: FGCAActivityNodeProps) => (
+  <div
+    style={{
+      background: "var(--ts-layer-activity)",
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderColor: data.borderColor ?? "var(--ts-node-stroke)",
+      borderWidth: data.borderWidth ?? 1,
+      borderStyle: "solid",
+      borderRadius: "0.75rem",
+      boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      color: "var(--ts-text-primary)",
+    }}
+  >
+    <Handle type="target" position={Position.Left} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
+    <Handle type="source" position={Position.Right} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
+    <div
+      style={{
+        fontWeight: 600,
+        lineHeight: 1.2,
+        overflow: "hidden",
+        display: "-webkit-box",
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical",
+        wordBreak: "break-word",
+        padding: "0 4px",
+        width: "100%",
+      }}
+      title={data.name}
+    >
+      {data.name}
+    </div>
+    <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
+      {data.activityTypeName ?? "Activity"} | A-{String(data.id).padStart(3, "0")}
+    </div>
+  </div>
+));
+
+FGCAActivityNode.displayName = "FGCAActivityNode";
+
+export default FGCAActivityNode;

package/src/fgca/nodes/FGCAChangeNode.tsx

@@ -0,0 +1,64 @@
+import React, { memo } from "react";
+import { Handle, Position } from "reactflow";
+
+const NODE_WIDTH = 250;
+const NODE_HEIGHT = 80;
+
+export interface FGCAChangeNodeProps {
+  data: {
+    id: number;
+    name: string;
+    borderColor?: string;
+    borderWidth?: number;
+  };
+  isConnectable?: boolean;
+}
+
+const FGCAChangeNode = memo(({ data, isConnectable }: FGCAChangeNodeProps) => (
+  <div
+    style={{
+      background: "var(--ts-layer-change)",
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderColor: data.borderColor ?? "var(--ts-node-stroke)",
+      borderWidth: data.borderWidth ?? 1,
+      borderStyle: "solid",
+      borderRadius: "0.75rem",
+      boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      color: "var(--ts-text-primary)",
+    }}
+  >
+    <Handle type="target" position={Position.Left} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
+    <Handle type="source" position={Position.Right} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
+    <div
+      style={{
+        fontWeight: 600,
+        lineHeight: 1.2,
+        overflow: "hidden",
+        display: "-webkit-box",
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical",
+        wordBreak: "break-word",
+        padding: "0 4px",
+        width: "100%",
+      }}
+      title={data.name}
+    >
+      {data.name}
+    </div>
+    <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
+      C-{String(data.id).padStart(3, "0")}
+    </div>
+  </div>
+));
+
+FGCAChangeNode.displayName = "FGCAChangeNode";
+
+export default FGCAChangeNode;

package/src/fgca/nodes/FGCAFactorNode.tsx

@@ -0,0 +1,64 @@
+import React, { memo } from "react";
+import { Handle, Position } from "reactflow";
+
+const NODE_WIDTH = 250;
+const NODE_HEIGHT = 80;
+
+export interface FGCAFactorNodeProps {
+  data: {
+    id: number;
+    name: string;
+    borderColor?: string;
+    borderWidth?: number;
+  };
+  isConnectable?: boolean;
+}
+
+const FGCAFactorNode = memo(({ data, isConnectable }: FGCAFactorNodeProps) => (
+  <div
+    style={{
+      background: "var(--ts-layer-factor)",
+      width: NODE_WIDTH,
+      height: NODE_HEIGHT,
+      padding: "6px 8px",
+      fontSize: "12px",
+      borderColor: data.borderColor ?? "var(--ts-node-stroke)",
+      borderWidth: data.borderWidth ?? 1,
+      borderStyle: "solid",
+      borderRadius: "0.75rem",
+      boxShadow: "0 1px 4px rgba(0,0,0,0.12)",
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      textAlign: "center",
+      color: "var(--ts-text-primary)",
+    }}
+  >
+    <Handle type="target" position={Position.Left} isConnectable={false} style={{ background: "var(--ts-node-stroke)" }} />
+    <Handle type="source" position={Position.Right} isConnectable={isConnectable} style={{ background: "var(--ts-node-stroke)" }} />
+    <div
+      style={{
+        fontWeight: 600,
+        lineHeight: 1.2,
+        overflow: "hidden",
+        display: "-webkit-box",
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: "vertical",
+        wordBreak: "break-word",
+        padding: "0 4px",
+        width: "100%",
+      }}
+      title={data.name}
+    >
+      {data.name}
+    </div>
+    <div style={{ fontSize: "10px", color: "var(--ts-text-secondary)", marginTop: 2 }}>
+      F-{String(data.id).padStart(4, "0")}
+    </div>
+  </div>
+));
+
+FGCAFactorNode.displayName = "FGCAFactorNode";
+
+export default FGCAFactorNode;