@getforma/core 0.3.1 → 0.8.1

package/README.md

@@ -18,6 +18,41 @@ Or use the CDN (no build step required):
 <script src="https://unpkg.com/@getforma/core/dist/formajs-runtime.global.js"></script>
 ```
 
+### Getting Started with a Bundler
+
+After `npm install`, you need a bundler to resolve the ES module imports. Here's a minimal Vite setup:
+
+```bash
+npm install @getforma/core
+npm install -D vite
+```
+
+```html
+<!-- index.html -->
+<div id="app"></div>
+<script type="module" src="./main.ts"></script>
+```
+
+```typescript
+// main.ts
+import { createSignal, h, mount } from '@getforma/core';
+
+const [count, setCount] = createSignal(0);
+
+mount(() =>
+  h('button', { onClick: () => setCount(count() + 1) },
+    () => `Clicked ${count()} times`
+  ),
+  '#app'
+);
+```
+
+```bash
+npx vite
+```
+
+For **esbuild**, **tsup**, or other bundlers — no special config is needed. FormaJS ships standard ESM and CJS via `package.json` exports.
+
 ## Why FormaJS?
 
 Most UI libraries make you choose: simple but limited (Alpine, htmx), or powerful but complex (React, Vue, Svelte). FormaJS gives you a single reactive core that scales from a CDN script tag to a full-stack Rust SSR pipeline.
@@ -65,6 +100,8 @@ Drop a script tag, write `data-*` attributes. Zero config, zero tooling.
 | `data-persist` | Persist state to localStorage | `data-persist="{count}"` |
 | `data-fetch` | Fetch data from URL | `data-fetch="GET /api/items → items"` |
 | `data-transition:*` | Enter/leave CSS transitions | `data-transition:enter="fade-in"` |
+| `$el` | Reference to the current DOM element | `data-on:click="{$el.classList.toggle('active')}"` |
+| `$dispatch` | Fire a CustomEvent (bubbles, crosses Shadow DOM) | `data-on:click="{$dispatch('selected', {id: itemId})}"` |
 
 CSP-safe expression parser — no `eval()` or `new Function()` by default. For strict CSP environments, use the hardened build:
 
@@ -125,15 +162,14 @@ mount(() => <Counter />, '#app');
 
 ## CDN Usage
 
-### Standard (recommended)
-```html
-<script src="https://unpkg.com/@getforma/core/dist/forma-runtime.js"></script>
-```
+Both long and short filenames are provided. They are identical files — use whichever you prefer:
 
-### CSP-Safe (strict Content-Security-Policy)
-```html
-<script src="https://unpkg.com/@getforma/core/dist/forma-runtime-csp.js"></script>
-```
+| Build | URL |
+|-------|-----|
+| **Standard** (recommended) | `unpkg.com/@getforma/core/dist/formajs-runtime.global.js` |
+| Standard (short alias) | `unpkg.com/@getforma/core/dist/forma-runtime.js` |
+| **CSP-safe** (no `new Function`) | `unpkg.com/@getforma/core/dist/formajs-runtime-hardened.global.js` |
+| CSP-safe (short alias) | `unpkg.com/@getforma/core/dist/forma-runtime-csp.js` |
 
 > The CSP build uses a hand-written expression parser and never calls `new Function`.
 > It supports most common patterns. See [examples/csp](./examples/csp) for a working demo.
@@ -156,6 +192,45 @@ batch(() => {
 });
 ```
 
+#### Custom Equality
+
+Skip updates when the new value is equal to the current value:
+
+```typescript
+const [pos, setPos] = createSignal(
+  { x: 0, y: 0 },
+  { equals: (a, b) => a.x === b.x && a.y === b.y },
+);
+
+setPos({ x: 0, y: 0 }); // skipped — values are equal
+setPos({ x: 1, y: 0 }); // applied — values differ
+```
+
+#### Computed with Previous Value
+
+The computed getter receives the previous value for efficient diffing:
+
+```typescript
+const changes = createComputed((prev) => {
+  const current = items();
+  if (prev) console.log(`${prev.length} → ${current.length} items`);
+  return current;
+});
+```
+
+#### Reactive Introspection
+
+Type guards and utilities from alien-signals 3.x:
+
+```typescript
+import { isSignal, isComputed, getBatchDepth, trigger } from '@getforma/core';
+
+isSignal(count);           // true — is this a signal getter?
+isComputed(doubled);       // true — is this a computed value?
+getBatchDepth();           // 0 outside batch, 1+ inside
+trigger(doubled);          // force recomputation even if deps unchanged
+```
+
 ### Conditional Rendering
 
 ```typescript
@@ -204,12 +279,17 @@ const [state, setState] = createStore({
   items: [1, 2, 3],
 });
 
-// Read reactively
+// Read reactively — tracked at the exact property path
 state.user.name;        // 'Alice'
+state.items[0];         // 1
+
+// Setter API — partial object merge (batched)
+setState({ user: { ...state.user, name: 'Bob' } });
+setState(prev => ({ items: [...prev.items, 4] }));
 
-// Mutate — only affected subscribers update
-setState('user', 'name', 'Bob');
-setState('items', items => [...items, 4]);
+// Or mutate directly via proxy — only affected subscribers update
+state.user.name = 'Bob';          // only "user.name" subscribers notified
+state.items.push(4);              // array mutation batched automatically
 ```
 
 ### Components
@@ -231,6 +311,60 @@ const Timer = defineComponent(() => {
 document.body.appendChild(Timer());
 ```
 
+#### Lifecycle: `onMount` vs `onUnmount`
+
+- **`onMount(fn)`** — runs after the component's DOM is created. If `fn` returns a function, that function is automatically registered as an unmount callback.
+- **`onUnmount(fn)`** — explicitly registers a cleanup function that runs when the component is disposed.
+
+Both mechanisms feed into the same cleanup queue — the `onMount` return shorthand is convenience for the common pattern of setting up and tearing down in one place:
+
+```typescript
+// These are equivalent:
+onMount(() => {
+  const id = setInterval(tick, 1000);
+  return () => clearInterval(id);
+});
+
+// vs.
+onMount(() => {
+  const id = setInterval(tick, 1000);
+  onUnmount(() => clearInterval(id));
+});
+```
+
+### Error Handling
+
+**`mount()` fails fast.** If the container selector doesn't match any element, it throws:
+
+```typescript
+mount(() => h('p', null, 'hello'), '#nonexistent');
+// Error: mount: container not found — "#nonexistent"
+```
+
+**Global error handler.** Register a handler for errors in effects and lifecycle callbacks:
+
+```typescript
+import { onError } from '@getforma/core';
+
+onError((error, info) => {
+  console.error(`[${info?.source}]`, error);
+});
+```
+
+**Error boundaries.** Catch rendering errors and display fallback UI with a retry option:
+
+```typescript
+import { createErrorBoundary, h } from '@getforma/core';
+
+createErrorBoundary(
+  () => h(UnstableComponent),
+  (error, retry) => h('div', null,
+    h('p', null, `Something went wrong: ${error.message}`),
+    h('button', { onClick: retry }, 'Retry'),
+  ),
+);
+```
+
 ### Context (Dependency Injection)
 
 ```typescript
@@ -242,29 +376,106 @@ provide(ThemeCtx, 'dark');
 const theme = inject(ThemeCtx); // 'dark'
 ```
 
+### History (undo/redo)
+
+```typescript
+import { createHistory } from '@getforma/core';
+
+const [state, setState, { undo, redo, canUndo, canRedo }] = createHistory({ text: '' });
+
+setState({ text: 'hello' });
+setState({ text: 'hello world' });
+
+undo();              // state.text === 'hello'
+canUndo();           // true
+redo();              // state.text === 'hello world'
+```
+
+### Reducer
+
+```typescript
+import { createReducer } from '@getforma/core';
+
+const [state, dispatch] = createReducer(
+  (state, action) => {
+    switch (action.type) {
+      case 'INCREMENT': return { count: state.count + 1 };
+      case 'DECREMENT': return { count: state.count - 1 };
+      default: return state;
+    }
+  },
+  { count: 0 },
+);
+
+dispatch({ type: 'INCREMENT' }); // state() === { count: 1 }
+```
+
 ## Islands Architecture
 
-For server-rendered HTML, activate independent interactive regions:
+For server-rendered HTML, activate independent interactive regions. Each island callback receives the root DOM element and parsed props, then returns a component tree — the same `h()` calls you'd use for client-side rendering. The hydration system walks the descriptor tree against the existing SSR DOM, attaching event handlers and reactive bindings without recreating elements.
 
 ```typescript
 import { activateIslands, createSignal, h } from '@getforma/core';
 
 activateIslands({
   Counter: (el, props) => {
-    const [count, setCount] = createSignal(props.initial ?? 0);
-    // Hydrate: attach reactivity to existing server-rendered DOM
+    const [count, setCount] = createSignal(props?.initial ?? 0);
+
+    // el is the island's root HTMLElement — useful for layout measurement,
+    // focus management, CSS classes, or reading extra data-* attributes.
+    el.classList.add('is-hydrated');
+
+    // Return the same tree shape as the SSR output.
+    // Hydration matches this against existing DOM — no elements are created.
+    return h('div', null,
+      h('span', null, () => String(count())),
+      h('button', { onClick: () => setCount(c => c + 1) }, '+1'),
+    );
   },
 });
 ```
 
 ```html
 <!-- Server-rendered HTML -->
-<div data-forma-island="Counter" data-forma-props='{"initial": 5}'>
+<div data-forma-island="0" data-forma-component="Counter" data-forma-props='{"initial": 5}'>
   <span>5</span>
   <button>+1</button>
 </div>
 ```
 
+Each island is activated inside its own `createRoot` scope with error isolation — a broken island never takes down its siblings.
+
+### Hydration Triggers
+
+Control when an island hydrates via `data-forma-hydrate`:
+
+| Trigger | When it hydrates | Use case |
+|---------|-----------------|----------|
+| `load` (default) | Immediately on page load | Above-the-fold interactive content |
+| `visible` | When island enters viewport | Below-the-fold components |
+| `idle` | During browser idle time (`requestIdleCallback`) | Non-critical functionality |
+| `interaction` | On first `pointerdown` or `focusin` | Skeleton+skin pattern |
+
+```html
+<div data-forma-island="1" data-forma-component="Comments" data-forma-hydrate="visible">
+  <!-- Only loads JS when scrolled into view -->
+</div>
+```
+
+### Island Disposal
+
+When swapping module content (e.g., inside `<forma-stage>` Shadow DOM), dispose islands to prevent leaked effects and listeners:
+
+```typescript
+import { deactivateIsland, deactivateAllIslands } from '@getforma/core';
+
+// Dispose all active islands under a root
+deactivateAllIslands(shadowRoot);
+
+// Or dispose a single island
+deactivateIsland(islandElement);
+```
+
 ## Subpath Exports
 
 | Import | Description |
@@ -288,12 +499,60 @@ See the [`examples/`](./examples) directory:
 - **todo** — todo list with `createList` and keyed reconciliation
 - **data-table** — sortable table with `createList`
 
+## How Is This Different from Solid?
+
+FormaJS shares Solid's core insight — fine-grained signals updating the real DOM without a virtual DOM. If you know Solid, you'll feel at home. The differences are in scope and delivery:
+
+| | Solid | FormaJS |
+|-|-------|---------|
+| **Build requirement** | Always needs a compiler (JSX transform) | CDN runtime works with zero build step; bundler is optional |
+| **Entry points** | JSX-first | HTML Runtime (`data-*` attributes), `h()` hyperscript, or JSX |
+| **CSP** | Relies on compiler output | Hand-written expression parser; hardened build has no `new Function()` |
+| **Islands** | Via [solid-start](https://start.solidjs.com/) meta-framework | Built-in `activateIslands()` — no meta-framework needed |
+| **Ecosystem** | Mature (router, meta-framework, devtools) | Minimal — reactive core only, you bring the architecture |
+| **SSR runtime** | Node.js required | Node.js via `renderToString`, or Rust walker (no JS runtime on the server) |
+| **Size** | ~7KB | ~15KB (includes runtime parser, stores, SSR) |
+
+**When to choose FormaJS:** You want islands hydration built into the library, not bolted on through a meta-framework. You need CSP compliance without a build step. You want three entry points (CDN, hyperscript, JSX) sharing one signal graph. Or you're building on a Rust backend and want your frontend reactive layer to integrate natively with the server stack.
+
+**When to choose Solid:** You want a mature JavaScript ecosystem with routing, SSR meta-framework (SolidStart), devtools, and community-built component libraries. Your backend is Node.js and you want SSR in the same language as your frontend.
+
+> FormaJS is the reactive layer of the [Forma stack](https://getforma.dev). The full pipeline compiles components to a binary IR (FMIR), renders them in Rust via `forma-ir`, and serves pages through `forma-server` — SSR without Node.js, binary IR over the wire, deployed for ~$18/month.
+
+## Stability
+
+Some features are more battle-tested than others:
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Signals (`createSignal`, `createEffect`, `createComputed`, `batch`) | **Stable** | Core primitive, well-tested. Custom `equals` option supported. |
+| Reactive introspection (`isSignal`, `isComputed`, `trigger`, `getBatchDepth`) | **Stable** | alien-signals 3.x type guards |
+| `h()` / JSX rendering | **Stable** | |
+| `mount()`, `createShow`, `createSwitch`, `createList` | **Stable** | |
+| HTML Runtime (`data-*` directives) | **Stable** | Expression parser covers common patterns |
+| CSP-hardened runtime | **Stable** | No `new Function()`, tested with strict CSP headers |
+| `createStore` (deep reactivity) | **Stable** | |
+| Components (`defineComponent`, lifecycle) | **Stable** | |
+| Context (`createContext`, `provide`, `inject`) | **Stable** | |
+| Islands (`activateIslands`, disposal, triggers) | **Stable** | 10 activation + 88 hydration + 10 trigger tests |
+| `createHistory` (undo/redo) | **Stable** | |
+| `createReducer` | **Stable** | 8 tests |
+| `data-fetch`, `data-transition:*` | **Stable** | Fully implemented in HTML Runtime |
+| SSR (`renderToString`, `renderToStream`) | **Beta** | Functional, API may evolve |
+| TC39 Signals compat (`Signal.State`, `Signal.Computed`) | **Beta** | 9 tests, but tracks an evolving TC39 proposal |
+
 ## Ecosystem
 
-| Package | Description |
-|---------|-------------|
-| [@getforma/core](https://www.npmjs.com/package/@getforma/core) | This library — `npm install @getforma/core` |
-| [forma](https://github.com/getforma-dev/forma) | Rust server framework (forma-ir + forma-server) |
+FormaJS is the reactive frontend layer of a full-stack Rust + TypeScript framework. The pipeline flows: TypeScript components → `@getforma/compiler` → FMIR binary → `forma-ir` (parse) → `forma-server` (render) → Axum HTTP response.
+
+| Package | Language | Description |
+|---------|----------|-------------|
+| [@getforma/core](https://www.npmjs.com/package/@getforma/core) | TypeScript | This library — reactive DOM, signals, islands, SSR hydration |
+| [@getforma/compiler](https://github.com/getforma-dev/forma-tools) | TypeScript | TypeScript-to-FMIR compiler, Vite plugin, esbuild SSR plugin |
+| [@getforma/build](https://github.com/getforma-dev/forma-tools) | TypeScript | esbuild pipeline with content hashing, compression, manifest |
+| [@getforma/create-app](https://github.com/getforma-dev/create-forma-app) | TypeScript | `npx @getforma/create-app` — scaffold a new Forma project |
+| [forma-ir](https://crates.io/crates/forma-ir) | Rust | FMIR binary format: parser, walker, WASM exports |
+| [forma-server](https://crates.io/crates/forma-server) | Rust | Axum middleware for SSR page rendering, asset serving, CSP |
 
 ## License
 

package/dist/chunk-3U57L2TY.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var alienSignals = require('alien-signals');
+
+// src/reactive/signal.ts
+function applySignalSet(s, v, equals) {
+  if (typeof v !== "function") {
+    if (equals) {
+      const prevSub2 = alienSignals.setActiveSub(void 0);
+      const prev2 = s();
+      alienSignals.setActiveSub(prevSub2);
+      if (equals(prev2, v)) return;
+    }
+    s(v);
+    return;
+  }
+  const prevSub = alienSignals.setActiveSub(void 0);
+  const prev = s();
+  alienSignals.setActiveSub(prevSub);
+  const next = v(prev);
+  if (equals && equals(prev, next)) return;
+  s(next);
+}
+function createSignal(initialValue, options) {
+  const s = alienSignals.signal(initialValue);
+  const getter = s;
+  const eq = options?.equals;
+  const setter = (v) => applySignalSet(s, v, eq);
+  return [getter, setter];
+}
+function createComputed(fn) {
+  return alienSignals.computed(fn);
+}
+
+exports.createComputed = createComputed;
+exports.createSignal = createSignal;
+//# sourceMappingURL=chunk-3U57L2TY.cjs.map
+//# sourceMappingURL=chunk-3U57L2TY.cjs.map

package/dist/chunk-3U57L2TY.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/reactive/signal.ts","../src/reactive/computed.ts"],"names":["prevSub","setActiveSub","prev","createRawSignal","rawComputed"],"mappings":";;;;;AAkEA,SAAS,cAAA,CACP,CAAA,EACA,CAAA,EACA,MAAA,EACM;AACN,EAAA,IAAI,OAAO,MAAM,UAAA,EAAY;AAC3B,IAAA,IAAI,MAAA,EAAQ;AAEV,MAAA,MAAMA,QAAAA,GAAUC,0BAAa,MAAS,CAAA;AACtC,MAAA,MAAMC,QAAO,CAAA,EAAE;AACf,MAAAD,yBAAA,CAAaD,QAAO,CAAA;AACpB,MAAA,IAAI,MAAA,CAAOE,KAAAA,EAAM,CAAC,CAAA,EAAG;AAAA,IACvB;AACA,IAAA,CAAA,CAAE,CAAC,CAAA;AACH,IAAA;AAAA,EACF;AAGA,EAAA,MAAM,OAAA,GAAUD,0BAAa,MAAS,CAAA;AACtC,EAAA,MAAM,OAAO,CAAA,EAAE;AACf,EAAAA,yBAAA,CAAa,OAAO,CAAA;AACpB,EAAA,MAAM,IAAA,GAAQ,EAAqB,IAAI,CAAA;AACvC,EAAA,IAAI,MAAA,IAAU,MAAA,CAAO,IAAA,EAAM,IAAI,CAAA,EAAG;AAClC,EAAA,CAAA,CAAE,IAAI,CAAA;AACR;AAqBO,SAAS,YAAA,CAAgB,cAAiB,OAAA,EAA0E;AACzH,EAAA,MAAM,CAAA,GAAIE,oBAAmB,YAAY,CAAA;AACzC,EAAA,MAAM,MAAA,GAAS,CAAA;AACf,EAAA,MAAM,KAAK,OAAA,EAAS,MAAA;AACpB,EAAA,MAAM,SAA0B,CAAC,CAAA,KAA4B,cAAA,CAAe,CAAA,EAAG,GAAG,EAAE,CAAA;AAEpF,EAAA,OAAO,CAAC,QAAQ,MAAM,CAAA;AACxB;AC7EO,SAAS,eAAkB,EAAA,EAAuC;AACvE,EAAA,OAAOC,sBAAY,EAAE,CAAA;AACvB","file":"chunk-3U57L2TY.cjs","sourcesContent":["/**\n * Forma Reactive - Signal\n *\n * Fine-grained reactive primitive backed by alien-signals.\n * API: createSignal returns [getter, setter] tuple following SolidJS conventions.\n *\n * TC39 Signals equivalent: Signal.State\n */\n\nimport { signal as createRawSignal, setActiveSub } from 'alien-signals';\n\n// ---------------------------------------------------------------------------\n// Public API\n// ---------------------------------------------------------------------------\n\nexport type SignalGetter<T> = () => T;\nexport type SignalSetter<T> = (v: T | ((prev: T) => T)) => void;\n\nexport interface SignalOptions<T> {\n  /** Debug name — attached to getter in dev mode for devtools inspection. */\n  name?: string;\n  /**\n   * Custom equality check. When provided, the setter will read the current\n   * value and only update the signal if `equals(prev, next)` returns `false`.\n   *\n   * Default: none (alien-signals uses strict inequality `!==` internally).\n   *\n   * ```ts\n   * const [pos, setPos] = createSignal(\n   *   { x: 0, y: 0 },\n   *   { equals: (a, b) => a.x === b.x && a.y === b.y },\n   * );\n   *\n   * setPos({ x: 0, y: 0 }); // skipped — equals returns true\n   * setPos({ x: 1, y: 0 }); // applied — equals returns false\n   * ```\n   */\n  equals?: (prev: T, next: T) => boolean;\n}\n\n/**\n * Wrap a value so the setter treats it as a literal value, not a functional updater.\n *\n * When `T` is itself a function type, passing a function to the setter is\n * ambiguous -- it looks like a functional update (`prev => next`). Use\n * `value()` to disambiguate:\n *\n * ```ts\n * const [getFn, setFn] = createSignal<() => void>(() => console.log('a'));\n *\n * // BUG: interpreted as a functional update -- calls the arrow with prev\n * // setFn(() => console.log('b'));\n *\n * // Correct: wraps in a thunk so the setter stores it as-is\n * setFn(value(() => console.log('b')));\n * ```\n */\nexport function value<T>(v: T): () => T {\n  return () => v;\n}\n\ntype RawSignal<T> = {\n  (): T;\n  (value: T): void;\n};\n\nfunction applySignalSet<T>(\n  s: RawSignal<T>,\n  v: T | ((prev: T) => T),\n  equals?: (prev: T, next: T) => boolean,\n): void {\n  if (typeof v !== 'function') {\n    if (equals) {\n      // Read current value without tracking\n      const prevSub = setActiveSub(undefined);\n      const prev = s();\n      setActiveSub(prevSub);\n      if (equals(prev, v)) return; // skip — values are equal\n    }\n    s(v);\n    return;\n  }\n\n  // Functional update: read prev without tracking\n  const prevSub = setActiveSub(undefined);\n  const prev = s();\n  setActiveSub(prevSub);\n  const next = (v as (prev: T) => T)(prev);\n  if (equals && equals(prev, next)) return; // skip — values are equal\n  s(next);\n}\n\n/**\n * Create a reactive signal.\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * console.log(count()); // 0\n * setCount(1);\n * setCount(prev => prev + 1);\n * ```\n *\n * With custom equality:\n *\n * ```ts\n * const [pos, setPos] = createSignal(\n *   { x: 0, y: 0 },\n *   { equals: (a, b) => a.x === b.x && a.y === b.y },\n * );\n * ```\n */\nexport function createSignal<T>(initialValue: T, options?: SignalOptions<T>): [get: SignalGetter<T>, set: SignalSetter<T>] {\n  const s = createRawSignal<T>(initialValue) as RawSignal<T>;\n  const getter = s as unknown as SignalGetter<T>;\n  const eq = options?.equals;\n  const setter: SignalSetter<T> = (v: T | ((prev: T) => T)) => applySignalSet(s, v, eq);\n\n  return [getter, setter];\n}\n","/**\n * Forma Reactive - Computed\n *\n * Lazy, cached derived value that participates in the reactive graph.\n * Backed by alien-signals for automatic dependency tracking\n * and cache invalidation.\n *\n * TC39 Signals equivalent: Signal.Computed\n */\n\nimport { computed as rawComputed } from 'alien-signals';\n\n/**\n * Create a lazy, cached computed value.\n *\n * Note: Unlike SolidJS's createComputed (which is an eager synchronous\n * side effect), this is a lazy cached derivation — equivalent to\n * SolidJS's createMemo. Both createComputed and createMemo in FormaJS\n * are identical.\n *\n * The getter receives the previous value as an argument, enabling\n * efficient diffing patterns without a separate signal:\n *\n * ```ts\n * const [count, setCount] = createSignal(0);\n * const doubled = createComputed(() => count() * 2);\n * console.log(doubled()); // 0\n * setCount(5);\n * console.log(doubled()); // 10\n * ```\n *\n * With previous value (for diffing):\n *\n * ```ts\n * const changes = createComputed((prev) => {\n *   const next = items();\n *   if (prev) console.log(`changed from ${prev.length} to ${next.length} items`);\n *   return next;\n * });\n * ```\n */\nexport function createComputed<T>(fn: (previousValue?: T) => T): () => T {\n  return rawComputed(fn);\n}\n"]}

package/dist/{chunk-5H52PKGF.js → chunk-N522P3G6.js}

@@ -1,14 +1,21 @@
-import { createComputed, createSignal, createValueSignal } from './chunk-KX5WRZH7.js';
-import { effect, startBatch, endBatch, pauseTracking, resumeTracking } from 'alien-signals';
+import { createComputed, createSignal } from './chunk-OZCHIVAZ.js';
+import { effect, effectScope, startBatch, endBatch, setActiveSub } from 'alien-signals';
+export { getBatchDepth, isComputed, isEffect, isEffectScope, isSignal, trigger } from 'alien-signals';
 
-// src/reactive/root.ts
 var currentRoot = null;
 var rootStack = [];
 function createRoot(fn) {
-  const scope = { disposers: [] };
+  const scope = { disposers: [], scopeDispose: null };
   rootStack.push(currentRoot);
   currentRoot = scope;
   const dispose = () => {
+    if (scope.scopeDispose) {
+      try {
+        scope.scopeDispose();
+      } catch {
+      }
+      scope.scopeDispose = null;
+    }
     for (const d of scope.disposers) {
       try {
         d();
@@ -17,14 +24,15 @@ function createRoot(fn) {
     }
     scope.disposers.length = 0;
   };
+  let result;
   try {
-    return fn(dispose);
+    scope.scopeDispose = effectScope(() => {
+      result = fn(dispose);
+    });
   } finally {
     currentRoot = rootStack.pop() ?? null;
-    if (rootStack.length === 0) {
-      rootStack.length = 0;
-    }
   }
+  return result;
 }
 function registerDisposer(dispose) {
   if (currentRoot) {
@@ -237,11 +245,11 @@ function batch(fn) {
   }
 }
 function untrack(fn) {
-  pauseTracking();
+  const prev = setActiveSub(void 0);
   try {
     return fn();
   } finally {
-    resumeTracking();
+    setActiveSub(prev);
   }
 }
 
@@ -293,8 +301,8 @@ function getSuspenseContext() {
 // src/reactive/resource.ts
 function createResource(source, fetcher, options) {
   const [data, setData] = createSignal(options?.initialValue);
-  const [loading, setLoading] = createValueSignal(false);
-  const [error, setError] = createValueSignal(void 0);
+  const [loading, setLoading] = createSignal(false);
+  const [error, setError] = createSignal(void 0);
   const suspenseCtx = getSuspenseContext();
   let abortController = null;
   let fetchVersion = 0;
@@ -806,6 +814,10 @@ function appendChild(parent, child) {
   }
 }
 function h(tag, props, ...children) {
+  if (typeof tag === "function" && tag !== Fragment) {
+    const mergedProps = { ...props ?? {}, children };
+    return tag(mergedProps);
+  }
   if (tag === Fragment) {
     const frag = document.createDocumentFragment();
     for (const child of children) {
@@ -948,6 +960,7 @@ function createShow(when, thenFn, elseFn) {
 }
 
 // src/dom/hydrate.ts
+var ABORT_SYM2 = /* @__PURE__ */ Symbol.for("forma-abort");
 var hydrating = false;
 function setHydrating(value2) {
   hydrating = value2;
@@ -967,7 +980,12 @@ function applyDynamicProps(el, props) {
     const value2 = props[key];
     if (typeof value2 !== "function") continue;
     if (key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.length > 2) {
-      el.addEventListener(key.slice(2).toLowerCase(), value2);
+      let ac = el[ABORT_SYM2];
+      if (!ac) {
+        ac = new AbortController();
+        el[ABORT_SYM2] = ac;
+      }
+      el.addEventListener(key.slice(2).toLowerCase(), value2, { signal: ac.signal });
       continue;
     }
     const fn = value2;
@@ -1469,11 +1487,11 @@ function longestIncreasingSubsequence(arr) {
   return result;
 }
 var SMALL_LIST_THRESHOLD = 32;
-var ABORT_SYM2 = /* @__PURE__ */ Symbol.for("forma-abort");
+var ABORT_SYM3 = /* @__PURE__ */ Symbol.for("forma-abort");
 var CACHE_SYM2 = /* @__PURE__ */ Symbol.for("forma-attr-cache");
 var DYNAMIC_CHILD_SYM2 = /* @__PURE__ */ Symbol.for("forma-dynamic-child");
 function canPatchStaticElement(target, source) {
-  return target instanceof HTMLElement && source instanceof HTMLElement && target.tagName === source.tagName && !target[ABORT_SYM2] && !target[CACHE_SYM2] && !target[DYNAMIC_CHILD_SYM2] && !source[ABORT_SYM2] && !source[CACHE_SYM2] && !source[DYNAMIC_CHILD_SYM2];
+  return target instanceof HTMLElement && source instanceof HTMLElement && target.tagName === source.tagName && !target[ABORT_SYM3] && !target[CACHE_SYM2] && !target[DYNAMIC_CHILD_SYM2] && !source[ABORT_SYM3] && !source[CACHE_SYM2] && !source[DYNAMIC_CHILD_SYM2];
 }
 function patchStaticElement(target, source) {
   const sourceAttrNames = /* @__PURE__ */ new Set();
@@ -1757,7 +1775,7 @@ function createList(items, keyFn, renderFn, options) {
       if (cached.item === item) return;
       cached.item = item;
       if (!(node instanceof HTMLElement)) return;
-      if (node[ABORT_SYM2] || node[CACHE_SYM2] || node[DYNAMIC_CHILD_SYM2]) {
+      if (node[ABORT_SYM3] || node[CACHE_SYM2] || node[DYNAMIC_CHILD_SYM2]) {
         return;
       }
       const next = untrack(() => renderFn(item, cached.getIndex));
@@ -1804,6 +1822,6 @@ function createList(items, keyFn, renderFn, options) {
   return fragment2;
 }
 
-export { Fragment, __DEV__, batch, cleanup, createEffect, createList, createMemo, createReducer, createRef, createResource, createRoot, createShow, fragment, h, hydrateIsland, internalEffect, longestIncreasingSubsequence, on, onCleanup, onError, popSuspenseContext, pushSuspenseContext, reconcileList, untrack };
-//# sourceMappingURL=chunk-5H52PKGF.js.map
-//# sourceMappingURL=chunk-5H52PKGF.js.map
+export { Fragment, __DEV__, batch, cleanup, createEffect, createList, createMemo, createReducer, createRef, createResource, createRoot, createShow, fragment, h, hydrateIsland, internalEffect, on, onCleanup, onError, popSuspenseContext, pushSuspenseContext, reconcileList, reportError, untrack };
+//# sourceMappingURL=chunk-N522P3G6.js.map
+//# sourceMappingURL=chunk-N522P3G6.js.map