@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41

package/src/lib/zstd-browser-decoder.ts

@@ -0,0 +1,42 @@
+/**
+ * Browser zstd decoder for the o11y read path.
+ *
+ * The Web `DecompressionStream` has no zstd support, so `@workflow/core`'s
+ * `hydrateDataWithKey` delegates zstd inflation to a decoder registered via
+ * `registerZstdDecoder`. This module supplies that decoder, backed by the
+ * `@tootallnate/zstd-wasm` single-file WASM decoder.
+ *
+ * The package leaves WASM sourcing to the caller; we resolve the shipped
+ * `zstd.wasm` as a bundler asset (`new URL(..., import.meta.url)`, the same
+ * pattern the trace-viewer Worker uses) and compile it once, lazily — the
+ * WASM is fetched only the first time a zstd payload is actually decoded.
+ */
+import { registerZstdDecoder } from '@workflow/core/serialization-format';
+
+let registered = false;
+let modulePromise: Promise<WebAssembly.Module> | undefined;
+
+function loadWasmModule(): Promise<WebAssembly.Module> {
+  if (!modulePromise) {
+    const url = new URL('@tootallnate/zstd-wasm/zstd.wasm', import.meta.url);
+    modulePromise = fetch(url)
+      .then((res) => res.arrayBuffer())
+      .then((bytes) => WebAssembly.compile(bytes));
+  }
+  return modulePromise;
+}
+
+/**
+ * Register the browser zstd decoder with `@workflow/core` (idempotent).
+ * Call this before hydrating payloads that may be zstd-compressed; the
+ * actual WASM compile + decode happens lazily on first use.
+ */
+export function ensureZstdDecoderRegistered(): void {
+  if (registered) return;
+  registered = true;
+  registerZstdDecoder(async (payload) => {
+    const { decompressBytes } = await import('@tootallnate/zstd-wasm');
+    const wasmModule = await loadWasmModule();
+    return decompressBytes(wasmModule, payload);
+  });
+}

package/src/styles.css

@@ -12,176 +12,247 @@
  *   import '@workflow/web-shared/styles.css';
  */
 
+@custom-variant dark-theme (&:where(.dark-theme, .dark-theme *, .dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
+@custom-variant light-theme (&:where(.light-theme, .light-theme *, .light, .light *));
+
 :root {
+  --ds-black: oklch(0 0 0);
+  --ds-white: oklch(1 0 0);
+
   /* Background */
-  --ds-background-100: hsl(0, 0%, 100%);
-  --ds-background-200: hsl(0, 0%, 98%);
+  --ds-background-100: oklch(1 0 0);
+  --ds-background-200: oklch(0.984 0 0);
 
   /* Gray */
-  --ds-gray-100: hsl(0, 0%, 95%);
-  --ds-gray-200: hsl(0, 0%, 92%);
-  --ds-gray-300: hsl(0, 0%, 90%);
-  --ds-gray-400: hsl(0, 0%, 92%);
-  --ds-gray-500: hsl(0, 0%, 79%);
-  --ds-gray-600: hsl(0, 0%, 66%);
-  --ds-gray-700: hsl(0, 0%, 56%);
-  --ds-gray-800: hsl(0, 0%, 49%);
-  --ds-gray-900: hsl(0, 0%, 40%);
-  --ds-gray-1000: hsl(0, 0%, 9%);
+  --ds-gray-100: oklch(0.961 0 0);
+  --ds-gray-200: oklch(0.94 0 0);
+  --ds-gray-300: oklch(0.925 0 0);
+  --ds-gray-400: oklch(0.937 0 0);
+  --ds-gray-500: oklch(0.836 0 0);
+  --ds-gray-600: oklch(0.732 0 0);
+  --ds-gray-700: oklch(0.65 0 0);
+  --ds-gray-800: oklch(0.59 0 0);
+  --ds-gray-900: oklch(0.42 0 0);
+  --ds-gray-1000: oklch(0.205 0 0);
 
   /* Gray Alpha */
-  --ds-gray-alpha-100: rgba(0, 0, 0, 0.05);
-  --ds-gray-alpha-200: hsla(0, 0%, 0%, 0.081);
-  --ds-gray-alpha-400: hsla(0, 0%, 0%, 0.08);
-  --ds-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
-  --ds-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
+  --ds-gray-alpha-100: oklch(0 0 0 / 0.05);
+  --ds-gray-alpha-200: oklch(0 0 0 / 0.081);
+  --ds-gray-alpha-300: oklch(0 0 0 / 0.1);
+  --ds-gray-alpha-400: oklch(0 0 0 / 0.08);
+  --ds-gray-alpha-500: oklch(0 0 0 / 0.21);
+  --ds-gray-alpha-600: oklch(0 0 0 / 0.24);
+  --ds-gray-alpha-700: oklch(0 0 0 / 0.44);
+  --ds-gray-alpha-800: oklch(0 0 0 / 0.51);
+  --ds-gray-alpha-900: oklch(0 0 0 / 0.7);
+  --ds-gray-alpha-1000: oklch(0 0 0 / 0.91);
+
+  /* Focus */
+  --ds-focus-color: var(--ds-blue-700);
 
   /* Blue */
-  --ds-blue-100: hsl(212, 100%, 97%);
-  --ds-blue-200: hsl(210, 100%, 96%);
-  --ds-blue-300: hsl(210, 100%, 94%);
-  --ds-blue-400: hsl(209, 100%, 90%);
-  --ds-blue-500: hsl(209, 100%, 80%);
-  --ds-blue-600: hsl(208, 100%, 66%);
-  --ds-blue-700: hsl(212, 100%, 48%);
-  --ds-blue-900: hsl(211, 100%, 42%);
+  --ds-blue-100: oklch(97.32% 0.0141 251.56);
+  --ds-blue-200: oklch(96.29% 0.0195 250.59);
+  --ds-blue-300: oklch(94.58% 0.0293 249.85);
+  --ds-blue-400: oklch(91.58% 0.0473 245.12);
+  --ds-blue-500: oklch(82.75% 0.0979 248.48);
+  --ds-blue-600: oklch(73.08% 0.1583 248.13);
+  --ds-blue-700: oklch(57.61% 0.2508 258.23);
+  --ds-blue-800: oklch(51.51% 0.2399 257.85);
+  --ds-blue-900: oklch(53.18% 0.2399 256.99);
+  --ds-blue-1000: oklch(26.67% 0.1099 254.34);
 
   /* Red */
-  --ds-red-100: hsl(0, 100%, 97%);
-  --ds-red-200: hsl(0, 100%, 96%);
-  --ds-red-300: hsl(0, 100%, 95%);
-  --ds-red-400: hsl(0, 90%, 92%);
-  --ds-red-500: hsl(0, 82%, 85%);
-  --ds-red-600: hsl(359, 90%, 71%);
-  --ds-red-700: hsl(358, 75%, 59%);
-  --ds-red-900: hsl(358, 66%, 48%);
+  --ds-red-100: oklch(96.5% 0.0223 13.09);
+  --ds-red-200: oklch(95.41% 0.0299 14.25);
+  --ds-red-300: oklch(94.33% 0.0369 15.01);
+  --ds-red-400: oklch(91.51% 0.0471 19.8);
+  --ds-red-500: oklch(84.47% 0.1018 17.71);
+  --ds-red-600: oklch(71.12% 0.1881 21.22);
+  --ds-red-700: oklch(62.56% 0.2524 23.03);
+  --ds-red-800: oklch(58.19% 0.2482 25.15);
+  --ds-red-900: oklch(54.99% 0.232 25.29);
+  --ds-red-1000: oklch(24.8% 0.1041 18.86);
 
   /* Amber */
-  --ds-amber-100: hsl(39, 100%, 95%);
-  --ds-amber-200: hsl(44, 100%, 92%);
-  --ds-amber-300: hsl(43, 96%, 90%);
-  --ds-amber-400: hsl(42, 100%, 78%);
-  --ds-amber-500: hsl(38, 100%, 71%);
-  --ds-amber-600: hsl(36, 90%, 62%);
-  --ds-amber-700: hsl(39, 100%, 57%);
-  --ds-amber-900: hsl(30, 100%, 32%);
+  --ds-amber-100: oklch(97.48% 0.0331 85.79);
+  --ds-amber-200: oklch(96.81% 0.0495 90.24);
+  --ds-amber-300: oklch(95.93% 0.0636 90.52);
+  --ds-amber-400: oklch(91.02% 0.1322 88.25);
+  --ds-amber-500: oklch(86.55% 0.1583 79.63);
+  --ds-amber-600: oklch(80.25% 0.1953 73.59);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-800: oklch(77.21% 0.1991 64.28);
+  --ds-amber-900: oklch(52.79% 0.1496 54.65);
+  --ds-amber-1000: oklch(30.83% 0.099 45.48);
 
   /* Green */
-  --ds-green-100: hsl(120, 60%, 96%);
-  --ds-green-200: hsl(120, 60%, 95%);
-  --ds-green-300: hsl(120, 60%, 91%);
-  --ds-green-400: hsl(122, 60%, 86%);
-  --ds-green-500: hsl(124, 60%, 75%);
-  --ds-green-600: hsl(125, 60%, 64%);
-  --ds-green-700: hsl(131, 41%, 46%);
-  --ds-green-900: hsl(133, 50%, 32%);
+  --ds-green-100: oklch(97.59% 0.0289 145.42);
+  --ds-green-200: oklch(96.92% 0.037 147.15);
+  --ds-green-300: oklch(94.6% 0.0674 144.23);
+  --ds-green-400: oklch(91.49% 0.0976 146.24);
+  --ds-green-500: oklch(85.45% 0.1627 146.3);
+  --ds-green-600: oklch(80.25% 0.214 145.18);
+  --ds-green-700: oklch(64.58% 0.1746 147.27);
+  --ds-green-800: oklch(57.81% 0.1507 147.5);
+  --ds-green-900: oklch(51.75% 0.1453 147.65);
+  --ds-green-1000: oklch(29.15% 0.1197 147.38);
 
   /* Teal */
-  --ds-teal-200: hsl(167, 70%, 94%);
-  --ds-teal-400: hsl(170, 70%, 85%);
-  --ds-teal-500: hsl(170, 70%, 72%);
-  --ds-teal-900: hsl(174, 91%, 25%);
+  --ds-teal-100: oklch(97.72% 0.0359 186.7);
+  --ds-teal-200: oklch(97.06% 0.0347 180.66);
+  --ds-teal-300: oklch(94.92% 0.0478 182.07);
+  --ds-teal-400: oklch(92.76% 0.0718 183.78);
+  --ds-teal-500: oklch(86.88% 0.1344 182.42);
+  --ds-teal-600: oklch(81.5% 0.161 178.96);
+  --ds-teal-700: oklch(64.92% 0.1572 181.95);
+  --ds-teal-800: oklch(57.53% 0.1392 181.66);
+  --ds-teal-900: oklch(52.08% 0.1251 182.93);
+  --ds-teal-1000: oklch(32.11% 0.0788 179.82);
 
   /* Purple */
-  --ds-purple-100: hsl(276, 100%, 97%);
-  --ds-purple-200: hsl(277, 87%, 97%);
-  --ds-purple-300: hsl(274, 78%, 95%);
-  --ds-purple-400: hsl(276, 71%, 92%);
-  --ds-purple-500: hsl(274, 70%, 82%);
-  --ds-purple-600: hsl(273, 72%, 73%);
-  --ds-purple-700: hsl(272, 51%, 54%);
-  --ds-purple-900: hsl(274, 71%, 43%);
+  --ds-purple-100: oklch(96.65% 0.0244 312.19);
+  --ds-purple-200: oklch(96.73% 0.0228 309.8);
+  --ds-purple-300: oklch(94.85% 0.0364 310.15);
+  --ds-purple-400: oklch(91.77% 0.0614 312.82);
+  --ds-purple-500: oklch(81.26% 0.1409 310.8);
+  --ds-purple-600: oklch(72.07% 0.2083 308.19);
+  --ds-purple-700: oklch(55.5% 0.3008 306.12);
+  --ds-purple-800: oklch(48.58% 0.2638 305.73);
+  --ds-purple-900: oklch(47.18% 0.2579 304);
+  --ds-purple-1000: oklch(23.96% 0.13 305.66);
 
   /* Pink */
-  --ds-pink-200: hsl(340, 90%, 96%);
-  --ds-pink-400: hsl(341, 76%, 91%);
-  --ds-pink-500: hsl(340, 75%, 84%);
-  --ds-pink-900: hsl(336, 65%, 45%);
+  --ds-pink-100: oklch(95.69% 0.0359 344.62);
+  --ds-pink-200: oklch(95.71% 0.0321 353.14);
+  --ds-pink-300: oklch(93.83% 0.0451 356.29);
+  --ds-pink-400: oklch(91.12% 0.0573 358.82);
+  --ds-pink-500: oklch(84.28% 0.0915 356.99);
+  --ds-pink-600: oklch(74.33% 0.1547 0.24);
+  --ds-pink-700: oklch(63.52% 0.238 1.01);
+  --ds-pink-800: oklch(59.51% 0.2339 4.21);
+  --ds-pink-900: oklch(53.5% 0.2058 2.84);
+  --ds-pink-1000: oklch(26% 0.0977 359);
 
   /* Shadows */
   --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.04);
+  --ds-shadow-tooltip:
+    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--ds-background-200);
 }
 
 /* Dark theme defaults */
 .dark-theme,
 .dark,
 [data-theme="dark"] {
-  --ds-background-100: hsl(0, 0%, 7%);
-  --ds-background-200: hsl(0, 0%, 10%);
-
-  --ds-gray-100: hsl(0, 0%, 11%);
-  --ds-gray-200: hsl(0, 0%, 14%);
-  --ds-gray-300: hsl(0, 0%, 17%);
-  --ds-gray-400: hsl(0, 0%, 14%);
-  --ds-gray-500: hsl(0, 0%, 23%);
-  --ds-gray-600: hsl(0, 0%, 34%);
-  --ds-gray-700: hsl(0, 0%, 44%);
-  --ds-gray-800: hsl(0, 0%, 51%);
-  --ds-gray-900: hsl(0, 0%, 63%);
-  --ds-gray-1000: hsl(0, 0%, 93%);
-
-  --ds-gray-alpha-100: rgba(255, 255, 255, 0.06);
-  --ds-gray-alpha-200: rgba(255, 255, 255, 0.09);
-  --ds-gray-alpha-400: rgba(255, 255, 255, 0.14);
-  --ds-gray-alpha-700: rgba(255, 255, 255, 0.45);
-  --ds-gray-alpha-1000: rgba(255, 255, 255, 0.92);
-
-  --ds-blue-100: hsl(216, 50%, 12%);
-  --ds-blue-200: hsl(214, 59%, 15%);
-  --ds-blue-300: hsl(213, 71%, 20%);
-  --ds-blue-400: hsl(212, 78%, 23%);
-  --ds-blue-500: hsl(211, 86%, 27%);
-  --ds-blue-600: hsl(210, 92%, 36%);
-  --ds-blue-700: hsl(210, 100%, 45%);
-  --ds-blue-900: hsl(210, 100%, 72%);
-
-  --ds-red-100: hsl(357, 37%, 12%);
-  --ds-red-200: hsl(357, 46%, 16%);
-  --ds-red-300: hsl(356, 54%, 22%);
-  --ds-red-400: hsl(357, 55%, 26%);
-  --ds-red-500: hsl(357, 60%, 32%);
-  --ds-red-600: hsl(358, 75%, 44%);
-  --ds-red-700: hsl(358, 75%, 59%);
-  --ds-red-900: hsl(358, 100%, 76%);
-
-  --ds-amber-100: hsl(35, 100%, 8%);
-  --ds-amber-200: hsl(33, 100%, 11%);
-  --ds-amber-300: hsl(33, 100%, 15%);
-  --ds-amber-400: hsl(35, 100%, 17%);
-  --ds-amber-500: hsl(35, 100%, 22%);
-  --ds-amber-600: hsl(36, 100%, 30%);
-  --ds-amber-700: hsl(39, 100%, 57%);
-  --ds-amber-900: hsl(39, 100%, 77%);
-
-  --ds-green-100: hsl(136, 50%, 9%);
-  --ds-green-200: hsl(137, 50%, 12%);
-  --ds-green-300: hsl(136, 50%, 14%);
-  --ds-green-400: hsl(135, 70%, 16%);
-  --ds-green-500: hsl(135, 70%, 23%);
-  --ds-green-600: hsl(135, 70%, 34%);
-  --ds-green-700: hsl(131, 41%, 46%);
-  --ds-green-900: hsl(120, 46%, 72%);
-
-  --ds-teal-200: hsl(169, 78%, 10%);
-  --ds-teal-400: hsl(170, 70%, 17%);
-  --ds-teal-500: hsl(170, 70%, 22%);
-  --ds-teal-900: hsl(168, 80%, 60%);
-
-  --ds-purple-100: hsl(283, 30%, 12%);
-  --ds-purple-200: hsl(281, 38%, 16%);
-  --ds-purple-300: hsl(279, 44%, 23%);
-  --ds-purple-400: hsl(277, 46%, 28%);
-  --ds-purple-500: hsl(274, 49%, 35%);
-  --ds-purple-600: hsl(272, 51%, 54%);
-  --ds-purple-700: hsl(272, 51%, 54%);
-  --ds-purple-900: hsl(275, 80%, 71%);
-
-  --ds-pink-200: hsl(335, 32%, 14%);
-  --ds-pink-400: hsl(336, 44%, 25%);
-  --ds-pink-500: hsl(336, 50%, 32%);
-  --ds-pink-900: hsl(336, 80%, 70%);
+  --ds-background-100: oklch(0 0 0);
+  --ds-background-200: oklch(0.027 0 0);
+
+  --ds-gray-100: oklch(0.218 0 0);
+  --ds-gray-200: oklch(0.239 0 0);
+  --ds-gray-300: oklch(0.281 0 0);
+  --ds-gray-400: oklch(0.301 0 0);
+  --ds-gray-500: oklch(0.39 0 0);
+  --ds-gray-600: oklch(0.623 0 0);
+  --ds-gray-700: oklch(0.65 0 0);
+  --ds-gray-800: oklch(0.59 0 0);
+  --ds-gray-900: oklch(0.706 0 0);
+  --ds-gray-1000: oklch(0.946 0 0);
+
+  --ds-gray-alpha-100: oklch(1 0 0 / 0.07);
+  --ds-gray-alpha-200: oklch(1 0 0 / 0.09);
+  --ds-gray-alpha-300: oklch(1 0 0 / 0.13);
+  --ds-gray-alpha-400: oklch(1 0 0 / 0.14);
+  --ds-gray-alpha-500: oklch(1 0 0 / 0.24);
+  --ds-gray-alpha-600: oklch(1 0 0 / 0.51);
+  --ds-gray-alpha-700: oklch(1 0 0 / 0.54);
+  --ds-gray-alpha-800: oklch(1 0 0 / 0.47);
+  --ds-gray-alpha-900: oklch(1 0 0 / 0.61);
+  --ds-gray-alpha-1000: oklch(1 0 0 / 0.92);
+
+  --ds-focus-color: var(--ds-blue-900);
+
+  --ds-blue-100: oklch(22.17% 0.069 259.89);
+  --ds-blue-200: oklch(25.45% 0.0811 255.8);
+  --ds-blue-300: oklch(30.86% 0.1022 255.21);
+  --ds-blue-400: oklch(34.1% 0.121 254.74);
+  --ds-blue-500: oklch(38.5% 0.1403 254.4);
+  --ds-blue-600: oklch(64.94% 0.1982 251.81);
+  --ds-blue-700: oklch(57.61% 0.2321 258.23);
+  --ds-blue-800: oklch(51.51% 0.2307 257.85);
+  --ds-blue-900: oklch(71.7% 0.1648 250.79);
+  --ds-blue-1000: oklch(96.75% 0.0179 242.42);
+
+  --ds-red-100: oklch(22.1% 0.0657 15.11);
+  --ds-red-200: oklch(25.93% 0.0834 19.02);
+  --ds-red-300: oklch(31.47% 0.1105 20.96);
+  --ds-red-400: oklch(35.27% 0.1273 21.23);
+  --ds-red-500: oklch(40.68% 0.1479 23.16);
+  --ds-red-600: oklch(62.56% 0.2277 23.03);
+  --ds-red-700: oklch(62.56% 0.2234 23.03);
+  --ds-red-800: oklch(58.01% 0.227 25.12);
+  --ds-red-900: oklch(69.96% 0.2136 22.03);
+  --ds-red-1000: oklch(95.6% 0.0293 6.61);
+
+  --ds-amber-100: oklch(22.46% 0.0538 76.04);
+  --ds-amber-200: oklch(24.95% 0.0642 64.78);
+  --ds-amber-300: oklch(32.34% 0.0837 63.83);
+  --ds-amber-400: oklch(35.53% 0.0903 66.3);
+  --ds-amber-500: oklch(41.55% 0.1044 67.98);
+  --ds-amber-600: oklch(75.04% 0.1737 74.49);
+  --ds-amber-700: oklch(81.87% 0.1969 76.46);
+  --ds-amber-800: oklch(77.21% 0.1991 64.28);
+  --ds-amber-900: oklch(77.21% 0.1991 64.28);
+  --ds-amber-1000: oklch(96.7% 0.0418 84.59);
+
+  --ds-green-100: oklch(23.09% 0.0716 149.68);
+  --ds-green-200: oklch(27.12% 0.0895 150.09);
+  --ds-green-300: oklch(29.84% 0.096 149.25);
+  --ds-green-400: oklch(34.39% 0.1039 147.78);
+  --ds-green-500: oklch(44.19% 0.1484 147.2);
+  --ds-green-600: oklch(58.11% 0.1815 146.55);
+  --ds-green-700: oklch(64.58% 0.199 147.27);
+  --ds-green-800: oklch(57.81% 0.1776 147.5);
+  --ds-green-900: oklch(73.1% 0.2158 148.29);
+  --ds-green-1000: oklch(96.76% 0.056 154.18);
+
+  --ds-teal-100: oklch(22.1% 0.0544 178.74);
+  --ds-teal-200: oklch(25.06% 0.062 178.76);
+  --ds-teal-300: oklch(31.5% 0.0767 180.99);
+  --ds-teal-400: oklch(32.43% 0.0763 180.13);
+  --ds-teal-500: oklch(43.35% 0.1055 180.97);
+  --ds-teal-600: oklch(60.71% 0.1485 180.24);
+  --ds-teal-700: oklch(64.92% 0.1403 181.95);
+  --ds-teal-800: oklch(57.53% 0.1392 181.66);
+  --ds-teal-900: oklch(74.56% 0.1765 182.8);
+  --ds-teal-1000: oklch(96.46% 0.056 180.29);
+
+  --ds-purple-100: oklch(22.34% 0.0779 316.87);
+  --ds-purple-200: oklch(25.91% 0.0921 314.41);
+  --ds-purple-300: oklch(31.98% 0.1219 312.41);
+  --ds-purple-400: oklch(35.93% 0.1504 309.78);
+  --ds-purple-500: oklch(40.99% 0.1721 307.92);
+  --ds-purple-600: oklch(55.5% 0.2191 306.12);
+  --ds-purple-700: oklch(55.5% 0.2186 306.12);
+  --ds-purple-800: oklch(48.58% 0.2102 305.73);
+  --ds-purple-900: oklch(69.87% 0.2037 309.51);
+  --ds-purple-1000: oklch(96.1% 0.0304 316.46);
+
+  --ds-pink-100: oklch(22.67% 0.0628 354.73);
+  --ds-pink-200: oklch(26.2% 0.0859 356.68);
+  --ds-pink-300: oklch(31.15% 0.1067 355.93);
+  --ds-pink-400: oklch(32.13% 0.1174 356.71);
+  --ds-pink-500: oklch(37.01% 0.1453 358.39);
+  --ds-pink-600: oklch(50.33% 0.2089 4.33);
+  --ds-pink-700: oklch(63.52% 0.2346 1.01);
+  --ds-pink-800: oklch(59.51% 0.2429 4.21);
+  --ds-pink-900: oklch(69.36% 0.2223 3.91);
+  --ds-pink-1000: oklch(95.74% 0.0326 350.08);
 
   --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  --ds-shadow-tooltip:
+    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--ds-background-200);
 }
 
 @theme inline {

package/dist/components/error-boundary.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-boundary.js","sourceRoot":"","sources":["../../src/components/error-boundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAiB5C,MAAM,OAAO,aAAc,SAAQ,SAGlC;IACC,YAAY,KAAyB;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAc;QAC5C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,KAAK;QACH,IAAI,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB,CAAC,KAAc,EAAE,SAAkB;QAClD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE,CAAC;YAC3C,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACxB,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YAC7B,CAAC;YAED,mBAAmB;YACnB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YACxE,MAAM,YAAY,GAAG,GAAG,EAAE,KAAK;gBAC7B,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,OAAO,GAAG,CAAC,KAAK,EAAE;gBAClC,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,IAAI,eAAe,CAAC,CAAC;YAEtC,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,mBAAmB,EAC9C,OAAO,EAAE,YAAY,GACrB,CACH,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF","sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { Component } from 'react';\nimport { ErrorCard } from './ui/error-card';\n\nexport interface ErrorBoundaryProps {\n  children: ReactNode;\n  /** Optional fallback UI to render on error. When omitted, a default ErrorCard is shown. */\n  fallback?: ReactNode;\n  /** Optional title for the default error card (used when no fallback is provided) */\n  title?: string;\n  /** Optional callback when an error is caught */\n  onCatch?: (error: unknown, retry: () => void) => void;\n}\n\nexport interface ErrorBoundaryState {\n  hasError: boolean;\n  error: unknown;\n}\n\nexport class ErrorBoundary extends Component<\n  ErrorBoundaryProps,\n  ErrorBoundaryState\n> {\n  constructor(props: ErrorBoundaryProps) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error: unknown): ErrorBoundaryState {\n    return { hasError: true, error };\n  }\n\n  retry(): void {\n    this.setState({ hasError: false, error: null });\n  }\n\n  componentDidCatch(error: unknown, errorInfo: unknown): void {\n    if (process.env.NODE_ENV === 'development') {\n      console.error(error, errorInfo);\n    }\n    this.props.onCatch?.(error, () => this.retry());\n  }\n\n  render(): ReactNode {\n    if (this.state.hasError) {\n      if (this.props.fallback) {\n        return this.props.fallback;\n      }\n\n      // Default error UI\n      const err = this.state.error instanceof Error ? this.state.error : null;\n      const errorDetails = err?.stack\n        ? `${err.message}\\n\\n${err.stack}`\n        : (err?.message ?? 'Unknown error');\n\n      return (\n        <ErrorCard\n          title={this.props.title || 'An error occurred'}\n          details={errorDetails}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"]}