@codespark/react 1.0.7 → 1.0.9

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 };