@viglet/viglet-design-system 2026.3.9 → 2026.3.10

package/README.md

@@ -1,9 +1,10 @@
 # Viglet Design System
 
 Shared component library, design tokens, hooks, utilities, and i18n for the
-seven applications that install it: the Turing, Dumont and Shio consoles,
-the Cloud Console, the Cloud Home, Schools, and the Roadkeep GUI.
-`consumers.json` is the list, and it is what the guards read.
+nine applications that install it: the Turing, Dumont and Shio consoles,
+the Cloud Console, the Cloud Home, Schools, the Roadkeep GUI,
+the Openviglet Website and Viglet Docs. `consumers.json` is the list, and it is
+what the guards read.
 
 **[Browse the component catalogue](https://openviglet.github.io/viglet-design-system/)** — every
 component, its variants and its props, rebuilt on each commit to `2026.3`. Look
@@ -17,9 +18,12 @@ subpaths it takes, and CI refuses prose that names a subset as though it were
 the whole set. An eighth is one entry there, and the checks widen with it.
 
 Three are Vite consoles (Turing, Shio, Dumont), one is a Vite platform home
-(the Cloud Home), one is a Vite desktop shell (the Roadkeep GUI), and two are
-Next applications (the Cloud Console and Schools). The split matters: a Next
-consumer takes no `./router` and no `./vite`.
+(the Cloud Home), one is a Vite desktop shell (the Roadkeep GUI), one is a Vite
+marketing site (the Openviglet Website), two are Next applications
+(the Cloud Console and Schools), and one is Docusaurus (Viglet Docs). The split
+matters: a
+Next consumer takes no `./router` and no `./vite`, and Viglet Docs takes no root
+entry at all — only `./preset` and the background.
 
 ## Installation
 
@@ -27,13 +31,23 @@ consumer takes no `./router` and no `./vite`.
 pnpm add @viglet/viglet-design-system
 ```
 
+**Declare `react-hook-form` yourself.** It is a required peer, not something this
+package brings: the root entry exports `Form`, and that module re-exports
+`FormProvider`, `useFormContext` and `useFormState` straight from it. A second
+copy in your tree is a second React context, and `useFormContext` then returns
+null inside a form that looks correctly wired. Declaring it is what keeps the
+install to one copy — `npm ls react-hook-form` should say `deduped`.
+
 ## Trying a change in a product before publishing
 
 A change here is a change to shared chrome, so the question is always what it
-does to Shio, Turing, Dumont, the Cloud Console, the Cloud Home, Schools and the
-Roadkeep GUI — and the answer should not require a publish. `use:local` walks a
-products root, so it reaches the first three; the other four are checked out
-elsewhere and `npm pack` into them is the loop until that changes (VDS73). From this checkout:
+does to Shio, Turing, Dumont, the Cloud Console, the Cloud Home, Schools,
+the Roadkeep GUI, the Openviglet Website and Viglet Docs — and the answer should
+not require a publish. `use:local` walks a products root, so it reaches the first
+three; the other six are checked out elsewhere and `npm pack` into them is the
+loop until that changes (VDS73). The last two take the package by caret range
+rather than pinning it, so they also receive each release the moment they
+install one. From this checkout:
 
 ```bash
 pnpm use:local           # build, then push dist into every 2026.3 product on disk
@@ -147,6 +161,12 @@ one the catalogue shows.
 
 ### 2. Initialize i18n
 
+`/i18n` is the only way in. The root entry used to re-export these three, which
+meant every consumer of `.` resolved `i18next` and
+`i18next-browser-languagedetector` and carried the locale bundle whether or not
+it ever asked for a translation; since 2026.3 it does not, and a product that
+imported them from `.` changes the specifier and nothing else.
+
 ```ts
 import { initVigI18n } from "@viglet/viglet-design-system/i18n";
 
@@ -166,6 +186,31 @@ import i18n from "i18next";
 registerVigTranslations(i18n);
 ```
 
+**Both merge key by key, and your key always wins.** Shipping your own `common`
+does not cost you the package's — `common.save` stays yours and `common.next`
+still resolves to the word this package ships. `registerVigTranslations` never
+replaces a key the host already has, so calling it twice is safe.
+
+**`initVigI18n` takes any language, not only the two this package ships.** Pass
+`es`, `fr` or anything else and it arrives whole; `en` and `pt` still merge leaf
+by leaf with yours. The package's own strings exist in `en` and `pt` only, so
+`fallbackLng` stays `en` and a screen asking for a string the package ships
+reads English under a third language until you translate it yourself.
+
+This used to merge a namespace at a time: a product with its own `common`
+replaced the package's outright, and every string the package asked for under
+that namespace fell back to its English default — in a Portuguese product,
+silently. If you worked around it by renaming a namespace or copying the
+package's keys into yours, you can stop.
+
+**One string lands before any of this.** The boot loader from
+`@viglet/viglet-design-system/vite` is HTML written at build time and paints
+before a bundle runs, so it cannot ask i18next for anything. Its status region is
+named `"Loading <title>"` unless you say otherwise — pass `loadingLabel` for the
+phrase in your language, or `loadingLabels` (a language tag to a phrase) for a
+product that ships several, which the loader's inline script picks from
+`navigator.language`.
+
 ### 3. Setup providers
 
 ```tsx
@@ -298,6 +343,127 @@ Nothing is being removed. No product has started cutting over, and a removal wil
 
 `DialogDelete`, `LoadProvider` and `GradientButtonLink` are **not** console-era — the bento layer uses them itself, and they are not deprecated.
 
+### The mascot
+
+`VigletAvatar` is the Viglet mascot: a small sun that shows what the system is
+doing. It is one `<canvas>` and no new dependency — the faceted core is drawn
+directly, so a product gets the mascot by installing this package and nothing
+else.
+
+```tsx
+import { VigletAvatar } from "@viglet/viglet-design-system";
+
+<VigletAvatar state="working" size={128} />;
+```
+
+The five states are named for the toast kinds, so a product that already reports
+through `toast` has nothing to translate:
+
+| `state` | When | What it does |
+|---|---|---|
+| `idle` | nothing is happening | a slow, low glow |
+| `working` | a request is in flight | an orbit with a travelling arc |
+| `success` | it finished | a swell, then a pulse outward |
+| `error` | it failed | the light goes out — it does not turn red |
+| `attention` | something arrived | a ring rises from below |
+
+Four further props shape it rather than drive it: `compact` pulls the camera in
+and drops the pool of light, for a collapsed dock; `unread` holds a slow orbit
+while an answer waits; `activity` is a counter you bump to make the mascot react
+to something smaller than a state change, like a keystroke; and `seed` fixes the
+field of rising embers. The same props always draw the same sparks, so a product
+that wants a different field per visit passes a changing `seed` itself.
+
+The mascot is decorative (`aria-hidden`) and says nothing a screen reader can
+use — give the surface that wraps it the accessible name. It draws one frame and
+starts no animation loop for a reader whose system asks for reduced motion, and
+`paused` does the same for a product with its own motion switch. When nothing is
+happening it stops drawing altogether rather than holding a loop open.
+
+### The assistant dock
+
+`VigletAssistant` is the surface the mascot lives in. Collapsed it is a status
+light with the system's last sentence typed beside it; open it is a panel with a
+transcript and a composer.
+
+```tsx
+import { VigletAssistant } from "@viglet/viglet-design-system";
+
+<VigletAssistant
+  state={state}
+  caption="/q3-results published at 14:02."
+  messages={messages}
+  busy={busy}
+  onSend={(text) => ask(text)}
+/>;
+```
+
+**The dock knows no backend.** `messages`, `busy` and `onSend` are the whole
+contract — the endpoint, the prompt and the key stay in your product. Leaving
+`onSend` off is how you turn the chat off: the composer is not rendered at all
+and the dock becomes a place the system reports from, which is what a product
+that only wants notification feedback should mount.
+
+A message may carry one `action`, so an answer can offer something to do with
+it — the label is your copy, already translated:
+
+```tsx
+messages={[{
+  role: "assistant",
+  text: "Lead with the number.",
+  action: { label: "Use this title", onSelect: () => setTitle(suggested) },
+}]}
+```
+
+It pins itself to the bottom-right of the viewport; pass `inline` to render it
+in flow and place it yourself. `open` / `onOpenChange` make it controlled,
+Escape collapses it, and the caption is typed for everyone while a screen reader
+is handed the whole sentence at once.
+
+Its own words — the state names, the two buttons, the placeholder — come from
+the `assistant.*` keys this package ships in `en` and `pt`. See
+[Initialize i18n](#2-initialize-i18n); everything else it says is your copy.
+
+#### Letting notifications drive it
+
+You already report outcomes through `toast`. `useAssistantNotifications` reads
+the Toaster back, so the mascot moves without a second call beside each one:
+
+```tsx
+import {
+  Toaster,
+  VigletAssistant,
+  useAssistantNotifications,
+} from "@viglet/viglet-design-system";
+
+function Chrome() {
+  const { state, caption, activity } = useAssistantNotifications();
+
+  return (
+    <>
+      <Toaster />
+      <VigletAssistant state={state} caption={caption} activity={activity} />
+    </>
+  );
+}
+```
+
+It **wraps nothing**. Call sonner from anywhere in your app — from a module that
+has never heard of this hook — and the mascot still moves.
+
+| Toast | State |
+|---|---|
+| `toast.loading` | `working` |
+| `toast.success` | `success` |
+| `toast.error` | `error` |
+| `toast.warning`, `toast.info` | `attention` |
+| nothing on screen | `idle` |
+
+With several up, work in progress outranks an outcome and a failure outranks a
+success. `caption` is the toast's own title when it is a string — a toast
+rendered as JSX has no sentence to lift, so you get `null` rather than a guess.
+The hook is opt-in: pass `state` yourself and nothing here interferes.
+
 ### Hooks
 
 ```tsx
@@ -306,6 +472,7 @@ import {
   useDateLocale,
   useGridAdapter,
   useSubPageBreadcrumb,
+  useAssistantNotifications,
   useTheme,
   useBreadcrumb,
   useCurrentUser,
@@ -357,9 +524,9 @@ import type {
 
 ## What's Included
 
-### UI Primitives (39 components)
+### UI Primitives (41 components)
 
-Accordion, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, Drawer, DropdownMenu, Form, FormActions, FormItemTwoColumns, GradientButton, GradientSwitch, HoverCard, Input, Label, NavigationMenu, Pagination, Popover, Progress, Resizable, SectionCard, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner (Toaster), Stepper, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip
+Accordion, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Dialog, Drawer, DropdownMenu, Form, FormActions, FormItemTwoColumns, GradientButton, GradientSwitch, HoverCard, Input, Label, NavigationMenu, Pagination, Popover, Progress, Resizable, SectionCard, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Sonner (Toaster), Stepper, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup, Tooltip, VigletAssistant ([the dock](#the-assistant-dock)), VigletAvatar ([the mascot](#the-mascot))
 
 ### App Components (23 components)
 
@@ -369,7 +536,9 @@ Console-era, `@deprecated`, still exported — see [the swap table](#two-eras-an
 
 ### Hooks
 
-`useIsMobile`, `useDateLocale`, `useGridAdapter`, `useSubPageBreadcrumb`
+`useIsMobile`, `useDateLocale`, `useGridAdapter`, `useSubPageBreadcrumb`, `useAssistantNotifications`, `useSidebarOptional`
+
+`useSidebarOptional()` is `useSidebar()` for a component that may not have a `SidebarProvider` above it — it returns `undefined` instead of throwing, which is what a Module Federation remote needs when the host owns the sidebar and the remote only renders into it.
 
 `useGridAdapter(data, config)` tracks each extractor in `config`, not the object holding them, so a `url` builder that closes over a route param or a locale re-maps the rows when it changes. Pass the config inline if you like — keep the extractors themselves stable (a field name, a module-level function, a `useCallback`) and the memo holds.
 
@@ -419,7 +588,7 @@ This is separate from a component's **colour palette**. `SectionCard` (`blue | v
 
 ### i18n
 
-Base translations (EN/PT) for common UI strings: buttons, form labels, dialog text, navigation, theme.
+Base translations (EN/PT) for common UI strings: buttons, form labels, dialog text, navigation, theme, and the assistant dock.
 
 ## Tech Stack
 
@@ -466,6 +635,25 @@ The stylesheet is a separate import from the components, so a consumer taking
 only the layout maths does not pull CSS it never renders. It reads the preset's
 tokens, so import the preset too.
 
+`BentoCommandPalette` takes a second group whose items the product supplies per
+query, beside the nav items it matches itself. Pass `onQueryChange` to hear the
+query as typed and `group` to answer it:
+
+```tsx
+<BentoCommandPalette
+  open={open}
+  onOpenChange={setOpen}
+  items={navItems}
+  onQueryChange={setQuery}
+  group={{ label: t("documents"), items: hits, pending, onSelect: openDocument }}
+/>
+```
+
+Those items are rendered in the order given and never re-ranked — your search
+already ranked them by relevance it understands, and a substring match here
+would only undo that. Set `pending` while the query is in flight so the dialog
+says so rather than showing an empty list that is not empty yet.
+
 "Carries none of it" is measured rather than claimed. `pnpm run build` ends by
 bundling three fixtures through this package's own `exports` map, and fails if a
 bento module, a bento class name or a run of `bento.css`'s selectors reaches a
@@ -502,6 +690,14 @@ do, and npm cannot mark a peer required for one entry point and optional for
 another. `pnpm run build` fails if any other entry starts importing it, so the
 split above stays true rather than becoming folklore.
 
+**`react-hook-form` is a required peer, and `react-router-dom` is the only
+optional one.** It was a plain dependency until VDS77, which is the one case
+where that is wrong: every other library this package shares state through is a
+peer, and this is the one carrying a React context a duplicate would split. The
+build already left it for the consumer to supply, so the manifest was promising
+something the bundle did not deliver; `scripts/externals.test.ts` now fails if
+anything externalised as a peer is declared a dependency again.
+
 [docs/BENTO-AUTHORING.md](docs/BENTO-AUTHORING.md) is the contract for writing a
 bento page: the three page shapes, what the package will not hold for you, and
 the colour, i18n, accessibility and layout rules that keep two consoles looking
@@ -521,8 +717,9 @@ The catalogue proves a component; these prove the arrangement.
 ## Contributing
 
 The package manager here is pnpm, matching the Shio, Turing, Dumont, Cloud Home
-and Schools workspaces. The Cloud Console and the Roadkeep GUI install with npm,
-which is a fact about those repositories and not about this one.
+and Schools workspaces. The Cloud Console, the Roadkeep GUI,
+the Openviglet Website and Viglet Docs install with npm, which is a fact about
+those repositories and not about this one.
 
 ```bash
 pnpm install

package/dist/badge-locale-Bij94NwL.cjs

@@ -0,0 +1 @@
+const e=require("./rolldown-runtime-BocRIvOZ.cjs"),t=require("./utils-Oagwe_oa.cjs");let n=require("react");n=e.t(n,1);let r=require("react/jsx-runtime"),i=require("@radix-ui/react-slot"),a=require("class-variance-authority"),o=require("react-i18next"),s=require("@radix-ui/react-dialog");s=e.t(s,1);let c=require("@radix-ui/react-dropdown-menu");c=e.t(c,1);let l=require("@radix-ui/react-tooltip");l=e.t(l,1);var u=(...e)=>e.filter((e,t,n)=>!!e&&e.trim()!==``&&n.indexOf(e)===t).join(` `).trim(),d=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase(),f=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,t,n)=>n?n.toUpperCase():t.toLowerCase()),p=e=>{let t=f(e);return t.charAt(0).toUpperCase()+t.slice(1)},m={xmlns:`http://www.w3.org/2000/svg`,width:24,height:24,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`},h=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},g=(0,n.createContext)({}),_=()=>(0,n.useContext)(g),v=(0,n.forwardRef)(({color:e,size:t,strokeWidth:r,absoluteStrokeWidth:i,className:a=``,children:o,iconNode:s,...c},l)=>{let{size:d=24,strokeWidth:f=2,absoluteStrokeWidth:p=!1,color:g=`currentColor`,className:v=``}=_()??{},y=i??p?Number(r??f)*24/Number(t??d):r??f;return(0,n.createElement)(`svg`,{ref:l,...m,width:t??d??m.width,height:t??d??m.height,stroke:e??g,strokeWidth:y,className:u(`lucide`,v,a),...!o&&!h(c)&&{"aria-hidden":`true`},...c},[...s.map(([e,t])=>(0,n.createElement)(e,t)),...Array.isArray(o)?o:[o]])}),y=(e,t)=>{let r=(0,n.forwardRef)(({className:r,...i},a)=>(0,n.createElement)(v,{ref:a,iconNode:t,className:u(`lucide-${d(p(e))}`,`lucide-${e}`,r),...i}));return r.displayName=p(e),r},b=y(`check`,[[`path`,{d:`M20 6 9 17l-5-5`,key:`1gmf2c`}]]),x=y(`chevron-right`,[[`path`,{d:`m9 18 6-6-6-6`,key:`mthhwq`}]]),ee=y(`circle`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]]),S=y(`globe`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20`,key:`13o1zl`}],[`path`,{d:`M2 12h20`,key:`9i4pu4`}]]),C=y(`x`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]),w=(0,a.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`,{variants:{variant:{default:`border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90`,secondary:`border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90`,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`,outline:`text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground`}},defaultVariants:{variant:`default`}});function T({className:e,variant:n,asChild:a=!1,...o}){return(0,r.jsx)(a?i.Slot:`span`,{"data-slot":`badge`,className:t.t(w({variant:n}),e),...o})}function te({...e}){return(0,r.jsx)(s.Root,{"data-slot":`dialog`,...e})}function ne({...e}){return(0,r.jsx)(s.Trigger,{"data-slot":`dialog-trigger`,...e})}function E({...e}){return(0,r.jsx)(s.Portal,{"data-slot":`dialog-portal`,...e})}function D({...e}){return(0,r.jsx)(s.Close,{"data-slot":`dialog-close`,...e})}function O({className:e,...n}){return(0,r.jsx)(s.Overlay,{"data-slot":`dialog-overlay`,className:t.t(`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`,e),...n})}function k({className:e,children:n,showCloseButton:i=!0,...a}){let{t:c}=(0,o.useTranslation)();return(0,r.jsxs)(E,{"data-slot":`dialog-portal`,children:[(0,r.jsx)(O,{}),(0,r.jsxs)(s.Content,{"data-slot":`dialog-content`,className:t.t(`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`,e),...a,children:[n,i&&(0,r.jsxs)(s.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`,children:[(0,r.jsx)(C,{}),(0,r.jsx)(`span`,{className:`sr-only`,children:c(`dialog.close`,{defaultValue:`Close`})})]})]})]})}function A({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`dialog-header`,className:t.t(`flex flex-col gap-2 text-center sm:text-left`,e),...n})}function j({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`dialog-footer`,className:t.t(`flex flex-col-reverse gap-2 sm:flex-row sm:justify-end`,e),...n})}function M({className:e,...n}){return(0,r.jsx)(s.Title,{"data-slot":`dialog-title`,className:t.t(`text-lg leading-none font-semibold`,e),...n})}function N({className:e,...n}){return(0,r.jsx)(s.Description,{"data-slot":`dialog-description`,className:t.t(`text-muted-foreground text-sm`,e),...n})}function P({...e}){return(0,r.jsx)(c.Root,{"data-slot":`dropdown-menu`,...e})}function F({...e}){return(0,r.jsx)(c.Portal,{"data-slot":`dropdown-menu-portal`,...e})}function I({...e}){return(0,r.jsx)(c.Trigger,{"data-slot":`dropdown-menu-trigger`,...e})}function L({className:e,sideOffset:n=4,...i}){return(0,r.jsx)(c.Portal,{children:(0,r.jsx)(c.Content,{"data-slot":`dropdown-menu-content`,sideOffset:n,className:t.t(`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`,e),...i})})}function R({...e}){return(0,r.jsx)(c.Group,{"data-slot":`dropdown-menu-group`,...e})}function z({className:e,inset:n,variant:i=`default`,...a}){return(0,r.jsx)(c.Item,{"data-slot":`dropdown-menu-item`,"data-inset":n,"data-variant":i,className:t.t(`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`,e),...a})}function B({className:e,children:n,checked:i,...a}){return(0,r.jsxs)(c.CheckboxItem,{"data-slot":`dropdown-menu-checkbox-item`,className:t.t(`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`,e),checked:i,...a,children:[(0,r.jsx)(`span`,{className:`pointer-events-none absolute left-2 flex size-3.5 items-center justify-center`,children:(0,r.jsx)(c.ItemIndicator,{children:(0,r.jsx)(b,{className:`size-4`})})}),n]})}function V({...e}){return(0,r.jsx)(c.RadioGroup,{"data-slot":`dropdown-menu-radio-group`,...e})}function H({className:e,children:n,...i}){return(0,r.jsxs)(c.RadioItem,{"data-slot":`dropdown-menu-radio-item`,className:t.t(`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`,e),...i,children:[(0,r.jsx)(`span`,{className:`pointer-events-none absolute left-2 flex size-3.5 items-center justify-center`,children:(0,r.jsx)(c.ItemIndicator,{children:(0,r.jsx)(ee,{className:`size-2 fill-current`})})}),n]})}function re({className:e,inset:n,...i}){return(0,r.jsx)(c.Label,{"data-slot":`dropdown-menu-label`,"data-inset":n,className:t.t(`px-2 py-1.5 text-sm font-medium data-[inset]:pl-8`,e),...i})}function U({className:e,...n}){return(0,r.jsx)(c.Separator,{"data-slot":`dropdown-menu-separator`,className:t.t(`bg-border -mx-1 my-1 h-px`,e),...n})}function W({className:e,...n}){return(0,r.jsx)(`span`,{"data-slot":`dropdown-menu-shortcut`,className:t.t(`text-muted-foreground ml-auto text-xs tracking-widest`,e),...n})}function G({...e}){return(0,r.jsx)(c.Sub,{"data-slot":`dropdown-menu-sub`,...e})}function K({className:e,inset:n,children:i,...a}){return(0,r.jsxs)(c.SubTrigger,{"data-slot":`dropdown-menu-sub-trigger`,"data-inset":n,className:t.t(`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`,e),...a,children:[i,(0,r.jsx)(x,{className:`ml-auto size-4`})]})}function q({className:e,...n}){return(0,r.jsx)(c.SubContent,{"data-slot":`dropdown-menu-sub-content`,className:t.t(`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`,e),...n})}var J=(0,a.cva)(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 cursor-pointer disabled:cursor-not-allowed 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:ring-[3px]`,{variants:{variant:{default:[`bg-gradient-to-r from-[var(--vg-accent-fill-from)] to-[var(--vg-accent-fill-to)] text-white`,`shadow-md shadow-[var(--vg-accent-shadow)]`,`hover:from-[var(--vg-accent-fill-from-hover)] hover:to-[var(--vg-accent-fill-to-hover)]`,`hover:shadow-lg hover:shadow-[var(--vg-accent-shadow-hover)]`,`focus-visible:ring-[var(--vg-accent-ring)]`].join(` `),secondary:[`bg-gradient-to-r from-slate-600 to-slate-700 text-white`,`shadow-md shadow-slate-500/25`,`hover:from-slate-700 hover:to-slate-800`,`hover:shadow-lg hover:shadow-slate-500/30`,`focus-visible:ring-slate-500/50`,`dark:from-slate-500 dark:to-slate-600`,`dark:shadow-slate-500/20`,`dark:hover:from-slate-600 dark:hover:to-slate-700`,`dark:hover:shadow-slate-500/25`,`dark:focus-visible:ring-slate-400/50`].join(` `),destructive:[`bg-gradient-to-r from-red-600 to-rose-600 text-white`,`shadow-md shadow-red-500/25`,`hover:from-red-700 hover:to-rose-700`,`hover:shadow-lg hover:shadow-red-500/30`,`focus-visible:ring-red-500/50`,`dark:from-red-500 dark:to-rose-500`,`dark:shadow-red-500/20`,`dark:hover:from-red-600 dark:hover:to-rose-600`,`dark:hover:shadow-red-500/25`,`dark:focus-visible:ring-red-400/50`].join(` `),success:[`bg-gradient-to-r from-emerald-600 to-teal-600 text-white`,`shadow-md shadow-emerald-500/25`,`hover:from-emerald-700 hover:to-teal-700`,`hover:shadow-lg hover:shadow-emerald-500/30`,`focus-visible:ring-emerald-500/50`,`dark:from-emerald-500 dark:to-teal-500`,`dark:shadow-emerald-500/20`,`dark:hover:from-emerald-600 dark:hover:to-teal-600`,`dark:hover:shadow-emerald-500/25`,`dark:focus-visible:ring-emerald-400/50`].join(` `),outline:[`border-2 border-[var(--vg-accent-fg)] text-[var(--vg-accent-fg)] bg-transparent`,`hover:bg-[var(--vg-accent-fill-from)] hover:text-white`,`shadow-sm hover:shadow-md hover:shadow-[var(--vg-accent-shadow)]`,`focus-visible:ring-[var(--vg-accent-ring)]`].join(` `),ghost:[`bg-transparent text-[var(--vg-accent-fg)]`,`hover:bg-[var(--vg-accent-surface)]`,`focus-visible:ring-[var(--vg-accent-ring)]`].join(` `)},size:{default:`h-11 px-5 py-2 has-[>svg]:px-4`,sm:`h-9 rounded-md gap-1.5 px-4 has-[>svg]:px-3 text-xs`,lg:`h-12 rounded-md px-8 has-[>svg]:px-6 text-base`,icon:`size-11`,"icon-sm":`size-9`,"icon-lg":`size-12`}},defaultVariants:{variant:`default`,size:`default`}});function Y({className:e,variant:n,size:a,asChild:o=!1,loading:s=!1,...c}){let l=t.t(J({variant:n,size:a,className:e}));return(0,r.jsx)(o?i.Slot:`button`,{"data-slot":`gradient-button`,className:l,disabled:s||c.disabled,...c,children:s?(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)(`svg`,{className:`size-4 animate-spin`,xmlns:`http://www.w3.org/2000/svg`,fill:`none`,viewBox:`0 0 24 24`,children:[(0,r.jsx)(`circle`,{className:`opacity-25`,cx:`12`,cy:`12`,r:`10`,stroke:`currentColor`,strokeWidth:`4`}),(0,r.jsx)(`path`,{className:`opacity-75`,fill:`currentColor`,d:`M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z`})]}),c.children]}):c.children})}function X({className:e,type:n,...i}){return(0,r.jsx)(`input`,{type:n,"data-slot":`input`,className:t.t(`file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent pl-3 pr-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm`,`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`,e),...i})}function ie({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`skeleton`,className:t.t(`bg-accent animate-pulse rounded-md`,e),...n})}function Z({delayDuration:e=0,...t}){return(0,r.jsx)(l.Provider,{"data-slot":`tooltip-provider`,delayDuration:e,...t})}function ae({...e}){return(0,r.jsx)(Z,{children:(0,r.jsx)(l.Root,{"data-slot":`tooltip`,...e})})}function oe({...e}){return(0,r.jsx)(l.Trigger,{"data-slot":`tooltip-trigger`,...e})}function se({className:e,sideOffset:n=0,children:i,...a}){return(0,r.jsx)(l.Portal,{children:(0,r.jsxs)(l.Content,{"data-slot":`tooltip-content`,sideOffset:n,className:t.t(`bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance`,e),...a,children:[i,(0,r.jsx)(l.Arrow,{className:`bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]`})]})})}var ce=({text:e,href:n,onClick:i,className:a,prefix:o})=>{if(!e)return null;let s=t.r(e);return(0,r.jsxs)(T,{variant:`outline`,title:e,onClick:()=>n&&i?.(n),className:t.t(`vg-badge-colorful text-xs font-medium px-2 py-0.5 gap-1.5 cursor-pointer transition-all hover:opacity-80`,`dynamic-badge-${e.length}`,a),style:{"--badge-bg":s.light.bg,"--badge-text":s.light.text,"--badge-border":s.light.border,"--badge-dark-bg":s.dark.bg,"--badge-dark-text":s.dark.text,"--badge-dark-border":s.dark.border},children:[o,(0,r.jsx)(`span`,{children:e})]})},le={AR:`SA`,BN:`BD`,CA:`ES`,CS:`CZ`,DA:`DK`,DE:`DE`,EL:`GR`,EN:`US`,EU:`ES`,FA:`IR`,FI:`FI`,FIL:`PH`,FR:`FR`,GA:`IE`,GL:`ES`,GU:`IN`,HE:`IL`,HI:`IN`,HU:`HU`,ID:`ID`,IT:`IT`,JA:`JP`,KN:`IN`,KO:`KR`,MR:`IN`,MSA:`MY`,NL:`NL`,NO:`NO`,PL:`PL`,PT:`BR`,RO:`RO`,RU:`RU`,ES:`ES`,SV:`SE`,TA:`IN`,TH:`TH`,TR:`TR`,UK:`UA`,UR:`PK`,VI:`VN`,ZH:`CN`},Q={UK:`GB`};function $(e){if(!e)return``;let{language:n,region:r}=t.i(e);if(r)return(Q[r]||r).toLowerCase();let i=le[n];return i?i.toLowerCase():(Q[n]||n).toLowerCase()}var ue=({locale:e,className:i})=>{let a=$(e),[o,s]=(0,n.useState)(null),c=o===a;return(0,r.jsxs)(T,{variant:`secondary`,className:t.t(`font-mono gap-2 py-1 pl-1 pr-2 w-fit`,i),children:[!c&&a?(0,r.jsx)(`img`,{src:`https://flagcdn.com/w40/${a}.png`,alt:a,onError:()=>s(a),className:`w-5 h-3.5 object-cover rounded-sm shadow-sm`}):(0,r.jsx)(S,{className:`w-3.5 h-3.5 text-muted-foreground`}),(0,r.jsx)(`span`,{className:`text-xs font-bold uppercase tracking-tight leading-none`,children:e})]})};Object.defineProperty(exports,"A",{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,"B",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"C",{enumerable:!0,get:function(){return G}}),Object.defineProperty(exports,"D",{enumerable:!0,get:function(){return te}}),Object.defineProperty(exports,"E",{enumerable:!0,get:function(){return I}}),Object.defineProperty(exports,"F",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"H",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"I",{enumerable:!0,get:function(){return ne}}),Object.defineProperty(exports,"L",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"M",{enumerable:!0,get:function(){return A}}),Object.defineProperty(exports,"N",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"O",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"P",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"R",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"S",{enumerable:!0,get:function(){return W}}),Object.defineProperty(exports,"T",{enumerable:!0,get:function(){return K}}),Object.defineProperty(exports,"V",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return re}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return se}}),Object.defineProperty(exports,"b",{enumerable:!0,get:function(){return H}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return ie}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return J}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return z}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return R}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return ae}}),Object.defineProperty(exports,"j",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"k",{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return X}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return L}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return $}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return Z}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return B}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return ce}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return oe}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return ue}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return Y}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return F}}),Object.defineProperty(exports,"w",{enumerable:!0,get:function(){return q}}),Object.defineProperty(exports,"x",{enumerable:!0,get:function(){return U}}),Object.defineProperty(exports,"y",{enumerable:!0,get:function(){return V}}),Object.defineProperty(exports,"z",{enumerable:!0,get:function(){return C}});