@hexdspace/react 0.1.8 → 0.1.9

package/dist/index.js

@@ -15,6 +15,26 @@ var ui = {
 // src/util/responsive-query/use-responsive-mutation.ts
 import { useMutation } from "@tanstack/react-query";
 
+// src/feature/notifier/application/use-case/send-notification-use-case.ts
+var SendNotificationUseCase = class {
+  constructor(bus2) {
+    this.bus = bus2;
+  }
+  async execute(channel, notification) {
+    this.bus.publish(channel, notification);
+  }
+};
+
+// src/feature/notifier/application/use-case/subscribe-use-case.ts
+var SubscribeUseCase = class {
+  constructor(bus2) {
+    this.bus = bus2;
+  }
+  async execute(channel, observer) {
+    return this.bus.subscribe(channel, observer);
+  }
+};
+
 // src/feature/notifier/entity/notification-bus.ts
 var NotificationBus = class {
   channels = /* @__PURE__ */ new Map();
@@ -51,26 +71,6 @@ var NotificationBus = class {
   }
 };
 
-// src/feature/notifier/application/use-case/send-notification-use-case.ts
-var SendNotificationUseCase = class {
-  constructor(bus2) {
-    this.bus = bus2;
-  }
-  async execute(channel, notification) {
-    this.bus.publish(channel, notification);
-  }
-};
-
-// src/feature/notifier/application/use-case/subscribe-use-case.ts
-var SubscribeUseCase = class {
-  constructor(bus2) {
-    this.bus = bus2;
-  }
-  async execute(channel, observer) {
-    return this.bus.subscribe(channel, observer);
-  }
-};
-
 // src/feature/notifier/infra/controllers/notifier-controller.ts
 var NotifierController = class {
   constructor(sender, subscriber) {
@@ -91,15 +91,87 @@ var notifierController = new NotifierController(sendNotification, subscribe);
 
 // src/feature/notifier/infra/web/react/NotificationHost.tsx
 import { useCallback, useEffect, useMemo as useMemo2 } from "react";
-import { cssTransition, Slide, toast as toast2, ToastContainer } from "react-toastify";
+import {
+  Slide,
+  ToastContainer,
+  cssTransition,
+  toast as toast2
+} from "react-toastify";
 
 // src/feature/notifier/entity/notification.ts
 var DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
 
+// src/feature/notifier/entity/toast-theme.ts
+var DEFAULT_ACTION_THEME = {
+  padding: "0.35rem 0.75rem",
+  borderRadius: "var(--radius-btn)",
+  background: "color-mix(in oklab, var(--brand), transparent 88%)",
+  hoverBackground: "color-mix(in oklab, currentColor, transparent 92%)",
+  focusOutline: "2px solid var(--focus)",
+  focusOutlineOffset: "2px",
+  fontWeight: 600,
+  transition: "background-color var(--motion-med) ease, color var(--motion-med) ease, transform var(--motion-med) ease",
+  focusTransform: "translateY(-1px)",
+  activeTransform: "translateY(0)",
+  marginLeft: "auto",
+  marginTop: "0.15rem"
+};
+var DEFAULT_ICON_COLORS = {
+  info: "var(--info)",
+  success: "var(--success)",
+  warning: "var(--warning)",
+  error: "var(--danger)"
+};
+var DEFAULT_THEME_BASE = {
+  lightBg: "var(--surface-3)",
+  lightText: "var(--text-1)",
+  lightProgress: "var(--brand)",
+  darkBg: "var(--surface-1)",
+  darkText: "var(--text-1)",
+  darkProgress: "var(--brand)",
+  progressInfo: "var(--info)",
+  progressSuccess: "var(--success)",
+  progressWarning: "var(--warning)",
+  progressError: "var(--danger)",
+  width: "min(24rem, calc(100vw - 2rem))",
+  toastRadius: "var(--radius-card)",
+  contentPadding: "0.5rem 0.75rem 1rem 0.5rem",
+  bodyColumnGap: "0.75rem",
+  bodyRowGap: "0.25rem"
+};
+function resolveToastTheme(theme) {
+  return {
+    lightBg: theme?.lightBg ?? DEFAULT_THEME_BASE.lightBg,
+    lightText: theme?.lightText ?? DEFAULT_THEME_BASE.lightText,
+    lightProgress: theme?.lightProgress ?? DEFAULT_THEME_BASE.lightProgress,
+    darkBg: theme?.darkBg ?? DEFAULT_THEME_BASE.darkBg,
+    darkText: theme?.darkText ?? DEFAULT_THEME_BASE.darkText,
+    darkProgress: theme?.darkProgress ?? DEFAULT_THEME_BASE.darkProgress,
+    progressInfo: theme?.progressInfo ?? DEFAULT_THEME_BASE.progressInfo,
+    progressSuccess: theme?.progressSuccess ?? DEFAULT_THEME_BASE.progressSuccess,
+    progressWarning: theme?.progressWarning ?? DEFAULT_THEME_BASE.progressWarning,
+    progressError: theme?.progressError ?? DEFAULT_THEME_BASE.progressError,
+    width: theme?.width ?? DEFAULT_THEME_BASE.width,
+    toastRadius: theme?.toastRadius ?? DEFAULT_THEME_BASE.toastRadius,
+    contentPadding: theme?.contentPadding ?? DEFAULT_THEME_BASE.contentPadding,
+    bodyColumnGap: theme?.bodyColumnGap ?? DEFAULT_THEME_BASE.bodyColumnGap,
+    bodyRowGap: theme?.bodyRowGap ?? DEFAULT_THEME_BASE.bodyRowGap,
+    transition: theme?.transition,
+    action: {
+      ...DEFAULT_ACTION_THEME,
+      ...theme?.action ?? {}
+    },
+    iconColors: {
+      ...DEFAULT_ICON_COLORS,
+      ...theme?.iconColors ?? {}
+    }
+  };
+}
+
 // src/feature/notifier/infra/web/react/ToastContent.tsx
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "react-toastify";
-import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_NOTIFICATION_VARIANT = "info";
 var TOAST_ICON_BY_VARIANT = {
@@ -120,7 +192,8 @@ var ToastContent = ({ notification, theme, mode }) => {
   const actionTextColor = theme.action.color ?? textColor;
   const actionHoverColor = theme.action.hoverColor ?? actionTextColor;
   const actionStyle = useMemo(() => {
-    const background = isHovered ? theme.action.hoverBackground : theme.action.background;
+    const hoverOverlay = theme.action.hoverBackground;
+    const background = isHovered ? `linear-gradient(0deg, ${hoverOverlay}, ${hoverOverlay}), ${theme.action.background}` : theme.action.background;
     const color = isHovered ? actionHoverColor : actionTextColor;
     const transform = isActive ? theme.action.activeTransform : isFocused ? theme.action.focusTransform : void 0;
     return {
@@ -173,7 +246,13 @@ var ToastContent = ({ notification, theme, mode }) => {
               /* @__PURE__ */ jsx(
                 Icon,
                 {
-                  style: { color: iconColor, padding: "0.125rem", width: "1.25rem", height: "1.25rem", flexShrink: 0 },
+                  style: {
+                    color: iconColor,
+                    padding: "0.125rem",
+                    width: "1.25rem",
+                    height: "1.25rem",
+                    flexShrink: 0
+                  },
                   "aria-hidden": "true"
                 }
               ),
@@ -239,74 +318,33 @@ var ToastContent = ({ notification, theme, mode }) => {
   );
 };
 
-// src/feature/notifier/entity/toast-theme.ts
-var DEFAULT_ACTION_THEME = {
-  padding: "0.35rem 0.75rem",
-  borderRadius: "0.5rem",
-  background: "rgba(79, 70, 229, 0.12)",
-  hoverBackground: "rgba(79, 70, 229, 0.2)",
-  focusOutline: "2px solid #4338ca",
-  focusOutlineOffset: "2px",
-  fontWeight: 600,
-  transition: "background-color 0.2s ease, color 0.2s ease, transform 0.2s ease",
-  focusTransform: "translateY(-1px)",
-  activeTransform: "translateY(0)",
-  marginLeft: "auto",
-  marginTop: "0.15rem"
-};
-var DEFAULT_ICON_COLORS = {
-  info: "#2563eb",
-  success: "#16a34a",
-  warning: "#f59e0b",
-  error: "#dc2626"
-};
-var DEFAULT_THEME_BASE = {
-  lightBg: "#f8fafc",
-  lightText: "#0f172a",
-  lightProgress: "#4f46e5",
-  darkBg: "#111827",
-  darkText: "#e5e7eb",
-  darkProgress: "#a5b4fc",
-  progressInfo: "#60a5fa",
-  progressSuccess: "#34d399",
-  progressWarning: "#fbbf24",
-  progressError: "#f87171",
-  width: "min(24rem, calc(100vw - 2rem))",
-  contentPadding: "0.5rem 0.75rem 1rem 0.5rem",
-  bodyColumnGap: "0.75rem",
-  bodyRowGap: "0.25rem"
-};
-function resolveToastTheme(theme) {
-  return {
-    lightBg: theme?.lightBg ?? DEFAULT_THEME_BASE.lightBg,
-    lightText: theme?.lightText ?? DEFAULT_THEME_BASE.lightText,
-    lightProgress: theme?.lightProgress ?? DEFAULT_THEME_BASE.lightProgress,
-    darkBg: theme?.darkBg ?? DEFAULT_THEME_BASE.darkBg,
-    darkText: theme?.darkText ?? DEFAULT_THEME_BASE.darkText,
-    darkProgress: theme?.darkProgress ?? DEFAULT_THEME_BASE.darkProgress,
-    progressInfo: theme?.progressInfo ?? DEFAULT_THEME_BASE.progressInfo,
-    progressSuccess: theme?.progressSuccess ?? DEFAULT_THEME_BASE.progressSuccess,
-    progressWarning: theme?.progressWarning ?? DEFAULT_THEME_BASE.progressWarning,
-    progressError: theme?.progressError ?? DEFAULT_THEME_BASE.progressError,
-    width: theme?.width ?? DEFAULT_THEME_BASE.width,
-    contentPadding: theme?.contentPadding ?? DEFAULT_THEME_BASE.contentPadding,
-    bodyColumnGap: theme?.bodyColumnGap ?? DEFAULT_THEME_BASE.bodyColumnGap,
-    bodyRowGap: theme?.bodyRowGap ?? DEFAULT_THEME_BASE.bodyRowGap,
-    transition: theme?.transition,
-    action: {
-      ...DEFAULT_ACTION_THEME,
-      ...theme?.action ?? {}
-    },
-    iconColors: {
-      ...DEFAULT_ICON_COLORS,
-      ...theme?.iconColors ?? {}
-    }
-  };
-}
-
 // src/feature/notifier/infra/web/react/NotificationHost.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark, theme }) => {
+var ToastCloseButton = ({ closeToast, theme, ariaLabel }) => /* @__PURE__ */ jsx2(
+  "button",
+  {
+    type: "button",
+    className: `Toastify__close-button Toastify__close-button--${theme}`,
+    "aria-label": ariaLabel ?? "close",
+    onClick: (event) => {
+      event.stopPropagation();
+      closeToast(true);
+    },
+    style: { color: "var(--text-1)" },
+    children: /* @__PURE__ */ jsx2("svg", { "aria-hidden": "true", viewBox: "0 0 14 16", children: /* @__PURE__ */ jsx2(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"
+      }
+    ) })
+  }
+);
+var NotificationHost = ({
+  channel = DEFAULT_NOTIFICATION_CHANNEL,
+  isDark,
+  theme
+}) => {
   const resolvedTheme = useMemo2(() => resolveToastTheme(theme), [theme]);
   const mode = useMemo2(() => {
     if (!isDark) {
@@ -318,27 +356,34 @@ var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark, theme
     const config = resolvedTheme.transition;
     return config ? cssTransition(config) : Slide;
   }, [resolvedTheme.transition]);
-  const style = useMemo2(() => ({
-    "--toastify-color-light": resolvedTheme.lightBg,
-    "--toastify-text-color-light": resolvedTheme.lightText,
-    "--toastify-color-progress-light": resolvedTheme.lightProgress,
-    "--toastify-color-dark": resolvedTheme.darkBg,
-    "--toastify-text-color-dark": resolvedTheme.darkText,
-    "--toastify-color-progress-dark": resolvedTheme.darkProgress,
-    "--toastify-color-progress-info": resolvedTheme.progressInfo,
-    "--toastify-color-progress-success": resolvedTheme.progressSuccess,
-    "--toastify-color-progress-warning": resolvedTheme.progressWarning,
-    "--toastify-color-progress-error": resolvedTheme.progressError,
-    "--toastify-toast-width": resolvedTheme.width
-  }), [resolvedTheme]);
-  const renderToast = useCallback((notification) => {
-    const variant = notification.variant ?? "info";
-    toast2(/* @__PURE__ */ jsx2(ToastContent, { notification, theme: resolvedTheme, mode }), {
-      toastId: notification.id,
-      icon: false,
-      type: variant
-    });
-  }, [mode, resolvedTheme]);
+  const style = useMemo2(
+    () => ({
+      "--toastify-color-light": resolvedTheme.lightBg,
+      "--toastify-text-color-light": resolvedTheme.lightText,
+      "--toastify-color-progress-light": resolvedTheme.lightProgress,
+      "--toastify-color-dark": resolvedTheme.darkBg,
+      "--toastify-text-color-dark": resolvedTheme.darkText,
+      "--toastify-color-progress-dark": resolvedTheme.darkProgress,
+      "--toastify-color-progress-info": resolvedTheme.progressInfo,
+      "--toastify-color-progress-success": resolvedTheme.progressSuccess,
+      "--toastify-color-progress-warning": resolvedTheme.progressWarning,
+      "--toastify-color-progress-error": resolvedTheme.progressError,
+      "--toastify-toast-width": resolvedTheme.width,
+      "--toastify-toast-bd-radius": resolvedTheme.toastRadius
+    }),
+    [resolvedTheme]
+  );
+  const renderToast = useCallback(
+    (notification) => {
+      const variant = notification.variant ?? "info";
+      toast2(/* @__PURE__ */ jsx2(ToastContent, { notification, theme: resolvedTheme, mode }), {
+        toastId: notification.id,
+        icon: false,
+        type: variant
+      });
+    },
+    [mode, resolvedTheme]
+  );
   useEffect(() => {
     let unsub;
     let disposed = false;
@@ -361,6 +406,8 @@ var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark, theme
     ToastContainer,
     {
       style,
+      toastStyle: { overflow: "hidden" },
+      closeButton: ToastCloseButton,
       position: "bottom-right",
       transition,
       newestOnTop: true,
@@ -399,7 +446,7 @@ function useResponsiveMutation(responsiveMutation, queryClient) {
   });
 }
 var executeEffects = (effects, ctx) => {
-  effects.forEach((effect) => {
+  for (const effect of effects) {
     if (effect.type === "invalidate") {
       void ctx.queryClient.invalidateQueries({ queryKey: effect.queryKey });
     } else if (effect.type === "update") {
@@ -412,7 +459,7 @@ var executeEffects = (effects, ctx) => {
     } else if (effect.type === "custom") {
       void effect.run(ctx);
     }
-  });
+  }
 };
 
 // src/util/controller-factory.ts
@@ -553,13 +600,14 @@ async function refresh(httpClient2) {
   } catch (err) {
     if (err instanceof HttpError) {
       return nok(err);
-    } else {
-      return nok(new HttpError("Unknown error during refresh", 0, {
+    }
+    return nok(
+      new HttpError("Unknown error during refresh", 0, {
         name: "Error",
         message: JSON.stringify(err),
         status: 500
-      }));
-    }
+      })
+    );
   }
 }
 var httpClient = new AutoRefreshDecorator(new FetchHttpClient(), refresh);
@@ -604,6 +652,46 @@ var MockHttpClient = class {
   }
 };
 
+// src/feature/auth/application/use-case/get-authenticated-user-use-case.ts
+var GetAuthenticatedUserUseCase = class {
+  constructor(authProvider) {
+    this.authProvider = authProvider;
+  }
+  execute() {
+    return this.authProvider.getAuthenticatedUser();
+  }
+};
+
+// src/feature/auth/application/use-case/login-user-use-case.ts
+var LoginUserUseCase = class {
+  constructor(authProvider) {
+    this.authProvider = authProvider;
+  }
+  execute(email, password) {
+    return this.authProvider.login(email, password);
+  }
+};
+
+// src/feature/auth/application/use-case/logout-user-use-case.ts
+var LogoutUserUseCase = class {
+  constructor(authProvider) {
+    this.authProvider = authProvider;
+  }
+  execute() {
+    return this.authProvider.logout();
+  }
+};
+
+// src/feature/auth/application/use-case/register-user-use-case.ts
+var RegisterUserUseCase = class {
+  constructor(authProvider) {
+    this.authProvider = authProvider;
+  }
+  execute(email, password, attributes) {
+    return this.authProvider.register(email, password, attributes);
+  }
+};
+
 // src/feature/auth/infra/http-cookie-auth-provider.ts
 import { nok as nok2, ok as ok2 } from "@hexdspace/util";
 var HttpCookieAuthProvider = class {
@@ -617,11 +705,11 @@ var HttpCookieAuthProvider = class {
     } catch (err) {
       if (isUnauthorizedError(err)) {
         return ok2(null);
-      } else if (err instanceof Error) {
+      }
+      if (err instanceof Error) {
         return nok2(err);
-      } else {
-        return nok2(new Error("Unknown error during authentication"));
       }
+      return nok2(new Error("Unknown error during authentication"));
     }
   }
   async login(email, password) {
@@ -633,24 +721,23 @@ var HttpCookieAuthProvider = class {
     } catch (err) {
       if (err instanceof Error) {
         return nok2(err);
-      } else {
-        return nok2(new Error("Unknown error during authentication"));
       }
+      return nok2(new Error("Unknown error during authentication"));
     }
   }
   async register(email, password, attributes) {
     try {
-      const res = await this.httpClient.post(
-        "/auth/register",
-        { email, password, ...attributes ?? {} }
-      );
+      const res = await this.httpClient.post("/auth/register", {
+        email,
+        password,
+        ...attributes ?? {}
+      });
       return ok2(res.data);
     } catch (err) {
       if (err instanceof Error) {
         return nok2(err);
-      } else {
-        return nok2(new Error("Unknown error during authentication"));
       }
+      return nok2(new Error("Unknown error during authentication"));
     }
   }
   async logout() {
@@ -660,9 +747,8 @@ var HttpCookieAuthProvider = class {
     } catch (err) {
       if (err instanceof Error) {
         return nok2(err);
-      } else {
-        return nok2(new Error("Unknown error during logout"));
       }
+      return nok2(new Error("Unknown error during logout"));
     }
   }
 };
@@ -670,46 +756,6 @@ function isUnauthorizedError(error) {
   return error instanceof HttpError && error.status === 401;
 }
 
-// src/feature/auth/application/use-case/login-user-use-case.ts
-var LoginUserUseCase = class {
-  constructor(authProvider) {
-    this.authProvider = authProvider;
-  }
-  execute(email, password) {
-    return this.authProvider.login(email, password);
-  }
-};
-
-// src/feature/auth/application/use-case/logout-user-use-case.ts
-var LogoutUserUseCase = class {
-  constructor(authProvider) {
-    this.authProvider = authProvider;
-  }
-  execute() {
-    return this.authProvider.logout();
-  }
-};
-
-// src/feature/auth/application/use-case/register-user-use-case.ts
-var RegisterUserUseCase = class {
-  constructor(authProvider) {
-    this.authProvider = authProvider;
-  }
-  execute(email, password, attributes) {
-    return this.authProvider.register(email, password, attributes);
-  }
-};
-
-// src/feature/auth/application/use-case/get-authenticated-user-use-case.ts
-var GetAuthenticatedUserUseCase = class {
-  constructor(authProvider) {
-    this.authProvider = authProvider;
-  }
-  execute() {
-    return this.authProvider.getAuthenticatedUser();
-  }
-};
-
 // src/feature/auth/interface/controller/auth-controller.ts
 var AuthController = class {
   constructor(loginUser, logoutUser, registerUser, getAuthenticatedUser) {
@@ -732,12 +778,7 @@ var AuthController = class {
   }
 };
 var createAuthController = controllerFactory(
-  (deps) => new AuthController(
-    deps.loginUser,
-    deps.logoutUser,
-    deps.registerUser,
-    deps.getAuthenticatedUser
-  ),
+  (deps) => new AuthController(deps.loginUser, deps.logoutUser, deps.registerUser, deps.getAuthenticatedUser),
   (overrides) => {
     const httpClient2 = overrides.httpClient ?? httpClient;
     const authProvider = overrides.authProvider ?? new HttpCookieAuthProvider(httpClient2);
@@ -759,24 +800,6 @@ import { useContext as useContext2 } from "react";
 // src/feature/auth/interface/web/react/AuthProvider.tsx
 import { createContext as createContext2, useEffect as useEffect2, useReducer } from "react";
 
-// src/feature/auth/interface/web/react/state/auth-reducer.ts
-function authStateReducer(_state, action) {
-  switch (action.type) {
-    case "REQUEST":
-      return { status: "loading" };
-    case "SUCCESS":
-      return { status: "unauthenticated", message: action.message };
-    case "FAILED":
-      return { status: "error", error: action.error };
-    case "LOGOUT":
-      return { status: "unauthenticated" };
-    case "COMPLETE":
-      return { status: "authenticated", user: action.user };
-    default:
-      throw new Error(`Unknown state: ${JSON.stringify(action)}`);
-  }
-}
-
 // src/feature/auth/interface/web/react/hook/useAuthController.tsx
 import { useContext } from "react";
 
@@ -797,6 +820,24 @@ function useAuthController() {
   return authController2;
 }
 
+// src/feature/auth/interface/web/react/state/auth-reducer.ts
+function authStateReducer(_state, action) {
+  switch (action.type) {
+    case "REQUEST":
+      return { status: "loading" };
+    case "SUCCESS":
+      return { status: "unauthenticated", message: action.message };
+    case "FAILED":
+      return { status: "error", error: action.error };
+    case "LOGOUT":
+      return { status: "unauthenticated" };
+    case "COMPLETE":
+      return { status: "authenticated", user: action.user };
+    default:
+      throw new Error(`Unknown state: ${JSON.stringify(action)}`);
+  }
+}
+
 // src/feature/auth/interface/web/react/AuthProvider.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var AuthStateCtx = createContext2(null);
@@ -820,7 +861,7 @@ function AuthProvider({ children }) {
       }
     };
     void fetchActiveUser();
-  }, [dispatch, authController2]);
+  }, [authController2]);
   return /* @__PURE__ */ jsx4(AuthDispatchCtx.Provider, { value: dispatch, children: /* @__PURE__ */ jsx4(AuthStateCtx.Provider, { value: state, children }) });
 }
 
@@ -850,21 +891,27 @@ function useAuthDispatch() {
 function useAuthActions() {
   const dispatch = useAuthDispatch();
   const authController2 = useAuthController();
-  const login = useCallback2(async (email, password) => {
-    dispatch({ type: "REQUEST" });
-    const res = await authController2.login(email, password);
-    dispatchLoginResult(res, dispatch);
-    return res;
-  }, [dispatch, authController2]);
+  const login = useCallback2(
+    async (email, password) => {
+      dispatch({ type: "REQUEST" });
+      const res = await authController2.login(email, password);
+      dispatchLoginResult(res, dispatch);
+      return res;
+    },
+    [dispatch, authController2]
+  );
   const logout = useCallback2(() => {
     authController2.logout().then(() => dispatch({ type: "LOGOUT" }));
   }, [dispatch, authController2]);
-  const register = useCallback2(async (email, password, attributes) => {
-    dispatch({ type: "REQUEST" });
-    const res = await authController2.register(email, password, attributes);
-    dispatchRegisterResult(res, dispatch);
-    return res;
-  }, [dispatch, authController2]);
+  const register = useCallback2(
+    async (email, password, attributes) => {
+      dispatch({ type: "REQUEST" });
+      const res = await authController2.register(email, password, attributes);
+      dispatchRegisterResult(res, dispatch);
+      return res;
+    },
+    [dispatch, authController2]
+  );
   return { login, logout, register };
 }
 function dispatchLoginResult(res, dispatch) {
@@ -1019,9 +1066,9 @@ var MockAuthHttpClient = class extends MockHttpClient {
 };
 
 // src/ui/components/Button.tsx
-import * as React3 from "react";
-import { Slot } from "radix-ui";
 import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import * as React from "react";
 
 // src/ui/utils/cn.ts
 import { clsx } from "clsx";
@@ -1064,11 +1111,7 @@ var insetChrome = cn(
   "border-[color:color-mix(in_oklab,var(--border),transparent_35%)]",
   "shadow-[inset_0_2px_6px_rgba(0,0,0,0.18)]"
 );
-var glassChrome = cn(
-  "backdrop-blur-[2px]",
-  "border",
-  "shadow-[0_8px_18px_rgba(0,0,0,0.12)]"
-);
+var glassChrome = cn("backdrop-blur-[2px]", "border", "shadow-[0_8px_18px_rgba(0,0,0,0.12)]");
 var glowChrome = cn(
   "border",
   "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_40%),0_6px_16px_color-mix(in_oklab,var(--border),transparent_70%)]",
@@ -1119,60 +1162,297 @@ var buttonVariants = cva(buttonBase, {
     { chrome: "glass", className: "text-[color:var(--text-1)]" },
     { chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-strong)]" },
     { chrome: "push", variant: "accent", className: "border-b-[color:var(--accent-strong)]" },
-    { chrome: "push", variant: "secondary", className: "border-b-[color:color-mix(in_oklab,var(--border),transparent 50%)]" },
-    { chrome: "push", variant: "outline", className: "border-b-[color:color-mix(in_oklab,var(--border),transparent 50%)]" },
+    {
+      chrome: "push",
+      variant: "secondary",
+      className: "border-b-[color:color-mix(in_oklab,var(--border),transparent 50%)]"
+    },
+    {
+      chrome: "push",
+      variant: "outline",
+      className: "border-b-[color:color-mix(in_oklab,var(--border),transparent 50%)]"
+    },
     { chrome: "push", variant: "ghost", className: "border-b-transparent shadow-none" },
     { chrome: "push", variant: "success", className: "border-b-[color:var(--success-80)]" },
     { chrome: "push", variant: "info", className: "border-b-[color:var(--info-80)]" },
     { chrome: "push", variant: "warning", className: "border-b-[color:var(--warning-80)]" },
     { chrome: "push", variant: "danger", className: "border-b-[color:var(--danger-80)]" },
     { chrome: "push", variant: "link", className: "border-b-0 shadow-none" },
-    { chrome: "soft", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--brand),transparent_85%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--brand),transparent_70%)]") },
-    { chrome: "soft", variant: "accent", className: cn("bg-[color:color-mix(in_oklab,var(--accent),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--accent),transparent_85%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--accent),transparent_70%)]") },
-    { chrome: "soft", variant: "secondary", className: cn("bg-[color:color-mix(in_oklab,var(--surface-2),transparent_25%)]", "border-[color:color-mix(in_oklab,var(--border),transparent_45%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.1)_inset,0_2px_4px_color-mix(in_oklab,var(--border),transparent_70%)]") },
-    { chrome: "soft", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_45%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.1)_inset,0_2px_4px_color-mix(in_oklab,var(--border),transparent_70%)]") },
-    { chrome: "soft", variant: "ghost", className: "shadow-[0_2px_4px_color-mix(in_oklab,var(--border),transparent_75%)]" },
-    { chrome: "soft", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--success),transparent_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--success),transparent_70%)]") },
-    { chrome: "soft", variant: "info", className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--info),transparent_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--info),transparent_70%)]") },
-    { chrome: "soft", variant: "warning", className: cn("bg-[color:color-mix(in_oklab,var(--warning),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--warning),transparent_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--warning),transparent_70%)]") },
-    { chrome: "soft", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_70%)]", "border-[color:color-mix(in_oklab,var(--danger),transparent_75%)]", "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
-    { chrome: "soft", variant: "link", className: cn("text-[color:var(--link)]", "shadow-[0_2px_4px_color-mix(in_oklab,var(--link),transparent_75%)]") },
-    { chrome: "glass", variant: "primary", className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_65%)]", "border-[color:var(--brand)]") },
-    { chrome: "glass", variant: "accent", className: cn("bg-[color:color-mix(in_oklab,var(--accent),transparent_65%)]", "border-[color:var(--accent)]") },
-    { chrome: "glass", variant: "secondary", className: cn("bg-[color:color-mix(in_oklab,var(--surface-2),transparent_35%)]", "border-[color:color-mix(in_oklab,var(--border),transparent_70%)]") },
+    {
+      chrome: "soft",
+      variant: "primary",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--brand),transparent_70%)]",
+        "border-[color:color-mix(in_oklab,var(--brand),transparent_85%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--brand),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "accent",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--accent),transparent_70%)]",
+        "border-[color:color-mix(in_oklab,var(--accent),transparent_85%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--accent),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "secondary",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--surface-2),transparent_25%)]",
+        "border-[color:color-mix(in_oklab,var(--border),transparent_45%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.1)_inset,0_2px_4px_color-mix(in_oklab,var(--border),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "outline",
+      className: cn(
+        "border-[color:color-mix(in_oklab,var(--border),transparent_45%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.1)_inset,0_2px_4px_color-mix(in_oklab,var(--border),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "ghost",
+      className: "shadow-[0_2px_4px_color-mix(in_oklab,var(--border),transparent_75%)]"
+    },
+    {
+      chrome: "soft",
+      variant: "success",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--success),transparent_70%)]",
+        "border-[color:color-mix(in_oklab,var(--success),transparent_75%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--success),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "info",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--info),transparent_70%)]",
+        "border-[color:color-mix(in_oklab,var(--info),transparent_75%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--info),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "warning",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--warning),transparent_70%)]",
+        "border-[color:color-mix(in_oklab,var(--warning),transparent_75%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--warning),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "danger",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--danger),transparent_70%)]",
+        "border-[color:color-mix(in_oklab,var(--danger),transparent_75%)]",
+        "shadow-[0_0_2px_1px_rgba(255,255,255,0.2)_inset,0_2px_4px_color-mix(in_oklab,var(--danger),transparent_70%)]"
+      )
+    },
+    {
+      chrome: "soft",
+      variant: "link",
+      className: cn(
+        "text-[color:var(--link)]",
+        "shadow-[0_2px_4px_color-mix(in_oklab,var(--link),transparent_75%)]"
+      )
+    },
+    {
+      chrome: "glass",
+      variant: "primary",
+      className: cn("bg-[color:color-mix(in_oklab,var(--brand),transparent_65%)]", "border-[color:var(--brand)]")
+    },
+    {
+      chrome: "glass",
+      variant: "accent",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--accent),transparent_65%)]",
+        "border-[color:var(--accent)]"
+      )
+    },
+    {
+      chrome: "glass",
+      variant: "secondary",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--surface-2),transparent_35%)]",
+        "border-[color:color-mix(in_oklab,var(--border),transparent_70%)]"
+      )
+    },
     { chrome: "glass", variant: "outline", className: "" },
     { chrome: "glass", variant: "ghost", className: "" },
-    { chrome: "glass", variant: "success", className: cn("bg-[color:color-mix(in_oklab,var(--success),transparent_65%)]", "border-[color:var(--success)]") },
-    { chrome: "glass", variant: "info", className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_65%)]", "border-[color:var(--info)]") },
-    { chrome: "glass", variant: "warning", className: cn("bg-[color:color-mix(in_oklab,var(--warning),transparent_65%)]", "border-[color:var(--warning)]") },
-    { chrome: "glass", variant: "danger", className: cn("bg-[color:color-mix(in_oklab,var(--danger),transparent_65%)]", "border-[color:var(--danger)]") },
+    {
+      chrome: "glass",
+      variant: "success",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--success),transparent_65%)]",
+        "border-[color:var(--success)]"
+      )
+    },
+    {
+      chrome: "glass",
+      variant: "info",
+      className: cn("bg-[color:color-mix(in_oklab,var(--info),transparent_65%)]", "border-[color:var(--info)]")
+    },
+    {
+      chrome: "glass",
+      variant: "warning",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--warning),transparent_65%)]",
+        "border-[color:var(--warning)]"
+      )
+    },
+    {
+      chrome: "glass",
+      variant: "danger",
+      className: cn(
+        "bg-[color:color-mix(in_oklab,var(--danger),transparent_65%)]",
+        "border-[color:var(--danger)]"
+      )
+    },
     { chrome: "glass", variant: "link", className: "text-[color:var(--link)]" },
-    { chrome: "glow", variant: "primary", className: cn("border-[color:var(--brand)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--brand),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--brand),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--brand),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--brand),transparent_55%)]") },
-    { chrome: "glow", variant: "accent", className: cn("border-[color:var(--accent)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--accent),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--accent),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--accent),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--accent),transparent_55%)]") },
-    { chrome: "glow", variant: "secondary", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
-    { chrome: "glow", variant: "outline", className: cn("border-[color:color-mix(in_oklab,var(--border),transparent_20%)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]") },
+    {
+      chrome: "glow",
+      variant: "primary",
+      className: cn(
+        "border-[color:var(--brand)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--brand),transparent_55%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--brand),transparent_40%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--brand),transparent_70%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--brand),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--brand),transparent_55%)]"
+      )
+    },
+    {
+      chrome: "glow",
+      variant: "accent",
+      className: cn(
+        "border-[color:var(--accent)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--accent),transparent_55%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--accent),transparent_40%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--accent),transparent_70%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--accent),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--accent),transparent_55%)]"
+      )
+    },
+    {
+      chrome: "glow",
+      variant: "secondary",
+      className: cn(
+        "border-[color:color-mix(in_oklab,var(--border),transparent_20%)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]"
+      )
+    },
+    {
+      chrome: "glow",
+      variant: "outline",
+      className: cn(
+        "border-[color:color-mix(in_oklab,var(--border),transparent_20%)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--border),transparent_60%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_15%),0_14px_34px_color-mix(in_oklab,var(--border),transparent_45%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--border),transparent_75%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--border),transparent_20%),0_12px_30px_color-mix(in_oklab,var(--border),transparent_60%)]"
+      )
+    },
     { chrome: "glow", variant: "ghost", className: "shadow-none border-transparent" },
-    { chrome: "glow", variant: "success", className: cn("border-[color:var(--success)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--success),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--success),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--success),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--success),transparent_55%)]") },
-    { chrome: "glow", variant: "info", className: cn("border-[color:var(--info)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--info),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--info),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--info),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--info),transparent_55%)]") },
-    { chrome: "glow", variant: "warning", className: cn("border-[color:var(--warning)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--warning),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--warning),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--warning),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--warning),transparent_55%)]") },
-    { chrome: "glow", variant: "danger", className: cn("border-[color:var(--danger)]", "shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--danger),transparent_55%)]", "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--danger),transparent_40%)]", "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--danger),transparent_70%)]", "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--danger),transparent_55%)]") },
+    {
+      chrome: "glow",
+      variant: "success",
+      className: cn(
+        "border-[color:var(--success)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--success),transparent_55%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--success),transparent_40%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--success),transparent_70%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--success),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--success),transparent_55%)]"
+      )
+    },
+    {
+      chrome: "glow",
+      variant: "info",
+      className: cn(
+        "border-[color:var(--info)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--info),transparent_55%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--info),transparent_40%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--info),transparent_70%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--info),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--info),transparent_55%)]"
+      )
+    },
+    {
+      chrome: "glow",
+      variant: "warning",
+      className: cn(
+        "border-[color:var(--warning)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--warning),transparent_55%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--warning),transparent_40%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--warning),transparent_70%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--warning),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--warning),transparent_55%)]"
+      )
+    },
+    {
+      chrome: "glow",
+      variant: "danger",
+      className: cn(
+        "border-[color:var(--danger)]",
+        "shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_20%),0_10px_26px_color-mix(in_oklab,var(--danger),transparent_55%)]",
+        "hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_10%),0_14px_34px_color-mix(in_oklab,var(--danger),transparent_40%)]",
+        "dark:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_30%),0_8px_22px_color-mix(in_oklab,var(--danger),transparent_70%)]",
+        "dark:hover:shadow-[0_0_0_1px_color-mix(in_oklab,var(--danger),transparent_15%),0_12px_30px_color-mix(in_oklab,var(--danger),transparent_55%)]"
+      )
+    },
     { chrome: "glow", variant: "link", className: "text-[color:var(--link)] shadow-none border-transparent" },
-    { chrome: "hairline", variant: "primary", className: "border-[color:color-mix(in_oklab,var(--brand-contrast),transparent_20%)] text-[color:var(--brand-contrast)]" },
-    { chrome: "hairline", variant: "accent", className: "border-[color:color-mix(in_oklab,var(--accent-contrast),transparent_20%)] text-[color:var(--accent-contrast)]" },
-    { chrome: "hairline", variant: "secondary", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
-    { chrome: "hairline", variant: "outline", className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]" },
+    {
+      chrome: "hairline",
+      variant: "primary",
+      className: "border-[color:color-mix(in_oklab,var(--brand-contrast),transparent_20%)] text-[color:var(--brand-contrast)]"
+    },
+    {
+      chrome: "hairline",
+      variant: "accent",
+      className: "border-[color:color-mix(in_oklab,var(--accent-contrast),transparent_20%)] text-[color:var(--accent-contrast)]"
+    },
+    {
+      chrome: "hairline",
+      variant: "secondary",
+      className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]"
+    },
+    {
+      chrome: "hairline",
+      variant: "outline",
+      className: "border-[color:color-mix(in_oklab,var(--border),transparent_20%)] text-[color:var(--text-1)]"
+    },
     { chrome: "hairline", variant: "ghost", className: "border-transparent text-[color:var(--text-1)]" },
-    { chrome: "hairline", variant: "success", className: "border-[color:color-mix(in_oklab,var(--success),transparent_20%)] text-[color:var(--success-contrast)]" },
-    { chrome: "hairline", variant: "info", className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[color:var(--info-contrast)]" },
-    { chrome: "hairline", variant: "warning", className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[color:var(--warning-contrast)]" },
-    { chrome: "hairline", variant: "danger", className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[color:var(--danger-contrast)]" },
+    {
+      chrome: "hairline",
+      variant: "success",
+      className: "border-[color:color-mix(in_oklab,var(--success),transparent_20%)] text-[color:var(--success-contrast)]"
+    },
+    {
+      chrome: "hairline",
+      variant: "info",
+      className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[color:var(--info-contrast)]"
+    },
+    {
+      chrome: "hairline",
+      variant: "warning",
+      className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[color:var(--warning-contrast)]"
+    },
+    {
+      chrome: "hairline",
+      variant: "danger",
+      className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[color:var(--danger-contrast)]"
+    },
     { chrome: "hairline", variant: "link", className: "text-[color:var(--link)] border-transparent" }
   ],
   defaultVariants: { variant: "primary", size: "md", chrome: "flat", fullWidth: false }
 });
 var iconSlotBase = cn("inline-flex items-center justify-center", "shrink-0");
 var iconSlotReserve = "min-w-4 min-h-4";
-var Button = React3.forwardRef(
+var Button = React.forwardRef(
   ({
     asChild = false,
     variant,
@@ -1258,21 +1538,20 @@ var Button = React3.forwardRef(
 Button.displayName = "Button";
 
 // src/ui/components/Field.tsx
-import * as React5 from "react";
+import * as React3 from "react";
 
 // src/ui/components/Label.tsx
-import * as React4 from "react";
+import * as React2 from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var Label = React4.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
+var Label = React2.forwardRef(
+  ({ className, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsx7(
     "label",
     {
       ref,
-      className: cn(
-        "inline-flex items-center gap-2 text-sm font-medium text-[color:var(--text-1)]",
-        className
-      ),
-      ...props
+      htmlFor,
+      className: cn("inline-flex items-center gap-2 text-sm font-medium text-(--text-1)", className),
+      ...props,
+      children
     }
   )
 );
@@ -1281,46 +1560,40 @@ Label.displayName = "Label";
 // src/ui/components/Field.tsx
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 function Field({ label, hint, error, required, disabled, id, children, className, ...props }) {
-  const reactId = React5.useId();
+  const reactId = React3.useId();
   const controlId = id ?? `field-${reactId}`;
   const hintId = hint ? `${controlId}-hint` : void 0;
   const errorId = error ? `${controlId}-error` : void 0;
   const childInvalid = Boolean(children.props.invalid);
   const invalid = Boolean(error) || childInvalid;
-  const describedByParts = [
-    children.props["aria-describedby"],
-    hintId,
-    errorId
-  ].filter(Boolean);
+  const describedByParts = [children.props["aria-describedby"], errorId, hintId].filter(Boolean);
   const ariaDescribedBy = describedByParts.length ? describedByParts.join(" ") : void 0;
-  const control = React5.cloneElement(children, {
+  const resolvedDisabled = disabled ?? children.props.disabled;
+  const resolvedRequired = required ?? children.props.required;
+  const control = React3.cloneElement(children, {
     id: controlId,
-    disabled: disabled ?? children.props.disabled,
-    required: required ?? children.props.required,
+    disabled: resolvedDisabled,
+    required: resolvedRequired,
     invalid,
     "aria-describedby": ariaDescribedBy
   });
   return /* @__PURE__ */ jsxs3("div", { className: cn("grid gap-1.5", className), ...props, children: [
     label ? /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxs3(Label, { htmlFor: controlId, children: [
       label,
-      required ? /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "text-(--muted)", children: " * " }) : null
+      resolvedRequired ? /* @__PURE__ */ jsxs3("span", { "aria-hidden": "true", className: "text-(--muted)", children: [
+        " ",
+        "*"
+      ] }) : null
     ] }) }) : null,
     control,
-    error ? /* @__PURE__ */ jsx8(
-      "p",
-      {
-        id: errorId,
-        className: "text-xs leading-5 text-(--danger-contrast)",
-        role: "alert",
-        children: error
-      }
-    ) : hint ? /* @__PURE__ */ jsx8("p", { id: hintId, className: "text-xs leading-5 text-(--muted)", children: hint }) : null
+    error ? /* @__PURE__ */ jsx8("p", { id: errorId, className: "text-xs leading-5 text-(--danger-contrast)", role: "alert", children: error }) : null,
+    hint ? /* @__PURE__ */ jsx8("p", { id: hintId, className: "text-xs leading-5 text-(--muted)", children: hint }) : null
   ] });
 }
 
 // src/ui/components/Input.tsx
-import * as React6 from "react";
 import { cva as cva2 } from "class-variance-authority";
+import * as React4 from "react";
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var controlShellBase = cn(
   "relative inline-flex items-center gap-2",
@@ -1341,10 +1614,7 @@ var controlShellBase = cn(
 var controlShellVariants = cva2(controlShellBase, {
   variants: {
     variant: {
-      surface: cn(
-        "bg-[color:var(--surface-2)]",
-        "hover:bg-[color:var(--surface-hover)]"
-      ),
+      surface: cn("bg-[color:var(--surface-2)]", "hover:bg-[color:var(--surface-hover)]"),
       outline: cn(
         "bg-transparent",
         "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_40%)]",
@@ -1379,7 +1649,7 @@ var slotBase = cn(
   "data-[disabled]:text-[color:var(--disabled-fg)]"
 );
 var slotReserve = "min-w-[var(--input-slot-size)]";
-var Input = React6.forwardRef(
+var Input = React4.forwardRef(
   ({
     variant,
     size,
@@ -1437,10 +1707,92 @@ var Input = React6.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/ui/components/Textarea.tsx
-import * as React7 from "react";
+// src/ui/components/Skeleton.tsx
 import { cva as cva3 } from "class-variance-authority";
+import * as React5 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
+var skeletonBase = cn(
+  "relative isolate inline-flex overflow-hidden",
+  "bg-[color:color-mix(in_oklab,var(--surface-2),var(--border)_25%)]",
+  "text-transparent select-none",
+  "[--skeleton-shimmer:color-mix(in_oklab,var(--surface-1),white_35%)]"
+);
+var shimmerEffect = cn(
+  "before:content-[''] before:absolute before:inset-0",
+  "before:bg-[linear-gradient(110deg,transparent_0%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_100%)_25%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_55%)_50%,color-mix(in_oklab,var(--skeleton-shimmer),transparent_100%)_75%,transparent_100%)]",
+  "before:[background-size:200%_100%]",
+  "before:animate-[skeleton-shimmer_1.6s_linear_infinite] motion-reduce:before:animate-none"
+);
+var skeletonVariants = cva3(skeletonBase, {
+  variants: {
+    variant: {
+      surface: "",
+      outline: cn("bg-transparent", "border border-[color:color-mix(in_oklab,var(--border),transparent_65%)]")
+    },
+    size: {
+      sm: "h-3",
+      md: "h-4",
+      lg: "h-5"
+    },
+    radius: {
+      none: "rounded-[var(--shape-radius-0)]",
+      sm: "rounded-[var(--shape-radius-10)]",
+      md: "rounded-[var(--radius-input)]",
+      lg: "rounded-[var(--radius-card)]",
+      full: "rounded-full"
+    },
+    fullWidth: { true: "w-full", false: "w-auto" },
+    animation: {
+      none: "",
+      pulse: "animate-pulse motion-reduce:animate-none",
+      shimmer: shimmerEffect
+    },
+    preset: {
+      none: "",
+      avatar: "h-12 w-12 rounded-full",
+      title: "h-6 w-2/3",
+      button: "h-10 w-28 rounded-[var(--radius-btn)]",
+      card: "h-40 w-full rounded-[var(--radius-card)]"
+    }
+  },
+  defaultVariants: {
+    variant: "surface",
+    size: "md",
+    radius: "md",
+    fullWidth: true,
+    animation: "shimmer",
+    preset: "none"
+  }
+});
+var Skeleton = React5.forwardRef(
+  ({ variant, size, radius, fullWidth, animation, preset, animate, className, ...props }, ref) => {
+    const resolvedAnimation = animation ?? (animate === false ? "none" : animate ? "pulse" : void 0);
+    return /* @__PURE__ */ jsx10(
+      "div",
+      {
+        ref,
+        className: cn(
+          skeletonVariants({
+            variant,
+            size,
+            radius,
+            fullWidth,
+            animation: resolvedAnimation,
+            preset
+          }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/ui/components/Textarea.tsx
+import { cva as cva4 } from "class-variance-authority";
+import * as React6 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var controlShellBase2 = cn(
   "relative inline-flex w-full",
   "rounded-[var(--radius-input)]",
@@ -1457,13 +1809,10 @@ var controlShellBase2 = cn(
   "data-[disabled]:border-[color:var(--disabled-border)]",
   "data-[disabled]:cursor-not-allowed"
 );
-var textareaShellVariants = cva3(controlShellBase2, {
+var textareaShellVariants = cva4(controlShellBase2, {
   variants: {
     variant: {
-      surface: cn(
-        "bg-[color:var(--surface-2)]",
-        "hover:bg-[color:var(--surface-hover)]"
-      ),
+      surface: cn("bg-[color:var(--surface-2)]", "hover:bg-[color:var(--surface-hover)]"),
       outline: cn(
         "bg-transparent",
         "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_40%)]",
@@ -1493,7 +1842,19 @@ var textareaBase = cn(
   "disabled:cursor-not-allowed",
   "read-only:cursor-default"
 );
-var Textarea = React7.forwardRef(
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+var Textarea = React6.forwardRef(
   ({
     variant,
     size,
@@ -1503,34 +1864,49 @@ var Textarea = React7.forwardRef(
     textareaClassName,
     disabled,
     autoResize,
+    maxHeightPx,
     onInput,
     rows = 4,
+    value,
     ...props
   }, ref) => {
     const isDisabled = Boolean(disabled);
+    const innerRef = React6.useRef(null);
+    const resize = React6.useCallback(() => {
+      if (!autoResize) return;
+      const el = innerRef.current;
+      if (!el) return;
+      el.style.height = "auto";
+      const next = el.scrollHeight;
+      el.style.height = maxHeightPx ? `${Math.min(next, maxHeightPx)}px` : `${next}px`;
+    }, [autoResize, maxHeightPx]);
     const handleInput = (e) => {
-      if (autoResize) {
-        const el = e.currentTarget;
-        el.style.height = "auto";
-        el.style.height = `${el.scrollHeight}px`;
-      }
+      resize();
       onInput?.(e);
     };
-    return /* @__PURE__ */ jsx10(
+    React6.useLayoutEffect(() => {
+      resize();
+    }, [resize, value]);
+    return /* @__PURE__ */ jsx11(
       "div",
       {
         className: cn(textareaShellVariants({ variant, size, fullWidth }), className),
         "data-invalid": invalid ? "" : void 0,
         "data-disabled": isDisabled ? "" : void 0,
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx11(
           "textarea",
           {
-            ref,
+            ref: mergeRefs(innerRef, ref),
             disabled: isDisabled,
             "aria-invalid": invalid || void 0,
-            className: cn(textareaBase, textareaClassName),
+            className: cn(
+              textareaBase,
+              autoResize ? "resize-none overflow-hidden" : "resize-y",
+              textareaClassName
+            ),
             rows,
             onInput: handleInput,
+            value,
             ...props
           }
         )
@@ -1557,6 +1933,7 @@ export {
   NotifierController,
   RedirectIfAuthed,
   RequireAuth,
+  Skeleton,
   Textarea,
   authController,
   controllerFactory,