@almadar/ui 6.51.2 → 6.52.0

package/dist/ssr/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React15 = require('react');
+var React16 = require('react');
 var logger = require('@almadar/logger');
 var jsxRuntime = require('react/jsx-runtime');
 var LucideIcons2 = require('lucide-react');
@@ -25,7 +25,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React15__namespace = /*#__PURE__*/_interopNamespace(React15);
+var React16__namespace = /*#__PURE__*/_interopNamespace(React16);
 var LucideIcons2__namespace = /*#__PURE__*/_interopNamespace(LucideIcons2);
 
 // node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -2578,11 +2578,11 @@ function cn(...inputs) {
 }
 logger.createLogger("almadar:eventbus");
 logger.createLogger("almadar:eventbus:subscribe");
-var EventBusContext = globalThis.__almadarUiEventBusContext ?? (globalThis.__almadarUiEventBusContext = React15.createContext(null));
+var EventBusContext = globalThis.__almadarUiEventBusContext ?? (globalThis.__almadarUiEventBusContext = React16.createContext(null));
 var EMPTY_CHAIN = Object.freeze([]);
-var TraitScopeContext = React15.createContext(null);
+var TraitScopeContext = React16.createContext(null);
 function useTraitScopeChain() {
-  const chain = React15.useContext(TraitScopeContext);
+  const chain = React16.useContext(TraitScopeContext);
   return chain ?? EMPTY_CHAIN;
 }
 var log = logger.createLogger("almadar:eventbus");
@@ -2659,10 +2659,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React15.useContext(EventBusContext);
+  const context = React16.useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const chain = useTraitScopeChain();
-  return React15.useMemo(() => {
+  return React16.useMemo(() => {
     if (chain.length === 0) {
       return {
         ...baseBus,
@@ -2708,24 +2708,24 @@ function useEventBus() {
 }
 function useTapReveal(options = {}) {
   const { onReveal, onDismiss, refs, enabled = true } = options;
-  const [revealed, setRevealed] = React15.useState(false);
-  const onRevealRef = React15.useRef(onReveal);
-  const onDismissRef = React15.useRef(onDismiss);
+  const [revealed, setRevealed] = React16.useState(false);
+  const onRevealRef = React16.useRef(onReveal);
+  const onDismissRef = React16.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React15.useCallback(() => {
+  const reveal = React16.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React15.useCallback(() => {
+  const dismiss = React16.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React15.useCallback(
+  const onPointerDown = React16.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -2733,7 +2733,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!revealed || typeof document === "undefined") return;
     const onDocDown = (ev) => {
       const target = ev.target;
@@ -2750,10 +2750,10 @@ function useTapReveal(options = {}) {
   return { revealed, triggerProps: { onPointerDown }, reveal, dismiss };
 }
 logger.createLogger("almadar:ui:theme");
-React15.createContext(void 0);
-var ThemeScopeContext = React15.createContext({});
+React16.createContext(void 0);
+var ThemeScopeContext = React16.createContext({});
 function useThemeScope() {
-  return React15.useContext(ThemeScopeContext);
+  return React16.useContext(ThemeScopeContext);
 }
 
 // lib/pressable.ts
@@ -2883,7 +2883,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React15__namespace.default.forwardRef(
+var Box = React16__namespace.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2918,20 +2918,20 @@ var Box = React15__namespace.default.forwardRef(
     const { override: themeOverride } = useThemeScope();
     const declaredTheme = rest["data-theme"];
     const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
-    const handleClick = React15.useCallback((e) => {
+    const handleClick = React16.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React15.useCallback((e) => {
+    const handleMouseEnter = React16.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React15.useCallback((e) => {
+    const handleMouseLeave = React16.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -2939,20 +2939,20 @@ var Box = React15__namespace.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React15.useCallback(() => {
+      onReveal: React16.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React15.useCallback(() => {
+      onDismiss: React16.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React15.useCallback((e) => {
+    const handlePointerDown = React16.useCallback((e) => {
       if (hoverEvent && tapReveal) triggerProps.onPointerDown(e);
       onPointerDown?.(e);
     }, [hoverEvent, tapReveal, triggerProps, onPointerDown]);
     const isClickable = action || onClick;
     const actionControl = action && rest.role === void 0 && rest.tabIndex === void 0 ? pressableProps(handleClick) : {};
-    return React15__namespace.default.createElement(
+    return React16__namespace.default.createElement(
       Component,
       {
         ref,
@@ -2991,10 +2991,11 @@ var Box = React15__namespace.default.forwardRef(
 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-") || key === "role" || key === "id") {
+    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;
       }
@@ -3056,7 +3057,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 React15__namespace.default.createElement(
+  return React16__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -4235,7 +4236,37 @@ var en_default = {
   "flowCanvas.presetSize": "{{label}} ({{width}}px)",
   "avl.breadcrumb.transitionNumber": "Transition #{{n}}",
   "orbInspector.pattern": "Pattern",
-  "orbInspector.slotLabel": "slot: {{slot}}"
+  "orbInspector.slotLabel": "slot: {{slot}}",
+  "detailPanel.section.activity": "Activity",
+  "detailPanel.section.lineItems": "Line items",
+  "detailPanel.tab.overview": "Overview",
+  "detailPanel.thread.empty": "No messages yet",
+  "detailPanel.openImage": "Open image",
+  "detailPanel.showImage": "Show image {{index}}",
+  "aria.clearSelection": "Clear selection",
+  "aria.searchOptions": "Search options",
+  "aria.zoomIn": "Zoom in",
+  "aria.zoomOut": "Zoom out",
+  "aria.previousPage": "Previous page",
+  "aria.nextPage": "Next page",
+  "aria.downloadDocument": "Download document",
+  "aria.printDocument": "Print document",
+  "aria.wrapLines": "Wrap lines",
+  "aria.copyCode": "Copy code",
+  "aria.clearInput": "Clear input",
+  "aria.skipToContent": "Skip to content",
+  "aria.mainNavigation": "Main navigation",
+  "aria.carouselSlides": "Slides",
+  "aria.minimap": "Minimap",
+  "aria.canvasScene": "Game scene",
+  "aria.learningCanvas": "Interactive diagram",
+  "aria.scene3d": "3D scene",
+  "aria.graphCanvas": "Graph",
+  "aria.positionedCanvas": "Floor plan",
+  "aria.walkTraitDone": "completed",
+  "aria.walkTraitPending": "pending",
+  "aria.walkGraph": "State graph for {{trait}}: {{from}} to {{to}}",
+  "aria.loading": "Loading"
 };
 
 // lib/format.ts
@@ -4299,7 +4330,7 @@ function formatValue(value, format, fmt = {}) {
 var INLINE_TEXT_ATTR = "data-inline-text";
 var { $meta: _meta2, ...coreMessages2 } = en_default;
 var coreLocale2 = coreMessages2;
-var I18nContext = React15.createContext({
+var I18nContext = React16.createContext({
   locale: "en",
   direction: "ltr",
   t: (key, params) => {
@@ -4313,13 +4344,12 @@ var I18nContext = React15.createContext({
   }
 });
 I18nContext.displayName = "I18nContext";
-I18nContext.Provider;
 function useTranslate() {
-  return React15.useContext(I18nContext);
+  return React16.useContext(I18nContext);
 }
 function useFormatContext() {
-  const { t, locale, currency } = React15.useContext(I18nContext);
-  return React15.useMemo(
+  const { t, locale, currency } = React16.useContext(I18nContext);
+  return React16.useMemo(
     () => ({ locale, currency: currency ?? DEFAULT_CURRENCY, booleanLabels: { yes: t("common.yes"), no: t("common.no") } }),
     [t, locale, currency]
   );
@@ -4425,7 +4455,7 @@ var Typography = ({
   if (format !== void 0 && format !== "none" && (typeof body === "string" || typeof body === "number" || body instanceof Date)) {
     body = formatValue(body, format, fmt);
   }
-  return React15__namespace.default.createElement(
+  return React16__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -4457,6 +4487,50 @@ var Typography = ({
   );
 };
 Typography.displayName = "Typography";
+var counts = /* @__PURE__ */ new Map();
+var keyListeners = /* @__PURE__ */ new Map();
+var seq = 0;
+function newPendingKey() {
+  seq += 1;
+  return `pending-${seq}`;
+}
+function isPending(key) {
+  return (counts.get(key) ?? 0) > 0;
+}
+function subscribePending(key, cb) {
+  let set = keyListeners.get(key);
+  if (!set) {
+    set = /* @__PURE__ */ new Set();
+    keyListeners.set(key, set);
+  }
+  set.add(cb);
+  return () => {
+    set?.delete(cb);
+    if (set && set.size === 0) keyListeners.delete(key);
+  };
+}
+var PendingScopeContext = React16.createContext(null);
+function usePendingAction() {
+  const scope = React16.useContext(PendingScopeContext);
+  const [key, setKey] = React16.useState(null);
+  const pending = React16.useSyncExternalStore(
+    React16.useCallback((cb) => key ? subscribePending(key, cb) : () => {
+    }, [key]),
+    () => key ? isPending(key) : false,
+    () => false
+  );
+  React16.useEffect(() => {
+    if (key && !pending) setKey(null);
+  }, [key, pending]);
+  const activate = React16.useCallback((emit) => {
+    const k = newPendingKey();
+    emit(k);
+    if (!isPending(k)) return;
+    scope?.track(k);
+    setKey(k);
+  }, [scope]);
+  return { pending, activate };
+}
 var DEFAULT_FAMILY = "lucide";
 var VALID_FAMILIES = [DEFAULT_FAMILY];
 function themeIconFamily() {
@@ -4539,16 +4613,16 @@ function getThemeVersionSnapshot() {
   return themeVersion;
 }
 function useThemeIconStrokeApplies(ref) {
-  const documentApplies = React15.useSyncExternalStore(subscribeIconFamily, getStrokeAppliesSnapshot, () => true);
-  const version = React15.useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
-  const [scopedApplies, setScopedApplies] = React15.useState(null);
-  React15.useLayoutEffect(() => {
+  const documentApplies = React16.useSyncExternalStore(subscribeIconFamily, getStrokeAppliesSnapshot, () => true);
+  const version = React16.useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
+  const [scopedApplies, setScopedApplies] = React16.useState(null);
+  React16.useLayoutEffect(() => {
     if (ref.current) setScopedApplies(familyStrokeApplies(scopedIconFamily(ref.current)));
   }, [ref, version]);
   return scopedApplies ?? documentApplies;
 }
 function useIconFamily() {
-  return React15.useSyncExternalStore(
+  return React16.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -4587,7 +4661,7 @@ function resolveLucide(name) {
 }
 function makeLucideAdapter(name) {
   const LucideComp = resolveLucide(name);
-  const Adapter = React15__namespace.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  const Adapter = React16__namespace.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     LucideComp,
     {
       ref,
@@ -4668,15 +4742,16 @@ var Icon = ({
   animation = "none",
   className,
   strokeWidth,
-  style
+  style,
+  ...rest
 }) => {
   const directIcon = typeof icon === "string" ? void 0 : icon;
   const effectiveName = typeof icon === "string" && icon !== "" ? icon : name;
   const effectiveStrokeWidth = strokeWidth != null && strokeWidth > 0 ? strokeWidth : void 0;
   const family = useIconFamily();
-  const svgRef = React15__namespace.default.useRef(null);
+  const svgRef = React16__namespace.default.useRef(null);
   const themeStroke = useThemeIconStrokeApplies(svgRef);
-  const RenderedComponent = React15__namespace.default.useMemo(() => {
+  const RenderedComponent = React16__namespace.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName) : null;
   }, [directIcon, effectiveName, family]);
@@ -4699,7 +4774,8 @@ var Icon = ({
         ref: svgRef,
         className: composedClassName,
         strokeWidth: effectiveStrokeWidth,
-        style: inlineStyle
+        style: inlineStyle,
+        ...domPassthrough(rest)
       }
     );
   }
@@ -4710,7 +4786,8 @@ var Icon = ({
         ref: svgRef,
         className: composedClassName,
         strokeWidth: effectiveStrokeWidth,
-        style: inlineStyle
+        style: inlineStyle,
+        ...domPassthrough(rest)
       }
     );
   }
@@ -4721,7 +4798,8 @@ var Icon = ({
       ref: svgRef,
       className: composedClassName,
       strokeWidth: effectiveStrokeWidth,
-      style: inlineStyle
+      style: inlineStyle,
+      ...domPassthrough(rest)
     }
   );
 };
@@ -4812,15 +4890,16 @@ function AtlasImage({
   alt,
   className,
   style,
-  "aria-hidden": ariaHidden
+  "aria-hidden": ariaHidden,
+  ...rest
 }) {
-  const [, bump] = React15__namespace.useReducer((x) => x + 1, 0);
-  const canvasRef = React15__namespace.useRef(null);
+  const [, bump] = React16__namespace.useReducer((x) => x + 1, 0);
+  const canvasRef = React16__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;
-  React15__namespace.useEffect(() => {
+  React16__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !img || !rect) return;
     canvas.width = rect.sw;
@@ -4853,6 +4932,7 @@ function AtlasImage({
         role: ariaHidden ? void 0 : "img",
         "aria-hidden": ariaHidden,
         "aria-label": ariaHidden ? void 0 : alt ?? asset.name ?? asset.category ?? "",
+        ...domPassthrough(rest),
         className: cn("flex-shrink-0", className),
         style: boxStyle
       }
@@ -4864,6 +4944,7 @@ function AtlasImage({
       src: asset.url,
       alt: alt ?? asset.name ?? asset.category ?? "",
       "aria-hidden": ariaHidden,
+      ...domPassthrough(rest),
       ...typeof w === "number" ? { width: w } : {},
       ...typeof h === "number" ? { height: h } : {},
       className: cn("flex-shrink-0", className),
@@ -4873,21 +4954,22 @@ function AtlasImage({
 }
 AtlasImage.displayName = "AtlasImage";
 logger.createLogger("almadar:ui:navigation");
-React15.createContext(null);
+React16.createContext(null);
 var INERT_API = {
   entries: [],
   canGoBack: false,
   beginNavigate: () => void 0,
   back: () => void 0,
   goTo: () => void 0,
-  setCurrentLabel: () => void 0
+  setCurrentLabel: () => void 0,
+  registerNavItems: () => void 0
 };
-var NavStackContext = React15.createContext(INERT_API);
+var NavStackContext = React16.createContext(INERT_API);
 function isInertNavStack(api) {
   return api === INERT_API;
 }
 function useNavStack() {
-  return React15.useContext(NavStackContext);
+  return React16.useContext(NavStackContext);
 }
 
 // lib/followHref.ts
@@ -4896,7 +4978,9 @@ function isAbsoluteHref(href) {
 }
 function followHref(href, navStack) {
   if (href.startsWith("#")) {
-    document.getElementById(decodeURIComponent(href.slice(1)))?.scrollIntoView({ behavior: "smooth" });
+    const target = document.getElementById(decodeURIComponent(href.slice(1)));
+    target?.scrollIntoView({ behavior: "smooth" });
+    target?.focus({ preventScroll: true });
   } else if (isAbsoluteHref(href) || isInertNavStack(navStack)) {
     window.location.assign(href);
   } else {
@@ -4980,7 +5064,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React15__namespace.default.isValidElement(value)) {
+  if (React16__namespace.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -4989,7 +5073,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React15__namespace.default.forwardRef(
+var Button = React16__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -5007,22 +5091,42 @@ var Button = React15__namespace.default.forwardRef(
     href,
     children,
     onClick,
+    onFocus,
+    onBlur,
     "data-testid": dataTestId,
     ...props
   }, ref) => {
     const eventBus = useEventBus();
     const navStack = useNavStack();
+    const { pending, activate } = usePendingAction();
+    const busy = isLoading || pending;
+    const [focused, setFocused] = React16__namespace.default.useState(false);
+    const inert = Boolean(disabled) || busy;
+    const emitAction = () => {
+      if (!action) return;
+      activate((pendingKey) => eventBus.emit(`UI:${action}`, actionPayload ?? {}, { pendingKey }));
+    };
     const leftIconValue = leftIcon || iconProp;
     const rightIconValue = rightIcon || iconRightProp;
     const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
     const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx(AtlasImage, { asset: iconAsset, size: px, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
     const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
     const handleClick = (e) => {
-      if (action) {
-        eventBus.emit(`UI:${action}`, actionPayload ?? {});
+      if (inert) {
+        e.preventDefault();
+        return;
       }
+      emitAction();
       onClick?.(e);
     };
+    const handleFocus = (e) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
     const classes = cn(
       "relative inline-flex items-center justify-center gap-2",
       "font-medium",
@@ -5034,23 +5138,26 @@ var Button = React15__namespace.default.forwardRef(
       "disabled:opacity-50 disabled:cursor-not-allowed",
       variantStyles2[variant],
       variant === "link" ? "h-auto px-0 text-sm" : sizeStyles[size],
+      busy && "cursor-progress",
+      disabled && focused && "opacity-50 cursor-not-allowed",
       className
     );
     const testId = dataTestId ?? (action ? `action-${action}` : void 0);
     const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons2.Loader2, { className: "h-icon-default w-icon-default animate-spin" }) : resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
-      (Array.isArray(children) ? children.length > 0 : Boolean(children)) ? children : label ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...{ [INLINE_TEXT_ATTR]: "label" }, children: label }) : label,
-      resolvedRightIcon && !isLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
+      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 items-center justify-center gap-2", busy && "almadar-busy-content"), children: [
+        resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedLeftIcon }),
+        (Array.isArray(children) ? children.length > 0 : Boolean(children)) ? children : label ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...{ [INLINE_TEXT_ATTR]: "label" }, children: label }) : label,
+        resolvedRightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: resolvedRightIcon })
+      ] })
     ] });
     if (href !== void 0 && href !== "") {
       const handleLinkClick = (e) => {
-        if (disabled || isLoading) {
+        if (disabled || busy) {
           e.preventDefault();
           return;
         }
-        if (action) {
-          eventBus.emit(`UI:${action}`, actionPayload ?? {});
-        }
+        emitAction();
         if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0) return;
         if (!href.startsWith("#") && isInertNavStack(navStack)) return;
         e.preventDefault();
@@ -5065,7 +5172,8 @@ var Button = React15__namespace.default.forwardRef(
           title: props.title,
           style: props.style,
           "aria-label": props["aria-label"],
-          "aria-disabled": disabled || isLoading || void 0,
+          "aria-disabled": disabled || busy || void 0,
+          "aria-busy": busy || void 0,
           className: classes,
           onClick: handleLinkClick,
           "data-testid": testId,
@@ -5078,9 +5186,13 @@ var Button = React15__namespace.default.forwardRef(
       {
         ref,
         type: "button",
-        disabled: disabled || isLoading,
+        disabled: Boolean(disabled) && !focused,
+        "aria-disabled": inert || void 0,
+        "aria-busy": busy || void 0,
         className: classes,
         onClick: handleClick,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         ...props,
         "data-testid": testId,
         children: content
@@ -5126,8 +5238,8 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React15__namespace.default.forwardRef(
-  ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
+var Badge = React16__namespace.default.forwardRef(
+  ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, onClick, ...props }, ref) => {
     const { t } = useTranslate();
     const iconSizes = {
       sm: "h-icon-default w-icon-default",
@@ -5138,6 +5250,12 @@ var Badge = React15__namespace.default.forwardRef(
     const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx(AtlasImage, { asset: iconAsset, size: iconPx, alt: iconAsset.name ?? iconAsset.category ?? "", className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes[size] }) : null;
     const hasText = Boolean(children) || amount != null || label !== void 0 && label !== null && label !== "";
     if (!hasText && !resolvedIcon && !onRemove) return null;
+    const text = typeof children === "string" || typeof children === "number" ? String(children) : amount != null ? `${label ? `${label} ` : ""}${amount}` : label !== void 0 && label !== null ? String(label) : "";
+    const removeName = removeLabel ?? `${t("common.remove")}${text ? `: ${text}` : ""}`;
+    const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      resolvedIcon,
+      children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...{ [INLINE_TEXT_ATTR]: "label" }, children: label }) : label)
+    ] });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {
@@ -5151,13 +5269,20 @@ var Badge = React15__namespace.default.forwardRef(
         ),
         ...props,
         children: [
-          resolvedIcon,
-          children || (amount != null ? `${label ? `${label} ` : ""}${amount}` : label ? /* @__PURE__ */ jsxRuntime.jsx("span", { ...{ [INLINE_TEXT_ATTR]: "label" }, children: label }) : label),
+          onClick ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick,
+              className: "inline-flex items-center gap-1 rounded-pill focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              children: body
+            }
+          ) : body,
           onRemove ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              "aria-label": removeLabel ?? t("common.remove"),
+              "aria-label": removeName,
               onClick: (e) => {
                 e.stopPropagation();
                 onRemove();
@@ -5183,13 +5308,16 @@ var sizeStyles3 = {
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React15__namespace.default.forwardRef(
+var Spinner = React16__namespace.default.forwardRef(
   ({ className, size = "md", overlay, ...props }, ref) => {
+    const { t } = useTranslate();
     if (overlay) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref,
+          role: "status",
+          "aria-label": t("aria.loading"),
           ...{ [core.LOADING_STATE_MARKER]: "" },
           className: cn(
             "absolute inset-0 z-10 flex items-center justify-center",
@@ -5205,6 +5333,8 @@ var Spinner = React15__namespace.default.forwardRef(
       "div",
       {
         ref,
+        role: "status",
+        "aria-label": t("aria.loading"),
         ...{ [core.LOADING_STATE_MARKER]: "" },
         className: cn("text-foreground", className),
         ...props,
@@ -5267,7 +5397,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React15__namespace.default.forwardRef(
+var Card = React16__namespace.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -5317,9 +5447,9 @@ var Card = React15__namespace.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React15__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React16__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React15__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React16__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -5332,11 +5462,11 @@ var CardTitle = React15__namespace.default.forwardRef(({ className, ...props },
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React15__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React16__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 = React15__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React16__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -5354,7 +5484,8 @@ var Divider = ({
   orientation = "horizontal",
   label,
   variant = "solid",
-  className
+  className,
+  ...rest
 }) => {
   if (orientation === "vertical") {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5365,6 +5496,7 @@ var Divider = ({
           variantStyles5[variant],
           className
         ),
+        ...domPassthrough(rest),
         role: "separator",
         "aria-orientation": "vertical"
       }
@@ -5375,8 +5507,9 @@ var Divider = ({
       "div",
       {
         className: cn("flex items-center gap-3 my-4", className),
+        ...domPassthrough(rest),
         role: "separator",
-        "aria-label": label,
+        "aria-label": rest["aria-label"] ?? label,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -5409,6 +5542,7 @@ var Divider = ({
         variantStyles5[variant],
         className
       ),
+      ...domPassthrough(rest),
       role: "separator",
       "aria-orientation": "horizontal"
     }
@@ -5425,10 +5559,12 @@ var Center = ({
   className,
   style,
   children,
-  as: Component = "div"
+  as: Component = "div",
+  ...rest
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  return React15__namespace.default.createElement(Component, {
+  return React16__namespace.default.createElement(Component, {
+    ...domPassthrough(rest),
     className: cn(
       inline ? "inline-flex" : "flex",
       horizontal && "justify-center",
@@ -5460,16 +5596,18 @@ var verticalSizes = {
 var Spacer = ({
   size = "auto",
   axis = "horizontal",
-  className
+  className,
+  ...rest
 }) => {
   if (size === "auto") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1", className), "aria-hidden": "true" });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1", className), ...domPassthrough(rest), "aria-hidden": "true" });
   }
   const sizeClass = axis === "horizontal" ? horizontalSizes[size] : verticalSizes[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn("flex-shrink-0", sizeClass, className),
+      ...domPassthrough(rest),
       "aria-hidden": "true"
     }
   );
@@ -5527,12 +5665,13 @@ var Avatar = ({
   className,
   onClick,
   action,
-  actionPayload
+  actionPayload,
+  ...rest
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [imgFailed, setImgFailed] = React15__namespace.default.useState(false);
-  React15__namespace.default.useEffect(() => {
+  const [imgFailed, setImgFailed] = React16__namespace.default.useState(false);
+  React16__namespace.default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -5548,7 +5687,7 @@ var Avatar = ({
     onClick?.();
   };
   const press = pressableProps(isClickable ? handleClick : void 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-block", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative inline-block", ...domPassthrough(rest), children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -5657,7 +5796,8 @@ var Image2 = ({
   rounded = "md",
   bordered = false,
   loading = "lazy",
-  className
+  className,
+  ...rest
 }) => {
   if (!src) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5665,7 +5805,8 @@ var Image2 = ({
     {
       src,
       alt,
-      role: alt === "" ? "presentation" : void 0,
+      ...domPassthrough(rest),
+      role: alt === "" ? "presentation" : rest.role,
       loading,
       decoding: "async",
       className: cn(
@@ -5695,7 +5836,7 @@ var alignToStack = {
   left: "start",
   right: "end"
 };
-var SectionHeader = ({ title, subtitle, align = "center", level = 2, className }) => {
+var SectionHeader = ({ title, subtitle, align = "center", level = 2, className, ...rest }) => {
   const variant = levelToVariant[level];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     VStack,
@@ -5703,6 +5844,7 @@ var SectionHeader = ({ title, subtitle, align = "center", level = 2, className }
       gap: "sm",
       align: alignToStack[align],
       className: cn(alignClasses[align], className),
+      ...domPassthrough(rest),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant, weight: "bold", children: title }),
         subtitle ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", color: "muted", children: subtitle }) : null
@@ -5729,7 +5871,8 @@ var FeatureCard = ({
   linkLabel,
   variant = "bordered",
   size = "md",
-  className
+  className,
+  ...rest
 }) => {
   const { t } = useTranslate();
   const renderIcon = () => {
@@ -5752,6 +5895,7 @@ var FeatureCard = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Card,
     {
+      ...domPassthrough(rest),
       variant,
       padding: size,
       className: cn(
@@ -5786,6 +5930,14 @@ var gapStyles2 = {
   lg: "gap-6",
   xl: "gap-8"
 };
+var gapLengths = {
+  none: "0px",
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "1rem",
+  lg: "1.5rem",
+  xl: "2rem"
+};
 var colStyles = {
   1: "grid-cols-1",
   2: "grid-cols-1 sm:grid-cols-2 @max-sm:!grid-cols-1",
@@ -5800,22 +5952,22 @@ var SimpleGrid = ({
   cols,
   gap = "md",
   className,
-  children
+  children,
+  ...rest
 }) => {
+  const passthrough = domPassthrough(rest);
   if (cols) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("grid", colStyles[cols], gapStyles2[gap], className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("grid", colStyles[cols], gapStyles2[gap], className), ...passthrough, children });
   }
   const minWidth = typeof minChildWidth === "number" ? `${minChildWidth}px` : minChildWidth;
-  const templateColumns = maxCols ? `repeat(auto-fit, minmax(min(${minWidth}, 100%), 1fr))` : `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
+  const templateColumns = maxCols ? `repeat(auto-fit, minmax(max(min(${minWidth}, 100%), calc((100% - ${maxCols - 1} * ${gapLengths[gap]}) / ${maxCols})), 1fr))` : `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
+      ...domPassthrough(rest),
       className: cn("grid", gapStyles2[gap], className),
-      style: {
-        gridTemplateColumns: templateColumns,
-        // Limit max columns if specified
-        ...maxCols && { maxWidth: `calc(${maxCols} * (${minWidth} + var(--gap, 1rem)))` }
-      },
+      style: { gridTemplateColumns: templateColumns },
+      ...passthrough,
       children
     }
   );
@@ -5825,11 +5977,13 @@ var FeatureGrid = ({
   items,
   columns = 3,
   gap = "md",
-  className
+  className,
+  ...rest
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     SimpleGrid,
     {
+      ...domPassthrough(rest),
       cols: columns,
       gap,
       className: cn(className),
@@ -5869,12 +6023,14 @@ var Container = ({
   center = true,
   className,
   children,
-  as: Component = "div"
+  as: Component = "div",
+  ...rest
 }) => {
   const resolvedSize = maxWidth ?? size ?? "lg";
-  return React15__namespace.default.createElement(
+  return React16__namespace.default.createElement(
     Component,
     {
+      ...domPassthrough(rest),
       className: cn(
         "w-full",
         sizeStyles4[resolvedSize],
@@ -5902,7 +6058,8 @@ var Sparkline = ({
   height = 32,
   strokeWidth = 2,
   fill = false,
-  className
+  className,
+  ...rest
 }) => {
   if (data.length < 2) return null;
   const pad = 2;
@@ -5923,7 +6080,8 @@ var Sparkline = ({
       height,
       viewBox: `0 0 ${width} ${height}`,
       className: cn("flex-shrink-0", className),
-      "aria-hidden": "true",
+      ...domPassthrough(rest),
+      "aria-hidden": rest["aria-hidden"] ?? true,
       children: [
         areaPath && /* @__PURE__ */ jsxRuntime.jsx("path", { d: areaPath, fill: resolvedColor, opacity: 0.15 }),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5984,11 +6142,12 @@ var StatDisplay = ({
   look = "elevated",
   className,
   isLoading = false,
-  error = null
+  error = null,
+  ...rest
 }) => {
   const eventBus = useEventBus();
   const fmt = useFormatContext();
-  const handleClick = React15.useCallback(() => {
+  const handleClick = React16.useCallback(() => {
     if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { metricLabel: label });
   }, [clickEvent, eventBus, label]);
   const ResolvedIcon = typeof iconProp === "string" ? resolveIcon(iconProp) : typeof iconProp === "function" ? iconProp : null;
@@ -6006,10 +6165,10 @@ var StatDisplay = ({
   const trendSuffix = trendFormat === "percent" ? "%" : "";
   const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${trendMagnitude}${trendSuffix}` : "";
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "error", children: error.message }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { ...domPassthrough(rest), className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "error", children: error.message }) });
   }
   if (isLoading) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "animate-pulse", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Card, { ...domPassthrough(rest), className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "animate-pulse", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-3 bg-muted rounded w-16" }),
       /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "h-6 bg-muted rounded w-12" })
     ] }) });
@@ -6018,6 +6177,7 @@ var StatDisplay = ({
     return /* @__PURE__ */ jsxRuntime.jsxs(
       HStack,
       {
+        ...domPassthrough(rest),
         gap: "sm",
         className: cn("items-center", clickEvent && "cursor-pointer hover:opacity-80", className),
         ...pressableProps(clickEvent ? handleClick : void 0),
@@ -6034,6 +6194,7 @@ var StatDisplay = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Card,
     {
+      ...domPassthrough(rest),
       className: cn(padSizes[size], lookStyles2[look], clickEvent && "cursor-pointer hover:shadow-elevation-dialog transition-shadow", className),
       ...pressableProps(clickEvent ? handleClick : void 0),
       children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", justify: "between", children: [
@@ -6077,12 +6238,14 @@ var colorTokenVars = {
 };
 var GradientDivider = ({
   color,
-  className
+  className,
+  ...rest
 }) => {
   const centerColor = color ? color in colorTokenVars ? colorTokenVars[color] : color : "var(--color-primary)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     Box,
     {
+      ...domPassthrough(rest),
       className: cn("w-full h-px", className),
       style: {
         background: `linear-gradient(to right, transparent, ${centerColor}, transparent)`
@@ -6133,17 +6296,18 @@ var AnimatedCounter = ({
   prefix,
   suffix,
   format,
-  className
+  className,
+  ...rest
 }) => {
   const fmt = useFormatContext();
-  const ref = React15.useRef(null);
+  const ref = React16.useRef(null);
   const parsed = parseValue(value);
   const target = parsed.num ?? 0;
-  const [visible, setVisible] = React15.useState(() => typeof IntersectionObserver === "undefined");
-  const [display, setDisplay] = React15.useState(() => typeof IntersectionObserver === "undefined" ? target : 0);
-  const shownRef = React15.useRef(display);
-  const frameRef = React15.useRef(null);
-  React15.useEffect(() => {
+  const [visible, setVisible] = React16.useState(() => typeof IntersectionObserver === "undefined");
+  const [display, setDisplay] = React16.useState(() => typeof IntersectionObserver === "undefined" ? target : 0);
+  const shownRef = React16.useRef(display);
+  const frameRef = React16.useRef(null);
+  React16.useEffect(() => {
     if (visible) return;
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") {
@@ -6162,7 +6326,7 @@ var AnimatedCounter = ({
     observer2.observe(el);
     return () => observer2.disconnect();
   }, [visible]);
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!visible) return;
     const from = shownRef.current;
     if (from === target || prefersReducedMotion() || typeof requestAnimationFrame === "undefined") {
@@ -6185,7 +6349,7 @@ var AnimatedCounter = ({
     };
   }, [visible, target, duration]);
   const text = parsed.num === null ? parsed.suffix : `${prefix ?? ""}${parsed.prefix}${formatNumber(display, format, parsed.decimals, fmt)}${parsed.suffix}${suffix ?? ""}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ref, className: cn("flex flex-col items-center gap-1", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { ...domPassthrough(rest), ref, className: cn("flex flex-col items-center gap-1", className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h2", className: "text-primary tabular-nums", children: text }),
     label ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", color: "muted", className: "text-center", children: label }) : null
   ] });
@@ -6211,7 +6375,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React15__namespace.default.forwardRef(
+var AnimatedReveal = React16__namespace.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -6226,10 +6390,10 @@ var AnimatedReveal = React15__namespace.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React15.useState(false);
-    const internalRef = React15.useRef(null);
-    const hasAnimated = React15.useRef(false);
-    const setRef = React15.useCallback(
+    const [isAnimated, setIsAnimated] = React16.useState(false);
+    const internalRef = React16.useRef(null);
+    const hasAnimated = React16.useRef(false);
+    const setRef = React16.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -6237,7 +6401,7 @@ var AnimatedReveal = React15__namespace.default.forwardRef(
       },
       [forwardedRef]
     );
-    React15.useEffect(() => {
+    React16.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
@@ -6263,7 +6427,7 @@ var AnimatedReveal = React15__namespace.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React15.useEffect(() => {
+    React16.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
@@ -6293,9 +6457,9 @@ var AnimatedReveal = React15__namespace.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React15.useState(null);
-  const cache = React15.useRef({});
-  React15.useEffect(() => {
+  const [svg, setSvg] = React16.useState(null);
+  const cache = React16.useRef({});
+  React16.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -6364,7 +6528,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React15__namespace.default.forwardRef(
+var AnimatedGraphic = React16__namespace.default.forwardRef(
   ({
     src,
     svgContent,
@@ -6383,11 +6547,11 @@ var AnimatedGraphic = React15__namespace.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React15.useRef(null);
+    const containerRef = React16.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React15.useRef(animate);
-    const setRef = React15__namespace.default.useCallback(
+    const prevAnimateRef = React16.useRef(animate);
+    const setRef = React16__namespace.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -6395,7 +6559,7 @@ var AnimatedGraphic = React15__namespace.default.forwardRef(
       },
       [ref]
     );
-    React15.useEffect(() => {
+    React16.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -6403,7 +6567,7 @@ var AnimatedGraphic = React15__namespace.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React15.useEffect(() => {
+    React16.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -6428,7 +6592,7 @@ var AnimatedGraphic = React15__namespace.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React15.useEffect(() => {
+    React16.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -6938,10 +7102,11 @@ var PatternTile = ({
   size = 60,
   color = "var(--color-primary)",
   strokeWidth = 0.5,
-  className
+  className,
+  ...rest
 }) => {
   const Variant = VARIANT_MAP[variant];
-  return /* @__PURE__ */ jsxRuntime.jsx("g", { className, children: /* @__PURE__ */ jsxRuntime.jsx(Variant, { size, color, strokeWidth }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { className, ...domPassthrough(rest), children: /* @__PURE__ */ jsxRuntime.jsx(Variant, { size, color, strokeWidth }) });
 };
 PatternTile.displayName = "PatternTile";
 function getTileDimensions(variant, size) {
@@ -7228,7 +7393,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React15.useId();
+  const reactId = React16.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale2;
   const stripHeight = 40 * scale2;
@@ -7463,7 +7628,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React15.useId();
+  const id = React16.useId();
   const Variant = VARIANT_MAP2[variant];
   const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];