@almadar/ui 6.52.0 → 6.53.0

package/dist/ssr/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React16 = require('react');
+var React17 = 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 React16__namespace = /*#__PURE__*/_interopNamespace(React16);
+var React17__namespace = /*#__PURE__*/_interopNamespace(React17);
 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 = React16.createContext(null));
+var EventBusContext = globalThis.__almadarUiEventBusContext ?? (globalThis.__almadarUiEventBusContext = React17.createContext(null));
 var EMPTY_CHAIN = Object.freeze([]);
-var TraitScopeContext = React16.createContext(null);
+var TraitScopeContext = React17.createContext(null);
 function useTraitScopeChain() {
-  const chain = React16.useContext(TraitScopeContext);
+  const chain = React17.useContext(TraitScopeContext);
   return chain ?? EMPTY_CHAIN;
 }
 var log = logger.createLogger("almadar:eventbus");
@@ -2659,10 +2659,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React16.useContext(EventBusContext);
+  const context = React17.useContext(EventBusContext);
   const baseBus = context ?? getGlobalEventBus() ?? fallbackEventBus;
   const chain = useTraitScopeChain();
-  return React16.useMemo(() => {
+  return React17.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] = React16.useState(false);
-  const onRevealRef = React16.useRef(onReveal);
-  const onDismissRef = React16.useRef(onDismiss);
+  const [revealed, setRevealed] = React17.useState(false);
+  const onRevealRef = React17.useRef(onReveal);
+  const onDismissRef = React17.useRef(onDismiss);
   onRevealRef.current = onReveal;
   onDismissRef.current = onDismiss;
-  const reveal = React16.useCallback(() => {
+  const reveal = React17.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (!wasRevealed) onRevealRef.current?.();
       return true;
     });
   }, []);
-  const dismiss = React16.useCallback(() => {
+  const dismiss = React17.useCallback(() => {
     setRevealed((wasRevealed) => {
       if (wasRevealed) onDismissRef.current?.();
       return false;
     });
   }, []);
-  const onPointerDown = React16.useCallback(
+  const onPointerDown = React17.useCallback(
     (e) => {
       if (!enabled || e.pointerType === "mouse") return;
       if (revealed) dismiss();
@@ -2733,7 +2733,7 @@ function useTapReveal(options = {}) {
     },
     [enabled, revealed, reveal, dismiss]
   );
-  React16.useEffect(() => {
+  React17.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");
-React16.createContext(void 0);
-var ThemeScopeContext = React16.createContext({});
+React17.createContext(void 0);
+var ThemeScopeContext = React17.createContext({});
 function useThemeScope() {
-  return React16.useContext(ThemeScopeContext);
+  return React17.useContext(ThemeScopeContext);
 }
 
 // lib/pressable.ts
@@ -2883,7 +2883,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React16__namespace.default.forwardRef(
+var Box = React17__namespace.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2918,20 +2918,20 @@ var Box = React16__namespace.default.forwardRef(
     const { override: themeOverride } = useThemeScope();
     const declaredTheme = rest["data-theme"];
     const dataTheme = declaredTheme !== void 0 && themeOverride ? themeOverride : declaredTheme;
-    const handleClick = React16.useCallback((e) => {
+    const handleClick = React17.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React16.useCallback((e) => {
+    const handleMouseEnter = React17.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React16.useCallback((e) => {
+    const handleMouseLeave = React17.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -2939,20 +2939,20 @@ var Box = React16__namespace.default.forwardRef(
     }, [hoverEvent, eventBus, onMouseLeave]);
     const { triggerProps } = useTapReveal({
       enabled: tapReveal && !!hoverEvent,
-      onReveal: React16.useCallback(() => {
+      onReveal: React17.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }, [hoverEvent, eventBus]),
-      onDismiss: React16.useCallback(() => {
+      onDismiss: React17.useCallback(() => {
         if (hoverEvent) eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }, [hoverEvent, eventBus])
     });
-    const handlePointerDown = React16.useCallback((e) => {
+    const handlePointerDown = React17.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 React16__namespace.default.createElement(
+    return React17__namespace.default.createElement(
       Component,
       {
         ref,
@@ -3057,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 React16__namespace.default.createElement(
+  return React17__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -3200,6 +3200,7 @@ var en_default = {
   "aria.removeFilter": "Remove filter",
   "aria.closeDrawer": "Close drawer",
   "aria.closePanel": "Close panel",
+  "aria.dockPanel": "Side panel",
   "aria.previousImage": "Previous image",
   "aria.nextImage": "Next image",
   "aria.dismiss": "Dismiss",
@@ -3221,6 +3222,7 @@ var en_default = {
   "aria.openMenu": "Open menu",
   "aria.closeMenu": "Close menu",
   "aria.openSidebar": "Open sidebar",
+  "aria.openRow": "Open item {{position}}",
   "sidebar.expand": "Expand sidebar",
   "sidebar.collapse": "Collapse sidebar",
   "sidebar.close": "Close sidebar",
@@ -4266,7 +4268,51 @@ var en_default = {
   "aria.walkTraitDone": "completed",
   "aria.walkTraitPending": "pending",
   "aria.walkGraph": "State graph for {{trait}}: {{from}} to {{to}}",
-  "aria.loading": "Loading"
+  "aria.loading": "Loading",
+  "agentActivity.toolCall": "Called {{tool}}",
+  "agentActivity.toolResult": "{{tool}} returned",
+  "agentActivity.toolRows": "{{count}} rows",
+  "agentActivity.thinking": "Thinking\u2026",
+  "agentActivity.analyzed": "Analyzed your request \u2014 {{organism}}",
+  "agentActivity.renamed": "Rename {{from}} \u2192 {{to}}",
+  "agentActivity.deleted": "Remove {{orbitalName}}",
+  "agentActivity.roster": "Planning {{count}} orbitals",
+  "agentActivity.orbitalStarted": "Working on {{orbitalName}}\u2026",
+  "agentActivity.orbitalStartedSettled": "Started {{orbitalName}}",
+  "agentActivity.orbitalDone": "{{orbitalName}} ready",
+  "agentActivity.orbitalCounts": "{{traitCount}} traits, {{transitionCount}} transitions",
+  "agentActivity.change.orbital-added": "Added {{orbitalName}}",
+  "agentActivity.change.orbital-removed": "Removed {{orbitalName}}",
+  "agentActivity.change.entity-fields-changed": "Changed the data fields of {{orbitalName}}",
+  "agentActivity.change.trait-added": "Added a behavior to {{orbitalName}}",
+  "agentActivity.change.trait-removed": "Removed a behavior from {{orbitalName}}",
+  "agentActivity.change.state-machine-changed": "Changed the flow of {{orbitalName}}",
+  "agentActivity.change.guard-changed": "Changed a rule in {{orbitalName}}",
+  "agentActivity.change.effect-changed": "Changed what {{orbitalName}} does",
+  "agentActivity.change.render-ui-changed": "Changed the design of {{orbitalName}}",
+  "agentActivity.change.event-wiring-changed": "Changed the connections of {{orbitalName}}",
+  "agentActivity.change.page-changed": "Changed the pages of {{orbitalName}}",
+  "agentActivity.change.behavior-composed": "Composed a behavior into {{orbitalName}}",
+  "agentActivity.done": "Done \u2014 {{count}} orbitals ready",
+  "agentActivity.cancelled": "Cancelled",
+  "agentActivity.jump": "Show",
+  "agentActivity.emptyTitle": "No activity yet",
+  "agentActivity.emptyDescription": "Send a message and the agent's work shows up here.",
+  "agentActivity.fileOperation": "{{operation}}",
+  "agentActivity.schemaDiff": "Edited {{filePath}}",
+  "agentActivity.coordinatorDecision": "Chose {{organism}}",
+  "agentActivity.change.trait-config-changed": "Changed the settings of {{orbitalName}}",
+  "agentActivity.change.theme-changed": "Changed the theme of {{orbitalName}}",
+  "agentActivity.llmResponse": "Raw LLM response",
+  "agentActivity.llmDuration": "{{seconds}}s",
+  "agentActivity.llmTokens": "{{prompt}} in / {{completion}} out tokens",
+  "agentActivity.llmResponseLabel": "Response",
+  "agentActivity.llmSystemPrompt": "System prompt",
+  "agentActivity.llmUserPrompt": "User prompt",
+  "agentActivity.llmToolCalls": "Tool calls",
+  "agentActivity.showRawLlm": "Raw LLM",
+  "agentActivity.earlierConversations": "Earlier conversations ({{count}})",
+  "agentActivity.earlierActivity": "Earlier activity"
 };
 
 // lib/format.ts
@@ -4330,7 +4376,7 @@ function formatValue(value, format, fmt = {}) {
 var INLINE_TEXT_ATTR = "data-inline-text";
 var { $meta: _meta2, ...coreMessages2 } = en_default;
 var coreLocale2 = coreMessages2;
-var I18nContext = React16.createContext({
+var I18nContext = React17.createContext({
   locale: "en",
   direction: "ltr",
   t: (key, params) => {
@@ -4345,11 +4391,11 @@ var I18nContext = React16.createContext({
 });
 I18nContext.displayName = "I18nContext";
 function useTranslate() {
-  return React16.useContext(I18nContext);
+  return React17.useContext(I18nContext);
 }
 function useFormatContext() {
-  const { t, locale, currency } = React16.useContext(I18nContext);
-  return React16.useMemo(
+  const { t, locale, currency } = React17.useContext(I18nContext);
+  return React17.useMemo(
     () => ({ locale, currency: currency ?? DEFAULT_CURRENCY, booleanLabels: { yes: t("common.yes"), no: t("common.no") } }),
     [t, locale, currency]
   );
@@ -4455,7 +4501,7 @@ var Typography = ({
   if (format !== void 0 && format !== "none" && (typeof body === "string" || typeof body === "number" || body instanceof Date)) {
     body = formatValue(body, format, fmt);
   }
-  return React16__namespace.default.createElement(
+  return React17__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -4509,20 +4555,20 @@ function subscribePending(key, cb) {
     if (set && set.size === 0) keyListeners.delete(key);
   };
 }
-var PendingScopeContext = React16.createContext(null);
+var PendingScopeContext = React17.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) : () => {
+  const scope = React17.useContext(PendingScopeContext);
+  const [key, setKey] = React17.useState(null);
+  const pending = React17.useSyncExternalStore(
+    React17.useCallback((cb) => key ? subscribePending(key, cb) : () => {
     }, [key]),
     () => key ? isPending(key) : false,
     () => false
   );
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (key && !pending) setKey(null);
   }, [key, pending]);
-  const activate = React16.useCallback((emit) => {
+  const activate = React17.useCallback((emit) => {
     const k = newPendingKey();
     emit(k);
     if (!isPending(k)) return;
@@ -4613,16 +4659,16 @@ function getThemeVersionSnapshot() {
   return themeVersion;
 }
 function useThemeIconStrokeApplies(ref) {
-  const documentApplies = React16.useSyncExternalStore(subscribeIconFamily, getStrokeAppliesSnapshot, () => true);
-  const version = React16.useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
-  const [scopedApplies, setScopedApplies] = React16.useState(null);
-  React16.useLayoutEffect(() => {
+  const documentApplies = React17.useSyncExternalStore(subscribeIconFamily, getStrokeAppliesSnapshot, () => true);
+  const version = React17.useSyncExternalStore(subscribeIconFamily, getThemeVersionSnapshot, () => 0);
+  const [scopedApplies, setScopedApplies] = React17.useState(null);
+  React17.useLayoutEffect(() => {
     if (ref.current) setScopedApplies(familyStrokeApplies(scopedIconFamily(ref.current)));
   }, [ref, version]);
   return scopedApplies ?? documentApplies;
 }
 function useIconFamily() {
-  return React16.useSyncExternalStore(
+  return React17.useSyncExternalStore(
     subscribeIconFamily,
     getIconFamilySnapshot,
     getIconFamilyServerSnapshot
@@ -4661,7 +4707,7 @@ function resolveLucide(name) {
 }
 function makeLucideAdapter(name) {
   const LucideComp = resolveLucide(name);
-  const Adapter = React16__namespace.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  const Adapter = React17__namespace.default.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     LucideComp,
     {
       ref,
@@ -4749,9 +4795,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 = React16__namespace.default.useRef(null);
+  const svgRef = React17__namespace.default.useRef(null);
   const themeStroke = useThemeIconStrokeApplies(svgRef);
-  const RenderedComponent = React16__namespace.default.useMemo(() => {
+  const RenderedComponent = React17__namespace.default.useMemo(() => {
     if (directIcon) return null;
     return effectiveName ? resolveIconForFamily(effectiveName) : null;
   }, [directIcon, effectiveName, family]);
@@ -4893,13 +4939,13 @@ function AtlasImage({
   "aria-hidden": ariaHidden,
   ...rest
 }) {
-  const [, bump] = React16__namespace.useReducer((x) => x + 1, 0);
-  const canvasRef = React16__namespace.useRef(null);
+  const [, bump] = React17__namespace.useReducer((x) => x + 1, 0);
+  const canvasRef = React17__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;
-  React16__namespace.useEffect(() => {
+  React17__namespace.useEffect(() => {
     const canvas = canvasRef.current;
     if (!canvas || !img || !rect) return;
     canvas.width = rect.sw;
@@ -4954,7 +5000,7 @@ function AtlasImage({
 }
 AtlasImage.displayName = "AtlasImage";
 logger.createLogger("almadar:ui:navigation");
-React16.createContext(null);
+React17.createContext(null);
 var INERT_API = {
   entries: [],
   canGoBack: false,
@@ -4964,12 +5010,12 @@ var INERT_API = {
   setCurrentLabel: () => void 0,
   registerNavItems: () => void 0
 };
-var NavStackContext = React16.createContext(INERT_API);
+var NavStackContext = React17.createContext(INERT_API);
 function isInertNavStack(api) {
   return api === INERT_API;
 }
 function useNavStack() {
-  return React16.useContext(NavStackContext);
+  return React17.useContext(NavStackContext);
 }
 
 // lib/followHref.ts
@@ -5064,7 +5110,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React16__namespace.default.isValidElement(value)) {
+  if (React17__namespace.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && isIconLike(value)) {
@@ -5073,7 +5119,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React16__namespace.default.forwardRef(
+var Button = React17__namespace.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -5100,7 +5146,7 @@ var Button = React16__namespace.default.forwardRef(
     const navStack = useNavStack();
     const { pending, activate } = usePendingAction();
     const busy = isLoading || pending;
-    const [focused, setFocused] = React16__namespace.default.useState(false);
+    const [focused, setFocused] = React17__namespace.default.useState(false);
     const inert = Boolean(disabled) || busy;
     const emitAction = () => {
       if (!action) return;
@@ -5238,7 +5284,7 @@ var sizeStyles2 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React16__namespace.default.forwardRef(
+var Badge = React17__namespace.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, onClick, ...props }, ref) => {
     const { t } = useTranslate();
     const iconSizes = {
@@ -5302,13 +5348,25 @@ var Badge = React16__namespace.default.forwardRef(
   }
 );
 Badge.displayName = "Badge";
+var SurfaceContext = React17__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 paints = surface === "auto" && !onSurface;
+  return {
+    className: paints ? "surface-content" : void 0,
+    provide: (node) => paints ? /* @__PURE__ */ jsxRuntime.jsx(SurfaceBoundary, { children: node }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: node })
+  };
+}
 var sizeStyles3 = {
   xs: "h-3 w-3",
   sm: "h-icon-default w-icon-default",
   md: "h-6 w-6",
   lg: "h-8 w-8"
 };
-var Spinner = React16__namespace.default.forwardRef(
+var Spinner = React17__namespace.default.forwardRef(
   ({ className, size = "md", overlay, ...props }, ref) => {
     const { t } = useTranslate();
     if (overlay) {
@@ -5346,16 +5404,12 @@ var Spinner = React16__namespace.default.forwardRef(
 Spinner.displayName = "Spinner";
 var variantStyles4 = {
   default: [
-    "bg-card surface-material",
-    "border-[length:var(--border-width)] border-border",
-    "shadow-elevation-card",
+    "surface-content",
     "transition-all duration-normal",
     "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
   ].join(" "),
   bordered: [
-    "bg-card surface-material",
-    "border-[length:var(--border-width)] border-border",
-    "shadow-elevation-card",
+    "surface-content",
     "transition-all duration-normal",
     "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
   ].join(" "),
@@ -5397,7 +5451,7 @@ var lookStyles = {
   chip: "shadow-none rounded-pill border-[length:var(--border-width)] border-border",
   "tile-image-first": "p-0 overflow-hidden"
 };
-var Card = React16__namespace.default.forwardRef(
+var Card = React17__namespace.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -5440,16 +5494,16 @@ var Card = React16__namespace.default.forwardRef(
             title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground heading-voice", children: title }),
             subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
           ] }),
-          children
+          /* @__PURE__ */ jsxRuntime.jsx(SurfaceBoundary, { children })
         ]
       }
     );
   }
 );
 Card.displayName = "Card";
-var CardHeader = React16__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React17__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React16__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React17__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -5462,11 +5516,11 @@ var CardTitle = React16__namespace.default.forwardRef(({ className, ...props },
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React16__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React17__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 = React16__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React17__namespace.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -5563,7 +5617,7 @@ var Center = ({
   ...rest
 }) => {
   const mergedStyle = minHeight ? { minHeight, ...style } : style;
-  return React16__namespace.default.createElement(Component, {
+  return React17__namespace.default.createElement(Component, {
     ...domPassthrough(rest),
     className: cn(
       inline ? "inline-flex" : "flex",
@@ -5670,8 +5724,8 @@ var Avatar = ({
 }) => {
   const eventBus = useEventBus();
   const { t } = useTranslate();
-  const [imgFailed, setImgFailed] = React16__namespace.default.useState(false);
-  React16__namespace.default.useEffect(() => {
+  const [imgFailed, setImgFailed] = React17__namespace.default.useState(false);
+  React17__namespace.default.useEffect(() => {
     setImgFailed(false);
   }, [src]);
   const initials = providedInitials ?? (name ? generateInitials(name) : void 0);
@@ -6027,7 +6081,7 @@ var Container = ({
   ...rest
 }) => {
   const resolvedSize = maxWidth ?? size ?? "lg";
-  return React16__namespace.default.createElement(
+  return React17__namespace.default.createElement(
     Component,
     {
       ...domPassthrough(rest),
@@ -6043,6 +6097,186 @@ var Container = ({
   );
 };
 Container.displayName = "Container";
+var pulseClass = "almadar-shimmer animate-shimmer rounded-container";
+function SkeletonLine({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn(pulseClass, "h-4", className) });
+}
+function SkeletonBlock({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn(pulseClass, className) });
+}
+function HeaderSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: cn("items-center justify-between px-6 py-5", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", className: "flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-7 w-48" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-64" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-24 rounded-interactive" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-32 rounded-interactive" })
+    ] })
+  ] });
+}
+function TableSkeleton({ rows = 5, columns = 4, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: cn("border border-border rounded-container overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(HStack, { className: "px-4 py-3 bg-muted/30 border-b border-border", children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-4 flex-1 mx-2" }, i)) }),
+    Array.from({ length: rows }).map((_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+      HStack,
+      {
+        className: cn(
+          "px-4 py-3",
+          rowIdx < rows - 1 && "border-b border-border"
+        ),
+        children: Array.from({ length: columns }).map((_2, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "flex-1 mx-2" }, colIdx))
+      },
+      rowIdx
+    ))
+  ] });
+}
+function FormSkeleton({ fields = 4, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: cn("p-6", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-6 w-40" }),
+    Array.from({ length: fields }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-4 w-24" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-full rounded-interactive" })
+    ] }, i)),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", className: "justify-end pt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-20 rounded-interactive" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-24 rounded-interactive" })
+    ] })
+  ] });
+}
+function CardSkeleton({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    VStack,
+    {
+      gap: "md",
+      className: cn(
+        "p-5 border border-border rounded-container",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-center", gap: "md", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-10 rounded-full" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-5 w-32" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-48" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-3/4" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-6 w-16 rounded-full" }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-6 w-20 rounded-full" })
+        ] })
+      ]
+    }
+  );
+}
+function TextSkeleton({ rows = 3, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "sm", className, children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonLine,
+    {
+      className: i === rows - 1 ? "w-2/3" : "w-full"
+    },
+    i
+  )) });
+}
+function ListSkeleton({ rows = 5, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("border border-border rounded-container overflow-hidden", className), children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", className: cn("items-center px-4 py-3", i < rows - 1 && "border-b border-border"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-10 w-10 rounded-full shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-4 w-1/3" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-2/3 h-3" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-6 w-16 rounded-full" })
+  ] }, 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)) });
+}
+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: [
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonLine, { className: "w-1/2 h-3" }),
+    /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-7 w-2/3" })
+  ] }, i)) });
+}
+function DetailSkeleton({ rows = 6, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "lg", className: cn("p-6 border border-border rounded-container", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { className: "items-start justify-between", gap: "md", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-8 w-56" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-6 w-20 rounded-full" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-24 rounded-interactive" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-9 w-9 rounded-interactive" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-20 flex-1" }),
+      /* @__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(SkeletonLine, { className: "w-1/3 h-3" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SkeletonBlock, { className: "h-5 w-2/3" })
+    ] }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(TextSkeleton, { rows: 3 })
+  ] });
+}
+function Skeleton({
+  variant = "text",
+  spec,
+  rows,
+  columns,
+  fields,
+  className,
+  ...rest
+}) {
+  const { t } = useTranslate();
+  const shape = spec !== void 0 ? shapeOfSpec(spec) : { variant, rows, columns, fields };
+  if (shape === null) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      ...domPassthrough(rest),
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": rest["aria-label"] ?? t("common.loading"),
+      "data-skeleton": shape.variant,
+      ...{ [core.LOADING_STATE_MARKER]: "" },
+      className: "w-full",
+      children: renderVariant(shape.variant, shape.rows, shape.columns, shape.fields, className)
+    }
+  );
+}
+function shapeOfSpec(spec) {
+  if (spec === "none") return null;
+  return typeof spec === "string" ? { variant: spec } : spec;
+}
+function renderVariant(variant, rows, columns, fields, className) {
+  switch (variant) {
+    case "header":
+      return /* @__PURE__ */ jsxRuntime.jsx(HeaderSkeleton, { className });
+    case "table":
+      return /* @__PURE__ */ jsxRuntime.jsx(TableSkeleton, { rows, columns, className });
+    case "list":
+      return /* @__PURE__ */ jsxRuntime.jsx(ListSkeleton, { rows, className });
+    case "grid":
+      return /* @__PURE__ */ jsxRuntime.jsx(GridSkeleton, { rows, className });
+    case "detail":
+      return /* @__PURE__ */ jsxRuntime.jsx(DetailSkeleton, { rows, className });
+    case "stats":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatsSkeleton, { columns, className });
+    case "form":
+      return /* @__PURE__ */ jsxRuntime.jsx(FormSkeleton, { fields, className });
+    case "card":
+      return /* @__PURE__ */ jsxRuntime.jsx(CardSkeleton, { className });
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(TextSkeleton, { rows, className });
+  }
+}
+Skeleton.displayName = "Skeleton";
 var COLOR_VAR = {
   primary: "var(--color-primary)",
   success: "var(--color-success)",
@@ -6102,7 +6336,7 @@ var Sparkline = ({
 Sparkline.displayName = "Sparkline";
 var lookStyles2 = {
   elevated: "",
-  flat: "shadow-none border-[length:var(--border-width)] border-border",
+  flat: "shadow-none",
   "progress-backed": "",
   gauge: "",
   sparkline: ""
@@ -6142,12 +6376,15 @@ var StatDisplay = ({
   look = "elevated",
   className,
   isLoading = false,
+  skeleton = { variant: "stats", columns: 1 },
   error = null,
+  surface = "auto",
   ...rest
 }) => {
+  const contentSurface = useContentSurface(surface);
   const eventBus = useEventBus();
   const fmt = useFormatContext();
-  const handleClick = React16.useCallback(() => {
+  const handleClick = React17.useCallback(() => {
     if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { metricLabel: label });
   }, [clickEvent, eventBus, label]);
   const ResolvedIcon = typeof iconProp === "string" ? resolveIcon(iconProp) : typeof iconProp === "function" ? iconProp : null;
@@ -6165,13 +6402,12 @@ var StatDisplay = ({
   const trendSuffix = trendFormat === "percent" ? "%" : "";
   const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${trendMagnitude}${trendSuffix}` : "";
   if (error) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { ...domPassthrough(rest), className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "error", children: error.message }) });
+    return contentSurface.provide(
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { ...domPassthrough(rest), className: cn(contentSurface.className, "rounded-container", padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "error", children: error.message }) })
+    );
   }
   if (isLoading) {
-    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" })
-    ] }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { spec: skeleton, className });
   }
   if (compact) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6191,40 +6427,42 @@ 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: [
-        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "end", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("", valueSizes[size], variantColor[variant]), children: displayValue }),
-            showTrend && /* @__PURE__ */ jsxRuntime.jsx(
-              Typography,
+  return contentSurface.provide(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
+      {
+        ...domPassthrough(rest),
+        className: cn(contentSurface.className, "rounded-container", 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: [
+          /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "overline", color: "secondary", children: label }),
+            /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "end", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("", valueSizes[size], variantColor[variant]), children: displayValue }),
+              showTrend && /* @__PURE__ */ jsxRuntime.jsx(
+                Typography,
+                {
+                  variant: "caption",
+                  className: cn("font-semibold pb-1", trendIsGood ? "text-success" : "text-error"),
+                  children: trendLabel
+                }
+              )
+            ] }),
+            showTarget && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+              Box,
               {
-                variant: "caption",
-                className: cn("font-semibold pb-1", trendIsGood ? "text-success" : "text-error"),
-                children: trendLabel
+                className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+                style: { width: `${targetPct}%` }
               }
-            )
+            ) })
           ] }),
-          showTarget && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Box,
-            {
-              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
-              style: { width: `${targetPct}%` }
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", align: "end", children: [
-          ResolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3 rounded-container", iconBg), children: /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes[size], iconColor) }) }),
-          sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparklineData, color: "auto" })
+          /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", align: "end", children: [
+            ResolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3 rounded-container", iconBg), children: /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes[size], iconColor) }) }),
+            sparklineData && sparklineData.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(Sparkline, { data: sparklineData, color: "auto" })
+          ] })
         ] })
-      ] })
-    }
+      }
+    )
   );
 };
 StatDisplay.displayName = "StatDisplay";
@@ -6300,14 +6538,14 @@ var AnimatedCounter = ({
   ...rest
 }) => {
   const fmt = useFormatContext();
-  const ref = React16.useRef(null);
+  const ref = React17.useRef(null);
   const parsed = parseValue(value);
   const target = parsed.num ?? 0;
-  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(() => {
+  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(() => {
     if (visible) return;
     const el = ref.current;
     if (!el || typeof IntersectionObserver === "undefined") {
@@ -6326,7 +6564,7 @@ var AnimatedCounter = ({
     observer2.observe(el);
     return () => observer2.disconnect();
   }, [visible]);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!visible) return;
     const from = shownRef.current;
     if (from === target || prefersReducedMotion() || typeof requestAnimationFrame === "undefined") {
@@ -6375,7 +6613,7 @@ var animatedStyles = {
   "scale-up": { opacity: 1, transform: "scale(1) translateY(0)" },
   "none": {}
 };
-var AnimatedReveal = React16__namespace.default.forwardRef(
+var AnimatedReveal = React17__namespace.default.forwardRef(
   ({
     trigger = "scroll",
     animation = "fade-up",
@@ -6390,10 +6628,10 @@ var AnimatedReveal = React16__namespace.default.forwardRef(
     style,
     ...props
   }, forwardedRef) => {
-    const [isAnimated, setIsAnimated] = React16.useState(false);
-    const internalRef = React16.useRef(null);
-    const hasAnimated = React16.useRef(false);
-    const setRef = React16.useCallback(
+    const [isAnimated, setIsAnimated] = React17.useState(false);
+    const internalRef = React17.useRef(null);
+    const hasAnimated = React17.useRef(false);
+    const setRef = React17.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof forwardedRef === "function") forwardedRef(node);
@@ -6401,7 +6639,7 @@ var AnimatedReveal = React16__namespace.default.forwardRef(
       },
       [forwardedRef]
     );
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       if (trigger !== "scroll") return;
       const el = internalRef.current;
       if (!el) return;
@@ -6427,7 +6665,7 @@ var AnimatedReveal = React16__namespace.default.forwardRef(
         setIsAnimated(false);
       }
     } : void 0;
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       if (trigger === "manual" && manualAnimate !== void 0) {
         setIsAnimated(manualAnimate);
       }
@@ -6457,9 +6695,9 @@ var AnimatedReveal = React16__namespace.default.forwardRef(
 );
 AnimatedReveal.displayName = "AnimatedReveal";
 function useFetchedSvg(src) {
-  const [svg, setSvg] = React16.useState(null);
-  const cache = React16.useRef({});
-  React16.useEffect(() => {
+  const [svg, setSvg] = React17.useState(null);
+  const cache = React17.useRef({});
+  React17.useEffect(() => {
     if (!src) {
       setSvg(null);
       return;
@@ -6528,7 +6766,7 @@ function applyMorphAnimation(container, animate, duration, delay, easing) {
     el.style.opacity = animate ? "1" : "0";
   });
 }
-var AnimatedGraphic = React16__namespace.default.forwardRef(
+var AnimatedGraphic = React17__namespace.default.forwardRef(
   ({
     src,
     svgContent,
@@ -6547,11 +6785,11 @@ var AnimatedGraphic = React16__namespace.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const containerRef = React16.useRef(null);
+    const containerRef = React17.useRef(null);
     const fetchedSvg = useFetchedSvg(svgContent ? void 0 : src);
     const resolvedSvg = svgContent ?? fetchedSvg;
-    const prevAnimateRef = React16.useRef(animate);
-    const setRef = React16__namespace.default.useCallback(
+    const prevAnimateRef = React17.useRef(animate);
+    const setRef = React17__namespace.default.useCallback(
       (node) => {
         containerRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -6559,7 +6797,7 @@ var AnimatedGraphic = React16__namespace.default.forwardRef(
       },
       [ref]
     );
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       const el = containerRef.current;
       if (!el || !strokeColor) return;
       const paths = el.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect");
@@ -6567,7 +6805,7 @@ var AnimatedGraphic = React16__namespace.default.forwardRef(
         p.style.stroke = strokeColor;
       });
     }, [resolvedSvg, strokeColor]);
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       const el = containerRef.current;
       if (!el || !resolvedSvg) return;
       if (animation === "draw" || animation === "fill") {
@@ -6592,7 +6830,7 @@ var AnimatedGraphic = React16__namespace.default.forwardRef(
         });
       }
     }, [resolvedSvg, animation]);
-    React16.useEffect(() => {
+    React17.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const id = requestAnimationFrame(() => {
@@ -7393,7 +7631,7 @@ var GeometricPattern = ({
   children,
   className
 }) => {
-  const reactId = React16.useId();
+  const reactId = React17.useId();
   const patternId = `gp${reactId.replace(/:/g, "")}`;
   const size = 60 * scale2;
   const stripHeight = 40 * scale2;
@@ -7628,7 +7866,7 @@ var EdgeDecoration = ({
   width = 15,
   className
 }) => {
-  const id = React16.useId();
+  const id = React17.useId();
   const Variant = VARIANT_MAP2[variant];
   const resolvedColor = color in colorTokenVars2 ? colorTokenVars2[color] : color;
   const sides = side === "both" ? ["left", "right"] : [side];