@umituz/web-dashboard 4.7.1 → 5.0.1

package/README.md

@@ -1,56 +1,31 @@
 # @umituz/web-dashboard
 
-Installable app skeleton for SaaS dashboards: layouts, auth, onboarding,
-analytics, a content calendar, an i18n bridge, and a permissions/session/
-module registry. Every domain is an independent entry point — import only
-what your app uses. Camp-agnostic by construction: the package ships its
-own `udb-*` stylesheet driven by `--u-*` tokens, so it works identically in
-vanilla-CSS and Tailwind hosts.
+Installable app skeleton for SaaS dashboards: layouts, auth, analytics, a
+content calendar, and a permissions/session/module registry. Every domain is
+an independent entry point — import only what your app uses. UI atoms and
+design tokens come from [@umituz/web-design-system](https://github.com/umituz/web-design-system);
+translations from [@umituz/web-localization](https://github.com/umituz/web-localization).
 
 The package is **source-distributed** (published as raw TypeScript in `src/`).
 Your bundler compiles it alongside your app; no prebuilt bundle ships.
 
-## What changed in v4 (major)
-
-- **Billing moved to [@umituz/web-polar-payment](https://github.com/umituz/web-polar-payment)**
-  under the `./portal` entry point. The old `./billing*` entry points are gone.
-- **Styling is shipped, not assumed.** Import `@umituz/web-dashboard/styles.css`
-  once; all components use `udb-*` BEM classes.
-- **No i18n runtime.** `react-i18next` is out; hosts bridge their own `t` via
-  `<DashboardI18nProvider t={i18n.t}>` (see below). Without a provider,
-  keys humanize to readable English.
-- **No Firebase.** The calendar persists through the injected
-  `ICalendarDatabase` seam; `createInMemoryCalendarDatabase()` is the default.
-- **recharts is out.** `AnalyticsChart` renders line/area/bar/pie/donut as
-  dependency-free SVG with native `<title>` tooltips.
-- **New fleet modules**: `./permissions`, `./session`, `./modules` — the
-  texora/visora pattern (one module list drives routes + nav + guards) as
-  reusable building blocks.
-
-## What changed in 4.1
-
-- **The design system is back — for real this time.** 4.0 dropped
-  `@umituz/web-design-system` entirely; 4.1 makes it a runtime dependency
-  again and actually renders it:
-  - `./primitives` (`Button`, `Input`, `Checkbox`, `Skeleton`, `cn`) are thin
-    adapters that **delegate to the DS components** — the dashboard prop API
-    is unchanged, call sites need zero edits.
-  - `UserManagementTable` renders the DS `DataTable`; `MetricCard` composes
-    the DS `MetricCard`; `AnalyticsCard` is built on DS `Card` primitives.
-  - `styles.css` imports `@umituz/web-design-system/styles.css` transitively
-    (Tailwind v4 precompiled) — hosts still import only the dashboard
-    stylesheet.
-- **`--u-*` tokens are now bridges.** `tokens.css` maps every color/radius/
-  shadow token to the DS `--color-*`/`--radius-*` variables (with the old
-  literal as fallback). Override either side; dark mode (`data-udb-theme="dark"`)
-  now sets DS variables and the bridge flows through.
-- **Primitive base CSS is gone from `dashboard.css`.** Only dashboard-owned
-  modifiers remain (`udb-btn__spinner`, `udb-input--error/--with-toggle`,
-  `udb-skeleton--*`, `udb-card--sm/--lg`, `udb-table` for the permission
-  matrix); bases come from the DS stylesheet.
-- **Peer footprint**: pulling the dashboard in transitively installs the DS's
-  Radix UI peers (npm 7+ handles this automatically; only imported components
-  end up in the bundle).
+## What changed in v5 (major)
+
+- **No more local primitives.** The `./primitives` entry point is gone;
+  components import `@umituz/web-design-system` directly. Hosts that need
+  `Button`/`Input`/`Checkbox`/`Skeleton`/`cn` import them from the design
+  system.
+- **No more `--u-*` token layer.** `tokens.css` is deleted. The `udb-*`
+  stylesheet consumes the design-system variables (`--color-*`, `--radius-*`,
+  `--font-*`, `--shadow-*`) directly; dashboard-specific knobs (typography
+  scale, sidebar geometry) are `--udb-*` custom properties defined in
+  `styles.css` itself.
+- **No more local i18n copy.** The `./i18n` entry point is gone; `useT` now
+  comes from `@umituz/web-localization/react` (`I18nProvider` there replaces
+  `DashboardI18nProvider`, same `t` signature).
+- **No bundled dark preset.** Dark mode follows the design system: hosts set
+  dark values on the DS variables under `[data-theme="dark"]` / `.dark`
+  (see the design system's `bridge.css` contract).
 
 ## Installation
 
@@ -60,7 +35,8 @@ import "@umituz/web-dashboard/styles.css";
 ```
 
 Peers: `react` + `react-dom` (^18 or ^19) and `react-router-dom` (^6 or ^7).
-Runtime deps: `@umituz/web-design-system` + `lucide-react`. Nothing else.
+Runtime deps: `@umituz/web-design-system`, `@umituz/web-localization`,
+`lucide-react`. Nothing else.
 
 ### Tailwind hosts
 
@@ -70,56 +46,53 @@ resets: import the package stylesheet **after** your base layer.
 
 ### Theming & dark mode
 
-`tokens.css` bridges every `--u-*` token to a design-system variable
-(`--u-color-primary: var(--color-primary, #2563eb)`), so you can theme two
-ways: override the `--u-*` bridge heads, or set the DS `--color-*`/`--radius-*`
-variables (e.g. from your own Tailwind `@theme`). Dark mode is host-driven:
-put `data-udb-theme="dark"` on any ancestor — the dashboard dark block sets
-the DS variables and both layers switch together.
+`styles.css` imports `@umituz/web-design-system/styles.css` transitively and
+reads its variables, so theming has exactly one path: set the DS variables.
+Vanilla-CSS hosts define `--app-*` slots via the design system's `bridge.css`;
+Tailwind hosts override `--color-*` from their own `@theme`. Dashboard-only
+knobs (`--udb-font-size-*`, `--udb-space-*`, `--udb-sidebar-*`,
+`--udb-header-height`, `--udb-border-strong`, `--udb-radius-pill`) can be overridden anywhere in the cascade.
 
 ## Entry points
 
 ```bash
 @umituz/web-dashboard/styles.css    # component stylesheet (udb-* BEM)
-@umituz/web-dashboard/tokens.css    # --u-* custom properties only
-@umituz/web-dashboard/primitives    # Button, Input, Checkbox, Skeleton, cn
-@umituz/web-dashboard/i18n          # DashboardI18nProvider, useT, defaultT
 @umituz/web-dashboard/permissions   # PermissionMatrix, hasPermission, guards
 @umituz/web-dashboard/session       # AuthAdapter, SessionProvider, OrgSwitcher, DemoLogin
 @umituz/web-dashboard/modules       # DashboardModule, buildRoutes, buildNav
 @umituz/web-dashboard/layouts       # DashboardLayout, DashboardSidebar, DashboardHeader
 @umituz/web-dashboard/settings      # SettingsLayout, admin skeletons (users, matrix, audit)
-@umituz/web-dashboard/onboarding    # OnboardingWizard + steps, useOnboarding
 @umituz/web-dashboard/auth          # Login/Register/Forgot/Reset forms, AuthLayout
 @umituz/web-dashboard/analytics     # AnalyticsLayout, SVG AnalyticsChart, services
 @umituz/web-dashboard/calendar      # useCalendar, CalendarService (injected DB)
 @umituz/web-dashboard/config        # dashboard config helpers
+@umituz/web-dashboard/charts        # dependency-free SVG chart components
 ```
 
 Each domain also exposes `components`, `hooks`, `utils`, `types`
-sub-entries (and `services` for analytics/calendar). The new v4 modules
+sub-entries (and `services` for analytics/calendar). The v4 modules
 (`permissions`, `session`, `modules`) are **deep-entry only** — they are not
 re-exported from the root, so router-less hosts never pull router code in
 transitively.
 
-## The v4 composition
+## The composition
 
 A host app assembles the skeleton from four seams:
 
 ```tsx
-import { DashboardI18nProvider } from "@umituz/web-dashboard/i18n";
+import { I18nProvider } from "@umituz/web-localization/react";
 import { SessionProvider, createInMemoryAuthAdapter } from "@umituz/web-dashboard/session";
 import { PermissionsProvider } from "@umituz/web-dashboard/permissions";
 
 const adapter = createInMemoryAuthAdapter({ users: DEMO_USERS });
 
-<DashboardI18nProvider t={i18n.t}>
+<I18nProvider t={i18n.t}>
   <SessionProvider adapter={adapter}>
     <PermissionsProvider matrix={ROLE_PERMISSIONS} role={user?.role}>
       <App />
     </PermissionsProvider>
   </SessionProvider>
-</DashboardI18nProvider>
+</I18nProvider>
 ```
 
 ### One module list → routes + nav + guards
@@ -176,20 +149,20 @@ const demo = new CalendarService(createInMemoryCalendarDatabase());
 
 ### Analytics
 
-`AnalyticsChart` consumes the same `ChartConfig` as v3 for
-line/area/bar/pie/donut. Tooltips are native SVG `<title>` elements;
-legends are color chips; unsupported types render an empty state.
-`useAnalytics` stays dependency-injected (`createStubAnalyticsApiClient`).
+`AnalyticsChart` consumes `ChartConfig` for line/area/bar/pie/donut. Tooltips
+are native SVG `<title>` elements; legends are color chips; unsupported types
+render an empty state. `useAnalytics` stays dependency-injected
+(`createStubAnalyticsApiClient`).
 
 ## i18n contract
 
 Components render **i18n keys**, never English strings. Bridge your runtime
-once:
+once with `@umituz/web-localization/react`:
 
 ```tsx
-import { DashboardI18nProvider } from "@umituz/web-dashboard/i18n";
+import { I18nProvider } from "@umituz/web-localization/react";
 
-<DashboardI18nProvider t={i18n.t}>  {/* i18next's t — signature already matches */}
+<I18nProvider t={i18n.t}>  {/* i18next's t — signature already matches */}
 ```
 
 Interpolation uses the standard `{{placeholder}}` syntax. Without a
@@ -200,7 +173,6 @@ readably. The per-domain key catalogs are the string contract:
 ```ts
 import { AUTH_KEYS } from "@umituz/web-dashboard/auth";
 import { ANALYTICS_KEYS } from "@umituz/web-dashboard/analytics";
-import { ONBOARDING_KEYS } from "@umituz/web-dashboard/onboarding";
 import { SETTINGS_ADMIN_KEYS } from "@umituz/web-dashboard/settings/utils";
 import { PERMISSIONS_KEYS } from "@umituz/web-dashboard/permissions";
 import { SESSION_KEYS } from "@umituz/web-dashboard/session";
@@ -223,23 +195,26 @@ npm test            # vitest unit tests (pure utils + module builders)
 npm run test:watch
 ```
 
-CI runs lint + typecheck + test on every push/PR to `main`.
-
-## Migration: 3.x → 4.0
-
-1. Billing UI: switch imports to `@umituz/web-polar-payment/portal`.
-2. Design-system imports: use `@umituz/web-dashboard/primitives`
-   (`Button`/`Input`/`Checkbox`/`Skeleton` cover the used surface).
-3. Styling: import `styles.css` once; Tailwind utility classes no longer
-   exist inside the package. Config values that used to carry Tailwind
-   strings changed: `PlatformOption.color` is a plain CSS color string,
-   `PlanOption.badgeColor` became `badgeTone: "muted" | "primary" | "accent"`.
-4. i18n: wrap your app in `DashboardI18nProvider t={i18n.t}`; the
-   `react-i18next` peer is gone.
-5. Calendar: pass your own `ICalendarDatabase` (or the in-memory default);
-   the Firebase implementation was removed.
-6. v3.2.5 behavioral notes still apply (opt-in mock auth, route skeletons
-   off by default, `PerformanceService.startMonitoring()` explicit).
+## Migration: 4.x → 5.0
+
+1. `@umituz/web-dashboard/primitives` → import `Button`/`Input`/`Checkbox`/
+   `Skeleton` from `@umituz/web-design-system/atoms` and `cn` from
+   `@umituz/web-design-system/utils/cn`.
+2. `@umituz/web-dashboard/i18n` → `DashboardI18nProvider` becomes
+   `I18nProvider` from `@umituz/web-localization/react`; `useT`, `defaultT`
+   and `TranslateFn` come from the same entry point.
+3. `@umituz/web-dashboard/tokens.css` → drop the import; `styles.css` is the
+   only stylesheet. Migrate `--u-*` overrides to the DS variables
+   (`--u-color-primary` → `--color-primary`, `--u-color-surface` →
+   `--color-card`, `--u-color-bg` → `--color-background`, `--u-color-text` →
+   `--color-foreground`, `--u-color-muted` → `--color-muted-foreground`,
+   `--u-color-surface-muted` → `--color-muted`, `--u-color-danger` →
+   `--color-destructive`) and dashboard knobs to their `--udb-*` names
+   (`--u-font-size-*` → `--udb-font-size-*`, `--u-color-border-strong` →
+   `--udb-border-strong`, `--u-sidebar-*` → `--udb-sidebar-*`, `--u-space-*` →
+   `--udb-space-*`).
+4. Dark mode: replace `data-udb-theme="dark"` with the design-system
+   convention (`[data-theme="dark"]` / `.dark` + dark DS variable values).
 
 ## License
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/web-dashboard",
-  "version": "4.7.1",
-  "description": "Installable app skeleton for the fleet — layouts, auth, analytics (dependency-free SVG charts), calendar, i18n injection, permissions/session/module registry; ships its own udb-* stylesheet and --u-* tokens",
+  "version": "5.0.1",
+  "description": "Installable app skeleton for the fleet — layouts, auth, analytics (dependency-free SVG charts), calendar, i18n via @umituz/web-localization, permissions/session/module registry; udb-* stylesheet on design-system tokens",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -11,9 +11,6 @@
   "exports": {
     ".": "./src/index.ts",
     "./styles.css": "./src/styles/dashboard.css",
-    "./tokens.css": "./src/styles/tokens.css",
-    "./primitives": "./src/primitives/index.ts",
-    "./i18n": "./src/i18n/index.ts",
     "./permissions": "./src/domains/permissions/index.ts",
     "./session": "./src/domains/session/index.ts",
     "./modules": "./src/domains/modules/index.ts",
@@ -67,8 +64,9 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "dependencies": {
-    "@umituz/web-design-system": "^4.5.3",
-    "lucide-react": "^0.577.0"
+    "@umituz/web-design-system": "^4.8.1",
+    "lucide-react": "^0.577.0",
+    "@umituz/web-localization": "^1.2.1"
   },
   "devDependencies": {
     "@types/node": "^22.20.5",

package/src/domains/analytics/components/AnalyticsCard.tsx

@@ -1,8 +1,3 @@
-/**
- * Analytics Card — chart/metric container on the design-system Card.
- * Size modifiers ("sm"/"lg") are dashboard-owned padding overrides.
- */
-
 import { Loader2, AlertCircle } from "lucide-react";
 import {
   Card,
@@ -11,7 +6,7 @@ import {
   CardDescription,
   CardContent,
 } from "@umituz/web-design-system/organisms";
-import { cn } from "../../../primitives";
+import { cn } from "@umituz/web-design-system/utils/cn";
 import type { AnalyticsCardProps } from "../types/analytics";
 import { MetricCard } from "./MetricCard";
 import { AnalyticsChart } from "./AnalyticsChart";

package/src/domains/analytics/components/AnalyticsChart.tsx

@@ -1,16 +1,6 @@
-/**
- * AnalyticsChart
- *
- * Dependency-free SVG chart renderer (line / area / bar / pie / donut).
- * Replaced the recharts wrapper in v4 — same ChartConfig contract,
- * colors from `--u-*`-friendly CSS color strings, geometry centered
- * here (no magic numbers at call sites). Tooltips are native SVG
- * <title> elements; unsupported types render the empty state.
- */
-
 import { useMemo } from "react";
-import { cn } from "../../../primitives";
-import { useT } from "../../../i18n";
+import { cn } from "@umituz/web-design-system/utils/cn";
+import { useT } from "@umituz/web-localization/react";
 import type { ChartConfig, ChartData, TimeSeriesData } from "../types/analytics";
 import { generateChartColors } from "../utils/analytics";
 import { ANALYTICS_KEYS } from "../utils/i18nKeys";
@@ -46,7 +36,6 @@ const toNumber = (value: unknown): number => {
   return Number.isFinite(num) ? num : 0;
 };
 
-/** Normalize config.data into labeled rows of series values. */
 const toRows = (
   data: TimeSeriesData[] | ChartData[],
   keys: string[],
@@ -66,7 +55,6 @@ const rowsDomain = (rows: ChartRow[]): { min: number; max: number } => {
   return { min, max };
 };
 
-/** Keep at most `X_LABEL_SAMPLE` x labels evenly spaced. */
 const shouldShowLabel = (index: number, count: number): boolean => {
   if (count <= X_LABEL_SAMPLE) return true;
   const step = Math.ceil((count - 1) / (X_LABEL_SAMPLE - 1));

package/src/domains/analytics/components/AnalyticsLayout.tsx

@@ -1,27 +1,13 @@
-/**
- * AnalyticsLayout
- *
- * Top-level analytics page shell. All actions delegate to the
- * consumer via callbacks — no console.log, no no-op handlers.
- * The legacy "kpis" prop has been removed in favor of the typed
- * `metrics` array (breaking change called out in changelog).
- */
-
 import { useMemo } from "react";
 import { RefreshCw, Download, Calendar, Loader2 } from "lucide-react";
-import { useT } from "../../../i18n";
-import { cn } from "../../../primitives";
-import { Button } from "../../../primitives";
+import { useT } from "@umituz/web-localization/react";
+import { cn } from "@umituz/web-design-system/utils/cn";
+import { Button } from "@umituz/web-design-system/atoms";
 import type { AnalyticsLayoutProps, AnalyticsPeriod } from "../types/analytics";
 import { AnalyticsCard } from "./AnalyticsCard";
 import { MetricCard } from "./MetricCard";
 import { ANALYTICS_KEYS } from "../utils/i18nKeys";
 
-/**
- * Map analytics period tokens to localized display labels.
- * Periods not in this map fall back to the raw token — better
- * to show the key than an empty select option.
- */
 const PERIOD_LABEL: Record<AnalyticsPeriod, string> = {
   '7d': ANALYTICS_KEYS.common.last7Days,
   '30d': ANALYTICS_KEYS.common.last30Days,

package/src/domains/analytics/components/MetricCard.tsx

@@ -1,12 +1,7 @@
-/**
- * MetricCard — dashboard logic (growth, i18n, a11y) on top of the
- * design-system MetricCard presentation.
- */
-
 import {
   MetricCard as DSMetricCard,
 } from "@umituz/web-design-system/organisms";
-import { useT } from "../../../i18n";
+import { useT } from "@umituz/web-localization/react";
 import type { MetricCardProps } from "../types/analytics";
 import { formatMetricValue, calculateGrowth, getTrend } from "../utils/analytics";
 import { ANALYTICS_KEYS } from "../utils/i18nKeys";

package/src/domains/analytics/utils/i18nKeys.ts

@@ -1,9 +1,4 @@
-/**
- * Analytics Domain i18n Keys
- */
-
 export const ANALYTICS_KEYS = {
-  // Common
   common: {
     export: 'analytics.common.export',
     refresh: 'analytics.common.refresh',
@@ -16,23 +11,19 @@ export const ANALYTICS_KEYS = {
     loading: 'analytics.common.loading',
   },
 
-  // Metric card
   metric: {
     noData: 'analytics.metric.noData',
     change: 'analytics.metric.change',
   },
 
-  // Analytics card
   card: {
     title: 'analytics.card.title',
   },
 
-  // Chart
   chart: {
     noData: 'analytics.chart.noData',
   },
 
-  // Layout
   layout: {
     title: 'analytics.layout.title',
     export: 'analytics.layout.export',

package/src/domains/auth/components/AuthLayout.tsx

@@ -1,22 +1,8 @@
-/**
- * Auth Layout Component
- *
- * Configurable layout wrapper for authentication pages.
- * Strings stay localizable via the optional `translate` prop; when it
- * is not provided the embedded English fallbacks are rendered.
- * Styling is entirely `udb-auth*` classes from the package stylesheet.
- */
-
 import { BrandLogo } from "../../layouts/components";
-import { cn } from "../../../primitives";
+import { cn } from "@umituz/web-design-system/utils/cn";
 import { AUTH_KEYS } from "../utils/i18nKeys";
 import type { AuthLayoutProps, Translate } from "../types/auth";
 
-/**
- * Embedded fallbacks used when no `translate` prop is supplied.
- * Keys mirror the AUTH_KEYS catalog so consumers can override
- * every string via their own i18n setup.
- */
 const DEFAULT_STRINGS: Record<string, string> = {
   [AUTH_KEYS.layout.backToHome]: "Back to home",
   [AUTH_KEYS.layout.orContinueWith]: "Or continue with",
@@ -30,20 +16,17 @@ export const AuthLayout = ({
   children,
 }: AuthLayoutProps) => {
   const t: Translate = translate ?? ((key) => DEFAULT_STRINGS[key] ?? key);
-  // Prefer an explicit home route; fall back to afterLoginRoute for backwards compatibility.
   const homeRoute = config.homeRoute ?? config.afterLoginRoute;
   const footerLinks = config.footerLinks ?? [];
 
   return (
     <div className="udb-root udb-auth">
-      {/* Header */}
       <header className="udb-auth__header">
         <div className="udb-auth__brand">
           <BrandLogo size={32} />
           <span className="udb-auth__brand-name">{config.brandName}</span>
         </div>
 
-        {/* Additional Header Content */}
         {homeRoute && (
           <a href={homeRoute} className="udb-auth__home-link">
             {t(AUTH_KEYS.layout.backToHome)}
@@ -51,33 +34,26 @@ export const AuthLayout = ({
         )}
       </header>
 
-      {/* Main Content */}
       <main className="udb-auth__main">
         <div className="udb-auth__column">
-          {/* Card Container */}
           <div className="udb-auth__card">
-            {/* Tagline */}
             {config.brandTagline && (
               <p className="udb-auth__tagline">
                 {config.brandTagline}
               </p>
             )}
 
-            {/* Children Content (Forms) */}
             {children}
           </div>
 
-          {/* Social Login */}
           {config.showSocialLogin && config.socialProviders && config.socialProviders.length > 0 && (
             <div className="udb-auth__social">
-              {/* Divider */}
               <div className="udb-divider-row">
                 <span className="udb-divider-row__label">
                   {t(AUTH_KEYS.layout.orContinueWith)}
                 </span>
               </div>
 
-              {/* Social Buttons */}
               <div className="udb-social-grid">
                 {config.socialProviders.map((provider) => (
                   <button
@@ -96,7 +72,6 @@ export const AuthLayout = ({
         </div>
       </main>
 
-      {/* Footer */}
       <footer className="udb-auth__footer">
         <div className="udb-auth__footer-inner">
           <p>

package/src/domains/auth/components/ForgotPasswordForm.tsx

@@ -1,16 +1,8 @@
-/**
- * ForgotPasswordForm
- *
- * Composed of shared auth primitives (EmailInput, AuthErrorBanner).
- * All copy is i18n-keyed; the success state uses lucide icons
- * instead of the previous `✓` Unicode glyphs.
- */
-
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useT } from "../../../i18n";
+import { useT } from "@umituz/web-localization/react";
 import { ArrowLeft, Loader2, CheckCircle2, Check } from "lucide-react";
-import { Button } from "../../../primitives";
+import { Button } from "@umituz/web-design-system/atoms";
 import type { ForgotPasswordFormProps, Translate } from "../types/auth";
 import { validateForgotPassword } from "../utils/auth";
 import { AUTH_KEYS } from "../utils/i18nKeys";
@@ -64,10 +56,6 @@ export const ForgotPasswordForm = ({
 
     setIsLoading(true);
     try {
-      // Hand off to the consumer's auth provider. The form has
-      // no network knowledge of its own — it's pure orchestration.
-      // The submitted email is passed through so the consumer can
-      // actually trigger the reset email.
       await onSuccess?.({ email });
       setSuccess(true);
     } catch (err) {

package/src/domains/auth/components/LoginForm.tsx

@@ -1,15 +1,7 @@
-/**
- * LoginForm
- *
- * Composed from shared auth primitives (EmailInput, PasswordInput,
- * AuthErrorBanner, SocialLoginButtons). The form's job is to
- * orchestrate them — UI rendering and validation live elsewhere.
- */
-
 import { useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
-import { useT } from "../../../i18n";
-import { Button, Checkbox } from "../../../primitives";
+import { useT } from "@umituz/web-localization/react";
+import { Button, Checkbox } from "@umituz/web-design-system/atoms";
 import { Loader2 } from "lucide-react";
 import { validateLogin } from "../utils/auth";
 import type {
@@ -68,11 +60,6 @@ export const LoginForm = ({
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
-  /**
-   * Auth execution. A real provider is supplied via onLoginAttempt.
-   * The mock path accepts ANY credentials and is therefore opt-in
-   * (`enableMockAuth`) — never a silent default in production builds.
-   */
   const performLogin = useCallback(
     async (credentials: LoginCredentials): Promise<User> => {
       if (onLoginAttempt) {

package/src/domains/auth/components/RegisterForm.tsx

@@ -1,18 +1,9 @@
-/**
- * RegisterForm
- *
- * Composed from shared auth primitives (EmailInput, PasswordInput,
- * PasswordStrengthIndicator, AuthErrorBanner, SocialLoginButtons).
- * Hardcoded mock user data + 1s setTimeout are gone — the form is
- * pure orchestration over the consumer's `onRegisterAttempt` provider.
- */
-
 import { useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
-import { useT } from "../../../i18n";
+import { useT } from "@umituz/web-localization/react";
 import { Loader2 } from "lucide-react";
-import { Button, Checkbox, Input } from "../../../primitives";
-import { cn } from "../../../primitives";
+import { Button, Checkbox, Input } from "@umituz/web-design-system/atoms";
+import { cn } from "@umituz/web-design-system/utils/cn";
 import type { RegisterFormProps, RegisterData, Translate } from "../types/auth";
 import { validateRegister } from "../utils/auth";
 import { AUTH_KEYS } from "../utils/i18nKeys";
@@ -101,8 +92,6 @@ export const RegisterForm = ({
       setIsLoading(true);
       try {
         if (!onRegisterAttempt) {
-          // The form has no auth provider — fail loud rather than
-          // silently inserting a mock user.
           throw new Error('No register handler configured');
         }
         const registerData: RegisterData = { email, password, name };

package/src/domains/auth/components/ResetPasswordForm.tsx

@@ -1,16 +1,9 @@
-/**
- * ResetPasswordForm
- *
- * Composed from shared auth primitives (PasswordInput, PasswordStrengthIndicator,
- * AuthErrorBanner). All copy is i18n-keyed.
- */
-
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { useT } from "../../../i18n";
+import { useT } from "@umituz/web-localization/react";
 import { Loader2, CheckCircle2 } from "lucide-react";
-import { Button, Input } from "../../../primitives";
-import { cn } from "../../../primitives";
+import { Button, Input } from "@umituz/web-design-system/atoms";
+import { cn } from "@umituz/web-design-system/utils/cn";
 import type { ResetPasswordFormProps, Translate } from "../types/auth";
 import { validateResetPassword } from "../utils/auth";
 import { AUTH_KEYS } from "../utils/i18nKeys";
@@ -68,11 +61,7 @@ export const ResetPasswordForm = ({
 
     setIsLoading(true);
     try {
-      // Hand off the actual reset to the consumer. The form is
-      // pure orchestration; no network knowledge here. Token and the
-      // new password are passed through so the consumer can persist it.
       await onSuccess?.({ token, password });
-      // Don't keep the new password in component state after completion.
       setPassword("");
       setConfirmPassword("");
       setSuccess(true);

package/src/domains/auth/components/shared/AuthErrorBanner.tsx

@@ -1,19 +1,9 @@
-/**
- * AuthErrorBanner
- *
- * Inline error display for auth forms. Renders an alert with the
- * provided i18n key resolved by the consumer's translation function.
- */
-
 import { AlertCircle } from "lucide-react";
-import { cn } from "../../../../primitives";
+import { cn } from "@umituz/web-design-system/utils/cn";
 
 export interface AuthErrorBannerProps {
-  /** i18n key for the message (already resolved by the consumer) */
   message?: string | null;
-  /** Translation function used to resolve the key */
   translate: (key: string) => string;
-  /** Optional className for layout integration */
   className?: string;
 }