@zitadel/sdk-solid 1.0.0-alpha.24 → 1.0.0-alpha.28

package/README.md

@@ -2,9 +2,17 @@
 
 Solid components for the Zitadel auth UI, for client-side SPAs (Vite, etc.).
 
+## Installation
+
+```bash
+pnpm add @zitadel/sdk-solid@alpha
+```
+
 ## Requirements
 
-TypeScript ≥ 5.0 — the published type definitions re-export with `export type *`, which TypeScript introduced in 5.0.
+Peer dependencies: `solid-js >=1.6`.
+
+TypeScript ≥ 5.0, the floor shared by every SDK; see the [compatibility notes](https://github.com/zitadel/nextgen/blob/main/packages/AGENTS.md).
 
 ## Usage
 
@@ -23,10 +31,60 @@ export default function LoginPage() {
 
 `<ZitadelLogout project={project} postSignOutUrl="/login" />` works the same way.
 
+`ZitadelLogin` also takes `resumeFlowId`, an existing flow to resume instead of starting a new one; unset, `null` or `""` falls back to the `flow` query parameter.
+
 The signed-in session card is `<ZitadelSession project={project} />` (exported as `ZitadelSession`).
 
-The widget's flow events are also surfaced as optional callbacks:
-`onFlowStep`, `onFlowInput`, `onFlowComplete`, and `onFlowError`.
+## Widget props and events
+
+`ZitadelLogin`, `ZitadelLogout` and `ZitadelSession` take the props below, spelled the same in every SPA SDK. An unset prop keeps the widget's own default.
+
+| Prop | Type | Default | Widgets | Description |
+| --- | --- | --- | --- | --- |
+| `project` | `ZitadelProject` | unset | Login, Logout, Session | The handle from `configureZitadel(...)`. Wins over `projectId` and `proxyPath`. |
+| `projectId` | `string` | unset | Login, Logout, Session | Project id, read when no `project` handle is passed. |
+| `proxyPath` | `string` | `"/__nextgen"` | Login, Logout, Session | Same-origin path the widget calls. |
+| `purpose` | `CreateFlowBodyPurpose` | `"login"` | Login | Flow purpose. |
+| `flowName` | `string` | unset | Login | Runs the flow definition with this `name`; unset runs the project's default flow for the purpose. |
+| `postSignInUrl` | `string` | unset | Login | Where to navigate after a completed sign-in. When the page's `next` query parameter names a path on the same origin, as the server SDKs' middleware sets it for a signed-out visit to a protected route, the widget returns there instead. |
+| `forcePostSignInUrl` | `boolean` | `false` | Login | Navigates to `postSignInUrl` even when the page's `next` query parameter names a path, for a page that uses `next` for something of its own. |
+| `postSignOutUrl` | `string` | unset | Logout, Session | Where to navigate after sign-out. |
+| `resumeFlowId` | `string` or `null` | unset | Login | An existing flow's id to resume instead of starting a new flow; unset, `null` or `""` falls back to the `flow` query parameter, and an id that no longer resolves starts a new flow. |
+| `variant` | `"widget"` or `"page"` | `"widget"` | Login, Session | `widget` is content-sized and paints no page chrome; `page` claims the viewport, paints the surface background and loads the brand font, and on Login focuses the first field. |
+| `theme` | `"light"`, `"dark"` or `"auto"` | unset | Login, Logout, Session | Colour mode. Unset follows the tenant's branding theme on Login, then the variant default (`dark` for `page`, `auto` for `widget`); Logout defaults to `auto`. `auto` follows `prefers-color-scheme`. |
+| `suppressHeader` | `boolean` | `false` | Login, Session | Visually hides the widget's own heading block while keeping it in the accessibility tree, for pages that already carry the heading. |
+| `suppressPasswordToggle` | `boolean` | `false` | Login | Hides the show/hide button on password fields. |
+| `heading` | `string` | `"Signed in as"` | Session | Heading text override. |
+| `logoutLabel` | `string` | `"Sign out"` | Session | Logout action label override. |
+| `locales` | `Record<string, Partial<Record<string, string>>>` | unset | Login | Copy overrides merged over the builtin dictionaries, keyed by primary language subtag, for example `{ en: { "identifier.title": "Welcome back" } }`. |
+| `lang` | `string` | browser language | Login | BCP-47 language override. |
+
+Each widget event reaches the callback in the last column, which receives the event's `detail` payload.
+
+| Widget event | Fires when | Detail | Widgets | Callback |
+| --- | --- | --- | --- | --- |
+| `zitadel-flow-step` | Login shows a step, the first one included. | `{ step }` | Login | `onFlowStep` |
+| `zitadel-flow-input` | The visitor edits a field. | `{ name, value }` | Login | `onFlowInput` |
+| `zitadel-flow-complete` | The flow reaches a terminal step. | `{ behavior, redirect_uri?, handoff_token?, handoff_token_expires_at? }` | Login | `onFlowComplete` |
+| `zitadel-flow-redirect` | The widget hands the browser to an identity provider; nobody is signed in yet. | `{ redirect_url, step }` | Login | `onFlowRedirect` |
+| `zitadel-flow-error` | The flow reports an error. | `{ message }` | Login | `onFlowError` |
+| `zitadel-signout` | The user signs out. | `{ display, identifier }` | Logout, Session | `onSignout` |
+
+```tsx
+<ZitadelLogin project={project} theme="light" onFlowComplete={(detail) => track(detail)} />
+```
+
+## Standard HTML attributes
+
+`ZitadelLogin`, `ZitadelLogout` and `ZitadelSession` also take the standard HTML attributes (`class`, `style`, `id`, `title`, `slot`, `hidden`, `role`, `tabindex`, `data-*` and `aria-*`) and pass them to the widget element, so you can position, style and label the widget without an extra wrapper element. Nothing else reaches the element: any other prop is ignored.
+
+```tsx
+<ZitadelLogin project={project} class="login" data-testid="login" aria-label="Sign in" />
+```
+
+## Server rendering
+
+If your app renders on the server, mount the widget on the client only, after hydration, or pass `projectId` and `proxyPath` to the `ZitadelLogin` wrapper as strings (it writes them as the `project-id` and `proxy-path` attributes; use those hyphenated names only on a raw `<zitadel-login>` element), because a widget that starts before its configuration arrives shows an error instead of the flow.
 
 ## Proxying to the backend (deployment)
 

package/dist/index.d.ts

@@ -1,42 +1,49 @@
 import { ZitadelLogin as ZitadelLoginElement, ZitadelLogout as ZitadelLogoutElement, ZitadelSession as ZitadelSessionElement } from '@zitadel/components';
 import { JSX } from 'solid-js';
+import { widgetTags } from '@zitadel/sdk-core/types';
 import { configureZitadel, getApi, getZitadelConfig, ZitadelConfig, ZitadelProject } from '@zitadel/api/config';
-import { ZitadelFlowCompleteDetail, ZitadelFlowErrorDetail, ZitadelFlowInputDetail, ZitadelFlowStepDetail, ZitadelLoginProps, ZitadelLogoutProps, ZitadelSessionProps, ZitadelSignoutDetail } from './types';
+import { ZitadelFlowCompleteDetail, ZitadelFlowRedirectDetail, ZitadelFlowErrorDetail, ZitadelFlowInputDetail, ZitadelFlowStepDetail, ZitadelLoginProps, ZitadelLogoutProps, ZitadelSessionProps, ZitadelSignoutDetail, ZitadelWidgetAttributes } from './types';
 declare module "solid-js" {
     namespace JSX {
         interface IntrinsicElements {
-            "zitadel-login": Omit<HTMLAttributes<HTMLElement>, "ref"> & {
+            [widgetTags.login]: Omit<HTMLAttributes<HTMLElement>, "ref"> & {
                 ref?: ZitadelLoginElement | ((el: ZitadelLoginElement) => void);
                 "prop:project"?: ZitadelProject;
                 "prop:locales"?: Record<string, Partial<Record<string, string>>>;
                 "prop:lang"?: string;
                 "project-id"?: string;
                 "proxy-path"?: string;
+                url?: string;
                 purpose?: string;
                 "flow-name"?: string;
                 "post-sign-in-url"?: string;
+                "prop:forcePostSignInUrl"?: boolean;
                 variant?: "widget" | "page";
                 theme?: "light" | "dark" | "auto";
                 "prop:suppressHeader"?: boolean;
+                "prop:suppressPasswordToggle"?: boolean;
                 "on:zitadel-flow-step"?: (event: CustomEvent<ZitadelFlowStepDetail>) => void;
                 "on:zitadel-flow-input"?: (event: CustomEvent<ZitadelFlowInputDetail>) => void;
                 "on:zitadel-flow-complete"?: (event: CustomEvent<ZitadelFlowCompleteDetail>) => void;
+                "on:zitadel-flow-redirect"?: (event: CustomEvent<ZitadelFlowRedirectDetail>) => void;
                 "on:zitadel-flow-error"?: (event: CustomEvent<ZitadelFlowErrorDetail>) => void;
             };
-            "zitadel-logout": Omit<HTMLAttributes<HTMLElement>, "ref"> & {
+            [widgetTags.logout]: Omit<HTMLAttributes<HTMLElement>, "ref"> & {
                 ref?: ZitadelLogoutElement | ((el: ZitadelLogoutElement) => void);
                 "prop:project"?: ZitadelProject;
                 "project-id"?: string;
                 "proxy-path"?: string;
+                url?: string;
                 "post-sign-out-url"?: string;
                 theme?: "light" | "dark" | "auto";
                 "on:zitadel-signout"?: (event: CustomEvent<ZitadelSignoutDetail>) => void;
             };
-            "zitadel-session": Omit<HTMLAttributes<HTMLElement>, "ref"> & {
+            [widgetTags.session]: Omit<HTMLAttributes<HTMLElement>, "ref"> & {
                 ref?: ZitadelSessionElement | ((el: ZitadelSessionElement) => void);
                 "prop:project"?: ZitadelProject;
                 "project-id"?: string;
                 "proxy-path"?: string;
+                url?: string;
                 "post-sign-out-url"?: string;
                 heading?: string;
                 "logout-label"?: string;
@@ -48,6 +55,18 @@ declare module "solid-js" {
         }
     }
 }
+/** Props of `ZitadelLogin`: the widget's own plus the standard HTML attributes. */
+export type ZitadelLoginSolidProps = ZitadelLoginProps & ZitadelWidgetAttributes & {
+    ref?: ZitadelLoginElement | ((el: ZitadelLoginElement) => void);
+};
+/** Props of `ZitadelLogout`: the widget's own plus the standard HTML attributes. */
+export type ZitadelLogoutSolidProps = ZitadelLogoutProps & ZitadelWidgetAttributes & {
+    ref?: ZitadelLogoutElement | ((el: ZitadelLogoutElement) => void);
+};
+/** Props of `ZitadelSession`: the widget's own plus the standard HTML attributes. */
+export type ZitadelSessionSolidProps = ZitadelSessionProps & ZitadelWidgetAttributes & {
+    ref?: ZitadelSessionElement | ((el: ZitadelSessionElement) => void);
+};
 export { configureZitadel, getApi, getZitadelConfig };
 export type { ZitadelConfig, ZitadelProject };
 export * from './types';
@@ -61,9 +80,7 @@ export { businessLocales } from '@zitadel/components';
  * A forwarded `ref` resolves to the underlying `<zitadel-login>` DOM element,
  * so consumers can imperatively access the upgraded web component.
  */
-export declare function ZitadelLogin(props: ZitadelLoginProps & {
-    ref?: ZitadelLoginElement | ((el: ZitadelLoginElement) => void);
-}): JSX.Element;
+export declare function ZitadelLogin(props: ZitadelLoginSolidProps): JSX.Element;
 /**
  * Solid component wrapping the `<zitadel-logout>` web component. Binds the
  * {@link ZitadelProject} handle as a DOM property (or the discrete project id /
@@ -73,9 +90,7 @@ export declare function ZitadelLogin(props: ZitadelLoginProps & {
  * A forwarded `ref` resolves to the underlying `<zitadel-logout>` DOM element,
  * so consumers can imperatively access the upgraded web component.
  */
-export declare function ZitadelLogout(props: ZitadelLogoutProps & {
-    ref?: ZitadelLogoutElement | ((el: ZitadelLogoutElement) => void);
-}): JSX.Element;
+export declare function ZitadelLogout(props: ZitadelLogoutSolidProps): JSX.Element;
 /**
  * Solid component wrapping the `<zitadel-session>` web component — the
  * post-sign-in "signed in as" card. Binds the {@link ZitadelProject} handle as
@@ -84,7 +99,5 @@ export declare function ZitadelLogout(props: ZitadelLogoutProps & {
  *
  * A forwarded `ref` resolves to the underlying `<zitadel-session>` DOM element.
  */
-export declare function ZitadelSession(props: ZitadelSessionProps & {
-    ref?: ZitadelSessionElement | ((el: ZitadelSessionElement) => void);
-}): JSX.Element;
+export declare function ZitadelSession(props: ZitadelSessionSolidProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,74 +1,121 @@
-import { addEventListener as d, use as h, getOwner as m, effect as s, template as w } from "solid-js/web";
-import { businessLocales as F } from "@zitadel/components";
-import { configureZitadel as b, getApi as C, getZitadelConfig as E } from "@zitadel/api/config";
-var x = /* @__PURE__ */ w("<zitadel-login>", !0, !1, !1), y = /* @__PURE__ */ w("<zitadel-logout>", !0, !1, !1), z = /* @__PURE__ */ w("<zitadel-session>", !0, !1, !1);
-function L(i) {
-  return (() => {
-    var t = x();
-    d(t, "zitadel-flow-error", (e) => i.onFlowError?.(e.detail)), d(t, "zitadel-flow-complete", (e) => i.onFlowComplete?.(e.detail)), d(t, "zitadel-flow-input", (e) => i.onFlowInput?.(e.detail)), d(t, "zitadel-flow-step", (e) => i.onFlowStep?.(e.detail));
-    var o = i.ref;
-    return typeof o == "function" ? h(o, t) : i.ref = t, t._$owner = m(), s((e) => {
-      var a = i.project, n = i.locales, r = i.lang, l = i.projectId, v = i.proxyPath, u = i.purpose ?? "login", f = i.flowName, g = i.postSignInUrl, c = i.variant, j = i.theme, S = i.suppressHeader;
-      return a !== e.e && (t.project = e.e = a), n !== e.t && (t.locales = e.t = n), r !== e.a && (t.lang = e.a = r), l !== e.o && (t.projectId = e.o = l), v !== e.i && (t.proxyPath = e.i = v), u !== e.n && (t.purpose = e.n = u), f !== e.s && (t.flowName = e.s = f), g !== e.h && (t.postSignInUrl = e.h = g), c !== e.r && (t.variant = e.r = c), j !== e.d && (t.theme = e.d = j), S !== e.l && (t.suppressHeader = e.l = S), e;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0,
-      d: void 0,
-      l: void 0
-    }), t;
-  })();
+import { Dynamic as e, createComponent as t, mergeProps as n } from "solid-js/web";
+import { businessLocales as r } from "@zitadel/components";
+import { standardAttributes as i, widgetTags as a } from "@zitadel/sdk-core/types";
+import { configureZitadel as o, getApi as s, getZitadelConfig as c } from "@zitadel/api/config";
+//#region src/index.tsx
+function l(e) {
+	let t = e.project?.proxyPath ?? e.proxyPath;
+	return {
+		"project-id": e.project?.projectId ?? e.projectId,
+		"proxy-path": t === "" ? "/" : t,
+		url: e.project?.url
+	};
 }
-function P(i) {
-  return (() => {
-    var t = y();
-    d(t, "zitadel-signout", (e) => i.onSignout?.(e.detail));
-    var o = i.ref;
-    return typeof o == "function" ? h(o, t) : i.ref = t, t._$owner = m(), s((e) => {
-      var a = i.project, n = i.projectId, r = i.proxyPath, l = i.postSignOutUrl, v = i.theme;
-      return a !== e.e && (t.project = e.e = a), n !== e.t && (t.projectId = e.t = n), r !== e.a && (t.proxyPath = e.a = r), l !== e.o && (t.postSignOutUrl = e.o = l), v !== e.i && (t.theme = e.i = v), e;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0
-    }), t;
-  })();
+function u(r) {
+	return t(e, n({ get component() {
+		return a.login;
+	} }, () => i(r, "attr:"), {
+		ref(e) {
+			var t = r.ref;
+			typeof t == "function" ? t(e) : r.ref = e;
+		},
+		get "prop:project"() {
+			return r.project;
+		},
+		get "prop:locales"() {
+			return r.locales;
+		},
+		get "prop:lang"() {
+			return r.lang;
+		}
+	}, () => l(r), {
+		get purpose() {
+			return r.purpose ?? "login";
+		},
+		get "flow-name"() {
+			return r.flowName;
+		},
+		get "post-sign-in-url"() {
+			return r.postSignInUrl;
+		},
+		get "prop:forcePostSignInUrl"() {
+			return r.forcePostSignInUrl;
+		},
+		get "resume-flow-id"() {
+			return r.resumeFlowId;
+		},
+		get variant() {
+			return r.variant;
+		},
+		get theme() {
+			return r.theme;
+		},
+		get "prop:suppressHeader"() {
+			return r.suppressHeader;
+		},
+		get "prop:suppressPasswordToggle"() {
+			return r.suppressPasswordToggle;
+		},
+		"on:zitadel-flow-step": (e) => r.onFlowStep?.(e.detail),
+		"on:zitadel-flow-input": (e) => r.onFlowInput?.(e.detail),
+		"on:zitadel-flow-complete": (e) => r.onFlowComplete?.(e.detail),
+		"on:zitadel-flow-redirect": (e) => r.onFlowRedirect?.(e.detail),
+		"on:zitadel-flow-error": (e) => r.onFlowError?.(e.detail)
+	}));
 }
-function U(i) {
-  return (() => {
-    var t = z();
-    d(t, "zitadel-signout", (e) => i.onSignout?.(e.detail));
-    var o = i.ref;
-    return typeof o == "function" ? h(o, t) : i.ref = t, t._$owner = m(), s((e) => {
-      var a = i.project, n = i.projectId, r = i.proxyPath, l = i.postSignOutUrl, v = i.heading, u = i.logoutLabel, f = i.variant, g = i.theme, c = i.suppressHeader;
-      return a !== e.e && (t.project = e.e = a), n !== e.t && (t.projectId = e.t = n), r !== e.a && (t.proxyPath = e.a = r), l !== e.o && (t.postSignOutUrl = e.o = l), v !== e.i && (t.heading = e.i = v), u !== e.n && (t.logoutLabel = e.n = u), f !== e.s && (t.variant = e.s = f), g !== e.h && (t.theme = e.h = g), c !== e.r && (t.suppressHeader = e.r = c), e;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0,
-      o: void 0,
-      i: void 0,
-      n: void 0,
-      s: void 0,
-      h: void 0,
-      r: void 0
-    }), t;
-  })();
+function d(r) {
+	return t(e, n({ get component() {
+		return a.logout;
+	} }, () => i(r, "attr:"), {
+		ref(e) {
+			var t = r.ref;
+			typeof t == "function" ? t(e) : r.ref = e;
+		},
+		get "prop:project"() {
+			return r.project;
+		}
+	}, () => l(r), {
+		get "post-sign-out-url"() {
+			return r.postSignOutUrl;
+		},
+		get theme() {
+			return r.theme;
+		},
+		"on:zitadel-signout": (e) => r.onSignout?.(e.detail)
+	}));
 }
-export {
-  L as ZitadelLogin,
-  P as ZitadelLogout,
-  U as ZitadelSession,
-  F as businessLocales,
-  b as configureZitadel,
-  C as getApi,
-  E as getZitadelConfig
-};
+function f(r) {
+	return t(e, n({ get component() {
+		return a.session;
+	} }, () => i(r, "attr:"), {
+		ref(e) {
+			var t = r.ref;
+			typeof t == "function" ? t(e) : r.ref = e;
+		},
+		get "prop:project"() {
+			return r.project;
+		}
+	}, () => l(r), {
+		get "post-sign-out-url"() {
+			return r.postSignOutUrl;
+		},
+		get heading() {
+			return r.heading;
+		},
+		get "logout-label"() {
+			return r.logoutLabel;
+		},
+		get variant() {
+			return r.variant;
+		},
+		get theme() {
+			return r.theme;
+		},
+		get "prop:suppressHeader"() {
+			return r.suppressHeader;
+		},
+		"on:zitadel-signout": (e) => r.onSignout?.(e.detail)
+	}));
+}
+//#endregion
+export { u as ZitadelLogin, d as ZitadelLogout, f as ZitadelSession, r as businessLocales, o as configureZitadel, s as getApi, c as getZitadelConfig };

package/dist/types.d.ts

@@ -1,3 +1,5 @@
+import { StandardAttributeProps } from '@zitadel/sdk-core/types';
+import { JSX } from 'solid-js';
 /**
  * Re-exports the shared SPA widget types from `@zitadel/sdk-core`.
  *
@@ -7,4 +9,10 @@
  * of the browser SDK surface.
  */
 export type * from '@zitadel/sdk-core/types';
+/**
+ * The standard HTML attributes a widget wrapper accepts besides its own props,
+ * and nothing else, so no prop the type accepts is dropped. They are passed to
+ * the widget element.
+ */
+export type ZitadelWidgetAttributes = StandardAttributeProps<JSX.HTMLAttributes<HTMLElement>>;
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,mBAAmB,yBAAyB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACtE,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAEpC;;;;;;;GAOG;AACH,mBAAmB,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,CAAC,GAAG,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zitadel/sdk-solid",
-  "version": "1.0.0-alpha.24",
+  "version": "1.0.0-alpha.28",
   "description": "Solid components for the Zitadel auth UI (client-side SPA).",
   "homepage": "https://github.com/zitadel/nextgen/tree/main/packages/sdk-solid#readme",
   "bugs": {
@@ -26,42 +26,35 @@
     "access": "public"
   },
   "dependencies": {
-    "@zitadel/api": "1.0.0-alpha.24",
-    "@zitadel/components": "1.0.0-alpha.24",
-    "@zitadel/sdk-core": "1.0.0-alpha.24"
+    "@zitadel/api": "1.0.0-alpha.28",
+    "@zitadel/components": "1.0.0-alpha.28",
+    "@zitadel/sdk-core": "1.0.0-alpha.28"
   },
   "peerDependencies": {
     "solid-js": ">=1.6"
   },
   "devDependencies": {
-    "@eslint/js": "^9.0.0",
-    "@eslint/json": "^0.11.0",
-    "@eslint/markdown": "^6.0.0",
+    "@edge-runtime/vm": "^5.0.0",
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.0.0",
-    "@vitest/coverage-v8": "^3.2.7",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "^10.0.0",
-    "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-perfectionist": "^4.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-solid": "^0.14.5",
+    "@types/node": "^24.19.1",
+    "@vitest/coverage-v8": "^4.1.11",
+    "@zitadel/api-mock": "0.0.0",
     "jsdom": "^29.0.2",
-    "prettier": "^3.0.0",
-    "solid-js": "^1.9.12",
+    "msw": "^2.14.6",
+    "solid-js": "^1.9.16",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.0.0",
-    "vite": "^7.3.5",
-    "vite-plugin-dts": "^4.5.0",
+    "vite": "^8.3.1",
+    "vite-plugin-dts": "^5.1.2",
     "vite-plugin-solid": "^2.11.0",
-    "vitest": "^3.2.7"
+    "vitest": "^4.1.11"
   },
   "scripts": {
     "build": "vite build",
-    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "typecheck": "tsc --noEmit -p tsconfig.lib.json && tsc --noEmit -p tsconfig.spec.json",
     "test": "vitest run",
     "test:all": "pnpm run test",
-    "lint": "eslint ."
+    "lint": "biome check .",
+    "build-release": "node ../../scripts/release-clean.mjs local-dist && pnpm run build"
   }
 }

package/dist/test-setup.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=test-setup.d.ts.map

package/dist/test-setup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"test-setup.d.ts","sourceRoot":"","sources":["../src/test-setup.ts"],"names":[],"mappings":""}