@almadar/ui 6.59.0 → 6.61.0

package/dist/ssr/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React17 = require('react');
+var React18 = require('react');
 var logger = require('@almadar/logger');
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@almadar/core');
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
+var React18__namespace = /*#__PURE__*/_interopNamespace(React18);
 var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
 
 // node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -2576,13 +2576,51 @@ var twMerge = extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// lib/bandShapes.ts
+var shape = (d) => `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'><path d='${d}'/></svg>")`;
+var BAND_SHAPES = {
+  wave: shape("M0 60 C240 100 480 100 720 60 C960 20 1200 20 1440 60 V100 H0 Z"),
+  arc: shape("M0 100 Q720 0 1440 100 Z"),
+  tilt: shape("M0 100 L1440 0 V100 Z"),
+  step: shape("M0 100 V75 H360 V50 H720 V25 H1080 V0 H1440 V100 Z"),
+  scallop: shape("M0 100 V40 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 a60 40 0 0 1 120 0 V100 Z")
+};
+var BAND_EDGE_HEIGHT = "clamp(24px, 6vw, 96px)";
+var BAND_ACCENT_FALLBACK = "linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 12%, var(--color-background)), var(--color-background))";
+var BAND_EDGE_FILL = {
+  background: "var(--surface-page-image, none), var(--color-background)",
+  muted: "var(--color-muted)",
+  surface: "var(--color-card)",
+  gradient: `var(--surface-accent-image, ${BAND_ACCENT_FALLBACK}), var(--color-muted)`,
+  inverse: "var(--color-foreground)"
+};
+function bandEdgeMask(edge) {
+  return edge === "curve" ? "var(--surface-edge-mask, none)" : BAND_SHAPES[edge];
+}
+function bandEdgeHeight(edge) {
+  return edge === "curve" ? `var(--surface-edge-height, ${BAND_EDGE_HEIGHT})` : BAND_EDGE_HEIGHT;
+}
+function bandEdgeLayerStyle(edge, side, flip, color) {
+  const mask = bandEdgeMask(edge);
+  const turn = side === "top" ? flip ? "scaleY(-1)" : "rotate(180deg)" : flip ? "scaleX(-1)" : void 0;
+  const style = { height: bandEdgeHeight(edge), background: BAND_EDGE_FILL[color], maskImage: mask, WebkitMaskImage: mask, transform: turn };
+  if (color === "background") {
+    style.backgroundSize = "var(--surface-page-image-size, auto), auto";
+    style.backgroundAttachment = "fixed";
+  }
+  return style;
+}
+function bandPadding(basePad, edge) {
+  return edge === "none" ? void 0 : `calc(${basePad} + ${bandEdgeHeight(edge)})`;
+}
 logger.createLogger("almadar:eventbus");
 logger.createLogger("almadar:eventbus:subscribe");
-var EventBusContext = globalThis.__almadarUiEventBusContext ?? (globalThis.__almadarUiEventBusContext = React17.createContext(null));
+var EventBusContext = globalThis.__almadarUiEventBusContext ?? (globalThis.__almadarUiEventBusContext = React18.createContext(null));
 var EMPTY_CHAIN = Object.freeze([]);
-var TraitScopeContext = React17.createContext(null);
+var TraitScopeContext = React18.createContext(null);
 function useTraitScopeChain() {
-  const chain = React17.useContext(TraitScopeContext);
+  const chain = React18.useContext(TraitScopeContext);
   return chain ?? EMPTY_CHAIN;
 }
 var log = logger.createLogger("almadar:eventbus");
@@ -2659,10 +2697,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React17.useContext(EventBusContext);
+  const context = React18.useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const chain = useTraitScopeChain();
-  return React17.useMemo(() => {
+  return React18.useMemo(() => {
     if (chain.length === 0) {
       return {
         ...baseBus,
@@ -2708,24 +2746,24 @@ function useEventBus() {
 }
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React17.useState(false);
-  const onRevealRef = React17.useRef(onReveal);
-  const onDismissRef = React17.useRef(onDismiss);
+  const [revealed, setRevealed] = React18.useState(false);
+  const onRevealRef = React18.useRef(onReveal);
+  const onDismissRef = React18.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React17.useCallback(() => {
+  const reveal = React18.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React17.useCallback(() => {
+  const dismiss = React18.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React17.useCallback(
+  const onPointerDown = React18.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -2733,7 +2771,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -2750,10 +2788,10 @@ function useTapReveal(options = {}) {
   return { revealed, triggerProps: { onPointerDown }, reveal, dismiss };
 }
 logger.createLogger("almadar:ui:theme");
-React17.createContext(void 0);
-var ThemeScopeContext = React17.createContext({});
+React18.createContext(void 0);
+var ThemeScopeContext = React18.createContext({});
 function useThemeScope() {
-  return React17.useContext(ThemeScopeContext);
+  return React18.useContext(ThemeScopeContext);
 }
 
 // lib/pressable.ts
@@ -2780,7 +2818,237 @@ function pressableProps(onPress, options = {}) {
   };
 }
 
-// components/core/atoms/Box.tsx
+// lib/domPassthrough.ts
+var GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set(["role", "id", "lang", "dir", "tabIndex"]);
+function domPassthrough(props) {
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (key.startsWith("aria-") || key.startsWith("data-") || GLOBAL_ATTRIBUTES.has(key)) {
+      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
+        out[key] = value;
+      }
+    }
+  }
+  return out;
+}
+var motionEnabledCache = null;
+function isMotionEnabled() {
+  if (typeof document === "undefined") return true;
+  if (motionEnabledCache !== null) return motionEnabledCache;
+  const v = getComputedStyle(document.documentElement).getPropertyValue("--motion-enable").trim().toLowerCase();
+  motionEnabledCache = v !== "off";
+  return motionEnabledCache;
+}
+
+// lib/motion-tokens.ts
+function cssTimeMs(value) {
+  const v = value.trim();
+  if (v.endsWith("ms")) return Number.parseFloat(v);
+  if (v.endsWith("s")) return Number.parseFloat(v) * 1e3;
+  return Number.NaN;
+}
+function tokenAt(el, name) {
+  for (let at = el; at !== null; at = at.parentElement) {
+    const value = getComputedStyle(at).getPropertyValue(name).trim();
+    if (value !== "") return value;
+  }
+  return "";
+}
+function motionTiming(durationToken, easingToken, scope) {
+  const duration = cssTimeMs(tokenAt(scope ?? document.documentElement, durationToken));
+  const easing = tokenAt(scope ?? document.documentElement, easingToken);
+  const reduced = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (!isMotionEnabled() || reduced || !Number.isFinite(duration) || easing === "") return void 0;
+  return { duration, easing };
+}
+function layoutScale(el) {
+  const layoutWidth = el instanceof HTMLElement ? el.offsetWidth : 0;
+  const screenWidth = el.getBoundingClientRect().width;
+  return layoutWidth > 0 && screenWidth > 0 ? screenWidth / layoutWidth : 1;
+}
+
+// lib/animate-changes.ts
+function ownMotion(el) {
+  return el.closest("[data-item-move]") !== null || /\balmadar-enter-/.test(el.getAttribute("class") ?? "");
+}
+function boxesOf(el) {
+  return getComputedStyle(el).display === "contents" ? boxedChildren(el) : [el];
+}
+function boxedChildren(el) {
+  return [...el.children].flatMap(boxesOf);
+}
+var GHOST_STYLE = ["font", "letterSpacing", "lineHeight", "color", "textAlign", "whiteSpace", "textTransform"];
+function roll(el, oldText, timing) {
+  const box = el.getBoundingClientRect();
+  const scale2 = layoutScale(el);
+  const computed = getComputedStyle(el);
+  const holder = document.createElement("span");
+  holder.setAttribute("aria-hidden", "true");
+  Object.assign(holder.style, {
+    position: "fixed",
+    left: `${box.left}px`,
+    top: `${box.top}px`,
+    width: `${box.width / scale2}px`,
+    height: `${box.height / scale2}px`,
+    transform: scale2 === 1 ? "" : `scale(${scale2})`,
+    transformOrigin: "top left",
+    pointerEvents: "none",
+    zIndex: "2147483647"
+  });
+  const ghost = document.createElement("span");
+  ghost.setAttribute("data-change-ghost", "");
+  ghost.setAttribute("aria-hidden", "true");
+  ghost.textContent = oldText;
+  for (const prop of GHOST_STYLE) ghost.style[prop] = computed[prop];
+  Object.assign(ghost.style, { display: "block", width: "100%", height: "100%", overflow: "visible" });
+  holder.appendChild(ghost);
+  document.body.appendChild(holder);
+  const out = ghost.animate(
+    [{ opacity: 1, transform: "none" }, { opacity: 0, transform: "translateY(-40%)", offset: 0.5 }, { opacity: 0, transform: "translateY(-40%)" }],
+    timing
+  );
+  if (out === void 0) holder.remove();
+  else {
+    out.addEventListener("finish", () => holder.remove());
+    out.addEventListener("cancel", () => holder.remove());
+  }
+  el.animate(
+    [{ opacity: 0, transform: "translateY(40%)" }, { opacity: 0, transform: "translateY(40%)", offset: 0.4 }, { opacity: 1, transform: "none" }],
+    timing
+  );
+}
+var textOnly = (el) => el instanceof HTMLElement && el.childNodes.length > 0 && [...el.childNodes].every((n) => n.nodeType === Node.TEXT_NODE);
+function settle(root, added, changed) {
+  const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+  if (timing === void 0) return;
+  for (const el of added) {
+    if (ownMotion(el) || el.parentElement !== null && [...added].some((other) => other !== el && other.contains(el))) continue;
+    for (const box of boxesOf(el)) {
+      if (ownMotion(box)) continue;
+      box.animate([{ opacity: 0, transform: "translateY(6px)" }, { opacity: 1, transform: "none" }], timing);
+    }
+  }
+  for (const [el, oldText] of changed) {
+    if (ownMotion(el) || [...added].some((a) => a.contains(el))) continue;
+    if (oldText !== void 0 && oldText !== el.textContent && textOnly(el)) roll(el, oldText, timing);
+    else el.animate([{ opacity: 0.25 }, { opacity: 1 }], timing);
+  }
+}
+function blocks(root) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const wrapper of root.querySelectorAll("[data-pattern]")) {
+    for (const box of boxesOf(wrapper)) if (!ownMotion(box)) seen.add(box);
+  }
+  return [...seen];
+}
+function glidePushed(root, places) {
+  const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+  const origin = root.getBoundingClientRect();
+  const applied = /* @__PURE__ */ new Map();
+  const present = /* @__PURE__ */ new Set();
+  for (const el of blocks(root)) {
+    present.add(el);
+    if ((el.getAnimations?.() ?? []).length > 0) {
+      places.delete(el);
+      continue;
+    }
+    const box = el.getBoundingClientRect();
+    const now = { x: box.left - origin.left, y: box.top - origin.top };
+    const was = places.get(el);
+    places.set(el, now);
+    if (was === void 0 || timing === void 0) continue;
+    let inherited = { x: 0, y: 0 };
+    for (let up = el.parentElement; up !== null && up !== root; up = up.parentElement) {
+      const a = applied.get(up);
+      if (a !== void 0) {
+        inherited = a;
+        break;
+      }
+    }
+    const dx = was.x - now.x - inherited.x;
+    const dy = was.y - now.y - inherited.y;
+    if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) {
+      if (inherited.x !== 0 || inherited.y !== 0) applied.set(el, inherited);
+      continue;
+    }
+    const scale2 = layoutScale(el);
+    el.animate([{ transform: `translate(${dx / scale2}px, ${dy / scale2}px)` }, { transform: "none" }], { ...timing, composite: "add" });
+    applied.set(el, { x: inherited.x + dx, y: inherited.y + dy });
+  }
+  for (const el of places.keys()) if (!present.has(el)) places.delete(el);
+}
+function easeHeight(root) {
+  if (typeof ResizeObserver === "undefined") return () => void 0;
+  let rest;
+  let glide;
+  const sizes = new ResizeObserver(() => {
+    const scale2 = layoutScale(root);
+    const shown = root.getBoundingClientRect().height / scale2;
+    const gliding = glide !== void 0 && glide.playState === "running";
+    glide?.cancel();
+    glide = void 0;
+    const height = root.getBoundingClientRect().height / scale2;
+    const from = gliding ? shown : rest;
+    rest = height;
+    const timing = motionTiming("--duration-normal", "--easing-emphasized", root);
+    if (from === void 0 || timing === void 0 || Math.abs(from - height) < 1) return;
+    glide = root.animate(
+      [{ height: `${from}px`, overflow: "clip" }, { height: `${height}px`, overflow: "clip" }],
+      timing
+    ) ?? void 0;
+  });
+  let watched = [];
+  const watch = () => {
+    const next = boxedChildren(root);
+    if (next.length === watched.length && next.every((el, i) => el === watched[i])) return;
+    watched = next;
+    sizes.disconnect();
+    for (const el of next) sizes.observe(el);
+  };
+  watch();
+  const children = new MutationObserver(watch);
+  children.observe(root, { childList: true, subtree: true });
+  return () => {
+    children.disconnect();
+    sizes.disconnect();
+  };
+}
+function useAnimateChanges(ref, enabled) {
+  React18.useEffect(() => {
+    const root = ref.current;
+    if (!enabled || root === null) return;
+    return easeHeight(root);
+  }, [ref, enabled]);
+  React18.useEffect(() => {
+    const root = ref.current;
+    if (!enabled || root === null || typeof MutationObserver === "undefined") return;
+    const observer2 = new MutationObserver((records) => {
+      const added = /* @__PURE__ */ new Set();
+      const changed = /* @__PURE__ */ new Map();
+      for (const record of records) {
+        if (record.type === "childList") {
+          for (const node of record.addedNodes) {
+            if (node instanceof Element) added.add(node);
+            else if (node.nodeType === Node.TEXT_NODE && node.parentElement !== null && changed.get(node.parentElement) === void 0) {
+              const removed = [...record.removedNodes].filter((n) => n.nodeType === Node.TEXT_NODE);
+              changed.set(node.parentElement, removed.length > 0 ? removed.map((n) => n.textContent ?? "").join("") : void 0);
+            }
+          }
+        } else if (record.type === "characterData") {
+          const el = record.target.parentElement;
+          if (el === null || changed.get(el) !== void 0) continue;
+          changed.set(el, [...el.childNodes].map((n) => n === record.target ? record.oldValue ?? "" : n.textContent ?? "").join(""));
+        }
+      }
+      glidePushed(root, places);
+      settle(root, added, changed);
+    });
+    const places = /* @__PURE__ */ new Map();
+    glidePushed(root, places);
+    observer2.observe(root, { subtree: true, childList: true, characterData: true, characterDataOldValue: true });
+    return () => observer2.disconnect();
+  }, [ref, enabled]);
+}
 var paddingStyles = {
   none: "p-0",
   xs: "p-1",
@@ -2845,7 +3113,18 @@ var bgStyles = {
   muted: "bg-muted text-foreground",
   accent: "bg-accent text-accent-foreground",
   surface: "bg-card",
-  overlay: "bg-card/80 backdrop-blur-sm"
+  overlay: "bg-card/80 backdrop-blur-sm",
+  gradient: "band-gradient",
+  inverse: "band-inverse"
+};
+var paddingRem = {
+  none: "0rem",
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem",
+  "2xl": "3rem"
 };
 var roundedStyles = {
   none: "rounded-none",
@@ -2883,7 +3162,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React17__namespace.default.forwardRef(
+var Box = React18__namespace.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2908,6 +3187,13 @@ var Box = React17__namespace.default.forwardRef(
     hoverEvent,
     tapReveal = true,
     maxWidth,
+    edgeTop = "none",
+    edgeBottom = "none",
+    edgeColor = "background",
+    edgeFlip = false,
+    texture = false,
+    animateChanges = false,
+    backdrop,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -2915,23 +3201,30 @@ var Box = React17__namespace.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
+    const ownRef = React18.useRef(null);
+    useAnimateChanges(ownRef, animateChanges);
+    const setRef = React18.useCallback((node) => {
+      ownRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref !== null) ref.current = node;
+    }, [ref]);
     const { override: themeOverride } = useThemeScope();
     const declaredTheme = rest["data-theme"];
     const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
-    const handleClick = React17.useCallback((e) => {
+    const handleClick = React18.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React17.useCallback((e) => {
+    const handleMouseEnter = React18.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React17.useCallback((e) => {
+    const handleMouseLeave = React18.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -2939,23 +3232,36 @@ var Box = React17__namespace.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React17.useCallback(() => {
+      onReveal: React18.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React17.useCallback(() => {
+      onDismiss: React18.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React17.useCallback((e) => {
+    const handlePointerDown = React18.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
+    const isBand = backdrop != null || texture || edgeTop !== "none" || edgeBottom !== "none";
+    const padKey = paddingY ?? padding;
+    const bandStyle = {};
+    const padTop = padKey ? bandPadding(paddingRem[padKey], edgeTop) : void 0;
+    const padBottom = padKey ? bandPadding(paddingRem[padKey], edgeBottom) : void 0;
+    if (padTop) bandStyle.paddingTop = padTop;
+    if (padBottom) bandStyle.paddingBottom = padBottom;
+    const bandLayers = isBand ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      backdrop != null && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-backdrop", children: backdrop }),
+      texture && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-texture" }),
+      edgeTop !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-top", style: bandEdgeLayerStyle(edgeTop, "top", edgeFlip, edgeColor) }),
+      edgeBottom !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-edge band-edge-bottom", style: bandEdgeLayerStyle(edgeBottom, "bottom", edgeFlip, edgeColor) })
+    ] }) : null;
     const isClickable = action || onClick;
     const actionControl = action && rest.role === void 0 && rest.tabIndex === void 0 ? pressableProps(handleClick) : {};
-    return React17__namespace.default.createElement(
+    return React18__namespace.default.createElement(
       Component,
       {
-        ref,
+        ref: setRef,
         className: cn(
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
@@ -2973,6 +3279,7 @@ var Box = React17__namespace.default.forwardRef(
           overflow && overflowStyles[overflow],
           position && positionStyles[position],
           isClickable && "cursor-pointer",
+          isBand && "band",
           className
         ),
         onClick: isClickable ? handleClick : void 0,
@@ -2980,29 +3287,19 @@ var Box = React17__namespace.default.forwardRef(
         onMouseEnter: hoverEvent || onMouseEnter ? handleMouseEnter : void 0,
         onMouseLeave: hoverEvent || onMouseLeave ? handleMouseLeave : void 0,
         onPointerDown: hoverEvent && tapReveal || onPointerDown ? handlePointerDown : void 0,
-        style: maxWidth ? { maxWidth, ...rest.style } : rest.style,
+        style: maxWidth || isBand ? { ...maxWidth ? { maxWidth } : {}, ...bandStyle, ...rest.style } : rest.style,
         ...rest,
-        "data-theme": dataTheme
+        "data-theme": dataTheme,
+        "data-motion": animateChanges ? "presentation" : void 0
       },
-      children
+      isBand ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        bandLayers,
+        children
+      ] }) : children
     );
   }
 );
 Box.displayName = "Box";
-
-// lib/domPassthrough.ts
-var GLOBAL_ATTRIBUTES = /* @__PURE__ */ new Set(["role", "id", "lang", "dir", "tabIndex"]);
-function domPassthrough(props) {
-  const out = {};
-  for (const [key, value] of Object.entries(props)) {
-    if (key.startsWith("aria-") || key.startsWith("data-") || GLOBAL_ATTRIBUTES.has(key)) {
-      if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === void 0) {
-        out[key] = value;
-      }
-    }
-  }
-  return out;
-}
 var gapStyles = {
   none: "gap-0",
   xs: "gap-1",
@@ -3057,7 +3354,7 @@ var Stack = ({
   };
   const isHorizontal = direction === "horizontal";
   const directionClass = responsive && isHorizontal ? reverse ? "flex-col-reverse md:flex-row-reverse" : "flex-col md:flex-row" : isHorizontal ? reverse ? "flex-row-reverse" : "flex-row" : reverse ? "flex-col-reverse" : "flex-col";
-  return React17__namespace.default.createElement(
+  return React18__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -3219,7 +3516,6 @@ var en_default = {
   "aria.upvote": "Upvote",
   "aria.downvote": "Downvote",
   "aria.qrScanner": "QR scanner",
-  "aria.mockScanDev": "Mock scan (dev)",
   "aria.openMenu": "Open menu",
   "aria.closeMenu": "Close menu",
   "aria.openSidebar": "Open sidebar",
@@ -3417,7 +3713,6 @@ var en_default = {
   "qrScanner.pauseScanning": "Pause scanning",
   "qrScanner.switchToFrontCamera": "Switch to front camera",
   "qrScanner.switchToRearCamera": "Switch to rear camera",
-  "qrScanner.mockScan": "Mock Scan",
   "docSearch.placeholder": "Search documentation...",
   "stateMachine.loading": "Loading state machine\u2026",
   "stateMachine.noStateMachine": "No state machine to visualize",
@@ -4405,7 +4700,7 @@ var INLINE_TEXT_ATTR = "data-inline-text";
 // hooks/useTranslate.ts
 var { $meta: _meta2, ...coreMessages2 } = en_default;
 var coreLocale2 = coreMessages2;
-var I18nContext = React17.createContext({
+var I18nContext = React18.createContext({
   locale: "en",
   direction: "ltr",
   t: (key, params) => {
@@ -4420,11 +4715,11 @@ var I18nContext = React17.createContext({
 });
 I18nContext.displayName = "I18nContext";
 function useTranslate() {
-  return React17.useContext(I18nContext);
+  return React18.useContext(I18nContext);
 }
 function useFormatContext() {
-  const { t, locale, currency } = React17.useContext(I18nContext);
-  return React17.useMemo(
+  const { t, locale, currency } = React18.useContext(I18nContext);
+  return React18.useMemo(
     () => ({ locale, currency: currency ?? DEFAULT_CURRENCY, booleanLabels: { yes: t("common.yes"), no: t("common.no") } }),
     [t, locale, currency]
   );
@@ -4530,7 +4825,7 @@ var Typography = ({
   if (format !== void 0 && format !== "none" && (typeof body === "string" || typeof body === "number" || body instanceof Date)) {
     body = formatValue(body, format, fmt);
   }
-  return React17__namespace.default.createElement(
+  return React18__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -4584,20 +4879,20 @@ function subscribePending(key, cb) {
     if (set && set.size === 0) keyListeners.delete(key);
   };
 }
-var PendingScopeContext = React17.createContext(null);
+var PendingScopeContext = React18.createContext(null);
 function usePendingAction() {
-  const scope = React17.useContext(PendingScopeContext);
-  const [key, setKey] = React17.useState(null);
-  const pending = React17.useSyncExternalStore(
-    React17.useCallback((cb) => key ? subscribePending(key, cb) : () => {
+  const scope = React18.useContext(PendingScopeContext);
+  const [key, setKey] = React18.useState(null);
+  const pending = React18.useSyncExternalStore(
+    React18.useCallback((cb) => key ? subscribePending(key, cb) : () => {
     }, [key]),
     () => key ? isPending(key) : false,
     () => false
   );
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (key && !pending) setKey(null);
   }, [key, pending]);
-  const activate = React17.useCallback((emit) => {
+  const activate = React18.useCallback((emit) => {
     const k = newPendingKey();
     emit(k);
     if (!isPending(k)) return;
@@ -4692,10 +4987,10 @@ function getThemeVersionSnapshot() {
   return themeVersion;
 }
 function useThemeIconStrokeApplies(ref) {
-  const documentApplies = React17.useSyncExternalStore(subscribeIconFamily, getStrokeAppliesSnapshot, () => true);
-  const version = React17.useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
-  const [scopedApplies, setScopedApplies] = React17.useState(null);
-  React17.useLayoutEffect(() => {
+  const documentApplies = React18.useSyncExternalStore(subscribeIconFamily, getStrokeAppliesSnapshot, () => true);
+  const version = React18.useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
+  const [scopedApplies, setScopedApplies] = React18.useState(null);
+  React18.useLayoutEffect(() => {
     if (!ref.current) return;
     const scoped = scopedIconFamily(ref.current);
     setScopedApplies(scoped === null ? null : familyStrokeApplies(scoped));
@@ -4703,7 +4998,7 @@ function useThemeIconStrokeApplies(ref) {
   return scopedApplies ?? documentApplies;
 }
 function useIconFamily() {
-  return React17.useSyncExternalStore(
+  return React18.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -4742,7 +5037,7 @@ function resolveLucide(name) {
 }
 function makeLucideAdapter(name) {
   const LucideComp = resolveLucide(name);
-  const Adapter = React17__namespace.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  const Adapter = React18__namespace.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     LucideComp,
     {
       ref,
@@ -4830,9 +5125,9 @@ var Icon = ({
   const effectiveName = typeof icon === "string" && icon !== "" ? icon : name;
   const effectiveStrokeWidth = strokeWidth != null && strokeWidth > 0 ? strokeWidth : void 0;
   const family = useIconFamily();
-  const svgRef = React17__namespace.default.useRef(null);
+  const svgRef = React18__namespace.default.useRef(null);
   const themeStroke = useThemeIconStrokeApplies(svgRef);
-  const RenderedComponent = React17__namespace.default.useMemo(() => {
+  const RenderedComponent = React18__namespace.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName) : null;
   }, [directIcon, effectiveName, family]);
@@ -4974,13 +5269,13 @@ function AtlasImage({
   "aria-hidden": ariaHidden,
   ...rest
 }) {
-  const [, bump] = React17__namespace.useReducer((x) => x + 1, 0);
-  const canvasRef = React17__namespace.useRef(null);
+  const [, bump] = React18__namespace.useReducer((x) => x + 1, 0);
+  const canvasRef = React18__namespace.useRef(null);
   const sliced = isAtlasAsset(asset);
   const atlas = sliced ? getAtlas(asset.atlas, bump) : void 0;
   const img = sliced && asset?.url ? getSheetImage(asset.url, bump) : null;
   const rect = sliced && atlas ? subRectFor(atlas, asset.sprite) : null;
-  React17__namespace.useEffect(() => {
+  React18__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !img || !rect) return;
     canvas.width = rect.sw;
@@ -5035,7 +5330,7 @@ function AtlasImage({
 }
 AtlasImage.displayName = "AtlasImage";
 logger.createLogger("almadar:ui:navigation");
-React17.createContext(null);
+React18.createContext(null);
 var INERT_API = {
   entries: [],
   canGoBack: false,
@@ -5045,12 +5340,12 @@ var INERT_API = {
   setCurrentLabel: () => void 0,
   registerNavItems: () => void 0
 };
-var NavStackContext = React17.createContext(INERT_API);
+var NavStackContext = React18.createContext(INERT_API);
 function isInertNavStack(api) {
   return api === INERT_API;
 }
 function useNavStack() {
-  return React17.useContext(NavStackContext);
+  return React18.useContext(NavStackContext);
 }
 
 // lib/followHref.ts
@@ -5146,7 +5441,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React17__namespace.default.isValidElement(value)) {
+  if (React18__namespace.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -5155,7 +5450,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React17__namespace.default.forwardRef(
+var Button = React18__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -5182,7 +5477,7 @@ var Button = React17__namespace.default.forwardRef(
     const navStack = useNavStack();
     const { pending, activate } = usePendingAction();
     const busy = isLoading || pending;
-    const [focused, setFocused] = React17__namespace.default.useState(false);
+    const [focused, setFocused] = React18__namespace.default.useState(false);
     const inert = Boolean(disabled) || busy;
     const emitAction = () => {
       if (!action) return;
@@ -5224,7 +5519,7 @@ var Button = React17__namespace.default.forwardRef(
       disabled && focused && "opacity-50 cursor-not-allowed",
       className
     );
-    const testId = dataTestId ?? (action ? `action-${action}` : void 0);
+    const testId = dataTestId ?? (action ? core.actionTestId(action) : void 0);
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       busy && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "almadar-busy-indicator absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("inline-flex flex-1 min-w-0 items-center [justify-content:inherit] gap-2", busy && "almadar-busy-content"), children: [
@@ -5240,6 +5535,8 @@ var Button = React17__namespace.default.forwardRef(
           return;
         }
         emitAction();
+        onClick?.(e);
+        if (e.defaultPrevented) return;
         if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
         if (!href.startsWith("#") && isInertNavStack(navStack)) return;
         e.preventDefault();
@@ -5320,7 +5617,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React17__namespace.default.forwardRef(
+var Badge = React18__namespace.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, onClick, ...props }, ref) => {
     const { t } = useTranslate();
     const iconSizes = {
@@ -5384,12 +5681,12 @@ var Badge = React17__namespace.default.forwardRef(
   }
 );
 Badge.displayName = "Badge";
-var SurfaceContext = React17__namespace.default.createContext(false);
+var SurfaceContext = React18__namespace.default.createContext(false);
 function SurfaceBoundary({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SurfaceContext.Provider, { value: true, children });
 }
 function useContentSurface(surface = "auto") {
-  const onSurface = React17__namespace.default.useContext(SurfaceContext);
+  const onSurface = React18__namespace.default.useContext(SurfaceContext);
   const paints = surface === "auto" && !onSurface;
   return {
     className: paints ? "surface-content" : void 0,
@@ -5402,7 +5699,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React17__namespace.default.forwardRef(
+var Spinner = React18__namespace.default.forwardRef(
   ({ className, size = "md", overlay, ...props }, ref) => {
     const { t } = useTranslate();
     if (overlay) {
@@ -5487,7 +5784,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React17__namespace.default.forwardRef(
+var Card = React18__namespace.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -5537,9 +5834,9 @@ var Card = React17__namespace.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React17__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React18__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React17__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React18__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -5552,11 +5849,11 @@ var CardTitle = React17__namespace.default.forwardRef(({ className, ...props },
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React17__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React18__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React17__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React18__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -5653,7 +5950,7 @@ var Center = ({
   ...rest
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  return React17__namespace.default.createElement(Component, {
+  return React18__namespace.default.createElement(Component, {
     ...domPassthrough(rest),
     className: cn(
       inline ? "inline-flex" : "flex",
@@ -5760,8 +6057,8 @@ var Avatar = ({
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [imgFailed, setImgFailed] = React17__namespace.default.useState(false);
-  React17__namespace.default.useEffect(() => {
+  const [imgFailed, setImgFailed] = React18__namespace.default.useState(false);
+  React18__namespace.default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5879,6 +6176,13 @@ var roundedClass = {
   "2xl": "rounded-[calc(var(--radius-xl)*1.5)]",
   full: "rounded-full"
 };
+var positionClass = {
+  center: "object-center",
+  top: "object-top",
+  bottom: "object-bottom",
+  left: "object-left",
+  right: "object-right"
+};
 var Image2 = ({
   src,
   alt,
@@ -5887,6 +6191,10 @@ var Image2 = ({
   rounded = "md",
   bordered = false,
   loading = "lazy",
+  position = "center",
+  srcSet,
+  sizes,
+  priority = false,
   className,
   ...rest
 }) => {
@@ -5895,14 +6203,18 @@ var Image2 = ({
     "img",
     {
       src,
+      srcSet,
+      sizes,
+      fetchPriority: priority ? "high" : void 0,
       alt,
       ...domPassthrough(rest),
       role: alt === "" ? "presentation" : rest.role,
-      loading,
+      loading: priority ? "eager" : loading,
       decoding: "async",
       className: cn(
         "block w-full h-auto max-w-full",
         fitClass[fit],
+        positionClass[position],
         aspectClass[aspect],
         roundedClass[rounded],
         bordered && "border border-border",
@@ -6118,7 +6430,7 @@ var Container = ({
   ...rest
 }) => {
   const resolvedSize = maxWidth ?? size ?? "lg";
-  return React17__namespace.default.createElement(
+  return React18__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -6229,10 +6541,10 @@ function ListSkeleton({ rows = 5, className }) {
   ] }, i)) });
 }
 function GridSkeleton({ rows = 6, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SimpleGrid, { minChildWidth: "260px", gap: "md", className, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(CardSkeleton, {}, i)) });
+  return /* @__PURE__ */ jsxRuntime.jsx(SimpleGrid, { minChildWidth: "256px", gap: "md", className, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(CardSkeleton, {}, i)) });
 }
 function StatsSkeleton({ columns = 4, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(SimpleGrid, { minChildWidth: "180px", gap: "md", className, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "p-4 border border-border rounded-container", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(SimpleGrid, { minChildWidth: "176px", gap: "md", className, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "p-4 border border-border rounded-container", children: [
     /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-1/2 h-3" }),
     /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-7 w-2/3" })
   ] }, i)) });
@@ -6254,7 +6566,7 @@ function DetailSkeleton({ rows = 6, className }) {
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-20 flex-1" }),
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-20 flex-1" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(SimpleGrid, { minChildWidth: "200px", maxCols: 3, gap: "md", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SimpleGrid, { minChildWidth: "192px", maxCols: 3, gap: "md", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-1/3 h-3" }),
       /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-5 w-2/3" })
     ] }, i)) }),
@@ -6271,8 +6583,8 @@ function Skeleton({
   ...rest
 }) {
   const { t } = useTranslate();
-  const shape = spec !== void 0 ? shapeOfSpec(spec) : { variant, rows, columns, fields };
-  if (shape === null) return null;
+  const shape2 = spec !== void 0 ? shapeOfSpec(spec) : { variant, rows, columns, fields };
+  if (shape2 === null) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
@@ -6280,10 +6592,10 @@ function Skeleton({
       role: "status",
       "aria-busy": "true",
       "aria-label": rest["aria-label"] ?? t("common.loading"),
-      "data-skeleton": shape.variant,
+      "data-skeleton": shape2.variant,
       ...{ [core.LOADING_STATE_MARKER]: "" },
       className: "w-full",
-      children: renderVariant(shape.variant, shape.rows, shape.columns, shape.fields, className)
+      children: renderVariant(shape2.variant, shape2.rows, shape2.columns, shape2.fields, className)
     }
   );
 }
@@ -6421,7 +6733,7 @@ var StatDisplay = ({
   const contentSurface = useContentSurface(surface);
   const eventBus = useEventBus();
   const fmt = useFormatContext();
-  const handleClick = React17.useCallback(() => {
+  const handleClick = React18.useCallback(() => {
     if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { metricLabel: label });
   }, [clickEvent, eventBus, label]);
   const ResolvedIcon = typeof iconProp === "string" ? resolveIcon(iconProp) : typeof iconProp === "function" ? iconProp : null;
@@ -6575,14 +6887,14 @@ var AnimatedCounter = ({
   ...rest
 }) => {
   const fmt = useFormatContext();
-  const ref = React17.useRef(null);
+  const ref = React18.useRef(null);
   const parsed = parseValue(value);
   const target = parsed.num ?? 0;
-  const [visible, setVisible] = React17.useState(() => typeof IntersectionObserver === "undefined");
-  const [display, setDisplay] = React17.useState(() => typeof IntersectionObserver === "undefined" ? target : 0);
-  const shownRef = React17.useRef(display);
-  const frameRef = React17.useRef(null);
-  React17.useEffect(() => {
+  const [visible, setVisible] = React18.useState(() => typeof IntersectionObserver === "undefined");
+  const [display, setDisplay] = React18.useState(() => typeof IntersectionObserver === "undefined" ? target : 0);
+  const shownRef = React18.useRef(display);
+  const frameRef = React18.useRef(null);
+  React18.useEffect(() => {
     if (visible) return;
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") {
@@ -6601,7 +6913,7 @@ var AnimatedCounter = ({
     observer2.observe(el);
     return () => observer2.disconnect();
   }, [visible]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (!visible) return;
     const from = shownRef.current;
     if (from === target || prefersReducedMotion() || typeof requestAnimationFrame === "undefined") {
@@ -6630,6 +6942,35 @@ var AnimatedCounter = ({
   ] });
 };
 AnimatedCounter.displayName = "AnimatedCounter";
+function useMediaQuery(query) {
+  const subscribe = React18.useCallback(
+    (onChange) => {
+      if (!hasMatchMedia()) return () => void 0;
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return React18.useSyncExternalStore(
+    subscribe,
+    () => hasMatchMedia() && window.matchMedia(query).matches,
+    () => false
+  );
+}
+function hasMatchMedia() {
+  return typeof window !== "undefined" && typeof window.matchMedia === "function";
+}
+
+// hooks/usePrefersReducedMotion.ts
+function usePrefersReducedMotion() {
+  return useMediaQuery("(prefers-reduced-motion: reduce)");
+}
+var revealLog = logger.createLogger("almadar:ui:animated-reveal");
+function revealThresholds(threshold) {
+  const steps = Array.from({ length: 20 }, (_, i) => i * threshold / 20);
+  return [...steps, threshold];
+}
 var initialStyles = {
   "fade-up": { opacity: 0, transform: "translateY(24px)" },
   "fade-down": { opacity: 0, transform: "translateY(-24px)" },
@@ -6650,7 +6991,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React17__namespace.default.forwardRef(
+var AnimatedReveal = React18__namespace.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -6658,6 +6999,9 @@ var AnimatedReveal = React17__namespace.default.forwardRef(
     delay = 0,
     threshold = 0.15,
     once = true,
+    revealEvent,
+    enterEvent,
+    leaveEvent,
     animate: manualAnimate,
     easing = "cubic-bezier(0.16, 1, 0.3, 1)",
     children,
@@ -6665,10 +7009,14 @@ var AnimatedReveal = React17__namespace.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React17.useState(false);
-    const internalRef = React17.useRef(null);
-    const hasAnimated = React17.useRef(false);
-    const setRef = React17.useCallback(
+    const [isAnimated, setIsAnimated] = React18.useState(false);
+    const reducedMotion = usePrefersReducedMotion();
+    const eventBus = useEventBus();
+    const revealEmitted = React18.useRef(false);
+    const internalRef = React18.useRef(null);
+    const hasAnimated = React18.useRef(false);
+    const inView = React18.useRef(false);
+    const setRef = React18.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -6676,25 +7024,48 @@ var AnimatedReveal = React17__namespace.default.forwardRef(
       },
       [forwardedRef]
     );
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
       const observer2 = new IntersectionObserver(
         ([entry]) => {
-          if (entry.isIntersecting) {
+          if (entry.isIntersecting !== inView.current) {
+            const event = entry.isIntersecting ? enterEvent : leaveEvent;
+            inView.current = entry.isIntersecting;
+            if (event) eventBus.emit(`UI:${event}`, {});
+          }
+          const seenEnough = entry.isIntersecting && (entry.intersectionRatio >= threshold || entry.rootBounds !== null && entry.intersectionRect.height >= threshold * entry.rootBounds.height);
+          if (seenEnough) {
+            if (revealEvent && !reducedMotion && !revealEmitted.current) {
+              revealEmitted.current = true;
+              revealLog.debug("reveal event", { event: revealEvent });
+              eventBus.emit(`UI:${revealEvent}`, {});
+            }
             if (once && hasAnimated.current) return;
             hasAnimated.current = true;
             setIsAnimated(true);
-          } else if (!once) {
+          } else if (!entry.isIntersecting && !once) {
             setIsAnimated(false);
           }
         },
-        { threshold }
+        { threshold: revealThresholds(threshold) }
+      );
+      observer2.observe(el);
+      return () => observer2.disconnect();
+    }, [trigger, threshold, once, revealEvent, enterEvent, leaveEvent, reducedMotion, eventBus]);
+    React18.useEffect(() => {
+      const el = internalRef.current;
+      if (!el || typeof IntersectionObserver === "undefined") return;
+      const observer2 = new IntersectionObserver(
+        ([entry]) => {
+          el.dataset.onScreen = entry.isIntersecting ? "true" : "false";
+        },
+        { rootMargin: "200px" }
       );
       observer2.observe(el);
       return () => observer2.disconnect();
-    }, [trigger, threshold, once]);
+    }, []);
     const handleMouseEnter = trigger === "hover" ? () => setIsAnimated(true) : void 0;
     const handleMouseLeave = trigger === "hover" ? () => {
       if (!once || !hasAnimated.current) {
@@ -6702,22 +7073,24 @@ var AnimatedReveal = React17__namespace.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
     }, [trigger, manualAnimate]);
-    const active = isAnimated;
+    const active = isAnimated || reducedMotion;
     const currentStyle = active ? animatedStyles[animation] : initialStyles[animation];
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: setRef,
-        className: cn("will-change-[opacity,transform]", className),
+        className: cn(className),
         style: {
           ...currentStyle,
+          // A revealed band is page-sized: keeping the layer hint after the reveal holds a huge GPU layer.
+          willChange: active ? "auto" : "opacity, transform",
           transitionProperty: "opacity, transform",
-          transitionDuration: `${duration}ms`,
+          transitionDuration: reducedMotion ? "0ms" : `${duration}ms`,
           transitionDelay: `${delay}ms`,
           transitionTimingFunction: easing,
           ...style
@@ -6732,9 +7105,9 @@ var AnimatedReveal = React17__namespace.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React17.useState(null);
-  const cache = React17.useRef({});
-  React17.useEffect(() => {
+  const [svg, setSvg] = React18.useState(null);
+  const cache = React18.useRef({});
+  React18.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -6803,7 +7176,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React17__namespace.default.forwardRef(
+var AnimatedGraphic = React18__namespace.default.forwardRef(
   ({
     src,
     svgContent,
@@ -6822,11 +7195,11 @@ var AnimatedGraphic = React17__namespace.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React17.useRef(null);
+    const containerRef = React18.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React17.useRef(animate);
-    const setRef = React17__namespace.default.useCallback(
+    const prevAnimateRef = React18.useRef(animate);
+    const setRef = React18__namespace.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -6834,7 +7207,7 @@ var AnimatedGraphic = React17__namespace.default.forwardRef(
       },
       [ref]
     );
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -6842,7 +7215,7 @@ var AnimatedGraphic = React17__namespace.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -6867,7 +7240,7 @@ var AnimatedGraphic = React17__namespace.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -7669,7 +8042,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React17.useId();
+  const reactId = React18.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale2;
   const stripHeight = 40 * scale2;
@@ -7904,7 +8277,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React17.useId();
+  const id = React18.useId();
   const Variant = VARIANT_MAP2[variant];
   const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];