@elevasis/ui 1.11.2 → 1.12.0

package/dist/charts/index.js

@@ -1,8 +1,9 @@
 export { ActivityTrendChart, CombinedTrendChart, CostTrendChart, CyberAreaChart, CyberDonut, CyberDonutTooltip, CyberLegendItem, HeroStatsRow, getSeriesColor, useCyberColors } from '../chunk-CC6BRHQK.js';
-import '../chunk-YGYF6G7W.js';
+import '../chunk-YHTK43DV.js';
 import '../chunk-ARZM3OTI.js';
 import '../chunk-LHQTTUL2.js';
 import '../chunk-ELJIFLCB.js';
+import '../chunk-SZHARWKU.js';
 import '../chunk-FCFLBMVI.js';
 import '../chunk-6TMW6VQ2.js';
 import '../chunk-FWZJH3TL.js';

package/dist/{chunk-THXI3CDT.js → chunk-7RAT54LF.js}

@@ -1,7 +1,9 @@
-import { NavigationButton, ElevasisLoader } from './chunk-YGYF6G7W.js';
+import { NavigationButton } from './chunk-YHTK43DV.js';
+import { useAppearance } from './chunk-HRG3KPL6.js';
+import { ElevasisLoader } from './chunk-SZHARWKU.js';
 import { useRouterContext } from './chunk-Q7DJKLEN.js';
-import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, useComputedColorScheme, Container, Loader, Title, Button, Box, Center, useMantineColorScheme, Switch, Code } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Collapse, HoverCard, Stack, Group, Text, UnstyledButton, Tooltip, ScrollArea, Menu, Avatar, Container, Loader, Title, Button, Box, Center, useMantineColorScheme, Switch, Code } from '@mantine/core';
 import { IconLayoutSidebarLeftExpand, IconLayoutSidebarLeftCollapse, IconUser, IconLogout, IconAlertCircle, IconChevronDown, IconChevronRight, IconMoonStars, IconSun } from '@tabler/icons-react';
 import { createContext, memo, useEffect, createElement, useContext, useState } from 'react';
 
@@ -11,274 +13,6 @@ var sidebarCollapsedWidth = 72;
 var sidebarTransitionDuration = 200;
 var sidebarHoverDelay = 100;
 var topbarHeight = 54;
-var KEYFRAMES = `
-@keyframes elevasis-grain-shift {
-  0%, 100% { transform: translate(0, 0); }
-  10% { transform: translate(-2%, -3%); }
-  20% { transform: translate(3%, 1%); }
-  30% { transform: translate(-1%, 4%); }
-  40% { transform: translate(4%, -2%); }
-  50% { transform: translate(-3%, 2%); }
-  60% { transform: translate(2%, -4%); }
-  70% { transform: translate(-4%, 1%); }
-  80% { transform: translate(1%, 3%); }
-  90% { transform: translate(3%, -1%); }
-}
-`;
-function FilmGrain({ darkOpacity = 0.02, lightOpacity = 0.06, className }) {
-  const colorScheme = useComputedColorScheme();
-  const opacity = colorScheme === "dark" ? darkOpacity : lightOpacity;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "clip",
-        opacity,
-        mixBlendMode: colorScheme === "dark" ? "screen" : "multiply"
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
-        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsx("filter", { id: "elevasis-grain", children: /* @__PURE__ */ jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) }) }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: "-50%",
-              width: "200%",
-              height: "200%",
-              filter: "url(#elevasis-grain)",
-              animation: "elevasis-grain-shift 0.8s steps(4) infinite",
-              willChange: "transform"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-var KEYFRAMES2 = `
-@keyframes elevasis-orb-float-0 {
-  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
-  25% { transform: translate(12vw, -8vh) scale(1.2); opacity: 0.8; }
-  50% { transform: translate(-5vw, -15vh) scale(0.9); opacity: 0.4; }
-  75% { transform: translate(8vw, 5vh) scale(1.1); opacity: 0.7; }
-}
-@keyframes elevasis-orb-float-1 {
-  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
-  30% { transform: translate(-10vw, 6vh) scale(0.85); opacity: 0.3; }
-  60% { transform: translate(7vw, 12vh) scale(1.15); opacity: 0.7; }
-}
-@keyframes elevasis-orb-float-2 {
-  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
-  20% { transform: translate(6vw, 10vh) scale(1.3); opacity: 0.7; }
-  50% { transform: translate(-8vw, -4vh) scale(0.8); opacity: 0.3; }
-  80% { transform: translate(3vw, -12vh) scale(1.1); opacity: 0.6; }
-}
-`;
-var ORB_CONFIGS = [
-  { top: "10%", left: "15%", size: "25vw", anim: "elevasis-orb-float-0", dur: "22s" },
-  { top: "60%", left: "70%", size: "30vw", anim: "elevasis-orb-float-1", dur: "28s" },
-  { top: "30%", left: "50%", size: "20vw", anim: "elevasis-orb-float-2", dur: "32s" },
-  { top: "75%", left: "20%", size: "22vw", anim: "elevasis-orb-float-0", dur: "26s" },
-  { top: "5%", left: "75%", size: "18vw", anim: "elevasis-orb-float-1", dur: "30s" },
-  { top: "45%", left: "5%", size: "24vw", anim: "elevasis-orb-float-2", dur: "24s" }
-];
-function FloatingOrbs({
-  color = "var(--color-primary)",
-  count = 6,
-  className
-}) {
-  const orbs = ORB_CONFIGS.slice(0, count);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "clip"
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES2 }),
-        orbs.map((orb, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: orb.top,
-              left: orb.left,
-              width: orb.size,
-              height: orb.size,
-              borderRadius: "50%",
-              background: `radial-gradient(circle at center, color-mix(in srgb, ${color} 3%, transparent) 0%, transparent 70%)`,
-              filter: "blur(40px)",
-              animation: `${orb.anim} ${orb.dur} ease-in-out infinite`,
-              willChange: "transform, opacity"
-            }
-          },
-          i
-        ))
-      ]
-    }
-  );
-}
-function PerspectiveGrid({
-  glowColor = "rgba(123, 123, 123, 0.1)",
-  className
-}) {
-  const colorScheme = useComputedColorScheme();
-  const lineColor = colorScheme === "dark" ? "rgba(90, 90, 90, 0.1)" : "rgba(120, 120, 120, 0.1)";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "hidden",
-        perspective: "500px"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 0,
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "100%",
-              height: "60%",
-              background: `radial-gradient(ellipse 90% 75% at 50% 112%, ${glowColor} -15%, transparent 45%)`,
-              pointerEvents: "none"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: "-50%",
-              right: "-50%",
-              bottom: 0,
-              height: "70%",
-              backgroundImage: `
-            linear-gradient(${lineColor} 2px, transparent 1px),
-            linear-gradient(90deg, ${lineColor} 2px, transparent 1px)
-          `,
-              backgroundSize: "120px 100px",
-              transform: "rotateX(60deg)",
-              transformOrigin: "bottom center",
-              maskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)",
-              WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-var KEYFRAMES3 = `
-@keyframes elevasis-glow-drift {
-  0% { transform: translateY(0) scale(1); opacity: 1; }
-  20% { transform: translateY(-8%) scale(1.12); opacity: 0.7; }
-  40% { transform: translateY(3%) scale(0.92); opacity: 1; }
-  60% { transform: translateY(5%) scale(1.08); opacity: 0.8; }
-  80% { transform: translateY(-4%) scale(0.95); opacity: 0.9; }
-  100% { transform: translateY(0) scale(1); opacity: 1; }
-}
-@keyframes elevasis-glow-drift-alt {
-  0% { transform: translateY(0) scale(1); opacity: 0.8; }
-  25% { transform: translateY(6%) scale(0.9); opacity: 1; }
-  50% { transform: translateY(-7%) scale(1.15); opacity: 0.7; }
-  75% { transform: translateY(-5%) scale(1.05); opacity: 0.9; }
-  100% { transform: translateY(0) scale(1); opacity: 0.8; }
-}
-@keyframes elevasis-glow-drift-slow {
-  0% { transform: translateY(0) scale(1); opacity: 0.9; }
-  33% { transform: translateY(-4%) scale(1.1); opacity: 0.6; }
-  66% { transform: translateY(6%) scale(0.88); opacity: 1; }
-  100% { transform: translateY(0) scale(1); opacity: 0.9; }
-}
-`;
-function RadiantGlow({
-  color = "var(--color-primary)",
-  opacity = 1,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "clip",
-        opacity
-      },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES3 }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "-80%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "200%",
-              height: "200%",
-              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.8%, transparent) 0%, transparent 70%)`,
-              animation: "elevasis-glow-drift 20s ease-in-out infinite",
-              willChange: "transform"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: "-70%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "180%",
-              height: "180%",
-              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 65%)`,
-              animation: "elevasis-glow-drift-alt 24s ease-in-out infinite",
-              willChange: "transform"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: "-20%",
-              left: "50%",
-              transform: "translateX(-50%)",
-              width: "120%",
-              height: "120%",
-              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 60%)`,
-              animation: "elevasis-glow-drift-slow 28s ease-in-out infinite",
-              willChange: "transform"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
 function Vignette({ strength = 0.35, className }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -294,6 +28,7 @@ function Vignette({ strength = 0.35, className }) {
   );
 }
 var AppShellContainer = ({ children }) => {
+  const { background } = useAppearance();
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -304,10 +39,7 @@ var AppShellContainer = ({ children }) => {
         position: "relative"
       },
       children: [
-        /* @__PURE__ */ jsx(PerspectiveGrid, {}),
-        /* @__PURE__ */ jsx(RadiantGlow, {}),
-        /* @__PURE__ */ jsx(FloatingOrbs, {}),
-        /* @__PURE__ */ jsx(FilmGrain, {}),
+        background,
         children
       ]
     }
@@ -1344,7 +1076,8 @@ var SubshellSidebarSection = ({
 // src/components/layout/sub-shell/constants.ts
 var subsidebarWidth = 200;
 function SubshellLoader() {
-  return /* @__PURE__ */ jsx(Center, { mih: "calc(100vh - 70px)", children: /* @__PURE__ */ jsx(Loader, { size: "lg", loaders: { elevasis: ElevasisLoader }, type: "elevasis" }) });
+  const { loader } = useAppearance();
+  return /* @__PURE__ */ jsx(Center, { mih: "calc(100vh - 70px)", children: loader });
 }
 var TopbarContainer = ({ children }) => {
   const { isCollapsed } = useSidebar();
@@ -1435,4 +1168,4 @@ var Topbar = ({ version, leftContent, children }) => {
   ] });
 };
 
-export { AppShellCenteredContainer, AppShellContainer, AppShellContentContainer, AppShellError, AppShellLoader, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, FilmGrain, FloatingOrbs, LinksGroup, PageContainer, PerspectiveGrid, RadiantGlow, Sidebar, SidebarListItem, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellLoader, SubshellRightSideContainer, SubshellSidebar, SubshellSidebarSection, Topbar, TopbarContainer, Vignette, sidebarCollapsedWidth, sidebarHoverDelay, sidebarTransitionDuration, sidebarWidth, subsidebarWidth, topbarHeight, useSidebar, useSidebarCollapse };
+export { AppShellCenteredContainer, AppShellContainer, AppShellContentContainer, AppShellError, AppShellLoader, AppShellRightSideContainer, AppShellRightSideOuterContainer, AppTopbarAdjusterWrapper, CollapsibleSidebarGroup, LinksGroup, PageContainer, Sidebar, SidebarListItem, SidebarProvider, SubshellContainer, SubshellContentContainer, SubshellLoader, SubshellRightSideContainer, SubshellSidebar, SubshellSidebarSection, Topbar, TopbarContainer, Vignette, sidebarCollapsedWidth, sidebarHoverDelay, sidebarTransitionDuration, sidebarWidth, subsidebarWidth, topbarHeight, useSidebar, useSidebarCollapse };

package/dist/{chunk-AQZGGSZZ.js → chunk-C27QFR3V.js}

@@ -1,7 +1,7 @@
 import { getTimeRangeDates, observabilityKeys } from './chunk-ARZM3OTI.js';
 import { useSupabase } from './chunk-JGJSZ3UE.js';
 import { GRAPH_CONSTANTS } from './chunk-F6RBK7NJ.js';
-import { useNotificationAdapter } from './chunk-564T2YKH.js';
+import { useNotificationAdapter } from './chunk-I427OSNH.js';
 import { HTTP_HEADERS } from './chunk-RULQSZYX.js';
 import { STALE_TIME_MONITORING, REFETCH_INTERVAL_DASHBOARD, REFETCH_INTERVAL_RUNNING, WS_MAX_RETRIES_BEFORE_ERROR, WS_RECONNECT_BASE_DELAY, WS_RECONNECT_MAX_DELAY, STALE_TIME_DEFAULT, STALE_TIME_ADMIN } from './chunk-FCFLBMVI.js';
 import { useStableAccessToken } from './chunk-FWZJH3TL.js';
@@ -10,7 +10,7 @@ import { useOrganization } from './chunk-DD3CCMCZ.js';
 import { useAuthContext } from './chunk-7PLEQFHO.js';
 import { useQuery, useQueryClient, useMutation, useQueries } from '@tanstack/react-query';
 import { z } from 'zod';
-import { useCallback, useMemo, useState, useRef, useEffect, useId } from 'react';
+import { useState, useCallback, useMemo, useRef, useEffect, useId } from 'react';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
@@ -534,6 +534,28 @@ function useResourceDefinition(resourceId, enabled = true) {
     retryDelay: (attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 3e4)
   });
 }
+function useArchivedLogs(executionId) {
+  const { apiRequest } = useElevasisServices();
+  const [logs, setLogs] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetch = useCallback(async () => {
+    if (!executionId || isLoading) return;
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await apiRequest(
+        `/observability/executions/${executionId}/archived-logs`
+      );
+      setLogs(response.logs);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load archived logs");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [executionId, apiRequest, isLoading]);
+  return { logs, isLoading, error, fetch };
+}
 function useActivityTrend(params = {}) {
   const { apiRequest, isReady, organizationId } = useElevasisServices();
   return useQuery({
@@ -2547,4 +2569,4 @@ function useResourceExecutions({ resourceId, timeRange, enabled = true }) {
   });
 }
 
-export { CredentialNameSchema, OperationsService, UuidSchema, createUseFeatureAccess, executionsKeys, isSessionCapable, operationsKeys, scheduleKeys, sessionsKeys, sortData, useActivities, useActivityTrend, useArchiveSession, useBatchDelete, useBatchedResourcesHealth, useBulkDeleteExecutions, useBusinessImpact, useCancelExecution, useCancelSchedule, useCheckpointTasks, useCommandQueue, useCommandQueueTotals, useCommandViewData, useCommandViewLayout, useCommandViewStats, useCommandViewStore, useCostBreakdown, useCostByModel, useCostSummary, useCostTrends, useCreateSchedule, useCreateSession, useDashboardMetrics, useDeleteExecution, useDeleteSchedule, useDeleteSession, useDeleteTask, useDeploymentDocs, useErrorAnalysis, useErrorDetail, useErrorDetails, useErrorDistribution, useErrorNotification, useExecuteAsync, useExecution, useExecutionHealth, useExecutionLogSSE, useExecutionLogs, useExecutionPanelState, useExecutions, useGetExecutionHistory, useGetSchedule, useGraphStats, useListSchedules, useMarkAllAsRead, useMarkAsRead, useNotificationCount, useNotifications, usePaginationState, usePatchTask, usePauseSchedule, useRecentExecutionsByResource, useResolveAllErrors, useResolveError, useResolveErrorsByExecution, useResourceDefinition, useResourceErrors, useResourceExecutions, useResources, useResourcesHealth, useResumeSchedule, useRetryExecution, useSSEConnection, useScheduledTasks, useSession, useSessionExecution, useSessionExecutions, useSessionMessages, useSessionWebSocket, useSessions, useSortedData, useSubmitAction, useSuccessNotification, useTableSelection, useTableSort, useTestNotification, useTopFailingResources, useUnresolveError, useUnresolvedErrors, useUpdateAnchor, useUpdateSchedule, useWarningNotification };
+export { CredentialNameSchema, OperationsService, UuidSchema, createUseFeatureAccess, executionsKeys, isSessionCapable, operationsKeys, scheduleKeys, sessionsKeys, sortData, useActivities, useActivityTrend, useArchiveSession, useArchivedLogs, useBatchDelete, useBatchedResourcesHealth, useBulkDeleteExecutions, useBusinessImpact, useCancelExecution, useCancelSchedule, useCheckpointTasks, useCommandQueue, useCommandQueueTotals, useCommandViewData, useCommandViewLayout, useCommandViewStats, useCommandViewStore, useCostBreakdown, useCostByModel, useCostSummary, useCostTrends, useCreateSchedule, useCreateSession, useDashboardMetrics, useDeleteExecution, useDeleteSchedule, useDeleteSession, useDeleteTask, useDeploymentDocs, useErrorAnalysis, useErrorDetail, useErrorDetails, useErrorDistribution, useErrorNotification, useExecuteAsync, useExecution, useExecutionHealth, useExecutionLogSSE, useExecutionLogs, useExecutionPanelState, useExecutions, useGetExecutionHistory, useGetSchedule, useGraphStats, useListSchedules, useMarkAllAsRead, useMarkAsRead, useNotificationCount, useNotifications, usePaginationState, usePatchTask, usePauseSchedule, useRecentExecutionsByResource, useResolveAllErrors, useResolveError, useResolveErrorsByExecution, useResourceDefinition, useResourceErrors, useResourceExecutions, useResources, useResourcesHealth, useResumeSchedule, useRetryExecution, useSSEConnection, useScheduledTasks, useSession, useSessionExecution, useSessionExecutions, useSessionMessages, useSessionWebSocket, useSessions, useSortedData, useSubmitAction, useSuccessNotification, useTableSelection, useTableSort, useTestNotification, useTopFailingResources, useUnresolveError, useUnresolvedErrors, useUpdateAnchor, useUpdateSchedule, useWarningNotification };

package/dist/chunk-HRG3KPL6.js

@@ -0,0 +1,295 @@
+import { createContext, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useComputedColorScheme } from '@mantine/core';
+
+// src/provider/AppearanceContext.tsx
+var AppearanceContext = createContext(null);
+function AppearanceProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(AppearanceContext.Provider, { value, children });
+}
+function useAppearance() {
+  const ctx = useContext(AppearanceContext);
+  if (!ctx) {
+    throw new Error("useAppearance must be used within an AppearanceProvider (ElevasisCoreProvider)");
+  }
+  return ctx;
+}
+function PerspectiveGrid({
+  glowColor = "rgba(123, 123, 123, 0.1)",
+  className
+}) {
+  const colorScheme = useComputedColorScheme();
+  const lineColor = colorScheme === "dark" ? "rgba(90, 90, 90, 0.1)" : "rgba(120, 120, 120, 0.1)";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "hidden",
+        perspective: "500px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "100%",
+              height: "60%",
+              background: `radial-gradient(ellipse 90% 75% at 50% 112%, ${glowColor} -15%, transparent 45%)`,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "-50%",
+              right: "-50%",
+              bottom: 0,
+              height: "70%",
+              backgroundImage: `
+            linear-gradient(${lineColor} 2px, transparent 1px),
+            linear-gradient(90deg, ${lineColor} 2px, transparent 1px)
+          `,
+              backgroundSize: "120px 100px",
+              transform: "rotateX(60deg)",
+              transformOrigin: "bottom center",
+              maskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)",
+              WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var KEYFRAMES = `
+@keyframes elevasis-glow-drift {
+  0% { transform: translateY(0) scale(1); opacity: 1; }
+  20% { transform: translateY(-8%) scale(1.12); opacity: 0.7; }
+  40% { transform: translateY(3%) scale(0.92); opacity: 1; }
+  60% { transform: translateY(5%) scale(1.08); opacity: 0.8; }
+  80% { transform: translateY(-4%) scale(0.95); opacity: 0.9; }
+  100% { transform: translateY(0) scale(1); opacity: 1; }
+}
+@keyframes elevasis-glow-drift-alt {
+  0% { transform: translateY(0) scale(1); opacity: 0.8; }
+  25% { transform: translateY(6%) scale(0.9); opacity: 1; }
+  50% { transform: translateY(-7%) scale(1.15); opacity: 0.7; }
+  75% { transform: translateY(-5%) scale(1.05); opacity: 0.9; }
+  100% { transform: translateY(0) scale(1); opacity: 0.8; }
+}
+@keyframes elevasis-glow-drift-slow {
+  0% { transform: translateY(0) scale(1); opacity: 0.9; }
+  33% { transform: translateY(-4%) scale(1.1); opacity: 0.6; }
+  66% { transform: translateY(6%) scale(0.88); opacity: 1; }
+  100% { transform: translateY(0) scale(1); opacity: 0.9; }
+}
+`;
+function RadiantGlow({
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "clip",
+        opacity
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-80%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "200%",
+              height: "200%",
+              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.8%, transparent) 0%, transparent 70%)`,
+              animation: "elevasis-glow-drift 20s ease-in-out infinite",
+              willChange: "transform"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "-70%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "180%",
+              height: "180%",
+              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 65%)`,
+              animation: "elevasis-glow-drift-alt 24s ease-in-out infinite",
+              willChange: "transform"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-20%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "120%",
+              height: "120%",
+              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 60%)`,
+              animation: "elevasis-glow-drift-slow 28s ease-in-out infinite",
+              willChange: "transform"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var KEYFRAMES2 = `
+@keyframes elevasis-orb-float-0 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
+  25% { transform: translate(12vw, -8vh) scale(1.2); opacity: 0.8; }
+  50% { transform: translate(-5vw, -15vh) scale(0.9); opacity: 0.4; }
+  75% { transform: translate(8vw, 5vh) scale(1.1); opacity: 0.7; }
+}
+@keyframes elevasis-orb-float-1 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
+  30% { transform: translate(-10vw, 6vh) scale(0.85); opacity: 0.3; }
+  60% { transform: translate(7vw, 12vh) scale(1.15); opacity: 0.7; }
+}
+@keyframes elevasis-orb-float-2 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
+  20% { transform: translate(6vw, 10vh) scale(1.3); opacity: 0.7; }
+  50% { transform: translate(-8vw, -4vh) scale(0.8); opacity: 0.3; }
+  80% { transform: translate(3vw, -12vh) scale(1.1); opacity: 0.6; }
+}
+`;
+var ORB_CONFIGS = [
+  { top: "10%", left: "15%", size: "25vw", anim: "elevasis-orb-float-0", dur: "22s" },
+  { top: "60%", left: "70%", size: "30vw", anim: "elevasis-orb-float-1", dur: "28s" },
+  { top: "30%", left: "50%", size: "20vw", anim: "elevasis-orb-float-2", dur: "32s" },
+  { top: "75%", left: "20%", size: "22vw", anim: "elevasis-orb-float-0", dur: "26s" },
+  { top: "5%", left: "75%", size: "18vw", anim: "elevasis-orb-float-1", dur: "30s" },
+  { top: "45%", left: "5%", size: "24vw", anim: "elevasis-orb-float-2", dur: "24s" }
+];
+function FloatingOrbs({
+  color = "var(--color-primary)",
+  count = 6,
+  className
+}) {
+  const orbs = ORB_CONFIGS.slice(0, count);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "clip"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES2 }),
+        orbs.map((orb, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: orb.top,
+              left: orb.left,
+              width: orb.size,
+              height: orb.size,
+              borderRadius: "50%",
+              background: `radial-gradient(circle at center, color-mix(in srgb, ${color} 3%, transparent) 0%, transparent 70%)`,
+              filter: "blur(40px)",
+              animation: `${orb.anim} ${orb.dur} ease-in-out infinite`,
+              willChange: "transform, opacity"
+            }
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+var KEYFRAMES3 = `
+@keyframes elevasis-grain-shift {
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-2%, -3%); }
+  20% { transform: translate(3%, 1%); }
+  30% { transform: translate(-1%, 4%); }
+  40% { transform: translate(4%, -2%); }
+  50% { transform: translate(-3%, 2%); }
+  60% { transform: translate(2%, -4%); }
+  70% { transform: translate(-4%, 1%); }
+  80% { transform: translate(1%, 3%); }
+  90% { transform: translate(3%, -1%); }
+}
+`;
+function FilmGrain({ darkOpacity = 0.02, lightOpacity = 0.06, className }) {
+  const colorScheme = useComputedColorScheme();
+  const opacity = colorScheme === "dark" ? darkOpacity : lightOpacity;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "clip",
+        opacity,
+        mixBlendMode: colorScheme === "dark" ? "screen" : "multiply"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES3 }),
+        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsx("filter", { id: "elevasis-grain", children: /* @__PURE__ */ jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: "-50%",
+              width: "200%",
+              height: "200%",
+              filter: "url(#elevasis-grain)",
+              animation: "elevasis-grain-shift 0.8s steps(4) infinite",
+              willChange: "transform"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function AppBackground({ children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(PerspectiveGrid, {}),
+    /* @__PURE__ */ jsx(RadiantGlow, {}),
+    /* @__PURE__ */ jsx(FloatingOrbs, {}),
+    /* @__PURE__ */ jsx(FilmGrain, {}),
+    children
+  ] });
+}
+
+export { AppBackground, AppearanceProvider, FilmGrain, FloatingOrbs, PerspectiveGrid, RadiantGlow, useAppearance };