@codespark/react 1.0.7 → 1.0.8

package/dist/codemirror.js

@@ -3,6 +3,7 @@ import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
 import { languages } from "@codemirror/language-data";
 import ReactCodeMirror, { EditorView, Transaction } from "@uiw/react-codemirror";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
+import "@codespark/framework";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/index.d.ts

@@ -6603,6 +6603,7 @@ declare function CodesparkProvider(props: CodesparkProviderProps): react_jsx_run
 type ToolboxItemId = 'reset' | 'format' | 'copy';
 interface ToolboxItemConfig {
   tooltip?: string;
+  disabled?: boolean;
   icon?: ReactNode;
   asChild?: boolean;
   onClick?: (editor: EditorAdapter | null) => void;
@@ -6748,6 +6749,17 @@ interface CodesparkPreviewProps extends ConfigContextValue, Pick<WorkspaceInit,
  */
 declare function CodesparkPreview(props: CodesparkPreviewProps): react_jsx_runtime0.JSX.Element;
 //#endregion
+//#region src/components/browser/index.d.ts
+interface CodesparkBrowserProps {
+  defaultPath?: string;
+  onPathChange?: (path: string) => void;
+  loading?: boolean;
+  workspace?: Workspace;
+  className?: string;
+  onLoad?: (iframe: HTMLIFrameElement) => void;
+}
+declare function CodesparkBrowser(props: CodesparkBrowserProps): react_jsx_runtime0.JSX.Element;
+//#endregion
 //#region src/ui/tabs.d.ts
 declare function Tabs$1({
   className,
@@ -6967,4 +6979,4 @@ declare const useMDXComponents: () => {
   CodesparkPreview: typeof CodesparkPreview;
 };
 //#endregion
-export { Codespark, CodesparkEditor, CodesparkEditorBaseProps, CodesparkEditorEngineComponents, CodesparkEditorEngineProps, CodesparkEditorProps, CodesparkFileExplorer, CodesparkFileExplorerProps, CodesparkPreview, CodesparkPreviewProps, CodesparkProps, CodesparkProvider, type CodesparkProviderProps, ConfigProvider, type ConfigProviderProps, CreateWorkspaceConfig, EditorAdapter, EditorEngine, EditorEngineComponent, FileExplorerItemRenderContext, FileNode, FileTreeNode, FolderNode, Link, type LinkProps, OnConsoleData, Script, type ScriptProps, Style, type StyleProps, ToolboxItemConfig, UseWorkspaceReturn, Workspace, WorkspaceDerivedState, WorkspaceEvent, WorkspaceInit, createWorkspace, useMDXComponents, useWorkspace };
+export { Codespark, CodesparkBrowser, CodesparkBrowserProps, CodesparkEditor, CodesparkEditorBaseProps, CodesparkEditorEngineComponents, CodesparkEditorEngineProps, CodesparkEditorProps, CodesparkFileExplorer, CodesparkFileExplorerProps, CodesparkPreview, CodesparkPreviewProps, CodesparkProps, CodesparkProvider, type CodesparkProviderProps, ConfigProvider, type ConfigProviderProps, CreateWorkspaceConfig, EditorAdapter, EditorEngine, EditorEngineComponent, FileExplorerItemRenderContext, FileNode, FileTreeNode, FolderNode, Link, type LinkProps, OnConsoleData, Script, type ScriptProps, Style, type StyleProps, ToolboxItemConfig, UseWorkspaceReturn, Workspace, WorkspaceDerivedState, WorkspaceEvent, WorkspaceInit, createWorkspace, useMDXComponents, useWorkspace };

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 ? {
@@ -331,15 +341,8 @@ function useWorkspace(init) {
 		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(() => {
@@ -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, {});
 	}
@@ -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
 						});
@@ -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);
@@ -1754,9 +1943,9 @@ 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, {
+				children: [/* @__PURE__ */ jsx(CodesparkPreview, {
 					tailwindcss,
 					onConsole,
 					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 };

package/dist/monaco.js

@@ -5,6 +5,7 @@ import prettier from "prettier/standalone";
 import { memo, useEffect, useRef, useState } from "react";
 import { createHighlighterCore } from "shiki/core";
 import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import "@codespark/framework";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codespark/react",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "type": "module",
   "description": "React components for codespark ecosystem",
   "keywords": [
@@ -42,7 +42,7 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/language-data": "^6.5.2",
-    "@codespark/framework": "^1.0.2",
+    "@codespark/framework": "^1.0.3",
     "@monaco-editor/react": "^4.7.0",
     "@shikijs/monaco": "^3.20.0",
     "@uiw/react-codemirror": "^4.25.4",