@marver-design/marver 0.2.0

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@marver-design/marver",
+  "version": "0.2.0",
+  "description": "The agent-native design canvas. A design/ folder, one command, a canvas of live frames built from your repo's real components. The tool ships no AI - your coding agent is the designer.",
+  "type": "module",
+  "private": false,
+  "license": "Apache-2.0",
+  "bin": {
+    "marver": "./dist/cli.mjs"
+  },
+  "files": [
+    "dist",
+    "src/client",
+    "templates",
+    "README.md",
+    "LICENSE",
+    "NOTICE"
+  ],
+  "exports": {
+    "./runtime": "./src/client/runtime/index.ts",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "smoke": "node scripts/smoke.mjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^6.0.0",
+    "cac": "^7.0.0",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "vite": "^8.0.0",
+    "zustand": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tsdown": "^0.22.0",
+    "typescript": "^5.7.0",
+    "vitest": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "homepage": "https://marver.design",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TNEP4/marver.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/client/const.ts

@@ -0,0 +1,5 @@
+/** Client-safe constants. The single source - src/cli/name.ts re-exports for node-side code.
+ *  Lives under src/client because that is the only source directory shipped in the package. */
+export const NAME = 'marver'
+export const PKG = '@marver-design/marver'   // registry identity; bin stays `marver`
+export const ROUTE = '/__mv'

package/src/client/frame-host/bridge.js

@@ -0,0 +1,37 @@
+// Shared frame bridge. TSX frames import it plainly; the plugin injects it into HTML frames
+// with ?html=1, which turns on theme-from-query and auto-ready (TSX posts its own ready after boot).
+const isHtmlFrame = new URL(import.meta.url).searchParams.get('html') === '1'
+const post = (msg) => { if (window.parent !== window) window.parent.postMessage(msg, '*') }
+const id = new URLSearchParams(location.search).get('id') ?? location.pathname
+
+if (isHtmlFrame) {
+  const theme = new URLSearchParams(location.search).get('theme')
+  if (theme) document.documentElement.dataset.theme = theme
+}
+
+document.addEventListener('click', (e) => {
+  const el = e.target instanceof Element ? e.target.closest('[data-goto]') : null
+  if (!el) return
+  e.preventDefault()
+  const target = el.getAttribute('data-goto')
+  if (target) post({ type: 'sh:go', target })
+}, true)
+
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape') post({ type: 'sh:exit-interact' }) })
+
+window.addEventListener('error', (e) => post({ type: 'sh:error', id, message: String(e.message || e.error) }))
+window.addEventListener('unhandledrejection', (e) => post({ type: 'sh:error', id, message: `unhandled rejection: ${e.reason}` }))
+
+window.addEventListener('message', (e) => {
+  if (e?.data?.type === 'sh:set-theme') document.documentElement.dataset.theme = e.data.theme
+})
+
+if (isHtmlFrame) {
+  const ready = () => post({ type: 'sh:ready', id })
+  document.readyState === 'loading' ? addEventListener('DOMContentLoaded', ready) : ready()
+}
+
+// pinch inside a frame must not zoom the parent PAGE (wheel events here belong to the
+// iframe's document, so the shell's blocker cannot see them). Keyboard cmd +/- untouched.
+window.addEventListener('wheel', (e) => { if (e.ctrlKey || e.metaKey) e.preventDefault() }, { passive: false })
+document.addEventListener('gesturestart', (e) => e.preventDefault())

package/src/client/frame-host/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="{{ENTRY}}"></script>
+  </body>
+</html>

package/src/client/frame-host/main.tsx

@@ -0,0 +1,73 @@
+/**
+ * The frame host - runs inside every iframe. Spec §6.
+ * Boot failures (theme, providers, layouts, the frame itself) render a plain-DOM error card
+ * and post sh:error; an ErrorBoundary catches render-time throws the same way.
+ */
+import { Component, createElement, type ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import './bridge.js'
+import { frameFile, frames, layoutChain, layouts, providers } from './registry.ts'
+
+const params = new URLSearchParams(location.search)
+const id = params.get('id') ?? ''
+const theme = params.get('theme') ?? 'light'
+document.documentElement.dataset.theme = theme
+
+const post = (msg: Record<string, unknown>) => { if (window.parent !== window) window.parent.postMessage(msg, '*') }
+
+function fail(message: string) {
+  post({ type: 'sh:error', id, message })
+  document.getElementById('root')!.innerHTML =
+    `<div style="font-family:ui-monospace,monospace;font-size:12px;padding:16px;color:#b42318">
+       <div style="font-weight:700;margin-bottom:8px">frame failed</div>
+       <div style="white-space:pre-wrap">${escapeHtml(message)}</div>
+       <div style="margin-top:8px;color:#7c859a">${escapeHtml(frameFile(id) ?? id)}</div>
+     </div>`
+}
+
+const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`)
+
+class Boundary extends Component<{ children: ReactNode }, { err: Error | null }> {
+  state = { err: null as Error | null }
+  static getDerivedStateFromError(err: Error) { return { err } }
+  componentDidCatch(err: Error) { post({ type: 'sh:error', id, message: err.message }) }
+  render() {
+    if (!this.state.err) return this.props.children
+    return createElement('div', { style: { fontFamily: 'ui-monospace,monospace', fontSize: 12, padding: 16, color: '#b42318' } },
+      createElement('div', { style: { fontWeight: 700, marginBottom: 8 } }, 'frame crashed'),
+      createElement('div', { style: { whiteSpace: 'pre-wrap' } }, this.state.err.message),
+      createElement('div', { style: { marginTop: 8, color: '#7c859a' } }, frameFile(id) ?? id),
+    )
+  }
+}
+
+async function boot() {
+  try {
+    await import('virtual:sh-theme' as string)
+
+    const fileKey = frameFile(id)
+    if (!fileKey) return fail(`unknown frame id "${id}"`)
+
+    const frameMod: any = await frames[fileKey]()
+    const Frame = frameMod.default
+    // No typeof gate: memo()/forwardRef() components are objects, not functions.
+    // React + the ErrorBoundary validate the element type better than we can.
+    if (Frame == null) return fail(`${fileKey} has no default export`)
+
+    const wrappers: any[] = []
+    const providerKey = Object.keys(providers)[0]
+    if (providerKey) wrappers.push((await providers[providerKey]() as any).default)
+    for (const lk of layoutChain(fileKey)) wrappers.push((await layouts[lk]() as any).default)
+
+    let tree: ReactNode = createElement(Frame)
+    for (const W of wrappers.reverse()) if (W != null) tree = createElement(W, null, tree)
+
+    createRoot(document.getElementById('root')!).render(createElement(Boundary, null, tree))
+    post({ type: 'sh:ready', id, meta: frameMod.meta && typeof frameMod.meta === 'object' ? frameMod.meta : undefined })
+  } catch (err) {
+    fail((err as Error).message)
+  }
+}
+
+boot()

package/src/client/frame-host/registry.ts

@@ -0,0 +1,40 @@
+/**
+ * The glob registry - a JSX-free module so plugin-react never touches it.
+ * It is the HMR boundary for glob-map invalidation (frame files added/removed):
+ * accepting here reloads THIS iframe only, instead of Vite broadcasting a full
+ * page reload to every client including the shell.
+ * Component edits never reach this module - they stop at Fast Refresh in the frame itself.
+ */
+export const frames = import.meta.glob(['/design/scenes/**/*.{tsx,jsx}', '/design/components/**/*.{tsx,jsx}'])
+export const layouts = import.meta.glob(['/design/scenes/**/_layout.{tsx,jsx}', '/design/components/**/_layout.{tsx,jsx}'])
+export const providers = import.meta.glob('/design/providers.{tsx,jsx}')
+
+/** id -> glob key. scenes/ ids lost their prefix; components/ ids kept it. */
+export function frameFile(frameId: string): string | null {
+  for (const ext of ['tsx', 'jsx']) {
+    for (const prefix of ['/design/scenes/', '/design/']) {
+      const key = `${prefix}${frameId}.${ext}`
+      if (key in frames) return key
+    }
+  }
+  return null
+}
+
+/** Layout chain for a frame file: every _layout on the path from the glob base down, outermost = shallowest. */
+export function layoutChain(fileKey: string): string[] {
+  const dir = fileKey.slice(0, fileKey.lastIndexOf('/'))
+  const chain: string[] = []
+  const base = fileKey.startsWith('/design/scenes/') ? '/design/scenes' : '/design/components'
+  let cur = dir
+  while (cur.length >= base.length) {
+    for (const ext of ['tsx', 'jsx']) {
+      const key = `${cur}/_layout.${ext}`
+      if (key in layouts) { chain.unshift(key); break }
+    }
+    if (cur === base) break
+    cur = cur.slice(0, cur.lastIndexOf('/'))
+  }
+  return chain
+}
+
+if (import.meta.hot) import.meta.hot.accept(() => location.reload())

package/src/client/runtime/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Optional sugar. `data-goto="scene/frame"` on any element is the primitive and needs no import;
+ * go() posts the same message programmatically. Safe no-op outside an iframe, so promoted code cannot crash.
+ */
+export function go(target: string): void {
+  if (typeof window === 'undefined' || !window.parent || window.parent === window) return
+  window.parent.postMessage({ type: 'sh:go', target }, '*')
+}