beast-devtools 0.0.1

package/devtools/test/fixtures/App.btsx

@@ -0,0 +1,193 @@
+import { useState } from 'octane'
+
+module
+  type PanelId = 'language' | 'integration' | 'skills'
+  type PanelSide = 'left' | 'right'
+
+  interface Props {
+    docsUrl: string
+  }
+
+  interface LeftPanel {
+    docsPath: string
+    eyebrow: string
+    title: string
+    description: string
+    tags: string[]
+    note: string
+  }
+
+  interface RightPanel {
+    eyebrow: string
+    title: string
+    description: string
+    note: string
+    status: string
+    action?: {
+      label: string
+      docsPath: string
+    }
+  }
+
+  interface Panel {
+    id: PanelId
+    label: string
+    left: LeftPanel
+    right: RightPanel
+    copyableNotes?: boolean
+  }
+
+  const panels: Panel[] = [
+    {
+      id: 'language',
+      label: 'Language',
+      left: {
+        docsPath: '/docs/language',
+        eyebrow: 'Input',
+        title: 'Structured components',
+        description: 'Write familiar elements, selectors, attributes, text, and interpolation in .btsx—without closing tags. Leading spaces define the component tree.',
+        tags: ['.btsx', 'typed props', 'native control flow', 'child scopes'],
+        note: 'elements, props, and control flow'
+      },
+      right: {
+        eyebrow: 'Output',
+        title: 'Compiles to Octane',
+        description: 'Beast keeps TypeScript expressions intact, emits source-located TSRX, and leaves final validation and runtime compilation to Octane.',
+        note: 'small syntax. native output.',
+        status: 'Source-located',
+        action: {
+          label: 'Explore the language',
+          docsPath: '/docs/language'
+        }
+      }
+    },
+    {
+      id: 'integration',
+      label: 'Integration',
+      left: {
+        docsPath: '/docs/vite',
+        eyebrow: 'Beast → Octane → Vite',
+        title: 'Vite',
+        description: 'The Vite plugin compiles .btsx modules in memory before Octane processes the generated TSRX, so normal imports stay in one module graph.',
+        tags: ['HMR', 'SSR transforms', 'production builds'],
+        note: 'octane@0.4.3 · vite@^8.0.16'
+      },
+      right: {
+        eyebrow: 'Beast Styling',
+        title: 'Tailwind v4',
+        description: 'Use standard source imports, Tailwind utilities, and the same Beast–Octane pipeline for development, SSR, and production builds.',
+        note: 'Integrated by default.',
+        status: 'Tailwind v4'
+      }
+    },
+    {
+      id: 'skills',
+      label: 'Skills',
+      copyableNotes: true,
+      left: {
+        docsPath: '/docs/skills',
+        eyebrow: 'Beast Core',
+        title: 'Beast Skills',
+        description: 'The Beast skill gives coding agents a repeatable workflow to establish scope, scaffold or locate a project, author BTSX, diagnose compiler output, and verify the build.',
+        tags: ['scaffold', 'diagnose', 'verify'],
+        note: 'npx skills add https://github.com/phtn/beast-skill --skill beast'
+      },
+      right: {
+        eyebrow: 'Migrate to beast',
+        title: 'React to Beast',
+        description: 'Audit routes, state, styling, and behavior; port the application to BTSX while preserving the user-visible experience and recording migration evidence.',
+        note: 'npx skills add https://github.com/phtn/react-to-beast --skill react-to-beast',
+        status: 'migration ready',
+        action: {
+          label: 'Explore React migration',
+          docsPath: '/docs/react-to-beast'
+        }
+      }
+    }
+  ]
+
+props { docsUrl }: Props
+setup const copyNote = async (side: PanelSide, note: string) => { await navigator.clipboard.writeText(note); setCopiedSide(side); window.setTimeout(() => setCopiedSide(null), 1600); };
+setup
+  const [activeId, setActiveId] = useState<PanelId>('language');
+  const [copiedSide, setCopiedSide] = useState<PanelSide | null>(null);
+  const active = panels.find((panel) => panel.id === activeId) ?? panels[0];
+
+main(className='grid min-h-screen min-w-80 place-items-center p-3 sm:p-8 lg:p-16')
+  section(
+    ~ aria-labelledby="showcase-title"
+    ~ className='w-full max-w-[1080px] overflow-hidden rounded-[1.75rem] border border-white/85 bg-white/75 p-4 shadow-[0_24px_55px_rgba(28,28,25,0.09)] backdrop-blur-xl sm:rounded-[2.8rem] sm:p-6 lg:p-8'
+    ~ )
+    header(className='flex flex-col items-start justify-between gap-6 px-1 pb-6 pt-2 md:flex-row md:items-center md:gap-8 md:px-3 md:pb-8 md:pt-3')
+      h1#showcase-title(className='m-0 max-w-xl text-[clamp(1.7rem,3.3vw,2.7rem)] font-medium leading-[1.08] tracking-[-0.045em] text-[#161616]')
+        div(className='flex items-center text-[#161616]')
+          img(src='/beast.svg' alt='Beast' className='size-6 sm:size-7 md:size-8 lg:size-9 opacity-60')
+          p(className='ml-3 opacity-70') Beast
+        span(className='ml-6 mr-3 opacity-50') &rarr;
+        span(className='text-[#ff415a]') Octane
+      nav(className='inline-flex w-full shrink-0 items-center rounded-full border border-black/[0.025] bg-[#f0f0ee] p-1 md:w-auto' aria-label="Product workflow" role="tablist")
+        each panel in panels key panel.id
+          button(
+            ~ type="button"
+            ~ id={`tab-${panel.id}`}
+            ~ role="tab"
+            ~ aria-controls="workflow-panel"
+            ~ aria-selected={activeId === panel.id}
+            ~ className={activeId === panel.id ? 'inline-flex min-w-0 flex-1 cursor-pointer items-center justify-center gap-2 rounded-full border-0 bg-white/95 px-2.5 py-3 text-xs font-semibold text-[#242422] shadow-[0_1px_4px_rgba(26,26,24,0.14)] outline-none transition focus-visible:ring-3 focus-visible:ring-orange-200 sm:px-2 sm:text-sm md:min-w-32'
+              ~ : 'inline-flex min-w-0 flex-1 cursor-pointer items-center justify-center gap-2 rounded-full border-0 bg-transparent px-2.5 py-3 text-xs font-semibold text-[#595956] outline-none transition hover:text-[#111] focus-visible:ring-3 focus-visible:ring-orange-200 sm:px-2 sm:text-sm md:min-w-32'}
+            ~ onClick={() => { setActiveId(panel.id); setCopiedSide(null); }}
+            ~ )
+            | #{panel.label}
+
+    section#workflow-panel(
+      ~ role="tabpanel"
+      ~ aria-live="polite"
+      ~ aria-labelledby={`tab-${activeId}`}
+      ~ className='infinite-lines grid grid-cols-1 gap-4 rounded-3xl bg-[#eeeeeb]/90 p-2 sm:rounded-[2rem] sm:p-4 lg:grid-cols-[0.92fr_1.08fr]'
+      ~ )
+
+      // LEFT
+      article(className='opacity-0 flex min-h-[400px] flex-col rounded-[1.15rem] border border-black/8 bg-white/5 backdrop-blur-3xl p-6 sm:min-h-[430px] sm:rounded-[1.45rem] sm:p-9 lg:min-h-[480px] lg:p-10')
+        div
+          p(className='mb-6 mt-0 text-[0.72rem] font-bold uppercase tracking-[0.11em] text-[#9b9b96]') #{active.left.eyebrow}
+          h2(className='m-0 max-w-sm text-[clamp(1.55rem,2.8vw,2.05rem)] font-medium leading-[1.16] tracking-[-0.035em] text-[#161616]') #{active.left.title}
+          p(className='mb-0 mt-5 max-w-md text-base leading-relaxed text-[#73736f]') #{active.left.description}
+          ul(className='mb-0 mt-9 flex list-none flex-wrap gap-2 p-0' aria-label="Issue tags")
+            each tag, index in active.left.tags key tag
+              li(className={index === 1 ? 'rounded-full border border-black/10 px-3 py-2 text-xs font-semibold text-[#3f3f3c] shadow-xs' : 'rounded-full border border-black/10 bg-white/65 px-3 py-2 text-xs font-semibold text-[#3f3f3c] shadow-xs'}) #{tag}
+        if active.copyableNotes
+          button(
+            ~ type="button"
+            ~ className='group mb-5 mt-auto flex w-full cursor-pointer items-center justify-between gap-4 rounded-xl border border-black/8 bg-white/55 px-4 py-3 text-left outline-none transition hover:bg-white/85 focus-visible:ring-3 focus-visible:ring-orange-200'
+            ~ aria-label={`Copy note: ${active.left.note}`}
+            ~ onClick={() => copyNote('left', active.left.note)}
+            ~ )
+            code(className='min-w-0 max-w-[35ch] overflow-x-auto whitespace-nowrap text-xs text-[#666661] scrollbar-none') #{active.left.note}
+            span(className='shrink-0 text-xs font-semibold text-[#343431]') #{copiedSide === 'left' ? 'Copied' : 'Copy'}
+        else
+          code(className='mb-0 mt-auto pb-5 pt-16 text-sm text-[#858681]') #{active.left.note}
+
+      // RIGHT
+      article(className='flex min-h-[390px] flex-col rounded-[1.15rem] bg-[radial-gradient(circle_at_88%_10%,rgba(255,255,255,0.07),transparent_28rem),linear-gradient(145deg,#2a2b29,#111211_72%)] p-6 text-[#f6f6f2] shadow-[0_22px_36px_rgba(15,16,14,0.18)] sm:min-h-[430px] sm:rounded-[1.45rem] sm:p-9 lg:min-h-[510px] lg:p-10')
+        div
+          p(className='mb-6 mt-0 text-[0.72rem] font-bold uppercase tracking-[0.11em] text-[#858681]') #{active.right.eyebrow}
+          h2(className='m-0 max-w-sm text-[clamp(1.55rem,2.8vw,2.05rem)] font-medium leading-[1.16] tracking-[-0.035em]') #{active.right.title}
+          p(className='mb-0 mt-5 max-w-md text-base leading-relaxed text-[#a4a5a0]') #{active.right.description}
+        if active.copyableNotes
+          button(
+            ~ type="button"
+            ~ className='group mb-5 mt-auto flex w-full cursor-pointer items-center justify-between gap-4 rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3 text-left outline-none transition hover:bg-white/[0.075] focus-visible:ring-3 focus-visible:ring-orange-200'
+            ~ aria-label={`Copy note: ${active.right.note}`}
+            ~ onClick={() => copyNote('right', active.right.note)}
+            ~ )
+            code(className='min-w-0 max-w-[40ch] overflow-x-auto whitespace-nowrap text-xs text-[#a4a5a0] scrollbar-none') #{active.right.note}
+            span(className='shrink-0 text-xs font-semibold text-[#f6f6f2]') #{copiedSide === 'right' ? 'Copied' : 'Copy'}
+        else
+          code(className='mb-0 mt-auto pb-5 pt-16 text-sm text-[#858681]') #{active.right.note}
+
+  footer(className='pt-0')
+    a(href='https://beast-docs.vercel.app/'
+      ~ target='_blank'
+      ~ rel='noopener noreferrer'
+      ~ className='mt-1 px-1 py-0.5 ml-3 underline underline-offset-4 decoration-dotted')
+      span(className='font-mono text-xs tracking-wider') BEAST DOCS

package/devtools/tsconfig.build.json

@@ -0,0 +1,17 @@
+{
+  // Compiles the Vite plugin (Node side) to dist/. The overlay in client/ ships
+  // as source and is compiled by the host app's Beast/Octane toolchain.
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "rootDir": ".",
+    "outDir": "dist",
+    "types": ["node"]
+  },
+  "include": ["vite.ts", "server/**/*.ts", "shared/**/*.ts"],
+  "exclude": ["**/*.test.ts"]
+}

package/devtools/vite.ts

@@ -0,0 +1,159 @@
+import { existsSync } from 'node:fs'
+import type { IncomingMessage } from 'node:http'
+import { dirname, relative, resolve, sep } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { searchForWorkspaceRoot, type Connect, type Plugin } from 'vite'
+import { BeastProject } from './server/project.js'
+import { RefactorError } from './server/refactor.js'
+import { API_BASE, DEFAULT_SETTINGS, SOURCE_CHANGED_EVENT, type AnalyzerSettings, type ApplyRequest } from './shared/types.js'
+
+export interface BeastDevtoolsOptions {
+  /** Directories, relative to the Vite root, scanned for `.btsx` sources. Default: `['src']`. */
+  include?: string[]
+  /** Default analyzer thresholds; the overlay can override them per session. */
+  analyzer?: Partial<AnalyzerSettings>
+}
+
+// This module runs from source (`vite.ts`) during development and from
+// `dist/vite.js` once published; the overlay sources sit in `client/` either way.
+const HERE = dirname(fileURLToPath(import.meta.url))
+const PACKAGE_ROOT = [HERE, resolve(HERE, '..')].find((dir) => existsSync(resolve(dir, 'client/mount.ts'))) ?? HERE
+const CLIENT_ENTRY = resolve(PACKAGE_ROOT, 'client/mount.ts')
+
+/**
+ * Beast DevTools: an in-page overlay for Beast + Octane apps during `vite dev`.
+ *
+ * Pair it with `beastOctane({ octane: { profile: 'auto' } })` so Octane exposes
+ * its runtime inspection hook; the overlay explains how when it is missing.
+ */
+export function beastDevtools(options: BeastDevtoolsOptions = {}): Plugin {
+  const defaults: AnalyzerSettings = { ...DEFAULT_SETTINGS, ...options.analyzer }
+  let root = process.cwd()
+  let project: BeastProject | null = null
+
+  return {
+    name: 'beast:devtools',
+    apply: 'serve',
+
+    config(config) {
+      const appRoot = resolve(config.root ?? process.cwd())
+      return {
+        // The overlay must share the app's Octane runtime: a second copy would
+        // install its own inspection hook and see only the overlay's root.
+        resolve: { dedupe: ['octane'] },
+        // A linked package can live outside the workspace root Vite serves.
+        server: { fs: { allow: [searchForWorkspaceRoot(appRoot), PACKAGE_ROOT] } },
+      }
+    },
+
+    configResolved(config) {
+      root = config.root
+      project = new BeastProject({ root, include: options.include ?? ['src'], exclude: [PACKAGE_ROOT] })
+    },
+
+    configureServer(server) {
+      server.middlewares.use(API_BASE, apiMiddleware(() => project, defaults))
+
+      const notify = (file: string) => {
+        if (!file.endsWith('.btsx') || file.startsWith(PACKAGE_ROOT + sep)) return
+        project?.invalidate(file)
+        server.ws.send({ type: 'custom', event: SOURCE_CHANGED_EVENT, data: { path: toPosix(relative(root, file)) } })
+      }
+      server.watcher.on('change', notify)
+      server.watcher.on('add', notify)
+      server.watcher.on('unlink', notify)
+    },
+
+    transformIndexHtml() {
+      const inRoot = CLIENT_ENTRY.startsWith(root + sep)
+      const src = inRoot ? `/${toPosix(relative(root, CLIENT_ENTRY))}` : `/@fs/${toPosix(CLIENT_ENTRY).replace(/^\//, '')}`
+      return [{ tag: 'script', attrs: { type: 'module', src }, injectTo: 'body' }]
+    },
+  }
+}
+
+function apiMiddleware(getProject: () => BeastProject | null, defaults: AnalyzerSettings): Connect.NextHandleFunction {
+  return async (req, res, next) => {
+    const project = getProject()
+    if (project === null || req.url === undefined || (req.method !== 'GET' && req.method !== 'POST')) return next()
+
+    const url = new URL(req.url, 'http://beast.devtools')
+    const send = (status: number, body: unknown) => {
+      res.statusCode = status
+      res.setHeader('Content-Type', 'application/json')
+      res.setHeader('Cache-Control', 'no-store')
+      res.end(JSON.stringify(body))
+    }
+
+    try {
+      if (req.method === 'GET') {
+        const settings = readSettings((name) => url.searchParams.get(name), defaults)
+        if (url.pathname === '/project') return send(200, project.report(settings))
+        if (url.pathname === '/file') {
+          const report = project.file(url.searchParams.get('path') ?? '', settings)
+          return report === null ? send(404, { error: 'Unknown .btsx file' }) : send(200, report)
+        }
+        return send(404, { error: `Unknown endpoint ${url.pathname}` })
+      }
+
+      // Writes are same-origin JSON only: a cross-site page can neither send
+      // this content type without a preflight nor pass the origin check.
+      const refusal = writeRefusal(req)
+      if (refusal !== null) return send(403, { error: refusal })
+      const body = await readJson(req)
+      if (url.pathname === '/apply') {
+        const request: ApplyRequest = {
+          path: String(body.path ?? ''),
+          hash: String(body.hash ?? ''),
+          suggestionId: String(body.suggestionId ?? ''),
+          target: body.target === 'file' ? 'file' : 'inline',
+          dryRun: body.dryRun !== false,
+          settings: readSettings((name) => (body.settings as Record<string, unknown> | undefined)?.[name], defaults),
+        }
+        return send(200, project.apply(request))
+      }
+      if (url.pathname === '/undo') return send(200, project.undo(String(body.id ?? '')))
+      return send(404, { error: `Unknown endpoint ${url.pathname}` })
+    } catch (error) {
+      if (error instanceof RefactorError) return send(error.status, { error: error.message })
+      return send(500, { error: error instanceof Error ? error.message : String(error) })
+    }
+  }
+}
+
+function writeRefusal(req: IncomingMessage): string | null {
+  if (!(req.headers['content-type'] ?? '').includes('application/json')) return 'Expected a JSON request.'
+  const site = req.headers['sec-fetch-site']
+  if (site !== undefined && site !== 'same-origin' && site !== 'none') return 'Cross-site requests cannot modify files.'
+  const origin = req.headers.origin
+  if (origin !== undefined && new URL(origin).host !== req.headers.host) return 'Cross-origin requests cannot modify files.'
+  return null
+}
+
+async function readJson(req: IncomingMessage): Promise<Record<string, unknown>> {
+  let text = ''
+  for await (const chunk of req) {
+    text += chunk
+    if (text.length > 64 * 1024) throw new RefactorError('Request body too large.', 422)
+  }
+  const value: unknown = JSON.parse(text || '{}')
+  if (value === null || typeof value !== 'object') throw new RefactorError('Expected a JSON object.', 422)
+  return value as Record<string, unknown>
+}
+
+function readSettings(get: (name: string) => unknown, defaults: AnalyzerSettings): AnalyzerSettings {
+  const read = (name: keyof AnalyzerSettings, min: number, max: number) => {
+    const raw = get(name)
+    const value = Number(raw)
+    return raw != null && raw !== '' && Number.isInteger(value) ? Math.min(max, Math.max(min, value)) : defaults[name]
+  }
+  return {
+    depthLimit: read('depthLimit', 1, 20),
+    minLines: read('minLines', 2, 200),
+    fileLines: read('fileLines', 2, 1000),
+  }
+}
+
+function toPosix(path: string): string {
+  return path.split(sep).join('/')
+}

package/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico?v=2" />
+    <meta name="description" content="Explore the Beast language, Vite integration, and agent skills." />
+    <title>Beast — Language, Integration & Skills</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "beast-devtools",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "workspaces": [
+    "devtools"
+  ],
+  "scripts": {
+    "dev": "bun run --cwd devtools build && vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsrx-tsc --noEmit",
+    "test": "bun test devtools",
+    "check": "bun run typecheck && bun run test && bun run --cwd devtools build && bun run build",
+    "devtools:pack": "bun run --cwd devtools build && cd devtools && npm pack --dry-run"
+  },
+  "dependencies": {
+    "beast-tsrx": "0.4.3",
+    "clsx": "^2.1.1",
+    "octane": "0.4.3",
+    "tailwind-merge": "^3.6.0",
+    "@octanejs/base-ui": "0.1.55"
+  },
+  "devDependencies": {
+    "@beastjs/devtools": "workspace:*",
+    "@types/node": "^26.2.0",
+    "@tsrx/typescript-plugin": "0.3.135",
+    "typescript": "^5.9.3",
+    "tailwindcss": "^4.3.3",
+    "vite": "^8.0.16",
+    "@tailwindcss/vite": "^4.3.3"
+  }
+}

package/public/beast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="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.373 7.373 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.886 4.886 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-.048c.196-.385.357-.878.435-1.328.062-.36.087-.758.068-1.105a5 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" clip-rule="evenodd"/></svg>

package/src/App.btsx

@@ -0,0 +1,144 @@
+import { useState } from 'octane'
+import AppHeader from './AppHeader.btsx'
+import LeftArticle from './LeftArticle.btsx'
+import RightArticle from './RightArticle.btsx'
+
+module
+  export type PanelId = 'language' | 'integration' | 'skills'
+  export type PanelSide = 'left' | 'right'
+
+  interface Props {
+    docsUrl: string
+  }
+
+  interface LeftPanel {
+    docsPath: string
+    eyebrow: string
+    title: string
+    description: string
+    tags: string[]
+    note: string
+  }
+
+  interface RightPanel {
+    eyebrow: string
+    title: string
+    description: string
+    note: string
+    status: string
+    action?: {
+      label: string
+      docsPath: string
+    }
+  }
+
+  interface Panel {
+    id: PanelId
+    label: string
+    left: LeftPanel
+    right: RightPanel
+    copyableNotes?: boolean
+  }
+
+  export const panels: Panel[] = [
+    {
+      id: 'language',
+      label: 'Language',
+      left: {
+        docsPath: '/docs/language',
+        eyebrow: 'Input',
+        title: 'Structured components',
+        description: 'Write familiar elements, selectors, attributes, text, and interpolation in .btsx—without closing tags. Leading spaces define the component tree.',
+        tags: ['.btsx', 'typed props', 'native control flow', 'child scopes'],
+        note: 'elements, props, and control flow'
+      },
+      right: {
+        eyebrow: 'Output',
+        title: 'Compiles to Octane',
+        description: 'Beast keeps TypeScript expressions intact, emits source-located TSRX, and leaves final validation and runtime compilation to Octane.',
+        note: 'small syntax. native output.',
+        status: 'Source-located',
+        action: {
+          label: 'Explore the language',
+          docsPath: '/docs/language'
+        }
+      }
+    },
+    {
+      id: 'integration',
+      label: 'Integration',
+      left: {
+        docsPath: '/docs/vite',
+        eyebrow: 'Beast → Octane → Vite',
+        title: 'Vite',
+        description: 'The Vite plugin compiles .btsx modules in memory before Octane processes the generated TSRX, so normal imports stay in one module graph.',
+        tags: ['HMR', 'SSR transforms', 'production builds'],
+        note: 'octane@0.4.3 · vite@^8.0.16'
+      },
+      right: {
+        eyebrow: 'Beast Styling',
+        title: 'Tailwind v4',
+        description: 'Use standard source imports, Tailwind utilities, and the same Beast–Octane pipeline for development, SSR, and production builds.',
+        note: 'Integrated by default.',
+        status: 'Tailwind v4'
+      }
+    },
+    {
+      id: 'skills',
+      label: 'Skills',
+      copyableNotes: true,
+      left: {
+        docsPath: '/docs/skills',
+        eyebrow: 'Beast Core',
+        title: 'Beast Skills',
+        description: 'The Beast skill gives coding agents a repeatable workflow to establish scope, scaffold or locate a project, author BTSX, diagnose compiler output, and verify the build.',
+        tags: ['scaffold', 'diagnose', 'verify'],
+        note: 'npx skills add https://github.com/phtn/beast-skill --skill beast'
+      },
+      right: {
+        eyebrow: 'Migrate to beast',
+        title: 'React to Beast',
+        description: 'Audit routes, state, styling, and behavior; port the application to BTSX while preserving the user-visible experience and recording migration evidence.',
+        note: 'npx skills add https://github.com/phtn/react-to-beast --skill react-to-beast',
+        status: 'migration ready',
+        action: {
+          label: 'Explore React migration',
+          docsPath: '/docs/react-to-beast'
+        }
+      }
+    }
+  ]
+
+props { docsUrl }: Props
+setup const copyNote = async (side: PanelSide, note: string) => { await navigator.clipboard.writeText(note); setCopiedSide(side); window.setTimeout(() => setCopiedSide(null), 1600); };
+setup
+  const [activeId, setActiveId] = useState<PanelId>('language');
+  const [copiedSide, setCopiedSide] = useState<PanelSide | null>(null);
+  const active = panels.find((panel) => panel.id === activeId) ?? panels[0];
+
+main(className='grid min-h-screen min-w-80 place-items-center p-3 sm:p-8 lg:p-16')
+  section(
+    ~ aria-labelledby="showcase-title"
+    ~ className='w-full max-w-[1080px] overflow-hidden rounded-[1.75rem] border border-white/85 bg-white/75 p-4 shadow-[0_24px_55px_rgba(28,28,25,0.09)] backdrop-blur-xl sm:rounded-[2.8rem] sm:p-6 lg:p-8'
+    ~ )
+    AppHeader(activeId={activeId} setActiveId={setActiveId} setCopiedSide={setCopiedSide})
+
+    section#workflow-panel(
+      ~ role="tabpanel"
+      ~ aria-live="polite"
+      ~ aria-labelledby={`tab-${activeId}`}
+      ~ className='infinite-lines grid grid-cols-1 gap-4 rounded-3xl bg-[#eeeeeb]/90 p-2 sm:rounded-[2rem] sm:p-4 lg:grid-cols-[0.92fr_1.08fr]'
+      ~ )
+
+      // LEFT
+      LeftArticle(active={active} copyNote={copyNote} copiedSide={copiedSide})
+
+      // RIGHT
+      RightArticle(active={active} copyNote={copyNote} copiedSide={copiedSide})
+
+  footer(className='pt-0')
+    a(href='https://beast-docs.vercel.app/'
+      ~ target='_blank'
+      ~ rel='noopener noreferrer'
+      ~ className='mt-1 px-1 py-0.5 ml-3 underline underline-offset-4 decoration-dotted')
+      span(className='font-mono text-xs tracking-wider') BEAST DOCS

package/src/AppHeader.btsx

@@ -0,0 +1,24 @@
+import { panels } from './App.btsx'
+import type { PanelId, PanelSide } from './App.btsx'
+props { activeId, setActiveId, setCopiedSide }: { activeId: PanelId; setActiveId: (value: PanelId) => void; setCopiedSide: (value: PanelSide | null) => void }
+
+header(className='flex flex-col items-start justify-between gap-6 px-1 pb-6 pt-2 md:flex-row md:items-center md:gap-8 md:px-3 md:pb-8 md:pt-3')
+  h1#showcase-title(className='m-0 max-w-xl text-[clamp(1.7rem,3.3vw,2.7rem)] font-medium leading-[1.08] tracking-[-0.045em] text-[#161616]')
+    div(className='flex items-center text-[#161616]')
+      img(src='/beast.svg' alt='Beast' className='size-6 sm:size-7 md:size-8 lg:size-9 opacity-60')
+      p(className='ml-3 opacity-70') Beast
+    span(className='ml-6 mr-3 opacity-50') →
+    span(className='text-[#ff415a]') Octane
+  nav(className='inline-flex w-full shrink-0 items-center rounded-full border border-black/[0.025] bg-[#f0f0ee] p-1 md:w-auto' aria-label="Product workflow" role="tablist")
+    each panel in panels key panel.id
+      button(
+        ~ type="button"
+        ~ id={`tab-${panel.id}`}
+        ~ role="tab"
+        ~ aria-controls="workflow-panel"
+        ~ aria-selected={activeId === panel.id}
+        ~ className={activeId === panel.id ? 'inline-flex min-w-0 flex-1 cursor-pointer items-center justify-center gap-2 rounded-full border-0 bg-white/95 px-2.5 py-3 text-xs font-semibold text-[#242422] shadow-[0_1px_4px_rgba(26,26,24,0.14)] outline-none transition focus-visible:ring-3 focus-visible:ring-orange-200 sm:px-2 sm:text-sm md:min-w-32'
+          ~ : 'inline-flex min-w-0 flex-1 cursor-pointer items-center justify-center gap-2 rounded-full border-0 bg-transparent px-2.5 py-3 text-xs font-semibold text-[#595956] outline-none transition hover:text-[#111] focus-visible:ring-3 focus-visible:ring-orange-200 sm:px-2 sm:text-sm md:min-w-32'}
+        ~ onClick={() => { setActiveId(panel.id); setCopiedSide(null); }}
+        ~ )
+        | #{panel.label}

package/src/LeftArticle.btsx

@@ -0,0 +1,22 @@
+import type { PanelSide } from './App.btsx'
+props { active, copyNote, copiedSide }: { active: any; copyNote: any; copiedSide: PanelSide | null }
+
+article(className='opacity-0 flex min-h-[400px] flex-col rounded-[1.15rem] border border-black/8 bg-white/5 backdrop-blur-3xl p-6 sm:min-h-[430px] sm:rounded-[1.45rem] sm:p-9 lg:min-h-[480px] lg:p-10')
+  div
+    p(className='mb-6 mt-0 text-[0.72rem] font-bold uppercase tracking-[0.11em] text-[#9b9b96]') #{active.left.eyebrow}
+    h2(className='m-0 max-w-sm text-[clamp(1.55rem,2.8vw,2.05rem)] font-medium leading-[1.16] tracking-[-0.035em] text-[#161616]') #{active.left.title}
+    p(className='mb-0 mt-5 max-w-md text-base leading-relaxed text-[#73736f]') #{active.left.description}
+    ul(className='mb-0 mt-9 flex list-none flex-wrap gap-2 p-0' aria-label="Issue tags")
+      each tag, index in active.left.tags key tag
+        li(className={index === 1 ? 'rounded-full border border-black/10 px-3 py-2 text-xs font-semibold text-[#3f3f3c] shadow-xs' : 'rounded-full border border-black/10 bg-white/65 px-3 py-2 text-xs font-semibold text-[#3f3f3c] shadow-xs'}) #{tag}
+  if active.copyableNotes
+    button(
+      ~ type="button"
+      ~ className='group mb-5 mt-auto flex w-full cursor-pointer items-center justify-between gap-4 rounded-xl border border-black/8 bg-white/55 px-4 py-3 text-left outline-none transition hover:bg-white/85 focus-visible:ring-3 focus-visible:ring-orange-200'
+      ~ aria-label={`Copy note: ${active.left.note}`}
+      ~ onClick={() => copyNote('left', active.left.note)}
+      ~ )
+      code(className='min-w-0 max-w-[35ch] overflow-x-auto whitespace-nowrap text-xs text-[#666661] scrollbar-none') #{active.left.note}
+      span(className='shrink-0 text-xs font-semibold text-[#343431]') #{copiedSide === 'left' ? 'Copied' : 'Copy'}
+  else
+    code(className='mb-0 mt-auto pb-5 pt-16 text-sm text-[#858681]') #{active.left.note}

package/src/RightArticle.btsx

@@ -0,0 +1,19 @@
+import type { PanelSide } from './App.btsx'
+props { active, copyNote, copiedSide }: { active: any; copyNote: any; copiedSide: PanelSide | null }
+
+article(className='flex min-h-[390px] flex-col rounded-[1.15rem] bg-[radial-gradient(circle_at_88%_10%,rgba(255,255,255,0.07),transparent_28rem),linear-gradient(145deg,#2a2b29,#111211_72%)] p-6 text-[#f6f6f2] shadow-[0_22px_36px_rgba(15,16,14,0.18)] sm:min-h-[430px] sm:rounded-[1.45rem] sm:p-9 lg:min-h-[510px] lg:p-10')
+  div
+    p(className='mb-6 mt-0 text-[0.72rem] font-bold uppercase tracking-[0.11em] text-[#858681]') #{active.right.eyebrow}
+    h2(className='m-0 max-w-sm text-[clamp(1.55rem,2.8vw,2.05rem)] font-medium leading-[1.16] tracking-[-0.035em]') #{active.right.title}
+    p(className='mb-0 mt-5 max-w-md text-base leading-relaxed text-[#a4a5a0]') #{active.right.description}
+  if active.copyableNotes
+    button(
+      ~ type="button"
+      ~ className='group mb-5 mt-auto flex w-full cursor-pointer items-center justify-between gap-4 rounded-xl border border-white/10 bg-white/[0.045] px-4 py-3 text-left outline-none transition hover:bg-white/[0.075] focus-visible:ring-3 focus-visible:ring-orange-200'
+      ~ aria-label={`Copy note: ${active.right.note}`}
+      ~ onClick={() => copyNote('right', active.right.note)}
+      ~ )
+      code(className='min-w-0 max-w-[40ch] overflow-x-auto whitespace-nowrap text-xs text-[#a4a5a0] scrollbar-none') #{active.right.note}
+      span(className='shrink-0 text-xs font-semibold text-[#f6f6f2]') #{copiedSide === 'right' ? 'Copied' : 'Copy'}
+  else
+    code(className='mb-0 mt-auto pb-5 pt-16 text-sm text-[#858681]') #{active.right.note}

package/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.btsx' {
+  import type { ComponentBody } from 'octane'
+
+  const component: ComponentBody
+  export default component
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}