@viglet/viglet-design-system 2026.3.11 → 2026.3.13

package/docs/BENTO-AUTHORING.md

@@ -75,7 +75,7 @@ Anything past them — a tenant, a review count — belongs to the surface that
 
 ## 2. Structure — thin config, not bespoke pages
 
-There are three page shapes. Almost every screen is one of them plus data.
+There are four page shapes. Almost every screen is one of them plus data.
 
 **A detail screen** is `BentoEntityShell` wrapping a form. The shell owns the
 identity hero, the save-bar morph and the delete flow; the form is a render prop
@@ -102,6 +102,16 @@ table as `selectionScope`, so a selection never outlives the rows it was made on
 **A form screen with its own hero** is `BentoFormHero` as the first child inside
 the `<form>` it submits. It renders both halves of the morph itself.
 
+**A two-pane screen**, such as a form beside its live preview or a source beside its
+translation, is `BentoSplitPage` under the page's one hero, on a route that passes
+`column="wide"`. Pass the two panes and a label for each. Each pane scrolls on its own,
+so the fields and what they change stay in view together, and the hero and the save bar
+span both. The reader drags the ratio, and `storageKey` remembers it per viewer. At
+phone width the panes become one with a labelled switch, and neither unmounts, so a form
+keeps what was typed while its preview is shown. Never lay two panes out with a grid of
+your own: who scrolls, the reading width and the phone fallback are what this shape
+decides once.
+
 **A frosted box with arbitrary content** — a stats strip, a toolbar, a listing,
 a message — is `BentoPanel`. It is the one container in this layer with **no
 heading**, which is the point rather than an omission: those surfaces sit under a
@@ -290,6 +300,7 @@ push, and a violation fails the build.
 Which components are the shared layer and which stay in a product is
 [docs/BENTO-BOUNDARY.md](BENTO-BOUNDARY.md).
 
-Every rule above, drawn rather than stated, is [docs/reference/](reference/) — eight
+Every rule above, drawn rather than stated, is [docs/reference/]
+
 artboards, one per decision. Look there when a sentence here is clear and you still cannot
 picture the page it describes.

package/docs/reference/README.md

@@ -1,6 +1,6 @@
 # The page reference
 
-Nine artboards, one per decision that makes two products built from this package stop
+Ten artboards, one per decision that makes two products built from this package stop
 looking like one. They are the composition half of the catalogue: a story proves a component
 in isolation, and these prove the arrangement.
 
@@ -20,6 +20,7 @@ prose. Where the two disagree, the contract is right and an artboard is stale.
 | The shapes | `form-hero.dc.html`     | a form with no entity behind it yet                                       |
 | The shapes | `panel.dc.html`         | the frosted box with no heading, and why it has none                      |
 | The shapes | `grounds.dc.html`       | the same components on both grounds, with the ratios                      |
+| The shapes | `split.dc.html`         | a two-pane screen: who scrolls, who owns the ratio, and phone width       |
 
 `canvas.json` places them and names the two pages.
 

package/docs/reference/canvas.json

@@ -84,6 +84,15 @@
       "h": 700,
       "title": "Both grounds",
       "page": "vds-shapes"
+    },
+    {
+      "file": "split.dc.html",
+      "x": 2500,
+      "y": 900,
+      "w": 1280,
+      "h": 760,
+      "title": "A two-pane screen",
+      "page": "vds-shapes"
     }
   ],
   "annotations": [
@@ -101,7 +110,7 @@
       "x": 0,
       "y": -190,
       "w": 700,
-      "text": "Almost every screen is one of three shapes plus data: a detail is BentoEntityShell wrapping a form, a list is one BentoListPage call with a renderTile, a form with no entity behind it yet is BentoFormHero as the first child of its form.\nThe panel is the fourth thing and not a shape: a frosted box with no heading, for whatever a hero already named.\nThe last artboard is the same components on both grounds, because one look means one look twice."
+      "text": "Almost every screen is one of four shapes plus data: a detail is BentoEntityShell wrapping a form, a list is one BentoListPage call with a renderTile, a form with no entity behind it yet is BentoFormHero as the first child of its form, and a form beside its preview is BentoSplitPage under one hero.\nThe panel is the fifth thing and not a shape: a frosted box with no heading, for whatever a hero already named.\nThe last artboard is the same components on both grounds, because one look means one look twice."
     }
   ],
   "launch": { "view": "canvas", "page": "vds-shell" }

package/docs/reference/split.dc.html

@@ -0,0 +1,164 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
+  <style>
+    body { margin: 0; background: #ffffff; }
+    /* Opened straight from the file tree, `x-dc` is an unknown element and so
+       lays out inline, and `helmet` would render its own contents as text. The
+       canvas runtime replaces both; these two rules only matter for the raw
+       open, which is how a reader in this repository will look at it. */
+    x-dc { display: block; }
+    helmet { display: none; }
+    .vg { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
+    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+    .eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; }
+    .glass { background: rgba(255,255,255,0.72); border: 1px solid rgba(229,229,229,0.7); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); }
+    .chip { display: flex; align-items: center; justify-content: center; border-radius: 11px; background-image: linear-gradient(to bottom right, #155dfc, #4f39f6); color: #ffffff; flex: 0 0 auto; }
+    .field { height: 26px; border: 1px solid #e5e5e5; border-radius: 10px; background: #ffffff; }
+    .flabel { font-size: 10px; color: #737373; margin-bottom: 4px; }
+    .btn { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 10px; font-size: 12px; font-weight: 500; }
+    .line { height: 7px; border-radius: 999px; background: #ededed; }
+    .scroll { position: absolute; right: 3px; width: 4px; border-radius: 999px; background: #d4d4d4; }
+    .tag { position: absolute; background: #ffffff; padding: 0 5px; font-size: 9px; color: #1447e6; }
+  </style>
+</helmet>
+
+<div class="vg" style="position:relative;width:1280px;height:760px;background:#fafafa;color:#0a0a0a;overflow:hidden;display:flex;flex-direction:column">
+
+  <div style="padding:16px 24px 0">
+    <div class="eyebrow" style="color:#1447e6">REFERENCE</div>
+    <div style="display:flex;align-items:baseline;gap:12px;margin-top:4px">
+      <div style="font-size:21px;font-weight:600;letter-spacing:-0.015em">A two-pane screen</div>
+      <div style="font-size:12.5px;color:#737373"><span class="mono" style="font-size:12px">BentoSplitPage</span> under the page's one hero, on a route that passes <span class="mono" style="font-size:12px">column="wide"</span>.</div>
+    </div>
+  </div>
+
+  <div style="flex:1;min-height:0;display:grid;grid-template-columns:1fr 250px 290px;gap:20px;padding:14px 24px 0">
+
+    <!-- desktop -->
+    <div style="display:flex;flex-direction:column;gap:9px;min-height:0">
+      <div class="eyebrow" style="color:#737373">DESKTOP</div>
+      <div style="position:relative;flex:1;min-height:0;border-radius:14px;background:#ffffff;border:1px solid #e5e5e5;padding:16px;overflow:hidden;display:flex;flex-direction:column;gap:12px">
+
+        <div style="border:1px dashed rgba(20,71,230,0.4);border-radius:14px;padding:12px;position:relative">
+          <div class="tag mono" style="right:9px;top:-8px">the hero -- spans both panes</div>
+          <div style="display:flex;align-items:flex-start;gap:11px">
+            <div class="chip" style="width:38px;height:38px;border-radius:12px"></div>
+            <div style="flex:1;min-width:0">
+              <div style="font-size:10px;color:#737373;letter-spacing:0.05em;font-weight:600">&larr; EYEBROW</div>
+              <div style="font-size:17px;font-weight:600;letter-spacing:-0.015em;margin-top:2px">Entity name</div>
+            </div>
+            <div style="display:flex;align-items:center;gap:7px">
+              <div class="btn" style="border:1px solid #e5e5e5;color:#404040">Cancel</div>
+              <div class="btn" style="background:#171717;color:#fafafa">Save</div>
+            </div>
+          </div>
+        </div>
+
+        <div style="position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 14px 1fr;border:1px dashed rgba(20,71,230,0.4);border-radius:14px;padding:12px 10px">
+          <div class="tag mono" style="left:12px;top:-8px">BentoSplitPage -- height under the hero</div>
+
+          <!-- primary pane -->
+          <div style="position:relative;min-height:0;overflow:hidden;padding-right:12px">
+            <div class="mono" style="font-size:9px;color:#a1a1a1;margin-bottom:6px">section aria-label="Form"</div>
+            <div class="glass" style="border-radius:20px;padding:12px;margin-bottom:10px">
+              <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+                <div class="chip" style="width:24px;height:24px;border-radius:8px"></div>
+                <div style="font-size:12.5px;font-weight:600">Field group</div>
+              </div>
+              <div><div class="flabel">Label</div><div class="field"></div></div>
+              <div style="margin-top:8px"><div class="flabel">Label</div><div class="field" style="height:64px"></div></div>
+            </div>
+            <div class="glass" style="border-radius:20px;padding:12px">
+              <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px">
+                <div class="chip" style="width:24px;height:24px;border-radius:8px"></div>
+                <div style="font-size:12.5px;font-weight:600">Field group</div>
+              </div>
+              <div><div class="flabel">Label</div><div class="field"></div></div>
+            </div>
+            <div class="scroll" style="top:18px;height:90px"></div>
+          </div>
+
+          <!-- the handle -->
+          <div style="display:flex;justify-content:center;position:relative">
+            <div style="width:1px;background:#e5e5e5;height:100%"></div>
+            <div style="position:absolute;top:50%;margin-top:-8px;width:12px;height:16px;border:1px solid #e5e5e5;border-radius:3px;background:#ededed"></div>
+          </div>
+
+          <!-- secondary pane -->
+          <div style="position:relative;min-height:0;overflow:hidden;padding-left:12px">
+            <div class="mono" style="font-size:9px;color:#a1a1a1;margin-bottom:6px">section aria-label="Preview"</div>
+            <div style="font-size:16px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px">Entity name</div>
+            <div class="line" style="width:94%;margin-bottom:6px"></div>
+            <div class="line" style="width:88%;margin-bottom:6px"></div>
+            <div class="line" style="width:91%;margin-bottom:6px"></div>
+            <div class="line" style="width:62%;margin-bottom:14px"></div>
+            <div class="line" style="width:90%;margin-bottom:6px"></div>
+            <div class="line" style="width:84%;margin-bottom:6px"></div>
+            <div class="line" style="width:70%"></div>
+            <div class="scroll" style="top:60px;height:140px"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- phone -->
+    <div style="display:flex;flex-direction:column;gap:9px;min-height:0">
+      <div class="eyebrow" style="color:#737373">PHONE WIDTH</div>
+      <div style="flex:1;min-height:0;border-radius:26px;background:#ffffff;border:1px solid #e5e5e5;padding:14px 12px;overflow:hidden;display:flex;flex-direction:column;gap:10px">
+        <div style="display:flex;align-items:center;gap:8px">
+          <div class="chip" style="width:28px;height:28px;border-radius:9px"></div>
+          <div style="font-size:14px;font-weight:600">Entity name</div>
+        </div>
+        <div style="position:relative;align-self:flex-start;display:flex;gap:2px;padding:3px;border-radius:10px;background:#f5f5f5">
+          <div style="padding:4px 10px;border-radius:7px;background:#ffffff;font-size:11.5px;font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,0.06)">Form</div>
+          <div style="padding:4px 10px;border-radius:7px;font-size:11.5px;color:#737373">Preview</div>
+        </div>
+        <div class="mono" style="font-size:9px;color:#1447e6">tablist aria-label="Show"</div>
+        <div class="glass" style="border-radius:18px;padding:11px">
+          <div><div class="flabel">Label</div><div class="field"></div></div>
+          <div style="margin-top:8px"><div class="flabel">Label</div><div class="field" style="height:56px"></div></div>
+          <div style="margin-top:8px"><div class="flabel">Label</div><div class="field"></div></div>
+        </div>
+        <div style="border:1px dashed #d4d4d4;border-radius:12px;padding:8px 10px;font-size:10.5px;color:#737373;line-height:1.45">Preview is hidden, not unmounted: switching back finds the fields as they were typed.</div>
+      </div>
+    </div>
+
+    <!-- the rules -->
+    <div style="display:flex;flex-direction:column;gap:11px;min-height:0">
+      <div class="eyebrow" style="color:#737373">WHAT THE SHAPE DECIDES</div>
+
+      <div style="border:1px solid #e5e5e5;background:#ffffff;border-radius:14px;padding:13px">
+        <div class="eyebrow" style="color:#737373;margin-bottom:6px">EACH PANE SCROLLS ON ITS OWN</div>
+        <div style="font-size:11.5px;color:#404040;line-height:1.5">The fields and what they change stay in view together. The hero and the save bar sit above both, so neither pane owns them.</div>
+      </div>
+
+      <div style="border:1px solid #e5e5e5;background:#ffffff;border-radius:14px;padding:13px">
+        <div class="eyebrow" style="color:#737373;margin-bottom:6px">THE READER OWNS THE RATIO</div>
+        <div style="font-size:11.5px;color:#404040;line-height:1.5">Dragged at the handle, and remembered per viewer under <span class="mono" style="font-size:11px">storageKey</span>. It is a convenience, so storage that is blocked only means it starts at the default.</div>
+      </div>
+
+      <div style="border:1px solid #e5e5e5;background:#ffffff;border-radius:14px;padding:13px">
+        <div class="eyebrow" style="color:#737373;margin-bottom:6px">THE SECOND PANE NEVER VANISHES</div>
+        <div style="font-size:11.5px;color:#404040;line-height:1.5">At phone width the two become one with a labelled switch. Nothing drops off the edge of a narrow screen unannounced.</div>
+      </div>
+
+      <div style="border:1px solid rgba(251,44,54,0.3);background:rgba(251,44,54,0.05);border-radius:14px;padding:13px">
+        <div class="eyebrow" style="color:#c10007;margin-bottom:5px">NOT A GRID OF YOUR OWN</div>
+        <div style="font-size:11.5px;color:#404040;line-height:1.5">Two columns in a page's own grid settle none of the three decisions above, and each page settles them differently.</div>
+      </div>
+    </div>
+  </div>
+
+  <div style="height:18px"></div>
+</div>
+</x-dc>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viglet/viglet-design-system",
-  "version": "2026.3.11",
+  "version": "2026.3.13",
   "type": "module",
   "description": "Viglet Design System - Shared components, hooks, utilities and design tokens for Viglet products",
   "license": "Apache-2.0",

package/scripts/lib/contrast.mjs

@@ -196,8 +196,12 @@ export function parseColour(value, tokens = new Map()) {
     const a = parseColour(first.colour, tokens)
     const b = parseColour(second.colour, tokens)
     if (!a || !b) return null
-    const lerp = (x, y) => x * p1 + y * (1 - p1)
-    return { L: lerp(a.L, b.L), a: lerp(a.a, b.a), b: lerp(a.b, b.b), alpha: lerp(a.alpha, b.alpha) }
+    // Premultiplied, as CSS mixes: a colour mixed with `transparent` keeps its
+    // hue and loses alpha, rather than being pulled toward black.
+    const alpha = a.alpha * p1 + b.alpha * (1 - p1)
+    if (alpha === 0) return { L: 0, a: 0, b: 0, alpha: 0 }
+    const lerp = (x, y) => (x * a.alpha * p1 + y * b.alpha * (1 - p1)) / alpha
+    return { L: lerp(a.L, b.L), a: lerp(a.a, b.a), b: lerp(a.b, b.b), alpha }
   }
   return null
 }
@@ -218,6 +222,20 @@ function splitTopLevel(text) {
   return out
 }
 
+const linearToSrgb = (v) => (v <= 0.0031308 ? v * 12.92 : 1.055 * v ** (1 / 2.4) - 0.055)
+
+/**
+ * A translucent colour laid over an opaque one, as a browser composites: in
+ * gamma-encoded sRGB. Null where the ground is not opaque.
+ */
+export function over(top, ground) {
+  if (!top || !ground || ground.alpha < 1) return null
+  if (top.alpha >= 1) return top
+  const [front, back] = [oklabToLinear(top).map(linearToSrgb), oklabToLinear(ground).map(linearToSrgb)]
+  const mixed = front.map((channel, i) => channel * top.alpha + back[i] * (1 - top.alpha))
+  return { ...linearToOklab(mixed.map(srgbToLinear)), alpha: 1 }
+}
+
 /** WCAG relative luminance of an opaque colour; a translucent one has no single answer. */
 export function luminance(colour) {
   if (!colour || colour.alpha < 1) return null
@@ -236,11 +254,16 @@ export function ratio(front, behind) {
  * Pairs a name alone cannot derive: the page and muted text on it, the accented
  * label on the page, and the white label the gradient button and the checked
  * switch draw on the accent fill.
+ *
+ * VDS179 — and the accented label on the accent's own tints, which the icon
+ * picker draws. The tints are translucent, so they are measured laid over the page.
  */
 const NAMED_PAIRS = [
   ["--vg-background", "--vg-foreground"],
   ["--vg-background", "--vg-muted-foreground"],
   ["--vg-background", "--vg-accent-fg"],
+  ["--vg-accent-surface", "--vg-accent-fg"],
+  ["--vg-accent-surface-strong", "--vg-accent-fg"],
   ["--vg-accent-fill-from", "white"],
   ["--vg-accent-fill-to", "white"],
 ]
@@ -284,8 +307,11 @@ export function measurePairs(sheets, ground) {
     }
     return found
   }
+  const page = parseColour(tokens.get("--vg-background") ?? "", tokens)
   return pairsOf(tokens).map(([surface, foreground]) => {
-    const behind = luminance(parseColour(tokens.get(surface) ?? "", tokens))
+    // A translucent surface is read where it is drawn: over the page.
+    const drawn = parseColour(tokens.get(surface) ?? "", tokens)
+    const behind = luminance(drawn && drawn.alpha < 1 && surface !== "--vg-background" ? over(drawn, page) : drawn)
     const front = luminance(parseColour(foreground === "white" ? "white" : (tokens.get(foreground) ?? ""), tokens))
     const unread = [behind === null ? surface : null, front === null ? foreground : null].filter(Boolean)
     return {

package/scripts/page-reference.mjs

@@ -4,7 +4,7 @@
  *
  * The catalogue answers "does this component exist". What it cannot answer is
  * "does this page read as the same product", and the answer to that lives in
- * two documents and nine artboards which are not in anybody's `node_modules`
+ * two documents and ten artboards which are not in anybody's `node_modules`
  * by reading them: a contract a product author has to browse a repository to
  * find is one they read after the fifth screen, which is what BENTO-AUTHORING's
  * own opening warns against.
@@ -68,7 +68,7 @@ const REFERENCE = join(payload, "docs", "reference")
 function orientation(dir, artboards) {
   return `---
 name: viglet-ds-pages
-description: Building or changing a page with @viglet/viglet-design-system/bento -- the shell, the three page shapes, the panel, and which tokens a product claims. Load before the first screen, and before adding a region to one.
+description: Building or changing a page with @viglet/viglet-design-system/bento -- the shell, the four page shapes, the panel, and which tokens a product claims. Load before the first screen, and before adding a region to one.
 vds-version: ${version}
 ---
 
@@ -81,7 +81,7 @@ a correction belongs in the package so every consumer gets it.
 ## Read first
 
 - **[authoring.md](authoring.md)** -- the contract. The shell and who owns each region, the
-  three page shapes, the panel, colour and the tokens a product claims, i18n, accessibility,
+  four page shapes, the panel, colour and the tokens a product claims, i18n, accessibility,
   responsive, tests. Read it before the first screen, not after the fifth.
 - **[boundary.md](boundary.md)** -- which components are the shared layer and which stay in
   a product, and why.

package/dist/badge-locale-CJkHDlPg.cjs

@@ -1 +0,0 @@
-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);var c=(...e)=>e.filter((e,t,n)=>!!e&&e.trim()!==``&&n.indexOf(e)===t).join(` `).trim(),l=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase(),u=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,t,n)=>n?n.toUpperCase():t.toLowerCase()),d=e=>{let t=u(e);return t.charAt(0).toUpperCase()+t.slice(1)},f={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`},p=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},m=(0,n.createContext)({}),h=()=>(0,n.useContext)(m),g=(0,n.forwardRef)(({color:e,size:t,strokeWidth:r,absoluteStrokeWidth:i,className:a=``,children:o,iconNode:s,...l},u)=>{let{size:d=24,strokeWidth:m=2,absoluteStrokeWidth:g=!1,color:_=`currentColor`,className:v=``}=h()??{},y=i??g?Number(r??m)*24/Number(t??d):r??m;return(0,n.createElement)(`svg`,{ref:u,...f,width:t??d??f.width,height:t??d??f.height,stroke:e??_,strokeWidth:y,className:c(`lucide`,v,a),...!o&&!p(l)&&{"aria-hidden":`true`},...l},[...s.map(([e,t])=>(0,n.createElement)(e,t)),...Array.isArray(o)?o:[o]])}),_=(e,t)=>{let r=(0,n.forwardRef)(({className:r,...i},a)=>(0,n.createElement)(g,{ref:a,iconNode:t,className:c(`lucide-${l(d(e))}`,`lucide-${e}`,r),...i}));return r.displayName=d(e),r},v=_(`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`}]]),y=_(`x`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]),b=(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 x({className:e,variant:n,asChild:a=!1,...o}){return(0,r.jsx)(a?i.Slot:`span`,{"data-slot":`badge`,className:t.t(b({variant:n}),e),...o})}function S(e,t,n){let r=e||t===!0||t===`true`;return{inert:r,props:{"aria-busy":e?`true`:void 0,"aria-disabled":r?`true`:void 0,onClick:e=>{if(r){e.preventDefault(),e.stopPropagation();return}n?.(e)}}}}function C(){return(0,r.jsxs)(`svg`,{"aria-hidden":`true`,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`})]})}function w({...e}){return(0,r.jsx)(s.Root,{"data-slot":`dialog`,...e})}function T({...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)(y,{}),(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})}var P=(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 F({className:e,variant:n,size:a,asChild:o=!1,loading:s=!1,onClick:c,children:l,...u}){let d=S(s,u[`aria-disabled`],c),f=t.t(P({variant:n,size:a,className:e}),d.inert&&(s?`cursor-progress`:`cursor-not-allowed opacity-50`));return(0,r.jsx)(o?i.Slot:`button`,{"data-slot":`gradient-button`,className:f,...u,...d.props,children:o?l:(0,r.jsxs)(r.Fragment,{children:[s&&(0,r.jsx)(C,{}),l]})})}function I({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 L({className:e,...n}){return(0,r.jsx)(`div`,{"data-slot":`skeleton`,className:t.t(`bg-accent animate-pulse rounded-md`,e),...n})}var R=({text:e,href:n,onClick:i,className:a,prefix:o})=>{if(!e)return null;let s=t.r(e);return(0,r.jsxs)(x,{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})]})},z={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`},B={UK:`GB`};function V(e){if(!e)return``;let{language:n,region:r}=t.i(e);if(r)return(B[r]||r).toLowerCase();let i=z[n];return i?i.toLowerCase():(B[n]||n).toLowerCase()}var H=({locale:e,className:i})=>{let a=V(e),[o,s]=(0,n.useState)(null),c=o===a;return(0,r.jsxs)(x,{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)(v,{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,"C",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"S",{enumerable:!0,get:function(){return y}}),Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return I}}),Object.defineProperty(exports,"b",{enumerable:!0,get:function(){return x}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return w}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return L}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return V}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return F}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return A}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return R}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return H}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,"x",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"y",{enumerable:!0,get:function(){return S}});

package/dist/user.context-hbdvmXOn.cjs

@@ -1 +0,0 @@
-const e=require("./rolldown-runtime-BocRIvOZ.cjs"),t=require("./utils-Oagwe_oa.cjs"),n=require("./badge-locale-CJkHDlPg.cjs");let r=require("react");r=e.t(r,1);let i=require("react/jsx-runtime"),a=require("@radix-ui/react-avatar");a=e.t(a,1);let o=require("@radix-ui/react-slot"),s=require("class-variance-authority"),c=require("react-i18next"),l=require("@radix-ui/react-checkbox");l=e.t(l,1);let u=require("@radix-ui/react-dropdown-menu");u=e.t(u,1);let d=require("@tabler/icons-react"),f=require("@iconify/react"),p=require("radix-ui"),m=require("@radix-ui/react-tooltip");m=e.t(m,1);let h=require("next-themes"),g=require("sonner");var _=n.C(`check`,[[`path`,{d:`M20 6 9 17l-5-5`,key:`1gmf2c`}]]),v=n.C(`chevron-right`,[[`path`,{d:`m9 18 6-6-6-6`,key:`mthhwq`}]]),y=n.C(`circle-check`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m9 12 2 2 4-4`,key:`dzmm74`}]]),b=n.C(`circle`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}]]),x=n.C(`info`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`M12 16v-4`,key:`1dtifu`}],[`path`,{d:`M12 8h.01`,key:`e9boi3`}]]),S=n.C(`loader-circle`,[[`path`,{d:`M21 12a9 9 0 1 1-6.219-8.56`,key:`13zald`}]]),C=n.C(`octagon-x`,[[`path`,{d:`m15 9-6 6`,key:`1uzhvr`}],[`path`,{d:`M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586z`,key:`2d38gg`}],[`path`,{d:`m9 9 6 6`,key:`z0biqf`}]]),w=n.C(`triangle-alert`,[[`path`,{d:`m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3`,key:`wmoenq`}],[`path`,{d:`M12 9v4`,key:`juzpu7`}],[`path`,{d:`M12 17h.01`,key:`p32p05`}]]),T=(0,s.cva)(`inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all 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: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`,{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`,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`,secondary:`bg-secondary text-secondary-foreground hover:bg-secondary/80`,ghost:`hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50`,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`}},defaultVariants:{variant:`default`,size:`default`}});function E({className:e,variant:r,size:a,asChild:s=!1,loading:c=!1,onClick:l,children:u,...d}){let f=s?o.Slot:`button`,p=n.y(c,d[`aria-disabled`],l);return(0,i.jsx)(f,{"data-slot":`button`,className:t.t(T({variant:r,size:a,className:e}),p.inert&&(c?`cursor-progress`:`cursor-not-allowed opacity-50`)),...d,...p.props,children:s?u:(0,i.jsxs)(i.Fragment,{children:[c&&(0,i.jsx)(n.v,{}),u]})})}function D({className:e,...n}){return(0,i.jsx)(l.Root,{"data-slot":`checkbox`,className:t.t(`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`,e),...n,children:(0,i.jsx)(l.Indicator,{"data-slot":`checkbox-indicator`,className:`grid place-content-center text-current transition-none`,children:(0,i.jsx)(_,{className:`size-3.5`})})})}function O({...e}){return(0,i.jsx)(u.Root,{"data-slot":`dropdown-menu`,...e})}function k({...e}){return(0,i.jsx)(u.Portal,{"data-slot":`dropdown-menu-portal`,...e})}function A({...e}){return(0,i.jsx)(u.Trigger,{"data-slot":`dropdown-menu-trigger`,...e})}function j({className:e,sideOffset:n=4,...r}){return(0,i.jsx)(u.Portal,{children:(0,i.jsx)(u.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),...r})})}function M({...e}){return(0,i.jsx)(u.Group,{"data-slot":`dropdown-menu-group`,...e})}function N({className:e,inset:n,variant:r=`default`,...a}){return(0,i.jsx)(u.Item,{"data-slot":`dropdown-menu-item`,"data-inset":n,"data-variant":r,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 P({className:e,children:n,checked:r,...a}){return(0,i.jsxs)(u.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:r,...a,children:[(0,i.jsx)(`span`,{className:`pointer-events-none absolute left-2 flex size-3.5 items-center justify-center`,children:(0,i.jsx)(u.ItemIndicator,{children:(0,i.jsx)(_,{className:`size-4`})})}),n]})}function ee({...e}){return(0,i.jsx)(u.RadioGroup,{"data-slot":`dropdown-menu-radio-group`,...e})}function te({className:e,children:n,...r}){return(0,i.jsxs)(u.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),...r,children:[(0,i.jsx)(`span`,{className:`pointer-events-none absolute left-2 flex size-3.5 items-center justify-center`,children:(0,i.jsx)(u.ItemIndicator,{children:(0,i.jsx)(b,{className:`size-2 fill-current`})})}),n]})}function ne({className:e,inset:n,...r}){return(0,i.jsx)(u.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),...r})}function re({className:e,...n}){return(0,i.jsx)(u.Separator,{"data-slot":`dropdown-menu-separator`,className:t.t(`bg-border -mx-1 my-1 h-px`,e),...n})}function ie({className:e,...n}){return(0,i.jsx)(`span`,{"data-slot":`dropdown-menu-shortcut`,className:t.t(`text-muted-foreground ml-auto text-xs tracking-widest`,e),...n})}function ae({...e}){return(0,i.jsx)(u.Sub,{"data-slot":`dropdown-menu-sub`,...e})}function oe({className:e,inset:n,children:r,...a}){return(0,i.jsxs)(u.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:[r,(0,i.jsx)(v,{className:`ml-auto size-4`})]})}function se({className:e,...n}){return(0,i.jsx)(u.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 F=[`lucide`,`tabler`,`mdi`,`ph`,`solar`,`heroicons`],ce=F.join(`,`);async function I(e,t,n){try{let r=await fetch(`https://api.iconify.design/search?query=${encodeURIComponent(e)}&limit=${t}&prefixes=${ce}`,{signal:n});if(r.ok)return(await r.json()).icons??[]}catch{}return[]}function L({open:e,onOpenChange:t,value:a,onSelect:o,onClear:s,title:l,description:u,suggestKeywords:p}){let{t:m}=(0,c.useTranslation)(),[h,g]=(0,r.useState)(``),[_,v]=(0,r.useState)([]),[y,b]=(0,r.useState)(!1),x=(0,r.useRef)(null),[S,C]=(0,r.useState)(!1),[w,T]=(0,r.useState)([]),E=(0,r.useRef)(0),[D,O]=(0,r.useState)(null),k=(0,r.useCallback)(async(e,t)=>{let n=++E.current,r=()=>n===E.current&&!t.aborted;if(!e.trim()){v([]);return}b(!0);try{let n=await I(e,60,t);r()&&v(n)}catch{r()&&v([])}finally{r()&&b(!1)}},[]);(0,r.useEffect)(()=>{let e=new AbortController;return x.current&&clearTimeout(x.current),x.current=setTimeout(()=>k(h,e.signal),350),()=>{x.current&&clearTimeout(x.current),e.abort()}},[h,k]);let A=(0,r.useRef)(null);(0,r.useEffect)(()=>()=>A.current?.abort(),[]);function j(e){o(e),t(!1),g(``),v([]),T([]),O(null)}async function M(){if(!p||S)return;let e=new AbortController;A.current=e,C(!0),T([]),O(null);try{let t=(await p({title:l,description:u})).filter(e=>typeof e==`string`&&e.trim()).slice(0,5),n=[];for(let r of t){if(e.signal.aborted)return;n.push({keyword:r.trim(),icons:await I(r.trim(),30,e.signal)})}e.signal.aborted||T(n)}catch{e.signal.aborted||T([])}finally{e.signal.aborted||C(!1)}}let N=D?w.find(e=>e.keyword===D)?.icons??[]:w.flatMap(e=>e.icons.slice(0,3)),P=!!p&&!!(l?.trim()??u?.trim());return(0,i.jsx)(n.c,{open:e,onOpenChange:t,children:(0,i.jsxs)(n.u,{className:`flex max-h-[80vh] flex-col sm:max-w-lg`,children:[(0,i.jsx)(n.p,{children:(0,i.jsx)(n.g,{children:m(`forms.iconPicker.chooseAnIcon`,{defaultValue:`Choose an icon`})})}),(0,i.jsxs)(`div`,{className:`flex gap-2`,children:[(0,i.jsxs)(`div`,{className:`relative flex-1`,children:[(0,i.jsx)(d.IconSearch,{className:`absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground`}),(0,i.jsx)(n.a,{value:h,onChange:e=>g(e.target.value),placeholder:m(`forms.iconPicker.searchIcons`,{defaultValue:`Search icons`}),className:`pl-9`,autoFocus:!0})]}),P&&(0,i.jsxs)(n.o,{type:`button`,size:`sm`,variant:`outline`,onClick:M,disabled:S,className:`shrink-0 gap-1.5`,children:[S?(0,i.jsx)(d.IconLoader2,{className:`size-4 animate-spin`}):(0,i.jsx)(d.IconSparkles,{className:`size-4`}),m(`forms.iconPicker.aiSuggest`,{defaultValue:`Suggest`})]})]}),w.length>0&&(0,i.jsxs)(`div`,{className:`rounded-lg border border-[var(--vg-accent-line)] bg-[var(--vg-accent-surface)] p-3`,children:[(0,i.jsxs)(`div`,{className:`mb-2 flex items-center gap-1.5 text-xs font-medium vg-accent-text`,children:[(0,i.jsx)(d.IconSparkles,{className:`size-3.5`}),m(`forms.iconPicker.aiSuggestions`,{defaultValue:`Suggestions`})]}),(0,i.jsx)(`div`,{className:`mb-3 flex flex-wrap gap-1.5`,children:w.map(e=>(0,i.jsxs)(`button`,{type:`button`,onClick:()=>O(D===e.keyword?null:e.keyword),className:`cursor-pointer rounded-full px-3 py-1 text-xs font-medium transition-all ${D===e.keyword?`vg-accent-solid text-white`:`bg-[var(--vg-accent-surface)] text-[var(--vg-accent-fg)] hover:bg-[var(--vg-accent-surface-strong)]`}`,children:[e.keyword,(0,i.jsx)(`span`,{className:`ml-1 opacity-60`,children:e.icons.length})]},e.keyword))}),(0,i.jsx)(`div`,{className:`flex max-h-60 flex-wrap gap-2 overflow-y-auto`,children:N.map(e=>(0,i.jsxs)(`button`,{type:`button`,onClick:()=>j(e),className:`flex cursor-pointer flex-col items-center gap-1 rounded-lg p-2 transition-all hover:bg-[var(--vg-accent-surface)] ${a===e?`border border-[var(--vg-accent-line)] bg-[var(--vg-accent-surface-strong)] vg-accent-text`:`border border-[var(--vg-accent-line)]`}`,title:e,children:[(0,i.jsx)(f.Icon,{icon:e,className:`size-7`}),(0,i.jsx)(`span`,{className:`max-w-[80px] truncate text-center text-[9px] leading-tight text-muted-foreground`,children:e.split(`:`)[1]??e})]},e))})]}),(0,i.jsxs)(`div`,{className:`max-h-[400px] min-h-[200px] flex-1 overflow-y-auto`,children:[y&&(0,i.jsx)(`div`,{className:`flex h-32 items-center justify-center text-sm text-muted-foreground`,children:m(`forms.iconPicker.searching`,{defaultValue:`Searching…`})}),!y&&h&&_.length===0&&(0,i.jsx)(`div`,{className:`flex h-32 items-center justify-center text-sm text-muted-foreground`,children:m(`forms.iconPicker.noIconsFound`,{query:h,defaultValue:`No icons found for “{{query}}”`})}),!y&&!h&&_.length===0&&w.length===0&&(0,i.jsxs)(`div`,{className:`flex h-32 flex-col items-center justify-center gap-2 px-4 text-center text-sm text-muted-foreground`,children:[(0,i.jsx)(`span`,{children:m(`forms.iconPicker.typeToSearch`,{count:F.length,defaultValue:`Type to search {{count}} icon collections`})}),P&&(0,i.jsx)(`span`,{className:`text-xs leading-relaxed`,children:m(`forms.iconPicker.orClickAi`,{defaultValue:`…or let the title and description suggest some`})})]}),_.length>0&&(0,i.jsx)(`div`,{className:`grid grid-cols-6 gap-1.5 p-1`,children:_.map(e=>(0,i.jsxs)(`button`,{type:`button`,onClick:()=>j(e),className:`flex cursor-pointer flex-col items-center justify-center gap-1 rounded-lg p-2 transition-all hover:bg-muted ${a===e?`border border-[var(--vg-accent-line)] bg-[var(--vg-accent-surface)] vg-accent-text`:`border border-transparent hover:border-border`}`,title:e,children:[(0,i.jsx)(f.Icon,{icon:e,className:`size-6`}),(0,i.jsx)(`span`,{className:`w-full truncate text-center text-[9px] leading-tight text-muted-foreground`,children:e.split(`:`)[1]??e})]},e))})]}),a&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between border-t pt-2`,children:[(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(f.Icon,{icon:a,className:`size-5`}),(0,i.jsx)(`span`,{className:`font-mono text-xs text-muted-foreground`,children:a})]}),(0,i.jsxs)(`div`,{className:`flex gap-2`,children:[s&&(0,i.jsxs)(n.o,{size:`sm`,type:`button`,variant:`outline`,onClick:()=>{s(),t(!1)},children:[(0,i.jsx)(d.IconTrash,{className:`size-4`}),m(`forms.common.remove`,{defaultValue:`Remove`})]}),(0,i.jsx)(n.o,{size:`sm`,type:`button`,onClick:()=>t(!1),children:m(`forms.iconPicker.done`,{defaultValue:`Done`})})]})]})]})})}function R({...e}){return(0,i.jsx)(p.Popover.Root,{"data-slot":`popover`,...e})}function z({...e}){return(0,i.jsx)(p.Popover.Trigger,{"data-slot":`popover-trigger`,...e})}function B({className:e,align:n=`center`,sideOffset:r=4,...a}){return(0,i.jsx)(p.Popover.Portal,{children:(0,i.jsx)(p.Popover.Content,{"data-slot":`popover-content`,align:n,sideOffset:r,className:t.t(`z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95`,e),...a})})}function V({...e}){return(0,i.jsx)(p.Popover.Anchor,{"data-slot":`popover-anchor`,...e})}function H({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`popover-header`,className:t.t(`flex flex-col gap-1 text-sm`,e),...n})}function U({className:e,...n}){return(0,i.jsx)(`div`,{"data-slot":`popover-title`,className:t.t(`font-medium`,e),...n})}function W({className:e,...n}){return(0,i.jsx)(`p`,{"data-slot":`popover-description`,className:t.t(`text-muted-foreground`,e),...n})}var G={blue:{color:`text-blue-600 dark:text-blue-400`,bg:`from-blue-500/10 to-indigo-500/10 dark:from-blue-500/20 dark:to-indigo-500/20`,ring:`ring-blue-500/10 dark:ring-blue-400/10`},violet:{color:`text-violet-600 dark:text-violet-400`,bg:`from-violet-500/10 to-purple-500/10 dark:from-violet-500/20 dark:to-purple-500/20`,ring:`ring-violet-500/10 dark:ring-violet-400/10`},emerald:{color:`text-emerald-600 dark:text-emerald-400`,bg:`from-emerald-500/10 to-teal-500/10 dark:from-emerald-500/20 dark:to-teal-500/20`,ring:`ring-emerald-500/10 dark:ring-emerald-400/10`},amber:{color:`text-amber-600 dark:text-amber-400`,bg:`from-amber-500/10 to-orange-500/10 dark:from-amber-500/20 dark:to-orange-500/20`,ring:`ring-amber-500/10 dark:ring-amber-400/10`},rose:{color:`text-rose-600 dark:text-rose-400`,bg:`from-rose-500/10 to-pink-500/10 dark:from-rose-500/20 dark:to-pink-500/20`,ring:`ring-rose-500/10 dark:ring-rose-400/10`},cyan:{color:`text-cyan-600 dark:text-cyan-400`,bg:`from-cyan-500/10 to-sky-500/10 dark:from-cyan-500/20 dark:to-sky-500/20`,ring:`ring-cyan-500/10 dark:ring-cyan-400/10`},orange:{color:`text-orange-600 dark:text-orange-400`,bg:`from-orange-500/10 to-amber-500/10 dark:from-orange-500/20 dark:to-amber-500/20`,ring:`ring-orange-500/10 dark:ring-orange-400/10`},slate:{color:`text-slate-600 dark:text-slate-400`,bg:`from-slate-500/10 to-gray-500/10 dark:from-slate-500/20 dark:to-gray-500/20`,ring:`ring-slate-500/10 dark:ring-slate-400/10`}},K=(0,r.createContext)({open:!0,toggle:()=>{},variant:`blue`});function q({variant:e=`blue`,defaultOpen:n=!0,children:a,className:o}){let[s,c]=(0,r.useState)(n);return(0,i.jsx)(K.Provider,{value:{open:s,toggle:()=>c(e=>!e),variant:e},children:(0,i.jsx)(`div`,{className:t.t(`rounded-xl border overflow-hidden`,o),children:a})})}function le({icon:e,title:n,description:a,className:o}){let{open:s,toggle:c,variant:l}=(0,r.useContext)(K),u=G[l];return(0,i.jsxs)(`button`,{type:`button`,onClick:c,className:t.t(`flex w-full items-center gap-3 px-5 py-4 bg-muted/40 border-b cursor-pointer hover:bg-muted/60 transition-colors`,o),children:[(0,i.jsx)(`div`,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br ${u.bg} ring-1 ${u.ring}`,children:(0,i.jsx)(e,{className:`size-4 ${u.color}`})}),(0,i.jsxs)(`div`,{className:`min-w-0 text-left`,children:[(0,i.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:n}),a&&(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:a})]}),(0,i.jsx)(d.IconChevronDown,{className:t.t(`ml-auto size-4 text-muted-foreground shrink-0 transition-transform duration-200`,s&&`rotate-180`)})]})}function ue({icon:e,title:n,description:a,className:o}){let{variant:s}=(0,r.useContext)(K),c=G[s];return(0,i.jsxs)(`div`,{className:t.t(`flex items-center gap-3 px-5 py-4 bg-muted/40 border-b`,o),children:[(0,i.jsx)(`div`,{className:`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-linear-to-br ${c.bg} ring-1 ${c.ring}`,children:(0,i.jsx)(e,{className:`size-4 ${c.color}`})}),(0,i.jsxs)(`div`,{className:`min-w-0`,children:[(0,i.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:n}),a&&(0,i.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:a})]})]})}function de({children:e,className:n}){let{open:a}=(0,r.useContext)(K);return a?(0,i.jsx)(`div`,{className:t.t(`p-5 space-y-6`,n),children:e}):null}q.Header=le,q.StaticHeader=ue,q.Content=de;var J=r.createContext(!1);function Y({delayDuration:e=0,...t}){return(0,i.jsx)(J,{value:!0,children:(0,i.jsx)(m.Provider,{"data-slot":`tooltip-provider`,delayDuration:e,...t})})}function fe({...e}){let t=r.useContext(J),n=(0,i.jsx)(m.Root,{"data-slot":`tooltip`,...e});return t?n:(0,i.jsx)(Y,{children:n})}function pe({...e}){return(0,i.jsx)(m.Trigger,{"data-slot":`tooltip-trigger`,...e})}function me({className:e,sideOffset:n=0,children:r,...a}){return(0,i.jsx)(m.Portal,{children:(0,i.jsxs)(m.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:[r,(0,i.jsx)(m.Arrow,{className:`bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]`})]})})}var he=({...e})=>{let{theme:t=`system`}=(0,h.useTheme)(),{t:n}=(0,c.useTranslation)();return(0,i.jsx)(g.Toaster,{theme:t,className:`toaster group`,containerAriaLabel:n(`common.notifications`,{defaultValue:`Notifications`}),icons:{success:(0,i.jsx)(y,{className:`size-4`}),info:(0,i.jsx)(x,{className:`size-4`}),warning:(0,i.jsx)(w,{className:`size-4`}),error:(0,i.jsx)(C,{className:`size-4`}),loading:(0,i.jsx)(S,{className:`size-4 animate-spin`})},style:{"--normal-bg":`var(--vg-popover)`,"--normal-text":`var(--vg-popover-foreground)`,"--normal-border":`var(--vg-border)`,"--border-radius":`var(--vg-radius)`},...e})};function X({givenName:e,familyName:t,name:n}){let r=(e??``).trim(),i=(t??``).trim();if(r||i){let e=r?r[0]:``,t=i.split(/\s+/).filter(Boolean),n=`${e}${t.length>0?t[t.length-1][0]:``}`.toUpperCase();if(n)return n}let a=(n??``).trim();if(a){let e=a.split(/\s+/).filter(Boolean);return e.length===1?e[0][0].toUpperCase():`${e[0][0]}${e[e.length-1][0]}`.toUpperCase()}return`U`}function Z({className:e,givenName:n,familyName:r,name:o,src:s,alt:c,children:l,...u}){let d=X({givenName:n,familyName:r,name:o}),f=c??o??[n,r].filter(Boolean).join(` `);return(0,i.jsxs)(a.Root,{"data-slot":`user-avatar`,className:t.t(`relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full size-8`,`bg-muted text-muted-foreground text-xs font-semibold`,`ring-1 ring-border`,e),...u,children:[s&&(0,i.jsx)(a.Image,{"data-slot":`user-avatar-image`,src:s,alt:f,className:`aspect-square size-full object-cover`}),(0,i.jsx)(a.Fallback,{"data-slot":`user-avatar-fallback`,className:`flex size-full items-center justify-center`,delayMs:s?600:0,children:l??d})]})}var Q=(0,r.createContext)(!1);function ge(){return(0,r.useContext)(Q)}var $=r.default.createContext(null);function _e({children:e,fetchUser:t}){let[n,a]=r.default.useState({}),[o,s]=r.default.useState(`loading`),[c,l]=r.default.useState(null),u=r.default.useRef(0),d=r.default.useCallback(()=>{let e=++u.current;t().then(t=>{e===u.current&&(a(t),l(null),s(`ready`))},t=>{e===u.current&&(l(t),s(`failed`))})},[t]);r.default.useEffect(()=>{d()},[d]);let f=r.default.useMemo(()=>({user:n,refreshUser:d,status:o,error:c}),[n,d,o,c]);return(0,i.jsx)($,{value:f,children:e})}function ve(){let e=r.default.useContext($);if(!e)throw Error(`useCurrentUser must be used within UserProvider`);return e}Object.defineProperty(exports,"A",{enumerable:!0,get:function(){return te}}),Object.defineProperty(exports,"B",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"C",{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,"D",{enumerable:!0,get:function(){return ne}}),Object.defineProperty(exports,"E",{enumerable:!0,get:function(){return N}}),Object.defineProperty(exports,"F",{enumerable:!0,get:function(){return oe}}),Object.defineProperty(exports,"I",{enumerable:!0,get:function(){return A}}),Object.defineProperty(exports,"L",{enumerable:!0,get:function(){return D}}),Object.defineProperty(exports,"M",{enumerable:!0,get:function(){return ie}}),Object.defineProperty(exports,"N",{enumerable:!0,get:function(){return ae}}),Object.defineProperty(exports,"O",{enumerable:!0,get:function(){return k}}),Object.defineProperty(exports,"P",{enumerable:!0,get:function(){return se}}),Object.defineProperty(exports,"R",{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,"S",{enumerable:!0,get:function(){return O}}),Object.defineProperty(exports,"T",{enumerable:!0,get:function(){return M}}),Object.defineProperty(exports,"V",{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,"_",{enumerable:!0,get:function(){return W}}),Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return Z}}),Object.defineProperty(exports,"b",{enumerable:!0,get:function(){return z}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return fe}}),Object.defineProperty(exports,"d",{enumerable:!0,get:function(){return pe}}),Object.defineProperty(exports,"f",{enumerable:!0,get:function(){return q}}),Object.defineProperty(exports,"g",{enumerable:!0,get:function(){return B}}),Object.defineProperty(exports,"h",{enumerable:!0,get:function(){return V}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return ge}}),Object.defineProperty(exports,"j",{enumerable:!0,get:function(){return re}}),Object.defineProperty(exports,"k",{enumerable:!0,get:function(){return ee}}),Object.defineProperty(exports,"l",{enumerable:!0,get:function(){return me}}),Object.defineProperty(exports,"m",{enumerable:!0,get:function(){return R}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return ve}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return X}}),Object.defineProperty(exports,"p",{enumerable:!0,get:function(){return G}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return Q}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return he}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return _e}}),Object.defineProperty(exports,"u",{enumerable:!0,get:function(){return Y}}),Object.defineProperty(exports,"v",{enumerable:!0,get:function(){return H}}),Object.defineProperty(exports,"w",{enumerable:!0,get:function(){return j}}),Object.defineProperty(exports,"x",{enumerable:!0,get:function(){return L}}),Object.defineProperty(exports,"y",{enumerable:!0,get:function(){return U}}),Object.defineProperty(exports,"z",{enumerable:!0,get:function(){return T}});