@appinternalleads/ui 0.2.0

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

@@ -0,0 +1,53 @@
+import type { FloatingScene, FloatingSettings } from './contract';
+
+/** **The Floating engine** — pure: which toasts are up, which are leaving, and the last action's result. */
+
+export type ToastEntry = { id: string; idx: number; leaving: boolean; enter: boolean };
+export type FloatingState = { toasts: ToastEntry[]; next: number; note: string };
+export type FloatingSeed = Partial<FloatingState>;
+export type FloatingAction =
+  | { type: 'add'; idx: number; maxStack: number; enter: boolean }
+  | { type: 'dismiss'; id: string }
+  | { type: 'act'; id: string; result: string }
+  | { type: 'drop'; id: string };
+
+export function initialFloating(_c: FloatingSettings, seed: FloatingSeed = {}): FloatingState {
+  return { toasts: seed.toasts ?? [], next: seed.next ?? 1, note: seed.note ?? '' };
+}
+
+const seeded = (idx: number[]): FloatingSeed => ({ toasts: idx.map((i, n) => ({ id: `s${n}`, idx: i, leaving: false, enter: false })) });
+
+export function floatingSeed(c: FloatingSettings, scene: FloatingScene): FloatingSeed {
+  if (scene === 'visible') return seeded([0]);
+  if (scene === 'withAction') {
+    const k = c.toasts.findIndex(t => t.actionLabel);
+    return seeded([k < 0 ? 0 : k]);
+  }
+  if (scene === 'stacked') return seeded([0, 1, 2].slice(0, c.toasts.length));
+  if (scene === 'dismissed') return { toasts: [] };
+  return {};
+}
+
+export const liveToasts = (s: FloatingState) => s.toasts.filter(t => !t.leaving);
+
+export function reduceFloating(s: FloatingState, a: FloatingAction): FloatingState {
+  switch (a.type) {
+    case 'add': {
+      const live = liveToasts(s);
+      const oldest = live.length >= a.maxStack ? live[0]!.id : null;
+      const toasts = s.toasts.map(t => (t.id === oldest ? { ...t, leaving: true } : t));
+      return { ...s, toasts: [...toasts, { id: `t${s.next}`, idx: a.idx, leaving: false, enter: a.enter }], next: s.next + 1, note: '' };
+    }
+    case 'dismiss': return { ...s, toasts: s.toasts.map(t => (t.id === a.id ? { ...t, leaving: true } : t)) };
+    case 'act': return { ...s, note: a.result, toasts: s.toasts.map(t => (t.id === a.id ? { ...t, leaving: true } : t)) };
+    case 'drop': return { ...s, toasts: s.toasts.filter(t => t.id !== a.id) };
+  }
+}
+
+export function floatingView(c: FloatingSettings, s: FloatingState) {
+  const live = liveToasts(s);
+  return {
+    replayLabel: c.replayCount > 1 ? 'Show toasts' : 'Show toast',
+    scene: (live.length === 0 ? 'dismissed' : live.length > 1 ? 'stacked' : c.toasts[live[0]!.idx]?.actionLabel ? 'withAction' : 'visible') as FloatingScene,
+  };
+}

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

@@ -0,0 +1,9 @@
+export {
+  FLOATING_IN_FLIGHT, FLOATING_PRESETS, FLOATING_SCENES, validateFloating,
+  type FloatingScene, type FloatingSettings, type ToastSpec, type ToastTone,
+} from './contract';
+export {
+  floatingSeed, floatingView, initialFloating, liveToasts, reduceFloating,
+  type FloatingAction, type FloatingSeed, type FloatingState, type ToastEntry,
+} from './engine';
+export { Floating, type FloatingProps } from './FloatingView';

package/src/components/onboarding/floating/presets.json

@@ -0,0 +1,210 @@
+{
+  "component": "floating",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "action",
+    "icon": "bell",
+    "title": "Toasts",
+    "subtitle": "",
+    "timeoutMs": 6000,
+    "maxStack": 3,
+    "replayCount": 1,
+    "ship": "visible",
+    "toasts": [
+      {
+        "type": "file",
+        "icon": "check2",
+        "title": "Changes saved",
+        "body": "Your workspace settings are up to date.",
+        "actionLabel": "",
+        "actionResult": "",
+        "tone": "neutral"
+      },
+      {
+        "type": "file",
+        "icon": "check2",
+        "title": "Profile updated",
+        "body": "Your new photo is visible to the team.",
+        "actionLabel": "",
+        "actionResult": "",
+        "tone": "neutral"
+      },
+      {
+        "type": "action",
+        "icon": "users",
+        "title": "Invite sent",
+        "body": "Sam will get an email in a minute.",
+        "actionLabel": "",
+        "actionResult": "",
+        "tone": "neutral"
+      }
+    ],
+    "emptyTitle": "No notifications",
+    "emptyBody": "Toasts appear here when something happens.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "ship": "withAction",
+      "toasts": [
+        {
+          "type": "file",
+          "icon": "folder",
+          "title": "Folder deleted",
+          "body": "“Q3 research” and 14 files were moved to Trash.",
+          "actionLabel": "Undo",
+          "actionResult": "Folder restored",
+          "tone": "neutral"
+        },
+        {
+          "type": "file",
+          "icon": "doc",
+          "title": "Doc duplicated",
+          "body": "“Launch plan (copy)” is in Drafts.",
+          "actionLabel": "Open",
+          "actionResult": "Opened “Launch plan (copy)”",
+          "tone": "neutral"
+        },
+        {
+          "type": "action",
+          "icon": "users",
+          "title": "Access removed",
+          "body": "Jo can no longer edit Roadmap.",
+          "actionLabel": "Undo",
+          "actionResult": "Access restored",
+          "tone": "neutral"
+        }
+      ]
+    },
+    "case3": {
+      "type": "data",
+      "ship": "stacked",
+      "replayCount": 3,
+      "toasts": [
+        {
+          "type": "data",
+          "icon": "cart",
+          "title": "Order #1042 · $86.00",
+          "body": "2 items from Ana Ruiz · ships today",
+          "actionLabel": "View",
+          "actionResult": "Opened order #1042",
+          "tone": "neutral"
+        },
+        {
+          "type": "data",
+          "icon": "cart",
+          "title": "Order #1043 · $42.00",
+          "body": "1 item from Ken Ito",
+          "actionLabel": "View",
+          "actionResult": "Opened order #1043",
+          "tone": "neutral"
+        },
+        {
+          "type": "data",
+          "icon": "cart",
+          "title": "Order #1044 · $128.50",
+          "body": "3 items from Mia Lopez",
+          "actionLabel": "View",
+          "actionResult": "Opened order #1044",
+          "tone": "neutral"
+        }
+      ]
+    },
+    "case4": {
+      "toasts": [
+        {
+          "type": "data",
+          "icon": "alert",
+          "title": "Sync failed",
+          "body": "We couldn’t reach the Salesforce API. Your data is safe; nothing was changed.",
+          "actionLabel": "Retry",
+          "actionResult": "Sync restarted",
+          "tone": "apricot"
+        },
+        {
+          "type": "data",
+          "icon": "refresh",
+          "title": "Sync started",
+          "body": "Pulling 1,240 records.",
+          "actionLabel": "",
+          "actionResult": "",
+          "tone": "neutral"
+        },
+        {
+          "type": "data",
+          "icon": "check2",
+          "title": "Sync finished",
+          "body": "1,240 records updated.",
+          "actionLabel": "",
+          "actionResult": "",
+          "tone": "neutral"
+        }
+      ]
+    },
+    "case5": {
+      "ship": "dismissed",
+      "toasts": [
+        {
+          "type": "agent",
+          "icon": "sparkle",
+          "title": "Your report is ready",
+          "body": "Q3 revenue summary, 4 pages, with charts.",
+          "actionLabel": "Open",
+          "actionResult": "Opened “Q3 revenue summary”",
+          "tone": "neutral"
+        },
+        {
+          "type": "agent",
+          "icon": "mail",
+          "title": "Drafts ready",
+          "body": "3 replies are waiting in your Outbox.",
+          "actionLabel": "Review",
+          "actionResult": "Opened Outbox",
+          "tone": "neutral"
+        },
+        {
+          "type": "agent",
+          "icon": "calendar",
+          "title": "Meeting booked",
+          "body": "Harbor Legal · Thu 11:00.",
+          "actionLabel": "View",
+          "actionResult": "Opened calendar",
+          "tone": "neutral"
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS",
+      "title": "Saved",
+      "scenario": "A \"Changes saved\" toast with no action closes itself after 6 seconds. Hover over it to pause the timer."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Productivity",
+      "title": "Undo delete",
+      "scenario": "Deleting a folder shows Undo. Toasts with an action never close on their own."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · E-commerce",
+      "title": "New orders",
+      "scenario": "Three orders come in at once, so three toasts stack with the newest at the bottom."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Platform",
+      "title": "Sync failed",
+      "scenario": "A failed sync shows an apricot toast with bold copy and Retry, announced as role=\"alert\"."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Agent finished",
+      "scenario": "Ships dismissed. \"Show toast\" replays \"Your report is ready\"."
+    }
+  }
+}

package/src/components/onboarding/grid/GridView.tsx

@@ -0,0 +1,24 @@
+import { resolveConfig, type OnboardingPreset } from '../shared/contract';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { DataView, type DataViewProps } from '../data-view/DataView';
+import { GRID_PRESETS, validateGrid, type GridSettings } from './contract';
+import { guarded } from '../shared/guard';
+
+export type GridProps = DataViewProps & {
+  preset?: OnboardingPreset;
+  config?: Partial<GridSettings>;
+};
+
+/**
+ * **Grid** — record cards (`repeat(auto-fill, minmax(240px, 1fr))`) under a header row: select
+ * loaded, Sort by, and on the web a Multi-sort popover. The data behaviour is Table's, exactly.
+ */
+function GridView({ preset, config: override, ...props }: GridProps) {
+  const config = resolveConfig(GRID_PRESETS, preset, override);
+  const issues = validateGrid(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <DataView mode="grid" config={config} {...props} />;
+}
+
+/** Grid, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const Grid = guarded(GridView, GRID_PRESETS, 'Grid');

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

@@ -0,0 +1,17 @@
+import type { PresetsFile } from '../shared/contract';
+import { DATA_VIEW_IN_FLIGHT, DATA_VIEW_LAYER_SCENES, DATA_VIEW_SCENES, type DataViewScene, type DataViewSettings } from '../data-view/contract';
+import { validateDataView } from '../data-view/validate';
+import presetsJson from './presets.json';
+
+/**
+ * **Grid (batch 4 PRD §5.2)** — a grid of record cards with exactly the data behaviour of Table.
+ * Its card is Table's stacked view on mobile.
+ * The data contract is shared: `../data-view/contract.ts`.
+ */
+export type GridSettings = DataViewSettings;
+export const GRID_SCENES = DATA_VIEW_SCENES;
+export type GridScene = DataViewScene;
+export const GRID_IN_FLIGHT = DATA_VIEW_IN_FLIGHT;
+export const GRID_LAYER_SCENES = DATA_VIEW_LAYER_SCENES;
+export const GRID_PRESETS = presetsJson as unknown as PresetsFile<GridSettings>;
+export const validateGrid = validateDataView;

package/src/components/onboarding/grid/index.ts

@@ -0,0 +1,2 @@
+export { GRID_PRESETS, GRID_SCENES, GRID_IN_FLIGHT, GRID_LAYER_SCENES, validateGrid, type GridSettings, type GridScene } from './contract';
+export { Grid, type GridProps } from './GridView';