From 256ae249743aa638307ebffcf413868379244be5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Syn=C3=A1=C4=8Dek?= <ondrej@wundergraph.com>
Date: Tue, 21 Apr 2026 12:50:46 +0200
Subject: [PATCH] fix: formatting in playground

---
 playground/README.md                          |   6 +-
 playground/postcss.config.js                  |   2 +-
 playground/src/components/code-viewer.tsx     |  56 +-
 playground/src/components/empty-state.tsx     |  17 +-
 .../playground/monaco-dark-theme.ts           | 700 +++++++++---------
 .../components/playground/view-load-stats.tsx |  37 +-
 .../src/components/playground/view-output.tsx |  29 +-
 playground/src/components/ui/badge.tsx        |  37 +-
 playground/src/components/ui/button.tsx       |  70 +-
 playground/src/components/ui/card.tsx         | 120 +--
 playground/src/components/ui/cli.tsx          |  30 +-
 playground/src/components/ui/dialog.tsx       |  71 +-
 playground/src/components/ui/separator.tsx    |  33 +-
 playground/src/components/ui/tabs.tsx         |  34 +-
 playground/src/components/ui/tooltip.tsx      |  24 +-
 playground/src/lib/use-event-callback.ts      |  10 +-
 playground/src/lib/use-event-listener.ts      |  29 +-
 .../src/lib/use-isomorphic-layout-effect.ts   |   5 +-
 playground/src/lib/utils.ts                   |   8 +-
 19 files changed, 558 insertions(+), 760 deletions(-)

diff --git a/playground/README.md b/playground/README.md
index 141725c6f6..b387c90f29 100644
--- a/playground/README.md
+++ b/playground/README.md
@@ -16,7 +16,7 @@ import "@wundergraph/playground/style.css"
 
 export const YourComponent {
     return (
-        <Playground 
+        <Playground
             routingUrl={} // the endpoint of the router
             hideLogo={} // boolean to hide the wundergraph logo
             theme={} // 'light' or 'dark';
@@ -25,14 +25,14 @@ export const YourComponent {
 }
 ```
 
-
-
 # Development
+
 This is a version of the playground that is found in cosmo studio that can be built and bundled into the router.
 
 ```bash
 pnpm run build:router
 ```
+
 This will build a single html file and update the [graphiql.html](/router/internal/graphiql/graphiql.html) in the router.
 
 Note: To build it as a plugin just run `pnpm build`
diff --git a/playground/postcss.config.js b/playground/postcss.config.js
index 2e7af2b7f1..2aa7205d4b 100644
--- a/playground/postcss.config.js
+++ b/playground/postcss.config.js
@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/playground/src/components/code-viewer.tsx b/playground/src/components/code-viewer.tsx
index 65a35a1686..fdbc85a5e8 100644
--- a/playground/src/components/code-viewer.tsx
+++ b/playground/src/components/code-viewer.tsx
@@ -1,24 +1,24 @@
-import { cn } from "@/lib/utils";
-import babelPlugin from "prettier/plugins/babel";
-import estreePlugin from "prettier/plugins/estree";
-import graphQLPlugin from "prettier/plugins/graphql";
-import * as prettier from "prettier/standalone";
-import { Highlight, themes } from "prism-react-renderer";
-import * as Prism from "prismjs";
-import "prismjs/components/prism-graphql";
-import "prismjs/components/prism-json";
-import { useEffect, useState } from "react";
+import { cn } from '@/lib/utils';
+import babelPlugin from 'prettier/plugins/babel';
+import estreePlugin from 'prettier/plugins/estree';
+import graphQLPlugin from 'prettier/plugins/graphql';
+import * as prettier from 'prettier/standalone';
+import { Highlight, themes } from 'prism-react-renderer';
+import * as Prism from 'prismjs';
+import 'prismjs/components/prism-graphql';
+import 'prismjs/components/prism-json';
+import { useEffect, useState } from 'react';
 
 export const CodeViewer = ({
   code,
   className,
-  language = "graphql",
+  language = 'graphql',
 }: {
   code: string;
   className?: string;
-  language?: "graphql" | "json";
+  language?: 'graphql' | 'json';
 }) => {
-  const [content, setContent] = useState("");
+  const [content, setContent] = useState('');
 
   useEffect(() => {
     const set = async (source: string) => {
@@ -34,39 +34,27 @@ export const CodeViewer = ({
   }, [code, language]);
 
   return (
-    <Highlight
-      theme={themes.nightOwl}
-      code={content}
-      language={language}
-      prism={Prism}
-    >
+    <Highlight theme={themes.nightOwl} code={content} language={language} prism={Prism}>
       {({ style, tokens, getLineProps, getTokenProps }) => (
-        <pre
-          style={{ ...style, background: "", backgroundColor: "" }}
-          className={cn("py-4 text-xs", className)}
-        >
+        <pre style={{ ...style, background: '', backgroundColor: '' }} className={cn('py-4 text-xs', className)}>
           {tokens.map((line, i, allLines) => {
             const numberSectionWidth =
               allLines.length > 10
                 ? allLines.length > 100
                   ? allLines.length > 1000
-                    ? "w-18"
-                    : "w-16"
-                  : "w-12"
-                : "w-8";
+                    ? 'w-18'
+                    : 'w-16'
+                  : 'w-12'
+                : 'w-8';
 
             const lineNo = `L${i + 1}`;
 
             return (
-              <div
-                id={`id-${lineNo}`}
-                key={i.toString()}
-                {...getLineProps({ line })}
-              >
+              <div id={`id-${lineNo}`} key={i.toString()} {...getLineProps({ line })}>
                 <div
                   className={cn(
-                    "sticky left-0 mr-4 inline-block select-none border-r bg-background pr-2 text-right text-muted-foreground",
-                    numberSectionWidth
+                    'sticky left-0 mr-4 inline-block select-none border-r bg-background pr-2 text-right text-muted-foreground',
+                    numberSectionWidth,
                   )}
                 >
                   <span>{i + 1}</span>
diff --git a/playground/src/components/empty-state.tsx b/playground/src/components/empty-state.tsx
index f734ab1190..dde57ad868 100644
--- a/playground/src/components/empty-state.tsx
+++ b/playground/src/components/empty-state.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 export interface EmptyStateProps {
   icon?: React.ReactNode;
@@ -12,20 +12,11 @@ export const EmptyState: React.FC<EmptyStateProps> = (props) => {
   const { icon, title, description, actions, className } = props;
 
   return (
-    <div
-      className={cn(
-        "flex h-[520px] w-full items-center justify-center rounded-md",
-        className
-      )}
-    >
+    <div className={cn('flex h-[520px] w-full items-center justify-center rounded-md', className)}>
       <div className="mx-auto flex w-full flex-col items-center justify-center px-6 text-center md:max-w-2xl">
-        <span className="m-auto flex h-12 w-12 items-center justify-center text-6xl text-muted-foreground">
-          {icon}
-        </span>
+        <span className="m-auto flex h-12 w-12 items-center justify-center text-6xl text-muted-foreground">{icon}</span>
         <h3 className="mt-4 text-lg font-semibold">{title}</h3>
-        <p className="mb-4 mt-2 break-words text-sm text-muted-foreground">
-          {description}
-        </p>
+        <p className="mb-4 mt-2 break-words text-sm text-muted-foreground">{description}</p>
         <div className="mb-4 flex w-full justify-center">{actions}</div>
       </div>
     </div>
diff --git a/playground/src/components/playground/monaco-dark-theme.ts b/playground/src/components/playground/monaco-dark-theme.ts
index 6f9d270383..573482f43c 100644
--- a/playground/src/components/playground/monaco-dark-theme.ts
+++ b/playground/src/components/playground/monaco-dark-theme.ts
@@ -1,682 +1,680 @@
 export const schemaViewerDarkTheme: any = {
-  base: "vs-dark",
+  base: 'vs-dark',
   inherit: true,
   rules: [
     {
-      background: "011627",
-      token: "",
+      background: '011627',
+      token: '',
     },
     {
-      foreground: "637777",
-      token: "comment",
+      foreground: '637777',
+      token: 'comment',
     },
     {
-      foreground: "addb67",
-      token: "string",
+      foreground: 'addb67',
+      token: 'string',
     },
     {
-      foreground: "ecc48d",
-      token: "vstring.quoted",
+      foreground: 'ecc48d',
+      token: 'vstring.quoted',
     },
     {
-      foreground: "ecc48d",
-      token: "variable.other.readwrite.js",
+      foreground: 'ecc48d',
+      token: 'variable.other.readwrite.js',
     },
     {
-      foreground: "5ca7e4",
-      token: "string.regexp",
+      foreground: '5ca7e4',
+      token: 'string.regexp',
     },
     {
-      foreground: "5ca7e4",
-      token: "string.regexp keyword.other",
+      foreground: '5ca7e4',
+      token: 'string.regexp keyword.other',
     },
     {
-      foreground: "5f7e97",
-      token: "meta.function punctuation.separator.comma",
+      foreground: '5f7e97',
+      token: 'meta.function punctuation.separator.comma',
     },
     {
-      foreground: "f78c6c",
-      token: "constant.numeric",
+      foreground: 'f78c6c',
+      token: 'constant.numeric',
     },
     {
-      foreground: "f78c6c",
-      token: "constant.character.numeric",
+      foreground: 'f78c6c',
+      token: 'constant.character.numeric',
     },
     {
-      foreground: "addb67",
-      token: "variable",
+      foreground: 'addb67',
+      token: 'variable',
     },
     {
-      foreground: "c792ea",
-      token: "keyword",
+      foreground: 'c792ea',
+      token: 'keyword',
     },
     {
-      foreground: "c792ea",
-      token: "punctuation.accessor",
+      foreground: 'c792ea',
+      token: 'punctuation.accessor',
     },
     {
-      foreground: "c792ea",
-      token: "storage",
+      foreground: 'c792ea',
+      token: 'storage',
     },
     {
-      foreground: "c792ea",
-      token: "meta.var.expr",
+      foreground: 'c792ea',
+      token: 'meta.var.expr',
     },
     {
-      foreground: "c792ea",
-      token:
-        "meta.class meta.method.declaration meta.var.expr storage.type.jsm",
+      foreground: 'c792ea',
+      token: 'meta.class meta.method.declaration meta.var.expr storage.type.jsm',
     },
     {
-      foreground: "c792ea",
-      token: "storage.type.property.js",
+      foreground: 'c792ea',
+      token: 'storage.type.property.js',
     },
     {
-      foreground: "c792ea",
-      token: "storage.type.property.ts",
+      foreground: 'c792ea',
+      token: 'storage.type.property.ts',
     },
     {
-      foreground: "c792ea",
-      token: "storage.type.property.tsx",
+      foreground: 'c792ea',
+      token: 'storage.type.property.tsx',
     },
     {
-      foreground: "82aaff",
-      token: "storage.type",
+      foreground: '82aaff',
+      token: 'storage.type',
     },
     {
-      foreground: "ffcb8b",
-      token: "entity.name.class",
+      foreground: 'ffcb8b',
+      token: 'entity.name.class',
     },
     {
-      foreground: "ffcb8b",
-      token: "meta.class entity.name.type.class",
+      foreground: 'ffcb8b',
+      token: 'meta.class entity.name.type.class',
     },
     {
-      foreground: "addb67",
-      token: "entity.other.inherited-class",
+      foreground: 'addb67',
+      token: 'entity.other.inherited-class',
     },
     {
-      foreground: "82aaff",
-      token: "entity.name.function",
+      foreground: '82aaff',
+      token: 'entity.name.function',
     },
     {
-      foreground: "addb67",
-      token: "punctuation.definition.variable",
+      foreground: 'addb67',
+      token: 'punctuation.definition.variable',
     },
     {
-      foreground: "d3423e",
-      token: "punctuation.section.embedded",
+      foreground: 'd3423e',
+      token: 'punctuation.section.embedded',
     },
     {
-      foreground: "d6deeb",
-      token: "punctuation.terminator.expression",
+      foreground: 'd6deeb',
+      token: 'punctuation.terminator.expression',
     },
     {
-      foreground: "d6deeb",
-      token: "punctuation.definition.arguments",
+      foreground: 'd6deeb',
+      token: 'punctuation.definition.arguments',
     },
     {
-      foreground: "d6deeb",
-      token: "punctuation.definition.array",
+      foreground: 'd6deeb',
+      token: 'punctuation.definition.array',
     },
     {
-      foreground: "d6deeb",
-      token: "punctuation.section.array",
+      foreground: 'd6deeb',
+      token: 'punctuation.section.array',
     },
     {
-      foreground: "d6deeb",
-      token: "meta.array",
+      foreground: 'd6deeb',
+      token: 'meta.array',
     },
     {
-      foreground: "d9f5dd",
-      token: "punctuation.definition.list.begin",
+      foreground: 'd9f5dd',
+      token: 'punctuation.definition.list.begin',
     },
     {
-      foreground: "d9f5dd",
-      token: "punctuation.definition.list.end",
+      foreground: 'd9f5dd',
+      token: 'punctuation.definition.list.end',
     },
     {
-      foreground: "d9f5dd",
-      token: "punctuation.separator.arguments",
+      foreground: 'd9f5dd',
+      token: 'punctuation.separator.arguments',
     },
     {
-      foreground: "d9f5dd",
-      token: "punctuation.definition.list",
+      foreground: 'd9f5dd',
+      token: 'punctuation.definition.list',
     },
     {
-      foreground: "d3423e",
-      token: "string.template meta.template.expression",
+      foreground: 'd3423e',
+      token: 'string.template meta.template.expression',
     },
     {
-      foreground: "d6deeb",
-      token: "string.template punctuation.definition.string",
+      foreground: 'd6deeb',
+      token: 'string.template punctuation.definition.string',
     },
     {
-      foreground: "c792ea",
-      fontStyle: "italic",
-      token: "italic",
+      foreground: 'c792ea',
+      fontStyle: 'italic',
+      token: 'italic',
     },
     {
-      foreground: "addb67",
-      fontStyle: "bold",
-      token: "bold",
+      foreground: 'addb67',
+      fontStyle: 'bold',
+      token: 'bold',
     },
     {
-      foreground: "82aaff",
-      token: "constant.language",
+      foreground: '82aaff',
+      token: 'constant.language',
     },
     {
-      foreground: "82aaff",
-      token: "punctuation.definition.constant",
+      foreground: '82aaff',
+      token: 'punctuation.definition.constant',
     },
     {
-      foreground: "82aaff",
-      token: "variable.other.constant",
+      foreground: '82aaff',
+      token: 'variable.other.constant',
     },
     {
-      foreground: "7fdbca",
-      token: "support.function.construct",
+      foreground: '7fdbca',
+      token: 'support.function.construct',
     },
     {
-      foreground: "7fdbca",
-      token: "keyword.other.new",
+      foreground: '7fdbca',
+      token: 'keyword.other.new',
     },
     {
-      foreground: "82aaff",
-      token: "constant.character",
+      foreground: '82aaff',
+      token: 'constant.character',
     },
     {
-      foreground: "82aaff",
-      token: "constant.other",
+      foreground: '82aaff',
+      token: 'constant.other',
     },
     {
-      foreground: "f78c6c",
-      token: "constant.character.escape",
+      foreground: 'f78c6c',
+      token: 'constant.character.escape',
     },
     {
-      foreground: "addb67",
-      token: "entity.other.inherited-class",
+      foreground: 'addb67',
+      token: 'entity.other.inherited-class',
     },
     {
-      foreground: "d7dbe0",
-      token: "variable.parameter",
+      foreground: 'd7dbe0',
+      token: 'variable.parameter',
     },
     {
-      foreground: "7fdbca",
-      token: "entity.name.tag",
+      foreground: '7fdbca',
+      token: 'entity.name.tag',
     },
     {
-      foreground: "cc2996",
-      token: "punctuation.definition.tag.html",
+      foreground: 'cc2996',
+      token: 'punctuation.definition.tag.html',
     },
     {
-      foreground: "cc2996",
-      token: "punctuation.definition.tag.begin",
+      foreground: 'cc2996',
+      token: 'punctuation.definition.tag.begin',
     },
     {
-      foreground: "cc2996",
-      token: "punctuation.definition.tag.end",
+      foreground: 'cc2996',
+      token: 'punctuation.definition.tag.end',
     },
     {
-      foreground: "addb67",
-      token: "entity.other.attribute-name",
+      foreground: 'addb67',
+      token: 'entity.other.attribute-name',
     },
     {
-      foreground: "addb67",
-      token: "entity.name.tag.custom",
+      foreground: 'addb67',
+      token: 'entity.name.tag.custom',
     },
     {
-      foreground: "82aaff",
-      token: "support.function",
+      foreground: '82aaff',
+      token: 'support.function',
     },
     {
-      foreground: "82aaff",
-      token: "support.constant",
+      foreground: '82aaff',
+      token: 'support.constant',
     },
     {
-      foreground: "7fdbca",
-      token: "upport.constant.meta.property-value",
+      foreground: '7fdbca',
+      token: 'upport.constant.meta.property-value',
     },
     {
-      foreground: "addb67",
-      token: "support.type",
+      foreground: 'addb67',
+      token: 'support.type',
     },
     {
-      foreground: "addb67",
-      token: "support.class",
+      foreground: 'addb67',
+      token: 'support.class',
     },
     {
-      foreground: "addb67",
-      token: "support.variable.dom",
+      foreground: 'addb67',
+      token: 'support.variable.dom',
     },
     {
-      foreground: "7fdbca",
-      token: "support.constant",
+      foreground: '7fdbca',
+      token: 'support.constant',
     },
     {
-      foreground: "7fdbca",
-      token: "keyword.other.special-method",
+      foreground: '7fdbca',
+      token: 'keyword.other.special-method',
     },
     {
-      foreground: "7fdbca",
-      token: "keyword.other.new",
+      foreground: '7fdbca',
+      token: 'keyword.other.new',
     },
     {
-      foreground: "7fdbca",
-      token: "keyword.other.debugger",
+      foreground: '7fdbca',
+      token: 'keyword.other.debugger',
     },
     {
-      foreground: "7fdbca",
-      token: "keyword.control",
+      foreground: '7fdbca',
+      token: 'keyword.control',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.operator.comparison",
+      foreground: 'c792ea',
+      token: 'keyword.operator.comparison',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.flow.js",
+      foreground: 'c792ea',
+      token: 'keyword.control.flow.js',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.flow.ts",
+      foreground: 'c792ea',
+      token: 'keyword.control.flow.ts',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.flow.tsx",
+      foreground: 'c792ea',
+      token: 'keyword.control.flow.tsx',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.ruby",
+      foreground: 'c792ea',
+      token: 'keyword.control.ruby',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.module.ruby",
+      foreground: 'c792ea',
+      token: 'keyword.control.module.ruby',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.class.ruby",
+      foreground: 'c792ea',
+      token: 'keyword.control.class.ruby',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.def.ruby",
+      foreground: 'c792ea',
+      token: 'keyword.control.def.ruby',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.loop.js",
+      foreground: 'c792ea',
+      token: 'keyword.control.loop.js',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.loop.ts",
+      foreground: 'c792ea',
+      token: 'keyword.control.loop.ts',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.import.js",
+      foreground: 'c792ea',
+      token: 'keyword.control.import.js',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.import.ts",
+      foreground: 'c792ea',
+      token: 'keyword.control.import.ts',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.import.tsx",
+      foreground: 'c792ea',
+      token: 'keyword.control.import.tsx',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.from.js",
+      foreground: 'c792ea',
+      token: 'keyword.control.from.js',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.from.ts",
+      foreground: 'c792ea',
+      token: 'keyword.control.from.ts',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.control.from.tsx",
+      foreground: 'c792ea',
+      token: 'keyword.control.from.tsx',
     },
     {
-      foreground: "ffffff",
-      background: "ff2c83",
-      token: "invalid",
+      foreground: 'ffffff',
+      background: 'ff2c83',
+      token: 'invalid',
     },
     {
-      foreground: "ffffff",
-      background: "d3423e",
-      token: "invalid.deprecated",
+      foreground: 'ffffff',
+      background: 'd3423e',
+      token: 'invalid.deprecated',
     },
     {
-      foreground: "7fdbca",
-      token: "keyword.operator",
+      foreground: '7fdbca',
+      token: 'keyword.operator',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.operator.relational",
+      foreground: 'c792ea',
+      token: 'keyword.operator.relational',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.operator.assignement",
+      foreground: 'c792ea',
+      token: 'keyword.operator.assignement',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.operator.arithmetic",
+      foreground: 'c792ea',
+      token: 'keyword.operator.arithmetic',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.operator.bitwise",
+      foreground: 'c792ea',
+      token: 'keyword.operator.bitwise',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.operator.increment",
+      foreground: 'c792ea',
+      token: 'keyword.operator.increment',
     },
     {
-      foreground: "c792ea",
-      token: "keyword.operator.ternary",
+      foreground: 'c792ea',
+      token: 'keyword.operator.ternary',
     },
     {
-      foreground: "637777",
-      token: "comment.line.double-slash",
+      foreground: '637777',
+      token: 'comment.line.double-slash',
     },
     {
-      foreground: "cdebf7",
-      token: "object",
+      foreground: 'cdebf7',
+      token: 'object',
     },
     {
-      foreground: "ff5874",
-      token: "constant.language.null",
+      foreground: 'ff5874',
+      token: 'constant.language.null',
     },
     {
-      foreground: "d6deeb",
-      token: "meta.brace",
+      foreground: 'd6deeb',
+      token: 'meta.brace',
     },
     {
-      foreground: "c792ea",
-      token: "meta.delimiter.period",
+      foreground: 'c792ea',
+      token: 'meta.delimiter.period',
     },
     {
-      foreground: "d9f5dd",
-      token: "punctuation.definition.string",
+      foreground: 'd9f5dd',
+      token: 'punctuation.definition.string',
     },
     {
-      foreground: "ff5874",
-      token: "constant.language.boolean",
+      foreground: 'ff5874',
+      token: 'constant.language.boolean',
     },
     {
-      foreground: "ffffff",
-      token: "object.comma",
+      foreground: 'ffffff',
+      token: 'object.comma',
     },
     {
-      foreground: "7fdbca",
-      token: "variable.parameter.function",
+      foreground: '7fdbca',
+      token: 'variable.parameter.function',
     },
     {
-      foreground: "80cbc4",
-      token: "support.type.vendor.property-name",
+      foreground: '80cbc4',
+      token: 'support.type.vendor.property-name',
     },
     {
-      foreground: "80cbc4",
-      token: "support.constant.vendor.property-value",
+      foreground: '80cbc4',
+      token: 'support.constant.vendor.property-value',
     },
     {
-      foreground: "80cbc4",
-      token: "support.type.property-name",
+      foreground: '80cbc4',
+      token: 'support.type.property-name',
     },
     {
-      foreground: "80cbc4",
-      token: "meta.property-list entity.name.tag",
+      foreground: '80cbc4',
+      token: 'meta.property-list entity.name.tag',
     },
     {
-      foreground: "57eaf1",
-      token: "meta.property-list entity.name.tag.reference",
+      foreground: '57eaf1',
+      token: 'meta.property-list entity.name.tag.reference',
     },
     {
-      foreground: "f78c6c",
-      token: "constant.other.color.rgb-value punctuation.definition.constant",
+      foreground: 'f78c6c',
+      token: 'constant.other.color.rgb-value punctuation.definition.constant',
     },
     {
-      foreground: "ffeb95",
-      token: "constant.other.color",
+      foreground: 'ffeb95',
+      token: 'constant.other.color',
     },
     {
-      foreground: "ffeb95",
-      token: "keyword.other.unit",
+      foreground: 'ffeb95',
+      token: 'keyword.other.unit',
     },
     {
-      foreground: "c792ea",
-      token: "meta.selector",
+      foreground: 'c792ea',
+      token: 'meta.selector',
     },
     {
-      foreground: "fad430",
-      token: "entity.other.attribute-name.id",
+      foreground: 'fad430',
+      token: 'entity.other.attribute-name.id',
     },
     {
-      foreground: "80cbc4",
-      token: "meta.property-name",
+      foreground: '80cbc4',
+      token: 'meta.property-name',
     },
     {
-      foreground: "c792ea",
-      token: "entity.name.tag.doctype",
+      foreground: 'c792ea',
+      token: 'entity.name.tag.doctype',
     },
     {
-      foreground: "c792ea",
-      token: "meta.tag.sgml.doctype",
+      foreground: 'c792ea',
+      token: 'meta.tag.sgml.doctype',
     },
     {
-      foreground: "d9f5dd",
-      token: "punctuation.definition.parameters",
+      foreground: 'd9f5dd',
+      token: 'punctuation.definition.parameters',
     },
     {
-      foreground: "ecc48d",
-      token: "string.quoted",
+      foreground: 'ecc48d',
+      token: 'string.quoted',
     },
     {
-      foreground: "ecc48d",
-      token: "string.quoted.double",
+      foreground: 'ecc48d',
+      token: 'string.quoted.double',
     },
     {
-      foreground: "ecc48d",
-      token: "string.quoted.single",
+      foreground: 'ecc48d',
+      token: 'string.quoted.single',
     },
     {
-      foreground: "addb67",
-      token: "support.constant.math",
+      foreground: 'addb67',
+      token: 'support.constant.math',
     },
     {
-      foreground: "addb67",
-      token: "support.type.property-name.json",
+      foreground: 'addb67',
+      token: 'support.type.property-name.json',
     },
     {
-      foreground: "addb67",
-      token: "support.constant.json",
+      foreground: 'addb67',
+      token: 'support.constant.json',
     },
     {
-      foreground: "c789d6",
-      token: "meta.structure.dictionary.value.json string.quoted.double",
+      foreground: 'c789d6',
+      token: 'meta.structure.dictionary.value.json string.quoted.double',
     },
     {
-      foreground: "80cbc4",
-      token: "string.quoted.double.json punctuation.definition.string.json",
+      foreground: '80cbc4',
+      token: 'string.quoted.double.json punctuation.definition.string.json',
     },
     {
-      foreground: "ff5874",
-      token:
-        "meta.structure.dictionary.json meta.structure.dictionary.value constant.language",
+      foreground: 'ff5874',
+      token: 'meta.structure.dictionary.json meta.structure.dictionary.value constant.language',
     },
     {
-      foreground: "d6deeb",
-      token: "variable.other.ruby",
+      foreground: 'd6deeb',
+      token: 'variable.other.ruby',
     },
     {
-      foreground: "ecc48d",
-      token: "entity.name.type.class.ruby",
+      foreground: 'ecc48d',
+      token: 'entity.name.type.class.ruby',
     },
     {
-      foreground: "ecc48d",
-      token: "keyword.control.class.ruby",
+      foreground: 'ecc48d',
+      token: 'keyword.control.class.ruby',
     },
     {
-      foreground: "ecc48d",
-      token: "meta.class.ruby",
+      foreground: 'ecc48d',
+      token: 'meta.class.ruby',
     },
     {
-      foreground: "7fdbca",
-      token: "constant.language.symbol.hashkey.ruby",
+      foreground: '7fdbca',
+      token: 'constant.language.symbol.hashkey.ruby',
     },
     {
-      foreground: "e0eddd",
-      background: "a57706",
-      fontStyle: "italic",
-      token: "meta.diff",
+      foreground: 'e0eddd',
+      background: 'a57706',
+      fontStyle: 'italic',
+      token: 'meta.diff',
     },
     {
-      foreground: "e0eddd",
-      background: "a57706",
-      fontStyle: "italic",
-      token: "meta.diff.header",
+      foreground: 'e0eddd',
+      background: 'a57706',
+      fontStyle: 'italic',
+      token: 'meta.diff.header',
     },
     {
-      foreground: "ef535090",
-      fontStyle: "italic",
-      token: "markup.deleted",
+      foreground: 'ef535090',
+      fontStyle: 'italic',
+      token: 'markup.deleted',
     },
     {
-      foreground: "a2bffc",
-      fontStyle: "italic",
-      token: "markup.changed",
+      foreground: 'a2bffc',
+      fontStyle: 'italic',
+      token: 'markup.changed',
     },
     {
-      foreground: "a2bffc",
-      fontStyle: "italic",
-      token: "meta.diff.header.git",
+      foreground: 'a2bffc',
+      fontStyle: 'italic',
+      token: 'meta.diff.header.git',
     },
     {
-      foreground: "a2bffc",
-      fontStyle: "italic",
-      token: "meta.diff.header.from-file",
+      foreground: 'a2bffc',
+      fontStyle: 'italic',
+      token: 'meta.diff.header.from-file',
     },
     {
-      foreground: "a2bffc",
-      fontStyle: "italic",
-      token: "meta.diff.header.to-file",
+      foreground: 'a2bffc',
+      fontStyle: 'italic',
+      token: 'meta.diff.header.to-file',
     },
     {
-      foreground: "219186",
-      background: "eae3ca",
-      token: "markup.inserted",
+      foreground: '219186',
+      background: 'eae3ca',
+      token: 'markup.inserted',
     },
     {
-      foreground: "d3201f",
-      token: "other.package.exclude",
+      foreground: 'd3201f',
+      token: 'other.package.exclude',
     },
     {
-      foreground: "d3201f",
-      token: "other.remove",
+      foreground: 'd3201f',
+      token: 'other.remove',
     },
     {
-      foreground: "269186",
-      token: "other.add",
+      foreground: '269186',
+      token: 'other.add',
     },
     {
-      foreground: "ff5874",
-      token: "constant.language.python",
+      foreground: 'ff5874',
+      token: 'constant.language.python',
     },
     {
-      foreground: "82aaff",
-      token: "variable.parameter.function.python",
+      foreground: '82aaff',
+      token: 'variable.parameter.function.python',
     },
     {
-      foreground: "82aaff",
-      token: "meta.function-call.arguments.python",
+      foreground: '82aaff',
+      token: 'meta.function-call.arguments.python',
     },
     {
-      foreground: "b2ccd6",
-      token: "meta.function-call.python",
+      foreground: 'b2ccd6',
+      token: 'meta.function-call.python',
     },
     {
-      foreground: "b2ccd6",
-      token: "meta.function-call.generic.python",
+      foreground: 'b2ccd6',
+      token: 'meta.function-call.generic.python',
     },
     {
-      foreground: "d6deeb",
-      token: "punctuation.python",
+      foreground: 'd6deeb',
+      token: 'punctuation.python',
     },
     {
-      foreground: "addb67",
-      token: "entity.name.function.decorator.python",
+      foreground: 'addb67',
+      token: 'entity.name.function.decorator.python',
     },
     {
-      foreground: "8eace3",
-      token: "source.python variable.language.special",
+      foreground: '8eace3',
+      token: 'source.python variable.language.special',
     },
     {
-      foreground: "82b1ff",
-      token: "markup.heading.markdown",
+      foreground: '82b1ff',
+      token: 'markup.heading.markdown',
     },
     {
-      foreground: "c792ea",
-      fontStyle: "italic",
-      token: "markup.italic.markdown",
+      foreground: 'c792ea',
+      fontStyle: 'italic',
+      token: 'markup.italic.markdown',
     },
     {
-      foreground: "addb67",
-      fontStyle: "bold",
-      token: "markup.bold.markdown",
+      foreground: 'addb67',
+      fontStyle: 'bold',
+      token: 'markup.bold.markdown',
     },
     {
-      foreground: "697098",
-      token: "markup.quote.markdown",
+      foreground: '697098',
+      token: 'markup.quote.markdown',
     },
     {
-      foreground: "80cbc4",
-      token: "markup.inline.raw.markdown",
+      foreground: '80cbc4',
+      token: 'markup.inline.raw.markdown',
     },
     {
-      foreground: "ff869a",
-      token: "markup.underline.link.markdown",
+      foreground: 'ff869a',
+      token: 'markup.underline.link.markdown',
     },
     {
-      foreground: "ff869a",
-      token: "markup.underline.link.image.markdown",
+      foreground: 'ff869a',
+      token: 'markup.underline.link.image.markdown',
     },
     {
-      foreground: "d6deeb",
-      token: "string.other.link.title.markdown",
+      foreground: 'd6deeb',
+      token: 'string.other.link.title.markdown',
     },
     {
-      foreground: "d6deeb",
-      token: "string.other.link.description.markdown",
+      foreground: 'd6deeb',
+      token: 'string.other.link.description.markdown',
     },
     {
-      foreground: "82b1ff",
-      token: "punctuation.definition.string.markdown",
+      foreground: '82b1ff',
+      token: 'punctuation.definition.string.markdown',
     },
     {
-      foreground: "82b1ff",
-      token: "punctuation.definition.string.begin.markdown",
+      foreground: '82b1ff',
+      token: 'punctuation.definition.string.begin.markdown',
     },
     {
-      foreground: "82b1ff",
-      token: "punctuation.definition.string.end.markdown",
+      foreground: '82b1ff',
+      token: 'punctuation.definition.string.end.markdown',
     },
     {
-      foreground: "82b1ff",
-      token: "meta.link.inline.markdown punctuation.definition.string",
+      foreground: '82b1ff',
+      token: 'meta.link.inline.markdown punctuation.definition.string',
     },
     {
-      foreground: "7fdbca",
-      token: "punctuation.definition.metadata.markdown",
+      foreground: '7fdbca',
+      token: 'punctuation.definition.metadata.markdown',
     },
     {
-      foreground: "82b1ff",
-      token: "beginning.punctuation.definition.list.markdown",
+      foreground: '82b1ff',
+      token: 'beginning.punctuation.definition.list.markdown',
     },
   ],
   colors: {
-    "editor.foreground": "#d6deeb",
-    "editor.background": "#0b0510",
-    "editor.selectionBackground": "#5f7e9779",
-    "editor.lineHighlightBackground": "#010E17",
-    "editorCursor.foreground": "#80a4c2",
-    "editorWhitespace.foreground": "#2e2040",
-    "editorIndentGuide.background": "#5e81ce52",
-    "editor.selectionHighlightBorder": "#122d42",
+    'editor.foreground': '#d6deeb',
+    'editor.background': '#0b0510',
+    'editor.selectionBackground': '#5f7e9779',
+    'editor.lineHighlightBackground': '#010E17',
+    'editorCursor.foreground': '#80a4c2',
+    'editorWhitespace.foreground': '#2e2040',
+    'editorIndentGuide.background': '#5e81ce52',
+    'editor.selectionHighlightBorder': '#122d42',
   },
 };
diff --git a/playground/src/components/playground/view-load-stats.tsx b/playground/src/components/playground/view-load-stats.tsx
index a267587622..ad55410b31 100644
--- a/playground/src/components/playground/view-load-stats.tsx
+++ b/playground/src/components/playground/view-load-stats.tsx
@@ -1,34 +1,19 @@
-import { cn } from "@/lib/utils";
-import { capitalCase, sentenceCase } from "change-case";
-import { Button } from "../ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
-import { LoadStats } from "./types";
+import { cn } from '@/lib/utils';
+import { capitalCase, sentenceCase } from 'change-case';
+import { Button } from '../ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
+import { LoadStats } from './types';
 
-export const ViewLoadStats = ({
-  loadStats,
-  asChild,
-}: {
-  loadStats: LoadStats;
-  asChild?: boolean;
-}) => {
+export const ViewLoadStats = ({ loadStats, asChild }: { loadStats: LoadStats; asChild?: boolean }) => {
   return (
     <Dialog>
-      <DialogTrigger
-        asChild={asChild}
-        className={cn(!asChild && "text-primary")}
-      >
+      <DialogTrigger asChild={asChild} className={cn(!asChild && 'text-primary')}>
         {asChild ? (
           <Button variant="secondary" size="sm" className="flex-1">
             <span className="flex-shrink-0">View Load Stats</span>
           </Button>
         ) : (
-          "View Load Stats"
+          'View Load Stats'
         )}
       </DialogTrigger>
       <DialogContent className="max-w-2xl">
@@ -39,10 +24,8 @@ export const ViewLoadStats = ({
           {loadStats.map((l) => {
             return (
               <div key={l.name} className="text-sm text-muted-foreground">
-                <h2 className="mb-1 text-base text-foreground">
-                  {capitalCase(l.name)}
-                </h2>
-                <p>Duration since start: {l.durationSinceStart || "0ms"}</p>
+                <h2 className="mb-1 text-base text-foreground">{capitalCase(l.name)}</h2>
+                <p>Duration since start: {l.durationSinceStart || '0ms'}</p>
                 {Object.entries(l.attributes)
                   .filter((e) => e[1])
                   .map(([key, val]) => {
diff --git a/playground/src/components/playground/view-output.tsx b/playground/src/components/playground/view-output.tsx
index 35efa8a5bb..a0257796f1 100644
--- a/playground/src/components/playground/view-output.tsx
+++ b/playground/src/components/playground/view-output.tsx
@@ -1,33 +1,18 @@
-import { cn } from "@/lib/utils";
-import { CodeViewer } from "../code-viewer";
-import { Button } from "../ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../ui/dialog";
+import { cn } from '@/lib/utils';
+import { CodeViewer } from '../code-viewer';
+import { Button } from '../ui/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog';
 
-export const ViewOutput = ({
-  output,
-  asChild,
-}: {
-  output: any;
-  asChild?: boolean;
-}) => {
+export const ViewOutput = ({ output, asChild }: { output: any; asChild?: boolean }) => {
   return (
     <Dialog>
-      <DialogTrigger
-        asChild={asChild}
-        className={cn(!asChild && "text-primary")}
-      >
+      <DialogTrigger asChild={asChild} className={cn(!asChild && 'text-primary')}>
         {asChild ? (
           <Button variant="secondary" size="sm" className="flex-1">
             <span className="flex-shrink-0">View Output</span>
           </Button>
         ) : (
-          "View Output"
+          'View Output'
         )}
       </DialogTrigger>
       <DialogContent className="max-w-2xl">
diff --git a/playground/src/components/ui/badge.tsx b/playground/src/components/ui/badge.tsx
index 9a16e52f6e..fc8c5f9d14 100644
--- a/playground/src/components/ui/badge.tsx
+++ b/playground/src/components/ui/badge.tsx
@@ -1,41 +1,32 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        success:
-          "border-transparent bg-success text-success-foreground hover:bg-success/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        muted:
-          "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
-        outline: "text-foreground",
-        plain: "",
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        success: 'border-transparent bg-success text-success-foreground hover:bg-success/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        muted: 'border-transparent bg-muted text-muted-foreground hover:bg-muted/80',
+        outline: 'text-foreground',
+        plain: '',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
   },
 );
 
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };
diff --git a/playground/src/components/ui/button.tsx b/playground/src/components/ui/button.tsx
index 8f74e379f8..6e97081bbb 100644
--- a/playground/src/components/ui/button.tsx
+++ b/playground/src/components/ui/button.tsx
@@ -1,37 +1,32 @@
-import { cn } from "@/lib/utils";
-import { UpdateIcon } from "@radix-ui/react-icons";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
+import { cn } from '@/lib/utils';
+import { UpdateIcon } from '@radix-ui/react-icons';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent/80 hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 border border-input",
-        ghost:
-          "hover:bg-accent/80 hover:text-accent-foreground data-active:bg-accent/80",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-transparent shadow-sm hover:bg-accent/80 hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 border border-input',
+        ghost: 'hover:bg-accent/80 hover:text-accent-foreground data-active:bg-accent/80',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-sm",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-        "icon-sm": "h-8 w-8",
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-sm',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+        'icon-sm': 'h-8 w-8',
       },
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
+      variant: 'default',
+      size: 'default',
     },
   },
 );
@@ -44,35 +39,20 @@ export interface ButtonProps
 }
 
 const Loader = () => {
-  return <UpdateIcon className={cn("animate-spin")} />;
+  return <UpdateIcon className={cn('animate-spin')} />;
 };
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      asChild = false,
-      isLoading,
-      children,
-      type: typeProp,
-      ...props
-    },
-    ref,
-  ) => {
-    const Comp = asChild ? Slot : "button";
+  ({ className, variant, size, asChild = false, isLoading, children, type: typeProp, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
 
-    const type = typeProp ?? (!asChild ? "button" : undefined);
+    const type = typeProp ?? (!asChild ? 'button' : undefined);
 
     const isDisabled = props.disabled ?? isLoading;
 
     return (
       <Comp
-        className={cn(
-          isDisabled ? "cursor-not-allowed" : "",
-          buttonVariants({ variant, size, className }),
-        )}
+        className={cn(isDisabled ? 'cursor-not-allowed' : '', buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
         type={type}
@@ -83,6 +63,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
-Button.displayName = "Button";
+Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/playground/src/components/ui/card.tsx b/playground/src/components/ui/card.tsx
index b06e0f36da..2d2e4b4c17 100644
--- a/playground/src/components/ui/card.tsx
+++ b/playground/src/components/ui/card.tsx
@@ -1,83 +1,43 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)} {...props} />
 ));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(" flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
-CardFooter.displayName = "CardFooter";
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-};
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props} />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn(' flex items-center p-6 pt-0', className)} {...props} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/playground/src/components/ui/cli.tsx b/playground/src/components/ui/cli.tsx
index a465c537eb..2a223317c6 100644
--- a/playground/src/components/ui/cli.tsx
+++ b/playground/src/components/ui/cli.tsx
@@ -1,8 +1,8 @@
-import { cn } from "@/lib/utils";
-import { CheckIcon, CopyIcon } from "@radix-ui/react-icons";
-import copy from "copy-to-clipboard";
-import { useEffect, useState } from "react";
-import { Button } from "./button";
+import { cn } from '@/lib/utils';
+import { CheckIcon, CopyIcon } from '@radix-ui/react-icons';
+import copy from 'copy-to-clipboard';
+import { useEffect, useState } from 'react';
+import { Button } from './button';
 
 interface CLIStep {
   description: string;
@@ -30,21 +30,12 @@ export const CLI = ({
 
   return (
     <Button
-      className={cn(
-        "w-full max-w-xl justify-between text-muted-foreground md:w-auto",
-        className
-      )}
+      className={cn('w-full max-w-xl justify-between text-muted-foreground md:w-auto', className)}
       variant="outline"
       onClick={() => setCopied(true)}
     >
-      <span className={cn("mr-2 truncate font-mono text-xs", spanClassName)}>
-        {command}
-      </span>
-      {copied ? (
-        <CheckIcon className="h-4 w-4 flex-shrink-0" />
-      ) : (
-        <CopyIcon className="h-4 w-4 flex-shrink-0" />
-      )}
+      <span className={cn('mr-2 truncate font-mono text-xs', spanClassName)}>{command}</span>
+      {copied ? <CheckIcon className="h-4 w-4 flex-shrink-0" /> : <CopyIcon className="h-4 w-4 flex-shrink-0" />}
     </Button>
   );
 };
@@ -58,10 +49,7 @@ export const CLISteps = ({ steps }: { steps: CLIStep[] }) => {
             <p>
               {steps.length > 1 && `${index + 1}.`} {step.description}
             </p>
-            <CLI
-              command={step.command}
-              className="w-full max-w-full md:w-full"
-            />
+            <CLI command={step.command} className="w-full max-w-full md:w-full" />
           </div>
         );
       })}
diff --git a/playground/src/components/ui/dialog.tsx b/playground/src/components/ui/dialog.tsx
index 73a35c1b5f..c71a33d091 100644
--- a/playground/src/components/ui/dialog.tsx
+++ b/playground/src/components/ui/dialog.tsx
@@ -1,16 +1,14 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal {...props} />
-);
+const DialogPortal = ({ ...props }: DialogPrimitive.DialogPortalProps) => <DialogPrimitive.Portal {...props} />;
 DialogPortal.displayName = DialogPrimitive.Portal.displayName;
 
 const DialogOverlay = React.forwardRef<
@@ -20,8 +18,8 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
     )}
     {...props}
   />
@@ -37,8 +35,8 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
-        className
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+        className,
       )}
       {...props}
     >
@@ -52,33 +50,15 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
 );
-DialogHeader.displayName = "DialogHeader";
+DialogHeader.displayName = 'DialogHeader';
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
 );
-DialogFooter.displayName = "DialogFooter";
+DialogFooter.displayName = 'DialogFooter';
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -86,10 +66,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
     {...props}
   />
 ));
@@ -99,20 +76,8 @@ const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
+  <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
-export {
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-};
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription };
diff --git a/playground/src/components/ui/separator.tsx b/playground/src/components/ui/separator.tsx
index 11b8741882..1189bf0657 100644
--- a/playground/src/components/ui/separator.tsx
+++ b/playground/src/components/ui/separator.tsx
@@ -1,29 +1,20 @@
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-);
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className)}
+    {...props}
+  />
+));
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 export { Separator };
diff --git a/playground/src/components/ui/tabs.tsx b/playground/src/components/ui/tabs.tsx
index 85d83beab3..2b3b3b5bff 100644
--- a/playground/src/components/ui/tabs.tsx
+++ b/playground/src/components/ui/tabs.tsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -12,13 +12,13 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
+      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      className,
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -27,13 +27,13 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      className,
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -42,12 +42,12 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/playground/src/components/ui/tooltip.tsx b/playground/src/components/ui/tooltip.tsx
index 32614cb957..f727724c62 100644
--- a/playground/src/components/ui/tooltip.tsx
+++ b/playground/src/components/ui/tooltip.tsx
@@ -1,7 +1,7 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
 const TooltipProvider = TooltipPrimitive.Provider;
 
@@ -17,8 +17,8 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "bg-tooltip text-tooltip-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      'bg-tooltip text-tooltip-foreground z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
     )}
     {...props}
   />
@@ -29,18 +29,8 @@ const TooltipArrow = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Arrow>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
 >(({ className, ...props }, ref) => (
-  <TooltipPrimitive.Arrow
-    ref={ref}
-    className={cn("fill-tooltip", className)}
-    {...props}
-  />
+  <TooltipPrimitive.Arrow ref={ref} className={cn('fill-tooltip', className)} {...props} />
 ));
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
 
-export {
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-  TooltipArrow,
-};
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, TooltipArrow };
diff --git a/playground/src/lib/use-event-callback.ts b/playground/src/lib/use-event-callback.ts
index 1a08315ec1..28d01f95af 100644
--- a/playground/src/lib/use-event-callback.ts
+++ b/playground/src/lib/use-event-callback.ts
@@ -1,12 +1,10 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useRef } from 'react';
 
-import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 
-export function useEventCallback<Args extends unknown[], R>(
-  fn: (...args: Args) => R
-) {
+export function useEventCallback<Args extends unknown[], R>(fn: (...args: Args) => R) {
   const ref = useRef<typeof fn>(() => {
-    throw new Error("Cannot call an event handler while rendering.");
+    throw new Error('Cannot call an event handler while rendering.');
   });
 
   useIsomorphicLayoutEffect(() => {
diff --git a/playground/src/lib/use-event-listener.ts b/playground/src/lib/use-event-listener.ts
index 97724eec8c..a46566a39c 100644
--- a/playground/src/lib/use-event-listener.ts
+++ b/playground/src/lib/use-event-listener.ts
@@ -1,13 +1,13 @@
-import { RefObject, useEffect, useRef } from "react";
+import { RefObject, useEffect, useRef } from 'react';
 
-import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect";
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
 
 // MediaQueryList Event based useEventListener interface
 function useEventListener<K extends keyof MediaQueryListEventMap>(
   eventName: K,
   handler: (event: MediaQueryListEventMap[K]) => void,
   element: RefObject<MediaQueryList>,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ): void;
 
 // Window Event based useEventListener interface
@@ -15,18 +15,15 @@ function useEventListener<K extends keyof WindowEventMap>(
   eventName: K,
   handler: (event: WindowEventMap[K]) => void,
   element?: undefined,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ): void;
 
 // Element Event based useEventListener interface
-function useEventListener<
-  K extends keyof HTMLElementEventMap,
-  T extends HTMLElement = HTMLDivElement
->(
+function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLDivElement>(
   eventName: K,
   handler: (event: HTMLElementEventMap[K]) => void,
   element: RefObject<T>,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ): void;
 
 // Document Event based useEventListener interface
@@ -34,25 +31,19 @@ function useEventListener<K extends keyof DocumentEventMap>(
   eventName: K,
   handler: (event: DocumentEventMap[K]) => void,
   element: RefObject<Document>,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ): void;
 
 function useEventListener<
   KW extends keyof WindowEventMap,
   KH extends keyof HTMLElementEventMap,
   KM extends keyof MediaQueryListEventMap,
-  T extends HTMLElement | MediaQueryList | void = void
+  T extends HTMLElement | MediaQueryList | void = void,
 >(
   eventName: KW | KH | KM,
-  handler: (
-    event:
-      | WindowEventMap[KW]
-      | HTMLElementEventMap[KH]
-      | MediaQueryListEventMap[KM]
-      | Event
-  ) => void,
+  handler: (event: WindowEventMap[KW] | HTMLElementEventMap[KH] | MediaQueryListEventMap[KM] | Event) => void,
   element?: RefObject<T>,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ) {
   // Create a ref that stores handler
   const savedHandler = useRef(handler);
diff --git a/playground/src/lib/use-isomorphic-layout-effect.ts b/playground/src/lib/use-isomorphic-layout-effect.ts
index ea6a0bc016..e90b054c9f 100644
--- a/playground/src/lib/use-isomorphic-layout-effect.ts
+++ b/playground/src/lib/use-isomorphic-layout-effect.ts
@@ -1,4 +1,3 @@
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect } from 'react';
 
-export const useIsomorphicLayoutEffect =
-  typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
diff --git a/playground/src/lib/utils.ts b/playground/src/lib/utils.ts
index 9c421266b3..44c5243125 100644
--- a/playground/src/lib/utils.ts
+++ b/playground/src/lib/utils.ts
@@ -1,5 +1,5 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -10,12 +10,12 @@ const bigintE6 = BigInt(1e6);
 
 export const nsToTime = (ns: bigint) => {
   let seconds = Number(ns / BigInt(1e9)).toFixed(2);
-  if (Number(seconds) > 1) return seconds + " s";
+  if (Number(seconds) > 1) return seconds + ' s';
 
   // Work with smaller units (picoseconds) to circumvent bigint division
   const ps = ns * bigintE3;
   const microseconds = Number(ps / bigintE6);
   const milliseconds = microseconds / 1e3;
 
-  return milliseconds.toFixed(2) + " ms";
+  return milliseconds.toFixed(2) + ' ms';
 };