npm - @kaizenreport/kensho-viewer - Versions diffs - 0.1.0 - Mend

@kaizenreport/kensho-viewer 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/LICENSE +21 -0
package/README.md +19 -0
package/assets/app.js +1396 -0
package/assets/app.jsx +860 -0
package/assets/charts.js +1156 -0
package/assets/charts.jsx +593 -0
package/assets/colors_and_type.css +219 -0
package/assets/components.js +894 -0
package/assets/components.jsx +520 -0
package/assets/data-bridge.js +49 -0
package/assets/data-bridge.jsx +55 -0
package/assets/data-loader.js +543 -0
package/assets/kaizen-mark.svg +5 -0
package/assets/kensho-wordmark.svg +18 -0
package/assets/pages.js +1472 -0
package/assets/pages.jsx +822 -0
package/assets/test-detail.js +1058 -0
package/assets/test-detail.jsx +502 -0
package/assets/tokens.css +357 -0
package/assets/tree-detail.js +1705 -0
package/assets/tree-detail.jsx +947 -0
package/dist/component.d.ts +115 -0
package/dist/component.js +698 -0
package/index.html +35 -0
package/package.json +65 -0
package/scripts/build.js +117 -0
package/src/component.d.ts +115 -0
package/src/component.jsx +340 -0
package/src/data.js +538 -0

package/index.html ADDED Viewed

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Kensho · Test Report</title>
+<link rel="icon" href="assets/kaizen-mark.svg">
+<link rel="stylesheet" href="assets/tokens.css">
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" crossorigin="anonymous"></script>
+</head>
+<body>
+<div id="app">
+  <noscript>Kensho report requires JavaScript to render.</noscript>
+  <div class="kv-boot">
+    <div class="kv-boot-mark">
+      <img src="assets/kaizen-mark.svg" width="40" height="40" alt="">
+    </div>
+    <div class="kv-boot-text">Loading report…</div>
+  </div>
+</div>
+<!-- Pre-compiled by packages/viewer/scripts/build.js — the .jsx sources are
+     copied alongside for human readability, but the browser only needs .js. -->
+<script src="assets/data-loader.js"></script>
+<script src="assets/data-bridge.js"></script>
+<script src="assets/components.js"></script>
+<script src="assets/charts.js"></script>
+<script src="assets/test-detail.js"></script>
+<script src="assets/tree-detail.js"></script>
+<script src="assets/pages.js"></script>
+<script src="assets/app.js"></script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,65 @@
+{
+  "name": "@kaizenreport/kensho-viewer",
+  "version": "0.1.0",
+  "description": "Static HTML/JS/CSS viewer bundled by the Kensho CLI into each generated report. Also exports an embeddable React component for the Kaizen platform.",
+  "type": "module",
+  "main": "index.html",
+  "files": [
+    "index.html",
+    "assets",
+    "src",
+    "scripts",
+    "dist",
+    "build.js",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./index.html",
+    "./component": {
+      "types": "./dist/component.d.ts",
+      "import": "./dist/component.js",
+      "default": "./dist/component.js"
+    },
+    "./style.css": "./assets/tokens.css",
+    "./data": "./src/data.js",
+    "./assets/*": "./assets/*",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@babel/preset-react": "^7.27.1",
+    "esbuild": "^0.24.0"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/brandon1794/kensho.git",
+    "directory": "packages/viewer"
+  },
+  "homepage": "https://github.com/brandon1794/kensho/tree/main/packages/viewer#readme",
+  "bugs": {
+    "url": "https://github.com/brandon1794/kensho/issues"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "build:no-bundle": "node scripts/build.js --no-bundle"
+  }
+}

package/scripts/build.js ADDED Viewed

@@ -0,0 +1,117 @@
+#!/usr/bin/env node
+// Build pipeline for @kaizenreport/kensho-viewer.
+//
+// Two outputs:
+//
+// 1. Static-report assets — the pre-compiled .js files that index.html
+//    references via plain <script src="..."> tags. Each assets/*.jsx is
+//    transpiled in place to assets/*.js via @babel/preset-react. The
+//    browser does NOT need @babel/standalone at runtime. We also produce
+//    assets/data-loader.js which exposes window.__KENSHO_LOAD_DATA so the
+//    static `data-bridge.js` shim can call into the shared loader.
+//
+// 2. Embed bundle — dist/component.js + dist/component.d.ts. An ESM build
+//    of the React `<KenshoViewer />` component (and the shared loader),
+//    bundled with esbuild. React/ReactDOM are external peer-deps so the
+//    host app picks them up.
+//
+// Both outputs are produced from the same set of sources so the two modes
+// stay in sync.
+import { readdirSync, readFileSync, writeFileSync, statSync, mkdirSync, copyFileSync, existsSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { transformSync } from '@babel/core';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..');
+const ASSETS = join(ROOT, 'assets');
+const SRC = join(ROOT, 'src');
+const DIST = join(ROOT, 'dist');
+mkdirSync(ASSETS, { recursive: true });
+mkdirSync(DIST, { recursive: true });
+// -------------------------------------------------------------------------
+// 1. Compile every .jsx in assets/ → sibling .js
+// -------------------------------------------------------------------------
+const files = readdirSync(ASSETS).filter(f => f.endsWith('.jsx'));
+let bytesIn = 0, bytesOut = 0;
+for (const f of files) {
+  const src = readFileSync(join(ASSETS, f), 'utf8');
+  const { code } = transformSync(src, {
+    presets: [['@babel/preset-react', { runtime: 'classic' }]],
+    babelrc: false,
+    configFile: false,
+    filename: f,
+    sourceMaps: false,
+    compact: false,
+    comments: true,
+  });
+  const out = f.replace(/\.jsx$/, '.js');
+  const banner = `/* Auto-generated from ${f} by packages/viewer/scripts/build.js. Edit the .jsx — DO NOT edit this file. */\n`;
+  writeFileSync(join(ASSETS, out), banner + code);
+  bytesIn  += Buffer.byteLength(src);
+  bytesOut += Buffer.byteLength(code);
+  console.log(`  ${f.padEnd(20)} → ${out}  (${(Buffer.byteLength(code)/1024).toFixed(1)} KB)`);
+}
+// -------------------------------------------------------------------------
+// 2. Static-report data loader — wraps src/data.js into a non-module script
+//    that exposes window.__KENSHO_LOAD_DATA. The static report loads this
+//    via a plain <script> tag (no `type="module"`, no bundler at runtime).
+//
+//    The loader source itself is plain ESM, so we strip the `export` keywords
+//    and wrap in an IIFE that pins the named export onto window.
+// -------------------------------------------------------------------------
+const dataSrc = readFileSync(join(SRC, 'data.js'), 'utf8');
+// Replace `export function name(` and `export async function name(` → `function name(`.
+// Then expose `loadKenshoData` (and a couple helpers) on window at the end.
+const dataNoExport = dataSrc.replace(/^export\s+(async\s+function|function|const|let|var)\b/gm, '$1');
+const dataLoaderJs =
+  '/* Auto-generated. Wraps src/data.js for the static-report bootstrap. */\n' +
+  '(function () {\n' +
+  dataNoExport +
+  '\nwindow.__KENSHO_LOAD_DATA = loadKenshoData;\n' +
+  '})();\n';
+writeFileSync(join(ASSETS, 'data-loader.js'), dataLoaderJs);
+console.log(`  ${'src/data.js'.padEnd(20)} → assets/data-loader.js  (${(Buffer.byteLength(dataLoaderJs)/1024).toFixed(1)} KB)`);
+// -------------------------------------------------------------------------
+// 3. ESM bundle for embedding — dist/component.js + dist/component.d.ts.
+//    Lazily required (esbuild is an optional dev dep — if it's not installed,
+//    the static-report path still builds). Skip with --no-bundle.
+// -------------------------------------------------------------------------
+const skipBundle = process.argv.includes('--no-bundle');
+if (!skipBundle) {
+  let esbuild;
+  try {
+    esbuild = await import('esbuild');
+  } catch (e) {
+    console.warn('[kensho-viewer] esbuild not installed — skipping embed bundle.');
+    console.warn('               run `pnpm add -D esbuild` inside packages/viewer/ to enable it.');
+  }
+  if (esbuild) {
+    await esbuild.build({
+      entryPoints: [join(SRC, 'component.jsx')],
+      outfile: join(DIST, 'component.js'),
+      bundle: true,
+      format: 'esm',
+      target: ['es2020'],
+      platform: 'browser',
+      jsx: 'automatic',
+      jsxImportSource: 'react',
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+      logLevel: 'info',
+      minify: false,
+    });
+    // Copy the .d.ts (hand-written, kept tiny).
+    const dts = join(SRC, 'component.d.ts');
+    if (existsSync(dts)) {
+      copyFileSync(dts, join(DIST, 'component.d.ts'));
+    }
+    console.log(`  ${'src/component.jsx'.padEnd(20)} → dist/component.js`);
+  }
+}
+console.log(`[kensho-viewer] built ${files.length} static asset${files.length === 1 ? '' : 's'} · ${(bytesIn/1024).toFixed(1)} KB → ${(bytesOut/1024).toFixed(1)} KB`);

package/src/component.d.ts ADDED Viewed

@@ -0,0 +1,115 @@
+// Type declarations for @kaizenreport/kensho-viewer/component.
+//
+// Hand-written; the implementation is JSX. Kept minimal — covers the public
+// API only.
+import type * as React from 'react';
+export interface KenshoSidebarItem {
+  /** Stable key, used for React reconciliation. */
+  id: string;
+  /** Visible label. */
+  label: string;
+  /** Lucide icon name (https://lucide.dev/icons). */
+  icon: string;
+  /** Render the page body when this item is active. */
+  render: () => React.ReactNode;
+}
+export interface KenshoExtraTab {
+  /** Stable key, used for React reconciliation. */
+  id: string;
+  /** Visible tab label. */
+  label: string;
+  /** Render the tab body for the given test (`RichTest` shape). */
+  render: (test: any) => React.ReactNode;
+}
+export interface KenshoViewerProps {
+  /**
+   * URL to a Kensho `data/` directory. The component will fetch
+   * `${dataUrl}/index.json` and (lazily) `${dataUrl}/cases/<id>.json`.
+   * Trailing slashes are normalized.
+   */
+  dataUrl: string;
+  /**
+   * Override for per-case JSON URLs. Default: `${dataUrl}/cases/<id>.json`.
+   */
+  caseUrl?: (caseId: string) => string;
+  /**
+   * URL to the directory containing the viewer's compiled `assets/*.js`
+   * files. Required if you don't drop a `<link data-kensho-viewer-assets="…">`
+   * marker in your <head>.
+   */
+  assetsUrl?: string;
+  /** Fired when a case is opened (deep-link integration). */
+  onCaseOpen?: (caseId: string | null) => void;
+  /** Fired when the user navigates to a different sidebar page. */
+  onPageChange?: (page: string) => void;
+  /**
+   * Optional extra sidebar items rendered after the built-ins.
+   */
+  extraSidebar?: KenshoSidebarItem[];
+  /**
+   * Optional extra tabs injected at the end of the test detail tab list.
+   */
+  extraTabs?: KenshoExtraTab[];
+  /**
+   * Initial state — useful for SSR / deep-linked URLs.
+   */
+  initial?: {
+    page?: string;
+    caseId?: string;
+  };
+  /**
+   * When `true`, the viewer suppresses its own hash-router and keyboard
+   * shortcuts. The host must update `initial.page` / `initial.caseId` (or
+   * remount) in response to the `onPageChange` / `onCaseOpen` callbacks.
+   */
+  ownKeyboard?: boolean;
+}
+export declare function KenshoViewer(props: KenshoViewerProps): JSX.Element;
+export default KenshoViewer;
+/**
+ * Pure data loader — fetches `${dataUrl}/index.json` and normalizes the
+ * Kensho v1 schema into the shape the viewer expects. Exposed for hosts that
+ * want to introspect the loaded data themselves.
+ */
+export declare function loadKenshoData(
+  dataUrl: string,
+  opts?: {
+    caseUrl?: (caseId: string) => string;
+    fetch?: typeof fetch;
+  }
+): Promise<KenshoState>;
+export interface KenshoState {
+  kenshoIndex: any;
+  reportType: 'unit' | 'e2e' | 'mixed' | string;
+  run: any;
+  env: Array<[string, string]>;
+  suites: Array<{ name: string; segs: Array<{ k: string; n: number }>; total: number }>;
+  tests: any[];
+  richTests: Record<string, any>;
+  suiteTree: any[];
+  behaviorTree: any[];
+  categories: any[];
+  timelineTests: any[];
+  trendRuns: any[];
+  histogram: Array<{ label: string; n: number }>;
+  historyRuns: any[];
+  ensureCaseLoaded: (richTest: any) => Promise<any>;
+  loadCase: (id: string) => Promise<any>;
+  fmtDuration: (ms: number) => string;
+  relTime: (iso: string) => string;
+}

package/src/component.jsx ADDED Viewed

@@ -0,0 +1,340 @@
+// =============================================================
+// <KenshoViewer /> — embeddable React component.
+//
+// Same code path as the static report, but:
+//   * Fetches data from the URL passed in `props.dataUrl` (instead of
+//     hard-coded "data/").
+//   * Suppresses hash-router and keyboard shortcuts when the host opts in
+//     (`ownKeyboard: true`), bubbling navigation events to callbacks.
+//   * Lets the host inject extra sidebar items + extra detail-pane tabs.
+//
+// The static report itself does NOT load this file. It loads the original
+// pre-compiled `assets/*.js` that read from window globals.
+// =============================================================
+import React, { useEffect, useRef, useState } from 'react';
+import { loadKenshoData } from './data.js';
+// ---- Context ------------------------------------------------------------
+//
+// Components in the static-report bundle continue to read window.RICH_TESTS
+// etc. directly — they aren't aware of this context. The context is only
+// consumed by:
+//
+//   * Sidebar/DetailPane — to discover extraSidebar / extraTabs
+//   * The internal navigation shims — to bypass hash routing when
+//     `ownKeyboard` is set.
+//
+// When useKenshoCtx() returns null (= component used outside a provider, ie.
+// the static-report path), callers fall back to window globals as before.
+const KenshoContext = React.createContext(null);
+export function useKenshoCtx() {
+  return React.useContext(KenshoContext);
+}
+// Make it accessible to the global components (they live in window.*) so
+// Sidebar/DetailPane can opt in.
+if (typeof window !== 'undefined') {
+  window.__KenshoContext = KenshoContext;
+}
+// ---- Snapshot of the rendered <App> tree --------------------------------
+//
+// `App`, `Sidebar`, `DetailPane`, etc. are defined by the legacy assets/*
+// scripts (loaded as plain <script> tags by index.html). When this component
+// is bundled for embedding via esbuild, those scripts are NOT loaded.
+//
+// We need *some* way to render the same UI from inside the bundle. There
+// are two viable shapes:
+//
+//   A) Re-implement <App> here. Lots of duplication, drifts over time.
+//
+//   B) Resolve <App> from window at mount time. Requires the host to load
+//      the legacy assets up front. Bigger ask on integrators.
+//
+// We pick (C): the component bundle dynamically injects the legacy compiled
+// scripts into the host page (one-time, idempotent) and then renders the
+// resolved `window.App`. This keeps a single source of truth and makes the
+// embed a true mirror of the static-report. See `loadLegacyScripts()` below.
+const LEGACY_SCRIPTS = [
+  'data-loader.js',   // exposes window.__KENSHO_LOAD_DATA
+  'components.js',
+  'charts.js',
+  'test-detail.js',
+  'tree-detail.js',
+  'pages.js',
+  'app.js',
+];
+// Track which (assetsBaseUrl, scriptName) pairs we've injected so a re-mount
+// with the same base doesn't double-load.
+const _injected = new Set();
+function injectScript(url) {
+  return new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[data-kv-src="${url}"]`);
+    if (existing) {
+      if (existing.dataset.kvLoaded === '1') return resolve();
+      existing.addEventListener('load', () => resolve(), { once: true });
+      existing.addEventListener('error', () => reject(new Error('failed: ' + url)), { once: true });
+      return;
+    }
+    const s = document.createElement('script');
+    s.src = url;
+    s.dataset.kvSrc = url;
+    s.async = false; // preserve order
+    s.addEventListener('load', () => { s.dataset.kvLoaded = '1'; resolve(); }, { once: true });
+    s.addEventListener('error', () => reject(new Error('failed: ' + url)), { once: true });
+    document.head.appendChild(s);
+  });
+}
+async function loadLegacyAssets(assetsBaseUrl) {
+  const base = String(assetsBaseUrl).replace(/\/+$/, '');
+  for (const name of LEGACY_SCRIPTS) {
+    const url = `${base}/${name}`;
+    if (_injected.has(url)) continue;
+    await injectScript(url);
+    _injected.add(url);
+  }
+  // Lucide icons — same as the static report's index.html.
+  if (!window.lucide) {
+    await injectScript('https://unpkg.com/lucide@latest/dist/umd/lucide.min.js');
+  }
+}
+// `app.js`'s top-level code calls window.__KENSHO_BOOT.then(() => ReactDOM.createRoot(...).render(<App/>)).
+// We don't want THAT to happen — we render <App/> ourselves into our own
+// container. So before `app.js` evaluates, install a shim that swallows the
+// auto-mount.
+function installNoAutoMount() {
+  // Resolve __KENSHO_BOOT immediately with `null`. The `.then(() => render…)`
+  // body will run, but our shim throws before it can render.
+  if (!window.__KENSHO_BOOT) window.__KENSHO_BOOT = Promise.resolve();
+  // Swap out ReactDOM.createRoot with a noop the first time it's accessed
+  // FROM the legacy app.js. Easiest: monkey-patch `getElementById` to return
+  // null for the legacy "app" id, which makes createRoot throw — caught by
+  // app.js's `.catch` (it doesn't have one!). So instead we replace
+  // ReactDOM.createRoot during the brief window the script evaluates.
+  const dom = window.ReactDOM;
+  if (!dom) {
+    // ReactDOM isn't on window in embed mode (we use the host's react-dom
+    // import). Provide a stub so app.js's `ReactDOM.createRoot(...).render`
+    // is a noop.
+    window.ReactDOM = { createRoot: () => ({ render() {}, unmount() {} }) };
+  }
+  // Same for React (legacy uses `const { useState, useEffect } = React;`).
+  if (!window.React) {
+    window.React = React;
+  }
+}
+// Restore real ReactDOM/React after the legacy scripts have evaluated, so
+// we don't permanently mess with the global. (We installed stubs only; if
+// the host had its own globals, we leave them alone via the if-checks
+// above.)
+// ---- The component itself ------------------------------------------------
+export function KenshoViewer(props) {
+  const {
+    dataUrl,
+    caseUrl,
+    assetsUrl, // optional: where to load the viewer's compiled JS from. Default: same package.
+    onCaseOpen,
+    onPageChange,
+    extraSidebar,
+    extraTabs,
+    initial,
+    ownKeyboard = false,
+  } = props;
+  if (!dataUrl) throw new Error('<KenshoViewer dataUrl="..." /> is required');
+  const containerRef = useRef(null);
+  const [phase, setPhase] = useState('boot'); // 'boot' | 'loading' | 'ready' | 'error'
+  const [errMsg, setErrMsg] = useState('');
+  const [state, setState] = useState(null);
+  // Resolve the URL to load the legacy compiled scripts from. By default we
+  // assume the host bundled this component; the legacy assets live in the
+  // same package. The host can override via `assetsUrl` if they self-host.
+  const resolvedAssetsUrl = assetsUrl || guessDefaultAssetsUrl();
+  // 1. Inject the legacy compiled scripts (one-time).
+  useEffect(() => {
+    let cancelled = false;
+    setPhase('loading');
+    installNoAutoMount();
+    loadLegacyAssets(resolvedAssetsUrl)
+      .then(() => loadKenshoData(dataUrl, { caseUrl: caseUrl ? (id) => caseUrl(id) : undefined }))
+      .then(s => {
+        if (cancelled) return;
+        // Push the loaded state onto window.* so the legacy components keep
+        // working. (They were written before the context refactor.) This is
+        // the documented limitation: 1 embedded viewer per page. Re-mount
+        // with a different `dataUrl` works because we re-write the globals.
+        applyToWindow(s);
+        setState(s);
+        setPhase('ready');
+      })
+      .catch(err => {
+        if (cancelled) return;
+        console.error('[KenshoViewer] failed to boot:', err);
+        setErrMsg(err?.message || String(err));
+        setPhase('error');
+      });
+    return () => { cancelled = true; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dataUrl]); // intentionally don't depend on caseUrl/assetsUrl — they're stable in practice.
+  // (Step 2 removed.) Navigation is bridged inside the legacy <App>: when its
+  // context says `ownKeyboard: true` it calls `ctx.onPageChange` /
+  // `ctx.onCaseOpen` instead of pushing to window.location.hash. See
+  // assets/app.jsx. We don't override window.__navTo from out here because
+  // that would skip the legacy App's local page state update.
+  // 3. Mount the legacy <App/> into our container once data is ready.
+  //    We do it imperatively because <App/> lives on window and isn't a
+  //    JSX-importable export.
+  //
+  //    Important: we mount ONCE per `state` (data reload) and re-render the
+  //    same root with a fresh `ctxValue` when extras / callbacks change. If
+  //    we unmounted on every prop change, the legacy App's local state
+  //    (selected page, search filters, splitter width, …) would be wiped.
+  const rootRef = useRef(null);
+  // (a) Mount on phase=ready / data changes.
+  useEffect(() => {
+    if (phase !== 'ready' || !state || !containerRef.current) return;
+    const App = window.App;
+    if (typeof App !== 'function') {
+      console.error('[KenshoViewer] window.App not found after legacy load. Build out of date?');
+      return;
+    }
+    let cancelled = false;
+    import('react-dom/client').then(({ createRoot }) => {
+      if (cancelled) return;
+      const root = createRoot(containerRef.current);
+      rootRef.current = root;
+      renderLegacy(root);
+    });
+    return () => {
+      cancelled = true;
+      try { rootRef.current?.unmount(); } catch {}
+      rootRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [phase, state]);
+  // (b) Re-render with fresh ctxValue whenever extras / callbacks change.
+  useEffect(() => {
+    if (rootRef.current) renderLegacy(rootRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [extraSidebar, extraTabs, onCaseOpen, onPageChange, ownKeyboard]);
+  function renderLegacy(root) {
+    const App = window.App;
+    if (typeof App !== 'function') return;
+    const ctxValue = {
+      state,
+      extraSidebar: extraSidebar || [],
+      extraTabs: extraTabs || [],
+      onCaseOpen,
+      onPageChange,
+      ownKeyboard,
+      // `page` / `caseId` here are the host-controlled values from
+      // `props.initial`. The legacy App reads `ctx?.page` only as an
+      // optional one-way sync source (see app.jsx). Local navigation
+      // inside the viewer keeps using the App's own `useState`.
+      page: initial?.page,
+      caseId: initial?.caseId,
+    };
+    const legacyApp = React.createElement(App, null);
+    root.render(
+      React.createElement(KenshoContext.Provider, { value: ctxValue }, legacyApp)
+    );
+  }
+  // 4. Suppress legacy keyboard shortcuts when the host opts in. The legacy
+  //    shortcut handler is registered on `window` from `app.jsx`. We can't
+  //    easily un-register it, so instead capture all keydown events at the
+  //    container and stop propagation before they bubble to window.
+  useEffect(() => {
+    if (!ownKeyboard) return;
+    const node = containerRef.current;
+    if (!node) return;
+    const onKeyDown = (e) => {
+      // Don't swallow chords inside text inputs the host may add.
+      e.stopPropagation();
+    };
+    node.addEventListener('keydown', onKeyDown, true);
+    return () => node.removeEventListener('keydown', onKeyDown, true);
+  }, [ownKeyboard, phase]);
+  if (phase === 'error') {
+    return React.createElement(
+      'div',
+      { className: 'kv-embed-error', style: { padding: 24, color: '#E5484D', fontFamily: 'sans-serif' } },
+      React.createElement('h3', null, 'Failed to load Kensho report'),
+      React.createElement('pre', { style: { whiteSpace: 'pre-wrap', background: '#fcebec', padding: 12, borderRadius: 6 } }, errMsg)
+    );
+  }
+  return React.createElement('div', {
+    ref: containerRef,
+    className: 'kv-embed-root',
+    'data-kensho-viewer': '',
+    style: { width: '100%', height: '100%', minHeight: 480 },
+  });
+}
+// Where do we load `assets/*.js` from?
+//   * If the host imported from `@kaizenreport/kensho-viewer/component`, we
+//     don't have a direct way to know the package URL.
+//   * Convention: the host should serve the package's `assets/` directory
+//     (e.g. via Vite's static asset import) and pass `assetsUrl` explicitly.
+//   * As a sane default, we look for a <script data-kensho-viewer-assets>
+//     marker tag the host can drop in their <head>.
+function guessDefaultAssetsUrl() {
+  if (typeof document === 'undefined') return '/kensho-viewer-assets';
+  const marker = document.querySelector('[data-kensho-viewer-assets]');
+  if (marker) return marker.getAttribute('data-kensho-viewer-assets') || marker.getAttribute('href');
+  // Last-resort default — relative to the page.
+  return './kensho-viewer-assets';
+}
+// Apply a loaded `KenshoState` onto window globals so the legacy components
+// can read them. Mirrors the assignments in `assets/data-bridge.jsx`.
+function applyToWindow(state) {
+  Object.assign(window, {
+    KENSHO_INDEX: state.kenshoIndex,
+    KENSHO_REPORT_TYPE: state.reportType,
+    RUN: state.run,
+    ENV: state.env,
+    SUITES: state.suites,
+    TESTS: state.tests,
+    RICH_TESTS: state.richTests,
+    SUITE_TREE: state.suiteTree,
+    BEHAVIOR_TREE: state.behaviorTree,
+    CATEGORIES: state.categories,
+    TIMELINE_TESTS: state.timelineTests,
+    TREND_RUNS: state.trendRuns,
+    HISTOGRAM: state.histogram,
+    HISTORY_RUNS: state.historyRuns,
+    _kenshoEnsureCase: state.ensureCaseLoaded,
+    _kenshoLoadCase: state.loadCase,
+    _kenshoFmtDuration: state.fmtDuration,
+    _kenshoRelTime: state.relTime,
+  });
+  // Mark __KENSHO_BOOT as resolved so any late-arriving legacy code path
+  // (which awaits it) proceeds without waiting for a real fetch.
+  window.__KENSHO_BOOT = Promise.resolve();
+}
+// Re-export for advanced consumers.
+export { loadKenshoData };
+export default KenshoViewer;