@luxonis/visualizer-protobuf 2.11.2 → 2.13.0

package/dist/{index-DjE38-5p.js → index-DFlpZwK1.js}

@@ -1048,6 +1048,69 @@ function estimateObjectSize(obj) {
   return SMALL_INTEGER_SIZE;
 }
 
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+/// <reference types="@webgpu/types" />
+
+function uint8ArrayToUint16Array(uint8Array) {
+  if (uint8Array.length % 2 !== 0) {
+    throw new Error("Uint8Array length must be a multiple of 2 for conversion to Uint16Array");
+  }
+  const uint16Array = new Uint16Array(uint8Array.length / 2);
+  for (let i = 0; i < uint16Array.length; i++) {
+    const lowByte = uint8Array[i * 2];
+    const highByte = uint8Array[i * 2 + 1];
+
+    // eslint-disable-next-line @foxglove/strict-equality
+    if (highByte === undefined || lowByte === undefined) {
+      throw new Error("Invalid data in uint8Array");
+    }
+    uint16Array[i] = highByte << 8 | lowByte;
+  }
+  return uint16Array;
+}
+
+/* H264 (i420) to RGBA */
+function i420ToRgbaToPointcloud(i420Data, i420Width, i420Height, depthWidth, depthHeight, data) {
+  const frameSize = i420Width * i420Height;
+  const uOffset = frameSize;
+  const vOffset = frameSize + frameSize / 4;
+  const pointCount = data.byteLength / 16;
+  const buffer = new ArrayBuffer(data.byteLength);
+  const view = new DataView(buffer);
+  const dataView = new DataView(data.buffer);
+  for (let i = 0; i < pointCount; i++) {
+    const depthX = i % depthWidth;
+    const depthY = Math.floor(i / depthWidth);
+    const i420X = Math.round(depthX * (i420Width / depthWidth));
+    const i420Y = Math.round(depthY * (i420Height / depthHeight));
+    if (i420X >= i420Width || i420Y >= i420Height) {
+      continue;
+    }
+    const index = i420Y * i420Width + i420X;
+    const uvIndex = Math.floor(i420Y / 2) * (i420Width / 2) + Math.floor(i420X / 2);
+    const Y = i420Data[index] ?? 0;
+    const U = (i420Data[uOffset + uvIndex] ?? 128) - 128;
+    const V = (i420Data[vOffset + uvIndex] ?? 128) - 128;
+    let R = Y + 1.402 * V;
+    let G = Y - 0.344136 * U - 0.714136 * V;
+    let B = Y + 1.772 * U;
+    R = Math.min(255, Math.max(0, R));
+    G = Math.min(255, Math.max(0, G));
+    B = Math.min(255, Math.max(0, B));
+    const offset = i * 16;
+    view.setFloat32(offset, dataView.getFloat32(offset, true), true); // x
+    view.setFloat32(offset + 4, dataView.getFloat32(offset + 4, true), true); // y
+    view.setFloat32(offset + 8, dataView.getFloat32(offset + 8, true), true); // z
+    view.setUint8(offset + 12, R); // Red
+    view.setUint8(offset + 13, G); // Green
+    view.setUint8(offset + 14, B); // Blue
+    view.setUint8(offset + 15, 255); // Alpha (fully opaque)
+  }
+  return new Uint8Array(buffer);
+}
+
 var typescript$1 = {};
 
 /******************************************************************************
@@ -11357,34 +11420,270 @@ function deserializeColorFrame({
 // This Source Code Form is subject to the terms of the Mozilla Public
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
-
-function deserializeDepthFrame({
+/* eslint-disable no-underscore-dangle */
+
+const shader = `
+@group(0) @binding(0) var<storage, read> depthBuffer: array<u32>; // Uint16 stored as u32
+@group(0) @binding(1) var<storage, read> intrinsicsBuffer: array<f32>;
+@group(0) @binding(2) var<storage, read_write> xyzColorBuffer: array<u32>; // Stores XYZ + RGBA
+
+@compute @workgroup_size(256, 1, 1)
+fn main(@builtin(global_invocation_id) global_id: vec3<u32>) {
+    let i = global_id.x;
+    let fx = intrinsicsBuffer[0];
+    let fy = intrinsicsBuffer[1];
+    let cx = intrinsicsBuffer[2];
+    let cy = intrinsicsBuffer[3];
+    let scale = intrinsicsBuffer[4];
+    let width = intrinsicsBuffer[5];
+    let height = intrinsicsBuffer[6];
+
+    if (i >= u32(width * height)) { return; }
+
+    let u = i % u32(width);
+    let v = i / u32(width);
+
+    // Convert uint16 depth value to float (stored as u32, so we bitwise mask)
+    let rawDepth = depthBuffer[i] & 0xFFFFu;
+    let z = f32(rawDepth) * scale;
+
+    let x = (cx - f32(u)) * z / fx;
+    let y = (cy - f32(v)) * z / fy;
+
+    let base = i * 4u; // 4 values per point (X, Y, Z, Color)
+
+    // Convert floats to u32 representation for storage
+    xyzColorBuffer[base] = bitcast<u32>(x);
+    xyzColorBuffer[base + 1u] = bitcast<u32>(y);
+    xyzColorBuffer[base + 2u] = bitcast<u32>(z);
+
+    // Example: RGB set based on depth, Alpha is fixed at 255
+    let r = u32(clamp(z * 255.0, 0.0, 255.0));
+    let g = u32(clamp(y * 255.0, 0.0, 255.0));
+    let b = u32(clamp(x * 255.0, 0.0, 255.0));
+    xyzColorBuffer[base + 3u] = (r & 0xFFu) | ((g & 0xFFu) << 8) | ((b & 0xFFu) << 16) | (255u << 24);
+}
+`;
+async function depthToPointcloudGPU(depthArray, width, height, fx, fy, cx, cy) {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (!navigator.gpu) {
+    console.warn("WebGPU not supported.");
+    return depthToPointCloudBuffer(depthArray, width, height, fx, fy, cx, cy);
+  }
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) {
+    console.warn("Couldn't request WebGPU adapter.");
+    return depthToPointCloudBuffer(depthArray, width, height, fx, fy, cx, cy);
+  }
+  const device = await adapter.requestDevice();
+  const queue = device.queue;
+  const scale = 1.0;
+  const numPixels = width * height;
+  const outputSize = numPixels * 16;
+  const depthData32 = new Uint32Array(depthArray);
+  const intrinsics = new Float32Array([fx, fy, cx, cy, scale, width, height]);
+  const depthBuffer = device.createBuffer({
+    size: depthData32.byteLength,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+  });
+  const intrinsicsBuffer = device.createBuffer({
+    size: intrinsics.byteLength,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+  });
+  const xyzColorBuffer = device.createBuffer({
+    size: outputSize,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
+  });
+  queue.writeBuffer(depthBuffer, 0, depthData32);
+  queue.writeBuffer(intrinsicsBuffer, 0, intrinsics);
+  const bindGroupLayout = device.createBindGroupLayout({
+    entries: [{
+      binding: 0,
+      visibility: GPUShaderStage.COMPUTE,
+      buffer: {
+        type: "read-only-storage"
+      }
+    }, {
+      binding: 1,
+      visibility: GPUShaderStage.COMPUTE,
+      buffer: {
+        type: "read-only-storage"
+      }
+    }, {
+      binding: 2,
+      visibility: GPUShaderStage.COMPUTE,
+      buffer: {
+        type: "storage"
+      }
+    }]
+  });
+  const bindGroup = device.createBindGroup({
+    layout: bindGroupLayout,
+    entries: [{
+      binding: 0,
+      resource: {
+        buffer: depthBuffer
+      }
+    }, {
+      binding: 1,
+      resource: {
+        buffer: intrinsicsBuffer
+      }
+    }, {
+      binding: 2,
+      resource: {
+        buffer: xyzColorBuffer
+      }
+    }]
+  });
+  const shaderModule = device.createShaderModule({
+    code: shader
+  });
+  const pipeline = device.createComputePipeline({
+    layout: device.createPipelineLayout({
+      bindGroupLayouts: [bindGroupLayout]
+    }),
+    compute: {
+      module: shaderModule,
+      entryPoint: "main"
+    }
+  });
+  const commandEncoder = device.createCommandEncoder();
+  const passEncoder = commandEncoder.beginComputePass();
+  passEncoder.setPipeline(pipeline);
+  passEncoder.setBindGroup(0, bindGroup);
+  passEncoder.dispatchWorkgroups(Math.ceil(numPixels / 256));
+  passEncoder.end();
+  device.queue.submit([commandEncoder.finish()]);
+  const outputBuffer = device.createBuffer({
+    size: xyzColorBuffer.size,
+    usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+  });
+  const copyEncoder = device.createCommandEncoder();
+  copyEncoder.copyBufferToBuffer(xyzColorBuffer, 0, outputBuffer, 0, xyzColorBuffer.size);
+  device.queue.submit([copyEncoder.finish()]);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+  await outputBuffer.mapAsync(GPUMapMode.READ);
+  const mappedRange = outputBuffer.getMappedRange();
+  const result = new Uint8Array(mappedRange.byteLength);
+  result.set(new Uint8Array(mappedRange));
+  outputBuffer.unmap();
+  return result;
+}
+function depthToPointCloudBuffer(uint16Array, width, height, fx, fy, cx, cy) {
+  const depthData = Array.from({
+    length: height
+  }, () => new Array(width));
+  for (let v = 0; v < height; v++) {
+    depthData[v] = depthData[v] ?? [];
+    for (let u = 0; u < width; u++) {
+      const d = uint16Array[v * width + u] ?? -1;
+      depthData[v][u] = d > 0 ? d : -1;
+    }
+  }
+  const points = [];
+  // Accumulate the x, y, z values for each pixel.
+  for (let v = 0; v < height; v++) {
+    const row = depthData[v];
+    if (!row) {
+      continue;
+    }
+    for (let u = 0; u < width; u++) {
+      const z = row[u] ?? 0;
+      const x = (cx - u) * z / fx;
+      const y = (cy - v) * z / fy;
+      points.push(x, y, z);
+    }
+  }
+  const pointCount = points.length / 3;
+  const buffer = new ArrayBuffer(pointCount * 16);
+  const view = new DataView(buffer);
+  for (let i = 0; i < pointCount; i++) {
+    const offset = i * 16;
+    view.setFloat32(offset, points[i * 3] ?? 0, true); //X
+    view.setFloat32(offset + 4, points[i * 3 + 1] ?? 0, true); //Y
+    view.setFloat32(offset + 8, points[i * 3 + 2] ?? 0, true); //Z
+    view.setUint8(offset + 12, 0); // R
+    view.setUint8(offset + 13, 0); // G
+    view.setUint8(offset + 14, 0); // B
+    view.setUint8(offset + 15, 255); // A
+  }
+  return new Uint8Array(buffer);
+}
+async function deserializeDepthFrame({
   topic,
   message,
   callback
 }) {
   const {
     receiveTime,
-    encoding,
-    step,
     width,
     height
   } = parseMessage(message);
+  const neuralCameraIntrinsics = JSON.parse(localStorage.getItem("neuralCameraIntrinsics") ?? "{}");
+  const uint16Array = uint8ArrayToUint16Array(message.data);
+  const fx = neuralCameraIntrinsics.right.focalLenght.x;
+  const fy = neuralCameraIntrinsics.right.focalLenght.y;
+  const cx = neuralCameraIntrinsics.right.principalPoint.x;
+  const cy = neuralCameraIntrinsics.right.principalPoint.y;
+  const pointCloudBufferGPU = depthToPointcloudGPU(uint16Array, width, height, fx, fy, cx, cy);
   const foxgloveMessage = {
     timestamp: receiveTime,
-    frame_id: `depth-${topic}-frame`,
+    frame_id: `pointcloud-${topic}-frame`,
+    point_stride: 16,
+    pose: {
+      position: {
+        x: 0,
+        y: 0,
+        z: 0
+      },
+      orientation: {
+        x: 0,
+        y: 0,
+        z: 1,
+        w: 0
+      }
+    },
     width,
     height,
-    encoding,
-    step: width * step,
-    data: message.data
+    fields: [{
+      name: "x",
+      offset: 0,
+      type: typescript$1.NumericType.FLOAT32
+    }, {
+      name: "y",
+      offset: 4,
+      type: typescript$1.NumericType.FLOAT32
+    }, {
+      name: "z",
+      offset: 8,
+      type: typescript$1.NumericType.FLOAT32
+    }, {
+      name: "red",
+      offset: 12,
+      type: typescript$1.NumericType.UINT8
+    }, {
+      name: "green",
+      offset: 13,
+      type: typescript$1.NumericType.UINT8
+    }, {
+      name: "blue",
+      offset: 14,
+      type: typescript$1.NumericType.UINT8
+    }, {
+      name: "alpha",
+      offset: 15,
+      type: typescript$1.NumericType.UINT8
+    }],
+    data: await pointCloudBufferGPU
   };
   callback({
     topic,
     receiveTime,
     message: foxgloveMessage,
     sizeInBytes: estimateObjectSize(foxgloveMessage),
-    schemaName: "foxglove.RawImage"
+    schemaName: "foxglove.PointCloud"
   });
 }
 
@@ -11549,7 +11848,9 @@ async function deserializeDepthAiMessage(args) {
     callback,
     topic
   } = args;
-  console.log(`Encoded "${type}" message at ${new Date().toLocaleString()}`, message);
+
+  //console.log(`Encoded "${type}" message at ${new Date().toLocaleString()}`, message);
+
   switch (type) {
     case "encodedFrame":
       {
@@ -11597,7 +11898,7 @@ async function deserializeDepthAiMessage(args) {
             }
           case Type$1.RAW16:
             {
-              deserializeDepthFrame({
+              await deserializeDepthFrame({
                 topic,
                 message,
                 callback
@@ -11773,8 +12074,8 @@ class FoxgloveConnection {
   }
   getTopicMetrics(topic) {
     return {
-      inputFPS: this.inputMetrics.calculate(topic),
-      postDecodeFPS: this.decodeMetrics.calculate(topic)
+      incomingMessagesFps: this.inputMetrics.calculate(topic),
+      decodedMessagesFps: this.decodeMetrics.calculate(topic)
     };
   }
   getCurrentTime() {
@@ -11786,6 +12087,18 @@ class FoxgloveConnection {
   }
   handleParsedMessage(event) {
     this.decodeMetrics.registerEvent(event.topic);
+    if (event.topic === "H.264 Stream") {
+      this.lastEncodedFrame = event;
+    }
+    if (event.topic === "Point Cloud") {
+      if (!this.lastEncodedFrame) {
+        console.warn("didnt find H.264 Stream");
+      } else {
+        // @ts-expect-error - ITS unknow
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        event.message.data = i420ToRgbaToPointcloud(this.lastEncodedFrame.message.data, this.lastEncodedFrame.message.width, this.lastEncodedFrame.message.height, event.message.width, event.message.height, event.message.data);
+      }
+    }
     const messageSize = estimateObjectSize(event.message);
     event.sizeInBytes = messageSize;
     this.messageEvents.push(event);
@@ -12327,44 +12640,6 @@ class WebRtcClient {
     on = this.events.on.bind(this.events);
 }
 
-// This Source Code Form is subject to the terms of the Mozilla Public
-// License, v2.0. If a copy of the MPL was not distributed with this
-// file, You can obtain one at http://mozilla.org/MPL/2.0/
-
-class ArtificialWorker extends EventTarget {
-  #selfTarget = new EventTarget();
-
-  // Post message from main to worker
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  postMessage(data, _transferable) {
-    const event = new MessageEvent('message', {
-      data
-    });
-    this.#selfTarget.dispatchEvent(event);
-  }
-
-  // Listen for worker-to-main messages
-  // @ts-expect-error Make it typed
-  addEventListener(type, callback) {
-    super.addEventListener(type, callback);
-  }
-
-  // Post message from worker to main
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  postMessageToMain(data, _transferable) {
-    const event = new MessageEvent('message', {
-      data
-    });
-    super.dispatchEvent(event);
-  }
-
-  // Listen for main-to-worker messages
-  // @ts-expect-error Make it typed
-  addEventListenerFromMain(type, callback) {
-    this.#selfTarget.addEventListener(type, callback);
-  }
-}
-
 var safeStableStringify = {exports: {}};
 
 (function (module, exports) {
@@ -29850,6 +30125,10 @@ const uuidv7 = () => uuidv7obj().toString();
 /** Generates a UUIDv7 object. */
 const uuidv7obj = () => (defaultGenerator$1 || (defaultGenerator$1 = new V7Generator())).generate();
 
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
 const GET_APP_CONNECTION = () => ({
   GetAppConnection: {}
 });
@@ -29903,7 +30182,7 @@ class WebRtcCommsProxy {
     }
   }
   #isAppConnectionResponse(message) {
-    return message.data.Ok?.GetAppConnection !== undefined;
+    return message.data.Ok.GetAppConnection !== undefined;
   }
   #startRefreshInterval() {
     this.#refreshIntervalId = setInterval(() => {
@@ -29916,6 +30195,44 @@ class WebRtcCommsProxy {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
+class ArtificialWorker extends EventTarget {
+  #selfTarget = new EventTarget();
+
+  // Post message from main to worker
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  postMessage(data, _transferable) {
+    const event = new MessageEvent('message', {
+      data
+    });
+    this.#selfTarget.dispatchEvent(event);
+  }
+
+  // Listen for worker-to-main messages
+  // @ts-expect-error Make it typed
+  addEventListener(type, callback) {
+    super.addEventListener(type, callback);
+  }
+
+  // Post message from worker to main
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  postMessageToMain(data, _transferable) {
+    const event = new MessageEvent('message', {
+      data
+    });
+    super.dispatchEvent(event);
+  }
+
+  // Listen for main-to-worker messages
+  // @ts-expect-error Make it typed
+  addEventListenerFromMain(type, callback) {
+    this.#selfTarget.addEventListener(type, callback);
+  }
+}
+
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/
+
 const MESSAGE_CHANNEL_NAME = "message";
 const SYSTEM_CHANNEL_NAME = "system";
 const COMMS_CHANNEL_NAME = "comms";
@@ -90251,7 +90568,7 @@ function legacy(parser) {
     return new LanguageSupport(StreamLanguage.define(parser));
 }
 function sql$1(dialectName) {
-    return import('./index-PSBhGaEs.js').then(m => m.sql({ dialect: m[dialectName] }));
+    return import('./index-nJgMRJTy.js').then(m => m.sql({ dialect: m[dialectName] }));
 }
 /**
 An array of language descriptions for known language packages.
@@ -90262,7 +90579,7 @@ const languages = [
         name: "C",
         extensions: ["c", "h", "ino"],
         load() {
-            return import('./index-vCAg8fos.js').then(m => m.cpp());
+            return import('./index-DyoCH5GH.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90270,7 +90587,7 @@ const languages = [
         alias: ["cpp"],
         extensions: ["cpp", "c++", "cc", "cxx", "hpp", "h++", "hh", "hxx"],
         load() {
-            return import('./index-vCAg8fos.js').then(m => m.cpp());
+            return import('./index-DyoCH5GH.js').then(m => m.cpp());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90290,7 +90607,7 @@ const languages = [
         name: "Go",
         extensions: ["go"],
         load() {
-            return import('./index-B9aXaLUR.js').then(m => m.go());
+            return import('./index-fN8Tpgww.js').then(m => m.go());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90305,7 +90622,7 @@ const languages = [
         name: "Java",
         extensions: ["java"],
         load() {
-            return import('./index-Cc3zOB0y.js').then(m => m.java());
+            return import('./index-PmNaQtc7.js').then(m => m.java());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90321,7 +90638,7 @@ const languages = [
         alias: ["json5"],
         extensions: ["json", "map"],
         load() {
-            return import('./index-CqFRR40y.js').then(m => m.json());
+            return import('./index-CtKYoeeM.js').then(m => m.json());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90335,14 +90652,14 @@ const languages = [
         name: "LESS",
         extensions: ["less"],
         load() {
-            return import('./index-BiV6mWEH.js').then(m => m.less());
+            return import('./index-Do7UsSft.js').then(m => m.less());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Liquid",
         extensions: ["liquid"],
         load() {
-            return import('./index-BLoXvLKz.js').then(m => m.liquid());
+            return import('./index-BbAm1fKU.js').then(m => m.liquid());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90368,7 +90685,7 @@ const languages = [
         name: "PHP",
         extensions: ["php", "php3", "php4", "php5", "php7", "phtml"],
         load() {
-            return import('./index-BTtZZhIx.js').then(m => m.php());
+            return import('./index-CpLzYoX8.js').then(m => m.php());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90385,28 +90702,28 @@ const languages = [
         extensions: ["BUILD", "bzl", "py", "pyw"],
         filename: /^(BUCK|BUILD)$/,
         load() {
-            return import('./index-CjJ4xAdB.js').then(m => m.python());
+            return import('./index-BK0O58zw.js').then(m => m.python());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Rust",
         extensions: ["rs"],
         load() {
-            return import('./index-B61jalVx.js').then(m => m.rust());
+            return import('./index-CbS2HMyR.js').then(m => m.rust());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Sass",
         extensions: ["sass"],
         load() {
-            return import('./index-BisiS-gw.js').then(m => m.sass({ indented: true }));
+            return import('./index-DTZuXJ1A.js').then(m => m.sass({ indented: true }));
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "SCSS",
         extensions: ["scss"],
         load() {
-            return import('./index-BisiS-gw.js').then(m => m.sass());
+            return import('./index-DTZuXJ1A.js').then(m => m.sass());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90437,7 +90754,7 @@ const languages = [
         name: "WebAssembly",
         extensions: ["wat", "wast"],
         load() {
-            return import('./index-9X5IFBUj.js').then(m => m.wast());
+            return import('./index-4msm-wtA.js').then(m => m.wast());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90445,7 +90762,7 @@ const languages = [
         alias: ["rss", "wsdl", "xsd"],
         extensions: ["xml", "xsl", "xsd", "svg"],
         load() {
-            return import('./index-2Zk3DeS3.js').then(m => m.xml());
+            return import('./index-DSIL_c41.js').then(m => m.xml());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
@@ -90453,7 +90770,7 @@ const languages = [
         alias: ["yml"],
         extensions: ["yaml", "yml"],
         load() {
-            return import('./index-CC5SpeJH.js').then(m => m.yaml());
+            return import('./index-DFdQY59I.js').then(m => m.yaml());
         }
     }),
     // Legacy modes ported from CodeMirror 5
@@ -91249,13 +91566,13 @@ const languages = [
         name: "Vue",
         extensions: ["vue"],
         load() {
-            return import('./index-Cm0UpxTw.js').then(m => m.vue());
+            return import('./index-DfgdvKhl.js').then(m => m.vue());
         }
     }),
     /*@__PURE__*/LanguageDescription.of({
         name: "Angular Template",
         load() {
-            return import('./index-prbig-mv.js').then(m => m.angular());
+            return import('./index-BsQeBBzM.js').then(m => m.angular());
         }
     })
 ];
@@ -162059,6 +162376,24 @@ function ImCheckboxChecked (props) {
 var css$1 = "@layer reset, base, tokens, recipes, utilities;\n\n@layer reset{\n  * {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n    border-width: 0;\n    border-style: solid;\n    border-color: var(--global-color-border, currentColor);\n  }\n\n  html {\n    line-height: 1.5;\n    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,\n      'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n      'Noto Color Emoji';\n    -webkit-text-size-adjust: 100%;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    -moz-tab-size: 4;\n    tab-size: 4;\n    font-family: var(--global-font-body, var(--font-fallback));\n  }\n\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n\n  body {\n    height: 100%;\n    line-height: inherit;\n  }\n\n  img {\n    border-style: none;\n  }\n\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block;\n    vertical-align: middle;\n  }\n\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  p,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    overflow-wrap: break-word;\n  }\n\n  ol,\n  ul {\n    list-style: none;\n  }\n\n  code,\n  kbd,\n  pre,\n  samp {\n    font-size: 1em;\n  }\n\n  button,\n  [type='button'],\n  [type='reset'],\n  [type='submit'] {\n    -webkit-appearance: button;\n    background-color: transparent;\n    background-image: none;\n  }\n\n  button,\n  input,\n  optgroup,\n  select,\n  textarea {\n    color: inherit;\n  }\n\n  button,\n  select {\n    text-transform: none;\n  }\n\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n\n  input::placeholder,\n  textarea::placeholder {\n    opacity: 1;\n    color: var(--global-color-placeholder, #9ca3af);\n  }\n\n  textarea {\n    resize: vertical;\n  }\n\n  summary {\n    display: list-item;\n  }\n\n  small {\n    font-size: 80%;\n  }\n\n  sub,\n  sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n\n  sub {\n    bottom: -0.25em;\n  }\n\n  sup {\n    top: -0.5em;\n  }\n\n  dialog {\n    padding: 0;\n  }\n\n  a {\n    color: inherit;\n    text-decoration: inherit;\n  }\n\n  abbr:where([title]) {\n    text-decoration: underline dotted;\n  }\n\n  b,\n  strong {\n    font-weight: bolder;\n  }\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-size: 1em;\n    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';\n    font-family: var(--global-font-mono, var(--font-mono-fallback));\n  }\n\n  input[type=\"text\"],\n  input[type=\"email\"],\n  input[type=\"search\"],\n  input[type=\"password\"] {\n    -webkit-appearance: none;\n    -moz-appearance: none;\n  }\n\n  input[type='search'] {\n    -webkit-appearance: textfield;\n    outline-offset: -2px;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button {\n    -webkit-appearance: none;\n  }\n\n  ::-webkit-file-upload-button {\n    -webkit-appearance: button;\n    font: inherit;\n  }\n\n  input[type=\"number\"]::-webkit-inner-spin-button,\n  input[type=\"number\"]::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  input[type='number']{\n    -moz-appearance: textfield;\n  }\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  :-moz-focusring {\n    outline: auto;\n  }\n}\n\n@layer base{\n  :root{\n    --made-with-panda: '🐼';\n  }\n\n  *, *::before, *::after, ::backdrop{\n    --blur:   ;\n    --brightness:   ;\n    --contrast:   ;\n    --grayscale:   ;\n    --hue-rotate:   ;\n    --invert:   ;\n    --saturate:   ;\n    --sepia:   ;\n    --drop-shadow:   ;\n    --backdrop-blur:   ;\n    --backdrop-brightness:   ;\n    --backdrop-contrast:   ;\n    --backdrop-grayscale:   ;\n    --backdrop-hue-rotate:   ;\n    --backdrop-invert:   ;\n    --backdrop-opacity:   ;\n    --backdrop-saturate:   ;\n    --backdrop-sepia:   ;\n    --scroll-snap-strictness: proximity;\n    --border-spacing-x: 0;\n    --border-spacing-y: 0;\n    --translate-x: 0;\n    --translate-y: 0;\n    --rotate: 0;\n    --skew-x: 0;\n    --skew-y: 0;\n    --scale-x: 1;\n    --scale-y: 1;\n  }\n\n  html{\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -webkit-text-size-adjust: 100%;\n  }\n\n  body{\n    background: var(--colors-background);\n    color: var(--colors-foreground);\n    font-family: var(--fonts-sans);\n  }\n\n  button{\n    color: inherit;\n    outline: 2px solid transparent;\n  }\n\n  *{\n    box-sizing: border-box;\n    font-family: var(--fonts-body);\n  }\n\n  html, body{\n    margin: var(--spacing-0);\n    padding: var(--spacing-0);\n  }\n\n  #root{\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n  }\n}\n\n@layer tokens{\n  :where(:root, :host) {\n    --letter-spacings-tighter: -0.05em;\n    --letter-spacings-tight: -0.025em;\n    --letter-spacings-normal: 0em;\n    --letter-spacings-wide: 0.025em;\n    --letter-spacings-wider: 0.05em;\n    --letter-spacings-widest: 0.1em;\n    --blurs-sm: 4px;\n    --blurs-base: 8px;\n    --blurs-md: 12px;\n    --blurs-lg: 16px;\n    --blurs-xl: 24px;\n    --blurs-2xl: 40px;\n    --blurs-3xl: 64px;\n    --animations-spin: spin 1s linear infinite;\n    --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n    --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --animations-bounce: bounce 1s infinite;\n    --font-sizes-2xs: 0.5rem;\n    --font-sizes-2xl: 1.5rem;\n    --font-sizes-3xl: 1.875rem;\n    --font-sizes-4xl: 2.25rem;\n    --font-sizes-5xl: 3rem;\n    --font-sizes-6xl: 3.75rem;\n    --font-sizes-7xl: 4.5rem;\n    --font-sizes-8xl: 6rem;\n    --font-sizes-9xl: 8rem;\n    --font-sizes-xxs: 10px;\n    --font-sizes-xs: 12px;\n    --font-sizes-sm: 14px;\n    --font-sizes-primary: 16px;\n    --font-sizes-md: 20px;\n    --font-sizes-lg: 24px;\n    --font-sizes-xl: 32px;\n    --font-weights-thin: 100;\n    --font-weights-extralight: 200;\n    --font-weights-light: 300;\n    --font-weights-normal: 400;\n    --font-weights-medium: 500;\n    --font-weights-semibold: 600;\n    --font-weights-bold: 700;\n    --font-weights-extrabold: 800;\n    --font-weights-black: 900;\n    --font-weights-primary: 400;\n    --font-weights-md: 500;\n    --font-weights-lg: 600;\n    --font-weights-xl: 800;\n    --sizes-0: 0rem;\n    --sizes-1: 0.25rem;\n    --sizes-2: 0.5rem;\n    --sizes-3: 0.75rem;\n    --sizes-4: 1rem;\n    --sizes-5: 1.25rem;\n    --sizes-6: 1.5rem;\n    --sizes-7: 1.75rem;\n    --sizes-8: 2rem;\n    --sizes-9: 2.25rem;\n    --sizes-10: 2.5rem;\n    --sizes-11: 2.75rem;\n    --sizes-12: 3rem;\n    --sizes-14: 3.5rem;\n    --sizes-16: 4rem;\n    --sizes-20: 5rem;\n    --sizes-24: 6rem;\n    --sizes-28: 7rem;\n    --sizes-32: 8rem;\n    --sizes-36: 9rem;\n    --sizes-40: 10rem;\n    --sizes-44: 11rem;\n    --sizes-48: 12rem;\n    --sizes-52: 13rem;\n    --sizes-56: 14rem;\n    --sizes-60: 15rem;\n    --sizes-64: 16rem;\n    --sizes-72: 18rem;\n    --sizes-80: 20rem;\n    --sizes-96: 24rem;\n    --sizes-0\\.5: 0.125rem;\n    --sizes-1\\.5: 0.375rem;\n    --sizes-2\\.5: 0.625rem;\n    --sizes-3\\.5: 0.875rem;\n    --sizes-xs: 20rem;\n    --sizes-sm: 24rem;\n    --sizes-md: 28rem;\n    --sizes-lg: 32rem;\n    --sizes-xl: 36rem;\n    --sizes-2xl: 42rem;\n    --sizes-3xl: 48rem;\n    --sizes-4xl: 56rem;\n    --sizes-5xl: 64rem;\n    --sizes-6xl: 72rem;\n    --sizes-7xl: 80rem;\n    --sizes-8xl: 90rem;\n    --sizes-prose: 65ch;\n    --sizes-full: 100%;\n    --sizes-min: min-content;\n    --sizes-max: max-content;\n    --sizes-fit: fit-content;\n    --sizes-basic-almost-full: 90%;\n    --sizes-card-xs: 175px;\n    --sizes-card-sm: 414px;\n    --sizes-responsive-card-xs: min(95vw,var(--sizes-card-xs));\n    --sizes-responsive-card-sm: min(95vw,var(--sizes-card-sm));\n    --sizes-circle: 40px;\n    --sizes-container-smaller-xxxs: 80px;\n    --sizes-container-smaller-xxs: 120px;\n    --sizes-container-smaller-xs: 290px;\n    --sizes-container-smaller-sm: 410px;\n    --sizes-container-bigger-xs: 380px;\n    --sizes-container-xxs: 150px;\n    --sizes-container-xs: 350px;\n    --sizes-container-sm: 640px;\n    --sizes-container-md: 768px;\n    --sizes-container-lg: 1024px;\n    --sizes-container-xl: 1280px;\n    --sizes-container-xxl: 1440px;\n    --sizes-container-content-xl: 729px;\n    --sizes-container-content-2xl: 829px;\n    --sizes-container-grid-base-size: 220px;\n    --sizes-container-grid-label-height: 56px;\n    --sizes-container-grid-grid-gap: 28px;\n    --sizes-container-side-bar-collapsed: 65px;\n    --sizes-container-side-bar-expanded: 210px;\n    --sizes-table-cell-min-width: 200px;\n    --sizes-table-instances-name-cell: 300px;\n    --sizes-table-instances-name: 200px;\n    --sizes-table-instances-cell: 180px;\n    --sizes-sourcecode-width: 40px;\n    --sizes-slider-label: 40px;\n    --sizes-slider-thumb-sm: 16px;\n    --sizes-slider-thumb-lg: 20px;\n    --sizes-skeleton-height: 40px;\n    --sizes-skeleton-width: full;\n    --sizes-skeleton-button-width: 150px;\n    --sizes-skeleton-button-height: var(--sizes-skeleton-height);\n    --sizes-skeleton-input-width: 230px;\n    --sizes-skeleton-input-height: var(--sizes-skeleton-height);\n    --sizes-skeleton-textarea-width: var(--sizes-skeleton-width);\n    --sizes-skeleton-textarea-height: 80px;\n    --sizes-skeleton-avatar-width: var(--sizes-skeleton-height);\n    --sizes-skeleton-avatar-height: var(--sizes-skeleton-height);\n    --sizes-skeleton-grid-width-xs: 32px;\n    --sizes-skeleton-grid-width-sm: 64px;\n    --sizes-skeleton-grid-width-md: 128px;\n    --sizes-skeleton-grid-width-lg: 256px;\n    --sizes-skeleton-grid-width-xl: 512px;\n    --sizes-skeleton-grid-height-xs: 32px;\n    --sizes-skeleton-grid-height-sm: 64px;\n    --sizes-skeleton-grid-height-md: 128px;\n    --sizes-skeleton-grid-height-lg: 256px;\n    --sizes-skeleton-grid-height-xl: 512px;\n    --sizes-skeleton-table-height-sm: 32px;\n    --sizes-skeleton-table-height-md: 64px;\n    --sizes-skeleton-table-height-lg: 128px;\n    --sizes-skeleton-table-height-xl: 256px;\n    --sizes-icon-xxs: 8px;\n    --sizes-icon-xs: 16px;\n    --sizes-icon-sm: 20px;\n    --sizes-icon-md: 24px;\n    --sizes-icon-lg: 32px;\n    --sizes-icon-xl: 40px;\n    --sizes-icon-xxl: 48px;\n    --sizes-icon-smaller-xs: 14px;\n    --sizes-breakpoint-2lg: 1100px;\n    --sizes-breakpoint-sm: 640px;\n    --sizes-breakpoint-md: 768px;\n    --sizes-breakpoint-lg: 1024px;\n    --sizes-breakpoint-xl: 1280px;\n    --sizes-breakpoint-2xl: 1536px;\n    --spacing-0: 0rem;\n    --spacing-1: 0.25rem;\n    --spacing-2: 0.5rem;\n    --spacing-3: 0.75rem;\n    --spacing-4: 1rem;\n    --spacing-5: 1.25rem;\n    --spacing-6: 1.5rem;\n    --spacing-7: 1.75rem;\n    --spacing-8: 2rem;\n    --spacing-9: 2.25rem;\n    --spacing-10: 2.5rem;\n    --spacing-11: 2.75rem;\n    --spacing-12: 3rem;\n    --spacing-14: 3.5rem;\n    --spacing-16: 4rem;\n    --spacing-20: 5rem;\n    --spacing-24: 6rem;\n    --spacing-28: 7rem;\n    --spacing-32: 8rem;\n    --spacing-36: 9rem;\n    --spacing-40: 10rem;\n    --spacing-44: 11rem;\n    --spacing-48: 12rem;\n    --spacing-52: 13rem;\n    --spacing-56: 14rem;\n    --spacing-60: 15rem;\n    --spacing-64: 16rem;\n    --spacing-72: 18rem;\n    --spacing-80: 20rem;\n    --spacing-96: 24rem;\n    --spacing-0\\.5: 0.125rem;\n    --spacing-1\\.5: 0.375rem;\n    --spacing-2\\.5: 0.625rem;\n    --spacing-3\\.5: 0.875rem;\n    --spacing-separator: 10px;\n    --spacing-smaller-xs: 4px;\n    --spacing-smaller-sm: 12px;\n    --spacing-smaller-md: 14px;\n    --spacing-xxs: 6px;\n    --spacing-xs: 8px;\n    --spacing-sm: 16px;\n    --spacing-3xs: 24px;\n    --spacing-md: 32px;\n    --spacing-lg: 64px;\n    --shadows-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    --shadows-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n    --shadows-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n    --shadows-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);\n    --shadows-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);\n    --shadows-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n    --shadows-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\n    --borders-none: none;\n    --borders-outline-base: 1px solid var(--colors-light-gray);\n    --borders-border-base: 1px solid var(--colors-decoration-gray);\n    --borders-border-error: 1px solid var(--colors-decoration-error);\n    --borders-border-success: 1px solid var(--colors-decoration-success);\n    --borders-border-active: 1px solid var(--colors-decoration-active);\n    --opacity-90: 0.9;\n    --easings-default: cubic-bezier(0.4, 0, 0.2, 1);\n    --easings-linear: linear;\n    --easings-in: cubic-bezier(0.4, 0, 1, 1);\n    --easings-out: cubic-bezier(0, 0, 0.2, 1);\n    --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --easings-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --durations-fastest: 50ms;\n    --durations-faster: 100ms;\n    --durations-normal: 200ms;\n    --durations-slow: 300ms;\n    --durations-slower: 400ms;\n    --durations-slowest: 500ms;\n    --durations-fast: 150ms;\n    --colors-current: currentColor;\n    --colors-black: #000;\n    --colors-white: #fff;\n    --colors-transparent: rgb(0 0 0 / 0);\n    --colors-rose-50: #fff1f2;\n    --colors-rose-100: #ffe4e6;\n    --colors-rose-200: #fecdd3;\n    --colors-rose-300: #fda4af;\n    --colors-rose-400: #fb7185;\n    --colors-rose-500: #f43f5e;\n    --colors-rose-600: #e11d48;\n    --colors-rose-700: #be123c;\n    --colors-rose-800: #9f1239;\n    --colors-rose-900: #881337;\n    --colors-rose-950: #4c0519;\n    --colors-pink-50: #fdf2f8;\n    --colors-pink-100: #fce7f3;\n    --colors-pink-200: #fbcfe8;\n    --colors-pink-300: #f9a8d4;\n    --colors-pink-400: #f472b6;\n    --colors-pink-500: #ec4899;\n    --colors-pink-600: #db2777;\n    --colors-pink-700: #be185d;\n    --colors-pink-800: #9d174d;\n    --colors-pink-900: #831843;\n    --colors-pink-950: #500724;\n    --colors-fuchsia-50: #fdf4ff;\n    --colors-fuchsia-100: #fae8ff;\n    --colors-fuchsia-200: #f5d0fe;\n    --colors-fuchsia-300: #f0abfc;\n    --colors-fuchsia-400: #e879f9;\n    --colors-fuchsia-500: #d946ef;\n    --colors-fuchsia-600: #c026d3;\n    --colors-fuchsia-700: #a21caf;\n    --colors-fuchsia-800: #86198f;\n    --colors-fuchsia-900: #701a75;\n    --colors-fuchsia-950: #4a044e;\n    --colors-purple-50: #faf5ff;\n    --colors-purple-100: #f3e8ff;\n    --colors-purple-200: #e9d5ff;\n    --colors-purple-300: #d8b4fe;\n    --colors-purple-400: #c084fc;\n    --colors-purple-500: #a855f7;\n    --colors-purple-600: #9333ea;\n    --colors-purple-700: #7e22ce;\n    --colors-purple-800: #6b21a8;\n    --colors-purple-900: #581c87;\n    --colors-purple-950: #3b0764;\n    --colors-violet-50: #f5f3ff;\n    --colors-violet-100: #ede9fe;\n    --colors-violet-200: #ddd6fe;\n    --colors-violet-300: #c4b5fd;\n    --colors-violet-400: #a78bfa;\n    --colors-violet-500: #8b5cf6;\n    --colors-violet-600: #7c3aed;\n    --colors-violet-700: #6d28d9;\n    --colors-violet-800: #5b21b6;\n    --colors-violet-900: #4c1d95;\n    --colors-violet-950: #2e1065;\n    --colors-indigo-50: #eef2ff;\n    --colors-indigo-100: #e0e7ff;\n    --colors-indigo-200: #c7d2fe;\n    --colors-indigo-300: #a5b4fc;\n    --colors-indigo-400: #818cf8;\n    --colors-indigo-500: #6366f1;\n    --colors-indigo-600: #4f46e5;\n    --colors-indigo-700: #4338ca;\n    --colors-indigo-800: #3730a3;\n    --colors-indigo-900: #312e81;\n    --colors-indigo-950: #1e1b4b;\n    --colors-blue-50: #eff6ff;\n    --colors-blue-100: #dbeafe;\n    --colors-blue-200: #bfdbfe;\n    --colors-blue-300: #93c5fd;\n    --colors-blue-400: #60a5fa;\n    --colors-blue-500: #3b82f6;\n    --colors-blue-600: #2563eb;\n    --colors-blue-700: #1d4ed8;\n    --colors-blue-800: #1e40af;\n    --colors-blue-900: #1e3a8a;\n    --colors-blue-950: #172554;\n    --colors-sky-50: #f0f9ff;\n    --colors-sky-100: #e0f2fe;\n    --colors-sky-200: #bae6fd;\n    --colors-sky-300: #7dd3fc;\n    --colors-sky-400: #38bdf8;\n    --colors-sky-500: #0ea5e9;\n    --colors-sky-600: #0284c7;\n    --colors-sky-700: #0369a1;\n    --colors-sky-800: #075985;\n    --colors-sky-900: #0c4a6e;\n    --colors-sky-950: #082f49;\n    --colors-cyan-50: #ecfeff;\n    --colors-cyan-100: #cffafe;\n    --colors-cyan-200: #a5f3fc;\n    --colors-cyan-300: #67e8f9;\n    --colors-cyan-400: #22d3ee;\n    --colors-cyan-500: #06b6d4;\n    --colors-cyan-600: #0891b2;\n    --colors-cyan-700: #0e7490;\n    --colors-cyan-800: #155e75;\n    --colors-cyan-900: #164e63;\n    --colors-cyan-950: #083344;\n    --colors-teal-50: #f0fdfa;\n    --colors-teal-100: #ccfbf1;\n    --colors-teal-200: #99f6e4;\n    --colors-teal-300: #5eead4;\n    --colors-teal-400: #2dd4bf;\n    --colors-teal-500: #14b8a6;\n    --colors-teal-600: #0d9488;\n    --colors-teal-700: #0f766e;\n    --colors-teal-800: #115e59;\n    --colors-teal-900: #134e4a;\n    --colors-teal-950: #042f2e;\n    --colors-emerald-50: #ecfdf5;\n    --colors-emerald-100: #d1fae5;\n    --colors-emerald-200: #a7f3d0;\n    --colors-emerald-300: #6ee7b7;\n    --colors-emerald-400: #34d399;\n    --colors-emerald-500: #10b981;\n    --colors-emerald-600: #059669;\n    --colors-emerald-700: #047857;\n    --colors-emerald-800: #065f46;\n    --colors-emerald-900: #064e3b;\n    --colors-emerald-950: #022c22;\n    --colors-green-50: #f0fdf4;\n    --colors-green-100: #dcfce7;\n    --colors-green-200: #bbf7d0;\n    --colors-green-300: #86efac;\n    --colors-green-400: #4ade80;\n    --colors-green-500: #22c55e;\n    --colors-green-600: #16a34a;\n    --colors-green-700: #15803d;\n    --colors-green-800: #166534;\n    --colors-green-900: #14532d;\n    --colors-green-950: #052e16;\n    --colors-lime-50: #f7fee7;\n    --colors-lime-100: #ecfccb;\n    --colors-lime-200: #d9f99d;\n    --colors-lime-300: #bef264;\n    --colors-lime-400: #a3e635;\n    --colors-lime-500: #84cc16;\n    --colors-lime-600: #65a30d;\n    --colors-lime-700: #4d7c0f;\n    --colors-lime-800: #3f6212;\n    --colors-lime-900: #365314;\n    --colors-lime-950: #1a2e05;\n    --colors-yellow-50: #fefce8;\n    --colors-yellow-100: #fef9c3;\n    --colors-yellow-200: #fef08a;\n    --colors-yellow-300: #fde047;\n    --colors-yellow-400: #facc15;\n    --colors-yellow-500: #eab308;\n    --colors-yellow-600: #ca8a04;\n    --colors-yellow-700: #a16207;\n    --colors-yellow-800: #854d0e;\n    --colors-yellow-900: #713f12;\n    --colors-yellow-950: #422006;\n    --colors-amber-50: #fffbeb;\n    --colors-amber-100: #fef3c7;\n    --colors-amber-200: #fde68a;\n    --colors-amber-300: #fcd34d;\n    --colors-amber-400: #fbbf24;\n    --colors-amber-500: #f59e0b;\n    --colors-amber-600: #d97706;\n    --colors-amber-700: #b45309;\n    --colors-amber-800: #92400e;\n    --colors-amber-900: #78350f;\n    --colors-amber-950: #451a03;\n    --colors-orange-50: #fff7ed;\n    --colors-orange-100: #ffedd5;\n    --colors-orange-200: #fed7aa;\n    --colors-orange-300: #fdba74;\n    --colors-orange-400: #fb923c;\n    --colors-orange-500: #f97316;\n    --colors-orange-600: #ea580c;\n    --colors-orange-700: #c2410c;\n    --colors-orange-800: #9a3412;\n    --colors-orange-900: #7c2d12;\n    --colors-orange-950: #431407;\n    --colors-red-50: #fef2f2;\n    --colors-red-100: #fee2e2;\n    --colors-red-200: #fecaca;\n    --colors-red-300: #fca5a5;\n    --colors-red-400: #f87171;\n    --colors-red-500: #ef4444;\n    --colors-red-600: #dc2626;\n    --colors-red-700: #b91c1c;\n    --colors-red-800: #991b1b;\n    --colors-red-900: #7f1d1d;\n    --colors-red-950: #450a0a;\n    --colors-neutral-50: #fafafa;\n    --colors-neutral-100: #f5f5f5;\n    --colors-neutral-200: #e5e5e5;\n    --colors-neutral-300: #d4d4d4;\n    --colors-neutral-400: #a3a3a3;\n    --colors-neutral-500: #737373;\n    --colors-neutral-600: #525252;\n    --colors-neutral-700: #404040;\n    --colors-neutral-800: #262626;\n    --colors-neutral-900: #171717;\n    --colors-neutral-950: #0a0a0a;\n    --colors-stone-50: #fafaf9;\n    --colors-stone-100: #f5f5f4;\n    --colors-stone-200: #e7e5e4;\n    --colors-stone-300: #d6d3d1;\n    --colors-stone-400: #a8a29e;\n    --colors-stone-500: #78716c;\n    --colors-stone-600: #57534e;\n    --colors-stone-700: #44403c;\n    --colors-stone-800: #292524;\n    --colors-stone-900: #1c1917;\n    --colors-stone-950: #0c0a09;\n    --colors-zinc-50: #fafafa;\n    --colors-zinc-100: #f4f4f5;\n    --colors-zinc-200: #e4e4e7;\n    --colors-zinc-300: #d4d4d8;\n    --colors-zinc-400: #a1a1aa;\n    --colors-zinc-500: #71717a;\n    --colors-zinc-600: #52525b;\n    --colors-zinc-700: #3f3f46;\n    --colors-zinc-800: #27272a;\n    --colors-zinc-900: #18181b;\n    --colors-zinc-950: #09090b;\n    --colors-gray-50: #f9fafb;\n    --colors-gray-100: #f3f4f6;\n    --colors-gray-200: #e5e7eb;\n    --colors-gray-300: #d1d5db;\n    --colors-gray-400: #9ca3af;\n    --colors-gray-500: #6b7280;\n    --colors-gray-600: #4b5563;\n    --colors-gray-700: #374151;\n    --colors-gray-800: #1f2937;\n    --colors-gray-900: #111827;\n    --colors-gray-950: #030712;\n    --colors-slate-50: #f8fafc;\n    --colors-slate-100: #f1f5f9;\n    --colors-slate-200: #e2e8f0;\n    --colors-slate-300: #cbd5e1;\n    --colors-slate-400: #94a3b8;\n    --colors-slate-500: #64748b;\n    --colors-slate-600: #475569;\n    --colors-slate-700: #334155;\n    --colors-slate-800: #1e293b;\n    --colors-slate-900: #0f172a;\n    --colors-slate-950: #020617;\n    --colors-hover-light-success: #ECFDF3d9;\n    --colors-hover-light-warning: #FFFAEBd9;\n    --colors-hover-light-error: #FEF3F2d9;\n    --colors-hover-light-active: #DCEFFCd9;\n    --colors-hover-light-gray: #F2F4F7d9;\n    --colors-hover-dark-success: #12B76Ad9;\n    --colors-hover-dark-warning: #DC6803d9;\n    --colors-hover-dark-error: #F04438d9;\n    --colors-hover-dark-active: #4c4ff1d9;\n    --colors-hover-dark-gray: #667085d9;\n    --colors-light-success: #ECFDF3;\n    --colors-light-warning: #FFFAEB;\n    --colors-light-error: #FEF3F2;\n    --colors-light-active: #DCEFFC;\n    --colors-light-gray: #F2F4F7;\n    --colors-dark-success: #12B76A;\n    --colors-dark-warning: #DC6803;\n    --colors-dark-error: #F04438;\n    --colors-dark-active: #4c4ff1;\n    --colors-dark-gray: #667085;\n    --colors-text-normal: #1D2939;\n    --colors-text-label: #475467;\n    --colors-text-light: #667085;\n    --colors-text-success: #027A48;\n    --colors-text-warning: #B54708;\n    --colors-text-error: #B42318;\n    --colors-text-active: #5724e8;\n    --colors-text-gray: #344054;\n    --colors-decoration-success: #6CE9A6;\n    --colors-decoration-warning: #FEC84B;\n    --colors-decoration-error: #FDA29B;\n    --colors-decoration-active: #8da4f4;\n    --colors-decoration-gray: #D0D5DD;\n    --colors-grayscale-0: var(--colors-white);\n    --colors-grayscale-50: var(--colors-zinc-50);\n    --colors-grayscale-100: var(--colors-zinc-100);\n    --colors-grayscale-200: var(--colors-zinc-200);\n    --colors-grayscale-300: var(--colors-zinc-300);\n    --colors-grayscale-400: var(--colors-zinc-400);\n    --colors-grayscale-500: var(--colors-zinc-500);\n    --colors-grayscale-600: var(--colors-zinc-600);\n    --colors-grayscale-700: var(--colors-zinc-700);\n    --colors-grayscale-800: var(--colors-zinc-800);\n    --colors-grayscale-900: var(--colors-zinc-900);\n    --colors-grayscale-950: var(--colors-zinc-950);\n    --fonts-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n    --fonts-body: Inter;\n    --fonts-mono: JetBrainsMono;\n    --fonts-sans: var(--font-inter, Inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --line-heights-3: .75rem;\n    --line-heights-4: 1rem;\n    --line-heights-5: 1.25rem;\n    --line-heights-6: 1.5rem;\n    --line-heights-7: 1.75rem;\n    --line-heights-8: 2rem;\n    --line-heights-9: 2.25rem;\n    --line-heights-10: 2.5rem;\n    --line-heights-sm: 20px;\n    --line-heights-primary: 24px;\n    --line-heights-md: 32px;\n    --line-heights-lg: 38px;\n    --line-heights-none: 1;\n    --line-heights-tight: 1.25;\n    --line-heights-snug: 1.375;\n    --line-heights-normal: 1.5;\n    --line-heights-relaxed: 1.625;\n    --line-heights-loose: 2;\n    --radii-xs: 0.125rem;\n    --radii-sm: calc(var(--radii-radius) - 4px);\n    --radii-md: calc(var(--radii-radius) - 2px);\n    --radii-lg: var(--radii-radius);\n    --radii-xl: calc(var(--radii-radius) + 4px);\n    --radii-2xl: 1rem;\n    --radii-3xl: 1.5rem;\n    --radii-full: 9999px;\n    --radii-common: 6px;\n    --radii-radius: 0.5rem;\n    --breakpoints-2lg: 1100px;\n    --breakpoints-sm: 640px;\n    --breakpoints-md: 768px;\n    --breakpoints-lg: 1024px;\n    --breakpoints-xl: 1280px;\n    --breakpoints-2xl: 1536px;\n    --sizes-icon-primary: var(--sizes-icon-xs);\n    --colors-background: var(--colors-grayscale-0);\n    --colors-foreground: var(--colors-grayscale-950);\n    --colors-muted: var(--colors-grayscale-100);\n    --colors-muted-foreground: var(--colors-grayscale-500);\n    --colors-card: var(--colors-grayscale-0);\n    --colors-card-foreground: var(--colors-grayscale-950);\n    --colors-popover: var(--colors-grayscale-0);\n    --colors-popover-foreground: var(--colors-grayscale-950);\n    --colors-border: var(--colors-grayscale-200);\n    --colors-input: var(--colors-grayscale-200);\n    --colors-primary: var(--colors-grayscale-900);\n    --colors-primary-foreground: var(--colors-grayscale-50);\n    --colors-secondary: var(--colors-grayscale-100);\n    --colors-secondary-foreground: var(--colors-grayscale-900);\n    --colors-accent: var(--colors-grayscale-100);\n    --colors-accent-foreground: var(--colors-grayscale-900);\n    --colors-destructive: var(--colors-red-500);\n    --colors-destructive-foreground: var(--colors-grayscale-50);\n    --colors-ring: var(--colors-grayscale-400);\n    --borders-base: 1px solid var(--colors-border);\n    --borders-input: 1px solid var(--colors-input);\n    --borders-primary: 1px solid var(--colors-primary);\n    --borders-destructive: 1px solid var(--colors-destructive);\n    --animations-accordion-down: accordion-down 0.2s ease-out;\n    --animations-accordion-up: accordion-up 0.2s ease-out\n}\n\n  .dark {\n    --colors-background: var(--colors-grayscale-950);\n    --colors-foreground: var(--colors-grayscale-50);\n    --colors-muted: var(--colors-grayscale-800);\n    --colors-muted-foreground: var(--colors-grayscale-400);\n    --colors-card: var(--colors-grayscale-950);\n    --colors-card-foreground: var(--colors-grayscale-50);\n    --colors-popover: var(--colors-grayscale-950);\n    --colors-popover-foreground: var(--colors-grayscale-50);\n    --colors-border: var(--colors-grayscale-800);\n    --colors-input: var(--colors-grayscale-800);\n    --colors-primary: var(--colors-grayscale-50);\n    --colors-primary-foreground: var(--colors-grayscale-900);\n    --colors-secondary: var(--colors-grayscale-800);\n    --colors-secondary-foreground: var(--colors-grayscale-50);\n    --colors-accent: var(--colors-grayscale-800);\n    --colors-accent-foreground: var(--colors-grayscale-50);\n    --colors-destructive: var(--colors-red-700);\n    --colors-destructive-foreground: var(--colors-red-50);\n    --colors-ring: var(--colors-grayscale-300)\n}\n\n  @keyframes spin{\n    to{\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes ping{\n    75%, 100%{\n      transform: scale(2);\n      opacity: 0;\n    }\n  }\n\n  @keyframes pulse{\n    50%{\n      opacity: .5;\n    }\n  }\n\n  @keyframes bounce{\n    0%, 100%{\n      transform: translateY(-25%);\n      animation-timing-function: cubic-bezier(0.8,0,1,1);\n    }\n\n    50%{\n      transform: none;\n      animation-timing-function: cubic-bezier(0,0,0.2,1);\n    }\n  }\n\n  @keyframes enter{\n    from{\n      opacity: var(--shadow-panda-enter-opacity, 1);\n      transform: translate3d(var(--shadow-panda-enter-translate-x, 0), var(--shadow-panda-enter-translate-y, 0), 0) scale3d(var(--shadow-panda-enter-scale, 1), var(--shadow-panda-enter-scale, 1), var(--shadow-panda-enter-scale, 1)) rotate(var(--shadow-panda-enter-rotate, 0));\n    }\n  }\n\n  @keyframes exit{\n    to{\n      opacity: var(--shadow-panda-exit-opacity, 1);\n      transform: translate3d(var(--shadow-panda-exit-translate-x, 0), var(--shadow-panda-exit-translate-y, 0), 0) scale3d(var(--shadow-panda-exit-scale, 1), var(--shadow-panda-exit-scale, 1), var(--shadow-panda-exit-scale, 1)) rotate(var(--shadow-panda-exit-rotate, 0));\n    }\n  }\n\n  @keyframes accordion-down{\n    from{\n      height: 0;\n    }\n\n    to{\n      height: var(--radix-accordion-content-height);\n    }\n  }\n\n  @keyframes accordion-up{\n    from{\n      height: var(--radix-accordion-content-height);\n    }\n\n    to{\n      height: 0;\n    }\n  }\n}\n\n@layer recipes{\n\n  .button--variant_default {\n    background: var(--colors-primary);\n    color: var(--colors-primary-foreground);\n}\n\n  .button--size_default {\n    height: var(--sizes-10);\n    padding-inline: var(--spacing-4);\n    padding-block: var(--spacing-2)\n}\n\n  .button--variant_destructive {\n    background: var(--colors-destructive);\n    color: var(--colors-destructive-foreground);\n}\n\n  .button--variant_outline {\n    border: var(--borders-input);\n    background: var(--colors-background);\n}\n\n  .button--variant_secondary {\n    background: var(--colors-secondary);\n    color: var(--colors-secondary-foreground);\n}\n\n  .button--variant_link {\n    color: var(--colors-primary);\n    text-underline-offset: 4px;\n}\n\n  .button--size_sm {\n    height: var(--sizes-9);\n    border-radius: var(--radii-md);\n    padding-inline: var(--spacing-3)\n}\n\n  .button--size_lg {\n    height: var(--sizes-11);\n    border-radius: var(--radii-md);\n    padding-inline: var(--spacing-8)\n}\n\n  .button--size_icon {\n    height: var(--sizes-10);\n    width: var(--sizes-10)\n}\n\n  .icon--size_md {\n    height: var(--sizes-4);\n    width: var(--sizes-4)\n}\n\n  .icon--size_xs {\n    height: var(--sizes-2);\n    width: var(--sizes-2)\n}\n\n  .icon--size_sm {\n    height: var(--sizes-3);\n    width: var(--sizes-3)\n}\n\n  .badge--variant_default {\n    border-color: var(--colors-transparent);\n    background: var(--colors-primary);\n    color: var(--colors-primary-foreground);\n}\n\n  .separator--orientation_vertical {\n    height: var(--sizes-full);\n    width: 1px\n}\n\n  .separator--orientation_horizontal {\n    height: 1px;\n    width: var(--sizes-full)\n}\n\n  .button--variant_default:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent NaN, var(--colors-primary));\n    background-color: var(--sp-bga, var(--colors-primary));\n}\n\n  .button--variant_destructive:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent NaN, var(--colors-destructive));\n    background-color: var(--sp-bga, var(--colors-destructive));\n}\n\n  .button--variant_outline:is(:hover, [data-hover]) {\n    background: var(--colors-accent);\n    color: var(--colors-accent-foreground);\n}\n\n  .button--variant_secondary:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent NaN, var(--colors-secondary));\n    background-color: var(--sp-bga, var(--colors-secondary));\n}\n\n  .button--variant_ghost:is(:hover, [data-hover]) {\n    background: var(--colors-accent);\n    color: var(--colors-accent-foreground)\n}\n\n  .button--variant_link:is(:hover, [data-hover]) {\n    text-decoration: underline;\n}\n\n  .badge--variant_default:is(:hover, [data-hover]) {\n    --sp-bga: color-mix(in srgb, transparent 20%, var(--colors-primary));\n    background-color: var(--sp-bga, var(--colors-primary));\n}\n\n  @layer _base{\n\n    .button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--radii-md);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: var(--font-weights-medium);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      gap: var(--spacing-2);\n}\n\n    .button:is(:disabled, [disabled], [data-disabled]) {\n      pointer-events: none;\n      opacity: 50%;\n}\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      border-radius: var(--radii-full);\n      border: var(--borders-base);\n      padding-inline: var(--spacing-2\\.5);\n      padding-block: var(--spacing-0\\.5);\n      font-size: 0.75rem;\n      line-height: 1rem;\n      font-weight: var(--font-weights-semibold);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      --shadow-panda-ring-offset-color: var(--colors-background);\n}\n\n    .label {\n      font-size: 0.875rem;\n      line-height: var(--line-heights-none);\n      font-weight: var(--font-weights-medium);\n}\n\n    .peer:is(:disabled, [disabled], [data-disabled]) ~ .label {\n      cursor: not-allowed;\n      opacity: 0.7;\n}\n\n    .separator {\n      flex-shrink: 0;\n      background: var(--colors-border)\n}\n\n    .tableRow {\n      border-bottom: var(--borders-base);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .tableRow[data-state=selected] {\n      --sp-bga: color-mix(in srgb, transparent 0%, var(--colors-muted));\n      background-color: var(--sp-bga, var(--colors-muted));\n}\n\n    .tableCell {\n      padding: var(--spacing-4);\n      vertical-align: middle;\n}\n\n    .tableCell:has([role=checkbox]) {\n      padding-right: var(--spacing-0);\n}\n\n    .card {\n      border-radius: var(--radii-lg);\n      border: var(--borders-base);\n      background: var(--colors-card);\n      color: var(--colors-card-foreground);\n      box-shadow: var(--shadows-sm)\n}\n\n    .table {\n      width: var(--sizes-full);\n      caption-side: bottom;\n      font-size: 0.875rem;\n      line-height: 1.25rem\n}\n\n    .tableBody tr:last-child {\n      border-bottom: transparent\n}\n\n    .formItem {\n      display: flex;\n      flex-direction: column;\n      gap: var(--spacing-2)\n}\n\n    .formDescription {\n      color: var(--colors-muted-foreground)\n}\n\n    .formDescription,.formMessage {\n      font-size: 0.875rem;\n      line-height: 1.25rem\n}\n\n    .formMessage {\n      font-weight: var(--font-weights-medium);\n      color: var(--colors-destructive)\n}\n\n    .input {\n      display: flex;\n      height: var(--sizes-10);\n      width: var(--sizes-full);\n      border-radius: var(--radii-md);\n      border: var(--borders-input);\n      background: var(--colors-background);\n      padding-inline: var(--spacing-3);\n      padding-block: var(--spacing-2);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n}\n\n    .input::file-selector-button {\n      border: var(--borders-none);\n      background: var(--colors-transparent);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: var(--font-weights-medium);\n}\n\n    .input::placeholder, .input[data-placeholder] {\n      color: var(--colors-muted-foreground);\n}\n\n    .input:is(:disabled, [disabled], [data-disabled]) {\n      cursor: not-allowed;\n      opacity: 0.5;\n}\n\n    .tableContainer {\n      width: var(--sizes-full);\n      overflow: auto\n}\n\n    .toastViewport {\n      position: fixed;\n      top: var(--spacing-0);\n      z-index: 100;\n      display: flex;\n      max-height: 100vh;\n      width: var(--sizes-full);\n      flex-direction: column-reverse;\n      padding: var(--spacing-4);\n}\n\n    .skeleton {\n      animation: var(--animations-pulse);\n      border-radius: var(--radii-md);\n      background: var(--colors-muted)\n}\n\n    .button:is(:focus-visible, [data-focus-visible]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .badge:is(:focus, [data-focus]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .input:is(:focus-visible, [data-focus-visible]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .tableRow:is(:hover, [data-hover]) {\n      --sp-bga: color-mix(in srgb, transparent 50%, var(--colors-muted));\n      background-color: var(--sp-bga, var(--colors-muted));\n}\n\n    @media screen and (min-width: 40em) {\n      .toastViewport {\n        bottom: var(--spacing-0);\n        right: var(--spacing-0);\n        top: auto;\n        flex-direction: column;\n    }\n}\n\n    @media screen and (min-width: 48em) {\n      .toastViewport {\n        max-width: 420px;\n    }\n}\n  }\n}\n\n@layer recipes.slots{\n\n  .toast__root--variant_default {\n    border: var(--borders-base);\n    background: var(--colors-background)\n}\n\n  .toast__root--variant_destructive {\n    border: var(--borders-destructive);\n    background: var(--colors-destructive);\n    color: var(--colors-destructive-foreground)\n}\n\n  .toast__action--variant_destructive {\n    --sp-bca: color-mix(in srgb, transparent 60%, var(--colors-muted));\n    border-color: var(--sp-bca, var(--colors-muted));\n}\n\n  .toast__close--variant_destructive {\n    color: var(--colors-red-300);\n}\n\n  .toast__action--variant_destructive:is(:focus, [data-focus]) {\n    --shadow-panda-ring-color: var(--colors-destructive)\n    ;\n}\n\n  .toast__close--variant_destructive:is(:focus, [data-focus]) {\n    --shadow-panda-ring-color: var(--colors-red-400)\n    ;\n    --shadow-panda-ring-offset-color: var(--colors-red-600)\n    ;\n}\n\n  .toast__action--variant_destructive:is(:hover, [data-hover]) {\n    --sp-bca: color-mix(in srgb, transparent 70%, var(--colors-destructive));\n    border-color: var(--sp-bca, var(--colors-destructive));\n    background: var(--colors-destructive);\n    color: var(--colors-destructive-foreground);\n}\n\n  .toast__close--variant_destructive:is(:hover, [data-hover]) {\n    color: var(--colors-red-50);\n}\n\n  @layer _base{\n\n    .toast__root {\n      pointer-events: auto;\n      position: relative;\n      display: flex;\n      width: var(--sizes-full);\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--spacing-4);\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      padding: var(--spacing-6);\n      padding-right: var(--spacing-8);\n      box-shadow: var(--shadows-lg);\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .toast__root[data-swipe=cancel] {\n      transform: translateX(0);\n}\n\n    .toast__root[data-swipe=end] {\n      transform: translateX(var(--radix-toast-swipe-end-x));\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 1;\n      --shadow-panda-exit-scale: 1;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .toast__root[data-swipe=move] {\n      transform: translateX(var(--radix-toast-swipe-move-x));\n      transition: none;\n}\n\n    .toast__root[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 1;\n      --shadow-panda-enter-scale: 1;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: calc(100% * -1);\n}\n\n    .toast__root[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0.8;\n      --shadow-panda-exit-scale: 1;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 100%;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .toast__action {\n      display: inline-flex;\n      height: var(--sizes-8);\n      flex-shrink: 0;\n      align-items: center;\n      justify-content: center;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-transparent);\n      padding-inline: var(--spacing-3);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: var(--font-weights-medium);\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n}\n\n    .toast__action:is(:disabled, [disabled], [data-disabled]) {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .toast__close {\n      position: absolute;\n      right: var(--spacing-2);\n      top: var(--spacing-2);\n      border-radius: var(--radii-md);\n      padding: var(--spacing-1);\n      --sp-ca: color-mix(in srgb, transparent 50%, var(--colors-foreground));\n      color: var(--sp-ca, var(--colors-foreground));\n      opacity: 0;\n      transition-property: var(--transition-prop, opacity);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n}\n\n    .toast__title {\n      font-weight: var(--font-weights-semibold)\n}\n\n    .toast__title,.toast__description {\n      font-size: 0.875rem;\n      line-height: 1.25rem\n}\n\n    .toast__description {\n      opacity: 0.9\n}\n\n    .tooltip__content {\n      z-index: 50;\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-popover);\n      padding-inline: var(--spacing-3);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      color: var(--colors-popover-foreground);\n      box-shadow: var(--shadows-md);\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .tooltip__content[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .tooltip__content[data-side=top] {\n      --shadow-panda-enter-translate-y: var(--spacing-2);\n}\n\n    .tooltip__content[data-side=bottom] {\n      --shadow-panda-enter-translate-y: calc(var(--spacing-2) * -1);\n}\n\n    .tooltip__content[data-side=left] {\n      --shadow-panda-enter-translate-x: var(--spacing-2);\n}\n\n    .tooltip__content[data-side=right] {\n      --shadow-panda-enter-translate-x: calc(var(--spacing-2) * -1);\n}\n\n    .dropdownMenu__subTrigger {\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      align-items: center;\n      border-radius: var(--radii-sm);\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      gap: var(--spacing-2);\n}\n\n    .dropdownMenu__subTrigger[data-state=open] {\n      background: var(--colors-accent);\n}\n\n    .dropdownMenu__subContent {\n      z-index: 50;\n      min-width: 8rem;\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-popover);\n      padding: var(--spacing-1);\n      color: var(--colors-popover-foreground);\n      box-shadow: var(--shadows-lg);\n}\n\n    .dropdownMenu__subContent[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .dropdownMenu__subContent[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .dropdownMenu__content {\n      z-index: 50;\n      min-width: 8rem;\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      border: var(--borders-base);\n      background: var(--colors-popover);\n      padding: var(--spacing-1);\n      color: var(--colors-popover-foreground);\n      box-shadow: var(--shadows-md);\n}\n\n    .dropdownMenu__content[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .dropdownMenu__content[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .dropdownMenu__item {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      align-items: center;\n      border-radius: var(--radii-sm);\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      gap: var(--spacing-2);\n}\n\n    .dropdownMenu__item[data-disabled] {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .dropdownMenu__itemIndicator {\n      position: absolute;\n      left: var(--spacing-2);\n      display: flex;\n      height: var(--sizes-3\\.5);\n      width: var(--sizes-3\\.5);\n      align-items: center;\n      justify-content: center\n}\n\n    .dropdownMenu__checkboxItem {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      align-items: center;\n      border-radius: var(--radii-sm);\n      padding-block: var(--spacing-1\\.5);\n      padding-left: var(--spacing-8);\n      padding-right: var(--spacing-2);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .dropdownMenu__checkboxItem[data-disabled] {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .dropdownMenu__radioItem {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      align-items: center;\n      border-radius: var(--radii-sm);\n      padding-block: var(--spacing-1\\.5);\n      padding-left: var(--spacing-8);\n      padding-right: var(--spacing-2);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .dropdownMenu__radioItem[data-disabled] {\n      pointer-events: none;\n      opacity: 0.5;\n}\n\n    .dropdownMenu__label {\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      font-weight: var(--font-weights-semibold)\n}\n\n    .dropdownMenu__separator {\n      margin-inline: calc(var(--spacing-1) * -1);\n      margin-block: var(--spacing-1);\n      height: 1px;\n      background: var(--colors-muted)\n}\n\n    .dropdownMenu__shortcut {\n      margin-left: auto;\n      font-size: 0.75rem;\n      line-height: 1rem;\n      letter-spacing: var(--letter-spacings-widest);\n      opacity: 0.6\n}\n\n    .checkbox__root {\n      height: var(--sizes-4);\n      width: var(--sizes-4);\n      flex-shrink: 0;\n      border-radius: var(--radii-sm);\n      border: var(--borders-primary);\n      cursor: pointer;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n}\n\n    .checkbox__root:is(:disabled, [disabled], [data-disabled]) {\n      cursor: not-allowed;\n      opacity: 0.5;\n}\n\n    .checkbox__root[data-state=\"checked\"] {\n      background: var(--colors-primary);\n      color: var(--colors-primary-foreground);\n}\n\n    .checkbox__indicator {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: currentColor\n}\n\n    .accordion__item {\n      border-bottom: var(--borders-base)\n}\n\n    .accordion__header {\n      display: flex\n}\n\n    .accordion__trigger {\n      display: flex;\n      flex: 1 1 0%;\n      align-items: center;\n      justify-content: space-between;\n      padding-block: var(--spacing-4);\n      font-weight: var(--font-weights-medium);\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n}\n\n    .accordion__trigger > svg {\n      height: var(--sizes-4);\n      width: var(--sizes-4);\n      flex-shrink: 0;\n      transition-property: var(--transition-prop, transform);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--durations-normal);\n      --transition-duration: var(--durations-normal);\n}\n\n    .accordion__trigger[data-state=open] > svg {\n      transform: rotate(180deg);\n}\n\n    .accordion__content {\n      overflow: hidden;\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n}\n\n    .accordion__content[data-state=closed] {\n      animation: var(--animations-accordion-up);\n}\n\n    .accordion__content[data-state=open] {\n      animation: var(--animations-accordion-down);\n}\n\n    .accordion__content > div {\n      padding-bottom: var(--spacing-4);\n      padding-top: var(--spacing-0);\n}\n\n    .progress__root {\n      position: relative;\n      height: var(--sizes-4);\n      width: var(--sizes-full);\n      overflow: hidden;\n      border-radius: var(--radii-full);\n      background: var(--colors-secondary)\n}\n\n    .progress__indicator {\n      height: var(--sizes-full);\n      width: var(--sizes-full);\n      flex: 1 1 0%;\n      background: var(--colors-primary);\n      transition-property: var(--transition-prop, all);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms)\n}\n\n    .dialog__overlay {\n      position: fixed;\n      inset: var(--spacing-0);\n      z-index: 50;\n      --sp-bga: color-mix(in srgb, transparent 20%, var(--colors-background));\n      background-color: var(--sp-bga, var(--colors-background));\n      backdrop-filter: blur(4px);\n}\n\n    .dialog__overlay[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 1;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: 0;\n      --shadow-panda-enter-translate-y: 0;\n}\n\n    .dialog__overlay[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 1;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: 0;\n      --shadow-panda-exit-translate-y: 0;\n}\n\n    .dialog__close {\n      position: absolute;\n      right: var(--spacing-4);\n      top: var(--spacing-4);\n      border-radius: var(--radii-sm);\n      opacity: 0.7;\n      --shadow-panda-ring-offset-color: var(--colors-background);\n      transition-property: var(--transition-prop, opacity);\n      transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));\n      transition-duration: var(--transition-duration, 150ms);\n      cursor: pointer;\n}\n\n    .dialog__close:is(:disabled, [disabled], [data-disabled]) {\n      pointer-events: none;\n}\n\n    .dialog__close {\n      background: var(--colors-accent);\n      color: var(--colors-muted-foreground);\n}\n\n    .dialog__content {\n      position: fixed;\n      left: 50%;\n      top: 50%;\n      z-index: 50;\n      display: grid;\n      width: var(--sizes-full);\n      max-width: var(--sizes-lg);\n      transform: translate(var(--shadow-panda-translate-x, 0), var(--shadow-panda-translate-y, 0)) rotate(var(--shadow-panda-rotate, 0)) skewX(var(--shadow-panda-skew-x, 0)) skewY(var(--shadow-panda-skew-y, 0)) scaleX(var(--shadow-panda-scale-x, 1)) scaleY(var(--shadow-panda-scale-y, 1));\n      --shadow-panda-translate-x: -50%;\n      --shadow-panda-translate-y: -50%;\n      --transition-duration: var(--durations-normal);\n      transition-duration: var(--durations-normal);\n      gap: var(--spacing-4);\n      border: var(--borders-base);\n      background: var(--colors-background);\n      padding: var(--spacing-6);\n      box-shadow: var(--shadows-lg);\n}\n\n    .dialog__content[data-state=open] {\n      animation-name: enter;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-enter-opacity: 0;\n      --shadow-panda-enter-scale: 0.95;\n      --shadow-panda-enter-rotate: 0;\n      --shadow-panda-enter-translate-x: calc(50% * -1);\n      --shadow-panda-enter-translate-y: calc(48% * -1);\n}\n\n    .dialog__content[data-state=closed] {\n      animation-name: exit;\n      animation-duration: var(--durations-fast);\n      --shadow-panda-exit-opacity: 0;\n      --shadow-panda-exit-scale: 0.95;\n      --shadow-panda-exit-rotate: 0;\n      --shadow-panda-exit-translate-x: calc(50% * -1);\n      --shadow-panda-exit-translate-y: calc(48% * -1);\n}\n\n    .dialog__header {\n      display: flex;\n      flex-direction: column;\n}\n\n    .dialog__header > * + * {\n      margin-top: var(--spacing-1\\.5);\n}\n\n    .dialog__header {\n      text-align: center;\n}\n\n    .dialog__footer {\n      display: flex;\n      flex-direction: column-reverse;\n}\n\n    .dialog__title {\n      font-size: 1.125rem;\n      line-height: var(--line-heights-none);\n      font-weight: var(--font-weights-semibold);\n      letter-spacing: var(--letter-spacings-tight)\n}\n\n    .dialog__description {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      color: var(--colors-muted-foreground)\n}\n\n    .command__root {\n      display: flex;\n      height: var(--sizes-full);\n      width: var(--sizes-full);\n      flex-direction: column;\n      overflow: hidden;\n      border-radius: var(--radii-md);\n      background: var(--colors-popover);\n      color: var(--colors-popover-foreground)\n}\n\n    .command__inputWrapper {\n      display: flex;\n      align-items: center;\n      border-bottom: var(--borders-base);\n      padding-inline: var(--spacing-3)\n}\n\n    .command__inputSearch {\n      margin-right: var(--spacing-2);\n      height: var(--sizes-4);\n      width: var(--sizes-4);\n      flex-shrink: 0;\n      opacity: 0.5\n}\n\n    .command__input {\n      display: flex;\n      height: var(--sizes-11);\n      width: var(--sizes-full);\n      border-radius: var(--radii-md);\n      background: var(--colors-transparent);\n      padding-block: var(--spacing-3);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      box-shadow: none;\n}\n\n    .command__input::placeholder, .command__input[data-placeholder] {\n      color: var(--colors-muted-foreground);\n}\n\n    .command__input:is(:disabled, [disabled], [data-disabled]) {\n      cursor: not-allowed;\n      opacity: 0.5;\n}\n\n    .command__list {\n      max-height: 300px;\n      overflow-y: auto;\n      overflow-x: hidden\n}\n\n    .command__empty {\n      padding-block: var(--spacing-6);\n      text-align: center;\n      font-size: 0.875rem;\n      line-height: 1.25rem\n}\n\n    .command__group {\n      overflow: hidden;\n      padding: var(--spacing-1);\n      color: var(--colors-foreground);\n}\n\n    .command__group [cmdk-group-heading] {\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.75rem;\n      line-height: 1rem;\n      font-weight: var(--font-weights-medium);\n      color: var(--colors-muted-foreground);\n}\n\n    .command__separator {\n      margin-inline: calc(var(--spacing-1) * -1);\n      height: 1px;\n      background: var(--colors-border)\n}\n\n    .command__item {\n      position: relative;\n      display: flex;\n      cursor: default;\n      -webkit-user-select: none;\n      user-select: none;\n      align-items: center;\n      border-radius: var(--radii-sm);\n      padding-inline: var(--spacing-2);\n      padding-block: var(--spacing-1\\.5);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      outline: var(--borders-none);\n      gap: var(--spacing-2);\n}\n\n    .command__item[aria-selected=true] {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .command__item[data-disabled] {\n      opacity: 0.5;\n}\n\n    .command__shortcut {\n      margin-left: auto;\n      font-size: 0.75rem;\n      line-height: 1rem;\n      letter-spacing: var(--letter-spacings-widest);\n      color: var(--colors-muted-foreground)\n}\n\n    .toast__action:is(:focus, [data-focus]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .toast__close:is(:focus, [data-focus]) {\n      opacity: 1;\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .dropdownMenu__subTrigger:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n}\n\n    .dropdownMenu__item:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .dropdownMenu__checkboxItem:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .dropdownMenu__radioItem:is(:focus, [data-focus]) {\n      background: var(--colors-accent);\n      color: var(--colors-accent-foreground);\n}\n\n    .checkbox__root:is(:focus-visible, [data-focus-visible]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .dialog__close:is(:focus, [data-focus]) {\n      outline: 2px solid transparent;\n      outline-offset: 2px;\n      --shadow-panda-ring-offset-shadow: var(--shadow-panda-ring-inset,) 0 0 0 var(--shadow-panda-ring-offset-width, 0px) var(--shadow-panda-ring-offset-color);\n      --shadow-panda-ring-shadow: var(--shadow-panda-ring-inset,) 0 0 0 calc(2px + var(--shadow-panda-ring-offset-width, 0px)) var(--shadow-panda-ring-color);\n      box-shadow: var(--shadow-panda-ring-offset-shadow),var(--shadow-panda-ring-shadow),var(--shadow-panda-base-shadow,0 0 #0000);\n      --shadow-panda-ring-color: var(--colors-ring);\n      --shadow-panda-ring-offset-width: 2px;\n}\n\n    .toast__action:is(:hover, [data-hover]) {\n      background: var(--colors-secondary);\n}\n\n    .toast__close:is(:hover, [data-hover]) {\n      color: var(--colors-foreground);\n}\n\n    .group:is(:hover, [data-hover]) .toast__close {\n      opacity: 1;\n}\n\n    .accordion__trigger:is(:hover, [data-hover]) {\n      text-decoration: underline;\n}\n\n    .dialog__close:is(:hover, [data-hover]) {\n      opacity: 1;\n}\n\n    @media screen and (min-width: 40em) {\n      .toast__root[data-state=open] {\n        --shadow-panda-enter-translate-y: 100%;\n    }\n      .dialog__content {\n        border-radius: var(--radii-lg);\n    }\n      .dialog__header {\n        text-align: left;\n    }\n      .dialog__footer {\n        flex-direction: row;\n        justify-content: flex-end;\n    }\n\n      .dialog__footer > * + * {\n        margin-left: var(--spacing-2);\n    }\n}\n  }\n}\n\n@layer utilities{\n  .border-w_1px {\n    border-width: 1px\n}\n\n  .text_black {\n    color: var(--colors-black)\n}\n\n  .text_text\\.active {\n    color: var(--colors-text-active)\n}\n\n  .text_text\\.gray {\n    color: var(--colors-text-gray)\n}\n\n  .text_text\\.success {\n    color: var(--colors-text-success)\n}\n\n  .text_text\\.warning {\n    color: var(--colors-text-warning)\n}\n\n  .text_text\\.error {\n    color: var(--colors-text-error)\n}\n\n  .text_white {\n    color: var(--colors-white)\n}\n\n  .border_transparent {\n    border-color: var(--colors-transparent)\n}\n\n  .bg_transparent {\n    background-color: var(--colors-transparent)\n}\n\n  .border_none {\n    border: var(--borders-none)\n}\n\n  .py_0 {\n    padding-block: var(--spacing-0)\n}\n\n  .px_0 {\n    padding-inline: var(--spacing-0)\n}\n\n  .border_dark\\.active {\n    border-color: var(--colors-dark-active)\n}\n\n  .bg_dark\\.active {\n    background-color: var(--colors-dark-active)\n}\n\n  .border_dark\\.gray {\n    border-color: var(--colors-dark-gray)\n}\n\n  .bg_dark\\.gray {\n    background-color: var(--colors-dark-gray)\n}\n\n  .border_dark\\.success {\n    border-color: var(--colors-dark-success)\n}\n\n  .bg_dark\\.success {\n    background-color: var(--colors-dark-success)\n}\n\n  .border_dark\\.warning {\n    border-color: var(--colors-dark-warning)\n}\n\n  .bg_dark\\.warning {\n    background-color: var(--colors-dark-warning)\n}\n\n  .border_dark\\.error {\n    border-color: var(--colors-dark-error)\n}\n\n  .bg_dark\\.error {\n    background-color: var(--colors-dark-error)\n}\n\n  .border_white {\n    border-color: var(--colors-white)\n}\n\n  .bg_white {\n    background-color: var(--colors-white)\n}\n\n  .border_light\\.active {\n    border-color: var(--colors-light-active)\n}\n\n  .bg_light\\.active {\n    background-color: var(--colors-light-active)\n}\n\n  .border_light\\.gray {\n    border-color: var(--colors-light-gray)\n}\n\n  .bg_light\\.gray {\n    background-color: var(--colors-light-gray)\n}\n\n  .border_light\\.success {\n    border-color: var(--colors-light-success)\n}\n\n  .bg_light\\.success {\n    background-color: var(--colors-light-success)\n}\n\n  .border_light\\.warning {\n    border-color: var(--colors-light-warning)\n}\n\n  .bg_light\\.warning {\n    background-color: var(--colors-light-warning)\n}\n\n  .border_light\\.error {\n    border-color: var(--colors-light-error)\n}\n\n  .bg_light\\.error {\n    background-color: var(--colors-light-error)\n}\n\n  .border_decoration\\.active {\n    border-color: var(--colors-decoration-active)\n}\n\n  .border_decoration\\.gray {\n    border-color: var(--colors-decoration-gray)\n}\n\n  .border_decoration\\.success {\n    border-color: var(--colors-decoration-success)\n}\n\n  .border_decoration\\.warning {\n    border-color: var(--colors-decoration-warning)\n}\n\n  .border_decoration\\.error {\n    border-color: var(--colors-decoration-error)\n}\n\n  .text_text\\.white {\n    color: text.white\n}\n\n  .transition-prop_background-color\\,_border-color\\,_color\\,_opacity {\n    --transition-prop: background-color, border-color, color, opacity;\n    transition-property: background-color, border-color, color, opacity\n}\n\n  .duration_token\\(durations\\.fast\\) {\n    --transition-duration: var(--durations-fast);\n    transition-duration: var(--durations-fast)\n}\n\n  .ease_token\\(easings\\.easeInOut\\) {\n    --transition-easing: var(--easings-ease-in-out);\n    transition-timing-function: var(--easings-ease-in-out)\n}\n\n  .p_sm {\n    padding: var(--spacing-sm)\n}\n\n  .text_unset {\n    color: unset\n}\n\n  .d_flex {\n    display: flex\n}\n\n  .items_center {\n    align-items: center\n}\n\n  .justify_space-between {\n    justify-content: space-between\n}\n\n  .border-w_thin {\n    border-width: thin\n}\n\n  .bg_blue {\n    background-color: blue\n}\n\n  .border_blueviolet {\n    border-color: blueviolet\n}\n\n  .bg_\\#C70000 {\n    background-color: #C70000\n}\n\n  .border_\\#C70000 {\n    border-color: #C70000\n}\n\n  .bg_\\#0000A8 {\n    background-color: #0000A8\n}\n\n  .border_\\#0000A8 {\n    border-color: #0000A8\n}\n\n  .bg_\\#00c700 {\n    background-color: #00c700\n}\n\n  .border_\\#00c700 {\n    border-color: #00c700\n}\n\n  .pointer-events_visible {\n    pointer-events: visible\n}\n\n  .pointer-events_none {\n    pointer-events: none\n}\n\n  .cursor_help {\n    cursor: help\n}\n\n  .cursor_auto {\n    cursor: auto\n}\n\n  .flex_row {\n    flex-direction: row\n}\n\n  .flex_row-reverse {\n    flex-direction: row-reverse\n}\n\n  .justify_space-evenly {\n    justify-content: space-evenly\n}\n\n  .gap_xs {\n    gap: var(--spacing-xs)\n}\n\n  .white-space_nowrap {\n    white-space: nowrap\n}\n\n  .max-w_full {\n    max-width: var(--sizes-full)\n}\n\n  .text_ellipsis {\n    text-overflow: ellipsis\n}\n\n  .text_clip {\n    text-overflow: clip\n}\n\n  .overflow_hidden {\n    overflow: hidden\n}\n\n  .gap_smaller\\.xs {\n    gap: var(--spacing-smaller-xs)\n}\n\n  .py_1 {\n    padding-block: var(--spacing-1)\n}\n\n  .pl_1 {\n    padding-left: var(--spacing-1)\n}\n\n  .w_icon\\.xs {\n    width: var(--sizes-icon-xs)\n}\n\n  .h_icon\\.xs {\n    height: var(--sizes-icon-xs)\n}\n\n  .list_disc {\n    list-style-type: disc\n}\n\n  .list_inside {\n    list-style-position: inside\n}\n\n  .text_dark\\.gray {\n    color: var(--colors-dark-gray)\n}\n\n  .flex-wrap_nowrap {\n    flex-wrap: nowrap\n}\n\n  .max-w_container\\.smaller\\.xxs {\n    max-width: var(--sizes-container-smaller-xxs)\n}\n\n  .text_light {\n    color: light\n}\n\n  .rounded_common {\n    border-radius: var(--radii-common)\n}\n\n  .shrink_0 {\n    flex-shrink: 0\n}\n\n  .h_lineHeights\\.sm {\n    height: lineHeights.sm\n}\n\n  .h_lineHeights\\.xs {\n    height: lineHeights.xs\n}\n\n  .cursor_default {\n    cursor: default\n}\n\n  .cursor_pointer {\n    cursor: pointer\n}\n\n  .d_none {\n    display: none\n}\n\n  .pr_0 {\n    padding-right: var(--spacing-0)\n}\n\n  .rounded-l_0 {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0\n}\n\n  .my_-xs {\n    margin-block: calc(var(--spacing-xs) * -1)\n}\n\n  .p_smaller\\.sm {\n    padding: var(--spacing-smaller-sm)\n}\n\n  .text_inherit {\n    color: inherit\n}\n\n  .w_auto {\n    width: auto\n}\n\n  .h_full {\n    height: var(--sizes-full)\n}\n\n  .max-h_container\\.smaller\\.xs {\n    max-height: var(--sizes-container-smaller-xs)\n}\n\n  .overflow-y_auto {\n    overflow-y: auto\n}\n\n  .w_full {\n    width: var(--sizes-full)\n}\n\n  .overflow_auto {\n    overflow: auto\n}\n\n  .gap_sm {\n    gap: var(--spacing-sm)\n}\n\n  .flex_column {\n    flex-direction: column\n}\n\n  .grow_1 {\n    flex-grow: 1\n}\n\n  .border-b_decoration\\.gray {\n    border-bottom-color: var(--colors-decoration-gray)\n}\n\n  .items_left {\n    align-items: left\n}\n\n  .justify_center {\n    justify-content: center\n}\n\n  .justify_end {\n    justify-content: end\n}\n\n  .flex-wrap_wrap {\n    flex-wrap: wrap\n}\n\n  .text_normal {\n    color: normal\n}\n\n  .text_left {\n    text-align: left\n}\n\n  .text_label {\n    color: label\n}\n\n  .p_0 {\n    padding: var(--spacing-0)\n}\n\n  .w_circle {\n    width: var(--sizes-circle)\n}\n\n  .h_circle {\n    height: var(--sizes-circle)\n}\n\n  .rounded_full {\n    border-radius: var(--radii-full)\n}\n\n  .grow_0 {\n    flex-grow: 0\n}\n\n  .text_dark\\.success {\n    color: var(--colors-dark-success)\n}\n\n  .text_dark\\.error {\n    color: var(--colors-dark-error)\n}\n\n  .text_dark\\.active {\n    color: var(--colors-dark-active)\n}\n\n  .text_dark\\.warning {\n    color: var(--colors-dark-warning)\n}\n\n  .text_dark {\n    color: dark\n}\n\n  .rounded_md {\n    border-radius: var(--radii-md)\n}\n\n  .border_border\\.base {\n    border: var(--borders-border-base)\n}\n\n  .h_8 {\n    height: var(--sizes-8)\n}\n\n  .opacity_1 {\n    opacity: 1\n}\n\n  .mx_xs {\n    margin-inline: var(--spacing-xs)\n}\n\n  .border_base {\n    border: var(--borders-base)\n}\n\n  .border_border\\.success {\n    border: var(--borders-border-success)\n}\n\n  .border_border\\.active {\n    border: var(--borders-border-active)\n}\n\n  .pos_relative {\n    position: relative\n}\n\n  .z_1 {\n    z-index: 1\n}\n\n  .max-w_container\\.xs {\n    max-width: var(--sizes-container-xs)\n}\n\n  .bg_light\\.gray {\n    background: var(--colors-light-gray)\n}\n\n  .py_xs {\n    padding-block: var(--spacing-xs)\n}\n\n  .px_sm {\n    padding-inline: var(--spacing-sm)\n}\n\n  .items_start {\n    align-items: start\n}\n\n  .gap_xxs {\n    gap: var(--spacing-xxs)\n}\n\n  .max-w_card\\.sm {\n    max-width: var(--sizes-card-sm)\n}\n\n  .flex_0_0_auto {\n    flex: 0 0 auto\n}\n\n  .rounded_9999px {\n    border-radius: 9999px\n}\n\n  .text_success {\n    color: success\n}\n\n  .text_gray {\n    color: gray\n}\n\n  .leading_sm {\n    line-height: var(--line-heights-sm)\n}\n\n  .columns_1 {\n    columns: 1\n}\n\n  .text_error {\n    color: error\n}\n\n  .cursor_not-allowed {\n    cursor: not-allowed\n}\n\n  .w_fit-content {\n    width: fit-content\n}\n\n  .w_container\\.smaller\\.sm {\n    width: var(--sizes-container-smaller-sm)\n}\n\n  .max-h_container\\.xs {\n    max-height: var(--sizes-container-xs)\n}\n\n  .mt_sm,.space_y_sm > * + * {\n    margin-top: var(--spacing-sm)\n}\n\n  .justify_flex-end {\n    justify-content: flex-end\n}\n\n  .my_md {\n    margin-block: var(--spacing-md)\n}\n\n  .w_icon\\.primary {\n    width: var(--sizes-icon-primary)\n}\n\n  .h_icon\\.primary {\n    height: var(--sizes-icon-primary)\n}\n\n  .w_icon\\.xxs {\n    width: var(--sizes-icon-xxs)\n}\n\n  .h_icon\\.xxs {\n    height: var(--sizes-icon-xxs)\n}\n\n  .w_icon\\.sm {\n    width: var(--sizes-icon-sm)\n}\n\n  .h_icon\\.sm {\n    height: var(--sizes-icon-sm)\n}\n\n  .w_icon\\.md {\n    width: var(--sizes-icon-md)\n}\n\n  .h_icon\\.md {\n    height: var(--sizes-icon-md)\n}\n\n  .w_icon\\.lg {\n    width: var(--sizes-icon-lg)\n}\n\n  .h_icon\\.lg {\n    height: var(--sizes-icon-lg)\n}\n\n  .w_icon\\.xxl {\n    width: var(--sizes-icon-xxl)\n}\n\n  .h_icon\\.xxl {\n    height: var(--sizes-icon-xxl)\n}\n\n  .w_icon\\.smaller\\.xs {\n    width: var(--sizes-icon-smaller-xs)\n}\n\n  .h_icon\\.smaller\\.xs {\n    height: var(--sizes-icon-smaller-xs)\n}\n\n  .text_dark\\.black {\n    color: dark.black\n}\n\n  .text_dark\\.white {\n    color: dark.white\n}\n\n  .cursor_inherit {\n    cursor: inherit\n}\n\n  .ps_3 {\n    padding-inline-start: var(--spacing-3)\n}\n\n  .pe_3 {\n    padding-inline-end: var(--spacing-3)\n}\n\n  .ps_md {\n    padding-inline-start: var(--spacing-md)\n}\n\n  .pe_md {\n    padding-inline-end: var(--spacing-md)\n}\n\n  .pos_absolute {\n    position: absolute\n}\n\n  .top_0 {\n    top: var(--spacing-0)\n}\n\n  .bottom_0 {\n    bottom: var(--spacing-0)\n}\n\n  .left_0 {\n    left: var(--spacing-0)\n}\n\n  .right_0 {\n    right: var(--spacing-0)\n}\n\n  .min-w_container\\.xxs {\n    min-width: var(--sizes-container-xxs)\n}\n\n  .\\[\\&_code\\,_\\&_code_\\*\\]\\:font_mono code, .\\[\\&_code\\,_\\&_code_\\*\\]\\:font_mono code * {\n    font-family: var(--fonts-mono)\n}\n\n  .h_auto {\n    height: auto\n}\n\n  .mb_sm {\n    margin-bottom: var(--spacing-sm)\n}\n\n  .font-style_italic {\n    font-style: italic\n}\n\n  .max-h_basic\\.almost-full {\n    max-height: var(--sizes-basic-almost-full)\n}\n\n  .min-h_container\\.smaller\\.xxs {\n    min-height: var(--sizes-container-smaller-xxs)\n}\n\n  .min-w_min-content {\n    min-width: min-content\n}\n\n  .max-w_basic\\.almost-full {\n    max-width: var(--sizes-basic-almost-full)\n}\n\n  .sr_true {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0\n}\n\n  .ring_none {\n    outline: var(--borders-none)\n}\n\n  .justify_start {\n    justify-content: start\n}\n\n  .justify_normal {\n    justify-content: normal\n}\n\n  .ml_-xs {\n    margin-left: calc(var(--spacing-xs) * -1)\n}\n\n  .mr_-xs {\n    margin-right: calc(var(--spacing-xs) * -1)\n}\n\n  .leading_unset {\n    line-height: unset\n}\n\n  .d_flex\\! {\n    display: flex !important\n}\n\n  .w_0 {\n    width: var(--sizes-0)\n}\n\n  .break_break-all {\n    word-break: break-all\n}\n\n  .font_mono {\n    font-family: var(--fonts-mono)\n}\n\n  .text_primary {\n    color: var(--colors-primary)\n}\n\n  .gap_0 {\n    gap: var(--spacing-0)\n}\n\n  .border-rw_0 {\n    border-right-width: 0\n}\n\n  .\\[\\&\\:first-child\\]\\:rounded-l_common:first-child {\n    border-top-left-radius: var(--radii-common);\n    border-bottom-left-radius: var(--radii-common)\n}\n\n  .\\[\\&\\:last-child\\]\\:rounded-r_common:last-child {\n    border-top-right-radius: var(--radii-common);\n    border-bottom-right-radius: var(--radii-common)\n}\n\n  .\\[\\&\\:last-child\\]\\:border-rw_1px:last-child {\n    border-right-width: 1px\n}\n\n  .\\[\\&\\:checked\\]\\:border_decoration\\.active:checked {\n    border-color: var(--colors-decoration-active)\n}\n\n  .\\[\\&\\:checked\\]\\:bg_light\\.active:checked {\n    background-color: var(--colors-light-active)\n}\n\n  .border-rw_1px {\n    border-right-width: 1px\n}\n\n  .\\[\\&_\\+_label\\]\\:border-lw_0 + label {\n    border-left-width: 0\n}\n\n  .leading_lineHeights\\.sm {\n    line-height: lineHeights.sm\n}\n\n  .direction_row {\n    direction: row\n}\n\n  .right_5 {\n    right: var(--spacing-5)\n}\n\n  .right_1 {\n    right: var(--spacing-1)\n}\n\n  .top_1 {\n    top: var(--spacing-1)\n}\n\n  .shrink_1 {\n    flex-shrink: 1\n}\n\n  .mt_xs {\n    margin-top: var(--spacing-xs)\n}\n\n  .rounded-r_0 {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0\n}\n\n  .font_medium {\n    font-weight: var(--font-weights-medium)\n}\n\n  .break_break-word {\n    word-break: break-word\n}\n\n  .white-space_break-spaces {\n    white-space: break-spaces\n}\n\n  .fs_primary {\n    font-size: var(--font-sizes-primary)\n}\n\n  .fs_xl {\n    font-size: var(--font-sizes-xl)\n}\n\n  .fs_lg {\n    font-size: var(--font-sizes-lg)\n}\n\n  .fs_md {\n    font-size: var(--font-sizes-md)\n}\n\n  .fs_sm {\n    font-size: var(--font-sizes-sm)\n}\n\n  .fs_xs {\n    font-size: var(--font-sizes-xs)\n}\n\n  .fs_xxs {\n    font-size: var(--font-sizes-xxs)\n}\n\n  .text_text\\.normal {\n    color: var(--colors-text-normal)\n}\n\n  .text_text\\.label {\n    color: var(--colors-text-label)\n}\n\n  .text_text\\.light {\n    color: var(--colors-text-light)\n}\n\n  .font_primary {\n    font-weight: var(--font-weights-primary)\n}\n\n  .font_md {\n    font-weight: var(--font-weights-md)\n}\n\n  .font_lg {\n    font-weight: var(--font-weights-lg)\n}\n\n  .font_xl {\n    font-weight: var(--font-weights-xl)\n}\n\n  .font_body {\n    font-family: var(--fonts-body)\n}\n\n  .white-space_pre-wrap {\n    white-space: pre-wrap\n}\n\n  .text_center {\n    text-align: center\n}\n\n  .text_right {\n    text-align: right\n}\n\n  .border_input {\n    border: var(--borders-input)\n}\n\n  .p_xs {\n    padding: var(--spacing-xs)\n}\n\n  .cursor_text {\n    cursor: text\n}\n\n  .d_inline-block {\n    display: inline-block\n}\n\n  .leading_1 {\n    line-height: 1\n}\n\n  .w_300px {\n    width: 300px\n}\n\n  .rounded_var\\(--border-radius\\) {\n    border-radius: var(--border-radius)\n}\n\n  .w_100\\% {\n    width: 100%\n}\n\n  .ring_unset {\n    outline: unset\n}\n\n  .m_0_-1px_-1px_0 {\n    margin: 0 -1px -1px 0\n}\n\n  .bg_\\#000 {\n    background-color: #000\n}\n\n  .z_10 {\n    z-index: 10\n}\n\n  .h_100\\% {\n    height: 100%\n}\n\n  .pl_8 {\n    padding-left: var(--spacing-8)\n}\n\n  .text_destructive {\n    color: var(--colors-destructive)\n}\n\n  .pos_popper {\n    position: popper\n}\n\n  .top_100\\% {\n    top: 100%\n}\n\n  .left_calc\\(-1_\\*_token\\(sizes\\.slider\\.label\\)_\\/_3\\) {\n    left: calc(-1 * var(--sizes-slider-label) / 3)\n}\n\n  .w_slider\\.label {\n    width: var(--sizes-slider-label)\n}\n\n  .w_slider\\.thumb\\.sm\\! {\n    width: var(--sizes-slider-thumb-sm) !important\n}\n\n  .h_slider\\.thumb\\.sm\\! {\n    height: var(--sizes-slider-thumb-sm) !important\n}\n\n  .w_slider\\.thumb\\.lg\\! {\n    width: var(--sizes-slider-thumb-lg) !important\n}\n\n  .h_slider\\.thumb\\.lg\\! {\n    height: var(--sizes-slider-thumb-lg) !important\n}\n\n  .min-w_skeleton\\.button\\.width {\n    min-width: var(--sizes-skeleton-button-width)\n}\n\n  .min-h_skeleton\\.button\\.height {\n    min-height: var(--sizes-skeleton-button-height)\n}\n\n  .min-w_full {\n    min-width: var(--sizes-full)\n}\n\n  .min-h_skeleton\\.grid\\.height\\.sm {\n    min-height: var(--sizes-skeleton-grid-height-sm)\n}\n\n  .min-h_skeleton\\.grid\\.height\\.xs {\n    min-height: var(--sizes-skeleton-grid-height-xs)\n}\n\n  .min-h_skeleton\\.grid\\.height\\.md {\n    min-height: var(--sizes-skeleton-grid-height-md)\n}\n\n  .min-h_skeleton\\.grid\\.height\\.lg {\n    min-height: var(--sizes-skeleton-grid-height-lg)\n}\n\n  .min-h_skeleton\\.grid\\.height\\.xl {\n    min-height: var(--sizes-skeleton-grid-height-xl)\n}\n\n  .d_grid {\n    display: grid\n}\n\n  .grid-cols_5 {\n    grid-template-columns: repeat(5, minmax(0, 1fr))\n}\n\n  .gap_10px {\n    gap: 10px\n}\n\n  .min-w_skeleton\\.input\\.width {\n    min-width: var(--sizes-skeleton-input-width)\n}\n\n  .min-h_skeleton\\.input\\.height {\n    min-height: var(--sizes-skeleton-input-height)\n}\n\n  .min-h_skeleton\\.height {\n    min-height: var(--sizes-skeleton-height)\n}\n\n  .min-w_skeleton\\.textarea\\.width {\n    min-width: var(--sizes-skeleton-textarea-width)\n}\n\n  .min-h_skeleton\\.textarea\\.height {\n    min-height: var(--sizes-skeleton-textarea-height)\n}\n\n  .pos_right {\n    position: right\n}\n\n  .max-w_container\\.sm {\n    max-width: var(--sizes-container-sm)\n}\n\n  .gap_-25px {\n    gap: -25px\n}\n\n  .border-b_1px_solid_gray {\n    border-bottom: 1px solid gray\n}\n\n  .pb_3px {\n    padding-bottom: 3px\n}\n\n  .border-style_dotted {\n    border-style: dotted\n}\n\n  .my_-20px {\n    margin-block: -20px\n}\n\n  .font_lighter {\n    font-weight: lighter\n}\n\n  .font_semibold {\n    font-weight: var(--font-weights-semibold)\n}\n\n  .hover\\:text-decor_underline:is(:hover, [data-hover]) {\n    text-decoration: underline\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.dark\\.active\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-active)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.dark\\.active\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-active)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.dark\\.gray\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-gray)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.dark\\.gray\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-gray)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.dark\\.success\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-success)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.dark\\.success\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-success)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.dark\\.warning\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-warning)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.dark\\.warning\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-warning)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.dark\\.error\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-dark-error)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.dark\\.error\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-dark-error)\n}\n\n  .hover\\:border_token\\(colors\\.light\\.gray\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-gray)\n}\n\n  .hover\\:bg_token\\(colors\\.light\\.gray\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-gray)\n}\n\n  .hover\\:border_token\\(colors\\.light\\.active\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-active)\n}\n\n  .hover\\:bg_token\\(colors\\.light\\.active\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-active)\n}\n\n  .hover\\:border_token\\(colors\\.light\\.success\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-success)\n}\n\n  .hover\\:bg_token\\(colors\\.light\\.success\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-success)\n}\n\n  .hover\\:border_token\\(colors\\.light\\.warning\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-warning)\n}\n\n  .hover\\:bg_token\\(colors\\.light\\.warning\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-warning)\n}\n\n  .hover\\:border_token\\(colors\\.light\\.error\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-light-error)\n}\n\n  .hover\\:bg_token\\(colors\\.light\\.error\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-light-error)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.light\\.active\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-active)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.light\\.active\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-active)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.light\\.gray\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-gray)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.light\\.gray\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-gray)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.light\\.success\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-success)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.light\\.success\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-success)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.light\\.warning\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-warning)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.light\\.warning\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-warning)\n}\n\n  .hover\\:border_token\\(colors\\.hover\\.light\\.error\\):is(:hover, [data-hover]) {\n    border-color: var(--colors-hover-light-error)\n}\n\n  .hover\\:bg_token\\(colors\\.hover\\.light\\.error\\):is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-error)\n}\n\n  .hover\\:bg_light\\.success:is(:hover, [data-hover]) {\n    background-color: var(--colors-light-success)\n}\n\n  .hover\\:bg_light\\.active:is(:hover, [data-hover]) {\n    background-color: var(--colors-light-active)\n}\n\n  .hover\\:bg_light\\.error:is(:hover, [data-hover]) {\n    background-color: var(--colors-light-error)\n}\n\n  .hover\\:bg_transparent:is(:hover, [data-hover]) {\n    background-color: var(--colors-transparent)\n}\n\n  .hover\\:\\[\\&_\\+_label\\]\\:border-lw_0:is(:hover, [data-hover]) + label {\n    border-left-width: 0\n}\n\n  .hover\\:bg_hover\\.light\\.active:is(:hover, [data-hover]) {\n    background-color: var(--colors-hover-light-active)\n}\n\n  .hover\\:border_decoration\\.active:is(:hover, [data-hover]) {\n    border-color: var(--colors-decoration-active)\n}\n\n  .hover\\:cursor_pointer:is(:hover, [data-hover]) {\n    cursor: pointer\n}\n\n  .\\[\\&_\\+_label\\:hover\\]\\:border-lw_0 + label:hover {\n    border-left-width: 0\n}\n\n  @media screen and (min-width: 40em) {\n    .sm\\:d_block {\n      display: block\n    }\n}\n}";
 n$1(css$1,{});
 
+const refreshInterval$1 = 500;
+function createEventLoopDelaySampler() {
+  const [lastKnownTime, setLastKnownTime] = React__default.useState(performance.now());
+  const [delay, setDelay] = React__default.useState(0);
+  React__default.useEffect(() => {
+    const interval = setInterval(() => {
+      const now = performance.now();
+      const delay = now - lastKnownTime - refreshInterval$1;
+      setLastKnownTime(now);
+      setDelay(delay);
+    }, refreshInterval$1);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [lastKnownTime]);
+  return delay;
+}
+
 const PanelAnnotationButton = ({
   topic,
   onClick
@@ -162085,13 +162420,16 @@ const PanelToolbar = ({
   setDetections,
   disableAnnotations = false,
   targetFps,
-  triggerToast
+  triggerToast,
+  renderedFps,
+  renderDelay
 }) => {
+  const [metrics, setMetrics] = React__default.useState();
   const {
     detections
   } = useDetections();
   const connections = useConnections();
-  const [metrics, setMetrics] = React__default.useState();
+  const eventLoopDelay = createEventLoopDelaySampler();
   React__default.useEffect(() => {
     const interval = setInterval(() => {
       setMetrics(connections[0]?.getTopicMetrics(topic));
@@ -162115,12 +162453,12 @@ const PanelToolbar = ({
 
   // TODO: show only when debug mode is ON
   const name = React__default.useMemo(() => {
-    return `${topic} ${metrics?.inputFPS && metrics.inputFPS > 0 ? `- ${metrics.postDecodeFPS}/${metrics.inputFPS} FPS` : ""}`;
-  }, [topic, metrics]);
+    return topic;
+  }, [topic]);
   React__default.useEffect(() => {
-    if (targetFps && metrics?.inputFPS && targetFps > metrics.inputFPS) {
+    if (targetFps && metrics?.incomingMessagesFps && targetFps > metrics.incomingMessagesFps) {
       const timeout = setTimeout(() => {
-        if (targetFps * 0.8 > metrics.inputFPS) {
+        if (targetFps * 0.8 > metrics.incomingMessagesFps) {
           triggerToast?.();
         }
       }, 10_000);
@@ -162129,7 +162467,7 @@ const PanelToolbar = ({
       };
     }
     return;
-  }, [targetFps, metrics?.inputFPS]);
+  }, [targetFps, metrics?.incomingMessagesFps]);
   const makeDetection = React__default.useCallback((detection, {
     extra
   }) => (extra ? detection.extra && !detection.enabled : !detection.extra || detection.enabled) && /*#__PURE__*/React__default.createElement(PanelAnnotationButton, {
@@ -162147,11 +162485,30 @@ const PanelToolbar = ({
     style: {
       paddingLeft: 16
     }
-  }, /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: "Post-decode FPS / Receive FPS (maximum available)"
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    direction: "column",
+    gap: "xxs",
+    align: "start",
+    justify: "start",
+    paddingY: "xs"
   }, /*#__PURE__*/React__default.createElement(SubHeader, {
     text: name
-  })), !disableAnnotations && kind === 'image' && /*#__PURE__*/React__default.createElement(DropdownMenu, {
+  }), /*#__PURE__*/React__default.createElement(Flex, {
+    direction: "row",
+    gap: "sm",
+    align: "start",
+    justify: "start"
+  }, /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Network: ${metrics?.incomingMessagesFps ? `${metrics.incomingMessagesFps} FPS` : "-"}`
+  }), /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Decoding: ${metrics?.decodedMessagesFps ? `${metrics.decodedMessagesFps} FPS` : "-"}`
+  }), /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Rendering: ${renderedFps ? `${Math.round(renderedFps / 2)} FPS` : "-"}`
+  }), /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Camera: ${targetFps ? `${targetFps} FPS` : "-"}`
+  }), /*#__PURE__*/React__default.createElement(Label$3, {
+    text: `Frontend Delay: ${eventLoopDelay ? `${Math.ceil(eventLoopDelay)} ms` : "-"}`
+  }))), !disableAnnotations && kind === "image" && /*#__PURE__*/React__default.createElement(DropdownMenu, {
     onOpenChange: setAnnotationsOpened
   }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
     asChild: true,
@@ -162166,7 +162523,8 @@ const PanelToolbar = ({
     disabled: detections.length === 0,
     style: {
       borderRadius: 0,
-      borderTopRightRadius: 8
+      borderTopRightRadius: 8,
+      height: "100%"
     }
   })), /*#__PURE__*/React__default.createElement(DropdownMenuContent, null, detections.map(detection => makeDetection(detection, {
     extra: false
@@ -162184,7 +162542,7 @@ const PanelToolbar = ({
     }
   }, extraVisible ? "Less" : "More"), extraVisible && detections.map(detection => makeDetection(detection, {
     extra: true
-  })))), kind === 'pointCloud' && /*#__PURE__*/React__default.createElement(Tooltip, {
+  })))), kind === "pointCloud" && /*#__PURE__*/React__default.createElement(Tooltip, {
     content: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Label$3, {
       text: "To move camera:"
     }), /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, "w - Move camera forward"), /*#__PURE__*/React__default.createElement("li", null, "a - Move camera backward"), /*#__PURE__*/React__default.createElement("li", null, "s - Move camera to the left"), /*#__PURE__*/React__default.createElement("li", null, "d - Move camera to the right"), /*#__PURE__*/React__default.createElement("li", null, "Scroll \u2013 Zoom in and out"), /*#__PURE__*/React__default.createElement("li", null, "Drag \u2013 Move camera parallel to the ground"), /*#__PURE__*/React__default.createElement("li", null, `Right-click + Drag horizontally – Rotate the camera around the world's z-axis`), /*#__PURE__*/React__default.createElement("li", null, `Right-click + Drag vertically – Pan the camera around the world's x- and y- axes`)))
@@ -162224,6 +162582,8 @@ const Panel = ({
   annotationTopics = [],
   extraAnnotationTopics = [],
   targetFps,
+  renderedFps,
+  renderDelay,
   triggerToast
 }) => {
   const [detections, setDetections] = React__default.useState([]);
@@ -162252,6 +162612,8 @@ const Panel = ({
     setDetections: setDetections,
     disableAnnotations: disableAnnotations,
     targetFps: targetFps,
+    renderedFps: renderedFps,
+    renderDelay: renderDelay,
     triggerToast: triggerToast
   }), /*#__PURE__*/React__default.createElement(Suspense, {
     fallback: /*#__PURE__*/React__default.createElement(EmptyState, null, /*#__PURE__*/React__default.createElement("div", null, "Loading..."))
@@ -162260,9 +162622,32 @@ const Panel = ({
   }, children))))));
 };
 
-const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-B3T-sU1j.js'));
+const refreshInterval = 500;
+function createRenderDelaySampler() {
+  const [frameDelays, setFrameDelays] = React__default.useState([]);
+  const [averageFrameDelay, setAverageFrameDelay] = React__default.useState(0);
+  React__default.useEffect(() => {
+    const interval = setInterval(() => {
+      setAverageFrameDelay(frameDelays.reduce((a, b) => a + b, 0) / frameDelays.length);
+      setFrameDelays([]);
+    }, refreshInterval);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [frameDelays]);
+  const addFrameTime = frameTime => {
+    setFrameDelays(currentFrameDelays => [...currentFrameDelays, performance.now() - frameTime]);
+  };
+  return {
+    averageFrameDelay,
+    addFrameTime
+  };
+}
+
+const ImagePanelComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-BWakrawk.js'));
 const ImagePanelBody = ({
-  topic
+  topic,
+  frameRenderedEvent
 }) => {
   const {
     detections
@@ -162280,14 +162665,44 @@ const ImagePanelBody = ({
     }
   }), [detections, topic]);
   return /*#__PURE__*/React__default.createElement(ImagePanelComponent, {
-    overrideConfig: defaultConfig
+    overrideConfig: defaultConfig,
+    frameRenderedEvent: frameRenderedEvent
   });
 };
 const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
+  const renderedFpsMetricsManagerRef = React__default.useRef(null);
+  const [renderedFps, setRenderedFps] = React__default.useState(undefined);
+  const {
+    averageFrameDelay,
+    addFrameTime
+  } = createRenderDelaySampler();
+  React__default.useEffect(() => {
+    renderedFpsMetricsManagerRef.current = new MetricsManager();
+  }, []);
+  React__default.useEffect(() => {
+    const interval = setInterval(() => {
+      if (!renderedFpsMetricsManagerRef.current) {
+        console.warn('renderedFpsMetricsManagerRef is null');
+        return;
+      }
+      setRenderedFps(renderedFpsMetricsManagerRef.current.calculate('render'));
+    }, 500);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [renderedFpsMetricsManagerRef]);
+  const handleFrameRendered = React__default.useCallback(frameTime => {
+    renderedFpsMetricsManagerRef.current?.registerEvent('render');
+    addFrameTime(frameTime);
+  }, [addFrameTime]);
   return /*#__PURE__*/React__default.createElement(Panel, _extends$3({
     kind: "image"
-  }, props), /*#__PURE__*/React__default.createElement(ImagePanelBody, {
-    topic: props.topic
+  }, props, {
+    renderedFps: renderedFps,
+    renderDelay: averageFrameDelay
+  }), /*#__PURE__*/React__default.createElement(ImagePanelBody, {
+    topic: props.topic,
+    frameRenderedEvent: handleFrameRendered
   }));
 });
 
@@ -162295,7 +162710,7 @@ const ImagePanel = /*#__PURE__*/React__default.memo(function ImagePanel(props) {
 // License, v2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at http://mozilla.org/MPL/2.0/
 
-const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-DbFvmBsl.js'));
+const ThreeDeeRenderComponent = /*#__PURE__*/React__default.lazy(async () => await import('./index-CE0akFDh.js'));
 const PointCloudPanelBody = ({
   topic
 }) => {
@@ -162313,8 +162728,8 @@ const PointCloudPanelBody = ({
       distance: -2000,
       perspective: true,
       phi: 0,
-      target: [0, 0, 0],
-      targetOffset: [0, 0, 0],
+      target: [-2000, 0, 0],
+      targetOffset: [-500, -500, 0],
       targetOrientation: [0, 0, 0, 1],
       thetaOffset: 0,
       fovy: 45,