bitboss-ui 3.0.0-beta.48 → 3.0.0-beta.49

package/dist/ai/recipes/inertia/upload-center.md

@@ -36,9 +36,8 @@ Sibling recipes: [Vue](../vue/upload-center.md) ·
   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 the `createInertiaApp` render root — never in a page.
-- From the [Inertia Helpers](../../guides/inertia-helpers.md) toolkit:
-  `useTableContext`, `useQueryObject`, `useQuery`, `useProp`,
-  `useResourceContext`.
+- From the [Inertia Helpers](../../guides/inertia-helpers.md) toolkit, installed with
+  `npx bitboss-ui add useProp useQuery useQueryObject useResourceContext useTableContext`.
 - A `useCategoriesStore()` Pinia store exposing the shared expense-category
   catalog (Travel, Meals & entertainment, Lodging, Rideshare & transit,
   Software & subscriptions, Office supplies, Fuel, Client entertainment).
@@ -189,10 +188,10 @@ import {
 import {
 	useTableContext,
 	type TableContext,
-} from '@/composables/useTableContext';
-import { useQueryObject } from '@/composables/useQueryObject';
-import { useProp } from '@/composables/useProp';
-import { useQuery } from '@/composables/useQuery';
+} from '@/composables/inertia-helpers/useTableContext';
+import { useQueryObject } from '@/composables/inertia-helpers/useQueryObject';
+import { useProp } from '@/composables/inertia-helpers/useProp';
+import { useQuery } from '@/composables/inertia-helpers/useQuery';
 import { useCategoriesStore } from '@/stores/categories';
 import { api } from '@/api';
 import type { Category, Receipt, ReceiptStatus } from '@/types';
@@ -638,9 +637,9 @@ export function useUploadCenter(): UploadCenterContext {
 				<BbBreadcrumbs
 					class="min-w-0 flex-auto"
 					:items="[
-						{ key: 'dashboard', text: 'Dashboard', href: '/dashboard' },
-						{ key: 'expenses', text: 'Expenses', href: '/expenses' },
-						{ key: 'receipts', text: 'Receipts' },
+						{ value: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+						{ value: 'expenses', label: 'Expenses', href: '/expenses' },
+						{ value: 'receipts', label: 'Receipts' },
 					]"
 				/>
 				<div class="flex shrink-0 items-center gap-2">
@@ -688,21 +687,21 @@ export function useUploadCenter(): UploadCenterContext {
 				compact
 				:items="[
 					{
-						key: 'drafts',
+						value: 'drafts',
 						label: `Drafts · ${ctx.tabCounts.value.drafts}`,
 						href: tabHref('drafts'),
 						server: true,
 						only: ['receipts', 'tabCounts', 'readyCount'],
 					},
 					{
-						key: 'submitted',
+						value: 'submitted',
 						label: `Submitted · ${ctx.tabCounts.value.submitted}`,
 						href: tabHref('submitted'),
 						server: true,
 						only: ['receipts', 'tabCounts', 'readyCount'],
 					},
 					{
-						key: 'reimbursed',
+						value: 'reimbursed',
 						label: `Reimbursed · ${ctx.tabCounts.value.reimbursed}`,
 						href: tabHref('reimbursed'),
 						server: true,
@@ -874,7 +873,7 @@ import {
 } from 'bitboss-ui';
 import qs from 'query-string';
 import PageShell from '@/components/layout/PageShell.vue';
-import { useQuery } from '@/composables/useQuery';
+import { useQuery } from '@/composables/inertia-helpers/useQuery';
 import {
 	provideUploadCenter,
 	STATUS_LABEL,
@@ -1375,6 +1374,7 @@ const categoryName = computed(
 		label="Amount"
 		:max-precision="2"
 		:min="0"
+		:min-precision="2"
 		placeholder="0.00"
 		variant="ghost"
 		@change="commit"
@@ -1394,32 +1394,24 @@ const props = defineProps<{ receipt: Receipt }>();
 
 const ctx = useUploadCenter();
 
-/** Money cells always show two decimals so the column optically aligns. */
-const formatMoney = (value: number | null): string | null =>
-	value === null || Number.isNaN(value) ? null : value.toFixed(2);
-
-// Same commit/revert contract as the merchant cell, on the number model —
-// commit on @change, not @blur + @keydown.enter (see MerchantCell.vue).
-const draft = ref<number | string | null>(formatMoney(props.receipt.amount));
+// Money cells always show two decimals (`min-precision`), so the column
+// optically aligns. Same commit/revert contract as the merchant cell, on the
+// number model — commit on @change, not @blur + @keydown.enter (see
+// MerchantCell.vue).
+const draft = ref<number | null>(props.receipt.amount);
 watch(
 	() => props.receipt.amount,
 	(value) => {
-		draft.value = formatMoney(value);
+		draft.value = value;
 	}
 );
 
 const commit = () => {
-	const amount =
-		draft.value === null || draft.value === '' ? null : Number(draft.value);
-	if (amount === props.receipt.amount) {
-		draft.value = formatMoney(props.receipt.amount);
-		return;
-	}
-	void ctx.updateReceipt(props.receipt, { amount });
-	draft.value = formatMoney(amount);
+	if (draft.value === props.receipt.amount) return;
+	void ctx.updateReceipt(props.receipt, { amount: draft.value });
 };
 const revert = () => {
-	draft.value = formatMoney(props.receipt.amount);
+	draft.value = props.receipt.amount;
 };
 </script>
 ```
@@ -1502,8 +1494,8 @@ const items = computed(() => {
 		...(isDraft
 			? [
 					{
-						key: 'submit',
-						text: 'Submit for approval',
+						value: 'submit',
+						label: 'Submit for approval',
 						'prepend:icon': 'lucide:send',
 						onClick: () => ctx.submitReceipt(receipt),
 					},
@@ -1514,8 +1506,8 @@ const items = computed(() => {
 			// BbButton to render a plain anchor instead of letting Inertia
 			// intercept this same-origin `href` as a visit (see BbBaseButton's
 			// routing rules).
-			key: 'download',
-			text: 'Download original',
+			value: 'download',
+			label: 'Download original',
 			'prepend:icon': 'lucide:download',
 			href: `/receipts/${receipt.id}/file`,
 			target: '_blank',
@@ -1523,8 +1515,8 @@ const items = computed(() => {
 		...(isDraft
 			? [
 					{
-						key: 'remove',
-						text: 'Remove',
+						value: 'remove',
+						label: 'Remove',
 						'prepend:icon': 'lucide:trash-2',
 						variant: 'destructive' as const,
 						onClick: () => ctx.deleteReceipt(receipt),
@@ -1781,7 +1773,7 @@ const selectedCount = computed(() =>
 <script setup lang="ts">
 import { watch } from 'vue';
 import { BbBadge, BbButton, BbIcon, BbSpinner } from 'bitboss-ui';
-import { useResourceContext } from '@/composables/useResourceContext';
+import { useResourceContext } from '@/composables/inertia-helpers/useResourceContext';
 import CategoryCell from './CategoryCell.vue';
 import { STATUS_LABEL, STATUS_VARIANT, useUploadCenter } from './context';
 import type { ReceiptDetail } from '@/types';
@@ -1909,7 +1901,7 @@ const longDate = (value: string) =>
 
 <script setup lang="ts">
 import { BbBadge, BbButton, BbIcon, BbSpinner } from 'bitboss-ui';
-import { useResourceContext } from '@/composables/useResourceContext';
+import { useResourceContext } from '@/composables/inertia-helpers/useResourceContext';
 import { STATUS_LABEL, STATUS_VARIANT, useUploadCenter } from './context';
 import type { MerchantSummary } from '@/types';
 

package/dist/ai/recipes/inertia/wizard-form.md

@@ -29,9 +29,8 @@ Sibling recipes: [Vue](../vue/wizard-form.md) ·
   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 the `createInertiaApp` render root — never in a page.
-- From the [Inertia Helpers](../../guides/inertia-helpers.md) toolkit:
-  `usePromiseForm`, `useConfirmOnRouteLeave`, `useProp`, `useQuery`,
-  `useResourceContext`.
+- From the [Inertia Helpers](../../guides/inertia-helpers.md) toolkit, installed with
+  `npx bitboss-ui add useConfirmOnRouteLeave usePromiseForm useProp useQuery useResourceContext`.
 - [App Layout](../../guides/app-layout.md) and
   [Page Shell](../../guides/page-shell.md) copied into
   `src/components/layout/` per their guides — the page renders inside this
@@ -152,10 +151,10 @@ import {
 	usePageShellContext,
 	type PageShellContext,
 } from '@/components/layout/usePageShellContext';
-import { useConfirmOnRouteLeave } from '@/composables/useConfirmOnRouteLeave';
-import { usePromiseForm } from '@/composables/usePromiseForm';
-import { useProp } from '@/composables/useProp';
-import { useQuery } from '@/composables/useQuery';
+import { useConfirmOnRouteLeave } from '@/composables/inertia-helpers/useConfirmOnRouteLeave';
+import { usePromiseForm } from '@/composables/inertia-helpers/usePromiseForm';
+import { useProp } from '@/composables/inertia-helpers/useProp';
+import { useQuery } from '@/composables/inertia-helpers/useQuery';
 import type { Campaign, Segment } from '@/types';
 
 /**
@@ -760,9 +759,9 @@ onMounted(() => {
 });
 
 const crumbs = computed(() => [
-	{ key: 'dashboard', text: 'Dashboard', href: '/dashboard' },
-	{ key: 'campaigns', text: 'Campaigns', href: '/campaigns' },
-	{ key: 'setup', text: ctx.campaign.value?.name ?? 'New campaign' },
+	{ value: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+	{ value: 'campaigns', label: 'Campaigns', href: '/campaigns' },
+	{ value: 'setup', label: ctx.campaign.value?.name ?? 'New campaign' },
 ]);
 
 // The summary shows only the CURRENT step's issues, and only once the user
@@ -906,8 +905,6 @@ const status = (key: StepKey) => ctx.stepStatus(key);
 
 		<BbSelect
 			v-model="ctx.draft.countries"
-			item-text="label"
-			item-value="value"
 			:items="COUNTRIES"
 			label="Limit to countries"
 			label-mode="outside"
@@ -1080,8 +1077,6 @@ const errorsFor = (field: string) => ctx.fieldErrors('content', field);
 
 		<BbRadioGroup
 			v-model="ctx.draft.sendMode"
-			item-text="label"
-			item-value="value"
 			:items="[
 				{
 					label: 'Send now — goes out as soon as you confirm on Review',
@@ -1111,8 +1106,6 @@ const errorsFor = (field: string) => ctx.fieldErrors('content', field);
 			<BbSelect
 				v-model="ctx.draft.timezone"
 				:errors="errorsFor('timezone')"
-				item-text="label"
-				item-value="value"
 				:items="TIMEZONES"
 				label="Timezone"
 				label-mode="outside"
@@ -1453,7 +1446,7 @@ const isReview = computed(() => ctx.step.value === 'review');
 
 <script setup lang="ts">
 import { BbButton, BbIcon, BbSpinner } from 'bitboss-ui';
-import { useResourceContext } from '@/composables/useResourceContext';
+import { useResourceContext } from '@/composables/inertia-helpers/useResourceContext';
 import type { SegmentDetail } from '@/types';
 
 const props = defineProps<{ segmentId: number }>();
@@ -1621,8 +1614,6 @@ the file is unchanged, plus `BbCalendar` in its import):
 		<BbSelect
 			v-model="ctx.draft.timezone"
 			:errors="errorsFor('timezone')"
-			item-text="label"
-			item-value="value"
 			:items="TIMEZONES"
 			label="Timezone"
 			label-mode="outside"

package/dist/ai/recipes/nuxt/approvals-inbox.md

@@ -625,9 +625,9 @@ export function useApprovalsInbox(): ApprovalsInboxContext {
 				<BbBreadcrumbs
 					class="min-w-0 flex-auto"
 					:items="[
-						{ key: 'dashboard', text: 'Dashboard', to: '/dashboard' },
-						{ key: 'finance', text: 'Finance', to: '/finance' },
-						{ key: 'approvals', text: 'Approvals' },
+						{ value: 'dashboard', label: 'Dashboard', to: '/dashboard' },
+						{ value: 'finance', label: 'Finance', to: '/finance' },
+						{ value: 'approvals', label: 'Approvals' },
 					]"
 				/>
 				<BbTextInput
@@ -654,22 +654,22 @@ export function useApprovalsInbox(): ApprovalsInboxContext {
 					compact
 					:items="[
 						{
-							key: 'needsApproval',
+							value: 'needsApproval',
 							label: `Needs approval · ${ctx.tabCounts.value.needsApproval}`,
 							href: '?tab=needsApproval',
 						},
 						{
-							key: 'approved',
+							value: 'approved',
 							label: `Approved · ${ctx.tabCounts.value.approved}`,
 							href: '?tab=approved',
 						},
 						{
-							key: 'rejected',
+							value: 'rejected',
 							label: `Rejected · ${ctx.tabCounts.value.rejected}`,
 							href: '?tab=rejected',
 						},
 						{
-							key: 'all',
+							value: 'all',
 							label: `All · ${ctx.tabCounts.value.all}`,
 							href: '?tab=all',
 						},
@@ -859,7 +859,6 @@ const rowClass = (item: Expense) =>
 		<BbSelectPopover
 			v-model="ctx.filters.categories"
 			item-text="text"
-			item-value="value"
 			:items="CATEGORY_OPTIONS"
 			multiple
 		>

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

@@ -837,9 +837,9 @@ export function useBacklogWorkspace(): BacklogWorkspaceContext {
 				<BbBreadcrumbs
 					class="min-w-0 flex-auto"
 					:items="[
-						{ key: 'product', text: 'Product', to: '/product' },
-						{ key: 'sprints', text: 'Sprints', to: '/sprints' },
-						{ key: 'sprint-24', text: 'Sprint 24' },
+						{ value: 'product', label: 'Product', to: '/product' },
+						{ value: 'sprints', label: 'Sprints', to: '/sprints' },
+						{ value: 'sprint-24', label: 'Sprint 24' },
 					]"
 				/>
 				<div class="flex shrink-0 items-center gap-2">
@@ -876,17 +876,17 @@ export function useBacklogWorkspace(): BacklogWorkspaceContext {
 				compact
 				:items="[
 					{
-						key: 'backlog',
+						value: 'backlog',
 						label: `Backlog · ${ctx.tabCounts.value.backlog}`,
 						href: '?tab=backlog',
 					},
 					{
-						key: 'current',
+						value: 'current',
 						label: `Current sprint · ${ctx.tabCounts.value.current}`,
 						href: '?tab=current',
 					},
 					{
-						key: 'done',
+						value: 'done',
 						label: `Done · ${ctx.tabCounts.value.done}`,
 						href: '?tab=done',
 					},
@@ -1090,8 +1090,6 @@ const rowClass = (item: Issue) =>
 			<BbSelectPopover
 				v-model="ctx.filters.status"
 				disable-writing
-				item-text="label"
-				item-value="value"
 				:items="STATUS_OPTIONS"
 				multiple
 			>
@@ -1124,8 +1122,6 @@ const rowClass = (item: Issue) =>
 			<BbSelectPopover
 				v-model="ctx.filters.priority"
 				disable-writing
-				item-text="label"
-				item-value="value"
 				:items="PRIORITY_OPTIONS"
 				multiple
 			>
@@ -1291,8 +1287,6 @@ const commit = (event: Event) => {
 	<BbSelectPopover
 		compact
 		disable-writing
-		item-text="label"
-		item-value="value"
 		:items="STATUS_OPTIONS"
 		:model-value="status"
 		width="180px"
@@ -1369,8 +1363,6 @@ const label = computed(
 	<BbSelectPopover
 		compact
 		disable-writing
-		item-text="label"
-		item-value="value"
 		:items="PRIORITY_OPTIONS"
 		:model-value="priority"
 		width="160px"
@@ -1435,8 +1427,8 @@ const label = computed(
 <template>
 	<!-- Provider-backed people picker. The provider is the ONE shared
 	`searchMembers` — lazy per instance, so a row nobody opens never fetches.
-	The whole member is the value (no item-value), matching how the row
-	stores it. -->
+	The whole member is the value (no item-value, and a Member has no `value`
+	of its own), matching how the row stores it. -->
 	<BbSelectPopover
 		compact
 		item-text="name"
@@ -1502,20 +1494,20 @@ const assignee = computed(() => ctx.valueOf(props.issue, 'assignee'));
 		:boundary="boundary"
 		:items="[
 			{
-				key: 'duplicate',
-				text: 'Duplicate',
+				value: 'duplicate',
+				label: 'Duplicate',
 				'prepend:icon': 'lucide:copy',
 				onClick: () => ctx.duplicateIssue(issue),
 			},
 			{
-				key: 'next-sprint',
-				text: 'Move to next sprint',
+				value: 'next-sprint',
+				label: 'Move to next sprint',
 				'prepend:icon': 'lucide:arrow-right',
 				onClick: () => ctx.moveToNextSprint(issue),
 			},
 			{
-				key: 'delete',
-				text: 'Delete',
+				value: 'delete',
+				label: 'Delete',
 				'prepend:icon': 'lucide:trash-2',
 				variant: 'destructive',
 				onClick: () => ctx.deleteIssue(issue),
@@ -1560,8 +1552,6 @@ const ctx = useBacklogWorkspace();
 		menu clears the bar. -->
 		<BbSelectPopover
 			disable-writing
-			item-text="label"
-			item-value="value"
 			:items="STATUS_OPTIONS"
 			:model-value="null"
 			:offset="8"

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

@@ -587,36 +587,36 @@ const warehouseId = ref('denver');
 
 const accountMenuItems: BbDropdownItem[] = [
 	{
-		key: 'theme',
-		text: 'Theme',
+		value: 'theme',
+		label: 'Theme',
 		'prepend:icon': 'lucide:sun-moon',
 		// A submenu opener (`items`) whose own `items` is one selectable
 		// group — `selectable: true` gives single-choice radio semantics and a
 		// check on the picked row, with no bordered field anywhere.
 		items: [
 			{
-				key: 'theme-opts',
+				id: 'theme-opts',
 				selectable: true,
 				items: [
-					{ key: 'system', text: 'System' },
-					{ key: 'light', text: 'Light' },
-					{ key: 'dark', text: 'Dark' },
+					{ value: 'system', label: 'System' },
+					{ value: 'light', label: 'Light' },
+					{ value: 'dark', label: 'Dark' },
 				],
 			},
 		],
 	},
 	{
-		key: 'warehouse',
-		text: 'Warehouse',
+		value: 'warehouse',
+		label: 'Warehouse',
 		'prepend:icon': 'lucide:warehouse',
 		items: [
 			{
-				key: 'warehouse-opts',
+				id: 'warehouse-opts',
 				selectable: true,
 				items: [
-					{ key: 'denver', text: 'Denver DC' },
-					{ key: 'reno', text: 'Reno DC' },
-					{ key: 'columbus', text: 'Columbus DC' },
+					{ value: 'denver', label: 'Denver DC' },
+					{ value: 'reno', label: 'Reno DC' },
+					{ value: 'columbus', label: 'Columbus DC' },
 				],
 			},
 		],
@@ -624,14 +624,14 @@ const accountMenuItems: BbDropdownItem[] = [
 	// A trailing separator section (a nested array) for plain navigation rows.
 	[
 		{
-			key: 'settings',
-			text: 'Settings',
+			value: 'settings',
+			label: 'Settings',
 			'prepend:icon': 'lucide:settings',
 			href: '/settings',
 		},
 		{
-			key: 'signout',
-			text: 'Sign out',
+			value: 'signout',
+			label: 'Sign out',
 			'prepend:icon': 'lucide:log-out',
 			href: '/logout',
 			method: 'post',

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

@@ -694,8 +694,8 @@ export function useOnboardingWorkspace(): OnboardingWorkspaceContext {
 				<BbBreadcrumbs
 					class="min-w-0 flex-auto"
 					:items="[
-						{ key: 'dashboard', text: 'Dashboard', to: '/dashboard' },
-						{ key: 'getting-started', text: 'Getting started' },
+						{ value: 'dashboard', label: 'Dashboard', to: '/dashboard' },
+						{ value: 'getting-started', label: 'Getting started' },
 					]"
 				/>
 				<BbButton
@@ -1064,8 +1064,6 @@ const ctx = useOnboardingWorkspace();
 				v-model="role"
 				class="w-44"
 				compact
-				item-text="label"
-				item-value="value"
 				:items="roles"
 				label="Role"
 				label-mode="outside"
@@ -1408,8 +1406,6 @@ import { BbButton } from 'bitboss-ui';
 			v-if="ctx.reminders.enabled"
 			class="max-w-72"
 			compact
-			item-text="label"
-			item-value="value"
 			:items="cadences"
 			label="Reminder schedule"
 			label-mode="outside"

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

@@ -545,9 +545,9 @@ export function useOwnershipAtlas(): OwnershipAtlasContext {
 				<BbBreadcrumbs
 					class="min-w-0 flex-auto"
 					:items="[
-						{ key: 'admin', text: 'Admin', to: '/admin' },
-						{ key: 'access', text: 'Access', to: '/access' },
-						{ key: 'ownership', text: 'Ownership' },
+						{ value: 'admin', label: 'Admin', to: '/admin' },
+						{ value: 'access', label: 'Access', to: '/access' },
+						{ value: 'ownership', label: 'Ownership' },
 					]"
 				/>
 				<div class="flex shrink-0 items-center gap-2">
@@ -593,13 +593,13 @@ export function useOwnershipAtlas(): OwnershipAtlasContext {
 				v-model="ctx.tab.value"
 				compact
 				:items="[
-					{ key: 'all', label: `All · ${ctx.tabCounts.value.all}` },
+					{ value: 'all', label: `All · ${ctx.tabCounts.value.all}` },
 					{
-						key: 'americas',
+						value: 'americas',
 						label: `Americas · ${ctx.tabCounts.value.americas}`,
 					},
-					{ key: 'emea', label: `EMEA · ${ctx.tabCounts.value.emea}` },
-					{ key: 'apac', label: `APAC · ${ctx.tabCounts.value.apac}` },
+					{ value: 'emea', label: `EMEA · ${ctx.tabCounts.value.emea}` },
+					{ value: 'apac', label: `APAC · ${ctx.tabCounts.value.apac}` },
 				]"
 			/>
 
@@ -962,8 +962,6 @@ const monthLabel = (value: string) =>
 		<BbSelectPopover
 			v-model="ctx.filters.kinds"
 			clearable
-			item-text="label"
-			item-value="value"
 			:items="kindOptions"
 			multiple
 		>

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

@@ -847,12 +847,12 @@ const ctx = provideInvoiceForm();
 
 // A real trail, ≥ 2 linked levels; the current page carries no target.
 const trail = computed(() => [
-	{ key: 'dashboard', text: 'Dashboard', to: '/dashboard' },
-	{ key: 'billing', text: 'Billing', to: '/billing' },
-	{ key: 'invoices', text: 'Invoices', to: '/invoices' },
+	{ value: 'dashboard', label: 'Dashboard', to: '/dashboard' },
+	{ value: 'billing', label: 'Billing', to: '/billing' },
+	{ value: 'invoices', label: 'Invoices', to: '/invoices' },
 	{
-		key: 'invoice',
-		text:
+		value: 'invoice',
+		label:
 			ctx.mode === 'edit'
 				? (ctx.invoiceNumber.value ?? 'Invoice')
 				: 'New invoice',