@autono/open-pages 0.1.0

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

@@ -0,0 +1,26 @@
+'use client';
+
+import * as React from 'react';
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';
+
+import { cn } from '@/lib/utils';
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive>) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-hairline data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

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

@@ -0,0 +1,68 @@
+import * as React from "react"
+import { Slider as DocrPrimitive } from "@base-ui/react/slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof DocrPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <DocrPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      className={cn(
+        "group/slider relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <DocrPrimitive.Control
+        data-slot="slider-control"
+        className="relative flex w-full grow items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col"
+      >
+        <DocrPrimitive.Track
+          data-slot="slider-track"
+          className={cn(
+            "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-[3px] data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-[3px]"
+          )}
+        >
+          <DocrPrimitive.Indicator
+            data-slot="slider-range"
+            className={cn(
+              "absolute bg-foreground data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            )}
+          />
+        </DocrPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <DocrPrimitive.Thumb
+            data-slot="slider-thumb"
+            index={index}
+            key={index}
+            className="block size-3.5 shrink-0 rounded-full border border-foreground bg-card shadow-edge transition-transform hover:scale-110 focus-visible:scale-110 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring/50 disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </DocrPrimitive.Control>
+    </DocrPrimitive.Root>
+  )
+}
+
+export { Slider }

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

@@ -0,0 +1,48 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "8px",
+          "--font-family":
+            "Geist Variable, -apple-system, BlinkMacSystemFont, sans-serif",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast:
+            "!font-sans !text-[12.5px] !shadow-floating !border-border !rounded-[8px]",
+          title: "!font-medium !text-[12.5px] !tracking-tight",
+          description: "!text-[12px] !text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

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

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
+
+import { cn } from '@/lib/utils';
+
+function Tabs({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-[6px] p-[2px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-7 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted/70 ring-1 ring-inset ring-border/60',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-[5px] border border-transparent px-2.5 text-[12px] font-medium whitespace-nowrap text-foreground/55 transition-colors group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+        'data-active:bg-card data-active:text-foreground data-active:shadow-edge dark:data-active:bg-foreground/10',
+        'after:absolute after:bg-brand after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:-bottom-[6px] group-data-[orientation=horizontal]/tabs:after:h-[2px] group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn('flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

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

@@ -0,0 +1,22 @@
+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-[6px] border border-border bg-background px-2.5 py-2 text-[13px] leading-relaxed outline-none',
+        'transition-colors placeholder:text-muted-foreground/70',
+        'focus-visible:border-foreground/40 focus-visible:ring-2 focus-visible:ring-ring/30',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/25',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

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

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
+
+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> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive
+      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-[5px]",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <TogglePrimitive
+      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-[5px] data-[spacing=0]:last:rounded-r-[5px] data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </TogglePrimitive>
+  )
+}
+
+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 "@base-ui/react/toggle"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-[5px] text-[12px] font-medium whitespace-nowrap outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 data-pressed:bg-foreground data-pressed:text-background [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent text-foreground/70",
+        outline:
+          "border border-border bg-card text-foreground/75 hover:border-foreground/20 data-pressed:border-foreground",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 px-1.5",
+        lg: "h-9 min-w-9 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

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

@@ -0,0 +1,75 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return <TooltipPrimitive.Provider delay={delay} {...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,
+  side,
+  sideOffset = 0,
+  align,
+  alignOffset,
+  collisionPadding,
+  children,
+  container,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Popup> &
+  Pick<
+    React.ComponentProps<typeof TooltipPrimitive.Positioner>,
+    "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding"
+  > & {
+    container?: React.ComponentProps<typeof TooltipPrimitive.Portal>["container"]
+  }) {
+  return (
+    <TooltipPrimitive.Portal container={container}>
+      <TooltipPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "w-fit origin-(--transform-origin) rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background transition-[transform,scale,opacity] data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-[instant]:duration-0",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow
+            className={cn(
+              "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-inherit",
+              "data-[side=top]:-bottom-2.5 data-[side=bottom]:top-1",
+              "data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2",
+              "data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2",
+            )}
+          />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/app/frame/inspect.ts

@@ -0,0 +1,140 @@
+// Click-to-source inside the page frame. Every host element in page source
+// carries `data-op-loc="<line>:<col>"` (loc-tags plugin, dev only); hovering
+// outlines the innermost tagged element and a click reports it to the
+// workspace window instead of reaching the page.
+
+import type { FrameMessage } from '../lib/frame';
+
+const LOC_ATTR = 'data-op-loc';
+const TEXT_MAX = 120;
+
+type Post = (msg: FrameMessage) => void;
+
+function box(color: string, fill: string): HTMLDivElement {
+  const el = document.createElement('div');
+  el.style.cssText = [
+    'position:fixed',
+    'pointer-events:none',
+    'z-index:2147483647',
+    'border-radius:2px',
+    `border:1.5px solid ${color}`,
+    `background:${fill}`,
+    'display:none',
+    'box-sizing:border-box',
+  ].join(';');
+  return el;
+}
+
+export function installInspector(post: Post) {
+  const hover = box('rgba(59,130,246,0.85)', 'rgba(59,130,246,0.08)');
+  const selected = box('rgb(37,99,235)', 'rgba(37,99,235,0.14)');
+  document.documentElement.append(hover, selected);
+
+  let on = false;
+  let hoverEl: Element | null = null;
+  let selectedLoc: string | null = null;
+  let raf = 0;
+
+  const place = (el: Element | null, target: HTMLDivElement) => {
+    if (!el || !el.isConnected) {
+      target.style.display = 'none';
+      return;
+    }
+    const r = el.getBoundingClientRect();
+    target.style.display = 'block';
+    target.style.left = `${r.left - 2}px`;
+    target.style.top = `${r.top - 2}px`;
+    target.style.width = `${r.width + 4}px`;
+    target.style.height = `${r.height + 4}px`;
+  };
+
+  const findSelected = (): Element | null =>
+    selectedLoc ? document.querySelector(`[${LOC_ATTR}="${CSS.escape(selectedLoc)}"]`) : null;
+
+  const sync = () => {
+    raf = 0;
+    place(on ? hoverEl : null, hover);
+    place(findSelected(), selected);
+  };
+  const schedule = () => {
+    if (!raf) raf = requestAnimationFrame(sync);
+  };
+
+  const targetOf = (e: Event): Element | null => {
+    const t = e.target;
+    if (!(t instanceof Element)) return null;
+    return t.closest(`[${LOC_ATTR}]`);
+  };
+
+  const onMove = (e: MouseEvent) => {
+    if (!on) return;
+    const next = targetOf(e);
+    if (next !== hoverEl) {
+      hoverEl = next;
+      schedule();
+    }
+  };
+  const onLeave = () => {
+    hoverEl = null;
+    schedule();
+  };
+  const onClick = (e: MouseEvent) => {
+    if (!on) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const el = targetOf(e);
+    if (!el) return;
+    const loc = el.getAttribute(LOC_ATTR) ?? '';
+    selectedLoc = loc;
+    schedule();
+    post({
+      type: 'op:select',
+      loc,
+      tag: el.tagName.toLowerCase(),
+      text: (el.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, TEXT_MAX),
+    });
+  };
+  const swallow = (e: Event) => {
+    if (on) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+  const onKey = (e: KeyboardEvent) => {
+    const tag = (e.target as HTMLElement | null)?.tagName;
+    if (
+      tag === 'INPUT' ||
+      tag === 'TEXTAREA' ||
+      (e.target as HTMLElement | null)?.isContentEditable
+    )
+      return;
+    if (e.key === 'i' || e.key === 'Escape') post({ type: 'op:key', key: e.key });
+  };
+
+  document.addEventListener('mousemove', onMove, true);
+  document.addEventListener('mouseleave', onLeave, true);
+  document.addEventListener('click', onClick, true);
+  document.addEventListener('mousedown', swallow, true);
+  document.addEventListener('pointerdown', swallow, true);
+  document.addEventListener('keydown', onKey, true);
+  window.addEventListener('scroll', schedule, true);
+  window.addEventListener('resize', schedule);
+  new MutationObserver(schedule).observe(document.documentElement, {
+    subtree: true,
+    childList: true,
+    attributes: true,
+  });
+
+  return {
+    setInspecting(next: boolean) {
+      on = next;
+      document.documentElement.style.cursor = on ? 'crosshair' : '';
+      if (!on) hoverEl = null;
+      schedule();
+    },
+    setSelected(loc: string | null) {
+      selectedLoc = loc;
+      schedule();
+    },
+  };
+}

package/src/app/frame/main.tsx

@@ -0,0 +1,91 @@
+import 'virtual:open-pages/pages.css';
+import { loadPage } from 'virtual:open-pages/pages';
+import { loadThemeDemo } from 'virtual:open-pages/themes';
+import { createElement, StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import type { FrameMessage, WorkspaceMessage } from '../lib/frame';
+import { pageChangeIncludes } from '../lib/pages';
+import type { PageModule } from '../lib/sdk';
+import { installInspector } from './inspect';
+
+const params = new URLSearchParams(window.location.search);
+const pageId = params.get('page');
+const themeId = params.get('theme');
+
+const embedded = window.parent !== window;
+const post = (msg: FrameMessage) => {
+  if (embedded) window.parent.postMessage(msg, '*');
+};
+
+// biome-ignore lint/style/noNonNullAssertion: #root is guaranteed by frame.html
+const root = createRoot(document.getElementById('root')!);
+
+function renderError(message: string) {
+  root.render(
+    createElement(
+      'pre',
+      {
+        style: {
+          margin: 0,
+          padding: '16px 20px',
+          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+          fontSize: 12,
+          lineHeight: 1.5,
+          color: '#b91c1c',
+          background: '#fef2f2',
+          whiteSpace: 'pre-wrap',
+        },
+      },
+      message,
+    ),
+  );
+  post({ type: 'op:error', message });
+}
+
+async function load(): Promise<PageModule> {
+  if (themeId) return loadThemeDemo(themeId);
+  if (pageId) return loadPage(pageId);
+  throw new Error('frame.html needs ?page=<id> or ?theme=<id>');
+}
+
+let seq = 0;
+async function mount() {
+  const my = ++seq;
+  try {
+    const mod = await load();
+    if (my !== seq) return;
+    if (typeof mod.default !== 'function') {
+      throw new Error(
+        `${themeId ? `themes/${themeId}.demo.tsx` : `pages/${pageId}/index.tsx`} must default-export a component. Got: ${typeof mod.default}`,
+      );
+    }
+    const title = mod.meta?.title ?? pageId ?? themeId ?? '';
+    document.title = title;
+    root.render(createElement(StrictMode, null, createElement(mod.default)));
+    post({ type: 'op:ready', title });
+  } catch (e) {
+    if (my !== seq) return;
+    renderError(e instanceof Error ? (e.stack ?? e.message) : String(e));
+  }
+}
+
+void mount();
+
+if (import.meta.hot && pageId) {
+  import.meta.hot.on('open-pages:page-changed', (data: unknown) => {
+    if (!pageChangeIncludes(data, pageId)) return;
+    // The virtual module refreshes its cache-bust token on this same event.
+    queueMicrotask(() => void mount());
+  });
+}
+
+if (embedded && import.meta.env.DEV) {
+  const inspector = installInspector(post);
+  window.addEventListener('message', (event: MessageEvent<WorkspaceMessage>) => {
+    if (event.source !== window.parent) return;
+    const msg = event.data;
+    if (!msg || typeof msg !== 'object') return;
+    if (msg.type === 'op:inspect') inspector.setInspecting(msg.on);
+    else if (msg.type === 'op:select') inspector.setSelected(msg.loc);
+  });
+}