Socrates/apps/web/components/diagram-canvas/nodes/BlockNode.tsx

// SysML block / actor / constraint rendered as a React Flow custom node.
// Drives the softened look from the prototype: stereotype label, divider, property compartment.

"use client";

import { Handle, Position, type NodeProps } from "@xyflow/react";
import type { BlockKind } from "../../../lib/fixtures/aristotle";

export interface BlockNodeData extends Record<string, unknown> {
  label: string;
  kind: BlockKind | "system";
  properties: string[];
  /** For constraint kinds, optional one-line expression. */
  expression?: string;
  /** Highest severity of any validation issue anchored to this block. */
  issueSeverity?: "error" | "warning" | "soft";
  /** Review state — drives a small visual distinction so unreviewed analyzer
   *  suggestions stand out on the canvas. */
  reviewStatus?: "suggested" | "accepted" | "deprecated";
}

const STEREO: Record<string, string> = {
  block: "block",
  actor: "actor",
  constraint: "constraint",
  system: "system",
};

export function BlockNode({ data, selected }: NodeProps) {
  const d = data as BlockNodeData;
  const kind = d.kind ?? "block";
  const isConstraint = kind === "constraint";

  const cls = [
    "sysml-node",
    `sysml-node-${kind}`,
    selected ? "sysml-node-selected" : "",
    d.issueSeverity ? `sysml-node-issue-${d.issueSeverity}` : "",
    d.reviewStatus && d.reviewStatus !== "accepted" ? `sysml-node-review-${d.reviewStatus}` : "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <div className={cls}>
      <Handle type="target" position={Position.Left} />
      <Handle type="target" position={Position.Top} />

      <div className="sysml-node-stereo">«{STEREO[kind] ?? "block"}»</div>
      <div className="sysml-node-title">{d.label}</div>

      {!isConstraint && <div className="sysml-node-divider" />}

      {!isConstraint ? (
        <div className="sysml-node-props">
          {d.properties.length === 0 ? (
            <span className="sysml-node-prop-empty">no properties</span>
          ) : (
            d.properties.slice(0, 6).map((p, i) => (
              <span key={i} className="sysml-node-prop">· {p}</span>
            ))
          )}
        </div>
      ) : (
        <div className="sysml-node-constraint-body">
          {d.expression ?? "{ }"}
        </div>
      )}

      <Handle type="source" position={Position.Right} />
      <Handle type="source" position={Position.Bottom} />
    </div>
  );
}