@mieweb/ui 0.10.0-dev.4 → 0.10.0-dev.40

package/dist/maps.js

@@ -0,0 +1,138 @@
+import { cn } from './chunk-TQONQSJO.js';
+import './chunk-PX6F3LHL.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var OSM = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+var OSM_ATTRIBUTION = "© OpenStreetMap contributors";
+var PointMap = React.forwardRef(
+  ({
+    points,
+    label,
+    center = [39.8, -98.6],
+    zoom = 3,
+    minZoom = 2,
+    maxZoom = 10,
+    height = 320,
+    tileUrl = OSM,
+    attribution = OSM_ATTRIBUTION,
+    outlineUrl,
+    sizeBy = "value",
+    showValues,
+    hideList,
+    className,
+    ...rest
+  }, ref) => {
+    const mapEl = React.useRef(null);
+    const [failed, setFailed] = React.useState(false);
+    const max = Math.max(1, ...points.map((p) => p.value ?? 0));
+    React.useEffect(() => {
+      const el = mapEl.current;
+      if (!el) return;
+      let map;
+      let cancelled = false;
+      import('leaflet').then(async (mod) => {
+        const leaflet = mod.default ?? mod;
+        if (cancelled) return;
+        const styles = getComputedStyle(el);
+        const colour = styles.getPropertyValue("--mieweb-primary-500").trim() || "#27aae1";
+        const line = styles.getPropertyValue("--mieweb-border").trim() || "#94a3b8";
+        map = leaflet.map(el, {
+          center,
+          zoom,
+          minZoom,
+          maxZoom,
+          scrollWheelZoom: false
+        });
+        leaflet.tileLayer(tileUrl, { attribution }).addTo(map);
+        if (outlineUrl) {
+          const data = await fetch(outlineUrl).then((r) => r.ok ? r.json() : null).catch(() => null);
+          if (data && !cancelled && map)
+            leaflet.geoJSON(data, {
+              style: { color: line, weight: 0.6, fillOpacity: 0 }
+            }).addTo(map);
+        }
+        if (cancelled || !map) return;
+        for (const p of points) {
+          const radius = sizeBy === "value" && p.value != null ? 6 + p.value / max * 22 : 6;
+          const marker = leaflet.circleMarker([p.lat, p.lng], {
+            radius,
+            color: colour,
+            weight: 2,
+            fillColor: colour,
+            fillOpacity: 0.35
+          }).addTo(map);
+          const text = [
+            p.label,
+            p.value != null ? String(p.value) : "",
+            p.detail ?? ""
+          ].filter(Boolean).join(" \xB7 ");
+          if (showValues && p.value != null)
+            marker.bindTooltip(String(p.value), {
+              permanent: true,
+              direction: "center",
+              className: "mie-map-value"
+            });
+          else marker.bindTooltip(text);
+        }
+      }).catch(() => setFailed(true));
+      return () => {
+        cancelled = true;
+        map?.remove();
+      };
+    }, [points, tileUrl, attribution, outlineUrl, sizeBy, showValues]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "point-map",
+        className: cn("w-full", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: mapEl,
+              role: "group",
+              "aria-roledescription": "map",
+              "aria-label": label,
+              className: "bg-muted isolate w-full overflow-hidden rounded-xl",
+              style: { height },
+              children: failed && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground flex h-full items-center justify-center p-4 text-center text-sm", children: label })
+            }
+          ),
+          !hideList && /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs", children: points.map((p) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "flex items-center gap-1.5",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "bg-primary-500 size-2 rounded-full",
+                    style: {
+                      opacity: sizeBy === "value" && p.value != null ? 0.4 + p.value / max * 0.6 : 1
+                    }
+                  }
+                ),
+                p.label,
+                p.value != null && `: ${p.value}`,
+                p.detail && /* @__PURE__ */ jsxs("span", { className: "opacity-70", children: [
+                  " \xB7 ",
+                  p.detail
+                ] })
+              ]
+            },
+            `${p.label}-${p.lat}-${p.lng}`
+          )) })
+        ]
+      }
+    );
+  }
+);
+PointMap.displayName = "PointMap";
+
+export { PointMap };
+//# sourceMappingURL=maps.js.map
+//# sourceMappingURL=maps.js.map

package/dist/maps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PointMap/PointMap.tsx"],"names":[],"mappings":"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","file":"maps.js","sourcesContent":["import * as React from 'react';\nimport type * as L from 'leaflet';\nimport { cn } from '../../utils/cn';\n\nexport interface MapPoint {\n  lat: number;\n  lng: number;\n  label: string;\n  /** Sizes the marker when `sizeBy=\"value\"`, and is shown on it. */\n  value?: number;\n  /** Extra line in the marker's tooltip and the list, e.g. `Austin, TX \\u00b7 Mar 2026`. */\n  detail?: string;\n}\n\nexport interface PointMapProps extends React.HTMLAttributes<HTMLDivElement> {\n  points: MapPoint[];\n  /** Accessible name of the map; the points are also listed as text beneath it. */\n  label: string;\n  center?: [number, number];\n  zoom?: number;\n  minZoom?: number;\n  maxZoom?: number;\n  /** Map height in px. */\n  height?: number;\n  /** Raster tile template. Defaults to OpenStreetMap; use a tile service you are licensed for. */\n  tileUrl?: string;\n  /** Tile attribution, as the tile provider requires. */\n  attribution?: string;\n  /** GeoJSON URL for region outlines drawn over the tiles, e.g. US states. */\n  outlineUrl?: string;\n  /** `value` scales markers by `value`; `none` draws equal dots. */\n  sizeBy?: 'value' | 'none';\n  /** Show each point's value on its marker. */\n  showValues?: boolean;\n  /** Hide the text list of points under the map. */\n  hideList?: boolean;\n}\n\nconst OSM = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';\nconst OSM_ATTRIBUTION = '&copy; OpenStreetMap contributors';\n\n/**\n * Points on a Leaflet map, sized by value, with a text list of the same points\n * for screen readers and print. Needs the optional `leaflet` peer and its CSS\n * (`import 'leaflet/dist/leaflet.css'`). Client-only.\n */\nexport const PointMap = React.forwardRef<HTMLDivElement, PointMapProps>(\n  (\n    {\n      points,\n      label,\n      center = [39.8, -98.6],\n      zoom = 3,\n      minZoom = 2,\n      maxZoom = 10,\n      height = 320,\n      tileUrl = OSM,\n      attribution = OSM_ATTRIBUTION,\n      outlineUrl,\n      sizeBy = 'value',\n      showValues,\n      hideList,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const mapEl = React.useRef<HTMLDivElement>(null);\n    const [failed, setFailed] = React.useState(false);\n    const max = Math.max(1, ...points.map((p) => p.value ?? 0));\n\n    React.useEffect(() => {\n      const el = mapEl.current;\n      if (!el) return;\n      let map: L.Map | undefined;\n      let cancelled = false;\n      import('leaflet')\n        .then(async (mod) => {\n          const leaflet =\n            (mod as unknown as { default?: typeof L }).default ??\n            (mod as typeof L);\n          if (cancelled) return;\n          const styles = getComputedStyle(el);\n          const colour =\n            styles.getPropertyValue('--mieweb-primary-500').trim() || '#27aae1';\n          const line =\n            styles.getPropertyValue('--mieweb-border').trim() || '#94a3b8';\n          map = leaflet.map(el, {\n            center,\n            zoom,\n            minZoom,\n            maxZoom,\n            scrollWheelZoom: false,\n          });\n          leaflet.tileLayer(tileUrl, { attribution }).addTo(map);\n          if (outlineUrl) {\n            const data = await fetch(outlineUrl)\n              .then((r) => (r.ok ? r.json() : null))\n              .catch(() => null);\n            if (data && !cancelled && map)\n              leaflet\n                .geoJSON(data, {\n                  style: { color: line, weight: 0.6, fillOpacity: 0 },\n                })\n                .addTo(map);\n          }\n          if (cancelled || !map) return;\n          for (const p of points) {\n            const radius =\n              sizeBy === 'value' && p.value != null\n                ? 6 + (p.value / max) * 22\n                : 6;\n            const marker = leaflet\n              .circleMarker([p.lat, p.lng], {\n                radius,\n                color: colour,\n                weight: 2,\n                fillColor: colour,\n                fillOpacity: 0.35,\n              })\n              .addTo(map);\n            const text = [\n              p.label,\n              p.value != null ? String(p.value) : '',\n              p.detail ?? '',\n            ]\n              .filter(Boolean)\n              .join(' \\u00b7 ');\n            if (showValues && p.value != null)\n              marker.bindTooltip(String(p.value), {\n                permanent: true,\n                direction: 'center',\n                className: 'mie-map-value',\n              });\n            else marker.bindTooltip(text);\n          }\n        })\n        .catch(() => setFailed(true));\n      return () => {\n        cancelled = true;\n        map?.remove();\n      };\n      // Rebuild when the data changes; the view props only seed the map.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [points, tileUrl, attribution, outlineUrl, sizeBy, showValues]);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"point-map\"\n        className={cn('w-full', className)}\n        {...rest}\n      >\n        <div\n          ref={mapEl}\n          role=\"group\"\n          aria-roledescription=\"map\"\n          aria-label={label}\n          className=\"bg-muted isolate w-full overflow-hidden rounded-xl\"\n          style={{ height }}\n        >\n          {failed && (\n            <p className=\"text-muted-foreground flex h-full items-center justify-center p-4 text-center text-sm\">\n              {label}\n            </p>\n          )}\n        </div>\n        {!hideList && (\n          <ul className=\"mt-3 flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs\">\n            {points.map((p) => (\n              <li\n                key={`${p.label}-${p.lat}-${p.lng}`}\n                className=\"flex items-center gap-1.5\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  className=\"bg-primary-500 size-2 rounded-full\"\n                  style={{\n                    opacity:\n                      sizeBy === 'value' && p.value != null\n                        ? 0.4 + (p.value / max) * 0.6\n                        : 1,\n                  }}\n                />\n                {p.label}\n                {p.value != null && `: ${p.value}`}\n                {p.detail && <span className=\"opacity-70\"> · {p.detail}</span>}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n    );\n  }\n);\nPointMap.displayName = 'PointMap';\n"]}

package/dist/motion.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkNV2CWBI2_cjs = require('./chunk-NV2CWBI2.cjs');
+var chunkIEY3ZJIT_cjs = require('./chunk-IEY3ZJIT.cjs');
 require('./chunk-S5RVSXDV.cjs');
 require('./chunk-EUAMEVVI.cjs');
 var React = require('react');
@@ -46,7 +46,7 @@ function MotionProvider({
       Nav: react.m.nav,
       Span: react.m.span,
       Presence,
-      ...chunkNV2CWBI2_cjs.createPresetPropBuilders()
+      ...chunkIEY3ZJIT_cjs.createPresetPropBuilders()
     }),
     [disabled]
   );
@@ -62,26 +62,26 @@ function MotionProvider({
     // A disabled provider still supplies the runtime (with `enabled: false`)
     // rather than `null`, so consumers can distinguish "disabled" from "never
     // opted in" — see the `enabled` contract in `runtime.ts`.
-    /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, children: /* @__PURE__ */ jsxRuntime.jsx(react.MotionConfig, { reducedMotion, children: /* @__PURE__ */ jsxRuntime.jsx(chunkNV2CWBI2_cjs.MotionRuntimeContext.Provider, { value: runtime, children }) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, children: /* @__PURE__ */ jsxRuntime.jsx(react.MotionConfig, { reducedMotion, children: /* @__PURE__ */ jsxRuntime.jsx(chunkIEY3ZJIT_cjs.MotionRuntimeContext.Provider, { value: runtime, children }) }) })
   );
 }
 MotionProvider.displayName = "MotionProvider";
 
 Object.defineProperty(exports, "Animated", {
   enumerable: true,
-  get: function () { return chunkNV2CWBI2_cjs.Animated; }
+  get: function () { return chunkIEY3ZJIT_cjs.Animated; }
 });
 Object.defineProperty(exports, "AnimatedPresence", {
   enumerable: true,
-  get: function () { return chunkNV2CWBI2_cjs.AnimatedPresence; }
+  get: function () { return chunkIEY3ZJIT_cjs.AnimatedPresence; }
 });
 Object.defineProperty(exports, "motionPresets", {
   enumerable: true,
-  get: function () { return chunkNV2CWBI2_cjs.motionPresets; }
+  get: function () { return chunkIEY3ZJIT_cjs.motionPresets; }
 });
 Object.defineProperty(exports, "useMotionRuntime", {
   enumerable: true,
-  get: function () { return chunkNV2CWBI2_cjs.useMotionRuntime; }
+  get: function () { return chunkIEY3ZJIT_cjs.useMotionRuntime; }
 });
 exports.MotionProvider = MotionProvider;
 //# sourceMappingURL=motion.cjs.map

package/dist/motion.d.cts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-export { A as Animated, a as AnimatedPresence, b as AnimatedProps, M as MotionEdge, c as MotionPreset, d as MotionRuntime, m as motionPresets, u as useMotionRuntime } from './Animated-XmH6k8pZ.cjs';
 
 /**
  * `<MotionProvider>` — the opt-in switch.
@@ -49,4 +48,189 @@ declare namespace MotionProvider {
     var displayName: string;
 }
 
-export { MotionProvider, type MotionProviderProps };
+/**
+ * Motion presets — the shared vocabulary of animations.
+ *
+ * This module is intentionally **free of any `motion` import**. It ships in the
+ * main `@mieweb/ui` entry so components can describe *what* they animate
+ * without pulling in a runtime to actually do it. The `@mieweb/ui/motion` entry
+ * is what turns these descriptions into real animations.
+ *
+ * Every preset is expressed as an open/closed variant pair so the same
+ * definition serves both usages:
+ *
+ * - **toggle** — the element stays mounted and animates between `open` and
+ *   `closed` (a drawer sliding in and out).
+ * - **presence** — the element mounts and unmounts, entering on `open` and
+ *   exiting back to `closed` (a modal).
+ */
+/** Named animation recipes shared by components. */
+type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel' | 'menu' | 'collapse' | 'toast' | 'fade' | 'pop';
+/**
+ * A physical edge, already resolved from any logical (`start`/`end`) position
+ * and from writing direction.
+ *
+ * Presets that move an element along an axis take one of these as `custom`.
+ * Resolution is the component's job, not the preset's: only the component knows
+ * whether its `end` means right or left, and — for anything anchored — which
+ * side it actually landed on after flipping away from a viewport edge.
+ */
+type MotionEdge = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * A variant value. Either a plain target object or a function of the element's
+ * `custom` value — the latter lets a single preset adapt to context, e.g. a
+ * drawer flipping its off-canvas direction in RTL.
+ */
+type MotionVariant = Record<string, unknown> | ((custom: unknown) => Record<string, unknown>);
+interface MotionPresetDefinition {
+    variants: {
+        open: MotionVariant;
+        closed: MotionVariant;
+    };
+    transition: Record<string, unknown>;
+}
+/**
+ * `custom` contract per preset:
+ *
+ * - `drawerStart` — `boolean`, whether the document direction is RTL.
+ * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical
+ *   position and writing direction by the component.
+ * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —
+ *   unused.
+ */
+declare const motionPresets: Record<MotionPreset, MotionPresetDefinition>;
+
+/**
+ * Motion runtime — the seam between components and an optional animation library.
+ *
+ * Components in the main entry never import `motion`. They ask this module for
+ * a runtime; if an app has opted in by rendering `<MotionProvider>` from
+ * `@mieweb/ui/motion`, they get one and animate. If not, `useMotionRuntime()`
+ * returns `null` and they fall back to their existing CSS transitions. That is
+ * what keeps `motion` out of the bundle of every app that hasn't asked for it —
+ * the opt-in is resolved in the *module graph*, not by a prop.
+ *
+ * Like `presets`, this module must stay free of any `motion` import.
+ */
+
+interface MotionPresenceProps {
+    children?: React.ReactNode;
+    /** Suppress the initial mount animation. */
+    initial?: boolean;
+    /**
+     * Fires once every exiting child has finished and been removed.
+     *
+     * Needed by anything that guards the DOM while it is open — a focus trap, a
+     * scroll lock — because those guards must outlive `open` for as long as the
+     * subtree is still on screen. Never fires when no runtime is active, since
+     * there is no exit to wait for.
+     */
+    onExitComplete?: () => void;
+}
+/**
+ * The capabilities a motion library must supply. Deliberately small: element
+ * factories, a presence wrapper, and prop builders. Components depend on this
+ * interface, never on a concrete library, so swapping or dropping the library
+ * stays a one-file change.
+ */
+interface MotionRuntime {
+    /**
+     * Whether animations should actually run.
+     *
+     * A disabled provider still supplies a runtime rather than `null` so that
+     * consumers can tell "disabled" apart from "never opted in": `Modal` uses it
+     * to decide whether an exit animation will ever report completion, and
+     * `AnimatedPresence` keeps its wrapper element stable across the flip.
+     * `Animated` itself renders the plain fallback tag whenever this is false —
+     * withholding animation props from a mounted motion component corrupts
+     * `toggle`-mode elements, so the swap (and the remount it implies) is the
+     * correct behaviour. See the render branches in `Animated`.
+     */
+    enabled: boolean;
+    /** Animated `div`. */
+    Div: React.ElementType;
+    /** Animated `nav`. */
+    Nav: React.ElementType;
+    /** Animated `span`, for inline content that must not become a block. */
+    Span: React.ElementType;
+    /** Enables exit animations for conditionally rendered children. */
+    Presence: React.ComponentType<MotionPresenceProps>;
+    /**
+     * Props for an element that stays mounted and animates between states.
+     * Skips the initial animation so a closed drawer doesn't slide out on load.
+     */
+    toggle: (preset: MotionPreset, open: boolean, custom?: unknown) => Record<string, unknown>;
+    /** Props for an element that mounts and unmounts inside `Presence`. */
+    presence: (preset: MotionPreset, custom?: unknown) => Record<string, unknown>;
+}
+/**
+ * The active motion runtime, or `null` when the app has not opted in.
+ *
+ * Components must treat `null` as the normal case and keep a CSS path that
+ * looks good on its own — motion is an enhancement, never a requirement.
+ */
+declare function useMotionRuntime(): MotionRuntime | null;
+
+/**
+ * `Animated` / `AnimatedPresence` — the ergonomic layer components use.
+ *
+ * These exist so an individual component never has to branch on whether motion
+ * is available. It declares the preset it wants and the CSS classes that stand
+ * in when motion is absent; this module picks the element to render.
+ *
+ * Adding motion to a further component should be a matter of swapping its
+ * root `<div>` for an `<Animated>` and naming a preset — no new imports, no
+ * new dependency, and no behavior change for apps that have not opted in.
+ */
+
+interface AnimatedProps extends React.HTMLAttributes<HTMLElement> {
+    /** Intrinsic element to render. */
+    as?: 'div' | 'nav' | 'span';
+    /** Which shared animation recipe to use. */
+    preset: MotionPreset;
+    /**
+     * - `toggle` — element stays mounted and animates between open and closed.
+     * - `presence` — element mounts and unmounts; wrap it in `<AnimatedPresence>`
+     *   so the exit animation gets a chance to run.
+     */
+    mode: 'toggle' | 'presence';
+    /** Current state. Only read in `toggle` mode. */
+    open?: boolean;
+    /** Per-preset context value — see the `custom` contract in `presets.ts`. */
+    custom?: unknown;
+    /**
+     * Classes applied whenever this element is **not** animating — no provider,
+     * a disabled provider, or `enabled={false}`. This is where a component's
+     * existing CSS transition lives, so the two paths never both try to drive
+     * the same property.
+     */
+    fallbackClassName?: string;
+    /**
+     * Set `false` to stop this element animating even when a runtime is active.
+     *
+     * For states where an animated element would be wrong rather than merely
+     * unnecessary. Motion writes a `transform` to hold an element at its resting
+     * position, and a transformed ancestor becomes the containing block for any
+     * `position: fixed` descendant — so an element that is only sometimes
+     * animated should opt out the rest of the time.
+     *
+     * Flipping this (or the provider's `disabled`) swaps the element back to a
+     * plain tag, which **remounts** it — deliberately. See the note on the
+     * render branches below.
+     */
+    enabled?: boolean;
+}
+declare const Animated: React.ForwardRefExoticComponent<AnimatedProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Keeps unmounting children on screen long enough to animate out.
+ *
+ * Without a runtime this is a pass-through, so children disappear immediately —
+ * which is exactly what they do today. Children rendered conditionally inside
+ * it need a stable `key`.
+ */
+declare function AnimatedPresence({ children, initial, onExitComplete, }: MotionPresenceProps): React.JSX.Element;
+declare namespace AnimatedPresence {
+    var displayName: string;
+}
+
+export { Animated, AnimatedPresence, type AnimatedProps, type MotionEdge, type MotionPreset, MotionProvider, type MotionProviderProps, type MotionRuntime, motionPresets, useMotionRuntime };

package/dist/motion.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-export { A as Animated, a as AnimatedPresence, b as AnimatedProps, M as MotionEdge, c as MotionPreset, d as MotionRuntime, m as motionPresets, u as useMotionRuntime } from './Animated-XmH6k8pZ.js';
 
 /**
  * `<MotionProvider>` — the opt-in switch.
@@ -49,4 +48,189 @@ declare namespace MotionProvider {
     var displayName: string;
 }
 
-export { MotionProvider, type MotionProviderProps };
+/**
+ * Motion presets — the shared vocabulary of animations.
+ *
+ * This module is intentionally **free of any `motion` import**. It ships in the
+ * main `@mieweb/ui` entry so components can describe *what* they animate
+ * without pulling in a runtime to actually do it. The `@mieweb/ui/motion` entry
+ * is what turns these descriptions into real animations.
+ *
+ * Every preset is expressed as an open/closed variant pair so the same
+ * definition serves both usages:
+ *
+ * - **toggle** — the element stays mounted and animates between `open` and
+ *   `closed` (a drawer sliding in and out).
+ * - **presence** — the element mounts and unmounts, entering on `open` and
+ *   exiting back to `closed` (a modal).
+ */
+/** Named animation recipes shared by components. */
+type MotionPreset = 'drawerStart' | 'overlay' | 'modalContent' | 'sidebarLabel' | 'menu' | 'collapse' | 'toast' | 'fade' | 'pop';
+/**
+ * A physical edge, already resolved from any logical (`start`/`end`) position
+ * and from writing direction.
+ *
+ * Presets that move an element along an axis take one of these as `custom`.
+ * Resolution is the component's job, not the preset's: only the component knows
+ * whether its `end` means right or left, and — for anything anchored — which
+ * side it actually landed on after flipping away from a viewport edge.
+ */
+type MotionEdge = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * A variant value. Either a plain target object or a function of the element's
+ * `custom` value — the latter lets a single preset adapt to context, e.g. a
+ * drawer flipping its off-canvas direction in RTL.
+ */
+type MotionVariant = Record<string, unknown> | ((custom: unknown) => Record<string, unknown>);
+interface MotionPresetDefinition {
+    variants: {
+        open: MotionVariant;
+        closed: MotionVariant;
+    };
+    transition: Record<string, unknown>;
+}
+/**
+ * `custom` contract per preset:
+ *
+ * - `drawerStart` — `boolean`, whether the document direction is RTL.
+ * - `menu`, `toast` — a {@link MotionEdge}, already resolved from logical
+ *   position and writing direction by the component.
+ * - `overlay`, `modalContent`, `sidebarLabel`, `collapse`, `fade`, `pop` —
+ *   unused.
+ */
+declare const motionPresets: Record<MotionPreset, MotionPresetDefinition>;
+
+/**
+ * Motion runtime — the seam between components and an optional animation library.
+ *
+ * Components in the main entry never import `motion`. They ask this module for
+ * a runtime; if an app has opted in by rendering `<MotionProvider>` from
+ * `@mieweb/ui/motion`, they get one and animate. If not, `useMotionRuntime()`
+ * returns `null` and they fall back to their existing CSS transitions. That is
+ * what keeps `motion` out of the bundle of every app that hasn't asked for it —
+ * the opt-in is resolved in the *module graph*, not by a prop.
+ *
+ * Like `presets`, this module must stay free of any `motion` import.
+ */
+
+interface MotionPresenceProps {
+    children?: React.ReactNode;
+    /** Suppress the initial mount animation. */
+    initial?: boolean;
+    /**
+     * Fires once every exiting child has finished and been removed.
+     *
+     * Needed by anything that guards the DOM while it is open — a focus trap, a
+     * scroll lock — because those guards must outlive `open` for as long as the
+     * subtree is still on screen. Never fires when no runtime is active, since
+     * there is no exit to wait for.
+     */
+    onExitComplete?: () => void;
+}
+/**
+ * The capabilities a motion library must supply. Deliberately small: element
+ * factories, a presence wrapper, and prop builders. Components depend on this
+ * interface, never on a concrete library, so swapping or dropping the library
+ * stays a one-file change.
+ */
+interface MotionRuntime {
+    /**
+     * Whether animations should actually run.
+     *
+     * A disabled provider still supplies a runtime rather than `null` so that
+     * consumers can tell "disabled" apart from "never opted in": `Modal` uses it
+     * to decide whether an exit animation will ever report completion, and
+     * `AnimatedPresence` keeps its wrapper element stable across the flip.
+     * `Animated` itself renders the plain fallback tag whenever this is false —
+     * withholding animation props from a mounted motion component corrupts
+     * `toggle`-mode elements, so the swap (and the remount it implies) is the
+     * correct behaviour. See the render branches in `Animated`.
+     */
+    enabled: boolean;
+    /** Animated `div`. */
+    Div: React.ElementType;
+    /** Animated `nav`. */
+    Nav: React.ElementType;
+    /** Animated `span`, for inline content that must not become a block. */
+    Span: React.ElementType;
+    /** Enables exit animations for conditionally rendered children. */
+    Presence: React.ComponentType<MotionPresenceProps>;
+    /**
+     * Props for an element that stays mounted and animates between states.
+     * Skips the initial animation so a closed drawer doesn't slide out on load.
+     */
+    toggle: (preset: MotionPreset, open: boolean, custom?: unknown) => Record<string, unknown>;
+    /** Props for an element that mounts and unmounts inside `Presence`. */
+    presence: (preset: MotionPreset, custom?: unknown) => Record<string, unknown>;
+}
+/**
+ * The active motion runtime, or `null` when the app has not opted in.
+ *
+ * Components must treat `null` as the normal case and keep a CSS path that
+ * looks good on its own — motion is an enhancement, never a requirement.
+ */
+declare function useMotionRuntime(): MotionRuntime | null;
+
+/**
+ * `Animated` / `AnimatedPresence` — the ergonomic layer components use.
+ *
+ * These exist so an individual component never has to branch on whether motion
+ * is available. It declares the preset it wants and the CSS classes that stand
+ * in when motion is absent; this module picks the element to render.
+ *
+ * Adding motion to a further component should be a matter of swapping its
+ * root `<div>` for an `<Animated>` and naming a preset — no new imports, no
+ * new dependency, and no behavior change for apps that have not opted in.
+ */
+
+interface AnimatedProps extends React.HTMLAttributes<HTMLElement> {
+    /** Intrinsic element to render. */
+    as?: 'div' | 'nav' | 'span';
+    /** Which shared animation recipe to use. */
+    preset: MotionPreset;
+    /**
+     * - `toggle` — element stays mounted and animates between open and closed.
+     * - `presence` — element mounts and unmounts; wrap it in `<AnimatedPresence>`
+     *   so the exit animation gets a chance to run.
+     */
+    mode: 'toggle' | 'presence';
+    /** Current state. Only read in `toggle` mode. */
+    open?: boolean;
+    /** Per-preset context value — see the `custom` contract in `presets.ts`. */
+    custom?: unknown;
+    /**
+     * Classes applied whenever this element is **not** animating — no provider,
+     * a disabled provider, or `enabled={false}`. This is where a component's
+     * existing CSS transition lives, so the two paths never both try to drive
+     * the same property.
+     */
+    fallbackClassName?: string;
+    /**
+     * Set `false` to stop this element animating even when a runtime is active.
+     *
+     * For states where an animated element would be wrong rather than merely
+     * unnecessary. Motion writes a `transform` to hold an element at its resting
+     * position, and a transformed ancestor becomes the containing block for any
+     * `position: fixed` descendant — so an element that is only sometimes
+     * animated should opt out the rest of the time.
+     *
+     * Flipping this (or the provider's `disabled`) swaps the element back to a
+     * plain tag, which **remounts** it — deliberately. See the note on the
+     * render branches below.
+     */
+    enabled?: boolean;
+}
+declare const Animated: React.ForwardRefExoticComponent<AnimatedProps & React.RefAttributes<HTMLElement>>;
+/**
+ * Keeps unmounting children on screen long enough to animate out.
+ *
+ * Without a runtime this is a pass-through, so children disappear immediately —
+ * which is exactly what they do today. Children rendered conditionally inside
+ * it need a stable `key`.
+ */
+declare function AnimatedPresence({ children, initial, onExitComplete, }: MotionPresenceProps): React.JSX.Element;
+declare namespace AnimatedPresence {
+    var displayName: string;
+}
+
+export { Animated, AnimatedPresence, type AnimatedProps, type MotionEdge, type MotionPreset, MotionProvider, type MotionProviderProps, type MotionRuntime, motionPresets, useMotionRuntime };

package/dist/motion.js

@@ -1,5 +1,5 @@
-import { createPresetPropBuilders, MotionRuntimeContext } from './chunk-XCP454Q6.js';
-export { Animated, AnimatedPresence, motionPresets, useMotionRuntime } from './chunk-XCP454Q6.js';
+import { createPresetPropBuilders, MotionRuntimeContext } from './chunk-F4N67NAF.js';
+export { Animated, AnimatedPresence, motionPresets, useMotionRuntime } from './chunk-F4N67NAF.js';
 import './chunk-TQONQSJO.js';
 import './chunk-PX6F3LHL.js';
 import * as React from 'react';