@lukoweb/apitogo-module-user-panel 0.2.22 → 0.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-module-user-panel",
-  "version": "0.2.22",
+  "version": "0.2.24",
   "type": "module",
   "exports": {
     ".": "./src/index.tsx"
@@ -14,7 +14,7 @@
   "devDependencies": {
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@lukoweb/apitogo": "0.2.22",
+    "@lukoweb/apitogo": "0.2.24",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-router": "7.13.1",

package/src/account-paths.ts

@@ -1,42 +1,42 @@
-/** Default account area paths (match dev-portal billing plugin). */
-export const DEFAULT_ACCOUNT_BASE_PATH = "/account";
-
-export type AccountNavPaths = {
-  overview: string;
-  apiKeys: string;
-  usage: string;
-  billing: string;
-  settings: string;
-  docs: string;
-};
-
-export function buildAccountNavPaths(
-  basePath = DEFAULT_ACCOUNT_BASE_PATH,
-  docsPath = "/introduction",
-): AccountNavPaths {
-  const base = basePath.replace(/\/+$/, "") || DEFAULT_ACCOUNT_BASE_PATH;
-
-  return {
-    overview: `${base}/dashboard`,
-    apiKeys: `${base}/credentials`,
-    usage: `${base}/usage`,
-    billing: `${base}/subscriptions`,
-    settings: `${base}/profile`,
-    docs: docsPath,
-  };
-}
-
-export function toAccountChildPath(basePath: string, fullPath: string): string {
-  const base = basePath.replace(/\/+$/, "");
-  const normalized = fullPath.replace(/\/+$/, "") || fullPath;
-
-  if (normalized === base) {
-    return "";
-  }
-
-  if (normalized.startsWith(`${base}/`)) {
-    return normalized.slice(base.length + 1);
-  }
-
-  return normalized.replace(/^\/+/, "");
-}
+/** Default account area paths (match dev-portal billing plugin). */
+export const DEFAULT_ACCOUNT_BASE_PATH = "/account";
+
+export type AccountNavPaths = {
+  overview: string;
+  apiKeys: string;
+  usage: string;
+  billing: string;
+  settings: string;
+  docs: string;
+};
+
+export function buildAccountNavPaths(
+  basePath = DEFAULT_ACCOUNT_BASE_PATH,
+  docsPath = "/introduction",
+): AccountNavPaths {
+  const base = basePath.replace(/\/+$/, "") || DEFAULT_ACCOUNT_BASE_PATH;
+
+  return {
+    overview: `${base}/dashboard`,
+    apiKeys: `${base}/credentials`,
+    usage: `${base}/usage`,
+    billing: `${base}/subscriptions`,
+    settings: `${base}/profile`,
+    docs: docsPath,
+  };
+}
+
+export function toAccountChildPath(basePath: string, fullPath: string): string {
+  const base = basePath.replace(/\/+$/, "");
+  const normalized = fullPath.replace(/\/+$/, "") || fullPath;
+
+  if (normalized === base) {
+    return "";
+  }
+
+  if (normalized.startsWith(`${base}/`)) {
+    return normalized.slice(base.length + 1);
+  }
+
+  return normalized.replace(/^\/+/, "");
+}

package/src/components/AccountLayout.tsx

@@ -1,119 +1,119 @@
-import { cn } from "@lukoweb/apitogo";
-import { useAuth } from "@lukoweb/apitogo/hooks";
-import {
-  BookOpenIcon,
-  CreditCardIcon,
-  KeyRoundIcon,
-  LayoutGridIcon,
-  LogOutIcon,
-  SettingsIcon,
-  BarChart3Icon,
-} from "@lukoweb/apitogo/icons";
-import { Link, NavLink, Outlet } from "@lukoweb/apitogo/router";
-import type { ReactNode } from "react";
-import {
-  buildAccountNavPaths,
-  DEFAULT_ACCOUNT_BASE_PATH,
-} from "../account-paths.js";
-
-type AccountNavItem = {
-  label: string;
-  to: string;
-  icon: typeof LayoutGridIcon;
-};
-
-export type AccountLayoutProps = {
-  basePath?: string;
-  docsPath?: string;
-  children?: ReactNode;
-  /** When true, show API keys / Usage / Billing (billing plugin routes). */
-  includeBillingNav?: boolean;
-};
-
-export function AccountLayout({
-  basePath = DEFAULT_ACCOUNT_BASE_PATH,
-  docsPath = "/introduction",
-  children,
-  includeBillingNav = false,
-}: AccountLayoutProps) {
-  const auth = useAuth();
-  const paths = buildAccountNavPaths(basePath, docsPath);
-
-  const navItems: AccountNavItem[] = [
-    { label: "Overview", to: paths.overview, icon: LayoutGridIcon },
-    ...(includeBillingNav
-      ? [
-          { label: "API keys", to: paths.apiKeys, icon: KeyRoundIcon },
-          { label: "Usage", to: paths.usage, icon: BarChart3Icon },
-          { label: "Billing", to: paths.billing, icon: CreditCardIcon },
-        ]
-      : []),
-    { label: "Settings", to: paths.settings, icon: SettingsIcon },
-  ];
-
-  const renderNavLink = (item: AccountNavItem, compact = false) => (
-    <NavLink
-      key={item.to}
-      to={item.to}
-      end={item.to === paths.overview}
-      className={({ isActive }) =>
-        cn(
-          compact
-            ? "inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
-            : "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
-          isActive
-            ? "bg-primary/14 font-semibold text-primary"
-            : "text-muted-foreground hover:bg-muted/80 hover:text-foreground",
-        )
-      }
-    >
-      <item.icon
-        size={compact ? 18 : 20}
-        strokeWidth={1.8}
-        className="shrink-0 opacity-80"
-      />
-      {item.label}
-    </NavLink>
-  );
-
-  return (
-    <div className="flex min-h-[calc(100dvh-var(--header-height))] flex-col bg-muted md:flex-row">
-      <nav
-        aria-label="Account"
-        className="flex gap-1 overflow-x-auto border-b border-border bg-card px-3 py-2 md:hidden"
-      >
-        {navItems.map((item) => renderNavLink(item, true))}
-      </nav>
-
-      <aside className="hidden w-[236px] shrink-0 flex-col justify-between border-r border-border bg-card px-3 py-4 md:flex">
-        <nav className="flex flex-col gap-1">
-          {navItems.map((item) => renderNavLink(item))}
-        </nav>
-
-        <div className="flex flex-col gap-1 border-t border-border pt-3">
-          <Link
-            to={paths.docs}
-            className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
-          >
-            <BookOpenIcon size={20} strokeWidth={1.8} className="shrink-0" />
-            Documentation
-          </Link>
-          {auth.isAuthEnabled ? (
-            <button
-              type="button"
-              className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
-              onClick={() => {
-                void auth.logout();
-              }}
-            >
-              <LogOutIcon size={20} strokeWidth={1.8} className="shrink-0" />
-              Log out
-            </button>
-          ) : null}
-        </div>
-      </aside>
-
-      <main className="min-w-0 flex-1">{children ?? <Outlet />}</main>
-    </div>
-  );
-}
+import { cn } from "@lukoweb/apitogo";
+import { useAuth } from "@lukoweb/apitogo/hooks";
+import {
+  BookOpenIcon,
+  CreditCardIcon,
+  KeyRoundIcon,
+  LayoutGridIcon,
+  LogOutIcon,
+  SettingsIcon,
+  BarChart3Icon,
+} from "@lukoweb/apitogo/icons";
+import { Link, NavLink, Outlet } from "@lukoweb/apitogo/router";
+import type { ReactNode } from "react";
+import {
+  buildAccountNavPaths,
+  DEFAULT_ACCOUNT_BASE_PATH,
+} from "../account-paths.js";
+
+type AccountNavItem = {
+  label: string;
+  to: string;
+  icon: typeof LayoutGridIcon;
+};
+
+export type AccountLayoutProps = {
+  basePath?: string;
+  docsPath?: string;
+  children?: ReactNode;
+  /** When true, show API keys / Usage / Billing (billing plugin routes). */
+  includeBillingNav?: boolean;
+};
+
+export function AccountLayout({
+  basePath = DEFAULT_ACCOUNT_BASE_PATH,
+  docsPath = "/introduction",
+  children,
+  includeBillingNav = false,
+}: AccountLayoutProps) {
+  const auth = useAuth();
+  const paths = buildAccountNavPaths(basePath, docsPath);
+
+  const navItems: AccountNavItem[] = [
+    { label: "Overview", to: paths.overview, icon: LayoutGridIcon },
+    ...(includeBillingNav
+      ? [
+          { label: "API keys", to: paths.apiKeys, icon: KeyRoundIcon },
+          { label: "Usage", to: paths.usage, icon: BarChart3Icon },
+          { label: "Billing", to: paths.billing, icon: CreditCardIcon },
+        ]
+      : []),
+    { label: "Settings", to: paths.settings, icon: SettingsIcon },
+  ];
+
+  const renderNavLink = (item: AccountNavItem, compact = false) => (
+    <NavLink
+      key={item.to}
+      to={item.to}
+      end={item.to === paths.overview}
+      className={({ isActive }) =>
+        cn(
+          compact
+            ? "inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors"
+            : "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+          isActive
+            ? "bg-primary/14 font-semibold text-primary"
+            : "text-muted-foreground hover:bg-muted/80 hover:text-foreground",
+        )
+      }
+    >
+      <item.icon
+        size={compact ? 18 : 20}
+        strokeWidth={1.8}
+        className="shrink-0 opacity-80"
+      />
+      {item.label}
+    </NavLink>
+  );
+
+  return (
+    <div className="flex min-h-[calc(100dvh-var(--header-height))] flex-col bg-muted md:flex-row">
+      <nav
+        aria-label="Account"
+        className="flex gap-1 overflow-x-auto border-b border-border bg-card px-3 py-2 md:hidden"
+      >
+        {navItems.map((item) => renderNavLink(item, true))}
+      </nav>
+
+      <aside className="hidden w-[236px] shrink-0 flex-col justify-between border-r border-border bg-card px-3 py-4 md:flex">
+        <nav className="flex flex-col gap-1">
+          {navItems.map((item) => renderNavLink(item))}
+        </nav>
+
+        <div className="flex flex-col gap-1 border-t border-border pt-3">
+          <Link
+            to={paths.docs}
+            className="flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
+          >
+            <BookOpenIcon size={20} strokeWidth={1.8} className="shrink-0" />
+            Documentation
+          </Link>
+          {auth.isAuthEnabled ? (
+            <button
+              type="button"
+              className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left text-sm font-medium text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
+              onClick={() => {
+                void auth.logout();
+              }}
+            >
+              <LogOutIcon size={20} strokeWidth={1.8} className="shrink-0" />
+              Log out
+            </button>
+          ) : null}
+        </div>
+      </aside>
+
+      <main className="min-w-0 flex-1">{children ?? <Outlet />}</main>
+    </div>
+  );
+}

package/src/hooks/useAccountSettings.ts

@@ -1,93 +1,93 @@
-import { useAuth, useZudoku } from "@lukoweb/apitogo/hooks";
-import {
-  useMutation,
-  useQuery,
-  useQueryClient,
-} from "@lukoweb/apitogo/react-query";
-import {
-  changeAccountPassword,
-  deleteAccount,
-  fetchAccountMe,
-  resolveDevPortalApiBaseUrl,
-  updateAccountProfile,
-} from "../utils/dev-portal-api.js";
-
-export function useAccountMe() {
-  const auth = useAuth();
-  const apiBaseUrl = resolveDevPortalApiBaseUrl(
-    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
-  );
-
-  return useQuery({
-    queryKey: ["account-me", apiBaseUrl],
-    enabled: auth.isAuthenticated && Boolean(apiBaseUrl),
-    queryFn: () => fetchAccountMe(apiBaseUrl!),
-  });
-}
-
-export function useUpdateAccountProfile() {
-  const auth = useAuth();
-  const { authentication } = useZudoku();
-  const queryClient = useQueryClient();
-  const apiBaseUrl = resolveDevPortalApiBaseUrl(
-    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
-  );
-
-  return useMutation({
-    mutationFn: (displayName: string) => {
-      if (!apiBaseUrl) {
-        throw new Error("Dev portal API is not configured.");
-      }
-
-      return updateAccountProfile(apiBaseUrl, displayName);
-    },
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["account-me"] });
-      await queryClient.invalidateQueries({ queryKey: ["dev-portal-me"] });
-      await authentication?.refreshUserProfile?.();
-    },
-  });
-}
-
-export function useChangeAccountPassword() {
-  const auth = useAuth();
-  const apiBaseUrl = resolveDevPortalApiBaseUrl(
-    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
-  );
-
-  return useMutation({
-    mutationFn: ({
-      currentPassword,
-      newPassword,
-    }: {
-      currentPassword: string;
-      newPassword: string;
-    }) => {
-      if (!apiBaseUrl) {
-        throw new Error("Dev portal API is not configured.");
-      }
-
-      return changeAccountPassword(apiBaseUrl, currentPassword, newPassword);
-    },
-  });
-}
-
-export function useDeleteAccount() {
-  const auth = useAuth();
-  const apiBaseUrl = resolveDevPortalApiBaseUrl(
-    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
-  );
-
-  return useMutation({
-    mutationFn: (password?: string) => {
-      if (!apiBaseUrl) {
-        throw new Error("Dev portal API is not configured.");
-      }
-
-      return deleteAccount(apiBaseUrl, password);
-    },
-    onSuccess: async () => {
-      await auth.logout();
-    },
-  });
-}
+import { useAuth, useZudoku } from "@lukoweb/apitogo/hooks";
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@lukoweb/apitogo/react-query";
+import {
+  changeAccountPassword,
+  deleteAccount,
+  fetchAccountMe,
+  resolveDevPortalApiBaseUrl,
+  updateAccountProfile,
+} from "../utils/dev-portal-api.js";
+
+export function useAccountMe() {
+  const auth = useAuth();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useQuery({
+    queryKey: ["account-me", apiBaseUrl],
+    enabled: auth.isAuthenticated && Boolean(apiBaseUrl),
+    queryFn: () => fetchAccountMe(apiBaseUrl!),
+  });
+}
+
+export function useUpdateAccountProfile() {
+  const auth = useAuth();
+  const { authentication } = useZudoku();
+  const queryClient = useQueryClient();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useMutation({
+    mutationFn: (displayName: string) => {
+      if (!apiBaseUrl) {
+        throw new Error("Dev portal API is not configured.");
+      }
+
+      return updateAccountProfile(apiBaseUrl, displayName);
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["account-me"] });
+      await queryClient.invalidateQueries({ queryKey: ["dev-portal-me"] });
+      await authentication?.refreshUserProfile?.();
+    },
+  });
+}
+
+export function useChangeAccountPassword() {
+  const auth = useAuth();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useMutation({
+    mutationFn: ({
+      currentPassword,
+      newPassword,
+    }: {
+      currentPassword: string;
+      newPassword: string;
+    }) => {
+      if (!apiBaseUrl) {
+        throw new Error("Dev portal API is not configured.");
+      }
+
+      return changeAccountPassword(apiBaseUrl, currentPassword, newPassword);
+    },
+  });
+}
+
+export function useDeleteAccount() {
+  const auth = useAuth();
+  const apiBaseUrl = resolveDevPortalApiBaseUrl(
+    auth.providerData as { type: "dev-portal"; apiBaseUrl: string } | null,
+  );
+
+  return useMutation({
+    mutationFn: (password?: string) => {
+      if (!apiBaseUrl) {
+        throw new Error("Dev portal API is not configured.");
+      }
+
+      return deleteAccount(apiBaseUrl, password);
+    },
+    onSuccess: async () => {
+      await auth.logout();
+    },
+  });
+}

package/src/index.tsx

@@ -1,14 +1,14 @@
-export { userPanelModule } from "./userPanelModule.js";
-export type { UserPanelModuleOptions } from "./userPanelModule.js";
-export { AccountLayout } from "./components/AccountLayout.js";
-export type { AccountLayoutProps } from "./components/AccountLayout.js";
-export {
-  buildAccountNavPaths,
-  DEFAULT_ACCOUNT_BASE_PATH,
-  toAccountChildPath,
-} from "./account-paths.js";
-export type { AccountNavPaths } from "./account-paths.js";
-export { DefaultDashboardPage } from "./pages/DefaultDashboardPage.js";
-export { SettingsPage } from "./pages/SettingsPage.js";
-export { DefaultProfilePage } from "./pages/DefaultProfilePage.js";
-export { DefaultPlansPage } from "./pages/DefaultPlansPage.js";
+export { userPanelModule } from "./userPanelModule.js";
+export type { UserPanelModuleOptions } from "./userPanelModule.js";
+export { AccountLayout } from "./components/AccountLayout.js";
+export type { AccountLayoutProps } from "./components/AccountLayout.js";
+export {
+  buildAccountNavPaths,
+  DEFAULT_ACCOUNT_BASE_PATH,
+  toAccountChildPath,
+} from "./account-paths.js";
+export type { AccountNavPaths } from "./account-paths.js";
+export { DefaultDashboardPage } from "./pages/DefaultDashboardPage.js";
+export { SettingsPage } from "./pages/SettingsPage.js";
+export { DefaultProfilePage } from "./pages/DefaultProfilePage.js";
+export { DefaultPlansPage } from "./pages/DefaultPlansPage.js";