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

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

@@ -26,7 +26,12 @@ Sibling recipes: [Vue](../vue/upload-center.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), [Page Shell](../../guides/page-shell.md)
   and [Floating Bottom Panel](../../guides/floating-bottom-panel.md) copied
   into `app/components/` and `app/composables/` per their guides — every recipe page assumes
@@ -533,7 +538,6 @@ export function provideUploadCenter(): UploadCenterContext {
 			toast({
 				title: `Could not save ${receipt.filename}. Changes were reverted.`,
 				variant: 'destructive',
-				icon: 'lucide:circle-x',
 			});
 		}
 	};
@@ -544,7 +548,6 @@ export function provideUploadCenter(): UploadCenterContext {
 		toast({
 			title: `${receipt.merchant ?? receipt.filename} submitted for approval.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -557,7 +560,6 @@ export function provideUploadCenter(): UploadCenterContext {
 		toast({
 			title: `${submitted} receipts submitted for approval.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -575,7 +577,6 @@ export function provideUploadCenter(): UploadCenterContext {
 		toast({
 			title: `${receipt.filename} removed.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 		return true;
 	};
@@ -617,7 +618,6 @@ export function provideUploadCenter(): UploadCenterContext {
 		toast({
 			title: `${count} receipts filed under ${category?.name ?? 'the selected category'}.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -640,7 +640,6 @@ export function provideUploadCenter(): UploadCenterContext {
 		toast({
 			title: `${count} receipts removed.`,
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -963,11 +962,12 @@ const submitLabel = computed(() =>
 	<BbDropzone
 		v-model="pending"
 		:accept="ACCEPT"
-		:errors="dropError"
+		:errors="dropErrors"
 		:max-files="20"
 		:max-size="MAX_SIZE"
 		multiple
 		@error="onError"
+		@update:model-value="dropErrors = []"
 	>
 		<template #default="{ dragging, focused, open }">
 			<div
@@ -1029,26 +1029,27 @@ const ctx = useUploadCenter();
 const pending = ref<File[]>([]);
 watch(pending, (files) => {
 	if (files.length === 0) return;
-	dropError.value = undefined;
 	ctx.enqueueFiles(files);
 	pending.value = [];
 });
 
 // The errors display is a round-trip: map each typed reject to a sentence
 // and feed it back through the `errors` prop (rendered in the built-in
-// aria-live region and referenced from the input's aria-describedby). Batch drops emit one error per file; showing the last
-// message keeps the surface calm.
-const dropError = ref<string | undefined>();
-const onError = (error: DropZoneError) => {
-	if (error.type === 'maxSize') {
-		dropError.value = `${error.filename} is ${error.formattedSize} — receipts are capped at ${error.formattedMaxSize}.`;
-	} else if (error.type === 'accept') {
-		dropError.value = `${error.filename} is not a JPG, PNG, HEIC or PDF.`;
-	} else if (error.type === 'uniqueness') {
-		dropError.value = `${error.filename} is already in this drop.`;
-	} else {
-		dropError.value = `That drop had ${error.totalFiles} files — add at most 20 at a time.`;
-	}
+// aria-live region and referenced from the input's aria-describedby). A drop
+// updates the model first (the last drop's lines clear there), then emits ONE
+// `error` with every file it rejected: one line each.
+const dropErrors = ref<string[]>([]);
+const describe = (error: DropZoneError) => {
+	if (error.type === 'maxSize')
+		return `${error.filename} is ${error.formattedSize} — receipts are capped at ${error.formattedMaxSize}.`;
+	if (error.type === 'accept')
+		return `${error.filename} is not a JPG, PNG, HEIC or PDF.`;
+	if (error.type === 'uniqueness')
+		return `${error.filename} is already in this drop.`;
+	return `${error.filename} was not added — add at most ${error.maxFiles} at a time.`;
+};
+const onError = (rejections: DropZoneError[]) => {
+	dropErrors.value = rejections.map(describe);
 };
 </script>
 ```
@@ -1093,6 +1094,7 @@ const onError = (error: DropZoneError) => {
 		<BbSelectPopover
 			v-model="ctx.filters.merchant"
 			clearable
+			:filter-by="false"
 			:items="ctx.searchMerchants"
 			width="240px"
 		>
@@ -1808,8 +1810,8 @@ const longDate = (value: string) =>
 			>
 				<BbIcon class="text-(--bb-text-muted)" icon="lucide:store" size="18" />
 			</div>
+			<!-- The sidebar title already names the merchant. -->
 			<div class="flex flex-col">
-				<h2 class="text-base font-semibold">{{ merchant.name }}</h2>
 				<p class="text-xs text-(--bb-text-muted)">
 					{{ merchant.defaultCategoryName }} · this year
 				</p>

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

@@ -26,7 +26,12 @@ Sibling recipes: [Vue](../vue/wizard-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)).
 - [App Layout](../../guides/app-layout.md) and
   [Page Shell](../../guides/page-shell.md) copied into
   `app/components/` and `app/composables/` per their guides — the page renders inside this
@@ -575,7 +580,6 @@ export function provideCampaignWizard(): CampaignWizardContext {
 			toast({
 				title: 'Draft saved.',
 				variant: 'success',
-				icon: 'lucide:circle-check',
 			});
 		} catch (error) {
 			applyServerErrors(error);
@@ -594,7 +598,6 @@ export function provideCampaignWizard(): CampaignWizardContext {
 		toast({
 			title: 'Test email sent to your address.',
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 	};
 
@@ -622,7 +625,6 @@ export function provideCampaignWizard(): CampaignWizardContext {
 						? 'Campaign is on its way.'
 						: 'Campaign scheduled.',
 				variant: 'success',
-				icon: 'lucide:circle-check',
 			});
 			await navigateTo(`/campaigns/${campaignId}`);
 		} catch (error) {
@@ -646,7 +648,6 @@ export function provideCampaignWizard(): CampaignWizardContext {
 		toast({
 			title: 'Draft discarded.',
 			variant: 'success',
-			icon: 'lucide:circle-check',
 		});
 		await navigateTo('/campaigns');
 	};
@@ -736,7 +737,6 @@ export function useCampaignWizard(): CampaignWizardContext {
 					<BbAlert
 						v-if="summaryIssues.length"
 						hide-close
-						icon="lucide:circle-x"
 						:title="`Fix ${summaryIssues.length} ${summaryIssues.length === 1 ? 'issue' : 'issues'} to continue`"
 						variant="destructive"
 					>
@@ -912,6 +912,7 @@ const status = (key: StepKey) => ctx.stepStatus(key);
 		<BbSelect
 			v-model="ctx.draft.segmentId"
 			:errors="segmentErrors"
+			:filter-by="false"
 			item-text="name"
 			item-value="id"
 			:items="searchSegments"
@@ -1397,8 +1398,9 @@ const isReview = computed(() => ctx.step.value === 'review');
 <!-- components/CampaignWizard/SegmentPeek.vue -->
 <template>
 	<div v-if="segment" class="flex flex-col gap-4 text-sm">
+		<!-- The sidebar title already names the segment; the peek opens on its
+		     facts, never a second name. -->
 		<header class="flex flex-col gap-0.5">
-			<h2 class="text-base font-semibold">{{ segment.name }}</h2>
 			<p class="text-xs text-(--bb-text-muted)">
 				{{ number.format(segment.contactCount) }} contacts · last synced
 				{{ longDate(segment.lastSyncedAt) }}