@appinternalleads/ui 0.2.0

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

@@ -0,0 +1,208 @@
+{
+  "component": "carousel",
+  "baseCopy": {
+    "loadErrorTitle": "Couldn’t load this step",
+    "loadErrorBody": "Nothing was lost. Retry to load it again.",
+    "retryLabel": "Retry",
+    "emptyCta": "Refresh"
+  },
+  "base": {
+    "type": "action",
+    "icon": "compass",
+    "title": "Take a quick tour",
+    "subtitle": "Four things to know before you start.",
+    "finalLabel": "Get started",
+    "skippable": true,
+    "nextLabel": "Next",
+    "prevLabel": "Previous",
+    "skipLabel": "Skip tour",
+    "restartLabel": "Replay tour",
+    "doneTitle": "You’re all set",
+    "doneBody": "You can replay this tour from Help at any time.",
+    "emptyTitle": "No slides in this tour",
+    "emptyBody": "This tour hasn’t been set up yet.",
+    "emptyCta": "Reload",
+    "slides": [
+      {
+        "type": "data",
+        "icon": "grid",
+        "title": "Your workspace",
+        "body": "Everything your team shares lives here: projects, files and conversations."
+      },
+      {
+        "type": "action",
+        "icon": "tasks",
+        "title": "Tasks",
+        "body": "Assign work, set due dates and see what’s blocked at a glance."
+      },
+      {
+        "type": "agent",
+        "icon": "bolt",
+        "title": "Automations",
+        "body": "Let routine steps run on their own, like moving a task when a review is approved."
+      },
+      {
+        "type": "file",
+        "icon": "chart",
+        "title": "Reports",
+        "body": "Weekly summaries show progress without anyone writing a status update."
+      }
+    ]
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "icon": "sparkle",
+      "title": "What’s new in 4.2",
+      "subtitle": "Three changes worth knowing about.",
+      "finalLabel": "Got it",
+      "slides": [
+        {
+          "type": "data",
+          "icon": "layers",
+          "title": "Shared views",
+          "body": "Save a filtered view and share it with a link. Everyone sees the same columns."
+        },
+        {
+          "type": "action",
+          "icon": "search",
+          "title": "Faster search",
+          "body": "Results now appear as you type and include comments and attachments."
+        },
+        {
+          "type": "agent",
+          "icon": "chat",
+          "title": "Comment threads",
+          "body": "Reply inside a thread and resolve it when the discussion is done."
+        }
+      ]
+    },
+    "case3": {
+      "type": "file",
+      "icon": "phone",
+      "title": "Before we ask for access",
+      "subtitle": "Here’s why the app needs each permission.",
+      "finalLabel": "Continue",
+      "slides": [
+        {
+          "type": "action",
+          "icon": "bell",
+          "title": "Notifications",
+          "body": "We’ll tell you when a delivery is on its way. No marketing messages."
+        },
+        {
+          "type": "schedule",
+          "icon": "pin",
+          "title": "Location",
+          "body": "Used only while the app is open, to show pickup points near you."
+        },
+        {
+          "type": "file",
+          "icon": "camera",
+          "title": "Camera",
+          "body": "Scan a parcel label instead of typing the tracking number."
+        }
+      ]
+    },
+    "case4": {
+      "type": "agent",
+      "icon": "sparkle",
+      "title": "Meet your assistant",
+      "subtitle": "What it can do, and where it stops.",
+      "finalLabel": "Start chatting",
+      "slides": [
+        {
+          "type": "agent",
+          "icon": "pen",
+          "title": "Drafts",
+          "body": "Ask for a first draft of an email or brief, then edit it like any document."
+        },
+        {
+          "type": "agent",
+          "icon": "calendar",
+          "title": "Schedules",
+          "body": "It can find a time that works and send the invite after you approve it."
+        },
+        {
+          "type": "agent",
+          "icon": "file",
+          "title": "Files",
+          "body": "Point it at a file and ask questions. It only reads what you share."
+        },
+        {
+          "type": "agent",
+          "icon": "shield",
+          "title": "Limits",
+          "body": "It never sends, pays or deletes anything without asking you first."
+        }
+      ]
+    },
+    "case5": {
+      "type": "action",
+      "icon": "shield",
+      "title": "Secure your account",
+      "subtitle": "Five steps. This one can’t be skipped.",
+      "finalLabel": "Secure my account",
+      "skippable": false,
+      "slides": [
+        {
+          "type": "action",
+          "icon": "phone",
+          "title": "Two-factor sign-in",
+          "body": "Add a code from your phone so a stolen password isn’t enough."
+        },
+        {
+          "type": "data",
+          "icon": "key",
+          "title": "Passkeys",
+          "body": "Sign in with your fingerprint or face instead of a password."
+        },
+        {
+          "type": "file",
+          "icon": "monitor",
+          "title": "Sessions",
+          "body": "See every device that’s signed in and sign out the ones you don’t know."
+        },
+        {
+          "type": "schedule",
+          "icon": "lifebuoy",
+          "title": "Recovery",
+          "body": "Save recovery codes somewhere safe in case you lose your phone."
+        },
+        {
+          "type": "agent",
+          "icon": "bell",
+          "title": "Alerts",
+          "body": "Get an email whenever someone signs in from a new place."
+        }
+      ]
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · SaaS onboarding",
+      "title": "Product tour",
+      "scenario": "A new user sees the four parts of the product before landing in their workspace."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Release notes",
+      "title": "What’s new",
+      "scenario": "Returning users see what changed in the latest release, once."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Mobile",
+      "title": "Permission primer",
+      "scenario": "Before the system prompts appear, a delivery app explains why it needs each permission."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · AI assistant",
+      "title": "Meet your agent",
+      "scenario": "An assistant introduces what it can do and the limits it works within. Every slide uses the agent hue."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · Account",
+      "title": "Security checklist",
+      "scenario": "A required security walkthrough for new accounts. There is no skip link."
+    }
+  }
+}

package/src/components/onboarding/cicd-setup/CicdSetupView.tsx

@@ -0,0 +1,136 @@
+import { Box, Icon, MotionView, Text, useSwap, useTween } from '../../../core';
+import { Button, Callout, MetaChip } from '../../../ds';
+import { useDs, type DensityName } from '../../../tokens';
+import { 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 { BusyGhost, Slot } from '../shared/parts';
+import { usePatternStatus, useSceneReport } from '../shared/runtime';
+import { CICD_PRESETS, validateCicdSetup, type CicdSetupSettings } from './contract';
+import { isLocked, type CicdSeed, type CicdState } from './engine';
+import { useCicdSetup, type CicdOperations } from './runtime';
+import { guarded } from '../shared/guard';
+
+export type CicdSetupProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<CicdSetupSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: CicdOperations;
+  reload?: OnboardingOperation<void>;
+  initial?: CicdSeed;
+  onFinish?: () => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/**
+ * **CI/CD Setup** — a vertical stepper (Q1). Each node is locked, next, configured (mint check) or
+ * failed (apricot); a mint connector fades in under a configured stage (M9). The trailing slot
+ * cross-fades between "Locked", Configure → Configuring… (M8), a mint chip, and "Failed" + Retry,
+ * with the stage's own failure copy in an apricot alert under the stepper.
+ */
+function CicdSetupView(props: CicdSetupProps) {
+  const config = resolveConfig(CICD_PRESETS, props.preset, props.config);
+  const issues = validateCicdSetup(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, onFinish, onScene, testID,
+}: Omit<CicdSetupProps, 'config'> & { config: CicdSetupSettings }) {
+  const pattern = usePatternStatus(status ?? (config.stages.length ? 'ready' : 'empty'), reload);
+  const rt = useCicdSetup({ config, operations, result, initial, onFinish });
+  const v = rt.view;
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+
+  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}
+      primary={{ label: v.primaryLabel, onPress: rt.finish, disabled: !v.canFinish, busy: rt.state.finish === 'finishing' }}>
+      <Box gap="s3">
+        <Box role="list" aria-label={config.title}>
+          {config.stages.map((s, i) => (
+            <StageRowView key={`${s.title}-${i}`} i={i} state={rt.state} config={config} onConfigure={() => rt.configure(i)} />
+          ))}
+        </Box>
+        {v.failure ? <Callout alert title={v.failure.title}>{v.failure.body}</Callout> : null}
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+function StageRowView({ i, state, config, onConfigure }: { i: number; state: CicdState; config: CicdSetupSettings; onConfigure: () => void }) {
+  const { colors, density } = useDs();
+  const stage = config.stages[i]!;
+  const r = state.rows[i]!;
+  const done = r.phase === 'done';
+  const failed = r.phase === 'failed';
+  const locked = isLocked(config, state, i);
+  const next = !locked && !done && !failed;
+  const last = i === config.stages.length - 1;
+  const markFade = useSwap(done ? 'check' : 'num');
+  const line = useTween(done ? 1 : 0);
+  const node = done ? { bg: colors.statusBg.executed, ink: colors.status.executed, edge: colors.statusBg.executed }
+    : failed ? { bg: colors.statusBg.needsUser, ink: colors.status.needsUser, edge: colors.statusBg.needsUser }
+    : next ? { bg: colors.surface1, ink: colors.accentInk, edge: colors.accentFill }
+    : { bg: colors.band, ink: colors.textSecondary, edge: colors.band };
+  const slot = locked ? 'locked' : done ? 'ok' : failed ? 'bad' : 'btn';
+  const state_ = locked ? 'locked' : done ? config.configuredLabel : failed ? config.failedLabel : 'not configured';
+
+  return (
+    <Box role="listitem" row gap="s3" aria-label={`Stage ${i + 1} of ${config.stages.length}: ${stage.title}, ${state_}`}>
+      <Box align="center" style={{ width: 24 }}>
+        <Box width={24} height={24} radius="pill" align="center" justify="center" style={{ backgroundColor: node.bg, borderWidth: 1.5, borderColor: node.edge }}>
+          <MotionView style={{ opacity: markFade }}>
+            {done
+              ? <Icon name="tick" size={12} color={node.ink} />
+              : <Text variant="caption" numeric style={{ fontSize: 12, fontWeight: '600', color: node.ink }}>{String(i + 1)}</Text>}
+          </MotionView>
+        </Box>
+        {!last ? (
+          <Box flex={1} style={{ width: 2, marginVertical: 4, borderRadius: 1, backgroundColor: colors.hairlineStrong, overflow: 'hidden' }}>
+            <MotionView style={{ flex: 1, backgroundColor: colors.status.executed, opacity: line }} />
+          </Box>
+        ) : null}
+      </Box>
+      <Box flex={1} row wrap align="flex-start" gap="s2" style={{ minWidth: 0, paddingBottom: last ? 0 : density.gap + 10 }}>
+        <Box flex={1} style={{ minWidth: 150 }}>
+          <Text variant="caption" style={{ fontWeight: '600', fontSize: 13, color: locked ? colors.textSecondary : colors.textPrimary }}>{stage.title}</Text>
+          <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{stage.detail}</Text>
+        </Box>
+        <Slot slotKey={slot} minWidth={200}>
+          {slot === 'locked' ? (
+            <Box row align="center" gap="s1">
+              <Icon name="lock" size={13} color={colors.textSecondary} />
+              <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{config.lockedLabel}</Text>
+            </Box>
+          ) : slot === 'ok' ? (
+            <MetaChip kind="status" status="executed">{config.configuredLabel}</MetaChip>
+          ) : slot === 'bad' ? (
+            <>
+              <MetaChip kind="status" status="needsUser">{config.failedLabel}</MetaChip>
+              <Button variant="secondary" size="small" onPress={onConfigure} disabled={state.finish !== 'idle'} aria-label={`${config.retryLabel} ${stage.title}`}>{config.retryLabel}</Button>
+            </>
+          ) : (
+            <BusyGhost label={config.configureLabel} busyLabel={config.configuringLabel} busy={r.phase === 'busy'} onPress={onConfigure} name={stage.title} disabled={state.finish !== 'idle'} />
+          )}
+        </Slot>
+      </Box>
+    </Box>
+  );
+}
+
+/** CicdSetup, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const CicdSetup = guarded(CicdSetupView, CICD_PRESETS, 'CicdSetup');

package/src/components/onboarding/cicd-setup/contract.ts

@@ -0,0 +1,45 @@
+import type { DataType } from '../../../tokens';
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **CI/CD Setup — "ordered stage setup" (batch 2 §3.2)** — configure an ordered set of stages one
+ * after another (or in any order, with `enforceOrder: false`).
+ */
+
+export type SetupStage = { title: string; detail: string; type: DataType; failTitle?: string; failBody?: string };
+
+export const CICD_SCENES = ['default', 'configuring', 'partial', 'failed', 'all', 'finished', 'loading', 'empty', 'error'] as const;
+export type CicdScene = (typeof CICD_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const CICD_IN_FLIGHT: readonly string[] = ['configuring'];
+
+export type CicdSetupSettings = HeaderConfig & LoadCopy & {
+  stages: SetupStage[];
+  /** Each stage waits for the one above. */
+  enforceOrder: boolean;
+  /** With `result: 'error'`, this stage fails its first attempt; Retry succeeds. */
+  failIndex: number;
+  /** "2 of 4 configured". */
+  noun: string;
+  ship?: CicdScene;
+  configureLabel: string;
+  configuringLabel: string;
+  configuredLabel: string;
+  failedLabel: string;
+  lockedLabel: string;
+  /** The failure body when a stage has none of its own. */
+  failBody: string;
+  primaryLabel: string;
+  finishedHint: string;
+};
+
+export const CICD_PRESETS = presetsJson as unknown as PresetsFile<CicdSetupSettings>;
+
+export function validateCicdSetup(c: CicdSetupSettings): OnboardingIssue[] {
+  if (!Array.isArray(c.stages)) return [{ path: 'stages', message: 'stages must be a list.' }];
+  const issues: OnboardingIssue[] = [];
+  c.stages.forEach((s, i) => { if (!s.title) issues.push({ path: `stages[${i}].title`, message: 'Every stage needs a title.' }); });
+  if (!(c.failIndex >= 0)) issues.push({ path: 'failIndex', message: 'failIndex is 0 or more.' });
+  return issues;
+}

package/src/components/onboarding/cicd-setup/engine.ts

@@ -0,0 +1,79 @@
+import type { StateChipTone } from '../../../ds';
+import type { CicdScene, CicdSetupSettings } from './contract';
+
+/** **The CI/CD Setup engine** — pure: each stage's phase, which are locked, and the finish. */
+
+export type StagePhase = 'idle' | 'busy' | 'done' | 'failed';
+export type StageRow = { phase: StagePhase; attempts: number };
+export type CicdState = { rows: StageRow[]; finish: 'idle' | 'finishing' | 'done' };
+export type CicdSeed = { rows?: Partial<StageRow>[]; finish?: CicdState['finish'] };
+
+export type CicdAction =
+  | { type: 'configure'; index: number }
+  | { type: 'configured'; index: number }
+  | { type: 'failed'; index: number }
+  | { type: 'finish' }
+  | { type: 'finished' }
+  | { type: 'finishFailed' };
+
+export function initialCicd(c: CicdSetupSettings, seed: CicdSeed = {}): CicdState {
+  return {
+    rows: c.stages.map((_, i) => ({ phase: seed.rows?.[i]?.phase ?? 'idle', attempts: seed.rows?.[i]?.attempts ?? 0 })),
+    finish: seed.finish ?? 'idle',
+  };
+}
+
+export function cicdSeed(c: CicdSetupSettings, scene: CicdScene): CicdSeed {
+  const n = c.stages.length;
+  const fi = Math.min(c.failIndex, n - 1);
+  const rows: Partial<StageRow>[] = c.stages.map(() => ({}));
+  if (scene === 'configuring') rows[0] = { phase: 'busy', attempts: 1 };
+  if (scene === 'partial') for (let i = 0; i < Math.min(2, n); i++) rows[i] = { phase: 'done', attempts: 1 };
+  if (scene === 'failed') {
+    for (let i = 0; i < fi; i++) rows[i] = { phase: 'done', attempts: 1 };
+    rows[fi] = { phase: 'failed', attempts: 1 };
+  }
+  if (scene === 'all' || scene === 'finished') rows.fill({ phase: 'done', attempts: 1 });
+  return { rows, finish: scene === 'finished' ? 'done' : 'idle' };
+}
+
+/** Locked: order is enforced and some stage above is not configured yet. */
+export function isLocked(c: CicdSetupSettings, s: CicdState, i: number): boolean {
+  const r = s.rows[i]!;
+  return c.enforceOrder && r.phase !== 'done' && r.phase !== 'failed' && s.rows.slice(0, i).some(x => x.phase !== 'done');
+}
+
+const setRow = (s: CicdState, i: number, p: Partial<StageRow>): CicdState => ({ rows: s.rows.map((r, k) => (k === i ? { ...r, ...p } : r)), finish: 'idle' });
+
+export function reduceCicd(c: CicdSetupSettings, s: CicdState, a: CicdAction): CicdState {
+  switch (a.type) {
+    case 'configure': {
+      const r = s.rows[a.index];
+      if (!r || r.phase === 'busy' || r.phase === 'done' || s.finish !== 'idle' || isLocked(c, s, a.index)) return s;
+      return setRow(s, a.index, { phase: 'busy', attempts: r.attempts + 1 });
+    }
+    case 'configured': return s.rows[a.index]?.phase === 'busy' ? setRow(s, a.index, { phase: 'done' }) : s;
+    case 'failed': return s.rows[a.index]?.phase === 'busy' ? setRow(s, a.index, { phase: 'failed' }) : 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 cicdView(c: CicdSetupSettings, s: CicdState) {
+  const total = s.rows.length;
+  const n = s.rows.filter(r => r.phase === 'done').length;
+  const all = n === total && total > 0;
+  const failedIndex = s.rows.findIndex(r => r.phase === 'failed');
+  const failed = failedIndex >= 0 ? c.stages[failedIndex]! : null;
+  const finished = s.finish === 'done';
+  return {
+    configured: n,
+    scene: (finished ? 'finished' : all ? 'all' : failed ? 'failed' : s.rows.some(r => r.phase === 'busy') ? 'configuring' : n > 0 ? 'partial' : 'default') as CicdScene,
+    chip: { tone: (all ? 'success' : failed ? 'attention' : 'neutral') as StateChipTone, label: `${n} of ${total} ${c.noun}` },
+    failure: failed ? { title: failed.failTitle ?? `Couldn’t configure ${failed.title}`, body: failed.failBody ?? c.failBody } : null,
+    footerHint: finished ? c.finishedHint : all ? 'Every stage is configured' : c.enforceOrder ? 'Configure each stage in order' : 'Configure these in any order',
+    primaryLabel: s.finish === 'finishing' ? 'Finishing…' : finished ? 'Done' : c.primaryLabel,
+    canFinish: all && s.finish === 'idle',
+  };
+}

package/src/components/onboarding/cicd-setup/index.ts

@@ -0,0 +1,10 @@
+export {
+  CICD_IN_FLIGHT, CICD_PRESETS, CICD_SCENES, validateCicdSetup,
+  type CicdScene, type CicdSetupSettings, type SetupStage,
+} from './contract';
+export {
+  cicdSeed, cicdView, initialCicd, isLocked as isStageLocked, reduceCicd,
+  type CicdAction, type CicdSeed, type CicdState, type StagePhase, type StageRow,
+} from './engine';
+export { useCicdSetup, type CicdOperations, type ConfigureRequest } from './runtime';
+export { CicdSetup, type CicdSetupProps } from './CicdSetupView';