@olwiba/cn 0.1.25 → 0.1.27

package/dist/index.js

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as React37 from 'react';
-import { useMemo, useRef, useState, useCallback, useEffect } from 'react';
+import { useMemo, useCallback, useRef, useState, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown, ArrowLeft, ArrowRight, Check, X, Search, ChevronRight, Circle, Dot, ChevronUp, PanelLeft, MoreHorizontal, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronLeft, GripVertical, LoaderCircle, OctagonX, TriangleAlert, Info, CircleCheck, Loader2Icon } from 'lucide-react';
@@ -142,23 +142,26 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React37.forwardRef(({ className, variant, mode, size, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    role: "alert",
-    className: cn(
-      alertVariants({ variant }),
-      size === "sm" && "p-3 text-xs [&>svg]:top-3 [&>svg]:left-3",
-      size === "lg" && "p-6 text-base [&>svg]:top-6 [&>svg]:left-6",
-      mode === "smooth" && "rounded-2xl",
-      mode === "playful" && "border-l-4",
-      disabled && "opacity-50 pointer-events-none",
-      className
-    ),
-    ...props
-  }
-));
+var Alert = React37.forwardRef(({ className, variant, mode: modeProp, size, disabled, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(
+        alertVariants({ variant }),
+        size === "sm" && "p-3 text-xs [&>svg]:top-3 [&>svg]:left-3",
+        size === "lg" && "p-6 text-base [&>svg]:top-6 [&>svg]:left-6",
+        mode === "smooth" && "rounded-2xl",
+        mode === "playful" && "border-l-4",
+        disabled && "opacity-50 pointer-events-none",
+        className
+      ),
+      ...props
+    }
+  );
+});
 Alert.displayName = "Alert";
 var AlertTitle = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h5",
@@ -178,6 +181,12 @@ var AlertDescription = React37.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDescription.displayName = "AlertDescription";
+
+// src/components/ui/glass.ts
+var glassBlur = "backdrop-blur-xl backdrop-saturate-150";
+var glassSurface = "border border-white/20 bg-background/60 backdrop-blur-xl backdrop-saturate-150 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-background/40";
+var glassPanel = "border border-white/20 bg-popover/70 backdrop-blur-lg backdrop-saturate-150 shadow-lg shadow-black/10 dark:border-white/10 dark:bg-popover/50";
+var glassControl = "border border-white/25 bg-background/50 backdrop-blur-md backdrop-saturate-150 shadow-sm shadow-black/10 dark:border-white/10 dark:bg-background/30";
 var buttonVariants = cva(
   "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold transition-all duration-200 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -203,6 +212,12 @@ var buttonVariants = cva(
     }
   }
 );
+var glassButtonBg = {
+  default: "bg-primary/75 hover:bg-primary/60",
+  destructive: "bg-destructive/75 hover:bg-destructive/60",
+  outline: "bg-background/40 hover:bg-background/60",
+  secondary: "bg-secondary/50 hover:bg-secondary/40"
+};
 var Button = React37.forwardRef(
   ({ className, variant, size, asChild = false, mode: modeProp, ...props }, ref) => {
     const mode = modeProp ?? useUIVariant();
@@ -236,12 +251,18 @@ var Button = React37.forwardRef(
         )
       ] });
     }
+    const isGlass = mode === "glass" && variant !== "ghost" && variant !== "link";
     return /* @__PURE__ */ jsx(
       Comp,
       {
         className: cn(
           buttonVariants({ variant, size, className }),
-          mode === "smooth" && "rounded-full shadow-none"
+          mode === "smooth" && "rounded-full shadow-none",
+          isGlass && cn(
+            glassBlur,
+            "border border-white/25 shadow-sm shadow-black/10 dark:border-white/15",
+            glassButtonBg[variant ?? "default"]
+          )
         ),
         ref,
         ...props
@@ -265,24 +286,27 @@ var AlertDialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React37.forwardRef(({ className, mode, children, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
-  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
-  /* @__PURE__ */ jsx(
-    AlertDialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",
-        !mode && "shadow-lg sm:rounded-lg",
-        mode === "smooth" && "rounded-2xl shadow-xl",
-        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
-    }
-  )
-] }));
+var AlertDialogContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%]",
+          !mode && "shadow-lg sm:rounded-lg",
+          mode === "smooth" && "rounded-2xl shadow-xl",
+          mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+      }
+    )
+  ] });
+});
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 var AlertDialogHeader = ({
   className,
@@ -475,16 +499,50 @@ var badgeVariants = cva(
     }
   }
 );
+var playfulBackdrop = {
+  default: "bg-primary/30 dark:bg-primary/20",
+  destructive: "bg-destructive/30 dark:bg-destructive/20",
+  secondary: "bg-foreground/10 dark:bg-foreground/10",
+  outline: "bg-foreground/10 dark:bg-foreground/10"
+};
 function Badge({ className, variant, size, disabled = false, mode: modeProp, ...props }) {
   const mode = modeProp ?? useUIVariant();
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        className: cn(
+          "group/playful relative inline-flex",
+          disabled && "opacity-50 pointer-events-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "absolute inset-0 rounded-full transition-transform duration-200 translate-x-[3px] translate-y-[3px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:scale-[1.01]",
+                playfulBackdrop[variant ?? "default"]
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(badgeVariants({ variant, size }), "relative rotate-[0.3deg]", className),
+              ...props
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
         badgeVariants({ variant, size }),
         disabled && "opacity-50 pointer-events-none",
-        mode === "smooth" && "shadow-sm",
-        mode === "playful" && "rotate-[0.5deg] [box-shadow:2px_2px_0px_0px_color-mix(in_srgb,currentColor_15%,transparent)]",
         className
       ),
       ...props
@@ -906,6 +964,7 @@ var Card = React37.forwardRef(
         className: cn(
           "rounded-lg border bg-card text-card-foreground shadow-sm",
           mode === "smooth" && "rounded-3xl",
+          mode === "glass" && cn(glassSurface, "rounded-xl"),
           className
         ),
         ...props
@@ -1493,30 +1552,34 @@ var DialogOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React37.forwardRef(({ className, mode, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsx(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
-        !mode && "shadow-lg sm:rounded-lg",
-        mode === "smooth" && "rounded-2xl shadow-xl",
-        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+var DialogContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, { className: mode === "glass" ? "bg-black/40" : void 0 }),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-full data-[state=open]:slide-in-from-top-full",
+          !mode && "shadow-lg sm:rounded-lg",
+          mode === "smooth" && "rounded-2xl shadow-xl",
+          mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+          mode === "glass" && cn(glassSurface, "rounded-2xl"),
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
+          children,
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
         ] })
-      ] })
-    }
-  )
-] }));
+      }
+    )
+  ] });
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
@@ -1610,20 +1673,45 @@ function useIsMac() {
   return isMac;
 }
 var Hotkey = React37.forwardRef(
-  ({ shortcut, asKbd = false, className, ...props }, ref) => {
+  ({ shortcut, asKbd = false, mode: modeProp, className, ...props }, ref) => {
     const isMac = useIsMac();
     const content = formatShortcut(shortcut, isMac);
+    const mode = modeProp ?? useUIVariant();
     if (asKbd) {
+      const kbdClasses = cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-md",
+        mode === "playful" && "rounded-sm"
+      );
+      if (mode === "playful") {
+        return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute inset-0 rounded-sm bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "kbd",
+            {
+              ref,
+              "data-slot": "hotkey",
+              className: cn(kbdClasses, "relative rotate-[1.5deg]", className),
+              ...props,
+              children: content
+            }
+          )
+        ] });
+      }
       return /* @__PURE__ */ jsx(
         "kbd",
         {
           ref,
           "data-slot": "hotkey",
-          className: cn(
-            "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-            "[&_svg:not([class*='size-'])]:size-3",
-            className
-          ),
+          className: cn(kbdClasses, className),
           ...props,
           children: content
         }
@@ -1764,92 +1852,132 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React37.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ContextMenuPrimitive.SubTrigger,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
-    ]
-  }
-));
+var ContextMenuSubTrigger = React37.forwardRef(({ className, inset, children, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.SubTrigger,
+    {
+      ref,
+      className: cn(
+        "flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        inset && "pl-8",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      ]
+    }
+  );
+});
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  ContextMenuPrimitive.SubContent,
-  {
-    ref,
-    className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-));
+var ContextMenuSubContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const inheritedMode = useUIVariant();
+  const mode = modeProp ?? inheritedMode;
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref,
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden border bg-popover p-1 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 origin-[--radix-context-menu-content-transform-origin]",
+        !mode && "rounded-md shadow-md",
+        mode === "smooth" && "rounded-2xl shadow-xl",
+        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+    }
+  );
+});
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React37.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  ContextMenuPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]",
-      className
-    ),
-    ...props
-  }
-) }));
+var ContextMenuContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const inheritedMode = useUIVariant();
+  const mode = modeProp ?? inheritedMode;
+  return /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden border bg-popover p-1 text-popover-foreground animate-in fade-in-80 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 origin-[--radix-context-menu-content-transform-origin]",
+        !mode && "rounded-md shadow-md",
+        mode === "smooth" && "rounded-2xl shadow-xl",
+        mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+    }
+  ) });
+});
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React37.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
-  ContextMenuPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    ),
-    ...props
-  }
-));
+var ContextMenuItem = React37.forwardRef(({ className, inset, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsx(
+    ContextMenuPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        inset && "pl-8",
+        className
+      ),
+      ...props
+    }
+  );
+});
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React37.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ContextMenuPrimitive.CheckboxItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
-      children
-    ]
-  }
-));
+var ContextMenuCheckboxItem = React37.forwardRef(({ className, children, checked, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.CheckboxItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        className
+      ),
+      checked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        children
+      ]
+    }
+  );
+});
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React37.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  ContextMenuPrimitive.RadioItem,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
-      children
-    ]
-  }
-));
+var ContextMenuRadioItem = React37.forwardRef(({ className, children, ...props }, ref) => {
+  const mode = useUIVariant();
+  return /* @__PURE__ */ jsxs(
+    ContextMenuPrimitive.RadioItem,
+    {
+      ref,
+      className: cn(
+        "relative flex cursor-default select-none items-center py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        !mode && "rounded-sm",
+        mode === "smooth" && "rounded-lg",
+        mode === "playful" && "rounded-lg",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+        children
+      ]
+    }
+  );
+});
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 var ContextMenuLabel = React37.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
@@ -1915,27 +2043,30 @@ var DrawerOverlay = React37.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
-var DrawerContent = React37.forwardRef(({ className, mode, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
-  /* @__PURE__ */ jsx(DrawerOverlay, {}),
-  /* @__PURE__ */ jsx(
-    Drawer$1.Content,
-    {
-      ref,
-      className: cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col border bg-background",
-        !mode && "rounded-t-[10px]",
-        mode === "smooth" && "rounded-t-2xl shadow-xl",
-        mode === "playful" && "rounded-t-xl border-2 shadow-lg shadow-primary/10",
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
-        /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
-        children
-      ] })
-    }
-  )
-] }));
+var DrawerContent = React37.forwardRef(({ className, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsx(
+      Drawer$1.Content,
+      {
+        ref,
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col border bg-background",
+          !mode && "rounded-t-[10px]",
+          mode === "smooth" && "rounded-t-2xl shadow-xl",
+          mode === "playful" && "rounded-t-xl border-2 shadow-lg shadow-primary/10",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
+          /* @__PURE__ */ jsx("div", { className: "mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" }),
+          children
+        ] })
+      }
+    )
+  ] });
+});
 DrawerContent.displayName = "DrawerContent";
 var DrawerHeader = ({
   className,
@@ -2603,20 +2734,34 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 var Input = React37.forwardRef(
   ({ className, type, mode: modeProp, ...props }, ref) => {
     const mode = modeProp ?? useUIVariant();
-    return /* @__PURE__ */ jsx(
+    const input = /* @__PURE__ */ jsx(
       "input",
       {
         type,
         className: cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/20",
           mode === "smooth" && "rounded-full",
-          mode === "playful" && "rotate-[0.3deg] [box-shadow:3px_3px_0px_0px_color-mix(in_srgb,currentColor_12%,transparent)]",
+          mode === "playful" && "relative z-10",
+          mode === "glass" && glassControl,
           className
         ),
         ref,
         ...props
       }
     );
+    if (mode === "playful") {
+      return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex w-full", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "absolute inset-0 z-0 translate-x-[3px] translate-y-[3px] -rotate-[0.4deg] rounded-md bg-foreground/8 transition-transform duration-200 group-hover/playful:-rotate-[1deg] group-focus-within/playful:-rotate-[1deg] dark:bg-foreground/10"
+          }
+        ),
+        input
+      ] });
+    }
+    return input;
   }
 );
 Input.displayName = "Input";
@@ -2660,10 +2805,11 @@ var Textarea = React37.forwardRef(
 Textarea.displayName = "Textarea";
 function InputGroup({
   className,
-  mode,
+  mode: modeProp,
   disabled,
   ...props
 }) {
+  const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsx(UIVariantProvider, { mode, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -3078,20 +3224,36 @@ function ItemFooter({ className, ...props }) {
     }
   );
 }
-function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "kbd",
-    {
-      "data-slot": "kbd",
-      className: cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
-        "[&_svg:not([class*='size-'])]:size-3",
-        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
-        className
-      ),
-      ...props
-    }
+function Kbd({ className, mode: modeProp, ...props }) {
+  const mode = modeProp ?? useUIVariant();
+  const baseClasses = cn(
+    "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 px-1 font-sans text-xs font-medium",
+    "[&_svg:not([class*='size-'])]:size-3",
+    "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+    !mode && "rounded-sm",
+    mode === "smooth" && "rounded-md",
+    mode === "playful" && "rounded-sm"
   );
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-sm bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "kbd",
+        {
+          "data-slot": "kbd",
+          className: cn(baseClasses, "relative rotate-[1.5deg]", className),
+          ...props
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("kbd", { "data-slot": "kbd", className: cn(baseClasses, className), ...props });
 }
 function KbdGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -3653,6 +3815,7 @@ var PopoverContent = React37.forwardRef(({ className, align = "center", sideOffs
         !mode && "rounded-md shadow-md",
         mode === "smooth" && "rounded-2xl shadow-xl",
         mode === "playful" && "rounded-xl border-2 shadow-lg shadow-primary/10",
+        mode === "glass" && cn(glassPanel, "rounded-xl"),
         className
       ),
       ...props,
@@ -3661,27 +3824,43 @@ var PopoverContent = React37.forwardRef(({ className, align = "center", sideOffs
   ) });
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-var Progress = React37.forwardRef(({ className, value, disabled = false, ...props }, ref) => /* @__PURE__ */ jsx(
-  ProgressPrimitive.Root,
-  {
-    ref,
-    "aria-disabled": disabled || void 0,
-    "data-disabled": disabled ? "" : void 0,
-    className: cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      disabled && "opacity-50",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      ProgressPrimitive.Indicator,
-      {
-        className: "h-full w-full flex-1 bg-primary transition-all",
-        style: { transform: `translateX(-${100 - (value || 0)}%)` }
-      }
-    )
+var Progress = React37.forwardRef(({ className, value, disabled = false, mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  const bar = /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    {
+      ref,
+      "aria-disabled": disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className: cn(
+        "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
+        disabled && "opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          className: "h-full w-full flex-1 bg-primary transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("div", { className: "group/playful relative", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-full bg-border transition-transform duration-200 translate-x-[3px] translate-y-[3px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "relative", children: bar })
+    ] });
   }
-));
+  return bar;
+});
 Progress.displayName = ProgressPrimitive.Root.displayName;
 var RadioGroup4 = React37.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
@@ -3694,7 +3873,31 @@ var RadioGroup4 = React37.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup4.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React37.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React37.forwardRef(({ className, mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-full bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Item,
+        {
+          ref,
+          className: cn(
+            "relative aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current" }) })
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -3940,29 +4143,32 @@ var sideRoundingPlayful = {
   top: "rounded-b-xl",
   bottom: "rounded-t-xl"
 };
-var SheetContent = React37.forwardRef(({ side = "right", className, children, container, mode, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
-  /* @__PURE__ */ jsx(SheetOverlay, {}),
-  /* @__PURE__ */ jsx(
-    DialogPrimitive.Content,
-    {
-      ref,
-      className: cn(
-        sheetVariants({ side }),
-        mode === "smooth" && `${sideRoundingSmooth[side ?? "right"]} shadow-xl`,
-        mode === "playful" && `${sideRoundingPlayful[side ?? "right"]} border-2 shadow-lg shadow-primary/10`,
-        className
-      ),
-      ...props,
-      children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+var SheetContent = React37.forwardRef(({ side = "right", className, children, container, mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsxs(SheetPortal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsx(
+      DialogPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          sheetVariants({ side }),
+          mode === "smooth" && `${sideRoundingSmooth[side ?? "right"]} shadow-xl`,
+          mode === "playful" && `${sideRoundingPlayful[side ?? "right"]} border-2 shadow-lg shadow-primary/10`,
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs(UIVariantProvider, { mode, children: [
+          children,
+          /* @__PURE__ */ jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
         ] })
-      ] })
-    }
-  )
-] }));
+      }
+    )
+  ] });
+});
 SheetContent.displayName = DialogPrimitive.Content.displayName;
 var SheetHeader = ({
   className,
@@ -4039,21 +4245,25 @@ function Skeleton({
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip2 = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, mode, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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 origin-[--radix-tooltip-content-transform-origin]",
-      mode === "smooth" && "rounded-xl shadow-xl",
-      mode === "playful" && "rounded-lg border-2 shadow-md shadow-primary/10",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
-  }
-));
+var TooltipContent = React37.forwardRef(({ className, sideOffset = 4, mode: modeProp, children, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
+  return /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn(
+        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md 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 origin-[--radix-tooltip-content-transform-origin]",
+        mode === "smooth" && "rounded-xl shadow-xl",
+        mode === "playful" && "rounded-lg border-2 shadow-md shadow-primary/10",
+        mode === "glass" && cn(glassPanel, "rounded-lg"),
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(UIVariantProvider, { mode, children })
+    }
+  );
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
@@ -4779,8 +4989,9 @@ var Slider = React37.forwardRef(({ className, size = "default", ...props }, ref)
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
-var Toaster = ({ mode, className, style, ...props }) => {
+var Toaster = ({ mode: modeProp, className, style, ...props }) => {
   const { theme = "system" } = useTheme();
+  const mode = modeProp ?? useUIVariant();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     mode === "smooth" && /* @__PURE__ */ jsx("style", { children: `[data-sonner-toaster].toaster-smooth { --border-radius: 1.5rem; }` }),
     mode === "playful" && /* @__PURE__ */ jsx("style", { children: `
@@ -4907,8 +5118,41 @@ var switchSizes = {
     thumb: "size-6 data-[state=checked]:translate-x-7"
   }
 };
-var Switch = React37.forwardRef(({ className, size = "default", ...props }, ref) => {
+var Switch = React37.forwardRef(({ className, size = "default", mode: modeProp, ...props }, ref) => {
+  const mode = modeProp ?? useUIVariant();
   const sizes = switchSizes[size];
+  if (mode === "playful") {
+    return /* @__PURE__ */ jsxs("span", { className: "group/playful relative inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-0 rounded-full bg-primary/30 dark:bg-primary/20 transition-transform duration-200 translate-x-[2px] translate-y-[2px] -rotate-[3deg] group-hover/playful:-rotate-[5deg]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        SwitchPrimitives.Root,
+        {
+          className: cn(
+            "relative peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input rotate-[1.5deg]",
+            sizes.root,
+            className
+          ),
+          ...props,
+          ref,
+          children: /* @__PURE__ */ jsx(
+            SwitchPrimitives.Thumb,
+            {
+              className: cn(
+                "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=unchecked]:translate-x-0",
+                sizes.thumb
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
     {
@@ -5260,16 +5504,30 @@ function composeAsciiText(font, text) {
 function getAsciiAccentColumns(font, text, accent) {
   if (!accent) return /* @__PURE__ */ new Set();
   const columns = /* @__PURE__ */ new Set();
+  const accentRanges = [];
+  let searchFrom = 0;
+  while (true) {
+    const idx = text.indexOf(accent, searchFrom);
+    if (idx === -1) break;
+    accentRanges.push({ start: idx, end: idx + accent.length });
+    searchFrom = idx + 1;
+  }
+  if (accentRanges.length === 0) return columns;
   let offsetX = 0;
+  let charIndex = 0;
   for (const ch of text) {
     const code = ch.charCodeAt(0);
     const glyph = font.chars.get(code) ?? font.chars.get(32);
-    if (!glyph) continue;
+    if (!glyph) {
+      charIndex++;
+      continue;
+    }
     const width = Math.max(...glyph.map((line) => line.length));
-    if (accent.includes(ch)) {
+    if (accentRanges.some((r) => charIndex >= r.start && charIndex < r.end)) {
       for (let col = 0; col < width; col++) columns.add(offsetX + col);
     }
     offsetX += width;
+    charIndex++;
   }
   return columns;
 }
@@ -6526,6 +6784,9 @@ $$$@@
 function AsciiText({
   text = "olwibaCN",
   accent = "",
+  accents,
+  shine = "",
+  shineColor = "rgba(255,255,255,0.92)",
   color,
   accentColor
 }) {
@@ -6534,6 +6795,26 @@ function AsciiText({
   const accentCols = useMemo(() => {
     return getAsciiAccentColumns(font, text, accent);
   }, [font, text, accent]);
+  const multiAccentCols = useMemo(() => {
+    if (!accents?.length) return null;
+    const map = /* @__PURE__ */ new Map();
+    for (const item of accents) {
+      const cols2 = getAsciiAccentColumns(font, text, item.text);
+      for (const col of cols2) map.set(col, item.color);
+    }
+    return map;
+  }, [accents, font, text]);
+  const getCellColor = useCallback((col, baseColor, highlightColor) => {
+    return multiAccentCols?.get(col) ?? (accentCols.has(col) ? highlightColor : baseColor);
+  }, [accentCols, multiAccentCols]);
+  const shineCols = useMemo(() => {
+    return getAsciiAccentColumns(font, text, shine);
+  }, [font, shine, text]);
+  const shineBounds = useMemo(() => {
+    if (!shineCols.size) return null;
+    const cols2 = Array.from(shineCols);
+    return { min: Math.min(...cols2), max: Math.max(...cols2) };
+  }, [shineCols]);
   const canvasRef = useRef(null);
   const animRef = useRef(0);
   const timeRef = useRef(0);
@@ -6584,24 +6865,46 @@ function AsciiText({
     const time = timeRef.current;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     const { base: baseColor, accent: highlightColor } = colorsRef.current;
-    renderAsciiFrameToContext(ctx, { cells, cols, rows }, {
-      accentColumns: accentCols,
-      color: baseColor,
-      accentColor: highlightColor,
-      time,
-      pointer: mouseRef.current,
-      waves: wavesRef.current
-    });
+    if (multiAccentCols || shineCols.size) {
+      for (const cell of cells) {
+        const intensity = getAsciiCellIntensity(cell, {
+          time,
+          pointer: mouseRef.current,
+          waves: wavesRef.current
+        });
+        ctx.globalAlpha = intensity;
+        ctx.fillStyle = getCellColor(cell.col, baseColor, highlightColor);
+        ctx.fillRect(cell.col * ASCII_CHAR_WIDTH, cell.row * ASCII_CHAR_HEIGHT, ASCII_CHAR_WIDTH, ASCII_CHAR_HEIGHT);
+        if (shineBounds && shineCols.has(cell.col)) {
+          const alpha = getShineAlpha(cell.col, cell.row, time, shineBounds) * (cell.ch === "\u2591" ? 0.55 : 1);
+          if (alpha > 0) {
+            ctx.globalAlpha = intensity * alpha;
+            ctx.fillStyle = shineColor;
+            ctx.fillRect(cell.col * ASCII_CHAR_WIDTH, cell.row * ASCII_CHAR_HEIGHT, ASCII_CHAR_WIDTH, ASCII_CHAR_HEIGHT);
+          }
+        }
+      }
+      ctx.globalAlpha = 1;
+    } else {
+      renderAsciiFrameToContext(ctx, { cells, cols, rows }, {
+        accentColumns: accentCols,
+        color: baseColor,
+        accentColor: highlightColor,
+        time,
+        pointer: mouseRef.current,
+        waves: wavesRef.current
+      });
+    }
     if (!hasPaintedRef.current) {
       hasPaintedRef.current = true;
       setIsCanvasReady(true);
     }
     wavesRef.current = wavesRef.current.filter((w) => time - w.t < 3);
-  }, [cells, accentCols, cols, rows]);
+  }, [accentCols, cells, cols, getCellColor, multiAccentCols, rows, shineBounds, shineColor, shineCols]);
   useEffect(() => {
     hasPaintedRef.current = false;
     setIsCanvasReady(false);
-  }, [text, accent, color, accentColor]);
+  }, [text, accent, accents, shine, shineColor, color, accentColor]);
   useEffect(() => {
     let running = true;
     const loop = () => {
@@ -6666,18 +6969,32 @@ function AsciiText({
             preserveAspectRatio: "xMidYMid meet",
             children: cells.map((cell) => {
               const isAccent = accentCols.has(cell.col);
-              return /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: cell.col * ASCII_CHAR_WIDTH,
-                  y: cell.row * ASCII_CHAR_HEIGHT,
-                  width: ASCII_CHAR_WIDTH,
-                  height: ASCII_CHAR_HEIGHT,
-                  fill: isAccent ? fallbackAccentColor : "currentColor",
-                  opacity: cell.ch === "\u2591" ? 0.15 : 0.78
-                },
-                `${cell.col}-${cell.row}`
-              );
+              const multiAccentColor = multiAccentCols?.get(cell.col);
+              const shineAlpha = shineBounds && shineCols.has(cell.col) ? getShineAlpha(cell.col, cell.row, 0.2, shineBounds) * (cell.ch === "\u2591" ? 0.55 : 1) : 0;
+              return /* @__PURE__ */ jsxs(React37.Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: cell.col * ASCII_CHAR_WIDTH,
+                    y: cell.row * ASCII_CHAR_HEIGHT,
+                    width: ASCII_CHAR_WIDTH,
+                    height: ASCII_CHAR_HEIGHT,
+                    fill: multiAccentColor ?? (isAccent ? fallbackAccentColor : "currentColor"),
+                    opacity: cell.ch === "\u2591" ? 0.15 : 0.78
+                  }
+                ),
+                shineAlpha > 0 && /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: cell.col * ASCII_CHAR_WIDTH,
+                    y: cell.row * ASCII_CHAR_HEIGHT,
+                    width: ASCII_CHAR_WIDTH,
+                    height: ASCII_CHAR_HEIGHT,
+                    fill: shineColor,
+                    opacity: shineAlpha
+                  }
+                )
+              ] }, `${cell.col}-${cell.row}`);
             })
           }
         ),
@@ -6698,6 +7015,21 @@ function AsciiText({
     }
   ) });
 }
+var SHINE_SPEED = 1.0125;
+function getShineAlpha(col, row, time, bounds) {
+  const span = bounds.max - bounds.min + 1;
+  const travel = span + 6;
+  const diagonalCol = col + row * 0.62;
+  const primarySweep = bounds.max + 3 - time * SHINE_SPEED % 1 * travel;
+  const secondarySweep = bounds.max + 3 - (time * SHINE_SPEED + 0.5) % 1 * travel;
+  const primary = getShineBandAlpha(diagonalCol, primarySweep);
+  const secondary = getShineBandAlpha(diagonalCol, secondarySweep);
+  return Math.min(0.86, primary + secondary * 0.82);
+}
+function getShineBandAlpha(diagonalCol, sweep) {
+  const distance = Math.abs(diagonalCol - sweep);
+  return Math.max(0, 1 - distance / 2.7) ** 2 * 0.78;
+}
 function useCopyToClipboard(timeout = 2e3) {
   const [isCopied, setIsCopied] = useState(false);
   const copyToClipboard = useCallback(
@@ -6812,25 +7144,33 @@ function ThemeScript() {
 }
 var GLINTS = [
   // perimeter
-  { top: "-7px", left: "10%", size: 7, delay: "0s", duration: "2.1s" },
-  { top: "2px", right: "-7px", size: 6, delay: "0.3s", duration: "3.4s" },
-  { bottom: "-6px", right: "15%", size: 6, delay: "1.1s", duration: "1.7s" },
-  { top: "3px", left: "-6px", size: 5, delay: "0.7s", duration: "2.9s" },
+  { top: "-8px", left: "10%", size: 9, delay: "0s", duration: "2.1s" },
+  { top: "2px", right: "-8px", size: 8, delay: "0.3s", duration: "3.4s" },
+  { bottom: "-7px", right: "15%", size: 8, delay: "1.1s", duration: "1.7s" },
+  { top: "3px", left: "-7px", size: 7, delay: "0.7s", duration: "2.9s" },
+  { bottom: "-6px", left: "40%", size: 6, delay: "2.2s", duration: "2.6s" },
+  { top: "-6px", right: "35%", size: 6, delay: "1.4s", duration: "2.2s" },
   // inside / overlapping the child
-  { top: "20%", left: "38%", size: 5, delay: "1.5s", duration: "2.3s" },
-  { top: "15%", right: "22%", size: 4, delay: "0.5s", duration: "3.1s" },
-  { bottom: "15%", left: "22%", size: 4, delay: "1.9s", duration: "1.8s" }
+  { top: "20%", left: "38%", size: 6, delay: "1.5s", duration: "2.3s" },
+  { top: "15%", right: "22%", size: 5, delay: "0.5s", duration: "3.1s" },
+  { bottom: "15%", left: "22%", size: 5, delay: "1.9s", duration: "1.8s" }
 ];
 function GlintIcon({ size }) {
   return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 8 8", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 0.5 L4.6 3.4 L7.5 4 L4.6 4.6 L4 7.5 L3.4 4.6 L0.5 4 L3.4 3.4 Z" }) });
 }
-function Enchanted({ children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ...props, children: [
+function Enchanted({ children, className, hoverOnly = false, glintClassName, ...props }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", hoverOnly && "group/enchanted", className), ...props, children: [
     children,
     GLINTS.map((g, i) => /* @__PURE__ */ jsx(
       "span",
       {
-        className: "pointer-events-none absolute z-10 text-primary animate-enchanted",
+        className: cn(
+          "pointer-events-none absolute z-10 animate-enchanted drop-shadow-[0_0_3px_currentColor]",
+          glintClassName ?? "text-primary",
+          // Display toggle (not opacity) - the keyframes own opacity, and
+          // re-mounting restarts the glint timeline on each hover.
+          hoverOnly && "hidden group-hover/enchanted:block"
+        ),
         style: { top: g.top, bottom: g.bottom, left: g.left, right: g.right, animationDelay: g.delay, animationDuration: g.duration },
         children: /* @__PURE__ */ jsx(GlintIcon, { size: g.size })
       },