@geomak/ui 5.0.1 → 5.0.3

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useState, useEffect, useMemo, useContext, useRef, useId, useCallback, useLayoutEffect } from 'react';
+import React8, { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef, useId, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
@@ -9,7 +9,6 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as Accordion from '@radix-ui/react-accordion';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import * as Toast from '@radix-ui/react-toast';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
@@ -783,12 +782,12 @@ var VIEWPORT_CLASSES = {
 function getInitialMotion(pos, reduced) {
   if (reduced) return { opacity: 0, y: 0, scale: 1 };
   const bottom = pos.startsWith("bottom");
-  return {
-    opacity: 0,
-    y: bottom ? 24 : -24,
-    // rise from below (bottom) or drop from above (top)
-    scale: 0.92
-  };
+  return { opacity: 0, y: bottom ? 28 : -28, scale: 0.92 };
+}
+function getExitMotion(pos, reduced) {
+  if (reduced) return { opacity: 0, y: 0, scale: 1 };
+  const bottom = pos.startsWith("bottom");
+  return { opacity: 0, y: bottom ? 18 : -18, scale: 0.94 };
 }
 function TypeIcon({ type }) {
   if (type === "success") {
@@ -820,66 +819,87 @@ function NotificationItem({
   onClose,
   reduced
 }) {
-  const [hovered, setHovered] = useState(false);
-  const initial = getInitialMotion(pos, reduced);
-  const center = pos.endsWith("center");
+  const [paused, setPaused] = useState(false);
   const duration = n.duration ?? 4e3;
-  const showProgress = !reduced && isFinite(duration) && duration > 0;
+  const isAutoDismissing = isFinite(duration) && duration > 0;
+  const showProgress = !reduced && isAutoDismissing;
+  const timerRef = useRef(null);
+  const startTimeRef = useRef(0);
+  const remainingRef = useRef(duration);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const scheduleDismiss = useCallback((ms) => {
+    clearTimer();
+    if (!isAutoDismissing) return;
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(() => onClose(n.id), ms);
+  }, [clearTimer, isAutoDismissing, n.id, onClose]);
+  useEffect(() => {
+    if (paused || !isAutoDismissing) return;
+    scheduleDismiss(remainingRef.current);
+    return clearTimer;
+  }, [paused, isAutoDismissing, scheduleDismiss, clearTimer]);
+  const onPauseStart = () => {
+    if (!isAutoDismissing) return;
+    const elapsed = Date.now() - startTimeRef.current;
+    remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+    setPaused(true);
+  };
+  const onPauseEnd = () => {
+    if (!isAutoDismissing) return;
+    setPaused(false);
+  };
   return /* @__PURE__ */ jsx(
     motion.div,
     {
+      layout: true,
       className: "pointer-events-auto",
-      initial,
+      initial: getInitialMotion(pos, reduced),
       animate: { opacity: 1, y: 0, scale: 1 },
-      exit: {
-        opacity: 0,
-        y: pos.startsWith("bottom") ? 16 : -16,
-        scale: 0.94,
-        transition: reduced ? { duration: 0 } : {
-          opacity: { duration: 0.14, delay: 0.06 },
-          y: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] },
-          scale: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] }
-        }
-      },
+      exit: getExitMotion(pos, reduced),
       transition: reduced ? { duration: 0 } : {
-        // Opacity finishes in 0.15 s — card is fully opaque while y/scale
-        // still have ~55 % of their travel left → movement is clearly visible.
+        // Opacity finishes in 0.15 s; y/scale take 0.34 s.
+        // Card is opaque while still travelling — movement
+        // is clearly visible to the user.
         opacity: { duration: 0.15 },
         y: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] },
-        scale: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] }
+        scale: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] },
+        layout: { duration: 0.22, ease: [0.16, 1, 0.3, 1] }
       },
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
+      onMouseEnter: onPauseStart,
+      onMouseLeave: onPauseEnd,
+      onFocus: onPauseStart,
+      onBlur: onPauseEnd,
+      role: n.type === "danger" || n.type === "warning" ? "alert" : "status",
+      "aria-live": n.type === "danger" || n.type === "warning" ? "assertive" : "polite",
       children: /* @__PURE__ */ jsxs(
-        Toast.Root,
+        "div",
         {
-          open: true,
-          duration,
-          onOpenChange: (o) => {
-            if (!o) onClose(n.id);
-          },
           className: [
-            "w-[300px] rounded-md shadow-lg overflow-hidden",
-            center ? "mx-auto" : "",
-            "focus:outline-none",
+            "w-[300px] rounded-md shadow-lg overflow-hidden focus:outline-none",
             TYPE_BG[n.type ?? "info"]
           ].join(" "),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 pr-2.5", children: [
               /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex-shrink-0 text-white/90", children: /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }) }),
               /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx(Toast.Title, { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
-                n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
+                n.description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
               ] }),
-              /* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "button",
                 {
-                  "aria-label": "Close",
+                  type: "button",
+                  "aria-label": "Close notification",
                   onClick: () => onClose(n.id),
                   className: "flex-shrink-0 mt-0.5 rounded p-1 text-white/60 hover:text-white hover:bg-white/15 transition-colors duration-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-white/50",
                   children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
                 }
-              ) })
+              )
             ] }),
             showProgress && /* @__PURE__ */ jsx("div", { className: "relative h-[3px] bg-white/20 overflow-hidden", children: /* @__PURE__ */ jsx(
               "div",
@@ -887,7 +907,7 @@ function NotificationItem({
                 className: "absolute inset-0 bg-white/60 [transform-origin:left]",
                 style: {
                   animation: `notification-progress ${duration}ms linear forwards`,
-                  animationPlayState: hovered ? "paused" : "running"
+                  animationPlayState: paused ? "paused" : "running"
                 }
               }
             ) })
@@ -903,26 +923,27 @@ function NotificationProvider({
 }) {
   const [notifications, setNotifications] = useState([]);
   const reduced = useReducedMotion();
-  const open = (payload) => {
+  const open = useCallback((payload) => {
     setNotifications((prev) => [
       ...prev,
       { duration: 4e3, ...payload, id: Date.now() + Math.random() }
     ]);
-  };
-  const close = (id) => {
+  }, []);
+  const close = useCallback((id) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
-  };
-  return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: { open, close }, children: /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: position.endsWith("right") ? "right" : position.endsWith("left") ? "left" : "up", children: [
+  }, []);
+  return /* @__PURE__ */ jsxs(NotificationContext.Provider, { value: { open, close }, children: [
     children,
     /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-      Toast.Viewport,
+      "ul",
       {
-        asChild: true,
+        role: "region",
+        "aria-label": "Notifications",
         className: [
           VIEWPORT_CLASSES[position],
-          "z-[500000] gap-2 w-[332px] outline-none pointer-events-none"
+          "z-[500000] gap-2 w-[316px] outline-none pointer-events-none m-0 p-0 list-none"
         ].join(" "),
-        children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
           NotificationItem,
           {
             n,
@@ -931,10 +952,10 @@ function NotificationProvider({
             reduced
           },
           n.id
-        )) }) })
+        )) })
       }
     ) })
-  ] }) });
+  ] });
 }
 function useNotification() {
   const { open } = useContext(NotificationContext);
@@ -946,6 +967,9 @@ function useNotification() {
   };
 }
 var SIZE_MAP = {
+  // xs is sized to fit beside button text (~14px) — async AutoComplete,
+  // Button loading prop, inline status badges, etc.
+  xs: { outer: "w-3.5 h-3.5", inner: "w-1.5 h-1.5", dot: "w-0.5 h-0.5", stroke: "border-[1.5px]", text: "text-[10px]" },
   sm: { outer: "w-8 h-8", inner: "w-4 h-4", dot: "w-1 h-1", stroke: "border-2", text: "text-xs" },
   md: { outer: "w-20 h-20", inner: "w-12 h-12", dot: "w-2 h-2", stroke: "border-[3px]", text: "text-2xl" },
   lg: { outer: "w-32 h-32", inner: "w-20 h-20", dot: "w-3 h-3", stroke: "border-4", text: "text-4xl" }
@@ -1106,53 +1130,82 @@ function List2({ items, onItemClick, activeKey }) {
     )
   )) });
 }
+var TOGGLE_POSITION_CLASS = {
+  "top-left": "top-2 left-2",
+  "top-right": "top-2 right-2",
+  "bottom-left": "bottom-2 left-2",
+  "bottom-right": "bottom-2 right-2"
+};
 function ScalableContainer({
-  width,
-  height,
+  width = "100%",
+  height = "auto",
   children,
-  assignClassOnClick
+  assignClassOnClick,
+  expandIcon,
+  collapseIcon,
+  togglePosition = "top-right"
 }) {
   const containerRef = useRef(null);
   const [isScaled, setScaled] = useState(false);
-  const [wrapperClass, setWrapperClass] = useState("");
-  const onClick = () => {
+  const reduced = useReducedMotion();
+  const onToggle = () => {
     const next = !isScaled;
     setScaled(next);
-    setTimeout(() => {
-      containerRef.current?.scrollIntoView({ behavior: "smooth" });
-      if (assignClassOnClick) {
-        setWrapperClass(next ? assignClassOnClick : "");
-      }
-    }, 200);
+    requestAnimationFrame(() => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }));
   };
+  const wrapperClass = isScaled ? assignClassOnClick : void 0;
   return /* @__PURE__ */ jsxs(
-    "div",
+    motion.div,
     {
       ref: containerRef,
-      style: {
+      layout: true,
+      animate: {
         width: isScaled ? "100%" : width,
         height: isScaled ? "100%" : height
       },
-      className: "rounded-lg bg-surface-raised flex flex-col transition-all duration-300 origin-center",
+      transition: reduced ? { duration: 0 } : {
+        width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+        layout: { duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+      },
+      className: [
+        "relative rounded-lg overflow-hidden",
+        // OS-window aesthetic: subtle elevation at rest, lifted shadow
+        // when expanded. No background colour change.
+        isScaled ? "shadow-2xl" : "shadow-md",
+        "transition-shadow duration-300"
+      ].join(" "),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "p-2 w-max", children: /* @__PURE__ */ jsx(Tooltip, { placement: "right", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
-          IconButton,
+        /* @__PURE__ */ jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsx(
+          "button",
           {
-            onClick,
-            icon: isScaled ? (
-              /* Collapse (arrows-pointing-in) */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M3.22 3.22a.75.75 0 011.06 0l3.97 3.97V4.5a.75.75 0 011.5 0V9a.75.75 0 01-.75.75H4.5a.75.75 0 010-1.5h2.69L3.22 4.28a.75.75 0 010-1.06zm17.56 0a.75.75 0 010 1.06l-3.97 3.97h2.69a.75.75 0 010 1.5H15a.75.75 0 01-.75-.75V4.5a.75.75 0 011.5 0v2.69l3.97-3.97a.75.75 0 011.06 0zM3.75 15a.75.75 0 01.75-.75H9a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-2.69l-3.97 3.97a.75.75 0 01-1.06-1.06l3.97-3.97H4.5a.75.75 0 01-.75-.75zm10.5 0a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75 .75.75 0 01-.75.75h-2.69l3.97 3.97a.75.75 0 11-1.06 1.06l-3.97-3.97v2.69a.75.75 0 01-1.5 0V15z", clipRule: "evenodd" }) })
-            ) : (
-              /* Expand (arrows-pointing-out) */
-              /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M15 3a.75.75 0 01.75-.75h5.25A.75.75 0 0121 3v5.25a.75.75 0 01-1.5 0V4.81l-5.72 5.72a.75.75 0 11-1.06-1.06L18.19 3.75H15.75A.75.75 0 0115 3zM3 15a.75.75 0 01.75-.75h2.44l5.72-5.72a.75.75 0 111.06 1.06l-5.72 5.72v2.44a.75.75 0 01-1.5 0V15.75A.75.75 0 013 15zm0-11.25A.75.75 0 013.75 3h5.25a.75.75 0 010 1.5H4.81l5.72 5.72a.75.75 0 11-1.06 1.06L3.75 5.56V8.25a.75.75 0 01-1.5 0V3.75A.75.75 0 013 3zm18 12a.75.75 0 01-.75.75h-5.25a.75.75 0 010-1.5h2.44l-5.72-5.72a.75.75 0 111.06-1.06l5.72 5.72v-2.44a.75.75 0 011.5 0V15z", clipRule: "evenodd" }) })
-            )
+            type: "button",
+            onClick: onToggle,
+            "aria-label": isScaled ? "Collapse container" : "Expand container",
+            "aria-expanded": isScaled,
+            className: [
+              "absolute z-10",
+              TOGGLE_POSITION_CLASS[togglePosition],
+              "w-7 h-7 inline-flex items-center justify-center",
+              "rounded-md bg-surface/80 backdrop-blur-sm border border-border",
+              "text-foreground-secondary hover:text-foreground hover:bg-surface",
+              "shadow-sm transition-colors duration-150",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+            ].join(" "),
+            children: isScaled ? collapseIcon ?? /* @__PURE__ */ jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsx(ExpandIcon, {})
           }
-        ) }) }),
+        ) }),
         /* @__PURE__ */ jsx("div", { className: wrapperClass, children })
       ]
     }
   );
 }
+function CollapseIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 9L4 4M9 9V4M9 9H4M15 9L20 4M15 9V4M15 9H20M9 15L4 20M9 15V20M9 15H4M15 15L20 20M15 15V20M15 15H20" }) });
+}
+function ExpandIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 8V4h4M20 8V4h-4M4 16v4h4M20 16v4h-4" }) });
+}
 function GridCard({ item, buttonText = "Open Application", onOpen }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-[200px] h-[250px] rounded-lg bg-ice dark:bg-independence items-center justify-between p-2 shadow-2xl", children: [
     /* @__PURE__ */ jsx("div", { className: "text-prussian-blue dark:text-white text-lg font-bold text-center h-1/4", children: /* @__PURE__ */ jsx("h2", { children: item.title }) }),
@@ -1313,49 +1366,6 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
 function Catalog({ display = "grid", items = [], buttonText, onOpen }) {
   return /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: display === "grid" ? /* @__PURE__ */ jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsx(CatalogCarousel, { items, buttonText, onOpen }) });
 }
-function MenuBarItem({ icon, isActive, title, onClick }) {
-  return /* @__PURE__ */ jsx(Tooltip, { title, placement: "right", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "button",
-      "aria-label": title,
-      "aria-current": isActive ? "page" : void 0,
-      className: `transition duration-300 hover:bg-accent hover:text-accent-fg ${isActive ? "bg-accent text-accent-fg" : "text-foreground-secondary"} rounded-lg p-2 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
-      onClick,
-      tabIndex: 0,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick?.();
-        }
-      },
-      children: icon
-    }
-  ) });
-}
-function MenuBar({ items }) {
-  return (
-    // `calculated-height` was an orphaned CSS class. Replaced with `h-full`
-    // so the MenuBar fills whatever vertical space its parent gives it.
-    /* @__PURE__ */ jsx(
-      "nav",
-      {
-        "aria-label": "Main navigation",
-        className: "w-16 h-full bg-surface-raised rounded-tr-lg rounded-br-lg flex flex-col gap-2 items-center p-2 z-50",
-        children: items.map((item) => /* @__PURE__ */ jsx(
-          MenuBarItem,
-          {
-            icon: item.icon,
-            title: item.title,
-            isActive: item.isActive,
-            onClick: item.onClick
-          },
-          item.key
-        ))
-      }
-    )
-  );
-}
 function ContextMenu({ items, children }) {
   return /* @__PURE__ */ jsxs(ContextMenuPrimitive.Root, { children: [
     /* @__PURE__ */ jsx(ContextMenuPrimitive.Trigger, { asChild: true, children }),
@@ -1523,6 +1533,7 @@ function Wizard({
   const tooltipRef = useRef(null);
   const tooltipTitleId = useId();
   const tooltipBodyId = useId();
+  const reduced = useReducedMotion();
   const [open, setOpen] = useState(() => steps.length > 0 && !readDismissed(storageKey));
   const [activeIndex, setActiveIndex] = useState(0);
   const step = steps[activeIndex];
@@ -1566,24 +1577,36 @@ function Wizard({
   const isLast = activeIndex === steps.length - 1;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
-    open && step && /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && step && /* @__PURE__ */ jsxs(Portal, { children: [
       /* @__PURE__ */ jsx(
-        "div",
+        motion.div,
         {
           className: "fixed inset-0 z-[7000000] bg-foreground/40 backdrop-blur-[1px] pointer-events-auto",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: reduced ? 0 : 0.18, ease: "easeOut" },
           "aria-hidden": "true"
         }
       ),
       /* @__PURE__ */ jsx(
-        "div",
+        motion.div,
         {
-          className: "fixed z-[7000001] pointer-events-none rounded-md ring-2 ring-accent ring-offset-2 ring-offset-background transition-all duration-200",
+          className: "fixed z-[7000001] pointer-events-none rounded-md ring-2 ring-accent ring-offset-2 ring-offset-background",
           style: highlightStyle,
+          initial: { opacity: 0, scale: 1.08 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 1.08 },
+          transition: {
+            duration: reduced ? 0 : 0.32,
+            ease: [0.16, 1, 0.3, 1]
+            // ease-out-expo — settles softly
+          },
           "aria-hidden": "true"
         }
       ),
       /* @__PURE__ */ jsxs(
-        "div",
+        motion.div,
         {
           ref: tooltipRef,
           role: "dialog",
@@ -1592,6 +1615,14 @@ function Wizard({
           "aria-describedby": tooltipBodyId,
           className: "fixed z-[7000002] rounded-lg bg-surface text-foreground border border-border shadow-xl p-4 pointer-events-auto",
           style: tooltipStyle,
+          initial: { opacity: 0, scale: 0.96, y: 6 },
+          animate: { opacity: 1, scale: 1, y: 0 },
+          exit: { opacity: 0, scale: 0.97, y: 4 },
+          transition: reduced ? { duration: 0 } : {
+            opacity: { duration: 0.18 },
+            scale: { type: "tween", duration: 0.26, ease: [0.16, 1, 0.3, 1] },
+            y: { type: "tween", duration: 0.26, ease: [0.16, 1, 0.3, 1] }
+          },
           children: [
             step.title && /* @__PURE__ */ jsx("h3", { id: tooltipTitleId, className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
             /* @__PURE__ */ jsx("div", { id: tooltipBodyId, className: "text-sm text-foreground-secondary leading-relaxed", children: step.description }),
@@ -1631,9 +1662,10 @@ function Wizard({
               ] })
             ] })
           ]
-        }
+        },
+        activeIndex
       )
-    ] })
+    ] }) })
   ] });
 }
 var SearchInput = React8.forwardRef(function SearchInput2({
@@ -1655,7 +1687,7 @@ var SearchInput = React8.forwardRef(function SearchInput2({
       style: style ?? {},
       children: [
         label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", htmlFor, children: label }),
-        /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
+        /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -1702,7 +1734,8 @@ function Dropdown({
   htmlFor,
   items = [],
   labelStyle = {},
-  placeholder
+  placeholder,
+  showSelectedCount = false
 }) {
   const [open, setOpen] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
@@ -1765,7 +1798,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between relative h-9 rounded-lg border border-border cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${hasError ? "border-status-error" : ""}`,
+                className: `flex items-center justify-between relative h-9 rounded-lg border border-border cursor-pointer select-none focus:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${hasError ? "border-status-error" : ""}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -1788,7 +1821,7 @@ function Dropdown({
                           },
                           String(val)
                         )),
-                        value.length > 1 && /* @__PURE__ */ jsx(DropdownPill, { value: `+${value.length - 1} more` })
+                        showSelectedCount && value.length > 1 && /* @__PURE__ */ jsx(DropdownPill, { value: `+${value.length - 1} more` })
                       ] }) : /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
                     }
                   ),
@@ -2587,10 +2620,13 @@ function ThemeProvider({
   ] });
 }
 var SHIMMER = [
-  "animate-shimmer rounded-sm",
-  "bg-[length:400%_100%]",
-  "bg-gradient-to-r",
-  "from-border via-border-strong/40 to-border"
+  "relative overflow-hidden rounded-sm bg-surface-raised",
+  'before:absolute before:inset-0 before:content-[""]',
+  "before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent",
+  "before:animate-[shimmer_1.6s_linear_infinite]",
+  // Respect prefers-reduced-motion — the resting bg-surface-raised is still
+  // a perfectly legible placeholder for users who have animations off.
+  "motion-reduce:before:hidden"
 ].join(" ");
 function SkeletonBox({ width, height = 16, radius, className = "", style }) {
   return /* @__PURE__ */ jsx(
@@ -2728,7 +2764,7 @@ function TextInput({
               id: htmlFor,
               "aria-invalid": hasError || void 0,
               "aria-describedby": hasError ? errorId : void 0,
-              className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
+              className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
               style: inputStyle ?? {},
               placeholder: placeholder ?? ""
             }
@@ -2804,7 +2840,7 @@ function NumberInput({
         "div",
         {
           style,
-          className: `flex items-center rounded-lg border overflow-hidden ${hasError ? "border-status-error" : "border-border"} ${disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : "bg-surface text-foreground"} focus-within:ring-2 focus-within:ring-accent transition-colors`,
+          className: `flex items-center rounded-lg border overflow-hidden ${hasError ? "border-status-error" : "border-border"} ${disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : "bg-surface text-foreground"} focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent transition-colors`,
           children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -2904,7 +2940,7 @@ function Password({
             id: htmlFor,
             "aria-invalid": hasError || void 0,
             "aria-describedby": hasError ? errorId : void 0,
-            className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors`,
+            className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
             style: inputStyle ?? {},
             placeholder: placeholder ?? ""
           }
@@ -3071,7 +3107,7 @@ function AutoComplete({
       children: [
         label && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium ml-1 max-content text-foreground", children: label }),
         /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
+          /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "bg-surface text-foreground flex items-center gap-1 rounded-lg border border-border pr-2 focus-within:border-transparent focus-within:ring-2 focus-within:ring-accent transition-colors", children: [
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -3272,7 +3308,7 @@ function TreeSelect({
             "aria-invalid": hasError || void 0,
             "aria-describedby": hasError ? errorId : void 0,
             disabled,
-            className: `flex items-center justify-between h-9 rounded-lg border ${hasError ? "border-status-error" : "border-border"} px-3 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[240px]" : ""}`,
+            className: `flex items-center justify-between h-9 rounded-lg border ${hasError ? "border-status-error" : "border-border"} px-3 cursor-pointer select-none focus:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[240px]" : ""}`,
             children: [
               /* @__PURE__ */ jsx("span", { className: "text-sm truncate text-left", children: selectedNode ? selectedNode.label : /* @__PURE__ */ jsx("span", { className: "text-foreground-muted", children: placeholder }) }),
               /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
@@ -3565,12 +3601,14 @@ function DatePicker({
   const [open, setOpen] = useState(false);
   const [viewMonth, setViewMonth] = useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
   const [focusDate, setFocusDate] = useState(() => value ?? /* @__PURE__ */ new Date());
+  const [view, setView] = useState("days");
   const gridRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     const target = value ?? /* @__PURE__ */ new Date();
     setViewMonth(startOfMonth(target));
     setFocusDate(target);
+    setView("days");
   }, [open, value]);
   useEffect(() => {
     if (!open) return;
@@ -3659,7 +3697,7 @@ function DatePicker({
             "aria-describedby": hasError ? errorId : void 0,
             "aria-haspopup": "dialog",
             "aria-expanded": open,
-            className: `flex items-center justify-between h-9 rounded-lg border px-3 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${hasError ? "border-status-error" : "border-border"} ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[200px]" : ""}`,
+            className: `flex items-center justify-between h-9 rounded-lg border px-3 cursor-pointer select-none focus:outline-none focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-accent ${hasError ? "border-status-error" : "border-border"} ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[200px]" : ""}`,
             children: [
               /* @__PURE__ */ jsx("span", { className: `text-sm truncate ${displayValue ? "" : "text-foreground-muted"}`, children: displayValue || placeholder }),
               /* @__PURE__ */ jsx(CalendarIcon, {})
@@ -3681,29 +3719,89 @@ function DatePicker({
                   "button",
                   {
                     type: "button",
-                    onClick: () => setViewMonth(addMonths(viewMonth, -1)),
-                    "aria-label": "Previous month",
+                    onClick: () => {
+                      if (view === "days") setViewMonth(addMonths(viewMonth, -1));
+                      else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() - 1, viewMonth.getMonth(), 1));
+                      else setViewMonth(new Date(viewMonth.getFullYear() - 10, viewMonth.getMonth(), 1));
+                    },
+                    "aria-label": view === "days" ? "Previous month" : view === "months" ? "Previous year" : "Previous decade",
                     className: "w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors",
                     children: /* @__PURE__ */ jsx(ChevronLeft, {})
                   }
                 ),
-                /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold select-none", children: [
-                  MONTH_NAMES[viewMonth.getMonth()],
-                  " ",
-                  viewMonth.getFullYear()
-                ] }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      if (view === "days") setView("months");
+                      else if (view === "months") setView("years");
+                    },
+                    disabled: view === "years",
+                    "aria-label": "Change view",
+                    className: "text-sm font-semibold select-none rounded-md px-2 py-0.5 hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors disabled:cursor-default disabled:hover:bg-transparent",
+                    children: [
+                      view === "days" && `${MONTH_NAMES[viewMonth.getMonth()]} ${viewMonth.getFullYear()}`,
+                      view === "months" && `${viewMonth.getFullYear()}`,
+                      view === "years" && (() => {
+                        const decadeStart = Math.floor(viewMonth.getFullYear() / 10) * 10;
+                        return `${decadeStart} \u2013 ${decadeStart + 11}`;
+                      })()
+                    ]
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
-                    onClick: () => setViewMonth(addMonths(viewMonth, 1)),
-                    "aria-label": "Next month",
+                    onClick: () => {
+                      if (view === "days") setViewMonth(addMonths(viewMonth, 1));
+                      else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() + 1, viewMonth.getMonth(), 1));
+                      else setViewMonth(new Date(viewMonth.getFullYear() + 10, viewMonth.getMonth(), 1));
+                    },
+                    "aria-label": view === "days" ? "Next month" : view === "months" ? "Next year" : "Next decade",
                     className: "w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors",
                     children: /* @__PURE__ */ jsx(ChevronRight3, {})
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs(
+              view === "months" && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 min-w-[224px]", children: MONTH_NAMES.map((name, idx) => {
+                const isCurrent = value && value.getFullYear() === viewMonth.getFullYear() && value.getMonth() === idx;
+                return /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setViewMonth(new Date(viewMonth.getFullYear(), idx, 1));
+                      setView("days");
+                    },
+                    className: `px-2 py-2 rounded-md text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isCurrent ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+                    children: name.slice(0, 3)
+                  },
+                  name
+                );
+              }) }),
+              view === "years" && (() => {
+                const decadeStart = Math.floor(viewMonth.getFullYear() / 10) * 10;
+                const years = Array.from({ length: 12 }, (_, i) => decadeStart + i);
+                return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-1 min-w-[224px]", children: years.map((y) => {
+                  const isCurrent = value?.getFullYear() === y;
+                  return /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => {
+                        setViewMonth(new Date(y, viewMonth.getMonth(), 1));
+                        setView("months");
+                      },
+                      className: `px-2 py-2 rounded-md text-xs font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isCurrent ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+                      children: y
+                    },
+                    y
+                  );
+                }) });
+              })(),
+              view === "days" && /* @__PURE__ */ jsxs(
                 "table",
                 {
                   ref: gridRef,
@@ -3785,6 +3883,6 @@ function ChevronRight3() {
   return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
 }
 
-export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
+export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map