@appinternalleads/ui 0.2.0

package/src/components/onboarding/queue-status/presets.json

@@ -0,0 +1,198 @@
+{
+  "component": "queue-status",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "data",
+    "icon": "upload",
+    "title": "Data import",
+    "subtitle": "4 files · Northwind CRM",
+    "showOverall": true,
+    "failIndex": 2,
+    "failReason": "Something went wrong",
+    "jobs": [
+      {
+        "name": "contacts.csv",
+        "status": "done",
+        "time": "Done in 12s · 2,410 rows",
+        "reason": ""
+      },
+      {
+        "name": "companies.csv",
+        "status": "done",
+        "time": "Done in 4s · 318 rows",
+        "reason": ""
+      },
+      {
+        "name": "deals.csv",
+        "status": "running",
+        "time": "",
+        "reason": "Column “amount” has text values"
+      },
+      {
+        "name": "notes.csv",
+        "status": "queued",
+        "time": "",
+        "reason": ""
+      }
+    ],
+    "emptyTitle": "No jobs running",
+    "emptyBody": "Background jobs will appear here.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "file",
+      "icon": "video",
+      "title": "Video renders",
+      "subtitle": "Launch film · 3 renders",
+      "failIndex": 1,
+      "jobs": [
+        {
+          "name": "launch-16x9.mp4",
+          "status": "done",
+          "time": "Done in 4m 12s",
+          "reason": ""
+        },
+        {
+          "name": "launch-9x16.mp4",
+          "status": "failed",
+          "time": "",
+          "reason": "Out of memory at frame 1,204"
+        },
+        {
+          "name": "launch-1x1.mp4",
+          "status": "queued",
+          "time": "",
+          "reason": ""
+        }
+      ]
+    },
+    "case3": {
+      "type": "action",
+      "icon": "send",
+      "title": "Email campaign",
+      "subtitle": "October newsletter · 12,000 recipients",
+      "ship": "running",
+      "failIndex": 3,
+      "jobs": [
+        {
+          "name": "Batch 1 · 2,400",
+          "status": "queued",
+          "time": "Sent in 1m 10s",
+          "reason": ""
+        },
+        {
+          "name": "Batch 2 · 2,400",
+          "status": "queued",
+          "time": "Sent in 1m 08s",
+          "reason": ""
+        },
+        {
+          "name": "Batch 3 · 2,400",
+          "status": "queued",
+          "time": "Sent in 1m 14s",
+          "reason": ""
+        },
+        {
+          "name": "Batch 4 · 2,400",
+          "status": "queued",
+          "time": "Sent in 1m 09s",
+          "reason": "Provider rate limit"
+        },
+        {
+          "name": "Batch 5 · 2,400",
+          "status": "queued",
+          "time": "Sent in 1m 11s",
+          "reason": ""
+        }
+      ]
+    },
+    "case4": {
+      "type": "data",
+      "icon": "chart",
+      "title": "Report generation",
+      "subtitle": "Month-end close",
+      "jobs": [
+        {
+          "name": "P&L · September",
+          "status": "done",
+          "time": "Ready · 6 pages",
+          "reason": ""
+        },
+        {
+          "name": "Balance sheet",
+          "status": "done",
+          "time": "Ready · 3 pages",
+          "reason": ""
+        },
+        {
+          "name": "Cash flow",
+          "status": "done",
+          "time": "Ready · 2 pages",
+          "reason": ""
+        }
+      ]
+    },
+    "case5": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Agent tasks",
+      "subtitle": "Harbor Legal follow-up",
+      "failIndex": 1,
+      "showOverall": false,
+      "jobs": [
+        {
+          "name": "Research Harbor Legal",
+          "status": "done",
+          "time": "Done in 48s · 6 sources",
+          "reason": ""
+        },
+        {
+          "name": "Draft follow-up email",
+          "status": "failed",
+          "time": "",
+          "reason": "Gmail connection expired"
+        },
+        {
+          "name": "Send email",
+          "status": "queued",
+          "time": "",
+          "reason": ""
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS",
+      "title": "Data import",
+      "scenario": "Four CSV files: two done, one running, one queued."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Creative",
+      "title": "Video renders",
+      "scenario": "Three renders. One failed because it ran out of memory."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Marketing",
+      "title": "Email campaign",
+      "scenario": "Five batches start sending one after another."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Finance",
+      "title": "Report generation",
+      "scenario": "Every month-end report is ready."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · AI agent",
+      "title": "Agent tasks",
+      "scenario": "The draft failed, so Send is still queued behind it."
+    }
+  }
+}

package/src/components/onboarding/quick-actions/QuickActionsView.tsx

@@ -0,0 +1,142 @@
+import { useCallback, useEffect } from 'react';
+import { Box, Text } from '../../../core';
+import { Button, TypeTile } from '../../../ds';
+import { useDs, type DensityName } from '../../../tokens';
+import { iconFor, resolveConfig, type OnboardingPreset, type OnboardingResult, type PatternStatus } from '../shared/contract';
+import { ONBOARDING_TIMING, type OnboardingOperation } from '../shared/mock';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { OnboardingCard } from '../shared/OnboardingCard';
+import { BusyGhost, MintCheck, Slot } from '../shared/parts';
+import { runOutcome, useDefaultOperation, usePatternStatus, useSceneReport, useSeededReducer } from '../shared/runtime';
+import { useOperationRunner } from '../../../runtime/operations';
+import { QUICK_ACTIONS_PRESETS, validateQuickActions, type QuickActionsSettings } from './contract';
+import {
+  initialQuickActions, quickActionsView, reduceQuickActions, type QuickActionsSeed,
+} from './engine';
+import { guarded } from '../shared/guard';
+
+export type QuickActionsOperations = {
+  /** Try one action. Default: the prototype's simulated 1000ms. */
+  try: OnboardingOperation<{ index: number; title: string }>;
+  finish?: OnboardingOperation<void>;
+};
+
+export type QuickActionsProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<QuickActionsSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: QuickActionsOperations;
+  reload?: OnboardingOperation<void>;
+  initial?: QuickActionsSeed;
+  onTry?: (index: number) => void;
+  onFinish?: () => void;
+  onSkip?: () => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/**
+ * **Quick Actions** — one row per action: tile, title, description and — once tried — its result
+ * line in mint. The trailing slot cross-fades between "Try it" → "Trying…" (M8) and "Try again" +
+ * a mint check. The chip counts (M5) and turns mint when all are tried; Continue waits for
+ * `minRequired`.
+ */
+function QuickActionsView(props: QuickActionsProps) {
+  const config = resolveConfig(QUICK_ACTIONS_PRESETS, props.preset, props.config);
+  const issues = validateQuickActions(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status, result, operations, reload, initial, onTry, onFinish, onSkip, onScene, testID,
+}: Omit<QuickActionsProps, 'config'> & { config: QuickActionsSettings }) {
+  const { colors, density: d } = useDs();
+  const runner = useOperationRunner();
+  const key = JSON.stringify([config, initial ?? null]);
+  const [state, send, ref] = useSeededReducer(
+    reduceQuickActions,
+    () => initialQuickActions(config, initial),
+    key,
+    () => { config.actions.forEach((_, i) => runner.cancel(`try-${i}`)); runner.cancel('finish'); },
+  );
+  const pattern = usePatternStatus(status ?? (config.actions.length ? 'ready' : 'empty'), reload);
+  const v = quickActionsView(config, state);
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+  const tryOp = useDefaultOperation(operations?.try, 1000, () => result === 'error');
+  const finishOp = useDefaultOperation(operations?.finish, ONBOARDING_TIMING.finish, () => false);
+
+  const run = useCallback((index: number) => {
+    runOutcome(runner, `try-${index}`, tryOp, { index, title: config.actions[index]!.title }, {
+      ok: () => { send({ type: 'tried', index }); onTry?.(index); },
+      fail: () => send({ type: 'failed', index }),
+    });
+  }, [runner, tryOp, config.actions, onTry]);
+  useEffect(() => { ref.current.rows.forEach((p, i) => { if (p === 'busy') run(i); }); }, [key]);
+  const start = (i: number) => {
+    if (ref.current.rows[i] === 'busy' || ref.current.finish !== 'idle') return;
+    send({ type: 'try', index: i });
+    run(i);
+  };
+
+  return (
+    <OnboardingCard
+      testID={testID}
+      header={config}
+      copy={config}
+      density={density}
+      status={pattern.status}
+      onRetry={pattern.retry}
+      onEmptyAction={pattern.retry}
+      chip={v.chip}
+      hint={v.footerHint}
+      secondary={v.showSecondary ? { label: config.secondaryLabel!, onPress: () => { onSkip?.(); onScene?.('skipped'); } } : undefined}
+      primary={{
+        label: v.primaryLabel, disabled: !v.canContinue, busy: state.finish === 'finishing',
+        onPress: () => {
+          if (!quickActionsView(config, ref.current).canContinue) return;
+          send({ type: 'finish' });
+          runOutcome(runner, 'finish', finishOp, undefined, { ok: () => { send({ type: 'finished' }); onFinish?.(); }, fail: () => send({ type: 'finishFailed' }) });
+        },
+      }}>
+      <Box role="list" aria-label={config.title} style={{ marginHorizontal: -20, marginVertical: -4 }}>
+        {config.actions.map((a, i) => {
+          const phase = state.rows[i]!;
+          const done = phase === 'done';
+          return (
+            <Box
+              key={a.title}
+              role="listitem"
+              row
+              wrap
+              align="center"
+              gap="s3"
+              style={{ minHeight: d.rowH, paddingVertical: 10, paddingHorizontal: 20, borderBottomWidth: i < config.actions.length - 1 ? 1 : 0, borderBottomColor: colors.hairline }}>
+              <TypeTile icon={iconFor(a.icon)} type={a.type} size={32} />
+              <Box flex={1} style={{ minWidth: 150 }}>
+                <Text variant="caption" color="textPrimary" style={{ fontWeight: '600', fontSize: 13 }}>{a.title}</Text>
+                <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{a.description}</Text>
+                {done ? <Text variant="caption" style={{ fontSize: 12, color: colors.status.executed }}>{a.result}</Text> : null}
+              </Box>
+              <Slot slotKey={done ? 'done' : 'todo'} minWidth={180}>
+                {done ? (
+                  <>
+                    <Button variant="secondary" size="xsmall" onPress={() => start(i)} disabled={state.finish !== 'idle'} aria-label={`${config.againLabel}: ${a.title}`}>{config.againLabel}</Button>
+                    <MintCheck />
+                  </>
+                ) : (
+                  <BusyGhost label={config.tryLabel} busyLabel={config.tryingLabel} busy={phase === 'busy'} onPress={() => start(i)} name={a.title} disabled={state.finish !== 'idle'} />
+                )}
+              </Slot>
+            </Box>
+          );
+        })}
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+/** QuickActions, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const QuickActions = guarded(QuickActionsView, QUICK_ACTIONS_PRESETS, 'QuickActions');

package/src/components/onboarding/quick-actions/contract.ts

@@ -0,0 +1,38 @@
+import type { DataType } from '../../../tokens';
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Quick Actions (batch 2 §3.8)** — try the key actions once to learn the product. Each row's
+ * tile takes its action's hue; "Try it" is simulated by the default operation and reports a result
+ * line once tried.
+ */
+
+export type QuickAction = { type: DataType; icon: string; title: string; description: string; result: string };
+
+export const QUICK_ACTIONS_SCENES = ['default', 'trying', 'some', 'all', 'finished', 'loading', 'empty', 'error'] as const;
+export type QuickActionsScene = (typeof QUICK_ACTIONS_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const QUICK_ACTIONS_IN_FLIGHT: readonly string[] = ['trying'];
+
+export type QuickActionsSettings = HeaderConfig & LoadCopy & {
+  actions: QuickAction[];
+  /** Continue waits for this many tried actions. */
+  minRequired: number;
+  /** "0 of 4 tried". */
+  noun: string;
+  tryLabel: string;
+  tryingLabel: string;
+  againLabel: string;
+  primaryLabel: string;
+  secondaryLabel?: string;
+  finishedHint: string;
+};
+
+export const QUICK_ACTIONS_PRESETS = presetsJson as unknown as PresetsFile<QuickActionsSettings>;
+
+export function validateQuickActions(c: QuickActionsSettings): OnboardingIssue[] {
+  if (!Array.isArray(c.actions)) return [{ path: 'actions', message: 'actions must be a list.' }];
+  if (!(c.minRequired >= 1)) return [{ path: 'minRequired', message: 'minRequired must be at least 1.' }];
+  return [];
+}

package/src/components/onboarding/quick-actions/engine.ts

@@ -0,0 +1,59 @@
+import type { StateChipTone } from '../../../ds';
+import type { QuickActionsScene, QuickActionsSettings } from './contract';
+
+/** **The Quick Actions engine** — pure: each action's phase, and the finish. */
+
+export type TryPhase = 'idle' | 'busy' | 'done';
+export type QuickActionsState = { rows: TryPhase[]; finish: 'idle' | 'finishing' | 'done' };
+export type QuickActionsSeed = Partial<QuickActionsState>;
+
+export type QuickActionsAction =
+  | { type: 'try'; index: number }
+  | { type: 'tried'; index: number }
+  | { type: 'failed'; index: number }
+  | { type: 'finish' }
+  | { type: 'finished' }
+  | { type: 'finishFailed' };
+
+export function initialQuickActions(c: QuickActionsSettings, seed: QuickActionsSeed = {}): QuickActionsState {
+  return { rows: seed.rows ?? c.actions.map(() => 'idle'), finish: seed.finish ?? 'idle' };
+}
+
+export function quickActionsSeed(c: QuickActionsSettings, scene: QuickActionsScene): QuickActionsSeed {
+  if (scene === 'trying') return { rows: c.actions.map((_, i) => (i === 0 ? 'busy' : 'idle')) };
+  if (scene === 'some') return { rows: c.actions.map((_, i) => (i < 2 ? 'done' : 'idle')) };
+  if (scene === 'all') return { rows: c.actions.map(() => 'done') };
+  if (scene === 'finished') return { rows: c.actions.map(() => 'done'), finish: 'done' };
+  return {};
+}
+
+const set = (s: QuickActionsState, i: number, p: TryPhase): QuickActionsState => ({ rows: s.rows.map((x, k) => (k === i ? p : x)), finish: 'idle' });
+
+export function reduceQuickActions(s: QuickActionsState, a: QuickActionsAction): QuickActionsState {
+  switch (a.type) {
+    /* "Try again" tries a done action again. */
+    case 'try': return s.rows[a.index] !== 'busy' && s.finish === 'idle' ? set(s, a.index, 'busy') : s;
+    case 'tried': return s.rows[a.index] === 'busy' ? set(s, a.index, 'done') : s;
+    case 'failed': return s.rows[a.index] === 'busy' ? set(s, a.index, 'idle') : s;
+    case 'finish': return s.finish === 'idle' ? { ...s, finish: 'finishing' } : s;
+    case 'finished': return s.finish === 'finishing' ? { ...s, finish: 'done' } : s;
+    case 'finishFailed': return s.finish === 'finishing' ? { ...s, finish: 'idle' } : s;
+  }
+}
+
+export function quickActionsView(c: QuickActionsSettings, s: QuickActionsState) {
+  const total = s.rows.length;
+  const n = s.rows.filter(p => p === 'done').length;
+  const min = Math.min(c.minRequired, total || 1);
+  const met = n >= min;
+  const finished = s.finish === 'done';
+  return {
+    tried: n,
+    scene: (finished ? 'finished' : s.rows.includes('busy') ? 'trying' : total && n === total ? 'all' : n > 0 ? 'some' : 'default') as QuickActionsScene,
+    chip: { tone: (finished || (total > 0 && n === total) ? 'success' : 'neutral') as StateChipTone, label: `${n} of ${total} ${c.noun}` },
+    footerHint: finished ? c.finishedHint : met ? 'You’re ready to go' : `Try ${min === total ? `all ${min}` : `at least ${min}`} to continue`,
+    primaryLabel: s.finish === 'finishing' ? 'Continuing…' : finished ? 'Done' : c.primaryLabel,
+    canContinue: met && s.finish === 'idle',
+    showSecondary: !finished && Boolean(c.secondaryLabel),
+  };
+}

package/src/components/onboarding/quick-actions/index.ts

@@ -0,0 +1,9 @@
+export {
+  QUICK_ACTIONS_IN_FLIGHT, QUICK_ACTIONS_PRESETS, QUICK_ACTIONS_SCENES, validateQuickActions,
+  type QuickAction, type QuickActionsScene, type QuickActionsSettings,
+} from './contract';
+export {
+  initialQuickActions, quickActionsSeed, quickActionsView, reduceQuickActions,
+  type QuickActionsAction, type QuickActionsSeed, type QuickActionsState, type TryPhase,
+} from './engine';
+export { QuickActions, type QuickActionsOperations, type QuickActionsProps } from './QuickActionsView';

package/src/components/onboarding/quick-actions/presets.json

@@ -0,0 +1,232 @@
+{
+  "component": "quick-actions",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "file",
+    "icon": "doc",
+    "title": "Try the basics",
+    "subtitle": "Each one takes a few seconds.",
+    "noun": "tried",
+    "minRequired": 4,
+    "actions": [
+      {
+        "type": "file",
+        "icon": "doc",
+        "title": "Create a doc",
+        "description": "Start from a blank page",
+        "result": "Created “Untitled doc”"
+      },
+      {
+        "type": "agent",
+        "icon": "users",
+        "title": "Share it",
+        "description": "Invite someone to edit",
+        "result": "Shared with sam@northwind.com"
+      },
+      {
+        "type": "data",
+        "icon": "chat",
+        "title": "Leave a comment",
+        "description": "Highlight text and reply",
+        "result": "Comment added on line 3"
+      },
+      {
+        "type": "schedule",
+        "icon": "bell",
+        "title": "Set a reminder",
+        "description": "Get nudged about the doc",
+        "result": "Reminder set for tomorrow, 9:00"
+      }
+    ],
+    "tryLabel": "Try it",
+    "tryingLabel": "Trying…",
+    "againLabel": "Try again",
+    "primaryLabel": "Continue",
+    "secondaryLabel": "Skip",
+    "finishedHint": "Nice work · you’ve tried the basics",
+    "emptyTitle": "No actions to try",
+    "emptyBody": "Everything here is already familiar to you.",
+    "emptyCta": "Refresh"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Try your assistant",
+      "subtitle": "Four things it does well.",
+      "actions": [
+        {
+          "type": "agent",
+          "icon": "chat",
+          "title": "Ask a question",
+          "description": "About anything in your workspace",
+          "result": "Answered in 2 seconds"
+        },
+        {
+          "type": "file",
+          "icon": "file",
+          "title": "Summarise a file",
+          "description": "Get the key points of a PDF",
+          "result": "Summary of Q3-plan.pdf ready"
+        },
+        {
+          "type": "action",
+          "icon": "mail",
+          "title": "Draft an email",
+          "description": "A reply you can edit",
+          "result": "Draft saved to Outbox"
+        },
+        {
+          "type": "schedule",
+          "icon": "clock",
+          "title": "Schedule a task",
+          "description": "Have it run later",
+          "result": "Scheduled for Friday, 16:00"
+        }
+      ]
+    },
+    "case3": {
+      "type": "data",
+      "icon": "briefcase",
+      "title": "Try the CRM",
+      "subtitle": "The four things you’ll do every day.",
+      "minRequired": 3,
+      "actions": [
+        {
+          "type": "data",
+          "icon": "contacts",
+          "title": "Add a contact",
+          "description": "Name, company and email",
+          "result": "Added Ana Ruiz · Harbor Legal"
+        },
+        {
+          "type": "schedule",
+          "icon": "phone",
+          "title": "Log a call",
+          "description": "Notes and next steps",
+          "result": "Call logged · 12 minutes"
+        },
+        {
+          "type": "action",
+          "icon": "cash",
+          "title": "Create a deal",
+          "description": "Track an opportunity",
+          "result": "Deal created · $18,000"
+        },
+        {
+          "type": "schedule",
+          "icon": "bell",
+          "title": "Set a follow-up",
+          "description": "So nothing slips",
+          "result": "Follow-up set for Monday"
+        }
+      ]
+    },
+    "case4": {
+      "type": "file",
+      "icon": "image",
+      "title": "Try the editor",
+      "subtitle": "Make and share your first design.",
+      "actions": [
+        {
+          "type": "file",
+          "icon": "image",
+          "title": "Upload an image",
+          "description": "Drag in a photo or logo",
+          "result": "hero.jpg uploaded · 1.2 MB"
+        },
+        {
+          "type": "action",
+          "icon": "template",
+          "title": "Apply a template",
+          "description": "Start from a layout",
+          "result": "Applied “Launch post”"
+        },
+        {
+          "type": "file",
+          "icon": "download",
+          "title": "Export",
+          "description": "PNG, PDF or SVG",
+          "result": "Exported launch-post.png"
+        },
+        {
+          "type": "agent",
+          "icon": "users",
+          "title": "Invite a reviewer",
+          "description": "Get feedback in context",
+          "result": "Invited jo@northwind.com"
+        }
+      ]
+    },
+    "case5": {
+      "type": "data",
+      "icon": "cash",
+      "title": "Try the money basics",
+      "subtitle": "Two of these are enough to start.",
+      "minRequired": 2,
+      "actions": [
+        {
+          "type": "data",
+          "icon": "link",
+          "title": "Link an account",
+          "description": "Connect your bank safely",
+          "result": "Linked Current account ••42"
+        },
+        {
+          "type": "data",
+          "icon": "tag",
+          "title": "Categorise a spend",
+          "description": "Sort a recent payment",
+          "result": "Coffee → Eating out"
+        },
+        {
+          "type": "action",
+          "icon": "target",
+          "title": "Set a budget",
+          "description": "A monthly limit for a category",
+          "result": "Eating out · $200 a month"
+        },
+        {
+          "type": "file",
+          "icon": "download",
+          "title": "Download a statement",
+          "description": "September as a PDF",
+          "result": "statement-2026-09.pdf ready"
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · Productivity",
+      "title": "Docs app",
+      "scenario": "A new user tries the four core actions of a docs app. All four are needed."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · AI agent",
+      "title": "Assistant",
+      "scenario": "A user tries four things the assistant does well."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Sales",
+      "title": "CRM",
+      "scenario": "A sales rep tries the daily CRM actions. Three are enough to continue."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Creative",
+      "title": "Design tool",
+      "scenario": "A designer makes, exports and shares a first design."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · Finance",
+      "title": "Finance app",
+      "scenario": "A new user tries a personal finance app. Two actions are enough."
+    }
+  }
+}