@codespark/react 1.0.0

package/dist/index.js

@@ -0,0 +1,1753 @@
+import { registerFramework, registry } from "@codespark/framework";
+import { react } from "@codespark/framework/react";
+import { Braces, Check, ChevronRight, Copy, FileIcon, Folder, Maximize, RefreshCw, RemoveFormatting } from "lucide-react";
+import * as React from "react";
+import { Children, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { debounce } from "lodash-es";
+import { LoaderType } from "@codespark/framework/loaders";
+import { isElement, isFragment } from "react-is";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { Collapsible, Slot, Tabs, Tooltip } from "radix-ui";
+import { javascript } from "@codemirror/lang-javascript";
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { languages } from "@codemirror/language-data";
+import ReactCodeMirror, { EditorView, Transaction } from "@uiw/react-codemirror";
+import * as tailwindcss from "tailwindcss";
+
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+function constructESMUrl(config) {
+	const { pkg, version, deps, external, exports, standalone, bundle } = config;
+	const params = new URLSearchParams();
+	if (deps?.length) params.set("deps", deps.join(","));
+	if (external?.length) params.set("external", external.join(","));
+	if (exports?.length) params.set("exports", exports.join(","));
+	if (standalone) params.set("standalone", "");
+	if (bundle) params.set("bundle", "");
+	const isUrl = pkg.startsWith("http://") || pkg.startsWith("https://");
+	let base;
+	if (isUrl) base = pkg;
+	else {
+		const slashIndex = pkg.indexOf("/");
+		const pkgName = slashIndex > -1 ? pkg.slice(0, slashIndex) : pkg;
+		const subpath = slashIndex > -1 ? pkg.slice(slashIndex) : "";
+		base = version ? `https://esm.sh/${pkgName}@${version}${subpath}` : `https://esm.sh/${pkg}`;
+	}
+	const query = params.toString();
+	return query ? `${base}?${query}` : base;
+}
+function useCopyToClipboard(timeout = 2e3) {
+	const [isCopied, setIsCopied] = useState(false);
+	return {
+		copyToClipboard: useCallback(async (text) => {
+			await navigator.clipboard.writeText(text);
+			setIsCopied(true);
+			setTimeout(() => setIsCopied(false), timeout);
+		}, [timeout]),
+		isCopied
+	};
+}
+function useLatest(value) {
+	const ref = useRef(value);
+	ref.current = value;
+	return ref;
+}
+function getLanguageFromFile(name) {
+	const ext = name.split(".").pop()?.toLowerCase();
+	return ext ? {
+		ts: "typescript",
+		tsx: "typescript",
+		js: "javascript",
+		jsx: "javascript",
+		css: "css",
+		json: "json",
+		html: "html",
+		md: "markdown"
+	}[ext] : void 0;
+}
+function serializeAttributes(attrs) {
+	if (!attrs || Object.keys(attrs).length === 0) return "";
+	return Object.entries(attrs).map(([key, value]) => value === "" ? ` ${key}` : ` ${key}="${value}"`).join("");
+}
+
+//#endregion
+//#region src/lib/workspace/internals.ts
+const INTERNAL_SUBSCRIBE = Symbol("subscribe");
+const INTERNAL_REGISTER_EDITOR = Symbol("registerEditor");
+const INTERNAL_UNREGISTER_EDITOR = Symbol("unregisterEditor");
+const INTERNAL_BOUND = Symbol("bound");
+const INTERNAL_SET_ID = Symbol("setId");
+const INTERNAL_EMIT = Symbol("emit");
+const NOOP_SUBSCRIBE = () => () => {};
+
+//#endregion
+//#region src/lib/workspace/opfs.ts
+var OPFS = class {
+	dir = null;
+	async initOPFS(files) {
+		this.dir = await (await navigator.storage.getDirectory()).getDirectoryHandle(this.id, { create: true });
+		await Promise.all(Object.entries(files).map(([path, content]) => this.writeToOPFS(path, content)));
+	}
+	async writeToOPFS(path, content) {
+		const handle = await this.getFileHandle(path);
+		if (!handle) return;
+		const writable = await handle.createWritable();
+		await writable.write(content);
+		await writable.close();
+	}
+	async getFileHandle(path) {
+		if (!this.dir) return null;
+		const parts = path.split("/").filter(Boolean);
+		const fileName = parts.pop();
+		let current = this.dir;
+		for (const part of parts) current = await current.getDirectoryHandle(part, { create: true });
+		return current.getFileHandle(fileName, { create: true });
+	}
+};
+
+//#endregion
+//#region src/lib/workspace/index.ts
+/**
+* Workspace - Core class for managing files, compilation, and editor state.
+*
+* Manages a virtual file system for code editing and live preview.
+* Handles file CRUD operations, tracks the currently active file,
+* and emits events for file changes and compilation results.
+* Supports optional Origin Private File System (OPFS) for persistence.
+*/
+var Workspace = class extends OPFS {
+	id;
+	initialFiles;
+	listeners = /* @__PURE__ */ new Set();
+	events = /* @__PURE__ */ new Map();
+	_currentFile = null;
+	_editors = /* @__PURE__ */ new Map();
+	_bound = false;
+	constructor(config) {
+		super();
+		this.config = config;
+		const { id, OPFS: OPFS$1 = false, files } = config;
+		this.id = id || "";
+		this.initialFiles = { ...files };
+		if (OPFS$1) super.initOPFS(this.files);
+	}
+	notifyListeners() {
+		this.listeners.forEach((fn) => fn());
+	}
+	createEntryFileNode(code) {
+		const name = this.entry.split("/").pop() || this.entry;
+		return {
+			name,
+			type: "file",
+			path: this.entry,
+			code: code ?? this.files[this.entry],
+			language: getLanguageFromFile(name)
+		};
+	}
+	normalizePath(path) {
+		return path.replace(/^\.\//, "");
+	}
+	getFile(path) {
+		const code = this.files[path];
+		if (code === void 0) return;
+		const name = path.split("/").pop() || path;
+		return {
+			name,
+			type: "file",
+			path,
+			code,
+			language: getLanguageFromFile(name)
+		};
+	}
+	get entry() {
+		return this.config.entry;
+	}
+	get files() {
+		return this.config.files;
+	}
+	get framework() {
+		return this.config.framework ?? "react";
+	}
+	get currentFile() {
+		if (!this._currentFile) this._currentFile = this.createEntryFileNode();
+		return this._currentFile;
+	}
+	get editors() {
+		return this._editors;
+	}
+	setFile(path, content) {
+		let newFiles = { ...this.config.files };
+		if (!path.endsWith("/")) {
+			const parts = path.split("/");
+			const parentFolders = /* @__PURE__ */ new Set();
+			for (let i = 1; i < parts.length; i++) parentFolders.add(parts.slice(0, i).join("/") + "/");
+			newFiles = Object.fromEntries(Object.entries(newFiles).filter(([key]) => !parentFolders.has(key)));
+		}
+		newFiles[path] = content;
+		this.config.files = newFiles;
+		if (!path.endsWith("/")) this.writeToOPFS(path, content);
+		if (this._currentFile && this._currentFile.path === path) this._currentFile = {
+			...this._currentFile,
+			code: content
+		};
+		this.notifyListeners();
+		this.emit("fileChange", path, content);
+	}
+	setFiles(files) {
+		this.config.files = { ...files };
+		this.initialFiles = { ...files };
+		if (this._currentFile) {
+			const newCode = files[this._currentFile.path];
+			if (newCode !== void 0) this._currentFile = {
+				...this._currentFile,
+				code: newCode
+			};
+			else this._currentFile = this.createEntryFileNode(files[this.entry]);
+		}
+		this.notifyListeners();
+		this.emit("filesChange", files);
+	}
+	renameFile(oldPath, newName) {
+		const isFolder = !(oldPath in this.files);
+		const parentPath = oldPath.split("/").slice(0, -1).join("/");
+		const newPath = parentPath ? `${parentPath}/${newName}` : newName;
+		if (isFolder) {
+			const newFiles = {};
+			for (const [path, content] of Object.entries(this.files)) {
+				const normalizedPath = this.normalizePath(path);
+				if (normalizedPath === oldPath || normalizedPath.startsWith(oldPath + "/")) {
+					const newFilePath = path.replace(oldPath, newPath);
+					newFiles[newFilePath] = content;
+				} else newFiles[path] = content;
+			}
+			this.config.files = newFiles;
+		} else {
+			const content = this.files[oldPath];
+			const { [oldPath]: _, ...rest } = this.files;
+			this.config.files = {
+				...rest,
+				[newPath]: content
+			};
+			this.writeToOPFS(newPath, content);
+		}
+		if (this._currentFile?.path === oldPath || this._currentFile?.path.startsWith(oldPath + "/")) {
+			const newCurrentPath = isFolder ? newPath + this._currentFile.path.slice(oldPath.length) : newPath;
+			this._currentFile = {
+				...this._currentFile,
+				path: newCurrentPath,
+				name: newCurrentPath.split("/").pop()
+			};
+		}
+		this.notifyListeners();
+		this.emit("fileRename", oldPath, newPath);
+	}
+	deleteFile(path) {
+		const isEmptyFolder = path.endsWith("/");
+		const normalizedPath = isEmptyFolder ? path.slice(0, -1) : path;
+		const isFolder = isEmptyFolder || !(path in this.files);
+		let newFiles;
+		if (isFolder) newFiles = Object.fromEntries(Object.entries(this.files).filter(([filePath]) => {
+			const normalized = this.normalizePath(filePath);
+			return normalized !== path && normalized !== normalizedPath + "/" && !normalized.startsWith(normalizedPath + "/");
+		}));
+		else {
+			const { [path]: _, ...rest } = this.files;
+			newFiles = rest;
+		}
+		const parentPath = normalizedPath.split("/").slice(0, -1).join("/");
+		if (parentPath) {
+			if (!Object.keys(newFiles).some((f) => {
+				const normalized = this.normalizePath(f).replace(/\/$/, "");
+				return normalized.startsWith(parentPath + "/") && normalized !== parentPath;
+			})) newFiles[parentPath + "/"] = "";
+		}
+		this.config.files = newFiles;
+		if (this._currentFile?.path === path || this._currentFile?.path.startsWith(normalizedPath + "/")) this._currentFile = this.createEntryFileNode();
+		this.notifyListeners();
+		this.emit("fileDelete", path);
+	}
+	setCurrentFile(path) {
+		const file = this.getFile(path);
+		if (file) {
+			this._currentFile = file;
+			this.notifyListeners();
+			this.emit("currentFileChange", file);
+		}
+	}
+	on(event, callback) {
+		if (!this.events.has(event)) this.events.set(event, /* @__PURE__ */ new Set());
+		this.events.get(event).add(callback);
+		return () => this.off(event, callback);
+	}
+	off(event, callback) {
+		this.events.get(event)?.delete(callback);
+	}
+	emit(event, ...args) {
+		this.events.get(event)?.forEach((cb) => cb(...args));
+	}
+	[INTERNAL_SUBSCRIBE](listener) {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
+	[INTERNAL_REGISTER_EDITOR](id, editor) {
+		this._editors.set(id, editor);
+	}
+	[INTERNAL_UNREGISTER_EDITOR](id) {
+		this._editors.delete(id);
+	}
+	[INTERNAL_BOUND]() {
+		if (this._bound) return true;
+		this._bound = true;
+		return false;
+	}
+	[INTERNAL_SET_ID](id) {
+		this.id = id;
+	}
+	[INTERNAL_EMIT](event, ...args) {
+		this.emit(event, ...args);
+	}
+};
+/**
+* Hook to manage workspace state and compilation.
+* Provides reactive access to files, compilation results, and workspace methods.
+*
+* @param init - WorkspaceInit config object or existing Workspace instance
+* @returns Workspace state including files, compiled code, and the workspace instance
+*/
+function useWorkspace(init) {
+	const uid$1 = useId();
+	const context = useCodespark();
+	const workspace = useMemo(() => {
+		let ws;
+		if (init instanceof Workspace) ws = init;
+		else if (init) ws = new Workspace(init);
+		else ws = context?.workspace;
+		if (!ws?.id) ws?.[INTERNAL_SET_ID](`workspace${uid$1}`);
+		return ws;
+	}, []);
+	if (!workspace) throw Error("Can not find any workspace instance. Make sure provide a workspace during runtime.");
+	const framework = useMemo(() => {
+		const fwInput = workspace.framework;
+		if (typeof fwInput === "string") return registry.get(fwInput);
+		if (typeof fwInput === "function") return new fwInput();
+		return fwInput;
+	}, []);
+	if (!framework) throw new Error(`Framework not found: ${workspace.framework}`);
+	const standalone = context ? false : !workspace[INTERNAL_BOUND]();
+	const subscribe = useMemo(() => standalone ? (cb) => workspace[INTERNAL_SUBSCRIBE](cb) : NOOP_SUBSCRIBE, []);
+	const files = useSyncExternalStore(subscribe, () => workspace.files, () => workspace.files);
+	const currentFile = useSyncExternalStore(subscribe, () => workspace.currentFile, () => workspace.currentFile);
+	const derivedState = useMemo(() => {
+		if (context) {
+			const { fileTree: fileTree$1, vendor, compiled, compileError } = context;
+			return {
+				fileTree: fileTree$1,
+				vendor,
+				compiled,
+				compileError
+			};
+		}
+		const fileTree = (() => {
+			const root = [];
+			const entries = Object.entries(files);
+			const entryItem = entries.find(([path]) => path === workspace.entry);
+			const rest = entries.filter(([path]) => path !== workspace.entry);
+			const sorted = entryItem ? [entryItem, ...rest] : rest;
+			for (const [filePath, code] of sorted) {
+				if (filePath.startsWith("../")) continue;
+				const isEmptyFolder = filePath.endsWith("/");
+				const parts = (isEmptyFolder ? filePath.slice(0, -1) : filePath).split("/").filter((p) => p !== "." && p !== "..");
+				let current = root;
+				let currentPath = "";
+				for (let i = 0; i < parts.length; i++) {
+					const name = parts[i];
+					const isLast = i === parts.length - 1;
+					currentPath = currentPath ? `${currentPath}/${name}` : name;
+					if (isLast && !isEmptyFolder) current.push({
+						name,
+						type: "file",
+						path: filePath,
+						code,
+						language: getLanguageFromFile(name)
+					});
+					else {
+						let folder = current.find((n) => n.type === "folder" && n.name === name);
+						if (!folder) {
+							folder = {
+								name,
+								type: "folder",
+								path: currentPath,
+								children: []
+							};
+							current.push(folder);
+						}
+						current = folder.children;
+					}
+				}
+			}
+			return root;
+		})();
+		try {
+			framework.analyze(workspace.entry, files);
+			const compiled = framework.compile();
+			workspace[INTERNAL_EMIT]("compiled", compiled);
+			const modules = framework.getOutput(LoaderType.ESModule);
+			return {
+				fileTree,
+				compiled,
+				compileError: null,
+				vendor: {
+					modules,
+					styles: framework.getOutput(LoaderType.Style),
+					scripts: framework.getOutput(LoaderType.Script),
+					imports: {
+						...modules.map(({ externals }) => externals).flat().reduce((pre, { name, imported }) => {
+							return {
+								...pre,
+								[name]: constructESMUrl({
+									pkg: name,
+									version: "",
+									external: Object.keys(framework.imports),
+									exports: imported.length ? imported : void 0
+								})
+							};
+						}, {}),
+						...framework.imports
+					}
+				}
+			};
+		} catch (error) {
+			workspace[INTERNAL_EMIT]("compileError", error);
+			return {
+				fileTree,
+				compiled: "",
+				compileError: error,
+				vendor: {
+					modules: [],
+					styles: [],
+					scripts: [],
+					imports: {}
+				}
+			};
+		}
+	}, [files]);
+	return {
+		files: context?.files ?? files,
+		currentFile: context?.currentFile ?? currentFile,
+		...derivedState,
+		workspace
+	};
+}
+/**
+* Creates a Workspace instance from a React component or element.
+* Typically used with the rollup plugin to create workspaces from components.
+*
+* @param this - Context containing scanned code information (injected by rollup plugin)
+* @param source - React component or element to create workspace from
+* @param config - Configuration options
+* @returns A new Workspace instance
+*
+* @example
+* ```tsx
+* // Used with rollup plugin
+* const workspace = createWorkspace(MyComponent, {
+*   name: './App.tsx',
+*   mode: 'packed'
+* });
+* ```
+*/
+function createWorkspace(source, config) {
+	const { id, framework, name = "./App.tsx", mode = "packed" } = config || {};
+	if (!this?.__scanned) return new Workspace({
+		id,
+		entry: name,
+		files: { [name]: source.toString() }
+	});
+	const { entry, files } = this.__scanned;
+	let packedCode;
+	if (mode === "raw") packedCode = entry.code;
+	else if (mode === "source") {
+		packedCode = Object.values(files)[0] || "";
+		return new Workspace({
+			id,
+			framework,
+			entry: name,
+			files: { [name]: packedCode }
+		});
+	} else {
+		const { code, locals, imports } = entry;
+		packedCode = [
+			imports.join("\n"),
+			locals.join("\n"),
+			isElement(source) || isFragment(source) ? `export default function App() {\n  return ${code}\n};` : `export default ${code};`
+		].filter(Boolean).join("\n\n");
+	}
+	return new Workspace({
+		id,
+		framework,
+		entry: name,
+		files: {
+			[name]: packedCode,
+			...files
+		}
+	});
+}
+
+//#endregion
+//#region src/context/index.tsx
+const ConfigContext = createContext({ theme: "light" });
+const CodesparkContext = createContext(null);
+const useConfig = () => useContext(ConfigContext);
+const useCodespark = () => useContext(CodesparkContext);
+function ConfigProvider(props) {
+	const { children, ...config } = props;
+	return /* @__PURE__ */ jsx(ConfigContext.Provider, {
+		value: config,
+		children
+	});
+}
+/**
+* CodesparkProvider - A context provider that shares workspace state and configuration.
+*
+* Provides workspace instance, theme, framework type, and import maps to child components.
+* Required when using CodesparkEditor, CodesparkPreview, or CodesparkFileExplorer independently.
+* Automatically manages workspace state synchronization across all child components.
+*/
+function CodesparkProvider(props) {
+	const { children, theme, framework = "react", imports, editor, workspace = new Workspace({
+		entry: "./App.tsx",
+		files: { "./App.tsx": "" },
+		framework
+	}) } = props;
+	const store = useWorkspace(workspace);
+	return /* @__PURE__ */ jsx(CodesparkContext.Provider, {
+		value: {
+			framework,
+			imports,
+			theme,
+			editor,
+			...store
+		},
+		children
+	});
+}
+
+//#endregion
+//#region src/lib/editor-adapter/index.ts
+let EditorEngine = /* @__PURE__ */ function(EditorEngine$1) {
+	EditorEngine$1[EditorEngine$1["Monaco"] = 0] = "Monaco";
+	EditorEngine$1[EditorEngine$1["CodeMirror"] = 1] = "CodeMirror";
+	return EditorEngine$1;
+}({});
+
+//#endregion
+//#region src/ui/button.tsx
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/90",
+			destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+			outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+			link: "text-primary underline-offset-4 hover:underline"
+		},
+		size: {
+			default: "h-9 px-4 py-2 has-[>svg]:px-3",
+			sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+			icon: "size-9",
+			"icon-sm": "size-8",
+			"icon-lg": "size-10"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+const Button = React.forwardRef(function Button$1({ className, variant = "default", size = "default", asChild = false, ...props }, ref) {
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
+		"data-slot": "button",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(buttonVariants({
+			variant,
+			size,
+			className
+		})),
+		ref,
+		...props
+	});
+});
+
+//#endregion
+//#region src/ui/icons.tsx
+const Icons = {
+	json: (props) => /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M12.043 23.968c.479-.004.953-.029 1.426-.094a11.805 11.805 0 0 0 3.146-.863 12.404 12.404 0 0 0 3.793-2.542 11.977 11.977 0 0 0 2.44-3.427 11.794 11.794 0 0 0 1.02-3.476c.149-1.16.135-2.346-.045-3.499a11.96 11.96 0 0 0-.793-2.788 11.197 11.197 0 0 0-.854-1.617c-1.168-1.837-2.861-3.314-4.81-4.3a12.835 12.835 0 0 0-2.172-.87h-.005c.119.063.24.132.345.201.12.074.239.146.351.225a8.93 8.93 0 0 1 1.559 1.33c1.063 1.145 1.797 2.548 2.218 4.041.284.982.434 1.998.495 3.017.044.743.044 1.491-.047 2.229-.149 1.27-.554 2.51-1.228 3.596a7.475 7.475 0 0 1-1.903 2.084c-1.244.928-2.877 1.482-4.436 1.114a3.916 3.916 0 0 1-.748-.258 4.692 4.692 0 0 1-.779-.45 6.08 6.08 0 0 1-1.244-1.105 6.507 6.507 0 0 1-1.049-1.747 7.366 7.366 0 0 1-.494-2.54c-.03-1.273.225-2.553.854-3.67a6.43 6.43 0 0 1 1.663-1.918c.225-.178.464-.333.704-.479l.016-.007a5.121 5.121 0 0 0-1.441-.12 4.963 4.963 0 0 0-1.228.24c-.359.12-.704.27-1.019.45a6.146 6.146 0 0 0-.733.494c-.211.18-.42.36-.615.555-1.123 1.153-1.768 2.682-2.022 4.256-.15.973-.15 1.96-.091 2.95.105 1.395.391 2.787.945 4.062a8.518 8.518 0 0 0 1.348 2.173 8.14 8.14 0 0 0 3.132 2.23 7.934 7.934 0 0 0 2.113.54c.074.015.149.015.209.015zm-2.934-.398a4.102 4.102 0 0 1-.45-.228 8.5 8.5 0 0 1-2.038-1.534c-1.094-1.137-1.827-2.566-2.247-4.08a15.184 15.184 0 0 1-.495-3.172 12.14 12.14 0 0 1 .046-2.082c.135-1.257.495-2.501 1.124-3.58a6.889 6.889 0 0 1 1.783-2.053 6.23 6.23 0 0 1 1.633-.9 5.363 5.363 0 0 1 3.522-.045c.029 0 .029 0 .045.03.015.015.045.015.06.03.045.016.104.045.165.074.239.12.479.271.704.42a6.294 6.294 0 0 1 2.097 2.502c.42.914.615 1.934.631 2.938.014 1.079-.18 2.157-.645 3.146a6.42 6.42 0 0 1-2.638 2.832c.09.03.18.045.271.075.225.044.449.074.688.074 1.468.045 2.892-.66 3.94-1.647.195-.18.375-.375.54-.585.225-.27.435-.54.614-.823.239-.375.435-.75.614-1.154a8.112 8.112 0 0 0 .509-1.664c.196-1.004.211-2.022.149-3.026-.135-2.022-.673-4.045-1.842-5.724a9.054 9.054 0 0 0-.555-.719 9.868 9.868 0 0 0-1.063-1.034 8.477 8.477 0 0 0-1.363-.915 9.927 9.927 0 0 0-1.692-.598l-.3-.06c-.209-.03-.42-.044-.634-.06a8.453 8.453 0 0 0-1.015.016c-.704.045-1.412.16-2.112.337C5.799 1.227 2.863 3.566 1.3 6.67A11.834 11.834 0 0 0 .238 9.801a11.81 11.81 0 0 0-.104 3.775c.12 1.02.374 2.023.778 2.977.227.57.511 1.124.825 1.648 1.094 1.783 2.683 3.236 4.51 4.24.688.39 1.408.69 2.157.944.226.074.45.15.689.21z"
+		})
+	}),
+	ts: (props) => /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" })
+	}),
+	css: (props) => /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M0 0v20.16A3.84 3.84 0 0 0 3.84 24h16.32A3.84 3.84 0 0 0 24 20.16V3.84A3.84 3.84 0 0 0 20.16 0Zm14.256 13.08c1.56 0 2.28 1.08 2.304 2.64h-1.608c.024-.288-.048-.6-.144-.84-.096-.192-.288-.264-.552-.264-.456 0-.696.264-.696.84-.024.576.288.888.768 1.08.72.288 1.608.744 1.92 1.296q.432.648.432 1.656c0 1.608-.912 2.592-2.496 2.592-1.656 0-2.4-1.032-2.424-2.688h1.68c0 .792.264 1.176.792 1.176.264 0 .456-.072.552-.24.192-.312.24-1.176-.048-1.512-.312-.408-.912-.6-1.32-.816q-.828-.396-1.224-.936c-.24-.36-.36-.888-.36-1.536 0-1.44.936-2.472 2.424-2.448m5.4 0c1.584 0 2.304 1.08 2.328 2.64h-1.608c0-.288-.048-.6-.168-.84-.096-.192-.264-.264-.528-.264-.48 0-.72.264-.72.84s.288.888.792 1.08c.696.288 1.608.744 1.92 1.296.264.432.408.984.408 1.656.024 1.608-.888 2.592-2.472 2.592-1.68 0-2.424-1.056-2.448-2.688h1.68c0 .744.264 1.176.792 1.176.264 0 .456-.072.552-.24.216-.312.264-1.176-.048-1.512-.288-.408-.888-.6-1.32-.816-.552-.264-.96-.576-1.2-.936s-.36-.888-.36-1.536c-.024-1.44.912-2.472 2.4-2.448m-11.031.018c.711-.006 1.419.198 1.839.63.432.432.672 1.128.648 1.992H9.336c.024-.456-.096-.792-.432-.96-.312-.144-.768-.048-.888.24-.12.264-.192.576-.168.864v3.504c0 .744.264 1.128.768 1.128a.65.65 0 0 0 .552-.264c.168-.24.192-.552.168-.84h1.776c.096 1.632-.984 2.712-2.568 2.688-1.536 0-2.496-.864-2.472-2.472v-4.032c0-.816.24-1.44.696-1.848.432-.408 1.146-.624 1.857-.63" })
+	})
+};
+function getIconForLanguageExtension(language) {
+	switch (language) {
+		case "json": return /* @__PURE__ */ jsx(Icons.json, {});
+		case "css": return /* @__PURE__ */ jsx(Icons.css, { className: "fill-foreground" });
+		case "js":
+		case "jsx":
+		case "ts":
+		case "tsx":
+		case "typescript": return /* @__PURE__ */ jsx(Icons.ts, { className: "fill-foreground" });
+		default: return /* @__PURE__ */ jsx(FileIcon, {});
+	}
+}
+
+//#endregion
+//#region src/ui/tooltip.tsx
+function TooltipProvider({ delayDuration = 0, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		"data-slot": "tooltip-provider",
+		delayDuration,
+		...props
+	});
+}
+function Tooltip$1({ ...props }) {
+	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip.Root, {
+		"data-slot": "tooltip",
+		...props
+	}) });
+}
+function TooltipTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
+		"data-slot": "tooltip-trigger",
+		...props
+	});
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
+		"data-slot": "tooltip-content",
+		sideOffset,
+		className: cn("bg-foreground text-background 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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" })]
+	}) });
+}
+
+//#endregion
+//#region src/ui/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "skeleton",
+		className: cn("bg-accent animate-pulse rounded-md", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/editor/codemirror/adapter.ts
+var CodeMirrorEditorAdapter = class {
+	constructor(kind, instance) {
+		this.kind = kind;
+		this.instance = instance;
+	}
+	getValue() {
+		return this.instance.view?.state.doc.toString() ?? "";
+	}
+	setValue(value, addToHistory = false) {
+		const view = this.instance.view;
+		if (!view) return;
+		view.dispatch({
+			changes: {
+				from: 0,
+				to: view.state.doc.length,
+				insert: value
+			},
+			annotations: addToHistory ? void 0 : Transaction.addToHistory.of(false)
+		});
+	}
+	async format() {}
+};
+
+//#endregion
+//#region src/components/editor/codemirror/index.tsx
+const THEME = EditorView.theme({
+	"&": { fontSize: "14px" },
+	"&.cm-focused": { outline: "none" },
+	"&.cm-editor": { backgroundColor: "var(--background)" },
+	".cm-gutters.cm-gutters": {
+		backgroundColor: "var(--background)",
+		border: "none"
+	},
+	".cm-gutter": {
+		padding: "1px 4px 0px 12px",
+		minWidth: "36px"
+	},
+	".cm-scroller": {
+		paddingTop: "8px",
+		fontFamily: "Fira Code"
+	},
+	".cm-line": {
+		padding: "0 12px",
+		height: "24px",
+		lineHeight: "24px"
+	},
+	".cm-gutterElement.cm-gutterElement": {
+		padding: "0px",
+		lineHeight: "24px"
+	},
+	".cm-activeLine": { borderRadius: "4px" }
+});
+const LANGUAGE_EXTENSIONS = {
+	javascript: javascript({ jsx: true }),
+	markdown: markdown({
+		base: markdownLanguage,
+		codeLanguages: languages
+	})
+};
+const CodeMirror = {
+	kind: EditorEngine.CodeMirror,
+	Component: memo(function CodeMirror$1(props) {
+		const { id, basicSetup, extensions = [], width, height, fontFamily, lang, onMount, ...rest } = props;
+		const [mounted, setMounted] = useState(false);
+		const editorRef = useRef(null);
+		const allExtensions = useMemo(() => {
+			const exts = [THEME, ...extensions];
+			if (lang && LANGUAGE_EXTENSIONS[lang]) exts.unshift(LANGUAGE_EXTENSIONS[lang]);
+			else exts.unshift(LANGUAGE_EXTENSIONS.javascript);
+			if (fontFamily) exts.push(EditorView.theme({ "& .cm-scroller": { fontFamily } }));
+			return exts;
+		}, [extensions, fontFamily]);
+		useEffect(() => {
+			setMounted(true);
+		}, []);
+		useEffect(() => {
+			if (editorRef.current) onMount?.(editorRef.current);
+		}, [mounted]);
+		return /* @__PURE__ */ jsx("div", {
+			id,
+			style: { height },
+			children: !mounted ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col space-y-3 p-5",
+				style: { height },
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "w-full flex-1 rounded-xl" }), /* @__PURE__ */ jsxs("div", {
+					className: "space-y-3",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[80%]" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-[65%]" })]
+				})]
+			}) : /* @__PURE__ */ jsx(ReactCodeMirror, {
+				ref: editorRef,
+				width: width ?? "100%",
+				height,
+				basicSetup: typeof basicSetup === "boolean" ? basicSetup : {
+					lineNumbers: true,
+					foldGutter: false,
+					highlightActiveLine: false,
+					highlightActiveLineGutter: false,
+					...basicSetup
+				},
+				extensions: allExtensions,
+				lang,
+				...rest
+			})
+		});
+	}),
+	createAdapter: (instance) => {
+		return new CodeMirrorEditorAdapter(EditorEngine.CodeMirror, instance);
+	}
+};
+
+//#endregion
+//#region src/components/editor/index.tsx
+function propsTypeGuard(props, editor, kind) {
+	if ("editor" in props && props.editor?.kind === kind) return true;
+	return editor.kind === kind;
+}
+function CodesparkEditor(props) {
+	const { theme: globalTheme, editor: globalEditor, fontFamily: globalFontFamily } = useConfig();
+	const { workspace: contextWorkspace, theme: contextTheme } = useCodespark() || {};
+	const { id, value = "", theme = contextTheme ?? globalTheme ?? "light", editor = globalEditor ?? CodeMirror, className, toolbox = true, containerProps, debounceWait = 500 } = props;
+	const { files, currentFile, vendor, workspace } = useWorkspace(props.workspace ?? contextWorkspace ?? new Workspace({
+		entry: "./App.tsx",
+		files: { "./App.tsx": value }
+	}));
+	const uid$1 = useId();
+	const editorId = id ?? `editor${uid$1}`;
+	const editorRef = useRef(null);
+	const currentFileRef = useLatest(currentFile);
+	const { copyToClipboard, isCopied } = useCopyToClipboard();
+	const toolboxItems = {
+		reset: {
+			tooltip: "Reset Document",
+			icon: /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5!" }),
+			onClick: () => {
+				const { path } = currentFile;
+				const initialCode = workspace.initialFiles[path] ?? "";
+				editorRef.current?.setValue(initialCode);
+				workspace.setFile(path, initialCode);
+			}
+		},
+		format: {
+			tooltip: "Format Document",
+			icon: /* @__PURE__ */ jsx(RemoveFormatting, { className: "size-3.5!" }),
+			onClick: () => {
+				editorRef.current?.format();
+			}
+		},
+		copy: {
+			tooltip: isCopied ? "Copied" : "Copy to Clipboard",
+			icon: isCopied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5!" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5!" }),
+			onClick: () => {
+				copyToClipboard(editorRef.current?.getValue() || "");
+			}
+		}
+	};
+	const handleEditorChange = useCallback(debounce((newValue) => {
+		const { code, path } = currentFileRef.current;
+		if (newValue === code) return;
+		workspace.setFile(path, newValue || "");
+	}, debounceWait, {
+		leading: true,
+		trailing: true
+	}), [debounceWait]);
+	const handleEditorMount = useCallback((adapter) => {
+		editorRef.current = adapter;
+		workspace[INTERNAL_REGISTER_EDITOR](editorId, adapter);
+	}, []);
+	const renderEditor = () => {
+		const id$1 = `${workspace.id}${editorId}`;
+		if (editor.kind === EditorEngine.Monaco && propsTypeGuard(props, editor, EditorEngine.Monaco)) {
+			const { height, width, wrapperProps, options, onChange, onMount } = props;
+			const { fontFamily = globalFontFamily } = options || {};
+			return /* @__PURE__ */ jsx(editor.Component, {
+				id: id$1,
+				value: value || currentFile.code,
+				path: `file:///${id$1}/${currentFile.path.replace(/^(\.\.?\/)+/, "")}`,
+				theme: theme === "light" ? "vitesse-light" : "vitesse-dark",
+				files,
+				imports: vendor.imports,
+				className,
+				height: height ?? 200,
+				width,
+				wrapperProps,
+				language: currentFile.language,
+				options: {
+					padding: {
+						top: 12,
+						bottom: 12
+					},
+					lineDecorationsWidth: 12,
+					...options,
+					fontFamily
+				},
+				onChange: (newValue, evt) => {
+					onChange?.(newValue, evt);
+					handleEditorChange(newValue);
+				},
+				onMount: (editorInstance, monacoInstance) => {
+					onMount?.(editorInstance, monacoInstance);
+					handleEditorMount(editor.createAdapter(editorInstance));
+				}
+			});
+		}
+		if (editor.kind === EditorEngine.CodeMirror && propsTypeGuard(props, editor, EditorEngine.CodeMirror)) {
+			const { height, width, basicSetup, fontFamily, readOnly, onChange, onMount } = props;
+			return /* @__PURE__ */ jsx(editor.Component, {
+				id: id$1,
+				className,
+				value: value || currentFile.code,
+				height: height ?? "200px",
+				width,
+				theme,
+				basicSetup,
+				readOnly,
+				fontFamily: fontFamily ?? globalFontFamily,
+				lang: currentFile.language,
+				onChange: (newValue, viewUpdate) => {
+					onChange?.(newValue, viewUpdate);
+					handleEditorChange(newValue);
+				},
+				onMount: (editorInstance) => {
+					onMount?.(editorInstance);
+					handleEditorMount(editor.createAdapter(editorInstance));
+				}
+			});
+		}
+		return null;
+	};
+	useEffect(() => {
+		const editorValue = editorRef.current?.getValue();
+		if (editorValue && editorValue !== currentFile.code) editorRef.current?.setValue(currentFile.code ?? "");
+	}, [currentFile.code]);
+	useEffect(() => {
+		if (!value) return;
+		workspace.setFile(workspace.entry, value);
+	}, [value]);
+	useEffect(() => {
+		return () => {
+			workspace[INTERNAL_UNREGISTER_EDITOR](editorId);
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		...containerProps,
+		className: cn("h-full divide-y", containerProps?.className),
+		children: [toolbox ? /* @__PURE__ */ jsxs("div", {
+			className: "border-border flex items-center justify-between p-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "[&_svg]:text-code-foreground flex items-center gap-x-2 px-2 [&_svg]:size-4 [&_svg]:opacity-70",
+				children: [getIconForLanguageExtension("typescript"), /* @__PURE__ */ jsx("span", {
+					className: "text-card-foreground",
+					children: currentFile.path.replace(/^(\.\.?\/)+/, "")
+				})]
+			}), isValidElement(toolbox) ? toolbox : /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: (Array.isArray(toolbox) ? toolbox : [
+					"reset",
+					"format",
+					"copy"
+				]).map((t, index) => {
+					if (isValidElement(t)) return t;
+					const item = typeof t === "string" ? toolboxItems[t] : t;
+					if (!item) return null;
+					const { tooltip, icon, asChild = true, onClick, render } = item;
+					function renderTriggerContent() {
+						if (icon) return /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "icon-sm",
+							onClick: () => onClick?.(editorRef.current),
+							children: icon
+						});
+						if (render) return render(editorRef.current);
+						return null;
+					}
+					return /* @__PURE__ */ jsxs(Tooltip$1, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild,
+						children: renderTriggerContent()
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] }, index);
+				})
+			})]
+		}) : null, renderEditor()]
+	});
+}
+
+//#endregion
+//#region src/ui/collapsible.tsx
+function Collapsible$1({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		"data-slot": "collapsible",
+		...props
+	});
+}
+function CollapsibleTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.CollapsibleTrigger, {
+		"data-slot": "collapsible-trigger",
+		...props
+	});
+}
+function CollapsibleContent({ ...props }) {
+	return /* @__PURE__ */ jsx(Collapsible.CollapsibleContent, {
+		"data-slot": "collapsible-content",
+		...props
+	});
+}
+
+//#endregion
+//#region src/ui/tabs.tsx
+function Tabs$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Root, {
+		"data-slot": "tabs",
+		className: cn("flex flex-col gap-2", className),
+		...props
+	});
+}
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		"data-slot": "tabs-list",
+		className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Trigger, {
+		"data-slot": "tabs-trigger",
+		className: cn("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/file-explorer/index.tsx
+const sortNodes = (nodes) => {
+	return [...nodes].sort((a, b) => {
+		if (a.type !== b.type) return a.type === "folder" ? -1 : 1;
+		return a.name.localeCompare(b.name);
+	});
+};
+const FileTreeItem = ({ node, defaultOpen, depth = 0, currentPath, renderItem }) => {
+	const isSelected = node.type === "file" && node.path === currentPath;
+	const [open, setOpen] = useState(defaultOpen);
+	const customContent = renderItem?.({
+		node,
+		depth,
+		isSelected,
+		isOpen: node.type === "file" ? void 0 : open
+	});
+	if (node.type === "file") return /* @__PURE__ */ jsx(TabsTrigger, {
+		value: node.path,
+		"data-type": "file",
+		"data-path": node.path,
+		className: "h-8 w-full justify-start border-transparent",
+		style: { paddingLeft: depth * 8 + 8 },
+		children: customContent ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Braces, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: node.name
+		})] })
+	});
+	return /* @__PURE__ */ jsxs(Collapsible$1, {
+		defaultOpen,
+		open,
+		onOpenChange: setOpen,
+		className: "flex w-full flex-col gap-1",
+		children: [/* @__PURE__ */ jsx(CollapsibleTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				"data-type": "folder",
+				"data-path": node.path,
+				className: "hover:bg-sidebar-accent text-foreground h-8 w-full justify-start border border-transparent py-1",
+				style: {
+					paddingLeft: depth * 8 + 8,
+					paddingRight: 8
+				},
+				children: customContent ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(ChevronRight, { className: "size-4 transition-transform duration-200 [[data-state=open]>&]:rotate-90" }),
+					/* @__PURE__ */ jsx(Folder, { className: "size-4" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: node.name
+					})
+				] })
+			})
+		}), node.children?.length ? /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: "flex flex-col gap-1",
+			children: sortNodes(node.children).map((child) => /* @__PURE__ */ jsx(FileTreeItem, {
+				node: child,
+				depth: depth + 1,
+				currentPath,
+				defaultOpen,
+				renderItem
+			}, child.path))
+		}) : null]
+	});
+};
+/**
+* CodesparkFileExplorer - A file tree explorer component for navigating multi-file workspaces.
+*
+* Displays a hierarchical view of files and folders in the workspace.
+* Supports file selection to switch the active file in the editor.
+* Automatically sorts items with folders first, then files alphabetically.
+*/
+const CodesparkFileExplorer = forwardRef((props, ref) => {
+	const { className, defaultOpen = false, renderItem, ...rest } = props;
+	const { fileTree, currentFile, workspace } = useWorkspace();
+	return /* @__PURE__ */ jsx(Tabs$1, {
+		ref,
+		className: cn("bg-sidebar border-border box-border w-50 p-2", className),
+		orientation: "vertical",
+		value: currentFile.path,
+		onValueChange: (path) => workspace.setCurrentFile(path),
+		...rest,
+		children: /* @__PURE__ */ jsx(TabsList, {
+			className: "bg-sidebar h-fit w-full flex-col items-start gap-1 p-0",
+			children: sortNodes(fileTree).map((node) => {
+				return /* @__PURE__ */ jsx(FileTreeItem, {
+					node,
+					currentPath: currentFile.path,
+					defaultOpen,
+					renderItem
+				}, node.path);
+			})
+		})
+	});
+});
+CodesparkFileExplorer.displayName = "CodesparkFileExplorer";
+
+//#endregion
+//#region src/components/inject/index.tsx
+/**
+* Style - Injects custom CSS styles into the preview iframe.
+*
+* A declarative component for adding inline styles to the sandboxed preview.
+* Renders nothing in the React tree but injects a `<style>` tag into the iframe.
+*
+* @example
+* ```tsx
+* <CodesparkPreview>
+*   <Style>{`.custom { color: red; }`}</Style>
+* </CodesparkPreview>
+* ```
+*/
+function Style(_props) {
+	return null;
+}
+/**
+* Script - Injects custom JavaScript into the preview iframe.
+*
+* A declarative component for adding inline or external scripts to the sandboxed preview.
+* Renders nothing in the React tree but injects a `<script>` tag into the iframe.
+*
+* @example
+* ```tsx
+* // Inline script
+* <CodesparkPreview>
+*   <Script>{`console.log('Hello from preview');`}<\/Script>
+* </CodesparkPreview>
+*
+* // External script
+* <CodesparkPreview>
+*   <Script src="https://example.com/script.js" />
+* </CodesparkPreview>
+* ```
+*/
+function Script(_props) {
+	return null;
+}
+/**
+* Link - Injects external resources into the preview iframe.
+*
+* A declarative component for adding `<link>` tags to the sandboxed preview.
+* Commonly used for external stylesheets, fonts, or other linked resources.
+* Renders nothing in the React tree but injects a `<link>` tag into the iframe.
+*
+* @example
+* ```tsx
+* // External stylesheet
+* <CodesparkPreview>
+*   <Link rel="stylesheet" href="https://example.com/styles.css" />
+* </CodesparkPreview>
+*
+* // Google Fonts
+* <CodesparkPreview>
+*   <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter" />
+* </CodesparkPreview>
+* ```
+*/
+function Link(_props) {
+	return null;
+}
+function useInjections(children) {
+	const [injections, setInjections] = useState([]);
+	useEffect(() => {
+		const result = [];
+		Children.forEach(children, (child) => {
+			if (isValidElement(child)) {
+				if (child.type === Style) {
+					const { children: children$1, ...attrs } = child.props;
+					result.push(`<style${serializeAttributes(attrs)}>${children$1?.trim() || ""}</style>`);
+				} else if (child.type === Script) {
+					const { children: children$1, ...attrs } = child.props;
+					result.push(`<script${serializeAttributes(attrs)}>${children$1?.trim() || ""}<\/script>`);
+				} else if (child.type === Link) {
+					const attrs = child.props;
+					result.push(`<link${serializeAttributes(attrs)} />`);
+				}
+			}
+		});
+		setInjections(result);
+	}, [children]);
+	return injections;
+}
+
+//#endregion
+//#region ./srcdoc.html?raw
+var srcdoc_default = "<!doctype html>\n<html class=\"DEFAULT_THEME\" style=\"color-scheme: DEFAULT_THEME\">\n  <head>\n    <style>\n      :root {\n        font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;\n        font-size: 16px;\n        line-height: 1.5;\n        font-synthesis: none;\n        text-rendering: optimizeLegibility;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n      }\n\n      html,\n      body {\n        margin: 0;\n        overflow: hidden;\n      }\n\n      html {\n        width: 100vw;\n        height: 100vh;\n        padding: 0;\n      }\n\n      body {\n        background: var(--background);\n        color: var(--foreground);\n        font-size: 14px;\n        height: 100%;\n        padding: 12px;\n        overflow: auto;\n        box-sizing: border-box;\n        display: flex;\n      }\n\n      #root {\n        margin: auto;\n      }\n    </style>\n    <script type=\"importmap\">\n      <!-- IMPORT_MAP -->\n    <\/script>\n    <!-- PRESET_TAG -->\n    <script>\n      (() => {\n        // Monitor module loading via PerformanceObserver\n        const observer = new PerformanceObserver(list => {\n          for (const entry of list.getEntries()) {\n            if (entry.initiatorType === 'script' || entry.initiatorType === 'link') {\n              const url = entry.name;\n              // Extract package name from URL (e.g., esm.sh/react@18.2.0/jsx-runtime -> react@18.2.0/jsx-runtime)\n              const match = url.match(/esm\\.sh\\/([^\\s?#]+)/);\n              const name = match ? match[1] : url;\n              loadingModules.delete(name);\n              parent.postMessage(\n                {\n                  action: 'fetch_progress',\n                  args: { loaded: name, remaining: [...loadingModules] }\n                },\n                '*'\n              );\n            }\n          }\n        });\n        observer.observe({ entryTypes: ['resource'] });\n\n        const scriptEls = [];\n        const loadingModules = new Set();\n\n        // Queue for sequential eval execution\n        let evalQueue = Promise.resolve();\n\n        window.__vite_plugin_react_preamble_installed__ = {};\n        window.__modules__ = {};\n        window.__export__ = (mod, key, get) => {\n          Object.defineProperty(mod, key, {\n            enumerable: true,\n            configurable: true,\n            get\n          });\n        };\n        window.__dynamic_import__ = key => {\n          return Promise.resolve(window.__modules__[key]);\n        };\n        window.__render_complete__ = () => {\n          parent.postMessage({ action: 'render_complete' }, '*');\n        };\n\n        async function processEval(ev) {\n          const { cmd_id } = ev.data;\n          const send_message = payload => parent.postMessage({ ...payload }, ev.origin);\n          const send_reply = payload => send_message({ ...payload, cmd_id });\n          const send_ok = () => send_reply({ action: 'cmd_ok' });\n          const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });\n\n          try {\n            if (scriptEls.length) {\n              scriptEls.forEach(el => {\n                document.head.removeChild(el);\n              });\n              scriptEls.length = 0;\n            }\n\n            let { script: scripts } = ev.data.args;\n            if (typeof scripts === 'string') scripts = [scripts];\n\n            for (const script of scripts) {\n              const scriptEl = document.createElement('script');\n              scriptEl.setAttribute('type', 'module');\n              // send ok in the module script to ensure sequential evaluation\n              // of multiple proxy.eval() calls\n              const done = new Promise(resolve => {\n                window.__next__ = resolve;\n              });\n              scriptEl.innerHTML = script;\n              document.head.appendChild(scriptEl);\n              scriptEl.onerror = err => {\n                send_error(err.message, err.stack);\n                window.__next__?.(); // unblock queue on error\n              };\n              scriptEls.push(scriptEl);\n              await done;\n            }\n            window.__next__ = undefined;\n            send_ok();\n          } catch (e) {\n            send_error(e.message, e.stack);\n          }\n        }\n\n        function handle_message(ev) {\n          const { action, cmd_id } = ev.data;\n          const send_message = payload => parent.postMessage({ ...payload }, ev.origin);\n          const send_reply = payload => send_message({ ...payload, cmd_id });\n          const send_ok = () => send_reply({ action: 'cmd_ok' });\n          const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack });\n\n          if (action === 'eval') {\n            // Queue eval requests to ensure sequential execution\n            evalQueue = evalQueue.then(() => processEval(ev));\n            return;\n          }\n\n          if (action === 'catch_clicks') {\n            try {\n              const top_origin = ev.origin;\n              document.body.addEventListener('click', event => {\n                if (event.which !== 1) return;\n                if (event.metaKey || event.ctrlKey || event.shiftKey) return;\n                if (event.defaultPrevented) return;\n\n                // ensure target is a link\n                let el = event.target;\n                while (el && el.nodeName !== 'A') el = el.parentNode;\n                if (!el || el.nodeName !== 'A') return;\n\n                if (el.hasAttribute('download') || el.getAttribute('rel') === 'external' || el.target) return;\n\n                event.preventDefault();\n\n                if (el.href.startsWith(top_origin)) {\n                  const url = new URL(el.href);\n                  if (url.hash[0] === '#') {\n                    window.location.hash = url.hash;\n                    return;\n                  }\n                }\n\n                window.open(el.href, '_blank');\n              });\n              send_ok();\n            } catch (e) {\n              send_error(e.message, e.stack);\n            }\n          }\n        }\n\n        window.addEventListener('message', handle_message, false);\n\n        window.onerror = function (msg, url, lineNo, columnNo, error) {\n          try {\n            parent.postMessage({ action: 'error', value: error }, '*');\n          } catch (e) {\n            parent.postMessage({ action: 'error', value: msg }, '*');\n          }\n          window.__next__?.(); // unblock eval queue on error\n        };\n\n        window.addEventListener('unhandledrejection', event => {\n          if (event.reason?.message.includes('Cross-origin')) {\n            event.preventDefault();\n            return;\n          }\n          try {\n            parent.postMessage({ action: 'unhandledrejection', value: event.reason }, '*');\n          } catch (e) {\n            parent.postMessage({ action: 'unhandledrejection', value: event.reason.message }, '*');\n          }\n        });\n\n        let previous = { level: null, args: null };\n\n        ['clear', 'log', 'info', 'dir', 'warn', 'error', 'table'].forEach(level => {\n          const original = console[level];\n          console[level] = (...args) => {\n            const msg = String(args[0]);\n            try {\n              const stringifiedArgs = stringify(args);\n              if (previous.level === level && previous.args && previous.args === stringifiedArgs) {\n                parent.postMessage({ action: 'console', level, args, duplicate: true }, '*');\n              } else {\n                previous = { level, args: stringifiedArgs };\n                parent.postMessage({ action: 'console', level, args }, '*');\n              }\n            } catch (err) {\n              parent.postMessage(\n                {\n                  action: 'console',\n                  level,\n                  args: args.map(a => {\n                    return a instanceof Error ? a.message : String(a);\n                  })\n                },\n                '*'\n              );\n            }\n\n            original(...args);\n          };\n        });\n\n        [\n          { method: 'group', action: 'console_group' },\n          { method: 'groupEnd', action: 'console_group_end' },\n          { method: 'groupCollapsed', action: 'console_group_collapsed' }\n        ].forEach(group_action => {\n          const original = console[group_action.method];\n          console[group_action.method] = label => {\n            parent.postMessage({ action: group_action.action, label }, '*');\n\n            original(label);\n          };\n        });\n\n        const timers = new Map();\n        const original_time = console.time;\n        const original_timelog = console.timeLog;\n        const original_timeend = console.timeEnd;\n\n        console.time = (label = 'default') => {\n          original_time(label);\n          timers.set(label, performance.now());\n        };\n        console.timeLog = (label = 'default') => {\n          original_timelog(label);\n          const now = performance.now();\n          if (timers.has(label))\n            parent.postMessage(\n              {\n                action: 'console',\n                level: 'system-log',\n                args: [`${label}: ${now - timers.get(label)}ms`]\n              },\n              '*'\n            );\n          else\n            parent.postMessage(\n              {\n                action: 'console',\n                level: 'system-warn',\n                args: [`Timer '${label}' does not exist`]\n              },\n              '*'\n            );\n        };\n        console.timeEnd = (label = 'default') => {\n          original_timeend(label);\n          const now = performance.now();\n          if (timers.has(label))\n            parent.postMessage(\n              {\n                action: 'console',\n                level: 'system-log',\n                args: [`${label}: ${now - timers.get(label)}ms`]\n              },\n              '*'\n            );\n          else\n            parent.postMessage(\n              {\n                action: 'console',\n                level: 'system-warn',\n                args: [`Timer '${label}' does not exist`]\n              },\n              '*'\n            );\n\n          timers.delete(label);\n        };\n\n        const original_assert = console.assert;\n        console.assert = (condition, ...args) => {\n          if (condition) {\n            const stack = new Error().stack;\n            parent.postMessage({ action: 'console', level: 'assert', args, stack }, '*');\n          }\n          original_assert(condition, ...args);\n        };\n\n        const counter = new Map();\n        const original_count = console.count;\n        const original_countreset = console.countReset;\n\n        console.count = (label = 'default') => {\n          counter.set(label, (counter.get(label) || 0) + 1);\n          parent.postMessage(\n            {\n              action: 'console',\n              level: 'system-log',\n              args: `${label}: ${counter.get(label)}`\n            },\n            '*'\n          );\n          original_count(label);\n        };\n\n        console.countReset = (label = 'default') => {\n          if (counter.has(label)) counter.set(label, 0);\n          else\n            parent.postMessage(\n              {\n                action: 'console',\n                level: 'system-warn',\n                args: `Count for '${label}' does not exist`\n              },\n              '*'\n            );\n\n          original_countreset(label);\n        };\n\n        const original_trace = console.trace;\n\n        console.trace = (...args) => {\n          const stack = new Error().stack;\n          parent.postMessage({ action: 'console', level: 'trace', args, stack }, '*');\n          original_trace(...args);\n        };\n\n        function stringify(args) {\n          try {\n            return JSON.stringify(args);\n          } catch (error) {\n            return null;\n          }\n        }\n      })();\n    <\/script>\n  </head>\n  <body>\n    <div id=\"root\"></div>\n  </body>\n</html>\n";
+
+//#endregion
+//#region src/lib/preview-proxy/index.ts
+let uid = 1;
+var PreviewProxy = class {
+	iframe;
+	handleEvent;
+	pending_cmds;
+	handlers;
+	constructor(config) {
+		const { id, root, handlers, defaultTheme = "light", defaultImports = {}, defaultPresets = [] } = config || {};
+		if (root) this.iframe = root;
+		else {
+			this.iframe = document.createElement("iframe");
+			this.iframe.id = id ?? "proxy_iframe";
+		}
+		this.iframe.setAttribute("sandbox", [
+			"allow-forms",
+			"allow-modals",
+			"allow-pointer-lock",
+			"allow-popups",
+			"allow-same-origin",
+			"allow-scripts",
+			"allow-top-navigation-by-user-activation"
+		].join(" "));
+		this.iframe.src = URL.createObjectURL(new Blob([srcdoc_default.replace(/DEFAULT_THEME/g, defaultTheme).replace(/<!-- IMPORT_MAP -->/, JSON.stringify({ imports: defaultImports })).replace(/<!-- PRESET_TAG -->/, defaultPresets.join("\n"))], { type: "text/html" }));
+		this.handlers = handlers;
+		this.pending_cmds = /* @__PURE__ */ new Map();
+		this.handleEvent = (e) => this.handleReplMessage(e);
+		window.addEventListener("message", this.handleEvent, false);
+		this.iframe.addEventListener("load", () => {
+			URL.revokeObjectURL(this.iframe.src);
+		});
+	}
+	eval(script) {
+		return this.iframeCommand("eval", { script });
+	}
+	destroy() {
+		window.removeEventListener("message", this.handleEvent);
+	}
+	iframeCommand(action, args) {
+		return new Promise((resolve, reject) => {
+			const cmd_id = uid++;
+			this.pending_cmds.set(cmd_id, {
+				resolve,
+				reject
+			});
+			this.iframe.contentWindow?.postMessage({
+				action,
+				cmd_id,
+				args
+			}, "*");
+		});
+	}
+	handleCommandMessage(cmd_data) {
+		const action = cmd_data.action;
+		const id = cmd_data.cmd_id;
+		const handler = this.pending_cmds.get(id);
+		if (handler) {
+			this.pending_cmds.delete(id);
+			if (action === "cmd_error") {
+				const { message, stack } = cmd_data;
+				const e = new Error(message);
+				e.stack = stack;
+				handler.reject(e);
+			}
+			if (action === "cmd_ok") handler.resolve(cmd_data.args);
+		}
+	}
+	handleReplMessage(event) {
+		if (event.source !== this.iframe.contentWindow) return;
+		const { action, args } = event.data;
+		switch (action) {
+			case "cmd_error":
+			case "cmd_ok": return this.handleCommandMessage(event.data);
+			case "fetch_progress": return this.handlers?.on_fetch_progress?.(args);
+			case "render_complete": return this.handlers?.on_render_complete?.();
+			case "error": return this.handlers?.on_error?.(event.data);
+			case "unhandledrejection": return this.handlers?.on_unhandled_rejection?.(event.data);
+			case "console": return this.handlers?.on_console?.(event.data);
+			case "console_group": return this.handlers?.on_console_group?.(event.data);
+			case "console_group_collapsed": return this.handlers?.on_console_group_collapsed?.(event.data);
+			case "console_group_end": return this.handlers?.on_console_group_end?.(event.data);
+		}
+	}
+	handleLinks() {
+		return this.iframeCommand("catch_clicks", {});
+	}
+	changeTheme(theme) {
+		const root = this.iframe.contentDocument?.querySelector("html");
+		if (root) {
+			root.classList.remove("light", "dark");
+			root.classList.add(theme);
+			root.setAttribute("style", `color-scheme: ${theme}`);
+		}
+	}
+	injectTags(tags) {
+		const doc = this.iframe.contentDocument;
+		if (!doc) return;
+		doc.querySelectorAll("[data-injected]").forEach((el) => el.remove());
+		if (tags?.length) tags.forEach((tag) => {
+			const container = doc.createElement("div");
+			container.innerHTML = tag;
+			const el = container.firstElementChild;
+			if (!el) return;
+			if (el.tagName === "SCRIPT") {
+				const script = doc.createElement("script");
+				Array.from(el.attributes).forEach((attr) => script.setAttribute(attr.name, attr.value));
+				script.textContent = el.textContent;
+				script.setAttribute("data-injected", "");
+				doc.head.appendChild(script);
+			} else {
+				el.setAttribute("data-injected", "");
+				doc.head.appendChild(el);
+			}
+		});
+	}
+	setImportMap(imports) {
+		const doc = this.iframe.contentDocument;
+		if (!doc) return;
+		const oldMap = doc.querySelector("script[type=\"importmap\"]");
+		if (oldMap) oldMap.remove();
+		const script = doc.createElement("script");
+		script.type = "importmap";
+		script.textContent = JSON.stringify({ imports: imports || {} });
+		doc.head.insertBefore(script, doc.head.firstChild);
+	}
+};
+function usePreview(options) {
+	const { presets, imports, theme = "light", onLoad, onError, onFetchProgress, onRenderComplete, onConsole } = options || {};
+	const [running, setRunning] = useState(true);
+	const proxyRef = useRef(void 0);
+	const iframeRef = useRef(null);
+	const readyRef = useRef(Promise.withResolvers());
+	const preview = async (...code) => {
+		try {
+			setRunning(true);
+			await readyRef.current.promise;
+			await proxyRef.current?.eval(code);
+		} catch (error) {
+			onError?.(error);
+		}
+	};
+	useEffect(() => {
+		if (iframeRef.current) {
+			const proxy = new PreviewProxy({
+				root: iframeRef.current,
+				defaultTheme: theme,
+				handlers: {
+					on_console: onConsole,
+					on_fetch_progress: onFetchProgress,
+					on_render_complete: () => {
+						onRenderComplete?.();
+						setRunning(false);
+					},
+					on_error: (event) => {
+						onError?.(event.value instanceof Error ? event.value : new Error(event.value));
+					},
+					on_unhandled_rejection: (event) => {
+						onError?.(/* @__PURE__ */ new Error(`Uncaught (in promise): ${event.value}`));
+					}
+				}
+			});
+			iframeRef.current.addEventListener("load", (e) => {
+				readyRef.current.resolve(e.target.contentDocument);
+				onLoad?.(proxy);
+			});
+			proxyRef.current = proxy;
+			return () => proxy.destroy();
+		}
+	}, []);
+	useEffect(() => {
+		readyRef.current.promise.then(() => {
+			proxyRef.current?.changeTheme(theme);
+		});
+	}, [theme]);
+	useEffect(() => {
+		readyRef.current.promise.then(() => {
+			proxyRef.current?.injectTags(presets);
+		});
+	}, [presets?.join("\n")]);
+	useEffect(() => {
+		readyRef.current.promise.then(() => {
+			proxyRef.current?.setImportMap(imports);
+		});
+	}, [JSON.stringify(imports)]);
+	return {
+		iframeRef,
+		proxyRef,
+		readyRef,
+		preview,
+		running
+	};
+}
+
+//#endregion
+//#region node_modules/tailwindcss/index.css?raw
+var tailwindcss_default = "@layer theme, base, components, utilities;\n\n@layer theme {\n  @theme default {\n    --font-sans:\n      ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-serif: ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n    --font-mono:\n      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n\n    --color-red-50: oklch(97.1% 0.013 17.38);\n    --color-red-100: oklch(93.6% 0.032 17.717);\n    --color-red-200: oklch(88.5% 0.062 18.334);\n    --color-red-300: oklch(80.8% 0.114 19.571);\n    --color-red-400: oklch(70.4% 0.191 22.216);\n    --color-red-500: oklch(63.7% 0.237 25.331);\n    --color-red-600: oklch(57.7% 0.245 27.325);\n    --color-red-700: oklch(50.5% 0.213 27.518);\n    --color-red-800: oklch(44.4% 0.177 26.899);\n    --color-red-900: oklch(39.6% 0.141 25.723);\n    --color-red-950: oklch(25.8% 0.092 26.042);\n\n    --color-orange-50: oklch(98% 0.016 73.684);\n    --color-orange-100: oklch(95.4% 0.038 75.164);\n    --color-orange-200: oklch(90.1% 0.076 70.697);\n    --color-orange-300: oklch(83.7% 0.128 66.29);\n    --color-orange-400: oklch(75% 0.183 55.934);\n    --color-orange-500: oklch(70.5% 0.213 47.604);\n    --color-orange-600: oklch(64.6% 0.222 41.116);\n    --color-orange-700: oklch(55.3% 0.195 38.402);\n    --color-orange-800: oklch(47% 0.157 37.304);\n    --color-orange-900: oklch(40.8% 0.123 38.172);\n    --color-orange-950: oklch(26.6% 0.079 36.259);\n\n    --color-amber-50: oklch(98.7% 0.022 95.277);\n    --color-amber-100: oklch(96.2% 0.059 95.617);\n    --color-amber-200: oklch(92.4% 0.12 95.746);\n    --color-amber-300: oklch(87.9% 0.169 91.605);\n    --color-amber-400: oklch(82.8% 0.189 84.429);\n    --color-amber-500: oklch(76.9% 0.188 70.08);\n    --color-amber-600: oklch(66.6% 0.179 58.318);\n    --color-amber-700: oklch(55.5% 0.163 48.998);\n    --color-amber-800: oklch(47.3% 0.137 46.201);\n    --color-amber-900: oklch(41.4% 0.112 45.904);\n    --color-amber-950: oklch(27.9% 0.077 45.635);\n\n    --color-yellow-50: oklch(98.7% 0.026 102.212);\n    --color-yellow-100: oklch(97.3% 0.071 103.193);\n    --color-yellow-200: oklch(94.5% 0.129 101.54);\n    --color-yellow-300: oklch(90.5% 0.182 98.111);\n    --color-yellow-400: oklch(85.2% 0.199 91.936);\n    --color-yellow-500: oklch(79.5% 0.184 86.047);\n    --color-yellow-600: oklch(68.1% 0.162 75.834);\n    --color-yellow-700: oklch(55.4% 0.135 66.442);\n    --color-yellow-800: oklch(47.6% 0.114 61.907);\n    --color-yellow-900: oklch(42.1% 0.095 57.708);\n    --color-yellow-950: oklch(28.6% 0.066 53.813);\n\n    --color-lime-50: oklch(98.6% 0.031 120.757);\n    --color-lime-100: oklch(96.7% 0.067 122.328);\n    --color-lime-200: oklch(93.8% 0.127 124.321);\n    --color-lime-300: oklch(89.7% 0.196 126.665);\n    --color-lime-400: oklch(84.1% 0.238 128.85);\n    --color-lime-500: oklch(76.8% 0.233 130.85);\n    --color-lime-600: oklch(64.8% 0.2 131.684);\n    --color-lime-700: oklch(53.2% 0.157 131.589);\n    --color-lime-800: oklch(45.3% 0.124 130.933);\n    --color-lime-900: oklch(40.5% 0.101 131.063);\n    --color-lime-950: oklch(27.4% 0.072 132.109);\n\n    --color-green-50: oklch(98.2% 0.018 155.826);\n    --color-green-100: oklch(96.2% 0.044 156.743);\n    --color-green-200: oklch(92.5% 0.084 155.995);\n    --color-green-300: oklch(87.1% 0.15 154.449);\n    --color-green-400: oklch(79.2% 0.209 151.711);\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-green-600: oklch(62.7% 0.194 149.214);\n    --color-green-700: oklch(52.7% 0.154 150.069);\n    --color-green-800: oklch(44.8% 0.119 151.328);\n    --color-green-900: oklch(39.3% 0.095 152.535);\n    --color-green-950: oklch(26.6% 0.065 152.934);\n\n    --color-emerald-50: oklch(97.9% 0.021 166.113);\n    --color-emerald-100: oklch(95% 0.052 163.051);\n    --color-emerald-200: oklch(90.5% 0.093 164.15);\n    --color-emerald-300: oklch(84.5% 0.143 164.978);\n    --color-emerald-400: oklch(76.5% 0.177 163.223);\n    --color-emerald-500: oklch(69.6% 0.17 162.48);\n    --color-emerald-600: oklch(59.6% 0.145 163.225);\n    --color-emerald-700: oklch(50.8% 0.118 165.612);\n    --color-emerald-800: oklch(43.2% 0.095 166.913);\n    --color-emerald-900: oklch(37.8% 0.077 168.94);\n    --color-emerald-950: oklch(26.2% 0.051 172.552);\n\n    --color-teal-50: oklch(98.4% 0.014 180.72);\n    --color-teal-100: oklch(95.3% 0.051 180.801);\n    --color-teal-200: oklch(91% 0.096 180.426);\n    --color-teal-300: oklch(85.5% 0.138 181.071);\n    --color-teal-400: oklch(77.7% 0.152 181.912);\n    --color-teal-500: oklch(70.4% 0.14 182.503);\n    --color-teal-600: oklch(60% 0.118 184.704);\n    --color-teal-700: oklch(51.1% 0.096 186.391);\n    --color-teal-800: oklch(43.7% 0.078 188.216);\n    --color-teal-900: oklch(38.6% 0.063 188.416);\n    --color-teal-950: oklch(27.7% 0.046 192.524);\n\n    --color-cyan-50: oklch(98.4% 0.019 200.873);\n    --color-cyan-100: oklch(95.6% 0.045 203.388);\n    --color-cyan-200: oklch(91.7% 0.08 205.041);\n    --color-cyan-300: oklch(86.5% 0.127 207.078);\n    --color-cyan-400: oklch(78.9% 0.154 211.53);\n    --color-cyan-500: oklch(71.5% 0.143 215.221);\n    --color-cyan-600: oklch(60.9% 0.126 221.723);\n    --color-cyan-700: oklch(52% 0.105 223.128);\n    --color-cyan-800: oklch(45% 0.085 224.283);\n    --color-cyan-900: oklch(39.8% 0.07 227.392);\n    --color-cyan-950: oklch(30.2% 0.056 229.695);\n\n    --color-sky-50: oklch(97.7% 0.013 236.62);\n    --color-sky-100: oklch(95.1% 0.026 236.824);\n    --color-sky-200: oklch(90.1% 0.058 230.902);\n    --color-sky-300: oklch(82.8% 0.111 230.318);\n    --color-sky-400: oklch(74.6% 0.16 232.661);\n    --color-sky-500: oklch(68.5% 0.169 237.323);\n    --color-sky-600: oklch(58.8% 0.158 241.966);\n    --color-sky-700: oklch(50% 0.134 242.749);\n    --color-sky-800: oklch(44.3% 0.11 240.79);\n    --color-sky-900: oklch(39.1% 0.09 240.876);\n    --color-sky-950: oklch(29.3% 0.066 243.157);\n\n    --color-blue-50: oklch(97% 0.014 254.604);\n    --color-blue-100: oklch(93.2% 0.032 255.585);\n    --color-blue-200: oklch(88.2% 0.059 254.128);\n    --color-blue-300: oklch(80.9% 0.105 251.813);\n    --color-blue-400: oklch(70.7% 0.165 254.624);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-blue-600: oklch(54.6% 0.245 262.881);\n    --color-blue-700: oklch(48.8% 0.243 264.376);\n    --color-blue-800: oklch(42.4% 0.199 265.638);\n    --color-blue-900: oklch(37.9% 0.146 265.522);\n    --color-blue-950: oklch(28.2% 0.091 267.935);\n\n    --color-indigo-50: oklch(96.2% 0.018 272.314);\n    --color-indigo-100: oklch(93% 0.034 272.788);\n    --color-indigo-200: oklch(87% 0.065 274.039);\n    --color-indigo-300: oklch(78.5% 0.115 274.713);\n    --color-indigo-400: oklch(67.3% 0.182 276.935);\n    --color-indigo-500: oklch(58.5% 0.233 277.117);\n    --color-indigo-600: oklch(51.1% 0.262 276.966);\n    --color-indigo-700: oklch(45.7% 0.24 277.023);\n    --color-indigo-800: oklch(39.8% 0.195 277.366);\n    --color-indigo-900: oklch(35.9% 0.144 278.697);\n    --color-indigo-950: oklch(25.7% 0.09 281.288);\n\n    --color-violet-50: oklch(96.9% 0.016 293.756);\n    --color-violet-100: oklch(94.3% 0.029 294.588);\n    --color-violet-200: oklch(89.4% 0.057 293.283);\n    --color-violet-300: oklch(81.1% 0.111 293.571);\n    --color-violet-400: oklch(70.2% 0.183 293.541);\n    --color-violet-500: oklch(60.6% 0.25 292.717);\n    --color-violet-600: oklch(54.1% 0.281 293.009);\n    --color-violet-700: oklch(49.1% 0.27 292.581);\n    --color-violet-800: oklch(43.2% 0.232 292.759);\n    --color-violet-900: oklch(38% 0.189 293.745);\n    --color-violet-950: oklch(28.3% 0.141 291.089);\n\n    --color-purple-50: oklch(97.7% 0.014 308.299);\n    --color-purple-100: oklch(94.6% 0.033 307.174);\n    --color-purple-200: oklch(90.2% 0.063 306.703);\n    --color-purple-300: oklch(82.7% 0.119 306.383);\n    --color-purple-400: oklch(71.4% 0.203 305.504);\n    --color-purple-500: oklch(62.7% 0.265 303.9);\n    --color-purple-600: oklch(55.8% 0.288 302.321);\n    --color-purple-700: oklch(49.6% 0.265 301.924);\n    --color-purple-800: oklch(43.8% 0.218 303.724);\n    --color-purple-900: oklch(38.1% 0.176 304.987);\n    --color-purple-950: oklch(29.1% 0.149 302.717);\n\n    --color-fuchsia-50: oklch(97.7% 0.017 320.058);\n    --color-fuchsia-100: oklch(95.2% 0.037 318.852);\n    --color-fuchsia-200: oklch(90.3% 0.076 319.62);\n    --color-fuchsia-300: oklch(83.3% 0.145 321.434);\n    --color-fuchsia-400: oklch(74% 0.238 322.16);\n    --color-fuchsia-500: oklch(66.7% 0.295 322.15);\n    --color-fuchsia-600: oklch(59.1% 0.293 322.896);\n    --color-fuchsia-700: oklch(51.8% 0.253 323.949);\n    --color-fuchsia-800: oklch(45.2% 0.211 324.591);\n    --color-fuchsia-900: oklch(40.1% 0.17 325.612);\n    --color-fuchsia-950: oklch(29.3% 0.136 325.661);\n\n    --color-pink-50: oklch(97.1% 0.014 343.198);\n    --color-pink-100: oklch(94.8% 0.028 342.258);\n    --color-pink-200: oklch(89.9% 0.061 343.231);\n    --color-pink-300: oklch(82.3% 0.12 346.018);\n    --color-pink-400: oklch(71.8% 0.202 349.761);\n    --color-pink-500: oklch(65.6% 0.241 354.308);\n    --color-pink-600: oklch(59.2% 0.249 0.584);\n    --color-pink-700: oklch(52.5% 0.223 3.958);\n    --color-pink-800: oklch(45.9% 0.187 3.815);\n    --color-pink-900: oklch(40.8% 0.153 2.432);\n    --color-pink-950: oklch(28.4% 0.109 3.907);\n\n    --color-rose-50: oklch(96.9% 0.015 12.422);\n    --color-rose-100: oklch(94.1% 0.03 12.58);\n    --color-rose-200: oklch(89.2% 0.058 10.001);\n    --color-rose-300: oklch(81% 0.117 11.638);\n    --color-rose-400: oklch(71.2% 0.194 13.428);\n    --color-rose-500: oklch(64.5% 0.246 16.439);\n    --color-rose-600: oklch(58.6% 0.253 17.585);\n    --color-rose-700: oklch(51.4% 0.222 16.935);\n    --color-rose-800: oklch(45.5% 0.188 13.697);\n    --color-rose-900: oklch(41% 0.159 10.272);\n    --color-rose-950: oklch(27.1% 0.105 12.094);\n\n    --color-slate-50: oklch(98.4% 0.003 247.858);\n    --color-slate-100: oklch(96.8% 0.007 247.896);\n    --color-slate-200: oklch(92.9% 0.013 255.508);\n    --color-slate-300: oklch(86.9% 0.022 252.894);\n    --color-slate-400: oklch(70.4% 0.04 256.788);\n    --color-slate-500: oklch(55.4% 0.046 257.417);\n    --color-slate-600: oklch(44.6% 0.043 257.281);\n    --color-slate-700: oklch(37.2% 0.044 257.287);\n    --color-slate-800: oklch(27.9% 0.041 260.031);\n    --color-slate-900: oklch(20.8% 0.042 265.755);\n    --color-slate-950: oklch(12.9% 0.042 264.695);\n\n    --color-gray-50: oklch(98.5% 0.002 247.839);\n    --color-gray-100: oklch(96.7% 0.003 264.542);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-700: oklch(37.3% 0.034 259.733);\n    --color-gray-800: oklch(27.8% 0.033 256.848);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-gray-950: oklch(13% 0.028 261.692);\n\n    --color-zinc-50: oklch(98.5% 0 0);\n    --color-zinc-100: oklch(96.7% 0.001 286.375);\n    --color-zinc-200: oklch(92% 0.004 286.32);\n    --color-zinc-300: oklch(87.1% 0.006 286.286);\n    --color-zinc-400: oklch(70.5% 0.015 286.067);\n    --color-zinc-500: oklch(55.2% 0.016 285.938);\n    --color-zinc-600: oklch(44.2% 0.017 285.786);\n    --color-zinc-700: oklch(37% 0.013 285.805);\n    --color-zinc-800: oklch(27.4% 0.006 286.033);\n    --color-zinc-900: oklch(21% 0.006 285.885);\n    --color-zinc-950: oklch(14.1% 0.005 285.823);\n\n    --color-neutral-50: oklch(98.5% 0 0);\n    --color-neutral-100: oklch(97% 0 0);\n    --color-neutral-200: oklch(92.2% 0 0);\n    --color-neutral-300: oklch(87% 0 0);\n    --color-neutral-400: oklch(70.8% 0 0);\n    --color-neutral-500: oklch(55.6% 0 0);\n    --color-neutral-600: oklch(43.9% 0 0);\n    --color-neutral-700: oklch(37.1% 0 0);\n    --color-neutral-800: oklch(26.9% 0 0);\n    --color-neutral-900: oklch(20.5% 0 0);\n    --color-neutral-950: oklch(14.5% 0 0);\n\n    --color-stone-50: oklch(98.5% 0.001 106.423);\n    --color-stone-100: oklch(97% 0.001 106.424);\n    --color-stone-200: oklch(92.3% 0.003 48.717);\n    --color-stone-300: oklch(86.9% 0.005 56.366);\n    --color-stone-400: oklch(70.9% 0.01 56.259);\n    --color-stone-500: oklch(55.3% 0.013 58.071);\n    --color-stone-600: oklch(44.4% 0.011 73.639);\n    --color-stone-700: oklch(37.4% 0.01 67.558);\n    --color-stone-800: oklch(26.8% 0.007 34.298);\n    --color-stone-900: oklch(21.6% 0.006 56.043);\n    --color-stone-950: oklch(14.7% 0.004 49.25);\n\n    --color-black: #000;\n    --color-white: #fff;\n\n    --spacing: 0.25rem;\n\n    --breakpoint-sm: 40rem;\n    --breakpoint-md: 48rem;\n    --breakpoint-lg: 64rem;\n    --breakpoint-xl: 80rem;\n    --breakpoint-2xl: 96rem;\n\n    --container-3xs: 16rem;\n    --container-2xs: 18rem;\n    --container-xs: 20rem;\n    --container-sm: 24rem;\n    --container-md: 28rem;\n    --container-lg: 32rem;\n    --container-xl: 36rem;\n    --container-2xl: 42rem;\n    --container-3xl: 48rem;\n    --container-4xl: 56rem;\n    --container-5xl: 64rem;\n    --container-6xl: 72rem;\n    --container-7xl: 80rem;\n\n    --text-xs: 0.75rem;\n    --text-xs--line-height: calc(1 / 0.75);\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --text-4xl: 2.25rem;\n    --text-4xl--line-height: calc(2.5 / 2.25);\n    --text-5xl: 3rem;\n    --text-5xl--line-height: 1;\n    --text-6xl: 3.75rem;\n    --text-6xl--line-height: 1;\n    --text-7xl: 4.5rem;\n    --text-7xl--line-height: 1;\n    --text-8xl: 6rem;\n    --text-8xl--line-height: 1;\n    --text-9xl: 8rem;\n    --text-9xl--line-height: 1;\n\n    --font-weight-thin: 100;\n    --font-weight-extralight: 200;\n    --font-weight-light: 300;\n    --font-weight-normal: 400;\n    --font-weight-medium: 500;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --font-weight-extrabold: 800;\n    --font-weight-black: 900;\n\n    --tracking-tighter: -0.05em;\n    --tracking-tight: -0.025em;\n    --tracking-normal: 0em;\n    --tracking-wide: 0.025em;\n    --tracking-wider: 0.05em;\n    --tracking-widest: 0.1em;\n\n    --leading-tight: 1.25;\n    --leading-snug: 1.375;\n    --leading-normal: 1.5;\n    --leading-relaxed: 1.625;\n    --leading-loose: 2;\n\n    --radius-xs: 0.125rem;\n    --radius-sm: 0.25rem;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --radius-xl: 0.75rem;\n    --radius-2xl: 1rem;\n    --radius-3xl: 1.5rem;\n    --radius-4xl: 2rem;\n\n    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);\n    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n    --shadow-md:\n      0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n    --shadow-lg:\n      0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n    --shadow-xl:\n      0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n    --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);\n    --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);\n    --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);\n\n    --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);\n    --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);\n    --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n    --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);\n    --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);\n    --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n\n    --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);\n    --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);\n    --text-shadow-sm:\n      0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075),\n      0px 2px 2px rgb(0 0 0 / 0.075);\n    --text-shadow-md:\n      0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1),\n      0px 2px 4px rgb(0 0 0 / 0.1);\n    --text-shadow-lg:\n      0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1),\n      0px 4px 8px rgb(0 0 0 / 0.1);\n\n    --ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --ease-out: cubic-bezier(0, 0, 0.2, 1);\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\n    --animate-spin: spin 1s linear infinite;\n    --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n    --animate-bounce: bounce 1s infinite;\n\n    @keyframes spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes ping {\n      75%,\n      100% {\n        transform: scale(2);\n        opacity: 0;\n      }\n    }\n\n    @keyframes pulse {\n      50% {\n        opacity: 0.5;\n      }\n    }\n\n    @keyframes bounce {\n      0%,\n      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    --blur-xs: 4px;\n    --blur-sm: 8px;\n    --blur-md: 12px;\n    --blur-lg: 16px;\n    --blur-xl: 24px;\n    --blur-2xl: 40px;\n    --blur-3xl: 64px;\n\n    --perspective-dramatic: 100px;\n    --perspective-near: 300px;\n    --perspective-normal: 500px;\n    --perspective-midrange: 800px;\n    --perspective-distant: 1200px;\n\n    --aspect-video: 16 / 9;\n\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: --theme(--font-sans, initial);\n    --default-font-feature-settings: --theme(\n      --font-sans--font-feature-settings,\n      initial\n    );\n    --default-font-variation-settings: --theme(\n      --font-sans--font-variation-settings,\n      initial\n    );\n    --default-mono-font-family: --theme(--font-mono, initial);\n    --default-mono-font-feature-settings: --theme(\n      --font-mono--font-feature-settings,\n      initial\n    );\n    --default-mono-font-variation-settings: --theme(\n      --font-mono--font-variation-settings,\n      initial\n    );\n  }\n\n  /* Deprecated */\n  @theme default inline reference {\n    --blur: 8px;\n    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n    --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);\n    --radius: 0.25rem;\n    --max-width-prose: 65ch;\n  }\n}\n\n@layer base {\n  /*\n  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n  2. Remove default margins and padding\n  3. Reset all borders.\n*/\n\n  *,\n  ::after,\n  ::before,\n  ::backdrop,\n  ::file-selector-button {\n    box-sizing: border-box; /* 1 */\n    margin: 0; /* 2 */\n    padding: 0; /* 2 */\n    border: 0 solid; /* 3 */\n  }\n\n  /*\n  1. Use a consistent sensible line-height in all browsers.\n  2. Prevent adjustments of font size after orientation changes in iOS.\n  3. Use a more readable tab size.\n  4. Use the user's configured `sans` font-family by default.\n  5. Use the user's configured `sans` font-feature-settings by default.\n  6. Use the user's configured `sans` font-variation-settings by default.\n  7. Disable tap highlights on iOS.\n*/\n\n  html,\n  :host {\n    line-height: 1.5; /* 1 */\n    -webkit-text-size-adjust: 100%; /* 2 */\n    tab-size: 4; /* 3 */\n    font-family: --theme(\n      --default-font-family,\n      ui-sans-serif,\n      system-ui,\n      sans-serif,\n      \"Apple Color Emoji\",\n      \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\",\n      \"Noto Color Emoji\"\n    ); /* 4 */\n    font-feature-settings: --theme(\n      --default-font-feature-settings,\n      normal\n    ); /* 5 */\n    font-variation-settings: --theme(\n      --default-font-variation-settings,\n      normal\n    ); /* 6 */\n    -webkit-tap-highlight-color: transparent; /* 7 */\n  }\n\n  /*\n  1. Add the correct height in Firefox.\n  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n  3. Reset the default border style to a 1px solid border.\n*/\n\n  hr {\n    height: 0; /* 1 */\n    color: inherit; /* 2 */\n    border-top-width: 1px; /* 3 */\n  }\n\n  /*\n  Add the correct text decoration in Chrome, Edge, and Safari.\n*/\n\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n\n  /*\n  Remove the default font size and weight for headings.\n*/\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n\n  /*\n  Reset links to optimize for opt-in styling instead of opt-out.\n*/\n\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n\n  /*\n  Add the correct font weight in Edge and Safari.\n*/\n\n  b,\n  strong {\n    font-weight: bolder;\n  }\n\n  /*\n  1. Use the user's configured `mono` font-family by default.\n  2. Use the user's configured `mono` font-feature-settings by default.\n  3. Use the user's configured `mono` font-variation-settings by default.\n  4. Correct the odd `em` font sizing in all browsers.\n*/\n\n  code,\n  kbd,\n  samp,\n  pre {\n    font-family: --theme(\n      --default-mono-font-family,\n      ui-monospace,\n      SFMono-Regular,\n      Menlo,\n      Monaco,\n      Consolas,\n      \"Liberation Mono\",\n      \"Courier New\",\n      monospace\n    ); /* 1 */\n    font-feature-settings: --theme(\n      --default-mono-font-feature-settings,\n      normal\n    ); /* 2 */\n    font-variation-settings: --theme(\n      --default-mono-font-variation-settings,\n      normal\n    ); /* 3 */\n    font-size: 1em; /* 4 */\n  }\n\n  /*\n  Add the correct font size in all browsers.\n*/\n\n  small {\n    font-size: 80%;\n  }\n\n  /*\n  Prevent `sub` and `sup` elements from affecting the line height in all browsers.\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  /*\n  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n  3. Remove gaps between table borders by default.\n*/\n\n  table {\n    text-indent: 0; /* 1 */\n    border-color: inherit; /* 2 */\n    border-collapse: collapse; /* 3 */\n  }\n\n  /*\n  Use the modern Firefox focus style for all focusable elements.\n*/\n\n  :-moz-focusring {\n    outline: auto;\n  }\n\n  /*\n  Add the correct vertical alignment in Chrome and Firefox.\n*/\n\n  progress {\n    vertical-align: baseline;\n  }\n\n  /*\n  Add the correct display in Chrome and Safari.\n*/\n\n  summary {\n    display: list-item;\n  }\n\n  /*\n  Make lists unstyled by default.\n*/\n\n  ol,\n  ul,\n  menu {\n    list-style: none;\n  }\n\n  /*\n  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n      This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\n  img,\n  svg,\n  video,\n  canvas,\n  audio,\n  iframe,\n  embed,\n  object {\n    display: block; /* 1 */\n    vertical-align: middle; /* 2 */\n  }\n\n  /*\n  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\n  img,\n  video {\n    max-width: 100%;\n    height: auto;\n  }\n\n  /*\n  1. Inherit font styles in all browsers.\n  2. Remove border radius in all browsers.\n  3. Remove background color in all browsers.\n  4. Ensure consistent opacity for disabled states in all browsers.\n*/\n\n  button,\n  input,\n  select,\n  optgroup,\n  textarea,\n  ::file-selector-button {\n    font: inherit; /* 1 */\n    font-feature-settings: inherit; /* 1 */\n    font-variation-settings: inherit; /* 1 */\n    letter-spacing: inherit; /* 1 */\n    color: inherit; /* 1 */\n    border-radius: 0; /* 2 */\n    background-color: transparent; /* 3 */\n    opacity: 1; /* 4 */\n  }\n\n  /*\n  Restore default font weight.\n*/\n\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n\n  /*\n  Restore indentation.\n*/\n\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n\n  /*\n  Restore space after button.\n*/\n\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n\n  /*\n  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n*/\n\n  ::placeholder {\n    opacity: 1;\n  }\n\n  /*\n  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not\n  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)\n*/\n\n  @supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or\n    (contain-intrinsic-size: 1px) /* Safari 17+ */ {\n    ::placeholder {\n      color: color-mix(in oklab, currentcolor 50%, transparent);\n    }\n  }\n\n  /*\n  Prevent resizing textareas horizontally by default.\n*/\n\n  textarea {\n    resize: vertical;\n  }\n\n  /*\n  Remove the inner padding in Chrome and Safari on macOS.\n*/\n\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n\n  /*\n  1. Ensure date/time inputs have the same height when empty in iOS Safari.\n  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.\n*/\n\n  ::-webkit-date-and-time-value {\n    min-height: 1lh; /* 1 */\n    text-align: inherit; /* 2 */\n  }\n\n  /*\n  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.\n*/\n\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n\n  /*\n  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.\n*/\n\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n\n  ::-webkit-datetime-edit,\n  ::-webkit-datetime-edit-year-field,\n  ::-webkit-datetime-edit-month-field,\n  ::-webkit-datetime-edit-day-field,\n  ::-webkit-datetime-edit-hour-field,\n  ::-webkit-datetime-edit-minute-field,\n  ::-webkit-datetime-edit-second-field,\n  ::-webkit-datetime-edit-millisecond-field,\n  ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n\n  /*\n  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)\n*/\n\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n\n  /*\n  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n\n  /*\n  Correct the inability to style the border radius in iOS Safari.\n*/\n\n  button,\n  input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]),\n  ::file-selector-button {\n    appearance: button;\n  }\n\n  /*\n  Correct the cursor style of increment and decrement buttons in Safari.\n*/\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    height: auto;\n  }\n\n  /*\n  Make elements with the HTML hidden attribute stay hidden by default.\n*/\n\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n\n@layer utilities {\n  @tailwind utilities;\n}\n";
+
+//#endregion
+//#region node_modules/tailwindcss/preflight.css?raw
+var preflight_default = "/*\n  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n  2. Remove default margins and padding\n  3. Reset all borders.\n*/\n\n*,\n::after,\n::before,\n::backdrop,\n::file-selector-button {\n  box-sizing: border-box; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 2 */\n  border: 0 solid; /* 3 */\n}\n\n/*\n  1. Use a consistent sensible line-height in all browsers.\n  2. Prevent adjustments of font size after orientation changes in iOS.\n  3. Use a more readable tab size.\n  4. Use the user's configured `sans` font-family by default.\n  5. Use the user's configured `sans` font-feature-settings by default.\n  6. Use the user's configured `sans` font-variation-settings by default.\n  7. Disable tap highlights on iOS.\n*/\n\nhtml,\n:host {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  tab-size: 4; /* 3 */\n  font-family: --theme(\n    --default-font-family,\n    ui-sans-serif,\n    system-ui,\n    sans-serif,\n    'Apple Color Emoji',\n    'Segoe UI Emoji',\n    'Segoe UI Symbol',\n    'Noto Color Emoji'\n  ); /* 4 */\n  font-feature-settings: --theme(--default-font-feature-settings, normal); /* 5 */\n  font-variation-settings: --theme(--default-font-variation-settings, normal); /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n\n/*\n  1. Add the correct height in Firefox.\n  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n  3. Reset the default border style to a 1px solid border.\n*/\n\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n\n/*\n  Add the correct text decoration in Chrome, Edge, and Safari.\n*/\n\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n  text-decoration: underline dotted;\n}\n\n/*\n  Remove the default font size and weight for headings.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n/*\n  Reset links to optimize for opt-in styling instead of opt-out.\n*/\n\na {\n  color: inherit;\n  -webkit-text-decoration: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  Add the correct font weight in Edge and Safari.\n*/\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/*\n  1. Use the user's configured `mono` font-family by default.\n  2. Use the user's configured `mono` font-feature-settings by default.\n  3. Use the user's configured `mono` font-variation-settings by default.\n  4. Correct the odd `em` font sizing in all browsers.\n*/\n\ncode,\nkbd,\nsamp,\npre {\n  font-family: --theme(\n    --default-mono-font-family,\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    'Liberation Mono',\n    'Courier New',\n    monospace\n  ); /* 1 */\n  font-feature-settings: --theme(--default-mono-font-feature-settings, normal); /* 2 */\n  font-variation-settings: --theme(--default-mono-font-variation-settings, normal); /* 3 */\n  font-size: 1em; /* 4 */\n}\n\n/*\n  Add the correct font size in all browsers.\n*/\n\nsmall {\n  font-size: 80%;\n}\n\n/*\n  Prevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/*\n  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n  3. Remove gaps between table borders by default.\n*/\n\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n\n/*\n  Use the modern Firefox focus style for all focusable elements.\n*/\n\n:-moz-focusring {\n  outline: auto;\n}\n\n/*\n  Add the correct vertical alignment in Chrome and Firefox.\n*/\n\nprogress {\n  vertical-align: baseline;\n}\n\n/*\n  Add the correct display in Chrome and Safari.\n*/\n\nsummary {\n  display: list-item;\n}\n\n/*\n  Make lists unstyled by default.\n*/\n\nol,\nul,\nmenu {\n  list-style: none;\n}\n\n/*\n  1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n  2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n      This can trigger a poorly considered lint error in some tools but is included by design.\n*/\n\nimg,\nsvg,\nvideo,\ncanvas,\naudio,\niframe,\nembed,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n\n/*\n  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\n\nimg,\nvideo {\n  max-width: 100%;\n  height: auto;\n}\n\n/*\n  1. Inherit font styles in all browsers.\n  2. Remove border radius in all browsers.\n  3. Remove background color in all browsers.\n  4. Ensure consistent opacity for disabled states in all browsers.\n*/\n\nbutton,\ninput,\nselect,\noptgroup,\ntextarea,\n::file-selector-button {\n  font: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  border-radius: 0; /* 2 */\n  background-color: transparent; /* 3 */\n  opacity: 1; /* 4 */\n}\n\n/*\n  Restore default font weight.\n*/\n\n:where(select:is([multiple], [size])) optgroup {\n  font-weight: bolder;\n}\n\n/*\n  Restore indentation.\n*/\n\n:where(select:is([multiple], [size])) optgroup option {\n  padding-inline-start: 20px;\n}\n\n/*\n  Restore space after button.\n*/\n\n::file-selector-button {\n  margin-inline-end: 4px;\n}\n\n/*\n  Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n*/\n\n::placeholder {\n  opacity: 1;\n}\n\n/*\n  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not\n  crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)\n*/\n\n@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or\n  (contain-intrinsic-size: 1px) /* Safari 17+ */ {\n  ::placeholder {\n    color: color-mix(in oklab, currentcolor 50%, transparent);\n  }\n}\n\n/*\n  Prevent resizing textareas horizontally by default.\n*/\n\ntextarea {\n  resize: vertical;\n}\n\n/*\n  Remove the inner padding in Chrome and Safari on macOS.\n*/\n\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/*\n  1. Ensure date/time inputs have the same height when empty in iOS Safari.\n  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.\n*/\n\n::-webkit-date-and-time-value {\n  min-height: 1lh; /* 1 */\n  text-align: inherit; /* 2 */\n}\n\n/*\n  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.\n*/\n\n::-webkit-datetime-edit {\n  display: inline-flex;\n}\n\n/*\n  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.\n*/\n\n::-webkit-datetime-edit-fields-wrapper {\n  padding: 0;\n}\n\n::-webkit-datetime-edit,\n::-webkit-datetime-edit-year-field,\n::-webkit-datetime-edit-month-field,\n::-webkit-datetime-edit-day-field,\n::-webkit-datetime-edit-hour-field,\n::-webkit-datetime-edit-minute-field,\n::-webkit-datetime-edit-second-field,\n::-webkit-datetime-edit-millisecond-field,\n::-webkit-datetime-edit-meridiem-field {\n  padding-block: 0;\n}\n\n/*\n  Center dropdown marker shown on inputs with paired `<datalist>`s in Chrome. (https://github.com/tailwindlabs/tailwindcss/issues/18499)\n*/\n\n::-webkit-calendar-picker-indicator {\n  line-height: 1;\n}\n\n/*\n  Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n\n:-moz-ui-invalid {\n  box-shadow: none;\n}\n\n/*\n  Correct the inability to style the border radius in iOS Safari.\n*/\n\nbutton,\ninput:where([type='button'], [type='reset'], [type='submit']),\n::file-selector-button {\n  appearance: button;\n}\n\n/*\n  Correct the cursor style of increment and decrement buttons in Safari.\n*/\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/*\n  Make elements with the HTML hidden attribute stay hidden by default.\n*/\n\n[hidden]:where(:not([hidden='until-found'])) {\n  display: none !important;\n}\n";
+
+//#endregion
+//#region node_modules/tailwindcss/theme.css?raw
+var theme_default = "@theme default {\n  --font-sans:\n    ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n    'Noto Color Emoji';\n  --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;\n  --font-mono:\n    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',\n    monospace;\n\n  --color-red-50: oklch(97.1% 0.013 17.38);\n  --color-red-100: oklch(93.6% 0.032 17.717);\n  --color-red-200: oklch(88.5% 0.062 18.334);\n  --color-red-300: oklch(80.8% 0.114 19.571);\n  --color-red-400: oklch(70.4% 0.191 22.216);\n  --color-red-500: oklch(63.7% 0.237 25.331);\n  --color-red-600: oklch(57.7% 0.245 27.325);\n  --color-red-700: oklch(50.5% 0.213 27.518);\n  --color-red-800: oklch(44.4% 0.177 26.899);\n  --color-red-900: oklch(39.6% 0.141 25.723);\n  --color-red-950: oklch(25.8% 0.092 26.042);\n\n  --color-orange-50: oklch(98% 0.016 73.684);\n  --color-orange-100: oklch(95.4% 0.038 75.164);\n  --color-orange-200: oklch(90.1% 0.076 70.697);\n  --color-orange-300: oklch(83.7% 0.128 66.29);\n  --color-orange-400: oklch(75% 0.183 55.934);\n  --color-orange-500: oklch(70.5% 0.213 47.604);\n  --color-orange-600: oklch(64.6% 0.222 41.116);\n  --color-orange-700: oklch(55.3% 0.195 38.402);\n  --color-orange-800: oklch(47% 0.157 37.304);\n  --color-orange-900: oklch(40.8% 0.123 38.172);\n  --color-orange-950: oklch(26.6% 0.079 36.259);\n\n  --color-amber-50: oklch(98.7% 0.022 95.277);\n  --color-amber-100: oklch(96.2% 0.059 95.617);\n  --color-amber-200: oklch(92.4% 0.12 95.746);\n  --color-amber-300: oklch(87.9% 0.169 91.605);\n  --color-amber-400: oklch(82.8% 0.189 84.429);\n  --color-amber-500: oklch(76.9% 0.188 70.08);\n  --color-amber-600: oklch(66.6% 0.179 58.318);\n  --color-amber-700: oklch(55.5% 0.163 48.998);\n  --color-amber-800: oklch(47.3% 0.137 46.201);\n  --color-amber-900: oklch(41.4% 0.112 45.904);\n  --color-amber-950: oklch(27.9% 0.077 45.635);\n\n  --color-yellow-50: oklch(98.7% 0.026 102.212);\n  --color-yellow-100: oklch(97.3% 0.071 103.193);\n  --color-yellow-200: oklch(94.5% 0.129 101.54);\n  --color-yellow-300: oklch(90.5% 0.182 98.111);\n  --color-yellow-400: oklch(85.2% 0.199 91.936);\n  --color-yellow-500: oklch(79.5% 0.184 86.047);\n  --color-yellow-600: oklch(68.1% 0.162 75.834);\n  --color-yellow-700: oklch(55.4% 0.135 66.442);\n  --color-yellow-800: oklch(47.6% 0.114 61.907);\n  --color-yellow-900: oklch(42.1% 0.095 57.708);\n  --color-yellow-950: oklch(28.6% 0.066 53.813);\n\n  --color-lime-50: oklch(98.6% 0.031 120.757);\n  --color-lime-100: oklch(96.7% 0.067 122.328);\n  --color-lime-200: oklch(93.8% 0.127 124.321);\n  --color-lime-300: oklch(89.7% 0.196 126.665);\n  --color-lime-400: oklch(84.1% 0.238 128.85);\n  --color-lime-500: oklch(76.8% 0.233 130.85);\n  --color-lime-600: oklch(64.8% 0.2 131.684);\n  --color-lime-700: oklch(53.2% 0.157 131.589);\n  --color-lime-800: oklch(45.3% 0.124 130.933);\n  --color-lime-900: oklch(40.5% 0.101 131.063);\n  --color-lime-950: oklch(27.4% 0.072 132.109);\n\n  --color-green-50: oklch(98.2% 0.018 155.826);\n  --color-green-100: oklch(96.2% 0.044 156.743);\n  --color-green-200: oklch(92.5% 0.084 155.995);\n  --color-green-300: oklch(87.1% 0.15 154.449);\n  --color-green-400: oklch(79.2% 0.209 151.711);\n  --color-green-500: oklch(72.3% 0.219 149.579);\n  --color-green-600: oklch(62.7% 0.194 149.214);\n  --color-green-700: oklch(52.7% 0.154 150.069);\n  --color-green-800: oklch(44.8% 0.119 151.328);\n  --color-green-900: oklch(39.3% 0.095 152.535);\n  --color-green-950: oklch(26.6% 0.065 152.934);\n\n  --color-emerald-50: oklch(97.9% 0.021 166.113);\n  --color-emerald-100: oklch(95% 0.052 163.051);\n  --color-emerald-200: oklch(90.5% 0.093 164.15);\n  --color-emerald-300: oklch(84.5% 0.143 164.978);\n  --color-emerald-400: oklch(76.5% 0.177 163.223);\n  --color-emerald-500: oklch(69.6% 0.17 162.48);\n  --color-emerald-600: oklch(59.6% 0.145 163.225);\n  --color-emerald-700: oklch(50.8% 0.118 165.612);\n  --color-emerald-800: oklch(43.2% 0.095 166.913);\n  --color-emerald-900: oklch(37.8% 0.077 168.94);\n  --color-emerald-950: oklch(26.2% 0.051 172.552);\n\n  --color-teal-50: oklch(98.4% 0.014 180.72);\n  --color-teal-100: oklch(95.3% 0.051 180.801);\n  --color-teal-200: oklch(91% 0.096 180.426);\n  --color-teal-300: oklch(85.5% 0.138 181.071);\n  --color-teal-400: oklch(77.7% 0.152 181.912);\n  --color-teal-500: oklch(70.4% 0.14 182.503);\n  --color-teal-600: oklch(60% 0.118 184.704);\n  --color-teal-700: oklch(51.1% 0.096 186.391);\n  --color-teal-800: oklch(43.7% 0.078 188.216);\n  --color-teal-900: oklch(38.6% 0.063 188.416);\n  --color-teal-950: oklch(27.7% 0.046 192.524);\n\n  --color-cyan-50: oklch(98.4% 0.019 200.873);\n  --color-cyan-100: oklch(95.6% 0.045 203.388);\n  --color-cyan-200: oklch(91.7% 0.08 205.041);\n  --color-cyan-300: oklch(86.5% 0.127 207.078);\n  --color-cyan-400: oklch(78.9% 0.154 211.53);\n  --color-cyan-500: oklch(71.5% 0.143 215.221);\n  --color-cyan-600: oklch(60.9% 0.126 221.723);\n  --color-cyan-700: oklch(52% 0.105 223.128);\n  --color-cyan-800: oklch(45% 0.085 224.283);\n  --color-cyan-900: oklch(39.8% 0.07 227.392);\n  --color-cyan-950: oklch(30.2% 0.056 229.695);\n\n  --color-sky-50: oklch(97.7% 0.013 236.62);\n  --color-sky-100: oklch(95.1% 0.026 236.824);\n  --color-sky-200: oklch(90.1% 0.058 230.902);\n  --color-sky-300: oklch(82.8% 0.111 230.318);\n  --color-sky-400: oklch(74.6% 0.16 232.661);\n  --color-sky-500: oklch(68.5% 0.169 237.323);\n  --color-sky-600: oklch(58.8% 0.158 241.966);\n  --color-sky-700: oklch(50% 0.134 242.749);\n  --color-sky-800: oklch(44.3% 0.11 240.79);\n  --color-sky-900: oklch(39.1% 0.09 240.876);\n  --color-sky-950: oklch(29.3% 0.066 243.157);\n\n  --color-blue-50: oklch(97% 0.014 254.604);\n  --color-blue-100: oklch(93.2% 0.032 255.585);\n  --color-blue-200: oklch(88.2% 0.059 254.128);\n  --color-blue-300: oklch(80.9% 0.105 251.813);\n  --color-blue-400: oklch(70.7% 0.165 254.624);\n  --color-blue-500: oklch(62.3% 0.214 259.815);\n  --color-blue-600: oklch(54.6% 0.245 262.881);\n  --color-blue-700: oklch(48.8% 0.243 264.376);\n  --color-blue-800: oklch(42.4% 0.199 265.638);\n  --color-blue-900: oklch(37.9% 0.146 265.522);\n  --color-blue-950: oklch(28.2% 0.091 267.935);\n\n  --color-indigo-50: oklch(96.2% 0.018 272.314);\n  --color-indigo-100: oklch(93% 0.034 272.788);\n  --color-indigo-200: oklch(87% 0.065 274.039);\n  --color-indigo-300: oklch(78.5% 0.115 274.713);\n  --color-indigo-400: oklch(67.3% 0.182 276.935);\n  --color-indigo-500: oklch(58.5% 0.233 277.117);\n  --color-indigo-600: oklch(51.1% 0.262 276.966);\n  --color-indigo-700: oklch(45.7% 0.24 277.023);\n  --color-indigo-800: oklch(39.8% 0.195 277.366);\n  --color-indigo-900: oklch(35.9% 0.144 278.697);\n  --color-indigo-950: oklch(25.7% 0.09 281.288);\n\n  --color-violet-50: oklch(96.9% 0.016 293.756);\n  --color-violet-100: oklch(94.3% 0.029 294.588);\n  --color-violet-200: oklch(89.4% 0.057 293.283);\n  --color-violet-300: oklch(81.1% 0.111 293.571);\n  --color-violet-400: oklch(70.2% 0.183 293.541);\n  --color-violet-500: oklch(60.6% 0.25 292.717);\n  --color-violet-600: oklch(54.1% 0.281 293.009);\n  --color-violet-700: oklch(49.1% 0.27 292.581);\n  --color-violet-800: oklch(43.2% 0.232 292.759);\n  --color-violet-900: oklch(38% 0.189 293.745);\n  --color-violet-950: oklch(28.3% 0.141 291.089);\n\n  --color-purple-50: oklch(97.7% 0.014 308.299);\n  --color-purple-100: oklch(94.6% 0.033 307.174);\n  --color-purple-200: oklch(90.2% 0.063 306.703);\n  --color-purple-300: oklch(82.7% 0.119 306.383);\n  --color-purple-400: oklch(71.4% 0.203 305.504);\n  --color-purple-500: oklch(62.7% 0.265 303.9);\n  --color-purple-600: oklch(55.8% 0.288 302.321);\n  --color-purple-700: oklch(49.6% 0.265 301.924);\n  --color-purple-800: oklch(43.8% 0.218 303.724);\n  --color-purple-900: oklch(38.1% 0.176 304.987);\n  --color-purple-950: oklch(29.1% 0.149 302.717);\n\n  --color-fuchsia-50: oklch(97.7% 0.017 320.058);\n  --color-fuchsia-100: oklch(95.2% 0.037 318.852);\n  --color-fuchsia-200: oklch(90.3% 0.076 319.62);\n  --color-fuchsia-300: oklch(83.3% 0.145 321.434);\n  --color-fuchsia-400: oklch(74% 0.238 322.16);\n  --color-fuchsia-500: oklch(66.7% 0.295 322.15);\n  --color-fuchsia-600: oklch(59.1% 0.293 322.896);\n  --color-fuchsia-700: oklch(51.8% 0.253 323.949);\n  --color-fuchsia-800: oklch(45.2% 0.211 324.591);\n  --color-fuchsia-900: oklch(40.1% 0.17 325.612);\n  --color-fuchsia-950: oklch(29.3% 0.136 325.661);\n\n  --color-pink-50: oklch(97.1% 0.014 343.198);\n  --color-pink-100: oklch(94.8% 0.028 342.258);\n  --color-pink-200: oklch(89.9% 0.061 343.231);\n  --color-pink-300: oklch(82.3% 0.12 346.018);\n  --color-pink-400: oklch(71.8% 0.202 349.761);\n  --color-pink-500: oklch(65.6% 0.241 354.308);\n  --color-pink-600: oklch(59.2% 0.249 0.584);\n  --color-pink-700: oklch(52.5% 0.223 3.958);\n  --color-pink-800: oklch(45.9% 0.187 3.815);\n  --color-pink-900: oklch(40.8% 0.153 2.432);\n  --color-pink-950: oklch(28.4% 0.109 3.907);\n\n  --color-rose-50: oklch(96.9% 0.015 12.422);\n  --color-rose-100: oklch(94.1% 0.03 12.58);\n  --color-rose-200: oklch(89.2% 0.058 10.001);\n  --color-rose-300: oklch(81% 0.117 11.638);\n  --color-rose-400: oklch(71.2% 0.194 13.428);\n  --color-rose-500: oklch(64.5% 0.246 16.439);\n  --color-rose-600: oklch(58.6% 0.253 17.585);\n  --color-rose-700: oklch(51.4% 0.222 16.935);\n  --color-rose-800: oklch(45.5% 0.188 13.697);\n  --color-rose-900: oklch(41% 0.159 10.272);\n  --color-rose-950: oklch(27.1% 0.105 12.094);\n\n  --color-slate-50: oklch(98.4% 0.003 247.858);\n  --color-slate-100: oklch(96.8% 0.007 247.896);\n  --color-slate-200: oklch(92.9% 0.013 255.508);\n  --color-slate-300: oklch(86.9% 0.022 252.894);\n  --color-slate-400: oklch(70.4% 0.04 256.788);\n  --color-slate-500: oklch(55.4% 0.046 257.417);\n  --color-slate-600: oklch(44.6% 0.043 257.281);\n  --color-slate-700: oklch(37.2% 0.044 257.287);\n  --color-slate-800: oklch(27.9% 0.041 260.031);\n  --color-slate-900: oklch(20.8% 0.042 265.755);\n  --color-slate-950: oklch(12.9% 0.042 264.695);\n\n  --color-gray-50: oklch(98.5% 0.002 247.839);\n  --color-gray-100: oklch(96.7% 0.003 264.542);\n  --color-gray-200: oklch(92.8% 0.006 264.531);\n  --color-gray-300: oklch(87.2% 0.01 258.338);\n  --color-gray-400: oklch(70.7% 0.022 261.325);\n  --color-gray-500: oklch(55.1% 0.027 264.364);\n  --color-gray-600: oklch(44.6% 0.03 256.802);\n  --color-gray-700: oklch(37.3% 0.034 259.733);\n  --color-gray-800: oklch(27.8% 0.033 256.848);\n  --color-gray-900: oklch(21% 0.034 264.665);\n  --color-gray-950: oklch(13% 0.028 261.692);\n\n  --color-zinc-50: oklch(98.5% 0 0);\n  --color-zinc-100: oklch(96.7% 0.001 286.375);\n  --color-zinc-200: oklch(92% 0.004 286.32);\n  --color-zinc-300: oklch(87.1% 0.006 286.286);\n  --color-zinc-400: oklch(70.5% 0.015 286.067);\n  --color-zinc-500: oklch(55.2% 0.016 285.938);\n  --color-zinc-600: oklch(44.2% 0.017 285.786);\n  --color-zinc-700: oklch(37% 0.013 285.805);\n  --color-zinc-800: oklch(27.4% 0.006 286.033);\n  --color-zinc-900: oklch(21% 0.006 285.885);\n  --color-zinc-950: oklch(14.1% 0.005 285.823);\n\n  --color-neutral-50: oklch(98.5% 0 0);\n  --color-neutral-100: oklch(97% 0 0);\n  --color-neutral-200: oklch(92.2% 0 0);\n  --color-neutral-300: oklch(87% 0 0);\n  --color-neutral-400: oklch(70.8% 0 0);\n  --color-neutral-500: oklch(55.6% 0 0);\n  --color-neutral-600: oklch(43.9% 0 0);\n  --color-neutral-700: oklch(37.1% 0 0);\n  --color-neutral-800: oklch(26.9% 0 0);\n  --color-neutral-900: oklch(20.5% 0 0);\n  --color-neutral-950: oklch(14.5% 0 0);\n\n  --color-stone-50: oklch(98.5% 0.001 106.423);\n  --color-stone-100: oklch(97% 0.001 106.424);\n  --color-stone-200: oklch(92.3% 0.003 48.717);\n  --color-stone-300: oklch(86.9% 0.005 56.366);\n  --color-stone-400: oklch(70.9% 0.01 56.259);\n  --color-stone-500: oklch(55.3% 0.013 58.071);\n  --color-stone-600: oklch(44.4% 0.011 73.639);\n  --color-stone-700: oklch(37.4% 0.01 67.558);\n  --color-stone-800: oklch(26.8% 0.007 34.298);\n  --color-stone-900: oklch(21.6% 0.006 56.043);\n  --color-stone-950: oklch(14.7% 0.004 49.25);\n\n  --color-black: #000;\n  --color-white: #fff;\n\n  --spacing: 0.25rem;\n\n  --breakpoint-sm: 40rem;\n  --breakpoint-md: 48rem;\n  --breakpoint-lg: 64rem;\n  --breakpoint-xl: 80rem;\n  --breakpoint-2xl: 96rem;\n\n  --container-3xs: 16rem;\n  --container-2xs: 18rem;\n  --container-xs: 20rem;\n  --container-sm: 24rem;\n  --container-md: 28rem;\n  --container-lg: 32rem;\n  --container-xl: 36rem;\n  --container-2xl: 42rem;\n  --container-3xl: 48rem;\n  --container-4xl: 56rem;\n  --container-5xl: 64rem;\n  --container-6xl: 72rem;\n  --container-7xl: 80rem;\n\n  --text-xs: 0.75rem;\n  --text-xs--line-height: calc(1 / 0.75);\n  --text-sm: 0.875rem;\n  --text-sm--line-height: calc(1.25 / 0.875);\n  --text-base: 1rem;\n  --text-base--line-height: calc(1.5 / 1);\n  --text-lg: 1.125rem;\n  --text-lg--line-height: calc(1.75 / 1.125);\n  --text-xl: 1.25rem;\n  --text-xl--line-height: calc(1.75 / 1.25);\n  --text-2xl: 1.5rem;\n  --text-2xl--line-height: calc(2 / 1.5);\n  --text-3xl: 1.875rem;\n  --text-3xl--line-height: calc(2.25 / 1.875);\n  --text-4xl: 2.25rem;\n  --text-4xl--line-height: calc(2.5 / 2.25);\n  --text-5xl: 3rem;\n  --text-5xl--line-height: 1;\n  --text-6xl: 3.75rem;\n  --text-6xl--line-height: 1;\n  --text-7xl: 4.5rem;\n  --text-7xl--line-height: 1;\n  --text-8xl: 6rem;\n  --text-8xl--line-height: 1;\n  --text-9xl: 8rem;\n  --text-9xl--line-height: 1;\n\n  --font-weight-thin: 100;\n  --font-weight-extralight: 200;\n  --font-weight-light: 300;\n  --font-weight-normal: 400;\n  --font-weight-medium: 500;\n  --font-weight-semibold: 600;\n  --font-weight-bold: 700;\n  --font-weight-extrabold: 800;\n  --font-weight-black: 900;\n\n  --tracking-tighter: -0.05em;\n  --tracking-tight: -0.025em;\n  --tracking-normal: 0em;\n  --tracking-wide: 0.025em;\n  --tracking-wider: 0.05em;\n  --tracking-widest: 0.1em;\n\n  --leading-tight: 1.25;\n  --leading-snug: 1.375;\n  --leading-normal: 1.5;\n  --leading-relaxed: 1.625;\n  --leading-loose: 2;\n\n  --radius-xs: 0.125rem;\n  --radius-sm: 0.25rem;\n  --radius-md: 0.375rem;\n  --radius-lg: 0.5rem;\n  --radius-xl: 0.75rem;\n  --radius-2xl: 1rem;\n  --radius-3xl: 1.5rem;\n  --radius-4xl: 2rem;\n\n  --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);\n  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n\n  --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05);\n  --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05);\n  --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05);\n\n  --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05);\n  --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15);\n  --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12);\n  --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15);\n  --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);\n  --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);\n\n  --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15);\n  --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2);\n  --text-shadow-sm:\n    0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075);\n  --text-shadow-md:\n    0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1);\n  --text-shadow-lg:\n    0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1);\n\n  --ease-in: cubic-bezier(0.4, 0, 1, 1);\n  --ease-out: cubic-bezier(0, 0, 0.2, 1);\n  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n\n  --animate-spin: spin 1s linear infinite;\n  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;\n  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n  --animate-bounce: bounce 1s infinite;\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes ping {\n    75%,\n    100% {\n      transform: scale(2);\n      opacity: 0;\n    }\n  }\n\n  @keyframes pulse {\n    50% {\n      opacity: 0.5;\n    }\n  }\n\n  @keyframes bounce {\n    0%,\n    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  --blur-xs: 4px;\n  --blur-sm: 8px;\n  --blur-md: 12px;\n  --blur-lg: 16px;\n  --blur-xl: 24px;\n  --blur-2xl: 40px;\n  --blur-3xl: 64px;\n\n  --perspective-dramatic: 100px;\n  --perspective-near: 300px;\n  --perspective-normal: 500px;\n  --perspective-midrange: 800px;\n  --perspective-distant: 1200px;\n\n  --aspect-video: 16 / 9;\n\n  --default-transition-duration: 150ms;\n  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  --default-font-family: --theme(--font-sans, initial);\n  --default-font-feature-settings: --theme(--font-sans--font-feature-settings, initial);\n  --default-font-variation-settings: --theme(--font-sans--font-variation-settings, initial);\n  --default-mono-font-family: --theme(--font-mono, initial);\n  --default-mono-font-feature-settings: --theme(--font-mono--font-feature-settings, initial);\n  --default-mono-font-variation-settings: --theme(--font-mono--font-variation-settings, initial);\n}\n\n/* Deprecated */\n@theme default inline reference {\n  --blur: 8px;\n  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);\n  --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);\n  --radius: 0.25rem;\n  --max-width-prose: 65ch;\n}\n";
+
+//#endregion
+//#region node_modules/tailwindcss/utilities.css?raw
+var utilities_default = "@tailwind utilities;\n";
+
+//#endregion
+//#region src/lib/tailwindcss/assets.ts
+const css = {
+	index: tailwindcss_default,
+	preflight: preflight_default,
+	theme: theme_default,
+	utilities: utilities_default
+};
+
+//#endregion
+//#region src/lib/tailwindcss/index.ts
+var TailwindCSSJit = class TailwindCSSJit {
+	static STYLE_TYPE = "text/tailwindcss";
+	compiler;
+	classes = /* @__PURE__ */ new Set();
+	lastCss = "";
+	buildQueue = Promise.resolve("");
+	constructor(env = document) {
+		this.env = env;
+	}
+	rebuild(kind) {
+		const run = async () => {
+			if (!this.compiler && kind !== "full") return;
+			if (kind === "full") await this.createCompiler();
+			return this.build(kind);
+		};
+		this.buildQueue = this.buildQueue.then(run);
+		return this.buildQueue;
+	}
+	get stylesheets() {
+		return this.env.querySelectorAll(`style[type="${TailwindCSSJit.STYLE_TYPE}"]`);
+	}
+	async createCompiler() {
+		let css$1 = "";
+		for (const sheet of this.stylesheets) css$1 += sheet.textContent + "\n";
+		if (!css$1.includes("@import")) css$1 = `@import "tailwindcss";${css$1}`;
+		if (this.lastCss === css$1) return;
+		this.lastCss = css$1;
+		try {
+			this.compiler = await tailwindcss.compile(css$1, {
+				base: "/",
+				loadStylesheet: this.loadStylesheet,
+				loadModule: this.loadModule
+			});
+		} finally {
+			this.classes.clear();
+		}
+	}
+	async build(kind) {
+		if (!this.compiler) return;
+		const newClasses = /* @__PURE__ */ new Set();
+		for (const element of this.env.querySelectorAll("[class]")) for (const c of element.classList) {
+			if (this.classes.has(c)) continue;
+			this.classes.add(c);
+			newClasses.add(c);
+		}
+		if (newClasses.size === 0 && kind === "incremental") return;
+		return this.compiler.build(Array.from(newClasses));
+	}
+	async loadStylesheet(id, base) {
+		const stylesheet = {
+			tailwindcss: {
+				path: "virtual:tailwindcss/index.css",
+				content: css.index
+			},
+			"tailwindcss/preflight": {
+				path: "virtual:tailwindcss/preflight.css",
+				content: css.preflight
+			},
+			"tailwindcss/preflight.css": {
+				path: "virtual:tailwindcss/preflight.css",
+				content: css.preflight
+			},
+			"./preflight.css": {
+				path: "virtual:tailwindcss/preflight.css",
+				content: css.preflight
+			},
+			"tailwindcss/theme": {
+				path: "virtual:tailwindcss/theme.css",
+				content: css.theme
+			},
+			"tailwindcss/theme.css": {
+				path: "virtual:tailwindcss/theme.css",
+				content: css.theme
+			},
+			"./theme.css": {
+				path: "virtual:tailwindcss/theme.css",
+				content: css.theme
+			},
+			"tailwindcss/utilities": {
+				path: "virtual:tailwindcss/utilities.css",
+				content: css.utilities
+			},
+			"tailwindcss/utilities.css": {
+				path: "virtual:tailwindcss/utilities.css",
+				content: css.utilities
+			},
+			"./utilities.css": {
+				path: "virtual:tailwindcss/utilities.css",
+				content: css.utilities
+			}
+		}[id];
+		if (stylesheet) return {
+			...stylesheet,
+			base
+		};
+		throw new Error(`The browser build does not support @import for "${id}"`);
+	}
+	async loadModule() {
+		throw new Error(`The browser build does not support plugins or config files.`);
+	}
+};
+function useTailwindCSS() {
+	const jitRef = useRef(null);
+	const sheetRef = useRef(null);
+	const styleObserverRef = useRef(null);
+	const observerRef = useRef(null);
+	const observeStyle = (style) => {
+		styleObserverRef.current?.observe(style, {
+			attributes: true,
+			attributeFilter: ["type"],
+			characterData: true,
+			subtree: true,
+			childList: true
+		});
+	};
+	const rebuild = async (kind) => {
+		const css$1 = await jitRef.current?.rebuild(kind);
+		if (css$1 !== void 0 && sheetRef.current) sheetRef.current.textContent = css$1;
+	};
+	const mount = (doc) => {
+		jitRef.current ??= new TailwindCSSJit(doc);
+		sheetRef.current ??= doc.createElement("style");
+		styleObserverRef.current = new MutationObserver(() => rebuild("full"));
+		observerRef.current = new MutationObserver((records) => {
+			let full = 0;
+			let incremental = 0;
+			for (const record of records) {
+				for (const node of record.addedNodes) {
+					if (node.nodeType !== Node.ELEMENT_NODE) continue;
+					if (node.tagName !== "STYLE") continue;
+					if (node.getAttribute("type") !== TailwindCSSJit.STYLE_TYPE) continue;
+					observeStyle(node);
+					full++;
+				}
+				for (const node of record.addedNodes) {
+					if (node.nodeType !== 1) continue;
+					if (node === sheetRef.current) continue;
+					incremental++;
+				}
+				if (record.type === "attributes") incremental++;
+			}
+			if (full > 0) rebuild("full");
+			else if (incremental > 0) rebuild("incremental");
+		});
+		for (const style of jitRef.current.stylesheets) observeStyle(style);
+		observerRef.current.observe(doc, {
+			attributes: true,
+			attributeFilter: ["class"],
+			childList: true,
+			subtree: true
+		});
+		rebuild("full");
+		doc.head.appendChild(sheetRef.current);
+	};
+	const unmount = () => {
+		styleObserverRef.current?.disconnect();
+		observerRef.current?.disconnect();
+		sheetRef.current?.remove();
+		styleObserverRef.current = null;
+		observerRef.current = null;
+		sheetRef.current = null;
+		jitRef.current = null;
+	};
+	return {
+		mount,
+		unmount
+	};
+}
+
+//#endregion
+//#region src/components/preview/index.tsx
+/**
+* CodesparkPreview - A sandboxed preview component that renders compiled code in an iframe.
+*
+* Executes compiled React code in an isolated iframe environment with ES module support.
+* Supports Tailwind CSS, custom scripts/styles injection, and console output capture.
+* Displays a loading indicator during code compilation and execution.
+*/
+function CodesparkPreview(props) {
+	const { imports: globalImports, theme: globalTheme } = useConfig();
+	const { workspace: contextWorkspace, imports: contextImports, theme: contextTheme, framework: contextFramework } = useCodespark() || {};
+	const { code = "", framework = contextFramework, className, tailwindcss: tailwindcss$1 = true, imports, theme = contextTheme ?? globalTheme ?? "light", children, height = 200, onError, onLoad, onRendered, onConsole } = props;
+	const { compiled, vendor, workspace } = useWorkspace(props.workspace ?? contextWorkspace ?? new Workspace({
+		entry: "./App.tsx",
+		files: { "./App.tsx": code },
+		framework
+	}));
+	const { mount: mountTailwind, unmount: unmountTailwind } = useTailwindCSS();
+	const { iframeRef, readyRef, preview, running } = usePreview({
+		theme,
+		presets: [
+			...useInjections(children),
+			...vendor.styles.map(({ content, attributes }) => `<style${serializeAttributes(attributes)}>${content}</style>`),
+			...vendor.scripts.map(({ content, attributes }) => `<script${serializeAttributes(attributes)}>${content}<\/script>`)
+		],
+		imports: {
+			...vendor.imports,
+			...globalImports,
+			...contextImports,
+			...imports
+		},
+		onError,
+		onLoad: (proxy) => {
+			onLoad?.(proxy.iframe);
+		},
+		onRenderComplete: onRendered,
+		onConsole
+	});
+	useEffect(() => {
+		if (!tailwindcss$1) unmountTailwind();
+		else readyRef.current.promise.then((doc) => {
+			if (doc) mountTailwind(doc);
+		});
+		return unmountTailwind;
+	}, [tailwindcss$1]);
+	useEffect(() => {
+		if (typeof window === "undefined" || !code) return;
+		workspace.setFile(workspace.entry, code);
+	}, [code]);
+	useEffect(() => {
+		if (typeof window === "undefined" || !compiled) return;
+		preview(compiled);
+	}, [compiled]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex items-center justify-center", className),
+		style: { height },
+		children: [running ? /* @__PURE__ */ jsx("div", {
+			className: "absolute right-2 bottom-2 z-10 h-8 w-8 **:box-border",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex -translate-x-1 translate-y-[9px] scale-[0.13] **:absolute **:h-24 **:w-24",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "fill-mode-forwards **:border-foreground **:bg-background transform-[rotateX(-25.5deg)_rotateY(45deg)] animate-[cube-rotate_1s_linear_infinite] transform-3d **:rounded-lg **:border-10",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "origin-[50%_50%] transform-[rotateX(90deg)_translateZ(44px)]" }),
+						/* @__PURE__ */ jsx("div", { className: "origin-[50%_50%] transform-[rotateY(90deg)_translateZ(44px)]" }),
+						/* @__PURE__ */ jsx("div", { className: "origin-[50%_50%] transform-[rotateX(-90deg)_translateZ(44px)]" }),
+						/* @__PURE__ */ jsx("div", { className: "origin-[50%_50%] transform-[rotateY(-90deg)_translateZ(44px)]" }),
+						/* @__PURE__ */ jsx("div", { className: "origin-[50%_50%] transform-[rotateY(0deg)_translateZ(44px)]" }),
+						/* @__PURE__ */ jsx("div", { className: "origin-[50%_50%] transform-[rotateY(-180deg)_translateZ(44px)]" })
+					]
+				})
+			})
+		}) : null, /* @__PURE__ */ jsx("iframe", {
+			ref: iframeRef,
+			className: "h-full w-full"
+		})]
+	});
+}
+
+//#endregion
+//#region src/index.tsx
+registerFramework(react);
+/**
+* Codespark - A browser-based React code playground with live preview.
+*
+* This component integrates a code editor, file explorer, and preview area
+* to provide a complete interactive code demonstration experience.
+* Supports both single-file mode (via `code` prop) and multi-file mode (via `files` prop).
+*/
+function Codespark(props) {
+	const { code, files, name = "./App.tsx", theme, editor, framework = "react", showEditor = true, showPreview = true, showFileExplorer = true, readonly: readOnly, className, toolbox, tailwindcss: tailwindcss$1, onConsole, onError, children, defaultExpanded, getWorkspace, editorHeight, previewHeight, orientation = "vertical" } = props;
+	const { workspace, fileTree, compileError } = useWorkspace({
+		entry: name,
+		files: files ?? { [name]: code || "" },
+		framework
+	});
+	const [runtimeError, setRuntimeError] = useState(null);
+	const [expanded, setExpanded] = useState(defaultExpanded ?? fileTree.length > 1);
+	const renderEditor = () => {
+		const sharedProps = {
+			containerProps: { className: "w-0 flex-1" },
+			toolbox: toolbox ?? [
+				"reset",
+				"format",
+				{
+					tooltip: "Toggle File Explorer",
+					icon: /* @__PURE__ */ jsx(Maximize, { className: "size-3.5!" }),
+					onClick: () => setExpanded((v) => !v)
+				},
+				"copy"
+			],
+			onChange: () => {
+				setRuntimeError(null);
+			}
+		};
+		if (editor?.kind === EditorEngine.Monaco) return /* @__PURE__ */ jsx(CodesparkEditor, {
+			editor,
+			...sharedProps,
+			height: editorHeight,
+			options: { readOnly }
+		});
+		const height = editorHeight ? typeof editorHeight === "string" ? editorHeight : `${editorHeight}px` : void 0;
+		return /* @__PURE__ */ jsx(CodesparkEditor, {
+			editor,
+			...sharedProps,
+			height,
+			readOnly
+		});
+	};
+	useEffect(() => {
+		setRuntimeError(compileError);
+	}, [compileError]);
+	useEffect(() => {
+		if (getWorkspace) getWorkspace.current = workspace;
+	}, []);
+	return /* @__PURE__ */ jsx(CodesparkProvider, {
+		workspace,
+		theme,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("border-border relative grid w-full overflow-hidden rounded-lg border", orientation === "horizontal" && "grid-cols-[2fr_1fr]", className),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cn("border-border relative", showPreview && showEditor ? orientation === "vertical" ? "border-b" : "border-l" : "", orientation === "horizontal" && "order-2"),
+				children: [showPreview ? /* @__PURE__ */ jsx(CodesparkPreview, {
+					tailwindcss: tailwindcss$1,
+					onConsole,
+					onError: (error) => {
+						onError?.(error);
+						setRuntimeError(error);
+					},
+					height: previewHeight,
+					children
+				}) : null, runtimeError ? /* @__PURE__ */ jsxs("div", {
+					className: "bg-background absolute inset-0 z-20 overflow-auto p-6",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-2xl text-red-500",
+						children: runtimeError.name
+					}), /* @__PURE__ */ jsx("div", {
+						className: "mt-3 font-mono",
+						children: runtimeError.stack || runtimeError.message
+					})]
+				}) : null]
+			}), showEditor ? /* @__PURE__ */ jsxs("div", {
+				className: cn("flex h-full w-full divide-x", orientation === "horizontal" && "order-1"),
+				children: [expanded && showFileExplorer ? /* @__PURE__ */ jsx(CodesparkFileExplorer, {}) : null, renderEditor()]
+			}) : null]
+		})
+	});
+}
+const useMDXComponents = () => {
+	return {
+		Codespark,
+		CodesparkEditor,
+		CodesparkPreview
+	};
+};
+
+//#endregion
+export { Codespark, CodesparkEditor, CodesparkFileExplorer, CodesparkPreview, CodesparkProvider, ConfigProvider, EditorEngine, Link, Script, Style, Workspace, createWorkspace, useMDXComponents, useWorkspace };