beast-devtools 0.0.1

package/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "dev",
+      "runtimeExecutable": "bun",
+      "runtimeArgs": ["run", "dev", "--port", "5173", "--strictPort"],
+      "port": 5173
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,37 @@
+# Changelog
+
+All notable changes to `beast-devtools` will be recorded here.
+
+## [Unreleased]
+
+### Added
+
+- Beast DevTools, an in-page overlay for `vite dev` (toggle with Alt+Shift+D):
+  - **Components**: live Octane component tree and hook values named after
+    their `setup` bindings, with context and the declaring `.btsx` line.
+  - **BTSX → TSRX**: source next to the generated TSRX, with line linking
+    through Beast's source map and compile diagnostics.
+  - **Refactor**: nesting depth per line, plus extraction suggestions for deep
+    sections (typed props, ready-to-paste `component` snippets) and detection
+    of structurally identical blocks.
+- Automatic refactors from the Refactor panel. A section can be hoisted into a
+  local `component` in the same file, or moved to its own `Name.btsx` with its
+  imports and exported module types and values. Sections of at least
+  `fileLines` lines (default 30) default to their own file. Every change is
+  previewed as a diff, compiled through Beast and Octane before writing, and
+  can be undone.
+- `bun run test`, which runs the analyzer suite and compiles every overlay
+  component through Beast and Octane.
+- The devtools are packaged as `@beastjs/devtools` (version 0.1.0, ISC) in a
+  Bun workspace. `devtools/` has its own manifest, build to `dist/`, README,
+  CHANGELOG and LICENSE; the playground app consumes it by name.
+
+### Changed
+
+- The playground builds the devtools plugin before `dev` and `check`.
+  `bun run devtools:pack` previews the published files.
+- `beastOctane()` now uses `profile: "auto"` so dev builds expose Octane's
+  runtime inspection hook; production builds are unchanged.
+- Tailwind no longer scans `devtools/`, since the overlay ships its own
+  prefixed stylesheet.
+- `bun run check` now also runs the tests.

package/README.md

@@ -0,0 +1,87 @@
+# beast-devtools
+
+A [Beast](https://www.npmjs.com/package/beast-tsrx) project powered by
+[TSRX](https://tsrx.dev/) and [Octane](https://octanejs.dev/).
+
+```bash
+bun install
+bun run dev
+```
+
+Edit `src/App.btsx` to get started. Declare typed props at the top of the BTSX
+file; the Beast bundler adapter compiles it into native TSRX and then lets Octane
+produce the browser module.
+
+The starter pins the tested `octane@0.4.3` toolchain. Run the complete local
+verification before shipping:
+
+```bash
+bun run check
+```
+
+Use `scope` when setup belongs to an exact child position instead of the whole
+component:
+
+```btsx
+scope
+  setup const label = "Owned by this child";
+  p #{label}
+```
+
+Octane signals need no build option. Import `octane/signals` in a module to
+enable native signal reads there:
+
+```btsx
+import { createScope } from "octane/signals"
+```
+
+Record application changes in [CHANGELOG.md](CHANGELOG.md).
+
+## Beast DevTools
+
+This repository develops [`@beastjs/devtools`](devtools/README.md), an in-page
+devtools overlay for Beast and Octane apps. The package lives in
+[`devtools/`](devtools/) as a Bun workspace. The app at the root is its
+playground and uses the package by name, the same way a real app would:
+
+```ts
+// vite.config.ts
+beastOctane({ octane: { profile: "auto" } }), // runtime hook in dev only
+beastDevtools({ include: ["src"], analyzer: { depthLimit: 5, minLines: 8, fileLines: 30 } }),
+```
+
+`bun run dev` builds the plugin and starts the playground. Open the overlay
+from the **Beast** button or with <kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>.
+See the [package README](devtools/README.md) for what each panel does.
+
+| Path | Contents |
+| --- | --- |
+| `devtools/vite.ts` | The Vite plugin: injects the overlay, serves its JSON API, and pushes an HMR event when `.btsx` files change. |
+| `devtools/server/` | Node side: compiles, source-maps, analyzes and refactors `.btsx` files. Built to `devtools/dist/`. |
+| `devtools/client/` | The overlay, written in BTSX. It ships as source and is compiled by the host app's toolchain. |
+| `devtools/shared/` | Wire types shared by both sides. |
+| `devtools/test/fixtures/` | A snapshot of the deeply nested starter `App.btsx` that the analyzer tests run against. |
+
+Edits under `devtools/client/` hot-reload in the playground. Changes to
+`devtools/vite.ts` or `devtools/server/` need `bun run --cwd devtools build`
+and a dev-server restart.
+
+### Publishing
+
+1. Update `version` in [`devtools/package.json`](devtools/package.json) and add
+   an entry to [`devtools/CHANGELOG.md`](devtools/CHANGELOG.md).
+2. Run `bun run check` (type check, tests, plugin build, app build).
+3. Run `bun run devtools:pack` to review exactly which files will be published.
+4. Publish from the package directory: `cd devtools && npm publish`.
+   `prepublishOnly` rebuilds and retests, and `publishConfig.access` is `public`.
+   You must be logged in to npm with publish rights on the `@beastjs` scope.
+
+## Selected stack
+
+- Bundler: vite
+- UI: base-ui (@octanejs/base-ui)
+- Styling: Tailwind CSS v4
+
+```ts
+import { Button } from "@octanejs/base-ui/button";
+```

package/devtools/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+All notable changes to `@beastjs/devtools` are recorded here.
+
+## 0.1.0
+
+First release: an in-page overlay for Beast (BTSX) and Octane apps during
+`vite dev`. Toggle it with Alt+Shift+D.
+
+### Added
+
+- **Components**: the live Octane component tree, including `each`/`if`
+  scopes. Hook values are named after their `setup` bindings, alongside
+  context values and the `.btsx` line that declares the component.
+- **BTSX → TSRX**: each `.btsx` file next to the TSRX Beast generates for it,
+  with line linking through Beast's source map and `BEAST####` compile
+  diagnostics.
+- **Refactor**: nesting depth for every template line, suggestions for
+  extracting deep sections into components with inferred, typed props, and
+  detection of structurally identical blocks.
+- **Automatic refactors**: hoist a section into a local `component`, or move it
+  to its own `Name.btsx` with the imports and exported module types and values
+  it needs. Every change is previewed as a diff, compiled through Beast and
+  Octane before anything is written, and can be undone.
+- `beastDevtools({ include, analyzer })` options for source directories and
+  analyzer defaults (`depthLimit`, `minLines`, `fileLines`).

package/devtools/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026, phtn
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/devtools/README.md

@@ -0,0 +1,164 @@
+# @beastjs/devtools
+
+In-page devtools for [Beast](https://www.npmjs.com/package/beast-tsrx) (BTSX)
+and [Octane](https://octanejs.dev/) apps. It adds a panel to your app during
+`vite dev` that shows live component state, puts each `.btsx` file next to the
+TSRX it compiles to, and finds deeply nested templates. It can then extract
+those sections into components for you.
+
+Production builds are untouched: the plugin only runs on the dev server.
+
+## Requirements
+
+| Package      | Version     |
+| ------------ | ----------- |
+| `beast-tsrx` | `^0.4.3`    |
+| `octane`     | `^0.4.3`    |
+| `vite`       | `^8.0.16`   |
+| Node.js      | `>=22.22.2` |
+
+## Install
+
+```bash
+bun add -d @beastjs/devtools
+```
+
+Or with npm: `npm install -D @beastjs/devtools`.
+
+## Setup
+
+Add the plugin next to `beastOctane()` in `vite.config.ts`:
+
+```ts
+import { beastOctane } from 'beast-tsrx/vite'
+import { beastDevtools } from '@beastjs/devtools'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    // `profile: 'auto'` compiles Octane's runtime inspection hook into dev
+    // builds only. Without it, the Components panel explains how to enable it.
+    beastOctane({ octane: { profile: 'auto' } }),
+    beastDevtools(),
+  ],
+})
+```
+
+Run `vite` (or `bun run dev`), then open the panel from the **Beast** button in
+the bottom-right corner or with <kbd>Alt</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>.
+The panel remembers its size, tab and settings per browser.
+
+## Panels
+
+### Components
+
+The live Octane component tree, including the `each`/`if` scopes Beast
+templates create. Selecting a component shows:
+
+- its hook values, named after the `setup` bindings that declare them (for
+  example `activeId: "language"`);
+- context values and the number of effect slots;
+- the `.btsx` line that declares it, with buttons to open it in your editor or
+  view its compiled TSRX.
+
+### BTSX → TSRX
+
+Any `.btsx` file next to the TSRX that Beast generates for it. Hovering a line
+highlights its counterpart through Beast's source map; clicking pins it. A file
+that fails to compile shows its `BEAST####` diagnostic and the failing line.
+Both panes update when you save.
+
+### Refactor
+
+The structural nesting depth of every template line, with totals and a
+per-depth chart, plus two kinds of suggestions:
+
+- **Extract**: a section nested deeper than the depth limit becomes a component.
+  Its props and their types are inferred from the bindings the section uses,
+  and a loop's `key` stays at the call site.
+- **Shared shape**: structurally identical blocks that one component could
+  replace.
+
+The toolbar adjusts the depth limit, the smallest section worth extracting,
+and the size at which a section defaults to its own file.
+
+## Automatic refactors
+
+Each suggestion card can apply itself in one of two ways:
+
+- **Hoist in file** adds a local `component` above the host component's
+  `props`/`setup` and replaces the section with a call.
+- **Move to `Name.btsx`** writes the section to a new file next to the source.
+  The new file gets the imports it needs. Module-level types and values the
+  section uses are exported from the source and imported back (type-only where
+  possible), and the source imports the new component.
+
+Sections of at least **New file at** lines (default 30) default to their own
+file. Clicking a target first shows a diff of every file it will touch, and
+nothing is written until you confirm. After applying, **Undo** restores the
+files, unless they have been edited since. Undo history lives in the dev
+server's memory, so it is lost when the server restarts.
+
+Automatic refactors are conservative:
+
+- The dev server recomputes the change from the file on disk. The browser only
+  names the suggestion, and changes to a file that changed since it was
+  analyzed are refused.
+- Every resulting file must compile through Beast and Octane before anything
+  is written.
+- The write endpoints accept only same-origin JSON requests, and only for
+  `.btsx` files in the configured directories.
+- Automatic refactoring is refused when it cannot be done safely:
+  - copies that differ from each other, or that live in different components;
+  - components with scoped `style` blocks;
+  - moving a section that uses a file-local `component` into a new file.
+
+  The card explains why, and the code can still be copied by hand.
+
+## Options
+
+```ts
+beastDevtools({
+  include: ['src'],
+  analyzer: { depthLimit: 5, minLines: 8, fileLines: 30 },
+})
+```
+
+| Option                | Default   | Description                                                             |
+| --------------------- | --------- | ----------------------------------------------------------------------- |
+| `include`             | `['src']` | Directories, relative to the Vite root, scanned for `.btsx` files.      |
+| `analyzer.depthLimit` | `5`       | Template nesting depth (0 = component root) above which lines are deep. |
+| `analyzer.minLines`   | `8`       | Smallest section, in lines, worth extracting.                           |
+| `analyzer.fileLines`  | `30`      | Sections at least this long move to their own file by default.          |
+
+The overlay's own settings override the analyzer defaults for that browser.
+
+## How it works
+
+- The plugin injects the overlay into `index.html` and serves a small JSON API
+  under `/__beast-devtools/api`. That API compiles, source-maps, analyzes and
+  refactors `.btsx` files with `beast-tsrx`. It also sends an HMR event when a
+  `.btsx` file changes.
+- The overlay is itself written in BTSX and ships as source, so your app's own
+  Beast and Octane versions compile it. It reads the component tree from
+  Octane's `__OCTANE_DEVTOOLS__` hook, which `profile: 'auto'` enables in dev
+  builds. The plugin dedupes `octane` so the overlay and the app share one
+  runtime.
+- Opening files in your editor uses Vite's built-in `/__open-in-editor`
+  endpoint, which honors the `LAUNCH_EDITOR` environment variable.
+
+## Limitations
+
+- Hook values are matched to `setup` bindings by position and kind. When they
+  don't line up (custom hooks, for example), the panel shows positions such as
+  `#0` instead of guessing.
+- Props whose type cannot be read from the source are typed `any` in extracted
+  components.
+- Moving a section that uses module-level values makes the two files import
+  each other. This is safe because the values are read at render time, but the
+  import cycle is worth knowing about.
+- Imports that only the moved section used are left in the source file.
+
+## License
+
+ISC

package/devtools/client/BeastDevtools.btsx

@@ -0,0 +1,185 @@
+import { useEffect, useState, useSyncExternalStore } from 'octane'
+import type { AnalyzerSettings, FileReport, ProjectReport } from '../shared/types.ts'
+import ComponentsPanel from './ComponentsPanel.btsx'
+import InspectorPanel from './InspectorPanel.btsx'
+import RefactorPanel from './RefactorPanel.btsx'
+import { fetchFile, fetchProject, onSourceChanged } from './api.ts'
+import { getRuntimeSnapshot, subscribeRuntime } from './runtime.ts'
+import { clampHeight, cx, loadPreferences, savePreferences, scrollTarget, startResize, type RecentRefactor, type ScrollTarget, type TabId } from './util.ts'
+
+module
+  const TABS: ReadonlyArray<{ id: TabId; label: string }> = [
+    { id: 'components', label: 'Components' },
+    { id: 'inspector', label: 'BTSX → TSRX' },
+    { id: 'refactor', label: 'Refactor' },
+  ]
+  const LOGO_PATH = 'm8.393 1.002-.205.006a7.3 7.3 0 0 0-3.024.742 7.43 7.43 0 0 0-3.786 4.317 7.3 7.3 0 0 0-.375 2.145 7.34 7.34 0 0 0 .941 3.808 7.5 7.5 0 0 0 2.653 2.731 7.37 7.37 0 0 0 4.231 1.042 7 7 0 0 0 .917-.11 7.4 7.4 0 0 0 4.446-2.673 7.37 7.37 0 0 0 1.597-4.109c.012-.157.012-.828 0-.994a7.3 7.3 0 0 0-.747-2.768 7.3 7.3 0 0 0-1.128-1.67 11 11 0 0 0-.577-.577 7.4 7.4 0 0 0-2.612-1.516 7.5 7.5 0 0 0-2.099-.368 6 6 0 0 1-.232-.006M8.11 3.488a5.4 5.4 0 0 0-.808.114 5 5 0 0 0-1.074.379l-.047.024 1.11 1.11 1.11 1.109 1.109-1.11 1.11-1.11-.048-.023a4.9 4.9 0 0 0-1.811-.487 8 8 0 0 0-.651-.006M3.955 6.281a4.9 4.9 0 0 0-.48 1.854 4.9 4.9 0 0 0 .503 2.441l.024.047 1.11-1.11L6.22 8.405l-1.11-1.11L4 6.184zm7.736 1.014-1.11 1.11 1.11 1.109 1.11 1.11.023-.048a4.94 4.94 0 0 0 .503-2.433 5 5 0 0 0-.497-1.898l-.03-.06zM7.29 11.697l-1.108 1.108.097.046c.562.27 1.164.424 1.817.468.165.01.606.005.761-.01a5 5 0 0 0 1.668-.458l.097-.046-1.108-1.108c-.61-.61-1.11-1.109-1.112-1.109s-.502.499-1.112 1.109'
+
+  const initial = loadPreferences()
+
+  /** Alt+Shift+D toggles the panel. `code` is used because Alt changes `key` on macOS. */
+  function isToggleShortcut(event: KeyboardEvent): boolean {
+    return event.altKey && event.shiftKey && !event.metaKey && !event.ctrlKey && event.code === 'KeyD'
+  }
+
+component BeastLogo
+  svg.bdt-logo(viewBox="0 0 16 16" fill="none" aria-hidden="true")
+    path(fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d={LOGO_PATH})
+
+setup
+  const runtime = useSyncExternalStore(subscribeRuntime, getRuntimeSnapshot, getRuntimeSnapshot);
+  const [open, setOpen] = useState(initial.open);
+  const [tab, setTab] = useState<TabId>(initial.tab);
+  const [height, setHeight] = useState(initial.height);
+  const [file, setFile] = useState<string | null>(initial.file);
+  const [showControlFlow, setShowControlFlow] = useState(initial.showControlFlow);
+  const [settings, setSettings] = useState<AnalyzerSettings>(initial.settings);
+  const [focus, setFocus] = useState<ScrollTarget | null>(null);
+  const [revision, setRevision] = useState(0);
+  const [project, setProject] = useState<ProjectReport | null>(null);
+  const [report, setReport] = useState<FileReport | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [recent, setRecent] = useState<RecentRefactor | null>(null);
+  const suggestionCount = project?.files.reduce((sum, entry) => sum + entry.suggestions, 0) ?? 0;
+  const status = runtime.status === 'connected'
+    ? `${runtime.componentCount} component${runtime.componentCount === 1 ? '' : 's'} live`
+    : runtime.status === 'connecting' ? 'Connecting…' : 'Runtime off';
+
+  useEffect(() => {
+    savePreferences({ open, tab, height, file, showControlFlow, settings });
+  }, [open, tab, height, file, showControlFlow, settings]);
+
+  useEffect(() => onSourceChanged(() => setRevision((value) => value + 1)), []);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!isToggleShortcut(event)) return;
+      event.preventDefault();
+      setOpen((value) => !value);
+    };
+    const onResize = () => setHeight((value) => clampHeight(value));
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
+  // The project list refreshes whenever a .btsx file changes on disk.
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    fetchProject(settings).then(
+      (next) => {
+        if (cancelled) return;
+        setProject(next);
+        setLoadError(null);
+        setFile((current) => (current !== null && next.files.some((entry) => entry.path === current) ? current : (next.files[0]?.path ?? null)));
+      },
+      (error: Error) => {
+        if (!cancelled) setLoadError(error.message);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [open, revision, settings]);
+
+  useEffect(() => {
+    if (!open || file === null) return;
+    let cancelled = false;
+    fetchFile(file, settings).then(
+      (next) => {
+        if (cancelled) return;
+        setReport(next);
+        setLoadError(null);
+      },
+      (error: Error) => {
+        if (!cancelled) setLoadError(error.message);
+      },
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [open, file, revision, settings]);
+
+  const viewSource = (path: string, line: number) => {
+    setFile(path);
+    setTab('inspector');
+    setFocus(scrollTarget(line));
+  };
+  const analyze = (path: string) => {
+    setFile(path);
+    setTab('refactor');
+  };
+
+if open
+  section.bdt-root.bdt-dock(aria-label="Beast DevTools" style={{ height: `${height}px` }})
+    div.bdt-resize(
+      ~ role="separator"
+      ~ aria-orientation="horizontal"
+      ~ aria-label="Resize Beast DevTools"
+      ~ onPointerDown={(event) => startResize(event, height, setHeight)}
+      ~ )
+    header.bdt-topbar
+      .bdt-brand
+        BeastLogo
+        div(className="skew-4") Beast
+        span.bdt-brand-sub DevTools
+      nav.bdt-tabs(role="tablist" aria-label="Beast DevTools panels" className="has[:focus]:rounded-sm! rounded-full")
+        each item in TABS key item.id
+          button(
+            ~ type="button"
+            ~ role="tab"
+            ~ aria-selected={tab === item.id}
+            ~ className={cx('bdt-tab', tab === item.id && 'is-active')}
+            ~ onClick={() => setTab(item.id)}
+            ~ )
+            | #{item.label}
+            if item.id === 'refactor' && suggestionCount > 0
+              span.bdt-tab-count(title={`${suggestionCount} refactor suggestion${suggestionCount === 1 ? '' : 's'}`}) #{suggestionCount}
+      .bdt-spacer
+      span.bdt-status
+        span(className={cx('bdt-launcher-dot', runtime.status === 'connected' && 'is-live')})
+        | #{status}
+      button.bdt-icon-button(type="button" aria-label="Close Beast DevTools" title="Close (Alt+Shift+D)" onClick={() => setOpen(false)})
+        svg(viewBox="0 0 16 16" fill="none" aria-hidden="true")
+          path(d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.6" stroke-linecap="round")
+    div.bdt-body(role="tabpanel" aria-label={TABS.find((item) => item.id === tab)?.label})
+      switch tab
+        case 'components'
+          ComponentsPanel(
+            ~ components={project?.components ?? []}
+            ~ showControlFlow={showControlFlow}
+            ~ onShowControlFlowChange={setShowControlFlow}
+            ~ onViewSource={viewSource}
+            ~ onAnalyze={analyze}
+            ~ )
+        case 'inspector'
+          InspectorPanel(
+            ~ files={project?.files ?? []}
+            ~ file={file}
+            ~ report={report}
+            ~ loadError={loadError}
+            ~ focus={focus}
+            ~ onSelectFile={setFile}
+            ~ )
+        default
+          RefactorPanel(
+            ~ files={project?.files ?? []}
+            ~ file={file}
+            ~ report={report}
+            ~ loadError={loadError}
+            ~ settings={settings}
+            ~ recent={recent}
+            ~ onSelectFile={setFile}
+            ~ onSettingsChange={setSettings}
+            ~ onRecentChange={setRecent}
+            ~ )
+else
+  div.bdt-root.bdt-launcher-host
+    button.bdt-launcher(type="button" title="Open Beast DevTools (Alt+Shift+D)" onClick={() => setOpen(true)})
+      BeastLogo
+      span Beast
+      span(className={cx('bdt-launcher-dot', runtime.status === 'connected' && 'is-live')} aria-label={status})

package/devtools/client/CodeView.btsx

@@ -0,0 +1,61 @@
+import { useEffect, useMemo, useRef } from 'octane'
+import type { LineRange } from '../shared/types.ts'
+import { highlight, type Language } from './highlight.ts'
+import { cx, scrollToLine, type ScrollTarget } from './util.ts'
+
+module
+  interface CodeViewProps {
+    source: string
+    language: Language
+    /** Lines linked from the other pane or a hover. */
+    linked?: readonly number[]
+    activeLine?: number | null
+    /** Softly tinted regions, such as refactor suggestion occurrences. */
+    ranges?: readonly LineRange[]
+    errorLine?: number | null
+    /** Per-line nesting depth; renders the depth gutter when present. */
+    depths?: ReadonlyArray<number | null> | null
+    depthLimit?: number
+    scrollTo?: ScrollTarget | null
+    label?: string
+    onLineEnter?: (line: number) => void
+    onLineClick?: (line: number) => void
+    onLeave?: () => void
+  }
+
+  const EMPTY: readonly number[] = []
+  const NO_RANGES: readonly LineRange[] = []
+
+  function depthTone(depth: number, limit: number): string {
+    return depth > limit ? 'is-over' : depth === limit ? 'is-near' : ''
+  }
+
+props { source, language, linked = EMPTY, activeLine = null, ranges = NO_RANGES, errorLine = null, depths = null, depthLimit = 5, scrollTo = null, label = 'Source code', onLineEnter, onLineClick, onLeave }: CodeViewProps
+setup
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const rows = useMemo(() => highlight(source, language).map((tokens, index) => ({ number: index + 1, tokens })), [source, language]);
+  const linkedLines = useMemo(() => new Set(linked), [linked]);
+  const inRange = (line: number) => ranges.some((range) => range.startLine <= line && line <= range.endLine);
+  useEffect(() => {
+    if (scrollTo !== null) scrollToLine(containerRef.current, scrollTo.line);
+  }, [scrollTo, rows]);
+
+div.bdt-code(ref={containerRef} role="region" aria-label={label} tabIndex={0} onMouseLeave={() => onLeave?.()})
+  .bdt-code-inner
+    each row in rows key row.number
+      div(
+        ~ data-line={row.number}
+        ~ className={cx('bdt-line', inRange(row.number) && 'is-range', linkedLines.has(row.number) && 'is-linked', row.number === activeLine && 'is-active', row.number === errorLine && 'is-error')}
+        ~ onMouseEnter={() => onLineEnter?.(row.number)}
+        ~ onClick={() => onLineClick?.(row.number)}
+        ~ )
+        span.bdt-ln #{row.number}
+        if depths !== null
+          span.bdt-depth
+            if depths[row.number - 1] != null
+              fragment
+                span(className={cx('bdt-depth-bar', depthTone(depths[row.number - 1]!, depthLimit))} style={{ width: `${4 + depths[row.number - 1]! * 5}px` }})
+                span.bdt-depth-num #{depths[row.number - 1]}
+        span.bdt-src
+          each token, index in row.tokens key index
+            span(className={`tk-${token.type}`}) #{token.value}