@almadar/ui 6.59.0 → 6.61.0

package/dist/ssr/index.js

@@ -1,8 +1,8 @@
-import * as React17 from 'react';
-import React17__default, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useSyncExternalStore, useLayoutEffect, useId } from 'react';
+import * as React18 from 'react';
+import React18__default, { createContext, useRef, useCallback, useState, useEffect, useContext, useMemo, useSyncExternalStore, useLayoutEffect, useId } from 'react';
 import { createLogger } from '@almadar/logger';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { LOADING_STATE_MARKER, isSystemUiEvent } from '@almadar/core';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { actionTestId, LOADING_STATE_MARKER, isSystemUiEvent } from '@almadar/core';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X } from 'lucide-react';
 import 'react-router-dom';
@@ -2555,6 +2555,44 @@ 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)})`;
+}
 createLogger("almadar:eventbus");
 createLogger("almadar:eventbus:subscribe");
 var EventBusContext = globalThis.__almadarUiEventBusContext ?? (globalThis.__almadarUiEventBusContext = createContext(null));
@@ -2759,7 +2797,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) {
+  useEffect(() => {
+    const root = ref.current;
+    if (!enabled || root === null) return;
+    return easeHeight(root);
+  }, [ref, enabled]);
+  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",
@@ -2824,7 +3092,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",
@@ -2862,7 +3141,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React17__default.forwardRef(
+var Box = React18__default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2887,6 +3166,13 @@ var Box = React17__default.forwardRef(
     hoverEvent,
     tapReveal = true,
     maxWidth,
+    edgeTop = "none",
+    edgeBottom = "none",
+    edgeColor = "background",
+    edgeFlip = false,
+    texture = false,
+    animateChanges = false,
+    backdrop,
     onClick,
     onMouseEnter,
     onMouseLeave,
@@ -2894,6 +3180,13 @@ var Box = React17__default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
+    const ownRef = useRef(null);
+    useAnimateChanges(ownRef, animateChanges);
+    const setRef = 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;
@@ -2929,12 +3222,25 @@ var Box = React17__default.forwardRef(
       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__ */ jsxs(Fragment, { children: [
+      backdrop != null && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-backdrop", children: backdrop }),
+      texture && /* @__PURE__ */ jsx(Box, { as: "span", "data-band-layer": "", "aria-hidden": true, className: "band-texture" }),
+      edgeTop !== "none" && /* @__PURE__ */ 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__ */ 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__default.createElement(
+    return React18__default.createElement(
       Component,
       {
-        ref,
+        ref: setRef,
         className: cn(
           padding && paddingStyles[padding],
           paddingX && paddingXStyles[paddingX],
@@ -2952,6 +3258,7 @@ var Box = React17__default.forwardRef(
           overflow && overflowStyles[overflow],
           position && positionStyles[position],
           isClickable && "cursor-pointer",
+          isBand && "band",
           className
         ),
         onClick: isClickable ? handleClick : void 0,
@@ -2959,29 +3266,19 @@ var Box = React17__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__ */ jsxs(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",
@@ -3036,7 +3333,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__default.createElement(
+  return React18__default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -3198,7 +3495,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",
@@ -3396,7 +3692,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",
@@ -4509,7 +4804,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__default.createElement(
+  return React18__default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -4721,7 +5016,7 @@ function resolveLucide(name) {
 }
 function makeLucideAdapter(name) {
   const LucideComp = resolveLucide(name);
-  const Adapter = React17__default.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  const Adapter = React18__default.forwardRef((props, ref) => /* @__PURE__ */ jsx(
     LucideComp,
     {
       ref,
@@ -4809,9 +5104,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__default.useRef(null);
+  const svgRef = React18__default.useRef(null);
   const themeStroke = useThemeIconStrokeApplies(svgRef);
-  const RenderedComponent = React17__default.useMemo(() => {
+  const RenderedComponent = React18__default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName) : null;
   }, [directIcon, effectiveName, family]);
@@ -4953,13 +5248,13 @@ function AtlasImage({
   "aria-hidden": ariaHidden,
   ...rest
 }) {
-  const [, bump] = React17.useReducer((x) => x + 1, 0);
-  const canvasRef = React17.useRef(null);
+  const [, bump] = React18.useReducer((x) => x + 1, 0);
+  const canvasRef = React18.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.useEffect(() => {
+  React18.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !img || !rect) return;
     canvas.width = rect.sw;
@@ -5125,7 +5420,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React17__default.isValidElement(value)) {
+  if (React18__default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -5134,7 +5429,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React17__default.forwardRef(
+var Button = React18__default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -5161,7 +5456,7 @@ var Button = React17__default.forwardRef(
     const navStack = useNavStack();
     const { pending, activate } = usePendingAction();
     const busy = isLoading || pending;
-    const [focused, setFocused] = React17__default.useState(false);
+    const [focused, setFocused] = React18__default.useState(false);
     const inert = Boolean(disabled) || busy;
     const emitAction = () => {
       if (!action) return;
@@ -5203,7 +5498,7 @@ var Button = React17__default.forwardRef(
       disabled && focused && "opacity-50 cursor-not-allowed",
       className
     );
-    const testId = dataTestId ?? (action ? `action-${action}` : void 0);
+    const testId = dataTestId ?? (action ? actionTestId(action) : void 0);
     const content = /* @__PURE__ */ jsxs(Fragment, { children: [
       busy && /* @__PURE__ */ jsx("span", { className: "almadar-busy-indicator absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Loader2, { className: "h-icon-default w-icon-default animate-spin" }) }),
       /* @__PURE__ */ jsxs("span", { className: cn("inline-flex flex-1 min-w-0 items-center [justify-content:inherit] gap-2", busy && "almadar-busy-content"), children: [
@@ -5219,6 +5514,8 @@ var Button = React17__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();
@@ -5299,7 +5596,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React17__default.forwardRef(
+var Badge = React18__default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, onClick, ...props }, ref) => {
     const { t } = useTranslate();
     const iconSizes = {
@@ -5363,12 +5660,12 @@ var Badge = React17__default.forwardRef(
   }
 );
 Badge.displayName = "Badge";
-var SurfaceContext = React17__default.createContext(false);
+var SurfaceContext = React18__default.createContext(false);
 function SurfaceBoundary({ children }) {
   return /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: true, children });
 }
 function useContentSurface(surface = "auto") {
-  const onSurface = React17__default.useContext(SurfaceContext);
+  const onSurface = React18__default.useContext(SurfaceContext);
   const paints = surface === "auto" && !onSurface;
   return {
     className: paints ? "surface-content" : void 0,
@@ -5381,7 +5678,7 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React17__default.forwardRef(
+var Spinner = React18__default.forwardRef(
   ({ className, size = "md", overlay, ...props }, ref) => {
     const { t } = useTranslate();
     if (overlay) {
@@ -5466,7 +5763,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__default.forwardRef(
+var Card = React18__default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -5516,9 +5813,9 @@ var Card = React17__default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React17__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React18__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React17__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React18__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -5531,11 +5828,11 @@ var CardTitle = React17__default.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React17__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React18__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React17__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React18__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -5632,7 +5929,7 @@ var Center = ({
   ...rest
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  return React17__default.createElement(Component, {
+  return React18__default.createElement(Component, {
     ...domPassthrough(rest),
     className: cn(
       inline ? "inline-flex" : "flex",
@@ -5739,8 +6036,8 @@ var Avatar = ({
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [imgFailed, setImgFailed] = React17__default.useState(false);
-  React17__default.useEffect(() => {
+  const [imgFailed, setImgFailed] = React18__default.useState(false);
+  React18__default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5858,6 +6155,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,
@@ -5866,6 +6170,10 @@ var Image2 = ({
   rounded = "md",
   bordered = false,
   loading = "lazy",
+  position = "center",
+  srcSet,
+  sizes,
+  priority = false,
   className,
   ...rest
 }) => {
@@ -5874,14 +6182,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",
@@ -6097,7 +6409,7 @@ var Container = ({
   ...rest
 }) => {
   const resolvedSize = maxWidth ?? size ?? "lg";
-  return React17__default.createElement(
+  return React18__default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -6208,10 +6520,10 @@ function ListSkeleton({ rows = 5, className }) {
   ] }, i)) });
 }
 function GridSkeleton({ rows = 6, className }) {
-  return /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "260px", gap: "md", className, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(CardSkeleton, {}, i)) });
+  return /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "256px", gap: "md", className, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(CardSkeleton, {}, i)) });
 }
 function StatsSkeleton({ columns = 4, className }) {
-  return /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "180px", gap: "md", className, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-4 border border-border rounded-container", children: [
+  return /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "176px", gap: "md", className, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxs(VStack, { gap: "sm", className: "p-4 border border-border rounded-container", children: [
     /* @__PURE__ */ jsx(SkeletonLine, { className: "w-1/2 h-3" }),
     /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-7 w-2/3" })
   ] }, i)) });
@@ -6233,7 +6545,7 @@ function DetailSkeleton({ rows = 6, className }) {
       /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-20 flex-1" }),
       /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-20 flex-1" })
     ] }),
-    /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "200px", maxCols: 3, gap: "md", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(SimpleGrid, { minChildWidth: "192px", maxCols: 3, gap: "md", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
       /* @__PURE__ */ jsx(SkeletonLine, { className: "w-1/3 h-3" }),
       /* @__PURE__ */ jsx(SkeletonBlock, { className: "h-5 w-2/3" })
     ] }, i)) }),
@@ -6250,8 +6562,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__ */ jsx(
     Box,
     {
@@ -6259,10 +6571,10 @@ function Skeleton({
       role: "status",
       "aria-busy": "true",
       "aria-label": rest["aria-label"] ?? t("common.loading"),
-      "data-skeleton": shape.variant,
+      "data-skeleton": shape2.variant,
       ...{ [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)
     }
   );
 }
@@ -6609,6 +6921,35 @@ var AnimatedCounter = ({
   ] });
 };
 AnimatedCounter.displayName = "AnimatedCounter";
+function useMediaQuery(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      if (!hasMatchMedia()) return () => void 0;
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return 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 = 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)" },
@@ -6629,7 +6970,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React17__default.forwardRef(
+var AnimatedReveal = React18__default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -6637,6 +6978,9 @@ var AnimatedReveal = React17__default.forwardRef(
     delay = 0,
     threshold = 0.15,
     once = true,
+    revealEvent,
+    enterEvent,
+    leaveEvent,
     animate: manualAnimate,
     easing = "cubic-bezier(0.16, 1, 0.3, 1)",
     children,
@@ -6645,8 +6989,12 @@ var AnimatedReveal = React17__default.forwardRef(
     ...props
   }, forwardedRef) => {
     const [isAnimated, setIsAnimated] = useState(false);
+    const reducedMotion = usePrefersReducedMotion();
+    const eventBus = useEventBus();
+    const revealEmitted = useRef(false);
     const internalRef = useRef(null);
     const hasAnimated = useRef(false);
+    const inView = useRef(false);
     const setRef = useCallback(
       (node) => {
         internalRef.current = node;
@@ -6661,19 +7009,42 @@ var AnimatedReveal = React17__default.forwardRef(
       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]);
+    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) {
@@ -6686,17 +7057,19 @@ var AnimatedReveal = React17__default.forwardRef(
         setIsAnimated(manualAnimate);
       }
     }, [trigger, manualAnimate]);
-    const active = isAnimated;
+    const active = isAnimated || reducedMotion;
     const currentStyle = active ? animatedStyles[animation] : initialStyles[animation];
     return /* @__PURE__ */ 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
@@ -6782,7 +7155,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React17__default.forwardRef(
+var AnimatedGraphic = React18__default.forwardRef(
   ({
     src,
     svgContent,
@@ -6805,7 +7178,7 @@ var AnimatedGraphic = React17__default.forwardRef(
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
     const prevAnimateRef = useRef(animate);
-    const setRef = React17__default.useCallback(
+    const setRef = React18__default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);