@arcote.tech/arc-process 0.7.28

package/src/layout/measure.ts

@@ -0,0 +1,260 @@
+/**
+ * Pass 1 layoutu — pomiar rozwinięć.
+ *
+ * Dla każdego widocznego kroku budowane jest rekurencyjne drzewo rozwinięć
+ * (grupy relacji otwarte w stanie widoku, w 8 kierunkach) i mierzony
+ * bounding-box w 4 pasmach: W/E (szerokości) i N/S (wysokości). Skosy
+ * (NE/SE/SW/NW) to kolumny przy pasmach E/W przesunięte PONAD/POD nod —
+ * liczą się do pasma poziomego (szerokość kolumny) i pionowego (wysokość).
+ *
+ * Pasma zasilają track sizing w pass 2 — kolumny (depth) i wiersze (lane)
+ * rosną tak, by rozwinięcia nigdy nie nachodziły na sąsiednie tory.
+ */
+
+import {
+  attachmentsFor,
+  type RelationIndex,
+} from "../model/build";
+import type {
+  AttachmentGroupSpec,
+  ProcessProfile,
+} from "../model/profile";
+import type {
+  Direction,
+  ProcessNode,
+  ProcessStep,
+} from "../model/types";
+import {
+  childKey,
+  rootKey,
+  type ExpansionKey,
+  type ProcessViewState,
+} from "../state/view-state";
+
+// --- Wymiary (parytet z dotychczasowym usecase-layout) ----------------------
+
+export const STEP_W = 215;
+export const STEP_H = 110;
+export const CARD_W = 178;
+export const CARD_H = 48;
+export const NOTE_W = 178;
+export const NOTE_H = 54;
+export const COL_GAP_X = 250;
+export const CARD_GAP = 14;
+export const DIAG_GAP_Y = 42;
+export const MARGIN = 80;
+export const LANE_MARGIN = 120;
+export const PAD = 60;
+
+/** Maksymalna głębokość rekurencji rozwinięć (bezpiecznik). */
+export const MAX_EXPANSION_DEPTH = 6;
+
+/** Grupa-pseudo notatek (zawsze widoczna, nie podlega toggle). */
+export const NOTES_GROUP = "notes";
+
+// --- Drzewo rozwinięć --------------------------------------------------------
+
+export interface ExpansionItem {
+  /** Klucz rozwinięcia TEGO węzła (adres w stanie widoku). */
+  key: ExpansionKey;
+  node: ProcessNode;
+  /** Grupy rozwinięte na tym węźle. */
+  groups: ExpansionGroup[];
+  /** Dostępne doczepienia węzła (do badge'y/toggli na karcie). */
+  attachments: Partial<Record<string, string[]>>;
+  /** Wymiary karty. */
+  w: number;
+  h: number;
+  /** Pasma rozwinięć wokół karty. */
+  bands: Bands;
+}
+
+export interface ExpansionGroup {
+  group: string;
+  side: Direction;
+  spec: AttachmentGroupSpec;
+  items: ExpansionItem[];
+  /** Zmierzone wymiary slotu grupy (kolumna/wiersz z rekurencją). */
+  slotW: number;
+  slotH: number;
+}
+
+export interface Bands {
+  W: number;
+  E: number;
+  N: number;
+  S: number;
+}
+
+export const ZERO_BANDS: Bands = { W: 0, E: 0, N: 0, S: 0 };
+
+export interface MeasuredStep {
+  step: ProcessStep;
+  key: ExpansionKey;
+  groups: ExpansionGroup[];
+  bands: Bands;
+}
+
+export interface MeasureInput {
+  steps: ProcessStep[];
+  index: RelationIndex;
+  profile: ProcessProfile;
+  state: ProcessViewState;
+  /** Id nodów widocznych na osi (wykluczane z rozwinięć). */
+  visible: ReadonlySet<string>;
+}
+
+/** Spec grupy notatek — notatki wchodzą krawędzią "kropkowaną" do kroku. */
+const NOTES_SPEC: AttachmentGroupSpec = {
+  relations: [],
+  direction: "out",
+  defaultSide: "N",
+  color: "#eab308",
+  intoNode: false,
+  label: "notatka",
+};
+
+function isColumn(side: Direction): boolean {
+  return side !== "N" && side !== "S";
+}
+
+/** Zmierz slot grupy: kolumna (W/E/skosy) lub wiersz (N/S) z rekurencją. */
+function measureGroup(items: ExpansionItem[], side: Direction): { w: number; h: number } {
+  if (!items.length) return { w: 0, h: 0 };
+  if (isColumn(side)) {
+    // Kolumna: szerokość = najszerszy element z jego pasmami; wysokość = suma.
+    const w = Math.max(...items.map((it) => it.bands.W + it.w + it.bands.E));
+    const h =
+      items.reduce((acc, it) => acc + it.bands.N + it.h + it.bands.S, 0) +
+      (items.length - 1) * CARD_GAP;
+    return { w, h };
+  }
+  // Wiersz: wysokość = najwyższy element z pasmami; szerokość = suma.
+  const h = Math.max(...items.map((it) => it.bands.N + it.h + it.bands.S));
+  const w =
+    items.reduce((acc, it) => acc + it.bands.W + it.w + it.bands.E, 0) +
+    (items.length - 1) * CARD_GAP;
+  return { w, h };
+}
+
+/** Pasma węzła z jego zmierzonych grup. */
+function bandsOf(groups: ExpansionGroup[], nodeW: number, nodeH: number): Bands {
+  const bands: Bands = { W: 0, E: 0, N: 0, S: 0 };
+  for (const g of groups) {
+    const dx = g.side.includes("W") ? -1 : g.side.includes("E") ? 1 : 0;
+    const dy = g.side.includes("N") ? -1 : g.side.includes("S") ? 1 : 0;
+    if (dx !== 0) {
+      // Kolumna przy E/W: pasmo poziome = odstęp + szerokość slotu.
+      const w = COL_GAP_X - nodeW / 2 + g.slotW;
+      if (dx < 0) bands.W = Math.max(bands.W, w);
+      else bands.E = Math.max(bands.E, w);
+      if (dy !== 0) {
+        // Skos: kolumna w całości nad/pod nodem.
+        const h = DIAG_GAP_Y + g.slotH;
+        if (dy < 0) bands.N = Math.max(bands.N, h);
+        else bands.S = Math.max(bands.S, h);
+      } else {
+        // Czysta kolumna E/W wystaje pionowo poza nod o połowę nadmiaru.
+        const overflow = Math.max(0, (g.slotH - nodeH) / 2);
+        bands.N = Math.max(bands.N, overflow);
+        bands.S = Math.max(bands.S, overflow);
+      }
+    } else if (dy !== 0) {
+      // Wiersz N/S.
+      const h = DIAG_GAP_Y + g.slotH;
+      if (dy < 0) bands.N = Math.max(bands.N, h);
+      else bands.S = Math.max(bands.S, h);
+      const overflow = Math.max(0, (g.slotW - nodeW) / 2);
+      bands.W = Math.max(bands.W, overflow);
+      bands.E = Math.max(bands.E, overflow);
+    }
+  }
+  return bands;
+}
+
+/** Zbuduj rekurencyjnie rozwinięcia węzła (karteczki lub kroku). */
+function buildGroups(
+  key: ExpansionKey,
+  node: ProcessNode,
+  attachments: Partial<Record<string, string[]>>,
+  sides: Partial<Record<string, Direction>> | undefined,
+  input: MeasureInput,
+  guard: number,
+): ExpansionGroup[] {
+  if (guard >= MAX_EXPANSION_DEPTH) return [];
+  const open = input.state.expanded[key] ?? [];
+  const groups: ExpansionGroup[] = [];
+  for (const group of open) {
+    const spec = input.profile.attachmentGroups[group];
+    const ids = attachments[group];
+    if (!spec || !ids?.length) continue;
+    const side = sides?.[group] ?? spec.defaultSide;
+    const items: ExpansionItem[] = [];
+    for (const id of ids) {
+      const child = input.index.nodeById.get(id);
+      if (!child) continue;
+      const ck = childKey(key, group, id);
+      const childAttachments = attachmentsFor(
+        input.index,
+        input.profile,
+        child,
+        undefined,
+        new Set([...input.visible, node.id, id]),
+      );
+      const childGroups = buildGroups(ck, child, childAttachments, undefined, input, guard + 1);
+      const bands = bandsOf(childGroups, CARD_W, CARD_H);
+      items.push({
+        key: ck,
+        node: child,
+        groups: childGroups,
+        attachments: childAttachments,
+        w: CARD_W,
+        h: CARD_H,
+        bands,
+      });
+    }
+    const { w, h } = measureGroup(items, side);
+    groups.push({ group, side, spec, items, slotW: w, slotH: h });
+  }
+  return groups;
+}
+
+/** Zmierz wszystkie kroki: drzewa rozwinięć + pasma (w tym notatki). */
+export function measureSteps(input: MeasureInput): MeasuredStep[] {
+  return input.steps.map((step) => {
+    const key = rootKey(step.occId);
+    const groups: ExpansionGroup[] = [];
+    if (step.exists) {
+      groups.push(
+        ...buildGroups(key, step.node!, step.attachments, step.sides, input, 0),
+      );
+    }
+    // Notatki — zawsze widoczne, pogrupowane po stronie.
+    const bySide = new Map<Direction, typeof step.notes>();
+    for (const n of step.notes) {
+      const list = bySide.get(n.side) ?? [];
+      list.push(n);
+      bySide.set(n.side, list);
+    }
+    for (const [side, notes] of bySide) {
+      const items: ExpansionItem[] = notes.map((n) => ({
+        key: childKey(key, NOTES_GROUP, n.occId),
+        node: {
+          id: `note:${n.occId}`,
+          kind: "note",
+          label: n.text,
+          meta: { title: n.title },
+        },
+        groups: [],
+        attachments: {},
+        w: NOTE_W,
+        h: NOTE_H,
+        bands: ZERO_BANDS,
+      }));
+      const { w, h } = measureGroup(items, side);
+      groups.push({ group: NOTES_GROUP, side, spec: NOTES_SPEC, items, slotW: w, slotH: h });
+    }
+    const bands = bandsOf(groups, STEP_W, STEP_H);
+    return { step, key, groups, bands };
+  });
+}

package/src/mdx/arc.tsx

@@ -0,0 +1,139 @@
+/**
+ * `<Arc>` — inline'owa referencja do noda procesu w prozie MDX.
+ *
+ * Renderuje klikalny chip i rejestruje rozwiązaną referencję (w kolejności
+ * dokumentu), by diagram wiedział, które nody pokazać. Waliduje przeciw
+ * grafowi: nierozwiązana referencja dostaje czerwoną ramkę (TODO design-first).
+ *
+ * Nowe propsy względem arc-map:
+ *  - `context="ai.chat"` — referencja CAŁEGO kontekstu jako kroku (box),
+ *  - `sides={{ mutates: "SE" }}` — override strony doczepienia per grupa,
+ *  - `expand={["mutates"]}` — grupy otwarte na starcie diagramu.
+ */
+
+import { useId, type ReactNode } from "react";
+import { kindColor } from "../model/profile";
+import {
+  CONTEXT_REF_KIND,
+  type Direction,
+  type ResolvedRef,
+} from "../model/types";
+import { resolveContextRef } from "../model/build";
+import { MISSING_COLOR, tint } from "../react/theme";
+import {
+  useFocus,
+  useProcessData,
+  useRegister,
+  useStructure,
+} from "./contexts";
+
+export interface ArcProps {
+  /** Referencja całego kontekstu (kropkowana ścieżka nazw lub id). */
+  context?: string;
+  /** Override strony doczepienia per grupa relacji. */
+  sides?: Partial<Record<string, Direction>>;
+  /** Grupy relacji otwarte na starcie. */
+  expand?: string[];
+  children?: ReactNode;
+  /** Propsy referencyjne profilu (command/event/aggregate/… dla profilu Arc). */
+  [refProp: string]: unknown;
+}
+
+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 unknown as Record<string, unknown>)) {
+    return textOf(
+      (node as unknown as { props?: { children?: ReactNode } }).props?.children,
+    );
+  }
+  return "";
+}
+
+export function Arc(props: ArcProps) {
+  const { children, context, sides, expand, ...refProps } = props;
+  const domId = useId();
+  const register = useRegister();
+  const data = useProcessData();
+  const focus = useFocus();
+  const { path } = useStructure();
+
+  const ref: ResolvedRef | null = context
+    ? { nodeId: context, kind: CONTEXT_REF_KIND, key: `context:${context}` }
+    : (data?.profile.resolveRef(refProps) ?? null);
+  const label = textOf(children);
+
+  // Rejestracja podczas renderu — idempotentna (klucz domId), przeżywa StrictMode.
+  register?.({
+    domId,
+    occurrence: {
+      type: "step",
+      occId: domId,
+      ref,
+      label,
+      path,
+      sides,
+      expand,
+    },
+  });
+
+  const resolvedNode =
+    ref && data
+      ? ref.kind === CONTEXT_REF_KIND
+        ? resolveContextRef(data.graph.contexts ?? [], ref.nodeId)
+        : data.graph.nodes.find((n) => n.id === ref.nodeId)
+      : undefined;
+  const resolved = !!resolvedNode;
+  const focusId =
+    ref?.kind === CONTEXT_REF_KIND && resolvedNode && "id" in resolvedNode
+      ? `ctx:${resolvedNode.id}`
+      : ref?.nodeId;
+  const active = !!focusId && focus.focusNodeId === focusId;
+  const color = resolved
+    ? ref!.kind === CONTEXT_REF_KIND
+      ? (data ? kindColor(data.profile, CONTEXT_REF_KIND) : "#7c3aed")
+      : kindColor(data!.profile, (resolvedNode as { kind: string }).kind)
+    : MISSING_COLOR;
+
+  return (
+    <span
+      data-arc-id={domId}
+      data-arc-key={ref?.key ?? ""}
+      data-arc-node={focusId ?? ""}
+      onMouseEnter={() => resolved && focusId && focus.setFocusNodeId(focusId)}
+      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 ${color}`,
+        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: color }}
+      />
+      {label || ref?.nodeId || "?"}
+      {ref?.method ? (
+        <span style={{ color: "#6b5b86", fontWeight: 500 }}>·{ref.method.name}</span>
+      ) : null}
+    </span>
+  );
+}

package/src/mdx/contexts.tsx

@@ -0,0 +1,57 @@
+/** Wspólne konteksty React widoku procesu: dane, fokus, struktura, rejestracja, stan. */
+
+import { createContext, useContext } from "react";
+import type { ProcessProfile } from "../model/profile";
+import type { Direction, Occurrence, PathSeg, ProcessGraph } from "../model/types";
+import type { ExpansionKey, ProcessViewState } from "../state/view-state";
+
+/** Graf + profil — walidacja referencji i kolory chipów. */
+export interface ProcessData {
+  graph: ProcessGraph;
+  profile: ProcessProfile;
+}
+export const ProcessDataContext = createContext<ProcessData | null>(null);
+export const useProcessData = () => useContext(ProcessDataContext);
+
+/** Dwukierunkowy highlight chip <-> nod diagramu. */
+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);
+
+/** Ścieżka strukturalna bieżącego poddrzewa MDX. */
+export const StructureContext = createContext<{ path: PathSeg[] }>({ path: [] });
+export const useStructure = () => useContext(StructureContext);
+
+/** Wpis rejestracji: wystąpienie + DOM id (kolejność czytana z DOM). */
+export interface RegEntry {
+  domId: string;
+  occurrence: Occurrence;
+}
+export const RegisterContext = createContext<((entry: RegEntry) => void) | null>(null);
+export const useRegister = () => useContext(RegisterContext);
+
+/** Stan widoku + akcje (toggle rozwinięć / zwinięć kontekstów). */
+export interface ViewStateActions {
+  state: ProcessViewState;
+  toggleGroup: (key: ExpansionKey, group: string) => void;
+  toggleContext: (contextId: string) => void;
+}
+export const ViewStateContext = createContext<ViewStateActions>({
+  state: { expanded: {}, collapsedContexts: {} },
+  toggleGroup: () => {},
+  toggleContext: () => {},
+});
+export const useViewState = () => useContext(ViewStateContext);
+
+/** Re-eksport typu dla wygody konsumentów mdx/. */
+export type { Direction };

package/src/mdx/mdx-view.tsx

@@ -0,0 +1,131 @@
+/**
+ * Renderuje dokument MDX procesu w przeglądarce. Kompilacja przez
+ * `@mdx-js/mdx` `evaluate` z wstrzykniętymi komponentami przepływu,
+ * w ArcRefsProvider — wystąpienia zbierane są w kolejności dokumentu.
+ */
+
+import { evaluate } from "@mdx-js/mdx";
+import remarkFrontmatter from "remark-frontmatter";
+import remarkGfm from "remark-gfm";
+import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+import * as runtime from "react/jsx-runtime";
+import type { Occurrence } from "../model/types";
+import { Arc } from "./arc";
+import { Branch, Continue, Entry, Lane, Note, Parallel, Step } from "./structure";
+import { ArcRefsProvider } from "./ref-context";
+import { GLASS } from "../react/theme";
+
+type ElProps = Record<string, unknown> & { children?: ReactNode };
+
+const mdxComponents = {
+  Arc,
+  Parallel,
+  Branch,
+  Lane,
+  Step,
+  Entry,
+  Continue,
+  Note,
+  h1: (p: ElProps) => (
+    <h1 style={{ fontSize: 24, color: GLASS.text, margin: "4px 0 12px" }} {...p} />
+  ),
+  h2: (p: ElProps) => (
+    <h2 style={{ fontSize: 18, color: GLASS.text, margin: "22px 0 8px" }} {...p} />
+  ),
+  h3: (p: ElProps) => (
+    <h3 style={{ fontSize: 15, color: GLASS.text, margin: "16px 0 6px" }} {...p} />
+  ),
+  p: (p: ElProps) => (
+    <p style={{ fontSize: 14, lineHeight: 1.7, color: "#3b2a55", margin: "8px 0" }} {...p} />
+  ),
+  li: (p: ElProps) => (
+    <li style={{ fontSize: 14, lineHeight: 1.7, color: "#3b2a55" }} {...p} />
+  ),
+  code: (p: ElProps) => (
+    <code
+      style={{
+        background: "rgba(124,58,237,0.08)",
+        padding: "1px 5px",
+        borderRadius: 5,
+        fontSize: "0.9em",
+      }}
+      {...p}
+    />
+  ),
+  a: (p: ElProps) => <a style={{ color: "#7c3aed" }} {...p} />,
+};
+
+/** Frontmatter dokumentu procesu (parsowany lekko, bez YAML-parsera). */
+export interface ProcessFrontmatter {
+  title?: string;
+  /** Tryb zwijania kontekstów: "all" (górny rzut, domyślnie) | "none". */
+  collapse?: "all" | "none";
+  /** Nazwa/id kontekstu domowego — jego narracja nie zwija się domyślnie. */
+  context?: string;
+}
+
+export function parseProcessFrontmatter(mdx: string): ProcessFrontmatter {
+  const m = mdx.match(/^---\n([\s\S]*?)\n---/);
+  if (!m) return {};
+  const out: ProcessFrontmatter = {};
+  for (const line of m[1].split("\n")) {
+    const kv = line.match(/^(\w+):\s*(.+)\s*$/);
+    if (!kv) continue;
+    const value = kv[2].replace(/^["']|["']$/g, "");
+    if (kv[1] === "title") out.title = value;
+    else if (kv[1] === "collapse" && (value === "all" || value === "none")) {
+      out.collapse = value;
+    } else if (kv[1] === "context") out.context = value;
+  }
+  return out;
+}
+
+export function MdxView({
+  mdx,
+  onOccurrences,
+}: {
+  mdx: string;
+  onOccurrences: (occurrences: Occurrence[]) => void;
+}) {
+  const [Comp, setComp] = useState<ComponentType<{
+    components: typeof mdxComponents;
+  }> | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setComp(null);
+    setError(null);
+    evaluate(mdx, {
+      ...(runtime as object),
+      remarkPlugins: [remarkFrontmatter, remarkGfm],
+    } as Parameters<typeof evaluate>[1])
+      .then((mod) => {
+        if (!cancelled) {
+          setComp(() => mod.default as ComponentType<{ components: typeof mdxComponents }>);
+        }
+      })
+      .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 onOccurrences={onOccurrences}>
+      <Comp components={mdxComponents} />
+    </ArcRefsProvider>
+  );
+}

package/src/mdx/ref-context.tsx

@@ -0,0 +1,57 @@
+/**
+ * ArcRefsProvider — zbiera rejestracje wystąpień (`<Arc>`, `<Continue>`,
+ * `<Note>`) wyrenderowanych w środku i raportuje je rodzicowi w KOLEJNOŚCI
+ * DOKUMENTU (czytanej z DOM, więc zagnieżdżenia i porządek są dokładne).
+ * Remount per dokument (przez `key`) daje świeży rejestr. Chroniony przed
+ * pętlami update'ów porównaniem sygnatury uporządkowanej listy.
+ */
+
+import { useCallback, useEffect, useRef, type ReactNode } from "react";
+import type { Occurrence } from "../model/types";
+import { RegisterContext, type RegEntry } from "./contexts";
+
+export function ArcRefsProvider({
+  children,
+  onOccurrences,
+}: {
+  children: ReactNode;
+  onOccurrences: (occurrences: Occurrence[]) => void;
+}) {
+  const registry = useRef(new Map<string, RegEntry>());
+  const containerRef = useRef<HTMLDivElement>(null);
+  const lastSig = useRef<string>("");
+
+  const register = useCallback((entry: RegEntry) => {
+    registry.current.set(entry.domId, entry);
+  }, []);
+
+  // Po każdym renderze czytamy znaczniki w kolejności DOM i podnosimy listę —
+  // tylko gdy uporządkowany zestaw faktycznie się zmienił.
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ordered: Occurrence[] = [];
+    el.querySelectorAll<HTMLElement>("[data-arc-id]").forEach((node) => {
+      const e = registry.current.get(node.dataset.arcId ?? "");
+      if (e) ordered.push(e.occurrence);
+    });
+    const sig = ordered
+      .map((o) =>
+        o.type === "step"
+          ? (o.ref?.key ?? `?${o.occId}`)
+          : o.type === "continue"
+            ? `cont:${o.to}`
+            : `note:${o.occId}`,
+      )
+      .join("|");
+    if (sig === lastSig.current) return;
+    lastSig.current = sig;
+    onOccurrences(ordered);
+  });
+
+  return (
+    <div ref={containerRef}>
+      <RegisterContext.Provider value={register}>{children}</RegisterContext.Provider>
+    </div>
+  );
+}