bitboss-ui 3.0.0-beta.64 → 3.0.0-beta.66

package/dist/ai/recipes/nuxt/records-workspace.md

@@ -1,13 +1,13 @@
 ---
 title: Records Workspace (Nuxt)
-summary: Full-anatomy invoices workspace for Nuxt — breadcrumbs + page search, chip filter rail (one Filters menu + editable filter chips), href tabs with counts, one-click status cells, bulk bottom panel, and a stacked peek sidebar, filters URL-synced and data fetched with useAsyncData, all through one coopting page context.
+summary: Full-anatomy invoices workspace for Nuxt — breadcrumbs + page search, chip filter rail (one Filters menu + editable filter chips), URL status strip with counts, one-click status cells, bulk bottom panel, and a stacked peek sidebar, filters URL-synced and data fetched with useAsyncData, all through one coopting page context.
 ---
 
 # Recipe: Records Workspace (Nuxt)
 
 The flagship advanced-page recipe adapted for **Nuxt**: the same Stripe-
 invoices × Linear list workspace — app chrome, breadcrumbs + page search,
-chip filter rail (one Filters menu + editable filter chips), href tabs with live counts, a dense server-paged table, a
+chip filter rail (one Filters menu + editable filter chips), a URL status strip with live counts, a dense server-paged table, a
 floating bulk-action bar, and a stacked peek sidebar — but filters and the
 active tab live in the URL and the list loads through `useAsyncData`
 watching `route.query`. Anatomy, components, the context shape, copy and
@@ -25,7 +25,6 @@ Sibling recipes: [Vue](../vue/records-workspace.md) ·
   those files before anything below, and do not hand-roll replacements —
   the peek stack, the close semantics and the sidebar's out-of-flow
   behaviour are all load-bearing here.
-- `<BbHost />` mounted once in `app.vue` — never in a page.
 - Each toast and alert variant's icon set once in the build config; the
   code below passes no `icon` for them:
   `toastVariants: { success: { icon: 'lucide:circle-check' }, destructive: { icon: 'lucide:circle-x' } }`
@@ -53,7 +52,7 @@ Sibling recipes: [Vue](../vue/records-workspace.md) ·
 ## Key ideas
 
 - **One coopting page context.** `provideInvoicesWorkspace()` joins the
-  page-shell stack and the table context once, owns filters/tab and when the
+  page-shell stack and the table handle once, owns filters/tab and when the
   record-payment dialog opens, and exposes complete actions. Every leaf calls `useInvoicesWorkspace()`
   and nothing else — zero prop drilling anywhere on the page.
 - **Filters and tab live in the URL, not in local refs.** They are seeded
@@ -62,7 +61,7 @@ Sibling recipes: [Vue](../vue/records-workspace.md) ·
 - **`useAsyncData` watches `route.query`.** That single watch source is
   the whole refetch trigger — filters, tab and page changes all funnel
   through the URL first, so there is exactly one fetch path.
-- **The table keeps its selection/paging context.** `useBbTableContext`
+- **The table keeps its selection/paging handle.** `useBbTable`
   still owns `page`/`perPage`/`selected`/`totalItems` by id — only the _items_
   become a resolved array (`:items` + `:loading`) instead of an items
   function, since the page now owns the fetch. Select-all is the "all across
@@ -87,7 +86,7 @@ Sibling recipes: [Vue](../vue/records-workspace.md) ·
   selectable/searchable group (Status, Customer); one chip per APPLIED facet
   — never one per value — renders below it, each a small `BbDropdown` scoped
   to that same group via an external `activator` ref, reading its label from
-  `useBbDropdownContext` so it never re-fetches what the menu already
+  `useBbDropdown` so it never re-fetches what the menu already
   resolved. **Never** `BbSelectPopover` + an imperative `ref.open()`: it
   exposes nothing to call, and its floating mode closes an
   `sr-only`/off-screen activator the instant it opens. Due date is a
@@ -140,7 +139,7 @@ Chrome assumed from the guides: [App Layout](../../guides/app-layout.md)
 | 3b  | Filter due date          | date-range pill                                | `BbDatePickerInput` range — not a Filters-menu facet                                 |
 | 4   | Clear a filter           | chip clear button / date pill                  | badge `@click:clear` (status/customer) or input `clearable` (due)                    |
 | 4b  | Clear every filter       | the rail's last chip, while a filter is active | `Clear all` badge → `ctx.clearFilters`                                               |
-| 5   | Switch tab               | href tabs with counts                          | URL + `useAsyncData` refetch                                                         |
+| 5   | Switch tab               | URL status strip with counts                   | URL + `useAsyncData` refetch                                                         |
 | 6   | Peek invoice             | row click, peek lists                          | `v-model:highlighted` / `peekInvoice(id)` → shell stack                              |
 | 7   | Peek customer (stacked)  | customer cell / inside peeks                   | `stackCustomer(id)` → back arrow                                                     |
 | 8   | Change status inline     | status badge in row & peek                     | one-click `BbSelectPopover`; the toast's Undo saves the old status back              |
@@ -149,7 +148,7 @@ Chrome assumed from the guides: [App Layout](../../guides/app-layout.md)
 | 10  | Edit / duplicate         | row `…` dropdown                               | navigation (`to`) / context action                                                   |
 | 11  | Archive / delete         | row `…`, bulk bar                              | destructive behind `useConfirm`                                                      |
 | 12  | Bulk mark paid / remind  | floating bottom panel                          | context actions on the table selection: `{ ids }`, or `{ all, unselected, filters }` |
-| 13  | Select rows / select all | table checkboxes                               | table context                                                                        |
+| 13  | Select rows / select all | table checkboxes                               | table handle                                                                         |
 | 14  | Open full invoice        | invoice number cell, peek footer               | navigation (`to="/invoices/:id"`)                                                    |
 | 15  | Back / close peek        | shell chrome                                   | shell stack pop / close                                                              |
 
@@ -187,11 +186,11 @@ import {
 	type Ref,
 } from 'vue';
 import {
-	useBbDialogContext,
-	useBbTableContext,
+	useBbDialog,
+	useBbTable,
 	useConfirm,
 	useToast,
-	type BbTableContext,
+	type BbTableHandle,
 	type BadgeVariantType,
 } from 'bitboss-ui';
 import {
@@ -253,7 +252,7 @@ export const PAYMENT_METHOD_OPTIONS = [
 ];
 
 export interface InvoiceFilters {
-	search: string;
+	search: string | null;
 	status: InvoiceStatus[];
 	customerId: number | null;
 	/**
@@ -270,9 +269,9 @@ type InvoiceListResponse = {
 };
 
 export interface InvoicesWorkspaceContext {
-	// -- Coopted contexts ------------------------------------------------------
+	// -- Coopted contexts and handles ------------------------------------------
 	shell: PageShellContext<PeekItem>;
-	table: BbTableContext;
+	table: BbTableHandle;
 	// -- Page-owned state ------------------------------------------------------
 	filters: InvoiceFilters;
 	hasActiveFilters: ComputedRef<boolean>;
@@ -314,12 +313,26 @@ const toArray = (value: unknown): string[] | null => {
 
 export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 	const { toast } = useToast();
+	// A write that fails tells the user instead of escaping as an
+	// `Uncaught (in promise)`: the action resolves, the page stays as it was.
+	const failSoft =
+		<A extends unknown[]>(action: (...args: A) => Promise<unknown>) =>
+		async (...args: A) => {
+			try {
+				await action(...args);
+			} catch {
+				toast({
+					title: 'That did not go through. Try again.',
+					variant: 'destructive',
+				});
+			}
+		};
 	const { confirm } = useConfirm();
 	const route = useRoute();
 
-	// -- Coopt the specific contexts: once, here, for the whole page. ----------
+	// -- Coopt the shell and the table handle: once, for the whole page. -------
 	const shell = usePageShellContext<PeekItem>();
-	const table = useBbTableContext('invoices-table', { perPage: 25 });
+	const table = useBbTable('invoices-table', { perPage: 25 });
 
 	// -- Filters + tab: seeded from the URL, the single source of truth. -------
 	const filters = reactive<InvoiceFilters>({
@@ -332,7 +345,7 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 
 	const hasActiveFilters = computed(
 		() =>
-			filters.search !== '' ||
+			!!filters.search ||
 			filters.status.length > 0 ||
 			filters.customerId !== null ||
 			filters.dueBetween.length > 0
@@ -407,7 +420,7 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 	// payment with the invoice as `data` (the peek's button through
 	// `v-bb-dialog`, the row menu through this), and it closes itself once the
 	// payment is recorded. Nothing on the page renders it or reads its state.
-	const paymentDialog = useBbDialogContext<Invoice>(RecordPaymentDialog);
+	const paymentDialog = useBbDialog<Invoice>(RecordPaymentDialog);
 	const openRecordPayment = (invoice: Invoice) => {
 		void paymentDialog.show(invoice);
 	};
@@ -433,32 +446,34 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 		shell.stackItem({ type: 'customer', id, title: customerTitle(id) });
 
 	// -- Actions --------------------------------------------------------------------
-	const updateStatus = async (invoice: Invoice, status: InvoiceStatus) => {
-		// Undoable: the pre-edit value comes from the row snapshot, and Undo
-		// is the same save back to it — a real round-trip, not a guess.
-		const previous = invoice.status;
-		const save = async (value: InvoiceStatus) => {
-			await $fetch(`/api/invoices/${invoice.id}`, {
-				method: 'PATCH',
-				body: { status: value },
+	const updateStatus = failSoft(
+		async (invoice: Invoice, status: InvoiceStatus) => {
+			// Undoable: the pre-edit value comes from the row snapshot, and Undo
+			// is the same save back to it — a real round-trip, not a guess.
+			const previous = invoice.status;
+			const save = async (value: InvoiceStatus) => {
+				await $fetch(`/api/invoices/${invoice.id}`, {
+					method: 'PATCH',
+					body: { status: value },
+				});
+				await refresh();
+			};
+			await save(status);
+			toast({
+				title: `${invoice.number} moved to ${status}.`,
+				variant: 'success',
+				actions: [
+					{
+						text: 'Undo',
+						'prepend:icon': 'lucide:undo-2',
+						onClick: () => save(previous),
+					},
+				],
 			});
-			await refresh();
-		};
-		await save(status);
-		toast({
-			title: `${invoice.number} moved to ${status}.`,
-			variant: 'success',
-			actions: [
-				{
-					text: 'Undo',
-					'prepend:icon': 'lucide:undo-2',
-					onClick: () => save(previous),
-				},
-			],
-		});
-	};
+		}
+	);
 
-	const updateDueDate = async (invoice: Invoice, dueDate: string) => {
+	const updateDueDate = failSoft(async (invoice: Invoice, dueDate: string) => {
 		// Undoable: the pre-edit value comes from the row snapshot, and Undo
 		// is the same save back to it — a real round-trip, not a guess.
 		const previous = invoice.dueDate;
@@ -481,9 +496,9 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 				},
 			],
 		});
-	};
+	});
 
-	const duplicateInvoice = async (invoice: Invoice) => {
+	const duplicateInvoice = failSoft(async (invoice: Invoice) => {
 		const copy = await $fetch<Invoice>(
 			`/api/invoices/${invoice.id}/duplicate`,
 			{
@@ -495,30 +510,32 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 			title: `Duplicated as ${copy.number}.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const recordPayment = async (invoice: Invoice, draft: PaymentDraft) => {
-		await $fetch(`/api/invoices/${invoice.id}/payments`, {
-			method: 'POST',
-			body: draft,
-		});
-		await refresh();
-		toast({
-			title: `Payment recorded on ${invoice.number}.`,
-			variant: 'success',
-		});
-	};
+	const recordPayment = failSoft(
+		async (invoice: Invoice, draft: PaymentDraft) => {
+			await $fetch(`/api/invoices/${invoice.id}/payments`, {
+				method: 'POST',
+				body: draft,
+			});
+			await refresh();
+			toast({
+				title: `Payment recorded on ${invoice.number}.`,
+				variant: 'success',
+			});
+		}
+	);
 
-	const archiveInvoice = async (invoice: Invoice) => {
+	const archiveInvoice = failSoft(async (invoice: Invoice) => {
 		await $fetch(`/api/invoices/${invoice.id}/archive`, { method: 'PATCH' });
 		await refresh();
 		toast({
 			title: `${invoice.number} archived.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const deleteInvoice = async (invoice: Invoice) => {
+	const deleteInvoice = failSoft(async (invoice: Invoice) => {
 		const ok = await confirm({
 			variant: 'destructive',
 			title: 'Delete invoice',
@@ -533,9 +550,9 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 			title: `${invoice.number} deleted.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	// Bulk actions read and clear the coopted table context themselves. The
+	// Bulk actions read and clear the coopted table handle themselves. The
 	// header checkbox is BbTable's "all across pages" select-all: it enumerates
 	// no ids, so the body becomes `{ all, unselected, filters }` — what is on
 	// screen minus the exceptions — and the count is the total minus those
@@ -563,7 +580,7 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 		table.all.value = false;
 	};
 
-	const bulkMarkPaid = async () => {
+	const bulkMarkPaid = failSoft(async () => {
 		const count = selectedCount.value;
 		await $fetch('/api/invoices/bulk/mark-paid', {
 			method: 'PATCH',
@@ -575,9 +592,9 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 			title: `${count} invoices marked as paid.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const bulkRemind = async () => {
+	const bulkRemind = failSoft(async () => {
 		const count = selectedCount.value;
 		await $fetch('/api/invoices/bulk/remind', {
 			method: 'POST',
@@ -588,9 +605,9 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 			title: `Reminder sent for ${count} invoices.`,
 			variant: 'success',
 		});
-	};
+	});
 
-	const bulkArchive = async () => {
+	const bulkArchive = failSoft(async () => {
 		const count = selectedCount.value;
 		const ok = await confirm({
 			variant: 'destructive',
@@ -610,7 +627,7 @@ export function provideInvoicesWorkspace(): InvoicesWorkspaceContext {
 			title: `${count} invoices archived.`,
 			variant: 'success',
 		});
-	};
+	});
 
 	const ctx: InvoicesWorkspaceContext = {
 		shell,
@@ -692,35 +709,39 @@ export function useInvoicesWorkspace(): InvoicesWorkspaceContext {
 		</template>
 
 		<div class="flex flex-col gap-3 p-4">
+			<!-- The page owns one h1. The breadcrumb is the visible title, so the
+			     heading is for screen readers only. -->
+			<h1 class="sr-only">Invoices</h1>
 			<FilterRail />
 
-			<!-- Tabs as URL filters: href updates the query, the key feeds the
-			     fetch. Counts come from the server on every fetch. -->
-			<BbTabs
+			<!-- The status filter: one value over one table, so a radio group
+			     with the tabs look (a tablist would promise panels). The context
+			     keeps it in `?tab=`; the counts come from the server on every
+			     fetch. -->
+			<BbRadioGroup
 				v-model="ctx.tab.value"
 				compact
+				hide-legend
 				:items="[
 					{
 						value: 'all',
 						label: `All · ${ctx.tabCounts.value.all}`,
-						href: '?tab=all',
 					},
 					{
 						value: 'outstanding',
 						label: `Outstanding · ${ctx.tabCounts.value.outstanding}`,
-						href: '?tab=outstanding',
 					},
 					{
 						value: 'paid',
 						label: `Paid · ${ctx.tabCounts.value.paid}`,
-						href: '?tab=paid',
 					},
 					{
 						value: 'archived',
 						label: `Archived · ${ctx.tabCounts.value.archived}`,
-						href: '?tab=archived',
 					},
 				]"
+				legend="Status"
+				variant="pill"
 			/>
 
 			<BbTable
@@ -797,7 +818,7 @@ export function useInvoicesWorkspace(): InvoicesWorkspaceContext {
 				</template>
 			</BbTable>
 
-			<!-- Joins the table context by id: no page/totalPages wiring at all. -->
+			<!-- Joins the table by id: no page/totalPages wiring at all. -->
 			<BbPagination table-id="invoices-table" />
 		</div>
 
@@ -830,8 +851,8 @@ import {
 	BbBreadcrumbs,
 	BbButton,
 	BbPagination,
+	BbRadioGroup,
 	BbTable,
-	BbTabs,
 	BbTextInput,
 } from 'bitboss-ui';
 import PageShell from '~/components/PageShell.vue';
@@ -965,7 +986,9 @@ const rowClass = (item: Invoice) =>
 		<!-- Clear-all is the LAST CHIP, not a ghost button floated to the far
 		     end by `ml-auto`: it acts on the chips, so it belongs in their row
 		     and at their scale. Keep the ghost "Clear filters" for the empty
-		     state (`#empty`), where there are no chips to sit beside. -->
+		     state (`#empty`), where there are no chips to sit beside. Its text
+		     stays plain: one control per action. A BbBadgeButton body would be
+		     a second tab stop doing what the × already does. -->
 		<BbBadge
 			v-if="ctx.hasActiveFilters.value"
 			clearable
@@ -1047,7 +1070,7 @@ const searchCustomers = async ({
 };
 
 // Static enum facet: item text resolves synchronously, so its chip reads
-// `useBbDropdownContext` (in FilterChip.vue) with zero extra fetch.
+// `useBbDropdown` (in FilterChip.vue) with zero extra fetch.
 const statusGroup: BbDropdownItem = {
 	id: 'status',
 	label: 'Status',
@@ -1143,13 +1166,13 @@ import {
 	BbBadgeButton,
 	BbDropdown,
 	BbDropdownGroup,
-	useBbDropdownContext,
+	useBbDropdown,
 } from 'bitboss-ui';
 import type { BbDropdownItem } from 'bitboss-ui';
 
 const props = defineProps<{
 	/** Matches the group's `id` in the Filters menu, and its entry in
-	 * `useBbDropdownContext('invoice-filters').groups`. */
+	 * `useBbDropdown('invoice-filters').groups`. */
 	groupKey: string;
 	/** Static fallback/prefix text — the group itself sets `hideLabel`. */
 	label: string;
@@ -1171,7 +1194,7 @@ const chipRef = useTemplateRef('chipRef');
 // this second dropdown repeated the menu's `prefill: true` verbatim, each
 // seeded pipeline facet would be fetched TWICE on page load, and the chip's
 // copy of the result would feed nothing (the label below comes from the
-// menu's resolution via context). `'interaction'` defers this copy's fetch
+// menu's resolution via `useBbDropdown`). `'interaction'` defers this copy's fetch
 // to the moment the chip's dropdown is actually opened. For static array
 // facets the override is inert — arrays resolve synchronously either way.
 const chipGroup = computed<BbDropdownItem>(() => ({
@@ -1183,7 +1206,7 @@ const chipGroup = computed<BbDropdownItem>(() => ({
 // pipeline group needs `prefill: true` (set on the MENU's copy of `group` by
 // FilterRail) so this never sits on a bare id/value while the menu's own
 // submenu is unopened.
-const dropdownFilters = useBbDropdownContext('invoice-filters');
+const dropdownFilters = useBbDropdown('invoice-filters');
 const chipText = computed(() => {
 	const options =
 		dropdownFilters.groups.value[props.groupKey]?.selectedOptions ?? [];
@@ -1375,12 +1398,12 @@ import {
 	BbCalendar,
 	BbDatePickerInput,
 	BbOffCanvas,
-	useBbOffCanvasContext,
+	useBbOffCanvas,
 } from 'bitboss-ui';
 import { useInvoicesWorkspace } from './context';
 
 const ctx = useInvoicesWorkspace();
-const sheet = useBbOffCanvasContext('due-date-sheet');
+const sheet = useBbOffCanvas('due-date-sheet');
 
 // A draft, committed on Apply: picking a range does not refetch per tap.
 const from = ref<string | null>(null);
@@ -1891,7 +1914,7 @@ import {
 	BbForm,
 	BbNumberInput,
 	BbSelect,
-	useBbDialogContext,
+	useBbDialog,
 } from 'bitboss-ui';
 import { PAYMENT_METHOD_OPTIONS, useInvoicesWorkspace } from './context';
 import type { Invoice, PaymentDraft } from '~/types';
@@ -1899,7 +1922,7 @@ import type { Invoice, PaymentDraft } from '~/types';
 const ctx = useInvoicesWorkspace();
 
 // The invoice the opener handed over: on demand it is already here in setup.
-const { data: invoice } = useBbDialogContext<Invoice>('record-payment');
+const { data: invoice } = useBbDialog<Invoice>('record-payment');
 
 // Default to paying the remaining balance today.
 const draft = reactive<PaymentDraft>({
@@ -1923,7 +1946,7 @@ const draft = reactive<PaymentDraft>({
   `navigateTo` on every change (debounced for free text), and
   `useAsyncData('invoices', …, { watch: [() => route.query, table.page] })`
   is the single refetch trigger — there is exactly one place data loads.
-- **The table context still owns paging and selection.** `useBbTableContext`
+- **The table handle still owns paging and selection.** `useBbTable`
   is unchanged from the Vue recipe: it seeds `perPage`, `BbPagination`
   joins by `table-id`, and the context derives `selectedCount` from
   `selected`/`all`/`unselected` for the `SelectionBar` — only the _items_
@@ -1933,10 +1956,11 @@ const draft = reactive<PaymentDraft>({
   drill-downs push; the shell renders the back arrow when depth > 1. The
   grammar lives in the context — a leaf cannot accidentally nuke the
   stack.
-- **Tabs carry `href` and live counts**, exactly as in the Vue recipe — the
-  client-side pushState they perform keeps `route.query.tab` in sync, which
-  is what seeds `tab` on load and what `useAsyncData`'s `route.query` watch
-  reacts to.
+- **The strip keeps the URL and live counts**, like the Vue recipe: the
+  context owns the URL, a tab change runs the same `navigateTo` as a filter
+  change, so `route.query.tab` seeds `tab` on load and is what
+  `useAsyncData`'s `route.query` watch reacts to. The strip is a plain
+  `BbRadioGroup` with no URL wiring of its own, so there is one writer.
 - **Internal links use `to`, not `href`.** `to` renders a real Vue Router
   link (client-side navigation); a raw `href` would force a full page
   reload. Every same-app link in this recipe — the primary "New invoice"
@@ -1946,7 +1970,7 @@ const draft = reactive<PaymentDraft>({
   the peek's button opens it with
   `v-bb-dialog="{ component: RecordPaymentDialog, data: invoice }"`, the row
   menu with the context's `openRecordPayment(invoice)` →
-  `useBbDialogContext<Invoice>(RecordPaymentDialog).show(invoice)`, and
+  `useBbDialog<Invoice>(RecordPaymentDialog).show(invoice)`, and
   `<BbHost />` mounts a fresh instance per payment, its invoice already
   readable in setup (so the draft is built there, with no reset). Its form
   is a `BbForm`: while the payment is recorded the dialog refuses Cancel,
@@ -2000,12 +2024,12 @@ const draft = reactive<PaymentDraft>({
   answer until the app has hydrated, so a phone hydrates the input and swaps
   to the sheet right after: no `<ClientOnly>` around the switch.
 
-### Tabs are lifecycle; chips are facets
+### The status strip is lifecycle; chips are facets
 
-The rail and the tab strip answer two different questions, and twinning them is
+The rail and the status strip answer two different questions, and twinning them is
 the fastest way to make a workspace feel arbitrary:
 
-- **Tabs = one lifecycle segment.** Where the record _is_ in its own flow —
+- **The strip = one lifecycle segment.** Where the record _is_ in its own flow —
   All / Outstanding / Paid / Archived. Mutually exclusive, always visible,
   carrying the counts.
 - **Chips = cross-cutting facets.** Anything that can apply to a record in any
@@ -2013,7 +2037,7 @@ the fastest way to make a workspace feel arbitrary:
   applied.
 
 Never expose the same dimension both ways: a `status` facet inside the Filters
-menu next to a status tab strip lets the user set two conflicting answers to one
+menu next to a status strip lets the user set two conflicting answers to one
 question, and neither control shows the other's state. If a dimension deserves
 both roles (a lifecycle you also want to combine), pick one and give the other
 distinct chrome — never the same values with different affordances.