@typed/ui 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/index.js

@@ -1,2 +1,51 @@
+/**
+ * Typed UI: DOM-cooperative components built on Effect, Fx, Router, and Template.
+ *
+ * @remarks
+ * Namespace exports group related component families while direct exports expose
+ * the component constructor, HTTP SSR adapters, and navigation link. The DOM is
+ * the integration boundary: hosts receive real nodes, events, attributes, refs,
+ * and web-standard behavior. Running Effect Scopes own subscriptions and cleanup.
+ *
+ * @since 1.0.0
+ * @category ui
+ */
+export * as Button from "./Button.js";
+export * as Alert from "./Alert.js";
+export * as Checkbox from "./Checkbox.js";
+export * as Carousel from "./Carousel.js";
+export * as Collection from "./Collection.js";
+export * as Combobox from "./Combobox.js";
+export * from "./Component.js";
+export * as Composite from "./Composite.js";
+export * as Dialog from "./Dialog.js";
+export * as Disclosure from "./Disclosure.js";
+export * as Dom from "./Dom.js";
+export * as Focusable from "./Focusable.js";
+export * as Form from "./Form.js";
+export * as Group from "./Group.js";
+export * as Grid from "./Grid.js";
+export * as Heading from "./Heading.js";
+export * as Hovercard from "./Hovercard.js";
 export * from "./HttpRouter.js";
 export * from "./Link.js";
+export * as Listbox from "./Listbox.js";
+export * as Menu from "./Menu.js";
+export * as Menubar from "./Menubar.js";
+export * as Meter from "./Meter.js";
+export * as Role from "./Role.js";
+export * as RadioGroup from "./RadioGroup.js";
+export * as Popover from "./Popover.js";
+export * as Separator from "./Separator.js";
+export * as Select from "./Select.js";
+export * as Slider from "./Slider.js";
+export * as SpinButton from "./SpinButton.js";
+export * as Switch from "./Switch.js";
+export * as Tooltip from "./Tooltip.js";
+export * as Toolbar from "./Toolbar.js";
+export * as Tree from "./Tree.js";
+export * as TreeGrid from "./TreeGrid.js";
+export * as Tab from "./Tab.js";
+export * as Tabs from "./Tabs.js";
+export * as VisuallyHidden from "./VisuallyHidden.js";
+export * as WindowSplitter from "./WindowSplitter.js";

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@typed/ui",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
+  "description": "Web integration for Typed routing, templates, and Effect HTTP.",
+  "license": "MIT",
+  "homepage": "https://github.com/TylorS/typed-smol/tree/main/packages/ui#readme",
+  "bugs": "https://github.com/TylorS/typed-smol/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TylorS/typed-smol.git",
+    "directory": "packages/ui"
+  },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "type": "module",
   "exports": {
@@ -19,22 +27,41 @@
   "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:"
+    "@typed/fx": "2.0.0-beta.5",
+    "@typed/id": "1.0.0-beta.5",
+    "@typed/navigation": "1.0.0-beta.5",
+    "@typed/router": "1.0.0-beta.5",
+    "@typed/template": "1.0.0-beta.5",
+    "effect": "4.0.0-rc.112"
   },
   "devDependencies": {
-    "typescript": "catalog:",
-    "vitest": "catalog:"
+    "@effect/platform-node": "4.0.0-rc.112",
+    "@storybook/addon-a11y": "10.6.0",
+    "@storybook/addon-vitest": "10.6.0",
+    "@storybook/html-vite": "10.6.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@vitest/browser-playwright": "5.0.0",
+    "@vitest/coverage-v8": "5.0.0",
+    "daisyui": "^5.7.28",
+    "happy-dom": "20.13.2",
+    "playwright": "^1.62.1",
+    "storybook": "10.6.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "7.0.2",
+    "vitest": "5.0.0"
+  },
+  "scripts": {
+    "build": "node -e \"const fs=require('node:fs'); fs.rmSync('dist',{recursive:true,force:true}); fs.rmSync('tsconfig.tsbuildinfo',{force:true})\" && tsc",
+    "test": "pnpm run test:types && pnpm run test:node && pnpm run test:browser && pnpm run test:storybook",
+    "test:node": "vitest run --config vitest.config.ts --project=node",
+    "test:browser": "vitest run --config vitest.browser.config.ts --project firefox && vitest run --config vitest.browser.config.ts --project chromium && vitest run --config vitest.browser.config.ts --project webkit",
+    "test:types": "tsc -p tsconfig.type-tests.json && tsc -p tsconfig.tests.json && tsc -p tsconfig.stories.json",
+    "storybook": "storybook dev --ci --port 6006",
+    "storybook:build": "storybook build",
+    "storybook:serve": "vite preview --outDir storybook-static --port 6007 --strictPort",
+    "test:storybook": "vitest run --config vitest.config.ts --project=storybook",
+    "test:storybook:coverage": "vitest run --config vitest.config.ts --project=storybook --coverage",
+    "test:a11y": "pnpm run test:storybook"
   }
-}
+}

package/src/HttpRouter.test.ts

@@ -1,256 +0,0 @@
-import { NodeHttpServer } from "@effect/platform-node";
-import { assert, describe, it } from "vitest";
-import { Effect, Layer } from "effect";
-import { Fx } from "@typed/fx";
-import { Ids } from "@typed/id";
-import { Navigation } from "@typed/navigation";
-import { CurrentRoute } from "@typed/router/CurrentRoute";
-import * as Matcher from "@typed/router/Matcher";
-import * as Route from "@typed/router/Route";
-import { html, StaticHtmlRenderTemplate } from "@typed/template";
-import { handleHttpServerError, ssrForHttp } from "./HttpRouter.js";
-import { HttpClient, HttpRouter } from "effect/unstable/http";
-
-describe("typed/ui/HttpRouter", () => {
-  it("renders simple html template", () => {
-    const matcher = Matcher.empty.match(Route.Parse("home"), html` <div>Hello, world!</div> `);
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/home").pipe(Effect.flatMap((r) => r.text));
-      assert.strictEqual(response, "<div>Hello, world!</div>");
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("renders html template with route params", () => {
-    const users = Route.Join(Route.Parse("users"), Route.Param("id"));
-    const matcher = Matcher.empty.match(
-      users,
-      (params) => html`<div>User ${params.pipe(Fx.map((p) => p.id))}</div>`,
-    );
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/users/123").pipe(Effect.flatMap((r) => r.text));
-      assert.strictEqual(response, "<div>User 123</div>");
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("renders html template with search params", () => {
-    const route = Route.Parse("search");
-    const matcher = Matcher.empty.match(route, html` <div>Search results</div> `);
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/search?q=test").pipe(Effect.flatMap((r) => r.text));
-      assert.strictEqual(response, "<div>Search results</div>");
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("handles multiple routes", () => {
-    const home = Route.Parse("home");
-    const about = Route.Parse("about");
-    const matcher = Matcher.empty
-      .match(home, html` <div>Home</div> `)
-      .match(about, html` <div>About</div> `);
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const homeResponse = yield* HttpClient.get("/home").pipe(Effect.flatMap((r) => r.text));
-      assert.strictEqual(homeResponse, "<div>Home</div>");
-      const aboutResponse = yield* HttpClient.get("/about").pipe(Effect.flatMap((r) => r.text));
-      assert.strictEqual(aboutResponse, "<div>About</div>");
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("returns 404 for unmatched routes", () => {
-    const matcher = Matcher.empty.match(Route.Parse("home"), html` <div>Home</div> `);
-    const Live = HttpRouter.use(
-      Effect.fn(function* (router) {
-        yield* ssrForHttp(router, matcher);
-        yield* handleHttpServerError(router);
-      }),
-    ).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/notfound");
-      assert.strictEqual(response.status, 404);
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("renders dynamic content from Effect", () => {
-    const matcher = Matcher.empty.match(
-      Route.Parse("dynamic"),
-      html`<div>Value: ${Effect.succeed("42")}</div>`,
-    );
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-      Layer.provide(StaticHtmlRenderTemplate),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/dynamic").pipe(Effect.flatMap((r) => r.text));
-      assert.strictEqual(response, "<div>Value: 42</div>");
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("sets correct content-type header", () => {
-    const matcher = Matcher.empty.match(Route.Parse("home"), html` <div>Hello</div> `);
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/home");
-      const contentType = response.headers["content-type"];
-      assert.strictEqual(contentType, "text/html; charset=utf-8");
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("handles nested routes", () => {
-    const users = Route.Join(Route.Parse("api"), Route.Parse("users"));
-    const user = Route.Join(users, Route.Param("id"));
-    const matcher = Matcher.empty
-      .match(users, html` <div>Users list</div> `)
-      .match(user, (params) => html`<div>User ${params.pipe(Fx.map((p) => p.id))}</div>`);
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const listResponse = yield* HttpClient.get("/api/users").pipe(Effect.flatMap((r) => r.text));
-      assert.strictEqual(listResponse, "<div>Users list</div>");
-      const userResponse = yield* HttpClient.get("/api/users/456").pipe(
-        Effect.flatMap((r) => r.text),
-      );
-      assert.strictEqual(userResponse, "<div>User 456</div>");
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("provides Navigation with correct base and origin", () => {
-    const matcher = Matcher.empty.match(
-      Route.Parse("test"),
-      Fx.gen(function* () {
-        const origin = yield* Navigation.origin;
-        const base = yield* Navigation.base;
-        const currentEntry = yield* Navigation.currentEntry;
-        return html`<div
-          data-origin="${origin}"
-          data-base="${base}"
-          data-url="${currentEntry.url.href}"
-        ></div>`;
-      }),
-    );
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/test").pipe(Effect.flatMap((r) => r.text));
-      assert.ok(response.includes('data-origin="http://localhost"'));
-      assert.ok(response.includes('data-base="/"'));
-      assert.ok(response.includes('data-url="http://localhost/test"'));
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("provides CurrentRoute with correct route path", () => {
-    const matcher = Matcher.empty.match(
-      Route.Parse("users"),
-      Fx.gen(function* () {
-        const currentRoute = yield* CurrentRoute;
-        return html`<div data-path="${currentRoute.route.path}"></div>`;
-      }),
-    );
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/users").pipe(Effect.flatMap((r) => r.text));
-      assert.ok(response.includes('data-path="/users"'));
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("provides CurrentRoute with no parent for root routes", () => {
-    const matcher = Matcher.empty.match(
-      Route.Parse("home"),
-      Fx.gen(function* () {
-        const currentRoute = yield* CurrentRoute;
-        const hasParent = currentRoute.parent !== undefined;
-        return html`<div data-has-parent="${hasParent}"></div>`;
-      }),
-    );
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/home").pipe(Effect.flatMap((r) => r.text));
-      assert.ok(response.includes('data-has-parent="false"'));
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("provides CurrentRoute with parent for nested routes", () => {
-    const api = Route.Parse("api");
-    const users = Route.Parse("users");
-    const matcher = Matcher.empty.match(Route.Slash, html` <div>API</div> `).match(
-      users,
-      Fx.gen(function* () {
-        const currentRoute = yield* CurrentRoute;
-        const hasParent = currentRoute.parent !== undefined;
-        const parentPath = currentRoute.parent?.route.path ?? "none";
-        return html`<div data-has-parent="${hasParent}" data-parent-path="${parentPath}"></div>`;
-      }),
-    );
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-      Layer.provide(CurrentRoute.extend(api)),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/api/users").pipe(Effect.flatMap((r) => r.text));
-      assert.ok(response.includes('data-has-parent="true"'));
-      assert.ok(response.includes('data-parent-path="/api"'));
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-
-  it("provides Navigation with correct currentEntry for different paths", () => {
-    const matcher = Matcher.empty.match(
-      Route.Parse("about"),
-      Fx.gen(function* () {
-        const currentEntry = yield* Navigation.currentEntry;
-        return html`<div data-pathname="${currentEntry.url.pathname}"></div>`;
-      }),
-    );
-    const Live = HttpRouter.use(ssrForHttp(matcher)).pipe(
-      Layer.provide(StaticHtmlRenderTemplate),
-      HttpRouter.serve,
-      Layer.provideMerge([Ids.Test(), NodeHttpServer.layerTest]),
-    );
-    return Effect.gen(function* () {
-      const response = yield* HttpClient.get("/about").pipe(Effect.flatMap((r) => r.text));
-      assert.ok(response.includes('data-pathname="/about"'));
-    }).pipe(Effect.provide(Live), Effect.scoped, Effect.runPromise);
-  });
-});

package/src/HttpRouter.ts

@@ -1,165 +0,0 @@
-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 Context from "effect/Context";
-import { type HttpRouter, type Route, 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 {
-  type CurrentRouteTree,
-  type CompiledEntry,
-  compile,
-  CurrentRoute,
-  makeCatchManager,
-  makeLayerManager,
-  makeLayoutManager,
-  type Matcher,
-  Join,
-  Parse,
-  type Router,
-} from "@typed/router";
-import { initialMemory } from "@typed/navigation";
-import { renderToHtmlString, type RenderEvent } from "@typed/template";
-
-type ProvidedForSsr = Scope.Scope | Router;
-
-export 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>>;
-} = dual(2, <E, R>(router: HttpRouter, input: Matcher<RenderEvent, E, R>) => {
-  return Effect.gen(function* () {
-    const matcher = Option.match(yield* Effect.serviceOption(CurrentRoute), {
-      onNone: () => input,
-      onSome: (parent: CurrentRouteTree) => input.prefix(parent.route),
-    });
-    const entries = compile(matcher.cases);
-    const currentServices = yield* Effect.context<R>();
-
-    yield* router.addAll(entries.map((e: CompiledEntry) => toRoute(e, currentServices)));
-  });
-});
-
-export function handleHttpServerError(router: HttpRouter) {
-  return router.addGlobalMiddleware(
-    Effect.catch((error: unknown) =>
-      HttpServerError.isHttpServerError(error)
-        ? Effect.succeed(HttpServerResponse.text(error.message, { status: getStatus(error) }))
-        : Effect.fail(error),
-    ),
-  );
-}
-
-function getStatus(error: HttpServerError.HttpServerError): number {
-  switch (error.reason._tag) {
-    case "RouteNotFound":
-      return 404;
-    case "RequestParseError":
-      return 400;
-    case "InternalError":
-    case "ResponseError":
-      return 500;
-  }
-}
-
-function toRoute(entry: CompiledEntry, currentServices: Context.Context<never>): Route<any, any> {
-  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: (): CurrentRouteTree => ({
-                  route: Parse(request.url),
-                  parent: undefined,
-                }),
-                onSome: (parent: CurrentRouteTree): CurrentRouteTree => ({
-                  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.provideContext(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 as Context.Context<any>;
-      const handlerServices = Context.merge(
-        Context.merge(currentServices, preparedServices),
-        Context.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.provideContext(handlerServices),
-      );
-      return HttpServerResponse.text(html, {
-        headers: { "content-type": "text/html; charset=utf-8" },
-      });
-    }),
-    uninterruptible: false,
-    prefix: Option.none(),
-  };
-}

package/src/Link.test.ts

@@ -1,84 +0,0 @@
-import { assert, describe, it } from "vitest";
-import { Effect } from "effect";
-import * as Layer from "effect/Layer";
-import { Fx } from "@typed/fx";
-import { CurrentPath } from "@typed/navigation";
-import { ServerRouter } from "@typed/router/Router";
-import { DomRenderTemplate, render } from "@typed/template";
-import { Link } from "./Link.js";
-import { Window } from "happy-dom";
-
-describe("typed/ui/Link", () => {
-  it("renders <a> with href and content", () =>
-    Effect.gen(function* () {
-      const [window, layer] = createHappyDomLayer();
-
-      const [root] = yield* render(
-        Link({ href: "/about", content: "Go to about" }),
-        window.document.body,
-      ).pipe(Fx.provide(layer), Fx.take(1), Fx.collectAll);
-
-      assert(root instanceof window.HTMLElement);
-      const anchor = root as HTMLAnchorElement;
-      assert(anchor.tagName === "A");
-      assert(anchor.getAttribute("href") === "/about");
-      assert(anchor.textContent === "Go to about");
-    }).pipe(Effect.scoped, Effect.runPromise));
-
-  it("intercepts same-origin click and navigates", () => {
-    const [window, layer] = createHappyDomLayer({ url: "http://localhost/" });
-    return Effect.gen(function* () {
-      const [root] = yield* render(
-        Link({ href: "/about", content: "Go" }),
-        window.document.body,
-      ).pipe(Fx.take(1), Fx.collectAll);
-
-      assert(root instanceof window.HTMLElement);
-      const anchor = root as HTMLAnchorElement;
-      assert(anchor.tagName === "A");
-
-      const pathBefore = yield* CurrentPath;
-      anchor.click();
-      yield* Effect.sleep(50);
-      const pathAfter = yield* CurrentPath;
-
-      assert(pathBefore === "/" || pathBefore === "");
-      assert(pathAfter === "/about");
-    }).pipe(Effect.provide(layer), Effect.scoped, Effect.runPromise);
-  });
-
-  it("does not intercept when modifier key is pressed", () => {
-    const [window, layer] = createHappyDomLayer();
-    return Effect.gen(function* () {
-      const [root] = yield* render(
-        Link({ href: "/other", content: "Go" }),
-        window.document.body,
-      ).pipe(Fx.take(1), Fx.collectAll);
-
-      assert(root instanceof window.HTMLElement);
-      const anchor = root as HTMLAnchorElement;
-      assert(anchor.tagName === "A");
-
-      const ev = new window.MouseEvent("click", {
-        bubbles: true,
-        cancelable: true,
-        ctrlKey: true,
-      });
-      anchor.dispatchEvent(ev);
-      yield* Effect.sleep(50);
-      const pathAfter = yield* CurrentPath;
-
-      assert(pathAfter === "/" || pathAfter === "");
-    }).pipe(Effect.provide(layer), Effect.scoped, Effect.runPromise);
-  });
-});
-
-function createHappyDomLayer(...params: ConstructorParameters<typeof Window>) {
-  const window = new Window(...params) as unknown as globalThis.Window & typeof globalThis;
-  const domLayer = DomRenderTemplate.using(window.document);
-  const opts = params[0] as { url?: string } | undefined;
-  const url = opts?.url ?? "http://localhost/";
-  const routerLayer = ServerRouter({ url });
-  const layer = domLayer.pipe(Layer.merge(routerLayer));
-  return [window, layer] as const;
-}