npm - murasaki - Versions diffs - 0.0.4 → 0.2.0 - Mend

murasaki 0.0.4 → 0.2.0

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

Files changed (13) hide show

package/package.json +13 -5
package/src/components/Link.tsx +25 -0
package/src/env.ts +14 -3
package/src/index.ts +4 -0
package/src/jsx/index.ts +21 -0
package/src/jsx/jsx-dev-runtime.ts +6 -0
package/src/jsx/jsx-runtime.ts +10 -0
package/src/jsx/runtime.ts +298 -0
package/src/jsx/types.ts +36 -0
package/src/runtime/render.tsx +194 -24
package/src/runtime/routes.ts +73 -0
package/src/types.ts +3 -3
package/src/runtime/load.ts +0 -39

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "murasaki",
-  "version": "0.0.4",
+  "version": "0.2.0",
   "description": "The desktop framework for Next.js developers. Node-powered. WebView-thin. No Rust. No Chromium.",
   "keywords": [
     "desktop",
@@ -30,6 +30,18 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
+    },
+    "./jsx": {
+      "types": "./src/jsx/index.ts",
+      "default": "./src/jsx/index.ts"
+    },
+    "./jsx-runtime": {
+      "types": "./src/jsx/jsx-runtime.ts",
+      "default": "./src/jsx/jsx-runtime.ts"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./src/jsx/jsx-dev-runtime.ts",
+      "default": "./src/jsx/jsx-dev-runtime.ts"
     }
   },
   "files": [
@@ -47,15 +59,11 @@
   },
   "dependencies": {
     "@webviewjs/webview": "^0.3.2",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
     "tsx": "^4.22.4"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.1",
     "@types/node": "^26.0.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
     "typescript": "^6.0.3"
   }
 }

package/src/components/Link.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+// <Link href="/about">About</Link>
+//
+// Emits a plain <a> tagged with data-murasaki-link. The dev runner injects
+// a tiny script that intercepts clicks on these and switches the visible
+// route block in place — no full reload, no flash.
+import { jsx } from '../jsx/runtime.ts'
+import type { Child } from '../jsx/types.ts'
+export type LinkProps = {
+  href: string
+  children?: Child
+  className?: string
+  // Pass-through anchor props
+  [key: string]: unknown
+}
+export function Link({ href, children, ...rest }: LinkProps) {
+  return jsx('a', {
+    href: `#${href}`,
+    'data-murasaki-link': href,
+    ...rest,
+    children,
+  })
+}

package/src/env.ts CHANGED Viewed

@@ -6,9 +6,20 @@ import { fileURLToPath } from 'node:url'
 export const projectRoot = process.cwd()
 export const SRC_DIR = join(projectRoot, 'src')
-export const APP_PATH = join(SRC_DIR, 'app.tsx')
-export const LAYOUT_PATH = join(SRC_DIR, 'layout.tsx')
-export const GLOBALS_CSS = join(SRC_DIR, 'globals.css')
+// App-router convention (new, preferred):
+//   src/app/page.tsx       → "/"
+//   src/app/layout.tsx     → root layout (html/head/body)
+//   src/app/<sub>/page.tsx → "/<sub>"
+//   src/app/globals.css    → auto-injected
+export const APP_DIR = join(SRC_DIR, 'app')
+export const APP_GLOBALS_CSS = join(APP_DIR, 'globals.css')
+// Legacy single-page convention (still supported):
+//   src/app.tsx + src/layout.tsx + src/globals.css
+export const LEGACY_APP_PATH = join(SRC_DIR, 'app.tsx')
+export const LEGACY_LAYOUT_PATH = join(SRC_DIR, 'layout.tsx')
+export const LEGACY_GLOBALS_CSS = join(SRC_DIR, 'globals.css')
 const __dirname = dirname(fileURLToPath(import.meta.url))
 export const VERSION: string = (() => {

package/src/index.ts CHANGED Viewed

@@ -2,6 +2,10 @@
 //
 // Import like:
 //   import type { Metadata } from 'murasaki'
+//   import { Link }            from 'murasaki'
+export type { LinkProps } from './components/Link.tsx'
+export { Link } from './components/Link.tsx'
 export type Metadata = {
   /** Default <title> for the app (overridden by <title> tag inside <head>) */

package/src/jsx/index.ts ADDED Viewed

@@ -0,0 +1,21 @@
+// Public surface for `import { ... } from 'murasaki/jsx'`.
+export {
+  createElement,
+  Fragment,
+  isJSXNode,
+  isValidElement,
+  JSXNode,
+  jsx,
+  raw,
+  renderToString,
+} from './runtime.ts'
+export type {
+  Child,
+  Component,
+  Element,
+  FC,
+  JSXNodeLike,
+  Props,
+} from './types.ts'

package/src/jsx/jsx-dev-runtime.ts ADDED Viewed

@@ -0,0 +1,6 @@
+// JSX dev runtime entry — used when tsconfig has `jsx: "react-jsxdev"`.
+// We don't (yet) track source locations or component stacks, so jsxDEV
+// behaves identically to jsx.
+export { Fragment, jsx as jsxDEV } from './runtime.ts'
+export type { JSX } from './types.ts'

package/src/jsx/jsx-runtime.ts ADDED Viewed

@@ -0,0 +1,10 @@
+// JSX automatic runtime entry — consumed by `tsx` / `esbuild` when the
+// user's tsconfig has `jsxImportSource: "murasaki"`.
+//
+// The transform emits calls like:
+//   jsx(Component, props, key?)
+//   jsxs(Component, propsWithChildrenArray, key?)
+//   <></> → jsx(Fragment, { children: [...] })
+export { Fragment, jsx, jsx as jsxs } from './runtime.ts'
+export type { JSX } from './types.ts'

package/src/jsx/runtime.ts ADDED Viewed

@@ -0,0 +1,298 @@
+// murasaki/jsx — SSR-only JSX runtime.
+//
+// Inspired by hono/jsx but trimmed for desktop-server use:
+//   - no hooks (the view is rendered once per HMR cycle, no client state)
+//   - no DOM renderer (we ship HTML to the OS WebView and that's it)
+//   - no streaming / Suspense (single render → loadHtml())
+//   - React-compatible enough to swap in for renderToStaticMarkup
+//
+// Two-step pipeline:
+//   1. jsx(tag, props) → JSXNode  (tree)
+//   2. JSXNode.toString() → HTML string
+//
+// User code that runs is the *user's* JSX (transformed to jsx() calls
+// by tsx/esbuild with `jsxImportSource: "murasaki"`).
+import type { Child, Component, JSXNodeLike, Props } from './types.ts'
+// ── HTML escape ──────────────────────────────────────────────────────
+const AMP = /&/g
+const LT = /</g
+const GT = />/g
+const QT = /"/g
+function escapeHtml(s: string): string {
+  return s.replace(AMP, '&amp;').replace(LT, '&lt;').replace(GT, '&gt;')
+}
+function escapeAttr(s: string): string {
+  return s.replace(AMP, '&amp;').replace(QT, '&quot;')
+}
+// ── Void elements (no closing tag) ────────────────────────────────────
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'source',
+  'track',
+  'wbr',
+])
+// ── Attribute name normalization (React → HTML) ───────────────────────
+const ATTR_ALIAS: Record<string, string> = {
+  className: 'class',
+  htmlFor: 'for',
+  charSet: 'charset',
+  crossOrigin: 'crossorigin',
+  httpEquiv: 'http-equiv',
+  itemProp: 'itemprop',
+  fetchPriority: 'fetchpriority',
+  noModule: 'nomodule',
+  formAction: 'formaction',
+  acceptCharset: 'accept-charset',
+  autoComplete: 'autocomplete',
+  autoFocus: 'autofocus',
+  autoPlay: 'autoplay',
+  contentEditable: 'contenteditable',
+  defaultValue: 'value',
+  defaultChecked: 'checked',
+  encType: 'enctype',
+  formMethod: 'formmethod',
+  formNoValidate: 'formnovalidate',
+  formTarget: 'formtarget',
+  maxLength: 'maxlength',
+  minLength: 'minlength',
+  noValidate: 'novalidate',
+  readOnly: 'readonly',
+  rowSpan: 'rowspan',
+  colSpan: 'colspan',
+  spellCheck: 'spellcheck',
+  tabIndex: 'tabindex',
+  useMap: 'usemap',
+  srcDoc: 'srcdoc',
+  srcSet: 'srcset',
+  hrefLang: 'hreflang',
+  dateTime: 'datetime',
+  enterKeyHint: 'enterkeyhint',
+  inputMode: 'inputmode',
+}
+function normalizeAttrName(k: string): string {
+  return ATTR_ALIAS[k] || k
+}
+// ── Style object → CSS string ─────────────────────────────────────────
+function camelToKebab(k: string): string {
+  // Leave already-kebab keys and CSS custom props (--foo) alone.
+  if (k[0] === '-' || !/[A-Z]/.test(k)) return k
+  return k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
+}
+// CSS properties that take unitless numbers (subset of React's list).
+const UNITLESS = new Set([
+  'animationIterationCount',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  'fontWeight',
+  'gridArea',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnStart',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowStart',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+])
+function styleObjToString(obj: Record<string, unknown>): string {
+  let out = ''
+  for (const [k, v] of Object.entries(obj)) {
+    if (v == null || v === false) continue
+    let value: string
+    if (typeof v === 'number') {
+      value = UNITLESS.has(k) ? String(v) : `${v}px`
+    } else if (typeof v === 'string') {
+      value = v
+    } else {
+      continue
+    }
+    out += `${out ? ';' : ''}${camelToKebab(k)}:${value}`
+  }
+  return out
+}
+// ── Attribute rendering ──────────────────────────────────────────────
+function renderAttrs(props: Props): string {
+  let out = ''
+  for (const k in props) {
+    if (k === 'children' || k === 'key' || k === 'ref' || k === '__source' || k === '__self')
+      continue
+    const v = props[k]
+    if (v == null || v === false) continue
+    const name = normalizeAttrName(k)
+    // Boolean attribute
+    if (v === true) {
+      out += ` ${name}`
+      continue
+    }
+    // Inline style object
+    if (k === 'style' && typeof v === 'object') {
+      const css = styleObjToString(v as Record<string, unknown>)
+      if (css) out += ` style="${escapeAttr(css)}"`
+      continue
+    }
+    // dangerouslySetInnerHTML is handled in JSXNode.toString(), skip here
+    if (k === 'dangerouslySetInnerHTML') continue
+    out += ` ${name}="${escapeAttr(String(v))}"`
+  }
+  return out
+}
+// ── Raw HTML escape hatch (pre-rendered HTML as a child) ─────────────
+class RawHtml {
+  readonly __isJSXNode = true as const
+  tag = '__raw__'
+  props: Props = {}
+  children: Child[] = []
+  html: string
+  constructor(html: string) {
+    this.html = html
+  }
+  toString(): string {
+    return this.html
+  }
+}
+/** Wrap pre-rendered HTML so it's emitted verbatim as a JSX child. */
+export function raw(html: string): JSXNodeLike {
+  return new RawHtml(html)
+}
+// ── Children rendering ───────────────────────────────────────────────
+function renderChild(c: Child): string {
+  if (c == null || c === false || c === true) return ''
+  if (typeof c === 'string') return escapeHtml(c)
+  if (typeof c === 'number' || typeof c === 'bigint') return String(c)
+  if (Array.isArray(c)) {
+    let s = ''
+    for (const item of c) s += renderChild(item)
+    return s
+  }
+  if (isJSXNode(c)) return c.toString()
+  return ''
+}
+// ── JSXNode ──────────────────────────────────────────────────────────
+export class JSXNode implements JSXNodeLike {
+  readonly __isJSXNode = true as const
+  tag: string | Component
+  props: Props
+  children: Child[]
+  constructor(tag: string | Component, props: Props, children: Child[]) {
+    this.tag = tag
+    this.props = props
+    this.children = children
+  }
+  toString(): string {
+    const { tag, props, children } = this
+    // Fragment / functional component
+    if (typeof tag === 'function') {
+      // Always pass children via props (React-compat)
+      const merged = { ...props, children: children.length === 1 ? children[0] : children }
+      const result = tag(merged)
+      return renderChild(result as Child)
+    }
+    // Intrinsic element
+    const attrs = renderAttrs(props)
+    // dangerouslySetInnerHTML overrides children
+    const dsi = props.dangerouslySetInnerHTML as { __html?: string } | undefined
+    if (dsi && typeof dsi.__html === 'string') {
+      return `<${tag}${attrs}>${dsi.__html}</${tag}>`
+    }
+    if (VOID_ELEMENTS.has(tag)) {
+      // Self-closing for void elements
+      return `<${tag}${attrs}/>`
+    }
+    let childHtml = ''
+    for (const c of children) childHtml += renderChild(c)
+    return `<${tag}${attrs}>${childHtml}</${tag}>`
+  }
+}
+export function isJSXNode(v: unknown): v is JSXNode {
+  return typeof v === 'object' && v !== null && (v as JSXNodeLike).__isJSXNode === true
+}
+// ── Public factory (React-compat: createElement / jsx) ────────────────
+export function jsx(
+  tag: string | Component,
+  props: Props | null,
+  ..._restChildren: unknown[]
+): JSXNode {
+  const p = props ?? {}
+  const rawChildren = (p as { children?: Child }).children
+  const children: Child[] = Array.isArray(rawChildren)
+    ? rawChildren
+    : rawChildren != null
+      ? [rawChildren]
+      : []
+  // Strip children from props (it's stored separately)
+  const { children: _drop, ...rest } = p as Props & { children?: Child }
+  return new JSXNode(tag, rest, children)
+}
+/** React-compatible alias. */
+export const createElement = jsx
+/** Fragment — renders children without a wrapper tag. */
+export function Fragment(props: { children?: Child }): Child {
+  return props.children ?? null
+}
+/** Check if something is a JSX element (React.isValidElement compat). */
+export function isValidElement(v: unknown): v is JSXNode {
+  return isJSXNode(v)
+}
+/** Convert any value (JSXNode, string, array, etc.) to an HTML string. */
+export function renderToString(value: Child): string {
+  return renderChild(value)
+}

package/src/jsx/types.ts ADDED Viewed

@@ -0,0 +1,36 @@
+// Public JSX types for murasaki/jsx.
+export type Props = Record<string, unknown>
+export type Child = string | number | bigint | boolean | null | undefined | JSXNodeLike | Child[]
+export interface JSXNodeLike {
+  readonly __isJSXNode: true
+  tag: string | Component
+  props: Props
+  children: Child[]
+  toString(): string
+}
+export type Component<P = Props> = (props: P & { children?: Child }) => Child
+/** React-compatible alias used by most user code. */
+export type FC<P = Props> = Component<P>
+/** For component refs / cloning. */
+export type Element = JSXNodeLike
+declare global {
+  namespace JSX {
+    type Element = JSXNodeLike
+    interface ElementChildrenAttribute {
+      children: object
+    }
+    // Loose intrinsic catalog — every HTML/SVG tag accepts any prop.
+    // (Tightening this to a real catalog is a follow-up; keeps the
+    //  runtime usable without bloating the type surface today.)
+    interface IntrinsicElements {
+      [tagName: string]: Record<string, unknown> & { children?: Child }
+    }
+  }
+}

package/src/runtime/render.tsx CHANGED Viewed

@@ -1,15 +1,35 @@
-// Renders <Layout><App /></Layout> to an HTML string and injects
-// metadata (<title>, <meta description>) + src/globals.css.
+// Multi-route renderer.
+//
+// Pipeline:
+//   1. discover all src/app/<...>/page.tsx
+//   2. render each page wrapped in its nested layouts (NOT the root layout)
+//   3. render the root layout once with a switcher block as its children
+//   4. inject metadata (<title>, <meta description>) + globals.css into <head>
+//   5. inject a tiny navigation script that listens to hash changes and
+//      intercepts <Link> clicks
+//
+// Legacy single-page (src/app.tsx + src/layout.tsx) is still supported:
+// if src/app/ doesn't exist, we render the legacy convention.
-import { createElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
+import { existsSync, readFileSync } from 'node:fs'
+import { pathToFileURL } from 'node:url'
+import {
+  APP_DIR,
+  APP_GLOBALS_CSS,
+  LEGACY_APP_PATH,
+  LEGACY_GLOBALS_CSS,
+  LEGACY_LAYOUT_PATH,
+} from '../env.ts'
+import type { Metadata } from '../index.ts'
+import { jsx, raw, renderToString } from '../jsx/runtime.ts'
+import type { Child, Component } from '../jsx/types.ts'
 import type { RenderResult } from '../types.ts'
-import { loadApp, loadGlobalsCss, loadLayout } from './load.ts'
+import { discoverRoutes, type Route } from './routes.ts'
 const NO_APP_HTML =
   '<!doctype html><html><body style="font-family:system-ui;padding:40px;">' +
-  '<h1 style="color:#A855F7">src/app.tsx not found</h1>' +
-  '<p>Create one and the window will reload.</p></body></html>'
+  '<h1 style="color:#A855F7">No app found</h1>' +
+  '<p>Create <code>src/app/page.tsx</code> and the window will reload.</p></body></html>'
 function escapeHtml(s: string): string {
   return s
@@ -19,16 +39,119 @@ function escapeHtml(s: string): string {
     .replace(/"/g, '&quot;')
 }
-export async function renderApp(): Promise<RenderResult> {
-  const App = await loadApp()
-  if (!App) return { html: NO_APP_HTML }
+async function dynImport(path: string) {
+  const url = pathToFileURL(path).href + `?v=${Date.now()}`
+  return import(url)
+}
+type Loaded = {
+  default: Component
+  metadata?: Metadata
+}
+async function loadModule(path: string): Promise<Loaded | null> {
+  if (!existsSync(path)) return null
+  const mod = await dynImport(path)
+  if (!mod.default) return null
+  return mod
+}
-  const layoutData = await loadLayout()
-  const metadata = layoutData?.metadata
-  const appEl = createElement(App)
-  const tree = layoutData ? createElement(layoutData.component, null, appEl) : appEl
-  let html = '<!doctype html>' + renderToStaticMarkup(tree)
+// ── Page rendering ──────────────────────────────────────────────────
+async function renderPageInner(route: Route, rootLayoutFile: string | null): Promise<string> {
+  const pageMod = await loadModule(route.pageFile)
+  if (!pageMod) return ''
+  let tree: Child = jsx(pageMod.default, null)
+  // Wrap in nested layouts, innermost first (i.e. skip root layout — it wraps everything later)
+  // route.layoutFiles: outermost first → so iterate from end backwards excluding root
+  const layoutsToApply = route.layoutFiles.filter((f) => f !== rootLayoutFile)
+  // Apply from innermost (last in array) outward (first in array) so the
+  // outer layout wraps the inner: <Outer><Inner><Page/></Inner></Outer>
+  for (let i = layoutsToApply.length - 1; i >= 0; i--) {
+    const layoutMod = await loadModule(layoutsToApply[i])
+    if (!layoutMod) continue
+    tree = jsx(layoutMod.default, { children: tree })
+  }
+  return renderToString(tree)
+}
+// ── Root layout + metadata ──────────────────────────────────────────
+async function renderRootLayout(rootLayout: Loaded | null, body: Child): Promise<string> {
+  if (!rootLayout) {
+    // Fallback root if user didn't write src/app/layout.tsx
+    const fallback = jsx('html', {
+      lang: 'en',
+      children: [
+        jsx('head', { children: jsx('meta', { charSet: 'utf-8' }) }),
+        jsx('body', { children: body }),
+      ],
+    })
+    return renderToString(fallback)
+  }
+  const tree = jsx(rootLayout.default, { children: body })
+  return renderToString(tree)
+}
+// ── Navigation script (injected once) ───────────────────────────────
+const NAV_SCRIPT = `
+<script>
+(function(){
+  function showRoute(path){
+    var blocks=document.querySelectorAll('[data-murasaki-route]');
+    var matched=false;
+    for(var i=0;i<blocks.length;i++){
+      var b=blocks[i];
+      if(b.getAttribute('data-murasaki-route')===path){
+        b.removeAttribute('hidden');matched=true;
+      } else {
+        b.setAttribute('hidden','');
+      }
+    }
+    if(!matched){
+      // fallback to "/"
+      var root=document.querySelector('[data-murasaki-route="/"]');
+      if(root)root.removeAttribute('hidden');
+    }
+    document.dispatchEvent(new CustomEvent('murasaki:navigate',{detail:{path:path}}));
+  }
+  function currentPath(){
+    var h=location.hash||'';
+    return h.charAt(0)==='#'?h.slice(1)||'/':'/'
+  }
+  window.addEventListener('hashchange',function(){showRoute(currentPath())});
+  document.addEventListener('click',function(e){
+    var t=e.target;
+    while(t&&t.nodeType===1){
+      if(t.tagName==='A'&&t.hasAttribute('data-murasaki-link')){
+        e.preventDefault();
+        var href=t.getAttribute('data-murasaki-link');
+        if('#'+href!==location.hash){location.hash=href;}
+        else{showRoute(href);}
+        return;
+      }
+      t=t.parentNode;
+    }
+  });
+  // Initial render
+  showRoute(currentPath());
+})();
+</script>
+`.trim()
+// ── Globals.css discovery (app/ takes precedence over src/) ─────────
+function loadGlobalsCss(): string {
+  for (const p of [APP_GLOBALS_CSS, LEGACY_GLOBALS_CSS]) {
+    if (existsSync(p)) {
+      try {
+        return readFileSync(p, 'utf8')
+      } catch {}
+    }
+  }
+  return ''
+}
+// ── Head injection ──────────────────────────────────────────────────
+function injectHead(html: string, metadata: Metadata | undefined, css: string): string {
   const headInjects: string[] = []
   if (metadata?.title && !/<title>.*?<\/title>/i.test(html)) {
     headInjects.push(`<title>${escapeHtml(metadata.title)}</title>`)
@@ -36,20 +159,67 @@ export async function renderApp(): Promise<RenderResult> {
   if (metadata?.description && !/<meta[^>]+name=["']description["']/i.test(html)) {
     headInjects.push(`<meta name="description" content="${escapeHtml(metadata.description)}">`)
   }
-  const css = loadGlobalsCss()
   if (css) {
     headInjects.push(`<style data-murasaki="globals.css">${css}</style>`)
   }
+  if (!headInjects.length) return html
+  const blob = headInjects.join('')
+  if (html.includes('</head>')) return html.replace('</head>', blob + '</head>')
+  return html.replace('<body', blob + '<body')
+}
-  if (headInjects.length) {
-    const blob = headInjects.join('')
-    if (html.includes('</head>')) {
-      html = html.replace('</head>', blob + '</head>')
-    } else {
-      html = html.replace('<body', blob + '<body')
-    }
+// ── Main entry ──────────────────────────────────────────────────────
+export async function renderApp(): Promise<RenderResult> {
+  // 1. Try app-router convention first
+  if (existsSync(APP_DIR)) {
+    return renderAppRouter()
+  }
+  // 2. Fall back to legacy single-page
+  if (existsSync(LEGACY_APP_PATH)) {
+    return renderLegacy()
+  }
+  return { html: NO_APP_HTML }
+}
+async function renderAppRouter(): Promise<RenderResult> {
+  const routes = discoverRoutes(APP_DIR)
+  if (routes.length === 0) return { html: NO_APP_HTML }
+  // Identify root layout (src/app/layout.tsx) if any
+  const rootLayoutPath = routes[0]?.layoutFiles[0]
+  const rootLayoutFile =
+    rootLayoutPath && rootLayoutPath.endsWith('/app/layout.tsx') ? rootLayoutPath : null
+  const rootLayoutMod = rootLayoutFile ? await loadModule(rootLayoutFile) : null
+  const metadata = rootLayoutMod?.metadata
+  // 2. Render each page (wrapped in its nested layouts, excluding root)
+  const blocks: string[] = []
+  for (const route of routes) {
+    const inner = await renderPageInner(route, rootLayoutFile)
+    blocks.push(`<div data-murasaki-route="${escapeHtml(route.path)}" hidden>${inner}</div>`)
   }
+  const switcher = raw(blocks.join('') + NAV_SCRIPT)
+  // 3. Render root layout with switcher as children
+  const bodyContent = await renderRootLayout(rootLayoutMod, switcher)
+  let html = '<!doctype html>' + bodyContent
+  // 4. Inject metadata + globals.css
+  html = injectHead(html, metadata, loadGlobalsCss())
+  return { html, metadata }
+}
+// ── Legacy single-page render (unchanged shape) ─────────────────────
+async function renderLegacy(): Promise<RenderResult> {
+  const pageMod = await loadModule(LEGACY_APP_PATH)
+  if (!pageMod) return { html: NO_APP_HTML }
+  const layoutMod = await loadModule(LEGACY_LAYOUT_PATH)
+  const metadata = layoutMod?.metadata
+  const body: Child = layoutMod
+    ? jsx(layoutMod.default, { children: jsx(pageMod.default, null) })
+    : jsx(pageMod.default, null)
+  let html = '<!doctype html>' + renderToString(body)
+  html = injectHead(html, metadata, loadGlobalsCss())
   return { html, metadata }
 }

package/src/runtime/routes.ts ADDED Viewed

@@ -0,0 +1,73 @@
+// File-based route discovery for src/app/.
+//
+// Conventions (subset of Next.js app router):
+//   src/app/page.tsx          → "/"
+//   src/app/layout.tsx        → root layout (wraps everything)
+//   src/app/about/page.tsx    → "/about"
+//   src/app/about/layout.tsx  → nested layout for /about and its children
+//   src/app/_foo/             → ignored (leading underscore = private)
+//
+// A page.tsx is required to register a route. A layout.tsx without a
+// page.tsx in the same dir just contributes to children's layouts.
+import { existsSync, readdirSync, statSync } from 'node:fs'
+import { join } from 'node:path'
+export type Route = {
+  /** URL-style path: "/", "/about", "/settings/profile" */
+  path: string
+  /** Absolute path to the page.tsx file */
+  pageFile: string
+  /** Absolute paths to layout.tsx files, OUTERMOST first (root → innermost) */
+  layoutFiles: string[]
+}
+export function discoverRoutes(appDir: string): Route[] {
+  if (!existsSync(appDir)) return []
+  const out: Route[] = []
+  walk(appDir, '', [], out)
+  // Stable sort so "/" comes first, then alphabetical
+  out.sort((a, b) => {
+    if (a.path === '/') return -1
+    if (b.path === '/') return 1
+    return a.path.localeCompare(b.path)
+  })
+  return out
+}
+function walk(dir: string, routePath: string, layouts: string[], out: Route[]): void {
+  let entries: string[]
+  try {
+    entries = readdirSync(dir)
+  } catch {
+    return
+  }
+  const hasLayout = entries.includes('layout.tsx')
+  const hasPage = entries.includes('page.tsx')
+  // The current directory contributes its layout to itself and descendants.
+  const ownLayouts = hasLayout ? [...layouts, join(dir, 'layout.tsx')] : layouts
+  if (hasPage) {
+    out.push({
+      path: routePath || '/',
+      pageFile: join(dir, 'page.tsx'),
+      layoutFiles: ownLayouts,
+    })
+  }
+  // Recurse into subdirectories (skip files, hidden, private "_*", node_modules).
+  for (const entry of entries) {
+    if (entry.startsWith('.') || entry.startsWith('_') || entry === 'node_modules') continue
+    const full = join(dir, entry)
+    let isDir = false
+    try {
+      isDir = statSync(full).isDirectory()
+    } catch {
+      continue
+    }
+    if (!isDir) continue
+    walk(full, `${routePath}/${entry}`, ownLayouts, out)
+  }
+}

package/src/types.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 // Internal shared types (the public Metadata type is re-exported from index.ts).
-import type { ComponentType, ReactNode } from 'react'
 import type { Metadata } from './index.ts'
+import type { Component } from './jsx/types.ts'
-export type ReactComponent = ComponentType<{ children?: ReactNode }>
+export type AppComponent = Component
 export type LayoutModule = {
-  component: ReactComponent
+  component: AppComponent
   metadata?: Metadata
 } | null

package/src/runtime/load.ts DELETED Viewed

@@ -1,39 +0,0 @@
-// Loads the user's src/app.tsx, src/layout.tsx, src/globals.css.
-// Uses cache-busting dynamic import so file edits are picked up
-// without restarting the Node process.
-import { existsSync, readFileSync } from 'node:fs'
-import { pathToFileURL } from 'node:url'
-import { APP_PATH, GLOBALS_CSS, LAYOUT_PATH } from '../env.ts'
-import type { Metadata } from '../index.ts'
-import type { LayoutModule, ReactComponent } from '../types.ts'
-async function dynImport(path: string) {
-  const url = pathToFileURL(path).href + `?v=${Date.now()}`
-  return import(url)
-}
-export async function loadApp(): Promise<ReactComponent | null> {
-  if (!existsSync(APP_PATH)) return null
-  const mod = await dynImport(APP_PATH)
-  return mod.default as ReactComponent
-}
-export async function loadLayout(): Promise<LayoutModule> {
-  if (!existsSync(LAYOUT_PATH)) return null
-  const mod = await dynImport(LAYOUT_PATH)
-  if (!mod.default) return null
-  return {
-    component: mod.default as ReactComponent,
-    metadata: mod.metadata as Metadata | undefined,
-  }
-}
-export function loadGlobalsCss(): string {
-  if (!existsSync(GLOBALS_CSS)) return ''
-  try {
-    return readFileSync(GLOBALS_CSS, 'utf8')
-  } catch {
-    return ''
-  }
-}