@palate/cli 0.0.0-stage → 0.0.1

package/kb/anatomy/data-table.md

@@ -0,0 +1,24 @@
+---
+id: a.data-table
+kind: anatomy
+title: Data table (anatomy)
+tags: [table, data grid, list, rows, columns, sort, selection, records, crm, admin]
+answers: What every serious data table has, independent of style.
+use_when: [scanning and comparing many records]
+---
+
+**Parts:** page header (title, live summary of the filtered set, primary action) → filter toolbar (see `a.filter-toolbar`) → column header row → rows → footer (count and totals of what's shown).
+
+**Header row:** sticky; labels in the system's caption role, muted; sortable columns show a sort affordance only on hover or when active; the active sort is announced (`aria-sort`).
+
+**Rows:** height from the system's density (dense 36–40px, regular 44–52px; a two-line first cell needs 52px+). First column is the record's name in the body role at medium weight, optional meta line in caption role, muted. Hover = the system's next surface step; selected = one step further. Whole row opens the record; inner controls stop propagation.
+
+**Columns:** numbers right-aligned with tabular figures and the unit/currency muted; dates relative with the absolute date on hover; people as name (avatar only if the system uses avatars elsewhere); status as a status indicator (see `a.status-indicator`), never a coloured cell; tags capped at 2 with "+N". Column widths are set so the name and the "next action" column take the slack, never the numbers.
+
+**Behaviour:** keyboard: `/` focuses search, arrows/j-k move, Enter opens, Esc clears. Selection column appears only if bulk actions exist. Bulk-action bar replaces the toolbar while rows are selected.
+
+**States:** loading = skeleton rows at real row height; empty first use; no results with the filters named and a clear action (see `a.empty-state`); error inline above the rows.
+
+**Phone:** rows become two-line items: name + key number, then status + meta; filters move into a sheet.
+
+**Micro-details:** truncation with full value in a tooltip; no zebra striping when rows have dividers; divider = the system's hairline; numbers never wrap; the sorted column header is slightly stronger than others.

package/kb/anatomy/empty-state.md

@@ -0,0 +1,16 @@
+---
+id: a.empty-state
+kind: anatomy
+title: Empty, no-results and error states (anatomy)
+tags: [empty state, zero state, no results, error, first use, placeholder]
+answers: What the screen says when there's nothing to show.
+use_when: [every list, table, feed and search]
+---
+
+**First use:** one line saying what will live here, one line on how to start, one primary action. No illustration unless the system uses illustration elsewhere.
+
+**No results:** say which filters caused it ("No open deals owned by Lukas match 'gin'") and offer the one-click ways out ("Clear search", "Show all stages"). Keep the toolbar visible.
+
+**Error:** what failed in plain words, what still works, and "Try again". Inline where the content would be, never a full-page takeover for a partial failure.
+
+**Look:** centred in the content area at about a third of its height, body role for the headline (medium weight), body-sm muted for the explanation, the system's standard button.

package/kb/anatomy/filter-toolbar.md

@@ -0,0 +1,19 @@
+---
+id: a.filter-toolbar
+kind: anatomy
+title: Filter toolbar (anatomy)
+tags: [filters, toolbar, search, segmented control, facets, chips, sort, saved views]
+answers: How people narrow a list fast, in one row.
+use_when: [any list or table with more than ~20 records]
+---
+
+**One row, left to right:** search (with its keyboard hint) → the primary scope as a segmented control with counts (e.g. Open 21 · Won 2 · Lost 1 · All 24) → facet filters as compact selects or filter chips → toggles for the one or two saved questions people ask most ("Quiet 14+ days") → on the far right, sort and view options.
+
+**Rules:**
+- Controls share one height (the system's input height) and one radius.
+- Active filters are visible at a glance: changed selects show their value, toggles look pressed; a "Clear" appears only when something is set.
+- Counts in the segmented control update with the other filters.
+- The whole filter state lives in the URL so views can be shared and survive reloads.
+- On narrow screens the search stays; everything else collapses into one "Filters" button with a count badge.
+
+**Micro-details:** search placeholder names what's searchable in 2–3 words; the shortcut hint disappears once typing starts; a cleared filter never leaves an empty table without explanation.

package/kb/anatomy/meter.md

@@ -0,0 +1,16 @@
+---
+id: a.meter
+kind: anatomy
+title: Usage meter (anatomy)
+tags: [meter, usage, seats, quota, limit, budget, progress, capacity]
+answers: How much of something is used, what it's made of, and what to do near the limit.
+use_when: [seats, storage, budgets, quotas, plan limits]
+---
+
+**Parts:** label ("Paid seats · Studio plan") → the number in the system's largest data role ("9 of 10 used") → the meter → a legend of what makes it up → the action ("Add seats") aligned to the end of the legend.
+
+**Meter:** a single bar for continuous amounts; segments (one per unit) when units matter and there are ≤ 30 of them. Parts of the total use different fills from the same neutral family (used = strong, held/pending = hatched or lighter, free = the track). Over the limit, the overflow takes the warning colour.
+
+**Rules:** the number, not the bar, is the focal point; the bar is 6–8px tall and spans the available width; the legend uses the caption role; the meter has `role="meter"` or an accessible label stating the numbers.
+
+**Micro-details:** segments have 2–4px gaps and the system's small radius; the action never sits far from what it changes; near the limit (≥ 90%) the label says so in words.

package/kb/anatomy/product-window.md

@@ -0,0 +1,18 @@
+---
+id: a.product-window
+kind: anatomy
+title: Product window in a marketing page (anatomy)
+tags: [hero, product window, screenshot, mockup, product ui, landing, demo, browser frame]
+answers: How to show the real product on a marketing page so it reads as real.
+use_when: [software landing pages, feature sections, launch pages]
+---
+
+**Frame:** the product's own chrome (logo mark, location breadcrumb, maybe a search or account), never fake traffic lights or a browser bar. One radius from the system (its large card radius), its raised surface, its elevation treatment (hairline or soft shadow).
+
+**Content:** one real screen of the product, built in HTML from sample data, showing the moment that sells it (an approval waiting, a chart answering a question, an inbox at zero). Text inside at the product's real UI sizes, not scaled-down marketing type.
+
+**Crop:** a window can run off the page edge, but the crop only ever cuts low-value content (trailing columns, the end of a list), never the key action. Put the action on the side that stays visible.
+
+**Life:** one small interaction people can try (approve, play, tick) with an undo; no auto-playing fake activity.
+
+**Phone:** the window drops below the text at full width; inside, it collapses with container queries, not by scaling down.

package/kb/anatomy/settings-page.md

@@ -0,0 +1,18 @@
+---
+id: a.settings-page
+kind: anatomy
+title: Settings and admin page (anatomy)
+tags: [settings, preferences, admin, account, workspace, members, team, configuration]
+answers: How settings stay scannable and safe.
+use_when: [workspace, account, team or billing settings]
+---
+
+**Layout:** 960–1100px content. Either a left section nav (200–240px) with one section per page, or stacked sections on one page, each as: section title + one-line description on the left (280–320px), controls on the right. People-management pages lead with state (seats, what needs fixing) before lists.
+
+**Rows:** one setting per row: label (body, medium) + description (body-sm, muted) on the left, the control on the right, aligned to one column. Related rows share a container with hairline dividers; unrelated groups get separate containers.
+
+**Saving:** toggles and selects apply instantly with an undo toast; text fields save on blur or with one explicit save per section, never one save button per field; unsaved changes are obvious.
+
+**Danger zone:** last, visually quiet until hovered (no permanent red border), each action names its consequence and confirms with the thing's name.
+
+**Micro-details:** controls are right-aligned to one edge; descriptions never exceed two lines; disabled controls explain why (owner can't be changed, plan limit).

package/kb/anatomy/status-indicator.md

@@ -0,0 +1,17 @@
+---
+id: a.status-indicator
+kind: anatomy
+title: Status, progress and attention indicators (anatomy)
+tags: [status, badge, dot, progress, stage, track, warning, quiet, health, signal]
+answers: How to show state without turning the screen into a traffic light.
+use_when: [rows or cards that carry a state, a stage, or a "needs attention" signal]
+---
+
+**Kinds:**
+- **State** (running, failed, approved): a 6–8px dot in the semantic colour + the word. Never colour alone.
+- **Position on a path** (deal stage, onboarding step): a short track of segments, filled up to the current one, + the stage name. Terminal states (won/lost, done/cancelled) are words, not a full track.
+- **Attention** (getting stale, overdue): calm until it matters. Below the threshold show plain muted text; past it, add a small warning dot; past a second threshold, use the danger dot. Never colour a whole column.
+
+**Rules:** follow the system's colour grammar: in a restrained system status lives in dots and text, not filled badges; filled tinted badges only where the system already uses them. Semantic colours are separate from the brand accent. Each indicator has an accessible text equivalent.
+
+**Micro-details:** dots align to the text's x-height centre; segments in a track share the radius family; the same state always uses the same treatment across the product.

package/kb/anatomy/toast-undo.md

@@ -0,0 +1,16 @@
+---
+id: a.toast-undo
+kind: anatomy
+title: Toast with undo (anatomy)
+tags: [toast, notification, undo, snackbar, feedback, confirmation]
+answers: How to confirm an action and let people take it back.
+use_when: [reversible actions: role changes, removals, archives, sends with a delay]
+---
+
+**Parts:** one short sentence saying what happened, past tense, naming the thing ("Removed Daniel Cho") → one action, "Undo" → nothing else (no icon unless the system's toasts have one, no close button if it times out).
+
+**Behaviour:** appears bottom centre (or bottom left in apps with a left nav) 16–24px from the edge; stays 5–6 seconds, pauses on hover and focus; one toast at a time, a new one replaces the old; announced with `role="status"`; Undo restores the exact previous state including position in a list.
+
+**Look:** the system's inverse or raised surface, the body-sm role, the system's radius; enters with a short rise and fade (150–200ms), leaves faster; reduced motion: fade only.
+
+**Rules:** prefer undo over confirmation dialogs for anything reversible; irreversible actions confirm before, never after.