bitboss-ui 3.0.0-beta.4 → 3.0.0-beta.41

package/dist/ai/recipes/nuxt/inline-edit-workspace.md

@@ -5,7 +5,7 @@ summary: Linear-style sprint backlog for Nuxt where every cell autosaves — opt
 
 # Recipe: Inline-Edit Workspace (Nuxt)
 
-The flagship of pattern **§6.8 — autosave cells**, adapted for **Nuxt**: a
+The flagship of pattern **autosave cells** (see the [inline-edit playbook](../../guides/inline-edit-playbook.md)), adapted for **Nuxt**: a
 Linear-grade sprint backlog where **every cell persists itself and the page
 has no Save button anywhere**. Change a status, retype a title, clear an
 estimate — it is already saved, or it has already rolled back and told you.
@@ -64,7 +64,7 @@ referenced below (`PATCH /api/issues/:id`, `POST /api/issues/:id/duplicate`,
 - **The optimistic overlay is page state, not cell state.** `pending` maps
   `issue.id → { field: value }` on **rung 3** of the state ladder: the grid
   cells, the peek workbench _and the fetch itself_ all read it. This is the
-  deliberate contrast with the one-shot §6.1 status cell (see
+  deliberate contrast with the one-shot status cell (see
   `records-workspace`), whose `saving` flag is a rung-1 local ref — in an
   autosave grid the fetch must also know what is in flight, so the flag
   cannot live inside a cell.
@@ -108,7 +108,7 @@ BacklogWorkspace/
 	EditableTitleCell.vue   ← commit-on-blur text (@change, never v-model)
 	EstimateCell.vue        ← commit-on-change number cell
 	StatusCell.vue          ← editable soft badge (chevron at rest, spinner in flight)
-	PriorityCell.vue        ← same grammar, its own leaf (§6.3: never one EditableCell with a type prop)
+	PriorityCell.vue        ← same grammar, its own leaf (never one EditableCell with a type prop)
 	AssigneeCell.vue        ← provider-backed people picker badge (ONE shared query fn)
 	RowActions.vue          ← … dropdown: duplicate, move to next sprint, delete (confirm)
 	SelectionBar.vue        ← bulk status / bulk assign / bulk move (floating bottom panel)
@@ -123,29 +123,29 @@ needs a modal to edit.
 
 ## Action inventory
 
-| #   | Action                   | Trigger                            | Mechanism                                            |
-| --- | ------------------------ | ---------------------------------- | ---------------------------------------------------- |
-| 1   | New issue                | topbar, the page's one `primary`   | navigation (`to="/issues/new"`)                      |
-| 2   | Page search              | topbar right                       | `filters.search` → URL → `useAsyncData` refetch      |
-| 3   | Switch sprint tab        | href tabs with live counts         | URL + `useAsyncData` refetch                         |
-| 4   | Filter by status         | rail pill                          | `BbSelectPopover` multiple over the static catalog   |
-| 5   | Filter by priority       | rail pill                          | `BbSelectPopover` multiple over the static catalog   |
-| 6   | Filter by assignee       | rail pill                          | the shared people provider, single select            |
-| 7   | Clear filters            | rail right (only when active)      | context `clearFilters()`                             |
-| 8   | Rename issue             | title cell (grid)                  | commit-on-blur `@change` → `persistField('title')`   |
-| 9   | Re-estimate              | estimate cell (grid)               | commit-on-change number → `persistField('estimate')` |
-| 10  | Change status            | status badge (grid **and** peek)   | pick = commit; spinner in the chevron (§6.8)         |
-| 11  | Change priority          | priority badge (grid **and** peek) | same grammar, its own leaf                           |
-| 12  | Reassign                 | assignee badge (grid **and** peek) | async people search; one shared provider             |
-| 13  | Peek issue               | issue ref cell                     | `peekIssue(id)` → shell stack                        |
-| 14  | Duplicate                | row `…` dropdown                   | context action + toast                               |
-| 15  | Move to next sprint      | row `…` **and** bulk bar           | `moveToNextSprint` / `bulkMoveToNextSprint`          |
-| 16  | Delete                   | row `…`, peek footer               | destructive behind `useConfirm`                      |
-| 17  | Bulk set status          | bottom panel picker                | `bulkStatus` on `table.selected`                     |
-| 18  | Bulk assign              | bottom panel picker                | `bulkAssign` on `table.selected`                     |
-| 19  | Select rows / select all | table checkboxes                   | table context                                        |
-| 20  | Open full issue          | peek footer                        | navigation (`to="/issues/:id"`)                      |
-| 21  | Close peek               | shell chrome                       | shell stack close                                    |
+| #   | Action                   | Trigger                            | Mechanism                                              |
+| --- | ------------------------ | ---------------------------------- | ------------------------------------------------------ |
+| 1   | New issue                | topbar, the page's one `primary`   | navigation (`to="/issues/new"`)                        |
+| 2   | Page search              | topbar right                       | `filters.search` → URL → `useAsyncData` refetch        |
+| 3   | Switch sprint tab        | href tabs with live counts         | URL + `useAsyncData` refetch                           |
+| 4   | Filter by status         | rail pill                          | `BbSelectPopover` multiple over the static catalog     |
+| 5   | Filter by priority       | rail pill                          | `BbSelectPopover` multiple over the static catalog     |
+| 6   | Filter by assignee       | rail pill                          | the shared people provider, single select              |
+| 7   | Clear filters            | rail right (only when active)      | context `clearFilters()`                               |
+| 8   | Rename issue             | title cell (grid)                  | commit-on-blur `@change` → `persistField('title')`     |
+| 9   | Re-estimate              | estimate cell (grid)               | commit-on-change number → `persistField('estimate')`   |
+| 10  | Change status            | status badge (grid **and** peek)   | pick = commit; spinner in the chevron (autosave cells) |
+| 11  | Change priority          | priority badge (grid **and** peek) | same grammar, its own leaf                             |
+| 12  | Reassign                 | assignee badge (grid **and** peek) | async people search; one shared provider               |
+| 13  | Peek issue               | issue ref cell                     | `peekIssue(id)` → shell stack                          |
+| 14  | Duplicate                | row `…` dropdown                   | context action + toast                                 |
+| 15  | Move to next sprint      | row `…` **and** bulk bar           | `moveToNextSprint` / `bulkMoveToNextSprint`            |
+| 16  | Delete                   | row `…`, peek footer               | destructive behind `useConfirm`                        |
+| 17  | Bulk set status          | bottom panel picker                | `bulkStatus` on `table.selected`                       |
+| 18  | Bulk assign              | bottom panel picker                | `bulkAssign` on `table.selected`                       |
+| 19  | Select rows / select all | table checkboxes                   | table context                                          |
+| 20  | Open full issue          | peek footer                        | navigation (`to="/issues/:id"`)                        |
+| 21  | Close peek               | shell chrome                       | shell stack close                                      |
 
 Rows 8–12 are the recipe's reason to exist: five editable fields of three
 different control kinds, each persisting itself, two of them able to be in
@@ -204,10 +204,10 @@ export default defineNuxtConfig({
 .bb-badge.bb-badge--soft-amber,
 .bb-badge.bb-badge--soft-red {
 	--bg: color-mix(in oklab, var(--accent) 15%, var(--bb-panel));
-	--color: color-mix(in oklab, var(--accent) 80%, var(--bb-text));
-	--border-width: 1px;
+	--fg: color-mix(in oklab, var(--accent) 80%, var(--bb-text));
+	--bw: 1px;
 	--border-color: color-mix(in oklab, var(--accent) 25%, var(--bb-panel));
-	--ring: color-mix(in oklab, var(--accent) 45%, transparent);
+	--ring-color: color-mix(in oklab, var(--accent) 45%, transparent);
 }
 ```
 
@@ -336,7 +336,7 @@ export interface BacklogWorkspaceContext {
 	hasActiveFilters: ComputedRef<boolean>;
 	tab: Ref<SprintTab>;
 	tabCounts: ComputedRef<Record<SprintTab, number>>;
-	// -- The autosave overlay (§6.8) --------------------------------------------
+	// -- The autosave overlay --------------------------------------------
 	/**
 	 * Optimistic values per row PER FIELD, held until the server's own data
 	 * carries them. Reactive. Rung 3 on purpose: the cells, the peek and
@@ -576,6 +576,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			toast({
 				title: `${issue.ref}: ${FIELD_LABELS[key]} updated`,
 				variant: 'success',
+				icon: 'lucide:circle-check',
 				actions: [
 					{
 						text: 'Undo',
@@ -599,6 +600,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			toast({
 				title: `Couldn't save the ${key} of ${issue.ref} — reverted.`,
 				variant: 'destructive',
+				icon: 'lucide:circle-x',
 			});
 		}
 	};
@@ -617,7 +619,11 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			method: 'POST',
 		});
 		await refresh();
-		toast({ title: `Duplicated as ${copy.ref}.`, variant: 'success' });
+		toast({
+			title: `Duplicated as ${copy.ref}.`,
+			variant: 'success',
+			icon: 'lucide:circle-check',
+		});
 	};
 
 	const moveToNextSprint = async (issue: Issue) => {
@@ -626,7 +632,11 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			body: { ids: [issue.id] },
 		});
 		await refresh();
-		toast({ title: `${issue.ref} moved to Sprint 25.`, variant: 'success' });
+		toast({
+			title: `${issue.ref} moved to Sprint 25.`,
+			variant: 'success',
+			icon: 'lucide:circle-check',
+		});
 	};
 
 	const deleteIssue = async (issue: Issue) => {
@@ -640,7 +650,11 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		if (!ok) return;
 		await $fetch(`/api/issues/${issue.id}`, { method: 'DELETE' });
 		await refresh();
-		toast({ title: `${issue.ref} deleted.`, variant: 'success' });
+		toast({
+			title: `${issue.ref} deleted.`,
+			variant: 'success',
+			icon: 'lucide:circle-check',
+		});
 	};
 
 	// Bulk actions read and clear the coopted table context themselves.
@@ -661,6 +675,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${ids.length} issues moved to ${label}.`,
 			variant: 'success',
+			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -675,6 +690,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${ids.length} issues assigned to ${assignee.name}.`,
 			variant: 'success',
+			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -689,6 +705,7 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${ids.length} issues moved to Sprint 25.`,
 			variant: 'success',
+			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -804,7 +821,6 @@ export function useBacklogWorkspace(): BacklogWorkspaceContext {
 			<BbTable
 				id="backlog-table"
 				v-model:highlighted="highlightedIssue"
-				actions
 				caption="Sprint 24 backlog"
 				:columns="columns"
 				compact
@@ -854,7 +870,7 @@ export function useBacklogWorkspace(): BacklogWorkspaceContext {
 					<RowActions :issue="item" />
 				</template>
 
-				<template #no-data>
+				<template #empty>
 					<div class="flex flex-col items-center gap-2 p-6 text-center">
 						<p class="text-sm text-[color:var(--bb-text-muted)]">
 							No issues match
@@ -1180,7 +1196,7 @@ const commit = (event: Event) => {
 			trailing chevron says "this can change" and sits inside the button
 			with the label; while THIS field's save runs the badge's `loading`
 			swaps the spinner into the chevron's place — same size, nothing
-			shifts. Unlike the one-shot §6.1 cell there is no local `saving` ref:
+			shifts. Unlike the one-shot status cell there is no local `saving` ref:
 			the flag comes from the context overlay, because in an autosave grid
 			the fetch must also know what's in flight. -->
 			<BbBadge
@@ -1221,12 +1237,12 @@ const label = computed(
 
 <style scoped>
 /* Open = the badge's own hue, deepened, plus its variant ring — derived from
-   the badge's --color/--ring tokens so every status keeps its identity
+   the badge's --fg/--ring-color tokens so every status keeps its identity
    instead of washing out to a neutral. */
 .status-cell--open {
-	--bg: color-mix(in oklab, var(--color) 24%, var(--bb-panel));
-	--border-color: color-mix(in oklab, var(--color) 45%, var(--bb-panel));
-	box-shadow: 0 0 0 var(--bb-ring-size) var(--ring);
+	--bg: color-mix(in oklab, var(--fg) 24%, var(--bb-panel));
+	--border-color: color-mix(in oklab, var(--fg) 45%, var(--bb-panel));
+	box-shadow: 0 0 0 var(--bb-ring-size) var(--ring-color);
 }
 </style>
 ```
@@ -1236,7 +1252,7 @@ const label = computed(
 ```vue
 <!-- BacklogWorkspace/PriorityCell.vue -->
 <template>
-	<!-- Same grammar as StatusCell, its OWN leaf (§6.3): one `EditableCell`
+	<!-- Same grammar as StatusCell, its OWN leaf: one `EditableCell`
 	with a `type` prop growing a renderer switch is the API-monster seed. The
 	sixty percent that repeats is cheaper than the prop that accumulates. -->
 	<BbSelectPopover
@@ -1294,9 +1310,9 @@ const label = computed(
 /* Open = the badge's own hue, deepened, plus its variant ring (see
    StatusCell). */
 .priority-cell--open {
-	--bg: color-mix(in oklab, var(--color) 24%, var(--bb-panel));
-	--border-color: color-mix(in oklab, var(--color) 45%, var(--bb-panel));
-	box-shadow: 0 0 0 var(--bb-ring-size) var(--ring);
+	--bg: color-mix(in oklab, var(--fg) 24%, var(--bb-panel));
+	--border-color: color-mix(in oklab, var(--fg) 45%, var(--bb-panel));
+	box-shadow: 0 0 0 var(--bb-ring-size) var(--ring-color);
 }
 </style>
 ```
@@ -1359,9 +1375,9 @@ const assignee = computed(() => ctx.valueOf(props.issue, 'assignee'));
 /* Open = the badge's own hue, deepened, plus its variant ring (see
    StatusCell). */
 .assignee-cell--open {
-	--bg: color-mix(in oklab, var(--color) 24%, var(--bb-panel));
-	--border-color: color-mix(in oklab, var(--color) 45%, var(--bb-panel));
-	box-shadow: 0 0 0 var(--bb-ring-size) var(--ring);
+	--bg: color-mix(in oklab, var(--fg) 24%, var(--bb-panel));
+	--border-color: color-mix(in oklab, var(--fg) 45%, var(--bb-panel));
+	box-shadow: 0 0 0 var(--bb-ring-size) var(--ring-color);
 }
 </style>
 ```
@@ -1549,7 +1565,7 @@ const clearSelection = () => {
 		<!-- Description. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Description
 			</h3>
@@ -1561,7 +1577,7 @@ const clearSelection = () => {
 		<!-- Activity feed. -->
 		<section class="flex flex-col gap-1.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				Activity
 			</h3>
@@ -1654,7 +1670,7 @@ const longDate = (value: string) =>
   that.** Three consumers force it up the ladder: the cells read it to render
   optimistically, the peek reads it so the second call site of every cell
   agrees with the first, and the `useAsyncData` transform reads it to retire
-  confirmed fields. Contrast the records workspace's §6.1 status cell, where
+  confirmed fields. Contrast the records workspace's one-shot status cell, where
   `saving` is a rung-1 local `ref` around one awaited action — correct
   **there** because nothing but that one cell ever cares. Here the fetch must
   know what's in flight, so a local flag physically cannot work; that is why
@@ -1672,7 +1688,7 @@ const longDate = (value: string) =>
   refetch lands. Retiring per-field (only values the response confirms) means
   a slow title save survives a fast status save's reload untouched. The
   comment on the `transform` ships with the recipe on purpose: this is the
-  §6.8 bug everyone writes once.
+  autosave bug everyone writes once.
 - **The URL is the filter store, `useAsyncData` is the fetch.** Filters and
   tab are seeded from `route.query` once at setup, mirrored back with
   `navigateTo` on every change (debounced for free text), and
@@ -1694,7 +1710,7 @@ const longDate = (value: string) =>
   toast success: they are events, not keystrokes.
 - **Five cells, five leaves.** `EditableTitleCell`, `EstimateCell`,
   `StatusCell`, `PriorityCell`, `AssigneeCell` — never one `EditableCell`
-  with a `type` prop growing a renderer switch (§6.3/§4). Each takes exactly
+  with a `type` prop growing a renderer switch (one leaf per cell type). Each takes exactly
   one data prop (`issue`) and gets its behavior from the context.
 - **Typed inputs commit on `@change`; pickers commit on pick.** The text and
   number cells bind `:model-value` down and read the committed value from the

package/dist/ai/recipes/nuxt/layout-scaffold.md

@@ -648,7 +648,11 @@ paints a selected row but opens nothing is a dead affordance.
 
 `.plain-link`, `.table-flush` and the row tints are project CSS by design (the
 library ships no such classes), but they are the _same_ project CSS on every
-workspace page. Author them **once**, next to the layout, and import that file
+workspace page. (`.table-flush`'s edge-inset rules address the table through
+its grid containers — `> .bb-table__table > .bb-table__body > [role='row'] >
+:first-child` — never through `table`/`tbody`/`tr`/`td`, which the table no
+longer renders; the canonical block is in the BbTable guide § Styling hooks.)
+Author them **once**, next to the layout, and import that file
 from the app entry — not per page, and never copy-pasted into a page's
 `<style scoped>`, which is how three pages end up with three underline colours.
 
@@ -691,7 +695,7 @@ theme and dark mode without a second dark block. See
 A keyboard-driven screen needs its shortcuts discoverable, and the reflex is an
 inline hint bar above the table. That bar is permanent chrome for information
 read once. Default to a **topbar affordance**: a keyboard icon in
-`#topbar-actions` opening a `BbPopover` that lists the bindings.
+`#topbar` opening a `BbPopover` that lists the bindings.
 
 ```vue
 <BbPopover>

package/dist/ai/recipes/nuxt/onboarding.md

@@ -454,7 +454,11 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 	const completeStep = async (id: StepId) => {
 		const title = step(id).title;
 		await persistStatus(id, 'complete');
-		toast({ title: `"${title}" checked off.`, variant: 'success' });
+		toast({
+			title: `"${title}" checked off.`,
+			variant: 'success',
+			icon: 'lucide:circle-check',
+		});
 		openNextTodo(id);
 	};
 
@@ -480,6 +484,7 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 			toast({
 				title: `${integration.name} ${next ? 'connected' : 'disconnected'}.`,
 				variant: 'success',
+				icon: 'lucide:circle-check',
 			});
 			if (next) await persistStatus('integrations', 'complete');
 		} catch {
@@ -487,6 +492,7 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 			toast({
 				title: `Could not ${next ? 'connect' : 'disconnect'} ${integration.name}.`,
 				variant: 'destructive',
+				icon: 'lucide:circle-x',
 			});
 		} finally {
 			integration.busy = false;
@@ -502,13 +508,18 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 		toast({
 			title: `${emails.length} invitation${emails.length === 1 ? '' : 's'} sent.`,
 			variant: 'success',
+			icon: 'lucide:circle-check',
 		});
 	};
 
 	const createProject = async (draft: ProjectDraft) => {
 		await $fetch('/api/onboarding/project', { method: 'POST', body: draft });
 		await persistStatus('first-project', 'complete');
-		toast({ title: `${draft.name} created.`, variant: 'success' });
+		toast({
+			title: `${draft.name} created.`,
+			variant: 'success',
+			icon: 'lucide:circle-check',
+		});
 	};
 
 	const importCustomers = async (file: File) => {
@@ -531,6 +542,7 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 			toast({
 				title: `${result.imported} customers imported.`,
 				variant: 'success',
+				icon: 'lucide:circle-check',
 			});
 		} finally {
 			importState.uploading = false;
@@ -550,10 +562,15 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 					? 'Payment reminders are on.'
 					: 'Payment reminders turned off.',
 				variant: 'success',
+				icon: 'lucide:circle-check',
 			});
 		} catch {
 			reminders.enabled = !enabled;
-			toast({ title: 'Could not update reminders.', variant: 'destructive' });
+			toast({
+				title: 'Could not update reminders.',
+				variant: 'destructive',
+				icon: 'lucide:circle-x',
+			});
 		}
 	};
 
@@ -563,7 +580,11 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 			method: 'PATCH',
 			body: { enabled: reminders.enabled, cadence },
 		});
-		toast({ title: 'Reminder schedule updated.', variant: 'success' });
+		toast({
+			title: 'Reminder schedule updated.',
+			variant: 'success',
+			icon: 'lucide:circle-check',
+		});
 	};
 
 	const dismissOnboarding = async () => {
@@ -579,6 +600,7 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 		toast({
 			title: 'Onboarding dismissed. Find it again under Settings → Setup.',
 			variant: 'success',
+			icon: 'lucide:circle-check',
 		});
 		await navigateTo('/dashboard');
 	};
@@ -664,8 +686,8 @@ export function useOnboardingWorkspace(): OnboardingWorkspaceContext {
 					:model-value="ctx.activeStep.value === item.id"
 					@update:model-value="(open) => ctx.openStep(open ? item.id : null)"
 				>
-					<template #header="{ value }">
-						<StepHeader :open="value" :step="item" />
+					<template #header="{ open }">
+						<StepHeader :open="open" :step="item" />
 					</template>
 					<div class="flex flex-col gap-4 px-11 pb-4">
 						<component :is="stepBodies[item.id]" />
@@ -808,7 +830,7 @@ const ctx = useOnboardingWorkspace();
 		</span>
 		<span
 			v-if="step.status === 'skipped'"
-			class="shrink-0 text-xs uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+			class="shrink-0 text-xs tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 		>
 			Skipped
 		</span>
@@ -1414,7 +1436,7 @@ const cadences: { value: ReminderCadence; label: string }[] = [
 		<!-- What you'll get. -->
 		<section class="flex flex-col gap-2.5">
 			<h3
-				class="text-xs font-semibold uppercase tracking-wide text-[color:var(--bb-text-muted)]"
+				class="text-xs font-semibold tracking-wide text-[color:var(--bb-text-muted)] uppercase"
 			>
 				What you'll get
 			</h3>