@exegia/corpora-ui 0.8.0 → 0.9.0

package/src/components/motion/shared-layout-bg.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import {
+  AnimatePresence,
+  type HTMLMotionProps,
+  motion,
+  useReducedMotion,
+  type Variants,
+} from "motion/react";
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  type HTMLAttributes,
+  isValidElement,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  useId,
+  useState,
+} from "react";
+import { SPRING_LAYOUT } from "@/lib/ease";
+import { cn } from "@/lib/utils";
+
+export interface SharedLayoutBgProps
+  extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+  children: ReactNode;
+  /** Semantic container used for the children. */
+  as?: "div" | "ul";
+  /** Tailwind class applied to the moving pill. Defaults to a subtle foreground tint. */
+  pillClassName?: string;
+  /** Horizontal inset of the pill relative to each row (px). Default 20. */
+  inset?: number;
+  /** Optional positioning override for the pill wrapper inside each item. */
+  pillContainerClassName?: string;
+}
+
+const variants: Variants = {
+  initial: { opacity: 0, filter: "blur(6px)" },
+  animate: { opacity: 1, filter: "blur(0px)" },
+  exit: (isActive: boolean) =>
+    !isActive ? { opacity: 0, filter: "blur(6px)" } : {},
+};
+
+const reducedVariants: Variants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: (isActive: boolean) => (!isActive ? { opacity: 0 } : {}),
+};
+
+export const SharedLayoutBg = forwardRef<HTMLElement, SharedLayoutBgProps>(
+  function SharedLayoutBg(
+    {
+      children,
+      as = "div",
+      className,
+      onMouseLeave,
+      pillClassName,
+      pillContainerClassName,
+      inset = 20,
+      ...props
+    },
+    forwardedRef,
+  ) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const uid = useId();
+  const reduce = useReducedMotion();
+
+    const renderedChildren = Children.toArray(children)
+      .filter(isValidElement)
+      .map((child, index) => {
+        const el = child as ReactElement<{
+          className?: string;
+          onMouseEnter?: () => void;
+          children?: ReactNode;
+        }>;
+        const childKey = el.key ? String(el.key) : `item-${index}`;
+        return cloneElement(
+          el,
+          {
+            key: childKey,
+            className: cn("relative", el.props.className),
+            onMouseEnter: () => {
+              el.props.onMouseEnter?.();
+              setActiveId(childKey);
+            },
+          },
+          <>
+            <AnimatePresence custom={activeId !== null}>
+              {activeId !== null ? (
+                <motion.div
+                  variants={reduce ? reducedVariants : variants}
+                  initial="initial"
+                  animate="animate"
+                  exit="exit"
+                  custom={activeId !== null}
+                  className={cn(
+                    "pointer-events-none absolute inset-y-0",
+                    pillContainerClassName,
+                  )}
+                  style={{ left: -inset, right: -inset }}
+                >
+                  {activeId === childKey ? (
+                    <motion.div
+                      layoutId={`shared-bg-${uid}`}
+                      transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
+                      className={cn(
+                        "pointer-events-none h-full w-full rounded-2xl bg-primary/[0.06]",
+                        pillClassName,
+                      )}
+                    />
+                  ) : null}
+                </motion.div>
+              ) : null}
+            </AnimatePresence>
+            <div className="relative z-10">{el.props.children}</div>
+          </>,
+        );
+      });
+
+    const handleMouseLeave = (event: MouseEvent<HTMLElement>) => {
+      setActiveId(null);
+      onMouseLeave?.(event);
+    };
+
+    // layoutRoot scopes the pill's layout projection to this list, so fixed or
+    // scrolled ancestors can't smear scroll offsets into its movement.
+    return as === "ul" ? (
+      <motion.ul
+        {...(props as HTMLMotionProps<"ul">)}
+        ref={forwardedRef as Ref<HTMLUListElement>}
+        layoutRoot
+        onMouseLeave={handleMouseLeave}
+        className={cn("flex w-full flex-col", className)}
+      >
+        {renderedChildren}
+      </motion.ul>
+    ) : (
+      <motion.div
+        {...(props as HTMLMotionProps<"div">)}
+        ref={forwardedRef as Ref<HTMLDivElement>}
+        layoutRoot
+        onMouseLeave={handleMouseLeave}
+        className={cn("flex w-full flex-col", className)}
+      >
+        {renderedChildren}
+      </motion.div>
+    );
+  },
+);

package/src/components/ui/avatar.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function Avatar({
+  className,
+  ...props
+}: AvatarPrimitive.Root.Props): React.ReactElement {
+  return (
+    <AvatarPrimitive.Root
+      className={cn(
+        "inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
+        className,
+      )}
+      data-slot="avatar"
+      {...props}
+    />
+  );
+}
+
+export function AvatarImage({
+  className,
+  ...props
+}: AvatarPrimitive.Image.Props): React.ReactElement {
+  return (
+    <AvatarPrimitive.Image
+      className={cn("size-full object-cover", className)}
+      data-slot="avatar-image"
+      {...props}
+    />
+  );
+}
+
+export function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props): React.ReactElement {
+  return (
+    <AvatarPrimitive.Fallback
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted",
+        className,
+      )}
+      data-slot="avatar-fallback"
+      {...props}
+    />
+  );
+}
+
+export { AvatarPrimitive };

package/src/components/ui/menu.tsx

@@ -0,0 +1,352 @@
+"use client";
+
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { ChevronRightIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const MenuCreateHandle: typeof MenuPrimitive.createHandle =
+  MenuPrimitive.createHandle;
+
+export const Menu: typeof MenuPrimitive.Root = MenuPrimitive.Root;
+
+export const MenuPortal: typeof MenuPrimitive.Portal = MenuPrimitive.Portal;
+
+export function MenuTrigger({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <MenuPrimitive.Trigger
+      className={className}
+      data-slot="menu-trigger"
+      {...props}
+    >
+      {children}
+    </MenuPrimitive.Trigger>
+  );
+}
+
+export function MenuPopup({
+  children,
+  className,
+  sideOffset = 4,
+  align = "center",
+  alignOffset,
+  side = "bottom",
+  anchor,
+  portalProps,
+  ...props
+}: MenuPrimitive.Popup.Props & {
+  align?: MenuPrimitive.Positioner.Props["align"];
+  sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
+  side?: MenuPrimitive.Positioner.Props["side"];
+  anchor?: MenuPrimitive.Positioner.Props["anchor"];
+  portalProps?: MenuPrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <MenuPortal {...portalProps}>
+      <MenuPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="z-50"
+        data-slot="menu-positioner"
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          className={cn(
+            "relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="menu-popup"
+          {...props}
+        >
+          <div className="max-h-(--available-height) w-full overflow-y-auto p-1">
+            {children}
+          </div>
+        </MenuPrimitive.Popup>
+      </MenuPrimitive.Positioner>
+    </MenuPortal>
+  );
+}
+
+export function MenuGroup(
+  props: MenuPrimitive.Group.Props,
+): React.ReactElement {
+  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
+}
+
+export function MenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.ReactElement {
+  return (
+    <MenuPrimitive.Item
+      className={cn(
+        "flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="menu-item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+export function MenuLinkItem({
+  className,
+  inset,
+  variant = "default",
+  closeOnClick = true,
+  ...props
+}: MenuPrimitive.LinkItem.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.ReactElement {
+  return (
+    <MenuPrimitive.LinkItem
+      className={cn(
+        "flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0",
+        className,
+      )}
+      closeOnClick={closeOnClick}
+      data-inset={inset}
+      data-slot="menu-link-item"
+      data-variant={variant}
+      {...props}
+    />
+  );
+}
+
+export function MenuCheckboxItem({
+  className,
+  children,
+  checked,
+  variant = "default",
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  variant?: "default" | "switch";
+}): React.ReactElement {
+  return (
+    <MenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        variant === "switch"
+          ? "grid-cols-[1fr_auto] gap-4 pe-1.5"
+          : "grid-cols-[.75rem_1fr] pe-4",
+        className,
+      )}
+      data-slot="menu-checkbox-item"
+      {...props}
+    >
+      {variant === "switch" ? (
+        <>
+          <span className="col-start-1">{children}</span>
+          <MenuPrimitive.CheckboxItemIndicator
+            className="inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]"
+            keepMounted
+          >
+            <span className="pointer-events-none block aspect-square h-full in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]" />
+          </MenuPrimitive.CheckboxItemIndicator>
+        </>
+      ) : (
+        <>
+          <MenuPrimitive.CheckboxItemIndicator className="col-start-1 -ms-0.5">
+            <svg
+              aria-hidden="true"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+            </svg>
+          </MenuPrimitive.CheckboxItemIndicator>
+          <span className="col-start-2">{children}</span>
+        </>
+      )}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+export function MenuRadioGroup(
+  props: MenuPrimitive.RadioGroup.Props,
+): React.ReactElement {
+  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
+}
+
+export function MenuRadioItem({
+  className,
+  children,
+  ...props
+}: MenuPrimitive.RadioItem.Props): React.ReactElement {
+  return (
+    <MenuPrimitive.RadioItem
+      className={cn(
+        "grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className,
+      )}
+      data-slot="menu-radio-item"
+      {...props}
+    >
+      <MenuPrimitive.RadioItemIndicator className="col-start-1 -ms-0.5">
+        <svg
+          aria-hidden="true"
+          fill="none"
+          height="24"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width="24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M5.252 12.7 10.2 18.63 18.748 5.37" />
+        </svg>
+      </MenuPrimitive.RadioItemIndicator>
+      <span className="col-start-2">{children}</span>
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+export function MenuGroupLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}): React.ReactElement {
+  return (
+    <MenuPrimitive.GroupLabel
+      className={cn(
+        "px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="menu-label"
+      {...props}
+    />
+  );
+}
+
+export function MenuSeparator({
+  className,
+  ...props
+}: MenuPrimitive.Separator.Props): React.ReactElement {
+  return (
+    <MenuPrimitive.Separator
+      className={cn("mx-2 my-1 h-px bg-border", className)}
+      data-slot="menu-separator"
+      {...props}
+    />
+  );
+}
+
+export function MenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">): React.ReactElement {
+  return (
+    <kbd
+      className={cn(
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
+        className,
+      )}
+      data-slot="menu-shortcut"
+      {...props}
+    />
+  );
+}
+
+export function MenuSub(
+  props: MenuPrimitive.SubmenuRoot.Props,
+): React.ReactElement {
+  return <MenuPrimitive.SubmenuRoot data-slot="menu-sub" {...props} />;
+}
+
+export function MenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React.ReactElement {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      className={cn(
+        "flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&>svg:not(:last-child)]:-mx-0.5 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className,
+      )}
+      data-inset={inset}
+      data-slot="menu-sub-trigger"
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ms-auto -me-0.5 opacity-80" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+export function MenuSubPopup({
+  className,
+  sideOffset = 0,
+  alignOffset,
+  align = "start",
+  ...props
+}: MenuPrimitive.Popup.Props & {
+  align?: MenuPrimitive.Positioner.Props["align"];
+  sideOffset?: MenuPrimitive.Positioner.Props["sideOffset"];
+  alignOffset?: MenuPrimitive.Positioner.Props["alignOffset"];
+}): React.ReactElement {
+  const defaultAlignOffset = align !== "center" ? -5 : undefined;
+
+  return (
+    <MenuPopup
+      align={align}
+      alignOffset={alignOffset ?? defaultAlignOffset}
+      className={className}
+      data-slot="menu-sub-content"
+      side="inline-end"
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+export {
+  MenuPrimitive,
+  MenuCreateHandle as DropdownMenuCreateHandle,
+  Menu as DropdownMenu,
+  MenuPortal as DropdownMenuPortal,
+  MenuTrigger as DropdownMenuTrigger,
+  MenuPopup as DropdownMenuContent,
+  MenuGroup as DropdownMenuGroup,
+  MenuItem as DropdownMenuItem,
+  MenuCheckboxItem as DropdownMenuCheckboxItem,
+  MenuRadioGroup as DropdownMenuRadioGroup,
+  MenuRadioItem as DropdownMenuRadioItem,
+  MenuGroupLabel as DropdownMenuLabel,
+  MenuSeparator as DropdownMenuSeparator,
+  MenuShortcut as DropdownMenuShortcut,
+  MenuSub as DropdownMenuSub,
+  MenuSubTrigger as DropdownMenuSubTrigger,
+  MenuSubPopup as DropdownMenuSubContent,
+};

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,18 @@
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function Skeleton({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "animate-skeleton rounded-sm [--skeleton-highlight:--alpha(var(--color-white)/64%)] [background:linear-gradient(120deg,transparent_40%,var(--skeleton-highlight),transparent_60%)_var(--color-muted)_0_0/200%_100%_fixed] dark:[--skeleton-highlight:--alpha(var(--color-white)/4%)]",
+        className,
+      )}
+      data-slot="skeleton"
+      {...props}
+    />
+  );
+}

package/src/index.css

@@ -139,6 +139,10 @@
   --animate-caret-blink: 1s ease-out infinite caret-blink
 ;
   --animate-input-shake: input-shake 0.4s ease-in-out;
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+  @keyframes skeleton {
+    to { background-position: -200% 0; }
+  }
   @keyframes input-shake {
     0%, 100% { translate: 0; }
     20% { translate: -6px 0; }

package/src/index.ts

@@ -7,6 +7,7 @@
  */
 
 // atoms
+export * from "./components/ui/avatar"
 export * from "./components/ui/button"
 export * from "./components/ui/card"
 export * from "./components/ui/checkbox"
@@ -15,14 +16,17 @@ export * from "./components/ui/frame"
 export * from "./components/ui/input"
 export * from "./components/ui/input-group"
 export * from "./components/ui/label"
+export * from "./components/ui/menu"
 export * from "./components/ui/otp-field"
 export * from "./components/ui/separator"
+export * from "./components/ui/skeleton"
 export * from "./components/ui/spinner"
 export * from "./components/ui/textarea"
 
 // components
 export * from "./components/composed/password-input"
 export * from "./components/composed/social-providers"
+export * from "./components/composed/user-avatar"
 
 // blocks
 export * from "./components/blocks/auth/auth-shell"
@@ -35,8 +39,15 @@ export * from "./components/blocks/auth/passkey-manager-block"
 export * from "./components/blocks/auth/passkey-sign-in-block"
 export * from "./components/blocks/auth/signup-block"
 export * from "./components/blocks/auth/update-password-block"
+export * from "./components/blocks/nav/sidebar-block"
+export * from "./components/blocks/profile/profile-card-block"
+
+// motion primitives
+export * from "./components/motion/animated-sidebar"
+export * from "./components/motion/shared-layout-bg"
 
 // lib
 export * from "./lib/auth-accent"
+export * from "./lib/ease"
 export * from "./lib/sound"
 export * from "./lib/utils"

package/src/lib/ease.ts

@@ -0,0 +1,53 @@
+export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
+export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
+export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;
+
+/** CSS string form of EASE_OUT for inline style transitions. */
+export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
+
+/** Press feedback on buttons and other tappable surfaces. */
+export const SPRING_PRESS = {
+  type: "spring",
+  stiffness: 500,
+  damping: 30,
+  mass: 0.6,
+} as const;
+
+/** Content swaps — label/icon slots trading places inside a control. */
+export const SPRING_SWAP = {
+  type: "spring",
+  stiffness: 460,
+  damping: 30,
+  mass: 0.55,
+} as const;
+
+/** Overlay panel entrances — modals and sheets summoned by pointer. */
+export const SPRING_PANEL = {
+  type: "spring",
+  stiffness: 420,
+  damping: 40,
+  mass: 0.5,
+} as const;
+
+/** Shared-layout glides — pills, indicators and panels morphing between positions. */
+export const SPRING_LAYOUT = {
+  type: "spring",
+  stiffness: 360,
+  damping: 32,
+  mass: 0.6,
+} as const;
+
+/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
+export const SPRING_MOUSE = {
+  stiffness: 200,
+  damping: 15,
+  mass: 0.3,
+} as const;
+
+/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
+ * so the value follows the pointer butterily and never rebounds off an end. */
+export const SPRING_GLIDE = {
+  stiffness: 700,
+  damping: 50,
+  mass: 0.5,
+} as const;