@tldiagram/core-ui 1.91.0 → 1.93.0

package/src/store/useStore.ts

@@ -0,0 +1,285 @@
+import { create } from 'zustand'
+import type { Edge as RFEdge, Node as RFNode } from 'reactflow'
+import type {
+  Connector,
+  IncomingViewConnector,
+  LibraryElement,
+  PlacedElement,
+  ViewConnector,
+  ViewTreeNode,
+} from '../types'
+
+export type StoreSetter<T> = T | ((previous: T) => T)
+
+export type ViewEditorUiState = {
+  viewId: number | null
+  canEdit: boolean
+  isOwner: boolean
+  isFreePlan: boolean
+  snapToGrid: boolean
+  selectedElement: LibraryElement | null
+  selectedConnector: Connector | null
+}
+
+export type ViewContentLinks = {
+  linksMap: Record<number, ViewConnector[]>
+  parentLinksMap: Record<number, ViewConnector[]>
+  incomingLinks: IncomingViewConnector[]
+}
+
+export type ViewContentPayload = ViewContentLinks & {
+  view: ViewTreeNode | null
+  viewElements: PlacedElement[]
+  connectors: Connector[]
+  treeData: ViewTreeNode[]
+}
+
+export type CanvasStoreState = ViewEditorUiState & {
+  view: ViewTreeNode | null | undefined
+  viewElements: PlacedElement[]
+  connectors: Connector[]
+  nodes: RFNode[]
+  edges: RFEdge[]
+  linksMap: Record<number, ViewConnector[]>
+  parentLinksMap: Record<number, ViewConnector[]>
+  incomingLinks: IncomingViewConnector[]
+  treeData: ViewTreeNode[]
+  allElements: LibraryElement[]
+  libraryRefresh: number
+
+  setViewEditorUi: (patch: Partial<ViewEditorUiState>) => void
+  setSnapToGrid: (snapToGrid: boolean) => void
+  setSelectedElement: (selectedElement: LibraryElement | null) => void
+  setSelectedConnector: (selectedConnector: Connector | null) => void
+  setView: (view: ViewTreeNode | null | undefined) => void
+  setViewElements: (next: StoreSetter<PlacedElement[]>) => void
+  setConnectors: (next: StoreSetter<Connector[]>) => void
+  setNodes: (next: StoreSetter<RFNode[]>) => void
+  setEdges: (next: StoreSetter<RFEdge[]>) => void
+  setLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void
+  setParentLinksMap: (next: StoreSetter<Record<number, ViewConnector[]>>) => void
+  setIncomingLinks: (next: StoreSetter<IncomingViewConnector[]>) => void
+  setTreeData: (next: StoreSetter<ViewTreeNode[]>) => void
+  setAllElements: (next: StoreSetter<LibraryElement[]>) => void
+  setLibraryRefresh: (next: StoreSetter<number>) => void
+  resetCanvas: () => void
+  hydrateViewContent: (payload: ViewContentPayload) => void
+  updateElementPosition: (elementId: number, x: number, y: number) => void
+  removeElementPlacement: (elementId: number) => void
+  removeElementEverywhere: (elementId: number) => void
+  mergeSavedElement: (saved: LibraryElement) => void
+  upsertConnector: (connector: Connector) => void
+  replaceConnector: (connector: Connector) => void
+  removeConnector: (connectorId: number) => void
+}
+
+export const emptyViewEditorUiState: ViewEditorUiState = {
+  viewId: null,
+  canEdit: false,
+  isOwner: false,
+  isFreePlan: false,
+  snapToGrid: false,
+  selectedElement: null,
+  selectedConnector: null,
+}
+
+function resolveSetter<T>(next: StoreSetter<T>, previous: T): T {
+  return typeof next === 'function' ? (next as (previous: T) => T)(previous) : next
+}
+
+export function findViewByOwner(nodes: ViewTreeNode[], elementId: number): ViewTreeNode | null {
+  for (const node of nodes) {
+    if (node.owner_element_id !== null && Number(node.owner_element_id) === Number(elementId)) return node
+    const found = findViewByOwner(node.children, elementId)
+    if (found) return found
+  }
+  return null
+}
+
+export function findViewPath(nodes: ViewTreeNode[], targetId: number, path: ViewTreeNode[] = []): ViewTreeNode[] | null {
+  for (const node of nodes) {
+    if (node.id === targetId) return [...path, node]
+    const found = findViewPath(node.children, targetId, [...path, node])
+    if (found) return found
+  }
+  return null
+}
+
+export function buildViewContentLinks(tree: ViewTreeNode[], viewId: number, viewElements: PlacedElement[]): ViewContentLinks {
+  const linksMap: Record<number, ViewConnector[]> = {}
+  const parentLinksMap: Record<number, ViewConnector[]> = {}
+
+  const viewPath = findViewPath(tree, viewId)
+  const parentView = viewPath && viewPath.length > 1 ? viewPath[viewPath.length - 2] : null
+  const currentViewInTree = viewPath ? viewPath[viewPath.length - 1] : null
+
+  const incomingLinks: IncomingViewConnector[] = []
+  if (parentView && currentViewInTree?.owner_element_id) {
+    incomingLinks.push({
+      id: 0,
+      element_id: currentViewInTree.owner_element_id,
+      element_name: 'Parent',
+      from_view_id: parentView.id,
+      from_view_name: parentView.name,
+      to_view_id: viewId,
+    })
+  }
+
+  for (const element of viewElements) {
+    const childView = findViewByOwner(tree, element.element_id)
+    if (childView) {
+      linksMap[element.element_id] = [{
+        id: 0,
+        element_id: element.element_id,
+        from_view_id: viewId,
+        to_view_id: childView.id,
+        to_view_name: childView.name,
+        relation_type: 'child',
+      }]
+    }
+
+    if (parentView) {
+      parentLinksMap[element.element_id] = [{
+        id: 0,
+        element_id: element.element_id,
+        from_view_id: parentView.id,
+        to_view_id: parentView.id,
+        to_view_name: parentView.name,
+        relation_type: 'parent',
+      }]
+    }
+  }
+
+  return { linksMap, parentLinksMap, incomingLinks }
+}
+
+export function selectExistingElementIds(state: Pick<CanvasStoreState, 'viewElements'>): Set<number> {
+  return new Set(state.viewElements.map((element) => element.element_id))
+}
+
+export function selectElementById(state: Pick<CanvasStoreState, 'viewElements'>, elementId: number): PlacedElement | undefined {
+  return state.viewElements.find((element) => element.element_id === elementId)
+}
+
+export function selectConnectorById(state: Pick<CanvasStoreState, 'connectors'>, connectorId: number): Connector | undefined {
+  return state.connectors.find((connector) => connector.id === connectorId)
+}
+
+export function updatePlacedElementPosition(elements: PlacedElement[], elementId: number, x: number, y: number): PlacedElement[] {
+  let changed = false
+  const next = elements.map((element) => {
+    if (element.element_id !== elementId) return element
+    if (element.position_x === x && element.position_y === y) return element
+    changed = true
+    return { ...element, position_x: x, position_y: y }
+  })
+  return changed ? next : elements
+}
+
+export function removePlacedElement(elements: PlacedElement[], elementId: number): PlacedElement[] {
+  return elements.filter((element) => element.element_id !== elementId)
+}
+
+export function mergeSavedElementIntoPlacements(elements: PlacedElement[], saved: LibraryElement): PlacedElement[] {
+  return elements.map((element) =>
+    element.element_id === saved.id
+      ? {
+        ...element,
+        name: saved.name,
+        description: saved.description,
+        kind: saved.kind,
+        technology: saved.technology,
+        url: saved.url,
+        logo_url: saved.logo_url,
+        technology_connectors: saved.technology_connectors,
+        tags: saved.tags,
+        repo: saved.repo,
+        branch: saved.branch,
+        file_path: saved.file_path,
+        language: saved.language,
+      }
+      : element,
+  )
+}
+
+export function upsertConnectorInList(connectors: Connector[], connector: Connector): Connector[] {
+  const index = connectors.findIndex((candidate) => candidate.id === connector.id)
+  if (index === -1) return [...connectors, connector]
+  const next = connectors.slice()
+  next[index] = connector
+  return next
+}
+
+export function removeConnectorFromList(connectors: Connector[], connectorId: number): Connector[] {
+  return connectors.filter((connector) => connector.id !== connectorId)
+}
+
+export const useStore = create<CanvasStoreState>((set) => ({
+  ...emptyViewEditorUiState,
+  view: undefined,
+  viewElements: [],
+  connectors: [],
+  nodes: [],
+  edges: [],
+  linksMap: {},
+  parentLinksMap: {},
+  incomingLinks: [],
+  treeData: [],
+  allElements: [],
+  libraryRefresh: 0,
+
+  setViewEditorUi: (patch) => set((state) => ({ ...state, ...patch })),
+  setSnapToGrid: (snapToGrid) => set({ snapToGrid }),
+  setSelectedElement: (selectedElement) => set({ selectedElement }),
+  setSelectedConnector: (selectedConnector) => set({ selectedConnector }),
+  setView: (view) => set({ view }),
+  setViewElements: (next) => set((state) => ({ viewElements: resolveSetter(next, state.viewElements) })),
+  setConnectors: (next) => set((state) => ({ connectors: resolveSetter(next, state.connectors) })),
+  setNodes: (next) => set((state) => ({ nodes: resolveSetter(next, state.nodes) })),
+  setEdges: (next) => set((state) => ({ edges: resolveSetter(next, state.edges) })),
+  setLinksMap: (next) => set((state) => ({ linksMap: resolveSetter(next, state.linksMap) })),
+  setParentLinksMap: (next) => set((state) => ({ parentLinksMap: resolveSetter(next, state.parentLinksMap) })),
+  setIncomingLinks: (next) => set((state) => ({ incomingLinks: resolveSetter(next, state.incomingLinks) })),
+  setTreeData: (next) => set((state) => ({ treeData: resolveSetter(next, state.treeData) })),
+  setAllElements: (next) => set((state) => ({ allElements: resolveSetter(next, state.allElements) })),
+  setLibraryRefresh: (next) => set((state) => ({ libraryRefresh: resolveSetter(next, state.libraryRefresh) })),
+  resetCanvas: () => set({ nodes: [], edges: [] }),
+  hydrateViewContent: (payload) => set({
+    view: payload.view,
+    viewElements: payload.viewElements,
+    connectors: payload.connectors,
+    linksMap: payload.linksMap,
+    parentLinksMap: payload.parentLinksMap,
+    incomingLinks: payload.incomingLinks,
+    treeData: payload.treeData,
+  }),
+  updateElementPosition: (elementId, x, y) => set((state) => ({
+    viewElements: updatePlacedElementPosition(state.viewElements, elementId, x, y),
+  })),
+  removeElementPlacement: (elementId) => set((state) => ({
+    viewElements: removePlacedElement(state.viewElements, elementId),
+  })),
+  removeElementEverywhere: (elementId) => set((state) => ({
+    viewElements: removePlacedElement(state.viewElements, elementId),
+    libraryRefresh: state.libraryRefresh + 1,
+  })),
+  mergeSavedElement: (saved) => set((state) => ({
+    viewElements: mergeSavedElementIntoPlacements(state.viewElements, saved),
+    libraryRefresh: state.libraryRefresh + 1,
+  })),
+  upsertConnector: (connector) => set((state) => ({
+    connectors: upsertConnectorInList(state.connectors, connector),
+  })),
+  replaceConnector: (connector) => set((state) => ({
+    connectors: upsertConnectorInList(state.connectors, connector),
+  })),
+  removeConnector: (connectorId) => set((state) => ({
+    connectors: removeConnectorFromList(state.connectors, connectorId),
+  })),
+}))
+
+export const canvasSelectors = {
+  existingElementIds: selectExistingElementIds,
+  elementById: selectElementById,
+  connectorById: selectConnectorById,
+}

package/dist/demo/DemoPage.d.ts

@@ -1,9 +0,0 @@
-/**
- * Demo entry point.
- * Overrides the real `api` singleton with localStorage-backed implementations
- * and patches window.history to redirect /views/:id → /demo/:id, all for the
- * lifetime of this component. Restores everything on unmount.
- * No auth required; served at /demo and /demo/:id routes.
- */
-export declare function DemoNavigator(): null;
-export default function DemoPage(): import("react/jsx-runtime").JSX.Element;

package/dist/demo/seed.d.ts

@@ -1,9 +0,0 @@
-import type { LibraryElement, PlacedElement, Connector, ViewTreeNode, ViewLayer } from '../types';
-export declare const DEMO_ELEMENTS: LibraryElement[];
-export declare const DEMO_VIEWS: ViewTreeNode[];
-type ViewPlacements = Record<number, PlacedElement[]>;
-type ViewConnectors = Record<number, Connector[]>;
-export declare const DEMO_PLACEMENTS: ViewPlacements;
-export declare const DEMO_CONNECTORS: ViewConnectors;
-export declare const DEMO_LAYERS: Record<number, ViewLayer[]>;
-export {};

package/dist/demo/store.d.ts

@@ -1,137 +0,0 @@
-/**
- * localStorage-backed store for the demo mode.
- * Implements the subset of the `api` interface used by ViewEditor and its hooks.
- * Data is scoped under the `diag:demo:*` key namespace to avoid colliding
- * with a real logged-in session.
- */
-import type { LibraryElement, PlacedElement, Connector, ViewTreeNode, ViewLayer, Tag, ElementPlacement, ExploreData } from '../types';
-export declare function initDemoStore(): void;
-export declare function resetDemoStore(): void;
-export declare const demoApi: {
-    explore: {
-        load: () => Promise<ExploreData>;
-    };
-    elements: {
-        list: (_params?: unknown) => Promise<LibraryElement[]>;
-        get: (id: number) => Promise<LibraryElement>;
-        create: (data: Partial<LibraryElement>) => Promise<LibraryElement>;
-        update: (id: number, data: Partial<LibraryElement>) => Promise<LibraryElement>;
-        delete: (_orgId: string, id: number) => Promise<void>;
-        placements: (id: number) => Promise<ElementPlacement[]>;
-    };
-    workspace: {
-        orgs: {
-            tagColors: {
-                list: () => Promise<Record<string, Tag>>;
-                set: (tag: string, color: string, description?: string) => Promise<void>;
-            };
-        };
-        views: {
-            list: () => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }[]>;
-            get: (id: number) => Promise<ViewTreeNode>;
-            content: (id: number) => Promise<{
-                placements: PlacedElement[];
-                connectors: Connector[];
-            }>;
-            tree: () => Promise<ViewTreeNode[]>;
-            create: (data: {
-                name: string;
-                label?: string;
-                parent_view_id?: number | null;
-            }) => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }>;
-            update: (id: number, data: {
-                name: string;
-                label?: string;
-            }) => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }>;
-            delete: (_orgId: string, id: number) => Promise<void>;
-            placements: {
-                list: (viewId: number) => Promise<ElementPlacement[]>;
-                add: (viewId: number, elementId: number, x?: number, y?: number) => Promise<ElementPlacement>;
-                updatePosition: (viewId: number, elementId: number, x: number, y: number) => Promise<void>;
-                remove: (viewId: number, elementId: number) => Promise<void>;
-            };
-            layers: {
-                list: (viewId: number) => Promise<ViewLayer[]>;
-                create: (viewId: number, data: {
-                    name: string;
-                    tags: string[];
-                    color?: string;
-                }) => Promise<ViewLayer>;
-                update: (viewId: number, layerId: number, data: Partial<ViewLayer>) => Promise<ViewLayer>;
-                delete: (viewId: number, layerId: number) => Promise<void>;
-            };
-            reactions: {
-                list: (_viewId: number) => Promise<never[]>;
-            };
-            threads: {
-                listForElement: () => Promise<never[]>;
-                listForConnector: () => Promise<never[]>;
-                createForElement: () => Promise<never>;
-                createForConnector: () => Promise<never>;
-                addComment: () => Promise<never>;
-                resolve: () => Promise<void>;
-            };
-            thumbnail: (_id: number) => Promise<null>;
-            rename: (id: number, name: string) => Promise<{
-                id: number;
-                owner_element_id: number | null;
-                name: string;
-                label: string | null;
-                is_root: boolean;
-                created_at: string;
-                updated_at: string;
-            }>;
-            setLevel: () => Promise<void>;
-            reparent: () => Promise<never>;
-        };
-        connectors: {
-            list: (viewId: number) => Promise<Connector[]>;
-            create: (viewId: number, data: {
-                source_element_id: number;
-                target_element_id: number;
-                label?: string;
-                description?: string;
-                relationship?: string;
-                direction?: string;
-                style?: string;
-                url?: string;
-                source_handle?: string | null;
-                target_handle?: string | null;
-            }) => Promise<Connector>;
-            update: (viewId: number, connectorId: number, data: Partial<Connector>) => Promise<Connector>;
-            delete: (_orgId: string, connectorId: number) => Promise<void>;
-        };
-        elements: {
-            list: (params?: unknown) => Promise<LibraryElement[]>;
-            get: (id: number) => Promise<LibraryElement>;
-            create: (data: Partial<LibraryElement>) => Promise<LibraryElement>;
-            update: (id: number, data: Partial<LibraryElement>) => Promise<LibraryElement>;
-            delete: (orgId: string, id: number) => Promise<void>;
-            placements: (id: number) => Promise<ElementPlacement[]>;
-        };
-    };
-};

package/src/demo/DemoPage.tsx

@@ -1,184 +0,0 @@
-/**
- * Demo entry point.
- * Overrides the real `api` singleton with localStorage-backed implementations
- * and patches window.history to redirect /views/:id → /demo/:id, all for the
- * lifetime of this component. Restores everything on unmount.
- * No auth required; served at /demo and /demo/:id routes.
- */
-
-import React, { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Box } from '@chakra-ui/react'
-import { api } from '../api/client'
-import ViewEditor from '../pages/ViewEditor'
-import { HeaderProvider } from '../components/HeaderContext'
-import { ThemeProvider } from '../context/ThemeContext'
-import { demoApi, initDemoStore } from './store'
-import { DEMO_VIEW_EDITOR_OPTIONS } from './viewEditor'
-
-// ── Override helpers ──────────────────────────────────────────────────────────
-
-type ApiOverride = Record<string, unknown>
-
-/**
- * Swap api methods + patch window.history so any /views/:id navigation is
- * silently rewritten to /demo/:id before React Router processes it.
- * Returns a function that restores everything.
- */
-function applyOverrides(): () => void {
-  const originals: [obj: ApiOverride, key: string, original: unknown][] = []
-
-  function swap(obj: ApiOverride, key: string, replacement: unknown) {
-    originals.push([obj, key, obj[key]])
-    obj[key] = replacement
-  }
-
-  // elements
-  const realElements = api.elements as unknown as ApiOverride
-  const demoElements = demoApi.elements as ApiOverride
-  for (const key of ['list', 'get', 'create', 'update', 'delete', 'placements']) {
-    swap(realElements, key, demoElements[key])
-  }
-
-  // workspace.elements
-  const realWsElements = (api.workspace as unknown as ApiOverride).elements as ApiOverride
-  const demoWsElements = demoApi.workspace.elements as ApiOverride
-  for (const key of ['list', 'get', 'create', 'update', 'delete', 'placements']) {
-    swap(realWsElements, key, demoWsElements[key])
-  }
-
-  // workspace.orgs.tagColors
-  const realTagColors = ((api.workspace as unknown as ApiOverride).orgs as ApiOverride).tagColors as ApiOverride
-  const demoTagColors = demoApi.workspace.orgs.tagColors as ApiOverride
-  for (const key of ['list', 'set']) {
-    swap(realTagColors, key, demoTagColors[key])
-  }
-
-  // workspace.views top-level methods + nested namespaces
-  const realViews = (api.workspace as unknown as ApiOverride).views as ApiOverride
-  const demoViews = demoApi.workspace.views as ApiOverride
-  for (const key of ['list', 'get', 'content', 'tree', 'create', 'update', 'delete', 'thumbnail', 'rename', 'setLevel', 'reparent']) {
-    swap(realViews, key, demoViews[key])
-  }
-  for (const ns of ['placements', 'layers', 'reactions', 'threads']) {
-    const realNs = realViews[ns] as ApiOverride
-    const demoNs = demoViews[ns] as ApiOverride
-    for (const key of Object.keys(demoNs)) {
-      swap(realNs, key, demoNs[key])
-    }
-  }
-
-  // workspace.connectors
-  const realConnectors = (api.workspace as unknown as ApiOverride).connectors as ApiOverride
-  const demoConnectors = demoApi.workspace.connectors as ApiOverride
-  for (const key of ['list', 'create', 'update', 'delete']) {
-    swap(realConnectors, key, demoConnectors[key])
-  }
-
-  // explore.load (cross-branch graph snapshot)
-  const realExplore = (api as unknown as ApiOverride).explore as ApiOverride
-  swap(realExplore, 'load', demoApi.explore.load)
-
-  // ── Patch window.history so /views/:id → /demo/:id before React Router sees it
-  const origPush = window.history.pushState.bind(window.history)
-  const origReplace = window.history.replaceState.bind(window.history)
-
-  function rewriteUrl(url: string | URL | null | undefined): string | URL | null | undefined {
-    if (typeof url !== 'string') return url
-    return url.replace(/\/views\/(\d+)/, '/demo/$1')
-  }
-
-  window.history.pushState = (state, title, url) => origPush(state, title, rewriteUrl(url))
-  window.history.replaceState = (state, title, url) => origReplace(state, title, rewriteUrl(url))
-
-  return () => {
-    for (const [obj, key, original] of originals) {
-      obj[key] = original
-    }
-    window.history.pushState = origPush
-    window.history.replaceState = origReplace
-  }
-}
-
-// ── Inner component overrides applied before children mount ─────────────────
-
-function DemoApp({
-  revealProgress,
-}: {
-  revealProgress: number
-}) {
-  // useState initializer runs synchronously during the first render of this
-  // component instance, before any child component mounts or any hook effect
-  // runs. This guarantees api overrides are in place for ViewEditor's first fetch.
-  const [restore] = useState<() => void>(() => {
-    initDemoStore()
-    return applyOverrides()
-  })
-
-  useEffect(() => restore, [restore])
-
-  return (
-    <ViewEditor
-      demoOptions={{ ...DEMO_VIEW_EDITOR_OPTIONS, revealProgress }}
-    />
-  )
-}
-
-// ── DemoNavigator: redirects bare /demo to the first root view ────────────────
-
-export function DemoNavigator() {
-  const navigate = useNavigate()
-
-  useEffect(() => {
-    // Call demoApi directly no need to apply global overrides here, which
-    // would otherwise be cleaned up after DemoApp mounts and clobber its patches.
-    initDemoStore()
-    demoApi.workspace.views.tree().then((tree) => {
-      const root = tree.find((v) => v.parent_view_id === null)
-      navigate(root ? `/demo/${root.id}` : '/demo/1', { replace: true })
-    }).catch(() => navigate('/demo/1', { replace: true }))
-  }, [navigate])
-
-  return null
-}
-
-// ── DemoPage ──────────────────────────────────────────────────────────────────
-
-export default function DemoPage() {
-  const [revealProgress, setRevealProgress] = useState(() => (window.self === window.top ? 1 : 0))
-
-  useEffect(() => {
-    if (window.self === window.top) {
-      setRevealProgress(1)
-      return
-    }
-
-    const handleMessage = (event: MessageEvent) => {
-      const data = event.data as { type?: unknown; progress?: unknown } | null
-      if (!data || data.type !== 'tldiagram-demo-progress') return
-
-      const nextProgress = Number(data.progress)
-      if (!Number.isFinite(nextProgress)) return
-
-      setRevealProgress(Math.max(0, Math.min(1, nextProgress)))
-    }
-
-    window.addEventListener('message', handleMessage)
-    return () => window.removeEventListener('message', handleMessage)
-  }, [])
-
-  return (
-    <ThemeProvider
-      storagePrefix="diag:demo"
-      defaultAccent="#63b3ed"
-      defaultBackground="#0d121e"
-      defaultElementColor="#2d3748"
-    >
-      <Box minH="100vh" bg="var(--bg-canvas)" style={{ '--editor-top-offset': '0px' } as React.CSSProperties}>
-        <HeaderProvider>
-          <DemoApp revealProgress={revealProgress} />
-        </HeaderProvider>
-      </Box>
-    </ThemeProvider>
-  )
-}