motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-7MPC3RUE.js

@@ -0,0 +1,1462 @@
+"use client";
+import {
+  LayoutGridIcon
+} from "./chunk-WWWKMU4Y.js";
+import {
+  CompassIcon
+} from "./chunk-BS4ZFJKW.js";
+import {
+  HomeIcon
+} from "./chunk-I45D4XV4.js";
+import {
+  ChartLineIcon
+} from "./chunk-XDR4FO6Q.js";
+import {
+  MessageCircleIcon
+} from "./chunk-WFWO2EIW.js";
+import {
+  BellIcon
+} from "./chunk-7PS2W7PU.js";
+import {
+  CalendarDaysIcon
+} from "./chunk-JJEWOQYQ.js";
+import {
+  SettingsIcon
+} from "./chunk-NY7M42KC.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  SearchIcon
+} from "./chunk-WOR2GMMN.js";
+import {
+  UsersIcon
+} from "./chunk-NB5CB65C.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/sidebar-nav/sidebar-nav.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion7,
+  useInView,
+  useReducedMotion as useReducedMotion7
+} from "motion/react";
+
+// src/icons/bot.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BotIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M12 8V4H8" }),
+              /* @__PURE__ */ jsx("rect", { height: "12", rx: "2", width: "16", x: "4", y: "8" }),
+              /* @__PURE__ */ jsx("path", { d: "M2 14h2" }),
+              /* @__PURE__ */ jsx("path", { d: "M20 14h2" }),
+              /* @__PURE__ */ jsx(
+                motion.line,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  variants: {
+                    normal: { y1: 13, y2: 15 },
+                    animate: {
+                      y1: [13, 14, 13],
+                      y2: [15, 14, 15],
+                      transition: {
+                        duration: 0.5,
+                        ease: "easeInOut",
+                        delay: 0.2
+                      }
+                    }
+                  },
+                  x1: 15,
+                  x2: 15
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.line,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  variants: {
+                    normal: { y1: 13, y2: 15 },
+                    animate: {
+                      y1: [13, 14, 13],
+                      y2: [15, 14, 15],
+                      transition: {
+                        duration: 0.5,
+                        ease: "easeInOut",
+                        delay: 0.2
+                      }
+                    }
+                  },
+                  x1: 9,
+                  x2: 9
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+BotIcon.displayName = "Bot";
+
+// src/icons/folders.tsx
+import { motion as motion2, useAnimation as useAnimation2, useReducedMotion as useReducedMotion2 } from "motion/react";
+import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FoldersIcon = forwardRef2(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation2();
+    const isControlledRef = useRef2(false);
+    useImperativeHandle2(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback2(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef2(null);
+    const reduced = useReducedMotion2();
+    const [hosted, setHosted] = useState2(false);
+    useEffect2(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs2(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx2(
+                motion2.path,
+                {
+                  animate: controls,
+                  d: "M20 17a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3.9a2 2 0 0 1-1.69-.9l-.81-1.2a2 2 0 0 0-1.67-.9H8a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2Z",
+                  transition: {
+                    type: "spring",
+                    stiffness: 250,
+                    damping: 25
+                  },
+                  variants: {
+                    normal: {
+                      translateX: 0,
+                      translateY: 0
+                    },
+                    animate: {
+                      translateX: -2,
+                      translateY: 2
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                motion2.path,
+                {
+                  animate: controls,
+                  d: "M2 8v11a2 2 0 0 0 2 2h14",
+                  transition: {
+                    type: "spring",
+                    stiffness: 250,
+                    damping: 25
+                  },
+                  variants: {
+                    normal: {
+                      translateX: 0,
+                      translateY: 0,
+                      opacity: 1,
+                      scale: 1
+                    },
+                    animate: {
+                      translateX: 2,
+                      translateY: -2,
+                      opacity: 0,
+                      scale: 0.9
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+FoldersIcon.displayName = "FoldersIcon";
+
+// src/icons/panel-left-close.tsx
+import { motion as motion3, useAnimation as useAnimation3, useReducedMotion as useReducedMotion3 } from "motion/react";
+import { forwardRef as forwardRef3, useCallback as useCallback3, useEffect as useEffect3, useImperativeHandle as useImperativeHandle3, useRef as useRef3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DEFAULT_TRANSITION = {
+  times: [0, 0.4, 1],
+  duration: 0.5
+};
+var PATH_VARIANTS = {
+  normal: { x: 0 },
+  animate: { x: [0, -1.5, 0] }
+};
+var PanelLeftCloseIcon = forwardRef3(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation3();
+  const isControlledRef = useRef3(false);
+  useImperativeHandle3(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback3(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback3(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+  const wrap = useRef3(null);
+  const reduced = useReducedMotion3();
+  const [hosted, setHosted] = useState3(false);
+  useEffect3(() => {
+    const fake = {};
+    if (reduced) {
+      setHosted(true);
+      return;
+    }
+    if (active !== void 0) {
+      setHosted(true);
+      (active ? handleMouseEnter : handleMouseLeave)(fake);
+      return;
+    }
+    const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+    setHosted(!!host);
+    if (!host) return;
+    const on = () => handleMouseEnter(fake);
+    const off = () => handleMouseLeave(fake);
+    host.addEventListener("pointerenter", on);
+    host.addEventListener("pointerleave", off);
+    return () => {
+      host.removeEventListener("pointerenter", on);
+      host.removeEventListener("pointerleave", off);
+    };
+  }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      ref: wrap,
+      className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+      style: size ? { width: size, height: size, ...style } : style,
+      onMouseEnter: hosted ? void 0 : handleMouseEnter,
+      onMouseLeave: hosted ? void 0 : handleMouseLeave,
+      ...props,
+      children: /* @__PURE__ */ jsxs3(
+        "svg",
+        {
+          fill: "none",
+          height: size,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx3("rect", { height: "18", rx: "2", width: "18", x: "3", y: "3" }),
+            /* @__PURE__ */ jsx3("path", { d: "M9 3v18" }),
+            /* @__PURE__ */ jsx3(
+              motion3.path,
+              {
+                animate: controls,
+                d: "m16 15-3-3 3-3",
+                transition: DEFAULT_TRANSITION,
+                variants: PATH_VARIANTS
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+PanelLeftCloseIcon.displayName = "PanelLeftCloseIcon";
+
+// src/icons/panel-left-open.tsx
+import { motion as motion4, useAnimation as useAnimation4, useReducedMotion as useReducedMotion4 } from "motion/react";
+import { forwardRef as forwardRef4, useCallback as useCallback4, useEffect as useEffect4, useImperativeHandle as useImperativeHandle4, useRef as useRef4, useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_TRANSITION2 = {
+  times: [0, 0.4, 1],
+  duration: 0.5
+};
+var PATH_VARIANTS2 = {
+  normal: { x: 0 },
+  animate: { x: [0, 1.5, 0] }
+};
+var PanelLeftOpenIcon = forwardRef4(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation4();
+  const isControlledRef = useRef4(false);
+  useImperativeHandle4(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback4(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback4(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+  const wrap = useRef4(null);
+  const reduced = useReducedMotion4();
+  const [hosted, setHosted] = useState4(false);
+  useEffect4(() => {
+    const fake = {};
+    if (reduced) {
+      setHosted(true);
+      return;
+    }
+    if (active !== void 0) {
+      setHosted(true);
+      (active ? handleMouseEnter : handleMouseLeave)(fake);
+      return;
+    }
+    const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+    setHosted(!!host);
+    if (!host) return;
+    const on = () => handleMouseEnter(fake);
+    const off = () => handleMouseLeave(fake);
+    host.addEventListener("pointerenter", on);
+    host.addEventListener("pointerleave", off);
+    return () => {
+      host.removeEventListener("pointerenter", on);
+      host.removeEventListener("pointerleave", off);
+    };
+  }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      ref: wrap,
+      className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+      style: size ? { width: size, height: size, ...style } : style,
+      onMouseEnter: hosted ? void 0 : handleMouseEnter,
+      onMouseLeave: hosted ? void 0 : handleMouseLeave,
+      ...props,
+      children: /* @__PURE__ */ jsxs4(
+        "svg",
+        {
+          fill: "none",
+          height: size,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx4("rect", { height: "18", rx: "2", width: "18", x: "3", y: "3" }),
+            /* @__PURE__ */ jsx4("path", { d: "M9 3v18" }),
+            /* @__PURE__ */ jsx4(
+              motion4.path,
+              {
+                animate: controls,
+                d: "m14 9 3 3-3 3",
+                transition: DEFAULT_TRANSITION2,
+                variants: PATH_VARIANTS2
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+PanelLeftOpenIcon.displayName = "PanelLeftOpenIcon";
+
+// src/icons/plug-zap.tsx
+import { motion as motion5, useAnimation as useAnimation5, useReducedMotion as useReducedMotion5 } from "motion/react";
+import { forwardRef as forwardRef5, useCallback as useCallback5, useEffect as useEffect5, useImperativeHandle as useImperativeHandle5, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var ZAP_VARIANT = {
+  normal: { opacity: 1 },
+  animate: {
+    opacity: [1, 0.4, 1],
+    transition: {
+      duration: 1,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeInOut"
+    }
+  }
+};
+var PlugZapIcon = forwardRef5(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation5();
+    const isControlledRef = useRef5(false);
+    useImperativeHandle5(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback5(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback5(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef5(null);
+    const reduced = useReducedMotion5();
+    const [hosted, setHosted] = useState5(false);
+    useEffect5(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx5(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs5(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx5("path", { d: "M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z" }),
+              /* @__PURE__ */ jsx5("path", { d: "m2 22 3-3" }),
+              /* @__PURE__ */ jsx5("path", { d: "M7.5 13.5 10 11" }),
+              /* @__PURE__ */ jsx5("path", { d: "M10.5 16.5 13 14" }),
+              /* @__PURE__ */ jsx5(
+                motion5.path,
+                {
+                  animate: controls,
+                  d: "m18 3-4 4h6l-4 4",
+                  initial: "normal",
+                  variants: ZAP_VARIANT
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+PlugZapIcon.displayName = "PlugZapIcon";
+
+// src/icons/workflow.tsx
+import { motion as motion6, useAnimation as useAnimation6, useReducedMotion as useReducedMotion6 } from "motion/react";
+import { forwardRef as forwardRef6, useCallback as useCallback6, useEffect as useEffect6, useImperativeHandle as useImperativeHandle6, useRef as useRef6, useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var TRANSITION = {
+  duration: 0.3,
+  opacity: { delay: 0.15 }
+};
+var VARIANTS = {
+  normal: {
+    pathLength: 1,
+    opacity: 1
+  },
+  animate: (custom) => ({
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      ...TRANSITION,
+      delay: 0.1 * custom
+    }
+  })
+};
+var WorkflowIcon = forwardRef6(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation6();
+    const isControlledRef = useRef6(false);
+    useImperativeHandle6(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback6(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback6(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef6(null);
+    const reduced = useReducedMotion6();
+    const [hosted, setHosted] = useState6(false);
+    useEffect6(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx6(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs6(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx6(
+                motion6.rect,
+                {
+                  animate: controls,
+                  custom: 0,
+                  height: "8",
+                  rx: "2",
+                  variants: VARIANTS,
+                  width: "8",
+                  x: "3",
+                  y: "3"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                motion6.path,
+                {
+                  animate: controls,
+                  custom: 3,
+                  d: "M7 11v4a2 2 0 0 0 2 2h4",
+                  variants: VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                motion6.rect,
+                {
+                  animate: controls,
+                  custom: 0,
+                  height: "8",
+                  rx: "2",
+                  variants: VARIANTS,
+                  width: "8",
+                  x: "13",
+                  y: "13"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+WorkflowIcon.displayName = "WorkflowIcon";
+
+// src/components/sidebar-nav/sidebar-nav.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var WIDE = 256;
+var SLIM = 64;
+var LABEL_W = WIDE - 24 - 40;
+var GLIDE = [0.22, 1, 0.36, 1];
+var PILL = { type: "spring", stiffness: 520, damping: 40 };
+var TIP = { type: "spring", stiffness: 600, damping: 42 };
+var FOLD = (still) => still ? { duration: 0 } : { duration: 0.45, ease: GLIDE };
+var CARD = {
+  hidden: { opacity: 0, y: 16, scale: 0.98 },
+  shown: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.55,
+      ease: GLIDE,
+      staggerChildren: 0.035,
+      delayChildren: 0.1
+    }
+  }
+};
+var ROW = {
+  hidden: { opacity: 0, y: 8 },
+  shown: { opacity: 1, y: 0, transition: { duration: 0.4, ease: GLIDE } }
+};
+var ICONS = {
+  home: HomeIcon,
+  search: SearchIcon,
+  messages: MessageCircleIcon,
+  projects: FoldersIcon,
+  analytics: ChartLineIcon,
+  calendar: CalendarDaysIcon,
+  agents: BotIcon,
+  workflows: WorkflowIcon,
+  integrations: PlugZapIcon,
+  apps: LayoutGridIcon,
+  explore: CompassIcon,
+  team: UsersIcon,
+  bell: BellIcon
+};
+var DEFAULT_SECTIONS = [
+  {
+    label: "Workspace",
+    items: [
+      { id: "home", label: "Home", icon: "home" },
+      { id: "messages", label: "Messages", icon: "messages", badge: 4 },
+      {
+        id: "projects",
+        label: "Projects",
+        icon: "projects",
+        children: [
+          { id: "website", label: "Website refresh" },
+          { id: "mobile", label: "Mobile app", badge: 2 },
+          { id: "brand", label: "Brand kit" }
+        ]
+      },
+      { id: "analytics", label: "Analytics", icon: "analytics" }
+    ]
+  },
+  {
+    label: "Automation",
+    items: [
+      { id: "agents", label: "Agents", icon: "agents", tag: "New" },
+      { id: "workflows", label: "Workflows", icon: "workflows" },
+      { id: "integrations", label: "Integrations", icon: "integrations" }
+    ]
+  }
+];
+var DEFAULT_USER = {
+  name: "Jordan Lee",
+  email: "jordan@lumen.app",
+  avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=96&h=96&fit=crop&crop=faces"
+};
+var initialsOf = (name) => name.split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
+function PinwheelMark({ turn }) {
+  return /* @__PURE__ */ jsx7(
+    motion7.svg,
+    {
+      viewBox: "0 0 28 28",
+      className: "size-7",
+      "aria-hidden": true,
+      animate: { rotate: turn ? 90 : 0 },
+      transition: { type: "spring", stiffness: 260, damping: 18 },
+      children: [0, 90, 180, 270].map((deg, i) => /* @__PURE__ */ jsx7(
+        "path",
+        {
+          d: "M14 14V2a6 6 0 0 1 0 12Z",
+          transform: `rotate(${deg} 14 14)`,
+          fill: "#242423",
+          fillOpacity: i % 2 ? 0.35 : 1
+        },
+        deg
+      ))
+    }
+  );
+}
+var SidebarNav = React.forwardRef(
+  function SidebarNav2({
+    brand = "Lumen",
+    logo,
+    sections = DEFAULT_SECTIONS,
+    value: valueProp,
+    defaultValue = "home",
+    onNavigate,
+    defaultOpen = ["projects"],
+    collapsed: collapsedProp,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    user = DEFAULT_USER,
+    onSettings,
+    className
+  }, ref) {
+    const still = !!useReducedMotion7();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const inView = useInView(root, { once: true, amount: 0.3 });
+    const [collapsedState, setCollapsedState] = React.useState(defaultCollapsed);
+    const collapsed = collapsedProp ?? collapsedState;
+    const setCollapsed = (next) => {
+      setCollapsedState(next);
+      onCollapsedChange?.(next);
+      setTip(null);
+    };
+    const [valueState, setValue] = React.useState(defaultValue);
+    const value = valueProp ?? valueState;
+    const go = (next) => {
+      setValue(next);
+      onNavigate?.(next);
+    };
+    const [open, setOpen] = React.useState(() => new Set(defaultOpen));
+    const toggleGroup = (key) => setOpen((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+    const [hover, setHover] = React.useState(null);
+    const [logoHover, setLogoHover] = React.useState(false);
+    const [tip, setTip] = React.useState(null);
+    const showTip = (el, label, note) => {
+      if (!collapsed || !root.current) return;
+      const a = el.getBoundingClientRect();
+      const b = root.current.getBoundingClientRect();
+      setTip({ label, note, y: a.top - b.top + a.height / 2 });
+    };
+    const onKey = (e) => {
+      if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+      const rows = Array.from(
+        root.current?.querySelectorAll("[data-nav-row]") ?? []
+      );
+      if (!rows.length) return;
+      e.preventDefault();
+      const at = rows.indexOf(document.activeElement);
+      const next = e.key === "ArrowDown" ? (at + 1) % rows.length : (at - 1 + rows.length) % rows.length;
+      rows[at < 0 ? 0 : next]?.focus();
+    };
+    const fade = (order2) => ({
+      animate: collapsed ? { opacity: 0, x: -6, filter: "blur(4px)" } : { opacity: 1, x: 0, filter: "blur(0px)" },
+      transition: still ? { duration: 0 } : collapsed ? { duration: 0.16, ease: "easeOut" } : { duration: 0.32, ease: GLIDE, delay: 0.1 + order2 * 0.02 }
+    });
+    const pill = (layout, tone) => /* @__PURE__ */ jsx7(
+      motion7.span,
+      {
+        layoutId: `${id}-${layout}`,
+        className: cn("absolute inset-0 rounded-xl", tone),
+        transition: still ? { duration: 0 } : PILL
+      }
+    );
+    const navRef = React.useRef(null);
+    const [more, setMore] = React.useState(false);
+    const measure = React.useCallback(() => {
+      const el = navRef.current;
+      if (el) setMore(el.scrollTop + el.clientHeight < el.scrollHeight - 4);
+    }, []);
+    React.useEffect(() => {
+      const el = navRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const ro = new ResizeObserver(measure);
+      ro.observe(el);
+      Array.from(el.children).forEach((c) => ro.observe(c));
+      return () => ro.disconnect();
+    }, [measure, sections]);
+    let order = 0;
+    return /* @__PURE__ */ jsxs7(
+      motion7.aside,
+      {
+        ref: root,
+        "aria-label": "Sidebar",
+        onKeyDown: onKey,
+        variants: still ? void 0 : CARD,
+        initial: still ? false : "hidden",
+        animate: inView || still ? "shown" : "hidden",
+        className: cn(
+          "relative isolate flex h-full min-h-[34rem] flex-col rounded-3xl bg-white py-3 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs7(
+            motion7.div,
+            {
+              className: "flex min-h-0 flex-1 flex-col",
+              initial: false,
+              animate: { width: collapsed ? SLIM : WIDE },
+              transition: FOLD(still),
+              children: [
+                /* @__PURE__ */ jsxs7(motion7.div, { variants: ROW, className: "relative px-3", children: [
+                  /* @__PURE__ */ jsxs7("div", { className: "flex h-10 items-center", children: [
+                    /* @__PURE__ */ jsx7(
+                      "span",
+                      {
+                        className: "grid size-10 shrink-0 place-items-center",
+                        onPointerEnter: () => setLogoHover(true),
+                        onPointerLeave: () => setLogoHover(false),
+                        children: logo ?? /* @__PURE__ */ jsx7(PinwheelMark, { turn: logoHover && !still })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx7(
+                      motion7.span,
+                      {
+                        className: "block whitespace-nowrap pl-1 text-xl font-semibold tracking-[-0.03em]",
+                        ...fade(0),
+                        children: brand
+                      }
+                    ) })
+                  ] }),
+                  /* @__PURE__ */ jsx7(
+                    motion7.div,
+                    {
+                      "aria-hidden": true,
+                      initial: false,
+                      animate: { height: collapsed ? 48 : 0 },
+                      transition: FOLD(still)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs7(
+                    motion7.button,
+                    {
+                      type: "button",
+                      "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+                      "aria-expanded": !collapsed,
+                      onClick: () => setCollapsed(!collapsed),
+                      onPointerEnter: (e) => showTip(e.currentTarget, "Expand sidebar"),
+                      onPointerLeave: () => setTip(null),
+                      onFocus: (e) => showTip(e.currentTarget, "Expand sidebar"),
+                      onBlur: () => setTip(null),
+                      initial: false,
+                      animate: {
+                        x: collapsed ? 0 : WIDE - 24 - 40,
+                        y: collapsed ? 48 : 0
+                      },
+                      whileTap: still ? void 0 : { scale: 0.92 },
+                      transition: FOLD(still),
+                      className: "absolute left-3 top-0 grid size-10 cursor-pointer place-items-center rounded-xl text-zinc-500 outline-none transition-colors hover:bg-[#242423]/[0.05] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#242423]/25",
+                      children: [
+                        /* @__PURE__ */ jsx7(
+                          motion7.span,
+                          {
+                            className: "absolute inset-0 grid place-items-center",
+                            initial: false,
+                            animate: {
+                              opacity: collapsed ? 0 : 1,
+                              scale: collapsed ? 0.7 : 1
+                            },
+                            transition: { duration: still ? 0 : 0.2 },
+                            children: /* @__PURE__ */ jsx7(PanelLeftCloseIcon, { className: "size-[18px]" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx7(
+                          motion7.span,
+                          {
+                            className: "absolute inset-0 grid place-items-center",
+                            initial: false,
+                            animate: {
+                              opacity: collapsed ? 1 : 0,
+                              scale: collapsed ? 1 : 0.7
+                            },
+                            transition: {
+                              duration: still ? 0 : 0.2,
+                              delay: collapsed && !still ? 0.2 : 0
+                            },
+                            children: /* @__PURE__ */ jsx7(PanelLeftOpenIcon, { className: "size-[18px]" })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx7(
+                  "nav",
+                  {
+                    ref: navRef,
+                    "aria-label": "Main",
+                    onPointerLeave: () => {
+                      setHover(null);
+                      setTip(null);
+                    },
+                    onScroll: () => {
+                      setTip(null);
+                      measure();
+                    },
+                    className: cn(
+                      "mt-2 min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 pb-2 [scrollbar-width:none]",
+                      more && "[mask-image:linear-gradient(to_bottom,black_calc(100%-40px),transparent)]"
+                    ),
+                    children: sections.map((section, si) => /* @__PURE__ */ jsxs7("div", { className: "pt-2", children: [
+                      section.label !== void 0 && /* @__PURE__ */ jsxs7(
+                        motion7.div,
+                        {
+                          variants: ROW,
+                          className: "relative h-8",
+                          onPointerEnter: () => {
+                            setHover(null);
+                            setTip(null);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx7(
+                              motion7.p,
+                              {
+                                className: "absolute bottom-2 left-3 whitespace-nowrap text-xs font-medium text-zinc-400",
+                                ...fade(order++),
+                                children: section.label
+                              }
+                            ),
+                            /* @__PURE__ */ jsx7(
+                              motion7.span,
+                              {
+                                "aria-hidden": true,
+                                className: "absolute bottom-3.5 left-3 h-px w-4 rounded-full bg-[#242423]/15",
+                                initial: false,
+                                animate: {
+                                  opacity: collapsed ? 1 : 0,
+                                  scaleX: collapsed ? 1 : 0.2
+                                },
+                                transition: {
+                                  duration: still ? 0 : 0.3,
+                                  ease: GLIDE,
+                                  delay: collapsed && !still ? 0.15 : 0
+                                }
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      section.items.map((item) => {
+                        const Icon = ICONS[item.icon];
+                        const kids = item.children ?? [];
+                        const groupOpen = kids.length > 0 && open.has(item.id);
+                        const childActive = kids.some((k) => k.id === value);
+                        const active = value === item.id || childActive && (collapsed || !groupOpen);
+                        const lit = active || hover === item.id;
+                        const note = item.badge ? `${item.badge} new` : kids.length ? `${kids.length} pages` : item.tag;
+                        const rowOrder = order++;
+                        return /* @__PURE__ */ jsxs7(motion7.div, { variants: ROW, children: [
+                          /* @__PURE__ */ jsxs7(
+                            motion7.button,
+                            {
+                              type: "button",
+                              "data-nav-row": true,
+                              "aria-current": value === item.id ? "page" : void 0,
+                              "aria-expanded": kids.length ? groupOpen && !collapsed : void 0,
+                              onPointerEnter: (e) => {
+                                setHover(item.id);
+                                showTip(e.currentTarget, item.label, note);
+                              },
+                              onFocus: (e) => {
+                                setHover(item.id);
+                                showTip(e.currentTarget, item.label, note);
+                              },
+                              onBlur: () => setTip(null),
+                              onClick: () => {
+                                if (!kids.length) return go(item.id);
+                                if (collapsed) {
+                                  setOpen((p) => new Set(p).add(item.id));
+                                  setCollapsed(false);
+                                } else toggleGroup(item.id);
+                              },
+                              whileTap: still ? void 0 : { scale: 0.97 },
+                              className: "relative flex h-10 w-full cursor-pointer items-center rounded-xl text-left text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#242423]/25",
+                              children: [
+                                active && pill("active", "bg-[#242423]/[0.06]"),
+                                hover === item.id && !active && pill("hover", "bg-[#242423]/[0.035]"),
+                                /* @__PURE__ */ jsxs7(
+                                  "span",
+                                  {
+                                    className: cn(
+                                      "relative grid size-10 shrink-0 place-items-center transition-colors duration-200",
+                                      lit ? "text-[#242423]" : "text-zinc-500"
+                                    ),
+                                    children: [
+                                      /* @__PURE__ */ jsx7(
+                                        Icon,
+                                        {
+                                          className: "size-[18px]",
+                                          active: hover === item.id
+                                        }
+                                      ),
+                                      item.badge ? /* @__PURE__ */ jsx7(
+                                        motion7.span,
+                                        {
+                                          "aria-hidden": true,
+                                          className: "absolute right-2 top-2 size-2 rounded-full bg-[#242423] ring-2 ring-white",
+                                          initial: false,
+                                          animate: {
+                                            scale: collapsed ? 1 : 0,
+                                            opacity: collapsed ? 1 : 0
+                                          },
+                                          transition: still ? { duration: 0 } : collapsed ? {
+                                            type: "spring",
+                                            stiffness: 500,
+                                            damping: 22,
+                                            delay: 0.25
+                                          } : { duration: 0.12 }
+                                        }
+                                      ) : null
+                                    ]
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx7("span", { className: "relative min-w-0 flex-1 self-stretch overflow-hidden", children: /* @__PURE__ */ jsxs7(
+                                  motion7.span,
+                                  {
+                                    className: "flex h-full items-center gap-2 pr-2",
+                                    style: { width: LABEL_W },
+                                    ...fade(rowOrder),
+                                    children: [
+                                      /* @__PURE__ */ jsx7(
+                                        "span",
+                                        {
+                                          className: cn(
+                                            "min-w-0 flex-1 truncate transition-colors duration-200",
+                                            lit ? "text-[#242423]" : "text-zinc-600"
+                                          ),
+                                          children: item.label
+                                        }
+                                      ),
+                                      item.tag && /* @__PURE__ */ jsx7("span", { className: "grid h-5 place-items-center rounded-full bg-[#269a5a]/10 px-2 text-xs font-medium text-[#269a5a]", children: item.tag }),
+                                      item.badge ? /* @__PURE__ */ jsx7(
+                                        motion7.span,
+                                        {
+                                          className: "grid h-5 min-w-5 place-items-center rounded-full bg-[#242423] px-1.5 text-xs font-medium tabular-nums text-white",
+                                          animate: {
+                                            scale: hover === item.id && !still ? [1, 1.18, 1] : 1
+                                          },
+                                          transition: { duration: 0.35 },
+                                          children: item.badge
+                                        }
+                                      ) : null,
+                                      kids.length > 0 && /* @__PURE__ */ jsx7(
+                                        motion7.span,
+                                        {
+                                          className: "grid size-5 place-items-center text-zinc-400",
+                                          animate: { rotate: groupOpen ? 0 : -90 },
+                                          transition: still ? { duration: 0 } : { duration: 0.3, ease: GLIDE },
+                                          children: /* @__PURE__ */ jsx7(
+                                            ChevronDownIcon,
+                                            {
+                                              className: "size-4",
+                                              active: false
+                                            }
+                                          )
+                                        }
+                                      )
+                                    ]
+                                  }
+                                ) })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx7(AnimatePresence, { initial: false, children: groupOpen && !collapsed && /* @__PURE__ */ jsxs7(
+                            motion7.div,
+                            {
+                              initial: { height: 0, opacity: 0 },
+                              animate: { height: "auto", opacity: 1 },
+                              exit: { height: 0, opacity: 0 },
+                              transition: {
+                                duration: still ? 0 : 0.32,
+                                ease: GLIDE
+                              },
+                              className: "relative overflow-hidden",
+                              children: [
+                                /* @__PURE__ */ jsx7(
+                                  motion7.span,
+                                  {
+                                    "aria-hidden": true,
+                                    className: "absolute bottom-3 left-[19.5px] top-0 w-px origin-top bg-[#242423]/10",
+                                    initial: { scaleY: 0 },
+                                    animate: { scaleY: 1 },
+                                    transition: {
+                                      duration: still ? 0 : 0.4,
+                                      ease: GLIDE,
+                                      delay: still ? 0 : 0.05
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx7("div", { className: "py-0.5", children: kids.map((kid, ki) => {
+                                  const on = value === kid.id;
+                                  const key = `${item.id}/${kid.id}`;
+                                  return /* @__PURE__ */ jsxs7(
+                                    motion7.button,
+                                    {
+                                      type: "button",
+                                      "data-nav-row": true,
+                                      "aria-current": on ? "page" : void 0,
+                                      initial: { opacity: 0, x: -6 },
+                                      animate: { opacity: 1, x: 0 },
+                                      transition: {
+                                        duration: still ? 0 : 0.28,
+                                        ease: GLIDE,
+                                        delay: still ? 0 : 0.06 + ki * 0.04
+                                      },
+                                      onPointerEnter: () => setHover(key),
+                                      onFocus: () => setHover(key),
+                                      onClick: () => go(kid.id),
+                                      className: "relative flex h-9 w-full cursor-pointer items-center rounded-xl pl-10 pr-2 text-left text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#242423]/25",
+                                      children: [
+                                        on && pill("active", "bg-[#242423]/[0.06]"),
+                                        hover === key && !on && pill("hover", "bg-[#242423]/[0.035]"),
+                                        on && /* @__PURE__ */ jsx7(
+                                          motion7.span,
+                                          {
+                                            layoutId: `${id}-tick`,
+                                            "aria-hidden": true,
+                                            className: "absolute left-[18.5px] top-1/2 h-4 w-[3px] -translate-y-1/2 rounded-full bg-[#242423]",
+                                            transition: still ? { duration: 0 } : PILL
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx7(
+                                          "span",
+                                          {
+                                            className: cn(
+                                              "relative min-w-0 flex-1 truncate transition-colors duration-200",
+                                              on || hover === key ? "text-[#242423]" : "text-zinc-500"
+                                            ),
+                                            children: kid.label
+                                          }
+                                        ),
+                                        kid.badge ? /* @__PURE__ */ jsx7("span", { className: "relative text-xs font-medium tabular-nums text-zinc-400", children: kid.badge }) : null
+                                      ]
+                                    },
+                                    kid.id
+                                  );
+                                }) })
+                              ]
+                            },
+                            "kids"
+                          ) })
+                        ] }, item.id);
+                      })
+                    ] }, section.label ?? si))
+                  }
+                ),
+                /* @__PURE__ */ jsxs7(motion7.div, { variants: ROW, children: [
+                  /* @__PURE__ */ jsx7("div", { "aria-hidden": true, className: "mb-3 h-px bg-[#242423]/[0.07]" }),
+                  /* @__PURE__ */ jsxs7("div", { className: "flex h-10 items-center px-3", children: [
+                    /* @__PURE__ */ jsxs7(
+                      "span",
+                      {
+                        className: "relative grid size-10 shrink-0 place-items-center",
+                        onPointerEnter: (e) => showTip(e.currentTarget, user.name, user.email),
+                        onPointerLeave: () => setTip(null),
+                        children: [
+                          user.avatar ? /* @__PURE__ */ jsx7(
+                            "img",
+                            {
+                              src: user.avatar,
+                              alt: "",
+                              draggable: false,
+                              className: "size-8 rounded-full object-cover"
+                            }
+                          ) : /* @__PURE__ */ jsx7("span", { className: "grid size-8 place-items-center rounded-full bg-[#242423]/[0.06] text-xs font-semibold", children: initialsOf(user.name) }),
+                          /* @__PURE__ */ jsx7("span", { className: "absolute bottom-1 right-1 size-2.5 rounded-full bg-[#269a5a] ring-2 ring-white" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx7("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsxs7(
+                      motion7.div,
+                      {
+                        className: "flex items-center gap-2 pl-1.5",
+                        style: { width: LABEL_W - 4 },
+                        ...fade(order++),
+                        children: [
+                          /* @__PURE__ */ jsxs7("span", { className: "min-w-0 flex-1 leading-tight", children: [
+                            /* @__PURE__ */ jsx7("span", { className: "block truncate text-sm font-medium", children: user.name }),
+                            user.email && /* @__PURE__ */ jsx7("span", { className: "block truncate text-xs text-zinc-500", children: user.email })
+                          ] }),
+                          /* @__PURE__ */ jsx7(
+                            motion7.button,
+                            {
+                              type: "button",
+                              "aria-label": "Settings",
+                              tabIndex: collapsed ? -1 : 0,
+                              onClick: onSettings,
+                              whileTap: still ? void 0 : { scale: 0.9 },
+                              className: "grid size-8 cursor-pointer place-items-center rounded-full text-zinc-500 outline-none transition-colors hover:bg-[#242423]/[0.06] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#242423]/30",
+                              children: /* @__PURE__ */ jsx7(SettingsIcon, { className: "size-[18px]" })
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7(AnimatePresence, { children: collapsed && tip && /* @__PURE__ */ jsx7(
+            motion7.div,
+            {
+              className: "pointer-events-none absolute top-0 z-20",
+              style: { left: SLIM + 8 },
+              initial: { opacity: 0, x: -6, y: tip.y, scale: 0.96 },
+              animate: { opacity: 1, x: 0, y: tip.y, scale: 1 },
+              exit: {
+                opacity: 0,
+                x: -4,
+                scale: 0.97,
+                transition: { duration: 0.12 }
+              },
+              transition: still ? { duration: 0 } : {
+                ...TIP,
+                opacity: { duration: 0.15 },
+                x: { duration: 0.2, ease: GLIDE }
+              },
+              children: /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  role: "tooltip",
+                  className: "flex -translate-y-1/2 items-center gap-2 whitespace-nowrap rounded-xl bg-[#242423] px-3 py-1.5 text-sm font-medium text-white shadow-[0_8px_24px_-8px_rgba(0,0,0,0.35)]",
+                  children: /* @__PURE__ */ jsx7(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs7(
+                    motion7.span,
+                    {
+                      className: "flex items-center gap-2",
+                      initial: { opacity: 0, filter: "blur(3px)" },
+                      animate: { opacity: 1, filter: "blur(0px)" },
+                      exit: { opacity: 0, filter: "blur(3px)" },
+                      transition: { duration: still ? 0 : 0.16 },
+                      children: [
+                        tip.label,
+                        tip.note && /* @__PURE__ */ jsx7("span", { className: "text-xs font-normal text-white/60", children: tip.note })
+                      ]
+                    },
+                    tip.label
+                  ) })
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  SidebarNav
+};