@westopp/windo 0.1.1 → 0.1.3

package/src/client/chrome.css

@@ -21,6 +21,9 @@
   --accent-text: #ffffff;
   --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
   --danger: #c0443c;
+  --success: #3c7a4a;
+  --warn: #99661c;
+  --deprecated: #a8433a;
   --surface: #ffffff;
   --shadow: 0 1px 2px rgba(16, 16, 18, 0.04), 0 8px 24px rgba(16, 16, 18, 0.06);
   --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
@@ -41,6 +44,10 @@
   --accent-ui: color-mix(in oklab, var(--accent) 35%, white);
   --accent-soft: color-mix(in srgb, var(--accent-ui) 14%, transparent);
   --danger: #e0837b;
+  --success: #84c896;
+  --warn: #dcb064;
+  --deprecated: #e6918a;
+  --accent-contrast: #111113;
   --surface: #161618;
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px rgba(0, 0, 0, 0.45);
 }
@@ -373,7 +380,7 @@ button {
 
 [data-theme="dark"] .wb-tag-pill {
   background: var(--accent-ui);
-  color: #111113;
+  color: var(--accent-contrast);
 }
 
 .wb-tag-pill .x {
@@ -476,7 +483,7 @@ button {
 [data-theme="dark"] .wb-check.checked {
   background: var(--accent-ui);
   border-color: var(--accent-ui);
-  color: #111113;
+  color: var(--accent-contrast);
 }
 
 .wb-tag-divider {
@@ -642,29 +649,16 @@ button {
 }
 
 .wb-status.stable {
-  color: #3c7a4a;
-  background: rgba(60, 122, 74, 0.1);
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 10%, transparent);
 }
 .wb-status.beta {
-  color: #99661c;
-  background: rgba(153, 102, 28, 0.1);
+  color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 10%, transparent);
 }
 .wb-status.deprecated {
-  color: #a8433a;
-  background: rgba(168, 67, 58, 0.1);
-}
-
-[data-theme="dark"] .wb-status.stable {
-  color: #84c896;
-  background: rgba(132, 200, 150, 0.12);
-}
-[data-theme="dark"] .wb-status.beta {
-  color: #dcb064;
-  background: rgba(220, 176, 100, 0.12);
-}
-[data-theme="dark"] .wb-status.deprecated {
-  color: #e6918a;
-  background: rgba(230, 145, 138, 0.12);
+  color: var(--deprecated);
+  background: color-mix(in srgb, var(--deprecated) 10%, transparent);
 }
 
 .wb-nav-empty {
@@ -768,7 +762,7 @@ button {
 [data-theme="dark"] .wb-trigger.on {
   background: var(--accent-ui);
   border-color: var(--accent-ui);
-  color: #111113;
+  color: var(--accent-contrast);
 }
 
 .wb-trigger .tdot {
@@ -1242,6 +1236,45 @@ button {
   font-weight: 600;
 }
 
+/* Editable shared-state strip (ctx.ctxState) — same look as .wb-state, with inline editors */
+
+.wb-ctxstate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 7px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--inset);
+  font-size: 11.5px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  flex-shrink: 0;
+}
+
+.wb-ctxstate .wb-state-item {
+  gap: 6px;
+}
+
+.wb-ctxstate-input {
+  width: 90px;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  font-weight: 600;
+}
+
+.wb-ctxstate-input[type='number'] {
+  width: 60px;
+}
+
+.wb-ctxstate-input:focus {
+  outline: none;
+  border-color: var(--accent-ui);
+}
+
 .wb-tab {
   height: 100%;
   padding: 0 1px;
@@ -1359,7 +1392,7 @@ button {
 [data-theme="dark"] .wb-save {
   background: var(--accent-ui);
   border-color: var(--accent-ui);
-  color: #111113;
+  color: var(--accent-contrast);
 }
 
 .wb-save:disabled {
@@ -1401,8 +1434,8 @@ button {
   font-size: 10.5px;
   line-height: 1.6;
   color: var(--danger);
-  background: rgba(192, 68, 60, 0.07);
-  border: 1px solid rgba(192, 68, 60, 0.25);
+  background: color-mix(in srgb, var(--danger) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
   border-radius: var(--r);
   padding: 8px 10px;
   white-space: pre-wrap;
@@ -1411,11 +1444,7 @@ button {
 .wb-saved-flash {
   font-size: 11.5px;
   font-weight: 550;
-  color: #3c7a4a;
-}
-
-[data-theme="dark"] .wb-saved-flash {
-  color: #84c896;
+  color: var(--success);
 }
 
 .wb-schema {
@@ -1632,11 +1661,7 @@ button {
   color: var(--text);
 }
 .wb-copy.copied {
-  color: #3c7a4a;
-}
-
-[data-theme="dark"] .wb-copy.copied {
-  color: #84c896;
+  color: var(--success);
 }
 
 /* ---------- Variants gallery ---------- */
@@ -1885,6 +1910,10 @@ select.wb-ctrl-input {
   background-position: right 8px center;
 }
 
+[data-theme="dark"] select.wb-ctrl-input {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9ba2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+
 .wb-ctrl-row input[type="range"] {
   flex: 1;
   accent-color: var(--accent-ui);
@@ -1935,7 +1964,7 @@ select.wb-ctrl-input {
 }
 
 [data-theme="dark"] .wb-switch.on::after {
-  background: #111113;
+  background: var(--accent-contrast);
 }
 
 .wb-context-empty {
@@ -2050,21 +2079,17 @@ select.wb-ctrl-input {
   color: var(--accent-ui);
 }
 .wb-log.warn .llevel {
-  color: #99661c;
+  color: var(--warn);
 }
 .wb-log.error .llevel {
   color: var(--danger);
 }
 
-[data-theme="dark"] .wb-log.warn .llevel {
-  color: #dcb064;
-}
-
 .wb-log.warn {
-  background: rgba(153, 102, 28, 0.05);
+  background: color-mix(in srgb, var(--warn) 5%, transparent);
 }
 .wb-log.error {
-  background: rgba(192, 68, 60, 0.05);
+  background: color-mix(in srgb, var(--danger) 5%, transparent);
 }
 
 .wb-log .lmsg {
@@ -2098,8 +2123,8 @@ select.wb-ctrl-input {
   margin: 14px 16px;
   padding: 12px 14px;
   border-radius: 10px;
-  background: rgba(192, 68, 60, 0.07);
-  border: 1px solid rgba(192, 68, 60, 0.25);
+  background: color-mix(in srgb, var(--danger) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
 }
 
 .wb-render-error .rtitle {
@@ -2147,8 +2172,8 @@ select.wb-ctrl-input {
   margin: 12px 16px 0 16px;
   padding: 8px 11px;
   border-radius: var(--r);
-  background: rgba(168, 67, 58, 0.06);
-  border: 1px solid rgba(168, 67, 58, 0.22);
+  background: color-mix(in srgb, var(--deprecated) 6%, transparent);
+  border: 1px solid color-mix(in srgb, var(--deprecated) 22%, transparent);
   color: var(--danger);
   font-size: 12px;
   line-height: 1.45;

package/src/client/internal-types.ts

@@ -30,6 +30,8 @@ export interface BridgeApi {
   /** Increments each time the preview (re)signals ready — e.g. after an HMR or dep-optimize reload. The chrome re-syncs selection/props/env when it changes. */
   readyNonce: number
   title: string
+  /** Config `faviconUrl` — drives the chrome logo + browser favicon. `null` falls back to the built-in `wn` mark. */
+  faviconUrl: string | null
   groups: WindoGroup[]
   /** The config's declared tag set (filter options for the sidebar). */
   tags: string[]
@@ -45,10 +47,18 @@ export interface BridgeApi {
   stateValues: Record<string, Record<string, unknown>>
   /** Live `disabled` flag per action id (keyed windo id → action id), echoed from the preview. */
   actionDisabled: Record<string, Record<string, boolean>>
+  /** Config seed for the shared `ctxState` (from the manifest) — fills keys the chrome hasn't persisted. */
+  ctxStateDefaults: Record<string, unknown>
+  /** Latest shared-state snapshot echoed after a component wrote it via `ctx.setCtxState`. */
+  ctxState: Record<string, unknown>
+  /** Latest colour scheme a component pushed via `ctx.toggleTheme`/`setColorScheme` (null until one does). Re-wrapped each echo so repeated same-value pushes still propagate. */
+  colorScheme: { value: 'light' | 'dark' } | null
   // outbound
   select: (id: string) => void
   setProps: (id: string, json: string) => void
   setEnv: (env: WindoEnvState) => void
+  /** Push the shared state down to the preview (editor edit or reload re-sync). */
+  setCtxState: (state: Record<string, unknown>) => void
   invokeAction: (id: string, actionId: string) => void
 }
 
@@ -146,6 +156,10 @@ export interface InspectorProps {
   clearLogs: () => void
   /** Live component-local state snapshot for the selected windo (drives the read-only State strip). */
   state: Record<string, unknown>
+  /** Shared, cross-component state — drives the editable Shared strip. */
+  ctxState: Record<string, unknown>
+  /** Edit one key of the shared state (pushes down to the preview). */
+  setCtxStateValue: (key: string, value: unknown) => void
   /** Context metadata filtered to this windo (its `uses` providers + all ambient). */
   contexts: WindoContextMeta[]
   env: ChromeEnv

package/src/index.ts

@@ -14,6 +14,7 @@ export {
   WINDO_MSG,
 } from './protocol'
 export type {
+  Ctxual,
   WindoAction,
   WindoActionMeta,
   WindoActionTrigger,
@@ -34,6 +35,7 @@ export type {
   WindoFactoryArg,
   WindoFieldError,
   WindoGroup,
+  WindoInitContext,
   WindoLogEntry,
   WindoLogger,
   WindoManifestEntry,

package/src/plugin/index.ts

@@ -40,6 +40,7 @@ const CHROME_HTML = `<!doctype html>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>windo</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%229%22%20fill%3D%22%23d83a2e%22%2F%3E%3Ctext%20x%3D%2216%22%20y%3D%2222%22%20text-anchor%3D%22middle%22%20font-size%3D%2216%22%20font-weight%3D%22800%22%20font-family%3D%22system-ui%2C-apple-system%2CHelvetica%2CArial%2Csans-serif%22%20fill%3D%22%23f5c518%22%3Ewn%3C%2Ftext%3E%3C%2Fsvg%3E" />
   </head>
   <body>
     <div id="root"></div>

package/src/preview/ctx.ts

@@ -10,7 +10,10 @@ export function buildRenderContext<State>(
   contexts: WindoContextMap,
   postLog: (entry: WindoLogEntry) => void,
   state: State,
-  setState: (patch: Partial<State>) => void
+  setState: (patch: Partial<State>) => void,
+  ctxState: Record<string, unknown>,
+  setCtxState: (patch: Record<string, unknown>) => void,
+  setColorScheme: (scheme: 'light' | 'dark') => void
 ): WindoRenderContext<State> {
   const logger = {
     log: (...args: unknown[]) => postLog({ ts: Date.now(), args }),
@@ -26,6 +29,10 @@ export function buildRenderContext<State>(
     state,
     setState,
     contexts: {},
+    ctxState,
+    setCtxState,
+    setColorScheme,
+    toggleTheme: () => setColorScheme(env.colorScheme === 'light' ? 'dark' : 'light'),
   }
 
   for (const name of Object.keys(contexts)) {

package/src/preview/index.ts

@@ -10,7 +10,7 @@ import type { z } from 'zod'
 import { describeSchema } from '../descriptor'
 import type { WindoHostMessage, WindoPreviewMessage } from '../protocol'
 import { isHostMessage, isWindoMessage, WINDO_MSG } from '../protocol'
-import type { WindoActionMeta, WindoContextMap, WindoDefinition, WindoEnvState, WindoFactoryArg, WindoGroup, WindoLogEntry, WindoManifestEntry, WindoRenderContext, WindoVariantMeta } from '../types'
+import type { WindoActionMeta, WindoContextMap, WindoDefinition, WindoEnvState, WindoFactoryArg, WindoGroup, WindoInitContext, WindoLogEntry, WindoManifestEntry, WindoPlacement, WindoPropDoc, WindoRenderContext, WindoVariant, WindoVariantMeta } from '../types'
 import { buildRenderContext } from './ctx'
 import { buildContextMeta, flattenZodError, idFromPath, sortEntries, summarizeLogArg, toCloneable } from './registry'
 import { PreviewRoot } from './render'
@@ -46,7 +46,14 @@ let currentSchema: z.ZodType | undefined
 let currentValues: unknown = {}
 let env: WindoEnvState = DEFAULT_ENV
 let currentState: Record<string, unknown> = {}
+// Shared, cross-component state. Seeded once from the config and — unlike
+// `currentState` — never reset on selection, so it survives switching windos.
+let ctxState: Record<string, unknown> = { ...((config.ctxState as Record<string, unknown>) ?? {}) }
 let root: Root | null = null
+// Raised while a windo's full-ctx fields are being resolved (init state, defaultProps,
+// placement). Resolution must be a pure read of the env/ctxState surface — so the
+// mutating callbacks no-op while it's set, closing every re-entrant render path.
+let resolving = false
 
 function postToParent(msg: WindoPreviewMessage) {
   window.parent.postMessage(msg, '*')
@@ -60,15 +67,57 @@ function postLog(entry: WindoLogEntry) {
 
 /** The live ctx, rebuilt on demand so render-time, toolbar, and stage events all share the current state. */
 function makeCtx(): WindoRenderContext {
-  return buildRenderContext(env, contexts, postLog, currentState, setState)
+  return buildRenderContext(env, contexts, postLog, currentState, setState, ctxState, setCtxState, setColorScheme)
+}
+
+/**
+ * The init-scoped ctx handed to a `state` resolver. State is resolved exactly once,
+ * here, before any component-local state exists — so it exposes the env surface only
+ * with a no-op `setState`. The shared `setCtxState`/`setColorScheme` are still wired
+ * through but no-op while `resolving` is set, preventing an author from re-triggering
+ * resolution mid-init. Typed as `WindoInitContext` to drop the absent `state`/`setState`.
+ */
+function makeInitCtx(): WindoInitContext {
+  return buildRenderContext(env, contexts, postLog, {}, () => {}, ctxState, setCtxState, setColorScheme)
 }
 
 function setState(patch: Partial<Record<string, unknown>>) {
+  // No-op while resolving a windo's full-ctx fields — those are pure reads and must
+  // never drive a render, which would re-enter resolution and loop.
+  if (resolving) return
   currentState = { ...currentState, ...patch }
   render()
   postState()
 }
 
+/** Merge a patch into the shared state, re-render, and echo it up to the chrome. */
+function setCtxState(patch: Record<string, unknown>) {
+  if (resolving) return
+  ctxState = { ...ctxState, ...patch }
+  render()
+  postCtxState()
+}
+
+/** Cloneable snapshot of the shared state (drops functions/JSX before postMessage). */
+function cloneableCtxState(): Record<string, unknown> {
+  const out: Record<string, unknown> = {}
+  for (const key of Object.keys(ctxState)) out[key] = toCloneable(ctxState[key])
+  return out
+}
+
+function postCtxState() {
+  postToParent({ source: WINDO_MSG, dir: 'preview', type: 'ctx-state', state: cloneableCtxState() })
+}
+
+/** Set the canvas colour scheme from a component/action and echo it so the chrome's toggle stays in sync. */
+function setColorScheme(scheme: 'light' | 'dark') {
+  if (resolving) return
+  if (env.colorScheme === scheme) return
+  env = { ...env, colorScheme: scheme }
+  render()
+  postToParent({ source: WINDO_MSG, dir: 'preview', type: 'color-scheme', colorScheme: scheme })
+}
+
 /** Post the current state snapshot + each action's live `disabled` flag up to the chrome. */
 function postState() {
   if (!currentId || !currentDef) return
@@ -113,11 +162,13 @@ function manifestEntry(id: string, def: WindoDefinition): WindoManifestEntry {
     group: def.group,
     tags: def.tags ?? [],
     status: def.status ?? 'stable',
-    placement: def.placement ?? 'center',
+    // The now-functionable fields can't be resolved here (no ctx at init): fall back
+    // to a safe static value, and assume the dynamic forms contribute a variant/state.
+    placement: typeof def.placement === 'function' ? 'center' : (def.placement ?? 'center'),
     uses: def.uses ?? [],
-    hasVariants: (def.variants?.length ?? 0) > 0,
+    hasVariants: typeof def.variants === 'function' ? true : (def.variants?.length ?? 0) > 0,
     actions,
-    hasState: !!def.state && Object.keys(def.state as object).length > 0,
+    hasState: typeof def.state === 'function' ? true : !!def.state && Object.keys(def.state as object).length > 0,
   }
   if (def.description !== undefined) entry.description = def.description
   if (def.deprecation !== undefined) entry.deprecation = def.deprecation
@@ -132,10 +183,85 @@ function computeDefaults(schema: z.ZodType | undefined): unknown {
 
 function safeCode(def: WindoDefinition, defaults: unknown): string | null {
   if (!def.code) return null
+  // `code` is a pure string producer — resolve it under `resolving` so it can't drive a
+  // render and post an inconsistent describe payload by mutating state mid-resolution.
+  resolving = true
   try {
-    return def.code(defaults as never)
+    return def.code(defaults as never, makeCtx())
   } catch {
     return null
+  } finally {
+    resolving = false
+  }
+}
+
+/** Resolve the authored Props table — a static array or a `ctx => array` function — under `resolving` so it stays a pure read. */
+function safeProps(def: WindoDefinition): WindoPropDoc[] {
+  const p = def.props
+  if (typeof p !== 'function') return p ?? []
+  resolving = true
+  try {
+    return p(makeCtx()) ?? []
+  } catch {
+    return []
+  } finally {
+    resolving = false
+  }
+}
+
+/** Resolve a windo's initial state — a static value or an init-ctx function — under `resolving`, degrading to `{}` if it throws. */
+function safeState(def: WindoDefinition): Record<string, unknown> {
+  const state = def.state
+  if (typeof state !== 'function') return { ...((state as Record<string, unknown> | undefined) ?? {}) }
+  resolving = true
+  try {
+    return { ...((state as (c: WindoInitContext) => unknown)(makeInitCtx()) as Record<string, unknown>) }
+  } catch {
+    return {}
+  } finally {
+    resolving = false
+  }
+}
+
+/** Resolve `defaultProps` — a static value or a `ctx => props` function — under `resolving` so it can't drive a render. */
+function safeDefaultProps(def: WindoDefinition, ctx: WindoRenderContext): unknown {
+  const dp = def.defaultProps
+  if (typeof dp !== 'function') return dp
+  resolving = true
+  try {
+    return (dp as (c: WindoRenderContext) => unknown)(ctx)
+  } catch {
+    return {}
+  } finally {
+    resolving = false
+  }
+}
+
+/** Resolve `placement` — a static value or a `ctx => placement` function — under `resolving`, degrading to `center` if it throws. */
+function safePlacement(def: WindoDefinition, ctx: WindoRenderContext): WindoPlacement {
+  const p = def.placement
+  if (typeof p !== 'function') return p ?? 'center'
+  resolving = true
+  try {
+    return p(ctx)
+  } catch {
+    return 'center'
+  } finally {
+    resolving = false
+  }
+}
+
+/** Resolve the gallery variants — a static array or a `ctx => array` function — under `resolving` so it stays a pure read. */
+function safeVariants(def: WindoDefinition): WindoVariant<unknown>[] {
+  const v = def.variants
+  if (typeof v !== 'function') return v ?? []
+  resolving = true
+  try {
+    return v(makeCtx()) ?? []
+  } catch {
+    return []
+  } finally {
+    resolving = false
   }
 }
 
@@ -145,10 +271,12 @@ function postManifest() {
     dir: 'preview',
     type: 'manifest',
     title: config.title ?? 'windo',
+    faviconUrl: config.faviconUrl ?? null,
     entries,
     groups: [...config.groups],
     tags: config.tags ? [...config.tags] : [],
     contexts: buildContextMeta(contexts),
+    ctxState: cloneableCtxState(),
   })
 }
 
@@ -156,14 +284,14 @@ function postDescribe(id: string, def: WindoDefinition, schema: z.ZodType | unde
   const defaults = computeDefaults(schema)
   // variant patches and defaults may carry ReactNodes/functions that postMessage
   // cannot clone — reduce them to JSON-safe forms before they cross the boundary.
-  const variants: WindoVariantMeta[] = (def.variants ?? []).map(v => ({ label: v.label, props: toCloneable(v.props) as Record<string, unknown> }))
+  const variants: WindoVariantMeta[] = safeVariants(def).map(v => ({ label: v.label, props: toCloneable(v.props) as Record<string, unknown> }))
   postToParent({
     source: WINDO_MSG,
     dir: 'preview',
     type: 'describe',
     id,
     descriptor: describeSchema(schema),
-    props: def.props ?? [],
+    props: safeProps(def),
     variants,
     defaults: toCloneable(defaults),
     code: safeCode(def, defaults),
@@ -174,12 +302,18 @@ function render() {
   if (!currentDef || !root) return
   const ctx = makeCtx()
   const id = currentId ?? ''
+  // Resolve the full-ctx fields here, OUTSIDE the React render cycle, so a function
+  // field that touches a mutating callback can't re-enter render() synchronously.
+  const defaultProps = safeDefaultProps(currentDef, ctx)
+  const placement = safePlacement(currentDef, ctx)
   root.render(
     createElement(PreviewRoot, {
       def: currentDef,
       ctx,
       values: currentValues,
       contexts,
+      defaultProps,
+      placement,
       onStage: dispatchStage,
       onError: (message: string, stack?: string) => {
         postToParent({ source: WINDO_MSG, dir: 'preview', type: 'render-error', id, message, ...(stack === undefined ? {} : { stack }) })
@@ -195,8 +329,11 @@ function handleSelect(id: string) {
   currentDef = match.def
   currentSchema = match.def.configurableProps
   currentValues = computeDefaults(currentSchema)
-  // Reset component-local state to the windo's declared initial state.
-  currentState = { ...((match.def.state as Record<string, unknown>) ?? {}) }
+  // Reset component-local state to the windo's declared initial state. Resolve it
+  // ONCE here — a `state` function runs against the init ctx (no live state/setState)
+  // under `resolving`, degrading to `{}` on throw. It is never re-resolved in
+  // render/makeCtx/set-env/set-ctx-state, so the author cannot drive a resolution loop.
+  currentState = safeState(currentDef)
   render()
   postState()
   postDescribe(id, currentDef, currentSchema)
@@ -249,6 +386,12 @@ function handleMessage(msg: WindoHostMessage) {
       env = msg.env
       render()
       break
+    case 'set-ctx-state':
+      // Chrome is the source of this update (an editor edit or a reload re-sync),
+      // so adopt it and re-render — but don't echo it back, to avoid a ping-pong.
+      ctxState = { ...msg.state }
+      render()
+      break
     case 'invoke-action':
       invokeAction(msg.actionId)
       break

package/src/preview/render.tsx

@@ -45,15 +45,18 @@ export interface PreviewRootProps {
   ctx: WindoRenderContext
   values: unknown
   contexts: WindoContextMap
+  /** `defaultProps` resolved outside the render cycle by `index.ts`, so a function field can't re-enter render here. */
+  defaultProps: unknown
+  /** `placement` resolved outside the render cycle by `index.ts`, for the same reason. */
+  placement: WindoPlacement
   onError: (message: string, stack?: string) => void
   /** Fires the windo's pointer-bound actions (`enter`/`exit`/`hover`) as the pointer crosses the stage. */
   onStage: (phase: 'enter' | 'leave') => void
 }
 
 export function PreviewRoot(props: PreviewRootProps) {
-  const { def, ctx, values, contexts, onError, onStage } = props
+  const { def, ctx, values, contexts, defaultProps, placement, onError, onStage } = props
 
-  const defaultProps = typeof def.defaultProps === 'function' ? (def.defaultProps as (c: WindoRenderContext) => unknown)(ctx) : def.defaultProps
   const finalProps = { ...(defaultProps as object), ...((values as object) ?? {}) }
 
   let tree: ReactNode = def.component(finalProps, ctx)
@@ -77,7 +80,6 @@ export function PreviewRoot(props: PreviewRootProps) {
     )
   }
 
-  const placement: WindoPlacement = def.placement ?? 'center'
   // Placements render flush; the `-padding` suffix opts into frame padding.
   const padded = placement.endsWith('-padding')
   const align = padded ? placement.slice(0, -'-padding'.length) : placement

package/src/protocol.ts

@@ -13,6 +13,7 @@ export type WindoHostMessage =
   | { source: typeof WINDO_MSG; dir: 'host'; type: 'select'; id: string }
   | { source: typeof WINDO_MSG; dir: 'host'; type: 'set-props'; id: string; json: string }
   | { source: typeof WINDO_MSG; dir: 'host'; type: 'set-env'; env: WindoEnvState }
+  | { source: typeof WINDO_MSG; dir: 'host'; type: 'set-ctx-state'; state: Record<string, unknown> }
   | { source: typeof WINDO_MSG; dir: 'host'; type: 'invoke-action'; id: string; actionId: string }
 
 /** iframe -> chrome */
@@ -23,10 +24,14 @@ export type WindoPreviewMessage =
       dir: 'preview'
       type: 'manifest'
       title: string
+      /** Config `faviconUrl` — drives the chrome logo + browser favicon. `null` falls back to the built-in `wn` mark. */
+      faviconUrl: string | null
       entries: WindoManifestEntry[]
       groups: WindoGroup[]
       tags: string[]
       contexts: WindoContextMeta[]
+      /** Initial shared state from the config — seeds the chrome's editable strip. */
+      ctxState: Record<string, unknown>
     }
   | {
       source: typeof WINDO_MSG
@@ -43,6 +48,8 @@ export type WindoPreviewMessage =
   | { source: typeof WINDO_MSG; dir: 'preview'; type: 'parse-error'; id: string; errors: WindoFieldError[] }
   | { source: typeof WINDO_MSG; dir: 'preview'; type: 'log'; entry: WindoLogEntry }
   | { source: typeof WINDO_MSG; dir: 'preview'; type: 'state'; id: string; state: Record<string, unknown>; actions: { id: string; disabled: boolean }[] }
+  | { source: typeof WINDO_MSG; dir: 'preview'; type: 'ctx-state'; state: Record<string, unknown> }
+  | { source: typeof WINDO_MSG; dir: 'preview'; type: 'color-scheme'; colorScheme: 'light' | 'dark' }
   | { source: typeof WINDO_MSG; dir: 'preview'; type: 'render-error'; id: string; message: string; stack?: string }
 
 export type WindoMessage = WindoHostMessage | WindoPreviewMessage