@codespark/react 1.0.6 → 1.0.8

package/dist/index.js

@@ -57,6 +57,16 @@ function useLatest(value) {
 	ref.current = value;
 	return ref;
 }
+function useFramework(workspace) {
+	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}`);
+	return framework;
+}
 function getLanguageFromFile(name) {
 	const ext = name.split(".").pop()?.toLowerCase();
 	return ext ? {
@@ -131,10 +141,10 @@ var Workspace = class extends OPFS {
 	constructor(config) {
 		super();
 		this.config = config;
-		const { id, OPFS: OPFS$1 = false, files } = config;
+		const { id, OPFS = false, files } = config;
 		this.id = id || "";
 		this.initialFiles = { ...files };
-		if (OPFS$1) super.initOPFS(this.files);
+		if (OPFS) super.initOPFS(this.files);
 	}
 	notifyListeners() {
 		this.listeners.forEach((fn) => fn());
@@ -320,33 +330,26 @@ var Workspace = class extends OPFS {
 * @returns Workspace state including files, compiled code, and the workspace instance
 */
 function useWorkspace(init) {
-	const uid$1 = useId();
+	const uid = 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}`);
+		if (!ws?.id) ws?.[INTERNAL_SET_ID](`workspace${uid}`);
 		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 framework = useFramework(workspace);
+	const subscribe = useMemo(() => (context ? false : !workspace[INTERNAL_BOUND]()) ? (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;
+			const { fileTree, vendor, compiled, compileError } = context;
 			return {
-				fileTree: fileTree$1,
+				fileTree,
 				vendor,
 				compiled,
 				compileError
@@ -393,13 +396,13 @@ function useWorkspace(init) {
 			return root;
 		})();
 		try {
-			framework.analyze(workspace.entry, files);
-			const compiled = framework.compile();
+			framework.analyze(files);
+			const compiled = framework.compile(workspace.entry);
 			workspace[INTERNAL_EMIT]("compiled", compiled);
 			const modules = framework.getOutput(LoaderType.ESModule);
 			const styles = framework.getOutput(LoaderType.Style);
 			const scripts = framework.getOutput(LoaderType.Script);
-			const externals = modules.flatMap(({ externals: externals$1 }) => externals$1).reduce((acc, { name, imported }) => {
+			const externals = modules.flatMap(({ externals }) => externals).reduce((acc, { name, imported }) => {
 				if (!acc[name]) acc[name] = /* @__PURE__ */ new Set();
 				imported.forEach((i) => acc[name].add(i));
 				return acc;
@@ -542,10 +545,10 @@ function CodesparkProvider(props) {
 
 //#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;
+let EditorEngine = /* @__PURE__ */ function(EditorEngine) {
+	EditorEngine[EditorEngine["Monaco"] = 0] = "Monaco";
+	EditorEngine[EditorEngine["CodeMirror"] = 1] = "CodeMirror";
+	return EditorEngine;
 }({});
 
 //#endregion
@@ -574,7 +577,7 @@ const buttonVariants = cva("inline-flex items-center justify-center gap-2 whites
 		size: "default"
 	}
 });
-const Button = React.forwardRef(function Button$1({ className, variant = "default", size = "default", asChild = false, ...props }, ref) {
+const Button = React.forwardRef(function Button({ className, variant = "default", size = "default", asChild = false, ...props }, ref) {
 	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "button", {
 		"data-slot": "button",
 		"data-variant": variant,
@@ -596,10 +599,7 @@ const Icons = {
 		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"
-		})
+		children: /* @__PURE__ */ jsx("path", { 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",
@@ -616,12 +616,13 @@ const Icons = {
 };
 function getIconForLanguageExtension(language) {
 	switch (language) {
-		case "json": return /* @__PURE__ */ jsx(Icons.json, {});
+		case "json": return /* @__PURE__ */ jsx(Icons.json, { className: "fill-foreground" });
 		case "css": return /* @__PURE__ */ jsx(Icons.css, { className: "fill-foreground" });
 		case "js":
 		case "jsx":
 		case "ts":
 		case "tsx":
+		case "javascript":
 		case "typescript": return /* @__PURE__ */ jsx(Icons.ts, { className: "fill-foreground" });
 		default: return /* @__PURE__ */ jsx(FileIcon, {});
 	}
@@ -731,7 +732,7 @@ const LANGUAGE_EXTENSIONS = {
 };
 const CodeMirror = {
 	kind: EditorEngine.CodeMirror,
-	Component: memo(function CodeMirror$1(props) {
+	Component: memo(function CodeMirror(props) {
 		const { id, basicSetup, extensions = [], width, height, fontFamily, lang, onMount, ...rest } = props;
 		const [mounted, setMounted] = useState(false);
 		const editorRef = useRef(null);
@@ -794,8 +795,8 @@ function CodesparkEditor(props) {
 		entry: "./App.tsx",
 		files: { "./App.tsx": value }
 	}));
-	const uid$1 = useId();
-	const editorId = id ?? `editor${uid$1}`;
+	const uid = useId();
+	const editorId = id ?? `editor${uid}`;
 	const editorRef = useRef(null);
 	const currentFileRef = useLatest(currentFile);
 	const { copyToClipboard, isCopied } = useCopyToClipboard();
@@ -838,14 +839,14 @@ function CodesparkEditor(props) {
 		workspace[INTERNAL_REGISTER_EDITOR](editorId, adapter);
 	}, []);
 	const renderEditor = () => {
-		const id$1 = `${workspace.id}${editorId}`;
+		const id = `${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,
+				id,
 				value: value || currentFile.code,
-				path: `file:///${id$1}/${currentFile.path.replace(/^(\.\.?\/)+/, "")}`,
+				path: `file:///${id}/${currentFile.path.replace(/^(\.\.?\/)+/, "")}`,
 				theme: theme === "light" ? "vitesse-light" : "vitesse-dark",
 				files,
 				imports: vendor.imports,
@@ -876,7 +877,7 @@ function CodesparkEditor(props) {
 		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,
+				id,
 				className,
 				value: value || currentFile.code,
 				height: height ?? "200px",
@@ -918,7 +919,7 @@ function CodesparkEditor(props) {
 			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", {
+				children: [getIconForLanguageExtension(currentFile.language ?? "typescript"), /* @__PURE__ */ jsx("span", {
 					className: "text-card-foreground",
 					children: currentFile.path.replace(/^(\.\.?\/)+/, "")
 				})]
@@ -932,11 +933,12 @@ function CodesparkEditor(props) {
 					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;
+					const { tooltip, disabled = false, icon, asChild = true, onClick, render } = item;
 					function renderTriggerContent() {
 						if (icon) return /* @__PURE__ */ jsx(Button, {
 							variant: "ghost",
 							size: "icon-sm",
+							disabled,
 							onClick: () => onClick?.(editorRef.current),
 							children: icon
 						});
@@ -1165,11 +1167,11 @@ function useInjections(children) {
 		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>`);
+					const { children, ...attrs } = child.props;
+					result.push(`<style${serializeAttributes(attrs)}>${children?.trim() || ""}</style>`);
 				} else if (child.type === Script) {
-					const { children: children$1, ...attrs } = child.props;
-					result.push(`<script${serializeAttributes(attrs)}>${children$1?.trim() || ""}<\/script>`);
+					const { children, ...attrs } = child.props;
+					result.push(`<script${serializeAttributes(attrs)}>${children?.trim() || ""}<\/script>`);
 				} else if (child.type === Link) {
 					const attrs = child.props;
 					result.push(`<link${serializeAttributes(attrs)} />`);
@@ -1428,13 +1430,13 @@ var TailwindCSSJit = class TailwindCSSJit {
 		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;
+		let css = "";
+		for (const sheet of this.stylesheets) css += sheet.textContent + "\n";
+		if (!css.includes("@import")) css = `@import "tailwindcss";${css}`;
+		if (this.lastCss === css) return;
+		this.lastCss = css;
 		try {
-			this.compiler = await tailwindcss.compile(css$1, {
+			this.compiler = await tailwindcss.compile(css, {
 				base: "/",
 				loadStylesheet: this.loadStylesheet,
 				loadModule: this.loadModule
@@ -1522,8 +1524,8 @@ function useTailwindCSS() {
 		});
 	};
 	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 css = await jitRef.current?.rebuild(kind);
+		if (css !== void 0 && sheetRef.current) sheetRef.current.textContent = css;
 	};
 	const mount = (doc) => {
 		jitRef.current ??= new TailwindCSSJit(doc);
@@ -1623,7 +1625,7 @@ body {
 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, preflight = true, imports, theme = contextTheme ?? globalTheme ?? "light", children, height, onError, onLoad, onRendered, onConsole } = props;
+	const { code = "", framework = contextFramework, className, tailwindcss = true, preflight = true, imports, theme = contextTheme ?? globalTheme ?? "light", children, height, onError, onLoad, onRendered, onConsole } = props;
 	const { compiled, vendor, workspace } = useWorkspace(props.workspace ?? contextWorkspace ?? new Workspace({
 		entry: "./App.tsx",
 		files: { "./App.tsx": code },
@@ -1653,12 +1655,12 @@ function CodesparkPreview(props) {
 		onConsole
 	});
 	useEffect(() => {
-		if (!tailwindcss$1) unmountTailwind();
+		if (!tailwindcss) unmountTailwind();
 		else readyRef.current.promise.then((doc) => {
 			if (doc) mountTailwind(doc);
 		});
 		return unmountTailwind;
-	}, [tailwindcss$1]);
+	}, [tailwindcss]);
 	useEffect(() => {
 		if (typeof window === "undefined" || !code) return;
 		workspace.setFile(workspace.entry, code);
@@ -1693,6 +1695,193 @@ function CodesparkPreview(props) {
 	});
 }
 
+//#endregion
+//#region src/ui/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/ui/input-group.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+	variants: { align: {
+		"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+		"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+		"block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+		"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+
+//#endregion
+//#region src/components/browser/index.tsx
+const parseUrlInput = (input) => {
+	let path = input.trim();
+	path = path.replace(/^https?:\/\//, "");
+	path = path.replace(/^localhost(:\d+)?/, "");
+	if (!path.startsWith("/")) path = "/" + path;
+	return path;
+};
+function CodesparkBrowser(props) {
+	const { workspace: contextWorkspace } = useCodespark() || {};
+	const { defaultPath = "/", onPathChange, loading = false, className, onLoad } = props;
+	const { workspace } = useWorkspace(props.workspace ?? contextWorkspace);
+	const [currentPath, setCurrentPath] = useState(defaultPath);
+	const framework = useMemo(() => {
+		const fwInput = workspace.framework;
+		if (typeof fwInput === "string") return registry.get(fwInput);
+		if (typeof fwInput === "function") return new fwInput();
+		return fwInput;
+	}, []);
+	const supported = (fw) => fw?.name === "node-http" || fw?.name === "node-vite";
+	const [src, setSrc] = useState("about:blank");
+	useEffect(() => {
+		if (!supported(framework)) return;
+		framework.on("serverReady", () => {
+			handleRequest("/");
+		});
+		framework.on("serverShutdown", () => {
+			setSrc("about:blank");
+		});
+		const handleMessage = (event) => {
+			if (event.data?.type === "navigate") {
+				const path = event.data.path;
+				setCurrentPath(path);
+				handleRequest(path);
+			}
+		};
+		window.addEventListener("message", handleMessage);
+		return () => {
+			window.removeEventListener("message", handleMessage);
+		};
+	}, []);
+	const handleRequest = (path) => {
+		if (!supported(framework)) return;
+		framework.request(path).then(setSrc);
+	};
+	const handleAddressSubmit = (e) => {
+		e.preventDefault();
+		const path = parseUrlInput(currentPath);
+		setCurrentPath(path);
+		handleRequest(path);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-col", className),
+		children: [
+			loading ? /* @__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("form", {
+				onSubmit: handleAddressSubmit,
+				className: "bg-muted/50 border-border relative z-10 flex items-center gap-2 border-b p-2",
+				children: /* @__PURE__ */ jsxs(InputGroup, { children: [/* @__PURE__ */ jsx(InputGroupInput, {
+					value: currentPath,
+					onChange: (e) => {
+						const path = e.target.value;
+						setCurrentPath(path);
+						onPathChange?.(path);
+					},
+					onKeyDown: (e) => {
+						if (e.key === "Enter") handleAddressSubmit(e);
+					}
+				}), /* @__PURE__ */ jsx(InputGroupAddon, {
+					align: "inline-end",
+					children: /* @__PURE__ */ jsx(InputGroupButton, {
+						type: "submit",
+						variant: "secondary",
+						children: "Go"
+					})
+				})] })
+			}),
+			src === "about:blank" ? /* @__PURE__ */ jsxs("div", {
+				className: "bg-background flex h-full w-full flex-1 flex-col items-center justify-center gap-4",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground/50 text-sm",
+					children: "Ready to preview"
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground/30 flex gap-2 text-xs",
+					children: [
+						/* @__PURE__ */ jsx("span", { children: "localhost" }),
+						/* @__PURE__ */ jsx("span", { children: "•" }),
+						/* @__PURE__ */ jsx("span", { children: "Press Go to navigate" })
+					]
+				})]
+			}) : /* @__PURE__ */ jsx("iframe", {
+				src,
+				className: "h-full w-full flex-1",
+				onLoad: (e) => {
+					onLoad?.(e.target);
+				}
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/index.tsx
 registerFramework(react);
@@ -1704,7 +1893,7 @@ registerFramework(react);
 * 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", preflight } = props;
+	const { code, files, name = "./App.tsx", theme, editor, framework = "react", showEditor = true, showPreview = true, showFileExplorer = true, readonly: readOnly, className, toolbox, tailwindcss, onConsole, onError, children, defaultExpanded, getWorkspace, editorHeight, previewHeight, orientation = "vertical", preflight } = props;
 	const { workspace, fileTree, compileError } = useWorkspace({
 		entry: name,
 		files: files ?? { [name]: code || "" },
@@ -1754,10 +1943,10 @@ function Codespark(props) {
 		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", {
+			children: [showPreview ? /* @__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,
+				children: [/* @__PURE__ */ jsx(CodesparkPreview, {
+					tailwindcss,
 					onConsole,
 					onError: (error) => {
 						onError?.(error);
@@ -1766,7 +1955,7 @@ function Codespark(props) {
 					height: previewHeight,
 					preflight,
 					children
-				}) : null, runtimeError ? /* @__PURE__ */ jsxs("div", {
+				}), 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",
@@ -1776,7 +1965,7 @@ function Codespark(props) {
 						children: runtimeError.stack || runtimeError.message
 					})]
 				}) : null]
-			}), showEditor ? /* @__PURE__ */ jsxs("div", {
+			}) : 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]
@@ -1792,4 +1981,4 @@ const useMDXComponents = () => {
 };
 
 //#endregion
-export { Codespark, CodesparkEditor, CodesparkFileExplorer, CodesparkPreview, CodesparkProvider, ConfigProvider, EditorEngine, Link, Script, Style, Workspace, createWorkspace, useMDXComponents, useWorkspace };
+export { Codespark, CodesparkBrowser, CodesparkEditor, CodesparkFileExplorer, CodesparkPreview, CodesparkProvider, ConfigProvider, EditorEngine, Link, Script, Style, Workspace, createWorkspace, useMDXComponents, useWorkspace };