@umituz/web-dashboard 6.1.0 → 6.2.0

package/src/domains/onboarding/components/OnboardingFlow.test.tsx

@@ -47,14 +47,12 @@ const minimalConfig = (overrides: Partial<OnboardingConfig> = {}): OnboardingCon
 
 type FlowProps = Omit<Partial<React.ComponentProps<typeof OnboardingFlow>>, 'config'>;
 
-/** Ephemeral render — keeps tests isolated from localStorage unless persistence is under test. */
 function renderFlow(config: OnboardingConfig, props: FlowProps = {}) {
   return render(
     <OnboardingFlow config={{ ...config, storageKey: 'test:flow' }} ephemeral {...props} />,
   );
 }
 
-/** Advance past the account gate. `onSignIn` is async — wait for the next screen. */
 async function passAccountGate(nextTitle: string) {
   fireEvent.click(screen.getByRole('button', { name: 'Continue with email' }));
   await waitFor(() => expect(screen.getByText(nextTitle)).toBeTruthy());
@@ -62,16 +60,13 @@ async function passAccountGate(nextTitle: string) {
 
 beforeEach(() => {
   window.localStorage.clear();
-  // Silence React's error-boundary logging; the boundary's own console.error
-  // is asserted behaviorally, not via the spy.
-  vi.spyOn(console, 'error').mockImplementation(() => undefined);
+      vi.spyOn(console, 'error').mockImplementation(() => undefined);
 });
 
 afterEach(() => {
   vi.restoreAllMocks();
 });
 
-// TEST_SCENARIOS.md §1.1–§1.3
 describe('OnboardingFlow — navigation', () => {
   it('renders the first screen with the progress label "Step 1 of 3"', () => {
     renderFlow(minimalConfig());
@@ -116,7 +111,6 @@ describe('OnboardingFlow — navigation', () => {
   });
 });
 
-// TEST_SCENARIOS.md §17
 describe('OnboardingFlow — analytics funnel', () => {
   it('emits started, per-step completed, and completed — each exactly once', async () => {
     const tracker = vi.fn();
@@ -145,8 +139,7 @@ describe('OnboardingFlow — analytics funnel', () => {
     const tracker = vi.fn();
     const analytics = { trackEvents: true, provider: 'custom', customTracker: tracker } as const;
     const first = renderFlow(minimalConfig({ analytics }));
-    first.unmount(); // no engagement yet -> no abandonment event
-    expect(tracker.mock.calls.map((c) => c[0].name)).not.toContain('onboarding_abandoned');
+    first.unmount();     expect(tracker.mock.calls.map((c) => c[0].name)).not.toContain('onboarding_abandoned');
 
     const second = renderFlow(minimalConfig({ analytics }));
     fireEvent.click(screen.getByRole('button', { name: 'Get started' }));
@@ -167,7 +160,6 @@ describe('OnboardingFlow — analytics funnel', () => {
   });
 });
 
-// TEST_SCENARIOS.md §1.11, §1.7, §1.8
 describe('OnboardingFlow — validation & error boundary', () => {
   it('fails fast on duplicate step ids (§1.11)', () => {
     const bad = minimalConfig({ screens: [welcome, { ...welcome }] });
@@ -213,7 +205,6 @@ describe('OnboardingFlow — validation & error boundary', () => {
   });
 });
 
-// TEST_SCENARIOS.md §1.4, §1.5
 describe('OnboardingFlow — persistence', () => {
   it('restores progress across remounts (non-ephemeral)', () => {
     const config = { ...minimalConfig(), storageKey: 'persist:1' };
@@ -259,8 +250,6 @@ describe('OnboardingFlow — labels & locale', () => {
   });
 });
 
-// TEST_SCENARIOS.md §14, §15 — with the REVISED paywall error contract:
-// a failed purchase attempt must NOT advance the user.
 describe('screens — account gate & paywall contracts', () => {
   it('account gate: no skip affordance when required (§14.1)', () => {
     renderFlow(minimalConfig());
@@ -296,8 +285,7 @@ describe('screens — account gate & paywall contracts', () => {
     await waitFor(() =>
       expect(screen.getByRole('alert').textContent).toContain('provider down'),
     );
-    expect(screen.getByText('Create your account')).toBeTruthy(); // still here
-  });
+    expect(screen.getByText('Create your account')).toBeTruthy();   });
 
   it('paywall: accept advances and fires paywall_accepted (§15.1)', async () => {
     const tracker = vi.fn();
@@ -356,8 +344,7 @@ describe('screens — account gate & paywall contracts', () => {
     await waitFor(() =>
       expect(screen.getByRole('alert').textContent).toContain('charge failed'),
     );
-    // Still on the paywall — a failed purchase must never silently advance.
-    expect(screen.getByText('Go Premium')).toBeTruthy();
+        expect(screen.getByText('Go Premium')).toBeTruthy();
     expect(onComplete).not.toHaveBeenCalled();
   });
 
@@ -378,7 +365,6 @@ describe('screens — account gate & paywall contracts', () => {
   });
 });
 
-// TEST_SCENARIOS.md §10
 describe('permission priming screen — funnel events', () => {
   const priming: OnboardingScreen = {
     id: 'perm',
@@ -423,12 +409,10 @@ describe('permission priming screen — funnel events', () => {
     await waitFor(() =>
       expect(screen.getByRole('alert').textContent).toContain('user cancelled'),
     );
-    expect(screen.getByText('Stay on track')).toBeTruthy(); // still here
-    expect(tracker.mock.calls.map((c) => c[0].name)).toContain('permission_denied');
+    expect(screen.getByText('Stay on track')).toBeTruthy();     expect(tracker.mock.calls.map((c) => c[0].name)).toContain('permission_denied');
   });
 });
 
-// TEST_SCENARIOS.md §11
 describe('processing screen — auto-advance', () => {
   it('completes each step on its timer, then advances the flow (§11.1)', async () => {
     vi.useFakeTimers();
@@ -438,30 +422,24 @@ describe('processing screen — auto-advance', () => {
         type: 'processing',
         title: 'Building your plan',
         steps: ['A', 'B', 'C'],
-        durationMs: 300, // 100ms per step
-        onComplete: () => undefined,
+        durationMs: 300,         onComplete: () => undefined,
       };
       renderFlow(minimalConfig({ screens: [welcome, processing, accountGate] }));
       fireEvent.click(screen.getByRole('button', { name: 'Get started' }));
       expect(screen.getByText('Building your plan')).toBeTruthy();
 
-      // Advance one step-timer at a time: each state update schedules the next
-      // timeout inside an effect, which only runs once act flushes the update.
-      for (let i = 0; i < 3; i++) {
+                  for (let i = 0; i < 3; i++) {
         await act(async () => {
           vi.advanceTimersByTime(100);
         });
       }
-      // All three steps completed -> the flow advanced to the account gate.
-      expect(screen.getByText('Create your account')).toBeTruthy();
+            expect(screen.getByText('Create your account')).toBeTruthy();
     } finally {
       vi.useRealTimers();
     }
   });
 });
 
-// TEST_SCENARIOS.md §19 — template regression: every template must mount
-// without an analytics crash (the old `provider: 'custom'` with no tracker).
 describe('templates — mount regression (§19)', () => {
   const cases: Array<[string, OnboardingConfig]> = [
     ['health', healthOnboardingTemplate],

package/src/domains/onboarding/components/OnboardingFlow.tsx

@@ -1,13 +1,13 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import type { OnboardingScreen } from '../types/screens';
 import type { OnboardingConfig } from '../types/config';
-import { useOnboardingProgress } from './hooks/useOnboardingProgress';
-import { useOnboardingAnalytics } from './hooks/useOnboardingAnalytics';
+import { useOnboardingProgress } from '../hooks/useOnboardingProgress';
+import { useOnboardingAnalytics } from '../hooks/useOnboardingAnalytics';
 import { OnboardingIntlProvider } from './OnboardingIntl';
-import { ProgressBar } from './shared/ProgressBar';
-import { ScreenContainer } from './shared/ScreenContainer';
-import { AnimationWrapper, type ScreenTransition } from './shared/AnimationWrapper';
-import { OnboardingErrorBoundary } from './shared/OnboardingErrorBoundary';
+import { ProgressBar } from './ProgressBar';
+import { ScreenContainer } from './ScreenContainer';
+import { AnimationWrapper, type ScreenTransition } from './AnimationWrapper';
+import { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
 import { useOnboardingIntl } from './OnboardingIntl';
 import { checkFlowStructure } from '../validation/flow-structure-check';
 import {
@@ -29,26 +29,15 @@ import {
 
 export interface OnboardingFlowProps {
   config: OnboardingConfig;
-  /** Test/Storybook hook: skip persistence. */
   ephemeral?: boolean;
-  /** Show progress bar — defaults to true. */
   showProgress?: boolean;
-  /** Show back button on non-first screens — defaults to true. */
   allowBack?: boolean;
-  /** Show skip button — defaults to true. Calls config.onSkip on click. */
   allowSkip?: boolean;
-  /** Custom label for the skip button (overrides `labels.skip`). */
   skipLabel?: string;
-  /** Transition style between screens — defaults to 'slide'. */
   transition?: ScreenTransition;
-  /** Override the default error UI from inside the boundary. */
   renderError?: (error: Error, retry: () => void) => React.ReactNode;
 }
 
-/**
- * Factory + dispatch table: maps a screen type to its component.
- * Each screen is responsible for emitting its own data shape via onNext.
- */
 type ProgressReturn = ReturnType<typeof useOnboardingProgress>;
 
 function renderScreen(
@@ -85,9 +74,6 @@ function renderScreen(
     case 'tinder-cards':
       return <TinderCardsScreen config={screen} onNext={(data) => onStepCompleted(data)} />;
     case 'personalized-solution': {
-      // Deterministic: personalization is driven by the pain-points screen's
-      // collected selections — never by "whichever screen happens to have a
-      // `selected` field".
       const painScreen = config.screens.find((s) => s.type === 'pain-points');
       const painIds = painScreen
         ? ((progress.collected[painScreen.id] as { selected?: string[] } | undefined)
@@ -129,14 +115,12 @@ function renderScreen(
         />
       );
     default: {
-      // Exhaustive check — TypeScript will flag missing cases at compile time.
       const _exhaustive: never = screen;
       return _exhaustive;
     }
   }
 }
 
-/** Back/skip affordances. Rendered inside the intl provider so label overrides apply. */
 function FlowFooterNavigation({
   allowBack,
   allowSkip,
@@ -157,24 +141,16 @@ function FlowFooterNavigation({
   const { labels } = useOnboardingIntl();
   if (!visible) return null;
   return (
-    <div className="flex items-center justify-between">
+    <div className="udb-onb-nav">
       {allowBack && !isFirst ? (
-        <button
-          type="button"
-          onClick={onBack}
-          className="text-sm font-semibold text-[rgb(var(--uob-text-muted))] underline-offset-4 hover:underline"
-        >
+        <button type="button" onClick={onBack} className="udb-onb-link">
           {labels.back}
         </button>
       ) : (
         <span />
       )}
       {allowSkip ? (
-        <button
-          type="button"
-          onClick={onSkip}
-          className="text-sm font-semibold text-[rgb(var(--uob-text-muted))] underline-offset-4 hover:underline"
-        >
+        <button type="button" onClick={onSkip} className="udb-onb-link">
           {skipLabel ?? labels.skip}
         </button>
       ) : (
@@ -184,22 +160,6 @@ function FlowFooterNavigation({
   );
 }
 
-/**
- * OnboardingFlow — the orchestrator.
- * Responsibilities (SRP):
- *  1. Validate the configured flow at mount (fail fast on bad config).
- *  2. Own the progress state machine via useOnboardingProgress.
- *  3. Dispatch the active screen via the factory above.
- *  4. Emit lifecycle analytics (started / step / completed / abandoned — each exactly once).
- *  5. Provide skip/back affordances and progress.
- *  6. Wrap everything in an Error Boundary so a single broken screen never breaks the flow.
- *
- * Does NOT own:
- *  - Styling tokens (theme/cn)
- *  - Analytics provider internals (useOnboardingAnalytics)
- *  - Storage (useOnboardingProgress)
- *  - Screen-specific UI (rendered components)
- */
 export function OnboardingFlow({
   config,
   ephemeral = false,
@@ -217,16 +177,13 @@ export function OnboardingFlow({
   });
   const analytics = useOnboardingAnalytics(config.analytics);
 
-  // Validate configuration once at mount. Surface errors rather than render broken UI.
   const validation = useMemo(() => checkFlowStructure(config.screens), [config.screens]);
   useEffect(() => {
     if (!validation.ok) {
-      throw new Error(`[web-onboarding] invalid flow: ${validation.reason}`);
+      throw new Error(`[onboarding] invalid flow: ${validation.reason}`);
     }
   }, [validation]);
 
-  // Lifecycle analytics — started fires exactly once, even if the consumer
-  // recreates the config object on every render.
   const startedRef = useRef(false);
   useEffect(() => {
     if (startedRef.current) return;
@@ -238,7 +195,6 @@ export function OnboardingFlow({
     });
   }, [analytics, config.category]);
 
-  // Completion — fires exactly once per finished run.
   const completedRef = useRef(false);
   useEffect(() => {
     if (!progress.isFinished || !progress.result) return;
@@ -252,10 +208,8 @@ export function OnboardingFlow({
     config.onComplete?.(progress.result);
   }, [progress.isFinished, progress.result, analytics, config]);
 
-  // Abandonment — when the flow unmounts without finishing AND the user had
-  // engaged (advanced at least one step), report where they dropped off.
-  // React StrictMode dev double-mounts happen before engagement, so they do not
-  // produce spurious events.
+  // Abandonment: unmount without finishing AND after engaging at least one step.
+  // StrictMode dev double-mounts happen before engagement, so no spurious events.
   const abandonSnapshotRef = useRef({ engaged: false, finished: false, currentStep: 0, startedAt: new Date() });
   useEffect(() => {
     abandonSnapshotRef.current = {
@@ -276,8 +230,6 @@ export function OnboardingFlow({
         timestamp: Date.now(),
       });
     };
-    // Config/analytics are read via closure on unmount; the effect intentionally
-    // installs once for the lifetime of the flow.
   }, []);
 
   const handleStepCompleted = useCallback(
@@ -321,7 +273,7 @@ export function OnboardingFlow({
   return (
     <OnboardingIntlProvider labels={config.labels} locale={config.locale}>
       <OnboardingErrorBoundary {...(renderError ? { renderError } : {})}>
-        <div className="uob-flow">
+        <div className="udb-onb">
           <ScreenContainer
             header={
               <>

package/src/domains/onboarding/components/OnboardingIntl.tsx

@@ -1,7 +1,6 @@
 import { createContext, useContext, useMemo, type ReactNode } from 'react';
 import type { OnboardingLabels } from '../types/labels';
 
-/** English source strings. Override any subset via `OnboardingConfig.labels`. */
 export const defaultOnboardingLabels: Readonly<OnboardingLabels> = {
   continueAction: 'Continue',
   back: 'Back',
@@ -52,7 +51,6 @@ export const defaultOnboardingLabels: Readonly<OnboardingLabels> = {
   tryAgain: 'Try again',
 };
 
-/** Replace `{placeholder}` tokens in a pattern label. */
 export function formatLabel(
   pattern: string,
   vars: Record<string, string | number>,
@@ -62,14 +60,11 @@ export function formatLabel(
   );
 }
 
-/** Labels + locale bundled for React context. */
 export interface OnboardingIntl {
   labels: Readonly<OnboardingLabels>;
-  /** BCP-47 tag used for locale-aware formatting (e.g. large counts). */
-  locale: string | undefined;
+    locale: string | undefined;
 }
 
-/** Exported for class-based consumers (error boundaries) that cannot call hooks. */
 export const OnboardingIntlContext = createContext<OnboardingIntl>({
   labels: defaultOnboardingLabels,
   locale: undefined,
@@ -81,10 +76,6 @@ export interface OnboardingIntlProviderProps {
   children: ReactNode;
 }
 
-/**
- * Provides label/locale overrides to every screen in the flow. Screens used
- * standalone (outside `OnboardingFlow`) fall back to the English defaults.
- */
 export function OnboardingIntlProvider({
   labels,
   locale,
@@ -102,7 +93,6 @@ export function OnboardingIntlProvider({
   );
 }
 
-/** Access the active labels and locale. English defaults when no provider. */
 export function useOnboardingIntl(): OnboardingIntl {
   return useContext(OnboardingIntlContext);
 }

package/src/domains/onboarding/components/PrimaryButton.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react';
+import { Button, Spinner, type ButtonProps } from '@umituz/web-design-system/atoms';
+import { useOnboardingIntl } from './OnboardingIntl';
+
+export interface PrimaryButtonProps extends ButtonProps {
+  children: ReactNode;
+  loading?: boolean;
+  fullWidth?: boolean;
+}
+
+export function PrimaryButton({
+  children,
+  loading = false,
+  fullWidth = true,
+  disabled,
+  type,
+  block,
+  ...rest
+}: PrimaryButtonProps) {
+  const { labels } = useOnboardingIntl();
+  return (
+    <Button
+      {...rest}
+      type={type ?? 'button'}
+      variant="primary"
+      size="lg"
+      block={block ?? fullWidth}
+      disabled={disabled || loading}
+    >
+      {loading ? (
+        <>
+          <Spinner size="sm" />
+          <span>{labels.loading}</span>
+        </>
+      ) : (
+        children
+      )}
+    </Button>
+  );
+}

package/src/domains/onboarding/components/ProgressBar.tsx

@@ -0,0 +1,32 @@
+import { Progress } from '@umituz/web-design-system/atoms';
+import { cn } from '@umituz/web-design-system/utils/cn';
+import { computeProgressPercentage } from '../calc/progress-percentage';
+import { formatLabel, useOnboardingIntl } from './OnboardingIntl';
+
+export interface ProgressBarProps {
+  current: number;
+  total: number;
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function ProgressBar({ current, total, className, showLabel = false }: ProgressBarProps) {
+  const { labels } = useOnboardingIntl();
+  const safeTotal = Math.max(1, total);
+  const safeCurrent = Math.max(0, Math.min(current, safeTotal));
+  const percentage = Math.round(computeProgressPercentage(safeCurrent, safeTotal));
+
+  return (
+    <div className={cn('udb-onb-progress', className)}>
+      {showLabel && (
+        <div className="udb-onb-progress__meta">
+          <span aria-live="polite">
+            {formatLabel(labels.stepOfPattern, { current: safeCurrent, total: safeTotal })}
+          </span>
+          <span aria-hidden="true">{percentage}%</span>
+        </div>
+      )}
+      <Progress value={percentage} label="Onboarding progress" />
+    </div>
+  );
+}

package/src/domains/onboarding/components/QuestionWrapper.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '@umituz/web-design-system/utils/cn';
+
+export interface QuestionWrapperProps {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function QuestionWrapper({ title, subtitle, children, className }: QuestionWrapperProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -8 }}
+      transition={{ duration: 0.25, ease: 'easeOut' }}
+      className={cn('udb-onb-question', className)}
+    >
+      <header className="udb-onb-question__head">
+        <h2 className="udb-onb-title">{title}</h2>
+        {subtitle && <p className="udb-onb-lead">{subtitle}</p>}
+      </header>
+      <div className="udb-onb-question__body">{children}</div>
+    </motion.div>
+  );
+}

package/src/domains/onboarding/components/ScreenContainer.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { cn } from '@umituz/web-design-system/utils/cn';
+
+export interface ScreenContainerProps {
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+}
+
+export function ScreenContainer({ children, header, footer, className }: ScreenContainerProps) {
+  return (
+    <div className={cn('udb-onb-screen', className)}>
+      {header && <div className="udb-onb-screen__header">{header}</div>}
+      <main className="udb-onb-screen__main">{children}</main>
+      {footer && <div className="udb-onb-screen__footer">{footer}</div>}
+    </div>
+  );
+}

package/src/domains/onboarding/components/{shared/SwipeCard.test.tsx → SwipeCard.test.tsx}

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { SwipeCard } from './SwipeCard';
-import { OnboardingIntlProvider } from '../OnboardingIntl';
+import { OnboardingIntlProvider } from './OnboardingIntl';
 
 function renderCard(props: Partial<React.ComponentProps<typeof SwipeCard>> = {}) {
   return render(
@@ -17,8 +17,6 @@ function renderCard(props: Partial<React.ComponentProps<typeof SwipeCard>> = {})
   );
 }
 
-// TEST_SCENARIOS.md §6.4 — the gesture math itself is covered in calc tests;
-// here we verify the keyboard contract and label rendering.
 describe('SwipeCard', () => {
   it('triggers onSwipeRight on ArrowRight and onSwipeLeft on ArrowLeft', () => {
     const onSwipeLeft = vi.fn();

package/src/domains/onboarding/components/{shared/SwipeCard.tsx → SwipeCard.tsx}

@@ -1,6 +1,5 @@
 import { useEffect, useRef } from 'react';
 import { motion, useMotionValue, useTransform, type PanInfo } from 'framer-motion';
-import { cn } from '../../theme/cn';
 import {
   didCrossLeftSwipeThreshold,
   didCrossRightSwipeThreshold,
@@ -10,8 +9,8 @@ import {
   SWIPE_RIGHT_OPACITY_VALUES,
   SWIPE_ROTATION_RANGE,
   SWIPE_ROTATION_VALUES,
-} from '../../calc/swipe-gesture-curve';
-import { useOnboardingIntl } from '../OnboardingIntl';
+} from '../calc/swipe-gesture-curve';
+import { useOnboardingIntl } from './OnboardingIntl';
 
 export interface SwipeCardProps {
   text: string;
@@ -21,13 +20,7 @@ export interface SwipeCardProps {
   className?: string;
 }
 
-interface GestureOptions {
-  onSwipeLeft: () => void;
-  onSwipeRight: () => void;
-}
-
-function useSwipeGestures({ onSwipeLeft, onSwipeRight }: GestureOptions) {
-  // Refs avoid stale closures — the gesture handlers always see the latest callbacks.
+function useSwipeGestures({ onSwipeLeft, onSwipeRight }: { onSwipeLeft: () => void; onSwipeRight: () => void }) {
   const leftRef = useRef(onSwipeLeft);
   const rightRef = useRef(onSwipeRight);
   useEffect(() => {
@@ -43,13 +36,6 @@ function useSwipeGestures({ onSwipeLeft, onSwipeRight }: GestureOptions) {
   };
 }
 
-/**
- * Tinder-style swipeable card.
- * Single responsibility: gesture handling and visual feedback for one statement.
- * Keyboard-accessible: ← / → keys trigger the same actions as swipe gestures.
- *
- * All numeric thresholds and curve points live in `calc/swipe-gesture-curve`.
- */
 export function SwipeCard({ text, category, onSwipeLeft, onSwipeRight, className }: SwipeCardProps) {
   const { labels } = useOnboardingIntl();
   const x = useMotionValue(0);
@@ -60,7 +46,7 @@ export function SwipeCard({ text, category, onSwipeLeft, onSwipeRight, className
 
   return (
     <div
-      className={cn('relative h-72 w-full select-none focus:outline-none', className)}
+      className={className ? `udb-onb-swipe ${className}` : 'udb-onb-swipe'}
       role="group"
       aria-label={`${text} — ${labels.swipeHint}`}
       tabIndex={0}
@@ -79,25 +65,21 @@ export function SwipeCard({ text, category, onSwipeLeft, onSwipeRight, className
         drag="x"
         dragConstraints={{ left: 0, right: 0 }}
         onDragEnd={onDragEnd}
-        className="flex h-full w-full cursor-grab flex-col items-center justify-center rounded-2xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-8 text-center shadow-lg active:cursor-grabbing"
+        className="udb-onb-swipe__card"
       >
-        {category && (
-          <span className="mb-4 text-xs font-semibold uppercase tracking-wide text-[rgb(var(--uob-primary-500))]">
-            {category}
-          </span>
-        )}
-        <p className="text-xl font-medium text-[rgb(var(--uob-text-primary))]">{text}</p>
-        <p className="mt-6 text-sm text-[rgb(var(--uob-text-muted))]">{labels.swipeHint}</p>
+        {category && <span className="udb-onb-swipe__category">{category}</span>}
+        <p className="udb-onb-swipe__text">{text}</p>
+        <p className="udb-onb-swipe__hint">{labels.swipeHint}</p>
       </motion.div>
       <motion.div
         style={{ opacity: leftOpacity }}
-        className="pointer-events-none absolute left-4 top-4 rounded-md border-2 border-[rgb(var(--uob-error))] px-3 py-1 text-sm font-bold uppercase text-[rgb(var(--uob-error))]"
+        className="udb-onb-swipe__stamp udb-onb-swipe__stamp--no"
       >
         {labels.disagree}
       </motion.div>
       <motion.div
         style={{ opacity: rightOpacity }}
-        className="pointer-events-none absolute right-4 top-4 rounded-md border-2 border-[rgb(var(--uob-success))] px-3 py-1 text-sm font-bold uppercase text-[rgb(var(--uob-success))]"
+        className="udb-onb-swipe__stamp udb-onb-swipe__stamp--yes"
       >
         {labels.agree}
       </motion.div>

package/src/domains/onboarding/components/renderBundledIcon.tsx

@@ -0,0 +1,7 @@
+import { resolveIconByName } from '../predicates/icon-name-resolves';
+
+export function renderBundledIcon(name: string | undefined, className?: string) {
+  const Icon = resolveIconByName(name);
+  if (!Icon) return null;
+  return <Icon className={className} aria-hidden="true" />;
+}

package/src/domains/onboarding/components/screens/AccountGateScreen.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { PrimaryButton } from '../shared/PrimaryButton';
+import { PrimaryButton } from '../PrimaryButton';
 import {
   accountGateAllowsSkip,
   hasOnSignIn,
@@ -31,9 +31,6 @@ export function AccountGateScreen({ config, onNext }: AccountGateScreenProps) {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Step lifecycle analytics (`onboarding_step_completed`) are owned by the
-  // orchestrator — the screen stays presentation-only.
-
   async function handleSignIn(method: SignInMethod) {
     setBusy(true);
     setError(null);
@@ -49,22 +46,15 @@ export function AccountGateScreen({ config, onNext }: AccountGateScreenProps) {
   }
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-6 text-center">
-      {config.title && (
-        <h2 className="text-3xl font-bold text-[rgb(var(--uob-text-primary))]">{config.title}</h2>
-      )}
-      {config.subtitle && (
-        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
-      )}
+    <div className="udb-onb-stage">
+      {config.title && <h2 className="udb-onb-title udb-onb-title--display">{config.title}</h2>}
+      {config.subtitle && <p className="udb-onb-lead">{config.subtitle}</p>}
       {error && (
-        <p
-          role="alert"
-          className="w-full rounded-md border border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-error))]/10 p-3 text-sm text-[rgb(var(--uob-error))]"
-        >
+        <p role="alert" className="udb-onb-error">
           {error}
         </p>
       )}
-      <div className="flex w-full flex-col gap-3">
+      <div className="udb-onb-question__body">
         {config.signInMethod && hasOnSignIn(config) && (
           <PrimaryButton
             onClick={() => handleSignIn(config.signInMethod as SignInMethod)}
@@ -78,7 +68,7 @@ export function AccountGateScreen({ config, onNext }: AccountGateScreenProps) {
             type="button"
             disabled={busy}
             onClick={() => onNext({ signedIn: false })}
-            className="text-sm font-semibold text-[rgb(var(--uob-text-muted))] underline-offset-4 hover:underline disabled:opacity-50"
+            className="udb-onb-link"
           >
             {config.skipText ?? labels.skipForNow}
           </button>