npm - @react-spa-scaffold/mcp - Versions diffs - 0.3.0 - Mend

@react-spa-scaffold/mcp 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (173) hide show

package/README.md +423 -0
package/dist/features/index.d.ts +5 -0
package/dist/features/index.d.ts.map +1 -0
package/dist/features/index.js +3 -0
package/dist/features/index.js.map +1 -0
package/dist/features/registry.d.ts +10 -0
package/dist/features/registry.d.ts.map +1 -0
package/dist/features/registry.js +508 -0
package/dist/features/registry.js.map +1 -0
package/dist/features/types.d.ts +45 -0
package/dist/features/types.d.ts.map +1 -0
package/dist/features/types.js +5 -0
package/dist/features/types.js.map +1 -0
package/dist/features/versions.d.ts +16 -0
package/dist/features/versions.d.ts.map +1 -0
package/dist/features/versions.js +46 -0
package/dist/features/versions.js.map +1 -0
package/dist/features/versions.json +5 -0
package/dist/index.d.ts +22 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +43 -0
package/dist/index.js.map +1 -0
package/dist/resources/docs.d.ts +29 -0
package/dist/resources/docs.d.ts.map +1 -0
package/dist/resources/docs.js +105 -0
package/dist/resources/docs.js.map +1 -0
package/dist/resources/index.d.ts +2 -0
package/dist/resources/index.d.ts.map +1 -0
package/dist/resources/index.js +2 -0
package/dist/resources/index.js.map +1 -0
package/dist/server.d.ts +12 -0
package/dist/server.d.ts.map +1 -0
package/dist/server.js +115 -0
package/dist/server.js.map +1 -0
package/dist/tools/get-example.d.ts +51 -0
package/dist/tools/get-example.d.ts.map +1 -0
package/dist/tools/get-example.js +90 -0
package/dist/tools/get-example.js.map +1 -0
package/dist/tools/get-features.d.ts +30 -0
package/dist/tools/get-features.d.ts.map +1 -0
package/dist/tools/get-features.js +46 -0
package/dist/tools/get-features.js.map +1 -0
package/dist/tools/get-scaffold.d.ts +77 -0
package/dist/tools/get-scaffold.d.ts.map +1 -0
package/dist/tools/get-scaffold.js +153 -0
package/dist/tools/get-scaffold.js.map +1 -0
package/dist/tools/index.d.ts +4 -0
package/dist/tools/index.d.ts.map +1 -0
package/dist/tools/index.js +4 -0
package/dist/tools/index.js.map +1 -0
package/dist/utils/docs.d.ts +14 -0
package/dist/utils/docs.d.ts.map +1 -0
package/dist/utils/docs.js +64 -0
package/dist/utils/docs.js.map +1 -0
package/dist/utils/examples.d.ts +27 -0
package/dist/utils/examples.d.ts.map +1 -0
package/dist/utils/examples.js +399 -0
package/dist/utils/examples.js.map +1 -0
package/dist/utils/index.d.ts +5 -0
package/dist/utils/index.d.ts.map +1 -0
package/dist/utils/index.js +5 -0
package/dist/utils/index.js.map +1 -0
package/dist/utils/paths.d.ts +28 -0
package/dist/utils/paths.d.ts.map +1 -0
package/dist/utils/paths.js +40 -0
package/dist/utils/paths.js.map +1 -0
package/dist/utils/scaffold.d.ts +50 -0
package/dist/utils/scaffold.d.ts.map +1 -0
package/dist/utils/scaffold.js +500 -0
package/dist/utils/scaffold.js.map +1 -0
package/dist/version.d.ts +5 -0
package/dist/version.d.ts.map +1 -0
package/dist/version.js +19 -0
package/dist/version.js.map +1 -0
package/package.json +63 -0
package/templates/.bundled +0 -0
package/templates/CLAUDE.md +145 -0
package/templates/docs/API_REFERENCE.md +58 -0
package/templates/docs/ARCHITECTURE.md +185 -0
package/templates/docs/CODING_STANDARDS.md +53 -0
package/templates/docs/COMPONENT_GUIDELINES.md +301 -0
package/templates/docs/E2E_TESTING.md +116 -0
package/templates/docs/INTERNATIONALIZATION.md +67 -0
package/templates/docs/TESTING.md +259 -0
package/templates/docs/WORKFLOW.md +170 -0
package/templates/src/App.tsx +42 -0
package/templates/src/components/layout/Header.tsx +19 -0
package/templates/src/components/layout/index.ts +1 -0
package/templates/src/components/shared/ErrorBoundary/ErrorBoundary.tsx +104 -0
package/templates/src/components/shared/ErrorBoundary/index.ts +1 -0
package/templates/src/components/shared/LanguageSwitcher/LanguageSwitcher.tsx +45 -0
package/templates/src/components/shared/LanguageSwitcher/index.ts +1 -0
package/templates/src/components/shared/SEO/SEO.tsx +55 -0
package/templates/src/components/shared/SEO/index.ts +1 -0
package/templates/src/components/shared/ThemeToggle/ThemeToggle.tsx +41 -0
package/templates/src/components/shared/ThemeToggle/index.ts +1 -0
package/templates/src/components/shared/index.ts +4 -0
package/templates/src/components/ui/button.tsx +48 -0
package/templates/src/components/ui/dropdown-menu.tsx +228 -0
package/templates/src/components/ui/form-error.tsx +95 -0
package/templates/src/components/ui/loading.tsx +58 -0
package/templates/src/components/ui/skeleton.tsx +52 -0
package/templates/src/components/ui/sonner.tsx +34 -0
package/templates/src/components/ui/spinner.tsx +40 -0
package/templates/src/components/ui/visually-hidden.tsx +51 -0
package/templates/src/contexts/mobileContext.tsx +66 -0
package/templates/src/contexts/queryContext.tsx +28 -0
package/templates/src/hooks/index.ts +7 -0
package/templates/src/hooks/useContactForm.ts +33 -0
package/templates/src/hooks/useExampleQuery.ts +20 -0
package/templates/src/hooks/useLanguage.ts +23 -0
package/templates/src/hooks/useMediaQuery.ts +53 -0
package/templates/src/hooks/useThemeEffect.ts +31 -0
package/templates/src/hooks/useTouchSizes.ts +16 -0
package/templates/src/i18n/config.ts +11 -0
package/templates/src/i18n/detectLanguage.ts +57 -0
package/templates/src/i18n/index.ts +20 -0
package/templates/src/i18n/loadCatalog.ts +30 -0
package/templates/src/index.css +98 -0
package/templates/src/lib/api.ts +142 -0
package/templates/src/lib/config.ts +15 -0
package/templates/src/lib/constants.ts +8 -0
package/templates/src/lib/env.ts +53 -0
package/templates/src/lib/format.ts +119 -0
package/templates/src/lib/index.ts +24 -0
package/templates/src/lib/routes.ts +11 -0
package/templates/src/lib/storage.ts +91 -0
package/templates/src/lib/storageKeys.ts +10 -0
package/templates/src/lib/utils.ts +6 -0
package/templates/src/lib/validations.ts +39 -0
package/templates/src/locales/de.po +65 -0
package/templates/src/locales/en.po +65 -0
package/templates/src/locales/es.po +65 -0
package/templates/src/main.tsx +107 -0
package/templates/src/mocks/fixtures/index.ts +1 -0
package/templates/src/mocks/fixtures/todos.ts +40 -0
package/templates/src/mocks/handlers/index.ts +7 -0
package/templates/src/mocks/handlers/todos.ts +59 -0
package/templates/src/mocks/index.ts +3 -0
package/templates/src/mocks/node.ts +9 -0
package/templates/src/pages/Home.tsx +27 -0
package/templates/src/pages/NotFound.tsx +28 -0
package/templates/src/pages/index.ts +2 -0
package/templates/src/stores/index.ts +2 -0
package/templates/src/stores/preferencesStore.ts +85 -0
package/templates/src/test/index.ts +8 -0
package/templates/src/test/mocks.ts +17 -0
package/templates/src/test/providers.tsx +54 -0
package/templates/src/test-setup.ts +54 -0
package/templates/src/types/api.ts +31 -0
package/templates/src/types/index.ts +2 -0
package/templates/src/types/preferences.ts +5 -0
package/templates/src/vite-env.d.ts +10 -0
package/templates/tests/unit/components/ErrorBoundary.test.tsx +193 -0
package/templates/tests/unit/components/Header.test.tsx +33 -0
package/templates/tests/unit/components/LanguageSwitcher.test.tsx +40 -0
package/templates/tests/unit/components/Loading.test.tsx +76 -0
package/templates/tests/unit/components/SEO.test.tsx +80 -0
package/templates/tests/unit/components/ThemeToggle.test.tsx +62 -0
package/templates/tests/unit/contexts/mobileContext.test.tsx +54 -0
package/templates/tests/unit/hooks/useContactForm.test.ts +60 -0
package/templates/tests/unit/hooks/useExampleQuery.test.tsx +94 -0
package/templates/tests/unit/hooks/useLanguage.test.tsx +75 -0
package/templates/tests/unit/hooks/useMediaQuery.test.ts +57 -0
package/templates/tests/unit/hooks/useThemeEffect.test.ts +42 -0
package/templates/tests/unit/i18n/detectLanguage.test.ts +40 -0
package/templates/tests/unit/i18n/loadCatalog.test.ts +70 -0
package/templates/tests/unit/lib/api.test.ts +142 -0
package/templates/tests/unit/lib/format.test.ts +100 -0
package/templates/tests/unit/lib/storage.test.ts +90 -0
package/templates/tests/unit/lib/utils.test.ts +19 -0
package/templates/tests/unit/lib/validations.test.ts +56 -0
package/templates/tests/unit/stores/preferencesStore.test.ts +75 -0

package/templates/src/components/shared/SEO/SEO.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import { APP_CONFIG } from '@/lib/config';
+export interface SEOProps {
+  title?: string;
+  description?: string;
+  keywords?: string[];
+  ogImage?: string;
+  ogType?: 'website' | 'article';
+  canonical?: string;
+  noIndex?: boolean;
+}
+const DEFAULT_DESCRIPTION = 'A modern React application';
+/**
+ * SEO component using React 19's native document metadata support.
+ * These tags are automatically hoisted to the <head> section.
+ */
+export function SEO({
+  title,
+  description = DEFAULT_DESCRIPTION,
+  keywords = [],
+  ogImage,
+  ogType = 'website',
+  canonical,
+  noIndex = false,
+}: SEOProps) {
+  const fullTitle = title ? `${title} | ${APP_CONFIG.name}` : APP_CONFIG.name;
+  return (
+    <>
+      <title>{fullTitle}</title>
+      <meta name="description" content={description} />
+      {keywords.length > 0 && <meta name="keywords" content={keywords.join(', ')} />}
+      {/* Open Graph */}
+      <meta property="og:title" content={fullTitle} />
+      <meta property="og:description" content={description} />
+      <meta property="og:type" content={ogType} />
+      {ogImage && <meta property="og:image" content={ogImage} />}
+      {/* Twitter Card */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={fullTitle} />
+      <meta name="twitter:description" content={description} />
+      {ogImage && <meta name="twitter:image" content={ogImage} />}
+      {/* Canonical URL */}
+      {canonical && <link rel="canonical" href={canonical} />}
+      {/* Robots */}
+      {noIndex && <meta name="robots" content="noindex, nofollow" />}
+    </>
+  );
+}

package/templates/src/components/shared/SEO/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { SEO, type SEOProps } from './SEO';

package/templates/src/components/shared/ThemeToggle/ThemeToggle.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+import { useLingui } from '@lingui/react/macro';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useTouchSizes } from '@/hooks';
+import { usePreferencesStore } from '@/stores';
+export function ThemeToggle() {
+  const { t } = useLingui();
+  const theme = usePreferencesStore((state) => state.theme);
+  const toggleTheme = usePreferencesStore((state) => state.toggleTheme);
+  const getResolvedTheme = usePreferencesStore((state) => state.getResolvedTheme);
+  const sizes = useTouchSizes();
+  // Get the resolved theme for icon display
+  const resolvedTheme = getResolvedTheme();
+  // Determine the aria-label based on current theme
+  const getAriaLabel = () => {
+    if (theme === 'system') {
+      return resolvedTheme === 'dark'
+        ? t({
+            message: 'Switch to light mode',
+            comment: 'Accessibility label when clicking will switch to light theme',
+          })
+        : t({ message: 'Switch to dark mode', comment: 'Accessibility label when clicking will switch to dark theme' });
+    }
+    return theme === 'light'
+      ? t({ message: 'Switch to dark mode', comment: 'Accessibility label when clicking will switch to dark theme' })
+      : t({ message: 'Switch to light mode', comment: 'Accessibility label when clicking will switch to light theme' });
+  };
+  // Show the icon for the current resolved theme
+  const ThemeIcon = theme === 'system' ? Monitor : resolvedTheme === 'dark' ? Sun : Moon;
+  return (
+    <Button variant="ghost" size={sizes.iconButtonLg} onClick={toggleTheme} aria-label={getAriaLabel()}>
+      <ThemeIcon className="size-5" />
+    </Button>
+  );
+}

package/templates/src/components/shared/ThemeToggle/index.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { ThemeToggle } from './ThemeToggle';

package/templates/src/components/shared/index.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export { ThemeToggle } from './ThemeToggle';
+export { ErrorBoundary } from './ErrorBoundary';
+export { SEO } from './SEO';
+export { LanguageSwitcher } from './LanguageSwitcher';

package/templates/src/components/ui/button.tsx ADDED Viewed

@@ -0,0 +1,48 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'size-9',
+        'icon-sm': 'size-8',
+        touch: 'h-11 px-4 py-2',
+        'icon-touch': 'size-11',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = 'Button';
+export { Button, buttonVariants };

package/templates/src/components/ui/dropdown-menu.tsx ADDED Viewed

@@ -0,0 +1,228 @@
+import * as React from 'react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import { cn } from '@/lib/utils';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
+}
+function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+function DropdownMenuContent({
+  className,
+  align = 'start',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        align={align}
+        className={cn(
+          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 data-[state=closed]:overflow-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = 'default',
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: 'default' | 'destructive';
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-checkbox-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+}
+function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="dropdown-menu-radio-item-indicator"
+      >
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn('text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8', className)}
+      {...props}
+    />
+  );
+}
+function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md p-1 shadow-lg ring-1 duration-100',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/templates/src/components/ui/form-error.tsx ADDED Viewed

@@ -0,0 +1,95 @@
+import { AlertCircle } from 'lucide-react';
+import type { FieldError, FieldErrors } from 'react-hook-form';
+import { cn } from '@/lib/utils';
+export interface FieldErrorProps {
+  error?: FieldError;
+  className?: string;
+}
+/**
+ * Display a single field error
+ */
+export function FieldErrorMessage({ error, className }: FieldErrorProps) {
+  if (!error?.message) {
+    return null;
+  }
+  return (
+    <p className={cn('text-destructive mt-1 flex items-center gap-1 text-sm', className)} role="alert">
+      <AlertCircle className="size-3.5 shrink-0" />
+      <span>{error.message}</span>
+    </p>
+  );
+}
+export interface FormErrorProps {
+  errors?: FieldErrors;
+  className?: string;
+}
+/**
+ * Display all form errors in a summary
+ */
+export function FormErrorSummary({ errors, className }: FormErrorProps) {
+  if (!errors || Object.keys(errors).length === 0) {
+    return null;
+  }
+  const errorMessages = Object.entries(errors)
+    .filter(([, error]) => error?.message)
+    .map(([field, error]) => ({
+      field,
+      message: (error as FieldError).message!,
+    }));
+  if (errorMessages.length === 0) {
+    return null;
+  }
+  return (
+    <div
+      className={cn('bg-destructive/10 border-destructive/50 rounded-md border p-3', className)}
+      role="alert"
+      aria-live="polite"
+    >
+      <div className="text-destructive mb-2 flex items-center gap-2 font-medium">
+        <AlertCircle className="size-4" />
+        <span>Please fix the following errors:</span>
+      </div>
+      <ul className="text-destructive list-inside list-disc space-y-1 text-sm">
+        {errorMessages.map(({ field, message }) => (
+          <li key={field}>{message}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+export interface RootErrorProps {
+  message?: string;
+  className?: string;
+}
+/**
+ * Display a root-level form error (e.g., API error)
+ */
+export function RootFormError({ message, className }: RootErrorProps) {
+  if (!message) {
+    return null;
+  }
+  return (
+    <div
+      className={cn(
+        'bg-destructive/10 border-destructive text-destructive flex items-center gap-2 rounded-md border px-4 py-3 text-sm',
+        className,
+      )}
+      role="alert"
+    >
+      <AlertCircle className="size-4 shrink-0" />
+      <span>{message}</span>
+    </div>
+  );
+}

package/templates/src/components/ui/loading.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import { Trans } from '@lingui/react/macro';
+import { cn } from '@/lib/utils';
+import { Spinner } from './spinner';
+export interface LoadingProps {
+  className?: string;
+  text?: string;
+  fullScreen?: boolean;
+}
+/**
+ * Loading indicator with optional text
+ */
+export function Loading({ className, text, fullScreen }: LoadingProps) {
+  const content = (
+    <div className={cn('flex flex-col items-center justify-center gap-3', className)}>
+      <Spinner size="lg" />
+      {text && <p className="text-muted-foreground text-sm">{text}</p>}
+    </div>
+  );
+  if (fullScreen) {
+    return (
+      <div className="bg-background/80 fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+        {content}
+      </div>
+    );
+  }
+  return content;
+}
+/**
+ * Page-level loading state
+ */
+export function PageLoading() {
+  return (
+    <div className="flex min-h-[50vh] items-center justify-center">
+      <Loading text="Loading..." />
+    </div>
+  );
+}
+/**
+ * Inline loading for buttons/small areas
+ */
+export function InlineLoading({ className }: { className?: string }) {
+  return (
+    <span className={cn('inline-flex items-center gap-2', className)}>
+      <Spinner size="sm" />
+      <span className="text-muted-foreground text-sm">
+        <Trans>Loading...</Trans>
+      </span>
+    </span>
+  );
+}

package/templates/src/components/ui/skeleton.tsx ADDED Viewed

@@ -0,0 +1,52 @@
+import { cn } from '@/lib/utils';
+export type SkeletonProps = React.HTMLAttributes<HTMLDivElement>;
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return <div className={cn('bg-muted animate-pulse rounded-md', className)} {...props} />;
+}
+/**
+ * Skeleton for text content
+ */
+export function SkeletonText({ className, lines = 1 }: { className?: string; lines?: number }) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      {Array.from({ length: lines }).map((_, i) => (
+        <Skeleton key={i} className={cn('h-4', i === lines - 1 && lines > 1 ? 'w-3/4' : 'w-full')} />
+      ))}
+    </div>
+  );
+}
+/**
+ * Skeleton for card content
+ */
+export function SkeletonCard({ className }: { className?: string }) {
+  return (
+    <div className={cn('rounded-lg border p-4', className)}>
+      <Skeleton className="mb-4 h-32 w-full" />
+      <Skeleton className="mb-2 h-4 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+    </div>
+  );
+}
+/**
+ * Skeleton for avatar
+ */
+export function SkeletonAvatar({
+  className,
+  size = 'default',
+}: {
+  className?: string;
+  size?: 'sm' | 'default' | 'lg';
+}) {
+  const sizeClasses = {
+    sm: 'size-8',
+    default: 'size-10',
+    lg: 'size-12',
+  };
+  return <Skeleton className={cn('rounded-full', sizeClasses[size], className)} />;
+}

package/templates/src/components/ui/sonner.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from 'lucide-react';
+import type React from 'react';
+import { Toaster as Sonner, type ToasterProps } from 'sonner';
+import { usePreferencesStore } from '@/stores';
+const Toaster = ({ ...props }: ToasterProps) => {
+  const theme = usePreferencesStore((state) => state.theme);
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          '--normal-bg': 'var(--popover)',
+          '--normal-text': 'var(--popover-foreground)',
+          '--normal-border': 'var(--border)',
+          '--border-radius': 'var(--radius)',
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+export { Toaster };

package/templates/src/components/ui/spinner.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+const spinnerVariants = cva('animate-spin text-muted-foreground', {
+  variants: {
+    size: {
+      sm: 'size-4',
+      default: 'size-6',
+      lg: 'size-8',
+      xl: 'size-12',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+});
+export interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
+  className?: string;
+}
+export function Spinner({ size, className }: SpinnerProps) {
+  return (
+    <svg
+      className={cn(spinnerVariants({ size }), className)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}