Patterns catalogue
Every power-up the kit supports, with its demo, the backend helper it needs and the kit components involved. Decided by Frank, in chat 2026-10-18. Parked patterns stay logged until a use case appears.
24basic, all adopted
6advanced adopted
3advanced maybe
20advanced parked
Basic power-ups (round 1): all 24 adopted
| # | Pattern | Status | Demo | Backend helper | Kit components |
|---|---|---|---|---|---|
| 01 | ⌘K command paletteOne box that jumps to any page, order or retailer, and runs actions. | Adopted | Demo · Phone | H04 | CommandPalette · Combobox |
| 02 | Find order, always in the headerType an order number, customer or retailer from any page. | Adopted | Demo · Phone | none | AppShell (header) · CommandPalette |
| 03 | Keyboard shortcuts + “?” cheat sheetj / k move rows, x selects, e edits, ? shows the list. | Adopted | Demo · Phone | none | DataTable · AppShell |
| 04 | Recently viewed + pinned recordsA strip of the last records you opened; pin the ones you keep going back to. | Adopted | Demo · Phone | H01 | CommandPalette (Recent) · AppShell |
| 05 | Saved views & column presetsSave a filter + columns as your own tab. | Adopted | Demo · Phone | H01 | SavedViews · FilterBar · ColumnChooser |
| 06 | Filter chips that live in the URLEvery filter is a removable chip, and the link reproduces the list. | Adopted | Demo · Phone | none | FilterBar · Pagination |
| 07 | Job tray in the cornerExports, imports, print runs and vision re-runs keep running while you work. | Adopted | Demo · Phone | none | JobsButton · JobsDropdown · JobRow · JobsSheet · JobToast |
| 08 | Bulk action bar with batch progressSelect many rows, act once; big selections go in batches of 100. | Adopted | Demo · Phone | H16 (dry-run improves it) | BulkBar · DataTable |
| 09 | Prepare → open PDF, with cloud-print statusPrint buttons show “preparing…”, then open the PDF in a new tab. | Adopted | Demo · Phone | none | DocumentLink · PrintJobStatus |
| 10 | Peek side-sheet (and pin to split view)Open a record in a panel over the list; pin it to keep list and record side by side. | Adopted | Demo · Phone | none | SplitPane · RecordHeader |
| 11 | Hover cardsRest on a retailer or order name to see the key facts, no click. | Adopted | Demo · Phone | none | ColumnTypes · RecordHeader |
| 12 | Copy any ID in one clickOrder numbers, fabric codes, batch IDs copy with one click. | Adopted | Demo · Phone | none | ColumnTypes · RecordHeader |
| 13 | Activity side panelWho changed what and when, before → after, on every record. | Adopted | Demo · Phone | H02 | Timeline · AuditRow · DiffViewer |
| 14 | Empty states that offer the next stepAn empty list says why, and gives the one button that fixes it. | Adopted | Demo · Phone | none | EmptyState · ErrorState · NotAvailable |
| 15 | Density switchCompact (30px rows) for big tables, comfortable for reading. | Adopted | Demo · Phone | H01 | AppShell (toolbar) · DataTable |
| 16 | Inline edit with an undo toastChange a value in place; it saves, and “Undo” stays on screen. | Adopted | Demo · Phone | none | InlineEditCell · DataTable |
| 17 | “Someone else changed this” bannerIf a colleague saved first, you see what changed and choose. | Adopted | Demo · Phone | H03 | SaveBar · Banner · MeasurementGrid · DiffViewer |
| 18 | Confirmation ladder (typed for the scary ones)Plain confirm, then confirm with consequences, then type the words. | Adopted | Demo · Phone | none | ConfirmDialog · MoneyInput |
| 19 | Floating “unsaved changes” barA dark bar slides up: how many changes, Save, Discard. | Adopted | Demo · Phone | none | SaveBar · UnsavedGuard · FormSection |
| 20 | Live / stale / offline bannerA quiet dot says the list is live; if the connection drops, it says so. | Adopted | Demo · Phone | none | Banner · AppShell |
| 21 | Times in my timezone, both on hover“3 h ago” in the list; hover shows the exact time in your zone and UTC. | Adopted | Demo · Phone | none | DateTime · ClockButton · TimezoneSelect |
| 22 | English / 中文 switchEach person picks their language; menu, labels and dates follow. | Adopted | Demo · Phone | none | LocaleToggle · BilingualField |
| 23 | Motion setPage change, sheet open, row expand, toast, progress: each with one crisp timing. | Adopted | Demo · Phone | none | tokens.css motion tokens (every overlay) |
| 24 | Skeleton loadingThe table's shape appears at once, then fills in; no blank screen. | Adopted | Demo · Phone | none | DataTable (loading) · states |
Advanced power-ups (round 2): 6 adopted, 3 maybe, 20 parked
| # | Pattern | Status | Demo | Backend helper | Kit components |
|---|---|---|---|---|---|
| 01 | Who else is here (presence + soft edit lock)Avatars on a record show who is viewing or editing it; a field someone is editing shows their name. | Parked | Demo · Phone | H07 (H03 hard guard) | RecordHeader · Banner · SaveBar |
| 02 | Comments and @mentions on any recordA thread on every order, retailer, design or fabric code; @name notifies. | Parked | Demo · Phone | H10, H08 | Thread · Combobox (@mention) |
| 03 | Watch a record → notification inboxFollow an order, ticket or container; every status change lands in one inbox. | Parked | Demo · Phone | H11 | NotificationCentre · RecordHeader |
| 04 | While you were away (shift hand-over digest)When London logs in, one card says what Shanghai changed on the orders they follow. | Parked | Demo · Phone | H12 (H11, H02) | NotificationCentre · Timeline |
| 05 | One search across everythingOrders, retailers, fabric codes, tickets and designs from one box: the header search bar / ⌘K.Frank: Frank: "I thought you'd give me that in the search bar anyway, a really cool search bar." Delivered inside the header search bar / ⌘K, not as a separate page. | Adopted | Demo · Phone | H04 | CommandPalette · Combobox · AppShell (header search) |
| 06 | Say it in ⌘K (“hold RJ-84213”, “stuck in QC > 5 days”)Type a sentence; ⌘K turns it into a filter you can open or an action you confirm. | Parked | Demo · Phone | H05 (H04, H09) | CommandPalette |
| 07 | Do that again (⌘.)After holding one order with a reason, ⌘. repeats the same action on the next. | Parked | Demo · Phone | none | CommandPalette · JobToast |
| 08 | My home: pinned numbersPin the counts you care about (my on-hold orders, QC late) on your own home. | Adopted | Demo · Phone | H01, H06 | KpiTile · SortableList · FilterBar |
| 09 | Stuck-in-phase timersEvery order row shows how long it has sat in its phase against the target. | Parked | Demo · Phone | H09 | DataTable · ColumnTypes · KpiTile |
| 10 | Why is this order here?One plain-language timeline: what put the order in this state. | Parked | Demo · Phone | H13 (H09) | Timeline · RecordHeader |
| 11 | Time-travel a record (scrub, diff, restore one value)Drag back through a record's history, see each change, restore one value. | Parked | Demo · Phone | H02, H14 | Timeline · DiffViewer |
| 12 | Do it later (scheduled actions)“Release this hold at 09:00 Shanghai”: pick a time in any zone. | Parked | Demo · Phone | H15 | CronBuilder · DateTime |
| 13 | See the impact before a bulk writeEvery bulk action shows “288 will change, 24 already set, 3 skipped” before you confirm. | Adopted | Demo · Phone | H16 | BulkBar · ConfirmDialog |
| 14 | Undo a whole bulk run (10-minute window)After a bulk change, one button puts every row back the way it was. | Adopted | Demo · Phone | H17 (own before-values; H02 optional) | BulkBar · JobToast · JobRow · Timeline |
| 15 | Second approver for money (maker–checker)Wallet credits over a limit, voids and revoke-all wait for a second person. | Parked | Demo · Phone | H18 | ConfirmDialog · MoneyInput · Timeline |
| 16 | See the admin as someone else's roleA super admin previews the menu and buttons exactly as a support user sees them. | Parked | Demo · Phone | H20 | AppShell · Banner |
| 17 | Paste from Excel into a gridPaste 50 rows straight from a sheet; every cell is checked before anything is saved. | Adopted | Demo · Phone | H21 | ImportFlow · ReviewStep · MatrixEditor |
| 18 | Import remembers your column mappingThe second time you import a sheet with the same headers, the mapping is already done.Frank: Cool, use case unconfirmed (Frank). | Maybe | Demo · Phone | H01 | ImportFlow |
| 19 | Trends inside the tableA tiny 12-week line next to each retailer (orders) and factory (QC).Frank: Cool, use case unconfirmed (Frank). | Maybe | Demo · Phone | H22 | ColumnTypes (sparkline) · ChartFrame |
| 20 | Compare two records side by sidePick two designs, two retailers' pricing or two orders' measurements and see the differences.Frank: Cool, use case unconfirmed (Frank). | Maybe | Demo · Phone | none | DiffViewer · SplitPane |
| 21 | Totals for the filtered setA strip under the filters counts the whole filtered set by status, express, factory.Frank: Frank: "very useful". | Adopted | Demo · Phone | H06 | FilterBar · KpiTile · DataTable |
| 22 | Scan the QR to open itPoint the phone at an order or accessory QR label and the record opens.Frank: Frank: exciting tech, needs a clear use case: who and for what. | Parked | Demo · Phone | H23 | QrDisplay |
| 23 | Keeps working when Wi-Fi dropsQC ticks and verdicts made offline wait in a queue and send when the connection returns.Frank: Frank: "we don't need it". | Parked | Demo · Phone | H24 (H03) | Banner · JobToast |
| 24 | Swipe photo verdictsFlagged vision-check photos one at a time: swipe right PASS, left FAIL. | Parked | Demo · Phone | none | PhotoReview · VerdictButton |
| 25 | Ping me when it's doneStart an export or print run, close the tab; your device pings when it finishes.Frank: Frank: more for a consumer app. | Parked | Demo · Phone | H25 | JobToast · NotificationCentre |
| 26 | Ticket summary + suggested next stepLong tickets open with a 3-line summary and one suggested action. | Parked | Demo · Phone | H26 | Thread · AiSuggest |
| 27 | Anomaly flags on ordersSmall flags where something looks off, such as a chest measurement far from the norm. | Parked | Demo · Phone | H19 (H09) | Banner · DataTable · ColumnTypes |
| 28 | Health strip for super adminsOne thin line: jobs waiting, jobs failed, late scheduled tasks. | Parked | Demo · Phone | H27 | KpiTile · AppShell |
| 29 | Out of stock? Closest cloths in stockWhen a cloth is out, show the three nearest in-stock cloths. | Parked | Demo · Phone | H28 | ClothPicker · SwatchPicker |
Backend helpers the picks need
| Helper | Needed by | Request |
|---|---|---|
H01 | R1 saved views, density, recent / pinned · adv #08 My home | file now |
H02 | R1 activity side panel | file now |
H03 | R1 conflict banner (verify the 409 on staging) | file now |
H04 | adv #05 One search (header search bar / ⌘K) | file now |
H06 | adv #08 My home, adv #21 Totals for the filtered set | file now |
H16 | adv #13 Impact before a bulk write | file now |
H17 | adv #14 Undo a whole bulk run | file now |
H21 | adv #17 Paste from Excel | file now |
H22 | adv #19 Trends inside the table (maybe) | decide later |
Backlog, nothing adopted needs them: H05, H07, H08, H09, H10, H11, H12, H13, H14, H15, H18, H19, H20, H23, H24, H25, H26, H27, H28.