@manyducks.co/dolla 0.68.1 → 0.69.1

package/lib/nodes/observer.d.ts

@@ -1,7 +1,7 @@
 import { type AppContext, type ElementContext } from "../app.js";
-import type { Renderable } from "../types.js";
 import { type DOMHandle } from "../markup.js";
 import { type Readable } from "../state.js";
+import type { Renderable } from "../types.js";
 interface ObserverOptions {
     appContext: AppContext;
     elementContext: ElementContext;

package/lib/nodes/outlet.d.ts

@@ -1,4 +1,4 @@
-import { type ElementContext, type AppContext } from "../app.js";
+import { type AppContext, type ElementContext } from "../app.js";
 import { type DOMHandle } from "../markup.js";
 import { type Readable, type StopFunction } from "../state.js";
 export interface OutletConfig {

package/lib/nodes/repeat.d.ts

@@ -1,6 +1,6 @@
 import { type AppContext, type ElementContext } from "../app.js";
 import { type DOMHandle } from "../markup.js";
-import { type Readable, type StopFunction, type Writable } from "../state.js";
+import { type Readable, type Writable, type StopFunction } from "../state.js";
 import { type ViewContext, type ViewResult } from "../view.js";
 interface RepeatOptions<T> {
     appContext: AppContext;

package/lib/spring.d.ts

@@ -1,40 +0,0 @@
-import { type Readable, type Writable } from "./state.js";
-export interface SpringParameters {
-    /**
-     * How heavy the spring is.
-     */
-    mass: number | Readable<number>;
-    /**
-     * Amount of stiffness or tension in the spring.
-     */
-    stiffness: number | Readable<number>;
-    /**
-     * Amount of smoothing. Affects the speed of transitions.
-     */
-    damping: number | Readable<number>;
-    /**
-     * How much force the spring's motion begins with.
-     */
-    velocity: number | Readable<number>;
-}
-interface SpringOptions extends Partial<SpringParameters> {
-    /**
-     * Difference in average amplitude across the last several frames before the animation is considered done.
-     * The exact number of frames to average is specified by `endWindow`.
-     */
-    endAmplitude?: number | Readable<number>;
-    /**
-     * Specifies the number of frames across which to measure the average amplitude to determine when the animation is considered done.
-     * The maximum amplitude is specified by `endAmplitude`.
-     */
-    endWindow?: number | Readable<number>;
-}
-export interface Spring extends Writable<number> {
-    /**
-     * Takes a new value and animates to it. Returns a promise that resolves when the animation ends.
-     * Optionally takes a set of override spring options to animate with.
-     */
-    animateTo(newValue: number, options?: SpringOptions): Promise<void>;
-}
-export declare function spring(initialValue: number, options?: SpringOptions): Spring;
-export {};

package/lib/state.d.ts

@@ -1,16 +1,15 @@
-export declare const OBSERVE: unique symbol;
+declare const OBSERVE: unique symbol;
 /**
  * Stops the observer that created it when called.
  */
 export type StopFunction = () => void;
-type ObserveMethod<T> = (callback: (currentValue: T, previousValue?: T) => void) => StopFunction;
+type ObserveMethod<T> = (callback: (currentValue: T) => void) => StopFunction;
 /**
  * Extracts value types from an array of Readables.
  */
 export type ReadableValues<T extends Readable<any>[]> = {
     [K in keyof T]: T[K] extends Readable<infer U> ? U : never;
 };
-export type Unwrapped<T> = T extends Readable<infer U> ? U : T;
 export interface Observable<T> {
     /**
      * Receives the latest value with `callback` whenever the value changes.
@@ -34,51 +33,70 @@ export interface Writable<T> extends Readable<T> {
      */
     update(callback: (currentValue: T) => T): void;
 }
-export declare function isObservable<T>(value: any): value is Observable<T>;
+export type MaybeReadable<T> = Readable<T> | T;
+type Value<T> = T extends Readable<infer V> ? V : T;
 export declare function isReadable<T>(value: any): value is Readable<T>;
 export declare function isWritable<T>(value: any): value is Writable<T>;
-export declare function readable<T>(value: Writable<T>): Readable<Unwrapped<T>>;
-export declare function readable<T>(value: Readable<T>): Readable<Unwrapped<T>>;
-export declare function readable<T>(value: undefined): Readable<T | undefined>;
-export declare function readable<T>(): Readable<T | undefined>;
-export declare function readable<T>(value: T): Readable<Unwrapped<T>>;
-export declare function writable<T>(value: Writable<T>): Writable<Unwrapped<T>>;
-export declare function writable<T>(value: Readable<T>): never;
-export declare function writable<T>(value: undefined): Writable<T | undefined>;
-export declare function writable<T>(): Writable<T | undefined>;
-export declare function writable<T>(value: T): Writable<Unwrapped<T>>;
+export declare function $$<T>(value: Writable<T>): Writable<T>;
+export declare function $$<T>(value: Readable<T>): never;
+export declare function $$<T>(value: undefined): Writable<T | undefined>;
+export declare function $$<T>(): Writable<T | undefined>;
+export declare function $$<T>(value: T): Writable<Value<T>>;
+/**
+ * Creates a proxy `Writable` around an existing `Writable`.
+ * The config object contains custom `get` and `set` methods.
+ * All reads of this proxy goes through the `get` method
+ * and all writes go through `set`.
+ */
+export declare function $$<Source extends Writable<any>, Value>(source: Source, config: ProxyConfig<Value>): Writable<Value>;
+/**
+ * Creates a proxy `Writable` around an existing `Readable`.
+ * The config object contains custom `get` and `set` methods.
+ * All reads of this proxy goes through the `get` method
+ * and all writes go through `set`.
+ */
+export declare function $$<Source extends Readable<any>, Value>(source: Source, config: ProxyConfig<Value>): Writable<Value>;
+export declare function $<T>(value: Writable<T>): Readable<T>;
+export declare function $<T>(value: Readable<T>): Readable<T>;
+export declare function $<T>(value: undefined): Readable<T | undefined>;
+export declare function $<T>(): Readable<T | undefined>;
+export declare function $<T>(value: T): Readable<Value<T>>;
+export declare function $<I, O>(state: MaybeReadable<I>, compute: (value: I) => O | Readable<O>): Readable<O>;
+export declare function $<I extends MaybeReadable<any>[], O>(states: [...I], compute: (...currentValues: ReadableValues<I>) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, compute: (value1: I1, value2: I2) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, compute: (value1: I1, value2: I2, value3: I3) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, I4, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, compute: (value1: I1, value2: I2, value3: I3, value4: I4) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, I4, I5, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, compute: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, I4, I5, I6, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, compute: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, I4, I5, I6, I7, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, compute: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, I4, I5, I6, I7, I8, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, compute: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, I4, I5, I6, I7, I8, I9, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, compute: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9) => O | Readable<O>): Readable<O>;
+export declare function $<I1, I2, I3, I4, I5, I6, I7, I8, I9, I10, O>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, state10: MaybeReadable<I10>, compute: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9, value10: I10) => O | Readable<O>): Readable<O>;
+interface ProxyConfig<Value> {
+    get(): Value;
+    set(value: Value): void;
+}
 /**
  * Observes a readable value. Calls `callback` each time the value changes.
  * Returns a function to stop observing changes. This MUST be called when you are done
  * with this observer to prevent memory leaks.
  */
-export declare function observe<T>(readable: Readable<T>, callback: (currentValue: T, previousValue: T) => void): StopFunction;
+export declare function observe<T>(state: Readable<T>, callback: (currentValue: T, previousValue: T) => void): StopFunction;
 /**
  * Observes a set of readable values.
  * Calls `callback` with each value in the same order as `readables` each time any of their values change.
  * Returns a function to stop observing changes. This MUST be called when you are done
  * with this observer to prevent memory leaks.
  */
-export declare function observe<T extends Readable<any>[]>(readables: [...T], callback: (currentValues: ReadableValues<T>, previousValues: ReadableValues<T>) => void): StopFunction;
-export declare function computed<I, O>(readable: Readable<I>, compute: (currentValue: I, previousValue?: I) => O | Readable<O>): Readable<O>;
-export declare function computed<I extends Readable<any>[], O>(readables: [...I], compute: (currentValues: ReadableValues<I>, previousValues?: ReadableValues<I>) => O): Readable<O>;
-interface ProxyConfig<Source, Value> {
-    get(source: Source): Value;
-    set(source: Source, value: Value): void;
-}
-/**
- * Creates a proxy `Writable` around an existing `Writable`.
- * The config object takes custom `get` and `set` methods.
- * All reads of this proxy goes through the `get` method
- * and all writes go through `set`.
- */
-export declare function proxy<Source extends Writable<any>, Value>(source: Source, config: ProxyConfig<Source, Value>): Writable<Value>;
-/**
- * Creates a proxy `Writable` around an existing `Readable`.
- * The config object takes custom `get` and `set` methods.
- * All reads of this proxy goes through the `get` method
- * and all writes go through `set`.
- */
-export declare function proxy<Source extends Readable<any>, Value>(source: Source, config: ProxyConfig<Source, Value>): Writable<Value>;
+export declare function observe<T extends MaybeReadable<any>[]>(states: [...T], callback: (currentValues: ReadableValues<T>, previousValues: ReadableValues<T>) => void): StopFunction;
+export declare function observe<I1, I2>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, callback: (value1: I1, value2: I2) => void): StopFunction;
+export declare function observe<I1, I2, I3>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, callback: (value1: I1, value2: I2, value3: I3) => void): StopFunction;
+export declare function observe<I1, I2, I3, I4>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, callback: (value1: I1, value2: I2, value3: I3, value4: I4) => void): StopFunction;
+export declare function observe<I1, I2, I3, I4, I5>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5) => void): StopFunction;
+export declare function observe<I1, I2, I3, I4, I5, I6>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6) => void): StopFunction;
+export declare function observe<I1, I2, I3, I4, I5, I6, I7>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7) => void): StopFunction;
+export declare function observe<I1, I2, I3, I4, I5, I6, I7, I8>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8) => void): StopFunction;
+export declare function observe<I1, I2, I3, I4, I5, I6, I7, I8, I9>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9) => void): StopFunction;
+export declare function observe<I1, I2, I3, I4, I5, I6, I7, I8, I9, I10>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, state10: MaybeReadable<I10>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9, value10: I10) => void): StopFunction;
 export declare function unwrap<T>(value: Readable<T> | T): T;
 export {};

package/lib/store.d.ts

@@ -1,6 +1,6 @@
 import { type AppContext, type ElementContext } from "./app.js";
 import { type DebugChannel } from "./classes/DebugHub.js";
-import { Readable, type ReadableValues } from "./state.js";
+import { MaybeReadable, type ReadableValues } from "./state.js";
 import type { BuiltInStores } from "./types.js";
 export type Store<O, E> = (context: StoreContext<O>) => E | Promise<E>;
 export interface StoreContext<Options = any> extends DebugChannel {
@@ -31,12 +31,21 @@ export interface StoreContext<Options = any> extends DebugChannel {
     /**
      * Observes a readable value while this store is connected. Calls `callback` each time the value changes.
      */
-    observe<T>(readable: Readable<T>, callback: (currentValue: T, previousValue: T) => void): void;
+    observe<T>(state: MaybeReadable<T>, callback: (currentValue: T) => void): void;
     /**
      * Observes a set of readable values while this store is connected.
      * Calls `callback` with each value in the same order as `readables` each time any of their values change.
      */
-    observe<T extends Readable<any>[], V>(readables: [...T], callback: (currentValues: ReadableValues<T>, previousValues: ReadableValues<T>) => void): void;
+    observe<T extends MaybeReadable<any>[]>(states: [...T], callback: (...currentValues: ReadableValues<T>) => void): void;
+    observe<I1, I2>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, callback: (value1: I1, value2: I2) => void): void;
+    observe<I1, I2, I3>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, callback: (value1: I1, value2: I2, value3: I3) => void): void;
+    observe<I1, I2, I3, I4>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, callback: (value1: I1, value2: I2, value3: I3, value4: I4) => void): void;
+    observe<I1, I2, I3, I4, I5>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5) => void): void;
+    observe<I1, I2, I3, I4, I5, I6>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7, I8>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7, I8, I9>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7, I8, I9, I10>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, state10: MaybeReadable<I10>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9, value10: I10) => void): void;
     /**
      * Options this store was initialized with.
      */

package/lib/stores/language.d.ts

@@ -6,22 +6,18 @@ import { type Stringable } from "../types.js";
  */
 type Translation = Record<string, string | Record<string, string | Record<string, string | Record<string, string>>>>;
 export interface LanguageConfig {
+    name: string;
     /**
-     * The translated strings for this language, or a callback function that returns them.
+     * Path to a JSON file with translated strings for this language, a plain object containing said translations, or a callback function that returns them.
      */
-    translation: Translation | (() => Translation) | (() => Promise<Translation>);
+    translations: string | Translation | (() => Translation) | (() => Promise<Translation>);
 }
 type LanguageOptions = {
-    /**
-     * Languages supported by the app (as added with App.language())
-     */
-    languages: {
-        [tag: string]: LanguageConfig;
-    };
+    languages: LanguageConfig[];
     /**
      * Default language to load on startup
      */
-    currentLanguage?: string;
+    default?: string;
 };
 export declare function LanguageStore(ctx: StoreContext<LanguageOptions>): {
     $isLoaded: Readable<boolean>;

package/lib/stores/router.d.ts

@@ -1,19 +1,13 @@
-import { type Route } from "@borf/bedrock";
 import { type History } from "history";
-import { type Stringable } from "../types.js";
 import { type Markup } from "../markup.js";
 import { type StoreContext } from "../store.js";
-export interface RouterOptions {
-    /**
-     * Use hash-based routing if true.
-     */
-    hash?: boolean;
-    /**
-     * A history object from the `history` package.
-     *
-     * @see https://www.npmjs.com/package/history
-     */
-    history?: History;
+import { type Stringable } from "../types.js";
+import { View } from "../view.js";
+export interface Route {
+    path: string;
+    redirect?: string;
+    view?: View<any>;
+    routes?: Route[];
 }
 export interface RouteConfig {
     pattern: string;
@@ -60,11 +54,18 @@ interface NavigateOptions {
      */
     replace?: boolean;
 }
-interface RouterStoreOptions extends RouterOptions {
+interface RouterStoreOptions {
+    routes: Route[];
+    /**
+     * Use hash-based routing if true.
+     */
+    hash?: boolean;
     /**
-     * An instance of Router with the app's routes preloaded.
+     * A history object from the `history` package.
+     *
+     * @see https://www.npmjs.com/package/history
      */
-    routes: Route<RouteConfig["meta"]>[];
+    history?: History;
 }
 export declare function RouterStore(ctx: StoreContext<RouterStoreOptions>): {
     /**

package/lib/types.d.ts

@@ -2,12 +2,8 @@ import type * as CSS from "csstype";
 import { type Markup } from "./markup.js";
 import { type Readable, type Writable } from "./state.js";
 import { type Store } from "./store.js";
-import { type DialogStore } from "./stores/dialog.js";
 import { type DocumentStore } from "./stores/document.js";
-import { type HTTPStore } from "./stores/http.js";
-import { type LanguageStore } from "./stores/language.js";
 import { RenderStore } from "./stores/render.js";
-import { type RouterStore } from "./stores/router.js";
 /**
  * Value will be read by the component.
  */
@@ -27,11 +23,7 @@ export type Value<T> = T extends Read<infer U> ? U : T;
 export type Renderable = string | number | Markup | false | null | undefined | Readable<any> | (string | number | Markup | false | null | undefined | Readable<any>)[];
 export type StoreExports<T> = T extends Store<any, infer O> ? O : unknown;
 export interface BuiltInStores {
-    http: StoreExports<typeof HTTPStore>;
-    dialog: StoreExports<typeof DialogStore>;
-    language: StoreExports<typeof LanguageStore>;
     document: StoreExports<typeof DocumentStore>;
-    router: StoreExports<typeof RouterStore>;
     render: StoreExports<typeof RenderStore>;
 }
 export type Stringable = {
@@ -1592,14 +1584,14 @@ export interface IntrinsicElements {
      */
     rp: PropertiesOf<HTMLElement>;
     /**
-     * Wraps a piece of content, providing an additional machine-readable version in a `value` attribute.
+     * Wraps a piece of content, providing an additional machine-Readable version in a `value` attribute.
      * For date or time related data, a `<time>` element is preferred.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data
      */
     data: HTMLDataElementProps;
     /**
-     * Represents a specific period in time. It may include the `datetime` attribute to translate dates into machine-readable format,
+     * Represents a specific period in time. It may include the `datetime` attribute to translate dates into machine-Readable format,
      * allowing for better search engine results or custom features such as reminders.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
@@ -1796,7 +1788,7 @@ interface HTMLAbbrElementProps extends PropertiesOf<HTMLElement> {
 }
 interface HTMLDataElementProps extends PropertiesOf<HTMLDataElement> {
     /**
-     * Specifies the machine-readable translation of the content of the element.
+     * Specifies the machine-Readable translation of the content of the element.
      *
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data
      */
@@ -2768,7 +2760,7 @@ interface HTMLTrackElementProps extends PropertiesOf<HTMLTrackElement> {
      */
     kind?: OptionalProperty<"subtitles" | "captions" | "descriptions" | "chapters" | "metadata">;
     /**
-     * A user-readable title of the text track which is used by the browser when listing available text tracks.
+     * A user-Readable title of the text track which is used by the browser when listing available text tracks.
      */
     label?: OptionalProperty<string>;
     /**

package/lib/view.d.ts

@@ -1,7 +1,7 @@
 import { type AppContext, type ElementContext } from "./app.js";
 import { type DebugChannel } from "./classes/DebugHub.js";
 import { type DOMHandle, type Markup } from "./markup.js";
-import { type Readable, type ReadableValues } from "./state.js";
+import { type Readable, type ReadableValues, type MaybeReadable } from "./state.js";
 import { type Store } from "./store.js";
 import type { BuiltInStores } from "./types.js";
 /**
@@ -49,12 +49,21 @@ export interface ViewContext extends DebugChannel {
     /**
      * Observes a readable value while this view is connected. Calls `callback` each time the value changes.
      */
-    observe<T>(readable: Readable<T>, callback: (currentValue: T, previousValue: T) => void): void;
+    observe<T>(state: MaybeReadable<T>, callback: (currentValue: T) => void): void;
     /**
      * Observes a set of readable values while this view is connected.
      * Calls `callback` with each value in the same order as `readables` each time any of their values change.
      */
-    observe<T extends Readable<any>[]>(readables: [...T], callback: (currentValues: ReadableValues<T>, previousValues: ReadableValues<T>) => void): void;
+    observe<T extends MaybeReadable<any>[]>(states: [...T], callback: (...currentValues: ReadableValues<T>) => void): void;
+    observe<I1, I2>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, callback: (value1: I1, value2: I2) => void): void;
+    observe<I1, I2, I3>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, callback: (value1: I1, value2: I2, value3: I3) => void): void;
+    observe<I1, I2, I3, I4>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, callback: (value1: I1, value2: I2, value3: I3, value4: I4) => void): void;
+    observe<I1, I2, I3, I4, I5>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5) => void): void;
+    observe<I1, I2, I3, I4, I5, I6>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7, I8>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7, I8, I9>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9) => void): void;
+    observe<I1, I2, I3, I4, I5, I6, I7, I8, I9, I10>(state1: MaybeReadable<I1>, state2: MaybeReadable<I2>, state3: MaybeReadable<I3>, state4: MaybeReadable<I4>, state5: MaybeReadable<I5>, state6: MaybeReadable<I6>, state7: MaybeReadable<I7>, state8: MaybeReadable<I8>, state9: MaybeReadable<I9>, state10: MaybeReadable<I10>, callback: (value1: I1, value2: I2, value3: I3, value4: I4, value5: I5, value6: I6, value7: I7, value8: I8, value9: I9, value10: I10) => void): void;
     /**
      * Returns a Markup element that displays this view's children.
      */

package/notes/state.md

@@ -0,0 +1,71 @@
+# State
+
+I want to update the state API to be a single constructor object, similar to built-ins like `Math` and `Array`. The current API has a lot of separate functions that work together in various ways, but I feel it would be easier to explain and understand if these functions were under one namespace.
+
+Current API:
+
+```ts
+import { readable, writable, computed, unwrap, proxy, type Readable, type Writable } from "@manyducks.co/dolla";
+
+const $$writable = writable({ someValue: 5, otherValue: "test" });
+const $readable = readable($$writable);
+const $computed = computed($$writable, (value) => value.someValue * 256);
+const unwrapped = unwrap($computed);
+const $$proxy = proxy($$writable, {
+  get(source) {
+    return source.get().someValue;
+  },
+  set(source, value) {
+    source.update((current) => {
+      return { ...current, someValue: value };
+    });
+  },
+});
+const $multiComputed = computed([$one, $$two, $three], ([one, two, three], [oldOne, oldTwo, oldThree]) => {
+  return one + two + three;
+});
+
+$$writable.get();
+$$writable.set({ someValue: 12, otherValue: null });
+$$writable.update((current) => ({ ...current, someValue: 100 }));
+
+$readable.get();
+```
+
+The main problem with the above is that we have two things (readable and writable) and a bunch of disconnected utility functions.
+
+Proposed API:
+
+```ts
+import { State, type Readable, type Writable } from "@manyducks.co/dolla";
+
+const $$writable = State.writable({ someValue: 5, otherValue: "test" }); // Longhand
+const $$writable = State({ someValue: 5, otherValue: "test" }); // Shorthand
+const $readable = State.readable($$writable);
+const $readable = $$writable.readable(); // Directly from a writable
+const $computed = State.from($$writable, (value) => value.someValue * 256);
+const unwrapped = State.unwrap($computed);
+const $$proxy = State.proxy($$writable, {
+  get(current) {
+    return current.someValue;
+  },
+  set(value, update) {
+    update((current) => {
+      return { ...current, someValue: value };
+    });
+  },
+});
+const $multiComputed = State.from($one, $$two, $three, (one, two, three, ctx) => {
+  // ctx.lastValues = [oldOne, oldTwo, oldThree];
+  // ctx.lastReturned = oldOne + oldTwo + oldThree
+  return one + two + three;
+});
+
+$$writable.get();
+$$writable.set({ someValue: 12, otherValue: null });
+$$writable.update((current) => ({ ...current, someValue: 100 }));
+
+$readable.get();
+```
+
+Now we have one state primitive (`State`), all instances of which implement `Readable` and some of which implement `Writable`. All utility functions are under the same namespace. This also avoids conflicts with Node streams' Readable and Writable which can be an issue with automatic imports.

package/notes/views.md

@@ -0,0 +1,28 @@
+```js
+import { View, Store, State } from "@manyducks.co/dolla";
+
+const SomeView = View("SomeView")
+  .props((t) => ({
+    // Define prop types which are validated and enforced in dev mode
+    $name: t.readable(t.string().optional()).optional(), // Readable<string | undefined> | undefined
+  }))
+  .build(({ $name }, ctx) => {
+    const { $value } = ctx.getStore(SomeStore);
+
+    return <h1>Hello {$name}</h1>;
+  });
+
+const SomeStore = Store("SomeStore").build((ctx) => {
+  const $$value = State(0);
+
+  return {
+    $value: $$value.readable(),
+  };
+});
+
+// Stores can be configured in an app like so:
+
+const app = App();
+
+app.addStore(SomeStore.configure(options));
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manyducks.co/dolla",
-  "version": "0.68.1",
+  "version": "0.69.1",
   "description": "Front-end components, routing and state management.",
   "main": "lib/index.js",
   "types": "./index.d.ts",