пре 1 недеља · 8b2b03d276
--- a/.agents/skills/classic-to-default-sync/SKILL.md
+++ b/.agents/skills/classic-to-default-sync/SKILL.md
@@ -26,7 +26,7 @@ Read every changed file in `web/classic`. Identify the **logical changes** (new
 
				 For each logical change found in Step 1, locate the equivalent file(s) in `web/default/src/`. Use Glob/Grep/SemanticSearch as needed. Consider that:
			
 
				 
			
 
				 - `web/classic` uses **React 18 + Vite + Semi Design**
			
 
				-- `web/default` uses **React 19 + Rsbuild + Radix UI + Tailwind CSS**
			
 
				+- `web/default` uses **React 19 + Rsbuild + Base UI + Tailwind CSS**
			
 
				 - Component names, file paths, and API shapes may differ; match by **functionality**, not filename.
			
 
				 
			
 
				 ### Step 3 — Triage each change
			
@@ -46,7 +46,7 @@ For each **⚠️** or **❌** item:
 
				 1. **Read the target file(s) in `web/default`** before editing (required by project conventions).
			
 
				 2. Implement using `web/default` conventions:
			
 
				    - React 19 patterns (hooks, Suspense, etc.)
			
 
				-   - Radix UI primitives where applicable
			
 
				+   - Base UI primitives where applicable
			
 
				    - Tailwind CSS for styling (no inline styles or Semi Design imports)
			
 
				    - `useTranslation()` + `t('English key')` for all user-visible strings
			
 
				    - TypeScript — explicit types, no `any`
			
--- a/.agents/skills/shadcn-ui/SKILL.md
+++ b/.agents/skills/shadcn-ui/SKILL.md
@@ -0,0 +1,105 @@
 
				+---
			
 
				+name: shadcn-ui
			
 
				+description: >-
			
 
				+  Give the assistant project-aware shadcn/ui context: components.json,
			
 
				+  composition patterns, CLI, registries, theming, and MCP. Use when working on
			
 
				+  web/default UI, shadcn components, or presets. Overview aligns with
			
 
				+  https://ui.shadcn.com/docs/skills.md; full upstream skill text is vendored
			
 
				+  under vendor/shadcn/.
			
 
				+---
			
 
				+
			
 
				+<!-- Canonical overview: https://ui.shadcn.com/docs/skills.md -->
			
 
				+
			
 
				+# Skills (shadcn/ui)
			
 
				+
			
 
				+Skills give AI assistants project-aware context about shadcn/ui. When used, the assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.
			
 
				+
			
 
				+For example, you can ask:
			
 
				+
			
 
				+- _"Add a login form with email and password fields."_
			
 
				+- _"Create a settings page with a form for updating profile information."_
			
 
				+- _"Build a dashboard with a sidebar, stats cards, and a data table."_
			
 
				+- _"Switch to --preset [CODE]"_
			
 
				+- _"Can you add a hero from @tailark?"_
			
 
				+
			
 
				+The skill reads your project's `components.json` and provides your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Install (ecosystem vs this repo)
			
 
				+
			
 
				+Official install from [Skills — shadcn/ui](https://ui.shadcn.com/docs/skills.md):
			
 
				+
			
 
				+```bash
			
 
				+npx skills add shadcn/ui
			
 
				+```
			
 
				+
			
 
				+That installs the skill where the `skills` CLI is available. **This repository** keeps the same intent under `.agents/skills/shadcn-ui/` (overview here + **vendored** upstream docs in [`vendor/shadcn/`](./vendor/shadcn/)) and runs the shadcn CLI from the frontend app root:
			
 
				+
			
 
				+```bash
			
 
				+cd web/default && bunx shadcn@latest info --json
			
 
				+```
			
 
				+
			
 
				+Learn more about skills at [skills.sh](https://skills.sh).
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## What's included (and where)
			
 
				+
			
 
				+### Project context
			
 
				+
			
 
				+Run **`shadcn info --json`** (here: `cd web/default && bunx shadcn@latest info --json`) for framework, Tailwind version, aliases, base (`radix` | `base`), icon library, installed components, and resolved paths.
			
 
				+
			
 
				+### CLI commands
			
 
				+
			
 
				+Full command reference (vendored): [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md).
			
 
				+
			
 
				+### Theming and customization
			
 
				+
			
 
				+Vendored: [`vendor/shadcn/customization.md`](./vendor/shadcn/customization.md). Live docs: [Theming](https://ui.shadcn.com/docs/theming).
			
 
				+
			
 
				+### Registry authoring
			
 
				+
			
 
				+Not duplicated as a single file in the vendor tree; see [Registry](https://ui.shadcn.com/docs/registry) and `build` in [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md).
			
 
				+
			
 
				+### MCP server
			
 
				+
			
 
				+Vendored: [`vendor/shadcn/mcp.md`](./vendor/shadcn/mcp.md). Live docs: [MCP Server](https://ui.shadcn.com/docs/mcp).
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## How it works
			
 
				+
			
 
				+1. **Project detection** — Applies when `components.json` exists (here: `web/default/components.json`).
			
 
				+2. **Context injection** — Use `shadcn info --json` as ground truth for imports and APIs.
			
 
				+3. **Pattern enforcement** — Follow rules in [`vendor/shadcn/SKILL.md`](./vendor/shadcn/SKILL.md) and [`vendor/shadcn/rules/`](./vendor/shadcn/rules/).
			
 
				+4. **Component discovery** — `shadcn docs`, `shadcn search`, MCP, or registries — see vendored SKILL + MCP doc.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Learn more (web)
			
 
				+
			
 
				+- [CLI](https://ui.shadcn.com/docs/cli) — complements [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md)
			
 
				+- [Theming](https://ui.shadcn.com/docs/theming)
			
 
				+- [Registry](https://ui.shadcn.com/docs/registry)
			
 
				+- [skills.sh](https://skills.sh)
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Vendored upstream bundle (deep rules)
			
 
				+
			
 
				+Snapshot from [shadcn-ui/ui `skills/shadcn`](https://github.com/shadcn-ui/ui/tree/main/skills/shadcn); revision note in [`vendor/shadcn/UPSTREAM.txt`](./vendor/shadcn/UPSTREAM.txt).
			
 
				+
			
 
				+| Doc | Path |
			
 
				+| --- | --- |
			
 
				+| Full official skill body | [`vendor/shadcn/SKILL.md`](./vendor/shadcn/SKILL.md) |
			
 
				+| CLI reference | [`vendor/shadcn/cli.md`](./vendor/shadcn/cli.md) |
			
 
				+| Theming / customization | [`vendor/shadcn/customization.md`](./vendor/shadcn/customization.md) |
			
 
				+| MCP | [`vendor/shadcn/mcp.md`](./vendor/shadcn/mcp.md) |
			
 
				+| Forms | [`vendor/shadcn/rules/forms.md`](./vendor/shadcn/rules/forms.md) |
			
 
				+| Composition | [`vendor/shadcn/rules/composition.md`](./vendor/shadcn/rules/composition.md) |
			
 
				+| Icons | [`vendor/shadcn/rules/icons.md`](./vendor/shadcn/rules/icons.md) |
			
 
				+| Styling | [`vendor/shadcn/rules/styling.md`](./vendor/shadcn/rules/styling.md) |
			
 
				+| Base vs Radix | [`vendor/shadcn/rules/base-vs-radix.md`](./vendor/shadcn/rules/base-vs-radix.md) |
			
 
				+
			
 
				+**Workflow:** Prefer this **root** `SKILL.md` for repo paths (`web/default`, Bun). Read **`vendor/shadcn/SKILL.md`** for the complete upstream workflow, patterns, and CLI quick reference. Use **`vendor/shadcn/rules/*.md`** when validating concrete markup.
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/SKILL.md
@@ -0,0 +1,260 @@
 
				+---
			
 
				+name: shadcn
			
 
				+description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
			
 
				+user-invocable: false
			
 
				+allowed-tools: Bash(npx shadcn@latest *), Bash(pnpm dlx shadcn@latest *), Bash(bunx --bun shadcn@latest *)
			
 
				+---
			
 
				+
			
 
				+# shadcn/ui
			
 
				+
			
 
				+A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
			
 
				+
			
 
				+> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
			
 
				+
			
 
				+## Current Project Context
			
 
				+
			
 
				+```json
			
 
				+!`npx shadcn@latest info --json`
			
 
				+```
			
 
				+
			
 
				+The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
			
 
				+
			
 
				+## Principles
			
 
				+
			
 
				+1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
			
 
				+2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
			
 
				+3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
			
 
				+4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
			
 
				+
			
 
				+## Critical Rules
			
 
				+
			
 
				+These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
			
 
				+
			
 
				+### Styling & Tailwind → [styling.md](./rules/styling.md)
			
 
				+
			
 
				+- **`className` for layout, not styling.** Never override component colors or typography.
			
 
				+- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
			
 
				+- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
			
 
				+- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
			
 
				+- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
			
 
				+- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
			
 
				+- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
			
 
				+
			
 
				+### Forms & Inputs → [forms.md](./rules/forms.md)
			
 
				+
			
 
				+- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
			
 
				+- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
			
 
				+- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
			
 
				+- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
			
 
				+- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
			
 
				+- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
			
 
				+
			
 
				+### Component Structure → [composition.md](./rules/composition.md)
			
 
				+
			
 
				+- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
			
 
				+- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
			
 
				+- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
			
 
				+- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
			
 
				+- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.
			
 
				+- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.
			
 
				+- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.
			
 
				+
			
 
				+### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
			
 
				+
			
 
				+- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
			
 
				+- **Callouts use `Alert`.** Don't build custom styled divs.
			
 
				+- **Empty states use `Empty`.** Don't build custom empty state markup.
			
 
				+- **Toast via `sonner`.** Use `toast()` from `sonner`.
			
 
				+- **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
			
 
				+- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
			
 
				+- **Use `Badge`** instead of custom styled spans.
			
 
				+
			
 
				+### Icons → [icons.md](./rules/icons.md)
			
 
				+
			
 
				+- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
			
 
				+- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
			
 
				+- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.
			
 
				+
			
 
				+### CLI
			
 
				+
			
 
				+- **Never decode preset codes or build preset URLs manually.** Use `npx shadcn@latest preset decode <code>`, `preset url <code>`, or `preset open <code>`. For project-aware preset detection, use `npx shadcn@latest preset resolve`.
			
 
				+- **Apply preset codes directly with the CLI.** Use `npx shadcn@latest apply <code>` for existing projects, or `npx shadcn@latest init --preset <code>` when initializing.
			
 
				+
			
 
				+## Key Patterns
			
 
				+
			
 
				+These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
			
 
				+
			
 
				+```tsx
			
 
				+// Form layout: FieldGroup + Field, not div + Label.
			
 
				+<FieldGroup>
			
 
				+  <Field>
			
 
				+    <FieldLabel htmlFor="email">Email</FieldLabel>
			
 
				+    <Input id="email" />
			
 
				+  </Field>
			
 
				+</FieldGroup>
			
 
				+
			
 
				+// Validation: data-invalid on Field, aria-invalid on the control.
			
 
				+<Field data-invalid>
			
 
				+  <FieldLabel>Email</FieldLabel>
			
 
				+  <Input aria-invalid />
			
 
				+  <FieldDescription>Invalid email.</FieldDescription>
			
 
				+</Field>
			
 
				+
			
 
				+// Icons in buttons: data-icon, no sizing classes.
			
 
				+<Button>
			
 
				+  <SearchIcon data-icon="inline-start" />
			
 
				+  Search
			
 
				+</Button>
			
 
				+
			
 
				+// Spacing: gap-*, not space-y-*.
			
 
				+<div className="flex flex-col gap-4">  // correct
			
 
				+<div className="space-y-4">           // wrong
			
 
				+
			
 
				+// Equal dimensions: size-*, not w-* h-*.
			
 
				+<Avatar className="size-10">   // correct
			
 
				+<Avatar className="w-10 h-10"> // wrong
			
 
				+
			
 
				+// Status colors: Badge variants or semantic tokens, not raw colors.
			
 
				+<Badge variant="secondary">+20.1%</Badge>    // correct
			
 
				+<span className="text-emerald-600">+20.1%</span> // wrong
			
 
				+```
			
 
				+
			
 
				+## Component Selection
			
 
				+
			
 
				+| Need                       | Use                                                                                                 |
			
 
				+| -------------------------- | --------------------------------------------------------------------------------------------------- |
			
 
				+| Button/action              | `Button` with appropriate variant                                                                   |
			
 
				+| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
			
 
				+| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem`                                                                   |
			
 
				+| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |
			
 
				+| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |
			
 
				+| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |
			
 
				+| Feedback                   | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                        |
			
 
				+| Command palette            | `Command` inside `Dialog`                                                                           |
			
 
				+| Charts                     | `Chart` (wraps Recharts)                                                                            |
			
 
				+| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |
			
 
				+| Empty states               | `Empty`                                                                                             |
			
 
				+| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |
			
 
				+| Tooltips/info              | `Tooltip`, `HoverCard`, `Popover`                                                                   |
			
 
				+
			
 
				+## Key Fields
			
 
				+
			
 
				+The injected project context contains these key fields:
			
 
				+
			
 
				+- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode.
			
 
				+- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive.
			
 
				+- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`.
			
 
				+- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
			
 
				+- **`style`** → component visual treatment (e.g. `nova`, `vega`).
			
 
				+- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.
			
 
				+- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`.
			
 
				+- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.
			
 
				+- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).
			
 
				+- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).
			
 
				+- **`preset`** → resolved preset code and values for the current project. Use `npx shadcn@latest preset resolve --json` when you only need preset information.
			
 
				+
			
 
				+See [cli.md — `info` command](./cli.md) for the full field reference.
			
 
				+
			
 
				+## Component Docs, Examples, and Usage
			
 
				+
			
 
				+Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest docs button dialog select
			
 
				+```
			
 
				+
			
 
				+**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.
			
 
				+
			
 
				+## Workflow
			
 
				+
			
 
				+1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
			
 
				+2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
			
 
				+3. **Find components** — `npx shadcn@latest search`.
			
 
				+4. **Get docs and examples** — run `npx shadcn@latest docs <component>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
			
 
				+5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).
			
 
				+6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
			
 
				+7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
			
 
				+8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
			
 
				+9. **Switching presets** — Ask the user first: **overwrite**, **partial**, **merge**, or **skip**?
			
 
				+   - **Inspect current preset**: `npx shadcn@latest preset resolve`. Use `--json` when you need structured values.
			
 
				+   - **Inspect incoming preset**: `npx shadcn@latest preset decode <code>`. Use `preset url <code>` or `preset open <code>` to share or open the preset builder.
			
 
				+   - **Overwrite**: `npx shadcn@latest apply <code>`. Overwrites detected components, fonts, and CSS variables.
			
 
				+   - **Partial**: `npx shadcn@latest apply <code> --only theme,font`. Updates only the selected preset parts without reinstalling UI components. Supported values are `theme` and `font`; comma-separated combinations are allowed. `icon` is intentionally not supported, because icon changes may require full component reinstall and transforms.
			
 
				+   - **Merge**: `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.
			
 
				+   - **Skip**: `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.
			
 
				+   - **Important**: Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
			
 
				+
			
 
				+## Updating Components
			
 
				+
			
 
				+When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**
			
 
				+
			
 
				+1. Run `npx shadcn@latest add <component> --dry-run` to see all files that would be affected.
			
 
				+2. For each file, run `npx shadcn@latest add <component> --diff <file>` to see what changed upstream vs local.
			
 
				+3. Decide per file based on the diff:
			
 
				+   - No local changes → safe to overwrite.
			
 
				+   - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
			
 
				+   - User says "just update everything" → use `--overwrite`, but confirm first.
			
 
				+4. **Never use `--overwrite` without the user's explicit approval.**
			
 
				+
			
 
				+## Quick Reference
			
 
				+
			
 
				+```bash
			
 
				+# Create a new project.
			
 
				+npx shadcn@latest init --name my-app --preset base-nova
			
 
				+npx shadcn@latest init --name my-app --preset a2r6bw --template vite
			
 
				+
			
 
				+# Create a monorepo project.
			
 
				+npx shadcn@latest init --name my-app --preset base-nova --monorepo
			
 
				+npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
			
 
				+
			
 
				+# Initialize existing project.
			
 
				+npx shadcn@latest init --preset base-nova
			
 
				+npx shadcn@latest init --defaults  # shortcut: --template=next --preset=nova (base style implied)
			
 
				+
			
 
				+# Apply a preset to an existing project.
			
 
				+npx shadcn@latest apply a2r6bw
			
 
				+npx shadcn@latest apply a2r6bw --only theme
			
 
				+npx shadcn@latest apply a2r6bw --only font
			
 
				+npx shadcn@latest apply a2r6bw --only theme,font
			
 
				+
			
 
				+# Inspect preset codes and project preset state.
			
 
				+npx shadcn@latest preset decode a2r6bw
			
 
				+npx shadcn@latest preset url a2r6bw
			
 
				+npx shadcn@latest preset open a2r6bw
			
 
				+npx shadcn@latest preset resolve
			
 
				+npx shadcn@latest preset resolve --json
			
 
				+
			
 
				+# Add components.
			
 
				+npx shadcn@latest add button card dialog
			
 
				+npx shadcn@latest add @magicui/shimmer-button
			
 
				+npx shadcn@latest add --all
			
 
				+
			
 
				+# Preview changes before adding/updating.
			
 
				+npx shadcn@latest add button --dry-run
			
 
				+npx shadcn@latest add button --diff button.tsx
			
 
				+npx shadcn@latest add @acme/form --view button.tsx
			
 
				+
			
 
				+# Search registries.
			
 
				+npx shadcn@latest search @shadcn -q "sidebar"
			
 
				+npx shadcn@latest search @tailark -q "stats"
			
 
				+
			
 
				+# Get component docs and example URLs.
			
 
				+npx shadcn@latest docs button dialog select
			
 
				+
			
 
				+# View registry item details (for items not yet installed).
			
 
				+npx shadcn@latest view @shadcn/button
			
 
				+```
			
 
				+
			
 
				+**Named presets:** `nova`, `vega`, `maia`, `lyra`, `mira`, `luma`
			
 
				+**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)
			
 
				+**Preset codes:** Version-prefixed base62 strings (e.g. `a2r6bw` or `b0`), from [ui.shadcn.com](https://ui.shadcn.com).
			
 
				+
			
 
				+## Detailed References
			
 
				+
			
 
				+- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
			
 
				+- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
			
 
				+- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects
			
 
				+- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
			
 
				+- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion
			
 
				+- [cli.md](./cli.md) — Commands, flags, presets, templates
			
 
				+- [customization.md](./customization.md) — Theming, CSS variables, extending components
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/UPSTREAM.txt
@@ -0,0 +1,3 @@
 
				+Source: https://github.com/shadcn-ui/ui/tree/56161142f1b83f612462772d18883807b5f0d601/skills/shadcn
			
 
				+Branch: main
			
 
				+Fetched: 2026-04-29
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/cli.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/cli.md
@@ -0,0 +1,276 @@
 
				+# shadcn CLI Reference
			
 
				+
			
 
				+Configuration is read from `components.json`.
			
 
				+
			
 
				+> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
			
 
				+
			
 
				+> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag.
			
 
				+
			
 
				+## Contents
			
 
				+
			
 
				+- Commands: init, apply, add (dry-run, smart merge), search, view, docs, info, build
			
 
				+- Templates: next, vite, start, react-router, astro
			
 
				+- Presets: named, code, URL formats and fields
			
 
				+- Switching presets
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Commands
			
 
				+
			
 
				+### `init` — Initialize or create a project
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest init [components...] [options]
			
 
				+```
			
 
				+
			
 
				+Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step.
			
 
				+
			
 
				+| Flag                    | Short | Description                                               | Default |
			
 
				+| ----------------------- | ----- | --------------------------------------------------------- | ------- |
			
 
				+| `--template <template>` | `-t`  | Template (next, start, vite, next-monorepo, react-router) | —       |
			
 
				+| `--preset [name]`       | `-p`  | Preset configuration (named, code, or URL)                | —       |
			
 
				+| `--yes`                 | `-y`  | Skip confirmation prompt                                  | `true`  |
			
 
				+| `--defaults`            | `-d`  | Use defaults (`--template=next --preset=base-nova`)       | `false` |
			
 
				+| `--force`               | `-f`  | Force overwrite existing configuration                    | `false` |
			
 
				+| `--cwd <cwd>`           | `-c`  | Working directory                                         | current |
			
 
				+| `--name <name>`         | `-n`  | Name for new project                                      | —       |
			
 
				+| `--silent`              | `-s`  | Mute output                                               | `false` |
			
 
				+| `--rtl`                 |       | Enable RTL support                                        | —       |
			
 
				+| `--reinstall`           |       | Re-install existing UI components                         | `false` |
			
 
				+| `--monorepo`            |       | Scaffold a monorepo project                               | —       |
			
 
				+| `--no-monorepo`         |       | Skip the monorepo prompt                                  | —       |
			
 
				+
			
 
				+`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.
			
 
				+
			
 
				+### `apply` — Apply a preset to an existing project
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest apply [preset] [options]
			
 
				+```
			
 
				+
			
 
				+Applies a preset to an existing project, overwriting preset-driven config, fonts, CSS variables, and detected UI components.
			
 
				+
			
 
				+| Flag                | Short | Description                                | Default |
			
 
				+| ------------------- | ----- | ------------------------------------------ | ------- |
			
 
				+| `--preset <preset>` | —     | Preset configuration (named, code, or URL) | —       |
			
 
				+| `--yes`             | `-y`  | Skip confirmation prompt                   | `false` |
			
 
				+| `--cwd <cwd>`       | `-c`  | Working directory                          | current |
			
 
				+| `--silent`          | `-s`  | Mute output                                | `false` |
			
 
				+
			
 
				+`[preset]` is a shorthand for `--preset <preset>`. If both are provided, they must match.
			
 
				+If no preset is provided, the CLI offers to open the custom preset builder on `ui.shadcn.com/create`.
			
 
				+
			
 
				+### `add` — Add components
			
 
				+
			
 
				+> **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@latest add <component> --dry-run`, `--diff`, or `--view`. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest add [components...] [options]
			
 
				+```
			
 
				+
			
 
				+Accepts component names, registry-prefixed names (`@magicui/shimmer-button`), URLs, or local paths.
			
 
				+
			
 
				+| Flag            | Short | Description                                                                                                          | Default |
			
 
				+| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
			
 
				+| `--yes`         | `-y`  | Skip confirmation prompt                                                                                             | `false` |
			
 
				+| `--overwrite`   | `-o`  | Overwrite existing files                                                                                             | `false` |
			
 
				+| `--cwd <cwd>`   | `-c`  | Working directory                                                                                                    | current |
			
 
				+| `--all`         | `-a`  | Add all available components                                                                                         | `false` |
			
 
				+| `--path <path>` | `-p`  | Target path for the component                                                                                        | —       |
			
 
				+| `--silent`      | `-s`  | Mute output                                                                                                          | `false` |
			
 
				+| `--dry-run`     |       | Preview all changes without writing files                                                                            | `false` |
			
 
				+| `--diff [path]` |       | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`)         | —       |
			
 
				+| `--view [path]` |       | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | —       |
			
 
				+
			
 
				+#### Dry-Run Mode
			
 
				+
			
 
				+Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.
			
 
				+
			
 
				+```bash
			
 
				+# Preview all changes.
			
 
				+npx shadcn@latest add button --dry-run
			
 
				+
			
 
				+# Show diffs for all files (top 5).
			
 
				+npx shadcn@latest add button --diff
			
 
				+
			
 
				+# Show the diff for a specific file.
			
 
				+npx shadcn@latest add button --diff button.tsx
			
 
				+
			
 
				+# Show contents for all files (top 5).
			
 
				+npx shadcn@latest add button --view
			
 
				+
			
 
				+# Show the full content of a specific file.
			
 
				+npx shadcn@latest add button --view button.tsx
			
 
				+
			
 
				+# Works with URLs too.
			
 
				+npx shadcn@latest add https://api.npoint.io/abc123 --dry-run
			
 
				+
			
 
				+# CSS diffs.
			
 
				+npx shadcn@latest add button --diff globals.css
			
 
				+```
			
 
				+
			
 
				+**When to use dry-run:**
			
 
				+
			
 
				+- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.
			
 
				+- Before overwriting existing components — use `--diff` to preview the changes first.
			
 
				+- When the user wants to inspect component source code without installing — use `--view`.
			
 
				+- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.
			
 
				+- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.
			
 
				+
			
 
				+> **`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`:** Prefer `npx shadcn@latest add --dry-run/--diff/--view` over `npx shadcn@latest view` when the user wants to preview changes to their project. `npx shadcn@latest view` only shows raw registry metadata. `npx shadcn@latest add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `npx shadcn@latest view` only when the user wants to browse registry info without a project context.
			
 
				+
			
 
				+#### Smart Merge from Upstream
			
 
				+
			
 
				+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.
			
 
				+
			
 
				+### `search` — Search registries
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest search <registries...> [options]
			
 
				+```
			
 
				+
			
 
				+Fuzzy search across registries. Also aliased as `npx shadcn@latest list`. Without `-q`, lists all items.
			
 
				+
			
 
				+| Flag                | Short | Description            | Default |
			
 
				+| ------------------- | ----- | ---------------------- | ------- |
			
 
				+| `--query <query>`   | `-q`  | Search query           | —       |
			
 
				+| `--limit <number>`  | `-l`  | Max items per registry | `100`   |
			
 
				+| `--offset <number>` | `-o`  | Items to skip          | `0`     |
			
 
				+| `--cwd <cwd>`       | `-c`  | Working directory      | current |
			
 
				+
			
 
				+### `view` — View item details
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest view <items...> [options]
			
 
				+```
			
 
				+
			
 
				+Displays item info including file contents. Example: `npx shadcn@latest view @shadcn/button`.
			
 
				+
			
 
				+### `docs` — Get component documentation URLs
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest docs <components...> [options]
			
 
				+```
			
 
				+
			
 
				+Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
			
 
				+
			
 
				+Example output for `npx shadcn@latest docs input button`:
			
 
				+
			
 
				+```
			
 
				+base  radix
			
 
				+
			
 
				+input
			
 
				+  docs      https://ui.shadcn.com/docs/components/radix/input
			
 
				+  examples  https://raw.githubusercontent.com/.../examples/input-example.tsx
			
 
				+
			
 
				+button
			
 
				+  docs      https://ui.shadcn.com/docs/components/radix/button
			
 
				+  examples  https://raw.githubusercontent.com/.../examples/button-example.tsx
			
 
				+```
			
 
				+
			
 
				+Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).
			
 
				+
			
 
				+### `diff` — Check for updates
			
 
				+
			
 
				+Do not use this command. Use `npx shadcn@latest add --diff` instead.
			
 
				+
			
 
				+### `info` — Project information
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest info [options]
			
 
				+```
			
 
				+
			
 
				+Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
			
 
				+
			
 
				+| Flag          | Short | Description       | Default |
			
 
				+| ------------- | ----- | ----------------- | ------- |
			
 
				+| `--cwd <cwd>` | `-c`  | Working directory | current |
			
 
				+
			
 
				+**Project Info fields:**
			
 
				+
			
 
				+| Field                | Type      | Meaning                                                            |
			
 
				+| -------------------- | --------- | ------------------------------------------------------------------ |
			
 
				+| `framework`          | `string`  | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |
			
 
				+| `frameworkVersion`   | `string`  | Framework version (e.g. `15.2.4`)                                  |
			
 
				+| `isSrcDir`           | `boolean` | Whether the project uses a `src/` directory                        |
			
 
				+| `isRSC`              | `boolean` | Whether React Server Components are enabled                        |
			
 
				+| `isTsx`              | `boolean` | Whether the project uses TypeScript                                |
			
 
				+| `tailwindVersion`    | `string`  | `"v3"` or `"v4"`                                                   |
			
 
				+| `tailwindConfigFile` | `string`  | Path to the Tailwind config file                                   |
			
 
				+| `tailwindCssFile`    | `string`  | Path to the global CSS file                                        |
			
 
				+| `aliasPrefix`        | `string`  | Import alias prefix (e.g. `@`, `~`, `@/`)                          |
			
 
				+| `packageManager`     | `string`  | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`)            |
			
 
				+
			
 
				+**Components.json fields:**
			
 
				+
			
 
				+| Field                | Type      | Meaning                                                                                    |
			
 
				+| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
			
 
				+| `base`               | `string`  | Primitive library (`radix` or `base`) — determines component APIs and available props      |
			
 
				+| `style`              | `string`  | Visual style (e.g. `nova`, `vega`)                                                         |
			
 
				+| `rsc`                | `boolean` | RSC flag from config                                                                       |
			
 
				+| `tsx`                | `boolean` | TypeScript flag                                                                            |
			
 
				+| `tailwind.config`    | `string`  | Tailwind config path                                                                       |
			
 
				+| `tailwind.css`       | `string`  | Global CSS path — this is where custom CSS variables go                                    |
			
 
				+| `iconLibrary`        | `string`  | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |
			
 
				+| `aliases.components` | `string`  | Component import alias (e.g. `@/components`)                                               |
			
 
				+| `aliases.utils`      | `string`  | Utils import alias (e.g. `@/lib/utils`)                                                    |
			
 
				+| `aliases.ui`         | `string`  | UI component alias (e.g. `@/components/ui`)                                                |
			
 
				+| `aliases.lib`        | `string`  | Lib alias (e.g. `@/lib`)                                                                   |
			
 
				+| `aliases.hooks`      | `string`  | Hooks alias (e.g. `@/hooks`)                                                               |
			
 
				+| `resolvedPaths`      | `object`  | Absolute file-system paths for each alias                                                  |
			
 
				+| `registries`         | `object`  | Configured custom registries                                                               |
			
 
				+
			
 
				+**Links fields:**
			
 
				+
			
 
				+The `info` output includes a **Links** section with templated URLs for component docs, source, and examples. For resolved URLs, use `npx shadcn@latest docs <component>` instead.
			
 
				+
			
 
				+### `build` — Build a custom registry
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest build [registry] [options]
			
 
				+```
			
 
				+
			
 
				+Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.
			
 
				+
			
 
				+| Flag              | Short | Description       | Default      |
			
 
				+| ----------------- | ----- | ----------------- | ------------ |
			
 
				+| `--output <path>` | `-o`  | Output directory  | `./public/r` |
			
 
				+| `--cwd <cwd>`     | `-c`  | Working directory | current      |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Templates
			
 
				+
			
 
				+| Value          | Framework      | Monorepo support |
			
 
				+| -------------- | -------------- | ---------------- |
			
 
				+| `next`         | Next.js        | Yes              |
			
 
				+| `vite`         | Vite           | Yes              |
			
 
				+| `start`        | TanStack Start | Yes              |
			
 
				+| `react-router` | React Router   | Yes              |
			
 
				+| `astro`        | Astro          | Yes              |
			
 
				+| `laravel`      | Laravel        | No               |
			
 
				+
			
 
				+All templates support monorepo scaffolding via the `--monorepo` flag. When passed, the CLI uses a monorepo-specific template directory (e.g. `next-monorepo`, `vite-monorepo`). When neither `--monorepo` nor `--no-monorepo` is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Presets
			
 
				+
			
 
				+Three ways to specify a preset via `--preset`:
			
 
				+
			
 
				+1. **Named:** `--preset nova` or `--preset lyra`
			
 
				+2. **Code:** `--preset a2r6bw` (version-prefixed base62 string, e.g. `a2r6bw` or `b0`)
			
 
				+3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`
			
 
				+
			
 
				+> **IMPORTANT:** Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to `npx shadcn@latest init --preset <code>` and let the CLI handle resolution.
			
 
				+> Use `npx shadcn@latest apply --preset <code>` when overwriting an existing project's preset.
			
 
				+
			
 
				+## Switching Presets
			
 
				+
			
 
				+Ask the user first: **overwrite**, **merge**, or **skip** existing components?
			
 
				+
			
 
				+- **Overwrite / Re-install** → `npx shadcn@latest apply --preset <code>`. Overwrites all detected component files with the new preset styles. Use when the user hasn't customized components.
			
 
				+- **Merge** → `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to get the list of installed components and use the [smart merge workflow](./SKILL.md#updating-components) to update them one by one, preserving local changes. Use when the user has customized components.
			
 
				+- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.
			
 
				+
			
 
				+Always run preset commands inside the user's project directory. `apply` only works in an existing project with a `components.json` file. The CLI automatically preserves the current base (`base` vs `radix`) from `components.json`. If you must use a scratch/temp directory (e.g. for `--dry-run` comparisons), pass `--base <current-base>` explicitly — preset codes do not encode the base.
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/customization.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/customization.md
@@ -0,0 +1,209 @@
 
				+# Customization & Theming
			
 
				+
			
 
				+Components reference semantic CSS variable tokens. Change the variables to change every component.
			
 
				+
			
 
				+## Contents
			
 
				+
			
 
				+- How it works (CSS variables → Tailwind utilities → components)
			
 
				+- Color variables and OKLCH format
			
 
				+- Dark mode setup
			
 
				+- Changing the theme (presets, CSS variables)
			
 
				+- Adding custom colors (Tailwind v3 and v4)
			
 
				+- Border radius
			
 
				+- Customizing components (variants, className, wrappers)
			
 
				+- Checking for updates
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## How It Works
			
 
				+
			
 
				+1. CSS variables defined in `:root` (light) and `.dark` (dark mode).
			
 
				+2. Tailwind maps them to utilities: `bg-primary`, `text-muted-foreground`, etc.
			
 
				+3. Components use these utilities — changing a variable changes all components that reference it.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Color Variables
			
 
				+
			
 
				+Every color follows the `name` / `name-foreground` convention. The base variable is for backgrounds, `-foreground` is for text/icons on that background.
			
 
				+
			
 
				+| Variable                                     | Purpose                          |
			
 
				+| -------------------------------------------- | -------------------------------- |
			
 
				+| `--background` / `--foreground`              | Page background and default text |
			
 
				+| `--card` / `--card-foreground`               | Card surfaces                    |
			
 
				+| `--primary` / `--primary-foreground`         | Primary buttons and actions      |
			
 
				+| `--secondary` / `--secondary-foreground`     | Secondary actions                |
			
 
				+| `--muted` / `--muted-foreground`             | Muted/disabled states            |
			
 
				+| `--accent` / `--accent-foreground`           | Hover and accent states          |
			
 
				+| `--destructive` / `--destructive-foreground` | Error and destructive actions    |
			
 
				+| `--border`                                   | Default border color             |
			
 
				+| `--input`                                    | Form input borders               |
			
 
				+| `--ring`                                     | Focus ring color                 |
			
 
				+| `--chart-1` through `--chart-5`              | Chart/data visualization         |
			
 
				+| `--sidebar-*`                                | Sidebar-specific colors          |
			
 
				+| `--surface` / `--surface-foreground`         | Secondary surface                |
			
 
				+
			
 
				+Colors use OKLCH: `--primary: oklch(0.205 0 0)` where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Dark Mode
			
 
				+
			
 
				+Class-based toggle via `.dark` on the root element. In Next.js, use `next-themes`:
			
 
				+
			
 
				+```tsx
			
 
				+import { ThemeProvider } from "next-themes"
			
 
				+
			
 
				+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
			
 
				+  {children}
			
 
				+</ThemeProvider>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Changing the Theme
			
 
				+
			
 
				+```bash
			
 
				+# Apply a preset code from ui.shadcn.com.
			
 
				+npx shadcn@latest apply --preset a2r6bw
			
 
				+
			
 
				+# Positional shorthand also works.
			
 
				+npx shadcn@latest apply a2r6bw
			
 
				+
			
 
				+# Switch to a named preset and overwrite existing components.
			
 
				+npx shadcn@latest apply --preset nova
			
 
				+
			
 
				+# Preserve existing components instead.
			
 
				+npx shadcn@latest init --preset nova --force --no-reinstall
			
 
				+
			
 
				+# Use a custom theme URL.
			
 
				+npx shadcn@latest apply --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..."
			
 
				+```
			
 
				+
			
 
				+Or edit CSS variables directly in `globals.css`.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Adding Custom Colors
			
 
				+
			
 
				+Add variables to the file at `tailwindCssFile` from `npx shadcn@latest info` (typically `globals.css`). Never create a new CSS file for this.
			
 
				+
			
 
				+```css
			
 
				+/* 1. Define in the global CSS file. */
			
 
				+:root {
			
 
				+  --warning: oklch(0.84 0.16 84);
			
 
				+  --warning-foreground: oklch(0.28 0.07 46);
			
 
				+}
			
 
				+.dark {
			
 
				+  --warning: oklch(0.41 0.11 46);
			
 
				+  --warning-foreground: oklch(0.99 0.02 95);
			
 
				+}
			
 
				+```
			
 
				+
			
 
				+```css
			
 
				+/* 2a. Register with Tailwind v4 (@theme inline). */
			
 
				+@theme inline {
			
 
				+  --color-warning: var(--warning);
			
 
				+  --color-warning-foreground: var(--warning-foreground);
			
 
				+}
			
 
				+```
			
 
				+
			
 
				+When `tailwindVersion` is `"v3"` (check via `npx shadcn@latest info`), register in `tailwind.config.js` instead:
			
 
				+
			
 
				+```js
			
 
				+// 2b. Register with Tailwind v3 (tailwind.config.js).
			
 
				+module.exports = {
			
 
				+  theme: {
			
 
				+    extend: {
			
 
				+      colors: {
			
 
				+        warning: "oklch(var(--warning) / <alpha-value>)",
			
 
				+        "warning-foreground":
			
 
				+          "oklch(var(--warning-foreground) / <alpha-value>)",
			
 
				+      },
			
 
				+    },
			
 
				+  },
			
 
				+}
			
 
				+```
			
 
				+
			
 
				+```tsx
			
 
				+// 3. Use in components.
			
 
				+<div className="bg-warning text-warning-foreground">Warning</div>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Border Radius
			
 
				+
			
 
				+`--radius` controls border radius globally. Components derive values from it (`rounded-lg` = `var(--radius)`, `rounded-md` = `calc(var(--radius) - 2px)`).
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Customizing Components
			
 
				+
			
 
				+See also: [rules/styling.md](./rules/styling.md) for Incorrect/Correct examples.
			
 
				+
			
 
				+Prefer these approaches in order:
			
 
				+
			
 
				+### 1. Built-in variants
			
 
				+
			
 
				+```tsx
			
 
				+<Button variant="outline" size="sm">
			
 
				+  Click
			
 
				+</Button>
			
 
				+```
			
 
				+
			
 
				+### 2. Tailwind classes via `className`
			
 
				+
			
 
				+```tsx
			
 
				+<Card className="mx-auto max-w-md">...</Card>
			
 
				+```
			
 
				+
			
 
				+### 3. Add a new variant
			
 
				+
			
 
				+Edit the component source to add a variant via `cva`:
			
 
				+
			
 
				+```tsx
			
 
				+// components/ui/button.tsx
			
 
				+warning: "bg-warning text-warning-foreground hover:bg-warning/90",
			
 
				+```
			
 
				+
			
 
				+### 4. Wrapper components
			
 
				+
			
 
				+Compose shadcn/ui primitives into higher-level components:
			
 
				+
			
 
				+```tsx
			
 
				+export function ConfirmDialog({ title, description, onConfirm, children }) {
			
 
				+  return (
			
 
				+    <AlertDialog>
			
 
				+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
			
 
				+      <AlertDialogContent>
			
 
				+        <AlertDialogHeader>
			
 
				+          <AlertDialogTitle>{title}</AlertDialogTitle>
			
 
				+          <AlertDialogDescription>{description}</AlertDialogDescription>
			
 
				+        </AlertDialogHeader>
			
 
				+        <AlertDialogFooter>
			
 
				+          <AlertDialogCancel>Cancel</AlertDialogCancel>
			
 
				+          <AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
			
 
				+        </AlertDialogFooter>
			
 
				+      </AlertDialogContent>
			
 
				+    </AlertDialog>
			
 
				+  )
			
 
				+}
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Checking for Updates
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest add button --diff
			
 
				+```
			
 
				+
			
 
				+To preview exactly what would change before updating, use `--dry-run` and `--diff`:
			
 
				+
			
 
				+```bash
			
 
				+npx shadcn@latest add button --dry-run        # see all affected files
			
 
				+npx shadcn@latest add button --diff button.tsx # see the diff for a specific file
			
 
				+```
			
 
				+
			
 
				+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full smart merge workflow.
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/mcp.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/mcp.md
@@ -0,0 +1,94 @@
 
				+# shadcn MCP Server
			
 
				+
			
 
				+The CLI includes an MCP server that lets AI assistants search, browse, view, and install components from registries.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Setup
			
 
				+
			
 
				+```bash
			
 
				+shadcn mcp        # start the MCP server (stdio)
			
 
				+shadcn mcp init   # write config for your editor
			
 
				+```
			
 
				+
			
 
				+Editor config files:
			
 
				+
			
 
				+| Editor | Config file |
			
 
				+|--------|------------|
			
 
				+| Claude Code | `.mcp.json` |
			
 
				+| Cursor | `.cursor/mcp.json` |
			
 
				+| VS Code | `.vscode/mcp.json` |
			
 
				+| OpenCode | `opencode.json` |
			
 
				+| Codex | `~/.codex/config.toml` (manual) |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Tools
			
 
				+
			
 
				+> **Tip:** MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use `npx shadcn@latest info` — there is no MCP equivalent.
			
 
				+
			
 
				+### `shadcn:get_project_registries`
			
 
				+
			
 
				+Returns registry names from `components.json`. Errors if no `components.json` exists.
			
 
				+
			
 
				+**Input:** none
			
 
				+
			
 
				+### `shadcn:list_items_in_registries`
			
 
				+
			
 
				+Lists all items from one or more registries.
			
 
				+
			
 
				+**Input:** `registries` (string[]), `limit` (number, optional), `offset` (number, optional)
			
 
				+
			
 
				+### `shadcn:search_items_in_registries`
			
 
				+
			
 
				+Fuzzy search across registries.
			
 
				+
			
 
				+**Input:** `registries` (string[]), `query` (string), `limit` (number, optional), `offset` (number, optional)
			
 
				+
			
 
				+### `shadcn:view_items_in_registries`
			
 
				+
			
 
				+View item details including full file contents.
			
 
				+
			
 
				+**Input:** `items` (string[]) — e.g. `["@shadcn/button", "@shadcn/card"]`
			
 
				+
			
 
				+### `shadcn:get_item_examples_from_registries`
			
 
				+
			
 
				+Find usage examples and demos with source code.
			
 
				+
			
 
				+**Input:** `registries` (string[]), `query` (string) — e.g. `"accordion-demo"`, `"button example"`
			
 
				+
			
 
				+### `shadcn:get_add_command_for_items`
			
 
				+
			
 
				+Returns the CLI install command.
			
 
				+
			
 
				+**Input:** `items` (string[]) — e.g. `["@shadcn/button"]`
			
 
				+
			
 
				+### `shadcn:get_audit_checklist`
			
 
				+
			
 
				+Returns a checklist for verifying components (imports, deps, lint, TypeScript).
			
 
				+
			
 
				+**Input:** none
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Configuring Registries
			
 
				+
			
 
				+Registries are set in `components.json`. The `@shadcn` registry is always built-in.
			
 
				+
			
 
				+```json
			
 
				+{
			
 
				+  "registries": {
			
 
				+    "@acme": "https://acme.com/r/{name}.json",
			
 
				+    "@private": {
			
 
				+      "url": "https://private.com/r/{name}.json",
			
 
				+      "headers": { "Authorization": "Bearer ${MY_TOKEN}" }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+```
			
 
				+
			
 
				+- Names must start with `@`.
			
 
				+- URLs must contain `{name}`.
			
 
				+- `${VAR}` references are resolved from environment variables.
			
 
				+
			
 
				+Community registry index: `https://ui.shadcn.com/r/registries.json`
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/rules/base-vs-radix.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/base-vs-radix.md
@@ -0,0 +1,306 @@
 
				+# Base vs Radix
			
 
				+
			
 
				+API differences between `base` and `radix`. Check the `base` field from `npx shadcn@latest info`.
			
 
				+
			
 
				+## Contents
			
 
				+
			
 
				+- Composition: asChild vs render
			
 
				+- Button / trigger as non-button element
			
 
				+- Select (items prop, placeholder, positioning, multiple, object values)
			
 
				+- ToggleGroup (type vs multiple)
			
 
				+- Slider (scalar vs array)
			
 
				+- Accordion (type and defaultValue)
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Composition: asChild (radix) vs render (base)
			
 
				+
			
 
				+Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<DialogTrigger>
			
 
				+  <div>
			
 
				+    <Button>Open</Button>
			
 
				+  </div>
			
 
				+</DialogTrigger>
			
 
				+```
			
 
				+
			
 
				+**Correct (radix):**
			
 
				+
			
 
				+```tsx
			
 
				+<DialogTrigger asChild>
			
 
				+  <Button>Open</Button>
			
 
				+</DialogTrigger>
			
 
				+```
			
 
				+
			
 
				+**Correct (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<DialogTrigger render={<Button />}>Open</DialogTrigger>
			
 
				+```
			
 
				+
			
 
				+This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Button / trigger as non-button element (base only)
			
 
				+
			
 
				+When `render` changes an element to a non-button (`<a>`, `<span>`), add `nativeButton={false}`.
			
 
				+
			
 
				+**Incorrect (base):** missing `nativeButton={false}`.
			
 
				+
			
 
				+```tsx
			
 
				+<Button render={<a href="/docs" />}>Read the docs</Button>
			
 
				+```
			
 
				+
			
 
				+**Correct (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<Button render={<a href="/docs" />} nativeButton={false}>
			
 
				+  Read the docs
			
 
				+</Button>
			
 
				+```
			
 
				+
			
 
				+**Correct (radix):**
			
 
				+
			
 
				+```tsx
			
 
				+<Button asChild>
			
 
				+  <a href="/docs">Read the docs</a>
			
 
				+</Button>
			
 
				+```
			
 
				+
			
 
				+Same for triggers whose `render` is not a `Button`:
			
 
				+
			
 
				+```tsx
			
 
				+// base.
			
 
				+<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
			
 
				+  Pick date
			
 
				+</PopoverTrigger>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Select
			
 
				+
			
 
				+**items prop (base only).** Base requires an `items` prop on the root. Radix uses inline JSX only.
			
 
				+
			
 
				+**Incorrect (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<Select>
			
 
				+  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
			
 
				+</Select>
			
 
				+```
			
 
				+
			
 
				+**Correct (base):**
			
 
				+
			
 
				+```tsx
			
 
				+const items = [
			
 
				+  { label: "Select a fruit", value: null },
			
 
				+  { label: "Apple", value: "apple" },
			
 
				+  { label: "Banana", value: "banana" },
			
 
				+]
			
 
				+
			
 
				+<Select items={items}>
			
 
				+  <SelectTrigger>
			
 
				+    <SelectValue />
			
 
				+  </SelectTrigger>
			
 
				+  <SelectContent>
			
 
				+    <SelectGroup>
			
 
				+      {items.map((item) => (
			
 
				+        <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
			
 
				+      ))}
			
 
				+    </SelectGroup>
			
 
				+  </SelectContent>
			
 
				+</Select>
			
 
				+```
			
 
				+
			
 
				+**Correct (radix):**
			
 
				+
			
 
				+```tsx
			
 
				+<Select>
			
 
				+  <SelectTrigger>
			
 
				+    <SelectValue placeholder="Select a fruit" />
			
 
				+  </SelectTrigger>
			
 
				+  <SelectContent>
			
 
				+    <SelectGroup>
			
 
				+      <SelectItem value="apple">Apple</SelectItem>
			
 
				+      <SelectItem value="banana">Banana</SelectItem>
			
 
				+    </SelectGroup>
			
 
				+  </SelectContent>
			
 
				+</Select>
			
 
				+```
			
 
				+
			
 
				+**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses `<SelectValue placeholder="...">`.
			
 
				+
			
 
				+**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`.
			
 
				+
			
 
				+```tsx
			
 
				+// base.
			
 
				+<SelectContent alignItemWithTrigger={false} side="bottom">
			
 
				+
			
 
				+// radix.
			
 
				+<SelectContent position="popper">
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Select — multiple selection and object values (base only)
			
 
				+
			
 
				+Base supports `multiple`, render-function children on `SelectValue`, and object values with `itemToStringValue`. Radix is single-select with string values only.
			
 
				+
			
 
				+**Correct (base — multiple selection):**
			
 
				+
			
 
				+```tsx
			
 
				+<Select items={items} multiple defaultValue={[]}>
			
 
				+  <SelectTrigger>
			
 
				+    <SelectValue>
			
 
				+      {(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
			
 
				+    </SelectValue>
			
 
				+  </SelectTrigger>
			
 
				+  ...
			
 
				+</Select>
			
 
				+```
			
 
				+
			
 
				+**Correct (base — object values):**
			
 
				+
			
 
				+```tsx
			
 
				+<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
			
 
				+  <SelectTrigger>
			
 
				+    <SelectValue>{(value) => value.name}</SelectValue>
			
 
				+  </SelectTrigger>
			
 
				+  ...
			
 
				+</Select>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## ToggleGroup
			
 
				+
			
 
				+Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`.
			
 
				+
			
 
				+**Incorrect (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<ToggleGroup type="single" defaultValue="daily">
			
 
				+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
			
 
				+</ToggleGroup>
			
 
				+```
			
 
				+
			
 
				+**Correct (base):**
			
 
				+
			
 
				+```tsx
			
 
				+// Single (no prop needed), defaultValue is always an array.
			
 
				+<ToggleGroup defaultValue={["daily"]} spacing={2}>
			
 
				+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
			
 
				+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
			
 
				+</ToggleGroup>
			
 
				+
			
 
				+// Multi-selection.
			
 
				+<ToggleGroup multiple>
			
 
				+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
			
 
				+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
			
 
				+</ToggleGroup>
			
 
				+```
			
 
				+
			
 
				+**Correct (radix):**
			
 
				+
			
 
				+```tsx
			
 
				+// Single, defaultValue is a string.
			
 
				+<ToggleGroup type="single" defaultValue="daily" spacing={2}>
			
 
				+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
			
 
				+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
			
 
				+</ToggleGroup>
			
 
				+
			
 
				+// Multi-selection.
			
 
				+<ToggleGroup type="multiple">
			
 
				+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
			
 
				+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
			
 
				+</ToggleGroup>
			
 
				+```
			
 
				+
			
 
				+**Controlled single value:**
			
 
				+
			
 
				+```tsx
			
 
				+// base — wrap/unwrap arrays.
			
 
				+const [value, setValue] = React.useState("normal")
			
 
				+<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>
			
 
				+
			
 
				+// radix — plain string.
			
 
				+const [value, setValue] = React.useState("normal")
			
 
				+<ToggleGroup type="single" value={value} onValueChange={setValue}>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Slider
			
 
				+
			
 
				+Base accepts a plain number for a single thumb. Radix always requires an array.
			
 
				+
			
 
				+**Incorrect (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<Slider defaultValue={[50]} max={100} step={1} />
			
 
				+```
			
 
				+
			
 
				+**Correct (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<Slider defaultValue={50} max={100} step={1} />
			
 
				+```
			
 
				+
			
 
				+**Correct (radix):**
			
 
				+
			
 
				+```tsx
			
 
				+<Slider defaultValue={[50]} max={100} step={1} />
			
 
				+```
			
 
				+
			
 
				+Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
			
 
				+
			
 
				+```tsx
			
 
				+// base.
			
 
				+const [value, setValue] = React.useState([0.3, 0.7])
			
 
				+<Slider value={value} onValueChange={(v) => setValue(v as number[])} />
			
 
				+
			
 
				+// radix.
			
 
				+const [value, setValue] = React.useState([0.3, 0.7])
			
 
				+<Slider value={value} onValueChange={setValue} />
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Accordion
			
 
				+
			
 
				+Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. `defaultValue` is a string. Base uses no `type` prop, uses `multiple` boolean, and `defaultValue` is always an array.
			
 
				+
			
 
				+**Incorrect (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<Accordion type="single" collapsible defaultValue="item-1">
			
 
				+  <AccordionItem value="item-1">...</AccordionItem>
			
 
				+</Accordion>
			
 
				+```
			
 
				+
			
 
				+**Correct (base):**
			
 
				+
			
 
				+```tsx
			
 
				+<Accordion defaultValue={["item-1"]}>
			
 
				+  <AccordionItem value="item-1">...</AccordionItem>
			
 
				+</Accordion>
			
 
				+
			
 
				+// Multi-select.
			
 
				+<Accordion multiple defaultValue={["item-1", "item-2"]}>
			
 
				+  <AccordionItem value="item-1">...</AccordionItem>
			
 
				+  <AccordionItem value="item-2">...</AccordionItem>
			
 
				+</Accordion>
			
 
				+```
			
 
				+
			
 
				+**Correct (radix):**
			
 
				+
			
 
				+```tsx
			
 
				+<Accordion type="single" collapsible defaultValue="item-1">
			
 
				+  <AccordionItem value="item-1">...</AccordionItem>
			
 
				+</Accordion>
			
 
				+```
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/rules/composition.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/composition.md
@@ -0,0 +1,195 @@
 
				+# Component Composition
			
 
				+
			
 
				+## Contents
			
 
				+
			
 
				+- Items always inside their Group component
			
 
				+- Callouts use Alert
			
 
				+- Empty states use Empty component
			
 
				+- Toast notifications use sonner
			
 
				+- Choosing between overlay components
			
 
				+- Dialog, Sheet, and Drawer always need a Title
			
 
				+- Card structure
			
 
				+- Button has no isPending or isLoading prop
			
 
				+- TabsTrigger must be inside TabsList
			
 
				+- Avatar always needs AvatarFallback
			
 
				+- Use Separator instead of raw hr or border divs
			
 
				+- Use Skeleton for loading placeholders
			
 
				+- Use Badge instead of custom styled spans
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Items always inside their Group component
			
 
				+
			
 
				+Never render items directly inside the content container.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<SelectContent>
			
 
				+  <SelectItem value="apple">Apple</SelectItem>
			
 
				+  <SelectItem value="banana">Banana</SelectItem>
			
 
				+</SelectContent>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+<SelectContent>
			
 
				+  <SelectGroup>
			
 
				+    <SelectItem value="apple">Apple</SelectItem>
			
 
				+    <SelectItem value="banana">Banana</SelectItem>
			
 
				+  </SelectGroup>
			
 
				+</SelectContent>
			
 
				+```
			
 
				+
			
 
				+This applies to all group-based components:
			
 
				+
			
 
				+| Item | Group |
			
 
				+|------|-------|
			
 
				+| `SelectItem`, `SelectLabel` | `SelectGroup` |
			
 
				+| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
			
 
				+| `MenubarItem` | `MenubarGroup` |
			
 
				+| `ContextMenuItem` | `ContextMenuGroup` |
			
 
				+| `CommandItem` | `CommandGroup` |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Callouts use Alert
			
 
				+
			
 
				+```tsx
			
 
				+<Alert>
			
 
				+  <AlertTitle>Warning</AlertTitle>
			
 
				+  <AlertDescription>Something needs attention.</AlertDescription>
			
 
				+</Alert>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Empty states use Empty component
			
 
				+
			
 
				+```tsx
			
 
				+<Empty>
			
 
				+  <EmptyHeader>
			
 
				+    <EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
			
 
				+    <EmptyTitle>No projects yet</EmptyTitle>
			
 
				+    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
			
 
				+  </EmptyHeader>
			
 
				+  <EmptyContent>
			
 
				+    <Button>Create Project</Button>
			
 
				+  </EmptyContent>
			
 
				+</Empty>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Toast notifications use sonner
			
 
				+
			
 
				+```tsx
			
 
				+import { toast } from "sonner"
			
 
				+
			
 
				+toast.success("Changes saved.")
			
 
				+toast.error("Something went wrong.")
			
 
				+toast("File deleted.", {
			
 
				+  action: { label: "Undo", onClick: () => undoDelete() },
			
 
				+})
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Choosing between overlay components
			
 
				+
			
 
				+| Use case | Component |
			
 
				+|----------|-----------|
			
 
				+| Focused task that requires input | `Dialog` |
			
 
				+| Destructive action confirmation | `AlertDialog` |
			
 
				+| Side panel with details or filters | `Sheet` |
			
 
				+| Mobile-first bottom panel | `Drawer` |
			
 
				+| Quick info on hover | `HoverCard` |
			
 
				+| Small contextual content on click | `Popover` |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Dialog, Sheet, and Drawer always need a Title
			
 
				+
			
 
				+`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
			
 
				+
			
 
				+```tsx
			
 
				+<DialogContent>
			
 
				+  <DialogHeader>
			
 
				+    <DialogTitle>Edit Profile</DialogTitle>
			
 
				+    <DialogDescription>Update your profile.</DialogDescription>
			
 
				+  </DialogHeader>
			
 
				+  ...
			
 
				+</DialogContent>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Card structure
			
 
				+
			
 
				+Use full composition — don't dump everything into `CardContent`:
			
 
				+
			
 
				+```tsx
			
 
				+<Card>
			
 
				+  <CardHeader>
			
 
				+    <CardTitle>Team Members</CardTitle>
			
 
				+    <CardDescription>Manage your team.</CardDescription>
			
 
				+  </CardHeader>
			
 
				+  <CardContent>...</CardContent>
			
 
				+  <CardFooter>
			
 
				+    <Button>Invite</Button>
			
 
				+  </CardFooter>
			
 
				+</Card>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Button has no isPending or isLoading prop
			
 
				+
			
 
				+Compose with `Spinner` + `data-icon` + `disabled`:
			
 
				+
			
 
				+```tsx
			
 
				+<Button disabled>
			
 
				+  <Spinner data-icon="inline-start" />
			
 
				+  Saving...
			
 
				+</Button>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## TabsTrigger must be inside TabsList
			
 
				+
			
 
				+Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
			
 
				+
			
 
				+```tsx
			
 
				+<Tabs defaultValue="account">
			
 
				+  <TabsList>
			
 
				+    <TabsTrigger value="account">Account</TabsTrigger>
			
 
				+    <TabsTrigger value="password">Password</TabsTrigger>
			
 
				+  </TabsList>
			
 
				+  <TabsContent value="account">...</TabsContent>
			
 
				+</Tabs>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Avatar always needs AvatarFallback
			
 
				+
			
 
				+Always include `AvatarFallback` for when the image fails to load:
			
 
				+
			
 
				+```tsx
			
 
				+<Avatar>
			
 
				+  <AvatarImage src="/avatar.png" alt="User" />
			
 
				+  <AvatarFallback>JD</AvatarFallback>
			
 
				+</Avatar>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Use existing components instead of custom markup
			
 
				+
			
 
				+| Instead of | Use |
			
 
				+|---|---|
			
 
				+| `<hr>` or `<div className="border-t">` | `<Separator />` |
			
 
				+| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
			
 
				+| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/rules/forms.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/forms.md
@@ -0,0 +1,192 @@
 
				+# Forms & Inputs
			
 
				+
			
 
				+## Contents
			
 
				+
			
 
				+- Forms use FieldGroup + Field
			
 
				+- InputGroup requires InputGroupInput/InputGroupTextarea
			
 
				+- Buttons inside inputs use InputGroup + InputGroupAddon
			
 
				+- Option sets (2–7 choices) use ToggleGroup
			
 
				+- FieldSet + FieldLegend for grouping related fields
			
 
				+- Field validation and disabled states
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Forms use FieldGroup + Field
			
 
				+
			
 
				+Always use `FieldGroup` + `Field` — never raw `div` with `space-y-*`:
			
 
				+
			
 
				+```tsx
			
 
				+<FieldGroup>
			
 
				+  <Field>
			
 
				+    <FieldLabel htmlFor="email">Email</FieldLabel>
			
 
				+    <Input id="email" type="email" />
			
 
				+  </Field>
			
 
				+  <Field>
			
 
				+    <FieldLabel htmlFor="password">Password</FieldLabel>
			
 
				+    <Input id="password" type="password" />
			
 
				+  </Field>
			
 
				+</FieldGroup>
			
 
				+```
			
 
				+
			
 
				+Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
			
 
				+
			
 
				+**Choosing form controls:**
			
 
				+
			
 
				+- Simple text input → `Input`
			
 
				+- Dropdown with predefined options → `Select`
			
 
				+- Searchable dropdown → `Combobox`
			
 
				+- Native HTML select (no JS) → `native-select`
			
 
				+- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
			
 
				+- Single choice from few options → `RadioGroup`
			
 
				+- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
			
 
				+- OTP/verification code → `InputOTP`
			
 
				+- Multi-line text → `Textarea`
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## InputGroup requires InputGroupInput/InputGroupTextarea
			
 
				+
			
 
				+Never use raw `Input` or `Textarea` inside an `InputGroup`.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<InputGroup>
			
 
				+  <Input placeholder="Search..." />
			
 
				+</InputGroup>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
			
 
				+
			
 
				+<InputGroup>
			
 
				+  <InputGroupInput placeholder="Search..." />
			
 
				+</InputGroup>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Buttons inside inputs use InputGroup + InputGroupAddon
			
 
				+
			
 
				+Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<div className="relative">
			
 
				+  <Input placeholder="Search..." className="pr-10" />
			
 
				+  <Button className="absolute right-0 top-0" size="icon">
			
 
				+    <SearchIcon />
			
 
				+  </Button>
			
 
				+</div>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
			
 
				+
			
 
				+<InputGroup>
			
 
				+  <InputGroupInput placeholder="Search..." />
			
 
				+  <InputGroupAddon>
			
 
				+    <Button size="icon">
			
 
				+      <SearchIcon data-icon="inline-start" />
			
 
				+    </Button>
			
 
				+  </InputGroupAddon>
			
 
				+</InputGroup>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Option sets (2–7 choices) use ToggleGroup
			
 
				+
			
 
				+Don't manually loop `Button` components with active state.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+const [selected, setSelected] = useState("daily")
			
 
				+
			
 
				+<div className="flex gap-2">
			
 
				+  {["daily", "weekly", "monthly"].map((option) => (
			
 
				+    <Button
			
 
				+      key={option}
			
 
				+      variant={selected === option ? "default" : "outline"}
			
 
				+      onClick={() => setSelected(option)}
			
 
				+    >
			
 
				+      {option}
			
 
				+    </Button>
			
 
				+  ))}
			
 
				+</div>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
			
 
				+
			
 
				+<ToggleGroup spacing={2}>
			
 
				+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
			
 
				+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
			
 
				+  <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
			
 
				+</ToggleGroup>
			
 
				+```
			
 
				+
			
 
				+Combine with `Field` for labelled toggle groups:
			
 
				+
			
 
				+```tsx
			
 
				+<Field orientation="horizontal">
			
 
				+  <FieldTitle id="theme-label">Theme</FieldTitle>
			
 
				+  <ToggleGroup aria-labelledby="theme-label" spacing={2}>
			
 
				+    <ToggleGroupItem value="light">Light</ToggleGroupItem>
			
 
				+    <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
			
 
				+    <ToggleGroupItem value="system">System</ToggleGroupItem>
			
 
				+  </ToggleGroup>
			
 
				+</Field>
			
 
				+```
			
 
				+
			
 
				+> **Note:** `defaultValue` and `type`/`multiple` props differ between base and radix. See [base-vs-radix.md](./base-vs-radix.md#togglegroup).
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## FieldSet + FieldLegend for grouping related fields
			
 
				+
			
 
				+Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
			
 
				+
			
 
				+```tsx
			
 
				+<FieldSet>
			
 
				+  <FieldLegend variant="label">Preferences</FieldLegend>
			
 
				+  <FieldDescription>Select all that apply.</FieldDescription>
			
 
				+  <FieldGroup className="gap-3">
			
 
				+    <Field orientation="horizontal">
			
 
				+      <Checkbox id="dark" />
			
 
				+      <FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
			
 
				+    </Field>
			
 
				+  </FieldGroup>
			
 
				+</FieldSet>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Field validation and disabled states
			
 
				+
			
 
				+Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
			
 
				+
			
 
				+```tsx
			
 
				+// Invalid.
			
 
				+<Field data-invalid>
			
 
				+  <FieldLabel htmlFor="email">Email</FieldLabel>
			
 
				+  <Input id="email" aria-invalid />
			
 
				+  <FieldDescription>Invalid email address.</FieldDescription>
			
 
				+</Field>
			
 
				+
			
 
				+// Disabled.
			
 
				+<Field data-disabled>
			
 
				+  <FieldLabel htmlFor="email">Email</FieldLabel>
			
 
				+  <Input id="email" disabled />
			
 
				+</Field>
			
 
				+```
			
 
				+
			
 
				+Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/rules/icons.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/icons.md
@@ -0,0 +1,101 @@
 
				+# Icons
			
 
				+
			
 
				+**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Icons in Button use data-icon attribute
			
 
				+
			
 
				+Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<Button>
			
 
				+  <SearchIcon className="mr-2 size-4" />
			
 
				+  Search
			
 
				+</Button>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+<Button>
			
 
				+  <SearchIcon data-icon="inline-start"/>
			
 
				+  Search
			
 
				+</Button>
			
 
				+
			
 
				+<Button>
			
 
				+  Next
			
 
				+  <ArrowRightIcon data-icon="inline-end"/>
			
 
				+</Button>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## No sizing classes on icons inside components
			
 
				+
			
 
				+Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<Button>
			
 
				+  <SearchIcon className="size-4" data-icon="inline-start" />
			
 
				+  Search
			
 
				+</Button>
			
 
				+
			
 
				+<DropdownMenuItem>
			
 
				+  <SettingsIcon className="mr-2 size-4" />
			
 
				+  Settings
			
 
				+</DropdownMenuItem>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+<Button>
			
 
				+  <SearchIcon data-icon="inline-start" />
			
 
				+  Search
			
 
				+</Button>
			
 
				+
			
 
				+<DropdownMenuItem>
			
 
				+  <SettingsIcon />
			
 
				+  Settings
			
 
				+</DropdownMenuItem>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Pass icons as component objects, not string keys
			
 
				+
			
 
				+Use `icon={CheckIcon}`, not a string key to a lookup map.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+const iconMap = {
			
 
				+  check: CheckIcon,
			
 
				+  alert: AlertIcon,
			
 
				+}
			
 
				+
			
 
				+function StatusBadge({ icon }: { icon: string }) {
			
 
				+  const Icon = iconMap[icon]
			
 
				+  return <Icon />
			
 
				+}
			
 
				+
			
 
				+<StatusBadge icon="check" />
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
			
 
				+import { CheckIcon } from "lucide-react"
			
 
				+
			
 
				+function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
			
 
				+  return <Icon />
			
 
				+}
			
 
				+
			
 
				+<StatusBadge icon={CheckIcon} />
			
 
				+```
			
--- a/.agents/skills/shadcn-ui/vendor/shadcn/rules/styling.md
+++ b/.agents/skills/shadcn-ui/vendor/shadcn/rules/styling.md
@@ -0,0 +1,162 @@
 
				+# Styling & Customization
			
 
				+
			
 
				+See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
			
 
				+
			
 
				+## Contents
			
 
				+
			
 
				+- Semantic colors
			
 
				+- Built-in variants first
			
 
				+- className for layout only
			
 
				+- No space-x-* / space-y-*
			
 
				+- Prefer size-* over w-* h-* when equal
			
 
				+- Prefer truncate shorthand
			
 
				+- No manual dark: color overrides
			
 
				+- Use cn() for conditional classes
			
 
				+- No manual z-index on overlay components
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Semantic colors
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<div className="bg-blue-500 text-white">
			
 
				+  <p className="text-gray-600">Secondary text</p>
			
 
				+</div>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+<div className="bg-primary text-primary-foreground">
			
 
				+  <p className="text-muted-foreground">Secondary text</p>
			
 
				+</div>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## No raw color values for status/state indicators
			
 
				+
			
 
				+For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<span className="text-emerald-600">+20.1%</span>
			
 
				+<span className="text-green-500">Active</span>
			
 
				+<span className="text-red-600">-3.2%</span>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+<Badge variant="secondary">+20.1%</Badge>
			
 
				+<Badge>Active</Badge>
			
 
				+<span className="text-destructive">-3.2%</span>
			
 
				+```
			
 
				+
			
 
				+If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Built-in variants first
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<Button className="border border-input bg-transparent hover:bg-accent">
			
 
				+  Click me
			
 
				+</Button>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+<Button variant="outline">Click me</Button>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## className for layout only
			
 
				+
			
 
				+Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<Card className="bg-blue-100 text-blue-900 font-bold">
			
 
				+  <CardContent>Dashboard</CardContent>
			
 
				+</Card>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+<Card className="max-w-md mx-auto">
			
 
				+  <CardContent>Dashboard</CardContent>
			
 
				+</Card>
			
 
				+```
			
 
				+
			
 
				+To customize a component's appearance, prefer these approaches in order:
			
 
				+1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
			
 
				+2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
			
 
				+3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## No space-x-* / space-y-*
			
 
				+
			
 
				+Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
			
 
				+
			
 
				+```tsx
			
 
				+<div className="flex flex-col gap-4">
			
 
				+  <Input />
			
 
				+  <Input />
			
 
				+  <Button>Submit</Button>
			
 
				+</div>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Prefer size-* over w-* h-* when equal
			
 
				+
			
 
				+`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Prefer truncate shorthand
			
 
				+
			
 
				+`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## No manual dark: color overrides
			
 
				+
			
 
				+Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Use cn() for conditional classes
			
 
				+
			
 
				+Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.
			
 
				+
			
 
				+**Incorrect:**
			
 
				+
			
 
				+```tsx
			
 
				+<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
			
 
				+```
			
 
				+
			
 
				+**Correct:**
			
 
				+
			
 
				+```tsx
			
 
				+import { cn } from "@/lib/utils"
			
 
				+
			
 
				+<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## No manual z-index on overlay components
			
 
				+
			
 
				+`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.
			
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -0,0 +1,12 @@
 
				+# These are supported funding model platforms
			
 
				+
			
 
				+github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
			
 
				+patreon: # Replace with a single Patreon username
			
 
				+open_collective: # Replace with a single Open Collective username
			
 
				+ko_fi: # Replace with a single Ko-fi username
			
 
				+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
			
 
				+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
			
 
				+liberapay: # Replace with a single Liberapay username
			
 
				+issuehunt: # Replace with a single IssueHunt username
			
 
				+otechie: # Replace with a single Otechie username
			
 
				+custom: ['https://afdian.com/a/new-api'] # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
			
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 
				 ## Tech Stack
			
 
				 
			
 
				 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
			
 
				-- **Frontend**: React 19, TypeScript, Rsbuild, Radix UI, Tailwind CSS
			
 
				+- **Frontend**: React 19, TypeScript, Rsbuild, Base UI, Tailwind CSS
			
 
				 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
			
 
				 - **Cache**: Redis (go-redis) + in-memory cache
			
 
				 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)
			
@@ -34,7 +34,7 @@ i18n/          — Backend internationalization (go-i18n, en/zh)
 
				 oauth/         — OAuth provider implementations
			
 
				 pkg/           — Internal packages (cachex, ionet)
			
 
				 web/             — Frontend themes container
			
 
				-  web/default/   — Default frontend (React 19, Rsbuild, Radix UI, Tailwind)
			
 
				+ web/default/   — Default frontend (React 19, Rsbuild, Base UI, Tailwind)
			
 
				   web/classic/   — Classic frontend (React 18, Vite, Semi Design)
			
 
				   web/default/src/i18n/ — Frontend internationalization (i18next, zh/en/fr/ru/ja/vi)
			
 
				 ```
			
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 
				 ## Tech Stack
			
 
				 
			
 
				 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
			
 
				-- **Frontend**: React 19, TypeScript, Rsbuild, Radix UI, Tailwind CSS
			
 
				+- **Frontend**: React 19, TypeScript, Rsbuild, Base UI, Tailwind CSS
			
 
				 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
			
 
				 - **Cache**: Redis (go-redis) + in-memory cache
			
 
				 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)
			
@@ -34,7 +34,7 @@ i18n/          — Backend internationalization (go-i18n, en/zh)
 
				 oauth/         — OAuth provider implementations
			
 
				 pkg/           — Internal packages (cachex, ionet)
			
 
				 web/             — Frontend themes container
			
 
				-  web/default/   — Default frontend (React 19, Rsbuild, Radix UI, Tailwind)
			
 
				+ web/default/   — Default frontend (React 19, Rsbuild, Base UI, Tailwind)
			
 
				   web/classic/   — Classic frontend (React 18, Vite, Semi Design)
			
 
				   web/default/src/i18n/ — Frontend internationalization (i18next, zh/en/fr/ru/ja/vi)
			
 
				 ```
			
--- a/web/default/AGENTS.md
+++ b/web/default/AGENTS.md
@@ -17,7 +17,7 @@
 
				 | 表格与列表 | @tanstack/react-table、@tanstack/react-virtual |
			
 
				 | 国际化   | i18next、react-i18next、i18next-browser-languagedetector |
			
 
				 | 日期     | Day.js |
			
 
				-| UI 与样式 | Radix UI、Lucide React、Tailwind CSS、clsx / class-variance-authority |
			
 
				+| UI 与样式 | Base UI、Hugeicons、Tailwind CSS、clsx / class-variance-authority |
			
 
				 | 表单     | React Hook Form、Zod |
			
 
				 | 图表     | @visactor/vchart、@visactor/react-vchart |
			
 
				 | 工具     | qrcode.react、prettier、eslint、vitest（可选）|
			
--- a/web/default/bun.lock
+++ b/web/default/bun.lock
@@ -1,35 +1,15 @@
 
				 {
			
 
				   "lockfileVersion": 1,
			
 
				-  "configVersion": 0,
			
 
				   "workspaces": {
			
 
				     "": {
			
 
				       "name": "newapi-web",
			
 
				       "dependencies": {
			
 
				+        "@base-ui/react": "^1.4.1",
			
 
				         "@fontsource-variable/public-sans": "^5.2.7",
			
 
				         "@hookform/resolvers": "^5.2.2",
			
 
				+        "@hugeicons/core-free-icons": "^4.1.1",
			
 
				+        "@hugeicons/react": "^1.1.6",
			
 
				         "@lobehub/icons": "^4.0.3",
			
 
				-        "@radix-ui/react-accordion": "^1.2.12",
			
 
				-        "@radix-ui/react-alert-dialog": "^1.1.15",
			
 
				-        "@radix-ui/react-avatar": "^1.1.11",
			
 
				-        "@radix-ui/react-checkbox": "^1.3.3",
			
 
				-        "@radix-ui/react-collapsible": "^1.1.12",
			
 
				-        "@radix-ui/react-dialog": "^1.1.15",
			
 
				-        "@radix-ui/react-direction": "^1.1.1",
			
 
				-        "@radix-ui/react-dropdown-menu": "^2.1.16",
			
 
				-        "@radix-ui/react-hover-card": "^1.1.15",
			
 
				-        "@radix-ui/react-icons": "^1.3.2",
			
 
				-        "@radix-ui/react-label": "^2.1.8",
			
 
				-        "@radix-ui/react-popover": "^1.1.15",
			
 
				-        "@radix-ui/react-progress": "^1.1.8",
			
 
				-        "@radix-ui/react-radio-group": "^1.3.8",
			
 
				-        "@radix-ui/react-scroll-area": "^1.2.10",
			
 
				-        "@radix-ui/react-select": "^2.2.6",
			
 
				-        "@radix-ui/react-separator": "^1.1.8",
			
 
				-        "@radix-ui/react-slot": "^1.2.4",
			
 
				-        "@radix-ui/react-switch": "^1.2.6",
			
 
				-        "@radix-ui/react-tabs": "^1.1.13",
			
 
				-        "@radix-ui/react-tooltip": "^1.2.8",
			
 
				-        "@radix-ui/react-use-controllable-state": "^1.2.2",
			
 
				         "@tailwindcss/postcss": "^4.2.2",
			
 
				         "@tanstack/react-query": "^5.95.2",
			
 
				         "@tanstack/react-router": "^1.168.23",
			
@@ -43,6 +23,7 @@
 
				         "class-variance-authority": "^0.7.1",
			
 
				         "clsx": "^2.1.1",
			
 
				         "cmdk": "^1.1.1",
			
 
				+        "date-fns": "^4.1.0",
			
 
				         "dayjs": "^1.11.19",
			
 
				         "i18next": "^25.7.4",
			
 
				         "i18next-browser-languagedetector": "^8.2.0",
			
@@ -50,6 +31,7 @@
 
				         "lucide-react": "^1.7.0",
			
 
				         "motion": "^12.38.0",
			
 
				         "nanoid": "^5.1.6",
			
 
				+        "next-themes": "^0.4.6",
			
 
				         "qrcode.react": "^4.2.0",
			
 
				         "react": "^19.2.4",
			
 
				         "react-day-picker": "^9.14.0",
			
@@ -58,7 +40,9 @@
 
				         "react-i18next": "^16.5.2",
			
 
				         "react-icons": "^5.5.0",
			
 
				         "react-markdown": "^10.1.0",
			
 
				+        "react-resizable-panels": "^4.11.0",
			
 
				         "react-top-loading-bar": "^3.0.2",
			
 
				+        "recharts": "3.8.0",
			
 
				         "rehype-raw": "^7.0.0",
			
 
				         "remark-gfm": "^4.0.1",
			
 
				         "shiki": "^4.0.2",
			
@@ -186,9 +170,9 @@
 
				 
			
 
				     "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
			
 
				 
			
 
				-    "@base-ui/react": ["@base-ui/react@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@base-ui/utils": "0.2.3", "@floating-ui/react-dom": "^2.1.6", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "tabbable": "^6.3.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-4USBWz++DUSLTuIYpbYkSgy1F9ZmNG9S/lXvlUN6qMK0P0RlW+6eQmDUB4DgZ7HVvtXl4pvi4z5J2fv6Z3+9hg=="],
			
 
				+    "@base-ui/react": ["@base-ui/react@1.4.1", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@base-ui/utils": "0.2.8", "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw=="],
			
 
				 
			
 
				-    "@base-ui/utils": ["@base-ui/utils@0.2.3", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-/CguQ2PDaOzeVOkllQR8nocJ0FFIDqsWIcURsVmm53QGo8NhFNpePjNlyPIB41luxfOqnG7PU0xicMEw3ls7XQ=="],
			
 
				+    "@base-ui/utils": ["@base-ui/utils@0.2.8", "", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-jvOi+c+ftGlGotNcKnzPVg2IhCaDTB6/6R3JeqdjdXktuAJi3wKH9T7+svuaKh1mmfVU11UWzUZVH74JDfi/wQ=="],
			
 
				 
			
 
				     "@braintree/sanitize-url": ["@braintree/sanitize-url@7.1.2", "", {}, "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA=="],
			
 
				 
			
@@ -340,6 +324,10 @@
 
				 
			
 
				     "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
			
 
				 
			
 
				+    "@hugeicons/core-free-icons": ["@hugeicons/core-free-icons@4.1.1", "", {}, "sha512-teqIBvPHl90ygIwKyJwTxOH8aNp1X1PjDTcMvLkEwdPxPD+8mssrZ5kXKIAJJFYPsz69a8LYQY0UPid4PAdavg=="],
			
 
				+
			
 
				+    "@hugeicons/react": ["@hugeicons/react@1.1.6", "", { "peerDependencies": { "react": ">=16.0.0" } }, "sha512-c2LhXJMAW5wN1pC/smBXG0YPqUON6ceR/ZdXHCjEI9KvB+hjtqYjmzIxok5hAQOeXGz0WtORgCQMzqewFKAZwg=="],
			
 
				+
			
 
				     "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
			
 
				 
			
 
				     "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
			
@@ -504,78 +492,34 @@
 
				 
			
 
				     "@primer/octicons": ["@primer/octicons@19.23.1", "", { "dependencies": { "object-assign": "^4.1.1" } }, "sha512-CzjGmxkmNhyst6EekrS3SJPdtzgIkUMP/LSJch65y99/kmiFXbO1a+q7zoYe3hnI9NaOM0IN+ydDIbOmd8YqcA=="],
			
 
				 
			
 
				-    "@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
			
 
				-
			
 
				     "@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
			
 
				 
			
 
				-    "@radix-ui/react-accordion": ["@radix-ui/react-accordion@1.2.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collapsible": "1.1.12", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA=="],
			
 
				-
			
 
				-    "@radix-ui/react-alert-dialog": ["@radix-ui/react-alert-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dialog": "1.1.15", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw=="],
			
 
				-
			
 
				     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
			
 
				 
			
 
				-    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.11", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q=="],
			
 
				-
			
 
				-    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.3", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw=="],
			
 
				-
			
 
				-    "@radix-ui/react-collapsible": ["@radix-ui/react-collapsible@1.1.12", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA=="],
			
 
				-
			
 
				-    "@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
			
 
				-
			
 
				     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
			
 
				 
			
 
				     "@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
			
 
				 
			
 
				     "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
			
 
				 
			
 
				-    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
			
 
				-
			
 
				     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
			
 
				 
			
 
				-    "@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
			
 
				-
			
 
				     "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
			
 
				 
			
 
				     "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
			
 
				 
			
 
				-    "@radix-ui/react-hover-card": ["@radix-ui/react-hover-card@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg=="],
			
 
				-
			
 
				-    "@radix-ui/react-icons": ["@radix-ui/react-icons@1.3.2", "", { "peerDependencies": { "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc" } }, "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g=="],
			
 
				-
			
 
				     "@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
			
 
				 
			
 
				-    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
			
 
				-
			
 
				-    "@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
			
 
				-
			
 
				-    "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="],
			
 
				-
			
 
				     "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
			
 
				 
			
 
				     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
			
 
				 
			
 
				     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
			
 
				 
			
 
				-    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				-
			
 
				-    "@radix-ui/react-progress": ["@radix-ui/react-progress@1.1.8", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA=="],
			
 
				-
			
 
				-    "@radix-ui/react-radio-group": ["@radix-ui/react-radio-group@1.3.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ=="],
			
 
				-
			
 
				-    "@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
			
 
				-
			
 
				-    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.10", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A=="],
			
 
				-
			
 
				-    "@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],
			
 
				-
			
 
				-    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g=="],
			
 
				+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
			
 
				 
			
 
				     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
			
 
				 
			
 
				-    "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ=="],
			
 
				-
			
 
				-    "@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
			
 
				-
			
 
				     "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
			
 
				 
			
 
				     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
			
@@ -586,12 +530,8 @@
 
				 
			
 
				     "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
			
 
				 
			
 
				-    "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.0", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA=="],
			
 
				-
			
 
				     "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
			
 
				 
			
 
				-    "@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
			
 
				-
			
 
				     "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
			
 
				 
			
 
				     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
			
@@ -686,6 +626,8 @@
 
				 
			
 
				     "@rc-component/virtual-list": ["@rc-component/virtual-list@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.20.0", "@rc-component/resize-observer": "^1.0.1", "@rc-component/util": "^1.4.0", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-uvTol/mH74FYsn5loDGJxo+7kjkO4i+y4j87Re1pxJBs0FaeuMuLRzQRGaXwnMcV1CxpZLi2Z56Rerj2M00fjQ=="],
			
 
				 
			
 
				+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
			
 
				+
			
 
				     "@resvg/resvg-js": ["@resvg/resvg-js@2.4.1", "", { "optionalDependencies": { "@resvg/resvg-js-android-arm-eabi": "2.4.1", "@resvg/resvg-js-android-arm64": "2.4.1", "@resvg/resvg-js-darwin-arm64": "2.4.1", "@resvg/resvg-js-darwin-x64": "2.4.1", "@resvg/resvg-js-linux-arm-gnueabihf": "2.4.1", "@resvg/resvg-js-linux-arm64-gnu": "2.4.1", "@resvg/resvg-js-linux-arm64-musl": "2.4.1", "@resvg/resvg-js-linux-x64-gnu": "2.4.1", "@resvg/resvg-js-linux-x64-musl": "2.4.1", "@resvg/resvg-js-win32-arm64-msvc": "2.4.1", "@resvg/resvg-js-win32-ia32-msvc": "2.4.1", "@resvg/resvg-js-win32-x64-msvc": "2.4.1" } }, "sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A=="],
			
 
				 
			
 
				     "@resvg/resvg-js-android-arm-eabi": ["@resvg/resvg-js-android-arm-eabi@2.4.1", "", { "os": "android", "cpu": "arm" }, "sha512-AA6f7hS0FAPpvQMhBCf6f1oD1LdlqNXKCxAAPpKh6tR11kqV0YIB9zOlIYgITM14mq2YooLFl6XIbbvmY+jwUw=="],
			
@@ -974,6 +916,8 @@
 
				 
			
 
				     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
			
 
				 
			
 
				+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
			
 
				+
			
 
				     "@types/validate-npm-package-name": ["@types/validate-npm-package-name@4.0.2", "", {}, "sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw=="],
			
 
				 
			
 
				     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.58.1", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.58.1", "@typescript-eslint/type-utils": "8.58.1", "@typescript-eslint/utils": "8.58.1", "@typescript-eslint/visitor-keys": "8.58.1", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.5.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.58.1", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.1.0" } }, "sha512-eSkwoemjo76bdXl2MYqtxg51HNwUSkWfODUOQ3PaTLZGh9uIWWFZIjyjaJnex7wXDu+TRx+ATsnSxdN9YWfRTQ=="],
			
@@ -1212,7 +1156,7 @@
 
				 
			
 
				     "d3": ["d3@7.9.0", "", { "dependencies": { "d3-array": "3", "d3-axis": "3", "d3-brush": "3", "d3-chord": "3", "d3-color": "3", "d3-contour": "4", "d3-delaunay": "6", "d3-dispatch": "3", "d3-drag": "3", "d3-dsv": "3", "d3-ease": "3", "d3-fetch": "3", "d3-force": "3", "d3-format": "3", "d3-geo": "3", "d3-hierarchy": "3", "d3-interpolate": "3", "d3-path": "3", "d3-polygon": "3", "d3-quadtree": "3", "d3-random": "3", "d3-scale": "4", "d3-scale-chromatic": "3", "d3-selection": "3", "d3-shape": "3", "d3-time": "3", "d3-time-format": "4", "d3-timer": "3", "d3-transition": "3", "d3-zoom": "3" } }, "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA=="],
			
 
				 
			
 
				-    "d3-array": ["d3-array@1.2.4", "", {}, "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="],
			
 
				+    "d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
			
 
				 
			
 
				     "d3-axis": ["d3-axis@3.0.0", "", {}, "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="],
			
 
				 
			
@@ -1288,6 +1232,8 @@
 
				 
			
 
				     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
			
 
				 
			
 
				+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
			
 
				+
			
 
				     "decode-named-character-reference": ["decode-named-character-reference@1.3.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q=="],
			
 
				 
			
 
				     "decode-uri-component": ["decode-uri-component@0.4.1", "", {}, "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ=="],
			
@@ -1412,7 +1358,7 @@
 
				 
			
 
				     "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
			
 
				 
			
 
				-    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
			
 
				+    "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
			
 
				 
			
 
				     "eventsource": ["eventsource@3.0.7", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA=="],
			
 
				 
			
@@ -1610,7 +1556,7 @@
 
				 
			
 
				     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
			
 
				 
			
 
				-    "immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
			
 
				+    "immer": ["immer@10.2.0", "", {}, "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw=="],
			
 
				 
			
 
				     "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
			
 
				 
			
@@ -1964,6 +1910,8 @@
 
				 
			
 
				     "negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
			
 
				 
			
 
				+    "next-themes": ["next-themes@0.4.6", "", { "peerDependencies": { "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" } }, "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA=="],
			
 
				+
			
 
				     "node-domexception": ["node-domexception@1.0.0", "", {}, "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ=="],
			
 
				 
			
 
				     "node-fetch": ["node-fetch@3.3.2", "", { "dependencies": { "data-uri-to-buffer": "^4.0.0", "fetch-blob": "^3.1.4", "formdata-polyfill": "^4.0.10" } }, "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA=="],
			
@@ -2162,12 +2110,16 @@
 
				 
			
 
				     "react-merge-refs": ["react-merge-refs@3.0.2", "", { "peerDependencies": { "react": ">=16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["react"] }, "sha512-MSZAfwFfdbEvwkKWP5EI5chuLYnNUxNS7vyS0i1Jp+wtd8J4Ga2ddzhaE68aMol2Z4vCnRM/oGOo1a3V75UPlw=="],
			
 
				 
			
 
				+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
			
 
				+
			
 
				     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
			
 
				 
			
 
				     "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
			
 
				 
			
 
				     "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
			
 
				 
			
 
				+    "react-resizable-panels": ["react-resizable-panels@4.11.0", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-LPk/AkFDGkg7SsbOyL93ojrE6E7lhrxxDwnYNjfmnSeI6BE7Sje6dB24PXgZk8DeugdeXNk1LO+ohRqIjhxiLw=="],
			
 
				+
			
 
				     "react-rnd": ["react-rnd@10.5.3", "", { "dependencies": { "re-resizable": "^6.11.2", "react-draggable": "^4.5.0", "tslib": "2.6.2" }, "peerDependencies": { "react": ">=16.3.0", "react-dom": ">=16.3.0" } }, "sha512-s/sIT3pGZnQ+57egijkTp9mizjIWrJz68Pq6yd+F/wniFY3IriML18dUXnQe/HP9uMiJ+9MAp44hljG99fZu6Q=="],
			
 
				 
			
 
				     "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
			
@@ -2182,6 +2134,8 @@
 
				 
			
 
				     "recast": ["recast@0.23.11", "", { "dependencies": { "ast-types": "^0.16.1", "esprima": "~4.0.0", "source-map": "~0.6.1", "tiny-invariant": "^1.3.3", "tslib": "^2.0.1" } }, "sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA=="],
			
 
				 
			
 
				+    "recharts": ["recharts@3.8.0", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ=="],
			
 
				+
			
 
				     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
			
 
				 
			
 
				     "recma-jsx": ["recma-jsx@1.0.1", "", { "dependencies": { "acorn-jsx": "^5.0.0", "estree-util-to-js": "^2.0.0", "recma-parse": "^1.0.0", "recma-stringify": "^1.0.0", "unified": "^11.0.0" }, "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w=="],
			
@@ -2190,6 +2144,10 @@
 
				 
			
 
				     "recma-stringify": ["recma-stringify@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-to-js": "^2.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g=="],
			
 
				 
			
 
				+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
			
 
				+
			
 
				+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
			
 
				+
			
 
				     "regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
			
 
				 
			
 
				     "regex-recursion": ["regex-recursion@6.0.2", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg=="],
			
@@ -2512,6 +2470,8 @@
 
				 
			
 
				     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
			
 
				 
			
 
				+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
			
 
				+
			
 
				     "virtua": ["virtua@0.48.8", "", { "peerDependencies": { "react": ">=16.14.0", "react-dom": ">=16.14.0", "solid-js": ">=1.0", "svelte": ">=5.0", "vue": ">=3.2" }, "optionalPeers": ["react", "react-dom", "solid-js", "svelte", "vue"] }, "sha512-jpsxOw5V4B6hg44JePRLo9DL0TV7N1lBEVtPjKpAJebXyhI2s9lfiXJESaLapNtr3vtiSk/pWHiLf7B2a6UcgQ=="],
			
 
				 
			
 
				     "void-elements": ["void-elements@3.1.0", "", {}, "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="],
			
@@ -2602,8 +2562,12 @@
 
				 
			
 
				     "@lobehub/icons/lucide-react": ["lucide-react@0.469.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw=="],
			
 
				 
			
 
				+    "@lobehub/ui/@base-ui/react": ["@base-ui/react@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@base-ui/utils": "0.2.3", "@floating-ui/react-dom": "^2.1.6", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "tabbable": "^6.3.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-4USBWz++DUSLTuIYpbYkSgy1F9ZmNG9S/lXvlUN6qMK0P0RlW+6eQmDUB4DgZ7HVvtXl4pvi4z5J2fv6Z3+9hg=="],
			
 
				+
			
 
				     "@lobehub/ui/@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],
			
 
				 
			
 
				+    "@lobehub/ui/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
			
 
				+
			
 
				     "@lobehub/ui/lucide-react": ["lucide-react@0.563.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA=="],
			
 
				 
			
 
				     "@lobehub/ui/shiki": ["shiki@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/engine-javascript": "3.23.0", "@shikijs/engine-oniguruma": "3.23.0", "@shikijs/langs": "3.23.0", "@shikijs/themes": "3.23.0", "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA=="],
			
@@ -2616,34 +2580,26 @@
 
				 
			
 
				     "@pierre/diffs/shiki": ["shiki@3.23.0", "", { "dependencies": { "@shikijs/core": "3.23.0", "@shikijs/engine-javascript": "3.23.0", "@shikijs/engine-oniguruma": "3.23.0", "@shikijs/langs": "3.23.0", "@shikijs/themes": "3.23.0", "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-55Dj73uq9ZXL5zyeRPzHQsK7Nbyt6Y10k5s7OjuFZGMhpp4r/rsLBH0o/0fstIzX1Lep9VxefWljK/SKCzygIA=="],
			
 
				 
			
 
				-    "@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+    "@radix-ui/react-arrow/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				 
			
 
				-    "@radix-ui/react-avatar/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
			
 
				-
			
 
				-    "@radix-ui/react-avatar/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
			
 
				-
			
 
				-    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+    "@radix-ui/react-dialog/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				 
			
 
				     "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				 
			
 
				-    "@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
			
 
				-
			
 
				-    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				-
			
 
				-    "@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				 
			
 
				-    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+    "@radix-ui/react-focus-scope/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				 
			
 
				-    "@radix-ui/react-progress/@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
			
 
				+    "@radix-ui/react-popper/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				 
			
 
				-    "@radix-ui/react-progress/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
			
 
				+    "@radix-ui/react-portal/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				 
			
 
				-    "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				-
			
 
				-    "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
			
 
				+    "@radix-ui/react-tooltip/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				 
			
 
				     "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				 
			
 
				+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
			
 
				+
			
 
				     "@rc-component/dialog/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
			
 
				 
			
 
				     "@rc-component/drawer/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
			
@@ -2654,6 +2610,8 @@
 
				 
			
 
				     "@rc-component/trigger/@rc-component/portal": ["@rc-component/portal@2.2.0", "", { "dependencies": { "@rc-component/util": "^1.2.1", "clsx": "^2.1.1" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-oc6FlA+uXCMiwArHsJyHcIkX4q6uKyndrPol2eWX8YPkAnztHOPsFIRtmWG4BMlGE5h7YIRE3NiaJ5VS8Lb1QQ=="],
			
 
				 
			
 
				+    "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
			
 
				+
			
 
				     "@rspack/binding-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
			
 
				 
			
 
				     "@shikijs/transformers/@shikijs/core": ["@shikijs/core@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-NSWQz0riNb67xthdm5br6lAkvpDJRTgB36fxlo37ZzM2yq0PQFFzbd8psqC2XMPgCzo1fW6cVi18+ArJ44wqgA=="],
			
@@ -2684,6 +2642,12 @@
 
				 
			
 
				     "@typescript-eslint/typescript-estree/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
			
 
				 
			
 
				+    "@visactor/vdataset/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
			
 
				+
			
 
				+    "@visactor/vlayouts/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
			
 
				+
			
 
				+    "@visactor/vutils/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
			
 
				+
			
 
				     "@xyflow/react/zustand": ["zustand@4.5.7", "", { "dependencies": { "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "@types/react": ">=16.8", "immer": ">=9.0.6", "react": ">=16.8" }, "optionalPeers": ["@types/react", "immer", "react"] }, "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw=="],
			
 
				 
			
 
				     "accepts/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
			
@@ -2702,29 +2666,23 @@
 
				 
			
 
				     "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
			
 
				 
			
 
				-    "cmdk/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "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" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
			
 
				-
			
 
				     "cytoscape-fcose/cose-base": ["cose-base@2.2.0", "", { "dependencies": { "layout-base": "^2.0.0" } }, "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g=="],
			
 
				 
			
 
				-    "d3/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
			
 
				-
			
 
				     "d3/d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
			
 
				 
			
 
				     "d3/d3-geo": ["d3-geo@3.1.1", "", { "dependencies": { "d3-array": "2.5.0 - 3" } }, "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q=="],
			
 
				 
			
 
				-    "d3-contour/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
			
 
				-
			
 
				     "d3-dsv/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
			
 
				 
			
 
				     "d3-dsv/iconv-lite": ["iconv-lite@0.4.24", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3" } }, "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA=="],
			
 
				 
			
 
				     "d3-fetch/d3-dsv": ["d3-dsv@3.0.1", "", { "dependencies": { "commander": "7", "iconv-lite": "0.6", "rw": "1" }, "bin": { "csv2json": "bin/dsv2json.js", "csv2tsv": "bin/dsv2dsv.js", "dsv2dsv": "bin/dsv2dsv.js", "dsv2json": "bin/dsv2json.js", "json2csv": "bin/json2dsv.js", "json2dsv": "bin/json2dsv.js", "json2tsv": "bin/json2dsv.js", "tsv2csv": "bin/dsv2dsv.js", "tsv2json": "bin/dsv2json.js" } }, "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q=="],
			
 
				 
			
 
				-    "d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
			
 
				+    "d3-geo/d3-array": ["d3-array@1.2.4", "", {}, "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="],
			
 
				 
			
 
				-    "d3-scale/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
			
 
				+    "d3-sankey/d3-array": ["d3-array@1.2.4", "", {}, "sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw=="],
			
 
				 
			
 
				-    "d3-time/d3-array": ["d3-array@3.2.4", "", { "dependencies": { "internmap": "1 - 2" } }, "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg=="],
			
 
				+    "d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
			
 
				 
			
 
				     "eslint/minimatch": ["minimatch@10.2.5", "", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],
			
 
				 
			
@@ -2822,6 +2780,8 @@
 
				 
			
 
				     "@eslint/config-array/minimatch/brace-expansion": ["brace-expansion@5.0.5", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
			
 
				 
			
 
				+    "@lobehub/ui/@base-ui/react/@base-ui/utils": ["@base-ui/utils@0.2.3", "", { "dependencies": { "@babel/runtime": "^7.28.4", "@floating-ui/utils": "^0.2.10", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-/CguQ2PDaOzeVOkllQR8nocJ0FFIDqsWIcURsVmm53QGo8NhFNpePjNlyPIB41luxfOqnG7PU0xicMEw3ls7XQ=="],
			
 
				+
			
 
				     "@lobehub/ui/@shikijs/core/@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
			
 
				 
			
 
				     "@lobehub/ui/shiki/@shikijs/engine-javascript": ["@shikijs/engine-javascript@3.23.0", "", { "dependencies": { "@shikijs/types": "3.23.0", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-aHt9eiGFobmWR5uqJUViySI1bHMqrAgamWE1TYSUoftkAeCCAiGawPMwM+VCadylQtF4V3VNOZ5LmfItH5f3yA=="],
			
@@ -2848,6 +2808,18 @@
 
				 
			
 
				     "@pierre/diffs/shiki/@shikijs/types": ["@shikijs/types@3.23.0", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-3JZ5HXOZfYjsYSk0yPwBrkupyYSLpAE26Qc0HLghhZNGTZg/SKxXIIgoxOpmmeQP0RRSDJTk1/vPfw9tbw+jSQ=="],
			
 
				 
			
 
				+    "@radix-ui/react-arrow/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+
			
 
				+    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+
			
 
				+    "@radix-ui/react-focus-scope/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+
			
 
				+    "@radix-ui/react-popper/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+
			
 
				+    "@radix-ui/react-portal/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+
			
 
				+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
			
 
				+
			
 
				     "@ts-morph/common/minimatch/brace-expansion": ["brace-expansion@5.0.5", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
			
 
				 
			
 
				     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@5.0.5", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
			
--- a/web/default/components.json
+++ b/web/default/components.json
@@ -1,6 +1,6 @@
 
				 {
			
 
				   "$schema": "https://ui.shadcn.com/schema.json",
			
 
				-  "style": "radix-nova",
			
 
				+  "style": "base-nova",
			
 
				   "rsc": false,
			
 
				   "tsx": true,
			
 
				   "tailwind": {
			
--- a/web/default/package.json
+++ b/web/default/package.json
@@ -16,31 +16,12 @@
 
				     "knip": "knip"
			
 
				   },
			
 
				   "dependencies": {
			
 
				+    "@base-ui/react": "^1.4.1",
			
 
				     "@fontsource-variable/public-sans": "^5.2.7",
			
 
				     "@hookform/resolvers": "^5.2.2",
			
 
				+    "@hugeicons/core-free-icons": "^4.1.1",
			
 
				+    "@hugeicons/react": "^1.1.6",
			
 
				     "@lobehub/icons": "^4.0.3",
			
 
				-    "@radix-ui/react-accordion": "^1.2.12",
			
 
				-    "@radix-ui/react-alert-dialog": "^1.1.15",
			
 
				-    "@radix-ui/react-avatar": "^1.1.11",
			
 
				-    "@radix-ui/react-checkbox": "^1.3.3",
			
 
				-    "@radix-ui/react-collapsible": "^1.1.12",
			
 
				-    "@radix-ui/react-dialog": "^1.1.15",
			
 
				-    "@radix-ui/react-direction": "^1.1.1",
			
 
				-    "@radix-ui/react-dropdown-menu": "^2.1.16",
			
 
				-    "@radix-ui/react-hover-card": "^1.1.15",
			
 
				-    "@radix-ui/react-icons": "^1.3.2",
			
 
				-    "@radix-ui/react-label": "^2.1.8",
			
 
				-    "@radix-ui/react-popover": "^1.1.15",
			
 
				-    "@radix-ui/react-progress": "^1.1.8",
			
 
				-    "@radix-ui/react-radio-group": "^1.3.8",
			
 
				-    "@radix-ui/react-scroll-area": "^1.2.10",
			
 
				-    "@radix-ui/react-select": "^2.2.6",
			
 
				-    "@radix-ui/react-separator": "^1.1.8",
			
 
				-    "@radix-ui/react-slot": "^1.2.4",
			
 
				-    "@radix-ui/react-switch": "^1.2.6",
			
 
				-    "@radix-ui/react-tabs": "^1.1.13",
			
 
				-    "@radix-ui/react-tooltip": "^1.2.8",
			
 
				-    "@radix-ui/react-use-controllable-state": "^1.2.2",
			
 
				     "@tailwindcss/postcss": "^4.2.2",
			
 
				     "@tanstack/react-query": "^5.95.2",
			
 
				     "@tanstack/react-router": "^1.168.23",
			
@@ -54,6 +35,7 @@
 
				     "class-variance-authority": "^0.7.1",
			
 
				     "clsx": "^2.1.1",
			
 
				     "cmdk": "^1.1.1",
			
 
				+    "date-fns": "^4.1.0",
			
 
				     "dayjs": "^1.11.19",
			
 
				     "i18next": "^25.7.4",
			
 
				     "i18next-browser-languagedetector": "^8.2.0",
			
@@ -61,6 +43,7 @@
 
				     "lucide-react": "^1.7.0",
			
 
				     "motion": "^12.38.0",
			
 
				     "nanoid": "^5.1.6",
			
 
				+    "next-themes": "^0.4.6",
			
 
				     "qrcode.react": "^4.2.0",
			
 
				     "react": "^19.2.4",
			
 
				     "react-day-picker": "^9.14.0",
			
@@ -69,7 +52,9 @@
 
				     "react-i18next": "^16.5.2",
			
 
				     "react-icons": "^5.5.0",
			
 
				     "react-markdown": "^10.1.0",
			
 
				+    "react-resizable-panels": "^4.11.0",
			
 
				     "react-top-loading-bar": "^3.0.2",
			
 
				+    "recharts": "3.8.0",
			
 
				     "rehype-raw": "^7.0.0",
			
 
				     "remark-gfm": "^4.0.1",
			
 
				     "shiki": "^4.0.2",
			
--- a/web/default/rsbuild.config.ts
+++ b/web/default/rsbuild.config.ts
@@ -34,9 +34,9 @@ export default defineConfig(({ envMode }) => {
 
				           priority: 0,
			
 
				           enforce: true,
			
 
				         },
			
 
				-        'vendor-radix': {
			
 
				-          test: /node_modules[\\/]@radix-ui[\\/]/,
			
 
				-          name: 'vendor-radix',
			
 
				+        'vendor-ui-primitives': {
			
 
				+          test: /node_modules[\\/](@base-ui|@radix-ui)[\\/]/,
			
 
				+          name: 'vendor-ui-primitives',
			
 
				           chunks: 'all',
			
 
				           priority: 0,
			
 
				           enforce: true,
			
--- a/web/default/src/assets/custom/icon-theme-system.tsx
+++ b/web/default/src/assets/custom/icon-theme-system.tsx
@@ -12,7 +12,7 @@ export function IconThemeSystem({
 
				       viewBox='0 0 79.86 51.14'
			
 
				       className={cn(
			
 
				         'overflow-hidden rounded-[6px]',
			
 
				-        'stroke-primary fill-primary group-data-[state=unchecked]:stroke-muted-foreground group-data-[state=unchecked]:fill-muted-foreground',
			
 
				+        'stroke-primary fill-primary group-data-unchecked:stroke-muted-foreground group-data-unchecked:fill-muted-foreground',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
--- a/web/default/src/components/ai-elements/actions.tsx
+++ b/web/default/src/components/ai-elements/actions.tsx
@@ -52,7 +52,7 @@ export const Action = ({
 
				     return (
			
 
				       <TooltipProvider>
			
 
				         <Tooltip>
			
 
				-          <TooltipTrigger asChild>{button}</TooltipTrigger>
			
 
				+          <TooltipTrigger render={button}></TooltipTrigger>
			
 
				           <TooltipContent>
			
 
				             <p>{tooltip}</p>
			
 
				           </TooltipContent>
			
--- a/web/default/src/components/ai-elements/artifact.tsx
+++ b/web/default/src/components/ai-elements/artifact.tsx
@@ -129,7 +129,7 @@ export const ArtifactAction = ({
 
				     return (
			
 
				       <TooltipProvider>
			
 
				         <Tooltip>
			
 
				-          <TooltipTrigger asChild>{button}</TooltipTrigger>
			
 
				+          <TooltipTrigger render={button}></TooltipTrigger>
			
 
				           <TooltipContent>
			
 
				             <p>{tooltip}</p>
			
 
				           </TooltipContent>
			
--- a/web/default/src/components/ai-elements/chain-of-thought.tsx
+++ b/web/default/src/components/ai-elements/chain-of-thought.tsx
@@ -7,13 +7,13 @@ import {
 
				   useContext,
			
 
				   useMemo,
			
 
				 } from 'react'
			
 
				-import { useControllableState } from '@radix-ui/react-use-controllable-state'
			
 
				 import {
			
 
				   BrainIcon,
			
 
				   ChevronDownIcon,
			
 
				   DotIcon,
			
 
				   type LucideIcon,
			
 
				 } from 'lucide-react'
			
 
				+import { useControllableState } from '@/lib/use-controllable-state'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { Badge } from '@/components/ui/badge'
			
 
				 import {
			
@@ -197,7 +197,7 @@ export const ChainOfThoughtContent = memo(
 
				         <CollapsibleContent
			
 
				           className={cn(
			
 
				             'mt-2 space-y-3',
			
 
				-            'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
			
 
				+            'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-popover-foreground data-closed:animate-out data-open:animate-in outline-none',
			
 
				             className
			
 
				           )}
			
 
				           {...props}
			
--- a/web/default/src/components/ai-elements/context.tsx
+++ b/web/default/src/components/ai-elements/context.tsx
@@ -57,7 +57,7 @@ export const Context = ({
 
				       modelId,
			
 
				     }}
			
 
				   >
			
 
				-    <HoverCard closeDelay={0} openDelay={0} {...props} />
			
 
				+    <HoverCard {...props} />
			
 
				   </ContextContext.Provider>
			
 
				 )
			
 
				 
			
@@ -114,16 +114,22 @@ export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
 
				   }).format(usedPercent)
			
 
				 
			
 
				   return (
			
 
				-    <HoverCardTrigger asChild>
			
 
				-      {children ?? (
			
 
				+    <HoverCardTrigger
			
 
				+      delay={0}
			
 
				+      closeDelay={0}
			
 
				+      render={
			
 
				         <Button type='button' variant='ghost' {...props}>
			
 
				-          <span className='text-muted-foreground font-medium'>
			
 
				-            {renderedPercent}
			
 
				-          </span>
			
 
				-          <ContextIcon />
			
 
				+          {children ?? (
			
 
				+            <>
			
 
				+              <span className='text-muted-foreground font-medium'>
			
 
				+                {renderedPercent}
			
 
				+              </span>
			
 
				+              <ContextIcon />
			
 
				+            </>
			
 
				+          )}
			
 
				         </Button>
			
 
				-      )}
			
 
				-    </HoverCardTrigger>
			
 
				+      }
			
 
				+    />
			
 
				   )
			
 
				 }
			
 
				 
			
--- a/web/default/src/components/ai-elements/inline-citation.tsx
+++ b/web/default/src/components/ai-elements/inline-citation.tsx
@@ -52,7 +52,7 @@ export const InlineCitationText = ({
 
				 export type InlineCitationCardProps = ComponentProps<typeof HoverCard>
			
 
				 
			
 
				 export const InlineCitationCard = (props: InlineCitationCardProps) => (
			
 
				-  <HoverCard closeDelay={0} openDelay={0} {...props} />
			
 
				+  <HoverCard {...props} />
			
 
				 )
			
 
				 
			
 
				 export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
			
@@ -64,22 +64,26 @@ export const InlineCitationCardTrigger = ({
 
				   className,
			
 
				   ...props
			
 
				 }: InlineCitationCardTriggerProps) => (
			
 
				-  <HoverCardTrigger asChild>
			
 
				-    <Badge
			
 
				-      className={cn('ml-1 rounded-full', className)}
			
 
				-      variant='secondary'
			
 
				-      {...props}
			
 
				-    >
			
 
				-      {sources[0] ? (
			
 
				-        <>
			
 
				-          {new URL(sources[0]).hostname}{' '}
			
 
				-          {sources.length > 1 && `+${sources.length - 1}`}
			
 
				-        </>
			
 
				-      ) : (
			
 
				-        'unknown'
			
 
				-      )}
			
 
				-    </Badge>
			
 
				-  </HoverCardTrigger>
			
 
				+  <HoverCardTrigger
			
 
				+    delay={0}
			
 
				+    closeDelay={0}
			
 
				+    render={
			
 
				+      <Badge
			
 
				+        className={cn('ml-1 rounded-full', className)}
			
 
				+        variant='secondary'
			
 
				+        {...props}
			
 
				+      >
			
 
				+        {sources[0] ? (
			
 
				+          <>
			
 
				+            {new URL(sources[0]).hostname}{' '}
			
 
				+            {sources.length > 1 && `+${sources.length - 1}`}
			
 
				+          </>
			
 
				+        ) : (
			
 
				+          'unknown'
			
 
				+        )}
			
 
				+      </Badge>
			
 
				+    }
			
 
				+  />
			
 
				 )
			
 
				 
			
 
				 export type InlineCitationCardBodyProps = ComponentProps<'div'>
			
--- a/web/default/src/components/ai-elements/open-in-chat.tsx
+++ b/web/default/src/components/ai-elements/open-in-chat.tsx
@@ -235,14 +235,19 @@ export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>
 
				 export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => {
			
 
				   const { t } = useTranslation()
			
 
				   return (
			
 
				-    <DropdownMenuTrigger {...props} asChild>
			
 
				-      {children ?? (
			
 
				+    <DropdownMenuTrigger
			
 
				+      {...props}
			
 
				+      render={
			
 
				         <Button type='button' variant='outline'>
			
 
				-          {t('Open in chat')}
			
 
				-          <ChevronDownIcon className='ml-2 size-4' />
			
 
				+          {children ?? (
			
 
				+            <>
			
 
				+              {t('Open in chat')}
			
 
				+              <ChevronDownIcon className='ml-2 size-4' />
			
 
				+            </>
			
 
				+          )}
			
 
				         </Button>
			
 
				-      )}
			
 
				-    </DropdownMenuTrigger>
			
 
				+      }
			
 
				+    />
			
 
				   )
			
 
				 }
			
 
				 
			
@@ -251,17 +256,20 @@ export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>
 
				 export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
			
 
				   const { query } = useOpenInContext()
			
 
				   return (
			
 
				-    <DropdownMenuItem asChild {...props}>
			
 
				-      <a
			
 
				-        className='flex items-center gap-2'
			
 
				-        href={providers.chatgpt.createUrl(query)}
			
 
				-        rel='noopener'
			
 
				-        target='_blank'
			
 
				-      >
			
 
				-        <span className='shrink-0'>{providers.chatgpt.icon}</span>
			
 
				-        <span className='flex-1'>{providers.chatgpt.title}</span>
			
 
				-        <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				-      </a>
			
 
				+    <DropdownMenuItem
			
 
				+      {...props}
			
 
				+      render={
			
 
				+        <a
			
 
				+          className='flex items-center gap-2'
			
 
				+          href={providers.chatgpt.createUrl(query)}
			
 
				+          rel='noopener'
			
 
				+          target='_blank'
			
 
				+        />
			
 
				+      }
			
 
				+    >
			
 
				+      <span className='shrink-0'>{providers.chatgpt.icon}</span>
			
 
				+      <span className='flex-1'>{providers.chatgpt.title}</span>
			
 
				+      <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				     </DropdownMenuItem>
			
 
				   )
			
 
				 }
			
@@ -271,17 +279,20 @@ export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>
 
				 export const OpenInClaude = (props: OpenInClaudeProps) => {
			
 
				   const { query } = useOpenInContext()
			
 
				   return (
			
 
				-    <DropdownMenuItem asChild {...props}>
			
 
				-      <a
			
 
				-        className='flex items-center gap-2'
			
 
				-        href={providers.claude.createUrl(query)}
			
 
				-        rel='noopener'
			
 
				-        target='_blank'
			
 
				-      >
			
 
				-        <span className='shrink-0'>{providers.claude.icon}</span>
			
 
				-        <span className='flex-1'>{providers.claude.title}</span>
			
 
				-        <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				-      </a>
			
 
				+    <DropdownMenuItem
			
 
				+      {...props}
			
 
				+      render={
			
 
				+        <a
			
 
				+          className='flex items-center gap-2'
			
 
				+          href={providers.claude.createUrl(query)}
			
 
				+          rel='noopener'
			
 
				+          target='_blank'
			
 
				+        />
			
 
				+      }
			
 
				+    >
			
 
				+      <span className='shrink-0'>{providers.claude.icon}</span>
			
 
				+      <span className='flex-1'>{providers.claude.title}</span>
			
 
				+      <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				     </DropdownMenuItem>
			
 
				   )
			
 
				 }
			
@@ -291,17 +302,20 @@ export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>
 
				 export const OpenInT3 = (props: OpenInT3Props) => {
			
 
				   const { query } = useOpenInContext()
			
 
				   return (
			
 
				-    <DropdownMenuItem asChild {...props}>
			
 
				-      <a
			
 
				-        className='flex items-center gap-2'
			
 
				-        href={providers.t3.createUrl(query)}
			
 
				-        rel='noopener'
			
 
				-        target='_blank'
			
 
				-      >
			
 
				-        <span className='shrink-0'>{providers.t3.icon}</span>
			
 
				-        <span className='flex-1'>{providers.t3.title}</span>
			
 
				-        <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				-      </a>
			
 
				+    <DropdownMenuItem
			
 
				+      {...props}
			
 
				+      render={
			
 
				+        <a
			
 
				+          className='flex items-center gap-2'
			
 
				+          href={providers.t3.createUrl(query)}
			
 
				+          rel='noopener'
			
 
				+          target='_blank'
			
 
				+        />
			
 
				+      }
			
 
				+    >
			
 
				+      <span className='shrink-0'>{providers.t3.icon}</span>
			
 
				+      <span className='flex-1'>{providers.t3.title}</span>
			
 
				+      <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				     </DropdownMenuItem>
			
 
				   )
			
 
				 }
			
@@ -311,17 +325,20 @@ export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>
 
				 export const OpenInScira = (props: OpenInSciraProps) => {
			
 
				   const { query } = useOpenInContext()
			
 
				   return (
			
 
				-    <DropdownMenuItem asChild {...props}>
			
 
				-      <a
			
 
				-        className='flex items-center gap-2'
			
 
				-        href={providers.scira.createUrl(query)}
			
 
				-        rel='noopener'
			
 
				-        target='_blank'
			
 
				-      >
			
 
				-        <span className='shrink-0'>{providers.scira.icon}</span>
			
 
				-        <span className='flex-1'>{providers.scira.title}</span>
			
 
				-        <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				-      </a>
			
 
				+    <DropdownMenuItem
			
 
				+      {...props}
			
 
				+      render={
			
 
				+        <a
			
 
				+          className='flex items-center gap-2'
			
 
				+          href={providers.scira.createUrl(query)}
			
 
				+          rel='noopener'
			
 
				+          target='_blank'
			
 
				+        />
			
 
				+      }
			
 
				+    >
			
 
				+      <span className='shrink-0'>{providers.scira.icon}</span>
			
 
				+      <span className='flex-1'>{providers.scira.title}</span>
			
 
				+      <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				     </DropdownMenuItem>
			
 
				   )
			
 
				 }
			
@@ -331,17 +348,20 @@ export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>
 
				 export const OpenInv0 = (props: OpenInv0Props) => {
			
 
				   const { query } = useOpenInContext()
			
 
				   return (
			
 
				-    <DropdownMenuItem asChild {...props}>
			
 
				-      <a
			
 
				-        className='flex items-center gap-2'
			
 
				-        href={providers.v0.createUrl(query)}
			
 
				-        rel='noopener'
			
 
				-        target='_blank'
			
 
				-      >
			
 
				-        <span className='shrink-0'>{providers.v0.icon}</span>
			
 
				-        <span className='flex-1'>{providers.v0.title}</span>
			
 
				-        <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				-      </a>
			
 
				+    <DropdownMenuItem
			
 
				+      {...props}
			
 
				+      render={
			
 
				+        <a
			
 
				+          className='flex items-center gap-2'
			
 
				+          href={providers.v0.createUrl(query)}
			
 
				+          rel='noopener'
			
 
				+          target='_blank'
			
 
				+        />
			
 
				+      }
			
 
				+    >
			
 
				+      <span className='shrink-0'>{providers.v0.icon}</span>
			
 
				+      <span className='flex-1'>{providers.v0.title}</span>
			
 
				+      <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				     </DropdownMenuItem>
			
 
				   )
			
 
				 }
			
@@ -351,17 +371,20 @@ export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>
 
				 export const OpenInCursor = (props: OpenInCursorProps) => {
			
 
				   const { query } = useOpenInContext()
			
 
				   return (
			
 
				-    <DropdownMenuItem asChild {...props}>
			
 
				-      <a
			
 
				-        className='flex items-center gap-2'
			
 
				-        href={providers.cursor.createUrl(query)}
			
 
				-        rel='noopener'
			
 
				-        target='_blank'
			
 
				-      >
			
 
				-        <span className='shrink-0'>{providers.cursor.icon}</span>
			
 
				-        <span className='flex-1'>{providers.cursor.title}</span>
			
 
				-        <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				-      </a>
			
 
				+    <DropdownMenuItem
			
 
				+      {...props}
			
 
				+      render={
			
 
				+        <a
			
 
				+          className='flex items-center gap-2'
			
 
				+          href={providers.cursor.createUrl(query)}
			
 
				+          rel='noopener'
			
 
				+          target='_blank'
			
 
				+        />
			
 
				+      }
			
 
				+    >
			
 
				+      <span className='shrink-0'>{providers.cursor.icon}</span>
			
 
				+      <span className='flex-1'>{providers.cursor.title}</span>
			
 
				+      <ExternalLinkIcon className='size-4 shrink-0' />
			
 
				     </DropdownMenuItem>
			
 
				   )
			
 
				 }
			
--- a/web/default/src/components/ai-elements/plan.tsx
+++ b/web/default/src/components/ai-elements/plan.tsx
@@ -46,8 +46,12 @@ export const Plan = ({
 
				   ...props
			
 
				 }: PlanProps) => (
			
 
				   <PlanContext.Provider value={{ isStreaming }}>
			
 
				-    <Collapsible asChild data-slot='plan' {...props}>
			
 
				-      <Card className={cn('shadow-none', className)}>{children}</Card>
			
 
				+    <Collapsible
			
 
				+      data-slot='plan'
			
 
				+      {...props}
			
 
				+      render={<Card className={cn('shadow-none', className)} />}
			
 
				+    >
			
 
				+      {children}
			
 
				     </Collapsible>
			
 
				   </PlanContext.Provider>
			
 
				 )
			
@@ -113,9 +117,9 @@ export const PlanAction = (props: PlanActionProps) => (
 
				 export type PlanContentProps = ComponentProps<typeof CardContent>
			
 
				 
			
 
				 export const PlanContent = (props: PlanContentProps) => (
			
 
				-  <CollapsibleContent asChild>
			
 
				-    <CardContent data-slot='plan-content' {...props} />
			
 
				-  </CollapsibleContent>
			
 
				+  <CollapsibleContent
			
 
				+    render={<CardContent data-slot='plan-content' {...props} />}
			
 
				+  ></CollapsibleContent>
			
 
				 )
			
 
				 
			
 
				 export type PlanFooterProps = ComponentProps<'div'>
			
@@ -129,17 +133,19 @@ export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>
 
				 export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => {
			
 
				   const { t } = useTranslation()
			
 
				   return (
			
 
				-    <CollapsibleTrigger asChild>
			
 
				-      <Button
			
 
				-        className={cn('size-8', className)}
			
 
				-        data-slot='plan-trigger'
			
 
				-        size='icon'
			
 
				-        variant='ghost'
			
 
				-        {...props}
			
 
				-      >
			
 
				-        <ChevronsUpDownIcon className='size-4' />
			
 
				-        <span className='sr-only'>{t('Toggle plan')}</span>
			
 
				-      </Button>
			
 
				+    <CollapsibleTrigger
			
 
				+      render={
			
 
				+        <Button
			
 
				+          className={cn('size-8', className)}
			
 
				+          data-slot='plan-trigger'
			
 
				+          size='icon'
			
 
				+          variant='ghost'
			
 
				+        />
			
 
				+      }
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ChevronsUpDownIcon className='size-4' />
			
 
				+      <span className='sr-only'>{t('Toggle plan')}</span>
			
 
				     </CollapsibleTrigger>
			
 
				   )
			
 
				 }
			
--- a/web/default/src/components/ai-elements/prompt-input.tsx
+++ b/web/default/src/components/ai-elements/prompt-input.tsx
@@ -277,49 +277,51 @@ export function PromptInputAttachment({
 
				 
			
 
				   return (
			
 
				     <PromptInputHoverCard>
			
 
				-      <HoverCardTrigger asChild>
			
 
				-        <div
			
 
				-          className={cn(
			
 
				-            'group border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 relative flex h-8 cursor-default items-center gap-1.5 rounded-md border px-1.5 text-sm font-medium transition-all select-none',
			
 
				-            className
			
 
				-          )}
			
 
				-          key={data.id}
			
 
				-          {...props}
			
 
				-        >
			
 
				-          <div className='relative size-5 shrink-0'>
			
 
				-            <div className='bg-background absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded transition-opacity group-hover:opacity-0'>
			
 
				-              {isImage ? (
			
 
				-                <img
			
 
				-                  alt={filename || 'attachment'}
			
 
				-                  className='size-5 object-cover'
			
 
				-                  height={20}
			
 
				-                  src={data.url}
			
 
				-                  width={20}
			
 
				-                />
			
 
				-              ) : (
			
 
				-                <div className='text-muted-foreground flex size-5 items-center justify-center'>
			
 
				-                  <PaperclipIcon className='size-3' />
			
 
				-                </div>
			
 
				-              )}
			
 
				-            </div>
			
 
				-            <Button
			
 
				-              aria-label={t('Remove attachment')}
			
 
				-              className='absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5'
			
 
				-              onClick={(e) => {
			
 
				-                e.stopPropagation()
			
 
				-                attachments.remove(data.id)
			
 
				-              }}
			
 
				-              type='button'
			
 
				-              variant='ghost'
			
 
				-            >
			
 
				-              <XIcon />
			
 
				-              <span className='sr-only'>{t('Remove')}</span>
			
 
				-            </Button>
			
 
				+      <PromptInputHoverCardTrigger
			
 
				+        render={
			
 
				+          <div
			
 
				+            className={cn(
			
 
				+              'group border-border hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 relative flex h-8 cursor-default items-center gap-1.5 rounded-md border px-1.5 text-sm font-medium transition-all select-none',
			
 
				+              className
			
 
				+            )}
			
 
				+            key={data.id}
			
 
				+            {...props}
			
 
				+          />
			
 
				+        }
			
 
				+      >
			
 
				+        <div className='relative size-5 shrink-0'>
			
 
				+          <div className='bg-background absolute inset-0 flex size-5 items-center justify-center overflow-hidden rounded transition-opacity group-hover:opacity-0'>
			
 
				+            {isImage ? (
			
 
				+              <img
			
 
				+                alt={filename || 'attachment'}
			
 
				+                className='size-5 object-cover'
			
 
				+                height={20}
			
 
				+                src={data.url}
			
 
				+                width={20}
			
 
				+              />
			
 
				+            ) : (
			
 
				+              <div className='text-muted-foreground flex size-5 items-center justify-center'>
			
 
				+                <PaperclipIcon className='size-3' />
			
 
				+              </div>
			
 
				+            )}
			
 
				           </div>
			
 
				-
			
 
				-          <span className='flex-1 truncate'>{attachmentLabel}</span>
			
 
				+          <Button
			
 
				+            aria-label={t('Remove attachment')}
			
 
				+            className='absolute inset-0 size-5 cursor-pointer rounded p-0 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100 [&>svg]:size-2.5'
			
 
				+            onClick={(e) => {
			
 
				+              e.stopPropagation()
			
 
				+              attachments.remove(data.id)
			
 
				+            }}
			
 
				+            type='button'
			
 
				+            variant='ghost'
			
 
				+          >
			
 
				+            <XIcon />
			
 
				+            <span className='sr-only'>{t('Remove')}</span>
			
 
				+          </Button>
			
 
				         </div>
			
 
				-      </HoverCardTrigger>
			
 
				+
			
 
				+        <span className='flex-1 truncate'>{attachmentLabel}</span>
			
 
				+      </PromptInputHoverCardTrigger>
			
 
				       <PromptInputHoverCardContent className='w-auto p-2'>
			
 
				         <div className='w-auto space-y-3'>
			
 
				           {isImage && (
			
@@ -956,10 +958,10 @@ export const PromptInputActionMenuTrigger = ({
 
				   children,
			
 
				   ...props
			
 
				 }: PromptInputActionMenuTriggerProps) => (
			
 
				-  <DropdownMenuTrigger asChild>
			
 
				-    <PromptInputButton className={className} {...props}>
			
 
				-      {children ?? <PlusIcon className='size-4' />}
			
 
				-    </PromptInputButton>
			
 
				+  <DropdownMenuTrigger
			
 
				+    render={<PromptInputButton className={className} {...props} />}
			
 
				+  >
			
 
				+    {children ?? <PlusIcon className='size-4' />}
			
 
				   </DropdownMenuTrigger>
			
 
				 )
			
 
				 
			
@@ -1242,21 +1244,21 @@ export const PromptInputModelSelectValue = ({
 
				 
			
 
				 export type PromptInputHoverCardProps = ComponentProps<typeof HoverCard>
			
 
				 
			
 
				-export const PromptInputHoverCard = ({
			
 
				-  openDelay = 0,
			
 
				-  closeDelay = 0,
			
 
				-  ...props
			
 
				-}: PromptInputHoverCardProps) => (
			
 
				-  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
			
 
				+export const PromptInputHoverCard = (props: PromptInputHoverCardProps) => (
			
 
				+  <HoverCard {...props} />
			
 
				 )
			
 
				 
			
 
				 export type PromptInputHoverCardTriggerProps = ComponentProps<
			
 
				   typeof HoverCardTrigger
			
 
				 >
			
 
				 
			
 
				-export const PromptInputHoverCardTrigger = (
			
 
				-  props: PromptInputHoverCardTriggerProps
			
 
				-) => <HoverCardTrigger {...props} />
			
 
				+export const PromptInputHoverCardTrigger = ({
			
 
				+  delay = 0,
			
 
				+  closeDelay = 0,
			
 
				+  ...props
			
 
				+}: PromptInputHoverCardTriggerProps) => (
			
 
				+  <HoverCardTrigger delay={delay} closeDelay={closeDelay} {...props} />
			
 
				+)
			
 
				 
			
 
				 export type PromptInputHoverCardContentProps = ComponentProps<
			
 
				   typeof HoverCardContent
			
--- a/web/default/src/components/ai-elements/queue.tsx
+++ b/web/default/src/components/ai-elements/queue.tsx
@@ -212,18 +212,20 @@ export const QueueSectionTrigger = ({
 
				   className,
			
 
				   ...props
			
 
				 }: QueueSectionTriggerProps) => (
			
 
				-  <CollapsibleTrigger asChild>
			
 
				-    <Button
			
 
				-      variant='ghost'
			
 
				-      className={cn(
			
 
				-        'group bg-muted/40 text-muted-foreground hover:bg-muted h-auto w-full justify-between px-3 py-2 text-left',
			
 
				-        className
			
 
				-      )}
			
 
				-      type='button'
			
 
				-      {...props}
			
 
				-    >
			
 
				-      {children}
			
 
				-    </Button>
			
 
				+  <CollapsibleTrigger
			
 
				+    render={
			
 
				+      <Button
			
 
				+        variant='ghost'
			
 
				+        className={cn(
			
 
				+          'group bg-muted/40 text-muted-foreground hover:bg-muted h-auto w-full justify-between px-3 py-2 text-left',
			
 
				+          className
			
 
				+        )}
			
 
				+        type='button'
			
 
				+        {...props}
			
 
				+      />
			
 
				+    }
			
 
				+  >
			
 
				+    {children}
			
 
				   </CollapsibleTrigger>
			
 
				 )
			
 
				 
			
@@ -242,7 +244,7 @@ export const QueueSectionLabel = ({
 
				   ...props
			
 
				 }: QueueSectionLabelProps) => (
			
 
				   <span className={cn('flex items-center gap-2', className)} {...props}>
			
 
				-    <ChevronDownIcon className='size-4 transition-transform group-data-[state=closed]:-rotate-90' />
			
 
				+    <ChevronDownIcon className='size-4 -rotate-90 transition-transform group-data-[panel-open]:rotate-0' />
			
 
				     {icon}
			
 
				     <span>
			
 
				       {count} {label}
			
--- a/web/default/src/components/ai-elements/reasoning.tsx
+++ b/web/default/src/components/ai-elements/reasoning.tsx
@@ -8,8 +8,8 @@ import {
 
				   useEffect,
			
 
				   useState,
			
 
				 } from 'react'
			
 
				-import { useControllableState } from '@radix-ui/react-use-controllable-state'
			
 
				 import { BrainIcon, ChevronDownIcon } from 'lucide-react'
			
 
				+import { useControllableState } from '@/lib/use-controllable-state'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import {
			
 
				   Collapsible,
			
@@ -171,7 +171,7 @@ export const ReasoningContent = memo(
 
				     <CollapsibleContent
			
 
				       className={cn(
			
 
				         'mt-4 text-sm',
			
 
				-        'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
			
 
				+        'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-muted-foreground data-closed:animate-out data-open:animate-in outline-none',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
--- a/web/default/src/components/ai-elements/sources.tsx
+++ b/web/default/src/components/ai-elements/sources.tsx
@@ -56,7 +56,7 @@ export const SourcesContent = ({
 
				   <CollapsibleContent
			
 
				     className={cn(
			
 
				       'mt-3 flex w-fit flex-col gap-2',
			
 
				-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
			
 
				+      'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 data-closed:animate-out data-open:animate-in outline-none',
			
 
				       className
			
 
				     )}
			
 
				     {...props}
			
--- a/web/default/src/components/ai-elements/task.tsx
+++ b/web/default/src/components/ai-elements/task.tsx
@@ -55,15 +55,21 @@ export const TaskTrigger = ({
 
				   title,
			
 
				   ...props
			
 
				 }: TaskTriggerProps) => (
			
 
				-  <CollapsibleTrigger asChild className={cn('group', className)} {...props}>
			
 
				-    {children ?? (
			
 
				+  <CollapsibleTrigger
			
 
				+    className={cn('group', className)}
			
 
				+    {...props}
			
 
				+    render={
			
 
				       <div className='text-muted-foreground hover:text-foreground flex w-full cursor-pointer items-center gap-2 text-sm transition-colors'>
			
 
				-        <SearchIcon className='size-4' />
			
 
				-        <p className='text-sm'>{title}</p>
			
 
				-        <ChevronDownIcon className='size-4 transition-transform group-data-[state=open]:rotate-180' />
			
 
				+        {children ?? (
			
 
				+          <>
			
 
				+            <SearchIcon className='size-4' />
			
 
				+            <p className='text-sm'>{title}</p>
			
 
				+            <ChevronDownIcon className='size-4 transition-transform group-data-[panel-open]:rotate-180' />
			
 
				+          </>
			
 
				+        )}
			
 
				       </div>
			
 
				-    )}
			
 
				-  </CollapsibleTrigger>
			
 
				+    }
			
 
				+  />
			
 
				 )
			
 
				 
			
 
				 export type TaskContentProps = ComponentProps<typeof CollapsibleContent>
			
@@ -75,7 +81,7 @@ export const TaskContent = ({
 
				 }: TaskContentProps) => (
			
 
				   <CollapsibleContent
			
 
				     className={cn(
			
 
				-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
			
 
				+      'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-popover-foreground data-closed:animate-out data-open:animate-in outline-none',
			
 
				       className
			
 
				     )}
			
 
				     {...props}
			
--- a/web/default/src/components/ai-elements/tool.tsx
+++ b/web/default/src/components/ai-elements/tool.tsx
@@ -81,7 +81,7 @@ export const ToolHeader = ({
 
				 }: ToolHeaderProps) => (
			
 
				   <CollapsibleTrigger
			
 
				     className={cn(
			
 
				-      'flex w-full items-center justify-between gap-4 p-3',
			
 
				+      'group flex w-full items-center justify-between gap-4 p-3',
			
 
				       className
			
 
				     )}
			
 
				     {...props}
			
@@ -93,7 +93,7 @@ export const ToolHeader = ({
 
				       </span>
			
 
				       {getStatusBadge(state)}
			
 
				     </div>
			
 
				-    <ChevronDownIcon className='text-muted-foreground size-4 transition-transform group-data-[state=open]:rotate-180' />
			
 
				+    <ChevronDownIcon className='text-muted-foreground size-4 transition-transform group-data-[panel-open]:rotate-180' />
			
 
				   </CollapsibleTrigger>
			
 
				 )
			
 
				 
			
@@ -102,7 +102,7 @@ export type ToolContentProps = ComponentProps<typeof CollapsibleContent>
 
				 export const ToolContent = ({ className, ...props }: ToolContentProps) => (
			
 
				   <CollapsibleContent
			
 
				     className={cn(
			
 
				-      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none',
			
 
				+      'data-closed:fade-out-0 data-closed:slide-out-to-top-2 data-open:slide-in-from-top-2 text-popover-foreground data-closed:animate-out data-open:animate-in outline-none',
			
 
				       className
			
 
				     )}
			
 
				     {...props}
			
--- a/web/default/src/components/ai-elements/web-preview.tsx
+++ b/web/default/src/components/ai-elements/web-preview.tsx
@@ -113,17 +113,19 @@ export const WebPreviewNavigationButton = ({
 
				 }: WebPreviewNavigationButtonProps) => (
			
 
				   <TooltipProvider>
			
 
				     <Tooltip>
			
 
				-      <TooltipTrigger asChild>
			
 
				-        <Button
			
 
				-          className='hover:text-foreground h-8 w-8 p-0'
			
 
				-          disabled={disabled}
			
 
				-          onClick={onClick}
			
 
				-          size='sm'
			
 
				-          variant='ghost'
			
 
				-          {...props}
			
 
				-        >
			
 
				-          {children}
			
 
				-        </Button>
			
 
				+      <TooltipTrigger
			
 
				+        render={
			
 
				+          <Button
			
 
				+            className='hover:text-foreground h-8 w-8 p-0'
			
 
				+            disabled={disabled}
			
 
				+            onClick={onClick}
			
 
				+            size='sm'
			
 
				+            variant='ghost'
			
 
				+            {...props}
			
 
				+          />
			
 
				+        }
			
 
				+      >
			
 
				+        {children}
			
 
				       </TooltipTrigger>
			
 
				       <TooltipContent>
			
 
				         <p>{tooltip}</p>
			
@@ -225,24 +227,26 @@ export const WebPreviewConsole = ({
 
				       open={consoleOpen}
			
 
				       {...props}
			
 
				     >
			
 
				-      <CollapsibleTrigger asChild>
			
 
				-        <Button
			
 
				-          className='hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium'
			
 
				-          variant='ghost'
			
 
				-        >
			
 
				-          {t('Console')}
			
 
				-          <ChevronDownIcon
			
 
				-            className={cn(
			
 
				-              'h-4 w-4 transition-transform duration-200',
			
 
				-              consoleOpen && 'rotate-180'
			
 
				-            )}
			
 
				+      <CollapsibleTrigger
			
 
				+        render={
			
 
				+          <Button
			
 
				+            className='hover:bg-muted/50 flex w-full items-center justify-between p-4 text-left font-medium'
			
 
				+            variant='ghost'
			
 
				           />
			
 
				-        </Button>
			
 
				+        }
			
 
				+      >
			
 
				+        {t('Console')}
			
 
				+        <ChevronDownIcon
			
 
				+          className={cn(
			
 
				+            'h-4 w-4 transition-transform duration-200',
			
 
				+            consoleOpen && 'rotate-180'
			
 
				+          )}
			
 
				+        />
			
 
				       </CollapsibleTrigger>
			
 
				       <CollapsibleContent
			
 
				         className={cn(
			
 
				           'px-4 pb-4',
			
 
				-          '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 data-[state=closed]:animate-out data-[state=open]:animate-in outline-none'
			
 
				+          'data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-closed:animate-out data-open:animate-in outline-none'
			
 
				         )}
			
 
				       >
			
 
				         <div className='max-h-48 space-y-1 overflow-y-auto'>
			
--- a/web/default/src/components/command-menu.tsx
+++ b/web/default/src/components/command-menu.tsx
@@ -6,6 +6,7 @@ import { useSearch } from '@/context/search-provider'
 
				 import { useTheme } from '@/context/theme-provider'
			
 
				 import { useSidebarData } from '@/hooks/use-sidebar-data'
			
 
				 import {
			
 
				+  Command,
			
 
				   CommandDialog,
			
 
				   CommandEmpty,
			
 
				   CommandGroup,
			
@@ -38,62 +39,66 @@ export function CommandMenu() {
 
				 
			
 
				   return (
			
 
				     <CommandDialog modal open={open} onOpenChange={setOpen}>
			
 
				-      <CommandInput placeholder={t('Type a command or search...')} />
			
 
				-      <CommandList>
			
 
				-        <ScrollArea type='hover' className='h-72 pe-1'>
			
 
				-          <CommandEmpty>{t('No results found.')}</CommandEmpty>
			
 
				-          {navGroups.map((group) => (
			
 
				-            <CommandGroup key={group.id || group.title} heading={group.title}>
			
 
				-              {group.items.map((navItem, i) => {
			
 
				-                if (navItem.url)
			
 
				-                  return (
			
 
				+      <Command>
			
 
				+        <CommandInput placeholder={t('Type a command or search...')} />
			
 
				+        <CommandList>
			
 
				+          <ScrollArea className='h-72 pe-1'>
			
 
				+            <CommandEmpty>{t('No results found.')}</CommandEmpty>
			
 
				+            {navGroups.map((group) => (
			
 
				+              <CommandGroup key={group.id || group.title} heading={group.title}>
			
 
				+                {group.items.map((navItem, i) => {
			
 
				+                  if (navItem.url)
			
 
				+                    return (
			
 
				+                      <CommandItem
			
 
				+                        key={`${navItem.url}-${i}`}
			
 
				+                        value={navItem.title}
			
 
				+                        onSelect={() => {
			
 
				+                          runCommand(() => navigate({ to: navItem.url }))
			
 
				+                        }}
			
 
				+                      >
			
 
				+                        <div className='flex size-4 items-center justify-center'>
			
 
				+                          <ArrowRight className='text-muted-foreground/80 size-2' />
			
 
				+                        </div>
			
 
				+                        {navItem.title}
			
 
				+                      </CommandItem>
			
 
				+                    )
			
 
				+
			
 
				+                  return navItem.items?.map((subItem, i) => (
			
 
				                     <CommandItem
			
 
				-                      key={`${navItem.url}-${i}`}
			
 
				-                      value={navItem.title}
			
 
				+                      key={`${navItem.title}-${subItem.url}-${i}`}
			
 
				+                      value={`${navItem.title}-${subItem.url}`}
			
 
				                       onSelect={() => {
			
 
				-                        runCommand(() => navigate({ to: navItem.url }))
			
 
				+                        runCommand(() => navigate({ to: subItem.url }))
			
 
				                       }}
			
 
				                     >
			
 
				                       <div className='flex size-4 items-center justify-center'>
			
 
				                         <ArrowRight className='text-muted-foreground/80 size-2' />
			
 
				                       </div>
			
 
				-                      {navItem.title}
			
 
				+                      {navItem.title} <ChevronRight /> {subItem.title}
			
 
				                     </CommandItem>
			
 
				-                  )
			
 
				-
			
 
				-                return navItem.items?.map((subItem, i) => (
			
 
				-                  <CommandItem
			
 
				-                    key={`${navItem.title}-${subItem.url}-${i}`}
			
 
				-                    value={`${navItem.title}-${subItem.url}`}
			
 
				-                    onSelect={() => {
			
 
				-                      runCommand(() => navigate({ to: subItem.url }))
			
 
				-                    }}
			
 
				-                  >
			
 
				-                    <div className='flex size-4 items-center justify-center'>
			
 
				-                      <ArrowRight className='text-muted-foreground/80 size-2' />
			
 
				-                    </div>
			
 
				-                    {navItem.title} <ChevronRight /> {subItem.title}
			
 
				-                  </CommandItem>
			
 
				-                ))
			
 
				-              })}
			
 
				+                  ))
			
 
				+                })}
			
 
				+              </CommandGroup>
			
 
				+            ))}
			
 
				+            <CommandSeparator />
			
 
				+            <CommandGroup heading='Theme'>
			
 
				+              <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
			
 
				+                <Sun /> <span>{t('Light')}</span>
			
 
				+              </CommandItem>
			
 
				+              <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
			
 
				+                <Moon className='scale-90' />
			
 
				+                <span>{t('Dark')}</span>
			
 
				+              </CommandItem>
			
 
				+              <CommandItem
			
 
				+                onSelect={() => runCommand(() => setTheme('system'))}
			
 
				+              >
			
 
				+                <Laptop />
			
 
				+                <span>{t('System')}</span>
			
 
				+              </CommandItem>
			
 
				             </CommandGroup>
			
 
				-          ))}
			
 
				-          <CommandSeparator />
			
 
				-          <CommandGroup heading='Theme'>
			
 
				-            <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
			
 
				-              <Sun /> <span>{t('Light')}</span>
			
 
				-            </CommandItem>
			
 
				-            <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
			
 
				-              <Moon className='scale-90' />
			
 
				-              <span>{t('Dark')}</span>
			
 
				-            </CommandItem>
			
 
				-            <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
			
 
				-              <Laptop />
			
 
				-              <span>{t('System')}</span>
			
 
				-            </CommandItem>
			
 
				-          </CommandGroup>
			
 
				-        </ScrollArea>
			
 
				-      </CommandList>
			
 
				+          </ScrollArea>
			
 
				+        </CommandList>
			
 
				+      </Command>
			
 
				     </CommandDialog>
			
 
				   )
			
 
				 }
			
--- a/web/default/src/components/config-drawer.tsx
+++ b/web/default/src/components/config-drawer.tsx
@@ -1,6 +1,7 @@
 
				 import { type SVGProps } from 'react'
			
 
				-import { Root as Radio, Item } from '@radix-ui/react-radio-group'
			
 
				-import { CircleCheck, RotateCcw, Palette } from 'lucide-react'
			
 
				+import { Radio as RadioPrimitive } from '@base-ui/react/radio'
			
 
				+import { RadioGroup as Radio } from '@base-ui/react/radio-group'
			
 
				+import { CircleCheck, Palette, RotateCcw } from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { IconDir } from '@/assets/custom/icon-dir'
			
 
				 import { IconLayoutCompact } from '@/assets/custom/icon-layout-compact'
			
@@ -12,9 +13,17 @@ import { IconSidebarSidebar } from '@/assets/custom/icon-sidebar-sidebar'
 
				 import { IconThemeDark } from '@/assets/custom/icon-theme-dark'
			
 
				 import { IconThemeLight } from '@/assets/custom/icon-theme-light'
			
 
				 import { IconThemeSystem } from '@/assets/custom/icon-theme-system'
			
 
				+import {
			
 
				+  type ContentLayout,
			
 
				+  THEME_PRESETS,
			
 
				+  type ThemePreset,
			
 
				+  type ThemeRadius,
			
 
				+  type ThemeScale,
			
 
				+} from '@/lib/theme-customization'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { useDirection } from '@/context/direction-provider'
			
 
				 import { type Collapsible, useLayout } from '@/context/layout-provider'
			
 
				+import { useThemeCustomization } from '@/context/theme-customization-provider'
			
 
				 import { useTheme } from '@/context/theme-provider'
			
 
				 import { Button } from '@/components/ui/button'
			
 
				 import {
			
@@ -28,32 +37,38 @@ import {
 
				 } from '@/components/ui/sheet'
			
 
				 import { useSidebar } from './ui/sidebar'
			
 
				 
			
 
				+const Item = RadioPrimitive.Root
			
 
				+
			
 
				 export function ConfigDrawer() {
			
 
				   const { t } = useTranslation()
			
 
				   const { setOpen } = useSidebar()
			
 
				   const { resetDir } = useDirection()
			
 
				   const { resetTheme } = useTheme()
			
 
				   const { resetLayout } = useLayout()
			
 
				+  const { resetCustomization } = useThemeCustomization()
			
 
				 
			
 
				   const handleReset = () => {
			
 
				     setOpen(true)
			
 
				     resetDir()
			
 
				     resetTheme()
			
 
				     resetLayout()
			
 
				+    resetCustomization()
			
 
				   }
			
 
				 
			
 
				   return (
			
 
				     <Sheet>
			
 
				-      <SheetTrigger asChild>
			
 
				-        <Button
			
 
				-          size='icon'
			
 
				-          variant='ghost'
			
 
				-          aria-label={t('Open theme settings')}
			
 
				-          aria-describedby='config-drawer-description'
			
 
				-          className='rounded-full max-md:hidden'
			
 
				-        >
			
 
				-          <Palette className='size-[1.2rem]' aria-hidden='true' />
			
 
				-        </Button>
			
 
				+      <SheetTrigger
			
 
				+        render={
			
 
				+          <Button
			
 
				+            size='icon'
			
 
				+            variant='ghost'
			
 
				+            aria-label={t('Open theme settings')}
			
 
				+            aria-describedby='config-drawer-description'
			
 
				+            className='rounded-full max-md:hidden'
			
 
				+          />
			
 
				+        }
			
 
				+      >
			
 
				+        <Palette className='size-[1.2rem]' aria-hidden='true' />
			
 
				       </SheetTrigger>
			
 
				       <SheetContent className='flex w-full flex-col sm:max-w-md'>
			
 
				         <SheetHeader className='pb-0 text-start'>
			
@@ -64,8 +79,12 @@ export function ConfigDrawer() {
 
				         </SheetHeader>
			
 
				         <div className='space-y-6 overflow-y-auto px-4'>
			
 
				           <ThemeConfig />
			
 
				+          <PresetConfig />
			
 
				+          <RadiusConfig />
			
 
				+          <ScaleConfig />
			
 
				           <SidebarConfig />
			
 
				           <LayoutConfig />
			
 
				+          <ContentLayoutConfig />
			
 
				           <DirConfig />
			
 
				         </div>
			
 
				         <SheetFooter className='gap-2'>
			
@@ -82,12 +101,7 @@ export function ConfigDrawer() {
 
				   )
			
 
				 }
			
 
				 
			
 
				-function SectionTitle({
			
 
				-  title,
			
 
				-  showReset = false,
			
 
				-  onReset,
			
 
				-  className,
			
 
				-}: {
			
 
				+function SectionTitle(props: {
			
 
				   title: string
			
 
				   showReset?: boolean
			
 
				   onReset?: () => void
			
@@ -97,16 +111,16 @@ function SectionTitle({
 
				     <div
			
 
				       className={cn(
			
 
				         'text-muted-foreground mb-2 flex items-center gap-2 text-sm font-semibold',
			
 
				-        className
			
 
				+        props.className
			
 
				       )}
			
 
				     >
			
 
				-      {title}
			
 
				-      {showReset && onReset && (
			
 
				+      {props.title}
			
 
				+      {props.showReset && props.onReset && (
			
 
				         <Button
			
 
				           size='icon'
			
 
				           variant='secondary'
			
 
				           className='size-4 rounded-full'
			
 
				-          onClick={onReset}
			
 
				+          onClick={props.onReset}
			
 
				           aria-label='Reset'
			
 
				         >
			
 
				           <RotateCcw className='size-3' aria-hidden='true' />
			
@@ -116,10 +130,7 @@ function SectionTitle({
 
				   )
			
 
				 }
			
 
				 
			
 
				-function RadioGroupItem({
			
 
				-  item,
			
 
				-  isTheme = false,
			
 
				-}: {
			
 
				+function RadioGroupItem(props: {
			
 
				   item: {
			
 
				     value: string
			
 
				     label: string
			
@@ -127,45 +138,46 @@ function RadioGroupItem({
 
				   }
			
 
				   isTheme?: boolean
			
 
				 }) {
			
 
				+  const isTheme = props.isTheme ?? false
			
 
				   return (
			
 
				     <Item
			
 
				-      value={item.value}
			
 
				+      value={props.item.value}
			
 
				       className={cn('group outline-none', 'transition duration-200 ease-in')}
			
 
				-      aria-label={`Select ${item.label.toLowerCase()}`}
			
 
				-      aria-describedby={`${item.value}-description`}
			
 
				+      aria-label={`Select ${props.item.label.toLowerCase()}`}
			
 
				+      aria-describedby={`${props.item.value}-description`}
			
 
				     >
			
 
				       <div
			
 
				         className={cn(
			
 
				           'ring-border relative rounded-[6px] ring-[1px]',
			
 
				-          'group-data-[state=checked]:ring-primary group-data-[state=checked]:shadow-2xl',
			
 
				+          'group-data-checked:ring-primary group-data-checked:shadow-2xl',
			
 
				           'group-focus-visible:ring-2'
			
 
				         )}
			
 
				         role='img'
			
 
				         aria-hidden='false'
			
 
				-        aria-label={`${item.label} option preview`}
			
 
				+        aria-label={`${props.item.label} option preview`}
			
 
				       >
			
 
				         <CircleCheck
			
 
				           className={cn(
			
 
				             'fill-primary size-6 stroke-white',
			
 
				-            'group-data-[state=unchecked]:hidden',
			
 
				+            'group-data-unchecked:hidden',
			
 
				             'absolute top-0 right-0 translate-x-1/2 -translate-y-1/2'
			
 
				           )}
			
 
				           aria-hidden='true'
			
 
				         />
			
 
				-        <item.icon
			
 
				+        <props.item.icon
			
 
				           className={cn(
			
 
				             !isTheme &&
			
 
				-              'stroke-primary fill-primary group-data-[state=unchecked]:stroke-muted-foreground group-data-[state=unchecked]:fill-muted-foreground'
			
 
				+              'stroke-primary fill-primary group-data-unchecked:stroke-muted-foreground group-data-unchecked:fill-muted-foreground'
			
 
				           )}
			
 
				           aria-hidden='true'
			
 
				         />
			
 
				       </div>
			
 
				       <div
			
 
				         className='mt-1 text-xs'
			
 
				-        id={`${item.value}-description`}
			
 
				+        id={`${props.item.value}-description`}
			
 
				         aria-live='polite'
			
 
				       >
			
 
				-        {item.label}
			
 
				+        {props.item.label}
			
 
				       </div>
			
 
				     </Item>
			
 
				   )
			
@@ -189,21 +201,9 @@ function ThemeConfig() {
 
				         aria-describedby='theme-description'
			
 
				       >
			
 
				         {[
			
 
				-          {
			
 
				-            value: 'system',
			
 
				-            label: 'System',
			
 
				-            icon: IconThemeSystem,
			
 
				-          },
			
 
				-          {
			
 
				-            value: 'light',
			
 
				-            label: 'Light',
			
 
				-            icon: IconThemeLight,
			
 
				-          },
			
 
				-          {
			
 
				-            value: 'dark',
			
 
				-            label: 'Dark',
			
 
				-            icon: IconThemeDark,
			
 
				-          },
			
 
				+          { value: 'system', label: t('System'), icon: IconThemeSystem },
			
 
				+          { value: 'light', label: t('Light'), icon: IconThemeLight },
			
 
				+          { value: 'dark', label: t('Dark'), icon: IconThemeDark },
			
 
				         ].map((item) => (
			
 
				           <RadioGroupItem key={item.value} item={item} isTheme />
			
 
				         ))}
			
@@ -215,6 +215,219 @@ function ThemeConfig() {
 
				   )
			
 
				 }
			
 
				 
			
 
				+function PresetConfig() {
			
 
				+  const { t } = useTranslation()
			
 
				+  const { defaults, customization, setPreset } = useThemeCustomization()
			
 
				+  return (
			
 
				+    <div>
			
 
				+      <SectionTitle
			
 
				+        title={t('Color preset')}
			
 
				+        showReset={customization.preset !== defaults.preset}
			
 
				+        onReset={() => setPreset(defaults.preset)}
			
 
				+      />
			
 
				+      <Radio
			
 
				+        value={customization.preset}
			
 
				+        onValueChange={(v) => setPreset(v as ThemePreset)}
			
 
				+        className='grid w-full grid-cols-4 gap-3'
			
 
				+        aria-label={t('Select color preset')}
			
 
				+      >
			
 
				+        {THEME_PRESETS.map((preset) => (
			
 
				+          <Item
			
 
				+            key={preset.value}
			
 
				+            value={preset.value}
			
 
				+            className='group flex flex-col items-stretch outline-none'
			
 
				+            aria-label={t(`preset.${preset.value}`)}
			
 
				+          >
			
 
				+            <div
			
 
				+              className={cn(
			
 
				+                'ring-border relative h-12 rounded-md ring-[1px] transition',
			
 
				+                'group-data-checked:ring-primary group-data-checked:shadow-md',
			
 
				+                'group-focus-visible:ring-2',
			
 
				+                'group-hover:ring-primary/60'
			
 
				+              )}
			
 
				+            >
			
 
				+              <div
			
 
				+                aria-hidden='true'
			
 
				+                className='absolute inset-0 rounded-md'
			
 
				+                style={
			
 
				+                  preset.value === 'default'
			
 
				+                    ? {
			
 
				+                        background:
			
 
				+                          'linear-gradient(135deg, var(--background) 0%, var(--muted) 50%, var(--foreground) 100%)',
			
 
				+                      }
			
 
				+                    : {
			
 
				+                        background: `linear-gradient(135deg, ${preset.swatches[0]} 0%, ${preset.swatches[1] ?? preset.swatches[0]} 100%)`,
			
 
				+                      }
			
 
				+                }
			
 
				+              />
			
 
				+              <CircleCheck
			
 
				+                className={cn(
			
 
				+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
			
 
				+                  'group-data-unchecked:hidden'
			
 
				+                )}
			
 
				+                aria-hidden='true'
			
 
				+              />
			
 
				+            </div>
			
 
				+            <div className='mt-1.5 truncate text-center text-xs'>
			
 
				+              {t(`preset.${preset.value}`)}
			
 
				+            </div>
			
 
				+          </Item>
			
 
				+        ))}
			
 
				+      </Radio>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const RADIUS_OPTIONS: {
			
 
				+  value: ThemeRadius
			
 
				+  label: string
			
 
				+  // CSS border-radius value used to render the visual preview corner.
			
 
				+  preview: string
			
 
				+}[] = [
			
 
				+  { value: 'default', label: 'Auto', preview: '999px' },
			
 
				+  { value: 'none', label: '0', preview: '0' },
			
 
				+  { value: 'sm', label: '0.3', preview: '0.3rem' },
			
 
				+  { value: 'md', label: '0.5', preview: '0.5rem' },
			
 
				+  { value: 'lg', label: '0.75', preview: '0.75rem' },
			
 
				+  { value: 'xl', label: '1.0', preview: '1rem' },
			
 
				+]
			
 
				+
			
 
				+function RadiusConfig() {
			
 
				+  const { t } = useTranslation()
			
 
				+  const { defaults, customization, setRadius } = useThemeCustomization()
			
 
				+  return (
			
 
				+    <div>
			
 
				+      <SectionTitle
			
 
				+        title={t('Border radius')}
			
 
				+        showReset={customization.radius !== defaults.radius}
			
 
				+        onReset={() => setRadius(defaults.radius)}
			
 
				+      />
			
 
				+      <Radio
			
 
				+        value={customization.radius}
			
 
				+        onValueChange={(v) => setRadius(v as ThemeRadius)}
			
 
				+        className='grid w-full grid-cols-6 gap-2'
			
 
				+        aria-label={t('Select border radius')}
			
 
				+      >
			
 
				+        {RADIUS_OPTIONS.map((option) => (
			
 
				+          <Item
			
 
				+            key={option.value}
			
 
				+            value={option.value}
			
 
				+            className='group flex flex-col items-stretch outline-none'
			
 
				+            aria-label={
			
 
				+              option.value === 'default' ? t('System default') : option.label
			
 
				+            }
			
 
				+          >
			
 
				+            <div
			
 
				+              className={cn(
			
 
				+                'ring-border relative h-12 rounded-md ring-[1px] transition',
			
 
				+                'group-data-checked:ring-primary group-data-checked:shadow-md',
			
 
				+                'group-focus-visible:ring-2',
			
 
				+                'group-hover:ring-primary/60'
			
 
				+              )}
			
 
				+            >
			
 
				+              <CircleCheck
			
 
				+                className={cn(
			
 
				+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
			
 
				+                  'group-data-unchecked:hidden'
			
 
				+                )}
			
 
				+                aria-hidden='true'
			
 
				+              />
			
 
				+              <span
			
 
				+                aria-hidden='true'
			
 
				+                className='border-foreground/70 absolute top-2.5 left-2.5 size-3.5 border-t-[1.5px] border-l-[1.5px]'
			
 
				+                style={{ borderTopLeftRadius: option.preview }}
			
 
				+              />
			
 
				+            </div>
			
 
				+            <div className='mt-1.5 text-center text-xs'>{option.label}</div>
			
 
				+          </Item>
			
 
				+        ))}
			
 
				+      </Radio>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Visual preview rows for the density preset. Each row's height represents
			
 
				+ * the relative line-height density (compact = tight rows, comfortable = wide).
			
 
				+ */
			
 
				+function ScalePreview(props: { rows: number; rowGap: string }) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      aria-hidden='true'
			
 
				+      className='absolute inset-2.5 flex flex-col justify-center'
			
 
				+      style={{ gap: props.rowGap }}
			
 
				+    >
			
 
				+      {Array.from({ length: props.rows }).map((_, i) => (
			
 
				+        <span
			
 
				+          key={i}
			
 
				+          className='bg-foreground/60 block h-[2px] rounded-full'
			
 
				+          style={{ width: `${85 - i * 10}%` }}
			
 
				+        />
			
 
				+      ))}
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ScaleConfig() {
			
 
				+  const { t } = useTranslation()
			
 
				+  const { defaults, customization, setScale } = useThemeCustomization()
			
 
				+  const scaleOptions: {
			
 
				+    value: ThemeScale
			
 
				+    label: string
			
 
				+    rows: number
			
 
				+    rowGap: string
			
 
				+  }[] = [
			
 
				+    { value: 'sm', label: t('Compact'), rows: 4, rowGap: '3px' },
			
 
				+    { value: 'default', label: t('Default'), rows: 3, rowGap: '6px' },
			
 
				+    { value: 'lg', label: t('Comfortable'), rows: 2, rowGap: '10px' },
			
 
				+  ]
			
 
				+  return (
			
 
				+    <div>
			
 
				+      <SectionTitle
			
 
				+        title={t('Density')}
			
 
				+        showReset={customization.scale !== defaults.scale}
			
 
				+        onReset={() => setScale(defaults.scale)}
			
 
				+      />
			
 
				+      <Radio
			
 
				+        value={customization.scale}
			
 
				+        onValueChange={(v) => setScale(v as ThemeScale)}
			
 
				+        className='grid w-full grid-cols-3 gap-4'
			
 
				+        aria-label={t('Select interface density')}
			
 
				+      >
			
 
				+        {scaleOptions.map((option) => (
			
 
				+          <Item
			
 
				+            key={option.value}
			
 
				+            value={option.value}
			
 
				+            className='group flex flex-col items-stretch outline-none'
			
 
				+            aria-label={option.label}
			
 
				+          >
			
 
				+            <div
			
 
				+              className={cn(
			
 
				+                'ring-border relative h-12 rounded-md ring-[1px] transition',
			
 
				+                'group-data-checked:ring-primary group-data-checked:shadow-md',
			
 
				+                'group-focus-visible:ring-2',
			
 
				+                'group-hover:ring-primary/60'
			
 
				+              )}
			
 
				+            >
			
 
				+              <CircleCheck
			
 
				+                className={cn(
			
 
				+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
			
 
				+                  'group-data-unchecked:hidden'
			
 
				+                )}
			
 
				+                aria-hidden='true'
			
 
				+              />
			
 
				+              <ScalePreview rows={option.rows} rowGap={option.rowGap} />
			
 
				+            </div>
			
 
				+            <div className='mt-1.5 truncate text-center text-xs'>
			
 
				+              {option.label}
			
 
				+            </div>
			
 
				+          </Item>
			
 
				+        ))}
			
 
				+      </Radio>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				 function SidebarConfig() {
			
 
				   const { t } = useTranslation()
			
 
				   const { defaultVariant, variant, setVariant } = useLayout()
			
@@ -233,21 +446,13 @@ function SidebarConfig() {
 
				         aria-describedby='sidebar-description'
			
 
				       >
			
 
				         {[
			
 
				-          {
			
 
				-            value: 'inset',
			
 
				-            label: 'Inset',
			
 
				-            icon: IconSidebarInset,
			
 
				-          },
			
 
				+          { value: 'inset', label: t('Inset'), icon: IconSidebarInset },
			
 
				           {
			
 
				             value: 'floating',
			
 
				-            label: 'Floating',
			
 
				+            label: t('Floating'),
			
 
				             icon: IconSidebarFloating,
			
 
				           },
			
 
				-          {
			
 
				-            value: 'sidebar',
			
 
				-            label: 'Sidebar',
			
 
				-            icon: IconSidebarSidebar,
			
 
				-          },
			
 
				+          { value: 'sidebar', label: t('Sidebar'), icon: IconSidebarSidebar },
			
 
				         ].map((item) => (
			
 
				           <RadioGroupItem key={item.value} item={item} />
			
 
				         ))}
			
@@ -291,19 +496,11 @@ function LayoutConfig() {
 
				         aria-describedby='layout-description'
			
 
				       >
			
 
				         {[
			
 
				-          {
			
 
				-            value: 'default',
			
 
				-            label: 'Default',
			
 
				-            icon: IconLayoutDefault,
			
 
				-          },
			
 
				-          {
			
 
				-            value: 'icon',
			
 
				-            label: 'Compact',
			
 
				-            icon: IconLayoutCompact,
			
 
				-          },
			
 
				+          { value: 'default', label: t('Default'), icon: IconLayoutDefault },
			
 
				+          { value: 'icon', label: t('Compact'), icon: IconLayoutCompact },
			
 
				           {
			
 
				             value: 'offcanvas',
			
 
				-            label: 'Full layout',
			
 
				+            label: t('Full layout'),
			
 
				             icon: IconLayoutFull,
			
 
				           },
			
 
				         ].map((item) => (
			
@@ -319,6 +516,80 @@ function LayoutConfig() {
 
				   )
			
 
				 }
			
 
				 
			
 
				+function ContentLayoutConfig() {
			
 
				+  const { t } = useTranslation()
			
 
				+  const { defaults, customization, setContentLayout } = useThemeCustomization()
			
 
				+  return (
			
 
				+    <div className='max-md:hidden'>
			
 
				+      <SectionTitle
			
 
				+        title={t('Content width')}
			
 
				+        showReset={customization.contentLayout !== defaults.contentLayout}
			
 
				+        onReset={() => setContentLayout(defaults.contentLayout)}
			
 
				+      />
			
 
				+      <Radio
			
 
				+        value={customization.contentLayout}
			
 
				+        onValueChange={(v) => setContentLayout(v as ContentLayout)}
			
 
				+        className='grid w-full grid-cols-2 gap-4'
			
 
				+        aria-label={t('Select content width')}
			
 
				+      >
			
 
				+        {[
			
 
				+          { value: 'full', label: t('Full width') },
			
 
				+          { value: 'centered', label: t('Centered') },
			
 
				+        ].map((option) => (
			
 
				+          <Item
			
 
				+            key={option.value}
			
 
				+            value={option.value}
			
 
				+            className='group flex flex-col items-stretch outline-none'
			
 
				+            aria-label={option.label}
			
 
				+          >
			
 
				+            <div
			
 
				+              className={cn(
			
 
				+                'ring-border relative h-12 rounded-md ring-[1px] transition',
			
 
				+                'group-data-checked:ring-primary group-data-checked:shadow-md',
			
 
				+                'group-focus-visible:ring-2',
			
 
				+                'group-hover:ring-primary/60'
			
 
				+              )}
			
 
				+            >
			
 
				+              <CircleCheck
			
 
				+                className={cn(
			
 
				+                  'fill-primary absolute top-0 right-0 z-10 size-5 translate-x-1/2 -translate-y-1/2 stroke-white',
			
 
				+                  'group-data-unchecked:hidden'
			
 
				+                )}
			
 
				+                aria-hidden='true'
			
 
				+              />
			
 
				+              <ContentLayoutPreview centered={option.value === 'centered'} />
			
 
				+            </div>
			
 
				+            <div className='mt-1.5 truncate text-center text-xs'>
			
 
				+              {option.label}
			
 
				+            </div>
			
 
				+          </Item>
			
 
				+        ))}
			
 
				+      </Radio>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Mini "page" mock used as the visual preview for content-width options.
			
 
				+ * `full` fills horizontally, `centered` clamps the body to a narrow column.
			
 
				+ */
			
 
				+function ContentLayoutPreview(props: { centered: boolean }) {
			
 
				+  return (
			
 
				+    <div aria-hidden='true' className='absolute inset-2 flex flex-col gap-1.5'>
			
 
				+      <span className='bg-foreground/40 block h-1.5 w-full rounded-sm' />
			
 
				+      <div
			
 
				+        className={cn(
			
 
				+          'flex flex-1 flex-col gap-1',
			
 
				+          props.centered ? 'mx-auto w-1/2' : 'w-full'
			
 
				+        )}
			
 
				+      >
			
 
				+        <span className='bg-foreground/60 block h-[2px] w-full rounded-full' />
			
 
				+        <span className='bg-foreground/60 block h-[2px] w-3/4 rounded-full' />
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				 function DirConfig() {
			
 
				   const { t } = useTranslation()
			
 
				   const { defaultDir, dir, setDir } = useDirection()
			
@@ -339,14 +610,14 @@ function DirConfig() {
 
				         {[
			
 
				           {
			
 
				             value: 'ltr',
			
 
				-            label: 'Left to Right',
			
 
				+            label: t('Left to Right'),
			
 
				             icon: (props: SVGProps<SVGSVGElement>) => (
			
 
				               <IconDir dir='ltr' {...props} />
			
 
				             ),
			
 
				           },
			
 
				           {
			
 
				             value: 'rtl',
			
 
				-            label: 'Right to Left',
			
 
				+            label: t('Right to Left'),
			
 
				             icon: (props: SVGProps<SVGSVGElement>) => (
			
 
				               <IconDir dir='rtl' {...props} />
			
 
				             ),
			
--- a/web/default/src/components/confirm-dialog.tsx
+++ b/web/default/src/components/confirm-dialog.tsx
@@ -46,8 +46,8 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
 
				       <AlertDialogContent className={cn(className && className)}>
			
 
				         <AlertDialogHeader className='text-start'>
			
 
				           <AlertDialogTitle>{title}</AlertDialogTitle>
			
 
				-          <AlertDialogDescription asChild>
			
 
				-            <div>{desc}</div>
			
 
				+          <AlertDialogDescription render={<div />}>
			
 
				+            {desc}
			
 
				           </AlertDialogDescription>
			
 
				         </AlertDialogHeader>
			
 
				         {children}
			
--- a/web/default/src/components/copy-button.tsx
+++ b/web/default/src/components/copy-button.tsx
@@ -61,7 +61,7 @@ export function CopyButton({
 
				   if (tooltip || successTooltip) {
			
 
				     return (
			
 
				       <Tooltip>
			
 
				-        <TooltipTrigger asChild>{button}</TooltipTrigger>
			
 
				+        <TooltipTrigger render={button}></TooltipTrigger>
			
 
				         <TooltipContent>
			
 
				           <p>{isCopied ? resolvedSuccessTooltip : resolvedTooltip}</p>
			
 
				         </TooltipContent>
			
--- a/web/default/src/components/data-table/bulk-actions.tsx
+++ b/web/default/src/components/data-table/bulk-actions.tsx
@@ -88,7 +88,7 @@ export function DataTableBulkActions<TData>({
 
				         break
			
 
				       case 'Escape': {
			
 
				         // Check if the Escape key came from a dropdown trigger or content
			
 
				-        // We can't check dropdown state because Radix UI closes it before our handler runs
			
 
				+        // We can't check dropdown state because the menu closes before our handler runs.
			
 
				         const target = event.target as HTMLElement
			
 
				         const activeElement = document.activeElement as HTMLElement
			
 
				 
			
@@ -156,18 +156,20 @@ export function DataTableBulkActions<TData>({
 
				           )}
			
 
				         >
			
 
				           <Tooltip>
			
 
				-            <TooltipTrigger asChild>
			
 
				-              <Button
			
 
				-                variant='outline'
			
 
				-                size='icon'
			
 
				-                onClick={handleClearSelection}
			
 
				-                className='size-6 rounded-full'
			
 
				-                aria-label={t('Clear selection')}
			
 
				-                title={t('Clear selection (Escape)')}
			
 
				-              >
			
 
				-                <X />
			
 
				-                <span className='sr-only'>{t('Clear selection')}</span>
			
 
				-              </Button>
			
 
				+            <TooltipTrigger
			
 
				+              render={
			
 
				+                <Button
			
 
				+                  variant='outline'
			
 
				+                  size='icon'
			
 
				+                  onClick={handleClearSelection}
			
 
				+                  className='size-6 rounded-full'
			
 
				+                  aria-label={t('Clear selection')}
			
 
				+                  title={t('Clear selection (Escape)')}
			
 
				+                />
			
 
				+              }
			
 
				+            >
			
 
				+              <X />
			
 
				+              <span className='sr-only'>{t('Clear selection')}</span>
			
 
				             </TooltipTrigger>
			
 
				             <TooltipContent>
			
 
				               <p>{t('Clear selection (Escape)')}</p>
			
--- a/web/default/src/components/data-table/column-header.tsx
+++ b/web/default/src/components/data-table/column-header.tsx
@@ -1,10 +1,10 @@
 
				-import {
			
 
				-  ArrowDownIcon,
			
 
				-  ArrowUpIcon,
			
 
				-  CaretSortIcon,
			
 
				-  EyeNoneIcon,
			
 
				-} from '@radix-ui/react-icons'
			
 
				 import { type Column } from '@tanstack/react-table'
			
 
				+import {
			
 
				+  ArrowDown as ArrowDownIcon,
			
 
				+  ArrowUp as ArrowUpIcon,
			
 
				+  ChevronsUpDown as CaretSortIcon,
			
 
				+  EyeOff as EyeNoneIcon,
			
 
				+} from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { Button } from '@/components/ui/button'
			
@@ -35,21 +35,23 @@ export function DataTableColumnHeader<TData, TValue>({
 
				   return (
			
 
				     <div className={cn('flex items-center space-x-2', className)}>
			
 
				       <DropdownMenu>
			
 
				-        <DropdownMenuTrigger asChild>
			
 
				-          <Button
			
 
				-            variant='ghost'
			
 
				-            size='sm'
			
 
				-            className='data-[state=open]:bg-accent -ms-3 h-8'
			
 
				-          >
			
 
				-            <span>{title}</span>
			
 
				-            {column.getIsSorted() === 'desc' ? (
			
 
				-              <ArrowDownIcon className='ms-2 h-4 w-4' />
			
 
				-            ) : column.getIsSorted() === 'asc' ? (
			
 
				-              <ArrowUpIcon className='ms-2 h-4 w-4' />
			
 
				-            ) : (
			
 
				-              <CaretSortIcon className='ms-2 h-4 w-4' />
			
 
				-            )}
			
 
				-          </Button>
			
 
				+        <DropdownMenuTrigger
			
 
				+          render={
			
 
				+            <Button
			
 
				+              variant='ghost'
			
 
				+              size='sm'
			
 
				+              className='data-popup-open:bg-accent -ms-3 h-8'
			
 
				+            />
			
 
				+          }
			
 
				+        >
			
 
				+          <span>{title}</span>
			
 
				+          {column.getIsSorted() === 'desc' ? (
			
 
				+            <ArrowDownIcon className='ms-2 h-4 w-4' />
			
 
				+          ) : column.getIsSorted() === 'asc' ? (
			
 
				+            <ArrowUpIcon className='ms-2 h-4 w-4' />
			
 
				+          ) : (
			
 
				+            <CaretSortIcon className='ms-2 h-4 w-4' />
			
 
				+          )}
			
 
				         </DropdownMenuTrigger>
			
 
				         <DropdownMenuContent align='start'>
			
 
				           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
			
--- a/web/default/src/components/data-table/data-table-page.tsx
+++ b/web/default/src/components/data-table/data-table-page.tsx
@@ -0,0 +1,372 @@
 
				+import * as React from 'react'
			
 
				+import {
			
 
				+  flexRender,
			
 
				+  type ColumnDef,
			
 
				+  type Row,
			
 
				+  type Table as TanstackTable,
			
 
				+} from '@tanstack/react-table'
			
 
				+import { useMediaQuery } from '@/hooks'
			
 
				+import { cn } from '@/lib/utils'
			
 
				+import {
			
 
				+  Table,
			
 
				+  TableBody,
			
 
				+  TableCell,
			
 
				+  TableHead,
			
 
				+  TableHeader,
			
 
				+  TableRow,
			
 
				+} from '@/components/ui/table'
			
 
				+import { PageFooterPortal } from '@/components/layout'
			
 
				+import { MobileCardList } from './mobile-card-list'
			
 
				+import { DataTablePagination } from './pagination'
			
 
				+import { TableEmpty } from './table-empty'
			
 
				+import { TableSkeleton } from './table-skeleton'
			
 
				+import { DataTableToolbar } from './toolbar'
			
 
				+
			
 
				+/**
			
 
				+ * Pass-through configuration for the default {@link DataTableToolbar}.
			
 
				+ * Pass `toolbar` (ReactNode) instead to fully replace the default toolbar.
			
 
				+ */
			
 
				+export type DataTablePageToolbarProps<TData> = Omit<
			
 
				+  React.ComponentProps<typeof DataTableToolbar<TData>>,
			
 
				+  'table'
			
 
				+>
			
 
				+
			
 
				+export type DataTablePageProps<TData> = {
			
 
				+  /**
			
 
				+   * TanStack Table instance returned from `useReactTable`.
			
 
				+   */
			
 
				+  table: TanstackTable<TData>
			
 
				+
			
 
				+  /**
			
 
				+   * Column definitions. Used for skeleton column count and empty-state colSpan.
			
 
				+   */
			
 
				+  columns: ColumnDef<TData, unknown>[]
			
 
				+
			
 
				+  /**
			
 
				+   * Initial loading state — renders {@link TableSkeleton} or mobile skeleton.
			
 
				+   */
			
 
				+  isLoading?: boolean
			
 
				+
			
 
				+  /**
			
 
				+   * Refetch / background loading — dims the table without removing rows.
			
 
				+   */
			
 
				+  isFetching?: boolean
			
 
				+
			
 
				+  /**
			
 
				+   * Empty-state title (used for both desktop {@link TableEmpty} and mobile fallback).
			
 
				+   */
			
 
				+  emptyTitle?: string
			
 
				+
			
 
				+  /**
			
 
				+   * Empty-state description.
			
 
				+   */
			
 
				+  emptyDescription?: string
			
 
				+
			
 
				+  /**
			
 
				+   * Empty-state icon override (desktop only; mobile uses default Database icon).
			
 
				+   */
			
 
				+  emptyIcon?: React.ReactNode
			
 
				+
			
 
				+  /**
			
 
				+   * Empty-state extra content — e.g. a "Create" button below the message.
			
 
				+   */
			
 
				+  emptyAction?: React.ReactNode
			
 
				+
			
 
				+  /**
			
 
				+   * Custom toolbar node — fully replaces the default {@link DataTableToolbar}.
			
 
				+   * Useful for layouts like "primary buttons + toolbar" or feature-specific filter cards.
			
 
				+   * If provided, `toolbarProps` is ignored.
			
 
				+   */
			
 
				+  toolbar?: React.ReactNode
			
 
				+
			
 
				+  /**
			
 
				+   * Pass-through props for the default {@link DataTableToolbar}.
			
 
				+   * Ignored if `toolbar` is provided. Pass `null` to omit the toolbar entirely.
			
 
				+   */
			
 
				+  toolbarProps?: DataTablePageToolbarProps<TData> | null
			
 
				+
			
 
				+  /**
			
 
				+   * Bulk action bar — typically a wrapped {@link DataTableBulkActions} component.
			
 
				+   * Rendered only on desktop (mobile selection is uncommon).
			
 
				+   */
			
 
				+  bulkActions?: React.ReactNode
			
 
				+
			
 
				+  /**
			
 
				+   * Custom mobile list node — fully replaces the default {@link MobileCardList}.
			
 
				+   */
			
 
				+  mobile?: React.ReactNode
			
 
				+
			
 
				+  /**
			
 
				+   * Pass-through props for the default {@link MobileCardList}.
			
 
				+   * Ignored if `mobile` is provided.
			
 
				+   */
			
 
				+  mobileProps?: {
			
 
				+    getRowKey?: (row: Row<TData>) => string | number
			
 
				+    getRowClassName?: (row: Row<TData>) => string | undefined
			
 
				+  }
			
 
				+
			
 
				+  /**
			
 
				+   * Disable the mobile-specific layout entirely — always renders desktop table.
			
 
				+   * Useful for pages where the table is read-only and short.
			
 
				+   */
			
 
				+  hideMobile?: boolean
			
 
				+
			
 
				+  /**
			
 
				+   * Row className resolver — applied to both desktop `TableRow` and mobile card.
			
 
				+   * Composes with the default `data-state="selected"` styling on desktop.
			
 
				+   * The `ctx.isMobile` flag is provided so consumers can return the
			
 
				+   * appropriate variant (e.g. `DISABLED_ROW_DESKTOP` vs `DISABLED_ROW_MOBILE`)
			
 
				+   * without having to re-call `useMediaQuery` themselves.
			
 
				+   */
			
 
				+  getRowClassName?: (
			
 
				+    row: Row<TData>,
			
 
				+    ctx: { isMobile: boolean }
			
 
				+  ) => string | undefined
			
 
				+
			
 
				+  /**
			
 
				+   * Custom desktop row renderer — replaces the default `<TableRow>`/`<TableCell>` mapping.
			
 
				+   * Use for expanded rows, aggregate rows, click-on-row navigation, etc.
			
 
				+   */
			
 
				+  renderRow?: (row: Row<TData>) => React.ReactNode
			
 
				+
			
 
				+  /**
			
 
				+   * Apply explicit column widths from `header.getSize()` to `<TableHead>`.
			
 
				+   * Enable this when your column definitions include `size` and you want it honored.
			
 
				+   * Off by default (TanStack Table assigns a default size of 150 to all columns
			
 
				+   * which would unintentionally constrain layouts that don't define sizes).
			
 
				+   */
			
 
				+  applyHeaderSize?: boolean
			
 
				+
			
 
				+  /**
			
 
				+   * Optional skeleton key prefix for stable React keys across re-renders.
			
 
				+   */
			
 
				+  skeletonKeyPrefix?: string
			
 
				+
			
 
				+  /**
			
 
				+   * Whether to render pagination. Defaults to `true`.
			
 
				+   */
			
 
				+  showPagination?: boolean
			
 
				+
			
 
				+  /**
			
 
				+   * Render pagination via `PageFooterPortal` (sticks to page footer).
			
 
				+   * Defaults to `true`. Set `false` to render inline below the table.
			
 
				+   */
			
 
				+  paginationInFooter?: boolean
			
 
				+
			
 
				+  /**
			
 
				+   * Extra content rendered between the table/mobile list and the pagination.
			
 
				+   * E.g. summary stats, helper text.
			
 
				+   */
			
 
				+  afterTable?: React.ReactNode
			
 
				+
			
 
				+  /**
			
 
				+   * Outer wrapper className (applied to the toolbar+table column).
			
 
				+   */
			
 
				+  className?: string
			
 
				+
			
 
				+  /**
			
 
				+   * Desktop table container className (the bordered scroll wrapper).
			
 
				+   */
			
 
				+  tableClassName?: string
			
 
				+
			
 
				+  /**
			
 
				+   * Desktop `<TableHeader>` className override.
			
 
				+   * Useful for sticky headers (`'sticky top-0 z-10 bg-muted/30'`) on long lists.
			
 
				+   */
			
 
				+  tableHeaderClassName?: string
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Unified table page wrapper. Encapsulates the canonical structure used across
			
 
				+ * all list pages: toolbar → desktop table / mobile list → pagination, plus
			
 
				+ * loading/empty states and an opt-in bulk action bar.
			
 
				+ *
			
 
				+ * Most pages should be expressible as:
			
 
				+ * ```tsx
			
 
				+ * <DataTablePage
			
 
				+ *   table={table}
			
 
				+ *   columns={columns}
			
 
				+ *   isLoading={isLoading}
			
 
				+ *   isFetching={isFetching}
			
 
				+ *   emptyTitle={t('No X Found')}
			
 
				+ *   toolbarProps={{ searchPlaceholder: t('Filter...'), filters }}
			
 
				+ *   bulkActions={<MyBulkActions table={table} />}
			
 
				+ * />
			
 
				+ * ```
			
 
				+ *
			
 
				+ * For complex layouts (custom mobile, expanded rows, custom toolbar), use the
			
 
				+ * `toolbar` / `mobile` / `renderRow` slots instead of the `*Props` variants.
			
 
				+ */
			
 
				+export function DataTablePage<TData>(props: DataTablePageProps<TData>) {
			
 
				+  const isMobile = useMediaQuery('(max-width: 640px)')
			
 
				+  const showMobile = isMobile && !props.hideMobile
			
 
				+
			
 
				+  const toolbarNode = renderToolbar(props)
			
 
				+  const mobileNode = renderMobile(props, showMobile)
			
 
				+  const desktopNode = renderDesktop(props, showMobile)
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      <div className={cn('space-y-2.5 sm:space-y-3', props.className)}>
			
 
				+        {toolbarNode}
			
 
				+        {mobileNode}
			
 
				+        {desktopNode}
			
 
				+        {props.afterTable}
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Bulk actions are typically a fixed-position toolbar; let the consumer
			
 
				+          handle its own visibility, we just gate it to non-mobile. */}
			
 
				+      {!showMobile && props.bulkActions}
			
 
				+
			
 
				+      {props.showPagination !== false &&
			
 
				+        (props.paginationInFooter !== false ? (
			
 
				+          <PageFooterPortal>
			
 
				+            <DataTablePagination table={props.table} />
			
 
				+          </PageFooterPortal>
			
 
				+        ) : (
			
 
				+          <div className='pt-2'>
			
 
				+            <DataTablePagination table={props.table} />
			
 
				+          </div>
			
 
				+        ))}
			
 
				+    </>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function renderToolbar<TData>(
			
 
				+  props: DataTablePageProps<TData>
			
 
				+): React.ReactNode {
			
 
				+  if (props.toolbar !== undefined) {
			
 
				+    return props.toolbar
			
 
				+  }
			
 
				+  if (props.toolbarProps === null) {
			
 
				+    return null
			
 
				+  }
			
 
				+  if (props.toolbarProps) {
			
 
				+    return <DataTableToolbar table={props.table} {...props.toolbarProps} />
			
 
				+  }
			
 
				+  return null
			
 
				+}
			
 
				+
			
 
				+function renderMobile<TData>(
			
 
				+  props: DataTablePageProps<TData>,
			
 
				+  showMobile: boolean
			
 
				+): React.ReactNode {
			
 
				+  if (!showMobile) return null
			
 
				+  if (props.mobile !== undefined) return props.mobile
			
 
				+
			
 
				+  const ownGetRowClassName = props.getRowClassName
			
 
				+  const mobileGetRowClassName =
			
 
				+    props.mobileProps?.getRowClassName ??
			
 
				+    (ownGetRowClassName
			
 
				+      ? (row: Row<TData>) => ownGetRowClassName(row, { isMobile: true })
			
 
				+      : undefined)
			
 
				+
			
 
				+  return (
			
 
				+    <MobileCardList
			
 
				+      table={props.table}
			
 
				+      isLoading={props.isLoading}
			
 
				+      emptyTitle={props.emptyTitle}
			
 
				+      emptyDescription={props.emptyDescription}
			
 
				+      getRowKey={props.mobileProps?.getRowKey}
			
 
				+      getRowClassName={mobileGetRowClassName}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function renderDesktop<TData>(
			
 
				+  props: DataTablePageProps<TData>,
			
 
				+  showMobile: boolean
			
 
				+): React.ReactNode {
			
 
				+  if (showMobile) return null
			
 
				+
			
 
				+  const rows = props.table.getRowModel().rows
			
 
				+  const isFetchingOnly = props.isFetching && !props.isLoading
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={cn(
			
 
				+        'overflow-hidden rounded-lg border transition-opacity duration-150',
			
 
				+        isFetchingOnly && 'pointer-events-none opacity-60',
			
 
				+        props.tableClassName
			
 
				+      )}
			
 
				+    >
			
 
				+      <Table>
			
 
				+        <TableHeader className={props.tableHeaderClassName}>
			
 
				+          {props.table.getHeaderGroups().map((headerGroup) => (
			
 
				+            <TableRow key={headerGroup.id}>
			
 
				+              {headerGroup.headers.map((header) => (
			
 
				+                <TableHead
			
 
				+                  key={header.id}
			
 
				+                  colSpan={header.colSpan}
			
 
				+                  style={
			
 
				+                    props.applyHeaderSize
			
 
				+                      ? { width: header.getSize() }
			
 
				+                      : undefined
			
 
				+                  }
			
 
				+                >
			
 
				+                  {header.isPlaceholder
			
 
				+                    ? null
			
 
				+                    : flexRender(
			
 
				+                        header.column.columnDef.header,
			
 
				+                        header.getContext()
			
 
				+                      )}
			
 
				+                </TableHead>
			
 
				+              ))}
			
 
				+            </TableRow>
			
 
				+          ))}
			
 
				+        </TableHeader>
			
 
				+        <TableBody>
			
 
				+          {props.isLoading ? (
			
 
				+            <TableSkeleton
			
 
				+              table={props.table}
			
 
				+              keyPrefix={props.skeletonKeyPrefix}
			
 
				+            />
			
 
				+          ) : rows.length === 0 ? (
			
 
				+            <TableEmpty
			
 
				+              colSpan={props.columns.length}
			
 
				+              title={props.emptyTitle}
			
 
				+              description={props.emptyDescription}
			
 
				+              icon={props.emptyIcon}
			
 
				+            >
			
 
				+              {props.emptyAction}
			
 
				+            </TableEmpty>
			
 
				+          ) : (
			
 
				+            rows.map((row) => {
			
 
				+              if (props.renderRow) {
			
 
				+                return props.renderRow(row)
			
 
				+              }
			
 
				+              return (
			
 
				+                <DefaultRow
			
 
				+                  key={row.id}
			
 
				+                  row={row}
			
 
				+                  className={props.getRowClassName?.(row, { isMobile: false })}
			
 
				+                />
			
 
				+              )
			
 
				+            })
			
 
				+          )}
			
 
				+        </TableBody>
			
 
				+      </Table>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function DefaultRow<TData>({
			
 
				+  row,
			
 
				+  className,
			
 
				+}: {
			
 
				+  row: Row<TData>
			
 
				+  className?: string
			
 
				+}) {
			
 
				+  return (
			
 
				+    <TableRow
			
 
				+      data-state={row.getIsSelected() && 'selected'}
			
 
				+      className={className}
			
 
				+    >
			
 
				+      {row.getVisibleCells().map((cell) => (
			
 
				+        <TableCell key={cell.id}>
			
 
				+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
			
 
				+        </TableCell>
			
 
				+      ))}
			
 
				+    </TableRow>
			
 
				+  )
			
 
				+}
			
--- a/web/default/src/components/data-table/faceted-filter.tsx
+++ b/web/default/src/components/data-table/faceted-filter.tsx
@@ -1,6 +1,6 @@
 
				 import * as React from 'react'
			
 
				-import { CheckIcon, PlusCircledIcon } from '@radix-ui/react-icons'
			
 
				 import { type Column } from '@tanstack/react-table'
			
 
				+import { Check as CheckIcon, PlusCircle as PlusCircledIcon } from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { Badge } from '@/components/ui/badge'
			
@@ -48,44 +48,46 @@ export function DataTableFacetedFilter<TData, TValue>({
 
				 
			
 
				   return (
			
 
				     <Popover>
			
 
				-      <PopoverTrigger asChild>
			
 
				-        <Button variant='outline' size='sm' className='h-8 border-dashed'>
			
 
				-          <PlusCircledIcon className='size-4' />
			
 
				-          {title}
			
 
				-          {selectedValues?.size > 0 && (
			
 
				-            <>
			
 
				-              <Separator orientation='vertical' className='mx-2 h-4' />
			
 
				-              <Badge
			
 
				-                variant='secondary'
			
 
				-                className='rounded-sm px-1 font-normal lg:hidden'
			
 
				-              >
			
 
				-                {selectedValues.size}
			
 
				-              </Badge>
			
 
				-              <div className='hidden space-x-1 lg:flex'>
			
 
				-                {selectedValues.size > 2 ? (
			
 
				-                  <Badge
			
 
				-                    variant='secondary'
			
 
				-                    className='rounded-sm px-1 font-normal'
			
 
				-                  >
			
 
				-                    {selectedValues.size} {t('selected')}
			
 
				-                  </Badge>
			
 
				-                ) : (
			
 
				-                  options
			
 
				-                    .filter((option) => selectedValues.has(option.value))
			
 
				-                    .map((option) => (
			
 
				-                      <Badge
			
 
				-                        variant='secondary'
			
 
				-                        key={option.value}
			
 
				-                        className='rounded-sm px-1 font-normal'
			
 
				-                      >
			
 
				-                        {t(option.label)}
			
 
				-                      </Badge>
			
 
				-                    ))
			
 
				-                )}
			
 
				-              </div>
			
 
				-            </>
			
 
				-          )}
			
 
				-        </Button>
			
 
				+      <PopoverTrigger
			
 
				+        render={
			
 
				+          <Button variant='outline' size='sm' className='h-8 border-dashed' />
			
 
				+        }
			
 
				+      >
			
 
				+        <PlusCircledIcon className='size-4' />
			
 
				+        {title}
			
 
				+        {selectedValues?.size > 0 && (
			
 
				+          <>
			
 
				+            <Separator orientation='vertical' className='mx-2 h-4' />
			
 
				+            <Badge
			
 
				+              variant='secondary'
			
 
				+              className='rounded-sm px-1 font-normal lg:hidden'
			
 
				+            >
			
 
				+              {selectedValues.size}
			
 
				+            </Badge>
			
 
				+            <div className='hidden space-x-1 lg:flex'>
			
 
				+              {selectedValues.size > 2 ? (
			
 
				+                <Badge
			
 
				+                  variant='secondary'
			
 
				+                  className='rounded-sm px-1 font-normal'
			
 
				+                >
			
 
				+                  {selectedValues.size} {t('selected')}
			
 
				+                </Badge>
			
 
				+              ) : (
			
 
				+                options
			
 
				+                  .filter((option) => selectedValues.has(option.value))
			
 
				+                  .map((option) => (
			
 
				+                    <Badge
			
 
				+                      variant='secondary'
			
 
				+                      key={option.value}
			
 
				+                      className='rounded-sm px-1 font-normal'
			
 
				+                    >
			
 
				+                      {t(option.label)}
			
 
				+                    </Badge>
			
 
				+                  ))
			
 
				+              )}
			
 
				+            </div>
			
 
				+          </>
			
 
				+        )}
			
 
				       </PopoverTrigger>
			
 
				       <PopoverContent className='w-[200px] p-0' align='start'>
			
 
				         <Command>
			
--- a/web/default/src/components/data-table/index.ts
+++ b/web/default/src/components/data-table/index.ts
@@ -7,6 +7,7 @@ export { DataTableBulkActions } from './bulk-actions'
 
				 export { TableSkeleton } from './table-skeleton'
			
 
				 export { TableEmpty } from './table-empty'
			
 
				 export { MobileCardList } from './mobile-card-list'
			
 
				+export { DataTablePage, type DataTablePageProps } from './data-table-page'
			
 
				 
			
 
				 export const DISABLED_ROW_DESKTOP =
			
 
				   'bg-muted/85 hover:bg-muted [&>td:first-child]:border-l-muted-foreground/35 dark:bg-zinc-700/55 dark:hover:bg-zinc-700/70 [&>td:first-child]:border-l-4 [&>td:first-child]:pl-1 dark:[&>td:first-child]:border-l-zinc-300/70'
			
--- a/web/default/src/components/data-table/mobile-card-list.tsx
+++ b/web/default/src/components/data-table/mobile-card-list.tsx
@@ -6,6 +6,7 @@ import {
 
				 } from '@tanstack/react-table'
			
 
				 import { Database } from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				+import { cn } from '@/lib/utils'
			
 
				 import {
			
 
				   Empty,
			
 
				   EmptyDescription,
			
@@ -14,7 +15,6 @@ import {
 
				   EmptyTitle,
			
 
				 } from '@/components/ui/empty'
			
 
				 import { Skeleton } from '@/components/ui/skeleton'
			
 
				-import { cn } from '@/lib/utils'
			
 
				 
			
 
				 interface MobileCardListProps<TData> {
			
 
				   table: Table<TData>
			
--- a/web/default/src/components/data-table/pagination.tsx
+++ b/web/default/src/components/data-table/pagination.tsx
@@ -1,10 +1,10 @@
 
				-import {
			
 
				-  ChevronLeftIcon,
			
 
				-  ChevronRightIcon,
			
 
				-  DoubleArrowLeftIcon,
			
 
				-  DoubleArrowRightIcon,
			
 
				-} from '@radix-ui/react-icons'
			
 
				 import { type Table } from '@tanstack/react-table'
			
 
				+import {
			
 
				+  ChevronLeft as ChevronLeftIcon,
			
 
				+  ChevronRight as ChevronRightIcon,
			
 
				+  ChevronsLeft as DoubleArrowLeftIcon,
			
 
				+  ChevronsRight as DoubleArrowRightIcon,
			
 
				+} from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { cn, getPageNumbers } from '@/lib/utils'
			
 
				 import { Button } from '@/components/ui/button'
			
--- a/web/default/src/components/data-table/toolbar.tsx
+++ b/web/default/src/components/data-table/toolbar.tsx
@@ -1,82 +1,152 @@
 
				-import { useState } from 'react'
			
 
				-import { Cross2Icon } from '@radix-ui/react-icons'
			
 
				+import * as React from 'react'
			
 
				+import { useState, type ReactNode } from 'react'
			
 
				 import { type Table } from '@tanstack/react-table'
			
 
				-import { SlidersHorizontal } from 'lucide-react'
			
 
				+import { ChevronDown, Loader2, X as Cross2Icon } from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				-import { Badge } from '@/components/ui/badge'
			
 
				+import { cn } from '@/lib/utils'
			
 
				 import { Button } from '@/components/ui/button'
			
 
				 import { Input } from '@/components/ui/input'
			
 
				 import { DataTableFacetedFilter } from './faceted-filter'
			
 
				 import { DataTableViewOptions } from './view-options'
			
 
				 
			
 
				-type DataTableToolbarProps<TData> = {
			
 
				+type FilterDef = {
			
 
				+  columnId: string
			
 
				+  title: string
			
 
				+  options: {
			
 
				+    label: string
			
 
				+    value: string
			
 
				+    icon?: React.ComponentType<{ className?: string }>
			
 
				+    iconNode?: React.ReactNode
			
 
				+    count?: number
			
 
				+  }[]
			
 
				+  singleSelect?: boolean
			
 
				+}
			
 
				+
			
 
				+export type DataTableToolbarProps<TData> = {
			
 
				   table: Table<TData>
			
 
				+  /**
			
 
				+   * Placeholder for the default search input. Defaults to `t('Filter...')`.
			
 
				+   */
			
 
				   searchPlaceholder?: string
			
 
				+  /**
			
 
				+   * Column id to filter on. When provided, the search input filters
			
 
				+   * a specific column. When omitted, the search input updates the
			
 
				+   * table's `globalFilter`.
			
 
				+   */
			
 
				   searchKey?: string
			
 
				-  filters?: {
			
 
				-    columnId: string
			
 
				-    title: string
			
 
				-    options: {
			
 
				-      label: string
			
 
				-      value: string
			
 
				-      icon?: React.ComponentType<{ className?: string }>
			
 
				-      iconNode?: React.ReactNode
			
 
				-      count?: number
			
 
				-    }[]
			
 
				-    singleSelect?: boolean
			
 
				-  }[]
			
 
				-  /** Custom search component to replace the default input */
			
 
				-  customSearch?: React.ReactNode
			
 
				-  /** Additional search input to show alongside the main search */
			
 
				-  additionalSearch?: React.ReactNode
			
 
				-  /** Whether additional filters are active (for showing reset button) */
			
 
				+  /**
			
 
				+   * Column-level filter chips (faceted multi-select / single-select).
			
 
				+   */
			
 
				+  filters?: FilterDef[]
			
 
				+  /**
			
 
				+   * Replaces the default search input entirely. Use when the primary
			
 
				+   * "search" is something custom — e.g. a date-time range picker.
			
 
				+   */
			
 
				+  customSearch?: ReactNode
			
 
				+  /**
			
 
				+   * Extra inputs/selects displayed in the primary row alongside the
			
 
				+   * search input and filter chips.
			
 
				+   */
			
 
				+  additionalSearch?: ReactNode
			
 
				+  /**
			
 
				+   * Whether non-table filters (e.g. `additionalSearch` or `expandable`
			
 
				+   * inputs) are currently active. Controls Reset button visibility
			
 
				+   * when no column filters are set.
			
 
				+   */
			
 
				   hasAdditionalFilters?: boolean
			
 
				-  /** Callback when reset button is clicked (for clearing additional filters) */
			
 
				+  /**
			
 
				+   * Callback invoked when the user clicks Reset.
			
 
				+   */
			
 
				   onReset?: () => void
			
 
				+  /**
			
 
				+   * Additional filter inputs hidden behind an Expand/Collapse toggle.
			
 
				+   * Inputs flow inline with the primary row when expanded.
			
 
				+   */
			
 
				+  expandable?: ReactNode
			
 
				+  /**
			
 
				+   * When `expandable` is collapsed, highlights the toggle if any of
			
 
				+   * the expandable inputs currently hold a value.
			
 
				+   */
			
 
				+  hasExpandedActiveFilters?: boolean
			
 
				+  /**
			
 
				+   * Custom action buttons rendered BEFORE the built-in
			
 
				+   * Reset / Search / View buttons.
			
 
				+   */
			
 
				+  preActions?: ReactNode
			
 
				+  /**
			
 
				+   * Explicit "Search" / "Apply" callback. When provided the toolbar
			
 
				+   * shows a primary Search button. Filters are committed only on click
			
 
				+   * (form-mode workflow).
			
 
				+   */
			
 
				+  onSearch?: () => void
			
 
				+  /**
			
 
				+   * Loading state for the explicit Search button.
			
 
				+   */
			
 
				+  searchLoading?: boolean
			
 
				+  /**
			
 
				+   * Hide the View Options (column visibility) dropdown.
			
 
				+   */
			
 
				+  hideViewOptions?: boolean
			
 
				+  /**
			
 
				+   * Outer wrapper className override.
			
 
				+   */
			
 
				+  className?: string
			
 
				 }
			
 
				 
			
 
				-export function DataTableToolbar<TData>({
			
 
				-  table,
			
 
				-  searchPlaceholder,
			
 
				-  searchKey,
			
 
				-  filters = [],
			
 
				-  customSearch,
			
 
				-  additionalSearch,
			
 
				-  hasAdditionalFilters = false,
			
 
				-  onReset,
			
 
				-}: DataTableToolbarProps<TData>) {
			
 
				+/**
			
 
				+ * Unified data-table filter panel — Ant Design Pro inspired.
			
 
				+ *
			
 
				+ * Layout (single flex-wrap row):
			
 
				+ * - Filters (search input + additional inputs + filter chips + expandable
			
 
				+ *   inputs) flow horizontally and wrap as needed.
			
 
				+ * - The action cluster (Reset / Search / View / Expand) hugs the right
			
 
				+ *   edge via `ms-auto`. When filters fill a row, the cluster naturally
			
 
				+ *   wraps to the next line — still right-aligned — matching the
			
 
				+ *   collapsed/expanded states from the user's reference design.
			
 
				+ *
			
 
				+ * No background panel, no row separators — relies on whitespace and the
			
 
				+ * adjacent table border for visual hierarchy.
			
 
				+ */
			
 
				+export function DataTableToolbar<TData>(props: DataTableToolbarProps<TData>) {
			
 
				   const { t } = useTranslation()
			
 
				-  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false)
			
 
				-  const resolvedSearchPlaceholder = searchPlaceholder ?? t('Filter...')
			
 
				+  const [expanded, setExpanded] = useState(false)
			
 
				+
			
 
				+  const filters = props.filters ?? []
			
 
				+  const hasExpandable = props.expandable != null
			
 
				+  const hasSearch = props.onSearch != null
			
 
				+
			
 
				   const isFiltered =
			
 
				-    table.getState().columnFilters.length > 0 ||
			
 
				-    table.getState().globalFilter ||
			
 
				-    hasAdditionalFilters
			
 
				+    props.table.getState().columnFilters.length > 0 ||
			
 
				+    !!props.table.getState().globalFilter ||
			
 
				+    !!props.hasAdditionalFilters
			
 
				 
			
 
				-  const activeFilterCount =
			
 
				-    table.getState().columnFilters.length + (hasAdditionalFilters ? 1 : 0)
			
 
				-  const hasFilterContent = filters.length > 0 || additionalSearch != null
			
 
				+  const placeholder = props.searchPlaceholder ?? t('Filter...')
			
 
				 
			
 
				-  const searchInput = searchKey ? (
			
 
				+  const searchInput = props.searchKey ? (
			
 
				     <Input
			
 
				-      placeholder={resolvedSearchPlaceholder}
			
 
				-      value={(table.getColumn(searchKey)?.getFilterValue() as string) ?? ''}
			
 
				+      placeholder={placeholder}
			
 
				+      value={
			
 
				+        (props.table.getColumn(props.searchKey)?.getFilterValue() as string) ??
			
 
				+        ''
			
 
				+      }
			
 
				       onChange={(event) =>
			
 
				-        table.getColumn(searchKey)?.setFilterValue(event.target.value)
			
 
				+        props.table
			
 
				+          .getColumn(props.searchKey!)
			
 
				+          ?.setFilterValue(event.target.value)
			
 
				       }
			
 
				-      className='h-9 w-full sm:h-8 sm:w-[150px] lg:w-[250px]'
			
 
				+      className='w-full sm:w-[200px] lg:w-[240px]'
			
 
				     />
			
 
				   ) : (
			
 
				     <Input
			
 
				-      placeholder={resolvedSearchPlaceholder}
			
 
				-      value={table.getState().globalFilter ?? ''}
			
 
				-      onChange={(event) => table.setGlobalFilter(event.target.value)}
			
 
				-      className='h-9 w-full sm:h-8 sm:w-[150px] lg:w-[250px]'
			
 
				+      placeholder={placeholder}
			
 
				+      value={props.table.getState().globalFilter ?? ''}
			
 
				+      onChange={(event) => props.table.setGlobalFilter(event.target.value)}
			
 
				+      className='w-full sm:w-[200px] lg:w-[240px]'
			
 
				     />
			
 
				   )
			
 
				 
			
 
				   const filterChips = filters.map((filter) => {
			
 
				-    const column = table.getColumn(filter.columnId)
			
 
				+    const column = props.table.getColumn(filter.columnId)
			
 
				     if (!column) return null
			
 
				     return (
			
 
				       <DataTableFacetedFilter
			
@@ -89,65 +159,82 @@ export function DataTableToolbar<TData>({
 
				     )
			
 
				   })
			
 
				 
			
 
				-  const resetButton = isFiltered ? (
			
 
				+  const handleReset = () => {
			
 
				+    props.table.resetColumnFilters()
			
 
				+    props.table.setGlobalFilter('')
			
 
				+    props.onReset?.()
			
 
				+  }
			
 
				+
			
 
				+  // Reset: outline text-only for form mode (always visible, disabled when
			
 
				+  // nothing to reset); ghost text + X for filter-as-you-type mode (only
			
 
				+  // visible when active filters exist).
			
 
				+  const resetButton = hasSearch ? (
			
 
				+    <Button variant='outline' onClick={handleReset} disabled={!isFiltered}>
			
 
				+      {t('Reset')}
			
 
				+    </Button>
			
 
				+  ) : isFiltered ? (
			
 
				     <Button
			
 
				       variant='ghost'
			
 
				-      onClick={() => {
			
 
				-        table.resetColumnFilters()
			
 
				-        table.setGlobalFilter('')
			
 
				-        onReset?.()
			
 
				-      }}
			
 
				-      className='h-8 px-2 lg:px-3'
			
 
				+      onClick={handleReset}
			
 
				+      className='text-muted-foreground hover:text-foreground gap-1 px-2'
			
 
				     >
			
 
				       {t('Reset')}
			
 
				-      <Cross2Icon className='ms-2 h-4 w-4' />
			
 
				+      <Cross2Icon />
			
 
				     </Button>
			
 
				   ) : null
			
 
				 
			
 
				-  return (
			
 
				-    <div className='space-y-2'>
			
 
				-      <div className='flex items-center gap-1.5 sm:gap-2'>
			
 
				-        {/* Search input */}
			
 
				-        {customSearch !== undefined ? customSearch : searchInput}
			
 
				+  const searchButton = hasSearch ? (
			
 
				+    <Button onClick={props.onSearch} disabled={props.searchLoading}>
			
 
				+      {props.searchLoading && <Loader2 className='animate-spin' />}
			
 
				+      {t('Search')}
			
 
				+    </Button>
			
 
				+  ) : null
			
 
				 
			
 
				-        {/* Desktop: filters inline */}
			
 
				-        {additionalSearch && (
			
 
				-          <div className='hidden w-auto sm:block'>{additionalSearch}</div>
			
 
				-        )}
			
 
				-        <div className='hidden flex-wrap gap-2 sm:flex'>{filterChips}</div>
			
 
				-        <div className='hidden sm:block'>{resetButton}</div>
			
 
				+  const viewOptionsNode = !props.hideViewOptions ? (
			
 
				+    <DataTableViewOptions table={props.table} />
			
 
				+  ) : null
			
 
				 
			
 
				-        {/* Mobile: filter toggle button */}
			
 
				-        {hasFilterContent && (
			
 
				-          <Button
			
 
				-            variant='outline'
			
 
				-            size='sm'
			
 
				-            className='relative h-9 shrink-0 gap-1 px-2 sm:hidden'
			
 
				-            onClick={() => setMobileFiltersOpen((v) => !v)}
			
 
				-          >
			
 
				-            <SlidersHorizontal className='h-3.5 w-3.5' />
			
 
				-            {activeFilterCount > 0 && (
			
 
				-              <Badge
			
 
				-                variant='secondary'
			
 
				-                className='h-4 min-w-4 rounded-full px-1 text-[10px] leading-none'
			
 
				-              >
			
 
				-                {activeFilterCount}
			
 
				-              </Badge>
			
 
				-            )}
			
 
				-          </Button>
			
 
				+  const expandToggle = hasExpandable ? (
			
 
				+    <Button
			
 
				+      variant='ghost'
			
 
				+      onClick={() => setExpanded((p) => !p)}
			
 
				+      aria-expanded={expanded}
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground hover:text-foreground gap-1 px-2',
			
 
				+        props.hasExpandedActiveFilters &&
			
 
				+          !expanded &&
			
 
				+          'text-primary hover:text-primary'
			
 
				+      )}
			
 
				+    >
			
 
				+      {expanded ? t('Collapse') : t('Expand')}
			
 
				+      <ChevronDown
			
 
				+        className={cn(
			
 
				+          'size-3.5 transition-transform duration-200',
			
 
				+          expanded && 'rotate-180'
			
 
				         )}
			
 
				+      />
			
 
				+    </Button>
			
 
				+  ) : null
			
 
				 
			
 
				-        <DataTableViewOptions table={table} />
			
 
				-      </div>
			
 
				-
			
 
				-      {/* Mobile: collapsible filter area */}
			
 
				-      {hasFilterContent && mobileFiltersOpen && (
			
 
				-        <div className='bg-muted/30 flex flex-wrap items-center gap-2 rounded-lg border p-2 sm:hidden'>
			
 
				-          {additionalSearch && <div className='w-full'>{additionalSearch}</div>}
			
 
				-          {filterChips}
			
 
				-          {resetButton}
			
 
				-        </div>
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={cn(
			
 
				+        'flex flex-wrap items-center gap-2 sm:gap-3',
			
 
				+        props.className
			
 
				       )}
			
 
				+    >
			
 
				+      {props.customSearch !== undefined ? props.customSearch : searchInput}
			
 
				+      {props.additionalSearch}
			
 
				+      {filterChips}
			
 
				+      {expanded && hasExpandable && props.expandable}
			
 
				+
			
 
				+      <div className='ms-auto flex shrink-0 items-center gap-1.5 sm:gap-2'>
			
 
				+        {props.preActions}
			
 
				+        {resetButton}
			
 
				+        {searchButton}
			
 
				+        {viewOptionsNode}
			
 
				+        {expandToggle}
			
 
				+      </div>
			
 
				     </div>
			
 
				   )
			
 
				 }
			
--- a/web/default/src/components/data-table/view-options.tsx
+++ b/web/default/src/components/data-table/view-options.tsx
@@ -1,5 +1,3 @@
 
				-import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu'
			
 
				-import { MixerHorizontalIcon } from '@radix-ui/react-icons'
			
 
				 import { type Table } from '@tanstack/react-table'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { Button } from '@/components/ui/button'
			
@@ -7,8 +5,9 @@ import {
 
				   DropdownMenu,
			
 
				   DropdownMenuCheckboxItem,
			
 
				   DropdownMenuContent,
			
 
				+  DropdownMenuGroup,
			
 
				   DropdownMenuLabel,
			
 
				-  DropdownMenuSeparator,
			
 
				+  DropdownMenuTrigger,
			
 
				 } from '@/components/ui/dropdown-menu'
			
 
				 
			
 
				 type DataTableViewOptionsProps<TData> = {
			
@@ -21,37 +20,39 @@ export function DataTableViewOptions<TData>({
 
				   const { t } = useTranslation()
			
 
				   return (
			
 
				     <DropdownMenu modal={false}>
			
 
				-      <DropdownMenuTrigger asChild>
			
 
				-        <Button
			
 
				-          variant='outline'
			
 
				-          size='sm'
			
 
				-          className='ms-auto h-9 w-9 px-0 sm:h-8 sm:w-auto sm:px-3 lg:flex'
			
 
				-        >
			
 
				-          <MixerHorizontalIcon className='size-4' />
			
 
				-          <span className='hidden sm:inline'>{t('View')}</span>
			
 
				-        </Button>
			
 
				+      <DropdownMenuTrigger
			
 
				+        render={
			
 
				+          <Button
			
 
				+            variant='outline'
			
 
				+            className='shrink-0'
			
 
				+            aria-label={t('View')}
			
 
				+          />
			
 
				+        }
			
 
				+      >
			
 
				+        {t('View')}
			
 
				       </DropdownMenuTrigger>
			
 
				       <DropdownMenuContent align='end' className='w-[150px]'>
			
 
				-        <DropdownMenuLabel>{t('Toggle columns')}</DropdownMenuLabel>
			
 
				-        <DropdownMenuSeparator />
			
 
				-        {table
			
 
				-          .getAllColumns()
			
 
				-          .filter(
			
 
				-            (column) =>
			
 
				-              typeof column.accessorFn !== 'undefined' && column.getCanHide()
			
 
				-          )
			
 
				-          .map((column) => {
			
 
				-            return (
			
 
				-              <DropdownMenuCheckboxItem
			
 
				-                key={column.id}
			
 
				-                className='capitalize'
			
 
				-                checked={column.getIsVisible()}
			
 
				-                onCheckedChange={(value) => column.toggleVisibility(!!value)}
			
 
				-              >
			
 
				-                {column.columnDef.meta?.label ?? column.id}
			
 
				-              </DropdownMenuCheckboxItem>
			
 
				+        <DropdownMenuGroup>
			
 
				+          <DropdownMenuLabel>{t('Toggle columns')}</DropdownMenuLabel>
			
 
				+          {table
			
 
				+            .getAllColumns()
			
 
				+            .filter(
			
 
				+              (column) =>
			
 
				+                typeof column.accessorFn !== 'undefined' && column.getCanHide()
			
 
				             )
			
 
				-          })}
			
 
				+            .map((column) => {
			
 
				+              return (
			
 
				+                <DropdownMenuCheckboxItem
			
 
				+                  key={column.id}
			
 
				+                  className='capitalize'
			
 
				+                  checked={column.getIsVisible()}
			
 
				+                  onCheckedChange={(value) => column.toggleVisibility(!!value)}
			
 
				+                >
			
 
				+                  {column.columnDef.meta?.label ?? column.id}
			
 
				+                </DropdownMenuCheckboxItem>
			
 
				+              )
			
 
				+            })}
			
 
				+        </DropdownMenuGroup>
			
 
				       </DropdownMenuContent>
			
 
				     </DropdownMenu>
			
 
				   )
			
--- a/web/default/src/components/date-picker.tsx
+++ b/web/default/src/components/date-picker.tsx
@@ -36,19 +36,21 @@ export function DatePicker({
 
				     calendarLocales[i18n.language as keyof typeof calendarLocales] ?? enUS
			
 
				   return (
			
 
				     <Popover>
			
 
				-      <PopoverTrigger asChild>
			
 
				-        <Button
			
 
				-          variant='outline'
			
 
				-          data-empty={!selected}
			
 
				-          className='data-[empty=true]:text-muted-foreground w-[240px] justify-start text-start font-normal'
			
 
				-        >
			
 
				-          {selected ? (
			
 
				-            dayjs(selected).format('YYYY-MM-DD')
			
 
				-          ) : (
			
 
				-            <span>{placeholderText}</span>
			
 
				-          )}
			
 
				-          <CalendarIcon className='ms-auto h-4 w-4 opacity-50' />
			
 
				-        </Button>
			
 
				+      <PopoverTrigger
			
 
				+        render={
			
 
				+          <Button
			
 
				+            variant='outline'
			
 
				+            data-empty={!selected}
			
 
				+            className='data-[empty=true]:text-muted-foreground w-[240px] justify-start text-start font-normal'
			
 
				+          />
			
 
				+        }
			
 
				+      >
			
 
				+        {selected ? (
			
 
				+          dayjs(selected).format('YYYY-MM-DD')
			
 
				+        ) : (
			
 
				+          <span>{placeholderText}</span>
			
 
				+        )}
			
 
				+        <CalendarIcon className='ms-auto h-4 w-4 opacity-50' />
			
 
				       </PopoverTrigger>
			
 
				       <PopoverContent className='w-auto p-0'>
			
 
				         <Calendar
			
--- a/web/default/src/components/datetime-picker.tsx
+++ b/web/default/src/components/datetime-picker.tsx
@@ -93,17 +93,19 @@ export function DateTimePicker({
 
				   return (
			
 
				     <div className={cn('flex gap-2', className)}>
			
 
				       <Popover open={open} onOpenChange={setOpen}>
			
 
				-        <PopoverTrigger asChild>
			
 
				-          <Button
			
 
				-            variant='outline'
			
 
				-            className={cn(
			
 
				-              'flex-1 justify-between font-normal',
			
 
				-              !date && 'text-muted-foreground'
			
 
				-            )}
			
 
				-          >
			
 
				-            {date ? dayjs(date).format('YYYY-MM-DD') : placeholderText}
			
 
				-            <ChevronDownIcon className='h-4 w-4 opacity-50' />
			
 
				-          </Button>
			
 
				+        <PopoverTrigger
			
 
				+          render={
			
 
				+            <Button
			
 
				+              variant='outline'
			
 
				+              className={cn(
			
 
				+                'flex-1 justify-between font-normal',
			
 
				+                !date && 'text-muted-foreground'
			
 
				+              )}
			
 
				+            />
			
 
				+          }
			
 
				+        >
			
 
				+          {date ? dayjs(date).format('YYYY-MM-DD') : placeholderText}
			
 
				+          <ChevronDownIcon className='h-4 w-4 opacity-50' />
			
 
				         </PopoverTrigger>
			
 
				         <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
			
 
				           <Calendar
			
--- a/web/default/src/components/language-switcher.tsx
+++ b/web/default/src/components/language-switcher.tsx
@@ -41,11 +41,17 @@ export function LanguageSwitcher() {
 
				 
			
 
				   return (
			
 
				     <DropdownMenu modal={false}>
			
 
				-      <DropdownMenuTrigger asChild>
			
 
				-        <Button variant='ghost' size='icon' className='h-9 w-9 rounded-full'>
			
 
				-          <Languages className='size-[1.2rem]' />
			
 
				-          <span className='sr-only'>{t('Change language')}</span>
			
 
				-        </Button>
			
 
				+      <DropdownMenuTrigger
			
 
				+        render={
			
 
				+          <Button
			
 
				+            variant='ghost'
			
 
				+            size='icon'
			
 
				+            className='h-9 w-9 rounded-full'
			
 
				+          />
			
 
				+        }
			
 
				+      >
			
 
				+        <Languages className='size-[1.2rem]' />
			
 
				+        <span className='sr-only'>{t('Change language')}</span>
			
 
				       </DropdownMenuTrigger>
			
 
				       <DropdownMenuContent align='end'>
			
 
				         {languages.map((lang) => (
			
--- a/web/default/src/components/layout/components/app-header.tsx
+++ b/web/default/src/components/layout/components/app-header.tsx
@@ -1,4 +1,5 @@
 
				 import { useNotifications } from '@/hooks/use-notifications'
			
 
				+import { useSidebarData } from '@/hooks/use-sidebar-data'
			
 
				 import { useTopNavLinks } from '@/hooks/use-top-nav-links'
			
 
				 import { ConfigDrawer } from '@/components/config-drawer'
			
 
				 import { LanguageSwitcher } from '@/components/language-switcher'
			
@@ -10,6 +11,7 @@ import { defaultTopNavLinks } from '../config/top-nav.config'
 
				 import { type TopNavLink } from '../types'
			
 
				 import { Header } from './header'
			
 
				 import { TopNav } from './top-nav'
			
 
				+import { WorkspaceSwitcher } from './workspace-switcher'
			
 
				 
			
 
				 /**
			
 
				  * General application Header component
			
@@ -87,20 +89,30 @@ export function AppHeader({
 
				   // Prioritize dynamically generated links from backend
			
 
				   const dynamicLinks = useTopNavLinks()
			
 
				   const links = dynamicLinks.length > 0 ? dynamicLinks : navLinks
			
 
				+  const sidebarData = useSidebarData()
			
 
				 
			
 
				   // Notifications hook
			
 
				   const notifications = useNotifications()
			
 
				 
			
 
				-  // Determine left content: custom content > navigation bar > null
			
 
				-  const leftSection =
			
 
				-    leftContent || (showTopNav ? <TopNav links={links} /> : null)
			
 
				-
			
 
				   return (
			
 
				     <>
			
 
				       <Header>
			
 
				-        {leftSection}
			
 
				+        <WorkspaceSwitcher
			
 
				+          variant='inline'
			
 
				+          workspaces={sidebarData.workspaces}
			
 
				+        />
			
 
				+
			
 
				+        {leftContent ? (
			
 
				+          <div className='ms-2 flex items-center'>{leftContent}</div>
			
 
				+        ) : null}
			
 
				+
			
 
				         {rightContent ?? (
			
 
				-          <div className='ms-auto flex items-center space-x-4'>
			
 
				+          <div className='ms-auto flex items-center gap-1 sm:gap-2'>
			
 
				+            {showTopNav && (
			
 
				+              <div className='me-1 hidden lg:block'>
			
 
				+                <TopNav links={links} />
			
 
				+              </div>
			
 
				+            )}
			
 
				             {showSearch && <Search />}
			
 
				             {showNotifications && (
			
 
				               <NotificationButton
			
--- a/web/default/src/components/layout/components/app-sidebar.tsx
+++ b/web/default/src/components/layout/components/app-sidebar.tsx
@@ -6,15 +6,9 @@ import { ROLE } from '@/lib/roles'
 
				 import { useLayout } from '@/context/layout-provider'
			
 
				 import { useSidebarConfig } from '@/hooks/use-sidebar-config'
			
 
				 import { useSidebarData } from '@/hooks/use-sidebar-data'
			
 
				-import {
			
 
				-  Sidebar,
			
 
				-  SidebarContent,
			
 
				-  SidebarHeader,
			
 
				-  SidebarRail,
			
 
				-} from '@/components/ui/sidebar'
			
 
				+import { Sidebar, SidebarContent, SidebarRail } from '@/components/ui/sidebar'
			
 
				 import { getNavGroupsForPath } from '../lib/workspace-registry'
			
 
				 import { NavGroup } from './nav-group'
			
 
				-import { WorkspaceSwitcher } from './workspace-switcher'
			
 
				 
			
 
				 /**
			
 
				  * Application sidebar component
			
@@ -51,10 +45,7 @@ export function AppSidebar() {
 
				 
			
 
				   return (
			
 
				     <Sidebar collapsible={collapsible} variant={variant}>
			
 
				-      <SidebarHeader>
			
 
				-        <WorkspaceSwitcher workspaces={sidebarData.workspaces} />
			
 
				-      </SidebarHeader>
			
 
				-      <SidebarContent>
			
 
				+      <SidebarContent className='py-2'>
			
 
				         {currentNavGroups.map((props) => {
			
 
				           const key = props.id || props.title
			
 
				           return <NavGroup key={key} {...props} />
			
--- a/web/default/src/components/layout/components/authenticated-layout.tsx
+++ b/web/default/src/components/layout/components/authenticated-layout.tsx
@@ -6,6 +6,7 @@ import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
 
				 import { AnimatedOutlet } from '@/components/page-transition'
			
 
				 import { SkipToMain } from '@/components/skip-to-main'
			
 
				 import { WorkspaceProvider } from '../context/workspace-context'
			
 
				+import { AppHeader } from './app-header'
			
 
				 import { AppSidebar } from './app-sidebar'
			
 
				 
			
 
				 type AuthenticatedLayoutProps = {
			
@@ -19,18 +20,21 @@ export function AuthenticatedLayout(props: AuthenticatedLayoutProps) {
 
				     <LayoutProvider>
			
 
				       <SearchProvider>
			
 
				         <WorkspaceProvider>
			
 
				-          <SidebarProvider defaultOpen={defaultOpen}>
			
 
				+          <SidebarProvider defaultOpen={defaultOpen} className='flex-col'>
			
 
				             <SkipToMain />
			
 
				-            <AppSidebar />
			
 
				-            <SidebarInset
			
 
				-              className={cn(
			
 
				-                '@container/content',
			
 
				-                'h-svh',
			
 
				-                'peer-data-[variant=inset]:h-[calc(100svh-(var(--spacing)*4))]'
			
 
				-              )}
			
 
				-            >
			
 
				-              {props.children ?? <AnimatedOutlet />}
			
 
				-            </SidebarInset>
			
 
				+            <AppHeader />
			
 
				+            <div className='flex min-h-0 w-full flex-1'>
			
 
				+              <AppSidebar />
			
 
				+              <SidebarInset
			
 
				+                className={cn(
			
 
				+                  '@container/content',
			
 
				+                  'h-[calc(100svh-var(--app-header-height,0px))]',
			
 
				+                  'peer-data-[variant=inset]:h-[calc(100svh-var(--app-header-height,0px)-(var(--spacing)*4))]'
			
 
				+                )}
			
 
				+              >
			
 
				+                {props.children ?? <AnimatedOutlet />}
			
 
				+              </SidebarInset>
			
 
				+            </div>
			
 
				           </SidebarProvider>
			
 
				         </WorkspaceProvider>
			
 
				       </SearchProvider>
			
--- a/web/default/src/components/layout/components/chat-presets-item.tsx
+++ b/web/default/src/components/layout/components/chat-presets-item.tsx
@@ -53,14 +53,17 @@ function ChatMenuItem({
 
				   if (preset.type === 'web') {
			
 
				     return (
			
 
				       <SidebarMenuSubItem>
			
 
				-        <SidebarMenuSubButton asChild isActive={active}>
			
 
				-          <Link
			
 
				-            to='/chat/$chatId'
			
 
				-            params={{ chatId: preset.id }}
			
 
				-            onClick={onNavigate}
			
 
				-          >
			
 
				-            <span>{preset.name}</span>
			
 
				-          </Link>
			
 
				+        <SidebarMenuSubButton
			
 
				+          isActive={active}
			
 
				+          render={
			
 
				+            <Link
			
 
				+              to='/chat/$chatId'
			
 
				+              params={{ chatId: preset.id }}
			
 
				+              onClick={onNavigate}
			
 
				+            />
			
 
				+          }
			
 
				+        >
			
 
				+          <span>{preset.name}</span>
			
 
				         </SidebarMenuSubButton>
			
 
				       </SidebarMenuSubItem>
			
 
				     )
			
@@ -92,10 +95,10 @@ function DropdownPresetItem({
 
				 }) {
			
 
				   if (preset.type === 'web') {
			
 
				     return (
			
 
				-      <DropdownMenuItem asChild>
			
 
				-        <Link to='/chat/$chatId' params={{ chatId: preset.id }}>
			
 
				-          {preset.name}
			
 
				-        </Link>
			
 
				+      <DropdownMenuItem
			
 
				+        render={<Link to='/chat/$chatId' params={{ chatId: preset.id }} />}
			
 
				+      >
			
 
				+        {preset.name}
			
 
				       </DropdownMenuItem>
			
 
				     )
			
 
				   }
			
@@ -187,12 +190,12 @@ export function ChatPresetsItem({ item }: { item: NavChatPresets }) {
 
				     return (
			
 
				       <SidebarMenuItem>
			
 
				         <DropdownMenu>
			
 
				-          <DropdownMenuTrigger asChild>
			
 
				-            <SidebarMenuButton tooltip={item.title}>
			
 
				-              {item.icon && <item.icon className='h-4 w-4' />}
			
 
				-              <span>{item.title}</span>
			
 
				-              <ChevronRight className='ms-auto h-4 w-4 opacity-70' />
			
 
				-            </SidebarMenuButton>
			
 
				+          <DropdownMenuTrigger
			
 
				+            render={<SidebarMenuButton tooltip={item.title} />}
			
 
				+          >
			
 
				+            {item.icon && <item.icon className='h-4 w-4' />}
			
 
				+            <span>{item.title}</span>
			
 
				+            <ChevronRight className='ms-auto h-4 w-4 opacity-70' />
			
 
				           </DropdownMenuTrigger>
			
 
				           <DropdownMenuContent align='start'>
			
 
				             {visiblePresets.map((preset) => (
			
@@ -218,40 +221,39 @@ export function ChatPresetsItem({ item }: { item: NavChatPresets }) {
 
				   // Expanded state - render collapsible menu
			
 
				   return (
			
 
				     <Collapsible
			
 
				-      asChild
			
 
				       defaultOpen={normalizedHref.startsWith('/chat')}
			
 
				       className='group/collapsible'
			
 
				+      render={<SidebarMenuItem />}
			
 
				     >
			
 
				-      <SidebarMenuItem>
			
 
				-        <CollapsibleTrigger asChild>
			
 
				-          <SidebarMenuButton>
			
 
				-            {item.icon && <item.icon />}
			
 
				-            <span>{item.title}</span>
			
 
				-            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
			
 
				-          </SidebarMenuButton>
			
 
				-        </CollapsibleTrigger>
			
 
				-        <CollapsibleContent className='CollapsibleContent'>
			
 
				-          <SidebarMenuSub>
			
 
				-            {visiblePresets.map((preset) => (
			
 
				-              <ChatMenuItem
			
 
				-                key={preset.id}
			
 
				-                preset={preset}
			
 
				-                active={normalizedHref === `/chat/${preset.id}`}
			
 
				-                onOpen={handleOpenExternal}
			
 
				-                onNavigate={() => setOpenMobile(false)}
			
 
				-              />
			
 
				-            ))}
			
 
				-            {hasKeyDependentPresets && isKeyPending && (
			
 
				-              <SidebarMenuSubItem>
			
 
				-                <SidebarMenuSubButton aria-disabled='true' tabIndex={-1}>
			
 
				-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
			
 
				-                  {loadingMessage}
			
 
				-                </SidebarMenuSubButton>
			
 
				-              </SidebarMenuSubItem>
			
 
				-            )}
			
 
				-          </SidebarMenuSub>
			
 
				-        </CollapsibleContent>
			
 
				-      </SidebarMenuItem>
			
 
				+      <CollapsibleTrigger
			
 
				+        className='group/collapsible-trigger'
			
 
				+        render={<SidebarMenuButton />}
			
 
				+      >
			
 
				+        {item.icon && <item.icon />}
			
 
				+        <span>{item.title}</span>
			
 
				+        <ChevronRight className='ms-auto transition-transform duration-200 group-data-[panel-open]/collapsible-trigger:rotate-90' />
			
 
				+      </CollapsibleTrigger>
			
 
				+      <CollapsibleContent className='CollapsibleContent'>
			
 
				+        <SidebarMenuSub>
			
 
				+          {visiblePresets.map((preset) => (
			
 
				+            <ChatMenuItem
			
 
				+              key={preset.id}
			
 
				+              preset={preset}
			
 
				+              active={normalizedHref === `/chat/${preset.id}`}
			
 
				+              onOpen={handleOpenExternal}
			
 
				+              onNavigate={() => setOpenMobile(false)}
			
 
				+            />
			
 
				+          ))}
			
 
				+          {hasKeyDependentPresets && isKeyPending && (
			
 
				+            <SidebarMenuSubItem>
			
 
				+              <SidebarMenuSubButton aria-disabled='true' tabIndex={-1}>
			
 
				+                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
			
 
				+                {loadingMessage}
			
 
				+              </SidebarMenuSubButton>
			
 
				+            </SidebarMenuSubItem>
			
 
				+          )}
			
 
				+        </SidebarMenuSub>
			
 
				+      </CollapsibleContent>
			
 
				     </Collapsible>
			
 
				   )
			
 
				 }
			
--- a/web/default/src/components/layout/components/footer.tsx
+++ b/web/default/src/components/layout/components/footer.tsx
@@ -67,7 +67,7 @@ function ProjectAttribution(props: { currentYear: number }) {
 
				           href='https://github.com/QuantumNous/new-api'
			
 
				           target='_blank'
			
 
				           rel='noopener noreferrer'
			
 
				-          className='text-foreground/70 font-medium transition-colors hover:text-foreground'
			
 
				+          className='text-foreground/70 hover:text-foreground font-medium transition-colors'
			
 
				         >
			
 
				           {t('New API')}
			
 
				         </a>
			
@@ -152,7 +152,12 @@ export function Footer(props: FooterProps) {
 
				 
			
 
				   if (footerHtml) {
			
 
				     return (
			
 
				-      <footer className={cn('border-border/40 relative z-10 border-t', props.className)}>
			
 
				+      <footer
			
 
				+        className={cn(
			
 
				+          'border-border/40 relative z-10 border-t',
			
 
				+          props.className
			
 
				+        )}
			
 
				+      >
			
 
				         <div className='mx-auto w-full max-w-6xl px-6 py-5'>
			
 
				           <div className='bg-muted/20 border-border/50 flex flex-col items-center justify-between gap-4 rounded-2xl border px-4 py-4 backdrop-blur-sm sm:flex-row sm:px-5'>
			
 
				             <div
			
--- a/web/default/src/components/layout/components/header.tsx
+++ b/web/default/src/components/layout/components/header.tsx
@@ -1,5 +1,4 @@
 
				 import { cn } from '@/lib/utils'
			
 
				-import { Separator } from '@/components/ui/separator'
			
 
				 import { SidebarTrigger } from '@/components/ui/sidebar'
			
 
				 
			
 
				 type HeaderProps = React.HTMLAttributes<HTMLElement>
			
@@ -7,12 +6,14 @@ type HeaderProps = React.HTMLAttributes<HTMLElement>
 
				 export function Header({ className, children, ...props }: HeaderProps) {
			
 
				   return (
			
 
				     <header
			
 
				-      className={cn('bg-background z-50 h-16 shrink-0 border-b', className)}
			
 
				+      className={cn(
			
 
				+        'sticky top-0 z-40 h-[var(--app-header-height,3rem)] w-full shrink-0 bg-transparent',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     >
			
 
				-      <div className='flex h-full items-center gap-3 p-4 sm:gap-4'>
			
 
				-        <SidebarTrigger variant='outline' />
			
 
				-        <Separator orientation='vertical' className='h-6' />
			
 
				+      <div className='flex h-full items-center gap-1.5 px-2 sm:gap-2 sm:px-3'>
			
 
				+        <SidebarTrigger variant='ghost' className='size-8' />
			
 
				         {children}
			
 
				       </div>
			
 
				     </header>
			
--- a/web/default/src/components/layout/components/mobile-drawer.tsx
+++ b/web/default/src/components/layout/components/mobile-drawer.tsx
@@ -137,10 +137,13 @@ interface MobileSignInButtonProps {
 
				 function MobileSignInButton({ onNavigate }: MobileSignInButtonProps) {
			
 
				   const { t } = useTranslation()
			
 
				   return (
			
 
				-    <Button variant='secondary' size='sm' asChild className='h-10 w-full'>
			
 
				-      <Link to='/sign-in' onClick={onNavigate}>
			
 
				-        {t('Sign in')}
			
 
				-      </Link>
			
 
				+    <Button
			
 
				+      variant='secondary'
			
 
				+      size='sm'
			
 
				+      className='h-10 w-full'
			
 
				+      render={<Link to='/sign-in' onClick={onNavigate} />}
			
 
				+    >
			
 
				+      {t('Sign in')}
			
 
				     </Button>
			
 
				   )
			
 
				 }
			
--- a/web/default/src/components/layout/components/nav-group.tsx
+++ b/web/default/src/components/layout/components/nav-group.tsx
@@ -10,6 +10,7 @@ import {
 
				 import {
			
 
				   DropdownMenu,
			
 
				   DropdownMenuContent,
			
 
				+  DropdownMenuGroup,
			
 
				   DropdownMenuItem,
			
 
				   DropdownMenuLabel,
			
 
				   DropdownMenuSeparator,
			
@@ -44,8 +45,10 @@ export function NavGroup({ title, items }: NavGroupProps) {
 
				   const href = useLocation({ select: (location) => location.href })
			
 
				 
			
 
				   return (
			
 
				-    <SidebarGroup>
			
 
				-      <SidebarGroupLabel>{title}</SidebarGroupLabel>
			
 
				+    <SidebarGroup className='px-2 py-1'>
			
 
				+      <SidebarGroupLabel className='text-muted-foreground/70 px-2 text-[11px] font-medium tracking-wider uppercase'>
			
 
				+        {title}
			
 
				+      </SidebarGroupLabel>
			
 
				       <SidebarMenu>
			
 
				         {items.map((item) => {
			
 
				           const key = `${item.title}-${item.url || item.type}`
			
@@ -102,15 +105,13 @@ function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
 
				   return (
			
 
				     <SidebarMenuItem>
			
 
				       <SidebarMenuButton
			
 
				-        asChild
			
 
				         isActive={checkIsActive(href, item)}
			
 
				         tooltip={item.title}
			
 
				+        render={<Link to={item.url} onClick={() => setOpenMobile(false)} />}
			
 
				       >
			
 
				-        <Link to={item.url} onClick={() => setOpenMobile(false)}>
			
 
				-          {item.icon && <item.icon />}
			
 
				-          <span>{item.title}</span>
			
 
				-          {item.badge && <NavBadge>{item.badge}</NavBadge>}
			
 
				-        </Link>
			
 
				+        {item.icon && <item.icon />}
			
 
				+        <span>{item.title}</span>
			
 
				+        {item.badge && <NavBadge>{item.badge}</NavBadge>}
			
 
				       </SidebarMenuButton>
			
 
				     </SidebarMenuItem>
			
 
				   )
			
@@ -142,39 +143,38 @@ function SidebarMenuCollapsible({
 
				 
			
 
				   return (
			
 
				     <Collapsible
			
 
				-      asChild
			
 
				       open={isOpen}
			
 
				       onOpenChange={setIsOpen}
			
 
				       className='group/collapsible'
			
 
				+      render={<SidebarMenuItem />}
			
 
				     >
			
 
				-      <SidebarMenuItem>
			
 
				-        <CollapsibleTrigger asChild>
			
 
				-          <SidebarMenuButton tooltip={item.title}>
			
 
				-            {item.icon && <item.icon />}
			
 
				-            <span>{item.title}</span>
			
 
				-            {item.badge && <NavBadge>{item.badge}</NavBadge>}
			
 
				-            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
			
 
				-          </SidebarMenuButton>
			
 
				-        </CollapsibleTrigger>
			
 
				-        <CollapsibleContent className='CollapsibleContent'>
			
 
				-          <SidebarMenuSub>
			
 
				-            {item.items.map((subItem) => (
			
 
				-              <SidebarMenuSubItem key={subItem.title}>
			
 
				-                <SidebarMenuSubButton
			
 
				-                  asChild
			
 
				-                  isActive={checkIsActive(href, subItem)}
			
 
				-                >
			
 
				-                  <Link to={subItem.url} onClick={() => setOpenMobile(false)}>
			
 
				-                    {subItem.icon && <subItem.icon />}
			
 
				-                    <span>{subItem.title}</span>
			
 
				-                    {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
			
 
				-                  </Link>
			
 
				-                </SidebarMenuSubButton>
			
 
				-              </SidebarMenuSubItem>
			
 
				-            ))}
			
 
				-          </SidebarMenuSub>
			
 
				-        </CollapsibleContent>
			
 
				-      </SidebarMenuItem>
			
 
				+      <CollapsibleTrigger
			
 
				+        className='group/collapsible-trigger'
			
 
				+        render={<SidebarMenuButton tooltip={item.title} />}
			
 
				+      >
			
 
				+        {item.icon && <item.icon />}
			
 
				+        <span>{item.title}</span>
			
 
				+        {item.badge && <NavBadge>{item.badge}</NavBadge>}
			
 
				+        <ChevronRight className='ms-auto transition-transform duration-200 group-data-[panel-open]/collapsible-trigger:rotate-90' />
			
 
				+      </CollapsibleTrigger>
			
 
				+      <CollapsibleContent className='CollapsibleContent'>
			
 
				+        <SidebarMenuSub>
			
 
				+          {item.items.map((subItem) => (
			
 
				+            <SidebarMenuSubItem key={subItem.title}>
			
 
				+              <SidebarMenuSubButton
			
 
				+                isActive={checkIsActive(href, subItem)}
			
 
				+                render={
			
 
				+                  <Link to={subItem.url} onClick={() => setOpenMobile(false)} />
			
 
				+                }
			
 
				+              >
			
 
				+                {subItem.icon && <subItem.icon />}
			
 
				+                <span>{subItem.title}</span>
			
 
				+                {subItem.badge && <NavBadge>{subItem.badge}</NavBadge>}
			
 
				+              </SidebarMenuSubButton>
			
 
				+            </SidebarMenuSubItem>
			
 
				+          ))}
			
 
				+        </SidebarMenuSub>
			
 
				+      </CollapsibleContent>
			
 
				     </Collapsible>
			
 
				   )
			
 
				 }
			
@@ -192,36 +192,44 @@ function SidebarMenuCollapsedDropdown({
 
				   return (
			
 
				     <SidebarMenuItem>
			
 
				       <DropdownMenu>
			
 
				-        <DropdownMenuTrigger asChild>
			
 
				-          <SidebarMenuButton
			
 
				-            tooltip={item.title}
			
 
				-            isActive={checkIsActive(href, item)}
			
 
				-          >
			
 
				-            {item.icon && <item.icon />}
			
 
				-            <span>{item.title}</span>
			
 
				-            {item.badge && <NavBadge>{item.badge}</NavBadge>}
			
 
				-            <ChevronRight className='ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90' />
			
 
				-          </SidebarMenuButton>
			
 
				+        <DropdownMenuTrigger
			
 
				+          className='group/dropdown-trigger'
			
 
				+          render={
			
 
				+            <SidebarMenuButton
			
 
				+              tooltip={item.title}
			
 
				+              isActive={checkIsActive(href, item)}
			
 
				+            />
			
 
				+          }
			
 
				+        >
			
 
				+          {item.icon && <item.icon />}
			
 
				+          <span>{item.title}</span>
			
 
				+          {item.badge && <NavBadge>{item.badge}</NavBadge>}
			
 
				+          <ChevronRight className='ms-auto transition-transform duration-200 group-data-[popup-open]/dropdown-trigger:rotate-90' />
			
 
				         </DropdownMenuTrigger>
			
 
				         <DropdownMenuContent side='right' align='start' sideOffset={4}>
			
 
				-          <DropdownMenuLabel>
			
 
				-            {item.title} {item.badge ? `(${item.badge})` : ''}
			
 
				-          </DropdownMenuLabel>
			
 
				-          <DropdownMenuSeparator />
			
 
				-          {item.items.map((sub) => (
			
 
				-            <DropdownMenuItem key={`${sub.title}-${sub.url}`} asChild>
			
 
				-              <Link
			
 
				-                to={sub.url}
			
 
				-                className={`${checkIsActive(href, sub) ? 'bg-secondary' : ''}`}
			
 
				+          <DropdownMenuGroup>
			
 
				+            <DropdownMenuLabel>
			
 
				+              {item.title} {item.badge ? `(${item.badge})` : ''}
			
 
				+            </DropdownMenuLabel>
			
 
				+            <DropdownMenuSeparator />
			
 
				+            {item.items.map((sub) => (
			
 
				+              <DropdownMenuItem
			
 
				+                key={`${sub.title}-${sub.url}`}
			
 
				+                render={
			
 
				+                  <Link
			
 
				+                    to={sub.url}
			
 
				+                    className={`${checkIsActive(href, sub) ? 'bg-secondary' : ''}`}
			
 
				+                  />
			
 
				+                }
			
 
				               >
			
 
				                 {sub.icon && <sub.icon />}
			
 
				                 <span className='max-w-52 text-wrap'>{sub.title}</span>
			
 
				                 {sub.badge && (
			
 
				                   <span className='ms-auto text-xs'>{sub.badge}</span>
			
 
				                 )}
			
 
				-              </Link>
			
 
				-            </DropdownMenuItem>
			
 
				-          ))}
			
 
				+              </DropdownMenuItem>
			
 
				+            ))}
			
 
				+          </DropdownMenuGroup>
			
 
				         </DropdownMenuContent>
			
 
				       </DropdownMenu>
			
 
				     </SidebarMenuItem>
			
--- a/web/default/src/components/layout/components/public-header.tsx
+++ b/web/default/src/components/layout/components/public-header.tsx
@@ -180,9 +180,9 @@ export function PublicHeader(props: PublicHeaderProps) {
 
				                     <Button
			
 
				                       size='sm'
			
 
				                       className='h-8 rounded-lg px-3.5 text-xs font-medium'
			
 
				-                      asChild
			
 
				+                      render={<Link to='/sign-in' />}
			
 
				                     >
			
 
				-                      <Link to='/sign-in'>{t('Sign in')}</Link>
			
 
				+                      {t('Sign in')}
			
 
				                     </Button>
			
 
				                   )}
			
 
				                 </>
			
--- a/web/default/src/components/layout/components/public-layout.tsx
+++ b/web/default/src/components/layout/components/public-layout.tsx
@@ -16,7 +16,7 @@ type PublicLayoutProps = {
 
				 
			
 
				 export function PublicLayout(props: PublicLayoutProps) {
			
 
				   return (
			
 
				-    <div className='bg-background text-foreground relative min-h-svh overflow-hidden'>
			
 
				+    <div className='bg-background text-foreground relative min-h-svh overflow-x-clip'>
			
 
				       <PublicHeader
			
 
				         navContent={props.navContent}
			
 
				         navLinks={props.navLinks}
			
--- a/web/default/src/components/layout/components/section-page-layout.tsx
+++ b/web/default/src/components/layout/components/section-page-layout.tsx
@@ -5,7 +5,6 @@ import {
 
				   type ReactElement,
			
 
				   type ReactNode,
			
 
				 } from 'react'
			
 
				-import { AppHeader } from './app-header'
			
 
				 import { Main } from './main'
			
 
				 import { PageFooterProvider } from './page-footer'
			
 
				 
			
@@ -46,7 +45,6 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
 
				   )
			
 
				 
			
 
				   let title: ReactNode = null
			
 
				-  let description: ReactNode = null
			
 
				   let actions: ReactNode = null
			
 
				   let content: ReactNode = null
			
 
				   let breadcrumb: ReactNode = null
			
@@ -55,8 +53,6 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
 
				     if (!isValidElement(node)) return
			
 
				     const child = node as ReactElement<SlotProps>
			
 
				     if (child.type === SectionPageLayoutTitle) title = child.props.children
			
 
				-    else if (child.type === SectionPageLayoutDescription)
			
 
				-      description = child.props.children
			
 
				     else if (child.type === SectionPageLayoutActions)
			
 
				       actions = child.props.children
			
 
				     else if (child.type === SectionPageLayoutContent)
			
@@ -67,21 +63,16 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
 
				 
			
 
				   return (
			
 
				     <PageFooterProvider container={footerContainer}>
			
 
				-      <AppHeader />
			
 
				-
			
 
				       <Main>
			
 
				-        <div className='shrink-0 px-3 pt-3 pb-2.5 sm:px-4 sm:pt-6 sm:pb-4'>
			
 
				-          {breadcrumb != null && <div className='mb-2 sm:mb-3'>{breadcrumb}</div>}
			
 
				+        <div className='shrink-0 px-3 pt-3 pb-2.5 sm:px-4 sm:pt-5 sm:pb-3'>
			
 
				+          {breadcrumb != null && (
			
 
				+            <div className='mb-2 sm:mb-3'>{breadcrumb}</div>
			
 
				+          )}
			
 
				           <div className='flex flex-wrap items-center justify-between gap-x-3 gap-y-2 sm:gap-x-4'>
			
 
				             <div className='min-w-0'>
			
 
				               <h2 className='truncate text-base font-bold tracking-tight sm:text-lg'>
			
 
				                 {title}
			
 
				               </h2>
			
 
				-              {description != null && (
			
 
				-                <p className='text-muted-foreground line-clamp-2 max-sm:text-xs sm:text-sm'>
			
 
				-                  {description}
			
 
				-                </p>
			
 
				-              )}
			
 
				             </div>
			
 
				             {actions != null && (
			
 
				               <div className='flex shrink-0 flex-wrap items-center gap-2 sm:gap-x-4'>
			
@@ -91,7 +82,7 @@ export function SectionPageLayout(props: SectionPageLayoutProps) {
 
				           </div>
			
 
				         </div>
			
 
				 
			
 
				-        <div className='min-h-0 flex-1 overflow-auto px-3 pb-3 sm:px-4 sm:pb-4'>
			
 
				+        <div className='min-h-0 flex-1 overflow-auto px-3 pt-1 pb-3 sm:px-4 sm:pt-1.5 sm:pb-4'>
			
 
				           {content}
			
 
				         </div>
			
 
				 
			
--- a/web/default/src/components/layout/components/top-nav.tsx
+++ b/web/default/src/components/layout/components/top-nav.tsx
@@ -37,34 +37,37 @@ export function TopNav({ className, links, ...props }: TopNavProps) {
 
				       {/* 移动端下拉菜单 */}
			
 
				       <div className='lg:hidden'>
			
 
				         <DropdownMenu modal={false}>
			
 
				-          <DropdownMenuTrigger asChild>
			
 
				-            <Button size='icon' variant='outline' className='size-7'>
			
 
				-              <Menu />
			
 
				-            </Button>
			
 
				+          <DropdownMenuTrigger
			
 
				+            render={<Button size='icon' variant='outline' className='size-7' />}
			
 
				+          >
			
 
				+            <Menu />
			
 
				           </DropdownMenuTrigger>
			
 
				           <DropdownMenuContent side='bottom' align='start'>
			
 
				             {normalizedLinks.map(
			
 
				               ({ title, href, isActive, disabled, external }) => (
			
 
				-                <DropdownMenuItem key={`${title}-${href}`} asChild>
			
 
				-                  {external ? (
			
 
				-                    <a
			
 
				-                      href={href}
			
 
				-                      target='_blank'
			
 
				-                      rel='noopener noreferrer'
			
 
				-                      className={!isActive ? 'text-muted-foreground' : ''}
			
 
				-                    >
			
 
				-                      {title}
			
 
				-                    </a>
			
 
				-                  ) : (
			
 
				-                    <Link
			
 
				-                      to={href}
			
 
				-                      className={!isActive ? 'text-muted-foreground' : ''}
			
 
				-                      disabled={disabled}
			
 
				-                    >
			
 
				-                      {title}
			
 
				-                    </Link>
			
 
				-                  )}
			
 
				-                </DropdownMenuItem>
			
 
				+                <DropdownMenuItem
			
 
				+                  key={`${title}-${href}`}
			
 
				+                  render={
			
 
				+                    external ? (
			
 
				+                      <a
			
 
				+                        href={href}
			
 
				+                        target='_blank'
			
 
				+                        rel='noopener noreferrer'
			
 
				+                        className={!isActive ? 'text-muted-foreground' : ''}
			
 
				+                      >
			
 
				+                        {title}
			
 
				+                      </a>
			
 
				+                    ) : (
			
 
				+                      <Link
			
 
				+                        to={href}
			
 
				+                        className={!isActive ? 'text-muted-foreground' : ''}
			
 
				+                        disabled={disabled}
			
 
				+                      >
			
 
				+                        {title}
			
 
				+                      </Link>
			
 
				+                    )
			
 
				+                  }
			
 
				+                ></DropdownMenuItem>
			
 
				               )
			
 
				             )}
			
 
				           </DropdownMenuContent>
			
--- a/web/default/src/components/layout/components/workspace-switcher.tsx
+++ b/web/default/src/components/layout/components/workspace-switcher.tsx
@@ -4,11 +4,13 @@ import { ChevronsUpDown } from 'lucide-react'
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { useAuthStore } from '@/stores/auth-store'
			
 
				 import { ROLE } from '@/lib/roles'
			
 
				+import { cn } from '@/lib/utils'
			
 
				 import { useStatus } from '@/hooks/use-status'
			
 
				 import { useSystemConfig } from '@/hooks/use-system-config'
			
 
				 import {
			
 
				   DropdownMenu,
			
 
				   DropdownMenuContent,
			
 
				+  DropdownMenuGroup,
			
 
				   DropdownMenuItem,
			
 
				   DropdownMenuLabel,
			
 
				   DropdownMenuTrigger,
			
@@ -27,6 +29,12 @@ type WorkspaceSwitcherProps = {
 
				   workspaces: Workspace[]
			
 
				   defaultName?: string
			
 
				   defaultVersion?: string
			
 
				+  /**
			
 
				+   * Visual layout:
			
 
				+   * - 'sidebar': stacked card style (used inside the sidebar header).
			
 
				+   * - 'inline': compact horizontal pill (used inside the top app bar).
			
 
				+   */
			
 
				+  variant?: 'sidebar' | 'inline'
			
 
				 }
			
 
				 
			
 
				 /**
			
@@ -39,6 +47,7 @@ export function WorkspaceSwitcher({
 
				   workspaces,
			
 
				   defaultName = 'New API',
			
 
				   defaultVersion,
			
 
				+  variant = 'sidebar',
			
 
				 }: WorkspaceSwitcherProps) {
			
 
				   const { t } = useTranslation()
			
 
				   const navigate = useNavigate()
			
@@ -121,6 +130,88 @@ export function WorkspaceSwitcher({
 
				   }
			
 
				 
			
 
				   const canSwitchWorkspace = availableWorkspaces.length > 1
			
 
				+
			
 
				+  const renderWorkspaceList = () => (
			
 
				+    <DropdownMenuGroup>
			
 
				+      <DropdownMenuLabel className='text-muted-foreground text-xs'>
			
 
				+        {t('Workspaces')}
			
 
				+      </DropdownMenuLabel>
			
 
				+      {availableWorkspaces.map((workspace, index) => (
			
 
				+        <DropdownMenuItem
			
 
				+          key={workspace.id}
			
 
				+          onClick={() => handleWorkspaceChange(workspace)}
			
 
				+          className='gap-2 p-2'
			
 
				+        >
			
 
				+          {index === 0 ? (
			
 
				+            <div className='flex size-6 items-center justify-center overflow-hidden rounded-sm border'>
			
 
				+              <img src={logo} alt='Logo' className='size-full object-cover' />
			
 
				+            </div>
			
 
				+          ) : (
			
 
				+            <div className='flex size-6 items-center justify-center rounded-sm border'>
			
 
				+              <workspace.logo className='size-4 shrink-0' />
			
 
				+            </div>
			
 
				+          )}
			
 
				+          {workspace.name}
			
 
				+        </DropdownMenuItem>
			
 
				+      ))}
			
 
				+    </DropdownMenuGroup>
			
 
				+  )
			
 
				+
			
 
				+  if (variant === 'inline') {
			
 
				+    const inlineLogo =
			
 
				+      activeWorkspace.id === WORKSPACE_IDS.SYSTEM_SETTINGS ? (
			
 
				+        <div className='bg-primary text-primary-foreground flex size-5 items-center justify-center rounded-md'>
			
 
				+          <activeWorkspace.logo className='size-3' />
			
 
				+        </div>
			
 
				+      ) : (
			
 
				+        <div className='flex size-5 items-center justify-center overflow-hidden rounded-md'>
			
 
				+          <img
			
 
				+            src={logo}
			
 
				+            alt={t('Logo')}
			
 
				+            className='size-full rounded-md object-cover'
			
 
				+          />
			
 
				+        </div>
			
 
				+      )
			
 
				+
			
 
				+    const inlineButtonClass = cn(
			
 
				+      'inline-flex h-7 items-center gap-1.5 rounded-md px-1.5 text-sm font-medium text-foreground outline-none select-none transition-colors',
			
 
				+      'hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/40',
			
 
				+      'data-popup-open:bg-accent'
			
 
				+    )
			
 
				+
			
 
				+    if (!canSwitchWorkspace) {
			
 
				+      return (
			
 
				+        <div
			
 
				+          className={cn(
			
 
				+            inlineButtonClass,
			
 
				+            'cursor-default hover:bg-transparent'
			
 
				+          )}
			
 
				+        >
			
 
				+          {inlineLogo}
			
 
				+          <span className='max-w-[12rem] truncate'>{activeWorkspace.name}</span>
			
 
				+        </div>
			
 
				+      )
			
 
				+    }
			
 
				+
			
 
				+    return (
			
 
				+      <DropdownMenu>
			
 
				+        <DropdownMenuTrigger className={inlineButtonClass}>
			
 
				+          {inlineLogo}
			
 
				+          <span className='max-w-[12rem] truncate'>{activeWorkspace.name}</span>
			
 
				+          <ChevronsUpDown className='text-muted-foreground size-3.5' />
			
 
				+        </DropdownMenuTrigger>
			
 
				+        <DropdownMenuContent
			
 
				+          className='min-w-56 rounded-lg'
			
 
				+          align='start'
			
 
				+          side='bottom'
			
 
				+          sideOffset={6}
			
 
				+        >
			
 
				+          {renderWorkspaceList()}
			
 
				+        </DropdownMenuContent>
			
 
				+      </DropdownMenu>
			
 
				+    )
			
 
				+  }
			
 
				+
			
 
				   const workspaceButtonContent = (
			
 
				     <>
			
 
				       {activeWorkspace.id === WORKSPACE_IDS.SYSTEM_SETTINGS ? (
			
@@ -151,54 +242,32 @@ export function WorkspaceSwitcher({
 
				       <SidebarMenuItem>
			
 
				         {canSwitchWorkspace ? (
			
 
				           <DropdownMenu>
			
 
				-            <DropdownMenuTrigger asChild>
			
 
				-              <SidebarMenuButton
			
 
				-                size='lg'
			
 
				-                className='data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground'
			
 
				-              >
			
 
				-                {workspaceButtonContent}
			
 
				-              </SidebarMenuButton>
			
 
				+            <DropdownMenuTrigger
			
 
				+              render={
			
 
				+                <SidebarMenuButton
			
 
				+                  size='lg'
			
 
				+                  className='data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground'
			
 
				+                />
			
 
				+              }
			
 
				+            >
			
 
				+              {workspaceButtonContent}
			
 
				             </DropdownMenuTrigger>
			
 
				             <DropdownMenuContent
			
 
				-              className='w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg'
			
 
				+              className='w-(--anchor-width) min-w-56 rounded-lg'
			
 
				               align='start'
			
 
				               side={isMobile ? 'bottom' : 'right'}
			
 
				               sideOffset={4}
			
 
				             >
			
 
				-              <DropdownMenuLabel className='text-muted-foreground text-xs'>
			
 
				-                {t('Workspaces')}
			
 
				-              </DropdownMenuLabel>
			
 
				-              {availableWorkspaces.map((workspace, index) => (
			
 
				-                <DropdownMenuItem
			
 
				-                  key={workspace.id}
			
 
				-                  onClick={() => handleWorkspaceChange(workspace)}
			
 
				-                  className='gap-2 p-2'
			
 
				-                >
			
 
				-                  {index === 0 ? (
			
 
				-                    <div className='flex size-6 items-center justify-center overflow-hidden rounded-sm border'>
			
 
				-                      <img
			
 
				-                        src={logo}
			
 
				-                        alt='Logo'
			
 
				-                        className='size-full object-cover'
			
 
				-                      />
			
 
				-                    </div>
			
 
				-                  ) : (
			
 
				-                    <div className='flex size-6 items-center justify-center rounded-sm border'>
			
 
				-                      <workspace.logo className='size-4 shrink-0' />
			
 
				-                    </div>
			
 
				-                  )}
			
 
				-                  {workspace.name}
			
 
				-                </DropdownMenuItem>
			
 
				-              ))}
			
 
				+              {renderWorkspaceList()}
			
 
				             </DropdownMenuContent>
			
 
				           </DropdownMenu>
			
 
				         ) : (
			
 
				           <SidebarMenuButton
			
 
				-            asChild
			
 
				             size='lg'
			
 
				-            className='cursor-default hover:bg-transparent hover:text-sidebar-foreground active:bg-transparent active:text-sidebar-foreground'
			
 
				+            className='hover:text-sidebar-foreground active:text-sidebar-foreground cursor-default hover:bg-transparent active:bg-transparent'
			
 
				+            render={<div />}
			
 
				           >
			
 
				-            <div>{workspaceButtonContent}</div>
			
 
				+            {workspaceButtonContent}
			
 
				           </SidebarMenuButton>
			
 
				         )}
			
 
				       </SidebarMenuItem>
			
--- a/web/default/src/components/learn-more.tsx
+++ b/web/default/src/components/learn-more.tsx
@@ -1,4 +1,3 @@
 
				-import { type Root, type Content, type Trigger } from '@radix-ui/react-popover'
			
 
				 import { CircleQuestionMark } from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { cn } from '@/lib/utils'
			
@@ -9,9 +8,10 @@ import {
 
				   PopoverTrigger,
			
 
				 } from '@/components/ui/popover'
			
 
				 
			
 
				-type LearnMoreProps = React.ComponentProps<typeof Root> & {
			
 
				-  contentProps?: React.ComponentProps<typeof Content>
			
 
				-  triggerProps?: React.ComponentProps<typeof Trigger>
			
 
				+type LearnMoreProps = Omit<React.ComponentProps<typeof Popover>, 'children'> & {
			
 
				+  children?: React.ReactNode
			
 
				+  contentProps?: React.ComponentProps<typeof PopoverContent>
			
 
				+  triggerProps?: React.ComponentProps<typeof PopoverTrigger>
			
 
				 }
			
 
				 
			
 
				 export function LearnMore({
			
@@ -24,14 +24,12 @@ export function LearnMore({
 
				   return (
			
 
				     <Popover {...props}>
			
 
				       <PopoverTrigger
			
 
				-        asChild
			
 
				         {...triggerProps}
			
 
				         className={cn('size-5 rounded-full', triggerProps?.className)}
			
 
				+        render={<Button variant='outline' size='icon' />}
			
 
				       >
			
 
				-        <Button variant='outline' size='icon'>
			
 
				-          <span className='sr-only'>{t('Learn more')}</span>
			
 
				-          <CircleQuestionMark className='size-4 [&>circle]:hidden' />
			
 
				-        </Button>
			
 
				+        <span className='sr-only'>{t('Learn more')}</span>
			
 
				+        <CircleQuestionMark className='size-4 [&>circle]:hidden' />
			
 
				       </PopoverTrigger>
			
 
				       <PopoverContent
			
 
				         side='top'
			
--- a/web/default/src/components/long-text.tsx
+++ b/web/default/src/components/long-text.tsx
@@ -46,12 +46,12 @@ export function LongText({
 
				   return (
			
 
				     <>
			
 
				       <div className='hidden sm:block'>
			
 
				-        <TooltipProvider delayDuration={0}>
			
 
				+        <TooltipProvider delay={0}>
			
 
				           <Tooltip>
			
 
				-            <TooltipTrigger asChild>
			
 
				-              <div ref={ref} className={cn('truncate', className)}>
			
 
				-                {children}
			
 
				-              </div>
			
 
				+            <TooltipTrigger
			
 
				+              render={<div ref={ref} className={cn('truncate', className)} />}
			
 
				+            >
			
 
				+              {children}
			
 
				             </TooltipTrigger>
			
 
				             <TooltipContent>
			
 
				               <p className={contentClassName}>{children}</p>
			
@@ -61,10 +61,10 @@ export function LongText({
 
				       </div>
			
 
				       <div className='sm:hidden'>
			
 
				         <Popover>
			
 
				-          <PopoverTrigger asChild>
			
 
				-            <div ref={ref} className={cn('truncate', className)}>
			
 
				-              {children}
			
 
				-            </div>
			
 
				+          <PopoverTrigger
			
 
				+            render={<div ref={ref} className={cn('truncate', className)} />}
			
 
				+          >
			
 
				+            {children}
			
 
				           </PopoverTrigger>
			
 
				           <PopoverContent className={cn('w-fit', contentClassName)}>
			
 
				             <p>{children}</p>
			
--- a/web/default/src/components/masked-value-display.tsx
+++ b/web/default/src/components/masked-value-display.tsx
@@ -26,10 +26,12 @@ export function MaskedValueDisplay(props: MaskedValueDisplayProps) {
 
				   return (
			
 
				     <div className='flex items-center'>
			
 
				       <Popover>
			
 
				-        <PopoverTrigger asChild>
			
 
				-          <Button variant='ghost' size='sm' className='h-7 font-mono'>
			
 
				-            {props.maskedValue}
			
 
				-          </Button>
			
 
				+        <PopoverTrigger
			
 
				+          render={
			
 
				+            <Button variant='ghost' size='sm' className='h-7 font-mono' />
			
 
				+          }
			
 
				+        >
			
 
				+          {props.maskedValue}
			
 
				         </PopoverTrigger>
			
 
				         <PopoverContent
			
 
				           className='w-auto max-w-[min(90vw,28rem)]'
			
--- a/web/default/src/components/model-group-selector.tsx
+++ b/web/default/src/components/model-group-selector.tsx
@@ -299,20 +299,21 @@ export const ModelSelector: React.FC<ModelSelectorProps> = React.memo(
 
				           </Drawer>
			
 
				         ) : (
			
 
				           <Popover open={open} onOpenChange={setOpen}>
			
 
				-            <PopoverTrigger asChild>
			
 
				-              <ModelTriggerButton
			
 
				-                currentLabel={currentModel?.label || t('Model')}
			
 
				-                triggerClassName={className}
			
 
				-                isDisabled={disabled}
			
 
				-                aria-expanded={open}
			
 
				-              />
			
 
				-            </PopoverTrigger>
			
 
				+            <PopoverTrigger
			
 
				+              render={
			
 
				+                <ModelTriggerButton
			
 
				+                  currentLabel={currentModel?.label || t('Model')}
			
 
				+                  triggerClassName={className}
			
 
				+                  isDisabled={disabled}
			
 
				+                  aria-expanded={open}
			
 
				+                />
			
 
				+              }
			
 
				+            />
			
 
				             <PopoverContent
			
 
				               className='bg-popover z-40 w-[90vw] max-w-[20em] rounded-lg border p-0 !shadow-none sm:w-[20em]'
			
 
				               align='start'
			
 
				               side='bottom'
			
 
				               sideOffset={4}
			
 
				-              avoidCollisions={true}
			
 
				               collisionPadding={8}
			
 
				             >
			
 
				               {renderModelCommandContent()}
			
@@ -492,20 +493,21 @@ export const GroupSelector: React.FC<GroupSelectorProps> = React.memo(
 
				           </Drawer>
			
 
				         ) : (
			
 
				           <Popover open={open} onOpenChange={setOpen}>
			
 
				-            <PopoverTrigger asChild>
			
 
				-              <GroupTriggerButton
			
 
				-                currentLabel={currentGroup?.label || t('Group')}
			
 
				-                triggerClassName={className}
			
 
				-                isDisabled={disabled}
			
 
				-                aria-expanded={open}
			
 
				-              />
			
 
				-            </PopoverTrigger>
			
 
				+            <PopoverTrigger
			
 
				+              render={
			
 
				+                <GroupTriggerButton
			
 
				+                  currentLabel={currentGroup?.label || t('Group')}
			
 
				+                  triggerClassName={className}
			
 
				+                  isDisabled={disabled}
			
 
				+                  aria-expanded={open}
			
 
				+                />
			
 
				+              }
			
 
				+            />
			
 
				             <PopoverContent
			
 
				               className='bg-popover z-50 w-[90vw] max-w-[14em] rounded-lg border p-0 !shadow-none sm:w-[14em]'
			
 
				               align='start'
			
 
				               side='bottom'
			
 
				               sideOffset={4}
			
 
				-              avoidCollisions={true}
			
 
				               collisionPadding={8}
			
 
				             >
			
 
				               {renderGroupCommandContent()}
			
--- a/web/default/src/components/profile-dropdown.tsx
+++ b/web/default/src/components/profile-dropdown.tsx
@@ -1,131 +1,123 @@
 
				-import { useState } from 'react'
			
 
				-import { Link } from '@tanstack/react-router'
			
 
				+import { useMemo } from 'react'
			
 
				+import { useNavigate } from '@tanstack/react-router'
			
 
				 import { User, Wallet, LogOut, Settings } from 'lucide-react'
			
 
				 import { useTranslation } from 'react-i18next'
			
 
				 import { useAuthStore } from '@/stores/auth-store'
			
 
				+import { getUserAvatarFallback, getUserAvatarStyle } from '@/lib/avatar'
			
 
				 import { ROLE } from '@/lib/roles'
			
 
				 import useDialogState from '@/hooks/use-dialog'
			
 
				 import { useUserDisplay } from '@/hooks/use-user-display'
			
 
				-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
			
 
				+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
			
 
				 import { Button } from '@/components/ui/button'
			
 
				 import {
			
 
				-  Sheet,
			
 
				-  SheetContent,
			
 
				-  SheetHeader,
			
 
				-  SheetTitle,
			
 
				-  SheetTrigger,
			
 
				-  SheetClose,
			
 
				-} from '@/components/ui/sheet'
			
 
				+  DropdownMenu,
			
 
				+  DropdownMenuContent,
			
 
				+  DropdownMenuItem,
			
 
				+  DropdownMenuSeparator,
			
 
				+  DropdownMenuTrigger,
			
 
				+} from '@/components/ui/dropdown-menu'
			
 
				 import { SignOutDialog } from '@/components/sign-out-dialog'
			
 
				 
			
 
				+const avatarFallbackClassName = 'font-semibold text-white'
			
 
				+
			
 
				 export function ProfileDropdown() {
			
 
				   const { t } = useTranslation()
			
 
				+  const navigate = useNavigate()
			
 
				   const [open, setOpen] = useDialogState()
			
 
				-  const [sheetOpen, setSheetOpen] = useState(false)
			
 
				   const user = useAuthStore((state) => state.auth.user)
			
 
				-  const { displayName, initials, roleLabel } = useUserDisplay(user)
			
 
				+  const { displayName, roleLabel } = useUserDisplay(user)
			
 
				   const isSuperAdmin = user?.role === ROLE.SUPER_ADMIN
			
 
				+  const avatarName = user?.username || displayName
			
 
				+  const avatarFallback = getUserAvatarFallback(avatarName)
			
 
				+  const avatarFallbackStyle = useMemo(
			
 
				+    () => getUserAvatarStyle(avatarName),
			
 
				+    [avatarName]
			
 
				+  )
			
 
				 
			
 
				   return (
			
 
				     <>
			
 
				-      <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
			
 
				-        <SheetTrigger asChild>
			
 
				-          <Button variant='ghost' className='relative h-9 w-9 rounded-full p-0'>
			
 
				-            <Avatar className='h-9 w-9'>
			
 
				-              <AvatarImage src='/avatars/01.png' alt={`@${displayName}`} />
			
 
				-              <AvatarFallback>{initials}</AvatarFallback>
			
 
				-            </Avatar>
			
 
				-          </Button>
			
 
				-        </SheetTrigger>
			
 
				-        <SheetContent
			
 
				-          side='right'
			
 
				-          className='flex w-full flex-col p-0 sm:max-w-sm'
			
 
				+      <DropdownMenu modal={false}>
			
 
				+        <DropdownMenuTrigger
			
 
				+          render={
			
 
				+            <Button
			
 
				+              variant='ghost'
			
 
				+              className='relative size-6 rounded-full p-0'
			
 
				+            />
			
 
				+          }
			
 
				         >
			
 
				-          <SheetHeader className='border-b p-4'>
			
 
				-            <SheetTitle className='text-left'>{t('User Menu')}</SheetTitle>
			
 
				-          </SheetHeader>
			
 
				-
			
 
				-          <div className='flex flex-1 flex-col overflow-y-auto'>
			
 
				-            {/* User info section */}
			
 
				-            <div className='border-b p-2.5 pb-6.5'>
			
 
				-              <div className='flex items-center gap-2.5'>
			
 
				-                <Avatar className='size-9'>
			
 
				-                  <AvatarImage src='/avatars/01.png' alt={`@${displayName}`} />
			
 
				-                  <AvatarFallback className='text-xs'>
			
 
				-                    {initials}
			
 
				-                  </AvatarFallback>
			
 
				-                </Avatar>
			
 
				-                <div className='flex flex-1 flex-col gap-0.5 overflow-hidden'>
			
 
				-                  <p className='text-foreground truncate text-sm font-medium'>
			
 
				-                    {displayName}
			
 
				-                  </p>
			
 
				-                  <div className='flex items-center gap-1.5'>
			
 
				-                    <span className='text-muted-foreground text-xs'>
			
 
				-                      {roleLabel}
			
 
				+          <Avatar className='size-6'>
			
 
				+            <AvatarFallback
			
 
				+              className={`${avatarFallbackClassName} text-[11px]`}
			
 
				+              style={avatarFallbackStyle}
			
 
				+            >
			
 
				+              {avatarFallback}
			
 
				+            </AvatarFallback>
			
 
				+          </Avatar>
			
 
				+        </DropdownMenuTrigger>
			
 
				+        <DropdownMenuContent align='end' sideOffset={8} className='w-56'>
			
 
				+          <div className='flex items-center gap-2 px-1.5 py-1.5'>
			
 
				+            <Avatar className='size-8'>
			
 
				+              <AvatarFallback
			
 
				+                className={`${avatarFallbackClassName} text-xs`}
			
 
				+                style={avatarFallbackStyle}
			
 
				+              >
			
 
				+                {avatarFallback}
			
 
				+              </AvatarFallback>
			
 
				+            </Avatar>
			
 
				+            <div className='flex flex-1 flex-col gap-0.5 overflow-hidden'>
			
 
				+              <p className='text-foreground truncate text-sm font-medium'>
			
 
				+                {displayName}
			
 
				+              </p>
			
 
				+              <div className='flex items-center gap-1.5'>
			
 
				+                <span className='text-muted-foreground text-xs'>
			
 
				+                  {roleLabel}
			
 
				+                </span>
			
 
				+                {user?.group && (
			
 
				+                  <>
			
 
				+                    <span className='text-muted-foreground text-xs'>·</span>
			
 
				+                    <span className='text-muted-foreground truncate text-xs'>
			
 
				+                      {String(user.group)}
			
 
				                     </span>
			
 
				-                    {user?.group && (
			
 
				-                      <>
			
 
				-                        <span className='text-muted-foreground text-xs'>·</span>
			
 
				-                        <span className='text-muted-foreground text-xs'>
			
 
				-                          {String(user.group)}
			
 
				-                        </span>
			
 
				-                      </>
			
 
				-                    )}
			
 
				-                  </div>
			
 
				-                </div>
			
 
				+                  </>
			
 
				+                )}
			
 
				               </div>
			
 
				             </div>
			
 
				+          </div>
			
 
				 
			
 
				-            {/* Navigation links */}
			
 
				-            <SheetClose asChild>
			
 
				-              <Link
			
 
				-                to='/profile'
			
 
				-                className='text-primary/60 hover:text-primary/80 flex items-center gap-2.5 border-b p-2.5 transition-colors'
			
 
				-              >
			
 
				-                <User className='size-4' />
			
 
				-                {t('Profile')}
			
 
				-              </Link>
			
 
				-            </SheetClose>
			
 
				+          <DropdownMenuSeparator />
			
 
				 
			
 
				-            <SheetClose asChild>
			
 
				-              <Link
			
 
				-                to='/wallet'
			
 
				-                className='text-primary/60 hover:text-primary/80 flex items-center gap-2.5 border-b p-2.5 transition-colors'
			
 
				-              >
			
 
				-                <Wallet className='size-4' />
			
 
				-                {t('Wallet')}
			
 
				-              </Link>
			
 
				-            </SheetClose>
			
 
				+          <DropdownMenuItem onClick={() => navigate({ to: '/profile' })}>
			
 
				+            <User className='size-4' />
			
 
				+            {t('Profile')}
			
 
				+          </DropdownMenuItem>
			
 
				 
			
 
				-            {/* System Settings - only for super admin */}
			
 
				-            {isSuperAdmin && (
			
 
				-              <SheetClose asChild>
			
 
				-                <Link
			
 
				-                  to='/system-settings/general'
			
 
				-                  search={{ section: 'system-info' }}
			
 
				-                  className='text-primary/60 hover:text-primary/80 flex items-center gap-2.5 border-b p-2.5 transition-colors'
			
 
				-                >
			
 
				-                  <Settings className='size-4' />
			
 
				-                  {t('System Settings')}
			
 
				-                </Link>
			
 
				-              </SheetClose>
			
 
				-            )}
			
 
				+          <DropdownMenuItem onClick={() => navigate({ to: '/wallet' })}>
			
 
				+            <Wallet className='size-4' />
			
 
				+            {t('Wallet')}
			
 
				+          </DropdownMenuItem>
			
 
				 
			
 
				-            {/* Sign out */}
			
 
				-            <Button
			
 
				-              variant='ghost'
			
 
				-              onClick={() => {
			
 
				-                setSheetOpen(false)
			
 
				-                setOpen(true)
			
 
				-              }}
			
 
				-              className='text-destructive hover:text-destructive/80 h-auto w-full justify-start gap-2.5 p-2.5 hover:bg-transparent'
			
 
				+          {isSuperAdmin && (
			
 
				+            <DropdownMenuItem
			
 
				+              onClick={() =>
			
 
				+                navigate({
			
 
				+                  to: '/system-settings/general',
			
 
				+                  search: { section: 'system-info' },
			
 
				+                })
			
 
				+              }
			
 
				             >
			
 
				-              <LogOut className='size-4' />
			
 
				-              {t('Sign out')}
			
 
				-            </Button>
			
 
				-          </div>
			
 
				-        </SheetContent>
			
 
				-      </Sheet>
			
 
				+              <Settings className='size-4' />
			
 
				+              {t('System Settings')}
			
 
				+            </DropdownMenuItem>
			
 
				+          )}
			
 
				+
			
 
				+          <DropdownMenuSeparator />
			
 
				+
			
 
				+          <DropdownMenuItem variant='destructive' onClick={() => setOpen(true)}>
			
 
				+            <LogOut className='size-4' />
			
 
				+            {t('Sign out')}
			
 
				+          </DropdownMenuItem>
			
 
				+        </DropdownMenuContent>
			
 
				+      </DropdownMenu>
			
 
				 
			
 
				       <SignOutDialog open={!!open} onOpenChange={setOpen} />
			
 
				     </>
			
--- a/web/default/src/components/select-dropdown.tsx
+++ b/web/default/src/components/select-dropdown.tsx
@@ -1,65 +0,0 @@
 
				-import { Loader } from 'lucide-react'
			
 
				-import { useTranslation } from 'react-i18next'
			
 
				-import { cn } from '@/lib/utils'
			
 
				-import { FormControl } from '@/components/ui/form'
			
 
				-import {
			
 
				-  Select,
			
 
				-  SelectContent,
			
 
				-  SelectItem,
			
 
				-  SelectTrigger,
			
 
				-  SelectValue,
			
 
				-} from '@/components/ui/select'
			
 
				-
			
 
				-type SelectDropdownProps = {
			
 
				-  onValueChange?: (value: string) => void
			
 
				-  defaultValue: string | undefined
			
 
				-  placeholder?: string
			
 
				-  isPending?: boolean
			
 
				-  items: { label: string; value: string }[] | undefined
			
 
				-  disabled?: boolean
			
 
				-  className?: string
			
 
				-  isControlled?: boolean
			
 
				-}
			
 
				-
			
 
				-export function SelectDropdown({
			
 
				-  defaultValue,
			
 
				-  onValueChange,
			
 
				-  isPending,
			
 
				-  items,
			
 
				-  placeholder,
			
 
				-  disabled,
			
 
				-  className = '',
			
 
				-  isControlled = false,
			
 
				-}: SelectDropdownProps) {
			
 
				-  const { t } = useTranslation()
			
 
				-  const placeholderText = placeholder ?? t('Select')
			
 
				-  const defaultState = isControlled
			
 
				-    ? { value: defaultValue, onValueChange }
			
 
				-    : { defaultValue, onValueChange }
			
 
				-  return (
			
 
				-    <Select {...defaultState}>
			
 
				-      <FormControl>
			
 
				-        <SelectTrigger disabled={disabled} className={cn(className)}>
			
 
				-          <SelectValue placeholder={placeholderText} />
			
 
				-        </SelectTrigger>
			
 
				-      </FormControl>
			
 
				-      <SelectContent>
			
 
				-        {isPending ? (
			
 
				-          <SelectItem disabled value='loading' className='h-14'>
			
 
				-            <div className='flex items-center justify-center gap-2'>
			
 
				-              <Loader className='h-5 w-5 animate-spin' />
			
 
				-              {'  '}
			
 
				-              {t('Loading...')}
			
 
				-            </div>
			
 
				-          </SelectItem>
			
 
				-        ) : (
			
 
				-          items?.map(({ label, value }) => (
			
 
				-            <SelectItem key={value} value={value}>
			
 
				-              {label}
			
 
				-            </SelectItem>
			
 
				-          ))
			
 
				-        )}
			
 
				-      </SelectContent>
			
 
				-    </Select>
			
 
				-  )
			
 
				-}
			
--- a/web/default/src/components/status-badge.tsx
+++ b/web/default/src/components/status-badge.tsx
@@ -110,7 +110,8 @@ export function StatusBadge({
 
				     onClick?.(e)
			
 
				   }
			
 
				 
			
 
				-  const content = children ?? (label ? <span className='truncate'>{label}</span> : null)
			
 
				+  const content =
			
 
				+    children ?? (label ? <span className='truncate'>{label}</span> : null)
			
 
				 
			
 
				   return (
			
 
				     <span
			
--- a/web/default/src/components/theme-switch.tsx
+++ b/web/default/src/components/theme-switch.tsx
@@ -25,12 +25,18 @@ export function ThemeSwitch() {
 
				 
			
 
				   return (
			
 
				     <DropdownMenu modal={false}>
			
 
				-      <DropdownMenuTrigger asChild>
			
 
				-        <Button variant='ghost' size='icon' className='h-9 w-9 rounded-full'>
			
 
				-          <Sun className='size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />
			
 
				-          <Moon className='absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />
			
 
				-          <span className='sr-only'>{t('Toggle theme')}</span>
			
 
				-        </Button>
			
 
				+      <DropdownMenuTrigger
			
 
				+        render={
			
 
				+          <Button
			
 
				+            variant='ghost'
			
 
				+            size='icon'
			
 
				+            className='h-9 w-9 rounded-full'
			
 
				+          />
			
 
				+        }
			
 
				+      >
			
 
				+        <Sun className='size-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90' />
			
 
				+        <Moon className='absolute size-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0' />
			
 
				+        <span className='sr-only'>{t('Toggle theme')}</span>
			
 
				       </DropdownMenuTrigger>
			
 
				       <DropdownMenuContent align='end'>
			
 
				         <DropdownMenuItem onClick={() => setTheme('light')}>
			
--- a/web/default/src/components/ui/accordion.tsx
+++ b/web/default/src/components/ui/accordion.tsx
@@ -1,24 +1,23 @@
 
				-'use client'
			
 
				-
			
 
				-import * as React from 'react'
			
 
				-import * as AccordionPrimitive from '@radix-ui/react-accordion'
			
 
				-import { ChevronDownIcon } from 'lucide-react'
			
 
				+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'
			
 
				+import { ArrowDown01Icon, ArrowUp01Icon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				-function Accordion({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
			
 
				-  return <AccordionPrimitive.Root data-slot='accordion' {...props} />
			
 
				+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
			
 
				+  return (
			
 
				+    <AccordionPrimitive.Root
			
 
				+      data-slot='accordion'
			
 
				+      className={cn('flex w-full flex-col', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				 }
			
 
				 
			
 
				-function AccordionItem({
			
 
				-  className,
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
			
 
				+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
			
 
				   return (
			
 
				     <AccordionPrimitive.Item
			
 
				       data-slot='accordion-item'
			
 
				-      className={cn('border-b last:border-b-0', className)}
			
 
				+      className={cn('not-last:border-b', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -28,19 +27,30 @@ function AccordionTrigger({
 
				   className,
			
 
				   children,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
			
 
				+}: AccordionPrimitive.Trigger.Props) {
			
 
				   return (
			
 
				     <AccordionPrimitive.Header className='flex'>
			
 
				       <AccordionPrimitive.Trigger
			
 
				         data-slot='accordion-trigger'
			
 
				         className={cn(
			
 
				-          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
			
 
				+          'group/accordion-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4',
			
 
				           className
			
 
				         )}
			
 
				         {...props}
			
 
				       >
			
 
				         {children}
			
 
				-        <ChevronDownIcon className='text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200' />
			
 
				+        <HugeiconsIcon
			
 
				+          icon={ArrowDown01Icon}
			
 
				+          strokeWidth={2}
			
 
				+          data-slot='accordion-trigger-icon'
			
 
				+          className='pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden'
			
 
				+        />
			
 
				+        <HugeiconsIcon
			
 
				+          icon={ArrowUp01Icon}
			
 
				+          strokeWidth={2}
			
 
				+          data-slot='accordion-trigger-icon'
			
 
				+          className='pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline'
			
 
				+        />
			
 
				       </AccordionPrimitive.Trigger>
			
 
				     </AccordionPrimitive.Header>
			
 
				   )
			
@@ -50,15 +60,22 @@ function AccordionContent({
 
				   className,
			
 
				   children,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
			
 
				+}: AccordionPrimitive.Panel.Props) {
			
 
				   return (
			
 
				-    <AccordionPrimitive.Content
			
 
				+    <AccordionPrimitive.Panel
			
 
				       data-slot='accordion-content'
			
 
				-      className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
			
 
				+      className='data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm'
			
 
				       {...props}
			
 
				     >
			
 
				-      <div className={cn('pt-0 pb-4', className)}>{children}</div>
			
 
				-    </AccordionPrimitive.Content>
			
 
				+      <div
			
 
				+        className={cn(
			
 
				+          '[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
			
 
				+          className
			
 
				+        )}
			
 
				+      >
			
 
				+        {children}
			
 
				+      </div>
			
 
				+    </AccordionPrimitive.Panel>
			
 
				   )
			
 
				 }
			
 
				 
			
--- a/web/default/src/components/ui/alert-dialog.tsx
+++ b/web/default/src/components/ui/alert-dialog.tsx
@@ -1,25 +1,21 @@
 
				+'use client'
			
 
				+
			
 
				 import * as React from 'react'
			
 
				-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
			
 
				+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
			
 
				 import { cn } from '@/lib/utils'
			
 
				-import { buttonVariants } from '@/components/ui/button'
			
 
				+import { Button } from '@/components/ui/button'
			
 
				 
			
 
				-function AlertDialog({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
			
 
				+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
			
 
				   return <AlertDialogPrimitive.Root data-slot='alert-dialog' {...props} />
			
 
				 }
			
 
				 
			
 
				-function AlertDialogTrigger({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
			
 
				+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
			
 
				   return (
			
 
				     <AlertDialogPrimitive.Trigger data-slot='alert-dialog-trigger' {...props} />
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function AlertDialogPortal({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
			
 
				+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
			
 
				   return (
			
 
				     <AlertDialogPrimitive.Portal data-slot='alert-dialog-portal' {...props} />
			
 
				   )
			
@@ -28,12 +24,12 @@ function AlertDialogPortal({
 
				 function AlertDialogOverlay({
			
 
				   className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
			
 
				+}: AlertDialogPrimitive.Backdrop.Props) {
			
 
				   return (
			
 
				-    <AlertDialogPrimitive.Overlay
			
 
				+    <AlertDialogPrimitive.Backdrop
			
 
				       data-slot='alert-dialog-overlay'
			
 
				       className={cn(
			
 
				-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
			
 
				+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -43,15 +39,19 @@ function AlertDialogOverlay({
 
				 
			
 
				 function AlertDialogContent({
			
 
				   className,
			
 
				+  size = 'default',
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
			
 
				+}: AlertDialogPrimitive.Popup.Props & {
			
 
				+  size?: 'default' | 'sm'
			
 
				+}) {
			
 
				   return (
			
 
				     <AlertDialogPortal>
			
 
				       <AlertDialogOverlay />
			
 
				-      <AlertDialogPrimitive.Content
			
 
				+      <AlertDialogPrimitive.Popup
			
 
				         data-slot='alert-dialog-content'
			
 
				+        data-size={size}
			
 
				         className={cn(
			
 
				-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
			
 
				+          'group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 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 fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm',
			
 
				           className
			
 
				         )}
			
 
				         {...props}
			
@@ -67,7 +67,10 @@ function AlertDialogHeader({
 
				   return (
			
 
				     <div
			
 
				       data-slot='alert-dialog-header'
			
 
				-      className={cn('flex flex-col gap-2 text-center sm:text-start', className)}
			
 
				+      className={cn(
			
 
				+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -81,7 +84,23 @@ function AlertDialogFooter({
 
				     <div
			
 
				       data-slot='alert-dialog-footer'
			
 
				       className={cn(
			
 
				-        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
			
 
				+        'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function AlertDialogMedia({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='alert-dialog-media'
			
 
				+      className={cn(
			
 
				+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -96,7 +115,10 @@ function AlertDialogTitle({
 
				   return (
			
 
				     <AlertDialogPrimitive.Title
			
 
				       data-slot='alert-dialog-title'
			
 
				-      className={cn('text-lg font-semibold', className)}
			
 
				+      className={cn(
			
 
				+        'text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -109,7 +131,10 @@ function AlertDialogDescription({
 
				   return (
			
 
				     <AlertDialogPrimitive.Description
			
 
				       data-slot='alert-dialog-description'
			
 
				-      className={cn('text-muted-foreground text-sm', className)}
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -118,10 +143,11 @@ function AlertDialogDescription({
 
				 function AlertDialogAction({
			
 
				   className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
			
 
				+}: React.ComponentProps<typeof Button>) {
			
 
				   return (
			
 
				-    <AlertDialogPrimitive.Action
			
 
				-      className={cn(buttonVariants(), className)}
			
 
				+    <Button
			
 
				+      data-slot='alert-dialog-action'
			
 
				+      className={cn(className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -129,11 +155,16 @@ function AlertDialogAction({
 
				 
			
 
				 function AlertDialogCancel({
			
 
				   className,
			
 
				+  variant = 'outline',
			
 
				+  size = 'default',
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
			
 
				+}: AlertDialogPrimitive.Close.Props &
			
 
				+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
			
 
				   return (
			
 
				-    <AlertDialogPrimitive.Cancel
			
 
				-      className={cn(buttonVariants({ variant: 'outline' }), className)}
			
 
				+    <AlertDialogPrimitive.Close
			
 
				+      data-slot='alert-dialog-cancel'
			
 
				+      className={cn(className)}
			
 
				+      render={<Button variant={variant} size={size} />}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -141,14 +172,15 @@ function AlertDialogCancel({
 
				 
			
 
				 export {
			
 
				   AlertDialog,
			
 
				-  AlertDialogPortal,
			
 
				-  AlertDialogOverlay,
			
 
				-  AlertDialogTrigger,
			
 
				+  AlertDialogAction,
			
 
				+  AlertDialogCancel,
			
 
				   AlertDialogContent,
			
 
				-  AlertDialogHeader,
			
 
				+  AlertDialogDescription,
			
 
				   AlertDialogFooter,
			
 
				+  AlertDialogHeader,
			
 
				+  AlertDialogMedia,
			
 
				+  AlertDialogOverlay,
			
 
				+  AlertDialogPortal,
			
 
				   AlertDialogTitle,
			
 
				-  AlertDialogDescription,
			
 
				-  AlertDialogAction,
			
 
				-  AlertDialogCancel,
			
 
				+  AlertDialogTrigger,
			
 
				 }
			
--- a/web/default/src/components/ui/alert.tsx
+++ b/web/default/src/components/ui/alert.tsx
@@ -3,13 +3,13 @@ import { cva, type VariantProps } from 'class-variance-authority'
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				 const alertVariants = cva(
			
 
				-  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
			
 
				+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
			
 
				   {
			
 
				     variants: {
			
 
				       variant: {
			
 
				         default: 'bg-card text-card-foreground',
			
 
				         destructive:
			
 
				-          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
			
 
				+          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
			
 
				       },
			
 
				     },
			
 
				     defaultVariants: {
			
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
 
				     <div
			
 
				       data-slot='alert-title'
			
 
				       className={cn(
			
 
				-        'col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight',
			
 
				+        '[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -54,7 +54,7 @@ function AlertDescription({
 
				     <div
			
 
				       data-slot='alert-description'
			
 
				       className={cn(
			
 
				-        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
			
 
				+        'text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -62,4 +62,14 @@ function AlertDescription({
 
				   )
			
 
				 }
			
 
				 
			
 
				-export { Alert, AlertTitle, AlertDescription }
			
 
				+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='alert-action'
			
 
				+      className={cn('absolute top-2 right-2', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+export { Alert, AlertTitle, AlertDescription, AlertAction }
			
--- a/web/default/src/components/ui/aspect-ratio.tsx
+++ b/web/default/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,22 @@
 
				+import { cn } from '@/lib/utils'
			
 
				+
			
 
				+function AspectRatio({
			
 
				+  ratio,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'> & { ratio: number }) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='aspect-ratio'
			
 
				+      style={
			
 
				+        {
			
 
				+          '--ratio': ratio,
			
 
				+        } as React.CSSProperties
			
 
				+      }
			
 
				+      className={cn('relative aspect-(--ratio)', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+export { AspectRatio }
			
--- a/web/default/src/components/ui/avatar.tsx
+++ b/web/default/src/components/ui/avatar.tsx
@@ -1,16 +1,20 @@
 
				 import * as React from 'react'
			
 
				-import * as AvatarPrimitive from '@radix-ui/react-avatar'
			
 
				+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				 function Avatar({
			
 
				   className,
			
 
				+  size = 'default',
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
			
 
				+}: AvatarPrimitive.Root.Props & {
			
 
				+  size?: 'default' | 'sm' | 'lg'
			
 
				+}) {
			
 
				   return (
			
 
				     <AvatarPrimitive.Root
			
 
				       data-slot='avatar'
			
 
				+      data-size={size}
			
 
				       className={cn(
			
 
				-        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
			
 
				+        'group/avatar after:border-border relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -18,14 +22,14 @@ function Avatar({
 
				   )
			
 
				 }
			
 
				 
			
 
				-function AvatarImage({
			
 
				-  className,
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
			
 
				+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
			
 
				   return (
			
 
				     <AvatarPrimitive.Image
			
 
				       data-slot='avatar-image'
			
 
				-      className={cn('aspect-square size-full', className)}
			
 
				+      className={cn(
			
 
				+        'aspect-square size-full rounded-full object-cover',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -34,12 +38,28 @@ function AvatarImage({
 
				 function AvatarFallback({
			
 
				   className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
			
 
				+}: AvatarPrimitive.Fallback.Props) {
			
 
				   return (
			
 
				     <AvatarPrimitive.Fallback
			
 
				       data-slot='avatar-fallback'
			
 
				       className={cn(
			
 
				-        'bg-muted flex size-full items-center justify-center rounded-full',
			
 
				+        'bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot='avatar-badge'
			
 
				+      className={cn(
			
 
				+        'bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 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}
			
@@ -47,4 +67,40 @@ function AvatarFallback({
 
				   )
			
 
				 }
			
 
				 
			
 
				-export { Avatar, AvatarImage, AvatarFallback }
			
 
				+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='avatar-group'
			
 
				+      className={cn(
			
 
				+        'group/avatar-group *:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function AvatarGroupCount({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='avatar-group-count'
			
 
				+      className={cn(
			
 
				+        'bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 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,
			
 
				+}
			
--- a/web/default/src/components/ui/badge.tsx
+++ b/web/default/src/components/ui/badge.tsx
@@ -1,21 +1,23 @@
 
				-import * as React from 'react'
			
 
				-import { Slot } from '@radix-ui/react-slot'
			
 
				+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'
			
 
				 
			
 
				 const badgeVariants = cva(
			
 
				-  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
			
 
				+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
			
 
				   {
			
 
				     variants: {
			
 
				       variant: {
			
 
				-        default:
			
 
				-          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
			
 
				+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
			
 
				         secondary:
			
 
				-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
			
 
				+          'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
			
 
				         destructive:
			
 
				-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
			
 
				+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
			
 
				         outline:
			
 
				-          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
			
 
				+          'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
			
 
				+        ghost:
			
 
				+          'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
			
 
				+        link: 'text-primary underline-offset-4 hover:underline',
			
 
				       },
			
 
				     },
			
 
				     defaultVariants: {
			
@@ -26,20 +28,24 @@ const badgeVariants = cva(
 
				 
			
 
				 function Badge({
			
 
				   className,
			
 
				-  variant,
			
 
				-  asChild = false,
			
 
				+  variant = 'default',
			
 
				+  render,
			
 
				   ...props
			
 
				-}: React.ComponentProps<'span'> &
			
 
				-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
			
 
				-  const Comp = asChild ? Slot : 'span'
			
 
				-
			
 
				-  return (
			
 
				-    <Comp
			
 
				-      data-slot='badge'
			
 
				-      className={cn(badgeVariants({ variant }), className)}
			
 
				-      {...props}
			
 
				-    />
			
 
				-  )
			
 
				+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
			
 
				+  return useRender({
			
 
				+    defaultTagName: 'span',
			
 
				+    props: mergeProps<'span'>(
			
 
				+      {
			
 
				+        className: cn(badgeVariants({ variant }), className),
			
 
				+      },
			
 
				+      props
			
 
				+    ),
			
 
				+    render,
			
 
				+    state: {
			
 
				+      slot: 'badge',
			
 
				+      variant,
			
 
				+    },
			
 
				+  })
			
 
				 }
			
 
				 
			
 
				 export { Badge, badgeVariants }
			
--- a/web/default/src/components/ui/breadcrumb.tsx
+++ b/web/default/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,125 @@
 
				+import * as React from 'react'
			
 
				+import { mergeProps } from '@base-ui/react/merge-props'
			
 
				+import { useRender } from '@base-ui/react/use-render'
			
 
				+import {
			
 
				+  ArrowRight01Icon,
			
 
				+  MoreHorizontalCircle01Icon,
			
 
				+} from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				+import { cn } from '@/lib/utils'
			
 
				+
			
 
				+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
			
 
				+  return (
			
 
				+    <nav
			
 
				+      aria-label='breadcrumb'
			
 
				+      data-slot='breadcrumb'
			
 
				+      className={cn(className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
			
 
				+  return (
			
 
				+    <ol
			
 
				+      data-slot='breadcrumb-list'
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
			
 
				+  return (
			
 
				+    <li
			
 
				+      data-slot='breadcrumb-item'
			
 
				+      className={cn('inline-flex items-center gap-1', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+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 (
			
 
				+    <span
			
 
				+      data-slot='breadcrumb-page'
			
 
				+      role='link'
			
 
				+      aria-disabled='true'
			
 
				+      aria-current='page'
			
 
				+      className={cn('text-foreground font-normal', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbSeparator({
			
 
				+  children,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'li'>) {
			
 
				+  return (
			
 
				+    <li
			
 
				+      data-slot='breadcrumb-separator'
			
 
				+      role='presentation'
			
 
				+      aria-hidden='true'
			
 
				+      className={cn('[&>svg]:size-3.5', className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children ?? <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />}
			
 
				+    </li>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbEllipsis({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: 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}
			
 
				+    >
			
 
				+      <HugeiconsIcon icon={MoreHorizontalCircle01Icon} strokeWidth={2} />
			
 
				+      <span className='sr-only'>More</span>
			
 
				+    </span>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Breadcrumb,
			
 
				+  BreadcrumbList,
			
 
				+  BreadcrumbItem,
			
 
				+  BreadcrumbLink,
			
 
				+  BreadcrumbPage,
			
 
				+  BreadcrumbSeparator,
			
 
				+  BreadcrumbEllipsis,
			
 
				+}
			
--- a/web/default/src/components/ui/button-group.tsx
+++ b/web/default/src/components/ui/button-group.tsx
@@ -0,0 +1,86 @@
 
				+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 { Separator } from '@/components/ui/separator'
			
 
				+
			
 
				+const buttonGroupVariants = cva(
			
 
				+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      orientation: {
			
 
				+        horizontal:
			
 
				+          '*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
			
 
				+        vertical:
			
 
				+          'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      orientation: 'horizontal',
			
 
				+    },
			
 
				+  }
			
 
				+)
			
 
				+
			
 
				+function ButtonGroup({
			
 
				+  className,
			
 
				+  orientation,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      role='group'
			
 
				+      data-slot='button-group'
			
 
				+      data-orientation={orientation}
			
 
				+      className={cn(buttonGroupVariants({ orientation }), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ButtonGroupText({
			
 
				+  className,
			
 
				+  render,
			
 
				+  ...props
			
 
				+}: useRender.ComponentProps<'div'>) {
			
 
				+  return useRender({
			
 
				+    defaultTagName: 'div',
			
 
				+    props: mergeProps<'div'>(
			
 
				+      {
			
 
				+        className: cn(
			
 
				+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
			
 
				+          className
			
 
				+        ),
			
 
				+      },
			
 
				+      props
			
 
				+    ),
			
 
				+    render,
			
 
				+    state: {
			
 
				+      slot: 'button-group-text',
			
 
				+    },
			
 
				+  })
			
 
				+}
			
 
				+
			
 
				+function ButtonGroupSeparator({
			
 
				+  className,
			
 
				+  orientation = 'vertical',
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Separator>) {
			
 
				+  return (
			
 
				+    <Separator
			
 
				+      data-slot='button-group-separator'
			
 
				+      orientation={orientation}
			
 
				+      className={cn(
			
 
				+        'bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  ButtonGroup,
			
 
				+  ButtonGroupSeparator,
			
 
				+  ButtonGroupText,
			
 
				+  buttonGroupVariants,
			
 
				+}
			
--- a/web/default/src/components/ui/button.tsx
+++ b/web/default/src/components/ui/button.tsx
@@ -1,31 +1,36 @@
 
				-import * as React from 'react'
			
 
				-import { Slot } from '@radix-ui/react-slot'
			
 
				+import { isValidElement } from 'react'
			
 
				+import { Button as ButtonPrimitive } from '@base-ui/react/button'
			
 
				 import { cva, type VariantProps } from 'class-variance-authority'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				 const buttonVariants = cva(
			
 
				-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
			
 
				+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg 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 hover:bg-primary/90',
			
 
				-        destructive:
			
 
				-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
			
 
				+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
			
 
				         outline:
			
 
				-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
			
 
				+          'border-border bg-background 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 hover:bg-secondary/80',
			
 
				+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
			
 
				         ghost:
			
 
				-          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
			
 
				+          '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',
			
 
				       },
			
 
				       size: {
			
 
				-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
			
 
				-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
			
 
				-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
			
 
				-        icon: 'size-9',
			
 
				-        'icon-sm': 'size-8',
			
 
				-        'icon-lg': 'size-10',
			
 
				+        default:
			
 
				+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
			
 
				+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
			
 
				+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
			
 
				+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
			
 
				+        icon: 'size-8',
			
 
				+        'icon-xs':
			
 
				+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
			
 
				+        'icon-sm':
			
 
				+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
			
 
				+        'icon-lg': 'size-9',
			
 
				       },
			
 
				     },
			
 
				     defaultVariants: {
			
@@ -35,22 +40,28 @@ const buttonVariants = cva(
 
				   }
			
 
				 )
			
 
				 
			
 
				+function isNativeButtonRender(render: ButtonPrimitive.Props['render']) {
			
 
				+  if (!render || !isValidElement(render)) {
			
 
				+    return true
			
 
				+  }
			
 
				+
			
 
				+  return render.type === 'button'
			
 
				+}
			
 
				+
			
 
				 function Button({
			
 
				   className,
			
 
				-  variant,
			
 
				-  size,
			
 
				-  asChild = false,
			
 
				+  variant = 'default',
			
 
				+  size = 'default',
			
 
				+  nativeButton,
			
 
				+  render,
			
 
				   ...props
			
 
				-}: React.ComponentProps<'button'> &
			
 
				-  VariantProps<typeof buttonVariants> & {
			
 
				-    asChild?: boolean
			
 
				-  }) {
			
 
				-  const Comp = asChild ? Slot : 'button'
			
 
				-
			
 
				+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
			
 
				   return (
			
 
				-    <Comp
			
 
				+    <ButtonPrimitive
			
 
				       data-slot='button'
			
 
				       className={cn(buttonVariants({ variant, size, className }))}
			
 
				+      nativeButton={nativeButton ?? isNativeButtonRender(render)}
			
 
				+      render={render}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
--- a/web/default/src/components/ui/calendar.tsx
+++ b/web/default/src/components/ui/calendar.tsx
@@ -1,17 +1,16 @@
 
				 import * as React from 'react'
			
 
				 import {
			
 
				-  CheckIcon,
			
 
				-  ChevronDownIcon,
			
 
				-  ChevronLeftIcon,
			
 
				-  ChevronRightIcon,
			
 
				-} from 'lucide-react'
			
 
				+  ArrowLeftIcon,
			
 
				+  ArrowRightIcon,
			
 
				+  ArrowDownIcon,
			
 
				+} from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import {
			
 
				-  DayButton,
			
 
				   DayPicker,
			
 
				-  type DropdownProps,
			
 
				   getDefaultClassNames,
			
 
				+  type DayButton,
			
 
				+  type Locale,
			
 
				 } from 'react-day-picker'
			
 
				-import dayjs from '@/lib/dayjs'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { Button, buttonVariants } from '@/components/ui/button'
			
 
				 
			
@@ -21,99 +20,108 @@ function Calendar({
 
				   showOutsideDays = true,
			
 
				   captionLayout = 'label',
			
 
				   buttonVariant = 'ghost',
			
 
				+  locale,
			
 
				   formatters,
			
 
				   components,
			
 
				-  locale,
			
 
				   ...props
			
 
				 }: React.ComponentProps<typeof DayPicker> & {
			
 
				   buttonVariant?: React.ComponentProps<typeof Button>['variant']
			
 
				-  /** react-day-picker locale for i18n (month/weekday labels). Pass the locale used by your i18n/date setup. */
			
 
				-  locale?: React.ComponentProps<typeof DayPicker>['locale']
			
 
				 }) {
			
 
				   const defaultClassNames = getDefaultClassNames()
			
 
				-  const localeCode = locale?.code ?? 'default'
			
 
				 
			
 
				   return (
			
 
				     <DayPicker
			
 
				-      locale={locale}
			
 
				       showOutsideDays={showOutsideDays}
			
 
				       className={cn(
			
 
				-        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
			
 
				+        'group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent',
			
 
				         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
			
 
				         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
			
 
				         className
			
 
				       )}
			
 
				       captionLayout={captionLayout}
			
 
				+      locale={locale}
			
 
				       formatters={{
			
 
				         formatMonthDropdown: (date) =>
			
 
				-          date.toLocaleString(localeCode, { month: 'short' }),
			
 
				+          date.toLocaleString(locale?.code, { month: 'short' }),
			
 
				         ...formatters,
			
 
				       }}
			
 
				       classNames={{
			
 
				         root: cn('w-fit', defaultClassNames.root),
			
 
				         months: cn(
			
 
				-          'flex gap-4 flex-col md:flex-row relative',
			
 
				+          'relative flex flex-col gap-4 md:flex-row',
			
 
				           defaultClassNames.months
			
 
				         ),
			
 
				-        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
			
 
				+        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
			
 
				         nav: cn(
			
 
				-          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
			
 
				+          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
			
 
				           defaultClassNames.nav
			
 
				         ),
			
 
				         button_previous: cn(
			
 
				           buttonVariants({ variant: buttonVariant }),
			
 
				-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
			
 
				+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
			
 
				           defaultClassNames.button_previous
			
 
				         ),
			
 
				         button_next: cn(
			
 
				           buttonVariants({ variant: buttonVariant }),
			
 
				-          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
			
 
				+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
			
 
				           defaultClassNames.button_next
			
 
				         ),
			
 
				         month_caption: cn(
			
 
				-          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
			
 
				+          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
			
 
				           defaultClassNames.month_caption
			
 
				         ),
			
 
				         dropdowns: cn(
			
 
				-          'flex items-center justify-center gap-0.5',
			
 
				+          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
			
 
				           defaultClassNames.dropdowns
			
 
				         ),
			
 
				-        dropdown_root: cn('relative', defaultClassNames.dropdown_root),
			
 
				-        dropdown: cn('sr-only', defaultClassNames.dropdown),
			
 
				+        dropdown_root: cn(
			
 
				+          'relative rounded-(--cell-radius)',
			
 
				+          defaultClassNames.dropdown_root
			
 
				+        ),
			
 
				+        dropdown: cn(
			
 
				+          'absolute inset-0 bg-popover opacity-0',
			
 
				+          defaultClassNames.dropdown
			
 
				+        ),
			
 
				         caption_label: cn(
			
 
				-          'select-none font-medium',
			
 
				+          'font-medium select-none',
			
 
				           captionLayout === 'label'
			
 
				             ? 'text-sm'
			
 
				-            : 'rounded-md ps-2 pe-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
			
 
				+            : 'flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
			
 
				           defaultClassNames.caption_label
			
 
				         ),
			
 
				         table: 'w-full border-collapse',
			
 
				         weekdays: cn('flex', defaultClassNames.weekdays),
			
 
				         weekday: cn(
			
 
				-          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
			
 
				+          'flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none',
			
 
				           defaultClassNames.weekday
			
 
				         ),
			
 
				-        week: cn('flex w-full mt-2', defaultClassNames.week),
			
 
				+        week: cn('mt-2 flex w-full', defaultClassNames.week),
			
 
				         week_number_header: cn(
			
 
				-          'select-none w-(--cell-size)',
			
 
				+          'w-(--cell-size) select-none',
			
 
				           defaultClassNames.week_number_header
			
 
				         ),
			
 
				         week_number: cn(
			
 
				-          'text-[0.8rem] select-none text-muted-foreground',
			
 
				+          'text-[0.8rem] text-muted-foreground select-none',
			
 
				           defaultClassNames.week_number
			
 
				         ),
			
 
				         day: cn(
			
 
				-          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
			
 
				+          'group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)',
			
 
				+          props.showWeekNumber
			
 
				+            ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)'
			
 
				+            : '[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)',
			
 
				           defaultClassNames.day
			
 
				         ),
			
 
				         range_start: cn(
			
 
				-          'rounded-l-md bg-accent',
			
 
				+          'relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted',
			
 
				           defaultClassNames.range_start
			
 
				         ),
			
 
				         range_middle: cn('rounded-none', defaultClassNames.range_middle),
			
 
				-        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
			
 
				+        range_end: cn(
			
 
				+          'relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted',
			
 
				+          defaultClassNames.range_end
			
 
				+        ),
			
 
				         today: cn(
			
 
				-          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
			
 
				+          'rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none',
			
 
				           defaultClassNames.today
			
 
				         ),
			
 
				         outside: cn(
			
@@ -141,13 +149,20 @@ function Calendar({
 
				         Chevron: ({ className, orientation, ...props }) => {
			
 
				           if (orientation === 'left') {
			
 
				             return (
			
 
				-              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
			
 
				+              <HugeiconsIcon
			
 
				+                icon={ArrowLeftIcon}
			
 
				+                strokeWidth={2}
			
 
				+                className={cn('size-4', className)}
			
 
				+                {...props}
			
 
				+              />
			
 
				             )
			
 
				           }
			
 
				 
			
 
				           if (orientation === 'right') {
			
 
				             return (
			
 
				-              <ChevronRightIcon
			
 
				+              <HugeiconsIcon
			
 
				+                icon={ArrowRightIcon}
			
 
				+                strokeWidth={2}
			
 
				                 className={cn('size-4', className)}
			
 
				                 {...props}
			
 
				               />
			
@@ -155,11 +170,17 @@ function Calendar({
 
				           }
			
 
				 
			
 
				           return (
			
 
				-            <ChevronDownIcon className={cn('size-4', className)} {...props} />
			
 
				+            <HugeiconsIcon
			
 
				+              icon={ArrowDownIcon}
			
 
				+              strokeWidth={2}
			
 
				+              className={cn('size-4', className)}
			
 
				+              {...props}
			
 
				+            />
			
 
				           )
			
 
				         },
			
 
				-        DayButton: CalendarDayButton,
			
 
				-        Dropdown: CalendarDropdown,
			
 
				+        DayButton: ({ ...props }) => (
			
 
				+          <CalendarDayButton locale={locale} {...props} />
			
 
				+        ),
			
 
				         WeekNumber: ({ children, ...props }) => {
			
 
				           return (
			
 
				             <td {...props}>
			
@@ -180,8 +201,9 @@ function CalendarDayButton({
 
				   className,
			
 
				   day,
			
 
				   modifiers,
			
 
				+  locale,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DayButton>) {
			
 
				+}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
			
 
				   const defaultClassNames = getDefaultClassNames()
			
 
				 
			
 
				   const ref = React.useRef<HTMLButtonElement>(null)
			
@@ -191,10 +213,9 @@ function CalendarDayButton({
 
				 
			
 
				   return (
			
 
				     <Button
			
 
				-      ref={ref}
			
 
				       variant='ghost'
			
 
				       size='icon'
			
 
				-      data-day={dayjs(day.date).format('YYYY-MM-DD')}
			
 
				+      data-day={day.date.toLocaleDateString(locale?.code)}
			
 
				       data-selected-single={
			
 
				         modifiers.selected &&
			
 
				         !modifiers.range_start &&
			
@@ -205,7 +226,7 @@ function CalendarDayButton({
 
				       data-range-end={modifiers.range_end}
			
 
				       data-range-middle={modifiers.range_middle}
			
 
				       className={cn(
			
 
				-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
			
 
				+        'group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70',
			
 
				         defaultClassNames.day,
			
 
				         className
			
 
				       )}
			
@@ -214,95 +235,4 @@ function CalendarDayButton({
 
				   )
			
 
				 }
			
 
				 
			
 
				-function CalendarDropdown(props: DropdownProps) {
			
 
				-  const { options, value, onChange, 'aria-label': ariaLabel } = props
			
 
				-  const [open, setOpen] = React.useState(false)
			
 
				-  const containerRef = React.useRef<HTMLDivElement>(null)
			
 
				-  const listRef = React.useRef<HTMLDivElement>(null)
			
 
				-
			
 
				-  const selectedOption = options?.find((opt) => opt.value === value)
			
 
				-
			
 
				-  // Handle all events in a single effect
			
 
				-  React.useEffect(() => {
			
 
				-    if (!open) return
			
 
				-
			
 
				-    // Scroll to selected option
			
 
				-    const selectedEl = listRef.current?.querySelector('[data-selected="true"]')
			
 
				-    selectedEl?.scrollIntoView({ block: 'center' })
			
 
				-
			
 
				-    // Event handlers
			
 
				-    const onClickOutside = (e: MouseEvent) => {
			
 
				-      if (!containerRef.current?.contains(e.target as Node)) setOpen(false)
			
 
				-    }
			
 
				-    const onKeyDown = (e: KeyboardEvent) => {
			
 
				-      if (e.key === 'Escape') setOpen(false)
			
 
				-    }
			
 
				-
			
 
				-    document.addEventListener('mousedown', onClickOutside)
			
 
				-    document.addEventListener('keydown', onKeyDown)
			
 
				-    return () => {
			
 
				-      document.removeEventListener('mousedown', onClickOutside)
			
 
				-      document.removeEventListener('keydown', onKeyDown)
			
 
				-    }
			
 
				-  }, [open])
			
 
				-
			
 
				-  const handleSelect = (optValue: number) => {
			
 
				-    onChange?.({
			
 
				-      target: { value: String(optValue) },
			
 
				-    } as React.ChangeEvent<HTMLSelectElement>)
			
 
				-    setOpen(false)
			
 
				-  }
			
 
				-
			
 
				-  return (
			
 
				-    <div ref={containerRef} className='relative'>
			
 
				-      <Button
			
 
				-        variant='ghost'
			
 
				-        size='sm'
			
 
				-        aria-label={ariaLabel}
			
 
				-        aria-expanded={open}
			
 
				-        onClick={() => setOpen((v) => !v)}
			
 
				-        className='h-8 gap-1 px-2 font-medium'
			
 
				-      >
			
 
				-        {selectedOption?.label}
			
 
				-        <ChevronDownIcon
			
 
				-          className={cn(
			
 
				-            'size-3.5 opacity-50 transition-transform',
			
 
				-            open && 'rotate-180'
			
 
				-          )}
			
 
				-        />
			
 
				-      </Button>
			
 
				-
			
 
				-      {open && (
			
 
				-        <div className='bg-popover text-popover-foreground absolute top-full left-1/2 z-50 mt-1 min-w-max -translate-x-1/2 rounded-md border shadow-md'>
			
 
				-          <div
			
 
				-            ref={listRef}
			
 
				-            className='max-h-60 overflow-y-auto p-1'
			
 
				-            onWheel={(e) => e.stopPropagation()}
			
 
				-          >
			
 
				-            {options?.map((opt) => (
			
 
				-              <button
			
 
				-                key={opt.value}
			
 
				-                type='button'
			
 
				-                disabled={opt.disabled}
			
 
				-                data-selected={opt.value === value}
			
 
				-                onClick={() => handleSelect(opt.value)}
			
 
				-                className={cn(
			
 
				-                  'hover:bg-accent hover:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm whitespace-nowrap outline-hidden select-none',
			
 
				-                  opt.disabled && 'pointer-events-none opacity-50',
			
 
				-                  opt.value === value && 'bg-accent text-accent-foreground'
			
 
				-                )}
			
 
				-              >
			
 
				-                {opt.label}
			
 
				-                {opt.value === value && (
			
 
				-                  <CheckIcon className='absolute right-2 size-4' />
			
 
				-                )}
			
 
				-              </button>
			
 
				-            ))}
			
 
				-          </div>
			
 
				-        </div>
			
 
				-      )}
			
 
				-    </div>
			
 
				-  )
			
 
				-}
			
 
				-
			
 
				-export { Calendar, CalendarDayButton, CalendarDropdown }
			
 
				+export { Calendar, CalendarDayButton }
			
--- a/web/default/src/components/ui/card.tsx
+++ b/web/default/src/components/ui/card.tsx
@@ -1,12 +1,17 @@
 
				 import * as React from 'react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				-function Card({ className, ...props }: React.ComponentProps<'div'>) {
			
 
				+function Card({
			
 
				+  className,
			
 
				+  size = 'default',
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'> & { size?: 'default' | 'sm' }) {
			
 
				   return (
			
 
				     <div
			
 
				       data-slot='card'
			
 
				+      data-size={size}
			
 
				       className={cn(
			
 
				-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
			
 
				+        'group/card bg-card text-card-foreground ring-foreground/10 flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -19,7 +24,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
 
				     <div
			
 
				       data-slot='card-header'
			
 
				       className={cn(
			
 
				-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
			
 
				+        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -31,7 +36,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<'div'>) {
 
				   return (
			
 
				     <div
			
 
				       data-slot='card-title'
			
 
				-      className={cn('leading-none font-semibold', className)}
			
 
				+      className={cn(
			
 
				+        'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -64,7 +72,7 @@ function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
 
				   return (
			
 
				     <div
			
 
				       data-slot='card-content'
			
 
				-      className={cn('px-6', className)}
			
 
				+      className={cn('px-4 group-data-[size=sm]/card:px-3', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -74,7 +82,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
 
				   return (
			
 
				     <div
			
 
				       data-slot='card-footer'
			
 
				-      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
			
 
				+      className={cn(
			
 
				+        'bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
--- a/web/default/src/components/ui/carousel.tsx
+++ b/web/default/src/components/ui/carousel.tsx
@@ -1,10 +1,11 @@
 
				 'use client'
			
 
				 
			
 
				 import * as React from 'react'
			
 
				+import { ArrowLeft01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import useEmblaCarousel, {
			
 
				   type UseEmblaCarouselType,
			
 
				 } from 'embla-carousel-react'
			
 
				-import { ArrowLeft, ArrowRight } from 'lucide-react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { Button } from '@/components/ui/button'
			
 
				 
			
@@ -173,7 +174,7 @@ function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
 
				 function CarouselPrevious({
			
 
				   className,
			
 
				   variant = 'outline',
			
 
				-  size = 'icon',
			
 
				+  size = 'icon-sm',
			
 
				   ...props
			
 
				 }: React.ComponentProps<typeof Button>) {
			
 
				   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
			
@@ -184,7 +185,7 @@ function CarouselPrevious({
 
				       variant={variant}
			
 
				       size={size}
			
 
				       className={cn(
			
 
				-        'absolute size-8 rounded-full',
			
 
				+        'absolute touch-manipulation rounded-full',
			
 
				         orientation === 'horizontal'
			
 
				           ? 'top-1/2 -left-12 -translate-y-1/2'
			
 
				           : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
			
@@ -194,7 +195,7 @@ function CarouselPrevious({
 
				       onClick={scrollPrev}
			
 
				       {...props}
			
 
				     >
			
 
				-      <ArrowLeft />
			
 
				+      <HugeiconsIcon icon={ArrowLeft01Icon} strokeWidth={2} />
			
 
				       <span className='sr-only'>Previous slide</span>
			
 
				     </Button>
			
 
				   )
			
@@ -203,7 +204,7 @@ function CarouselPrevious({
 
				 function CarouselNext({
			
 
				   className,
			
 
				   variant = 'outline',
			
 
				-  size = 'icon',
			
 
				+  size = 'icon-sm',
			
 
				   ...props
			
 
				 }: React.ComponentProps<typeof Button>) {
			
 
				   const { orientation, scrollNext, canScrollNext } = useCarousel()
			
@@ -214,7 +215,7 @@ function CarouselNext({
 
				       variant={variant}
			
 
				       size={size}
			
 
				       className={cn(
			
 
				-        'absolute size-8 rounded-full',
			
 
				+        'absolute touch-manipulation rounded-full',
			
 
				         orientation === 'horizontal'
			
 
				           ? 'top-1/2 -right-12 -translate-y-1/2'
			
 
				           : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
			
@@ -224,7 +225,7 @@ function CarouselNext({
 
				       onClick={scrollNext}
			
 
				       {...props}
			
 
				     >
			
 
				-      <ArrowRight />
			
 
				+      <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />
			
 
				       <span className='sr-only'>Next slide</span>
			
 
				     </Button>
			
 
				   )
			
@@ -237,4 +238,5 @@ export {
 
				   CarouselItem,
			
 
				   CarouselPrevious,
			
 
				   CarouselNext,
			
 
				+  useCarousel,
			
 
				 }
			
--- a/web/default/src/components/ui/chart.tsx
+++ b/web/default/src/components/ui/chart.tsx
@@ -0,0 +1,370 @@
 
				+import * as React from 'react'
			
 
				+import * as RechartsPrimitive from 'recharts'
			
 
				+import type { TooltipValueType } from 'recharts'
			
 
				+import { cn } from '@/lib/utils'
			
 
				+
			
 
				+// Format: { THEME_NAME: CSS_SELECTOR }
			
 
				+const THEMES = { light: '', dark: '.dark' } as const
			
 
				+
			
 
				+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
			
 
				+type TooltipNameType = number | string
			
 
				+
			
 
				+export type ChartConfig = Record<
			
 
				+  string,
			
 
				+  {
			
 
				+    label?: React.ReactNode
			
 
				+    icon?: React.ComponentType
			
 
				+  } & (
			
 
				+    | { color?: string; theme?: never }
			
 
				+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
			
 
				+  )
			
 
				+>
			
 
				+
			
 
				+type ChartContextProps = {
			
 
				+  config: ChartConfig
			
 
				+}
			
 
				+
			
 
				+const ChartContext = React.createContext<ChartContextProps | null>(null)
			
 
				+
			
 
				+function useChart() {
			
 
				+  const context = React.useContext(ChartContext)
			
 
				+
			
 
				+  if (!context) {
			
 
				+    throw new Error('useChart must be used within a <ChartContainer />')
			
 
				+  }
			
 
				+
			
 
				+  return context
			
 
				+}
			
 
				+
			
 
				+function ChartContainer({
			
 
				+  id,
			
 
				+  className,
			
 
				+  children,
			
 
				+  config,
			
 
				+  initialDimension = INITIAL_DIMENSION,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'> & {
			
 
				+  config: ChartConfig
			
 
				+  children: React.ComponentProps<
			
 
				+    typeof RechartsPrimitive.ResponsiveContainer
			
 
				+  >['children']
			
 
				+  initialDimension?: {
			
 
				+    width: number
			
 
				+    height: number
			
 
				+  }
			
 
				+}) {
			
 
				+  const uniqueId = React.useId()
			
 
				+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`
			
 
				+
			
 
				+  return (
			
 
				+    <ChartContext.Provider value={{ config }}>
			
 
				+      <div
			
 
				+        data-slot='chart'
			
 
				+        data-chart={chartId}
			
 
				+        className={cn(
			
 
				+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        <ChartStyle id={chartId} config={config} />
			
 
				+        <RechartsPrimitive.ResponsiveContainer
			
 
				+          initialDimension={initialDimension}
			
 
				+        >
			
 
				+          {children}
			
 
				+        </RechartsPrimitive.ResponsiveContainer>
			
 
				+      </div>
			
 
				+    </ChartContext.Provider>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
			
 
				+  const colorConfig = Object.entries(config).filter(
			
 
				+    ([, config]) => config.theme ?? config.color
			
 
				+  )
			
 
				+
			
 
				+  if (!colorConfig.length) {
			
 
				+    return null
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <style
			
 
				+      dangerouslySetInnerHTML={{
			
 
				+        __html: Object.entries(THEMES)
			
 
				+          .map(
			
 
				+            ([theme, prefix]) => `
			
 
				+${prefix} [data-chart=${id}] {
			
 
				+${colorConfig
			
 
				+  .map(([key, itemConfig]) => {
			
 
				+    const color =
			
 
				+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
			
 
				+      itemConfig.color
			
 
				+    return color ? `  --color-${key}: ${color};` : null
			
 
				+  })
			
 
				+  .join('\n')}
			
 
				+}
			
 
				+`
			
 
				+          )
			
 
				+          .join('\n'),
			
 
				+      }}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const ChartTooltip = RechartsPrimitive.Tooltip
			
 
				+
			
 
				+function ChartTooltipContent({
			
 
				+  active,
			
 
				+  payload,
			
 
				+  className,
			
 
				+  indicator = 'dot',
			
 
				+  hideLabel = false,
			
 
				+  hideIndicator = false,
			
 
				+  label,
			
 
				+  labelFormatter,
			
 
				+  labelClassName,
			
 
				+  formatter,
			
 
				+  color,
			
 
				+  nameKey,
			
 
				+  labelKey,
			
 
				+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
			
 
				+  React.ComponentProps<'div'> & {
			
 
				+    hideLabel?: boolean
			
 
				+    hideIndicator?: boolean
			
 
				+    indicator?: 'line' | 'dot' | 'dashed'
			
 
				+    nameKey?: string
			
 
				+    labelKey?: string
			
 
				+  } & Omit<
			
 
				+    RechartsPrimitive.DefaultTooltipContentProps<
			
 
				+      TooltipValueType,
			
 
				+      TooltipNameType
			
 
				+    >,
			
 
				+    'accessibilityLayer'
			
 
				+  >) {
			
 
				+  const { config } = useChart()
			
 
				+
			
 
				+  const tooltipLabel = React.useMemo(() => {
			
 
				+    if (hideLabel || !payload?.length) {
			
 
				+      return null
			
 
				+    }
			
 
				+
			
 
				+    const [item] = payload
			
 
				+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`
			
 
				+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
			
 
				+    const value =
			
 
				+      !labelKey && typeof label === 'string'
			
 
				+        ? (config[label]?.label ?? label)
			
 
				+        : itemConfig?.label
			
 
				+
			
 
				+    if (labelFormatter) {
			
 
				+      return (
			
 
				+        <div className={cn('font-medium', labelClassName)}>
			
 
				+          {labelFormatter(value, payload)}
			
 
				+        </div>
			
 
				+      )
			
 
				+    }
			
 
				+
			
 
				+    if (!value) {
			
 
				+      return null
			
 
				+    }
			
 
				+
			
 
				+    return <div className={cn('font-medium', labelClassName)}>{value}</div>
			
 
				+  }, [
			
 
				+    label,
			
 
				+    labelFormatter,
			
 
				+    payload,
			
 
				+    hideLabel,
			
 
				+    labelClassName,
			
 
				+    config,
			
 
				+    labelKey,
			
 
				+  ])
			
 
				+
			
 
				+  if (!active || !payload?.length) {
			
 
				+    return null
			
 
				+  }
			
 
				+
			
 
				+  const nestLabel = payload.length === 1 && indicator !== 'dot'
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={cn(
			
 
				+        'border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
			
 
				+        className
			
 
				+      )}
			
 
				+    >
			
 
				+      {!nestLabel ? tooltipLabel : null}
			
 
				+      <div className='grid gap-1.5'>
			
 
				+        {payload
			
 
				+          .filter((item) => item.type !== 'none')
			
 
				+          .map((item, index) => {
			
 
				+            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`
			
 
				+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
			
 
				+            const indicatorColor = color ?? item.payload?.fill ?? item.color
			
 
				+
			
 
				+            return (
			
 
				+              <div
			
 
				+                key={index}
			
 
				+                className={cn(
			
 
				+                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
			
 
				+                  indicator === 'dot' && 'items-center'
			
 
				+                )}
			
 
				+              >
			
 
				+                {formatter && item?.value !== undefined && item.name ? (
			
 
				+                  formatter(item.value, item.name, item, index, item.payload)
			
 
				+                ) : (
			
 
				+                  <>
			
 
				+                    {itemConfig?.icon ? (
			
 
				+                      <itemConfig.icon />
			
 
				+                    ) : (
			
 
				+                      !hideIndicator && (
			
 
				+                        <div
			
 
				+                          className={cn(
			
 
				+                            'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
			
 
				+                            {
			
 
				+                              'h-2.5 w-2.5': indicator === 'dot',
			
 
				+                              'w-1': indicator === 'line',
			
 
				+                              'w-0 border-[1.5px] border-dashed bg-transparent':
			
 
				+                                indicator === 'dashed',
			
 
				+                              'my-0.5': nestLabel && indicator === 'dashed',
			
 
				+                            }
			
 
				+                          )}
			
 
				+                          style={
			
 
				+                            {
			
 
				+                              '--color-bg': indicatorColor,
			
 
				+                              '--color-border': indicatorColor,
			
 
				+                            } as React.CSSProperties
			
 
				+                          }
			
 
				+                        />
			
 
				+                      )
			
 
				+                    )}
			
 
				+                    <div
			
 
				+                      className={cn(
			
 
				+                        'flex flex-1 justify-between leading-none',
			
 
				+                        nestLabel ? 'items-end' : 'items-center'
			
 
				+                      )}
			
 
				+                    >
			
 
				+                      <div className='grid gap-1.5'>
			
 
				+                        {nestLabel ? tooltipLabel : null}
			
 
				+                        <span className='text-muted-foreground'>
			
 
				+                          {itemConfig?.label ?? item.name}
			
 
				+                        </span>
			
 
				+                      </div>
			
 
				+                      {item.value != null && (
			
 
				+                        <span className='text-foreground font-mono font-medium tabular-nums'>
			
 
				+                          {typeof item.value === 'number'
			
 
				+                            ? item.value.toLocaleString()
			
 
				+                            : String(item.value)}
			
 
				+                        </span>
			
 
				+                      )}
			
 
				+                    </div>
			
 
				+                  </>
			
 
				+                )}
			
 
				+              </div>
			
 
				+            )
			
 
				+          })}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const ChartLegend = RechartsPrimitive.Legend
			
 
				+
			
 
				+function ChartLegendContent({
			
 
				+  className,
			
 
				+  hideIcon = false,
			
 
				+  payload,
			
 
				+  verticalAlign = 'bottom',
			
 
				+  nameKey,
			
 
				+}: React.ComponentProps<'div'> & {
			
 
				+  hideIcon?: boolean
			
 
				+  nameKey?: string
			
 
				+} & RechartsPrimitive.DefaultLegendContentProps) {
			
 
				+  const { config } = useChart()
			
 
				+
			
 
				+  if (!payload?.length) {
			
 
				+    return null
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={cn(
			
 
				+        'flex items-center justify-center gap-4',
			
 
				+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
			
 
				+        className
			
 
				+      )}
			
 
				+    >
			
 
				+      {payload
			
 
				+        .filter((item) => item.type !== 'none')
			
 
				+        .map((item, index) => {
			
 
				+          const key = `${nameKey ?? item.dataKey ?? 'value'}`
			
 
				+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
			
 
				+
			
 
				+          return (
			
 
				+            <div
			
 
				+              key={index}
			
 
				+              className={cn(
			
 
				+                '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3'
			
 
				+              )}
			
 
				+            >
			
 
				+              {itemConfig?.icon && !hideIcon ? (
			
 
				+                <itemConfig.icon />
			
 
				+              ) : (
			
 
				+                <div
			
 
				+                  className='h-2 w-2 shrink-0 rounded-[2px]'
			
 
				+                  style={{
			
 
				+                    backgroundColor: item.color,
			
 
				+                  }}
			
 
				+                />
			
 
				+              )}
			
 
				+              {itemConfig?.label}
			
 
				+            </div>
			
 
				+          )
			
 
				+        })}
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function getPayloadConfigFromPayload(
			
 
				+  config: ChartConfig,
			
 
				+  payload: unknown,
			
 
				+  key: string
			
 
				+) {
			
 
				+  if (typeof payload !== 'object' || payload === null) {
			
 
				+    return undefined
			
 
				+  }
			
 
				+
			
 
				+  const payloadPayload =
			
 
				+    'payload' in payload &&
			
 
				+    typeof payload.payload === 'object' &&
			
 
				+    payload.payload !== null
			
 
				+      ? payload.payload
			
 
				+      : undefined
			
 
				+
			
 
				+  let configLabelKey: string = key
			
 
				+
			
 
				+  if (
			
 
				+    key in payload &&
			
 
				+    typeof payload[key as keyof typeof payload] === 'string'
			
 
				+  ) {
			
 
				+    configLabelKey = payload[key as keyof typeof payload] as string
			
 
				+  } else if (
			
 
				+    payloadPayload &&
			
 
				+    key in payloadPayload &&
			
 
				+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
			
 
				+  ) {
			
 
				+    configLabelKey = payloadPayload[
			
 
				+      key as keyof typeof payloadPayload
			
 
				+    ] as string
			
 
				+  }
			
 
				+
			
 
				+  return configLabelKey in config ? config[configLabelKey] : config[key]
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  ChartContainer,
			
 
				+  ChartTooltip,
			
 
				+  ChartTooltipContent,
			
 
				+  ChartLegend,
			
 
				+  ChartLegendContent,
			
 
				+  ChartStyle,
			
 
				+}
			
--- a/web/default/src/components/ui/checkbox.tsx
+++ b/web/default/src/components/ui/checkbox.tsx
@@ -1,26 +1,25 @@
 
				-import * as React from 'react'
			
 
				-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
			
 
				-import { CheckIcon } from 'lucide-react'
			
 
				+'use client'
			
 
				+
			
 
				+import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'
			
 
				+import { Tick02Icon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				-function Checkbox({
			
 
				-  className,
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
			
 
				+function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
			
 
				   return (
			
 
				     <CheckboxPrimitive.Root
			
 
				       data-slot='checkbox'
			
 
				       className={cn(
			
 
				-        'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
			
 
				+        'peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive 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 dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
 
				     >
			
 
				       <CheckboxPrimitive.Indicator
			
 
				         data-slot='checkbox-indicator'
			
 
				-        className='flex items-center justify-center text-current transition-none'
			
 
				+        className='grid place-content-center text-current transition-none [&>svg]:size-3.5'
			
 
				       >
			
 
				-        <CheckIcon className='size-3.5' />
			
 
				+        <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
			
 
				       </CheckboxPrimitive.Indicator>
			
 
				     </CheckboxPrimitive.Root>
			
 
				   )
			
--- a/web/default/src/components/ui/collapsible.tsx
+++ b/web/default/src/components/ui/collapsible.tsx
@@ -1,32 +1,18 @@
 
				-'use client'
			
 
				+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
			
 
				 
			
 
				-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
			
 
				-
			
 
				-function Collapsible({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
			
 
				+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
			
 
				   return <CollapsiblePrimitive.Root data-slot='collapsible' {...props} />
			
 
				 }
			
 
				 
			
 
				-function CollapsibleTrigger({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
			
 
				+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
			
 
				   return (
			
 
				-    <CollapsiblePrimitive.CollapsibleTrigger
			
 
				-      data-slot='collapsible-trigger'
			
 
				-      {...props}
			
 
				-    />
			
 
				+    <CollapsiblePrimitive.Trigger data-slot='collapsible-trigger' {...props} />
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function CollapsibleContent({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
			
 
				+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
			
 
				   return (
			
 
				-    <CollapsiblePrimitive.CollapsibleContent
			
 
				-      data-slot='collapsible-content'
			
 
				-      {...props}
			
 
				-    />
			
 
				+    <CollapsiblePrimitive.Panel data-slot='collapsible-content' {...props} />
			
 
				   )
			
 
				 }
			
 
				 
			
--- a/web/default/src/components/ui/combobox.tsx
+++ b/web/default/src/components/ui/combobox.tsx
@@ -1,153 +1,358 @@
 
				 import * as React from 'react'
			
 
				-import { Check, ChevronsUpDown } from 'lucide-react'
			
 
				-import { useTranslation } from 'react-i18next'
			
 
				+import { Combobox as ComboboxPrimitive } from '@base-ui/react'
			
 
				+import {
			
 
				+  ArrowDown01Icon,
			
 
				+  Cancel01Icon,
			
 
				+  Tick02Icon,
			
 
				+} from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { Button } from '@/components/ui/button'
			
 
				 import {
			
 
				-  Command,
			
 
				-  CommandEmpty,
			
 
				-  CommandGroup,
			
 
				-  CommandInput,
			
 
				-  CommandItem,
			
 
				-  CommandList,
			
 
				-} from '@/components/ui/command'
			
 
				+  ComboboxInput as LegacyComboboxInput,
			
 
				+  type ComboboxInputOption,
			
 
				+} from '@/components/ui/combobox-input'
			
 
				 import {
			
 
				-  Popover,
			
 
				-  PopoverContent,
			
 
				-  PopoverTrigger,
			
 
				-} from '@/components/ui/popover'
			
 
				-
			
 
				-export type ComboboxOption = {
			
 
				-  value: string
			
 
				-  label: string
			
 
				-  icon?: React.ReactNode
			
 
				-}
			
 
				+  InputGroup,
			
 
				+  InputGroupAddon,
			
 
				+  InputGroupButton,
			
 
				+  InputGroupInput,
			
 
				+} from '@/components/ui/input-group'
			
 
				 
			
 
				-interface ComboboxProps {
			
 
				-  options: ComboboxOption[]
			
 
				+type LegacyComboboxProps = {
			
 
				+  options: ComboboxInputOption[]
			
 
				   value?: string
			
 
				-  onValueChange: (value: string) => void
			
 
				+  onValueChange?: (value: string | null) => void
			
 
				   placeholder?: string
			
 
				   searchPlaceholder?: string
			
 
				   emptyText?: string
			
 
				-  className?: string
			
 
				   allowCustomValue?: boolean
			
 
				+  className?: string
			
 
				+  id?: string
			
 
				 }
			
 
				 
			
 
				-export function Combobox({
			
 
				-  options,
			
 
				-  value,
			
 
				-  onValueChange,
			
 
				-  placeholder = 'Select option...',
			
 
				-  searchPlaceholder = 'Search...',
			
 
				-  emptyText = 'No option found.',
			
 
				-  className,
			
 
				-  allowCustomValue = false,
			
 
				-}: ComboboxProps) {
			
 
				-  const { t } = useTranslation()
			
 
				-  const [open, setOpen] = React.useState(false)
			
 
				-  const [searchValue, setSearchValue] = React.useState('')
			
 
				-
			
 
				-  const selectedOption = options.find((option) => option.value === value)
			
 
				-  const displayValue = selectedOption?.label || value || placeholder
			
 
				-
			
 
				-  const filteredOptions = React.useMemo(() => {
			
 
				-    if (!searchValue) return options
			
 
				-    const search = searchValue.toLowerCase()
			
 
				-    return options.filter(
			
 
				-      (option) =>
			
 
				-        option.label.toLowerCase().includes(search) ||
			
 
				-        option.value.toLowerCase().includes(search)
			
 
				+function Combobox(props: LegacyComboboxProps): React.ReactElement
			
 
				+function Combobox<Value, Multiple extends boolean | undefined = false>(
			
 
				+  props: ComboboxPrimitive.Root.Props<Value, Multiple>
			
 
				+): React.ReactElement
			
 
				+function Combobox(
			
 
				+  props:
			
 
				+    | ComboboxPrimitive.Root.Props<unknown, boolean | undefined>
			
 
				+    | LegacyComboboxProps
			
 
				+) {
			
 
				+  if ('options' in props) {
			
 
				+    return (
			
 
				+      <LegacyComboboxInput
			
 
				+        id={props.id}
			
 
				+        options={props.options}
			
 
				+        value={props.value ?? ''}
			
 
				+        onValueChange={(value) => props.onValueChange?.(value)}
			
 
				+        placeholder={props.searchPlaceholder ?? props.placeholder}
			
 
				+        emptyText={props.emptyText}
			
 
				+        className={props.className}
			
 
				+      />
			
 
				     )
			
 
				-  }, [options, searchValue])
			
 
				-
			
 
				-  const handleSelect = (selectedValue: string) => {
			
 
				-    onValueChange(selectedValue === value ? '' : selectedValue)
			
 
				-    setOpen(false)
			
 
				-    setSearchValue('')
			
 
				   }
			
 
				 
			
 
				-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
			
 
				-    if (allowCustomValue && e.key === 'Enter' && searchValue) {
			
 
				-      e.preventDefault()
			
 
				-      // Check if search value matches any existing option
			
 
				-      const exactMatch = options.find(
			
 
				-        (opt) => opt.value.toLowerCase() === searchValue.toLowerCase()
			
 
				-      )
			
 
				-      if (exactMatch) {
			
 
				-        handleSelect(exactMatch.value)
			
 
				-      } else {
			
 
				-        // Use custom value
			
 
				-        onValueChange(searchValue)
			
 
				-        setOpen(false)
			
 
				-        setSearchValue('')
			
 
				-      }
			
 
				-    }
			
 
				-  }
			
 
				+  return <ComboboxPrimitive.Root {...props} />
			
 
				+}
			
 
				+
			
 
				+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
			
 
				+  return <ComboboxPrimitive.Value data-slot='combobox-value' {...props} />
			
 
				+}
			
 
				 
			
 
				+function ComboboxTrigger({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.Trigger.Props) {
			
 
				   return (
			
 
				-    <Popover open={open} onOpenChange={setOpen}>
			
 
				-      <PopoverTrigger asChild>
			
 
				-        <Button
			
 
				-          variant='outline'
			
 
				-          role='combobox'
			
 
				-          aria-expanded={open}
			
 
				-          className={cn('w-full justify-between', className)}
			
 
				-        >
			
 
				-          <span className='truncate'>
			
 
				-            {selectedOption?.icon && (
			
 
				-              <span className='mr-2 inline-block'>{selectedOption.icon}</span>
			
 
				-            )}
			
 
				-            {displayValue}
			
 
				-          </span>
			
 
				-          <ChevronsUpDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
			
 
				-        </Button>
			
 
				-      </PopoverTrigger>
			
 
				-      <PopoverContent
			
 
				-        className='w-[var(--radix-popover-trigger-width)] p-0'
			
 
				-        onWheel={(e) => e.stopPropagation()}
			
 
				-        onTouchMove={(e) => e.stopPropagation()}
			
 
				-        onPointerDown={(e) => e.stopPropagation()}
			
 
				+    <ComboboxPrimitive.Trigger
			
 
				+      data-slot='combobox-trigger'
			
 
				+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      <HugeiconsIcon
			
 
				+        icon={ArrowDown01Icon}
			
 
				+        strokeWidth={2}
			
 
				+        className='text-muted-foreground pointer-events-none size-4'
			
 
				+      />
			
 
				+    </ComboboxPrimitive.Trigger>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Clear
			
 
				+      data-slot='combobox-clear'
			
 
				+      render={<InputGroupButton variant='ghost' size='icon-xs' />}
			
 
				+      className={cn(className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <HugeiconsIcon
			
 
				+        icon={Cancel01Icon}
			
 
				+        strokeWidth={2}
			
 
				+        className='pointer-events-none'
			
 
				+      />
			
 
				+    </ComboboxPrimitive.Clear>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxInput({
			
 
				+  className,
			
 
				+  children,
			
 
				+  disabled = false,
			
 
				+  showTrigger = true,
			
 
				+  showClear = false,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.Input.Props & {
			
 
				+  showTrigger?: boolean
			
 
				+  showClear?: boolean
			
 
				+}) {
			
 
				+  return (
			
 
				+    <InputGroup className={cn('w-auto', className)}>
			
 
				+      <ComboboxPrimitive.Input
			
 
				+        render={<InputGroupInput disabled={disabled} />}
			
 
				+        {...props}
			
 
				+      />
			
 
				+      <InputGroupAddon align='inline-end'>
			
 
				+        {showTrigger && (
			
 
				+          <InputGroupButton
			
 
				+            size='icon-xs'
			
 
				+            variant='ghost'
			
 
				+            render={<ComboboxTrigger />}
			
 
				+            data-slot='input-group-button'
			
 
				+            className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
			
 
				+            disabled={disabled}
			
 
				+          />
			
 
				+        )}
			
 
				+        {showClear && <ComboboxClear disabled={disabled} />}
			
 
				+      </InputGroupAddon>
			
 
				+      {children}
			
 
				+    </InputGroup>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxContent({
			
 
				+  className,
			
 
				+  side = 'bottom',
			
 
				+  sideOffset = 6,
			
 
				+  align = 'start',
			
 
				+  alignOffset = 0,
			
 
				+  anchor,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.Popup.Props &
			
 
				+  Pick<
			
 
				+    ComboboxPrimitive.Positioner.Props,
			
 
				+    'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
			
 
				+  >) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Portal>
			
 
				+      <ComboboxPrimitive.Positioner
			
 
				+        side={side}
			
 
				+        sideOffset={sideOffset}
			
 
				+        align={align}
			
 
				+        alignOffset={alignOffset}
			
 
				+        anchor={anchor}
			
 
				+        className='isolate z-50'
			
 
				+      >
			
 
				+        <ComboboxPrimitive.Popup
			
 
				+          data-slot='combobox-content'
			
 
				+          data-chips={!!anchor}
			
 
				+          className={cn(
			
 
				+            'dark group/combobox-content bg-popover text-popover-foreground ring-foreground/10 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=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 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 relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none',
			
 
				+            className
			
 
				+          )}
			
 
				+          {...props}
			
 
				+        />
			
 
				+      </ComboboxPrimitive.Positioner>
			
 
				+    </ComboboxPrimitive.Portal>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.List
			
 
				+      data-slot='combobox-list'
			
 
				+      className={cn(
			
 
				+        'no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.Item.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Item
			
 
				+      data-slot='combobox-item'
			
 
				+      className={cn(
			
 
				+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      <ComboboxPrimitive.ItemIndicator
			
 
				+        render={
			
 
				+          <span className='pointer-events-none absolute right-2 flex size-4 items-center justify-center' />
			
 
				+        }
			
 
				       >
			
 
				-        <Command shouldFilter={false}>
			
 
				-          <CommandInput
			
 
				-            placeholder={searchPlaceholder}
			
 
				-            value={searchValue}
			
 
				-            onValueChange={setSearchValue}
			
 
				-            onKeyDown={handleKeyDown}
			
 
				+        <HugeiconsIcon
			
 
				+          icon={Tick02Icon}
			
 
				+          strokeWidth={2}
			
 
				+          className='pointer-events-none'
			
 
				+        />
			
 
				+      </ComboboxPrimitive.ItemIndicator>
			
 
				+    </ComboboxPrimitive.Item>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Group
			
 
				+      data-slot='combobox-group'
			
 
				+      className={cn(className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxLabel({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.GroupLabel.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.GroupLabel
			
 
				+      data-slot='combobox-label'
			
 
				+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Collection data-slot='combobox-collection' {...props} />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Empty
			
 
				+      data-slot='combobox-empty'
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.Separator.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Separator
			
 
				+      data-slot='combobox-separator'
			
 
				+      className={cn('bg-border -mx-1 my-1 h-px', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxChips({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
			
 
				+  ComboboxPrimitive.Chips.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Chips
			
 
				+      data-slot='combobox-chips'
			
 
				+      className={cn(
			
 
				+        'border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxChip({
			
 
				+  className,
			
 
				+  children,
			
 
				+  showRemove = true,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.Chip.Props & {
			
 
				+  showRemove?: boolean
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Chip
			
 
				+      data-slot='combobox-chip'
			
 
				+      className={cn(
			
 
				+        'bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      {showRemove && (
			
 
				+        <ComboboxPrimitive.ChipRemove
			
 
				+          render={<Button variant='ghost' size='icon-xs' />}
			
 
				+          className='-ml-1 opacity-50 hover:opacity-100'
			
 
				+          data-slot='combobox-chip-remove'
			
 
				+        >
			
 
				+          <HugeiconsIcon
			
 
				+            icon={Cancel01Icon}
			
 
				+            strokeWidth={2}
			
 
				+            className='pointer-events-none'
			
 
				           />
			
 
				-          <CommandList>
			
 
				-            <CommandEmpty>
			
 
				-              {emptyText}
			
 
				-              {allowCustomValue && searchValue && (
			
 
				-                <div className='mt-2 text-xs'>
			
 
				-                  {t('Press Enter to use "{{value}}"', {
			
 
				-                    value: searchValue,
			
 
				-                  })}
			
 
				-                </div>
			
 
				-              )}
			
 
				-            </CommandEmpty>
			
 
				-            <CommandGroup>
			
 
				-              {filteredOptions.map((option) => (
			
 
				-                <CommandItem
			
 
				-                  key={option.value}
			
 
				-                  value={option.value}
			
 
				-                  onSelect={handleSelect}
			
 
				-                >
			
 
				-                  <Check
			
 
				-                    className={cn(
			
 
				-                      'mr-2 h-4 w-4',
			
 
				-                      value === option.value ? 'opacity-100' : 'opacity-0'
			
 
				-                    )}
			
 
				-                  />
			
 
				-                  {option.icon && <span className='mr-2'>{option.icon}</span>}
			
 
				-                  {option.label}
			
 
				-                </CommandItem>
			
 
				-              ))}
			
 
				-            </CommandGroup>
			
 
				-          </CommandList>
			
 
				-        </Command>
			
 
				-      </PopoverContent>
			
 
				-    </Popover>
			
 
				+        </ComboboxPrimitive.ChipRemove>
			
 
				+      )}
			
 
				+    </ComboboxPrimitive.Chip>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ComboboxChipsInput({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: ComboboxPrimitive.Input.Props) {
			
 
				+  return (
			
 
				+    <ComboboxPrimitive.Input
			
 
				+      data-slot='combobox-chip-input'
			
 
				+      className={cn('min-w-16 flex-1 outline-none', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				   )
			
 
				 }
			
 
				+
			
 
				+function useComboboxAnchor() {
			
 
				+  return React.useRef<HTMLDivElement | null>(null)
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Combobox,
			
 
				+  ComboboxInput,
			
 
				+  ComboboxContent,
			
 
				+  ComboboxList,
			
 
				+  ComboboxItem,
			
 
				+  ComboboxGroup,
			
 
				+  ComboboxLabel,
			
 
				+  ComboboxCollection,
			
 
				+  ComboboxEmpty,
			
 
				+  ComboboxSeparator,
			
 
				+  ComboboxChips,
			
 
				+  ComboboxChip,
			
 
				+  ComboboxChipsInput,
			
 
				+  ComboboxTrigger,
			
 
				+  ComboboxValue,
			
 
				+  useComboboxAnchor,
			
 
				+}
			
--- a/web/default/src/components/ui/command.tsx
+++ b/web/default/src/components/ui/command.tsx
@@ -1,6 +1,9 @@
 
				+'use client'
			
 
				+
			
 
				 import * as React from 'react'
			
 
				+import { SearchIcon, Tick02Icon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import { Command as CommandPrimitive } from 'cmdk'
			
 
				-import { SearchIcon } from 'lucide-react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import {
			
 
				   Dialog,
			
@@ -9,6 +12,7 @@ import {
 
				   DialogHeader,
			
 
				   DialogTitle,
			
 
				 } from '@/components/ui/dialog'
			
 
				+import { InputGroup, InputGroupAddon } from '@/components/ui/input-group'
			
 
				 
			
 
				 function Command({
			
 
				   className,
			
@@ -18,7 +22,7 @@ function Command({
 
				     <CommandPrimitive
			
 
				       data-slot='command'
			
 
				       className={cn(
			
 
				-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
			
 
				+        'bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -31,13 +35,14 @@ function CommandDialog({
 
				   description = 'Search for a command to run...',
			
 
				   children,
			
 
				   className,
			
 
				-  showCloseButton = true,
			
 
				+  showCloseButton = false,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof Dialog> & {
			
 
				+}: Omit<React.ComponentProps<typeof Dialog>, 'children'> & {
			
 
				   title?: string
			
 
				   description?: string
			
 
				   className?: string
			
 
				   showCloseButton?: boolean
			
 
				+  children: React.ReactNode
			
 
				 }) {
			
 
				   return (
			
 
				     <Dialog {...props}>
			
@@ -46,12 +51,13 @@ function CommandDialog({
 
				         <DialogDescription>{description}</DialogDescription>
			
 
				       </DialogHeader>
			
 
				       <DialogContent
			
 
				-        className={cn('overflow-hidden p-0', className)}
			
 
				+        className={cn(
			
 
				+          'top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0',
			
 
				+          className
			
 
				+        )}
			
 
				         showCloseButton={showCloseButton}
			
 
				       >
			
 
				-        <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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>
			
 
				+        {children}
			
 
				       </DialogContent>
			
 
				     </Dialog>
			
 
				   )
			
@@ -62,19 +68,24 @@ function CommandInput({
 
				   ...props
			
 
				 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
			
 
				   return (
			
 
				-    <div
			
 
				-      data-slot='command-input-wrapper'
			
 
				-      className='flex h-9 items-center gap-2 border-b px-3'
			
 
				-    >
			
 
				-      <SearchIcon className='size-4 shrink-0 opacity-50' />
			
 
				-      <CommandPrimitive.Input
			
 
				-        data-slot='command-input'
			
 
				-        className={cn(
			
 
				-          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
			
 
				-          className
			
 
				-        )}
			
 
				-        {...props}
			
 
				-      />
			
 
				+    <div data-slot='command-input-wrapper' className='p-1 pb-0'>
			
 
				+      <InputGroup className='border-input/30 bg-input/30 h-8! rounded-lg! 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>
			
 
				+          <HugeiconsIcon
			
 
				+            icon={SearchIcon}
			
 
				+            strokeWidth={2}
			
 
				+            className='size-4 shrink-0 opacity-50'
			
 
				+          />
			
 
				+        </InputGroupAddon>
			
 
				+      </InputGroup>
			
 
				     </div>
			
 
				   )
			
 
				 }
			
@@ -87,7 +98,7 @@ function CommandList({
 
				     <CommandPrimitive.List
			
 
				       data-slot='command-list'
			
 
				       className={cn(
			
 
				-        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
			
 
				+        'no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -96,12 +107,13 @@ function CommandList({
 
				 }
			
 
				 
			
 
				 function CommandEmpty({
			
 
				+  className,
			
 
				   ...props
			
 
				 }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
			
 
				   return (
			
 
				     <CommandPrimitive.Empty
			
 
				       data-slot='command-empty'
			
 
				-      className='py-6 text-center text-sm'
			
 
				+      className={cn('py-6 text-center text-sm', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -115,7 +127,7 @@ function CommandGroup({
 
				     <CommandPrimitive.Group
			
 
				       data-slot='command-group'
			
 
				       className={cn(
			
 
				-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
			
 
				+        'text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -138,17 +150,25 @@ function CommandSeparator({
 
				 
			
 
				 function CommandItem({
			
 
				   className,
			
 
				+  children,
			
 
				   ...props
			
 
				 }: React.ComponentProps<typeof CommandPrimitive.Item>) {
			
 
				   return (
			
 
				     <CommandPrimitive.Item
			
 
				       data-slot='command-item'
			
 
				       className={cn(
			
 
				-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        "group/command-item data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
 
				-    />
			
 
				+    >
			
 
				+      {children}
			
 
				+      <HugeiconsIcon
			
 
				+        icon={Tick02Icon}
			
 
				+        strokeWidth={2}
			
 
				+        className='ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100'
			
 
				+      />
			
 
				+    </CommandPrimitive.Item>
			
 
				   )
			
 
				 }
			
 
				 
			
@@ -160,7 +180,7 @@ function CommandShortcut({
 
				     <span
			
 
				       data-slot='command-shortcut'
			
 
				       className={cn(
			
 
				-        'text-muted-foreground ml-auto text-xs tracking-widest',
			
 
				+        'text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
--- a/web/default/src/components/ui/context-menu.tsx
+++ b/web/default/src/components/ui/context-menu.tsx
@@ -0,0 +1,276 @@
 
				+'use client'
			
 
				+
			
 
				+import * as React from 'react'
			
 
				+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu'
			
 
				+import { ArrowRight01Icon, Tick02Icon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				+import { cn } from '@/lib/utils'
			
 
				+
			
 
				+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
			
 
				+  return <ContextMenuPrimitive.Root data-slot='context-menu' {...props} />
			
 
				+}
			
 
				+
			
 
				+function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Portal data-slot='context-menu-portal' {...props} />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuTrigger({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.Trigger.Props) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Trigger
			
 
				+      data-slot='context-menu-trigger'
			
 
				+      className={cn('select-none', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuContent({
			
 
				+  className,
			
 
				+  align = 'start',
			
 
				+  alignOffset = 4,
			
 
				+  side = 'right',
			
 
				+  sideOffset = 0,
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.Popup.Props &
			
 
				+  Pick<
			
 
				+    ContextMenuPrimitive.Positioner.Props,
			
 
				+    'align' | 'alignOffset' | 'side' | 'sideOffset'
			
 
				+  >) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Portal>
			
 
				+      <ContextMenuPrimitive.Positioner
			
 
				+        className='isolate z-50 outline-none'
			
 
				+        align={align}
			
 
				+        alignOffset={alignOffset}
			
 
				+        side={side}
			
 
				+        sideOffset={sideOffset}
			
 
				+      >
			
 
				+        <ContextMenuPrimitive.Popup
			
 
				+          data-slot='context-menu-content'
			
 
				+          className={cn(
			
 
				+            'dark bg-popover text-popover-foreground ring-foreground/10 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 z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none',
			
 
				+            className
			
 
				+          )}
			
 
				+          {...props}
			
 
				+        />
			
 
				+      </ContextMenuPrimitive.Positioner>
			
 
				+    </ContextMenuPrimitive.Portal>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Group data-slot='context-menu-group' {...props} />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuLabel({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.GroupLabel.Props & {
			
 
				+  inset?: boolean
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.GroupLabel
			
 
				+      data-slot='context-menu-label'
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuItem({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  variant = 'default',
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.Item.Props & {
			
 
				+  inset?: boolean
			
 
				+  variant?: 'default' | 'destructive'
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Item
			
 
				+      data-slot='context-menu-item'
			
 
				+      data-inset={inset}
			
 
				+      data-variant={variant}
			
 
				+      className={cn(
			
 
				+        "group/context-menu-item focus:bg-accent focus:text-accent-foreground 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 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.SubmenuRoot data-slot='context-menu-sub' {...props} />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSubTrigger({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.SubmenuTrigger.Props & {
			
 
				+  inset?: boolean
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.SubmenuTrigger
			
 
				+      data-slot='context-menu-sub-trigger'
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      <HugeiconsIcon
			
 
				+        icon={ArrowRight01Icon}
			
 
				+        strokeWidth={2}
			
 
				+        className='ml-auto'
			
 
				+      />
			
 
				+    </ContextMenuPrimitive.SubmenuTrigger>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSubContent({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuContent>) {
			
 
				+  return (
			
 
				+    <ContextMenuContent
			
 
				+      data-slot='context-menu-sub-content'
			
 
				+      className='dark shadow-lg'
			
 
				+      side='right'
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuCheckboxItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  checked,
			
 
				+  inset,
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.CheckboxItem.Props & {
			
 
				+  inset?: boolean
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.CheckboxItem
			
 
				+      data-slot='context-menu-checkbox-item'
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_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'>
			
 
				+        <ContextMenuPrimitive.CheckboxItemIndicator>
			
 
				+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
			
 
				+        </ContextMenuPrimitive.CheckboxItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </ContextMenuPrimitive.CheckboxItem>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuRadioGroup({
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.RadioGroup.Props) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.RadioGroup
			
 
				+      data-slot='context-menu-radio-group'
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuRadioItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  inset,
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.RadioItem.Props & {
			
 
				+  inset?: boolean
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.RadioItem
			
 
				+      data-slot='context-menu-radio-item'
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className='pointer-events-none absolute right-2'>
			
 
				+        <ContextMenuPrimitive.RadioItemIndicator>
			
 
				+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
			
 
				+        </ContextMenuPrimitive.RadioItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </ContextMenuPrimitive.RadioItem>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: ContextMenuPrimitive.Separator.Props) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Separator
			
 
				+      data-slot='context-menu-separator'
			
 
				+      className={cn('bg-border -mx-1 my-1 h-px', className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function ContextMenuShortcut({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'span'>) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot='context-menu-shortcut'
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  ContextMenu,
			
 
				+  ContextMenuTrigger,
			
 
				+  ContextMenuContent,
			
 
				+  ContextMenuItem,
			
 
				+  ContextMenuCheckboxItem,
			
 
				+  ContextMenuRadioItem,
			
 
				+  ContextMenuLabel,
			
 
				+  ContextMenuSeparator,
			
 
				+  ContextMenuShortcut,
			
 
				+  ContextMenuGroup,
			
 
				+  ContextMenuPortal,
			
 
				+  ContextMenuSub,
			
 
				+  ContextMenuSubContent,
			
 
				+  ContextMenuSubTrigger,
			
 
				+  ContextMenuRadioGroup,
			
 
				+}
			
--- a/web/default/src/components/ui/dialog.tsx
+++ b/web/default/src/components/ui/dialog.tsx
@@ -1,41 +1,35 @@
 
				 import * as React from 'react'
			
 
				-import * as DialogPrimitive from '@radix-ui/react-dialog'
			
 
				-import { XIcon } from 'lucide-react'
			
 
				+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
			
 
				+import { Cancel01Icon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				+import { Button } from '@/components/ui/button'
			
 
				 
			
 
				-function Dialog({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
			
 
				+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
			
 
				   return <DialogPrimitive.Root data-slot='dialog' {...props} />
			
 
				 }
			
 
				 
			
 
				-function DialogTrigger({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
			
 
				+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
			
 
				   return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />
			
 
				 }
			
 
				 
			
 
				-function DialogPortal({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
			
 
				+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
			
 
				   return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />
			
 
				 }
			
 
				 
			
 
				-function DialogClose({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
			
 
				+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
			
 
				   return <DialogPrimitive.Close data-slot='dialog-close' {...props} />
			
 
				 }
			
 
				 
			
 
				 function DialogOverlay({
			
 
				   className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
			
 
				+}: DialogPrimitive.Backdrop.Props) {
			
 
				   return (
			
 
				-    <DialogPrimitive.Overlay
			
 
				+    <DialogPrimitive.Backdrop
			
 
				       data-slot='dialog-overlay'
			
 
				       className={cn(
			
 
				-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
			
 
				+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -48,16 +42,16 @@ function DialogContent({
 
				   children,
			
 
				   showCloseButton = true,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
			
 
				+}: DialogPrimitive.Popup.Props & {
			
 
				   showCloseButton?: boolean
			
 
				 }) {
			
 
				   return (
			
 
				-    <DialogPortal data-slot='dialog-portal'>
			
 
				+    <DialogPortal>
			
 
				       <DialogOverlay />
			
 
				-      <DialogPrimitive.Content
			
 
				+      <DialogPrimitive.Popup
			
 
				         data-slot='dialog-content'
			
 
				         className={cn(
			
 
				-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
			
 
				+          'bg-popover text-popover-foreground ring-foreground/10 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 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-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm',
			
 
				           className
			
 
				         )}
			
 
				         {...props}
			
@@ -66,13 +60,19 @@ function DialogContent({
 
				         {showCloseButton && (
			
 
				           <DialogPrimitive.Close
			
 
				             data-slot='dialog-close'
			
 
				-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
			
 
				+            render={
			
 
				+              <Button
			
 
				+                variant='ghost'
			
 
				+                className='absolute top-2 right-2'
			
 
				+                size='icon-sm'
			
 
				+              />
			
 
				+            }
			
 
				           >
			
 
				-            <XIcon />
			
 
				+            <HugeiconsIcon icon={Cancel01Icon} strokeWidth={2} />
			
 
				             <span className='sr-only'>Close</span>
			
 
				           </DialogPrimitive.Close>
			
 
				         )}
			
 
				-      </DialogPrimitive.Content>
			
 
				+      </DialogPrimitive.Popup>
			
 
				     </DialogPortal>
			
 
				   )
			
 
				 }
			
@@ -81,33 +81,44 @@ function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
 
				   return (
			
 
				     <div
			
 
				       data-slot='dialog-header'
			
 
				-      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
			
 
				+      className={cn('flex flex-col gap-2', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
			
 
				+function DialogFooter({
			
 
				+  className,
			
 
				+  showCloseButton = false,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: 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',
			
 
				+        'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
 
				-    />
			
 
				+    >
			
 
				+      {children}
			
 
				+      {showCloseButton && (
			
 
				+        <DialogPrimitive.Close render={<Button variant='outline' />}>
			
 
				+          Close
			
 
				+        </DialogPrimitive.Close>
			
 
				+      )}
			
 
				+    </div>
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function DialogTitle({
			
 
				-  className,
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
			
 
				+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
			
 
				   return (
			
 
				     <DialogPrimitive.Title
			
 
				       data-slot='dialog-title'
			
 
				-      className={cn('text-lg leading-none font-semibold', className)}
			
 
				+      className={cn('text-base leading-none font-medium', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -116,11 +127,14 @@ function DialogTitle({
 
				 function DialogDescription({
			
 
				   className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
			
 
				+}: DialogPrimitive.Description.Props) {
			
 
				   return (
			
 
				     <DialogPrimitive.Description
			
 
				       data-slot='dialog-description'
			
 
				-      className={cn('text-muted-foreground text-sm', className)}
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
--- a/web/default/src/components/ui/direction.tsx
+++ b/web/default/src/components/ui/direction.tsx
@@ -0,0 +1,4 @@
 
				+export {
			
 
				+  DirectionProvider,
			
 
				+  useDirection,
			
 
				+} from '@base-ui/react/direction-provider'
			
--- a/web/default/src/components/ui/drawer.tsx
+++ b/web/default/src/components/ui/drawer.tsx
@@ -1,3 +1,5 @@
 
				+'use client'
			
 
				+
			
 
				 import * as React from 'react'
			
 
				 import { Drawer as DrawerPrimitive } from 'vaul'
			
 
				 import { cn } from '@/lib/utils'
			
@@ -34,7 +36,7 @@ function DrawerOverlay({
 
				     <DrawerPrimitive.Overlay
			
 
				       data-slot='drawer-overlay'
			
 
				       className={cn(
			
 
				-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
			
 
				+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -53,16 +55,12 @@ function DrawerContent({
 
				       <DrawerPrimitive.Content
			
 
				         data-slot='drawer-content'
			
 
				         className={cn(
			
 
				-          'group/drawer-content bg-background fixed z-50 flex h-auto flex-col',
			
 
				-          'data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b',
			
 
				-          'data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t',
			
 
				-          'data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm',
			
 
				-          'data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm',
			
 
				+          'group/drawer-content bg-popover text-popover-foreground fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm',
			
 
				           className
			
 
				         )}
			
 
				         {...props}
			
 
				       >
			
 
				-        <div className='bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block' />
			
 
				+        <div className='bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block' />
			
 
				         {children}
			
 
				       </DrawerPrimitive.Content>
			
 
				     </DrawerPortal>
			
@@ -74,7 +72,7 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {
 
				     <div
			
 
				       data-slot='drawer-header'
			
 
				       className={cn(
			
 
				-        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left',
			
 
				+        'flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -99,7 +97,7 @@ function DrawerTitle({
 
				   return (
			
 
				     <DrawerPrimitive.Title
			
 
				       data-slot='drawer-title'
			
 
				-      className={cn('text-foreground font-semibold', className)}
			
 
				+      className={cn('text-foreground text-base font-medium', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
--- a/web/default/src/components/ui/dropdown-menu.tsx
+++ b/web/default/src/components/ui/dropdown-menu.tsx
@@ -1,60 +1,76 @@
 
				-'use client'
			
 
				-
			
 
				 import * as React from 'react'
			
 
				-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
			
 
				-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
			
 
				+import { Menu as MenuPrimitive } from '@base-ui/react/menu'
			
 
				+import { ArrowRight01Icon, Tick02Icon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				-function DropdownMenu({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
			
 
				-  return <DropdownMenuPrimitive.Root data-slot='dropdown-menu' {...props} />
			
 
				+function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
			
 
				+  return <MenuPrimitive.Root data-slot='dropdown-menu' {...props} />
			
 
				 }
			
 
				 
			
 
				-function DropdownMenuPortal({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
			
 
				-  return (
			
 
				-    <DropdownMenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
			
 
				-  )
			
 
				+function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
			
 
				+  return <MenuPrimitive.Portal data-slot='dropdown-menu-portal' {...props} />
			
 
				 }
			
 
				 
			
 
				-function DropdownMenuTrigger({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
			
 
				-  return (
			
 
				-    <DropdownMenuPrimitive.Trigger
			
 
				-      data-slot='dropdown-menu-trigger'
			
 
				-      {...props}
			
 
				-    />
			
 
				-  )
			
 
				+function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
			
 
				+  return <MenuPrimitive.Trigger data-slot='dropdown-menu-trigger' {...props} />
			
 
				 }
			
 
				 
			
 
				 function DropdownMenuContent({
			
 
				-  className,
			
 
				+  align = 'start',
			
 
				+  alignOffset = 0,
			
 
				+  side = 'bottom',
			
 
				   sideOffset = 4,
			
 
				+  className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
			
 
				+}: MenuPrimitive.Popup.Props &
			
 
				+  Pick<
			
 
				+    MenuPrimitive.Positioner.Props,
			
 
				+    'align' | 'alignOffset' | 'side' | 'sideOffset'
			
 
				+  >) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.Portal>
			
 
				-      <DropdownMenuPrimitive.Content
			
 
				-        data-slot='dropdown-menu-content'
			
 
				+    <MenuPrimitive.Portal>
			
 
				+      <MenuPrimitive.Positioner
			
 
				+        className='isolate z-50 outline-none'
			
 
				+        align={align}
			
 
				+        alignOffset={alignOffset}
			
 
				+        side={side}
			
 
				         sideOffset={sideOffset}
			
 
				-        className={cn(
			
 
				-          'bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
			
 
				-          className
			
 
				-        )}
			
 
				-        {...props}
			
 
				-      />
			
 
				-    </DropdownMenuPrimitive.Portal>
			
 
				+      >
			
 
				+        <MenuPrimitive.Popup
			
 
				+          data-slot='dropdown-menu-content'
			
 
				+          className={cn(
			
 
				+            'bg-popover text-popover-foreground ring-foreground/10 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 z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden',
			
 
				+            className
			
 
				+          )}
			
 
				+          {...props}
			
 
				+        />
			
 
				+      </MenuPrimitive.Positioner>
			
 
				+    </MenuPrimitive.Portal>
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function DropdownMenuGroup({
			
 
				+function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
			
 
				+  return <MenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuLabel({
			
 
				+  className,
			
 
				+  inset,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
			
 
				+}: MenuPrimitive.GroupLabel.Props & {
			
 
				+  inset?: boolean
			
 
				+}) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.Group data-slot='dropdown-menu-group' {...props} />
			
 
				+    <MenuPrimitive.GroupLabel
			
 
				+      data-slot='dropdown-menu-label'
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				   )
			
 
				 }
			
 
				 
			
@@ -63,17 +79,17 @@ function DropdownMenuItem({
 
				   inset,
			
 
				   variant = 'default',
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
			
 
				+}: MenuPrimitive.Item.Props & {
			
 
				   inset?: boolean
			
 
				   variant?: 'default' | 'destructive'
			
 
				 }) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.Item
			
 
				+    <MenuPrimitive.Item
			
 
				       data-slot='dropdown-menu-item'
			
 
				       data-inset={inset}
			
 
				       data-variant={variant}
			
 
				       className={cn(
			
 
				-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        "group/dropdown-menu-item focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground 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-[variant=destructive]:*:[svg]:text-destructive relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -81,93 +97,141 @@ function DropdownMenuItem({
 
				   )
			
 
				 }
			
 
				 
			
 
				-function DropdownMenuCheckboxItem({
			
 
				+function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
			
 
				+  return <MenuPrimitive.SubmenuRoot data-slot='dropdown-menu-sub' {...props} />
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuSubTrigger({
			
 
				   className,
			
 
				+  inset,
			
 
				   children,
			
 
				-  checked,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
			
 
				+}: MenuPrimitive.SubmenuTrigger.Props & {
			
 
				+  inset?: boolean
			
 
				+}) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.CheckboxItem
			
 
				-      data-slot='dropdown-menu-checkbox-item'
			
 
				+    <MenuPrimitive.SubmenuTrigger
			
 
				+      data-slot='dropdown-menu-sub-trigger'
			
 
				+      data-inset={inset}
			
 
				       className={cn(
			
 
				-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				         className
			
 
				       )}
			
 
				-      checked={checked}
			
 
				       {...props}
			
 
				     >
			
 
				-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
			
 
				-        <DropdownMenuPrimitive.ItemIndicator>
			
 
				-          <CheckIcon className='size-4' />
			
 
				-        </DropdownMenuPrimitive.ItemIndicator>
			
 
				-      </span>
			
 
				       {children}
			
 
				-    </DropdownMenuPrimitive.CheckboxItem>
			
 
				+      <HugeiconsIcon
			
 
				+        icon={ArrowRight01Icon}
			
 
				+        strokeWidth={2}
			
 
				+        className='ml-auto'
			
 
				+      />
			
 
				+    </MenuPrimitive.SubmenuTrigger>
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function DropdownMenuRadioGroup({
			
 
				+function DropdownMenuSubContent({
			
 
				+  align = 'start',
			
 
				+  alignOffset = -3,
			
 
				+  side = 'right',
			
 
				+  sideOffset = 0,
			
 
				+  className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
			
 
				+}: React.ComponentProps<typeof DropdownMenuContent>) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.RadioGroup
			
 
				-      data-slot='dropdown-menu-radio-group'
			
 
				+    <DropdownMenuContent
			
 
				+      data-slot='dropdown-menu-sub-content'
			
 
				+      className={cn(
			
 
				+        'bg-popover text-popover-foreground ring-foreground/10 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 w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100',
			
 
				+        className
			
 
				+      )}
			
 
				+      align={align}
			
 
				+      alignOffset={alignOffset}
			
 
				+      side={side}
			
 
				+      sideOffset={sideOffset}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function DropdownMenuRadioItem({
			
 
				+function DropdownMenuCheckboxItem({
			
 
				   className,
			
 
				   children,
			
 
				+  checked,
			
 
				+  inset,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
			
 
				+}: MenuPrimitive.CheckboxItem.Props & {
			
 
				+  inset?: boolean
			
 
				+}) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.RadioItem
			
 
				-      data-slot='dropdown-menu-radio-item'
			
 
				+    <MenuPrimitive.CheckboxItem
			
 
				+      data-slot='dropdown-menu-checkbox-item'
			
 
				+      data-inset={inset}
			
 
				       className={cn(
			
 
				-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				         className
			
 
				       )}
			
 
				+      checked={checked}
			
 
				       {...props}
			
 
				     >
			
 
				-      <span className='pointer-events-none absolute left-2 flex size-3.5 items-center justify-center'>
			
 
				-        <DropdownMenuPrimitive.ItemIndicator>
			
 
				-          <CircleIcon className='size-2 fill-current' />
			
 
				-        </DropdownMenuPrimitive.ItemIndicator>
			
 
				+      <span
			
 
				+        className='pointer-events-none absolute right-2 flex items-center justify-center'
			
 
				+        data-slot='dropdown-menu-checkbox-item-indicator'
			
 
				+      >
			
 
				+        <MenuPrimitive.CheckboxItemIndicator>
			
 
				+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
			
 
				+        </MenuPrimitive.CheckboxItemIndicator>
			
 
				       </span>
			
 
				       {children}
			
 
				-    </DropdownMenuPrimitive.RadioItem>
			
 
				+    </MenuPrimitive.CheckboxItem>
			
 
				   )
			
 
				 }
			
 
				 
			
 
				-function DropdownMenuLabel({
			
 
				+function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
			
 
				+  return (
			
 
				+    <MenuPrimitive.RadioGroup
			
 
				+      data-slot='dropdown-menu-radio-group'
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuRadioItem({
			
 
				   className,
			
 
				+  children,
			
 
				   inset,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
			
 
				+}: MenuPrimitive.RadioItem.Props & {
			
 
				   inset?: boolean
			
 
				 }) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.Label
			
 
				-      data-slot='dropdown-menu-label'
			
 
				+    <MenuPrimitive.RadioItem
			
 
				+      data-slot='dropdown-menu-radio-item'
			
 
				       data-inset={inset}
			
 
				       className={cn(
			
 
				-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
			
 
				+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_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>
			
 
				+          <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
			
 
				+        </MenuPrimitive.RadioItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </MenuPrimitive.RadioItem>
			
 
				   )
			
 
				 }
			
 
				 
			
 
				 function DropdownMenuSeparator({
			
 
				   className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
			
 
				+}: MenuPrimitive.Separator.Props) {
			
 
				   return (
			
 
				-    <DropdownMenuPrimitive.Separator
			
 
				+    <MenuPrimitive.Separator
			
 
				       data-slot='dropdown-menu-separator'
			
 
				       className={cn('bg-border -mx-1 my-1 h-px', className)}
			
 
				       {...props}
			
@@ -183,53 +247,7 @@ function DropdownMenuShortcut({
 
				     <span
			
 
				       data-slot='dropdown-menu-shortcut'
			
 
				       className={cn(
			
 
				-        'text-muted-foreground ml-auto text-xs tracking-widest',
			
 
				-        className
			
 
				-      )}
			
 
				-      {...props}
			
 
				-    />
			
 
				-  )
			
 
				-}
			
 
				-
			
 
				-function DropdownMenuSub({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
			
 
				-  return <DropdownMenuPrimitive.Sub data-slot='dropdown-menu-sub' {...props} />
			
 
				-}
			
 
				-
			
 
				-function DropdownMenuSubTrigger({
			
 
				-  className,
			
 
				-  inset,
			
 
				-  children,
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
			
 
				-  inset?: boolean
			
 
				-}) {
			
 
				-  return (
			
 
				-    <DropdownMenuPrimitive.SubTrigger
			
 
				-      data-slot='dropdown-menu-sub-trigger'
			
 
				-      data-inset={inset}
			
 
				-      className={cn(
			
 
				-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				-        className
			
 
				-      )}
			
 
				-      {...props}
			
 
				-    >
			
 
				-      {children}
			
 
				-      <ChevronRightIcon className='ml-auto size-4' />
			
 
				-    </DropdownMenuPrimitive.SubTrigger>
			
 
				-  )
			
 
				-}
			
 
				-
			
 
				-function DropdownMenuSubContent({
			
 
				-  className,
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
			
 
				-  return (
			
 
				-    <DropdownMenuPrimitive.SubContent
			
 
				-      data-slot='dropdown-menu-sub-content'
			
 
				-      className={cn(
			
 
				-        'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
			
 
				+        'text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
--- a/web/default/src/components/ui/empty.tsx
+++ b/web/default/src/components/ui/empty.tsx
@@ -6,7 +6,7 @@ function Empty({ className, ...props }: React.ComponentProps<'div'>) {
 
				     <div
			
 
				       data-slot='empty'
			
 
				       className={cn(
			
 
				-        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',
			
 
				+        'flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -18,22 +18,19 @@ function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
 
				   return (
			
 
				     <div
			
 
				       data-slot='empty-header'
			
 
				-      className={cn(
			
 
				-        'flex max-w-md flex-col items-center gap-2 text-center',
			
 
				-        className
			
 
				-      )}
			
 
				+      className={cn('flex max-w-sm flex-col items-center gap-2', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
 
				 }
			
 
				 
			
 
				 const emptyMediaVariants = cva(
			
 
				-  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',
			
 
				+  'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
			
 
				   {
			
 
				     variants: {
			
 
				       variant: {
			
 
				         default: 'bg-transparent',
			
 
				-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
			
 
				+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
			
 
				       },
			
 
				     },
			
 
				     defaultVariants: {
			
@@ -61,7 +58,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
 
				   return (
			
 
				     <div
			
 
				       data-slot='empty-title'
			
 
				-      className={cn('text-lg font-medium tracking-tight', className)}
			
 
				+      className={cn('text-sm font-medium tracking-tight', className)}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -85,7 +82,7 @@ function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
 
				     <div
			
 
				       data-slot='empty-content'
			
 
				       className={cn(
			
 
				-        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',
			
 
				+        'flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
--- a/web/default/src/components/ui/field.tsx
+++ b/web/default/src/components/ui/field.tsx
@@ -0,0 +1,235 @@
 
				+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'
			
 
				+
			
 
				+function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
			
 
				+  return (
			
 
				+    <fieldset
			
 
				+      data-slot='field-set'
			
 
				+      className={cn(
			
 
				+        'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldLegend({
			
 
				+  className,
			
 
				+  variant = 'legend',
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
			
 
				+  return (
			
 
				+    <legend
			
 
				+      data-slot='field-legend'
			
 
				+      data-variant={variant}
			
 
				+      className={cn(
			
 
				+        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='field-group'
			
 
				+      className={cn(
			
 
				+        'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+const fieldVariants = cva(
			
 
				+  'group/field flex w-full gap-2 data-[invalid=true]:text-destructive',
			
 
				+  {
			
 
				+    variants: {
			
 
				+      orientation: {
			
 
				+        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: {
			
 
				+      orientation: 'vertical',
			
 
				+    },
			
 
				+  }
			
 
				+)
			
 
				+
			
 
				+function Field({
			
 
				+  className,
			
 
				+  orientation = 'vertical',
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      role='group'
			
 
				+      data-slot='field'
			
 
				+      data-orientation={orientation}
			
 
				+      className={cn(fieldVariants({ orientation }), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='field-content'
			
 
				+      className={cn(
			
 
				+        'group/field-content flex flex-1 flex-col gap-0.5 leading-snug',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldLabel({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Label>) {
			
 
				+  return (
			
 
				+    <Label
			
 
				+      data-slot='field-label'
			
 
				+      className={cn(
			
 
				+        'group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5',
			
 
				+        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='field-label'
			
 
				+      className={cn(
			
 
				+        'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
			
 
				+  return (
			
 
				+    <p
			
 
				+      data-slot='field-description'
			
 
				+      className={cn(
			
 
				+        'text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
			
 
				+        'last:mt-0 nth-last-2:-mt-1',
			
 
				+        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldSeparator({
			
 
				+  children,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'> & {
			
 
				+  children?: React.ReactNode
			
 
				+}) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot='field-separator'
			
 
				+      data-content={!!children}
			
 
				+      className={cn(
			
 
				+        'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <Separator className='absolute inset-0 top-1/2' />
			
 
				+      {children && (
			
 
				+        <span
			
 
				+          className='bg-background text-muted-foreground relative mx-auto block w-fit px-2'
			
 
				+          data-slot='field-separator-content'
			
 
				+        >
			
 
				+          {children}
			
 
				+        </span>
			
 
				+      )}
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+function FieldError({
			
 
				+  className,
			
 
				+  children,
			
 
				+  errors,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<'div'> & {
			
 
				+  errors?: Array<{ message?: string } | undefined>
			
 
				+}) {
			
 
				+  const content = useMemo(() => {
			
 
				+    if (children) {
			
 
				+      return children
			
 
				+    }
			
 
				+
			
 
				+    if (!errors?.length) {
			
 
				+      return null
			
 
				+    }
			
 
				+
			
 
				+    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'>
			
 
				+        {uniqueErrors.map(
			
 
				+          (error, index) =>
			
 
				+            error?.message && <li key={index}>{error.message}</li>
			
 
				+        )}
			
 
				+      </ul>
			
 
				+    )
			
 
				+  }, [children, errors])
			
 
				+
			
 
				+  if (!content) {
			
 
				+    return null
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      role='alert'
			
 
				+      data-slot='field-error'
			
 
				+      className={cn('text-destructive text-sm font-normal', className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {content}
			
 
				+    </div>
			
 
				+  )
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Field,
			
 
				+  FieldLabel,
			
 
				+  FieldDescription,
			
 
				+  FieldError,
			
 
				+  FieldGroup,
			
 
				+  FieldLegend,
			
 
				+  FieldSeparator,
			
 
				+  FieldSet,
			
 
				+  FieldContent,
			
 
				+  FieldTitle,
			
 
				+}
			
--- a/web/default/src/components/ui/form.tsx
+++ b/web/default/src/components/ui/form.tsx
@@ -8,8 +8,7 @@ import {
 
				   type FieldPath,
			
 
				   type FieldValues,
			
 
				 } from 'react-hook-form'
			
 
				-import * as LabelPrimitive from '@radix-ui/react-label'
			
 
				-import { Slot } from '@radix-ui/react-slot'
			
 
				+import { useRender } from '@base-ui/react/use-render'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 import { Label } from '@/components/ui/label'
			
 
				 
			
@@ -87,7 +86,7 @@ function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
 
				 function FormLabel({
			
 
				   className,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
			
 
				+}: React.ComponentProps<typeof Label>) {
			
 
				   const { error, formItemId } = useFormField()
			
 
				 
			
 
				   return (
			
@@ -101,22 +100,24 @@ function FormLabel({
 
				   )
			
 
				 }
			
 
				 
			
 
				-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
			
 
				+function FormControl({
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: { children: React.ReactElement } & Record<string, unknown>) {
			
 
				   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
			
 
				 
			
 
				-  return (
			
 
				-    <Slot
			
 
				-      data-slot='form-control'
			
 
				-      id={formItemId}
			
 
				-      aria-describedby={
			
 
				-        !error
			
 
				-          ? `${formDescriptionId}`
			
 
				-          : `${formDescriptionId} ${formMessageId}`
			
 
				-      }
			
 
				-      aria-invalid={!!error}
			
 
				-      {...props}
			
 
				-    />
			
 
				-  )
			
 
				+  return useRender({
			
 
				+    render: children,
			
 
				+    props: {
			
 
				+      'data-slot': 'form-control',
			
 
				+      id: formItemId,
			
 
				+      'aria-describedby': !error
			
 
				+        ? `${formDescriptionId}`
			
 
				+        : `${formDescriptionId} ${formMessageId}`,
			
 
				+      'aria-invalid': !!error,
			
 
				+      ...props,
			
 
				+    },
			
 
				+  })
			
 
				 }
			
 
				 
			
 
				 function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
			
--- a/web/default/src/components/ui/hover-card.tsx
+++ b/web/default/src/components/ui/hover-card.tsx
@@ -1,40 +1,49 @@
 
				-import * as React from 'react'
			
 
				-import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
			
 
				+'use client'
			
 
				+
			
 
				+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				-function HoverCard({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
			
 
				-  return <HoverCardPrimitive.Root data-slot='hover-card' {...props} />
			
 
				+function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
			
 
				+  return <PreviewCardPrimitive.Root data-slot='hover-card' {...props} />
			
 
				 }
			
 
				 
			
 
				-function HoverCardTrigger({
			
 
				-  ...props
			
 
				-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
			
 
				+function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
			
 
				   return (
			
 
				-    <HoverCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />
			
 
				+    <PreviewCardPrimitive.Trigger data-slot='hover-card-trigger' {...props} />
			
 
				   )
			
 
				 }
			
 
				 
			
 
				 function HoverCardContent({
			
 
				   className,
			
 
				-  align = 'center',
			
 
				+  side = 'bottom',
			
 
				   sideOffset = 4,
			
 
				+  align = 'center',
			
 
				+  alignOffset = 4,
			
 
				   ...props
			
 
				-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
			
 
				+}: PreviewCardPrimitive.Popup.Props &
			
 
				+  Pick<
			
 
				+    PreviewCardPrimitive.Positioner.Props,
			
 
				+    'align' | 'alignOffset' | 'side' | 'sideOffset'
			
 
				+  >) {
			
 
				   return (
			
 
				-    <HoverCardPrimitive.Portal data-slot='hover-card-portal'>
			
 
				-      <HoverCardPrimitive.Content
			
 
				-        data-slot='hover-card-content'
			
 
				+    <PreviewCardPrimitive.Portal data-slot='hover-card-portal'>
			
 
				+      <PreviewCardPrimitive.Positioner
			
 
				         align={align}
			
 
				+        alignOffset={alignOffset}
			
 
				+        side={side}
			
 
				         sideOffset={sideOffset}
			
 
				-        className={cn(
			
 
				-          'bg-popover text-popover-foreground 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 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
			
 
				-          className
			
 
				-        )}
			
 
				-        {...props}
			
 
				-      />
			
 
				-    </HoverCardPrimitive.Portal>
			
 
				+        className='isolate z-50'
			
 
				+      >
			
 
				+        <PreviewCardPrimitive.Popup
			
 
				+          data-slot='hover-card-content'
			
 
				+          className={cn(
			
 
				+            'bg-popover text-popover-foreground ring-foreground/10 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 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100',
			
 
				+            className
			
 
				+          )}
			
 
				+          {...props}
			
 
				+        />
			
 
				+      </PreviewCardPrimitive.Positioner>
			
 
				+    </PreviewCardPrimitive.Portal>
			
 
				   )
			
 
				 }
			
 
				 
			
--- a/web/default/src/components/ui/input-group.tsx
+++ b/web/default/src/components/ui/input-group.tsx
@@ -13,21 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 
				       data-slot='input-group'
			
 
				       role='group'
			
 
				       className={cn(
			
 
				-        'group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none',
			
 
				-        'h-9 min-w-0 has-[>textarea]:h-auto',
			
 
				-
			
 
				-        // Variants based on alignment.
			
 
				-        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
			
 
				-        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
			
 
				-        'has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
			
 
				-        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
			
 
				-
			
 
				-        // Focus state.
			
 
				-        'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
			
 
				-
			
 
				-        // Error state.
			
 
				-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
			
 
				-
			
 
				+        'group/input-group border-input has-disabled:bg-input/50 has-[[data-slot=input-group-control]:focus-visible]:border-ring 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-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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 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}
			
@@ -36,18 +22,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 
				 }
			
 
				 
			
 
				 const inputGroupAddonVariants = cva(
			
 
				-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
			
 
				+  "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-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
			
 
				+          'order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]',
			
 
				         'inline-end':
			
 
				-          'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
			
 
				+          'order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]',
			
 
				         'block-start':
			
 
				-          'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
			
 
				+          '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-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
			
 
				+          'order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2',
			
 
				       },
			
 
				     },
			
 
				     defaultVariants: {
			
@@ -79,14 +65,14 @@ function InputGroupAddon({
 
				 }
			
 
				 
			
 
				 const inputGroupButtonVariants = cva(
			
 
				-  'text-sm shadow-none flex gap-2 items-center',
			
 
				+  'flex items-center gap-2 text-sm shadow-none',
			
 
				   {
			
 
				     variants: {
			
 
				       size: {
			
 
				-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
			
 
				-        sm: 'h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5',
			
 
				+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] 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',
			
 
				+          'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
			
 
				         'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
			
 
				       },
			
 
				     },
			
@@ -102,8 +88,10 @@ function InputGroupButton({
 
				   variant = 'ghost',
			
 
				   size = 'xs',
			
 
				   ...props
			
 
				-}: Omit<React.ComponentProps<typeof Button>, 'size'> &
			
 
				-  VariantProps<typeof inputGroupButtonVariants>) {
			
 
				+}: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> &
			
 
				+  VariantProps<typeof inputGroupButtonVariants> & {
			
 
				+    type?: 'button' | 'submit' | 'reset'
			
 
				+  }) {
			
 
				   return (
			
 
				     <Button
			
 
				       type={type}
			
@@ -135,7 +123,7 @@ function InputGroupInput({
 
				     <Input
			
 
				       data-slot='input-group-control'
			
 
				       className={cn(
			
 
				-        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
			
 
				+        'flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -151,7 +139,7 @@ function InputGroupTextarea({
 
				     <Textarea
			
 
				       data-slot='input-group-control'
			
 
				       className={cn(
			
 
				-        'flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent',
			
 
				+        'flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
--- a/web/default/src/components/ui/input-otp.tsx
+++ b/web/default/src/components/ui/input-otp.tsx
@@ -1,6 +1,7 @@
 
				 import * as React from 'react'
			
 
				+import { MinusSignIcon } from '@hugeicons/core-free-icons'
			
 
				+import { HugeiconsIcon } from '@hugeicons/react'
			
 
				 import { OTPInput, OTPInputContext } from 'input-otp'
			
 
				-import { MinusIcon } from 'lucide-react'
			
 
				 import { cn } from '@/lib/utils'
			
 
				 
			
 
				 function InputOTP({
			
@@ -14,9 +15,10 @@ function InputOTP({
 
				     <OTPInput
			
 
				       data-slot='input-otp'
			
 
				       containerClassName={cn(
			
 
				-        'flex items-center gap-2 has-disabled:opacity-50',
			
 
				+        'cn-input-otp flex items-center has-disabled:opacity-50',
			
 
				         containerClassName
			
 
				       )}
			
 
				+      spellCheck={false}
			
 
				       className={cn('disabled:cursor-not-allowed', className)}
			
 
				       {...props}
			
 
				     />
			
@@ -27,7 +29,10 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) {
 
				   return (
			
 
				     <div
			
 
				       data-slot='input-otp-group'
			
 
				-      className={cn('flex items-center', className)}
			
 
				+      className={cn(
			
 
				+        'has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 flex items-center rounded-lg has-aria-invalid:ring-3',
			
 
				+        className
			
 
				+      )}
			
 
				       {...props}
			
 
				     />
			
 
				   )
			
@@ -48,7 +53,7 @@ function InputOTPSlot({
 
				       data-slot='input-otp-slot'
			
 
				       data-active={isActive}
			
 
				       className={cn(
			
 
				-        'data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]',
			
 
				+        'border-input aria-invalid:border-destructive data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40 relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3',
			
 
				         className
			
 
				       )}
			
 
				       {...props}
			
@@ -65,8 +70,13 @@ function InputOTPSlot({
 
				 
			
 
				 function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
			
 
				   return (
			
 
				-    <div data-slot='input-otp-separator' role='separator' {...props}>
			
 
				-      <MinusIcon />
			
 
				+    <div
			
 
				+      data-slot='input-otp-separator'
			
 
				+      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
			
 
				+      role='separator'
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
			
 
				     </div>
			
 
				   )
			
 
				 }