@arcote.tech/arc-process 0.7.28

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@arcote.tech/arc-process",
+  "type": "module",
+  "version": "0.7.28",
+  "private": false,
+  "description": "Process description & diagram fragment for Arc framework — generic graph model with profiles, MDX flow components and a deterministic 8-direction layout",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./react": "./src/react/index.ts"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^3.1.0",
+    "@xyflow/react": "^12.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@arcote.tech/arc": "^0.7.28",
+    "@arcote.tech/platform": "^0.7.28",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react": "^19.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,17 @@
+/**
+ * @arcote.tech/arc-process — fragment opisu i wizualizacji procesów.
+ *
+ * Entry React-free: generyczny model grafu, profile, budowa modelu,
+ * layout i stan widoku. Komponenty React/MDX: `@arcote.tech/arc-process/react`.
+ */
+
+export * from "./model/types";
+export * from "./model/profile";
+export * from "./model/build";
+export * from "./model/collapse";
+export * from "./layout/measure";
+export * from "./layout/layout";
+export * from "./state/view-state";
+export * from "./state/store";
+export * from "./state/aggregate";
+export * from "./profiles/arc";

package/src/layout/layout.ts

@@ -0,0 +1,414 @@
+/**
+ * Pass 2 layoutu — deterministyczne rozmieszczenie 2D.
+ *
+ *   x = depth (czas / kolejność zależności) — kolumny (tracki poziome)
+ *   y = lane  (tor: oś główna 0, wejścia Entry ujemne/za-maks, branch/parallel)
+ *
+ * Tracki wymiarowane są pasmami z pass 1 (measure) jak w CSS grid: kolumna
+ * rezerwuje najszersze pasma W/E swoich kroków, wiersz — najwyższe N/S.
+ * Dzięki temu rozwinięcia w 8 kierunkach (wraz z rekurencją) nigdy nie
+ * nachodzą na sąsiednie tory — bez solvera, w pełni deterministycznie.
+ *
+ * Zwinięte konteksty przychodzą już jako pseudo-kroki (model/collapse);
+ * relacje do ich wnętrza re-targetowane są na box (dedup krawędzi).
+ */
+
+import type { CollapseResult } from "../model/collapse";
+import type { ProcessProfile } from "../model/profile";
+import {
+  CONTEXT_REF_KIND,
+  directionDx,
+  directionDy,
+  type ProcessGraph,
+  type ProcessModel,
+} from "../model/types";
+import type { ProcessViewState } from "../state/view-state";
+import { buildRelationIndex } from "../model/build";
+import {
+  CARD_GAP,
+  CARD_H,
+  CARD_W,
+  COL_GAP_X,
+  DIAG_GAP_Y,
+  LANE_MARGIN,
+  MARGIN,
+  measureSteps,
+  PAD,
+  STEP_H,
+  STEP_W,
+  type ExpansionGroup,
+  type ExpansionItem,
+  type MeasuredStep,
+} from "./measure";
+
+// ---------------------------------------------------------------------------
+// Wynik
+// ---------------------------------------------------------------------------
+
+export interface DiagramNode {
+  id: string;
+  type: "step" | "attachment" | "connector" | "note" | "context-group";
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  data: Record<string, unknown>;
+}
+
+export interface DiagramEdge {
+  id: string;
+  source: string;
+  target: string;
+  label?: string;
+  color: string;
+  dashed?: boolean;
+  opacity?: number;
+  /** Krawędź szkieletu narracji (kolejność dokumentu). */
+  backbone?: boolean;
+}
+
+export interface ProcessLayout {
+  nodes: DiagramNode[];
+  edges: DiagramEdge[];
+}
+
+export interface LayoutInput {
+  model: ProcessModel;
+  collapse: CollapseResult;
+  graph: ProcessGraph;
+  profile: ProcessProfile;
+  state: ProcessViewState;
+}
+
+const BACKBONE_COLOR = "#c4b5fd";
+const CONTINUE_COLOR = "#7c3aed";
+const NOTE_COLOR = "#eab308";
+
+// ---------------------------------------------------------------------------
+// Layout
+// ---------------------------------------------------------------------------
+
+export function layoutProcess(input: LayoutInput): ProcessLayout {
+  const { model, collapse, graph, profile, state } = input;
+  const steps = collapse.steps;
+  const nodes: DiagramNode[] = [];
+  const edges: DiagramEdge[] = [];
+  if (steps.length === 0) return { nodes, edges };
+
+  const index = buildRelationIndex(graph);
+  const measured = measureSteps({
+    steps,
+    index,
+    profile,
+    state,
+    visible: model.visible,
+  });
+  const byOcc = new Map(measured.map((m) => [m.step.occId, m]));
+
+  // --- Track sizing ----------------------------------------------------------
+  const maxDepth = Math.max(...steps.map((s) => s.depth));
+  const lanes = [...new Set(steps.map((s) => s.lane))].sort((a, b) => a - b);
+
+  const westAt: number[] = new Array(maxDepth + 1).fill(0);
+  const eastAt: number[] = new Array(maxDepth + 1).fill(0);
+  const northAt = new Map<number, number>(lanes.map((l) => [l, 0]));
+  const southAt = new Map<number, number>(lanes.map((l) => [l, 0]));
+  for (const m of measured) {
+    const { depth, lane } = m.step;
+    westAt[depth] = Math.max(westAt[depth], m.bands.W);
+    eastAt[depth] = Math.max(eastAt[depth], m.bands.E);
+    northAt.set(lane, Math.max(northAt.get(lane) ?? 0, m.bands.N));
+    southAt.set(lane, Math.max(southAt.get(lane) ?? 0, m.bands.S));
+  }
+
+  const xByDepth: number[] = [];
+  for (let d = 0; d <= maxDepth; d++) {
+    xByDepth[d] =
+      d === 0
+        ? PAD + westAt[0] + STEP_W / 2
+        : xByDepth[d - 1] + STEP_W / 2 + eastAt[d - 1] + MARGIN + westAt[d] + STEP_W / 2;
+  }
+
+  const yByLane = new Map<number, number>();
+  let cursorY = PAD;
+  for (let i = 0; i < lanes.length; i++) {
+    const lane = lanes[i];
+    cursorY += (northAt.get(lane) ?? 0) + STEP_H / 2;
+    yByLane.set(lane, cursorY);
+    cursorY += STEP_H / 2 + (southAt.get(lane) ?? 0) + LANE_MARGIN;
+  }
+  const bottomY = cursorY;
+
+  // --- Kroki + rozwinięcia ----------------------------------------------------
+  for (const m of measured) {
+    const cx = xByDepth[m.step.depth];
+    const cy = yByLane.get(m.step.lane)!;
+    const s = m.step;
+    const isContextBox = s.node?.kind === CONTEXT_REF_KIND;
+    nodes.push({
+      id: s.occId,
+      type: "step",
+      x: cx - STEP_W / 2,
+      y: cy - STEP_H / 2,
+      w: STEP_W,
+      h: STEP_H,
+      data: {
+        step: s,
+        expandKey: m.key,
+        expanded: state.expanded[m.key] ?? [],
+        isContext: isContextBox,
+        memberCount: isContextBox ? (s.node?.meta?.memberCount ?? 0) : undefined,
+      },
+    });
+    placeGroups(m.groups, s.occId, cx, cy, STEP_W, STEP_H, nodes, edges);
+  }
+
+  // --- Szkielet narracji -------------------------------------------------------
+  for (let i = 1; i < steps.length; i++) {
+    const a = steps[i - 1];
+    const b = steps[i];
+    // Równoległe rodzeństwo (ten sam blok, inne lane) i różne tory Entry
+    // nie są sekwencją.
+    if (a.blockId && a.blockId === b.blockId && a.lane !== b.lane) continue;
+    if (a.entryId !== b.entryId) continue;
+    edges.push({
+      id: `bb:${i}`,
+      source: a.occId,
+      target: b.occId,
+      color: BACKBONE_COLOR,
+      dashed: true,
+      opacity: 0.6,
+      backbone: true,
+    });
+  }
+
+  // --- Krawędzie continues (Entry → faza, skosem) ------------------------------
+  const occOf = (occId: string) => collapse.groupByOcc.get(occId) ?? occId;
+  const seenContinue = new Set<string>();
+  for (const c of model.continueEdges) {
+    const from = occOf(c.fromOcc);
+    const to = occOf(c.toOcc);
+    if (from === to) continue;
+    const key = `${from}->${to}`;
+    if (seenContinue.has(key)) continue;
+    seenContinue.add(key);
+    edges.push({
+      id: `cont:${key}`,
+      source: from,
+      target: to,
+      label: c.phaseId ? `→ ${c.phaseId}` : undefined,
+      color: CONTINUE_COLOR,
+      dashed: true,
+      opacity: 0.85,
+    });
+  }
+
+  // --- Connectory ---------------------------------------------------------------
+  const stepDepthByOcc = new Map(steps.map((s) => [s.occId, s.depth]));
+  const firstOccByNode = new Map<string, string>();
+  for (const s of steps) {
+    if (s.exists && s.node && !firstOccByNode.has(s.node.id)) {
+      firstOccByNode.set(s.node.id, s.occId);
+    }
+  }
+  const seqToNode = new Map<number, string>();
+  for (const s of model.steps) {
+    if (s.exists && !seqToNode.has(s.seq)) seqToNode.set(s.seq, s.node!.id);
+  }
+  const nodeIdFor = (id: string): string | undefined =>
+    collapse.groupByNodeId.get(id) ??
+    firstOccByNode.get(id) ??
+    (model.visible.has(id) ? `conn:${id}` : undefined);
+
+  const depthByNode = new Map<string, number>();
+  for (const s of steps) {
+    if (s.exists && s.node && !depthByNode.has(s.node.id)) {
+      depthByNode.set(s.node.id, s.depth);
+    }
+  }
+  for (const [nodeId, groupOcc] of collapse.groupByNodeId) {
+    const d = stepDepthByOcc.get(groupOcc);
+    if (d !== undefined && !depthByNode.has(nodeId)) depthByNode.set(nodeId, d);
+  }
+
+  const connDepth = new Map<string, number>();
+  const connY = bottomY + CARD_H / 2;
+  const xStack = new Map<number, number>();
+  for (const c of model.connectors) {
+    // Connector wewnątrz zwiniętego boxa nie istnieje na diagramie.
+    if (collapse.groupByNodeId.has(c.id)) continue;
+    const aNode = seqToNode.get(c.between[0]) ?? "";
+    const bNode = seqToNode.get(c.between[1]) ?? "";
+    const da = depthByNode.get(aNode) ?? 0;
+    const db = depthByNode.get(bNode) ?? da;
+    const frac = c.order / (c.count + 1);
+    const x = (xByDepth[da] ?? PAD) + ((xByDepth[db] ?? PAD) - (xByDepth[da] ?? PAD)) * frac;
+    const key = Math.round(x);
+    const idx = xStack.get(key) ?? 0;
+    xStack.set(key, idx + 1);
+    const y = connY + idx * (CARD_H + CARD_GAP);
+    connDepth.set(`conn:${c.id}`, da + (db - da) * frac);
+    nodes.push({
+      id: `conn:${c.id}`,
+      type: "connector",
+      x: x - CARD_W / 2,
+      y,
+      w: CARD_W,
+      h: CARD_H,
+      data: { node: c.node },
+    });
+  }
+
+  const depthOf = (occId: string): number =>
+    connDepth.get(occId) ?? stepDepthByOcc.get(occId) ?? 0;
+
+  // --- Krawędzie relacji (orientacja wg semantyki profilu) ----------------------
+  const seenEdge = new Set<string>();
+  for (const r of graph.relations) {
+    const sId = nodeIdFor(r.from);
+    const tId = nodeIdFor(r.to);
+    if (!sId || !tId || sId === tId) continue;
+    const spec = profile.relations[r.kind];
+    const semantics = spec?.semantics ?? "in";
+    const from = semantics === "in" ? tId : sId;
+    const to = semantics === "in" ? sId : tId;
+    if (semantics === "out" && depthOf(to) < depthOf(from)) continue; // wsteczne wyjście → szum
+    const key = `${from}->${to}:${r.kind}`;
+    if (seenEdge.has(key)) continue;
+    seenEdge.add(key);
+    edges.push({
+      id: `rel:${key}`,
+      source: from,
+      target: to,
+      label: spec?.label ?? r.kind,
+      color: spec?.color ?? "#868e96",
+      dashed: spec?.dashed,
+      opacity: 0.75,
+    });
+  }
+
+  // --- Otwarte boxy kontekstów ---------------------------------------------------
+  // Kontekst jawnie otwarty przez czytelnika → obrys wokół jego kroków.
+  const openContexts = Object.entries(state.collapsedContexts)
+    .filter(([, collapsed]) => !collapsed)
+    .map(([id]) => id);
+  for (const ctxId of openContexts) {
+    const ctx = (graph.contexts ?? []).find((c) => c.id === ctxId);
+    if (!ctx) continue;
+    const members = nodes.filter((n) => {
+      if (n.type !== "step") return false;
+      const path = (n.data.step as { node?: { contextPath?: string[] } }).node
+        ?.contextPath;
+      return !!path?.includes(ctxId);
+    });
+    if (!members.length) continue;
+    const minX = Math.min(...members.map((n) => n.x)) - 28;
+    const minY = Math.min(...members.map((n) => n.y)) - 46;
+    const maxX = Math.max(...members.map((n) => n.x + n.w)) + 28;
+    const maxY = Math.max(...members.map((n) => n.y + n.h)) + 28;
+    nodes.unshift({
+      id: `ctxbox:${ctxId}`,
+      type: "context-group",
+      x: minX,
+      y: minY,
+      w: maxX - minX,
+      h: maxY - minY,
+      data: { context: ctx, open: true },
+    });
+  }
+
+  return { nodes, edges };
+}
+
+// ---------------------------------------------------------------------------
+// Rozmieszczenie rozwinięć wokół węzła (rekurencyjne)
+// ---------------------------------------------------------------------------
+
+function placeGroups(
+  groups: ExpansionGroup[],
+  parentId: string,
+  cx: number,
+  cy: number,
+  parentW: number,
+  parentH: number,
+  nodes: DiagramNode[],
+  edges: DiagramEdge[],
+): void {
+  for (const g of groups) {
+    const dx = directionDx(g.side);
+    const dy = directionDy(g.side);
+    if (dx !== 0) {
+      // Kolumna przy W/E (skos: w całości nad/pod nodem).
+      const colX = cx + dx * COL_GAP_X;
+      let y: number;
+      if (dy < 0) y = cy - parentH / 2 - DIAG_GAP_Y - g.slotH;
+      else if (dy > 0) y = cy + parentH / 2 + DIAG_GAP_Y;
+      else y = cy - g.slotH / 2;
+      placeColumn(g, colX, y, parentId, nodes, edges);
+    } else {
+      // Wiersz N/S.
+      const rowY =
+        dy < 0 ? cy - parentH / 2 - DIAG_GAP_Y - g.slotH : cy + parentH / 2 + DIAG_GAP_Y;
+      let x = cx - g.slotW / 2;
+      for (const it of g.items) {
+        x += it.bands.W;
+        emitItem(it, g, x + it.w / 2, rowY + it.bands.N + it.h / 2, parentId, nodes, edges);
+        x += it.w + it.bands.E + CARD_GAP;
+      }
+    }
+  }
+}
+
+function placeColumn(
+  g: ExpansionGroup,
+  colX: number,
+  topY: number,
+  parentId: string,
+  nodes: DiagramNode[],
+  edges: DiagramEdge[],
+): void {
+  let y = topY;
+  for (const it of g.items) {
+    y += it.bands.N;
+    emitItem(it, g, colX, y + it.h / 2, parentId, nodes, edges);
+    y += it.h + it.bands.S + CARD_GAP;
+  }
+}
+
+function emitItem(
+  it: ExpansionItem,
+  g: ExpansionGroup,
+  cx: number,
+  cy: number,
+  parentId: string,
+  nodes: DiagramNode[],
+  edges: DiagramEdge[],
+): void {
+  const isNote = it.node.kind === "note";
+  const nodeId = `att:${it.key}`;
+  nodes.push({
+    id: nodeId,
+    type: isNote ? "note" : "attachment",
+    x: cx - it.w / 2,
+    y: cy - it.h / 2,
+    w: it.w,
+    h: it.h,
+    data: {
+      node: it.node,
+      group: g.group,
+      expandKey: it.key,
+      expanded: it.groups.map((cg) => cg.group),
+      attachments: it.attachments,
+    },
+  });
+  edges.push({
+    id: `att:${nodeId}`,
+    source: g.spec.intoNode ? nodeId : parentId,
+    target: g.spec.intoNode ? parentId : nodeId,
+    color: isNote ? NOTE_COLOR : g.spec.color,
+    dashed: isNote,
+    opacity: 0.9,
+  });
+  // Rekurencja: rozwinięcia karteczki względem niej samej.
+  placeGroups(it.groups, nodeId, cx, cy, it.w, it.h, nodes, edges);
+}