@arcote.tech/arc-map 0.7.27 → 0.7.29

package/src/module-index.ts

@@ -11,7 +11,7 @@ import {
 } from "@arcote.tech/platform";
 import type { ModuleInfo } from "./mapper";
 import type { MapElement } from "./types";
-import { normalizePagePath } from "./refs";
+import { normalizePagePath } from "@arcote.tech/arc-process";
 
 export function buildModuleIndex(): Map<string, ModuleInfo> {
   const index = new Map<string, ModuleInfo>();

package/src/scan.ts

@@ -22,7 +22,7 @@ import {
   type SourceFile,
 } from "ts-morph";
 import type { MapComponent, MapComponentEdge } from "./types";
-import { normalizePagePath } from "./refs";
+import { normalizePagePath } from "@arcote.tech/arc-process";
 
 export interface ScanInput {
   /** Absolute glob(s) or file paths of TSX sources to scan. */

package/src/server.ts

@@ -12,11 +12,13 @@
  * module index, and the scan globs.
  */
 
-import { readFileSync } from "node:fs";
+import { readFileSync, realpathSync } from "node:fs";
+import { resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import type { ArcContextAny } from "@arcote.tech/arc";
 import { buildModuleIndex, buildPageNodes } from "./module-index";
 import { buildMapJson, type ModuleInfo } from "./mapper";
+import { loadCatalog } from "./catalog";
 import { scanScopeUsages, type ScanInput } from "./scan";
 import { discoverUseCases, type UseCasePackage } from "./use-cases/discover";
 import type { MapJson, UseCaseEntry } from "./types";
@@ -123,6 +125,18 @@ export async function startMapServer(opts: MapServerOptions): Promise<MapServer>
     return scanCache;
   };
 
+  // Cached generic catalog (arc.catalog.yml root + pakiety) — reload on notify.
+  let catalogCache: ReturnType<typeof loadCatalog> | null = null;
+  const getCatalog = () => {
+    if (!catalogCache) {
+      catalogCache = loadCatalog(
+        opts.scan.workspaceRoot,
+        (opts.useCasePackages ?? []).map((p) => p.path),
+      );
+    }
+    return catalogCache;
+  };
+
   const buildPayload = (): MapJson => {
     const context = opts.getContext();
     if (!context) {
@@ -136,6 +150,7 @@ export async function startMapServer(opts: MapServerOptions): Promise<MapServer>
       componentEdges: scan.componentEdges,
       components: scan.components,
       pages: buildPageNodes(),
+      catalog: getCatalog(),
       generatedAt: new Date().toISOString(),
     });
   };
@@ -151,6 +166,7 @@ export async function startMapServer(opts: MapServerOptions): Promise<MapServer>
   const notifyReload = () => {
     scanCache = null;
     useCaseCache = null;
+    catalogCache = null;
     for (const c of sseClients) {
       try {
         c.enqueue("data: reload\n\n");
@@ -211,6 +227,37 @@ export async function startMapServer(opts: MapServerOptions): Promise<MapServer>
           headers: { ...CORS, "Content-Type": "text/markdown; charset=utf-8", "Cache-Control": "no-cache" },
         });
       }
+      case "/api/source": {
+        // Kod źródłowy elementu do drawera. Ścieżka może być absolutna
+        // (z getSourceLocation) lub względna wobec workspace root — zawsze
+        // MUSI wskazywać plik WEWNĄTRZ workspace (guard path-traversal,
+        // sprawdzany na realpath, więc symlinki poza root też odpadają).
+        const file = url.searchParams.get("file");
+        if (!file) return new Response("Bad Request", { status: 400, headers: CORS });
+        const rootReal = realpathSync(opts.scan.workspaceRoot);
+        let abs: string;
+        try {
+          abs = realpathSync(resolve(rootReal, file));
+        } catch {
+          return new Response("Not Found", { status: 404, headers: CORS });
+        }
+        if (abs !== rootReal && !abs.startsWith(rootReal + sep)) {
+          return new Response("Forbidden", { status: 403, headers: CORS });
+        }
+        let text: string;
+        try {
+          text = readFileSync(abs, "utf-8");
+        } catch (e) {
+          return new Response((e as Error).message, { status: 500, headers: CORS });
+        }
+        return new Response(text, {
+          headers: {
+            ...CORS,
+            "Content-Type": "text/plain; charset=utf-8",
+            "Cache-Control": "no-cache",
+          },
+        });
+      }
       case "/api/reload-stream": {
         const stream = new ReadableStream({
           start(controller) {

package/src/types.ts

@@ -14,6 +14,7 @@ export type ElementKind =
   | "listener"
   | "route"
   | "page"
+  | "tool"
   | "unknown";
 
 /** Kind of a domain edge between two context elements. */
@@ -38,6 +39,36 @@ export interface MapElementMethod {
   mutationDeps?: string[];
 }
 
+/**
+ * Wpis generycznego katalogu deklaracji (`arc.catalog.yml`) — persony,
+ * metryki i przyszłe rodzaje przypięć. `kind` = klucz najwyższego poziomu
+ * YAML-a, `data` = pełny wpis (name, label?, color?, …dowolne).
+ */
+export interface CatalogEntry {
+  kind: string;
+  name: string;
+  data: Record<string, unknown>;
+}
+
+/** Lokalizacja źródła deklaracji elementu (z `getSourceLocation()`). */
+export interface SourceLocation {
+  file: string;
+  line?: number;
+}
+
+/** Kontekst (przestrzeń) w drzewie hierarchii — do zwijania na diagramach. */
+export interface MapContextInfo {
+  /** Stabilne id kontekstu (core `ArcContext.id`). */
+  id: string;
+  /** Ścieżka id od korzenia do tego kontekstu (włącznie). */
+  path: string[];
+  name?: string;
+  title?: string;
+  description?: string;
+  /** Czy kontekst deklaruje komponent-wizytówkę (sam komponent nie przechodzi JSON-em). */
+  hasCard?: boolean;
+}
+
 /** A single context element node. */
 export interface MapElement {
   /** Element name — unique within the runtime context. */
@@ -46,6 +77,10 @@ export interface MapElement {
   kind: ElementKind;
   /** Space (context) this element belongs to. */
   spaceId: string;
+  /** Ścieżka kontekstów-przodków (core `__contextPath`), gdy element ją ma. */
+  contextPath?: string[];
+  /** Plik+linia deklaracji elementu (core `getSourceLocation()`), gdy znane. */
+  source?: SourceLocation;
   /** Owning `module()` id/name, when the element was attached to a module. */
   moduleId?: string;
   moduleName?: string;
@@ -122,6 +157,10 @@ export interface MapJson {
   edges: MapEdge[];
   components: MapComponent[];
   componentEdges: MapComponentEdge[];
+  /** Drzewo kontekstów (hierarchia z core) — do zwijania na diagramach. */
+  contexts?: MapContextInfo[];
+  /** Generyczny katalog deklaracji (arc.catalog.yml) — persony, metryki, …. */
+  catalog?: CatalogEntry[];
   /** ISO timestamp stamped by the server when the payload was built. */
   generatedAt?: string;
 }

package/tests/catalog.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { CATALOG_FILE, loadCatalog, parseCatalogYaml } from "../src/catalog";
+
+describe("parseCatalogYaml", () => {
+  test("klucze najwyższego poziomu = rodzaje; wpisy wymagają name", () => {
+    const entries = parseCatalogYaml(
+      [
+        "personas:",
+        "  - name: prospekt",
+        "    label: Prospekt",
+        '    color: "#0e7490"',
+        "  - label: bez-name (pomijany)",
+        "metrics:",
+        "  - name: leads.submitted",
+        "    label: Zgłoszone leady",
+        "nieLista: 42",
+      ].join("\n"),
+    );
+    expect(entries).toEqual([
+      {
+        kind: "personas",
+        name: "prospekt",
+        data: { name: "prospekt", label: "Prospekt", color: "#0e7490" },
+      },
+      {
+        kind: "metrics",
+        name: "leads.submitted",
+        data: { name: "leads.submitted", label: "Zgłoszone leady" },
+      },
+    ]);
+  });
+
+  test("pusty / nie-obiektowy dokument → pusty katalog", () => {
+    expect(parseCatalogYaml("")).toEqual([]);
+    expect(parseCatalogYaml("- lista")).toEqual([]);
+  });
+});
+
+describe("loadCatalog", () => {
+  test("scala root + pakiety z pierwszeństwem pakietu", () => {
+    const root = mkdtempSync(join(tmpdir(), "arc-catalog-"));
+    const pkgA = join(root, "packages", "a");
+    mkdirSync(pkgA, { recursive: true });
+    writeFileSync(
+      join(root, CATALOG_FILE),
+      "personas:\n  - name: prospekt\n    label: Root\n  - name: admin\n    label: Admin\n",
+    );
+    writeFileSync(
+      join(pkgA, CATALOG_FILE),
+      "personas:\n  - name: prospekt\n    label: Pakiet\nmetrics:\n  - name: m1\n",
+    );
+
+    const entries = loadCatalog(root, [pkgA]);
+    const byKey = new Map(entries.map((e) => [`${e.kind} ${e.name}`, e]));
+    expect(byKey.get("personas prospekt")!.data.label).toBe("Pakiet"); // pakiet wygrywa
+    expect(byKey.get("personas admin")!.data.label).toBe("Admin");
+    expect(byKey.has("metrics m1")).toBe(true);
+  });
+
+  test("brak plików = pusty katalog", () => {
+    const root = mkdtempSync(join(tmpdir(), "arc-catalog-empty-"));
+    expect(loadCatalog(root, [join(root, "nope")])).toEqual([]);
+  });
+});

package/src/app/arc.tsx

@@ -1,92 +0,0 @@
-/**
- * `<Arc>` — inline reference to an Arc element inside use-case MDX prose.
- *
- * Renders a clickable chip and registers its resolved reference (in document
- * order) so the scoped diagram knows which elements to show. Validates against
- * the loaded map data: an unresolved reference gets a red border.
- */
-
-import { useId, type ReactNode } from "react";
-import { resolveRef, type ArcRefProps } from "../refs";
-import { ELEMENT_COLOR } from "./theme";
-import { useArcRegister, useFocus, useMapData, useStructure } from "./contexts";
-
-type ArcProps = ArcRefProps & { children?: ReactNode };
-
-function textOf(node: ReactNode): string {
-  if (node == null || node === false) return "";
-  if (typeof node === "string" || typeof node === "number") return String(node);
-  if (Array.isArray(node)) return node.map(textOf).join("");
-  if (typeof node === "object" && "props" in (node as any))
-    return textOf((node as any).props?.children);
-  return "";
-}
-
-export function Arc(props: ArcProps) {
-  const { children, ...refProps } = props;
-  const id = useId();
-  const register = useArcRegister();
-  const map = useMapData();
-  const focus = useFocus();
-  const { path } = useStructure();
-
-  const ref = resolveRef(refProps as ArcRefProps);
-  const label = textOf(children);
-
-  // Register during render — idempotent (keyed by id), survives StrictMode.
-  register?.({ id, ref, label, props: refProps as ArcRefProps, path });
-
-  const resolved = !!ref && !!map && map.elements.some((e) => e.id === ref.nodeId);
-  const active = !!ref && focus.focusNodeId === ref.nodeId;
-  const color = resolved && ref ? mapColor(ref, map!) : "#e11d48";
-
-  return (
-    <span
-      data-arc-id={id}
-      data-arc-key={ref?.key ?? ""}
-      data-arc-node={ref?.nodeId ?? ""}
-      onMouseEnter={() => ref && resolved && focus.setFocusNodeId(ref.nodeId)}
-      onMouseLeave={() => focus.setFocusNodeId(null)}
-      title={
-        resolved
-          ? ref?.method
-            ? `${ref.nodeId}.${ref.method.name} (${ref.method.kind})`
-            : ref?.nodeId
-          : `Nieznana referencja: ${ref?.nodeId ?? JSON.stringify(refProps)}`
-      }
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        padding: "1px 8px",
-        margin: "0 1px",
-        borderRadius: 8,
-        border: `1.5px solid ${resolved ? color : "#e11d48"}`,
-        background: resolved ? tint(color, 0.1) : "rgba(225,29,72,0.08)",
-        color: "#2a173f",
-        fontWeight: 600,
-        fontSize: "0.92em",
-        cursor: "pointer",
-        boxShadow: active ? `0 0 0 2px ${color}` : "none",
-        whiteSpace: "nowrap",
-      }}
-    >
-      <span style={{ width: 7, height: 7, borderRadius: 2, background: resolved ? color : "#e11d48" }} />
-      {label || ref?.nodeId || "?"}
-      {ref?.method ? <span style={{ color: "#6b5b86", fontWeight: 500 }}>·{ref.method.name}</span> : null}
-    </span>
-  );
-}
-
-function mapColor(ref: ReturnType<typeof resolveRef>, map: NonNullable<ReturnType<typeof useMapData>>): string {
-  const node = ref ? map.elements.find((e) => e.id === ref.nodeId) : undefined;
-  return (node && ELEMENT_COLOR[node.kind]) || "#7c3aed";
-}
-
-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/app/contexts.tsx

@@ -1,72 +0,0 @@
-/** Shared React contexts for the use-case view: map data, focus, ref collection. */
-
-import { createContext, useContext } from "react";
-import type { MapJson } from "../types";
-import type { ResolvedRef, ArcRefProps } from "../refs";
-
-/** The full graph data (from /api/map), used for validation + subgraph. */
-export const MapDataContext = createContext<MapJson | null>(null);
-export const useMapData = () => useContext(MapDataContext);
-
-/**
- * Bidirectional highlight between `<Arc>` chips and diagram nodes. `focusNodeId`
- * is the element id currently hovered (in prose or graph); `scrollKey` is the
- * ref key a node click wants the prose to scroll to.
- */
-export interface FocusState {
-  focusNodeId: string | null;
-  setFocusNodeId: (id: string | null) => void;
-  scrollToKey: string | null;
-  setScrollToKey: (key: string | null) => void;
-}
-export const FocusContext = createContext<FocusState>({
-  focusNodeId: null,
-  setFocusNodeId: () => {},
-  scrollToKey: null,
-  setScrollToKey: () => {},
-});
-export const useFocus = () => useContext(FocusContext);
-
-/** A structural wrapper segment on the path from MDX root to an `<Arc>`. */
-export interface PathSeg {
-  type: "parallel" | "branch" | "lane" | "step";
-  id: string;
-  /** Lane index of this child within a parallel/branch. */
-  laneIndex?: number;
-  title?: string;
-  /** Branch lanes are alternatives (XOR). */
-  alt?: boolean;
-}
-
-/** Structural context: the wrapper path the current subtree sits in. */
-export const StructureContext = createContext<{ path: PathSeg[] }>({ path: [] });
-export const useStructure = () => useContext(StructureContext);
-
-/** One collected `<Arc>` reference (in document order). */
-export interface ArcRegEntry {
-  /** Unique render-instance id (also the chip's DOM `data-arc-id`). */
-  id: string;
-  ref: ResolvedRef | null;
-  label: string;
-  props: ArcRefProps;
-  /** Structural path (parallel/branch/lane/step) the ref is nested in. */
-  path: PathSeg[];
-}
-
-/** Registration channel filled by `<Arc>` during render. */
-export const ArcRegisterContext = createContext<
-  ((entry: ArcRegEntry) => void) | null
->(null);
-export const useArcRegister = () => useContext(ArcRegisterContext);
-
-/** Badge expand/collapse state for the use-case diagram (per step occurrence). */
-export interface ExpandState {
-  /** occId -> expanded relation kinds. */
-  expanded: Record<string, string[]>;
-  toggle: (occId: string, relKind: string) => void;
-}
-export const ExpandContext = createContext<ExpandState>({
-  expanded: {},
-  toggle: () => {},
-});
-export const useExpand = () => useContext(ExpandContext);

package/src/app/mdx-view.tsx

@@ -1,74 +0,0 @@
-/**
- * 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>
-  );
-}

package/src/app/ref-context.tsx

@@ -1,49 +0,0 @@
-/**
- * ArcRefsProvider — collects `<Arc>` registrations rendered inside it and
- * reports them to the parent in DOCUMENT ORDER (read from the DOM, so nesting
- * and ordering are exact). Remount per use-case (via `key`) gives a fresh
- * registry. Guarded against update loops by comparing the ordered key list.
- */
-
-import { useCallback, useEffect, useRef, type ReactNode } from "react";
-import { ArcRegisterContext, type ArcRegEntry } from "./contexts";
-
-export function ArcRefsProvider({
-  children,
-  onRefs,
-}: {
-  children: ReactNode;
-  onRefs: (refs: ArcRegEntry[]) => void;
-}) {
-  const registry = useRef(new Map<string, ArcRegEntry>());
-  const containerRef = useRef<HTMLDivElement>(null);
-  const lastSig = useRef<string>("");
-
-  const register = useCallback((entry: ArcRegEntry) => {
-    registry.current.set(entry.id, entry);
-  }, []);
-
-  // After every render, read the chips in DOM order and lift the list up —
-  // but only when the ordered set actually changed (prevents render loops).
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const ordered: ArcRegEntry[] = [];
-    el.querySelectorAll<HTMLElement>("[data-arc-id]").forEach((node) => {
-      const e = registry.current.get(node.dataset.arcId ?? "");
-      if (e) ordered.push(e);
-    });
-    const sig = ordered.map((e) => e.ref?.key ?? `?${e.id}`).join("|");
-    if (sig === lastSig.current) return;
-    lastSig.current = sig;
-    onRefs(ordered);
-  });
-
-  return (
-    <div ref={containerRef}>
-      <ArcRegisterContext.Provider value={register}>
-        {children}
-      </ArcRegisterContext.Provider>
-    </div>
-  );
-}

package/src/app/structure.tsx

@@ -1,95 +0,0 @@
-/**
- * Structural MDX components for use-case flows. They render a light visual cue
- * in the prose AND give each nested `<Arc>` a structural path (via context),
- * which the model turns into depth (time) × lane (parallel / branch).
- *
- *   <Parallel>            — children run concurrently (AND); same depth, lanes
- *   <Branch><Lane>…</Lane> — alternative paths (XOR); branch lanes
- *   <Step title="…">      — a named phase grouping a sub-sequence
- */
-
-import { Children, isValidElement, useId, type ReactNode } from "react";
-import { StructureContext, useStructure, type PathSeg } from "./contexts";
-import { GLASS } from "./theme";
-
-/** Wrap each element child with a structural segment + lane index. */
-function mapLanes(children: ReactNode, base: PathSeg[], seg: (i: number) => PathSeg): ReactNode {
-  let i = 0;
-  return Children.map(children, (child) => {
-    if (!isValidElement(child)) return child;
-    const s = seg(i++);
-    return <StructureContext.Provider value={{ path: [...base, s] }}>{child}</StructureContext.Provider>;
-  });
-}
-
-const wrapStyle: React.CSSProperties = {
-  display: "block",
-  borderLeft: `3px solid ${GLASS.border}`,
-  paddingLeft: 12,
-  margin: "8px 0",
-};
-
-const tagStyle = (color: string): React.CSSProperties => ({
-  display: "inline-block",
-  fontSize: 10,
-  fontWeight: 700,
-  textTransform: "uppercase",
-  letterSpacing: 0.5,
-  color,
-  background: "rgba(124,58,237,0.08)",
-  borderRadius: 5,
-  padding: "1px 7px",
-  marginBottom: 4,
-});
-
-export function Parallel({ children }: { children?: ReactNode }) {
-  const id = useId();
-  const { path } = useStructure();
-  return (
-    <span style={{ ...wrapStyle, borderLeftColor: "#7c3aed" }}>
-      <span style={tagStyle("#7c3aed")}>∥ równolegle</span>
-      {mapLanes(children, path, (i) => ({ type: "parallel", id, laneIndex: i }))}
-    </span>
-  );
-}
-
-export function Branch({ children }: { children?: ReactNode }) {
-  const id = useId();
-  const { path } = useStructure();
-  return (
-    <span style={{ ...wrapStyle, borderLeftColor: "#e64980" }}>
-      <span style={tagStyle("#e64980")}>⋔ alternatywnie</span>
-      {mapLanes(children, path, (i) => ({ type: "branch", id, laneIndex: i }))}
-    </span>
-  );
-}
-
-export function Lane({ title, children }: { title?: string; children?: ReactNode }) {
-  const id = useId();
-  const { path } = useStructure();
-  return (
-    <StructureContext.Provider value={{ path: [...path, { type: "lane", id, title, alt: true }] }}>
-      <span style={{ display: "block", margin: "4px 0" }}>
-        {title ? (
-          <span style={{ fontSize: 11, fontWeight: 700, color: "#e64980", marginRight: 6 }}>
-            {title}:
-          </span>
-        ) : null}
-        {children}
-      </span>
-    </StructureContext.Provider>
-  );
-}
-
-export function Step({ title, children }: { title?: string; children?: ReactNode }) {
-  const id = useId();
-  const { path } = useStructure();
-  return (
-    <StructureContext.Provider value={{ path: [...path, { type: "step", id, title }] }}>
-      <span style={{ ...wrapStyle, borderLeftColor: "#1c7ed6" }}>
-        {title ? <span style={tagStyle("#1c7ed6")}>▸ {title}</span> : null}
-        {children}
-      </span>
-    </StructureContext.Provider>
-  );
-}