@appinternalleads/ui 0.2.0

package/src/widgets/16-19-Numbers2.tsx

@@ -0,0 +1,216 @@
+import { useState } from 'react';
+import { Arc, Box, Pressable, Text } from '../core';
+import { useDs } from '../tokens';
+import { StepButton, SubmitRow } from './parts';
+import { widgetRadius } from './tokens';
+import type { Driven } from './driven';
+import { WidgetCard } from './WidgetCard';
+
+export type Slice = { key: string; label: string; pct: number };
+
+/** Verbatim from §3, and they sum to 100 — which is the only condition under which 16 is legal. */
+export const BUDGET_SLICES: Slice[] = [
+  { key: 'sourcing', label: 'Sourcing tools', pct: 42 },
+  { key: 'boards', label: 'Job board spend', pct: 27 },
+  { key: 'referrals', label: 'Referral bonuses', pct: 19 },
+  { key: 'agency', label: 'Agency retainer', pct: 12 },
+];
+
+/**
+ * **16 · Pie Chart Picker** — `SHARE` → the picked slice's key.
+ *
+ * **Only legal when the options really are parts of one whole.** Shares that do not sum to 100
+ * belong in a different widget — a donut asserts a partition, and drawing one over numbers that
+ * are not a partition is a lie the geometry tells before any label can correct it.
+ *
+ * The legend is a row list rather than decoration: it carries the values, and it is the
+ * keyboard path.
+ */
+export function PieChartPickerWidget({
+  slices = BUDGET_SLICES, value = 'sourcing', onChange, prompt, onMenu,
+  pill: pillLabel, title: cardTitle, label, hint,
+}: Driven & {
+  slices?: Slice[]; value?: string; onChange?: (k: string) => void
+}) {
+  const { colors } = useDs();
+  const [k, setK] = useState(value);
+  const picked = slices.find(s => s.key === k);
+  const size = 148;
+
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'SHARE'}
+      title={cardTitle ?? 'Pie Chart Picker'}
+      prompt={prompt ?? 'Split the search budget however you think best.'}
+      onMenu={onMenu}
+      testID="widget-16">
+      <Box style={{ gap: 13 }}>
+        <Box align="center">
+          <Box width={size} height={size}>
+            <Arc
+              size={size}
+              thickness={34}
+              segments={slices.map(s => ({
+                sweep: s.pct * 3.6,
+                color: s.key === k ? colors.accentFill : colors.accentTint,
+              }))}
+              testID="w16-donut"
+            />
+            {/* The hub is the card's own surface punched through the ring. */}
+            <Box
+              align="center"
+              justify="center"
+              radius="pill"
+              style={{
+                position: 'absolute', top: 34, left: 34, right: 34, bottom: 34,
+                backgroundColor: colors.surface1, gap: 3,
+              }}>
+              <Text
+                numeric
+                style={{ fontSize: 21, lineHeight: 21, fontWeight: '600', color: colors.accentInk }}>
+                {picked ? `${picked.pct}%` : '—'}
+              </Text>
+              <Text
+                uppercase
+                color="textSecondary"
+                style={{ fontSize: 9, lineHeight: 9, fontWeight: '600', letterSpacing: 9 * 0.09 }}>
+                {label ?? 'Of budget'}
+              </Text>
+            </Box>
+          </Box>
+        </Box>
+
+        <Box>
+          {slices.map((s, i) => {
+            const on = s.key === k;
+            return (
+              <Pressable
+                key={s.key}
+                onPress={() => { setK(s.key); onChange?.(s.key); }}
+                row
+                align="center"
+                aria-label={`${s.label} ${s.pct}%`}
+                minHeight={46}
+                style={{
+                  paddingVertical: 9, paddingHorizontal: 2, gap: 10,
+                  borderTopWidth: i === 0 ? 0 : 1, borderTopColor: colors.hairline,
+                }}>
+                <Box
+                  width={12}
+                  height={12}
+                  style={{
+                    borderRadius: widgetRadius.legendSwatch,
+                    backgroundColor: on ? colors.accentFill : colors.accentTint,
+                  }}
+                />
+                <Box flex={1}>
+                  <Text style={{ fontSize: 13.5, lineHeight: 13.5 * 1.35, fontWeight: on ? '600' : '400' }}>
+                    {s.label}
+                  </Text>
+                </Box>
+                <Text
+                  mono
+                  numeric
+                  style={{
+                    fontSize: 13, lineHeight: 13, fontWeight: '600',
+                    color: on ? colors.accentInk : colors.textSecondary,
+                  }}>
+                  {`${s.pct}%`}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </Box>
+      </Box>
+    </WidgetCard>
+  );
+}
+
+export type LoopRow = { key: string; label: string; note: string; value: number };
+
+/** Verbatim from §3. Exec conversations default to 0 — a real default, not a placeholder. */
+export const LOOP_ROWS: LoopRow[] = [
+  { key: 'screening', label: 'Screening calls', note: '30 minutes, recruiter-led', value: 2 },
+  { key: 'panel', label: 'Panel rounds', note: '60 minutes, two interviewers', value: 1 },
+  { key: 'exec', label: 'Exec conversations', note: 'Only for final candidates', value: 0 },
+];
+
+/**
+ * **19 · Counter Group** — `NUMBERS` → `Record<string, number>`, several numbers under one submit.
+ *
+ * At zero the counter states the consequence — *"No rounds — candidates go straight to offer"* —
+ * because `0 rounds per candidate` is a number the reader still has to interpret, and the
+ * interpretation is the part that matters.
+ */
+export function CounterGroupWidget({
+  rows = LOOP_ROWS, onSubmit, prompt, onMenu, min = 0, max = 6,
+  submitLabel, counterText, counterEmpty,
+  pill: pillLabel, title: cardTitle, label, hint,
+}: Driven & {
+  rows?: LoopRow[]; onSubmit?: (v: Record<string, number>) => void;
+  min?: number; max?: number;
+  submitLabel?: string;
+  /** `{total}` interpolates; `empty` states the consequence rather than showing a zero. */
+  counterText?: string;
+  counterEmpty?: string;
+}) {
+  const { colors } = useDs();
+  const [v, setV] = useState<Record<string, number>>(
+    () => Object.fromEntries(rows.map(r => [r.key, r.value])),
+  );
+  const step = (key: string, by: number) =>
+    setV(prev => ({ ...prev, [key]: Math.min(max, Math.max(min, (prev[key] ?? 0) + by)) }));
+  const total = Object.values(v).reduce((a, b) => a + b, 0);
+
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'NUMBERS'}
+      title={cardTitle ?? 'Counter Group'}
+      prompt={prompt ?? 'Plan the interview loop for the ones I keep.'}
+      onMenu={onMenu}
+      rows
+      testID="widget-19">
+      <Box>
+        {rows.map((r, i) => {
+          const n = v[r.key] ?? 0;
+          return (
+            <Box
+              key={r.key}
+              row
+              align="center"
+              style={{
+                minHeight: 60, paddingVertical: 10, paddingHorizontal: 2, gap: 11,
+                borderTopWidth: i === 0 ? 0 : 1, borderTopColor: colors.hairline,
+              }}>
+              <Box flex={1} style={{ gap: 4 }}>
+                <Text style={{ fontSize: 13.5, lineHeight: 13.5 * 1.25, fontWeight: '600' }}>
+                  {r.label}
+                </Text>
+                <Text color="textSecondary" style={{ fontSize: 11.5, lineHeight: 11.5 * 1.3 }}>
+                  {r.note}
+                </Text>
+              </Box>
+              <StepButton glyph="−" label={`Fewer ${r.label}`} atLimit={n <= min} onPress={() => step(r.key, -1)} />
+              <Box width={30} align="center">
+                <Text numeric style={{ fontSize: 17, lineHeight: 17, fontWeight: '600' }}>{n}</Text>
+              </Box>
+              <StepButton glyph="+" label={`More ${r.label}`} atLimit={n >= max} onPress={() => step(r.key, 1)} />
+            </Box>
+          );
+        })}
+      </Box>
+      <Box style={{ paddingTop: 13 }}>
+        <SubmitRow
+          label={submitLabel ?? 'Set loop'}
+          empty={total === 0}
+          counter={
+            total === 0
+              ? counterEmpty ?? 'No rounds — candidates go straight to offer'
+              : (counterText ?? '{total} rounds per candidate').replace('{total}', String(total))
+          }
+          onPress={() => onSubmit?.(v)}
+        />
+      </Box>
+    </WidgetCard>
+  );
+}

package/src/widgets/17-CardPicker.tsx

@@ -0,0 +1,242 @@
+import { useState } from 'react';
+import { Box, Icon, Pressable, Text } from '../core';
+import { useDs } from '../tokens';
+import { widget, widgetRadius } from './tokens';
+import { useSurface } from './useSurface';
+import type { Driven } from './driven';
+import { WidgetCard } from './WidgetCard';
+
+/**
+ * **17 · Card Picker** — `SHORTLIST`, returns `string[]`.
+ *
+ * The richest choice widget, and the one that stresses the contract hardest: options carry the
+ * run's **score and reason**, not just a name.
+ *
+ * > **Score and reason travel to every option shape.** A card face showing only a name has
+ * > hidden the run's work.
+ *
+ * **The rank disc shows the run's ordering; the selection is the user's.** Those are two
+ * different claims and the widget must not blur them — the disc never moves when the user picks,
+ * and picking out of order is not an error.
+ */
+export type CardOption = {
+  /** The run's ordering, 1-based. Never renumbered by selection. */
+  rank: number;
+  name: string;
+  score: number;
+  reason: string;
+  /**
+   * **Identity, when the name is not it.** Two people share a name more often than anywhere else
+   * in a product, and a shortlist is exactly where that happens — so an answer keyed on the
+   * displayed name is one collision away from keeping the wrong candidate. Defaults to `name`,
+   * which is what every fixture relies on.
+   */
+  value?: string;
+};
+
+const idOf = (o: CardOption) => o.value ?? o.name;
+
+export const CARD_PICKER_FIXTURES: CardOption[] = [
+  { rank: 1, name: 'Maya Idris', score: 94, reason: 'Shipped two fintech onboarding flows; writes her own copy.' },
+  { rank: 2, name: 'Tobias Rehn', score: 88, reason: 'Strong systems work, no fintech, fastest available start.' },
+  { rank: 3, name: 'Priya Raman', score: 86, reason: 'Deep research practice; portfolio is three years old.' },
+  { rank: 4, name: 'Owen Blake', score: 79, reason: 'Adjacent industry, agency background, contract only.' },
+];
+
+export function CardPickerWidget({
+  options = CARD_PICKER_FIXTURES,
+  value = ['Maya Idris'],
+  onChange,
+  onSubmit,
+  prompt,
+  onMenu,
+  submitLabel,
+  emptyLabel,
+  counterText,
+  pill: pillLabel, title: cardTitle, label, hint,
+}: Driven & {
+  options?: CardOption[];
+  value?: string[];
+  onChange?: (next: string[]) => void;
+  onSubmit?: (kept: string[]) => void;
+  /** `{n}` interpolates the count kept; `empty` states the consequence at zero. */
+  submitLabel?: string;
+  emptyLabel?: string;
+  counterText?: string;
+}) {
+  const [kept, setKept] = useState<string[]>(value);
+  const toggle = (name: string) => {
+    const next = kept.includes(name) ? kept.filter(n => n !== name) : [...kept, name];
+    setKept(next);
+    onChange?.(next);
+  };
+
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'SHORTLIST'}
+      title={cardTitle ?? 'Card Picker'}
+      prompt={prompt ?? 'Which of these four should go through to interview?'}
+      onMenu={onMenu}
+      testID="widget-17">
+      <Body
+        options={options}
+        kept={kept}
+        toggle={toggle}
+        onSubmit={() => onSubmit?.(kept)}
+        submitLabel={submitLabel}
+        emptyLabel={emptyLabel}
+        counterText={counterText}
+      />
+    </WidgetCard>
+  );
+}
+
+function Body({
+  options, kept, toggle, onSubmit, submitLabel, emptyLabel, counterText,
+}: {
+  options: CardOption[]; kept: string[]; toggle: (n: string) => void; onSubmit: () => void;
+  submitLabel?: string; emptyLabel?: string; counterText?: string;
+}) {
+  const surface = useSurface();
+  const n = kept.length;
+  return (
+    <Box style={{ gap: 10 }}>
+      {options.map(o => (
+        <OptionCard
+          key={idOf(o)}
+          option={o}
+          on={kept.includes(idOf(o))}
+          onPress={() => toggle(idOf(o))}
+        />
+      ))}
+
+      {/* The counter line always reconciles with what is visible (§1). */}
+      <Text
+        color="textSecondary"
+        align="center"
+        style={{ fontSize: widget.copy.counter.size[surface], lineHeight: widget.copy.counter.size[surface] }}>
+        {(counterText ?? `{n} of ${options.length} kept · score and reason on every card`)
+          .replace('{n}', String(n))}
+      </Text>
+
+      <SubmitRow n={n} onPress={onSubmit} label={submitLabel} empty={emptyLabel} />
+    </Box>
+  );
+}
+
+function OptionCard({
+  option, on, onPress,
+}: { option: CardOption; on: boolean; onPress: () => void }) {
+  const { colors } = useDs();
+  const surface = useSurface();
+  return (
+    <Pressable
+      onPress={onPress}
+      row
+      align="flex-start"
+      justify="flex-start"
+      aria-label={option.name}
+      style={{
+        gap: 11,
+        padding: surface === 'web' ? 15 : 13,
+        borderRadius: widgetRadius.inset,
+        borderWidth: 2,
+        borderColor: on ? colors.accentFill : colors.hairline,
+        backgroundColor: on ? colors.accentTint : colors.surface1,
+      }}>
+      {/* The run's ordering. It does not move when the user selects. */}
+      <Box
+        width={surface === 'web' ? 30 : 28}
+        height={surface === 'web' ? 30 : 28}
+        radius="pill"
+        align="center"
+        justify="center"
+        bg="accentFill">
+        <Text style={{ color: colors.accentOnFill, fontSize: 13, lineHeight: 13, fontWeight: '600' }}>
+          {option.rank}
+        </Text>
+      </Box>
+
+      <Box flex={1} style={{ gap: 4, minWidth: 0 }}>
+        <Box row align="center" justify="space-between" gap="s2">
+          <Text
+            numberOfLines={1}
+            style={{
+              fontSize: widget.copy.option.size[surface],
+              lineHeight: widget.copy.option.size[surface] * 1.2,
+              fontWeight: '600',
+            }}>
+            {option.name}
+          </Text>
+          <Text mono color="accentInk" numeric style={{ fontSize: 14, lineHeight: 14, fontWeight: '600' }}>
+            {option.score}
+          </Text>
+        </Box>
+        <Text
+          color="textSecondary"
+          style={{
+            fontSize: surface === 'web' ? 13 : 12.5,
+            lineHeight: (surface === 'web' ? 13 : 12.5) * 1.45,
+          }}>
+          {option.reason}
+        </Text>
+      </Box>
+
+      {/* 21px square at radius 6 — one of the handoff's two deliberate literal radii. */}
+      <Box
+        width={21}
+        height={21}
+        align="center"
+        justify="center"
+        alignSelf="center"
+        style={{
+          borderRadius: widgetRadius.checkbox,
+          borderWidth: 2,
+          borderColor: on ? colors.accentFill : colors.hairline,
+          backgroundColor: on ? colors.accentFill : colors.surface1,
+        }}>
+        {on ? <Icon name="tick" size={13} color={colors.accentOnFill} /> : null}
+      </Box>
+    </Pressable>
+  );
+}
+
+/**
+ * **At zero the label states the consequence** — `Keep nobody`, never a greyed `Continue`
+ * (universal rule 13). A disabled verb tells the user nothing about what happens if they press it.
+ */
+function SubmitRow({
+  n, onPress, label, empty: emptyLabel,
+}: { n: number; onPress: () => void; label?: string; empty?: string }) {
+  const { colors } = useDs();
+  const surface = useSurface();
+  const empty = n === 0;
+  /* At zero the label states the consequence and the button stays live — a greyed verb tells the
+     user nothing about what pressing it would do. */
+  const text = empty
+    ? emptyLabel ?? 'Keep nobody'
+    : (label ?? 'Interview {n}').replace('{n}', String(n));
+  return (
+    <Pressable
+      onPress={onPress}
+      radius="pill"
+      aria-label={text}
+      style={{
+        minHeight: widget.submit.height[surface],
+        alignSelf: surface === 'web' ? 'flex-end' : 'stretch',
+        paddingHorizontal: widget.submit.padX,
+        backgroundColor: empty ? colors.surfaceSunken : colors.accentFill,
+        boxShadow: empty ? undefined : `0 6px 18px -10px ${colors.accentFill}`,
+      }}>
+      <Text
+        style={{
+          color: empty ? colors.textSecondary : colors.accentOnFill,
+          fontSize: surface === 'web' ? 15 : 14.5,
+          lineHeight: surface === 'web' ? 15 : 14.5,
+          fontWeight: '600',
+        }}>
+        {text}
+      </Text>
+    </Pressable>
+  );
+}

package/src/widgets/20-21-Composite.tsx

@@ -0,0 +1,222 @@
+import { useState } from 'react';
+import { Box, Pressable, Text } from '../core';
+import { useDs } from '../tokens';
+import { Chip, StepButton } from './parts';
+import { widget, widgetRadius } from './tokens';
+import { useSurface } from './useSurface';
+import type { Driven } from './driven';
+import { WidgetCard } from './WidgetCard';
+import { WidgetInput } from './WidgetInput';
+
+export type Step = { title: string; body: string; meta: string };
+
+/** Verbatim from §3. The bodies are the script, not a summary of one. */
+export const SCREENING_STEPS: Step[] = [
+  {
+    title: 'Confirm the basics',
+    body: 'Right role, right level, notice period, and whether they are actively looking.',
+    meta: 'Two minutes',
+  },
+  {
+    title: 'Walk one shipped project',
+    body: 'Ask them to pick something they owned end to end, then follow the decisions rather than the outcome.',
+    meta: 'Ten minutes',
+  },
+  {
+    title: 'Probe the gap',
+    body: 'Whatever the CV leaves unexplained — a short stay, a jump in level — ask about it plainly here.',
+    meta: 'Five minutes',
+  },
+  {
+    title: 'Money and timing',
+    body: 'State the band in the stance you picked. Get their number before the call ends.',
+    meta: 'Three minutes',
+  },
+  {
+    title: 'Their questions',
+    body: 'Leave real room. What they ask tells you what they care about.',
+    meta: 'Five minutes',
+  },
+];
+
+/**
+ * **20 · Step Executor** — `SEQUENCE` → progress through a guided sequence.
+ *
+ * The step card takes level 2 while sitting inside a level-1 card: it is the one thing in the
+ * family that floats above its own container, and it does so because the sequence position is
+ * the whole widget.
+ *
+ * **The arrows clamp; they never wrap.** Arriving back at step 1 from step 5 would read as
+ * progress rather than as a loop, and at the ends the arrow dims and stays put.
+ */
+export function StepExecutorWidget({
+  steps = SCREENING_STEPS, index = 1, onChange, prompt, onMenu,
+  pill: pillLabel, title: cardTitle, label, hint,
+}: Driven & {
+  steps?: Step[]; index?: number; onChange?: (i: number) => void
+}) {
+  const { colors } = useDs();
+  const [i, setI] = useState(index);
+  const go = (n: number) => {
+    const c = Math.min(steps.length - 1, Math.max(0, n));
+    setI(c); onChange?.(c);
+  };
+  const step = steps[i];
+
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'SEQUENCE'}
+      title={cardTitle ?? 'Step Executor'}
+      prompt={prompt ?? 'Walk me through the screening call, one step at a time.'}
+      onMenu={onMenu}
+      testID="widget-20">
+      <Box align="center" style={{ gap: 13 }}>
+        <Box row align="center" style={{ gap: 11, width: '100%' }}>
+          <StepButton
+            glyph="‹"
+            label="Previous step"
+            tone="outline"
+            atLimit={i === 0}
+            onPress={() => go(i - 1)}
+          />
+          <Box
+            flex={1}
+            lift={2}
+            bg="surface1"
+            style={{ padding: 15, borderRadius: widgetRadius.inset, gap: 7 }}>
+            <Text style={{ fontSize: 15, lineHeight: 15 * 1.25, fontWeight: '600' }}>
+              {`${i + 1}. ${step?.title}`}
+            </Text>
+            <Text color="textSecondary" style={{ fontSize: 13, lineHeight: 13 * 1.5 }}>
+              {step?.body}
+            </Text>
+            <Text color="textSecondary" style={{ fontSize: 12, lineHeight: 12 }}>
+              {step?.meta}
+            </Text>
+          </Box>
+          <StepButton
+            glyph="›"
+            label="Next step"
+            tone="outline"
+            atLimit={i === steps.length - 1}
+            onPress={() => go(i + 1)}
+          />
+        </Box>
+
+        <Box row align="center" style={{ gap: 5 }}>
+          {steps.map((_, n) => (
+            <Box
+              key={n}
+              width={6}
+              height={6}
+              radius="pill"
+              style={{ backgroundColor: n === i ? colors.accentFill : colors.accentTint }}
+            />
+          ))}
+        </Box>
+        <Text mono color="textSecondary" style={{ fontSize: 12.5, lineHeight: 12.5 }}>
+          {`${i + 1} / ${steps.length}`}
+        </Text>
+      </Box>
+    </WidgetCard>
+  );
+}
+
+export const SENIORITIES = ['Junior', 'Mid', 'Senior', 'Staff'];
+
+/**
+ * **21 · Aggregated Input Card** — `COMPOSITE` → an `object`, in one turn.
+ *
+ * For when asking three questions in sequence would be worse than asking them together. The
+ * three groups are separated by hairlines rather than headings, because a heading per field
+ * would make three questions look like three asks again.
+ *
+ * **The submit label is composed from the state** — `Source 12 senior candidates` — so the
+ * button reads back the answer before it is sent. And **every default is a working default**:
+ * submitting this card untouched is a valid answer, not an empty one.
+ */
+export function AggregatedInputWidget({
+  title: title0 = '', seniority: seniority0 = 'Senior', count: count0 = 12,
+  onSubmit, prompt, onMenu,
+  pill: pillLabel, title: cardTitle, label, hint,
+}: Driven & {
+  title?: string; seniority?: string; count?: number;
+  onSubmit?: (v: { title: string; seniority: string; count: number }) => void
+}) {
+  const { colors } = useDs();
+  const surface = useSurface();
+  const [title, setTitle] = useState(title0);
+  const [seniority, setSeniority] = useState(seniority0);
+  const [count, setCount] = useState(count0);
+  const divider = { height: 1, backgroundColor: colors.hairline };
+
+  return (
+    <WidgetCard
+      pill={pillLabel ?? 'COMPOSITE'}
+      title={cardTitle ?? 'Aggregated Input Card'}
+      prompt={prompt ?? 'Start a new search, you know the drill.'}
+      onMenu={onMenu}
+      testID="widget-21">
+      <Box style={{ gap: 13 }}>
+        <Box style={{ gap: 9 }}>
+          <Text style={{ fontSize: 12.5, lineHeight: 12.5, fontWeight: '600' }}>Role title</Text>
+          <WidgetInput
+            value={title}
+            onChangeText={setTitle}
+            placeholder="Senior product designer"
+            ariaLabel="Role title"
+            testID="w21-title"
+          />
+        </Box>
+
+        <Box style={divider} />
+
+        <Box style={{ gap: 9 }}>
+          <Text style={{ fontSize: 12.5, lineHeight: 12.5, fontWeight: '600' }}>Seniority</Text>
+          <Box row wrap style={{ gap: 6 }}>
+            {SENIORITIES.map(s => (
+              <Chip key={s} label={s} on={s === seniority} onPress={() => setSeniority(s)} />
+            ))}
+          </Box>
+        </Box>
+
+        <Box style={divider} />
+
+        <Box row align="center" style={{ gap: 11 }}>
+          <Box flex={1}>
+            <Text style={{ fontSize: 12.5, lineHeight: 12.5 * 1.3, fontWeight: '600' }}>
+              How many to source
+            </Text>
+          </Box>
+          <StepButton
+            glyph="−"
+            label="Fewer candidates"
+            atLimit={count <= 1}
+            onPress={() => setCount(c => Math.max(1, c - 1))}
+          />
+          <Box width={30} align="center">
+            <Text numeric style={{ fontSize: 17, lineHeight: 17, fontWeight: '600' }}>{count}</Text>
+          </Box>
+          <StepButton
+            glyph="+"
+            label="More candidates"
+            atLimit={count >= 50}
+            onPress={() => setCount(c => Math.min(50, c + 1))}
+          />
+        </Box>
+
+        <Pressable
+          onPress={() => onSubmit?.({ title, seniority, count })}
+          radius="pill"
+          minHeight={widget.submit.height[surface]}
+          aria-label={`Source ${count} ${seniority.toLowerCase()} candidates`}
+          style={{ alignSelf: 'stretch', backgroundColor: colors.accentFill }}>
+          <Text
+            style={{ fontSize: 14.5, lineHeight: 14.5, fontWeight: '600', color: colors.accentOnFill }}>
+            {`Source ${count} ${seniority.toLowerCase()} candidates`}
+          </Text>
+        </Pressable>
+      </Box>
+    </WidgetCard>
+  );
+}