@mieweb/ui 0.9.0 → 0.10.0

package/dist/{chunk-BJKAVWED.js → chunk-MBWF36DJ.js}

@@ -1,4 +1,6 @@
+import { AnimatedPresence, Animated } from './chunk-XCP454Q6.js';
 import { cn } from './chunk-TQONQSJO.js';
+import { usePrefersReducedMotion } from './chunk-HB7C7NB5.js';
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 
@@ -82,25 +84,44 @@ var CollapsibleTrigger = React.forwardRef(({ className, onClick, children, ...pr
 CollapsibleTrigger.displayName = "CollapsibleTrigger";
 var CollapsibleContent = React.forwardRef(({ className, forceMount, children, ...props }, ref) => {
   const { open, contentId, triggerId } = useCollapsibleContext("CollapsibleContent");
-  if (!open && !forceMount) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const sharedProps = {
+    id: contentId,
+    role: "region",
+    "aria-labelledby": triggerId,
+    "data-slot": "collapsible-content",
+    "data-state": open ? "open" : "closed"
+  };
+  if (forceMount) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...sharedProps,
+        hidden: !open,
+        className: cn(className),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(AnimatedPresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+    Animated,
     {
       ref,
-      id: contentId,
-      role: "region",
-      "aria-labelledby": triggerId,
-      "data-slot": "collapsible-content",
-      "data-state": open ? "open" : "closed",
-      hidden: !open,
-      className: cn(className),
+      preset: "collapse",
+      mode: "presence",
+      enabled: !prefersReducedMotion,
+      ...sharedProps,
+      className: cn("overflow-hidden", className),
       ...props,
       children
-    }
-  );
+    },
+    "collapsible-content"
+  ) });
 });
 CollapsibleContent.displayName = "CollapsibleContent";
 
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
-//# sourceMappingURL=chunk-BJKAVWED.js.map
-//# sourceMappingURL=chunk-BJKAVWED.js.map
+//# sourceMappingURL=chunk-MBWF36DJ.js.map
+//# sourceMappingURL=chunk-MBWF36DJ.js.map

package/dist/chunk-MBWF36DJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapsible/Collapsible.tsx"],"names":[],"mappings":"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","file":"chunk-MBWF36DJ.js","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\nimport { Animated, AnimatedPresence } from '../../motion';\nimport { usePrefersReducedMotion } from '../../hooks/usePrefersReducedMotion';\n\ninterface CollapsibleContextValue {\n  open: boolean;\n  toggle: () => void;\n  disabled?: boolean;\n  contentId: string;\n  triggerId: string;\n}\n\nconst CollapsibleContext = React.createContext<CollapsibleContextValue | null>(\n  null\n);\n\nfunction useCollapsibleContext(component: string): CollapsibleContextValue {\n  const ctx = React.useContext(CollapsibleContext);\n  if (!ctx) {\n    throw new Error(`${component} must be used within a <Collapsible>`);\n  }\n  return ctx;\n}\n\nexport interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Controlled open state */\n  open?: boolean;\n  /** Default open state (uncontrolled) */\n  defaultOpen?: boolean;\n  /** Callback fired when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Disables toggling */\n  disabled?: boolean;\n}\n\n/**\n * An interactive component that expands and collapses its content.\n *\n * @example\n * ```tsx\n * <Collapsible>\n *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n *   <CollapsibleContent>Hidden content</CollapsibleContent>\n * </Collapsible>\n * ```\n */\nconst Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(\n  (\n    {\n      className,\n      open: controlledOpen,\n      defaultOpen = false,\n      onOpenChange,\n      disabled,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);\n    const generatedId = React.useId();\n\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n    const toggle = React.useCallback(() => {\n      if (disabled) return;\n      const next = !open;\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    }, [disabled, open, isControlled, onOpenChange]);\n\n    const value = React.useMemo<CollapsibleContextValue>(\n      () => ({\n        open,\n        toggle,\n        disabled,\n        contentId: `${generatedId}-content`,\n        triggerId: `${generatedId}-trigger`,\n      }),\n      [open, toggle, disabled, generatedId]\n    );\n\n    return (\n      <CollapsibleContext.Provider value={value}>\n        <div\n          ref={ref}\n          data-slot=\"collapsible\"\n          data-state={open ? 'open' : 'closed'}\n          className={cn(className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </CollapsibleContext.Provider>\n    );\n  }\n);\n\nCollapsible.displayName = 'Collapsible';\n\nexport type CollapsibleTriggerProps =\n  React.ButtonHTMLAttributes<HTMLButtonElement>;\n\nconst CollapsibleTrigger = React.forwardRef<\n  HTMLButtonElement,\n  CollapsibleTriggerProps\n>(({ className, onClick, children, ...props }, ref) => {\n  const { open, toggle, disabled, contentId, triggerId } =\n    useCollapsibleContext('CollapsibleTrigger');\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      id={triggerId}\n      data-slot=\"collapsible-trigger\"\n      aria-expanded={open}\n      aria-controls={contentId}\n      data-state={open ? 'open' : 'closed'}\n      disabled={disabled}\n      onClick={(e) => {\n        toggle();\n        onClick?.(e);\n      }}\n      className={cn(className)}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n});\n\nCollapsibleTrigger.displayName = 'CollapsibleTrigger';\n\nexport interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Keep content mounted when collapsed (hidden via CSS) */\n  forceMount?: boolean;\n}\n\nconst CollapsibleContent = React.forwardRef<\n  HTMLDivElement,\n  CollapsibleContentProps\n>(({ className, forceMount, children, ...props }, ref) => {\n  const { open, contentId, triggerId } =\n    useCollapsibleContext('CollapsibleContent');\n  const prefersReducedMotion = usePrefersReducedMotion();\n\n  const sharedProps = {\n    id: contentId,\n    role: 'region' as const,\n    'aria-labelledby': triggerId,\n    'data-slot': 'collapsible-content',\n    'data-state': open ? ('open' as const) : ('closed' as const),\n  };\n\n  /*\n   * `forceMount` keeps the old instant behaviour, deliberately.\n   *\n   * It exists so consumers can keep collapsed content in the DOM, and it relies\n   * on `hidden` to keep that content out of the tab order and the accessibility\n   * tree. `hidden` is `display: none`, which an animated height cannot run\n   * through — and dropping it for the duration would leave keyboard users able\n   * to tab into content that is visually collapsed. Sequencing `hidden` around\n   * the animation is the real fix; until then, not animating is the safe\n   * answer, and the default (unmounting) path below covers the common case.\n   */\n  if (forceMount) {\n    return (\n      <div\n        ref={ref}\n        {...sharedProps}\n        hidden={!open}\n        className={cn(className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <AnimatedPresence initial={false}>\n      {open && (\n        <Animated\n          key=\"collapsible-content\"\n          ref={ref as React.Ref<HTMLElement>}\n          preset=\"collapse\"\n          mode=\"presence\"\n          // `collapse` animates height, which `MotionConfig reducedMotion=\"user\"`\n          // does not treat as a transform or layout animation and so leaves\n          // running. Honouring the preference is the component's job here.\n          enabled={!prefersReducedMotion}\n          {...sharedProps}\n          // Content must be clipped or it spills past the box while the height\n          // is still travelling.\n          className={cn('overflow-hidden', className)}\n          {...props}\n        >\n          {children}\n        </Animated>\n      )}\n    </AnimatedPresence>\n  );\n});\n\nCollapsibleContent.displayName = 'CollapsibleContent';\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent };\n"]}

package/dist/chunk-NV2CWBI2.cjs

@@ -0,0 +1,290 @@
+'use strict';
+
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/motion/presets.ts
+function offsetFromEdge(edge, distance) {
+  switch (edge) {
+    case "top":
+      return { x: 0, y: -distance };
+    case "bottom":
+      return { x: 0, y: distance };
+    case "left":
+      return { x: -distance, y: 0 };
+    default:
+      return { x: distance, y: 0 };
+  }
+}
+var motionPresets = {
+  /**
+   * Off-canvas panel pinned to the inline-start edge. Animates `x` only, which
+   * the compositor can handle without layout or paint.
+   */
+  drawerStart: {
+    variants: {
+      open: { x: "0%" },
+      // Off-canvas direction follows writing direction, mirroring the
+      // `-translate-x-full rtl:translate-x-full` CSS fallback.
+      closed: (isRtl) => ({ x: isRtl ? "100%" : "-100%" })
+    },
+    transition: { type: "spring", stiffness: 400, damping: 40, mass: 1 }
+  },
+  /** Scrim behind a drawer or modal. */
+  overlay: {
+    variants: {
+      open: { opacity: 1 },
+      closed: { opacity: 0 }
+    },
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  /** Centered dialog surface — rises and settles rather than popping. */
+  modalContent: {
+    variants: {
+      open: { opacity: 1, scale: 1, y: 0 },
+      closed: { opacity: 0, scale: 0.96, y: 8 }
+    },
+    transition: { type: "spring", stiffness: 500, damping: 40, mass: 0.8 }
+  },
+  /**
+   * Text that disappears as its container narrows — sidebar labels on collapse.
+   *
+   * Opacity only, and deliberately so. An inline-axis slide would read slightly
+   * better but would make every label direction-aware, and resolving direction
+   * per nav item is a disproportionate amount of plumbing for an 8px nudge.
+   * Fading also degrades to itself under reduced motion instead of becoming a
+   * different animation.
+   *
+   * Short because it runs on many elements at once and has to finish inside the
+   * container's own width transition, or labels are still fading after the rail
+   * has stopped moving.
+   */
+  sidebarLabel: {
+    variants: {
+      open: { opacity: 1 },
+      closed: { opacity: 0 }
+    },
+    transition: { duration: 0.15, ease: "easeOut" }
+  },
+  /**
+   * Anchored popup surface — dropdown, select, autocomplete, command palette.
+   *
+   * `custom` is the side of the anchor the menu actually occupies, so the
+   * closed state nudges back *toward* the trigger and the menu reads as coming
+   * out of the control that opened it. Pass the post-flip side, not the
+   * requested placement: a menu asked for `bottom` that flipped to `top` for
+   * want of room must animate from the top, or it moves the wrong way.
+   *
+   * `transform-origin` is deliberately left to CSS (`origin-top` and friends).
+   * It is static per side and never animates, so making it a variant would put
+   * a second owner on a property motion has no reason to touch.
+   *
+   * Snappier than `modalContent`: a menu is a transient response to a click and
+   * should feel instant, where a dialog is a context switch and can afford to
+   * settle.
+   */
+  menu: {
+    variants: {
+      open: { opacity: 1, scale: 1, x: 0, y: 0 },
+      closed: (edge) => ({
+        opacity: 0,
+        scale: 0.95,
+        ...offsetFromEdge(edge, -4)
+      })
+    },
+    transition: { type: "spring", stiffness: 600, damping: 40, mass: 0.6 }
+  },
+  /**
+   * Disclosure content that expands and collapses — `Collapsible`, `Accordion`.
+   *
+   * The one preset that earns its keep on capability rather than polish:
+   * `height: auto` is not interpolable in CSS, so the alternative is a
+   * hard-coded max-height that either clips tall content or eases against dead
+   * space on short content. Motion measures the real height instead.
+   *
+   * Animating `height` costs layout on every frame, unlike the transform and
+   * opacity work everywhere else in this file. That is the price of the
+   * capability; keep the duration short and don't reach for this preset when a
+   * transform would do.
+   *
+   * Consumers must clip the element (`overflow-hidden`) or content spills past
+   * the shrinking box mid-animation.
+   *
+   * Note that `MotionConfig reducedMotion="user"` does **not** cover this:
+   * it drops transform and layout animations, and `height` is a plain value
+   * animation to motion. Components using this preset are responsible for
+   * honoring the preference themselves — see `usePrefersReducedMotion`.
+   */
+  collapse: {
+    variants: {
+      open: { height: "auto", opacity: 1 },
+      closed: { height: 0, opacity: 0 }
+    },
+    transition: { duration: 0.2, ease: "easeOut" }
+  },
+  /**
+   * Transient notification entering and leaving a stack.
+   *
+   * `custom` is the physical edge the toast lives against, so it enters from
+   * the screen edge nearest it rather than always from the right — which is
+   * what the `animate-slide-in-right` fallback does regardless of position.
+   *
+   * Scale is near-imperceptible on purpose: it softens the arrival without
+   * making a message that may carry an error read as playful.
+   */
+  toast: {
+    variants: {
+      open: { opacity: 1, scale: 1, x: 0, y: 0 },
+      closed: (edge) => ({
+        opacity: 0,
+        scale: 0.98,
+        ...offsetFromEdge(edge, 24)
+      })
+    },
+    transition: { type: "spring", stiffness: 400, damping: 36, mass: 0.8 }
+  },
+  /**
+   * Generic presence fade, for surfaces with no meaningful direction —
+   * drag overlays, connectivity banners, skeleton-to-content swaps.
+   *
+   * Survives `reducedMotion="user"` intact, since opacity is the one thing that
+   * setting keeps. Prefer it over a transform preset wherever the movement is
+   * decorative rather than explanatory.
+   */
+  fade: {
+    variants: {
+      open: { opacity: 1 },
+      closed: { opacity: 0 }
+    },
+    transition: { duration: 0.15, ease: "easeOut" }
+  },
+  /**
+   * Small element arriving with emphasis — a count badge, a status pill.
+   *
+   * Overshoots past full size and settles back (`1 → 1.1 → 1`) so the arrival
+   * is legible on an element too small for movement to register. Reserve it
+   * for things that appear in response to an event worth noticing; on anything
+   * large it reads as a bounce.
+   *
+   * The overshoot is a keyframe rather than a spring because the resting open
+   * state has to be `scale: 1`. Expressing the emphasis as a spring target
+   * would leave a mounted consumer parked at 1.1 — permanently 10% oversized —
+   * since the open variant is also the at-rest state.
+   */
+  pop: {
+    variants: {
+      open: { opacity: 1, scale: [1, 1.1, 1] },
+      closed: { opacity: 0, scale: 1 }
+    },
+    // `times` front-loads the overshoot so it reads as a pop rather than an
+    // even swell. Keyframe arrays need a duration-based tween; a spring has no
+    // way to run through intermediate values.
+    transition: { duration: 0.28, ease: "easeOut", times: [0, 0.45, 1] }
+  }
+};
+var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@mieweb/ui.motionRuntimeContext.v1");
+function getMotionRuntimeContext() {
+  const globalScope = globalThis;
+  if (!globalScope[CONTEXT_KEY]) {
+    globalScope[CONTEXT_KEY] = React__namespace.createContext(null);
+  }
+  return globalScope[CONTEXT_KEY];
+}
+var MotionRuntimeContext = getMotionRuntimeContext();
+function useMotionRuntime() {
+  return React__namespace.useContext(MotionRuntimeContext);
+}
+function createPresetPropBuilders() {
+  return {
+    toggle(preset, open, custom) {
+      const { variants, transition } = motionPresets[preset];
+      return {
+        variants,
+        transition,
+        custom,
+        // `false` pins the element to its current variant on mount instead of
+        // animating into it.
+        initial: false,
+        animate: open ? "open" : "closed"
+      };
+    },
+    presence(preset, custom) {
+      const { variants, transition } = motionPresets[preset];
+      return {
+        variants,
+        transition,
+        custom,
+        initial: "closed",
+        animate: "open",
+        exit: "closed"
+      };
+    }
+  };
+}
+var Animated = React__namespace.forwardRef(
+  function Animated2({
+    as = "div",
+    preset,
+    mode,
+    open = false,
+    custom,
+    className,
+    fallbackClassName,
+    enabled = true,
+    children,
+    ...rest
+  }, ref) {
+    const runtime = useMotionRuntime();
+    if (!runtime || !runtime.enabled || !enabled) {
+      const Tag = as;
+      return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref, className: chunkS5RVSXDV_cjs.cn(fallbackClassName, className), ...rest, children });
+    }
+    const Component = as === "nav" ? runtime.Nav : as === "span" ? runtime.Span : runtime.Div;
+    const motionProps = mode === "toggle" ? runtime.toggle(preset, open, custom) : runtime.presence(preset, custom);
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className, ...motionProps, ...rest, children });
+  }
+);
+Animated.displayName = "Animated";
+function AnimatedPresence({
+  children,
+  initial,
+  onExitComplete
+}) {
+  const runtime = useMotionRuntime();
+  if (!runtime) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  }
+  const { Presence } = runtime;
+  return /* @__PURE__ */ jsxRuntime.jsx(Presence, { initial, onExitComplete, children });
+}
+AnimatedPresence.displayName = "AnimatedPresence";
+
+exports.Animated = Animated;
+exports.AnimatedPresence = AnimatedPresence;
+exports.MotionRuntimeContext = MotionRuntimeContext;
+exports.createPresetPropBuilders = createPresetPropBuilders;
+exports.motionPresets = motionPresets;
+exports.useMotionRuntime = useMotionRuntime;
+//# sourceMappingURL=chunk-NV2CWBI2.cjs.map
+//# sourceMappingURL=chunk-NV2CWBI2.cjs.map

package/dist/chunk-NV2CWBI2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/motion/presets.ts","../src/motion/runtime.ts","../src/motion/Animated.tsx"],"names":["React","React2","Animated","jsx","cn"],"mappings":"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","file":"chunk-NV2CWBI2.cjs","sourcesContent":["/**\n * Motion presets — the shared vocabulary of animations.\n *\n * This module is intentionally **free of any `motion` import**. It ships in the\n * main `@mieweb/ui` entry so components can describe *what* they animate\n * without pulling in a runtime to actually do it. The `@mieweb/ui/motion` entry\n * is what turns these descriptions into real animations.\n *\n * Every preset is expressed as an open/closed variant pair so the same\n * definition serves both usages:\n *\n * - **toggle** — the element stays mounted and animates between `open` and\n *   `closed` (a drawer sliding in and out).\n * - **presence** — the element mounts and unmounts, entering on `open` and\n *   exiting back to `closed` (a modal).\n */\n\n// =============================================================================\n// Types\n// =============================================================================\n\n/** Named animation recipes shared by components. */\nexport type MotionPreset =\n  | 'drawerStart'\n  | 'overlay'\n  | 'modalContent'\n  | 'sidebarLabel'\n  | 'menu'\n  | 'collapse'\n  | 'toast'\n  | 'fade'\n  | 'pop';\n\n/**\n * A physical edge, already resolved from any logical (`start`/`end`) position\n * and from writing direction.\n *\n * Presets that move an element along an axis take one of these as `custom`.\n * Resolution is the component's job, not the preset's: only the component knows\n * whether its `end` means right or left, and — for anything anchored — which\n * side it actually landed on after flipping away from a viewport edge.\n */\nexport type MotionEdge = 'top' | 'bottom' | 'left' | 'right';\n\n/** Offset along the axis implied by `edge`, in px. */\nfunction offsetFromEdge(\n  edge: unknown,\n  distance: number\n): { x: number; y: number } {\n  switch (edge) {\n    case 'top':\n      return { x: 0, y: -distance };\n    case 'bottom':\n      return { x: 0, y: distance };\n    case 'left':\n      return { x: -distance, y: 0 };\n    default:\n      return { x: distance, y: 0 };\n  }\n}\n\n/**\n * A variant value. Either a plain target object or a function of the element's\n * `custom` value — the latter lets a single preset adapt to context, e.g. a\n * drawer flipping its off-canvas direction in RTL.\n */\nexport type MotionVariant =\n  | Record<string, unknown>\n  | ((custom: unknown) => Record<string, unknown>);\n\nexport interface MotionPresetDefinition {\n  variants: {\n    open: MotionVariant;\n    closed: MotionVariant;\n  };\n  transition: Record<string, unknown>;\n}\n\n// =============================================================================\n// Presets\n// =============================================================================\n\n/**\n * `custom` contract per preset:\n *\n * - `drawerStart` — `boolean`, whether the document direction is RTL.\n * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical\n *   position and writing direction by the component.\n * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —\n *   unused.\n */\nexport const motionPresets: Record<MotionPreset, MotionPresetDefinition> = {\n  /**\n   * Off-canvas panel pinned to the inline-start edge. Animates `x` only, which\n   * the compositor can handle without layout or paint.\n   */\n  drawerStart: {\n    variants: {\n      open: { x: '0%' },\n      // Off-canvas direction follows writing direction, mirroring the\n      // `-translate-x-full rtl:translate-x-full` CSS fallback.\n      closed: (isRtl: unknown) => ({ x: isRtl ? '100%' : '-100%' }),\n    },\n    transition: { type: 'spring', stiffness: 400, damping: 40, mass: 1 },\n  },\n\n  /** Scrim behind a drawer or modal. */\n  overlay: {\n    variants: {\n      open: { opacity: 1 },\n      closed: { opacity: 0 },\n    },\n    transition: { duration: 0.2, ease: 'easeOut' },\n  },\n\n  /** Centered dialog surface — rises and settles rather than popping. */\n  modalContent: {\n    variants: {\n      open: { opacity: 1, scale: 1, y: 0 },\n      closed: { opacity: 0, scale: 0.96, y: 8 },\n    },\n    transition: { type: 'spring', stiffness: 500, damping: 40, mass: 0.8 },\n  },\n\n  /**\n   * Text that disappears as its container narrows — sidebar labels on collapse.\n   *\n   * Opacity only, and deliberately so. An inline-axis slide would read slightly\n   * better but would make every label direction-aware, and resolving direction\n   * per nav item is a disproportionate amount of plumbing for an 8px nudge.\n   * Fading also degrades to itself under reduced motion instead of becoming a\n   * different animation.\n   *\n   * Short because it runs on many elements at once and has to finish inside the\n   * container's own width transition, or labels are still fading after the rail\n   * has stopped moving.\n   */\n  sidebarLabel: {\n    variants: {\n      open: { opacity: 1 },\n      closed: { opacity: 0 },\n    },\n    transition: { duration: 0.15, ease: 'easeOut' },\n  },\n\n  /**\n   * Anchored popup surface — dropdown, select, autocomplete, command palette.\n   *\n   * `custom` is the side of the anchor the menu actually occupies, so the\n   * closed state nudges back *toward* the trigger and the menu reads as coming\n   * out of the control that opened it. Pass the post-flip side, not the\n   * requested placement: a menu asked for `bottom` that flipped to `top` for\n   * want of room must animate from the top, or it moves the wrong way.\n   *\n   * `transform-origin` is deliberately left to CSS (`origin-top` and friends).\n   * It is static per side and never animates, so making it a variant would put\n   * a second owner on a property motion has no reason to touch.\n   *\n   * Snappier than `modalContent`: a menu is a transient response to a click and\n   * should feel instant, where a dialog is a context switch and can afford to\n   * settle.\n   */\n  menu: {\n    variants: {\n      open: { opacity: 1, scale: 1, x: 0, y: 0 },\n      closed: (edge: unknown) => ({\n        opacity: 0,\n        scale: 0.95,\n        ...offsetFromEdge(edge, -4),\n      }),\n    },\n    transition: { type: 'spring', stiffness: 600, damping: 40, mass: 0.6 },\n  },\n\n  /**\n   * Disclosure content that expands and collapses — `Collapsible`, `Accordion`.\n   *\n   * The one preset that earns its keep on capability rather than polish:\n   * `height: auto` is not interpolable in CSS, so the alternative is a\n   * hard-coded max-height that either clips tall content or eases against dead\n   * space on short content. Motion measures the real height instead.\n   *\n   * Animating `height` costs layout on every frame, unlike the transform and\n   * opacity work everywhere else in this file. That is the price of the\n   * capability; keep the duration short and don't reach for this preset when a\n   * transform would do.\n   *\n   * Consumers must clip the element (`overflow-hidden`) or content spills past\n   * the shrinking box mid-animation.\n   *\n   * Note that `MotionConfig reducedMotion=\"user\"` does **not** cover this:\n   * it drops transform and layout animations, and `height` is a plain value\n   * animation to motion. Components using this preset are responsible for\n   * honoring the preference themselves — see `usePrefersReducedMotion`.\n   */\n  collapse: {\n    variants: {\n      open: { height: 'auto', opacity: 1 },\n      closed: { height: 0, opacity: 0 },\n    },\n    transition: { duration: 0.2, ease: 'easeOut' },\n  },\n\n  /**\n   * Transient notification entering and leaving a stack.\n   *\n   * `custom` is the physical edge the toast lives against, so it enters from\n   * the screen edge nearest it rather than always from the right — which is\n   * what the `animate-slide-in-right` fallback does regardless of position.\n   *\n   * Scale is near-imperceptible on purpose: it softens the arrival without\n   * making a message that may carry an error read as playful.\n   */\n  toast: {\n    variants: {\n      open: { opacity: 1, scale: 1, x: 0, y: 0 },\n      closed: (edge: unknown) => ({\n        opacity: 0,\n        scale: 0.98,\n        ...offsetFromEdge(edge, 24),\n      }),\n    },\n    transition: { type: 'spring', stiffness: 400, damping: 36, mass: 0.8 },\n  },\n\n  /**\n   * Generic presence fade, for surfaces with no meaningful direction —\n   * drag overlays, connectivity banners, skeleton-to-content swaps.\n   *\n   * Survives `reducedMotion=\"user\"` intact, since opacity is the one thing that\n   * setting keeps. Prefer it over a transform preset wherever the movement is\n   * decorative rather than explanatory.\n   */\n  fade: {\n    variants: {\n      open: { opacity: 1 },\n      closed: { opacity: 0 },\n    },\n    transition: { duration: 0.15, ease: 'easeOut' },\n  },\n\n  /**\n   * Small element arriving with emphasis — a count badge, a status pill.\n   *\n   * Overshoots past full size and settles back (`1 → 1.1 → 1`) so the arrival\n   * is legible on an element too small for movement to register. Reserve it\n   * for things that appear in response to an event worth noticing; on anything\n   * large it reads as a bounce.\n   *\n   * The overshoot is a keyframe rather than a spring because the resting open\n   * state has to be `scale: 1`. Expressing the emphasis as a spring target\n   * would leave a mounted consumer parked at 1.1 — permanently 10% oversized —\n   * since the open variant is also the at-rest state.\n   */\n  pop: {\n    variants: {\n      open: { opacity: 1, scale: [1, 1.1, 1] },\n      closed: { opacity: 0, scale: 1 },\n    },\n    // `times` front-loads the overshoot so it reads as a pop rather than an\n    // even swell. Keyframe arrays need a duration-based tween; a spring has no\n    // way to run through intermediate values.\n    transition: { duration: 0.28, ease: 'easeOut', times: [0, 0.45, 1] },\n  },\n};\n","/**\n * Motion runtime — the seam between components and an optional animation library.\n *\n * Components in the main entry never import `motion`. They ask this module for\n * a runtime; if an app has opted in by rendering `<MotionProvider>` from\n * `@mieweb/ui/motion`, they get one and animate. If not, `useMotionRuntime()`\n * returns `null` and they fall back to their existing CSS transitions. That is\n * what keeps `motion` out of the bundle of every app that hasn't asked for it —\n * the opt-in is resolved in the *module graph*, not by a prop.\n *\n * Like `presets`, this module must stay free of any `motion` import.\n */\n\nimport * as React from 'react';\nimport { motionPresets, type MotionPreset } from './presets';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface MotionPresenceProps {\n  children?: React.ReactNode;\n  /** Suppress the initial mount animation. */\n  initial?: boolean;\n  /**\n   * Fires once every exiting child has finished and been removed.\n   *\n   * Needed by anything that guards the DOM while it is open — a focus trap, a\n   * scroll lock — because those guards must outlive `open` for as long as the\n   * subtree is still on screen. Never fires when no runtime is active, since\n   * there is no exit to wait for.\n   */\n  onExitComplete?: () => void;\n}\n\n/**\n * The capabilities a motion library must supply. Deliberately small: element\n * factories, a presence wrapper, and prop builders. Components depend on this\n * interface, never on a concrete library, so swapping or dropping the library\n * stays a one-file change.\n */\nexport interface MotionRuntime {\n  /**\n   * Whether animations should actually run.\n   *\n   * A disabled provider still supplies a runtime rather than `null` so that\n   * consumers can tell \"disabled\" apart from \"never opted in\": `Modal` uses it\n   * to decide whether an exit animation will ever report completion, and\n   * `AnimatedPresence` keeps its wrapper element stable across the flip.\n   * `Animated` itself renders the plain fallback tag whenever this is false —\n   * withholding animation props from a mounted motion component corrupts\n   * `toggle`-mode elements, so the swap (and the remount it implies) is the\n   * correct behaviour. See the render branches in `Animated`.\n   */\n  enabled: boolean;\n  /** Animated `div`. */\n  Div: React.ElementType;\n  /** Animated `nav`. */\n  Nav: React.ElementType;\n  /** Animated `span`, for inline content that must not become a block. */\n  Span: React.ElementType;\n  /** Enables exit animations for conditionally rendered children. */\n  Presence: React.ComponentType<MotionPresenceProps>;\n  /**\n   * Props for an element that stays mounted and animates between states.\n   * Skips the initial animation so a closed drawer doesn't slide out on load.\n   */\n  toggle: (\n    preset: MotionPreset,\n    open: boolean,\n    custom?: unknown\n  ) => Record<string, unknown>;\n  /** Props for an element that mounts and unmounts inside `Presence`. */\n  presence: (preset: MotionPreset, custom?: unknown) => Record<string, unknown>;\n}\n\n// =============================================================================\n// Context\n// =============================================================================\n\n/**\n * The context is stashed on `globalThis` under a registered symbol rather than\n * held in a module-local `const`.\n *\n * `@mieweb/ui` and `@mieweb/ui/motion` are separate bundle entries, and CJS\n * builds cannot code-split. Without this, the provider and the components\n * would each get their own copy of the context object and the provider would\n * silently never be seen — animations would simply never turn on, with no\n * error to explain why. A duplicated install of the package causes the same\n * failure. Keying off the global symbol registry makes the context a true\n * singleton in every one of those cases.\n *\n * The key is versioned. Two copies of this package sharing one page share\n * whatever lives under the key, so the `v1` suffix is a compatibility\n * contract: bump it if the `MotionRuntime` interface ever changes shape,\n * or an old provider will hand a new component a runtime it cannot use.\n */\nconst CONTEXT_KEY = Symbol.for('@mieweb/ui.motionRuntimeContext.v1');\n\ntype GlobalWithMotionContext = typeof globalThis & {\n  [CONTEXT_KEY]?: React.Context<MotionRuntime | null>;\n};\n\nfunction getMotionRuntimeContext(): React.Context<MotionRuntime | null> {\n  const globalScope = globalThis as GlobalWithMotionContext;\n  if (!globalScope[CONTEXT_KEY]) {\n    globalScope[CONTEXT_KEY] = React.createContext<MotionRuntime | null>(null);\n  }\n  return globalScope[CONTEXT_KEY];\n}\n\n/** @internal Consumed by `<MotionProvider>` in the `@mieweb/ui/motion` entry. */\nexport const MotionRuntimeContext = getMotionRuntimeContext();\n\n// =============================================================================\n// Hooks\n// =============================================================================\n\n/**\n * The active motion runtime, or `null` when the app has not opted in.\n *\n * Components must treat `null` as the normal case and keep a CSS path that\n * looks good on its own — motion is an enhancement, never a requirement.\n */\nexport function useMotionRuntime(): MotionRuntime | null {\n  return React.useContext(MotionRuntimeContext);\n}\n\n// =============================================================================\n// Prop builders\n// =============================================================================\n\n/**\n * Builds the `toggle`/`presence` prop builders around a library-agnostic core.\n * Exported so `<MotionProvider>` can assemble a runtime without restating the\n * preset lookup.\n *\n * @internal\n */\nexport function createPresetPropBuilders(): Pick<\n  MotionRuntime,\n  'toggle' | 'presence'\n> {\n  return {\n    toggle(preset, open, custom) {\n      const { variants, transition } = motionPresets[preset];\n      return {\n        variants,\n        transition,\n        custom,\n        // `false` pins the element to its current variant on mount instead of\n        // animating into it.\n        initial: false,\n        animate: open ? 'open' : 'closed',\n      };\n    },\n\n    presence(preset, custom) {\n      const { variants, transition } = motionPresets[preset];\n      return {\n        variants,\n        transition,\n        custom,\n        initial: 'closed',\n        animate: 'open',\n        exit: 'closed',\n      };\n    },\n  };\n}\n","/**\n * `Animated` / `AnimatedPresence` — the ergonomic layer components use.\n *\n * These exist so an individual component never has to branch on whether motion\n * is available. It declares the preset it wants and the CSS classes that stand\n * in when motion is absent; this module picks the element to render.\n *\n * Adding motion to a further component should be a matter of swapping its\n * root `<div>` for an `<Animated>` and naming a preset — no new imports, no\n * new dependency, and no behavior change for apps that have not opted in.\n */\n\nimport * as React from 'react';\nimport { cn } from '../utils/cn';\nimport { useMotionRuntime, type MotionPresenceProps } from './runtime';\nimport type { MotionPreset } from './presets';\n\n// =============================================================================\n// Animated\n// =============================================================================\n\nexport interface AnimatedProps extends React.HTMLAttributes<HTMLElement> {\n  /** Intrinsic element to render. */\n  as?: 'div' | 'nav' | 'span';\n  /** Which shared animation recipe to use. */\n  preset: MotionPreset;\n  /**\n   * - `toggle` — element stays mounted and animates between open and closed.\n   * - `presence` — element mounts and unmounts; wrap it in `<AnimatedPresence>`\n   *   so the exit animation gets a chance to run.\n   */\n  mode: 'toggle' | 'presence';\n  /** Current state. Only read in `toggle` mode. */\n  open?: boolean;\n  /** Per-preset context value — see the `custom` contract in `presets.ts`. */\n  custom?: unknown;\n  /**\n   * Classes applied whenever this element is **not** animating — no provider,\n   * a disabled provider, or `enabled={false}`. This is where a component's\n   * existing CSS transition lives, so the two paths never both try to drive\n   * the same property.\n   */\n  fallbackClassName?: string;\n  /**\n   * Set `false` to stop this element animating even when a runtime is active.\n   *\n   * For states where an animated element would be wrong rather than merely\n   * unnecessary. Motion writes a `transform` to hold an element at its resting\n   * position, and a transformed ancestor becomes the containing block for any\n   * `position: fixed` descendant — so an element that is only sometimes\n   * animated should opt out the rest of the time.\n   *\n   * Flipping this (or the provider's `disabled`) swaps the element back to a\n   * plain tag, which **remounts** it — deliberately. See the note on the\n   * render branches below.\n   */\n  enabled?: boolean;\n}\n\nexport const Animated = React.forwardRef<HTMLElement, AnimatedProps>(\n  function Animated(\n    {\n      as = 'div',\n      preset,\n      mode,\n      open = false,\n      custom,\n      className,\n      fallbackClassName,\n      enabled = true,\n      children,\n      ...rest\n    },\n    ref\n  ) {\n    const runtime = useMotionRuntime();\n\n    /*\n     * Anything not animating renders the plain tag with the CSS fallback —\n     * no provider, a disabled provider, or `enabled={false}` alike.\n     *\n     * Crossing between this branch and the motion one changes the element\n     * type, which remounts the subtree. That is deliberate. The obvious\n     * alternative — keeping the motion component mounted and only withholding\n     * its animation props — corrupts `toggle`-mode elements in both\n     * directions, because motion only writes variant styles at mount or in\n     * response to an animation:\n     *\n     * - props added in place (a drawer crossing into its mobile breakpoint\n     *   while closed) never get the `closed` transform, so the drawer sits\n     *   fully visible over the page;\n     * - props removed in place strand whatever inline `transform` motion last\n     *   wrote, so a sidebar returning to desktop stays off-canvas.\n     *\n     * Fresh mounts are correct in both worlds, so remounting at the flip is\n     * the fix. The flips are rare — a breakpoint cross, a test toggling the\n     * provider — and a remount that resets local state beats a stale\n     * transform that removes the navigation.\n     */\n    if (!runtime || !runtime.enabled || !enabled) {\n      const Tag = as as React.ElementType;\n      return (\n        <Tag ref={ref} className={cn(fallbackClassName, className)} {...rest}>\n          {children}\n        </Tag>\n      );\n    }\n\n    const Component =\n      as === 'nav' ? runtime.Nav : as === 'span' ? runtime.Span : runtime.Div;\n\n    const motionProps =\n      mode === 'toggle'\n        ? runtime.toggle(preset, open, custom)\n        : runtime.presence(preset, custom);\n\n    return (\n      <Component ref={ref} className={className} {...motionProps} {...rest}>\n        {children}\n      </Component>\n    );\n  }\n);\n\nAnimated.displayName = 'Animated';\n\n// =============================================================================\n// AnimatedPresence\n// =============================================================================\n\n/**\n * Keeps unmounting children on screen long enough to animate out.\n *\n * Without a runtime this is a pass-through, so children disappear immediately —\n * which is exactly what they do today. Children rendered conditionally inside\n * it need a stable `key`.\n */\nexport function AnimatedPresence({\n  children,\n  initial,\n  onExitComplete,\n}: MotionPresenceProps): React.JSX.Element {\n  const runtime = useMotionRuntime();\n\n  if (!runtime) {\n    return <>{children}</>;\n  }\n\n  const { Presence } = runtime;\n  return (\n    <Presence initial={initial} onExitComplete={onExitComplete}>\n      {children}\n    </Presence>\n  );\n}\n\nAnimatedPresence.displayName = 'AnimatedPresence';\n"]}