@seedgrid/fe-components 2026.3.2-6 → 2026.3.2-8

package/dist/others/SgPlayground.d.ts

@@ -16,11 +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,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,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;AAqrBnF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAyUtE"}
+{"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;AAmuBF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CA8XtE"}

package/dist/others/SgPlayground.js

@@ -4,10 +4,17 @@ 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_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"
@@ -59,16 +66,6 @@ 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."
@@ -90,18 +87,6 @@ const SANDPACK_MARKDOWN_IT_BIN_SHIM = `import markdownit from "../index.mjs";
 export default markdownit;
 export { markdownit };
 `;
-function createEsmShimPackageJson(name) {
-    return `{
-  "name": "${name}",
-  "version": "0.0.0-sandpack-shim",
-  "type": "module",
-  "main": "./index.js",
-  "module": "./index.js",
-  "exports": {
-    ".": "./index.js"
-  }
-}`;
-}
 const SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS = `export const SandpackProvider = ({ children }) => children ?? null;
 export const SandpackCodeEditor = () => null;
 export const SandpackPreview = () => null;
@@ -134,11 +119,27 @@ const SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS = `const extension = {
 };
 export default extension;
 `;
-const SANDPACK_ASSERT_SHIM_PACKAGE_JSON = `{
-  "name": "assert",
-  "version": "0.0.0-sandpack-shim",
-  "main": "./index.js"
-}`;
+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");
 }
@@ -179,11 +180,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);
@@ -217,11 +213,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, "/");
 }
@@ -264,11 +255,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.");
 }
@@ -283,11 +269,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"],
@@ -389,6 +370,70 @@ const SANDPACK_HOST_STYLES_CSS = `
   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)
@@ -627,7 +672,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", 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, 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);
@@ -679,6 +724,26 @@ export default function SgPlayground(props) {
         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);
@@ -709,8 +774,29 @@ export default function SgPlayground(props) {
     };
     if (includeSeedgridDependency) {
         // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
-        files["/node_modules/qrcode/package.json"] = { code: SANDPACK_QRCODE_SHIM_PACKAGE_JSON, 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.
@@ -719,30 +805,21 @@ export default function SgPlayground(props) {
             hidden: true
         };
         // Node builtin compatibility shims used by transitive dependencies (e.g. argparse from markdown-it/tiptap).
-        files["/node_modules/assert/package.json"] = { code: SANDPACK_ASSERT_SHIM_PACKAGE_JSON, hidden: true };
         files["/node_modules/assert/index.js"] = { code: SANDPACK_ASSERT_SHIM_INDEX_JS, hidden: true };
-        files["/node_modules/util/package.json"] = { code: SANDPACK_UTIL_SHIM_PACKAGE_JSON, hidden: true };
         files["/node_modules/util/index.js"] = { code: SANDPACK_UTIL_SHIM_INDEX_JS, hidden: true };
-        files["/node_modules/path/package.json"] = { code: SANDPACK_PATH_SHIM_PACKAGE_JSON, hidden: true };
         files["/node_modules/path/index.js"] = { code: SANDPACK_PATH_SHIM_INDEX_JS, hidden: true };
-        files["/node_modules/fs/package.json"] = { code: SANDPACK_FS_SHIM_PACKAGE_JSON, hidden: true };
         files["/node_modules/fs/index.js"] = { code: SANDPACK_FS_SHIM_INDEX_JS, hidden: true };
-        files["/node_modules/process/package.json"] = { code: SANDPACK_PROCESS_SHIM_PACKAGE_JSON, hidden: true };
         files["/node_modules/process/index.js"] = { code: SANDPACK_PROCESS_SHIM_INDEX_JS, hidden: true };
     }
     if (shouldShimSandpackReact) {
-        files["/node_modules/@codesandbox/sandpack-react/package.json"] = {
-            code: createEsmShimPackageJson("@codesandbox/sandpack-react"),
-            hidden: true
-        };
         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/package.json"] = {
-            code: createEsmShimPackageJson("@tiptap/react"),
+        files["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor.js"] = {
+            code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
             hidden: true
         };
         files["/node_modules/@tiptap/react/index.js"] = {
@@ -750,10 +827,6 @@ export default function SgPlayground(props) {
             hidden: true
         };
         for (const packageName of TIPTAP_SHIM_PACKAGES) {
-            files[`/node_modules/${packageName}/package.json`] = {
-                code: createEsmShimPackageJson(packageName),
-                hidden: true
-            };
             files[`/node_modules/${packageName}/index.js`] = {
                 code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
                 hidden: true
@@ -777,17 +850,23 @@ 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: [_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"
+    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"

package/package.json

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