@hexdspace/react 0.1.7 → 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) {
@@ -897,42 +944,9 @@ function useAuthedUser() {
   return auth.user;
 }
 
-// src/feature/auth/interface/web/react/AuthFormInputField.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var inputLabelStyles = {
-  display: "block",
-  fontSize: "small",
-  fontWeight: "bolder",
-  marginBottom: "4px"
-};
-var inputFieldStyles = {
-  display: "block",
-  width: "100%",
-  padding: "0.5rem 0.75rem"
-};
-var AuthFormInputField = ({ id, label, type, value, onChange, placeholder, className }) => {
-  return /* @__PURE__ */ jsxs2("div", { children: [
-    /* @__PURE__ */ jsx5("label", { htmlFor: id, style: inputLabelStyles, children: label }),
-    /* @__PURE__ */ jsx5(
-      "input",
-      {
-        id,
-        name: id,
-        type,
-        required: true,
-        value,
-        onChange,
-        className,
-        placeholder,
-        style: inputFieldStyles
-      }
-    )
-  ] });
-};
-
 // src/feature/auth/interface/web/react/auth-route-guards.tsx
 import { Navigate, Outlet, useLocation } from "react-router-dom";
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 function RequireAuth({
   guarded,
   loadingPlaceholder,
@@ -943,18 +957,18 @@ function RequireAuth({
   const auth = useAuth();
   const location = useLocation();
   if (auth.status === "loading") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: loadingPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: loadingPlaceholder ?? null });
   }
   if (auth.status === "error") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: errorPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: errorPlaceholder ?? null });
   }
   if (auth.status === "unauthenticated") {
     if (unauthenticatedRedirectTo) {
-      return /* @__PURE__ */ jsx6(Navigate, { to: unauthenticatedRedirectTo, replace: true, state: { from: location } });
+      return /* @__PURE__ */ jsx5(Navigate, { to: unauthenticatedRedirectTo, replace: true, state: { from: location } });
     }
-    return /* @__PURE__ */ jsx6(Fragment, { children: unauthenticatedPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: unauthenticatedPlaceholder ?? null });
   }
-  return guarded ? /* @__PURE__ */ jsx6(Fragment, { children: guarded }) : /* @__PURE__ */ jsx6(Outlet, {});
+  return guarded ? /* @__PURE__ */ jsx5(Fragment, { children: guarded }) : /* @__PURE__ */ jsx5(Outlet, {});
 }
 function RedirectIfAuthed({
   redirectTo,
@@ -965,18 +979,18 @@ function RedirectIfAuthed({
 }) {
   const auth = useAuth();
   if (auth.status === "loading") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: loadingPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: loadingPlaceholder ?? null });
   }
   if (auth.status === "error") {
-    return /* @__PURE__ */ jsx6(Fragment, { children: errorPlaceholder ?? loadingPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: errorPlaceholder ?? loadingPlaceholder ?? null });
   }
   if (auth.status === "authenticated") {
     if (redirectTo) {
-      return /* @__PURE__ */ jsx6(Navigate, { to: redirectTo, replace: true });
+      return /* @__PURE__ */ jsx5(Navigate, { to: redirectTo, replace: true });
     }
-    return /* @__PURE__ */ jsx6(Fragment, { children: authenticatedPlaceholder ?? null });
+    return /* @__PURE__ */ jsx5(Fragment, { children: authenticatedPlaceholder ?? null });
   }
-  return nonAuthedPlaceholder ? /* @__PURE__ */ jsx6(Fragment, { children: nonAuthedPlaceholder }) : /* @__PURE__ */ jsx6(Outlet, {});
+  return nonAuthedPlaceholder ? /* @__PURE__ */ jsx5(Fragment, { children: nonAuthedPlaceholder }) : /* @__PURE__ */ jsx5(Outlet, {});
 }
 
 // src/feature/auth/infra/mock-auth-http-client.ts
@@ -1052,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,23 +1078,22 @@ function cn(...inputs) {
 }
 
 // src/ui/components/Button.tsx
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var buttonBase = cn(
   "relative isolate inline-flex items-center justify-center gap-2 leading-none text-sm font-medium select-none cursor-pointer",
   "rounded-[var(--radius-btn)]",
-  "transition-[background-color,color,box-shadow,transform] duration-150 ease",
+  "transition-[background-color,color,box-shadow,transform] duration-[var(--motion-med)] ease",
   "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--focus)]",
   "[--state-hover:color-mix(in_oklab,currentColor,transparent_92%)]",
   "[--state-active:color-mix(in_oklab,currentColor,transparent_86%)]",
-  "after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color:var(--state-hover)] after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-100 after:ease",
-  "hover:after:opacity-100 active:after:bg-[color:var(--state-active)] active:after:opacity-100",
-  "disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed"
+  "after:content-[''] after:absolute after:inset-0 after:rounded-[inherit] after:bg-[color:var(--state-hover)] after:opacity-0 after:pointer-events-none after:transition-opacity after:duration-[var(--motion-fast)] after:ease",
+  "hover:after:opacity-100 active:after:bg-[color:var(--state-active)] active:after:opacity-100"
 );
 var flatChrome = cn();
 var pushChrome = cn(
   "border-b-[3px]",
   "transition-all",
-  "duration-100",
+  "duration-[var(--motion-fast)]",
   "ease-out",
   "shadow-[0_2px_4px_rgba(0,0,0,0.28),0_8px_16px_rgba(0,0,0,0.14)]",
   "hover:shadow-[0_3px_6px_rgba(0,0,0,0.30),0_12px_22px_rgba(0,0,0,0.18)]",
@@ -1091,18 +1104,14 @@ var softChrome = cn(
   "font-thin",
   "border",
   "border-[color:color-mix(in_oklab,var(--border),transparent_80%)]",
-  "shadow-[0_0_8px_2px_rgba(255,255,255,0.35)_inset,0_3px_8px_rgba(0,0,0,0.14)]"
+  "shadow-[0_0_2px_1px_rgba(255,255,255,0.35)_inset,0_2px_4px_rgba(0,0,0,0.14)]"
 );
 var insetChrome = cn(
   "border",
   "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-[6px]",
-  "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%)]",
@@ -1118,8 +1127,8 @@ var hairlineChrome = cn(
 var buttonVariants = cva(buttonBase, {
   variants: {
     variant: {
-      primary: "bg-[color:var(--brand)] text-[color:var(--text-inverted)]",
-      accent: "bg-[color:var(--accent)] text-[color:var(--text-inverted)]",
+      primary: "bg-[color:var(--brand)]",
+      accent: "bg-[color:var(--accent)]",
       secondary: "border border-[color:var(--border)] bg-[color:var(--surface-2)]",
       outline: "bg-transparent border border-[color:var(--border)] shadow-none",
       ghost: "bg-transparent shadow-none",
@@ -1151,60 +1160,299 @@ var buttonVariants = cva(buttonBase, {
     { variant: "link", className: "border-0" },
     { chrome: "soft", className: "text-[color:var(--text-1)]" },
     { chrome: "glass", className: "text-[color:var(--text-1)]" },
-    { chrome: "push", variant: "primary", className: "border-b-[color:var(--brand-90)]" },
-    { chrome: "push", variant: "accent", className: "border-b-[color:var(--accent-90)]" },
-    { 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: "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: "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_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_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_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_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_8px_2px_rgba(255,255,255,0.1)_inset,0_3px_8px_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_8px_2px_rgba(255,255,255,0.1)_inset,0_3px_8px_color-mix(in_oklab,var(--border),transparent_70%)]") },
-    { chrome: "soft", variant: "ghost", className: "shadow-[0_3px_8px_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_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_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_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_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_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_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_8px_2px_rgba(255,255,255,0.2)_inset,0_3px_8px_color-mix(in_oklab,var(--danger),transparent_70%)]") },
-    { chrome: "soft", variant: "link", className: cn("text-[color:var(--link)]", "shadow-[0_3px_8px_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),transparent_20%)] text-[color:var(--brand)]" },
-    { chrome: "hairline", variant: "accent", className: "border-[color:color-mix(in_oklab,var(--accent),transparent_20%)] text-[color:var(--accent)]" },
-    { 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)]" },
-    { chrome: "hairline", variant: "info", className: "border-[color:color-mix(in_oklab,var(--info),transparent_20%)] text-[color:var(--info)]" },
-    { chrome: "hairline", variant: "warning", className: "border-[color:color-mix(in_oklab,var(--warning),transparent_20%)] text-[color:var(--warning)]" },
-    { chrome: "hairline", variant: "danger", className: "border-[color:color-mix(in_oklab,var(--danger),transparent_20%)] text-[color:var(--danger)]" },
+    {
+      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 Button = React3.forwardRef(
+var iconSlotBase = cn("inline-flex items-center justify-center", "shrink-0");
+var iconSlotReserve = "min-w-4 min-h-4";
+var Button = React.forwardRef(
   ({
     asChild = false,
     variant,
@@ -1216,6 +1464,8 @@ var Button = React3.forwardRef(
     disabled,
     leftIcon,
     rightIcon,
+    reserveLeftIcon,
+    reserveRightIcon,
     children,
     onClick,
     type,
@@ -1227,19 +1477,19 @@ var Button = React3.forwardRef(
       isDisabled && "opacity-50 pointer-events-none cursor-not-allowed",
       className
     );
-    const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
-      loading ? /* @__PURE__ */ jsx7(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
-        }
-      ) : leftIcon,
-      children,
-      rightIcon
-    ] });
+    const showLeftSlot = Boolean(loading || leftIcon || reserveLeftIcon);
+    const showRightSlot = Boolean(rightIcon || reserveRightIcon);
+    const spinner = /* @__PURE__ */ jsx6(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+      }
+    );
+    const leftSlot = showLeftSlot ? /* @__PURE__ */ jsx6("span", { className: cn(iconSlotBase, reserveLeftIcon && iconSlotReserve), children: loading ? spinner : leftIcon }) : null;
+    const rightSlot = showRightSlot ? /* @__PURE__ */ jsx6("span", { className: cn(iconSlotBase, reserveRightIcon && iconSlotReserve), children: rightIcon }) : null;
     if (asChild) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsxs2(
         Slot.Root,
         {
           ref,
@@ -1257,11 +1507,15 @@ var Button = React3.forwardRef(
             onClick?.(e);
           },
           ...props,
-          children: content
+          children: [
+            leftSlot,
+            /* @__PURE__ */ jsx6(Slot.Slottable, { children }),
+            rightSlot
+          ]
         }
       );
     }
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs2(
       "button",
       {
         ref,
@@ -1272,29 +1526,415 @@ var Button = React3.forwardRef(
         "data-loading": loading ? "" : void 0,
         onClick,
         ...props,
-        children: content
+        children: [
+          leftSlot,
+          children,
+          rightSlot
+        ]
       }
     );
   }
 );
 Button.displayName = "Button";
+
+// src/ui/components/Field.tsx
+import * as React3 from "react";
+
+// src/ui/components/Label.tsx
+import * as React2 from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Label = React2.forwardRef(
+  ({ className, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsx7(
+    "label",
+    {
+      ref,
+      htmlFor,
+      className: cn("inline-flex items-center gap-2 text-sm font-medium text-(--text-1)", className),
+      ...props,
+      children
+    }
+  )
+);
+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 = 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"], errorId, hintId].filter(Boolean);
+  const ariaDescribedBy = describedByParts.length ? describedByParts.join(" ") : void 0;
+  const resolvedDisabled = disabled ?? children.props.disabled;
+  const resolvedRequired = required ?? children.props.required;
+  const control = React3.cloneElement(children, {
+    id: controlId,
+    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,
+      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 }) : null,
+    hint ? /* @__PURE__ */ jsx8("p", { id: hintId, className: "text-xs leading-5 text-(--muted)", children: hint }) : null
+  ] });
+}
+
+// src/ui/components/Input.tsx
+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",
+  "rounded-[var(--radius-input)]",
+  "border border-[color:color-mix(in_oklab,var(--border),transparent_55%)]",
+  "text-[color:var(--text-1)]",
+  "transition-[background-color,border-color,box-shadow] duration-[var(--motion-med)] ease",
+  "[--control-focus:var(--focus)]",
+  "focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--control-focus),transparent_60%)]",
+  "focus-within:border-[color:var(--control-focus)]",
+  "data-[invalid]:[--control-focus:var(--danger)]",
+  "data-[invalid]:border-[color:color-mix(in_oklab,var(--danger),transparent_20%)]",
+  "data-[disabled]:bg-[color:var(--disabled-bg)]",
+  "data-[disabled]:text-[color:var(--disabled-fg)]",
+  "data-[disabled]:border-[color:var(--disabled-border)]",
+  "data-[disabled]:cursor-not-allowed"
+);
+var controlShellVariants = cva2(controlShellBase, {
+  variants: {
+    variant: {
+      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%)]",
+        "border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      ),
+      ghost: cn(
+        "bg-transparent",
+        "border-[color:transparent]",
+        "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_55%)]",
+        "focus-within:border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      )
+    },
+    size: {
+      sm: "h-8 px-3 text-sm [--input-slot-size:2rem]",
+      md: "h-10 px-3.5 text-sm [--input-slot-size:2.5rem]",
+      lg: "h-11 px-4 text-base [--input-slot-size:2.75rem]"
+    },
+    fullWidth: { true: "w-full", false: "w-auto" }
+  },
+  defaultVariants: { variant: "surface", size: "md", fullWidth: false }
+});
+var inputBase = cn(
+  "min-w-0 flex-1 bg-transparent",
+  "outline-none border-0 ring-0",
+  "placeholder:text-[color:color-mix(in_oklab,var(--muted),transparent_20%)]",
+  "disabled:cursor-not-allowed",
+  "read-only:cursor-default"
+);
+var slotBase = cn(
+  "inline-flex items-center justify-center",
+  "text-[color:var(--muted)]",
+  "data-[disabled]:text-[color:var(--disabled-fg)]"
+);
+var slotReserve = "min-w-[var(--input-slot-size)]";
+var Input = React4.forwardRef(
+  ({
+    variant,
+    size,
+    fullWidth,
+    invalid,
+    leftSlot,
+    rightSlot,
+    reserveLeftSlot,
+    reserveRightSlot,
+    className,
+    inputClassName,
+    disabled,
+    ...props
+  }, ref) => {
+    const isDisabled = Boolean(disabled);
+    const showLeftSlot = Boolean(leftSlot || reserveLeftSlot);
+    const showRightSlot = Boolean(rightSlot || reserveRightSlot);
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cn(controlShellVariants({ variant, size, fullWidth }), className),
+        "data-invalid": invalid ? "" : void 0,
+        "data-disabled": isDisabled ? "" : void 0,
+        children: [
+          showLeftSlot ? /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn(slotBase, reserveLeftSlot && slotReserve),
+              "data-disabled": isDisabled ? "" : void 0,
+              children: leftSlot
+            }
+          ) : null,
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              ref,
+              disabled: isDisabled,
+              "aria-invalid": invalid || void 0,
+              className: cn(inputBase, inputClassName),
+              ...props
+            }
+          ),
+          showRightSlot ? /* @__PURE__ */ jsx9(
+            "span",
+            {
+              className: cn(slotBase, reserveRightSlot && slotReserve),
+              "data-disabled": isDisabled ? "" : void 0,
+              children: rightSlot
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// 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)]",
+  "border border-[color:color-mix(in_oklab,var(--border),transparent_55%)]",
+  "text-[color:var(--text-1)]",
+  "transition-[background-color,border-color,box-shadow] duration-[var(--motion-med)] ease",
+  "[--control-focus:var(--focus)]",
+  "focus-within:shadow-[0_0_0_3px_color-mix(in_oklab,var(--control-focus),transparent_60%)]",
+  "focus-within:border-[color:var(--control-focus)]",
+  "data-[invalid]:[--control-focus:var(--danger)]",
+  "data-[invalid]:border-[color:color-mix(in_oklab,var(--danger),transparent_20%)]",
+  "data-[disabled]:bg-[color:var(--disabled-bg)]",
+  "data-[disabled]:text-[color:var(--disabled-fg)]",
+  "data-[disabled]:border-[color:var(--disabled-border)]",
+  "data-[disabled]:cursor-not-allowed"
+);
+var textareaShellVariants = cva4(controlShellBase2, {
+  variants: {
+    variant: {
+      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%)]",
+        "border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      ),
+      ghost: cn(
+        "bg-transparent",
+        "border-[color:transparent]",
+        "hover:bg-[color:color-mix(in_oklab,var(--surface-2),transparent_55%)]",
+        "focus-within:border-[color:color-mix(in_oklab,var(--border),transparent_35%)]"
+      )
+    },
+    size: {
+      sm: "p-3 text-sm",
+      md: "p-3.5 text-sm",
+      lg: "p-4 text-base"
+    },
+    fullWidth: { true: "w-full", false: "w-auto" }
+  },
+  defaultVariants: { variant: "surface", size: "md", fullWidth: true }
+});
+var textareaBase = cn(
+  "min-w-0 w-full bg-transparent",
+  "outline-none border-0 ring-0",
+  "resize-y",
+  "placeholder:text-[color:color-mix(in_oklab,var(--muted),transparent_20%)]",
+  "disabled:cursor-not-allowed",
+  "read-only:cursor-default"
+);
+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,
+    fullWidth,
+    invalid,
+    className,
+    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) => {
+      resize();
+      onInput?.(e);
+    };
+    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__ */ jsx11(
+          "textarea",
+          {
+            ref: mergeRefs(innerRef, ref),
+            disabled: isDisabled,
+            "aria-invalid": invalid || void 0,
+            className: cn(
+              textareaBase,
+              autoResize ? "resize-none overflow-hidden" : "resize-y",
+              textareaClassName
+            ),
+            rows,
+            onInput: handleInput,
+            value,
+            ...props
+          }
+        )
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
 export {
   AuthController,
   AuthControllerCtx,
   AuthControllerProvider,
   AuthDispatchCtx,
-  AuthFormInputField,
   AuthProvider,
   AuthStateCtx,
   Button,
   DEFAULT_NOTIFICATION_CHANNEL,
+  Field,
   HttpError,
+  Input,
   MockAuthHttpClient,
   MockHttpClient,
   NotificationHost,
   NotifierController,
   RedirectIfAuthed,
   RequireAuth,
+  Skeleton,
+  Textarea,
   authController,
   controllerFactory,
   createAuthController,