@auto-engineer/generate-react-client 1.95.0 → 1.96.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @auto-engineer/generate-react-client
 
+## 1.96.0
+
+### Minor Changes
+
+- [`81f38b5`](https://github.com/BeOnAuto/auto-engineer/commit/81f38b57044f9556a9f90dca2cd5fc945c9cd34c) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **packages/pipeline**: add getRunStats method to PipelineReadModel
+
+- [`26e7f3e`](https://github.com/BeOnAuto/auto-engineer/commit/26e7f3e445149e3eef2e4872686aff841ff25a70) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: add scene field to NarrativeSchema
+
+- [`4a24c5a`](https://github.com/BeOnAuto/auto-engineer/commit/4a24c5a1e62a943760e7d855434e5e2b9a9d9a22) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **dev-server**: add preWarmed flag to install client dependencies
+
+- [`b227607`](https://github.com/BeOnAuto/auto-engineer/commit/b227607fb4cc5e23b4ee12073d48058d6d6031e1) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **server-generator-apollo-emmett**: remove --ignore-workspace from install command
+
+- [`f42888d`](https://github.com/BeOnAuto/auto-engineer/commit/f42888de73e6167e92316b657da7834869e6cf39) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: add JourneyPlanningSchema progressive disclosure variant
+
+- [`2709e66`](https://github.com/BeOnAuto/auto-engineer/commit/2709e6650ae277a7abacc4c4b4cbfd5fdc1cbc86) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: export Journey, SceneClassification, SceneRoute, JourneyPlanning types
+
+- [`b1a635a`](https://github.com/BeOnAuto/auto-engineer/commit/b1a635aa5845d270086e354685d8277106e9d633) Thanks [@osamanar](https://github.com/osamanar)! - Based on the diff analysis, here's the changelog:
+  - Upgraded AI prompt system with detailed, role-based prompts for component, test, story, and reconciler generation
+  - Added a reconciliation step that harmonizes generated component code with its Storybook story
+  - Introduced an automated improvement loop that evaluates output quality across multiple spec scenarios and iteratively refines prompts
+  - Consolidated shared types and spec-building logic into reusable modules, reducing duplication across generators
+  - Added sample component specs (action button, data card, search input, and more) for benchmarking prompt quality
+
+- [`032349d`](https://github.com/BeOnAuto/auto-engineer/commit/032349d475dd3cea19fe440bf4f903bd473dec60) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **typical**: pass preWarmed flag from DEPS_PRE_WARMED env var and remove --ignore-workspace
+
+- [`a177d2a`](https://github.com/BeOnAuto/auto-engineer/commit/a177d2a07e71e7c6f98146ce8f6287a4d2829c37) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: add SceneRouteSchema and SceneClassificationSchema
+
+- [`42d7111`](https://github.com/BeOnAuto/auto-engineer/commit/42d711159577d6844e74955a10361d57b154ca44) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **packages/pipeline**: add getAllItemStatuses and getAllNodeStatuses to PipelineReadModel
+
+- [`19d3375`](https://github.com/BeOnAuto/auto-engineer/commit/19d33751bc6912c1e2745e0f06b860f16bd2056e) Thanks [@github-actions[bot]](https://github.com/github-actions%5Bbot%5D)! - - **server-generator-apollo-emmett**: add null-document guidance to projection template
+  - **server-generator-apollo-emmett**: add discriminated union guidance to evolve template
+  - **server-generator-apollo-emmett**: fill missing inline object fields with type defaults
+  - **server-implementer**: add discriminated union narrowing guidance to prompts
+  - **server-implementer**: load full shared directory into implementer context
+
+- [`981285d`](https://github.com/BeOnAuto/auto-engineer/commit/981285d9d5fa747a9d924d9388e111750453e0be) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **dev-server**: add preWarmed flag to install server dependencies
+
+- [`267cb9f`](https://github.com/BeOnAuto/auto-engineer/commit/267cb9fd83c90bd4a7e3a9b38c2577b3d744ad61) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: add journeys to modelSchema and JourneyPlanningSchema
+
+- [`056ef79`](https://github.com/BeOnAuto/auto-engineer/commit/056ef797bd70346b47f0f0ad2a48a2c567204d46) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **packages/pipeline**: add GET /run-stats endpoint with pipeline status
+
+- [`a6cb7ec`](https://github.com/BeOnAuto/auto-engineer/commit/a6cb7ec9460bc4412e5ce022473815e668774f44) Thanks [@osamanar](https://github.com/osamanar)! - - Improved the starter template for generated React clients
+  - Added a run script for easier project execution
+
+- [`2e7404e`](https://github.com/BeOnAuto/auto-engineer/commit/2e7404e5ce5f222d0931e63d8adb2f8acbeec494) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: add JourneySchema
+
+### Patch Changes
+
+- [`6dfd6cc`](https://github.com/BeOnAuto/auto-engineer/commit/6dfd6ccac984f3f85cfdfd8de9c0771083e1be8d) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **typical**: add server deps to root for workspace pre-warming
+
+- [`991cb70`](https://github.com/BeOnAuto/auto-engineer/commit/991cb70914a145e20f174698418a16e81782221c) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **typical**: convert typical example to pnpm workspace
+
+- [`cf8c874`](https://github.com/BeOnAuto/auto-engineer/commit/cf8c874347eff977663c5f958c9fcba06a65921e) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: add ketchup plan for journey-narrative consolidation RFC
+
+- [`f02782d`](https://github.com/BeOnAuto/auto-engineer/commit/f02782d419431234046b0f0bd91ead278f9a1b07) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **packages/pipeline**: add correlationId query param and use runStats for hasActivity in /run-stats
+
+- [`02bf378`](https://github.com/BeOnAuto/auto-engineer/commit/02bf378c5f26061efef1636abdffa472600b8103) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **pipeline**: sort exports to fix biome organizeImports error
+
+- [`b1d6595`](https://github.com/BeOnAuto/auto-engineer/commit/b1d6595116b32332e38ee7b34a2b274ada8d173e) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - Updated esbuild build tool dependencies to latest versions
+
+- [`c756f3f`](https://github.com/BeOnAuto/auto-engineer/commit/c756f3fed9c48547b2709128c76ab81262ce25c6) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **narrative**: update ketchup-plan and apply linter fixes
+
+- [`06efd83`](https://github.com/BeOnAuto/auto-engineer/commit/06efd83cb0c813fc5e869ac9f3ff7811a3857940) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **cli**: increase server test timeouts for CI reliability
+
+- [`a5cb16c`](https://github.com/BeOnAuto/auto-engineer/commit/a5cb16ccf7b3758e39b8bf2d96ce164b7e3d2bc6) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **typical**: update lockfile for server deps
+
+- [`784c650`](https://github.com/BeOnAuto/auto-engineer/commit/784c6504222da8bd8557cfde80252866fc2b69ef) Thanks [@SamHatoum](https://github.com/SamHatoum)! - - **pipeline**: export RunStats type from package index
+
+- Updated dependencies [[`81f38b5`](https://github.com/BeOnAuto/auto-engineer/commit/81f38b57044f9556a9f90dca2cd5fc945c9cd34c), [`26e7f3e`](https://github.com/BeOnAuto/auto-engineer/commit/26e7f3e445149e3eef2e4872686aff841ff25a70), [`4a24c5a`](https://github.com/BeOnAuto/auto-engineer/commit/4a24c5a1e62a943760e7d855434e5e2b9a9d9a22), [`6dfd6cc`](https://github.com/BeOnAuto/auto-engineer/commit/6dfd6ccac984f3f85cfdfd8de9c0771083e1be8d), [`b227607`](https://github.com/BeOnAuto/auto-engineer/commit/b227607fb4cc5e23b4ee12073d48058d6d6031e1), [`f42888d`](https://github.com/BeOnAuto/auto-engineer/commit/f42888de73e6167e92316b657da7834869e6cf39), [`991cb70`](https://github.com/BeOnAuto/auto-engineer/commit/991cb70914a145e20f174698418a16e81782221c), [`2709e66`](https://github.com/BeOnAuto/auto-engineer/commit/2709e6650ae277a7abacc4c4b4cbfd5fdc1cbc86), [`b1a635a`](https://github.com/BeOnAuto/auto-engineer/commit/b1a635aa5845d270086e354685d8277106e9d633), [`032349d`](https://github.com/BeOnAuto/auto-engineer/commit/032349d475dd3cea19fe440bf4f903bd473dec60), [`cf8c874`](https://github.com/BeOnAuto/auto-engineer/commit/cf8c874347eff977663c5f958c9fcba06a65921e), [`a177d2a`](https://github.com/BeOnAuto/auto-engineer/commit/a177d2a07e71e7c6f98146ce8f6287a4d2829c37), [`f02782d`](https://github.com/BeOnAuto/auto-engineer/commit/f02782d419431234046b0f0bd91ead278f9a1b07), [`02bf378`](https://github.com/BeOnAuto/auto-engineer/commit/02bf378c5f26061efef1636abdffa472600b8103), [`42d7111`](https://github.com/BeOnAuto/auto-engineer/commit/42d711159577d6844e74955a10361d57b154ca44), [`19d3375`](https://github.com/BeOnAuto/auto-engineer/commit/19d33751bc6912c1e2745e0f06b860f16bd2056e), [`b1d6595`](https://github.com/BeOnAuto/auto-engineer/commit/b1d6595116b32332e38ee7b34a2b274ada8d173e), [`981285d`](https://github.com/BeOnAuto/auto-engineer/commit/981285d9d5fa747a9d924d9388e111750453e0be), [`c756f3f`](https://github.com/BeOnAuto/auto-engineer/commit/c756f3fed9c48547b2709128c76ab81262ce25c6), [`267cb9f`](https://github.com/BeOnAuto/auto-engineer/commit/267cb9fd83c90bd4a7e3a9b38c2577b3d744ad61), [`056ef79`](https://github.com/BeOnAuto/auto-engineer/commit/056ef797bd70346b47f0f0ad2a48a2c567204d46), [`06efd83`](https://github.com/BeOnAuto/auto-engineer/commit/06efd83cb0c813fc5e869ac9f3ff7811a3857940), [`a5cb16c`](https://github.com/BeOnAuto/auto-engineer/commit/a5cb16ccf7b3758e39b8bf2d96ce164b7e3d2bc6), [`784c650`](https://github.com/BeOnAuto/auto-engineer/commit/784c6504222da8bd8557cfde80252866fc2b69ef), [`a6cb7ec`](https://github.com/BeOnAuto/auto-engineer/commit/a6cb7ec9460bc4412e5ce022473815e668774f44), [`2e7404e`](https://github.com/BeOnAuto/auto-engineer/commit/2e7404e5ce5f222d0931e63d8adb2f8acbeec494)]:
+  - @auto-engineer/file-upload@1.96.0
+  - @auto-engineer/message-bus@1.96.0
+
 ## 1.95.0
 
 ### Minor Changes

package/dist/starter/index.html

@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="color-scheme" content="light dark" />
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)" />
     <title>React App</title>
   </head>
   <body>

package/dist/starter/src/App.tsx

@@ -6,14 +6,14 @@ import { Separator } from '@/components/ui/Separator';
 const queryClient = new QueryClient();
 
 const LandingPage = () => (
-	<div className="min-h-screen flex items-center justify-center pb-32 bg-gradient-to-br from-background to-muted/50">
+	<main className="min-h-screen flex items-center justify-center pb-32 bg-gradient-to-br from-background to-muted/50">
 		<Card className="border-0 shadow-none bg-transparent">
 			<CardContent className="flex flex-col items-center gap-6">
 				<h1 className="text-5xl md:text-7xl font-extralight tracking-tight text-foreground">Your ideas, on Auto.</h1>
 				<Separator className="w-16 bg-muted-foreground/30" />
 			</CardContent>
 		</Card>
-	</div>
+	</main>
 );
 
 export const App = () => (

package/dist/starter/src/components/ui/Accordion.tsx

@@ -27,7 +27,7 @@ function AccordionTrigger({ className, children, ...props }: React.ComponentProp
 			<AccordionPrimitive.Trigger
 				data-slot="accordion-trigger"
 				className={cn(
-					'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+					'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-[color,box-shadow] outline-hidden hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
 					className,
 				)}
 				{...props}

package/dist/starter/src/components/ui/AlertDialog.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { AlertDialog as AlertDialogPrimitive } from 'radix-ui';
 import type * as React from 'react';
 import { Button } from '@/components/ui/Button';
@@ -52,7 +50,7 @@ function AlertDialogContent({
 				data-slot="alert-dialog-content"
 				data-size={size}
 				className={cn(
-					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
+					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 overscroll-contain data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg',
 					className,
 				)}
 				{...props}

package/dist/starter/src/components/ui/AspectRatio.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { AspectRatio as AspectRatioPrimitive } from 'radix-ui';
 
 /**

package/dist/starter/src/components/ui/Badge.tsx

@@ -5,7 +5,7 @@ import type * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-	'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	'inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium tabular-nums w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
 	{
 		variants: {
 			variant: {

package/dist/starter/src/components/ui/Button.tsx

@@ -5,7 +5,7 @@ import type * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 	{
 		variants: {
 			variant: {

package/dist/starter/src/components/ui/Carousel.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
 import { ArrowLeft, ArrowRight } from 'lucide-react';
 import * as React from 'react';

package/dist/starter/src/components/ui/Checkbox.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CheckIcon } from 'lucide-react';
 import { Checkbox as CheckboxPrimitive } from 'radix-ui';
 import type * as React from 'react';
@@ -12,7 +10,7 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
 		<CheckboxPrimitive.Root
 			data-slot="checkbox"
 			className={cn(
-				'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 after:absolute after:-inset-2 after:content-[""]',
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Combobox.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Combobox as ComboboxPrimitive } from '@base-ui/react';
 import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
 import * as React from 'react';
@@ -264,7 +262,7 @@ function ComboboxChipsInput({ className, children, ...props }: ComboboxPrimitive
 	return (
 		<ComboboxPrimitive.Input
 			data-slot="combobox-chip-input"
-			className={cn('min-w-16 flex-1 outline-none', className)}
+			className={cn('min-w-16 flex-1 outline-hidden', className)}
 			{...props}
 		/>
 	);

package/dist/starter/src/components/ui/Command.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Command as CommandPrimitive } from 'cmdk';
 import { SearchIcon } from 'lucide-react';
 import type * as React from 'react';

package/dist/starter/src/components/ui/ContextMenu.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
 import type * as React from 'react';

package/dist/starter/src/components/ui/DesignSystem-Overview.stories.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import {
 	ArchiveIcon,

package/dist/starter/src/components/ui/Dialog.tsx

@@ -57,7 +57,7 @@ function DialogContent({
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
 				className={cn(
-					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg',
+					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-hidden overscroll-contain sm:max-w-lg',
 					className,
 				)}
 				{...props}

package/dist/starter/src/components/ui/Direction.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Direction } from 'radix-ui';
 import type * as React from 'react';
 

package/dist/starter/src/components/ui/Drawer.tsx

@@ -53,7 +53,7 @@ function DrawerContent({ className, children, ...props }: React.ComponentProps<t
 			<DrawerPrimitive.Content
 				data-slot="drawer-content"
 				className={cn(
-					'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
+					'group/drawer-content bg-background fixed z-50 flex h-auto flex-col overscroll-contain',
 					'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
 					'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
 					'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',

package/dist/starter/src/components/ui/DropdownMenu.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import type * as React from 'react';

package/dist/starter/src/components/ui/Field.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { cva, type VariantProps } from 'class-variance-authority';
 import { useMemo } from 'react';
 import { Label } from '@/components/ui/Label';

package/dist/starter/src/components/ui/Input.tsx

@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
 			type={type}
 			data-slot="input"
 			className={cn(
-				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-hidden file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 				'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
 				'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 				className,

package/dist/starter/src/components/ui/InputGroup.tsx

@@ -12,7 +12,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 			data-slot="input-group"
 			role="group"
 			className={cn(
-				'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
+				'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-hidden',
 				'h-9 min-w-0 has-[>textarea]:h-auto',
 
 				// Variants based on alignment.

package/dist/starter/src/components/ui/InputOTP.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { OTPInput, OTPInputContext } from 'input-otp';
 import { MinusIcon } from 'lucide-react';
 import * as React from 'react';
@@ -45,7 +43,7 @@ function InputOTPSlot({
 			data-slot="input-otp-slot"
 			data-active={isActive}
 			className={cn(
-				'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
+				'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-[border-color,box-shadow] outline-hidden first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Item.tsx

@@ -17,7 +17,7 @@ function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Sepa
 }
 
 const itemVariants = cva(
-	'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+	'group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
 	{
 		variants: {
 			variant: {

package/dist/starter/src/components/ui/Menubar.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
 import { Menubar as MenubarPrimitive } from 'radix-ui';
 import type * as React from 'react';
@@ -206,7 +204,7 @@ function MenubarSubTrigger({
 			data-slot="menubar-sub-trigger"
 			data-inset={inset}
 			className={cn(
-				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8',
+				'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/NativeSelect.tsx

@@ -21,7 +21,7 @@ function NativeSelect({
 				data-slot="native-select"
 				data-size={size}
 				className={cn(
-					'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1',
+					'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-hidden disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1',
 					'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
 					'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
 					className,

package/dist/starter/src/components/ui/NavigationMenu.tsx

@@ -49,7 +49,7 @@ function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof
 }
 
 const navigationMenuTriggerStyle = cva(
-	'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+	'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
 );
 
 /** The button that opens a NavigationMenuContent dropdown, with an animated chevron indicator. */
@@ -80,7 +80,7 @@ function NavigationMenuContent({ className, ...props }: React.ComponentProps<typ
 			data-slot="navigation-menu-content"
 			className={cn(
 				'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
-				'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+				'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-hidden',
 				className,
 			)}
 			{...props}
@@ -112,7 +112,7 @@ function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof
 		<NavigationMenuPrimitive.Link
 			data-slot="navigation-menu-link"
 			className={cn(
-				"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+				"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-colors outline-hidden focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Progress.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Progress as ProgressPrimitive } from 'radix-ui';
 import type * as React from 'react';
 
@@ -15,7 +13,7 @@ function Progress({ className, value, ...props }: React.ComponentProps<typeof Pr
 		>
 			<ProgressPrimitive.Indicator
 				data-slot="progress-indicator"
-				className="bg-primary h-full w-full flex-1 transition-all"
+				className="bg-primary h-full w-full flex-1 transition-transform"
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>

package/dist/starter/src/components/ui/RadioGroup.tsx

@@ -18,7 +18,7 @@ function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof Rad
 		<RadioGroupPrimitive.Item
 			data-slot="radio-group-item"
 			className={cn(
-				'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				'border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 relative aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 after:absolute after:-inset-2 after:content-[""]',
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Resizable.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { GripVerticalIcon } from 'lucide-react';
 import * as ResizablePrimitive from 'react-resizable-panels';
 

package/dist/starter/src/components/ui/ScrollArea.tsx

@@ -12,7 +12,7 @@ function ScrollArea({ className, children, ...props }: React.ComponentProps<type
 		<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn('relative', className)} {...props}>
 			<ScrollAreaPrimitive.Viewport
 				data-slot="scroll-area-viewport"
-				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+				className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-hidden focus-visible:ring-[3px] focus-visible:outline-1"
 			>
 				{children}
 			</ScrollAreaPrimitive.Viewport>

package/dist/starter/src/components/ui/Select.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import { Select as SelectPrimitive } from 'radix-ui';
 import type * as React from 'react';
@@ -37,7 +35,7 @@ function SelectTrigger({
 			data-slot="select-trigger"
 			data-size={size}
 			className={cn(
-				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Sheet.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { XIcon } from 'lucide-react';
 import { Dialog as SheetPrimitive } from 'radix-ui';
 import type * as React from 'react';
@@ -59,7 +57,7 @@ function SheetContent({
 			<SheetPrimitive.Content
 				data-slot="sheet-content"
 				className={cn(
-					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out overscroll-contain data-[state=closed]:duration-200 data-[state=open]:duration-300',
 					side === 'right' &&
 						'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
 					side === 'left' &&

package/dist/starter/src/components/ui/Sidebar.tsx

@@ -277,7 +277,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
 			onClick={toggleSidebar}
 			title="Toggle Sidebar"
 			className={cn(
-				'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+				'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-colors ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
 				'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
 				'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
 				'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',

package/dist/starter/src/components/ui/Slider.tsx

@@ -46,7 +46,7 @@ function Slider({
 					data-slot="slider-thumb"
 					// biome-ignore lint/suspicious/noArrayIndexKey: Slider thumbs are positional and have no unique identifiers
 					key={index}
-					className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+					className="border-primary ring-ring/50 relative block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 after:absolute after:-inset-3 after:content-['']"
 				/>
 			))}
 		</SliderPrimitive.Root>

package/dist/starter/src/components/ui/Sonner.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Toaster as Sonner, type ToasterProps } from 'sonner';

package/dist/starter/src/components/ui/Switch.tsx

@@ -17,7 +17,7 @@ function Switch({
 			data-slot="switch"
 			data-size={size}
 			className={cn(
-				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6',
+				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-colors outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6',
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Table.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type * as React from 'react';
 
 import { cn } from '@/lib/utils';
@@ -68,7 +66,7 @@ function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
 		<td
 			data-slot="table-cell"
 			className={cn(
-				'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+				'tabular-nums p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Tabs.tsx

@@ -56,7 +56,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
 			className={cn(
-				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
 				'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground',
 				'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
@@ -69,7 +69,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
 
 /** The content panel associated with a tab trigger, shown when its corresponding trigger is active. */
 function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
-	return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />;
+	return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-hidden', className)} {...props} />;
 }
 
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/dist/starter/src/components/ui/Textarea.tsx

@@ -11,7 +11,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
 		<textarea
 			data-slot="textarea"
 			className={cn(
-				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
 				className,
 			)}
 			{...props}

package/dist/starter/src/components/ui/Toast.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { cva, type VariantProps } from 'class-variance-authority';
 import { XIcon } from 'lucide-react';
 import { Toast as ToastPrimitive } from 'radix-ui';
@@ -29,7 +27,7 @@ function ToastViewport({ className, ...props }: React.ComponentProps<typeof Toas
 }
 
 const toastVariants = cva(
-	'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+	'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-transform data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
 	{
 		variants: {
 			variant: {
@@ -58,7 +56,7 @@ function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastP
 		<ToastPrimitive.Action
 			data-slot="toast-action"
 			className={cn(
-				'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+				'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-hidden focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
 				className,
 			)}
 			{...props}
@@ -72,7 +70,7 @@ function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPr
 		<ToastPrimitive.Close
 			data-slot="toast-close"
 			className={cn(
-				'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+				'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
 				className,
 			)}
 			toast-close=""

package/dist/starter/src/components/ui/Toaster.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/Toast';
 import { useToast } from '@/hooks/use-toast';
 

package/dist/starter/src/components/ui/Toggle.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { cva, type VariantProps } from 'class-variance-authority';
 import { Toggle as TogglePrimitive } from 'radix-ui';
 import type * as React from 'react';
@@ -7,7 +5,7 @@ import type * as React from 'react';
 import { cn } from '@/lib/utils';
 
 const toggleVariants = cva(
-	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-hidden transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
 	{
 		variants: {
 			variant: {

package/dist/starter/src/components/ui/ToggleGroup.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import type { VariantProps } from 'class-variance-authority';
 import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
 import * as React from 'react';

package/dist/starter/src/hooks/use-mobile.ts

@@ -3,17 +3,17 @@ import * as React from 'react';
 const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+	const [isMobile, setIsMobile] = React.useState(false);
 
 	React.useEffect(() => {
 		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
 		const onChange = () => {
-			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+			setIsMobile(mql.matches);
 		};
+		onChange();
 		mql.addEventListener('change', onChange);
-		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
 		return () => mql.removeEventListener('change', onChange);
 	}, []);
 
-	return !!isMobile;
+	return isMobile;
 }

package/dist/starter/src/hooks/use-toast.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import * as React from 'react';
 
 import type { ToastActionElement, ToastProps } from '@/components/ui/Toast';

package/dist/starter/src/index.css

@@ -118,4 +118,41 @@
 	body {
 		@apply bg-background text-foreground;
 	}
+
+	/* Heading typography */
+	h1, h2, h3, h4, h5, h6 {
+		text-wrap: balance;
+	}
+
+	/* Touch interaction improvements */
+	button, a, input, select, textarea, [role="button"] {
+		-webkit-tap-highlight-color: transparent;
+		touch-action: manipulation;
+	}
+
+	/* Color scheme for native controls */
+	:root {
+		color-scheme: light;
+		scrollbar-gutter: stable;
+	}
+	.dark {
+		color-scheme: dark;
+	}
+
+	/* Reduced motion: respect user preference globally */
+	@media (prefers-reduced-motion: reduce) {
+		*, *::before, *::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+			scroll-behavior: auto !important;
+		}
+	}
+
+	/* Safe area insets for notched devices */
+	body {
+		padding-left: env(safe-area-inset-left);
+		padding-right: env(safe-area-inset-right);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
 }

package/package.json

@@ -19,13 +19,13 @@
   },
   "dependencies": {
     "debug": "^4.4.1",
-    "@auto-engineer/file-upload": "1.95.0",
-    "@auto-engineer/message-bus": "1.95.0"
+    "@auto-engineer/file-upload": "1.96.0",
+    "@auto-engineer/message-bus": "1.96.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12"
   },
-  "version": "1.95.0",
+  "version": "1.96.0",
   "scripts": {
     "build": "tsc && tsx ../../scripts/fix-esm-imports.ts && cp -r starter dist/",
     "test-cli": "tsx test-cli.ts",