@umituz/web-dashboard 6.1.0 → 6.2.1

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

@@ -1,8 +1,9 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Star } from 'lucide-react';
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { cn } from '../../theme/cn';
+import { PrimaryButton } from '../PrimaryButton';
+import { Button } from '@umituz/web-design-system/atoms';
+import { cn } from '@umituz/web-design-system/utils/cn';
 import { useOnboardingIntl } from '../OnboardingIntl';
 import type { SocialProofScreenConfig } from '../../types/screens';
 
@@ -22,13 +23,9 @@ export function SocialProofScreen({ config, onNext }: SocialProofScreenProps) {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-8">
-      {config.title && (
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {config.title}
-        </h2>
-      )}
-      <div className="flex flex-1 flex-col items-center justify-center">
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      <div className="udb-onb-proof__stage">
         <AnimatePresence mode="wait">
           <motion.blockquote
             key={`${current.name}-${index}`}
@@ -36,42 +33,29 @@ export function SocialProofScreen({ config, onNext }: SocialProofScreenProps) {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -12 }}
             transition={{ duration: 0.3 }}
-            className="flex max-w-xl flex-col items-center gap-4 rounded-2xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-8 text-center"
+            className="udb-onb-quote"
           >
             {current.rating !== undefined && (
-              <div className="flex items-center gap-1" aria-label={`Rated ${current.rating} out of 5`}>
+              <div className="udb-onb-quote__stars" aria-label={`Rated ${current.rating} out of 5`}>
                 {Array.from({ length: 5 }).map((_, i) => (
                   <Star
                     key={i}
-                    className={cn(
-                      'h-5 w-5',
-                      i < current.rating!
-                        ? 'fill-current text-[rgb(var(--uob-warning))]'
-                        : 'text-[rgb(var(--uob-border))]',
-                    )}
+                    className={cn('udb-onb-quote__star', i < current.rating! && 'udb-onb-quote__star--filled')}
                   />
                 ))}
               </div>
             )}
-            <p className="text-lg text-[rgb(var(--uob-text-primary))]">“{current.content}”</p>
-            <footer className="flex flex-col items-center gap-1">
-              {current.avatar && (
-                <img
-                  src={current.avatar}
-                  alt=""
-                  className="h-12 w-12 rounded-full object-cover"
-                />
-              )}
-              <cite className="text-sm font-semibold not-italic text-[rgb(var(--uob-text-primary))]">
-                {current.name}
-              </cite>
-              <span className="text-sm text-[rgb(var(--uob-text-muted))]">{current.role}</span>
+            <p className="udb-onb-quote__content">“{current.content}”</p>
+            <footer className="udb-onb-quote__footer">
+              {current.avatar && <img src={current.avatar} alt="" className="udb-onb-quote__avatar" />}
+              <cite className="udb-onb-quote__cite">{current.name}</cite>
+              <span className="udb-onb-quote__role">{current.role}</span>
             </footer>
           </motion.blockquote>
         </AnimatePresence>
       </div>
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex gap-1.5" role="tablist" aria-label="Testimonials">
+      <div className="udb-onb-proof__bar">
+        <div className="udb-onb-dots" role="tablist" aria-label="Testimonials">
           {config.testimonials.map((t, i) => (
             <button
               key={`${t.name}-${i}`}
@@ -80,32 +64,19 @@ export function SocialProofScreen({ config, onNext }: SocialProofScreenProps) {
               aria-selected={i === index}
               aria-label={`${t.name}: ${t.content}`}
               onClick={() => setIndex(i)}
-              className={cn(
-                'h-2 w-2 rounded-full transition-all',
-                i === index
-                  ? 'w-6 bg-[rgb(var(--uob-primary-500))]'
-                  : 'bg-[rgb(var(--uob-border))]',
-              )}
+              className={cn('udb-onb-dot', i === index && 'udb-onb-dot--active')}
             />
           ))}
         </div>
-        <div className="flex gap-2">
+        <div className="udb-onb-proof__nav">
           {total > 1 && (
             <>
-              <button
-                type="button"
-                onClick={() => go(-1)}
-                className="rounded-md border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-3 py-1 text-sm hover:bg-[rgb(var(--uob-surface-muted))]"
-              >
+              <Button variant="outline" size="sm" onClick={() => go(-1)}>
                 {labels.previous}
-              </button>
-              <button
-                type="button"
-                onClick={() => go(1)}
-                className="rounded-md border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-3 py-1 text-sm hover:bg-[rgb(var(--uob-surface-muted))]"
-              >
+              </Button>
+              <Button variant="outline" size="sm" onClick={() => go(1)}>
                 {labels.nextAction}
-              </button>
+              </Button>
             </>
           )}
         </div>

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

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { SwipeCard } from '../shared/SwipeCard';
-import { PrimaryButton } from '../shared/PrimaryButton';
+import { SwipeCard } from '../SwipeCard';
+import { PrimaryButton } from '../PrimaryButton';
 import {
   getCardEnterAnimate,
   getCardEnterExit,
@@ -22,9 +22,7 @@ export function TinderCardsScreen({ config, onNext }: TinderCardsScreenProps) {
   const [liked, setLiked] = useState<string[]>([]);
   const total = config.statements.length;
   const current = config.statements[index];
-  // Refs make decision handlers always see the latest state without recreating callbacks
-  // on every index change — which would have remounted SwipeCard and lost gestures.
-  const indexRef = useRef(index);
+      const indexRef = useRef(index);
   const likedRef = useRef(liked);
   useEffect(() => {
     indexRef.current = index;
@@ -46,8 +44,8 @@ export function TinderCardsScreen({ config, onNext }: TinderCardsScreenProps) {
 
   if (!current) {
     return (
-      <div className="flex flex-1 flex-col items-center justify-center gap-6">
-        <p className="text-lg text-[rgb(var(--uob-text-primary))]">{labels.allDone}</p>
+      <div className="udb-onb-stage">
+        <p className="udb-onb-lead">{labels.allDone}</p>
         <PrimaryButton onClick={() => onNext({ liked: likedRef.current })}>
           {config.cta ?? labels.continueAction}
         </PrimaryButton>
@@ -56,13 +54,9 @@ export function TinderCardsScreen({ config, onNext }: TinderCardsScreenProps) {
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-6">
-      {config.title && (
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {config.title}
-        </h2>
-      )}
-      <div className="flex flex-1 items-center justify-center">
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      <div className="udb-onb-proof__stage">
         <AnimatePresence mode="wait">
           <motion.div
             key={current.id}
@@ -70,7 +64,7 @@ export function TinderCardsScreen({ config, onNext }: TinderCardsScreenProps) {
             animate={{ opacity: getCardEnterAnimate().opacity, scale: getCardEnterAnimate().scale }}
             exit={{ opacity: getCardEnterExit().opacity, scale: getCardEnterExit().scale }}
             transition={{ duration: getCardTransitionDurationMs() / 1000 }}
-            className="w-full"
+            className="udb-onb-stage"
           >
             <SwipeCard
               text={current.text}
@@ -81,26 +75,15 @@ export function TinderCardsScreen({ config, onNext }: TinderCardsScreenProps) {
           </motion.div>
         </AnimatePresence>
       </div>
-      <div className="flex items-center justify-between gap-2">
-        <button
-          type="button"
-          onClick={onSwipeLeft}
-          className="flex-1 rounded-xl border-2 border-[rgb(var(--uob-error))] py-3 font-semibold text-[rgb(var(--uob-error))] transition-colors hover:bg-[rgb(var(--uob-error))] hover:text-white"
-        >
+      <div className="udb-onb-proof__nav">
+        <button type="button" onClick={onSwipeLeft} className="udb-onb-choice udb-onb-choice--no">
           {labels.disagree}
         </button>
-        <button
-          type="button"
-          onClick={onSwipeRight}
-          className="flex-1 rounded-xl border-2 border-[rgb(var(--uob-success))] py-3 font-semibold text-[rgb(var(--uob-success))] transition-colors hover:bg-[rgb(var(--uob-success))] hover:text-white"
-        >
+        <button type="button" onClick={onSwipeRight} className="udb-onb-choice udb-onb-choice--yes">
           {labels.agree}
         </button>
       </div>
-      <p
-        className="text-center text-sm text-[rgb(var(--uob-text-muted))]"
-        aria-live="polite"
-      >
+      <p className="udb-onb-note" aria-live="polite">
         {formatLabel(labels.countOfPattern, { current: index + 1, total })}
       </p>
     </div>

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

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
+import { Button } from '@umituz/web-design-system/atoms';
 import { Sparkles } from 'lucide-react';
-import { PrimaryButton } from '../shared/PrimaryButton';
+import { PrimaryButton } from '../PrimaryButton';
 import { useOnboardingIntl } from '../OnboardingIntl';
 import type { ValueDeliveryScreenConfig } from '../../types/screens';
 
@@ -9,11 +10,6 @@ export interface ValueDeliveryScreenProps<TResult = unknown> {
   onNext: () => void;
 }
 
-/**
- * Shows the artifact produced earlier in the flow.
- * The default body is a JSON dump of `result` — deliberately generic. Screens are
- * expected to be customized per product; this default keeps templates runnable.
- */
 export function ValueDeliveryScreen<TResult = unknown>({
   config,
   onNext,
@@ -44,38 +40,26 @@ export function ValueDeliveryScreen<TResult = unknown>({
         copiedTimer.current = window.setTimeout(() => setCopied(false), 2000);
       }
     } catch (error) {
-      // navigator.share rejects with AbortError when the user dismisses the sheet —
-      // that is an expected outcome, not a failure worth logging.
-      if (!(error instanceof DOMException && error.name === 'AbortError')) {
-         
-        console.error('[web-onboarding] share failed', error);
+            if (!(error instanceof DOMException && error.name === 'AbortError')) {
+        console.error('[onboarding] share failed', error);
       }
     }
   }
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-6 text-center">
-      <div
-        className="flex h-20 w-20 items-center justify-center rounded-2xl bg-[rgb(var(--uob-primary-50))] text-[rgb(var(--uob-primary-500))]"
-        aria-hidden="true"
-      >
-        <Sparkles className="h-10 w-10" />
+    <div className="udb-onb-stage">
+      <div className="udb-onb-hero udb-onb-hero--lg" aria-hidden="true">
+        <Sparkles className="udb-onb-icon--lg" />
       </div>
-      <h2 className="text-3xl font-bold text-[rgb(var(--uob-text-primary))]">{config.title}</h2>
-      <div className="w-full max-w-md rounded-2xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-6 text-left">
-        <pre className="overflow-x-auto whitespace-pre-wrap text-sm text-[rgb(var(--uob-text-primary))]">
-          {JSON.stringify(config.result, null, 2)}
-        </pre>
+      <h2 className="udb-onb-title udb-onb-title--display">{config.title}</h2>
+      <div className="udb-onb-result">
+        <pre className="udb-onb-result__pre">{JSON.stringify(config.result, null, 2)}</pre>
       </div>
       {config.shareConfig && (
-        <div className="flex flex-col items-center gap-1 text-sm text-[rgb(var(--uob-text-muted))]">
-          <button
-            type="button"
-            onClick={handleShare}
-            className="rounded-xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-4 py-2 text-sm font-semibold text-[rgb(var(--uob-text-primary))] transition-colors hover:border-[rgb(var(--uob-primary-500))]"
-          >
+        <div className="udb-onb-share">
+          <Button variant="outline" size="sm" onClick={handleShare}>
             {copied ? labels.copied : labels.share}
-          </button>
+          </Button>
           <span>{config.shareConfig.text}</span>
         </div>
       )}

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

@@ -1,5 +1,5 @@
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { renderBundledIcon } from '../shared/renderBundledIcon';
+import { PrimaryButton } from '../PrimaryButton';
+import { renderBundledIcon } from '../renderBundledIcon';
 import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
 import { useOnboardingIntl } from '../OnboardingIntl';
 import type { WelcomeScreenConfig } from '../../types/screens';
@@ -13,40 +13,20 @@ export interface WelcomeScreenProps {
 export function WelcomeScreen({ config, onNext, isLoading }: WelcomeScreenProps) {
   const { labels } = useOnboardingIntl();
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-8 text-center">
+    <div className="udb-onb-stage udb-onb-stage--wide">
       {doesIconNameResolve(config.heroIconName) && (
-        <div
-          className="flex h-24 w-24 items-center justify-center rounded-3xl bg-[rgb(var(--uob-primary-50))] text-[rgb(var(--uob-primary-500))]"
-          aria-hidden="true"
-        >
-          {renderBundledIcon(config.heroIconName, 'h-12 w-12')}
+        <div className="udb-onb-hero udb-onb-hero--xl" aria-hidden="true">
+          {renderBundledIcon(config.heroIconName, 'udb-onb-icon--xl')}
         </div>
       )}
-      <div className="flex flex-col gap-3">
-        {config.title && (
-          <h1 className="text-4xl font-bold text-[rgb(var(--uob-text-primary))] sm:text-5xl">
-            {config.title}
-          </h1>
-        )}
-        {config.subtitle && (
-          <p className="text-lg text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
-        )}
-        {config.highlight && (
-          <p className="text-sm font-semibold uppercase tracking-wide text-[rgb(var(--uob-primary-500))]">
-            {config.highlight}
-          </p>
-        )}
+      <div className="udb-onb-welcome__group">
+        {config.title && <h1 className="udb-onb-welcome__title">{config.title}</h1>}
+        {config.subtitle && <p className="udb-onb-welcome__subtitle">{config.subtitle}</p>}
+        {config.highlight && <p className="udb-onb-welcome__highlight">{config.highlight}</p>}
       </div>
-      {config.cta && (
-        <PrimaryButton onClick={config.onCta ?? onNext} loading={isLoading}>
-          {config.cta}
-        </PrimaryButton>
-      )}
-      {!config.cta && (
-        <PrimaryButton onClick={config.onCta ?? onNext} loading={isLoading}>
-          {labels.continueAction}
-        </PrimaryButton>
-      )}
+      <PrimaryButton onClick={config.onCta ?? onNext} loading={isLoading}>
+        {config.cta ?? labels.continueAction}
+      </PrimaryButton>
     </div>
   );
 }

package/src/domains/onboarding/{components/hooks → hooks}/useOnboardingAnalytics.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi } from 'vitest';
 import { renderHook } from '@testing-library/react';
 import { useOnboardingAnalytics } from './useOnboardingAnalytics';
-import type { OnboardingAnalyticsEvent } from '../../types/config';
+import type { OnboardingAnalyticsEvent } from '../types/config';
 
 const event: OnboardingAnalyticsEvent = {
   name: 'onboarding_step_completed',

package/src/domains/onboarding/{components/hooks → hooks}/useOnboardingAnalytics.ts

@@ -2,28 +2,15 @@ import { useCallback, useEffect, useMemo, useRef } from 'react';
 import type {
   AnalyticsConfig,
   OnboardingAnalyticsEvent,
-} from '../../types/config';
-import { trackOnboardingEvent } from '../../utils/analytics-dispatch';
+} from '../types/config';
+import { trackOnboardingEvent } from '../utils/analytics-dispatch';
 
 export interface UseOnboardingAnalyticsReturn {
   trackEvent: (event: OnboardingAnalyticsEvent) => void;
-  /** Alias of `trackEvent` kept for call-site readability on funnel events. */
-  trackFunnel: (event: OnboardingAnalyticsEvent) => void;
+    trackFunnel: (event: OnboardingAnalyticsEvent) => void;
   enabled: boolean;
 }
 
-/**
- * Hook façade for analytics dispatch.
- * Single responsibility: provide a stable callback that honors the analytics config.
- *
- * The returned callbacks are identity-stable across re-renders even when the
- * consumer recreates the `config` object every render — event handlers and
- * effects that depend on them do not re-fire spuriously. The latest config is
- * read through a ref synchronized after each commit.
- *
- * Dispatch never throws: analytics failures are logged by the dispatcher and
- * dropped (see `utils/analytics-dispatch`).
- */
 export function useOnboardingAnalytics(config: AnalyticsConfig | undefined): UseOnboardingAnalyticsReturn {
   const configRef = useRef(config);
   useEffect(() => {

package/src/domains/onboarding/{components/hooks → hooks}/useOnboardingProgress.test.tsx

@@ -1,8 +1,8 @@
 import { describe, it, expect, beforeEach } from 'vitest';
 import { act, renderHook } from '@testing-library/react';
 import { useOnboardingProgress } from './useOnboardingProgress';
-import { defaultStorageKey } from '../../utils/default-storage-key';
-import type { OnboardingScreen } from '../../types/screens';
+import { defaultStorageKey } from '../utils/default-storage-key';
+import type { OnboardingScreen } from '../types/screens';
 
 function makeScreens(count: number): OnboardingScreen[] {
   return Array.from({ length: count }, (_, i) => ({

package/src/domains/onboarding/{components/hooks → hooks}/useOnboardingProgress.ts

@@ -1,21 +1,21 @@
 import { useCallback, useEffect, useMemo, useReducer } from 'react';
-import type { OnboardingScreen } from '../../types/screens';
-import type { OnboardingResult } from '../../types/config';
+import type { OnboardingScreen } from '../types/screens';
+import type { OnboardingResult } from '../types/config';
 import {
   advanceStepIndex,
   clampStepIndex,
   retreatStepIndex,
-} from '../../calc/step-index-clamp';
+} from '../calc/step-index-clamp';
 import {
   computeProgressFraction,
   computeRemainingSteps,
-} from '../../calc/progress-percentage';
+} from '../calc/progress-percentage';
 import {
   buildOnboardingResult,
   clearOnboardingProgress,
   loadOnboardingProgress,
   saveOnboardingProgress,
-} from '../../utils/local-storage-bridge';
+} from '../utils/local-storage-bridge';
 
 interface ProgressState {
   currentStep: number;
@@ -97,22 +97,19 @@ function reducer(state: ProgressState, action: ProgressAction): ProgressState {
 interface UseOnboardingProgressOptions {
   screens: ReadonlyArray<OnboardingScreen>;
   storageKey?: string;
-  /** Disable persistence (e.g. tests, ephemeral previews). */
-  ephemeral?: boolean;
+    ephemeral?: boolean;
 }
 
 export interface UseOnboardingProgressReturn {
   currentStep: number;
   totalSteps: number;
-  progress: number; // 0..1
-  completedSteps: ReadonlyArray<string>;
+  progress: number;   completedSteps: ReadonlyArray<string>;
   collected: Record<string, unknown>;
   remainingSteps: number;
   isFirst: boolean;
   isLast: boolean;
   isFinished: boolean;
-  /** When the current run started (restored from storage on rehydration). */
-  startedAt: Date;
+    startedAt: Date;
   next: (data?: unknown) => void;
   prev: () => void;
   goTo: (index: number) => void;
@@ -121,11 +118,6 @@ export interface UseOnboardingProgressReturn {
   result: OnboardingResult | null;
 }
 
-/**
- * Owns the state machine for an onboarding flow.
- * Single responsibility: step transitions, persistence, completion.
- * Math is delegated to `src/calc/`; storage I/O to `src/utils/local-storage-bridge`.
- */
 export function useOnboardingProgress(
   options: UseOnboardingProgressOptions,
 ): UseOnboardingProgressReturn {
@@ -157,14 +149,11 @@ export function useOnboardingProgress(
       lastUpdated: now,
       finishedAt: null,
     };
-    // useReducer reads `initialState` only on mount, so this is effectively mount-only.
-    // We recompute if the screen set actually changes (different totalSteps).
-  }, [totalSteps, storageKey, ephemeral]);
+          }, [totalSteps, storageKey, ephemeral]);
 
   const [state, dispatch] = useReducer(reducer, initialState);
 
-  // Persist whenever the state changes.
-  useEffect(() => {
+    useEffect(() => {
     if (ephemeral) return;
     saveOnboardingProgress(storageKey, {
       currentStep: state.currentStep,

package/src/domains/onboarding/{components/hooks → hooks}/usePermissionPriming.ts

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import type { PermissionStatus, PermissionType } from '../../types/screens';
+import type { PermissionStatus, PermissionType } from '../types/screens';
 import {
   isPermissionDecided,
   isPermissionUnsupported,
-} from '../../predicates/permission-granted';
-import { queryPermissionStatus, requestPermission } from '../../utils/permission-bridge';
+} from '../predicates/permission-granted';
+import { queryPermissionStatus, requestPermission } from '../utils/permission-bridge';
 
 export interface UsePermissionPrimingReturn {
   status: PermissionStatus;
@@ -13,13 +13,6 @@ export interface UsePermissionPrimingReturn {
   reset: () => void;
 }
 
-/**
- * Owns permission state for a single permission type.
- * Single responsibility: query + request lifecycle, no UI.
- *
- * The `requestPermission` callback is a no-op (returns the current status)
- * once the permission has been decided or the runtime reports no support.
- */
 export function usePermissionPriming(permission: PermissionType): UsePermissionPrimingReturn {
   const [status, setStatus] = useState<PermissionStatus>('prompt');
   const [isRequesting, setIsRequesting] = useState(false);

package/src/domains/onboarding/{components/hooks → hooks}/useReducedMotion.ts

@@ -1,10 +1,5 @@
 import { useEffect, useState } from 'react';
 
-/**
- * Detects the user's `prefers-reduced-motion` setting.
- * Single responsibility: surface the OS-level preference to consumers so
- * motion-heavy UI (Framer Motion, transitions) can opt out for accessibility.
- */
 export function useReducedMotion(): boolean {
   const getInitial = (): boolean => {
     if (typeof window === 'undefined' || !window.matchMedia) return false;

package/src/domains/onboarding/index.ts

@@ -1,16 +1,6 @@
-/**
- * @umituz/web-onboarding — Public API surface.
- * Designed for tree-shaking: only import what you use.
- */
-
-import './theme/index.css';
-
-// Orchestrator (the entry point)
 export { OnboardingFlow } from './components/OnboardingFlow';
 export type { OnboardingFlowProps } from './components/OnboardingFlow';
 
-// Localization / labels (i18n hooks for consumers + class-component access
-// to the same context the function components use)
 export {
   OnboardingIntlProvider,
   OnboardingIntlContext,
@@ -20,7 +10,6 @@ export {
 } from './components/OnboardingIntl';
 export type { OnboardingIntl, OnboardingIntlProviderProps } from './components/OnboardingIntl';
 
-// Screens
 export {
   WelcomeScreen,
   GoalQuestionScreen,
@@ -38,33 +27,33 @@ export {
   PaywallScreen,
 } from './components/screens';
 
-// Shared / atomic
-export {
-  ProgressBar,
-  QuestionWrapper,
-  OptionCard,
-  SwipeCard,
-  AnimationWrapper,
-  ScreenContainer,
-  PrimaryButton,
-  OnboardingErrorBoundary,
-} from './components/shared';
-export type { ScreenTransition } from './components/shared';
+export { ProgressBar } from './components/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar';
+export { QuestionWrapper } from './components/QuestionWrapper';
+export type { QuestionWrapperProps } from './components/QuestionWrapper';
+export { SwipeCard } from './components/SwipeCard';
+export type { SwipeCardProps } from './components/SwipeCard';
+export { AnimationWrapper } from './components/AnimationWrapper';
+export type { AnimationWrapperProps, ScreenTransition } from './components/AnimationWrapper';
+export { ScreenContainer } from './components/ScreenContainer';
+export type { ScreenContainerProps } from './components/ScreenContainer';
+export { PrimaryButton } from './components/PrimaryButton';
+export type { PrimaryButtonProps } from './components/PrimaryButton';
+export { OnboardingErrorBoundary } from './components/OnboardingErrorBoundary';
+export type { OnboardingErrorBoundaryProps } from './components/OnboardingErrorBoundary';
 
-// Hooks
 export {
   useOnboardingProgress,
   usePermissionPriming,
   useOnboardingAnalytics,
   useReducedMotion,
-} from './components/hooks';
+} from './hooks';
 export type {
   UseOnboardingProgressReturn,
   UsePermissionPrimingReturn,
   UseOnboardingAnalyticsReturn,
-} from './components/hooks';
+} from './hooks';
 
-// Templates
 export {
   healthOnboardingTemplate,
   artOnboardingTemplate,
@@ -76,7 +65,6 @@ export {
 } from './templates';
 export type { TemplateDemoResult } from './templates';
 
-// Calculations (pure math)
 export {
   computeProgressFraction,
   computeProgressPercentage,
@@ -107,7 +95,6 @@ export {
 } from './calc';
 export type { CardMotionState } from './calc';
 
-// Validation
 export {
   checkFlowStructure,
   checkScreenConfig,
@@ -118,7 +105,6 @@ export {
 } from './validation';
 export type { ValidationOutcome, StoredProgressShape, StoredProgressOutcome } from './validation';
 
-// Predicates
 export {
   isPermissionGranted,
   isPermissionDenied,
@@ -140,7 +126,6 @@ export {
   screenEmitsData,
 } from './predicates';
 
-// I/O utilities
 export {
   trackOnboardingEvent,
   dispatchAnalyticsEvent,
@@ -154,20 +139,6 @@ export {
 } from './utils';
 export type { RehydratedProgress } from './utils';
 
-// Theme tokens (for consumers that want to rebrand)
-export {
-  spacing,
-  radius,
-  typography,
-  zIndex,
-  motion as motionTokens,
-  breakpoint,
-  colorCssVar,
-  cn,
-} from './theme';
-export type { SpacingToken, RadiusToken, FontSizeToken } from './theme';
-
-// Types
 export type {
   OnboardingScreen,
   OnboardingScreenType,