Components

Header & navigation

The black header that anchors every screen: brand lockup, the primary module tabs, and a standalone Request Intake action held to the right. Locations is the default tab; Request Intake is present everywhere but never a peer of the sections.

Header ink-900 bg at --size-header · tabs brand underline on aria-current="page" · Request intake = a real .km-btn--ondark, right-aligned, persistent — never a styled tab.

Review card

The Reviews-tab work unit: one Google review with a single reply action. Pure composition — a .km-card.km-card--accent with the --m-reviews spine, wrapping six elements. The profile link is icon-only so words never compete with the review; Draft reply is the one black primary per card.

.km-review — composition over .km-card. The card shell + --m-reviews spine are the only component-level parts; everything inside is an element.

Location card

The browsable unit for a single location: name as the only title, address + ID as metadata, one status chip, the K·G·A·B coverage row, and a footer. Public platform links live here; admin links live on the detail page only.

.km-loc — name is the single title; address + ID are metadata; one status chip top-right; coverage row reads K·G·A·B at a glance.

Panel & card

The workhorse container every other component extends. Surface, hairline border, radius-md, optional 4px module spine. A header holds a title and at most one trailing control or count.

.km-card · .km-card--accent with --accent for module context. Border only — never a resting shadow.

Detail / field-row card

A card filled with field rows — the atom of every detail page. A 160px mono-caps label pairs with a value that can hold text, a chip, or links, divided by hairlines.

.km-field — mono caps label + value, hairline divider between. Values hold chips, links, or text.

Confirmation card

The “here's what I understood” receipt the system shows before doing anything. Brand left-border, mono-caps keys, a primary proceed and a quiet edit. Honest about manual work up front.

.km-confirm — brand left-border, mono caps keys, primary “proceed” + quiet “edit”. Nothing publishes until confirm.

Intake conversation

The conversational front door — bubbles + a persistent composer with a mic. The rep speaks plainly; the system replies with a plain receipt. Voice produces an editable transcript, never an auto-submitted action.

.km-bubbles + .km-composer — user = ink-900 right, system = brand tint left. The mic owns the composer's bottom-right corner.

Processing checklist

The live “what's happening now” after a request is confirmed. Marks pair color + glyph — done ✓, active ●, manual !, queued ○ — never color alone. Reads as operational history, never a developer log.

.km-check — done ✓ · active ● · manual ! · queued ○. Color + glyph, never color alone.

Activity feed

The durable “what happened” — one chronological stream across modules, every row attributed to a person. Module-tinted initial, plain-language line, who/how subtext, mono relative time.

.km-feed — module-tinted initial, plain-language line, who/how subtext, mono relative time. Operational history, not logs.

Empty & warning states

Empty isn't broken — it's an invitation. Warnings are honest and specific; blocked states say what to do next, in plain language. Each leads with a word, never just a colour.

Empty dashed border, surface-2, title + one-line guidance + a recovery action. Banners manual (amber) · block (red, with next step) · info (neutral).

Dense table

Locations at scale — sticky mono headers, hover rows, and the platform tiles compacted so a hundred locations scan as one column of K·G·A·B.

.km-table — sticky surface-2 mono headers, hairline row dividers, hover wash. Platform tiles compact to 20px inside the table so density never costs the K·G·A·B read.

Segmented control

The sliding pill — one thumb glides between options on the same recipe as the tab marker (--dur-page / --ease-in-out), so every sliding-marker in the system moves as one gesture.

.km-seg — surface-3 well, surface thumb with shadow-sm. The --ink variant (black thumb, white selected label) is the view-toggle voice: Table | Cards. Retired the harder-edged .km-toggle — every 2–4-option choice is a seg. Selection SLIDES, press DIPS: choosing is never a press. Click an option: the thumb glides, it never blinks.

Shared surface morph

A card grows into its detail surface and visibly stays the SAME object — the boundary travels the whole way on --dur-grow, the slowest deliberate move in the system. Content only renders at its own scale; the just-viewed card carries the lift when you return.

growFrom / shrinkTo from $lib/motion/morph · rides --dur-grow / --ease-in-out · detail content fades in after the surface is 55% there; on the way back, content fades over the first third and the small display only appears once the surface lands. The phantom-hover guard mutes stray hover until the pointer actually moves.

Reorderable widgets

Drag the handle: the row follows the pointer 1:1, neighbours give way on a quick decelerate, and release lands on the rare-overshoot settle. For dashboard widgets, kanban columns, priority lists.

createSnapDrag from $lib/motion/snap.svelte · direct index targeting (fast multi-slot drags land in one move) · window-level listeners so release ALWAYS lands · settle rides --dur-slow / --ease-settle.

Loading states

Calm and confident: layered skeletons with a soft sweep that stops when content lands, cards arriving on the stagger cascade, numbers rolling after. Never an endless pulse.

.km-skeleton + km-rise on --stagger steps (capped at 6) · figures roll in on the value-roll behaviour once content lands.

AI generation

Generating never shows a plain spinner: a soft brand-tone border sweep, a streaming text shimmer, a pulsing caret, and the button label morphing Generate → Thinking → Regenerate. Brand tones only.

.km-ai--thinking border sweep · .km-ai-shimmer streaming text · .km-ai-caret pulse — for response drafting, insight cards, translation suggestions across every AI-assisted surface.

Completion celebration

A tiny, contained reward on completion: the check draws itself, the badge settles in on the rare-overshoot curve, a soft tint halo breathes out once. Never confetti.

CheckDraw component · km-draw + km-badge-pop + km-halo on --dur-morph / --ease-settle.

Promotion log

How a component earns its way into this page. New work stages on a proposed-components surface, gets triaged against the locked system, and only then promotes into the core — nothing lands here unreviewed.

Ten edge cases · ten written rules · zero unreviewed landings. The staging surface is empty again — that is the steady state.

Component manifest

Every class in the system, registered. This table is generated from the component registry — the same data the audit reconciles against the stylesheets and real usage, so no class can exist invisibly.