Every primitive and pattern, grouped by category and rendered live from the manifest.
buttonThe action primitive. Renders <button> or <a> (when href is set).
| prop | type | default |
|---|---|---|
| variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" |
| size | "default" | "sm" | "lg" | "icon" | "default" |
| href | string | — |
| disabled | boolean | — |
a11y: Native <button>/<a> semantics; disabled sets aria-disabled and removes href.
cardRounded, bordered surface. Wrap content that should read as one raised block.
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Plain <div>. No implicit semantics.
badgeSmall tone-tinted label for status and counts.
| prop | type | default |
|---|---|---|
| tone | "neutral" | "success" | "warning" | "destructive" | "primary" | "neutral" |
a11y: Inline <span>. Decorative; put meaning in the text.
inputSingle-line text field. Bindable value. Mobile font-size = --text-size-input (17px) to prevent iOS zoom; text-sm at md.
| prop | type | default |
|---|---|---|
| value | string | — |
| class | string | — |
a11y: Native <input>. Pair with <Label>. 17px mobile size prevents iOS zoom-on-focus.
visual QA: compare against rb-extract/inputs-nav/inputs/ui-input.svelte
progressDeterminate progress bar (0–100).
| prop | type | default |
|---|---|---|
| value | number | 0 |
| max | number | 100 |
a11y: role=progressbar with aria-valuemin/max/now.
dialogModal dialog (bits-ui). Namespaced parts.
parts: Root, Trigger, Content, Header, Footer, Title, Description, Close, Overlay
a11y: Focus trap, aria-modal, ESC-to-close from bits-ui.
alert-dialogConfirm/destructive dialog with explicit action + cancel.
parts: Root, Trigger, Content, Header, Footer, Title, Description, Action, Cancel, Overlay
a11y: role=alertdialog; focus lands on cancel by default.
dropdown-menuContextual action menu with items, groups, checkboxes, radios, submenus.
parts: Root, Trigger, Content, Item, Group, Label, Separator, CheckboxItem, RadioGroup, RadioItem, Sub, SubTrigger, SubContent, Shortcut
a11y: Roving-tabindex menu semantics from bits-ui.
selectSingle-select listbox.
parts: Root, Trigger, Content, Item, Group, Label, Separator
a11y: Listbox semantics, type-ahead from bits-ui.
popoverFloating panel anchored to a trigger.
parts: Root, Trigger, Content
a11y: Dismissable layer with focus management from bits-ui.
tooltipHover/focus hint.
parts: Provider, Root, Trigger, Content
a11y: aria-describedby wiring from bits-ui; keep tooltip text short.
sheetEdge-anchored drawer (a Dialog variant).
parts: Root, Trigger, Content, Header, Footer, Title, Description, Close, Overlay
a11y: Same modal semantics as Dialog.
sidebarFull app sidebar scaffold (provider, menu, groups, rail, inset). Pair with useSidebar().
parts: Provider, Root, Header, Content, Footer, Group, Menu, MenuItem, MenuButton, Rail, Inset, Trigger
a11y: Landmark + collapsible state managed by useSidebar().
tabsTabbed sections.
Overview content.
Activity content.
parts: Root, List, Trigger, Content
a11y: role=tablist with arrow-key navigation from bits-ui.
tableSemantic table parts. Wrap in TableCard for the standard bordered shell.
| Candidate | Stars |
|---|---|
| octocat | 1.2k |
| defunkt | 890 |
parts: Root, Header, Body, Footer, Row, Head, Cell, Caption
a11y: Real <table> semantics.
breadcrumbHierarchical location trail.
parts: Root, List, Item, Link, Page, Separator, Ellipsis
a11y: nav[aria-label=breadcrumb]; current page marked aria-current.
avatarUser image with text fallback.
parts: Root, Image, Fallback
a11y: Provide alt on Image; Fallback shows while loading/on error.
separatorThin divider, horizontal or vertical.
| prop | type | default |
|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" |
a11y: role=separator.
labelForm control label.
| prop | type | default |
|---|---|---|
| for | string | — |
a11y: Associates via for/id.
skeletonPulsing placeholder for loading content.
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Decorative; hide from AT or pair with an aria-busy region.
checkboxBoolean checkbox (bits-ui).
| prop | type | default |
|---|---|---|
| checked | boolean | — |
a11y: role=checkbox with aria-checked from bits-ui.
switchOn/off toggle (bits-ui).
| prop | type | default |
|---|---|---|
| checked | boolean | — |
a11y: role=switch with aria-checked from bits-ui.
scroll-areaStyled custom scrollbar container.
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Keeps native keyboard scrolling.
commandComposable command menu (bits-ui Command): filterable list, groups, items, shortcuts, and a dialog wrapper for a ⌘K palette. Ported near-verbatim from recruiter-bot; restyled to tokens.
| prop | type | default |
|---|---|---|
| value | string | — |
| heading | string | — |
| onSelect | () => void | — |
a11y: bits-ui Command handles roving focus + aria-selected on items; Command.Dialog traps focus and provides sr-only title/description. Input is text-base below sm (no iOS zoom).
visual QA: compare against recruiter-bot src/lib/components/ui/command/* (bits-ui). Adaptations: import paths ($lib → relative), dropped command-link-item (unused), command-input is text-base sm:text-sm per §11.
segmented-controlPill row of mutually-exclusive options. Controlled: parent owns value.
| prop | type | default |
|---|---|---|
| options | { value: string; label: string }[] | — |
| value | string | — |
| onValueChange | (value: string) => void | — |
| size | "sm" | "md" | "md" |
| disabled | boolean | false |
a11y: role=group; each option is a button with aria-pressed.
composerDe-godded one-box input shell: pill row, textarea, submit affordance, busy state, understanding line. Filter/store logic stays app-side and feeds in via bind:value + slots.
| prop | type | default |
|---|---|---|
| placeholder | string | — |
| value | string | — |
| busy | boolean | false |
| onsubmit | (value: string) => void | — |
a11y: Textarea submits on Enter (Shift+Enter for newline); submit button has aria-label and disables while busy/empty.
visual QA: compare against rb-extract/feedback-chrome/agent-flows/AgentComposer.svelte
search-fieldThe product search composer. Two states: editing (live input + clear) and committed (display-only pill that reopens filters). v4: dropped the built-in "+ New Search" button; callers pass a trailing control via the `action` slot.
| prop | type | default |
|---|---|---|
| value | string | — |
| placeholder | string | — |
| state | "editing" | "committed" | "editing" |
| busy | boolean | false |
| onsubmit | function | — |
| onclear | function | — |
| onreopen | function | — |
a11y: role=search wrapper; focus-within ring on the field; clear button has aria-label; Escape clears; aria-busy while busy.
visual QA: compare against rb-extract/inputs-nav/inputs/DeveloperSearch.svelte
textareaMulti-line text field. field-sizing-content grows with content; min-h-16.
| prop | type | default |
|---|---|---|
| value | string | — |
| class | string | — |
a11y: Native <textarea>. Pair with <Label>.
visual QA: compare against rb-extract/inputs-nav/inputs/ui-textarea.svelte
autosize-textareaTextarea that grows with content via native field-sizing-content (no JS dependency). min-h-[60px], touch-friendly.
| prop | type | default |
|---|---|---|
| value | string | — |
| class | string | — |
a11y: Native <textarea>.
de-gods: svelte-autosize action → native field-sizing-content (spec's stated removal path)
visual QA: compare against rb-extract/inputs-nav/inputs/AutosizeTextarea.svelte
range-sliderDual-thumb numeric range on bits-ui Slider. Native keyboard stepping; token-styled track/thumbs; optional compact (12.4k) end labels.
| prop | type | default |
|---|---|---|
| value | [number, number] | — |
| min | number | 0 |
| max | number | 100 |
| step | number | 1 |
| format | "number" | "compact" | "number" |
| size | "sm" | "md" | "lg" | "md" |
| disabled | boolean | false |
| label | string | — |
| onValueChange | (value: [number, number]) => void | — |
a11y: bits-ui Slider gives arrow-key stepping and aria on each thumb; aria-label comes from `label`. Track/thumb use focus-visible ring-ring.
visual QA: compare against recruiter-bot ui/slider/slider.svelte (extended to dual-thumb + labels).
tag-comboboxMulti-select combobox: a bordered trigger holds removable FilterChips, the panel is Command with a text filter and checkbox-style checked items. Controlled.
| prop | type | default |
|---|---|---|
| items | { value: string; label: string }[] | — |
| selected | string[] | — |
| placeholder | string | "Select…" |
| tone | "neutral" | "accent" | "success" | "warning" | "destructive" | "info" | "neutral" |
| loading | boolean | false |
| disabled | boolean | false |
| onSelectedChange | (selected: string[]) => void | — |
a11y: Popover trigger is a real button (focus-visible ring, aria-busy while loading); command items are ≥44px tall below sm; chips remove inline with an aria-labelled button.
visual QA: compare against recruiter-bot SearchFiltersModal chip-commit pattern (composed from Popover + Command + FilterChip).
repo-suggestAsync-shaped repository suggest field. Never fetches — the parent feeds items/loading in response to the bound query. Keyboard-navigable listbox; rows render as RepoCard.
| prop | type | default |
|---|---|---|
| query | string | — |
| items | { owner: string; name: string; description?: string; language?: string; stars?: number }[] | — |
| loading | boolean | false |
| placeholder | string | "Search repositories" |
| onselect | (item) => void | — |
a11y: role=combobox + aria-expanded/controls on the input wrap; aria-activedescendant tracks the highlighted option; listbox/option roles; ArrowUp/Down + Enter + Escape. Loading renders 3 Skeleton rows (aria-busy via the wrapper).
visual QA: compare against recruiter-bot ProjectsList repo row (row baseline) + hand-rolled listbox.
form-fieldWraps one control with its label, hint, and error, wiring aria-describedby. The control spreads nothing; when it needs the described-by id it takes it from the children snippet param.
Shown to invited members.
Enter a valid email address.
| prop | type | default |
|---|---|---|
| label | string | — |
| hint | string | — |
| error | string | — |
| required | boolean | false |
| for | string | — |
a11y: Label linked via `for`; hint/error ids surfaced through aria-describedby (on the wrapper and offered to the child).
file-dropControlled file dropzone: the parent owns the staged `files` list. Drag-over lifts to the pulse ring + primary tint. The `coming-soon` state disables everything and captions 'File storage coming soon'.
File storage coming soon
| prop | type | default |
|---|---|---|
| accept | string | — |
| multiple | boolean | false |
| state | "ready" | "coming-soon" | "ready" |
| files | { name: string; size: number }[] | — |
| onadd | function | — |
| onremove | function | — |
a11y: Dropzone is a real button (keyboard-openable); remove buttons labeled per file with 44px hit areas below sm; disabled state is aria-disabled.
save-barSticky bottom action bar for unsaved edits (position the parent `relative`). Appears when dirty, saving, or there is a recent save to confirm. Dirty → Save + Discard; clean with savedAt → a quiet 'Saved 2m ago'. Fades in via animate-fade-in-scale; safe-area padded.
| prop | type | default |
|---|---|---|
| dirty | boolean | — |
| saving | boolean | false |
| savedAt | string | — |
| onsave | function | — |
| ondiscard | function | — |
a11y: role=status so the saved confirmation is announced; enter animation degrades under reduced motion via .animate-fade-in-scale.
intake-sectionOne numbered step of a long-form intake: a mono step-number eyebrow, a bold micro-label, a helper line, then its fields in a gap-4 stack.
| prop | type | default |
|---|---|---|
| number | string | — |
| label | string | — |
| helper | string | — |
a11y: Renders a <section>; the label is a bold text heading and the number reads as a plain eyebrow. Content order is number, label, helper, fields.
repeatable-list-fieldCollects a list of short strings. Type + Enter (or Add) appends a trimmed non-duplicate value; each value is a removable chip; Backspace in the empty input removes the last item.
| prop | type | default |
|---|---|---|
| label | string | — |
| items | string[] | — |
| placeholder | string | — |
| helper | string | — |
a11y: Input carries aria-label={label}; chips render in a role=list; each chip's remove button is labeled "Remove {item}". Enter adds, Backspace on empty removes last, all keyboard-reachable.
commitment-cardA single headline commitment: a large value, its unit, and a plain-language detail line, marked by a left accent bar.
Once the search launches, Agent Mode emails 50 matching developers every business day until the role is filled.
| prop | type | default |
|---|---|---|
| value | string | — |
| unit | string | — |
| detail | string | — |
a11y: Structural card; value and unit are text, detail is a paragraph. No interactive semantics.
launch-barCommit action bar for an irreversible submission: a one-line what-happens-next note, an optional ghost draft action, and the primary launch button (Spinner while busy). Editing surfaces use SaveBar; irreversible submissions use LaunchBar.
| prop | type | default |
|---|---|---|
| label | string | — |
| draftLabel | string | — |
| whatHappens | string | — |
| onlaunch | () => void | — |
| ondraft | () => void | — |
| busy | boolean | false |
a11y: Buttons are real <button>s; the primary button disables while busy and shows a Spinner. Pads env(safe-area-inset-bottom) per DESIGN.md §11 for bottom-anchored use.
hover-cardRich hover content (bits-ui LinkPreview). Tier 2 overlay: non-critical info shown on hover with standard 250/300ms intent delays.
Hover the mention → @facebook/react
parts: Root, Trigger, Content
a11y: bits-ui manages focus + hover intent. Info must also exist elsewhere (non-critical). Reduced-motion collapses delays to instant.
visual QA: compare against rb-extract/inputs-nav/hover-popovers/hover-card-content.svelte
hover-popupPerf-tier fixed-position hover popup for dense table rows. ONE component replacing recruiter-bot's 7 copy-pasted fixed/getBoundingClientRect blocks.
| prop | type | default |
|---|---|---|
| open | boolean | — |
| anchor | HTMLElement | DOMRect | null | — |
| placement | "top" | "bottom" | "right" | "top" |
| zIndex | number | 60 |
| id | string | — |
a11y: role=tooltip + id for aria-describedby wiring the source copy-pastes lacked. Use only inside table rows / high-frequency hover targets.
de-gods: 7 byte-identical copy-pastes → one component (the dedup IS the improvement)
visual QA: compare against rb-extract/inputs-nav/tables/DeveloperTableRow.svelte (5×) + SequenceTable.svelte (2×)
quota-barLabelled usage meter (used / limit) that warns near the cap and shows ∞ for unlimited.
| prop | type | default |
|---|---|---|
| label | string | — |
| used | number | — |
| limit | number | — |
a11y: Visual meter; expose the numeric label in text (it does).
page-headPage header: display-font title + optional description, actions slot on the right.
Everyone you've reached.
| prop | type | default |
|---|---|---|
| title | string | — |
| description | string | — |
| underline | boolean | false |
a11y: Renders the page <h1>. One per page.
stat-tileLabel + big tabular number in a bordered tile. Rows of 3–4 on overview pages.
| prop | type | default |
|---|---|---|
| label | string | — |
| value | string | — |
| tone | "neutral" | "accent" | "success" | "warning" | "destructive" | "neutral" |
a11y: Renders a <div>; label and value are text nodes read in order. No interactive semantics.
definition-listGrid wrapper for DefinitionRow pairs. One or two columns.
| prop | type | default |
|---|---|---|
| columns | 1 | 2 | 2 |
a11y: Renders a <dl>; fill it with DefinitionRow.
definition-rowOne term/value pair inside a DefinitionList. Value is the default slot.
| prop | type | default |
|---|---|---|
| term | string | — |
a11y: Renders <dt>/<dd>.
filter-chipRemovable filter token. Tone tints the chip.
| prop | type | default |
|---|---|---|
| label | string | — |
| tone | "neutral" | "accent" | "success" | "warning" | "destructive" | "info" | "neutral" |
| removable | boolean | false |
| onRemove | () => void | — |
a11y: Remove button has aria-label 'Remove {label}'.
signal-chipThe trust-taxonomy chip: color encodes claim provenance identically across app, agent output, PDF, and deck. Green = GitHub-inferred, gold = LinkedIn-confirmed, purple = Vamo-computed score, orange = observed streak/activity.
Color encodes provenance, identically everywhere: green is read from GitHub, gold is confirmed by LinkedIn, purple is computed by Vamo, orange is observed over time.
| prop | type | default |
|---|---|---|
| label | string | — |
| trust | "github" | "linkedin" | "score" | "streak" | "affinity" | "github" |
| title | string | — |
a11y: Plain text chip; provenance sentence via native title. Wrap in Tooltip for rich hover content.
visual QA: compare against rb AgentResultRow signal/LinkedIn chips (trust colors tokenized)
count-upAnimated number that eases from the previous value to the new one. Tabular-nums; reduced-motion jumps to the final value.
| prop | type | default |
|---|---|---|
| value | number | — |
| duration | "fast" | "normal" | "normal" |
| format | "plain" | "compact" | "percent" | "plain" |
a11y: Renders a <span>; the final value is the accessible text once settled.
percentile-tierStatic cohort-percentile badge. Maps a 0–100 percentile to a named tier (Top 1% … Below median) and a filled-block count, rendered as blocks, a provenance-shaped chip, or an ordinal line.
Also a DataGrid cell: type: 'percentile' renders this at sm from a
DataGridPercentileValue — live at scale on the Data page.
| prop | type | default |
|---|---|---|
| value | number | — |
| variant | "blocks" | "chip" | "ordinal" | "blocks" |
| size | "sm" | "md" | "md" |
| cohortLabel | string | — |
a11y: role=img with an aria-label reading the ordinal, tier, and optional cohort; all visual glyphs/text are aria-hidden. Static, no animation.
visual QA: compare against shares the ordinal() helper with PercentileBar (src/lib/ordinal.ts)
divided-barProportional single-row stacked bar. Segment widths sum to 100%; colors cycle the --viz-cat palette; optional right/below legend with values.
| prop | type | default |
|---|---|---|
| segments | { label: string; value: number }[] | — |
| legend | "right" | "below" | "none" | "below" |
| showValues | boolean | false |
a11y: The bar is aria-hidden; the legend (a real <ul>) carries the labels and values as text.
visual QA: compare against new (token viz palette).
sparklineTiny inline-SVG trend line. Stroke tone from the Tone union; draws itself in once (motion-token timing) and renders the final frame under reduced motion.
| prop | type | default |
|---|---|---|
| values | number[] | — |
| tone | "neutral" | "accent" | "success" | "warning" | "destructive" | "info" | "accent" |
| width | number | 120 |
| height | number | 32 |
| label | string | — |
a11y: aria-hidden by default; passing `label` promotes it to role=img with that label. Draw-in animation is disabled under prefers-reduced-motion.
visual QA: compare against new. Note: uses a component-scoped draw keyframe (no shared draw utility exists yet — §12 deviation, documented in-file).
percentile-barCohort-relative percentile with a correct ordinal label (96th, 93rd, 11th) and a marker triangle at the value.
| prop | type | default |
|---|---|---|
| value | number | — |
| label | string | — |
| cohortLabel | string | — |
a11y: Label and ordinal render as text above the track; the marker triangle is aria-hidden. Ordinal handles the 11–13 'th' exception.
visual QA: compare against new (trust taxonomy §9 percentile rendering).
scatter-plotInline-SVG scatter, up to 6 series encoded by both --viz-cat color and shape (circle/diamond/square/triangle). Optional quadrant persona labels; points fade in with a 15ms stagger.
| prop | type | default |
|---|---|---|
| points | { x: number; y: number; label?: string; series?: number }[] | — |
| xLabel | string | — |
| yLabel | string | — |
| xDomain | [number, number] | — |
| yDomain | [number, number] | — |
| quadrants | [string, string, string, string] | — |
| width | number | 480 |
| height | number | 320 |
a11y: role=img with an aria-label summarizing axes + point count. Series read without color via shape encoding. Point fade-in stagger is disabled under reduced motion. viewBox + w-full max-w so it never overflows the page body (§11).
visual QA: compare against new. Note: component-scoped opacity fade keyframe (SVG can't reuse .animate-fade-in-scale cleanly — documented in-file).
trend-sparkA sparkline paired with its signed delta. Line tone and arrow direction follow the sign of `delta` (green up / red down). Delta is an already-computed percentage.
| prop | type | default |
|---|---|---|
| values | number[] | — |
| delta | number | — |
| size | "sm" | "md" | "md" |
a11y: Sparkline carries an aria-label ('Trend +12.4%'); arrow icons aria-hidden.
signal-rollupOne developer's raw GitHub signals rolled up to the category tier: a badge row, an optional GemScore, and a PercentileBar per capability (velocity, craft, rigor). Detail mode expands each category to its underlying signals. Shows evidence, withholds weights.
Top 9% for code velocity within their cohort.
Top 16% for rigor within their cohort.
Top 17% for craft within their cohort.
Top 17% for timing within their cohort.
Top 28% for influence within their cohort.
Top 34% for hidden gems within their cohort.
| prop | type | default |
|---|---|---|
| dev | DevSignals | — |
| categories | SignalCategory[] | — |
| disclosure | "rollup" | "detail" | "rollup" |
| sort | "strength" | "canonical" | "strength" |
| sentences | boolean | true |
| gemScore | number | — |
a11y: Detail mode uses native <details>/<summary> disclosure (keyboard + SR). PercentileBar carries the ordinal as text; markers are aria-hidden.
visual QA: compare against new (trust taxonomy §9 rollup — the v1 category map lives in category-map.ts).
compare-columnsTwo or three developers side by side, category by category. Each category row pairs one PercentileBar per developer; the leader gets a viz-cat dot. Mandatory cohort caption whenever the developers sit in different cohorts, since cross-cohort percentiles are not directly comparable.
Percentiles are within each developer's own cohort.
| prop | type | default |
|---|---|---|
| devs | DevSignals[] | — |
| categories | SignalCategory[] | — |
| highlight | "leader" | "none" | "leader" |
| layout | "rows" | "columns" | "rows" |
a11y: Leader dot is aria-hidden; each bar is labeled by login/category text. Columns layout stacks to one column below sm (Grid).
visual QA: compare against new (comparison tier over PercentileBar; cohort caption is a §9 correctness rule, not a prop).
sequence-timelineThe lifecycle of an outreach sequence as connected nodes (initial → follow-up → breakup), each node showing its status, connectors labeled with the wait between touchpoints. Paused dashes the future connectors and marks them with a pause icon. sm collapses to dots-only for use inside a table row.
| prop | type | default |
|---|---|---|
| steps | SequenceStep[] | — |
| delays | { followUpDays: number; breakupDays: number } | — |
| followUpsEnabled | boolean | true |
| paused | boolean | false |
| orientation | "horizontal" | "vertical" | "horizontal" |
| size | "sm" | "md" | "md" |
a11y: role=list/listitem with an 'Outreach sequence' label; sm nodes carry a title. The scheduled-node ping honors motion-reduce.
visual QA: compare against rb SequenceSettingsTab lifecycle block (touchpoint timing + follow-up toggle).
draft-status-pillThe state of one outreach draft. Tone is fixed internally (not a prop) so the palette never drifts per caller. Sent is a quiet primary tint, not a solid green fill; bounced is the one loud destructive state; generating/sending carry a subtle shimmer dot.
| prop | type | default |
|---|---|---|
| status | "generating" | "draft" | "approved" | "sent" | "skipped" | "sending" | "already-contacted" | "bounced" | — |
| size | "sm" | "md" | "md" |
a11y: Text-labeled pill; the busy shimmer dot is decorative and stops under motion-reduce.
visual QA: compare against rb listMemberDraft.status enum (generating|draft|approved|sent|skipped|sending|already-contacted|bounced).
sequence-cardOverview card for one outreach sequence: name + lifecycle state (archived > paused > active), provider, member/sent/replied counts, a thin reply-rate DividedBar, and the send schedule.
| prop | type | default |
|---|---|---|
| name | string | — |
| counts | { members: number; sent: number; replied: number } | — |
| schedule | { enabled: boolean; weeklyTarget: number; dayOfWeek: number; vettingThreshold: number } | null | — |
| pausedAt | string | null | — |
| archivedAt | string | null | — |
| provider | "gmail" | "outlook" | — |
a11y: Static card; state and schedule render as text. Provider uses a lucide mail glyph, no brand logo.
visual QA: compare against rb developerList (schedule/pausedAt/archivedAt/emailProvider) + SequenceSettingsTab lifecycle.
email-previewRead-only render of an outreach email in its chrome: from-line, subject, body in a reading measure, signature, and a provenance footer. {token} placeholders are highlighted — unresolved ones stay visibly mono/bracketed, resolved ones read as ink with a subtle underline and a title naming their source variable.
| prop | type | default |
|---|---|---|
| from | { name: string; address: string; provider: 'gmail'|'outlook' } | — |
| subject | string | — |
| body | string | — |
| variables | Record<string, string> | — |
| highlightVariables | boolean | true |
| signature | string | — |
| provenance | "work-email" | "commit-email" | "web-enriched" | "none" | — |
| touchpoint | "initial" | "follow-up" | "breakup" | "initial" |
a11y: Semantic heading for the subject; resolved variables expose their source via title. whitespace-pre-line keeps authored line breaks.
visual QA: compare against rb listMemberDraft (subject/content/opener + template variables) + EmailProvenanceBadge.
inbox-rowOne conversation in the outreach inbox: candidate, subject, an embedded sm SequenceTimeline for touchpoints sent, and the reply state. The whole row is a button (Enter/Space) when onclick is set. Only a replied thread pulses; everything else holds still.
| prop | type | default |
|---|---|---|
| candidate | { displayName: string; login: string; avatarUrl? } | — |
| subject | string | — |
| lastActivity | string | — |
| state | "awaiting" | "replied" | "accepted" | "stopped" | — |
| provider | "gmail" | "outlook" | — |
| forwarding | boolean | false |
| touchpointsSent | "1" | "2" | "3" | "1" |
| selected | boolean | false |
| onclick | function | — |
a11y: role=button + tabindex + Enter/Space when onclick is set (DataGrid row pattern); replied pulse honors motion-reduce; forward/accept icons carry aria-labels.
visual QA: compare against rb userConnection (lastActivity/hasAccepted/shouldForwardReply/emailProvider) + inbox list row.
email-provenance-badgeWhere a candidate's email address came from, on the trust taxonomy: work-email (gold, confirmed by a second source), commit-email (green, read from code), web-enriched (orange, observed), none (muted 'No email found'). Never says verified, never shows a checkmark.
| prop | type | default |
|---|---|---|
| source | "work-email" | "commit-email" | "web-enriched" | "none" | — |
| reachableVia | string | — |
| size | "sm" | "md" | "md" |
a11y: Reuses SignalChip (trust color + native title). 'none' renders muted text. No verified language, no check glyph (§7).
visual QA: compare against new (trust taxonomy §9 applied to email discovery source).
table-cardThe standard rounded-border-overflow shell for a Table.Root.
| Repository | Stars | Status |
|---|---|---|
| query-engine | 4,812 | Active |
| wasm-linker | 3,190 | Active |
| schema-diff | 1,204 | Maintenance |
| legacy-orm | 642 | Archived |
| edge-cache | 118 | Active |
a11y: Presentational wrapper; the table inside carries semantics.
data-gridAnalytics-grade virtualized data grid on @tanstack/table-core: column resize, sort, pinned-left columns, multi-select, density, typed cells (text/number/badge/badges/trust-chip/avatar-name/date/link/percentile — percentile renders PercentileTier from a DataGridPercentileValue), optional per-column wrap, and a `toolbar` slot for composed filters. For heavy interactive data; use Table + TableCard for <100 static rows.
Virtualized, resizable, sortable, pinned columns.
Full 50,000-row showcase →| prop | type | default |
|---|---|---|
| columns | DataGridColumn<T>[] ({ id, header, accessor, type?, width?, minWidth?, pin?: 'left', sortable?, align?: 'start'|'end', wrap?: boolean }) | — |
| data | T[] | — |
| getRowId | (row: T) => string | — |
| density | "compact" | "comfortable" | "comfortable" |
| selectable | "none" | "multi" | "none" |
| height | number | 560 |
| loading | boolean | false |
| onRowClick | function | — |
| onSelectionChange | (ids: string[]) => void | — |
| onSortChange | (sort: { id: string; desc: boolean } | null) => void | — |
a11y: role=grid/row/columnheader/gridcell; aria-sort on sorted headers; aria-rowcount/aria-busy; clickable rows are tabbable with Enter/Space activation; sort buttons and resize separators are labelled.
de-gods: server-mode paging, pinned-right, inline edit, grouping, keyboard range selection, garden/sparkline cell types
visual QA: compare against @tanstack/table-core + @tanstack/svelte-virtual (recruiter-bot's data-table adapter, ported verbatim)
table-shellSuperseded: DataGrid is the table. Static tables use Table + TableCard. THE recruiter-bot table chrome: <colgroup> fixed widths, sticky blurred header, built-in skeleton rows, select-all, and the toolbar-replaces-header swap.
Superseded by DataGrid. DataGrid is the table now; for short static tables in cards and reports, compose Table inside TableCard. TableShell still exports for one minor, then goes.
See DataGrid on /data →| prop | type | default |
|---|---|---|
| columns | { key: string; label: string; width?: string }[] | — |
| selectable | boolean | false |
| allSelected | boolean | false |
| onselectall | function | — |
| loading | boolean | false |
| stickyHeader | boolean | true |
| showToolbar | boolean | false |
a11y: <th scope=col>; aria-busy while loading; sticky header carries a bottom border scroll cue.
de-gods: results/pagination/prefetch/bulk-reveal plumbing (parent owns data)
visual QA: compare against rb-extract/inputs-nav/tables/DeveloperSearchTable.svelte
table-selection-toolbarThe in-<thead> "N selected / Clear / actions" row that swaps in over the column labels when rows are selected.
3 selected | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| …rows… | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| prop | type | default |
|---|---|---|
| count | number | — |
| onclear | function | — |
a11y: role=toolbar + aria-live=polite on the count.
visual QA: compare against rb-extract/inputs-nav/tables/DeveloperSearchTable.svelte
table-paginationRange-based pager ("1–50", not page X of Y) with prev/next chevrons. Range design is deliberate — results stream in the background.
| prop | type | default |
|---|---|---|
| rangeStart | number | — |
| rangeEnd | number | — |
| total | number | — |
| hasPrev | boolean | — |
| hasNext | boolean | — |
| onprev | function | — |
| onnext | function | — |
| disabled | boolean | false |
a11y: <nav aria-label=pagination>; chevrons have aria-labels; disabled at bounds.
de-gods: currentPage/totalPages math → explicit range + hasPrev/hasNext
visual QA: compare against rb-extract/inputs-nav/tables/DeveloperTablePagination.svelte
page-size-controlPer-page size toggle. Thin wrapper over SegmentedControl.
| prop | type | default |
|---|---|---|
| options | number[] | — |
| value | number | — |
| onValueChange | function | — |
| disabled | boolean | false |
a11y: Inherits SegmentedControl's role=group + aria-pressed.
de-gods: SearchPageSize typing + TABLE_PAGE_SIZE_OPTIONS constant → options: number[]
visual QA: compare against rb-extract/inputs-nav/tables/SearchPageSizeControl.svelte
contribution-graphGitHub contribution heatmap. Verbatim grid + month/day labels + the exact green thresholds, as corrected --contrib tokens.
Hover a cell, or focus the grid and arrow around.
| prop | type | default |
|---|---|---|
| weeks | { date: string; count: number }[][] | — |
| size | "sm" | "md" | "md" |
| interactive | boolean | true |
| label | string | "Contribution activity" |
a11y: figure+figcaption; role=grid with per-cell aria-label; arrow-key roving focus the tooltip follows.
de-gods: MinimalGitHubUserResult / contributionsCollection plumbing → the weeks prop
visual QA: compare against rb-extract/developer/heatmap/ActivityHeatmap.svelte
developer-cardThe full developer result card/row, composed from ProfileHeader + SocialIconRow + StatPill + LanguageChips + ContributionGraph + facet pills.
Ada Lovelace
CRACKED
@ada
Systems engineer · compilers, distributed data
| prop | type | default |
|---|---|---|
| developer | DeveloperCardData | — |
| variant | "row" | "card" | "card" |
| selected | boolean | false |
| selectable | boolean | false |
| revealed | boolean | true |
| onselect | function | — |
a11y: row variant is a real <tr> with aria-selected + Space/Enter to toggle; interactive sub-elements stopPropagation.
de-gods: credits/entitlements/revealed-profiles/bulk-reveal stores, FEATURES flags, match-score/developer-filters/developer-level typing, 5 fixed-position hover popups → shared HoverPopup
visual QA: compare against rb-extract/developer/cards/DeveloperTableRow.svelte
profile-headerAvatar + name + @handle + optional headline, with an optional cracked glow + CrackedBadge.
Ada Lovelace
CRACKED
@ada
Systems · compilers
Grace Hopper
@grace
| prop | type | default |
|---|---|---|
| name | string | — |
| handle | string | — |
| headline | string | — |
| avatarUrl | string | — |
| cracked | boolean | false |
| size | "sm" | "md" | "lg" | "md" |
a11y: Avatar fallback shows initials; name is plain text.
de-gods: entitlements store + FEATURES gating, reveal/blur logic, /api/avatar URL builder, user-display-utils → format.ts
visual QA: compare against rb-extract/developer/cards/ProfileHeader.svelte
cracked-badge"CRACKED" gradient badge for top-1% developers, with a hover tooltip.
CRACKED
CRACKED
| prop | type | default |
|---|---|---|
| size | "sm" | "md" | "md" |
a11y: role=img with a descriptive aria-label.
de-gods: tier/score shouldShow gating (parent decides whether to render)
visual QA: compare against rb-extract/developer/cards/CrackedBadge.svelte
social-icon-rowRow of green social badges (GitHub / LinkedIn / X / website) linking out to profiles.
| prop | type | default |
|---|---|---|
| links | { kind: SocialKind; href: string; label?: string; logoUrl?: string }[] | — |
| size | "sm" | "md" | "md" |
a11y: each link is aria-label'd + rel=noopener; clicks stopPropagation so a row click still selects.
de-gods: BountyLab/GitHub/LinkedIn typing, reveal/enrichment plumbing, email-copy, inline LinkedIn hover popup, getCompanyLogoUrl → optional logoUrl
visual QA: compare against rb-extract/developer/cards/SocialBadges.svelte
stat-pillVertical list of GitHub stat rows (followers/following/stars…), K/M-abbreviated via format.ts.
| prop | type | default |
|---|---|---|
| stats | { label: string; value: number; icon?: Snippet }[] | — |
| size | "sm" | "md" | "lg" | "md" |
a11y: Plain text rows; icons are decorative.
de-gods: match-score / developer-level derivation (display formatting only)
visual QA: compare against rb-extract/developer/stat-utils/GitHubStatsCard.svelte
language-chipsRounded language chips with a +N overflow pill.
TypeScript
Rust
Go
Python
Elixir
Zig
+ 2 more
| prop | type | default |
|---|---|---|
| languages | { name: string; tone?: Tone }[] | — |
| max | number | — |
a11y: Plain text chips.
de-gods: isLoading branch, totalRepositoriesCount overflow heuristic → max prop
visual QA: compare against rb-extract/developer/cards/LanguagesList.svelte
git-hub-lockupGitHub wordmark lockup SVG.
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Inline SVG, fill=currentColor. Decorative; label the link that wraps it.
visual QA: compare against rb-extract/developer/icons/GitHubLockup.svelte
linked-in-logoLinkedIn logo SVG.
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Inline SVG, fill=currentColor. Decorative; label the link that wraps it.
visual QA: compare against rb-extract/developer/icons/LinkedInLogo.svelte
xlogoX (Twitter) logo SVG.
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Inline SVG, fill=currentColor. Decorative; label the link that wraps it.
visual QA: compare against rb-extract/developer/icons/XLogo.svelte
globe-wireframeWireframe globe icon (website link).
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Inline SVG, fill=currentColor. Decorative; label the link that wraps it.
visual QA: compare against rb-extract/developer/icons/GlobeWireframe.svelte
bookmark-buttonToggle bookmark / Add-to-Sequence button. icon or sequence variant.
Superseded by AddToListButton, which toggles a contact across lists and shortlists from one menu instead of a single on/off bookmark.
| prop | type | default |
|---|---|---|
| pressed | boolean | false |
| ontoggle | function | — |
| variant | "icon" | "sequence" | "icon" |
| label | string | — |
a11y: aria-pressed reflects toggle state; icon variant has aria-label.
de-gods: AddToListDropdown, lists-cache store, optimistic add/remove → pressed prop + ontoggle
visual QA: compare against rb-extract/developer/icons/BookmarkButton.svelte
reveal-cardThe pitch-a-developer artifact: one portable sheet readable top-to-bottom at 375px with zero interaction. Name and verdict, the contribution garden as hero evidence, GemScore with its percentile line, signal chips in trust order, then provable repo URLs. Flipping reveal true runs the uncover choreography once: garden paints left to right, score counts up, chips settle, one pulse-green ring.
CRACKED
Ships compilers on weekends
Rust query engine, 4.1k stars
| prop | type | default |
|---|---|---|
| name | string | — |
| handle | string | — |
| cracked | boolean | false |
| verdict | string | — |
| weeks | { date: string; count: number }[][] | — |
| score | number | — |
| scoreLine | string | — |
| signals | { label: string; trust: 'github' | 'linkedin' | 'score' | 'streak'; title?: string }[] | "[]" |
| repos | { name: string; url: string; description?: string }[] | "[]" |
| reveal | boolean | false |
a11y: Renders an <article> labeled with the developer name; the garden is a labeled <figure>; repo links are real anchors. prefers-reduced-motion lands every stage at its final state instantly and the ring becomes a static primary border that fades.
visual QA: compare against new; composes ContributionGraph, CrackedBadge, CountUp, SignalChip
repo-cardGitHub-shaped repository summary. Renders as a bordered card or a compact borderless row (for suggest/dropdown lists). Language dot, stars/forks meta, topic badges, optional match line.
An asynchronous runtime for Rust: I/O, networking, scheduling, and timers.
| prop | type | default |
|---|---|---|
| name | string | — |
| href | string | — |
| description | string | — |
| language | string | — |
| stars | number | — |
| forks | number | — |
| topics | string[] | — |
| match | string | — |
| variant | "card" | "row" | "card" |
| density | "compact" | "comfortable" | "comfortable" |
a11y: Name is a real link (text-info) when href is given; all icons and the language dot are aria-hidden; topics shown as Badge with a +n overflow chip (max 4).
visual QA: compare against recruiter-bot ProjectsList.svelte repo row. Language dot uses a closed --viz-cat mapping, not GitHub hexes (see language-colors.ts).
event-badgeA time-sensitive signal about a developer: job change, open-to-work, departure, or activity-spike onset, with a relative suffix. Warm tones (JD orange, LinkedIn gold, primary tint). spike_onset carries a small live pulse, static under reduced motion.
| prop | type | default |
|---|---|---|
| type | "job_changed" | "open_to_work" | "left_company" | "spike_onset" | — |
| occurredAt | string | — |
| size | "sm" | "md" | "md" |
a11y: Text-labeled pill; the spike_onset pulse is decorative and stops under motion-reduce.
visual QA: compare against new (developer timing signals; warm-tone counterpart to the trust chips).
add-to-list-buttonAdd or remove a contact across lists and shortlists from one dropdown. Trigger shows current membership count; zero reads as a hollow outline. Checkable items, shortlists grouped first.
| prop | type | default |
|---|---|---|
| lists | { id: string; name: string; kind: 'shortlist' | 'list'; member: boolean }[] | — |
| ontoggle | function | — |
| variant | "icon" | "labeled" | "icon" |
| disabled | boolean | false |
a11y: Trigger has aria-label in icon variant; bits-ui menu gives roving tabindex + ESC; items are checkbox items (aria-checked).
stage-pillPipeline stage of a contact. Static pill by default; pass `onselect` to make it a Select-backed inline stage changer. Distinct quiet tone per stage, reusing existing category/trust/primary token pairs (no new tokens).
| prop | type | default |
|---|---|---|
| stage | "sourced" | "contacted" | "replied" | "interviewing" | "offer" | "hired" | — |
| size | "sm" | "md" | "md" |
| onselect | function | — |
a11y: When selectable, bits-ui Select provides the listbox/keyboard semantics; trigger labeled 'Stage'.
dncbadgeDo-not-contact flag. Destructive tone + ban icon so it reads as a hard stop before outreach. Optional `since` date renders in the title.
| prop | type | default |
|---|---|---|
| since | string | — |
| size | "sm" | "md" | "md" |
a11y: title carries 'Do not contact · since {date}'; icon is aria-hidden.
subscription-status-badgeStripe-shaped subscription state. Fixed tone per status: active = brand green, trialing = info, past_due = warning, canceled/paused = muted.
| prop | type | default |
|---|---|---|
| status | "trialing" | "active" | "past_due" | "canceled" | "paused" | — |
| size | "sm" | "md" | "md" |
a11y: Static text badge; color is not the sole signal (label states the status).
plan-cardCurrent subscription at a glance: plan, price lockup ($X/mo · N seats), status badge, renews-vs-cancels line and optional next invoice, plus a primary-tint callout for an active service grant.
Renews on Jul 31, 2026· next invoice $49
| prop | type | default |
|---|---|---|
| planName | string | — |
| amount | number | — |
| interval | "month" | "year" | — |
| quantity | number | — |
| status | "trialing" | "active" | "past_due" | "canceled" | "paused" | — |
| cancelAtPeriodEnd | boolean | false |
| renewsAt | string | — |
| nextInvoiceAmount | number | — |
| grantExpiresAt | string | — |
a11y: Semantic heading for the plan name; all state stated in text, not color alone.
invoice-rowOne line on the billing history. Paid is quiet (a muted check); open/failed carry a warning/destructive badge; void reads struck-through. Whole row links to the hosted invoice when `href` is set.
| prop | type | default |
|---|---|---|
| date | string | — |
| amount | number | — |
| status | "paid" | "open" | "failed" | "void" | — |
| href | string | — |
a11y: Link opens in a new tab with rel=noopener; status stated in text.
role-badgeA member's permission level. Quiet tones from existing pairs: owner = brand green, admin = domain blue, user/readonly = muted. No new tokens.
| prop | type | default |
|---|---|---|
| role | "owner" | "admin" | "user" | "readonly" | — |
| size | "sm" | "md" | "md" |
a11y: Static text badge; label carries the role.
member-rowOne teammate in the members table. Invited members read muted and get a Resend action; active show their role. Remove is opt-in via `removable`.
| prop | type | default |
|---|---|---|
| name | string | — |
| string | — | |
| role | "owner" | "admin" | "user" | "readonly" | — |
| status | "invited" | "active" | — |
| onresend | function | — |
| onremove | function | — |
| removable | boolean | false |
a11y: Remove button labeled 'Remove {name}'; Resend is a real button.
floating-creditsA compact fixed floating chip showing the user's credit balance beside the semi-transparent pineapple credit mascot. Number counts on change; renders as a link when href is set. Reduced motion holds still.
| prop | type | default |
|---|---|---|
| balance | number | — |
| label | string | "Credit balance" |
| href | string | — |
| position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" |
| hidden | boolean | false |
a11y: Renders <a> when href set, else a role=status <div>; aria-label is '{label}: {balance}'. Pineapple is aria-hidden decoration.
search-resultAgent-mode structured result card: rank + score + thumbs feedback + bookmark + expandable details. Composes ProfileHeader + SocialIconRow + ContributionGraph.
| prop | type | default |
|---|---|---|
| result | SearchResultData | — |
| expanded | boolean | false |
| feedback | "up" | "down" | null | — |
| onfeedback | function | — |
| bookmarked | boolean | false |
| onbookmark | function | — |
a11y: expand/collapse is a real <button aria-expanded>; thumbs are aria-pressed toggles; entrance honors reduced-motion.
de-gods: agentMode store, AgentCandidate type, live fetchAgentGitHubData/fetchProfessionalSummary, Iconify ~icons/mdi/* → lucide
visual QA: compare against rb-extract/developer/search-results/AgentResultRow.svelte
search-result-listCodifies the compose → plan → stream flow as one state machine: connecting → plan/skeleton → streaming rows → done/empty.
idle| prop | type | default |
|---|---|---|
| state | "idle" | "connecting" | "planning" | "streaming" | "done" | "empty" | "idle" |
a11y: Delegates to ConnectingState / ResultListSkeleton / EmptyState, each already aria-correct.
visual QA: compare against rb-extract/feedback-chrome/agent-flows/ (agent page flow)
plan-summaryThe agent's derived-plan display: grouped filter chips under labeled sections.
Search plan
Languages
Domains
Location
| prop | type | default |
|---|---|---|
| groups | { label: string; chips: { label: string; tone?: Tone }[] }[] | — |
| title | string | "Search plan" |
a11y: Plain labeled chip groups.
de-gods: ~1053 lines of filter-model plumbing — only the rendered plan chrome ports
visual QA: compare against rb-extract/feedback-chrome/agent-flows/PlanFilters.svelte
thinking-indicatorRotating typewriter status line for the agent's "thinking" state. New in v2.
| prop | type | default |
|---|---|---|
| messages | string[] | — |
| active | boolean | true |
| speed | number | 45 |
a11y: aria-live=polite; prefers-reduced-motion swaps the typewriter for a plain crossfade.
visual QA: compare against rb-extract/feedback-chrome/loaders/typing-animation.ts
spinnerIndeterminate loading spinner.
| prop | type | default |
|---|---|---|
| class | string | — |
a11y: Decorative; label the surrounding busy region.
scan-progressAsymptotic scan bar with rotating status copy and a CSS scan-line. Fills toward a ceiling so it never stalls; snaps to 100 when complete flips true.
Scanning GitHub…
| prop | type | default |
|---|---|---|
| messages | string[] | — |
| complete | boolean | false |
| oncomplete | () => void | — |
| size | "sm" | "md" | "md" |
a11y: Visual progress; surface the current status message in text (it does). Scan-line respects prefers-reduced-motion.
scan-statusLive scan line: spinning ring + "Searching… N developers scanned". Pairs with the shared .animate-fade-in-scale result-entrance keyframe.
Searching… 0 developers scanned…
| prop | type | default |
|---|---|---|
| scanned | number | — |
| label | string | "Searching…" |
| complete | boolean | false |
a11y: aria-live=polite on the count; spinner is motion-reduce:animate-none.
de-gods: the 2568-line page state machine (parent drives scanned/complete)
visual QA: compare against rb-extract/feedback-chrome/loaders/developers-legacy-page-SCAN-CHOREOGRAPHY.svelte
connecting-state"Connecting to search agent" card: a 4×4 GitHub-square grid chasing a green comet.
Connecting to search agent…
| prop | type | default |
|---|---|---|
| label | string | — |
a11y: role=status aria-label=Loading; reduced-motion freezes the comet.
de-gods: AnimatedGitHubGrid garden backdrop (Slice 7 decorative dep) omitted
visual QA: compare against rb-extract/feedback-chrome/loaders/SearchConnectingState.svelte
result-list-skeletonStreamed-search skeleton. phase=plan → centered progress column; phase=results → 5 result-card placeholders. Built on the Skeleton primitive.
| prop | type | default |
|---|---|---|
| phase | "plan" | "results" | "results" |
a11y: aria-busy + aria-hidden wrapper (per the one loading convention).
de-gods: SearchLoadingState illustration dependency omitted
visual QA: compare against rb-extract/feedback-chrome/loaders/SearchLoaderSkeleton.svelte + SearchResultsSkeleton.svelte
sidebar-skeletonLoading placeholder for a sidebar nav list: `count` rows of icon + jittered-width text bar.
| prop | type | default |
|---|---|---|
| count | number | 5 |
| showIcon | boolean | true |
a11y: aria-busy + aria-hidden wrapper.
visual QA: compare against rb-extract/feedback-chrome/loaders/sidebar-menu-skeleton.svelte
developer-card-skeletonSkeleton matching the DeveloperCard, card or row variant. Built on the Skeleton primitive.
| prop | type | default |
|---|---|---|
| variant | "row" | "card" | "card" |
a11y: aria-busy + aria-hidden wrapper.
visual QA: compare against rb-extract/developer/cards/SkeletonDeveloperCard.svelte
toasterToast host. Mount once in the root layout; fire toasts anywhere with the exported toast().
a11y: svelte-sonner handles live-region announcements.
empty-stateCentered zero-state with optional icon and action.
No developers match your filters
Try adjusting your experience or social filters to see more results.
| prop | type | default |
|---|---|---|
| title | string | — |
| description | string | — |
a11y: Static text region; put any control in the action slot.
visual QA: compare against rb-extract/feedback-chrome/empty-states/SearchEmptyState.svelte
alertStatic inline banner block (not a toast). Root/Title/Description; tone-tinted text on a card surface.
| prop | type | default |
|---|---|---|
| tone | "neutral" | "accent" | "success" | "warning" | "destructive" | "info" | "neutral" |
a11y: role=alert on Root; put meaning in the text, not just the tone.
visual QA: compare against rb-extract/feedback-chrome/toasts-banners/ui-alert/
app-bannerPersistent full-width top-of-app banner. Tone-tinted, optional dismiss + actions.
| prop | type | default |
|---|---|---|
| tone | "neutral" | "accent" | "success" | "warning" | "destructive" | "info" | "accent" |
| dismissible | boolean | false |
| ondismiss | function | — |
a11y: role=alert for destructive/warning tones, role=status otherwise; dismiss button has aria-label.
de-gods: billing subscription-status fetch, dismissal/session persistence, trial-visibility logic
visual QA: compare against rb-extract/feedback-chrome/toasts-banners/PaymentFailedBanner.svelte + TrialBanner.svelte
step-pillTri-state step pill for multi-stage flows: agent playbook stages, onboarding checklists. Pending is quiet, active carries a live ping dot, done gets a primary check.
| prop | type | default |
|---|---|---|
| label | string | — |
| state | "pending" | "active" | "done" | "pending" |
a11y: Plain text pill; state is also exposed as data-state. The active ping honors reduced motion (motion-reduce:animate-none).
visual QA: compare against rb AgentComposer stepPill treatment, token-clean
coachmarkAnchored coach chip for guided workflows: small paper card with a 4px pulse-green accent bar on the edge facing the anchor, an optional step counter, one imperative title, a two-sentence body, and Next / Skip. No dimmed overlay, no spotlight. Pairs with createTour for multi-step flows.
| prop | type | default |
|---|---|---|
| title | string | — |
| body | string | — |
| step | number | — |
| total | number | — |
| side | "top" | "bottom" | "left" | "right" | "bottom" |
| open | boolean | false |
| onNext | () => void | — |
| onSkip | () => void | — |
a11y: bits-ui Popover content anchored to the wrapped element; focus is not trapped so the page stays usable; Escape calls onSkip. Entrance is fade+slide and honors reduced motion via the animation layer.
visual QA: compare against new; createTour (tour.svelte.ts) is the headless runes state: { current, index, total, active, start(), next(), skip(), done }
gradient-backdropToken-driven radial glow (header/hero/footer × green/purple/dual). Sits behind a relative parent.
Signature glow
header · dual — purple sides, green center
| prop | type | default |
|---|---|---|
| variant | "header" | "hero" | "footer" | "header" |
| tone | "green" | "purple" | "dual" | "dual" |
a11y: pointer-events-none + aria-hidden; purely decorative.
visual QA: compare against rb-extract/feedback-chrome/backgrounds/changelog-components/HeaderGlow.svelte
animated-contrib-gridDecorative randomized contribution grid (marketing motif). Seeded PRNG for SSR-stable render. Fills its container width; cells cap at 18px.
| prop | type | default |
|---|---|---|
| size | "sm" | "md" | "lg" | "md" |
| animated | boolean | true |
| seed | number | 1 |
a11y: aria-hidden; decorative-only. prefers-reduced-motion holds a static state.
visual QA: compare against rb-extract/developer/heatmap/AnimatedGitHubGrid.svelte
gradient-washFull-bleed ambient gradient wash (mist / meadow / dawn / ink / dusk). Every wash is color-mixed from existing tokens — no raw color. Two radial layers drift slowly; static under reduced motion. Fills whatever positioned parent it sits in.
| prop | type | default |
|---|---|---|
| variant | "mist" | "meadow" | "dawn" | "pulse" | "paper" | "mist" |
a11y: pointer-events-none + aria-hidden; purely decorative. Drift stops under prefers-reduced-motion.
contrib-fieldFull-bleed field of GitHub contribution squares that roll in as an ambient loader background — waves of cells lighting through the contrib ramp. Seeded PRNG keeps the layout deterministic (SSR == client). Fills its positioned parent (viewport or a modal body).
| prop | type | default |
|---|---|---|
| density | "sparse" | "normal" | "dense" | "normal" |
| motion | "roll" | "breathe" | "static" | "roll" |
| seed | number | 1 |
a11y: pointer-events-none + aria-hidden; decorative-only. prefers-reduced-motion holds a static, evenly-lit state.
step-modalThe floating step-flow shell. Built on the Dialog primitive — inherits its focus trap, portal, faded backdrop, escape, and below-sm bottom-sheet treatment. Enters fade+scale; step content slides horizontally (left on next, right on back), a plain fade under reduced motion. While saving is true a compact contrib-field loader plays over the body.
The full step flow: pineapple dots, horizontal slides, skip on the middle steps, a save between each, and a burst on finish.
| prop | type | default |
|---|---|---|
| open | boolean | false |
| label | string | — |
| stepKey | string | number | — |
| direction | "forward" | "backward" | "forward" |
| saving | boolean | false |
| onCancel | function | — |
a11y: Dialog focus trap + escape + backdrop dismiss. label renders as a visually-hidden Dialog title. Cancel (X) top-right. Slide degrades to a fade under prefers-reduced-motion.
pineapple-dotsStep progress rail — one 3D pineapple (brand iconography) per step. Upcoming = grayscale + dimmed; current = full color, larger, gently bobbing; completed/skipped = full color. A completed dot is a button that jumps back to that step (never forward). Real buttons, aria-current on the active step, visually-hidden step labels.
Click a completed pineapple to jump back.
| prop | type | default |
|---|---|---|
| steps | { label: string; status: StepStatus }[] | — |
| current | number | — |
| onJump | function | — |
a11y: Ordered list of buttons; current carries aria-current=step; each button has a visually-hidden "Step N: label". Upcoming dots are disabled; bob stops under prefers-reduced-motion.
wizard-footerThe step controls. Back (ghost, hidden on the first step), Skip (ghost, only when the step is skippable), and the primary Next/Finish. While a save runs everything disables and the primary shows a busy spinner. Targets clear 44px below sm.
First step (skippable)
Middle step, saving
Last step
| prop | type | default |
|---|---|---|
| showBack | boolean | false |
| showSkip | boolean | false |
| isLast | boolean | false |
| busy | boolean | false |
| nextLabel | string | — |
| onBack | function | — |
| onSkip | function | — |
| onNext | function | — |
a11y: Real buttons; disabled state while busy. Primary label switches to Finish on the last step.
pineapple-confettiThe finish celebration. A radial burst of small 3D pineapples (brand iconography) mixed with green contrib-ramp squares on seeded trajectories, cleaned up after ~2.2s. Deterministic (seeded PRNG, never Math.random). Under prefers-reduced-motion it collapses to one static pineapple with a single pulse-bloom.
The finish burst — seeded pineapples and green squares.
| prop | type | default |
|---|---|---|
| active | boolean | false |
| seed | number | 7 |
| count | number | 26 |
a11y: pointer-events-none + aria-hidden fixed overlay; celebration only. prefers-reduced-motion replaces the burst with a single pulse-bloom.
stackVertical flow: spacing between siblings is gap on the parent, never a child margin.
| prop | type | default |
|---|---|---|
| gap | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
| align | "start" | "center" | "stretch" | "stretch" |
a11y: Renders a <div>. Structural, no interactive semantics.
splitTwo-column split that collapses to one column below sm. Children arrive as the a and b snippets.
| prop | type | default |
|---|---|---|
| ratio | "1:1" | "2:1" | "1:2" | "3:1" | "1:1" |
| gap | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
| collapse | "stack" | "reverse" | "stack" |
a11y: Renders a <div>. Structural, no interactive semantics.
gridResponsive equal-column grid: 1 column below sm, 2 at sm, the declared count at lg.
| prop | type | default |
|---|---|---|
| cols | 2 | 3 | 4 | 3 |
| gap | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
a11y: Renders a <div>. Structural, no interactive semantics.
sectionA labelled content block: the canonical uppercase micro-label above a stack of children.
Children stack under the canonical uppercase label.
| prop | type | default |
|---|---|---|
| label | string | — |
| gap | "xs" | "sm" | "md" | "lg" | "xl" | "md" |
a11y: Renders a <section> with an <h2> label read before its children. No interactive semantics.
figureA graphic with a caption within 16px of it. The card frame gives it the one card surface treatment.
| prop | type | default |
|---|---|---|
| caption | string | — |
| frame | "card" | "plain" | "plain" |
a11y: Renders a <figure> with a <figcaption>. Structural, no interactive semantics.
mastheadReport/export hero header: display title, the one pulse underline bar, optional meta, and a deterministic garden fragment on hero surfaces.
Systems engineer · 96th percentile
| prop | type | default |
|---|---|---|
| title | string | — |
| meta | string | — |
| garden | "corner" | "none" | "none" |
a11y: Renders a <header> with the page <h1>. The garden fragment is aria-hidden. No interactive semantics.
live-feedVertical live-event stream. New rows fade+slide in at the top and never re-animate; timestamps tick on one shared clock. Degrades live → replay → static; reduced motion behaves as static.
| prop | type | default |
|---|---|---|
| events | LiveEvent[] | — |
| mode | "live" | "replay" | "static" | "static" |
| maxRows | 5 | 10 | 20 | 10 |
| density | "compact" | "comfortable" | "comfortable" |
a11y: role=feed; rows are role=article with an aria-label sentence. aria-live=polite only in live/replay. Reduced motion renders every mode as static (no slide, instant reveal). Kind icons are aria-hidden.
visual QA: compare against vamo-design original, alive doctrine
activity-tickerOne-line ambient strip that crossfades through events every --duration-ambient. A live PresenceDot sits left in live mode. Static and reduced motion hold the first event. Events may carry an optional delta, shown as a signed +N%/-N% tick.
| prop | type | default |
|---|---|---|
| events | LiveEvent[] | — |
| label | string | — |
| mode | "live" | "replay" | "static" | "static" |
a11y: aria-live=polite only off-static; single contained line (h-8) that truncates. Reduced motion shows one event with no rotation. Kind icon is aria-hidden.
visual QA: compare against vamo-design original, alive doctrine
presence-dotLive-signal presence indicator. live = ping ring over a solid primary dot; recent = solid primary; idle = muted dot.
| prop | type | default |
|---|---|---|
| state | "live" | "recent" | "idle" | "idle" |
| size | "sm" | "md" | "md" |
| label | string | — |
a11y: role=img with an aria-label (defaults per state: Active now / Recently active / Idle). The ping obeys motion-reduce:animate-none.
visual QA: compare against vamo-design original, alive doctrine