create-auto-app 1.32.0 → 1.34.0

package/templates/typical/client/src/components/ui/Textarea.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+/**
+ * A multi-line text input that auto-sizes to its content via field-sizing-content.
+ * Supports aria-invalid styling for form validation errors.
+ */
 function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (
     <textarea

package/templates/typical/client/src/components/ui/Toast.stories.tsx

@@ -40,6 +40,7 @@ function ToastDemo() {
   );
 }
 
+/** Demonstrates triggering a basic toast notification with a title and description. */
 export const Default: Story = {
   render: () => <ToastDemo />,
 };
@@ -66,6 +67,7 @@ function ToastDestructiveDemo() {
   );
 }
 
+/** Shows a destructive-variant toast for error or warning scenarios. */
 export const Destructive: Story = {
   render: () => <ToastDestructiveDemo />,
 };
@@ -92,10 +94,12 @@ function ToastWithActionDemo() {
   );
 }
 
+/** Shows a toast with an action button (e.g., "Undo") alongside the message. */
 export const WithAction: Story = {
   render: () => <ToastWithActionDemo />,
 };
 
+/** Shows a toast rendered inline (always open) using the primitive subcomponents directly. */
 export const Inline: Story = {
   render: () => (
     <ToastProvider>

package/templates/typical/client/src/components/ui/Toast.tsx

@@ -7,10 +7,14 @@ import { Toast as ToastPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** Temporary notification at screen edge with swipe-to-dismiss. Supports default and destructive variants. */
+
+/** Provides the toast context for managing toast state and swipe behavior. */
 function ToastProvider({ ...props }: React.ComponentProps<typeof ToastPrimitive.Provider>) {
   return <ToastPrimitive.Provider data-slot="toast-provider" {...props} />;
 }
 
+/** The fixed-position viewport where toasts are rendered, positioned at bottom-right on larger screens. */
 function ToastViewport({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Viewport>) {
   return (
     <ToastPrimitive.Viewport
@@ -39,6 +43,7 @@ const toastVariants = cva(
   },
 );
 
+/** An individual toast notification with default or destructive variant styling. */
 function Toast({
   className,
   variant,
@@ -47,6 +52,7 @@ function Toast({
   return <ToastPrimitive.Root data-slot="toast" className={cn(toastVariants({ variant }), className)} {...props} />;
 }
 
+/** An action button displayed within a toast, such as "Undo" or "Retry". */
 function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>) {
   return (
     <ToastPrimitive.Action
@@ -60,6 +66,7 @@ function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastP
   );
 }
 
+/** A close button positioned in the top-right corner of a toast, visible on hover. */
 function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>) {
   return (
     <ToastPrimitive.Close
@@ -76,6 +83,7 @@ function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPr
   );
 }
 
+/** The bold heading text of a toast notification. */
 function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>) {
   return (
     <ToastPrimitive.Title
@@ -86,6 +94,7 @@ function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPr
   );
 }
 
+/** The secondary descriptive text of a toast notification. */
 function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>) {
   return (
     <ToastPrimitive.Description

package/templates/typical/client/src/components/ui/Toaster.tsx

@@ -3,6 +3,10 @@
 import { useToast } from '@/hooks/use-toast';
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '@/components/ui/Toast';
 
+/**
+ * Renders all active toasts from the useToast hook into a fixed-position viewport.
+ * Place once at the app root to enable imperative toast notifications via the useToast hook.
+ */
 function Toaster() {
   const { toasts } = useToast();
 

package/templates/typical/client/src/components/ui/Toggle.stories.tsx

@@ -9,6 +9,7 @@ const meta: Meta<typeof Toggle> = {
 export default meta;
 type Story = StoryObj<typeof Toggle>;
 
+/** Shows a toggle button with a bold icon in the default ghost variant. */
 export const Default: Story = {
   args: {
     'aria-label': 'Toggle bold',
@@ -16,6 +17,7 @@ export const Default: Story = {
   },
 };
 
+/** Shows the outline variant with a visible border. */
 export const Outline: Story = {
   args: {
     variant: 'outline',
@@ -24,6 +26,7 @@ export const Outline: Story = {
   },
 };
 
+/** Shows a toggle with a text label instead of an icon. */
 export const WithText: Story = {
   args: {
     'aria-label': 'Toggle italic',
@@ -31,6 +34,7 @@ export const WithText: Story = {
   },
 };
 
+/** Shows a toggle in its initially pressed (on) state. */
 export const Pressed: Story = {
   args: {
     defaultPressed: true,

package/templates/typical/client/src/components/ui/Toggle.tsx

@@ -27,6 +27,7 @@ const toggleVariants = cva(
   },
 );
 
+/** A two-state button for toolbar controls. Has "default" (ghost) and "outline" variants in sm/default/lg sizes. */
 function Toggle({
   className,
   variant,

package/templates/typical/client/src/components/ui/ToggleGroup.stories.tsx

@@ -9,6 +9,7 @@ const meta: Meta<typeof ToggleGroup> = {
 export default meta;
 type Story = StoryObj<typeof ToggleGroup>;
 
+/** Shows a single-selection toggle group where only one item can be active at a time. */
 export const Single: Story = {
   render: () => (
     <ToggleGroup type="single">
@@ -25,6 +26,7 @@ export const Single: Story = {
   ),
 };
 
+/** Shows a multi-selection toggle group with bold and italic pre-selected. */
 export const Multiple: Story = {
   render: () => (
     <ToggleGroup type="multiple" defaultValue={['bold', 'italic']}>
@@ -41,6 +43,7 @@ export const Multiple: Story = {
   ),
 };
 
+/** Shows a toggle group using the outline variant with visible borders. */
 export const Outline: Story = {
   render: () => (
     <ToggleGroup type="single" variant="outline">

package/templates/typical/client/src/components/ui/ToggleGroup.tsx

@@ -17,10 +17,12 @@ const ToggleGroupContext = React.createContext<
   spacing: 0,
 });
 
+/** A group of toggles where one (`type="single"`) or multiple (`type="multiple"`) can be active. */
 function ToggleGroup({
   className,
   variant,
   size,
+  /** Controls gap between items. When 0, items are visually joined with shared borders. */
   spacing = 0,
   children,
   ...props
@@ -46,6 +48,7 @@ function ToggleGroup({
   );
 }
 
+/** An individual toggle button within a ToggleGroup. Inherits variant and size from the parent group context. */
 function ToggleGroupItem({
   className,
   children,

package/templates/typical/client/src/components/ui/Tooltip.stories.tsx

@@ -9,6 +9,7 @@ const meta: Meta<typeof Tooltip> = {
 export default meta;
 type Story = StoryObj<typeof Tooltip>;
 
+/** Shows a basic tooltip appearing on hover over a button. */
 export const Default: Story = {
   render: () => (
     <TooltipProvider>
@@ -24,6 +25,7 @@ export const Default: Story = {
   ),
 };
 
+/** Shows a tooltip with additional spacing between the trigger and content via sideOffset. */
 export const WithSideOffset: Story = {
   render: () => (
     <TooltipProvider>

package/templates/typical/client/src/components/ui/Tooltip.tsx

@@ -3,18 +3,24 @@ import { Tooltip as TooltipPrimitive } from 'radix-ui';
 
 import { cn } from '@/lib/utils';
 
+/** Brief descriptive popup on hover/focus. Has enter/exit animations and arrow indicator. Wrap app in TooltipProvider first. */
+
+/** Provides shared tooltip configuration (e.g., delay duration) for all nested Tooltip instances. */
 function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
   return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
 }
 
+/** The root component that manages open/close state for a single tooltip. */
 function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
   return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
+/** The element that triggers the tooltip on hover or focus. */
 function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
 }
 
+/** The popup content panel rendered via a portal with an arrow indicator. */
 function TooltipContent({
   className,
   sideOffset = 0,

package/templates/typical/client/tsconfig.json

@@ -1,4 +1,10 @@
 {
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
   "files": [],
   "references": [{ "path": "./tsconfig.app.json" }]
 }

package/templates/typical/client/.claude-auto/.claude.hooks.json

@@ -1,28 +0,0 @@
-{
-  "autoContinue": {
-    "mode": "smart",
-    "maxIterations": 0,
-    "iteration": 0,
-    "skipModes": [
-      "plan"
-    ]
-  },
-  "validateCommit": {
-    "mode": "strict",
-    "batchCount": 3
-  },
-  "denyList": {
-    "enabled": true,
-    "extraPatterns": []
-  },
-  "promptReminder": {
-    "enabled": true
-  },
-  "subagentHooks": {
-    "validateCommitOnExplore": false,
-    "validateCommitOnWork": true,
-    "validateCommitOnUnknown": true
-  },
-  "updatedAt": "2026-02-17T21:29:16.970Z",
-  "updatedBy": "init"
-}

package/templates/typical/client/tsconfig.staging.json

@@ -1,8 +0,0 @@
-{
-  "extends": "./tsconfig.app.json",
-  "compilerOptions": {
-    "incremental": true,
-    "tsBuildInfoFile": ".staging/.tsbuildinfo"
-  },
-  "include": ["src", ".staging"]
-}