@memelabui/ui 0.9.0 → 0.11.0

package/dist/index.cjs

@@ -342,7 +342,7 @@ var sizeClass3 = {
   lg: "p-2.5 w-11 h-11"
 };
 var variantClass2 = {
-  primary: "bg-primary text-white shadow-glow hover:brightness-[0.98]",
+  primary: "bg-primary text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02]",
   success: "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20 hover:bg-emerald-700",
   warning: "bg-amber-600 text-white shadow-lg shadow-amber-600/20 hover:bg-amber-700",
   danger: "bg-rose-600 text-white shadow-lg shadow-rose-600/20 hover:bg-rose-700",
@@ -2045,6 +2045,7 @@ var Card = React.forwardRef(function Card2({ hoverable, variant = "surface", pad
     }
   );
 });
+var EXIT_DURATION = 200;
 function Modal({
   isOpen,
   onClose,
@@ -2060,6 +2061,23 @@ function Modal({
 }) {
   const dialogRef = React.useRef(null);
   const lastActiveElementRef = React.useRef(null);
+  const [mounted, setMounted] = React.useState(false);
+  const [closing, setClosing] = React.useState(false);
+  const closingTimerRef = React.useRef();
+  React.useEffect(() => {
+    if (isOpen) {
+      setClosing(false);
+      setMounted(true);
+      clearTimeout(closingTimerRef.current);
+    } else if (mounted) {
+      setClosing(true);
+      closingTimerRef.current = setTimeout(() => {
+        setMounted(false);
+        setClosing(false);
+      }, EXIT_DURATION);
+    }
+    return () => clearTimeout(closingTimerRef.current);
+  }, [isOpen]);
   React.useEffect(() => {
     if (!isOpen) return;
     lastActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -2076,20 +2094,28 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  useScrollLock(isOpen);
-  if (!isOpen) return null;
+  useScrollLock(mounted);
+  const handleClose = React.useCallback(() => {
+    if (closing) return;
+    onClose();
+  }, [closing, onClose]);
+  if (!mounted) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-closing": closing || void 0,
       className: cn(
-        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm animate-modal-backdrop",
+        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm",
         zIndexClassName,
         overlayClassName
       ),
+      style: {
+        animation: closing ? `ml-modal-backdrop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-backdrop 200ms ease forwards"
+      },
       role: "presentation",
       onMouseDown: (e) => {
         if (!closeOnBackdrop) return;
-        if (e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) handleClose();
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -2101,16 +2127,19 @@ function Modal({
           tabIndex: -1,
           ref: dialogRef,
           className: cn(
-            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 animate-modal-pop focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
             useGlass && "glass bg-surface-50/80",
             contentClassName
           ),
+          style: {
+            animation: closing ? `ml-modal-pop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-pop 200ms ease forwards"
+          },
           onMouseDown: (e) => e.stopPropagation(),
           onKeyDownCapture: (e) => {
             if (closeOnEsc && e.key === "Escape") {
               e.preventDefault();
               e.stopPropagation();
-              onClose();
+              handleClose();
               return;
             }
             if (e.key !== "Tab") return;
@@ -4469,6 +4498,7 @@ function DashboardLayout({
   brand,
   user,
   headerActions,
+  serviceSwitcher,
   navItems,
   renderNavItem,
   navigationLabel = "Main navigation",
@@ -4479,7 +4509,7 @@ function DashboardLayout({
   mainClassName,
   maxWidth = "lg"
 }) {
-  const hasGeneratedHeader = !navbar && Boolean(brand || user || headerActions);
+  const hasGeneratedHeader = !navbar && Boolean(brand || user || headerActions || serviceSwitcher);
   const hasGeneratedNavigation = !sidebar && Boolean(navItems?.length);
   const hasGeneratedShell = hasGeneratedHeader || hasGeneratedNavigation;
   const renderNav = renderNavItem ?? renderDefaultNavItem;
@@ -4492,7 +4522,8 @@ function DashboardLayout({
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex items-center gap-3", children: brand }),
-        (user || headerActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        (serviceSwitcher || user || headerActions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          serviceSwitcher,
           user,
           headerActions
         ] })
@@ -4538,6 +4569,272 @@ function DashboardLayout({
     ] })
   ] });
 }
+var GridIcon = React.forwardRef(function GridIcon2({ className }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      ref,
+      className,
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "1", width: "6", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "1", width: "6", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "1", y: "9", width: "6", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1.5" })
+      ]
+    }
+  );
+});
+var colsClass = { 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" };
+function ServiceSwitcher({
+  services,
+  trigger,
+  columns = 3,
+  className
+}) {
+  const popoverId = React.useId();
+  const triggerRef = React.useRef(null);
+  const popoverRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const [pos, setPos] = React.useState(null);
+  const updatePosition = React.useCallback(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    let left = r.right;
+    const top = r.bottom + 8;
+    const popupWidth = columns === 2 ? 240 : columns === 4 ? 400 : 320;
+    if (left + 16 > window.innerWidth) {
+      left = window.innerWidth - popupWidth - 16;
+    }
+    setPos({ left: Math.round(left), top: Math.round(top) });
+  }, [columns]);
+  const toggle = React.useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) updatePosition();
+      return !prev;
+    });
+  }, [updatePosition]);
+  const close = React.useCallback(() => setOpen(false), []);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || popoverRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open, close]);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, close]);
+  React.useEffect(() => {
+    if (!open) return;
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  const triggerButton = trigger ? /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref: triggerRef,
+      onClick: toggle,
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-controls": open ? popoverId : void 0,
+      className: "cursor-pointer",
+      children: trigger
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      onClick: toggle,
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-controls": open ? popoverId : void 0,
+      "aria-label": "Switch service",
+      className: cn(
+        "flex items-center justify-center w-9 h-9 rounded-lg transition-colors duration-200",
+        "text-white/40 hover:text-white/80 hover:bg-white/5",
+        open && "text-white/80 bg-white/5",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(GridIcon, { className: "w-4 h-4" })
+    }
+  );
+  const popup = open && typeof document !== "undefined" ? reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: popoverRef,
+        id: popoverId,
+        role: "dialog",
+        "aria-label": "MemeLab services",
+        className: "fixed z-[9999] glass rounded-xl shadow-xl ring-1 ring-white/10 p-3",
+        style: {
+          left: pos?.left ?? 0,
+          top: pos?.top ?? 0,
+          transform: "translateX(-100%)"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-1", colsClass[columns]), children: services.map((service) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "a",
+          {
+            href: service.href,
+            onClick: close,
+            className: cn(
+              "flex flex-col items-center gap-1.5 rounded-lg px-3 py-3 transition-all duration-150",
+              "hover:bg-white/5",
+              service.active && "bg-white/5 ring-1 ring-accent/30"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex items-center justify-center w-10 h-10 rounded-xl transition-colors",
+                    service.active ? "bg-accent/15" : "bg-white/5",
+                    service.color
+                  ),
+                  children: service.icon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+                "text-xs font-medium truncate max-w-full",
+                service.active ? "text-white" : "text-white/70"
+              ), children: service.label })
+            ]
+          },
+          service.key
+        )) })
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    triggerButton,
+    popup
+  ] });
+}
+function BellIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) });
+}
+function ChatBubblesIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 2H4a2 2 0 00-2 2v12a2 2 0 002 2h3l3 3 3-3h7a2 2 0 002-2V4a2 2 0 00-2-2z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", d: "M8 9h8M8 13h4" })
+  ] });
+}
+function BotIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "8", width: "18", height: "12", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8V5m-3 8h.01M15 13h.01M9 17h6" })
+  ] });
+}
+function MusicIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "18", r: "3", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "16", r: "3", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function AlertsIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 10V3L4 14h7v7l9-11h-7z" }) });
+}
+function AuctionIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+}
+function StatisticsIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) });
+}
+function StudioIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+  ] });
+}
+var MEMELAB_SERVICES = [
+  {
+    key: "studio",
+    label: "Studio",
+    href: "https://memelab.ru/studio",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(StudioIcon, { className: "w-5 h-5" }),
+    color: "text-purple-400",
+    description: "\u041F\u0430\u043D\u0435\u043B\u044C \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F"
+  },
+  {
+    key: "multichat",
+    label: "Multichat",
+    href: "https://multichat.memelab.ru",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(ChatBubblesIcon, { className: "w-5 h-5" }),
+    color: "text-blue-400",
+    description: "\u0410\u0433\u0440\u0435\u0433\u0430\u0442\u043E\u0440 \u0447\u0430\u0442\u043E\u0432"
+  },
+  {
+    key: "chatbot",
+    label: "Chatbot",
+    href: "https://chatbot.memelab.ru",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-5 h-5" }),
+    color: "text-emerald-400",
+    description: "\u0418\u0418 \u0447\u0430\u0442-\u0431\u043E\u0442"
+  },
+  {
+    key: "alerts",
+    label: "Alerts",
+    href: "https://alerts.memelab.ru",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(AlertsIcon, { className: "w-5 h-5" }),
+    color: "text-amber-400",
+    description: "\u0410\u043B\u0435\u0440\u0442\u044B \u043D\u0430 \u0441\u0442\u0440\u0438\u043C\u0435"
+  },
+  {
+    key: "notify",
+    label: "Notify",
+    href: "https://notify.memelab.ru",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(BellIcon, { className: "w-5 h-5" }),
+    color: "text-rose-400",
+    description: "\u0423\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F"
+  },
+  {
+    key: "music",
+    label: "Music",
+    href: "https://music.memelab.ru",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(MusicIcon, { className: "w-5 h-5" }),
+    color: "text-violet-400",
+    description: "Now Playing"
+  },
+  {
+    key: "auction",
+    label: "Auction",
+    href: "https://auction.memelab.ru",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(AuctionIcon, { className: "w-5 h-5" }),
+    color: "text-cyan-400",
+    description: "\u0410\u0443\u043A\u0446\u0438\u043E\u043D \u043F\u043E\u0438\u043D\u0442\u043E\u0432"
+  },
+  {
+    key: "statistics",
+    label: "Statistics",
+    href: "https://stats.memelab.ru",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(StatisticsIcon, { className: "w-5 h-5" }),
+    color: "text-teal-400",
+    description: "\u0410\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0430 \u0441\u0442\u0440\u0438\u043C\u043E\u0432"
+  }
+];
 function CopyIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -4891,7 +5188,10 @@ function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        role: "region",
         "aria-label": "Notifications",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
         className: cn("fixed z-[9999] flex flex-col gap-3 pointer-events-none", positionClass2[position]),
         children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ToastCard, { toast: t, onDismiss: dismiss }) }, t.id))
       }
@@ -5823,6 +6123,7 @@ exports.Heading = Heading;
 exports.IconButton = IconButton;
 exports.Input = Input;
 exports.LoadingScreen = LoadingScreen;
+exports.MEMELAB_SERVICES = MEMELAB_SERVICES;
 exports.Modal = Modal;
 exports.MutationOverlay = MutationOverlay;
 exports.Navbar = Navbar;
@@ -5839,6 +6140,7 @@ exports.ScrollArea = ScrollArea;
 exports.SearchInput = SearchInput;
 exports.SectionCard = SectionCard;
 exports.Select = Select;
+exports.ServiceSwitcher = ServiceSwitcher;
 exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;

package/dist/index.d.cts

@@ -842,6 +842,8 @@ type DashboardLayoutProps = {
     brand?: ReactNode;
     user?: ReactNode;
     headerActions?: ReactNode;
+    /** Service switcher rendered in the header between brand and user */
+    serviceSwitcher?: ReactNode;
     navItems?: DashboardLayoutNavItem[];
     renderNavItem?: (item: DashboardLayoutNavItem, context: DashboardLayoutNavRenderContext) => ReactNode;
     navigationLabel?: string;
@@ -852,7 +854,42 @@ type DashboardLayoutProps = {
     mainClassName?: string;
     maxWidth?: DashboardLayoutWidth;
 };
-declare function DashboardLayout({ children, navbar, sidebar, brand, user, headerActions, navItems, renderNavItem, navigationLabel, mobileNavigationLabel, shellClassName, shellWidth, className, mainClassName, maxWidth, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+declare function DashboardLayout({ children, navbar, sidebar, brand, user, headerActions, serviceSwitcher, navItems, renderNavItem, navigationLabel, mobileNavigationLabel, shellClassName, shellWidth, className, mainClassName, maxWidth, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface ServiceSwitcherItem {
+    /** Unique service identifier */
+    key: string;
+    /** Display name */
+    label: string;
+    /** Full URL including protocol (e.g. https://chatbot.memelab.ru) */
+    href: string;
+    /** Icon element */
+    icon: ReactNode;
+    /** Tailwind color class for the icon (e.g. 'text-rose-400') */
+    color?: string;
+    /** Short description shown below the label */
+    description?: string;
+    /** Whether this is the currently active service */
+    active?: boolean;
+}
+/**
+ * All MemeLab platform services.
+ * Used by ServiceSwitcher across all service frontends.
+ * Each service marks itself as `active` when rendering.
+ */
+declare const MEMELAB_SERVICES: ServiceSwitcherItem[];
+
+type ServiceSwitcherProps = {
+    /** List of services to display in the grid */
+    services: ServiceSwitcherItem[];
+    /** Custom trigger element. Default: grid icon button */
+    trigger?: ReactElement;
+    /** Number of grid columns. Default: 3 */
+    columns?: 2 | 3 | 4;
+    /** Extra class on the root wrapper */
+    className?: string;
+};
+declare function ServiceSwitcher({ services, trigger, columns, className, }: ServiceSwitcherProps): react_jsx_runtime.JSX.Element;
 
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 type AlertProps = {
@@ -1192,4 +1229,4 @@ type LoadingScreenProps = {
 };
 declare function LoadingScreen({ message, size, className }: LoadingScreenProps): react_jsx_runtime.JSX.Element;
 
-export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, type BreadcrumbRenderLinkProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutNavItem, type DashboardLayoutNavRenderContext, type DashboardLayoutProps, type DashboardLayoutWidth, DataTable, type DataTableCellContext, type DataTableColumnDef, type DataTableColumnFilterType, type DataTableFilterContext, type DataTableFilterOption, type DataTableHeaderContext, type DataTableProps, type DataTableSort, DateRangePicker, type DateRangePickerPlaceholder, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryActionContext, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardMetric, type StatCardProps, type StatCardSize, type StatCardTrend, type StatCardValueColor, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineEvent, type TimelineGroupBy, type TimelineIconTone, type TimelineLineStyle, type TimelineOrder, type TimelineProps, type TimelineTimestampPosition, type TimelineVariant, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };
+export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, type BreadcrumbRenderLinkProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutNavItem, type DashboardLayoutNavRenderContext, type DashboardLayoutProps, type DashboardLayoutWidth, DataTable, type DataTableCellContext, type DataTableColumnDef, type DataTableColumnFilterType, type DataTableFilterContext, type DataTableFilterOption, type DataTableHeaderContext, type DataTableProps, type DataTableSort, DateRangePicker, type DateRangePickerPlaceholder, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryActionContext, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, MEMELAB_SERVICES, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, ServiceSwitcher, type ServiceSwitcherItem, type ServiceSwitcherProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardMetric, type StatCardProps, type StatCardSize, type StatCardTrend, type StatCardValueColor, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineEvent, type TimelineGroupBy, type TimelineIconTone, type TimelineLineStyle, type TimelineOrder, type TimelineProps, type TimelineTimestampPosition, type TimelineVariant, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };

package/dist/index.d.ts

@@ -842,6 +842,8 @@ type DashboardLayoutProps = {
     brand?: ReactNode;
     user?: ReactNode;
     headerActions?: ReactNode;
+    /** Service switcher rendered in the header between brand and user */
+    serviceSwitcher?: ReactNode;
     navItems?: DashboardLayoutNavItem[];
     renderNavItem?: (item: DashboardLayoutNavItem, context: DashboardLayoutNavRenderContext) => ReactNode;
     navigationLabel?: string;
@@ -852,7 +854,42 @@ type DashboardLayoutProps = {
     mainClassName?: string;
     maxWidth?: DashboardLayoutWidth;
 };
-declare function DashboardLayout({ children, navbar, sidebar, brand, user, headerActions, navItems, renderNavItem, navigationLabel, mobileNavigationLabel, shellClassName, shellWidth, className, mainClassName, maxWidth, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+declare function DashboardLayout({ children, navbar, sidebar, brand, user, headerActions, serviceSwitcher, navItems, renderNavItem, navigationLabel, mobileNavigationLabel, shellClassName, shellWidth, className, mainClassName, maxWidth, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface ServiceSwitcherItem {
+    /** Unique service identifier */
+    key: string;
+    /** Display name */
+    label: string;
+    /** Full URL including protocol (e.g. https://chatbot.memelab.ru) */
+    href: string;
+    /** Icon element */
+    icon: ReactNode;
+    /** Tailwind color class for the icon (e.g. 'text-rose-400') */
+    color?: string;
+    /** Short description shown below the label */
+    description?: string;
+    /** Whether this is the currently active service */
+    active?: boolean;
+}
+/**
+ * All MemeLab platform services.
+ * Used by ServiceSwitcher across all service frontends.
+ * Each service marks itself as `active` when rendering.
+ */
+declare const MEMELAB_SERVICES: ServiceSwitcherItem[];
+
+type ServiceSwitcherProps = {
+    /** List of services to display in the grid */
+    services: ServiceSwitcherItem[];
+    /** Custom trigger element. Default: grid icon button */
+    trigger?: ReactElement;
+    /** Number of grid columns. Default: 3 */
+    columns?: 2 | 3 | 4;
+    /** Extra class on the root wrapper */
+    className?: string;
+};
+declare function ServiceSwitcher({ services, trigger, columns, className, }: ServiceSwitcherProps): react_jsx_runtime.JSX.Element;
 
 type AlertVariant = 'info' | 'success' | 'warning' | 'error';
 type AlertProps = {
@@ -1192,4 +1229,4 @@ type LoadingScreenProps = {
 };
 declare function LoadingScreen({ message, size, className }: LoadingScreenProps): react_jsx_runtime.JSX.Element;
 
-export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, type BreadcrumbRenderLinkProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutNavItem, type DashboardLayoutNavRenderContext, type DashboardLayoutProps, type DashboardLayoutWidth, DataTable, type DataTableCellContext, type DataTableColumnDef, type DataTableColumnFilterType, type DataTableFilterContext, type DataTableFilterOption, type DataTableHeaderContext, type DataTableProps, type DataTableSort, DateRangePicker, type DateRangePickerPlaceholder, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryActionContext, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardMetric, type StatCardProps, type StatCardSize, type StatCardTrend, type StatCardValueColor, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineEvent, type TimelineGroupBy, type TimelineIconTone, type TimelineLineStyle, type TimelineOrder, type TimelineProps, type TimelineTimestampPosition, type TimelineVariant, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };
+export { ActiveFilterPills, type ActiveFilterPillsProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BreadcrumbItem, type BreadcrumbRenderLinkProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardPadding, type CardProps, type CardVariant, Checkbox, type CheckboxProps, CollapsibleSection, type CollapsibleSectionProps, ColorInput, type ColorInputProps, Combobox, type ComboboxOption, type ComboboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CooldownRing, type CooldownRingProps, type CooldownRingSize, CopyField, type CopyFieldProps, DashboardLayout, type DashboardLayoutNavItem, type DashboardLayoutNavRenderContext, type DashboardLayoutProps, type DashboardLayoutWidth, DataTable, type DataTableCellContext, type DataTableColumnDef, type DataTableColumnFilterType, type DataTableFilterContext, type DataTableFilterOption, type DataTableHeaderContext, type DataTableProps, type DataTableSort, DateRangePicker, type DateRangePickerPlaceholder, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, Divider, type DividerProps, DotIndicator, type DotIndicatorProps, Drawer, type DrawerProps, type DrawerSide, type DrawerSize, DropZone, type DropZoneProps, Dropdown, DropdownItem, type DropdownItemProps, DropdownMenu, type DropdownMenuProps, type DropdownProps, DropdownSeparator, type DropdownSeparatorProps, DropdownTrigger, type DropdownTriggerProps, EmptyState, type EmptyStateProps, ErrorBoundary, type ErrorBoundaryActionContext, type ErrorBoundaryProps, type FilterPill, FormField, type FormFieldProps, Heading, type HeadingLevel, type HeadingProps, type HotkeyBinding, type HotkeyModifiers, IconButton, type IconButtonProps, Input, type InputProps, LoadingScreen, type LoadingScreenProps, MEMELAB_SERVICES, Modal, type ModalProps, MutationOverlay, type MutationOverlayProps, type MutationOverlayStatus, Navbar, type NavbarProps, NotificationBell, type NotificationBellProps, PageShell, type PageShellProps, type PageShellVariant, Pagination, type PaginationProps, Pill, Popover, type PopoverPlacement, type PopoverProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, ProgressButton, type ProgressButtonProps, RadioGroup, type RadioGroupProps, RadioItem, type RadioItemProps, ScrollArea, type ScrollAreaProps, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, Select, type SelectProps, ServiceSwitcher, type ServiceSwitcherItem, type ServiceSwitcherProps, Sidebar, type SidebarProps, type Size, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Stack, type StackProps, StageProgress, type StageProgressProps, StatCard, type StatCardMetric, type StatCardProps, type StatCardSize, type StatCardTrend, type StatCardValueColor, type Step, Stepper, type StepperProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, type TabsVariant, TagInput, type TagInputProps, Text, type TextColor, type TextProps, type TextSize, Textarea, type TextareaProps, Timeline, type TimelineEvent, type TimelineGroupBy, type TimelineIconTone, type TimelineLineStyle, type TimelineOrder, type TimelineProps, type TimelineTimestampPosition, type TimelineVariant, type ToastData, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPlacement, type TooltipProps, Transition, type TransitionPreset, type TransitionProps, type UseClipboardReturn, type UseDisclosureReturn, type UseHotkeysOptions, type UseIntersectionObserverOptions, type UseIntersectionObserverReturn, type UseSharedNowOptions, VisuallyHidden, type VisuallyHiddenProps, cn, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };

package/dist/index.js

@@ -336,7 +336,7 @@ var sizeClass3 = {
   lg: "p-2.5 w-11 h-11"
 };
 var variantClass2 = {
-  primary: "bg-primary text-white shadow-glow hover:brightness-[0.98]",
+  primary: "bg-primary text-white shadow-glow hover:shadow-glow-lg hover:scale-[1.02]",
   success: "bg-emerald-600 text-white shadow-lg shadow-emerald-600/20 hover:bg-emerald-700",
   warning: "bg-amber-600 text-white shadow-lg shadow-amber-600/20 hover:bg-amber-700",
   danger: "bg-rose-600 text-white shadow-lg shadow-rose-600/20 hover:bg-rose-700",
@@ -2039,6 +2039,7 @@ var Card = forwardRef(function Card2({ hoverable, variant = "surface", padding =
     }
   );
 });
+var EXIT_DURATION = 200;
 function Modal({
   isOpen,
   onClose,
@@ -2054,6 +2055,23 @@ function Modal({
 }) {
   const dialogRef = useRef(null);
   const lastActiveElementRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const closingTimerRef = useRef();
+  useEffect(() => {
+    if (isOpen) {
+      setClosing(false);
+      setMounted(true);
+      clearTimeout(closingTimerRef.current);
+    } else if (mounted) {
+      setClosing(true);
+      closingTimerRef.current = setTimeout(() => {
+        setMounted(false);
+        setClosing(false);
+      }, EXIT_DURATION);
+    }
+    return () => clearTimeout(closingTimerRef.current);
+  }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     lastActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -2070,20 +2088,28 @@ function Modal({
       if (lastActive?.isConnected) focusSafely(lastActive);
     };
   }, [isOpen]);
-  useScrollLock(isOpen);
-  if (!isOpen) return null;
+  useScrollLock(mounted);
+  const handleClose = useCallback(() => {
+    if (closing) return;
+    onClose();
+  }, [closing, onClose]);
+  if (!mounted) return null;
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-closing": closing || void 0,
       className: cn(
-        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm animate-modal-backdrop",
+        "fixed inset-0 flex items-end sm:items-center justify-center p-4 pb-safe bg-black/25 backdrop-blur-sm",
         zIndexClassName,
         overlayClassName
       ),
+      style: {
+        animation: closing ? `ml-modal-backdrop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-backdrop 200ms ease forwards"
+      },
       role: "presentation",
       onMouseDown: (e) => {
         if (!closeOnBackdrop) return;
-        if (e.target === e.currentTarget) onClose();
+        if (e.target === e.currentTarget) handleClose();
       },
       children: /* @__PURE__ */ jsx(
         "div",
@@ -2095,16 +2121,19 @@ function Modal({
           tabIndex: -1,
           ref: dialogRef,
           className: cn(
-            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 animate-modal-pop focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
+            "w-full rounded-t-3xl sm:rounded-2xl shadow-xl ring-1 ring-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
             useGlass && "glass bg-surface-50/80",
             contentClassName
           ),
+          style: {
+            animation: closing ? `ml-modal-pop-out ${EXIT_DURATION}ms ease forwards` : "ml-modal-pop 200ms ease forwards"
+          },
           onMouseDown: (e) => e.stopPropagation(),
           onKeyDownCapture: (e) => {
             if (closeOnEsc && e.key === "Escape") {
               e.preventDefault();
               e.stopPropagation();
-              onClose();
+              handleClose();
               return;
             }
             if (e.key !== "Tab") return;
@@ -4463,6 +4492,7 @@ function DashboardLayout({
   brand,
   user,
   headerActions,
+  serviceSwitcher,
   navItems,
   renderNavItem,
   navigationLabel = "Main navigation",
@@ -4473,7 +4503,7 @@ function DashboardLayout({
   mainClassName,
   maxWidth = "lg"
 }) {
-  const hasGeneratedHeader = !navbar && Boolean(brand || user || headerActions);
+  const hasGeneratedHeader = !navbar && Boolean(brand || user || headerActions || serviceSwitcher);
   const hasGeneratedNavigation = !sidebar && Boolean(navItems?.length);
   const hasGeneratedShell = hasGeneratedHeader || hasGeneratedNavigation;
   const renderNav = renderNavItem ?? renderDefaultNavItem;
@@ -4486,7 +4516,8 @@ function DashboardLayout({
       ),
       children: [
         /* @__PURE__ */ jsx("div", { className: "min-w-0 flex items-center gap-3", children: brand }),
-        (user || headerActions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        (serviceSwitcher || user || headerActions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          serviceSwitcher,
           user,
           headerActions
         ] })
@@ -4532,6 +4563,272 @@ function DashboardLayout({
     ] })
   ] });
 }
+var GridIcon = forwardRef(function GridIcon2({ className }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      className,
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "1", y: "1", width: "6", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "1", width: "6", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsx("rect", { x: "1", y: "9", width: "6", height: "6", rx: "1.5" }),
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "1.5" })
+      ]
+    }
+  );
+});
+var colsClass = { 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" };
+function ServiceSwitcher({
+  services,
+  trigger,
+  columns = 3,
+  className
+}) {
+  const popoverId = useId();
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  const updatePosition = useCallback(() => {
+    const el = triggerRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    let left = r.right;
+    const top = r.bottom + 8;
+    const popupWidth = columns === 2 ? 240 : columns === 4 ? 400 : 320;
+    if (left + 16 > window.innerWidth) {
+      left = window.innerWidth - popupWidth - 16;
+    }
+    setPos({ left: Math.round(left), top: Math.round(top) });
+  }, [columns]);
+  const toggle = useCallback(() => {
+    setOpen((prev) => {
+      if (!prev) updatePosition();
+      return !prev;
+    });
+  }, [updatePosition]);
+  const close = useCallback(() => setOpen(false), []);
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || popoverRef.current?.contains(target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open, close]);
+  useEffect(() => {
+    if (!open) return;
+    const handleKey = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [open, close]);
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, updatePosition]);
+  const triggerButton = trigger ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: triggerRef,
+      onClick: toggle,
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-controls": open ? popoverId : void 0,
+      className: "cursor-pointer",
+      children: trigger
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      onClick: toggle,
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-controls": open ? popoverId : void 0,
+      "aria-label": "Switch service",
+      className: cn(
+        "flex items-center justify-center w-9 h-9 rounded-lg transition-colors duration-200",
+        "text-white/40 hover:text-white/80 hover:bg-white/5",
+        open && "text-white/80 bg-white/5",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(GridIcon, { className: "w-4 h-4" })
+    }
+  );
+  const popup = open && typeof document !== "undefined" ? createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: popoverRef,
+        id: popoverId,
+        role: "dialog",
+        "aria-label": "MemeLab services",
+        className: "fixed z-[9999] glass rounded-xl shadow-xl ring-1 ring-white/10 p-3",
+        style: {
+          left: pos?.left ?? 0,
+          top: pos?.top ?? 0,
+          transform: "translateX(-100%)"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-1", colsClass[columns]), children: services.map((service) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: service.href,
+            onClick: close,
+            className: cn(
+              "flex flex-col items-center gap-1.5 rounded-lg px-3 py-3 transition-all duration-150",
+              "hover:bg-white/5",
+              service.active && "bg-white/5 ring-1 ring-accent/30"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "flex items-center justify-center w-10 h-10 rounded-xl transition-colors",
+                    service.active ? "bg-accent/15" : "bg-white/5",
+                    service.color
+                  ),
+                  children: service.icon
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn(
+                "text-xs font-medium truncate max-w-full",
+                service.active ? "text-white" : "text-white/70"
+              ), children: service.label })
+            ]
+          },
+          service.key
+        )) })
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    triggerButton,
+    popup
+  ] });
+}
+function BellIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" }) });
+}
+function ChatBubblesIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 2H4a2 2 0 00-2 2v12a2 2 0 002 2h3l3 3 3-3h7a2 2 0 002-2V4a2 2 0 00-2-2z" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M8 9h8M8 13h4" })
+  ] });
+}
+function BotIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "8", width: "18", height: "12", rx: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8V5m-3 8h.01M15 13h.01M9 17h6" })
+  ] });
+}
+function MusicIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 18V5l12-2v13" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "16", r: "3", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function AlertsIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 10V3L4 14h7v7l9-11h-7z" }) });
+}
+function AuctionIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) });
+}
+function StatisticsIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) });
+}
+function StudioIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" }),
+    /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z" })
+  ] });
+}
+var MEMELAB_SERVICES = [
+  {
+    key: "studio",
+    label: "Studio",
+    href: "https://memelab.ru/studio",
+    icon: /* @__PURE__ */ jsx(StudioIcon, { className: "w-5 h-5" }),
+    color: "text-purple-400",
+    description: "\u041F\u0430\u043D\u0435\u043B\u044C \u0443\u043F\u0440\u0430\u0432\u043B\u0435\u043D\u0438\u044F"
+  },
+  {
+    key: "multichat",
+    label: "Multichat",
+    href: "https://multichat.memelab.ru",
+    icon: /* @__PURE__ */ jsx(ChatBubblesIcon, { className: "w-5 h-5" }),
+    color: "text-blue-400",
+    description: "\u0410\u0433\u0440\u0435\u0433\u0430\u0442\u043E\u0440 \u0447\u0430\u0442\u043E\u0432"
+  },
+  {
+    key: "chatbot",
+    label: "Chatbot",
+    href: "https://chatbot.memelab.ru",
+    icon: /* @__PURE__ */ jsx(BotIcon, { className: "w-5 h-5" }),
+    color: "text-emerald-400",
+    description: "\u0418\u0418 \u0447\u0430\u0442-\u0431\u043E\u0442"
+  },
+  {
+    key: "alerts",
+    label: "Alerts",
+    href: "https://alerts.memelab.ru",
+    icon: /* @__PURE__ */ jsx(AlertsIcon, { className: "w-5 h-5" }),
+    color: "text-amber-400",
+    description: "\u0410\u043B\u0435\u0440\u0442\u044B \u043D\u0430 \u0441\u0442\u0440\u0438\u043C\u0435"
+  },
+  {
+    key: "notify",
+    label: "Notify",
+    href: "https://notify.memelab.ru",
+    icon: /* @__PURE__ */ jsx(BellIcon, { className: "w-5 h-5" }),
+    color: "text-rose-400",
+    description: "\u0423\u0432\u0435\u0434\u043E\u043C\u043B\u0435\u043D\u0438\u044F"
+  },
+  {
+    key: "music",
+    label: "Music",
+    href: "https://music.memelab.ru",
+    icon: /* @__PURE__ */ jsx(MusicIcon, { className: "w-5 h-5" }),
+    color: "text-violet-400",
+    description: "Now Playing"
+  },
+  {
+    key: "auction",
+    label: "Auction",
+    href: "https://auction.memelab.ru",
+    icon: /* @__PURE__ */ jsx(AuctionIcon, { className: "w-5 h-5" }),
+    color: "text-cyan-400",
+    description: "\u0410\u0443\u043A\u0446\u0438\u043E\u043D \u043F\u043E\u0438\u043D\u0442\u043E\u0432"
+  },
+  {
+    key: "statistics",
+    label: "Statistics",
+    href: "https://stats.memelab.ru",
+    icon: /* @__PURE__ */ jsx(StatisticsIcon, { className: "w-5 h-5" }),
+    color: "text-teal-400",
+    description: "\u0410\u043D\u0430\u043B\u0438\u0442\u0438\u043A\u0430 \u0441\u0442\u0440\u0438\u043C\u043E\u0432"
+  }
+];
 function CopyIcon() {
   return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "9", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -4885,7 +5182,10 @@ function ToastProvider({ children, position = "top-right", maxToasts = 5 }) {
     /* @__PURE__ */ jsx(
       "div",
       {
+        role: "region",
         "aria-label": "Notifications",
+        "aria-live": "polite",
+        "aria-relevant": "additions text",
         className: cn("fixed z-[9999] flex flex-col gap-3 pointer-events-none", positionClass2[position]),
         children: toasts.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx(ToastCard, { toast: t, onDismiss: dismiss }) }, t.id))
       }
@@ -5784,4 +6084,4 @@ function LoadingScreen({ message, size = "lg", className }) {
   );
 }
 
-export { ActiveFilterPills, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CollapsibleSection, ColorInput, Combobox, ConfirmDialog, CooldownRing, CopyField, DashboardLayout, DataTable, DateRangePicker, Divider, DotIndicator, Drawer, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, ErrorBoundary, FormField, Heading, IconButton, Input, LoadingScreen, Modal, MutationOverlay, Navbar, NotificationBell, PageShell, Pagination, Pill, Popover, ProgressBar, ProgressButton, RadioGroup, RadioItem, ScrollArea, SearchInput, SectionCard, Select, Sidebar, Skeleton, Slider, Spinner, Stack, StageProgress, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Text, Textarea, Timeline, ToastProvider, Toggle, Tooltip, Transition, VisuallyHidden, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };
+export { ActiveFilterPills, Alert, Avatar, Badge, Breadcrumbs, Button, Card, Checkbox, CollapsibleSection, ColorInput, Combobox, ConfirmDialog, CooldownRing, CopyField, DashboardLayout, DataTable, DateRangePicker, Divider, DotIndicator, Drawer, DropZone, Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, EmptyState, ErrorBoundary, FormField, Heading, IconButton, Input, LoadingScreen, MEMELAB_SERVICES, Modal, MutationOverlay, Navbar, NotificationBell, PageShell, Pagination, Pill, Popover, ProgressBar, ProgressButton, RadioGroup, RadioItem, ScrollArea, SearchInput, SectionCard, Select, ServiceSwitcher, Sidebar, Skeleton, Slider, Spinner, Stack, StageProgress, StatCard, Stepper, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tabs, TagInput, Text, Textarea, Timeline, ToastProvider, Toggle, Tooltip, Transition, VisuallyHidden, cn, colors, focusSafely, getFocusableElements, useClipboard, useDebounce, useDisclosure, useHotkeys, useIntersectionObserver, useMediaQuery, useScrollLock, useSharedNow, useToast };

package/dist/styles/index.css

@@ -62,6 +62,14 @@
   --ml-transition-fast: 150ms ease;
   --ml-transition-normal: 200ms ease;
   --ml-transition-slow: 300ms ease;
+
+  /* ---- Animation durations ---- */
+  --ml-anim-fast: 200ms;
+  --ml-anim-normal: 300ms;
+  --ml-anim-slow: 500ms;
+
+  /* ---- Layout ---- */
+  --ml-header-height: 4rem;
 }
 @keyframes ml-float {
   0%,
@@ -120,6 +128,24 @@
     transform: translateY(0) scale(1);
   }
 }
+@keyframes ml-modal-backdrop-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes ml-modal-pop-out {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+}
 @keyframes ml-shimmer {
   0% {
     transform: translateX(-200%);
@@ -149,7 +175,8 @@
   [class*='animate-modal'],
   [class*='animate-shimmer'],
   [class*='animate-spin'],
-  [class*='animate-pulse'] {
+  [class*='animate-pulse'],
+  [data-closing] {
     animation-duration: 0.01ms;
     animation-iteration-count: 1;
     transition-duration: 0.01ms;
@@ -664,6 +691,12 @@ a {
       0 1px 3px rgba(0, 0, 0, 0.35),
       inset 0 0 0 1px var(--ml-glass-border, rgba(255, 255, 255, 0.1));
   }
+.glass:hover {
+    background: var(--ml-glass-bg-hover, rgba(255, 255, 255, 0.07));
+    box-shadow:
+      0 1px 3px rgba(0, 0, 0, 0.35),
+      inset 0 0 0 1px var(--ml-glass-border-hover, rgba(102, 126, 234, 0.25));
+  }
 /* Surface card */
 .surface {
     border-radius: var(--ml-radius-md, 0.75rem);
@@ -677,9 +710,12 @@ a {
     );
   }
 .surface-hover {
-    transition: box-shadow var(--ml-transition-fast, 150ms ease);
+    transition:
+      box-shadow var(--ml-transition-fast, 150ms ease),
+      transform var(--ml-transition-fast, 150ms ease);
   }
 .surface-hover:hover {
+    transform: translateY(-1px);
     box-shadow: var(
       --ml-shadow-surface-hover,
       0 10px 25px rgba(0, 0, 0, 0.45),
@@ -1420,30 +1456,6 @@ a {
 .animate-\[ml-shimmer_2s_ease-in-out_infinite\] {
   animation: ml-shimmer 2s ease-in-out infinite;
 }
-@keyframes ml-modal-backdrop {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-.animate-modal-backdrop {
-  animation: ml-modal-backdrop 140ms ease-out both;
-}
-@keyframes ml-modal-pop {
-  from {
-    opacity: 0;
-    transform: translateY(6px) scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-.animate-modal-pop {
-  animation: ml-modal-pop 160ms cubic-bezier(0.22,1,0.36,1) both;
-}
 @keyframes ping {
   75%, 100% {
     transform: scale(2);
@@ -1502,6 +1514,15 @@ a {
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .grid-cols-7 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
@@ -2262,6 +2283,10 @@ a {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
 }
+.text-cyan-400 {
+  --tw-text-opacity: 1;
+  color: rgb(34 211 238 / var(--tw-text-opacity, 1));
+}
 .text-emerald-400 {
   --tw-text-opacity: 1;
   color: rgb(52 211 153 / var(--tw-text-opacity, 1));
@@ -2278,6 +2303,10 @@ a {
   --tw-text-opacity: 1;
   color: rgb(var(--ml-primary-light) / var(--tw-text-opacity, 1));
 }
+.text-purple-400 {
+  --tw-text-opacity: 1;
+  color: rgb(192 132 252 / var(--tw-text-opacity, 1));
+}
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
@@ -2290,6 +2319,10 @@ a {
   --tw-text-opacity: 1;
   color: rgb(244 63 94 / var(--tw-text-opacity, 1));
 }
+.text-teal-400 {
+  --tw-text-opacity: 1;
+  color: rgb(45 212 191 / var(--tw-text-opacity, 1));
+}
 .text-transparent {
   color: transparent;
 }
@@ -2466,6 +2499,9 @@ a {
 .ring-accent\/20 {
   --tw-ring-color: rgb(var(--ml-accent) / 0.2);
 }
+.ring-accent\/30 {
+  --tw-ring-color: rgb(var(--ml-accent) / 0.3);
+}
 .ring-amber-500\/20 {
   --tw-ring-color: rgb(245 158 11 / 0.2);
 }
@@ -2734,10 +2770,6 @@ a {
 .hover\:ring-white\/20:hover {
   --tw-ring-color: rgb(255 255 255 / 0.2);
 }
-.hover\:brightness-\[0\.98\]:hover {
-  --tw-brightness: brightness(0.98);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memelabui/ui",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "MemeLab shared UI component library — React + Tailwind + Glassmorphism",
   "type": "module",
   "sideEffects": [
@@ -46,6 +46,20 @@
     "dist",
     "README.md"
   ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup && pnpm build:css",
+    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
+    "build:storybook": "storybook build -o storybook-static",
+    "test": "vitest",
+    "test:ci": "vitest --run",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
+    "lint:fix": "eslint src --ext ts,tsx --fix",
+    "format": "prettier --check \"src/**/*.{ts,tsx,css}\"",
+    "format:fix": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "prepublishOnly": "pnpm build"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
@@ -67,7 +81,7 @@
     "@typescript-eslint/parser": "^8.22.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.19.0",
+    "eslint": "^10.0.2",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",
     "jsdom": "^25.0.1",
@@ -88,6 +102,10 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "packageManager": "pnpm@9.15.0",
+  "engines": {
+    "node": ">=22"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -101,18 +119,5 @@
     "glassmorphism",
     "dark-theme",
     "component-library"
-  ],
-  "scripts": {
-    "dev": "storybook dev -p 6006",
-    "build": "tsup && pnpm build:css",
-    "build:css": "postcss src/styles/index.css -o dist/styles/index.css",
-    "build:storybook": "storybook build -o storybook-static",
-    "test": "vitest",
-    "test:ci": "vitest --run",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
-    "lint:fix": "eslint src --ext ts,tsx --fix",
-    "format": "prettier --check \"src/**/*.{ts,tsx,css}\"",
-    "format:fix": "prettier --write \"src/**/*.{ts,tsx,css}\""
-  }
-}
+  ]
+}