@arcote.tech/arc-map 0.7.27

package/src/app/usecase-model.ts

@@ -0,0 +1,346 @@
+/**
+ * Use-case data-flow model. Turns the ordered `<Arc>` occurrences + the full
+ * map into a per-step model:
+ *
+ *  - steps: one node PER occurrence (no dedup); existing or missing.
+ *  - connectors: elements on the shortest undirected path between two existing
+ *    steps (the plumbing the author didn't narrate).
+ *  - per step: related elements that are NOT already visible, grouped by relation
+ *    kind, ready to be collapsed into badges / expanded into columns.
+ *
+ * Pure and dependency-free (testable in bun).
+ */
+
+import type { MapEdge, MapElement, MapJson } from "../types";
+import type { ResolvedRef } from "../refs";
+import type { PathSeg } from "./contexts";
+
+export const DEFAULT_MAX_PATH = 5;
+
+/** Relation kinds surfaced as badges / expandable columns. */
+export type RelKind =
+  | "queries" // forward: this step reads X                  → left column
+  | "mutates" // forward: this step writes X                 → right column
+  | "mutatedBy" // reverse: X is written by others (producers) → left column (arrows in)
+  | "queriedBy" // reverse: X is read by others               → left column
+  | "handledBy" // reverse: X (event) handled/observed by others → left column
+  | "usedByUI"; // reverse: React components/pages that use X (ts-morph) → left column
+
+/**
+ * Which side a relation expands to. Forward outputs (`mutates`) go right; every
+ * INCOMING relationship — what feeds the step (`queries`) and everyone who acts
+ * on / reads / observes / renders it (`mutatedBy`, `queriedBy`, `handledBy`,
+ * `usedByUI`) — goes left. Edge arrows keep their semantic direction regardless.
+ */
+export const REL_SIDE: Record<RelKind, "left" | "right"> = {
+  queries: "left",
+  queriedBy: "left",
+  mutatedBy: "left",
+  handledBy: "left",
+  usedByUI: "left",
+  mutates: "right",
+};
+
+export interface OccurrenceRef {
+  occId: string;
+  ref: ResolvedRef | null;
+  label: string;
+  /** Structural path (parallel/branch/lane/step) from the MDX. */
+  path?: PathSeg[];
+}
+
+export interface StepNode {
+  occId: string;
+  seq: number;
+  ref: ResolvedRef | null;
+  exists: boolean;
+  element?: MapElement;
+  label: string;
+  /** Method name actually used (aggregate mutationMethod/queryMethod), if any. */
+  method?: { name: string; kind: "mutation" | "query" };
+  /** Related elements NOT already visible, grouped by relation kind. */
+  badges: Partial<Record<RelKind, string[]>>;
+  /** Horizontal position (time / dependency depth), 0-based. */
+  depth: number;
+  /** Vertical track (parallel / branch lane), 0-based. */
+  lane: number;
+  /** True for branch (alternative / XOR) lanes. */
+  alt?: boolean;
+  /** Label of the enclosing `<Step>` phase, if any. */
+  stepTitle?: string;
+  /** Label of the enclosing `<Lane>`, if any. */
+  laneTitle?: string;
+  /** Id of the enclosing parallel/branch block, if any. */
+  blockId?: string;
+}
+
+export interface ConnectorNode {
+  id: string;
+  element: MapElement;
+  /** seq of the two narrated steps this connector sits between, flow-ordered
+   *  [upstream → downstream]. */
+  between: [number, number];
+  /** 1-based position among the intermediates on the directed path. */
+  order: number;
+  /** Total intermediates on that path (for spreading between the two steps). */
+  count: number;
+}
+
+export interface UseCaseModel {
+  steps: StepNode[];
+  connectors: ConnectorNode[];
+  /** Visible element ids: existing step elements + connectors. */
+  visible: Set<string>;
+  /** element id -> seq of its first existing step occurrence. */
+  firstSeqByElement: Map<string, number>;
+  /** Pseudo-elements for React components/pages (UI layer) by id. */
+  uiById: Map<string, MapElement>;
+}
+
+// ---------------------------------------------------------------------------
+// Graph helpers (directed flow adjacency + BFS shortest path)
+// ---------------------------------------------------------------------------
+
+/**
+ * Directed left→right flow adjacency: each edge points producer→consumer, so a
+ * BFS path follows the actual data flow.
+ *  - mutates/emits: source produces target            → source → target
+ *  - queries/listens/handles: source consumes target  → target → source
+ * Mirrors the layout's INPUT/OUTPUT edge orientation, so a connector found here
+ * lies on the same flow the diagram draws — i.e. genuinely BETWEEN the two
+ * narrated steps, never a shared upstream/downstream they both happen to touch.
+ */
+function flowAdjacency(edges: MapEdge[]): Map<string, Set<string>> {
+  const adj = new Map<string, Set<string>>();
+  const link = (a: string, b: string) => {
+    let s = adj.get(a);
+    if (!s) adj.set(a, (s = new Set()));
+    s.add(b);
+  };
+  for (const e of edges) {
+    if (e.kind === "mutates" || e.kind === "emits") link(e.source, e.target);
+    else link(e.target, e.source);
+  }
+  return adj;
+}
+
+function shortestPath(
+  adj: Map<string, Set<string>>,
+  start: string,
+  goal: string,
+  maxLen: number,
+): string[] | null {
+  if (start === goal) return [start];
+  const prev = new Map<string, string>();
+  const depth = new Map<string, number>([[start, 0]]);
+  const queue = [start];
+  while (queue.length) {
+    const cur = queue.shift()!;
+    const d = depth.get(cur)!;
+    if (d >= maxLen) continue;
+    for (const nb of adj.get(cur) ?? []) {
+      if (depth.has(nb)) continue;
+      depth.set(nb, d + 1);
+      prev.set(nb, cur);
+      if (nb === goal) {
+        const path = [goal];
+        let p = cur;
+        while (p !== start) {
+          path.push(p);
+          p = prev.get(p)!;
+        }
+        path.push(start);
+        return path.reverse();
+      }
+      queue.push(nb);
+    }
+  }
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// Reverse relation index
+// ---------------------------------------------------------------------------
+
+function reverseSources(edges: MapEdge[], target: string, kinds: MapEdge["kind"][]): string[] {
+  const out = new Set<string>();
+  for (const e of edges) {
+    if (e.target === target && kinds.includes(e.kind)) out.add(e.source);
+  }
+  return [...out];
+}
+
+function forwardDeps(step: StepNode): { queries: string[]; mutates: string[] } {
+  const el = step.element;
+  if (!el) return { queries: [], mutates: [] };
+  if (step.method) {
+    const m = el.methods?.find((x) => x.name === step.method!.name);
+    return { queries: m?.queryDeps ?? [], mutates: m?.mutationDeps ?? [] };
+  }
+  return { queries: el.queryDeps ?? [], mutates: el.mutationDeps ?? [] };
+}
+
+// ---------------------------------------------------------------------------
+// Public builder
+// ---------------------------------------------------------------------------
+
+export interface BuildModelInput {
+  map: MapJson;
+  occurrences: OccurrenceRef[];
+  maxPath?: number;
+}
+
+/**
+ * Assign depth (time, x) and lane (parallel/branch track, y) from the structural
+ * paths. Plain steps flow as a sequence; a `<Parallel>`/`<Branch>` block places
+ * its members at the same base depth on separate lanes (sequences within a lane
+ * extend the depth). The whole block occupies one slot of the outer sequence.
+ */
+function assignDepthLane(steps: StepNode[], occurrences: OccurrenceRef[]): void {
+  let depthCursor = 0;
+  let block: { id: string; base: number; maxLocal: number; laneDepth: Map<number, number> } | null = null;
+  const finalize = () => {
+    if (block) {
+      depthCursor = block.base + block.maxLocal + 1;
+      block = null;
+    }
+  };
+  steps.forEach((step, i) => {
+    const path = occurrences[i].path ?? [];
+    const P = path.find((s) => s.type === "parallel" || s.type === "branch");
+    if (!P) {
+      finalize();
+      step.depth = depthCursor;
+      step.lane = 0;
+      depthCursor += 1;
+      return;
+    }
+    if (!block || block.id !== P.id) {
+      finalize();
+      block = { id: P.id, base: depthCursor, maxLocal: 0, laneDepth: new Map() };
+    }
+    const lane = P.laneIndex ?? 0;
+    const local = block.laneDepth.get(lane) ?? 0;
+    step.depth = block.base + local;
+    step.lane = lane;
+    step.alt = P.type === "branch";
+    step.blockId = P.id;
+    block.laneDepth.set(lane, local + 1);
+    block.maxLocal = Math.max(block.maxLocal, local);
+  });
+  finalize();
+}
+
+export function buildUseCaseModel(input: BuildModelInput): UseCaseModel {
+  const { map, occurrences, maxPath = DEFAULT_MAX_PATH } = input;
+  const elementById = new Map(map.elements.map((e) => [e.id, e]));
+
+  // Pseudo-elements for React components (ts-morph UI layer). Referenced via
+  // `<Arc component>` and surfaced as the `usedByUI` badge.
+  const uiById = new Map<string, MapElement>();
+  for (const c of map.components) {
+    uiById.set(c.id, { id: c.id, name: c.name ?? c.file, kind: "page", spaceId: "ui" });
+  }
+  const resolve = (id: string) => elementById.get(id) ?? uiById.get(id);
+
+  // 1) Steps — one per occurrence.
+  const steps: StepNode[] = occurrences.map((o, i) => {
+    const exists = !!o.ref && !!resolve(o.ref.nodeId);
+    const path = o.path ?? [];
+    return {
+      occId: o.occId,
+      seq: i + 1,
+      ref: o.ref,
+      exists,
+      element: exists ? resolve(o.ref!.nodeId) : undefined,
+      label: o.label,
+      method: o.ref?.method,
+      badges: {},
+      depth: 0,
+      lane: 0,
+      stepTitle: path.find((s) => s.type === "step")?.title,
+      laneTitle: path.find((s) => s.type === "lane")?.title,
+    };
+  });
+
+  assignDepthLane(steps, occurrences);
+
+  // First occurrence seq per existing element id.
+  const firstSeqByElement = new Map<string, number>();
+  for (const s of steps) {
+    if (s.exists && !firstSeqByElement.has(s.element!.id)) {
+      firstSeqByElement.set(s.element!.id, s.seq);
+    }
+  }
+  const stepElementIds = [...firstSeqByElement.keys()];
+
+  // 2) Connectors — elements on a DIRECTED flow path between two narrated steps.
+  // Following flow direction (not undirected) guarantees the connector sits
+  // BETWEEN the two steps left→right, never a node that's upstream of both.
+  const flowAdj = flowAdjacency(map.edges);
+  const connectorMap = new Map<string, ConnectorNode>();
+  for (let i = 0; i < stepElementIds.length; i++) {
+    for (let j = i + 1; j < stepElementIds.length; j++) {
+      const a = stepElementIds[i];
+      const b = stepElementIds[j];
+      // Try both flow orientations; keep the first directed path found.
+      let path = shortestPath(flowAdj, a, b, maxPath);
+      let from = a;
+      let to = b;
+      if (!path) {
+        path = shortestPath(flowAdj, b, a, maxPath);
+        from = b;
+        to = a;
+      }
+      if (!path) continue;
+      // Intermediates only: drop the endpoints and any other narrated step that
+      // happens to fall on the path (those render as steps, not connectors).
+      const intermediates = path.filter((id) => !firstSeqByElement.has(id));
+      const between: [number, number] = [
+        firstSeqByElement.get(from)!,
+        firstSeqByElement.get(to)!,
+      ];
+      intermediates.forEach((id, k) => {
+        const el = elementById.get(id);
+        if (!el || connectorMap.has(id)) return;
+        connectorMap.set(id, {
+          id,
+          element: el,
+          between,
+          order: k + 1,
+          count: intermediates.length,
+        });
+      });
+    }
+  }
+  const connectors = [...connectorMap.values()];
+
+  // 3) Visible set.
+  const visible = new Set<string>([...stepElementIds, ...connectorMap.keys()]);
+
+  // 4) Per-step badges — related elements NOT visible, grouped by relation kind.
+  for (const s of steps) {
+    if (!s.exists) continue;
+    const id = s.element!.id;
+    const fwd = forwardDeps(s);
+    const usedByUI = map.componentEdges.filter((e) => e.target === id).map((e) => e.source);
+    const groups: Partial<Record<RelKind, string[]>> = {
+      queries: fwd.queries,
+      mutates: fwd.mutates,
+      mutatedBy: reverseSources(map.edges, id, ["mutates", "emits"]),
+      queriedBy: reverseSources(map.edges, id, ["queries"]),
+      handledBy: reverseSources(map.edges, id, ["handles", "listens"]),
+      usedByUI,
+    };
+    const badges: Partial<Record<RelKind, string[]>> = {};
+    for (const [kind, list] of Object.entries(groups) as [RelKind, string[]][]) {
+      // UI badge targets live in uiById; the rest are context elements.
+      const known = kind === "usedByUI" ? uiById : elementById;
+      const filtered = [...new Set(list)].filter((t) => t !== id && !visible.has(t) && known.has(t));
+      if (filtered.length) badges[kind] = filtered;
+    }
+    s.badges = badges;
+  }
+
+  return { steps, connectors, visible, firstSeqByElement, uiById };
+}

package/src/app/usecase-tree.tsx

@@ -0,0 +1,104 @@
+/** Folder-tree navigator for use cases, mirroring packages/<pkg>/use-cases/**. */
+
+import { useMemo } from "react";
+import type { UseCaseEntry } from "../types";
+import { GLASS } from "./theme";
+
+interface TreeNode {
+  name: string;
+  path: string;
+  children: Map<string, TreeNode>;
+  entry?: UseCaseEntry;
+}
+
+function buildTree(entries: UseCaseEntry[]): TreeNode {
+  const root: TreeNode = { name: "", path: "", children: new Map() };
+  for (const e of entries) {
+    const segments = [e.package, ...e.subPath.split("/")];
+    let node = root;
+    let path = "";
+    segments.forEach((seg, i) => {
+      path = path ? `${path}/${seg}` : seg;
+      let child = node.children.get(seg);
+      if (!child) {
+        child = { name: seg, path, children: new Map() };
+        node.children.set(seg, child);
+      }
+      if (i === segments.length - 1) child.entry = e;
+      node = child;
+    });
+  }
+  return root;
+}
+
+function NodeRow({
+  node,
+  depth,
+  selectedId,
+  onSelect,
+}: {
+  node: TreeNode;
+  depth: number;
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  const isLeaf = !!node.entry;
+  const label = isLeaf ? node.entry!.title : node.name.replace(/\.mdx$/, "");
+  const selected = isLeaf && node.entry!.id === selectedId;
+  const children = [...node.children.values()].sort(
+    (a, b) => Number(!!a.entry) - Number(!!b.entry) || a.name.localeCompare(b.name),
+  );
+  return (
+    <div>
+      <div
+        onClick={isLeaf ? () => onSelect(node.entry!.id) : undefined}
+        style={{
+          padding: "4px 8px",
+          paddingLeft: 8 + depth * 14,
+          fontSize: 12.5,
+          borderRadius: 8,
+          cursor: isLeaf ? "pointer" : "default",
+          color: isLeaf ? GLASS.text : GLASS.textMuted,
+          fontWeight: isLeaf ? 500 : 700,
+          background: selected ? "rgba(124,58,237,0.14)" : "transparent",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {isLeaf ? "📄 " : "📁 "}
+        {label}
+      </div>
+      {children.map((c) => (
+        <NodeRow key={c.path} node={c} depth={depth + 1} selectedId={selectedId} onSelect={onSelect} />
+      ))}
+    </div>
+  );
+}
+
+export function UseCaseTree({
+  useCases,
+  selectedId,
+  onSelect,
+}: {
+  useCases: UseCaseEntry[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+}) {
+  const tree = useMemo(() => buildTree(useCases), [useCases]);
+  const roots = [...tree.children.values()].sort((a, b) => a.name.localeCompare(b.name));
+  if (useCases.length === 0) {
+    return (
+      <div style={{ padding: 14, fontSize: 12, color: GLASS.textMuted }}>
+        Brak use-case'ów. Dodaj <code>packages/&lt;pkg&gt;/use-cases/**/*.mdx</code>.
+      </div>
+    );
+  }
+  return (
+    <div style={{ padding: 6 }}>
+      {roots.map((r) => (
+        <NodeRow key={r.path} node={r} depth={0} selectedId={selectedId} onSelect={onSelect} />
+      ))}
+    </div>
+  );
+}

package/src/app/usecase-view.tsx

@@ -0,0 +1,173 @@
+/**
+ * Use-case mode: folder tree | MDX prose | data-flow diagram.
+ *
+ * Selecting a use case fetches its raw MDX; rendering collects `<Arc>` refs (one
+ * per occurrence, document order). The model builds a horizontal backbone of
+ * steps + connectors; per-step badges expand into left/right dependency columns.
+ * Hovering a chip highlights its step node and vice-versa.
+ */
+
+import {
+  Background,
+  Controls,
+  MiniMap,
+  ReactFlow,
+  type Node,
+} from "@xyflow/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import type { MapElement, MapJson, UseCaseEntry } from "../types";
+import { buildUseCaseModel } from "./usecase-model";
+import { layoutUseCaseModel } from "./usecase-layout";
+import { nodeTypes } from "./nodes";
+import { UseCaseTree } from "./usecase-tree";
+import { MdxView } from "./mdx-view";
+import { ELEMENT_COLOR, GLASS } from "./theme";
+import {
+  ExpandContext,
+  FocusContext,
+  MapDataContext,
+  type ArcRegEntry,
+} from "./contexts";
+
+function elementIdOf(n: Node): string | undefined {
+  const d = n.data as any;
+  return d?.step?.element?.id ?? d?.element?.id;
+}
+
+export function UseCaseView({ map, useCases }: { map: MapJson; useCases: UseCaseEntry[] }) {
+  const [selectedId, setSelectedId] = useState<string | null>(useCases[0]?.id ?? null);
+  const [mdx, setMdx] = useState<string>("");
+  const [refs, setRefs] = useState<ArcRegEntry[]>([]);
+  const [expanded, setExpanded] = useState<Record<string, string[]>>({});
+  const [focusNodeId, setFocusNodeId] = useState<string | null>(null);
+  const [scrollToKey, setScrollToKey] = useState<string | null>(null);
+
+  const proseRef = useRef<HTMLDivElement>(null);
+
+  // Auto-select the first use case once the list loads (list arrives async).
+  useEffect(() => {
+    if (!selectedId && useCases.length) setSelectedId(useCases[0].id);
+  }, [useCases, selectedId]);
+
+  // Fetch raw MDX on selection.
+  useEffect(() => {
+    if (!selectedId) return;
+    setRefs([]);
+    setExpanded({});
+    fetch(`/api/use-cases/raw?id=${encodeURIComponent(selectedId)}`)
+      .then((r) => (r.ok ? r.text() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then(setMdx)
+      .catch((e) => setMdx(`# Błąd\n\nNie udało się wczytać: ${String(e)}`));
+  }, [selectedId]);
+
+  // Model from the ordered occurrences (no dedup).
+  const model = useMemo(
+    () =>
+      buildUseCaseModel({
+        map,
+        occurrences: refs.map((r) => ({ occId: r.id, ref: r.ref, label: r.label, path: r.path })),
+      }),
+    [map, refs],
+  );
+
+  const layout = useMemo(
+    () => layoutUseCaseModel({ model, map, expanded: expanded as Record<string, any> }),
+    [model, map, expanded],
+  );
+
+  const toggle = useMemo(
+    () => (occId: string, relKind: string) =>
+      setExpanded((prev) => {
+        const cur = prev[occId] ?? [];
+        const next = cur.includes(relKind) ? cur.filter((k) => k !== relKind) : [...cur, relKind];
+        return { ...prev, [occId]: next };
+      }),
+    [],
+  );
+
+  // occId step click -> scroll prose to its chip.
+  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]);
+
+  // Highlighting is done inside the node components via FocusContext, so the
+  // `nodes` array identity stays stable on hover (no re-render churn / flicker).
+  const nodes = layout.nodes;
+
+  // Prose scroll on node click.
+  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 expandState = useMemo(() => ({ expanded, toggle }), [expanded, toggle]);
+
+  return (
+    <MapDataContext.Provider value={map}>
+      <FocusContext.Provider value={focusState}>
+        <ExpandContext.Provider value={expandState}>
+          <div style={{ display: "grid", gridTemplateColumns: "240px minmax(360px, 1fr) minmax(460px, 1.2fr)", height: "100%" }}>
+            {/* Tree */}
+            <div style={{ borderRight: `1px solid ${GLASS.border}`, overflow: "auto", background: GLASS.card }}>
+              <UseCaseTree useCases={useCases} selectedId={selectedId} onSelect={setSelectedId} />
+            </div>
+
+            {/* Prose */}
+            <div ref={proseRef} style={{ overflow: "auto", padding: "24px 28px", borderRight: `1px solid ${GLASS.border}` }}>
+              {selectedId ? (
+                <MdxView key={selectedId} mdx={mdx} onRefs={setRefs} />
+              ) : (
+                <div style={{ color: GLASS.textMuted }}>Wybierz use-case z drzewa po lewej.</div>
+              )}
+            </div>
+
+            {/* Diagram */}
+            <div style={{ position: "relative" }}>
+              <ReactFlow
+                key={selectedId ?? "none"}
+                nodes={nodes}
+                edges={layout.edges}
+                nodeTypes={nodeTypes}
+                nodesDraggable={false}
+                onNodeMouseEnter={(_, n) => {
+                  const id = elementIdOf(n);
+                  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="#c9b8e8" gap={26} size={1.5} />
+                <Controls />
+                <MiniMap
+                  pannable
+                  zoomable
+                  nodeColor={(n) => {
+                    const d = n.data as any;
+                    const k = d?.step?.element?.kind ?? d?.element?.kind;
+                    return (k && ELEMENT_COLOR[k as MapElement["kind"]]) || (d?.step && !d.step.exists ? "#e11d48" : "#64748b");
+                  }}
+                  style={{ background: "rgba(255,255,255,0.6)", border: `1px solid ${GLASS.border}`, borderRadius: 12 }}
+                />
+              </ReactFlow>
+            </div>
+          </div>
+        </ExpandContext.Provider>
+      </FocusContext.Provider>
+    </MapDataContext.Provider>
+  );
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @arcote.tech/arc-map — interactive map of Arc context spaces, elements,
+ * event-flow and React useScope usages. Server-side entry; the browser app
+ * lives under `./app`.
+ */
+
+export { startMapServer } from "./server";
+export type { MapServer, MapServerOptions } from "./server";
+export { buildMapJson } from "./mapper";
+export type { BuildMapInput, ModuleInfo } from "./mapper";
+export { scanScopeUsages } from "./scan";
+export type { ScanInput, ScanResult } from "./scan";
+export { buildModuleIndex } from "./module-index";
+export { discoverUseCases, parseFrontmatter } from "./use-cases/discover";
+export type { UseCasePackage, DiscoveredUseCase } from "./use-cases/discover";
+export { resolveRef } from "./refs";
+export type { ArcRefProps, ResolvedRef, ArcRefKind } from "./refs";
+export * from "./types";