@tldiagram/core-ui 1.87.0

package/src/hooks/useSafeFitView.ts

@@ -0,0 +1,60 @@
+import { useCallback, type RefObject } from 'react'
+import { useReactFlow } from 'reactflow'
+
+const MIN_CONTAINER_WIDTH = 50
+const MIN_CONTAINER_HEIGHT = 50
+const NAN_CHECK_DELAY = 80
+
+/**
+ * Wraps React Flow's fitView with protections against the d3-zoom NaN
+ * poisoning bug that occurs when the container is narrow at load time.
+ *
+ * Guards:
+ * 1. Container width - skips fitView if container is too narrow for d3-zoom
+ *    to compute a valid transform.
+ * 2. Post-call NaN check - if the viewport is still NaN after the call,
+ *    resets to a known-safe fallback.
+ *
+ * Returns `boolean`: true if fitView was attempted, false if skipped.
+ */
+export function useSafeFitView(containerRef?: RefObject<HTMLElement | null>) {
+  const { fitView, getViewport, setViewport } = useReactFlow()
+
+  const safeFitView = useCallback(
+    (options?: Parameters<typeof fitView>[0]): boolean => {
+      // Guard: skip if container is too narrow/short for d3-zoom to compute valid transform
+      // Zero height causes d3-zoom to produce zoom=0, which leads to NaN in RF's DotPattern
+      if (containerRef?.current) {
+        const { clientWidth, clientHeight } = containerRef.current
+        if (clientWidth < MIN_CONTAINER_WIDTH || clientHeight < MIN_CONTAINER_HEIGHT) return false
+      }
+
+      const duration = options?.duration ?? 0
+      fitView({ ...options, duration })
+
+      // For instant transitions, check synchronously so the NaN never reaches a render.
+      if (duration === 0) {
+        const vp = getViewport()
+        if (Number.isNaN(vp.x) || Number.isNaN(vp.y) || Number.isNaN(vp.zoom)) {
+          setViewport({ x: 0, y: 0, zoom: 1 }, { duration: 0 })
+          return false
+        }
+      }
+
+      // Post-call validation: check viewport after transition completes
+      // and reset to a safe fallback if d3-zoom produced NaN
+      const checkDelay = Math.max(duration, NAN_CHECK_DELAY)
+      setTimeout(() => {
+        const vp = getViewport()
+        if (Number.isNaN(vp.x) || Number.isNaN(vp.y) || Number.isNaN(vp.zoom)) {
+          setViewport({ x: 0, y: 0, zoom: 1 }, { duration: 0 })
+        }
+      }, checkDelay)
+
+      return true
+    },
+    [fitView, getViewport, setViewport, containerRef],
+  )
+
+  return { safeFitView }
+}

package/src/index.css

@@ -0,0 +1,309 @@
+@import './styles/theme.css';
+
+:root {
+    --theme-blue: var(--accent, #63b3ed);
+    /* alias - accent is set by AccentColorProvider */
+    --grad-brand: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
+
+    /* ── Layout: top menu bar ─────────────────────────────────────────
+       --topbar-h / --topbar-h-mobile are the *content* heights of the bar.
+       --topbar-h-total / --topbar-h-mobile-total include env(safe-area-inset-top)
+       so both the fixed bar itself and the spacer below it absorb the iOS
+       status-bar height automatically. On a regular desktop browser the
+       inset resolves to 0px, so nothing changes.                        */
+    --topbar-h: 40px;
+    /* top bar content height – desktop (sm+) */
+    --topbar-h-mobile: 0px;
+    /* top bar content height – mobile (<sm)  */
+    /* Total bar heights including iOS safe-area-inset-top */
+    --topbar-h-total: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
+    --topbar-h-mobile-total: calc(var(--topbar-h-mobile) + env(safe-area-inset-top, 0px));
+
+    --topbar-content-gap: 4px;
+    /* margin between bar & page content (mobile only) */
+    --topbar-float-top: 10px;
+    /* mobile floating icons: extra offset below bar */
+    --topbar-float-h: 38px;
+    /* mobile floating icons min-height  */
+
+    /* ── Layout: bottom mobile nav ────────────────────────────────────  */
+    --bottomnav-h: 74px;
+    /* bottom nav bar height             */
+    --bottomnav-container-h: 116px;
+    /* nav + FAB overflow area           */
+    --bottomnav-fab-bottom: 22px;
+    /* FAB offset from bottom            */
+    --bottomnav-fab-size: 74px;
+    /* FAB diameter                      */
+
+    /* ── Layout: react-flow mobile offsets (above bottom nav) ─────────  */
+    --rf-controls-bottom: 80px;
+    --rf-minimap-bottom: 70px;
+    --rf-panel-bl-bottom: 82px;
+}
+
+.react-flow {
+    background-color: var(--bg-canvas);
+}
+
+.react-flow__edge-path {
+    stroke: var(--theme-blue);
+    stroke-width: 2;
+    opacity: 0.8;
+}
+
+.react-flow__edge.selected .react-flow__edge-path {
+    stroke-width: 3;
+    opacity: 1;
+}
+
+/* Keep React Flow reconnect endpoints interactive, but let the node slot handle
+   be the only visible endpoint marker. */
+.react-flow__edge.selected .react-flow__edgeupdater {
+    fill: transparent;
+    stroke: transparent;
+    stroke-width: 0;
+    opacity: 0;
+    cursor: grab;
+    r: 10px;
+}
+
+/* Flowing dashes on hover indicate the edge is interactive / grabbable */
+@keyframes edge-flow {
+    from {
+        stroke-dashoffset: 24;
+    }
+
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+.react-flow__edge:hover:not(.selected) .react-flow__edge-path {
+    stroke-dasharray: 8 4;
+    animation: edge-flow 0.4s linear infinite;
+    opacity: 1;
+}
+
+.react-flow__edge-marker {
+    fill: var(--theme-blue);
+}
+
+.react-flow__controls button {
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 0;
+    color: #cbd5e0;
+    fill: #cbd5e0;
+    transition: all 0.2s var(--chakra-transitions-easing-pop);
+}
+
+.react-flow__controls button:last-child {
+    border-bottom: none;
+}
+
+/* On small screens, lift controls and minimap above the bottom navigation + safe area */
+@media (max-width: 768px) {
+    .react-flow__controls {
+        /* Fix: position fixed so controls escape any parent stacking context
+           and reliably sit above the mobile bottom nav / safe-area. */
+        position: fixed !important;
+        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rf-controls-bottom)) !important;
+        right: max(env(safe-area-inset-right, 0px), 1.25rem) !important;
+        z-index: 3000 !important;
+        margin: 0 !important;
+    }
+
+    .react-flow__minimap {
+        /* Keep minimap fixed to viewport so it doesn't get clipped by parent containers */
+        position: fixed !important;
+        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rf-minimap-bottom)) !important;
+        left: max(env(safe-area-inset-left, 0px), 1.25rem) !important;
+        z-index: 3000 !important;
+        /* Constrain size so the minimap never takes more than ~20% of viewport */
+        max-width: 20vw !important;
+        max-height: 20vh !important;
+        width: min(20vw, 220px) !important;
+        height: auto !important;
+        margin: 0 !important;
+        pointer-events: auto !important;
+        overflow: hidden;
+    }
+
+    /* Specific fix for the React Flow bottom-left panel (class="react-flow__panel bottom left") */
+    .react-flow__panel.bottom.left {
+        /* Lift the panel above common mobile bottom nav heights + safe area */
+        position: fixed !important;
+        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rf-panel-bl-bottom)) !important;
+        left: max(env(safe-area-inset-left, 0px), 1.25rem) !important;
+        pointer-events: auto !important;
+        z-index: 3001 !important;
+        margin: 0 !important;
+    }
+
+    /* Floating action menu (bottom-center) */
+    .react-flow__panel.bottom.center {
+        position: fixed !important;
+        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottomnav-h)) !important;
+        left: 50% !important;
+        transform: translateX(-50%) !important;
+        z-index: 3001 !important;
+    }
+
+    /* Slight spacing between control buttons to improve touch targets */
+    .react-flow__controls button {
+        margin-bottom: 6px;
+    }
+}
+
+/* On desktop / iPad (viewport-fit=cover): lift bottom React Flow panels above
+   the home-indicator safe area. env() resolves to 0px on regular browsers so
+   this is a no-op there. The mobile block above already handles this via the
+   explicit calc() on its fixed-position bottom values.                        */
+@media (min-width: 769px) {
+
+    /* Clear all margins for controls so the inline style='margin:1rem' on the
+       <Controls> JSX element doesn't push it above its intended bottom anchor.
+       Re-apply corner gap via right/bottom instead.                           */
+    .react-flow__controls {
+        margin: 0 !important;
+        bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
+        right: max(env(safe-area-inset-right, 0px), 1rem) !important;
+    }
+
+    .react-flow__minimap {
+        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
+        margin-left: max(env(safe-area-inset-left, 0px), 1rem) !important;
+    }
+
+    .react-flow__panel.bottom.left:not(.react-flow__controls) {
+        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
+        margin-left: max(env(safe-area-inset-left, 0px), 1rem) !important;
+    }
+
+    .react-flow__panel.bottom.right:not(.react-flow__controls) {
+        margin-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
+        margin-right: max(env(safe-area-inset-right, 0px), 1rem) !important;
+    }
+}
+
+/* On narrower desktop / iPad (<1280px) the centered floating action bar overlaps
+   the bottom-left panel (ViewTree). Push the panel above the bar:
+     1rem  = bar's own bottom gap
+     ~40px = bar height (28px content + 8px vertical padding + 4px slack)
+     8px   = visual gap between panel and bar
+   margin-bottom is reset to 0 so it doesn't stack with the 769px+ rule above. */
+@media (min-width: 769px) and (max-width: 1279px) {
+    .react-flow__panel.bottom.left:not(.react-flow__controls) {
+        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rf-panel-bl-bottom)) !important;
+        margin-bottom: 0 !important;
+        margin-left: max(env(safe-area-inset-left, 0px), 1rem) !important;
+    }
+
+    .react-flow__controls {
+        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rf-panel-bl-bottom)) !important;
+        right: max(env(safe-area-inset-right, 0px), 1rem) !important;
+    }
+
+    .react-flow__minimap {
+        bottom: calc(env(safe-area-inset-bottom, 0px) + var(--rf-panel-bl-bottom)) !important;
+        margin-bottom: 0 !important;
+        margin-left: max(env(safe-area-inset-left, 0px), 1rem) !important;
+    }
+}
+
+.react-flow__controls button:hover {
+    background-color: rgba(255, 255, 255, 0.06);
+    color: white;
+    fill: white;
+}
+
+.react-flow__minimap {
+    background-color: var(--bg-panel);
+    border: 1px solid #2d3748;
+    bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem) !important;
+    /* Constrain minimap size globally so it does not exceed ~20% of the viewport */
+    max-width: 30vw !important;
+    max-height: 30vh !important;
+    width: min(30vw, 240px) !important;
+    height: auto !important;
+    overflow: hidden;
+    margin: 0.5rem !important;
+    pointer-events: auto !important;
+}
+
+/* Ensure the internal svg/canvas of the minimap scales to the container size */
+.react-flow__minimap svg,
+.react-flow__minimap canvas {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.react-flow__attribution {
+    display: none;
+}
+
+/* Widen the invisible edge interaction area so tapping edges is forgiving */
+.react-flow__edge-interaction {
+    stroke-width: 24 !important;
+}
+
+/* Hide handles by default; reveal them on hover, during connection, or when already connected */
+.react-flow__handle {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.15s, width 0.15s, height 0.15s, box-shadow 0.15s, transform 0.15s;
+}
+
+.react-flow__handle.element-node-handle {
+    width: 8px;
+    height: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);
+}
+
+/* Expand the interactive hit area without affecting the visible circle */
+.react-flow__handle::before {
+    content: '';
+    position: absolute;
+    inset: -14px;
+    border-radius: 50%;
+}
+
+.react-flow__handle.handle-connected {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.react-flow__node:hover .react-flow__handle.element-node-handle.handle-active-slot,
+.react-flow__node:hover .react-flow__handle.element-node-handle.handle-fallback-slot {
+    opacity: 1;
+    pointer-events: all;
+}
+
+/* When a node is selected: show handles at full size (matching edge-updater r=6px) */
+.react-flow__node.selected .react-flow__handle.element-node-handle.handle-active-slot,
+.react-flow__node.selected .react-flow__handle.element-node-handle.handle-fallback-slot {
+    opacity: 1;
+    pointer-events: all;
+    width: 12px;
+    height: 12px;
+    border: 1.5px solid rgba(255, 255, 255, 0.85);
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
+}
+
+.react-flow__handle.handle-selected-edge {
+    opacity: 1;
+    pointer-events: all;
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.38);
+}
+
+.react-flow:has(.react-flow__connection) .react-flow__handle.element-node-handle.handle-active-slot,
+.react-flow:has(.react-flow__connection) .react-flow__handle.element-node-handle.handle-fallback-slot {
+    opacity: 1;
+    pointer-events: all;
+}

package/src/index.ts

@@ -0,0 +1,184 @@
+/**
+ * @tldiagram/core-ui the open-source core of the tlDiagram editor.
+ *
+ * This barrel file is the public API surface of the library.
+ * It re-exports pages, components, hooks, contexts, types, and utilities
+ * so that host applications (SaaS, CLI viewer, VS Code extension) can
+ * compose them with their own routing, API clients, and pro features.
+ */
+
+// ─── Pages ───────────────────────────────────────────────────────────────────
+export { default as ViewEditor } from './pages/ViewEditor'
+export { default as ViewsPage } from './pages/Views'
+export { default as ViewsGrid } from './pages/ViewsGrid'
+export { default as Dependencies } from './pages/Dependencies'
+export { default as InfiniteZoom, SharedInfiniteZoom } from './pages/InfiniteZoom'
+export { default as Settings } from './pages/Settings'
+export { default as AppearanceSettings } from './pages/AppearanceSettings'
+
+// ─── UI Components ──────────────────────────────────────────────────────────
+export { default as ElementNode } from './components/ElementNode'
+export { default as ViewGridNode, type ViewGridNodeData } from './components/ViewGridNode'
+export { default as ElementPanel, type ElementPanelProps } from './components/ElementPanel'
+export { default as ConnectorPanel, type ConnectorPanelProps } from './components/ConnectorPanel'
+export { default as ElementLibrary } from './components/ElementLibrary'
+export { default as TopMenuBar } from './components/TopMenuBar'
+export { default as ViewFloatingMenu } from './components/ViewFloatingMenu'
+export type { ViewFloatingMenuProps } from './components/ViewFloatingMenu'
+export { default as ViewBezierConnector } from './components/ViewBezierConnector'
+export { default as ViewHeaderButton } from './components/ViewHeaderButton'
+export { default as ViewPanel } from './components/ViewPanel'
+export { default as ViewDrawMenu } from './components/ViewDrawMenu'
+export { default as FloatingEdge } from './components/FloatingEdge'
+export { default as ContextBoundaryElement } from './components/ContextBoundaryElement'
+export { default as ContextNeighborElement } from './components/ContextNeighborElement'
+export { default as ContextStraightConnector } from './components/ContextStraightConnector'
+export { default as ProxyConnectorEdge } from './components/ProxyConnectorEdge'
+export { default as ProxyConnectorPanel } from './components/ProxyConnectorPanel'
+export { default as DrawingCanvas } from './components/DrawingCanvas'
+export type { DrawingCanvasHandle, DrawingPath } from './components/DrawingCanvas'
+export { default as InlineElementAdder } from './components/InlineElementAdder'
+export { default as ExportModal } from './components/ExportModal'
+export type { ExportOptions } from './components/ExportModal'
+export { default as ImportModal } from './components/ImportModal'
+export { default as ConfirmDialog } from './components/ConfirmDialog'
+export { default as SlidingPanel } from './components/SlidingPanel'
+export { default as PanelHeader } from './components/PanelHeader'
+export { KbdHint } from './components/PanelUI'
+export { default as TagUpsert } from './components/TagUpsert'
+export { default as GitSourceLinker } from './components/GitSourceLinker'
+export { default as LocalSourceLinker } from './components/LocalSourceLinker'
+export { default as CodePreviewPanel } from './components/CodePreviewPanel'
+export { SafeBackground } from './components/SafeBackground'
+export { ElementBody as NodeBody } from './components/NodeBody'
+export { ElementContainer as NodeContainer } from './components/NodeContainer'
+export type { ElementContainerProps } from './components/NodeContainer'
+export { default as NodeHoverCard } from './components/NodeHoverCard'
+export { default as NavBreadcrumb } from './components/NavBreadcrumb'
+export { default as ScrollIndicatorWrapper } from './components/ScrollIndicatorWrapper'
+export { default as LayoutSection } from './components/LayoutSection'
+export { default as CrossBranchControls } from './components/CrossBranchControls'
+
+// Icons
+export * from './components/Icons'
+
+// ViewExplorer
+export { default as ViewExplorer } from './components/ViewExplorer'
+export * from './components/ViewExplorer/utils'
+export type { NavItem, TreeNode } from './components/ViewExplorer/types'
+export { ViewNavigator } from './components/ViewExplorer/ViewNavigator'
+export { ViewSearch } from './components/ViewExplorer/ViewSearch'
+export { ViewTree } from './components/ViewExplorer/ViewTree'
+export { TagManager } from './components/ViewExplorer/TagManager'
+
+// ViewEditor sub-components
+export { ViewEditorContext, useViewEditorContext } from './pages/ViewEditor/context'
+
+// Onboarding components
+export { default as ViewEditorOnboarding } from './components/ViewEditorOnboarding'
+export { default as DependenciesOnboarding } from './components/DependenciesOnboarding'
+export { default as ViewsGridOnboarding } from './components/ViewsGridOnboarding'
+export { default as ExploreOnboarding } from './components/ExploreOnboarding'
+export { default as ExplorePageOnboarding } from './components/ExplorePageOnboarding'
+export { default as MiniZoomOnboarding } from './components/MiniZoomOnboarding'
+
+// ViewEditor edge label layout
+export * from './components/ViewEditorEdgeLabelLayout'
+
+// ─── ZUI ─────────────────────────────────────────────────────────────────────
+export * from './components/ZUI'
+
+// ─── Theme & Styles ──────────────────────────────────────────────────────────
+export { default as theme } from './theme'
+
+// ─── Contexts ────────────────────────────────────────────────────────────────
+export { ThemeProvider, useAccentColor, useTheme } from './context/ThemeContext'
+export { HeaderProvider, useSetHeader, useHeader } from './components/HeaderContext'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+export * from './types'
+
+// ─── Platform ────────────────────────────────────────────────────────────────
+export type { PlatformFeatures } from './platform/types'
+export { platform as localPlatform } from './platform/local'
+export { PlatformProvider } from './platform/PlatformContext'
+export { usePlatform } from './platform/context'
+
+// ─── API Contract ────────────────────────────────────────────────────────────
+// The library ships with a reference stub client (offline/local mode).
+// Host applications can provide their own implementation via the same interface.
+export { api } from './api/client'
+export type { DependenciesResponse } from './api/client'
+
+// ─── Extension Slots ─────────────────────────────────────────────────────────
+export type {
+  TopMenuBarSlots,
+  ElementPanelSlots,
+  ConnectorPanelSlots,
+  ViewFloatingMenuSlots,
+  ViewEditorSlots,
+  CoreUISlots,
+} from './slots'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+export * from './types'
+
+// ─── Hooks ───────────────────────────────────────────────────────────────────
+export { useSafeFitView } from './hooks/useSafeFitView'
+
+// ViewEditor hooks
+export { useViewData } from './pages/ViewEditor/hooks/useViewData'
+export { useDrawingEngine } from './pages/ViewEditor/hooks/useDrawingEngine'
+export { useCanvasInteractions } from './pages/ViewEditor/hooks/useCanvasInteractions'
+export { useViewContextNeighbours } from './pages/ViewEditor/hooks/useViewContextNeighbours'
+
+// ViewEditor sub-components
+export { EmptyCanvasState } from './pages/ViewEditor/components/EmptyCanvasState'
+export { EditorOverlays } from './pages/ViewEditor/components/EditorOverlays'
+export { ConnectorContextMenu, CanvasContextMenu } from './pages/ViewEditor/components/EditorMenus'
+
+// ViewEditor utils
+export * from './pages/ViewEditor/utils'
+
+// ─── CrossBranch ─────────────────────────────────────────────────────────────
+export * from './crossBranch/graph'
+export * from './crossBranch/resolve'
+export * from './crossBranch/settings'
+export * from './crossBranch/store'
+export * from './crossBranch/types'
+
+// ─── Demo ────────────────────────────────────────────────────────────────────
+export { default as DemoPage, DemoNavigator } from './demo/DemoPage'
+export * from './demo/viewEditor'
+
+// ─── Utilities ───────────────────────────────────────────────────────────────
+export * from './utils/edgeDistribution'
+export * from './utils/githubApi'
+export * from './utils/githubCache'
+export * from './utils/ids'
+export * from './utils/technologyCatalog'
+export { toast, ToastContainer } from './utils/toast'
+export * from './utils/url'
+export * from './utils/treesitter'
+
+// ─── Constants ───────────────────────────────────────────────────────────────
+export * from './constants/colors'
+export * from './constants/diagramColors'
+
+// ─── Config ──────────────────────────────────────────────────────────────────
+export {
+  appBase,
+  routerBasename,
+  isNativeApp,
+  apiBase,
+  apiUrl,
+} from './config/runtime'
+
+// ─── Lib ─────────────────────────────────────────────────────────────────────
+export { vscodeBridge } from './lib/vscodeBridge'
+
+// ─── Importer ────────────────────────────────────────────────────────────────
+export { parseMermaid as parseMermaidToElements, type ParsedImport } from './pkg/importer/mermaid'
+
+// ─── VS Code Messages ────────────────────────────────────────────────────────
+export * from './types/vscode-messages'

package/src/lib/vscodeBridge-vscode.ts

@@ -0,0 +1,27 @@
+import type { ExtensionToWebviewMessage, WebviewToExtensionMessage } from '../types/vscode-messages'
+
+declare global {
+  interface Window {
+    __TLD_VSCODE__?: boolean
+    __TLD_VSCODE_API__?: {
+      postMessage: (msg: unknown) => void
+    }
+  }
+}
+
+const api = (window as Window).__TLD_VSCODE_API__
+
+export const vscodeBridge = {
+  postMessage: (msg: WebviewToExtensionMessage) => {
+    api?.postMessage(msg)
+  },
+  onMessage: (handler: (msg: ExtensionToWebviewMessage) => void): (() => void) => {
+    const listener = (e: MessageEvent) => {
+      if (e.data && typeof e.data === 'object' && 'type' in e.data) {
+        handler(e.data as ExtensionToWebviewMessage)
+      }
+    }
+    window.addEventListener('message', listener)
+    return () => window.removeEventListener('message', listener)
+  },
+}

package/src/lib/vscodeBridge.ts

@@ -0,0 +1,7 @@
+import type { ExtensionToWebviewMessage, WebviewToExtensionMessage } from '../types/vscode-messages'
+
+// No-op stub used in web/native builds. Swapped for vscodeBridge-vscode.ts in VS Code builds.
+export const vscodeBridge = {
+  postMessage: (_msg: WebviewToExtensionMessage) => {},
+  onMessage: (_handler: (msg: ExtensionToWebviewMessage) => void): (() => void) => () => {},
+}

package/src/main.tsx

@@ -0,0 +1,46 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { ChakraProvider } from "@chakra-ui/react"
+import { BrowserRouter } from "react-router-dom"
+import App from "./App"
+import theme from "./theme"
+import { routerBasename } from "./config/runtime"
+import { ToastContainer } from "./utils/toast"
+import { PlatformProvider } from "./platform/PlatformContext"
+import { platform as localPlatform } from "./platform/local"
+import "./index.css"
+
+if (typeof window !== "undefined") {
+  document.addEventListener(
+    "wheel",
+    (e) => {
+      if (e.ctrlKey) {
+        e.preventDefault()
+      }
+    },
+    { passive: false },
+  )
+
+  const preventGesture = (e: Event) => e.preventDefault()
+  document.addEventListener("gesturestart", preventGesture, { passive: false })
+  document.addEventListener("gesturechange", preventGesture, { passive: false })
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ChakraProvider theme={theme}>
+      <PlatformProvider platform={localPlatform}>
+        <BrowserRouter
+          basename={routerBasename}
+          future={{
+            v7_startTransition: false,
+            v7_relativeSplatPath: true,
+          }}
+        >
+          <App />
+        </BrowserRouter>
+        <ToastContainer />
+      </PlatformProvider>
+    </ChakraProvider>
+  </StrictMode>,
+)