@pyreon/core 0.11.5 → 0.11.6

package/lib/types/jsx-runtime.d.ts

@@ -48,7 +48,7 @@ declare function jsx(type: string | ComponentFn | symbol, props: Props & {
   children?: VNodeChild | VNodeChild[];
 }, key?: string | number | null): VNode;
 declare const jsxs: typeof jsx;
-type Booleanish = boolean | "true" | "false";
+type Booleanish = boolean | 'true' | 'false';
 type CSSProperties = { [K in keyof CSSStyleDeclaration]?: string | number };
 type StyleValue = string | CSSProperties;
 /** Event with typed currentTarget — used in element-specific event handlers. */
@@ -65,58 +65,58 @@ interface PyreonHTMLAttributes<E extends Element = HTMLElement> {
   tabIndex?: number | (() => number) | undefined;
   title?: string | (() => string) | undefined;
   lang?: string | undefined;
-  dir?: "ltr" | "rtl" | "auto" | undefined;
+  dir?: 'ltr' | 'rtl' | 'auto' | undefined;
   hidden?: boolean | (() => boolean) | undefined;
   draggable?: Booleanish | undefined;
-  contentEditable?: Booleanish | "inherit" | "plaintext-only" | undefined;
+  contentEditable?: Booleanish | 'inherit' | 'plaintext-only' | undefined;
   spellCheck?: Booleanish | undefined;
-  autoCapitalize?: "off" | "on" | "sentences" | "words" | "characters" | undefined;
-  translate?: "yes" | "no" | undefined;
-  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-  inputMode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url" | undefined;
+  autoCapitalize?: 'off' | 'on' | 'sentences' | 'words' | 'characters' | undefined;
+  translate?: 'yes' | 'no' | undefined;
+  enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined;
+  inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url' | undefined;
   is?: string | undefined;
   slot?: string | undefined;
   part?: string | undefined;
-  popover?: "auto" | "manual" | undefined;
+  popover?: 'auto' | 'manual' | undefined;
   popoverTarget?: string | undefined;
-  popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+  popoverTargetAction?: 'toggle' | 'show' | 'hide' | undefined;
   inert?: boolean | undefined;
-  "aria-label"?: string | (() => string) | undefined;
-  "aria-hidden"?: Booleanish | (() => Booleanish) | undefined;
-  "aria-disabled"?: Booleanish | (() => Booleanish) | undefined;
-  "aria-expanded"?: Booleanish | (() => Booleanish) | undefined;
-  "aria-selected"?: Booleanish | (() => Booleanish) | undefined;
-  "aria-checked"?: Booleanish | "mixed" | (() => Booleanish | "mixed") | undefined;
-  "aria-current"?: Booleanish | "page" | "step" | "location" | "date" | "time" | undefined;
-  "aria-live"?: "off" | "assertive" | "polite" | undefined;
-  "aria-atomic"?: Booleanish | undefined;
-  "aria-busy"?: Booleanish | undefined;
-  "aria-controls"?: string | undefined;
-  "aria-describedby"?: string | undefined;
-  "aria-labelledby"?: string | undefined;
-  "aria-placeholder"?: string | undefined;
-  "aria-required"?: Booleanish | (() => Booleanish) | undefined;
-  "aria-invalid"?: Booleanish | "grammar" | "spelling" | undefined;
-  "aria-valuemin"?: number | undefined;
-  "aria-valuemax"?: number | undefined;
-  "aria-valuenow"?: number | undefined;
-  "aria-valuetext"?: string | undefined;
-  "aria-haspopup"?: Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-  "aria-posinset"?: number | undefined;
-  "aria-setsize"?: number | undefined;
-  "aria-level"?: number | undefined;
-  "aria-multiline"?: Booleanish | undefined;
-  "aria-multiselectable"?: Booleanish | undefined;
-  "aria-orientation"?: "horizontal" | "vertical" | undefined;
-  "aria-readonly"?: Booleanish | (() => Booleanish) | undefined;
-  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-  "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-  "aria-colcount"?: number | undefined;
-  "aria-colindex"?: number | undefined;
-  "aria-colspan"?: number | undefined;
-  "aria-rowcount"?: number | undefined;
-  "aria-rowindex"?: number | undefined;
-  "aria-rowspan"?: number | undefined;
+  'aria-label'?: string | (() => string) | undefined;
+  'aria-hidden'?: Booleanish | (() => Booleanish) | undefined;
+  'aria-disabled'?: Booleanish | (() => Booleanish) | undefined;
+  'aria-expanded'?: Booleanish | (() => Booleanish) | undefined;
+  'aria-selected'?: Booleanish | (() => Booleanish) | undefined;
+  'aria-checked'?: Booleanish | 'mixed' | (() => Booleanish | 'mixed') | undefined;
+  'aria-current'?: Booleanish | 'page' | 'step' | 'location' | 'date' | 'time' | undefined;
+  'aria-live'?: 'off' | 'assertive' | 'polite' | undefined;
+  'aria-atomic'?: Booleanish | undefined;
+  'aria-busy'?: Booleanish | undefined;
+  'aria-controls'?: string | undefined;
+  'aria-describedby'?: string | undefined;
+  'aria-labelledby'?: string | undefined;
+  'aria-placeholder'?: string | undefined;
+  'aria-required'?: Booleanish | (() => Booleanish) | undefined;
+  'aria-invalid'?: Booleanish | 'grammar' | 'spelling' | undefined;
+  'aria-valuemin'?: number | undefined;
+  'aria-valuemax'?: number | undefined;
+  'aria-valuenow'?: number | undefined;
+  'aria-valuetext'?: string | undefined;
+  'aria-haspopup'?: Booleanish | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined;
+  'aria-posinset'?: number | undefined;
+  'aria-setsize'?: number | undefined;
+  'aria-level'?: number | undefined;
+  'aria-multiline'?: Booleanish | undefined;
+  'aria-multiselectable'?: Booleanish | undefined;
+  'aria-orientation'?: 'horizontal' | 'vertical' | undefined;
+  'aria-readonly'?: Booleanish | (() => Booleanish) | undefined;
+  'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
+  'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | undefined;
+  'aria-colcount'?: number | undefined;
+  'aria-colindex'?: number | undefined;
+  'aria-colspan'?: number | undefined;
+  'aria-rowcount'?: number | undefined;
+  'aria-rowindex'?: number | undefined;
+  'aria-rowspan'?: number | undefined;
   ref?: RefProp<E> | undefined;
   key?: string | number | undefined;
   children?: VNodeChild | VNodeChild[];
@@ -202,7 +202,7 @@ interface InputAttributes extends PyreonHTMLAttributes<HTMLInputElement> {
   accept?: string | undefined;
   autoComplete?: string | undefined;
   autoFocus?: boolean | undefined;
-  capture?: "user" | "environment" | string | undefined;
+  capture?: 'user' | 'environment' | string | undefined;
   form?: string | undefined;
   formNoValidate?: boolean | undefined;
   list?: string | undefined;
@@ -217,12 +217,12 @@ interface AnchorAttributes extends PyreonHTMLAttributes<HTMLAnchorElement> {
   hreflang?: string | undefined;
   ping?: string | undefined;
   referrerPolicy?: string | undefined;
-  target?: "_blank" | "_self" | "_parent" | "_top" | string | undefined;
+  target?: '_blank' | '_self' | '_parent' | '_top' | string | undefined;
   rel?: string | undefined;
   download?: string | boolean | undefined;
 }
 interface ButtonAttributes extends PyreonHTMLAttributes<HTMLButtonElement> {
-  type?: "button" | "submit" | "reset" | undefined;
+  type?: 'button' | 'submit' | 'reset' | undefined;
   disabled?: boolean | (() => boolean) | undefined;
   name?: string | undefined;
   value?: string | undefined;
@@ -247,7 +247,7 @@ interface TextareaAttributes extends PyreonHTMLAttributes<HTMLTextAreaElement> {
   name?: string | undefined;
   autoFocus?: boolean | undefined;
   form?: string | undefined;
-  wrap?: "hard" | "soft" | undefined;
+  wrap?: 'hard' | 'soft' | undefined;
 }
 interface SelectAttributes extends PyreonHTMLAttributes<HTMLSelectElement> {
   value?: string | string[] | (() => string | string[]) | undefined;
@@ -268,7 +268,7 @@ interface OptionAttributes extends PyreonHTMLAttributes<HTMLOptionElement> {
 }
 interface FormAttributes extends PyreonHTMLAttributes<HTMLFormElement> {
   action?: string | undefined;
-  method?: "get" | "post" | undefined;
+  method?: 'get' | 'post' | undefined;
   encType?: string | undefined;
   noValidate?: boolean | undefined;
   target?: string | undefined;
@@ -282,13 +282,13 @@ interface ImgAttributes extends PyreonHTMLAttributes<HTMLImageElement> {
   alt?: string | (() => string) | undefined;
   width?: number | string | (() => number | string) | undefined;
   height?: number | string | (() => number | string) | undefined;
-  loading?: "lazy" | "eager" | undefined;
-  decoding?: "auto" | "async" | "sync" | undefined;
-  crossOrigin?: "anonymous" | "use-credentials" | undefined;
+  loading?: 'lazy' | 'eager' | undefined;
+  decoding?: 'auto' | 'async' | 'sync' | undefined;
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
   referrerPolicy?: string | undefined;
   srcSet?: string | (() => string) | undefined;
   sizes?: string | (() => string) | undefined;
-  fetchPriority?: "high" | "low" | "auto" | undefined;
+  fetchPriority?: 'high' | 'low' | 'auto' | undefined;
 }
 interface VideoAttributes extends PyreonHTMLAttributes<HTMLVideoElement> {
   src?: string | (() => string) | undefined;
@@ -299,9 +299,9 @@ interface VideoAttributes extends PyreonHTMLAttributes<HTMLVideoElement> {
   muted?: boolean | undefined;
   loop?: boolean | undefined;
   poster?: string | (() => string) | undefined;
-  preload?: "none" | "metadata" | "auto" | undefined;
+  preload?: 'none' | 'metadata' | 'auto' | undefined;
   playsInline?: boolean | undefined;
-  crossOrigin?: "anonymous" | "use-credentials" | undefined;
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
   disablePictureInPicture?: boolean | undefined;
   disableRemotePlayback?: boolean | undefined;
 }
@@ -311,8 +311,8 @@ interface AudioAttributes extends PyreonHTMLAttributes<HTMLAudioElement> {
   autoPlay?: boolean | undefined;
   muted?: boolean | undefined;
   loop?: boolean | undefined;
-  preload?: "none" | "metadata" | "auto" | undefined;
-  crossOrigin?: "anonymous" | "use-credentials" | undefined;
+  preload?: 'none' | 'metadata' | 'auto' | undefined;
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
 }
 interface LabelAttributes extends PyreonHTMLAttributes<HTMLLabelElement> {
   htmlFor?: string | undefined;
@@ -322,7 +322,7 @@ interface LabelAttributes extends PyreonHTMLAttributes<HTMLLabelElement> {
 interface ThAttributes extends PyreonHTMLAttributes<HTMLTableCellElement> {
   colSpan?: number | undefined;
   rowSpan?: number | undefined;
-  scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
+  scope?: 'col' | 'row' | 'colgroup' | 'rowgroup' | undefined;
   abbr?: string | undefined;
   headers?: string | undefined;
 }
@@ -340,7 +340,7 @@ interface IframeAttributes extends PyreonHTMLAttributes<HTMLIFrameElement> {
   height?: number | string | undefined;
   allow?: string | undefined;
   allowFullScreen?: boolean | undefined;
-  loading?: "lazy" | "eager" | undefined;
+  loading?: 'lazy' | 'eager' | undefined;
   name?: string | undefined;
   sandbox?: string | undefined;
   referrerPolicy?: string | undefined;
@@ -352,7 +352,7 @@ interface LinkAttributes extends PyreonHTMLAttributes<HTMLLinkElement> {
   type?: string | undefined;
   as?: string | undefined;
   media?: string | undefined;
-  crossOrigin?: "anonymous" | "use-credentials" | undefined;
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
   integrity?: string | undefined;
   referrerPolicy?: string | undefined;
 }
@@ -368,7 +368,7 @@ interface ScriptAttributes extends PyreonHTMLAttributes<HTMLScriptElement> {
   type?: string | undefined;
   async?: boolean | undefined;
   defer?: boolean | undefined;
-  crossOrigin?: "anonymous" | "use-credentials" | undefined;
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
   integrity?: string | undefined;
   noModule?: boolean | undefined;
   referrerPolicy?: string | undefined;
@@ -401,7 +401,7 @@ interface DialogAttributes extends PyreonHTMLAttributes<HTMLDialogElement> {
 interface OlAttributes extends PyreonHTMLAttributes<HTMLOListElement> {
   start?: number | undefined;
   reversed?: boolean | undefined;
-  type?: "1" | "a" | "A" | "i" | "I" | undefined;
+  type?: '1' | 'a' | 'A' | 'i' | 'I' | undefined;
 }
 interface CanvasAttributes extends PyreonHTMLAttributes<HTMLCanvasElement> {
   width?: number | string | undefined;
@@ -412,12 +412,12 @@ interface SvgAttributes extends PyreonHTMLAttributes<SVGElement> {
   xmlns?: string | undefined;
   fill?: string | (() => string) | undefined;
   stroke?: string | (() => string) | undefined;
-  "stroke-width"?: string | number | undefined;
-  "stroke-linecap"?: "butt" | "round" | "square" | undefined;
-  "stroke-linejoin"?: "miter" | "round" | "bevel" | undefined;
-  "fill-rule"?: "nonzero" | "evenodd" | undefined;
-  "clip-rule"?: "nonzero" | "evenodd" | undefined;
-  "clip-path"?: string | undefined;
+  'stroke-width'?: string | number | undefined;
+  'stroke-linecap'?: 'butt' | 'round' | 'square' | undefined;
+  'stroke-linejoin'?: 'miter' | 'round' | 'bevel' | undefined;
+  'fill-rule'?: 'nonzero' | 'evenodd' | undefined;
+  'clip-rule'?: 'nonzero' | 'evenodd' | undefined;
+  'clip-path'?: string | undefined;
   d?: string | undefined;
   cx?: string | number | undefined;
   cy?: string | number | undefined;
@@ -435,33 +435,33 @@ interface SvgAttributes extends PyreonHTMLAttributes<SVGElement> {
   transform?: string | (() => string) | undefined;
   opacity?: string | number | (() => string | number) | undefined;
   points?: string | undefined;
-  "font-size"?: string | number | undefined;
-  "text-anchor"?: "start" | "middle" | "end" | undefined;
-  "dominant-baseline"?: string | undefined;
-  gradientUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
+  'font-size'?: string | number | undefined;
+  'text-anchor'?: 'start' | 'middle' | 'end' | undefined;
+  'dominant-baseline'?: string | undefined;
+  gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
   gradientTransform?: string | undefined;
-  patternUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
-  patternContentUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
+  patternUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
+  patternContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
   patternTransform?: string | undefined;
-  spreadMethod?: "pad" | "reflect" | "repeat" | undefined;
+  spreadMethod?: 'pad' | 'reflect' | 'repeat' | undefined;
   markerWidth?: string | number | undefined;
   markerHeight?: string | number | undefined;
-  markerUnits?: "strokeWidth" | "userSpaceOnUse" | undefined;
+  markerUnits?: 'strokeWidth' | 'userSpaceOnUse' | undefined;
   orient?: string | number | undefined;
   refX?: string | number | undefined;
   refY?: string | number | undefined;
-  maskUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
-  maskContentUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
-  clipPathUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
-  filterUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
-  primitiveUnits?: "userSpaceOnUse" | "objectBoundingBox" | undefined;
+  maskUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
+  maskContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
+  clipPathUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
+  filterUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
+  primitiveUnits?: 'userSpaceOnUse' | 'objectBoundingBox' | undefined;
   preserveAspectRatio?: string | undefined;
-  "color-interpolation"?: string | undefined;
-  "color-interpolation-filters"?: string | undefined;
-  "shape-rendering"?: string | undefined;
-  "image-rendering"?: string | undefined;
-  "text-rendering"?: string | undefined;
-  "pointer-events"?: string | undefined;
+  'color-interpolation'?: string | undefined;
+  'color-interpolation-filters'?: string | undefined;
+  'shape-rendering'?: string | undefined;
+  'image-rendering'?: string | undefined;
+  'text-rendering'?: string | undefined;
+  'pointer-events'?: string | undefined;
   visibility?: string | undefined;
   display?: string | undefined;
   overflow?: string | undefined;
@@ -469,10 +469,10 @@ interface SvgAttributes extends PyreonHTMLAttributes<SVGElement> {
   dx?: string | number | undefined;
   dy?: string | number | undefined;
   textLength?: string | number | undefined;
-  lengthAdjust?: "spacing" | "spacingAndGlyphs" | undefined;
-  "writing-mode"?: string | undefined;
-  "letter-spacing"?: string | number | undefined;
-  "word-spacing"?: string | number | undefined;
+  lengthAdjust?: 'spacing' | 'spacingAndGlyphs' | undefined;
+  'writing-mode'?: string | undefined;
+  'letter-spacing'?: string | number | undefined;
+  'word-spacing'?: string | number | undefined;
   pathLength?: number | undefined;
   href?: string | undefined;
 }
@@ -615,8 +615,8 @@ declare global {
       radialGradient: SvgAttributes;
       stop: SvgAttributes & {
         offset?: string | number;
-        "stop-color"?: string;
-        "stop-opacity"?: string | number;
+        'stop-color'?: string;
+        'stop-opacity'?: string | number;
       };
       details: DetailsAttributes;
       summary: PyreonHTMLAttributes;

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@pyreon/core",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "description": "Core component model and lifecycle for Pyreon",
+  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/core#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/pyreon/pyreon.git",
     "directory": "packages/core/core"
   },
-  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/core#readme",
-  "bugs": {
-    "url": "https://github.com/pyreon/pyreon/issues"
-  },
   "files": [
     "lib",
     "src",
     "README.md",
     "LICENSE"
   ],
-  "sideEffects": false,
   "type": "module",
+  "sideEffects": false,
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "types": "./lib/types/index.d.ts",
@@ -40,18 +40,18 @@
       "types": "./lib/types/jsx-dev-runtime.d.ts"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "lint": "biome check .",
+    "lint": "oxlint .",
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/reactivity": "^0.11.5"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@pyreon/reactivity": "^0.11.6"
   }
 }

package/src/component.ts

@@ -1,5 +1,5 @@
-import { setCurrentHooks } from "./lifecycle"
-import type { ComponentFn, LifecycleHooks, Props, VNodeChild } from "./types"
+import { setCurrentHooks } from './lifecycle'
+import type { ComponentFn, LifecycleHooks, Props, VNodeChild } from './types'
 
 /**
  * Identity wrapper — marks a function as a Pyreon component and preserves its type.

package/src/context.ts

@@ -5,15 +5,42 @@
  * The renderer maintains the context stack as it walks the VNode tree.
  */
 
-import { onUnmount } from "./lifecycle"
+import { onUnmount } from './lifecycle'
 
 export interface Context<T> {
   readonly id: symbol
   readonly defaultValue: T
 }
 
+/** Branded marker for reactive contexts — distinguishes from regular Context at type level. */
+declare const REACTIVE_BRAND: unique symbol
+
+/**
+ * A context whose value is a reactive accessor `() => T`.
+ *
+ * When you `useContext(reactiveCtx)`, TypeScript returns `() => T` —
+ * you MUST call the accessor to read the value. This prevents the
+ * destructuring trap that breaks reactivity with getter-based objects.
+ *
+ * @example
+ * const ModeCtx = createReactiveContext<'light' | 'dark'>('light')
+ * // Provider: provide(ModeCtx, () => modeSignal())
+ * // Consumer: const getMode = useContext(ModeCtx); getMode() // 'light'
+ */
+export interface ReactiveContext<T> extends Context<() => T> {
+  readonly [REACTIVE_BRAND]: T
+}
+
 export function createContext<T>(defaultValue: T): Context<T> {
-  return { id: Symbol("PyreonContext"), defaultValue }
+  return { id: Symbol('PyreonContext'), defaultValue }
+}
+
+/**
+ * Create a reactive context. Consumers get `() => T` and must call it.
+ * This is the safe pattern for values that change over time (mode, locale, etc.).
+ */
+export function createReactiveContext<T>(defaultValue: T): ReactiveContext<T> {
+  return createContext<() => T>(() => defaultValue) as ReactiveContext<T>
 }
 
 // ─── Runtime context stack (managed by the renderer) ─────────────────────────
@@ -37,7 +64,7 @@ function getStack(): Map<symbol, unknown>[] {
   return _stackProvider()
 }
 
-const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
+const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
 
 export function pushContext(values: Map<symbol, unknown>) {
   getStack().push(values)
@@ -48,7 +75,7 @@ export function popContext() {
   if (__DEV__ && stack.length === 0) {
     // biome-ignore lint/suspicious/noConsole: dev-only warning
     console.warn(
-      "[Pyreon] popContext() called on an empty context stack. This likely indicates a missing Provider.",
+      '[Pyreon] popContext() called on an empty context stack. This likely indicates a missing Provider.',
     )
     return
   }
@@ -58,7 +85,12 @@ export function popContext() {
 /**
  * Read the nearest provided value for a context.
  * Falls back to `context.defaultValue` if none found.
+ *
+ * For ReactiveContext<T>, returns `() => T` — you MUST call the accessor.
+ * For regular Context<T>, returns `T` directly.
  */
+export function useContext<T>(context: ReactiveContext<T>): () => T
+export function useContext<T>(context: Context<T>): T
 export function useContext<T>(context: Context<T>): T {
   const stack = getStack()
   for (let i = stack.length - 1; i >= 0; i--) {
@@ -99,3 +131,42 @@ export function withContext<T>(context: Context<T>, value: T, fn: () => void) {
     popContext()
   }
 }
+
+// ─── Context snapshot for deferred mounting ─────────────────────────────────
+
+export type ContextSnapshot = Map<symbol, unknown>[]
+
+/**
+ * Capture a snapshot of the current context stack.
+ *
+ * Used by `mountReactive` to preserve the context that was active when a
+ * reactive boundary (e.g. `<Show>`, `<For>`) was set up. When the boundary
+ * later mounts new children inside an effect, the snapshot is restored so
+ * those children can see ancestor providers via `useContext()`.
+ */
+export function captureContextStack(): ContextSnapshot {
+  // Shallow copy — each frame (Map) is shared by reference, which is
+  // correct because providers don't mutate frames after creation.
+  return [...getStack()]
+}
+
+/**
+ * Execute `fn()` with a previously captured context stack active.
+ * Restores the original stack after `fn()` completes (even on throw).
+ */
+export function restoreContextStack<T>(snapshot: ContextSnapshot, fn: () => T): T {
+  const stack = getStack()
+  const savedLength = stack.length
+
+  // Push all captured frames onto the current stack
+  for (const frame of snapshot) {
+    stack.push(frame)
+  }
+
+  try {
+    return fn()
+  } finally {
+    // Remove only the frames we pushed (preserve anything added by fn)
+    stack.length = savedLength
+  }
+}

package/src/dynamic.ts

@@ -1,7 +1,7 @@
-import { h } from "./h"
-import type { ComponentFn, Props, VNode } from "./types"
+import { h } from './h'
+import type { ComponentFn, Props, VNode } from './types'
 
-const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
+const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
 
 export interface DynamicProps extends Props {
   component: ComponentFn | string
@@ -11,7 +11,7 @@ export function Dynamic(props: DynamicProps): VNode | null {
   const { component, ...rest } = props
   if (__DEV__ && !component) {
     // biome-ignore lint/suspicious/noConsole: dev-only warning
-    console.warn("[Pyreon] <Dynamic> received a falsy `component` prop. Nothing will be rendered.")
+    console.warn('[Pyreon] <Dynamic> received a falsy `component` prop. Nothing will be rendered.')
   }
   if (!component) return null
   return h(component as string | ComponentFn, rest as Props)

package/src/error-boundary.ts

@@ -1,10 +1,10 @@
-import { signal } from "@pyreon/reactivity"
-import { popErrorBoundary, pushErrorBoundary } from "./component"
-import { onUnmount } from "./lifecycle"
-import { reportError } from "./telemetry"
-import type { VNodeChild, VNodeChildAtom } from "./types"
+import { signal } from '@pyreon/reactivity'
+import { popErrorBoundary, pushErrorBoundary } from './component'
+import { onUnmount } from './lifecycle'
+import { reportError } from './telemetry'
+import type { VNodeChild, VNodeChildAtom } from './types'
 
-const __DEV__ = typeof process !== "undefined" && process.env.NODE_ENV !== "production"
+const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production'
 
 /**
  * ErrorBoundary — catches errors thrown by child components and renders a
@@ -37,10 +37,10 @@ export function ErrorBoundary(props: {
   fallback: (err: unknown, reset: () => void) => VNodeChild
   children?: VNodeChild
 }): VNodeChild {
-  if (__DEV__ && typeof props.fallback !== "function") {
+  if (__DEV__ && typeof props.fallback !== 'function') {
     // biome-ignore lint/suspicious/noConsole: dev-only warning
     console.warn(
-      "[Pyreon] <ErrorBoundary> expects `fallback` to be a function: (err, reset) => VNode. " +
+      '[Pyreon] <ErrorBoundary> expects `fallback` to be a function: (err, reset) => VNode. ' +
         `Received ${typeof props.fallback}.`,
     )
   }
@@ -51,7 +51,7 @@ export function ErrorBoundary(props: {
   const handler = (err: unknown): boolean => {
     if (error.peek() !== null) return false // already in error state — let outer boundary catch it
     error.set(err)
-    reportError({ component: "ErrorBoundary", phase: "render", error: err, timestamp: Date.now() })
+    reportError({ component: 'ErrorBoundary', phase: 'render', error: err, timestamp: Date.now() })
     return true
   }
 
@@ -63,6 +63,6 @@ export function ErrorBoundary(props: {
     const err = error()
     if (err != null) return props.fallback(err, reset) as VNodeChildAtom
     const ch = props.children
-    return (typeof ch === "function" ? ch() : ch) as VNodeChildAtom
+    return (typeof ch === 'function' ? ch() : ch) as VNodeChildAtom
   }
 }

package/src/for.ts

@@ -1,15 +1,21 @@
-import type { NativeItem, Props, VNode } from "./types"
+import type { NativeItem, Props, VNode } from './types'
 
 /**
  * Symbol used as the VNode type for a For list — runtime-dom handles it
  * via mountFor, bypassing the generic VNode reconciler.
  */
-export const ForSymbol: unique symbol = Symbol("pyreon.For")
+export const ForSymbol: unique symbol = Symbol('pyreon.For')
 
 export interface ForProps<T> {
   each: () => T[]
+  /** Keying function — use `by` not `key` (JSX extracts `key` for VNode reconciliation). */
   by: (item: T) => string | number
   children: (item: T) => VNode | NativeItem
+  /**
+   * @deprecated Use `by` instead of `key`. In Pyreon, `<For>` uses `by` for keying.
+   * JSX reserves `key` for VNode reconciliation — it won't reach the component.
+   */
+  key?: never
 }
 
 /**

package/src/h.ts

@@ -1,7 +1,7 @@
-import type { ComponentFn, Props, VNode, VNodeChild } from "./types"
+import type { ComponentFn, Props, VNode, VNodeChild } from './types'
 
 /** Marker for fragment nodes — renders children without a wrapper element */
-export const Fragment: unique symbol = Symbol("Pyreon.Fragment")
+export const Fragment: unique symbol = Symbol('Pyreon.Fragment')
 
 /**
  * Hyperscript function — the compiled output of JSX.
@@ -14,8 +14,8 @@ export const Fragment: unique symbol = Symbol("Pyreon.Fragment")
 export const EMPTY_PROPS: Props = {} as Props
 
 /** Makes `children` optional in P (if present) so it can be passed as rest args to h(). */
-type PropsWithOptionalChildren<P extends Props> = Omit<P, "children"> &
-  ("children" extends keyof P ? { children?: P["children"] } : unknown)
+type PropsWithOptionalChildren<P extends Props> = Omit<P, 'children'> &
+  ('children' extends keyof P ? { children?: P['children'] } : unknown)
 
 // Overload: component with typed props — children is optional in the props object
 // because it can be passed as rest args. Extra keys are allowed via `& Props`.