@manyducks.co/dolla 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/jsx-dev-runtime.d.ts

@@ -1,2 +1,2 @@
 export function jsxDEV(element: any, props: any, key: any, isStaticChildren: any, source: any, self: any): import("./markup.ts").Markup;
-export { Fragment } from "./views/fragment.ts";
+export { Passthrough as Fragment } from "./views/passthrough.ts";

package/dist/jsx-dev-runtime.js

@@ -1,5 +1,5 @@
-import { j as s } from "./fragment-DHJiX0-a.js";
-import { F as m } from "./fragment-DHJiX0-a.js";
+import { q as s } from "./passthrough-Bu7iYKPr.js";
+import { P as m } from "./passthrough-Bu7iYKPr.js";
 function d(n, r, t, e, a, l) {
   const i = { ...o(["children", "key"], r) }, c = Array.isArray(r.children) ? r.children : [r.children];
   return s(n, i, ...c);

package/dist/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.js","sources":["../src/jsx-dev-runtime.js"],"sourcesContent":["import { createMarkup } from \"./markup.ts\";\nexport { Fragment } from \"./views/fragment.ts\";\n\nexport function jsxDEV(element, props, key, isStaticChildren, source, self) {\n  const attributes = { ...omit([\"children\", \"key\"], props) };\n  const children = Array.isArray(props.children) ? props.children : [props.children];\n\n  return createMarkup(element, attributes, ...children);\n}\n\nfunction omit(keys, object) {\n  const result = {};\n  for (const key in object) {\n    if (!keys.includes(key)) {\n      result[key] = object[key];\n    }\n  }\n  return result;\n}\n"],"names":["jsxDEV","element","props","key","isStaticChildren","source","self","attributes","omit","children","createMarkup","keys","object","result"],"mappings":";;AAGO,SAASA,EAAOC,GAASC,GAAOC,GAAKC,GAAkBC,GAAQC,GAAM;AAC1E,QAAMC,IAAa,EAAE,GAAGC,EAAK,CAAC,YAAY,KAAK,GAAGN,CAAK,EAAG,GACpDO,IAAW,MAAM,QAAQP,EAAM,QAAQ,IAAIA,EAAM,WAAW,CAACA,EAAM,QAAQ;AAEjF,SAAOQ,EAAaT,GAASM,GAAY,GAAGE,CAAQ;AACtD;AAEA,SAASD,EAAKG,GAAMC,GAAQ;AAC1B,QAAMC,IAAS,CAAE;AACjB,aAAWV,KAAOS;AAChB,IAAKD,EAAK,SAASR,CAAG,MACpBU,EAAOV,CAAG,IAAIS,EAAOT,CAAG;AAG5B,SAAOU;AACT;"}
+{"version":3,"file":"jsx-dev-runtime.js","sources":["../src/jsx-dev-runtime.js"],"sourcesContent":["import { createMarkup } from \"./markup.ts\";\nexport { Passthrough as Fragment } from \"./views/passthrough.ts\";\n\nexport function jsxDEV(element, props, key, isStaticChildren, source, self) {\n  const attributes = { ...omit([\"children\", \"key\"], props) };\n  const children = Array.isArray(props.children) ? props.children : [props.children];\n\n  return createMarkup(element, attributes, ...children);\n}\n\nfunction omit(keys, object) {\n  const result = {};\n  for (const key in object) {\n    if (!keys.includes(key)) {\n      result[key] = object[key];\n    }\n  }\n  return result;\n}\n"],"names":["jsxDEV","element","props","key","isStaticChildren","source","self","attributes","omit","children","createMarkup","keys","object","result"],"mappings":";;AAGO,SAASA,EAAOC,GAASC,GAAOC,GAAKC,GAAkBC,GAAQC,GAAM;AAC1E,QAAMC,IAAa,EAAE,GAAGC,EAAK,CAAC,YAAY,KAAK,GAAGN,CAAK,EAAG,GACpDO,IAAW,MAAM,QAAQP,EAAM,QAAQ,IAAIA,EAAM,WAAW,CAACA,EAAM,QAAQ;AAEjF,SAAOQ,EAAaT,GAASM,GAAY,GAAGE,CAAQ;AACtD;AAEA,SAASD,EAAKG,GAAMC,GAAQ;AAC1B,QAAMC,IAAS,CAAE;AACjB,aAAWV,KAAOS;AAChB,IAAKD,EAAK,SAASR,CAAG,MACpBU,EAAOV,CAAG,IAAIS,EAAOT,CAAG;AAG5B,SAAOU;AACT;"}

package/dist/jsx-runtime.d.ts

@@ -6,4 +6,4 @@ export function jsx(element: any, props: any, key: any): import("./markup.ts").M
  * JSX function for elements with static children.
  */
 export function jsxs(element: any, props: any, key: any): import("./markup.ts").Markup;
-export { Fragment } from "./views/fragment.ts";
+export { Passthrough as Fragment } from "./views/passthrough.ts";

package/dist/jsx-runtime.js

@@ -1,5 +1,5 @@
-import { j as t } from "./fragment-DHJiX0-a.js";
-import { F as l } from "./fragment-DHJiX0-a.js";
+import { q as t } from "./passthrough-Bu7iYKPr.js";
+import { P as l } from "./passthrough-Bu7iYKPr.js";
 function d(n, e, r) {
   return t(n, e ? { ...u(["children", "key"], e) } : void 0, e.children);
 }

package/dist/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sources":["../src/jsx-runtime.js"],"sourcesContent":["import { createMarkup } from \"./markup.ts\";\nexport { Fragment } from \"./views/fragment.ts\";\n\n/**\n * JSX function for elements with dynamic children.\n */\nexport function jsx(element, props, key) {\n  return createMarkup(element, props ? { ...omit([\"children\", \"key\"], props) } : undefined, ...[props.children]);\n}\n\n/**\n * JSX function for elements with static children.\n */\nexport function jsxs(element, props, key) {\n  return createMarkup(element, props ? { ...omit([\"children\", \"key\"], props) } : undefined, props.children);\n}\n\nfunction omit(keys, object) {\n  const result = {};\n  for (const key in object) {\n    if (!keys.includes(key)) {\n      result[key] = object[key];\n    }\n  }\n  return result;\n}\n"],"names":["jsx","element","props","key","createMarkup","omit","jsxs","keys","object","result"],"mappings":";;AAMO,SAASA,EAAIC,GAASC,GAAOC,GAAK;AACvC,SAAOC,EAAaH,GAASC,IAAQ,EAAE,GAAGG,EAAK,CAAC,YAAY,KAAK,GAAGH,CAAK,EAAC,IAAK,QAAeA,EAAM,QAAS;AAC/G;AAKO,SAASI,EAAKL,GAASC,GAAOC,GAAK;AACxC,SAAOC,EAAaH,GAASC,IAAQ,EAAE,GAAGG,EAAK,CAAC,YAAY,KAAK,GAAGH,CAAK,EAAC,IAAK,QAAWA,EAAM,QAAQ;AAC1G;AAEA,SAASG,EAAKE,GAAMC,GAAQ;AAC1B,QAAMC,IAAS,CAAE;AACjB,aAAWN,KAAOK;AAChB,IAAKD,EAAK,SAASJ,CAAG,MACpBM,EAAON,CAAG,IAAIK,EAAOL,CAAG;AAG5B,SAAOM;AACT;"}
+{"version":3,"file":"jsx-runtime.js","sources":["../src/jsx-runtime.js"],"sourcesContent":["import { createMarkup } from \"./markup.ts\";\nexport { Passthrough as Fragment } from \"./views/passthrough.ts\";\n\n/**\n * JSX function for elements with dynamic children.\n */\nexport function jsx(element, props, key) {\n  return createMarkup(element, props ? { ...omit([\"children\", \"key\"], props) } : undefined, ...[props.children]);\n}\n\n/**\n * JSX function for elements with static children.\n */\nexport function jsxs(element, props, key) {\n  return createMarkup(element, props ? { ...omit([\"children\", \"key\"], props) } : undefined, props.children);\n}\n\nfunction omit(keys, object) {\n  const result = {};\n  for (const key in object) {\n    if (!keys.includes(key)) {\n      result[key] = object[key];\n    }\n  }\n  return result;\n}\n"],"names":["jsx","element","props","key","createMarkup","omit","jsxs","keys","object","result"],"mappings":";;AAMO,SAASA,EAAIC,GAASC,GAAOC,GAAK;AACvC,SAAOC,EAAaH,GAASC,IAAQ,EAAE,GAAGG,EAAK,CAAC,YAAY,KAAK,GAAGH,CAAK,EAAC,IAAK,QAAeA,EAAM,QAAS;AAC/G;AAKO,SAASI,EAAKL,GAASC,GAAOC,GAAK;AACxC,SAAOC,EAAaH,GAASC,IAAQ,EAAE,GAAGG,EAAK,CAAC,YAAY,KAAK,GAAGH,CAAK,EAAC,IAAK,QAAWA,EAAM,QAAQ;AAC1G;AAEA,SAASG,EAAKE,GAAMC,GAAQ;AAC1B,QAAMC,IAAS,CAAE;AACjB,aAAWN,KAAOK;AAChB,IAAKD,EAAK,SAASJ,CAAG,MACpBM,EAAON,CAAG,IAAIK,EAAOL,CAAG;AAG5B,SAAOM;AACT;"}

package/dist/markup.d.ts

@@ -1,5 +1,5 @@
 import type { Dolla } from "./modules/dolla.js";
-import { MaybeSignal, type Signal } from "./signals.js";
+import { MaybeState, type State } from "./state.js";
 import type { Renderable, Stringable } from "./types.js";
 import { type ViewFunction, type ViewContext, type ViewResult } from "./view.js";
 export interface ElementContext {
@@ -7,13 +7,21 @@ export interface ElementContext {
      * The root Dolla instance this element belongs to.
      */
     root: Dolla;
+    /**
+     * Storage for context variables.
+     */
+    data: Record<string | symbol, unknown>;
+    /**
+     * A reference to the parent context.
+     */
+    parent?: ElementContext;
     /**
      * Whether to create DOM nodes in the SVG namespace. An `<svg>` element will set this to true and pass it down to children.
      */
     isSVG?: boolean;
 }
 /**
- * Markup is a set of element metadata that hasn't been rendered to a DOMHandle yet.
+ * Markup is a set of element metadata that hasn't been constructed into a MarkupNode yet.
  */
 export interface Markup {
     type: string | ViewFunction<any>;
@@ -21,38 +29,37 @@ export interface Markup {
     children?: Markup[];
 }
 /**
- * DOMHandle is the generic interface for an element that can be manipulated by the framework.
+ * A DOM node that has been constructed from a Markup object.
  */
-export interface DOMHandle {
+export interface MarkupNode {
     readonly node?: Node;
-    readonly connected: boolean;
-    connect(parent: Node, after?: Node): void;
-    disconnect(): void;
-    setChildren(children: DOMHandle[]): void;
+    readonly isMounted: boolean;
+    mount(parent: Node, after?: Node): void;
+    unmount(): void;
 }
 export declare function isMarkup(value: unknown): value is Markup;
-export declare function isDOMHandle(value: unknown): value is DOMHandle;
+export declare function isNode(value: unknown): value is MarkupNode;
 export declare function toMarkup(renderables: Renderable | Renderable[]): Markup[];
 export interface MarkupAttributes {
     $text: {
-        value: MaybeSignal<Stringable>;
+        value: MaybeState<Stringable>;
     };
     $cond: {
-        $predicate: Signal<any>;
+        $predicate: State<any>;
         thenContent?: Renderable;
         elseContent?: Renderable;
     };
     $repeat: {
-        $items: Signal<any[]>;
+        $items: State<any[]>;
         keyFn: (value: any, index: number) => string | number | symbol;
-        renderFn: ($item: Signal<any>, $index: Signal<number>, c: ViewContext) => ViewResult;
+        renderFn: ($item: State<any>, $index: State<number>, c: ViewContext) => ViewResult;
     };
     $observer: {
-        signals: Signal<any>[];
+        states: State<any>[];
         renderFn: (...items: any) => Renderable;
     };
     $outlet: {
-        $children: Signal<DOMHandle[]>;
+        $children: State<MarkupNode[]>;
     };
     $node: {
         value: Node;
@@ -65,30 +72,37 @@ export interface MarkupAttributes {
 }
 export declare function createMarkup<T extends keyof MarkupAttributes>(type: T, attributes: MarkupAttributes[T], ...children: Renderable[]): Markup;
 export declare function createMarkup<I>(type: ViewFunction<I>, attributes?: I, ...children: Renderable[]): Markup;
+/**
+ * Generate markup with HTML in a tagged template literal.
+ */
+export declare const html: (strings: TemplateStringsArray, ...values: any[]) => Markup | Markup[];
 /**
  * Displays content conditionally. When `predicate` holds a truthy value, `thenContent` is displayed; when `predicate` holds a falsy value, `elseContent` is displayed.
  */
-export declare function cond(predicate: MaybeSignal<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
+export declare function cond(predicate: MaybeState<any>, thenContent?: Renderable, elseContent?: Renderable): Markup;
 /**
  * Calls `renderFn` for each item in `items`. Dynamically adds and removes views as items change.
  * The result of `keyFn` is used to compare items and decide if item was added, removed or updated.
  */
-export declare function repeat<T>(items: MaybeSignal<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult): Markup;
+export declare function repeat<T>(items: MaybeState<T[]>, keyFn: (value: T, index: number) => string | number | symbol, renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult): Markup;
 /**
  * Render `content` into a `parent` node anywhere in the page, rather than at its position in the view.
  */
-export declare function portal(content: Renderable, parent: Node): Markup;
+export declare function portal(parent: Node, content: Renderable): Markup;
 /**
- * A special kind of signal exclusively for storing references to DOM nodes.
+ * A special kind of State exclusively for storing references to DOM nodes.
  */
 export declare function createRef<T extends Node>(): Ref<T>;
 export declare function isRef<T extends Node>(value: any): value is Ref<T>;
-export interface Ref<T extends Node> extends Signal<T | undefined> {
+export interface Ref<T extends Node> extends State<T | undefined> {
     node: T | undefined;
 }
-export declare function renderMarkupToDOM(markup: Markup | Markup[], elementContext: ElementContext): DOMHandle[];
 /**
- * Combines one or more DOMHandles into a single DOMHandle.
+ * Construct Markup metadata into a set of MarkupNodes.
+ */
+export declare function constructMarkup(elementContext: ElementContext, markup: Markup | Markup[]): MarkupNode[];
+/**
+ * Combines one or more MarkupNodes into a single MarkupNode.
  */
-export declare function getRenderHandle(handles: DOMHandle[]): DOMHandle;
+export declare function mergeNodes(nodes: MarkupNode[]): MarkupNode;
 export declare function isRenderable(value: unknown): value is Renderable;

package/dist/modules/dolla.d.ts

@@ -1,8 +1,9 @@
-import { createRef, isRef, type DOMHandle, type Markup } from "../markup.js";
-import { createSettableSignal, createSignal, derive, designalify, signalify, toSettableSignal, watch, type Signal } from "../signals.js";
-import { type ViewFunction } from "../view.js";
+import { createRef, isRef, MarkupNode, type Markup } from "../markup.js";
+import { createSettableState, createState, derive, toSettableState, toState, valueOf, watch, type State } from "../state.js";
+import { type ViewFunction, type ViewNode } from "../view.js";
+import { type CrashViewProps } from "../views/default-crash-view.js";
 import { HTTP } from "./http.js";
-import { Language } from "./language.js";
+import { I18n } from "./i18n.js";
 import { Render } from "./render.js";
 import { Router } from "./router.js";
 export type Environment = "development" | "production";
@@ -39,23 +40,39 @@ export type LoggerOptions = {
 };
 export declare class Dolla {
     #private;
-    http: HTTP;
-    language: Language;
-    render: Render;
-    router: Router;
+    readonly http: HTTP;
+    readonly i18n: I18n;
+    readonly render: Render;
+    readonly router: Router;
     constructor();
-    createSignal: typeof createSignal;
-    createSettableSignal: typeof createSettableSignal;
-    toSettableSignal: typeof toSettableSignal;
-    signalify: typeof signalify;
-    designalify: typeof designalify;
+    createState: typeof createState;
+    createSettableState: typeof createSettableState;
+    toSettableState: typeof toSettableState;
+    toState: typeof toState;
+    valueOf: typeof valueOf;
     derive: typeof derive;
     watch: typeof watch;
     createRef: typeof createRef;
     isRef: typeof isRef;
+    /**
+     * True when the app is connected to a DOM node and displayed to the user.
+     */
     get isMounted(): boolean;
-    get env(): Environment;
-    set env(value: Environment);
+    /**
+     * Get the current environment that this app is running in.
+     * Environment affects which log messages will print and how much debugging info is included in the DOM.
+     */
+    getEnv(): Environment;
+    /**
+     * Sets the environment that this app is running in.
+     * Environment affects which log messages will print and how much debugging info is included in the DOM.
+     */
+    setEnv(value: Environment): void;
+    /**
+     * Sets the view that will be shown when the `crash` method is called on any logger.
+     * When a crash is reported the app will be unmounted and replaced with this crash page.
+     */
+    setCrashView(view: ViewFunction<CrashViewProps>): void;
     mount(selector: string, view?: ViewFunction<any>): Promise<void>;
     mount(element: HTMLElement, view?: ViewFunction<any>): Promise<void>;
     unmount(): Promise<void>;
@@ -82,6 +99,13 @@ export declare class Dolla {
      */
     setLoggles(options: Partial<Loggles>): void;
     setLogFilter(filter: string | RegExp): void;
-    createLogger(name: string | Signal<string>, options?: LoggerOptions): Logger;
-    constructView<P>(view: ViewFunction<P>, props: P, children?: Markup[]): DOMHandle;
+    createLogger(name: string | State<string>, options?: LoggerOptions): Logger;
+    /**
+     *
+     */
+    constructView<P>(view: ViewFunction<P>, props: P, children?: Markup[]): ViewNode;
+    /**
+     *
+     */
+    constructMarkup(markup: Markup | Markup[]): MarkupNode;
 }

package/dist/modules/i18n.d.ts

@@ -0,0 +1,93 @@
+import { MaybeState, type State } from "../state.js";
+import type { Dolla } from "./dolla.js";
+/**
+ * An object where values are either a translated string or another nested Translation object.
+ */
+type LocalizedStrings = Record<string, string | Record<string, string | Record<string, string | Record<string, string>>>>;
+export interface TranslationConfig {
+    /**
+     * Name of the locale this translation is for (BCP 47 locale names recommended).
+     */
+    locale: string;
+    /**
+     * Path to a JSON file with translated strings for this language.
+     */
+    path?: string;
+    /**
+     * A callback function that returns a Promise that resolves to the translation object for this language.
+     */
+    fetch?: () => Promise<LocalizedStrings>;
+}
+export type I18nSetupOptions = {
+    /**
+     * Default locale to load on startup
+     */
+    locale?: string | null;
+    translations: TranslationConfig[];
+};
+export type TOptions = {
+    /**
+     *
+     */
+    count?: MaybeState<number>;
+    /**
+     *
+     */
+    context?: MaybeState<string>;
+    [value: string]: MaybeState<any>;
+};
+/**
+ * Dolla's I(nternationalizatio)n module. Manages language translations and locale-based formatting.
+ */
+export declare class I18n {
+    #private;
+    $locale: State<string | undefined>;
+    constructor(dolla: Dolla);
+    get locales(): string[];
+    setup(options: I18nSetupOptions): void;
+    setLocale(name: string): Promise<void>;
+    /**
+     * Returns a State containing the value at `key`.
+    
+     * @param key - Key to the translated value.
+     * @param options - A map of {{placeholder}} names and the values to replace them with.
+     *
+     * @example
+     * const $value = t("your.key.here");
+     */
+    t(key: string, options?: TOptions): State<string>;
+    /**
+     * Creates an `Intl.Collator` configured for the current locale.
+     * NOTE: The Collator remains bound to the locale it was created with, even when the app's locale changes.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#options
+     */
+    collator(options?: Intl.CollatorOptions): Intl.Collator;
+    /**
+     * Returns a State containing the number formatted for the current locale. Uses `Intl.NumberFormat` under the hood.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#options
+     */
+    number(count: MaybeState<number | bigint>, options?: Intl.NumberFormatOptions): State<string>;
+    /**
+     * Returns a State containing the date formatted for the current locale. Uses `Intl.DateTimeFormat` under the hood.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options
+     *
+     * @example
+     * const date = new Date();
+     * const $formatted = Dolla.i18n.dateTime(date, { dateFormat: "short" });
+     */
+    dateTime(date?: MaybeState<string | number | Date | undefined>, options?: Intl.DateTimeFormatOptions): State<string>;
+    /**
+     * Returns a State containing the date formatted for the current locale. Uses `Intl.DateTimeFormat` under the hood.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options
+     *
+     * @example
+     * const list = new Date();
+     * const $formatted = Dolla.i18n.list(list, {  });
+     */
+    list(list: MaybeState<Iterable<string>>, options?: Intl.ListFormatOptions): State<string>;
+}
+export {};

package/dist/modules/router.d.ts

@@ -1,6 +1,5 @@
-import { type DOMHandle, type Markup } from "../markup.js";
 import { type Stringable } from "../types.js";
-import { type ViewFunction } from "../view.js";
+import { ViewNode, type ViewFunction } from "../view.js";
 import type { Dolla } from "./dolla.js";
 export interface RouteMatchContext {
     /**
@@ -41,7 +40,7 @@ export interface RouteConfig {
 }
 export interface RouteLayer {
     id: number;
-    markup: Markup;
+    view: ViewFunction<{}>;
 }
 /**
  * Object passed to redirect callbacks. Contains information useful for determining how to redirect.
@@ -101,34 +100,34 @@ export interface RouterSetupOptions {
 }
 export interface RouterElements {
     readonly rootElement?: HTMLElement;
-    readonly rootView?: DOMHandle;
+    readonly rootView?: ViewNode;
 }
 export declare class Router {
     #private;
     /**
      * The currently matched route pattern, if any.
      */
-    $pattern: import("../signals.js").Signal<string | null>;
+    $pattern: import("../state.js").State<string | null>;
     /**
      * The current URL path.
      */
-    $path: import("../signals.js").Signal<string>;
+    $path: import("../state.js").State<string>;
     /**
      * The current named path params.
      */
-    $params: import("../signals.js").Signal<ParsedParams>;
+    $params: import("../state.js").State<ParsedParams>;
     /**
      * The current query params. Changes to this object will be reflected in the URL.
      */
-    $query: import("../signals.js").Signal<ParsedQuery>;
+    $query: import("../state.js").State<ParsedQuery>;
     constructor(dolla: Dolla, elements: RouterElements);
     setup(options: RouterSetupOptions): void;
     /**
      * Navigates to another route.
      *
      * @example
-     * navigate("/login"); // navigate to `/login`
-     * navigate(["/users", 215], { replace: true }); // replace current history entry with `/users/215`
+     * Dolla.router.go("/login"); // navigate to `/login`
+     * Dolla.router.go["/users", 215], { replace: true }); // replace current history entry with `/users/215`
      */
     go(path: Stringable | Stringable[], options?: NavigateOptions): void;
     /**

package/dist/nodes/cond.d.ts

@@ -1,27 +1,26 @@
-import { type DOMHandle, type ElementContext, type Markup } from "../markup.js";
-import { type Signal, type StopFunction } from "../signals.js";
+import { type MarkupNode, type ElementContext, type Markup } from "../markup.js";
+import { type State, type StopFunction } from "../state.js";
 import { type Renderable } from "../types.js";
 export interface ConditionalConfig {
-    $predicate: Signal<any>;
+    $predicate: State<any>;
     thenContent?: Renderable;
     elseContent?: Renderable;
     elementContext: ElementContext;
 }
-export declare class Conditional implements DOMHandle {
+export declare class Conditional implements MarkupNode {
     node: Node;
     endNode: Node;
-    $predicate: Signal<any>;
+    $predicate: State<any>;
     stopCallback?: StopFunction;
     thenContent?: Markup[];
     elseContent?: Markup[];
-    connectedContent: DOMHandle[];
+    connectedContent: MarkupNode[];
     elementContext: ElementContext;
     initialUpdateHappened: boolean;
     previousValue?: any;
     constructor(config: ConditionalConfig);
-    get connected(): boolean;
-    connect(parent: Node, after?: Node | undefined): void;
-    disconnect(): void;
+    get isMounted(): boolean;
+    mount(parent: Node, after?: Node | undefined): void;
+    unmount(): void;
     update(value: any): void;
-    setChildren(children: DOMHandle[]): Promise<void>;
 }

package/dist/nodes/html.d.ts

@@ -1,27 +1,31 @@
-import { type DOMHandle, type ElementContext, type Markup } from "../markup.js";
-import { type StopFunction } from "../signals.js";
+import { type ElementContext, type Markup, type MarkupNode, type Ref } from "../markup.js";
+import { type StopFunction } from "../state.js";
 type HTMLOptions = {
     elementContext: ElementContext;
     tag: string;
-    props?: any;
+    props: Record<string, any>;
     children?: Markup[];
 };
-export declare class HTML implements DOMHandle {
+export declare class HTML implements MarkupNode {
     node: HTMLElement | SVGElement;
     props: Record<string, any>;
-    children: DOMHandle[];
+    children: MarkupNode[];
     stopCallbacks: StopFunction[];
     elementContext: ElementContext;
     uniqueId: string;
+    ref?: Ref<any>;
     canClickAway: boolean;
-    get connected(): boolean;
+    get isMounted(): boolean;
     constructor({ tag, props, children, elementContext }: HTMLOptions);
-    connect(parent: Node, after?: Node): void;
-    disconnect(): void;
-    setChildren(next: DOMHandle[]): void;
+    mount(parent: Node, after?: Node): void;
+    unmount(): void;
     getUpdateKey(type: string, value: string | number): string;
     applyProps(element: HTMLElement | SVGElement, props: Record<string, unknown>): void;
-    applyStyles(element: HTMLElement | SVGElement, styles: string | Record<string, any>, stopCallbacks: StopFunction[]): () => void;
+    applyStyles(element: HTMLElement | SVGElement, styles: unknown, stopCallbacks: StopFunction[]): () => void;
     applyClasses(element: HTMLElement | SVGElement, classes: unknown, stopCallbacks: StopFunction[]): () => void;
 }
+/**
+ * Converts a camelCase string to kebab-case.
+ */
+export declare function camelToKebab(value: string): string;
 export {};

package/dist/nodes/observer.d.ts

@@ -1,29 +1,28 @@
-import { type DOMHandle, type ElementContext } from "../markup.js";
-import { type Signal } from "../signals.js";
+import { type ElementContext, type MarkupNode } from "../markup.js";
+import { type State } from "../state.js";
 import type { Renderable } from "../types.js";
 interface ObserverOptions {
     elementContext: ElementContext;
-    signals: Signal<any>[];
+    states: State<any>[];
     renderFn: (...values: any) => Renderable;
 }
 /**
  * Displays dynamic children without a parent element.
  */
-export declare class Observer implements DOMHandle {
+export declare class Observer implements MarkupNode {
     node: Node;
     endNode: Node;
-    connectedViews: DOMHandle[];
+    connectedViews: MarkupNode[];
     renderFn: (...values: any) => Renderable;
     elementContext: ElementContext;
     observerControls: {
         start: () => void;
         stop: () => void;
     };
-    get connected(): boolean;
-    constructor({ signals, renderFn, elementContext }: ObserverOptions);
-    connect(parent: Node, after?: Node): void;
-    disconnect(): void;
-    setChildren(): Promise<void>;
+    get isMounted(): boolean;
+    constructor({ states, renderFn, elementContext }: ObserverOptions);
+    mount(parent: Node, after?: Node): void;
+    unmount(): void;
     cleanup(): void;
     update(...children: Renderable[]): void;
 }

package/dist/nodes/outlet.d.ts

@@ -1,23 +1,22 @@
-import { type DOMHandle, type ElementContext } from "../markup.js";
-import { type Signal, type StopFunction } from "../signals.js";
+import { type MarkupNode, type ElementContext } from "../markup.js";
+import { type State, type StopFunction } from "../state.js";
 export interface OutletConfig {
-    $children: Signal<DOMHandle[]>;
+    $children: State<MarkupNode[]>;
     elementContext: ElementContext;
 }
 /**
  * Manages an array of DOMHandles.
  */
-export declare class Outlet implements DOMHandle {
+export declare class Outlet implements MarkupNode {
     node: Node;
     endNode: Node;
-    $children: Signal<DOMHandle[]>;
+    $children: State<MarkupNode[]>;
     stopCallback?: StopFunction;
-    connectedChildren: DOMHandle[];
+    connectedChildren: MarkupNode[];
     elementContext: ElementContext;
     constructor(config: OutletConfig);
-    get connected(): boolean;
-    connect(parent: Node, after?: Node | undefined): void;
-    disconnect(): void;
-    update(newChildren: DOMHandle[]): void;
-    setChildren(children: DOMHandle[]): void;
+    get isMounted(): boolean;
+    mount(parent: Node, after?: Node | undefined): void;
+    unmount(): void;
+    update(newChildren: MarkupNode[]): void;
 }

package/dist/nodes/portal.d.ts

@@ -1,4 +1,4 @@
-import { type DOMHandle, type ElementContext } from "../markup.js";
+import { type MarkupNode, type ElementContext } from "../markup.js";
 import { type Renderable } from "../types.js";
 interface PortalConfig {
     content: Renderable;
@@ -8,13 +8,12 @@ interface PortalConfig {
 /**
  * Renders content into a specified parent node.
  */
-export declare class Portal implements DOMHandle {
+export declare class Portal implements MarkupNode {
     config: PortalConfig;
-    handle?: DOMHandle;
-    get connected(): boolean;
+    handle?: MarkupNode;
+    get isMounted(): boolean;
     constructor(config: PortalConfig);
-    connect(_parent: Node, _after?: Node): void;
-    disconnect(): void;
-    setChildren(children: DOMHandle[]): void;
+    mount(_parent: Node, _after?: Node): void;
+    unmount(): void;
 }
 export {};

package/dist/nodes/repeat.d.ts

@@ -1,34 +1,33 @@
-import { type DOMHandle, type ElementContext } from "../markup.js";
-import { type Signal, type SignalSetter, type StopFunction } from "../signals.js";
+import { type MarkupNode, type ElementContext } from "../markup.js";
+import { type State, type Setter, type StopFunction } from "../state.js";
 import { type ViewContext, type ViewResult } from "../view.js";
 interface RepeatOptions<T> {
     elementContext: ElementContext;
-    $items: Signal<T[]>;
+    $items: State<T[]>;
     keyFn: (value: T, index: number) => string | number | symbol;
-    renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult;
+    renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult;
 }
 type ConnectedItem<T> = {
     key: any;
-    $value: Signal<T>;
-    setValue: SignalSetter<T>;
-    $index: Signal<number>;
-    setIndex: SignalSetter<number>;
-    handle: DOMHandle;
+    $value: State<T>;
+    setValue: Setter<T>;
+    $index: State<number>;
+    setIndex: Setter<number>;
+    handle: MarkupNode;
 };
-export declare class Repeat<T> implements DOMHandle {
+export declare class Repeat<T> implements MarkupNode {
     node: Node;
     endNode: Node;
-    $items: Signal<T[]>;
+    $items: State<T[]>;
     stopCallback?: StopFunction;
     connectedItems: ConnectedItem<T>[];
     elementContext: ElementContext;
-    renderFn: ($value: Signal<T>, $index: Signal<number>, ctx: ViewContext) => ViewResult;
+    renderFn: ($value: State<T>, $index: State<number>, ctx: ViewContext) => ViewResult;
     keyFn: (value: T, index: number) => string | number | symbol;
-    get connected(): boolean;
+    get isMounted(): boolean;
     constructor({ elementContext, $items, renderFn, keyFn }: RepeatOptions<T>);
-    connect(parent: Node, after?: Node): void;
-    disconnect(): void;
-    setChildren(): void;
+    mount(parent: Node, after?: Node): void;
+    unmount(): void;
     _cleanup(): void;
     _update(value: T[]): void;
 }