@arcote.tech/arc-map 0.7.27

package/src/app/layout.ts

@@ -0,0 +1,350 @@
+/**
+ * Hierarchical auto-layout via ELK (`layered`): spaces are compound container
+ * nodes, elements are their children, and domain edges drive a crossing-
+ * minimized left-to-right flow (command → event → view). React component nodes
+ * are placed in a grid block to the left of the domain bounding box.
+ *
+ * Async — ELK runs off the main work and returns a Promise. Falls back to a
+ * deterministic grid if ELK ever throws.
+ */
+
+import ELK from "elkjs/lib/elk.bundled.js";
+import type { Edge, Node } from "@xyflow/react";
+import type { MapEdge, MapElement, MapJson } from "../types";
+import {
+  COMPONENT_EDGE_MUTATION,
+  COMPONENT_EDGE_QUERY,
+  DIM,
+  EDGE_COLOR,
+} from "./theme";
+
+const LABEL_BG = "#ffffff";
+const LABEL_BG_OPACITY = 0.78;
+const COMP_COLS = 3;
+
+const elk = new ELK();
+
+const ROOT_OPTS: Record<string, string> = {
+  "elk.algorithm": "layered",
+  "elk.direction": "RIGHT",
+  "elk.hierarchyHandling": "INCLUDE_CHILDREN",
+  "elk.layered.spacing.nodeNodeBetweenLayers": "75",
+  "elk.spacing.nodeNode": "38",
+  "elk.layered.spacing.edgeNodeBetweenLayers": "28",
+  "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+  "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+  "elk.layered.cycleBreaking.strategy": "GREEDY",
+  "elk.spacing.componentComponent": "90",
+  "elk.separateConnectedComponents": "true",
+};
+
+const SPACE_OPTS: Record<string, string> = {
+  // Reserve room at the top for the space header label.
+  "elk.padding": "[top=46,left=20,bottom=20,right=20]",
+  "elk.spacing.nodeNode": "26",
+  "elk.layered.spacing.nodeNodeBetweenLayers": "55",
+};
+
+export interface LayoutResult {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+interface ElkNode {
+  id: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  children?: ElkNode[];
+  layoutOptions?: Record<string, string>;
+  edges?: unknown[];
+}
+
+export async function layoutMap(map: MapJson): Promise<LayoutResult> {
+  const elementsBySpace = new Map<string, MapJson["elements"]>();
+  for (const space of map.spaces) elementsBySpace.set(space.id, []);
+  for (const el of map.elements) {
+    if (!elementsBySpace.has(el.spaceId)) elementsBySpace.set(el.spaceId, []);
+    elementsBySpace.get(el.spaceId)!.push(el);
+  }
+  const spaceName = new Map(map.spaces.map((s) => [s.id, s.name]));
+  const nodeIds = new Set(map.elements.map((e) => e.id));
+
+  // ---- Build the compound ELK graph (spaces → elements). ----
+  const graph: ElkNode = {
+    id: "root",
+    layoutOptions: ROOT_OPTS,
+    children: [...elementsBySpace.entries()]
+      .filter(([, els]) => els.length > 0)
+      .map(([spaceId, els]) => ({
+        id: `space:${spaceId}`,
+        layoutOptions: SPACE_OPTS,
+        children: els.map((el) => ({
+          id: el.id,
+          width: DIM.elementW,
+          height: DIM.elementH,
+        })),
+      })),
+    edges: map.edges
+      .filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target))
+      .map((e) => ({ id: e.id, sources: [e.source], targets: [e.target] })),
+  };
+
+  const nodes: Node[] = [];
+  let minX = Infinity;
+  let minY = Infinity;
+
+  try {
+    const res = (await elk.layout(graph as any)) as ElkNode;
+    for (const space of res.children ?? []) {
+      const sx = space.x ?? 0;
+      const sy = space.y ?? 0;
+      const spaceId = space.id.replace(/^space:/, "");
+      minX = Math.min(minX, sx);
+      minY = Math.min(minY, sy);
+      nodes.push({
+        id: space.id,
+        type: "space",
+        position: { x: sx, y: sy },
+        data: { label: spaceName.get(spaceId) ?? spaceId, count: space.children?.length ?? 0 },
+        style: { width: space.width ?? 200, height: space.height ?? 120 },
+        selectable: false,
+        draggable: true,
+      });
+      const byId = new Map(map.elements.map((e) => [e.id, e]));
+      for (const child of space.children ?? []) {
+        const el = byId.get(child.id);
+        if (!el) continue;
+        nodes.push({
+          id: el.id,
+          type: "element",
+          parentId: space.id,
+          extent: "parent",
+          position: { x: child.x ?? 0, y: child.y ?? 0 },
+          data: { element: el },
+        });
+      }
+    }
+  } catch {
+    return gridFallback(map);
+  }
+
+  if (!isFinite(minX)) {
+    minX = 0;
+    minY = 0;
+  }
+
+  // ---- Component block: grid to the left of the domain. ----
+  const blockW = COMP_COLS * (DIM.componentW + DIM.gap);
+  const startX = minX - blockW - 180;
+  map.components.forEach((c, i) => {
+    const col = i % COMP_COLS;
+    const row = Math.floor(i / COMP_COLS);
+    nodes.push({
+      id: `component:${c.id}`,
+      type: "component",
+      position: {
+        x: startX + col * (DIM.componentW + DIM.gap),
+        y: minY + row * (DIM.componentH + DIM.componentGapY),
+      },
+      data: { component: c },
+    });
+  });
+
+  return { nodes, edges: buildEdges(map) };
+}
+
+// ---------------------------------------------------------------------------
+// Edges
+// ---------------------------------------------------------------------------
+
+function buildEdges(map: MapJson): Edge[] {
+  const edges: Edge[] = [];
+  for (const e of map.edges) {
+    const color = EDGE_COLOR[e.kind];
+    edges.push({
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      data: { kind: e.kind, crossContext: e.crossContext },
+      style: {
+        stroke: color,
+        strokeWidth: e.crossContext ? 2 : 1.25,
+        strokeDasharray: e.crossContext ? "6 4" : undefined,
+        opacity: e.crossContext ? 0.5 : 0.22,
+      },
+      labelStyle: { fill: color, fontSize: 10, fontWeight: 600 },
+      labelBgStyle: { fill: LABEL_BG, fillOpacity: LABEL_BG_OPACITY },
+      labelBgPadding: [4, 2] as [number, number],
+      labelBgBorderRadius: 4,
+      markerEnd: { type: "arrowclosed", color } as any,
+    });
+  }
+  for (const ce of map.componentEdges) {
+    const color = ce.usage === "query" ? COMPONENT_EDGE_QUERY : COMPONENT_EDGE_MUTATION;
+    edges.push({
+      id: `ce:${ce.id}`,
+      source: `component:${ce.source}`,
+      target: ce.target,
+      data: { component: true, usage: ce.usage },
+      style: { stroke: color, strokeWidth: 1.25, strokeDasharray: "2 3", opacity: 0.45 },
+      markerEnd: { type: "arrowclosed", color } as any,
+    });
+  }
+  return edges;
+}
+
+// ---------------------------------------------------------------------------
+// Fallback grid (only if ELK throws)
+// ---------------------------------------------------------------------------
+
+function gridFallback(map: MapJson): LayoutResult {
+  const nodes: Node[] = [];
+  const elementsBySpace = new Map<string, MapJson["elements"]>();
+  for (const el of map.elements) {
+    if (!elementsBySpace.has(el.spaceId)) elementsBySpace.set(el.spaceId, []);
+    elementsBySpace.get(el.spaceId)!.push(el);
+  }
+  const spaceName = new Map(map.spaces.map((s) => [s.id, s.name]));
+  let cursorX = 0;
+  let cursorY = 0;
+  let rowHeight = 0;
+  for (const [spaceId, els] of elementsBySpace) {
+    if (els.length === 0) continue;
+    const cols = Math.min(6, Math.max(1, Math.ceil(Math.sqrt(els.length))));
+    const rows = Math.ceil(els.length / cols);
+    const groupW = cols * DIM.elementW + (cols - 1) * DIM.gap + DIM.pad * 2;
+    const groupH = rows * DIM.elementH + (rows - 1) * DIM.gap + DIM.pad * 2 + DIM.header;
+    if (cursorX > 0 && cursorX + groupW > 4200) {
+      cursorX = 0;
+      cursorY += rowHeight + DIM.groupGapY;
+      rowHeight = 0;
+    }
+    nodes.push({
+      id: `space:${spaceId}`,
+      type: "space",
+      position: { x: cursorX, y: cursorY },
+      data: { label: spaceName.get(spaceId) ?? spaceId, count: els.length },
+      style: { width: groupW, height: groupH },
+      selectable: false,
+      draggable: true,
+    });
+    els.forEach((el, i) => {
+      nodes.push({
+        id: el.id,
+        type: "element",
+        parentId: `space:${spaceId}`,
+        extent: "parent",
+        position: {
+          x: DIM.pad + (i % cols) * (DIM.elementW + DIM.gap),
+          y: DIM.header + DIM.pad + Math.floor(i / cols) * (DIM.elementH + DIM.gap),
+        },
+        data: { element: el },
+      });
+    });
+    cursorX += groupW + DIM.groupGapX;
+    rowHeight = Math.max(rowHeight, groupH);
+  }
+  return { nodes, edges: buildEdges(map) };
+}
+
+// ---------------------------------------------------------------------------
+// Use-case "ordered spine" layout
+// ---------------------------------------------------------------------------
+
+const USECASE_OPTS: Record<string, string> = {
+  "elk.algorithm": "layered",
+  "elk.direction": "DOWN",
+  "elk.layered.spacing.nodeNodeBetweenLayers": "70",
+  "elk.spacing.nodeNode": "44",
+  "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP",
+  "elk.layered.nodePlacement.strategy": "BRANDES_KOEPF",
+  "elk.layered.cycleBreaking.strategy": "GREEDY",
+  "elk.separateConnectedComponents": "false",
+};
+
+/** Domain edges (no components), styled for the smaller use-case sub-graph. */
+function useCaseEdges(edges: MapEdge[]): Edge[] {
+  return edges.map((e) => {
+    const color = EDGE_COLOR[e.kind];
+    return {
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      data: { kind: e.kind, crossContext: e.crossContext },
+      style: {
+        stroke: color,
+        strokeWidth: e.crossContext ? 2.5 : 1.75,
+        strokeDasharray: e.crossContext ? "6 4" : undefined,
+        opacity: 0.85,
+      },
+      label: e.kind,
+      labelStyle: { fill: color, fontSize: 10, fontWeight: 600 },
+      labelBgStyle: { fill: LABEL_BG, fillOpacity: LABEL_BG_OPACITY },
+      labelBgPadding: [4, 2] as [number, number],
+      labelBgBorderRadius: 4,
+      markerEnd: { type: "arrowclosed", color } as any,
+    };
+  });
+}
+
+export interface UseCaseLayoutInput {
+  elements: MapElement[];
+  edges: MapEdge[];
+  /** Referenced element ids in document order — become the numbered spine. */
+  referencedIds: string[];
+}
+
+/**
+ * Lay out a use-case sub-graph as an ordered spine. Synthetic ordering edges
+ * between consecutive referenced nodes force them into document order (top→down)
+ * via the layered algorithm; related/connector nodes branch off. The synthetic
+ * edges are not rendered.
+ */
+export async function layoutUseCase(input: UseCaseLayoutInput): Promise<LayoutResult> {
+  const { elements, edges, referencedIds } = input;
+  const seq = new Map(referencedIds.map((id, i) => [id, i + 1]));
+
+  const orderingEdges = referencedIds
+    .slice(1)
+    .map((id, i) => ({ id: `__seq:${i}`, sources: [referencedIds[i]], targets: [id] }));
+
+  const graph = {
+    id: "root",
+    layoutOptions: USECASE_OPTS,
+    children: elements.map((el) => ({ id: el.id, width: DIM.elementW, height: DIM.elementH })),
+    edges: [
+      ...edges.map((e) => ({ id: e.id, sources: [e.source], targets: [e.target] })),
+      ...orderingEdges,
+    ],
+  };
+
+  const nodes: Node[] = [];
+  try {
+    const res = (await elk.layout(graph as any)) as any;
+    const byId = new Map(elements.map((e) => [e.id, e]));
+    for (const child of res.children ?? []) {
+      const el = byId.get(child.id);
+      if (!el) continue;
+      nodes.push({
+        id: el.id,
+        type: "element",
+        position: { x: child.x ?? 0, y: child.y ?? 0 },
+        data: { element: el, seq: seq.get(el.id), referenced: seq.has(el.id) },
+      });
+    }
+  } catch {
+    // Fallback: simple column for referenced, grid for the rest.
+    elements.forEach((el, i) => {
+      nodes.push({
+        id: el.id,
+        type: "element",
+        position: { x: (i % 4) * (DIM.elementW + DIM.gap), y: Math.floor(i / 4) * (DIM.elementH + DIM.gap) },
+        data: { element: el, seq: seq.get(el.id), referenced: seq.has(el.id) },
+      });
+    });
+  }
+
+  return { nodes, edges: useCaseEdges(edges) };
+}

package/src/app/map-view.tsx

@@ -0,0 +1,225 @@
+/** Top-level map view: React Flow canvas + legend + detail panel. */
+
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+  type Node,
+} from "@xyflow/react";
+import { useEffect, useMemo, useState } from "react";
+import type { MapComponent, MapElement, MapJson } from "../types";
+import { layoutMap } from "./layout";
+import { nodeTypes } from "./nodes";
+import { DetailPanel } from "./detail-panel";
+import { EDGE_COLOR, ELEMENT_COLOR, GLASS } from "./theme";
+
+function Legend({ showComponents, onToggle }: { showComponents: boolean; onToggle: () => void }) {
+  return (
+    <div
+      style={{
+        position: "absolute",
+        top: 14,
+        left: 14,
+        zIndex: 5,
+        background: GLASS.card,
+        backdropFilter: GLASS.blur,
+        WebkitBackdropFilter: GLASS.blur,
+        border: `1px solid ${GLASS.border}`,
+        borderRadius: 16,
+        padding: 14,
+        fontSize: 11,
+        display: "flex",
+        flexDirection: "column",
+        gap: 7,
+        boxShadow: GLASS.shadow,
+      }}
+    >
+      <div style={{ fontWeight: 800, color: GLASS.text, marginBottom: 2, fontSize: 13, letterSpacing: 0.2 }}>
+        Arc Context Map
+      </div>
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, maxWidth: 248 }}>
+        {Object.entries(ELEMENT_COLOR).filter(([k]) => k !== "unknown").map(([k, c]) => (
+          <span key={k} style={{ color: GLASS.textMuted, display: "flex", alignItems: "center", gap: 4 }}>
+            <span style={{ width: 9, height: 9, borderRadius: 3, background: c, display: "inline-block" }} /> {k}
+          </span>
+        ))}
+      </div>
+      <div style={{ height: 1, background: GLASS.border, margin: "3px 0" }} />
+      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, maxWidth: 248 }}>
+        {Object.entries(EDGE_COLOR).map(([k, c]) => (
+          <span key={k} style={{ color: GLASS.textMuted, display: "flex", alignItems: "center", gap: 4 }}>
+            <span style={{ width: 14, height: 0, borderTop: `2px solid ${c}`, display: "inline-block" }} /> {k}
+          </span>
+        ))}
+      </div>
+      <div style={{ color: GLASS.textFaint }}>— — dashed = cross-context</div>
+      <label style={{ display: "flex", gap: 6, alignItems: "center", color: GLASS.textMuted, marginTop: 2, cursor: "pointer" }}>
+        <input type="checkbox" checked={showComponents} onChange={onToggle} /> React consumers
+      </label>
+    </div>
+  );
+}
+
+export function MapView({ map }: { map: MapJson }) {
+  // Off by default — the clean domain map first; React consumers are a toggle.
+  const [showComponents, setShowComponents] = useState(false);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState([] as Node[]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([] as any[]);
+  const [laidOut, setLaidOut] = useState(false);
+  const [selectedElement, setSelectedElement] = useState<MapElement>();
+  const [selectedComponent, setSelectedComponent] = useState<MapComponent>();
+
+  // Compute the hierarchical ELK layout when the data changes (async).
+  useEffect(() => {
+    let cancelled = false;
+    setLaidOut(false);
+    layoutMap(map).then((layout) => {
+      if (cancelled) return;
+      setNodes(layout.nodes);
+      setEdges(layout.edges);
+      setLaidOut(true);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [map, setNodes, setEdges]);
+
+  // Focus: when a node is hovered or selected, only its edges + neighbours stay
+  // bright; everything else dims. Turns the dense graph into something readable.
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const focusId =
+    hoveredId ??
+    (selectedElement ? selectedElement.id : selectedComponent ? `component:${selectedComponent.id}` : null);
+
+  // Toggle the React-component layer (nodes + their edges).
+  const visibleNodes = useMemo(
+    () => (showComponents ? nodes : nodes.filter((n) => n.type !== "component")),
+    [nodes, showComponents],
+  );
+  const visibleEdges = useMemo(
+    () => (showComponents ? edges : edges.filter((e) => !String(e.id).startsWith("ce:"))),
+    [edges, showComponents],
+  );
+
+  // Adjacency for focus highlighting.
+  const neighbours = useMemo(() => {
+    const m = new Map<string, Set<string>>();
+    const add = (a: string, b: string) => {
+      (m.get(a) ?? m.set(a, new Set()).get(a)!).add(b);
+    };
+    for (const e of edges as any[]) {
+      add(e.source, e.target);
+      add(e.target, e.source);
+    }
+    return m;
+  }, [edges]);
+
+  const focusNodes = useMemo(() => {
+    if (!focusId) return visibleNodes;
+    const keep = neighbours.get(focusId) ?? new Set<string>();
+    return visibleNodes.map((n) => {
+      if (n.type === "space") return n;
+      const active = n.id === focusId || keep.has(n.id);
+      return active ? n : { ...n, style: { ...n.style, opacity: 0.18 } };
+    });
+  }, [visibleNodes, focusId, neighbours]);
+
+  const focusEdges = useMemo(() => {
+    if (!focusId) return visibleEdges;
+    return visibleEdges.map((e: any) => {
+      const active = e.source === focusId || e.target === focusId;
+      return active
+        ? {
+            ...e,
+            label: e.data?.kind ?? e.data?.usage,
+            labelStyle: { fill: e.style?.stroke ?? "#555", fontSize: 10, fontWeight: 600 },
+            labelBgStyle: { fill: "#ffffff", fillOpacity: 0.85 },
+            labelBgPadding: [4, 2],
+            labelBgBorderRadius: 4,
+            style: { ...e.style, opacity: 1, strokeWidth: Math.max(2, e.style?.strokeWidth ?? 1.5) },
+            zIndex: 10,
+          }
+        : { ...e, label: undefined, style: { ...e.style, opacity: 0.04 } };
+    });
+  }, [visibleEdges, focusId]);
+
+  const onNodeClick = (_: unknown, node: Node) => {
+    if (node.type === "element") {
+      setSelectedComponent(undefined);
+      setSelectedElement((node.data as { element: MapElement }).element);
+    } else if (node.type === "component") {
+      setSelectedElement(undefined);
+      setSelectedComponent((node.data as { component: MapComponent }).component);
+    }
+  };
+
+  return (
+    <div style={{ width: "100%", height: "100%", position: "relative" }}>
+      <Legend showComponents={showComponents} onToggle={() => setShowComponents((v) => !v)} />
+      {!laidOut ? (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: GLASS.textMuted,
+            fontSize: 14,
+            zIndex: 3,
+          }}
+        >
+          Liczę układ grafu…
+        </div>
+      ) : null}
+      <ReactFlow
+        key={laidOut ? "ready" : "loading"}
+        nodes={focusNodes}
+        edges={focusEdges}
+        nodeTypes={nodeTypes}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onNodeClick={onNodeClick}
+        onNodeMouseEnter={(_, n) => setHoveredId(n.id)}
+        onNodeMouseLeave={() => setHoveredId(null)}
+        onPaneClick={() => {
+          setSelectedElement(undefined);
+          setSelectedComponent(undefined);
+        }}
+        fitView
+        fitViewOptions={{ padding: 0.12 }}
+        minZoom={0.05}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background color="#c9b8e8" gap={26} size={1.5} />
+        <Controls />
+        <MiniMap
+          pannable
+          zoomable
+          maskColor="rgba(124,58,237,0.08)"
+          nodeColor={(n) =>
+            n.type === "element"
+              ? ELEMENT_COLOR[(n.data as { element: MapElement }).element.kind] ?? "#64748b"
+              : n.type === "component"
+                ? "#a78bfa"
+                : "rgba(124,58,237,0.18)"
+          }
+          style={{ background: "rgba(255,255,255,0.6)", border: `1px solid ${GLASS.border}`, borderRadius: 12 }}
+        />
+      </ReactFlow>
+      <DetailPanel
+        map={map}
+        selectedElement={selectedElement}
+        selectedComponent={selectedComponent}
+        onClose={() => {
+          setSelectedElement(undefined);
+          setSelectedComponent(undefined);
+        }}
+      />
+    </div>
+  );
+}

package/src/app/mdx-view.tsx

@@ -0,0 +1,74 @@
+/**
+ * Renders a use-case MDX string in the browser. Compiles via `@mdx-js/mdx`
+ * `evaluate` with the injected `<Arc>` component, wrapped in ArcRefsProvider so
+ * the referenced elements are collected (in document order) for the diagram.
+ */
+
+import { evaluate } from "@mdx-js/mdx";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkGfm from "remark-gfm";
+import { useEffect, useState, type ComponentType } from "react";
+// eslint-disable-next-line import/no-unresolved
+import * as runtime from "react/jsx-runtime";
+import { Arc } from "./arc";
+import { Branch, Lane, Parallel, Step } from "./structure";
+import { ArcRefsProvider } from "./ref-context";
+import type { ArcRegEntry } from "./contexts";
+import { GLASS } from "./theme";
+
+const mdxComponents = {
+  Arc,
+  Parallel,
+  Branch,
+  Lane,
+  Step,
+  h1: (p: any) => <h1 style={{ fontSize: 24, color: GLASS.text, margin: "4px 0 12px" }} {...p} />,
+  h2: (p: any) => <h2 style={{ fontSize: 18, color: GLASS.text, margin: "22px 0 8px" }} {...p} />,
+  h3: (p: any) => <h3 style={{ fontSize: 15, color: GLASS.text, margin: "16px 0 6px" }} {...p} />,
+  p: (p: any) => <p style={{ fontSize: 14, lineHeight: 1.7, color: "#3b2a55", margin: "8px 0" }} {...p} />,
+  li: (p: any) => <li style={{ fontSize: 14, lineHeight: 1.7, color: "#3b2a55" }} {...p} />,
+  code: (p: any) => (
+    <code style={{ background: "rgba(124,58,237,0.08)", padding: "1px 5px", borderRadius: 5, fontSize: "0.9em" }} {...p} />
+  ),
+  a: (p: any) => <a style={{ color: "#7c3aed" }} {...p} />,
+};
+
+export function MdxView({ mdx, onRefs }: { mdx: string; onRefs: (refs: ArcRegEntry[]) => void }) {
+  const [Comp, setComp] = useState<ComponentType<any> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setComp(null);
+    setError(null);
+    evaluate(mdx, {
+      ...(runtime as any),
+      remarkPlugins: [remarkFrontmatter, remarkGfm],
+    })
+      .then((mod) => {
+        if (!cancelled) setComp(() => mod.default as ComponentType<any>);
+      })
+      .catch((e) => {
+        if (!cancelled) setError(String(e));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [mdx]);
+
+  if (error) {
+    return (
+      <pre style={{ color: "#be123c", fontSize: 12, whiteSpace: "pre-wrap" }}>
+        Błąd renderu MDX:{"\n"}
+        {error}
+      </pre>
+    );
+  }
+  if (!Comp) return <div style={{ color: GLASS.textMuted }}>Renderuję dokument…</div>;
+
+  return (
+    <ArcRefsProvider onRefs={onRefs}>
+      <Comp components={mdxComponents} />
+    </ArcRefsProvider>
+  );
+}