@appinternalleads/ui 0.2.0

package/src/ds/Dropzone.tsx

@@ -0,0 +1,220 @@
+import {
+  Box, FileDrop, Icon, Image, MotionView, Pressable, Text, formatFileSize, useSwap, type IconName, type PickedFile,
+} from '../core';
+import { blockRadii, useDs } from '../tokens';
+import { Button } from './Button';
+import { ProgressBar } from './blockDisplay';
+import { TypeTile } from './blocks';
+
+/**
+ * **C10 · Dropzone — one file, five faces (onboarding handoff B1).**
+ *
+ * Controlled and presentational: the host (a component's engine) owns what the file IS — empty,
+ * uploading at 48%, uploaded, refused — and this draws it. Picking goes through `core/FileDrop`:
+ * the real file dialog plus drag-and-drop on web, the host's `onPick` on native. Validation is
+ * `checkFile` (by extension against `accept`, by size against `maxSizeMB`), called by the engine.
+ *
+ * The faces cross-fade in one cell (M4): empty (dashed) · drag-over (solid coral on the soft coral
+ * ground, web only) · uploading (a file tile, "Uploading… 48%", a 6px coral bar, Cancel) · filled
+ * (`media`: a 48px thumbnail or the brand's initials, a mint "Uploaded" line, Replace and Remove;
+ * `file`: a file tile, name, size and Remove) · invalid (apricot, the reason, "Choose another file").
+ *
+ * `FileUploadWidget` stays the input widget for question/1; this is the block the onboarding
+ * components compose.
+ */
+
+export type DropzoneValue =
+  | { status: 'empty' }
+  | { status: 'uploading'; file: PickedFile; progress: number }
+  | { status: 'filled'; file: PickedFile }
+  | { status: 'invalid'; file: PickedFile; reason: 'type' | 'size' };
+
+export type DropzoneCopy = {
+  empty: string;
+  dragOver: string;
+  uploading: string;
+  uploaded: string;
+  wrongType: string;
+  /** `{max}` is replaced by `maxSizeMB`. */
+  tooLarge: string;
+  chooseAnother: string;
+  replace: string;
+  remove: string;
+  cancel: string;
+};
+
+export const DROPZONE_COPY: DropzoneCopy = {
+  empty: 'Drop a file here or click to upload',
+  dragOver: 'Release to upload',
+  uploading: 'Uploading…',
+  uploaded: 'Uploaded',
+  wrongType: 'This file type isn’t supported',
+  tooLarge: 'File is larger than {max} MB',
+  chooseAnother: 'Choose another file',
+  replace: 'Replace',
+  remove: 'Remove file',
+  cancel: 'Cancel upload',
+};
+
+/** Min height by density — 64 / 76 / 96. */
+const MIN_H = { compact: 64, default: 76, comfortable: 96 } as const;
+
+export function Dropzone({
+  label, value, onFiles, onPick, onCancel, onRemove, accept, maxSizeMB, hint, variant = 'media',
+  initials, copy: copyIn, disabled, forceDrag = false,
+}: {
+  /** The accessible name — "Logo". */
+  label: string;
+  value: DropzoneValue;
+  /** A file was picked or dropped. The engine checks it and sets `value`. */
+  onFiles: (files: PickedFile[]) => void;
+  /** Native only: the host's picker. */
+  onPick?: () => Promise<PickedFile[]> | PickedFile[];
+  onCancel?: () => void;
+  onRemove?: () => void;
+  accept?: string[];
+  maxSizeMB?: number;
+  /** A second line in the empty face — "CSV · up to 10 MB". */
+  hint?: string;
+  /** `media` shows a thumbnail and Replace (a logo); `file` shows a file tile (a CSV). */
+  variant?: 'media' | 'file';
+  /** Drawn in the thumbnail when the file has no preview image. */
+  initials?: string;
+  copy?: Partial<DropzoneCopy>;
+  disabled?: boolean;
+  /** Draw the drag-over face without a drag — a demo board's "dragover" scene, a visual test. */
+  forceDrag?: boolean;
+}) {
+  const { colors, densityName } = useDs();
+  const copy = { ...DROPZONE_COPY, ...copyIn };
+
+  return (
+    <FileDrop accept={accept} onFiles={onFiles} onPick={onPick} disabled={disabled || value.status === 'uploading'}>
+      {({ open, dragging: realDrag }) => {
+        const dragging = realDrag || forceDrag;
+        const face = value.status === 'empty' && dragging ? 'drag' : value.status;
+        return (
+          <Layer faceKey={face} minHeight={MIN_H[densityName]}>
+            {value.status === 'empty' ? (
+              <Pressable
+                aria-label={`${label}: ${copy.empty}`}
+                onPress={open}
+                disabled={disabled}
+                row
+                justify="flex-start"
+                gap="s3"
+                minHeight={MIN_H[densityName]}
+                style={{
+                  paddingHorizontal: 14,
+                  borderRadius: blockRadii.inset,
+                  borderWidth: 1,
+                  borderStyle: dragging ? 'solid' : 'dashed',
+                  borderColor: dragging ? colors.accentFill : colors.hairlineStrong,
+                  backgroundColor: dragging ? colors.brandSubtle : colors.surface1,
+                }}>
+                <Box width={32} height={32} align="center" justify="center" style={{ borderRadius: blockRadii.tile, backgroundColor: dragging ? colors.surface1 : colors.surfaceSunken }}>
+                  <Icon name="upload" size={17} color={dragging ? colors.accentInk : colors.textSecondary} />
+                </Box>
+                <Box flex={1} style={{ minWidth: 0 }}>
+                  <Text variant="caption" color="textPrimary" style={{ fontWeight: '600' }}>{dragging ? copy.dragOver : copy.empty}</Text>
+                  {hint && !dragging ? <Text variant="caption" color="textSecondary" style={{ fontSize: 12 }}>{hint}</Text> : null}
+                </Box>
+              </Pressable>
+            ) : value.status === 'uploading' ? (
+              <Row minHeight={MIN_H[densityName]} busy>
+                <TypeTile icon="file" type="file" size={32} />
+                <Box flex={1} gap="s1" style={{ minWidth: 0 }}>
+                  <Box row justify="space-between" gap="s2">
+                    <Text variant="caption" color="textPrimary" numberOfLines={1} style={{ flexShrink: 1, fontWeight: '600' }}>{value.file.name}</Text>
+                    <Text variant="caption" color="textSecondary" numeric numberOfLines={1} style={{ fontSize: 12, flexShrink: 0 }}>
+                      {`${copy.uploading} ${Math.round(value.progress * 100)}%`}
+                    </Text>
+                  </Box>
+                  <ProgressBar bare tone="accent" label={`Uploading ${value.file.name}`} value={Math.round(value.progress * 100)} />
+                </Box>
+                {onCancel ? <IconButton icon="close" label={copy.cancel} onPress={onCancel} /> : null}
+              </Row>
+            ) : value.status === 'filled' ? (
+              <Row minHeight={MIN_H[densityName]}>
+                {variant === 'media' ? <Thumb file={value.file} initials={initials} /> : <TypeTile icon="file" type="file" size={32} />}
+                <Box flex={1} style={{ minWidth: 0 }}>
+                  <Text variant="caption" color="textPrimary" numberOfLines={1} style={{ fontWeight: '600' }}>{value.file.name}</Text>
+                  {variant === 'media' ? (
+                    <Box row align="center" gap="s1">
+                      <Icon name="tick" size={12} color={colors.status.executed} />
+                      <Text variant="caption" numeric style={{ fontSize: 12, color: colors.status.executed }}>
+                        {`${copy.uploaded} · ${formatFileSize(value.file.sizeBytes)} · ${value.file.ext.toUpperCase()}`}
+                      </Text>
+                    </Box>
+                  ) : (
+                    <Text variant="caption" color="textSecondary" numeric style={{ fontSize: 12 }}>{formatFileSize(value.file.sizeBytes)}</Text>
+                  )}
+                </Box>
+                {variant === 'media' ? <Button variant="secondary" size="small" onPress={open} disabled={disabled}>{copy.replace}</Button> : null}
+                {onRemove ? <IconButton icon="trash" label={copy.remove} onPress={onRemove} disabled={disabled} /> : null}
+              </Row>
+            ) : (
+              <Box
+                row
+                wrap
+                align="center"
+                gap="s3"
+                role="alert"
+                style={{ minHeight: MIN_H[densityName], paddingVertical: 10, paddingHorizontal: 14, borderRadius: blockRadii.inset, backgroundColor: colors.statusBg.needsUser }}>
+                <Icon name="alert" size={17} color={colors.status.needsUser} />
+                <Box flex={1} style={{ minWidth: 160 }}>
+                  <Text variant="caption" style={{ fontWeight: '600', color: colors.status.needsUser }}>
+                    {value.reason === 'type' ? copy.wrongType : copy.tooLarge.replace('{max}', String(maxSizeMB ?? ''))}
+                  </Text>
+                  <Text variant="caption" color="textPrimary" numberOfLines={1} style={{ fontSize: 12 }}>{value.file.name}</Text>
+                </Box>
+                <Button variant="secondary" size="small" onPress={open} disabled={disabled}>{copy.chooseAnother}</Button>
+              </Box>
+            )}
+          </Layer>
+        );
+      }}
+    </FileDrop>
+  );
+}
+
+/** M4: the face swaps in one cell — the new one fades in, the layout never holds two. */
+function Layer({ faceKey, minHeight, children }: { faceKey: string; minHeight: number; children: React.ReactNode }) {
+  const fade = useSwap(faceKey);
+  return <MotionView style={{ opacity: fade, minHeight }}>{children}</MotionView>;
+}
+
+function Row({ minHeight, busy, children }: { minHeight: number; busy?: boolean; children: React.ReactNode }) {
+  const { colors } = useDs();
+  return (
+    <Box
+      row
+      align="center"
+      gap="s3"
+      aria-busy={busy || undefined}
+      style={{ minHeight, paddingVertical: 10, paddingHorizontal: 12, borderRadius: blockRadii.inset, borderWidth: 1, borderColor: colors.hairlineStrong, backgroundColor: colors.surface1 }}>
+      {children}
+    </Box>
+  );
+}
+
+function Thumb({ file, initials }: { file: PickedFile; initials?: string }) {
+  const { colors } = useDs();
+  return (
+    <Box width={48} height={48} align="center" justify="center" style={{ borderRadius: blockRadii.inset, backgroundColor: colors.surfaceSunken, overflow: 'hidden', flexShrink: 0 }}>
+      {file.previewUri
+        ? <Image source={{ uri: file.previewUri }} width={48} height={48} resizeMode="contain" alt="" />
+        : <Text variant="label" color="textSecondary" style={{ fontWeight: '700' }}>{initials ?? file.name.slice(0, 2).toUpperCase()}</Text>}
+    </Box>
+  );
+}
+
+/** The 32px round icon button of the handoff's button table: transparent, muted, named. */
+export function IconButton({ icon, label, onPress, disabled }: { icon: IconName; label: string; onPress: () => void; disabled?: boolean }) {
+  const { colors } = useDs();
+  return (
+    <Pressable aria-label={label} onPress={onPress} disabled={disabled} width={32} height={32} radius="pill">
+      <Icon name={icon} size={16} color={colors.textSecondary} />
+    </Pressable>
+  );
+}

package/src/ds/EmptyState.tsx

@@ -0,0 +1,91 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Box, Icon, Text, type IconName } from '../core';
+import { useDs } from '../tokens';
+
+/**
+ * Nothing here yet — **and never an error.**
+ *
+ * The contract is explicit that `n = 0` renders an empty state naming what was searched, not a
+ * failure: a search that found nothing worked correctly. The difference matters because the two
+ * look identical to a user who is told the wrong one.
+ *
+ * `card` is the panel form — a full-card empty state takes the rung ABOVE a standard card, so it
+ * reads as a panel rather than as one more row in the list it is replacing.
+ */
+export function EmptyState({
+  icon, title, body, action, card = false, style,
+}: {
+  icon: IconName;
+  title: string;
+  body: string;
+  action?: ReactNode;
+  card?: boolean;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const { colors, theme } = useDs();
+  const sol = theme === 'solarium';
+
+  return (
+    <Box
+      align="center"
+      gap={card ? 's3' : 's4'}
+      {...(card
+        ? ({ py: 's6', px: 's5', radius: 'card', bg: 'surface1', lift: 1 } as const)
+        : ({ flex: 1, justify: 'center', px: 's8' } as const))}
+      style={style}>
+      {/* A circle in Solarium, a rounded tile in paper — the mark is the one tinted object here,
+          and a circle in the paper system would read as an avatar. */}
+      <Box
+        width={sol ? 46 : 38}
+        height={sol ? 46 : 38}
+        align="center"
+        justify="center"
+        radius={sol ? 'pill' : 'chip'}
+        bg="surfaceSunken">
+        <Icon name={icon} size={sol ? 22 : 18} color={colors.textTertiary} />
+      </Box>
+
+      <Box gap="s1" align="center">
+        <Text variant="heading" align="center">{title}</Text>
+        <Text variant="caption" color="textSecondary" align="center">{body}</Text>
+      </Box>
+
+      {action}
+    </Box>
+  );
+}
+
+/**
+ * A structural group label — `RECENT RUNS`, `TRIGGER`, `STEPS`.
+ *
+ * Mono for the eyebrow variant because these name machine-side groupings; the row variant is the
+ * sans one that sits above a list.
+ */
+export function SectionLabel({
+  children, variant = 'row', count, tone,
+}: {
+  children: string;
+  variant?: 'row' | 'mono';
+  count?: number;
+  /** An ink for the label (14 Sep 2026, app 1's vibrant screens), like `SectionHeader`'s `tone`. Omitted, unchanged. */
+  tone?: string;
+}) {
+  const { headings } = useDs();
+  const toned = tone ? { color: tone, fontWeight: '700' as const } : undefined;
+  if (variant === 'mono') {
+    /* The same structural-label job as `SectionHeader`'s eyebrow, so it follows the same
+       per-app knob — see `Ds.headings`. */
+    return (
+      <Text variant={headings === 'screen' ? 'eyebrowDense' : 'monoLabel'} mono color="textTertiary" uppercase style={toned}>{children}</Text>
+    );
+  }
+  return (
+    <Box row align="center" justify="space-between" gap="s2">
+      <Text variant="sectionLabel" color="textSecondary" style={toned}>{children}</Text>
+      {count === undefined ? null : (
+        <Text variant="monoCount" mono numeric color="textTertiary">{count}</Text>
+      )}
+    </Box>
+  );
+}

package/src/ds/PlatformSwitch.tsx

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+import { Box, Switch, Text } from '../core';
+
+/**
+ * A switch with its label beside it — the settings-row form.
+ *
+ * **The label sits on the same line as the control**, not above it: a switch under a label reads
+ * as a heading with an orphaned control, and the label is the thing being switched.
+ */
+export function PlatformSwitch({
+  value, onValueChange, label,
+}: { value: boolean; onValueChange: (next: boolean) => void; label?: string }) {
+  if (!label) return <Switch value={value} onChange={onValueChange} />;
+  return (
+    <Box row align="center" justify="space-between" gap="s4">
+      <Text>{label}</Text>
+      <Switch value={value} onChange={onValueChange} aria-label={label} />
+    </Box>
+  );
+}
+
+/** A labelled row in a settings list, with the control on the right. */
+export function SettingRow({
+  title, meta, children,
+}: { title: string; meta?: string; children?: ReactNode }) {
+  return (
+    <Box row align="center" justify="space-between" gap="s4" py="s3" px="s4">
+      <Box flex={1} gap="s1">
+        <Text>{title}</Text>
+        {meta ? <Text variant="caption" color="textSecondary">{meta}</Text> : null}
+      </Box>
+      {children}
+    </Box>
+  );
+}

package/src/ds/Reach.tsx

@@ -0,0 +1,99 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Box, Icon, Text } from '../core';
+import { useDs } from '../tokens';
+
+/** Whether the product can be reached, and which half of the problem it is. */
+export type Reach = 'ok' | 'offline' | 'unreachable';
+
+/**
+ * **The app supplies reachability; the library renders it.**
+ *
+ * `@comppack/ds`'s version called `useSyncExternalStore` over `@comppack/core`'s store, which would give
+ * this package a dependency on the run domain. That is the same line `EnumField` refused to cross
+ * when it took resolved options as a prop rather than fetching them — a component library that
+ * subscribes to an app's store has stopped being a component library.
+ *
+ * So the store stays in the app and feeds this provider. `useReach()` keeps its old signature, so
+ * a consumer's call sites do not change; only the wiring at the root does.
+ */
+const ReachContext = createContext<Reach>('ok');
+
+export function ReachProvider({ value, children }: { value: Reach; children: ReactNode }) {
+  return <ReachContext.Provider value={value}>{children}</ReachContext.Provider>;
+}
+
+export function useReach(): Reach {
+  return useContext(ReachContext);
+}
+
+/**
+ * What each state is called, in one place, so a bar and an empty state cannot disagree.
+ *
+ * **The copy split is the whole point.** `offline` is the user's network and `unreachable` is
+ * ours — telling someone to check their wifi when our server is down wastes their time and blames
+ * them for it.
+ */
+export function reachCopy(reach: Reach): { title: string; body: string } | null {
+  switch (reach) {
+    case 'offline':
+      return {
+        title: "You're offline",
+        body: 'Everything here was true when it loaded. New runs and changes need a network.',
+      };
+    case 'unreachable':
+      return {
+        title: 'CompPack is unreachable',
+        body: 'The network is fine — this one is on us. Nothing you did caused it, and nothing is lost.',
+      };
+    default:
+      return null;
+  }
+}
+
+/**
+ * A thin line under a header. **Deliberately not a blocking overlay** — cached rows are still
+ * true and still worth reading, and covering them would take away the one thing that still works.
+ */
+export function ReachBar({
+  reach: given, onRetry, style,
+}: { reach?: Reach; onRetry?: () => void; style?: StyleProp<ViewStyle> }) {
+  /* Takes the state as a prop when the caller already has it, and falls back to the provider.
+     Both exist because a screen holding a query result should not have to mount a provider to
+     show the bar it already has the answer for. */
+  const fromContext = useReach();
+  const reach = given ?? fromContext;
+  const { colors } = useDs();
+  const copy = reachCopy(reach);
+  if (!copy) return null;
+
+  return (
+    <Box row align="center" gap="s2" mx="s5" mb="s3" py="s2" px="s3" radius="row" bg="surface1" lift={1} style={style}>
+      <Icon name="alert" size={15} color={colors.textTertiary} />
+      <Box flex={1}>
+        <Text variant="caption" numberOfLines={1}>{copy.title}</Text>
+      </Box>
+      {onRetry ? (
+        <Text variant="caption" color="accentInk" role="link" onPress={onRetry}>Retry</Text>
+      ) : null}
+    </Box>
+  );
+}
+
+/** The screen that has nothing cached to fall back on. One vocabulary with the bar, from `reachCopy`. */
+export function ReachEmptyState({
+  reach: given, onRetry,
+}: { reach?: Reach; onRetry?: () => void }) {
+  const fromContext = useReach();
+  const copy = reachCopy(given ?? fromContext);
+  if (!copy) return null;
+  return (
+    <Box flex={1} align="center" justify="center" px="s8" gap="s4">
+      <Text variant="heading" align="center">{copy.title}</Text>
+      <Text variant="caption" color="textSecondary" align="center">{copy.body}</Text>
+      {onRetry ? (
+        <Text variant="caption" color="accentInk" role="link" onPress={onRetry}>Try again</Text>
+      ) : null}
+    </Box>
+  );
+}

package/src/ds/SubScreenHeader.tsx

@@ -0,0 +1,121 @@
+import type { ReactNode } from 'react';
+import { Box, Icon, Pressable, Text } from '../core';
+import { isAndroid, useDs } from '../tokens';
+
+export type SubScreenHeaderProps = {
+  title: string;
+  /**
+   * The line under the title. A node rather than a string so a count can sit in mono inside the
+   * sentence (`10 available · 1 connected`) — it is rendered inside one `screenSubtitle` Text, so pass
+   * strings and nested `Text`, not views.
+   */
+  subtitle?: ReactNode;
+  /** Absent means nothing to go back to, and no back control is drawn. */
+  onBack?: () => void;
+  /** The accessible name of the back control, and the visible label on iOS. */
+  backLabel?: string;
+  /**
+   * A screen's own hue (14 Sep 2026, app 1's vibrant Settings and Profile) — the same treatment as `AppHeader`'s: a short
+   * glowing bar under the title and the subtitle in that ink at 600. Omitted, the header is exactly what it was.
+   */
+  accent?: string;
+};
+
+export type BackButtonProps = {
+  onPress: () => void;
+  /** The accessible name, and the visible label on iOS. */
+  label?: string;
+};
+
+/**
+ * **The one back control** (13 Sep 2026). Every pushed screen in app 1 draws this, whether through
+ * `SubScreenHeader`, `AppHeader`, or on its own above a custom head — so a back button looks and sits the
+ * same on every page. Before it there were eight: a typed `‹` in grey, chevrons at 15/16/20pt in two inks,
+ * the accent caret, and React Navigation's native header.
+ *
+ * - **iOS:** the accent caret and the label, 44pt tall, at the start of its row.
+ * - **Android:** the M3 40dp round `←`, no label (the accessible name still carries it).
+ *
+ * The caller owns horizontal position through its gutter; this adds no margin of its own.
+ */
+export function BackButton({ onPress, label = 'Back' }: BackButtonProps) {
+  const { colors } = useDs();
+  if (isAndroid) {
+    /* Centred in the M3 app bar's 56dp row even when drawn on its own, so a screen without SubScreenHeader
+       puts the arrow at the same height as one with it. */
+    return (
+      <Box height={56} justify="center">
+        <Pressable onPress={onPress} hit={40} radius="pill" aria-label={label}>
+          <Icon name="back" size={22} color={colors.textPrimary} />
+        </Pressable>
+      </Box>
+    );
+  }
+  return (
+    <Pressable
+      onPress={onPress}
+      row
+      align="center"
+      justify="flex-start"
+      gap="s1"
+      minHeight={44}
+      alignSelf="flex-start"
+      aria-label={label}>
+      <Icon name="caretLeft" size={16} color={colors.accentInk} />
+      <Text color="accentInk" variant="label" style={{ fontWeight: '400' }}>{label}</Text>
+    </Pressable>
+  );
+}
+
+/**
+ * **A pushed screen's header, in each platform's own shape** (Settings handoff, SET-15, 13 Sep 2026).
+ *
+ * - **iOS:** `‹ Back` on its own row, then the 32px large title, then the subtitle.
+ * - **Android:** the M3 top app bar — a 56dp row with a 40dp round `←` and an 18/600 title — then the
+ *   subtitle 2dp beneath. Every Android frame in the handoff draws this, root included.
+ *
+ * **Not a change to `AppHeader`.** That header serves every screen in two apps, and swapping its
+ * Android shape would restyle screens no handoff has redrawn. A screen opts in by using this.
+ */
+export function SubScreenHeader({ title, subtitle, onBack, backLabel = 'Back', accent }: SubScreenHeaderProps) {
+
+  const sub =
+    subtitle === undefined || subtitle === null || subtitle === '' ? null : (
+      <Text
+        variant="screenSubtitle"
+        color="textSecondary"
+        style={[{ marginTop: isAndroid ? 2 : 4 }, accent ? { color: accent, fontWeight: '600' } : null]}>
+        {subtitle}
+      </Text>
+    );
+
+  const bar = accent ? (
+    <Box style={{ width: 28, height: 4, borderRadius: 2, marginTop: 6, backgroundColor: accent, boxShadow: `0 0 8px ${accent}` }} />
+  ) : null;
+
+  if (isAndroid) {
+    return (
+      <Box>
+        <Box row align="center" height={56} style={{ gap: 14 }}>
+          {onBack ? <BackButton onPress={onBack} label={backLabel} /> : null}
+          <Text variant="appBarTitle" role="heading" numberOfLines={1} style={{ flexShrink: 1 }}>
+            {title}
+          </Text>
+        </Box>
+        {bar}
+        {sub}
+      </Box>
+    );
+  }
+
+  return (
+    <Box gap="s2">
+      {onBack ? <BackButton onPress={onBack} label={backLabel} /> : null}
+      <Box>
+        <Text variant="screenTitle" role="heading">{title}</Text>
+        {bar}
+        {sub}
+      </Box>
+    </Box>
+  );
+}