@seedgrid/fe-components 2026.3.2 → 2026.3.3-2

package/dist/others/SgPlayground.js

@@ -7,12 +7,43 @@ import { SgCard } from "../layout/SgCard";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-const DEFAULT_SEEDGRID_DEPENDENCY = "2026.3.1";
-const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
-    "@codesandbox/sandpack-react": "^2.20.0",
-    "react-hook-form": "^7.0.0",
-    "lucide-react": "^0.468.0",
+const DEFAULT_SEEDGRID_DEPENDENCY = "latest";
+const DEFAULT_SANDPACK_BUNDLER_URL = "https://sandpack.seedgrid.com.br";
+const DEFAULT_SANDPACK_BUNDLER_TIMEOUT_MS = 60000;
+const DEFAULT_SANDBOX_BASE_DEPENDENCIES = {
+    react: "18.2.0",
+    "react-dom": "18.2.0"
+};
+const DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES = {
+    "react-hook-form": "^7.0.0"
+};
+// lucide-react is a heavy peer dep (~1400 icons). For non-full presets we shim it with
+// a generic SVG placeholder to avoid OOM in the browser bundler.
+const SANDPACK_LUCIDE_REACT_SHIM_INDEX_JS = `const React = require("react");
+const Icon = function(props) {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || props.width || 16,
+    height: props.size || props.height || 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: props.color || "currentColor",
+    strokeWidth: props.strokeWidth || 2,
+    className: props.className
+  });
+};
+const proxy = new Proxy({}, {
+  get: function(_, key) {
+    if (key === "__esModule") return true;
+    return Icon;
+  }
+});
+module.exports = proxy;
+`;
+const DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES = {
+    "@tiptap/core": "^2.9.1",
     "@tiptap/react": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
     "@tiptap/extension-underline": "^2.9.1",
     "@tiptap/extension-link": "^2.9.1",
@@ -25,10 +56,255 @@ const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
     "@tiptap/extension-superscript": "^2.9.1",
     "@tiptap/extension-font-family": "^2.9.1"
 };
+const DEFAULT_SANDBOX_HOST_DEPENDENCIES = {
+    "@codesandbox/sandpack-react": "^2.20.0"
+};
+const DEFAULT_SANDPACK_POLYFILLS = {
+    assert: "^2.1.0",
+    process: "^0.11.10",
+    util: "^0.12.5"
+};
+const TIPTAP_SHIM_PACKAGES = [
+    "@tiptap/core",
+    "@tiptap/pm",
+    "@tiptap/starter-kit",
+    "@tiptap/extension-underline",
+    "@tiptap/extension-link",
+    "@tiptap/extension-image",
+    "@tiptap/extension-text-align",
+    "@tiptap/extension-text-style",
+    "@tiptap/extension-color",
+    "@tiptap/extension-highlight",
+    "@tiptap/extension-subscript",
+    "@tiptap/extension-superscript",
+    "@tiptap/extension-font-family"
+];
 const SANDPACK_EXTERNAL_RESOURCES = [
     // Prebuilt utility CSS so classes from @seedgrid/fe-components can render inside Sandpack
     "https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
 ];
+const SANDPACK_QRCODE_SHIM_INDEX_JS = `const makeError = () =>
+  new Error(
+    "qrcode (node build) is not supported in Sandpack browser runtime. Update @seedgrid/fe-components to a browser-safe QR implementation."
+  );
+
+const qrcodeShim = {
+  toDataURL() {
+    return Promise.reject(makeError());
+  }
+};
+
+export const toDataURL = (...args) => qrcodeShim.toDataURL(...args);
+export default qrcodeShim;
+`;
+const SANDPACK_MARKDOWN_IT_BIN_SHIM = `import markdownit from "../index.mjs";
+
+// Browser-safe shim: Sandpack must not execute markdown-it CLI entrypoint.
+// Re-export parser factory so accidental imports of the bin path remain harmless.
+export default markdownit;
+export { markdownit };
+`;
+const SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS = `export const SandpackProvider = ({ children }) => children ?? null;
+export const SandpackCodeEditor = () => null;
+export const SandpackPreview = () => null;
+export const useSandpack = () => ({
+  sandpack: {
+    activeFile: "/App.tsx",
+    files: { "/App.tsx": { code: "" } },
+    runSandpack: async () => {},
+    clients: {},
+    status: "idle"
+  },
+  dispatch: () => {},
+  listen: () => () => {}
+});
+export default {};
+`;
+const SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS = `export const EditorContent = () => null;
+export const BubbleMenu = () => null;
+export const FloatingMenu = () => null;
+export const useEditor = () => null;
+export default {};
+`;
+const SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS = `const extension = {
+  configure() {
+    return extension;
+  },
+  extend() {
+    return extension;
+  }
+};
+export default extension;
+`;
+const SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS = `import * as React from "react";
+
+export function SgTextEditor() {
+  return React.createElement(
+    "div",
+    {
+      style: {
+        padding: "0.75rem",
+        border: "1px solid #e4e4e7",
+        borderRadius: "0.5rem",
+        fontSize: "0.875rem",
+        color: "#6b7280",
+        background: "#f9fafb"
+      }
+    },
+    "SgTextEditor is disabled in this sandbox preset."
+  );
+}
+
+export default SgTextEditor;
+`;
+const SANDPACK_ASSERT_SHIM_INDEX_JS = `function fail(message) {
+  throw new Error(message || "Assertion failed");
+}
+
+function assert(value, message) {
+  if (!value) fail(message);
+}
+
+assert.ok = assert;
+assert.equal = function equal(actual, expected, message) {
+  if (actual != expected) fail(message || "Expected values to be loosely equal");
+};
+assert.strictEqual = function strictEqual(actual, expected, message) {
+  if (actual !== expected) fail(message || "Expected values to be strictly equal");
+};
+assert.notEqual = function notEqual(actual, expected, message) {
+  if (actual == expected) fail(message || "Expected values to be different");
+};
+assert.notStrictEqual = function notStrictEqual(actual, expected, message) {
+  if (actual === expected) fail(message || "Expected values to be different");
+};
+assert.deepEqual = function deepEqual(actual, expected, message) {
+  try {
+    if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+      fail(message || "Expected values to be deeply equal");
+    }
+  } catch (_) {
+    if (actual !== expected) fail(message || "Expected values to be deeply equal");
+  }
+};
+assert.throws = function throwsAssertion(fn, message) {
+  var didThrow = false;
+  try { fn(); } catch (_) { didThrow = true; }
+  if (!didThrow) fail(message || "Expected function to throw");
+};
+assert.fail = fail;
+
+module.exports = assert;
+module.exports.default = assert;
+`;
+const SANDPACK_UTIL_SHIM_INDEX_JS = `const inspect = function inspect(value) {
+  try {
+    return JSON.stringify(value);
+  } catch (_) {
+    return String(value);
+  }
+};
+
+inspect.custom = typeof Symbol !== "undefined" && Symbol.for
+  ? Symbol.for("nodejs.util.inspect.custom")
+  : "@@nodejs.util.inspect.custom";
+
+function deprecate(fn, message) {
+  var warned = false;
+  return function deprecatedWrapper() {
+    if (!warned && typeof console !== "undefined" && typeof console.warn === "function") {
+      console.warn(message);
+      warned = true;
+    }
+    return fn.apply(this, arguments);
+  };
+}
+
+function format() {
+  return Array.prototype.map.call(arguments, function (item) {
+    return String(item);
+  }).join(" ");
+}
+
+const utilShim = { inspect, deprecate, format };
+module.exports = utilShim;
+module.exports.default = utilShim;
+`;
+const SANDPACK_PATH_SHIM_INDEX_JS = `function normalize(input) {
+  return String(input || "").replace(/\\\\/g, "/");
+}
+
+function basename(input) {
+  var text = normalize(input);
+  var pieces = text.split("/").filter(Boolean);
+  return pieces.length ? pieces[pieces.length - 1] : "";
+}
+
+function dirname(input) {
+  var text = normalize(input);
+  var index = text.lastIndexOf("/");
+  if (index <= 0) return ".";
+  return text.slice(0, index);
+}
+
+function join() {
+  return Array.prototype
+    .map.call(arguments, normalize)
+    .filter(Boolean)
+    .join("/")
+    .replace(/\\/{2,}/g, "/");
+}
+
+function resolve() {
+  return join.apply(null, arguments);
+}
+
+const pathShim = {
+  sep: "/",
+  delimiter: ":",
+  basename,
+  dirname,
+  join,
+  resolve,
+  normalize
+};
+
+module.exports = pathShim;
+module.exports.default = pathShim;
+`;
+const SANDPACK_FS_SHIM_INDEX_JS = `function notSupported(name) {
+  throw new Error("fs." + name + " is not supported in Sandpack browser runtime.");
+}
+
+const fsShim = {
+  openSync: function openSync() { return notSupported("openSync"); },
+  createReadStream: function createReadStream() { return notSupported("createReadStream"); },
+  createWriteStream: function createWriteStream() { return notSupported("createWriteStream"); },
+  readFileSync: function readFileSync() { return notSupported("readFileSync"); }
+};
+
+module.exports = fsShim;
+module.exports.default = fsShim;
+`;
+const SANDPACK_PROCESS_SHIM_INDEX_JS = `const processShim = {
+  env: {},
+  argv: ["browser"],
+  stdout: { columns: 80 },
+  stderr: { columns: 80 },
+  cwd: function cwd() { return "/"; },
+  nextTick: function nextTick(fn) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    return Promise.resolve().then(function () { return fn.apply(null, args); });
+  }
+};
+
+if (typeof globalThis !== "undefined" && !globalThis.process) {
+  globalThis.process = processShim;
+}
+
+module.exports = processShim;
+module.exports.default = processShim;
+`;
 const SANDPACK_FALLBACK_THEME_VARS = {
     "--background": "0 0% 100%",
     "--foreground": "222.2 84% 4.9%",
@@ -103,6 +379,100 @@ body {
 .size-4 { width: 1rem; height: 1rem; }
 .size-5 { width: 1.25rem; height: 1.25rem; }
 `;
+const SANDPACK_HOST_STYLES_CSS = `
+.sg-playground-preview .sp-cube-wrapper {
+  top: 8px !important;
+  right: 8px !important;
+  bottom: auto !important;
+  left: auto !important;
+}
+`;
+function normalizeUrl(raw, fallback) {
+    const value = raw?.trim();
+    if (!value)
+        return fallback;
+    try {
+        const parsed = new URL(value);
+        return parsed.toString().replace(/\/+$/, "");
+    }
+    catch {
+        return fallback;
+    }
+}
+function normalizeTimeoutMs(value, fallback) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+        return fallback;
+    }
+    return Math.round(value);
+}
+function parseBooleanFlag(value, fallback) {
+    const normalized = value?.trim().toLowerCase();
+    if (!normalized)
+        return fallback;
+    if (normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "on") {
+        return true;
+    }
+    if (normalized === "0" || normalized === "false" || normalized === "no" || normalized === "off") {
+        return false;
+    }
+    return fallback;
+}
+function resolveDefaultNpmRegistriesFromEnv() {
+    const registryUrlRaw = process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_URL?.trim();
+    if (!registryUrlRaw)
+        return undefined;
+    const scopesRaw = process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_SCOPES;
+    const enabledScopes = (scopesRaw ?? "@seedgrid")
+        .split(",")
+        .map((scope) => scope.trim())
+        .filter(Boolean);
+    const limitToScopes = parseBooleanFlag(process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_LIMIT_TO_SCOPES, true);
+    const proxyEnabled = parseBooleanFlag(process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_PROXY_ENABLED, false);
+    const registryAuthToken = process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_AUTH_TOKEN?.trim();
+    return [
+        {
+            enabledScopes,
+            limitToScopes,
+            registryUrl: registryUrlRaw.replace(/\/+$/, ""),
+            proxyEnabled,
+            ...(registryAuthToken ? { registryAuthToken } : {})
+        }
+    ];
+}
+function buildCjsModule(value) {
+    const serialized = JSON.stringify(value);
+    return `const data = ${serialized};
+module.exports = data;
+module.exports.default = data;
+`;
+}
+const SANDPACK_MIN_COMPONENT_MESSAGES = {
+    "components.actions.clear": "Clear",
+    "components.actions.cancel": "Cancel",
+    "components.actions.confirm": "Confirm",
+    "components.inputs.required": "Required field.",
+    "components.inputs.maxLength": "Maximum {max} characters.",
+    "components.inputs.minLength": "Minimum {min} characters.",
+    "components.inputs.minWords": "Minimum {min} words.",
+    "components.inputs.email.invalid": "Invalid email.",
+    "components.inputs.phone.invalid": "Invalid phone.",
+    "components.inputs.date.invalid": "Invalid date.",
+    "components.inputs.number.min": "Value must be at least {min}.",
+    "components.inputs.number.max": "Value must be at most {max}.",
+    "components.password.show": "Show password",
+    "components.password.hide": "Hide password",
+    "components.autocomplete.empty": "No records found.",
+    "components.autocomplete.loading": "Loading...",
+    "components.rating.cancel": "Cancel rating",
+    "components.radiogroup.cancel": "No option"
+};
+const SANDPACK_SEEDGRID_PT_BR_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_PT_PT_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_EN_US_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_ES_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM = buildCjsModule({
+    blockedEmailDomains: []
+});
 function parseRgbParts(raw) {
     const value = raw.trim();
     if (!value)
@@ -303,13 +673,45 @@ function CopyButton() {
 }
 function RunButton({ onRun }) {
     const { sandpack } = useSandpack();
-    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => {
-            sandpack.runSandpack();
-            onRun?.();
-        }, children: "Run" }));
+    const [running, setRunning] = React.useState(false);
+    const handleRun = React.useCallback(async () => {
+        if (running)
+            return;
+        setRunning(true);
+        onRun?.();
+        try {
+            if (typeof window !== "undefined") {
+                await new Promise((resolve) => {
+                    window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()));
+                });
+            }
+            // On lazy init + hidden preview scenarios, iframe/client registration can lag by a tick.
+            for (let attempt = 0; attempt < 3; attempt += 1) {
+                await sandpack.runSandpack();
+                if (sandpack.status === "running" ||
+                    sandpack.status === "done" ||
+                    Object.keys(sandpack.clients ?? {}).length > 0) {
+                    break;
+                }
+                await new Promise((resolve) => setTimeout(resolve, 120));
+            }
+        }
+        catch (error) {
+            console.error("[SgPlayground] Failed to run Sandpack", error);
+        }
+        finally {
+            if (typeof window !== "undefined") {
+                window.setTimeout(() => setRunning(false), 150);
+            }
+            else {
+                setRunning(false);
+            }
+        }
+    }, [onRun, running, sandpack]);
+    return (_jsx(SgButton, { severity: "primary", size: "sm", loading: running, onClick: handleRun, children: running ? "Running" : "Run" }));
 }
 export default function SgPlayground(props) {
-    const { code, interactive = false, codeContract = "renderBody", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
+    const { code, interactive = false, codeContract = "renderBody", preset = "auto", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, bundlerURL, bundlerTimeoutMs, npmRegistries, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
     const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
     const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
     const [isExpanded, setIsExpanded] = React.useState(false);
@@ -359,16 +761,168 @@ export default function SgPlayground(props) {
     const resolvedSeedgridDependency = seedgridDependency ??
         process.env.NEXT_PUBLIC_SANDPACK_SEEDGRID_DEPENDENCY ??
         DEFAULT_SEEDGRID_DEPENDENCY;
+    const requestedDeps = dependencies ?? {};
+    const requestedDepKeys = Object.keys(requestedDeps);
+    const resolvedBundlerURL = normalizeUrl(bundlerURL ?? process.env.NEXT_PUBLIC_SANDPACK_BUNDLER_URL, DEFAULT_SANDPACK_BUNDLER_URL);
+    const resolvedBundlerTimeoutMs = normalizeTimeoutMs(bundlerTimeoutMs ??
+        Number(process.env.NEXT_PUBLIC_SANDPACK_BUNDLER_TIMEOUT_MS ?? Number.NaN), DEFAULT_SANDPACK_BUNDLER_TIMEOUT_MS);
+    const resolvedNpmRegistries = React.useMemo(() => npmRegistries ?? resolveDefaultNpmRegistriesFromEnv(), [npmRegistries]);
+    React.useEffect(() => {
+        if (!interactive)
+            return;
+        if (!parseBooleanFlag(process.env.NEXT_PUBLIC_SANDPACK_DEBUG, false))
+            return;
+        console.info("[SgPlayground] Sandpack runtime config", {
+            bundlerURL: resolvedBundlerURL,
+            bundlerTimeoutMs: resolvedBundlerTimeoutMs,
+            npmRegistries: (resolvedNpmRegistries ?? []).map((registry) => ({
+                enabledScopes: registry.enabledScopes,
+                limitToScopes: registry.limitToScopes,
+                registryUrl: registry.registryUrl,
+                proxyEnabled: registry.proxyEnabled
+            }))
+        });
+    }, [interactive, resolvedBundlerTimeoutMs, resolvedBundlerURL, resolvedNpmRegistries]);
+    const codeUsesSeedgrid = /from\s+["']@seedgrid\/fe-components["']/.test(appTsx);
+    const codeUsesTextEditor = /\bSgTextEditor\b/.test(appTsx);
+    const codeUsesPlaygroundComponent = /\bSgPlayground\b/.test(appTsx);
+    const resolvedPreset = preset === "auto"
+        ? codeUsesTextEditor
+            ? "editor"
+            : codeUsesSeedgrid
+                ? "seedgrid"
+                : "basic"
+        : preset;
+    const includeSeedgridDependency = resolvedPreset === "seedgrid" ||
+        resolvedPreset === "editor" ||
+        resolvedPreset === "full" ||
+        requestedDepKeys.includes("@seedgrid/fe-components");
+    const includeEditorDependencies = resolvedPreset === "editor" ||
+        resolvedPreset === "full" ||
+        codeUsesTextEditor ||
+        requestedDepKeys.some((dep) => dep.startsWith("@tiptap/"));
+    const includeSandpackReactDependency = resolvedPreset === "full" ||
+        codeUsesPlaygroundComponent ||
+        requestedDepKeys.includes("@codesandbox/sandpack-react");
+    const shouldShimSandpackReact = includeSeedgridDependency && !includeSandpackReactDependency;
+    const shouldShimTiptap = includeSeedgridDependency && !includeEditorDependencies;
+    const shouldIncludeNodePolyfills = includeEditorDependencies;
+    // Shim lucide-react for all non-full presets to avoid OOM from bundling ~1400 icon components.
+    // Full preset gets the real package so icons render correctly.
+    const shouldShimLucide = includeSeedgridDependency && resolvedPreset !== "full" && !requestedDepKeys.includes("lucide-react");
     const files = {
         "/App.tsx": { code: appTsx, active: true },
         "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
     };
+    if (includeSeedgridDependency) {
+        // Intercept the package entry point and redirect to the pre-compiled sandbox bundle
+        // (dist/sandbox.cjs) instead of the tsc barrel file (dist/index.js).
+        // This makes the Sandpack bundler fetch and process ONE file instead of 200+ individual files.
+        // The real package.json from npm is left intact so version resolution works normally.
+        // Requires @seedgrid/fe-components to be built with: pnpm run build:sandbox
+        files["/node_modules/@seedgrid/fe-components/dist/index.js"] = {
+            code: `module.exports = require("./sandbox.cjs");`,
+            hidden: true
+        };
+        // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
+        files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
+        // Sandpack runtime can evaluate JSON files as plain JS modules.
+        // Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/pt-BR.json"] = {
+            code: SANDPACK_SEEDGRID_PT_BR_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/pt-PT.json"] = {
+            code: SANDPACK_SEEDGRID_PT_PT_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/en-US.json"] = {
+            code: SANDPACK_SEEDGRID_EN_US_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/es.json"] = {
+            code: SANDPACK_SEEDGRID_ES_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/blocked-email-domains.json"] = {
+            code: SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM,
+            hidden: true
+        };
+    }
+    if (shouldIncludeNodePolyfills) {
+        // markdown-it CLI entry uses node:fs and breaks in browser runtime.
+        files["/node_modules/markdown-it/bin/markdown-it.mjs"] = {
+            code: SANDPACK_MARKDOWN_IT_BIN_SHIM,
+            hidden: true
+        };
+        // Node builtin compatibility shims used by transitive dependencies (e.g. argparse from markdown-it/tiptap).
+        files["/node_modules/assert/index.js"] = { code: SANDPACK_ASSERT_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/util/index.js"] = { code: SANDPACK_UTIL_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/path/index.js"] = { code: SANDPACK_PATH_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/fs/index.js"] = { code: SANDPACK_FS_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/process/index.js"] = { code: SANDPACK_PROCESS_SHIM_INDEX_JS, hidden: true };
+    }
+    if (shouldShimSandpackReact) {
+        files["/node_modules/@codesandbox/sandpack-react/index.js"] = {
+            code: SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+    }
+    if (shouldShimTiptap) {
+        files["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor.js"] = {
+            code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor.mjs"] = {
+            code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
+            hidden: true
+        };
+        files["/node_modules/@tiptap/react/package.json"] = {
+            code: JSON.stringify({ name: "@tiptap/react", version: "0.0.0-shim", main: "index.js", module: "index.mjs" }),
+            hidden: true
+        };
+        files["/node_modules/@tiptap/react/index.js"] = {
+            code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+        files["/node_modules/@tiptap/react/index.mjs"] = {
+            code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+        for (const packageName of TIPTAP_SHIM_PACKAGES) {
+            files[`/node_modules/${packageName}/package.json`] = {
+                code: JSON.stringify({ name: packageName, version: "0.0.0-shim", main: "index.js", module: "index.mjs" }),
+                hidden: true
+            };
+            files[`/node_modules/${packageName}/index.js`] = {
+                code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+                hidden: true
+            };
+            files[`/node_modules/${packageName}/index.mjs`] = {
+                code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+                hidden: true
+            };
+        }
+    }
+    if (shouldShimLucide) {
+        files["/node_modules/lucide-react/package.json"] = {
+            code: JSON.stringify({ name: "lucide-react", version: "0.0.0-shim", main: "index.js" }),
+            hidden: true
+        };
+        files["/node_modules/lucide-react/index.js"] = {
+            code: SANDPACK_LUCIDE_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+    }
     const deps = {
-        react: "^19.0.0",
-        "react-dom": "^19.0.0",
-        ...DEFAULT_SEEDGRID_PEER_DEPENDENCIES,
-        "@seedgrid/fe-components": resolvedSeedgridDependency,
-        ...(dependencies ?? {})
+        ...DEFAULT_SANDBOX_BASE_DEPENDENCIES,
+        ...(includeSeedgridDependency ? DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES : {}),
+        ...(includeSeedgridDependency && !shouldShimLucide ? { "lucide-react": "^0.468.0" } : {}),
+        ...(includeEditorDependencies ? DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES : {}),
+        ...(includeSandpackReactDependency ? DEFAULT_SANDBOX_HOST_DEPENDENCIES : {}),
+        ...(shouldIncludeNodePolyfills ? DEFAULT_SANDPACK_POLYFILLS : {}),
+        ...(includeSeedgridDependency ? { "@seedgrid/fe-components": resolvedSeedgridDependency } : {}),
+        ...requestedDeps
     };
     const currentHeight = isExpanded ? expandedHeight : height;
     const resizeClass = !resizable
@@ -378,18 +932,27 @@ export default function SgPlayground(props) {
             : resizeAxis === "horizontal"
                 ? "resize-x"
                 : "resize";
-    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: { dependencies: deps }, options: {
-                autorun: false,
-                initMode: "lazy",
-                bundlerTimeOut: 60000,
-                activeFile: "/App.tsx",
-                visibleFiles: ["/App.tsx"],
-                externalResources: SANDPACK_EXTERNAL_RESOURCES
-            }, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, { onRun: () => setActivePanel("preview") })] })] }), _jsxs("div", { className: "flex md:hidden border-b border-border", children: [_jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "code"
+    const sandpackCustomSetup = React.useMemo(() => ({
+        dependencies: deps,
+        entry: "/index.tsx",
+        ...(resolvedNpmRegistries ? { npmRegistries: resolvedNpmRegistries } : {})
+    }), [deps, resolvedNpmRegistries]);
+    const sandpackOptions = React.useMemo(() => ({
+        autorun: false,
+        initMode: "lazy",
+        bundlerURL: resolvedBundlerURL,
+        // Keep both keys while sandpack typings/runtime differ across versions.
+        bundlerTimeOut: resolvedBundlerTimeoutMs,
+        bundlerTimeout: resolvedBundlerTimeoutMs,
+        activeFile: "/App.tsx",
+        visibleFiles: ["/App.tsx"],
+        externalResources: includeSeedgridDependency ? SANDPACK_EXTERNAL_RESOURCES : []
+    }), [includeSeedgridDependency, resolvedBundlerTimeoutMs, resolvedBundlerURL]);
+    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, children: [_jsx("style", { children: SANDPACK_HOST_STYLES_CSS }), _jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [withCard ? null : _jsx("span", { className: "text-sm font-medium", children: title ?? "Example" }), _jsx("span", { className: "text-xs text-muted-foreground", children: codeContract === "renderBody" ? "editable snippet" : "editable App.tsx" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [expandable ? (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: () => setIsExpanded((prev) => !prev), children: isExpanded ? "Reduzir" : "Expandir" })) : null, _jsx(RunButton, { onRun: () => setActivePanel("preview") })] })] }), _jsxs("div", { className: "flex md:hidden border-b border-border", children: [_jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "code"
                                 ? "border-primary text-foreground"
                                 : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("code"), children: "C\u00F3digo" }), _jsx("button", { type: "button", className: cn("flex-1 py-2 text-sm font-medium border-b-2 -mb-px transition-colors", activePanel === "preview"
                                 ? "border-primary text-foreground"
-                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("preview"), children: "Preview" })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px]", "grid-cols-1 md:grid-cols-2", resizeClass), style: { height: currentHeight }, children: [_jsxs("div", { className: cn("min-w-0 md:border-r border-border", activePanel !== "code" ? "hidden md:block" : ""), children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: cn("min-w-0", activePanel !== "preview" ? "hidden md:block" : ""), children: _jsx(SandpackPreview, { style: { height: "100%" }, showOpenInCodeSandbox: false, showRefreshButton: false, showRestartButton: false }) })] })] }) })) : (_jsxs("div", { className: cn(withCard ? undefined : "space-y-2", withCard ? undefined : className), children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: code })] }));
+                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("preview"), children: "Preview" })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px]", "grid-cols-1 md:grid-cols-2", resizeClass), style: { height: currentHeight }, children: [_jsxs("div", { className: cn("min-w-0 md:border-r border-border", activePanel !== "code" ? "hidden md:block" : ""), children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: cn("min-w-0", activePanel !== "preview" ? "hidden md:block" : ""), children: _jsx(SandpackPreview, { className: "sg-playground-preview", style: { height: "100%" }, showOpenInCodeSandbox: false, showRefreshButton: false, showRestartButton: false }) })] })] }) })) : (_jsxs("div", { className: cn(withCard ? undefined : "space-y-2", withCard ? undefined : className), children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: code })] }));
     if (!withCard)
         return content;
     return (_jsx(SgCard, { id: cardId, title: title ?? "Codigo", description: description, collapsible: collapsible, defaultOpen: defaultOpen, className: cn("rounded-lg", className), bodyClassName: "p-0", children: content }));