@immediately-run/sandpack-react 2.20.0

package/dist/index.d.ts

@@ -0,0 +1,1771 @@
+import * as React$1 from 'react';
+import React__default, { JSX } from 'react';
+import { Extension } from '@codemirror/state';
+import { KeyBinding, EditorView } from '@codemirror/view';
+import { LanguageSupport } from '@codemirror/language';
+import { NpmRegistry, SandpackFS, SandpackLogLevel, SdkIntegrity, FsSnapshot, SandpackMessage, ListenerFunction, UnsubscribeFunction, BundlerState, SandpackError, FileMetaMap, SandpackClient, ReactDevToolsMode, TestError, SandpackMessageConsoleMethods, SandpackFilesInput } from '@immediately-run/sandpack-client';
+export { SandpackFS } from '@immediately-run/sandpack-client';
+import { BoundContext } from '@zenfs/core';
+
+declare const SignInIcon: () => React$1.ReactElement;
+declare const SignOutIcon: () => React$1.ReactElement;
+declare const RestartIcon: () => React$1.ReactElement;
+declare const RunIcon: () => React$1.ReactElement;
+declare const BackwardIcon: () => React$1.ReactElement;
+declare const ForwardIcon: () => React$1.ReactElement;
+declare const RefreshIcon: () => React$1.ReactElement;
+declare const CleanIcon: () => React$1.ReactElement;
+declare const ExportIcon: () => React$1.ReactElement;
+declare const DirectoryIconOpen: () => React$1.ReactElement;
+declare const DirectoryIconClosed: () => React$1.ReactElement;
+declare const FileIcon: () => React$1.ReactElement;
+declare const CloseIcon: () => React$1.ReactElement;
+declare const ConsoleIcon: () => React$1.ReactElement;
+
+interface ClientPropsOverride {
+    startRoute?: string;
+}
+
+/**
+ * @hidden
+ */
+declare const ASTRO_TEMPLATE: {
+    files: {
+        "/src/styles.css": {
+            code: string;
+        };
+        "/src/pages/index.astro": {
+            code: string;
+        };
+        ".env": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const ANGULAR_TEMPLATE: {
+    files: {
+        "/src/app/app.component.css": {
+            code: string;
+        };
+        "/src/app/app.component.html": {
+            code: string;
+        };
+        "/src/app/app.component.ts": {
+            code: string;
+        };
+        "/src/app/app.module.ts": {
+            code: string;
+        };
+        "/src/index.html": {
+            code: string;
+        };
+        "/src/main.ts": {
+            code: string;
+        };
+        "/src/polyfills.ts": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const REACT_TEMPLATE: {
+    files: {
+        "/App.js": {
+            code: string;
+        };
+        "/index.js": {
+            code: string;
+        };
+        "/public/index.html": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+        "/styles.css": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const REACT_TYPESCRIPT_TEMPLATE: {
+    files: {
+        "tsconfig.json": {
+            code: string;
+        };
+        "/App.tsx": {
+            code: string;
+        };
+        "/index.tsx": {
+            code: string;
+        };
+        "/public/index.html": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+        "/styles.css": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const SOLID_TEMPLATE: {
+    files: {
+        "/App.tsx": {
+            code: string;
+        };
+        "/index.tsx": {
+            code: string;
+        };
+        "/index.html": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+        "/styles.css": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const SVELTE_TEMPLATE: {
+    files: {
+        "/App.svelte": {
+            code: string;
+        };
+        "/index.js": {
+            code: string;
+        };
+        "/public/index.html": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+        "/styles.css": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const TEST_TYPESCRIPT_TEMPLATE: {
+    files: {
+        "tsconfig.json": {
+            code: string;
+        };
+        "/add.ts": {
+            code: string;
+        };
+        "/add.test.ts": {
+            code: string;
+        };
+        "package.json": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+    mode: string;
+};
+
+declare const VANILLA_TEMPLATE: {
+    files: {
+        "/index.js": {
+            code: string;
+        };
+        "/index.html": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+        "/styles.css": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const VANILLA_TYPESCRIPT_TEMPLATE: {
+    files: {
+        "tsconfig.json": {
+            code: string;
+        };
+        "/index.ts": {
+            code: string;
+        };
+        "/index.html": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+        "/styles.css": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const VUE_TEMPLATE: {
+    files: {
+        "/src/styles.css": {
+            code: string;
+        };
+        "/src/App.vue": {
+            code: string;
+        };
+        "/src/main.js": {
+            code: string;
+        };
+        "/public/index.html": {
+            code: string;
+        };
+        "/package.json": {
+            code: string;
+        };
+    };
+    main: string;
+    environment: string;
+};
+
+declare const SANDBOX_TEMPLATES: {
+    static: {
+        files: {
+            "/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    angular: {
+        files: {
+            "/src/app/app.component.css": {
+                code: string;
+            };
+            "/src/app/app.component.html": {
+                code: string;
+            };
+            "/src/app/app.component.ts": {
+                code: string;
+            };
+            "/src/app/app.module.ts": {
+                code: string;
+            };
+            "/src/index.html": {
+                code: string;
+            };
+            "/src/main.ts": {
+                code: string;
+            };
+            "/src/polyfills.ts": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    react: {
+        files: {
+            "/App.js": {
+                code: string;
+            };
+            "/index.js": {
+                code: string;
+            };
+            "/public/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "react-ts": {
+        files: {
+            "tsconfig.json": {
+                code: string;
+            };
+            "/App.tsx": {
+                code: string;
+            };
+            "/index.tsx": {
+                code: string;
+            };
+            "/public/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    solid: {
+        files: {
+            "/App.tsx": {
+                code: string;
+            };
+            "/index.tsx": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    svelte: {
+        files: {
+            "/App.svelte": {
+                code: string;
+            };
+            "/index.js": {
+                code: string;
+            };
+            "/public/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "test-ts": {
+        files: {
+            "tsconfig.json": {
+                code: string;
+            };
+            "/add.ts": {
+                code: string;
+            };
+            "/add.test.ts": {
+                code: string;
+            };
+            "package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+        mode: string;
+    };
+    "vanilla-ts": {
+        files: {
+            "tsconfig.json": {
+                code: string;
+            };
+            "/index.ts": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    vanilla: {
+        files: {
+            "/index.js": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    vue: {
+        files: {
+            "/src/styles.css": {
+                code: string;
+            };
+            "/src/App.vue": {
+                code: string;
+            };
+            "/src/main.js": {
+                code: string;
+            };
+            "/public/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vue-ts": {
+        files: {
+            "/src/styles.css": {
+                code: string;
+            };
+            "/src/App.vue": {
+                code: string;
+            };
+            "/src/main.ts": {
+                code: string;
+            };
+            "/src/shims-vue.d.ts": string;
+            "/public/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/tsconfig.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    node: {
+        files: {
+            "/index.js": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    nextjs: {
+        files: {
+            "/pages/_app.js": {
+                code: string;
+            };
+            "/pages/index.js": {
+                code: string;
+            };
+            "/next.config.js": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    vite: {
+        files: {
+            "/index.js": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-react": {
+        files: {
+            "/App.jsx": {
+                code: string;
+            };
+            "/index.jsx": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/vite.config.js": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-react-ts": {
+        files: {
+            "/App.tsx": {
+                code: string;
+            };
+            "/index.tsx": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/tsconfig.json": {
+                code: string;
+            };
+            "/tsconfig.node.json": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/vite-env.d.ts": {
+                code: string;
+            };
+            "/vite.config.ts": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-preact": {
+        files: {
+            "/App.jsx": {
+                code: string;
+            };
+            "/index.jsx": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/vite.config.js": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-preact-ts": {
+        files: {
+            "/App.tsx": {
+                code: string;
+            };
+            "/index.tsx": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/tsconfig.json": {
+                code: string;
+            };
+            "/tsconfig.node.json": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+            "/vite-env.d.ts": {
+                code: string;
+            };
+            "/vite.config.ts": {
+                code: string;
+            };
+            "/styles.css": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-vue": {
+        files: {
+            "/src/styles.css": {
+                code: string;
+            };
+            "/src/App.vue": {
+                code: string;
+            };
+            "/src/main.js": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/vite.config.js": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-vue-ts": {
+        files: {
+            "/src/styles.css": {
+                code: string;
+            };
+            "/src/App.vue": {
+                code: string;
+            };
+            "/src/main.ts": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/vite-env.d.ts": {
+                code: string;
+            };
+            "/vite.config.ts": {
+                code: string;
+            };
+            "tsconfig.json": {
+                code: string;
+            };
+            "tsconfig.node.json": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-svelte": {
+        files: {
+            "/src/styles.css": {
+                code: string;
+            };
+            "/src/App.svelte": {
+                code: string;
+            };
+            "/src/main.js": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/vite.config.js": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    "vite-svelte-ts": {
+        files: {
+            "/src/styles.css": {
+                code: string;
+            };
+            "/src/App.svelte": {
+                code: string;
+            };
+            "/src/main.ts": {
+                code: string;
+            };
+            "/index.html": {
+                code: string;
+            };
+            "/vite-env.d.ts": {
+                code: string;
+            };
+            "svelte.config.js": {
+                code: string;
+            };
+            "/vite.config.ts": {
+                code: string;
+            };
+            "tsconfig.json": {
+                code: string;
+            };
+            "tsconfig.node.json": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+    astro: {
+        files: {
+            "/src/styles.css": {
+                code: string;
+            };
+            "/src/pages/index.astro": {
+                code: string;
+            };
+            ".env": {
+                code: string;
+            };
+            "/package.json": {
+                code: string;
+            };
+        };
+        main: string;
+        environment: string;
+    };
+};
+
+/**
+ * ------------------------ Public documentation ------------------------
+ *
+ * From this section on, all types are artificially created and maintained
+ * for public documentation purposes. So, this might not reflect precisely
+ * the component behavior, but it still needs to be reliable and clear for
+ * general usage.
+ */
+interface SandpackExportOptions {
+    /**
+     * Workspace API key from codesandbox.io/t/permissions.
+     * When set, the sandbox will be created inside the given workspace id.
+     */
+    apiToken: string;
+    /**
+     * The default visibility of the new sandboxes inside the workspace.
+     *
+     * @note Use `private` if there is a private registry or private NPM
+     * configured in your workspace.
+     */
+    privacy: "private" | "public";
+}
+interface SandpackProps {
+    /**
+     * The fully-initialized filesystem to use as the source of truth.
+     * Create one with {@link createSandpackFS}.
+     */
+    fs: SandpackFS;
+    /**
+     * The theme specifies the color set of the components, syntax highlight,
+     * and typography. Use this prop in order to match the design aspect of your website.
+     *
+     * Set as `auto` to turn it color scheme sensitive
+     */
+    theme?: SandpackThemeProp;
+    /**
+     * Pass custom properties to customize the interface and the behavior
+     * of the sandbox, such as initialization mode, recompile mode, etc.
+     */
+    options?: SandpackOptions;
+    /**
+     * CodeSandbox team id: with this information, bundler can connect to CodeSandbox
+     * and unlock a few capabilities, like private dependencies.
+     */
+    teamId?: string;
+    /**
+     * Options for exporting the sandbox to CodeSandbox.
+     */
+    exportOptions?: SandpackExportOptions;
+    /**
+     * Custom npm registry configuration.
+     */
+    npmRegistries?: NpmRegistry[];
+}
+/**
+ * @category Setup
+ */
+interface SandpackOptions {
+    /**
+     * List of files that will be visible for the user interacts with.
+     * It defaults to the non-hidden files from the filesystem.
+     */
+    visibleFiles?: string[];
+    /**
+     * Use this to set a file as active by default in the editor component.
+     * It defaults to the first visible file.
+     */
+    activeFile?: string;
+    editorWidthPercentage?: number;
+    editorHeight?: React__default.CSSProperties["height"];
+    classes?: Record<string, string>;
+    /**
+     * right to left layout
+     * @default false
+     */
+    rtl?: boolean;
+    showNavigator?: boolean;
+    showLineNumbers?: boolean;
+    showInlineErrors?: boolean;
+    showRefreshButton?: boolean;
+    showTabs?: boolean;
+    showConsoleButton?: boolean;
+    showConsole?: boolean;
+    closableTabs?: boolean;
+    wrapContent?: boolean;
+    resizablePanels?: boolean;
+    codeEditor?: SandpackCodeOptions;
+    /**
+     * This disables editing of content by the user in all files.
+     */
+    readOnly?: boolean;
+    /**
+     * Controls the visibility of Read-only label, which will only
+     * appears when `readOnly` is `true`
+     */
+    showReadOnly?: boolean;
+    layout?: "preview" | "tests" | "console";
+    /**
+     * This provides a way to control how some components are going to
+     * be initialized on the page. The CodeEditor and the Preview components
+     * are quite expensive and might overload the memory usage, so this gives
+     * a certain control of when to initialize them.
+     */
+    initMode?: SandpackInitMode;
+    initModeObserverOptions?: IntersectionObserverInit;
+    /**
+     * Determines whether or not the bundling process should start automatically.
+     */
+    autorun?: boolean;
+    /**
+     * Determines whether or not the component should automatically reload when
+     * changes are made to the code.
+     */
+    autoReload?: boolean;
+    recompileMode?: "immediate" | "delayed";
+    recompileDelay?: number;
+    /**
+     * By default, Sandpack generates a random value to use as an id.
+     * Use this to override this value if you need predictable values.
+     */
+    id?: string;
+    logLevel?: SandpackLogLevel;
+    bundlerURL?: string;
+    babelWorkerURL?: string;
+    startRoute?: string;
+    skipEval?: boolean;
+    externalResources?: string[];
+}
+/**
+ * @category Setup
+ */
+interface SandpackSetup {
+    dependencies?: Record<string, string>;
+    devDependencies?: Record<string, string>;
+    entry?: string;
+    environment?: SandboxEnvironment;
+    npmRegistries?: NpmRegistry[];
+    exportOptions?: SandpackExportOptions;
+}
+/**
+ * @category Setup
+ */
+type SandboxEnvironment = "angular-cli" | "create-react-app" | "create-react-app-typescript" | "svelte" | "parcel" | "vue-cli" | "static" | "solid" | "node";
+/**
+ * @category Setup
+ */
+type SandpackPredefinedTemplate = keyof typeof SANDBOX_TEMPLATES;
+/**
+ * @category Setup
+ */
+interface SandpackFile {
+    code: string;
+    hidden?: boolean;
+    active?: boolean;
+    readOnly?: boolean;
+}
+type SandpackFiles = Record<string, string | SandpackFile>;
+/**
+ * `immediate`: It immediately mounts all components, such as the code-editor
+ * and the preview - this option might overload the memory usage
+ * and resource from the browser on a page with multiple instances;
+ *
+ * `lazy`: Only initialize the components when the user is about to scroll
+ * them to the viewport and keep these components mounted until the user
+ * leaves the page - this is the default value;
+ *
+ * `user-visible`: Only initialize the components when the user is about
+ * to scroll them to the viewport, but differently from lazy, this option
+ * unmounts those components once it's no longer in the viewport.
+ *
+ * @category Setup
+ */
+type SandpackInitMode = "immediate" | "lazy" | "user-visible";
+/**
+ * @category Setup
+ */
+interface CustomLanguage {
+    name: string;
+    extensions: string[];
+    language: LanguageSupport;
+}
+/**
+ * @category Theme
+ */
+type SandpackPredefinedTheme = "light" | "dark" | "auto";
+/**
+ * @category Theme
+ */
+interface SandpackTheme {
+    colors: {
+        surface1: string;
+        surface2: string;
+        surface3: string;
+        disabled: string;
+        base: string;
+        clickable: string;
+        hover: string;
+        accent: string;
+        error?: string;
+        errorSurface?: string;
+        warning?: string;
+        warningSurface?: string;
+    };
+    syntax: {
+        plain: string | SandpackSyntaxStyle;
+        comment: string | SandpackSyntaxStyle;
+        keyword: string | SandpackSyntaxStyle;
+        definition: string | SandpackSyntaxStyle;
+        punctuation: string | SandpackSyntaxStyle;
+        property: string | SandpackSyntaxStyle;
+        tag: string | SandpackSyntaxStyle;
+        static: string | SandpackSyntaxStyle;
+        string?: string | SandpackSyntaxStyle;
+    };
+    font: {
+        body: string;
+        mono: string;
+        size: string;
+        lineHeight: string;
+    };
+}
+/**
+ * @category Theme
+ */
+interface SandpackSyntaxStyle {
+    color?: string;
+    fontStyle?: "normal" | "italic";
+    fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+    textDecoration?: "none" | "underline" | "line-through" | "underline line-through";
+}
+/**
+ * @category Theme
+ */
+type SandpackThemeProp = SandpackPredefinedTheme | DeepPartial<SandpackTheme>;
+/**
+ *
+ * ------------------------ Internal types ---------------------------
+ *
+ * From this section on, all types are hidden because most of them are
+ * strictly related to the internal typing system, and they are not
+ * helpful for public documentation.
+ *
+ * For public purpose use SandpackProps instead.
+ */
+interface SandpackInternal {
+    (props: SandpackInternalProps): React__default.ReactElement;
+}
+interface SandpackInternalProvider {
+    (props: React__default.PropsWithChildren<SandpackProviderProps>): React__default.ReactElement<SandpackProviderProps, React__default.Provider<SandpackProviderState>> | null;
+}
+interface SandpackRootProps {
+    fs: SandpackFS;
+    theme?: SandpackThemeProp;
+    teamId?: string;
+    sandboxId?: string;
+    exportOptions?: SandpackExportOptions;
+    npmRegistries?: NpmRegistry[];
+}
+interface SandpackInternalOptions {
+    visibleFiles?: string[];
+    activeFile?: string;
+    initMode?: SandpackInitMode;
+    initModeObserverOptions?: IntersectionObserverInit;
+    autorun?: boolean;
+    autoReload?: boolean;
+    recompileMode?: "immediate" | "delayed";
+    recompileDelay?: number;
+    id?: string;
+    logLevel?: SandpackLogLevel;
+    bundlerURL?: string;
+    babelWorkerURL?: string;
+    bundlerTimeOut?: number;
+    startRoute?: string;
+    skipEval?: boolean;
+    externalResources?: string[];
+    classes?: Record<string, string>;
+    experimental_enableServiceWorker?: boolean;
+    experimental_enableStableServiceWorkerId?: boolean;
+    /**
+     * Host-pinned SDK artifact integrity hashes (SDK_PACKAGING_SPEC §5.2),
+     * forwarded to the runtime client and on to the bundler for verify-before-
+     * evaluate. Absent ⇒ verification skipped.
+     */
+    sdkIntegrity?: SdkIntegrity;
+    /**
+     * The dirty set (PRETRANSPILED_ARTIFACTS_SPEC §5.2): repo-relative paths in the
+     * COW writable layer + the journal's deleted set, forwarded to the runtime
+     * client and on to the bundler so seeding skips artifacts for paths edited in a
+     * previous session. Absent ⇒ nothing dirty.
+     */
+    dirtyPaths?: string[];
+    /**
+     * R3-49b ZenFS batch hydration: a bulk snapshot of the mounted tree, forwarded to
+     * the runtime client and on to the bundler, which hydrates its read caches before
+     * the first compile so reads come from memory instead of per-file Port round-trips.
+     * Absent ⇒ reads cross the Port as before.
+     */
+    fsSnapshot?: FsSnapshot;
+    /**
+     * The chrome region this app instance occupies, e.g. `"panel.agent"` or
+     * `"stage.conversation"` (R3-114). Forwarded to the runtime client and on to the
+     * bundler, which surfaces it on the `__immediatelyRun__` runtime global for the
+     * SDK's `getRegion()`/`useRegion()`. Descriptive only — grants and gates nothing.
+     * Absent ⇒ the app reads no region.
+     */
+    region?: string;
+}
+interface SandpackInternalProps extends SandpackRootProps {
+    options?: SandpackInternalOptions & {
+        editorWidthPercentage?: number;
+        editorHeight?: React__default.CSSProperties["height"];
+        /**
+         * right to left layout
+         * @default false
+         */
+        rtl?: boolean;
+        showNavigator?: boolean;
+        showLineNumbers?: boolean;
+        showInlineErrors?: boolean;
+        showRefreshButton?: boolean;
+        showTabs?: boolean;
+        showConsoleButton?: boolean;
+        showConsole?: boolean;
+        closableTabs?: boolean;
+        wrapContent?: boolean;
+        resizablePanels?: boolean;
+        codeEditor?: SandpackCodeOptions;
+        /**
+         * This disables editing of content by the user in all files.
+         */
+        readOnly?: boolean;
+        /**
+         * Controls the visibility of Read-only label, which will only
+         * appears when `readOnly` is `true`
+         */
+        showReadOnly?: boolean;
+        layout?: "preview" | "tests" | "console";
+    };
+}
+interface SandpackProviderProps extends SandpackRootProps, React__default.HTMLAttributes<HTMLDivElement> {
+    options?: SandpackInternalOptions;
+    children?: React__default.ReactNode;
+}
+type SandpackClientDispatch = (msg: SandpackMessage, clientId?: string) => void;
+type SandpackClientListen = (listener: ListenerFunction, clientId?: string) => UnsubscribeFunction;
+type SandpackContext = SandpackState & {
+    dispatch: SandpackClientDispatch;
+    listen: SandpackClientListen;
+};
+interface SandpackState {
+    bundlerState: BundlerState | undefined;
+    /**
+     * List the file path listed in the file tab,
+     * which will allow the user to interact with.
+     */
+    visibleFiles: string[];
+    /**
+     * List the file path listed in the file tab,
+     * Can only be changed through the properties of SandpackProvider (fs/options)
+     *
+     * @internal
+     */
+    visibleFilesFromProps: string[];
+    /**
+     * Path to the file will be open in the code editor
+     * when the component mounts
+     */
+    activeFile: string;
+    startRoute?: string;
+    autoReload: boolean;
+    /**
+     * Returns the current state of the editor, meaning that any
+     * changes from the original `files` must return a `dirty` value;
+     * otherwise, it'll return `pristine`
+     */
+    editorState: EditorState;
+    teamId?: string;
+    exportOptions?: SandpackExportOptions;
+    error: SandpackError | null;
+    /**
+     * The filesystem backing all files rendered inside Sandpack. Use this for
+     * async `readFile`/`writeFile`/`list` access.
+     */
+    fs: SandpackFS;
+    /**
+     * Snapshot of every file path known to {@link fs}, updated whenever the
+     * filesystem mutates.
+     */
+    fileList: string[];
+    /**
+     * Snapshot of the per-file UI metadata (`hidden`, `active`, `readOnly`)
+     * stored in the filesystem sidecar, updated whenever metadata changes.
+     */
+    fileMeta: FileMetaMap;
+    environment?: SandboxEnvironment;
+    status: SandpackStatus;
+    /**
+     * True while the async initialization of the filesystem is in flight.
+     * Consumers should treat `fileList` and `fileMeta` as not yet
+     * available while this is `true`.
+     */
+    isLoading: boolean;
+    initMode: SandpackInitMode;
+    clients: Record<string, InstanceType<typeof SandpackClient>>;
+    runSandpack: () => Promise<void>;
+    registerBundler: (iframe: HTMLIFrameElement, clientId: string, clientPropsOverride?: ClientPropsOverride) => Promise<void>;
+    unregisterBundler: (clientId: string) => void;
+    updateFile: (path: string, code: string, shouldUpdatePreview?: boolean) => Promise<void>;
+    addFile: (path: string, code: string, shouldUpdatePreview?: boolean) => Promise<void>;
+    updateCurrentFile: (newCode: string, shouldUpdatePreview?: boolean) => Promise<void>;
+    openFile: (path: string) => void;
+    closeFile: (path: string) => void;
+    deleteFile: (path: string, shouldUpdatePreview?: boolean) => Promise<void>;
+    setActiveFile: (path: string) => void;
+    resetFile: (path: string) => Promise<void>;
+    resetAllFiles: () => Promise<void>;
+    registerReactDevTools: (value: ReactDevToolsMode) => void;
+    /**
+     * Element refs
+     * Different components inside the SandpackProvider might register certain elements of interest for sandpack
+     * eg: lazy anchor - if no component registers this, then the sandpack runs on mount, without lazy mode
+     */
+    lazyAnchorRef: React__default.RefObject<HTMLDivElement | null>;
+    unsubscribeClientListenersRef: React__default.MutableRefObject<Record<string, Record<string, UnsubscribeFunction>>>;
+    queuedListenersRef: React__default.MutableRefObject<Record<string, Record<string, ListenerFunction>>>;
+}
+type SandpackStatus = "initial" | "idle" | "running" | "timeout" | "done";
+type EditorState = "pristine" | "dirty";
+/**
+ * Custom properties to be used in the SandpackCodeEditor component,
+ * some of which are exclusive to customize the CodeMirror instance.
+ * @hidden
+ */
+interface SandpackCodeOptions {
+    /**
+     * CodeMirror extensions for the editor state, which can
+     * provide extra features and functionalities to the editor component.
+     */
+    extensions?: CodeEditorProps["extensions"];
+    /**
+     * Property to register CodeMirror extension keymap.
+     */
+    extensionsKeymap?: CodeEditorProps["extensionsKeymap"];
+    /**
+     * Provides a way to add custom language modes by supplying a language
+     * type, applicable file extensions, and a LanguageSupport instance
+     * for that syntax mode
+     */
+    additionalLanguages?: CodeEditorProps["additionalLanguages"];
+}
+type DeepPartial<Type> = {
+    [Property in keyof Type]?: DeepPartial<Type[Property]>;
+};
+interface SandpackProviderState {
+    fs: SandpackFS;
+    fileList: string[];
+    fileMeta: FileMetaMap;
+    environment?: SandboxEnvironment;
+    visibleFiles: string[];
+    visibleFilesFromProps: string[];
+    activeFile: string;
+    startRoute?: string;
+    initMode: SandpackInitMode;
+    bundlerState?: BundlerState;
+    error: SandpackError | null;
+    sandpackStatus: SandpackStatus;
+    editorState: EditorState;
+    reactDevTools?: ReactDevToolsMode;
+}
+
+type Decorators = Array<{
+    className?: string;
+    line: number;
+    startColumn?: number;
+    endColumn?: number;
+    elementAttributes?: Record<string, string>;
+}>;
+interface CodeMirrorProps {
+    code: string;
+    filePath?: string;
+    fileType?: string;
+    onCodeUpdate?: (newCode: string) => void;
+    showLineNumbers?: boolean;
+    showInlineErrors?: boolean;
+    wrapContent?: boolean;
+    editorState?: EditorState;
+    /**
+     * This disables editing of content by the user in all files.
+     */
+    readOnly?: boolean;
+    /**
+     * Controls the visibility of Read-only label, which will only
+     * appears when `readOnly` is `true`
+     */
+    showReadOnly?: boolean;
+    /**
+     * Provides a way to draw or style a piece of the content.
+     */
+    decorators?: Decorators;
+    initMode: SandpackInitMode;
+    extensions?: Extension[];
+    extensionsKeymap?: KeyBinding[];
+    /**
+     * Provides a way to add custom language modes by supplying a language
+     * type, applicable file extensions, and a LanguageSupport instance
+     * for that syntax mode
+     */
+    additionalLanguages?: CustomLanguage[];
+}
+interface CodeMirrorRef {
+    getCodemirror: () => EditorView | undefined;
+}
+declare const CodeMirror: React$1.ForwardRefExoticComponent<CodeMirrorProps & React$1.RefAttributes<CodeMirrorRef>>;
+
+type CodeEditorRef = CodeMirrorRef;
+interface CodeEditorProps {
+    style?: React.CSSProperties;
+    className?: string;
+    showTabs?: boolean;
+    showLineNumbers?: boolean;
+    showInlineErrors?: boolean;
+    showRunButton?: boolean;
+    wrapContent?: boolean;
+    closableTabs?: boolean;
+    /**
+     * This provides a way to control how some components are going to
+     * be initialized on the page. The CodeEditor and the Preview components
+     * are quite expensive and might overload the memory usage, so this gives
+     * a certain control of when to initialize them.
+     */
+    initMode?: SandpackInitMode;
+    /**
+     * CodeMirror extensions for the editor state, which can
+     * provide extra features and functionalities to the editor component.
+     */
+    extensions?: Extension[];
+    /**
+     * Property to register CodeMirror extension keymap.
+     */
+    extensionsKeymap?: KeyBinding[];
+    /**
+     * This disables editing of the editor content by the user.
+     */
+    readOnly?: boolean;
+    /**
+     * Controls the visibility of Read-only label, which will only
+     * appears when `readOnly` is `true`
+     */
+    showReadOnly?: boolean;
+    /**
+     * Provides a way to add custom language modes by supplying a language
+     * type, applicable file extensions, and a LanguageSupport instance
+     * for that syntax mode
+     */
+    additionalLanguages?: CustomLanguage[];
+}
+
+declare const SandpackCodeEditor: React$1.ForwardRefExoticComponent<CodeEditorProps & React$1.RefAttributes<CodeMirrorRef>>;
+
+interface CodeViewerProps {
+    showTabs?: boolean;
+    showLineNumbers?: boolean;
+    /**
+     * Provides a way to draw or style a piece of the content.
+     */
+    decorators?: Decorators;
+    code?: string;
+    wrapContent?: boolean;
+    /**
+     * This provides a way to control how some components are going to
+     * be initialized on the page. The CodeEditor and the Preview components
+     * are quite expensive and might overload the memory usage, so this gives
+     * a certain control of when to initialize them.
+     */
+    initMode?: SandpackInitMode;
+    /**
+     * Provides a way to add custom language modes by supplying a language
+     * type, applicable file extensions, and a LanguageSupport instance
+     * for that syntax mode
+     */
+    additionalLanguages?: CustomLanguage[];
+}
+declare const SandpackCodeViewer: React$1.ForwardRefExoticComponent<CodeViewerProps & React$1.RefAttributes<CodeMirrorRef>>;
+
+interface SandpackFileExplorerProp {
+    /**
+     * enable auto hidden file in file explorer
+     *
+     * @description set with hidden property in files property
+     * @default false
+     */
+    autoHiddenFiles?: boolean;
+    initialCollapsedFolder?: string[];
+}
+declare const SandpackFileExplorer: ({ className, autoHiddenFiles, initialCollapsedFolder, ...props }: SandpackFileExplorerProp & React$1.HTMLAttributes<HTMLDivElement>) => React$1.JSX.Element | null;
+
+declare const tabButton: string;
+
+interface FileTabsProps {
+    /**
+     * This adds a close button next to each file with a unique trigger to close it.
+     */
+    closableTabs?: boolean;
+    /**
+     * unique id appended with active files. This is
+     * used in aria-controls value along the combination of activeFile
+     */
+    activeFileUniqueId?: string;
+}
+/**
+ * FileTabs is a list of all open files, the active file, and its state.
+ */
+declare const FileTabs: ({ closableTabs, className, activeFileUniqueId, ...props }: FileTabsProps & React$1.HTMLAttributes<HTMLDivElement>) => React$1.JSX.Element;
+
+interface NavigatorProps {
+    clientId: string;
+    onURLChange?: (newURL: string) => void;
+    startRoute?: string;
+}
+declare const Navigator: ({ clientId, onURLChange, className, startRoute, ...props }: NavigatorProps & React$1.HTMLAttributes<HTMLDivElement>) => React$1.JSX.Element;
+
+interface PreviewProps {
+    style?: React$1.CSSProperties;
+    showNavigator?: boolean;
+    showOpenInCodeSandbox?: boolean;
+    showRefreshButton?: boolean;
+    showRestartButton?: boolean;
+    /**
+     * Whether to show the `<ErrorOverlay>` component on top of
+     * the preview, if a runtime error happens.
+     */
+    showSandpackErrorOverlay?: boolean;
+    showOpenNewtab?: boolean;
+    actionsChildren?: React$1.JSX.Element;
+    children?: React$1.JSX.Element;
+    startRoute?: string;
+}
+interface SandpackPreviewRef {
+    /**
+     * Retrieve the current Sandpack client instance from preview
+     */
+    getClient: () => InstanceType<typeof SandpackClient> | null;
+    /**
+     * Returns the client id, which will be used to
+     * initialize a client in the main Sandpack context
+     */
+    clientId: string;
+}
+declare const SandpackPreview: React$1.ForwardRefExoticComponent<PreviewProps & React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<SandpackPreviewRef>>;
+
+declare const SandpackTranspiledCode: ({ className, ...props }: CodeViewerProps & React$1.HTMLAttributes<HTMLDivElement>) => React$1.JSX.Element;
+
+type TestStatus = "idle" | "running" | "pass" | "fail";
+interface Test {
+    name: string;
+    blocks: string[];
+    status: TestStatus;
+    path: string;
+    errors: TestError[];
+    duration?: number | undefined;
+}
+
+interface Describe {
+    name: string;
+    tests: Record<string, Test>;
+    describes: Record<string, Describe>;
+}
+
+type Spec = {
+    error?: TestError;
+} & Describe;
+
+declare const SandpackTests: React$1.FC<{
+    verbose?: boolean;
+    watchMode?: boolean;
+    onComplete?: (specs: Record<string, Spec>) => void;
+    actionsChildren?: React$1.JSX.Element;
+    showVerboseButton?: boolean;
+    showWatchButton?: boolean;
+    /**
+     * Hide the tests and supress logs
+     * If `true` the tests will be hidden and the logs will be supressed. This is useful when you want to run tests in the background and don't want to show the tests to the user.
+     * @default false
+     */
+    hideTestsAndSupressLogs?: boolean;
+} & React$1.HtmlHTMLAttributes<HTMLDivElement>>;
+
+type SandpackConsoleData = Array<{
+    data: Array<string | Record<string, string>> | undefined;
+    id: string;
+    method: SandpackMessageConsoleMethods;
+}>;
+
+interface SandpackConsoleProps {
+    clientId?: string;
+    showHeader?: boolean;
+    showSyntaxError?: boolean;
+    showSetupProgress?: boolean;
+    showRestartButton?: boolean;
+    showResetConsoleButton?: boolean;
+    maxMessageCount?: number;
+    onLogsChange?: (logs: SandpackConsoleData) => void;
+    resetOnPreviewRestart?: boolean;
+    standalone?: boolean;
+    actionsChildren?: React$1.JSX.Element;
+}
+interface SandpackConsoleRef {
+    reset: () => void;
+}
+/**
+ * `SandpackConsole` is a Sandpack devtool that allows printing
+ * the console logs from a Sandpack client. It is designed to be
+ * a light version of a browser console, which means that it's
+ * limited to a set of common use cases you may encounter when coding.
+ */
+declare const SandpackConsole: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & SandpackConsoleProps & React$1.RefAttributes<SandpackConsoleRef>>;
+
+/**
+ * It provides an interface to consume the logs from a sandpack client.
+ *
+ * @category Hooks
+ */
+declare const useSandpackConsole: ({ clientId, maxMessageCount, showSyntaxError, resetOnPreviewRestart, }: {
+    clientId?: string;
+    maxMessageCount?: number;
+    showSyntaxError?: boolean;
+    resetOnPreviewRestart: boolean;
+}) => {
+    logs: SandpackConsoleData;
+    reset: () => void;
+};
+
+declare const layoutClassName: string;
+
+interface SandpackLayoutProps extends React$1.HtmlHTMLAttributes<unknown> {
+    children?: React$1.ReactNode;
+}
+declare const SandpackLayout: React$1.ForwardRefExoticComponent<SandpackLayoutProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const stackClassName: string;
+
+declare const SandpackStack: React$1.FC<React$1.HTMLAttributes<HTMLDivElement> & {
+    children?: React$1.ReactNode;
+}>;
+
+type ErrorOverlayProps = React$1.HTMLAttributes<HTMLDivElement> & {
+    children?: React$1.ReactNode;
+};
+declare const ErrorOverlay: React$1.FC<ErrorOverlayProps>;
+
+interface LoadingOverlayProps {
+    clientId?: string;
+    /**
+     * It enforces keeping the loading state visible,
+     * which is helpful for external loading states.
+     */
+    loading?: boolean;
+    showOpenInCodeSandbox: boolean;
+}
+declare const LoadingOverlay: React$1.FC<LoadingOverlayProps & React$1.HTMLAttributes<HTMLDivElement>>;
+
+declare const OpenInCodeSandboxButton: () => JSX.Element | null;
+
+declare const UnstyledOpenInCodeSandboxButton: React$1.FC<React$1.HtmlHTMLAttributes<unknown>>;
+
+declare const RunButton: React$1.FC<React$1.PropsWithChildren & React$1.ButtonHTMLAttributes<unknown>>;
+
+declare const RoundedButton: React__default.FC<React__default.PropsWithChildren & React__default.ButtonHTMLAttributes<unknown>>;
+
+declare const DependenciesProgress: React.FC<{
+    clientId?: string;
+}>;
+
+/**
+ * Returns the current contents of the active file together with helpers to
+ * edit it. Content is fetched asynchronously from the backing
+ * {@link import("@immediately-run/sandpack-client").SandpackFS} so
+ * `code` is `undefined` until the first read resolves (reflected via
+ * `isLoading`).
+ *
+ * The editor owns the active file's buffer: `code` is loaded once per file and
+ * re-read only when the file is changed *externally* (i.e. by code running in
+ * the child iframe). The editor's own edits are never read back — that's what
+ * keeps typing free of echo/clobber.
+ *
+ * @category Hooks
+ */
+declare const useActiveCode: () => {
+    code: string;
+    readOnly: boolean;
+    isLoading: boolean;
+    updateCode: (newCode: string, shouldUpdatePreview?: boolean) => Promise<void>;
+};
+
+/**
+ * @category Hooks
+ */
+declare const useErrorMessage: () => string | null;
+
+type LoadingOverlayState = "LOADING" | "PRE_FADING" | "FADING" | "HIDDEN" | "TIMEOUT";
+declare const FADE_ANIMATION_DURATION = 200;
+/**
+ * @category Hooks
+ */
+declare const useLoadingOverlayState: (clientId?: string, externalLoading?: boolean) => LoadingOverlayState;
+
+/**
+ * @category Hooks
+ */
+interface UseSandpack {
+    sandpack: SandpackState;
+    dispatch: SandpackClientDispatch;
+    listen: SandpackClientListen;
+}
+/**
+ * @category Hooks
+ */
+declare function useSandpack(): UseSandpack;
+
+/**
+ * @category Hooks
+ */
+declare const useSandpackNavigation: (clientId?: string) => {
+    refresh: () => void;
+    back: () => void;
+    forward: () => void;
+};
+
+/**
+ * @category Hooks
+ */
+declare const useSandpackTheme: () => {
+    theme: SandpackTheme;
+    themeId: string;
+    themeMode: "dark" | "light" | "auto";
+};
+
+/**
+ * @category Hooks
+ */
+declare const useTranspiledCode: () => string | null;
+
+interface UseSandpackClient {
+    sandpack: SandpackState;
+    getClient: () => InstanceType<typeof SandpackClient> | null;
+    iframe: React$1.MutableRefObject<HTMLIFrameElement | null>;
+    listen: (listener: ListenerFunction) => UnsubscribeFunction;
+    dispatch: (message: SandpackMessage) => void;
+    clientId: string;
+}
+/**
+ * It registers a new sandpack client and returns its instance,
+ * listeners, and dispatch function. Using it when creating a custom
+ * component to interact directly with the client is recommended.
+ * For other cases, use `useSandpack` instead.
+ *
+ * @category Hooks
+ */
+declare const useSandpackClient: (clientPropsOverride?: ClientPropsOverride) => UseSandpackClient;
+
+/**
+ * @category Hooks
+ */
+declare const useSandpackShell: (clientId?: string) => {
+    restart: () => void;
+    openPreview: () => void;
+};
+
+declare const useSandpackPreviewProgress: (props: {
+    timeout?: number;
+    clientId?: string;
+} | undefined) => string | null;
+
+declare const useSandpackShellStdout: ({ clientId, maxMessageCount, resetOnPreviewRestart: _resetOnPreviewRestart, }: {
+    clientId?: string;
+    maxMessageCount?: number;
+    resetOnPreviewRestart?: boolean;
+}) => {
+    logs: Array<{
+        id: string;
+        data: string;
+    }>;
+    reset: () => void;
+};
+
+declare const useClassNames: () => (customClassName: string, allClassNames?: any[]) => string;
+
+/**
+ * Returns the full Sandpack stylesheet as a string.
+ *
+ * Useful for SSR scenarios where you want to inline the CSS into the HTML
+ * `<style>` tag instead of relying on a separate stylesheet request. The text
+ * is generated at build time from every vanilla-extract `*.css.ts` file shipped
+ * with `@immediately-run/sandpack-react`.
+ *
+ * @category Theme
+ *
+ * Tip: in environments that allow it, prefer importing the stylesheet directly
+ * (`import "@immediately-run/sandpack-react/styles.css"`); it lets the browser
+ * cache the CSS independently from the HTML payload.
+ */
+declare const getSandpackCssText: () => string;
+
+declare const SandpackThemeContext: React$1.Context<{
+    theme: SandpackTheme;
+    id: string;
+    mode: "dark" | "light" | "auto";
+}>;
+/**
+ * @category Theme
+ */
+declare const SandpackThemeProvider: React$1.FC<React$1.HTMLAttributes<HTMLDivElement> & {
+    theme?: SandpackThemeProp;
+    children?: React$1.ReactNode;
+}>;
+declare const SandpackThemeConsumer: React$1.Consumer<{
+    theme: SandpackTheme;
+    id: string;
+    mode: "dark" | "light" | "auto";
+}>;
+
+declare const Sandpack$1: React$1.Context<SandpackContext | null>;
+
+declare const SandpackProvider: React$1.FC<SandpackProviderProps>;
+/**
+ * @category Provider
+ */
+declare const SandpackConsumer: React$1.Consumer<SandpackContext | null>;
+
+declare const Sandpack: SandpackInternal;
+
+/**
+ * @category Theme
+ */
+declare const defaultLight: SandpackTheme;
+/**
+ * @category Theme
+ */
+declare const defaultDark: SandpackTheme;
+/**
+ * @category Theme
+ */
+declare const SANDPACK_THEMES: Record<SandpackPredefinedTheme, SandpackTheme>;
+
+interface SandboxTemplate {
+    files: SandpackFilesInput;
+    dependencies: Record<string, string>;
+    devDependencies?: Record<string, string>;
+    entry?: string;
+    main: string;
+    environment: SandboxEnvironment;
+    mode?: string;
+}
+interface CreateSandpackFSOptions {
+    template?: SandpackPredefinedTemplate;
+    customSetup?: SandpackSetup;
+    files?: SandpackFiles;
+}
+/**
+ * Resolve a file path against a file map, trying various JS extensions.
+ * Returns the normalized path if found, or null.
+ */
+declare const resolveFile: (path: string, files: Record<string, unknown>) => string | null;
+declare const createSandpackFromFS: (fsContext: BoundContext, remotePortFactory: (onRemoteChange: (path: string) => void) => Promise<MessagePort>, onWrite?: (path: string) => void) => Promise<SandpackFS>;
+/**
+ * Build a fully-initialized {@link SandpackFS} from the JS-object convenience
+ * inputs (template, customSetup, files). Consumers call this once and pass the
+ * result as the `fs` prop to `SandpackProvider`.
+ *
+ * `remotePortFactory` is supplied by the host app (it owns the port handoff to
+ * the preview iframe, e.g. site-main's `exportZenFS`), mirroring
+ * {@link createSandpackFromFS}.
+ */
+declare const createSandpackFS: (options: CreateSandpackFSOptions | undefined, remotePortFactory: (onRemoteChange: (path: string) => void) => Promise<MessagePort>) => Promise<SandpackFS>;
+
+export { ANGULAR_TEMPLATE, ASTRO_TEMPLATE, BackwardIcon, CleanIcon, CloseIcon, CodeMirror as CodeEditor, ConsoleIcon, DependenciesProgress, DirectoryIconClosed, DirectoryIconOpen, ErrorOverlay, ExportIcon, FADE_ANIMATION_DURATION, FileIcon, FileTabs, ForwardIcon, LoadingOverlay, Navigator, OpenInCodeSandboxButton, REACT_TEMPLATE, REACT_TYPESCRIPT_TEMPLATE, RefreshIcon, RestartIcon, RoundedButton, RunButton, RunIcon, SANDBOX_TEMPLATES, SANDPACK_THEMES, SOLID_TEMPLATE, SVELTE_TEMPLATE, Sandpack, SandpackCodeEditor, SandpackCodeViewer, SandpackConsole, SandpackConsumer, SandpackFileExplorer, SandpackLayout, SandpackPreview, SandpackProvider, Sandpack$1 as SandpackReactContext, SandpackStack, SandpackTests, SandpackThemeConsumer, SandpackThemeContext, SandpackThemeProvider, SandpackTranspiledCode, SignInIcon, SignOutIcon, TEST_TYPESCRIPT_TEMPLATE, UnstyledOpenInCodeSandboxButton, VANILLA_TEMPLATE, VANILLA_TYPESCRIPT_TEMPLATE, VUE_TEMPLATE, createSandpackFS, createSandpackFromFS, defaultDark, defaultLight, getSandpackCssText, layoutClassName, resolveFile, stackClassName, tabButton, useActiveCode, useClassNames, useErrorMessage, useLoadingOverlayState, useSandpack, useSandpackClient, useSandpackConsole, useSandpackNavigation, useSandpackPreviewProgress, useSandpackShell, useSandpackShellStdout, useSandpackTheme, useTranspiledCode };
+export type { CodeEditorProps, CodeEditorRef, CodeViewerProps, CreateSandpackFSOptions, CustomLanguage, DeepPartial, EditorState, ErrorOverlayProps, FileTabsProps, LoadingOverlayProps, LoadingOverlayState, NavigatorProps, PreviewProps, SandboxEnvironment, SandboxTemplate, SandpackClientDispatch, SandpackClientListen, SandpackCodeOptions, SandpackContext, SandpackExportOptions, SandpackFile, SandpackFileExplorerProp, SandpackFiles, SandpackInitMode, SandpackInternal, SandpackInternalOptions, SandpackInternalProvider, SandpackLayoutProps, SandpackOptions, SandpackPredefinedTemplate, SandpackPredefinedTheme, SandpackPreviewRef, SandpackProps, SandpackProviderProps, SandpackProviderState, SandpackSetup, SandpackState, SandpackStatus, SandpackTheme, SandpackThemeProp, UseSandpack };