@hitch42/applet 0.1.0-beta.9 → 0.1.1-beta.10

package/scaffold/.agents/skills/tanstack-router/references/router-plugin.md

@@ -0,0 +1,250 @@
+---
+name: router-plugin
+description: >-
+  TanStack Router bundler plugin for route generation and automatic
+  code splitting. Supports Vite, Webpack, Rspack, and esbuild.
+  Configures autoCodeSplitting, routesDirectory, target framework,
+  and code split groupings.
+metadata:
+  type: core
+  library: tanstack-router
+  library_version: "1.168.23"
+sources:
+  - TanStack/router:packages/router-plugin/src
+  - TanStack/router:docs/router/routing/file-based-routing.md
+  - TanStack/router:docs/router/guide/code-splitting.md
+---
+
+# Router Plugin (`@tanstack/router-plugin`)
+
+Bundler plugin that powers TanStack Router's file-based routing and automatic code splitting. Works with Vite, Webpack, Rspack, and esbuild via unplugin.
+
+> **CRITICAL**: The router plugin MUST come before the framework plugin (React, Solid, Vue) in the Vite config. Wrong order causes route generation and code splitting to fail silently.
+
+## Install
+
+```bash
+npm install -D @tanstack/router-plugin
+```
+
+## Bundler Setup
+
+### Vite (most common)
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+
+export default defineConfig({
+  plugins: [
+    // MUST come before react()
+    tanstackRouter({
+      target: "react",
+      autoCodeSplitting: true,
+    }),
+    react(),
+  ],
+});
+```
+
+### Webpack
+
+```ts
+// webpack.config.js
+const { tanstackRouter } = require("@tanstack/router-plugin/webpack");
+
+module.exports = {
+  plugins: [
+    tanstackRouter({
+      target: "react",
+      autoCodeSplitting: true,
+    }),
+  ],
+};
+```
+
+### Rspack
+
+```ts
+// rspack.config.js
+const { tanstackRouter } = require("@tanstack/router-plugin/rspack");
+
+module.exports = {
+  plugins: [
+    tanstackRouter({
+      target: "react",
+      autoCodeSplitting: true,
+    }),
+  ],
+};
+```
+
+### esbuild
+
+```ts
+import { tanstackRouter } from "@tanstack/router-plugin/esbuild";
+import esbuild from "esbuild";
+
+esbuild.build({
+  plugins: [
+    tanstackRouter({
+      target: "react",
+      autoCodeSplitting: true,
+    }),
+  ],
+});
+```
+
+## Configuration Options
+
+### Core Options
+
+| Option                  | Type                          | Default                    | Description                                |
+| ----------------------- | ----------------------------- | -------------------------- | ------------------------------------------ |
+| `target`                | `'react' \| 'solid' \| 'vue'` | `'react'`                  | Target framework                           |
+| `routesDirectory`       | `string`                      | `'./src/routes'`           | Directory containing route files           |
+| `generatedRouteTree`    | `string`                      | `'./src/routeTree.gen.ts'` | Path for generated route tree              |
+| `autoCodeSplitting`     | `boolean`                     | `undefined`                | Enable automatic code splitting            |
+| `enableRouteGeneration` | `boolean`                     | `true`                     | Set to `false` to disable route generation |
+
+### File Convention Options
+
+| Option                   | Type                                                    | Default     | Description                          |
+| ------------------------ | ------------------------------------------------------- | ----------- | ------------------------------------ |
+| `routeFilePrefix`        | `string`                                                | `undefined` | Prefix filter for route files        |
+| `routeFileIgnorePrefix`  | `string`                                                | `'-'`       | Prefix to exclude files from routing |
+| `routeFileIgnorePattern` | `string`                                                | `undefined` | Pattern to exclude from routing      |
+| `indexToken`             | `string \| RegExp \| { regex: string; flags?: string }` | `'index'`   | Token identifying index routes       |
+| `routeToken`             | `string \| RegExp \| { regex: string; flags?: string }` | `'route'`   | Token identifying route config files |
+
+### Code Splitting Options
+
+```ts
+tanstackRouter({
+  target: "react",
+  autoCodeSplitting: true,
+  codeSplittingOptions: {
+    // Default groupings for all routes
+    defaultBehavior: [["component"], ["errorComponent"], ["notFoundComponent"]],
+
+    // Per-route custom splitting
+    splitBehavior: ({ routeId }) => {
+      if (routeId === "/dashboard") {
+        // Keep loader and component together for dashboard
+        return [["loader", "component"], ["errorComponent"]];
+      }
+      // Return undefined to use defaultBehavior
+    },
+  },
+});
+```
+
+### Output Options
+
+| Option                      | Type                   | Default    | Description                      |
+| --------------------------- | ---------------------- | ---------- | -------------------------------- |
+| `quoteStyle`                | `'single' \| 'double'` | `'single'` | Quote style in generated code    |
+| `semicolons`                | `boolean`              | `false`    | Use semicolons in generated code |
+| `disableTypes`              | `boolean`              | `false`    | Disable TypeScript types         |
+| `disableLogging`            | `boolean`              | `false`    | Suppress plugin logs             |
+| `addExtensions`             | `boolean \| string`    | `false`    | Add file extensions to imports   |
+| `enableRouteTreeFormatting` | `boolean`              | `true`     | Format generated route tree      |
+
+### Virtual Route Config
+
+```ts
+import { routes } from "./routes";
+
+tanstackRouter({
+  target: "react",
+  virtualRouteConfig: routes, // or './routes.ts'
+});
+```
+
+## How It Works
+
+The composed plugin assembles up to 3 sub-plugins:
+
+1. **Route Generator** (always) — Watches route files and generates `routeTree.gen.ts`
+2. **Code Splitter** (when `autoCodeSplitting: true`) — Splits route files into lazy-loaded chunks using virtual modules
+3. **HMR** (dev mode, when code splitter is off) — Hot-reloads route changes without full refresh
+
+## Route Refactor Workflow
+
+When moving, renaming, adding, or deleting file routes:
+
+1. Change the source files under `routesDirectory`. Keep the exported route identifier named `Route`.
+2. Let the bundler plugin regenerate the tree, or run `pnpm exec tsr generate` when the project uses the CLI.
+3. Inspect the generated diff for the expected route IDs, parents, paths, and imports. Never repair `routeTree.gen.ts` by hand.
+4. Update links, redirects, `from` narrowing, params, preload calls, and tests that reference the old route.
+5. Run route-generation tests, type tests, and a production build. A passing editor typecheck does not prove the plugin generated or split the new route correctly.
+
+Commit `routeTree.gen.ts`; it is generated source used by the application at runtime.
+
+## Individual Plugin Exports
+
+For advanced use, each sub-plugin is exported separately from the Vite entry:
+
+```ts
+import {
+  tanstackRouter, // Composed (default)
+  tanstackRouterGenerator, // Generator only
+  tanStackRouterCodeSplitter, // Code splitter only
+} from "@tanstack/router-plugin/vite";
+```
+
+## Common Mistakes
+
+### 1. CRITICAL: Wrong plugin order in Vite config
+
+The router plugin must come before the framework plugin. Otherwise, route generation and code splitting fail silently.
+
+```ts
+// WRONG — react() before tanstackRouter()
+plugins: [react(), tanstackRouter({ target: "react" })];
+
+// CORRECT — tanstackRouter() first
+plugins: [tanstackRouter({ target: "react" }), react()];
+```
+
+### 2. HIGH: Missing target option for non-React frameworks
+
+The `target` defaults to `'react'`. For Solid or Vue, you must set it explicitly.
+
+```ts
+// WRONG for Solid — generates React imports
+tanstackRouter({ autoCodeSplitting: true });
+
+// CORRECT for Solid
+tanstackRouter({ target: "solid", autoCodeSplitting: true });
+```
+
+### 3. MEDIUM: Confusing autoCodeSplitting with manual lazy routes
+
+When `autoCodeSplitting` is enabled, the plugin handles splitting automatically. You do NOT need manual `createLazyRoute` or `lazyRouteComponent` calls — the plugin transforms your route files at build time.
+
+```tsx
+// WRONG — manual lazy loading with autoCodeSplitting enabled
+const LazyAbout = lazyRouteComponent(() => import("./about"));
+
+// CORRECT — just write normal route files, plugin handles splitting
+// src/routes/about.tsx
+export const Route = createFileRoute("/about")({
+  component: AboutPage,
+});
+
+function AboutPage() {
+  return <h1>About</h1>;
+}
+```
+
+### 4. HIGH: Editing the generated route tree
+
+Changes to `routeTree.gen.ts` are overwritten and can leave source routes, generated types, and runtime routing out of sync. Fix route filenames or plugin configuration, regenerate, and verify the generated diff instead.
+
+## Cross-References
+
+- [router-core/code-splitting](router-core/code-splitting.md) — manual code splitting concepts
+- [virtual-file-routes](virtual-file-routes.md) — programmatic route trees

package/scaffold/.agents/skills/tanstack-router/references/virtual-file-routes.md

@@ -0,0 +1,215 @@
+---
+name: virtual-file-routes
+description: >-
+  Programmatic route tree building as an alternative to filesystem
+  conventions: rootRoute, index, route, layout, physical,
+  defineVirtualSubtreeConfig. Use with TanStack Router plugin's
+  virtualRouteConfig option.
+metadata:
+  type: core
+  library: tanstack-router
+  library_version: "1.162.0"
+sources:
+  - TanStack/router:packages/virtual-file-routes/src
+  - TanStack/router:docs/router/routing/virtual-file-routes.md
+---
+
+# Virtual File Routes (`@tanstack/virtual-file-routes`)
+
+Build route trees programmatically instead of relying on filesystem conventions. Useful when you want explicit control over route structure, need to mix virtual and physical routes, or want to define route subtrees within file-based routing directories.
+
+Use this skill only when the project config contains `virtualRouteConfig`, a virtual route config file, or `__virtual.ts`. Ordinary file-route changes belong to Router Core and the Router Plugin.
+
+> **CRITICAL**: Types are FULLY INFERRED. Never cast, never annotate inferred values.
+
+## Install
+
+```bash
+npm install @tanstack/virtual-file-routes
+```
+
+## API Reference
+
+### `rootRoute(file, children?)`
+
+Creates the root of a virtual route tree.
+
+```ts
+import { rootRoute, index, route } from "@tanstack/virtual-file-routes";
+
+const routes = rootRoute("root.tsx", [index("index.tsx"), route("/about", "about.tsx")]);
+```
+
+### `index(file)`
+
+Creates an index route — the default rendered when the parent path matches exactly.
+
+```ts
+import { index } from "@tanstack/virtual-file-routes";
+
+index("home.tsx");
+```
+
+### `route(path, ...)`
+
+Creates a route node. Three call signatures:
+
+```ts
+import { route, index } from "@tanstack/virtual-file-routes";
+
+// Leaf route: path + file
+route("/about", "about.tsx");
+
+// Branch route: path + file + children
+route("/dashboard", "dashboard.tsx", [
+  index("dashboard-index.tsx"),
+  route("/settings", "settings.tsx"),
+]);
+
+// Path prefix only (no file): groups children under a URL segment
+route("/api", [route("/users", "users.tsx"), route("/posts", "posts.tsx")]);
+```
+
+### `layout(file, children)` or `layout(id, file, children)`
+
+Creates a pathless layout route — wraps children without adding a URL segment.
+
+```ts
+import { layout, route, index } from "@tanstack/virtual-file-routes";
+
+// ID derived from filename
+layout("authLayout.tsx", [
+  route("/dashboard", "dashboard.tsx"),
+  route("/settings", "settings.tsx"),
+]);
+
+// Explicit ID
+layout("admin-layout", "adminLayout.tsx", [route("/admin", "admin.tsx")]);
+```
+
+### `physical(pathPrefix, directory)` or `physical(directory)`
+
+Mounts a directory of file-based routes at a URL prefix. Uses TanStack Router's standard file-based routing conventions within that directory.
+
+```ts
+import { physical } from "@tanstack/virtual-file-routes";
+
+// Mount posts/ directory under /posts
+physical("/posts", "posts");
+
+// Merge features/ directory at the current level
+physical("features");
+```
+
+### `defineVirtualSubtreeConfig(config)`
+
+Type helper for `__virtual.ts` files inside file-based routing directories. Identity function that provides type inference.
+
+```ts
+// src/routes/admin/__virtual.ts
+import { defineVirtualSubtreeConfig, index, route } from "@tanstack/virtual-file-routes";
+
+export default defineVirtualSubtreeConfig([index("home.tsx"), route("$id", "details.tsx")]);
+```
+
+## Integration with Router Plugin
+
+Pass the virtual route config to the TanStack Router plugin:
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import { routes } from "./routes";
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      target: "react", // or 'solid', 'vue'
+      virtualRouteConfig: routes,
+    }),
+    // Add your framework's Vite plugin here
+  ],
+});
+```
+
+Or reference a file path:
+
+```ts
+tanstackRouter({
+  target: "react",
+  virtualRouteConfig: "./routes.ts",
+});
+```
+
+## Full Example
+
+```ts
+// routes.ts
+import { rootRoute, route, index, layout, physical } from "@tanstack/virtual-file-routes";
+
+export const routes = rootRoute("root.tsx", [
+  index("index.tsx"),
+
+  layout("authLayout.tsx", [
+    route("/dashboard", "app/dashboard.tsx", [
+      index("app/dashboard-index.tsx"),
+      route("/invoices", "app/dashboard-invoices.tsx", [
+        index("app/invoices-index.tsx"),
+        route("$id", "app/invoice-detail.tsx"),
+      ]),
+    ]),
+  ]),
+
+  // Mount file-based routing from posts/ directory
+  physical("/posts", "posts"),
+]);
+```
+
+## Common Mistakes
+
+### 1. HIGH: Forgetting that file paths are relative to routesDirectory
+
+File paths in `rootRoute`, `index`, `route`, and `layout` are relative to the `routesDirectory` configured in the router plugin (default: `./src/routes`). Do not use absolute paths or paths relative to the project root.
+
+```ts
+// WRONG — absolute path
+route("/about", "/src/routes/about.tsx");
+
+// CORRECT — relative to routesDirectory
+route("/about", "about.tsx");
+```
+
+### 2. MEDIUM: Using physical() without matching directory structure
+
+The directory passed to `physical()` must exist inside `routesDirectory` and follow TanStack Router's file-based routing conventions.
+
+```ts
+// WRONG — directory doesn't exist or wrong location
+physical("/blog", "src/blog");
+
+// CORRECT — relative to routesDirectory
+physical("/blog", "blog");
+// Expects: src/routes/blog/ (with route files inside)
+```
+
+### 3. MEDIUM: Confusing layout() with route()
+
+`layout()` creates a pathless wrapper — it does NOT add a URL segment. Use `route()` for URL segments.
+
+```ts
+// This does NOT create a /dashboard URL
+layout("dashboardLayout.tsx", [route("/dashboard", "dashboard.tsx")]);
+
+// The URL is /dashboard, and dashboardLayout.tsx wraps it
+```
+
+## Refactor Audit
+
+After changing a virtual tree:
+
+1. Confirm there is exactly one `rootRoute` and that every referenced file exists relative to `routesDirectory`.
+2. Check each `route`, `layout`, and `physical` node for duplicate effective paths or IDs.
+3. Confirm each `physical()` directory is mounted once at the intended path prefix and does not overlap a virtual child.
+4. Regenerate `routeTree.gen.ts` and inspect parentage, full paths, and imports. Do not edit generated output.
+5. Update links, redirects, params, and `from` narrowing, then run generator tests, type tests, and a production build.

package/scaffold/.agents/skills/web-design-guidelines/SKILL.md

@@ -0,0 +1,184 @@
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review these files for compliance: $ARGUMENTS
+
+Read files, check against rules below. Output concise but comprehensive—sacrifice grammar for brevity. High signal-to-noise.
+
+## Rules
+
+### Accessibility
+
+- Icon-only buttons need `aria-label`
+- Form controls need `<label>` or `aria-label`
+- Interactive elements need keyboard handlers (`onKeyDown`/`onKeyUp`)
+- `<button>` for actions, `<a>`/`<Link>` for navigation (not `<div onClick>`)
+- Images need `alt` (or `alt=""` if decorative)
+- Decorative icons need `aria-hidden="true"`
+- Async updates (toasts, validation) need `aria-live="polite"`
+- Use semantic HTML (`<button>`, `<a>`, `<label>`, `<table>`) before ARIA
+- Headings hierarchical `<h1>`–`<h6>`; include skip link for main content
+- `scroll-margin-top` on heading anchors
+
+### Focus States
+
+- Interactive elements need visible focus: `focus-visible:ring-*` or equivalent
+- Never `outline-none` / `outline: none` without focus replacement
+- Use `:focus-visible` over `:focus` (avoid focus ring on click)
+- Group focus with `:focus-within` for compound controls
+
+### Forms
+
+- Inputs need `autocomplete` and meaningful `name`
+- Use correct `type` (`email`, `tel`, `url`, `number`) and `inputmode`
+- Never block paste (`onPaste` + `preventDefault`)
+- Labels clickable (`htmlFor` or wrapping control)
+- Disable spellcheck on emails, codes, usernames (`spellCheck={false}`)
+- Checkboxes/radios: label + control share single hit target (no dead zones)
+- Submit button stays enabled until request starts; spinner during request
+- Errors inline next to fields; focus first error on submit
+- Placeholders end with `…` and show example pattern
+- `autocomplete="off"` on non-auth fields to avoid password manager triggers
+- Warn before navigation with unsaved changes (`beforeunload` or router guard)
+
+### Animation
+
+- Honor `prefers-reduced-motion` (provide reduced variant or disable)
+- Animate `transform`/`opacity` only (compositor-friendly)
+- Never `transition: all`—list properties explicitly
+- Set correct `transform-origin`
+- SVG: transforms on `<g>` wrapper with `transform-box: fill-box; transform-origin: center`
+- Animations interruptible—respond to user input mid-animation
+
+### Typography
+
+- `…` not `...`
+- Curly quotes `"` `"` not straight `"`
+- Non-breaking spaces: `10&nbsp;MB`, `⌘&nbsp;K`, brand names
+- Loading states end with `…`: `"Loading…"`, `"Saving…"`
+- `font-variant-numeric: tabular-nums` for number columns/comparisons
+- Use `text-wrap: balance` or `text-pretty` on headings (prevents widows)
+
+### Content Handling
+
+- Text containers handle long content: `truncate`, `line-clamp-*`, or `break-words`
+- Flex children need `min-w-0` to allow text truncation
+- Handle empty states—don't render broken UI for empty strings/arrays
+- User-generated content: anticipate short, average, and very long inputs
+
+### Images
+
+- `<img>` needs explicit `width` and `height` (prevents CLS)
+- Below-fold images: `loading="lazy"`
+- Above-fold critical images: `priority` or `fetchpriority="high"`
+
+### Performance
+
+- Large lists (>50 items): virtualize (`virtua`, `content-visibility: auto`)
+- No layout reads in render (`getBoundingClientRect`, `offsetHeight`, `offsetWidth`, `scrollTop`)
+- Batch DOM reads/writes; avoid interleaving
+- Prefer uncontrolled inputs; controlled inputs must be cheap per keystroke
+- Add `<link rel="preconnect">` for CDN/asset domains
+- Critical fonts: `<link rel="preload" as="font">` with `font-display: swap`
+
+### Navigation & State
+
+- URL reflects state—filters, tabs, pagination, expanded panels in query params
+- Links use `<a>`/`<Link>` (Cmd/Ctrl+click, middle-click support)
+- Deep-link all stateful UI (if uses `useState`, consider URL sync via nuqs or similar)
+- Destructive actions need confirmation modal or undo window—never immediate
+
+### Touch & Interaction
+
+- `touch-action: manipulation` (prevents double-tap zoom delay)
+- `-webkit-tap-highlight-color` set intentionally
+- `overscroll-behavior: contain` in modals/drawers/sheets
+- During drag: disable text selection, `inert` on dragged elements
+- `autoFocus` sparingly—desktop only, single primary input; avoid on mobile
+
+### Safe Areas & Layout
+
+- Full-bleed layouts need `env(safe-area-inset-*)` for notches
+- Avoid unwanted scrollbars: `overflow-x-hidden` on containers, fix content overflow
+- Flex/grid over JS measurement for layout
+
+### Dark Mode & Theming
+
+- `color-scheme: dark` on `<html>` for dark themes (fixes scrollbar, inputs)
+- `<meta name="theme-color">` matches page background
+- Native `<select>`: explicit `background-color` and `color` (Windows dark mode)
+
+### Locale & i18n
+
+- Dates/times: use `Intl.DateTimeFormat` not hardcoded formats
+- Numbers/currency: use `Intl.NumberFormat` not hardcoded formats
+- Detect language via `Accept-Language` / `navigator.languages`, not IP
+- Brand names, code tokens, identifiers: wrap with `translate="no"` to prevent garbled auto-translation
+
+### Hydration Safety
+
+- Inputs with `value` need `onChange` (or use `defaultValue` for uncontrolled)
+- Date/time rendering: guard against hydration mismatch (server vs client)
+- `suppressHydrationWarning` only where truly needed
+
+### Hover & Interactive States
+
+- Buttons/links need `hover:` state (visual feedback)
+- Interactive states increase contrast: hover/active/focus more prominent than rest
+
+### Content & Copy
+
+- Active voice: "Install the CLI" not "The CLI will be installed"
+- Title Case for headings/buttons (Chicago style)
+- Numerals for counts: "8 deployments" not "eight"
+- Specific button labels: "Save API Key" not "Continue"
+- Error messages include fix/next step, not just problem
+- Second person; avoid first person
+- `&` over "and" where space-constrained
+
+### Anti-patterns (flag these)
+
+- `user-scalable=no` or `maximum-scale=1` disabling zoom
+- `onPaste` with `preventDefault`
+- `transition: all`
+- `outline-none` without focus-visible replacement
+- Inline `onClick` navigation without `<a>`
+- `<div>` or `<span>` with click handlers (should be `<button>`)
+- Images without dimensions
+- Large arrays `.map()` without virtualization
+- Form inputs without labels
+- Icon buttons without `aria-label`
+- Hardcoded date/number formats (use `Intl.*`)
+- `autoFocus` without clear justification
+
+## Output Format
+
+Group by file. Use `file:line` format (VS Code clickable). Terse findings.
+
+```text
+## src/Button.tsx
+
+src/Button.tsx:42 - icon button missing aria-label
+src/Button.tsx:18 - input lacks label
+src/Button.tsx:55 - animation missing prefers-reduced-motion
+src/Button.tsx:67 - transition: all → list properties
+
+## src/Modal.tsx
+
+src/Modal.tsx:12 - missing overscroll-behavior: contain
+src/Modal.tsx:34 - "..." → "…"
+
+## src/Card.tsx
+
+✓ pass
+```
+
+State issue + location. Skip explanation unless fix non-obvious. No preamble.

package/scaffold/.github/workflows/hitch.yml

@@ -12,4 +12,4 @@ jobs:
       contents: read
       id-token: write
     # Hitch verifies the called workflow's commit SHA from the OIDC token.
-    uses: hitch-42/actions/.github/workflows/deploy.yml@1a76e4936f94730e20710b455fa0a06564929f39
+    uses: hitch-42/actions/.github/workflows/deploy.yml@4097528b45f7e2962eee9b67ff20a09a6c032d60

package/scaffold/AGENTS.md

@@ -4,8 +4,8 @@ Before any command or file edit, read and follow `.agents/skills/hitch-applets/S
 
 Use `pnpm` for package commands.
 
-Edit only `hitch.config.ts`, each `applet.manifest.ts`, and files in an applet `src` directory.
-The applet CLI replaces all other workspace files.
+The applet CLI refreshes its generated support files.
+The CLI adds missing MCP servers without changing existing entries.
 
 ## What makes a good applet
 

package/scaffold/applet/src/client/components/ui/alert.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
 import { cn } from "@/client/lib/utils";
 

package/scaffold/applet/src/client/components/ui/button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import type * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
 import {
   Button as ButtonPrimitive,
   Link as LinkPrimitive,