@umituz/web-dashboard 5.0.1 → 6.1.0

package/src/domains/onboarding/components/shared/OptionCard.tsx

@@ -0,0 +1,73 @@
+import { motion } from 'framer-motion';
+import { cn } from '../../theme/cn';
+import { renderBundledIcon } from './renderBundledIcon';
+import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
+import type { OnboardingOption } from '../../types/screens';
+
+export interface OptionCardProps {
+  option: OnboardingOption;
+  selected: boolean;
+  onToggle: (id: string) => void;
+  multiSelect?: boolean;
+  className?: string;
+}
+
+/**
+ * Selectable option card with optional icon.
+ * Single responsibility: render one option and emit toggle events.
+ */
+export function OptionCard({ option, selected, onToggle, multiSelect = false, className }: OptionCardProps) {
+  return (
+    <motion.button
+      type="button"
+      role={multiSelect ? 'checkbox' : 'radio'}
+      aria-checked={selected}
+      onClick={() => onToggle(option.id)}
+      whileTap={{ scale: 0.98 }}
+      className={cn(
+        'flex w-full items-center gap-3 rounded-xl border p-4 text-left transition-colors',
+        'focus:outline-none focus:ring-2 focus:ring-[rgb(var(--uob-primary-500))] focus:ring-offset-2',
+        selected
+          ? 'border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))]'
+          : 'border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] hover:border-[rgb(var(--uob-primary-100))]',
+        className,
+      )}
+    >
+      {doesIconNameResolve(option.iconName) && (
+        <span
+          className={cn(
+            'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg',
+            selected
+              ? 'bg-[rgb(var(--uob-primary-500))] text-white'
+              : 'bg-[rgb(var(--uob-surface-muted))] text-[rgb(var(--uob-text-muted))]',
+          )}
+        >
+          {renderBundledIcon(option.iconName, 'h-5 w-5')}
+        </span>
+      )}
+      <span className="flex flex-1 flex-col">
+        <span className="text-base font-medium text-[rgb(var(--uob-text-primary))]">
+          {option.label}
+        </span>
+        {option.description && (
+          <span className="text-sm text-[rgb(var(--uob-text-muted))]">{option.description}</span>
+        )}
+      </span>
+      <span
+        className={cn(
+          'flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2',
+          selected
+            ? 'border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-500))] text-white'
+            : 'border-[rgb(var(--uob-border))]',
+        )}
+        aria-hidden="true"
+      >
+        {selected && (
+          <svg viewBox="0 0 12 12" className="h-3 w-3" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M2 6 L5 9 L10 3" />
+          </svg>
+        )}
+      </span>
+    </motion.button>
+  );
+}

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

@@ -0,0 +1,58 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { motion, type HTMLMotionProps } from 'framer-motion';
+import { cn } from '../../theme/cn';
+import { useOnboardingIntl } from '../OnboardingIntl';
+
+export interface PrimaryButtonProps
+  extends Omit<HTMLMotionProps<'button'>, 'children'> {
+  children: ReactNode;
+  loading?: boolean;
+  fullWidth?: boolean;
+}
+
+/**
+ * Primary CTA button used across the onboarding flow.
+ * Single responsibility: render a tappable, accessible, animated button.
+ */
+export function PrimaryButton({
+  children,
+  loading = false,
+  fullWidth = true,
+  className,
+  disabled,
+  type,
+  ...rest
+}: PrimaryButtonProps) {
+  const { labels } = useOnboardingIntl();
+  return (
+    <motion.button
+      {...rest}
+      type={type ?? 'button'}
+      disabled={disabled || loading}
+      whileTap={{ scale: disabled || loading ? 1 : 0.98 }}
+      className={cn(
+        'inline-flex items-center justify-center rounded-xl px-5 py-3 text-base font-semibold',
+        'bg-[rgb(var(--uob-primary-500))] text-white shadow-sm transition-colors',
+        'hover:bg-[rgb(var(--uob-primary-600))] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--uob-primary-500))] focus:ring-offset-2',
+        'disabled:cursor-not-allowed disabled:opacity-60',
+        fullWidth ? 'w-full' : '',
+        className,
+      )}
+    >
+      {loading ? (
+        <span className="flex items-center gap-2">
+          <span
+            className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent"
+            aria-hidden="true"
+          />
+          <span>{labels.loading}</span>
+        </span>
+      ) : (
+        children
+      )}
+    </motion.button>
+  );
+}
+
+// Re-export the HTML button type for consumers that need to wrap a non-motion button.
+export type { ButtonHTMLAttributes };

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

@@ -0,0 +1,51 @@
+import * as Progress from '@radix-ui/react-progress';
+import { motion } from 'framer-motion';
+import { cn } from '../../theme/cn';
+import { computeProgressPercentage } from '../../calc/progress-percentage';
+import { formatLabel, useOnboardingIntl } from '../OnboardingIntl';
+
+export interface ProgressBarProps {
+  current: number;
+  total: number;
+  className?: string;
+  showLabel?: boolean;
+}
+
+/**
+ * Accessible progress bar built on Radix UI primitive.
+ * Progress math lives in `calc/progress-percentage`.
+ */
+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 = computeProgressPercentage(safeCurrent, safeTotal);
+
+  return (
+    <div className={cn('flex w-full flex-col gap-2', className)}>
+      {showLabel && (
+        <div className="flex items-center justify-between text-sm text-[rgb(var(--uob-text-muted))]">
+          <span aria-live="polite">
+            {formatLabel(labels.stepOfPattern, { current: safeCurrent, total: safeTotal })}
+          </span>
+          <span aria-hidden="true">{Math.round(percentage)}%</span>
+        </div>
+      )}
+      <Progress.Root
+        value={percentage}
+        aria-label={`Onboarding progress: ${Math.round(percentage)} percent`}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(percentage)}
+        className="relative h-2 w-full overflow-hidden rounded-full bg-[rgb(var(--uob-border))]"
+      >
+        <motion.div
+          initial={{ width: 0 }}
+          animate={{ width: `${percentage}%` }}
+          transition={{ duration: 0.4, ease: 'easeOut' }}
+          className="h-full rounded-full bg-[rgb(var(--uob-primary-500))]"
+        />
+      </Progress.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { cn } from '../../theme/cn';
+
+export interface QuestionWrapperProps {
+  title: string;
+  subtitle?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Consistent framing for question-style screens.
+ * Single responsibility: layout the question header + content area.
+ */
+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('flex w-full flex-col gap-6', className)}
+    >
+      <header className="flex flex-col gap-2">
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="text-base text-[rgb(var(--uob-text-muted))]">{subtitle}</p>
+        )}
+      </header>
+      <div className="flex flex-col gap-3">{children}</div>
+    </motion.div>
+  );
+}

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../theme/cn';
+
+export interface ScreenContainerProps {
+  children: ReactNode;
+  header?: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Standard layout for an onboarding screen.
+ * Owns safe-area, padding, header/footer slots. Per project rules this is the SOLE
+ * layout for authenticated onboarding screens — no per-page layout duplication.
+ */
+export function ScreenContainer({ children, header, footer, className }: ScreenContainerProps) {
+  return (
+    <div
+      className={cn(
+        'mx-auto flex min-h-screen w-full max-w-2xl flex-col gap-6 px-4 pb-8 pt-6 sm:px-6',
+        className,
+      )}
+    >
+      {header && <div className="flex flex-col gap-3">{header}</div>}
+      <main className="flex flex-1 flex-col gap-6">{children}</main>
+      {footer && <div className="flex flex-col gap-3">{footer}</div>}
+    </div>
+  );
+}

package/src/domains/onboarding/components/shared/SwipeCard.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { SwipeCard } from './SwipeCard';
+import { OnboardingIntlProvider } from '../OnboardingIntl';
+
+function renderCard(props: Partial<React.ComponentProps<typeof SwipeCard>> = {}) {
+  return render(
+    <OnboardingIntlProvider>
+      <SwipeCard
+        text="I want to feel better"
+        category="Mood"
+        onSwipeLeft={vi.fn()}
+        onSwipeRight={vi.fn()}
+        {...props}
+      />
+    </OnboardingIntlProvider>,
+  );
+}
+
+// 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();
+    const onSwipeRight = vi.fn();
+    renderCard({ onSwipeLeft, onSwipeRight });
+    const card = screen.getByRole('group');
+    card.focus();
+    fireEvent.keyDown(card, { key: 'ArrowRight' });
+    expect(onSwipeRight).toHaveBeenCalledTimes(1);
+    expect(onSwipeLeft).not.toHaveBeenCalled();
+    fireEvent.keyDown(card, { key: 'ArrowLeft' });
+    expect(onSwipeLeft).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the AGREE / DISAGREE badges and the swipe hint', () => {
+    renderCard();
+    expect(screen.getByText('Agree')).toBeTruthy();
+    expect(screen.getByText('Disagree')).toBeTruthy();
+    expect(screen.getByText(/arrow keys/)).toBeTruthy();
+  });
+
+  it('ignores unrelated keys', () => {
+    const onSwipeLeft = vi.fn();
+    const onSwipeRight = vi.fn();
+    renderCard({ onSwipeLeft, onSwipeRight });
+    fireEvent.keyDown(screen.getByRole('group'), { key: 'Enter' });
+    expect(onSwipeLeft).not.toHaveBeenCalled();
+    expect(onSwipeRight).not.toHaveBeenCalled();
+  });
+});

package/src/domains/onboarding/components/shared/SwipeCard.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useRef } from 'react';
+import { motion, useMotionValue, useTransform, type PanInfo } from 'framer-motion';
+import { cn } from '../../theme/cn';
+import {
+  didCrossLeftSwipeThreshold,
+  didCrossRightSwipeThreshold,
+  SWIPE_LEFT_OPACITY_INPUT,
+  SWIPE_LEFT_OPACITY_VALUES,
+  SWIPE_RIGHT_OPACITY_INPUT,
+  SWIPE_RIGHT_OPACITY_VALUES,
+  SWIPE_ROTATION_RANGE,
+  SWIPE_ROTATION_VALUES,
+} from '../../calc/swipe-gesture-curve';
+import { useOnboardingIntl } from '../OnboardingIntl';
+
+export interface SwipeCardProps {
+  text: string;
+  category?: string;
+  onSwipeLeft: () => void;
+  onSwipeRight: () => void;
+  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.
+  const leftRef = useRef(onSwipeLeft);
+  const rightRef = useRef(onSwipeRight);
+  useEffect(() => {
+    leftRef.current = onSwipeLeft;
+    rightRef.current = onSwipeRight;
+  }, [onSwipeLeft, onSwipeRight]);
+
+  return {
+    onDragEnd(_: unknown, info: PanInfo) {
+      if (didCrossRightSwipeThreshold(info.offset.x)) rightRef.current();
+      else if (didCrossLeftSwipeThreshold(info.offset.x)) leftRef.current();
+    },
+  };
+}
+
+/**
+ * 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);
+  const rotate = useTransform(x, SWIPE_ROTATION_RANGE, SWIPE_ROTATION_VALUES);
+  const leftOpacity = useTransform(x, SWIPE_LEFT_OPACITY_INPUT, SWIPE_LEFT_OPACITY_VALUES);
+  const rightOpacity = useTransform(x, SWIPE_RIGHT_OPACITY_INPUT, SWIPE_RIGHT_OPACITY_VALUES);
+  const { onDragEnd } = useSwipeGestures({ onSwipeLeft, onSwipeRight });
+
+  return (
+    <div
+      className={cn('relative h-72 w-full select-none focus:outline-none', className)}
+      role="group"
+      aria-label={`${text} — ${labels.swipeHint}`}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          onSwipeLeft();
+        } else if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          onSwipeRight();
+        }
+      }}
+    >
+      <motion.div
+        style={{ x, rotate }}
+        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"
+      >
+        {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>
+      </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))]"
+      >
+        {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))]"
+      >
+        {labels.agree}
+      </motion.div>
+    </div>
+  );
+}

package/src/domains/onboarding/components/shared/index.ts

@@ -0,0 +1,16 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps } from './ProgressBar';
+export { QuestionWrapper } from './QuestionWrapper';
+export type { QuestionWrapperProps } from './QuestionWrapper';
+export { OptionCard } from './OptionCard';
+export type { OptionCardProps } from './OptionCard';
+export { SwipeCard } from './SwipeCard';
+export type { SwipeCardProps } from './SwipeCard';
+export { AnimationWrapper } from './AnimationWrapper';
+export type { AnimationWrapperProps, ScreenTransition } from './AnimationWrapper';
+export { ScreenContainer } from './ScreenContainer';
+export type { ScreenContainerProps } from './ScreenContainer';
+export { PrimaryButton } from './PrimaryButton';
+export type { PrimaryButtonProps } from './PrimaryButton';
+export { OnboardingErrorBoundary } from './OnboardingErrorBoundary';
+export type { OnboardingErrorBoundaryProps } from './OnboardingErrorBoundary';

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

@@ -0,0 +1,20 @@
+import { resolveIconByName } from '../../predicates/icon-name-resolves';
+
+/**
+ * Render a bundled icon by registry name.
+ *
+ * Returns null when the name is not in the registry — callers combine it with
+ * `doesIconNameResolve` when the surrounding markup must disappear with the icon.
+ *
+ * Why a helper instead of `const Icon = resolveIconByName(name)` inside the
+ * component body? The registry lookup always yields a stable module-level
+ * component (nothing is created per render), but assigning it to a variable
+ * during render trips eslint-plugin-react-hooks' `static-components` rule at
+ * the JSX usage site. A module-scope function returning the element keeps the
+ * lint signal meaningful without suppression comments.
+ */
+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/index.ts

@@ -0,0 +1,182 @@
+/**
+ * @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,
+  useOnboardingIntl,
+  defaultOnboardingLabels,
+  formatLabel,
+} from './components/OnboardingIntl';
+export type { OnboardingIntl, OnboardingIntlProviderProps } from './components/OnboardingIntl';
+
+// Screens
+export {
+  WelcomeScreen,
+  GoalQuestionScreen,
+  PainPointsScreen,
+  SocialProofScreen,
+  TinderCardsScreen,
+  PersonalizedSolutionScreen,
+  ComparisonScreen,
+  PreferencesScreen,
+  PermissionPrimingScreen,
+  ProcessingScreen,
+  AppDemoScreen,
+  ValueDeliveryScreen,
+  AccountGateScreen,
+  PaywallScreen,
+} from './components/screens';
+
+// Shared / atomic
+export {
+  ProgressBar,
+  QuestionWrapper,
+  OptionCard,
+  SwipeCard,
+  AnimationWrapper,
+  ScreenContainer,
+  PrimaryButton,
+  OnboardingErrorBoundary,
+} from './components/shared';
+export type { ScreenTransition } from './components/shared';
+
+// Hooks
+export {
+  useOnboardingProgress,
+  usePermissionPriming,
+  useOnboardingAnalytics,
+  useReducedMotion,
+} from './components/hooks';
+export type {
+  UseOnboardingProgressReturn,
+  UsePermissionPrimingReturn,
+  UseOnboardingAnalyticsReturn,
+} from './components/hooks';
+
+// Templates
+export {
+  healthOnboardingTemplate,
+  artOnboardingTemplate,
+  videoOnboardingTemplate,
+  platformOnboardingTemplate,
+  withDefaultDemo,
+  defaultDemoResult,
+  TemplateDemoFallback,
+} from './templates';
+export type { TemplateDemoResult } from './templates';
+
+// Calculations (pure math)
+export {
+  computeProgressFraction,
+  computeProgressPercentage,
+  computeRemainingSteps,
+  clampStepIndex,
+  advanceStepIndex,
+  retreatStepIndex,
+  SWIPE_DECISION_THRESHOLD_PX,
+  SWIPE_ROTATION_RANGE,
+  SWIPE_ROTATION_VALUES,
+  SWIPE_LEFT_OPACITY_INPUT,
+  SWIPE_LEFT_OPACITY_VALUES,
+  SWIPE_RIGHT_OPACITY_INPUT,
+  SWIPE_RIGHT_OPACITY_VALUES,
+  didCrossRightSwipeThreshold,
+  didCrossLeftSwipeThreshold,
+  getCardEnterInitial,
+  getCardEnterAnimate,
+  getCardEnterExit,
+  getCardTransitionDurationMs,
+  resolveSliderBounds,
+  areSliderBoundsValid,
+  clampValueToBounds,
+  splitTotalDuration,
+  getDefaultStepDurationMs,
+  formatCountWithLocale,
+  elapsedMillis,
+} from './calc';
+export type { CardMotionState } from './calc';
+
+// Validation
+export {
+  checkFlowStructure,
+  checkScreenConfig,
+  checkStoredProgress,
+  getRecognizedScreenTypes,
+  isRecognizedPermissionStatus,
+  normalizePermissionStatus,
+} from './validation';
+export type { ValidationOutcome, StoredProgressShape, StoredProgressOutcome } from './validation';
+
+// Predicates
+export {
+  isPermissionGranted,
+  isPermissionDenied,
+  isPermissionPrompt,
+  isPermissionUnsupported,
+  isPermissionDecided,
+  doesBrowserSupportNotifications,
+  doesBrowserSupportMediaCapture,
+  doesBrowserSupportGeolocation,
+  isRuntimeSupportMissing,
+  isLocalStorageAvailable,
+  doesIconNameResolve,
+  getRegisteredIconNames,
+  resolveIconByName,
+  hasOnRequest,
+  hasOnAccept,
+  hasOnSignIn,
+  accountGateAllowsSkip,
+  screenEmitsData,
+} from './predicates';
+
+// I/O utilities
+export {
+  trackOnboardingEvent,
+  dispatchAnalyticsEvent,
+  saveOnboardingProgress,
+  loadOnboardingProgress,
+  clearOnboardingProgress,
+  buildOnboardingResult,
+  queryPermissionStatus,
+  requestPermission,
+  defaultStorageKey,
+} 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,
+  OnboardingOption,
+  OnboardingConfig,
+  OnboardingCategory,
+  OnboardingLabels,
+  AnalyticsConfig,
+  AnalyticsProvider,
+  OnboardingAnalyticsEvent,
+  OnboardingResult,
+} from './types';

package/src/domains/onboarding/onboarding.css

@@ -0,0 +1 @@
+.uob-flow{--uob-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--uob-primary-50: 238 242 255;--uob-primary-100: 224 231 255;--uob-primary-500: 99 102 241;--uob-primary-600: 79 70 229;--uob-primary-700: 67 56 202;--uob-surface: 255 255 255;--uob-surface-muted: 249 250 251;--uob-text-primary: 17 24 39;--uob-text-muted: 107 114 128;--uob-border: 229 231 235;--uob-success: 16 185 129;--uob-warning: 245 158 11;--uob-error: 239 68 68}@media (prefers-color-scheme: dark){.uob-flow{--uob-surface: 17 24 39;--uob-surface-muted: 31 41 55;--uob-text-primary: 243 244 246;--uob-text-muted: 156 163 175;--uob-border: 55 65 81}}.uob-flow,.uob-flow *,.uob-flow *:before,.uob-flow *:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--uob-border))}.uob-flow h1,.uob-flow h2,.uob-flow h3,.uob-flow h4,.uob-flow h5,.uob-flow h6,.uob-flow p,.uob-flow figure,.uob-flow blockquote,.uob-flow pre{margin:0}.uob-flow ol,.uob-flow ul{list-style:none;margin:0;padding:0}.uob-flow button,.uob-flow input,.uob-flow optgroup,.uob-flow select,.uob-flow textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}.uob-flow button,.uob-flow [type=button],.uob-flow [type=reset],.uob-flow [type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}.uob-flow progress{-webkit-appearance:none;-moz-appearance:none;appearance:none}.uob-flow img,.uob-flow svg,.uob-flow video,.uob-flow canvas{display:block;vertical-align:middle}.uob-flow img,.uob-flow video{max-width:100%;height:auto}.pointer-events-none{pointer-events:none}.\!visible{visibility:visible!important}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.left-4{left:1rem}.right-4{right:1rem}.top-4{top:1rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-4{margin-bottom:1rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-3{margin-top:.75rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-72{height:18rem}.h-8{height:2rem}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-20{width:5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-5{--tw-translate-x: 1.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-grab{cursor:grab}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-\[rgb\(var\(--uob-border\)\)\]{border-color:rgb(var(--uob-border))}.border-\[rgb\(var\(--uob-error\)\)\]{border-color:rgb(var(--uob-error))}.border-\[rgb\(var\(--uob-primary-500\)\)\]{border-color:rgb(var(--uob-primary-500))}.border-\[rgb\(var\(--uob-success\)\)\]{border-color:rgb(var(--uob-success))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-t-transparent{border-top-color:transparent}.bg-\[rgb\(var\(--uob-border\)\)\]{background-color:rgb(var(--uob-border))}.bg-\[rgb\(var\(--uob-error\)\)\]\/10{background-color:rgb(var(--uob-error) / .1)}.bg-\[rgb\(var\(--uob-primary-50\)\)\]{background-color:rgb(var(--uob-primary-50))}.bg-\[rgb\(var\(--uob-primary-500\)\)\]{background-color:rgb(var(--uob-primary-500))}.bg-\[rgb\(var\(--uob-success\)\)\]{background-color:rgb(var(--uob-success))}.bg-\[rgb\(var\(--uob-success\)\)\]\/10{background-color:rgb(var(--uob-success) / .1)}.bg-\[rgb\(var\(--uob-surface\)\)\]{background-color:rgb(var(--uob-surface))}.bg-\[rgb\(var\(--uob-surface-muted\)\)\]{background-color:rgb(var(--uob-surface-muted))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.fill-current{fill:currentColor}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-8{padding-bottom:2rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.tracking-wide{letter-spacing:.025em}.text-\[rgb\(var\(--uob-border\)\)\]{color:rgb(var(--uob-border))}.text-\[rgb\(var\(--uob-error\)\)\]{color:rgb(var(--uob-error))}.text-\[rgb\(var\(--uob-primary-500\)\)\]{color:rgb(var(--uob-primary-500))}.text-\[rgb\(var\(--uob-primary-700\)\)\]{color:rgb(var(--uob-primary-700))}.text-\[rgb\(var\(--uob-success\)\)\]{color:rgb(var(--uob-success))}.text-\[rgb\(var\(--uob-text-muted\)\)\]{color:rgb(var(--uob-text-muted))}.text-\[rgb\(var\(--uob-text-primary\)\)\]{color:rgb(var(--uob-text-primary))}.text-\[rgb\(var\(--uob-warning\)\)\]{color:rgb(var(--uob-warning))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline-offset-4{text-underline-offset:4px}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:border-\[rgb\(var\(--uob-border\)\)\]:hover{border-color:rgb(var(--uob-border))}.hover\:border-\[rgb\(var\(--uob-primary-100\)\)\]:hover{border-color:rgb(var(--uob-primary-100))}.hover\:border-\[rgb\(var\(--uob-primary-500\)\)\]:hover{border-color:rgb(var(--uob-primary-500))}.hover\:bg-\[rgb\(var\(--uob-error\)\)\]:hover{background-color:rgb(var(--uob-error))}.hover\:bg-\[rgb\(var\(--uob-primary-600\)\)\]:hover{background-color:rgb(var(--uob-primary-600))}.hover\:bg-\[rgb\(var\(--uob-success\)\)\]:hover{background-color:rgb(var(--uob-success))}.hover\:bg-\[rgb\(var\(--uob-surface-muted\)\)\]:hover{background-color:rgb(var(--uob-surface-muted))}.hover\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-\[rgb\(var\(--uob-primary-500\)\)\]:focus{--tw-ring-color: rgb(var(--uob-primary-500))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.active\:cursor-grabbing:active{cursor:grabbing}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}}

package/src/domains/onboarding/predicates/has-handler.ts

@@ -0,0 +1,25 @@
+import type {
+  AccountGateScreenConfig,
+  PaywallScreenConfig,
+  PermissionPrimingScreenConfig,
+} from '../types/screens';
+
+/** Does the permission-priming config expose a usable `onRequest` callback? */
+export function hasOnRequest(config: PermissionPrimingScreenConfig): boolean {
+  return typeof config.onRequest === 'function';
+}
+
+/** Does the paywall config expose a usable `onAccept` callback? */
+export function hasOnAccept(config: PaywallScreenConfig): boolean {
+  return typeof config.onAccept === 'function';
+}
+
+/** Does the account-gate config expose a usable `onSignIn` callback? */
+export function hasOnSignIn(config: AccountGateScreenConfig): boolean {
+  return typeof config.onSignIn === 'function';
+}
+
+/** Is a skip affordance allowed by the account-gate config? */
+export function accountGateAllowsSkip(config: AccountGateScreenConfig): boolean {
+  return config.optional === true;
+}