@seedgrid/fe-components 2026.3.3-1 → 2026.3.3-10

package/dist/others/SgPlayground.js

@@ -59,11 +59,11 @@ const DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES = {
 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"
-};
+// Keep this empty: editor runtime uses in-memory shims under /node_modules/*
+// for assert/path/process/util/fs and node:* aliases.
+// Installing npm polyfill packages here pulls deep transitive trees and may
+// explode resolution inside Sandpack (e.g. dunder-proto/get, get-proto, etc).
+const DEFAULT_SANDPACK_POLYFILLS = {};
 const TIPTAP_SHIM_PACKAGES = [
     "@tiptap/core",
     "@tiptap/pm",
@@ -79,10 +79,7 @@ const TIPTAP_SHIM_PACKAGES = [
     "@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_EXTERNAL_RESOURCES = [];
 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."
@@ -104,6 +101,26 @@ const SANDPACK_MARKDOWN_IT_BIN_SHIM = `import markdownit from "../index.mjs";
 export default markdownit;
 export { markdownit };
 `;
+const SANDPACK_MARKDOWN_IT_PACKAGE_JSON_SHIM = JSON.stringify({
+    name: "markdown-it",
+    version: "14.1.1-shim",
+    main: "dist/index.cjs.js",
+    module: "index.mjs",
+    exports: {
+        ".": {
+            import: "./index.mjs",
+            require: "./dist/index.cjs.js"
+        },
+        "./*": {
+            import: "./*",
+            require: "./*"
+        }
+    },
+    // Sandpack can accidentally prioritize `bin`; force it to a browser-safe module.
+    bin: {
+        "markdown-it": "dist/index.cjs.js"
+    }
+});
 const SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS = `export const SandpackProvider = ({ children }) => children ?? null;
 export const SandpackCodeEditor = () => null;
 export const SandpackPreview = () => null;
@@ -305,7 +322,68 @@ if (typeof globalThis !== "undefined" && !globalThis.process) {
 module.exports = processShim;
 module.exports.default = processShim;
 `;
+const SANDPACK_NODE_ASSERT_ALIAS_SHIM_INDEX_JS = `const assertShim = require("assert");
+module.exports = assertShim;
+module.exports.default = assertShim;
+`;
+const SANDPACK_NODE_UTIL_ALIAS_SHIM_INDEX_JS = `const utilShim = require("util");
+module.exports = utilShim;
+module.exports.default = utilShim;
+`;
+const SANDPACK_NODE_PATH_ALIAS_SHIM_INDEX_JS = `const pathShim = require("path");
+module.exports = pathShim;
+module.exports.default = pathShim;
+`;
+const SANDPACK_NODE_FS_ALIAS_SHIM_INDEX_JS = `const fsShim = require("fs");
+module.exports = fsShim;
+module.exports.default = fsShim;
+`;
+const SANDPACK_NODE_PROCESS_ALIAS_SHIM_INDEX_JS = `const processShim = require("process");
+module.exports = processShim;
+module.exports.default = processShim;
+`;
+const SANDPACK_NODE_FS_PROMISES_ALIAS_SHIM_INDEX_JS = `const fsShim = require("fs");
+module.exports = fsShim.promises || {};
+module.exports.default = module.exports;
+`;
+const SANDPACK_NODE_ASSERT_PACKAGE_JSON_SHIM = JSON.stringify({
+    name: "node:assert",
+    version: "0.0.0-shim",
+    main: "index.js",
+    module: "index.js"
+});
+const SANDPACK_NODE_UTIL_PACKAGE_JSON_SHIM = JSON.stringify({
+    name: "node:util",
+    version: "0.0.0-shim",
+    main: "index.js",
+    module: "index.js"
+});
+const SANDPACK_NODE_PATH_PACKAGE_JSON_SHIM = JSON.stringify({
+    name: "node:path",
+    version: "0.0.0-shim",
+    main: "index.js",
+    module: "index.js"
+});
+const SANDPACK_NODE_FS_PACKAGE_JSON_SHIM = JSON.stringify({
+    name: "node:fs",
+    version: "0.0.0-shim",
+    main: "index.js",
+    module: "index.js"
+});
+const SANDPACK_NODE_PROCESS_PACKAGE_JSON_SHIM = JSON.stringify({
+    name: "node:process",
+    version: "0.0.0-shim",
+    main: "index.js",
+    module: "index.js"
+});
+const SANDPACK_NODE_FS_PROMISES_PACKAGE_JSON_SHIM = JSON.stringify({
+    name: "node:fs/promises",
+    version: "0.0.0-shim",
+    main: "index.js",
+    module: "index.js"
+});
 const SANDPACK_FALLBACK_THEME_VARS = {
+    // shadcn/ui design tokens (HSL)
     "--background": "0 0% 100%",
     "--foreground": "222.2 84% 4.9%",
     "--primary": "142 76% 36%",
@@ -317,14 +395,152 @@ const SANDPACK_FALLBACK_THEME_VARS = {
     "--destructive": "0 84.2% 60.2%",
     "--destructive-foreground": "0 0% 100%",
     "--border": "214.3 31.8% 91.4%",
-    "--ring": "var(--primary)",
+    "--input": "214.3 31.8% 91.4%",
+    "--ring": "142 76% 36%",
+    "--muted": "210 40% 96.1%",
+    "--muted-foreground": "215.4 16.3% 46.9%",
+    "--card": "0 0% 100%",
+    "--card-foreground": "222.2 84% 4.9%",
+    "--popover": "0 0% 100%",
+    "--popover-foreground": "222.2 84% 4.9%",
+    "--radius": "0.5rem",
+    // SeedGrid neutrals (RGB space-separated)
+    "--sg-bg": "255 255 255",
+    "--sg-surface": "248 250 252",
+    "--sg-muted-surface": "241 245 249",
+    "--sg-text": "15 23 42",
+    "--sg-muted": "100 116 139",
+    "--sg-border": "226 232 240",
+    "--sg-ring": "74 222 128",
+    "--sg-disabled": "203 213 225",
+    "--sg-on-disabled": "148 163 184",
+    "--sg-link": "22 163 74",
+    "--sg-link-hover": "21 128 61",
+    "--sg-radius": "0.5rem",
+    // On-color tokens
+    "--sg-on-primary": "255 255 255",
+    "--sg-on-secondary": "255 255 255",
+    "--sg-on-tertiary": "255 255 255",
+    "--sg-on-warning": "255 255 255",
+    "--sg-on-error": "255 255 255",
+    "--sg-on-info": "255 255 255",
+    "--sg-on-success": "255 255 255",
+    // Primary palette (green)
+    "--sg-primary-50": "240 253 244",
+    "--sg-primary-100": "220 252 231",
+    "--sg-primary-200": "187 247 208",
+    "--sg-primary-300": "134 239 172",
+    "--sg-primary-400": "74 222 128",
+    "--sg-primary-500": "34 197 94",
     "--sg-primary-600": "22 163 74",
+    "--sg-primary-700": "21 128 61",
+    "--sg-primary-800": "22 101 52",
+    "--sg-primary-900": "20 83 45",
+    "--sg-primary-hover": "21 128 61",
+    "--sg-primary-active": "22 101 52",
+    // Secondary palette (zinc)
+    "--sg-secondary-50": "250 250 250",
+    "--sg-secondary-100": "244 244 245",
+    "--sg-secondary-200": "228 228 231",
+    "--sg-secondary-300": "212 212 216",
+    "--sg-secondary-400": "161 161 170",
+    "--sg-secondary-500": "113 113 122",
     "--sg-secondary-600": "82 82 91",
-    "--sg-tertiary-600": "20 184 166",
-    "--sg-error-600": "220 38 38",
+    "--sg-secondary-700": "63 63 70",
+    "--sg-secondary-800": "39 39 42",
+    "--sg-secondary-900": "24 24 27",
+    "--sg-secondary-hover": "63 63 70",
+    "--sg-secondary-active": "39 39 42",
+    // Tertiary palette (teal)
+    "--sg-tertiary-50": "240 253 250",
+    "--sg-tertiary-100": "204 251 241",
+    "--sg-tertiary-200": "153 246 228",
+    "--sg-tertiary-300": "94 234 212",
+    "--sg-tertiary-400": "45 212 191",
+    "--sg-tertiary-500": "20 184 166",
+    "--sg-tertiary-600": "13 148 136",
+    "--sg-tertiary-700": "15 118 110",
+    "--sg-tertiary-800": "17 94 89",
+    "--sg-tertiary-900": "19 78 74",
+    "--sg-tertiary-hover": "15 118 110",
+    "--sg-tertiary-active": "17 94 89",
+    // Warning palette (amber)
+    "--sg-warning-50": "255 251 235",
+    "--sg-warning-100": "254 243 199",
+    "--sg-warning-200": "253 230 138",
+    "--sg-warning-300": "252 211 77",
+    "--sg-warning-400": "251 191 36",
+    "--sg-warning-500": "245 158 11",
     "--sg-warning-600": "217 119 6",
+    "--sg-warning-700": "180 83 9",
+    "--sg-warning-800": "146 64 14",
+    "--sg-warning-900": "120 53 15",
+    "--sg-warning-hover": "180 83 9",
+    "--sg-warning-active": "146 64 14",
+    // Error palette (red)
+    "--sg-error-50": "254 242 242",
+    "--sg-error-100": "254 226 226",
+    "--sg-error-200": "254 202 202",
+    "--sg-error-300": "252 165 165",
+    "--sg-error-400": "248 113 113",
+    "--sg-error-500": "239 68 68",
+    "--sg-error-600": "220 38 38",
+    "--sg-error-700": "185 28 28",
+    "--sg-error-800": "153 27 27",
+    "--sg-error-900": "127 29 29",
+    "--sg-error-hover": "185 28 28",
+    "--sg-error-active": "153 27 27",
+    // Info palette (sky)
+    "--sg-info-50": "240 249 255",
+    "--sg-info-100": "224 242 254",
+    "--sg-info-200": "186 230 253",
+    "--sg-info-300": "125 211 252",
+    "--sg-info-400": "56 189 248",
+    "--sg-info-500": "14 165 233",
     "--sg-info-600": "2 132 199",
-    "--sg-success-600": "22 163 74"
+    "--sg-info-700": "3 105 161",
+    "--sg-info-800": "7 89 133",
+    "--sg-info-900": "12 74 110",
+    "--sg-info-hover": "3 105 161",
+    "--sg-info-active": "7 89 133",
+    // Success palette (green, same as primary)
+    "--sg-success-50": "240 253 244",
+    "--sg-success-100": "220 252 231",
+    "--sg-success-200": "187 247 208",
+    "--sg-success-300": "134 239 172",
+    "--sg-success-400": "74 222 128",
+    "--sg-success-500": "34 197 94",
+    "--sg-success-600": "22 163 74",
+    "--sg-success-700": "21 128 61",
+    "--sg-success-800": "22 101 52",
+    "--sg-success-900": "20 83 45",
+    "--sg-success-hover": "21 128 61",
+    "--sg-success-active": "22 101 52",
+    // Button component vars (green primary default)
+    "--sg-btn-bg": "rgb(22 163 74)",
+    "--sg-btn-fg": "rgb(255 255 255)",
+    "--sg-btn-border": "rgb(22 163 74)",
+    "--sg-btn-hover-bg": "rgb(21 128 61)",
+    "--sg-btn-hover-fg": "rgb(255 255 255)",
+    "--sg-btn-hover-border": "rgb(21 128 61)",
+    "--sg-btn-active-bg": "rgb(22 101 52)",
+    "--sg-btn-ring": "rgb(74 222 128 / 0.4)",
+    "--sg-btn-tint": "22 163 74",
+    // Avatar component vars
+    "--sg-avatar-bg": "rgb(22 163 74)",
+    "--sg-avatar-fg": "rgb(255 255 255)",
+    "--sg-avatar-border": "transparent",
+    "--sg-avatar-ring": "rgb(74 222 128)",
+    // Badge component vars
+    "--sg-badge-bg": "rgb(240 253 244)",
+    "--sg-badge-fg": "rgb(22 163 74)",
+    "--sg-badge-border": "rgb(187 247 208)",
+    "--sg-badge-hover-bg": "rgb(220 252 231)",
+    "--sg-badge-hover-fg": "rgb(21 128 61)",
+    "--sg-badge-hover-border": "rgb(134 239 172)",
+    "--sg-badge-ring": "rgb(74 222 128)",
+    "--sg-badge-soft-bg": "rgb(240 253 244)",
+    "--sg-badge-soft-fg": "rgb(22 163 74)",
 };
 const SANDPACK_CORE_THEME_VARS = [
     "--background",
@@ -338,7 +554,63 @@ const SANDPACK_CORE_THEME_VARS = [
     "--destructive",
     "--destructive-foreground",
     "--border",
-    "--ring"
+    "--input",
+    "--ring",
+    "--muted",
+    "--muted-foreground",
+    "--radius"
+];
+// Explicit list of --sg-* vars to read from host via getPropertyValue().
+// CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
+// so we must call getPropertyValue() for each var by name.
+const SANDPACK_SG_VARS = [
+    // Neutrals
+    "--sg-bg", "--sg-surface", "--sg-muted-surface",
+    "--sg-text", "--sg-muted", "--sg-border", "--sg-ring",
+    "--sg-disabled", "--sg-on-disabled",
+    "--sg-link", "--sg-link-hover",
+    "--sg-radius",
+    // On-color tokens
+    "--sg-on-primary", "--sg-on-secondary", "--sg-on-tertiary",
+    "--sg-on-warning", "--sg-on-error", "--sg-on-info", "--sg-on-success",
+    // Primary palette
+    "--sg-primary-50", "--sg-primary-100", "--sg-primary-200", "--sg-primary-300",
+    "--sg-primary-400", "--sg-primary-500", "--sg-primary-600", "--sg-primary-700",
+    "--sg-primary-800", "--sg-primary-900", "--sg-primary-hover", "--sg-primary-active",
+    // Secondary palette
+    "--sg-secondary-50", "--sg-secondary-100", "--sg-secondary-200", "--sg-secondary-300",
+    "--sg-secondary-400", "--sg-secondary-500", "--sg-secondary-600", "--sg-secondary-700",
+    "--sg-secondary-800", "--sg-secondary-900", "--sg-secondary-hover", "--sg-secondary-active",
+    // Tertiary palette
+    "--sg-tertiary-50", "--sg-tertiary-100", "--sg-tertiary-200", "--sg-tertiary-300",
+    "--sg-tertiary-400", "--sg-tertiary-500", "--sg-tertiary-600", "--sg-tertiary-700",
+    "--sg-tertiary-800", "--sg-tertiary-900", "--sg-tertiary-hover", "--sg-tertiary-active",
+    // Warning palette
+    "--sg-warning-50", "--sg-warning-100", "--sg-warning-200", "--sg-warning-300",
+    "--sg-warning-400", "--sg-warning-500", "--sg-warning-600", "--sg-warning-700",
+    "--sg-warning-800", "--sg-warning-900", "--sg-warning-hover", "--sg-warning-active",
+    // Error palette
+    "--sg-error-50", "--sg-error-100", "--sg-error-200", "--sg-error-300",
+    "--sg-error-400", "--sg-error-500", "--sg-error-600", "--sg-error-700",
+    "--sg-error-800", "--sg-error-900", "--sg-error-hover", "--sg-error-active",
+    // Info palette
+    "--sg-info-50", "--sg-info-100", "--sg-info-200", "--sg-info-300",
+    "--sg-info-400", "--sg-info-500", "--sg-info-600", "--sg-info-700",
+    "--sg-info-800", "--sg-info-900", "--sg-info-hover", "--sg-info-active",
+    // Success palette
+    "--sg-success-50", "--sg-success-100", "--sg-success-200", "--sg-success-300",
+    "--sg-success-400", "--sg-success-500", "--sg-success-600", "--sg-success-700",
+    "--sg-success-800", "--sg-success-900", "--sg-success-hover", "--sg-success-active",
+    // Button component vars
+    "--sg-btn-bg", "--sg-btn-fg", "--sg-btn-border",
+    "--sg-btn-hover-bg", "--sg-btn-hover-fg", "--sg-btn-hover-border",
+    "--sg-btn-active-bg", "--sg-btn-ring", "--sg-btn-tint",
+    // Avatar component vars
+    "--sg-avatar-bg", "--sg-avatar-fg", "--sg-avatar-border", "--sg-avatar-ring",
+    // Badge component vars
+    "--sg-badge-bg", "--sg-badge-fg", "--sg-badge-border",
+    "--sg-badge-hover-bg", "--sg-badge-hover-fg", "--sg-badge-hover-border",
+    "--sg-badge-ring", "--sg-badge-soft-bg", "--sg-badge-soft-fg",
 ];
 const SANDPACK_BASE_STYLES_CSS = `* {
   box-sizing: border-box;
@@ -387,6 +659,19 @@ const SANDPACK_HOST_STYLES_CSS = `
   left: auto !important;
 }
 `;
+// Keep CRA's expected HTML entry file path for react/react-ts templates.
+const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="root"></div>
+</body>
+</html>
+`;
 function normalizeUrl(raw, fallback) {
     const value = raw?.trim();
     if (!value)
@@ -439,13 +724,6 @@ function resolveDefaultNpmRegistriesFromEnv() {
         }
     ];
 }
-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",
@@ -466,13 +744,18 @@ const SANDPACK_MIN_COMPONENT_MESSAGES = {
     "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({
+// These shims use valid JSON so the Sandpack bundler can parse them as JSON modules.
+// (The self-hosted bundler evaluates .json files as JS, wrapping them with module.exports = {...}.)
+const SANDPACK_SEEDGRID_PT_BR_JSON_SHIM = JSON.stringify(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_PT_PT_JSON_SHIM = JSON.stringify(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_EN_US_JSON_SHIM = JSON.stringify(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_ES_JSON_SHIM = JSON.stringify(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM = JSON.stringify({
     blockedEmailDomains: []
 });
+// CJS shims for .js locale files (new npm versions after the JSON→TypeScript conversion).
+const SANDPACK_SEEDGRID_LOCALE_JS_SHIM = `module.exports = ${JSON.stringify(SANDPACK_MIN_COMPONENT_MESSAGES)};`;
+const SANDPACK_SEEDGRID_BLOCKED_EMAIL_JS_SHIM = `module.exports = ${JSON.stringify({ blockedEmailDomains: [] })};`;
 function parseRgbParts(raw) {
     const value = raw.trim();
     if (!value)
@@ -563,10 +846,9 @@ function readThemeVarsFromHost() {
         if (value)
             themeVars[varName] = value;
     }
-    for (let index = 0; index < computed.length; index += 1) {
-        const varName = computed.item(index)?.trim();
-        if (!varName || !varName.startsWith("--sg-"))
-            continue;
+    // CSSStyleDeclaration.length/.item() does NOT enumerate CSS custom properties,
+    // so we explicitly call getPropertyValue() for each known --sg-* var.
+    for (const varName of SANDPACK_SG_VARS) {
         const value = computed.getPropertyValue(varName).trim();
         if (value)
             themeVars[varName] = value;
@@ -574,10 +856,41 @@ function readThemeVarsFromHost() {
     Object.assign(themeVars, mapSgVarsToCoreVars(themeVars));
     return themeVars;
 }
+function getStyleSheetHref(styleSheet) {
+    const cssSheet = styleSheet;
+    if (cssSheet.href)
+        return cssSheet.href;
+    const ownerNode = cssSheet.ownerNode;
+    if (!(ownerNode instanceof Element))
+        return "";
+    return ownerNode.getAttribute("data-n-href") ?? "";
+}
+function readHostNextCssText() {
+    if (typeof document === "undefined")
+        return "";
+    const chunks = [];
+    const sheets = Array.from(document.styleSheets);
+    for (const sheet of sheets) {
+        const href = getStyleSheetHref(sheet);
+        if (!href.includes("/_next/static/css/"))
+            continue;
+        let rules;
+        try {
+            rules = sheet.cssRules;
+        }
+        catch {
+            continue;
+        }
+        for (const rule of Array.from(rules)) {
+            chunks.push(rule.cssText);
+        }
+    }
+    return chunks.join("\n");
+}
 function normalizeCssSize(value) {
     return typeof value === "number" ? `${value}px` : value;
 }
-function buildSandpackStylesCss(themeVars, previewPadding) {
+function buildSandpackStylesCss(themeVars, previewPadding, hostCss = "") {
     const mergedVars = {
         ...SANDPACK_FALLBACK_THEME_VARS,
         ...themeVars,
@@ -591,7 +904,8 @@ function buildSandpackStylesCss(themeVars, previewPadding) {
 ${rootVars}
 }
 
-${SANDPACK_BASE_STYLES_CSS}`;
+${SANDPACK_BASE_STYLES_CSS}
+${hostCss ? `\n\n${hostCss}` : ""}`;
 }
 function ReadonlyBlock({ code }) {
     return (_jsx("pre", { className: "overflow-auto rounded-lg border border-border bg-muted/30 p-4 text-xs leading-relaxed", children: _jsx("code", { children: code }) }));
@@ -710,6 +1024,13 @@ function RunButton({ onRun }) {
     }, [onRun, running, sandpack]);
     return (_jsx(SgButton, { severity: "primary", size: "sm", loading: running, onClick: handleRun, children: running ? "Running" : "Run" }));
 }
+const COREJS_PROVIDER_WARNING_PREFIX = "Internal error in the corejs3 provider: unknown polyfill";
+function shouldSuppressCoreJsProviderWarning(args) {
+    if (args.length === 0)
+        return false;
+    const firstArg = args[0];
+    return typeof firstArg === "string" && firstArg.includes(COREJS_PROVIDER_WARNING_PREFIX);
+}
 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, bundlerURL, bundlerTimeoutMs, npmRegistries, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
     const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
@@ -722,7 +1043,8 @@ export default function SgPlayground(props) {
         const root = document.documentElement;
         const refreshStyles = () => {
             const liveThemeVars = readThemeVarsFromHost();
-            setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding));
+            const hostCss = readHostNextCssText();
+            setSandpackStylesCss(buildSandpackStylesCss(liveThemeVars, effectivePreviewPadding, hostCss));
         };
         let frameId = null;
         const scheduleRefresh = () => {
@@ -755,14 +1077,14 @@ export default function SgPlayground(props) {
   SgButton,
   SgAutocomplete
 } from "@seedgrid/fe-components";`;
-    const appTsx = codeContract === "appFile"
+    const appTsx = React.useMemo(() => codeContract === "appFile"
         ? code
-        : buildAppTsxFromRenderBody(code, seedgridDefaultImports, previewWrapperClassName);
+        : buildAppTsxFromRenderBody(code, seedgridDefaultImports, previewWrapperClassName), [code, codeContract, previewWrapperClassName, seedgridDefaultImports]);
     const resolvedSeedgridDependency = seedgridDependency ??
         process.env.NEXT_PUBLIC_SANDPACK_SEEDGRID_DEPENDENCY ??
         DEFAULT_SEEDGRID_DEPENDENCY;
-    const requestedDeps = dependencies ?? {};
-    const requestedDepKeys = Object.keys(requestedDeps);
+    const requestedDeps = React.useMemo(() => dependencies ?? {}, [dependencies]);
+    const requestedDepKeys = React.useMemo(() => Object.keys(requestedDeps), [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);
@@ -810,116 +1132,260 @@ export default function SgPlayground(props) {
     // 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) {
-        // Override @seedgrid/fe-components package.json to point at 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,
-        // which dramatically reduces memory usage and eliminates "loading everything" on every run.
-        // Requires @seedgrid/fe-components to be built with: pnpm run build:sandbox
-        files["/node_modules/@seedgrid/fe-components/package.json"] = {
-            code: JSON.stringify({
-                name: "@seedgrid/fe-components",
-                version: "0.0.0-sandbox",
-                main: "dist/sandbox.cjs",
-                exports: { ".": { require: "./dist/sandbox.cjs", default: "./dist/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
+    React.useEffect(() => {
+        if (!shouldIncludeNodePolyfills)
+            return;
+        if (typeof window === "undefined")
+            return;
+        const originalError = console.error;
+        const originalWarn = console.warn;
+        console.error = (...args) => {
+            if (shouldSuppressCoreJsProviderWarning(args))
+                return;
+            originalError(...args);
         };
-        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
+        console.warn = (...args) => {
+            if (shouldSuppressCoreJsProviderWarning(args))
+                return;
+            originalWarn(...args);
         };
-        files["/node_modules/@tiptap/react/index.js"] = {
-            code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
-            hidden: true
+        return () => {
+            console.error = originalError;
+            console.warn = originalWarn;
         };
-        files["/node_modules/@tiptap/react/index.mjs"] = {
-            code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
-            hidden: true
+    }, [shouldIncludeNodePolyfills]);
+    const files = React.useMemo(() => {
+        const nextFiles = {
+            "/App.tsx": { code: appTsx, active: true },
+            "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
         };
-        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" }),
+        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
+            nextFiles["/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).
+            nextFiles["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
+            // Keep CRA's public/index.html entry path expected by the react/react-ts templates.
+            nextFiles["/public/index.html"] = { code: SANDPACK_TAILWIND_INDEX_HTML, hidden: true };
+            // Sandpack runtime can evaluate JSON files as plain JS modules.
+            // Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.
+            // .json shims cover current npm versions; .js shims cover new versions after JSON→TypeScript conversion.
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/pt-BR.json"] = {
+                code: SANDPACK_SEEDGRID_PT_BR_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/pt-PT.json"] = {
+                code: SANDPACK_SEEDGRID_PT_PT_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/en-US.json"] = {
+                code: SANDPACK_SEEDGRID_EN_US_JSON_SHIM,
                 hidden: true
             };
-            files[`/node_modules/${packageName}/index.js`] = {
-                code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/es.json"] = {
+                code: SANDPACK_SEEDGRID_ES_JSON_SHIM,
                 hidden: true
             };
-            files[`/node_modules/${packageName}/index.mjs`] = {
-                code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/blocked-email-domains.json"] = {
+                code: SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/pt-BR.js"] = {
+                code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/pt-PT.js"] = {
+                code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/en-US.js"] = {
+                code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/i18n/es.js"] = {
+                code: SANDPACK_SEEDGRID_LOCALE_JS_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/blocked-email-domains.js"] = {
+                code: SANDPACK_SEEDGRID_BLOCKED_EMAIL_JS_SHIM,
                 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 = {
+        if (shouldIncludeNodePolyfills) {
+            const markdownItPackageShimPaths = [
+                "/node_modules/markdown-it/package.json",
+                "/node_modules/prosemirror-markdown/node_modules/markdown-it/package.json",
+                "/node_modules/@tiptap/pm/node_modules/markdown-it/package.json",
+                "/node_modules/@tiptap/pm/node_modules/prosemirror-markdown/node_modules/markdown-it/package.json"
+            ];
+            const markdownItBinShimPaths = [
+                "/node_modules/markdown-it/bin/markdown-it.mjs",
+                "/node_modules/prosemirror-markdown/node_modules/markdown-it/bin/markdown-it.mjs",
+                "/node_modules/@tiptap/pm/node_modules/markdown-it/bin/markdown-it.mjs",
+                "/node_modules/@tiptap/pm/node_modules/prosemirror-markdown/node_modules/markdown-it/bin/markdown-it.mjs"
+            ];
+            // Keep markdown-it package metadata browser-safe. In some Sandpack resolver paths,
+            // `bin` can be chosen as entrypoint; forcing it to dist avoids node-only imports.
+            for (const shimPath of markdownItPackageShimPaths) {
+                nextFiles[shimPath] = {
+                    code: SANDPACK_MARKDOWN_IT_PACKAGE_JSON_SHIM,
+                    hidden: true
+                };
+            }
+            // markdown-it CLI entry uses node:fs and breaks in browser runtime.
+            for (const shimPath of markdownItBinShimPaths) {
+                nextFiles[shimPath] = {
+                    code: SANDPACK_MARKDOWN_IT_BIN_SHIM,
+                    hidden: true
+                };
+            }
+            // Node builtin compatibility shims used by transitive dependencies (e.g. argparse from markdown-it/tiptap).
+            nextFiles["/node_modules/assert/package.json"] = {
+                code: JSON.stringify({ name: "assert", version: "0.0.0-shim", main: "index.js" }),
+                hidden: true
+            };
+            nextFiles["/node_modules/util/package.json"] = {
+                code: JSON.stringify({ name: "util", version: "0.0.0-shim", main: "index.js" }),
+                hidden: true
+            };
+            nextFiles["/node_modules/path/package.json"] = {
+                code: JSON.stringify({ name: "path", version: "0.0.0-shim", main: "index.js" }),
+                hidden: true
+            };
+            nextFiles["/node_modules/fs/package.json"] = {
+                code: JSON.stringify({ name: "fs", version: "0.0.0-shim", main: "index.js" }),
+                hidden: true
+            };
+            nextFiles["/node_modules/process/package.json"] = {
+                code: JSON.stringify({ name: "process", version: "0.0.0-shim", main: "index.js" }),
+                hidden: true
+            };
+            nextFiles["/node_modules/assert/index.js"] = { code: SANDPACK_ASSERT_SHIM_INDEX_JS, hidden: true };
+            nextFiles["/node_modules/util/index.js"] = { code: SANDPACK_UTIL_SHIM_INDEX_JS, hidden: true };
+            nextFiles["/node_modules/path/index.js"] = { code: SANDPACK_PATH_SHIM_INDEX_JS, hidden: true };
+            nextFiles["/node_modules/fs/index.js"] = { code: SANDPACK_FS_SHIM_INDEX_JS, hidden: true };
+            nextFiles["/node_modules/process/index.js"] = { code: SANDPACK_PROCESS_SHIM_INDEX_JS, hidden: true };
+            // node:* specifiers are increasingly used by ESM packages.
+            // Mirror aliases to the shims above so both `fs` and `node:fs` resolve.
+            nextFiles["/node_modules/node:assert/package.json"] = {
+                code: SANDPACK_NODE_ASSERT_PACKAGE_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:assert/index.js"] = {
+                code: SANDPACK_NODE_ASSERT_ALIAS_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:util/package.json"] = {
+                code: SANDPACK_NODE_UTIL_PACKAGE_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:util/index.js"] = {
+                code: SANDPACK_NODE_UTIL_ALIAS_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:path/package.json"] = {
+                code: SANDPACK_NODE_PATH_PACKAGE_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:path/index.js"] = {
+                code: SANDPACK_NODE_PATH_ALIAS_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:fs/package.json"] = {
+                code: SANDPACK_NODE_FS_PACKAGE_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:fs/index.js"] = {
+                code: SANDPACK_NODE_FS_ALIAS_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:process/package.json"] = {
+                code: SANDPACK_NODE_PROCESS_PACKAGE_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:process/index.js"] = {
+                code: SANDPACK_NODE_PROCESS_ALIAS_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:fs/promises/package.json"] = {
+                code: SANDPACK_NODE_FS_PROMISES_PACKAGE_JSON_SHIM,
+                hidden: true
+            };
+            nextFiles["/node_modules/node:fs/promises/index.js"] = {
+                code: SANDPACK_NODE_FS_PROMISES_ALIAS_SHIM_INDEX_JS,
+                hidden: true
+            };
+        }
+        if (shouldShimSandpackReact) {
+            nextFiles["/node_modules/@codesandbox/sandpack-react/index.js"] = {
+                code: SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS,
+                hidden: true
+            };
+        }
+        if (shouldShimTiptap) {
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor.js"] = {
+                code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor.mjs"] = {
+                code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/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
+            };
+            nextFiles["/node_modules/@tiptap/react/index.js"] = {
+                code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
+                hidden: true
+            };
+            nextFiles["/node_modules/@tiptap/react/index.mjs"] = {
+                code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
+                hidden: true
+            };
+            for (const packageName of TIPTAP_SHIM_PACKAGES) {
+                nextFiles[`/node_modules/${packageName}/package.json`] = {
+                    code: JSON.stringify({ name: packageName, version: "0.0.0-shim", main: "index.js", module: "index.mjs" }),
+                    hidden: true
+                };
+                nextFiles[`/node_modules/${packageName}/index.js`] = {
+                    code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+                    hidden: true
+                };
+                nextFiles[`/node_modules/${packageName}/index.mjs`] = {
+                    code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+                    hidden: true
+                };
+            }
+        }
+        if (shouldShimLucide) {
+            nextFiles["/node_modules/lucide-react/package.json"] = {
+                code: JSON.stringify({ name: "lucide-react", version: "0.0.0-shim", main: "index.js" }),
+                hidden: true
+            };
+            nextFiles["/node_modules/lucide-react/index.js"] = {
+                code: SANDPACK_LUCIDE_REACT_SHIM_INDEX_JS,
+                hidden: true
+            };
+        }
+        return nextFiles;
+    }, [
+        appTsx,
+        effectivePreviewPadding,
+        includeSeedgridDependency,
+        sandpackStylesCss,
+        shouldIncludeNodePolyfills,
+        shouldShimLucide,
+        shouldShimSandpackReact,
+        shouldShimTiptap
+    ]);
+    const deps = React.useMemo(() => ({
         ...DEFAULT_SANDBOX_BASE_DEPENDENCIES,
         ...(includeSeedgridDependency ? DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES : {}),
         ...(includeSeedgridDependency && !shouldShimLucide ? { "lucide-react": "^0.468.0" } : {}),
@@ -928,7 +1394,15 @@ export default function SgPlayground(props) {
         ...(shouldIncludeNodePolyfills ? DEFAULT_SANDPACK_POLYFILLS : {}),
         ...(includeSeedgridDependency ? { "@seedgrid/fe-components": resolvedSeedgridDependency } : {}),
         ...requestedDeps
-    };
+    }), [
+        includeEditorDependencies,
+        includeSandpackReactDependency,
+        includeSeedgridDependency,
+        requestedDeps,
+        resolvedSeedgridDependency,
+        shouldIncludeNodePolyfills,
+        shouldShimLucide
+    ]);
     const currentHeight = isExpanded ? expandedHeight : height;
     const resizeClass = !resizable
         ? undefined