@codespark/react 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,712 @@
+import { Framework, Output } from "@codespark/framework";
+import * as React$1 from "react";
+import { ComponentProps, ComponentType, JSX, ReactElement, ReactNode, RefObject } from "react";
+import { LoaderType } from "@codespark/framework/loaders";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { Tabs } from "radix-ui";
+import { ReactCodeMirrorProps, ReactCodeMirrorRef } from "@uiw/react-codemirror";
+import { EditorProps } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+
+//#region src/lib/editor-adapter/index.d.ts
+declare enum EditorEngine {
+  Monaco = 0,
+  CodeMirror = 1,
+}
+interface EditorInstance {
+  [EditorEngine.Monaco]: monaco.editor.IStandaloneCodeEditor;
+  [EditorEngine.CodeMirror]: ReactCodeMirrorRef;
+}
+interface EditorAdapter<E extends EditorEngine = any> {
+  kind: E;
+  instance: EditorInstance[E];
+  getValue(): string;
+  setValue(value: string, addToHistory?: boolean): void;
+  format(): Promise<void>;
+}
+interface EditorEngineComponent<E extends EditorEngine = any, P = object, I = unknown> {
+  kind: E;
+  Component: ComponentType<P>;
+  createAdapter: (instance: I) => EditorAdapter<E>;
+}
+//#endregion
+//#region src/components/editor/codemirror/index.d.ts
+interface CodeMirrorProps extends ReactCodeMirrorProps {
+  readonly id?: string;
+  onMount?: (editor: ReactCodeMirrorRef) => void;
+  fontFamily?: string;
+}
+declare const CodeMirror: EditorEngineComponent<EditorEngine.CodeMirror, CodeMirrorProps, ReactCodeMirrorRef>;
+//#endregion
+//#region src/components/editor/monaco/index.d.ts
+interface MonacoProps extends EditorProps {
+  readonly id?: string;
+  files?: Record<string, string>;
+  imports?: Record<string, string>;
+}
+declare const Monaco: EditorEngineComponent<EditorEngine.Monaco, MonacoProps, monaco.editor.IStandaloneCodeEditor>;
+//#endregion
+//#region src/lib/workspace/internals.d.ts
+declare const INTERNAL_SUBSCRIBE: unique symbol;
+declare const INTERNAL_REGISTER_EDITOR: unique symbol;
+declare const INTERNAL_UNREGISTER_EDITOR: unique symbol;
+declare const INTERNAL_BOUND: unique symbol;
+declare const INTERNAL_SET_ID: unique symbol;
+declare const INTERNAL_EMIT: unique symbol;
+//#endregion
+//#region src/lib/workspace/opfs.d.ts
+declare abstract class OPFS {
+  abstract id: string;
+  protected dir: FileSystemDirectoryHandle | null;
+  initOPFS(files: Record<string, string>): Promise<void>;
+  protected writeToOPFS(path: string, content: string): Promise<void>;
+  protected getFileHandle(path: string): Promise<FileSystemFileHandle | null>;
+}
+//#endregion
+//#region src/lib/workspace/index.d.ts
+interface CollectResult {
+  entry: {
+    code: string;
+    locals: string[];
+    imports: string[];
+  };
+  files: Record<string, string>;
+}
+type FileTreeNode = FileNode | FolderNode;
+interface FileNode {
+  type: 'file';
+  name: string;
+  path: string;
+  code: string;
+  language?: string;
+}
+interface FolderNode {
+  type: 'folder';
+  name: string;
+  path: string;
+  children?: FileTreeNode[];
+}
+interface WorkspaceInit {
+  /**
+   * Unique identifier for the workspace instance
+   */
+  id?: string;
+  /**
+   * Framework to use for code analysis and compilation.
+   * Can be a Framework instance, a Framework constructor, or a registered framework name
+   */
+  framework?: Framework | (new () => Framework) | string;
+  /**
+   * Entry file path, the main file to compile and render
+   *
+   * @example './App.tsx'
+   */
+  entry: string;
+  /**
+   * Initial files mapping, where keys are file paths and values are file contents
+   */
+  files: Record<string, string>;
+  /**
+   * Whether to use Origin Private File System (OPFS) for file persistence
+   *
+   * @default false
+   */
+  OPFS?: boolean;
+}
+interface WorkspaceEvent {
+  /**
+   * Fired when code compilation succeeds
+   *
+   * @param code - The compiled code string
+   */
+  compiled: (code: string) => void;
+  /**
+   * Fired when code compilation fails
+   *
+   * @param error - The compilation error
+   */
+  compileError: (error: Error) => void;
+  /**
+   * Fired when a single file is changed
+   *
+   * @param path - The file path that was changed
+   * @param content - The new file content
+   */
+  fileChange: (path: string, content: string) => void;
+  /**
+   * Fired when all files are replaced via setFiles()
+   *
+   * @param files - The new files mapping
+   */
+  filesChange: (files: Record<string, string>) => void;
+  /**
+   * Fired when a file or folder is renamed
+   *
+   * @param oldPath - The original file path
+   * @param newPath - The new file path
+   */
+  fileRename: (oldPath: string, newPath: string) => void;
+  /**
+   * Fired when a file or folder is deleted
+   *
+   * @param path - The deleted file path
+   */
+  fileDelete: (path: string) => void;
+  /**
+   * Fired when the currently active file changes
+   *
+   * @param file - The new current file node
+   */
+  currentFileChange: (file: FileNode) => void;
+}
+/**
+ * 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.
+ */
+declare class Workspace extends OPFS {
+  private config;
+  id: string;
+  initialFiles: Record<string, string>;
+  private listeners;
+  private events;
+  private _currentFile;
+  private _editors;
+  private _bound;
+  constructor(config: WorkspaceInit);
+  private notifyListeners;
+  private createEntryFileNode;
+  private normalizePath;
+  private getFile;
+  get entry(): string;
+  get files(): Record<string, string>;
+  get framework(): string | Framework | (new () => Framework);
+  get currentFile(): FileNode;
+  get editors(): ReadonlyMap<string, EditorAdapter>;
+  setFile(path: string, content: string): void;
+  setFiles(files: Record<string, string>): void;
+  renameFile(oldPath: string, newName: string): void;
+  deleteFile(path: string): void;
+  setCurrentFile(path: string): void;
+  on<E extends keyof WorkspaceEvent>(event: E, callback: WorkspaceEvent[E]): () => void;
+  off<E extends keyof WorkspaceEvent>(event: E, callback: WorkspaceEvent[E]): void;
+  private emit;
+  [INTERNAL_SUBSCRIBE](listener: () => void): () => boolean;
+  [INTERNAL_REGISTER_EDITOR](id: string, editor: EditorAdapter): void;
+  [INTERNAL_UNREGISTER_EDITOR](id: string): void;
+  [INTERNAL_BOUND](): boolean;
+  [INTERNAL_SET_ID](id: string): void;
+  [INTERNAL_EMIT]<E extends keyof WorkspaceEvent>(event: E, ...args: Parameters<WorkspaceEvent[E]>): void;
+}
+interface WorkspaceDerivedState {
+  /**
+   * Hierarchical file tree structure for rendering file explorer
+   */
+  fileTree: FileTreeNode[];
+  /**
+   * Compiled code string ready for execution in the preview iframe
+   */
+  compiled: string;
+  /**
+   * Compilation error if the code failed to compile, null otherwise
+   */
+  compileError: Error | null;
+  /**
+   * Vendor resources extracted from the compilation process
+   */
+  vendor: {
+    /**
+     * ES modules extracted from the code
+     */
+    modules: Output<LoaderType.ESModule>[];
+    /**
+     * Style resources to inject into the preview
+     */
+    styles: Output<LoaderType.Style>[];
+    /**
+     * Script resources to inject into the preview
+     */
+    scripts: Output<LoaderType.Script>[];
+    /**
+     * Import map for external dependencies
+     */
+    imports: Record<string, string>;
+  };
+}
+interface UseWorkspaceReturn extends WorkspaceDerivedState {
+  /**
+   * Current files in the workspace, where keys are file paths and values are file contents
+   */
+  files: Record<string, string>;
+  /**
+   * Currently active file in the editor
+   */
+  currentFile: FileNode;
+  /**
+   * The Workspace instance for programmatic control
+   */
+  workspace: Workspace;
+}
+/**
+ * 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
+ */
+declare function useWorkspace(init?: WorkspaceInit | Workspace): UseWorkspaceReturn;
+/**
+ * Configuration options for createWorkspace function
+ */
+interface CreateWorkspaceConfig extends Pick<WorkspaceInit, 'id' | 'framework'> {
+  /**
+   * Entry file name/path
+   *
+   * @default './App.tsx'
+   */
+  name?: string;
+  /**
+   * Code processing mode:
+   * - 'raw': Use the raw scanned code as-is
+   * - 'source': Use only the source file content
+   * - 'packed': Bundle imports, locals, and component into a single file
+   *
+   * @default 'packed'
+   */
+  mode?: 'raw' | 'source' | 'packed';
+}
+/**
+ * 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'
+ * });
+ * ```
+ */
+declare function createWorkspace(this: {
+  __scanned?: CollectResult;
+} | void, source: ComponentType | ReactElement, config?: CreateWorkspaceConfig): Workspace;
+//#endregion
+//#region src/context/index.d.ts
+interface ConfigContextValue {
+  /**
+   * Theme mode for the editor and preview
+   *
+   * @default 'light'
+   */
+  theme?: 'light' | 'dark';
+  /**
+   * Global import map for external dependencies, where keys are module names and values are CDN URLs
+   *
+   * @example
+   * ```tsx
+   * <ConfigProvider imports={{ 'lodash': 'https://esm.sh/lodash' }}>
+   *   ...
+   * </ConfigProvider>
+   * ```
+   */
+  imports?: Record<string, string>;
+  /**
+   * Font family for the code editor
+   *
+   * @default 'Fira Code'
+   */
+  fontFamily?: string;
+  /**
+   * Default editor engine component to use (Monaco or CodeMirror)
+   *
+   * @default CodeMirror
+   */
+  editor?: typeof CodeMirror | typeof Monaco;
+}
+interface CodesparkContextValue extends ConfigContextValue, WorkspaceDerivedState, Pick<WorkspaceInit, 'framework'> {
+  workspace?: Workspace;
+  files: Record<string, string>;
+  currentFile: FileNode;
+}
+interface ConfigProviderProps extends ConfigContextValue {
+  children?: ReactNode;
+}
+declare function ConfigProvider(props: ConfigProviderProps): react_jsx_runtime1.JSX.Element;
+interface CodesparkProviderProps extends Omit<CodesparkContextValue, 'files' | 'currentFile' | keyof WorkspaceDerivedState> {
+  children?: ReactNode;
+}
+/**
+ * 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.
+ */
+declare function CodesparkProvider(props: CodesparkProviderProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/components/editor/index.d.ts
+type ToolboxItemId = 'reset' | 'format' | 'copy';
+interface ToolboxItemConfig {
+  tooltip?: string;
+  icon?: ReactNode;
+  asChild?: boolean;
+  onClick?: (editor: EditorAdapter | null) => void;
+  render?: (editor: EditorAdapter | null) => ReactNode;
+}
+interface CodesparkEditorBaseProps extends Pick<ConfigContextValue, 'theme'> {
+  /**
+   * Unique identifier for the editor instance
+   */
+  readonly id?: string;
+  /**
+   * Initial code content for the editor
+   */
+  value?: string;
+  /**
+   * CSS class name for the editor element
+   */
+  className?: string;
+  /**
+   * Workspace instance to use for file management and compilation
+   */
+  workspace?: Workspace;
+  /**
+   * Toolbar configuration. Set to false to hide, true to show default tools, or pass a custom array of tool items
+   *
+   * @default ['reset', 'format', 'copy']
+   */
+  toolbox?: boolean | (ToolboxItemId | ToolboxItemConfig | ReactElement)[];
+  /**
+   * Props to pass to the container div element
+   */
+  containerProps?: ComponentProps<'div'>;
+  /**
+   * Debounce wait time in milliseconds for triggering workspace updates on code changes
+   *
+   * @default 500
+   */
+  debounceWait?: number;
+}
+interface CodesparkEditorEngineProps {
+  [EditorEngine.Monaco]: Pick<MonacoProps, 'width' | 'height' | 'onChange' | 'onMount' | 'wrapperProps' | 'options'>;
+  [EditorEngine.CodeMirror]: Pick<CodeMirrorProps, 'width' | 'height' | 'extensions' | 'onChange' | 'onMount' | 'readOnly' | 'fontFamily' | 'basicSetup'>;
+}
+type CodesparkEditorEngineComponents = typeof Monaco | typeof CodeMirror;
+type CodesparkEditorProps<E extends EditorEngine = EditorEngine.CodeMirror> = CodesparkEditorBaseProps & CodesparkEditorEngineProps[E];
+/**
+ * CodesparkEditor - A flexible code editor component supporting multiple editor engines.
+ *
+ * Supports both Monaco Editor and CodeMirror as the underlying editor engine.
+ * Integrates with Workspace for file management and automatic compilation.
+ * Includes a customizable toolbar with reset, format, and copy functionality.
+ */
+declare function CodesparkEditor(props: CodesparkEditorProps<EditorEngine.CodeMirror> & {
+  editor?: typeof CodeMirror;
+}): JSX.Element;
+declare function CodesparkEditor(props: CodesparkEditorProps<EditorEngine.Monaco> & {
+  editor: typeof Monaco;
+}): JSX.Element;
+declare function CodesparkEditor<E extends EditorEngine = never>(props: CodesparkEditorProps<E>): JSX.Element;
+//#endregion
+//#region src/components/preview/index.d.ts
+interface OnConsoleData {
+  /**
+   * The console method level (e.g., 'log', 'warn', 'error', 'info', 'debug')
+   */
+  level: string;
+  /**
+   * The arguments passed to the console method
+   */
+  args: unknown[];
+  /**
+   * Whether this is a duplicate of a previous console call
+   */
+  duplicate?: boolean;
+}
+interface CodesparkPreviewProps extends ConfigContextValue, Pick<WorkspaceInit, 'framework'> {
+  /**
+   * Source code to preview. Used when not providing a workspace instance
+   */
+  code?: string;
+  /**
+   * Workspace instance to use for compilation and file management
+   */
+  workspace?: Workspace;
+  /**
+   * CSS class name for the preview container
+   */
+  className?: string;
+  /**
+   * Whether to enable Tailwind CSS support in the preview
+   *
+   * @default true
+   */
+  tailwindcss?: boolean;
+  /**
+   * Child elements to inject into the preview iframe, such as Script, Style, Link components
+   *
+   * @example
+   * ```tsx
+   * <CodesparkPreview>
+   *   <Script src="https://example.com/script.js" />
+   *   <Style>{`.custom { color: red; }`}</Style>
+   * </CodesparkPreview>
+   * ```
+   */
+  children?: ReactNode;
+  /**
+   * Height of the preview area. Accepts a number (pixels) or CSS string (e.g., '200px', '50%')
+   *
+   * @default 200
+   */
+  height?: string | number;
+  /**
+   * Callback fired when a runtime error occurs in the preview
+   */
+  onError?: (error: unknown) => void;
+  /**
+   * Callback fired when the preview iframe is loaded and ready
+   */
+  onLoad?: (iframe: HTMLIFrameElement) => void;
+  /**
+   * Callback fired when the preview has finished rendering
+   */
+  onRendered?: () => void;
+  /**
+   * Callback fired when console methods are called in the preview.
+   * Useful for capturing and displaying console output
+   */
+  onConsole?: (data: OnConsoleData) => void;
+}
+/**
+ * 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.
+ */
+declare function CodesparkPreview(props: CodesparkPreviewProps): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/ui/tabs.d.ts
+declare function Tabs$1({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Tabs.Root>): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/components/file-explorer/index.d.ts
+interface FileExplorerItemRenderContext {
+  node: FileTreeNode;
+  depth: number;
+  isSelected: boolean;
+  isOpen?: boolean;
+}
+interface CodesparkFileExplorerProps extends React.ComponentPropsWithoutRef<typeof Tabs$1> {
+  /**
+   * Additional CSS class name(s) to apply to the file explorer container.
+   */
+  className?: string;
+  /**
+   * Whether folders should be expanded by default.
+   *
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Custom render function for file tree items.
+   * Return a ReactNode to replace the default content (icon and name).
+   * Return undefined or null to use the default rendering.
+   */
+  renderItem?: (context: FileExplorerItemRenderContext) => ReactNode;
+}
+/**
+ * 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.
+ */
+declare const CodesparkFileExplorer: React$1.ForwardRefExoticComponent<CodesparkFileExplorerProps & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+//#region src/components/inject/index.d.ts
+interface StyleProps extends Omit<React.StyleHTMLAttributes<HTMLStyleElement>, 'children'> {
+  children?: string;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function Style(_props: StyleProps): null;
+interface ScriptProps extends Omit<React.ScriptHTMLAttributes<HTMLScriptElement>, 'children'> {
+  children?: string;
+}
+/**
+ * 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>
+ * ```
+ */
+declare function Script(_props: ScriptProps): null;
+interface LinkProps extends React.LinkHTMLAttributes<HTMLLinkElement> {}
+/**
+ * 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>
+ * ```
+ */
+declare function Link(_props: LinkProps): null;
+//#endregion
+//#region src/index.d.ts
+interface CodesparkProps extends Pick<ConfigContextValue, 'theme'>, Pick<CodesparkContextValue, 'framework' | 'imports'>, Pick<CodesparkEditorProps, 'toolbox'>, Pick<CodesparkPreviewProps, 'tailwindcss' | 'onConsole' | 'onError' | 'children'> {
+  /**
+   * Source code content for single-file mode
+   *
+   * @example
+   * ```tsx
+   * <Codespark code="export default () => <div>Hello</div>" />
+   * ```
+   */
+  code?: string;
+  /**
+   * File mapping for multi-file mode, where keys are file paths and values are file contents
+   *
+   * @example
+   * ```tsx
+   * <Codespark files={{ './App.tsx': 'export default () => <div>Hello</div>', './utils.ts': 'export const foo = 1' }} />
+   * ```
+   */
+  files?: Record<string, string>;
+  /**
+   * Entry file path
+   *
+   * @default './App.tsx'
+   */
+  name?: string;
+  /**
+   * CSS class name for the container
+   */
+  className?: string;
+  /**
+   * Whether to show the code editor
+   *
+   * @default true
+   */
+  showEditor?: boolean;
+  /**
+   * Whether to show the preview area
+   *
+   * @default true
+   */
+  showPreview?: boolean;
+  /**
+   * Whether to show the file explorer
+   *
+   * @default true
+   */
+  showFileExplorer?: boolean;
+  /**
+   * Whether to set the editor to read-only mode
+   *
+   * @default false
+   */
+  readonly?: boolean;
+  /**
+   * Whether the file explorer is expanded by default. When not set, it is automatically determined based on the number of files
+   */
+  defaultExpanded?: boolean;
+  /**
+   * Ref to get the Workspace instance for external control
+   *
+   * @example
+   * ```tsx
+   * const workspaceRef = useRef<Workspace | null>(null);
+   * <Codespark getWorkspace={workspaceRef} />
+   * ```
+   */
+  getWorkspace?: RefObject<Workspace | null>;
+  /**
+   * Editor engine component, supports Monaco or CodeMirror
+   *
+   * @default CodeMirror
+   */
+  editor?: CodesparkEditorEngineComponents;
+  /**
+   * Editor height. Accepts a number (pixels) or CSS string (e.g., '200px', '50%')
+   *
+   * @default 200
+   */
+  editorHeight?: string | number;
+  /**
+   * Preview area height. Accepts a number (pixels) or CSS string (e.g., '200px', '50%')
+   *
+   * @default 200
+   */
+  previewHeight?: string | number;
+  /**
+   * Layout orientation of the editor and preview areas.
+   * - `vertical`: Preview on top, editor on bottom
+   * - `horizontal`: Editor on left (2/3 width), preview on right (1/3 width)
+   *
+   * @default 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal';
+}
+/**
+ * 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).
+ */
+declare function Codespark(props: CodesparkProps): react_jsx_runtime1.JSX.Element;
+declare const useMDXComponents: () => {
+  Codespark: typeof Codespark;
+  CodesparkEditor: typeof CodesparkEditor;
+  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 };