bitboss-ui 3.0.0-beta.53 → 3.0.0-beta.57

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

@@ -33,6 +33,11 @@ recipes.
   [BbSelectPopover](../../BbSelectPopover.md) (§ One popover per table row is
   load-bearing here) · [BbBadge](../../BbBadge.md) (the `loading` /
   `append:icon` interplay).
+- 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' } }`
+  and `alertVariants: { warning: { icon: 'lucide:triangle-alert' }, destructive: { icon: 'lucide:circle-x' } }`
+  ([BbToast § Variant icons](../../BbToast.md#variant-icons)).
 
 Guides: [Inline Edit Playbook](../../guides/inline-edit-playbook.md) (who owns
 the edit — this page is the autosave answer) ·
@@ -43,7 +48,7 @@ label state) · [Page Shell](../../guides/page-shell.md) ·
 Siblings: [vue](../vue/inline-edit-workspace.md) ·
 [inertia](../inertia/inline-edit-workspace.md).
 
-Platform assumptions: `<BbConfirm />` and `<BbToast />` mounted once in
+Platform assumptions: `<BbHost />` mounted once in
 `app.vue` — never in a page; the layout chrome from the guides copied into
 `app/components/` and `app/composables/`. Server routes: `GET /api/issues` (accepts
 `search`, `status[]`, `priority[]`, `assignee`, `tab`, `page`, `perPage`;
@@ -616,7 +621,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			toast({
 				title: `${issue.ref}: ${FIELD_LABELS[key]} updated`,
 				variant: 'success',
-				icon: 'lucide:circle-check',
 				actions: [
 					{
 						text: 'Undo',
@@ -640,7 +644,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 			toast({
 				title: `Couldn't save the ${key} of ${issue.ref} — reverted.`,
 				variant: 'destructive',
-				icon: 'lucide:circle-x',
 			});
 		}
 	};
@@ -668,7 +671,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `Duplicated as ${copy.ref}.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -681,7 +683,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${issue.ref} moved to Sprint 25.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -699,7 +700,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${issue.ref} deleted.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -752,7 +752,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${count} issues moved to ${label}.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -767,7 +766,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${count} issues assigned to ${assignee.name}.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -782,7 +780,6 @@ export function provideBacklogWorkspace(): BacklogWorkspaceContext {
 		toast({
 			title: `${count} issues moved to Sprint 25.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -1158,6 +1155,7 @@ const rowClass = (item: Issue) =>
 		<BbSelectPopover
 			v-model="ctx.filters.assignee"
 			clearable
+			:filter-by="false"
 			item-text="name"
 			:items="searchMembers"
 		>
@@ -1431,6 +1429,7 @@ const label = computed(
 	of its own), matching how the row stores it. -->
 	<BbSelectPopover
 		compact
+		:filter-by="false"
 		item-text="name"
 		:items="searchMembers"
 		:model-value="assignee"
@@ -1573,6 +1572,7 @@ const ctx = useBacklogWorkspace();
 		</BbSelectPopover>
 
 		<BbSelectPopover
+			:filter-by="false"
 			item-text="name"
 			:items="searchMembers"
 			:model-value="null"
@@ -1631,11 +1631,9 @@ const ctx = useBacklogWorkspace();
 <!-- components/BacklogWorkspace/IssuePeek.vue -->
 <template>
 	<div v-if="issue" class="flex flex-col gap-4 text-sm">
-		<!-- Identity header. -->
+		<!-- Identity header: the sidebar title already shows the ref, so the
+		     body opens on the issue's title. -->
 		<header class="flex flex-col gap-1">
-			<p class="text-xs font-medium text-(--bb-text-muted)">
-				{{ issue.ref }}
-			</p>
 			<h2 class="text-base font-semibold">{{ issue.title }}</h2>
 		</header>
 

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

@@ -24,7 +24,12 @@ Sibling recipes: [Vue](../vue/onboarding.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.
-- `<BbConfirm />` and `<BbToast />` mounted once in `app.vue` — never in a page.
+- `<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' } }`
+  and `alertVariants: { warning: { icon: 'lucide:triangle-alert' }, destructive: { icon: 'lucide:circle-x' } }`
+  ([BbToast § Variant icons](../../BbToast.md#variant-icons)).
 - [App Layout](../../guides/app-layout.md) and
   [Page Shell](../../guides/page-shell.md) copied into `app/components/` and `app/composables/`
   per their guides — this page assumes the chrome exists and renders inside
@@ -489,7 +494,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 		toast({
 			title: `"${title}" checked off.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 		openNextTodo(id);
 	};
@@ -516,7 +520,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 			toast({
 				title: `${integration.name} ${next ? 'connected' : 'disconnected'}.`,
 				variant: 'success',
-				icon: 'lucide:circle-check',
 			});
 			// The server owns completion: connecting checks the step off, and
 			// disconnecting the last tool reopens it, so both end in a re-pull.
@@ -527,7 +530,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 			toast({
 				title: `Could not ${next ? 'connect' : 'disconnect'} ${integration.name}.`,
 				variant: 'destructive',
-				icon: 'lucide:circle-x',
 			});
 		} finally {
 			integration.busy = false;
@@ -543,7 +545,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 		toast({
 			title: `${emails.length} invitation${emails.length === 1 ? '' : 's'} sent.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -553,7 +554,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 		toast({
 			title: `${draft.name} created.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -577,7 +577,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 			toast({
 				title: `${result.imported} customers imported.`,
 				variant: 'success',
-				icon: 'lucide:circle-check',
 			});
 		} finally {
 			importState.uploading = false;
@@ -597,14 +596,12 @@ 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',
-				icon: 'lucide:circle-x',
 			});
 		}
 	};
@@ -618,7 +615,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 		toast({
 			title: 'Reminder schedule updated.',
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -635,7 +631,6 @@ export function provideOnboardingWorkspace(): OnboardingWorkspaceContext {
 		toast({
 			title: 'Onboarding dismissed. Find it again under Settings → Setup.',
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 		await navigateTo('/dashboard');
 	};
@@ -1330,22 +1325,24 @@ const ctx = useOnboardingWorkspace();
 
 // The captured-but-not-imported file is this leaf's own state.
 const file = ref<File | null>(null);
-const fileError = ref('');
+const fileError = ref<string[]>([]);
 
-// Rejects never reach the model — map the typed error to a message and feed
-// it back through `errors` (the display is a round-trip, not automatic).
-const onReject = (error: DropZoneError) => {
-	fileError.value =
+// Rejects never reach the model — map the drop's typed errors to messages
+// and feed them back through `errors` (the display is a round-trip, not
+// automatic). One `error` per drop carries every rejection.
+const onReject = (rejections: DropZoneError[]) => {
+	fileError.value = rejections.map((error) =>
 		error.type === 'maxSize'
 			? `${error.filename} is ${error.formattedSize} — the limit is ${error.formattedMaxSize}.`
 			: error.type === 'accept'
 				? `${error.filename} is not a CSV file.`
-				: `${error.filename} was rejected.`;
+				: `${error.filename} was rejected.`
+	);
 };
 
 const startImport = async () => {
 	if (!file.value) return;
-	fileError.value = '';
+	fileError.value = [];
 	await ctx.importCustomers(file.value);
 	file.value = null;
 };

package/dist/ai/recipes/nuxt/ownership-atlas.md

@@ -32,7 +32,12 @@ changes.
   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.
-- `<BbToast />` mounted once in `app.vue` — never in a page.
+- `<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' } }`
+  and `alertVariants: { warning: { icon: 'lucide:triangle-alert' }, destructive: { icon: 'lucide:circle-x' } }`
+  ([BbToast § Variant icons](../../BbToast.md#variant-icons)).
 - The route file `pages/ownership/index.vue` mounts the assembly from
   `components/OwnershipAtlas/` (every file under `pages/` becomes a route,
   `.ts` files included, so the page's parts live in `components/`).
@@ -492,7 +497,6 @@ export function provideOwnershipAtlas(): OwnershipAtlasContext {
 		toast({
 			title: `Holdings transferred to ${target?.name ?? 'the selected owner'}.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -623,8 +627,8 @@ export function useOwnershipAtlas(): OwnershipAtlasContext {
 				:loading="ctx.ownersPending.value"
 				loading-text="Loading owners…"
 				pt:row="owner-row"
+				pt:row:expanded="row-expanded"
 				pt:row:highlighted="row-peeked"
-				:row-class="rowClass"
 				selectable
 			>
 				<template #name="{ item, content }">
@@ -633,6 +637,13 @@ export function useOwnershipAtlas(): OwnershipAtlasContext {
 						<span class="truncate text-xs text-(--bb-text-muted)">{{
 							item.email
 						}}</span>
+						<!-- On a phone Team and Region are hidden; their facts move here. -->
+						<span
+							v-if="isMobile"
+							class="truncate text-xs text-(--bb-text-muted)"
+						>
+							{{ item.team }} · {{ REGION_LABEL[item.region] }}
+						</span>
 					</div>
 				</template>
 
@@ -739,6 +750,7 @@ export function useOwnershipAtlas(): OwnershipAtlasContext {
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import {
 	BbBreadcrumbs,
 	BbButton,
@@ -747,6 +759,7 @@ import {
 	BbTable,
 	BbTabs,
 	BbTextInput,
+	useMobile,
 	vBbTooltip,
 	type BbTableColumn,
 } from 'bitboss-ui';
@@ -760,15 +773,19 @@ import type { Owner } from '~/types';
 
 const ctx = provideOwnershipAtlas();
 
+const { isMobile } = useMobile();
+
 /** Four data columns — the nested holdings table snaps onto them 1:1. The
  * owner's title rides under Team; the holdings count lives on the expand
- * control in the actions column. */
-const columns: Array<BbTableColumn<Owner>> = [
+ * control in the actions column. On a phone Team and Region leave (the BbTable
+ * guide's "hide columns, don't scroll"): four equal tracks at 390px would
+ * break names mid-word. */
+const columns = computed<Array<BbTableColumn<Owner>>>(() => [
 	{ key: 'name', label: 'Owner' },
-	{ key: 'team', label: 'Team' },
-	{ key: 'region', label: 'Region' },
+	{ key: 'team', label: 'Team', hidden: isMobile.value },
+	{ key: 'region', label: 'Region', hidden: isMobile.value },
 	{ key: 'monthlyTotal', label: '$ / mo', align: 'right' },
-];
+]);
 
 const money = (value: number) =>
 	new Intl.NumberFormat('en-US', {
@@ -776,13 +793,6 @@ const money = (value: number) =>
 		currency: 'USD',
 		maximumFractionDigits: 0,
 	}).format(value);
-
-// `pt:row` carries the static base class (pointer cursor — rows are click
-// targets) and `pt:row:highlighted` the peek wash (the table knows which row
-// is highlighted); `rowClass` keeps only what the table cannot know — whether
-// the row is expanded.
-const rowClass = (item: Owner) =>
-	ctx.expanded.value.includes(item.id) ? 'row-expanded' : undefined;
 </script>
 
 <style scoped>
@@ -835,7 +845,9 @@ const rowClass = (item: Owner) =>
 	padding-inline: 0;
 }
 
-/* Row states, painted through the public row-class API. */
+/* Row states, painted through passthrough: `pt:row` carries the static base
+   class (pointer cursor — rows are click targets), `pt:row:expanded` and
+   `pt:row:highlighted` the states the table already knows. */
 :deep(.owner-row) {
 	cursor: pointer;
 }
@@ -845,10 +857,10 @@ const rowClass = (item: Owner) =>
 	background-color: color-mix(in oklab, var(--bb-text) 2.5%, transparent);
 }
 
-/* Peek-open = accent wash + a 1px lead pin on the row's start edge. */
+/* Peek-open = an accent wash; BbTable paints the lead bar on the highlighted
+   row itself. */
 :deep(.row-peeked) {
 	background-color: color-mix(in oklab, var(--bb-primary) 6%, transparent);
-	box-shadow: inset 1px 0 0 0 var(--bb-primary);
 }
 </style>
 ```
@@ -874,6 +886,10 @@ const rowClass = (item: Owner) =>
 					<span class="text-xs text-(--bb-text-muted)">
 						Since {{ monthLabel(item.since) }} · {{ item.region }}
 					</span>
+					<!-- On a phone Type and Status are hidden; their facts move here. -->
+					<span v-if="isMobile" class="text-xs text-(--bb-text-muted)">
+						{{ KIND_LABEL[item.kind] }} · {{ STATUS_LABEL[item.status] }}
+					</span>
 				</div>
 			</template>
 
@@ -897,12 +913,15 @@ const rowClass = (item: Owner) =>
 </template>
 
 <script setup lang="ts">
-import { BbBadge, BbTable, type BbTableColumn } from 'bitboss-ui';
+import { computed } from 'vue';
+import { BbBadge, BbTable, useMobile, type BbTableColumn } from 'bitboss-ui';
 import { KIND_LABEL, STATUS_LABEL, STATUS_VARIANT } from './context';
 import type { Holding, Owner } from '~/types';
 
 defineProps<{ owner: Owner }>();
 
+const { isMobile } = useMobile();
+
 /**
  * Explicit snaps onto the parent grid, by the PARENT's column keys (Owner /
  * Team / Region / $ / mo); the parent's select column is accounted for by
@@ -912,14 +931,16 @@ defineProps<{ owner: Owner }>();
  * the parent's $/mo. With all four snapped, the parent's select and actions
  * tracks fold into the child's first/last cells as padding — the child
  * starts flush with the parent's first data column, and that inset is what
- * reads as hierarchy.
+ * reads as hierarchy. On a phone the parent hides Team and Region, so the
+ * columns that snap onto them hide too: a hidden parent column has no track
+ * for a child cell to land on.
  */
-const columns: Array<BbTableColumn<Holding>> = [
+const columns = computed<Array<BbTableColumn<Holding>>>(() => [
 	{ key: 'name', label: 'Resource', snap: 'name' },
-	{ key: 'kind', label: 'Type', snap: 'team' },
-	{ key: 'status', label: 'Status', snap: 'region' },
+	{ key: 'kind', label: 'Type', snap: 'team', hidden: isMobile.value },
+	{ key: 'status', label: 'Status', snap: 'region', hidden: isMobile.value },
 	{ key: 'monthlyCost', label: '$ / mo', align: 'right', snap: 'monthlyTotal' },
-];
+]);
 
 const money = (value: number) =>
 	value === 0
@@ -1091,9 +1112,9 @@ const onTransfer = (value: unknown) => {
 <!-- components/OwnershipAtlas/OwnerPeek.vue -->
 <template>
 	<div v-if="owner" class="flex flex-col gap-4 text-sm">
-		<!-- Identity header. -->
+		<!-- Identity: the sidebar title (`#sidebar-title`) already names the
+		     owner, so the peek opens on email + role, never a second name. -->
 		<header class="flex flex-col gap-1">
-			<h2 class="text-base font-semibold tracking-tight">{{ owner.name }}</h2>
 			<p class="text-xs text-(--bb-text-muted)">{{ owner.email }}</p>
 			<p class="text-xs text-(--bb-text-muted)">
 				{{ owner.title }} · {{ owner.team }} ·
@@ -1329,6 +1350,14 @@ export interface OwnerDetail extends Owner {
   structural inset, plus a hairline and a faint wash, is the entire
   hierarchy treatment. No extra padding inset: an inset would make the
   alignment lie.
+- **On a phone the tables shed columns, they do not scroll.** Four equal
+  `fixed` tracks at 390px leave ~70px a column and names break mid-word, so
+  Team and Region carry `hidden: isMobile.value` (`useMobile()`, the
+  one-tier form of the BbTable guide's "On a phone" pattern) and their facts
+  stack under the owner's email in the identity cell. The holdings columns
+  that snap onto them (`snap: 'team'` / `'region'`) take the same `hidden`:
+  a hidden parent column has no track for a child cell to land on, and
+  Type · Status move under the resource name.
 - **Cell-padding overrides use direct-child combinators.** `.table-flush`
   bleeds the owner table past the page padding and re-adds the inset on the
   outermost cells — but only via
@@ -1338,6 +1367,11 @@ export interface OwnerDetail extends Owner {
   nested table's cells and clobber the offset padding it computes to stay on
   the parent grid. The expand cell itself is excluded from the inset and
   zero-padded, so the nested table gets the full row width to snap within.
+- **Row states the table knows go through passthrough.** `pt:row` carries
+  the static base class (pointer cursor), `pt:row:expanded` the quiet ink
+  wash and `pt:row:highlighted` the peek's accent wash — no `row-class`
+  function re-deriving `expanded`. The highlighted row's lead bar is the
+  table's own; the page adds only the wash.
 - **Expansion is rung-3 page state.** `expanded` lives in the context
   because four surfaces touch it: the per-row control, the topbar toggle,
   the bulk bar's Expand, and the peek's "Expand in table". Binding it
@@ -1354,6 +1388,9 @@ export interface OwnerDetail extends Owner {
   as the sidebar title); the stack emptying clears the highlight. Highlight
   and selection remain independent axes — you can peek one owner while
   twelve are selected for transfer.
+- **The peek never repeats its title.** The shell's `#sidebar-title` (an
+  `<h2>`) already names the owner, so `OwnerPeek` opens on email and role
+  instead of a second heading with the same name.
 - **The context coopts, leaves consume.** `shell` and the table context are
   joined once in `provideOwnershipAtlas()`; five components share filters,
   selection, expansion, the peek and the transfer action through one

package/dist/ai/recipes/nuxt/record-form.md

@@ -27,7 +27,12 @@ Sibling recipes: [Vue](../vue/record-form.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.
-- `<BbConfirm />` and `<BbToast />` mounted once in `app.vue` — never in a page.
+- `<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' } }`
+  and `alertVariants: { warning: { icon: 'lucide:triangle-alert' }, destructive: { icon: 'lucide:circle-x' } }`
+  ([BbToast § Variant icons](../../BbToast.md#variant-icons)).
 - Server routes: `GET /api/invoices/:id`, `POST /api/invoices`,
   `PUT /api/invoices/:id`, `DELETE /api/invoices/:id` (422 on validation
   failure with `{ errors: { field: ['message'] } }`), plus
@@ -564,7 +569,6 @@ export function provideInvoiceForm(): InvoiceFormContext {
 		toast({
 			title: `Applied ${customer.name}'s billing defaults.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -613,13 +617,11 @@ export function provideInvoiceForm(): InvoiceFormContext {
 				toast({
 					title: 'Some fields need attention.',
 					variant: 'destructive',
-					icon: 'lucide:circle-x',
 				});
 			} else {
 				toast({
 					title: 'Something went wrong. Try again.',
 					variant: 'destructive',
-					icon: 'lucide:circle-x',
 				});
 			}
 			return null;
@@ -635,7 +637,6 @@ export function provideInvoiceForm(): InvoiceFormContext {
 		toast({
 			title: `Invoice ${saved.number} saved.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 		await navigateTo(`/invoices/${saved.id}`);
 	};
@@ -646,7 +647,6 @@ export function provideInvoiceForm(): InvoiceFormContext {
 		toast({
 			title: `Draft ${saved.number} saved.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 		// Swap the URL to the edit route. Nuxt remounts the component there, so it
 		// comes back up in edit mode against the freshly-created invoice — no
@@ -673,7 +673,6 @@ export function provideInvoiceForm(): InvoiceFormContext {
 		toast({
 			title: `${invoiceNumber.value} deleted.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 		await navigateTo('/invoices');
 	};
@@ -864,8 +863,7 @@ const trail = computed(() => [
 
 ### DetailsSection.vue
 
-The Customer select is `required`: with `bitboss: { requiredAsterisk: true }` in the build
-config it shows the asterisk and carries `aria-required`. It does not block
+The Customer select is `required`: it shows the asterisk and carries `aria-required`. It does not block
 submission (a select posts through hidden inputs, which the browser never
 validates); the server's 422 on `customerId` is what stops an empty save.
 
@@ -888,6 +886,7 @@ validates); the server's 422 on `customerId` is what stops an empty save.
 					v-model="ctx.draft.customerId"
 					autocomplete="off"
 					:errors="ctx.errors.value.customerId"
+					:filter-by="false"
 					item-text="name"
 					item-value="id"
 					:items="ctx.fetchCustomers"
@@ -1173,9 +1172,9 @@ const currency = new Intl.NumberFormat('en-US', {
 <template>
 	<BbTextarea
 		v-if="editing"
-		ref="inputRef"
 		v-model="value"
 		auto-grow
+		autofocus
 		compact
 		:errors="ctx.lineItemError(line, 'description')"
 		hide-label
@@ -1201,7 +1200,7 @@ const currency = new Intl.NumberFormat('en-US', {
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { BbTextarea } from 'bitboss-ui';
 import { useInvoiceForm } from './context';
 import type { LineItemDraft } from '~/types';
@@ -1213,21 +1212,12 @@ const ctx = useInvoiceForm();
 // Rung 1 of the ladder: only this cell reads or writes its editing state.
 const editing = ref(false);
 const value = ref<string | null>(null);
-const inputRef = ref<{ $el?: HTMLElement } | null>(null);
 
 const hasError = computed(() => !!ctx.lineItemError(props.line, 'description'));
 
-/** Focus the native textarea after the editor mounts — HTML `autofocus` only
- *  runs on page load, not on later mounts. */
-const focusInput = async () => {
-	await nextTick();
-	inputRef.value?.$el?.querySelector('textarea')?.focus();
-};
-
 const start = () => {
 	value.value = props.line.description;
 	editing.value = true;
-	void focusInput();
 };
 
 // Commit on blur, revert on Esc (inline-editing table). Enter inserts a newline (textarea),
@@ -1252,8 +1242,8 @@ const revert = () => {
 <template>
 	<BbNumberInput
 		v-if="editing"
-		ref="inputRef"
 		v-model="value"
+		autofocus
 		class="[&_input]:text-right"
 		compact
 		:errors="ctx.lineItemError(line, 'quantity')"
@@ -1302,7 +1292,7 @@ const revert = () => {
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { BbButton, BbNumberInput } from 'bitboss-ui';
 import { useInvoiceForm } from './context';
 import type { LineItemDraft } from '~/types';
@@ -1313,21 +1303,12 @@ const ctx = useInvoiceForm();
 
 const editing = ref(false);
 const value = ref<number | null>(null);
-const inputRef = ref<{ $el?: HTMLElement } | null>(null);
 
 const hasError = computed(() => !!ctx.lineItemError(props.line, 'quantity'));
 
-/** Focus the native input after the editor mounts — HTML `autofocus` only
- *  runs on page load, not on later mounts. */
-const focusInput = async () => {
-	await nextTick();
-	inputRef.value?.$el?.querySelector('input')?.focus();
-};
-
 const start = () => {
 	value.value = props.line.quantity;
 	editing.value = true;
-	void focusInput();
 };
 
 const commit = () => {
@@ -1351,8 +1332,8 @@ const revert = () => {
 <template>
 	<BbNumberInput
 		v-if="editing"
-		ref="inputRef"
 		v-model="value"
+		autofocus
 		class="[&_input]:text-right"
 		compact
 		:errors="ctx.lineItemError(line, 'unitPrice')"
@@ -1379,7 +1360,7 @@ const revert = () => {
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { BbNumberInput } from 'bitboss-ui';
 import { useInvoiceForm } from './context';
 import type { LineItemDraft } from '~/types';
@@ -1390,7 +1371,6 @@ const ctx = useInvoiceForm();
 
 const editing = ref(false);
 const value = ref<number | null>(null);
-const inputRef = ref<{ $el?: HTMLElement } | null>(null);
 
 const hasError = computed(() => !!ctx.lineItemError(props.line, 'unitPrice'));
 
@@ -1399,17 +1379,9 @@ const currency = new Intl.NumberFormat('en-US', {
 	currency: 'USD',
 });
 
-/** Focus the native input after the editor mounts — HTML `autofocus` only
- *  runs on page load, not on later mounts. */
-const focusInput = async () => {
-	await nextTick();
-	inputRef.value?.$el?.querySelector('input')?.focus();
-};
-
 const start = () => {
 	value.value = props.line.unitPrice;
 	editing.value = true;
-	void focusInput();
 };
 
 const commit = () => {