@appinternalleads/ui 0.2.0

package/src/components/onboarding/filter-panel/presets.json

@@ -0,0 +1,400 @@
+{
+  "component": "filter-panel",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "action",
+    "icon": "filter",
+    "title": "Notifications",
+    "subtitle": "Filter by type and priority",
+    "types": [
+      {
+        "id": "mentions",
+        "label": "Mentions",
+        "type": "agent",
+        "icon": "chat"
+      },
+      {
+        "id": "comments",
+        "label": "Comments",
+        "type": "file",
+        "icon": "doc"
+      },
+      {
+        "id": "assign",
+        "label": "Assignments",
+        "type": "action",
+        "icon": "tasks"
+      },
+      {
+        "id": "system",
+        "label": "System",
+        "type": "data",
+        "icon": "server"
+      }
+    ],
+    "items": [
+      {
+        "type": "mentions",
+        "priority": "high",
+        "title": "Sam mentioned you in Launch plan",
+        "subtitle": "“@you can you check the dates?”",
+        "time": "2m",
+        "unread": true
+      },
+      {
+        "type": "comments",
+        "priority": "normal",
+        "title": "New comment on Roadmap",
+        "subtitle": "Jo: Looks good to me",
+        "time": "18m",
+        "unread": true
+      },
+      {
+        "type": "assign",
+        "priority": "high",
+        "title": "You were assigned “Fix billing bug”",
+        "subtitle": "Due tomorrow",
+        "time": "1h",
+        "unread": true
+      },
+      {
+        "type": "system",
+        "priority": "normal",
+        "title": "Weekly backup finished",
+        "subtitle": "All 4 projects backed up",
+        "time": "3h",
+        "unread": false
+      },
+      {
+        "type": "mentions",
+        "priority": "normal",
+        "title": "Priya mentioned you in Q4 goals",
+        "subtitle": "“Thanks @you!”",
+        "time": "Yesterday",
+        "unread": false
+      },
+      {
+        "type": "assign",
+        "priority": "normal",
+        "title": "You were assigned “Write release notes”",
+        "subtitle": "Due Friday",
+        "time": "Mon",
+        "unread": false
+      }
+    ],
+    "emptyTitle": "No notifications yet",
+    "emptyBody": "You’ll see mentions, comments and assignments here.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "data",
+      "icon": "cart",
+      "title": "Store alerts",
+      "subtitle": "Harbor Goods",
+      "initialPriority": "high",
+      "types": [
+        {
+          "id": "orders",
+          "label": "Orders",
+          "type": "data",
+          "icon": "cart"
+        },
+        {
+          "id": "stock",
+          "label": "Stock",
+          "type": "action",
+          "icon": "box"
+        },
+        {
+          "id": "reviews",
+          "label": "Reviews",
+          "type": "agent",
+          "icon": "star"
+        },
+        {
+          "id": "payouts",
+          "label": "Payouts",
+          "type": "data",
+          "icon": "cash"
+        }
+      ],
+      "items": [
+        {
+          "type": "orders",
+          "priority": "normal",
+          "title": "Order #1042 · $86.00",
+          "subtitle": "2 items · ships today",
+          "time": "4m",
+          "unread": true
+        },
+        {
+          "type": "stock",
+          "priority": "high",
+          "title": "Linen shirt is almost sold out",
+          "subtitle": "3 left in size M",
+          "time": "20m",
+          "unread": true
+        },
+        {
+          "type": "reviews",
+          "priority": "normal",
+          "title": "New 5-star review",
+          "subtitle": "“Beautiful quality”",
+          "time": "1h",
+          "unread": false
+        },
+        {
+          "type": "payouts",
+          "priority": "high",
+          "title": "Payout on hold",
+          "subtitle": "Confirm your bank details",
+          "time": "2h",
+          "unread": true
+        },
+        {
+          "type": "orders",
+          "priority": "normal",
+          "title": "Order #1041 · $42.00",
+          "subtitle": "1 item",
+          "time": "3h",
+          "unread": false
+        }
+      ]
+    },
+    "case3": {
+      "type": "action",
+      "icon": "server",
+      "title": "Ops alerts",
+      "subtitle": "Production",
+      "initialTypes": [
+        "incidents",
+        "alerts"
+      ],
+      "types": [
+        {
+          "id": "deploys",
+          "label": "Deploys",
+          "type": "action",
+          "icon": "rocket"
+        },
+        {
+          "id": "incidents",
+          "label": "Incidents",
+          "type": "data",
+          "icon": "alert"
+        },
+        {
+          "id": "alerts",
+          "label": "Alerts",
+          "type": "agent",
+          "icon": "bell"
+        }
+      ],
+      "items": [
+        {
+          "type": "incidents",
+          "priority": "high",
+          "title": "API latency above 800 ms",
+          "subtitle": "eu-west-1 · started 6 min ago",
+          "time": "6m",
+          "unread": true
+        },
+        {
+          "type": "deploys",
+          "priority": "normal",
+          "title": "web-app v2.14 deployed",
+          "subtitle": "by Lena · 42 s",
+          "time": "15m",
+          "unread": false
+        },
+        {
+          "type": "alerts",
+          "priority": "normal",
+          "title": "Disk 80% full on db-2",
+          "subtitle": "Auto-cleanup scheduled",
+          "time": "40m",
+          "unread": true
+        },
+        {
+          "type": "incidents",
+          "priority": "normal",
+          "title": "Checkout errors resolved",
+          "subtitle": "Lasted 12 min",
+          "time": "2h",
+          "unread": false
+        },
+        {
+          "type": "deploys",
+          "priority": "normal",
+          "title": "api v5.3 deployed",
+          "subtitle": "by Omar · 1 m 10 s",
+          "time": "4h",
+          "unread": false
+        }
+      ]
+    },
+    "case4": {
+      "type": "schedule",
+      "icon": "building",
+      "title": "Clinic inbox",
+      "subtitle": "Riverside Clinic",
+      "ship": "emptyResult",
+      "types": [
+        {
+          "id": "bookings",
+          "label": "Bookings",
+          "type": "schedule",
+          "icon": "calendar"
+        },
+        {
+          "id": "cancel",
+          "label": "Cancellations",
+          "type": "action",
+          "icon": "alert"
+        },
+        {
+          "id": "labs",
+          "label": "Lab results",
+          "type": "file",
+          "icon": "doc"
+        }
+      ],
+      "items": [
+        {
+          "type": "bookings",
+          "priority": "normal",
+          "title": "New booking · Maria Lopez",
+          "subtitle": "Thu 26 Sep, 09:30",
+          "time": "10m",
+          "unread": true
+        },
+        {
+          "type": "labs",
+          "priority": "high",
+          "title": "Results ready · J. Carter",
+          "subtitle": "Needs doctor review",
+          "time": "25m",
+          "unread": true
+        },
+        {
+          "type": "cancel",
+          "priority": "normal",
+          "title": "Cancellation · Tom Reed",
+          "subtitle": "Fri 27 Sep, 14:00",
+          "time": "1h",
+          "unread": false
+        },
+        {
+          "type": "bookings",
+          "priority": "normal",
+          "title": "New booking · Ken Ito",
+          "subtitle": "Mon 30 Sep, 11:00",
+          "time": "2h",
+          "unread": false
+        }
+      ]
+    },
+    "case5": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Agent activity",
+      "subtitle": "What your assistant did today",
+      "types": [
+        {
+          "id": "done",
+          "label": "Completed",
+          "type": "agent",
+          "icon": "sparkle"
+        },
+        {
+          "id": "approve",
+          "label": "Needs approval",
+          "type": "action",
+          "icon": "userCheck"
+        },
+        {
+          "id": "errors",
+          "label": "Errors",
+          "type": "data",
+          "icon": "alert"
+        }
+      ],
+      "items": [
+        {
+          "type": "approve",
+          "priority": "high",
+          "title": "Send $120 to Harbor Legal?",
+          "subtitle": "Waiting for your approval",
+          "time": "3m",
+          "unread": true
+        },
+        {
+          "type": "done",
+          "priority": "normal",
+          "title": "Drafted 3 replies",
+          "subtitle": "In your Outbox",
+          "time": "20m",
+          "unread": true
+        },
+        {
+          "type": "errors",
+          "priority": "high",
+          "title": "Couldn’t book the meeting room",
+          "subtitle": "Room 4 is taken at 14:00",
+          "time": "45m",
+          "unread": false
+        },
+        {
+          "type": "done",
+          "priority": "normal",
+          "title": "Summarised Q3-plan.pdf",
+          "subtitle": "Saved to Drive",
+          "time": "1h",
+          "unread": false
+        },
+        {
+          "type": "approve",
+          "priority": "normal",
+          "title": "Share Roadmap with Jo?",
+          "subtitle": "Edit access",
+          "time": "2h",
+          "unread": false
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS",
+      "title": "Workspace inbox",
+      "scenario": "A workspace inbox with nothing filtered yet."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · E-commerce",
+      "title": "Store alerts",
+      "scenario": "A merchant looks at high-priority alerts only."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · DevOps",
+      "title": "Ops alerts",
+      "scenario": "An on-call engineer filters to incidents and alerts."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Healthcare ops",
+      "title": "Clinic inbox",
+      "scenario": "The chosen filters match nothing, so the empty result offers Clear filters."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Agent activity",
+      "scenario": "A user reviews what the assistant did, including items waiting for approval."
+    }
+  }
+}

package/src/components/onboarding/floating/FloatingView.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useRef, useState } from 'react';
+import { Animated, View, type ViewProps } from 'react-native';
+import { Box, Text, easingFor, useBlockMotion } from '../../../core';
+import { Button, IconButton } from '../../../ds';
+import { blockRadii, useDs, type DensityName } from '../../../tokens';
+import { iconFor, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import type { OnboardingOperation } from '../shared/mock';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { OnboardingCard } from '../shared/OnboardingCard';
+import { HueTile } from '../shared/parts';
+import { usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { FLOATING_PRESETS, validateFloating, type FloatingSettings, type ToastSpec } from './contract';
+import { floatingSeed, floatingView, initialFloating, liveToasts, reduceFloating, type FloatingSeed, type ToastEntry } from './engine';
+import { guarded } from '../shared/guard';
+
+export type FloatingProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<FloatingSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  /** Toasts have no async action of their own; accepted for the shared shape. */
+  result?: OnboardingResult;
+  reload?: OnboardingOperation<void>;
+  initial?: FloatingSeed;
+  /** A toast's action was pressed — the host does it (Undo, Retry, Open). */
+  onAction?: (toast: ToastSpec) => void;
+  onDismiss?: (toast: ToastSpec) => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/** How far apart "Show toasts" adds its toasts. */
+const REPLAY_GAP_MS = 300;
+/** A resumed timer never has less than this left — the prototype's floor. */
+const RESUME_FLOOR_MS = 800;
+
+/** react-native-web forwards pointer and focus events on a View; React Native's types do not list them. */
+type HoverProps = ViewProps & { onMouseEnter?: () => void; onMouseLeave?: () => void; onFocus?: () => void; onBlur?: () => void };
+const HoverView = View as unknown as React.ComponentType<HoverProps>;
+
+type Timer = { handle: ReturnType<typeof setTimeout> | null; due: number; left: number };
+
+/**
+ * **Floating** — toasts over a mock app (the demo's backdrop: an app bar, three skeleton cards, a
+ * "Show toast" replay and a line that reports what an action did). The stack sits bottom-right,
+ * 340 wide, 8px apart, at most `maxStack`. A toast: a 32px tile, the title (700 apricot deep for an
+ * apricot toast, `role="alert"`; `role="status"` otherwise), two lines of body, an optional small
+ * ghost action, and Dismiss. In: M10. Out: fade up, then the space closes (240ms).
+ */
+function FloatingView(props: FloatingProps) {
+  const config = resolveConfig(FLOATING_PRESETS, props.preset, props.config);
+  const issues = validateFloating(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status, reload, initial, onAction, onDismiss, onScene, testID,
+}: Omit<FloatingProps, 'config'> & { config: FloatingSettings }) {
+  const { colors } = useDs();
+  const motion = useBlockMotion();
+  const timers = useRef(new Map<string, Timer>());
+  const replays = useRef<ReturnType<typeof setTimeout>[]>([]);
+  const paused = useRef(false);
+  const [pausedShown, setPausedShown] = useState(false);
+  const clearAll = () => {
+    timers.current.forEach(t => { if (t.handle) clearTimeout(t.handle); });
+    timers.current.clear();
+    replays.current.forEach(clearTimeout);
+    replays.current = [];
+  };
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send] = useSeededReducer(
+    reduceFloating,
+    () => initialFloating(config, initial ?? (config.ship ? floatingSeed(config, config.ship) : {})),
+    key,
+    clearAll,
+  );
+  const pattern = usePatternStatus(status ?? 'ready', reload);
+  const v = floatingView(config, state);
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+
+  const arm = (id: string, ms: number) => {
+    const handle = setTimeout(() => { timers.current.delete(id); send({ type: 'dismiss', id }); }, ms);
+    timers.current.set(id, { handle, due: Date.now() + ms, left: ms });
+  };
+  /* Arm a timer for every toast that has no action; forget the timers of toasts that are leaving. */
+  useEffect(() => {
+    if (pattern.status !== 'ready') return;
+    const live = liveToasts(state);
+    live.forEach(t => {
+      if (config.toasts[t.idx]?.actionLabel || timers.current.has(t.id)) return;
+      if (paused.current) timers.current.set(t.id, { handle: null, due: 0, left: config.timeoutMs });
+      else arm(t.id, config.timeoutMs);
+    });
+    timers.current.forEach((t, id) => {
+      if (live.some(x => x.id === id)) return;
+      if (t.handle) clearTimeout(t.handle);
+      timers.current.delete(id);
+    });
+  }, [state.toasts, pattern.status]);
+  useEffect(() => clearAll, []);
+
+  const pause = () => {
+    if (paused.current) return;
+    paused.current = true;
+    const now = Date.now();
+    timers.current.forEach(t => {
+      if (t.handle) clearTimeout(t.handle);
+      t.left = Math.max(RESUME_FLOOR_MS, t.due - now);
+      t.handle = null;
+    });
+    setPausedShown(true);
+  };
+  const resume = () => {
+    if (!paused.current) return;
+    paused.current = false;
+    [...timers.current.entries()].forEach(([id, t]) => { timers.current.delete(id); arm(id, t.left); });
+    setPausedShown(false);
+  };
+  const replay = () => {
+    for (let i = 0; i < config.replayCount; i++) {
+      replays.current.push(setTimeout(() => send({ type: 'add', idx: i % config.toasts.length, maxStack: config.maxStack, enter: !motion.reduced }), i * REPLAY_GAP_MS));
+    }
+  };
+
+  return (
+    <OnboardingCard
+      testID={testID}
+      header={config}
+      copy={config}
+      density={density}
+      status={pattern.status}
+      onRetry={pattern.retry}
+      onEmptyAction={pattern.retry}
+      hideHeader
+      flush>
+      <Box style={{ position: 'relative', height: 480, overflow: 'hidden', borderRadius: 15, backgroundColor: colors.surfaceSunken }}>
+        <Box gap="s2" style={{ padding: 20 }}>
+          <Box row align="center" justify="space-between" gap="s3">
+            <Box row align="center" gap="s2" aria-hidden>
+              <Box width={28} height={28} style={{ borderRadius: blockRadii.tile, backgroundColor: colors.surface1 }} />
+              <Box height={10} width={120} radius="pill" style={{ backgroundColor: colors.hairlineStrong }} />
+            </Box>
+            <Button variant="secondary" size="xsmall" onPress={replay}>{v.replayLabel}</Button>
+          </Box>
+          <Box gap="s2" aria-hidden>
+            {([['44%', '28%'], ['36%', '22%'], ['50%', '30%']] as const).map(([a, b]) => (
+              <Box key={a} row align="center" gap="s3" style={{ padding: 14, borderRadius: blockRadii.mid, backgroundColor: colors.surface1 }}>
+                <Box width={32} height={32} style={{ borderRadius: blockRadii.tile, backgroundColor: colors.band }} />
+                <Box flex={1} gap="s1">
+                  <Box height={10} radius="pill" style={{ width: a, backgroundColor: colors.band }} />
+                  <Box height={8} radius="pill" style={{ width: b, backgroundColor: colors.band }} />
+                </Box>
+              </Box>
+            ))}
+          </Box>
+          <Box role="status" aria-live="polite">
+            <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{state.note}</Text>
+          </Box>
+        </Box>
+        <HoverView
+          onMouseEnter={pause}
+          onMouseLeave={resume}
+          onFocus={pause}
+          onBlur={resume}
+          style={{ position: 'absolute', right: 16, bottom: 16, left: 16, alignItems: 'flex-end' }}>
+          <Box style={{ width: '100%', maxWidth: 340 }}>
+            {pausedShown ? <Text variant="caption" color="textSecondary" align="right" style={{ fontSize: 12, paddingHorizontal: 4, paddingBottom: 2 }}>Paused while you hover</Text> : null}
+            {state.toasts.map(t => (
+              <ToastView
+                key={t.id}
+                entry={t}
+                spec={config.toasts[t.idx]!}
+                onDismiss={() => { send({ type: 'dismiss', id: t.id }); onDismiss?.(config.toasts[t.idx]!); }}
+                onAction={() => { const spec = config.toasts[t.idx]!; send({ type: 'act', id: t.id, result: spec.actionResult }); onAction?.(spec); }}
+                onGone={() => send({ type: 'drop', id: t.id })}
+              />
+            ))}
+          </Box>
+        </HoverView>
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+/** One toast: M10 in (opacity, 4px → 0), out a fade up of 6px, then its space closes at `--motion-list`. */
+function ToastView({ entry, spec, onDismiss, onAction, onGone }: {
+  entry: ToastEntry; spec: ToastSpec; onDismiss: () => void; onAction: () => void; onGone: () => void;
+}) {
+  const { colors, lift2 } = useDs();
+  const m = useBlockMotion();
+  const animateIn = entry.enter && !m.reduced;
+  const opacity = useRef(new Animated.Value(animateIn ? 0 : 1)).current;
+  const lift = useRef(new Animated.Value(animateIn ? 4 : 0)).current;
+  const open = useRef(new Animated.Value(1)).current;
+  const [height, setHeight] = useState<number | null>(null);
+  const timing = (v: Animated.Value, to: number, ms: number) => Animated.timing(v, { toValue: to, duration: ms, easing: easingFor(m), useNativeDriver: false });
+  useEffect(() => {
+    if (!animateIn) return undefined;
+    const a = Animated.parallel([timing(opacity, 1, m.state), timing(lift, 0, m.state)]);
+    a.start();
+    return () => a.stop();
+  }, []);
+  useEffect(() => {
+    if (!entry.leaving) return undefined;
+    if (m.reduced) { onGone(); return undefined; }
+    const a = Animated.sequence([Animated.parallel([timing(opacity, 0, m.state), timing(lift, -6, m.state)]), timing(open, 0, m.list)]);
+    a.start(({ finished }) => { if (finished) onGone(); });
+    return () => a.stop();
+  }, [entry.leaving]);
+  const apricot = spec.tone === 'apricot';
+
+  return (
+    <Animated.View
+      aria-hidden={entry.leaving || undefined}
+      style={{ overflow: entry.leaving ? 'hidden' : 'visible', height: height === null || !entry.leaving ? undefined : open.interpolate({ inputRange: [0, 1], outputRange: [0, height] }) }}>
+      <View onLayout={e => { const h = e.nativeEvent.layout.height; if (h > 0 && !entry.leaving) setHeight(h); }} style={{ paddingTop: 8 }}>
+        <Animated.View style={{ opacity, transform: [{ translateY: lift }] }}>
+          <Box
+            role={apricot ? 'alert' : 'status'}
+            row
+            align="flex-start"
+            gap="s3"
+            style={{
+              paddingTop: 14, paddingBottom: 14, paddingLeft: 14, paddingRight: 10, borderRadius: blockRadii.major, borderWidth: 1,
+              borderColor: colors.hairlineStrong, backgroundColor: colors.surface1, boxShadow: lift2,
+            }}>
+            <HueTile icon={apricot ? 'alert' : iconFor(spec.icon)} type={spec.type} tone={apricot ? 'apricot' : 'hue'} />
+            <Box flex={1} gap="s1" style={{ minWidth: 0, paddingTop: 1 }}>
+              <Text variant="caption" style={{ fontSize: 13, fontWeight: apricot ? '700' : '600', color: apricot ? colors.status.needsUser : colors.textPrimary }}>{spec.title}</Text>
+              <Text variant="caption" color="textSecondary" numberOfLines={2} style={{ fontSize: 12 }}>{spec.body}</Text>
+              {spec.actionLabel ? <Box pt="s2"><Button variant="secondary" size="xsmall" onPress={onAction}>{spec.actionLabel}</Button></Box> : null}
+            </Box>
+            <IconButton icon="close" label="Dismiss notification" onPress={onDismiss} />
+          </Box>
+        </Animated.View>
+      </View>
+    </Animated.View>
+  );
+}
+
+/** Floating, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const Floating = guarded(FloatingView, FLOATING_PRESETS, 'Floating');

package/src/components/onboarding/floating/contract.ts

@@ -0,0 +1,42 @@
+import type { DataType } from '../../../tokens';
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Floating (batch 3 §3.5)** — in-app toasts, bottom-right: at most three, the newest at the
+ * bottom. A toast without an action closes itself after `timeoutMs`; one with an action never
+ * does; hovering or focusing the stack pauses every timer. The only entrance motion in the batch
+ * (M10) — a toast is an overlay.
+ */
+
+export type ToastTone = 'neutral' | 'apricot';
+export type ToastSpec = { type: DataType; icon: string; title: string; body: string; actionLabel: string; actionResult: string; tone: ToastTone };
+
+export const FLOATING_SCENES = ['default', 'visible', 'withAction', 'stacked', 'dismissed', 'loading', 'empty', 'error'] as const;
+export type FloatingScene = (typeof FLOATING_SCENES)[number];
+/** Scenes that are an operation in flight — none: the toasts' timers are the component's own. */
+export const FLOATING_IN_FLIGHT: readonly string[] = [];
+
+export type FloatingSettings = HeaderConfig & LoadCopy & {
+  toasts: ToastSpec[];
+  /** How long a toast without an action stays (6000). */
+  timeoutMs: number;
+  /** At most this many at once; a new one past it dismisses the oldest (3). */
+  maxStack: number;
+  /** How many toasts "Show toast(s)" adds, 300ms apart. */
+  replayCount: number;
+  /** Demo-only: the scene this case ships in (B2-9). */
+  ship?: FloatingScene;
+};
+
+export const FLOATING_PRESETS = presetsJson as unknown as PresetsFile<FloatingSettings>;
+
+export function validateFloating(c: FloatingSettings): OnboardingIssue[] {
+  if (!Array.isArray(c.toasts) || !c.toasts.length) return [{ path: 'toasts', message: 'toasts must list at least one toast.' }];
+  const issues: OnboardingIssue[] = [];
+  c.toasts.forEach((t, i) => { if (t.tone !== 'neutral' && t.tone !== 'apricot') issues.push({ path: `toasts[${i}].tone`, message: 'tone is neutral or apricot.' }); });
+  if (!(c.timeoutMs > 0)) issues.push({ path: 'timeoutMs', message: 'timeoutMs must be above 0.' });
+  if (!(Number.isInteger(c.maxStack) && c.maxStack >= 1)) issues.push({ path: 'maxStack', message: 'maxStack is a whole number from 1.' });
+  if (!(Number.isInteger(c.replayCount) && c.replayCount >= 1)) issues.push({ path: 'replayCount', message: 'replayCount is a whole number from 1.' });
+  return issues;
+}