@seedgrid/fe-components 2026.3.2-5 → 2026.3.2-7

package/dist/others/SgPlayground.d.ts

@@ -2,6 +2,7 @@ export type SgPlaygroundProps = {
     code: string;
     interactive?: boolean;
     codeContract?: "renderBody" | "appFile";
+    preset?: SgPlaygroundPreset;
     title?: string;
     description?: string;
     height?: number | string;
@@ -15,10 +16,21 @@ export type SgPlaygroundProps = {
     defaultImports?: string;
     previewWrapperClassName?: string;
     seedgridDependency?: string;
+    bundlerURL?: string;
+    bundlerTimeoutMs?: number;
+    npmRegistries?: SgPlaygroundNpmRegistry[];
     withCard?: boolean;
     collapsible?: boolean;
     defaultOpen?: boolean;
     cardId?: string;
 };
+export type SgPlaygroundPreset = "auto" | "basic" | "seedgrid" | "editor" | "full";
+export type SgPlaygroundNpmRegistry = {
+    enabledScopes: string[];
+    limitToScopes: boolean;
+    registryUrl: string;
+    proxyEnabled: boolean;
+    registryAuthToken?: string;
+};
 export default function SgPlayground(props: Readonly<SgPlaygroundProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SgPlayground.d.ts.map

package/dist/others/SgPlayground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAiBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAimBF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAyPtE"}
+{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../../src/others/SgPlayground.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IAChD,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA6sBF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAyXtE"}

package/dist/others/SgPlayground.js

@@ -4,14 +4,26 @@ import * as React from "react";
 import { SandpackCodeEditor, SandpackPreview, SandpackProvider, useSandpack } from "@codesandbox/sandpack-react";
 import { SgButton } from "../buttons/SgButton";
 import { SgCard } from "../layout/SgCard";
+import blockedEmailDomainsConfig from "../blocked-email-domains.json";
+import componentsMessagesEnUsJson from "../i18n/en-US.json";
+import componentsMessagesEsJson from "../i18n/es.json";
+import componentsMessagesPtBrJson from "../i18n/pt-BR.json";
+import componentsMessagesPtPtJson from "../i18n/pt-PT.json";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
 const DEFAULT_SEEDGRID_DEPENDENCY = "latest";
-const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
-    "@codesandbox/sandpack-react": "^2.20.0",
+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": "^0.468.0",
+    "lucide-react": "^0.468.0"
+};
+const DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES = {
     "@tiptap/core": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
@@ -27,25 +39,33 @@ 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_PACKAGE_JSON = `{
-  "name": "qrcode",
-  "version": "0.0.0-sandpack-shim",
-  "type": "module",
-  "main": "./index.js",
-  "module": "./index.js",
-  "exports": {
-    ".": "./index.js"
-  }
-}`;
 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."
@@ -67,11 +87,38 @@ const SANDPACK_MARKDOWN_IT_BIN_SHIM = `import markdownit from "../index.mjs";
 export default markdownit;
 export { markdownit };
 `;
-const SANDPACK_ASSERT_SHIM_PACKAGE_JSON = `{
-  "name": "assert",
-  "version": "0.0.0-sandpack-shim",
-  "main": "./index.js"
-}`;
+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_ASSERT_SHIM_INDEX_JS = `function fail(message) {
   throw new Error(message || "Assertion failed");
 }
@@ -112,11 +159,6 @@ assert.fail = fail;
 module.exports = assert;
 module.exports.default = assert;
 `;
-const SANDPACK_UTIL_SHIM_PACKAGE_JSON = `{
-  "name": "util",
-  "version": "0.0.0-sandpack-shim",
-  "main": "./index.js"
-}`;
 const SANDPACK_UTIL_SHIM_INDEX_JS = `const inspect = function inspect(value) {
   try {
     return JSON.stringify(value);
@@ -150,11 +192,6 @@ const utilShim = { inspect, deprecate, format };
 module.exports = utilShim;
 module.exports.default = utilShim;
 `;
-const SANDPACK_PATH_SHIM_PACKAGE_JSON = `{
-  "name": "path",
-  "version": "0.0.0-sandpack-shim",
-  "main": "./index.js"
-}`;
 const SANDPACK_PATH_SHIM_INDEX_JS = `function normalize(input) {
   return String(input || "").replace(/\\\\/g, "/");
 }
@@ -197,11 +234,6 @@ const pathShim = {
 module.exports = pathShim;
 module.exports.default = pathShim;
 `;
-const SANDPACK_FS_SHIM_PACKAGE_JSON = `{
-  "name": "fs",
-  "version": "0.0.0-sandpack-shim",
-  "main": "./index.js"
-}`;
 const SANDPACK_FS_SHIM_INDEX_JS = `function notSupported(name) {
   throw new Error("fs." + name + " is not supported in Sandpack browser runtime.");
 }
@@ -216,11 +248,6 @@ const fsShim = {
 module.exports = fsShim;
 module.exports.default = fsShim;
 `;
-const SANDPACK_PROCESS_SHIM_PACKAGE_JSON = `{
-  "name": "process",
-  "version": "0.0.0-sandpack-shim",
-  "main": "./index.js"
-}`;
 const SANDPACK_PROCESS_SHIM_INDEX_JS = `const processShim = {
   env: {},
   argv: ["browser"],
@@ -314,6 +341,78 @@ 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 buildCjsJsonModule(value) {
+    const serialized = JSON.stringify(value);
+    return `const data = ${serialized};
+module.exports = data;
+module.exports.default = data;
+`;
+}
+const SANDPACK_SEEDGRID_PT_BR_JSON_SHIM = buildCjsJsonModule(componentsMessagesPtBrJson);
+const SANDPACK_SEEDGRID_PT_PT_JSON_SHIM = buildCjsJsonModule(componentsMessagesPtPtJson);
+const SANDPACK_SEEDGRID_EN_US_JSON_SHIM = buildCjsJsonModule(componentsMessagesEnUsJson);
+const SANDPACK_SEEDGRID_ES_JSON_SHIM = buildCjsJsonModule(componentsMessagesEsJson);
+const SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM = buildCjsJsonModule(blockedEmailDomainsConfig);
 function parseRgbParts(raw) {
     const value = raw.trim();
     if (!value)
@@ -552,7 +651,7 @@ function RunButton({ onRun }) {
     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);
@@ -602,36 +701,121 @@ 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;
     const files = {
         "/App.tsx": { code: appTsx, active: true },
-        "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) },
+        "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
+    };
+    if (includeSeedgridDependency) {
         // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
-        "/node_modules/qrcode/package.json": { code: SANDPACK_QRCODE_SHIM_PACKAGE_JSON, hidden: true },
-        "/node_modules/qrcode/index.js": { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true },
+        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.
-        "/node_modules/markdown-it/bin/markdown-it.mjs": {
+        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).
-        "/node_modules/assert/package.json": { code: SANDPACK_ASSERT_SHIM_PACKAGE_JSON, hidden: true },
-        "/node_modules/assert/index.js": { code: SANDPACK_ASSERT_SHIM_INDEX_JS, hidden: true },
-        "/node_modules/util/package.json": { code: SANDPACK_UTIL_SHIM_PACKAGE_JSON, hidden: true },
-        "/node_modules/util/index.js": { code: SANDPACK_UTIL_SHIM_INDEX_JS, hidden: true },
-        "/node_modules/path/package.json": { code: SANDPACK_PATH_SHIM_PACKAGE_JSON, hidden: true },
-        "/node_modules/path/index.js": { code: SANDPACK_PATH_SHIM_INDEX_JS, hidden: true },
-        "/node_modules/fs/package.json": { code: SANDPACK_FS_SHIM_PACKAGE_JSON, hidden: true },
-        "/node_modules/fs/index.js": { code: SANDPACK_FS_SHIM_INDEX_JS, hidden: true },
-        "/node_modules/process/package.json": { code: SANDPACK_PROCESS_SHIM_PACKAGE_JSON, hidden: true },
-        "/node_modules/process/index.js": { code: SANDPACK_PROCESS_SHIM_INDEX_JS, hidden: true }
-    };
+        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/@tiptap/react/index.js"] = {
+            code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+        for (const packageName of TIPTAP_SHIM_PACKAGES) {
+            files[`/node_modules/${packageName}/index.js`] = {
+                code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+                hidden: true
+            };
+        }
+    }
     const deps = {
-        react: "^19.0.0",
-        "react-dom": "^19.0.0",
-        ...DEFAULT_SANDPACK_POLYFILLS,
-        ...DEFAULT_SEEDGRID_PEER_DEPENDENCIES,
-        "@seedgrid/fe-components": resolvedSeedgridDependency,
-        ...(dependencies ?? {})
+        ...DEFAULT_SANDBOX_BASE_DEPENDENCIES,
+        ...(includeSeedgridDependency ? DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES : {}),
+        ...(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
@@ -641,21 +825,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",
-                bundlerURL: "https://sandpack.seedgrid.com.br",
-                // Keep both keys while sandpack typings/runtime differ across versions.
-                bundlerTimeOut: 60000,
-                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: SANDPACK_EXTERNAL_RESOURCES
+    }), [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 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "2026.3.2-5",
+  "version": "2026.3.2-7",
   "type": "module",
   "repository": {
     "type": "git",