diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..d208529
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm typecheck
+      - run: pnpm registry:validate
+      - run: pnpm vitest run
+      - run: pnpm build
diff --git a/.gitignore b/.gitignore
index 70587f2..70904bc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,4 +42,9 @@ next-env.d.ts
 .env.development
 
 # Ignore for WebStorm configuration
-.idea
\ No newline at end of file
+.idea
+# shadcn registry output (built from registry.json by `shadcn build`)
+/public/r
+
+# generated-code typecheck fixtures (__tests__/form-code.spec.ts)
+/__tests__/.generated
diff --git a/.migration/project.md b/.migration/project.md
new file mode 100644
index 0000000..070d644
--- /dev/null
+++ b/.migration/project.md
@@ -0,0 +1,73 @@
+# Radix UI → Base UI (whole project)
+
+2026-09-27 · strategy: golden pair via the shadcn CLI (`shadcn add` into a
+scratch project with this repo's `components.json` and `style: base-vega`),
+then per-component port of site customizations · verdict: **complete, 0
+wrappers remain on Radix**.
+
+Follows the official `migrate-radix-to-base` skill
+(github.com/shadcn-ui/ui/tree/main/skills/migrate-radix-to-base).
+
+## Changed
+
+- `@base-ui/react@^1.8` added; every `@radix-ui/*` package removed.
+- `components.json` style `new-york` → `base-vega` ("the classic shadcn/ui
+  look"). `npx shadcn info` now reports `base: "base"`, so future
+  `shadcn add` delivers Base UI components.
+- `app/globals.css` imports `tw-animate-css` and `shadcn/tailwind.css` (the
+  `data-open`/`data-horizontal`/… variants base wrappers use) in place of
+  `tailwindcss-animate`; `--color-sidebar` alias added; body gets
+  `position: relative`; the app root is `isolate` (Base UI setup).
+- One commit per wrapper, bottom-up:
+
+| Wrapper | Base UI part(s) | Consumer changes |
+|---|---|---|
+| button | `button` | site variants kept (arrow, smile, gooey*, linkHover*, shine, ringHover, expandIcon); sponsors link → `render={<Link />}` + `nativeButton={false}` |
+| label, separator, checkbox, switch, slider, radio-group, scroll-area, avatar, tabs | 1:1 | none |
+| popover | Portal › Positioner › Popup | sponsors radar hover trigger → `render={<div />}` |
+| accordion | Content → Panel | FAQ drops `type="single" collapsible` |
+| dialog, sheet | Overlay → Backdrop, Content → Popup | none |
+| command | cmdk kept; Base dialog; new `input-group` | none |
+| select | Viewport → List, Positioner | edit dialog labels its `SelectValue` |
+| dropdown-menu | `menu` | triggers → `render={<Button />}`; label wrapped in `DropdownMenuGroup` |
+| breadcrumb | `useRender` + `mergeProps` | none |
+| sidebar + tooltip | `useRender`; tooltip Portal › Positioner › Popup | links → `render={<Link />}`; site layout kept (12rem, in-page, no left border) |
+| field | (not Radix) | base-vega version keys choice cards off `data-checked` |
+| calendar, input-otp | (not Radix) | `@radix-ui/react-icons` → lucide |
+
+Leftover scan: `git grep -nE "radix-ui|@radix-ui" -- '*.ts' '*.tsx'` is
+clean apart from the registry test's own pattern. `__tests__/primitive-seam.spec.ts`
+now fails if app code imports a primitive library outside `components/ui`.
+
+## Left alone
+
+- `components/ui/drawer.tsx`: vaul, not Radix (`DrawerTrigger asChild` in
+  the header is vaul's API).
+- cmdk (command), sonner, input-otp, react-day-picker (calendar): not Radix.
+- Registry items (`registry.json`): already primitive-agnostic, and verified
+  to install and typecheck in radix-nova, base-nova and new-york-v4 projects.
+
+## Behavior changes
+
+Flagged, not patched:
+
+- **Look**: wrappers now use base-vega's (Tailwind v4) classes instead of the
+  2024 new-york ones: slightly different padding, rings and hover shades.
+  Each wrapper is its own commit if one should be restyled back.
+- **Tabs** activate manually: arrow keys move focus, Enter/Space selects.
+- **Select** aligns the list over the trigger (`alignItemWithTrigger`
+  default true) and `onValueChange` can receive `null`.
+- **Accordion** allows one open item and collapsing by default.
+- **Menus**: checkbox/radio items don't close on click (none used today).
+- **Sidebar** no longer wraps a `TooltipProvider`; add one if
+  `SidebarMenuButton tooltip=` is ever used.
+
+## Verify by hand
+
+- Theme switch (header): open, pick Light/Dark/System, menu closes.
+- Playground: add Select, Combobox, Date Picker, Signature Pad; open each
+  popup, pick a value, Escape closes, focus returns to the trigger.
+- Signature Pad dialog: backdrop click and Escape close it.
+- /components/*: Preview/Code tabs switch with click and keyboard.
+- /templates/*: sidebar sits below the header, flow links switch previews.
+- FAQ on the home page: items expand and collapse with the height animation.
diff --git a/CONTEXT.md b/CONTEXT.md
new file mode 100644
index 0000000..e602a6b
--- /dev/null
+++ b/CONTEXT.md
@@ -0,0 +1,35 @@
+# Domain glossary
+
+Terms used across this codebase. Architecture words (module, interface,
+seam, adapter, depth) follow their usual meanings in design reviews.
+
+**Field variant**: a kind of form field the playground offers (Input, Phone,
+Credit Card, …). Each is one module in `components/field-variants/` that
+owns its defaults, builder settings, validation, default value, live
+preview control and generated control. `FormFieldType.variant` names one.
+
+**Form field**: one field the user added in the playground: a variant plus
+the user's label, name, placeholder, required flag and variant settings.
+Fields can be grouped into rows of two or three.
+
+**Form library**: the library generated code targets: React Hook Form or
+TanStack Form. Each has an adapter in `lib/form-code/` that supplies the
+form hook, the `<form>` element and how a field binds its value.
+
+**Schema expression**: a zod chain written once with `zx`
+(`components/field-variants/schema-expr.ts`) and read two ways: as the
+runtime schema the preview validates with, and as the source the generator
+prints.
+
+**Registry item**: a component, block or file published through the shadcn
+registry. `registry.json` is the **Registry catalog**, the single source for
+items' files, titles, descriptions and dependencies;
+`lib/registry-catalog.ts` is its only reader.
+
+**Template**: a ready-made form (auth flows, contact, newsletter) shipped as
+a `registry:block`. A template can have **flows**, pages at their own routes
+(`/sign-in`, `/sign-up`, …) that link to each other.
+
+**Primitive seam**: `components/ui/`, the only modules allowed to import
+the primitive library (Base UI). App code uses the wrappers' props, so
+swapping or upgrading primitives stays inside `components/ui/`.
diff --git a/README.md b/README.md
index d3ac882..c7fa57a 100644
--- a/README.md
+++ b/README.md
@@ -18,6 +18,8 @@ A dynamic form-building tool that allows users to create, customize, and validat
   - [Usage](#usage)
     - [Creating a Form](#creating-a-form)
   - [Components](#components)
+  - [shadcn Registry](#shadcn-registry)
+  - [Project Structure](#project-structure)
   - [Validation](#validation)
   - [API](#api)
     - [Form Submission](#form-submission)
@@ -37,6 +39,8 @@ A dynamic form-building tool that allows users to create, customize, and validat
 - **Real-Time Validation**: Validate user inputs using the Zod library, ensuring data integrity and user-friendly feedback.
 - **Responsive Design**: Built with Tailwind CSS, ensuring forms look great on all devices.
 - **Customizable Components**: Leverage ShadCN components for a consistent and modern UI experience.
+- **Two Form Libraries**: Generate React Hook Form or TanStack Form code, each starting with the one `shadcn add` command it needs.
+- **shadcn Registry**: Every extra component and template installs with the shadcn CLI, in Radix and Base UI projects alike.
 - **Server-Side Rendering**: Utilize Next.js for optimized performance and SEO.
 
 ## Live Demo
@@ -63,7 +67,7 @@ To get started with Form Builder, follow these steps:
 
 3. Install the necessary dependencies:
    ```bash
-   npm install
+   pnpm install
    ```
 
 ## Usage
@@ -71,9 +75,11 @@ To get started with Form Builder, follow these steps:
 To start the development server, run:
 
 ```bash
-npm run dev
+pnpm dev
 ```
 
+`pnpm dev` and `pnpm build` first build the registry into `public/r`. Run the tests with `pnpm test`.
+
 Open your browser and navigate to `http://localhost:3000` to see the application in action.
 
 ### Creating a Form
@@ -85,13 +91,30 @@ Open your browser and navigate to `http://localhost:3000` to see the application
 
 ## Components
 
-Form Builder consists of various reusable components:
+The site's UI is shadcn/ui on [Base UI](https://base-ui.com) (`components.json` style `base-vega`). The extra form components (phone input, multi select, credit card, signature pad, …) are documented at [/components](https://www.shadcn-form.com/components).
+
+## shadcn Registry
+
+Everything under [/components](https://www.shadcn-form.com/components) and [/templates](https://www.shadcn-form.com/templates) is published as a [shadcn registry](https://ui.shadcn.com/docs/registry). Install an item with the shadcn CLI:
+
+```bash
+npx shadcn@latest add https://www.shadcn-form.com/r/phone-input.json
+```
+
+Items only use props every shadcn style shares, so they install into Radix (`radix-*`, `new-york`) and Base UI (`base-*`) projects alike. The generated form code in the playground starts with the command that installs everything it imports.
+
+- `registry.json` is the source of truth: titles, descriptions, files, dependencies.
+- `pnpm registry:build` runs `shadcn build` into `public/r`; `pnpm registry:validate` checks the source.
+- `__tests__/registry-catalog.spec.ts` checks each item's declared dependencies against its imports.
+
+## Project Structure
+
+Domain terms are defined in [CONTEXT.md](CONTEXT.md).
 
-- **FormContainer**: The main container for the form elements.
-- **InputField**: A customizable input component.
-- **SelectField**: Dropdown selection component.
-- **CheckboxField**: A checkbox input component.
-- **Button**: A styled button component for form submission.
+- `components/field-variants/`: one module per playground field type (preview control, validation, default value, generated code). Add a field type by adding a module and listing it in `index.ts`.
+- `lib/form-code/`: the form code generator, with one adapter per form library.
+- `lib/registry-catalog.ts`: reads `registry.json` for docs pages, sidebars and install commands.
+- `components/ui/`: shadcn wrappers; the only place allowed to import `@base-ui/react`.
 
 ## Validation
 
diff --git a/__tests__/field-variants.spec.ts b/__tests__/field-variants.spec.ts
new file mode 100644
index 0000000..03318f3
--- /dev/null
+++ b/__tests__/field-variants.spec.ts
@@ -0,0 +1,135 @@
+import { isValidPhoneNumber } from 'react-phone-number-input'
+import { z } from 'zod'
+import { describe, expect, it } from 'vitest'
+
+import { fieldVariants, getFieldVariant } from '@/components/field-variants'
+import {
+  buildFormSchema,
+  createField,
+  formDefaultValues,
+  formSchemaSource,
+} from '@/components/field-variants/form'
+import { code, printValue, toSource, toZod, zx } from '@/components/field-variants/schema-expr'
+import type { FormFieldType } from '@/types'
+
+/** Evaluates generated schema source with the identifiers generated code imports. */
+function evaluate(source: string) {
+  const js = source.replace(/<\w+>\(/g, '(') // drop TypeScript type arguments
+  return new Function('z', 'isValidPhoneNumber', 'File', `return ${js}`)(z, isValidPhoneNumber, File)
+}
+
+const jsonSchema = (schema: z.ZodType) =>
+  z.toJSONSchema(schema, { unrepresentable: 'any', io: 'input' })
+
+describe('schema expressions', () => {
+  it('prints and builds the same chain', () => {
+    const expr = zx.string().min(3, { message: 'Too short' }).max(10)
+    expect(toSource(expr)).toBe('z.string().min(3, { message: "Too short" }).max(10)')
+    expect(toZod(expr).safeParse('ab').success).toBe(false)
+    expect(toZod(expr).safeParse('abcd').success).toBe(true)
+  })
+
+  it('prints code() values by their source and runs them by their value', () => {
+    const expr = zx.boolean().refine(code((value: boolean) => value, '(value) => value'))
+    expect(toSource(expr)).toBe('z.boolean().refine((value) => value)')
+    expect(toZod(expr).safeParse(false).success).toBe(false)
+  })
+
+  it('drops type arguments at runtime but keeps them in source', () => {
+    const expr = (zx.coerce as any)['number<string>']()
+    expect(toSource(expr)).toBe('z.coerce.number<string>()')
+    expect(toZod(expr).parse('4')).toBe(4)
+  })
+
+  it('refuses functions without a source form', () => {
+    expect(() => toSource(zx.instanceof(File))).toThrow(/code\(\)/)
+  })
+
+  it('prints nested schemas, dates and quoted keys', () => {
+    expect(printValue({ 'a-b': new Date(), c: [1, 'x'] })).toBe('{ "a-b": new Date(), c: [1, "x"] }')
+    expect(toSource(zx.object({ a: zx.string() }))).toBe('z.object({ a: z.string() })')
+  })
+})
+
+const fieldOf = (variant: string, overrides: Partial<FormFieldType> = {}): FormFieldType => ({
+  ...createField(variant),
+  name: 'value',
+  ...overrides,
+})
+
+describe.each(fieldVariants.map((variant) => [variant.name]))('%s variant', (name) => {
+  const variant = getFieldVariant(name)
+
+  it.each([true, false])('generates the schema it validates with (required: %s)', (required) => {
+    const field = fieldOf(name, { required })
+    const runtime = toZod(variant.schema(field))
+    const generated = evaluate(toSource(variant.schema(field)))
+    expect(jsonSchema(generated)).toEqual(jsonSchema(runtime))
+  })
+
+  it('accepts its default value when the field is optional', () => {
+    const field = fieldOf(name, { required: false })
+    const result = toZod(variant.schema(field)).safeParse(variant.defaultValue(field))
+    expect(result.error?.issues ?? []).toEqual([])
+  })
+
+  it('creates new fields from its defaults', () => {
+    const field = createField(name)
+    expect(field.label).toBe(variant.defaults.label)
+    expect(field.variant).toBe(name)
+  })
+
+  it('imports what its generated control uses', () => {
+    const field = fieldOf(name)
+    const control = variant.control(field, {
+      id: 'field.name',
+      name: 'field.name',
+      value: 'field.value',
+      onChange: (value) => `field.onChange(${value})`,
+      onBlur: 'field.onBlur',
+      invalid: 'invalid',
+    })
+    const imported = new Set(
+      variant
+        .imports(field)
+        .flatMap((line) => line.match(/import\s+(?:\{([^}]*)\}|(\w+))/)?.slice(1) ?? [])
+        .filter(Boolean)
+        .flatMap((names) => names.split(',').map((n) => n.trim()))
+        .filter(Boolean),
+    )
+    const components = [...control.matchAll(/<([A-Z]\w*)/g)].map((m) => m[1])
+    for (const component of components) {
+      if (component === 'FieldLabel') continue // provided by every form's Field imports
+      expect(imported, `${name} renders <${component}>`).toContain(component)
+    }
+  })
+})
+
+describe.each([['email'], ['number']])('Input of type %s', (type) => {
+  it.each([true, false])('generates the schema it validates with (required: %s)', (required) => {
+    const field = fieldOf('Input', { type, required, min: 1, max: 9 })
+    const expr = getFieldVariant('Input').schema(field)
+    expect(jsonSchema(evaluate(toSource(expr)))).toEqual(jsonSchema(toZod(expr)))
+  })
+})
+
+describe('form schema', () => {
+  it('keeps zod checks in generated source (zod v4 regression)', () => {
+    const fields = [fieldOf('Input', { name: 'username', min: 3, max: 20 })]
+    expect(formSchemaSource(fields)).toContain(
+      'username: z.string().min(3, { message: "Must be at least 3 characters" }).max(20',
+    )
+  })
+
+  it('quotes field names that are not identifiers', () => {
+    const fields = [fieldOf('Input', { name: 'first-name' })]
+    expect(formSchemaSource(fields)).toContain('"first-name": z.string()')
+    expect(Object.keys(buildFormSchema(fields).shape)).toEqual(['first-name'])
+  })
+
+  it('flattens rows into one schema and default values object', () => {
+    const fields = [fieldOf('Input', { name: 'a' }), [fieldOf('Switch', { name: 'b' }), fieldOf('Slider', { name: 'c' })]]
+    expect(Object.keys(buildFormSchema(fields).shape)).toEqual(['a', 'b', 'c'])
+    expect(formDefaultValues(fields)).toEqual({ a: '', b: false, c: 0 })
+  })
+})
diff --git a/__tests__/form-code.spec.ts b/__tests__/form-code.spec.ts
new file mode 100644
index 0000000..e206069
--- /dev/null
+++ b/__tests__/form-code.spec.ts
@@ -0,0 +1,103 @@
+import { execFileSync } from 'node:child_process'
+import { mkdirSync, rmSync, writeFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { fieldVariants } from '@/components/field-variants'
+import { createField, type FormFieldOrGroup } from '@/components/field-variants/form'
+import { formatCode } from '@/lib/format-code'
+import {
+  FORM_LIBRARIES,
+  formInstallCommand,
+  generateFormCode,
+  type FormLibrary,
+} from '@/lib/form-code'
+import type { FormFieldType } from '@/types'
+
+const libraries = Object.values(FORM_LIBRARIES)
+
+const field = (variant: string, overrides: Partial<FormFieldType> = {}): FormFieldType => ({
+  ...createField(variant),
+  name: variant.toLowerCase().replace(/\W+/g, '_'),
+  ...overrides,
+})
+
+/** Every variant, required and optional, plus a two-column row and odd names. */
+const kitchenSink: FormFieldOrGroup[] = [
+  ...fieldVariants.map((variant) => field(variant.name)),
+  ...fieldVariants.map((variant) =>
+    field(variant.name, { name: `optional_${variant.name.toLowerCase().replace(/\W+/g, '_')}`, required: false }),
+  ),
+  field('Input', { name: 'email', type: 'email' }),
+  field('Input', { name: 'age', type: 'number', min: 18, max: 99 }),
+  field('Smart Datetime Input', { name: 'meeting', locale: 'fr', hour12: true }),
+  field('Textarea', { name: 'quote', placeholder: 'Say "hi" {now}', description: 'Use <b> & {braces}' }),
+  [field('Input', { name: 'first-name' }), field('Input', { name: 'last-name', label: 'Last {name}' })],
+]
+
+describe.each(libraries)('%s', (library) => {
+  it('generates syntactically valid TSX for every variant', async () => {
+    await expect(formatCode(generateFormCode(kitchenSink, library))).resolves.toContain(
+      'export default function MyForm()',
+    )
+  })
+
+  it('imports each component once and only what it renders', () => {
+    const code = generateFormCode([field('Checkbox'), field('Input')], library)
+    expect(code).toContain('import { Checkbox } from "@/components/ui/checkbox"')
+    expect(code).toContain('import { Input } from "@/components/ui/input"')
+    expect(code).not.toContain('@/components/ui/select')
+    expect(code.match(/import \{ Input \}/g)).toHaveLength(1)
+  })
+
+  it('renders a bound control for every field (no <Input> fallbacks)', () => {
+    const code = generateFormCode([field('Phone'), field('Rating')], library)
+    expect(code).toContain('<PhoneInput')
+    expect(code).toContain('<Rating')
+    expect(code).not.toContain('<Input')
+  })
+})
+
+describe('generated code', () => {
+  it('starts with the command that installs its components', () => {
+    const fields = [field('Input'), field('Phone')]
+    expect(generateFormCode(fields, 'react-hook-form')).toMatch(/^\/\/ npx shadcn@latest add /)
+    expect(formInstallCommand(fields)).toBe(
+      'npx shadcn@latest add button field sonner input https://www.shadcn-form.com/r/phone-input.json',
+    )
+  })
+
+  it('binds Radix-only controls through the library, not register()', () => {
+    const code = generateFormCode([field('Switch'), field('Select')], 'react-hook-form')
+    expect(code).not.toContain('register(')
+    expect(code).toContain('onCheckedChange={(checked) => field.onChange(checked === true)}')
+  })
+
+  it('validates TanStack forms with the schema through Standard Schema', () => {
+    const code = generateFormCode([field('Input')], 'tanstack-form')
+    expect(code).toContain('onSubmit: formSchema')
+    expect(code).not.toContain('zod-form-adapter')
+  })
+
+  // Writes the kitchen-sink form for each library next to the app and
+  // typechecks it against the app's own components and packages.
+  it('typechecks for every library', () => {
+    const dir = resolve(process.cwd(), '__tests__/.generated')
+    rmSync(dir, { recursive: true, force: true })
+    mkdirSync(dir, { recursive: true })
+    for (const library of libraries as FormLibrary[]) {
+      writeFileSync(resolve(dir, `${library}.tsx`), generateFormCode(kitchenSink, library))
+    }
+    let output = ''
+    try {
+      execFileSync(resolve(process.cwd(), 'node_modules/.bin/tsc'), ['-p', '__tests__/generated.tsconfig.json'], {
+        encoding: 'utf8',
+      })
+    } catch (error) {
+      output = (error as { stdout?: string }).stdout ?? String(error)
+    }
+    // Only the generated files; the app's own components are linted elsewhere.
+    const errors = output.split('\n').filter((line) => line.startsWith('__tests__/.generated/'))
+    expect(errors).toEqual([])
+  }, 60_000)
+})
diff --git a/__tests__/generateReactHookFormCode.spec.ts b/__tests__/generateReactHookFormCode.spec.ts
deleted file mode 100644
index df44b69..0000000
--- a/__tests__/generateReactHookFormCode.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { readFileSync } from 'node:fs'
-import { resolve } from 'node:path'
-
-describe('generateReactHookFormCode', () => {
-  it('includes Form import when using <Form {...form}> wrapper', () => {
-    const filePath = resolve(
-      process.cwd(),
-      'screens/generate-code-parts/react-hook-form.tsx',
-    )
-    const code = readFileSync(filePath, 'utf8')
-
-    expect(code).toContain('import { Form } from "@/components/ui/form"')
-    expect(code).toContain('<Form {...form}>')
-  })
-})
diff --git a/__tests__/generated.tsconfig.json b/__tests__/generated.tsconfig.json
new file mode 100644
index 0000000..b2eaa91
--- /dev/null
+++ b/__tests__/generated.tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "incremental": false,
+    "noUnusedLocals": true
+  },
+  "include": ["../next-env.d.ts", "../global.d.ts", ".generated/**/*.tsx"]
+}
diff --git a/__tests__/primitive-seam.spec.ts b/__tests__/primitive-seam.spec.ts
new file mode 100644
index 0000000..e9c2e16
--- /dev/null
+++ b/__tests__/primitive-seam.spec.ts
@@ -0,0 +1,32 @@
+import { execFileSync } from 'node:child_process'
+import { describe, expect, it } from 'vitest'
+
+/**
+ * The primitive library (Base UI, formerly Radix) lives behind the
+ * components/ui wrappers. App code talks to the wrappers only, so swapping
+ * or upgrading the library touches components/ui and nothing else.
+ */
+describe('primitive seam', () => {
+  it('keeps primitive-library imports inside components/ui', () => {
+    let output = ''
+    try {
+      output = execFileSync(
+        'git',
+        [
+          'grep',
+          '-nE',
+          `from ['"](@radix-ui/|radix-ui['"]|@base-ui/)`,
+          '--',
+          '*.ts',
+          '*.tsx',
+          ':!components/ui/**',
+          ':!__tests__/**',
+        ],
+        { encoding: 'utf8' },
+      )
+    } catch {
+      // git grep exits 1 when nothing matches
+    }
+    expect(output).toBe('')
+  })
+})
diff --git a/__tests__/registry-catalog.spec.ts b/__tests__/registry-catalog.spec.ts
new file mode 100644
index 0000000..eff3c05
--- /dev/null
+++ b/__tests__/registry-catalog.spec.ts
@@ -0,0 +1,145 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs'
+import { basename, resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+import { fieldVariants } from '@/components/field-variants'
+import {
+  getRegistryItem,
+  installCommand,
+  listRegistryItems,
+  registryItemUrl,
+  type RegistryItem,
+} from '@/lib/registry-catalog'
+
+const root = process.cwd()
+const read = (path: string) => readFileSync(resolve(root, path), 'utf8')
+
+/** Module specifiers imported by a source file. */
+function importsOf(source: string): string[] {
+  return [...source.matchAll(/(?:from|import)\s*['"]([^'"]+)['"]/g)].map((m) => m[1])
+}
+
+/** npm package name for a bare specifier (`react-phone-number-input/flags` -> `react-phone-number-input`). */
+function packageName(spec: string) {
+  const parts = spec.split('/')
+  return spec.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0]
+}
+
+const PROVIDED_BY_PROJECT = new Set(['react', 'react-dom'])
+
+/** Files an item ships plus those of the items from this registry it depends on. */
+function filesWithOwnDependencies(item: RegistryItem, seen = new Set<string>()): string[] {
+  if (seen.has(item.name)) return []
+  seen.add(item.name)
+  const own = (item.registryDependencies ?? [])
+    .filter((dep) => dep.startsWith('http'))
+    .map((dep) => getRegistryItem(basename(dep, '.json')))
+    .filter((dep): dep is RegistryItem => Boolean(dep))
+  return [...item.files.map((file) => file.path), ...own.flatMap((dep) => filesWithOwnDependencies(dep, seen))]
+}
+
+describe('registry catalog', () => {
+  const items = listRegistryItems()
+
+  it('has unique item names', () => {
+    const names = items.map((item) => item.name)
+    expect(new Set(names).size).toBe(names.length)
+  })
+
+  describe.each(items.map((item) => [item.name, item] as const))('%s', (name, item) => {
+    const sources = item.files
+      .filter((file) => /\.tsx?$/.test(file.path))
+      .map((file) => ({ path: file.path, code: read(file.path) }))
+    const specs = sources.flatMap((source) => importsOf(source.code))
+    const shipped = new Set(item.files.map((file) => file.path))
+    const available = new Set(filesWithOwnDependencies(item))
+
+    it('ships files that exist', () => {
+      for (const file of item.files) expect(existsSync(resolve(root, file.path)), file.path).toBe(true)
+    })
+
+    it('declares every npm package it imports', () => {
+      const packages = specs
+        .filter((spec) => !spec.startsWith('.') && !spec.startsWith('@/'))
+        .map(packageName)
+        .filter((pkg) => !PROVIDED_BY_PROJECT.has(pkg))
+      for (const pkg of packages) expect(item.dependencies ?? [], `${name} imports ${pkg}`).toContain(pkg)
+    })
+
+    it('declares exactly the ui items it imports', () => {
+      const uiImports = new Set(
+        specs
+          .filter((spec) => spec.startsWith('@/components/ui/'))
+          .map((spec) => spec.replace('@/components/ui/', ''))
+          .filter((dep) => !shipped.has(`components/ui/${dep}.tsx`)),
+      )
+      const declared = new Set(
+        (item.registryDependencies ?? [])
+          .map((dep) => (dep.startsWith('http') ? basename(dep, '.json') : dep))
+          .filter((dep) => (getRegistryItem(dep)?.type ?? 'registry:ui') === 'registry:ui'),
+      )
+      expect([...declared].sort()).toEqual([...uiImports].sort())
+    })
+
+    it('ships every project-local module it imports', () => {
+      const local = specs.filter(
+        (spec) => spec.startsWith('@/') && !spec.startsWith('@/components/ui/') && spec !== '@/lib/utils',
+      )
+      for (const spec of local) {
+        const path = spec.slice(2)
+        const candidates = [path, `${path}.ts`, `${path}.tsx`]
+        expect(candidates.some((c) => available.has(c)), `${name} imports ${spec}`).toBe(true)
+      }
+    })
+
+    // Items must install cleanly into radix-*, base-* and legacy styles alike,
+    // so they may only use props every shadcn wrapper shares.
+    it('uses no primitive-library-specific API', () => {
+      const forbidden: [RegExp, string][] = [
+        [/['"](@radix-ui\/[^'"]+|radix-ui|@base-ui\/[^'"]+)['"]/, 'imports a primitive library directly'],
+        [/\basChild\b/, 'uses Radix asChild; style the trigger with buttonVariants instead'],
+        [/\srender=\{\s*</, 'uses Base UI render; style the trigger with buttonVariants instead'],
+        [/data-\[state|data-state|data-\[open|data-open/, 'styles a primitive state attribute'],
+        [/\b(InputProps|CalendarProps)\b/, 'imports a type the stock wrappers do not export'],
+        [/<style jsx/, 'uses styled-jsx, which only exists in Next.js'],
+      ]
+      for (const source of sources) {
+        for (const [pattern, reason] of forbidden) {
+          expect(pattern.test(source.code), `${source.path} ${reason}`).toBe(false)
+        }
+      }
+    })
+
+    it('depends on its own registry items by URL', () => {
+      for (const dep of item.registryDependencies ?? []) {
+        if (getRegistryItem(dep)) throw new Error(`${name}: use ${registryItemUrl(dep)} instead of "${dep}"`)
+        if (dep.startsWith('http')) expect(getRegistryItem(basename(dep, '.json')), dep).toBeDefined()
+      }
+    })
+  })
+
+  it('has a registry item for every component docs page', () => {
+    const pages = readdirSync(resolve(root, 'components/components'))
+      .filter((file) => file.endsWith('.tsx'))
+      .map((file) => basename(file, '.tsx'))
+      .filter((page) => !['component-doc-shell', 'components-sidebar'].includes(page))
+    for (const page of pages) expect(getRegistryItem(page), page).toBeDefined()
+  })
+
+  // Official shadcn items the generated forms use; anything else must be ours.
+  const OFFICIAL = ['button', 'calendar', 'checkbox', 'command', 'field', 'input', 'input-otp', 'popover', 'radio-group', 'select', 'slider', 'sonner', 'switch', 'textarea']
+
+  it('can install every component the playground generates code for', () => {
+    for (const variant of fieldVariants) {
+      for (const item of variant.registryItems) {
+        expect(OFFICIAL.includes(item) || getRegistryItem(item) !== undefined, `${variant.name}: ${item}`).toBe(true)
+      }
+    }
+  })
+
+  it('builds install commands from item URLs', () => {
+    expect(installCommand(['credit-card', 'button'])).toBe(
+      'npx shadcn@latest add https://www.shadcn-form.com/r/credit-card.json button',
+    )
+  })
+})
diff --git a/app/(static)/components/[slug]/page.tsx b/app/(static)/components/[slug]/page.tsx
index e784690..0e67581 100644
--- a/app/(static)/components/[slug]/page.tsx
+++ b/app/(static)/components/[slug]/page.tsx
@@ -1,10 +1,7 @@
-'use client'
-
-import dynamic from 'next/dynamic'
+import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
-import { use } from 'react'
 
-import { components } from '@/constants/components'
+import { componentDocs, documentedComponents } from '@/components/components'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -13,51 +10,29 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/components/ui/breadcrumb'
+import { getRegistryItem } from '@/lib/registry-catalog'
+
+type Props = { params: Promise<{ slug: string }> }
 
-const componentPages = {
-  autocomplete: dynamic(() => import('@/components/components/autocomplete')),
-  'availability-picker': dynamic(
-    () => import('@/components/components/availability-picker'),
-  ),
-  'color-picker': dynamic(() => import('@/components/components/color-picker')),
-  'cron-expression-builder': dynamic(
-    () => import('@/components/components/cron-expression-builder'),
-  ),
-  'emoji-picker': dynamic(() => import('@/components/components/emoji-picker')),
-  'image-upload-dropzone': dynamic(
-    () => import('@/components/components/image-upload-dropzone'),
-  ),
-  'inline-editable-field': dynamic(
-    () => import('@/components/components/inline-editable-field'),
-  ),
-  'location-input': dynamic(
-    () => import('@/components/components/location-input'),
-  ),
-  'masked-input': dynamic(() => import('@/components/components/masked-input')),
-  'signature-input': dynamic(
-    () => import('@/components/components/signature-input'),
-  ),
-  'signature-pad': dynamic(() => import('@/components/components/signature-pad')),
-  'sortable-list-input': dynamic(
-    () => import('@/components/components/sortable-list-input'),
-  ),
-  'token-input': dynamic(() => import('@/components/components/token-input')),
-  'transfer-list': dynamic(() => import('@/components/components/transfer-list')),
-  'tree-select': dynamic(() => import('@/components/components/tree-select')),
-  'credit-card': dynamic(() => import('@/components/components/credit-card')),
+export function generateStaticParams() {
+  return documentedComponents().map((item) => ({ slug: item.name }))
 }
 
-export default function Page({ params }: { params: Promise<{ slug: string }> }) {
-  const { slug } = use(params)
-  const PreviewComponent = componentPages[slug as keyof typeof componentPages]
-  const componentEntry = components
-    .flatMap((group) => group.sub)
-    .find((entry) => entry.path === `/components/${slug}`)
-  const isKnownSlug = components.some((group) =>
-    group.sub.some((entry) => entry.path === `/components/${slug}`),
-  )
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const item = getRegistryItem((await params).slug)
+  if (!item) return {}
+  return {
+    title: `${item.title} - Shadcn Form Builder`,
+    description: item.description,
+  }
+}
+
+export default async function Page({ params }: Props) {
+  const { slug } = await params
+  const item = getRegistryItem(slug)
+  const Doc = componentDocs[slug]
 
-  if (!PreviewComponent || !isKnownSlug) {
+  if (!item || !Doc) {
     notFound()
   }
 
@@ -71,21 +46,15 @@ export default function Page({ params }: { params: Promise<{ slug: string }> })
             </BreadcrumbItem>
             <BreadcrumbSeparator />
             <BreadcrumbItem>
-              <BreadcrumbPage className="capitalize">
-                {slug.replace(/-/g, ' ')} Component
-              </BreadcrumbPage>
+              <BreadcrumbPage>{item.title}</BreadcrumbPage>
             </BreadcrumbItem>
           </BreadcrumbList>
         </Breadcrumb>
-        <h1 className="text-2xl font-semibold capitalize">
-          {slug.replace(/-/g, ' ')}
-        </h1>
-        <p className="text-sm text-muted-foreground">
-          {componentEntry?.description ?? 'Reusable component with shadcn/ui and React.'}
-        </p>
+        <h1 className="text-2xl font-semibold">{item.title}</h1>
+        <p className="text-sm text-muted-foreground">{item.description}</p>
       </div>
       <div className="rounded-xl border bg-background p-3 md:p-5">
-        <PreviewComponent />
+        <Doc />
       </div>
     </div>
   )
diff --git a/app/(static)/components/page.tsx b/app/(static)/components/page.tsx
index abcf57e..95a5486 100644
--- a/app/(static)/components/page.tsx
+++ b/app/(static)/components/page.tsx
@@ -1,8 +1,8 @@
 import { redirect } from 'next/navigation'
 
-import { components } from '@/constants/components'
+import { documentedComponents } from '@/components/components'
 
 export default function ComponentsPage() {
-  const firstComponentPath = components[0]?.sub?.[0]?.path
-  redirect(firstComponentPath ?? '/')
+  const first = documentedComponents()[0]
+  redirect(first ? `/components/${first.name}` : '/')
 }
diff --git a/app/(static)/readme/page.tsx b/app/(static)/readme/page.tsx
index 83af9a9..a6b8223 100644
--- a/app/(static)/readme/page.tsx
+++ b/app/(static)/readme/page.tsx
@@ -1,7 +1,7 @@
 import { Link } from 'next-view-transitions'
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import { Separator } from '@radix-ui/react-separator'
+import { Separator } from '@/components/ui/separator'
 
 interface UserLinkProps {
   href: string
diff --git a/app/(static)/templates/[category]/(details)/[slug]/page.tsx b/app/(static)/templates/[category]/(details)/[slug]/page.tsx
index fbda067..a9b0fd3 100644
--- a/app/(static)/templates/[category]/(details)/[slug]/page.tsx
+++ b/app/(static)/templates/[category]/(details)/[slug]/page.tsx
@@ -1,237 +1,49 @@
+import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
-import { templates } from '@/constants/templates'
-import BetterAuth from '@/components/templates/better-auth'
-import ClerkAuth from '@/components/templates/clerk-auth'
-import ClerkForgotPassword from '@/components/templates/clerk-forgot-password'
-import ClerkResetPassword from '@/components/templates/clerk-reset-password'
-import ClerkSignIn from '@/components/templates/clerk-sign-in'
-import ClerkSignUp from '@/components/templates/clerk-sign-up'
-import Contact from '@/components/templates/contact'
-import FirebaseAuth from '@/components/templates/firebase-auth'
-import ForgotPassword from '@/components/templates/forgot-password'
-import Newsletter from '@/components/templates/newsletter'
-import ResetPassword from '@/components/templates/reset-password'
-import ShadcnAuth from '@/components/templates/shadcn-auth'
-import SignIn from '@/components/templates/sign-in'
-import SignUp from '@/components/templates/sign-up'
-import SupabaseAuth from '@/components/templates/supabase-auth'
+import { getTemplatePreview } from '@/components/templates/previews'
 import { TemplateBlockViewer } from '@/components/templates/template-block-viewer'
-
-const templatePages = {
-  'shadcn-auth': ShadcnAuth,
-  'clerk-auth': ClerkAuth,
-  'supabase-auth': SupabaseAuth,
-  'firebase-auth': FirebaseAuth,
-  'better-auth': BetterAuth,
-  contact: Contact,
-  newsletter: Newsletter,
-}
-
-const templateFeatures: Record<string, string[]> = {
-  'shadcn-auth': [
-    'Authentication starter for shadcn/ui only.',
-    'Includes sign in, sign up, forgot password, and reset password flows in one provider page.',
-    'No third-party auth provider dependencies.',
-  ],
-  'clerk-auth': [
-    'Clerk-themed auth flows using shadcn/ui patterns.',
-    'Includes sign in, sign up, forgot password, and reset password in one details page.',
-    'Copy/paste ready: install Clerk with pnpm add @clerk/nextjs @clerk/elements before wiring handlers.',
-  ],
-  'supabase-auth': [
-    'Supabase-ready auth provider template.',
-    'Includes all core auth flows in one details page.',
-    'Ready for Supabase auth action wiring.',
-  ],
-  'firebase-auth': [
-    'Firebase auth provider template.',
-    'Includes all core auth flows in one details page.',
-    'Clear primary and secondary auth actions.',
-  ],
-  'better-auth': [
-    'Composable Better Auth provider template.',
-    'Includes all core auth flows in one details page.',
-    'Prepared for server-action based auth.',
-  ],
-  contact: [
-    'Contact flow with name, email, and message.',
-    'Validation-ready for support or sales inboxes.',
-    'Accessible labels and feedback states.',
-  ],
-  newsletter: [
-    'Single-field email capture experience.',
-    'High-conversion compact layout.',
-    'Ready for newsletter provider integration.',
-  ],
-}
-
-const templateCodeFiles: Record<
-  string,
-  Array<{ filename: string; label: string; path: string }>
-> = {
-  'shadcn-auth': [
-    {
-      filename: 'sign-in',
-      label: 'sign-in.tsx',
-      path: 'components/templates/sign-in.tsx',
-    },
-    {
-      filename: 'sign-up',
-      label: 'sign-up.tsx',
-      path: 'components/templates/sign-up.tsx',
-    },
-    {
-      filename: 'forgot-password',
-      label: 'forgot-password.tsx',
-      path: 'components/templates/forgot-password.tsx',
-    },
-    {
-      filename: 'reset-password',
-      label: 'reset-password.tsx',
-      path: 'components/templates/reset-password.tsx',
-    },
-    {
-      filename: 'base-auth-shell',
-      label: 'base-auth-shell.tsx',
-      path: 'components/templates/base-auth-shell.tsx',
-    },
-  ],
-  'clerk-auth': [
-    {
-      filename: 'clerk-sign-in',
-      label: 'clerk-sign-in.tsx',
-      path: 'components/templates/clerk-sign-in.tsx',
-    },
-    {
-      filename: 'clerk-sign-up',
-      label: 'clerk-sign-up.tsx',
-      path: 'components/templates/clerk-sign-up.tsx',
-    },
-    {
-      filename: 'clerk-forgot-password',
-      label: 'clerk-forgot-password.tsx',
-      path: 'components/templates/clerk-forgot-password.tsx',
-    },
-    {
-      filename: 'clerk-reset-password',
-      label: 'clerk-reset-password.tsx',
-      path: 'components/templates/clerk-reset-password.tsx',
-    },
-    {
-      filename: 'base-auth-shell',
-      label: 'base-auth-shell.tsx',
-      path: 'components/templates/base-auth-shell.tsx',
-    },
-  ],
-}
-
-const templateInstallBlocks: Record<string, string> = {
-  'shadcn-auth': 'login-05',
-}
-
-const shadcnFlowPages = {
-  'sign-in': SignIn,
-  'sign-up': SignUp,
-  'forgot-password': ForgotPassword,
-  'reset-password': ResetPassword,
-} as const
-
-const clerkFlowPages = {
-  'sign-in': ClerkSignIn,
-  'sign-up': ClerkSignUp,
-  'forgot-password': ClerkForgotPassword,
-  'reset-password': ClerkResetPassword,
-} as const
-
-type ShadcnFlow = keyof typeof shadcnFlowPages
-type ClerkFlow = keyof typeof clerkFlowPages
-
-function getShadcnFlow(flow?: string): ShadcnFlow {
-  if (
-    flow === 'sign-in' ||
-    flow === 'sign-up' ||
-    flow === 'forgot-password' ||
-    flow === 'reset-password'
-  ) {
-    return flow
-  }
-
-  return 'sign-in'
-}
-
-function getClerkFlow(flow?: string): ClerkFlow {
-  if (
-    flow === 'sign-in' ||
-    flow === 'sign-up' ||
-    flow === 'forgot-password' ||
-    flow === 'reset-password'
-  ) {
-    return flow
-  }
-
-  return 'sign-in'
-}
+import { findTemplate, resolveFlow } from '@/constants/templates'
 
 interface TemplateDetailsPageProps {
   params: Promise<{ slug: string; category: string }>
   searchParams: Promise<{ flow?: string }>
 }
 
-export default async function Page({
+export async function generateMetadata({
   params,
-  searchParams,
-}: TemplateDetailsPageProps) {
-  const { slug, category } = await params
-  const { flow } = await searchParams
-  const PreviewComponent = templatePages[slug as keyof typeof templatePages]
+}: Pick<TemplateDetailsPageProps, 'params'>): Promise<Metadata> {
+  const { category, slug } = await params
+  const template = findTemplate(category, slug)
+  if (!template) return {}
+  return { title: `${template.title} - Shadcn Form Builder`, description: template.description }
+}
 
-  const categoryConfig = templates.find((template) =>
-    template.path.endsWith(`/${category}`),
-  )
-  const isValidTemplateForCategory = categoryConfig?.sub.some(
-    (entry) => entry.path === `/templates/${category}/${slug}`,
-  )
-  const templateConfig = categoryConfig?.sub.find(
-    (entry) => entry.path === `/templates/${category}/${slug}`,
-  )
+export default async function Page({ params, searchParams }: TemplateDetailsPageProps) {
+  const { slug, category } = await params
+  const { flow: flowId } = await searchParams
+  const template = findTemplate(category, slug)
+  const flow = template && resolveFlow(template, flowId)
+  const Preview = template && getTemplatePreview(template.name, flow?.id)
 
-  if (!PreviewComponent || !isValidTemplateForCategory || !templateConfig) {
+  if (!template || !Preview) {
     notFound()
   }
 
-  const isShadcnAuthPage = slug === 'shadcn-auth'
-  const isClerkAuthPage = slug === 'clerk-auth'
-  const activeShadcnFlow = getShadcnFlow(flow)
-  const ActiveShadcnFlow = shadcnFlowPages[activeShadcnFlow]
-  const activeClerkFlow = getClerkFlow(flow)
-  const ActiveClerkFlow = clerkFlowPages[activeClerkFlow]
-  const ActivePreview = isShadcnAuthPage
-    ? ActiveShadcnFlow
-    : isClerkAuthPage
-      ? ActiveClerkFlow
-      : PreviewComponent
-
   return (
     <div className="space-y-5">
       <div className="rounded-xl border bg-gradient-to-b from-background to-muted/30 p-4 md:p-6 space-y-4">
-        <h1 className="text-2xl font-semibold">{templateConfig.title}</h1>
-        <p className="text-sm text-muted-foreground">
-          {templateConfig.description}
-        </p>
+        <h1 className="text-2xl font-semibold">{template.title}</h1>
+        <p className="text-sm text-muted-foreground">{template.description}</p>
 
         <div className="rounded-lg border bg-background/80 p-3">
           <p className="text-sm font-medium">How to use</p>
           <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-muted-foreground">
+            <li>Use the left sidebar to pick a flow or switch templates.</li>
+            <li>Use Preview and Code in the block toolbar to test and copy quickly.</li>
             <li>
-              Use the left sidebar to pick the auth flow or switch templates.
-            </li>
-            <li>
-              Use Preview and Code in the block toolbar to test and copy
-              quickly.
-            </li>
-            <li>
-              Use the install command to scaffold this block in your own app.
+              Run the install command to add every file, dependency and
+              component this template needs to your app.
             </li>
           </ul>
         </div>
@@ -239,20 +51,15 @@ export default async function Page({
 
       <div className="rounded-xl border bg-background p-4 md:p-5 space-y-6">
         <section>
-          <TemplateBlockViewer
-            slug={slug}
-            description={templateConfig.description}
-            codeFiles={templateCodeFiles[slug]}
-            pnpmBlockName={templateInstallBlocks[slug]}
-          >
-            <ActivePreview />
+          <TemplateBlockViewer name={template.name} flows={template.flows}>
+            <Preview />
           </TemplateBlockViewer>
         </section>
 
         <section className="space-y-2">
           <h2 className="text-lg font-semibold">Features</h2>
           <ul className="list-disc pl-5 text-sm text-muted-foreground space-y-1">
-            {(templateFeatures[slug] ?? []).map((feature) => (
+            {template.features.map((feature) => (
               <li key={feature}>{feature}</li>
             ))}
           </ul>
diff --git a/app/(static)/templates/[category]/page.tsx b/app/(static)/templates/[category]/page.tsx
index 694f5ea..902bd0e 100644
--- a/app/(static)/templates/[category]/page.tsx
+++ b/app/(static)/templates/[category]/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation'
 
-import { templates } from '@/constants/templates'
+import { templateCategories } from '@/constants/templates'
 
 interface CategoryPageProps {
   params: Promise<{
@@ -10,11 +10,6 @@ interface CategoryPageProps {
 
 export default async function CategoryPage({ params }: CategoryPageProps) {
   const { category } = await params
-
-  const matchingTemplate = templates.find((template) =>
-    template.path.endsWith(`/${category}`),
-  )
-
-  const defaultTemplatePath = matchingTemplate?.sub?.[0]?.path
-  redirect(defaultTemplatePath ?? '/templates')
+  const first = templateCategories.find((entry) => entry.id === category)?.templates[0]
+  redirect(first?.path ?? '/templates')
 }
diff --git a/app/(static)/templates/page.tsx b/app/(static)/templates/page.tsx
index 9a1090e..c5642a0 100644
--- a/app/(static)/templates/page.tsx
+++ b/app/(static)/templates/page.tsx
@@ -10,7 +10,7 @@ import {
 } from 'lucide-react'
 import { Link } from 'next-view-transitions'
 
-import { templates } from '@/constants/templates'
+import { templateCategories } from '@/constants/templates'
 
 const iconMap = {
   shield: Shield,
@@ -159,7 +159,7 @@ function LoginMock() {
 export default function TemplatesPage() {
   return (
     <div className="mx-auto max-w-5xl space-y-8">
-      {templates.map((section) => (
+      {templateCategories.map((section) => (
         <section
           key={section.title}
           className="rounded-xl border bg-background/60 backdrop-blur-sm overflow-hidden"
@@ -171,7 +171,7 @@ export default function TemplatesPage() {
             </p>
           </div>
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 border-t border-border/60">
-            {section.sub.map((template) => {
+            {section.templates.map((template) => {
               const Icon = iconMap[template.icon]
 
               return (
diff --git a/app/api/file/[filename]/route.ts b/app/api/file/[filename]/route.ts
deleted file mode 100644
index ae3570c..0000000
--- a/app/api/file/[filename]/route.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { NextResponse } from 'next/server'
-import { promises as fs } from 'fs'
-import path from 'path'
-
-export async function GET(
-  request: Request,
-  { params }: { params: Promise<{ filename: string }> },
-) {
-  try {
-    const { filename } = await params
-    // Validate filename to prevent directory traversal attacks
-    if (!filename.match(/^[a-zA-Z0-9-]+$/)) {
-      return NextResponse.json({ error: 'Invalid filename' }, { status: 400 })
-    }
-
-    const filePath = path.join(
-      process.cwd(),
-      'components',
-      'templates',
-      `${filename}.tsx`,
-    )
-
-    const fileContents = await fs.readFile(filePath, 'utf8')
-    return NextResponse.json({ content: fileContents })
-  } catch (error) {
-    return NextResponse.json({ error: 'Failed to read file' }, { status: 500 })
-  }
-}
diff --git a/app/globals.css b/app/globals.css
index a735b92..5653427 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,7 +1,11 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 @custom-variant dark (&:is(.dark *));
 @plugin "@tailwindcss/typography";
-@plugin "tailwindcss-animate";
+
+/* Form layouts build `col-span-${n}` at runtime; keep the whole range. */
+@source inline("col-span-{1,2,3,4,5,6,7,8,9,10,11,12}");
 
 :root {
   --background: hsl(0 0% 100%);
@@ -99,6 +103,7 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar-background);
   --color-sidebar-background: var(--sidebar-background);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -122,16 +127,6 @@
   --animate-border-beam: border-beam calc(var(--duration)*1s) infinite linear;
   --animate-ripple: ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite;
   
-  @keyframes accordion-down {
-    from { height: 0; }
-    to { height: var(--radix-accordion-content-height); }
-  }
-  
-  @keyframes accordion-up {
-    from { height: var(--radix-accordion-content-height); }
-    to { height: 0; }
-  }
-  
   @keyframes marquee {
     from { transform: translateX(0); }
     to { transform: translateX(calc(-100% - var(--gap))); }
@@ -168,6 +163,8 @@
 
 @layer base {
   body {
+    /* Base UI: keeps iOS 26+ Safari from mispositioning popups. */
+    position: relative;
     @apply bg-background text-foreground;
     font-family: Arial, Helvetica, sans-serif;
   }
diff --git a/app/layout.tsx b/app/layout.tsx
index c6b31f0..0b6693f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -78,7 +78,8 @@ export default function RootLayout({
           className={`${geistSans.variable} ${geistMono.variable} antialiased`}
         >
           <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID || ''} />
-          <div>
+          {/* Base UI portals render outside this root; isolate keeps app z-indexes below them. */}
+          <div className="root isolate">
             <NextTopLoader color="#FF9432" showSpinner={false} />
             <Toaster />
             <AllProviders>
diff --git a/components.json b/components.json
index 05b4a12..34cb3a0 100644
--- a/components.json
+++ b/components.json
@@ -1,10 +1,10 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "base-vega",
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.ts",
+    "config": "",
     "css": "app/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
@@ -15,7 +15,7 @@
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
-    "hooks": "@/hooks",
-    "form": "@/components/form"
-  }
-}
\ No newline at end of file
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/components/animated-tooltip.tsx b/components/animated-tooltip.tsx
deleted file mode 100644
index ad76c32..0000000
--- a/components/animated-tooltip.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-import Image from 'next/image'
-import React, { useState } from 'react'
-import {
-  motion,
-  useTransform,
-  AnimatePresence,
-  useMotionValue,
-  useSpring,
-} from 'framer-motion'
-
-export const AnimatedTooltip = ({
-  items,
-  size = 40,
-  spacingClass = '-mr-4',
-}: {
-  items: {
-    id: number
-    name: string
-    designation: string
-    image: string
-  }[]
-  size?: number
-  spacingClass?: string
-}) => {
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
-  const springConfig = { stiffness: 100, damping: 5 }
-  const x = useMotionValue(0) // going to set this value on mouse move
-  // rotate the tooltip
-  const rotate = useSpring(
-    useTransform(x, [-100, 100], [-45, 45]),
-    springConfig,
-  )
-  // translate the tooltip
-  const translateX = useSpring(
-    useTransform(x, [-100, 100], [-50, 50]),
-    springConfig,
-  )
-  const handleMouseMove = (event: any) => {
-    const halfWidth = event.target.offsetWidth / 2
-    x.set(event.nativeEvent.offsetX - halfWidth) // set the x value, which is then used in transform and rotate
-  }
-
-  return (
-    <>
-      {items.map((item, idx) => (
-        <div
-          className={`${spacingClass} relative group`}
-          key={item.name}
-          onMouseEnter={() => setHoveredIndex(item.id)}
-          onMouseLeave={() => setHoveredIndex(null)}
-        >
-          <AnimatePresence mode="popLayout">
-            {hoveredIndex === item.id && (
-              <motion.div
-                initial={{ opacity: 0, y: 20, scale: 0.6 }}
-                animate={{
-                  opacity: 1,
-                  y: 0,
-                  scale: 1,
-                  transition: {
-                    type: 'spring',
-                    stiffness: 260,
-                    damping: 10,
-                  },
-                }}
-                exit={{ opacity: 0, y: 20, scale: 0.6 }}
-                style={{
-                  translateX: translateX,
-                  rotate: rotate,
-                  whiteSpace: 'nowrap',
-                }}
-                className="absolute -top-16 -left-full translate-x-1/2 flex text-xs  flex-col items-center justify-center rounded-md bg-black z-50 shadow-xl px-4 py-2"
-              >
-                <div className="absolute inset-x-10 z-30 w-[20%] -bottom-px bg-gradient-to-r from-transparent via-emerald-500 to-transparent h-px " />
-                <div className="absolute left-10 w-[40%] z-30 -bottom-px bg-gradient-to-r from-transparent via-sky-500 to-transparent h-px " />
-                <div className="font-bold text-white relative z-30 text-base">
-                  {item.name}
-                </div>
-                <div className="text-white text-xs">{item.designation}</div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-          <Image
-            onMouseMove={handleMouseMove}
-            height={100}
-            width={100}
-            src={item.image}
-            alt={item.name}
-            style={{ width: size, height: size }}
-            className="object-cover !m-0 !p-0 object-top rounded-full border-2 group-hover:scale-105 group-hover:z-30 border-white bg-white dark:bg-white relative transition duration-500"
-          />
-        </div>
-      ))}
-    </>
-  )
-}
diff --git a/components/blocks/checkbox.tsx b/components/blocks/checkbox.tsx
deleted file mode 100644
index dcb8ced..0000000
--- a/components/blocks/checkbox.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-// components/editor/blocks/checkbox.tsx
-import { defaultProps } from '@blocknote/core'
-import { createReactBlockSpec } from '@blocknote/react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
-import { cn } from '@/lib/utils'
-
-export const checkboxTypes = [
-  {
-    title: 'Default',
-    value: 'default',
-  },
-  {
-    title: 'Checked',
-    value: 'checked',
-  },
-] as const
-
-export const Checkbox = createReactBlockSpec(
-  {
-    type: 'checkbox',
-    propSchema: {
-      textAlignment: defaultProps.textAlignment,
-      textColor: defaultProps.textColor,
-      checked: {
-        default: false,
-      },
-      label: {
-        default: '',
-      },
-    },
-    content: 'inline',
-  },
-  {
-    render: (props) => {
-      return (
-        <div className="flex items-center space-x-2">
-          <CheckboxPrimitive.Root
-            checked={props.block.props.checked}
-            onCheckedChange={(checked) => {
-              const isChecked = checked === true
-              props.editor.updateBlock(props.block, {
-                props: { checked: isChecked },
-              })
-            }}
-            className={cn(
-              'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-            )}
-          >
-            <CheckboxPrimitive.Indicator
-              className={cn('flex items-center justify-center text-current')}
-            >
-              <CheckIcon className="h-4 w-4" />
-            </CheckboxPrimitive.Indicator>
-          </CheckboxPrimitive.Root>
-          <div ref={props.contentRef} className="flex-1" />
-        </div>
-      )
-    },
-  },
-)
diff --git a/components/blocks/schema.ts b/components/blocks/schema.ts
deleted file mode 100644
index 314907e..0000000
--- a/components/blocks/schema.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// components/editor/schema.ts
-import { z } from 'zod'
-
-export const editorFormSchema = z.object({
-  title: z.string().min(2, {
-    message: 'Title must be at least 2 characters.',
-  }),
-  content: z.array(z.any()).min(1, {
-    message: 'Content cannot be empty.',
-  }),
-  description: z.string().optional(),
-})
-
-export type EditorFormValues = z.infer<typeof editorFormSchema>
diff --git a/components/components/autocomplete-form.tsx b/components/components/autocomplete-form.tsx
deleted file mode 100644
index 65ebae4..0000000
--- a/components/components/autocomplete-form.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui/button'
-import {
-  Form,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import Autocomplete from '@/components/ui/autocomplete'
-
-const FormSchema = z.object({
-  framework: z.string().min(1, { message: 'Please select a framework' }),
-})
-
-type AutocompleteFormData = z.infer<typeof FormSchema>
-
-export function AutocompleteForm() {
-  const form = useForm<AutocompleteFormData>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  const onSubmit = (data: AutocompleteFormData) => {
-    console.log('HEY', data)
-    toast(
-      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-        <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-      </pre>,
-    )
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField
-          control={form.control}
-          name="framework"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <div>
-                <FormLabel>What is your favorite framework?</FormLabel>
-              </div>
-              <Autocomplete value={field.value} onChange={field.onChange} />
-              <FormDescription>
-                Please type and select your favorite framework?
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/components/components/autocomplete.tsx b/components/components/autocomplete.tsx
index a9f40f3..528a348 100644
--- a/components/components/autocomplete.tsx
+++ b/components/components/autocomplete.tsx
@@ -12,9 +12,7 @@ const usageCode = `import Autocomplete from '@/components/ui/autocomplete'
 export default function AutocompletePreview() {
   return (
     <ComponentDocShell
-      title="Autocomplete"
-      slug="autocomplete"
-      description="Search input with debounced suggestions and keyboard navigation."
+      name="autocomplete"
       preview={<Autocomplete />}
       previewCode={previewCode}
       usageCode={usageCode}
@@ -23,7 +21,6 @@ export default function AutocompletePreview() {
         'Keyboard navigation (ArrowUp, ArrowDown, Enter, Escape).',
         'Accessible listbox semantics for suggestions.',
       ]}
-      dependencies={['use-debounce']}
     />
   )
 }
diff --git a/components/components/availability-picker.tsx b/components/components/availability-picker.tsx
index 34a62f9..e1eb6ae 100644
--- a/components/components/availability-picker.tsx
+++ b/components/components/availability-picker.tsx
@@ -15,9 +15,7 @@ export default function AvailabilityPickerPreview() {
 
   return (
     <ComponentDocShell
-      title="Schedule / Availability Picker"
-      slug="availability-picker"
-      description="Weekly time-slot grid for selecting recurring availability."
+      name="availability-picker"
       preview={<AvailabilityPicker value={slots} onChange={setSlots} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/color-picker.tsx b/components/components/color-picker.tsx
index 6e3953a..ca261a8 100644
--- a/components/components/color-picker.tsx
+++ b/components/components/color-picker.tsx
@@ -17,9 +17,7 @@ export default function ColorPickerPreview() {
 
   return (
     <ComponentDocShell
-      title="Color Picker"
-      slug="color-picker"
-      description="Figma-like color picker with saturation/value canvas, hue + alpha sliders, format switching, eyedropper, and swatches."
+      name="color-picker"
       preview={<ColorPicker value={color} onChange={setColor} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/component-doc-shell.tsx b/components/components/component-doc-shell.tsx
index 46b99b0..faf3d0f 100644
--- a/components/components/component-doc-shell.tsx
+++ b/components/components/component-doc-shell.tsx
@@ -6,31 +6,33 @@ import { Link } from 'next-view-transitions'
 import Code from '@/components/code'
 import { Card } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import {
+  getRegistryItem,
+  installCommand,
+  registryItemUrl,
+} from '@/lib/registry-catalog'
 
 type ComponentDocShellProps = {
-  title: string
-  slug: string
-  description: string
+  /** Registry item name; title, description and install command come from the catalog. */
+  name: string
   preview: React.ReactNode
   previewCode: string
   usageCode: string
   features?: string[]
-  dependencies?: string[]
   notes?: React.ReactNode
 }
 
 export function ComponentDocShell({
-  title,
-  slug,
-  description,
+  name,
   preview,
   previewCode,
   usageCode,
   features = [],
-  dependencies = [],
   notes,
 }: ComponentDocShellProps) {
-  const installationCode = `npx shadcn@latest add https://www.shadcn-form.com/registry/${slug}.json`
+  const item = getRegistryItem(name)
+  if (!item) throw new Error(`Unknown registry item: ${name}`)
+  const { title, description } = item
 
   return (
     <div className="space-y-6">
@@ -70,23 +72,14 @@ export function ComponentDocShell({
 
       <section className="space-y-2">
         <h3 className="text-lg font-semibold">Installation</h3>
-        <Code code={installationCode} />
+        <Code code={installCommand(name)} />
         <p className="text-sm text-muted-foreground">
-          Registry JSON:{' '}
-          <Link
-            href={`https://www.shadcn-form.com/registry/${slug}.json`}
-            target="_blank"
-            className="underline"
-          >
-            /registry/{slug}.json
+          The CLI installs every dependency listed in the{' '}
+          <Link href={registryItemUrl(name)} target="_blank" className="underline">
+            registry item
           </Link>
+          .
         </p>
-        {dependencies.length > 0 ? (
-          <>
-            <p className="text-sm text-muted-foreground">Install dependencies:</p>
-            <Code code={`npm install ${dependencies.join(' ')}`} />
-          </>
-        ) : null}
       </section>
 
       <section className="space-y-2">
diff --git a/components/components/components-sidebar.tsx b/components/components/components-sidebar.tsx
index 8fe591e..2e41956 100644
--- a/components/components/components-sidebar.tsx
+++ b/components/components/components-sidebar.tsx
@@ -15,44 +15,41 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from '@/components/ui/sidebar'
-import { components } from '@/constants/components'
+import { documentedComponents } from '@/components/components'
 
 export function AppSidebar() {
   const pathname = usePathname()
+  const items = documentedComponents()
   return (
     <Sidebar collapsible="none" className="border-r bg-background">
       <SidebarContent>
         <SidebarGroup className="py-4">
           <SidebarMenu className="gap-2">
-            {components.map((item) => (
-              <SidebarMenuItem key={item.title} className="mb-2">
-                <SidebarMenuButton asChild className="py-2">
-                  <Link href={item.path} className="font-semibold text-base">
-                    {item.title}
-                  </Link>
-                </SidebarMenuButton>
-                <SidebarMenuBadge className="border">
-                  {item.sub.length}
-                </SidebarMenuBadge>
-                {item.sub?.length ? (
-                  <SidebarMenuSub className="gap-1 py-2">
-                    {item.sub.map((subItem) => (
-                      <SidebarMenuSubItem key={subItem.title}>
-                        <SidebarMenuSubButton
-                          asChild
-                          isActive={pathname === subItem.path}
-                          className="py-2 h-auto"
-                        >
-                          <Link href={subItem.path} className="capitalize leading-snug">
-                            {subItem.title}
-                          </Link>
-                        </SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                    ))}
-                  </SidebarMenuSub>
-                ) : null}
-              </SidebarMenuItem>
-            ))}
+            <SidebarMenuItem className="mb-2">
+              <SidebarMenuButton
+                className="py-2 font-semibold text-base"
+                render={<Link href="/components" />}
+              >
+                Components
+              </SidebarMenuButton>
+              <SidebarMenuBadge className="border">{items.length}</SidebarMenuBadge>
+              <SidebarMenuSub className="gap-1 py-2">
+                {items.map((item) => {
+                  const path = `/components/${item.name}`
+                  return (
+                    <SidebarMenuSubItem key={item.name}>
+                      <SidebarMenuSubButton
+                        isActive={pathname === path}
+                        className="py-2 h-auto leading-snug"
+                        render={<Link href={path} />}
+                      >
+                        {item.title}
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  )
+                })}
+              </SidebarMenuSub>
+            </SidebarMenuItem>
           </SidebarMenu>
         </SidebarGroup>
       </SidebarContent>
diff --git a/components/components/credit-card-form.tsx b/components/components/credit-card-form.tsx
deleted file mode 100644
index 440bce5..0000000
--- a/components/components/credit-card-form.tsx
+++ /dev/null
@@ -1,211 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui/button'
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import { CreditCard, type CreditCardValue } from '@/components/ui/credit-card'
-
-// Enhanced validation schema
-const FormSchema = z
-  .object({
-    cardholderName: z
-      .string()
-      .min(2, 'Cardholder name must be at least 2 characters')
-      .max(50, 'Cardholder name must be less than 50 characters'),
-
-    cardNumber: z
-      .string()
-      .min(1, 'Card number is required')
-      .refine((value) => {
-        const cleanNumber = value.replace(/\s/g, '')
-        return /^\d{13,19}$/.test(cleanNumber)
-      }, 'Invalid card number format'),
-
-    expiryMonth: z
-      .string()
-      .min(1, 'Expiry month is required')
-      .refine((value) => {
-        const month = parseInt(value)
-        return month >= 1 && month <= 12
-      }, 'Invalid month'),
-
-    expiryYear: z
-      .string()
-      .min(1, 'Expiry year is required')
-      .refine((value) => {
-        const year = parseInt(value)
-        const currentYear = new Date().getFullYear()
-        return year >= currentYear && year <= currentYear + 20
-      }, 'Invalid year'),
-
-    cvv: z
-      .string()
-      .min(3, 'CVV must be at least 3 digits')
-      .max(4, 'CVV must be at most 4 digits')
-      .refine((value) => /^\d+$/.test(value), 'CVV must contain only digits'),
-  })
-
-  // Add expiry date validation
-  .refine(
-    (data) => {
-      if (!data.expiryMonth || !data.expiryYear) return true // Let individual field validation handle this
-
-      const currentDate = new Date()
-      const currentYear = currentDate.getFullYear()
-      const currentMonth = currentDate.getMonth() + 1
-      const expiryYear = parseInt(data.expiryYear)
-      const expiryMonth = parseInt(data.expiryMonth)
-
-      return (
-        expiryYear > currentYear ||
-        (expiryYear === currentYear && expiryMonth >= currentMonth)
-      )
-    },
-    {
-      message: 'Card has expired',
-      path: ['expiryYear'], // Show error on year field
-    },
-  )
-
-type CreditCardFormData = z.infer<typeof FormSchema>
-
-export function CreditCardForm() {
-  const [creditCard, setCreditCard] = useState<CreditCardValue>({
-    cardholderName: '',
-    cardNumber: '',
-    expiryMonth: '',
-    expiryYear: '',
-    cvv: '',
-  })
-
-  const [isCardValid, setIsCardValid] = useState(false)
-
-  const form = useForm<CreditCardFormData>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      cardholderName: '',
-      cardNumber: '',
-      expiryMonth: '',
-      expiryYear: '',
-      cvv: '',
-    },
-    mode: 'onChange', // Enable real-time validation
-  })
-
-  const handleCreditCardChange = (value: CreditCardValue) => {
-    setCreditCard(value)
-
-    // Update form values
-    form.setValue('cardholderName', value.cardholderName, {
-      shouldValidate: true,
-    })
-    form.setValue('cardNumber', value.cardNumber, { shouldValidate: true })
-    form.setValue('expiryMonth', value.expiryMonth, { shouldValidate: true })
-    form.setValue('expiryYear', value.expiryYear, { shouldValidate: true })
-    form.setValue('cvv', value.cvv, { shouldValidate: true })
-  }
-
-  const handleValidationChange = (isValid: boolean, errors: any) => {
-    setIsCardValid(isValid)
-  }
-
-  const onSubmit = (data: CreditCardFormData) => {
-    console.log('Form submitted:', data)
-    toast.success(
-      <div className="space-y-2">
-        <p className="font-semibold">Payment Information Submitted</p>
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4 text-xs">
-          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-        </pre>
-      </div>,
-    )
-  }
-
-  return (
-    <div className="max-w-md mx-auto p-6 space-y-6">
-      <div className="text-center">
-        <h2 className="text-2xl font-bold">Payment Information</h2>
-        <p className="text-muted-foreground">Enter your credit card details</p>
-      </div>
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-          <FormField
-            control={form.control}
-            name="cardholderName"
-            render={({ field }) => (
-              <FormItem className="flex flex-col">
-                <FormLabel>Credit Card Information</FormLabel>
-                <FormControl>
-                  <CreditCard
-                    value={creditCard}
-                    onChange={handleCreditCardChange}
-                    onValidationChange={handleValidationChange}
-                    cvvLabel="CVC"
-                    cardStyle="shiny-silver"
-                    showVendor={true}
-                    className="w-full"
-                  />
-                </FormControl>
-                <FormDescription>
-                  All fields are required. Your information is secure and
-                  encrypted.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          {/* Hidden fields to capture validation errors */}
-          <div className="hidden">
-            <FormField
-              control={form.control}
-              name="cardNumber"
-              render={() => <FormMessage />}
-            />
-            <FormField
-              control={form.control}
-              name="expiryMonth"
-              render={() => <FormMessage />}
-            />
-            <FormField
-              control={form.control}
-              name="expiryYear"
-              render={() => <FormMessage />}
-            />
-            <FormField
-              control={form.control}
-              name="cvv"
-              render={() => <FormMessage />}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={!form.formState.isValid || !isCardValid}
-            >
-              {form.formState.isSubmitting
-                ? 'Processing...'
-                : 'Process Payment'}
-            </Button>
-          </div>
-        </form>
-      </Form>
-    </div>
-  )
-}
diff --git a/components/components/credit-card.tsx b/components/components/credit-card.tsx
index 4551cbf..7381d4a 100644
--- a/components/components/credit-card.tsx
+++ b/components/components/credit-card.tsx
@@ -31,9 +31,7 @@ export default function CreditCardPreview() {
 
   return (
     <ComponentDocShell
-      title="Credit Card"
-      slug="credit-card"
-      description="Interactive credit-card form with visual card preview and validations."
+      name="credit-card"
       preview={<CreditCard value={creditCard} onChange={setCreditCard} />}
       previewCode={previewCode}
       usageCode={usageCode}
@@ -42,7 +40,6 @@ export default function CreditCardPreview() {
         'Animated card preview with front/back transitions.',
         'Validation hooks for expiry and CVV.',
       ]}
-      dependencies={['framer-motion']}
     />
   )
 }
diff --git a/components/components/cron-expression-builder.tsx b/components/components/cron-expression-builder.tsx
index b47580d..e2f8e4f 100644
--- a/components/components/cron-expression-builder.tsx
+++ b/components/components/cron-expression-builder.tsx
@@ -15,9 +15,7 @@ export default function CronExpressionBuilderPreview() {
 
   return (
     <ComponentDocShell
-      title="Cron Expression Builder"
-      slug="cron-expression-builder"
-      description="Visual cron schedule builder with human-readable summary."
+      name="cron-expression-builder"
       preview={<CronExpressionBuilder onChange={(v) => setSummary(v.human)} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/datetime-picker.tsx b/components/components/datetime-picker.tsx
new file mode 100644
index 0000000..a4eb138
--- /dev/null
+++ b/components/components/datetime-picker.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import * as React from 'react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import { DatetimePicker } from '@/components/ui/datetime-picker'
+
+const format = `[
+  ['months', 'days', 'years'],
+  ['hours', 'minutes', 'am/pm'],
+]`
+
+const previewCode = `<DatetimePicker value={date} onChange={setDate} format={${format}} />`
+
+const usageCode = `import { DatetimePicker } from '@/components/ui/datetime-picker'
+
+const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+<DatetimePicker
+  value={date}
+  onChange={setDate}
+  format={${format}}
+/>`
+
+export default function DatetimePickerPreview() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date())
+
+  return (
+    <ComponentDocShell
+      name="datetime-picker"
+      preview={
+        <DatetimePicker
+          value={date}
+          onChange={setDate}
+          format={[
+            ['months', 'days', 'years'],
+            ['hours', 'minutes', 'am/pm'],
+          ]}
+        />
+      }
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={[
+        'Arrow keys step each segment; typing jumps to the next one.',
+        'Configurable segment order and 12/24-hour clocks.',
+      ]}
+    />
+  )
+}
diff --git a/components/components/emoji-picker.tsx b/components/components/emoji-picker.tsx
index 6c163e5..0eaa0c6 100644
--- a/components/components/emoji-picker.tsx
+++ b/components/components/emoji-picker.tsx
@@ -15,9 +15,7 @@ export default function EmojiPickerPreview() {
 
   return (
     <ComponentDocShell
-      title="Emoji Picker"
-      slug="emoji-picker"
-      description="Categorized emoji selector input built with popover + scroll area."
+      name="emoji-picker"
       preview={<EmojiPicker value={emoji} onChange={setEmoji} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/file-upload.tsx b/components/components/file-upload.tsx
new file mode 100644
index 0000000..6ff0ece
--- /dev/null
+++ b/components/components/file-upload.tsx
@@ -0,0 +1,83 @@
+'use client'
+
+import * as React from 'react'
+import { Paperclip, Upload } from 'lucide-react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import {
+  FileInput,
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from '@/components/ui/file-upload'
+
+const dropzoneOptions = {
+  maxFiles: 5,
+  maxSize: 1024 * 1024 * 4,
+  multiple: true,
+}
+
+const previewCode = `<FileUploader value={files} onValueChange={setFiles} dropzoneOptions={dropzoneOptions}>
+  <FileInput className="outline-dashed outline-1">
+    <p className="p-6 text-sm">Drop files or click to upload</p>
+  </FileInput>
+  <FileUploaderContent>
+    {files?.map((file, i) => (
+      <FileUploaderItem key={i} index={i}>
+        {file.name}
+      </FileUploaderItem>
+    ))}
+  </FileUploaderContent>
+</FileUploader>`
+
+const usageCode = `import {
+  FileInput,
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from '@/components/ui/file-upload'
+
+const [files, setFiles] = React.useState<File[] | null>(null)
+const dropzoneOptions = { maxFiles: 5, maxSize: 1024 * 1024 * 4, multiple: true }
+
+${previewCode}`
+
+export default function FileUploadPreview() {
+  const [files, setFiles] = React.useState<File[] | null>(null)
+
+  return (
+    <ComponentDocShell
+      name="file-upload"
+      preview={
+        <FileUploader
+          value={files}
+          onValueChange={setFiles}
+          dropzoneOptions={dropzoneOptions}
+          className="relative rounded-lg bg-background p-2"
+        >
+          <FileInput className="outline-dashed outline-1 outline-muted-foreground">
+            <div className="flex flex-col items-center gap-2 p-6 text-sm text-muted-foreground">
+              <Upload className="size-5" />
+              Drop files or click to upload (max 5, 4MB each)
+            </div>
+          </FileInput>
+          <FileUploaderContent>
+            {files?.map((file, i) => (
+              <FileUploaderItem key={i} index={i}>
+                <Paperclip className="size-4" />
+                <span>{file.name}</span>
+              </FileUploaderItem>
+            ))}
+          </FileUploaderContent>
+        </FileUploader>
+      }
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={[
+        'Drag and drop or click, powered by react-dropzone.',
+        'File count and size limits with toast feedback (sonner).',
+        'Arrow keys move between files; Delete removes one.',
+      ]}
+    />
+  )
+}
diff --git a/components/components/image-upload-dropzone.tsx b/components/components/image-upload-dropzone.tsx
index eed3912..6a26042 100644
--- a/components/components/image-upload-dropzone.tsx
+++ b/components/components/image-upload-dropzone.tsx
@@ -15,9 +15,7 @@ export default function ImageUploadDropzonePreview() {
 
   return (
     <ComponentDocShell
-      title="Image Upload / Dropzone"
-      slug="image-upload-dropzone"
-      description="Drag-and-drop image upload with preview, center crop, and progress feedback."
+      name="image-upload-dropzone"
       preview={<ImageUploadDropzone value={image} onChange={setImage} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/index.ts b/components/components/index.ts
new file mode 100644
index 0000000..762db76
--- /dev/null
+++ b/components/components/index.ts
@@ -0,0 +1,40 @@
+import dynamic from 'next/dynamic'
+import type { ComponentType } from 'react'
+
+import { listRegistryItems } from '@/lib/registry-catalog'
+
+/**
+ * Docs page for each registry item that has one, keyed by registry item name.
+ * Title, description and install command live in registry.json, not here.
+ */
+export const componentDocs: Record<string, ComponentType> = {
+  autocomplete: dynamic(() => import('./autocomplete')),
+  'availability-picker': dynamic(() => import('./availability-picker')),
+  'color-picker': dynamic(() => import('./color-picker')),
+  'credit-card': dynamic(() => import('./credit-card')),
+  'cron-expression-builder': dynamic(() => import('./cron-expression-builder')),
+  'datetime-picker': dynamic(() => import('./datetime-picker')),
+  'emoji-picker': dynamic(() => import('./emoji-picker')),
+  'file-upload': dynamic(() => import('./file-upload')),
+  'image-upload-dropzone': dynamic(() => import('./image-upload-dropzone')),
+  'inline-editable-field': dynamic(() => import('./inline-editable-field')),
+  'location-input': dynamic(() => import('./location-input')),
+  'masked-input': dynamic(() => import('./masked-input')),
+  'multi-select': dynamic(() => import('./multi-select')),
+  'password-input': dynamic(() => import('./password-input')),
+  'phone-input': dynamic(() => import('./phone-input')),
+  rating: dynamic(() => import('./rating')),
+  'signature-input': dynamic(() => import('./signature-input')),
+  'signature-pad': dynamic(() => import('./signature-pad')),
+  'smart-datetime-input': dynamic(() => import('./smart-datetime-input')),
+  'sortable-list-input': dynamic(() => import('./sortable-list-input')),
+  'tags-input': dynamic(() => import('./tags-input')),
+  'token-input': dynamic(() => import('./token-input')),
+  'transfer-list': dynamic(() => import('./transfer-list')),
+  'tree-select': dynamic(() => import('./tree-select')),
+}
+
+/** Registry items with a docs page, in catalog order. */
+export function documentedComponents() {
+  return listRegistryItems('registry:ui').filter((item) => item.name in componentDocs)
+}
diff --git a/components/components/inline-editable-field.tsx b/components/components/inline-editable-field.tsx
index d920cc5..1870fdb 100644
--- a/components/components/inline-editable-field.tsx
+++ b/components/components/inline-editable-field.tsx
@@ -15,9 +15,7 @@ export default function InlineEditableFieldPreview() {
 
   return (
     <ComponentDocShell
-      title="Inline Editable Field"
-      slug="inline-editable-field"
-      description="Click-to-edit text that toggles between view and input modes."
+      name="inline-editable-field"
       preview={<InlineEditableField value={value} onChange={setValue} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/location-form.tsx b/components/components/location-form.tsx
deleted file mode 100644
index a307671..0000000
--- a/components/components/location-form.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui/button'
-import {
-  Form,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import LocationSelector from '@/components/ui/location-input'
-
-const FormSchema = z.object({
-  location: z.tuple([
-    z.string().min(1, { message: 'Country is required' }),
-    z.string().optional(), // State name, optional
-  ]),
-})
-
-export function LocationForm() {
-  const [countryName, setCountryName] = useState<string>('')
-  const [stateName, setStateName] = useState<string>('')
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  function onSubmit(data: z.infer<typeof FormSchema>) {
-    toast(
-      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-        <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-      </pre>,
-    )
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
-        <FormField
-          control={form.control}
-          name="location"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <div>
-                <FormLabel>Country Selector</FormLabel>
-              </div>
-              <LocationSelector
-                onCountryChange={(country) => {
-                  setCountryName(country?.name || '')
-                  form.setValue(field.name, [
-                    country?.name || '',
-                    stateName || '',
-                  ])
-                }}
-                onStateChange={(state) => {
-                  setStateName(state?.name || '')
-                  form.setValue(field.name, [
-                    countryName || '',
-                    state?.name || '',
-                  ])
-                }}
-              />
-              <FormDescription>
-                Please select state after selecting your country
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/components/components/location-input.tsx b/components/components/location-input.tsx
index 1e23a5d..00b141c 100644
--- a/components/components/location-input.tsx
+++ b/components/components/location-input.tsx
@@ -18,9 +18,7 @@ const usageCode = `import LocationSelector from '@/components/ui/location-input'
 export default function LocationInputPreview() {
   return (
     <ComponentDocShell
-      title="Location Input"
-      slug="location-input"
-      description="Country and state picker based on your local countries/states JSON data."
+      name="location-input"
       preview={<LocationSelector />}
       previewCode={previewCode}
       usageCode={usageCode}
@@ -29,12 +27,6 @@ export default function LocationInputPreview() {
         'State list automatically filtered by selected country.',
         'Controlled callbacks for form integrations.',
       ]}
-      notes={
-        <p>
-          Add <code>countries.json</code> and <code>states.json</code> in your{' '}
-          <code>/data</code> directory before using this component.
-        </p>
-      }
     />
   )
 }
diff --git a/components/components/masked-input.tsx b/components/components/masked-input.tsx
index 4496f0b..cfd7d4b 100644
--- a/components/components/masked-input.tsx
+++ b/components/components/masked-input.tsx
@@ -15,9 +15,7 @@ export default function MaskedInputPreview() {
 
   return (
     <ComponentDocShell
-      title="Masked Input"
-      slug="masked-input"
-      description="Generic masked input for SSN, tax ID, IBAN, or custom patterns."
+      name="masked-input"
       preview={<MaskedInput mask="999-99-9999" value={value} onValueChange={setValue} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/multi-select.tsx b/components/components/multi-select.tsx
new file mode 100644
index 0000000..ef667dc
--- /dev/null
+++ b/components/components/multi-select.tsx
@@ -0,0 +1,73 @@
+'use client'
+
+import * as React from 'react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from '@/components/ui/multi-select'
+
+const options = ['React', 'Vue', 'Svelte', 'Solid', 'Angular']
+
+const previewCode = `<MultiSelector values={values} onValuesChange={setValues}>
+  <MultiSelectorTrigger>
+    <MultiSelectorInput placeholder="Select frameworks" />
+  </MultiSelectorTrigger>
+  <MultiSelectorContent>
+    <MultiSelectorList>
+      <MultiSelectorItem value="React">React</MultiSelectorItem>
+      <MultiSelectorItem value="Vue">Vue</MultiSelectorItem>
+    </MultiSelectorList>
+  </MultiSelectorContent>
+</MultiSelector>`
+
+const usageCode = `import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from '@/components/ui/multi-select'
+
+const [values, setValues] = React.useState<string[]>([])
+
+${previewCode}`
+
+export default function MultiSelectPreview() {
+  const [values, setValues] = React.useState<string[]>(['React'])
+
+  return (
+    <ComponentDocShell
+      name="multi-select"
+      preview={
+        <MultiSelector values={values} onValuesChange={setValues}>
+          <MultiSelectorTrigger>
+            <MultiSelectorInput placeholder="Select frameworks" />
+          </MultiSelectorTrigger>
+          <MultiSelectorContent>
+            <MultiSelectorList>
+              {options.map((option) => (
+                <MultiSelectorItem key={option} value={option}>
+                  {option}
+                </MultiSelectorItem>
+              ))}
+            </MultiSelectorList>
+          </MultiSelectorContent>
+        </MultiSelector>
+      }
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={[
+        'Type to filter; Enter toggles the highlighted option.',
+        'Selected values render as removable badges.',
+        'Backspace removes the last value.',
+      ]}
+    />
+  )
+}
diff --git a/components/components/password-input.tsx b/components/components/password-input.tsx
new file mode 100644
index 0000000..2083234
--- /dev/null
+++ b/components/components/password-input.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import * as React from 'react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import { PasswordInput } from '@/components/ui/password-input'
+
+const previewCode = `<PasswordInput value={password} onChange={(e) => setPassword(e.target.value)} />`
+
+const usageCode = `import { PasswordInput } from '@/components/ui/password-input'
+
+const [password, setPassword] = React.useState('')
+
+${previewCode}`
+
+export default function PasswordInputPreview() {
+  const [password, setPassword] = React.useState('')
+
+  return (
+    <ComponentDocShell
+      name="password-input"
+      preview={
+        <PasswordInput
+          placeholder="Password"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+        />
+      }
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={[
+        'Show/hide toggle, disabled while the field is empty.',
+        'Hides the browser’s built-in reveal button.',
+        'Accepts every native input prop.',
+      ]}
+    />
+  )
+}
diff --git a/components/components/phone-input.tsx b/components/components/phone-input.tsx
new file mode 100644
index 0000000..91a1966
--- /dev/null
+++ b/components/components/phone-input.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import * as React from 'react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import { PhoneInput } from '@/components/ui/phone-input'
+
+const previewCode = `<PhoneInput defaultCountry="US" value={phone} onChange={setPhone} />`
+
+const usageCode = `import { PhoneInput } from '@/components/ui/phone-input'
+
+const [phone, setPhone] = React.useState('')
+
+<PhoneInput defaultCountry="US" value={phone} onChange={setPhone} />`
+
+export default function PhoneInputPreview() {
+  const [phone, setPhone] = React.useState<string>('')
+
+  return (
+    <ComponentDocShell
+      name="phone-input"
+      preview={
+        <div className="space-y-2">
+          <PhoneInput defaultCountry="US" value={phone} onChange={(v) => setPhone(v ?? '')} />
+          <p className="text-xs text-muted-foreground">Value: {phone || '—'}</p>
+        </div>
+      }
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={[
+        'Returns E.164 formatted numbers (e.g. +14155552671).',
+        'Searchable country list with flags.',
+        'Formats as you type for the selected country.',
+      ]}
+    />
+  )
+}
diff --git a/components/components/rating.tsx b/components/components/rating.tsx
new file mode 100644
index 0000000..c0ca294
--- /dev/null
+++ b/components/components/rating.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import * as React from 'react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import { Rating } from '@/components/ui/rating'
+
+const previewCode = `<Rating value={rating} onChange={setRating} />
+<Rating value={rating} onChange={setRating} icon="heart" size="lg" />`
+
+const usageCode = `import { Rating } from '@/components/ui/rating'
+
+const [rating, setRating] = React.useState(3)
+
+<Rating value={rating} onChange={setRating} max={5} icon="star" size="md" />`
+
+export default function RatingPreview() {
+  const [rating, setRating] = React.useState(3)
+
+  return (
+    <ComponentDocShell
+      name="rating"
+      preview={
+        <div className="space-y-3">
+          <Rating value={rating} onChange={setRating} />
+          <Rating value={rating} onChange={setRating} icon="heart" size="lg" />
+        </div>
+      }
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={['Star, heart and thumbs-up icons.', 'sm, md and lg sizes.', 'Read-only mode for display.']}
+    />
+  )
+}
diff --git a/components/components/signature-form.tsx b/components/components/signature-form.tsx
deleted file mode 100644
index 0e599f9..0000000
--- a/components/components/signature-form.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-'use client'
-
-import { useRef } from 'react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui/button'
-import {
-  Form,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import SignatureInput from '@/components/ui/signature-input'
-
-const FormSchema = z.object({
-  signature: z.string().min(1, { message: 'Please sign the form' }),
-})
-
-type SignatureFormData = z.infer<typeof FormSchema>
-
-export function SignatureForm() {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const form = useForm<SignatureFormData>({
-    resolver: zodResolver(FormSchema),
-  })
-
-  const onSubmit = (data: SignatureFormData) => {
-    // console.log('Signature Data URL:', data.signature)
-    toast(
-      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-        <code className="text-white">{JSON.stringify(data, null, 2)}</code>
-      </pre>,
-    )
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField
-          control={form.control}
-          name="signature"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <div>
-                <FormLabel>Sign here</FormLabel>
-              </div>
-              <SignatureInput
-                canvasRef={canvasRef}
-                onSignatureChange={field.onChange}
-              />
-              <FormDescription>
-                Please provide your signature above
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/components/components/signature-input.tsx b/components/components/signature-input.tsx
index 39c9ed9..2a718d4 100644
--- a/components/components/signature-input.tsx
+++ b/components/components/signature-input.tsx
@@ -25,9 +25,7 @@ export default function SignatureInputPreview() {
 
   return (
     <ComponentDocShell
-      title="Signature Input"
-      slug="signature-input"
-      description="Canvas-based signature input that returns a PNG data URL."
+      name="signature-input"
       preview={
         <SignatureInput
           canvasRef={canvasRef}
diff --git a/components/components/signature-pad-form.tsx b/components/components/signature-pad-form.tsx
deleted file mode 100644
index 3cf9f3f..0000000
--- a/components/components/signature-pad-form.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui/button'
-import {
-  Form,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import SignaturePad from '@/components/ui/signature-pad'
-
-const FormSchema = z.object({
-  signature: z
-    .string()
-    .min(1, { message: 'Please sign the form' })
-    .nullable()
-    .refine((val) => val !== null && val.length > 0, {
-      message: 'Please sign the form',
-    }),
-})
-
-type SignaturePadFormData = z.infer<typeof FormSchema>
-
-export function SignaturePadForm() {
-  const form = useForm<SignaturePadFormData>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      signature: null,
-    },
-  })
-
-  const onSubmit = (data: SignaturePadFormData) => {
-    // The signature is a base64 data URL that can be:
-    // 1. Stored directly in a database as a string
-    // 2. Converted to a Blob/File for upload to cloud storage
-    // 3. Sent to an API endpoint
-    
-    // Example: Convert to Blob for file upload
-    // const blob = await fetch(data.signature!).then(r => r.blob())
-    // const file = new File([blob], 'signature.png', { type: 'image/png' })
-    
-    toast(
-      <div className="space-y-2">
-        <p className="font-medium">Signature captured!</p>
-        <p className="text-sm text-muted-foreground">
-          Data URL length: {data.signature?.length} characters
-        </p>
-        {data.signature && (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={data.signature}
-            alt="Captured signature"
-            className="w-40 h-20 border rounded bg-white object-contain"
-          />
-        )}
-      </div>,
-    )
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-        <FormField
-          control={form.control}
-          name="signature"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>Your Signature</FormLabel>
-              <SignaturePad
-                value={field.value}
-                onChange={field.onChange}
-                disabled={form.formState.isSubmitting}
-              />
-              <FormDescription>
-                Click the pen button to open the signature pad. Draw your
-                signature, then hold the confirm button to save.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit" disabled={form.formState.isSubmitting}>
-          Submit
-        </Button>
-      </form>
-    </Form>
-  )
-}
diff --git a/components/components/signature-pad.tsx b/components/components/signature-pad.tsx
index 365dd79..31fdebd 100644
--- a/components/components/signature-pad.tsx
+++ b/components/components/signature-pad.tsx
@@ -19,9 +19,7 @@ export default function SignaturePadPreview() {
 
   return (
     <ComponentDocShell
-      title="Signature Pad"
-      slug="signature-pad"
-      description="Dialog-based signature capture with hold-to-confirm interaction."
+      name="signature-pad"
       preview={<SignaturePad value={signature} onChange={setSignature} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/smart-datetime-input.tsx b/components/components/smart-datetime-input.tsx
new file mode 100644
index 0000000..978b61a
--- /dev/null
+++ b/components/components/smart-datetime-input.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import * as React from 'react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import { SmartDatetimeInput } from '@/components/ui/smart-datetime-input'
+
+const previewCode = `<SmartDatetimeInput
+  value={date}
+  onValueChange={setDate}
+  placeholder="e.g. tomorrow at 3pm"
+/>`
+
+const usageCode = `import { SmartDatetimeInput } from '@/components/ui/smart-datetime-input'
+
+const [date, setDate] = React.useState<Date | null>(null)
+
+${previewCode}`
+
+export default function SmartDatetimeInputPreview() {
+  const [date, setDate] = React.useState<Date | null>(null)
+
+  return (
+    <ComponentDocShell
+      name="smart-datetime-input"
+      preview={
+        <div className="space-y-2">
+          <SmartDatetimeInput
+            value={date}
+            onValueChange={setDate}
+            placeholder="e.g. tomorrow at 3pm"
+          />
+          <p className="text-xs text-muted-foreground">
+            Value: {date ? date.toString() : '—'}
+          </p>
+        </div>
+      }
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={[
+        'Parses natural language with chrono-node.',
+        'Calendar and time list for pointer users.',
+        'Locale and 12/24-hour aware.',
+      ]}
+    />
+  )
+}
diff --git a/components/components/sortable-list-input.tsx b/components/components/sortable-list-input.tsx
index 3c08849..b9e5d3d 100644
--- a/components/components/sortable-list-input.tsx
+++ b/components/components/sortable-list-input.tsx
@@ -15,9 +15,7 @@ export default function SortableListInputPreview() {
 
   return (
     <ComponentDocShell
-      title="Sortable List Input"
-      slug="sortable-list-input"
-      description="Drag-and-drop reorderable list stored as a form value."
+      name="sortable-list-input"
       preview={<SortableListInput value={items} onChange={setItems} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/tags-input.tsx b/components/components/tags-input.tsx
new file mode 100644
index 0000000..112f69f
--- /dev/null
+++ b/components/components/tags-input.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import * as React from 'react'
+
+import { ComponentDocShell } from '@/components/components/component-doc-shell'
+import { TagsInput } from '@/components/ui/tags-input'
+
+const previewCode = `<TagsInput value={tags} onValueChange={setTags} placeholder="Add a tag" />`
+
+const usageCode = `import { TagsInput } from '@/components/ui/tags-input'
+
+const [tags, setTags] = React.useState<string[]>([])
+
+${previewCode}`
+
+export default function TagsInputPreview() {
+  const [tags, setTags] = React.useState<string[]>(['react', 'shadcn'])
+
+  return (
+    <ComponentDocShell
+      name="tags-input"
+      preview={<TagsInput value={tags} onValueChange={setTags} placeholder="Add a tag" />}
+      previewCode={previewCode}
+      usageCode={usageCode}
+      features={[
+        'Enter or comma adds a tag; Backspace removes the last one.',
+        'Arrow keys move between tags.',
+        'Optional minItems and maxItems.',
+      ]}
+    />
+  )
+}
diff --git a/components/components/token-input.tsx b/components/components/token-input.tsx
index 1eb08dc..2260536 100644
--- a/components/components/token-input.tsx
+++ b/components/components/token-input.tsx
@@ -15,9 +15,7 @@ export default function TokenInputPreview() {
 
   return (
     <ComponentDocShell
-      title="Tag / Token Input"
-      slug="token-input"
-      description="Input that turns text into removable tags/chips."
+      name="token-input"
       preview={<TokenInput value={tokens} onChange={setTokens} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/transfer-list.tsx b/components/components/transfer-list.tsx
index 82e0d4b..94d3d80 100644
--- a/components/components/transfer-list.tsx
+++ b/components/components/transfer-list.tsx
@@ -25,9 +25,7 @@ export default function TransferListPreview() {
 
   return (
     <ComponentDocShell
-      title="Transfer List"
-      slug="transfer-list"
-      description="Dual-list picker to move items between available and selected panels."
+      name="transfer-list"
       preview={<TransferList available={state.available} selected={state.selected} onChange={setState} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/components/tree-select.tsx b/components/components/tree-select.tsx
index d624817..f597bb7 100644
--- a/components/components/tree-select.tsx
+++ b/components/components/tree-select.tsx
@@ -34,9 +34,7 @@ export default function TreeSelectPreview() {
 
   return (
     <ComponentDocShell
-      title="Tree Select"
-      slug="tree-select"
-      description="Hierarchical dropdown with expandable nodes and checkbox selection."
+      name="tree-select"
       preview={<TreeSelect options={options} value={value} onChange={setValue} />}
       previewCode={previewCode}
       usageCode={usageCode}
diff --git a/components/editor/block-content.tsx b/components/editor/block-content.tsx
deleted file mode 100644
index a956948..0000000
--- a/components/editor/block-content.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import { Input } from '@/components/ui/input'
-import { EditorBlock, EditorColumn } from '@/types'
-import { ColumnManager } from './column-manager'
-
-interface BlockContentProps {
-  block: EditorBlock
-  onChange: (content: string) => void
-  onKeyDown?: (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    columnId?: string,
-  ) => void
-  onColumnChange?: (columns: EditorColumn[]) => void
-}
-
-export function BlockContent({
-  block,
-  onChange,
-  onKeyDown,
-  onColumnChange,
-}: BlockContentProps) {
-  if (block.type === 'columns' && block.columns) {
-    return (
-      <ColumnManager
-        blockId={block.id}
-        columns={block.columns}
-        onColumnChange={onColumnChange}
-        onKeyDown={onKeyDown}
-      />
-    )
-  }
-
-  return (
-    <Input
-      value={block.content}
-      onChange={(e) => onChange(e.target.value)}
-      onKeyDown={onKeyDown}
-      placeholder="Type '/' for commands..."
-      className="border-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent"
-    />
-  )
-}
diff --git a/components/editor/column-manager.tsx b/components/editor/column-manager.tsx
deleted file mode 100644
index 88531dc..0000000
--- a/components/editor/column-manager.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-'use client'
-
-import { Input } from '@/components/ui/input'
-import { Plus, Minus } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import * as React from 'react'
-import { EditorColumn } from '@/types'
-
-interface ColumnManagerProps {
-  blockId: string
-  columns: EditorColumn[]
-  onColumnChange?: (columns: EditorColumn[]) => void
-  onKeyDown?: (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    columnId: string,
-  ) => void
-}
-
-export function ColumnManager({
-  blockId,
-  columns,
-  onColumnChange,
-  onKeyDown,
-}: ColumnManagerProps) {
-  const totalWidth = React.useMemo(
-    () => columns.reduce((acc, col) => acc + col.width, 0),
-    [columns],
-  )
-
-  const handleColumnChange = (newColumns: EditorColumn[]) => {
-    if (onColumnChange) {
-      onColumnChange(newColumns)
-    }
-  }
-
-  const addColumn = () => {
-    if (totalWidth >= 12) return
-    const newColumn: EditorColumn = {
-      id: Math.random().toString(36).substr(2, 9),
-      content: '',
-      width: Math.min(12 - totalWidth, 6),
-    }
-    handleColumnChange([...columns, newColumn])
-  }
-
-  const removeColumn = (id: string) => {
-    if (columns.length <= 1) return
-    handleColumnChange(columns.filter((col) => col.id !== id))
-  }
-
-  const adjustWidth = (id: string, increment: boolean) => {
-    const newColumns = columns.map((col) => {
-      if (col.id === id) {
-        const newWidth = increment ? col.width + 1 : col.width - 1
-        if (newWidth < 1 || newWidth > 12) return col
-
-        const potentialTotalWidth = columns.reduce(
-          (acc, c) => (c.id === id ? acc + newWidth : acc + c.width),
-          0,
-        )
-
-        if (potentialTotalWidth > 12) return col
-
-        return { ...col, width: newWidth }
-      }
-      return col
-    })
-
-    handleColumnChange(newColumns)
-  }
-
-  const updateColumnContent = (id: string, content: string) => {
-    const newColumns = columns.map((col) =>
-      col.id === id ? { ...col, content } : col,
-    )
-    handleColumnChange(newColumns)
-  }
-
-  return (
-    <div className="w-full space-y-2">
-      <div className="grid grid-cols-12 gap-2">
-        {columns.map((column) => (
-          <div
-            key={column.id}
-            className="relative group"
-            style={{
-              gridColumn: `span ${column.width} / span ${column.width}`,
-            }}
-          >
-            <div className="absolute -top-2 right-0 opacity-0 group-hover:opacity-100 transition-opacity z-10">
-              <div className="flex items-center gap-1 bg-white shadow-sm rounded-md p-1">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  onClick={() => adjustWidth(column.id, false)}
-                  disabled={column.width <= 1}
-                >
-                  <Minus className="h-3 w-3" />
-                </Button>
-                <span className="text-xs text-gray-500">{column.width}</span>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6"
-                  onClick={() => adjustWidth(column.id, true)}
-                  disabled={totalWidth >= 12}
-                >
-                  <Plus className="h-3 w-3" />
-                </Button>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="icon"
-                  className="h-6 w-6 text-red-500"
-                  onClick={() => removeColumn(column.id)}
-                  disabled={columns.length <= 1}
-                >
-                  <Minus className="h-3 w-3" />
-                </Button>
-              </div>
-            </div>
-
-            <Input
-              value={column.content}
-              onChange={(e) => updateColumnContent(column.id, e.target.value)}
-              onKeyDown={(e) => onKeyDown && onKeyDown(e, column.id)}
-              placeholder="Type '/' for commands..."
-              className="border-none focus-visible:ring-0 focus-visible:ring-offset-0"
-            />
-          </div>
-        ))}
-      </div>
-
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={addColumn}
-              disabled={totalWidth >= 12}
-              className="w-full"
-            >
-              <Plus className="h-4 w-4 mr-1" />
-              Add Column ({12 - totalWidth} width remaining)
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent>
-            <p>Maximum 12 columns width total</p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  )
-}
diff --git a/components/editor/editor.tsx b/components/editor/editor.tsx
deleted file mode 100644
index 281f57e..0000000
--- a/components/editor/editor.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem as CommandListItem,
-  CommandList,
-} from '@/components/ui/command'
-import { GripVertical, MoreVertical } from 'lucide-react'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Reorder, useDragControls } from 'framer-motion'
-import { BlockContent } from './block-content'
-import { EditorBlock, EditorColumn } from '@/types'
-import {
-  labelCommands,
-  layoutCommands,
-  componentCommands,
-} from '@/constants/menu'
-
-const iconSize = 'h-4 w-4'
-
-export default function Editor() {
-  const [blocks, setBlocks] = React.useState<EditorBlock[]>([
-    { id: '1', type: 'text', content: '' },
-  ])
-  const [showCommand, setShowCommand] = React.useState(false)
-  const [activeBlockId, setActiveBlockId] = React.useState<string>('1')
-  const dragControls = useDragControls()
-
-  const handleKeyDown = (
-    e: React.KeyboardEvent<HTMLInputElement>,
-    blockId: string,
-    columnId?: string,
-  ) => {
-    if (e.key === '/' && !showCommand) {
-      e.preventDefault()
-      setShowCommand(true)
-      setActiveBlockId(blockId)
-    } else if (e.key === 'Enter') {
-      e.preventDefault()
-      const newBlock: EditorBlock = {
-        id: Math.random().toString(36).substr(2, 9),
-        type: 'text',
-        content: '',
-      }
-
-      setBlocks((prev) => {
-        const currentIndex = prev.findIndex((block) => block.id === blockId)
-        const newBlocks = [...prev]
-        newBlocks.splice(currentIndex + 1, 0, newBlock)
-        return newBlocks
-      })
-    }
-  }
-
-  const handleCommandSelect = (value: string) => {
-    const newBlock: EditorBlock = {
-      id: Math.random().toString(36).substr(2, 9),
-      type: value as EditorBlock['type'],
-      content: '',
-      ...(value === 'columns'
-        ? {
-            columns: [
-              {
-                id: Math.random().toString(36).substr(2, 9),
-                content: '',
-                width: 6,
-              },
-              {
-                id: Math.random().toString(36).substr(2, 9),
-                content: '',
-                width: 6,
-              },
-            ],
-          }
-        : {}),
-    }
-
-    setBlocks((prev) => {
-      const activeBlockIndex = prev.findIndex(
-        (block) => block.id === activeBlockId,
-      )
-      const newBlocks = [...prev]
-      newBlocks.splice(activeBlockIndex + 1, 0, newBlock)
-      return newBlocks
-    })
-
-    setShowCommand(false)
-  }
-
-  const handleContentChange = (id: string, content: string) => {
-    setBlocks((prev) =>
-      prev.map((block) => (block.id === id ? { ...block, content } : block)),
-    )
-  }
-
-  const handleColumnChange = (blockId: string, columns: EditorColumn[]) => {
-    setBlocks((prev) =>
-      prev.map((block) =>
-        block.id === blockId ? { ...block, columns } : block,
-      ),
-    )
-  }
-
-  const duplicateBlock = (id: string) => {
-    const blockToDuplicate = blocks.find((block) => block.id === id)
-    if (!blockToDuplicate) return
-
-    const newBlock: EditorBlock = {
-      ...blockToDuplicate,
-      id: Math.random().toString(36).substr(2, 9),
-      ...(blockToDuplicate.columns
-        ? {
-            columns: blockToDuplicate.columns.map((col) => ({
-              ...col,
-              id: Math.random().toString(36).substr(2, 9),
-            })),
-          }
-        : {}),
-    }
-
-    setBlocks((prev) => {
-      const index = prev.findIndex((block) => block.id === id)
-      const newBlocks = [...prev]
-      newBlocks.splice(index + 1, 0, newBlock)
-      return newBlocks
-    })
-  }
-
-  const removeBlock = (id: string) => {
-    setBlocks((prev) => {
-      if (prev.length <= 1) return prev
-      return prev.filter((block) => block.id !== id)
-    })
-  }
-
-  return (
-    <div className="w-full max-w-2xl mx-auto p-4">
-      <Reorder.Group
-        axis="y"
-        values={blocks}
-        onReorder={setBlocks}
-        className="space-y-2"
-      >
-        {blocks.map((block) => (
-          <Reorder.Item
-            key={block.id}
-            value={block}
-            dragListener={false} // Disable default drag listener
-            dragControls={dragControls} // Use custom drag controls
-            className="flex items-center gap-2 group relative"
-          >
-            <div
-              className="opacity-0 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing"
-              style={{ cursor: 'grab' }}
-              onPointerDown={(e) => dragControls.start(e)} // Start dragging from the icon
-            >
-              <GripVertical className="h-4 w-4 text-gray-600 hover:text-gray-800" />
-            </div>
-            <div className="flex-1">
-              <BlockContent
-                block={block}
-                onChange={(content) => handleContentChange(block.id, content)}
-                onKeyDown={(e, columnId) =>
-                  handleKeyDown(e, block.id, columnId)
-                }
-                onColumnChange={(newColumns) =>
-                  handleColumnChange(block.id, newColumns)
-                }
-              />
-            </div>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  type="button"
-                  className="opacity-0 group-hover:opacity-100 transition-opacity p-1 hover:bg-gray-100 rounded"
-                >
-                  <MoreVertical className="h-4 w-4 text-gray-400 hover:text-gray-600" />
-                </button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                <DropdownMenuItem
-                  onClick={() => duplicateBlock(block.id)}
-                  className="flex items-center gap-2"
-                >
-                  <span>Duplicate</span>
-                  <span className="text-xs text-gray-400">⌘D</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={() => removeBlock(block.id)}
-                  className="flex items-center gap-2 text-red-600"
-                >
-                  <span>Remove</span>
-                  <span className="text-xs text-gray-400">⌫</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </Reorder.Item>
-        ))}
-      </Reorder.Group>
-
-      <CommandDialog open={showCommand} onOpenChange={setShowCommand}>
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Labels">
-            {labelCommands.map((command) => (
-              <CommandListItem
-                key={command.value}
-                onSelect={() => handleCommandSelect(command.value)}
-              >
-                <span className={`mr-2 ${iconSize}`}>{command.icon}</span>
-                {command.title}
-              </CommandListItem>
-            ))}
-          </CommandGroup>
-          <CommandGroup heading="Layout">
-            {layoutCommands.map((command) => (
-              <CommandListItem
-                key={command.value}
-                onSelect={() => handleCommandSelect(command.value)}
-              >
-                <span className={`mr-2 ${iconSize}`}>{command.icon}</span>
-                {command.title}
-              </CommandListItem>
-            ))}
-          </CommandGroup>
-          <CommandGroup heading="Components">
-            {componentCommands.map((component) => (
-              <CommandListItem
-                key={component.title}
-                onSelect={() => handleCommandSelect(component.value)}
-                className={component.isNew ? 'font-bold' : ''}
-              >
-                <span className={`mr-2 ${iconSize}`}>{component.icon}</span>
-                {component.title}
-                {component.isNew && (
-                  <span className="ml-2 text-xs text-blue-500">New</span>
-                )}
-              </CommandListItem>
-            ))}
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </div>
-  )
-}
diff --git a/components/features-vertical.tsx b/components/features-vertical.tsx
index 3cbed3f..bb4b278 100644
--- a/components/features-vertical.tsx
+++ b/components/features-vertical.tsx
@@ -1,83 +1,12 @@
 'use client'
 
-import * as Accordion from '@radix-ui/react-accordion'
 import { motion, useInView } from 'framer-motion'
-import React, {
-  forwardRef,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import { cn } from '@/lib/utils'
 import Safari from './safari'
 import { Card, CardContent } from './ui/card'
 
-type AccordionItemProps = {
-  children: React.ReactNode
-  className?: string
-} & Accordion.AccordionItemProps
-
-const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ children, className, ...props }, forwardedRef) => (
-    <Accordion.Item
-      className={cn(
-        'mt-px overflow-hidden focus-within:relative focus-within:z-10',
-        className,
-      )}
-      {...props}
-      ref={forwardedRef}
-    >
-      {children}
-    </Accordion.Item>
-  ),
-)
-AccordionItem.displayName = 'AccordionItem'
-
-type AccordionTriggerProps = {
-  children: React.ReactNode
-  className?: string
-}
-
-const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
-  ({ children, className, ...props }, forwardedRef) => (
-    <Accordion.Header className="flex">
-      <Accordion.Trigger
-        className={cn(
-          'group flex flex-1 cursor-pointer items-center justify-between px-5 text-[15px] leading-none outline-none',
-          className,
-        )}
-        {...props}
-        ref={forwardedRef}
-      >
-        {children}
-      </Accordion.Trigger>
-    </Accordion.Header>
-  ),
-)
-AccordionTrigger.displayName = 'AccordionTrigger'
-type AccordionContentProps = {
-  children: ReactNode
-  className?: string
-} & Accordion.AccordionContentProps
-
-const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
-  ({ children, className, ...props }, forwardedRef) => (
-    <Accordion.Content
-      className={cn(
-        'overflow-hidden text-[15px] font-medium data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down',
-        className,
-      )}
-      {...props}
-      ref={forwardedRef}
-    >
-      <div className="px-5 py-2">{children}</div>
-    </Accordion.Content>
-  ),
-)
-AccordionContent.displayName = 'AccordionContent'
-
 export type FeaturesDataProps = {
   id: number
   title: string
diff --git a/components/field-variants/checkbox.tsx b/components/field-variants/checkbox.tsx
new file mode 100644
index 0000000..b6576fe
--- /dev/null
+++ b/components/field-variants/checkbox.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import { code, zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const checkboxVariant: FieldVariant = {
+  name: 'Checkbox',
+  defaults: {
+    label: 'Use different settings for my mobile devices',
+    description: 'You can manage your mobile notifications in the mobile settings page.',
+  },
+  registryItems: ['checkbox'],
+  imports: () => ['import { Checkbox } from "@/components/ui/checkbox"'],
+  schema: (field) =>
+    field.required
+      ? zx.boolean().refine(code((value: boolean) => value, '(value) => value'), {
+          message: 'Required',
+        })
+      : zx.boolean(),
+  defaultValue: () => false,
+  layout: 'control-first',
+  Control: ({ field, id, value, onChange, invalid }) => (
+    <Checkbox
+      id={id}
+      disabled={field.disabled}
+      checked={value === true}
+      onCheckedChange={(checked) => onChange(checked === true)}
+      aria-invalid={invalid}
+    />
+  ),
+  control: (field, b) => `<Checkbox
+  id={${b.id}}${field.disabled ? '\n  disabled' : ''}
+  checked={${b.value}}
+  onCheckedChange={(checked) => ${b.onChange('checked === true')}}
+  aria-invalid={${b.invalid}}
+/>`,
+}
diff --git a/components/field-variants/combobox.tsx b/components/field-variants/combobox.tsx
new file mode 100644
index 0000000..caaa4c0
--- /dev/null
+++ b/components/field-variants/combobox.tsx
@@ -0,0 +1,131 @@
+'use client'
+
+import { Check, ChevronsUpDown } from 'lucide-react'
+
+import { buttonVariants } from '@/components/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { stringSchema } from './helpers'
+import type { FieldVariant } from './types'
+
+const languages = [
+  { label: 'English', value: 'en' },
+  { label: 'French', value: 'fr' },
+  { label: 'German', value: 'de' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'Portuguese', value: 'pt' },
+  { label: 'Russian', value: 'ru' },
+  { label: 'Japanese', value: 'ja' },
+  { label: 'Korean', value: 'ko' },
+  { label: 'Chinese', value: 'zh' },
+] as const
+
+export const comboboxVariant: FieldVariant = {
+  name: 'Combobox',
+  defaults: {
+    label: 'Language',
+    description: 'This is the language that will be used in the dashboard.',
+  },
+  registryItems: ['button', 'command', 'popover'],
+  imports: () => [
+    'import { Check, ChevronsUpDown } from "lucide-react"',
+    'import { cn } from "@/lib/utils"',
+    'import { buttonVariants } from "@/components/ui/button"',
+    'import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"',
+    'import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"',
+  ],
+  declarations: [
+    `const languages = [
+${languages.map((language) => `  { label: "${language.label}", value: "${language.value}" },`).join('\n')}
+] as const`,
+  ],
+  schema: (field) => stringSchema(field, 'Please select a language'),
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, invalid }) => (
+    <Popover>
+      <PopoverTrigger
+        id={id}
+        type="button"
+        role="combobox"
+        disabled={field.disabled}
+        aria-invalid={invalid}
+        className={cn(
+          buttonVariants({ variant: 'outline' }),
+          'w-full justify-between font-normal',
+          !value && 'text-muted-foreground',
+        )}
+      >
+        {languages.find((language) => language.value === value)?.label ?? 'Select language'}
+        <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+      </PopoverTrigger>
+      <PopoverContent className="p-0">
+        <Command>
+          <CommandInput placeholder="Search language..." />
+          <CommandList>
+            <CommandEmpty>No language found.</CommandEmpty>
+            <CommandGroup>
+              {languages.map((language) => (
+                <CommandItem
+                  key={language.value}
+                  value={language.label}
+                  onSelect={() => onChange(language.value)}
+                >
+                  <Check
+                    className={cn('mr-2 size-4', language.value === value ? 'opacity-100' : 'opacity-0')}
+                  />
+                  {language.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  ),
+  control: (field, b) => `<Popover>
+  <PopoverTrigger
+    id={${b.id}}
+    type="button"
+    role="combobox"${field.disabled ? '\n    disabled' : ''}
+    aria-invalid={${b.invalid}}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "w-full justify-between font-normal",
+      !${b.value} && "text-muted-foreground"
+    )}
+  >
+    {languages.find((language) => language.value === ${b.value})?.label ?? "Select language"}
+    <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+  </PopoverTrigger>
+  <PopoverContent className="p-0">
+    <Command>
+      <CommandInput placeholder="Search language..." />
+      <CommandList>
+        <CommandEmpty>No language found.</CommandEmpty>
+        <CommandGroup>
+          {languages.map((language) => (
+            <CommandItem
+              key={language.value}
+              value={language.label}
+              onSelect={() => ${b.onChange('language.value')}}
+            >
+              <Check
+                className={cn("mr-2 size-4", language.value === ${b.value} ? "opacity-100" : "opacity-0")}
+              />
+              {language.label}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  </PopoverContent>
+</Popover>`,
+}
diff --git a/components/field-variants/credit-card.tsx b/components/field-variants/credit-card.tsx
new file mode 100644
index 0000000..9b8a706
--- /dev/null
+++ b/components/field-variants/credit-card.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { CreditCard } from '@/components/ui/credit-card'
+import { code, zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+const PARTS = ['cardholderName', 'cardNumber', 'expiryMonth', 'expiryYear', 'cvv'] as const
+
+export const creditCardVariant: FieldVariant = {
+  name: 'Credit Card',
+  defaults: {
+    label: 'Credit Card Information',
+    description: 'Enter your credit card details for payment.',
+  },
+  registryItems: ['credit-card'],
+  imports: () => ['import { CreditCard } from "@/components/ui/credit-card"'],
+  schema: (field) => {
+    const card = zx.object(Object.fromEntries(PARTS.map((part) => [part, zx.string()])))
+    // One message on the field itself, not one per card part.
+    return field.required
+      ? card.refine(
+          code(
+            (value: Record<string, string>) => Object.values(value).every(Boolean),
+            '(card) => Object.values(card).every(Boolean)',
+          ),
+          { message: 'Please fill in all credit card fields' },
+        )
+      : card
+  },
+  defaultValue: () => Object.fromEntries(PARTS.map((part) => [part, ''])),
+  Control: ({ value, onChange }) => <CreditCard value={value} onChange={onChange} />,
+  control: (_field, b) => `<CreditCard
+  value={${b.value}}
+  onChange={(card) => ${b.onChange('card')}}
+/>`,
+}
diff --git a/components/field-variants/date-picker.tsx b/components/field-variants/date-picker.tsx
new file mode 100644
index 0000000..481610a
--- /dev/null
+++ b/components/field-variants/date-picker.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+
+import { buttonVariants } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { optionalUnlessRequired } from './helpers'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const datePickerVariant: FieldVariant = {
+  name: 'Date Picker',
+  defaults: {
+    label: 'Date of birth',
+    description: 'Your date of birth is used to calculate your age.',
+  },
+  registryItems: ['button', 'calendar', 'popover'],
+  imports: () => [
+    'import { format } from "date-fns"',
+    'import { CalendarIcon } from "lucide-react"',
+    'import { cn } from "@/lib/utils"',
+    'import { buttonVariants } from "@/components/ui/button"',
+    'import { Calendar } from "@/components/ui/calendar"',
+    'import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"',
+  ],
+  schema: (field) => optionalUnlessRequired(field, zx.date({ message: 'A date is required' })),
+  defaultValue: () => new Date(),
+  Control: ({ field, id, value, onChange, invalid }) => (
+    <Popover>
+      <PopoverTrigger
+        id={id}
+        type="button"
+        disabled={field.disabled}
+        aria-invalid={invalid}
+        className={cn(
+          buttonVariants({ variant: 'outline' }),
+          'w-full justify-start text-left font-normal',
+          !value && 'text-muted-foreground',
+        )}
+      >
+        <CalendarIcon className="mr-2 size-4" />
+        {value ? format(value, 'PPP') : <span>Pick a date</span>}
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar mode="single" selected={value} onSelect={onChange} />
+      </PopoverContent>
+    </Popover>
+  ),
+  control: (field, b) => `<Popover>
+  <PopoverTrigger
+    id={${b.id}}
+    type="button"${field.disabled ? '\n    disabled' : ''}
+    aria-invalid={${b.invalid}}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "w-full justify-start text-left font-normal",
+      !${b.value} && "text-muted-foreground"
+    )}
+  >
+    <CalendarIcon className="mr-2 size-4" />
+    {${b.value} ? format(${b.value}, "PPP") : <span>Pick a date</span>}
+  </PopoverTrigger>
+  <PopoverContent className="w-auto p-0" align="start">
+    <Calendar
+      mode="single"
+      selected={${b.value}}
+      onSelect={(date) => date && ${b.onChange('date')}}
+    />
+  </PopoverContent>
+</Popover>`,
+}
diff --git a/components/field-variants/datetime-picker.tsx b/components/field-variants/datetime-picker.tsx
new file mode 100644
index 0000000..577b3ea
--- /dev/null
+++ b/components/field-variants/datetime-picker.tsx
@@ -0,0 +1,36 @@
+'use client'
+
+import { DatetimePicker } from '@/components/ui/datetime-picker'
+import { optionalUnlessRequired } from './helpers'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const datetimePickerVariant: FieldVariant = {
+  name: 'Datetime Picker',
+  defaults: {
+    label: 'Submission Date',
+    description: 'Add the date of submission with detailly.',
+  },
+  registryItems: ['datetime-picker'],
+  imports: () => ['import { DatetimePicker } from "@/components/ui/datetime-picker"'],
+  schema: (field) => optionalUnlessRequired(field, zx.date({ message: 'A date is required' })),
+  defaultValue: () => new Date(),
+  Control: ({ value, onChange }) => (
+    <DatetimePicker
+      value={value}
+      onChange={onChange}
+      format={[
+        ['months', 'days', 'years'],
+        ['hours', 'minutes', 'am/pm'],
+      ]}
+    />
+  ),
+  control: (_field, b) => `<DatetimePicker
+  value={${b.value}}
+  onChange={(date) => date && ${b.onChange('date')}}
+  format={[
+    ["months", "days", "years"],
+    ["hours", "minutes", "am/pm"],
+  ]}
+/>`,
+}
diff --git a/components/field-variants/field-shell.tsx b/components/field-variants/field-shell.tsx
new file mode 100644
index 0000000..bf46d77
--- /dev/null
+++ b/components/field-variants/field-shell.tsx
@@ -0,0 +1,117 @@
+'use client'
+
+import type { ReactNode } from 'react'
+
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field'
+import type { FormFieldType } from '@/types'
+import { getFieldVariant } from './index'
+
+/**
+ * How a field's label, control, description and error are arranged. The
+ * preview renders `FieldShell`; the generator prints `fieldShellSource`.
+ * Keep the two in step.
+ */
+
+type ShellProps = {
+  field: FormFieldType
+  id: string
+  invalid: boolean
+  error?: { message?: string }
+  children: ReactNode
+}
+
+export function FieldShell({ field, id, invalid, error, children }: ShellProps) {
+  const layout = getFieldVariant(field.variant).layout ?? 'stacked'
+  const label = (
+    <FieldLabel htmlFor={id}>
+      {field.label}
+      {field.required && <span aria-hidden> *</span>}
+    </FieldLabel>
+  )
+  const description = field.description ? <FieldDescription>{field.description}</FieldDescription> : null
+  const message = invalid ? <FieldError errors={[error]} /> : null
+
+  if (layout === 'stacked') {
+    return (
+      <Field data-invalid={invalid} className={field.className}>
+        {label}
+        {children}
+        {description}
+        {message}
+      </Field>
+    )
+  }
+
+  const content = (
+    <FieldContent>
+      {label}
+      {description}
+      {message}
+    </FieldContent>
+  )
+  return (
+    <Field
+      orientation="horizontal"
+      data-invalid={invalid}
+      className={layout === 'control-last' ? 'rounded-lg border p-4' : field.className}
+    >
+      {layout === 'control-first' ? children : content}
+      {layout === 'control-first' ? content : children}
+    </Field>
+  )
+}
+
+type ShellSource = {
+  /** Expressions the form library provides. */
+  id: string
+  invalid: string
+  /** The `<FieldError />` element, rendered only when invalid. */
+  error: string
+}
+
+const indent = (source: string, spaces: number) =>
+  source
+    .split('\n')
+    .map((line) => (line ? ' '.repeat(spaces) + line : line))
+    .join('\n')
+
+export function fieldShellSource(field: FormFieldType, s: ShellSource, control: string): string {
+  const layout = getFieldVariant(field.variant).layout ?? 'stacked'
+  const label = `<FieldLabel htmlFor={${s.id}}>${escapeText(field.label)}</FieldLabel>`
+  const description = field.description
+    ? `<FieldDescription>${escapeText(field.description)}</FieldDescription>`
+    : ''
+  const message = `{${s.invalid} && ${s.error}}`
+
+  if (layout === 'stacked') {
+    return [
+      `<Field data-invalid={${s.invalid}}>`,
+      indent([label, control, description, message].filter(Boolean).join('\n'), 2),
+      '</Field>',
+    ].join('\n')
+  }
+
+  const content = [
+    '<FieldContent>',
+    indent([label, description, message].filter(Boolean).join('\n'), 2),
+    '</FieldContent>',
+  ].join('\n')
+  const parts = layout === 'control-first' ? [control, content] : [content, control]
+  const className = layout === 'control-last' ? ' className="rounded-lg border p-4"' : ''
+  return [
+    `<Field orientation="horizontal" data-invalid={${s.invalid}}${className}>`,
+    indent(parts.join('\n'), 2),
+    '</Field>',
+  ].join('\n')
+}
+
+/** Text placed between JSX tags, with the characters JSX treats specially escaped. */
+function escapeText(text: string) {
+  return /[{}<>]/.test(text) ? `{${JSON.stringify(text)}}` : text
+}
diff --git a/components/field-variants/file-input.tsx b/components/field-variants/file-input.tsx
new file mode 100644
index 0000000..b8fd06f
--- /dev/null
+++ b/components/field-variants/file-input.tsx
@@ -0,0 +1,80 @@
+'use client'
+
+import { CloudUpload, Paperclip } from 'lucide-react'
+
+import {
+  FileInput,
+  FileUploader,
+  FileUploaderContent,
+  FileUploaderItem,
+} from '@/components/ui/file-upload'
+import { code, zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+const dropzoneOptions = { maxFiles: 5, maxSize: 1024 * 1024 * 4, multiple: true }
+
+export const fileInputVariant: FieldVariant = {
+  name: 'File Input',
+  defaults: { label: 'Select File', description: 'Select a file to upload.' },
+  registryItems: ['file-upload'],
+  imports: () => [
+    'import { CloudUpload, Paperclip } from "lucide-react"',
+    'import { FileInput, FileUploader, FileUploaderContent, FileUploaderItem } from "@/components/ui/file-upload"',
+  ],
+  declarations: ['const dropzoneOptions = { maxFiles: 5, maxSize: 1024 * 1024 * 4, multiple: true }'],
+  schema: (field) => {
+    const files = zx.array(zx.instanceof(code(File, 'File')))
+    return field.required ? files.min(1, { message: 'Select at least one file' }) : files
+  },
+  defaultValue: () => [],
+  Control: ({ value, onChange }) => (
+    <FileUploader
+      value={value}
+      onValueChange={(files) => onChange(files ?? [])}
+      dropzoneOptions={dropzoneOptions}
+      className="relative rounded-lg bg-background p-2"
+    >
+      <FileInput className="outline-dashed outline-1 outline-muted-foreground">
+        <div className="flex w-full flex-col items-center justify-center p-8">
+          <CloudUpload className="size-10 text-muted-foreground" />
+          <p className="mb-1 text-sm text-muted-foreground">
+            <span className="font-semibold">Click to upload</span> or drag and drop
+          </p>
+          <p className="text-xs text-muted-foreground">SVG, PNG, JPG or GIF</p>
+        </div>
+      </FileInput>
+      <FileUploaderContent>
+        {(value as File[] | undefined)?.map((file, index) => (
+          <FileUploaderItem key={index} index={index}>
+            <Paperclip className="size-4 stroke-current" />
+            <span>{file.name}</span>
+          </FileUploaderItem>
+        ))}
+      </FileUploaderContent>
+    </FileUploader>
+  ),
+  control: (_field, b) => `<FileUploader
+  value={${b.value}}
+  onValueChange={(files) => ${b.onChange('files ?? []')}}
+  dropzoneOptions={dropzoneOptions}
+  className="relative rounded-lg bg-background p-2"
+>
+  <FileInput className="outline-dashed outline-1 outline-muted-foreground">
+    <div className="flex w-full flex-col items-center justify-center p-8">
+      <CloudUpload className="size-10 text-muted-foreground" />
+      <p className="mb-1 text-sm text-muted-foreground">
+        <span className="font-semibold">Click to upload</span> or drag and drop
+      </p>
+      <p className="text-xs text-muted-foreground">SVG, PNG, JPG or GIF</p>
+    </div>
+  </FileInput>
+  <FileUploaderContent>
+    {${b.value}?.map((file, index) => (
+      <FileUploaderItem key={index} index={index}>
+        <Paperclip className="size-4 stroke-current" />
+        <span>{file.name}</span>
+      </FileUploaderItem>
+    ))}
+  </FileUploaderContent>
+</FileUploader>`,
+}
diff --git a/components/field-variants/form.ts b/components/field-variants/form.ts
new file mode 100644
index 0000000..ebb05f8
--- /dev/null
+++ b/components/field-variants/form.ts
@@ -0,0 +1,56 @@
+import type { z } from 'zod'
+
+import type { FormFieldType } from '@/types'
+import { getFieldVariant } from './index'
+import { printValue, toSource, toZod, zx } from './schema-expr'
+
+/** A playground form: fields, or rows of up to three fields shown side by side. */
+export type FormFieldOrGroup = FormFieldType | FormFieldType[]
+
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/
+const key = (name: string) => (IDENTIFIER.test(name) ? name : JSON.stringify(name))
+
+/** A new field of `variant` with that variant's default label, description and placeholder. */
+export function createField(variant: string): FormFieldType {
+  const { defaults } = getFieldVariant(variant)
+  return {
+    variant,
+    name: `name_${Math.random().toString().slice(-10)}`,
+    label: defaults.label,
+    description: defaults.description,
+    placeholder: defaults.placeholder ?? '',
+    required: true,
+    disabled: false,
+  }
+}
+
+/** The runtime zod schema the playground preview validates with. */
+export function buildFormSchema(fields: FormFieldOrGroup[]): z.ZodObject {
+  return toZod(
+    zx.object(
+      Object.fromEntries(fields.flat().map((field) => [field.name, getFieldVariant(field.variant).schema(field)])),
+    ),
+  ) as z.ZodObject
+}
+
+/** `const formSchema = z.object({...})`, the same schema as source code. */
+export function formSchemaSource(fields: FormFieldOrGroup[]): string {
+  const entries = fields
+    .flat()
+    .map((field) => `  ${key(field.name)}: ${toSource(getFieldVariant(field.variant).schema(field))},`)
+  return `const formSchema = z.object({\n${entries.join('\n')}\n})`
+}
+
+export function formDefaultValues(fields: FormFieldOrGroup[]): Record<string, unknown> {
+  return Object.fromEntries(
+    fields.flat().map((field) => [field.name, getFieldVariant(field.variant).defaultValue(field)]),
+  )
+}
+
+/** The default values object as source code, e.g. `{ name: "", birthday: new Date() }`. */
+export function formDefaultValuesSource(fields: FormFieldOrGroup[]): string {
+  const entries = fields
+    .flat()
+    .map((field) => `${key(field.name)}: ${printValue(getFieldVariant(field.variant).defaultValue(field))},`)
+  return `{\n${entries.map((entry) => `  ${entry}`).join('\n')}\n}`
+}
diff --git a/components/field-variants/helpers.ts b/components/field-variants/helpers.ts
new file mode 100644
index 0000000..b6751ae
--- /dev/null
+++ b/components/field-variants/helpers.ts
@@ -0,0 +1,25 @@
+import type { FormFieldType } from '@/types'
+import { zx, type SchemaExpr } from './schema-expr'
+
+/** A JSX attribute value for a string: `"text"`, or `{"..."}` when it needs escaping. */
+export const lit = (value: string | undefined) => {
+  const text = value ?? ''
+  return /["\\{}\n]/.test(text) ? `{${JSON.stringify(text)}}` : `"${text}"`
+}
+
+/** `required` string: at least `min` (default 1) characters; optional strings may be empty. */
+export function stringSchema(field: FormFieldType, message = 'Required'): SchemaExpr {
+  let schema = zx.string()
+  if (field.required) {
+    schema = field.min
+      ? schema.min(field.min, { message: `Must be at least ${field.min} characters` })
+      : schema.min(1, { message })
+  }
+  if (field.max) schema = schema.max(field.max, { message: `Must be at most ${field.max} characters` })
+  return schema
+}
+
+/** Marks a non-string schema optional unless the field is required. */
+export function optionalUnlessRequired(field: FormFieldType, schema: SchemaExpr): SchemaExpr {
+  return field.required ? schema : (schema as ReturnType<typeof zx.any>).optional()
+}
diff --git a/components/field-variants/index.ts b/components/field-variants/index.ts
new file mode 100644
index 0000000..7d2a21a
--- /dev/null
+++ b/components/field-variants/index.ts
@@ -0,0 +1,59 @@
+import { checkboxVariant } from './checkbox'
+import { comboboxVariant } from './combobox'
+import { creditCardVariant } from './credit-card'
+import { datePickerVariant } from './date-picker'
+import { datetimePickerVariant } from './datetime-picker'
+import { fileInputVariant } from './file-input'
+import { inputVariant } from './input'
+import { inputOtpVariant } from './input-otp'
+import { locationInputVariant } from './location-input'
+import { multiSelectVariant } from './multi-select'
+import { passwordVariant } from './password'
+import { phoneVariant } from './phone'
+import { radioGroupVariant } from './radio-group'
+import { ratingVariant } from './rating'
+import { selectVariant } from './select'
+import { signatureInputVariant } from './signature-input'
+import { signaturePadVariant } from './signature-pad'
+import { sliderVariant } from './slider'
+import { smartDatetimeInputVariant } from './smart-datetime-input'
+import { switchVariant } from './switch'
+import { tagsInputVariant } from './tags-input'
+import { textareaVariant } from './textarea'
+import type { FieldVariant } from './types'
+
+export type { Binding, ControlProps, FieldSetting, FieldVariant } from './types'
+
+/** Every field the playground offers, in picker order. */
+export const fieldVariants: FieldVariant[] = [
+  checkboxVariant,
+  comboboxVariant,
+  datePickerVariant,
+  datetimePickerVariant,
+  fileInputVariant,
+  inputVariant,
+  inputOtpVariant,
+  locationInputVariant,
+  multiSelectVariant,
+  passwordVariant,
+  phoneVariant,
+  selectVariant,
+  signatureInputVariant,
+  signaturePadVariant,
+  sliderVariant,
+  smartDatetimeInputVariant,
+  switchVariant,
+  tagsInputVariant,
+  textareaVariant,
+  ratingVariant,
+  radioGroupVariant,
+  creditCardVariant,
+]
+
+const byName = new Map(fieldVariants.map((variant) => [variant.name, variant]))
+
+export function getFieldVariant(name: string): FieldVariant {
+  const variant = byName.get(name)
+  if (!variant) throw new Error(`Unknown field variant: ${name}`)
+  return variant
+}
diff --git a/components/field-variants/input-otp.tsx b/components/field-variants/input-otp.tsx
new file mode 100644
index 0000000..fec7ba6
--- /dev/null
+++ b/components/field-variants/input-otp.tsx
@@ -0,0 +1,61 @@
+'use client'
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@/components/ui/input-otp'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const inputOtpVariant: FieldVariant = {
+  name: 'Input OTP',
+  defaults: {
+    label: 'One-Time Password',
+    description: 'Please enter the one-time password sent to your phone.',
+  },
+  registryItems: ['input-otp'],
+  imports: () => [
+    'import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp"',
+  ],
+  schema: (field) =>
+    field.required
+      ? zx.string().length(6, { message: 'Enter all 6 digits' })
+      : zx.string().length(6, { message: 'Enter all 6 digits' }).or(zx.literal('')),
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, onBlur }) => (
+    <InputOTP id={id} maxLength={6} value={value ?? ''} onChange={onChange} onBlur={onBlur} disabled={field.disabled}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+  control: (field, b) => `<InputOTP
+  id={${b.id}}
+  maxLength={6}${field.disabled ? '\n  disabled' : ''}
+  value={${b.value}}
+  onChange={(value) => ${b.onChange('value')}}
+  onBlur={${b.onBlur}}
+>
+  <InputOTPGroup>
+    <InputOTPSlot index={0} />
+    <InputOTPSlot index={1} />
+    <InputOTPSlot index={2} />
+  </InputOTPGroup>
+  <InputOTPSeparator />
+  <InputOTPGroup>
+    <InputOTPSlot index={3} />
+    <InputOTPSlot index={4} />
+    <InputOTPSlot index={5} />
+  </InputOTPGroup>
+</InputOTP>`,
+}
diff --git a/components/field-variants/input.tsx b/components/field-variants/input.tsx
new file mode 100644
index 0000000..c47db59
--- /dev/null
+++ b/components/field-variants/input.tsx
@@ -0,0 +1,55 @@
+'use client'
+
+import { Input } from '@/components/ui/input'
+import { lit, stringSchema } from './helpers'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const inputVariant: FieldVariant = {
+  name: 'Input',
+  defaults: {
+    label: 'Username',
+    description: 'This is your public display name.',
+    placeholder: 'shadcn',
+  },
+  settings: ['inputType', 'range'],
+  registryItems: ['input'],
+  imports: () => ['import { Input } from "@/components/ui/input"'],
+  schema: (field) => {
+    if (field.type === 'email') {
+      const email = zx.email({ message: 'Invalid email address' })
+      return field.required ? email : email.or(zx.literal(''))
+    }
+    if (field.type === 'number') {
+      // The input holds a string; the schema outputs a number.
+      let number = (zx.coerce as any)['number<string>']({ message: 'Must be a number' })
+      if (field.min !== undefined) number = number.min(field.min, { message: `Must be at least ${field.min}` })
+      if (field.max !== undefined) number = number.max(field.max, { message: `Must be at most ${field.max}` })
+      return number
+    }
+    return stringSchema(field)
+  },
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, onBlur, invalid }) => (
+    <Input
+      id={id}
+      type={field.type || 'text'}
+      placeholder={field.placeholder}
+      disabled={field.disabled}
+      className={field.className}
+      value={value ?? ''}
+      onChange={(event) => onChange(event.target.value)}
+      onBlur={onBlur}
+      aria-invalid={invalid}
+    />
+  ),
+  control: (field, b) => `<Input
+  id={${b.id}}
+  type=${lit(field.type || 'text')}
+  placeholder=${lit(field.placeholder)}${field.disabled ? '\n  disabled' : ''}
+  value={${b.value}}
+  onChange={(event) => ${b.onChange('event.target.value')}}
+  onBlur={${b.onBlur}}
+  aria-invalid={${b.invalid}}
+/>`,
+}
diff --git a/components/field-variants/location-input.tsx b/components/field-variants/location-input.tsx
new file mode 100644
index 0000000..58c459c
--- /dev/null
+++ b/components/field-variants/location-input.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import LocationSelector from '@/components/ui/location-input'
+import { code, zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const locationInputVariant: FieldVariant = {
+  name: 'Location Input',
+  defaults: {
+    label: 'Select Country',
+    description: 'If your country has states, it will be appear after selecting country',
+  },
+  registryItems: ['location-input'],
+  imports: () => ['import LocationSelector from "@/components/ui/location-input"'],
+  schema: (field) => {
+    const location = zx.tuple([zx.string(), zx.string().optional()])
+    // Reported on the field itself rather than on the tuple's first element.
+    return field.required
+      ? location.refine(code(([country]: [string, string?]) => country.length > 0, '([country]) => country.length > 0'), {
+          message: 'Country is required',
+        })
+      : location
+  },
+  defaultValue: () => ['', ''],
+  Control: ({ field, value, onChange }) => (
+    <LocationSelector
+      disabled={field.disabled}
+      onCountryChange={(country) => onChange([country?.name ?? '', ''])}
+      onStateChange={(state) => onChange([value?.[0] ?? '', state?.name ?? ''])}
+    />
+  ),
+  control: (field, b) => `<LocationSelector${field.disabled ? '\n  disabled' : ''}
+  onCountryChange={(country) => ${b.onChange('[country?.name ?? "", ""] as [string, string]')}}
+  onStateChange={(state) =>
+    ${b.onChange(`[${b.value}[0], state?.name ?? ""] as [string, string]`)}
+  }
+/>`,
+}
diff --git a/components/field-variants/multi-select.tsx b/components/field-variants/multi-select.tsx
new file mode 100644
index 0000000..38a14b0
--- /dev/null
+++ b/components/field-variants/multi-select.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import {
+  MultiSelector,
+  MultiSelectorContent,
+  MultiSelectorInput,
+  MultiSelectorItem,
+  MultiSelectorList,
+  MultiSelectorTrigger,
+} from '@/components/ui/multi-select'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+const OPTIONS = ['React', 'Vue', 'Svelte']
+
+export const multiSelectVariant: FieldVariant = {
+  name: 'Multi Select',
+  defaults: { label: 'Select your framework', description: 'Select multiple options.' },
+  registryItems: ['multi-select'],
+  imports: () => [
+    'import { MultiSelector, MultiSelectorContent, MultiSelectorInput, MultiSelectorItem, MultiSelectorList, MultiSelectorTrigger } from "@/components/ui/multi-select"',
+  ],
+  schema: (field) => {
+    const values = zx.array(zx.string())
+    return field.required ? values.min(1, { message: 'Please select at least one item' }) : values
+  },
+  defaultValue: () => [],
+  Control: ({ value, onChange }) => (
+    <MultiSelector values={value ?? []} onValuesChange={onChange} loop className="max-w-xs">
+      <MultiSelectorTrigger>
+        <MultiSelectorInput placeholder="Select languages" />
+      </MultiSelectorTrigger>
+      <MultiSelectorContent>
+        <MultiSelectorList>
+          {OPTIONS.map((option) => (
+            <MultiSelectorItem key={option} value={option}>
+              {option}
+            </MultiSelectorItem>
+          ))}
+        </MultiSelectorList>
+      </MultiSelectorContent>
+    </MultiSelector>
+  ),
+  control: (_field, b) => `<MultiSelector
+  values={${b.value}}
+  onValuesChange={(values) => ${b.onChange('values')}}
+  loop
+  className="max-w-xs"
+>
+  <MultiSelectorTrigger>
+    <MultiSelectorInput placeholder="Select languages" />
+  </MultiSelectorTrigger>
+  <MultiSelectorContent>
+    <MultiSelectorList>
+${OPTIONS.map((option) => `      <MultiSelectorItem value="${option}">${option}</MultiSelectorItem>`).join('\n')}
+    </MultiSelectorList>
+  </MultiSelectorContent>
+</MultiSelector>`,
+}
diff --git a/components/field-variants/password.tsx b/components/field-variants/password.tsx
new file mode 100644
index 0000000..d16d50c
--- /dev/null
+++ b/components/field-variants/password.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { PasswordInput } from '@/components/ui/password-input'
+import { lit, stringSchema } from './helpers'
+import type { FieldVariant } from './types'
+
+export const passwordVariant: FieldVariant = {
+  name: 'Password',
+  defaults: { label: 'Password', description: 'Enter your password.', placeholder: '********' },
+  settings: ['range'],
+  registryItems: ['password-input'],
+  imports: () => ['import { PasswordInput } from "@/components/ui/password-input"'],
+  schema: (field) => stringSchema(field),
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, onBlur, invalid }) => (
+    <PasswordInput
+      id={id}
+      placeholder={field.placeholder}
+      disabled={field.disabled}
+      value={value ?? ''}
+      onChange={(event) => onChange(event.target.value)}
+      onBlur={onBlur}
+      aria-invalid={invalid}
+    />
+  ),
+  control: (field, b) => `<PasswordInput
+  id={${b.id}}
+  placeholder=${lit(field.placeholder)}${field.disabled ? '\n  disabled' : ''}
+  value={${b.value}}
+  onChange={(event) => ${b.onChange('event.target.value')}}
+  onBlur={${b.onBlur}}
+  aria-invalid={${b.invalid}}
+/>`,
+}
diff --git a/components/field-variants/phone.tsx b/components/field-variants/phone.tsx
new file mode 100644
index 0000000..84bc5dc
--- /dev/null
+++ b/components/field-variants/phone.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { isValidPhoneNumber } from 'react-phone-number-input'
+
+import { PhoneInput } from '@/components/ui/phone-input'
+import { lit, optionalUnlessRequired } from './helpers'
+import { code, zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const phoneVariant: FieldVariant = {
+  name: 'Phone',
+  defaults: { label: 'Phone number', description: 'Enter your phone number.', placeholder: 'Enter a phone number' },
+  registryItems: ['phone-input'],
+  imports: () => [
+    'import { isValidPhoneNumber } from "react-phone-number-input"',
+    'import { PhoneInput } from "@/components/ui/phone-input"',
+  ],
+  schema: (field) =>
+    field.required
+      ? zx.string().refine(code(isValidPhoneNumber, 'isValidPhoneNumber'), {
+          message: 'Invalid phone number',
+        })
+      : optionalUnlessRequired(field, zx.string()),
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, onBlur }) => (
+    <PhoneInput
+      id={id}
+      placeholder={field.placeholder}
+      disabled={field.disabled}
+      defaultCountry="TR"
+      value={value}
+      onChange={(phone) => onChange(phone ?? '')}
+      onBlur={onBlur}
+    />
+  ),
+  control: (field, b) => `<PhoneInput
+  id={${b.id}}
+  placeholder=${lit(field.placeholder)}${field.disabled ? '\n  disabled' : ''}
+  defaultCountry="TR"
+  value={${b.value}}
+  onChange={(phone) => ${b.onChange('phone ?? ""')}}
+  onBlur={${b.onBlur}}
+/>`,
+}
diff --git a/components/field-variants/radio-group.tsx b/components/field-variants/radio-group.tsx
new file mode 100644
index 0000000..34291cd
--- /dev/null
+++ b/components/field-variants/radio-group.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { FieldLabel } from '@/components/ui/field'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { stringSchema } from './helpers'
+import type { FieldVariant } from './types'
+
+const OPTIONS = [
+  { label: 'Male', value: 'male' },
+  { label: 'Female', value: 'female' },
+  { label: 'Other', value: 'other' },
+]
+
+export const radioGroupVariant: FieldVariant = {
+  name: 'RadioGroup',
+  defaults: { label: 'Gender', description: 'Select your gender' },
+  registryItems: ['radio-group'],
+  imports: () => ['import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"'],
+  schema: (field) => stringSchema(field, 'Please select an option'),
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, invalid }) => (
+    <RadioGroup
+      value={value ?? ''}
+      onValueChange={(next) => onChange(String(next ?? ''))}
+      disabled={field.disabled}
+      aria-invalid={invalid}
+    >
+      {OPTIONS.map((option) => (
+        <div key={option.value} className="flex items-center gap-3">
+          <RadioGroupItem value={option.value} id={`${id}-${option.value}`} />
+          <FieldLabel htmlFor={`${id}-${option.value}`} className="font-normal">
+            {option.label}
+          </FieldLabel>
+        </div>
+      ))}
+    </RadioGroup>
+  ),
+  control: (field, b) => `<RadioGroup
+  value={${b.value}}
+  onValueChange={(value) => ${b.onChange('String(value ?? "")')}}${field.disabled ? '\n  disabled' : ''}
+  aria-invalid={${b.invalid}}
+>
+${OPTIONS.map(
+  (option) => `  <div className="flex items-center gap-3">
+    <RadioGroupItem value="${option.value}" id={\`\${${b.id}}-${option.value}\`} />
+    <FieldLabel htmlFor={\`\${${b.id}}-${option.value}\`} className="font-normal">
+      ${option.label}
+    </FieldLabel>
+  </div>`,
+).join('\n')}
+</RadioGroup>`,
+}
diff --git a/components/field-variants/rating.tsx b/components/field-variants/rating.tsx
new file mode 100644
index 0000000..910f9cf
--- /dev/null
+++ b/components/field-variants/rating.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import { Rating } from '@/components/ui/rating'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const ratingVariant: FieldVariant = {
+  name: 'Rating',
+  defaults: { label: 'Rating', description: 'Please provide your rating.' },
+  registryItems: ['rating'],
+  imports: () => ['import { Rating } from "@/components/ui/rating"'],
+  schema: (field) =>
+    field.required ? zx.number().min(1, { message: 'Please provide a rating' }) : zx.number(),
+  defaultValue: () => 0,
+  Control: ({ field, value, onChange }) => (
+    <Rating value={value ?? 0} onChange={onChange} readOnly={field.disabled} />
+  ),
+  control: (field, b) => `<Rating
+  value={${b.value}}
+  onChange={(value) => ${b.onChange('value')}}${field.disabled ? '\n  readOnly' : ''}
+/>`,
+}
diff --git a/components/field-variants/schema-expr.ts b/components/field-variants/schema-expr.ts
new file mode 100644
index 0000000..e2cdcb5
--- /dev/null
+++ b/components/field-variants/schema-expr.ts
@@ -0,0 +1,116 @@
+import { z } from 'zod'
+
+/**
+ * A zod expression written once and read two ways: as the runtime schema
+ * the playground validates with, and as the source code the generator
+ * prints. `zx` records property reads and calls instead of running them,
+ * so `zx.string().min(1)` becomes both `z.string().min(1)` (runtime) and
+ * the text "z.string().min(1)".
+ *
+ * `zx` is typed as `typeof z` for autocompletion; what it returns are
+ * recordings, only meaningful to `toZod` and `toSource`. A property named
+ * with a type argument, `zx.coerce['number<string>']`, prints the type
+ * argument and ignores it at runtime.
+ */
+
+type Step = { kind: 'get'; name: string } | { kind: 'call'; args: unknown[] }
+
+const STEPS = Symbol('schema-expr steps')
+const CODE = Symbol('schema-expr code')
+
+type Recording = { [STEPS]: Step[] }
+
+/** A value with a runtime form and a hand-written source form, e.g. a refine callback. */
+export type Code<T> = { [CODE]: string; value: T }
+
+/** Typed as the value so it fits where zod expects it, e.g. `.refine(code(fn, 'fn'))`. */
+export function code<T>(value: T, source: string): T {
+  return { [CODE]: source, value } as Code<T> as unknown as T
+}
+
+function record(steps: Step[]): unknown {
+  const target = function () {} as unknown as Recording
+  return new Proxy(target, {
+    get(_, prop) {
+      if (prop === STEPS) return steps
+      if (typeof prop === 'symbol' || prop === 'then') return undefined
+      return record([...steps, { kind: 'get', name: prop }])
+    },
+    apply(_, __, args) {
+      return record([...steps, { kind: 'call', args }])
+    },
+  })
+}
+
+export const zx = record([]) as typeof z
+
+export type SchemaExpr = unknown
+
+function stepsOf(expr: SchemaExpr): Step[] | undefined {
+  return typeof expr === 'function' ? (expr as unknown as Recording)[STEPS] : undefined
+}
+
+function isCode(value: unknown): value is Code<unknown> {
+  return typeof value === 'object' && value !== null && CODE in value
+}
+
+function runtimeArg(arg: unknown): unknown {
+  if (stepsOf(arg)) return toZod(arg)
+  if (isCode(arg)) return arg.value
+  if (Array.isArray(arg)) return arg.map(runtimeArg)
+  if (arg && typeof arg === 'object' && !(arg instanceof Date)) {
+    return Object.fromEntries(Object.entries(arg).map(([k, v]) => [k, runtimeArg(v)]))
+  }
+  return arg
+}
+
+export function toZod(expr: SchemaExpr): z.ZodType {
+  const steps = stepsOf(expr)
+  if (!steps) throw new Error('Not a schema expression')
+  let receiver: unknown = undefined
+  let current: unknown = z
+  for (const step of steps) {
+    if (step.kind === 'get') {
+      receiver = current
+      // `zx.coerce['number<string>']` records a type argument for the source only.
+      current = (current as Record<string, unknown>)[step.name.replace(/<.*>$/, '')]
+    } else {
+      current = (current as (...args: unknown[]) => unknown).apply(receiver, step.args.map(runtimeArg))
+      receiver = undefined
+    }
+  }
+  return current as z.ZodType
+}
+
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/
+
+/** Prints a JS value as source: dates as `new Date()`, identifier keys unquoted. */
+export function printValue(value: unknown): string {
+  if (stepsOf(value)) return toSource(value)
+  if (isCode(value)) return value[CODE]
+  if (typeof value === 'function') {
+    throw new Error(`Wrap ${value.name || 'functions'} in code() so it has a source form`)
+  }
+  if (value instanceof Date) return 'new Date()'
+  if (value === undefined) return 'undefined'
+  if (Array.isArray(value)) return `[${value.map(printValue).join(', ')}]`
+  if (value && typeof value === 'object') {
+    const entries = Object.entries(value).map(
+      ([key, v]) => `${IDENTIFIER.test(key) ? key : JSON.stringify(key)}: ${printValue(v)}`,
+    )
+    return entries.length ? `{ ${entries.join(', ')} }` : '{}'
+  }
+  return JSON.stringify(value)
+}
+
+export function toSource(expr: SchemaExpr): string {
+  const steps = stepsOf(expr)
+  if (!steps) throw new Error('Not a schema expression')
+  return steps.reduce(
+    (source, step) =>
+      step.kind === 'get'
+        ? `${source}.${step.name}`
+        : `${source}(${step.args.map(printValue).join(', ')})`,
+    'z',
+  )
+}
diff --git a/components/field-variants/select.tsx b/components/field-variants/select.tsx
new file mode 100644
index 0000000..5ef84cd
--- /dev/null
+++ b/components/field-variants/select.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { lit, stringSchema } from './helpers'
+import type { FieldVariant } from './types'
+
+const OPTIONS = ['m@example.com', 'm@google.com', 'm@support.com']
+
+export const selectVariant: FieldVariant = {
+  name: 'Select',
+  defaults: {
+    label: 'Email',
+    description: 'You can manage email addresses in your email settings.',
+    placeholder: 'Select a verified email to display',
+  },
+  registryItems: ['select'],
+  imports: () => [
+    'import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"',
+  ],
+  schema: (field) => stringSchema(field, 'Please select an option'),
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, invalid }) => (
+    <Select value={value ?? ''} onValueChange={(next) => onChange(next ?? '')} disabled={field.disabled}>
+      <SelectTrigger id={id} aria-invalid={invalid}>
+        <SelectValue placeholder={field.placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {OPTIONS.map((option) => (
+          <SelectItem key={option} value={option}>
+            {option}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  ),
+  control: (field, b) => `<Select
+  value={${b.value}}
+  onValueChange={(value) => ${b.onChange('value ?? ""')}}${field.disabled ? '\n  disabled' : ''}
+>
+  <SelectTrigger id={${b.id}} aria-invalid={${b.invalid}}>
+    <SelectValue placeholder=${lit(field.placeholder)} />
+  </SelectTrigger>
+  <SelectContent>
+${OPTIONS.map((option) => `    <SelectItem value="${option}">${option}</SelectItem>`).join('\n')}
+  </SelectContent>
+</Select>`,
+}
diff --git a/components/field-variants/signature-input.tsx b/components/field-variants/signature-input.tsx
new file mode 100644
index 0000000..abc415d
--- /dev/null
+++ b/components/field-variants/signature-input.tsx
@@ -0,0 +1,20 @@
+'use client'
+
+import SignatureInput from '@/components/ui/signature-input'
+import { stringSchema } from './helpers'
+import type { FieldVariant } from './types'
+
+export const signatureInputVariant: FieldVariant = {
+  name: 'Signature Input',
+  defaults: { label: 'Sign here', description: 'Please provide your signature above' },
+  registryItems: ['signature-input'],
+  imports: () => ['import SignatureInput from "@/components/ui/signature-input"'],
+  schema: (field) => stringSchema(field, 'Signature is required'),
+  defaultValue: () => '',
+  Control: ({ onChange }) => (
+    <SignatureInput onSignatureChange={(signature) => onChange(signature ?? '')} />
+  ),
+  control: (_field, b) => `<SignatureInput
+  onSignatureChange={(signature) => ${b.onChange('signature ?? ""')}}
+/>`,
+}
diff --git a/components/field-variants/signature-pad.tsx b/components/field-variants/signature-pad.tsx
new file mode 100644
index 0000000..e73f4a3
--- /dev/null
+++ b/components/field-variants/signature-pad.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import SignaturePad from '@/components/ui/signature-pad'
+import { stringSchema } from './helpers'
+import type { FieldVariant } from './types'
+
+export const signaturePadVariant: FieldVariant = {
+  name: 'Signature Pad',
+  isNew: true,
+  defaults: { label: 'Your Signature', description: 'Click the pen button to sign' },
+  registryItems: ['signature-pad'],
+  imports: () => ['import SignaturePad from "@/components/ui/signature-pad"'],
+  schema: (field) => stringSchema(field, 'Signature is required'),
+  defaultValue: () => '',
+  Control: ({ value, onChange }) => (
+    <SignaturePad value={value || null} onChange={(signature) => onChange(signature ?? '')} />
+  ),
+  control: (_field, b) => `<SignaturePad
+  value={${b.value} || null}
+  onChange={(signature) => ${b.onChange('signature ?? ""')}}
+/>`,
+}
diff --git a/components/field-variants/slider.tsx b/components/field-variants/slider.tsx
new file mode 100644
index 0000000..cf44ada
--- /dev/null
+++ b/components/field-variants/slider.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { Slider } from '@/components/ui/slider'
+import type { FormFieldType } from '@/types'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+const range = (field: FormFieldType) => ({
+  min: field.min ?? 0,
+  max: field.max ?? 100,
+  step: field.step ?? 1,
+})
+
+export const sliderVariant: FieldVariant = {
+  name: 'Slider',
+  defaults: { label: 'Set Price Range', description: 'Adjust the price by sliding.' },
+  settings: ['range', 'step'],
+  registryItems: ['slider'],
+  imports: () => ['import { Slider } from "@/components/ui/slider"'],
+  schema: (field) => {
+    const { min, max } = range(field)
+    return zx
+      .number()
+      .min(min, { message: `Must be at least ${min}` })
+      .max(max, { message: `Must be at most ${max}` })
+  },
+  defaultValue: (field) => range(field).min,
+  Control: ({ field, id, value, onChange }) => {
+    const { min, max, step } = range(field)
+    return (
+      <div className="space-y-2">
+        <Slider
+          id={id}
+          min={min}
+          max={max}
+          step={step}
+          disabled={field.disabled}
+          value={[value ?? min]}
+          onValueChange={(next: number | readonly number[]) =>
+            onChange(Array.isArray(next) ? next[0] : next)
+          }
+        />
+        <p className="text-xs text-muted-foreground">Selected value: {value ?? min}</p>
+      </div>
+    )
+  },
+  control: (field, b) => {
+    const { min, max, step } = range(field)
+    return `<Slider
+  id={${b.id}}
+  min={${min}}
+  max={${max}}
+  step={${step}}${field.disabled ? '\n  disabled' : ''}
+  value={[${b.value}]}
+  onValueChange={(value: number | readonly number[]) =>
+    ${b.onChange('Array.isArray(value) ? value[0] : value')}
+  }
+/>`
+  },
+}
diff --git a/components/field-variants/smart-datetime-input.tsx b/components/field-variants/smart-datetime-input.tsx
new file mode 100644
index 0000000..8a17226
--- /dev/null
+++ b/components/field-variants/smart-datetime-input.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import * as Locales from 'date-fns/locale'
+
+import { SmartDatetimeInput } from '@/components/ui/smart-datetime-input'
+import { lit, optionalUnlessRequired } from './helpers'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const smartDatetimeInputVariant: FieldVariant = {
+  name: 'Smart Datetime Input',
+  defaults: {
+    label: "What's the best time for you?",
+    description: 'Please select the full time',
+    placeholder: 'e.g. Tomorrow morning 9am',
+  },
+  settings: ['locale'],
+  registryItems: ['smart-datetime-input'],
+  imports: (field) => [
+    'import { SmartDatetimeInput } from "@/components/ui/smart-datetime-input"',
+    ...(field.locale ? [`import { ${field.locale} } from "date-fns/locale"`] : []),
+  ],
+  schema: (field) => optionalUnlessRequired(field, zx.date({ message: 'A date is required' })),
+  defaultValue: () => new Date(),
+  Control: ({ field, value, onChange }) => (
+    <SmartDatetimeInput
+      value={value}
+      onValueChange={onChange}
+      placeholder={field.placeholder}
+      locale={field.locale ? Locales[field.locale] : undefined}
+      hour12={field.hour12}
+    />
+  ),
+  control: (field, b) => `<SmartDatetimeInput
+  value={${b.value}}
+  onValueChange={(date) => date && ${b.onChange('date')}}
+  placeholder=${lit(field.placeholder)}${field.locale ? `\n  locale={${field.locale}}` : ''}${field.hour12 ? '\n  hour12' : ''}
+/>`,
+}
diff --git a/components/field-variants/switch.tsx b/components/field-variants/switch.tsx
new file mode 100644
index 0000000..22a8069
--- /dev/null
+++ b/components/field-variants/switch.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { Switch } from '@/components/ui/switch'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const switchVariant: FieldVariant = {
+  name: 'Switch',
+  defaults: {
+    label: 'Marketing emails',
+    description: 'Receive emails about new products, features, and more.',
+  },
+  registryItems: ['switch'],
+  imports: () => ['import { Switch } from "@/components/ui/switch"'],
+  schema: () => zx.boolean(),
+  defaultValue: () => false,
+  layout: 'control-last',
+  Control: ({ field, id, value, onChange, invalid }) => (
+    <Switch
+      id={id}
+      disabled={field.disabled}
+      checked={value === true}
+      onCheckedChange={(checked) => onChange(checked === true)}
+      aria-invalid={invalid}
+    />
+  ),
+  control: (field, b) => `<Switch
+  id={${b.id}}${field.disabled ? '\n  disabled' : ''}
+  checked={${b.value}}
+  onCheckedChange={(checked) => ${b.onChange('checked === true')}}
+  aria-invalid={${b.invalid}}
+/>`,
+}
diff --git a/components/field-variants/tags-input.tsx b/components/field-variants/tags-input.tsx
new file mode 100644
index 0000000..d93fd25
--- /dev/null
+++ b/components/field-variants/tags-input.tsx
@@ -0,0 +1,26 @@
+'use client'
+
+import { TagsInput } from '@/components/ui/tags-input'
+import { lit } from './helpers'
+import { zx } from './schema-expr'
+import type { FieldVariant } from './types'
+
+export const tagsInputVariant: FieldVariant = {
+  name: 'Tags Input',
+  defaults: { label: 'Enter your tech stack.', description: 'Add tags.', placeholder: 'Enter your tags' },
+  registryItems: ['tags-input'],
+  imports: () => ['import { TagsInput } from "@/components/ui/tags-input"'],
+  schema: (field) => {
+    const tags = zx.array(zx.string())
+    return field.required ? tags.min(1, { message: 'Please enter at least one item' }) : tags
+  },
+  defaultValue: () => [],
+  Control: ({ field, value, onChange }) => (
+    <TagsInput value={value ?? []} onValueChange={onChange} placeholder={field.placeholder} />
+  ),
+  control: (field, b) => `<TagsInput
+  value={${b.value}}
+  onValueChange={(tags) => ${b.onChange('tags')}}
+  placeholder=${lit(field.placeholder)}
+/>`,
+}
diff --git a/components/field-variants/textarea.tsx b/components/field-variants/textarea.tsx
new file mode 100644
index 0000000..3854787
--- /dev/null
+++ b/components/field-variants/textarea.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { Textarea } from '@/components/ui/textarea'
+import { lit, stringSchema } from './helpers'
+import type { FieldVariant } from './types'
+
+export const textareaVariant: FieldVariant = {
+  name: 'Textarea',
+  defaults: {
+    label: 'Bio',
+    description: 'You can @mention other users and organizations.',
+    placeholder: 'Tell us a little bit about yourself',
+  },
+  settings: ['range'],
+  registryItems: ['textarea'],
+  imports: () => ['import { Textarea } from "@/components/ui/textarea"'],
+  schema: (field) => stringSchema(field),
+  defaultValue: () => '',
+  Control: ({ field, id, value, onChange, onBlur, invalid }) => (
+    <Textarea
+      id={id}
+      placeholder={field.placeholder}
+      disabled={field.disabled}
+      className={field.className ?? 'resize-none'}
+      value={value ?? ''}
+      onChange={(event) => onChange(event.target.value)}
+      onBlur={onBlur}
+      aria-invalid={invalid}
+    />
+  ),
+  control: (field, b) => `<Textarea
+  id={${b.id}}
+  placeholder=${lit(field.placeholder)}
+  className="resize-none"${field.disabled ? '\n  disabled' : ''}
+  value={${b.value}}
+  onChange={(event) => ${b.onChange('event.target.value')}}
+  onBlur={${b.onBlur}}
+  aria-invalid={${b.invalid}}
+/>`,
+}
diff --git a/components/field-variants/types.ts b/components/field-variants/types.ts
new file mode 100644
index 0000000..3644c98
--- /dev/null
+++ b/components/field-variants/types.ts
@@ -0,0 +1,66 @@
+import type { ComponentType } from 'react'
+
+import type { FormFieldType } from '@/types'
+import type { SchemaExpr } from './schema-expr'
+
+/** Builder settings a variant exposes in the edit dialog beyond label, name, etc. */
+export type FieldSetting = 'inputType' | 'range' | 'step' | 'locale'
+
+/** What the live preview hands a variant's control. */
+export type ControlProps = {
+  field: FormFieldType
+  id: string
+  value: any
+  onChange: (value: any) => void
+  onBlur: () => void
+  invalid: boolean
+}
+
+/**
+ * Source-code expressions a form library adapter provides, so one control
+ * template serves every library. `onChange` wraps a value expression in the
+ * library's change call.
+ */
+export type Binding = {
+  id: string
+  name: string
+  value: string
+  onChange: (value: string) => string
+  onBlur: string
+  invalid: string
+}
+
+/**
+ * Everything the builder, preview and code generator know about one kind of
+ * form field. Adding a field type means adding one of these.
+ */
+export type FieldVariant = {
+  /** Shown in the picker and stored as `FormFieldType.variant`. */
+  name: string
+  isNew?: boolean
+  /** Label, description and placeholder of a newly added field. */
+  defaults: { label: string; description: string; placeholder?: string }
+  settings?: FieldSetting[]
+  /**
+   * Items the generated code needs installed: official shadcn names
+   * (`input`) or items from this site's registry (`phone-input`).
+   */
+  registryItems: string[]
+  /** Import lines the generated control needs. */
+  imports: (field: FormFieldType) => string[]
+  /** Module-scope declarations (option lists) the generated control uses. */
+  declarations?: string[]
+  /** Validation, including whether an empty value is allowed when not required. */
+  schema: (field: FormFieldType) => SchemaExpr
+  /** Initial value, shared by the preview and the generated `defaultValues`. */
+  defaultValue: (field: FormFieldType) => unknown
+  /**
+   * `stacked` (default): label, control, description. `control-first` and
+   * `control-last` put the control beside its label, like a checkbox or switch.
+   */
+  layout?: 'stacked' | 'control-first' | 'control-last'
+  /** The control rendered in the live preview. */
+  Control: ComponentType<ControlProps>
+  /** The control as generated source, bound through `b`. */
+  control: (field: FormFieldType, b: Binding) => string
+}
diff --git a/components/magicui/border-beam.tsx b/components/magicui/border-beam.tsx
deleted file mode 100644
index a720307..0000000
--- a/components/magicui/border-beam.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { cn } from "@/lib/utils";
-
-interface BorderBeamProps {
-  className?: string;
-  size?: number;
-  duration?: number;
-  borderWidth?: number;
-  anchor?: number;
-  colorFrom?: string;
-  colorTo?: string;
-  delay?: number;
-}
-
-export const BorderBeam = ({
-  className,
-  size = 200,
-  duration = 15,
-  anchor = 90,
-  borderWidth = 1.5,
-  colorFrom = "#ffaa40",
-  colorTo = "#9c40ff",
-  delay = 0,
-}: BorderBeamProps) => {
-  return (
-    <div
-      style={
-        {
-          "--size": size,
-          "--duration": duration,
-          "--anchor": anchor,
-          "--border-width": borderWidth,
-          "--color-from": colorFrom,
-          "--color-to": colorTo,
-          "--delay": `-${delay}s`,
-        } as React.CSSProperties
-      }
-      className={cn(
-        "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
-
-        // mask styles
-        "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
-
-        // pseudo styles
-        "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
-        className,
-      )}
-    />
-  );
-};
diff --git a/components/magicui/dot-pattern.tsx b/components/magicui/dot-pattern.tsx
deleted file mode 100644
index f950287..0000000
--- a/components/magicui/dot-pattern.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-interface DotPatternProps {
-  width?: any;
-  height?: any;
-  x?: any;
-  y?: any;
-  cx?: any;
-  cy?: any;
-  cr?: any;
-  className?: string;
-  [key: string]: any;
-}
-export function DotPattern({
-  width = 16,
-  height = 16,
-  x = 0,
-  y = 0,
-  cx = 1,
-  cy = 1,
-  cr = 1,
-  className,
-  ...props
-}: DotPatternProps) {
-  const id = "pattern-circle";
-
-  return (
-    <svg
-      aria-hidden="true"
-      className={
-        "pointer-events-none absolute inset-0 h-full w-full fill-neutral-400/80"
-      }
-      {...props}
-    >
-      <defs>
-        <pattern
-          id={id}
-          width={width}
-          height={height}
-          patternUnits="userSpaceOnUse"
-          patternContentUnits="userSpaceOnUse"
-          x={x}
-          y={y}
-        >
-          <circle id="pattern-circle" cx={cx} cy={cy} r={cr} />
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
-    </svg>
-  );
-}
-
-export default DotPattern;
diff --git a/components/playground/special-component-notice.tsx b/components/playground/special-component-notice.tsx
index ddd18a1..20d81c9 100644
--- a/components/playground/special-component-notice.tsx
+++ b/components/playground/special-component-notice.tsx
@@ -1,43 +1,37 @@
 import { Link } from 'next-view-transitions'
 
-import { SPECIAL_COMPONENTS } from '@/constants/special-components'
-import { FormFieldType } from '@/types'
+import Code from '@/components/code'
+import type { FormFieldOrGroup } from '@/components/field-variants/form'
+import { formInstallCommand, formRegistryItems } from '@/lib/form-code'
+import { getRegistryItem } from '@/lib/registry-catalog'
 
-export type FormFieldOrGroup = FormFieldType | FormFieldType[]
-
-const SpecialComponentsNotice = ({
-  formFields,
-}: {
-  formFields: FormFieldOrGroup[]
-}) => {
-  const usedSpecialComponents = SPECIAL_COMPONENTS.filter((component) =>
-    formFields.some(
-      (field) => !Array.isArray(field) && field.variant === component.variant,
-    ),
-  )
-
-  if (usedSpecialComponents.length === 0) return null
+/** The install command for everything the generated form imports. */
+const SpecialComponentsNotice = ({ formFields }: { formFields: FormFieldOrGroup[] }) => {
+  if (formFields.length === 0) return null
+  const ownItems = formRegistryItems(formFields)
+    .map((name) => getRegistryItem(name))
+    .filter((item) => item !== undefined)
 
   return (
-    <>
+    <div className="space-y-2">
       <p className="text-sm text-muted-foreground">
-        This form includes special components, add the component in your
-        directory.
+        Install every component this form uses:
       </p>
-      <ul className="list-disc text-sm text-muted-foreground pl-3">
-        {usedSpecialComponents.map((component) => (
-          <li key={component.variant}>
-            <Link
-              href={component.url}
-              target="_blank"
-              className="hover:underline"
-            >
-              {component.variant}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </>
+      <Code code={formInstallCommand(formFields)} />
+      {ownItems.length > 0 && (
+        <p className="text-sm text-muted-foreground">
+          From the shadcn-form registry:{' '}
+          {ownItems.map((item, index) => (
+            <span key={item.name}>
+              {index > 0 && ', '}
+              <Link href={`/components/${item.name}`} className="underline">
+                {item.title}
+              </Link>
+            </span>
+          ))}
+        </p>
+      )}
+    </div>
   )
 }
 
diff --git a/components/sections/faq.tsx b/components/sections/faq.tsx
index e2da493..18c5833 100644
--- a/components/sections/faq.tsx
+++ b/components/sections/faq.tsx
@@ -12,8 +12,6 @@ export default function FAQ() {
     <Section title="FAQ" subtitle="Frequently asked questions">
       <div className="mx-auto my-12 md:max-w-[800px]">
         <Accordion
-          type="single"
-          collapsible
           className="flex w-full flex-col items-center justify-center space-y-2"
         >
           {siteConfig.faqs.map((faq, idx) => (
diff --git a/components/sections/sponsors.tsx b/components/sections/sponsors.tsx
index 7787cc2..8dc98bf 100644
--- a/components/sections/sponsors.tsx
+++ b/components/sections/sponsors.tsx
@@ -47,14 +47,13 @@ function SponsorCard({
       {showButton && (
         <div className="flex justify-end mt-3">
           <Button
-            asChild
+            render={<Link href={sponsorUrl} target="_blank" />}
+            nativeButton={false}
             variant="outline"
             className="gap-1 rounded-full group"
           >
-            <Link href={sponsorUrl} target="_blank">
-              Visit Website
-              <IoIosArrowRoundForward className="text-xl transition-transform duration-300 group-hover:-rotate-45" />
-            </Link>
+            Visit Website
+            <IoIosArrowRoundForward className="text-xl transition-transform duration-300 group-hover:-rotate-45" />
           </Button>
         </div>
       )}
diff --git a/components/sponsors-radar.tsx b/components/sponsors-radar.tsx
index 8c1fe15..e021453 100644
--- a/components/sponsors-radar.tsx
+++ b/components/sponsors-radar.tsx
@@ -221,20 +221,23 @@ function SponsorAvatarPopover({
 
   return (
     <Popover open={open}>
-      <PopoverTrigger asChild>
-        <div
-          onMouseEnter={() => setOpen(true)}
-          onMouseLeave={() => setOpen(false)}
-          className="inline-flex"
-        >
-          {sponsor.url ? (
-            <Link href={getSponsorUrl(sponsor, 'landing')} target="_blank" rel="noopener noreferrer">
-              {avatarContent}
-            </Link>
-          ) : (
-            avatarContent
-          )}
-        </div>
+      <PopoverTrigger
+        nativeButton={false}
+        render={
+          <div
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+            className="inline-flex"
+          />
+        }
+      >
+        {sponsor.url ? (
+          <Link href={getSponsorUrl(sponsor, 'landing')} target="_blank" rel="noopener noreferrer">
+            {avatarContent}
+          </Link>
+        ) : (
+          avatarContent
+        )}
       </PopoverTrigger>
       <PopoverContent side="top" className="px-2 py-1 text-xs">
         {sponsor.name}
diff --git a/components/templates/better-auth.tsx b/components/templates/better-auth.tsx
index cacecae..f05c8a0 100644
--- a/components/templates/better-auth.tsx
+++ b/components/templates/better-auth.tsx
@@ -6,14 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -41,7 +34,9 @@ export default function BetterAuthPreview() {
   async function onSubmit(values: z.infer<typeof formSchema>) {
     try {
       console.log(values)
-      toast.success('Better Auth-ready form submitted successfully. (Simulated)')
+      toast.success(
+        'Better Auth-ready form submitted successfully. (Simulated)',
+      )
     } catch (error) {
       console.error('Form submission error', error)
       toast.error('Failed to submit the form. Please try again.')
@@ -61,60 +56,50 @@ export default function BetterAuthPreview() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              <div className="grid gap-4">
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="email">Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="email"
-                          placeholder="hello@company.com"
-                          type="email"
-                          autoComplete="email"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="grid gap-4">
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.email}
+              >
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  placeholder="hello@company.com"
+                  type="email"
+                  autoComplete="email"
+                  aria-invalid={!!form.formState.errors.email}
+                  {...form.register('email')}
                 />
-                <FormField
-                  control={form.control}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <div className="flex justify-between items-center">
-                        <FormLabel htmlFor="password">Password</FormLabel>
-                        <Link href="#" className="text-sm underline">
-                          Forgot password?
-                        </Link>
-                      </div>
-                      <FormControl>
-                        <PasswordInput
-                          id="password"
-                          placeholder="******"
-                          autoComplete="current-password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+                <FieldError errors={[form.formState.errors.email]} />
+              </Field>
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.password}
+              >
+                <div className="flex justify-between items-center">
+                  <FieldLabel htmlFor="password">Password</FieldLabel>
+                  <Link href="#" className="text-sm underline">
+                    Forgot password?
+                  </Link>
+                </div>
+                <PasswordInput
+                  id="password"
+                  placeholder="******"
+                  autoComplete="current-password"
+                  aria-invalid={!!form.formState.errors.password}
+                  {...form.register('password')}
                 />
-                <Button type="submit" className="w-full">
-                  Continue
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Continue with GitHub
-                </Button>
-              </div>
-            </form>
-          </Form>
+                <FieldError errors={[form.formState.errors.password]} />
+              </Field>
+              <Button type="submit" className="w-full">
+                Continue
+              </Button>
+              <Button variant="outline" className="w-full">
+                Continue with GitHub
+              </Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
     </div>
diff --git a/components/templates/clerk-auth.tsx b/components/templates/clerk-auth.tsx
deleted file mode 100644
index 6dd2c8d..0000000
--- a/components/templates/clerk-auth.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client'
-
-import ClerkSignInPreview from '@/components/templates/clerk-sign-in'
-
-export default function ClerkAuthPreview() {
-  return <ClerkSignInPreview />
-}
diff --git a/components/templates/clerk-forgot-password.tsx b/components/templates/clerk-forgot-password.tsx
index 4281c04..231e2a0 100644
--- a/components/templates/clerk-forgot-password.tsx
+++ b/components/templates/clerk-forgot-password.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
@@ -71,7 +71,7 @@ export default function ClerkForgotPasswordPreview() {
       footer={
         <>
           Back to{' '}
-          <Link href="/templates/authentication/clerk-auth?flow=sign-in">
+          <Link href="/sign-in">
             sign in
           </Link>
           .
@@ -120,7 +120,7 @@ export default function ClerkForgotPasswordPreview() {
 
               <FieldDescription className="text-center">
                 Need a new account?{' '}
-                <Link href="/templates/authentication/clerk-auth?flow=sign-up">
+                <Link href="/sign-up">
                   Create one
                 </Link>
               </FieldDescription>
diff --git a/components/templates/clerk-reset-password.tsx b/components/templates/clerk-reset-password.tsx
index 9bc1038..2230d9f 100644
--- a/components/templates/clerk-reset-password.tsx
+++ b/components/templates/clerk-reset-password.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
@@ -53,7 +53,7 @@ export default function ClerkResetPasswordPreview() {
       footer={
         <>
           Need another code?{' '}
-          <Link href="/templates/authentication/clerk-auth?flow=forgot-password">
+          <Link href="/forgot-password">
             Restart reset
           </Link>
           .
@@ -112,7 +112,7 @@ export default function ClerkResetPasswordPreview() {
 
             <FieldDescription className="text-center">
               Back to{' '}
-              <Link href="/templates/authentication/clerk-auth?flow=sign-in">
+              <Link href="/sign-in">
                 sign in
               </Link>
             </FieldDescription>
diff --git a/components/templates/clerk-sign-in.tsx b/components/templates/clerk-sign-in.tsx
index 4b2b9c7..d569b5a 100644
--- a/components/templates/clerk-sign-in.tsx
+++ b/components/templates/clerk-sign-in.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Icons } from '@/components/ui/icons'
+import { Icons } from '@/components/templates/oauth-icons'
 import { Button } from '@/components/ui/button'
 import {
   Field,
@@ -52,7 +52,7 @@ export default function ClerkSignInPreview() {
       description={
         <>
           Clerk Elements style sign in.{' '}
-          <Link href="/templates/authentication/clerk-auth?flow=sign-up">
+          <Link href="/sign-up">
             Create an account
           </Link>
           .
@@ -89,7 +89,7 @@ export default function ClerkSignInPreview() {
                   Password
                 </FieldLabel>
                 <Link
-                  href="/templates/authentication/clerk-auth?flow=forgot-password"
+                  href="/forgot-password"
                   className="text-sm underline"
                 >
                   Forgot password?
@@ -145,7 +145,7 @@ export default function ClerkSignInPreview() {
 
             <FieldDescription className="text-center">
               Don&apos;t have an account?{' '}
-              <Link href="/templates/authentication/clerk-auth?flow=sign-up">
+              <Link href="/sign-up">
                 Sign up
               </Link>
             </FieldDescription>
diff --git a/components/templates/clerk-sign-up.tsx b/components/templates/clerk-sign-up.tsx
index 1a3a977..4e8bc30 100644
--- a/components/templates/clerk-sign-up.tsx
+++ b/components/templates/clerk-sign-up.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import { z } from 'zod'
 
-import { Icons } from '@/components/ui/icons'
+import { Icons } from '@/components/templates/oauth-icons'
 import { Button } from '@/components/ui/button'
 import {
   Field,
@@ -60,7 +60,7 @@ export default function ClerkSignUpPreview() {
       description={
         <>
           Already have an account?{' '}
-          <Link href="/templates/authentication/clerk-auth?flow=sign-in">
+          <Link href="/sign-in">
             Sign in
           </Link>
           .
@@ -171,7 +171,7 @@ export default function ClerkSignUpPreview() {
 
             <FieldDescription className="text-center">
               Need to recover access?{' '}
-              <Link href="/templates/authentication/clerk-auth?flow=forgot-password">
+              <Link href="/forgot-password">
                 Reset password
               </Link>
             </FieldDescription>
diff --git a/components/templates/code-viewer.tsx b/components/templates/code-viewer.tsx
deleted file mode 100644
index bdd908b..0000000
--- a/components/templates/code-viewer.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { Highlight, themes } from 'prism-react-renderer'
-import { toast } from 'sonner'
-import { Files } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-
-interface CodeViewerProps {
-  filename: string
-}
-
-export function CodeViewer({ filename }: CodeViewerProps) {
-  const [code, setCode] = useState<string>('')
-  const [error, setError] = useState<string>('')
-  const [isLoading, setIsLoading] = useState(true)
-
-  useEffect(() => {
-    async function fetchCode() {
-      try {
-        setIsLoading(true)
-        const response = await fetch(`/api/file/${filename}`)
-        const data = await response.json()
-
-        if (response.ok) {
-          setCode(data.content)
-        } else {
-          setError(data.error || 'Failed to load code')
-        }
-      } catch (err) {
-        setError('Failed to fetch code')
-      } finally {
-        setIsLoading(false)
-      }
-    }
-
-    if (filename) {
-      fetchCode()
-    }
-  }, [filename])
-
-  if (error) {
-    return (
-      <div className="p-4 text-red-500 bg-red-50 rounded-lg">
-        <h3 className="font-semibold">Error Loading Code</h3>
-        <p>{error}</p>
-      </div>
-    )
-  }
-
-  if (isLoading) {
-    return (
-      <div className="p-4 text-gray-500">Loading code for {filename}...</div>
-    )
-  }
-
-  return (
-    <div className="relative max-w-xs md:max-w-none">
-      <Button
-        className="absolute right-2 top-2"
-        variant="secondary"
-        size="icon"
-        onClick={() => {
-          navigator.clipboard.writeText(code)
-          toast.success('Code copied to clipboard!')
-        }}
-      >
-        <Files />
-      </Button>
-      <Highlight code={code} language="tsx" theme={themes.oneDark}>
-        {({ className, style, tokens, getLineProps, getTokenProps }: any) => (
-          <pre
-            className={`${className} w-full p-4 text-sm bg-gray-100 rounded-lg 
-          overflow-auto`}
-            style={style}
-          >
-            {tokens.map((line: any, i: number) => (
-              <div key={i} {...getLineProps({ line, key: i })}>
-                {line.map((token: any, key: any) => (
-                  <span key={key} {...getTokenProps({ token, key })} />
-                ))}
-              </div>
-            ))}
-          </pre>
-        )}
-      </Highlight>
-    </div>
-  )
-}
diff --git a/components/templates/contact.tsx b/components/templates/contact.tsx
index 71ab325..8915d43 100644
--- a/components/templates/contact.tsx
+++ b/components/templates/contact.tsx
@@ -5,14 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -59,77 +52,63 @@ export default function ContactFormPreview() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-              <div className="grid gap-4">
-                {/* Name Field */}
-                <FormField
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="name">Name</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="name"
-                          placeholder="John Doe"
-                          type="text"
-                          autoComplete="name"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <div className="grid gap-4">
+              {/* Name Field */}
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.name}
+              >
+                <FieldLabel htmlFor="name">Name</FieldLabel>
+                <Input
+                  id="name"
+                  placeholder="John Doe"
+                  type="text"
+                  autoComplete="name"
+                  aria-invalid={!!form.formState.errors.name}
+                  {...form.register('name')}
                 />
+                <FieldError errors={[form.formState.errors.name]} />
+              </Field>
 
-                {/* Email Field */}
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="email">Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="email"
-                          placeholder="johndoe@mail.com"
-                          type="email"
-                          autoComplete="email"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+              {/* Email Field */}
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.email}
+              >
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  placeholder="johndoe@mail.com"
+                  type="email"
+                  autoComplete="email"
+                  aria-invalid={!!form.formState.errors.email}
+                  {...form.register('email')}
                 />
+                <FieldError errors={[form.formState.errors.email]} />
+              </Field>
 
-                {/* Message Field */}
-                <FormField
-                  control={form.control}
-                  name="message"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="message">Message</FormLabel>
-                      <FormControl>
-                        <Textarea
-                          id="message"
-                          placeholder="Your message..."
-                          autoComplete="off"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+              {/* Message Field */}
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.message}
+              >
+                <FieldLabel htmlFor="message">Message</FieldLabel>
+                <Textarea
+                  id="message"
+                  placeholder="Your message..."
+                  autoComplete="off"
+                  aria-invalid={!!form.formState.errors.message}
+                  {...form.register('message')}
                 />
+                <FieldError errors={[form.formState.errors.message]} />
+              </Field>
 
-                <Button type="submit" className="w-full">
-                  Send Message
-                </Button>
-              </div>
-            </form>
-          </Form>
+              <Button type="submit" className="w-full">
+                Send Message
+              </Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
     </div>
diff --git a/components/templates/firebase-auth.tsx b/components/templates/firebase-auth.tsx
index 82e6305..80e3300 100644
--- a/components/templates/firebase-auth.tsx
+++ b/components/templates/firebase-auth.tsx
@@ -6,14 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -61,60 +54,50 @@ export default function FirebaseAuthPreview() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              <div className="grid gap-4">
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="email">Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="email"
-                          placeholder="hello@company.com"
-                          type="email"
-                          autoComplete="email"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="grid gap-4">
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.email}
+              >
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  placeholder="hello@company.com"
+                  type="email"
+                  autoComplete="email"
+                  aria-invalid={!!form.formState.errors.email}
+                  {...form.register('email')}
                 />
-                <FormField
-                  control={form.control}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <div className="flex justify-between items-center">
-                        <FormLabel htmlFor="password">Password</FormLabel>
-                        <Link href="#" className="text-sm underline">
-                          Forgot password?
-                        </Link>
-                      </div>
-                      <FormControl>
-                        <PasswordInput
-                          id="password"
-                          placeholder="******"
-                          autoComplete="current-password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+                <FieldError errors={[form.formState.errors.email]} />
+              </Field>
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.password}
+              >
+                <div className="flex justify-between items-center">
+                  <FieldLabel htmlFor="password">Password</FieldLabel>
+                  <Link href="#" className="text-sm underline">
+                    Forgot password?
+                  </Link>
+                </div>
+                <PasswordInput
+                  id="password"
+                  placeholder="******"
+                  autoComplete="current-password"
+                  aria-invalid={!!form.formState.errors.password}
+                  {...form.register('password')}
                 />
-                <Button type="submit" className="w-full">
-                  Sign in
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Continue with Google
-                </Button>
-              </div>
-            </form>
-          </Form>
+                <FieldError errors={[form.formState.errors.password]} />
+              </Field>
+              <Button type="submit" className="w-full">
+                Sign in
+              </Button>
+              <Button variant="outline" className="w-full">
+                Continue with Google
+              </Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
     </div>
diff --git a/components/templates/forgot-password.tsx b/components/templates/forgot-password.tsx
index 2ac40eb..c81955a 100644
--- a/components/templates/forgot-password.tsx
+++ b/components/templates/forgot-password.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
@@ -36,7 +36,7 @@ export default function ForgotPasswordPreview() {
       description="Enter your email and we will send you a reset link."
       footer={
         <>
-          Remembered your password? <Link href="/templates/authentication/sign-in">Back to sign in</Link>
+          Remembered your password? <Link href="/sign-in">Back to sign in</Link>
         </>
       }
     >
@@ -60,7 +60,7 @@ export default function ForgotPasswordPreview() {
             </Button>
           </Field>
           <FieldDescription className="text-center">
-            Need a new account? <Link href="/templates/authentication/sign-up">Create account</Link>
+            Need a new account? <Link href="/sign-up">Create account</Link>
           </FieldDescription>
         </FieldGroup>
       </form>
diff --git a/components/templates/login.tsx b/components/templates/login.tsx
deleted file mode 100644
index 7a8162a..0000000
--- a/components/templates/login.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { PasswordInput } from '@/components/ui/password-input'
-
-import { loginFormSchema } from '@/lib/validation-schemas'
-
-const formSchema = loginFormSchema
-
-export default function LoginPreview() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      email: '',
-      password: '',
-    },
-  })
-
-  async function onSubmit(values: z.infer<typeof formSchema>) {
-    try {
-      // Assuming an async login function
-      console.log(values)
-      toast(
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
-        </pre>,
-      )
-    } catch (error) {
-      console.error('Form submission error', error)
-      toast.error('Failed to submit the form. Please try again.')
-    }
-  }
-
-  return (
-    <div className="flex flex-col min-h-[50vh] h-full w-full items-center justify-center px-4">
-      <Card className="mx-auto max-w-sm">
-        <CardHeader>
-          <CardTitle className="text-2xl">Login</CardTitle>
-          <CardDescription>
-            Enter your email and password to login to your account.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-              <div className="grid gap-4">
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="email">Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="email"
-                          placeholder="johndoe@mail.com"
-                          type="email"
-                          autoComplete="email"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <FormField
-                  control={form.control}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <div className="flex justify-between items-center">
-                        <FormLabel htmlFor="password">Password</FormLabel>
-                        <Link
-                          href="#"
-                          className="ml-auto inline-block text-sm underline"
-                        >
-                          Forgot your password?
-                        </Link>
-                      </div>
-                      <FormControl>
-                        <PasswordInput
-                          id="password"
-                          placeholder="******"
-                          autoComplete="current-password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-                <Button type="submit" className="w-full">
-                  Login
-                </Button>
-                <Button variant="outline" className="w-full">
-                  Login with Google
-                </Button>
-              </div>
-            </form>
-          </Form>
-          <div className="mt-4 text-center text-sm">
-            Don&apos;t have an account?{' '}
-            <Link href="#" className="underline">
-              Sign up
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/components/templates/newsletter.tsx b/components/templates/newsletter.tsx
index f683abd..2b97db0 100644
--- a/components/templates/newsletter.tsx
+++ b/components/templates/newsletter.tsx
@@ -5,14 +5,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -64,36 +57,30 @@ export default function NewsletterFormPreview() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-              <div className="grid gap-4">
-                {/* Email Field */}
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="email">Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="email"
-                          placeholder="johndoe@mail.com"
-                          type="email"
-                          autoComplete="email"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <div className="grid gap-4">
+              {/* Email Field */}
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.email}
+              >
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  placeholder="johndoe@mail.com"
+                  type="email"
+                  autoComplete="email"
+                  aria-invalid={!!form.formState.errors.email}
+                  {...form.register('email')}
                 />
+                <FieldError errors={[form.formState.errors.email]} />
+              </Field>
 
-                <Button type="submit" className="w-full">
-                  Subscribe
-                </Button>
-              </div>
-            </form>
-          </Form>
+              <Button type="submit" className="w-full">
+                Subscribe
+              </Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
     </div>
diff --git a/components/templates/oauth-icons.tsx b/components/templates/oauth-icons.tsx
new file mode 100644
index 0000000..cc44890
--- /dev/null
+++ b/components/templates/oauth-icons.tsx
@@ -0,0 +1,21 @@
+type IconProps = React.HTMLAttributes<SVGElement>
+
+/** Brand marks for OAuth buttons. */
+export const Icons = {
+  google: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+      />
+    </svg>
+  ),
+  apple: (props: IconProps) => (
+    <svg role="img" viewBox="0 0 24 24" {...props}>
+      <path
+        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+        fill="currentColor"
+      />
+    </svg>
+  ),
+}
diff --git a/components/templates/previews.ts b/components/templates/previews.ts
new file mode 100644
index 0000000..9f28a46
--- /dev/null
+++ b/components/templates/previews.ts
@@ -0,0 +1,49 @@
+import type { ComponentType } from 'react'
+
+import BetterAuth from '@/components/templates/better-auth'
+import ClerkForgotPassword from '@/components/templates/clerk-forgot-password'
+import ClerkResetPassword from '@/components/templates/clerk-reset-password'
+import ClerkSignIn from '@/components/templates/clerk-sign-in'
+import ClerkSignUp from '@/components/templates/clerk-sign-up'
+import Contact from '@/components/templates/contact'
+import FirebaseAuth from '@/components/templates/firebase-auth'
+import ForgotPassword from '@/components/templates/forgot-password'
+import Newsletter from '@/components/templates/newsletter'
+import ResetPassword from '@/components/templates/reset-password'
+import SignIn from '@/components/templates/sign-in'
+import SignUp from '@/components/templates/sign-up'
+import SupabaseAuth from '@/components/templates/supabase-auth'
+
+type Preview = { page: ComponentType } | { flows: Record<string, ComponentType> }
+
+/** What the site renders for each template block, per flow for multi-page ones. */
+export const templatePreviews: Record<string, Preview> = {
+  'shadcn-auth': {
+    flows: {
+      'sign-in': SignIn,
+      'sign-up': SignUp,
+      'forgot-password': ForgotPassword,
+      'reset-password': ResetPassword,
+    },
+  },
+  'clerk-auth': {
+    flows: {
+      'sign-in': ClerkSignIn,
+      'sign-up': ClerkSignUp,
+      'forgot-password': ClerkForgotPassword,
+      'reset-password': ClerkResetPassword,
+    },
+  },
+  'supabase-auth': { page: SupabaseAuth },
+  'firebase-auth': { page: FirebaseAuth },
+  'better-auth': { page: BetterAuth },
+  contact: { page: Contact },
+  newsletter: { page: Newsletter },
+}
+
+export function getTemplatePreview(name: string, flowId?: string): ComponentType | undefined {
+  const preview = templatePreviews[name]
+  if (!preview) return undefined
+  if ('page' in preview) return preview.page
+  return flowId ? preview.flows[flowId] : undefined
+}
diff --git a/components/templates/register.tsx b/components/templates/register.tsx
deleted file mode 100644
index eaac39b..0000000
--- a/components/templates/register.tsx
+++ /dev/null
@@ -1,189 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { z } from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm } from 'react-hook-form'
-import { toast } from 'sonner'
-
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import { Button } from '@/components/ui/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { PasswordInput } from '@/components/ui/password-input'
-import { PhoneInput } from '@/components/ui/phone-input'
-
-import { registerFormSchema } from '@/lib/validation-schemas'
-
-const formSchema = registerFormSchema
-
-export default function RegisterPreview() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      name: '',
-      email: '',
-      phone: '',
-      password: '',
-      confirmPassword: '',
-    },
-  })
-
-  async function onSubmit(values: z.infer<typeof formSchema>) {
-    try {
-      // Assuming an async registration function
-      console.log(values)
-      toast(
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
-        </pre>,
-      )
-    } catch (error) {
-      console.error('Form submission error', error)
-      toast.error('Failed to submit the form. Please try again.')
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] h-full w-full items-center justify-center px-4">
-      <Card className="mx-auto max-w-sm">
-        <CardHeader>
-          <CardTitle className="text-2xl">Register</CardTitle>
-          <CardDescription>
-            Create a new account by filling out the form below.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-              <div className="grid gap-4">
-                {/* Name Field */}
-                <FormField
-                  control={form.control}
-                  name="name"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="name">Full Name</FormLabel>
-                      <FormControl>
-                        <Input id="name" placeholder="John Doe" {...field} />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {/* Email Field */}
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="email">Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="email"
-                          placeholder="johndoe@mail.com"
-                          type="email"
-                          autoComplete="email"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {/* Phone Field */}
-                <FormField
-                  control={form.control}
-                  name="phone"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="phone">Phone Number</FormLabel>
-                      <FormControl>
-                        <PhoneInput {...field} defaultCountry="TR" />
-                        {/* <Input
-                          id="phone"
-                          placeholder="555-123-4567"
-                          type="tel"
-                          autoComplete="tel"
-                          {...field}
-                        /> */}
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {/* Password Field */}
-                <FormField
-                  control={form.control}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="password">Password</FormLabel>
-                      <FormControl>
-                        <PasswordInput
-                          id="password"
-                          placeholder="******"
-                          autoComplete="new-password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {/* Confirm Password Field */}
-                <FormField
-                  control={form.control}
-                  name="confirmPassword"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="confirmPassword">
-                        Confirm Password
-                      </FormLabel>
-                      <FormControl>
-                        <PasswordInput
-                          id="confirmPassword"
-                          placeholder="******"
-                          autoComplete="new-password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <Button type="submit" className="w-full">
-                  Register
-                </Button>
-              </div>
-            </form>
-          </Form>
-          <div className="mt-4 text-center text-sm">
-            Already have an account?{' '}
-            <Link href="#" className="underline">
-              Login
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  )
-}
diff --git a/components/templates/reset-password.tsx b/components/templates/reset-password.tsx
index 83087d5..70822d5 100644
--- a/components/templates/reset-password.tsx
+++ b/components/templates/reset-password.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
@@ -43,7 +43,7 @@ export default function ResetPasswordPreview() {
       description="Create a new secure password for your account."
       footer={
         <>
-          Need to start over? <Link href="/templates/authentication/forgot-password">Request another link</Link>
+          Need to start over? <Link href="/forgot-password">Request another link</Link>
         </>
       }
     >
@@ -78,7 +78,7 @@ export default function ResetPasswordPreview() {
             </Button>
           </Field>
           <FieldDescription className="text-center">
-            Back to <Link href="/templates/authentication/sign-in">sign in</Link>
+            Back to <Link href="/sign-in">sign in</Link>
           </FieldDescription>
         </FieldGroup>
       </form>
diff --git a/components/templates/shadcn-auth.tsx b/components/templates/shadcn-auth.tsx
deleted file mode 100644
index d6c3ef7..0000000
--- a/components/templates/shadcn-auth.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { Link } from 'next-view-transitions'
-
-import { Button } from '@/components/ui/button'
-import { Field, FieldDescription, FieldGroup, FieldLabel, FieldSeparator } from '@/components/ui/field'
-import { Input } from '@/components/ui/input'
-import { PasswordInput } from '@/components/ui/password-input'
-import { BaseAuthShell } from '@/components/templates/base-auth-shell'
-
-export default function ShadcnAuthPreview() {
-  return (
-    <BaseAuthShell
-      title="Welcome to Acme Inc."
-      description={
-        <>
-          Shadcn starter. <Link href="/templates/authentication/sign-up">Create an account</Link>.
-        </>
-      }
-      showOauth
-      footer={
-        <>
-          By clicking continue, you agree to our <a href="#">Terms of Service</a> and{' '}
-          <a href="#">Privacy Policy</a>.
-        </>
-      }
-    >
-      <form>
-        <FieldGroup>
-          <Field>
-            <FieldLabel htmlFor="email">Email</FieldLabel>
-            <Input id="email" type="email" placeholder="m@example.com" required />
-          </Field>
-
-          <Field>
-            <div className="flex items-center justify-between gap-2">
-              <FieldLabel htmlFor="password">Password</FieldLabel>
-              <Link href="/templates/authentication/forgot-password" className="text-sm underline">
-                Forgot password?
-              </Link>
-            </div>
-            <PasswordInput id="password" placeholder="******" autoComplete="current-password" required />
-          </Field>
-
-          <Field>
-            <Button type="submit" className="w-full">
-              Login
-            </Button>
-          </Field>
-
-          <FieldSeparator>Or</FieldSeparator>
-
-          <FieldDescription className="text-center">
-            Don&apos;t have an account? <Link href="/templates/authentication/sign-up">Sign up</Link>
-          </FieldDescription>
-        </FieldGroup>
-      </form>
-    </BaseAuthShell>
-  )
-}
diff --git a/components/templates/sign-in.tsx b/components/templates/sign-in.tsx
index 1d5e791..2c2b5df 100644
--- a/components/templates/sign-in.tsx
+++ b/components/templates/sign-in.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
@@ -42,7 +42,7 @@ export default function SignInPreview() {
       title="Welcome to Acme Inc."
       description={
         <>
-          Don&apos;t have an account? <Link href="/templates/authentication/sign-up">Sign up</Link>
+          Don&apos;t have an account? <Link href="/sign-up">Sign up</Link>
         </>
       }
       showOauth
@@ -75,7 +75,7 @@ export default function SignInPreview() {
           <FieldSeparator>Or</FieldSeparator>
           <FieldDescription className="text-center">
             Need help signing in?{' '}
-            <Link href="/templates/authentication/forgot-password">Reset password</Link>
+            <Link href="/forgot-password">Reset password</Link>
           </FieldDescription>
         </FieldGroup>
       </form>
diff --git a/components/templates/sign-up.tsx b/components/templates/sign-up.tsx
index 9885979..c957457 100644
--- a/components/templates/sign-up.tsx
+++ b/components/templates/sign-up.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Link } from 'next-view-transitions'
+import Link from 'next/link'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Loader2 } from 'lucide-react'
 import { useForm } from 'react-hook-form'
@@ -54,7 +54,7 @@ export default function SignUpPreview() {
       title="Create account"
       description={
         <>
-          Already have an account? <Link href="/templates/authentication/sign-in">Sign in</Link>
+          Already have an account? <Link href="/sign-in">Sign in</Link>
         </>
       }
       showOauth
@@ -118,7 +118,7 @@ export default function SignUpPreview() {
           </Field>
           <FieldSeparator>Or</FieldSeparator>
           <FieldDescription className="text-center">
-            Need account access help? <Link href="/templates/authentication/forgot-password">Reset here</Link>
+            Need account access help? <Link href="/forgot-password">Reset here</Link>
           </FieldDescription>
         </FieldGroup>
       </form>
diff --git a/components/templates/supabase-auth.tsx b/components/templates/supabase-auth.tsx
index 22abd73..bced169 100644
--- a/components/templates/supabase-auth.tsx
+++ b/components/templates/supabase-auth.tsx
@@ -6,14 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import { Button } from '@/components/ui/button'
 import {
   Card,
@@ -61,60 +54,50 @@ export default function SupabaseAuthPreview() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-              <div className="grid gap-4">
-                <FormField
-                  control={form.control}
-                  name="email"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <FormLabel htmlFor="email">Email</FormLabel>
-                      <FormControl>
-                        <Input
-                          id="email"
-                          placeholder="hello@company.com"
-                          type="email"
-                          autoComplete="email"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+            <div className="grid gap-4">
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.email}
+              >
+                <FieldLabel htmlFor="email">Email</FieldLabel>
+                <Input
+                  id="email"
+                  placeholder="hello@company.com"
+                  type="email"
+                  autoComplete="email"
+                  aria-invalid={!!form.formState.errors.email}
+                  {...form.register('email')}
                 />
-                <FormField
-                  control={form.control}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem className="grid gap-2">
-                      <div className="flex justify-between items-center">
-                        <FormLabel htmlFor="password">Password</FormLabel>
-                        <Link href="#" className="text-sm underline">
-                          Forgot password?
-                        </Link>
-                      </div>
-                      <FormControl>
-                        <PasswordInput
-                          id="password"
-                          placeholder="******"
-                          autoComplete="current-password"
-                          {...field}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
+                <FieldError errors={[form.formState.errors.email]} />
+              </Field>
+              <Field
+                className="grid gap-2"
+                data-invalid={!!form.formState.errors.password}
+              >
+                <div className="flex justify-between items-center">
+                  <FieldLabel htmlFor="password">Password</FieldLabel>
+                  <Link href="#" className="text-sm underline">
+                    Forgot password?
+                  </Link>
+                </div>
+                <PasswordInput
+                  id="password"
+                  placeholder="******"
+                  autoComplete="current-password"
+                  aria-invalid={!!form.formState.errors.password}
+                  {...form.register('password')}
                 />
-                <Button type="submit" className="w-full">
-                  Sign in
-                </Button>
-                <Button type="button" variant="secondary" className="w-full">
-                  Send magic link
-                </Button>
-              </div>
-            </form>
-          </Form>
+                <FieldError errors={[form.formState.errors.password]} />
+              </Field>
+              <Button type="submit" className="w-full">
+                Sign in
+              </Button>
+              <Button type="button" variant="secondary" className="w-full">
+                Send magic link
+              </Button>
+            </div>
+          </form>
         </CardContent>
       </Card>
     </div>
diff --git a/components/templates/template-block-viewer.tsx b/components/templates/template-block-viewer.tsx
index fc2e1c9..3c7f095 100644
--- a/components/templates/template-block-viewer.tsx
+++ b/components/templates/template-block-viewer.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import {
   Check,
   ChevronRight,
@@ -18,16 +19,21 @@ import { Highlight, themes } from 'prism-react-renderer'
 import { toast } from 'sonner'
 
 import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { Button, buttonVariants } from '@/components/ui/button'
 import { Separator } from '@/components/ui/separator'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import type { TemplateFlow } from '@/constants/templates'
+import {
+  getRegistryItem,
+  installCommand,
+  registryItemUrl,
+} from '@/lib/registry-catalog'
 
 type ViewerTab = 'preview' | 'code'
 type Device = 'desktop' | 'tablet' | 'mobile'
 
 type TemplateCodeFile = {
-  filename: string
-  label: string
+  /** Where the file lands in the user's project. */
   path: string
 }
 
@@ -48,18 +54,22 @@ type FileLeafNode = {
 type FileNode = FolderNode | FileLeafNode
 
 interface TemplateBlockViewerProps {
-  slug: string
-  description?: string
-  codeFiles?: TemplateCodeFile[]
-  pnpmBlockName?: string
+  /** Registry block name. */
+  name: string
+  /** Pages of a multi-page template; links to their routes switch the preview. */
+  flows?: TemplateFlow[]
   children: React.ReactNode
 }
 
-const defaultCodeFile = (slug: string): TemplateCodeFile => ({
-  filename: slug,
-  label: `${slug}.tsx`,
-  path: `components/templates/${slug}.tsx`,
-})
+/** Install location of a registry file, with shadcn's alias placeholders spelled out. */
+function installPath(file: { path: string; target?: string }) {
+  return (file.target ?? file.path)
+    .replace(/^@components\//, 'components/')
+    .replace(/^@ui\//, 'components/ui/')
+    .replace(/^@lib\//, 'lib/')
+    .replace(/^@hooks\//, 'hooks/')
+    .replace(/^~\//, '')
+}
 
 function buildFileTree(files: TemplateCodeFile[]) {
   const root: FolderNode = {
@@ -136,7 +146,7 @@ function FileTreeItem({
           onClick={() => onSelect(node.file)}
           className={cn(
             'flex w-full items-center gap-2 rounded-none py-1.5 text-left text-sm transition-colors',
-            node.file.filename === activeFile
+            node.file.path === activeFile
               ? 'bg-muted/70 font-medium text-foreground'
               : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
           )}
@@ -179,33 +189,41 @@ function FileTreeItem({
 }
 
 export function TemplateBlockViewer({
-  slug,
-  description,
-  codeFiles,
-  pnpmBlockName,
+  name,
+  flows,
   children,
 }: TemplateBlockViewerProps) {
-  const files = useMemo(() => codeFiles ?? [defaultCodeFile(slug)], [codeFiles, slug])
+  const router = useRouter()
+  const item = getRegistryItem(name)
+  const description = item?.description
+  const files = useMemo<TemplateCodeFile[]>(
+    () => (item?.files ?? []).map((file) => ({ path: installPath(file) })),
+    [item],
+  )
   const fileTree = useMemo(() => buildFileTree(files), [files])
 
   const [view, setView] = useState<ViewerTab>('preview')
   const [device, setDevice] = useState<Device>('desktop')
   const [previewKey, setPreviewKey] = useState(0)
-  const [activeFile, setActiveFile] = useState<TemplateCodeFile>(files[0])
+  const [activeFile, setActiveFile] = useState<TemplateCodeFile | undefined>(files[0])
   const [codeByFile, setCodeByFile] = useState<Record<string, string>>({})
   const [isLoadingCode, setIsLoadingCode] = useState(false)
   const [codeError, setCodeError] = useState('')
   const [isCommandCopied, setIsCommandCopied] = useState(false)
 
-  const cliCommand = `pnpm dlx shadcn@latest add ${pnpmBlockName ?? slug}`
+  const cliCommand = installCommand(name)
   const previewWidth = device === 'desktop' ? 100 : device === 'tablet' ? 60 : 30
-  const v0Url = useMemo(
-    () =>
-      `https://v0.dev/chat?q=${encodeURIComponent(
-        `Create a ${slug} authentication template with shadcn/ui and clean TypeScript.`
-      )}`,
-    [slug]
-  )
+  const v0Url = `https://v0.dev/chat/api/open?url=${encodeURIComponent(registryItemUrl(name))}`
+
+  // Flow pages link to their real routes (/sign-up, ...); in the preview those
+  // links switch flows instead of leaving the site.
+  const handlePreviewClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const anchor = (event.target as HTMLElement).closest('a')
+    const flow = flows?.find((entry) => entry.route === anchor?.getAttribute('href'))
+    if (!flow) return
+    event.preventDefault()
+    router.push(`?flow=${flow.id}`, { scroll: false })
+  }
 
   useEffect(() => {
     setActiveFile(files[0])
@@ -214,25 +232,21 @@ export function TemplateBlockViewer({
   useEffect(() => {
     let ignore = false
 
-    async function fetchCode() {
-      if (codeByFile[activeFile.filename]) {
-        setCodeError('')
-        return
-      }
-
+    async function fetchItem() {
       setIsLoadingCode(true)
       setCodeError('')
 
       try {
-        const response = await fetch(`/api/file/${activeFile.filename}`)
-        const data = await response.json()
-
-        if (!response.ok) {
-          throw new Error(data.error || 'Failed to load code.')
-        }
+        // The built registry item carries every file's content.
+        const response = await fetch(`/r/${name}.json`)
+        if (!response.ok) throw new Error('Failed to load code.')
+        const built: { files: { path: string; target?: string; content?: string }[] } =
+          await response.json()
 
         if (!ignore) {
-          setCodeByFile((prev) => ({ ...prev, [activeFile.filename]: data.content }))
+          setCodeByFile(
+            Object.fromEntries(built.files.map((file) => [installPath(file), file.content ?? ''])),
+          )
         }
       } catch (error) {
         if (!ignore) {
@@ -245,14 +259,14 @@ export function TemplateBlockViewer({
       }
     }
 
-    void fetchCode()
+    void fetchItem()
 
     return () => {
       ignore = true
     }
-  }, [activeFile, codeByFile])
+  }, [name])
 
-  const activeCode = codeByFile[activeFile.filename]
+  const activeCode = activeFile ? codeByFile[activeFile.path] : undefined
 
   return (
     <div className="group/block-view-wrapper flex min-w-0 flex-col gap-4">
@@ -342,11 +356,14 @@ export function TemplateBlockViewer({
             <span>{cliCommand}</span>
           </Button>
 
-          <Button size="sm" className="h-8 px-3 text-xs" asChild>
-            <a href={v0Url} target="_blank" rel="noreferrer">
-              Open in v0
-            </a>
-          </Button>
+          <a
+            href={v0Url}
+            target="_blank"
+            rel="noreferrer"
+            className={cn(buttonVariants({ size: 'sm' }), 'h-8 px-3 text-xs')}
+          >
+            Open in v0
+          </a>
         </div>
       </div>
 
@@ -360,7 +377,10 @@ export function TemplateBlockViewer({
                 className="relative h-full overflow-y-auto border-r transition-[width] duration-200 ease-linear"
                 style={{ width: `${previewWidth}%` }}
               >
-                <div className="flex min-h-full items-center justify-center px-6 py-10 md:px-8 md:py-14">
+                <div
+                  className="flex min-h-full items-center justify-center px-6 py-10 md:px-8 md:py-14"
+                  onClickCapture={handlePreviewClick}
+                >
                   {children}
                 </div>
               </div>
@@ -378,7 +398,7 @@ export function TemplateBlockViewer({
                     key={node.path}
                     node={node}
                     depth={0}
-                    activeFile={activeFile.filename}
+                    activeFile={activeFile?.path ?? ''}
                     onSelect={setActiveFile}
                   />
                 ))}
@@ -389,7 +409,7 @@ export function TemplateBlockViewer({
           <div className="flex min-w-0 flex-1 flex-col">
             <div className="flex h-12 items-center gap-2 border-b px-4 py-2 text-sm text-muted-foreground">
               <File className="size-4" />
-              <span className="truncate">{activeFile.path}</span>
+              <span className="truncate">{activeFile?.path}</span>
               {!!activeCode && (
                 <Button
                   size="icon"
diff --git a/components/templates/templates-sidebar.tsx b/components/templates/templates-sidebar.tsx
index 1e37a8e..a3ddbf5 100644
--- a/components/templates/templates-sidebar.tsx
+++ b/components/templates/templates-sidebar.tsx
@@ -15,123 +15,71 @@ import {
   SidebarMenuSubButton,
   SidebarMenuSubItem,
 } from '@/components/ui/sidebar'
+import { findTemplate, resolveFlow, templateCategories } from '@/constants/templates'
 
-import { templates } from '@/constants/templates'
+type SidebarEntry = {
+  title: string
+  path: string
+  sub: { key: string; title: string; path: string; isActive: boolean }[]
+}
 
 export function AppSidebar() {
   const pathname = usePathname()
   const searchParams = useSearchParams()
-  const parts = pathname.split('/').filter(Boolean)
-  const selectedCategory = parts[1]
-  const selectedSlug = parts[2]
-  const selectedFlow = searchParams.get('flow') ?? 'sign-in'
-
-  const visibleTemplates = selectedSlug
-    ? templates.filter((item) => item.path.endsWith(`/${selectedCategory}`))
-    : templates
-
-  const isShadcnAuthPage =
-    selectedCategory === 'authentication' && selectedSlug === 'shadcn-auth'
-  const isClerkAuthPage =
-    selectedCategory === 'authentication' && selectedSlug === 'clerk-auth'
-
-  const shadcnAuthFlows = [
-    {
-      title: 'Login',
-      path: '/templates/authentication/shadcn-auth?flow=sign-in',
-      flow: 'sign-in',
-    },
-    {
-      title: 'Sign Up',
-      path: '/templates/authentication/shadcn-auth?flow=sign-up',
-      flow: 'sign-up',
-    },
-    {
-      title: 'Forgot Password',
-      path: '/templates/authentication/shadcn-auth?flow=forgot-password',
-      flow: 'forgot-password',
-    },
-    {
-      title: 'Reset Password',
-      path: '/templates/authentication/shadcn-auth?flow=reset-password',
-      flow: 'reset-password',
-    },
-  ]
-
-  const clerkAuthFlows = [
-    {
-      title: 'Login',
-      path: '/templates/authentication/clerk-auth?flow=sign-in',
-      flow: 'sign-in',
-    },
-    {
-      title: 'Sign Up',
-      path: '/templates/authentication/clerk-auth?flow=sign-up',
-      flow: 'sign-up',
-    },
-    {
-      title: 'Forgot Password',
-      path: '/templates/authentication/clerk-auth?flow=forgot-password',
-      flow: 'forgot-password',
-    },
-    {
-      title: 'Reset Password',
-      path: '/templates/authentication/clerk-auth?flow=reset-password',
-      flow: 'reset-password',
-    },
-  ]
+  const [, categoryId, name] = pathname.split('/').filter(Boolean)
+  const template = categoryId && name ? findTemplate(categoryId, name) : undefined
+  const activeFlow = template && resolveFlow(template, searchParams.get('flow') ?? undefined)
 
-  const selectedFlowTemplate = isShadcnAuthPage
-    ? {
-        title: 'Shadcn Auth Pages',
-        path: '/templates/authentication/shadcn-auth?flow=sign-in',
-        sub: shadcnAuthFlows,
-      }
-    : isClerkAuthPage
-      ? {
-          title: 'Clerk Auth Pages',
-          path: '/templates/authentication/clerk-auth?flow=sign-in',
-          sub: clerkAuthFlows,
-        }
-      : null
+  // A multi-page template lists its flows; otherwise list templates by category.
+  const entries: SidebarEntry[] = template?.flows
+    ? [
+        {
+          title: `${template.title} Pages`,
+          path: template.path,
+          sub: template.flows.map((flow) => ({
+            key: flow.id,
+            title: flow.title,
+            path: `${template.path}?flow=${flow.id}`,
+            isActive: flow.id === activeFlow?.id,
+          })),
+        },
+      ]
+    : templateCategories
+        .filter((category) => !template || category.id === categoryId)
+        .map((category) => ({
+          title: category.title,
+          path: category.path,
+          sub: category.templates.map((entry) => ({
+            key: entry.name,
+            title: entry.title,
+            path: entry.path,
+            isActive: pathname === entry.path,
+          })),
+        }))
 
   return (
     <Sidebar className="sticky top-4 h-[calc(100svh-6.5rem)]">
       <SidebarContent className="h-full">
         <SidebarGroup className="h-full">
           <SidebarMenu>
-            {(selectedFlowTemplate
-              ? [selectedFlowTemplate]
-              : visibleTemplates
-            ).map((item) => (
+            {entries.map((item) => (
               <SidebarMenuItem key={item.title}>
-                <SidebarMenuButton asChild>
-                  <Link href={item.path} className="font-semibold">
-                    {item.title}
-                  </Link>
+                <SidebarMenuButton className="font-semibold" render={<Link href={item.path} />}>
+                  {item.title}
                 </SidebarMenuButton>
-                <SidebarMenuBadge className="border">
-                  {item.sub.length}
-                </SidebarMenuBadge>
-                {item.sub?.length ? (
-                  <SidebarMenuSub>
-                    {item.sub.map((subItem) => (
-                      <SidebarMenuSubItem key={subItem.title}>
-                        <SidebarMenuSubButton
-                          asChild
-                          isActive={
-                            selectedFlowTemplate
-                              ? 'flow' in subItem &&
-                                subItem.flow === selectedFlow
-                              : pathname === subItem.path
-                          }
-                        >
-                          <Link href={subItem.path}>{subItem.title}</Link>
-                        </SidebarMenuSubButton>
-                      </SidebarMenuSubItem>
-                    ))}
-                  </SidebarMenuSub>
-                ) : null}
+                <SidebarMenuBadge className="border">{item.sub.length}</SidebarMenuBadge>
+                <SidebarMenuSub>
+                  {item.sub.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.key}>
+                      <SidebarMenuSubButton
+                        isActive={subItem.isActive}
+                        render={<Link href={subItem.path} />}
+                      >
+                        {subItem.title}
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
               </SidebarMenuItem>
             ))}
           </SidebarMenu>
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
index 8dcf9b6..997f5b8 100644
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@@ -1,57 +1,71 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
-
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
 import { cn } from "@/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
 
-const Accordion = AccordionPrimitive.Root
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
 
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
 
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
-      {children}
-      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
index 77fde46..a20f4eb 100644
--- a/components/ui/avatar.tsx
+++ b/components/ui/avatar.tsx
@@ -1,50 +1,108 @@
-'use client'
-
-import * as React from 'react'
-import * as AvatarPrimitive from '@radix-ui/react-avatar'
-
-import { cn } from '@/lib/utils'
-
-const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
-      className,
-    )}
-    {...props}
-  />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
-
-const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn('aspect-square h-full w-full', className)}
-    {...props}
-  />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
-
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      'flex h-full w-full items-center justify-center rounded-full bg-muted',
-      className,
-    )}
-    {...props}
-  />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
-
-export { Avatar, AvatarImage, AvatarFallback }
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
index cfdc9ac..ce57d3a 100644
--- a/components/ui/breadcrumb.tsx
+++ b/components/ui/breadcrumb.tsx
@@ -1,108 +1,117 @@
 import * as React from "react"
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
-import { Slot } from "@radix-ui/react-slot"
-
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
 import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
 
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
 
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
 
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+function BreadcrumbLink({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"a">) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn("transition-colors hover:text-foreground", className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "breadcrumb-link",
+    },
+  })
+}
 
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
   return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
+}
 
-const BreadcrumbSeparator = ({
+function BreadcrumbSeparator({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRightIcon />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? (
+        <ChevronRightIcon />
+      )}
+    </li>
+  )
+}
 
-const BreadcrumbEllipsis = ({
+function BreadcrumbEllipsis({
   className,
   ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <DotsHorizontalIcon className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        "flex size-5 items-center justify-center [&>svg]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon
+      />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
 
 export {
   Breadcrumb,
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 1250abe..bdeb434 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -1,120 +1,84 @@
-import * as React from 'react'
-import { Slot, Slottable } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+import { IoIosArrowRoundForward } from "react-icons/io"
 
-import { cn } from '@/lib/utils'
-import { SmileIcon } from '@/components/smile'
-
-import { IoIosArrowRoundForward } from 'react-icons/io'
+import { SmileIcon } from "@/components/smile"
+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',
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     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',
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         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',
-        arrow: 'group',
-        smile: 'group',
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+        // Site-specific effects (header, hero); not part of the stock button.
+        arrow: "group",
+        smile: "group",
         expandIcon:
-          'group relative text-primary-foreground bg-primary hover:bg-primary/90',
+          "group relative bg-primary text-primary-foreground hover:bg-primary/90",
         ringHover:
-          'bg-primary text-primary-foreground transition-all duration-300 hover:bg-primary/90 hover:ring-2 hover:ring-primary/90 hover:ring-offset-2',
+          "bg-primary text-primary-foreground transition-all duration-300 hover:bg-primary/90 hover:ring-2 hover:ring-primary/90 hover:ring-offset-2",
         shine:
-          'text-primary-foreground animate-shine bg-gradient-to-r from-primary via-primary/75 to-primary bg-[length:400%_100%] ',
+          "animate-shine bg-gradient-to-r from-primary via-primary/75 to-primary bg-[length:400%_100%] text-primary-foreground",
         gooeyRight:
-          'text-primary-foreground relative bg-primary z-0 overflow-hidden transition-all duration-500 before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-gradient-to-r from-zinc-400 before:transition-transform before:duration-1000  hover:before:translate-x-[0%] hover:before:translate-y-[0%] ',
+          "relative z-0 overflow-hidden bg-primary text-primary-foreground transition-all duration-500 before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-gradient-to-r from-zinc-400 before:transition-transform before:duration-1000 hover:before:translate-x-[0%] hover:before:translate-y-[0%]",
         gooeyLeft:
-          'text-primary-foreground relative bg-primary z-0 overflow-hidden transition-all duration-500 after:absolute after:inset-0 after:-z-10 after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5] after:rounded-[100%] after:bg-gradient-to-l from-zinc-400 after:transition-transform after:duration-1000  hover:after:translate-x-[0%] hover:after:translate-y-[0%] ',
+          "relative z-0 overflow-hidden bg-primary text-primary-foreground transition-all duration-500 after:absolute after:inset-0 after:-z-10 after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5] after:rounded-[100%] after:bg-gradient-to-l from-zinc-400 after:transition-transform after:duration-1000 hover:after:translate-x-[0%] hover:after:translate-y-[0%]",
         linkHover1:
-          'relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-full after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300',
+          "relative after:absolute after:bottom-2 after:h-[1px] after:w-full after:origin-bottom-left after:scale-x-100 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-right hover:after:scale-x-0",
         linkHover2:
-          'relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-full after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300',
+          "relative after:absolute after:bottom-2 after:h-[1px] after:w-full after:origin-bottom-right after:scale-x-0 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100",
       },
       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: 'h-9 w-9',
+        default:
+          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-9",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
     },
-  },
+  }
 )
 
-interface IconProps {
-  Icon: React.ElementType
-  iconPlacement: 'left' | 'right'
-}
-
-interface IconRefProps {
-  Icon?: never
-  iconPlacement?: undefined
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  children,
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    >
+      {children}
+      {variant === "arrow" && (
+        <IoIosArrowRoundForward className="text-xl text-muted-foreground transition-transform duration-300 group-hover:-rotate-45" />
+      )}
+      {variant === "smile" && <SmileIcon />}
+    </ButtonPrimitive>
+  )
 }
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-export type ButtonIconProps = IconProps | IconRefProps
-
-const Button = React.forwardRef<
-  HTMLButtonElement,
-  ButtonProps & ButtonIconProps
->(
-  (
-    {
-      className,
-      variant,
-      size,
-      asChild = false,
-      children,
-      Icon,
-      iconPlacement,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : 'button'
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      >
-        {Icon && iconPlacement === 'left' && (
-          <div className="w-0 translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100">
-            <Icon />
-          </div>
-        )}
-        <Slottable>{children}</Slottable>
-        {Icon && iconPlacement === 'right' && (
-          <div className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100">
-            <Icon />
-          </div>
-        )}
-        {/* {children} */}
-        {variant === 'arrow' && (
-          <IoIosArrowRoundForward className="text-muted-foreground text-xl transition-transform duration-300 group-hover:-rotate-45" />
-        )}
-        {variant === 'smile' && <SmileIcon />}
-      </Comp>
-    )
-  },
-)
-Button.displayName = 'Button'
-
 export { Button, buttonVariants }
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
index ec31625..91d0d96 100644
--- a/components/ui/calendar.tsx
+++ b/components/ui/calendar.tsx
@@ -5,7 +5,7 @@ import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
-} from '@radix-ui/react-icons'
+} from 'lucide-react'
 import { DayPicker } from 'react-day-picker'
 
 import { cn } from '@/lib/utils'
diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx
index eff289e..dbf5626 100644
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -1,30 +1,28 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
+import { cn } from "@/lib/utils"
+import { CheckIcon } from "lucide-react"
 
-import { cn } from '@/lib/utils'
-
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}
+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className
+      )}
+      {...props}
     >
-      <CheckIcon className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
+      >
+        <CheckIcon
+        />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
 
 export { Checkbox }
diff --git a/components/ui/color-picker.tsx b/components/ui/color-picker.tsx
index a3bd4bb..65bce0f 100644
--- a/components/ui/color-picker.tsx
+++ b/components/ui/color-picker.tsx
@@ -15,6 +15,8 @@ import {
 
 type PickerFormat = 'hex' | 'rgb' | 'hsl'
 
+const FORMAT_LABELS: Record<PickerFormat, string> = { hex: 'Hex', rgb: 'RGB', hsl: 'HSL' }
+
 type Rgb = { r: number; g: number; b: number }
 type Hsv = { h: number; s: number; v: number }
 
@@ -421,9 +423,10 @@ export function ColorPicker({
           }}
         />
 
-        <Select value={format} onValueChange={(value) => setFormat(value as PickerFormat)}>
+        <Select value={format} onValueChange={(value) => setFormat((value ?? 'hex') as PickerFormat)}>
           <SelectTrigger className="w-[78px]">
-            <SelectValue />
+            {/* Explicit label: Base UI selects show the raw value otherwise. */}
+            <SelectValue>{FORMAT_LABELS[format]}</SelectValue>
           </SelectTrigger>
           <SelectContent>
             <SelectItem value="hex">Hex</SelectItem>
@@ -453,7 +456,7 @@ export function ColorPicker({
         ))}
       </div>
 
-      <style jsx global>{`
+      <style>{`
         .figma-range::-webkit-slider-thumb {
           -webkit-appearance: none;
           appearance: none;
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
index c52980e..67ddc40 100644
--- a/components/ui/command.tsx
+++ b/components/ui/command.tsx
@@ -1,146 +1,187 @@
 "use client"
 
 import * as React from "react"
-import { type DialogProps } from "@radix-ui/react-dialog"
-import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
 import { Command as CommandPrimitive } from "cmdk"
-
 import { cn } from "@/lib/utils"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
 
-interface CommandDialogProps extends DialogProps {}
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  InputGroup,
+  InputGroupAddon,
+} from "@/components/ui/input-group"
+import { SearchIcon, CheckIcon } from "lucide-react"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: Omit<React.ComponentProps<typeof Dialog>, "children"> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+  children: React.ReactNode
+}) {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn(
+          "top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0",
+          className
+        )}
+        showCloseButton={showCloseButton}
+      >
+        {children}
       </DialogContent>
     </Dialog>
   )
 }
 
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div data-slot="command-input-wrapper" className="p-1 pb-0">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="size-4 shrink-0 opacity-50" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none",
         className
       )}
       {...props}
     />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
+  )
+}
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName
+function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn("py-6 text-center text-sm", className)}
+      {...props}
+    />
+  )
+}
 
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    )}
-    {...props}
-  />
-))
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("-mx-1 h-px w-auto bg-border", className)}
+      {...props}
+    />
+  )
+}
 
-CommandItem.displayName = CommandPrimitive.Item.displayName
+function CommandItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  )
+}
 
-const CommandShortcut = ({
+function CommandShortcut({
   className,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<"span">) {
   return (
     <span
+      data-slot="command-shortcut"
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
         className
       )}
       {...props}
     />
   )
 }
-CommandShortcut.displayName = "CommandShortcut"
 
 export {
   Command,
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
deleted file mode 100644
index 654810a..0000000
--- a/components/ui/context-menu.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
-
-import { cn } from "@/lib/utils"
-
-const ContextMenu = ContextMenuPrimitive.Root
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-
-const ContextMenuGroup = ContextMenuPrimitive.Group
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-
-const ContextMenuSub = ContextMenuPrimitive.Sub
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 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",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 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",
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}
diff --git a/components/ui/credit-card.md b/components/ui/credit-card.md
deleted file mode 100644
index f2afcfc..0000000
--- a/components/ui/credit-card.md
+++ /dev/null
@@ -1,153 +0,0 @@
-# Credit Card Component
-
-A beautiful, interactive credit card component with flip animation and real-time validation.
-
-## Usage
-
-```tsx
-import { CreditCard } from '@/components/ui/credit-card'
-
-function PaymentForm() {
-  const [creditCard, setCreditCard] = useState({
-    cardholderName: '',
-    cardNumber: '',
-    expiryMonth: '',
-    expiryYear: '',
-    cvv: '',
-    cvvLabel: 'CVC' as const
-  })
-
-  return (
-    <CreditCard
-      value={creditCard}
-      onChange={setCreditCard}
-    />
-  )
-}
-```
-
-## Features
-
-- Visual credit card design with chip and icons
-- Card flip animation for CVC/CVV entry
-- Real-time card number formatting
-- Selectable CVC/CCV labels
-- Mobile responsive design
-- International format support
-- TypeScript support
-
-## Installation
-
-```bash
-npx shadcn-ui@latest add credit-card
-```
-
-## Dependencies
-
-- framer-motion
-- lucide-react
-- @/components/ui/card
-- @/components/ui/input
-- @/components/ui/select
-
-## Props
-
-### CreditCardValue
-
-```tsx
-interface CreditCardValue {
-  cardholderName: string
-  cardNumber: string
-  expiryMonth: string
-  expiryYear: string
-  cvv: string
-  cvvLabel: 'CCV' | 'CVC'
-}
-```
-
-### CreditCardProps
-
-```tsx
-interface CreditCardProps {
-  value?: CreditCardValue
-  onChange?: (value: CreditCardValue) => void
-  className?: string
-}
-```
-
-## Examples
-
-### Basic Usage
-
-```tsx
-import { useState } from 'react'
-import { CreditCard } from '@/components/ui/credit-card'
-
-export default function PaymentPage() {
-  const [cardData, setCardData] = useState({
-    cardholderName: '',
-    cardNumber: '',
-    expiryMonth: '',
-    expiryYear: '',
-    cvv: '',
-    cvvLabel: 'CVC' as const
-  })
-
-  return (
-    <div className="max-w-md mx-auto p-6">
-      <h2 className="text-2xl font-bold mb-6">Payment Information</h2>
-      <CreditCard
-        value={cardData}
-        onChange={setCardData}
-      />
-    </div>
-  )
-}
-```
-
-### With Form Validation
-
-```tsx
-import { useState } from 'react'
-import { CreditCard } from '@/components/ui/credit-card'
-import { Button } from '@/components/ui/button'
-
-export default function CheckoutForm() {
-  const [cardData, setCardData] = useState({
-    cardholderName: '',
-    cardNumber: '',
-    expiryMonth: '',
-    expiryYear: '',
-    cvv: '',
-    cvvLabel: 'CVC' as const
-  })
-
-  const isValid = cardData.cardholderName.trim() && 
-                  cardData.cardNumber.trim() && 
-                  cardData.expiryMonth.trim() && 
-                  cardData.expiryYear.trim() && 
-                  cardData.cvv.trim()
-
-  const handleSubmit = () => {
-    if (isValid) {
-      console.log('Processing payment...', cardData)
-    }
-  }
-
-  return (
-    <div className="max-w-md mx-auto p-6 space-y-6">
-      <CreditCard
-        value={cardData}
-        onChange={setCardData}
-      />
-      <Button 
-        onClick={handleSubmit} 
-        disabled={!isValid}
-        className="w-full"
-      >
-        Process Payment
-      </Button>
-    </div>
-  )
-}
-```
diff --git a/components/ui/credit-card.tsx b/components/ui/credit-card.tsx
index 73d0747..5a37f51 100644
--- a/components/ui/credit-card.tsx
+++ b/components/ui/credit-card.tsx
@@ -571,7 +571,7 @@ function CreditCard({
             <label className="block text-sm font-medium mb-2">Month</label>
             <Select
               value={currentValue.expiryMonth}
-              onValueChange={(value) => handleInputChange('expiryMonth', value)}
+              onValueChange={(value) => handleInputChange('expiryMonth', value ?? '')}
             >
               <SelectTrigger
                 className={cn(
@@ -601,7 +601,7 @@ function CreditCard({
             <label className="block text-sm font-medium mb-2">Year</label>
             <Select
               value={currentValue.expiryYear}
-              onValueChange={(value) => handleInputChange('expiryYear', value)}
+              onValueChange={(value) => handleInputChange('expiryYear', value ?? '')}
             >
               <SelectTrigger
                 className={cn(
diff --git a/components/ui/cron-expression-builder.tsx b/components/ui/cron-expression-builder.tsx
index 7c74c31..87e38e8 100644
--- a/components/ui/cron-expression-builder.tsx
+++ b/components/ui/cron-expression-builder.tsx
@@ -49,8 +49,11 @@ const range = (max: number, pad = false) =>
     label: pad ? String(i).padStart(2, '0') : String(i),
   }))
 
+const dayLabel = (dayOfWeek: string) =>
+  DOW.find((item) => item.value === dayOfWeek)?.label ?? 'Custom day'
+
 function toHuman(value: CronValue) {
-  const day = DOW.find((item) => item.value === value.dayOfWeek)?.label ?? 'Custom day'
+  const day = dayLabel(value.dayOfWeek)
   return `Runs at ${value.hour.padStart(2, '0')}:${value.minute.padStart(2, '0')} on ${day}`
 }
 
@@ -76,9 +79,9 @@ export function CronExpressionBuilder({
       <div className="grid gap-3 md:grid-cols-3">
         <div className="space-y-1">
           <Label>Minute</Label>
-          <Select value={state.minute} onValueChange={(v) => setField('minute', v)}>
+          <Select value={state.minute} onValueChange={(v) => setField('minute', v ?? '0')}>
             <SelectTrigger>
-              <SelectValue />
+              <SelectValue>{state.minute.padStart(2, '0')}</SelectValue>
             </SelectTrigger>
             <SelectContent>
               {range(60, true).map((option) => (
@@ -91,9 +94,9 @@ export function CronExpressionBuilder({
         </div>
         <div className="space-y-1">
           <Label>Hour</Label>
-          <Select value={state.hour} onValueChange={(v) => setField('hour', v)}>
+          <Select value={state.hour} onValueChange={(v) => setField('hour', v ?? '0')}>
             <SelectTrigger>
-              <SelectValue />
+              <SelectValue>{state.hour.padStart(2, '0')}</SelectValue>
             </SelectTrigger>
             <SelectContent>
               {range(24, true).map((option) => (
@@ -106,9 +109,9 @@ export function CronExpressionBuilder({
         </div>
         <div className="space-y-1">
           <Label>Day of Week</Label>
-          <Select value={state.dayOfWeek} onValueChange={(v) => setField('dayOfWeek', v)}>
+          <Select value={state.dayOfWeek} onValueChange={(v) => setField('dayOfWeek', v ?? '*')}>
             <SelectTrigger>
-              <SelectValue />
+              <SelectValue>{dayLabel(state.dayOfWeek)}</SelectValue>
             </SelectTrigger>
             <SelectContent>
               {DOW.map((option) => (
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
index 95b0d38..0d57666 100644
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -1,122 +1,157 @@
 "use client"
 
 import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
-
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
 import { cn } from "@/lib/utils"
 
-const Dialog = DialogPrimitive.Root
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
 
-const DialogTrigger = DialogPrimitive.Trigger
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
 
-const DialogPortal = DialogPrimitive.Portal
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
 
-const DialogClose = DialogPrimitive.Close
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
 
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+    />
+  )
+}
 
-const DialogHeader = ({
+function DialogContent({
   className,
+  children,
+  showCloseButton = true,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-popover p-6 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 right-4"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
 
-const DialogFooter = ({
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
   className,
+  showCloseButton = false,
+  children,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
 
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
+  DialogTrigger,
 }
diff --git a/components/ui/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
index 242b07a..07aa9b9 100644
--- a/components/ui/dropdown-menu.tsx
+++ b/components/ui/dropdown-menu.tsx
@@ -1,205 +1,267 @@
 "use client"
 
 import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from "@radix-ui/react-icons"
-
+import { Menu as MenuPrimitive } from "@base-ui/react/menu"
 import { cn } from "@/lib/utils"
+import { ChevronRightIcon, CheckIcon } from "lucide-react"
+
+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+}
+
+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
+}
+
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="dropdown-menu-content"
+          className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const DropdownMenu = DropdownMenuPrimitive.Root
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
-
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto h-4 w-4" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
-
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 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",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn("w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
       sideOffset={sideOffset}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-        "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 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",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return (
+    <MenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
-
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
-
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="h-4 w-4 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
-
-const DropdownMenuShortcut = ({
+  )
+}
+
+function DropdownMenuRadioItem({
   className,
+  children,
+  inset,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon
+          />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
+        className
+      )}
       {...props}
     />
   )
 }
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
   DropdownMenu,
+  DropdownMenuPortal,
   DropdownMenuTrigger,
   DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
-  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
-  DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuSubContent,
 }
diff --git a/components/ui/emoji-picker.tsx b/components/ui/emoji-picker.tsx
index 8dfbc4a..f2d030c 100644
--- a/components/ui/emoji-picker.tsx
+++ b/components/ui/emoji-picker.tsx
@@ -2,7 +2,8 @@
 
 import * as React from 'react'
 
-import { Button } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import { Input } from '@/components/ui/input'
 import {
   Popover,
@@ -37,10 +38,11 @@ export function EmojiPicker({ value = '', onChange }: EmojiPickerProps) {
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button type="button" variant="outline" className="w-full justify-start">
-          {value || 'Pick an emoji'}
-        </Button>
+      <PopoverTrigger
+        type="button"
+        className={cn(buttonVariants({ variant: 'outline' }), 'w-full justify-start')}
+      >
+        {value || 'Pick an emoji'}
       </PopoverTrigger>
       <PopoverContent className="w-[320px] space-y-2 p-3">
         <Input
diff --git a/components/ui/field.tsx b/components/ui/field.tsx
index 749e6cb..de8a40f 100644
--- a/components/ui/field.tsx
+++ b/components/ui/field.tsx
@@ -2,8 +2,8 @@
 
 import { useMemo } from "react"
 import { cva, type VariantProps } from "class-variance-authority"
-
 import { cn } from "@/lib/utils"
+
 import { Label } from "@/components/ui/label"
 import { Separator } from "@/components/ui/separator"
 
@@ -12,8 +12,7 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
     <fieldset
       data-slot="field-set"
       className={cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
         className
       )}
       {...props}
@@ -31,9 +30,7 @@ function FieldLegend({
       data-slot="field-legend"
       data-variant={variant}
       className={cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
+        "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
         className
       )}
       {...props}
@@ -46,7 +43,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-group"
       className={cn(
-        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
         className
       )}
       {...props}
@@ -55,21 +52,15 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const fieldVariants = cva(
-  "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
   {
     variants: {
       orientation: {
-        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
-        horizontal: [
-          "flex-row items-center",
-          "[&>[data-slot=field-label]]:flex-auto",
-          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
-        ],
-        responsive: [
-          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-        ],
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -99,7 +90,7 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-content"
       className={cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        "group/field-content flex flex-1 flex-col gap-1 leading-snug",
         className
       )}
       {...props}
@@ -115,9 +106,8 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit flex-nowrap items-center gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
       {...props}
@@ -130,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
@@ -143,9 +133,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
-        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -173,7 +163,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
@@ -196,17 +186,21 @@ function FieldError({
       return children
     }
 
-    if (!errors) {
+    if (!errors?.length) {
       return null
     }
 
-    if (errors?.length === 1 && errors[0]?.message) {
-      return errors[0].message
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length == 1) {
+      return uniqueErrors[0]?.message
     }
 
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
-        {errors.map(
+        {uniqueErrors.map(
           (error, index) =>
             error?.message && <li key={index}>{error.message}</li>
         )}
@@ -222,7 +216,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn("text-sm font-normal text-destructive", className)}
       {...props}
     >
       {content}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
deleted file mode 100644
index 8f84c5e..0000000
--- a/components/ui/form.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as LabelPrimitive from '@radix-ui/react-label'
-import { Slot } from '@radix-ui/react-slot'
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from 'react-hook-form'
-
-import { cn } from '@/lib/utils'
-import { Label } from '@/components/ui/label'
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
-)
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn('', className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = 'FormItem'
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && 'text-destructive', className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = 'FormLabel'
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = 'FormControl'
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn('text-[0.8rem] text-muted-foreground', className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = 'FormDescription'
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn('text-[0.8rem] font-medium text-destructive', className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = 'FormMessage'
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
diff --git a/components/ui/icons.tsx b/components/ui/icons.tsx
deleted file mode 100644
index 38aad2e..0000000
--- a/components/ui/icons.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-type IconProps = React.HTMLAttributes<SVGElement>
-
-export const Icons = {
-  logo: (props: IconProps) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <rect width="7" height="7" x="14" y="3" rx="1" />
-      <path d="M10 21V8a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H3" />
-    </svg>
-  ),
-  twitter: (props: IconProps) => (
-    <svg
-      {...props}
-      height="23"
-      viewBox="0 0 1200 1227"
-      width="23"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
-    </svg>
-  ),
-  github: (props: IconProps) => (
-    <svg viewBox="0 0 438.549 438.549" {...props}>
-      <path
-        fill="currentColor"
-        d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
-      ></path>
-    </svg>
-  ),
-  radix: (props: IconProps) => (
-    <svg viewBox="0 0 25 25" fill="none" {...props}>
-      <path
-        d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"
-        fill="currentcolor"
-      ></path>
-      <path d="M12 0H4V8H12V0Z" fill="currentcolor"></path>
-      <path
-        d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"
-        fill="currentcolor"
-      ></path>
-    </svg>
-  ),
-  aria: (props: IconProps) => (
-    <svg role="img" viewBox="0 0 24 24" fill="currentColor" {...props}>
-      <path d="M13.966 22.624l-1.69-4.281H8.122l3.892-9.144 5.662 13.425zM8.884 1.376H0v21.248zm15.116 0h-8.884L24 22.624Z" />
-    </svg>
-  ),
-  npm: (props: IconProps) => (
-    <svg viewBox="0 0 24 24" {...props}>
-      <path
-        d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  yarn: (props: IconProps) => (
-    <svg viewBox="0 0 24 24" {...props}>
-      <path
-        d="M12 0C5.375 0 0 5.375 0 12s5.375 12 12 12 12-5.375 12-12S18.625 0 12 0zm.768 4.105c.183 0 .363.053.525.157.125.083.287.185.755 1.154.31-.088.468-.042.551-.019.204.056.366.19.463.375.477.917.542 2.553.334 3.605-.241 1.232-.755 2.029-1.131 2.576.324.329.778.899 1.117 1.825.278.774.31 1.478.273 2.015a5.51 5.51 0 0 0 .602-.329c.593-.366 1.487-.917 2.553-.931.714-.009 1.269.445 1.353 1.103a1.23 1.23 0 0 1-.945 1.362c-.649.158-.95.278-1.821.843-1.232.797-2.539 1.242-3.012 1.39a1.686 1.686 0 0 1-.704.343c-.737.181-3.266.315-3.466.315h-.046c-.783 0-1.214-.241-1.45-.491-.658.329-1.51.19-2.122-.134a1.078 1.078 0 0 1-.58-1.153 1.243 1.243 0 0 1-.153-.195c-.162-.25-.528-.936-.454-1.946.056-.723.556-1.367.88-1.71a5.522 5.522 0 0 1 .408-2.256c.306-.727.885-1.348 1.32-1.737-.32-.537-.644-1.367-.329-2.21.227-.602.412-.936.82-1.08h-.005c.199-.074.389-.153.486-.259a3.418 3.418 0 0 1 2.298-1.103c.037-.093.079-.185.125-.283.31-.658.639-1.029 1.024-1.168a.94.94 0 0 1 .328-.06zm.006.7c-.507.016-1.001 1.519-1.001 1.519s-1.27-.204-2.266.871c-.199.218-.468.334-.746.44-.079.028-.176.023-.417.672-.371.991.625 2.094.625 2.094s-1.186.839-1.626 1.881c-.486 1.144-.338 2.261-.338 2.261s-.843.732-.899 1.487c-.051.663.139 1.2.343 1.515.227.343.51.176.51.176s-.561.653-.037.931c.477.25 1.283.394 1.71-.037.31-.31.371-1.001.486-1.283.028-.065.12.111.209.199.097.093.264.195.264.195s-.755.324-.445 1.066c.102.246.468.403 1.066.398.222-.005 2.664-.139 3.313-.296.375-.088.505-.283.505-.283s1.566-.431 2.998-1.357c.917-.598 1.293-.76 2.034-.936.612-.148.57-1.098-.241-1.084-.839.009-1.575.44-2.196.825-1.163.718-1.742.672-1.742.672l-.018-.032c-.079-.13.371-1.293-.134-2.678-.547-1.515-1.413-1.881-1.344-1.997.297-.5 1.038-1.297 1.334-2.78.176-.899.13-2.377-.269-3.151-.074-.144-.732.241-.732.241s-.616-1.371-.788-1.483a.271.271 0 0 0-.157-.046z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  pnpm: (props: IconProps) => (
-    <svg viewBox="0 0 24 24" {...props}>
-      <path
-        d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  react: (props: IconProps) => (
-    <svg viewBox="0 0 24 24" {...props}>
-      <path
-        d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  tailwind: (props: IconProps) => (
-    <svg viewBox="0 0 24 24" {...props}>
-      <path
-        d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  google: (props: IconProps) => (
-    <svg role="img" viewBox="0 0 24 24" {...props}>
-      <path
-        fill="currentColor"
-        d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-      />
-    </svg>
-  ),
-  apple: (props: IconProps) => (
-    <svg role="img" viewBox="0 0 24 24" {...props}>
-      <path
-        d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  paypal: (props: IconProps) => (
-    <svg role="img" viewBox="0 0 24 24" {...props}>
-      <path
-        d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
-        fill="currentColor"
-      />
-    </svg>
-  ),
-  spinner: (props: IconProps) => (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      {...props}
-    >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
-  ),
-}
diff --git a/components/ui/input-group.tsx b/components/ui/input-group.tsx
new file mode 100644
index 0000000..2f244c5
--- /dev/null
+++ b/components/ui/input-group.tsx
@@ -0,0 +1,158 @@
+"use client"
+
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]",
+        "inline-end":
+          "order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]",
+        "block-start":
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+        "block-end":
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size" | "type"> &
+  VariantProps<typeof inputGroupButtonVariants> & {
+    type?: "button" | "submit" | "reset"
+  }) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
index 975abb4..7130879 100644
--- a/components/ui/input-otp.tsx
+++ b/components/ui/input-otp.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import * as React from 'react'
-import { DashIcon } from '@radix-ui/react-icons'
+import { MinusIcon } from 'lucide-react'
 import { OTPInput, OTPInputContext } from 'input-otp'
 
 import { cn } from '@/lib/utils'
@@ -63,7 +63,7 @@ const InputOTPSeparator = React.forwardRef<
   React.ComponentPropsWithoutRef<'div'>
 >(({ ...props }, ref) => (
   <div ref={ref} role="separator" {...props}>
-    <DashIcon />
+    <MinusIcon className="size-4" />
   </div>
 ))
 InputOTPSeparator.displayName = 'InputOTPSeparator'
diff --git a/components/ui/json-schema-export.tsx b/components/ui/json-schema-export.tsx
deleted file mode 100644
index 20bb6a7..0000000
--- a/components/ui/json-schema-export.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import React, { useState } from 'react'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Textarea } from '@/components/ui/textarea'
-import { Copy, Download } from 'lucide-react'
-import { toast } from 'sonner'
-import { generateFormJsonSchema, downloadJsonSchema } from '@/lib/json-schema-generator'
-
-interface JsonSchemaExportProps {
-  formFields: any[]
-  title?: string
-  description?: string
-}
-
-export function JsonSchemaExport({ formFields, title = 'Form Schema', description = 'Generated JSON Schema' }: JsonSchemaExportProps) {
-  const [jsonSchema, setJsonSchema] = useState<string>('')
-  const [isGenerated, setIsGenerated] = useState(false)
-
-  const generateSchema = () => {
-    try {
-      const schema = generateFormJsonSchema(formFields, { title, description })
-      const schemaString = JSON.stringify(schema, null, 2)
-      setJsonSchema(schemaString)
-      setIsGenerated(true)
-      toast.success('JSON Schema generated successfully!')
-    } catch (error) {
-      toast.error('Failed to generate JSON Schema')
-      console.error('Schema generation error:', error)
-    }
-  }
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(jsonSchema)
-      toast.success('JSON Schema copied to clipboard!')
-    } catch (error) {
-      toast.error('Failed to copy to clipboard')
-    }
-  }
-
-  const downloadSchema = () => {
-    try {
-      const schema = JSON.parse(jsonSchema)
-      downloadJsonSchema(schema, `${title.toLowerCase().replace(/\s+/g, '-')}-schema.json`)
-      toast.success('JSON Schema downloaded!')
-    } catch (error) {
-      toast.error('Failed to download schema')
-    }
-  }
-
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>JSON Schema Export</CardTitle>
-        <CardDescription>
-          Generate and export a JSON Schema representation of your form
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex gap-2">
-          <Button onClick={generateSchema} disabled={formFields.length === 0}>
-            Generate JSON Schema
-          </Button>
-          {isGenerated && (
-            <>
-              <Button variant="outline" onClick={copyToClipboard}>
-                <Copy className="w-4 h-4 mr-2" />
-                Copy
-              </Button>
-              <Button variant="outline" onClick={downloadSchema}>
-                <Download className="w-4 h-4 mr-2" />
-                Download
-              </Button>
-            </>
-          )}
-        </div>
-        
-        {isGenerated && (
-          <Textarea
-            value={jsonSchema}
-            readOnly
-            className="min-h-[300px] font-mono text-sm"
-            placeholder="Generated JSON Schema will appear here..."
-          />
-        )}
-        
-        {formFields.length === 0 && (
-          <p className="text-sm text-muted-foreground">
-            Add form fields to generate a JSON Schema
-          </p>
-        )}
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index fb5fbc3..2f6fe5c 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -1,16 +1,11 @@
 "use client"
 
 import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
 import { cn } from "@/lib/utils"
 
-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
-    <LabelPrimitive.Root
+    <label
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
diff --git a/components/ui/location-input.tsx b/components/ui/location-input.tsx
index e04f56c..758ed70 100644
--- a/components/ui/location-input.tsx
+++ b/components/ui/location-input.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Check, ChevronsUpDown } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import {
   Command,
@@ -18,8 +18,8 @@ import {
 import { cn } from '@/lib/utils'
 
 // Import JSON data directly
-import countries from '@/data/countries.json'
-import states from '@/data/states.json'
+import countries from '@/lib/location-data/countries.json'
+import states from '@/lib/location-data/states.json'
 
 interface Timezone {
   zoneName: string
@@ -110,24 +110,22 @@ const LocationSelector = ({
     <div className="flex gap-4">
       {/* Country Selector */}
       <Popover open={openCountryDropdown} onOpenChange={setOpenCountryDropdown}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={openCountryDropdown}
-            disabled={disabled}
-            className="w-full justify-between"
-          >
-            {selectedCountry ? (
-              <div className="flex items-center gap-2">
-                <span>{selectedCountry.emoji}</span>
-                <span>{selectedCountry.name}</span>
-              </div>
-            ) : (
-              <span>Select Country...</span>
-            )}
-            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-          </Button>
+        <PopoverTrigger
+          type="button"
+          role="combobox"
+          aria-expanded={openCountryDropdown}
+          disabled={disabled}
+          className={cn(buttonVariants({ variant: 'outline' }), 'w-full justify-between')}
+        >
+          {selectedCountry ? (
+            <div className="flex items-center gap-2">
+              <span>{selectedCountry.emoji}</span>
+              <span>{selectedCountry.name}</span>
+            </div>
+          ) : (
+            <span>Select Country...</span>
+          )}
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
         </PopoverTrigger>
         <PopoverContent className="p-0">
           <Command>
@@ -171,21 +169,19 @@ const LocationSelector = ({
       {/* State Selector - Only shown if selected country has states */}
       {availableStates.length > 0 && (
         <Popover open={openStateDropdown} onOpenChange={setOpenStateDropdown}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              role="combobox"
-              aria-expanded={openStateDropdown}
-              disabled={!selectedCountry}
-              className="w-full justify-between"
-            >
-              {selectedState ? (
-                <span>{selectedState.name}</span>
-              ) : (
-                <span>Select State...</span>
-              )}
-              <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-            </Button>
+          <PopoverTrigger
+            type="button"
+            role="combobox"
+            aria-expanded={openStateDropdown}
+            disabled={!selectedCountry}
+            className={cn(buttonVariants({ variant: 'outline' }), 'w-full justify-between')}
+          >
+            {selectedState ? (
+              <span>{selectedState.name}</span>
+            ) : (
+              <span>Select State...</span>
+            )}
+            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
           </PopoverTrigger>
           <PopoverContent className="p-0">
             <Command>
diff --git a/components/ui/password-input.tsx b/components/ui/password-input.tsx
index e5de1eb..9f4875f 100644
--- a/components/ui/password-input.tsx
+++ b/components/ui/password-input.tsx
@@ -1,12 +1,13 @@
 'use client'
 
+import * as React from 'react'
 import { forwardRef, useState } from 'react'
-import { FaRegEye, FaRegEyeSlash } from 'react-icons/fa'
+import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Input, InputProps } from '@/components/ui/input'
+import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/utils'
 
-const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
+const PasswordInput = forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
   ({ className, ...props }, ref) => {
     const [showPassword, setShowPassword] = useState(false)
     const disabled =
@@ -29,9 +30,9 @@ const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
           disabled={disabled}
         >
           {showPassword && !disabled ? (
-            <FaRegEye className="h-4 w-4" aria-hidden="true" />
+            <Eye className="h-4 w-4" aria-hidden="true" />
           ) : (
-            <FaRegEyeSlash className="h-4 w-4" aria-hidden="true" />
+            <EyeOff className="h-4 w-4" aria-hidden="true" />
           )}
           <span className="sr-only">
             {showPassword ? 'Hide password' : 'Show password'}
diff --git a/components/ui/phone-input.tsx b/components/ui/phone-input.tsx
index 2a58a71..2b40056 100644
--- a/components/ui/phone-input.tsx
+++ b/components/ui/phone-input.tsx
@@ -6,7 +6,7 @@ import * as RPNInput from 'react-phone-number-input'
 
 import flags from 'react-phone-number-input/flags'
 
-import { Button } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -15,7 +15,7 @@ import {
   CommandItem,
   CommandList,
 } from '@/components/ui/command'
-import { Input, InputProps } from '@/components/ui/input'
+import { Input } from '@/components/ui/input'
 import {
   Popover,
   PopoverContent,
@@ -23,7 +23,7 @@ import {
 } from '@/components/ui/popover'
 
 import { cn } from '@/lib/utils'
-import { ScrollArea } from './scroll-area'
+import { ScrollArea } from '@/components/ui/scroll-area'
 
 type PhoneInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
@@ -63,7 +63,7 @@ const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
   )
 PhoneInput.displayName = 'PhoneInput'
 
-const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
+const InputComponent = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
   ({ className, ...props }, ref) => (
     <Input
       className={cn('rounded-e-lg rounded-s-none', className)}
@@ -98,21 +98,21 @@ const CountrySelect = ({
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant={'outline'}
-          className="flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10"
-          disabled={disabled}
-        >
-          <FlagComponent country={value} countryName={value} />
-          <ChevronsUpDown
-            className={cn(
-              '-mr-2 h-4 w-4 opacity-50',
-              disabled ? 'hidden' : 'opacity-100',
-            )}
-          />
-        </Button>
+      <PopoverTrigger
+        type="button"
+        className={cn(
+          buttonVariants({ variant: 'outline' }),
+          'flex gap-1 rounded-e-none rounded-s-lg border-r-0 px-3 focus:z-10',
+        )}
+        disabled={disabled}
+      >
+        <FlagComponent country={value} countryName={value} />
+        <ChevronsUpDown
+          className={cn(
+            '-mr-2 h-4 w-4 opacity-50',
+            disabled ? 'hidden' : 'opacity-100',
+          )}
+        />
       </PopoverTrigger>
       <PopoverContent className="w-[300px] p-0">
         <Command>
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
index 33a7a74..1531a84 100644
--- a/components/ui/popover.tsx
+++ b/components/ui/popover.tsx
@@ -1,33 +1,89 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as PopoverPrimitive from '@radix-ui/react-popover'
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
+import { cn } from "@/lib/utils"
 
-import { cn } from '@/lib/utils'
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
 
-const Popover = PopoverPrimitive.Root
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
 
-const PopoverTrigger = PopoverPrimitive.Trigger
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  )
+}
 
-const PopoverAnchor = PopoverPrimitive.Anchor
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
 
-const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        'z-50 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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 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 w-[--radix-popover-trigger-width] max-h-[--radix-popover-content-available-height]',
-        className,
-      )}
+function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
       {...props}
     />
-  </PopoverPrimitive.Portal>
-))
-PopoverContent.displayName = PopoverPrimitive.Content.displayName
+  )
+}
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export {
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+}
diff --git a/components/ui/progress.tsx b/components/ui/progress.tsx
deleted file mode 100644
index f489bfd..0000000
--- a/components/ui/progress.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as ProgressPrimitive from '@radix-ui/react-progress'
-
-import { cn } from '@/lib/utils'
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
-      className,
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-))
-Progress.displayName = ProgressPrimitive.Root.displayName
-
-export { Progress }
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
index 043832c..762d273 100644
--- a/components/ui/radio-group.tsx
+++ b/components/ui/radio-group.tsx
@@ -1,44 +1,37 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import { CheckIcon } from '@radix-ui/react-icons'
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Radio as RadioPrimitive } from "@base-ui/react/radio"
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group"
+import { cn } from "@/lib/utils"
 
-import { cn } from '@/lib/utils'
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
   return (
-    <RadioGroupPrimitive.Root
-      className={cn('grid gap-2', className)}
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      className={cn("grid w-full gap-3", className)}
       {...props}
-      ref={ref}
     />
   )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+}
 
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
+function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
   return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
       className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        className,
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary",
+        className
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="h-3.5 w-3.5 fill-primary" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="flex size-4 items-center justify-center"
+      >
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
   )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+}
 
 export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
index 69f1f4e..13642c5 100644
--- a/components/ui/scroll-area.tsx
+++ b/components/ui/scroll-area.tsx
@@ -1,48 +1,54 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+import { cn } from "@/lib/utils"
 
-import { cn } from '@/lib/utils'
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
 
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-[1px]',
-      orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
 
 export { ScrollArea, ScrollBar }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
index 53f3cd2..1957f8f 100644
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -1,164 +1,200 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import {
-  CaretSortIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from '@radix-ui/react-icons'
-import * as SelectPrimitive from '@radix-ui/react-select'
-
-import { cn } from '@/lib/utils'
+import * as React from "react"
+import { Select as SelectPrimitive } from "@base-ui/react/select"
+import { cn } from "@/lib/utils"
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
 
 const Select = SelectPrimitive.Root
 
-const SelectGroup = SelectPrimitive.Group
+function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn("scroll-my-1 p-1", className)}
+      {...props}
+    />
+  )
+}
 
-const SelectValue = SelectPrimitive.Value
+function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
+  return (
+    <SelectPrimitive.Value
+      data-slot="select-value"
+      className={cn("flex flex-1 text-left", className)}
+      {...props}
+    />
+  )
+}
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: SelectPrimitive.Trigger.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground 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-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon
+        render={
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        }
+      />
+    </SelectPrimitive.Trigger>
+  )
+}
 
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUpIcon />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+function SelectContent({
+  className,
+  children,
+  side = "bottom",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  alignItemWithTrigger = true,
+  ...props
+}: SelectPrimitive.Popup.Props &
+  Pick<
+    SelectPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
+  >) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        alignItemWithTrigger={alignItemWithTrigger}
+        className="isolate z-50"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={alignItemWithTrigger}
+          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          {...props}
+        >
+          <SelectScrollUpButton />
+          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectScrollDownButton />
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
 
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDownIcon />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+function SelectLabel({
+  className,
+  ...props
+}: SelectPrimitive.GroupLabel.Props) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
+function SelectItem({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.Item.Props) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 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',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className,
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
       )}
-      position={position}
       {...props}
     >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
-        )}
-      >
+      <SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
         {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+      </SelectPrimitive.ItemText>
+      <SelectPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </SelectPrimitive.ItemIndicator>
+    </SelectPrimitive.Item>
+  )
+}
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+function SelectSeparator({
+  className,
+  ...props
+}: SelectPrimitive.Separator.Props) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon
+      />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
 
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-muted', className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon
+      />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 }
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
index 275381c..692f8a9 100644
--- a/components/ui/separator.tsx
+++ b/components/ui/separator.tsx
@@ -1,23 +1,19 @@
 "use client"
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
 import { cn } from "@/lib/utils"
 
 function Separator({
   className,
   orientation = "horizontal",
-  decorative = true,
   ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+}: SeparatorPrimitive.Props) {
   return (
-    <SeparatorPrimitive.Root
+    <SeparatorPrimitive
       data-slot="separator"
-      decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
index 417e7e1..687adb8 100644
--- a/components/ui/sheet.tsx
+++ b/components/ui/sheet.tsx
@@ -1,135 +1,130 @@
 "use client"
 
 import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { Cross2Icon } from "@radix-ui/react-icons"
-import { cva, type VariantProps } from "class-variance-authority"
-
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
 import { cn } from "@/lib/utils"
 
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
 
-const SheetPortal = SheetPrimitive.Portal
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
 
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
 
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
 
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
 
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
       {...props}
-    >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <Cross2Icon className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
+    />
+  )
+}
 
-const SheetHeader = ({
+function SheetContent({
   className,
+  children,
+  side = "right",
+  showCloseButton = true,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-4 right-4"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  )
+}
 
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
 
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
 
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("font-medium text-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
 
 export {
   Sheet,
-  SheetPortal,
-  SheetOverlay,
   SheetTrigger,
   SheetClose,
   SheetContent,
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
index 9cba975..66a7220 100644
--- a/components/ui/sidebar.tsx
+++ b/components/ui/sidebar.tsx
@@ -1,32 +1,39 @@
 "use client"
 
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
 
 import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Separator } from "@/components/ui/separator"
-import { Sheet, SheetContent } from "@/components/ui/sheet"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
 import { Skeleton } from "@/components/ui/skeleton"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
 
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+// Narrower than stock: the sidebars sit inside page layouts, not the app shell.
 const SIDEBAR_WIDTH = "12rem"
 const SIDEBAR_WIDTH_MOBILE = "12rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 
-type SidebarContext = {
+type SidebarContextProps = {
   state: "expanded" | "collapsed"
   open: boolean
   setOpen: (open: boolean) => void
@@ -36,7 +43,7 @@ type SidebarContext = {
   toggleSidebar: () => void
 }
 
-const SidebarContext = React.createContext<SidebarContext | null>(null)
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
 
 function useSidebar() {
   const context = React.useContext(SidebarContext)
@@ -47,264 +54,246 @@ function useSidebar() {
   return context
 }
 
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
     },
-    ref
-  ) => {
-    const isMobile = useIsMobile()
-    const [openMobile, setOpenMobile] = React.useState(false)
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
-    const open = openProp ?? _open
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        if (setOpenProp) {
-          return setOpenProp?.(
-            typeof value === "function" ? value(open) : value
-          )
-        }
+    [setOpenProp, open]
+  )
 
-        _setOpen(value)
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
 
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-      },
-      [setOpenProp, open]
-    )
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
 
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
-    }, [isMobile, setOpen, setOpenMobile])
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault()
-          toggleSidebar()
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
         }
-      }
-
-      window.addEventListener("keydown", handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [toggleSidebar])
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
-
-    const contextValue = React.useMemo<SidebarContext>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    )
+        className={cn(
+          "group/sidebar-wrapper flex min-h-auto w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
 
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
     return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-auto w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
     )
   }
-)
-SidebarProvider.displayName = "SidebarProvider"
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right"
-    variant?: "sidebar" | "floating" | "inset"
-    collapsible?: "offcanvas" | "icon" | "none"
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
 
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
-          {...props}
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
         >
-          {children}
-        </div>
-      )
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      )
-    }
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
 
-    return (
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
       <div
-        ref={ref}
-        className="group peer relative hidden md:block text-sidebar-foreground"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative h-auto w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
         data-side={side}
+        className={cn(
+          "absolute inset-y-0 z-10 hidden h-auto w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
       >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "duration-200 relative h-auto w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
-          )}
-        />
         <div
-          className={cn(
-            "duration-200 absolute inset-y-0 z-10 hidden h-auto w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=right]:border-l",
-            className
-          )}
-          {...props}
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
+          {children}
         </div>
       </div>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
+    </div>
+  )
+}
 
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
   const { toggleSidebar } = useSidebar()
 
   return (
     <Button
-      ref={ref}
       data-sidebar="trigger"
+      data-slot="sidebar-trigger"
       variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
+      size="icon-sm"
+      className={cn(className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()
       }}
       {...props}
     >
-      <PanelLeft />
+      <PanelLeftIcon />
       <span className="sr-only">Toggle Sidebar</span>
     </Button>
   )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
+}
 
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
   const { toggleSidebar } = useSidebar()
 
   return (
     <button
-      ref={ref}
       data-sidebar="rail"
+      data-slot="sidebar-rail"
       aria-label="Toggle Sidebar"
       tabIndex={-1}
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "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",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -312,219 +301,193 @@ const SidebarRail = React.forwardRef<
       {...props}
     />
   )
-})
-SidebarRail.displayName = "SidebarRail"
+}
 
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
   return (
     <main
-      ref={ref}
+      data-slot="sidebar-inset"
       className={cn(
-        "relative flex min-h-auto flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "relative flex min-h-auto w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}
     />
   )
-})
-SidebarInset.displayName = "SidebarInset"
+}
 
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
   return (
     <Input
-      ref={ref}
+      data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
-      )}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       {...props}
     />
   )
-})
-SidebarInput.displayName = "SidebarInput"
+}
 
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      ref={ref}
+      data-slot="sidebar-header"
       data-sidebar="header"
       className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
   )
-})
-SidebarHeader.displayName = "SidebarHeader"
+}
 
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      ref={ref}
+      data-slot="sidebar-footer"
       data-sidebar="footer"
       className={cn("flex flex-col gap-2 p-2", className)}
       {...props}
     />
   )
-})
-SidebarFooter.displayName = "SidebarFooter"
+}
 
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
   return (
     <Separator
-      ref={ref}
+      data-slot="sidebar-separator"
       data-sidebar="separator"
       className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   )
-})
-SidebarSeparator.displayName = "SidebarSeparator"
+}
 
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      ref={ref}
+      data-slot="sidebar-content"
       data-sidebar="content"
       className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
         className
       )}
       {...props}
     />
   )
-})
-SidebarContent.displayName = "SidebarContent"
+}
 
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      ref={ref}
+      data-slot="sidebar-group"
       data-sidebar="group"
       className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
       {...props}
     />
   )
-})
-SidebarGroup.displayName = "SidebarGroup"
+}
 
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  })
+}
 
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
       {...props}
     />
   )
-})
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
+}
 
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
 
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
   return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
       {...props}
     />
   )
-})
-SidebarGroupAction.displayName = "SidebarGroupAction"
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-))
-SidebarGroupContent.displayName = "SidebarGroupContent"
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-))
-SidebarMenu.displayName = "SidebarMenu"
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-))
-SidebarMenuItem.displayName = "SidebarMenuItem"
+}
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
       },
       size: {
         default: "h-8 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
@@ -534,133 +497,124 @@ const sidebarMenuButtonVariants = cva(
   }
 )
 
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
   React.ComponentProps<"button"> & {
-    asChild?: boolean
     isActive?: boolean
     tooltip?: string | React.ComponentProps<typeof TooltipContent>
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
     },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : "button"
-    const { isMobile, state } = useSidebar()
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    )
+  })
 
-    if (!tooltip) {
-      return button
-    }
+  if (!tooltip) {
+    return comp
+  }
 
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
     }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    )
   }
-)
-SidebarMenuButton.displayName = "SidebarMenuButton"
 
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
   React.ComponentProps<"button"> & {
-    asChild?: boolean
     showOnHover?: boolean
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  })
+}
 
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
   return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className
       )}
       {...props}
     />
   )
-})
-SidebarMenuAction.displayName = "SidebarMenuAction"
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean
-  }
->(({ className, showIcon = false, ...props }, ref) => {
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
   // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
+  const [width] = React.useState(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
+  })
 
   return (
     <div
-      ref={ref}
+      data-slot="sidebar-menu-skeleton"
       data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
       {...props}
     >
       {showIcon && (
@@ -670,7 +624,7 @@ const SidebarMenuSkeleton = React.forwardRef<
         />
       )}
       <Skeleton
-        className="h-4 flex-1 max-w-[--skeleton-width]"
+        className="h-4 max-w-(--skeleton-width) flex-1"
         data-sidebar="menu-skeleton-text"
         style={
           {
@@ -680,61 +634,67 @@ const SidebarMenuSkeleton = React.forwardRef<
       />
     </div>
   )
-})
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuSub.displayName = "SidebarMenuSub"
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean
-    size?: "sm" | "md"
-    isActive?: boolean
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
+}
 
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
   return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}
     />
   )
-})
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md"
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  })
+}
 
 export {
   Sidebar,
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index ff8254f..2f5835d 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -1,28 +1,51 @@
-'use client'
+import { Slider as SliderPrimitive } from "@base-ui/react/slider"
+import { cn } from "@/lib/utils"
 
-import * as React from 'react'
-import * as SliderPrimitive from '@radix-ui/react-slider'
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: SliderPrimitive.Root.Props) {
+  const _values = Array.isArray(value)
+    ? value
+    : Array.isArray(defaultValue)
+      ? defaultValue
+      : [min, max]
 
-import { cn } from '@/lib/utils'
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      'relative flex w-full touch-none select-none items-center',
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+  return (
+    <SliderPrimitive.Root
+      className={cn("data-horizontal:w-full data-vertical:h-full", className)}
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      thumbAlignment="edge"
+      {...props}
+    >
+      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
+        <SliderPrimitive.Track
+          data-slot="slider-track"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
+        >
+          <SliderPrimitive.Indicator
+            data-slot="slider-range"
+            className="bg-primary select-none data-horizontal:h-full data-vertical:w-full"
+          />
+        </SliderPrimitive.Track>
+        {Array.from({ length: _values.length }, (_, index) => (
+          <SliderPrimitive.Thumb
+            data-slot="slider-thumb"
+            key={index}
+            className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          />
+        ))}
+      </SliderPrimitive.Control>
+    </SliderPrimitive.Root>
+  )
+}
 
 export { Slider }
diff --git a/components/ui/smart-datetime-input.tsx b/components/ui/smart-datetime-input.tsx
index 46a7d59..06b3863 100644
--- a/components/ui/smart-datetime-input.tsx
+++ b/components/ui/smart-datetime-input.tsx
@@ -11,9 +11,9 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { Calendar, CalendarProps } from '@/components/ui/calendar'
+import { Calendar } from '@/components/ui/calendar'
 import { Input } from '@/components/ui/input'
-import { Button, buttonVariants } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { cn } from '@/lib/utils'
 
@@ -134,7 +134,7 @@ const DEFAULT_SIZE = 96
  * Smart time input Docs: {@link: https://shadcn-extension.vercel.app/docs/smart-time-input}
  */
 type SmartDatetimeInputProps = Omit<
-  CalendarProps,
+  React.ComponentProps<typeof Calendar>,
   'id' | 'mode' | 'selected' | 'onSelect' | 'locale'
 > & {
   locale?: Locale
@@ -605,7 +605,7 @@ NaturalLanguageInput.displayName = 'NaturalLanguageInput'
 type DateTimeLocalInputProps = {
   locale: Locale
   hour12: boolean
-} & Omit<CalendarProps, 'locale'>
+} & Omit<React.ComponentProps<typeof Calendar>, 'locale'>
 
 const DateTimeLocalInput = ({
   locale,
@@ -637,18 +637,16 @@ const DateTimeLocalInput = ({
 
   return (
     <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant={'outline'}
-          size={'icon'}
-          className={cn(
-            'size-9 flex items-center justify-center font-normal',
-            !value && 'text-muted-foreground',
-          )}
-        >
-          <CalendarIcon className="size-4" />
-          <span className="sr-only">calender</span>
-        </Button>
+      <PopoverTrigger
+        type="button"
+        className={cn(
+          buttonVariants({ variant: 'outline', size: 'icon' }),
+          'size-9 flex items-center justify-center font-normal',
+          !value && 'text-muted-foreground',
+        )}
+      >
+        <CalendarIcon className="size-4" />
+        <span className="sr-only">Open calendar</span>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0" sideOffset={8}>
         <div className="flex gap-1">
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
deleted file mode 100644
index 595cff5..0000000
--- a/components/ui/sonner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { useTheme } from 'next-themes'
-import { Toaster as Sonner } from 'sonner'
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = 'system' } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps['theme']}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
-          description: 'group-[.toast]:text-muted-foreground',
-          actionButton:
-            'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
-          cancelButton:
-            'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
diff --git a/components/ui/switch.tsx b/components/ui/switch.tsx
index f5bd43f..2a35c38 100644
--- a/components/ui/switch.tsx
+++ b/components/ui/switch.tsx
@@ -1,29 +1,31 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+import { cn } from "@/lib/utils"
 
-import { cn } from '@/lib/utils'
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
       className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
       )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
 
 export { Switch }
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
index 00852fa..7b05428 100644
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -1,55 +1,81 @@
-'use client'
+"use client"
 
-import * as React from 'react'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
 
-import { cn } from '@/lib/utils'
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-horizontal:flex-col",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const Tabs = TabsPrimitive.Root
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
 
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
-      className,
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "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 text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-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-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className,
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  )
+}
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
diff --git a/components/ui/theme-switch.tsx b/components/ui/theme-switch.tsx
index ad8a47b..a3b760c 100644
--- a/components/ui/theme-switch.tsx
+++ b/components/ui/theme-switch.tsx
@@ -17,12 +17,12 @@ export function ThemeSwitch() {
 
     return (
         <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon" className="rounded-full">
-                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                    <span className="sr-only">Toggle theme</span>
-                </Button>
+            <DropdownMenuTrigger
+                render={<Button variant="outline" size="icon" className="rounded-full" />}
+            >
+                <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">Toggle theme</span>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
                 <DropdownMenuItem onClick={() => setTheme("light")}>
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
deleted file mode 100644
index bf7ef7a..0000000
--- a/components/ui/toast.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Cross2Icon } from '@radix-ui/react-icons'
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { cva, type VariantProps } from 'class-variance-authority'
-
-import { cn } from '@/lib/utils'
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-      className,
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-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',
-  {
-    variants: {
-      variant: {
-        default: 'border bg-background text-foreground',
-        destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    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',
-      className,
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    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',
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <Cross2Icon className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn('text-sm font-semibold [&+div]:text-xs', className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn('text-sm opacity-90', className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
deleted file mode 100644
index 3b91885..0000000
--- a/components/ui/toaster.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import { useToast } from '@/hooks/use-toast'
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from '@/components/ui/toast'
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index a66b3f2..56da4b2 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,32 +1,65 @@
 "use client"
 
-import * as React from "react"
-import * as TooltipPrimitive from "@radix-ui/react-tooltip"
-
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
 import { cn } from "@/lib/utils"
 
-const TooltipProvider = TooltipPrimitive.Provider
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
 
-const Tooltip = TooltipPrimitive.Root
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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",
-        className
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/components/ui/tree-select.tsx b/components/ui/tree-select.tsx
index 054816b..6013373 100644
--- a/components/ui/tree-select.tsx
+++ b/components/ui/tree-select.tsx
@@ -3,7 +3,8 @@
 import * as React from 'react'
 import { ChevronDown, ChevronRight } from 'lucide-react'
 
-import { Button } from '@/components/ui/button'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import {
   Popover,
   PopoverContent,
@@ -100,12 +101,13 @@ export function TreeSelect({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button type="button" variant="outline" className="w-full justify-between">
-          <span className="truncate">
-            {selectedLabels.length ? selectedLabels.join(', ') : placeholder}
-          </span>
-        </Button>
+      <PopoverTrigger
+        type="button"
+        className={cn(buttonVariants({ variant: 'outline' }), 'w-full justify-between')}
+      >
+        <span className="truncate">
+          {selectedLabels.length ? selectedLabels.join(', ') : placeholder}
+        </span>
       </PopoverTrigger>
       <PopoverContent className="w-[340px] p-2">
         <ScrollArea className="h-64">
diff --git a/components/use-raised-shadow.ts b/components/use-raised-shadow.ts
deleted file mode 100644
index 7e0ff12..0000000
--- a/components/use-raised-shadow.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { animate, MotionValue, useMotionValue } from 'framer-motion'
-import { useEffect } from 'react'
-
-const inactiveShadow = '0px 0px 0px rgba(0,0,0,0.8)'
-
-export function useRaisedShadow(value: MotionValue<number>) {
-  const boxShadow = useMotionValue(inactiveShadow)
-
-  useEffect(() => {
-    let isActive = false
-    value.onChange((latest) => {
-      const wasActive = isActive
-      if (latest !== 0) {
-        isActive = true
-        if (isActive !== wasActive) {
-          animate(boxShadow, '5px 5px 10px rgba(0,0,0,0.3)')
-        }
-      } else {
-        isActive = false
-        if (isActive !== wasActive) {
-          animate(boxShadow, inactiveShadow)
-        }
-      }
-    })
-  }, [value, boxShadow])
-
-  return boxShadow
-}
diff --git a/constants/array-utils.ts b/constants/array-utils.ts
deleted file mode 100644
index 49715ef..0000000
--- a/constants/array-utils.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export function removeItem<T>([...arr]: T[], item: T) {
-    const index = arr.indexOf(item);
-    index > -1 && arr.splice(index, 1);
-    return arr;
-  }
-  
-  export function closestItem<T>(arr: T[], item: T) {
-    const index = arr.indexOf(item);
-    if (index === -1) {
-      return arr[0];
-    } else if (index === arr.length - 1) {
-      return arr[arr.length - 2];
-    } else {
-      return arr[index + 1];
-    }
-  }
-  
\ No newline at end of file
diff --git a/constants/components.ts b/constants/components.ts
deleted file mode 100644
index 702c68b..0000000
--- a/constants/components.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-export interface Components {
-  title: string
-  description: string
-  path: string
-  sub: any[]
-}
-
-export const components: Components[] = [
-  {
-    title: 'Components',
-    description: 'Extra unofficial components for shadcn ui',
-    path: '/components',
-    sub: [
-      {
-        title: 'Autocomplete',
-        path: '/components/autocomplete',
-        description: 'Autocomplete',
-      },
-      {
-        title: 'Location Input',
-        path: '/components/location-input',
-        description: 'Location Input',
-      },
-      {
-        title: 'Signature Input',
-        path: '/components/signature-input',
-        description: 'Signature Input',
-      },
-      {
-        title: 'Signature Pad',
-        path: '/components/signature-pad',
-        description: 'Signature Pad with Dialog',
-      },
-      {
-        title: 'Credit Card',
-        path: '/components/credit-card',
-        description: 'Credit Card Input',
-      },
-      {
-        title: 'Masked Input',
-        path: '/components/masked-input',
-        description: 'Masked Input',
-      },
-      {
-        title: 'Color Picker',
-        path: '/components/color-picker',
-        description: 'Color Picker',
-      },
-      {
-        title: 'Token Input',
-        path: '/components/token-input',
-        description: 'Tag/Token Input',
-      },
-      {
-        title: 'Emoji Picker',
-        path: '/components/emoji-picker',
-        description: 'Emoji Picker',
-      },
-      {
-        title: 'Transfer List',
-        path: '/components/transfer-list',
-        description: 'Transfer List',
-      },
-      {
-        title: 'Tree Select',
-        path: '/components/tree-select',
-        description: 'Tree Select',
-      },
-      {
-        title: 'Image Upload Dropzone',
-        path: '/components/image-upload-dropzone',
-        description: 'Image Upload / Dropzone',
-      },
-      {
-        title: 'Cron Expression Builder',
-        path: '/components/cron-expression-builder',
-        description: 'Cron Expression Builder',
-      },
-      {
-        title: 'Inline Editable Field',
-        path: '/components/inline-editable-field',
-        description: 'Inline Editable Field',
-      },
-      {
-        title: 'Sortable List Input',
-        path: '/components/sortable-list-input',
-        description: 'Sortable List Input',
-      },
-      {
-        title: 'Availability Picker',
-        path: '/components/availability-picker',
-        description: 'Schedule / Availability Picker',
-      },
-    ],
-  },
-]
diff --git a/constants/index.tsx b/constants/index.tsx
deleted file mode 100644
index 18f60bf..0000000
--- a/constants/index.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { FieldType } from '@/types'
-
-export const FORM_LIBRARIES = {
-  SERVER_ACTIONS: 'server-actions',
-  REACT_HOOK_FORM: 'react-hook-form',
-  TANSTACK_FORM: 'tanstack-form',
-  BRING_YOUR_OWN: 'bring-your-own',
-} as const
-
-export type FormLibrary = typeof FORM_LIBRARIES[keyof typeof FORM_LIBRARIES]
-
-export const FORM_LIBRARY_LABELS = {
-  [FORM_LIBRARIES.SERVER_ACTIONS]: 'Server Actions',
-  [FORM_LIBRARIES.REACT_HOOK_FORM]: 'React Hook Form',
-  [FORM_LIBRARIES.TANSTACK_FORM]: 'TanStack Form',
-  [FORM_LIBRARIES.BRING_YOUR_OWN]: 'Bring Your Own Form',
-}
-
-export const fieldTypes: FieldType[] = [
-  { name: 'Checkbox', isNew: false },
-  { name: 'Combobox', isNew: false },
-  { name: 'Date Picker', isNew: false },
-  { name: 'Datetime Picker', isNew: false },
-  { name: 'File Input', isNew: false },
-  { name: 'Input', isNew: false },
-  { name: 'Input OTP', isNew: false },
-  { name: 'Location Input', isNew: false },
-  { name: 'Multi Select', isNew: false },
-  { name: 'Password', isNew: false },
-  { name: 'Phone', isNew: false },
-  { name: 'Select', isNew: false },
-  { name: 'Signature Input', isNew: false },
-  { name: 'Signature Pad', isNew: true },
-  { name: 'Slider', isNew: false },
-  { name: 'Smart Datetime Input', isNew: false },
-  { name: 'Switch', isNew: false },
-  { name: 'Tags Input', isNew: false },
-  { name: 'Textarea', isNew: false },
-  { name: 'Rating', isNew: false },
-  { name: 'RadioGroup', isNew: false },
-  { name: 'Credit Card', isNew: false },
-]
-
-export const defaultFieldConfig: Record<
-  string,
-  { label: string; description: string; placeholder?: any }
-> = {
-  Checkbox: {
-    label: 'Use different settings for my mobile devices',
-    description:
-      'You can manage your mobile notifications in the mobile settings page.',
-  },
-  Combobox: {
-    label: 'Language',
-    description: 'This is the language that will be used in the dashboard.',
-  },
-  'Date Picker': {
-    label: 'Date of birth',
-    description: 'Your date of birth is used to calculate your age.',
-  },
-  'Datetime Picker': {
-    label: 'Submission Date',
-    description: 'Add the date of submission with detailly.',
-  },
-  'File Input': {
-    label: 'Select File',
-    description: 'Select a file to upload.',
-  },
-  Input: {
-    label: 'Username',
-    description: 'This is your public display name.',
-    placeholder: 'shadcn',
-  },
-  'Input OTP': {
-    label: 'One-Time Password',
-    description: 'Please enter the one-time password sent to your phone.',
-  },
-  'Location Input': {
-    label: 'Select Country',
-    description:
-      'If your country has states, it will be appear after selecting country',
-  },
-  'Multi Select': {
-    label: 'Select your framework',
-    description: 'Select multiple options.',
-  },
-  Select: {
-    label: 'Email',
-    description: 'You can manage email addresses in your email settings.',
-    placeholder: 'Select a verified email to display',
-  },
-  Slider: {
-    label: 'Set Price Range',
-    description: 'Adjust the price by sliding.',
-  },
-  'Signature Input': {
-    label: 'Sign here',
-    description: 'Please provide your signature above',
-  },
-  'Signature Pad': {
-    label: 'Your Signature',
-    description: 'Click the pen button to sign',
-  },
-  'Smart Datetime Input': {
-    label: "What's the best time for you?",
-    description: 'Please select the full time',
-  },
-  Switch: {
-    label: 'Marketing emails',
-    description: 'Receive emails about new products, features, and more.',
-  },
-  'Tags Input': { label: 'Enter your tech stack.', description: 'Add tags.' },
-  Textarea: {
-    label: 'Bio',
-    description: 'You can @mention other users and organizations.',
-  },
-  Password: {
-    label: 'Password',
-    description: 'Enter your password.',
-  },
-  Phone: {
-    label: 'Phone number',
-    description: 'Enter your phone number.',
-  },
-  Rating: {
-    label: 'Rating',
-    description: 'Please provide your rating.',
-  },
-  RadioGroup: {
-    label: 'Gender',
-    description: 'Select your gender',
-  },
-  'Credit Card': {
-    label: 'Credit Card Information',
-    description: 'Enter your credit card details for payment.',
-  },
-}
diff --git a/constants/menu.tsx b/constants/menu.tsx
deleted file mode 100644
index acedf9b..0000000
--- a/constants/menu.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import {
-  RiH1,
-  RiH2,
-  RiH3,
-  RiParagraph,
-  RiLayoutColumnLine,
-} from 'react-icons/ri'
-
-export interface CommandItem {
-  title: string
-  value: string
-  icon: React.ReactElement
-  isNew?: boolean
-}
-
-export const labelCommands: CommandItem[] = [
-  { title: 'Heading 1', value: 'h1', icon: <RiH1 /> },
-  { title: 'Heading 2', value: 'h2', icon: <RiH2 /> },
-  { title: 'Heading 3', value: 'h3', icon: <RiH3 /> },
-  { title: 'Paragraph', value: 'p', icon: <RiParagraph /> },
-]
-
-export const layoutCommands: CommandItem[] = [
-  { title: 'Columns', value: 'columns', icon: <RiLayoutColumnLine /> },
-]
-
-export const componentCommands: CommandItem[] = [
-  { title: 'Checkbox', value: 'checkbox', icon: <span>C</span> },
-  { title: 'Combobox', value: 'combobox', icon: <span>C</span> },
-  { title: 'Date Picker', value: 'date-picker', icon: <span>D</span> },
-  {
-    title: 'Datetime Picker',
-    value: 'datetime-picker',
-    icon: <span>D</span>,
-    isNew: true,
-  },
-  { title: 'File Input', value: 'file-input', icon: <span>F</span> },
-  { title: 'Input', value: 'input', icon: <span>I</span> },
-  { title: 'Input OTP', value: 'input-otp', icon: <span>I</span> },
-  {
-    title: 'Location Input',
-    value: 'location-input',
-    icon: <span>L</span>,
-    isNew: true,
-  },
-  { title: 'Multi Select', value: 'multi-select', icon: <span>M</span> },
-  { title: 'Password', value: 'password', icon: <span>P</span> },
-  { title: 'Phone', value: 'phone', icon: <span>P</span> },
-  { title: 'Select', value: 'select', icon: <span>S</span> },
-  {
-    title: 'Signature Input',
-    value: 'signature-input',
-    icon: <span>S</span>,
-    isNew: true,
-  },
-  { title: 'Slider', value: 'slider', icon: <span>S</span> },
-  {
-    title: 'Smart Datetime Input',
-    value: 'smart-datetime-input',
-    icon: <span>S</span>,
-    isNew: true,
-  },
-  { title: 'Switch', value: 'switch', icon: <span>S</span> },
-  { title: 'Tags Input', value: 'tags-input', icon: <span>T</span> },
-  { title: 'Textarea', value: 'textarea', icon: <span>T</span> },
-]
diff --git a/constants/special-components.ts b/constants/special-components.ts
deleted file mode 100644
index be32cdf..0000000
--- a/constants/special-components.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-export const SPECIAL_COMPONENTS = [
-  {
-    variant: 'Smart Datetime Input',
-    url: 'https://shadcn-extension.vercel.app/docs/smart-datetime-input',
-  },
-  {
-    variant: 'Datetime Picker',
-    url: 'https://shadcn-extension.vercel.app/docs/datetime-picker',
-  },
-  {
-    variant: 'File Input',
-    url: 'https://shadcn-extension.vercel.app/docs/file-upload',
-  },
-  {
-    variant: 'Tags Input',
-    url: 'https://shadcn-extension.vercel.app/docs/tags-input',
-  },
-  {
-    variant: 'Multi Select',
-    url: 'https://shadcn-extension.vercel.app/docs/multi-select',
-  },
-  {
-    variant: 'Password',
-    url: 'https://gist.github.com/mjbalcueva/b21f39a8787e558d4c536bf68e267398',
-  },
-  {
-    variant: 'Phone',
-    url: 'https://shadcn-phone-input.vercel.app/',
-  },
-  {
-    variant: 'Location Input',
-    url: 'https://www.shadcn-form.com/components/location-input',
-  },
-  {
-    variant: 'Signature Input',
-    url: 'https://www.shadcn-form.com/components/signature-input',
-  },
-  {
-    variant: 'Signature Pad',
-    url: 'https://www.shadcn-form.com/components/signature-pad',
-  },
-  {
-    variant: 'Credit Card',
-    url: 'https://www.shadcn-form.com/components/credit-card',
-  },
-] as const
diff --git a/constants/templates.ts b/constants/templates.ts
index 1eba70e..a95412c 100644
--- a/constants/templates.ts
+++ b/constants/templates.ts
@@ -1,92 +1,114 @@
-export interface TemplateEntry {
+import { getRegistryItem, type RegistryItem } from '@/lib/registry-catalog'
+
+/**
+ * How templates are grouped and branded on the site. Title, description,
+ * features, files and install command come from each template's registry
+ * block in registry.json.
+ */
+
+export type TemplateIcon =
+  | 'shield'
+  | 'key'
+  | 'database'
+  | 'flame'
+  | 'sparkles'
+  | 'mail'
+  | 'message'
+
+/** A page of a multi-page template, at the route its links point to. */
+export type TemplateFlow = {
+  id: string
   title: string
-  path: string
-  description: string
-  icon:
-    | 'shield'
-    | 'key'
-    | 'database'
-    | 'flame'
-    | 'sparkles'
-    | 'mail'
-    | 'message'
+  route: string
+}
+
+export const AUTH_FLOWS: TemplateFlow[] = [
+  { id: 'sign-in', title: 'Login', route: '/sign-in' },
+  { id: 'sign-up', title: 'Sign Up', route: '/sign-up' },
+  { id: 'forgot-password', title: 'Forgot Password', route: '/forgot-password' },
+  { id: 'reset-password', title: 'Reset Password', route: '/reset-password' },
+]
+
+type TemplateConfig = {
+  /** Registry block name. */
+  name: string
+  icon: TemplateIcon
   logoLabel: string
+  flows?: TemplateFlow[]
 }
 
-export interface Templates {
+export type Template = TemplateConfig &
+  Pick<RegistryItem, 'title' | 'description'> & {
+    category: string
+    path: string
+    features: string[]
+  }
+
+export type TemplateCategory = {
+  id: string
   title: string
   description: string
   path: string
-  sub: TemplateEntry[]
+  templates: Template[]
 }
 
-export const templates: Templates[] = [
+const categories: {
+  id: string
+  title: string
+  description: string
+  templates: TemplateConfig[]
+}[] = [
   {
+    id: 'authentication',
     title: 'Authentication',
     description:
       'Production-ready authentication patterns from base shadcn to provider-integrated variants.',
-    path: '/templates/authentication',
-    sub: [
-      {
-        title: 'Shadcn',
-        path: '/templates/authentication/shadcn-auth',
-        description:
-          'Authentication starter with login, signup, and recovery flows.',
-        icon: 'shield',
-        logoLabel: 'shadcn/ui',
-      },
-      {
-        title: 'Clerk Elements Auth',
-        path: '/templates/authentication/clerk-auth',
-        description:
-          'Clerk-style auth starter with sign-in, sign-up, and reset flows.',
-        icon: 'key',
-        logoLabel: 'Clerk',
-      },
-      {
-        title: 'Supabase Ready Auth',
-        path: '/templates/authentication/supabase-auth',
-        description: 'Email/password auth UI prepared for Supabase actions.',
-        icon: 'database',
-        logoLabel: 'Supabase',
-      },
-      {
-        title: 'Firebase Ready Auth',
-        path: '/templates/authentication/firebase-auth',
-        description: 'Firebase-focused sign-in design with provider actions.',
-        icon: 'flame',
-        logoLabel: 'Firebase',
-      },
-      {
-        title: 'Better Auth Ready',
-        path: '/templates/authentication/better-auth',
-        description: 'Composable auth screen structure for Better Auth stacks.',
-        icon: 'sparkles',
-        logoLabel: 'Better Auth',
-      },
+    templates: [
+      { name: 'shadcn-auth', icon: 'shield', logoLabel: 'shadcn/ui', flows: AUTH_FLOWS },
+      { name: 'clerk-auth', icon: 'key', logoLabel: 'Clerk', flows: AUTH_FLOWS },
+      { name: 'supabase-auth', icon: 'database', logoLabel: 'Supabase' },
+      { name: 'firebase-auth', icon: 'flame', logoLabel: 'Firebase' },
+      { name: 'better-auth', icon: 'sparkles', logoLabel: 'Better Auth' },
     ],
   },
   {
+    id: 'contact',
     title: 'Contact & Growth',
     description:
       'High-conversion forms for inbound contact, newsletter signup, and lead capture.',
-    path: '/templates/contact',
-    sub: [
-      {
-        title: 'Contact Form',
-        path: '/templates/contact/contact',
-        description:
-          'General inquiry form for support and sales conversations.',
-        icon: 'message',
-        logoLabel: 'Contact',
-      },
-      {
-        title: 'Newsletter Form',
-        path: '/templates/contact/newsletter',
-        description: 'Minimal email capture form for product updates.',
-        icon: 'mail',
-        logoLabel: 'Newsletter',
-      },
+    templates: [
+      { name: 'contact', icon: 'message', logoLabel: 'Contact' },
+      { name: 'newsletter', icon: 'mail', logoLabel: 'Newsletter' },
     ],
   },
 ]
+
+export const templateCategories: TemplateCategory[] = categories.map((category) => ({
+  id: category.id,
+  title: category.title,
+  description: category.description,
+  path: `/templates/${category.id}`,
+  templates: category.templates.map((config) => {
+    const item = getRegistryItem(config.name)
+    if (!item) throw new Error(`Template ${config.name} is missing from registry.json`)
+    return {
+      ...config,
+      category: category.id,
+      path: `/templates/${category.id}/${config.name}`,
+      title: item.title,
+      description: item.description,
+      features: item.meta?.features ?? [],
+    }
+  }),
+}))
+
+export function findTemplate(categoryId: string, name: string): Template | undefined {
+  return templateCategories
+    .find((category) => category.id === categoryId)
+    ?.templates.find((template) => template.name === name)
+}
+
+/** The flow shown for a `?flow=` value, defaulting to the first. */
+export function resolveFlow(template: Template, flowId?: string): TemplateFlow | undefined {
+  return template.flows?.find((flow) => flow.id === flowId) ?? template.flows?.[0]
+}
diff --git a/context/DropdownContext.tsx b/context/DropdownContext.tsx
deleted file mode 100644
index c8dfa67..0000000
--- a/context/DropdownContext.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { createContext, useContext, useState } from 'react'
-
-interface DropdownContextType {
-  countryValue: string
-  setCountryValue: (country: string) => void
-  openCountryDropdown: boolean
-  setOpenCountryDropdown: (open: boolean) => void
-  stateValue: string
-  setStateValue: (state: string) => void
-  openStateDropdown: boolean
-  setOpenStateDropdown: (open: boolean) => void
-}
-
-const DropdownContext = createContext<DropdownContextType | undefined>(
-  undefined,
-)
-
-export const DropdownProvider: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const [countryValue, setCountryValue] = useState('')
-  const [openCountryDropdown, setOpenCountryDropdown] = useState(false)
-  const [stateValue, setStateValue] = useState('')
-  const [openStateDropdown, setOpenStateDropdown] = useState(false)
-
-  return (
-    <DropdownContext.Provider
-      value={{
-        countryValue,
-        setCountryValue,
-        openCountryDropdown,
-        setOpenCountryDropdown,
-        stateValue,
-        setStateValue,
-        openStateDropdown,
-        setOpenStateDropdown,
-      }}
-    >
-      {children}
-    </DropdownContext.Provider>
-  )
-}
-
-export const useDropdown = () => {
-  const context = useContext(DropdownContext)
-  if (context === undefined) {
-    throw new Error('useDropdown must be used within a DropdownProvider')
-  }
-  return context
-}
diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts
deleted file mode 100644
index 8932bc5..0000000
--- a/hooks/use-toast.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-'use client'
-
-// Inspired by react-hot-toast library
-import * as React from 'react'
-
-import type { ToastActionElement, ToastProps } from '@/components/ui/toast'
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: 'ADD_TOAST',
-  UPDATE_TOAST: 'UPDATE_TOAST',
-  DISMISS_TOAST: 'DISMISS_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST',
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType['ADD_TOAST']
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType['UPDATE_TOAST']
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType['DISMISS_TOAST']
-      toastId?: ToasterToast['id']
-    }
-  | {
-      type: ActionType['REMOVE_TOAST']
-      toastId?: ToasterToast['id']
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: 'REMOVE_TOAST',
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case 'ADD_TOAST':
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case 'UPDATE_TOAST':
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t,
-        ),
-      }
-
-    case 'DISMISS_TOAST': {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t,
-        ),
-      }
-    }
-    case 'REMOVE_TOAST':
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, 'id'>
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: 'UPDATE_TOAST',
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id })
-
-  dispatch({
-    type: 'ADD_TOAST',
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
-  }
-}
-
-export { useToast, toast }
diff --git a/lib/form-code/index.ts b/lib/form-code/index.ts
new file mode 100644
index 0000000..cd9fd2e
--- /dev/null
+++ b/lib/form-code/index.ts
@@ -0,0 +1,116 @@
+import { getFieldVariant } from '@/components/field-variants'
+import { fieldShellSource } from '@/components/field-variants/field-shell'
+import {
+  formDefaultValuesSource,
+  formSchemaSource,
+  type FormFieldOrGroup,
+} from '@/components/field-variants/form'
+import { installCommand } from '@/lib/registry-catalog'
+import { reactHookForm } from './react-hook-form'
+import { tanstackForm } from './tanstack-form'
+import type { FormLibraryAdapter } from './types'
+
+export const FORM_LIBRARIES = {
+  REACT_HOOK_FORM: 'react-hook-form',
+  TANSTACK_FORM: 'tanstack-form',
+} as const
+
+export type FormLibrary = (typeof FORM_LIBRARIES)[keyof typeof FORM_LIBRARIES]
+
+export const FORM_LIBRARY_LABELS: Record<FormLibrary, string> = {
+  'react-hook-form': 'React Hook Form',
+  'tanstack-form': 'TanStack Form',
+}
+
+const adapters: Record<FormLibrary, FormLibraryAdapter> = {
+  'react-hook-form': reactHookForm,
+  'tanstack-form': tanstackForm,
+}
+
+export function isFormLibrary(value: unknown): value is FormLibrary {
+  return typeof value === 'string' && value in adapters
+}
+
+/** Every registry item the form's generated code imports, official and this site's. */
+export function formRegistryItems(fields: FormFieldOrGroup[]): string[] {
+  const items = new Set(['button', 'field', 'sonner'])
+  for (const field of fields.flat()) {
+    for (const item of getFieldVariant(field.variant).registryItems) items.add(item)
+  }
+  return [...items]
+}
+
+/** The one command that installs everything the generated form needs. */
+export function formInstallCommand(fields: FormFieldOrGroup[]): string {
+  return installCommand(formRegistryItems(fields))
+}
+
+const indent = (source: string, spaces: number) =>
+  source
+    .split('\n')
+    .map((line) => (line ? ' '.repeat(spaces) + line : line))
+    .join('\n')
+
+const FIELD_PARTS = ['Field', 'FieldContent', 'FieldDescription', 'FieldError', 'FieldGroup', 'FieldLabel']
+const COL_SPAN: Record<number, string> = { 2: 'col-span-6', 3: 'col-span-4' }
+
+/**
+ * A complete, self-contained form component for `library`: install command,
+ * imports, zod schema, default values, and one bound control per field.
+ * Unformatted; pass it through `formatCode` for display.
+ */
+export function generateFormCode(fields: FormFieldOrGroup[], library: FormLibrary): string {
+  const adapter = adapters[library]
+
+  const renderField = (field: (typeof fields)[number] & object) => {
+    if (Array.isArray(field)) throw new Error('rows are rendered by renderRow')
+    const variant = getFieldVariant(field.variant)
+    return adapter.field(field.name, (binding) =>
+      indent(fieldShellSource(field, binding, variant.control(field, binding)), 4),
+    )
+  }
+
+  const body = fields
+    .map((entry) =>
+      Array.isArray(entry)
+        ? `<div className="grid grid-cols-12 gap-4">\n${entry
+            .map(
+              (field) =>
+                `  <div className="${COL_SPAN[entry.length] ?? 'col-span-12'}">\n${indent(renderField(field), 4)}\n  </div>`,
+            )
+            .join('\n')}\n</div>`
+        : renderField(entry),
+    )
+    .map((source) => indent(source, 4))
+    .join('\n')
+
+  const markup = adapter.form(body)
+  const usedFieldParts = FIELD_PARTS.filter((part) => new RegExp(`<${part}[\\s>]`).test(markup))
+
+  const flat = fields.flat()
+  const imports = [
+    '"use client"',
+    '',
+    ...adapter.imports,
+    'import { toast } from "sonner"',
+    'import { z } from "zod"',
+    ...new Set(flat.flatMap((field) => getFieldVariant(field.variant).imports(field))),
+    'import { Button } from "@/components/ui/button"',
+    `import { ${usedFieldParts.join(', ')} } from "@/components/ui/field"`,
+  ]
+  const declarations = [...new Set(flat.flatMap((field) => getFieldVariant(field.variant).declarations ?? []))]
+
+  return [
+    `// ${formInstallCommand(fields)}`,
+    imports.join('\n'),
+    ...declarations,
+    formSchemaSource(fields),
+    `export default function MyForm() {
+${indent(adapter.setup(formDefaultValuesSource(fields)), 2)}
+
+  return (
+${indent(markup, 4)}
+  )
+}`,
+  ].join('\n\n')
+}
diff --git a/lib/form-code/react-hook-form.ts b/lib/form-code/react-hook-form.ts
new file mode 100644
index 0000000..738bb44
--- /dev/null
+++ b/lib/form-code/react-hook-form.ts
@@ -0,0 +1,48 @@
+import type { FormLibraryAdapter } from './types'
+
+const submitToast = `toast(
+      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+        <code className="text-white">{JSON.stringify(values, null, 2)}</code>
+      </pre>
+    )`
+
+export const reactHookForm: FormLibraryAdapter = {
+  imports: [
+    'import { Controller, useForm } from "react-hook-form"',
+    'import { zodResolver } from "@hookform/resolvers/zod"',
+  ],
+  setup: (defaultValues) => `const form = useForm<z.input<typeof formSchema>, unknown, z.output<typeof formSchema>>({
+  resolver: zodResolver(formSchema),
+  defaultValues: ${defaultValues},
+})
+
+function onSubmit(values: z.output<typeof formSchema>) {
+  try {
+    ${submitToast}
+  } catch (error) {
+    console.error("Form submission error", error)
+    toast.error("Failed to submit the form. Please try again.")
+  }
+}`,
+  form: (fields) => `<form onSubmit={form.handleSubmit(onSubmit)} className="mx-auto max-w-3xl py-10">
+  <FieldGroup>
+${fields}
+    <Button type="submit">Submit</Button>
+  </FieldGroup>
+</form>`,
+  field: (name, shell) => `<Controller
+  name=${JSON.stringify(name)}
+  control={form.control}
+  render={({ field, fieldState }) => (
+${shell({
+  id: 'field.name',
+  name: 'field.name',
+  value: 'field.value',
+  onChange: (value) => `field.onChange(${value})`,
+  onBlur: 'field.onBlur',
+  invalid: 'fieldState.invalid',
+  error: '<FieldError errors={[fieldState.error]} />',
+})}
+  )}
+/>`,
+}
diff --git a/lib/form-code/tanstack-form.ts b/lib/form-code/tanstack-form.ts
new file mode 100644
index 0000000..01307b5
--- /dev/null
+++ b/lib/form-code/tanstack-form.ts
@@ -0,0 +1,52 @@
+import type { FormLibraryAdapter } from './types'
+
+export const tanstackForm: FormLibraryAdapter = {
+  imports: ['import { useForm } from "@tanstack/react-form"'],
+  setup: (defaultValues) => `const form = useForm({
+  defaultValues: ${defaultValues} as z.input<typeof formSchema>,
+  validators: {
+    onSubmit: formSchema,
+  },
+  onSubmit: async ({ value }) => {
+    try {
+      toast(
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(value, null, 2)}</code>
+        </pre>
+      )
+    } catch (error) {
+      console.error("Form submission error", error)
+      toast.error("Failed to submit the form. Please try again.")
+    }
+  },
+})`,
+  form: (fields) => `<form
+  onSubmit={(event) => {
+    event.preventDefault()
+    form.handleSubmit()
+  }}
+  className="mx-auto max-w-3xl py-10"
+>
+  <FieldGroup>
+${fields}
+    <Button type="submit">Submit</Button>
+  </FieldGroup>
+</form>`,
+  field: (name, shell) => `<form.Field
+  name=${JSON.stringify(name)}
+  children={(field) => {
+    const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid
+    return (
+${shell({
+  id: 'field.name',
+  name: 'field.name',
+  value: 'field.state.value',
+  onChange: (value) => `field.handleChange(${value})`,
+  onBlur: 'field.handleBlur',
+  invalid: 'isInvalid',
+  error: '<FieldError errors={field.state.meta.errors} />',
+})}
+    )
+  }}
+/>`,
+}
diff --git a/lib/form-code/types.ts b/lib/form-code/types.ts
new file mode 100644
index 0000000..e68d35e
--- /dev/null
+++ b/lib/form-code/types.ts
@@ -0,0 +1,15 @@
+import type { Binding } from '@/components/field-variants'
+
+/**
+ * What differs between form libraries. The generator owns everything else:
+ * imports, schema, layout, and each variant's control.
+ */
+export type FormLibraryAdapter = {
+  imports: string[]
+  /** Statements at the top of the component: the form hook and submit handler. */
+  setup: (defaultValues: string) => string
+  /** The `<form>` element around the rendered fields. */
+  form: (fields: string) => string
+  /** One field, given its name and the shell rendered through `binding`. */
+  field: (name: string, shell: (binding: Binding & { error: string }) => string) => string
+}
diff --git a/lib/format-code.ts b/lib/format-code.ts
new file mode 100644
index 0000000..93a1327
--- /dev/null
+++ b/lib/format-code.ts
@@ -0,0 +1,17 @@
+/**
+ * Formats generated TSX with prettier's standalone build. Loaded on demand
+ * so the playground only pays for it when the Code tab opens.
+ */
+export async function formatCode(source: string): Promise<string> {
+  const [prettier, babel, estree] = await Promise.all([
+    import('prettier/standalone'),
+    import('prettier/plugins/babel'),
+    import('prettier/plugins/estree'),
+  ])
+  return prettier.format(source, {
+    parser: 'babel-ts',
+    plugins: [babel, estree],
+    semi: false,
+    printWidth: 90,
+  })
+}
diff --git a/lib/json-schema-generator.ts b/lib/json-schema-generator.ts
deleted file mode 100644
index 7f38b00..0000000
--- a/lib/json-schema-generator.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { z } from 'zod'
-
-export interface JsonSchemaOptions {
-  title?: string
-  description?: string
-  definitions?: Record<string, any>
-}
-
-export const generateJsonSchema = (
-  zodSchema: z.ZodType,
-  options: JsonSchemaOptions = {}
-) => {
-  const schema = z.toJSONSchema(zodSchema, {
-    target: 'draft-7',
-    unrepresentable: 'any',
-    io: 'input',
-    override: (ctx) => {
-      if (ctx.zodSchema._zod.def.type === 'date') {
-        ctx.jsonSchema.type = 'string'
-        ctx.jsonSchema.format = 'date-time'
-      }
-    },
-  }) as Record<string, any>
-  const { $schema, ...body } = schema
-
-  const jsonSchema: Record<string, any> = options.title
-    ? {
-        $ref: `#/definitions/${options.title}`,
-        definitions: { ...options.definitions, [options.title]: body },
-        $schema,
-      }
-    : { ...body, ...(options.definitions && { definitions: options.definitions }), $schema }
-
-  if (options.description) {
-    jsonSchema.description = options.description
-  }
-
-  return jsonSchema
-}
-
-export const generateFormJsonSchema = (
-  formFields: any[],
-  options: JsonSchemaOptions = {}
-) => {
-  const schemaObject: Record<string, z.ZodType> = {}
-  
-  formFields.forEach((field) => {
-    if (field.variant === 'Label') return
-    
-    let fieldSchema: z.ZodType = z.string()
-    
-    switch (field.variant) {
-      case 'Checkbox':
-        fieldSchema = z.boolean()
-        break
-      case 'Date Picker':
-        fieldSchema = z.union([z.string(), z.date()])
-        break
-      case 'Input':
-        if (field.type === 'email') {
-          fieldSchema = z.string().email()
-        } else if (field.type === 'number') {
-          fieldSchema = z.coerce.number()
-        } else {
-          fieldSchema = z.string()
-        }
-        break
-      case 'Number':
-        fieldSchema = z.coerce.number()
-        break
-      case 'Switch':
-        fieldSchema = z.boolean()
-        break
-      case 'Tags Input':
-      case 'Multi Select':
-        fieldSchema = z.array(z.string()).min(1)
-        break
-      default:
-        fieldSchema = z.string()
-    }
-    
-    if (field.required !== true) {
-      fieldSchema = fieldSchema.optional()
-    }
-    
-    schemaObject[field.name] = fieldSchema
-  })
-  
-  const zodSchema = z.object(schemaObject)
-  return generateJsonSchema(zodSchema, options)
-}
-
-export const downloadJsonSchema = (jsonSchema: any, filename: string = 'form-schema.json') => {
-  const blob = new Blob([JSON.stringify(jsonSchema, null, 2)], {
-    type: 'application/json'
-  })
-  const url = URL.createObjectURL(blob)
-  const link = document.createElement('a')
-  link.href = url
-  link.download = filename
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
-  URL.revokeObjectURL(url)
-}
diff --git a/data/countries.json b/lib/location-data/countries.json
similarity index 100%
rename from data/countries.json
rename to lib/location-data/countries.json
diff --git a/data/states.json b/lib/location-data/states.json
similarity index 100%
rename from data/states.json
rename to lib/location-data/states.json
diff --git a/lib/registry-catalog.ts b/lib/registry-catalog.ts
new file mode 100644
index 0000000..3e95aab
--- /dev/null
+++ b/lib/registry-catalog.ts
@@ -0,0 +1,75 @@
+import registry from '@/registry.json'
+
+/**
+ * The Registry catalog: the one place that knows which registry items this
+ * site publishes and how users install them. Everything else (docs pages,
+ * sidebars, playground notices, generated code) asks the catalog instead of
+ * repeating names, descriptions, dependencies or URLs.
+ *
+ * `registry.json` is the source of truth; `shadcn build` turns it into
+ * `public/r/<name>.json`.
+ */
+
+export const REGISTRY_ORIGIN = 'https://www.shadcn-form.com'
+export const REGISTRY_NAMESPACE = '@shadcn-form'
+
+export type RegistryItemType =
+  | 'registry:ui'
+  | 'registry:block'
+  | 'registry:component'
+  | 'registry:lib'
+  | 'registry:hook'
+  | 'registry:file'
+  | 'registry:page'
+
+export type RegistryItemFile = {
+  path: string
+  type: string
+  target?: string
+}
+
+export type RegistryItem = {
+  name: string
+  type: RegistryItemType
+  title: string
+  description: string
+  categories?: string[]
+  dependencies?: string[]
+  devDependencies?: string[]
+  registryDependencies?: string[]
+  envVars?: Record<string, string>
+  docs?: string
+  meta?: { features?: string[] }
+  files: RegistryItemFile[]
+}
+
+const items = registry.items as RegistryItem[]
+const byName = new Map(items.map((item) => [item.name, item]))
+
+export function listRegistryItems(type?: RegistryItemType): RegistryItem[] {
+  return type ? items.filter((item) => item.type === type) : items
+}
+
+export function getRegistryItem(name: string): RegistryItem | undefined {
+  return byName.get(name)
+}
+
+export function isRegistryItem(name: string): boolean {
+  return byName.has(name)
+}
+
+export function registryItemUrl(name: string): string {
+  return `${REGISTRY_ORIGIN}/r/${name}.json`
+}
+
+/**
+ * The command that installs one or more items. Items are addressed by URL so
+ * the command works without any `registries` entry in the user's
+ * components.json. Unknown names are treated as official shadcn items.
+ */
+export function installCommand(names: string | string[]): string {
+  const list = (Array.isArray(names) ? names : [names]).map((name) =>
+    isRegistryItem(name) ? registryItemUrl(name) : name,
+  )
+  return `npx shadcn@latest add ${list.join(' ')}`
+}
diff --git a/lib/utils.ts b/lib/utils.ts
index 9aab218..7326ab3 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -1,6 +1,5 @@
 import { clsx, type ClassValue } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import { js_beautify } from 'js-beautify'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -16,25 +15,3 @@ export const lowerCase = (str: string): string => {
 
 export const isNotEmpty = (value: string | undefined) =>
   value!.trim().length > 0
-
-export function formatJSXCode(code: string): string {
-  return js_beautify(code, {
-    indent_size: 2,
-    indent_char: ' ',
-    max_preserve_newlines: 2,
-    preserve_newlines: true,
-    keep_array_indentation: false,
-    break_chained_methods: false,
-    // indent_scripts: "normal",
-    // brace_style: "collapse,preserve-inline",
-    space_before_conditional: true,
-    unescape_strings: false,
-    jslint_happy: false,
-    end_with_newline: false,
-    wrap_line_length: 0,
-    // indent_inner_html: false,
-    comma_first: false,
-    e4x: true,
-    indent_empty_lines: false,
-  })
-}
diff --git a/lib/validation-utils.ts b/lib/validation-utils.ts
deleted file mode 100644
index 19e00ec..0000000
--- a/lib/validation-utils.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { z } from 'zod'
-
-export const createFormSchema = (fields: Record<string, z.ZodTypeAny>) => {
-  return z.object(fields)
-}
-
-export const addOptionalField = (schema: z.ZodTypeAny) => {
-  return schema.optional()
-}
-
-export const addDefaultValue = (schema: z.ZodTypeAny, defaultValue: any) => {
-  return schema.default(defaultValue)
-}
-
-export const createArraySchema = (elementSchema: z.ZodTypeAny, minItems: number = 1) => {
-  return z.array(elementSchema).min(minItems, { message: `Please select at least ${minItems} item${minItems > 1 ? 's' : ''}` })
-}
-
-export const createUnionSchema = (schemas: z.ZodTypeAny[]) => {
-  return z.union(schemas as [z.ZodTypeAny, z.ZodTypeAny, ...z.ZodTypeAny[]])
-}
-
-export const createRefineSchema = (
-  schema: z.ZodTypeAny,
-  refineFn: (data: any) => boolean,
-  errorMessage: string
-) => {
-  return schema.refine(refineFn, { message: errorMessage })
-}
diff --git a/next.config.mjs b/next.config.mjs
index caae20e..696da19 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,6 +2,12 @@ import path from 'node:path'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  async redirects() {
+    return [
+      // Registry items moved from /registry/<name>.json to shadcn's default /r/<name>.json.
+      { source: '/registry/:path*', destination: '/r/:path*', permanent: true },
+    ]
+  },
   webpack(config) {
     const fileLoaderRule = config.module.rules.find((rule) =>
       rule.test?.test?.('.svg'),
diff --git a/package.json b/package.json
index 4d63909..c3639ab 100644
--- a/package.json
+++ b/package.json
@@ -3,45 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --webpack",
-    "build": "next build --webpack",
+    "dev": "pnpm registry:build && next dev --webpack",
+    "build": "pnpm registry:build && next build --webpack",
     "postbuild": "next-sitemap",
     "start": "next start",
     "lint": "next lint",
-    "test": "vitest"
+    "typecheck": "next typegen && tsc --noEmit",
+    "test": "vitest",
+    "registry:build": "shadcn build",
+    "registry:validate": "shadcn registry validate"
   },
   "dependencies": {
-    "@blocknote/core": "^0.55.0",
-    "@blocknote/mantine": "^0.55.0",
-    "@blocknote/react": "^0.55.0",
-    "@blocknote/shadcn": "^0.55.0",
-    "@blocknote/xl-multi-column": "^0.55.0",
+    "@base-ui/react": "^1.8.0",
     "@hookform/resolvers": "5.9.1",
     "@next/third-parties": "16.3.6",
-    "@radix-ui/react-accordion": "^1.2.20",
-    "@radix-ui/react-avatar": "^1.2.6",
-    "@radix-ui/react-checkbox": "^1.3.11",
-    "@radix-ui/react-context-menu": "^2.3.7",
-    "@radix-ui/react-dialog": "^1.1.23",
-    "@radix-ui/react-dropdown-menu": "^2.1.24",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.23",
-    "@radix-ui/react-progress": "^1.1.16",
-    "@radix-ui/react-radio-group": "^1.4.7",
-    "@radix-ui/react-scroll-area": "^1.2.18",
-    "@radix-ui/react-select": "^2.3.7",
-    "@radix-ui/react-separator": "^1.1.15",
-    "@radix-ui/react-slider": "^1.4.7",
-    "@radix-ui/react-slot": "^1.3.3",
-    "@radix-ui/react-switch": "^1.3.7",
-    "@radix-ui/react-tabs": "^1.1.21",
-    "@radix-ui/react-toast": "^1.2.23",
-    "@radix-ui/react-tooltip": "^1.2.16",
     "@tailwindcss/postcss": "^4.3.3",
     "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-form": "^1.33.5",
-    "@tanstack/zod-form-adapter": "^0.42.1",
     "@typescript-eslint/parser": "^8.70.1",
     "@vercel/analytics": "^2.0.1",
     "chrono-node": "^2.10.1",
@@ -51,8 +29,6 @@
     "date-fns": "^4.4.0",
     "framer-motion": "^13.4.4",
     "input-otp": "^1.5.0",
-    "js-beautify": "^2.0.3",
-    "lodash": "^4.18.1",
     "lucide-react": "^1.48.0",
     "next": "16.3.6",
     "next-sitemap": "^4.2.3",
@@ -60,21 +36,22 @@
     "next-view-transitions": "^0.3.5",
     "nextjs-toploader": "^3.9.17",
     "posthog-js": "^1.434.15",
+    "prettier": "^3.9.9",
     "prism-react-renderer": "^2.4.1",
     "react": "19.3.0",
     "react-day-picker": "^10.0.1",
     "react-dom": "19.3.0",
     "react-dropzone": "^20.1.2",
-    "react-grid-layout": "^2.2.4",
     "react-hook-form": "^7.89.0",
     "react-icons": "^5.7.0",
     "react-phone-number-input": "^3.4.18",
     "react-tweet": "^3.3.1",
+    "shadcn": "^4.21.0",
     "sharp": "^0.35.5",
     "sonner": "^2.0.8",
     "tailwind-merge": "^3.7.0",
-    "tailwindcss-animate": "^1.0.7",
     "timescape": "^0.9.1",
+    "tw-animate-css": "^1.4.0",
     "use-debounce": "^10.1.1",
     "vaul": "^1.1.2",
     "zod": "^4.6.5"
@@ -83,8 +60,6 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
-    "@types/js-beautify": "^1.14.3",
-    "@types/lodash": "^4.17.25",
     "@types/node": "^26.6.3",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
@@ -93,7 +68,6 @@
     "eslint-config-next": "16.3.6",
     "jsdom": "^30.1.1",
     "postcss": "^8.5.28",
-    "prettier": "^3.9.9",
     "raw-loader": "^4.0.2",
     "tailwindcss": "^4.3.3",
     "typescript": "^7.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 709a49f..272bd9e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,87 +12,15 @@ importers:
 
   .:
     dependencies:
-      '@blocknote/core':
-        specifier: ^0.55.0
-        version: 0.55.0(@types/hast@3.0.5)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@blocknote/mantine':
-        specifier: ^0.55.0
-        version: 0.55.0(@floating-ui/dom@1.8.0)(@mantine/core@7.16.2(@mantine/hooks@7.16.2(react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@mantine/hooks@7.16.2(react@19.3.0))(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@blocknote/react':
-        specifier: ^0.55.0
-        version: 0.55.0(@floating-ui/dom@1.8.0)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@blocknote/shadcn':
-        specifier: ^0.55.0
-        version: 0.55.0(@date-fns/tz@1.5.0)(@floating-ui/dom@1.8.0)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(tailwindcss@4.3.3)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@blocknote/xl-multi-column':
-        specifier: ^0.55.0
-        version: 0.55.0(@floating-ui/dom@1.8.0)(@tiptap/pm@3.31.3)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
+      '@base-ui/react':
+        specifier: ^1.8.0
+        version: 1.8.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@hookform/resolvers':
         specifier: 5.9.1
-        version: 5.9.1(ajv-formats@2.1.1(ajv@6.15.0))(ajv@6.15.0)(react-hook-form@7.89.0(@types/react@19.3.0)(react@19.3.0))(zod@4.6.5)
+        version: 5.9.1(ajv-formats@2.1.1(ajv@8.20.0))(ajv@8.20.0)(react-hook-form@7.89.0(@types/react@19.3.0)(react@19.3.0))(zod@4.6.5)
       '@next/third-parties':
         specifier: 16.3.6
         version: 16.3.6(next@16.3.6(@babel/core@7.29.7)(@types/node@26.6.3)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-accordion':
-        specifier: ^1.2.20
-        version: 1.2.20(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-avatar':
-        specifier: ^1.2.6
-        version: 1.2.6(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.3.11
-        version: 1.3.11(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-context-menu':
-        specifier: ^2.3.7
-        version: 2.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-dialog':
-        specifier: ^1.1.23
-        version: 1.1.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-dropdown-menu':
-        specifier: ^2.1.24
-        version: 2.1.24(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-icons':
-        specifier: ^1.3.2
-        version: 1.3.2(react@19.3.0)
-      '@radix-ui/react-label':
-        specifier: ^2.1.15
-        version: 2.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-popover':
-        specifier: ^1.1.23
-        version: 1.1.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-progress':
-        specifier: ^1.1.16
-        version: 1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.4.7
-        version: 1.4.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-scroll-area':
-        specifier: ^1.2.18
-        version: 1.2.18(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-select':
-        specifier: ^2.3.7
-        version: 2.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-separator':
-        specifier: ^1.1.15
-        version: 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slider':
-        specifier: ^1.4.7
-        version: 1.4.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slot':
-        specifier: ^1.3.3
-        version: 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.3.7
-        version: 1.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-tabs':
-        specifier: ^1.1.21
-        version: 1.1.21(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-toast':
-        specifier: ^1.2.23
-        version: 1.2.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-tooltip':
-        specifier: ^1.2.16
-        version: 1.2.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@tailwindcss/postcss':
         specifier: ^4.3.3
         version: 4.3.3
@@ -102,9 +30,6 @@ importers:
       '@tanstack/react-form':
         specifier: ^1.33.5
         version: 1.33.5(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@tanstack/zod-form-adapter':
-        specifier: ^0.42.1
-        version: 0.42.1(zod@4.6.5)
       '@typescript-eslint/parser':
         specifier: ^8.70.1
         version: 8.70.1(eslint@10.11.0(jiti@2.7.0))(typescript@7.0.2)
@@ -132,12 +57,6 @@ importers:
       input-otp:
         specifier: ^1.5.0
         version: 1.5.0(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      js-beautify:
-        specifier: ^2.0.3
-        version: 2.0.3
-      lodash:
-        specifier: ^4.18.1
-        version: 4.18.1
       lucide-react:
         specifier: ^1.48.0
         version: 1.48.0(react@19.3.0)
@@ -159,6 +78,9 @@ importers:
       posthog-js:
         specifier: ^1.434.15
         version: 1.434.15(@types/react@19.3.0)(react@19.3.0)
+      prettier:
+        specifier: ^3.9.9
+        version: 3.9.9
       prism-react-renderer:
         specifier: ^2.4.1
         version: 2.4.1(react@19.3.0)
@@ -174,9 +96,6 @@ importers:
       react-dropzone:
         specifier: ^20.1.2
         version: 20.1.2(@types/react@19.3.0)(react@19.3.0)
-      react-grid-layout:
-        specifier: ^2.2.4
-        version: 2.2.4(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       react-hook-form:
         specifier: ^7.89.0
         version: 7.89.0(@types/react@19.3.0)(react@19.3.0)
@@ -189,6 +108,9 @@ importers:
       react-tweet:
         specifier: ^3.3.1
         version: 3.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      shadcn:
+        specifier: ^4.21.0
+        version: 4.21.0(typescript@7.0.2)
       sharp:
         specifier: ^0.35.5
         version: 0.35.5(@types/node@26.6.3)
@@ -198,12 +120,12 @@ importers:
       tailwind-merge:
         specifier: ^3.7.0
         version: 3.7.0
-      tailwindcss-animate:
-        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@4.3.3)
       timescape:
         specifier: ^0.9.1
         version: 0.9.1(preact@10.29.8)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       use-debounce:
         specifier: ^10.1.1
         version: 10.1.1(react@19.3.0)
@@ -223,12 +145,6 @@ importers:
       '@testing-library/react':
         specifier: ^16.3.3
         version: 16.3.3(@testing-library/dom@10.4.2)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@types/js-beautify':
-        specifier: ^1.14.3
-        version: 1.14.3
-      '@types/lodash':
-        specifier: ^4.17.25
-        version: 4.17.25
       '@types/node':
         specifier: ^26.6.3
         version: 26.6.3
@@ -253,9 +169,6 @@ importers:
       postcss:
         specifier: ^8.5.28
         version: 8.5.28
-      prettier:
-        specifier: ^3.9.9
-        version: 3.9.9
       raw-loader:
         specifier: ^4.0.2
         version: 4.0.2(webpack@5.97.1(postcss@8.5.28))
@@ -874,56 +787,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@blocknote/core@0.55.0':
-    resolution: {integrity: sha512-QRRnOuVDrt0pPwaCXQ/dc4gxQ3KEGkBC8Hh4hyl4lxOU+5TMLNKKX9gZgeGkq7WKVK2EZbnPea6pcx25aS5SGA==}
-    peerDependencies:
-      '@y/prosemirror': ^2.0.0-6
-      '@y/protocols': ^1.0.6-rc.1
-      '@y/y': ^14.0.0-rc.23
-      y-prosemirror: ^1.3.7
-      y-protocols: ^1.0.6
-      yjs: ^13.6.27
-    peerDependenciesMeta:
-      '@y/prosemirror':
-        optional: true
-      '@y/protocols':
-        optional: true
-      '@y/y':
-        optional: true
-      y-prosemirror:
-        optional: true
-      y-protocols:
-        optional: true
-      yjs:
-        optional: true
-
-  '@blocknote/mantine@0.55.0':
-    resolution: {integrity: sha512-W3PiMX3I3Otpen2dZHXY83/xT+QPAlxUt2vUIAqeEy5hhCDIuJuI/JdBcfAPk3SGyM2lGEdAusbELnYWn8Jzjg==}
-    peerDependencies:
-      '@mantine/core': ^8.3.11 || ^9.0.2
-      '@mantine/hooks': ^8.3.11 || ^9.0.2
-      react: ^18.0 || ^19.0 || >= 19.0.0-rc
-      react-dom: ^18.0 || ^19.0 || >= 19.0.0-rc
-
-  '@blocknote/react@0.55.0':
-    resolution: {integrity: sha512-t+4N8+3xHhlnesxpWhF3FZnoHcnwhO+VgHiz6WEx7kTOTgk2YH84EOD7FsPh/hCm3I9MH9cHuiMfo6W6PHj/9w==}
-    peerDependencies:
-      react: ^18.0 || ^19.0 || >= 19.0.0-rc
-      react-dom: ^18.0 || ^19.0 || >= 19.0.0-rc
-
-  '@blocknote/shadcn@0.55.0':
-    resolution: {integrity: sha512-r00Rijcn0Gb9btkjEf1ojthQuJ5hxsHMRo/ljrk3xIlC7hlskEyR9/50E1Su9CIYTf61nzebTtHUZiXYyNx59A==}
-    peerDependencies:
-      react: ^18.0 || ^19.0 || >= 19.0.0-rc
-      react-dom: ^18.0 || ^19.0 || >= 19.0.0-rc
-      tailwindcss: ^4.1.12
-
-  '@blocknote/xl-multi-column@0.55.0':
-    resolution: {integrity: sha512-UwIzgfFFTGmHGts8WUkQFmcki+EzAqtWyuLMi0acxq1PGoYoFD8KzK9prI2D2SwQM6gylKpLXKRN35x+cprbfw==}
-    peerDependencies:
-      react: ^18.0 || ^19.0 || >= 19.0.0-rc
-      react-dom: ^18.0 || ^19.0 || >= 19.0.0-rc
-
   '@bramus/specificity@2.4.2':
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
     hasBin: true
@@ -976,6 +839,13 @@ packages:
   '@date-fns/tz@1.5.0':
     resolution: {integrity: sha512-lwYN/vDPeNRULcepoE/LO2Pgx+7/RV+S9ARfbc9lr2DtGkOD7pAiruHvbR1RX3Qyf6ja47EWJDMsNK5vK08DJg==}
 
+  '@dotenvx/dotenvx@1.75.1':
+    resolution: {integrity: sha512-/BITOC9dmS/edY2zQwZNicQ059O6RKabtQfyEafV0nGtfYRNHYy1DIPiYVcov40+tob9hfmBnbR963dS+EQ1DQ==}
+    hasBin: true
+
+  '@dotenvx/primitives@0.8.0':
+    resolution: {integrity: sha512-VYJy0uhFm9zTJ1TxBaW/pA8bjbOM/OttaNMwZ1RHG4JKyRG7DhSdiqD1ipQoAyoD22olUtxbP78W9xY3Wd11bg==}
+
   '@emnapi/core@1.10.0':
     resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
 
@@ -988,9 +858,6 @@ packages:
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
-  '@emoji-mart/data@1.2.1':
-    resolution: {integrity: sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==}
-
   '@eslint-community/eslint-utils@4.10.1':
     resolution: {integrity: sha512-cuadcxVFE8sDK6iWJbs8Sn0av2Nrh2QSGQhVlBW9AaAHqHwjWsZHT8LJ4hFGPh7ASBV2deFdM7H/DPjulmh8rg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1048,27 +915,14 @@ packages:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
 
-  '@floating-ui/react@0.26.28':
-    resolution: {integrity: sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==}
-    peerDependencies:
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-
-  '@floating-ui/react@0.27.20':
-    resolution: {integrity: sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==}
-    peerDependencies:
-      react: '>=17.0.0'
-      react-dom: '>=17.0.0'
-
   '@floating-ui/utils@0.2.12':
     resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
 
-  '@handlewithcare/prosemirror-inputrules@0.1.4':
-    resolution: {integrity: sha512-GMqlBeG2MKM+tXEFd2N+wIv5z4VvJTg8JtfJUrdjvFq2W6v+AW8oTgiWyFw8L3iEQwvtQcVJxU873iB0LXUNNw==}
+  '@hono/node-server@2.1.1':
+    resolution: {integrity: sha512-ELuehkj5VCBdgEw9zs+ivkKwyzzUCSQuE96YmiPvn1ECBoZCczbFXJLeEGMTYjphP6gydh4pHMqEYPVMYUVgQg==}
+    engines: {node: '>=20'}
     peerDependencies:
-      prosemirror-model: ^1.0.0
-      prosemirror-state: ^1.0.0
-      prosemirror-view: ^1.0.0
+      hono: ^4
 
   '@hookform/resolvers@5.9.1':
     resolution: {integrity: sha512-7b7vsbraJxKgjVSA1Nur9tLwj539WGJUBLA7QNvXnFoT2pM5Z7G+6rlukk4B2/QrTZy6huRtH6wKeESPKuIr6w==}
@@ -1342,17 +1196,15 @@ packages:
   '@keyv/serialize@1.1.1':
     resolution: {integrity: sha512-dXn3FZhPv0US+7dtJsIi2R+c7qWYiReoEh5zUntWCf4oSpMNib8FDhSoed6m3QyZdx5hK7iLFkYk3rNxwt8vTA==}
 
-  '@mantine/core@7.16.2':
-    resolution: {integrity: sha512-6dwFz+8HrOqFan7GezgpoWyZSCxedh10S8iILGVsc3GXiD4gzo+3VZndZKccktkYZ3GVC9E3cCS3SxbiyKSAVw==}
-    peerDependencies:
-      '@mantine/hooks': 7.16.2
-      react: ^18.x || ^19.x
-      react-dom: ^18.x || ^19.x
-
-  '@mantine/hooks@7.16.2':
-    resolution: {integrity: sha512-ZFHQhDi9T+r6VR5NEeE47gigPPIAHVIKDOCWsCsbCqHc3yz5l8kiO2RdfUmsTKV2KD/AiXnAw4b6pjQEP58GOg==}
+  '@modelcontextprotocol/sdk@1.30.1':
+    resolution: {integrity: sha512-H2HxLvC3HDNybePJaLdSrU1hhUK5iQw+WvV1b01myFyI7sdVGe1u/IPTE5D9fGCiJDVtgMV/lmFkQXLmQyIFYA==}
+    engines: {node: '>=18'}
     peerDependencies:
-      react: ^18.x || ^19.x
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
 
   '@napi-rs/wasm-runtime@1.2.4':
     resolution: {integrity: sha512-AJxoUD2/15ESHbvpcyjU274nsAPLuOtPHCk0vKJM5pj//Fg/B1FXNWjPnXTT9PymCYYiHo4zPj0ZomXBKhoy7g==}
@@ -1440,9 +1292,6 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
-  '@one-ini/wasm@0.2.1':
-    resolution: {integrity: sha512-TUqERXGNTifZ9y2g3wPxQrw3HpHv/02DsW3D90T9x0hhonrL1ZqpSmNrU2XkoIq0fP1N6gZfVQzy2Fw1ZvGBNg==}
-
   '@oxc-project/types@0.151.0':
     resolution: {integrity: sha512-J1yXrIlNDZVzE3ada310xeAw7nH8yCAyLPuUIsjKatFPmfn5bS1oW+cM+QsGOtVWd5nhSpbwZWx/rue+r5Z+PA==}
 
@@ -1455,90 +1304,9 @@ packages:
   '@posthog/types@1.412.4':
     resolution: {integrity: sha512-Q7lV9O9TbLngjOYw1ucm3bS3tn48xb1B4ZQdDy8gv7yfKe99hCTeWYG4xZ36nJM80VxpTF9TriiJt5hngDOkBg==}
 
-  '@radix-ui/number@1.1.3':
-    resolution: {integrity: sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA==}
-
   '@radix-ui/primitive@1.1.7':
     resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
 
-  '@radix-ui/react-accordion@1.2.20':
-    resolution: {integrity: sha512-jDhG9FvAEnlhnjrsINbNXcUa4G+L1KqSkJSunkbKEzFRcAb52jvM0PjPxPRvhe1HNc5F5yc0yzzWeeqlH4yBIg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-arrow@1.1.15':
-    resolution: {integrity: sha512-v4zggRcjadnI+ClKDuijlQEW4tw3NoaeHc/PwpKnLoLLKNUG4InLegkstooLcRIUWCs+8L22dGURCVuFfOKfnA==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-avatar@1.2.6':
-    resolution: {integrity: sha512-4ULOTJ/mqy2hT9GlWa/MFHxHSvH3nJzHnZM1waNsc5Bonv7i70aNenghXmD97S6OJ81ekXONGGt4nT1r0PfEdA==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-checkbox@1.3.11':
-    resolution: {integrity: sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collapsible@1.1.20':
-    resolution: {integrity: sha512-mcGesGplBnzN2sbvJETzpCNfSMyPnb29q1GRLU+Ib7bJrpIG2ywmRoh2V5VbA2uNvKikKUlVbAPks7JDjz4A8Q==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-collection@1.1.15':
-    resolution: {integrity: sha512-9W+B9NPF0NaaPh/1NJd3+KqsnlLqU9H7T2rvww+fp+T/evVXdNAyYcnfRQZFOjkR1ajQp3yORlqnI8soawLvNA==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-compose-refs@1.1.5':
     resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
     peerDependencies:
@@ -1548,19 +1316,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-context-menu@2.3.7':
-    resolution: {integrity: sha512-CtXP35dxaB5T3zXSd+E3uHe/QpXcpYnZmxp6OaIbfthtfW4wyb77M23BG+bwIJDtsMwEP/YssdsmNyZu7jhWew==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-context@1.2.2':
     resolution: {integrity: sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==}
     peerDependencies:
@@ -1583,15 +1338,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-direction@1.1.4':
-    resolution: {integrity: sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@radix-ui/react-dismissable-layer@1.1.19':
     resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
     peerDependencies:
@@ -1605,19 +1351,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-dropdown-menu@2.1.24':
-    resolution: {integrity: sha512-geq8l2rJkxvkXsT9RMgtUE3P8pITFpTsvYpbySi1IH4fZEABD/Gp85myayFgxk0ktljGMJnCbeFkyTusvSvv7g==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-focus-guards@1.1.6':
     resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
     peerDependencies:
@@ -1640,11 +1373,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-icons@1.3.2':
-    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
-    peerDependencies:
-      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
-
   '@radix-ui/react-id@1.1.4':
     resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
     peerDependencies:
@@ -1654,58 +1382,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-label@2.1.15':
-    resolution: {integrity: sha512-o/rdYEwZTTo5tjknnPeyQFU45kUC4i/XyeDPP+HGyi6XqpOP6Zf5Ya5vh/Yfe9Id5JiuWnnAx2XqIeD3UYZt0g==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-menu@2.1.24':
-    resolution: {integrity: sha512-uW7RVuU6Lp/ZtfeY4b3kL32zccgEWvPv1+cf17ubYzHa9cL8AHokmk36cG/XEiH/smbQvumnieXX9j/e9RqJWA==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popover@1.1.23':
-    resolution: {integrity: sha512-mw58MrBlyHWFisTOYignD0vf/3gdcgAR+9of1s9G/38CbFiUwH1nCDkc0AUM9IrXFgN5Ue8n45j9WCgyM1sbiQ==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-popper@1.3.7':
-    resolution: {integrity: sha512-UsJrrd7w4wuKKTdvd/DNERVlwSlUcyXzjhyDwBk+3aPOsCjOY6ZSbxuw8E6lZTjjfP8Cpd0J8VVkrYUWyGYXyg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-portal@1.1.17':
     resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
     peerDependencies:
@@ -1745,263 +1421,68 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-progress@1.1.16':
-    resolution: {integrity: sha512-5XnomAsoZZCY+KNTxbIghpGqPruZvKFNlvcAljVAOdDRDsH4/OZQxhtwo5wdtoDM5R6MhJBb2sPnDuRFep3lzg==}
+  '@radix-ui/react-slot@1.3.3':
+    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
     peerDependencies:
       '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-radio-group@1.4.7':
-    resolution: {integrity: sha512-cgYFEkntCxppHZgtSZ+7vh0wbZQ+IC7PPMw8DSnRG27B6kDd32/Zw0OJt7dGDigCoprMuWHjg2PvUn3PYvPFoQ==}
+  '@radix-ui/react-use-callback-ref@1.1.4':
+    resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
     peerDependencies:
       '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-roving-focus@1.1.19':
-    resolution: {integrity: sha512-V9jI6hDjT7l3jsCQD9bLNvDLM3tH/gdbOTp7Tefp3hbbgCGQoK7tUvrWiRlcoBHIZ809ElXwNQwVo0B98LuTXQ==}
+  '@radix-ui/react-use-controllable-state@1.2.6':
+    resolution: {integrity: sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==}
     peerDependencies:
       '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-scroll-area@1.2.18':
-    resolution: {integrity: sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA==}
+  '@radix-ui/react-use-effect-event@0.0.5':
+    resolution: {integrity: sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==}
     peerDependencies:
       '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-select@2.3.7':
-    resolution: {integrity: sha512-WFGImkmbzcfxeIwq/+4HvRN0pizBwbwQUED4I13ezQsDdfl38ZntN6TmR8XaSzPBqoCToe8rF75j6NPNDSzhbg==}
+  '@radix-ui/react-use-layout-effect@1.1.4':
+    resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
     peerDependencies:
       '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
         optional: true
-      '@types/react-dom':
-        optional: true
 
-  '@radix-ui/react-separator@1.1.15':
-    resolution: {integrity: sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rolldown/binding-android-arm-eabi@1.2.11':
+    resolution: {integrity: sha512-A5kXfGKvKWWZE0TtPrfsvT+q4Y5d1QG8gGUzpYjGydM+fARM9MuX90PrXYXe0XbsDVgyxxNzHo6giCj90bsFNw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
 
-  '@radix-ui/react-slider@1.4.7':
-    resolution: {integrity: sha512-mTSLf1GC/C0moWjTbvCM6Qn/gBjvlFt1azuWF2v7MN5C3Zq2U2J2lN3ZEYkpujuOU5Ro7A28wkviSxaKnG0BYg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
+  '@rolldown/binding-android-arm64@1.2.11':
+    resolution: {integrity: sha512-z6cTycz+iJ4PVkuL4HHW4DfTfoeU/2nqYYuSOrTmH7yHK5Y0LCOnA03V4ZNxavyVaU1oOqUgIg2klN/s+USGOA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
 
-  '@radix-ui/react-slot@1.3.3':
-    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-switch@1.3.7':
-    resolution: {integrity: sha512-48tB/4dn2UVLBCYhTu9AuR63IHl73l/qLbLgxd86noTUor4/K4LFDAcYjK+isP5313qxaFpjPVogE7+Y0/V3Kw==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tabs@1.1.21':
-    resolution: {integrity: sha512-UKxJlZid7FVtsk/WTxj4i4uSEgj2Au+KBbS7SQyTlzMhhn+86Cz3tISZdTa87bfEfcuvZezf2ZsxD4xuEKtkog==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-toast@1.2.23':
-    resolution: {integrity: sha512-ofhyAsYaocRGOs/n0XWdUOSVzEAG6BfrMVM8z0c0kLEWY38w/0WuMFPTJP/HVaZPYkMvHZoKIIhNcjbTCBILPg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-tooltip@1.2.16':
-    resolution: {integrity: sha512-6EamKFRRnlpdadndbZ6LMwycfwkwPte1B42hs6QA0gYhjaOKqW4PZ4pjaW9UrlDX5eVt/OjncE7BFTPL5nmZhg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/react-use-callback-ref@1.1.4':
-    resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-controllable-state@1.2.6':
-    resolution: {integrity: sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-effect-event@0.0.5':
-    resolution: {integrity: sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-is-hydrated@0.1.3':
-    resolution: {integrity: sha512-umO/aJ+82CpOnhDZUTbILCQf7kU/g0iv+oGs/Q8jw7IkhWBzaEP4sA268PhFAJTFetbwp3ICc6ktpI4TqtxcIw==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-layout-effect@1.1.4':
-    resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-previous@1.1.4':
-    resolution: {integrity: sha512-XoSLhbRbqxFtgJoi2fNHA3C6pDlY34x508vUpUGoFZfvePfHXHbE1lC4FYFMnJWgiCRroSTw6fOsXQoVS9RwZg==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-rect@1.1.4':
-    resolution: {integrity: sha512-cSOCh6JlkmfjLyNcLiu2nB4v+nm+dkZ+Q5KHWk/soo4U7ZLiEQFKHK9/YmtBHjfCEaU43IBKQOc4/uJmCaiCTQ==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-use-size@1.1.4':
-    resolution: {integrity: sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-visually-hidden@1.2.11':
-    resolution: {integrity: sha512-NFS86RYYZb4/exihaESBGOpMJFz8MGLAfu3mOBSGByVnVPC9JPASfYubxd/8KbkQK0sYAv8lVQDEQukDX/qXvQ==}
-    peerDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
-  '@radix-ui/rect@1.1.3':
-    resolution: {integrity: sha512-JtyZR+mqgBibTo8xea3B6ZRmzZiM/YeVBtUkas6zMuXjAlfIFIW2FgqeM9eLyvEaYX66vr6DJMK+4U6LV0KhNw==}
-
-  '@rolldown/binding-android-arm-eabi@1.2.11':
-    resolution: {integrity: sha512-A5kXfGKvKWWZE0TtPrfsvT+q4Y5d1QG8gGUzpYjGydM+fARM9MuX90PrXYXe0XbsDVgyxxNzHo6giCj90bsFNw==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm]
-    os: [android]
-
-  '@rolldown/binding-android-arm64@1.2.11':
-    resolution: {integrity: sha512-z6cTycz+iJ4PVkuL4HHW4DfTfoeU/2nqYYuSOrTmH7yHK5Y0LCOnA03V4ZNxavyVaU1oOqUgIg2klN/s+USGOA==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [android]
-
-  '@rolldown/binding-darwin-arm64@1.2.11':
-    resolution: {integrity: sha512-jShvqNtP6vDC6/A5JOAzbVV+DkgHqhl/ScVCJEbt+TUY6QYz7YnXcrg3sLtFBniro0f/Ld50ZwCWA6f7KYD1nQ==}
-    engines: {node: ^20.19.0 || >=22.12.0}
-    cpu: [arm64]
-    os: [darwin]
+  '@rolldown/binding-darwin-arm64@1.2.11':
+    resolution: {integrity: sha512-jShvqNtP6vDC6/A5JOAzbVV+DkgHqhl/ScVCJEbt+TUY6QYz7YnXcrg3sLtFBniro0f/Ld50ZwCWA6f7KYD1nQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
 
   '@rolldown/binding-darwin-x64@1.2.11':
     resolution: {integrity: sha512-f2i2xiNWq1Z1l2++q2fuhZRdLAT3aqxD6vRNm1RAxpUoBcdqNB3C0s1Bt+K+PbEx2F5F4gQp6hqKkphCY/xF9w==}
@@ -2081,12 +1562,12 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@shikijs/types@4.4.3':
-    resolution: {integrity: sha512-UEJxmRR++MAGR6hugn0vgVS2W/6lWAts84FFSrnlH9sP0LNol7E5+NQ792pH8liWUhyMyjhTgSUH3k7iD7tc5g==}
-    engines: {node: '>=20'}
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@shikijs/vscode-textmate@10.0.2':
-    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
 
   '@standard-schema/utils@0.3.0':
     resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
@@ -2270,9 +1751,6 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@tanstack/form-core@0.42.1':
-    resolution: {integrity: sha512-jTU0jyHqFceujdtPNv3jPVej1dTqBwa8TYdIyWB5BCwRVUBZEp1PiYEBkC9r92xu5fMpBiKc+JKud3eeVjuMiA==}
-
   '@tanstack/form-core@1.33.5':
     resolution: {integrity: sha512-3dfx9MBP0aq5sXKteikG629X9oviptrQj0IFRk9YGcb+lB7Kv5x8S17oOSk1wUWgjQZ4xVJEMbKwOAODymocgA==}
 
@@ -2298,14 +1776,6 @@ packages:
   '@tanstack/store@0.11.1':
     resolution: {integrity: sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA==}
 
-  '@tanstack/store@0.7.7':
-    resolution: {integrity: sha512-xa6pTan1bcaqYDS9BDpSiS63qa6EoDkPN9RsRaxHuDdVDNntzq3xNwR5YKTU/V3SkSyC9T4YVOPh2zRQN0nhIQ==}
-
-  '@tanstack/zod-form-adapter@0.42.1':
-    resolution: {integrity: sha512-hPRM0lawVKP64yurW4c6KHZH6altMo2MQN14hfi+GMBTKjO9S7bW1x5LPZ5cayoJE3mBvdlahpSGT5rYZtSbXQ==}
-    peerDependencies:
-      zod: ^3.x
-
   '@testing-library/dom@10.4.2':
     resolution: {integrity: sha512-yzr2S9HyAIdhz2/6qHgbs665Q7PKVcDF05vsOlHPxG1mo36gKVesdYVeDLnXgfjJ03CrKRk08knc6+E/9m8v2Q==}
     engines: {node: '>=18'}
@@ -2325,72 +1795,8 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@tiptap/core@3.31.3':
-    resolution: {integrity: sha512-Cz50pvciQrxdSxgTkHOVz0uD0Yl/8Xt0QatGD6ILm47jW8EzyHR9RkUGs/D5IqzXKuVPntfw1ttaT926vXfiRg==}
-    peerDependencies:
-      '@tiptap/pm': 3.31.3
-
-  '@tiptap/extension-bold@3.31.3':
-    resolution: {integrity: sha512-dIuYhKk8TitKU/FeDpoTeWZhU42YgDN5npgWNjAmMmRktPdoxnH3/wGSiwXlqZgJWjehN7kPWDePWpJeAImGpQ==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-
-  '@tiptap/extension-bubble-menu@3.31.3':
-    resolution: {integrity: sha512-EV6ZnwKc++2OM/OcD54n8s1B7C9LP7GKAtdEPwu0t3BYJf3sG8Ueoinf7SgGPO9oMPg96GneOkDNm1urMV167g==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-      '@tiptap/pm': 3.31.3
-
-  '@tiptap/extension-code@3.31.3':
-    resolution: {integrity: sha512-SzxOqchrD2AcN3uT67PjKmRFEMOU3vNNiwNaamZJUbZrI6Hmy+bvdHJrc3jrIddyyCrAtsnAfRI0cmorW1jGfg==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-
-  '@tiptap/extension-floating-menu@3.31.3':
-    resolution: {integrity: sha512-rd4VJ9PGSP9Eop8ZTEwaLZcMzMXLuJKe3hUNf58rq+zANpwM+9fI+vB7g9MAc3eXwUNDxNDVACFIL2oeBqpQ3A==}
-    peerDependencies:
-      '@floating-ui/dom': ^1.0.0
-      '@tiptap/core': 3.31.3
-      '@tiptap/pm': 3.31.3
-
-  '@tiptap/extension-italic@3.31.3':
-    resolution: {integrity: sha512-ibGvdvAPyfxBMUVNRI43eb9h2/Jka1MRG5GtnGqbcCX/2+Y/y0EOfFrPQPkuYphiWQYyu9+FzPKMB/pjuaLuKQ==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-
-  '@tiptap/extension-strike@3.31.3':
-    resolution: {integrity: sha512-G29bhKttYwcKHT+BI6emWVFol3RO/gUXxQVcmr/iT8LXXy7j8J6HFUnsKM+Kg5YlP1rxMRgsa65dbrQVahZi0A==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-
-  '@tiptap/extension-text@3.31.3':
-    resolution: {integrity: sha512-gdsWtF+taeaCu6V+5Ct10fGo0ACUy1GnYtbb+mcathBt8OqbT+Ws60p/yEmKesBDz2Hn+B5IcWy6+2BBZl5ZTg==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-
-  '@tiptap/extension-underline@3.31.3':
-    resolution: {integrity: sha512-HghdJaOwRqYzsAxqSyNyb+IWyOMcdCl8IoiBETA9BZCJAqdXzFLcuWp7CqCqJPam9dgkWosSoHqTCAO4nTBfpw==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-
-  '@tiptap/extensions@3.31.3':
-    resolution: {integrity: sha512-8sJNPGGUe8f3aDojcOW5cfVL7I5NrBbE0UWxG08qoi9Tea6qWbvQJsCR9tsrOapr/DaLr3kpbGZ9s1gEEfcNcA==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-      '@tiptap/pm': 3.31.3
-
-  '@tiptap/pm@3.31.3':
-    resolution: {integrity: sha512-sZime0SWsz/k62W2WvHx5Ig7G2h7kVhrrmnqy+wEgIHfDwEfOlelRjaWCiBCFlF7dxGUntJusCh9FxlLhni0Ag==}
-
-  '@tiptap/react@3.31.3':
-    resolution: {integrity: sha512-QiwQqvaLFLm5EMFu5tg7nAgXJxCUiUTLD8EsK+TqVV5P4bqOoMOCM39khbhXTJyahCuYpiFWx5YOSDtC/JiPtg==}
-    peerDependencies:
-      '@tiptap/core': 3.31.3
-      '@tiptap/pm': 3.31.3
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0
-      react: ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
 
   '@tybys/wasm-util@0.10.4':
     resolution: {integrity: sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==}
@@ -2416,21 +1822,12 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
-  '@types/hast@3.0.5':
-    resolution: {integrity: sha512-rp/ezSWaD1m44dPKICGhiskI13nVr7qTloFwDa/IYkhhf5nzwP+zIQcIJh3WIFSBOy/H1PzB40jPjMDksN4F+g==}
-
-  '@types/js-beautify@1.14.3':
-    resolution: {integrity: sha512-FMbQHz+qd9DoGvgLHxeqqVPaNRffpIu5ZjozwV8hf9JAGpIOzuAf4wGbRSo8LNITHqGjmmVjaMggTT5P4v4IHg==}
-
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
   '@types/json5@0.0.29':
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
 
-  '@types/lodash@4.17.25':
-    resolution: {integrity: sha512-+K1NIO8I+F9/wNulfVvu23QYd0Pe9/OCqRrim4NoYIf1VoEDL90Ve4ClzpyqBLc7NpGGWRvYNCKZ1BE/Jpf8dQ==}
-
   '@types/node@26.6.3':
     resolution: {integrity: sha512-dsqMQQoeTLqu9wynDD00q573mNzso3IdQOAfHRJqLCcmCFPoGo9A1bDpUcv/9tnKpErQWv9uKeGfl37EIS02Yg==}
 
@@ -2448,14 +1845,8 @@ packages:
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
-  '@types/unist@3.0.3':
-    resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
-
-  '@types/use-sync-external-store@0.0.6':
-    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
-
-  '@types/use-sync-external-store@1.5.0':
-    resolution: {integrity: sha512-5dyB8nLC/qogMrlCizZnYWQTA4lnb/v+It+sqNl5YnSRAPMlIqY/X0Xn+gZw8vOL+TgTTr28VEbn3uf8fUtAkw==}
+  '@types/validate-npm-package-name@4.0.2':
+    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
 
   '@typescript-eslint/eslint-plugin@8.70.1':
     resolution: {integrity: sha512-nDNrUQ/4ruSNYbu749TRY7cfrzPtoLHEXSNBI8aaNY32LlZCajixqRf3FqcKC4p5Cam4VOHYx/t+i5+nKXvrqA==}
@@ -2856,9 +2247,9 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
-  abbrev@5.0.0:
-    resolution: {integrity: sha512-/XrFJgzQQQHpti1raDJC6m4ws6aNktmjBlhk8Fdlk7LwCEuDoieEJJY9OFHjfiFJFFRM2tK+Ky/IsfbbmlMu1w==}
-    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -2902,10 +2293,18 @@ packages:
   ajv@8.20.0:
     resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
 
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
   ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
 
+  ansi-regex@6.4.0:
+    resolution: {integrity: sha512-KzTVk2tCWAHtYrvvvaP8bJKJq2pVinhLcGEQdtLIYPbmNGNyYe8QwNaTUYQp2J7/vIsUKt5QCqAfUkYyG9DkOw==}
+    engines: {node: '>=12'}
+
   ansi-styles@5.2.0:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
     engines: {node: '>=10'}
@@ -2963,10 +2362,18 @@ packages:
   ast-types-flow@0.0.8:
     resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
 
+  ast-types@0.16.3:
+    resolution: {integrity: sha512-FvWoWYfSCM6kRxCSH+MGLHIKKGRL6A6AW7Zek2O32REPQRdg131428uRTKMBYAeRd3XXAaHDS60Wpri7CdKDrA==}
+    engines: {node: '>=4'}
+
   async-function@1.0.0:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
+  atomically@1.7.0:
+    resolution: {integrity: sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==}
+    engines: {node: '>=10.12.0'}
+
   attr-accept@4.0.0:
     resolution: {integrity: sha512-hmCnJClmeKNKlsBHgbM8yLZRiQZ4/20UXbLJb6OUT16eWcM5/xNZerr80a/zCYob768KIGq++aLrQNTuwPsIOQ==}
     engines: {node: '>= 22'}
@@ -3016,6 +2423,10 @@ packages:
   big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
+  body-parser@2.3.0:
+    resolution: {integrity: sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==}
+    engines: {node: '>=18'}
+
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -3038,6 +2449,14 @@ packages:
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
+  bundle-name@4.1.1:
+    resolution: {integrity: sha512-DdH81/zPLVS11EUgWq3tEu/xn+EzljlMYooDNdzWEnFha3R3NBMpMV1UqYIpjYHV/SgpFKMIX1Oh7o06SjM/oA==}
+    engines: {node: '>=18'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
   cacheable@2.5.0:
     resolution: {integrity: sha512-60cyAOytib/OzBw1JNSoSV/boK1AtHryDIjvVBk7XbN4ugfkM3+Sry7fEjNgPMGgOjuaZPAp8ruZ0Cxafwyq9g==}
 
@@ -3068,6 +2487,10 @@ packages:
     resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==}
     engines: {node: '>=18'}
 
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
   chrome-trace-event@1.0.4:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
@@ -3082,6 +2505,14 @@ packages:
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -3095,6 +2526,18 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
+  cn@0.2.6:
+    resolution: {integrity: sha512-+i4L0zUGgRcEnhsxueVrP7iBGxBx5iD0WOTYg1MwFEu2ZyCmH5Ov2V1cul2Ht5UchRQQgftCf4be/RxspuW6QQ==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
   commander@14.0.3:
     resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
     engines: {node: '>=20'}
@@ -3109,12 +2552,33 @@ packages:
   concat-map@0.0.1:
     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 
-  config-chain@1.1.13:
-    resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
+  conf@10.2.0:
+    resolution: {integrity: sha512-8fLl9F04EJqjSqH+QjITQfJF8BrOVaYr1jewVgSRAEWePfxT0sku4w2hrGQ60BC/TNLGQ2pgxNlTbWQmMPFvXg==}
+    engines: {node: '>=12'}
+
+  content-disposition@1.1.0:
+    resolution: {integrity: sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  content-type@2.1.0:
+    resolution: {integrity: sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==}
+    engines: {node: '>=18'}
 
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
   core-js-compat@3.50.0:
     resolution: {integrity: sha512-XGpFGbMLHwSt74YLTKho7Ib242qi6O8MSX+sRokV4oz7iKXvQWGYZthjIhjRGMxjzVkAubBO512dKGYcefmX3Q==}
     engines: {node: '>=6.4.0'}
@@ -3122,6 +2586,10 @@ packages:
   core-js@3.50.0:
     resolution: {integrity: sha512-BRWgOLKkFeCgRudR6zrs8p9XJZcE14grzKMMssoYrk6krtuEZ7MTKPIY5RzOnqsEKIR9kst7wNzphttraT+Yqw==}
 
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
   cosmiconfig@8.3.6:
     resolution: {integrity: sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==}
     engines: {node: '>=14'}
@@ -3131,6 +2599,15 @@ packages:
       typescript:
         optional: true
 
+  cosmiconfig@9.0.2:
+    resolution: {integrity: sha512-gtTZxTDau1wL7Y7zifc2dd8jHSK/k6BTx/2Xp/BpdlAdnlYWFVt7qhJqgwi7637yRwRQ3qL4ZidbB4I8tA5VOg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   country-flag-icons@1.6.20:
     resolution: {integrity: sha512-py8JiEKzjhYw6HPJ0L7SxLgCYim36UPRTZX43/kqGueUCZLSvnrqAiwW8HtQibur7mdkFQUkjOgdK+o/9FBtaw==}
 
@@ -3191,6 +2668,10 @@ packages:
   date-fns@4.4.0:
     resolution: {integrity: sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w==}
 
+  debounce-fn@4.0.0:
+    resolution: {integrity: sha512-8pYCQiL9Xdcg0UPSD3d+0KMlOjp+KGU5EPwYddgzQ7DATsg4fuUDjQtsYLmWjnk2obnNHgV3vE2Y4jejSOJVBQ==}
+    engines: {node: '>=10'}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -3211,6 +2692,14 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
+  dedent@1.7.2:
+    resolution: {integrity: sha512-WzMx3mW98SN+zn3hgemf4OzdmyNhhhKz5Ay0pUfQiMQ3e1g+xmTJWp/pKdwKVXhdSkAEGIIzqeuWrL3mV/AXbA==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
   deep-is@0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
 
@@ -3218,14 +2707,34 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.1:
+    resolution: {integrity: sha512-m1pAzaJgZ/gssEqlOhJkPJp8Xly7QyW6xcrkUa2KKcDeDSEMP7X8xipU3snUcfisTQx0w1AGae+9UtJSfVnXGw==}
+    engines: {node: '>=18'}
+
   define-data-property@1.1.4:
     resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
     engines: {node: '>= 0.4'}
 
+  define-lazy-prop@2.0.0:
+    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
+    engines: {node: '>=8'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
   define-properties@1.2.1:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
   dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
@@ -3237,6 +2746,10 @@ packages:
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
+  diff@8.0.4:
+    resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
+    engines: {node: '>=0.3.1'}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -3263,20 +2776,26 @@ packages:
   dot-case@3.0.4:
     resolution: {integrity: sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==}
 
+  dot-prop@6.0.1:
+    resolution: {integrity: sha512-tE7ztYzXHIeyvc7N+hR3oi7FIbf/NIjVP9hmAt3yMXzrQ072/fpjGLx2GxNxGxUl5V73MEqYzioOMoVhGMJ5cA==}
+    engines: {node: '>=10'}
+
+  dotenv@17.4.2:
+    resolution: {integrity: sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==}
+    engines: {node: '>=12'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
-  editorconfig@3.0.2:
-    resolution: {integrity: sha512-T0ix8GhtxyKVfUFEcvdNDt3YGqlwkFHbD4/5bgFUDgFmxhI/cSRAeJ87/Sz//Cq8Eam6JX/e23RkoFO71P7aAA==}
-    engines: {node: '>=20'}
-    hasBin: true
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
   electron-to-chromium@1.5.439:
     resolution: {integrity: sha512-qu6QIPXhsb+CRcAiTMNjR4A1y/7tCYKkKjr5CZXRVih6qkDf79peZ2BpEU3qoDBNCRrcy3Mra3X9nG5oruuA7Q==}
 
-  emoji-mart@5.6.0:
-    resolution: {integrity: sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==}
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
 
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@@ -3285,10 +2804,18 @@ packages:
     resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
     engines: {node: '>= 4'}
 
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
   enhanced-resolve@5.25.1:
     resolution: {integrity: sha512-nGXts5znJzmWPu+mIE9izCOzdg63oJca2mDzGWWTth7sr4aCToKcoyFVBQwN75Ij5Pf6p510EwkTqViTRzDV+w==}
     engines: {node: '>=10.13.0'}
 
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -3297,6 +2824,10 @@ packages:
     resolution: {integrity: sha512-kxL7msIffSuh9aaFAMD7rxAIuTRMAHMeBtgHW2yUdWw732ZNh4MehkF2gdjvtdmikkaIP9bFDDJOPlsvm7avrA==}
     engines: {node: '>=20.19.0'}
 
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
   error-ex@1.3.4:
     resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
@@ -3346,6 +2877,9 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
@@ -3454,6 +2988,11 @@ packages:
     resolution: {integrity: sha512-7p3DrVEIopW1B1avAGLuCSh1jubc01H2JHc8B4qqGblmg5gI9yumBgACjWo4JlIc04ufug4xJ3SQI8HkS/Rgzw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
 
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
   esquery@1.7.0:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
@@ -3477,23 +3016,46 @@ packages:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
     engines: {node: '>=0.10.0'}
 
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
-  expect-type@1.4.0:
-    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
-    engines: {node: '>=12.0.0'}
+  eventsource-parser@3.1.1:
+    resolution: {integrity: sha512-EKN1vKAMcZ8MlYMpaNuxN6R9yakzH6uajHcHVTqWJzvu5pWw9DyhbP35HH8MVBQ+dZjAfDxk+A8NiR9KWaXiyQ==}
+    engines: {node: '>=18.0.0'}
 
-  fast-deep-equal@3.1.3:
-    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
 
-  fast-equals@4.0.3:
-    resolution: {integrity: sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==}
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
 
-  fast-equals@5.4.3:
-    resolution: {integrity: sha512-8unmvA0qrfpFWBYUate9BTGtQdKHWBYt+KdAIkag7Vvxe7wz8Q2nJg7fLMC0bJqe0bjP31kca7Ckaawrs4Istg==}
-    engines: {node: '>=6.0.0'}
+  expect-type@1.4.0:
+    resolution: {integrity: sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==}
+    engines: {node: '>=12.0.0'}
+
+  express-rate-limit@8.7.0:
+    resolution: {integrity: sha512-hOwV7WOxXfjRpAM1DSJWZDXx3GhplwD8IfwuwvogD8i1Qnkgosw/H45s4ZnFAUHDAhPjlY9hLBvJhKmGMyY26g==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
   fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
@@ -3527,6 +3089,10 @@ packages:
   fflate@0.4.9:
     resolution: {integrity: sha512-zdxgIEddhfsyCaWpJ2SdXEP8ZMrKJ6+5jl4OupODcywU0IhRk6gdXuVGcPICyfx2H97hVK7xmJtRLPjkxAX8Vw==}
 
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
   file-entry-cache@11.1.5:
     resolution: {integrity: sha512-+PFTHITI08JIGhnNpGNI8T8inUpgZfk3GNEqfT9R2zZV2iFXg3CvqzSl/uEhs7TSGujYRELEANyDvS8Fj7+S7Q==}
 
@@ -3538,6 +3104,14 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
+  find-up@3.0.0:
+    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
+    engines: {node: '>=6'}
+
   find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -3552,6 +3126,10 @@ packages:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
 
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
   framer-motion@13.4.4:
     resolution: {integrity: sha512-lbsZO95NGbulo6apz70zEt6Vxf/anoRwQI2ECEc/EQYWO5CGbITtl7plDW8P/VXgXw6e8wrbhH4a9i+ygke0Mg==}
     peerDependencies:
@@ -3563,6 +3141,14 @@ packages:
       react-dom:
         optional: true
 
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-extra@11.4.1:
+    resolution: {integrity: sha512-KYAb4c9BJQI6QqGKthV68OHe0badztdXJWKo0WtBA9IuCFPTKvE5ZdUBglP833aMjhaSPNO4A5j/EkzZtGlKjA==}
+    engines: {node: '>=14.14'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -3578,6 +3164,9 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
   generator-function@2.0.1:
     resolution: {integrity: sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==}
     engines: {node: '>= 0.4'}
@@ -3586,6 +3175,10 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-east-asian-width@1.7.0:
+    resolution: {integrity: sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -3594,10 +3187,22 @@ packages:
     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
     engines: {node: '>=6'}
 
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
   get-proto@1.0.1:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
   get-symbol-description@1.1.0:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
@@ -3616,10 +3221,6 @@ packages:
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
-  glob@13.0.6:
-    resolution: {integrity: sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==}
-    engines: {node: 18 || 20 || >=22}
-
   globals@16.4.0:
     resolution: {integrity: sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==}
     engines: {node: '>=18'}
@@ -3672,6 +3273,10 @@ packages:
   hermes-parser@0.25.1:
     resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
 
+  hono@4.13.9:
+    resolution: {integrity: sha512-7dMkQmZoC4E6F7AtaQSPhlWAdnBti+j7rreMZl8QB4jFiEhP9TWbGWUMi8WYzBCgmgulxuvLQupKqo+Co6Omyg==}
+    engines: {node: '>=16.9.0'}
+
   hookified@1.15.1:
     resolution: {integrity: sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==}
 
@@ -3682,6 +3287,22 @@ packages:
     resolution: {integrity: sha512-UikN5yr7xsCDAq87Or5or0PAlD3HJJOKVzM05az588WnpDJ4Ux7a2A53Qi6gofGg2/EtvF/H4hCi/TXfCW4Y6w==}
     engines: {node: ^22.13.0 || >=24.0.0}
 
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  iconv-lite@0.7.3:
+    resolution: {integrity: sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==}
+    engines: {node: '>=0.10.0'}
+
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
@@ -3698,8 +3319,8 @@ packages:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
-  ini@1.3.8:
-    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
   input-format@0.3.14:
     resolution: {integrity: sha512-gHMrgrbCgmT4uK5Um5eVDUohuV9lcs95ZUUN9Px2Y0VIfjTzT2wF8Q3Z4fwLFm7c5Z2OXCm53FHoovj6SlOKdg==}
@@ -3722,6 +3343,14 @@ packages:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  ip-address@10.7.2:
+    resolution: {integrity: sha512-7H/2gFSIitxc0hG3nOI1glS8QLo/EHBFFLk8vEUjXY/xu0AdL8jZ9U1IzO2PUm0d2D/ofQcAifb0g6OBkt8U7w==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
   is-array-buffer@3.0.5:
     resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
     engines: {node: '>= 0.4'}
@@ -3760,6 +3389,16 @@ packages:
     resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
     engines: {node: '>= 0.4'}
 
+  is-docker@2.2.1:
+    resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
   is-document.all@1.0.0:
     resolution: {integrity: sha512-+XSoyS05OdBbhFuELhgTCpFNHkpBOJqtsZfUFFpe5QTw+9Sjbh8zitxhQkYAo6wV7e1Vb8cAPvpCk9jGam/82g==}
     engines: {node: '>= 0.4'}
@@ -3780,6 +3419,19 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -3796,13 +3448,32 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
+  is-obj@2.0.0:
+    resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
+    engines: {node: '>=8'}
+
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
   is-potential-custom-element-name@1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
 
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
 
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
   is-set@2.0.3:
     resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
     engines: {node: '>= 0.4'}
@@ -3811,6 +3482,14 @@ packages:
     resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
     engines: {node: '>= 0.4'}
 
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
   is-string@1.1.1:
     resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
     engines: {node: '>= 0.4'}
@@ -3823,6 +3502,14 @@ packages:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
 
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
   is-weakmap@2.0.2:
     resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
     engines: {node: '>= 0.4'}
@@ -3835,14 +3522,23 @@ packages:
     resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
+  is-wsl@2.2.0:
+    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
+    engines: {node: '>=8'}
+
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  isomorphic.js@0.2.5:
-    resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
+  isexe@3.1.5:
+    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
+    engines: {node: '>=18'}
 
   iterator.prototype@1.1.5:
     resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
@@ -3856,13 +3552,8 @@ packages:
     resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
     hasBin: true
 
-  js-beautify@2.0.3:
-    resolution: {integrity: sha512-cyFbh3tkPhknnTD/0bLf0T0yy2ZIbqL05mttzbt4y1Zfr7NxqXQZ62dkBLKs3oHH/lpjmDRAnciJiSUyOy8XwQ==}
-    engines: {node: '>=14'}
-    hasBin: true
-
-  js-cookie@3.0.8:
-    resolution: {integrity: sha512-yeJd4aNAdYZQjaon2bpD/Gb0B/omw7HQOsynXXcOiWVCacbBcPlgn8S/d1X6blFSaHao7ozqtW7NZW19xpCtIw==}
+  jose@6.2.12:
+    resolution: {integrity: sha512-9NiFmJEex0sy2Dk58j2UGBSHgUs2ypF9eZSu4L6vjOX3Dp96Sw1F3uL+H+D1sx02jZZdzUT0HgvCy59CuvXcWw==}
 
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -3894,6 +3585,12 @@ packages:
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
+  json-schema-typed@7.0.3:
+    resolution: {integrity: sha512-7DE8mpG+/fVw+dTpjbxnx47TaMnDfOI1jwft9g1VybltZCduyRQPJPvc+zzKY9WPHxhPWczyFuYa6I8Mw4iU5A==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -3906,6 +3603,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jsonfile@6.2.1:
+    resolution: {integrity: sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==}
+
   jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -3913,6 +3613,14 @@ packages:
   keyv@5.6.0:
     resolution: {integrity: sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==}
 
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
   language-subtag-registry@0.3.23:
     resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
 
@@ -3924,16 +3632,6 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
-  lib0@0.2.118:
-    resolution: {integrity: sha512-Ip97lrGhycLAkNrC9/tkORm4yPei9pKuP/Ah1eqCdDx8jnKSs7wY2xvOSlvg/r5UqtgfaC4O3NsFdzwWDDs1Wg==}
-    engines: {node: '>=16'}
-    hasBin: true
-
-  lib0@1.0.0-rc.22:
-    resolution: {integrity: sha512-KNefJloRQIsWncTF2tIcRqQXSQ7bDRYHwVSUhf1lY2P65Rej4WWFnen6L8L+odJQIo1ZNJGVVjK2WzqB9a+B/g==}
-    engines: {node: '>=22'}
-    hasBin: true
-
   libphonenumber-js@1.13.14:
     resolution: {integrity: sha512-llihgCcx0BFLksecLP+x1J+6JDE1GsXS1RN/LoPF6qcwpeQcnjj0lcvZxY8AzbEpYwyZWPZW/nDuqkqzm3amiw==}
 
@@ -4088,6 +3786,10 @@ packages:
     resolution: {integrity: sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==}
     engines: {node: '>=8.9.0'}
 
+  locate-path@3.0.0:
+    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
+    engines: {node: '>=6'}
+
   locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -4095,8 +3797,9 @@ packages:
   lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
-  lodash@4.18.1:
-    resolution: {integrity: sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==}
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
 
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
@@ -4112,11 +3815,6 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
-  lucide-react@0.525.0:
-    resolution: {integrity: sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   lucide-react@1.48.0:
     resolution: {integrity: sha512-R0CIKY/fXiC6y9xRBADgsK+VW2p/pcTJOMhLZf1T+uG+vJUvyUR02nGOgmIIC7MPkiNK4Ox8QDnbqF8rJYWPZQ==}
     peerDependencies:
@@ -4145,6 +3843,14 @@ packages:
   mdn-data@2.27.1:
     resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
 
+  media-typer@1.1.1:
+    resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -4160,10 +3866,30 @@ packages:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
     engines: {node: '>= 0.6'}
 
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
   mime-types@2.1.35:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-fn@3.1.0:
+    resolution: {integrity: sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==}
+    engines: {node: '>=8'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   minimatch@10.2.6:
     resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
     engines: {node: 18 || 20 || >=22}
@@ -4174,10 +3900,6 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass@7.1.3:
-    resolution: {integrity: sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   motion-dom@13.4.4:
     resolution: {integrity: sha512-z2qN3RUABSci4G7cr5aHTFhqPNCWJsEMMfRlzxqtANQsSCIbVJmHvMV288m5x7doEQBTYbRTWbKdztmquCn4Sw==}
 
@@ -4200,6 +3922,10 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  negotiator@1.1.0:
+    resolution: {integrity: sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==}
+    engines: {node: '>=18'}
+
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
@@ -4262,10 +3988,13 @@ packages:
     resolution: {integrity: sha512-kQK9LGGFiHtrWiNhZtA7Qbw17AQz+dmsEKODRIVTXA9+e5MS/2gZEBhYJt13GrAz5/IOZKddH/0Z3TP/Zgo+yw==}
     engines: {node: '>=18'}
 
-  nopt@10.0.1:
-    resolution: {integrity: sha512-df3sBr/6ax9hSGuC3CspvLlbnX8cP5L5nZwXF8cGN8l0zSWR6BvzmQ6jPUKjvo6+/xdpkNvEcucBNUdBeeV13g==}
-    engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
-    hasBin: true
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
 
   nprogress@0.2.0:
     resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
@@ -4285,6 +4014,10 @@ packages:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
 
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
   object.assign@4.1.7:
     resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
     engines: {node: '>= 0.4'}
@@ -4309,25 +4042,61 @@ packages:
     resolution: {integrity: sha512-XrsrhT5sybtKI6wakr2SPOlGZWWYbUXZ7a0jT8/QOeAPau+1X/bSegNe5YR75oJmEZQbKningirmGOEJCIk61Q==}
     engines: {node: '>=12.20.0'}
 
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@11.0.4:
+    resolution: {integrity: sha512-++Zlftm0kVLPmzC06t6epuWmcRMDbI4z5P3NNX979WA/k23+NtSOynEGzsVfZwguKw2mi5umVgnBlJQMwRz4Pg==}
+    engines: {node: '>=20'}
+
+  open@8.4.2:
+    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
+    engines: {node: '>=12'}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
 
-  orderedmap@2.1.1:
-    resolution: {integrity: sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==}
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
 
   own-keys@1.0.2:
     resolution: {integrity: sha512-19YVAg7T+WTrxggPukVq7DjTv6+PJ867TmhCvBsYwmbFCsZd344rq2Ld1p0wo8f8Qrrhgp82c6FJRqdXWtSEhg==}
     engines: {node: '>= 0.4'}
 
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
   p-limit@3.1.0:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
+  p-locate@3.0.0:
+    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
+    engines: {node: '>=6'}
+
   p-locate@5.0.0:
     resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
     engines: {node: '>=10'}
 
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -4336,9 +4105,24 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
   parse5@8.0.1:
     resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
 
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-exists@3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4347,12 +4131,15 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
-  path-scurry@2.0.2:
-    resolution: {integrity: sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==}
-    engines: {node: 18 || 20 || >=22}
+  path-to-regexp@8.4.2:
+    resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -4369,6 +4156,14 @@ packages:
     resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
     engines: {node: '>=12'}
 
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
+  pkg-up@3.1.0:
+    resolution: {integrity: sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==}
+    engines: {node: '>=8'}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -4377,6 +4172,10 @@ packages:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
+  postcss-selector-parser@7.1.6:
+    resolution: {integrity: sha512-7qASPzhKF2l2KLboRZux8CCTRMdGiV08vWmyKzPz22qZ7ZjQBOeY7rNzNoCLSUiftJ7HUq0GERHmxw/t0dCdMw==}
+    engines: {node: '>=4'}
+
   postcss@8.5.23:
     resolution: {integrity: sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -4396,6 +4195,14 @@ packages:
       react:
         optional: true
 
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
+  powershell-utils@0.2.1:
+    resolution: {integrity: sha512-C+y9x90UElAddDZmV4qOx9W53B61PO7cIqWz2dQsWlwswuq4mr8NEwytdGKboYbQlGZ3awrkTeNvcZiZNHnQ8A==}
+    engines: {node: '>=20'}
+
   preact@10.29.8:
     resolution: {integrity: sha512-ej2aVZ+vZ8WO7tvlQWRM9N63A0KzF9q4mWJfDUHgYaIofWY9hu74QdnQrjoPMmZi2/nZ5gN0bJCQF49xQqx09Q==}
     peerDependencies:
@@ -4417,96 +4224,25 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
+  pretty-ms@9.3.1:
+    resolution: {integrity: sha512-HzMy3Geq23nVALD/M2LliU+F+M+gVNsvkQWWqeBZ8HDiCgzo6YPJ/Omrmtq24EFrIsk0a3EkQGEd7bDOo+IhGA==}
+    engines: {node: '>=18'}
+
   prism-react-renderer@2.4.1:
     resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
     peerDependencies:
       react: '>=16.0.0'
 
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
-  prosemirror-changeset@2.4.4:
-    resolution: {integrity: sha512-Gyuz9jYdrAeA9I7AholyOes9KUmv/lEwsC5O9s5xF5VB3EgTPsXMGUxz4+H1B+wKVPdZbvRcg1Cp3x8qX+8ofA==}
-
-  prosemirror-commands@1.7.2:
-    resolution: {integrity: sha512-q6Q6szxqdu9Xd6EcdKsqXghu5nQdZTpB4Q9yd04WRc7/jt763e/rT60Owh0L1GYY+T46o5rD+9lEN36dZS43tw==}
-
-  prosemirror-dropcursor@1.8.4:
-    resolution: {integrity: sha512-VmKxhcA6a+h5oPSYmfF1ZNeQqPbyYaIxqZsKqeYCyTlPtrjUgNaHL3P8vVaO19oqAV0zuaM/axkowZHrB1P3Tg==}
-
-  prosemirror-gapcursor@1.4.1:
-    resolution: {integrity: sha512-pMdYaEnjNMSwl11yjEGtgTmLkR08m/Vl+Jj443167p9eB3HVQKhYCc4gmHVDsLPODfZfjr/MmirsdyZziXbQKw==}
-
-  prosemirror-highlight@0.15.3:
-    resolution: {integrity: sha512-WVV2st0fX1w2TkAgmTmdbj77BlWYuLfW4BGXPo8JfIWsSly5xYcfID8QJQL+GT8kisMRuu4jgT6JAqj1DOwvvg==}
-    peerDependencies:
-      '@lezer/common': ^1.0.0
-      '@lezer/highlight': ^1.0.0
-      '@shikijs/types': ^1.29.2 || ^2.0.0 || ^3.0.0 || ^4.0.0
-      '@types/hast': ^3.0.0
-      highlight.js: ^11.9.0
-      lowlight: ^3.1.0
-      prosemirror-model: ^1.19.3
-      prosemirror-state: ^1.4.3
-      prosemirror-transform: ^1.8.0
-      prosemirror-view: ^1.32.4
-      refractor: ^5.0.0
-      sugar-high: ^0.6.1 || ^0.7.0 || ^0.8.0 || ^0.9.0 || ^1.0.0
-    peerDependenciesMeta:
-      '@lezer/common':
-        optional: true
-      '@lezer/highlight':
-        optional: true
-      '@shikijs/types':
-        optional: true
-      '@types/hast':
-        optional: true
-      highlight.js:
-        optional: true
-      lowlight:
-        optional: true
-      prosemirror-model:
-        optional: true
-      prosemirror-state:
-        optional: true
-      prosemirror-transform:
-        optional: true
-      prosemirror-view:
-        optional: true
-      refractor:
-        optional: true
-      sugar-high:
-        optional: true
-
-  prosemirror-history@1.5.0:
-    resolution: {integrity: sha512-zlzTiH01eKA55UAf1MEjtssJeHnGxO0j4K4Dpx+gnmX9n+SHNlDqI2oO1Kv1iPN5B1dm5fsljCfqKF9nFL6HRg==}
-
-  prosemirror-inputrules@1.5.1:
-    resolution: {integrity: sha512-7wj4uMjKaXWAQ1CDgxNzNtR9AlsuwzHfdFH1ygEHA2KHF2DOEaXl1CJfNPAKCg9qNEh4rum975QLaCiQPyY6Fw==}
-
-  prosemirror-keymap@1.2.3:
-    resolution: {integrity: sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==}
-
-  prosemirror-model@1.25.12:
-    resolution: {integrity: sha512-Ue2gTmXMa7EhpLNhC7J+h4+ykD8ha12K6rrZFFKKJHBForfIStw5gJ6Zrf1mqqAa9NmpmEB4wp9bKmA4eUVjWg==}
-
-  prosemirror-schema-list@1.5.1:
-    resolution: {integrity: sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==}
-
-  prosemirror-state@1.4.4:
-    resolution: {integrity: sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==}
-
-  prosemirror-tables@1.8.5:
-    resolution: {integrity: sha512-V/0cDCsHKHe/tfWkeCmthNUcEp1IVO3p6vwN8XtwE9PZQLAZJigbw3QoraAdfJPir4NKJtNvOB8oYGKRl+t0Dw==}
-
-  prosemirror-transform@1.12.2:
-    resolution: {integrity: sha512-PE/aY0HEY4zczvmqrilgkUK/WautF0chvMqkmM/iN5/aPHvwrCWaQZjS6CIZp+K84YrvPFqrL+YArrfJX8xX7g==}
-
-  prosemirror-view@1.42.6:
-    resolution: {integrity: sha512-3g25f6hKV2bBxo3puH3EcYWmmVNSH0iWmNsMVT7sugDSpA025jgpOLarcDWr39SdzPjYMaiYtRdNtXialPSjEQ==}
-
-  proto-list@1.2.4:
-    resolution: {integrity: sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==}
+  proxy-addr@2.0.8:
+    resolution: {integrity: sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==}
+    engines: {node: '>= 0.10'}
 
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
@@ -4516,12 +4252,24 @@ packages:
     resolution: {integrity: sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==}
     engines: {node: '>=20'}
 
+  qs@6.16.0:
+    resolution: {integrity: sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==}
+    engines: {node: '>=0.6'}
+
   query-selector-shadow-dom@1.0.1:
     resolution: {integrity: sha512-lT5yCqEBgfoMYpf3F2xQRK7zEr1rhIIZuceDK6+xRkJQ4NMbHTwXqk4NkwDwQMNqXgG9r9fyHnzwNVs6zV5KRw==}
 
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  range-parser@1.3.0:
+    resolution: {integrity: sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
   raw-loader@4.0.2:
     resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==}
     engines: {node: '>= 10.13.0'}
@@ -4543,12 +4291,6 @@ packages:
     peerDependencies:
       react: ^19.3.0
 
-  react-draggable@4.7.2:
-    resolution: {integrity: sha512-pmqDx72EqhMGoJe/x42ZO2wJ9TIz7qJ5OPnFu6lVWWznEuJumlSjR+J0V4tNyDFhUo6dVvv56FeiTqN+arTgnw==}
-    peerDependencies:
-      react: '>= 16.3.0'
-      react-dom: '>= 16.3.0'
-
   react-dropzone@20.1.2:
     resolution: {integrity: sha512-gj2m31ZmYOZjTuW6CDfx38/WW2JlbuQ/X2Il8cOwIWa7Znp7vQSPJFtRfDbAjusBuoXzAYktI+r2R6iKMaRTPw==}
     engines: {node: '>= 22'}
@@ -4559,12 +4301,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-grid-layout@2.2.4:
-    resolution: {integrity: sha512-Eb57FsgOMYOfsUGrMI1ku/FFR+dPNPrE8qo+3hwZubpqVSy4GO9v52DeX50Tl3JDYAlCypP4rmw7Vrqk/zOIvA==}
-    peerDependencies:
-      react: '>= 16.3.0'
-      react-dom: '>= 16.3.0'
-
   react-hook-form@7.89.0:
     resolution: {integrity: sha512-vKcoCfy8RKZDrhSdqsRFp0uEOdS1AhLjOL6hR7Wmfzg1akNxEhaPf5WORx8SgEQPVXakdDyDkqQp+KNxVnnPHg==}
     engines: {node: '>=18.0.0'}
@@ -4586,12 +4322,6 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-number-format@5.4.5:
-    resolution: {integrity: sha512-y8O2yHHj3w0aE9XO8d2BCcUOOdQTRSVq+WIuMlLVucAm5XNjJAy+BoOJiuQMldVYVOKTMyvVNfnbl2Oqp+YxGw==}
-    peerDependencies:
-      react: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-      react-dom: ^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   react-phone-number-input@3.4.18:
     resolution: {integrity: sha512-EmPhJFSxQB7CTmLAlQfGAQQPF+WmJECU08gjyUt50zd2iESb4ETsm6z+BRfUEjH+TXct4EWvJvub+OztJxb/Cg==}
     peerDependencies:
@@ -4618,12 +4348,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-resizable@3.2.0:
-    resolution: {integrity: sha512-3NKQ0SLZV7rs3LQHeXlOzDSRQfFrkX6TVet77/Qk03zqiZyee37b7N8/gwDJAA8UUjRz7PdWCCy49hcso45SMQ==}
-    peerDependencies:
-      react: '>= 16.3'
-      react-dom: '>= 16.3'
-
   react-style-singleton@2.2.3:
     resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
     engines: {node: '>=10'}
@@ -4634,12 +4358,6 @@ packages:
       '@types/react':
         optional: true
 
-  react-textarea-autosize@8.5.6:
-    resolution: {integrity: sha512-aT3ioKXMa8f6zHYGebhbdMD2L00tKeRX1zuVuDx9YQK/JLLRSaSxq3ugECEmUB9z2kvk6bFSIoRHLkkUv0RJiw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   react-tweet@3.3.1:
     resolution: {integrity: sha512-0Gj1YgBTe1K85NBMoWBlUc17Rdc67gIJLlacrVgj+3jWIoXpFfxPdZ1U5OnWkkF9zxhphqs2pY1i//JBfP3Qog==}
     peerDependencies:
@@ -4650,6 +4368,10 @@ packages:
     resolution: {integrity: sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==}
     engines: {node: '>=0.10.0'}
 
+  recast@0.23.21:
+    resolution: {integrity: sha512-mFAyJq9vUbSTARLZUvAEf1z3YxlvAwswbmxMx2mPA/MSm4KmpwvwvhsH/NIrZhyOuwD60Lzyw2qh83uCbgTPYw==}
+    engines: {node: '>= 4'}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -4683,9 +4405,6 @@ packages:
   reselect@5.3.0:
     resolution: {integrity: sha512-XGoLeRAVzUTcJ1qkxPQhDJyIZ5d6zzZD9nT7AEZOaaU9UbWclhycElmhO+VD5bFeLuzhPBaOV2oXC8uG35ZSpg==}
 
-  resize-observer-polyfill@1.5.1:
-    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
-
   resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
@@ -4703,6 +4422,10 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
   reusify@1.1.0:
     resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -4712,8 +4435,13 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rope-sequence@1.3.4:
-    resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
 
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -4730,6 +4458,9 @@ packages:
     resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
     engines: {node: '>= 0.4'}
 
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
   sax@1.6.1:
     resolution: {integrity: sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==}
     engines: {node: '>=11.0.0'}
@@ -4758,6 +4489,14 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -4770,6 +4509,14 @@ packages:
     resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
     engines: {node: '>= 0.4'}
 
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shadcn@4.21.0:
+    resolution: {integrity: sha512-UU2mFNusW8C5rvadKdH69vERYZqUlOOlXBcf0MYhYLdTGP6DPti7X4qovCu+RTfCqsAgq/T+YfE0Vnttxh9aiw==}
+    engines: {node: '>=20.18.1'}
+    hasBin: true
+
   sharp@0.35.5:
     resolution: {integrity: sha512-Ywn4OnzGukp7CDMrp08RQ50YKmuwG47brZgIVPTvBaaAfQlRlygrRqSrxdCiL9M+LlzLBiJ68IR1QqvzHyjC7g==}
     engines: {node: '>=20.9.0'}
@@ -4803,9 +4550,27 @@ packages:
     resolution: {integrity: sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==}
     engines: {node: '>= 0.4'}
 
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
   snake-case@3.0.4:
     resolution: {integrity: sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==}
 
+  socks@2.8.10:
+    resolution: {integrity: sha512-e0VyvkVTwVYViNovRkZ9aodhxVlyoMn7eJhVUPxZ+eK9P/7CBkxvvsBOHqFPEH416726W8tLXXXjKwqgTErrCQ==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
   sonner@2.0.8:
     resolution: {integrity: sha512-UM/ByIoFra8yzV75n1o0Puu0bw5U/9UNnDacrJNspekBewIfsQ3D6ez1nvlWpt7aTsO6rujQtifBpycwIivqlg==}
     peerDependencies:
@@ -4830,13 +4595,25 @@ packages:
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
   std-env@4.2.0:
     resolution: {integrity: sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==}
 
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
   stop-iteration-iterator@1.1.0:
     resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
     engines: {node: '>= 0.4'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
   string.prototype.includes@2.0.1:
     resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
     engines: {node: '>= 0.4'}
@@ -4860,10 +4637,30 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.2.0:
+    resolution: {integrity: sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==}
+    engines: {node: '>=12'}
+
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -4899,20 +4696,15 @@ packages:
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
-  tabbable@6.5.0:
-    resolution: {integrity: sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==}
-
-  tailwind-merge@2.6.1:
-    resolution: {integrity: sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ==}
+  systeminformation@5.33.13:
+    resolution: {integrity: sha512-GtyakkchTQKymM1WeAB652zi3rM1q00RKdc+jZe9KGstuc/mWUwAnQGN/RE5gVYvHIR8xYOUIUD9irVKDtA0wA==}
+    engines: {node: '>=10.0.0'}
+    os: [darwin, linux, win32, freebsd, openbsd, netbsd, sunos, android]
+    hasBin: true
 
   tailwind-merge@3.7.0:
     resolution: {integrity: sha512-XPPUyAc+cvspz3lHTcR/QgPfW2A0lv/xQNIjX3HGhLR+Nq2lHaLq5MtTesHn8GUr3W3DguT2KT5x3NVgRtYwmA==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
   tailwindcss@4.3.3:
     resolution: {integrity: sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ==}
 
@@ -4994,6 +4786,9 @@ packages:
       vue:
         optional: true
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   tinybench@6.2.0:
     resolution: {integrity: sha512-78U2TlB2CnVenajOFzf3BKSm0J6oz5L0NV7g32LCPccvYc0lbWvys4d3uUUCS2B1N8PAf2+aekR8i1KbC3HO7Q==}
     engines: {node: '>=20.0.0'}
@@ -5017,6 +4812,10 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
   tough-cookie@6.0.2:
     resolution: {integrity: sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==}
     engines: {node: '>=16'}
@@ -5031,19 +4830,29 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4'
 
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-fest@4.41.0:
-    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
-    engines: {node: '>=16'}
+  type-is@2.1.0:
+    resolution: {integrity: sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==}
+    engines: {node: '>= 18'}
 
   typed-array-buffer@1.0.3:
     resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
@@ -5080,6 +4889,10 @@ packages:
   undici-types@8.9.0:
     resolution: {integrity: sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==}
 
+  undici@7.30.0:
+    resolution: {integrity: sha512-dkrQXeHSaoamnItlYbmzG0wFYrM0ZwDxCIg0A7aKjTyyhh9svRzCNFEzV+Vm05/yehjCzjDZ31KXfGEjYSztDQ==}
+    engines: {node: '>=20.18.1'}
+
   undici@8.11.2:
     resolution: {integrity: sha512-u4UB2/IrKdU6lFxumHmmo1a3fCQO5tzQllRorfoRS63txhrB7xTpSn1PftwC4qEHkOaqP95fCWW4lJzwErwzhQ==}
     engines: {node: '>=22.19.0'}
@@ -5100,6 +4913,18 @@ packages:
     resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
     engines: {node: '>=4'}
 
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
   unrs-resolver@1.12.2:
     resolution: {integrity: sha512-dmlRxBJJayXjqTwC+JtF1HhJmgf3ftQ3YejFcZrf4+KKtJv0qDsK1pjqaaVjG7wJ5NJ6UVP1OqRMQ71Z4C3rxQ==}
 
@@ -5122,39 +4947,12 @@ packages:
       '@types/react':
         optional: true
 
-  use-composed-ref@1.4.0:
-    resolution: {integrity: sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-debounce@10.1.1:
-    resolution: {integrity: sha512-kvds8BHR2k28cFsxW8k3nc/tRga2rs1RHYCqmmGqb90MEeE++oALwzh2COiuBLO1/QXiOuShXoSN2ZpWnMmvuQ==}
-    engines: {node: '>= 16.0.0'}
+  use-debounce@10.1.1:
+    resolution: {integrity: sha512-kvds8BHR2k28cFsxW8k3nc/tRga2rs1RHYCqmmGqb90MEeE++oALwzh2COiuBLO1/QXiOuShXoSN2ZpWnMmvuQ==}
+    engines: {node: '>= 16.0.0'}
     peerDependencies:
       react: '*'
 
-  use-isomorphic-layout-effect@1.2.1:
-    resolution: {integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  use-latest@1.3.0:
-    resolution: {integrity: sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   use-sidecar@1.1.3:
     resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
     engines: {node: '>=10'}
@@ -5165,11 +4963,6 @@ packages:
       '@types/react':
         optional: true
 
-  use-sync-external-store@1.6.0:
-    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
   use-sync-external-store@1.7.0:
     resolution: {integrity: sha512-6L+EeigHMQhdaIPNIFUKwfWJSwWFQ8gJbJ2DLOs5sDIegTwR9fRxvnM3uciHKjIZhFz+KAv2emhWMRvDmMcY8A==}
     peerDependencies:
@@ -5178,6 +4971,14 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
   vaul@1.1.2:
     resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
     peerDependencies:
@@ -5268,9 +5069,6 @@ packages:
       jsdom:
         optional: true
 
-  w3c-keyname@2.2.8:
-    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
-
   w3c-xmlserializer@6.0.0:
     resolution: {integrity: sha512-4Nsy8K5Tr6SPDH9jhKJOHf7ChDrc1zufZTVSF7x72hwuEXBqxqk9G6cK+K2NRUtB3iELRJqjXb4JPDMBjMTl2Q==}
     engines: {node: ^22.22.2 || ^24.15.0 || >=26.0.0}
@@ -5336,6 +5134,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   why-is-node-running@3.2.2:
     resolution: {integrity: sha512-NKUzAelcoCXhXL4dJzKIwXeR8iEVqsA0Lq6Vnd0UXvgaKbzVo4ZTHROF2Jidrv+SgxOQ03fMinnNhzZATxOD3A==}
     engines: {node: '>=20.11'}
@@ -5345,6 +5148,13 @@ packages:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
 
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  wsl-utils@1.0.0:
+    resolution: {integrity: sha512-Hl0ZOAs672vg+06kfujwRhoS6/jehvULrlFkuF2dRu6pHgA8U06h3xqNIqNNU1LTXPcedxByAR4GS6pwQK0mgA==}
+    engines: {node: '>=20'}
+
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -5352,29 +5162,35 @@ packages:
   xmlchars@2.2.0:
     resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
 
-  y-protocols@1.0.6:
-    resolution: {integrity: sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==}
-    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
-    peerDependencies:
-      yjs: ^13.0.0
-
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  yjs@13.6.23:
-    resolution: {integrity: sha512-ExtnT5WIOVpkL56bhLeisG/N5c4fmzKn4k0ROVfJa5TY2QHbH7F0Wu2T5ZhR7ErsFWQEFafyrnSI8TPKVF9Few==}
-    engines: {node: '>=16.0.0', npm: '>=8.0.0'}
-
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yocto-spinner@1.2.2:
+    resolution: {integrity: sha512-DODGl1wJjA/s5pnJFKau9lIYHT81lnhob1i3e1TjxZRxEhWRKl74nTbWE6H5KlkViQQTo/Z29YFdxzTZAMY3ng==}
+    engines: {node: '>=18.19'}
+
+  yoctocolors@2.2.0:
+    resolution: {integrity: sha512-xYqdZFUK/VYazNl/oCDYN+3WloWQwMfZxBoiNt6qNyk+xfOdi598muWE42rNZFp1kNOiqW936q5RhUdnpqElSg==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.25.2:
+    resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==}
+    peerDependencies:
+      zod: ^3.25.28 || ^4
+
   zod-validation-error@4.0.2:
     resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
     engines: {node: '>=18.0.0'}
     peerDependencies:
       zod: ^3.25.0 || ^4.0.0
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
   zod@4.6.5:
     resolution: {integrity: sha512-v5l/aFXZQeai4awLbOpSoHecE9UiMrnfx75tEXLjNonXVARxQ5mOeipTjROUchszUNCqnE+hqAMujRsRHsut2Q==}
 
@@ -6163,161 +5979,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  '@blocknote/core@0.55.0(@types/hast@3.0.5)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)':
-    dependencies:
-      '@emoji-mart/data': 1.2.1
-      '@handlewithcare/prosemirror-inputrules': 0.1.4(prosemirror-model@1.25.12)(prosemirror-state@1.4.4)(prosemirror-view@1.42.6)
-      '@shikijs/types': 4.4.3
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-      '@tiptap/extension-bold': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))
-      '@tiptap/extension-code': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))
-      '@tiptap/extension-italic': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))
-      '@tiptap/extension-strike': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))
-      '@tiptap/extension-text': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))
-      '@tiptap/extension-underline': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))
-      '@tiptap/extensions': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)
-      '@tiptap/pm': 3.31.3
-      emoji-mart: 5.6.0
-      fast-deep-equal: 3.1.3
-      lib0: 1.0.0-rc.22
-      prosemirror-highlight: 0.15.3(@shikijs/types@4.4.3)(@types/hast@3.0.5)(prosemirror-model@1.25.12)(prosemirror-state@1.4.4)(prosemirror-transform@1.12.2)(prosemirror-view@1.42.6)
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-tables: 1.8.5
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
-    optionalDependencies:
-      y-protocols: 1.0.6(yjs@13.6.23)
-      yjs: 13.6.23
-    transitivePeerDependencies:
-      - '@lezer/common'
-      - '@lezer/highlight'
-      - '@types/hast'
-      - highlight.js
-      - lowlight
-      - refractor
-      - sugar-high
-
-  '@blocknote/mantine@0.55.0(@floating-ui/dom@1.8.0)(@mantine/core@7.16.2(@mantine/hooks@7.16.2(react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0))(@mantine/hooks@7.16.2(react@19.3.0))(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)':
-    dependencies:
-      '@blocknote/core': 0.55.0(@types/hast@3.0.5)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@blocknote/react': 0.55.0(@floating-ui/dom@1.8.0)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@mantine/core': 7.16.2(@mantine/hooks@7.16.2(react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@mantine/hooks': 7.16.2(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    transitivePeerDependencies:
-      - '@floating-ui/dom'
-      - '@lezer/common'
-      - '@lezer/highlight'
-      - '@types/hast'
-      - '@types/react'
-      - '@types/react-dom'
-      - '@y/prosemirror'
-      - '@y/protocols'
-      - '@y/y'
-      - highlight.js
-      - lowlight
-      - refractor
-      - sugar-high
-      - y-prosemirror
-      - y-protocols
-      - yjs
-
-  '@blocknote/react@0.55.0(@floating-ui/dom@1.8.0)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)':
-    dependencies:
-      '@blocknote/core': 0.55.0(@types/hast@3.0.5)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@emoji-mart/data': 1.2.1
-      '@floating-ui/react': 0.27.20(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-      '@tiptap/pm': 3.31.3
-      '@tiptap/react': 3.31.3(@floating-ui/dom@1.8.0)(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      emoji-mart: 5.6.0
-      fast-deep-equal: 3.1.3
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      use-sync-external-store: 1.6.0(react@19.3.0)
-    optionalDependencies:
-      '@types/use-sync-external-store': 1.5.0
-    transitivePeerDependencies:
-      - '@floating-ui/dom'
-      - '@lezer/common'
-      - '@lezer/highlight'
-      - '@types/hast'
-      - '@types/react'
-      - '@types/react-dom'
-      - '@y/prosemirror'
-      - '@y/protocols'
-      - '@y/y'
-      - highlight.js
-      - lowlight
-      - refractor
-      - sugar-high
-      - y-prosemirror
-      - y-protocols
-      - yjs
-
-  '@blocknote/shadcn@0.55.0(@date-fns/tz@1.5.0)(@floating-ui/dom@1.8.0)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(tailwindcss@4.3.3)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)':
-    dependencies:
-      '@base-ui/react': 1.8.0(@date-fns/tz@1.5.0)(@types/react@19.3.0)(date-fns@4.4.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@blocknote/core': 0.55.0(@types/hast@3.0.5)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@blocknote/react': 0.55.0(@floating-ui/dom@1.8.0)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      class-variance-authority: 0.7.1
-      clsx: 2.1.1
-      lucide-react: 0.525.0(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      tailwind-merge: 2.6.1
-      tailwindcss: 4.3.3
-    transitivePeerDependencies:
-      - '@date-fns/tz'
-      - '@floating-ui/dom'
-      - '@lezer/common'
-      - '@lezer/highlight'
-      - '@types/hast'
-      - '@types/react'
-      - '@types/react-dom'
-      - '@y/prosemirror'
-      - '@y/protocols'
-      - '@y/y'
-      - date-fns
-      - highlight.js
-      - lowlight
-      - refractor
-      - sugar-high
-      - y-prosemirror
-      - y-protocols
-      - yjs
-
-  '@blocknote/xl-multi-column@0.55.0(@floating-ui/dom@1.8.0)(@tiptap/pm@3.31.3)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)':
-    dependencies:
-      '@blocknote/core': 0.55.0(@types/hast@3.0.5)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@blocknote/react': 0.55.0(@floating-ui/dom@1.8.0)(@types/hast@3.0.5)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)(y-protocols@1.0.6(yjs@13.6.23))(yjs@13.6.23)
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-view: 1.42.6
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    transitivePeerDependencies:
-      - '@floating-ui/dom'
-      - '@lezer/common'
-      - '@lezer/highlight'
-      - '@tiptap/pm'
-      - '@types/hast'
-      - '@types/react'
-      - '@types/react-dom'
-      - '@y/prosemirror'
-      - '@y/protocols'
-      - '@y/y'
-      - highlight.js
-      - lowlight
-      - refractor
-      - sugar-high
-      - y-prosemirror
-      - y-protocols
-      - yjs
-
   '@bramus/specificity@2.4.2':
     dependencies:
       css-tree: 3.2.1
@@ -6362,6 +6023,27 @@ snapshots:
 
   '@date-fns/tz@1.5.0': {}
 
+  '@dotenvx/dotenvx@1.75.1':
+    dependencies:
+      '@dotenvx/primitives': 0.8.0
+      commander: 11.1.0
+      conf: 10.2.0
+      dotenv: 17.4.2
+      enquirer: 2.4.1
+      env-paths: 2.2.1
+      execa: 5.1.1
+      fdir: 6.5.0(picomatch@4.0.7)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      open: 8.4.2
+      picomatch: 4.0.7
+      systeminformation: 5.33.13
+      undici: 7.30.0
+      which: 4.0.0
+      yocto-spinner: 1.2.2
+
+  '@dotenvx/primitives@0.8.0': {}
+
   '@emnapi/core@1.10.0':
     dependencies:
       '@emnapi/wasi-threads': 1.2.1
@@ -6383,8 +6065,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emoji-mart/data@1.2.1': {}
-
   '@eslint-community/eslint-utils@4.10.1(eslint@10.11.0(jiti@2.7.0))':
     dependencies:
       eslint: 10.11.0(jiti@2.7.0)
@@ -6437,39 +6117,19 @@ snapshots:
       react: 19.3.0
       react-dom: 19.3.0(react@19.3.0)
 
-  '@floating-ui/react@0.26.28(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.9(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@floating-ui/utils': 0.2.12
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      tabbable: 6.5.0
-
-  '@floating-ui/react@0.27.20(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.9(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@floating-ui/utils': 0.2.12
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      tabbable: 6.5.0
-
   '@floating-ui/utils@0.2.12': {}
 
-  '@handlewithcare/prosemirror-inputrules@0.1.4(prosemirror-model@1.25.12)(prosemirror-state@1.4.4)(prosemirror-view@1.42.6)':
+  '@hono/node-server@2.1.1(hono@4.13.9)':
     dependencies:
-      prosemirror-history: 1.5.0
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
+      hono: 4.13.9
 
-  '@hookform/resolvers@5.9.1(ajv-formats@2.1.1(ajv@6.15.0))(ajv@6.15.0)(react-hook-form@7.89.0(@types/react@19.3.0)(react@19.3.0))(zod@4.6.5)':
+  '@hookform/resolvers@5.9.1(ajv-formats@2.1.1(ajv@8.20.0))(ajv@8.20.0)(react-hook-form@7.89.0(@types/react@19.3.0)(react@19.3.0))(zod@4.6.5)':
     dependencies:
       '@standard-schema/utils': 0.3.0
       react-hook-form: 7.89.0(@types/react@19.3.0)(react@19.3.0)
     optionalDependencies:
-      ajv: 6.15.0
-      ajv-formats: 2.1.1(ajv@6.15.0)
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
       zod: 4.6.5
 
   '@humanfs/core@0.19.2':
@@ -6626,23 +6286,27 @@ snapshots:
 
   '@keyv/serialize@1.1.1': {}
 
-  '@mantine/core@7.16.2(@mantine/hooks@7.16.2(react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
+  '@modelcontextprotocol/sdk@1.30.1(zod@3.25.76)':
     dependencies:
-      '@floating-ui/react': 0.26.28(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@mantine/hooks': 7.16.2(react@19.3.0)
-      clsx: 2.1.1
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      react-number-format: 5.4.5(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      react-remove-scroll: 2.7.2(@types/react@19.3.0)(react@19.3.0)
-      react-textarea-autosize: 8.5.6(@types/react@19.3.0)(react@19.3.0)
-      type-fest: 4.41.0
+      '@hono/node-server': 2.1.1(hono@4.13.9)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.1.1
+      express: 5.2.1
+      express-rate-limit: 8.7.0(express@5.2.1)
+      hono: 4.13.9
+      jose: 6.2.12
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
     transitivePeerDependencies:
-      - '@types/react'
-
-  '@mantine/hooks@7.16.2(react@19.3.0)':
-    dependencies:
-      react: 19.3.0
+      - supports-color
 
   '@napi-rs/wasm-runtime@1.2.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
@@ -6706,8 +6370,6 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
-  '@one-ini/wasm@0.2.1': {}
-
   '@oxc-project/types@0.151.0': {}
 
   '@posthog/browser-common@0.9.0':
@@ -6721,570 +6383,142 @@ snapshots:
 
   '@posthog/types@1.412.4': {}
 
-  '@radix-ui/number@1.1.3': {}
-
-  '@radix-ui/primitive@1.1.7': {}
-
-  '@radix-ui/react-accordion@1.2.20(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collapsible': 1.1.20(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-arrow@1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-avatar@1.2.6(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-checkbox@1.3.11(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-collapsible@1.1.20(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-collection@1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.3.0)(react@19.3.0)':
-    dependencies:
-      react: 19.3.0
-    optionalDependencies:
-      '@types/react': 19.3.0
-
-  '@radix-ui/react-context-menu@2.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-context@1.2.2(@types/react@19.3.0)(react@19.3.0)':
-    dependencies:
-      react: 19.3.0
-    optionalDependencies:
-      '@types/react': 19.3.0
-
-  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      aria-hidden: 1.2.6
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      react-remove-scroll: 2.7.2(@types/react@19.3.0)(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-direction@1.1.4(@types/react@19.3.0)(react@19.3.0)':
-    dependencies:
-      react: 19.3.0
-    optionalDependencies:
-      '@types/react': 19.3.0
-
-  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-dropdown-menu@2.1.24(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-menu': 2.1.24(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.3.0)(react@19.3.0)':
-    dependencies:
-      react: 19.3.0
-    optionalDependencies:
-      '@types/react': 19.3.0
-
-  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-icons@1.3.2(react@19.3.0)':
-    dependencies:
-      react: 19.3.0
-
-  '@radix-ui/react-id@1.1.4(@types/react@19.3.0)(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-    optionalDependencies:
-      '@types/react': 19.3.0
-
-  '@radix-ui/react-label@2.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-menu@2.1.24(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      aria-hidden: 1.2.6
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      react-remove-scroll: 2.7.2(@types/react@19.3.0)(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-popover@1.1.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      aria-hidden: 1.2.6
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      react-remove-scroll: 2.7.2(@types/react@19.3.0)(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-popper@1.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@floating-ui/react-dom': 2.1.9(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-arrow': 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-rect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/rect': 1.1.3
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-progress@1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-radio-group@1.4.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-roving-focus@1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-is-hydrated': 0.1.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-scroll-area@1.2.18(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.3
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-select@2.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.3
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      aria-hidden: 1.2.6
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      react-remove-scroll: 2.7.2(@types/react@19.3.0)(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-separator@1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/react-slider@1.4.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@radix-ui/number': 1.1.3
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-previous': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
+  '@radix-ui/primitive@1.1.7': {}
 
-  '@radix-ui/react-slot@1.3.3(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
     optionalDependencies:
       '@types/react': 19.3.0
 
-  '@radix-ui/react-switch@1.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
+  '@radix-ui/react-context@1.2.2(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-size': 1.1.4(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@radix-ui/react-tabs@1.1.21(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
+  '@radix-ui/react-dialog@1.1.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
       '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-direction': 1.1.4(@types/react@19.3.0)(react@19.3.0)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.3.0)(react@19.3.0)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
+      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-roving-focus': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
       '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
+      aria-hidden: 1.2.6
       react: 19.3.0
       react-dom: 19.3.0(react@19.3.0)
+      react-remove-scroll: 2.7.2(@types/react@19.3.0)(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
       '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@radix-ui/react-toast@1.2.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
+  '@radix-ui/react-dismissable-layer@1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-collection': 1.1.15(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
       react-dom: 19.3.0(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
       '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@radix-ui/react-tooltip@1.2.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.3.0)(react@19.3.0)':
+    dependencies:
+      react: 19.3.0
+    optionalDependencies:
+      '@types/react': 19.3.0
+
+  '@radix-ui/react-focus-scope@1.1.16(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
       '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-context': 1.2.2(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-id': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-popper': 1.3.7(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-portal': 1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-presence': 1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
-      '@radix-ui/react-visually-hidden': 1.2.11(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
       react-dom: 19.3.0(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
       '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-id@1.1.4(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
     optionalDependencies:
       '@types/react': 19.3.0
 
-  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-portal@1.1.17(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
-      '@radix-ui/primitive': 1.1.7
-      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.3.0)(react@19.3.0)
+      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-presence@1.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@radix-ui/react-use-is-hydrated@0.1.3(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-primitive@2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
     dependencies:
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
+      react-dom: 19.3.0(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
+      '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-slot@1.3.3(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
     optionalDependencies:
       '@types/react': 19.3.0
 
-  '@radix-ui/react-use-previous@1.1.4(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
       react: 19.3.0
     optionalDependencies:
       '@types/react': 19.3.0
 
-  '@radix-ui/react-use-rect@1.1.4(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
-      '@radix-ui/rect': 1.1.3
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.3.0)(react@19.3.0)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
     optionalDependencies:
       '@types/react': 19.3.0
 
-  '@radix-ui/react-use-size@1.1.4(@types/react@19.3.0)(react@19.3.0)':
+  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.3.0)(react@19.3.0)
       react: 19.3.0
     optionalDependencies:
       '@types/react': 19.3.0
 
-  '@radix-ui/react-visually-hidden@1.2.11(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
+  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.3.0)(react@19.3.0)':
     dependencies:
-      '@radix-ui/react-primitive': 2.1.10(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
       react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
     optionalDependencies:
       '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-
-  '@radix-ui/rect@1.1.3': {}
 
   '@rolldown/binding-android-arm-eabi@1.2.11':
     optional: true
@@ -7335,12 +6569,9 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
-  '@shikijs/types@4.4.3':
-    dependencies:
-      '@shikijs/vscode-textmate': 10.0.2
-      '@types/hast': 3.0.5
+  '@sec-ant/readable-stream@0.4.1': {}
 
-  '@shikijs/vscode-textmate@10.0.2': {}
+  '@sindresorhus/merge-streams@4.0.0': {}
 
   '@standard-schema/utils@0.3.0': {}
 
@@ -7517,10 +6748,6 @@ snapshots:
 
   '@tanstack/devtools-event-client@0.4.4': {}
 
-  '@tanstack/form-core@0.42.1':
-    dependencies:
-      '@tanstack/store': 0.7.7
-
   '@tanstack/form-core@1.33.5':
     dependencies:
       '@tanstack/devtools-event-client': 0.4.4
@@ -7546,13 +6773,6 @@ snapshots:
 
   '@tanstack/store@0.11.1': {}
 
-  '@tanstack/store@0.7.7': {}
-
-  '@tanstack/zod-form-adapter@0.42.1(zod@4.6.5)':
-    dependencies:
-      '@tanstack/form-core': 0.42.1
-      zod: 4.6.5
-
   '@testing-library/dom@10.4.2':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -7574,85 +6794,11 @@ snapshots:
       '@types/react': 19.3.0
       '@types/react-dom': 19.3.0(@types/react@19.3.0)
 
-  '@tiptap/core@3.31.3(@tiptap/pm@3.31.3)':
-    dependencies:
-      '@tiptap/pm': 3.31.3
-
-  '@tiptap/extension-bold@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-
-  '@tiptap/extension-bubble-menu@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)':
-    dependencies:
-      '@floating-ui/dom': 1.8.0
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-      '@tiptap/pm': 3.31.3
-    optional: true
-
-  '@tiptap/extension-code@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-
-  '@tiptap/extension-floating-menu@3.31.3(@floating-ui/dom@1.8.0)(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)':
+  '@ts-morph/common@0.27.0':
     dependencies:
-      '@floating-ui/dom': 1.8.0
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-      '@tiptap/pm': 3.31.3
-    optional: true
-
-  '@tiptap/extension-italic@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-
-  '@tiptap/extension-strike@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-
-  '@tiptap/extension-text@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-
-  '@tiptap/extension-underline@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-
-  '@tiptap/extensions@3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-      '@tiptap/pm': 3.31.3
-
-  '@tiptap/pm@3.31.3':
-    dependencies:
-      prosemirror-changeset: 2.4.4
-      prosemirror-commands: 1.7.2
-      prosemirror-dropcursor: 1.8.4
-      prosemirror-gapcursor: 1.4.1
-      prosemirror-history: 1.5.0
-      prosemirror-inputrules: 1.5.1
-      prosemirror-keymap: 1.2.3
-      prosemirror-model: 1.25.12
-      prosemirror-schema-list: 1.5.1
-      prosemirror-state: 1.4.4
-      prosemirror-tables: 1.8.5
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
-
-  '@tiptap/react@3.31.3(@floating-ui/dom@1.8.0)(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)':
-    dependencies:
-      '@tiptap/core': 3.31.3(@tiptap/pm@3.31.3)
-      '@tiptap/pm': 3.31.3
-      '@types/react': 19.3.0
-      '@types/react-dom': 19.3.0(@types/react@19.3.0)
-      '@types/use-sync-external-store': 0.0.6
-      fast-equals: 5.4.3
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      use-sync-external-store: 1.6.0(react@19.3.0)
-    optionalDependencies:
-      '@tiptap/extension-bubble-menu': 3.31.3(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)
-      '@tiptap/extension-floating-menu': 3.31.3(@floating-ui/dom@1.8.0)(@tiptap/core@3.31.3(@tiptap/pm@3.31.3))(@tiptap/pm@3.31.3)
-    transitivePeerDependencies:
-      - '@floating-ui/dom'
+      fast-glob: 3.3.3
+      minimatch: 10.2.6
+      path-browserify: 1.0.1
 
   '@tybys/wasm-util@0.10.4':
     dependencies:
@@ -7682,18 +6828,10 @@ snapshots:
 
   '@types/estree@1.0.9': {}
 
-  '@types/hast@3.0.5':
-    dependencies:
-      '@types/unist': 3.0.3
-
-  '@types/js-beautify@1.14.3': {}
-
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
 
-  '@types/lodash@4.17.25': {}
-
   '@types/node@26.6.3':
     dependencies:
       undici-types: 8.9.0
@@ -7711,12 +6849,7 @@ snapshots:
   '@types/trusted-types@2.0.7':
     optional: true
 
-  '@types/unist@3.0.3': {}
-
-  '@types/use-sync-external-store@0.0.6': {}
-
-  '@types/use-sync-external-store@1.5.0':
-    optional: true
+  '@types/validate-npm-package-name@4.0.2': {}
 
   '@typescript-eslint/eslint-plugin@8.70.1(@typescript-eslint/parser@8.70.1(eslint@10.11.0(jiti@2.7.0))(typescript@7.0.2))(eslint@10.11.0(jiti@2.7.0))(typescript@7.0.2)':
     dependencies:
@@ -8040,7 +7173,10 @@ snapshots:
 
   '@xtuc/long@4.2.2': {}
 
-  abbrev@5.0.0: {}
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.1.0
 
   acorn-jsx@5.3.2(acorn@8.18.0):
     dependencies:
@@ -8048,10 +7184,9 @@ snapshots:
 
   acorn@8.18.0: {}
 
-  ajv-formats@2.1.1(ajv@6.15.0):
+  ajv-formats@2.1.1(ajv@8.20.0):
     optionalDependencies:
-      ajv: 6.15.0
-    optional: true
+      ajv: 8.20.0
 
   ajv-formats@3.0.1(ajv@8.20.0):
     optionalDependencies:
@@ -8080,8 +7215,12 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
+  ansi-colors@4.1.3: {}
+
   ansi-regex@5.0.1: {}
 
+  ansi-regex@6.4.0: {}
+
   ansi-styles@5.2.0: {}
 
   argparse@2.0.1: {}
@@ -8167,8 +7306,14 @@ snapshots:
 
   ast-types-flow@0.0.8: {}
 
+  ast-types@0.16.3:
+    dependencies:
+      tslib: 2.8.1
+
   async-function@1.0.0: {}
 
+  atomically@1.7.0: {}
+
   attr-accept@4.0.0: {}
 
   available-typed-arrays@1.0.7:
@@ -8215,6 +7360,20 @@ snapshots:
 
   big.js@5.2.2: {}
 
+  body-parser@2.3.0:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 2.1.0
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.3
+      on-finished: 2.4.1
+      qs: 6.16.0
+      raw-body: 3.0.2
+      type-is: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
+
   boolbase@1.0.0: {}
 
   brace-expansion@1.1.21:
@@ -8240,6 +7399,12 @@ snapshots:
 
   buffer-from@1.1.2: {}
 
+  bundle-name@4.1.1:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bytes@3.1.2: {}
+
   cacheable@2.5.0:
     dependencies:
       '@cacheable/memory': 2.2.0
@@ -8273,6 +7438,8 @@ snapshots:
 
   chai@6.2.2: {}
 
+  chalk@5.6.2: {}
+
   chrome-trace-event@1.0.4: {}
 
   chrono-node@2.10.1: {}
@@ -8283,6 +7450,12 @@ snapshots:
 
   classnames@2.5.1: {}
 
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
+
   client-only@0.0.1: {}
 
   clsx@2.1.1: {}
@@ -8299,6 +7472,12 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  cn@0.2.6: {}
+
+  code-block-writer@13.0.3: {}
+
+  commander@11.1.0: {}
+
   commander@14.0.3: {}
 
   commander@2.20.3: {}
@@ -8307,19 +7486,42 @@ snapshots:
 
   concat-map@0.0.1: {}
 
-  config-chain@1.1.13:
+  conf@10.2.0:
     dependencies:
-      ini: 1.3.8
-      proto-list: 1.2.4
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
+      atomically: 1.7.0
+      debounce-fn: 4.0.0
+      dot-prop: 6.0.1
+      env-paths: 2.2.1
+      json-schema-typed: 7.0.3
+      onetime: 5.1.2
+      pkg-up: 3.1.0
+      semver: 7.8.5
+
+  content-disposition@1.1.0: {}
+
+  content-type@1.0.5: {}
+
+  content-type@2.1.0: {}
 
   convert-source-map@2.0.0: {}
 
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
   core-js-compat@3.50.0:
     dependencies:
       browserslist: 4.29.1
 
   core-js@3.50.0: {}
 
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
   cosmiconfig@8.3.6(typescript@7.0.2):
     dependencies:
       import-fresh: 3.3.1
@@ -8329,6 +7531,15 @@ snapshots:
     optionalDependencies:
       typescript: 7.0.2
 
+  cosmiconfig@9.0.2(typescript@7.0.2):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.3.2
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 7.0.2
+
   country-flag-icons@1.6.20: {}
 
   cross-spawn@7.0.6:
@@ -8399,6 +7610,10 @@ snapshots:
 
   date-fns@4.4.0: {}
 
+  debounce-fn@4.0.0:
+    dependencies:
+      mimic-fn: 3.1.0
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -8409,28 +7624,45 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
+  dedent@1.7.2: {}
+
   deep-is@0.1.4: {}
 
   deepmerge@4.3.1: {}
 
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.1:
+    dependencies:
+      bundle-name: 4.1.1
+      default-browser-id: 5.0.1
+
   define-data-property@1.1.4:
     dependencies:
       es-define-property: 1.0.1
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  define-lazy-prop@2.0.0: {}
+
+  define-lazy-prop@3.0.0: {}
+
   define-properties@1.2.1:
     dependencies:
       define-data-property: 1.1.4
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  depd@2.0.0: {}
+
   dequal@2.0.3: {}
 
   detect-libc@2.1.2: {}
 
   detect-node-es@1.1.0: {}
 
+  diff@8.0.4: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -8464,36 +7696,46 @@ snapshots:
       no-case: 3.0.4
       tslib: 2.8.1
 
+  dot-prop@6.0.1:
+    dependencies:
+      is-obj: 2.0.0
+
+  dotenv@17.4.2: {}
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  editorconfig@3.0.2:
-    dependencies:
-      '@one-ini/wasm': 0.2.1
-      commander: 14.0.3
-      minimatch: 10.2.6
-      semver: 7.8.5
+  ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.439: {}
 
-  emoji-mart@5.6.0: {}
+  emoji-regex@10.6.0: {}
 
   emoji-regex@9.2.2: {}
 
   emojis-list@3.0.0: {}
 
+  encodeurl@2.0.0: {}
+
   enhanced-resolve@5.25.1:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.3.3
 
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
   entities@4.5.0: {}
 
   entities@8.1.0: {}
 
+  env-paths@2.2.1: {}
+
   error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
@@ -8615,6 +7857,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  escape-html@1.0.3: {}
+
   escape-string-regexp@4.0.0: {}
 
   eslint-config-next@16.3.6(@typescript-eslint/parser@8.70.1(eslint@10.11.0(jiti@2.7.0))(typescript@7.0.2))(eslint@10.11.0(jiti@2.7.0))(typescript@7.0.2):
@@ -8811,6 +8055,8 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.18.0)
       eslint-visitor-keys: 5.0.1
 
+  esprima@4.0.1: {}
+
   esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
@@ -8829,15 +8075,87 @@ snapshots:
 
   esutils@2.0.3: {}
 
+  etag@1.8.1: {}
+
   events@3.3.0: {}
 
+  eventsource-parser@3.1.1: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.1.1
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.1
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.2.0
+
   expect-type@1.4.0: {}
 
-  fast-deep-equal@3.1.3: {}
+  express-rate-limit@8.7.0(express@5.2.1):
+    dependencies:
+      debug: 4.4.3
+      express: 5.2.1
+      ip-address: 10.7.2
+    transitivePeerDependencies:
+      - supports-color
 
-  fast-equals@4.0.3: {}
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.3.0
+      content-disposition: 1.1.0
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.8
+      qs: 6.16.0
+      range-parser: 1.3.0
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.1.0
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  fast-equals@5.4.3: {}
+  fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.1:
     dependencies:
@@ -8871,6 +8189,10 @@ snapshots:
 
   fflate@0.4.9: {}
 
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
   file-entry-cache@11.1.5:
     dependencies:
       flat-cache: 6.1.23
@@ -8881,6 +8203,21 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  find-up@3.0.0:
+    dependencies:
+      locate-path: 3.0.0
+
   find-up@5.0.0:
     dependencies:
       locate-path: 6.0.0
@@ -8898,6 +8235,8 @@ snapshots:
     dependencies:
       is-callable: 1.2.7
 
+  forwarded@0.2.0: {}
+
   framer-motion@13.4.4(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
     dependencies:
       motion-dom: 13.4.4
@@ -8907,6 +8246,14 @@ snapshots:
       react: 19.3.0
       react-dom: 19.3.0(react@19.3.0)
 
+  fresh@2.0.0: {}
+
+  fs-extra@11.4.1:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.1
+      universalify: 2.0.1
+
   fsevents@2.3.3:
     optional: true
 
@@ -8926,10 +8273,14 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  fuzzysort@3.1.0: {}
+
   generator-function@2.0.1: {}
 
   gensync@1.0.0-beta.2: {}
 
+  get-east-asian-width@1.7.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -8945,11 +8296,20 @@ snapshots:
 
   get-nonce@1.0.1: {}
 
+  get-own-enumerable-keys@1.0.0: {}
+
   get-proto@1.0.1:
     dependencies:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.2
 
+  get-stream@6.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
   get-symbol-description@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -8970,12 +8330,6 @@ snapshots:
 
   glob-to-regexp@0.4.1: {}
 
-  glob@13.0.6:
-    dependencies:
-      minimatch: 10.2.6
-      minipass: 7.1.3
-      path-scurry: 2.0.2
-
   globals@16.4.0: {}
 
   globalthis@1.0.4:
@@ -9019,6 +8373,8 @@ snapshots:
     dependencies:
       hermes-estree: 0.25.1
 
+  hono@4.13.9: {}
+
   hookified@1.15.1: {}
 
   hookified@2.2.0: {}
@@ -9029,6 +8385,22 @@ snapshots:
     transitivePeerDependencies:
       - '@noble/hashes'
 
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  human-signals@2.1.0: {}
+
+  human-signals@8.0.1: {}
+
+  iconv-lite@0.7.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
   ignore@5.3.2: {}
 
   ignore@7.0.10: {}
@@ -9040,7 +8412,7 @@ snapshots:
 
   imurmurhash@0.1.4: {}
 
-  ini@1.3.8: {}
+  inherits@2.0.4: {}
 
   input-format@0.3.14(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
     dependencies:
@@ -9060,6 +8432,10 @@ snapshots:
       hasown: 2.0.4
       side-channel: 1.1.1
 
+  ip-address@10.7.2: {}
+
+  ipaddr.js@1.9.1: {}
+
   is-array-buffer@3.0.5:
     dependencies:
       call-bind: 1.0.9
@@ -9106,6 +8482,10 @@ snapshots:
       call-bound: 1.0.4
       has-tostringtag: 1.0.2
 
+  is-docker@2.2.1: {}
+
+  is-docker@3.0.0: {}
+
   is-document.all@1.0.0:
     dependencies:
       call-bound: 1.0.4
@@ -9128,6 +8508,14 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-interactive@2.0.0: {}
+
   is-map@2.0.3: {}
 
   is-negative-zero@2.0.3: {}
@@ -9139,8 +8527,16 @@ snapshots:
 
   is-number@7.0.0: {}
 
+  is-obj@2.0.0: {}
+
+  is-obj@3.0.0: {}
+
+  is-plain-obj@4.1.0: {}
+
   is-potential-custom-element-name@1.0.1: {}
 
+  is-promise@4.0.0: {}
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -9148,12 +8544,18 @@ snapshots:
       has-tostringtag: 1.0.2
       hasown: 2.0.4
 
+  is-regexp@3.1.0: {}
+
   is-set@2.0.3: {}
 
   is-shared-array-buffer@1.0.4:
     dependencies:
       call-bound: 1.0.4
 
+  is-stream@2.0.1: {}
+
+  is-stream@4.0.1: {}
+
   is-string@1.1.1:
     dependencies:
       call-bound: 1.0.4
@@ -9169,6 +8571,10 @@ snapshots:
     dependencies:
       which-typed-array: 1.1.24
 
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
   is-weakmap@2.0.2: {}
 
   is-weakref@1.1.1:
@@ -9180,12 +8586,19 @@ snapshots:
       call-bound: 1.0.4
       get-intrinsic: 1.3.0
 
+  is-wsl@2.2.0:
+    dependencies:
+      is-docker: 2.2.1
+
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
 
-  isomorphic.js@0.2.5:
-    optional: true
+  isexe@3.1.5: {}
 
   iterator.prototype@1.1.5:
     dependencies:
@@ -9204,15 +8617,7 @@ snapshots:
 
   jiti@2.7.0: {}
 
-  js-beautify@2.0.3:
-    dependencies:
-      config-chain: 1.1.13
-      editorconfig: 3.0.2
-      glob: 13.0.6
-      js-cookie: 3.0.8
-      nopt: 10.0.1
-
-  js-cookie@3.0.8: {}
+  jose@6.2.12: {}
 
   js-tokens@4.0.0: {}
 
@@ -9253,6 +8658,10 @@ snapshots:
 
   json-schema-traverse@1.0.0: {}
 
+  json-schema-typed@7.0.3: {}
+
+  json-schema-typed@8.0.2: {}
+
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@1.0.2:
@@ -9261,6 +8670,12 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jsonfile@6.2.1:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
   jsx-ast-utils@3.3.5:
     dependencies:
       array-includes: 3.2.0
@@ -9272,6 +8687,10 @@ snapshots:
     dependencies:
       '@keyv/serialize': 1.1.1
 
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
   language-subtag-registry@0.3.23: {}
 
   language-tags@1.0.9:
@@ -9283,13 +8702,6 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
-  lib0@0.2.118:
-    dependencies:
-      isomorphic.js: 0.2.5
-    optional: true
-
-  lib0@1.0.0-rc.22: {}
-
   libphonenumber-js@1.13.14: {}
 
   lightningcss-android-arm64@1.32.0:
@@ -9400,13 +8812,21 @@ snapshots:
       emojis-list: 3.0.0
       json5: 2.2.3
 
+  locate-path@3.0.0:
+    dependencies:
+      p-locate: 3.0.0
+      path-exists: 3.0.0
+
   locate-path@6.0.0:
     dependencies:
       p-locate: 5.0.0
 
   lodash.debounce@4.0.8: {}
 
-  lodash@4.18.1: {}
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
 
   loose-envify@1.4.0:
     dependencies:
@@ -9422,10 +8842,6 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
-  lucide-react@0.525.0(react@19.3.0):
-    dependencies:
-      react: 19.3.0
-
   lucide-react@1.48.0(react@19.3.0):
     dependencies:
       react: 19.3.0
@@ -9448,6 +8864,10 @@ snapshots:
 
   mdn-data@2.27.1: {}
 
+  media-typer@1.1.1: {}
+
+  merge-descriptors@2.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -9459,10 +8879,22 @@ snapshots:
 
   mime-db@1.52.0: {}
 
+  mime-db@1.54.0: {}
+
   mime-types@2.1.35:
     dependencies:
       mime-db: 1.52.0
 
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mimic-fn@2.1.0: {}
+
+  mimic-fn@3.1.0: {}
+
+  mimic-function@5.0.1: {}
+
   minimatch@10.2.6:
     dependencies:
       brace-expansion: 5.0.12
@@ -9473,8 +8905,6 @@ snapshots:
 
   minimist@1.2.8: {}
 
-  minipass@7.1.3: {}
-
   motion-dom@13.4.4:
     dependencies:
       motion-utils: 13.3.0
@@ -9489,6 +8919,10 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  negotiator@1.1.0:
+    dependencies:
+      content-type: 2.1.0
+
   neo-async@2.6.2: {}
 
   next-sitemap@4.2.3(next@16.3.6(@babel/core@7.29.7)(@types/node@26.6.3)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)):
@@ -9557,9 +8991,14 @@ snapshots:
 
   node-releases@2.0.57: {}
 
-  nopt@10.0.1:
+  npm-run-path@4.0.1:
     dependencies:
-      abbrev: 5.0.0
+      path-key: 3.1.1
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
 
   nprogress@0.2.0: {}
 
@@ -9573,6 +9012,8 @@ snapshots:
 
   object-keys@1.1.1: {}
 
+  object-treeify@1.1.33: {}
+
   object.assign@4.1.7:
     dependencies:
       call-bind: 1.0.9
@@ -9611,6 +9052,37 @@ snapshots:
 
   obug@2.2.1: {}
 
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@11.0.4:
+    dependencies:
+      default-browser: 5.5.1
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.2.1
+      wsl-utils: 1.0.0
+
+  open@8.4.2:
+    dependencies:
+      define-lazy-prop: 2.0.0
+      is-docker: 2.2.1
+      is-wsl: 2.2.0
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -9620,7 +9092,17 @@ snapshots:
       type-check: 0.4.0
       word-wrap: 1.2.5
 
-  orderedmap@2.1.1: {}
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.2.0
 
   own-keys@1.0.2:
     dependencies:
@@ -9629,14 +9111,24 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+
   p-limit@3.1.0:
     dependencies:
       yocto-queue: 0.1.0
 
+  p-locate@3.0.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@5.0.0:
     dependencies:
       p-limit: 3.1.0
 
+  p-try@2.2.0: {}
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -9648,20 +9140,27 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse-ms@4.0.0: {}
+
   parse5@8.0.1:
     dependencies:
       entities: 8.1.0
 
+  parseurl@1.3.3: {}
+
+  path-browserify@1.0.1: {}
+
+  path-exists@3.0.0: {}
+
   path-exists@4.0.0: {}
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
-  path-scurry@2.0.2:
-    dependencies:
-      lru-cache: 11.5.3
-      minipass: 7.1.3
+  path-to-regexp@8.4.2: {}
 
   path-type@4.0.0: {}
 
@@ -9671,6 +9170,12 @@ snapshots:
 
   picomatch@4.0.7: {}
 
+  pkce-challenge@5.0.1: {}
+
+  pkg-up@3.1.0:
+    dependencies:
+      find-up: 3.0.0
+
   possible-typed-array-names@1.1.0: {}
 
   postcss-selector-parser@6.0.10:
@@ -9678,6 +9183,11 @@ snapshots:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
+  postcss-selector-parser@7.1.6:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
   postcss@8.5.23:
     dependencies:
       nanoid: 3.3.19
@@ -9708,6 +9218,10 @@ snapshots:
     transitivePeerDependencies:
       - preact-render-to-string
 
+  powershell-utils@0.1.0: {}
+
+  powershell-utils@0.2.1: {}
+
   preact@10.29.8: {}
 
   prelude-ls@1.2.1: {}
@@ -9720,102 +9234,31 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
+  pretty-ms@9.3.1:
+    dependencies:
+      parse-ms: 4.0.0
+
   prism-react-renderer@2.4.1(react@19.3.0):
     dependencies:
       '@types/prismjs': 1.26.6
       clsx: 2.1.1
       react: 19.3.0
 
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
   prop-types@15.8.1:
     dependencies:
       loose-envify: 1.4.0
       object-assign: 4.1.1
       react-is: 16.13.1
 
-  prosemirror-changeset@2.4.4:
-    dependencies:
-      prosemirror-transform: 1.12.2
-
-  prosemirror-commands@1.7.2:
-    dependencies:
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-
-  prosemirror-dropcursor@1.8.4:
-    dependencies:
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
-
-  prosemirror-gapcursor@1.4.1:
-    dependencies:
-      prosemirror-keymap: 1.2.3
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-view: 1.42.6
-
-  prosemirror-highlight@0.15.3(@shikijs/types@4.4.3)(@types/hast@3.0.5)(prosemirror-model@1.25.12)(prosemirror-state@1.4.4)(prosemirror-transform@1.12.2)(prosemirror-view@1.42.6):
-    optionalDependencies:
-      '@shikijs/types': 4.4.3
-      '@types/hast': 3.0.5
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
-
-  prosemirror-history@1.5.0:
-    dependencies:
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
-      rope-sequence: 1.3.4
-
-  prosemirror-inputrules@1.5.1:
-    dependencies:
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-
-  prosemirror-keymap@1.2.3:
+  proxy-addr@2.0.8:
     dependencies:
-      prosemirror-state: 1.4.4
-      w3c-keyname: 2.2.8
-
-  prosemirror-model@1.25.12:
-    dependencies:
-      orderedmap: 2.1.1
-
-  prosemirror-schema-list@1.5.1:
-    dependencies:
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-
-  prosemirror-state@1.4.4:
-    dependencies:
-      prosemirror-model: 1.25.12
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
-
-  prosemirror-tables@1.8.5:
-    dependencies:
-      prosemirror-keymap: 1.2.3
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-      prosemirror-view: 1.42.6
-
-  prosemirror-transform@1.12.2:
-    dependencies:
-      prosemirror-model: 1.25.12
-
-  prosemirror-view@1.42.6:
-    dependencies:
-      prosemirror-model: 1.25.12
-      prosemirror-state: 1.4.4
-      prosemirror-transform: 1.12.2
-
-  proto-list@1.2.4: {}
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
 
   punycode@2.3.1: {}
 
@@ -9823,10 +9266,24 @@ snapshots:
     dependencies:
       hookified: 2.2.0
 
+  qs@6.16.0:
+    dependencies:
+      es-define-property: 1.0.1
+      side-channel: 1.1.1
+
   query-selector-shadow-dom@1.0.1: {}
 
   queue-microtask@1.2.3: {}
 
+  range-parser@1.3.0: {}
+
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.3
+      unpipe: 1.0.0
+
   raw-loader@4.0.2(webpack@5.97.1(postcss@8.5.28)):
     dependencies:
       loader-utils: 2.0.4
@@ -9846,13 +9303,6 @@ snapshots:
       react: 19.3.0
       scheduler: 0.28.0
 
-  react-draggable@4.7.2(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
-    dependencies:
-      clsx: 2.1.1
-      prop-types: 15.8.1
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-
   react-dropzone@20.1.2(@types/react@19.3.0)(react@19.3.0):
     dependencies:
       attr-accept: 4.0.0
@@ -9861,17 +9311,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  react-grid-layout@2.2.4(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
-    dependencies:
-      clsx: 2.1.1
-      fast-equals: 4.0.3
-      prop-types: 15.8.1
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      react-draggable: 4.7.2(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      react-resizable: 3.2.0(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-      resize-observer-polyfill: 1.5.1
-
   react-hook-form@7.89.0(@types/react@19.3.0)(react@19.3.0):
     dependencies:
       react: 19.3.0
@@ -9886,11 +9325,6 @@ snapshots:
 
   react-is@17.0.2: {}
 
-  react-number-format@5.4.5(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
-    dependencies:
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-
   react-phone-number-input@3.4.18(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
     dependencies:
       classnames: 2.5.1
@@ -9920,13 +9354,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  react-resizable@3.2.0(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
-    dependencies:
-      prop-types: 15.8.1
-      react: 19.3.0
-      react-dom: 19.3.0(react@19.3.0)
-      react-draggable: 4.7.2(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
-
   react-style-singleton@2.2.3(@types/react@19.3.0)(react@19.3.0):
     dependencies:
       get-nonce: 1.0.1
@@ -9935,15 +9362,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  react-textarea-autosize@8.5.6(@types/react@19.3.0)(react@19.3.0):
-    dependencies:
-      '@babel/runtime': 7.29.7
-      react: 19.3.0
-      use-composed-ref: 1.4.0(@types/react@19.3.0)(react@19.3.0)
-      use-latest: 1.3.0(@types/react@19.3.0)(react@19.3.0)
-    transitivePeerDependencies:
-      - '@types/react'
-
   react-tweet@3.3.1(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
     dependencies:
       '@swc/helpers': 0.5.23
@@ -9954,6 +9372,14 @@ snapshots:
 
   react@19.3.0: {}
 
+  recast@0.23.21:
+    dependencies:
+      ast-types: 0.16.3
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.9
@@ -9999,8 +9425,6 @@ snapshots:
 
   reselect@5.3.0: {}
 
-  resize-observer-polyfill@1.5.1: {}
-
   resolve-from@4.0.0: {}
 
   resolve-pkg-maps@1.0.0: {}
@@ -10021,6 +9445,11 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
   reusify@1.1.0: {}
 
   rolldown@1.2.11:
@@ -10044,7 +9473,17 @@ snapshots:
       '@rolldown/binding-win32-arm64-msvc': 1.2.11
       '@rolldown/binding-win32-x64-msvc': 1.2.11
 
-  rope-sequence@1.3.4: {}
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.4.2
+    transitivePeerDependencies:
+      - supports-color
+
+  run-applescript@7.1.0: {}
 
   run-parallel@1.2.0:
     dependencies:
@@ -10069,6 +9508,8 @@ snapshots:
       es-errors: 1.3.0
       is-regex: 1.2.1
 
+  safer-buffer@2.1.2: {}
+
   sax@1.6.1: {}
 
   saxes@6.0.0:
@@ -10094,6 +9535,31 @@ snapshots:
 
   semver@7.8.5: {}
 
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.3.0
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -10116,6 +9582,49 @@ snapshots:
       es-errors: 1.3.0
       es-object-atoms: 1.1.2
 
+  setprototypeof@1.2.0: {}
+
+  shadcn@4.21.0(typescript@7.0.2):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.9
+      '@babel/plugin-transform-typescript': 7.29.9(@babel/core@7.29.7)
+      '@babel/preset-typescript': 7.29.7(@babel/core@7.29.7)
+      '@dotenvx/dotenvx': 1.75.1
+      '@modelcontextprotocol/sdk': 1.30.1(zod@3.25.76)
+      '@types/validate-npm-package-name': 4.0.2
+      browserslist: 4.29.1
+      cn: 0.2.6
+      commander: 14.0.3
+      cosmiconfig: 9.0.2(typescript@7.0.2)
+      dedent: 1.7.2
+      deepmerge: 4.3.1
+      diff: 8.0.4
+      execa: 9.6.1
+      fast-glob: 3.3.3
+      fs-extra: 11.4.1
+      fuzzysort: 3.1.0
+      kleur: 4.1.5
+      open: 11.0.4
+      ora: 8.2.0
+      postcss: 8.5.28
+      postcss-selector-parser: 7.1.6
+      prompts: 2.4.2
+      recast: 0.23.21
+      socks: 2.8.10
+      stringify-object: 5.0.0
+      ts-morph: 26.0.0
+      tsconfig-paths: 4.2.0
+      undici: 7.30.0
+      validate-npm-package-name: 7.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - babel-plugin-macros
+      - supports-color
+      - typescript
+
   sharp@0.35.5(@types/node@26.6.3):
     dependencies:
       '@img/colour': 1.1.0
@@ -10183,11 +9692,24 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  sisteransi@1.0.5: {}
+
+  smart-buffer@4.2.0: {}
+
   snake-case@3.0.4:
     dependencies:
       dot-case: 3.0.4
       tslib: 2.8.1
 
+  socks@2.8.10:
+    dependencies:
+      ip-address: 10.7.2
+      smart-buffer: 4.2.0
+
   sonner@2.0.8(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
     dependencies:
       react: 19.3.0
@@ -10206,13 +9728,23 @@ snapshots:
 
   stable-hash@0.0.5: {}
 
+  statuses@2.0.2: {}
+
   std-env@4.2.0: {}
 
+  stdin-discarder@0.2.2: {}
+
   stop-iteration-iterator@1.1.0:
     dependencies:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.7.0
+      strip-ansi: 7.2.0
+
   string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.9
@@ -10264,8 +9796,26 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.2
 
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.2.0:
+    dependencies:
+      ansi-regex: 6.4.0
+
   strip-bom@3.0.0: {}
 
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
   styled-jsx@5.1.6(@babel/core@7.29.7)(react@19.3.0):
     dependencies:
       client-only: 0.0.1
@@ -10297,16 +9847,10 @@ snapshots:
       react: 19.3.0
       use-sync-external-store: 1.7.0(react@19.3.0)
 
-  tabbable@6.5.0: {}
-
-  tailwind-merge@2.6.1: {}
+  systeminformation@5.33.13: {}
 
   tailwind-merge@3.7.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@4.3.3):
-    dependencies:
-      tailwindcss: 4.3.3
-
   tailwindcss@4.3.3: {}
 
   tapable@2.3.3: {}
@@ -10336,6 +9880,8 @@ snapshots:
       react: 19.3.0
       react-dom: 19.3.0(react@19.3.0)
 
+  tiny-invariant@1.3.3: {}
+
   tinybench@6.2.0: {}
 
   tinyexec@1.3.1: {}
@@ -10355,6 +9901,8 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
+  toidentifier@1.0.1: {}
+
   tough-cookie@6.0.2:
     dependencies:
       tldts: 7.4.16
@@ -10367,6 +9915,11 @@ snapshots:
     dependencies:
       typescript: 7.0.2
 
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -10374,13 +9927,25 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
   tslib@2.8.1: {}
 
+  tw-animate-css@1.4.0: {}
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@4.41.0: {}
+  type-is@2.1.0:
+    dependencies:
+      content-type: 2.1.0
+      media-typer: 1.1.1
+      mime-types: 3.0.2
 
   typed-array-buffer@1.0.3:
     dependencies:
@@ -10457,6 +10022,8 @@ snapshots:
 
   undici-types@8.9.0: {}
 
+  undici@7.30.0: {}
+
   undici@8.11.2: {}
 
   unicode-canonical-property-names-ecmascript@2.0.1: {}
@@ -10470,6 +10037,12 @@ snapshots:
 
   unicode-property-aliases-ecmascript@2.2.0: {}
 
+  unicorn-magic@0.3.0: {}
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
   unrs-resolver@1.12.2:
     dependencies:
       napi-postinstall: 0.3.4
@@ -10514,29 +10087,10 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  use-composed-ref@1.4.0(@types/react@19.3.0)(react@19.3.0):
-    dependencies:
-      react: 19.3.0
-    optionalDependencies:
-      '@types/react': 19.3.0
-
   use-debounce@10.1.1(react@19.3.0):
     dependencies:
       react: 19.3.0
 
-  use-isomorphic-layout-effect@1.2.1(@types/react@19.3.0)(react@19.3.0):
-    dependencies:
-      react: 19.3.0
-    optionalDependencies:
-      '@types/react': 19.3.0
-
-  use-latest@1.3.0(@types/react@19.3.0)(react@19.3.0):
-    dependencies:
-      react: 19.3.0
-      use-isomorphic-layout-effect: 1.2.1(@types/react@19.3.0)(react@19.3.0)
-    optionalDependencies:
-      '@types/react': 19.3.0
-
   use-sidecar@1.1.3(@types/react@19.3.0)(react@19.3.0):
     dependencies:
       detect-node-es: 1.1.0
@@ -10545,16 +10099,16 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.3.0
 
-  use-sync-external-store@1.6.0(react@19.3.0):
-    dependencies:
-      react: 19.3.0
-
   use-sync-external-store@1.7.0(react@19.3.0):
     dependencies:
       react: 19.3.0
 
   util-deprecate@1.0.2: {}
 
+  validate-npm-package-name@7.0.2: {}
+
+  vary@1.1.2: {}
+
   vaul@1.1.2(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0):
     dependencies:
       '@radix-ui/react-dialog': 1.1.23(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.0(react@19.3.0))(react@19.3.0)
@@ -10599,8 +10153,6 @@ snapshots:
     transitivePeerDependencies:
       - msw
 
-  w3c-keyname@2.2.8: {}
-
   w3c-xmlserializer@6.0.0:
     dependencies:
       xml-name-validator: 5.0.0
@@ -10719,31 +10271,43 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.5
+
   why-is-node-running@3.2.2: {}
 
   word-wrap@1.2.5: {}
 
+  wrappy@1.0.2: {}
+
+  wsl-utils@1.0.0:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
   xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}
 
-  y-protocols@1.0.6(yjs@13.6.23):
-    dependencies:
-      lib0: 0.2.118
-      yjs: 13.6.23
-    optional: true
-
   yallist@3.1.1: {}
 
-  yjs@13.6.23:
+  yocto-queue@0.1.0: {}
+
+  yocto-spinner@1.2.2:
     dependencies:
-      lib0: 0.2.118
-    optional: true
+      yoctocolors: 2.2.0
 
-  yocto-queue@0.1.0: {}
+  yoctocolors@2.2.0: {}
+
+  zod-to-json-schema@3.25.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
 
   zod-validation-error@4.0.2(zod@4.6.5):
     dependencies:
       zod: 4.6.5
 
+  zod@3.25.76: {}
+
   zod@4.6.5: {}
diff --git a/public/registry/autocomplete.json b/public/registry/autocomplete.json
deleted file mode 100644
index 152ff3a..0000000
--- a/public/registry/autocomplete.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "autocomplete",
-  "type": "registry:ui",
-  "dependencies": [
-    "use-debounce"
-  ],
-  "registryDependencies": [
-    "input",
-    "button"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport { useState, useCallback, useEffect } from 'react'\nimport { useDebounce } from 'use-debounce'\nimport { Input } from '@/components/ui/input'\nimport { Button } from '@/components/ui/button'\nimport { Search } from 'lucide-react'\n\n// Simulated API call\nconst fetchSuggestions = async (query: string): Promise<string[]> => {\n  await new Promise((resolve) => setTimeout(resolve, 300)) // Simulate network delay\n  const allSuggestions = [\n    'React',\n    'Redux',\n    'Next.js',\n    'TypeScript',\n    'JavaScript',\n    'Node.js',\n    'Express',\n    'MongoDB',\n    'PostgreSQL',\n    'GraphQL',\n    'Vue.js',\n    'Angular',\n    'Svelte',\n    'Tailwind CSS',\n    'Sass',\n    'Webpack',\n    'Babel',\n    'ESLint',\n    'Jest',\n    'Cypress',\n  ]\n  return allSuggestions.filter((suggestion) =>\n    suggestion.toLowerCase().includes(query.toLowerCase()),\n  )\n}\n\ninterface AutoCompleteProps {\n  value?: string\n  onChange?: (value: string) => void\n}\n\nexport default function Autocomplete({ value = '', onChange }: AutoCompleteProps) {\n  const [query, setQuery] = useState(value)\n  const [debouncedQuery] = useDebounce(query, 300)\n  const [suggestions, setSuggestions] = useState<string[]>([])\n  const [selectedIndex, setSelectedIndex] = useState(-1)\n  const [isLoading, setIsLoading] = useState(false)\n  const [isFocused, setIsFocused] = useState(false)\n\n  const fetchSuggestionsCallback = useCallback(async (q: string) => {\n    if (q.trim() === '') {\n      setSuggestions([])\n      return\n    }\n    setIsLoading(true)\n    const results = await fetchSuggestions(q)\n    setSuggestions(results)\n    setIsLoading(false)\n  }, [])\n\n  useEffect(() => {\n    if (debouncedQuery && isFocused) {\n      fetchSuggestionsCallback(debouncedQuery)\n    } else {\n      setSuggestions([])\n    }\n  }, [debouncedQuery, fetchSuggestionsCallback, isFocused])\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value\n    setQuery(newValue)\n    onChange?.(newValue)\n    setSelectedIndex(-1)\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      setSelectedIndex((prev) =>\n        prev < suggestions.length - 1 ? prev + 1 : prev,\n      )\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1))\n    } else if (e.key === 'Enter' && selectedIndex >= 0) {\n      setQuery(suggestions[selectedIndex])\n      setSuggestions([])\n      setSelectedIndex(-1)\n    } else if (e.key === 'Escape') {\n      setSuggestions([])\n      setSelectedIndex(-1)\n    }\n  }\n\n  const handleSuggestionClick = (suggestion: string) => {\n    setQuery(suggestion)\n    onChange?.(suggestion)\n    setSuggestions([])\n    setSelectedIndex(-1)\n  }\n\n  const handleFocus = () => {\n    setIsFocused(true)\n  }\n\n  const handleBlur = () => {\n    // Delay hiding suggestions to allow for click events on suggestions\n    setTimeout(() => {\n      setIsFocused(false)\n      setSuggestions([])\n      setSelectedIndex(-1)\n    }, 200)\n  }\n\n  return (\n    <div className=\"w-full max-w-xs mx-auto\">\n      <div className=\"relative\">\n        <Input\n          type=\"text\"\n          placeholder=\"Search...\"\n          value={query}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          className=\"pr-10\"\n          aria-label=\"Search input\"\n          aria-autocomplete=\"list\"\n          aria-controls=\"suggestions-list\"\n          aria-expanded={suggestions.length > 0}\n        />\n        <Button\n          size=\"icon\"\n          variant=\"ghost\"\n          className=\"absolute right-0 top-0 h-full\"\n          aria-label=\"Search\"\n        >\n          <Search className=\"h-4 w-4\" />\n        </Button>\n      </div>\n      {isLoading && isFocused && (\n        <div\n          className=\"mt-2 p-2 bg-background border rounded-md shadow-sm absolute z-10\"\n          aria-live=\"polite\"\n        >\n          Loading...\n        </div>\n      )}\n      {suggestions.length > 0 && !isLoading && isFocused && (\n        <ul\n          id=\"suggestions-list\"\n          className=\"mt-2 bg-background border rounded-md shadow-sm absolute z-10\"\n          role=\"listbox\"\n        >\n          {suggestions.map((suggestion, index) => (\n            <li\n              key={suggestion}\n              className={`px-4 py-2 cursor-pointer hover:bg-muted ${\n                index === selectedIndex ? 'bg-muted' : ''\n              }`}\n              onClick={() => handleSuggestionClick(suggestion)}\n              role=\"option\"\n              aria-selected={index === selectedIndex}\n            >\n              {suggestion}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  )\n}\n",
-      "path": "ui/autocomplete.tsx",
-      "target": "components/ui/autocomplete.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/availability-picker.json b/public/registry/availability-picker.json
deleted file mode 100644
index 75bdd16..0000000
--- a/public/registry/availability-picker.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "availability-picker",
-  "type": "registry:ui",
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nconst DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']\nconst HOURS = Array.from({ length: 12 }, (_, i) => i + 8)\n\ntype Slot = {\n  day: number\n  hour: number\n}\n\ntype AvailabilityPickerProps = {\n  value: Slot[]\n  onChange: (slots: Slot[]) => void\n}\n\nfunction slotKey(slot: Slot) {\n  return `${slot.day}-${slot.hour}`\n}\n\nexport function AvailabilityPicker({ value, onChange }: AvailabilityPickerProps) {\n  const active = new Set(value.map(slotKey))\n\n  const toggle = (slot: Slot) => {\n    const key = slotKey(slot)\n    if (active.has(key)) {\n      onChange(value.filter((entry) => slotKey(entry) !== key))\n      return\n    }\n\n    onChange([...value, slot])\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full min-w-[760px] border-collapse text-xs\">\n          <thead>\n            <tr>\n              <th className=\"w-16 border p-2 text-left\">Time</th>\n              {DAYS.map((day) => (\n                <th key={day} className=\"border p-2 text-center\">\n                  {day}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {HOURS.map((hour) => (\n              <tr key={hour}>\n                <td className=\"border p-2 font-medium\">{`${hour}:00`}</td>\n                {DAYS.map((_, dayIndex) => {\n                  const slot = { day: dayIndex, hour }\n                  const selected = active.has(slotKey(slot))\n\n                  return (\n                    <td key={`${dayIndex}-${hour}`} className=\"border p-1\">\n                      <button\n                        type=\"button\"\n                        className={`h-7 w-full rounded ${selected ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}\n                        onClick={() => toggle(slot)}\n                      />\n                    </td>\n                  )\n                })}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <div className=\"text-sm text-muted-foreground\">\n        Selected slots: {value.length}\n      </div>\n    </div>\n  )\n}\n",
-      "path": "ui/availability-picker.tsx",
-      "target": "components/ui/availability-picker.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/color-picker.json b/public/registry/color-picker.json
deleted file mode 100644
index 909ece0..0000000
--- a/public/registry/color-picker.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "color-picker",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button",
-    "input",
-    "select"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Pipette } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\n\ntype PickerFormat = 'hex' | 'rgb' | 'hsl'\n\ntype Rgb = { r: number; g: number; b: number }\ntype Hsv = { h: number; s: number; v: number }\n\ntype ColorPickerProps = {\n  value?: string\n  onChange?: (value: string) => void\n  swatches?: string[]\n}\n\ntype EyeDropperAPI = {\n  open: () => Promise<{ sRGBHex: string }>\n}\n\ndeclare global {\n  interface Window {\n    EyeDropper?: new () => EyeDropperAPI\n  }\n}\n\nconst DEFAULT_SWATCHES = [\n  '#000000',\n  '#6b7280',\n  '#d1d5db',\n  '#93c5fd',\n  '#818cf8',\n  '#ec4899',\n]\n\nconst clamp = (value: number, min: number, max: number) =>\n  Math.min(max, Math.max(min, value))\n\nconst round = (value: number, digits = 0) => {\n  const factor = 10 ** digits\n  return Math.round(value * factor) / factor\n}\n\nfunction parseHex(hex: string): { rgb: Rgb; a: number } | null {\n  const raw = hex.trim().replace('#', '')\n\n  if (!/^[0-9A-Fa-f]{3,4}$|^[0-9A-Fa-f]{6}$|^[0-9A-Fa-f]{8}$/.test(raw)) {\n    return null\n  }\n\n  const normalized =\n    raw.length <= 4\n      ? raw\n          .split('')\n          .map((char) => `${char}${char}`)\n          .join('')\n      : raw\n\n  const hasAlpha = normalized.length === 8\n  const r = Number.parseInt(normalized.slice(0, 2), 16)\n  const g = Number.parseInt(normalized.slice(2, 4), 16)\n  const b = Number.parseInt(normalized.slice(4, 6), 16)\n  const a = hasAlpha ? Number.parseInt(normalized.slice(6, 8), 16) / 255 : 1\n\n  return { rgb: { r, g, b }, a }\n}\n\nfunction rgbToHex(rgb: Rgb, alpha = 1) {\n  const base = [rgb.r, rgb.g, rgb.b]\n    .map((value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0'))\n    .join('')\n\n  if (alpha >= 1) return `#${base}`\n\n  const a = clamp(Math.round(alpha * 255), 0, 255)\n    .toString(16)\n    .padStart(2, '0')\n\n  return `#${base}${a}`\n}\n\nfunction rgbToHsv({ r, g, b }: Rgb): Hsv {\n  const rn = r / 255\n  const gn = g / 255\n  const bn = b / 255\n  const max = Math.max(rn, gn, bn)\n  const min = Math.min(rn, gn, bn)\n  const diff = max - min\n\n  let h = 0\n  if (diff !== 0) {\n    if (max === rn) h = ((gn - bn) / diff) % 6\n    else if (max === gn) h = (bn - rn) / diff + 2\n    else h = (rn - gn) / diff + 4\n  }\n\n  h = Math.round(h * 60)\n  if (h < 0) h += 360\n\n  const s = max === 0 ? 0 : diff / max\n  const v = max\n\n  return { h, s: round(s * 100, 1), v: round(v * 100, 1) }\n}\n\nfunction hsvToRgb({ h, s, v }: Hsv): Rgb {\n  const hue = ((h % 360) + 360) % 360\n  const sat = clamp(s, 0, 100) / 100\n  const val = clamp(v, 0, 100) / 100\n\n  const c = val * sat\n  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1))\n  const m = val - c\n\n  let r = 0\n  let g = 0\n  let b = 0\n\n  if (hue < 60) {\n    r = c\n    g = x\n  } else if (hue < 120) {\n    r = x\n    g = c\n  } else if (hue < 180) {\n    g = c\n    b = x\n  } else if (hue < 240) {\n    g = x\n    b = c\n  } else if (hue < 300) {\n    r = x\n    b = c\n  } else {\n    r = c\n    b = x\n  }\n\n  return {\n    r: Math.round((r + m) * 255),\n    g: Math.round((g + m) * 255),\n    b: Math.round((b + m) * 255),\n  }\n}\n\nfunction rgbToHsl({ r, g, b }: Rgb) {\n  const rn = r / 255\n  const gn = g / 255\n  const bn = b / 255\n  const max = Math.max(rn, gn, bn)\n  const min = Math.min(rn, gn, bn)\n  const l = (max + min) / 2\n  const d = max - min\n\n  let h = 0\n  let s = 0\n\n  if (d !== 0) {\n    s = d / (1 - Math.abs(2 * l - 1))\n\n    switch (max) {\n      case rn:\n        h = ((gn - bn) / d) % 6\n        break\n      case gn:\n        h = (bn - rn) / d + 2\n        break\n      default:\n        h = (rn - gn) / d + 4\n        break\n    }\n\n    h *= 60\n    if (h < 0) h += 360\n  }\n\n  return {\n    h: Math.round(h),\n    s: Math.round(s * 100),\n    l: Math.round(l * 100),\n  }\n}\n\nfunction hueToRgb(p: number, q: number, t: number) {\n  let tt = t\n  if (tt < 0) tt += 1\n  if (tt > 1) tt -= 1\n  if (tt < 1 / 6) return p + (q - p) * 6 * tt\n  if (tt < 1 / 2) return q\n  if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6\n  return p\n}\n\nfunction hslToRgb(h: number, s: number, l: number): Rgb {\n  const hn = (((h % 360) + 360) % 360) / 360\n  const sn = clamp(s, 0, 100) / 100\n  const ln = clamp(l, 0, 100) / 100\n\n  if (sn === 0) {\n    const value = Math.round(ln * 255)\n    return { r: value, g: value, b: value }\n  }\n\n  const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn\n  const p = 2 * ln - q\n\n  return {\n    r: Math.round(hueToRgb(p, q, hn + 1 / 3) * 255),\n    g: Math.round(hueToRgb(p, q, hn) * 255),\n    b: Math.round(hueToRgb(p, q, hn - 1 / 3) * 255),\n  }\n}\n\nfunction toRgbaString(rgb: Rgb, alpha: number) {\n  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${round(alpha, 2)})`\n}\n\nexport function ColorPicker({\n  value = '#7c3aed',\n  onChange,\n  swatches = DEFAULT_SWATCHES,\n}: ColorPickerProps) {\n  const parsed = parseHex(value) ?? { rgb: { r: 124, g: 58, b: 237 }, a: 1 }\n  const [hsv, setHsv] = React.useState<Hsv>(() => rgbToHsv(parsed.rgb))\n  const [alpha, setAlpha] = React.useState(parsed.a)\n  const [format, setFormat] = React.useState<PickerFormat>('hex')\n\n  React.useEffect(() => {\n    const next = parseHex(value)\n    if (!next) return\n\n    setHsv(rgbToHsv(next.rgb))\n    setAlpha(next.a)\n  }, [value])\n\n  const rgb = hsvToRgb(hsv)\n  const hsl = rgbToHsl(rgb)\n  const hex = rgbToHex(rgb, alpha)\n\n  const emit = React.useCallback(\n    (nextHsv: Hsv, nextAlpha: number) => {\n      const nextRgb = hsvToRgb(nextHsv)\n      onChange?.(rgbToHex(nextRgb, nextAlpha))\n    },\n    [onChange],\n  )\n\n  const updatePlane = (clientX: number, clientY: number, el: HTMLElement) => {\n    const rect = el.getBoundingClientRect()\n    const s = clamp(((clientX - rect.left) / rect.width) * 100, 0, 100)\n    const v = clamp(100 - ((clientY - rect.top) / rect.height) * 100, 0, 100)\n\n    const next = { ...hsv, s: round(s, 1), v: round(v, 1) }\n    setHsv(next)\n    emit(next, alpha)\n  }\n\n  const handlePlanePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {\n    const target = event.currentTarget\n    target.setPointerCapture(event.pointerId)\n    updatePlane(event.clientX, event.clientY, target)\n  }\n\n  const handlePlanePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {\n    if ((event.buttons & 1) !== 1) return\n    updatePlane(event.clientX, event.clientY, event.currentTarget)\n  }\n\n  const pickFromScreen = async () => {\n    if (typeof window === 'undefined' || !window.EyeDropper) return\n\n    const eyeDropper = new window.EyeDropper()\n    try {\n      const result = await eyeDropper.open()\n      const parsedColor = parseHex(result.sRGBHex)\n      if (!parsedColor) return\n\n      const nextHsv = rgbToHsv(parsedColor.rgb)\n      setHsv(nextHsv)\n      setAlpha(1)\n      emit(nextHsv, 1)\n    } catch {\n      // User cancelled eyedropper.\n    }\n  }\n\n  const checkerboard = {\n    backgroundImage:\n      'linear-gradient(45deg, #d4d4d8 25%, transparent 25%), linear-gradient(-45deg, #d4d4d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d8 75%), linear-gradient(-45deg, transparent 75%, #d4d4d8 75%)',\n    backgroundSize: '10px 10px',\n    backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',\n  } as const\n\n  return (\n    <div className=\"w-full max-w-[320px] space-y-3 rounded-xl border bg-background p-3 shadow-sm\">\n      <div className=\"relative h-56 w-full overflow-hidden rounded-lg border\" style={checkerboard}>\n        <div\n          className=\"absolute inset-0\"\n          style={{ backgroundColor: `hsl(${hsv.h} 100% 50%)` }}\n        />\n        <div className=\"absolute inset-0 bg-gradient-to-r from-white to-transparent\" />\n        <div className=\"absolute inset-0 bg-gradient-to-t from-black to-transparent\" />\n\n        <div\n          className=\"absolute inset-0 cursor-crosshair touch-none\"\n          onPointerDown={handlePlanePointerDown}\n          onPointerMove={handlePlanePointerMove}\n        >\n          <div\n            className=\"absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow\"\n            style={{\n              left: `${hsv.s}%`,\n              top: `${100 - hsv.v}%`,\n              backgroundColor: toRgbaString(rgb, alpha),\n            }}\n          />\n        </div>\n      </div>\n\n      <div className=\"space-y-2\">\n        <div className=\"relative h-4 overflow-hidden rounded-full border\" style={checkerboard}>\n          <input\n            type=\"range\"\n            min={0}\n            max={360}\n            value={hsv.h}\n            onChange={(event) => {\n              const h = Number(event.target.value)\n              const next = { ...hsv, h }\n              setHsv(next)\n              emit(next, alpha)\n            }}\n            className=\"figma-range absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none rounded-full p-0\"\n            style={{\n              background:\n                'linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)',\n            }}\n          />\n        </div>\n\n        <div className=\"relative h-4 overflow-hidden rounded-full border\" style={checkerboard}>\n          <input\n            type=\"range\"\n            min={0}\n            max={100}\n            value={Math.round(alpha * 100)}\n            onChange={(event) => {\n              const nextAlpha = Number(event.target.value) / 100\n              setAlpha(nextAlpha)\n              emit(hsv, nextAlpha)\n            }}\n            className=\"figma-range absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none rounded-full p-0\"\n            style={{\n              background: `linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))`,\n            }}\n          />\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-[auto_1fr_auto] items-center gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"icon\"\n          onClick={pickFromScreen}\n          disabled={typeof window === 'undefined' || !window.EyeDropper}\n          title=\"Eyedropper\"\n        >\n          <Pipette className=\"h-4 w-4\" />\n        </Button>\n\n        <Input\n          value={format === 'hex' ? hex.toUpperCase() : format === 'rgb' ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : `${hsl.h}, ${hsl.s}%, ${hsl.l}%`}\n          onChange={(event) => {\n            const raw = event.target.value.trim()\n\n            if (format === 'hex') {\n              const parsedHex = parseHex(raw)\n              if (!parsedHex) return\n              const next = rgbToHsv(parsedHex.rgb)\n              setHsv(next)\n              setAlpha(parsedHex.a)\n              emit(next, parsedHex.a)\n              return\n            }\n\n            if (format === 'rgb') {\n              const parts = raw.split(',').map((part) => Number(part.trim()))\n              if (parts.length !== 3 || parts.some((value) => Number.isNaN(value))) return\n              const nextRgb = {\n                r: clamp(parts[0], 0, 255),\n                g: clamp(parts[1], 0, 255),\n                b: clamp(parts[2], 0, 255),\n              }\n              const next = rgbToHsv(nextRgb)\n              setHsv(next)\n              emit(next, alpha)\n              return\n            }\n\n            const parts = raw\n              .replaceAll('%', '')\n              .split(',')\n              .map((part) => Number(part.trim()))\n            if (parts.length !== 3 || parts.some((value) => Number.isNaN(value))) return\n\n            const nextRgb = hslToRgb(parts[0], parts[1], parts[2])\n            const next = rgbToHsv(nextRgb)\n            setHsv(next)\n            emit(next, alpha)\n          }}\n        />\n\n        <Select value={format} onValueChange={(value) => setFormat(value as PickerFormat)}>\n          <SelectTrigger className=\"w-[78px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"hex\">Hex</SelectItem>\n            <SelectItem value=\"rgb\">RGB</SelectItem>\n            <SelectItem value=\"hsl\">HSL</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className=\"flex flex-wrap gap-2\">\n        {swatches.map((swatch) => (\n          <button\n            key={swatch}\n            type=\"button\"\n            className=\"h-6 w-6 rounded-md border\"\n            style={{ backgroundColor: swatch }}\n            onClick={() => {\n              const parsedSwatch = parseHex(swatch)\n              if (!parsedSwatch) return\n              const next = rgbToHsv(parsedSwatch.rgb)\n              setHsv(next)\n              setAlpha(parsedSwatch.a)\n              emit(next, parsedSwatch.a)\n            }}\n            aria-label={`Select ${swatch}`}\n          />\n        ))}\n      </div>\n\n      <style jsx global>{`\n        .figma-range::-webkit-slider-thumb {\n          -webkit-appearance: none;\n          appearance: none;\n          width: 16px;\n          height: 16px;\n          border-radius: 9999px;\n          border: 2px solid #ffffff;\n          background: #2563eb;\n          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n          margin-top: -2px;\n        }\n        .figma-range::-webkit-slider-runnable-track {\n          height: 100%;\n          border-radius: 9999px;\n        }\n        .figma-range::-moz-range-thumb {\n          width: 16px;\n          height: 16px;\n          border-radius: 9999px;\n          border: 2px solid #ffffff;\n          background: #2563eb;\n          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);\n        }\n        .figma-range::-moz-range-track {\n          height: 100%;\n          border-radius: 9999px;\n        }\n      `}</style>\n    </div>\n  )\n}\n",
-      "path": "ui/color-picker.tsx",
-      "target": "components/ui/color-picker.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/credit-card.json b/public/registry/credit-card.json
deleted file mode 100644
index 803920a..0000000
--- a/public/registry/credit-card.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "name": "credit-card",
-  "type": "registry:ui",
-  "dependencies": [
-    "framer-motion"
-  ],
-  "registryDependencies": [
-    "card",
-    "input",
-    "select"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { useState, useRef } from 'react'\nimport { motion } from 'framer-motion'\nimport { cn } from '@/lib/utils'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Card } from '@/components/ui/card'\nimport { CreditCard as CreditCardIcon, Lock } from 'lucide-react'\n\nexport interface CreditCardValue {\n  cardholderName: string\n  cardNumber: string\n  expiryMonth: string\n  expiryYear: string\n  cvv: string\n  cvvLabel: 'CCV' | 'CVC'\n}\n\nexport interface CreditCardProps {\n  value?: CreditCardValue\n  onChange?: (value: CreditCardValue) => void\n  className?: string\n}\n\nconst formatCardNumber = (value: string) => {\n  const v = value.replace(/\\s+/g, '').replace(/[^0-9]/gi, '')\n  const matches = v.match(/\\d{4,16}/g)\n  const match = matches && matches[0] || ''\n  const parts: string[] = []\n\n  for (let i = 0, len = match.length; i < len; i += 4) {\n    parts.push(match.substring(i, i + 4))\n  }\n\n  if (parts.length) {\n    return parts.join(' ')\n  } else {\n    return v\n  }\n}\n\nconst getCardType = (number: string) => {\n  const cleanNumber = number.replace(/\\s/g, '')\n  if (cleanNumber.startsWith('4')) return 'visa'\n  if (cleanNumber.startsWith('5') || cleanNumber.startsWith('2')) return 'mastercard'\n  if (cleanNumber.startsWith('3')) return 'amex'\n  return 'generic'\n}\n\nconst CreditCard = React.forwardRef<HTMLDivElement, CreditCardProps>(\n  ({ value, onChange, className }, ref) => {\n    const [isFlipped, setIsFlipped] = useState(false)\n    const [focusedField, setFocusedField] = useState<string | null>(null)\n    const cvvInputRef = useRef<HTMLInputElement>(null)\n\n    const currentValue = value || {\n      cardholderName: '',\n      cardNumber: '',\n      expiryMonth: '',\n      expiryYear: '',\n      cvv: '',\n      cvvLabel: 'CVC' as const\n    }\n\n    const handleInputChange = (field: keyof CreditCardValue, newValue: string) => {\n      const updatedValue = { ...currentValue, [field]: newValue }\n      onChange?.(updatedValue)\n    }\n\n    const handleCardNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const formatted = formatCardNumber(e.target.value)\n      if (formatted.replace(/\\s/g, '').length <= 16) {\n        handleInputChange('cardNumber', formatted)\n      }\n    }\n\n    const handleCvvFocus = () => {\n      setIsFlipped(true)\n      setFocusedField('cvv')\n    }\n\n    const handleCvvBlur = () => {\n      setIsFlipped(false)\n      setFocusedField(null)\n    }\n\n    const cardType = getCardType(currentValue.cardNumber)\n    const currentYear = new Date().getFullYear()\n    const years = Array.from({ length: 20 }, (_, i) => currentYear + i)\n    const months = Array.from({ length: 12 }, (_, i) => {\n      const month = i + 1\n      return { value: month.toString().padStart(2, '0'), label: month.toString().padStart(2, '0') }\n    })\n\n    return (\n      <div ref={ref} className={cn('w-full max-w-sm mx-auto', className)}>\n        <div className=\"relative h-56 mb-6 perspective-1000\">\n          <motion.div\n            className=\"relative w-full h-full\"\n            animate={{ rotateY: isFlipped ? 180 : 0 }}\n            transition={{ duration: 0.6, ease: 'easeInOut' }}\n            style={{ transformStyle: 'preserve-3d' }}\n          >\n            <Card className=\"absolute inset-0 w-full h-full bg-slate-800 border-slate-700 text-white p-6 flex flex-col justify-between backface-hidden\">\n              <div className=\"flex justify-between items-start\">\n                <div className=\"w-12 h-8 bg-yellow-400 rounded\"></div>\n                <CreditCardIcon className=\"w-8 h-8 opacity-80\" />\n              </div>\n              \n              <div className=\"space-y-4\">\n                <div className=\"text-xl font-mono tracking-wider\">\n                  {currentValue.cardNumber || '•••• •••• •••• ••••'}\n                </div>\n                \n                <div className=\"flex justify-between items-end\">\n                  <div>\n                    <div className=\"text-xs opacity-70 uppercase\">Card Holder</div>\n                    <div className=\"font-medium\">\n                      {currentValue.cardholderName || 'YOUR NAME'}\n                    </div>\n                  </div>\n                  <div>\n                    <div className=\"text-xs opacity-70 uppercase\">Expires</div>\n                    <div className=\"font-medium\">\n                      {currentValue.expiryMonth && currentValue.expiryYear \n                        ? `${currentValue.expiryMonth}/${currentValue.expiryYear.slice(-2)}`\n                        : 'MM/YY'\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </Card>\n\n            <Card className=\"absolute inset-0 w-full h-full bg-slate-700 border-slate-600 text-white p-6 flex flex-col justify-between backface-hidden rotate-y-180\">\n              <div className=\"w-full h-12 bg-black mt-4\"></div>\n              \n              <div className=\"flex justify-end items-center space-x-4\">\n                <div className=\"text-right\">\n                  <div className=\"text-xs opacity-70 uppercase\">{currentValue.cvvLabel}</div>\n                  <div className=\"bg-white text-black px-2 py-1 rounded text-center font-mono\">\n                    {currentValue.cvv || '•••'}\n                  </div>\n                </div>\n                <Lock className=\"w-6 h-6 opacity-60\" />\n              </div>\n              \n              <div className=\"text-xs opacity-60 text-center\">\n                This card is protected by advanced security features\n              </div>\n            </Card>\n          </motion.div>\n        </div>\n\n        <div className=\"space-y-4\">\n          <div>\n            <label className=\"block text-sm font-medium mb-2\">Cardholder Name</label>\n            <Input\n              type=\"text\"\n              placeholder=\"John Doe\"\n              value={currentValue.cardholderName}\n              onChange={(e) => handleInputChange('cardholderName', e.target.value.toUpperCase())}\n              onFocus={() => setFocusedField('cardholderName')}\n              onBlur={() => setFocusedField(null)}\n              className={cn(\n                'transition-all duration-200',\n                focusedField === 'cardholderName' && 'ring-2 ring-blue-500'\n              )}\n            />\n          </div>\n\n          <div>\n            <label className=\"block text-sm font-medium mb-2\">Card Number</label>\n            <Input\n              type=\"text\"\n              placeholder=\"1234 5678 9012 3456\"\n              value={currentValue.cardNumber}\n              onChange={handleCardNumberChange}\n              onFocus={() => setFocusedField('cardNumber')}\n              onBlur={() => setFocusedField(null)}\n              className={cn(\n                'font-mono transition-all duration-200',\n                focusedField === 'cardNumber' && 'ring-2 ring-blue-500'\n              )}\n              maxLength={19}\n            />\n          </div>\n\n          <div className=\"grid grid-cols-3 gap-4\">\n            <div>\n              <label className=\"block text-sm font-medium mb-2\">Month</label>\n              <Select\n                value={currentValue.expiryMonth}\n                onValueChange={(value) => handleInputChange('expiryMonth', value)}\n              >\n                <SelectTrigger className={cn(\n                  'transition-all duration-200',\n                  focusedField === 'expiryMonth' && 'ring-2 ring-blue-500'\n                )}>\n                  <SelectValue placeholder=\"MM\" />\n                </SelectTrigger>\n                <SelectContent>\n                  {months.map((month) => (\n                    <SelectItem key={month.value} value={month.value}>\n                      {month.label}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div>\n              <label className=\"block text-sm font-medium mb-2\">Year</label>\n              <Select\n                value={currentValue.expiryYear}\n                onValueChange={(value) => handleInputChange('expiryYear', value)}\n              >\n                <SelectTrigger className={cn(\n                  'transition-all duration-200',\n                  focusedField === 'expiryYear' && 'ring-2 ring-blue-500'\n                )}>\n                  <SelectValue placeholder=\"YYYY\" />\n                </SelectTrigger>\n                <SelectContent>\n                  {years.map((year) => (\n                    <SelectItem key={year} value={year.toString()}>\n                      {year}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div>\n              <div className=\"flex items-center justify-between mb-2\">\n                <Select\n                  value={currentValue.cvvLabel}\n                  onValueChange={(value) => handleInputChange('cvvLabel', value as 'CCV' | 'CVC')}\n                >\n                  <SelectTrigger className=\"w-20 h-6 text-xs\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"CVC\">CVC</SelectItem>\n                    <SelectItem value=\"CCV\">CCV</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <Input\n                ref={cvvInputRef}\n                type=\"text\"\n                placeholder=\"123\"\n                value={currentValue.cvv}\n                onChange={(e) => {\n                  const value = e.target.value.replace(/\\D/g, '')\n                  if (value.length <= (cardType === 'amex' ? 4 : 3)) {\n                    handleInputChange('cvv', value)\n                  }\n                }}\n                onFocus={handleCvvFocus}\n                onBlur={handleCvvBlur}\n                className={cn(\n                  'font-mono text-center transition-all duration-200',\n                  focusedField === 'cvv' && 'ring-2 ring-blue-500'\n                )}\n                maxLength={cardType === 'amex' ? 4 : 3}\n              />\n            </div>\n          </div>\n        </div>\n\n        <style dangerouslySetInnerHTML={{\n          __html: `\n            .perspective-1000 {\n              perspective: 1000px;\n            }\n            .backface-hidden {\n              backface-visibility: hidden;\n            }\n            .rotate-y-180 {\n              transform: rotateY(180deg);\n            }\n          `\n        }} />\n      </div>\n    )\n  }\n)\n\nCreditCard.displayName = 'CreditCard'\n\nexport { CreditCard }\n",
-      "path": "ui/credit-card.tsx",
-      "target": "components/ui/credit-card.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/cron-expression-builder.json b/public/registry/cron-expression-builder.json
deleted file mode 100644
index 22df332..0000000
--- a/public/registry/cron-expression-builder.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "cron-expression-builder",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "label",
-    "select"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Label } from '@/components/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\n\ntype CronValue = {\n  minute: string\n  hour: string\n  dayOfMonth: string\n  month: string\n  dayOfWeek: string\n}\n\ntype CronExpressionBuilderProps = {\n  value?: CronValue\n  onChange?: (value: CronValue & { expression: string; human: string }) => void\n}\n\nconst DOW = [\n  { value: '*', label: 'Any day' },\n  { value: '1', label: 'Monday' },\n  { value: '2', label: 'Tuesday' },\n  { value: '3', label: 'Wednesday' },\n  { value: '4', label: 'Thursday' },\n  { value: '5', label: 'Friday' },\n  { value: '6', label: 'Saturday' },\n  { value: '0', label: 'Sunday' },\n]\n\nconst defaultValue: CronValue = {\n  minute: '0',\n  hour: '9',\n  dayOfMonth: '*',\n  month: '*',\n  dayOfWeek: '1',\n}\n\nconst range = (max: number, pad = false) =>\n  Array.from({ length: max }, (_, i) => ({\n    value: String(i),\n    label: pad ? String(i).padStart(2, '0') : String(i),\n  }))\n\nfunction toHuman(value: CronValue) {\n  const day = DOW.find((item) => item.value === value.dayOfWeek)?.label ?? 'Custom day'\n  return `Runs at ${value.hour.padStart(2, '0')}:${value.minute.padStart(2, '0')} on ${day}`\n}\n\nexport function CronExpressionBuilder({\n  value = defaultValue,\n  onChange,\n}: CronExpressionBuilderProps) {\n  const [state, setState] = React.useState<CronValue>(value)\n\n  const setField = (key: keyof CronValue, next: string) => {\n    setState((prev) => {\n      const updated = { ...prev, [key]: next }\n      const expression = `${updated.minute} ${updated.hour} ${updated.dayOfMonth} ${updated.month} ${updated.dayOfWeek}`\n      onChange?.({ ...updated, expression, human: toHuman(updated) })\n      return updated\n    })\n  }\n\n  const expression = `${state.minute} ${state.hour} ${state.dayOfMonth} ${state.month} ${state.dayOfWeek}`\n\n  return (\n    <div className=\"space-y-3\">\n      <div className=\"grid gap-3 md:grid-cols-3\">\n        <div className=\"space-y-1\">\n          <Label>Minute</Label>\n          <Select value={state.minute} onValueChange={(v) => setField('minute', v)}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {range(60, true).map((option) => (\n                <SelectItem key={option.value} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"space-y-1\">\n          <Label>Hour</Label>\n          <Select value={state.hour} onValueChange={(v) => setField('hour', v)}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {range(24, true).map((option) => (\n                <SelectItem key={option.value} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n        <div className=\"space-y-1\">\n          <Label>Day of Week</Label>\n          <Select value={state.dayOfWeek} onValueChange={(v) => setField('dayOfWeek', v)}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              {DOW.map((option) => (\n                <SelectItem key={option.value} value={option.value}>\n                  {option.label}\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        </div>\n      </div>\n      <div className=\"rounded border p-3 text-sm\">\n        <div className=\"font-medium\">Cron: {expression}</div>\n        <div className=\"text-muted-foreground\">{toHuman(state)}</div>\n      </div>\n    </div>\n  )\n}\n",
-      "path": "ui/cron-expression-builder.tsx",
-      "target": "components/ui/cron-expression-builder.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/emoji-picker.json b/public/registry/emoji-picker.json
deleted file mode 100644
index 4fac544..0000000
--- a/public/registry/emoji-picker.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "emoji-picker",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button",
-    "input",
-    "popover",
-    "scroll-area"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { ScrollArea } from '@/components/ui/scroll-area'\n\nconst EMOJI_GROUPS = {\n  Smileys: ['😀', '😁', '😂', '🤣', '😍', '🥳', '🤔', '😭', '😴', '😎'],\n  Gestures: ['👍', '👎', '👏', '🙏', '🔥', '💯', '✅', '❌', '👀', '🤝'],\n  Nature: ['🌱', '🌳', '🌸', '🌞', '🌙', '⭐', '🌊', '🐶', '🐱', '🦊'],\n  Objects: ['📦', '📌', '🧩', '🎯', '🛠️', '📅', '📚', '💡', '🔒', '🔔'],\n} as const\n\ntype EmojiPickerProps = {\n  value?: string\n  onChange?: (value: string) => void\n}\n\nexport function EmojiPicker({ value = '', onChange }: EmojiPickerProps) {\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState('')\n\n  const allGroups = Object.entries(EMOJI_GROUPS)\n  const filteredGroups = allGroups\n    .map(([group, emojis]) => ({\n      group,\n      emojis: emojis.filter((emoji) => emoji.includes(query.trim())),\n    }))\n    .filter((entry) => entry.emojis.length > 0)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button type=\"button\" variant=\"outline\" className=\"w-full justify-start\">\n          {value || 'Pick an emoji'}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[320px] space-y-2 p-3\">\n        <Input\n          placeholder=\"Filter emojis\"\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n        />\n        <ScrollArea className=\"h-64\">\n          <div className=\"space-y-3\">\n            {filteredGroups.map(({ group, emojis }) => (\n              <div key={group} className=\"space-y-1\">\n                <div className=\"text-xs font-medium text-muted-foreground\">\n                  {group}\n                </div>\n                <div className=\"grid grid-cols-8 gap-1\">\n                  {emojis.map((emoji) => (\n                    <button\n                      key={`${group}-${emoji}`}\n                      type=\"button\"\n                      className=\"rounded p-1 text-lg hover:bg-muted\"\n                      onClick={() => {\n                        onChange?.(emoji)\n                        setOpen(false)\n                      }}\n                    >\n                      {emoji}\n                    </button>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        </ScrollArea>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "path": "ui/emoji-picker.tsx",
-      "target": "components/ui/emoji-picker.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/image-upload-dropzone.json b/public/registry/image-upload-dropzone.json
deleted file mode 100644
index 4c0bc17..0000000
--- a/public/registry/image-upload-dropzone.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "image-upload-dropzone",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ImagePlus, Upload } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\n\ntype ImageUploadDropzoneProps = {\n  value?: string | null\n  onChange?: (value: string | null) => void\n}\n\nfunction cropCenterSquare(dataUrl: string): Promise<string> {\n  return new Promise((resolve, reject) => {\n    const img = new Image()\n    img.onload = () => {\n      const side = Math.min(img.width, img.height)\n      const sx = (img.width - side) / 2\n      const sy = (img.height - side) / 2\n      const canvas = document.createElement('canvas')\n      canvas.width = side\n      canvas.height = side\n      const ctx = canvas.getContext('2d')\n\n      if (!ctx) {\n        reject(new Error('Unable to crop image'))\n        return\n      }\n\n      ctx.drawImage(img, sx, sy, side, side, 0, 0, side, side)\n      resolve(canvas.toDataURL('image/png'))\n    }\n    img.onerror = () => reject(new Error('Failed to load image'))\n    img.src = dataUrl\n  })\n}\n\nexport function ImageUploadDropzone({ value, onChange }: ImageUploadDropzoneProps) {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [preview, setPreview] = React.useState<string | null>(value ?? null)\n  const [progress, setProgress] = React.useState(0)\n  const inputRef = React.useRef<HTMLInputElement>(null)\n\n  React.useEffect(() => {\n    setPreview(value ?? null)\n  }, [value])\n\n  const readFile = (file: File) => {\n    const reader = new FileReader()\n    reader.onload = () => {\n      const data = reader.result as string\n      setPreview(data)\n      onChange?.(data)\n\n      setProgress(0)\n      const timer = window.setInterval(() => {\n        setProgress((prev) => {\n          if (prev >= 100) {\n            window.clearInterval(timer)\n            return 100\n          }\n          return prev + 20\n        })\n      }, 120)\n    }\n    reader.readAsDataURL(file)\n  }\n\n  const handleFiles = (files: FileList | null) => {\n    const file = files?.[0]\n    if (!file || !file.type.startsWith('image/')) return\n    readFile(file)\n  }\n\n  return (\n    <div className=\"space-y-3\">\n      <div\n        className={`rounded-lg border-2 border-dashed p-6 text-center ${isDragging ? 'border-primary bg-muted' : 'border-muted-foreground/30'}`}\n        onDragOver={(event) => {\n          event.preventDefault()\n          setIsDragging(true)\n        }}\n        onDragLeave={() => setIsDragging(false)}\n        onDrop={(event) => {\n          event.preventDefault()\n          setIsDragging(false)\n          handleFiles(event.dataTransfer.files)\n        }}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept=\"image/*\"\n          className=\"hidden\"\n          onChange={(event) => handleFiles(event.target.files)}\n        />\n        <div className=\"mb-2 flex justify-center\">\n          <ImagePlus className=\"h-6 w-6 text-muted-foreground\" />\n        </div>\n        <p className=\"text-sm text-muted-foreground\">Drop image here or click to upload</p>\n        <Button type=\"button\" variant=\"outline\" className=\"mt-3\" onClick={() => inputRef.current?.click()}>\n          <Upload className=\"mr-2 h-4 w-4\" />\n          Choose Image\n        </Button>\n      </div>\n\n      {progress > 0 && progress < 100 ? (\n        <div className=\"rounded border p-2 text-sm\">Uploading... {progress}%</div>\n      ) : null}\n\n      {preview ? (\n        <div className=\"space-y-2 rounded border p-3\">\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img src={preview} alt=\"Preview\" className=\"max-h-56 w-full rounded object-contain\" />\n          <div className=\"flex gap-2\">\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={async () => {\n                const cropped = await cropCenterSquare(preview)\n                setPreview(cropped)\n                onChange?.(cropped)\n              }}\n            >\n              Crop Center Square\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"destructive\"\n              onClick={() => {\n                setPreview(null)\n                setProgress(0)\n                onChange?.(null)\n              }}\n            >\n              Remove\n            </Button>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n",
-      "path": "ui/image-upload-dropzone.tsx",
-      "target": "components/ui/image-upload-dropzone.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/inline-editable-field.json b/public/registry/inline-editable-field.json
deleted file mode 100644
index fe18b3f..0000000
--- a/public/registry/inline-editable-field.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "inline-editable-field",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button",
-    "input"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { Pencil } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\ntype InlineEditableFieldProps = {\n  value: string\n  onChange: (value: string) => void\n  placeholder?: string\n}\n\nexport function InlineEditableField({\n  value,\n  onChange,\n  placeholder = 'Click to edit',\n}: InlineEditableFieldProps) {\n  const [editing, setEditing] = React.useState(false)\n  const [draft, setDraft] = React.useState(value)\n\n  React.useEffect(() => {\n    setDraft(value)\n  }, [value])\n\n  const save = () => {\n    onChange(draft)\n    setEditing(false)\n  }\n\n  if (editing) {\n    return (\n      <Input\n        autoFocus\n        value={draft}\n        onChange={(event) => setDraft(event.target.value)}\n        onBlur={save}\n        onKeyDown={(event) => {\n          if (event.key === 'Enter') save()\n          if (event.key === 'Escape') {\n            setDraft(value)\n            setEditing(false)\n          }\n        }}\n      />\n    )\n  }\n\n  return (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      className=\"h-auto w-full justify-start px-2\"\n      onClick={() => setEditing(true)}\n    >\n      <span className=\"truncate text-left\">{value || placeholder}</span>\n      <Pencil className=\"ml-2 h-4 w-4\" />\n    </Button>\n  )\n}\n",
-      "path": "ui/inline-editable-field.tsx",
-      "target": "components/ui/inline-editable-field.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/location-input.json b/public/registry/location-input.json
deleted file mode 100644
index b613c65..0000000
--- a/public/registry/location-input.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "name": "location-input",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button",
-    "popover",
-    "scroll-area",
-    "command"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "import React, { useState } from 'react'\nimport { Check, ChevronsUpDown } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'\nimport {\n  Command,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { cn } from '@/lib/utils'\n\n// Import JSON data directly\nimport countries from '@/data/countries.json'\nimport states from '@/data/states.json'\n\ninterface Timezone {\n  zoneName: string\n  gmtOffset: number\n  gmtOffsetName: string\n  abbreviation: string\n  tzName: string\n}\n\ninterface CountryProps {\n  id: number\n  name: string\n  iso3: string\n  iso2: string\n  numeric_code: string\n  phone_code: string\n  capital: string\n  currency: string\n  currency_name: string\n  currency_symbol: string\n  tld: string\n  native: string\n  region: string\n  region_id: string\n  subregion: string\n  subregion_id: string\n  nationality: string\n  timezones: Timezone[]\n  translations: Record<string, string>\n  latitude: string\n  longitude: string\n  emoji: string\n  emojiU: string\n}\n\ninterface StateProps {\n  id: number\n  name: string\n  country_id: number\n  country_code: string\n  country_name: string\n  state_code: string\n  type: string | null\n  latitude: string\n  longitude: string\n}\n\ninterface LocationSelectorProps {\n  disabled?: boolean\n  onCountryChange?: (country: CountryProps | null) => void\n  onStateChange?: (state: StateProps | null) => void\n}\n\nconst LocationSelector = ({\n  disabled,\n  onCountryChange,\n  onStateChange,\n}: LocationSelectorProps) => {\n  const [selectedCountry, setSelectedCountry] = useState<CountryProps | null>(\n    null,\n  )\n  const [selectedState, setSelectedState] = useState<StateProps | null>(null)\n  const [openCountryDropdown, setOpenCountryDropdown] = useState(false)\n  const [openStateDropdown, setOpenStateDropdown] = useState(false)\n\n  // Cast imported JSON data to their respective types\n  const countriesData = countries as CountryProps[]\n  const statesData = states as StateProps[]\n\n  // Filter states for selected country\n  const availableStates = statesData.filter(\n    (state) => state.country_id === selectedCountry?.id,\n  )\n\n  const handleCountrySelect = (country: CountryProps | null) => {\n    setSelectedCountry(country)\n    setSelectedState(null) // Reset state when country changes\n    onCountryChange?.(country)\n    onStateChange?.(null)\n  }\n\n  const handleStateSelect = (state: StateProps | null) => {\n    setSelectedState(state)\n    onStateChange?.(state)\n  }\n\n  return (\n    <div className=\"flex gap-4\">\n      {/* Country Selector */}\n      <Popover open={openCountryDropdown} onOpenChange={setOpenCountryDropdown}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={openCountryDropdown}\n            disabled={disabled}\n            className=\"w-full justify-between\"\n          >\n            {selectedCountry ? (\n              <div className=\"flex items-center gap-2\">\n                <span>{selectedCountry.emoji}</span>\n                <span>{selectedCountry.name}</span>\n              </div>\n            ) : (\n              <span>Select Country...</span>\n            )}\n            <ChevronsUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[300px] p-0\">\n          <Command>\n            <CommandInput placeholder=\"Search country...\" />\n            <CommandList>\n              <CommandEmpty>No country found.</CommandEmpty>\n              <CommandGroup>\n                <ScrollArea className=\"h-[300px]\">\n                  {countriesData.map((country) => (\n                    <CommandItem\n                      key={country.id}\n                      value={country.name}\n                      onSelect={() => {\n                        handleCountrySelect(country)\n                        setOpenCountryDropdown(false)\n                      }}\n                      className=\"flex cursor-pointer items-center justify-between text-sm\"\n                    >\n                      <div className=\"flex items-center gap-2\">\n                        <span>{country.emoji}</span>\n                        <span>{country.name}</span>\n                      </div>\n                      <Check\n                        className={cn(\n                          'h-4 w-4',\n                          selectedCountry?.id === country.id\n                            ? 'opacity-100'\n                            : 'opacity-0',\n                        )}\n                      />\n                    </CommandItem>\n                  ))}\n                  <ScrollBar orientation=\"vertical\" />\n                </ScrollArea>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n\n      {/* State Selector - Only shown if selected country has states */}\n      {availableStates.length > 0 && (\n        <Popover open={openStateDropdown} onOpenChange={setOpenStateDropdown}>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              role=\"combobox\"\n              aria-expanded={openStateDropdown}\n              disabled={!selectedCountry}\n              className=\"w-full justify-between\"\n            >\n              {selectedState ? (\n                <span>{selectedState.name}</span>\n              ) : (\n                <span>Select State...</span>\n              )}\n              <ChevronsUpDown className=\"h-4 w-4 shrink-0 opacity-50\" />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-[300px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search state...\" />\n              <CommandList>\n                <CommandEmpty>No state found.</CommandEmpty>\n                <CommandGroup>\n                  <ScrollArea className=\"h-[300px]\">\n                    {availableStates.map((state) => (\n                      <CommandItem\n                        key={state.id}\n                        value={state.name}\n                        onSelect={() => {\n                          handleStateSelect(state)\n                          setOpenStateDropdown(false)\n                        }}\n                        className=\"flex cursor-pointer items-center justify-between text-sm\"\n                      >\n                        <span>{state.name}</span>\n                        <Check\n                          className={cn(\n                            'h-4 w-4',\n                            selectedState?.id === state.id\n                              ? 'opacity-100'\n                              : 'opacity-0',\n                          )}\n                        />\n                      </CommandItem>\n                    ))}\n                    <ScrollBar orientation=\"vertical\" />\n                  </ScrollArea>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n      )}\n    </div>\n  )\n}\n\nexport default LocationSelector\n",
-      "path": "ui/location-input.tsx",
-      "target": "components/ui/location-input.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/masked-input.json b/public/registry/masked-input.json
deleted file mode 100644
index f9b969e..0000000
--- a/public/registry/masked-input.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "masked-input",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "input"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Input } from '@/components/ui/input'\n\nconst MASK_TOKENS = {\n  '9': /\\d/,\n  a: /[A-Za-z]/,\n  '*': /[A-Za-z0-9]/,\n} as const\n\nexport function applyMask(raw: string, mask: string) {\n  const clean = raw.replace(/[^A-Za-z0-9]/g, '')\n  let cleanIndex = 0\n  let maskedValue = ''\n\n  for (let i = 0; i < mask.length; i += 1) {\n    const maskChar = mask[i] as keyof typeof MASK_TOKENS\n    const token = MASK_TOKENS[maskChar]\n\n    if (!token) {\n      maskedValue += mask[i]\n      continue\n    }\n\n    while (cleanIndex < clean.length && !token.test(clean[cleanIndex])) {\n      cleanIndex += 1\n    }\n\n    if (cleanIndex < clean.length) {\n      maskedValue += clean[cleanIndex]\n      cleanIndex += 1\n    } else {\n      break\n    }\n  }\n\n  return maskedValue\n}\n\ntype MaskedInputProps = Omit<\n  React.ComponentProps<typeof Input>,\n  'value' | 'onChange'\n> & {\n  mask: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n}\n\nexport function MaskedInput({\n  mask,\n  value,\n  defaultValue,\n  onValueChange,\n  ...props\n}: MaskedInputProps) {\n  const [internalValue, setInternalValue] = React.useState(\n    applyMask(defaultValue ?? '', mask),\n  )\n\n  const isControlled = value !== undefined\n  const displayValue = isControlled ? applyMask(value, mask) : internalValue\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const nextValue = applyMask(event.target.value, mask)\n\n    if (!isControlled) {\n      setInternalValue(nextValue)\n    }\n\n    onValueChange?.(nextValue)\n  }\n\n  return <Input {...props} value={displayValue} onChange={handleChange} />\n}\n",
-      "path": "ui/masked-input.tsx",
-      "target": "components/ui/masked-input.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/signature-input.json b/public/registry/signature-input.json
deleted file mode 100644
index 2112c78..0000000
--- a/public/registry/signature-input.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "signature-input",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport { useEffect, useState, useRef } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { Eraser } from 'lucide-react'\n\ntype SignatureInputProps = {\n  canvasRef?: React.RefObject<HTMLCanvasElement | null>\n  onSignatureChange: (signature: string | null) => void\n}\n\nconst disableTouchScroll = (canvas: HTMLCanvasElement) => {\n  const preventScroll = (e: TouchEvent) => {\n    e.preventDefault()\n  }\n\n  canvas.addEventListener('touchstart', preventScroll, { passive: false })\n  canvas.addEventListener('touchmove', preventScroll, { passive: false })\n  canvas.addEventListener('touchend', preventScroll, { passive: false })\n\n  return () => {\n    canvas.removeEventListener('touchstart', preventScroll)\n    canvas.removeEventListener('touchmove', preventScroll)\n    canvas.removeEventListener('touchend', preventScroll)\n  }\n}\n\nexport default function SignatureInput({\n  canvasRef: externalCanvasRef,\n  onSignatureChange,\n}: SignatureInputProps) {\n  const internalCanvasRef = useRef<HTMLCanvasElement>(null)\n  const canvasRef = externalCanvasRef ?? internalCanvasRef\n  const [isDrawing, setIsDrawing] = useState(false)\n  const [lastPosition, setLastPosition] = useState<{\n    x: number\n    y: number\n  } | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    // Setup canvas context\n    const ctx = canvas.getContext('2d')\n    if (ctx) {\n      ctx.lineWidth = 2\n      ctx.lineCap = 'round'\n      ctx.lineJoin = 'round'\n    }\n\n    const updateStrokeColor = () => {\n      const ctx = canvas.getContext('2d')\n      if (!ctx) return\n\n      const isDarkClass = document.documentElement.classList.contains('dark')\n      const isLightClass = document.documentElement.classList.contains('light')\n\n      const systemPrefersDark = window.matchMedia(\n        '(prefers-color-scheme: dark)',\n      ).matches\n\n      const isDarkMode = isDarkClass || (!isLightClass && systemPrefersDark)\n\n      ctx.strokeStyle = isDarkMode ? '#ffffff' : '#000000'\n    }\n\n    updateStrokeColor()\n\n    // Disable touch scrolling while drawing\n    const cleanupTouchScroll = disableTouchScroll(canvas)\n\n    const observer = new MutationObserver(updateStrokeColor)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class'],\n    })\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    mediaQuery.addEventListener('change', updateStrokeColor)\n\n    return () => {\n      cleanupTouchScroll()\n      observer.disconnect()\n      mediaQuery.removeEventListener('change', updateStrokeColor)\n    }\n  }, [canvasRef])\n\n  const startDrawing = (\n    e:\n      | React.MouseEvent<HTMLCanvasElement>\n      | React.TouchEvent<HTMLCanvasElement>,\n  ) => {\n    e.preventDefault()\n    setIsDrawing(true)\n    draw(e)\n  }\n\n  const stopDrawing = () => {\n    if (!isDrawing) return\n\n    setIsDrawing(false)\n    setLastPosition(null)\n    const canvas = canvasRef.current\n    const ctx = canvas?.getContext('2d')\n    if (canvas && ctx) {\n      ctx.beginPath()\n      const dataUrl = canvas.toDataURL()\n      onSignatureChange(dataUrl)\n    }\n  }\n\n  const draw = (\n    e:\n      | React.MouseEvent<HTMLCanvasElement>\n      | React.TouchEvent<HTMLCanvasElement>,\n  ) => {\n    e.preventDefault()\n    if (!isDrawing) return\n\n    const canvas = canvasRef.current\n    const ctx = canvas?.getContext('2d')\n    if (canvas && ctx) {\n      const rect = canvas.getBoundingClientRect()\n      const x = ('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left\n      const y = ('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top\n\n      if (lastPosition) {\n        const midX = (lastPosition.x + x) / 2\n        const midY = (lastPosition.y + y) / 2\n\n        ctx.beginPath()\n        ctx.moveTo(lastPosition.x, lastPosition.y)\n        ctx.quadraticCurveTo(midX, midY, x, y)\n        ctx.stroke()\n      } else {\n        ctx.beginPath()\n        ctx.moveTo(x, y)\n      }\n\n      setLastPosition({ x, y })\n    }\n  }\n\n  const clearSignature = () => {\n    const canvas = canvasRef.current\n    const ctx = canvas?.getContext('2d')\n    if (canvas && ctx) {\n      ctx.clearRect(0, 0, canvas.width, canvas.height)\n      onSignatureChange(null)\n    }\n  }\n\n  // Callback ref to sync both internal and external refs\n  const setCanvasRef = (element: HTMLCanvasElement | null) => {\n    ;(\n      internalCanvasRef as React.MutableRefObject<HTMLCanvasElement | null>\n    ).current = element\n    if (externalCanvasRef) {\n      ;(\n        externalCanvasRef as React.MutableRefObject<HTMLCanvasElement | null>\n      ).current = element\n    }\n  }\n\n  return (\n    <div className=\"border border-gray-300 rounded-md overflow-hidden relative w-[400px] h-[200px]\">\n      <canvas\n        ref={setCanvasRef}\n        width={400}\n        height={200}\n        className=\"w-full h-full\"\n        onMouseDown={startDrawing}\n        onMouseUp={stopDrawing}\n        onMouseOut={stopDrawing}\n        onMouseMove={draw}\n        onTouchStart={startDrawing}\n        onTouchEnd={stopDrawing}\n        onTouchMove={draw}\n      />\n      <Button\n        type=\"button\"\n        size=\"icon\"\n        variant=\"outline\"\n        className=\"absolute left-1 bottom-1 z-10 rounded-full\"\n        onClick={clearSignature}\n      >\n        <Eraser className=\"w-4 h-4 text-muted-foreground hover:text-primary\" />\n      </Button>\n    </div>\n  )\n}\n",
-      "path": "ui/signature-input.tsx",
-      "target": "components/ui/signature-input.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/signature-pad.json b/public/registry/signature-pad.json
deleted file mode 100644
index 6fb73c7..0000000
--- a/public/registry/signature-pad.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "signature-pad",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button",
-    "dialog",
-    "progress"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { useEffect, useState, useRef, useCallback } from 'react'\nimport { Button } from '@/components/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog'\n// Progress is now inline in the button\nimport { cn } from '@/lib/utils'\nimport { Eraser, Pen, Check, Pencil, RotateCcw } from 'lucide-react'\n\ntype SignaturePadProps = {\n  value?: string | null\n  onChange: (signature: string | null) => void\n  disabled?: boolean\n  className?: string\n  holdToSignDuration?: number // Duration in ms to hold for confirming signature\n}\n\nconst CANVAS_WIDTH = 400\nconst CANVAS_HEIGHT = 200\nconst DEFAULT_HOLD_DURATION = 1500 // 1.5 seconds\n\nconst disableTouchScroll = (canvas: HTMLCanvasElement) => {\n  const preventScroll = (e: TouchEvent) => {\n    e.preventDefault()\n  }\n\n  canvas.addEventListener('touchstart', preventScroll, { passive: false })\n  canvas.addEventListener('touchmove', preventScroll, { passive: false })\n  canvas.addEventListener('touchend', preventScroll, { passive: false })\n\n  return () => {\n    canvas.removeEventListener('touchstart', preventScroll)\n    canvas.removeEventListener('touchmove', preventScroll)\n    canvas.removeEventListener('touchend', preventScroll)\n  }\n}\n\nexport default function SignaturePad({\n  value,\n  onChange,\n  disabled = false,\n  className,\n  holdToSignDuration = DEFAULT_HOLD_DURATION,\n}: SignaturePadProps) {\n  const [isDialogOpen, setIsDialogOpen] = useState(false)\n  const [isDrawing, setIsDrawing] = useState(false)\n  const [lastPosition, setLastPosition] = useState<{\n    x: number\n    y: number\n  } | null>(null)\n  const [hasDrawn, setHasDrawn] = useState(false)\n  const [holdProgress, setHoldProgress] = useState(0)\n  const [isHolding, setIsHolding] = useState(false)\n\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const holdTimerRef = useRef<NodeJS.Timeout | null>(null)\n  const holdStartRef = useRef<number | null>(null)\n  const animationFrameRef = useRef<number | null>(null)\n\n  // Helper function to get the correct stroke color based on theme\n  const getStrokeColor = () => {\n    const isDarkClass = document.documentElement.classList.contains('dark')\n    const isLightClass = document.documentElement.classList.contains('light')\n    const systemPrefersDark = window.matchMedia(\n      '(prefers-color-scheme: dark)',\n    ).matches\n\n    const isDarkMode = isDarkClass || (!isLightClass && systemPrefersDark)\n    return isDarkMode ? '#ffffff' : '#000000'\n  }\n\n  // Setup canvas when dialog opens\n  useEffect(() => {\n    if (!isDialogOpen) return\n\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    const ctx = canvas.getContext('2d')\n    if (ctx) {\n      ctx.lineWidth = 2\n      ctx.lineCap = 'round'\n      ctx.lineJoin = 'round'\n      ctx.strokeStyle = getStrokeColor()\n    }\n\n    const updateStrokeColor = () => {\n      const ctx = canvas.getContext('2d')\n      if (!ctx) return\n      ctx.strokeStyle = getStrokeColor()\n    }\n\n    const cleanupTouchScroll = disableTouchScroll(canvas)\n\n    const observer = new MutationObserver(updateStrokeColor)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['class'],\n    })\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    mediaQuery.addEventListener('change', updateStrokeColor)\n\n    return () => {\n      cleanupTouchScroll()\n      observer.disconnect()\n      mediaQuery.removeEventListener('change', updateStrokeColor)\n    }\n  }, [isDialogOpen])\n\n  // Reset canvas state when dialog opens\n  useEffect(() => {\n    if (isDialogOpen) {\n      setHasDrawn(false)\n      setHoldProgress(0)\n      setIsHolding(false)\n      // Clear canvas on open\n      const canvas = canvasRef.current\n      const ctx = canvas?.getContext('2d')\n      if (canvas && ctx) {\n        ctx.clearRect(0, 0, canvas.width, canvas.height)\n      }\n    }\n  }, [isDialogOpen])\n\n  const startDrawing = (\n    e:\n      | React.MouseEvent<HTMLCanvasElement>\n      | React.TouchEvent<HTMLCanvasElement>,\n  ) => {\n    e.preventDefault()\n    setIsDrawing(true)\n    setHasDrawn(true)\n    draw(e)\n  }\n\n  const stopDrawing = () => {\n    if (!isDrawing) return\n    setIsDrawing(false)\n    setLastPosition(null)\n    const canvas = canvasRef.current\n    const ctx = canvas?.getContext('2d')\n    if (canvas && ctx) {\n      ctx.beginPath()\n    }\n  }\n\n  const draw = (\n    e:\n      | React.MouseEvent<HTMLCanvasElement>\n      | React.TouchEvent<HTMLCanvasElement>,\n  ) => {\n    e.preventDefault()\n    if (!isDrawing) return\n\n    const canvas = canvasRef.current\n    const ctx = canvas?.getContext('2d')\n    if (canvas && ctx) {\n      // Ensure correct stroke color before drawing\n      ctx.strokeStyle = getStrokeColor()\n      \n      const rect = canvas.getBoundingClientRect()\n      const scaleX = canvas.width / rect.width\n      const scaleY = canvas.height / rect.height\n      const x =\n        (('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left) *\n        scaleX\n      const y =\n        (('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top) *\n        scaleY\n\n      if (lastPosition) {\n        const midX = (lastPosition.x + x) / 2\n        const midY = (lastPosition.y + y) / 2\n\n        ctx.beginPath()\n        ctx.moveTo(lastPosition.x, lastPosition.y)\n        ctx.quadraticCurveTo(midX, midY, x, y)\n        ctx.stroke()\n      } else {\n        ctx.beginPath()\n        ctx.moveTo(x, y)\n      }\n\n      setLastPosition({ x, y })\n    }\n  }\n\n  const clearSignature = () => {\n    const canvas = canvasRef.current\n    const ctx = canvas?.getContext('2d')\n    if (canvas && ctx) {\n      ctx.clearRect(0, 0, canvas.width, canvas.height)\n      setHasDrawn(false)\n      setHoldProgress(0)\n    }\n  }\n\n  const updateHoldProgress = useCallback(() => {\n    if (!holdStartRef.current) return\n\n    const elapsed = Date.now() - holdStartRef.current\n    const progress = Math.min((elapsed / holdToSignDuration) * 100, 100)\n    setHoldProgress(progress)\n\n    if (progress < 100) {\n      animationFrameRef.current = requestAnimationFrame(updateHoldProgress)\n    }\n  }, [holdToSignDuration])\n\n  const handleHoldStart = useCallback(\n    (e: React.PointerEvent) => {\n      if (!hasDrawn) return\n\n      e.preventDefault()\n      setIsHolding(true)\n      holdStartRef.current = Date.now()\n      setHoldProgress(0)\n\n      // Start progress animation\n      animationFrameRef.current = requestAnimationFrame(updateHoldProgress)\n\n      // Set timer for completion\n      holdTimerRef.current = setTimeout(() => {\n        const canvas = canvasRef.current\n        if (canvas) {\n          const dataUrl = canvas.toDataURL('image/png')\n          onChange(dataUrl)\n          setIsDialogOpen(false)\n        }\n        setIsHolding(false)\n        setHoldProgress(0)\n      }, holdToSignDuration)\n    },\n    [hasDrawn, holdToSignDuration, onChange, updateHoldProgress],\n  )\n\n  const handleHoldEnd = useCallback(() => {\n    setIsHolding(false)\n    holdStartRef.current = null\n\n    if (holdTimerRef.current) {\n      clearTimeout(holdTimerRef.current)\n      holdTimerRef.current = null\n    }\n\n    if (animationFrameRef.current) {\n      cancelAnimationFrame(animationFrameRef.current)\n      animationFrameRef.current = null\n    }\n\n    setHoldProgress(0)\n  }, [])\n\n  const handleClearValue = () => {\n    onChange(null)\n  }\n\n  const handleReset = () => {\n    onChange(null)\n    setIsDialogOpen(false)\n  }\n\n  const handleEditSignature = () => {\n    setIsDialogOpen(true)\n  }\n\n  // Cleanup timers on unmount\n  useEffect(() => {\n    return () => {\n      if (holdTimerRef.current) {\n        clearTimeout(holdTimerRef.current)\n      }\n      if (animationFrameRef.current) {\n        cancelAnimationFrame(animationFrameRef.current)\n      }\n    }\n  }, [])\n\n  // If we have a signature value, show the signature image\n  if (value) {\n    return (\n      <div\n        className={cn(\n          'relative inline-flex items-center justify-start mt-2',\n          className,\n        )}\n      >\n        <div className=\"relative border border-input rounded-md overflow-hidden bg-white dark:bg-zinc-900\">\n          {/* eslint-disable-next-line @next/next/no-img-element */}\n          <img\n            src={value}\n            alt=\"Signature\"\n            className=\"w-[200px] h-[100px] object-contain\"\n          />\n          <div className=\"absolute bottom-1 right-1 flex gap-1\">\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"outline\"\n              className=\"h-7 w-7 rounded-full bg-background/80 backdrop-blur-sm\"\n              onClick={handleEditSignature}\n              disabled={disabled}\n            >\n              <Pencil className=\"w-3 h-3 text-muted-foreground hover:text-primary\" />\n            </Button>\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"outline\"\n              className=\"h-7 w-7 rounded-full bg-background/80 backdrop-blur-sm\"\n              onClick={handleClearValue}\n              disabled={disabled}\n            >\n              <Eraser className=\"w-3 h-3 text-muted-foreground hover:text-primary\" />\n            </Button>\n          </div>\n        </div>\n\n        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>\n          <DialogContent className=\"sm:max-w-md\">\n            <DialogHeader>\n              <DialogTitle className=\"flex items-center gap-2\">\n                <Pen className=\"w-4 h-4\" />\n                Draw Signature\n              </DialogTitle>\n              <DialogDescription>\n                Draw your signature below, then hold the confirm button to sign.\n              </DialogDescription>\n            </DialogHeader>\n\n            <div className=\"border border-input rounded-md overflow-hidden relative bg-background\">\n              <canvas\n                ref={canvasRef}\n                width={CANVAS_WIDTH}\n                height={CANVAS_HEIGHT}\n                className=\"w-full h-[200px] cursor-crosshair touch-none\"\n                onMouseDown={startDrawing}\n                onMouseUp={stopDrawing}\n                onMouseOut={stopDrawing}\n                onMouseMove={draw}\n                onTouchStart={startDrawing}\n                onTouchEnd={stopDrawing}\n                onTouchMove={draw}\n              />\n              <Button\n                type=\"button\"\n                size=\"icon\"\n                variant=\"outline\"\n                className=\"absolute left-2 bottom-2 rounded-full h-8 w-8\"\n                onClick={clearSignature}\n              >\n                <Eraser className=\"w-4 h-4 text-muted-foreground\" />\n              </Button>\n            </div>\n\n            <DialogFooter className=\"flex-row gap-2 sm:flex-row\">\n              <Button\n                type=\"button\"\n                variant=\"destructive\"\n                className=\"flex-shrink-0\"\n                onClick={handleReset}\n              >\n                <RotateCcw className=\"w-4 h-4 mr-2\" />\n                Reset\n              </Button>\n              <Button\n                type=\"button\"\n                className={cn(\n                  'flex-1 relative overflow-hidden transition-all border-2 border-transparent',\n                  hasDrawn\n                    ? 'bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300'\n                    : 'bg-muted text-muted-foreground cursor-not-allowed',\n                )}\n                disabled={!hasDrawn}\n                onPointerDown={handleHoldStart}\n                onPointerUp={handleHoldEnd}\n                onPointerLeave={handleHoldEnd}\n                onPointerCancel={handleHoldEnd}\n              >\n                {/* Progress fill background */}\n                <span\n                  className=\"absolute left-0 top-0 bottom-0 bg-emerald-500 transition-none\"\n                  style={{ width: `${holdProgress}%` }}\n                />\n                <span className=\"relative z-10 flex items-center gap-2\">\n                  <Check className={cn('w-4 h-4', isHolding && 'animate-pulse')} />\n                  {isHolding ? 'Keep holding...' : 'Hold to confirm'}\n                </span>\n              </Button>\n            </DialogFooter>\n          </DialogContent>\n        </Dialog>\n      </div>\n    )\n  }\n\n  // Initial state: show pen button\n  return (\n    <div className={cn('inline-flex mt-2', className)}>\n      <Button\n        type=\"button\"\n        size=\"icon\"\n        variant=\"outline\"\n        className=\"rounded-full\"\n        onClick={() => setIsDialogOpen(true)}\n        disabled={disabled}\n      >\n        <Pen className=\"w-4 h-4\" />\n      </Button>\n\n      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>\n        <DialogContent className=\"sm:max-w-md\">\n          <DialogHeader>\n            <DialogTitle className=\"flex items-center gap-2\">\n              <Pen className=\"w-4 h-4\" />\n              Draw Signature\n            </DialogTitle>\n            <DialogDescription>\n              Draw your signature below, then hold the confirm button to sign.\n            </DialogDescription>\n          </DialogHeader>\n\n          <div className=\"border border-input rounded-md overflow-hidden relative bg-background\">\n            <canvas\n              ref={canvasRef}\n              width={CANVAS_WIDTH}\n              height={CANVAS_HEIGHT}\n              className=\"w-full h-[200px] cursor-crosshair touch-none\"\n              onMouseDown={startDrawing}\n              onMouseUp={stopDrawing}\n              onMouseOut={stopDrawing}\n              onMouseMove={draw}\n              onTouchStart={startDrawing}\n              onTouchEnd={stopDrawing}\n              onTouchMove={draw}\n            />\n            <Button\n              type=\"button\"\n              size=\"icon\"\n              variant=\"outline\"\n              className=\"absolute left-2 bottom-2 rounded-full h-8 w-8\"\n              onClick={clearSignature}\n            >\n              <Eraser className=\"w-4 h-4 text-muted-foreground\" />\n            </Button>\n          </div>\n\n          <DialogFooter className=\"flex-row gap-2 sm:flex-row\">\n            <Button\n              type=\"button\"\n              className={cn(\n                'flex-1 relative overflow-hidden transition-all border-2 border-transparent',\n                hasDrawn\n                  ? 'bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300'\n                  : 'bg-muted text-muted-foreground cursor-not-allowed',\n              )}\n              disabled={!hasDrawn}\n              onPointerDown={handleHoldStart}\n              onPointerUp={handleHoldEnd}\n              onPointerLeave={handleHoldEnd}\n              onPointerCancel={handleHoldEnd}\n            >\n              {/* Progress fill background */}\n              <span\n                className=\"absolute left-0 top-0 bottom-0 bg-emerald-500 transition-none\"\n                style={{ width: `${holdProgress}%` }}\n              />\n              <span className=\"relative z-10 flex items-center gap-2\">\n                <Check className={cn('w-4 h-4', isHolding && 'animate-pulse')} />\n                {isHolding ? 'Keep holding...' : 'Hold to confirm'}\n              </span>\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n",
-      "path": "ui/signature-pad.tsx",
-      "target": "components/ui/signature-pad.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/sortable-list-input.json b/public/registry/sortable-list-input.json
deleted file mode 100644
index e75a57f..0000000
--- a/public/registry/sortable-list-input.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "sortable-list-input",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button",
-    "input"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { GripVertical, Plus, X } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport { Input } from '@/components/ui/input'\n\ntype SortableListInputProps = {\n  value: string[]\n  onChange: (items: string[]) => void\n}\n\nfunction reorder<T>(list: T[], from: number, to: number) {\n  const next = [...list]\n  const [moved] = next.splice(from, 1)\n  next.splice(to, 0, moved)\n  return next\n}\n\nexport function SortableListInput({ value, onChange }: SortableListInputProps) {\n  const [draft, setDraft] = React.useState('')\n  const [dragIndex, setDragIndex] = React.useState<number | null>(null)\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex gap-2\">\n        <Input\n          value={draft}\n          onChange={(event) => setDraft(event.target.value)}\n          placeholder=\"Add item\"\n          onKeyDown={(event) => {\n            if (event.key === 'Enter' && draft.trim()) {\n              onChange([...value, draft.trim()])\n              setDraft('')\n            }\n          }}\n        />\n        <Button\n          type=\"button\"\n          onClick={() => {\n            if (!draft.trim()) return\n            onChange([...value, draft.trim()])\n            setDraft('')\n          }}\n        >\n          <Plus className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <div className=\"space-y-2\">\n        {value.map((item, index) => (\n          <div\n            key={`${item}-${index}`}\n            className=\"flex items-center gap-2 rounded border p-2\"\n            draggable\n            onDragStart={() => setDragIndex(index)}\n            onDragOver={(event) => event.preventDefault()}\n            onDrop={() => {\n              if (dragIndex === null || dragIndex === index) return\n              onChange(reorder(value, dragIndex, index))\n              setDragIndex(null)\n            }}\n          >\n            <GripVertical className=\"h-4 w-4 text-muted-foreground\" />\n            <span className=\"flex-1 text-sm\">{item}</span>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => onChange(value.filter((_, i) => i !== index))}\n            >\n              <X className=\"h-4 w-4\" />\n            </Button>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n",
-      "path": "ui/sortable-list-input.tsx",
-      "target": "components/ui/sortable-list-input.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/token-input.json b/public/registry/token-input.json
deleted file mode 100644
index f2cdd5c..0000000
--- a/public/registry/token-input.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "token-input",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "badge",
-    "input"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { X } from 'lucide-react'\n\nimport { Badge } from '@/components/ui/badge'\nimport { Input } from '@/components/ui/input'\n\ntype TokenInputProps = {\n  value: string[]\n  onChange: (tokens: string[]) => void\n  placeholder?: string\n}\n\nexport function TokenInput({ value, onChange, placeholder }: TokenInputProps) {\n  const [draft, setDraft] = React.useState('')\n\n  const addToken = (raw: string) => {\n    const next = raw.trim()\n    if (!next || value.includes(next)) return\n    onChange([...value, next])\n  }\n\n  const removeToken = (token: string) => {\n    onChange(value.filter((item) => item !== token))\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter' || event.key === ',') {\n      event.preventDefault()\n      addToken(draft)\n      setDraft('')\n    }\n\n    if (event.key === 'Backspace' && !draft && value.length > 0) {\n      removeToken(value[value.length - 1])\n    }\n  }\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"flex flex-wrap gap-2 rounded-md border p-2\">\n        {value.map((token) => (\n          <Badge key={token} variant=\"secondary\" className=\"gap-1\">\n            {token}\n            <button\n              type=\"button\"\n              onClick={() => removeToken(token)}\n              aria-label={`Remove ${token}`}\n            >\n              <X className=\"h-3 w-3\" />\n            </button>\n          </Badge>\n        ))}\n        <Input\n          className=\"h-8 border-0 p-0 shadow-none focus-visible:ring-0\"\n          value={draft}\n          onChange={(event) => setDraft(event.target.value)}\n          onKeyDown={handleKeyDown}\n          onBlur={() => {\n            if (draft.trim()) {\n              addToken(draft)\n              setDraft('')\n            }\n          }}\n          placeholder={placeholder ?? 'Type and press Enter'}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "path": "ui/token-input.tsx",
-      "target": "components/ui/token-input.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/transfer-list.json b/public/registry/transfer-list.json
deleted file mode 100644
index 679c799..0000000
--- a/public/registry/transfer-list.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "name": "transfer-list",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\n\nimport { Button } from '@/components/ui/button'\n\ntype TransferItem = {\n  id: string\n  label: string\n}\n\ntype TransferListProps = {\n  available: TransferItem[]\n  selected: TransferItem[]\n  onChange: (next: { available: TransferItem[]; selected: TransferItem[] }) => void\n}\n\nfunction pick(list: TransferItem[], ids: Set<string>) {\n  return list.filter((item) => ids.has(item.id))\n}\n\nfunction omit(list: TransferItem[], ids: Set<string>) {\n  return list.filter((item) => !ids.has(item.id))\n}\n\nfunction Panel({\n  title,\n  items,\n  active,\n  toggle,\n}: {\n  title: string\n  items: TransferItem[]\n  active: Set<string>\n  toggle: (id: string) => void\n}) {\n  return (\n    <div className=\"flex-1 rounded border\">\n      <div className=\"border-b px-3 py-2 text-sm font-medium\">{title}</div>\n      <div className=\"max-h-60 space-y-1 overflow-y-auto p-2\">\n        {items.map((item) => (\n          <label key={item.id} className=\"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted\">\n            <input\n              type=\"checkbox\"\n              checked={active.has(item.id)}\n              onChange={() => toggle(item.id)}\n            />\n            <span className=\"text-sm\">{item.label}</span>\n          </label>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport function TransferList({ available, selected, onChange }: TransferListProps) {\n  const [activeAvailable, setActiveAvailable] = React.useState<Set<string>>(new Set())\n  const [activeSelected, setActiveSelected] = React.useState<Set<string>>(new Set())\n\n  const moveRight = () => {\n    const moveItems = pick(available, activeAvailable)\n    onChange({\n      available: omit(available, activeAvailable),\n      selected: [...selected, ...moveItems],\n    })\n    setActiveAvailable(new Set())\n  }\n\n  const moveLeft = () => {\n    const moveItems = pick(selected, activeSelected)\n    onChange({\n      available: [...available, ...moveItems],\n      selected: omit(selected, activeSelected),\n    })\n    setActiveSelected(new Set())\n  }\n\n  return (\n    <div className=\"flex flex-col gap-3 md:flex-row md:items-center\">\n      <Panel\n        title=\"Available\"\n        items={available}\n        active={activeAvailable}\n        toggle={(id) => {\n          setActiveAvailable((prev) => {\n            const next = new Set(prev)\n            if (next.has(id)) next.delete(id)\n            else next.add(id)\n            return next\n          })\n        }}\n      />\n      <div className=\"flex flex-row gap-2 self-center md:flex-col\">\n        <Button type=\"button\" onClick={moveRight} disabled={activeAvailable.size === 0}>\n          Add\n        </Button>\n        <Button type=\"button\" variant=\"outline\" onClick={moveLeft} disabled={activeSelected.size === 0}>\n          Remove\n        </Button>\n      </div>\n      <Panel\n        title=\"Selected\"\n        items={selected}\n        active={activeSelected}\n        toggle={(id) => {\n          setActiveSelected((prev) => {\n            const next = new Set(prev)\n            if (next.has(id)) next.delete(id)\n            else next.add(id)\n            return next\n          })\n        }}\n      />\n    </div>\n  )\n}\n",
-      "path": "ui/transfer-list.tsx",
-      "target": "components/ui/transfer-list.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/registry/tree-select.json b/public/registry/tree-select.json
deleted file mode 100644
index bcf9311..0000000
--- a/public/registry/tree-select.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "name": "tree-select",
-  "type": "registry:ui",
-  "registryDependencies": [
-    "button",
-    "popover",
-    "scroll-area"
-  ],
-  "files": [
-    {
-      "type": "registry:ui",
-      "content": "'use client'\n\nimport * as React from 'react'\nimport { ChevronDown, ChevronRight } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { ScrollArea } from '@/components/ui/scroll-area'\n\nexport type TreeOption = {\n  id: string\n  label: string\n  children?: TreeOption[]\n}\n\ntype TreeSelectProps = {\n  options: TreeOption[]\n  value: string[]\n  onChange: (value: string[]) => void\n  placeholder?: string\n}\n\nfunction flatten(options: TreeOption[]): TreeOption[] {\n  return options.flatMap((option) => [option, ...(option.children ? flatten(option.children) : [])])\n}\n\nfunction TreeNode({\n  node,\n  depth,\n  expanded,\n  selected,\n  toggleExpand,\n  toggleSelect,\n}: {\n  node: TreeOption\n  depth: number\n  expanded: Set<string>\n  selected: Set<string>\n  toggleExpand: (id: string) => void\n  toggleSelect: (id: string) => void\n}) {\n  const hasChildren = Boolean(node.children?.length)\n  const isExpanded = expanded.has(node.id)\n\n  return (\n    <div>\n      <div className=\"flex items-center gap-2 rounded px-2 py-1 hover:bg-muted\" style={{ paddingLeft: `${depth * 14 + 8}px` }}>\n        {hasChildren ? (\n          <button type=\"button\" onClick={() => toggleExpand(node.id)}>\n            {isExpanded ? <ChevronDown className=\"h-4 w-4\" /> : <ChevronRight className=\"h-4 w-4\" />}\n          </button>\n        ) : (\n          <span className=\"inline-block w-4\" />\n        )}\n        <input type=\"checkbox\" checked={selected.has(node.id)} onChange={() => toggleSelect(node.id)} />\n        <span className=\"text-sm\">{node.label}</span>\n      </div>\n      {hasChildren && isExpanded && (\n        <div className=\"space-y-1\">\n          {node.children?.map((child) => (\n            <TreeNode\n              key={child.id}\n              node={child}\n              depth={depth + 1}\n              expanded={expanded}\n              selected={selected}\n              toggleExpand={toggleExpand}\n              toggleSelect={toggleSelect}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport function TreeSelect({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select items',\n}: TreeSelectProps) {\n  const [open, setOpen] = React.useState(false)\n  const [expanded, setExpanded] = React.useState<Set<string>>(new Set())\n\n  const selected = new Set(value)\n  const allNodes = flatten(options)\n  const selectedLabels = allNodes.filter((node) => selected.has(node.id)).map((node) => node.label)\n\n  const toggleSelect = (id: string) => {\n    const next = new Set(selected)\n    if (next.has(id)) next.delete(id)\n    else next.add(id)\n    onChange([...next])\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button type=\"button\" variant=\"outline\" className=\"w-full justify-between\">\n          <span className=\"truncate\">\n            {selectedLabels.length ? selectedLabels.join(', ') : placeholder}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[340px] p-2\">\n        <ScrollArea className=\"h-64\">\n          <div className=\"space-y-1\">\n            {options.map((option) => (\n              <TreeNode\n                key={option.id}\n                node={option}\n                depth={0}\n                expanded={expanded}\n                selected={selected}\n                toggleExpand={(id) => {\n                  setExpanded((prev) => {\n                    const next = new Set(prev)\n                    if (next.has(id)) next.delete(id)\n                    else next.add(id)\n                    return next\n                  })\n                }}\n                toggleSelect={toggleSelect}\n              />\n            ))}\n          </div>\n        </ScrollArea>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
-      "path": "ui/tree-select.tsx",
-      "target": "components/ui/tree-select.tsx"
-    }
-  ]
-}
\ No newline at end of file
diff --git a/public/sitemap-0.xml b/public/sitemap-0.xml
index fce2817..384d284 100644
--- a/public/sitemap-0.xml
+++ b/public/sitemap-0.xml
@@ -1,9 +1,25 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://www.shadcn-form.com/components</loc><lastmod>2026-02-18T18:44:53.989Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.shadcn-form.com/playground</loc><lastmod>2026-02-18T18:44:53.990Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.shadcn-form.com/readme</loc><lastmod>2026-02-18T18:44:53.990Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.shadcn-form.com/templates</loc><lastmod>2026-02-18T18:44:53.990Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.shadcn-form.com</loc><lastmod>2026-02-18T18:44:53.990Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
-<url><loc>https://www.shadcn-form.com/sponsors</loc><lastmod>2026-02-18T18:44:53.990Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/autocomplete</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/availability-picker</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/color-picker</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/credit-card</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/cron-expression-builder</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/emoji-picker</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/image-upload-dropzone</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/inline-editable-field</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/location-input</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/masked-input</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/signature-input</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/signature-pad</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/sortable-list-input</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/token-input</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/transfer-list</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/components/tree-select</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/playground</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/readme</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/sponsors</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
+<url><loc>https://www.shadcn-form.com/templates</loc><lastmod>2026-09-27T16:22:08.714Z</lastmod><changefreq>daily</changefreq><priority>0.7</priority></url>
 </urlset>
\ No newline at end of file
diff --git a/registry.json b/registry.json
new file mode 100644
index 0000000..39b84e7
--- /dev/null
+++ b/registry.json
@@ -0,0 +1,903 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry.json",
+  "name": "shadcn-form",
+  "homepage": "https://www.shadcn-form.com",
+  "items": [
+    {
+      "name": "autocomplete",
+      "type": "registry:ui",
+      "title": "Autocomplete",
+      "description": "Search input with debounced suggestions and keyboard navigation.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "use-debounce",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "input",
+        "button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/autocomplete.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "location-input",
+      "type": "registry:ui",
+      "title": "Location Input",
+      "description": "Country and state picker with search, backed by bundled countries and states data.",
+      "categories": [
+        "input",
+        "picker"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "popover",
+        "scroll-area",
+        "command"
+      ],
+      "files": [
+        {
+          "path": "components/ui/location-input.tsx",
+          "type": "registry:ui"
+        },
+        {
+          "path": "lib/location-data/countries.json",
+          "type": "registry:lib",
+          "target": "@lib/location-data/countries.json"
+        },
+        {
+          "path": "lib/location-data/states.json",
+          "type": "registry:lib",
+          "target": "@lib/location-data/states.json"
+        }
+      ]
+    },
+    {
+      "name": "signature-input",
+      "type": "registry:ui",
+      "title": "Signature Input",
+      "description": "Canvas-based signature input that returns a PNG data URL.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/signature-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "signature-pad",
+      "type": "registry:ui",
+      "title": "Signature Pad",
+      "description": "Dialog-based signature capture with hold-to-confirm interaction.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "dialog"
+      ],
+      "files": [
+        {
+          "path": "components/ui/signature-pad.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "credit-card",
+      "type": "registry:ui",
+      "title": "Credit Card",
+      "description": "Interactive credit-card form with visual card preview and validations.",
+      "categories": [
+        "input",
+        "payment"
+      ],
+      "dependencies": [
+        "framer-motion",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "card",
+        "input",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "components/ui/credit-card.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "masked-input",
+      "type": "registry:ui",
+      "title": "Masked Input",
+      "description": "Generic masked input for SSN, tax ID, IBAN, or custom patterns.",
+      "categories": [
+        "input"
+      ],
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/masked-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "color-picker",
+      "type": "registry:ui",
+      "title": "Color Picker",
+      "description": "Figma-like color picker with saturation/value canvas, hue + alpha sliders, format switching, eyedropper, and swatches.",
+      "categories": [
+        "input",
+        "picker"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "input",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "components/ui/color-picker.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "token-input",
+      "type": "registry:ui",
+      "title": "Tag / Token Input",
+      "description": "Input that turns text into removable tags/chips.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "badge",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/token-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "emoji-picker",
+      "type": "registry:ui",
+      "title": "Emoji Picker",
+      "description": "Categorized emoji selector input built with popover + scroll area.",
+      "categories": [
+        "input",
+        "picker"
+      ],
+      "registryDependencies": [
+        "button",
+        "input",
+        "popover",
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "components/ui/emoji-picker.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "transfer-list",
+      "type": "registry:ui",
+      "title": "Transfer List",
+      "description": "Dual-list picker to move items between available and selected panels.",
+      "categories": [
+        "input",
+        "picker"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/transfer-list.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tree-select",
+      "type": "registry:ui",
+      "title": "Tree Select",
+      "description": "Hierarchical dropdown with expandable nodes and checkbox selection.",
+      "categories": [
+        "input",
+        "picker"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "popover",
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "components/ui/tree-select.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "image-upload-dropzone",
+      "type": "registry:ui",
+      "title": "Image Upload / Dropzone",
+      "description": "Drag-and-drop image upload with preview, center crop, and progress feedback.",
+      "categories": [
+        "input",
+        "upload"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button"
+      ],
+      "files": [
+        {
+          "path": "components/ui/image-upload-dropzone.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "cron-expression-builder",
+      "type": "registry:ui",
+      "title": "Cron Expression Builder",
+      "description": "Visual cron schedule builder with human-readable summary.",
+      "categories": [
+        "input",
+        "date-time"
+      ],
+      "registryDependencies": [
+        "label",
+        "select"
+      ],
+      "files": [
+        {
+          "path": "components/ui/cron-expression-builder.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "inline-editable-field",
+      "type": "registry:ui",
+      "title": "Inline Editable Field",
+      "description": "Click-to-edit text that toggles between view and input modes.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/inline-editable-field.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "sortable-list-input",
+      "type": "registry:ui",
+      "title": "Sortable List Input",
+      "description": "Drag-and-drop reorderable list stored as a form value.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/sortable-list-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "availability-picker",
+      "type": "registry:ui",
+      "title": "Schedule / Availability Picker",
+      "description": "Weekly time-slot grid for selecting recurring availability.",
+      "categories": [
+        "input",
+        "date-time"
+      ],
+      "files": [
+        {
+          "path": "components/ui/availability-picker.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "phone-input",
+      "type": "registry:ui",
+      "title": "Phone Input",
+      "description": "International phone number input with a searchable country picker and flags.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "react-phone-number-input",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "command",
+        "input",
+        "popover",
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "components/ui/phone-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "datetime-picker",
+      "type": "registry:ui",
+      "title": "Datetime Picker",
+      "description": "Segmented date and time input with keyboard stepping, powered by timescape.",
+      "categories": [
+        "input",
+        "date-time"
+      ],
+      "dependencies": [
+        "timescape"
+      ],
+      "registryDependencies": [
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/datetime-picker.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "smart-datetime-input",
+      "type": "registry:ui",
+      "title": "Smart Datetime Input",
+      "description": "Natural-language date input (\"tomorrow at 3pm\") with a calendar and time list fallback.",
+      "categories": [
+        "input",
+        "date-time"
+      ],
+      "dependencies": [
+        "chrono-node",
+        "date-fns",
+        "lucide-react",
+        "react-day-picker"
+      ],
+      "registryDependencies": [
+        "button",
+        "calendar",
+        "input",
+        "popover",
+        "scroll-area"
+      ],
+      "files": [
+        {
+          "path": "components/ui/smart-datetime-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "file-upload",
+      "type": "registry:ui",
+      "title": "File Upload",
+      "description": "Composable dropzone with file list, keyboard support and size/count limits.",
+      "categories": [
+        "input",
+        "upload"
+      ],
+      "dependencies": [
+        "react-dropzone",
+        "sonner",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/file-upload.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "tags-input",
+      "type": "registry:ui",
+      "title": "Tags Input",
+      "description": "Keyboard-friendly input that collects values as removable tags.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "badge",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/tags-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "multi-select",
+      "type": "registry:ui",
+      "title": "Multi Select",
+      "description": "Searchable multi-value select with badges, built on cmdk.",
+      "categories": [
+        "input",
+        "picker"
+      ],
+      "dependencies": [
+        "cmdk",
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "badge",
+        "command"
+      ],
+      "files": [
+        {
+          "path": "components/ui/multi-select.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "password-input",
+      "type": "registry:ui",
+      "title": "Password Input",
+      "description": "Password field with a show/hide toggle.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "input"
+      ],
+      "files": [
+        {
+          "path": "components/ui/password-input.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "rating",
+      "type": "registry:ui",
+      "title": "Rating",
+      "description": "Star, heart or thumbs-up rating input in three sizes.",
+      "categories": [
+        "input"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "files": [
+        {
+          "path": "components/ui/rating.tsx",
+          "type": "registry:ui"
+        }
+      ]
+    },
+    {
+      "name": "validation-schemas",
+      "type": "registry:lib",
+      "title": "Validation Schemas",
+      "description": "Reusable zod schemas for email, password, name, phone and message fields.",
+      "categories": [
+        "lib"
+      ],
+      "dependencies": [
+        "zod"
+      ],
+      "files": [
+        {
+          "path": "lib/validation-schemas.ts",
+          "type": "registry:lib",
+          "target": "@lib/validation-schemas.ts"
+        }
+      ]
+    },
+    {
+      "name": "auth-shell",
+      "type": "registry:component",
+      "title": "Auth Shell",
+      "description": "Centered card layout shared by the authentication templates.",
+      "categories": [
+        "template"
+      ],
+      "dependencies": [
+        "lucide-react"
+      ],
+      "registryDependencies": [
+        "button",
+        "field"
+      ],
+      "files": [
+        {
+          "path": "components/templates/base-auth-shell.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/base-auth-shell.tsx"
+        }
+      ]
+    },
+    {
+      "name": "shadcn-auth",
+      "type": "registry:block",
+      "title": "Shadcn",
+      "description": "Authentication starter with login, signup, and recovery flows.",
+      "categories": [
+        "template",
+        "authentication"
+      ],
+      "dependencies": [
+        "react-hook-form",
+        "@hookform/resolvers",
+        "zod",
+        "sonner",
+        "lucide-react",
+        "next"
+      ],
+      "registryDependencies": [
+        "button",
+        "field",
+        "input",
+        "https://www.shadcn-form.com/r/password-input.json",
+        "https://www.shadcn-form.com/r/auth-shell.json",
+        "https://www.shadcn-form.com/r/validation-schemas.json"
+      ],
+      "docs": "Render each flow on its own route: /sign-in, /sign-up, /forgot-password and /reset-password. The flows link to each other through those paths.",
+      "meta": {
+        "features": [
+          "Authentication starter for shadcn/ui only.",
+          "Includes sign in, sign up, forgot password, and reset password flows.",
+          "No third-party auth provider dependencies."
+        ]
+      },
+      "files": [
+        {
+          "path": "components/templates/sign-in.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/sign-in.tsx"
+        },
+        {
+          "path": "components/templates/sign-up.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/sign-up.tsx"
+        },
+        {
+          "path": "components/templates/forgot-password.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/forgot-password.tsx"
+        },
+        {
+          "path": "components/templates/reset-password.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/reset-password.tsx"
+        }
+      ]
+    },
+    {
+      "name": "clerk-auth",
+      "type": "registry:block",
+      "title": "Clerk Elements Auth",
+      "description": "Clerk-style auth starter with sign-in, sign-up, and reset flows.",
+      "categories": [
+        "template",
+        "authentication"
+      ],
+      "dependencies": [
+        "react-hook-form",
+        "@hookform/resolvers",
+        "zod",
+        "sonner",
+        "lucide-react",
+        "next"
+      ],
+      "registryDependencies": [
+        "button",
+        "field",
+        "input",
+        "https://www.shadcn-form.com/r/password-input.json",
+        "https://www.shadcn-form.com/r/auth-shell.json",
+        "https://www.shadcn-form.com/r/validation-schemas.json"
+      ],
+      "docs": "Render each flow on its own route: /sign-in, /sign-up, /forgot-password and /reset-password. The flows link to each other through those paths. Install Clerk (pnpm add @clerk/nextjs @clerk/elements) and wrap your app in <ClerkProvider> before wiring the submit handlers.",
+      "meta": {
+        "features": [
+          "Clerk-themed auth flows using shadcn/ui patterns.",
+          "Includes sign in, sign up, forgot password, and reset password flows.",
+          "Wire the handlers to Clerk once @clerk/nextjs is installed."
+        ]
+      },
+      "files": [
+        {
+          "path": "components/templates/clerk-sign-in.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/clerk-sign-in.tsx"
+        },
+        {
+          "path": "components/templates/clerk-sign-up.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/clerk-sign-up.tsx"
+        },
+        {
+          "path": "components/templates/clerk-forgot-password.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/clerk-forgot-password.tsx"
+        },
+        {
+          "path": "components/templates/clerk-reset-password.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/clerk-reset-password.tsx"
+        },
+        {
+          "path": "components/templates/clerk-install-hint.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/clerk-install-hint.tsx"
+        },
+        {
+          "path": "components/templates/oauth-icons.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/oauth-icons.tsx"
+        }
+      ]
+    },
+    {
+      "name": "supabase-auth",
+      "type": "registry:block",
+      "title": "Supabase Ready Auth",
+      "description": "Email/password auth UI prepared for Supabase actions.",
+      "categories": [
+        "template"
+      ],
+      "dependencies": [
+        "react-hook-form",
+        "@hookform/resolvers",
+        "zod",
+        "sonner",
+        "next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "field",
+        "input",
+        "https://www.shadcn-form.com/r/password-input.json",
+        "https://www.shadcn-form.com/r/validation-schemas.json"
+      ],
+      "meta": {
+        "features": [
+          "Supabase-ready auth provider template.",
+          "Includes all core auth flows in one page.",
+          "Ready for Supabase auth action wiring."
+        ]
+      },
+      "files": [
+        {
+          "path": "components/templates/supabase-auth.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/supabase-auth.tsx"
+        }
+      ]
+    },
+    {
+      "name": "firebase-auth",
+      "type": "registry:block",
+      "title": "Firebase Ready Auth",
+      "description": "Firebase-focused sign-in design with provider actions.",
+      "categories": [
+        "template"
+      ],
+      "dependencies": [
+        "react-hook-form",
+        "@hookform/resolvers",
+        "zod",
+        "sonner",
+        "next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "field",
+        "input",
+        "https://www.shadcn-form.com/r/password-input.json",
+        "https://www.shadcn-form.com/r/validation-schemas.json"
+      ],
+      "meta": {
+        "features": [
+          "Firebase auth provider template.",
+          "Includes all core auth flows in one page.",
+          "Clear primary and secondary auth actions."
+        ]
+      },
+      "files": [
+        {
+          "path": "components/templates/firebase-auth.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/firebase-auth.tsx"
+        }
+      ]
+    },
+    {
+      "name": "better-auth",
+      "type": "registry:block",
+      "title": "Better Auth Ready",
+      "description": "Composable auth screen structure for Better Auth stacks.",
+      "categories": [
+        "template"
+      ],
+      "dependencies": [
+        "react-hook-form",
+        "@hookform/resolvers",
+        "zod",
+        "sonner",
+        "next"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "field",
+        "input",
+        "https://www.shadcn-form.com/r/password-input.json",
+        "https://www.shadcn-form.com/r/validation-schemas.json"
+      ],
+      "meta": {
+        "features": [
+          "Composable Better Auth provider template.",
+          "Includes all core auth flows in one page.",
+          "Prepared for server-action based auth."
+        ]
+      },
+      "files": [
+        {
+          "path": "components/templates/better-auth.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/better-auth.tsx"
+        }
+      ]
+    },
+    {
+      "name": "contact",
+      "type": "registry:block",
+      "title": "Contact Form",
+      "description": "General inquiry form for support and sales conversations.",
+      "categories": [
+        "template"
+      ],
+      "dependencies": [
+        "react-hook-form",
+        "@hookform/resolvers",
+        "zod",
+        "sonner"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "field",
+        "input",
+        "textarea",
+        "https://www.shadcn-form.com/r/validation-schemas.json"
+      ],
+      "meta": {
+        "features": [
+          "Contact flow with name, email, and message.",
+          "Validation-ready for support or sales inboxes.",
+          "Accessible labels and feedback states."
+        ]
+      },
+      "files": [
+        {
+          "path": "components/templates/contact.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/contact.tsx"
+        }
+      ]
+    },
+    {
+      "name": "newsletter",
+      "type": "registry:block",
+      "title": "Newsletter Form",
+      "description": "Minimal email capture form for product updates.",
+      "categories": [
+        "template"
+      ],
+      "dependencies": [
+        "react-hook-form",
+        "@hookform/resolvers",
+        "zod",
+        "sonner"
+      ],
+      "registryDependencies": [
+        "button",
+        "card",
+        "field",
+        "input",
+        "https://www.shadcn-form.com/r/validation-schemas.json"
+      ],
+      "meta": {
+        "features": [
+          "Single-field email capture experience.",
+          "High-conversion compact layout.",
+          "Ready for newsletter provider integration."
+        ]
+      },
+      "files": [
+        {
+          "path": "components/templates/newsletter.tsx",
+          "type": "registry:component",
+          "target": "@components/templates/newsletter.tsx"
+        }
+      ]
+    }
+  ]
+}
diff --git a/registry/index.ts b/registry/index.ts
deleted file mode 100644
index 14f1792..0000000
--- a/registry/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ui } from './registry-components'
-
-export const registryComponents = [...ui]
diff --git a/registry/registry-components.ts b/registry/registry-components.ts
deleted file mode 100644
index 8f95d92..0000000
--- a/registry/registry-components.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Registry } from './schema'
-
-export const ui: Registry = [
-  {
-    name: 'autocomplete',
-    type: 'registry:ui',
-    dependencies: ['use-debounce'],
-    registryDependencies: ['input', 'button'],
-    files: ['ui/autocomplete.tsx'],
-  },
-  {
-    name: 'location-input',
-    type: 'registry:ui',
-    registryDependencies: ['button', 'popover', 'scroll-area', 'command'],
-    files: ['ui/location-input.tsx'],
-  },
-  {
-    name: 'signature-input',
-    type: 'registry:ui',
-    registryDependencies: ['button'],
-    files: ['ui/signature-input.tsx'],
-  },
-  {
-    name: 'signature-pad',
-    type: 'registry:ui',
-    registryDependencies: ['button', 'dialog', 'progress'],
-    files: ['ui/signature-pad.tsx'],
-  },
-  {
-    name: 'credit-card',
-    type: 'registry:ui',
-    dependencies: ['framer-motion'],
-    registryDependencies: ['card', 'input', 'select'],
-    files: ['ui/credit-card.tsx'],
-  },
-  {
-    name: 'masked-input',
-    type: 'registry:ui',
-    registryDependencies: ['input'],
-    files: ['ui/masked-input.tsx'],
-  },
-  {
-    name: 'color-picker',
-    type: 'registry:ui',
-    registryDependencies: ['button', 'input', 'select'],
-    files: ['ui/color-picker.tsx'],
-  },
-  {
-    name: 'token-input',
-    type: 'registry:ui',
-    registryDependencies: ['badge', 'input'],
-    files: ['ui/token-input.tsx'],
-  },
-  {
-    name: 'emoji-picker',
-    type: 'registry:ui',
-    registryDependencies: ['button', 'input', 'popover', 'scroll-area'],
-    files: ['ui/emoji-picker.tsx'],
-  },
-  {
-    name: 'transfer-list',
-    type: 'registry:ui',
-    registryDependencies: ['button'],
-    files: ['ui/transfer-list.tsx'],
-  },
-  {
-    name: 'tree-select',
-    type: 'registry:ui',
-    registryDependencies: ['button', 'popover', 'scroll-area'],
-    files: ['ui/tree-select.tsx'],
-  },
-  {
-    name: 'image-upload-dropzone',
-    type: 'registry:ui',
-    registryDependencies: ['button'],
-    files: ['ui/image-upload-dropzone.tsx'],
-  },
-  {
-    name: 'cron-expression-builder',
-    type: 'registry:ui',
-    registryDependencies: ['label', 'select'],
-    files: ['ui/cron-expression-builder.tsx'],
-  },
-  {
-    name: 'inline-editable-field',
-    type: 'registry:ui',
-    registryDependencies: ['button', 'input'],
-    files: ['ui/inline-editable-field.tsx'],
-  },
-  {
-    name: 'sortable-list-input',
-    type: 'registry:ui',
-    registryDependencies: ['button', 'input'],
-    files: ['ui/sortable-list-input.tsx'],
-  },
-  {
-    name: 'availability-picker',
-    type: 'registry:ui',
-    files: ['ui/availability-picker.tsx'],
-  },
-]
diff --git a/registry/schema.ts b/registry/schema.ts
deleted file mode 100644
index 6d9c6c2..0000000
--- a/registry/schema.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-import { z } from 'zod'
-
-export const blockChunkSchema = z.object({
-  name: z.string(),
-  description: z.string(),
-  component: z.any(),
-  file: z.string(),
-  code: z.string().optional(),
-  container: z
-    .object({
-      className: z.string().nullish(),
-    })
-    .optional(),
-})
-
-export const registryItemTypeSchema = z.enum([
-  'registry:style',
-  'registry:lib',
-  'registry:example',
-  'registry:block',
-  'registry:component',
-  'registry:ui',
-  'registry:hook',
-  'registry:theme',
-  'registry:page',
-])
-
-export const registryItemFileSchema = z.union([
-  z.string(),
-  z.object({
-    path: z.string(),
-    content: z.string().optional(),
-    type: registryItemTypeSchema,
-    target: z.string().optional(),
-  }),
-])
-
-export const registryItemTailwindSchema = z.object({
-  config: z.object({
-    content: z.array(z.string()).optional(),
-    theme: z.record(z.string(), z.any()).optional(),
-    plugins: z.array(z.string()).optional(),
-  }),
-})
-
-export const registryItemCssVarsSchema = z.object({
-  light: z.record(z.string(), z.string()).optional(),
-  dark: z.record(z.string(), z.string()).optional(),
-})
-
-export const registryEntrySchema = z.object({
-  name: z.string(),
-  type: registryItemTypeSchema,
-  description: z.string().optional(),
-  dependencies: z.array(z.string()).optional(),
-  devDependencies: z.array(z.string()).optional(),
-  registryDependencies: z.array(z.string()).optional(),
-  files: z.array(registryItemFileSchema).optional(),
-  tailwind: registryItemTailwindSchema.optional(),
-  cssVars: registryItemCssVarsSchema.optional(),
-  source: z.string().optional(),
-  category: z.string().optional(),
-  subcategory: z.string().optional(),
-  chunks: z.array(blockChunkSchema).optional(),
-  docs: z.string().optional(),
-})
-
-export const registrySchema = z.array(registryEntrySchema)
-
-export type RegistryEntry = z.infer<typeof registryEntrySchema>
-
-export type Registry = z.infer<typeof registrySchema>
-
-export const blockSchema = registryEntrySchema.extend({
-  type: z.literal('registry:block'),
-  style: z.enum(['default', 'new-york']),
-  component: z.any(),
-  container: z
-    .object({
-      height: z.string().nullish(),
-      className: z.string().nullish(),
-    })
-    .optional(),
-  code: z.string(),
-  highlightedCode: z.string(),
-})
-
-export type Block = z.infer<typeof blockSchema>
-
-export type BlockChunk = z.infer<typeof blockChunkSchema>
diff --git a/registry/ui/autocomplete.tsx b/registry/ui/autocomplete.tsx
deleted file mode 100644
index b320966..0000000
--- a/registry/ui/autocomplete.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-'use client'
-
-import { useState, useCallback, useEffect } from 'react'
-import { useDebounce } from 'use-debounce'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { Search } from 'lucide-react'
-
-// Simulated API call
-const fetchSuggestions = async (query: string): Promise<string[]> => {
-  await new Promise((resolve) => setTimeout(resolve, 300)) // Simulate network delay
-  const allSuggestions = [
-    'React',
-    'Redux',
-    'Next.js',
-    'TypeScript',
-    'JavaScript',
-    'Node.js',
-    'Express',
-    'MongoDB',
-    'PostgreSQL',
-    'GraphQL',
-    'Vue.js',
-    'Angular',
-    'Svelte',
-    'Tailwind CSS',
-    'Sass',
-    'Webpack',
-    'Babel',
-    'ESLint',
-    'Jest',
-    'Cypress',
-  ]
-  return allSuggestions.filter((suggestion) =>
-    suggestion.toLowerCase().includes(query.toLowerCase()),
-  )
-}
-
-interface AutoCompleteProps {
-  value?: string
-  onChange?: (value: string) => void
-}
-
-export default function Autocomplete({ value = '', onChange }: AutoCompleteProps) {
-  const [query, setQuery] = useState(value)
-  const [debouncedQuery] = useDebounce(query, 300)
-  const [suggestions, setSuggestions] = useState<string[]>([])
-  const [selectedIndex, setSelectedIndex] = useState(-1)
-  const [isLoading, setIsLoading] = useState(false)
-  const [isFocused, setIsFocused] = useState(false)
-
-  const fetchSuggestionsCallback = useCallback(async (q: string) => {
-    if (q.trim() === '') {
-      setSuggestions([])
-      return
-    }
-    setIsLoading(true)
-    const results = await fetchSuggestions(q)
-    setSuggestions(results)
-    setIsLoading(false)
-  }, [])
-
-  useEffect(() => {
-    if (debouncedQuery && isFocused) {
-      fetchSuggestionsCallback(debouncedQuery)
-    } else {
-      setSuggestions([])
-    }
-  }, [debouncedQuery, fetchSuggestionsCallback, isFocused])
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value
-    setQuery(newValue)
-    onChange?.(newValue)
-    setSelectedIndex(-1)
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setSelectedIndex((prev) =>
-        prev < suggestions.length - 1 ? prev + 1 : prev,
-      )
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1))
-    } else if (e.key === 'Enter' && selectedIndex >= 0) {
-      setQuery(suggestions[selectedIndex])
-      setSuggestions([])
-      setSelectedIndex(-1)
-    } else if (e.key === 'Escape') {
-      setSuggestions([])
-      setSelectedIndex(-1)
-    }
-  }
-
-  const handleSuggestionClick = (suggestion: string) => {
-    setQuery(suggestion)
-    onChange?.(suggestion)
-    setSuggestions([])
-    setSelectedIndex(-1)
-  }
-
-  const handleFocus = () => {
-    setIsFocused(true)
-  }
-
-  const handleBlur = () => {
-    // Delay hiding suggestions to allow for click events on suggestions
-    setTimeout(() => {
-      setIsFocused(false)
-      setSuggestions([])
-      setSelectedIndex(-1)
-    }, 200)
-  }
-
-  return (
-    <div className="w-full max-w-xs mx-auto">
-      <div className="relative">
-        <Input
-          type="text"
-          placeholder="Search..."
-          value={query}
-          onChange={handleInputChange}
-          onKeyDown={handleKeyDown}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          className="pr-10"
-          aria-label="Search input"
-          aria-autocomplete="list"
-          aria-controls="suggestions-list"
-          aria-expanded={suggestions.length > 0}
-        />
-        <Button
-          size="icon"
-          variant="ghost"
-          className="absolute right-0 top-0 h-full"
-          aria-label="Search"
-        >
-          <Search className="h-4 w-4" />
-        </Button>
-      </div>
-      {isLoading && isFocused && (
-        <div
-          className="mt-2 p-2 bg-background border rounded-md shadow-sm absolute z-10"
-          aria-live="polite"
-        >
-          Loading...
-        </div>
-      )}
-      {suggestions.length > 0 && !isLoading && isFocused && (
-        <ul
-          id="suggestions-list"
-          className="mt-2 bg-background border rounded-md shadow-sm absolute z-10"
-          role="listbox"
-        >
-          {suggestions.map((suggestion, index) => (
-            <li
-              key={suggestion}
-              className={`px-4 py-2 cursor-pointer hover:bg-muted ${
-                index === selectedIndex ? 'bg-muted' : ''
-              }`}
-              onClick={() => handleSuggestionClick(suggestion)}
-              role="option"
-              aria-selected={index === selectedIndex}
-            >
-              {suggestion}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  )
-}
diff --git a/registry/ui/availability-picker.tsx b/registry/ui/availability-picker.tsx
deleted file mode 100644
index 5ced485..0000000
--- a/registry/ui/availability-picker.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-const HOURS = Array.from({ length: 12 }, (_, i) => i + 8)
-
-type Slot = {
-  day: number
-  hour: number
-}
-
-type AvailabilityPickerProps = {
-  value: Slot[]
-  onChange: (slots: Slot[]) => void
-}
-
-function slotKey(slot: Slot) {
-  return `${slot.day}-${slot.hour}`
-}
-
-export function AvailabilityPicker({ value, onChange }: AvailabilityPickerProps) {
-  const active = new Set(value.map(slotKey))
-
-  const toggle = (slot: Slot) => {
-    const key = slotKey(slot)
-    if (active.has(key)) {
-      onChange(value.filter((entry) => slotKey(entry) !== key))
-      return
-    }
-
-    onChange([...value, slot])
-  }
-
-  return (
-    <div className="space-y-3">
-      <div className="overflow-x-auto">
-        <table className="w-full min-w-[760px] border-collapse text-xs">
-          <thead>
-            <tr>
-              <th className="w-16 border p-2 text-left">Time</th>
-              {DAYS.map((day) => (
-                <th key={day} className="border p-2 text-center">
-                  {day}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {HOURS.map((hour) => (
-              <tr key={hour}>
-                <td className="border p-2 font-medium">{`${hour}:00`}</td>
-                {DAYS.map((_, dayIndex) => {
-                  const slot = { day: dayIndex, hour }
-                  const selected = active.has(slotKey(slot))
-
-                  return (
-                    <td key={`${dayIndex}-${hour}`} className="border p-1">
-                      <button
-                        type="button"
-                        className={`h-7 w-full rounded ${selected ? 'bg-primary text-primary-foreground' : 'bg-muted'}`}
-                        onClick={() => toggle(slot)}
-                      />
-                    </td>
-                  )
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-      <div className="text-sm text-muted-foreground">
-        Selected slots: {value.length}
-      </div>
-    </div>
-  )
-}
diff --git a/registry/ui/color-picker.tsx b/registry/ui/color-picker.tsx
deleted file mode 100644
index a3bd4bb..0000000
--- a/registry/ui/color-picker.tsx
+++ /dev/null
@@ -1,487 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Pipette } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-
-type PickerFormat = 'hex' | 'rgb' | 'hsl'
-
-type Rgb = { r: number; g: number; b: number }
-type Hsv = { h: number; s: number; v: number }
-
-type ColorPickerProps = {
-  value?: string
-  onChange?: (value: string) => void
-  swatches?: string[]
-}
-
-type EyeDropperAPI = {
-  open: () => Promise<{ sRGBHex: string }>
-}
-
-declare global {
-  interface Window {
-    EyeDropper?: new () => EyeDropperAPI
-  }
-}
-
-const DEFAULT_SWATCHES = [
-  '#000000',
-  '#6b7280',
-  '#d1d5db',
-  '#93c5fd',
-  '#818cf8',
-  '#ec4899',
-]
-
-const clamp = (value: number, min: number, max: number) =>
-  Math.min(max, Math.max(min, value))
-
-const round = (value: number, digits = 0) => {
-  const factor = 10 ** digits
-  return Math.round(value * factor) / factor
-}
-
-function parseHex(hex: string): { rgb: Rgb; a: number } | null {
-  const raw = hex.trim().replace('#', '')
-
-  if (!/^[0-9A-Fa-f]{3,4}$|^[0-9A-Fa-f]{6}$|^[0-9A-Fa-f]{8}$/.test(raw)) {
-    return null
-  }
-
-  const normalized =
-    raw.length <= 4
-      ? raw
-          .split('')
-          .map((char) => `${char}${char}`)
-          .join('')
-      : raw
-
-  const hasAlpha = normalized.length === 8
-  const r = Number.parseInt(normalized.slice(0, 2), 16)
-  const g = Number.parseInt(normalized.slice(2, 4), 16)
-  const b = Number.parseInt(normalized.slice(4, 6), 16)
-  const a = hasAlpha ? Number.parseInt(normalized.slice(6, 8), 16) / 255 : 1
-
-  return { rgb: { r, g, b }, a }
-}
-
-function rgbToHex(rgb: Rgb, alpha = 1) {
-  const base = [rgb.r, rgb.g, rgb.b]
-    .map((value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0'))
-    .join('')
-
-  if (alpha >= 1) return `#${base}`
-
-  const a = clamp(Math.round(alpha * 255), 0, 255)
-    .toString(16)
-    .padStart(2, '0')
-
-  return `#${base}${a}`
-}
-
-function rgbToHsv({ r, g, b }: Rgb): Hsv {
-  const rn = r / 255
-  const gn = g / 255
-  const bn = b / 255
-  const max = Math.max(rn, gn, bn)
-  const min = Math.min(rn, gn, bn)
-  const diff = max - min
-
-  let h = 0
-  if (diff !== 0) {
-    if (max === rn) h = ((gn - bn) / diff) % 6
-    else if (max === gn) h = (bn - rn) / diff + 2
-    else h = (rn - gn) / diff + 4
-  }
-
-  h = Math.round(h * 60)
-  if (h < 0) h += 360
-
-  const s = max === 0 ? 0 : diff / max
-  const v = max
-
-  return { h, s: round(s * 100, 1), v: round(v * 100, 1) }
-}
-
-function hsvToRgb({ h, s, v }: Hsv): Rgb {
-  const hue = ((h % 360) + 360) % 360
-  const sat = clamp(s, 0, 100) / 100
-  const val = clamp(v, 0, 100) / 100
-
-  const c = val * sat
-  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1))
-  const m = val - c
-
-  let r = 0
-  let g = 0
-  let b = 0
-
-  if (hue < 60) {
-    r = c
-    g = x
-  } else if (hue < 120) {
-    r = x
-    g = c
-  } else if (hue < 180) {
-    g = c
-    b = x
-  } else if (hue < 240) {
-    g = x
-    b = c
-  } else if (hue < 300) {
-    r = x
-    b = c
-  } else {
-    r = c
-    b = x
-  }
-
-  return {
-    r: Math.round((r + m) * 255),
-    g: Math.round((g + m) * 255),
-    b: Math.round((b + m) * 255),
-  }
-}
-
-function rgbToHsl({ r, g, b }: Rgb) {
-  const rn = r / 255
-  const gn = g / 255
-  const bn = b / 255
-  const max = Math.max(rn, gn, bn)
-  const min = Math.min(rn, gn, bn)
-  const l = (max + min) / 2
-  const d = max - min
-
-  let h = 0
-  let s = 0
-
-  if (d !== 0) {
-    s = d / (1 - Math.abs(2 * l - 1))
-
-    switch (max) {
-      case rn:
-        h = ((gn - bn) / d) % 6
-        break
-      case gn:
-        h = (bn - rn) / d + 2
-        break
-      default:
-        h = (rn - gn) / d + 4
-        break
-    }
-
-    h *= 60
-    if (h < 0) h += 360
-  }
-
-  return {
-    h: Math.round(h),
-    s: Math.round(s * 100),
-    l: Math.round(l * 100),
-  }
-}
-
-function hueToRgb(p: number, q: number, t: number) {
-  let tt = t
-  if (tt < 0) tt += 1
-  if (tt > 1) tt -= 1
-  if (tt < 1 / 6) return p + (q - p) * 6 * tt
-  if (tt < 1 / 2) return q
-  if (tt < 2 / 3) return p + (q - p) * (2 / 3 - tt) * 6
-  return p
-}
-
-function hslToRgb(h: number, s: number, l: number): Rgb {
-  const hn = (((h % 360) + 360) % 360) / 360
-  const sn = clamp(s, 0, 100) / 100
-  const ln = clamp(l, 0, 100) / 100
-
-  if (sn === 0) {
-    const value = Math.round(ln * 255)
-    return { r: value, g: value, b: value }
-  }
-
-  const q = ln < 0.5 ? ln * (1 + sn) : ln + sn - ln * sn
-  const p = 2 * ln - q
-
-  return {
-    r: Math.round(hueToRgb(p, q, hn + 1 / 3) * 255),
-    g: Math.round(hueToRgb(p, q, hn) * 255),
-    b: Math.round(hueToRgb(p, q, hn - 1 / 3) * 255),
-  }
-}
-
-function toRgbaString(rgb: Rgb, alpha: number) {
-  return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${round(alpha, 2)})`
-}
-
-export function ColorPicker({
-  value = '#7c3aed',
-  onChange,
-  swatches = DEFAULT_SWATCHES,
-}: ColorPickerProps) {
-  const parsed = parseHex(value) ?? { rgb: { r: 124, g: 58, b: 237 }, a: 1 }
-  const [hsv, setHsv] = React.useState<Hsv>(() => rgbToHsv(parsed.rgb))
-  const [alpha, setAlpha] = React.useState(parsed.a)
-  const [format, setFormat] = React.useState<PickerFormat>('hex')
-
-  React.useEffect(() => {
-    const next = parseHex(value)
-    if (!next) return
-
-    setHsv(rgbToHsv(next.rgb))
-    setAlpha(next.a)
-  }, [value])
-
-  const rgb = hsvToRgb(hsv)
-  const hsl = rgbToHsl(rgb)
-  const hex = rgbToHex(rgb, alpha)
-
-  const emit = React.useCallback(
-    (nextHsv: Hsv, nextAlpha: number) => {
-      const nextRgb = hsvToRgb(nextHsv)
-      onChange?.(rgbToHex(nextRgb, nextAlpha))
-    },
-    [onChange],
-  )
-
-  const updatePlane = (clientX: number, clientY: number, el: HTMLElement) => {
-    const rect = el.getBoundingClientRect()
-    const s = clamp(((clientX - rect.left) / rect.width) * 100, 0, 100)
-    const v = clamp(100 - ((clientY - rect.top) / rect.height) * 100, 0, 100)
-
-    const next = { ...hsv, s: round(s, 1), v: round(v, 1) }
-    setHsv(next)
-    emit(next, alpha)
-  }
-
-  const handlePlanePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
-    const target = event.currentTarget
-    target.setPointerCapture(event.pointerId)
-    updatePlane(event.clientX, event.clientY, target)
-  }
-
-  const handlePlanePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
-    if ((event.buttons & 1) !== 1) return
-    updatePlane(event.clientX, event.clientY, event.currentTarget)
-  }
-
-  const pickFromScreen = async () => {
-    if (typeof window === 'undefined' || !window.EyeDropper) return
-
-    const eyeDropper = new window.EyeDropper()
-    try {
-      const result = await eyeDropper.open()
-      const parsedColor = parseHex(result.sRGBHex)
-      if (!parsedColor) return
-
-      const nextHsv = rgbToHsv(parsedColor.rgb)
-      setHsv(nextHsv)
-      setAlpha(1)
-      emit(nextHsv, 1)
-    } catch {
-      // User cancelled eyedropper.
-    }
-  }
-
-  const checkerboard = {
-    backgroundImage:
-      'linear-gradient(45deg, #d4d4d8 25%, transparent 25%), linear-gradient(-45deg, #d4d4d8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #d4d4d8 75%), linear-gradient(-45deg, transparent 75%, #d4d4d8 75%)',
-    backgroundSize: '10px 10px',
-    backgroundPosition: '0 0, 0 5px, 5px -5px, -5px 0px',
-  } as const
-
-  return (
-    <div className="w-full max-w-[320px] space-y-3 rounded-xl border bg-background p-3 shadow-sm">
-      <div className="relative h-56 w-full overflow-hidden rounded-lg border" style={checkerboard}>
-        <div
-          className="absolute inset-0"
-          style={{ backgroundColor: `hsl(${hsv.h} 100% 50%)` }}
-        />
-        <div className="absolute inset-0 bg-gradient-to-r from-white to-transparent" />
-        <div className="absolute inset-0 bg-gradient-to-t from-black to-transparent" />
-
-        <div
-          className="absolute inset-0 cursor-crosshair touch-none"
-          onPointerDown={handlePlanePointerDown}
-          onPointerMove={handlePlanePointerMove}
-        >
-          <div
-            className="absolute h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow"
-            style={{
-              left: `${hsv.s}%`,
-              top: `${100 - hsv.v}%`,
-              backgroundColor: toRgbaString(rgb, alpha),
-            }}
-          />
-        </div>
-      </div>
-
-      <div className="space-y-2">
-        <div className="relative h-4 overflow-hidden rounded-full border" style={checkerboard}>
-          <input
-            type="range"
-            min={0}
-            max={360}
-            value={hsv.h}
-            onChange={(event) => {
-              const h = Number(event.target.value)
-              const next = { ...hsv, h }
-              setHsv(next)
-              emit(next, alpha)
-            }}
-            className="figma-range absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none rounded-full p-0"
-            style={{
-              background:
-                'linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%)',
-            }}
-          />
-        </div>
-
-        <div className="relative h-4 overflow-hidden rounded-full border" style={checkerboard}>
-          <input
-            type="range"
-            min={0}
-            max={100}
-            value={Math.round(alpha * 100)}
-            onChange={(event) => {
-              const nextAlpha = Number(event.target.value) / 100
-              setAlpha(nextAlpha)
-              emit(hsv, nextAlpha)
-            }}
-            className="figma-range absolute inset-0 m-0 h-full w-full cursor-pointer appearance-none rounded-full p-0"
-            style={{
-              background: `linear-gradient(to right, rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0), rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 1))`,
-            }}
-          />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-[auto_1fr_auto] items-center gap-2">
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          onClick={pickFromScreen}
-          disabled={typeof window === 'undefined' || !window.EyeDropper}
-          title="Eyedropper"
-        >
-          <Pipette className="h-4 w-4" />
-        </Button>
-
-        <Input
-          value={format === 'hex' ? hex.toUpperCase() : format === 'rgb' ? `${rgb.r}, ${rgb.g}, ${rgb.b}` : `${hsl.h}, ${hsl.s}%, ${hsl.l}%`}
-          onChange={(event) => {
-            const raw = event.target.value.trim()
-
-            if (format === 'hex') {
-              const parsedHex = parseHex(raw)
-              if (!parsedHex) return
-              const next = rgbToHsv(parsedHex.rgb)
-              setHsv(next)
-              setAlpha(parsedHex.a)
-              emit(next, parsedHex.a)
-              return
-            }
-
-            if (format === 'rgb') {
-              const parts = raw.split(',').map((part) => Number(part.trim()))
-              if (parts.length !== 3 || parts.some((value) => Number.isNaN(value))) return
-              const nextRgb = {
-                r: clamp(parts[0], 0, 255),
-                g: clamp(parts[1], 0, 255),
-                b: clamp(parts[2], 0, 255),
-              }
-              const next = rgbToHsv(nextRgb)
-              setHsv(next)
-              emit(next, alpha)
-              return
-            }
-
-            const parts = raw
-              .replaceAll('%', '')
-              .split(',')
-              .map((part) => Number(part.trim()))
-            if (parts.length !== 3 || parts.some((value) => Number.isNaN(value))) return
-
-            const nextRgb = hslToRgb(parts[0], parts[1], parts[2])
-            const next = rgbToHsv(nextRgb)
-            setHsv(next)
-            emit(next, alpha)
-          }}
-        />
-
-        <Select value={format} onValueChange={(value) => setFormat(value as PickerFormat)}>
-          <SelectTrigger className="w-[78px]">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="hex">Hex</SelectItem>
-            <SelectItem value="rgb">RGB</SelectItem>
-            <SelectItem value="hsl">HSL</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <div className="flex flex-wrap gap-2">
-        {swatches.map((swatch) => (
-          <button
-            key={swatch}
-            type="button"
-            className="h-6 w-6 rounded-md border"
-            style={{ backgroundColor: swatch }}
-            onClick={() => {
-              const parsedSwatch = parseHex(swatch)
-              if (!parsedSwatch) return
-              const next = rgbToHsv(parsedSwatch.rgb)
-              setHsv(next)
-              setAlpha(parsedSwatch.a)
-              emit(next, parsedSwatch.a)
-            }}
-            aria-label={`Select ${swatch}`}
-          />
-        ))}
-      </div>
-
-      <style jsx global>{`
-        .figma-range::-webkit-slider-thumb {
-          -webkit-appearance: none;
-          appearance: none;
-          width: 16px;
-          height: 16px;
-          border-radius: 9999px;
-          border: 2px solid #ffffff;
-          background: #2563eb;
-          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
-          margin-top: -2px;
-        }
-        .figma-range::-webkit-slider-runnable-track {
-          height: 100%;
-          border-radius: 9999px;
-        }
-        .figma-range::-moz-range-thumb {
-          width: 16px;
-          height: 16px;
-          border-radius: 9999px;
-          border: 2px solid #ffffff;
-          background: #2563eb;
-          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
-        }
-        .figma-range::-moz-range-track {
-          height: 100%;
-          border-radius: 9999px;
-        }
-      `}</style>
-    </div>
-  )
-}
diff --git a/registry/ui/credit-card.tsx b/registry/ui/credit-card.tsx
deleted file mode 100644
index c63c0fa..0000000
--- a/registry/ui/credit-card.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useState, useRef } from 'react'
-import { motion } from 'framer-motion'
-import { cn } from '@/lib/utils'
-import { Input } from '@/components/ui/input'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import { Card } from '@/components/ui/card'
-import { CreditCard as CreditCardIcon, Lock } from 'lucide-react'
-
-export interface CreditCardValue {
-  cardholderName: string
-  cardNumber: string
-  expiryMonth: string
-  expiryYear: string
-  cvv: string
-  cvvLabel: 'CCV' | 'CVC'
-}
-
-export interface CreditCardProps {
-  value?: CreditCardValue
-  onChange?: (value: CreditCardValue) => void
-  className?: string
-}
-
-const formatCardNumber = (value: string) => {
-  const v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
-  const matches = v.match(/\d{4,16}/g)
-  const match = matches && matches[0] || ''
-  const parts: string[] = []
-
-  for (let i = 0, len = match.length; i < len; i += 4) {
-    parts.push(match.substring(i, i + 4))
-  }
-
-  if (parts.length) {
-    return parts.join(' ')
-  } else {
-    return v
-  }
-}
-
-const getCardType = (number: string) => {
-  const cleanNumber = number.replace(/\s/g, '')
-  if (cleanNumber.startsWith('4')) return 'visa'
-  if (cleanNumber.startsWith('5') || cleanNumber.startsWith('2')) return 'mastercard'
-  if (cleanNumber.startsWith('3')) return 'amex'
-  return 'generic'
-}
-
-const CreditCard = React.forwardRef<HTMLDivElement, CreditCardProps>(
-  ({ value, onChange, className }, ref) => {
-    const [isFlipped, setIsFlipped] = useState(false)
-    const [focusedField, setFocusedField] = useState<string | null>(null)
-    const cvvInputRef = useRef<HTMLInputElement>(null)
-
-    const currentValue = value || {
-      cardholderName: '',
-      cardNumber: '',
-      expiryMonth: '',
-      expiryYear: '',
-      cvv: '',
-      cvvLabel: 'CVC' as const
-    }
-
-    const handleInputChange = (field: keyof CreditCardValue, newValue: string) => {
-      const updatedValue = { ...currentValue, [field]: newValue }
-      onChange?.(updatedValue)
-    }
-
-    const handleCardNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const formatted = formatCardNumber(e.target.value)
-      if (formatted.replace(/\s/g, '').length <= 16) {
-        handleInputChange('cardNumber', formatted)
-      }
-    }
-
-    const handleCvvFocus = () => {
-      setIsFlipped(true)
-      setFocusedField('cvv')
-    }
-
-    const handleCvvBlur = () => {
-      setIsFlipped(false)
-      setFocusedField(null)
-    }
-
-    const cardType = getCardType(currentValue.cardNumber)
-    const currentYear = new Date().getFullYear()
-    const years = Array.from({ length: 20 }, (_, i) => currentYear + i)
-    const months = Array.from({ length: 12 }, (_, i) => {
-      const month = i + 1
-      return { value: month.toString().padStart(2, '0'), label: month.toString().padStart(2, '0') }
-    })
-
-    return (
-      <div ref={ref} className={cn('w-full max-w-sm mx-auto', className)}>
-        <div className="relative h-56 mb-6 perspective-1000">
-          <motion.div
-            className="relative w-full h-full"
-            animate={{ rotateY: isFlipped ? 180 : 0 }}
-            transition={{ duration: 0.6, ease: 'easeInOut' }}
-            style={{ transformStyle: 'preserve-3d' }}
-          >
-            <Card className="absolute inset-0 w-full h-full bg-slate-800 border-slate-700 text-white p-6 flex flex-col justify-between backface-hidden">
-              <div className="flex justify-between items-start">
-                <div className="w-12 h-8 bg-yellow-400 rounded"></div>
-                <CreditCardIcon className="w-8 h-8 opacity-80" />
-              </div>
-              
-              <div className="space-y-4">
-                <div className="text-xl font-mono tracking-wider">
-                  {currentValue.cardNumber || '•••• •••• •••• ••••'}
-                </div>
-                
-                <div className="flex justify-between items-end">
-                  <div>
-                    <div className="text-xs opacity-70 uppercase">Card Holder</div>
-                    <div className="font-medium">
-                      {currentValue.cardholderName || 'YOUR NAME'}
-                    </div>
-                  </div>
-                  <div>
-                    <div className="text-xs opacity-70 uppercase">Expires</div>
-                    <div className="font-medium">
-                      {currentValue.expiryMonth && currentValue.expiryYear 
-                        ? `${currentValue.expiryMonth}/${currentValue.expiryYear.slice(-2)}`
-                        : 'MM/YY'
-                      }
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </Card>
-
-            <Card className="absolute inset-0 w-full h-full bg-slate-700 border-slate-600 text-white p-6 flex flex-col justify-between backface-hidden rotate-y-180">
-              <div className="w-full h-12 bg-black mt-4"></div>
-              
-              <div className="flex justify-end items-center space-x-4">
-                <div className="text-right">
-                  <div className="text-xs opacity-70 uppercase">{currentValue.cvvLabel}</div>
-                  <div className="bg-white text-black px-2 py-1 rounded text-center font-mono">
-                    {currentValue.cvv || '•••'}
-                  </div>
-                </div>
-                <Lock className="w-6 h-6 opacity-60" />
-              </div>
-              
-              <div className="text-xs opacity-60 text-center">
-                This card is protected by advanced security features
-              </div>
-            </Card>
-          </motion.div>
-        </div>
-
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium mb-2">Cardholder Name</label>
-            <Input
-              type="text"
-              placeholder="John Doe"
-              value={currentValue.cardholderName}
-              onChange={(e) => handleInputChange('cardholderName', e.target.value.toUpperCase())}
-              onFocus={() => setFocusedField('cardholderName')}
-              onBlur={() => setFocusedField(null)}
-              className={cn(
-                'transition-all duration-200',
-                focusedField === 'cardholderName' && 'ring-2 ring-blue-500'
-              )}
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium mb-2">Card Number</label>
-            <Input
-              type="text"
-              placeholder="1234 5678 9012 3456"
-              value={currentValue.cardNumber}
-              onChange={handleCardNumberChange}
-              onFocus={() => setFocusedField('cardNumber')}
-              onBlur={() => setFocusedField(null)}
-              className={cn(
-                'font-mono transition-all duration-200',
-                focusedField === 'cardNumber' && 'ring-2 ring-blue-500'
-              )}
-              maxLength={19}
-            />
-          </div>
-
-          <div className="grid grid-cols-3 gap-4">
-            <div>
-              <label className="block text-sm font-medium mb-2">Month</label>
-              <Select
-                value={currentValue.expiryMonth}
-                onValueChange={(value) => handleInputChange('expiryMonth', value)}
-              >
-                <SelectTrigger className={cn(
-                  'transition-all duration-200',
-                  focusedField === 'expiryMonth' && 'ring-2 ring-blue-500'
-                )}>
-                  <SelectValue placeholder="MM" />
-                </SelectTrigger>
-                <SelectContent>
-                  {months.map((month) => (
-                    <SelectItem key={month.value} value={month.value}>
-                      {month.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium mb-2">Year</label>
-              <Select
-                value={currentValue.expiryYear}
-                onValueChange={(value) => handleInputChange('expiryYear', value)}
-              >
-                <SelectTrigger className={cn(
-                  'transition-all duration-200',
-                  focusedField === 'expiryYear' && 'ring-2 ring-blue-500'
-                )}>
-                  <SelectValue placeholder="YYYY" />
-                </SelectTrigger>
-                <SelectContent>
-                  {years.map((year) => (
-                    <SelectItem key={year} value={year.toString()}>
-                      {year}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <div className="flex items-center justify-between mb-2">
-                <Select
-                  value={currentValue.cvvLabel}
-                  onValueChange={(value) => handleInputChange('cvvLabel', value as 'CCV' | 'CVC')}
-                >
-                  <SelectTrigger className="w-20 h-6 text-xs">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="CVC">CVC</SelectItem>
-                    <SelectItem value="CCV">CCV</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <Input
-                ref={cvvInputRef}
-                type="text"
-                placeholder="123"
-                value={currentValue.cvv}
-                onChange={(e) => {
-                  const value = e.target.value.replace(/\D/g, '')
-                  if (value.length <= (cardType === 'amex' ? 4 : 3)) {
-                    handleInputChange('cvv', value)
-                  }
-                }}
-                onFocus={handleCvvFocus}
-                onBlur={handleCvvBlur}
-                className={cn(
-                  'font-mono text-center transition-all duration-200',
-                  focusedField === 'cvv' && 'ring-2 ring-blue-500'
-                )}
-                maxLength={cardType === 'amex' ? 4 : 3}
-              />
-            </div>
-          </div>
-        </div>
-
-        <style dangerouslySetInnerHTML={{
-          __html: `
-            .perspective-1000 {
-              perspective: 1000px;
-            }
-            .backface-hidden {
-              backface-visibility: hidden;
-            }
-            .rotate-y-180 {
-              transform: rotateY(180deg);
-            }
-          `
-        }} />
-      </div>
-    )
-  }
-)
-
-CreditCard.displayName = 'CreditCard'
-
-export { CreditCard }
diff --git a/registry/ui/cron-expression-builder.tsx b/registry/ui/cron-expression-builder.tsx
deleted file mode 100644
index 7c74c31..0000000
--- a/registry/ui/cron-expression-builder.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Label } from '@/components/ui/label'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-
-type CronValue = {
-  minute: string
-  hour: string
-  dayOfMonth: string
-  month: string
-  dayOfWeek: string
-}
-
-type CronExpressionBuilderProps = {
-  value?: CronValue
-  onChange?: (value: CronValue & { expression: string; human: string }) => void
-}
-
-const DOW = [
-  { value: '*', label: 'Any day' },
-  { value: '1', label: 'Monday' },
-  { value: '2', label: 'Tuesday' },
-  { value: '3', label: 'Wednesday' },
-  { value: '4', label: 'Thursday' },
-  { value: '5', label: 'Friday' },
-  { value: '6', label: 'Saturday' },
-  { value: '0', label: 'Sunday' },
-]
-
-const defaultValue: CronValue = {
-  minute: '0',
-  hour: '9',
-  dayOfMonth: '*',
-  month: '*',
-  dayOfWeek: '1',
-}
-
-const range = (max: number, pad = false) =>
-  Array.from({ length: max }, (_, i) => ({
-    value: String(i),
-    label: pad ? String(i).padStart(2, '0') : String(i),
-  }))
-
-function toHuman(value: CronValue) {
-  const day = DOW.find((item) => item.value === value.dayOfWeek)?.label ?? 'Custom day'
-  return `Runs at ${value.hour.padStart(2, '0')}:${value.minute.padStart(2, '0')} on ${day}`
-}
-
-export function CronExpressionBuilder({
-  value = defaultValue,
-  onChange,
-}: CronExpressionBuilderProps) {
-  const [state, setState] = React.useState<CronValue>(value)
-
-  const setField = (key: keyof CronValue, next: string) => {
-    setState((prev) => {
-      const updated = { ...prev, [key]: next }
-      const expression = `${updated.minute} ${updated.hour} ${updated.dayOfMonth} ${updated.month} ${updated.dayOfWeek}`
-      onChange?.({ ...updated, expression, human: toHuman(updated) })
-      return updated
-    })
-  }
-
-  const expression = `${state.minute} ${state.hour} ${state.dayOfMonth} ${state.month} ${state.dayOfWeek}`
-
-  return (
-    <div className="space-y-3">
-      <div className="grid gap-3 md:grid-cols-3">
-        <div className="space-y-1">
-          <Label>Minute</Label>
-          <Select value={state.minute} onValueChange={(v) => setField('minute', v)}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {range(60, true).map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-1">
-          <Label>Hour</Label>
-          <Select value={state.hour} onValueChange={(v) => setField('hour', v)}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {range(24, true).map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="space-y-1">
-          <Label>Day of Week</Label>
-          <Select value={state.dayOfWeek} onValueChange={(v) => setField('dayOfWeek', v)}>
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {DOW.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div className="rounded border p-3 text-sm">
-        <div className="font-medium">Cron: {expression}</div>
-        <div className="text-muted-foreground">{toHuman(state)}</div>
-      </div>
-    </div>
-  )
-}
diff --git a/registry/ui/emoji-picker.tsx b/registry/ui/emoji-picker.tsx
deleted file mode 100644
index 8dfbc4a..0000000
--- a/registry/ui/emoji-picker.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { ScrollArea } from '@/components/ui/scroll-area'
-
-const EMOJI_GROUPS = {
-  Smileys: ['😀', '😁', '😂', '🤣', '😍', '🥳', '🤔', '😭', '😴', '😎'],
-  Gestures: ['👍', '👎', '👏', '🙏', '🔥', '💯', '✅', '❌', '👀', '🤝'],
-  Nature: ['🌱', '🌳', '🌸', '🌞', '🌙', '⭐', '🌊', '🐶', '🐱', '🦊'],
-  Objects: ['📦', '📌', '🧩', '🎯', '🛠️', '📅', '📚', '💡', '🔒', '🔔'],
-} as const
-
-type EmojiPickerProps = {
-  value?: string
-  onChange?: (value: string) => void
-}
-
-export function EmojiPicker({ value = '', onChange }: EmojiPickerProps) {
-  const [open, setOpen] = React.useState(false)
-  const [query, setQuery] = React.useState('')
-
-  const allGroups = Object.entries(EMOJI_GROUPS)
-  const filteredGroups = allGroups
-    .map(([group, emojis]) => ({
-      group,
-      emojis: emojis.filter((emoji) => emoji.includes(query.trim())),
-    }))
-    .filter((entry) => entry.emojis.length > 0)
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button type="button" variant="outline" className="w-full justify-start">
-          {value || 'Pick an emoji'}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[320px] space-y-2 p-3">
-        <Input
-          placeholder="Filter emojis"
-          value={query}
-          onChange={(event) => setQuery(event.target.value)}
-        />
-        <ScrollArea className="h-64">
-          <div className="space-y-3">
-            {filteredGroups.map(({ group, emojis }) => (
-              <div key={group} className="space-y-1">
-                <div className="text-xs font-medium text-muted-foreground">
-                  {group}
-                </div>
-                <div className="grid grid-cols-8 gap-1">
-                  {emojis.map((emoji) => (
-                    <button
-                      key={`${group}-${emoji}`}
-                      type="button"
-                      className="rounded p-1 text-lg hover:bg-muted"
-                      onClick={() => {
-                        onChange?.(emoji)
-                        setOpen(false)
-                      }}
-                    >
-                      {emoji}
-                    </button>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </ScrollArea>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/registry/ui/image-upload-dropzone.tsx b/registry/ui/image-upload-dropzone.tsx
deleted file mode 100644
index 4a2fa1f..0000000
--- a/registry/ui/image-upload-dropzone.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ImagePlus, Upload } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-
-type ImageUploadDropzoneProps = {
-  value?: string | null
-  onChange?: (value: string | null) => void
-}
-
-function cropCenterSquare(dataUrl: string): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const img = new Image()
-    img.onload = () => {
-      const side = Math.min(img.width, img.height)
-      const sx = (img.width - side) / 2
-      const sy = (img.height - side) / 2
-      const canvas = document.createElement('canvas')
-      canvas.width = side
-      canvas.height = side
-      const ctx = canvas.getContext('2d')
-
-      if (!ctx) {
-        reject(new Error('Unable to crop image'))
-        return
-      }
-
-      ctx.drawImage(img, sx, sy, side, side, 0, 0, side, side)
-      resolve(canvas.toDataURL('image/png'))
-    }
-    img.onerror = () => reject(new Error('Failed to load image'))
-    img.src = dataUrl
-  })
-}
-
-export function ImageUploadDropzone({ value, onChange }: ImageUploadDropzoneProps) {
-  const [isDragging, setIsDragging] = React.useState(false)
-  const [preview, setPreview] = React.useState<string | null>(value ?? null)
-  const [progress, setProgress] = React.useState(0)
-  const inputRef = React.useRef<HTMLInputElement>(null)
-
-  React.useEffect(() => {
-    setPreview(value ?? null)
-  }, [value])
-
-  const readFile = (file: File) => {
-    const reader = new FileReader()
-    reader.onload = () => {
-      const data = reader.result as string
-      setPreview(data)
-      onChange?.(data)
-
-      setProgress(0)
-      const timer = window.setInterval(() => {
-        setProgress((prev) => {
-          if (prev >= 100) {
-            window.clearInterval(timer)
-            return 100
-          }
-          return prev + 20
-        })
-      }, 120)
-    }
-    reader.readAsDataURL(file)
-  }
-
-  const handleFiles = (files: FileList | null) => {
-    const file = files?.[0]
-    if (!file || !file.type.startsWith('image/')) return
-    readFile(file)
-  }
-
-  return (
-    <div className="space-y-3">
-      <div
-        className={`rounded-lg border-2 border-dashed p-6 text-center ${isDragging ? 'border-primary bg-muted' : 'border-muted-foreground/30'}`}
-        onDragOver={(event) => {
-          event.preventDefault()
-          setIsDragging(true)
-        }}
-        onDragLeave={() => setIsDragging(false)}
-        onDrop={(event) => {
-          event.preventDefault()
-          setIsDragging(false)
-          handleFiles(event.dataTransfer.files)
-        }}
-      >
-        <input
-          ref={inputRef}
-          type="file"
-          accept="image/*"
-          className="hidden"
-          onChange={(event) => handleFiles(event.target.files)}
-        />
-        <div className="mb-2 flex justify-center">
-          <ImagePlus className="h-6 w-6 text-muted-foreground" />
-        </div>
-        <p className="text-sm text-muted-foreground">Drop image here or click to upload</p>
-        <Button type="button" variant="outline" className="mt-3" onClick={() => inputRef.current?.click()}>
-          <Upload className="mr-2 h-4 w-4" />
-          Choose Image
-        </Button>
-      </div>
-
-      {progress > 0 && progress < 100 ? (
-        <div className="rounded border p-2 text-sm">Uploading... {progress}%</div>
-      ) : null}
-
-      {preview ? (
-        <div className="space-y-2 rounded border p-3">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={preview} alt="Preview" className="max-h-56 w-full rounded object-contain" />
-          <div className="flex gap-2">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={async () => {
-                const cropped = await cropCenterSquare(preview)
-                setPreview(cropped)
-                onChange?.(cropped)
-              }}
-            >
-              Crop Center Square
-            </Button>
-            <Button
-              type="button"
-              variant="destructive"
-              onClick={() => {
-                setPreview(null)
-                setProgress(0)
-                onChange?.(null)
-              }}
-            >
-              Remove
-            </Button>
-          </div>
-        </div>
-      ) : null}
-    </div>
-  )
-}
diff --git a/registry/ui/inline-editable-field.tsx b/registry/ui/inline-editable-field.tsx
deleted file mode 100644
index 5b3b686..0000000
--- a/registry/ui/inline-editable-field.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Pencil } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-
-type InlineEditableFieldProps = {
-  value: string
-  onChange: (value: string) => void
-  placeholder?: string
-}
-
-export function InlineEditableField({
-  value,
-  onChange,
-  placeholder = 'Click to edit',
-}: InlineEditableFieldProps) {
-  const [editing, setEditing] = React.useState(false)
-  const [draft, setDraft] = React.useState(value)
-
-  React.useEffect(() => {
-    setDraft(value)
-  }, [value])
-
-  const save = () => {
-    onChange(draft)
-    setEditing(false)
-  }
-
-  if (editing) {
-    return (
-      <Input
-        autoFocus
-        value={draft}
-        onChange={(event) => setDraft(event.target.value)}
-        onBlur={save}
-        onKeyDown={(event) => {
-          if (event.key === 'Enter') save()
-          if (event.key === 'Escape') {
-            setDraft(value)
-            setEditing(false)
-          }
-        }}
-      />
-    )
-  }
-
-  return (
-    <Button
-      type="button"
-      variant="ghost"
-      className="h-auto w-full justify-start px-2"
-      onClick={() => setEditing(true)}
-    >
-      <span className="truncate text-left">{value || placeholder}</span>
-      <Pencil className="ml-2 h-4 w-4" />
-    </Button>
-  )
-}
diff --git a/registry/ui/location-input.tsx b/registry/ui/location-input.tsx
deleted file mode 100644
index cffd0b2..0000000
--- a/registry/ui/location-input.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-import React, { useState } from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
-import {
-  Command,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-} from '@/components/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
-
-// Import JSON data directly
-import countries from '@/data/countries.json'
-import states from '@/data/states.json'
-
-interface Timezone {
-  zoneName: string
-  gmtOffset: number
-  gmtOffsetName: string
-  abbreviation: string
-  tzName: string
-}
-
-interface CountryProps {
-  id: number
-  name: string
-  iso3: string
-  iso2: string
-  numeric_code: string
-  phone_code: string
-  capital: string
-  currency: string
-  currency_name: string
-  currency_symbol: string
-  tld: string
-  native: string
-  region: string
-  region_id: string
-  subregion: string
-  subregion_id: string
-  nationality: string
-  timezones: Timezone[]
-  translations: Record<string, string>
-  latitude: string
-  longitude: string
-  emoji: string
-  emojiU: string
-}
-
-interface StateProps {
-  id: number
-  name: string
-  country_id: number
-  country_code: string
-  country_name: string
-  state_code: string
-  type: string | null
-  latitude: string
-  longitude: string
-}
-
-interface LocationSelectorProps {
-  disabled?: boolean
-  onCountryChange?: (country: CountryProps | null) => void
-  onStateChange?: (state: StateProps | null) => void
-}
-
-const LocationSelector = ({
-  disabled,
-  onCountryChange,
-  onStateChange,
-}: LocationSelectorProps) => {
-  const [selectedCountry, setSelectedCountry] = useState<CountryProps | null>(
-    null,
-  )
-  const [selectedState, setSelectedState] = useState<StateProps | null>(null)
-  const [openCountryDropdown, setOpenCountryDropdown] = useState(false)
-  const [openStateDropdown, setOpenStateDropdown] = useState(false)
-
-  // Cast imported JSON data to their respective types
-  const countriesData = countries as CountryProps[]
-  const statesData = states as StateProps[]
-
-  // Filter states for selected country
-  const availableStates = statesData.filter(
-    (state) => state.country_id === selectedCountry?.id,
-  )
-
-  const handleCountrySelect = (country: CountryProps | null) => {
-    setSelectedCountry(country)
-    setSelectedState(null) // Reset state when country changes
-    onCountryChange?.(country)
-    onStateChange?.(null)
-  }
-
-  const handleStateSelect = (state: StateProps | null) => {
-    setSelectedState(state)
-    onStateChange?.(state)
-  }
-
-  return (
-    <div className="flex gap-4">
-      {/* Country Selector */}
-      <Popover open={openCountryDropdown} onOpenChange={setOpenCountryDropdown}>
-        <PopoverTrigger asChild>
-          <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded={openCountryDropdown}
-            disabled={disabled}
-            className="w-full justify-between"
-          >
-            {selectedCountry ? (
-              <div className="flex items-center gap-2">
-                <span>{selectedCountry.emoji}</span>
-                <span>{selectedCountry.name}</span>
-              </div>
-            ) : (
-              <span>Select Country...</span>
-            )}
-            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="w-[300px] p-0">
-          <Command>
-            <CommandInput placeholder="Search country..." />
-            <CommandList>
-              <CommandEmpty>No country found.</CommandEmpty>
-              <CommandGroup>
-                <ScrollArea className="h-[300px]">
-                  {countriesData.map((country) => (
-                    <CommandItem
-                      key={country.id}
-                      value={country.name}
-                      onSelect={() => {
-                        handleCountrySelect(country)
-                        setOpenCountryDropdown(false)
-                      }}
-                      className="flex cursor-pointer items-center justify-between text-sm"
-                    >
-                      <div className="flex items-center gap-2">
-                        <span>{country.emoji}</span>
-                        <span>{country.name}</span>
-                      </div>
-                      <Check
-                        className={cn(
-                          'h-4 w-4',
-                          selectedCountry?.id === country.id
-                            ? 'opacity-100'
-                            : 'opacity-0',
-                        )}
-                      />
-                    </CommandItem>
-                  ))}
-                  <ScrollBar orientation="vertical" />
-                </ScrollArea>
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
-
-      {/* State Selector - Only shown if selected country has states */}
-      {availableStates.length > 0 && (
-        <Popover open={openStateDropdown} onOpenChange={setOpenStateDropdown}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="outline"
-              role="combobox"
-              aria-expanded={openStateDropdown}
-              disabled={!selectedCountry}
-              className="w-full justify-between"
-            >
-              {selectedState ? (
-                <span>{selectedState.name}</span>
-              ) : (
-                <span>Select State...</span>
-              )}
-              <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-[300px] p-0">
-            <Command>
-              <CommandInput placeholder="Search state..." />
-              <CommandList>
-                <CommandEmpty>No state found.</CommandEmpty>
-                <CommandGroup>
-                  <ScrollArea className="h-[300px]">
-                    {availableStates.map((state) => (
-                      <CommandItem
-                        key={state.id}
-                        value={state.name}
-                        onSelect={() => {
-                          handleStateSelect(state)
-                          setOpenStateDropdown(false)
-                        }}
-                        className="flex cursor-pointer items-center justify-between text-sm"
-                      >
-                        <span>{state.name}</span>
-                        <Check
-                          className={cn(
-                            'h-4 w-4',
-                            selectedState?.id === state.id
-                              ? 'opacity-100'
-                              : 'opacity-0',
-                          )}
-                        />
-                      </CommandItem>
-                    ))}
-                    <ScrollBar orientation="vertical" />
-                  </ScrollArea>
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-      )}
-    </div>
-  )
-}
-
-export default LocationSelector
diff --git a/registry/ui/masked-input.tsx b/registry/ui/masked-input.tsx
deleted file mode 100644
index 0594815..0000000
--- a/registry/ui/masked-input.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Input } from '@/components/ui/input'
-
-const MASK_TOKENS = {
-  '9': /\d/,
-  a: /[A-Za-z]/,
-  '*': /[A-Za-z0-9]/,
-} as const
-
-export function applyMask(raw: string, mask: string) {
-  const clean = raw.replace(/[^A-Za-z0-9]/g, '')
-  let cleanIndex = 0
-  let maskedValue = ''
-
-  for (let i = 0; i < mask.length; i += 1) {
-    const maskChar = mask[i] as keyof typeof MASK_TOKENS
-    const token = MASK_TOKENS[maskChar]
-
-    if (!token) {
-      maskedValue += mask[i]
-      continue
-    }
-
-    while (cleanIndex < clean.length && !token.test(clean[cleanIndex])) {
-      cleanIndex += 1
-    }
-
-    if (cleanIndex < clean.length) {
-      maskedValue += clean[cleanIndex]
-      cleanIndex += 1
-    } else {
-      break
-    }
-  }
-
-  return maskedValue
-}
-
-type MaskedInputProps = Omit<
-  React.ComponentProps<typeof Input>,
-  'value' | 'onChange'
-> & {
-  mask: string
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-}
-
-export function MaskedInput({
-  mask,
-  value,
-  defaultValue,
-  onValueChange,
-  ...props
-}: MaskedInputProps) {
-  const [internalValue, setInternalValue] = React.useState(
-    applyMask(defaultValue ?? '', mask),
-  )
-
-  const isControlled = value !== undefined
-  const displayValue = isControlled ? applyMask(value, mask) : internalValue
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const nextValue = applyMask(event.target.value, mask)
-
-    if (!isControlled) {
-      setInternalValue(nextValue)
-    }
-
-    onValueChange?.(nextValue)
-  }
-
-  return <Input {...props} value={displayValue} onChange={handleChange} />
-}
diff --git a/registry/ui/signature-input.tsx b/registry/ui/signature-input.tsx
deleted file mode 100644
index ca024c7..0000000
--- a/registry/ui/signature-input.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-'use client'
-
-import { useEffect, useState, useRef } from 'react'
-import { Button } from '@/components/ui/button'
-import { Eraser } from 'lucide-react'
-
-type SignatureInputProps = {
-  canvasRef?: React.RefObject<HTMLCanvasElement | null>
-  onSignatureChange: (signature: string | null) => void
-}
-
-const disableTouchScroll = (canvas: HTMLCanvasElement) => {
-  const preventScroll = (e: TouchEvent) => {
-    e.preventDefault()
-  }
-
-  canvas.addEventListener('touchstart', preventScroll, { passive: false })
-  canvas.addEventListener('touchmove', preventScroll, { passive: false })
-  canvas.addEventListener('touchend', preventScroll, { passive: false })
-
-  return () => {
-    canvas.removeEventListener('touchstart', preventScroll)
-    canvas.removeEventListener('touchmove', preventScroll)
-    canvas.removeEventListener('touchend', preventScroll)
-  }
-}
-
-export default function SignatureInput({
-  canvasRef: externalCanvasRef,
-  onSignatureChange,
-}: SignatureInputProps) {
-  const internalCanvasRef = useRef<HTMLCanvasElement>(null)
-  const canvasRef = externalCanvasRef ?? internalCanvasRef
-  const [isDrawing, setIsDrawing] = useState(false)
-  const [lastPosition, setLastPosition] = useState<{
-    x: number
-    y: number
-  } | null>(null)
-
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-
-    // Setup canvas context
-    const ctx = canvas.getContext('2d')
-    if (ctx) {
-      ctx.lineWidth = 2
-      ctx.lineCap = 'round'
-      ctx.lineJoin = 'round'
-    }
-
-    const updateStrokeColor = () => {
-      const ctx = canvas.getContext('2d')
-      if (!ctx) return
-
-      const isDarkClass = document.documentElement.classList.contains('dark')
-      const isLightClass = document.documentElement.classList.contains('light')
-
-      const systemPrefersDark = window.matchMedia(
-        '(prefers-color-scheme: dark)',
-      ).matches
-
-      const isDarkMode = isDarkClass || (!isLightClass && systemPrefersDark)
-
-      ctx.strokeStyle = isDarkMode ? '#ffffff' : '#000000'
-    }
-
-    updateStrokeColor()
-
-    // Disable touch scrolling while drawing
-    const cleanupTouchScroll = disableTouchScroll(canvas)
-
-    const observer = new MutationObserver(updateStrokeColor)
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class'],
-    })
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    mediaQuery.addEventListener('change', updateStrokeColor)
-
-    return () => {
-      cleanupTouchScroll()
-      observer.disconnect()
-      mediaQuery.removeEventListener('change', updateStrokeColor)
-    }
-  }, [canvasRef])
-
-  const startDrawing = (
-    e:
-      | React.MouseEvent<HTMLCanvasElement>
-      | React.TouchEvent<HTMLCanvasElement>,
-  ) => {
-    e.preventDefault()
-    setIsDrawing(true)
-    draw(e)
-  }
-
-  const stopDrawing = () => {
-    if (!isDrawing) return
-
-    setIsDrawing(false)
-    setLastPosition(null)
-    const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (canvas && ctx) {
-      ctx.beginPath()
-      const dataUrl = canvas.toDataURL()
-      onSignatureChange(dataUrl)
-    }
-  }
-
-  const draw = (
-    e:
-      | React.MouseEvent<HTMLCanvasElement>
-      | React.TouchEvent<HTMLCanvasElement>,
-  ) => {
-    e.preventDefault()
-    if (!isDrawing) return
-
-    const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (canvas && ctx) {
-      const rect = canvas.getBoundingClientRect()
-      const x = ('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left
-      const y = ('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top
-
-      if (lastPosition) {
-        const midX = (lastPosition.x + x) / 2
-        const midY = (lastPosition.y + y) / 2
-
-        ctx.beginPath()
-        ctx.moveTo(lastPosition.x, lastPosition.y)
-        ctx.quadraticCurveTo(midX, midY, x, y)
-        ctx.stroke()
-      } else {
-        ctx.beginPath()
-        ctx.moveTo(x, y)
-      }
-
-      setLastPosition({ x, y })
-    }
-  }
-
-  const clearSignature = () => {
-    const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (canvas && ctx) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
-      onSignatureChange(null)
-    }
-  }
-
-  // Callback ref to sync both internal and external refs
-  const setCanvasRef = (element: HTMLCanvasElement | null) => {
-    ;(
-      internalCanvasRef as React.MutableRefObject<HTMLCanvasElement | null>
-    ).current = element
-    if (externalCanvasRef) {
-      ;(
-        externalCanvasRef as React.MutableRefObject<HTMLCanvasElement | null>
-      ).current = element
-    }
-  }
-
-  return (
-    <div className="border border-gray-300 rounded-md overflow-hidden relative w-[400px] h-[200px]">
-      <canvas
-        ref={setCanvasRef}
-        width={400}
-        height={200}
-        className="w-full h-full"
-        onMouseDown={startDrawing}
-        onMouseUp={stopDrawing}
-        onMouseOut={stopDrawing}
-        onMouseMove={draw}
-        onTouchStart={startDrawing}
-        onTouchEnd={stopDrawing}
-        onTouchMove={draw}
-      />
-      <Button
-        type="button"
-        size="icon"
-        variant="outline"
-        className="absolute left-1 bottom-1 z-10 rounded-full"
-        onClick={clearSignature}
-      >
-        <Eraser className="w-4 h-4 text-muted-foreground hover:text-primary" />
-      </Button>
-    </div>
-  )
-}
diff --git a/registry/ui/signature-pad.tsx b/registry/ui/signature-pad.tsx
deleted file mode 100644
index e5d36f0..0000000
--- a/registry/ui/signature-pad.tsx
+++ /dev/null
@@ -1,487 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { useEffect, useState, useRef, useCallback } from 'react'
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-// Progress is now inline in the button
-import { cn } from '@/lib/utils'
-import { Eraser, Pen, Check, Pencil, RotateCcw } from 'lucide-react'
-
-type SignaturePadProps = {
-  value?: string | null
-  onChange: (signature: string | null) => void
-  disabled?: boolean
-  className?: string
-  holdToSignDuration?: number // Duration in ms to hold for confirming signature
-}
-
-const CANVAS_WIDTH = 400
-const CANVAS_HEIGHT = 200
-const DEFAULT_HOLD_DURATION = 1500 // 1.5 seconds
-
-const disableTouchScroll = (canvas: HTMLCanvasElement) => {
-  const preventScroll = (e: TouchEvent) => {
-    e.preventDefault()
-  }
-
-  canvas.addEventListener('touchstart', preventScroll, { passive: false })
-  canvas.addEventListener('touchmove', preventScroll, { passive: false })
-  canvas.addEventListener('touchend', preventScroll, { passive: false })
-
-  return () => {
-    canvas.removeEventListener('touchstart', preventScroll)
-    canvas.removeEventListener('touchmove', preventScroll)
-    canvas.removeEventListener('touchend', preventScroll)
-  }
-}
-
-export default function SignaturePad({
-  value,
-  onChange,
-  disabled = false,
-  className,
-  holdToSignDuration = DEFAULT_HOLD_DURATION,
-}: SignaturePadProps) {
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const [isDrawing, setIsDrawing] = useState(false)
-  const [lastPosition, setLastPosition] = useState<{
-    x: number
-    y: number
-  } | null>(null)
-  const [hasDrawn, setHasDrawn] = useState(false)
-  const [holdProgress, setHoldProgress] = useState(0)
-  const [isHolding, setIsHolding] = useState(false)
-
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const holdTimerRef = useRef<NodeJS.Timeout | null>(null)
-  const holdStartRef = useRef<number | null>(null)
-  const animationFrameRef = useRef<number | null>(null)
-
-  // Helper function to get the correct stroke color based on theme
-  const getStrokeColor = () => {
-    const isDarkClass = document.documentElement.classList.contains('dark')
-    const isLightClass = document.documentElement.classList.contains('light')
-    const systemPrefersDark = window.matchMedia(
-      '(prefers-color-scheme: dark)',
-    ).matches
-
-    const isDarkMode = isDarkClass || (!isLightClass && systemPrefersDark)
-    return isDarkMode ? '#ffffff' : '#000000'
-  }
-
-  // Setup canvas when dialog opens
-  useEffect(() => {
-    if (!isDialogOpen) return
-
-    const canvas = canvasRef.current
-    if (!canvas) return
-
-    const ctx = canvas.getContext('2d')
-    if (ctx) {
-      ctx.lineWidth = 2
-      ctx.lineCap = 'round'
-      ctx.lineJoin = 'round'
-      ctx.strokeStyle = getStrokeColor()
-    }
-
-    const updateStrokeColor = () => {
-      const ctx = canvas.getContext('2d')
-      if (!ctx) return
-      ctx.strokeStyle = getStrokeColor()
-    }
-
-    const cleanupTouchScroll = disableTouchScroll(canvas)
-
-    const observer = new MutationObserver(updateStrokeColor)
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class'],
-    })
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
-    mediaQuery.addEventListener('change', updateStrokeColor)
-
-    return () => {
-      cleanupTouchScroll()
-      observer.disconnect()
-      mediaQuery.removeEventListener('change', updateStrokeColor)
-    }
-  }, [isDialogOpen])
-
-  // Reset canvas state when dialog opens
-  useEffect(() => {
-    if (isDialogOpen) {
-      setHasDrawn(false)
-      setHoldProgress(0)
-      setIsHolding(false)
-      // Clear canvas on open
-      const canvas = canvasRef.current
-      const ctx = canvas?.getContext('2d')
-      if (canvas && ctx) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height)
-      }
-    }
-  }, [isDialogOpen])
-
-  const startDrawing = (
-    e:
-      | React.MouseEvent<HTMLCanvasElement>
-      | React.TouchEvent<HTMLCanvasElement>,
-  ) => {
-    e.preventDefault()
-    setIsDrawing(true)
-    setHasDrawn(true)
-    draw(e)
-  }
-
-  const stopDrawing = () => {
-    if (!isDrawing) return
-    setIsDrawing(false)
-    setLastPosition(null)
-    const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (canvas && ctx) {
-      ctx.beginPath()
-    }
-  }
-
-  const draw = (
-    e:
-      | React.MouseEvent<HTMLCanvasElement>
-      | React.TouchEvent<HTMLCanvasElement>,
-  ) => {
-    e.preventDefault()
-    if (!isDrawing) return
-
-    const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (canvas && ctx) {
-      // Ensure correct stroke color before drawing
-      ctx.strokeStyle = getStrokeColor()
-      
-      const rect = canvas.getBoundingClientRect()
-      const scaleX = canvas.width / rect.width
-      const scaleY = canvas.height / rect.height
-      const x =
-        (('touches' in e ? e.touches[0].clientX : e.clientX) - rect.left) *
-        scaleX
-      const y =
-        (('touches' in e ? e.touches[0].clientY : e.clientY) - rect.top) *
-        scaleY
-
-      if (lastPosition) {
-        const midX = (lastPosition.x + x) / 2
-        const midY = (lastPosition.y + y) / 2
-
-        ctx.beginPath()
-        ctx.moveTo(lastPosition.x, lastPosition.y)
-        ctx.quadraticCurveTo(midX, midY, x, y)
-        ctx.stroke()
-      } else {
-        ctx.beginPath()
-        ctx.moveTo(x, y)
-      }
-
-      setLastPosition({ x, y })
-    }
-  }
-
-  const clearSignature = () => {
-    const canvas = canvasRef.current
-    const ctx = canvas?.getContext('2d')
-    if (canvas && ctx) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
-      setHasDrawn(false)
-      setHoldProgress(0)
-    }
-  }
-
-  const updateHoldProgress = useCallback(() => {
-    if (!holdStartRef.current) return
-
-    const elapsed = Date.now() - holdStartRef.current
-    const progress = Math.min((elapsed / holdToSignDuration) * 100, 100)
-    setHoldProgress(progress)
-
-    if (progress < 100) {
-      animationFrameRef.current = requestAnimationFrame(updateHoldProgress)
-    }
-  }, [holdToSignDuration])
-
-  const handleHoldStart = useCallback(
-    (e: React.PointerEvent) => {
-      if (!hasDrawn) return
-
-      e.preventDefault()
-      setIsHolding(true)
-      holdStartRef.current = Date.now()
-      setHoldProgress(0)
-
-      // Start progress animation
-      animationFrameRef.current = requestAnimationFrame(updateHoldProgress)
-
-      // Set timer for completion
-      holdTimerRef.current = setTimeout(() => {
-        const canvas = canvasRef.current
-        if (canvas) {
-          const dataUrl = canvas.toDataURL('image/png')
-          onChange(dataUrl)
-          setIsDialogOpen(false)
-        }
-        setIsHolding(false)
-        setHoldProgress(0)
-      }, holdToSignDuration)
-    },
-    [hasDrawn, holdToSignDuration, onChange, updateHoldProgress],
-  )
-
-  const handleHoldEnd = useCallback(() => {
-    setIsHolding(false)
-    holdStartRef.current = null
-
-    if (holdTimerRef.current) {
-      clearTimeout(holdTimerRef.current)
-      holdTimerRef.current = null
-    }
-
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current)
-      animationFrameRef.current = null
-    }
-
-    setHoldProgress(0)
-  }, [])
-
-  const handleClearValue = () => {
-    onChange(null)
-  }
-
-  const handleReset = () => {
-    onChange(null)
-    setIsDialogOpen(false)
-  }
-
-  const handleEditSignature = () => {
-    setIsDialogOpen(true)
-  }
-
-  // Cleanup timers on unmount
-  useEffect(() => {
-    return () => {
-      if (holdTimerRef.current) {
-        clearTimeout(holdTimerRef.current)
-      }
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current)
-      }
-    }
-  }, [])
-
-  // If we have a signature value, show the signature image
-  if (value) {
-    return (
-      <div
-        className={cn(
-          'relative inline-flex items-center justify-start mt-2',
-          className,
-        )}
-      >
-        <div className="relative border border-input rounded-md overflow-hidden bg-white dark:bg-zinc-900">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={value}
-            alt="Signature"
-            className="w-[200px] h-[100px] object-contain"
-          />
-          <div className="absolute bottom-1 right-1 flex gap-1">
-            <Button
-              type="button"
-              size="icon"
-              variant="outline"
-              className="h-7 w-7 rounded-full bg-background/80 backdrop-blur-sm"
-              onClick={handleEditSignature}
-              disabled={disabled}
-            >
-              <Pencil className="w-3 h-3 text-muted-foreground hover:text-primary" />
-            </Button>
-            <Button
-              type="button"
-              size="icon"
-              variant="outline"
-              className="h-7 w-7 rounded-full bg-background/80 backdrop-blur-sm"
-              onClick={handleClearValue}
-              disabled={disabled}
-            >
-              <Eraser className="w-3 h-3 text-muted-foreground hover:text-primary" />
-            </Button>
-          </div>
-        </div>
-
-        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="sm:max-w-md">
-            <DialogHeader>
-              <DialogTitle className="flex items-center gap-2">
-                <Pen className="w-4 h-4" />
-                Draw Signature
-              </DialogTitle>
-              <DialogDescription>
-                Draw your signature below, then hold the confirm button to sign.
-              </DialogDescription>
-            </DialogHeader>
-
-            <div className="border border-input rounded-md overflow-hidden relative bg-background">
-              <canvas
-                ref={canvasRef}
-                width={CANVAS_WIDTH}
-                height={CANVAS_HEIGHT}
-                className="w-full h-[200px] cursor-crosshair touch-none"
-                onMouseDown={startDrawing}
-                onMouseUp={stopDrawing}
-                onMouseOut={stopDrawing}
-                onMouseMove={draw}
-                onTouchStart={startDrawing}
-                onTouchEnd={stopDrawing}
-                onTouchMove={draw}
-              />
-              <Button
-                type="button"
-                size="icon"
-                variant="outline"
-                className="absolute left-2 bottom-2 rounded-full h-8 w-8"
-                onClick={clearSignature}
-              >
-                <Eraser className="w-4 h-4 text-muted-foreground" />
-              </Button>
-            </div>
-
-            <DialogFooter className="flex-row gap-2 sm:flex-row">
-              <Button
-                type="button"
-                variant="destructive"
-                className="flex-shrink-0"
-                onClick={handleReset}
-              >
-                <RotateCcw className="w-4 h-4 mr-2" />
-                Reset
-              </Button>
-              <Button
-                type="button"
-                className={cn(
-                  'flex-1 relative overflow-hidden transition-all border-2 border-transparent',
-                  hasDrawn
-                    ? 'bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300'
-                    : 'bg-muted text-muted-foreground cursor-not-allowed',
-                )}
-                disabled={!hasDrawn}
-                onPointerDown={handleHoldStart}
-                onPointerUp={handleHoldEnd}
-                onPointerLeave={handleHoldEnd}
-                onPointerCancel={handleHoldEnd}
-              >
-                {/* Progress fill background */}
-                <span
-                  className="absolute left-0 top-0 bottom-0 bg-emerald-500 transition-none"
-                  style={{ width: `${holdProgress}%` }}
-                />
-                <span className="relative z-10 flex items-center gap-2">
-                  <Check className={cn('w-4 h-4', isHolding && 'animate-pulse')} />
-                  {isHolding ? 'Keep holding...' : 'Hold to confirm'}
-                </span>
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    )
-  }
-
-  // Initial state: show pen button
-  return (
-    <div className={cn('inline-flex mt-2', className)}>
-      <Button
-        type="button"
-        size="icon"
-        variant="outline"
-        className="rounded-full"
-        onClick={() => setIsDialogOpen(true)}
-        disabled={disabled}
-      >
-        <Pen className="w-4 h-4" />
-      </Button>
-
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Pen className="w-4 h-4" />
-              Draw Signature
-            </DialogTitle>
-            <DialogDescription>
-              Draw your signature below, then hold the confirm button to sign.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="border border-input rounded-md overflow-hidden relative bg-background">
-            <canvas
-              ref={canvasRef}
-              width={CANVAS_WIDTH}
-              height={CANVAS_HEIGHT}
-              className="w-full h-[200px] cursor-crosshair touch-none"
-              onMouseDown={startDrawing}
-              onMouseUp={stopDrawing}
-              onMouseOut={stopDrawing}
-              onMouseMove={draw}
-              onTouchStart={startDrawing}
-              onTouchEnd={stopDrawing}
-              onTouchMove={draw}
-            />
-            <Button
-              type="button"
-              size="icon"
-              variant="outline"
-              className="absolute left-2 bottom-2 rounded-full h-8 w-8"
-              onClick={clearSignature}
-            >
-              <Eraser className="w-4 h-4 text-muted-foreground" />
-            </Button>
-          </div>
-
-          <DialogFooter className="flex-row gap-2 sm:flex-row">
-            <Button
-              type="button"
-              className={cn(
-                'flex-1 relative overflow-hidden transition-all border-2 border-transparent',
-                hasDrawn
-                  ? 'bg-zinc-800 dark:bg-zinc-200 text-white dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-300'
-                  : 'bg-muted text-muted-foreground cursor-not-allowed',
-              )}
-              disabled={!hasDrawn}
-              onPointerDown={handleHoldStart}
-              onPointerUp={handleHoldEnd}
-              onPointerLeave={handleHoldEnd}
-              onPointerCancel={handleHoldEnd}
-            >
-              {/* Progress fill background */}
-              <span
-                className="absolute left-0 top-0 bottom-0 bg-emerald-500 transition-none"
-                style={{ width: `${holdProgress}%` }}
-              />
-              <span className="relative z-10 flex items-center gap-2">
-                <Check className={cn('w-4 h-4', isHolding && 'animate-pulse')} />
-                {isHolding ? 'Keep holding...' : 'Hold to confirm'}
-              </span>
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
diff --git a/registry/ui/sortable-list-input.tsx b/registry/ui/sortable-list-input.tsx
deleted file mode 100644
index b8cc9bb..0000000
--- a/registry/ui/sortable-list-input.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { GripVertical, Plus, X } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Input } from '@/components/ui/input'
-
-type SortableListInputProps = {
-  value: string[]
-  onChange: (items: string[]) => void
-}
-
-function reorder<T>(list: T[], from: number, to: number) {
-  const next = [...list]
-  const [moved] = next.splice(from, 1)
-  next.splice(to, 0, moved)
-  return next
-}
-
-export function SortableListInput({ value, onChange }: SortableListInputProps) {
-  const [draft, setDraft] = React.useState('')
-  const [dragIndex, setDragIndex] = React.useState<number | null>(null)
-
-  return (
-    <div className="space-y-2">
-      <div className="flex gap-2">
-        <Input
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-          placeholder="Add item"
-          onKeyDown={(event) => {
-            if (event.key === 'Enter' && draft.trim()) {
-              onChange([...value, draft.trim()])
-              setDraft('')
-            }
-          }}
-        />
-        <Button
-          type="button"
-          onClick={() => {
-            if (!draft.trim()) return
-            onChange([...value, draft.trim()])
-            setDraft('')
-          }}
-        >
-          <Plus className="h-4 w-4" />
-        </Button>
-      </div>
-
-      <div className="space-y-2">
-        {value.map((item, index) => (
-          <div
-            key={`${item}-${index}`}
-            className="flex items-center gap-2 rounded border p-2"
-            draggable
-            onDragStart={() => setDragIndex(index)}
-            onDragOver={(event) => event.preventDefault()}
-            onDrop={() => {
-              if (dragIndex === null || dragIndex === index) return
-              onChange(reorder(value, dragIndex, index))
-              setDragIndex(null)
-            }}
-          >
-            <GripVertical className="h-4 w-4 text-muted-foreground" />
-            <span className="flex-1 text-sm">{item}</span>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              onClick={() => onChange(value.filter((_, i) => i !== index))}
-            >
-              <X className="h-4 w-4" />
-            </Button>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
diff --git a/registry/ui/token-input.tsx b/registry/ui/token-input.tsx
deleted file mode 100644
index ddae140..0000000
--- a/registry/ui/token-input.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { X } from 'lucide-react'
-
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
-
-type TokenInputProps = {
-  value: string[]
-  onChange: (tokens: string[]) => void
-  placeholder?: string
-}
-
-export function TokenInput({ value, onChange, placeholder }: TokenInputProps) {
-  const [draft, setDraft] = React.useState('')
-
-  const addToken = (raw: string) => {
-    const next = raw.trim()
-    if (!next || value.includes(next)) return
-    onChange([...value, next])
-  }
-
-  const removeToken = (token: string) => {
-    onChange(value.filter((item) => item !== token))
-  }
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' || event.key === ',') {
-      event.preventDefault()
-      addToken(draft)
-      setDraft('')
-    }
-
-    if (event.key === 'Backspace' && !draft && value.length > 0) {
-      removeToken(value[value.length - 1])
-    }
-  }
-
-  return (
-    <div className="space-y-2">
-      <div className="flex flex-wrap gap-2 rounded-md border p-2">
-        {value.map((token) => (
-          <Badge key={token} variant="secondary" className="gap-1">
-            {token}
-            <button
-              type="button"
-              onClick={() => removeToken(token)}
-              aria-label={`Remove ${token}`}
-            >
-              <X className="h-3 w-3" />
-            </button>
-          </Badge>
-        ))}
-        <Input
-          className="h-8 border-0 p-0 shadow-none focus-visible:ring-0"
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-          onKeyDown={handleKeyDown}
-          onBlur={() => {
-            if (draft.trim()) {
-              addToken(draft)
-              setDraft('')
-            }
-          }}
-          placeholder={placeholder ?? 'Type and press Enter'}
-        />
-      </div>
-    </div>
-  )
-}
diff --git a/registry/ui/transfer-list.tsx b/registry/ui/transfer-list.tsx
deleted file mode 100644
index 9751a47..0000000
--- a/registry/ui/transfer-list.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client'
-
-import * as React from 'react'
-
-import { Button } from '@/components/ui/button'
-
-type TransferItem = {
-  id: string
-  label: string
-}
-
-type TransferListProps = {
-  available: TransferItem[]
-  selected: TransferItem[]
-  onChange: (next: { available: TransferItem[]; selected: TransferItem[] }) => void
-}
-
-function pick(list: TransferItem[], ids: Set<string>) {
-  return list.filter((item) => ids.has(item.id))
-}
-
-function omit(list: TransferItem[], ids: Set<string>) {
-  return list.filter((item) => !ids.has(item.id))
-}
-
-function Panel({
-  title,
-  items,
-  active,
-  toggle,
-}: {
-  title: string
-  items: TransferItem[]
-  active: Set<string>
-  toggle: (id: string) => void
-}) {
-  return (
-    <div className="flex-1 rounded border">
-      <div className="border-b px-3 py-2 text-sm font-medium">{title}</div>
-      <div className="max-h-60 space-y-1 overflow-y-auto p-2">
-        {items.map((item) => (
-          <label key={item.id} className="flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-muted">
-            <input
-              type="checkbox"
-              checked={active.has(item.id)}
-              onChange={() => toggle(item.id)}
-            />
-            <span className="text-sm">{item.label}</span>
-          </label>
-        ))}
-      </div>
-    </div>
-  )
-}
-
-export function TransferList({ available, selected, onChange }: TransferListProps) {
-  const [activeAvailable, setActiveAvailable] = React.useState<Set<string>>(new Set())
-  const [activeSelected, setActiveSelected] = React.useState<Set<string>>(new Set())
-
-  const moveRight = () => {
-    const moveItems = pick(available, activeAvailable)
-    onChange({
-      available: omit(available, activeAvailable),
-      selected: [...selected, ...moveItems],
-    })
-    setActiveAvailable(new Set())
-  }
-
-  const moveLeft = () => {
-    const moveItems = pick(selected, activeSelected)
-    onChange({
-      available: [...available, ...moveItems],
-      selected: omit(selected, activeSelected),
-    })
-    setActiveSelected(new Set())
-  }
-
-  return (
-    <div className="flex flex-col gap-3 md:flex-row md:items-center">
-      <Panel
-        title="Available"
-        items={available}
-        active={activeAvailable}
-        toggle={(id) => {
-          setActiveAvailable((prev) => {
-            const next = new Set(prev)
-            if (next.has(id)) next.delete(id)
-            else next.add(id)
-            return next
-          })
-        }}
-      />
-      <div className="flex flex-row gap-2 self-center md:flex-col">
-        <Button type="button" onClick={moveRight} disabled={activeAvailable.size === 0}>
-          Add
-        </Button>
-        <Button type="button" variant="outline" onClick={moveLeft} disabled={activeSelected.size === 0}>
-          Remove
-        </Button>
-      </div>
-      <Panel
-        title="Selected"
-        items={selected}
-        active={activeSelected}
-        toggle={(id) => {
-          setActiveSelected((prev) => {
-            const next = new Set(prev)
-            if (next.has(id)) next.delete(id)
-            else next.add(id)
-            return next
-          })
-        }}
-      />
-    </div>
-  )
-}
diff --git a/registry/ui/tree-select.tsx b/registry/ui/tree-select.tsx
deleted file mode 100644
index 054816b..0000000
--- a/registry/ui/tree-select.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { ChevronDown, ChevronRight } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { ScrollArea } from '@/components/ui/scroll-area'
-
-export type TreeOption = {
-  id: string
-  label: string
-  children?: TreeOption[]
-}
-
-type TreeSelectProps = {
-  options: TreeOption[]
-  value: string[]
-  onChange: (value: string[]) => void
-  placeholder?: string
-}
-
-function flatten(options: TreeOption[]): TreeOption[] {
-  return options.flatMap((option) => [option, ...(option.children ? flatten(option.children) : [])])
-}
-
-function TreeNode({
-  node,
-  depth,
-  expanded,
-  selected,
-  toggleExpand,
-  toggleSelect,
-}: {
-  node: TreeOption
-  depth: number
-  expanded: Set<string>
-  selected: Set<string>
-  toggleExpand: (id: string) => void
-  toggleSelect: (id: string) => void
-}) {
-  const hasChildren = Boolean(node.children?.length)
-  const isExpanded = expanded.has(node.id)
-
-  return (
-    <div>
-      <div className="flex items-center gap-2 rounded px-2 py-1 hover:bg-muted" style={{ paddingLeft: `${depth * 14 + 8}px` }}>
-        {hasChildren ? (
-          <button type="button" onClick={() => toggleExpand(node.id)}>
-            {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-          </button>
-        ) : (
-          <span className="inline-block w-4" />
-        )}
-        <input type="checkbox" checked={selected.has(node.id)} onChange={() => toggleSelect(node.id)} />
-        <span className="text-sm">{node.label}</span>
-      </div>
-      {hasChildren && isExpanded && (
-        <div className="space-y-1">
-          {node.children?.map((child) => (
-            <TreeNode
-              key={child.id}
-              node={child}
-              depth={depth + 1}
-              expanded={expanded}
-              selected={selected}
-              toggleExpand={toggleExpand}
-              toggleSelect={toggleSelect}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function TreeSelect({
-  options,
-  value,
-  onChange,
-  placeholder = 'Select items',
-}: TreeSelectProps) {
-  const [open, setOpen] = React.useState(false)
-  const [expanded, setExpanded] = React.useState<Set<string>>(new Set())
-
-  const selected = new Set(value)
-  const allNodes = flatten(options)
-  const selectedLabels = allNodes.filter((node) => selected.has(node.id)).map((node) => node.label)
-
-  const toggleSelect = (id: string) => {
-    const next = new Set(selected)
-    if (next.has(id)) next.delete(id)
-    else next.add(id)
-    onChange([...next])
-  }
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button type="button" variant="outline" className="w-full justify-between">
-          <span className="truncate">
-            {selectedLabels.length ? selectedLabels.join(', ') : placeholder}
-          </span>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[340px] p-2">
-        <ScrollArea className="h-64">
-          <div className="space-y-1">
-            {options.map((option) => (
-              <TreeNode
-                key={option.id}
-                node={option}
-                depth={0}
-                expanded={expanded}
-                selected={selected}
-                toggleExpand={(id) => {
-                  setExpanded((prev) => {
-                    const next = new Set(prev)
-                    if (next.has(id)) next.delete(id)
-                    else next.add(id)
-                    return next
-                  })
-                }}
-                toggleSelect={toggleSelect}
-              />
-            ))}
-          </div>
-        </ScrollArea>
-      </PopoverContent>
-    </Popover>
-  )
-}
diff --git a/screens/edit-field-dialog/index.tsx b/screens/edit-field-dialog/index.tsx
index 1f13b66..d5e9533 100644
--- a/screens/edit-field-dialog/index.tsx
+++ b/screens/edit-field-dialog/index.tsx
@@ -13,6 +13,7 @@ import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Checkbox } from '@/components/ui/checkbox'
 import { FormFieldType } from '@/types'
+import { getFieldVariant } from '@/components/field-variants'
 import If from '@/components/ui/if'
 import {
   Select,
@@ -22,6 +23,8 @@ import {
   SelectItem,
 } from '@/components/ui/select' // Import Select components
 
+const INPUT_TYPES = { text: 'Text', email: 'Email', number: 'Number' }
+
 type EditFieldDialogProps = {
   isOpen: boolean
   onClose: () => void
@@ -36,7 +39,6 @@ export const EditFieldDialog: React.FC<EditFieldDialogProps> = ({
   onSave,
 }) => {
   const [editedField, setEditedField] = useState<FormFieldType | null>(null)
-  const [fieldType, setFieldType] = useState<string>()
 
   useEffect(() => {
     setEditedField(field)
@@ -51,6 +53,8 @@ export const EditFieldDialog: React.FC<EditFieldDialogProps> = ({
 
   if (!editedField) return null
 
+  const settings = getFieldVariant(editedField.variant).settings ?? []
+
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-xl">
@@ -110,25 +114,26 @@ export const EditFieldDialog: React.FC<EditFieldDialogProps> = ({
             />
           </div>
           <If
-            condition={field?.variant === 'Input'}
+            condition={settings.includes('inputType')}
             render={() => (
               <div>
                 <Label htmlFor="type">Type</Label>
                 <Select
                   // id="type"
                   value={editedField.type}
-                  onValueChange={(value) => {
-                    setFieldType(value)
-                    setEditedField({ ...editedField, type: value })
-                  }}
+                  onValueChange={(value) =>
+                    setEditedField({ ...editedField, type: value ?? 'text' })
+                  }
                 >
                   <SelectTrigger>
-                    <SelectValue placeholder="Select type" />
+                    {/* Base UI shows the raw value unless given a label. */}
+                    <SelectValue placeholder="Select type">
+                      {INPUT_TYPES[editedField.type as keyof typeof INPUT_TYPES]}
+                    </SelectValue>
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="text">Text</SelectItem>
                     <SelectItem value="email">Email</SelectItem>
-                    <SelectItem value="file">File</SelectItem>
                     <SelectItem value="number">Number</SelectItem>
                   </SelectContent>
                 </Select>
@@ -136,91 +141,69 @@ export const EditFieldDialog: React.FC<EditFieldDialogProps> = ({
             )}
           />
           <If
-            condition={fieldType === 'number' || fieldType === 'text'}
-            render={() => (
-              <div className="grid grid-cols-2 gap-3">
-                <div className="col-span-1 flex flex-col gap-1 ">
-                  <Label>Min Value</Label>
-                  <Input
-                    id="min"
-                    type="number"
-                    value={editedField.min}
-                    onChange={(e) =>
-                      setEditedField({
-                        ...editedField,
-                        min: Number(e.target.value),
-                      })
-                    }
-                  />
-                </div>
-                <div className="col-span-1 flex flex-col gap-1 ">
-                  <Label>Max Value</Label>
-                  <Input
-                    id="max"
-                    type="number"
-                    value={editedField.max}
-                    onChange={(e) =>
-                      setEditedField({
-                        ...editedField,
-                        max: Number(e.target.value),
-                      })
-                    }
-                  />
-                </div>
-              </div>
-            )}
-          />
-          <If
-            condition={field?.variant === 'Slider'}
+            condition={settings.includes('range')}
             render={() => (
               <div className="grid grid-cols-3 gap-3">
                 <div className="col-span-1 flex flex-col gap-1 ">
-                  <Label>Min Value</Label>
+                  <Label htmlFor="min">
+                    {editedField.variant === 'Slider' || editedField.type === 'number'
+                      ? 'Min value'
+                      : 'Min length'}
+                  </Label>
                   <Input
                     id="min"
                     type="number"
-                    value={editedField.min}
+                    value={editedField.min ?? ''}
                     onChange={(e) =>
                       setEditedField({
                         ...editedField,
-                        min: Number(e.target.value),
+                        min: e.target.value === '' ? undefined : Number(e.target.value),
                       })
                     }
                   />
                 </div>
                 <div className="col-span-1 flex flex-col gap-1 ">
-                  <Label>Max Value</Label>
+                  <Label htmlFor="max">
+                    {editedField.variant === 'Slider' || editedField.type === 'number'
+                      ? 'Max value'
+                      : 'Max length'}
+                  </Label>
                   <Input
                     id="max"
                     type="number"
-                    value={editedField.max}
-                    onChange={(e) =>
-                      setEditedField({
-                        ...editedField,
-                        max: Number(e.target.value),
-                      })
-                    }
-                  />
-                </div>
-                <div className="col-span-1 flex flex-col gap-1 ">
-                  <Label>Step</Label>
-                  <Input
-                    id="step"
-                    type="number"
-                    value={editedField.step}
+                    value={editedField.max ?? ''}
                     onChange={(e) =>
                       setEditedField({
                         ...editedField,
-                        step: Number(e.target.value),
+                        max: e.target.value === '' ? undefined : Number(e.target.value),
                       })
                     }
                   />
                 </div>
+                <If
+                  condition={settings.includes('step')}
+                  render={() => (
+                    <div className="col-span-1 flex flex-col gap-1 ">
+                      <Label htmlFor="step">Step</Label>
+                      <Input
+                        id="step"
+                        type="number"
+                        value={editedField.step ?? ''}
+                        onChange={(e) =>
+                          setEditedField({
+                            ...editedField,
+                            step: e.target.value === '' ? undefined : Number(e.target.value),
+                          })
+                        }
+                      />
+                    </div>
+                  )}
+                />
               </div>
             )}
           />
           <If
-            condition={field?.variant === 'Smart Datetime Input'}
+            condition={settings.includes('locale')}
             render={() => (
               <div className="grid grid-cols-2 gap-3">
                 <div className="col-span-1 flex flex-col gap-1 ">
@@ -231,7 +214,7 @@ export const EditFieldDialog: React.FC<EditFieldDialogProps> = ({
                     onValueChange={(value) => {
                       setEditedField({
                         ...editedField,
-                        locale: value as keyof typeof Locales,
+                        locale: (value || undefined) as keyof typeof Locales | undefined,
                       })
                     }}
                   >
diff --git a/screens/field-item.tsx b/screens/field-item.tsx
index ce04ca7..5d19894 100644
--- a/screens/field-item.tsx
+++ b/screens/field-item.tsx
@@ -3,11 +3,13 @@ import { motion, Reorder } from 'framer-motion'
 
 import { cn } from '@/lib/utils'
 import { FormFieldType } from '@/types'
-import { defaultFieldConfig, fieldTypes } from '@/constants'
+import { fieldVariants } from '@/components/field-variants'
+import { createField } from '@/components/field-variants/form'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
@@ -48,52 +50,12 @@ export const FieldItem = ({
   )
 
   const addNewColumn = (variant: string, index: number) => {
-    const newFieldName = `name_${Math.random().toString().slice(-10)}`
-
-    // Check for duplicates
-    const existingFields = Array.isArray(formFields[index])
-      ? (formFields[index] as FormFieldType[]).map((field) => field.name)
-      : [formFields[index]?.name]
-
-    // Check if the new field name already exists in the existing fields
-    if (existingFields.includes(newFieldName)) {
-      // If a field with the same name exists, do not add a new field
-      return
-    }
-
-    const { label, description, placeholder } = defaultFieldConfig[variant] || {
-      label: '',
-      description: '',
-      placeholder: '',
-    }
-
-    const newField: FormFieldType = {
-      checked: true,
-      description: description || '',
-      disabled: false,
-      label: label || newFieldName,
-      name: newFieldName,
-      onChange: () => {},
-      onSelect: () => {},
-      placeholder: placeholder || 'Placeholder',
-      required: true,
-      rowIndex: index,
-      setValue: () => {},
-      type: '',
-      value: '',
-      variant,
-    }
+    const newField = createField(variant)
 
     setFormFields((prevFields) => {
       const newFields = [...prevFields]
       if (Array.isArray(newFields[index])) {
-        // If it's already an array, check for duplicates before adding
-        const currentFieldNames = (newFields[index] as FormFieldType[]).map(
-          (field) => field.name,
-        )
-        if (!currentFieldNames.includes(newFieldName)) {
-          ;(newFields[index] as FormFieldType[]).push(newField)
-        }
+        newFields[index] = [...(newFields[index] as FormFieldType[]), newField]
       } else if (newFields[index]) {
         // If it's a single field, convert it to an array with the existing field and the new one
         newFields[index] = [newFields[index] as FormFieldType, newField]
@@ -191,27 +153,32 @@ export const FieldItem = ({
           condition={showColumnButton}
           render={() => (
             <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon"
-                  className="min-w-9 w-9 h-9 rounded-full"
-                >
-                  +
-                </Button>
+              <DropdownMenuTrigger
+                render={
+                  <Button
+                    variant="outline"
+                    size="icon"
+                    className="min-w-9 w-9 h-9 rounded-full"
+                  />
+                }
+              >
+                +
               </DropdownMenuTrigger>
               <DropdownMenuContent>
-                <DropdownMenuLabel>Select Component</DropdownMenuLabel>
+                {/* Base UI menu labels must sit inside a group. */}
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Select Component</DropdownMenuLabel>
+                </DropdownMenuGroup>
                 <DropdownMenuSeparator />
-                {fieldTypes.map((fieldType) => (
+                {fieldVariants.map((variant) => (
                   <DropdownMenuItem
-                    key={fieldType.name}
+                    key={variant.name}
                     onClick={() => {
-                      addNewColumn(fieldType.name, index)
+                      addNewColumn(variant.name, index)
                       setColumnCount((prev) => prev + 1)
                     }}
                   >
-                    {fieldType.name}
+                    {variant.name}
                   </DropdownMenuItem>
                 ))}
               </DropdownMenuContent>
diff --git a/screens/field-selector/index.tsx b/screens/field-selector/index.tsx
index 91062d3..67bfad9 100644
--- a/screens/field-selector/index.tsx
+++ b/screens/field-selector/index.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
-import { fieldTypes } from '@/constants'
+import { fieldVariants } from '@/components/field-variants'
 import { Button } from '@/components/ui/button'
 import If from '@/components/ui/if'
 import Link from 'next/link'
 import { Badge } from '@/components/ui/badge'
 
 type FieldSelectorProps = {
-  addFormField: (variant: string, index?: number) => void
+  addFormField: (variant: string) => void
 }
 
 export const FieldSelector: React.FC<FieldSelectorProps> = ({
@@ -15,12 +15,12 @@ export const FieldSelector: React.FC<FieldSelectorProps> = ({
 }) => {
   return (
     <div className="flex md:flex-col items-start flex-wrap md:flex-nowrap gap-3 h-[70vh] overflow-y-auto">
-      {fieldTypes.map((variant) => (
+      {fieldVariants.map((variant) => (
         <div className="flex items-center gap-1" key={variant.name}>
           <Button
             key={variant.name}
             variant="outline"
-            onClick={() => addFormField(variant.name, variant.index)}
+            onClick={() => addFormField(variant.name)}
             className="rounded-full"
             size="sm"
           >
diff --git a/screens/form-builder/index.tsx b/screens/form-builder/index.tsx
index 861ffbe..a374a29 100644
--- a/screens/form-builder/index.tsx
+++ b/screens/form-builder/index.tsx
@@ -5,7 +5,8 @@ import Image from 'next/image'
 import { Link } from 'next-view-transitions'
 
 import { FormFieldType } from '@/types'
-import { defaultFieldConfig, FORM_LIBRARIES, FormLibrary } from '@/constants'
+import { FORM_LIBRARIES, isFormLibrary, type FormLibrary } from '@/lib/form-code'
+import { createField } from '@/components/field-variants/form'
 import { useMediaQuery } from '@/hooks/use-media-query'
 import { Separator } from '@/components/ui/separator'
 
@@ -16,7 +17,6 @@ import { FormFieldList } from '@/screens/form-field-list'
 import { FormPreview } from '@/screens/form-preview'
 import { EditFieldDialog } from '@/screens/edit-field-dialog'
 import EmptyListSvg from '@/assets/oc-thinking.svg'
-import Editor from '@/components/editor/editor'
 
 export type FormFieldOrGroup = FormFieldType | FormFieldType[]
 
@@ -28,7 +28,8 @@ export default function FormBuilder() {
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [selectedLibrary, setSelectedLibrary] = useState<FormLibrary>(() => {
     if (typeof window !== 'undefined') {
-      return (localStorage.getItem('formLibrary') as FormLibrary) || FORM_LIBRARIES.REACT_HOOK_FORM
+      const saved = localStorage.getItem('formLibrary')
+      return isFormLibrary(saved) ? saved : FORM_LIBRARIES.REACT_HOOK_FORM
     }
     return FORM_LIBRARIES.REACT_HOOK_FORM
   })
@@ -39,32 +40,8 @@ export default function FormBuilder() {
     }
   }, [selectedLibrary])
 
-  const addFormField = (variant: string, index: number) => {
-    const newFieldName = `name_${Math.random().toString().slice(-10)}`
-
-    const { label, description, placeholder } = defaultFieldConfig[variant] || {
-      label: '',
-      description: '',
-      placeholder: '',
-    }
-
-    const newField: FormFieldType = {
-      checked: true,
-      description: description || '',
-      disabled: false,
-      label: label || newFieldName,
-      name: newFieldName,
-      onChange: () => { },
-      onSelect: () => { },
-      placeholder: placeholder || 'Placeholder',
-      required: true,
-      rowIndex: index,
-      setValue: () => { },
-      type: '',
-      value: '',
-      variant,
-    }
-    setFormFields([...formFields, newField])
+  const addFormField = (variant: string) => {
+    setFormFields([...formFields, createField(variant)])
   }
 
   const findFieldPath = (
@@ -120,7 +97,7 @@ export default function FormBuilder() {
   const FieldSelectorWithSeparator = ({
     addFormField,
   }: {
-    addFormField: (variant: string, index?: number) => void
+    addFormField: (variant: string) => void
   }) => (
     <div className="flex flex-col md:flex-row gap-3">
       <FieldSelector addFormField={addFormField} />
@@ -150,9 +127,7 @@ export default function FormBuilder() {
           <div className="grid grid-cols-1 md:grid-cols-2 items-start gap-8 md:px-5 h-full">
             <div className="w-full h-full col-span-1 md:space-x-3 md:max-h-[75vh] flex flex-col md:flex-row ">
               <FieldSelectorWithSeparator
-                addFormField={(variant: string, index: number = 0) =>
-                  addFormField(variant, index)
-                }
+                addFormField={addFormField}
               />
               <div className="overflow-y-auto flex-1 ">
                 <FormFieldList
@@ -177,9 +152,7 @@ export default function FormBuilder() {
         otherwise={() => (
           <div className="flex flex-col md:flex-row items-center gap-3 md:px-5">
             <FieldSelectorWithSeparator
-              addFormField={(variant: string, index: number = 0) =>
-                addFormField(variant, index)
-              }
+              addFormField={addFormField}
             />
             <EmptyListSvg className="mx-auto" />
           </div>
diff --git a/screens/form-preview/index.tsx b/screens/form-preview/index.tsx
index 903cca5..03619ab 100644
--- a/screens/form-preview/index.tsx
+++ b/screens/form-preview/index.tsx
@@ -1,13 +1,11 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import { Highlight, themes } from 'prism-react-renderer'
-import { z } from 'zod'
-import { useForm } from 'react-hook-form'
+import { Controller, useForm, type Control } from 'react-hook-form'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { toast } from 'sonner'
 
-import { renderFormField } from '@/screens/render-form-field'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Form, FormField, FormItem, FormControl } from '@/components/ui/form'
+import { FieldGroup } from '@/components/ui/field'
 import { Button } from '@/components/ui/button'
 import {
   Select,
@@ -20,21 +18,19 @@ import {
 } from "@/components/ui/select"
 import If from '@/components/ui/if'
 import { FormFieldType } from '@/types'
-import { FormLibrary } from '@/constants'
+import { getFieldVariant } from '@/components/field-variants'
+import { FieldShell } from '@/components/field-variants/field-shell'
+import {
+  buildFormSchema,
+  formDefaultValues,
+  type FormFieldOrGroup,
+} from '@/components/field-variants/form'
 
 import { Code, Eye, Files } from 'lucide-react'
-import {
-  generateZodSchema,
-  generateFormCode,
-  generateDefaultValues,
-  generateFormCodeForLibrary,
-} from '@/screens/generate-code-parts'
-import { formatJSXCode } from '@/lib/utils'
+import { generateFormCode, type FormLibrary } from '@/lib/form-code'
+import { formatCode } from '@/lib/format-code'
 import { VscJson } from 'react-icons/vsc'
 import { SiReacthookform, SiReactquery } from 'react-icons/si'
-import { FaReact } from 'react-icons/fa'
-
-export type FormFieldOrGroup = FormFieldType | FormFieldType[]
 
 export type FormPreviewProps = {
   formFields: FormFieldOrGroup[]
@@ -42,82 +38,54 @@ export type FormPreviewProps = {
   onLibraryChange: (library: FormLibrary) => void
 }
 
-const renderFormFields = (fields: FormFieldOrGroup[], form: any) => {
-  return fields.map((fieldOrGroup, index) => {
-    if (Array.isArray(fieldOrGroup)) {
-      // Calculate column span based on number of fields in the group
-      const getColSpan = (totalFields: number) => {
-        switch (totalFields) {
-          case 2:
-            return 6 // Two columns
-          case 3:
-            return 4 // Three columns
-          default:
-            return 12 // Single column or fallback
-        }
-      }
+const COL_SPAN: Record<number, string> = { 2: 'col-span-6', 3: 'col-span-4' }
 
-      return (
-        <div key={index} className="grid grid-cols-12 gap-4">
-          {fieldOrGroup.map((field, subIndex) => (
-            <FormField
-              key={field.name}
-              control={form.control}
-              name={field.name}
-              render={({ field: formField }) => (
-                <FormItem
-                  className={`col-span-${getColSpan(fieldOrGroup.length)}`}
-                >
-                  <FormControl>
-                    {React.cloneElement(
-                      renderFormField(field, form) as React.ReactElement,
-                      {
-                        ...formField,
-                      },
-                    )}
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          ))}
-        </div>
-      )
-    } else {
-      return (
-        <FormField
-          key={index}
-          control={form.control}
-          name={fieldOrGroup.name}
-          render={({ field: formField }) => (
-            <FormItem className="col-span-12">
-              <FormControl>
-                {React.cloneElement(
-                  renderFormField(fieldOrGroup, form) as React.ReactElement,
-                  {
-                    ...formField,
-                  },
-                )}
-              </FormControl>
-            </FormItem>
-          )}
-        />
-      )
-    }
-  })
+function FieldPreview({ field, control }: { field: FormFieldType; control: Control }) {
+  const { Control: VariantControl } = getFieldVariant(field.variant)
+  const id = `preview-${field.name}`
+  return (
+    <Controller
+      name={field.name}
+      control={control}
+      render={({ field: bound, fieldState }) => (
+        <FieldShell field={field} id={id} invalid={fieldState.invalid} error={fieldState.error}>
+          <VariantControl
+            field={field}
+            id={id}
+            value={bound.value}
+            onChange={bound.onChange}
+            onBlur={bound.onBlur}
+            invalid={fieldState.invalid}
+          />
+        </FieldShell>
+      )}
+    />
+  )
 }
 
+const renderFormFields = (fields: FormFieldOrGroup[], control: Control) =>
+  fields.map((fieldOrGroup, index) =>
+    Array.isArray(fieldOrGroup) ? (
+      <div key={index} className="grid grid-cols-12 gap-4">
+        {fieldOrGroup.map((field) => (
+          <div key={field.name} className={COL_SPAN[fieldOrGroup.length] ?? 'col-span-12'}>
+            <FieldPreview field={field} control={control} />
+          </div>
+        ))}
+      </div>
+    ) : (
+      <FieldPreview key={fieldOrGroup.name} field={fieldOrGroup} control={control} />
+    ),
+  )
+
 export const FormPreview: React.FC<FormPreviewProps> = ({
   formFields,
   selectedLibrary,
   onLibraryChange,
 }) => {
-  const formSchema = generateZodSchema(formFields)
-
-  const defaultVals = generateDefaultValues(formFields)
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: defaultVals,
+  const form = useForm({
+    resolver: zodResolver(buildFormSchema(formFields)),
+    defaultValues: formDefaultValues(formFields),
   })
 
   function onSubmit(data: any) {
@@ -133,8 +101,20 @@ export const FormPreview: React.FC<FormPreviewProps> = ({
     }
   }
 
-  const generatedCode = generateFormCodeForLibrary(formFields, selectedLibrary)
-  const formattedCode = formatJSXCode(generatedCode)
+  const generatedCode = React.useMemo(
+    () => generateFormCode(formFields, selectedLibrary),
+    [formFields, selectedLibrary],
+  )
+  const [formattedCode, setFormattedCode] = React.useState(generatedCode)
+  React.useEffect(() => {
+    let current = true
+    formatCode(generatedCode)
+      .then((code) => current && setFormattedCode(code))
+      .catch(() => current && setFormattedCode(generatedCode))
+    return () => {
+      current = false
+    }
+  }, [generatedCode])
 
   return (
     <div className="w-full h-full col-span-1 rounded-xl flex justify-center">
@@ -162,7 +142,7 @@ export const FormPreview: React.FC<FormPreviewProps> = ({
 
           <Select
             value={selectedLibrary}
-            onValueChange={(value) => onLibraryChange(value as FormLibrary)}
+            onValueChange={(value) => value && onLibraryChange(value as FormLibrary)}
           >
             <SelectTrigger className="w-auto px-2 gap-2">
               <SelectValue placeholder="Select library">
@@ -172,9 +152,6 @@ export const FormPreview: React.FC<FormPreviewProps> = ({
                 {selectedLibrary === 'tanstack-form' && (
                   <SiReactquery className="size-5" />
                 )}
-                {selectedLibrary === 'server-actions' && (
-                  <FaReact className="size-5 text-blue-500" />
-                )}
               </SelectValue>
             </SelectTrigger>
             <SelectContent>
@@ -192,12 +169,6 @@ export const FormPreview: React.FC<FormPreviewProps> = ({
                     <span>TanStack Form</span>
                   </div>
                 </SelectItem>
-                <SelectItem value="server-actions" disabled>
-                  <div className="flex items-center gap-2">
-                    <FaReact className="size-4 text-blue-500" />
-                    <span>Server Actions (Coming Soon)</span>
-                  </div>
-                </SelectItem>
               </SelectGroup>
             </SelectContent>
           </Select>
@@ -209,15 +180,14 @@ export const FormPreview: React.FC<FormPreviewProps> = ({
           <If
             condition={formFields.length > 0}
             render={() => (
-              <Form {...form}>
-                <form
-                  onSubmit={form.handleSubmit(onSubmit)}
-                  className="space-y-4 py-5 max-w-lg"
-                >
-                  {renderFormFields(formFields, form)}
-                  <Button type="submit">Submit</Button>
-                </form>
-              </Form>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="py-5 max-w-lg">
+                <FieldGroup>
+                  {renderFormFields(formFields, form.control)}
+                  <Button type="submit" className="w-fit">
+                    Submit
+                  </Button>
+                </FieldGroup>
+              </form>
             )}
             otherwise={() => (
               <div className="h-[50vh] flex justify-center items-center">
diff --git a/screens/form-wrapper/index.tsx b/screens/form-wrapper/index.tsx
deleted file mode 100644
index d088ae0..0000000
--- a/screens/form-wrapper/index.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from 'react'
-import {
-  useForm,
-  UseFormReturn,
-  FieldValues,
-  DefaultValues,
-  Path,
-} from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { z } from 'zod'
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-} from '@/components/ui/form'
-import { isNotEmpty } from '@/lib/utils'
-
-interface FormWrapperProps<TFieldValues extends FieldValues> {
-  schema: z.ZodType<TFieldValues, TFieldValues>
-  defaultValues: DefaultValues<TFieldValues>
-  onSubmit: (values: TFieldValues) => void
-  children: (form: UseFormReturn<TFieldValues>) => React.ReactNode
-}
-
-export function FormWrapper<TFieldValues extends FieldValues>({
-  schema,
-  defaultValues,
-  onSubmit,
-  children,
-}: FormWrapperProps<TFieldValues>) {
-  const form = useForm<TFieldValues>({
-    resolver: zodResolver(schema),
-    defaultValues,
-  })
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>{children(form)}</form>
-    </Form>
-  )
-}
-
-interface FormFieldWrapperProps<TFieldValues extends FieldValues> {
-  form: UseFormReturn<TFieldValues>
-  name: keyof TFieldValues
-  label: string
-  description?: string
-  children: React.ReactNode
-}
-
-export function FormFieldWrapper<TFieldValues extends FieldValues>({
-  form,
-  name,
-  label,
-  description,
-  children,
-}: FormFieldWrapperProps<TFieldValues>) {
-  return (
-    <FormField
-      control={form.control}
-      name={name as Path<TFieldValues>}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>{label}</FormLabel>
-          <FormControl>
-            {React.cloneElement(children as React.ReactElement, { ...field })}
-          </FormControl>
-          {isNotEmpty(description) && (
-            <FormDescription>{description}</FormDescription>
-          )}
-          <FormMessage />
-        </FormItem>
-      )}
-    />
-  )
-}
diff --git a/screens/generate-code-field/index.tsx b/screens/generate-code-field/index.tsx
deleted file mode 100644
index 4ce3a19..0000000
--- a/screens/generate-code-field/index.tsx
+++ /dev/null
@@ -1,654 +0,0 @@
-import { FormFieldType } from '@/types'
-
-export const generateCodeSnippet = (field: FormFieldType) => {
-  switch (field.variant) {
-    case 'Checkbox':
-      return `<FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-              <FormControl>
-                <Checkbox
-                  checked={field.value}
-                  onCheckedChange={field.onChange}
-                  ${field.disabled ? 'disabled' : ''}
-                />
-              </FormControl>
-              <div className="space-y-1 leading-none">
-                <FormLabel>${field.label}</FormLabel>
-                ${
-                  field.description &&
-                  `<FormDescription>${field.description}</FormDescription>`
-                }
-                <FormMessage />
-              </div>
-            </FormItem>
-          )}
-        />`
-    case 'Combobox':
-      return `<FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem className="flex flex-col">
-              <FormLabel>${field.label}</FormLabel>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <FormControl>
-                    <Button
-                      variant="outline"
-                      role="combobox"
-                      className={cn(
-                        "w-[200px] justify-between",
-                        !field.value && "text-muted-foreground"
-                      )}
-                      ${field.disabled ? 'disabled' : ''}
-                    >
-                      {field.value
-                        ? languages.find(
-                            (language) => language.value === field.value
-                          )?.label
-                        : "Select language"}
-                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                    </Button>
-                  </FormControl>
-                </PopoverTrigger>
-                <PopoverContent className="w-[200px] p-0">
-                  <Command>
-                    <CommandInput placeholder="Search language..." />
-                    <CommandList>
-                      <CommandEmpty>No language found.</CommandEmpty>
-                      <CommandGroup>
-                        {languages.map((language) => (
-                          <CommandItem
-                            value={language.label}
-                            key={language.value}
-                            onSelect={() => {
-                              form.setValue("${field.name}", language.value);
-                            }}
-                          >
-                            <Check
-                              className={cn(
-                                "mr-2 h-4 w-4",
-                                language.value === field.value
-                                  ? "opacity-100"
-                                  : "opacity-0"
-                              )}
-                            />
-                            {language.label}
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-              <FormMessage />
-            </FormItem>
-          )}
-        />`
-    case 'Date Picker':
-      return `
-      <FormField
-      control={form.control}
-      name="${field.name}"
-      render={({ field }) => (
-        <FormItem className="flex flex-col">
-          <FormLabel>${field.label}</FormLabel>
-          <Popover>
-            <PopoverTrigger asChild>
-              <FormControl>
-                <Button
-                  variant={"outline"}
-                  className={cn(
-                    "w-[240px] pl-3 text-left font-normal",
-                    !field.value && "text-muted-foreground"
-                  )}
-                >
-                  {field.value ? (
-                    format(field.value, "PPP")
-                  ) : (
-                    <span>Pick a date</span>
-                  )}
-                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                </Button>
-              </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-              <Calendar
-                mode="single"
-                selected={field.value}
-                onSelect={field.onChange}
-                initialFocus
-              />
-            </PopoverContent>
-          </Popover>
-       ${
-         field.description &&
-         `<FormDescription>${field.description}</FormDescription>`
-       }
-          <FormMessage />
-        </FormItem>
-      )}
-    />`
-    case 'Datetime Picker':
-      return `
-      <FormField
-      control={form.control}
-      name="${field.name}"
-      render={({ field }) => (
-        <FormItem className="flex flex-col">
-          <FormLabel>${field.label}</FormLabel>
-          <DatetimePicker
-            {...field}
-            format={[
-              ["months", "days", "years"],
-              ["hours", "minutes", "am/pm"],
-            ]}
-          />
-       ${
-         field.description &&
-         `<FormDescription>${field.description}</FormDescription>`
-       }
-          <FormMessage />
-        </FormItem>
-      )}
-    />`
-    case 'Input':
-      return `
-        <FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>${field.label}</FormLabel>
-              <FormControl>
-                <Input 
-                placeholder="${field.placeholder}"
-                ${field.disabled ? 'disabled' : ''}
-                type="${field.type}"
-                {...field} />
-              </FormControl>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-              <FormMessage />
-            </FormItem>
-          )}
-        />`
-    case 'Input OTP':
-      return `
-       <FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>${field.label}</FormLabel>
-              <FormControl>
-                <InputOTP maxLength={6} {...field}>
-                  <InputOTPGroup>
-                    <InputOTPSlot index={0} />
-                    <InputOTPSlot index={1} />
-                    <InputOTPSlot index={2} />
-                  </InputOTPGroup>
-                  <InputOTPSeparator />
-                  <InputOTPGroup>
-                    <InputOTPSlot index={3} />
-                    <InputOTPSlot index={4} />
-                    <InputOTPSlot index={5} />
-                  </InputOTPGroup>
-                </InputOTP>
-              </FormControl>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-              <FormMessage />
-            </FormItem>
-          )}
-        />`
-    case 'Location Input':
-      return `
-           <FormField
-              control={form.control}
-              name="${field.name}"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>${field.label}</FormLabel>
-                  <FormControl>
-                  <LocationSelector
-                    onCountryChange={(country) => {
-                      setCountryName(country?.name || '')
-                      form.setValue(field.name, [country?.name || '', stateName || ''])
-                    }}
-                    onStateChange={(state) => {
-                      setStateName(state?.name || '')
-                      form.setValue(field.name, [form.getValues(field.name)[0] || '', state?.name || ''])
-                    }}
-                  />
-                  </FormControl>
-                  ${
-                    field.description &&
-                    `<FormDescription>${field.description}</FormDescription>`
-                  }
-                  <FormMessage />
-                </FormItem>
-              )}
-            />`
-    case 'Multi Select':
-      return `
-           <FormField
-              control={form.control}
-              name="${field.name}"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>${field.label}</FormLabel>
-                  <FormControl>
-                    <MultiSelector
-                      values={field.value}
-                      onValuesChange={field.onChange}
-                      loop
-                      className="max-w-xs"
-                    >
-                      <MultiSelectorTrigger>
-                        <MultiSelectorInput placeholder="Select languages" />
-                      </MultiSelectorTrigger>
-                      <MultiSelectorContent>
-                      <MultiSelectorList>
-                        <MultiSelectorItem value={"React"}>React</MultiSelectorItem>
-                        <MultiSelectorItem value={"Vue"}>Vue</MultiSelectorItem>
-                        <MultiSelectorItem value={"Svelte"}>Svelte</MultiSelectorItem>
-                      </MultiSelectorList>
-                      </MultiSelectorContent>
-                    </MultiSelector>
-                  </FormControl>
-                  ${
-                    field.description &&
-                    `<FormDescription>${field.description}</FormDescription>`
-                  }
-                  <FormMessage />
-                </FormItem>
-              )}
-            />`
-    case 'Select':
-      return `
-        <FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>${field.label}</FormLabel>
-              <Select onValueChange={field.onChange} defaultValue={field.value}>
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="${field.placeholder}" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectItem value="m@example.com">m@example.com</SelectItem>
-                  <SelectItem value="m@google.com">m@google.com</SelectItem>
-                  <SelectItem value="m@support.com">m@support.com</SelectItem>
-                </SelectContent>
-              </Select>
-                ${
-                  field.description &&
-                  `<FormDescription>${field.description}</FormDescription>`
-                }
-              <FormMessage />
-            </FormItem>
-          )}
-        />`
-    case 'Slider':
-      return `
-            <FormField
-              control={form.control}
-              name="${field.name}"
-              render={({ field: { value, onChange } }) => (
-              <FormItem>
-                <FormLabel>Price - {value}</FormLabel>
-                <FormControl>
-                  <Slider
-                    min=${field.min ? field.min : '{0}'}
-                    max=${field.max ? field.max : '{100}'}
-                    step=${field.step ? field.step : '{5}'}
-                    defaultValue={[5]}
-                    onValueChange={(vals) => {
-                      onChange(vals[0]);
-                    }}
-                  />
-                </FormControl>
-                ${
-                  field.description &&
-                  `<FormDescription>${field.description}</FormDescription>`
-                }
-                <FormMessage />
-              </FormItem>
-              )}
-            />`
-    case 'Signature Input':
-      return `<FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-          <FormItem>
-            <FormLabel>${field.label}</FormLabel>
-            <FormControl>
-            <SignatureInput
-              canvasRef={canvasRef}
-              onSignatureChange={field.onChange}
-            />
-            </FormControl>
-            ${
-              field.description &&
-              `<FormDescription>${field.description}</FormDescription>`
-            }
-            <FormMessage />
-          </FormItem>
-          )}
-        />`
-    case 'Signature Pad':
-      return `<FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-          <FormItem>
-            <FormLabel>${field.label}</FormLabel>
-            <FormControl>
-            <SignaturePad
-              value={field.value}
-              onChange={field.onChange}
-            />
-            </FormControl>
-            ${
-              field.description &&
-              `<FormDescription>${field.description}</FormDescription>`
-            }
-            <FormMessage />
-          </FormItem>
-          )}
-        />`
-    case 'Smart Datetime Input':
-      return `
-            <FormField
-              control={form.control}
-              name="${field.name}"
-              render={({ field }) => (
-              <FormItem>
-                <FormLabel>${field.label}</FormLabel>
-                <FormControl>
-                  <SmartDatetimeInput
-                    value={field.value}
-                    onValueChange={field.onChange}
-                    placeholder="e.g. Tomorrow morning 9am"
-                    ${field.locale ? `locale={${field.locale}}` : ''}
-                    ${field.hour12 ? `hour12` : ''}
-                  />
-                </FormControl>
-                ${
-                  field.description &&
-                  `<FormDescription>${field.description}</FormDescription>`
-                }
-                <FormMessage />
-              </FormItem>
-              )}
-            />`
-    case 'Switch':
-      return `
-          <FormField
-              control={form.control}
-              name="${field.name}"
-              render={({ field }) => (
-                <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                  <div className="space-y-0.5">
-                    <FormLabel>${field.label}</FormLabel>
-                    ${
-                      field.description &&
-                      `<FormDescription>${field.description}</FormDescription>`
-                    }
-                  </div>
-                  <FormControl>
-                    <Switch
-                      checked={field.value}
-                      onCheckedChange={field.onChange}
-                      disabled
-                      aria-readonly
-                    />
-                  </FormControl>
-                </FormItem>
-              )}
-            />`
-    case 'Tags Input':
-      return `
-        <FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>${field.label}</FormLabel>
-              <FormControl>
-                <TagsInput
-                  value={field.value}
-                  onValueChange={field.onChange}
-                  placeholder="Enter your tags"
-                />
-              </FormControl>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-              <FormMessage />
-            </FormItem>
-          )}
-        />`
-    case 'Textarea':
-      return `
-        <FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>${field.label}</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="${field.placeholder}"
-                  className="resize-none"
-                  {...field}
-                />
-              </FormControl>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-              <FormMessage />
-            </FormItem>
-          )}
-        />`
-    case 'File Input':
-      return `
-            <FormField
-              control={form.control}
-              name="${field.name}"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>${field.label}</FormLabel>
-                  <FormControl>
-                    <FileUploader
-                      value={files}
-                      onValueChange={setFiles}
-                      dropzoneOptions={dropZoneConfig}
-                      className="relative bg-background rounded-lg p-2"
-                    >
-                      <FileInput
-                        id="fileInput"
-                        className="outline-dashed outline-1 outline-slate-500"
-                      >
-                        <div className="flex items-center justify-center flex-col p-8 w-full ">
-                          <CloudUpload className='text-gray-500 w-10 h-10' />
-                          <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
-                            <span className="font-semibold">Click to upload</span>
-                            &nbsp; or drag and drop
-                          </p>
-                          <p className="text-xs text-gray-500 dark:text-gray-400">
-                            SVG, PNG, JPG or GIF
-                          </p>
-                        </div>
-                      </FileInput>
-                      <FileUploaderContent>
-                        {files &&
-                          files.length > 0 &&
-                          files.map((file, i) => (
-                            <FileUploaderItem key={i} index={i}>
-                              <Paperclip className="h-4 w-4 stroke-current" />
-                              <span>{file.name}</span>
-                            </FileUploaderItem>
-                          ))}
-                      </FileUploaderContent>
-                    </FileUploader>
-                  </FormControl>
-                  ${field.description ? `<FormDescription>${field.description}</FormDescription>` : ''}
-                  <FormMessage />
-                </FormItem>
-              )}
-            />`
-    case 'Password':
-      return `
-        <FormField
-          control={form.control}
-          name="${field.name}"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>${field.label}</FormLabel>
-              <FormControl>
-                <PasswordInput placeholder="${field.placeholder}" {...field} />
-              </FormControl>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        `
-    case 'Phone':
-      return `
-          <FormField
-            control={form.control}
-            name="${field.name}"
-            render={({ field }) => (
-              <FormItem className="flex flex-col items-start">
-              <FormLabel>${field.label}</FormLabel>
-                <FormControl className="w-full">
-                  <PhoneInput
-                    placeholder="${field.placeholder}"
-                    {...field}
-                    defaultCountry="TR"
-                  />
-                </FormControl>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-            `
-    case 'Rating':
-      return `
-          <FormField
-            control={form.control}
-            name="${field.name}"
-            render={({ field }) => (
-              <FormItem className="flex flex-col items-start">
-              <FormLabel>${field.label}</FormLabel>
-                <FormControl className="w-full">
-                  <Rating {...field} />
-                </FormControl>
-              ${
-                field.description &&
-                `<FormDescription>${field.description}</FormDescription>`
-              }
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-            `
-    case 'RadioGroup':
-      return `
-          <FormField
-            control={form.control}
-            name="${field.name}"
-            render={({ field }) => (
-              <FormItem className="space-y-3">
-                <FormLabel>${field.label}</FormLabel>
-                <FormControl>
-                  <RadioGroup
-                    onValueChange={field.onChange}
-                    className="flex flex-col space-y-1"
-                  >
-                    {[
-                      ["Male", "male"],
-                      ["Female", "female"],
-                      ["Other", "other"]
-                    ].map((option, index) => (
-                      <FormItem className="flex items-center space-x-3 space-y-0" key={index}>
-                        <FormControl>
-                          <RadioGroupItem value={option[1]} />
-                        </FormControl>
-                        <FormLabel className="font-normal">
-                          {option[0]}
-                        </FormLabel>
-                      </FormItem>
-                    ))}
-                  </RadioGroup>
-                </FormControl>
-                ${
-                  field.description &&
-                  `<FormDescription>${field.description}</FormDescription>`
-                }
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        `
-    case 'Credit Card':
-      return `
-          <FormField
-            control={form.control}
-            name="${field.name}"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>${field.label}</FormLabel>
-                <FormControl>
-                  <CreditCard
-                    value={creditCard}
-                    onChange={(value) => {
-                      setCreditCard(value)
-                      field.onChange(JSON.stringify(value))
-                    }}
-                  />
-                </FormControl>
-                ${
-                  field.description &&
-                  `<FormDescription>${field.description}</FormDescription>`
-                }
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-        `
-    default:
-      return null
-  }
-}
-
-export default function GenerateCodeFields() {
-  return <div>index</div>
-}
diff --git a/screens/generate-code-parts/bring-your-own.tsx b/screens/generate-code-parts/bring-your-own.tsx
deleted file mode 100644
index 9f7e2bd..0000000
--- a/screens/generate-code-parts/bring-your-own.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { FormFieldType } from '@/types'
-import { generateCodeSnippetWithField } from './field-snippets'
-
-type FormFieldOrGroup = FormFieldType | FormFieldType[]
-
-export const generateBringYourOwnCode = (formFields: FormFieldOrGroup[]): string => {
-  const fieldImports = new Set<string>()
-  
-  formFields.flat().forEach((field) => {
-    switch (field.variant) {
-      case 'Input':
-        fieldImports.add('Input')
-        break
-      case 'Textarea':
-        fieldImports.add('Textarea')
-        break
-      case 'Checkbox':
-        fieldImports.add('Checkbox')
-        break
-      case 'Select':
-        fieldImports.add('Select')
-        fieldImports.add('SelectContent')
-        fieldImports.add('SelectItem')
-        fieldImports.add('SelectTrigger')
-        fieldImports.add('SelectValue')
-        break
-      case 'Switch':
-        fieldImports.add('Switch')
-        break
-      case 'Slider':
-        fieldImports.add('Slider')
-        break
-      case 'Radio':
-        fieldImports.add('RadioGroup')
-        fieldImports.add('RadioGroupItem')
-        fieldImports.add('Label')
-        break
-    }
-  })
-
-  const componentImports = Array.from(fieldImports).map(comp => {
-    if (['Select', 'SelectContent', 'SelectItem', 'SelectTrigger', 'SelectValue'].includes(comp)) {
-      return null
-    }
-    if (['RadioGroup', 'RadioGroupItem'].includes(comp)) {
-      return null
-    }
-    return `import { ${comp} } from "@/components/ui/${comp.toLowerCase()}"`
-  }).filter(Boolean)
-
-  if (fieldImports.has('Select')) {
-    componentImports.push('import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"')
-  }
-  if (fieldImports.has('RadioGroup')) {
-    componentImports.push('import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"')
-    componentImports.push('import { Label } from "@/components/ui/label"')
-  }
-
-  const imports = `"use client"
-import { useState } from "react"
-import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"
-import { Button } from "@/components/ui/button"
-${componentImports.join('\n')}`
-
-  const renderFields = (fields: FormFieldOrGroup[]) => {
-    return fields
-      .map((fieldOrGroup) => {
-        if (Array.isArray(fieldOrGroup)) {
-          const colSpan = fieldOrGroup.length === 2 ? 6 : 4
-          return `
-        <div className="grid grid-cols-12 gap-4">
-          ${fieldOrGroup
-            .map(
-              (field) => `
-          <div className="col-span-${colSpan}">
-            ${generateCodeSnippetWithField(field, 'bring-your-own')}
-          </div>
-          `,
-            )
-            .join('')}
-        </div>`
-        } else {
-          return generateCodeSnippetWithField(fieldOrGroup, 'bring-your-own')
-        }
-      })
-      .join('\n        ')
-  }
-
-  const component = `
-export default function MyForm() {
-  const [formData, setFormData] = useState({
-${formFields.flat().map(field => `    ${field.name}: ${field.variant === 'Checkbox' || field.variant === 'Switch' ? 'false' : '""'},`).join('\n')}
-  })
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    console.log(formData)
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-6 max-w-3xl mx-auto py-10">
-        ${renderFields(formFields)}
-        <Button type="submit">Submit</Button>
-    </form>
-  )
-}
-  `
-  return imports + '\n\n' + component
-}
diff --git a/screens/generate-code-parts/field-snippets.tsx b/screens/generate-code-parts/field-snippets.tsx
deleted file mode 100644
index 5368846..0000000
--- a/screens/generate-code-parts/field-snippets.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-import { FormFieldType } from '@/types'
-import { FormLibrary, FORM_LIBRARIES } from '@/constants'
-
-export const generateCodeSnippetWithField = (field: FormFieldType, library: FormLibrary): string => {
-  switch (field.variant) {
-    case 'Input':
-      return generateInputWithField(field, library)
-    case 'Textarea':
-      return generateTextareaWithField(field, library)
-    case 'Checkbox':
-      return generateCheckboxWithField(field, library)
-    case 'Select':
-      return generateSelectWithField(field, library)
-    case 'Switch':
-      return generateSwitchWithField(field, library)
-    case 'Slider':
-      return generateSliderWithField(field, library)
-    case 'Radio':
-      return generateRadioWithField(field, library)
-    default:
-      return generateDefaultFieldWithField(field, library)
-  }
-}
-
-const generateInputWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Input 
-    id="${field.name}" 
-    placeholder="${field.placeholder || ''}"
-    ${field.disabled ? 'disabled' : ''}
-    {...form.register("${field.name}")}
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-</Field>`
-  }
-  
-  return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Input 
-    id="${field.name}" 
-    name="${field.name}" 
-    placeholder="${field.placeholder || ''}"
-    ${field.disabled ? 'disabled' : ''}
-    ${library === FORM_LIBRARIES.TANSTACK_FORM ? `value={form.getFieldValue("${field.name}")}
-    onChange={(e) => form.setFieldValue("${field.name}", e.target.value)}` : ''}
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError />
-</Field>`
-}
-
-const generateTextareaWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Textarea 
-    id="${field.name}" 
-    placeholder="${field.placeholder || ''}"
-    ${field.disabled ? 'disabled' : ''}
-    {...form.register("${field.name}")}
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-</Field>`
-  }
-
-  return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Textarea 
-    id="${field.name}" 
-    name="${field.name}" 
-    placeholder="${field.placeholder || ''}"
-    ${field.disabled ? 'disabled' : ''}
-    ${library === FORM_LIBRARIES.TANSTACK_FORM ? `value={form.getFieldValue("${field.name}")}
-    onChange={(e) => form.setFieldValue("${field.name}", e.target.value)}` : ''}
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError />
-</Field>`
-}
-
-const generateCheckboxWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-  <Checkbox 
-    id="${field.name}"
-    ${field.disabled ? 'disabled' : ''}
-    {...form.register("${field.name}")}
-  />
-  <div className="space-y-1 leading-none">
-    <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-    ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-    <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-  </div>
-</Field>`
-  }
-
-  return `<Field className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
-  <Checkbox 
-    id="${field.name}" 
-    name="${field.name}"
-    ${field.disabled ? 'disabled' : ''}
-    ${library === FORM_LIBRARIES.TANSTACK_FORM ? `checked={form.getFieldValue("${field.name}")}
-    onCheckedChange={(checked) => form.setFieldValue("${field.name}", checked)}` : ''}
-  />
-  <div className="space-y-1 leading-none">
-    <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-    ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-    <FieldError />
-  </div>
-</Field>`
-}
-
-const generateSelectWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Select 
-    ${field.disabled ? 'disabled' : ''}
-    {...form.register("${field.name}")}
-  >
-    <SelectTrigger id="${field.name}">
-      <SelectValue placeholder="${field.placeholder || 'Select an option'}" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="option1">Option 1</SelectItem>
-      <SelectItem value="option2">Option 2</SelectItem>
-      <SelectItem value="option3">Option 3</SelectItem>
-    </SelectContent>
-  </Select>
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-</Field>`
-  }
-
-  return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Select 
-    name="${field.name}"
-    ${field.disabled ? 'disabled' : ''}
-    ${library === FORM_LIBRARIES.TANSTACK_FORM ? `value={form.getFieldValue("${field.name}")}
-    onValueChange={(value) => form.setFieldValue("${field.name}", value)}` : ''}
-  >
-    <SelectTrigger id="${field.name}">
-      <SelectValue placeholder="${field.placeholder || 'Select an option'}" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="option1">Option 1</SelectItem>
-      <SelectItem value="option2">Option 2</SelectItem>
-      <SelectItem value="option3">Option 3</SelectItem>
-    </SelectContent>
-  </Select>
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError />
-</Field>`
-}
-
-const generateSwitchWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field className="flex flex-row items-center justify-between rounded-lg border p-4">
-  <div className="space-y-0.5">
-    <FieldLabel htmlFor="${field.name}" className="text-base">${field.label}</FieldLabel>
-    ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  </div>
-  <Switch 
-    id="${field.name}"
-    ${field.disabled ? 'disabled' : ''}
-    {...form.register("${field.name}")}
-  />
-  <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-</Field>`
-  }
-
-  return `<Field className="flex flex-row items-center justify-between rounded-lg border p-4">
-  <div className="space-y-0.5">
-    <FieldLabel htmlFor="${field.name}" className="text-base">${field.label}</FieldLabel>
-    ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  </div>
-  <Switch 
-    id="${field.name}" 
-    name="${field.name}"
-    ${field.disabled ? 'disabled' : ''}
-    ${library === FORM_LIBRARIES.TANSTACK_FORM ? `checked={form.getFieldValue("${field.name}")}
-    onCheckedChange={(checked) => form.setFieldValue("${field.name}", checked)}` : ''}
-  />
-  <FieldError />
-</Field>`
-}
-
-const generateSliderWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Slider 
-    id="${field.name}"
-    min={${field.min || 0}}
-    max={${field.max || 100}}
-    step={${field.step || 1}}
-    ${field.disabled ? 'disabled' : ''}
-    {...form.register("${field.name}")}
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-</Field>`
-  }
-
-  return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Slider 
-    id="${field.name}"
-    name="${field.name}"
-    min={${field.min || 0}}
-    max={${field.max || 100}}
-    step={${field.step || 1}}
-    ${field.disabled ? 'disabled' : ''}
-    ${library === FORM_LIBRARIES.TANSTACK_FORM ? `value={[form.getFieldValue("${field.name}")]}
-    onValueChange={(vals) => form.setFieldValue("${field.name}", vals[0])}` : ''}
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError />
-</Field>`
-}
-
-const generateRadioWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field className="space-y-3">
-  <FieldLabel>${field.label}</FieldLabel>
-  <RadioGroup 
-    ${field.disabled ? 'disabled' : ''}
-    {...form.register("${field.name}")}
-  >
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option1" id="${field.name}_option1" />
-      <Label htmlFor="${field.name}_option1">Option 1</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option2" id="${field.name}_option2" />
-      <Label htmlFor="${field.name}_option2">Option 2</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option3" id="${field.name}_option3" />
-      <Label htmlFor="${field.name}_option3">Option 3</Label>
-    </div>
-  </RadioGroup>
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-</Field>`
-  }
-
-  return `<Field className="space-y-3">
-  <FieldLabel>${field.label}</FieldLabel>
-  <RadioGroup 
-    name="${field.name}"
-    ${field.disabled ? 'disabled' : ''}
-    ${library === FORM_LIBRARIES.TANSTACK_FORM ? `value={form.getFieldValue("${field.name}")}
-    onValueChange={(value) => form.setFieldValue("${field.name}", value)}` : ''}
-  >
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option1" id="${field.name}_option1" />
-      <Label htmlFor="${field.name}_option1">Option 1</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option2" id="${field.name}_option2" />
-      <Label htmlFor="${field.name}_option2">Option 2</Label>
-    </div>
-    <div className="flex items-center space-x-2">
-      <RadioGroupItem value="option3" id="${field.name}_option3" />
-      <Label htmlFor="${field.name}_option3">Option 3</Label>
-    </div>
-  </RadioGroup>
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError />
-</Field>`
-}
-
-const generateDefaultFieldWithField = (field: FormFieldType, library: FormLibrary): string => {
-  if (library === FORM_LIBRARIES.REACT_HOOK_FORM) {
-    return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Input 
-    id="${field.name}" 
-    placeholder="${field.placeholder || ''}"
-    {...form.register("${field.name}")}
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError>{form.formState.errors.${field.name}?.message}</FieldError>
-</Field>`
-  }
-
-  return `<Field>
-  <FieldLabel htmlFor="${field.name}">${field.label}</FieldLabel>
-  <Input 
-    id="${field.name}" 
-    name="${field.name}" 
-    placeholder="${field.placeholder || ''}"
-  />
-  ${field.description ? `<FieldDescription>${field.description}</FieldDescription>` : ''}
-  <FieldError />
-</Field>`
-}
diff --git a/screens/generate-code-parts/index.tsx b/screens/generate-code-parts/index.tsx
deleted file mode 100644
index d979087..0000000
--- a/screens/generate-code-parts/index.tsx
+++ /dev/null
@@ -1,565 +0,0 @@
-import { z, ZodTypeAny } from 'zod'
-import { FormFieldType } from '@/types'
-import { FormLibrary, FORM_LIBRARIES } from '@/constants'
-import { generateFormJsonSchema } from '@/lib/json-schema-generator'
-
-import { generateCodeSnippet } from '@/screens/generate-code-field'
-import { generateServerActionsCode } from './server-actions'
-import { generateReactHookFormCode } from './react-hook-form'
-import { generateTanStackFormCode } from './tanstack-form'
-import { generateBringYourOwnCode } from './bring-your-own'
-
-type FormFieldOrGroup = FormFieldType | FormFieldType[]
-
-export const generateZodSchema = (
-  formFields: FormFieldOrGroup[],
-): z.ZodObject<any> => {
-  const schemaObject: Record<string, z.ZodTypeAny> = {}
-
-  const processField = (field: FormFieldType): void => {
-    if (field.variant === 'Label') return
-
-    let fieldSchema: z.ZodTypeAny
-
-    switch (field.variant) {
-      case 'Checkbox':
-        if (field.required === true) {
-          fieldSchema = z.boolean().refine((value) => value === true, {
-            message: 'Required',
-          })
-        } else {
-          fieldSchema = z.boolean().default(true)
-        }
-        break
-      case 'Date Picker':
-        fieldSchema = z.coerce.date()
-        break
-      case 'Datetime Picker':
-        fieldSchema = z.coerce.date()
-        break
-      case 'Input':
-        if (field.type === 'email') {
-          fieldSchema = z.string().email()
-          break
-        } else if (field.type === 'number') {
-          fieldSchema = z.coerce.number()
-          break
-        } else {
-          fieldSchema = z.string().min(1, { message: 'Required' })
-          break
-        }
-      case 'Location Input':
-        fieldSchema = z.tuple([
-          z.string().min(1, { message: 'Country is required' }),
-          z.string().optional(),
-        ])
-        break
-      case 'Slider':
-        fieldSchema = z.coerce.number()
-        break
-      case 'Signature Input':
-        fieldSchema = z.string().min(1, { message: 'Signature is required' })
-        break
-      case 'Signature Pad':
-        fieldSchema = z.string().min(1, { message: 'Signature is required' })
-        break
-      case 'Smart Datetime Input':
-        fieldSchema = z.union([z.string(), z.date()])
-        break
-      case 'Number':
-        fieldSchema = z.coerce.number()
-        break
-      case 'Switch':
-        fieldSchema = z.boolean()
-        break
-      case 'Tags Input':
-        fieldSchema = z
-          .array(z.string())
-          .min(1, { message: 'Please enter at least one item' })
-        break
-      case 'Multi Select':
-        fieldSchema = z
-          .array(z.string())
-          .min(1, { message: 'Please select at least one item' })
-          break
-      case 'Rating':
-        fieldSchema = z.coerce.number().min(1, { message: 'Rating is required' })
-        break
-      case 'Credit Card':
-        fieldSchema = z.string().min(1, { message: 'Credit card information is required' }).refine((value: string) => {
-          try {
-            const parsed = JSON.parse(value)
-            const isValid = !!(
-              parsed.cardholderName?.trim() && 
-              parsed.cardNumber?.trim() && 
-              parsed.expiryMonth?.trim() && 
-              parsed.expiryYear?.trim() && 
-              parsed.cvv?.trim()
-            )
-            return isValid
-          } catch {
-            return false
-          }
-        }, {
-          message: 'Please fill in all credit card fields',
-        })
-        break
-      default:
-        fieldSchema = z.string()
-    }
-
-    if (field.min !== undefined && 'min' in fieldSchema) {
-      fieldSchema = (fieldSchema as any).min(
-        field.min,
-        { message: `Must be at least ${field.min}` },
-      )
-    }
-    if (field.max !== undefined && 'max' in fieldSchema) {
-      fieldSchema = (fieldSchema as any).max(
-        field.max,
-        { message: `Must be at most ${field.max}` },
-      )
-    }
-
-    if (field.required !== true) {
-      fieldSchema = fieldSchema.optional()
-    }
-    // if field name contains - then i add quotes around it to fix zod schema generation issue
-    let fieldName = field.name
-    if (field.name.includes('-')) {
-      fieldName = `'${field.name}'`
-    }
-    schemaObject[fieldName] = fieldSchema as ZodTypeAny // Ensure fieldSchema is of type ZodTypeAny
-  }
-
-  formFields.flat().forEach(processField)
-
-  return z.object(schemaObject)
-}
-
-export const zodSchemaToString = (schema: z.ZodTypeAny): string => {
-  if (schema instanceof z.ZodDefault) {
-    const defaultValue = (schema._def as any).defaultValue
-    return `${zodSchemaToString(schema._def.innerType as z.ZodTypeAny)}.default(${JSON.stringify(typeof defaultValue === 'function' ? defaultValue() : defaultValue)})`
-  }
-
-  if (schema instanceof z.ZodBoolean) {
-    return `z.boolean()`
-  }
-
-  if (schema instanceof z.ZodNumber) {
-    let result = 'z.number()'
-    if ('checks' in schema._def && schema._def.checks) {
-      schema._def.checks.forEach((check: any) => {
-        if (check.kind === 'min') {
-          result += `.min(${check.value})`
-        } else if (check.kind === 'max') {
-          result += `.max(${check.value})`
-        }
-      })
-    }
-    return result
-  }
-
-  if (schema instanceof z.ZodString) {
-    let result = 'z.string()'
-    if ('checks' in schema._def && schema._def.checks) {
-      schema._def.checks.forEach((check: any) => {
-        if (check.kind === 'min') {
-          result += `.min(${check.value})`
-        } else if (check.kind === 'max') {
-          result += `.max(${check.value})`
-        }
-      })
-    }
-    return result
-  }
-
-  if (schema instanceof z.ZodDate) {
-    return `z.coerce.date()`
-  }
-
-  if (schema instanceof z.ZodArray) {
-    return `z.array(${zodSchemaToString(schema.element as z.ZodTypeAny)}).min(1, { error: "Please select at least one item" })`
-  }
-
-  if (schema instanceof z.ZodTuple) {
-    return `z.tuple([${(schema._def.items as z.ZodTypeAny[]).map((item: z.ZodTypeAny) => zodSchemaToString(item)).join(', ')}])`
-  }
-
-  if (schema instanceof z.ZodObject) {
-    const shape = schema.shape
-    const shapeStrs = Object.entries(shape).map(
-      ([key, value]) => `${key}: ${zodSchemaToString(value as ZodTypeAny)}`,
-    )
-    return `z.object({
-  ${shapeStrs.join(',\n  ')}
-})`
-  }
-
-  if (schema instanceof z.ZodOptional) {
-    return `${zodSchemaToString(schema.unwrap() as z.ZodTypeAny)}.optional()`
-  }
-
-  return 'z.unknown()'
-}
-
-export const getZodSchemaString = (formFields: FormFieldOrGroup[]): string => {
-  const schema = generateZodSchema(formFields)
-  const schemaEntries = Object.entries(schema.shape)
-    .map(([key, value]) => {
-      return `  ${key}: ${zodSchemaToString(value as ZodTypeAny)}`
-    })
-    .join(',\n')
-
-  return `const formSchema = z.object({\n${schemaEntries}\n});`
-}
-
-export const generateImports = (
-  formFields: FormFieldOrGroup[],
-): Set<string> => {
-  const importSet = new Set([
-    '"use client"',
-    'import { useState } from "react"',
-    'import {toast} from "sonner"',
-    'import { useForm } from "react-hook-form"',
-    'import { zodResolver } from "@hookform/resolvers/zod"',
-    'import { z } from "zod"',
-    'import { cn } from "@/lib/utils"',
-    'import { Button } from "@/components/ui/button"',
-    'import {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from "@/components/ui/form"',
-  ])
-
-  const processField = (field: FormFieldType) => {
-    switch (field.variant) {
-      case 'Combobox':
-        importSet.add(
-          'import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from "@/components/ui/command"',
-        )
-        importSet.add(
-          'import { Popover, PopoverContent, PopoverTrigger,} from "@/components/ui/popover"',
-        )
-        importSet.add('import { Check, ChevronsUpDown } from "lucide-react"')
-        break
-      case 'Date Picker':
-        importSet.add('import { format } from "date-fns"')
-        importSet.add(
-          'import { Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover"',
-        )
-        importSet.add('import { Calendar } from "@/components/ui/calendar"')
-        importSet.add('import { Calendar as CalendarIcon } from "lucide-react"')
-        break
-      case 'Datetime Picker':
-        importSet.add(
-          'import { DatetimePicker } from "@/components/ui/datetime-picker"',
-        )
-        break
-      case 'Smart Datetime Input':
-        importSet.add(
-          'import { SmartDatetimeInput } from "@/components/ui/smart-datetime-input"',
-        )
-        field.locale &&
-          importSet.add(`import { ${field.locale} } from "date-fns/locale"`)
-        break
-      case 'File Input':
-        importSet.add('import { CloudUpload, Paperclip } from "lucide-react"')
-        importSet.add(
-          'import { FileInput, FileUploader, FileUploaderContent, FileUploaderItem } from "@/components/ui/file-upload"',
-        )
-        break
-      case 'Input OTP':
-        importSet.add(
-          'import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot} from "@/components/ui/input-otp"',
-        )
-        break
-      case 'Location Input':
-        importSet.add(
-          'import LocationSelector from "@/components/ui/location-input"',
-        )
-        break
-      case 'Select':
-        importSet.add(
-          'import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select"',
-        )
-        break
-      case 'Signature Input':
-        importSet.add('import { useRef } from "react"')
-        importSet.add(
-          "import SignatureInput from '@/components/ui/signature-input'",
-        )
-        break
-      case 'Signature Pad':
-        importSet.add('import { useState } from "react"')
-        importSet.add(
-          "import SignaturePad from '@/components/ui/signature-pad'",
-        )
-        break
-      case 'Tags Input':
-        importSet.add('import { TagsInput } from "@/components/ui/tags-input"')
-        break
-      case 'Multi Select':
-        importSet.add(
-          'import { MultiSelector, MultiSelectorContent, MultiSelectorInput, MultiSelectorItem, MultiSelectorList, MultiSelectorTrigger} from "@/components/ui/multi-select"',
-        )
-        break
-      case 'Password':
-        importSet.add(
-          'import { PasswordInput } from "@/components/ui/password-input"',
-        )
-        break
-      case 'Phone':
-        importSet.add(
-          'import { PhoneInput } from "@/components/ui/phone-input";',
-        )
-        break
-      case 'Credit Card':
-        importSet.add(
-          'import { CreditCard } from "@/components/ui/credit-card"',
-        )
-        break
-      default:
-        importSet.add(
-          `import { ${field.variant} } from "@/components/ui/${field.variant.toLowerCase()}"`,
-        )
-        break
-    }
-  }
-
-  formFields.flat().forEach(processField)
-
-  return importSet
-}
-
-export const generateConstants = (
-  formFields: FormFieldOrGroup[],
-): Set<string> => {
-  const constantSet: Set<string> = new Set()
-
-  formFields.flat().forEach((field) => {
-    if (field.variant === 'Combobox') {
-      constantSet.add(`const languages = [
-        { label: "English", value: "en" },
-        { label: "French", value: "fr" },
-        { label: "German", value: "de" },
-        { label: "Spanish", value: "es" },
-        { label: "Portuguese", value: "pt" },
-        { label: "Russian", value: "ru" },
-        { label: "Japanese", value: "ja" },
-        { label: "Korean", value: "ko" },
-        { label: "Chinese", value: "zh" },
-      ] as const;`)
-    } else if (field.variant === 'File Input') {
-      constantSet.add(`
-        const [files, setFiles] = useState<File[] | null>(null); 
-
-        const dropZoneConfig = {
-          maxFiles: 5,
-          maxSize: 1024 * 1024 * 4,
-          multiple: true,
-        };`)
-    } else if (field.variant === 'Location Input') {
-      constantSet.add(`
-        const [countryName, setCountryName] = useState<string>('')
-        const [stateName, setStateName] = useState<string>('')
-        `)
-    } else if (field.variant === 'Signature Input') {
-      constantSet.add(`const canvasRef = useRef<HTMLCanvasElement>(null)`)
-    } else if (field.variant === 'Signature Pad') {
-      constantSet.add(`const [signature, setSignature] = useState<string | null>(null)`)
-    } else if (field.variant === 'Credit Card') {
-      constantSet.add(`const [creditCard, setCreditCard] = useState({
-        cardholderName: '',
-        cardNumber: '',
-        expiryMonth: '',
-        expiryYear: '',
-        cvv: '',
-        cvvLabel: 'CVC' as const
-      })`)
-    }
-  })
-
-  return constantSet
-}
-
-// New function to generate defaultValues
-export const generateDefaultValues = (
-  fields: FormFieldOrGroup[],
-  existingDefaultValues: Record<string, any> = {},
-): Record<string, any> => {
-  const defaultValues: Record<string, any> = { ...existingDefaultValues }
-
-  fields.flat().forEach((field) => {
-    // Skip if field already has a default value
-    if (defaultValues[field.name]) return
-
-    // Handle field variants
-    switch (field.variant) {
-      case 'Checkbox':
-      case 'Switch':
-        defaultValues[field.name] = true
-        break
-      case 'Multi Select':
-        defaultValues[field.name] = ['React']
-        break
-      case 'Tags Input':
-        defaultValues[field.name] = []
-        break
-      case 'Datetime Picker':
-      case 'Date Picker':
-        defaultValues[field.name] = new Date()
-        break
-      case 'Rating':
-        defaultValues[field.name] = '0'
-        break
-      case 'Slider':
-        defaultValues[field.name] = 5
-        break
-      case 'Credit Card':
-        defaultValues[field.name] = JSON.stringify({
-          cardholderName: '',
-          cardNumber: '',
-          expiryMonth: '',
-          expiryYear: '',
-          cvv: '',
-          cvvLabel: 'CVC'
-        })
-        break
-    }
-  })
-
-  return defaultValues
-}
-
-export const generateDefaultValuesString = (
-  fields: FormFieldOrGroup[],
-): string => {
-  const defaultValues: Record<string, any> = {}
-  const dateFields: string[] = []
-
-  fields.flat().forEach((field) => {
-    if (field.variant === 'Multi Select') {
-      defaultValues[field.name] = ['React']
-    } else if (field.variant === 'Tags Input') {
-      defaultValues[field.name] = ['test']
-    } else if (
-      field.variant === 'Datetime Picker' ||
-      field.variant === 'Smart Datetime Input' ||
-      field.variant === 'Date Picker'
-    ) {
-      dateFields.push(field.name)
-      delete defaultValues[field.name]
-    }
-  })
-
-  if (Object.keys(defaultValues).length === 0 && dateFields.length === 0) {
-    return ''
-  }
-
-  // Convert defaultValues to string, handling both regular values and date fields
-  const regularValuesString =
-    Object.keys(defaultValues).length > 0
-      ? JSON.stringify(defaultValues).slice(1, -1) // Remove the outer {}
-      : ''
-
-  const dateFieldsString = dateFields
-    .map((fieldName) => `"${fieldName}": new Date()`)
-    .join(',')
-
-  const combinedString = [regularValuesString, dateFieldsString]
-    .filter(Boolean)
-    .join(',')
-
-  return `defaultValues: {${combinedString}},`
-}
-
-export const generateFormCode = (formFields: FormFieldOrGroup[]): string => {
-  const imports = Array.from(generateImports(formFields)).join('\n')
-  const constants = Array.from(generateConstants(formFields)).join('\n')
-  const schema = getZodSchemaString(formFields)
-
-  const renderFields = (fields: FormFieldOrGroup[]) => {
-    return fields
-      .map((fieldOrGroup, index) => {
-        if (Array.isArray(fieldOrGroup)) {
-          const colSpan = fieldOrGroup.length === 2 ? 6 : 4
-          return `
-        <div className="grid grid-cols-12 gap-4">
-          ${fieldOrGroup
-            .map(
-              (field) => `
-          <div className="col-span-${colSpan}">
-            ${generateCodeSnippet(field)}
-          </div>
-          `,
-            )
-            .join('')}
-        </div>`
-        } else {
-          return generateCodeSnippet(fieldOrGroup)
-        }
-      })
-      .join('\n        ')
-  }
-
-  const defaultValuesString = generateDefaultValuesString(formFields)
-
-  const component = `
-export default function MyForm() {
-  ${constants}
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-     ${defaultValuesString}
-  })
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    try {
-      console.log(values);
-      toast(
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
-        </pre>
-      );
-    } catch (error) {
-      console.error("Form submission error", error);
-      toast.error("Failed to submit the form. Please try again.");
-    }
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-3xl mx-auto py-10">
-        ${renderFields(formFields)}
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
-  `
-  return imports + '\n\n' + schema + '\n' + component
-}
-
-export const generateJsonSchemaCode = (formFields: FormFieldOrGroup[]): string => {
-  const jsonSchema = generateFormJsonSchema(formFields.flat(), {
-    title: 'Generated Form Schema',
-    description: 'JSON Schema generated from form builder'
-  })
-  return JSON.stringify(jsonSchema, null, 2)
-}
-
-export const generateFormCodeForLibrary = (
-  formFields: FormFieldOrGroup[],
-  library: FormLibrary
-): string => {
-  switch (library) {
-    case FORM_LIBRARIES.SERVER_ACTIONS:
-      return generateServerActionsCode(formFields)
-    case FORM_LIBRARIES.REACT_HOOK_FORM:
-      return generateReactHookFormCode(formFields)
-    case FORM_LIBRARIES.TANSTACK_FORM:
-      return generateTanStackFormCode(formFields)
-    case FORM_LIBRARIES.BRING_YOUR_OWN:
-      return generateBringYourOwnCode(formFields)
-    default:
-      return generateFormCode(formFields)
-  }
-}
diff --git a/screens/generate-code-parts/react-hook-form.tsx b/screens/generate-code-parts/react-hook-form.tsx
deleted file mode 100644
index a59a4fb..0000000
--- a/screens/generate-code-parts/react-hook-form.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { FormFieldType } from '@/types'
-import { generateCodeSnippetWithField } from './field-snippets'
-import { generateZodSchema, generateConstants, generateDefaultValuesString, getZodSchemaString } from './index'
-
-type FormFieldOrGroup = FormFieldType | FormFieldType[]
-
-export const generateReactHookFormCode = (formFields: FormFieldOrGroup[]): string => {
-  const fieldImports = new Set<string>()
-  
-  formFields.flat().forEach((field) => {
-    switch (field.variant) {
-      case 'Input':
-        fieldImports.add('Input')
-        break
-      case 'Textarea':
-        fieldImports.add('Textarea')
-        break
-      case 'Checkbox':
-        fieldImports.add('Checkbox')
-        break
-      case 'Select':
-        fieldImports.add('Select')
-        fieldImports.add('SelectContent')
-        fieldImports.add('SelectItem')
-        fieldImports.add('SelectTrigger')
-        fieldImports.add('SelectValue')
-        break
-      case 'Switch':
-        fieldImports.add('Switch')
-        break
-      case 'Slider':
-        fieldImports.add('Slider')
-        break
-      case 'Radio':
-        fieldImports.add('RadioGroup')
-        fieldImports.add('RadioGroupItem')
-        fieldImports.add('Label')
-        break
-    }
-  })
-
-  const componentImports = Array.from(fieldImports).map(comp => {
-    if (['Select', 'SelectContent', 'SelectItem', 'SelectTrigger', 'SelectValue'].includes(comp)) {
-      return null
-    }
-    if (['RadioGroup', 'RadioGroupItem'].includes(comp)) {
-      return null
-    }
-    return `import { ${comp} } from "@/components/ui/${comp.toLowerCase()}"`
-  }).filter(Boolean)
-
-  if (fieldImports.has('Select')) {
-    componentImports.push('import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"')
-  }
-  if (fieldImports.has('RadioGroup')) {
-    componentImports.push('import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"')
-    componentImports.push('import { Label } from "@/components/ui/label"')
-  }
-
-  const imports = `"use client"
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { z } from "zod"
-import { toast } from "sonner"
-import { Form } from "@/components/ui/form"
-import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"
-import { Button } from "@/components/ui/button"
-${componentImports.join('\n')}`
-
-  const constants = Array.from(generateConstants(formFields)).join('\n')
-  const schema = getZodSchemaString(formFields)
-
-  const renderFields = (fields: FormFieldOrGroup[]) => {
-    return fields
-      .map((fieldOrGroup) => {
-        if (Array.isArray(fieldOrGroup)) {
-          const colSpan = fieldOrGroup.length === 2 ? 6 : 4
-          return `
-        <div className="grid grid-cols-12 gap-4">
-          ${fieldOrGroup
-            .map(
-              (field) => `
-          <div className="col-span-${colSpan}">
-            ${generateCodeSnippetWithField(field, 'react-hook-form')}
-          </div>
-          `,
-            )
-            .join('')}
-        </div>`
-        } else {
-          return generateCodeSnippetWithField(fieldOrGroup, 'react-hook-form')
-        }
-      })
-      .join('\n        ')
-  }
-
-  const defaultValuesString = generateDefaultValuesString(formFields)
-
-  const component = `
-export default function MyForm() {
-  ${constants}
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-     ${defaultValuesString}
-  })
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    try {
-      console.log(values);
-      toast(
-        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-          <code className="text-white">{JSON.stringify(values, null, 2)}</code>
-        </pre>
-      );
-    } catch (error) {
-      console.error("Form submission error", error);
-      toast.error("Failed to submit the form. Please try again.");
-    }
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 max-w-3xl mx-auto py-10">
-        ${renderFields(formFields)}
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
-}
-  `
-  return imports + '\n\n' + schema + '\n' + component
-}
diff --git a/screens/generate-code-parts/server-actions.tsx b/screens/generate-code-parts/server-actions.tsx
deleted file mode 100644
index d6b559f..0000000
--- a/screens/generate-code-parts/server-actions.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { FormFieldType } from '@/types'
-import { generateCodeSnippetWithField } from './field-snippets'
-
-type FormFieldOrGroup = FormFieldType | FormFieldType[]
-
-export const generateServerActionsCode = (formFields: FormFieldOrGroup[]): string => {
-  const fieldImports = new Set<string>()
-  
-  formFields.flat().forEach((field) => {
-    switch (field.variant) {
-      case 'Input':
-        fieldImports.add('Input')
-        break
-      case 'Textarea':
-        fieldImports.add('Textarea')
-        break
-      case 'Checkbox':
-        fieldImports.add('Checkbox')
-        break
-      case 'Select':
-        fieldImports.add('Select')
-        fieldImports.add('SelectContent')
-        fieldImports.add('SelectItem')
-        fieldImports.add('SelectTrigger')
-        fieldImports.add('SelectValue')
-        break
-      case 'Switch':
-        fieldImports.add('Switch')
-        break
-      case 'Slider':
-        fieldImports.add('Slider')
-        break
-      case 'Radio':
-        fieldImports.add('RadioGroup')
-        fieldImports.add('RadioGroupItem')
-        fieldImports.add('Label')
-        break
-    }
-  })
-
-  const componentImports = Array.from(fieldImports).map(comp => {
-    if (['Select', 'SelectContent', 'SelectItem', 'SelectTrigger', 'SelectValue'].includes(comp)) {
-      return null
-    }
-    if (['RadioGroup', 'RadioGroupItem'].includes(comp)) {
-      return null
-    }
-    return `import { ${comp} } from "@/components/ui/${comp.toLowerCase()}"`
-  }).filter(Boolean)
-
-  if (fieldImports.has('Select')) {
-    componentImports.push('import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"')
-  }
-  if (fieldImports.has('RadioGroup')) {
-    componentImports.push('import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"')
-    componentImports.push('import { Label } from "@/components/ui/label"')
-  }
-
-  const imports = `import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"
-import { Button } from "@/components/ui/button"
-${componentImports.join('\n')}`
-
-  const action = `async function handleSubmit(formData: FormData) {
-  "use server"
-  
-  const data = {
-${formFields.flat().map(field => `    ${field.name}: formData.get("${field.name}"),`).join('\n')}
-  }
-  
-  console.log(data)
-}`
-
-  const renderFields = (fields: FormFieldOrGroup[]) => {
-    return fields
-      .map((fieldOrGroup) => {
-        if (Array.isArray(fieldOrGroup)) {
-          const colSpan = fieldOrGroup.length === 2 ? 6 : 4
-          return `
-        <div className="grid grid-cols-12 gap-4">
-          ${fieldOrGroup
-            .map(
-              (field) => `
-          <div className="col-span-${colSpan}">
-            ${generateCodeSnippetWithField(field, 'server-actions')}
-          </div>
-          `,
-            )
-            .join('')}
-        </div>`
-        } else {
-          return generateCodeSnippetWithField(fieldOrGroup, 'server-actions')
-        }
-      })
-      .join('\n        ')
-  }
-
-  const form = `export default function MyForm() {
-  return (
-    <form action={handleSubmit} className="space-y-6 max-w-3xl mx-auto py-10">
-        ${renderFields(formFields)}
-        <Button type="submit">Submit</Button>
-    </form>
-  )
-}`
-
-  return `${imports}\n\n${action}\n\n${form}`
-}
diff --git a/screens/generate-code-parts/tanstack-form.tsx b/screens/generate-code-parts/tanstack-form.tsx
deleted file mode 100644
index f150f5b..0000000
--- a/screens/generate-code-parts/tanstack-form.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { FormFieldType } from '@/types'
-import { generateCodeSnippetWithField } from './field-snippets'
-import { generateZodSchema, getZodSchemaString } from './index'
-
-type FormFieldOrGroup = FormFieldType | FormFieldType[]
-
-export const generateTanStackFormCode = (formFields: FormFieldOrGroup[]): string => {
-  const fieldImports = new Set<string>()
-  
-  formFields.flat().forEach((field) => {
-    switch (field.variant) {
-      case 'Input':
-        fieldImports.add('Input')
-        break
-      case 'Textarea':
-        fieldImports.add('Textarea')
-        break
-      case 'Checkbox':
-        fieldImports.add('Checkbox')
-        break
-      case 'Select':
-        fieldImports.add('Select')
-        fieldImports.add('SelectContent')
-        fieldImports.add('SelectItem')
-        fieldImports.add('SelectTrigger')
-        fieldImports.add('SelectValue')
-        break
-      case 'Switch':
-        fieldImports.add('Switch')
-        break
-      case 'Slider':
-        fieldImports.add('Slider')
-        break
-      case 'Radio':
-        fieldImports.add('RadioGroup')
-        fieldImports.add('RadioGroupItem')
-        fieldImports.add('Label')
-        break
-    }
-  })
-
-  const componentImports = Array.from(fieldImports).map(comp => {
-    if (['Select', 'SelectContent', 'SelectItem', 'SelectTrigger', 'SelectValue'].includes(comp)) {
-      return null
-    }
-    if (['RadioGroup', 'RadioGroupItem'].includes(comp)) {
-      return null
-    }
-    return `import { ${comp} } from "@/components/ui/${comp.toLowerCase()}"`
-  }).filter(Boolean)
-
-  if (fieldImports.has('Select')) {
-    componentImports.push('import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"')
-  }
-  if (fieldImports.has('RadioGroup')) {
-    componentImports.push('import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"')
-    componentImports.push('import { Label } from "@/components/ui/label"')
-  }
-
-  const imports = `"use client"
-import { useForm } from "@tanstack/react-form"
-import { zodValidator } from "@tanstack/zod-form-adapter"
-import { z } from "zod"
-import { toast } from "sonner"
-import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"
-import { Button } from "@/components/ui/button"
-${componentImports.join('\n')}`
-
-  const schema = getZodSchemaString(formFields)
-
-  const renderFields = (fields: FormFieldOrGroup[]) => {
-    return fields
-      .map((fieldOrGroup) => {
-        if (Array.isArray(fieldOrGroup)) {
-          const colSpan = fieldOrGroup.length === 2 ? 6 : 4
-          return `
-        <div className="grid grid-cols-12 gap-4">
-          ${fieldOrGroup
-            .map(
-              (field) => `
-          <div className="col-span-${colSpan}">
-            ${generateCodeSnippetWithField(field, 'tanstack-form')}
-          </div>
-          `,
-            )
-            .join('')}
-        </div>`
-        } else {
-          return generateCodeSnippetWithField(fieldOrGroup, 'tanstack-form')
-        }
-      })
-      .join('\n        ')
-  }
-
-  const component = `
-export default function MyForm() {
-  const form = useForm({
-    defaultValues: {
-${formFields.flat().map(field => `      ${field.name}: ${field.variant === 'Checkbox' || field.variant === 'Switch' ? 'false' : '""'},`).join('\n')}
-    },
-    onSubmit: async ({ value }) => {
-      try {
-        console.log(value);
-        toast(
-          <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-            <code className="text-white">{JSON.stringify(value, null, 2)}</code>
-          </pre>
-        );
-      } catch (error) {
-        console.error("Form submission error", error);
-        toast.error("Failed to submit the form. Please try again.");
-      }
-    },
-    validatorAdapter: zodValidator(),
-  })
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        form.handleSubmit()
-      }}
-      className="space-y-6 max-w-3xl mx-auto py-10"
-    >
-        ${renderFields(formFields)}
-        <Button type="submit">Submit</Button>
-    </form>
-  )
-}
-  `
-  return imports + '\n\n' + schema + '\n' + component
-}
diff --git a/screens/render-form-field/index.tsx b/screens/render-form-field/index.tsx
deleted file mode 100644
index 2d5fa64..0000000
--- a/screens/render-form-field/index.tsx
+++ /dev/null
@@ -1,711 +0,0 @@
-'use client'
-
-import { ChangeEvent, useRef, useState } from 'react'
-
-import { FormFieldType } from '@/types'
-import { cn } from '@/lib/utils'
-
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Input } from '@/components/ui/input'
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSeparator,
-  InputOTPSlot,
-} from '@/components/ui/input-otp'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
-import { Textarea } from '@/components/ui/textarea'
-import { Calendar } from '@/components/ui/calendar'
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from '@/components/ui/command'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
-import { Button } from '@/components/ui/button'
-import { format } from 'date-fns'
-import { PasswordInput } from '@/components/ui/password-input'
-import { PhoneInput } from '@/components/ui/phone-input'
-import {
-  FileUploader,
-  FileUploaderContent,
-  FileUploaderItem,
-  FileInput,
-} from '@/components/ui/file-upload'
-import { Slider } from '@/components/ui/slider'
-import { CalendarIcon, Check, ChevronsUpDown, Paperclip } from 'lucide-react'
-import { TagsInput } from '@/components/ui/tags-input'
-import {
-  MultiSelector,
-  MultiSelectorContent,
-  MultiSelectorInput,
-  MultiSelectorItem,
-  MultiSelectorList,
-  MultiSelectorTrigger,
-} from '@/components/ui/multi-select'
-import { DatetimePicker } from '@/components/ui/datetime-picker'
-import { SmartDatetimeInput } from '@/components/ui/smart-datetime-input'
-import LocationSelector from '@/components/ui/location-input'
-import SignatureInput from '@/components/ui/signature-input'
-import SignaturePad from '@/components/ui/signature-pad'
-import { Rating } from '@/components/ui/rating'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { CreditCard, CreditCardValue } from '@/components/ui/credit-card'
-
-const languages = [
-  { label: 'English', value: 'en' },
-  { label: 'French', value: 'fr' },
-  { label: 'German', value: 'de' },
-  { label: 'Spanish', value: 'es' },
-  { label: 'Portuguese', value: 'pt' },
-  { label: 'Russian', value: 'ru' },
-  { label: 'Japanese', value: 'ja' },
-  { label: 'Korean', value: 'ko' },
-  { label: 'Chinese', value: 'zh' },
-] as const
-
-const FileSvgDraw = () => {
-  return (
-    <>
-      <svg
-        className="w-8 h-8 mb-3 text-gray-500 dark:text-gray-400"
-        aria-hidden="true"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 20 16"
-      >
-        <path
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
-        />
-      </svg>
-      <p className="mb-1 text-sm text-gray-500 dark:text-gray-400">
-        <span className="font-semibold">Click to upload</span>
-        &nbsp; or drag and drop
-      </p>
-      <p className="text-xs text-gray-500 dark:text-gray-400">
-        SVG, PNG, JPG or GIF
-      </p>
-    </>
-  )
-}
-
-export const renderFormField = (field: FormFieldType, form: any) => {
-  const [checked, setChecked] = useState<boolean>(field.checked)
-  const [value, setValue] = useState<any>(field.value)
-  const [selectedValues, setSelectedValues] = useState<string[]>(['React'])
-  const [tagsValue, setTagsValue] = useState<string[]>([])
-  const [files, setFiles] = useState<File[] | null>(null) // Initialize to null or use [] for an empty array
-  const [sliderValue, setSliderValue] = useState<number[]>([5])
-  const [date, setDate] = useState<Date | undefined>(new Date())
-  const [datetime, setDatetime] = useState<Date | undefined>(new Date())
-  const [smartDatetime, setSmartDatetime] = useState<Date | null>()
-  const [countryName, setCountryName] = useState<string>('')
-  const [stateName, setStateName] = useState<string>('')
-  const [password, setPassword] = useState<string>('')
-  const [rating, setRating] = useState<number>(0)
-  const [creditCard, setCreditCard] = useState<CreditCardValue>({
-    cardholderName: '',
-    cardNumber: '',
-    expiryMonth: '',
-    expiryYear: '',
-    cvv: '',
-  })
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-
-  const dropZoneConfig = {
-    maxFiles: 5,
-    maxSize: 1024 * 1024 * 4,
-    multiple: true,
-  }
-
-  switch (field.variant) {
-    case 'Checkbox':
-      return (
-        <FormItem className="flex flex-col">
-          <div
-            className={cn(
-              'flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4',
-              field.className,
-            )}
-          >
-            <FormControl>
-              <Checkbox
-                checked={checked} // Ensure this is handled as boolean
-                onCheckedChange={() => {
-                  setChecked(!checked)
-                }}
-                disabled={field.disabled}
-              />
-            </FormControl>
-            <div className="space-y-1 leading-none">
-              <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-              <FormDescription>{field.description}</FormDescription>
-            </div>
-          </div>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Combobox':
-      return (
-        <FormItem className="flex flex-col">
-          <div>
-            <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          </div>{' '}
-          <Popover>
-            <PopoverTrigger asChild>
-              <FormControl>
-                <Button
-                  variant="outline"
-                  role="combobox"
-                  className={cn(
-                    'w-full justify-between',
-                    !value && 'text-muted-foreground',
-                  )}
-                >
-                  {value
-                    ? languages.find((language) => language.value === value)
-                      ?.label
-                    : 'Select language'}
-                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-                </Button>
-              </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className="p-0">
-              <Command>
-                <CommandInput placeholder="Search language..." />
-                <CommandList>
-                  <CommandEmpty>No language found.</CommandEmpty>
-                  <CommandGroup>
-                    {languages.map((language) => (
-                      <CommandItem
-                        value={language.label}
-                        key={language.value}
-                        onSelect={() => {
-                          setValue(language.value)
-                          form.setValue(field.name, language.value)
-                        }}
-                      >
-                        <Check
-                          className={cn(
-                            'mr-2 h-4 w-4',
-                            language.value === value
-                              ? 'opacity-100'
-                              : 'opacity-0',
-                          )}
-                        />
-                        {language.label}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Date Picker':
-      return (
-        <FormItem className="flex flex-col">
-          <div>
-            <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          </div>
-          <Popover>
-            <PopoverTrigger asChild>
-              <FormControl>
-                <Button
-                  variant={'outline'}
-                  className={cn(
-                    'w-full justify-start text-left font-normal',
-                    !date && 'text-muted-foreground',
-                  )}
-                >
-                  <CalendarIcon className="mr-2 h-4 w-4" />
-                  {date ? format(date, 'PPP') : <span>Pick a date</span>}
-                </Button>
-              </FormControl>
-            </PopoverTrigger>
-            <PopoverContent className="w-auto p-0" align="start">
-              <Calendar
-                mode="single"
-                selected={date}
-                onSelect={(newDate) => {
-                  setDate(newDate)
-                  form.setValue(field.name, newDate, {
-                    shouldValidate: true,
-                    shouldDirty: true,
-                  })
-                }}
-                autoFocus
-              />
-            </PopoverContent>
-          </Popover>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Datetime Picker':
-      return (
-        <FormItem className="flex flex-col">
-          <div>
-            <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          </div>
-          <DatetimePicker
-            {...field}
-            value={datetime}
-            // onChange={setDatetime}
-            onChange={(newDate) => {
-              setDatetime(newDate)
-              form.setValue(field.name, newDate, {
-                shouldValidate: true,
-                shouldDirty: true,
-              })
-            }}
-            format={[
-              ['months', 'days', 'years'],
-              ['hours', 'minutes', 'am/pm'],
-            ]}
-          />
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'File Input':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <FileUploader
-              value={files}
-              onValueChange={setFiles}
-              dropzoneOptions={dropZoneConfig}
-              className="relative bg-background rounded-lg p-2"
-            >
-              <FileInput
-                id="fileInput"
-                className="outline-dashed outline-1 outline-slate-500"
-              >
-                <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full ">
-                  <FileSvgDraw />
-                </div>
-              </FileInput>
-              <FileUploaderContent>
-                {files &&
-                  files.length > 0 &&
-                  files.map((file, i) => (
-                    <FileUploaderItem key={i} index={i}>
-                      <Paperclip className="h-4 w-4 stroke-current" />
-                      <span>{file.name}</span>
-                    </FileUploaderItem>
-                  ))}
-              </FileUploaderContent>
-            </FileUploader>
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Input':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <Input
-              placeholder={field.placeholder}
-              disabled={field.disabled}
-              type={field?.type}
-            />
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Input OTP':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <InputOTP maxLength={6}>
-              <InputOTPGroup>
-                <InputOTPSlot index={0} />
-                <InputOTPSlot index={1} />
-                <InputOTPSlot index={2} />
-              </InputOTPGroup>
-              <InputOTPSeparator />
-              <InputOTPGroup>
-                <InputOTPSlot index={3} />
-                <InputOTPSlot index={4} />
-                <InputOTPSlot index={5} />
-              </InputOTPGroup>
-            </InputOTP>
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Location Input':
-      return (
-        <FormItem className="flex flex-col">
-          <div>
-            <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          </div>
-          <LocationSelector
-            onCountryChange={(country) => {
-              setCountryName(country?.name || '')
-              form.setValue(field.name, [country?.name || '', stateName || ''])
-            }}
-            onStateChange={(state) => {
-              setStateName(state?.name || '')
-              form.setValue(field.name, [
-                form.getValues(field.name)[0] || '',
-                state?.name || '',
-              ])
-            }}
-          />
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Multi Select':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <MultiSelector
-              values={selectedValues}
-              onValuesChange={(newValues) => {
-                setSelectedValues(newValues)
-                form.setValue(field.name, newValues, {
-                  shouldValidate: true,
-                  shouldDirty: true,
-                })
-              }}
-              className="max-w-xs"
-            >
-              <MultiSelectorTrigger>
-                <MultiSelectorInput placeholder="Select languages" />
-              </MultiSelectorTrigger>
-              <MultiSelectorContent>
-                <MultiSelectorList>
-                  <MultiSelectorItem value={'React'}>React</MultiSelectorItem>
-                  <MultiSelectorItem value={'Vue'}>Vue</MultiSelectorItem>
-                  <MultiSelectorItem value={'Svelte'}>Svelte</MultiSelectorItem>
-                </MultiSelectorList>
-              </MultiSelectorContent>
-            </MultiSelector>
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Select':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <Select onValueChange={field.onChange}>
-            <FormControl>
-              <SelectTrigger>
-                <SelectValue placeholder="Select a verified email to display" />
-              </SelectTrigger>
-            </FormControl>
-            <SelectContent>
-              <SelectItem value="m@example.com">m@example.com</SelectItem>
-              <SelectItem value="m@google.com">m@google.com</SelectItem>
-              <SelectItem value="m@support.com">m@support.com</SelectItem>
-            </SelectContent>
-          </Select>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Slider':
-      const min = field.min || 0
-      const max = field.max || 100
-      const step = field.step || 1
-      const defaultValue = 5
-
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <Slider
-              min={min}
-              max={max}
-              step={step}
-              value={sliderValue}
-              onValueChange={(value) => {
-                setSliderValue(value)
-              }} // Update to set the first value as a number
-            />
-          </FormControl>
-          <FormDescription className="py-3">
-            {field.description} Selected value is {value || defaultValue},
-            minimun valus is {min}, maximim values is {max}, step size is {step}
-          </FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Signature Input':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <SignatureInput
-              canvasRef={canvasRef}
-              onSignatureChange={(signature) => {
-                form.setValue(field.name, signature || undefined)
-              }}
-            />
-          </FormControl>
-          <FormDescription className="py-3">
-            {field.description}
-          </FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Signature Pad':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <SignaturePad
-              value={value as string | null}
-              onChange={(signature) => {
-                setValue(signature)
-                form.setValue(field.name, signature || undefined)
-              }}
-            />
-          </FormControl>
-          <FormDescription className="py-3">
-            {field.description}
-          </FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Smart Datetime Input':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <SmartDatetimeInput
-              locale={field.locale as any}
-              hour12={field.hour12}
-              value={smartDatetime}
-              onValueChange={(newDate) => {
-                setSmartDatetime(newDate)
-                form.setValue(field.name, newDate, {
-                  shouldValidate: true,
-                  shouldDirty: true,
-                })
-              }}
-              placeholder="e.g. tomorrow at 3pm"
-            />
-          </FormControl>
-          <FormDescription className="py-3">
-            {field.description}
-          </FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Switch':
-      return (
-        <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-          <div className="space-y-0.5">
-            <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-            <FormDescription>{field.description}</FormDescription>
-          </div>
-          <FormControl>
-            <Switch
-              checked={checked}
-              onCheckedChange={() => {
-                setChecked(!checked)
-              }}
-            />
-          </FormControl>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Tags Input':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <TagsInput
-              value={tagsValue}
-              onValueChange={(newTags) => {
-                setTagsValue(newTags)
-                form.setValue(field.name, newTags, {
-                  shouldValidate: true,
-                  shouldDirty: true,
-                })
-              }}
-              placeholder="Enter your tags"
-            />
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Textarea':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <Textarea
-              placeholder={field.placeholder}
-              className="resize-none"
-            // {...field}
-            />
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Password':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <PasswordInput
-              value={password}
-              placeholder={field.placeholder}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                setPassword(e.target.value)
-                form.setValue(field.name, e.target.value, {
-                  shouldValidate: true,
-                  shouldDirty: true,
-                })
-              }}
-            />
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Phone':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <PhoneInput
-              defaultCountry="TR"
-              onChange={(phoneNumber) => {
-                form.setValue(field.name, phoneNumber, {
-                  shouldValidate: true,
-                  shouldDirty: true,
-                })
-              }}
-            />
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Rating':
-      return (
-        <FormItem>
-          <FormLabel className="flex items-center gap-1 flex-nowrap">{field.label} {field.required && '*'}</FormLabel>
-          <FormControl>
-            <Rating
-              value={rating}
-              onChange={(value) => {
-                setRating(value)
-                form.setValue(field.name, value.toString(), {
-                  shouldValidate: true,
-                  shouldDirty: true,
-                })
-              }}
-            />
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'RadioGroup':
-      return (
-        <FormItem className="space-y-3">
-          <FormLabel>{field.label}</FormLabel>
-          <FormControl>
-            <RadioGroup
-              onValueChange={field.onChange}
-              className="flex flex-col space-y-1"
-            >
-              {[
-                ['Male', 'male'],
-                ['Female', 'female'],
-                ['Other', 'other'],
-              ].map((option, index) => {
-                return (
-                  <FormItem className="flex items-center space-x-3 space-y-0">
-                    <FormControl>
-                      <RadioGroupItem value={option[1]} />
-                    </FormControl>
-                    <FormLabel className="font-normal">{option[0]}</FormLabel>
-                  </FormItem>
-                )
-              })}
-            </RadioGroup>
-          </FormControl>
-          <FormDescription>{field.description}</FormDescription>
-          <FormMessage />
-        </FormItem>
-      )
-    case 'Credit Card':
-      return (
-        <FormField
-          control={form.control}
-          name={field.name}
-          render={({ field: formField }) => (
-            <FormItem>
-              <FormLabel>{field.label}</FormLabel>
-              <FormControl>
-                <CreditCard
-                  value={creditCard}
-                  onChange={(value) => {
-                    setCreditCard(value)
-                    // Update form with the credit card object directly
-                    formField.onChange(value)
-                    form.setValue(field.name, value, {
-                      shouldValidate: true,
-                      shouldDirty: true,
-                    })
-                  }}
-                />
-              </FormControl>
-              <FormDescription>{field.description}</FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      )
-    default:
-      return null
-  }
-}
diff --git a/scripts/build-registry.ts b/scripts/build-registry.ts
deleted file mode 100644
index 5f72ce8..0000000
--- a/scripts/build-registry.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { get } from 'http'
-import { registryComponents } from '../registry'
-import { promises as fs } from 'fs'
-import { z } from 'zod'
-import { registryItemFileSchema } from '@/registry/schema'
-import path from 'path'
-import React from 'react'
-
-const REGISTRY_BASE_PATH = 'registry'
-const PUBLIC_FOLDER_BASE_PATH = 'public/registry'
-const COMPONENT_FOLDER_PATH = 'components'
-
-type File = z.infer<typeof registryItemFileSchema>
-const FolderToComponentTypeMap = {
-  block: 'registry:block',
-  component: 'registry:component',
-  hooks: 'registry:hook',
-  ui: 'registry:ui',
-}
-
-async function writeFileRecursive(filePath: string, data: string) {
-  const dir = path.dirname(filePath) // Extract the directory path
-
-  try {
-    // Ensure the directory exists, recursively creating directories as needed
-    await fs.mkdir(dir, { recursive: true })
-
-    // Write the file
-    await fs.writeFile(filePath, data, 'utf-8')
-    console.log(`File written to ${filePath}`)
-  } catch (error) {
-    console.error(`Error writing file`)
-    console.error(error)
-  }
-}
-
-const getComponentFiles = async (files: File[]) => {
-  const filesArrayPromises = (files ?? []).map(async (file) => {
-    if (typeof file === 'string') {
-      const filePath = `${REGISTRY_BASE_PATH}/${file}`
-      const fileContent = await fs.readFile(filePath, 'utf-8')
-      return {
-        type: FolderToComponentTypeMap[
-          file.split('/')[0] as keyof typeof FolderToComponentTypeMap
-        ],
-        content: fileContent,
-        path: file,
-        target: `${COMPONENT_FOLDER_PATH}/${file}`,
-      }
-    }
-  })
-  const filesArray = await Promise.all(filesArrayPromises)
-
-  return filesArray
-}
-
-const main = async () => {
-  // make a json file and put it in public folder
-  for (let i = 0; i < registryComponents.length; i++) {
-    const component = registryComponents[i]
-    const files = component.files
-    if (!files) throw new Error('No files found for component')
-
-    const filesArray = await getComponentFiles(files)
-
-    const json = JSON.stringify(
-      {
-        ...component,
-        files: filesArray,
-      },
-      null,
-      2,
-    )
-    const jsonPath = `${PUBLIC_FOLDER_BASE_PATH}/${component.name}.json`
-    await writeFileRecursive(jsonPath, json)
-    console.log(json)
-  }
-}
-
-main()
-  .then(() => {
-    console.log('done')
-  })
-  .catch((err) => {
-    console.error(err)
-  })
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index f46be03..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-    './screens/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
-  safelist: [
-    'col-span-1',
-    'col-span-2',
-    'col-span-3',
-    'col-span-4',
-    'col-span-5',
-    'col-span-6',
-    'col-span-7',
-    'col-span-8',
-    'col-span-9',
-    'col-span-10',
-    'col-span-11',
-    'col-span-12',
-  ],
-}
diff --git a/types.ts b/types.ts
index c15b97d..e17100d 100644
--- a/types.ts
+++ b/types.ts
@@ -1,25 +1,20 @@
 import * as Locales from 'date-fns/locale'
 
-// Define the FormField type
+/**
+ * One field in the playground. `variant` names a Field variant
+ * (components/field-variants), which decides how the field renders,
+ * validates and is generated; the rest is what the user edits.
+ */
 export type FormFieldType = {
-  type: string
   variant: string
   name: string
   label: string
-  placeholder?: string
   description?: string
-  disabled: boolean
-  value: string | boolean | Date | number | string[]
-  setValue: (value: string | boolean) => void
-  checked: boolean
-  onChange: (
-    value: string | string[] | boolean | Date | number | number[],
-  ) => void
-  onSelect: (
-    value: string | string[] | boolean | Date | number | number[],
-  ) => void
-  rowIndex: number
+  placeholder?: string
+  /** Native input type, for the Input variant. */
+  type?: string
   required?: boolean
+  disabled?: boolean
   min?: number
   max?: number
   step?: number
@@ -27,23 +22,3 @@ export type FormFieldType = {
   hour12?: boolean
   className?: string
 }
-
-export type FieldType = { name: string; isNew: boolean; index?: number }
-
-export interface EditorColumn {
-  id: string
-  content: string
-  width: number // 1-12 representing tailwind grid columns
-}
-
-export interface EditorBlock {
-  id: string
-  type: 'text' | 'heading' | 'checkbox' | 'columns'
-  content: string
-  columns?: EditorColumn[]
-}
-
-export interface EditorHistoryState {
-  blocks: EditorBlock[]
-  timestamp: number
-}
diff --git a/vitest.config.mts b/vitest.config.mts
index 76a7212..36c70f2 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -1,9 +1,13 @@
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vitest/config'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: { '@': fileURLToPath(new URL('./', import.meta.url)) },
+  },
   test: {
     environment: 'jsdom',
   },
-})
\ No newline at end of file
+})