@pyreon/core 0.22.0 → 0.23.0

package/README.md

@@ -1,98 +1,216 @@
 # @pyreon/core
 
-Core component model, VNode types, lifecycle hooks, and control-flow components for Pyreon.
+Component model, JSX runtime, lifecycle, context, and control-flow components for Pyreon.
+
+`@pyreon/core` provides `h()`, the JSX automatic runtime, lifecycle hooks (`onMount`/`onUnmount`/`onUpdate`/`onErrorCaptured`), a two-tier context system (static vs reactive), control-flow components (`Show`, `Switch`/`Match`, `For`, `Suspense`, `ErrorBoundary`, `Portal`, `Dynamic`), code-splitting via `lazy()`, and props utilities that preserve reactivity through HOC pipelines. **Components run ONCE** — re-rendering on signal change is not the model; reactivity is per-binding via accessors read inside JSX text thunks, effects, or computeds. Sits one layer above `@pyreon/reactivity` and is consumed by both `runtime-dom` (CSR) and `runtime-server` (SSR).
 
 ## Install
 
 ```bash
-bun add @pyreon/core
+bun add @pyreon/core @pyreon/reactivity
+```
+
+## TypeScript / JSX setup
+
+In your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@pyreon/core"
+  }
+}
 ```
 
-## Quick Start
+The compiler (`@pyreon/compiler`, via `@pyreon/vite-plugin`) then transforms JSX into `_tpl()` + `_bind()` templates against this runtime.
+
+## Quick start
 
 ```tsx
-import { onMount, onUnmount, createContext, useContext } from '@pyreon/core'
+import {
+  onMount, createContext, createReactiveContext, provide, useContext,
+  Show, Switch, Match, For, Suspense, ErrorBoundary, lazy,
+} from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
+
+const ModeCtx = createReactiveContext<'light' | 'dark'>('light')
 
-function Counter() {
+function Timer() {
+  const count = signal(0)
   onMount(() => {
-    console.log('mounted')
+    const id = setInterval(() => count.update(n => n + 1), 1000)
+    return () => clearInterval(id)
   })
+  return <div>{() => count()}</div>
+}
+
+function Page(props: { items: { id: number; name: string }[] }) {
+  const mode = signal<'light' | 'dark'>('dark')
+  provide(ModeCtx, () => mode())
+
+  return (
+    <Switch fallback={<p>None</p>}>
+      <Match when={() => props.items.length > 0}>
+        <For each={props.items} by={i => i.id}>{i => <li>{i.name}</li>}</For>
+      </Match>
+    </Switch>
+  )
+}
 
-  return <div>Hello Pyreon</div>
+const Heavy = lazy(() => import('./Heavy'))
+function App() {
+  return (
+    <ErrorBoundary fallback={(e) => <p>{String(e)}</p>}>
+      <Suspense fallback={<div>Loading…</div>}>
+        <Heavy />
+      </Suspense>
+    </ErrorBoundary>
+  )
 }
 ```
 
-## API
+## The reactive-vs-static rule
+
+Components run once. What's reactive depends on **where** you read a signal:
 
-### VNode Creation
+```tsx
+// REACTIVE — compiler wraps DOM text in an accessor
+<div>{name()}</div>
 
-- **`h<P>(type, props, ...children): VNode`** -- Creates a virtual node. Accepts element tags, component functions, or Fragment.
-- **`Fragment`** -- Groups children without adding a wrapper DOM element.
-- **`EMPTY_PROPS`** -- Shared empty props object.
+// REACTIVE — explicit accessor
+<div>{() => `Hi ${name()}`}</div>
 
-### Components
+// REACTIVE — props read inside a reactive scope
+<Comp title={name()} />
 
-- **`defineComponent(fn)`** -- Wraps a function as a named component.
-- **`runWithHooks(instance, fn)`** -- Executes a function within a component's hook context.
-- **`propagateError(error, instance)`** -- Propagates an error up the component tree.
-- **`dispatchToErrorBoundary(error, instance)`** -- Sends an error to the nearest ErrorBoundary.
+// STATIC — destructured at component setup, captured once
+const { items } = props
+return <For each={items} ...>...</For>   // items is frozen at first read
+
+// REACTIVE — read live
+return <For each={props.items} ...>...</For>
+```
 
-### Lifecycle Hooks
+`const x = props.y` IS reactive: the compiler inlines `props.y` back at the use site when `x` is a `const`. `let x = props.y` is static (mutable, not safe to inline).
 
-- **`onMount(fn: () => CleanupFn | void)`** -- Runs after the component mounts. Optionally return a cleanup function.
-- **`onUnmount(fn)`** -- Runs when the component is removed.
-- **`onUpdate(fn)`** -- Runs after each reactive update.
-- **`onErrorCaptured(fn)`** -- Captures errors thrown by descendant components.
+## Lifecycle
 
-Lifecycle hook arrays are lazy-allocated -- `LifecycleHooks.mount`/`.unmount`/`.update`/`.error` start as `null` and are only allocated on first hook registration. Components with no hooks (the majority) pay zero allocation cost.
+```tsx
+onMount(() => {
+  const ws = new WebSocket(url)
+  return () => ws.close()  // cleanup runs on unmount
+})
+
+onUnmount(() => { /* … */ })
+onUpdate(() => { /* … */ })
+onErrorCaptured((err, info) => { /* return true to stop propagation */ })
+```
 
-### Props Reactivity
+`onMount`'s return value is the cleanup function — there's no separate `useEffect`-style pair. Hook arrays are lazy-allocated; components with no hooks pay zero cost.
 
-- **`makeReactiveProps(raw)`** -- Converts compiler-emitted `_rp()` wrappers into getter properties. Uses a scan-first strategy: checks for any branded reactive prop before allocating the result object. Static-only components return `raw` immediately with no allocation.
-- **`_rp(fn)`** -- Brands a function as a reactive prop wrapper (compiler-emitted, not user-facing).
-- **`_wrapSpread(source)`** -- Compiler-emitted helper that makes JSX spread on a component reactivity-safe. For `<Comp {...source}>`, the compiler emits `<Comp {..._wrapSpread(source)}>`. `_wrapSpread` walks `source`'s own keys without firing getters and re-brands each getter-shaped value as an `_rp` thunk pointing back at the live source. JS spread then carries the brands as plain data properties; `makeReactiveProps` converts them back to getters on the consumer side -- so reactive props survive the spread end-to-end. Fast path: when `source` has no getter descriptors, returns the source unchanged (zero cost). Not user-facing; emitted automatically by `@pyreon/compiler` for any component JSX with a spread. See `docs/patterns/reactive-spread.md` for the full contract.
+## Context
 
-### Context
+Two flavors, deliberately distinct:
 
-- **`createContext<T>(defaultValue?): Context<T>`** -- Creates a context with an optional default.
-- **`useContext(ctx): T`** -- Reads the nearest provided context value.
-- **`provide(ctx, value)`** -- Provides a context value for the current component's subtree (auto-cleans up on unmount).
-- **`withContext(ctx, value, fn)`** -- Runs `fn` with the given context value.
-- **`pushContext(map)` / `popContext()`** -- Low-level context stack manipulation.
+```tsx
+// Static context: useContext returns T directly, safe to destructure
+const ThemeCtx = createContext<'light' | 'dark'>('light')
+const theme = useContext(ThemeCtx)  // 'light' | 'dark'
+
+// Reactive context: useContext returns () => T, call it inside reactive scopes
+const ModeCtx = createReactiveContext<'light' | 'dark'>('light')
+const getMode = useContext(ModeCtx)
+return <div>{() => getMode()}</div>
+```
 
-### Refs
+`provide(ctx, value)` pushes a context frame and auto-cleans up on unmount. `withContext(ctx, value, fn)` is the bounded form for non-component scopes.
 
-- **`createRef<T>(): Ref<T>`** -- Creates a mutable ref object.
+## Control flow
 
-### Control-Flow Components
+```tsx
+<Show when={isReady()}>{() => <Page />}</Show>
+<Show when={count} fallback={<Loading />}>{(n) => <p>{n}</p>}</Show>
 
-- **`Show`** -- Conditionally renders children based on a `when` prop.
-- **`Switch` / `Match`** -- Multi-branch conditional rendering.
-- **`For`** -- Keyed list rendering with efficient reconciliation.
-- **`Portal`** -- Renders children into a different DOM container.
-- **`Suspense`** -- Shows fallback content while async children resolve.
-- **`ErrorBoundary`** -- Catches errors in descendant components and renders a fallback.
+<Switch fallback={<NotFound />}>
+  <Match when={isAdmin()}><AdminPanel /></Match>
+  <Match when={isUser()}><UserPanel /></Match>
+</Switch>
 
-### Props Utilities
+<For each={items} by={item => item.id}>
+  {(item) => <li>{item.name}</li>}
+</For>
+
+<Portal mount={document.body}><Modal /></Portal>
+<Dynamic component={tag()} {...props} />
+<Defer>{() => <Heavy />}</Defer>   // mount after first paint
+```
+
+`<For>` uses **`by`** (not `key`) — JSX reserves `key` as a VNode reconciliation prop. `Show` / `Match` accept either a value (`when={isOpen()}`) or an accessor (`when={() => isOpen()}`) — both work, but only the accessor form re-evaluates on signal change.
+
+## Suspense + lazy
+
+```tsx
+const Heavy = lazy(() => import('./Heavy'))
+
+<Suspense fallback={<div>Loading…</div>}>
+  <Heavy />
+</Suspense>
+```
+
+`lazy()` integrates with `Suspense` — async work inside the lazy module pauses rendering until resolved. SSR streams the fallback then patches in the resolved subtree.
+
+## Props utilities
+
+```tsx
+import { splitProps, mergeProps, cx, createUniqueId } from '@pyreon/core'
+
+function Button(props: ButtonProps) {
+  const [local, rest] = splitProps(props, ['variant', 'size'])
+  const merged = mergeProps({ type: 'button' }, rest)
+  const id = createUniqueId()  // 'pyreon-1', SSR-safe
+  return (
+    <button id={id} {...merged} class={cx('btn', `btn-${local.variant}`, local.size && `size-${local.size}`)}>
+      {props.children}
+    </button>
+  )
+}
+```
+
+`splitProps` and `mergeProps` copy property **descriptors** (not values), so getter-shaped reactive props survive. Plain `result[key] = source[key]` fires the getter at copy time and collapses reactivity — use these helpers instead.
+
+## ErrorBoundary
+
+```tsx
+<ErrorBoundary fallback={(err, reset) => (
+  <div role="alert">
+    <p>{String(err)}</p>
+    <button onClick={reset}>Retry</button>
+  </div>
+)}>
+  <App />
+</ErrorBoundary>
+```
 
-- **`splitProps(props, keys)`** -- Splits a props object into `[picked, rest]`, preserving signal reactivity.
-- **`mergeProps(...sources)`** -- Merges multiple props objects; last source wins. Preserves reactivity.
-- **`createUniqueId(): string`** -- Returns an SSR-safe unique ID (`"pyreon-1"`, `"pyreon-2"`, etc.).
+Captures any error thrown in descendants. Pair with `registerErrorHandler` / `reportError` for telemetry.
 
-### Class Utility
+## Compiler-emitted helpers
 
-- **`cx(...values: ClassValue[]): string`** -- Combines class values (strings, arrays, objects, nested mix) into a single class string.
+`_rp(fn)`, `_wrapSpread(source)`, `makeReactiveProps(raw)`, `REACTIVE_PROP` — emitted by `@pyreon/compiler` and consumed by `runtime-dom` / `runtime-server`. Not user-facing in normal code. If you write a manual HOC pipeline that copies props in plain JS (not via JSX spread), reach for `splitProps`/`mergeProps` — descriptor preservation is load-bearing for reactivity.
 
-### Utilities
+`nativeCompat(Component)` — marker that tells `@pyreon/{react,preact,vue,solid}-compat` jsx() runtimes to route the component through `h(type, props)` directly, skipping the compat wrapper. Only relevant for hand-rolled Pyreon-flavored helpers used inside compat-mode apps.
 
-- **`mapArray(source, mapFn)`** -- Reactively maps over an array source.
-- **`registerErrorHandler(handler)` / `reportError(error, context)`** -- Global error telemetry.
+## Common conventions
 
-### Types
+- `class`, not `className`
+- `for`, not `htmlFor`
+- `onInput`, not `onChange`, for per-keystroke input updates
+- `style={{ … }}` accepts a CSS-object; `style="…"` accepts a CSS string
+- `data-*` / `aria-*` attributes typed via template-literal index signatures (catches typos)
 
-`VNode`, `VNodeChild`, `VNodeChildAtom`, `VNodeChildAccessor`, `Props`, `ComponentFn`, `ExtractProps`, `HigherOrderComponent`, `ComponentInstance`, `LifecycleHooks`, `CleanupFn`, `NativeItem`, `Ref`, `Context`, `LazyComponent`, `ShowProps`, `SwitchProps`, `MatchProps`, `ForProps`, `PortalProps`, `ErrorContext`, `ErrorHandler`, `ClassValue`, `TargetedEvent`, `PyreonHTMLAttributes`, `CSSProperties`, `StyleValue`, `CanvasAttributes`
+## Documentation
 
-**VNodeChild union ordering**: `VNodeChild = VNodeChildAccessor | VNodeChildAtom | VNodeChildAtom[]` — the accessor type is FIRST so TypeScript matches `{() => cond && <X />}` against the function arm without falling through to `VNodeChildAtom` and erroring on `false | VNode`.
+Full docs: [docs.pyreon.dev/docs/core](https://docs.pyreon.dev/docs/core) (or `docs/docs/core.md` in this repo).
 
 ## License
 

package/lib/_chunks/h-CYSD6aBx.js

@@ -0,0 +1,48 @@
+//#region src/h.ts
+/**
+* Marker for fragment nodes — renders children without a wrapper element.
+*
+* MUST use `Symbol.for(...)` (global registry, keyed by string), NOT
+* `Symbol(...)` (fresh per evaluation). `h.ts` is inlined into BOTH the
+* main `lib/index.js` and the `lib/jsx-runtime.js` published bundles —
+* each bundle's evaluation of a bare `Symbol(...)` would produce a
+* DISTINCT Symbol identity. JSX `<>` compiles to `jsx(Fragment, ...)` and
+* resolves to jsx-runtime's identity; `runtime-server` checks
+* `vnode.type === Fragment` against the main-entry identity. Mismatch
+* fell through to `renderElement` and crashed SSG with
+* `TypeError: Cannot convert a Symbol value to a string`.
+* `Symbol.for()` keys by string in a global registry shared across all
+* bundle evaluations — same identity everywhere.
+*/
+const Fragment = Symbol.for("Pyreon.Fragment");
+/**
+* Hyperscript function — the compiled output of JSX.
+* `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
+*
+* Generic on P so TypeScript validates props match the component's signature
+* at the call site, then stores the result in the loosely-typed VNode.
+*/
+/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
+const EMPTY_PROPS = {};
+function h(type, props, ...children) {
+	return {
+		type,
+		props: props ?? EMPTY_PROPS,
+		children: normalizeChildren(children),
+		key: props?.key ?? null
+	};
+}
+function normalizeChildren(children) {
+	for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
+	return children;
+}
+function flattenChildren(children) {
+	const result = [];
+	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
+	else result.push(child);
+	return result;
+}
+
+//#endregion
+export { Fragment as n, h as r, EMPTY_PROPS as t };
+//# sourceMappingURL=h-CYSD6aBx.js.map

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"d1de8643-1","name":"lifecycle.ts"},{"uid":"d1de8643-3","name":"component.ts"},{"uid":"d1de8643-5","name":"compat-marker.ts"},{"uid":"d1de8643-7","name":"compat-shared.ts"},{"uid":"d1de8643-9","name":"context.ts"},{"uid":"d1de8643-11","name":"h.ts"},{"uid":"d1de8643-13","name":"dynamic.ts"},{"uid":"d1de8643-15","name":"telemetry.ts"},{"uid":"d1de8643-17","name":"error-boundary.ts"},{"uid":"d1de8643-19","name":"for.ts"},{"uid":"d1de8643-21","name":"ref.ts"},{"uid":"d1de8643-23","name":"defer.ts"},{"uid":"d1de8643-25","name":"lazy.ts"},{"uid":"d1de8643-27","name":"map-array.ts"},{"uid":"d1de8643-29","name":"portal.ts"},{"uid":"d1de8643-31","name":"props.ts"},{"uid":"d1de8643-33","name":"show.ts"},{"uid":"d1de8643-35","name":"style.ts"},{"uid":"d1de8643-37","name":"suspense.ts"},{"uid":"d1de8643-39","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"d1de8643-1":{"renderedLength":3090,"gzipLength":1316,"brotliLength":0,"metaUid":"d1de8643-0"},"d1de8643-3":{"renderedLength":1471,"gzipLength":693,"brotliLength":0,"metaUid":"d1de8643-2"},"d1de8643-5":{"renderedLength":3173,"gzipLength":1409,"brotliLength":0,"metaUid":"d1de8643-4"},"d1de8643-7":{"renderedLength":2346,"gzipLength":1033,"brotliLength":0,"metaUid":"d1de8643-6"},"d1de8643-9":{"renderedLength":3600,"gzipLength":1542,"brotliLength":0,"metaUid":"d1de8643-8"},"d1de8643-11":{"renderedLength":1813,"gzipLength":957,"brotliLength":0,"metaUid":"d1de8643-10"},"d1de8643-13":{"renderedLength":490,"gzipLength":292,"brotliLength":0,"metaUid":"d1de8643-12"},"d1de8643-15":{"renderedLength":1990,"gzipLength":950,"brotliLength":0,"metaUid":"d1de8643-14"},"d1de8643-17":{"renderedLength":1659,"gzipLength":843,"brotliLength":0,"metaUid":"d1de8643-16"},"d1de8643-19":{"renderedLength":700,"gzipLength":478,"brotliLength":0,"metaUid":"d1de8643-18"},"d1de8643-21":{"renderedLength":86,"gzipLength":98,"brotliLength":0,"metaUid":"d1de8643-20"},"d1de8643-23":{"renderedLength":4387,"gzipLength":1891,"brotliLength":0,"metaUid":"d1de8643-22"},"d1de8643-25":{"renderedLength":461,"gzipLength":273,"brotliLength":0,"metaUid":"d1de8643-24"},"d1de8643-27":{"renderedLength":1018,"gzipLength":571,"brotliLength":0,"metaUid":"d1de8643-26"},"d1de8643-29":{"renderedLength":818,"gzipLength":491,"brotliLength":0,"metaUid":"d1de8643-28"},"d1de8643-31":{"renderedLength":6310,"gzipLength":2344,"brotliLength":0,"metaUid":"d1de8643-30"},"d1de8643-33":{"renderedLength":2022,"gzipLength":854,"brotliLength":0,"metaUid":"d1de8643-32"},"d1de8643-35":{"renderedLength":1858,"gzipLength":825,"brotliLength":0,"metaUid":"d1de8643-34"},"d1de8643-37":{"renderedLength":1104,"gzipLength":614,"brotliLength":0,"metaUid":"d1de8643-36"},"d1de8643-39":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"d1de8643-38"}},"nodeMetas":{"d1de8643-0":{"id":"/src/lifecycle.ts","moduleParts":{"index.js":"d1de8643-1"},"imported":[],"importedBy":[{"uid":"d1de8643-38"},{"uid":"d1de8643-2"},{"uid":"d1de8643-8"},{"uid":"d1de8643-16"},{"uid":"d1de8643-22"}]},"d1de8643-2":{"id":"/src/component.ts","moduleParts":{"index.js":"d1de8643-3"},"imported":[{"uid":"d1de8643-0"}],"importedBy":[{"uid":"d1de8643-38"},{"uid":"d1de8643-16"}]},"d1de8643-4":{"id":"/src/compat-marker.ts","moduleParts":{"index.js":"d1de8643-5"},"imported":[],"importedBy":[{"uid":"d1de8643-38"},{"uid":"d1de8643-16"}]},"d1de8643-6":{"id":"/src/compat-shared.ts","moduleParts":{"index.js":"d1de8643-7"},"imported":[],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-8":{"id":"/src/context.ts","moduleParts":{"index.js":"d1de8643-9"},"imported":[{"uid":"d1de8643-40"},{"uid":"d1de8643-0"}],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-10":{"id":"/src/h.ts","moduleParts":{"index.js":"d1de8643-11"},"imported":[],"importedBy":[{"uid":"d1de8643-38"},{"uid":"d1de8643-12"},{"uid":"d1de8643-22"},{"uid":"d1de8643-24"},{"uid":"d1de8643-36"}]},"d1de8643-12":{"id":"/src/dynamic.ts","moduleParts":{"index.js":"d1de8643-13"},"imported":[{"uid":"d1de8643-10"}],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-14":{"id":"/src/telemetry.ts","moduleParts":{"index.js":"d1de8643-15"},"imported":[{"uid":"d1de8643-40"}],"importedBy":[{"uid":"d1de8643-38"},{"uid":"d1de8643-16"}]},"d1de8643-16":{"id":"/src/error-boundary.ts","moduleParts":{"index.js":"d1de8643-17"},"imported":[{"uid":"d1de8643-40"},{"uid":"d1de8643-4"},{"uid":"d1de8643-2"},{"uid":"d1de8643-0"},{"uid":"d1de8643-14"}],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-18":{"id":"/src/for.ts","moduleParts":{"index.js":"d1de8643-19"},"imported":[],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-20":{"id":"/src/ref.ts","moduleParts":{"index.js":"d1de8643-21"},"imported":[],"importedBy":[{"uid":"d1de8643-38"},{"uid":"d1de8643-22"}]},"d1de8643-22":{"id":"/src/defer.ts","moduleParts":{"index.js":"d1de8643-23"},"imported":[{"uid":"d1de8643-40"},{"uid":"d1de8643-10"},{"uid":"d1de8643-0"},{"uid":"d1de8643-20"}],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-24":{"id":"/src/lazy.ts","moduleParts":{"index.js":"d1de8643-25"},"imported":[{"uid":"d1de8643-40"},{"uid":"d1de8643-10"}],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-26":{"id":"/src/map-array.ts","moduleParts":{"index.js":"d1de8643-27"},"imported":[],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-28":{"id":"/src/portal.ts","moduleParts":{"index.js":"d1de8643-29"},"imported":[],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-30":{"id":"/src/props.ts","moduleParts":{"index.js":"d1de8643-31"},"imported":[],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-32":{"id":"/src/show.ts","moduleParts":{"index.js":"d1de8643-33"},"imported":[],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-34":{"id":"/src/style.ts","moduleParts":{"index.js":"d1de8643-35"},"imported":[],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-36":{"id":"/src/suspense.ts","moduleParts":{"index.js":"d1de8643-37"},"imported":[{"uid":"d1de8643-10"}],"importedBy":[{"uid":"d1de8643-38"}]},"d1de8643-38":{"id":"/src/index.ts","moduleParts":{"index.js":"d1de8643-39"},"imported":[{"uid":"d1de8643-2"},{"uid":"d1de8643-4"},{"uid":"d1de8643-6"},{"uid":"d1de8643-8"},{"uid":"d1de8643-12"},{"uid":"d1de8643-16"},{"uid":"d1de8643-18"},{"uid":"d1de8643-10"},{"uid":"d1de8643-22"},{"uid":"d1de8643-24"},{"uid":"d1de8643-0"},{"uid":"d1de8643-26"},{"uid":"d1de8643-28"},{"uid":"d1de8643-30"},{"uid":"d1de8643-20"},{"uid":"d1de8643-32"},{"uid":"d1de8643-34"},{"uid":"d1de8643-36"},{"uid":"d1de8643-14"}],"importedBy":[],"isEntry":true},"d1de8643-40":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"d1de8643-8"},{"uid":"d1de8643-16"},{"uid":"d1de8643-22"},{"uid":"d1de8643-24"},{"uid":"d1de8643-14"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"1b1bcb41-1","name":"lifecycle.ts"},{"uid":"1b1bcb41-3","name":"component.ts"},{"uid":"1b1bcb41-5","name":"compat-marker.ts"},{"uid":"1b1bcb41-7","name":"compat-shared.ts"},{"uid":"1b1bcb41-9","name":"context.ts"},{"uid":"1b1bcb41-11","name":"dynamic.ts"},{"uid":"1b1bcb41-13","name":"telemetry.ts"},{"uid":"1b1bcb41-15","name":"error-boundary.ts"},{"uid":"1b1bcb41-17","name":"for.ts"},{"uid":"1b1bcb41-19","name":"ref.ts"},{"uid":"1b1bcb41-21","name":"defer.ts"},{"uid":"1b1bcb41-23","name":"lazy.ts"},{"uid":"1b1bcb41-25","name":"map-array.ts"},{"uid":"1b1bcb41-27","name":"portal.ts"},{"uid":"1b1bcb41-29","name":"props.ts"},{"uid":"1b1bcb41-31","name":"show.ts"},{"uid":"1b1bcb41-33","name":"style.ts"},{"uid":"1b1bcb41-35","name":"suspense.ts"},{"uid":"1b1bcb41-37","name":"index.ts"}]}]},{"name":"jsx-dev-runtime.js","children":[{"name":"src/jsx-dev-runtime.ts","uid":"1b1bcb41-39"}]},{"name":"jsx-runtime.js","children":[{"name":"src/jsx-runtime.ts","uid":"1b1bcb41-41"}]},{"name":"_chunks/h-CYSD6aBx.js","children":[{"name":"src/h.ts","uid":"1b1bcb41-43"}]}],"isRoot":true},"nodeParts":{"1b1bcb41-1":{"renderedLength":3090,"gzipLength":1316,"brotliLength":0,"metaUid":"1b1bcb41-0"},"1b1bcb41-3":{"renderedLength":1908,"gzipLength":881,"brotliLength":0,"metaUid":"1b1bcb41-2"},"1b1bcb41-5":{"renderedLength":3173,"gzipLength":1409,"brotliLength":0,"metaUid":"1b1bcb41-4"},"1b1bcb41-7":{"renderedLength":2346,"gzipLength":1033,"brotliLength":0,"metaUid":"1b1bcb41-6"},"1b1bcb41-9":{"renderedLength":5216,"gzipLength":2147,"brotliLength":0,"metaUid":"1b1bcb41-8"},"1b1bcb41-11":{"renderedLength":490,"gzipLength":292,"brotliLength":0,"metaUid":"1b1bcb41-10"},"1b1bcb41-13":{"renderedLength":1990,"gzipLength":950,"brotliLength":0,"metaUid":"1b1bcb41-12"},"1b1bcb41-15":{"renderedLength":1666,"gzipLength":843,"brotliLength":0,"metaUid":"1b1bcb41-14"},"1b1bcb41-17":{"renderedLength":700,"gzipLength":478,"brotliLength":0,"metaUid":"1b1bcb41-16"},"1b1bcb41-19":{"renderedLength":86,"gzipLength":98,"brotliLength":0,"metaUid":"1b1bcb41-18"},"1b1bcb41-21":{"renderedLength":4387,"gzipLength":1891,"brotliLength":0,"metaUid":"1b1bcb41-20"},"1b1bcb41-23":{"renderedLength":461,"gzipLength":273,"brotliLength":0,"metaUid":"1b1bcb41-22"},"1b1bcb41-25":{"renderedLength":1018,"gzipLength":571,"brotliLength":0,"metaUid":"1b1bcb41-24"},"1b1bcb41-27":{"renderedLength":818,"gzipLength":491,"brotliLength":0,"metaUid":"1b1bcb41-26"},"1b1bcb41-29":{"renderedLength":6310,"gzipLength":2344,"brotliLength":0,"metaUid":"1b1bcb41-28"},"1b1bcb41-31":{"renderedLength":2022,"gzipLength":854,"brotliLength":0,"metaUid":"1b1bcb41-30"},"1b1bcb41-33":{"renderedLength":1858,"gzipLength":825,"brotliLength":0,"metaUid":"1b1bcb41-32"},"1b1bcb41-35":{"renderedLength":1104,"gzipLength":614,"brotliLength":0,"metaUid":"1b1bcb41-34"},"1b1bcb41-37":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"1b1bcb41-36"},"1b1bcb41-39":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"1b1bcb41-38"},"1b1bcb41-41":{"renderedLength":1789,"gzipLength":834,"brotliLength":0,"metaUid":"1b1bcb41-40"},"1b1bcb41-43":{"renderedLength":1813,"gzipLength":957,"brotliLength":0,"metaUid":"1b1bcb41-42"}},"nodeMetas":{"1b1bcb41-0":{"id":"/src/lifecycle.ts","moduleParts":{"index.js":"1b1bcb41-1"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"},{"uid":"1b1bcb41-2"},{"uid":"1b1bcb41-8"},{"uid":"1b1bcb41-14"},{"uid":"1b1bcb41-20"}]},"1b1bcb41-2":{"id":"/src/component.ts","moduleParts":{"index.js":"1b1bcb41-3"},"imported":[{"uid":"1b1bcb41-0"}],"importedBy":[{"uid":"1b1bcb41-36"},{"uid":"1b1bcb41-14"}]},"1b1bcb41-4":{"id":"/src/compat-marker.ts","moduleParts":{"index.js":"1b1bcb41-5"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"},{"uid":"1b1bcb41-14"}]},"1b1bcb41-6":{"id":"/src/compat-shared.ts","moduleParts":{"index.js":"1b1bcb41-7"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-8":{"id":"/src/context.ts","moduleParts":{"index.js":"1b1bcb41-9"},"imported":[{"uid":"1b1bcb41-44"},{"uid":"1b1bcb41-0"}],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-10":{"id":"/src/dynamic.ts","moduleParts":{"index.js":"1b1bcb41-11"},"imported":[{"uid":"1b1bcb41-42"}],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-12":{"id":"/src/telemetry.ts","moduleParts":{"index.js":"1b1bcb41-13"},"imported":[{"uid":"1b1bcb41-44"}],"importedBy":[{"uid":"1b1bcb41-36"},{"uid":"1b1bcb41-14"}]},"1b1bcb41-14":{"id":"/src/error-boundary.ts","moduleParts":{"index.js":"1b1bcb41-15"},"imported":[{"uid":"1b1bcb41-44"},{"uid":"1b1bcb41-4"},{"uid":"1b1bcb41-2"},{"uid":"1b1bcb41-0"},{"uid":"1b1bcb41-12"}],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-16":{"id":"/src/for.ts","moduleParts":{"index.js":"1b1bcb41-17"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-18":{"id":"/src/ref.ts","moduleParts":{"index.js":"1b1bcb41-19"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"},{"uid":"1b1bcb41-20"}]},"1b1bcb41-20":{"id":"/src/defer.ts","moduleParts":{"index.js":"1b1bcb41-21"},"imported":[{"uid":"1b1bcb41-44"},{"uid":"1b1bcb41-42"},{"uid":"1b1bcb41-0"},{"uid":"1b1bcb41-18"}],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-22":{"id":"/src/lazy.ts","moduleParts":{"index.js":"1b1bcb41-23"},"imported":[{"uid":"1b1bcb41-44"},{"uid":"1b1bcb41-42"}],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-24":{"id":"/src/map-array.ts","moduleParts":{"index.js":"1b1bcb41-25"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-26":{"id":"/src/portal.ts","moduleParts":{"index.js":"1b1bcb41-27"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-28":{"id":"/src/props.ts","moduleParts":{"index.js":"1b1bcb41-29"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-30":{"id":"/src/show.ts","moduleParts":{"index.js":"1b1bcb41-31"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-32":{"id":"/src/style.ts","moduleParts":{"index.js":"1b1bcb41-33"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-34":{"id":"/src/suspense.ts","moduleParts":{"index.js":"1b1bcb41-35"},"imported":[{"uid":"1b1bcb41-42"}],"importedBy":[{"uid":"1b1bcb41-36"}]},"1b1bcb41-36":{"id":"/src/index.ts","moduleParts":{"index.js":"1b1bcb41-37"},"imported":[{"uid":"1b1bcb41-2"},{"uid":"1b1bcb41-4"},{"uid":"1b1bcb41-6"},{"uid":"1b1bcb41-8"},{"uid":"1b1bcb41-10"},{"uid":"1b1bcb41-14"},{"uid":"1b1bcb41-16"},{"uid":"1b1bcb41-42"},{"uid":"1b1bcb41-20"},{"uid":"1b1bcb41-22"},{"uid":"1b1bcb41-0"},{"uid":"1b1bcb41-24"},{"uid":"1b1bcb41-26"},{"uid":"1b1bcb41-28"},{"uid":"1b1bcb41-18"},{"uid":"1b1bcb41-30"},{"uid":"1b1bcb41-32"},{"uid":"1b1bcb41-34"},{"uid":"1b1bcb41-12"}],"importedBy":[],"isEntry":true},"1b1bcb41-38":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-dev-runtime.js":"1b1bcb41-39"},"imported":[{"uid":"1b1bcb41-40"}],"importedBy":[],"isEntry":true},"1b1bcb41-40":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"1b1bcb41-41"},"imported":[{"uid":"1b1bcb41-42"}],"importedBy":[{"uid":"1b1bcb41-38"}],"isEntry":true},"1b1bcb41-42":{"id":"/src/h.ts","moduleParts":{"_chunks/h-CYSD6aBx.js":"1b1bcb41-43"},"imported":[],"importedBy":[{"uid":"1b1bcb41-36"},{"uid":"1b1bcb41-10"},{"uid":"1b1bcb41-20"},{"uid":"1b1bcb41-22"},{"uid":"1b1bcb41-34"},{"uid":"1b1bcb41-40"}]},"1b1bcb41-44":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"1b1bcb41-8"},{"uid":"1b1bcb41-14"},{"uid":"1b1bcb41-20"},{"uid":"1b1bcb41-22"},{"uid":"1b1bcb41-12"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,3 +1,4 @@
+import { n as Fragment, r as h, t as EMPTY_PROPS } from "./_chunks/h-CYSD6aBx.js";
 import { effect, getReactiveTrace, setSnapshotCapture, signal } from "@pyreon/reactivity";
 
 //#region src/lifecycle.ts
@@ -145,8 +146,19 @@ const _errorBoundaryStack = [];
 function pushErrorBoundary(handler) {
 	_errorBoundaryStack.push(handler);
 }
-function popErrorBoundary() {
-	_errorBoundaryStack.pop();
+/**
+* Remove a SPECIFIC handler from the error-boundary stack by reference
+* identity. Each `ErrorBoundary` registers `onUnmount(() => popErrorBoundary(handler))`
+* with its OWN handler — so unmount in any order (LIFO, FIFO, middle-out)
+* correctly removes the right handler.
+*/
+function popErrorBoundary(handler) {
+	if (handler === void 0) {
+		_errorBoundaryStack.pop();
+		return;
+	}
+	const idx = _errorBoundaryStack.lastIndexOf(handler);
+	if (idx !== -1) _errorBoundaryStack.splice(idx, 1);
 }
 /**
 * Dispatch an error to the nearest active ErrorBoundary.
@@ -334,11 +346,42 @@ process.env.NODE_ENV;
 function pushContext(values) {
 	getStack().push(values);
 }
+/**
+* Pop the LAST frame from the context stack.
+*
+* NOTE: position-based pop. Safe ONLY when the caller can guarantee that the
+* top of the stack is the frame they want to remove (the strict LIFO contract).
+* The `provide()` helper does NOT use this — it uses identity-based removal
+* via `removeContextFrame` because reactive boundaries can push snapshot
+* frames between a component's `provide(ctx, value)` and its eventual
+* unmount, making the top-of-stack unsafe to assume.
+*/
 function popContext() {
 	const stack = getStack();
 	if (stack.length === 0) return;
 	stack.pop();
 }
+/**
+* Remove a SPECIFIC frame from the context stack by reference identity.
+*
+* Internal — used by `provide()` and `withContext()` to safely clean up
+* their pushed frame on unmount even when other frames have been pushed
+* between push and pop (e.g. a reactive boundary's `restoreContextStack`
+* pushing snapshot frames during the descendant's lifecycle). The
+* symmetric position-based `popContext()` would pop the wrong frame in
+* that case and orphan the descendant's provider frame on the live stack
+* — the root cause of the 321k-entry context-stack leak under repeated
+* reactive remounts.
+*
+* Uses `lastIndexOf` (LIFO match) — picks the most-recently-pushed frame
+* with that exact reference, so `provide(ctx, a); provide(ctx, b)` followed
+* by two unmounts removes them in reverse order.
+*/
+function removeContextFrame(frame) {
+	const stack = getStack();
+	const idx = stack.lastIndexOf(frame);
+	if (idx !== -1) stack.splice(idx, 1);
+}
 function useContext(context) {
 	const stack = getStack();
 	for (let i = stack.length - 1; i >= 0; i--) {
@@ -359,19 +402,21 @@ function useContext(context) {
 * }
 */
 function provide(context, value) {
-	pushContext(new Map([[context.id, value]]));
-	onUnmount(() => popContext());
+	const frame = new Map([[context.id, value]]);
+	pushContext(frame);
+	onUnmount(() => removeContextFrame(frame));
 }
 /**
 * Provide a value for `context` during `fn()`.
 * Used by the renderer when it encounters a `<Provider>` component.
 */
 function withContext(context, value, fn) {
-	pushContext(new Map([[context.id, value]]));
+	const frame = new Map([[context.id, value]]);
+	pushContext(frame);
 	try {
 		fn();
 	} finally {
-		popContext();
+		removeContextFrame(frame);
 	}
 }
 /**
@@ -400,12 +445,16 @@ function captureContextStack() {
 */
 function restoreContextStack(snapshot, fn) {
 	const stack = getStack();
-	const insertIndex = stack.length;
 	for (const frame of snapshot) stack.push(frame);
 	try {
 		return fn();
 	} finally {
-		stack.splice(insertIndex, snapshot.length);
+		for (let i = snapshot.length - 1; i >= 0; i--) {
+			const frame = snapshot[i];
+			if (!frame) continue;
+			const idx = stack.lastIndexOf(frame);
+			if (idx !== -1) stack.splice(idx, 1);
+		}
 	}
 }
 setSnapshotCapture({
@@ -413,52 +462,6 @@ setSnapshotCapture({
 	restore: (snap, fn) => restoreContextStack(snap, fn)
 });
 
-//#endregion
-//#region src/h.ts
-/**
-* Marker for fragment nodes — renders children without a wrapper element.
-*
-* MUST use `Symbol.for(...)` (global registry, keyed by string), NOT
-* `Symbol(...)` (fresh per evaluation). `h.ts` is inlined into BOTH the
-* main `lib/index.js` and the `lib/jsx-runtime.js` published bundles —
-* each bundle's evaluation of a bare `Symbol(...)` would produce a
-* DISTINCT Symbol identity. JSX `<>` compiles to `jsx(Fragment, ...)` and
-* resolves to jsx-runtime's identity; `runtime-server` checks
-* `vnode.type === Fragment` against the main-entry identity. Mismatch
-* fell through to `renderElement` and crashed SSG with
-* `TypeError: Cannot convert a Symbol value to a string`.
-* `Symbol.for()` keys by string in a global registry shared across all
-* bundle evaluations — same identity everywhere.
-*/
-const Fragment = Symbol.for("Pyreon.Fragment");
-/**
-* Hyperscript function — the compiled output of JSX.
-* `<div class="x">hello</div>` → `h("div", { class: "x" }, "hello")`
-*
-* Generic on P so TypeScript validates props match the component's signature
-* at the call site, then stores the result in the loosely-typed VNode.
-*/
-/** Shared empty props sentinel — identity-checked in mountElement to skip applyProps. */
-const EMPTY_PROPS = {};
-function h(type, props, ...children) {
-	return {
-		type,
-		props: props ?? EMPTY_PROPS,
-		children: normalizeChildren(children),
-		key: props?.key ?? null
-	};
-}
-function normalizeChildren(children) {
-	for (let i = 0; i < children.length; i++) if (Array.isArray(children[i])) return flattenChildren(children);
-	return children;
-}
-function flattenChildren(children) {
-	const result = [];
-	for (const child of children) if (Array.isArray(child)) result.push(...flattenChildren(child));
-	else result.push(child);
-	return result;
-}
-
 //#endregion
 //#region src/dynamic.ts
 const __DEV__$4 = process.env.NODE_ENV !== "production";
@@ -577,7 +580,7 @@ function ErrorBoundary(props) {
 		return true;
 	};
 	pushErrorBoundary(handler);
-	onUnmount(() => popErrorBoundary());
+	onUnmount(() => popErrorBoundary(handler));
 	return () => {
 		const err = error();
 		if (err != null) return props.fallback(err, reset);
@@ -1198,5 +1201,5 @@ function Suspense(props) {
 }
 
 //#endregion
-export { CSS_UNITLESS, Defer, Dynamic, EMPTY_PROPS, ErrorBoundary, For, ForSymbol, Fragment, Match, MatchSymbol, NATIVE_COMPAT_MARKER, Portal, PortalSymbol, REACTIVE_PROP, Show, Suspense, Switch, _rp, _wrapSpread, captureContextStack, createContext, createReactiveContext, createRef, createUniqueId, cx, defineComponent, dispatchToErrorBoundary, h, isNativeCompat, lazy, makeReactiveProps, mapArray, mapCompatDomProps, mergeProps, nativeCompat, normalizeStyleValue, onErrorCaptured, onMount, onUnmount, onUpdate, popContext, propagateError, provide, pushContext, registerErrorHandler, reportError, restoreContextStack, runWithHooks, setContextStackProvider, shallowEqualProps, splitProps, toKebabCase, useContext, withContext };
+export { CSS_UNITLESS, Defer, Dynamic, EMPTY_PROPS, ErrorBoundary, For, ForSymbol, Fragment, Match, MatchSymbol, NATIVE_COMPAT_MARKER, Portal, PortalSymbol, REACTIVE_PROP, Show, Suspense, Switch, _rp, _wrapSpread, captureContextStack, createContext, createReactiveContext, createRef, createUniqueId, cx, defineComponent, dispatchToErrorBoundary, h, isNativeCompat, lazy, makeReactiveProps, mapArray, mapCompatDomProps, mergeProps, nativeCompat, normalizeStyleValue, onErrorCaptured, onMount, onUnmount, onUpdate, popContext, propagateError, provide, pushContext, registerErrorHandler, removeContextFrame, reportError, restoreContextStack, runWithHooks, setContextStackProvider, shallowEqualProps, splitProps, toKebabCase, useContext, withContext };
 //# sourceMappingURL=index.js.map