chizu 0.1.0

package/README.md

@@ -0,0 +1,217 @@
+<div align="center">
+  <img src="/media/logo.png" width="475" />
+</div>
+
+Strongly typed React framework using generators and efficiently updated views alongside the publish-subscribe pattern.
+
+## Contents
+
+1. [Benefits](#benefits)
+1. [Getting started](#getting-started)
+1. [Handling errors](#handling-errors)
+
+## Benefits
+
+- Thoughtful event-driven architecture superset of [React](https://react.dev/).
+- Super efficient with views only re-rendering when absolutely necessary.
+- Built-in support for [optimistic updates](https://medium.com/@kyledeguzmanx/what-are-optimistic-updates-483662c3e171) within components.
+- Mostly standard JavaScript without quirky rules and exceptions.
+- Clear separation of concerns between business logic and markup.
+- First-class support for skeleton loading using generators.
+- Strongly typed throughout &ndash; styles, controllers and views.
+- Avoid vendor lock-in with framework agnostic libraries such as [Shoelace](https://shoelace.style/).
+- Easily communicate between controllers using distributed actions.
+- State is mutated sequentially ([FIFO](<https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics)>)) and deeply merged for queued mutations.
+
+## Getting started
+
+Controllers are responsible for mutating the state of the view. In the below example the `name` is dispatched from the view to the controller, the state is updated and the view is rendered once with the updated value.
+
+<kbd>Controller</kbd>
+
+```tsx
+export default create.controller<Module>((self) => {
+  return {
+    *[Events.Name](name) {
+      return self.actions.produce((draft) => {
+        draft.name = name;
+      });
+    },
+  };
+});
+```
+
+<kbd>View</kbd>
+
+```tsx
+export default create.view<Module>((self) => {
+  return (
+    <>
+      <p>Hey {self.model.name}</p>
+
+      <button
+        onClick={() => self.actions.dispatch([Events.Name, randomName()])}
+      >
+        Switch profile
+      </button>
+    </>
+  );
+});
+```
+
+Fetching the name from an external source using an `actions.io` causes the controller event (`Events.Name`) and associated view to be invoked twice &ndash; once with a record of mutations to display a pending state, and then again with the model once it's been mutated.
+
+<kbd>Controller</kbd>
+
+```tsx
+export default create.controller<Module>((self) => {
+  return {
+    *[Events.Name]() {
+      yield self.actions.io(async () => {
+        const name = await fetch(/* ... */);
+
+        return self.actions.produce((draft) => {
+          draft.name = name;
+        });
+      });
+
+      return self.actions.produce((draft) => {
+        draft.name = null;
+      });
+    },
+  };
+});
+```
+
+<kbd>View</kbd>
+
+```tsx
+export default create.view<Module>((self) => {
+  return (
+    <>
+      <p>Hey {self.model.name}</p>
+
+      <button onClick={() => self.actions.dispatch([Events.Name])}>
+        Switch profile
+      </button>
+    </>
+  );
+});
+```
+
+As the event is invoked twice, it's important they are idempotent &ndash; by encapsulating your side effects in `actions.io` the promises are resolved before invoking the event again with those resolved values.
+
+In the above example the name is fetched asynchronously &ndash; however there is no feedback to the user, we can improve that by using the `self.actions.placeholder` and `self.validate` helpers:
+
+<kbd>Controller</kbd>
+
+```tsx
+export default create.controller<Module>((self) => {
+  return {
+    *[Events.Name]() {
+      yield self.actions.io(async () => {
+        const name = await fetch(/* ... */);
+
+        return self.actions.produce((draft) => {
+          draft.name = name;
+        });
+      });
+
+      return self.actions.produce((draft) => {
+        draft.name = self.actions.pending(null, State.Updating);
+      });
+    },
+  };
+});
+```
+
+<kbd>View</kbd>
+
+```tsx
+export default create.view<Module>((self) => {
+  return (
+    <>
+      <p>Hey {self.model.name}</p>
+
+      {self.validate.name.is(State.Pending) && (
+        <p>Switching profiles&hellip;</p>
+      )}
+
+      <button
+        disabled={self.validate.name.is(State.Updating)}
+        onClick={() => self.actions.dispatch([Events.Name])}
+      >
+        Switch profile
+      </button>
+    </>
+  );
+});
+```
+
+## Handling Errors
+
+Controller actions can throw errors directly or in any of their associated `yield` actions &ndash; all unhandled errors are automatically caught and broadcast using the `Lifecycle.Error` action &ndash; you can render these [in a toast](https://github.com/fkhadra/react-toastify#readme) or similar UI.
+
+You can also customise these errors a little further with your own error `enum` which describes the error type:
+
+<kbd>Types</kbd>
+
+```tsx
+export const enum Errors {
+  UserValidation,
+  IncorrectPassword,
+}
+```
+
+<kbd>Controller</kbd>
+
+```tsx
+export default create.controller<Module>((self) => {
+  return {
+    *[Events.Name]() {
+      yield self.actions.io(async () => {
+        const name = await fetch(/* ... */);
+
+        if (!name) throw new EventError(Errors.UserValidation);
+
+        return self.actions.produce((draft) => {
+          draft.name = name;
+        });
+      });
+
+      return self.actions.produce((draft) => {
+        draft.name = null;
+      });
+    },
+  };
+});
+```
+
+However showing a toast message is not always relevant, you may want a more detailed error message such as a user not found message &ndash; although you could introduce another property for such errors in your model, you could mark the property as fallible by giving it a `Maybe` type because it then keeps everything nicely associated with the `name` property rather than creating another property:
+
+<kbd>Controller</kbd>
+
+```tsx
+export default create.controller<Module>((self) => {
+  return {
+    *[Events.Name]() {
+      yield self.actions.io(async () => {
+        const name = await fetch(/* ... */);
+
+        if (!name)
+          return self.actions.produce((draft) => {
+            draft.name = Maybe.of(new EventError(Errors.UserValidation));
+          });
+
+        return self.actions.produce((draft) => {
+          draft.name = Maybe.of(name);
+        });
+      });
+
+      return self.actions.produce((draft) => {
+        draft.name = Maybe.of(null);
+      });
+    },
+  };
+});
+```

package/dist/app/index.d.ts

@@ -0,0 +1,4 @@
+import { AppContext } from './types.ts';
+import * as React from "react";
+export declare function useApp(): AppContext;
+export default function app(tree: React.ComponentType): void;

package/dist/app/types.d.ts

@@ -0,0 +1,10 @@
+import { default as EventEmitter } from 'eventemitter3';
+import * as React from "react";
+export type AppOptions = React.ComponentType;
+export type AppContext = {
+    appEmitter: EventEmitter;
+};
+export type TreeProps = {
+    tree: React.ComponentType;
+};
+export type UseApp = AppContext;

package/dist/chizu.js

@@ -0,0 +1,361 @@
+var D = (e) => {
+  throw TypeError(e);
+};
+var U = (e, t, r) => t.has(e) || D("Cannot " + r);
+var d = (e, t, r) => (U(e, t, "read from private field"), r ? r.call(e) : t.get(e)), p = (e, t, r) => t.has(e) ? D("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), h = (e, t, r, n) => (U(e, t, "write to private field"), n ? n.call(e, r) : t.set(e, r), r);
+import { jsx as M } from "react/jsx-runtime";
+import C from "eventemitter3";
+import * as i from "react";
+import * as k from "react-dom/client";
+const O = i.createContext({
+  appEmitter: new C()
+});
+function T() {
+  return i.useContext(O);
+}
+function z(e) {
+  k.createRoot(document.body).render(/* @__PURE__ */ M(B, { tree: e }));
+}
+function B({ tree: e }) {
+  const t = i.useMemo(
+    () => ({
+      appEmitter: new C()
+    }),
+    []
+  );
+  return /* @__PURE__ */ M(O.Provider, { value: t, children: /* @__PURE__ */ M(e, {}) });
+}
+function J(e) {
+  return e;
+}
+function N(e) {
+  return e;
+}
+var _ = /* @__PURE__ */ ((e) => (e[e.Idle = 0] = "Idle", e[e.Pending = 1] = "Pending", e[e.Adding = 2] = "Adding", e[e.Removing = 4] = "Removing", e[e.Updating = 8] = "Updating", e[e.Moving = 16] = "Moving", e))(_ || {}), f = /* @__PURE__ */ ((e) => (e.Mount = "lifecycle/mount", e.Tree = "lifecycle/tree", e.Derive = "lifecycle/derive", e.Error = "distributed/lifecycle/error", e.Unmount = "lifecycle/unmount", e))(f || {});
+const q = Symbol("unwrap");
+var g, y, w;
+class P {
+  constructor(t, r, n) {
+    p(this, g);
+    p(this, y);
+    p(this, w);
+    h(this, g, t), h(this, y, r), h(this, w, n);
+  }
+  value() {
+    return d(this, g);
+  }
+  state() {
+    return d(this, y);
+  }
+  process() {
+    return d(this, w);
+  }
+}
+g = new WeakMap(), y = new WeakMap(), w = new WeakMap();
+function x(e, t, r) {
+  return new P(e, t, r);
+}
+function I(e, t) {
+  return new Proxy(e, {
+    get(r, n) {
+      const o = Reflect.get(r, n), u = o instanceof P ? o.value() : o;
+      return n === q ? r : typeof u == "object" ? I(u, t) : u;
+    },
+    set(r, n, o) {
+      const s = o instanceof P, u = o, c = s ? u.process() : null, l = s ? u.value() : o, a = l == null ? null : l[q] ?? l, v = /^\d+$/.test(String(n));
+      return s && c && t.add({
+        key: v ? null : n,
+        value: typeof a == "object" ? a : r,
+        process: c,
+        state: u.state()
+      }), Reflect.set(r, n, a);
+    }
+  });
+}
+function Q(e, t) {
+  function r(n, o = "") {
+    return new Proxy(n, {
+      get(s, u) {
+        const c = Reflect.get(s, u);
+        if (typeof u == "symbol") return c;
+        if (u === "is") {
+          const l = [...t].filter((a) => a.value === s && (a.key === o || !a.key));
+          return (a) => l.length === 0 ? !1 : !!([...new Set(
+            l.map((R) => R.state)
+          )].reduce(
+            (R, $) => R | $,
+            _.Pending
+          ) & a);
+        }
+        return r(typeof c == "object" && c !== null ? c : s, u);
+      }
+    });
+  }
+  return r(e);
+}
+function W(e) {
+  return i.useMemo(
+    () => ({
+      controller: {
+        get model() {
+          return e.model.current;
+        },
+        queue: [],
+        events: e.options.props,
+        actions: {
+          io(t) {
+            return t;
+          },
+          placeholder(t, r) {
+            return x(t, r, e.process.current);
+          },
+          produce(t) {
+            return (r) => (t(I(r, e.mutations.current)), r);
+          },
+          dispatch([t, ...r]) {
+            const n = Promise.withResolvers();
+            return e.dispatchers.dispatch(t, r, n), n.promise;
+          }
+        }
+      },
+      view: {
+        get model() {
+          return e.model.current;
+        },
+        get validate() {
+          return Q(
+            e.model.current,
+            e.mutations.current
+          );
+        },
+        events: e.options.props,
+        actions: {
+          dispatch([t, ...r]) {
+            const n = Promise.withResolvers();
+            return e.dispatchers.dispatch(t, r, n), n.promise;
+          }
+        }
+      }
+    }),
+    []
+  );
+}
+function F(e) {
+  return i.useMemo(() => {
+    const t = e.options.controller(e.actions.controller);
+    return Object.entries(t).forEach(([n, o]) => e.dispatchers.attach(n, o)), t;
+  }, []);
+}
+function G(e) {
+  return (t, r) => async (n = Promise.withResolvers(), o) => {
+    if (typeof r != "function") return;
+    const s = Symbol(`process/${Math.random()}`);
+    e.queue.current.add(n.promise);
+    const u = new AbortController();
+    try {
+      const c = {
+        app: e.app,
+        task: n,
+        process: s,
+        ƒ: r,
+        abortController: u,
+        payload: o,
+        props: e
+      }, l = H(e, c);
+      e.queue.current.size > 1 && await Promise.allSettled([...e.queue.current].slice(0, -1)), l.size > 0 && await K(e, c, l), e.queue.current.delete(n.promise), n.resolve();
+    } catch (c) {
+      console.log("hmm, error", c), e.app.appEmitter.emit(f.Error, n, [c]);
+    }
+  };
+}
+function H(e, t) {
+  const r = /* @__PURE__ */ new Set(), n = t.ƒ(...t.payload);
+  for (; ; )
+    try {
+      const o = n.next();
+      if (o.done && typeof o.value == "function") {
+        e.process.current = t.process;
+        const s = o.value(t.props.model.current);
+        return s && (t.props.model.current = s), e.process.current = null, t.props.update.rerender(), r;
+      }
+      e.process.current = t.process, typeof o.value == "function" && r.add(
+        o.value({ signal: t.abortController.signal }).catch((s) => () => {
+          e.app.appEmitter.emit(f.Error, t.task, [s]);
+        })
+      ), e.process.current = null;
+    } catch (o) {
+      return e.app.appEmitter.emit(f.Error, t.task, [o]), /* @__PURE__ */ new Set();
+    }
+}
+async function K(e, t, r) {
+  (await Promise.allSettled(r)).forEach((n) => {
+    if (e.process.current = t.process, n.status === "rejected")
+      return;
+    const o = typeof n.value == "function" ? n.value(t.props.model.current) : n;
+    o && (t.props.model.current = o), e.process.current = null, e.mutations.current = new Set(
+      [...e.mutations.current].filter(
+        (s) => s.process !== t.process
+      )
+    ), t.props.update.rerender();
+  });
+}
+function A(e) {
+  return e.startsWith("distributed");
+}
+var E, b;
+class L extends Error {
+  constructor(r, n = null) {
+    super(String(n));
+    p(this, E);
+    p(this, b);
+    h(this, E, r), h(this, b, n);
+  }
+  get type() {
+    return d(this, E);
+  }
+  get message() {
+    return d(this, b) || "";
+  }
+}
+E = new WeakMap(), b = new WeakMap();
+function V(e) {
+  const t = T(), r = G(e);
+  return i.useMemo(() => {
+    const n = new C(), o = t.appEmitter;
+    return {
+      attach(s, u) {
+        const c = String(s);
+        A(c) ? o.on(c, r(s, u)) : n.on(c, r(s, u));
+      },
+      dispatch(s, u, c) {
+        const l = String(s);
+        A(l) ? o.emit(l, c, u) : n.emit(l, c, u);
+      }
+    };
+  }, []);
+}
+function X() {
+  const e = i.useRef(null);
+  return i.useMemo(() => ({ customElement: e }), []);
+}
+function Y(e) {
+  const t = i.useRef(!1);
+  i.useLayoutEffect(() => {
+    e.dispatchers.dispatch(f.Mount, []), e.dispatchers.dispatch(f.Tree, [
+      e.elements.customElement.current
+    ]), e.dispatchers.dispatch(f.Derive, [e.options.props]);
+  }, [e.options.props]), i.useLayoutEffect(() => {
+    if (!t.current)
+      return t.current = !0, () => e.dispatchers.dispatch(f.Unmount, []);
+  }, []);
+}
+function Z(e) {
+  return i.useMemo(
+    () => ({
+      output(t) {
+        const r = e.elements.customElement.current;
+        console.groupCollapsed(
+          "%cRendered",
+          "background: rgb(217, 235, 240); color: rgb(0, 51, 102); border-radius: 2px; padding: 0 5px",
+          r
+        ), console.groupEnd();
+      }
+    }),
+    []
+  );
+}
+function ee(e) {
+  return i.useRef(e.options.model);
+}
+function te() {
+  return i.useRef(/* @__PURE__ */ new Set());
+}
+function re() {
+  return i.useRef(null);
+}
+function ne() {
+  return i.useRef(/* @__PURE__ */ new Set());
+}
+function oe() {
+  const [e, t] = i.useReducer((r) => r + 1, 0);
+  return i.useMemo(() => ({ hash: e, rerender: t }), [e]);
+}
+function se({
+  options: e
+}) {
+  const t = T(), r = oe(), n = ne(), o = te(), s = X(), u = re(), c = ee({ options: e }), l = Z({ options: e, elements: s }), a = V({
+    app: t,
+    options: e,
+    update: r,
+    model: c,
+    logger: l,
+    queue: n,
+    mutations: o,
+    process: u
+  }), v = W({
+    app: t,
+    options: e,
+    model: c,
+    dispatchers: a,
+    mutations: o,
+    process: u
+  });
+  return F({ options: e, dispatchers: a, actions: v }), Y({ options: e, dispatchers: a, elements: s }), i.useMemo(() => (l.output({}), i.createElement(e.name, {
+    ref: s.customElement,
+    children: e.view(v.view)
+  })), [r.hash]);
+}
+function ue(e) {
+  return (t) => i.memo(
+    (r) => se({
+      options: {
+        ...t,
+        name: e.join(""),
+        props: r
+      }
+    }),
+    (r, n) => JSON.stringify(r) === JSON.stringify(n)
+  );
+}
+function ce(e) {
+  return e;
+}
+var m;
+const S = class S {
+  constructor(t) {
+    p(this, m);
+    h(this, m, t);
+  }
+  static of(t) {
+    return new S(t);
+  }
+  map(t = (n) => n, r = (n) => n) {
+    return d(this, m) == null || d(this, m) instanceof Error ? r(d(this, m)) : t(d(this, m));
+  }
+};
+m = new WeakMap();
+let j = S;
+function ie(e) {
+  return new Promise((t) => setTimeout(t, e));
+}
+function le(e) {
+  return e ? !!(e && typeof e != "symbol") : Symbol(`pk.${Date.now()}.${crypto.randomUUID()}`);
+}
+function ae(e) {
+  return e instanceof L;
+}
+const he = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  isEventError: ae,
+  maybe: j,
+  pk: le,
+  sleep: ie
+}, Symbol.toStringTag, { value: "Module" })), ve = { app: z, module: ue, model: N, view: ce, controller: J };
+export {
+  L as EventError,
+  f as Lifecycle,
+  j as Maybe,
+  _ as State,
+  ve as create,
+  he as utils
+};

package/dist/chizu.umd.cjs

@@ -0,0 +1 @@
+(function(o,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("react/jsx-runtime"),require("eventemitter3"),require("react"),require("react-dom/client")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","eventemitter3","react","react-dom/client"],a):(o=typeof globalThis<"u"?globalThis:o||self,a(o.Chizu={},o.jsxRuntime,o.EventEmitter3,o.React,o.ReactDOM))})(this,function(o,a,f,j,N){"use strict";var $=o=>{throw TypeError(o)};var B=(o,a,f)=>a.has(o)||$("Cannot "+f);var p=(o,a,f)=>(B(o,a,"read from private field"),f?f.call(o):a.get(o)),y=(o,a,f)=>a.has(o)?$("Cannot add the same private member more than once"):a instanceof WeakSet?a.add(o):a.set(o,f),g=(o,a,f,j)=>(B(o,a,"write to private field"),j?j.call(o,f):a.set(o,f),f);var w,b,E,M,R,v;function C(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const l=C(j),J=C(N),T=l.createContext({appEmitter:new f});function U(){return l.useContext(T)}function L(e){J.createRoot(document.body).render(a.jsx(Q,{tree:e}))}function Q({tree:e}){const t=l.useMemo(()=>({appEmitter:new f}),[]);return a.jsx(T.Provider,{value:t,children:a.jsx(e,{})})}function W(e){return e}function x(e){return e}var S=(e=>(e[e.Idle=0]="Idle",e[e.Pending=1]="Pending",e[e.Adding=2]="Adding",e[e.Removing=4]="Removing",e[e.Updating=8]="Updating",e[e.Moving=16]="Moving",e))(S||{}),h=(e=>(e.Mount="lifecycle/mount",e.Tree="lifecycle/tree",e.Derive="lifecycle/derive",e.Error="distributed/lifecycle/error",e.Unmount="lifecycle/unmount",e))(h||{});const A=Symbol("unwrap");class q{constructor(t,r,n){y(this,w);y(this,b);y(this,E);g(this,w,t),g(this,b,r),g(this,E,n)}value(){return p(this,w)}state(){return p(this,b)}process(){return p(this,E)}}w=new WeakMap,b=new WeakMap,E=new WeakMap;function F(e,t,r){return new q(e,t,r)}function z(e,t){return new Proxy(e,{get(r,n){const u=Reflect.get(r,n),c=u instanceof q?u.value():u;return n===A?r:typeof c=="object"?z(c,t):c},set(r,n,u){const s=u instanceof q,c=u,i=s?c.process():null,d=s?c.value():u,m=d==null?null:d[A]??d,P=/^\d+$/.test(String(n));return s&&i&&t.add({key:P?null:n,value:typeof m=="object"?m:r,process:i,state:c.state()}),Reflect.set(r,n,m)}})}function G(e,t){function r(n,u=""){return new Proxy(n,{get(s,c){const i=Reflect.get(s,c);if(typeof c=="symbol")return i;if(c==="is"){const d=[...t].filter(m=>m.value===s&&(m.key===u||!m.key));return m=>d.length===0?!1:!!([...new Set(d.map(_=>_.state))].reduce((_,ve)=>_|ve,S.Pending)&m)}return r(typeof i=="object"&&i!==null?i:s,c)}})}return r(e)}function H(e){return l.useMemo(()=>({controller:{get model(){return e.model.current},queue:[],events:e.options.props,actions:{io(t){return t},placeholder(t,r){return F(t,r,e.process.current)},produce(t){return r=>(t(z(r,e.mutations.current)),r)},dispatch([t,...r]){const n=Promise.withResolvers();return e.dispatchers.dispatch(t,r,n),n.promise}}},view:{get model(){return e.model.current},get validate(){return G(e.model.current,e.mutations.current)},events:e.options.props,actions:{dispatch([t,...r]){const n=Promise.withResolvers();return e.dispatchers.dispatch(t,r,n),n.promise}}}}),[])}function K(e){return l.useMemo(()=>{const t=e.options.controller(e.actions.controller);return Object.entries(t).forEach(([n,u])=>e.dispatchers.attach(n,u)),t},[])}function V(e){return(t,r)=>async(n=Promise.withResolvers(),u)=>{if(typeof r!="function")return;const s=Symbol(`process/${Math.random()}`);e.queue.current.add(n.promise);const c=new AbortController;try{const i={app:e.app,task:n,process:s,ƒ:r,abortController:c,payload:u,props:e},d=X(e,i);e.queue.current.size>1&&await Promise.allSettled([...e.queue.current].slice(0,-1)),d.size>0&&await Y(e,i,d),e.queue.current.delete(n.promise),n.resolve()}catch(i){console.log("hmm, error",i),e.app.appEmitter.emit(h.Error,n,[i])}}}function X(e,t){const r=new Set,n=t.ƒ(...t.payload);for(;;)try{const u=n.next();if(u.done&&typeof u.value=="function"){e.process.current=t.process;const s=u.value(t.props.model.current);return s&&(t.props.model.current=s),e.process.current=null,t.props.update.rerender(),r}e.process.current=t.process,typeof u.value=="function"&&r.add(u.value({signal:t.abortController.signal}).catch(s=>()=>{e.app.appEmitter.emit(h.Error,t.task,[s])})),e.process.current=null}catch(u){return e.app.appEmitter.emit(h.Error,t.task,[u]),new Set}}async function Y(e,t,r){(await Promise.allSettled(r)).forEach(n=>{if(e.process.current=t.process,n.status==="rejected")return;const u=typeof n.value=="function"?n.value(t.props.model.current):n;u&&(t.props.model.current=u),e.process.current=null,e.mutations.current=new Set([...e.mutations.current].filter(s=>s.process!==t.process)),t.props.update.rerender()})}function k(e){return e.startsWith("distributed")}class I extends Error{constructor(r,n=null){super(String(n));y(this,M);y(this,R);g(this,M,r),g(this,R,n)}get type(){return p(this,M)}get message(){return p(this,R)||""}}M=new WeakMap,R=new WeakMap;function Z(e){const t=U(),r=V(e);return l.useMemo(()=>{const n=new f,u=t.appEmitter;return{attach(s,c){const i=String(s);k(i)?u.on(i,r(s,c)):n.on(i,r(s,c))},dispatch(s,c,i){const d=String(s);k(d)?u.emit(d,i,c):n.emit(d,i,c)}}},[])}function ee(){const e=l.useRef(null);return l.useMemo(()=>({customElement:e}),[])}function te(e){const t=l.useRef(!1);l.useLayoutEffect(()=>{e.dispatchers.dispatch(h.Mount,[]),e.dispatchers.dispatch(h.Tree,[e.elements.customElement.current]),e.dispatchers.dispatch(h.Derive,[e.options.props])},[e.options.props]),l.useLayoutEffect(()=>{if(!t.current)return t.current=!0,()=>e.dispatchers.dispatch(h.Unmount,[])},[])}function re(e){return l.useMemo(()=>({output(t){const r=e.elements.customElement.current;console.groupCollapsed("%cRendered","background: rgb(217, 235, 240); color: rgb(0, 51, 102); border-radius: 2px; padding: 0 5px",r),console.groupEnd()}}),[])}function ne(e){return l.useRef(e.options.model)}function oe(){return l.useRef(new Set)}function ue(){return l.useRef(null)}function se(){return l.useRef(new Set)}function ce(){const[e,t]=l.useReducer(r=>r+1,0);return l.useMemo(()=>({hash:e,rerender:t}),[e])}function ie({options:e}){const t=U(),r=ce(),n=se(),u=oe(),s=ee(),c=ue(),i=ne({options:e}),d=re({options:e,elements:s}),m=Z({app:t,options:e,update:r,model:i,logger:d,queue:n,mutations:u,process:c}),P=H({app:t,options:e,model:i,dispatchers:m,mutations:u,process:c});return K({options:e,dispatchers:m,actions:P}),te({options:e,dispatchers:m,elements:s}),l.useMemo(()=>(d.output({}),l.createElement(e.name,{ref:s.customElement,children:e.view(P.view)})),[r.hash])}function le(e){return t=>l.memo(r=>ie({options:{...t,name:e.join(""),props:r}}),(r,n)=>JSON.stringify(r)===JSON.stringify(n))}function ae(e){return e}const D=class D{constructor(t){y(this,v);g(this,v,t)}static of(t){return new D(t)}map(t=n=>n,r=n=>n){return p(this,v)==null||p(this,v)instanceof Error?r(p(this,v)):t(p(this,v))}};v=new WeakMap;let O=D;function de(e){return new Promise(t=>setTimeout(t,e))}function fe(e){return e?!!(e&&typeof e!="symbol"):Symbol(`pk.${Date.now()}.${crypto.randomUUID()}`)}function me(e){return e instanceof I}const pe=Object.freeze(Object.defineProperty({__proto__:null,isEventError:me,maybe:O,pk:fe,sleep:de},Symbol.toStringTag,{value:"Module"})),he={app:L,module:le,model:x,view:ae,controller:W};o.EventError=I,o.Lifecycle=h,o.Maybe=O,o.State=S,o.create=he,o.utils=pe,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});

package/dist/controller/index.d.ts

@@ -0,0 +1,3 @@
+import { ModuleDefinition } from '../types/index.ts';
+import { ControllerDefinition } from './types.ts';
+export default function controller<M extends ModuleDefinition>(definition: ControllerDefinition<M>): ControllerDefinition<M>;

package/dist/controller/types.d.ts

@@ -0,0 +1,33 @@
+import { EventError } from '../module/renderer/dispatchers/utils.ts';
+import { Head } from '../module/renderer/types.ts';
+import { Actions, Events, Lifecycle, ModuleDefinition, Queue, State, Values } from '../types/index.ts';
+export type Produce<M extends ModuleDefinition> = void | ((model: M["Model"]) => M["Model"]);
+export type IoHelpers = {
+    signal: AbortSignal;
+};
+export type ControllerActions<M extends ModuleDefinition> = {
+    io<T>(ƒ: (helpers: IoHelpers) => T): T;
+    placeholder<T>(value: T, state: State): T;
+    produce(ƒ: (draft: M["Model"]) => void): void;
+    dispatch(event: M["Actions"]): Promise<void>;
+};
+export type ControllerArgs<M extends ModuleDefinition> = Readonly<{
+    model: Readonly<M["Model"]>;
+    queue: Readonly<Queue<M["Actions"]>>;
+    events: Readonly<Events<M["Props"]>>;
+    actions: Readonly<ControllerActions<M>>;
+}>;
+export type ActionGenerator = Generator<void | Promise<void>, void, void>;
+export type ControllerDefinition<M extends ModuleDefinition> = (controller: ControllerArgs<M>) => ControllerInstance<M>;
+export type ControllerInstance<M extends ModuleDefinition> = {
+    [Lifecycle.Mount]?(): ActionGenerator;
+    [Lifecycle.Derive]?(props: Values<M["Props"]>): ActionGenerator;
+    [Lifecycle.Tree]?(tree: HTMLElement): ActionGenerator;
+    [Lifecycle.Error]?(error: Error | EventError): ActionGenerator;
+    [Lifecycle.Unmount]?(): ActionGenerator;
+} & Partial<Handlers<M>>;
+type Handlers<M extends ModuleDefinition> = {
+    [K in Head<M["Actions"]>]: (payload: Payload<M["Actions"], K>) => ActionGenerator;
+};
+type Payload<A extends Actions, K> = A extends [K, infer P] ? P : never;
+export {};

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+import { default as app } from './app/index.tsx';
+import { default as controller } from './controller/index.ts';
+import { default as model } from './model/index.ts';
+import { default as module } from './module/index.tsx';
+import { default as view } from './view/index.ts';
+export { State, Lifecycle } from './types/index.ts';
+export { default as Maybe } from './utils/maybe/index.ts';
+export * as utils from './utils/index.ts';
+export declare const create: {
+    app: typeof app;
+    module: typeof module;
+    model: typeof model;
+    view: typeof view;
+    controller: typeof controller;
+};
+export { EventError } from './module/renderer/dispatchers/utils.ts';
+export type * as Create from './types/index.ts';
+export type { ViewArgs as Args } from './view/types.ts';
+export type { Pk } from './types/index.ts';

package/dist/model/index.d.ts

@@ -0,0 +1,2 @@
+import { Model } from '../types/index.ts';
+export default function model<M extends Model>(model: M): M;

package/dist/model/state/index.d.ts

@@ -0,0 +1,6 @@
+export default class Optimistic<T> {
+    #private;
+    constructor(actual: () => T, optimistic: T);
+    get optimistic(): T;
+    get actual(): () => T;
+}

package/dist/module/index.d.ts

@@ -0,0 +1,4 @@
+import { ModuleDefinition } from '../types/index.ts';
+import { Options } from './types.ts';
+import * as React from "react";
+export default function module<M extends ModuleDefinition>(name: TemplateStringsArray): (options: Options<M>) => React.ComponentType<M["Props"]>;

package/dist/module/renderer/actions/index.d.ts

@@ -0,0 +1,3 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { Props, UseActions } from './types.ts';
+export default function useActions<M extends ModuleDefinition>(props: Props<M>): UseActions<M>;

package/dist/module/renderer/actions/types.d.ts

@@ -0,0 +1,21 @@
+import { UseApp } from '../../../app/types.ts';
+import { ControllerArgs } from '../../../controller/types.ts';
+import { ModuleDefinition } from '../../../types/index.ts';
+import { ViewArgs } from '../../../view/types.ts';
+import { UseDispatchers } from '../dispatchers/types.ts';
+import { UseModel } from '../model/types.ts';
+import { UseMutations } from '../mutations/types.ts';
+import { UseProcess } from '../process/types.ts';
+import { UseOptions } from '../types.ts';
+export type Props<M extends ModuleDefinition> = {
+    app: UseApp;
+    options: UseOptions<M>;
+    model: UseModel;
+    dispatchers: UseDispatchers;
+    mutations: UseMutations;
+    process: UseProcess;
+};
+export type UseActions<M extends ModuleDefinition> = {
+    controller: ControllerArgs<M>;
+    view: ViewArgs<M>;
+};

package/dist/module/renderer/controller/index.d.ts

@@ -0,0 +1,3 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { Props } from './types.ts';
+export default function useController<M extends ModuleDefinition>(props: Props<M>): import('../../../controller/types.ts').ControllerInstance<M>;

package/dist/module/renderer/controller/types.d.ts

@@ -0,0 +1,11 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { UseActions } from '../actions/types.ts';
+import { UseDispatchers } from '../dispatchers/types.ts';
+import { UseOptions } from '../types.ts';
+import { default as useController } from './index.ts';
+export type Props<M extends ModuleDefinition> = {
+    actions: UseActions<M>;
+    options: UseOptions<M>;
+    dispatchers: UseDispatchers;
+};
+export type UseController = ReturnType<typeof useController>;

package/dist/module/renderer/decorate/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/module/renderer/dispatchers/index.d.ts

@@ -0,0 +1,11 @@
+import { ModuleDefinition, Task } from '../../../types/index.ts';
+import { Head, Tail } from '../types.ts';
+import { GeneratorFn, Props } from './types.ts';
+/**
+ * @param props {Props<M>}
+ * @returns { attach: (action: Head<M["Actions"]>, ƒ: F) => void; dispatch: (action: Head<M["Actions"]>, data: Tail<M["Actions"]>) => void; }
+ */
+export default function useDispatchers<M extends ModuleDefinition>(props: Props<M>): {
+    attach<F extends GeneratorFn<M>>(action: Head<M["Actions"]>, ƒ: F): void;
+    dispatch(action: Head<M["Actions"]>, data: Tail<M["Actions"]>, task?: Task): void;
+};

package/dist/module/renderer/dispatchers/types.d.ts

@@ -0,0 +1,34 @@
+import { UseApp } from '../../../app/types.ts';
+import { Produce } from '../../../controller/types.ts';
+import { ModuleDefinition } from '../../../types/index.ts';
+import { UseLogger } from '../logger/types.ts';
+import { UseModel } from '../model/types.ts';
+import { UseMutations } from '../mutations/types.ts';
+import { UseProcess } from '../process/types.ts';
+import { UseQueue } from '../queue/types.ts';
+import { Tail, UseOptions } from '../types.ts';
+import { UseUpdate } from '../update/types.ts';
+import { default as useDispatchers } from './index.ts';
+export type Props<M extends ModuleDefinition> = {
+    app: UseApp;
+    options: UseOptions<M>;
+    update: UseUpdate;
+    model: UseModel;
+    logger: UseLogger;
+    queue: UseQueue;
+    mutations: UseMutations;
+    process: UseProcess;
+};
+export type UseDispatchers = ReturnType<typeof useDispatchers>;
+export type UseDispatchHandlerProps<M extends ModuleDefinition> = Props<M>;
+export type Fn = (...args: any[]) => void;
+export type GeneratorFn<M extends ModuleDefinition> = (...args: any[]) => Generator<any, Produce<M>, any>;
+export type Context<M extends ModuleDefinition> = {
+    app: UseApp;
+    task: PromiseWithResolvers<void>;
+    process: Symbol;
+    ƒ: GeneratorFn<M>;
+    abortController: AbortController;
+    payload: Tail<M["Actions"]>;
+    props: UseDispatchHandlerProps<M>;
+};

package/dist/module/renderer/dispatchers/utils.d.ts

@@ -0,0 +1,29 @@
+import { ModuleDefinition, Task } from '../../../types/index.ts';
+import { Head, Tail } from '../types.ts';
+import { GeneratorFn, UseDispatchHandlerProps } from './types.ts';
+/**
+ * @param props {UseDispatchHandlerProps<M>}
+ * @returns {(name: Head<M["Actions"]>, ƒ: GeneratorFn<M>) => (payload: Tail<M["Actions"]>) => Promise<void>}
+ */
+export declare function useDispatcher<M extends ModuleDefinition>(props: UseDispatchHandlerProps<M>): (_name: Head<M["Actions"]>, ƒ: GeneratorFn<M>) => (task: Task | undefined, payload: Tail<M["Actions"]>) => Promise<void>;
+/**
+ * Check if the name is a broadcast event.
+ *
+ * @param name {string}
+ * @returns {boolean}
+ */
+export declare function isBroadcast(name: string): boolean;
+/**
+ * Custom error class for IO errors.
+ *
+ * @class EventError
+ * @extends Error
+ * @param type {string} - The type of the error.
+ * @param message {string} - The error message.
+ */
+export declare class EventError extends Error {
+    #private;
+    constructor(type: string, message?: null | string);
+    get type(): string;
+    get message(): string;
+}

package/dist/module/renderer/dispatchers/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/module/renderer/elements/index.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+export default function useElements(): {
+    customElement: React.RefObject<HTMLElement | null>;
+};

package/dist/module/renderer/elements/types.d.ts

@@ -0,0 +1,2 @@
+import { default as useElements } from '.';
+export type UseElements = ReturnType<typeof useElements>;

package/dist/module/renderer/elements/utils.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @returns {string}
+ */
+export declare function useCacheKey(): string;

package/dist/module/renderer/index.d.ts

@@ -0,0 +1,4 @@
+import { ModuleDefinition } from '../../types/index.ts';
+import { Props } from './types.ts';
+import { ReactElement } from 'react';
+export default function renderer<M extends ModuleDefinition>({ options, }: Props<M>): ReactElement;

package/dist/module/renderer/lifecycles/index.d.ts

@@ -0,0 +1,3 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { Props } from './types.ts';
+export default function useLifecycles<M extends ModuleDefinition>(props: Props<M>): void;

package/dist/module/renderer/lifecycles/types.d.ts

@@ -0,0 +1,11 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { UseDispatchers } from '../dispatchers/types.ts';
+import { UseElements } from '../elements/types.ts';
+import { UseOptions } from '../types.ts';
+import { default as useLifecycles } from './index.ts';
+export type Props<M extends ModuleDefinition> = {
+    options: UseOptions<M>;
+    elements: UseElements;
+    dispatchers: UseDispatchers;
+};
+export type UseLifecycles = ReturnType<typeof useLifecycles>;

package/dist/module/renderer/logger/index.d.ts

@@ -0,0 +1,5 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { Metrics, Props } from './types.ts';
+export default function useLogger<M extends ModuleDefinition>(props: Props<M>): {
+    output(_metrics: Metrics): void;
+};

package/dist/module/renderer/logger/types.d.ts

@@ -0,0 +1,10 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { UseElements } from '../elements/types.ts';
+import { UseOptions } from '../types.ts';
+import { default as useLogger } from './index.ts';
+export type Props<M extends ModuleDefinition> = {
+    options: UseOptions<M>;
+    elements: UseElements;
+};
+export type UseLogger = ReturnType<typeof useLogger>;
+export type Metrics = {};

package/dist/module/renderer/model/index.d.ts

@@ -0,0 +1,4 @@
+import { ModuleDefinition } from '../../../types/index.ts';
+import { Props } from './types.ts';
+import * as React from "react";
+export default function useModel<M extends ModuleDefinition>(props: Props<M>): React.RefObject<M["Model"]>;

package/dist/module/renderer/model/types.d.ts

@@ -0,0 +1,7 @@
+import { default as useModel } from '.';
+import { ModuleDefinition } from '../../../types/index.ts';
+import { UseOptions } from '../types.ts';
+export type Props<M extends ModuleDefinition> = {
+    options: UseOptions<M>;
+};
+export type UseModel = ReturnType<typeof useModel>;

package/dist/module/renderer/mutations/index.d.ts

@@ -0,0 +1,3 @@
+import { Mutations } from './types';
+import * as React from "react";
+export default function useMutations(): React.RefObject<Mutations>;

package/dist/module/renderer/mutations/types.d.ts

@@ -0,0 +1,11 @@
+import { State } from '../../../types/index.ts';
+import { Process } from '../process/types.ts';
+import { default as useMutations } from './index.ts';
+export type UseMutations = ReturnType<typeof useMutations>;
+export type Mutation<T> = {
+    key: null | symbol | string;
+    value: T;
+    state: State;
+    process: Process;
+};
+export type Mutations = Set<Mutation<unknown>>;

package/dist/module/renderer/process/index.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export default function useProcess(): React.RefObject<Symbol | null>;

package/dist/module/renderer/process/types.d.ts

@@ -0,0 +1,3 @@
+import { default as useProcess } from '.';
+export type Process = Symbol;
+export type UseProcess = ReturnType<typeof useProcess>;

package/dist/module/renderer/queue/index.d.ts

@@ -0,0 +1,2 @@
+import * as React from "react";
+export default function useQueue(): React.RefObject<Set<Promise<void>>>;

package/dist/module/renderer/queue/types.d.ts

@@ -0,0 +1,2 @@
+import { default as useQueue } from '.';
+export type UseQueue = ReturnType<typeof useQueue>;

package/dist/module/renderer/types.d.ts

@@ -0,0 +1,12 @@
+import { ModuleDefinition } from '../../types/index.ts';
+import { Options } from '../types.ts';
+export type ElementName = string;
+export type Props<M extends ModuleDefinition> = {
+    options: UseOptions<M>;
+};
+export type UseOptions<M extends ModuleDefinition> = Options<M> & {
+    name: ElementName;
+    props: M["Props"];
+};
+export type Head<T extends any[]> = T extends [infer First, ...any[]] ? First : never;
+export type Tail<T extends any[]> = T extends [any, ...infer Rest] ? Rest : never;

package/dist/module/renderer/update/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export default function useUpdate(): {
+    hash: number;
+    rerender: React.ActionDispatch<[]>;
+};

package/dist/module/renderer/update/types.d.ts

@@ -0,0 +1,2 @@
+import { default as useUpdate } from '.';
+export type UseUpdate = ReturnType<typeof useUpdate>;

package/dist/module/types.d.ts

@@ -0,0 +1,9 @@
+import { ControllerDefinition } from '../controller/types.ts';
+import { ModuleDefinition } from '../types/index.ts';
+import { ViewDefinition } from '../view/types.ts';
+export type ElementName = string;
+export type Options<M extends ModuleDefinition> = {
+    model: M["Model"];
+    view: ViewDefinition<M>;
+    controller: ControllerDefinition<M>;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,59 @@
+import { Head } from '../module/renderer/types.ts';
+export declare const enum Transmit {
+    Unicast = "unicast",
+    Multicast = "multicast",
+    Broadcast = "broadcast"
+}
+export declare const enum State {
+    Idle = 0,
+    Pending = 1,
+    Adding = 2,
+    Removing = 4,
+    Updating = 8,
+    Moving = 16
+}
+export type ActionName = Lifecycle | string | number;
+type ActionPayload = [any, ...any[]];
+export type Actions = [ActionName] | [ActionName, ...ActionPayload];
+export type Model = Record<string, any>;
+export type Parameters = undefined | string;
+export declare const enum Lifecycle {
+    Mount = "lifecycle/mount",
+    Tree = "lifecycle/tree",
+    Derive = "lifecycle/derive",
+    Error = "distributed/lifecycle/error",
+    Unmount = "lifecycle/unmount"
+}
+export type Name<A extends Actions> = A[0];
+export type Props = Record<string, unknown>;
+export type Module<M extends Model, A extends Actions, P extends Props = {}> = {
+    Model: M;
+    Actions: A;
+    Props: P;
+};
+export type ModuleDefinition = {
+    Model: Model;
+    Actions: Actions;
+    Props: Props;
+};
+type Fns<P extends Props> = {
+    [K in keyof P]: P[K] extends (...args: any[]) => any ? P[K] : never;
+};
+type NonFns<P extends Props> = {
+    [K in keyof P]: P[K] extends (...args: any[]) => any ? never : P[K];
+};
+export type Events<P extends Props> = {
+    [K in keyof Fns<P> as Fns<P>[K] extends never ? never : K]: Fns<P>[K];
+};
+export type Values<P extends Props> = {
+    [K in keyof NonFns<P> as NonFns<P>[K] extends never ? never : K]: NonFns<P>[K];
+};
+export type Pk<T> = undefined | Symbol | T;
+export type Queue<A extends ModuleDefinition["Actions"]> = {
+    event: Head<A>;
+    actions: {
+        abort: AbortController["abort"];
+    };
+}[];
+export type Task = PromiseWithResolvers<void>;
+export {};

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+import { EventError } from '../module/renderer/dispatchers/utils.ts';
+import { Pk } from '../types/index.ts';
+export { default as sleep } from './sleep/index.ts';
+export { default as maybe } from './maybe/index.ts';
+export declare function pk<T>(): Symbol;
+export declare function pk<T>(id: Pk<T>): boolean;
+export declare function isEventError(error: Error | EventError): error is EventError;

package/dist/utils/maybe/index.d.ts

@@ -0,0 +1,11 @@
+type Otherwise = null | undefined | Error;
+type Value<T> = Exclude<T, Otherwise>;
+export default class Maybe<T> {
+    #private;
+    static of<T>(value: T): Maybe<T>;
+    constructor(value: T);
+    map<U>(unwrap?: never, otherwise?: never): T;
+    map<U>(unwrap?: (value: Value<T>) => U, otherwise?: never): T | U;
+    map<U, V>(unwrap?: (value: Value<T>) => U, otherwise?: (value: Otherwise) => V): U | V;
+}
+export {};

package/dist/utils/maybe/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/placeholder/index.d.ts

@@ -0,0 +1,30 @@
+import { Mutations } from '../../module/renderer/mutations/types.ts';
+import { Process } from '../../module/renderer/process/types.ts';
+import { ModuleDefinition, State } from '../../types/index.ts';
+import { Validator } from '../../view/types.ts';
+/**
+ * Create a placeholder for a value that is being processed.
+ *
+ * @param value {T}
+ * @param state {State}
+ * @param process {null | Process}
+ * @returns {T}
+ */
+export declare function placeholder<T>(value: T, state: State, process: null | Process): T;
+/**
+ * Observe a model for changes and track mutations to determine the state of a mutation.
+ *
+ * @param model {M}
+ * @param mutations {Mutations}
+ * @returns {M}
+ */
+export declare function observe<M extends ModuleDefinition["Model"]>(model: M, mutations: Mutations): M;
+/**
+ * Validate a model against mutations to determine the state of a mutation and provide
+ * immediate feedback in the form of optimistic updates.
+ *
+ * @param model {M}
+ * @param mutations {Mutations}
+ * @returns {Validator<M>}
+ */
+export declare function validate<M extends ModuleDefinition["Model"]>(model: M, mutations: Mutations): Validator<M>;

package/dist/utils/placeholder/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/placeholder/utils.d.ts

@@ -0,0 +1,10 @@
+import { Process } from '../../module/renderer/process/types.ts';
+import { State } from '../../types/index.ts';
+export declare const unwrap: unique symbol;
+export declare class Placeholder<T> {
+    #private;
+    constructor(primitive: T, state: State, process: null | Process);
+    value(): T;
+    state(): State;
+    process(): null | Process;
+}

package/dist/utils/sleep/index.d.ts

@@ -0,0 +1 @@
+export default function sleep(ms: number): Promise<void>;

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import { ModuleDefinition } from '../types/index.ts';
+import { ViewDefinition } from './types.ts';
+export default function view<M extends ModuleDefinition>(definition: ViewDefinition<M>): ViewDefinition<M>;

package/dist/view/types.d.ts

@@ -0,0 +1,17 @@
+import { Events, Model, ModuleDefinition, State } from '../types/index.ts';
+import * as React from "react";
+export type Validator<M extends Model> = {
+    [P in keyof M]: Validator<M[P]> & {
+        is(state: State): boolean;
+    };
+};
+export type ViewActions<M extends ModuleDefinition> = {
+    dispatch(event: M["Actions"]): Promise<void>;
+};
+export type ViewArgs<M extends ModuleDefinition> = Readonly<{
+    model: Readonly<M["Model"]>;
+    events: Readonly<Events<M["Props"]>>;
+    validate: Readonly<Validator<M["Model"]>>;
+    actions: Readonly<ViewActions<M>>;
+}>;
+export type ViewDefinition<M extends ModuleDefinition> = (actions: ViewArgs<M>) => React.ReactNode;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "chizu",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/chizu.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/chizu.js",
+      "require": "./dist/chizu.umd.cjs"
+    }
+  },
+  "dependencies": {
+    "eventemitter3": "^5.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
+    "@emotion/css": "^11.13.5",
+    "@jest/globals": "^29.7.0",
+    "@playwright/test": "^1.51.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/pubsub-js": "^1.8.6",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "dayjs": "^1.11.13",
+    "dexie": "^4.0.11",
+    "get-port-cli": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lucide-react": "^0.503.0",
+    "playwright": "^1.51.1",
+    "prettier": "^3.4.2",
+    "react-test-renderer": "^19.0.0",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "ts-jest": "^29.2.6",
+    "ts-node": "^10.9.2",
+    "typescript": "~5.7.3",
+    "vite": "^6.0.5",
+    "vite-plugin-dts": "^4.5.3",
+    "wait-on": "^8.0.3"
+  }
+}