@elevasis/ui 1.19.0 → 1.20.0

package/dist/components/layout/backgrounds/AuroraBackground.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * Full-viewport fixed background for the "aurora" preset.
+ *
+ * Renders eight emerald/teal light-beam strips inside a slowly-rotating wrapper
+ * anchored above the viewport (origin at top) to evoke the shimmering aurora.
+ *   - Both schemes share geometry: 8 beams at 22.5° increments, soft gradient
+ *     stops (5/25/75/95), rotation anchored -115vmax above center, 180s period.
+ *   - Light mode: emerald beams with `mix-blend-mode: multiply` on a pale mint
+ *     base, top-anchored radial glow, subtle periphery vignette.
+ *   - Dark mode: emerald beams with `mix-blend-mode: screen` on a near-black
+ *     base, top-anchored radial glow, pronounced periphery vignette.
+ * Rotation is disabled for users who prefer reduced motion.
+ */
+export declare function AuroraBackground(): React.JSX.Element;
+//# sourceMappingURL=AuroraBackground.d.ts.map

package/dist/components/layout/backgrounds/AuroraBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuroraBackground.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/backgrounds/AuroraBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA2JzB;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAkBpD"}

package/dist/components/layout/backgrounds/AuroraBackground.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const STYLE = `
+  div[style*="var(--color-background)"][style*="100vh"] {
+    background-color: transparent !important;
+    isolation: isolate;
+  }
+  .aurora-bg-root {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-root {
+    background:
+      radial-gradient(ellipse 95% 45% at 50% -20%, rgba(16, 185, 129, 0.12), transparent 70%),
+      #EFF5F3;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 140% 110% at 50% 0%, transparent 60%, rgba(10, 40, 30, 0.08) 100%);
+    pointer-events: none;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-root {
+    background:
+      radial-gradient(ellipse 95% 45% at 50% -20%, rgba(20, 184, 166, 0.05), transparent 70%),
+      #020807;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 140% 110% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
+    pointer-events: none;
+  }
+  .aurora-bg-wrapper {
+    position: absolute;
+    width: 200vmax;
+    height: 200vmax;
+    top: -115vmax;
+    left: -50vmax;
+    animation: aurora-rotate 180s linear infinite;
+    will-change: transform;
+  }
+  .aurora-bg-beam {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 18vmax;
+    filter: blur(55px);
+    transform-origin: center;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam {
+    mix-blend-mode: multiply;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, #047857 25%, #047857 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.2;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, #065F46 25%, #065F46 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, #059669 25%, #059669 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.2;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, #0F766E 25%, #0F766E 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, #0D9488 25%, #0D9488 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.2;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, #115E59 25%, #115E59 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, #10B981 25%, #10B981 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.2;
+  }
+  [data-mantine-color-scheme="light"] .aurora-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, #134E4A 25%, #134E4A 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam {
+    mix-blend-mode: screen;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, #064E3B 25%, #064E3B 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, #065F46 25%, #065F46 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, #047857 25%, #047857 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, #0F766E 25%, #0F766E 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, #0D9488 25%, #0D9488 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, #115E59 25%, #115E59 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, #134E4A 25%, #134E4A 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .aurora-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, #059669 25%, #059669 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.1;
+  }
+  @keyframes aurora-rotate {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .aurora-bg-wrapper {
+      animation: none;
+    }
+  }
+`;
+/**
+ * Full-viewport fixed background for the "aurora" preset.
+ *
+ * Renders eight emerald/teal light-beam strips inside a slowly-rotating wrapper
+ * anchored above the viewport (origin at top) to evoke the shimmering aurora.
+ *   - Both schemes share geometry: 8 beams at 22.5° increments, soft gradient
+ *     stops (5/25/75/95), rotation anchored -115vmax above center, 180s period.
+ *   - Light mode: emerald beams with `mix-blend-mode: multiply` on a pale mint
+ *     base, top-anchored radial glow, subtle periphery vignette.
+ *   - Dark mode: emerald beams with `mix-blend-mode: screen` on a near-black
+ *     base, top-anchored radial glow, pronounced periphery vignette.
+ * Rotation is disabled for users who prefer reduced motion.
+ */
+export function AuroraBackground() {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: STYLE }), _jsx("div", { className: "aurora-bg-root", "aria-hidden": "true", children: _jsxs("div", { className: "aurora-bg-wrapper", children: [_jsx("div", { className: "aurora-bg-beam aurora-bg-beam-1" }), _jsx("div", { className: "aurora-bg-beam aurora-bg-beam-2" }), _jsx("div", { className: "aurora-bg-beam aurora-bg-beam-3" }), _jsx("div", { className: "aurora-bg-beam aurora-bg-beam-4" }), _jsx("div", { className: "aurora-bg-beam aurora-bg-beam-5" }), _jsx("div", { className: "aurora-bg-beam aurora-bg-beam-6" }), _jsx("div", { className: "aurora-bg-beam aurora-bg-beam-7" }), _jsx("div", { className: "aurora-bg-beam aurora-bg-beam-8" })] }) })] }));
+}

package/dist/components/layout/backgrounds/EmberBackground.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * Full-viewport fixed background for the "ember" preset.
+ *
+ * Renders eight terracotta/amber light-beam strips inside a slowly-rotating
+ * wrapper anchored above the viewport (origin at top) to evoke a glowing forge.
+ *   - Both schemes share geometry: 8 beams at 22.5° increments, soft gradient
+ *     stops (5/25/75/95), rotation anchored -115vmax above center, 180s period.
+ *   - Light mode: terracotta/amber beams with `mix-blend-mode: multiply` on a
+ *     pale terracotta base, top-anchored radial glow, subtle periphery vignette.
+ *   - Dark mode: terracotta/amber beams with `mix-blend-mode: screen` on a
+ *     near-black base, top-anchored radial glow, pronounced periphery vignette.
+ * Rotation is disabled for users who prefer reduced motion.
+ */
+export declare function EmberBackground(): React.JSX.Element;
+//# sourceMappingURL=EmberBackground.d.ts.map

package/dist/components/layout/backgrounds/EmberBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmberBackground.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/backgrounds/EmberBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA2JzB;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAkBnD"}

package/dist/components/layout/backgrounds/EmberBackground.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const STYLE = `
+  div[style*="var(--color-background)"][style*="100vh"] {
+    background-color: transparent !important;
+    isolation: isolate;
+  }
+  .ember-bg-root {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-root {
+    background:
+      radial-gradient(ellipse 80% 40% at 50% -25%, rgba(254, 215, 170, 0.45), transparent 75%),
+      #F7F3EF;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 140% 110% at 50% 0%, transparent 65%, rgba(44, 23, 8, 0.05) 100%);
+    pointer-events: none;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-root {
+    background:
+      radial-gradient(ellipse 95% 45% at 50% -20%, rgba(232, 123, 85, 0.05), transparent 70%),
+      #060302;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 140% 110% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
+    pointer-events: none;
+  }
+  .ember-bg-wrapper {
+    position: absolute;
+    width: 200vmax;
+    height: 200vmax;
+    top: -115vmax;
+    left: -50vmax;
+    animation: ember-rotate 180s linear infinite;
+    will-change: transform;
+  }
+  .ember-bg-beam {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 18vmax;
+    filter: blur(55px);
+    transform-origin: center;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam {
+    mix-blend-mode: multiply;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, #7C2D12 25%, #7C2D12 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, #9A3412 25%, #9A3412 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, #C2410C 25%, #C2410C 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.2;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, #B45309 25%, #B45309 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, #EA580C 25%, #EA580C 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.22;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, #92400E 25%, #92400E 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, #D4603A 25%, #D4603A 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.2;
+  }
+  [data-mantine-color-scheme="light"] .ember-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, #78350F 25%, #78350F 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.16;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam {
+    mix-blend-mode: screen;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, #431407 25%, #431407 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, #7C2D12 25%, #7C2D12 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, #9A3412 25%, #9A3412 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, #B45309 25%, #B45309 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, #C2410C 25%, #C2410C 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.14;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, #92400E 25%, #92400E 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, #EA580C 25%, #EA580C 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .ember-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, #78350F 25%, #78350F 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.1;
+  }
+  @keyframes ember-rotate {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ember-bg-wrapper {
+      animation: none;
+    }
+  }
+`;
+/**
+ * Full-viewport fixed background for the "ember" preset.
+ *
+ * Renders eight terracotta/amber light-beam strips inside a slowly-rotating
+ * wrapper anchored above the viewport (origin at top) to evoke a glowing forge.
+ *   - Both schemes share geometry: 8 beams at 22.5° increments, soft gradient
+ *     stops (5/25/75/95), rotation anchored -115vmax above center, 180s period.
+ *   - Light mode: terracotta/amber beams with `mix-blend-mode: multiply` on a
+ *     pale terracotta base, top-anchored radial glow, subtle periphery vignette.
+ *   - Dark mode: terracotta/amber beams with `mix-blend-mode: screen` on a
+ *     near-black base, top-anchored radial glow, pronounced periphery vignette.
+ * Rotation is disabled for users who prefer reduced motion.
+ */
+export function EmberBackground() {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: STYLE }), _jsx("div", { className: "ember-bg-root", "aria-hidden": "true", children: _jsxs("div", { className: "ember-bg-wrapper", children: [_jsx("div", { className: "ember-bg-beam ember-bg-beam-1" }), _jsx("div", { className: "ember-bg-beam ember-bg-beam-2" }), _jsx("div", { className: "ember-bg-beam ember-bg-beam-3" }), _jsx("div", { className: "ember-bg-beam ember-bg-beam-4" }), _jsx("div", { className: "ember-bg-beam ember-bg-beam-5" }), _jsx("div", { className: "ember-bg-beam ember-bg-beam-6" }), _jsx("div", { className: "ember-bg-beam ember-bg-beam-7" }), _jsx("div", { className: "ember-bg-beam ember-bg-beam-8" })] }) })] }));
+}

package/dist/components/layout/backgrounds/RoseGoldBackground.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * Full-viewport fixed background for the "rose-gold" preset.
+ *
+ * Renders eight copper/rose light-beam strips inside a slowly-rotating wrapper
+ * anchored above the viewport (origin at top) to evoke warm boutique luxury.
+ *   - Both schemes share geometry: 8 beams at 22.5° increments, soft gradient
+ *     stops (5/25/75/95), rotation anchored -115vmax above center, 180s period.
+ *   - Light mode: copper/rose beams with `mix-blend-mode: multiply` on a pale
+ *     rose base, top-anchored radial glow, subtle periphery vignette.
+ *   - Dark mode: copper/rose beams with `mix-blend-mode: screen` on a near-
+ *     black rose base, top-anchored radial glow, pronounced periphery vignette.
+ * Rotation is disabled for users who prefer reduced motion.
+ */
+export declare function RoseGoldBackground(): React.JSX.Element;
+//# sourceMappingURL=RoseGoldBackground.d.ts.map

package/dist/components/layout/backgrounds/RoseGoldBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RoseGoldBackground.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/backgrounds/RoseGoldBackground.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA2JzB;;;;;;;;;;;;GAYG;AACH,wBAAgB,kBAAkB,IAAI,KAAK,CAAC,GAAG,CAAC,OAAO,CAkBtD"}

package/dist/components/layout/backgrounds/RoseGoldBackground.js

@@ -0,0 +1,169 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const STYLE = `
+  div[style*="var(--color-background)"][style*="100vh"] {
+    background-color: transparent !important;
+    isolation: isolate;
+  }
+  .rose-gold-bg-root {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-root {
+    background:
+      radial-gradient(ellipse 95% 45% at 50% -20%, rgba(192, 122, 110, 0.14), transparent 70%),
+      #F4F0EE;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 140% 110% at 50% 0%, transparent 60%, rgba(45, 21, 22, 0.08) 100%);
+    pointer-events: none;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-root {
+    background:
+      radial-gradient(ellipse 95% 45% at 50% -20%, rgba(232, 165, 152, 0.05), transparent 70%),
+      #070405;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 140% 110% at 50% 0%, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
+    pointer-events: none;
+  }
+  .rose-gold-bg-wrapper {
+    position: absolute;
+    width: 200vmax;
+    height: 200vmax;
+    top: -115vmax;
+    left: -50vmax;
+    animation: rose-gold-rotate 180s linear infinite;
+    will-change: transform;
+  }
+  .rose-gold-bg-beam {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 18vmax;
+    filter: blur(55px);
+    transform-origin: center;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam {
+    mix-blend-mode: multiply;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, #881337 25%, #881337 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, #9F1239 25%, #9F1239 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.16;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, #A8695E 25%, #A8695E 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.22;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, #7C2D12 25%, #7C2D12 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.16;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, #C07A6F 25%, #C07A6F 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.22;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, #9A3412 25%, #9A3412 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.16;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, #BE123C 25%, #BE123C 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.18;
+  }
+  [data-mantine-color-scheme="light"] .rose-gold-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, #7F1D1D 25%, #7F1D1D 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.16;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam {
+    mix-blend-mode: screen;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, #4C0519 25%, #4C0519 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, #881337 25%, #881337 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, #9F1239 25%, #9F1239 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, #7C2D12 25%, #7C2D12 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, #A8695E 25%, #A8695E 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.14;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, #C07A6F 25%, #C07A6F 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, #E8A598 25%, #E8A598 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.14;
+  }
+  [data-mantine-color-scheme="dark"] .rose-gold-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, #C8897C 25%, #C8897C 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.1;
+  }
+  @keyframes rose-gold-rotate {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .rose-gold-bg-wrapper {
+      animation: none;
+    }
+  }
+`;
+/**
+ * Full-viewport fixed background for the "rose-gold" preset.
+ *
+ * Renders eight copper/rose light-beam strips inside a slowly-rotating wrapper
+ * anchored above the viewport (origin at top) to evoke warm boutique luxury.
+ *   - Both schemes share geometry: 8 beams at 22.5° increments, soft gradient
+ *     stops (5/25/75/95), rotation anchored -115vmax above center, 180s period.
+ *   - Light mode: copper/rose beams with `mix-blend-mode: multiply` on a pale
+ *     rose base, top-anchored radial glow, subtle periphery vignette.
+ *   - Dark mode: copper/rose beams with `mix-blend-mode: screen` on a near-
+ *     black rose base, top-anchored radial glow, pronounced periphery vignette.
+ * Rotation is disabled for users who prefer reduced motion.
+ */
+export function RoseGoldBackground() {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: STYLE }), _jsx("div", { className: "rose-gold-bg-root", "aria-hidden": "true", children: _jsxs("div", { className: "rose-gold-bg-wrapper", children: [_jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-1" }), _jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-2" }), _jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-3" }), _jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-4" }), _jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-5" }), _jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-6" }), _jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-7" }), _jsx("div", { className: "rose-gold-bg-beam rose-gold-bg-beam-8" })] }) })] }));
+}

package/dist/components/monitoring/ErrorBreakdownTable.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ErrorBreakdownTable - Recent errors table with filtering and sorting
+ * Shows recent errors with details and actions
+ */
+interface ErrorBreakdownTableProps {
+    startDate?: string;
+    endDate?: string;
+    onErrorClick?: (executionId: string) => void;
+}
+export declare function ErrorBreakdownTable({ startDate, endDate, onErrorClick }: ErrorBreakdownTableProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ErrorBreakdownTable.d.ts.map

package/dist/components/monitoring/ErrorBreakdownTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBreakdownTable.d.ts","sourceRoot":"","sources":["../../../src/components/monitoring/ErrorBreakdownTable.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAmCH,UAAU,wBAAwB;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,wBAAwB,2CAwRjG"}

package/dist/components/monitoring/ResourceHealthPanel.d.ts

@@ -0,0 +1,8 @@
+import type { ResourceType, TimeRange } from '@repo/core';
+export interface ResourceHealthPanelProps {
+    resourceId: string;
+    resourceType: ResourceType;
+    timeRange: TimeRange;
+}
+export declare function ResourceHealthPanel({ resourceId, resourceType, timeRange }: ResourceHealthPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResourceHealthPanel.d.ts.map

package/dist/components/monitoring/ResourceHealthPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResourceHealthPanel.d.ts","sourceRoot":"","sources":["../../../src/components/monitoring/ResourceHealthPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAEzD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,YAAY,CAAA;IAC1B,SAAS,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CAwEpG"}

package/dist/components/monitoring/index.d.ts

@@ -0,0 +1,16 @@
+export * from './ExecutionLogsTable';
+export * from './ResourceHealthChart';
+export * from './ResourceHealthPanel';
+export * from './ActivityTable';
+export { ActivityFilters as ActivityFiltersBar, type ActivityFiltersProps } from './ActivityFilters';
+export * from './ActivityCard';
+export * from './ErrorAnalysisCard';
+export * from './ExecutionBreakdownTable';
+export * from './ExecutionHealthCard';
+export { ExecutionLogsFilters as ExecutionLogsFilterBar, type ExecutionLogsFiltersProps } from './ExecutionLogsFilters';
+export * from './CostByModelTable';
+export * from './BusinessImpactCard';
+export * from './CostBreakdownCard';
+export * from './CostMetricsCard';
+export * from './ErrorBreakdownTable';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/monitoring/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/monitoring/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,uBAAuB,CAAA;AACrC,cAAc,iBAAiB,CAAA;AAC/B,OAAO,EAAE,eAAe,IAAI,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAA;AACpG,cAAc,gBAAgB,CAAA;AAC9B,cAAc,qBAAqB,CAAA;AACnC,cAAc,2BAA2B,CAAA;AACzC,cAAc,uBAAuB,CAAA;AACrC,OAAO,EAAE,oBAAoB,IAAI,sBAAsB,EAAE,KAAK,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AACvH,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,qBAAqB,CAAA;AACnC,cAAc,mBAAmB,CAAA;AACjC,cAAc,uBAAuB,CAAA"}