@appinternalleads/ui 0.2.0

package/src/components/onboarding/brand-kit/BrandKitView.tsx

@@ -0,0 +1,145 @@
+import { Box, Select, Text, type PickedFile } from '../../../core';
+import { BrandPreview, Callout, ColorField, Dropzone, initialsOf } 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 { FieldLabel, OnboardingCard } from '../shared/OnboardingCard';
+import { InvalidConfig } from '../shared/InvalidConfig';
+import { usePatternStatus, useSceneReport } from '../shared/runtime';
+import { Platform } from 'react-native';
+import { BRAND_PRESETS, FONT_STACKS, isHex, validateBrandKit, type BrandKitSettings } from './contract';
+import type { BrandSeed } from './engine';
+import { useBrandKit, type BrandKitOperations, type BrandKitValue } from './runtime';
+import { guarded } from '../shared/guard';
+
+export type BrandKitProps = {
+  preset?: OnboardingPreset;
+  config?: Partial<BrandKitSettings>;
+  density?: DensityName;
+  status?: PatternStatus;
+  result?: OnboardingResult;
+  operations?: Partial<BrandKitOperations>;
+  reload?: OnboardingOperation<void>;
+  initial?: BrandSeed;
+  /** Native only: the host's file picker. */
+  onPickFile?: () => Promise<PickedFile[]> | PickedFile[];
+  onChange?: (value: BrandKitValue) => void;
+  onSave?: (value: BrandKitValue) => void;
+  onSkip?: () => void;
+  onScene?: (scene: string) => void;
+  testID?: string;
+};
+
+/** The font to set the preview's brand name in: the web gets the prototype's stack, native the family name. */
+export function fontFamilyFor(name: string): string | undefined {
+  if (name === 'System UI') return undefined;
+  return Platform.OS === 'web' ? FONT_STACKS[name] ?? name : name;
+}
+
+/** Gap between the body's sections, by density — the handoff's 12 / 14 / 18. */
+const GAP = { compact: 12, default: 14, comfortable: 18 } as const;
+
+/**
+ * **Brand Kit** — a Dropzone (B1) for the logo; one or two colour fields (C12, B2: uppercase, max
+ * 7, touched-then-invalid says how to fix it) and a font select in one row; a preview well (B10)
+ * that paints the user's colours — the only place they appear — and cross-fades on every valid
+ * change. Save is gated on an uploaded logo and a valid first colour.
+ */
+function BrandKitView(props: BrandKitProps) {
+  const config = resolveConfig(BRAND_PRESETS, props.preset, props.config);
+  const issues = validateBrandKit(config);
+  if (issues.length) return <InvalidConfig title={config.title} issues={issues} testID={props.testID} />;
+  return <Valid {...props} config={config} />;
+}
+
+function Valid({
+  config, density, status = 'ready', result, operations, reload, initial, onPickFile, onChange, onSave, onSkip, onScene, testID,
+}: Omit<BrandKitProps, 'config'> & { config: BrandKitSettings }) {
+  const { colors, densityName } = useDs();
+  const pattern = usePatternStatus(status, reload);
+  const rt = useBrandKit({ config, operations, result, initial, onChange, onSave });
+  const s = rt.state;
+  const v = rt.view;
+  useSceneReport(pattern.status === 'ready' ? v.scene : pattern.status, onScene);
+  const gap = GAP[density ?? densityName];
+  const primary = v.previewColors[0] ?? colors.textSecondary;
+  const accent = v.previewColors[1] ?? primary;
+
+  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={config.secondaryLabel ? { label: config.secondaryLabel, onPress: () => { onSkip?.(); onScene?.('skipped'); } } : undefined}
+      primary={{ label: v.primaryLabel, onPress: rt.save, disabled: !v.canSave, busy: s.save === 'saving' }}>
+      <Box style={{ gap }}>
+        <Box gap="s2">
+          <Box row justify="space-between" gap="s2" wrap>
+            <FieldLabel>Logo</FieldLabel>
+            <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{v.dropHint}</Text>
+          </Box>
+          <Dropzone
+            label="Logo"
+            value={s.file}
+            accept={config.accept}
+            maxSizeMB={config.maxSizeMB}
+            initials={initialsOf(config.brandName)}
+            forceDrag={s.dragOver}
+            disabled={s.save === 'saving'}
+            onFiles={([f]) => { if (f) rt.file(f); }}
+            onPick={onPickFile}
+            onCancel={rt.cancelUpload}
+            onRemove={() => rt.dispatch({ type: 'removeFile' })}
+          />
+        </Box>
+
+        <Box row wrap style={{ gap: 12 }}>
+          {config.colorLabels.map((label, i) => (
+            <Box key={label} style={{ flexGrow: 1, flexBasis: 150, minWidth: 0 }}>
+              <ColorField
+                label={label}
+                showLabel
+                fluid
+                value={s.valid[i] ?? (isHex(s.colors[i]) ? s.colors[i]! : colors.surface1)}
+                text={s.colors[i] ?? ''}
+                touched={s.touched[i]}
+                onChangeText={text => rt.dispatch({ type: 'color', index: i, text })}
+                onChange={() => {}}
+                onBlur={() => rt.dispatch({ type: 'touch', index: i })}
+              />
+            </Box>
+          ))}
+          <Box gap="s1" style={{ flexGrow: 1, flexBasis: 150, minWidth: 0 }}>
+            <FieldLabel>Font</FieldLabel>
+            <Select
+              aria-label="Font"
+              value={s.font}
+              onChange={font => rt.dispatch({ type: 'font', font })}
+              options={config.fontOptions.map(f => ({ value: f, label: f }))}
+              disabled={s.save === 'saving'}
+            />
+          </Box>
+        </Box>
+
+        <BrandPreview
+          kind={config.previewKind}
+          brandName={config.brandName}
+          colors={[primary, accent]}
+          font={fontFamilyFor(s.font)}
+          logoUri={s.file.status === 'filled' ? s.file.file.previewUri : undefined}
+        />
+
+        {s.save === 'failed' ? <Callout alert title={config.saveErrorTitle}>{config.saveErrorBody}</Callout> : null}
+      </Box>
+    </OnboardingCard>
+  );
+}
+
+/** BrandKit, guarded: a wrong-kind config is refused by name and a render error is caught, never thrown to the page (`shared/guard`). */
+export const BrandKit = guarded(BrandKitView, BRAND_PRESETS, 'BrandKit');

package/src/components/onboarding/brand-kit/contract.ts

@@ -0,0 +1,74 @@
+import type { BrandPreviewKind } from '../../../ds';
+import type { HeaderConfig, LoadCopy, OnboardingIssue, PresetsFile } from '../shared/contract';
+import presetsJson from './presets.json';
+
+/**
+ * **Brand Kit (handoff §3.1)** — upload a logo, set a primary (and an accent) colour, pick a font,
+ * and see a live preview. **The user's colours appear only inside the preview well.**
+ */
+
+export const BRAND_SCENES = [
+  'default', 'dragover', 'uploading', 'filled', 'invalidFile', 'invalidHex', 'saving', 'saved', 'failed', 'loading', 'empty', 'error',
+] as const;
+export type BrandScene = (typeof BRAND_SCENES)[number];
+/** Scenes that are an operation in flight — see `sceneProps`. */
+export const BRAND_IN_FLIGHT: readonly string[] = ['uploading', 'saving'];
+
+export type BrandDefaults = {
+  logo: 'empty' | 'uploading' | 'filled' | 'invalid';
+  /** Raw field text per colour — may ship invalid (case 3's `#2F6BE`). */
+  colors: string[];
+  font: string;
+  /** Fields that ship already touched, so their message shows. */
+  touched?: boolean[];
+  /** The last valid value per field — what the swatch and preview keep while a field is invalid. */
+  lastValid?: (string | null)[];
+};
+
+export type BrandKitSettings = HeaderConfig & LoadCopy & {
+  previewKind: BrandPreviewKind;
+  brandName: string;
+  /** Extensions without the dot. */
+  accept: string[];
+  maxSizeMB: number;
+  /** One label per colour field — one or two. */
+  colorLabels: string[];
+  fontOptions: string[];
+  defaults: BrandDefaults;
+  /** Complete colours the demo scenes fill in. Demo boards only. */
+  demoColors: string[];
+  ship?: BrandScene;
+  primaryLabel: string;
+  savingLabel: string;
+  savedLabel: string;
+  secondaryLabel?: string;
+  savedHint: string;
+  saveErrorTitle: string;
+  saveErrorBody: string;
+};
+
+export const BRAND_PRESETS = presetsJson as unknown as PresetsFile<BrandKitSettings>;
+
+/** The prototype's font stacks. The web gets the stack; native gets the family name (`fontFamilyFor`, in the view). */
+export const FONT_STACKS: Record<string, string> = {
+  'Nunito Sans': "'Nunito Sans', sans-serif",
+  Georgia: 'Georgia, serif',
+  'Trebuchet MS': "'Trebuchet MS', sans-serif",
+  'System UI': 'system-ui, sans-serif',
+  Arial: 'Arial, Helvetica, sans-serif',
+  Verdana: 'Verdana, sans-serif',
+  'Times New Roman': "'Times New Roman', Times, serif",
+};
+
+const HEX = /^#[0-9a-fA-F]{6}$/;
+export const isHex = (v: string | null | undefined): v is string => typeof v === 'string' && HEX.test(v);
+
+export function validateBrandKit(c: BrandKitSettings): OnboardingIssue[] {
+  const issues: OnboardingIssue[] = [];
+  if (!Array.isArray(c.colorLabels) || c.colorLabels.length < 1 || c.colorLabels.length > 2) issues.push({ path: 'colorLabels', message: 'One or two colour fields.' });
+  if (!Array.isArray(c.accept) || !c.accept.length) issues.push({ path: 'accept', message: 'Name at least one file type.' });
+  if (!(c.maxSizeMB > 0)) issues.push({ path: 'maxSizeMB', message: 'maxSizeMB must be more than 0.' });
+  if (!Array.isArray(c.fontOptions) || !c.fontOptions.length) issues.push({ path: 'fontOptions', message: 'Offer at least one font.' });
+  if (!['appbar', 'email', 'login', 'invoice', 'ticket'].includes(c.previewKind)) issues.push({ path: 'previewKind', message: `“${c.previewKind}” is not a preview.` });
+  return issues;
+}

package/src/components/onboarding/brand-kit/engine.ts

@@ -0,0 +1,150 @@
+import type { PickedFile } from '../../../core';
+import { checkFile } from '../../../core';
+import type { DropzoneValue, StateChipTone } from '../../../ds';
+import type { SavePhase } from '../shared/contract';
+import { isHex, type BrandKitSettings, type BrandScene } from './contract';
+
+/** **The Brand Kit engine** — pure: the logo, the colour fields (raw, touched, last valid), the font, the save. */
+
+export type BrandState = {
+  file: DropzoneValue;
+  /** Shows the drag-over face — the "dragover" scene; a real drag is the Dropzone's own. */
+  dragOver: boolean;
+  colors: string[];
+  touched: boolean[];
+  valid: (string | null)[];
+  font: string;
+  save: SavePhase;
+};
+export type BrandSeed = Partial<BrandState>;
+
+export type BrandAction =
+  | { type: 'file'; file: PickedFile }
+  | { type: 'progress'; progress: number }
+  | { type: 'uploaded' }
+  | { type: 'removeFile' }
+  | { type: 'color'; index: number; text: string }
+  | { type: 'touch'; index: number }
+  | { type: 'font'; font: string }
+  | { type: 'save' }
+  | { type: 'saved' }
+  | { type: 'failed' }
+  | { type: 'reset'; state: BrandState };
+
+const slug = (t: string) => t.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+
+/** The demo's logo, by state — named after the brand, sized like the real thing. */
+export function demoLogo(c: BrandKitSettings, kind: 'empty' | 'uploading' | 'filled' | 'invalid'): DropzoneValue {
+  const ext = c.accept[0] ?? 'png';
+  const file: PickedFile = { name: `${slug(c.brandName)}-logo.${ext}`, sizeBytes: ext === 'svg' ? 14336 : 186368, ext };
+  if (kind === 'filled') return { status: 'filled', file };
+  if (kind === 'uploading') return { status: 'uploading', file, progress: 0.36 };
+  if (kind === 'invalid') return { status: 'invalid', reason: 'type', file: { name: `${slug(c.brandName)}-logo.gif`, sizeBytes: 9000, ext: 'gif' } };
+  return { status: 'empty' };
+}
+
+export function initialBrand(c: BrandKitSettings, seed: BrandSeed = {}): BrandState {
+  const d = c.defaults;
+  const n = c.colorLabels.length;
+  const colors = Array.from({ length: n }, (_, i) => d.colors?.[i] ?? '');
+  return {
+    file: seed.file ?? demoLogo(c, d.logo ?? 'empty'),
+    dragOver: seed.dragOver ?? false,
+    colors: seed.colors ?? colors,
+    touched: seed.touched ?? Array.from({ length: n }, (_, i) => Boolean(d.touched?.[i])),
+    valid: seed.valid ?? colors.map((v, i) => (isHex(v) ? v : d.lastValid?.[i] ?? null)),
+    font: seed.font ?? d.font ?? c.fontOptions[0]!,
+    save: seed.save ?? 'idle',
+  };
+}
+
+export function brandSeed(c: BrandKitSettings, scene: BrandScene): BrandSeed {
+  const base = initialBrand(c);
+  const n = c.colorLabels.length;
+  const fillAll = (): Pick<BrandState, 'colors' | 'valid' | 'touched'> => {
+    const colors = base.colors.slice();
+    const valid = base.valid.slice();
+    const touched = base.touched.slice();
+    for (let j = 0; j < n; j++) if (!isHex(colors[j])) { colors[j] = c.demoColors[j]!; valid[j] = c.demoColors[j]!; touched[j] = false; }
+    return { colors, valid, touched };
+  };
+  switch (scene) {
+    case 'dragover': return { file: { status: 'empty' }, dragOver: true };
+    case 'uploading': return { file: demoLogo(c, 'uploading') };
+    case 'filled': return { file: demoLogo(c, 'filled') };
+    case 'invalidFile': return { file: demoLogo(c, 'invalid') };
+    case 'invalidHex': {
+      const f = fillAll();
+      f.colors[n - 1] = `#${c.demoColors[n - 1]!.slice(1, 6)}`;
+      f.touched[n - 1] = true;
+      return { file: base.file.status === 'filled' ? base.file : demoLogo(c, 'filled'), ...f };
+    }
+    case 'saving': case 'saved': case 'failed': return { file: demoLogo(c, 'filled'), ...fillAll(), save: scene };
+    default: return {};
+  }
+}
+
+const idle = (s: BrandState): SavePhase => (s.save === 'saving' ? 'saving' : 'idle');
+
+export function reduceBrand(c: BrandKitSettings, s: BrandState, a: BrandAction): BrandState {
+  switch (a.type) {
+    case 'file': {
+      const check = checkFile({ ...a.file, ext: a.file.ext === 'jpeg' ? 'jpg' : a.file.ext }, { accept: c.accept, maxSizeMB: c.maxSizeMB });
+      return {
+        ...s, dragOver: false, save: 'idle',
+        file: check.ok ? { status: 'uploading', file: a.file, progress: 0 } : { status: 'invalid', file: a.file, reason: check.reason },
+      };
+    }
+    case 'progress': return s.file.status === 'uploading' ? { ...s, file: { ...s.file, progress: a.progress } } : s;
+    case 'uploaded': return s.file.status === 'uploading' ? { ...s, file: { status: 'filled', file: s.file.file }, save: 'idle' } : s;
+    case 'removeFile': return { ...s, file: { status: 'empty' }, dragOver: false, save: idle(s) };
+    case 'color': {
+      const text = a.text;
+      const colors = s.colors.map((v, i) => (i === a.index ? text : v));
+      const valid = isHex(text) ? s.valid.map((v, i) => (i === a.index ? text : v)) : s.valid;
+      return { ...s, colors, valid, save: idle(s) };
+    }
+    case 'touch': return { ...s, touched: s.touched.map((t, i) => (i === a.index ? true : t)) };
+    case 'font': return { ...s, font: a.font, save: idle(s) };
+    case 'save': return { ...s, save: 'saving' };
+    case 'saved': return s.save === 'saving' ? { ...s, save: 'saved' } : s;
+    case 'failed': return s.save === 'saving' ? { ...s, save: 'failed' } : s;
+    case 'reset': return a.state;
+  }
+}
+
+export function brandView(c: BrandKitSettings, s: BrandState) {
+  const invalidHex = s.colors.some((v, i) => s.touched[i] && !isHex(v));
+  const needLogo = s.file.status !== 'filled';
+  const needColor = !isHex(s.colors[0]);
+  const first = (c.colorLabels[0] ?? 'primary').toLowerCase();
+  const chip: { tone: StateChipTone; label: string } = s.save === 'saving' ? { tone: 'neutral', label: c.savingLabel }
+    : s.save === 'saved' ? { tone: 'success', label: c.savedLabel }
+    : s.save === 'failed' || invalidHex || s.file.status === 'invalid' ? { tone: 'attention', label: 'Needs attention' }
+    : { tone: 'neutral', label: 'Draft' };
+  const footerHint = s.save === 'saved' ? c.savedHint
+    : s.save === 'saving' ? 'Saving your changes…'
+    : s.save === 'failed' ? 'Not saved · retry when ready'
+    : s.file.status === 'uploading' ? 'Waiting for the upload to finish…'
+    : needLogo && needColor ? `Add a logo and a valid ${first} colour to continue`
+    : needLogo ? 'Add a logo to continue'
+    : needColor ? `Fix the ${first} colour to continue`
+    : 'Ready to save';
+  const scene: BrandScene = s.save !== 'idle' ? s.save
+    : s.dragOver ? 'dragover'
+    : s.file.status === 'uploading' ? 'uploading'
+    : s.file.status === 'invalid' ? 'invalidFile'
+    : invalidHex ? 'invalidHex'
+    : s.file.status === 'filled' ? 'filled' : 'default';
+  const types = c.accept.map(x => x.toUpperCase());
+  return {
+    scene,
+    chip,
+    footerHint,
+    canSave: !needLogo && !needColor && s.save !== 'saving' && s.save !== 'saved',
+    primaryLabel: s.save === 'saving' ? c.savingLabel : s.save === 'saved' ? c.savedLabel : s.save === 'failed' ? c.retryLabel : c.primaryLabel,
+    dropHint: `${types.length > 1 ? `${types.slice(0, -1).join(', ')} or ${types.at(-1)}` : types[0]} · up to ${c.maxSizeMB} MB`,
+    /** What the preview paints: the last valid colour of each field (`null` until there is one). */
+    previewColors: s.valid,
+  };
+}

package/src/components/onboarding/brand-kit/index.ts

@@ -0,0 +1,10 @@
+export {
+  BRAND_PRESETS, BRAND_SCENES, BRAND_IN_FLIGHT, FONT_STACKS, isHex, validateBrandKit,
+  type BrandDefaults, type BrandKitSettings, type BrandScene,
+} from './contract';
+export {
+  brandSeed, brandView, demoLogo, initialBrand, reduceBrand,
+  type BrandAction, type BrandSeed, type BrandState,
+} from './engine';
+export { useBrandKit, type BrandKitOperations, type BrandKitValue } from './runtime';
+export { BrandKit, fontFamilyFor, type BrandKitProps } from './BrandKitView';

package/src/components/onboarding/brand-kit/presets.json

@@ -0,0 +1,210 @@
+{
+  "component": "brand-kit",
+  "base": {
+    "type": "file",
+    "icon": "palette",
+    "previewKind": "appbar",
+    "title": "Brand your workspace",
+    "subtitle": "Logo, colours and font for the app.",
+    "brandName": "Northwind",
+    "accept": [
+      "svg",
+      "png"
+    ],
+    "maxSizeMB": 2,
+    "colorLabels": [
+      "Primary",
+      "Accent"
+    ],
+    "fontOptions": [
+      "Nunito Sans",
+      "Georgia",
+      "Trebuchet MS",
+      "System UI"
+    ],
+    "defaults": {
+      "logo": "empty",
+      "colors": [
+        "#1F4E79",
+        "#F2B544"
+      ],
+      "font": "Nunito Sans"
+    },
+    "demoColors": [
+      "#1F4E79",
+      "#F2B544"
+    ],
+    "primaryLabel": "Save brand kit",
+    "savingLabel": "Saving…",
+    "savedLabel": "Saved",
+    "retryLabel": "Retry",
+    "secondaryLabel": "Skip",
+    "savedHint": "Saved · applies to everyone in the workspace",
+    "saveErrorTitle": "Couldn’t save your brand kit",
+    "saveErrorBody": "Nothing was changed. Check your connection, then retry.",
+    "loadErrorTitle": "Couldn’t load your brand kit",
+    "loadErrorBody": "Your saved settings are safe. Retry to load them again.",
+    "emptyTitle": "No brand kit yet",
+    "emptyBody": "Add a logo and colours so what you share looks like your brand.",
+    "emptyCta": "Set up brand kit"
+  },
+  "cases": {
+    "case1": {},
+    "case2": {
+      "icon": "mail",
+      "previewKind": "email",
+      "title": "Newsletter header",
+      "subtitle": "Shown at the top of every issue.",
+      "brandName": "The Weekly Crop",
+      "accept": [
+        "png",
+        "jpg"
+      ],
+      "colorLabels": [
+        "Header",
+        "Button"
+      ],
+      "fontOptions": [
+        "Arial",
+        "Georgia",
+        "Verdana",
+        "Times New Roman",
+        "Trebuchet MS"
+      ],
+      "defaults": {
+        "logo": "filled",
+        "colors": [
+          "#24543F",
+          "#E08A2B"
+        ],
+        "font": "Georgia"
+      },
+      "demoColors": [
+        "#24543F",
+        "#E08A2B"
+      ],
+      "primaryLabel": "Save header",
+      "savedHint": "Saved · used from the next issue"
+    },
+    "case3": {
+      "icon": "layout",
+      "previewKind": "login",
+      "title": "White-label the client portal",
+      "subtitle": "Applies to the portal login page.",
+      "brandName": "Harbor Legal",
+      "accept": [
+        "svg"
+      ],
+      "colorLabels": [
+        "Brand",
+        "Link"
+      ],
+      "defaults": {
+        "logo": "filled",
+        "colors": [
+          "#18324A",
+          "#2F6BE"
+        ],
+        "touched": [
+          false,
+          true
+        ],
+        "lastValid": [
+          null,
+          "#2F6BEB"
+        ],
+        "font": "Nunito Sans"
+      },
+      "demoColors": [
+        "#18324A",
+        "#2F6BEB"
+      ],
+      "primaryLabel": "Save portal branding",
+      "savedHint": "Saved · live on the client’s login page"
+    },
+    "case4": {
+      "type": "data",
+      "icon": "receipt",
+      "previewKind": "invoice",
+      "title": "Invoice branding",
+      "subtitle": "Appears on every invoice you send.",
+      "brandName": "Ledgerly Studio",
+      "accept": [
+        "png"
+      ],
+      "maxSizeMB": 1,
+      "colorLabels": [
+        "Accent"
+      ],
+      "fontOptions": [
+        "Georgia",
+        "Nunito Sans"
+      ],
+      "defaults": {
+        "logo": "empty",
+        "colors": [
+          "#2E6F62"
+        ],
+        "font": "Georgia"
+      },
+      "demoColors": [
+        "#2E6F62"
+      ],
+      "primaryLabel": "Save invoice branding",
+      "savedHint": "Saved · applies to new invoices"
+    },
+    "case5": {
+      "type": "date",
+      "icon": "ticket",
+      "previewKind": "ticket",
+      "title": "Ticket design",
+      "subtitle": "Printed on each ticket and stub.",
+      "brandName": "Lumen Fest 2026",
+      "colorLabels": [
+        "Ticket",
+        "Stub"
+      ],
+      "defaults": {
+        "logo": "uploading",
+        "colors": [
+          "#3B2A6B",
+          "#F4C95D"
+        ],
+        "font": "Trebuchet MS"
+      },
+      "demoColors": [
+        "#3B2A6B",
+        "#F4C95D"
+      ],
+      "primaryLabel": "Save ticket design",
+      "savedHint": "Saved · applies to tickets issued from now"
+    }
+  },
+  "meta": {
+    "case1": {
+      "eyebrow": "Case study 1 · Product",
+      "title": "Workspace branding",
+      "scenario": "A workspace admin adds a logo and two colours so every teammate sees the company brand in the app’s top bar and sidebar."
+    },
+    "case2": {
+      "eyebrow": "Case study 2 · Marketing",
+      "title": "Newsletter header",
+      "scenario": "A marketer sets the header band and button colour used at the top of every issue. Fonts are limited to ones that render in email clients."
+    },
+    "case3": {
+      "eyebrow": "Case study 3 · Agency",
+      "title": "Client portal white-label",
+      "scenario": "An agency puts a client’s brand on their portal login page. The board opens with a mistyped link colour so the invalid-hex state is visible."
+    },
+    "case4": {
+      "eyebrow": "Case study 4 · Finance",
+      "title": "Invoice branding",
+      "scenario": "A studio adds its logo and a single accent colour to every invoice. PNG only, up to 1 MB."
+    },
+    "case5": {
+      "eyebrow": "Case study 5 · Events",
+      "title": "Event ticket",
+      "scenario": "An organiser brands the ticket and its stub. The board opens mid-upload, so the progress state is visible before anything else."
+    }
+  }
+}