@arcote.tech/arc-process 0.7.28

package/src/react/nodes.tsx

@@ -0,0 +1,311 @@
+/**
+ * Renderery nodów ReactFlow diagramu procesu: krok narracji, doczepiona
+ * karteczka (z własnymi togglami — rekurencja), connector, notatka i box
+ * kontekstu (zwinięty krok-box lub otwarty obrys context-group).
+ * Kolory rodzajów przychodzą z profilu (przez data), szkło z theme.
+ */
+
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { kindColor, type ProcessProfile } from "../model/profile";
+import type { ContextInfo, ProcessNode, ProcessStep } from "../model/types";
+import { useViewState } from "../mdx/contexts";
+import { cardFor, DefaultContextCard } from "./context-card";
+import { GLASS, MISSING_COLOR, tint } from "./theme";
+
+const KIND_ICON: Record<string, string> = {
+  aggregate: "◆",
+  command: "▶",
+  event: "✶",
+  view: "▦",
+  "static-view": "▤",
+  listener: "♪",
+  route: "⇄",
+  page: "▢",
+  context: "▣",
+  note: "✎",
+  unknown: "•",
+};
+
+function hiddenHandles() {
+  const style = { opacity: 0, pointerEvents: "none" as const };
+  return (
+    <>
+      <Handle type="target" position={Position.Left} style={style} />
+      <Handle type="source" position={Position.Right} style={style} />
+    </>
+  );
+}
+
+/** Badge'e grup doczepień — toggle rozwinięcia (wspólne dla kroku i karty). */
+function GroupBadges({
+  profile,
+  attachments,
+  expanded,
+  expandKey,
+}: {
+  profile: ProcessProfile;
+  attachments: Partial<Record<string, string[]>>;
+  expanded: string[];
+  expandKey: string;
+}) {
+  const { toggleGroup } = useViewState();
+  const groups = Object.entries(attachments).filter(([, ids]) => ids?.length);
+  if (!groups.length) return null;
+  return (
+    <div style={{ display: "flex", flexWrap: "wrap", gap: 3, marginTop: 3 }}>
+      {groups.map(([group, ids]) => {
+        const spec = profile.attachmentGroups[group];
+        const open = expanded.includes(group);
+        const color = spec?.color ?? "#868e96";
+        return (
+          <button
+            key={group}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleGroup(expandKey, group);
+            }}
+            title={`${spec?.label ?? group}: ${ids!.join(", ")}`}
+            style={{
+              fontSize: 9,
+              fontWeight: 700,
+              color: open ? "#fff" : color,
+              background: open ? color : tint(color, 0.12),
+              border: `1px solid ${color}`,
+              borderRadius: 99,
+              padding: "0 6px",
+              cursor: "pointer",
+              lineHeight: "14px",
+            }}
+          >
+            {spec?.label ?? group} {ids!.length}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+export function makeNodeTypes(profile: ProcessProfile) {
+  function StepNode({ data }: NodeProps) {
+    const d = data as unknown as {
+      step: ProcessStep;
+      expandKey: string;
+      expanded: string[];
+      isContext: boolean;
+      memberCount?: number;
+    };
+    const { toggleContext } = useViewState();
+    const s = d.step;
+
+    if (d.isContext && s.node) {
+      const ctx = (s.node.meta as { context?: ContextInfo })?.context;
+      const Card = (ctx && cardFor(ctx)) || DefaultContextCard;
+      return (
+        <div style={{ width: "100%", height: "100%" }}>
+          {hiddenHandles()}
+          <Card
+            context={ctx ?? { id: s.node.id, path: s.node.contextPath ?? [] }}
+            collapsed
+            memberCount={d.memberCount}
+            label={s.label}
+            onToggle={() => ctx && toggleContext(ctx.id)}
+          />
+        </div>
+      );
+    }
+
+    const color = s.exists ? kindColor(profile, s.node!.kind) : MISSING_COLOR;
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          boxSizing: "border-box",
+          borderRadius: 13,
+          border: `1px solid ${GLASS.border}`,
+          borderLeft: `4px solid ${color}`,
+          background: GLASS.card,
+          backdropFilter: GLASS.blurSoft,
+          boxShadow: GLASS.shadow,
+          padding: "8px 11px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          cursor: "pointer",
+        }}
+      >
+        {hiddenHandles()}
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <span
+            style={{
+              fontSize: 10,
+              fontWeight: 800,
+              color: "#fff",
+              background: color,
+              borderRadius: 99,
+              minWidth: 16,
+              height: 16,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0 4px",
+            }}
+          >
+            {s.seq}
+          </span>
+          <span
+            style={{
+              fontSize: 12.5,
+              fontWeight: 700,
+              color: GLASS.text,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {s.label || s.ref?.nodeId || "?"}
+          </span>
+        </div>
+        <div style={{ fontSize: 10, color: s.exists ? GLASS.textMuted : MISSING_COLOR }}>
+          {KIND_ICON[s.node?.kind ?? "unknown"] ?? "•"}{" "}
+          {s.exists
+            ? `${s.node!.kind}${s.method ? ` · ${s.method.name}` : ""}`
+            : `TODO: ${s.ref?.nodeId ?? "brak referencji"}`}
+        </div>
+        {s.exists ? (
+          <GroupBadges
+            profile={profile}
+            attachments={s.attachments}
+            expanded={d.expanded}
+            expandKey={d.expandKey}
+          />
+        ) : null}
+      </div>
+    );
+  }
+
+  function AttachmentNode({ data }: NodeProps) {
+    const d = data as unknown as {
+      node: ProcessNode;
+      group: string;
+      expandKey: string;
+      expanded: string[];
+      attachments: Partial<Record<string, string[]>>;
+    };
+    const color = kindColor(profile, d.node.kind);
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          boxSizing: "border-box",
+          borderRadius: 10,
+          border: `1px solid ${tint(color, 0.5)}`,
+          borderLeft: `3px solid ${color}`,
+          background: GLASS.card,
+          padding: "5px 9px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          gap: 1,
+        }}
+      >
+        {hiddenHandles()}
+        <div
+          style={{
+            fontSize: 11.5,
+            fontWeight: 600,
+            color: GLASS.text,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {KIND_ICON[d.node.kind] ?? "•"} {d.node.label}
+        </div>
+        <GroupBadges
+          profile={profile}
+          attachments={d.attachments}
+          expanded={d.expanded}
+          expandKey={d.expandKey}
+        />
+      </div>
+    );
+  }
+
+  function ConnectorNode({ data }: NodeProps) {
+    const d = data as unknown as { node: ProcessNode };
+    const color = kindColor(profile, d.node.kind);
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          boxSizing: "border-box",
+          borderRadius: 10,
+          border: `1px dashed ${tint(color, 0.7)}`,
+          borderLeft: `3px solid ${color}`,
+          background: tint(color, 0.06),
+          padding: "5px 9px",
+          display: "flex",
+          alignItems: "center",
+          opacity: 0.85,
+        }}
+      >
+        {hiddenHandles()}
+        <span style={{ fontSize: 11.5, color: GLASS.textMuted }}>
+          {KIND_ICON[d.node.kind] ?? "•"} {d.node.label}
+        </span>
+      </div>
+    );
+  }
+
+  function NoteNode({ data }: NodeProps) {
+    const d = data as unknown as { node: ProcessNode };
+    const title = (d.node.meta as { title?: string })?.title;
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          boxSizing: "border-box",
+          borderRadius: 8,
+          border: "1px solid rgba(234,179,8,0.6)",
+          background: "rgba(254,249,195,0.9)",
+          padding: "5px 9px",
+          fontSize: 10.5,
+          lineHeight: 1.35,
+          color: "#713f12",
+          overflow: "hidden",
+        }}
+      >
+        {hiddenHandles()}
+        {title ? <b>{title}: </b> : "📝 "}
+        {d.node.label}
+      </div>
+    );
+  }
+
+  function ContextGroupNode({ data }: NodeProps) {
+    const d = data as unknown as { context: ContextInfo };
+    const { toggleContext } = useViewState();
+    const Card = cardFor(d.context) ?? DefaultContextCard;
+    return (
+      <div style={{ width: "100%", height: "100%" }}>
+        <Card
+          context={d.context}
+          collapsed={false}
+          onToggle={() => toggleContext(d.context.id)}
+        />
+      </div>
+    );
+  }
+
+  return {
+    step: StepNode,
+    attachment: AttachmentNode,
+    connector: ConnectorNode,
+    note: NoteNode,
+    "context-group": ContextGroupNode,
+  };
+}

package/src/react/process-diagram.tsx

@@ -0,0 +1,295 @@
+/**
+ * `ProcessDiagram` — fetch-free viewer procesu z MDX.
+ *
+ * Proza (MDX z chipami) po lewej, diagram ReactFlow po prawej. MDX przychodzi
+ * propsem; `graph` jest opcjonalny — domyślnie pusty, więc każda referencja
+ * renderuje się jako czerwony chip TODO (design-first).
+ *
+ * Pipeline: MDX → wystąpienia (DOM-order) → buildProcessModel →
+ * collapseContexts (hierarchia kontekstów) → layoutProcess (8 kierunków,
+ * track sizing) → ReactFlow. Stan otwarć: MDX deklaruje start, czytelnik
+ * toggluje, persystencja przez `store` (localStorage / agregat).
+ */
+
+import "@xyflow/react/dist/style.css";
+
+import {
+  Background,
+  Controls,
+  MarkerType,
+  MiniMap,
+  ReactFlow,
+  type Edge,
+  type Node,
+} from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { buildProcessModel } from "../model/build";
+import { collapseContexts } from "../model/collapse";
+import { layoutProcess, type DiagramEdge, type DiagramNode } from "../layout/layout";
+import { kindColor, type ProcessProfile } from "../model/profile";
+import {
+  EMPTY_GRAPH,
+  type Occurrence,
+  type ProcessGraph,
+  type ProcessStep,
+} from "../model/types";
+import {
+  initialViewState,
+  toggleContext as toggleContextState,
+  toggleGroup as toggleGroupState,
+  type ProcessViewState,
+} from "../state/view-state";
+import type { ProcessViewStore } from "../state/store";
+import { MdxView, parseProcessFrontmatter } from "../mdx/mdx-view";
+import {
+  FocusContext,
+  ProcessDataContext,
+  ViewStateContext,
+} from "../mdx/contexts";
+import { makeNodeTypes } from "./nodes";
+import { GLASS, MISSING_COLOR } from "./theme";
+
+export interface ProcessDiagramProps {
+  /** Surowy MDX procesu. */
+  mdx: string;
+  /** Profil semantyki (np. arcProfile). */
+  profile: ProcessProfile;
+  /** Graf rozstrzygający `exists` — domyślnie pusty (wszystko TODO). */
+  graph?: ProcessGraph;
+  /** Persystencja stanu widoku (localStorageStore / functionStore / agregat). */
+  store?: ProcessViewStore;
+  /** Id dokumentu dla store (fallback: title / hash mdx). */
+  docId?: string;
+  /** Opcjonalny tytuł (remount przy zmianie procesu). */
+  title?: string;
+  /**
+   * Tryb zwijania kontekstów, gdy frontmatter nie mówi inaczej:
+   * true = górny rzut (obce konteksty zwinięte). Domyślnie z frontmatter
+   * `collapse: all|none` (all gdy brak).
+   */
+  defaultCollapsed?: boolean;
+  /** Id/nazwa kontekstu domowego (fallback: frontmatter `context:`). */
+  homeContextId?: string;
+}
+
+function rfNode(n: DiagramNode): Node {
+  return {
+    id: n.id,
+    type: n.type,
+    position: { x: n.x, y: n.y },
+    width: n.w,
+    height: n.h,
+    data: n.data,
+    draggable: false,
+    selectable: n.type !== "context-group",
+    zIndex: n.type === "context-group" ? -1 : undefined,
+  };
+}
+
+function rfEdge(e: DiagramEdge): Edge {
+  return {
+    id: e.id,
+    source: e.source,
+    target: e.target,
+    label: e.label,
+    style: {
+      stroke: e.color,
+      strokeWidth: 1.5,
+      opacity: e.opacity ?? 0.75,
+      strokeDasharray: e.dashed ? "4 3" : undefined,
+    },
+    labelStyle: { fill: e.color, fontSize: 9, fontWeight: 600 },
+    labelBgStyle: { fill: "#fff", fillOpacity: 0.8 },
+    markerEnd: e.backbone
+      ? undefined
+      : { type: MarkerType.ArrowClosed, color: e.color },
+  };
+}
+
+export function ProcessDiagram({
+  mdx,
+  profile,
+  graph = EMPTY_GRAPH,
+  store,
+  docId,
+  title,
+  defaultCollapsed,
+  homeContextId,
+}: ProcessDiagramProps) {
+  const [occurrences, setOccurrences] = useState<Occurrence[]>([]);
+  const [viewState, setViewState] = useState<ProcessViewState | null>(null);
+  const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
+  const [scrollToKey, setScrollToKey] = useState<string | null>(null);
+  const proseRef = useRef<HTMLDivElement>(null);
+
+  const frontmatter = useMemo(() => parseProcessFrontmatter(mdx), [mdx]);
+  const docKey = docId ?? title ?? frontmatter.title ?? mdx.slice(0, 48);
+  const collapsedByDefault =
+    defaultCollapsed ?? (frontmatter.collapse ?? "all") === "all";
+  const home = homeContextId ?? frontmatter.context;
+
+  // Reset przy zmianie dokumentu.
+  useEffect(() => {
+    setOccurrences([]);
+    setViewState(null);
+  }, [mdx]);
+
+  const model = useMemo(
+    () => buildProcessModel({ graph, profile, occurrences }),
+    [graph, profile, occurrences],
+  );
+
+  // Kontekst domowy: id lub nazwa z frontmatter/propsa.
+  const homeId = useMemo(() => {
+    if (!home) return undefined;
+    const ctxs = graph.contexts ?? [];
+    return (ctxs.find((c) => c.id === home) ?? ctxs.find((c) => c.name === home))?.id;
+  }, [graph, home]);
+
+  // Stan efektywny: jawny stan czytelnika → zapisany w store → startowy z MDX.
+  const effectiveState = useMemo<ProcessViewState>(() => {
+    if (viewState) return viewState;
+    const stored = store?.load(docKey);
+    if (stored) return stored;
+    return initialViewState(model);
+  }, [viewState, store, docKey, model]);
+
+  const updateState = useCallback(
+    (next: ProcessViewState) => {
+      setViewState(next);
+      store?.save(docKey, next);
+    },
+    [store, docKey],
+  );
+
+  const collapse = useMemo(
+    () =>
+      collapseContexts(model, {
+        contexts: graph.contexts ?? [],
+        state: effectiveState,
+        defaultCollapsed: collapsedByDefault,
+        homeContextId: homeId,
+      }),
+    [model, graph, effectiveState, collapsedByDefault, homeId],
+  );
+
+  const layout = useMemo(
+    () => layoutProcess({ model, collapse, graph, profile, state: effectiveState }),
+    [model, collapse, graph, profile, effectiveState],
+  );
+
+  const nodeTypes = useMemo(() => makeNodeTypes(profile), [profile]);
+  const nodes = useMemo(() => layout.nodes.map(rfNode), [layout]);
+  const edges = useMemo(() => layout.edges.map(rfEdge), [layout]);
+
+  // occId kroku -> klucz refa (klik w nod przewija prozę do chipu).
+  const keyByOcc = useMemo(() => {
+    const m = new Map<string, string>();
+    for (const s of model.steps) if (s.ref) m.set(s.occId, s.ref.key);
+    return m;
+  }, [model]);
+
+  useEffect(() => {
+    if (!scrollToKey || !proseRef.current) return;
+    const el = proseRef.current.querySelector(
+      `[data-arc-key="${CSS.escape(scrollToKey)}"]`,
+    );
+    el?.scrollIntoView({ behavior: "smooth", block: "center" });
+    setScrollToKey(null);
+  }, [scrollToKey]);
+
+  const focusState = useMemo(
+    () => ({ focusNodeId, setFocusNodeId, scrollToKey, setScrollToKey }),
+    [focusNodeId, scrollToKey],
+  );
+
+  const viewStateActions = useMemo(
+    () => ({
+      state: effectiveState,
+      toggleGroup: (key: string, group: string) =>
+        updateState(toggleGroupState(effectiveState, key, group)),
+      toggleContext: (contextId: string) =>
+        updateState(
+          toggleContextState(effectiveState, contextId, collapsedByDefault),
+        ),
+    }),
+    [effectiveState, updateState, collapsedByDefault],
+  );
+
+  const processData = useMemo(() => ({ graph, profile }), [graph, profile]);
+
+  return (
+    <ProcessDataContext.Provider value={processData}>
+      <FocusContext.Provider value={focusState}>
+        <ViewStateContext.Provider value={viewStateActions}>
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "minmax(320px, 1fr) minmax(420px, 1.3fr)",
+              height: "100%",
+            }}
+          >
+            {/* Proza */}
+            <div
+              ref={proseRef}
+              style={{
+                overflow: "auto",
+                padding: "20px 24px",
+                borderRight: `1px solid ${GLASS.border}`,
+              }}
+            >
+              <MdxView key={docKey} mdx={mdx} onOccurrences={setOccurrences} />
+            </div>
+
+            {/* Diagram */}
+            <div style={{ position: "relative" }}>
+              <ReactFlow
+                key={docKey}
+                nodes={nodes}
+                edges={edges}
+                nodeTypes={nodeTypes}
+                nodesDraggable={false}
+                onNodeMouseEnter={(_, n) => {
+                  const step = (n.data as { step?: ProcessStep }).step;
+                  const id =
+                    step?.node?.id ??
+                    (n.data as { node?: { id: string } }).node?.id;
+                  if (id) setFocusNodeId(id);
+                }}
+                onNodeMouseLeave={() => setFocusNodeId(null)}
+                onNodeClick={(_, n) => {
+                  const k = keyByOcc.get(n.id);
+                  if (k) setScrollToKey(k);
+                }}
+                fitView
+                fitViewOptions={{ padding: 0.18 }}
+                minZoom={0.1}
+                proOptions={{ hideAttribution: true }}
+              >
+                <Background color="#dbeafe" gap={26} size={1.5} />
+                <Controls />
+                <MiniMap
+                  pannable
+                  zoomable
+                  nodeColor={(n) => {
+                    const step = (n.data as { step?: ProcessStep }).step;
+                    if (step && !step.exists) return MISSING_COLOR;
+                    const kind =
+                      step?.node?.kind ??
+                      (n.data as { node?: { kind: string } }).node?.kind;
+                    return kind ? kindColor(profile, kind) : "#64748b";
+                  }}
+                  style={{
+                    background: "rgba(255,255,255,0.6)",
+                    border: `1px solid ${GLASS.border}`,
+                    borderRadius: 12,
+                  }}
+                />
+              </ReactFlow>
+            </div>
+          </div>
+        </ViewStateContext.Provider>
+      </FocusContext.Provider>
+    </ProcessDataContext.Provider>
+  );
+}

package/src/react/theme.ts

@@ -0,0 +1,36 @@
+/**
+ * Tokeny powierzchni (glassmorphism) dla diagramu procesu.
+ * Neutralne względem profilu — kolory RODZAJÓW nodów i relacji przychodzą
+ * z ProcessProfile, tu tylko szkło, tło i typografia.
+ */
+
+export const GLASS = {
+  space: "rgba(255,255,255,0.42)",
+  card: "rgba(255,255,255,0.72)",
+  cardStrong: "rgba(255,255,255,0.9)",
+  border: "rgba(168,85,247,0.30)",
+  borderStrong: "rgba(124,58,237,0.55)",
+  blur: "blur(14px)",
+  blurSoft: "blur(8px)",
+  shadow:
+    "0 8px 28px -8px rgba(124,58,237,0.22), 0 2px 8px -2px rgba(124,58,237,0.12)",
+  shadowStrong:
+    "0 18px 40px -10px rgba(124,58,237,0.30), 0 4px 12px -2px rgba(124,58,237,0.18)",
+  text: "#2a173f",
+  textMuted: "#6b5b86",
+  textFaint: "#9b8cb5",
+};
+
+export const BG_GRADIENT =
+  "linear-gradient(135deg,#dbeafe 0%,#ffffff 48%,#f3e8ff 100%)";
+
+export const MISSING_COLOR = "#e11d48";
+
+/** Hex → półprzezroczysty tint powierzchni. */
+export function tint(hex: string, alpha: number): string {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}

package/src/state/aggregate.ts

@@ -0,0 +1,54 @@
+/**
+ * Ustandaryzowany agregat stanu widoku diagramu procesu.
+ *
+ * Fabryka w stylu fragmentów Arc (por. `createMessageAggregate` z arc-chat):
+ * aplikacja podaje własne id, scope i nazwę, a dostaje agregat trzymający
+ * stan otwarć per (scopeId, docId) — współdzielony między urządzeniami.
+ *
+ * Wpięcie w diagram: opakuj query/mutację swojego scope w
+ * {@link functionStore} i podaj jako prop `store` do `ProcessDiagram`.
+ */
+
+import { aggregate, date, string, type ArcId } from "@arcote.tech/arc";
+
+export interface ProcessViewAggregateData {
+  /** Prefiks nazwy agregatu (np. "bmf"). */
+  name: string;
+  /** Fabryka id rekordu stanu widoku. */
+  viewStateId: ArcId<string>;
+  /** Id scope'a właściciela (np. accountId / workspaceId). */
+  scopeId: ArcId<string>;
+}
+
+export const createProcessViewAggregate = <
+  const Data extends ProcessViewAggregateData,
+>(
+  data: Data,
+) => {
+  const { viewStateId, scopeId } = data;
+  return aggregate(`${data.name}ProcessViewStates`, viewStateId, {
+    scopeId,
+    /** Id dokumentu procesu (use case / proces), którego dotyczy stan. */
+    docId: string(),
+    /** JSON-serializowany ProcessViewState (expanded + collapsedContexts). */
+    state: string(),
+    updatedAt: date(),
+  }).publicEvent(
+    "processViewSaved",
+    {
+      viewStateId,
+      scopeId,
+      docId: string(),
+      state: string(),
+    },
+    async (ctx, event) => {
+      const p = event.payload;
+      await ctx.set(p.viewStateId, {
+        scopeId: p.scopeId,
+        docId: p.docId,
+        state: p.state,
+        updatedAt: event.createdAt,
+      });
+    },
+  );
+};