elements-kit 0.0.2 → 0.0.3

package/README.md

@@ -1,217 +1,277 @@
 # ElementsKit
 
-A lightweight reactive UI library built on JSX and native DOM APIs. No virtual DOM, no diffing — fine-grained reactivity that updates only what changes.
+**Universal reactive primitives for the web.** Signals, JSX, and custom elements that work anywhere — standalone, inside React, Vue, or any framework, or as the foundation of your own component model.
 
 ```tsx
-import { signal, computed } from "elements-kit/signals";
+import { signal, computed, reactive } from "elements-kit/signals";
+import { attributes, ATTRIBUTES as attr } from "elements-kit/attributes";
 
-class Counter {
-  #count = signal(0);
+@attributes
+class CounterElement extends HTMLElement {
+  static [attr] = {
+    count(this: CounterElement, value: string | null) {
+      this.count = Number(value ?? 0);
+    },
+  };
 
-  render() {
-    return (
+  @reactive() count = 0;
+  doubled = computed(() => this.count * 2);
+
+  connectedCallback() {
+    this.appendChild(
       <section>
-        <p>Count: <strong>{this.#count}</strong></p>
-        <button onClick={() => this.#count(this.#count() + 1)}>+1</button>
-      </section>
-    ) as Element;
+        <p>Count: <strong>{() => this.count}</strong> — Doubled: <strong>{this.doubled}</strong></p>
+        <button onClick={() => this.count++}>+1</button>{" "}
+        <button onClick={() => this.count--}>−1</button>
+      </section> as Element,
+    );
   }
 }
 
-document.getElementById("app")!.appendChild(new Counter().render());
+customElements.define("x-counter", CounterElement);
 ```
 
-## Principles
+---
+
+## Why ElementsKit
+
+Modern UI frameworks solve reactivity and rendering together — you adopt the whole system or none of it. ElementsKit separates the two:
+
+- **Signals** are the reactive core — fine-grained, framework-agnostic, composable with any rendering model.
+- **JSX** compiles to real `document.createElement` calls — no virtual DOM, no runtime overhead.
+- **Custom elements** are standard browser components — ElementsKit enhances them with signals and JSX without wrapping or abstracting the platform.
 
-- **Direct DOM Manipulation** — Works with native HTMLElements, no virtual DOM or diffing overhead
-- **Fine-Grained Reactivity** — Only the exact DOM nodes that depend on a changed signal update
-- **JSX Without a Framework** — Standard JSX syntax compiled to real DOM nodes, no plugin required
-- **Decorator-Driven** — `@reactive()` turns any class field into a signal transparently
-- **Web Component Ready** — First-class support for custom elements and `attributeChangedCallback`
-- **Type-Safe** — Full TypeScript support with comprehensive type inference
+Use one piece, or all three. Integrate with React for complex UIs. Build web components that work anywhere HTML does.
+
+---
+
+## Installation
+
+```sh
+npm install elements-kit
+```
+
+Configure JSX in your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "elements-kit"
+  }
+}
+```
 
 ---
 
 ## Signals
 
+Fine-grained reactive state. Signals track their dependencies automatically — only the exact computeds and effects that depend on a changed signal are re-evaluated.
+
 ```ts
-import { signal, computed, effect, batch, untracked } from "elements-kit/signals";
+import { signal, computed, effect, batch, untracked, onCleanup } from "elements-kit/signals";
 
-const count = signal(0);          // writable signal
-const doubled = computed(() => count() * 2); // derived, read-only
+const count = signal(0);
+const doubled = computed(() => count() * 2);
 
-effect(() => console.log(count())); // runs whenever count changes
+const stop = effect(() => {
+  console.log("count:", count()); // runs on every change
+});
 
-count(count() + 1);               // write by calling with a value
-console.log(count());             // read by calling with no arguments
+count(1);  // → count: 1
+count(2);  // → count: 2
+stop();    // unsubscribe
 
-batch(() => {                     // defer updates until the batch ends
-  count(10);
-  count(20);
-});
+batch(() => { count(10); count(20); }); // single notification
 
 const raw = untracked(() => count()); // read without subscribing
-```
 
-Signals are the reactive primitive. Passing a signal directly as a JSX child or prop creates a live binding — no wrapper needed:
+effect(() => {
+  const id = setInterval(() => count(count() + 1), 1000);
+  onCleanup(() => clearInterval(id)); // runs before re-run or on stop
+});
+```
 
-```tsx
-const name = signal("world");
+### Store
 
-// Both are equivalent live bindings:
-<p>{name}</p>
-<p>{() => name()}</p>
-```
+A **store** is a class whose fields are made reactive with `@reactive`. It holds shared state — no `render()`, no DOM — and any subscriber updates automatically.
 
----
+```ts
+import { reactive, computed } from "elements-kit/signals";
 
-## JSX
+export class CartStore {
+  @reactive() items: { name: string; price: number }[] = [];
+  @reactive() discount = 0;
 
-Configure your `tsconfig.json` to use the built-in JSX runtime:
+  total = computed(() =>
+    this.items.reduce((s, i) => s + i.price, 0) * (1 - this.discount),
+  );
 
-```json
-{
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "jsxImportSource": "elements-kit"
+  add(item: { name: string; price: number }) {
+    this.items = [...this.items, item];
   }
 }
+
+export const cart = new CartStore();
 ```
 
-### Props
+Stores are **framework-agnostic** — the same instance drives a custom element, a React component, and a plain effect in sync.
 
-| Syntax | Effect |
-| --- | --- |
-| `value={signal}` | Live-bound — updates DOM when signal changes |
-| `value={42}` | Set once at render time |
-| `onClick={fn}` | Camel-case event listener (`onclick`) |
-| `on:click={fn}` | Explicit event namespace |
-| `style:color={signal}` | Reactive inline style property |
-| `class:active={signal}` | Reactive `classList.toggle` |
-| `prop:foo={val}` | Force property assignment (bypasses `setAttribute`) |
+---
 
-```tsx
-const active = signal(false);
-const label = signal("Submit");
-
-<button
-  class:active={active}
-  style:opacity={computed(() => active() ? "1" : "0.5")}
-  onClick={() => (active(!active()))}
->
-  {label}
-</button>
-```
+## JSX → DOM
 
-### Children
+JSX compiles directly to `document.createElement`. No virtual DOM, no diffing.
 
-Any of the following are valid children:
+```tsx
+// This:
+const el = <button onClick={() => count(count() + 1)}>{count}</button>;
+
+// Is equivalent to:
+const el = document.createElement("button");
+el.addEventListener("click", () => count(count() + 1));
+// `count` signal creates a live text node — updates in place on change
+```
 
-- Primitive values (`string`, `number`, …)
-- `Node` / `Element`
-- A signal or `computed` — re-renders in place when it changes
-- A plain function `() => value` — re-evaluated reactively
-- Arrays of the above
+Passing a signal or `() => T` as a child or prop creates a **live binding** — the DOM updates in place, never re-rendering the surrounding tree.
 
 ```tsx
-const show = signal(true);
-
-<div>
-  <strong>Static text</strong>
-  {count}                          // signal — live
-  {() => count() * 2}             // thunk — live
-  {() => show() && <span>Conditional</span>}
-</div>
+const name = signal("Alice");
+
+<p>Hello, {name}!</p>             // live text node
+<input value={name} />             // live attribute
+<div class:active={computed(() => name() !== "")} />  // reactive class
+<span style:color={signal("red")} />  // reactive style
 ```
 
----
+### Prop namespaces
 
-## `@reactive()` Decorator
+| Syntax | Effect |
+|--------|--------|
+| `{signal}` / `{() => fn()}` | Live-bound reactive child |
+| `onClick={fn}` | Event listener (camelCase → `onclick`) |
+| `on:click={fn}` | Explicit event namespace |
+| `class:active={bool}` | Reactive `classList.toggle` |
+| `style:color={value}` | Reactive inline style property |
+| `prop:foo={val}` | Force property assignment (skips `setAttribute`) |
 
-Makes any class field behave like a signal — reads subscribe, writes trigger updates.
+---
 
-```ts
-import { computed, reactive } from "elements-kit/signals";
+## Class Components
 
-class Todo {
-  text: string;
-  @reactive() done: boolean;
-}
+Any class with a `render()` method returning an `Element` is a component. Components own their state and produce elements.
 
-class TodoApp {
-  @reactive()
-  todos: Todo[] = [];
+```tsx
+import { reactive, computed } from "elements-kit/signals";
 
-  @reactive()
-  showDone = true;
+class Counter {
+  @reactive() count = 0;
+  doubled = computed(() => this.count * 2);
 
-  // Bind to an existing computed
-  @reactive((self) => computed(() => self.todos.filter(t => !t.done)))
-  readonly pending: Todo[] = [];
+  render() {
+    return (
+      <section>
+        <p>{() => this.count} × 2 = {this.doubled}</p>
+        <button onClick={() => this.count++}>+1</button>
+      </section>
+    ) as Element;
+  }
 }
-```
 
-`@reactive()` without arguments auto-wraps the field's initial value in a `signal`. Pass a factory `(self) => signal | computed` to bind the field to an existing reactive value.
+document.getElementById("app")!.appendChild(new Counter().render());
+```
 
 ---
 
-## `@attributes` Decorator
+## Custom Elements
 
-Automatically wires `observedAttributes` and `attributeChangedCallback` for custom elements from a static `[ATTRIBUTES]` map.
+ElementsKit enhances native `HTMLElement` subclasses — start with the platform, add only what you need.
 
 ```ts
+import { reactive, computed } from "elements-kit/signals";
 import { attributes, ATTRIBUTES as attr } from "elements-kit/attributes";
-import { signal, reactive } from "elements-kit/signals";
 
 @attributes
-class Counter extends HTMLElement {
+class CounterElement extends HTMLElement {
   static [attr] = {
-    count(this: Counter, value: string | null) {
-      this.count = Number(value);  // calls the @reactive setter
+    count(this: CounterElement, value: string | null) {
+      this.count = Number(value ?? 0);
     },
   };
 
-  #count = signal(0);
-
-  @reactive((s) => s.#count)
-  count: number = 0;
+  @reactive() count = 0;
+  doubled = computed(() => this.count * 2);
 
   connectedCallback() {
-    const Host = this;
-    <Host>
-      <p>Count: <strong>{this.#count}</strong></p>
-      <button onClick={() => this.count++}>+1</button>
-    </Host>;
+    this.appendChild(
+      <section>
+        <p>{() => this.count} × 2 = {this.doubled}</p>
+        <button onClick={() => this.count++}>+1</button>
+      </section> as Element,
+    );
   }
 }
 
-customElements.define("x-counter", Counter);
+customElements.define("x-counter", CounterElement);
+```
+
+`<x-counter count="5" />` — attribute bound, reactive, works in any HTML context.
+
+---
+
+## React Integration
+
+Connect signals and stores to React components via `useSyncExternalStore`:
+
+```tsx
+import { useSignal, useScope } from "elements-kit/signals/react";
+import { cart } from "./cart-store";
+
+function CartSummary() {
+  // Reads a @reactive field — re-renders only when cart.items changes
+  const items = useSignal(() => cart.items);
+  const total = useSignal(cart.total); // Computed<T> works directly
+
+  // Effects tied to this component's lifetime
+  useScope(() => {
+    effect(() => console.log("cart updated:", items));
+  });
+
+  return <p>{items.length} items — ${total.toFixed(2)}</p>;
+}
 ```
 
-Use `<x-counter count={signal(9)} />` to pass a reactive attribute from JSX.
+The same `cart` store drives custom elements, React trees, and plain scripts — all in sync.
+
+---
+
+## Signal Helpers
+
+Pre-built signal factories for common browser APIs:
+
+```ts
+import { createMediaSignal } from "elements-kit/signals/media";
+
+const isDark = createMediaSignal("(prefers-color-scheme: dark)");
+const isMobile = createMediaSignal("(max-width: 640px)");
+
+effect(() => document.documentElement.classList.toggle("dark", isDark()));
+```
 
 ---
 
 ## `For` — Keyed List Rendering
 
-Efficiently reconciles a reactive array into the DOM. Each item is rendered once per unique key — no full re-renders on reorder, add, or remove.
+Reconciles a reactive array into the DOM. Each item renders once per key — no full re-renders on reorder, add, or remove.
 
 ```tsx
 import { For } from "elements-kit";
 
-const todos = computed(() => state.todos.filter(t => !t.done));
-
 <ul>
   <For each={todos} by={(todo) => todo.id}>
     {(todo) => (
-      <li
-        style:text-decoration={computed(() => todo.done ? "line-through" : "none")}
-      >
-        <input
-          type="checkbox"
-          checked={computed(() => todo.done)}
-          on:change={() => (todo.done = !todo.done)}
-        />{" "}
+      <li>
+        <input type="checkbox" checked={computed(() => todo.done)} on:change={() => (todo.done = !todo.done)} />
         {todo.text}
       </li>
     )}
@@ -219,40 +279,54 @@ const todos = computed(() => state.todos.filter(t => !t.done));
 </ul>
 ```
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| `each` | `T[] \| (() => T[])` | Reactive array to render |
-| `by` | `(item: T, index: number) => string \| number` | Key function — defaults to index |
-| `children` | `(item: T, index: number) => Element` | Render function, called once per new key |
-
 ---
 
-## Class Components
+## `@reactive()` Decorator
 
-Any class with a `render()` method returning an `Element` or `DocumentFragment` works as a component. JSX instantiates it automatically:
+Makes any class field reactive — reads subscribe, writes trigger updates.
 
-```tsx
-class App {
-  render() {
-    return (
-      <div style="max-width: 480px; margin: 40px auto">
-        <h1>My App</h1>
-        <x-counter count={signal(0)} />
-        <TodoApp />
-      </div>
-    ) as Element;
-  }
+```ts
+import { reactive, computed } from "elements-kit/signals";
+
+class TodoApp {
+  @reactive() todos: Todo[] = [];
+  @reactive() showDone = true;
+
+  visible = computed(() =>
+    this.showDone ? this.todos : this.todos.filter((t) => !t.done),
+  );
 }
+```
+
+---
+
+## `@attributes` Decorator
+
+Wires `observedAttributes` and `attributeChangedCallback` from a static map:
+
+```ts
+import { attributes, ATTRIBUTES as attr } from "elements-kit/attributes";
+
+@attributes
+class MyElement extends HTMLElement {
+  static [attr] = {
+    value(this: MyElement, v: string | null) {
+      this.value = v ?? "";
+    },
+  };
 
-document.getElementById("app")!.appendChild(new App().render());
+  @reactive() value = "";
+}
 ```
 
 ---
 
-## TO-DO
+## Roadmap
 
-- [ ] Complete type safety
-- [ ] Async signal
-- [ ] URLPattern signal
-- [ ] Context
-- [ ] `Key` component (conditional key-gated subtrees)
+- [ ] More signal helpers (`localStorage`, `IntersectionObserver`, `ResizeObserver`, …)
+- [ ] Context — share state across a subtree without prop drilling
+- [ ] Async signal — `signal.from(promise)`, `signal.from(observable)`
+- [ ] UI library — pre-built reactive components built on ElementsKit primitives
+- [ ] More framework integrations (Vue, Solid, Angular, …)
+- [ ] Tutorial — building a full app from scratch
+- [ ] Complete TypeScript strict-mode coverage

package/dist/attributes.mjs

@@ -77,6 +77,5 @@ function attributes(target, context) {
 	};
 	return target;
 }
-
 //#endregion
-export { ATTRIBUTES, attributes, dispatchAttrChange, observedAttributes };
+export { ATTRIBUTES, attributes, dispatchAttrChange, observedAttributes };

package/dist/builder/dom.d.mts

@@ -1,5 +1,4 @@
-import "../polyfill-Bvo2e52W.mjs";
-import { ReactiveElementOf } from "./index.mjs";
+import { c as ReactiveElementOf } from "../index-DJejH8Ff.mjs";
 
 //#region src/builder/dom.d.ts
 interface Lifecycle {

package/dist/builder/dom.mjs

@@ -1,6 +1,4 @@
-import "../polyfill-DAalJpCO.mjs";
 import { builder } from "./index.mjs";
-
 //#region src/builder/dom.ts
 const a = () => builder(document.createElement("a"));
 const abbr = () => builder(document.createElement("abbr"));
@@ -203,6 +201,5 @@ const mtr = () => builder(document.createElement("mtr"));
 const munder = () => builder(document.createElement("munder"));
 const munderover = () => builder(document.createElement("munderover"));
 const semantics = () => builder(document.createElement("semantics"));
-
 //#endregion
-export { a, abbr, address, animate, animateMotion, animateTransform, annotation, annotationXml, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, data, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, label, legend, li, line, linearGradient, link, maction, main, map, mark, marker, mask, math, mathVar, menu, merror, meta, metadata, meter, mfrac, mi, mmultiscripts, mn, mo, mover, mpadded, mpath, mphantom, mprescripts, mroot, mrow, ms, mspace, msqrt, mstyle, msub, msubsup, msup, mtable, mtd, mtext, mtr, munder, munderover, nav, noscript, object, ol, optgroup, option, output, p, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, search, section, select, semantics, set, slot, small, source, span, stop, strong, style, sub, summary, sup, svg, svgSwitch, symbol, table, tbody, td, template, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, video, view, wbr };
+export { a, abbr, address, animate, animateMotion, animateTransform, annotation, annotationXml, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, circle, cite, clipPath, code, col, colgroup, data, datalist, dd, defs, del, desc, details, dfn, dialog, div, dl, dt, ellipse, em, embed, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feDropShadow, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feImage, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence, fieldset, figcaption, figure, filter, footer, foreignObject, form, g, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, image, img, input, ins, kbd, label, legend, li, line, linearGradient, link, maction, main, map, mark, marker, mask, math, mathVar, menu, merror, meta, metadata, meter, mfrac, mi, mmultiscripts, mn, mo, mover, mpadded, mpath, mphantom, mprescripts, mroot, mrow, ms, mspace, msqrt, mstyle, msub, msubsup, msup, mtable, mtd, mtext, mtr, munder, munderover, nav, noscript, object, ol, optgroup, option, output, p, path, pattern, picture, polygon, polyline, pre, progress, q, radialGradient, rect, rp, rt, ruby, s, samp, script, search, section, select, semantics, set, slot, small, source, span, stop, strong, style, sub, summary, sup, svg, svgSwitch, symbol, table, tbody, td, template, text, textPath, textarea, tfoot, th, thead, time, title, tr, track, tspan, u, ul, use, video, view, wbr };

package/dist/builder/index.d.mts

@@ -1,89 +1,2 @@
-import { t as PrimitiveNodeType } from "../polyfill-Bvo2e52W.mjs";
-
-//#region src/builder/index.d.ts
-declare const DISPOSABLES: unique symbol;
-declare const DISPOSE: symbol;
-declare const VALUE: unique symbol;
-declare const EFFECT: unique symbol;
-declare class ElementBuilder<T extends Element = Element> {
-  /** Dispose the reactive element and run all cleanup functions */
-  [DISPOSE]: () => void;
-  /** The underlying DOM element */
-  private [VALUE];
-  /** A set of cleanup functions to run when disposing the element */
-  private [DISPOSABLES];
-  [EFFECT](fn: () => void): this;
-  private constructor();
-  static create<T extends Element>(el: T): ReactiveElement<T>;
-  children(...children: ValueOrReactive<ElementBuilder | Node | string | number>[]): T;
-  ref(): T;
-  ref(apply: (ref: T) => void | (() => void)): this;
-  on<K extends keyof HTMLElementEventMap>(eventType: K, listener: (ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): this;
-}
-declare function toNode(c: ElementBuilder | PrimitiveNodeType): Node;
-declare function builder<T extends Element>(el: T): ReactiveElementOf<T>;
-/**
- * Callable overloads matching the Proxy apply trap → ref() behavior.
- * Calling a reactive element as a function delegates to ref():
- *   el()            → returns the raw DOM element
- *   el((ref) => {}) → applies a side-effect, returns the builder for chaining
- */
-interface RefCallable<T extends Element> {
-  (): T;
-  (apply: (ref: T) => void | (() => void)): this;
-}
-type ReactiveElement<T extends Element> = ElementBuilder<T> & RefCallable<T>;
-type ValueOrReactive<T> = (() => T) | T;
-type ValueOrReactiveArray<T extends any[]> = { [K in keyof T]: ValueOrReactive<T[K]> | T[K] };
-/**
- * Filter keys that are writable (exclude readonly and getter-only).
- */
-type WritableKeys<T> = { [K in keyof T]: (<U>() => U extends { [Q in K]: T[K] } ? 1 : 2) extends (<U>() => U extends { readonly [Q in K]: T[K] } ? 1 : 2) ? never : K }[keyof T];
-/**
- * Extracts the object chaining part of ReactiveBuilder.
- * Used for properties like `style` where you can do both:
- *   .style("padding: 20px;")     // setter
- *   .style.padding("20px")       // sub-property chaining
- */
-type Chain<R, T> = T extends object ? { [K in WritableKeys<T>]: Builder<R, T[K]> } : {};
-type Builder<R, T = R> = T extends ((...args: infer U) => unknown) ? (...value: ValueOrReactiveArray<U>) => R : (value?: ValueOrReactive<T>) => R;
-/**
- * Types eligible for sub-property chaining (e.g., `.style.padding("20px")`).
- */
-type ChainableType = CSSStyleDeclaration | DOMTokenList | DOMStringMap | StylePropertyMap;
-/**
- * Filters keys to only writable data properties.
- * Excludes methods (function-valued properties) and event handlers (`on*`).
- */
-type DataPropertyKeys<T> = { [K in keyof T]: K extends `on${string}` ? never : T[K] extends ((...args: any[]) => any) ? never : K }[keyof T];
-/**
- * Reactive setter for a single property.
- * Chainable types (CSSStyleDeclaration, DOMTokenList, etc.) get both
- * sub-property chaining and direct setter support.
- */
-type ReactiveSetter<R, T> = T extends ChainableType ? Chain<R, T> & ((value: ValueOrReactive<T>) => R) : (value: ValueOrReactive<T>) => R;
-/**
- * A fully-typed reactive element builder for any Element type.
- * Automatically maps all writable data properties into reactive setters.
- *
- * Use this for custom elements instead of needing generated builder interfaces.
- *
- * @example
- * ```ts
- * import { reactive, type ReactiveElementOf } from "elements-kit";
- *
- * class MyElement extends HTMLElement {
- *   greeting = "hello";
- * }
- * customElements.define("my-element", MyElement);
- *
- * const myEl = () =>
- *   reactive(document.createElement("my-element") as MyElement);
- *
- * // Full type support for both own and inherited properties:
- * myEl().greeting("world").style.padding("20px").id("main");
- * ```
- */
-type ReactiveElementOf<T extends Element> = ElementBuilder<T> & { [K in WritableKeys<T> & DataPropertyKeys<T> & keyof T]: ReactiveSetter<ReactiveElementOf<T>, T[K]> };
-//#endregion
+import { a as EFFECT, c as ReactiveElementOf, d as builder, f as toNode, i as DISPOSE, l as VALUE, n as Chain, o as ElementBuilder, r as DISPOSABLES, s as ReactiveElement, t as Builder, u as ValueOrReactive } from "../index-DJejH8Ff.mjs";
 export { Builder, Chain, DISPOSABLES, DISPOSE, EFFECT, ElementBuilder, ReactiveElement, ReactiveElementOf, VALUE, ValueOrReactive, builder, toNode };

package/dist/builder/index.mjs

@@ -1,7 +1,6 @@
-import { effect, isReactive } from "../signals.mjs";
+import { a as effect, t as isReactive } from "../signals-Cr7xgAJH.mjs";
 import { Slot } from "../slot.mjs";
-import { t as resolveNode } from "../polyfill-DAalJpCO.mjs";
-
+import { t as resolveNode } from "../lib-B2drrxlV.mjs";
 //#region src/builder/index.ts
 const DISPOSABLES = Symbol("disposables");
 const DISPOSE = Symbol.dispose;
@@ -110,6 +109,5 @@ function isObject(v) {
 function builder(el) {
 	return ElementBuilder.create(el);
 }
-
 //#endregion
-export { DISPOSABLES, DISPOSE, EFFECT, ElementBuilder, VALUE, builder, toNode };
+export { DISPOSABLES, DISPOSE, EFFECT, ElementBuilder, VALUE, builder, toNode };