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