@typed/ui 0.14.0 → 1.0.0-beta.1

package/README.md

@@ -1,5 +1,107 @@
 # @typed/ui
 
-> WIP
+> **Beta:** This package is in beta; APIs may change.
 
-Docs: https://tylors.github.io/typed/docs/ui
+`@typed/ui` is the **web integration layer** for `@typed/router` and `@typed/template`. It bridges typed-smol's routing and template system with the browser and Effect's HTTP stack.
+
+## Capabilities
+
+- **Link** — A typed anchor component that intercepts same-origin clicks and navigates via `Navigation.navigate` instead of a full page reload. Keeps routing SPA-style while preserving normal `<a>` semantics (href, target, keyboard, right-click).
+- **SSR** — `ssrForHttp` compiles a router Matcher into HttpRouter GET handlers for server-side rendering. Requests are parsed, matched, and the corresponding Fx is rendered to HTML. `handleHttpServerError` adds global middleware for 404/400/500.
+
+## Dependencies
+
+- `effect`
+- `@effect/platform-node`
+- `@typed/fx`
+- `@typed/navigation`
+- `@typed/router`
+- `@typed/template`
+- `happy-dom` (dev)
+
+## API overview
+
+- **Link** — `Link(options)` renders an `<a href="...">` that intercepts same-origin, same-document clicks and calls `Navigation.navigate` instead of a full page load. Options include `href`, `content`, `replace`, and standard anchor props. Requires **Navigation** and **RenderTemplate** in context (e.g. browser router).
+- **SSR:** `ssrForHttp(router, matcher)` — registers route handlers on an Effect **HttpRouter** for server-side rendering; `handleHttpServerError(router)` — global middleware for HTTP server errors.
+
+## API reference
+
+### `Link`
+
+Renders an `<a href="...">` that intercepts same-origin, same-document clicks and navigates via `Navigation.navigate` instead of a full page load. Requires **Navigation** and **RenderTemplate** in the Effect context (e.g. `BrowserRouter`).
+
+```ts
+function Link<const Opts extends LinkOptions>(
+  options: Opts,
+): Fx<
+  RenderEvent,
+  Renderable.ErrorFromObject<Opts>,
+  Renderable.ServicesFromObject<Opts> | Scope | RenderTemplate
+>;
+```
+
+**`LinkOptions`**
+
+| Property  | Type                                                                                            | Required | Description                                                       |
+| --------- | ----------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------------------------- |
+| `href`    | `Renderable<string, any, any>`                                                                  | Yes      | Target URL.                                                       |
+| `content` | `Renderable<string \| number \| boolean \| null \| undefined \| void \| RenderEvent, any, any>` | Yes      | Link body (text or template content).                             |
+| `replace` | `boolean`                                                                                       | No       | If `true`, use history replace instead of push. Default: `false`. |
+
+In addition, `LinkOptions` accepts standard anchor event handlers (e.g. `onclick`), `ref`, and other writable `HTMLAnchorElement` properties. Custom `onclick` runs first; if the event is not `preventDefault`'d, the built-in navigation handler runs.
+
+---
+
+### `ssrForHttp`
+
+Registers route handlers on an Effect **HttpRouter** for server-side rendering. The matcher's routes are compiled and each case is exposed as a GET route; requests are parsed, matched, and the corresponding Fx is rendered to HTML. Requires **Router** and **Scope** to be provided elsewhere; other matcher services remain in the effect requirement.
+
+**Overloads:**
+
+```ts
+// (router, matcher)
+function ssrForHttp<E, R>(
+  router: HttpRouter,
+  input: Matcher<RenderEvent, E, R>,
+): Effect.Effect<void, never, Exclude<R, Scope | Router>>;
+
+// (matcher)(router) — curried
+function ssrForHttp<E, R>(
+  input: Matcher<RenderEvent, E, R>,
+): (router: HttpRouter) => Effect.Effect<void, never, Exclude<R, Scope | Router>>;
+```
+
+- **`router`** — Effect `HttpRouter` to attach GET handlers to.
+- **`input`** — A **Matcher** from `@typed/router` whose cases produce `RenderEvent` Fx (e.g. templates). Route path and query params are decoded and passed to the handler; `Scope` and `Router` are provided by the SSR pipeline.
+
+---
+
+### `handleHttpServerError`
+
+Adds global middleware to an **HttpRouter** that catches `HttpServerError` and returns appropriate HTTP responses:
+
+| Error reason                      | Status |
+| --------------------------------- | ------ |
+| `RouteNotFound`                   | 404    |
+| `RequestParseError`               | 400    |
+| `InternalError` / `ResponseError` | 500    |
+
+```ts
+function handleHttpServerError(router: HttpRouter): Effect.Effect<void, never, HttpRouter>;
+```
+
+Use after registering routes (e.g. after `ssrForHttp`) so unhandled route and parse errors are converted to 404/400/500 instead of failing the server.
+
+## Example
+
+```ts
+import { Link } from "@typed/ui";
+import { html } from "@typed/template";
+
+// In a template: link that navigates via Navigation (no full reload)
+const nav = html`<nav>
+  ${Link({ href: "/", content: "Home" })} ${Link({ href: "/todos", content: "Todos" })}
+</nav>`;
+```
+
+For SSR, provide the router and matcher to `ssrForHttp` when setting up the HTTP server; see Effect's `HttpRouter` and the TodoMVC example structure.

package/dist/HttpRouter.d.ts

@@ -0,0 +1,13 @@
+import * as Effect from "effect/Effect";
+import * as Scope from "effect/Scope";
+import { type HttpRouter } from "effect/unstable/http/HttpRouter";
+import { type Matcher, type Router } from "@typed/router";
+import { type RenderEvent } from "@typed/template";
+type ProvidedForSsr = Scope.Scope | Router;
+export declare const ssrForHttp: {
+    <E, R>(input: Matcher<RenderEvent, E, R>): (router: HttpRouter) => Effect.Effect<void, never, Exclude<R, ProvidedForSsr>>;
+    <E, R>(router: HttpRouter, input: Matcher<RenderEvent, E, R>): Effect.Effect<void, never, Exclude<R, ProvidedForSsr>>;
+};
+export declare function handleHttpServerError(router: HttpRouter): Effect.Effect<void, never, import("effect/unstable/http/HttpRouter").Request<"GlobalError", unknown>>;
+export {};
+//# sourceMappingURL=HttpRouter.d.ts.map

package/dist/HttpRouter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HttpRouter.d.ts","sourceRoot":"","sources":["../src/HttpRouter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAKxC,OAAO,KAAK,KAAK,MAAM,cAAc,CAAC;AAEtC,OAAO,EAAE,KAAK,UAAU,EAA4B,MAAM,iCAAiC,CAAC;AAK5F,OAAO,EAQL,KAAK,OAAO,EAGZ,KAAK,MAAM,EACZ,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEvE,KAAK,cAAc,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;AAE3C,eAAO,MAAM,UAAU,EAAE;IACvB,CAAC,CAAC,EAAE,CAAC,EACH,KAAK,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,GAChC,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;IAClF,CAAC,CAAC,EAAE,CAAC,EACH,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC,GAChC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC,CAAC;CAY1D,CAAC;AAEH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,UAAU,yGAQvD"}

package/dist/HttpRouter.js

@@ -0,0 +1,99 @@
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import { dual } from "effect/Function";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as Scope from "effect/Scope";
+import * as ServiceMap from "effect/ServiceMap";
+import { RouteContext } from "effect/unstable/http/HttpRouter";
+import * as HttpServerError from "effect/unstable/http/HttpServerError";
+import * as HttpServerRequest from "effect/unstable/http/HttpServerRequest";
+import * as HttpServerResponse from "effect/unstable/http/HttpServerResponse";
+import { RefSubject } from "@typed/fx";
+import { compile, CurrentRoute, makeCatchManager, makeLayerManager, makeLayoutManager, Join, Parse, } from "@typed/router";
+import { initialMemory } from "@typed/navigation";
+import { renderToHtmlString } from "@typed/template";
+export const ssrForHttp = dual(2, (router, input) => {
+    return Effect.gen(function* () {
+        const matcher = Option.match(yield* Effect.serviceOption(CurrentRoute), {
+            onNone: () => input,
+            onSome: (parent) => input.prefix(parent.route),
+        });
+        const entries = compile(matcher.cases);
+        const currentServices = yield* Effect.services();
+        yield* router.addAll(entries.map((e) => toRoute(e, currentServices)));
+    });
+});
+export function handleHttpServerError(router) {
+    return router.addGlobalMiddleware(Effect.catch((error) => HttpServerError.isHttpServerError(error)
+        ? Effect.succeed(HttpServerResponse.text(error.message, { status: getStatus(error) }))
+        : Effect.fail(error)));
+}
+function getStatus(error) {
+    switch (error.reason._tag) {
+        case "RouteNotFound":
+            return 404;
+        case "RequestParseError":
+            return 400;
+        case "InternalError":
+        case "ResponseError":
+            return 500;
+    }
+}
+function toRoute(entry, currentServices) {
+    return {
+        ["~effect/http/HttpRouter/Route"]: "~effect/http/HttpRouter/Route",
+        method: "GET",
+        path: entry.route.path,
+        handler: Effect.gen(function* () {
+            const fiberId = yield* Effect.fiberId;
+            const rootScope = yield* Effect.scope;
+            const routeContext = yield* RouteContext;
+            const request = yield* HttpServerRequest.HttpServerRequest;
+            const searchParams = yield* HttpServerRequest.ParsedSearchParams;
+            const provided = Layer.mergeAll(initialMemory({ url: request.url }), Layer.succeed(CurrentRoute, yield* Effect.serviceOption(CurrentRoute).pipe(Effect.map(Option.match({
+                onNone: () => ({
+                    route: Parse(request.url),
+                    parent: undefined,
+                }),
+                onSome: (parent) => ({
+                    route: Join(parent.route, Parse(request.url)),
+                    parent,
+                }),
+            })))));
+            const input = { ...routeContext.params, ...searchParams };
+            const params = yield* Effect.mapError(entry.decode(input), (cause) => new HttpServerError.HttpServerError({
+                reason: new HttpServerError.RequestParseError({ request, cause }),
+            }));
+            const memoMap = yield* Layer.makeMemoMap;
+            const layerManager = makeLayerManager(memoMap, rootScope, fiberId);
+            const layoutManager = makeLayoutManager(rootScope, fiberId);
+            const catchManager = makeCatchManager(rootScope, fiberId);
+            const prepared = yield* layerManager.prepare(entry.layers.concat(provided));
+            const guardExit = yield* entry
+                .guard(params)
+                .pipe(Effect.provideServices(prepared.services), Effect.exit);
+            if (Exit.isFailure(guardExit) || Option.isNone(guardExit.value)) {
+                yield* prepared.rollback;
+                return yield* new HttpServerError.HttpServerError({
+                    reason: new HttpServerError.RouteNotFound({ request }),
+                });
+            }
+            const matchedParams = guardExit.value.value;
+            yield* prepared.commit;
+            const scope = yield* Scope.fork(rootScope);
+            const paramsRef = yield* RefSubject.make(matchedParams).pipe(Scope.provide(scope));
+            const preparedServices = prepared.services;
+            const handlerServices = ServiceMap.merge(ServiceMap.merge(currentServices, preparedServices), ServiceMap.make(Scope.Scope, scope));
+            const handlerFx = entry.handler(paramsRef);
+            const withLayouts = yield* layoutManager.apply(entry.layouts, matchedParams, handlerFx, preparedServices);
+            const withCatches = yield* catchManager.apply(entry.catches, withLayouts, preparedServices);
+            const html = yield* renderToHtmlString(withCatches).pipe(Effect.provideServices(handlerServices));
+            return HttpServerResponse.text(html, {
+                headers: { "content-type": "text/html; charset=utf-8" },
+            });
+        }),
+        uninterruptible: false,
+        prefix: undefined,
+    };
+}

package/dist/Link.d.ts

@@ -0,0 +1,36 @@
+import * as Effect from "effect/Effect";
+import type { Scope } from "effect/Scope";
+import type { Stream } from "effect/Stream";
+import { type Fx } from "@typed/fx/Fx";
+import { EventHandler, type Renderable, type RenderEvent, type RenderTemplate } from "@typed/template";
+type EventHandlerProperty = `on${string}`;
+type AnchorEventHandlers = {
+    readonly [K in keyof HTMLAnchorElement as K extends EventHandlerProperty ? K : never]?: Effect.Effect<unknown, any, any> | EventHandler.EventHandler<Event, any, any>;
+};
+type AnchorRef = {
+    readonly ref?: (element: HTMLAnchorElement) => void | Effect.Effect<unknown, any, any> | Stream<unknown, any, any> | Fx<unknown, any, any>;
+};
+type IfEquals<X, Y, Output> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? Output : never;
+type WritableKeys<T> = {
+    [P in keyof T]-?: IfEquals<{
+        [Q in P]: T[P];
+    }, {
+        -readonly [Q in P]: T[P];
+    }, P>;
+}[keyof T];
+type AnchorProperties = {
+    readonly [K in WritableKeys<HTMLAnchorElement> as K extends EventHandlerProperty | "ref" ? never : K]?: Renderable<HTMLAnchorElement[K], any, any>;
+};
+export interface LinkOptions extends AnchorEventHandlers, AnchorRef, AnchorProperties {
+    readonly href: Renderable<string, any, any>;
+    readonly content: Renderable<string | number | boolean | null | undefined | void | RenderEvent, any, any>;
+    readonly replace?: boolean;
+}
+/**
+ * Renders an `<a href="...">` that intercepts same-origin, same-document clicks
+ * and navigates via `Navigation.navigate` instead of full page load. Requires
+ * `Navigation` and `RenderTemplate` in the Effect context (e.g. `BrowserRouter`).
+ */
+export declare function Link<const Opts extends LinkOptions>(options: Opts): Fx<RenderEvent, Renderable.ErrorFromObject<Opts>, Renderable.ServicesFromObject<Opts> | Scope | RenderTemplate>;
+export {};
+//# sourceMappingURL=Link.d.ts.map

package/dist/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../src/Link.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AACxC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,EAAO,MAAM,cAAc,CAAC;AAG5C,OAAO,EACL,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,cAAc,EAEpB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,oBAAoB,GAAG,KAAK,MAAM,EAAE,CAAC;AAE1C,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,CAAC,IAAI,MAAM,iBAAiB,IAAI,CAAC,SAAS,oBAAoB,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,EAClF,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAChC,YAAY,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC;CAC/C,CAAC;AAEF,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,GAAG,CAAC,EAAE,CACb,OAAO,EAAE,iBAAiB,KACvB,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;CAClG,CAAC;AAEF,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,IACxB,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,GAAG,KAAK,CAAC;AAEvF,KAAK,YAAY,CAAC,CAAC,IAAI;KACpB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC;SAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAAE,EAAE;QAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAAE,EAAE,CAAC,CAAC;CAChF,CAAC,MAAM,CAAC,CAAC,CAAC;AAEX,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,CAAC,IAAI,YAAY,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,oBAAoB,GAAG,KAAK,GACpF,KAAK,GACL,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC;CACpD,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,mBAAmB,EAAE,SAAS,EAAE,gBAAgB;IACnF,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;IAC5C,QAAQ,CAAC,OAAO,EAAE,UAAU,CAC1B,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,WAAW,EACjE,GAAG,EACH,GAAG,CACJ,CAAC;IACF,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;CAC5B;AAyBD;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS,WAAW,EACjD,OAAO,EAAE,IAAI,GACZ,EAAE,CACH,WAAW,EACX,UAAU,CAAC,eAAe,CAAC,IAAI,CAAC,EAChC,UAAU,CAAC,kBAAkB,CAAC,IAAI,CAAC,GAAG,KAAK,GAAG,cAAc,CAC7D,CAqBA"}

package/dist/Link.js

@@ -0,0 +1,45 @@
+import * as Effect from "effect/Effect";
+import { gen } from "@typed/fx/Fx";
+import { RefSubject } from "@typed/fx/RefSubject";
+import { getUrl, Navigation } from "@typed/navigation";
+import { EventHandler, html, } from "@typed/template";
+function makeLinkClickHandler(replace$) {
+    return EventHandler.make((ev) => Effect.gen(function* () {
+        const href = ev.currentTarget.href;
+        if (ev.ctrlKey || ev.metaKey || ev.shiftKey)
+            return;
+        const t = ev.currentTarget.target;
+        if (t && t !== "_self")
+            return;
+        const nav = yield* Navigation;
+        const target = getUrl(nav.origin, href);
+        if (target.origin !== nav.origin)
+            return;
+        ev.preventDefault();
+        const replace = yield* replace$;
+        yield* nav.navigate(href, { history: replace ? "replace" : "push" });
+    }));
+}
+/**
+ * Renders an `<a href="...">` that intercepts same-origin, same-document clicks
+ * and navigates via `Navigation.navigate` instead of full page load. Requires
+ * `Navigation` and `RenderTemplate` in the Effect context (e.g. `BrowserRouter`).
+ */
+export function Link(options) {
+    return gen(function* () {
+        const { replace = false, onclick, content: children, ...rest } = options;
+        const replace$ = yield* RefSubject.make(replace);
+        const navigationHandler = makeLinkClickHandler(replace$);
+        const userHandler = onclick ? EventHandler.fromEffectOrEventHandler(onclick) : undefined;
+        const clickHandler = userHandler
+            ? EventHandler.make(Effect.fn(function* (ev) {
+                yield* userHandler.handler(ev);
+                if (ev.defaultPrevented)
+                    return;
+                yield* navigationHandler.handler(ev);
+            }), { ...userHandler.options, preventDefault: true })
+            : navigationHandler;
+        const props = { ...rest, onclick: clickHandler };
+        return html `<a ...${props}>${children}</a>`;
+    });
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./HttpRouter.js";
+export * from "./Link.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./HttpRouter.js";
+export * from "./Link.js";

package/package.json

@@ -1,90 +1,40 @@
 {
   "name": "@typed/ui",
-  "version": "0.14.0",
-  "description": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tylors/typed.git"
-  },
-  "sideEffects": [],
-  "author": "Typed contributors",
-  "homepage": "https://github.com/tylors/typed",
-  "dependencies": {
-    "@effect/platform": "^0.66.2",
-    "@effect/schema": "^0.74.1",
-    "csstype": "^3.1.3",
-    "effect": "^3.8.4",
-    "@typed/context": "0.30.0",
-    "@typed/dom": "18.0.0",
-    "@typed/environment": "0.11.0",
-    "@typed/fx": "1.32.0",
-    "@typed/navigation": "0.18.0",
-    "@typed/route": "9.0.0",
-    "@typed/router": "0.32.0",
-    "@typed/template": "0.14.0"
-  },
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/dts/index.d.ts",
+  "version": "1.0.0-beta.1",
+  "type": "module",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
-      "types": "./dist/dts/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/cjs/index.js"
-    },
-    "./Link": {
-      "types": "./dist/dts/Link.d.ts",
-      "import": "./dist/esm/Link.js",
-      "default": "./dist/cjs/Link.js"
-    },
-    "./Props": {
-      "types": "./dist/dts/Props.d.ts",
-      "import": "./dist/esm/Props.js",
-      "default": "./dist/cjs/Props.js"
-    },
-    "./dom-properties": {
-      "types": "./dist/dts/dom-properties.d.ts",
-      "import": "./dist/esm/dom-properties.js",
-      "default": "./dist/cjs/dom-properties.js"
-    },
-    "./hyperscript": {
-      "types": "./dist/dts/hyperscript.d.ts",
-      "import": "./dist/esm/hyperscript.js",
-      "default": "./dist/cjs/hyperscript.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
-    "./useClickAway": {
-      "types": "./dist/dts/useClickAway.d.ts",
-      "import": "./dist/esm/useClickAway.js",
-      "default": "./dist/cjs/useClickAway.js"
-    },
-    "./usePagination": {
-      "types": "./dist/dts/usePagination.d.ts",
-      "import": "./dist/esm/usePagination.js",
-      "default": "./dist/cjs/usePagination.js"
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
     }
   },
-  "typesVersions": {
-    "*": {
-      "Link": [
-        "./dist/dts/Link.d.ts"
-      ],
-      "Props": [
-        "./dist/dts/Props.d.ts"
-      ],
-      "dom-properties": [
-        "./dist/dts/dom-properties.d.ts"
-      ],
-      "hyperscript": [
-        "./dist/dts/hyperscript.d.ts"
-      ],
-      "useClickAway": [
-        "./dist/dts/useClickAway.d.ts"
-      ],
-      "usePagination": [
-        "./dist/dts/usePagination.d.ts"
-      ]
-    }
-  }
-}
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "[ -d dist ] || rm -f tsconfig.tsbuildinfo; tsc",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@effect/platform-node": "catalog:",
+    "@typed/fx": "workspace:*",
+    "@typed/id": "workspace:*",
+    "@typed/navigation": "workspace:*",
+    "@typed/router": "workspace:*",
+    "@typed/template": "workspace:*",
+    "effect": "catalog:",
+    "happy-dom": "catalog:"
+  },
+  "devDependencies": {
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
+}