@open-slide/core 0.0.8 → 0.0.9

package/src/app/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/app/components/ui/toggle-group.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/app/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/app/components/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/app/lib/export-pdf.ts

@@ -0,0 +1,197 @@
+// Exports a slide as a PDF via the browser's native print engine.
+// Each page in `slide.default` becomes one PDF page at 1920×1080.
+// Text stays selectable and inline SVG remains vector — `window.print()`
+// preserves both. The user picks "Save as PDF" in the print dialog.
+
+import { createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+import { isFrameAnimationSettled, waitForDataWaitfor, waitForFonts } from './print-ready';
+import type { SlideModule } from './sdk';
+
+const PRINT_ROOT_ID = 'os-print-root';
+const PRINT_STYLE_ID = 'os-print-style';
+
+const PRINT_STYLES = `
+@page { size: 1920px 1080px; margin: 0; }
+
+@media screen {
+  #${PRINT_ROOT_ID} {
+    position: fixed !important;
+    left: -99999px !important;
+    top: 0 !important;
+    pointer-events: none !important;
+  }
+}
+
+@media print {
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #fff !important;
+  }
+  body > *:not(#${PRINT_ROOT_ID}) { display: none !important; }
+  #${PRINT_ROOT_ID} {
+    position: static !important;
+    left: 0 !important;
+    top: 0 !important;
+    pointer-events: auto !important;
+    display: block !important;
+    background: #fff !important;
+  }
+  #${PRINT_ROOT_ID} .os-print-frame {
+    width: 1920px !important;
+    height: 1080px !important;
+    background: #fff;
+    color: #000;
+    overflow: hidden;
+    page-break-after: always;
+    break-after: page;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+  #${PRINT_ROOT_ID} .os-print-frame:last-child {
+    page-break-after: auto;
+    break-after: auto;
+  }
+  /* Supersample: Chrome rasterizes filtered/composited layers (e.g. filter:
+     blur, mix-blend-mode) at the layer's CSS-pixel size, so a blurred
+     gradient on a 1920×1080 page bakes in at ~1× DPI and bands when the PDF
+     is viewed scaled up. zoom:2 doubles the layer raster size; scale(0.5)
+     composites it back to 1920×1080. Vector content (text, plain CSS
+     gradients, SVG) stays vector through both transforms. */
+  #${PRINT_ROOT_ID} .os-print-supersample {
+    width: 1920px !important;
+    height: 1080px !important;
+    zoom: 2;
+    transform: scale(0.5);
+    transform-origin: top left;
+  }
+}
+`;
+
+export type PdfExportProgress = {
+  phase: 'processing' | 'printing' | 'done';
+  /** Number of pages whose intro animations have finished (0..total). */
+  current: number;
+  total: number;
+  /** 0–99 while processing, 99 during printing, 100 when done. */
+  percent: number;
+};
+
+const ANIMATION_TIMEOUT_MS = 15_000;
+const POLL_INTERVAL_MS = 100;
+
+export async function exportSlideAsPdf(
+  slide: SlideModule,
+  slideId: string,
+  onProgress?: (progress: PdfExportProgress) => void,
+): Promise<void> {
+  const pages = slide.default ?? [];
+  if (pages.length === 0) return;
+
+  const total = pages.length;
+
+  const style = document.createElement('style');
+  style.id = PRINT_STYLE_ID;
+  style.textContent = PRINT_STYLES;
+  document.head.appendChild(style);
+
+  const root = document.createElement('div');
+  root.id = PRINT_ROOT_ID;
+  root.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(root);
+
+  onProgress?.({ phase: 'processing', current: 0, total, percent: 0 });
+
+  const reactRoots: Root[] = [];
+  const frames: HTMLElement[] = [];
+  for (const Page of pages) {
+    const host = document.createElement('div');
+    host.className = 'os-print-frame';
+    host.style.width = '1920px';
+    host.style.height = '1080px';
+    const inner = document.createElement('div');
+    inner.className = 'os-print-supersample';
+    inner.style.width = '1920px';
+    inner.style.height = '1080px';
+    host.appendChild(inner);
+    root.appendChild(host);
+    frames.push(host);
+    const r = createRoot(inner);
+    r.render(createElement(Page));
+    reactRoots.push(r);
+  }
+  // Yield once so React commits all pages and CSS animations actually start
+  // (queued via Web Animations API on the first paint after mount).
+  await nextPaint();
+
+  const previousTitle = document.title;
+  document.title = slide.meta?.title ?? slideId;
+
+  try {
+    await waitForFonts();
+
+    // Poll per-page animation completion. The bar tracks how many pages have
+    // settled, which matches "page X of N is being processed" mental model.
+    const deadline = performance.now() + ANIMATION_TIMEOUT_MS;
+    while (performance.now() < deadline) {
+      const settled = frames.reduce(
+        (n, frame) => (isFrameAnimationSettled(frame) ? n + 1 : n),
+        0,
+      );
+      onProgress?.({
+        phase: 'processing',
+        current: settled,
+        total,
+        percent: Math.min(99, (settled / total) * 99),
+      });
+      if (settled === total) break;
+      await sleep(POLL_INTERVAL_MS);
+    }
+
+    await waitForDataWaitfor(root);
+    await sleep(100); // flush layout
+
+    onProgress?.({ phase: 'printing', current: total, total, percent: 99 });
+    const printDone = waitForAfterPrint();
+    window.print();
+    await printDone;
+  } finally {
+    onProgress?.({ phase: 'done', current: total, total, percent: 100 });
+    document.title = previousTitle;
+    for (const r of reactRoots) r.unmount();
+    root.remove();
+    style.remove();
+  }
+}
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+function nextPaint(): Promise<void> {
+  // rAF in real tabs; setTimeout fallback for hidden/throttled headless tabs.
+  return new Promise((resolve) => {
+    let settled = false;
+    const settle = () => {
+      if (settled) return;
+      settled = true;
+      resolve();
+    };
+    requestAnimationFrame(settle);
+    setTimeout(settle, 50);
+  });
+}
+
+function waitForAfterPrint(timeoutMs = 60_000): Promise<void> {
+  return new Promise((resolve) => {
+    const cleanup = () => {
+      window.removeEventListener('afterprint', onAfter);
+      clearTimeout(timer);
+      resolve();
+    };
+    const onAfter = () => cleanup();
+    const timer = setTimeout(cleanup, timeoutMs);
+    window.addEventListener('afterprint', onAfter, { once: true });
+  });
+}

package/src/app/lib/inspector/fiber.ts

@@ -4,6 +4,13 @@ export type SlideSourceHit = {
   anchor: HTMLElement;
 };
 
+export type FindSlideSourceOptions = {
+  // Visual editor uses this: skip component-invocation JSX (`<MyComp/>`)
+  // since most components don't forward `style`. Comments leave it off
+  // so any JSX can be annotated.
+  hostOnly?: boolean;
+};
+
 type FiberLike = {
   return: FiberLike | null;
   stateNode?: unknown;
@@ -21,17 +28,45 @@ function getSource(fiber: FiberLike) {
   return fiber._debugSource ?? fiber.memoizedProps?.__source;
 }
 
-export function findSlideSource(el: HTMLElement, slideId: string): SlideSourceHit | null {
+export function findSlideSource(
+  el: HTMLElement,
+  slideId: string,
+  opts?: FindSlideSourceOptions,
+): SlideSourceHit | null {
+  // Primary path: the `data-slide-loc` attribute injected by the
+  // loc-tags Vite plugin. Immune to HMR-stale fiber state.
+  const tagged = el.closest<HTMLElement>('[data-slide-loc]');
+  if (tagged) {
+    const loc = tagged.dataset.slideLoc;
+    if (loc) {
+      const idx = loc.indexOf(':');
+      if (idx > 0) {
+        const line = Number(loc.slice(0, idx));
+        const column = Number(loc.slice(idx + 1));
+        if (Number.isFinite(line) && Number.isFinite(column)) {
+          return { line, column, anchor: tagged };
+        }
+      }
+    }
+  }
+
+  // Fallback for JSX rendered from imported component files (which the
+  // loc-tags plugin doesn't transform).
   const needle = `/slides/${slideId}/index.tsx`;
   let fiber = getFiber(el);
   let anchor: HTMLElement = el;
   while (fiber) {
     const src = getSource(fiber);
-    if (src?.fileName?.endsWith(needle) && src.lineNumber) {
-      return { line: src.lineNumber, column: src.columnNumber ?? 0, anchor };
+    const isHost = fiber.stateNode instanceof HTMLElement;
+    if (src?.fileName?.endsWith(needle) && src.lineNumber && (!opts?.hostOnly || isHost)) {
+      return {
+        line: src.lineNumber,
+        column: src.columnNumber ?? 0,
+        anchor: isHost ? (fiber.stateNode as HTMLElement) : anchor,
+      };
     }
-    if (fiber.stateNode instanceof HTMLElement) {
-      anchor = fiber.stateNode;
+    if (isHost) {
+      anchor = fiber.stateNode as HTMLElement;
     }
     fiber = fiber.return;
   }

package/src/app/lib/inspector/useEditor.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+
+export type EditOp =
+  | { kind: 'set-style'; key: string; value: string | null }
+  | { kind: 'set-text'; value: string };
+
+export type Edit = { line: number; column: number; ops: EditOp[] };
+
+export class NoOpEditError extends Error {
+  constructor() {
+    super(
+      'Edit completed but the source file did not change — the target JSX may already match, or the target element may not be directly editable here.',
+    );
+    this.name = 'NoOpEditError';
+  }
+}
+
+export function useEditor(slideId: string) {
+  const applyEdit = useCallback(
+    async (line: number, column: number, ops: EditOp[]) => {
+      const res = await fetch('/__edit', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId, line, column, ops }),
+      });
+      const body = (await res.json().catch(() => ({}))) as { error?: string; changed?: boolean };
+      if (!res.ok) {
+        throw new Error(body.error ?? `POST /__edit → ${res.status}`);
+      }
+      if (body.changed === false) {
+        throw new NoOpEditError();
+      }
+    },
+    [slideId],
+  );
+
+  // Batch many element edits into one file write and one HMR tick.
+  const applyEdits = useCallback(
+    async (edits: Edit[]) => {
+      if (edits.length === 0) return;
+      const res = await fetch('/__edit/batch', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ slideId, edits }),
+      });
+      const body = (await res.json().catch(() => ({}))) as {
+        error?: string;
+        changed?: boolean;
+        results?: Array<{ ok: boolean; error?: string }>;
+      };
+      if (!res.ok) {
+        throw new Error(body.error ?? `POST /__edit/batch → ${res.status}`);
+      }
+      const failed = body.results?.find((r) => !r.ok);
+      if (failed?.error) throw new Error(failed.error);
+    },
+    [slideId],
+  );
+
+  return { applyEdit, applyEdits };
+}

package/src/app/lib/print-ready.ts

@@ -0,0 +1,58 @@
+// Helpers used by the PDF export flow to wait for the page to settle before
+// invoking window.print(). Browser-only — no Node / headless dependency.
+
+const DEFAULT_WAITFOR_TIMEOUT_MS = 10_000;
+
+export async function waitForFonts(): Promise<void> {
+  if (!('fonts' in document)) return;
+  await document.fonts.ready;
+  const pending: Promise<unknown>[] = [];
+  for (const face of document.fonts) {
+    if (face.status !== 'loaded') pending.push(face.load());
+  }
+  if (pending.length) {
+    await Promise.all(pending.map((p) => p.catch(() => undefined)));
+  }
+}
+
+export async function waitForDataWaitfor(
+  root: HTMLElement,
+  timeoutMs = DEFAULT_WAITFOR_TIMEOUT_MS,
+): Promise<void> {
+  const targets = Array.from(root.querySelectorAll<HTMLElement>('[data-waitfor]'));
+  if (targets.length === 0) return;
+  const deadline = performance.now() + timeoutMs;
+  await Promise.all(
+    targets.map(async (el) => {
+      const selector = el.getAttribute('data-waitfor');
+      if (!selector) return;
+      while (performance.now() < deadline) {
+        try {
+          if (el.querySelector(selector)) return;
+        } catch {
+          return; // invalid selector — skip rather than hang
+        }
+        await nextFrame();
+      }
+    }),
+  );
+}
+
+/** Returns true if `frame` has no running finite-iteration animations. */
+export function isFrameAnimationSettled(frame: Element): boolean {
+  if (typeof document.getAnimations !== 'function') return true;
+  for (const anim of document.getAnimations()) {
+    const effect = anim.effect as KeyframeEffect | null;
+    if (!effect) continue;
+    const target = effect.target;
+    if (!target || !frame.contains(target)) continue;
+    const timing = effect.getComputedTiming();
+    if (timing.iterations === Infinity) continue;
+    if (anim.playState !== 'finished') return false;
+  }
+  return true;
+}
+
+function nextFrame(): Promise<void> {
+  return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}

package/src/app/routes/Slide.tsx

@@ -1,14 +1,17 @@
 import config from 'virtual:open-slide/config';
-import { ChevronLeft, Download, FileCode2, Loader2, Pencil, Play } from 'lucide-react';
+import { ChevronLeft, Download, FileCode2, FileText, Loader2, Pencil, Play } from 'lucide-react';
 import { type RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Link, useParams, useSearchParams } from 'react-router-dom';
+import { toast } from 'sonner';
 import { CommentWidget } from '@/components/inspector/CommentWidget';
 import { InspectOverlay } from '@/components/inspector/InspectOverlay';
+import { InspectorPanel } from '@/components/inspector/InspectorPanel';
 import {
   InspectorProvider,
   InspectToggleButton,
   useInspector,
 } from '@/components/inspector/InspectorProvider';
+import { SaveBar } from '@/components/inspector/SaveBar';
 import { Button, buttonVariants } from '@/components/ui/button';
 import {
   DropdownMenu,
@@ -21,10 +24,12 @@ import { useFolders } from '@/lib/folders';
 import { useWheelPageNavigation } from '@/lib/useWheelPageNavigation';
 import { cn } from '@/lib/utils';
 import { ClickNavZones } from '../components/ClickNavZones';
+import { PdfProgressToast } from '../components/PdfProgressToast';
 import { Player } from '../components/Player';
 import { SlideCanvas } from '../components/SlideCanvas';
 import { ThumbnailRail } from '../components/ThumbnailRail';
 import { exportSlideAsHtml } from '../lib/export-html';
+import { exportSlideAsPdf } from '../lib/export-pdf';
 import type { SlideModule } from '../lib/sdk';
 import { loadSlide } from '../lib/slides';
 
@@ -218,6 +223,44 @@ export function Slide() {
                     <FileCode2 />
                     Download HTML
                   </DropdownMenuItem>
+                  <DropdownMenuItem
+                    disabled={exporting}
+                    onSelect={async () => {
+                      if (!slide || exporting) return;
+                      setExporting(true);
+                      const toastId = `pdf-export-${slideId}`;
+                      toast.custom(
+                        () => (
+                          <PdfProgressToast
+                            progress={{
+                              phase: 'processing',
+                              current: 0,
+                              total: pages.length,
+                              percent: 0,
+                            }}
+                          />
+                        ),
+                        { id: toastId, duration: Infinity },
+                      );
+                      try {
+                        await exportSlideAsPdf(slide, slideId, (p) => {
+                          toast.custom(() => <PdfProgressToast progress={p} />, {
+                            id: toastId,
+                            duration: Infinity,
+                          });
+                        });
+                      } catch (err) {
+                        console.error('[open-slide] pdf export failed', err);
+                        toast.error('PDF export failed', { id: toastId, duration: 4000 });
+                      } finally {
+                        setExporting(false);
+                        toast.dismiss(toastId);
+                      }
+                    }}
+                  >
+                    <FileText />
+                    Download PDF
+                  </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             )}
@@ -258,13 +301,14 @@ export function Slide() {
               canNext={index < pageCount - 1}
             />
             <InspectOverlay />
+            <SaveBar />
+            <CommentWidget />
             <div className="pointer-events-none absolute bottom-3 left-1/2 z-10 -translate-x-1/2 rounded-full bg-black/50 px-2.5 py-0.5 text-[11px] font-medium tabular-nums text-white backdrop-blur md:hidden">
               {index + 1} / {pageCount}
             </div>
           </main>
+          <InspectorPanel />
         </div>
-
-        <CommentWidget />
       </div>
     </InspectorProvider>
   );