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

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;AAwXF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoOtE"}
+{"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"}

package/dist/others/SgPlayground.js

@@ -27,6 +27,11 @@ const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
     "@tiptap/extension-superscript": "^2.9.1",
     "@tiptap/extension-font-family": "^2.9.1"
 };
+const DEFAULT_SANDPACK_POLYFILLS = {
+    assert: "^2.1.0",
+    process: "^0.11.10",
+    util: "^0.12.5"
+};
 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"
@@ -55,6 +60,186 @@ const qrcodeShim = {
 export const toDataURL = (...args) => qrcodeShim.toDataURL(...args);
 export default qrcodeShim;
 `;
+const SANDPACK_MARKDOWN_IT_BIN_SHIM = `import markdownit from "../index.mjs";
+
+// Browser-safe shim: Sandpack must not execute markdown-it CLI entrypoint.
+// Re-export parser factory so accidental imports of the bin path remain harmless.
+export default markdownit;
+export { markdownit };
+`;
+const SANDPACK_ASSERT_SHIM_PACKAGE_JSON = `{
+  "name": "assert",
+  "version": "0.0.0-sandpack-shim",
+  "main": "./index.js"
+}`;
+const SANDPACK_ASSERT_SHIM_INDEX_JS = `function fail(message) {
+  throw new Error(message || "Assertion failed");
+}
+
+function assert(value, message) {
+  if (!value) fail(message);
+}
+
+assert.ok = assert;
+assert.equal = function equal(actual, expected, message) {
+  if (actual != expected) fail(message || "Expected values to be loosely equal");
+};
+assert.strictEqual = function strictEqual(actual, expected, message) {
+  if (actual !== expected) fail(message || "Expected values to be strictly equal");
+};
+assert.notEqual = function notEqual(actual, expected, message) {
+  if (actual == expected) fail(message || "Expected values to be different");
+};
+assert.notStrictEqual = function notStrictEqual(actual, expected, message) {
+  if (actual === expected) fail(message || "Expected values to be different");
+};
+assert.deepEqual = function deepEqual(actual, expected, message) {
+  try {
+    if (JSON.stringify(actual) !== JSON.stringify(expected)) {
+      fail(message || "Expected values to be deeply equal");
+    }
+  } catch (_) {
+    if (actual !== expected) fail(message || "Expected values to be deeply equal");
+  }
+};
+assert.throws = function throwsAssertion(fn, message) {
+  var didThrow = false;
+  try { fn(); } catch (_) { didThrow = true; }
+  if (!didThrow) fail(message || "Expected function to throw");
+};
+assert.fail = fail;
+
+module.exports = assert;
+module.exports.default = assert;
+`;
+const SANDPACK_UTIL_SHIM_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);
+  } catch (_) {
+    return String(value);
+  }
+};
+
+inspect.custom = typeof Symbol !== "undefined" && Symbol.for
+  ? Symbol.for("nodejs.util.inspect.custom")
+  : "@@nodejs.util.inspect.custom";
+
+function deprecate(fn, message) {
+  var warned = false;
+  return function deprecatedWrapper() {
+    if (!warned && typeof console !== "undefined" && typeof console.warn === "function") {
+      console.warn(message);
+      warned = true;
+    }
+    return fn.apply(this, arguments);
+  };
+}
+
+function format() {
+  return Array.prototype.map.call(arguments, function (item) {
+    return String(item);
+  }).join(" ");
+}
+
+const utilShim = { inspect, deprecate, format };
+module.exports = utilShim;
+module.exports.default = utilShim;
+`;
+const SANDPACK_PATH_SHIM_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, "/");
+}
+
+function basename(input) {
+  var text = normalize(input);
+  var pieces = text.split("/").filter(Boolean);
+  return pieces.length ? pieces[pieces.length - 1] : "";
+}
+
+function dirname(input) {
+  var text = normalize(input);
+  var index = text.lastIndexOf("/");
+  if (index <= 0) return ".";
+  return text.slice(0, index);
+}
+
+function join() {
+  return Array.prototype
+    .map.call(arguments, normalize)
+    .filter(Boolean)
+    .join("/")
+    .replace(/\\/{2,}/g, "/");
+}
+
+function resolve() {
+  return join.apply(null, arguments);
+}
+
+const pathShim = {
+  sep: "/",
+  delimiter: ":",
+  basename,
+  dirname,
+  join,
+  resolve,
+  normalize
+};
+
+module.exports = pathShim;
+module.exports.default = pathShim;
+`;
+const SANDPACK_FS_SHIM_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.");
+}
+
+const fsShim = {
+  openSync: function openSync() { return notSupported("openSync"); },
+  createReadStream: function createReadStream() { return notSupported("createReadStream"); },
+  createWriteStream: function createWriteStream() { return notSupported("createWriteStream"); },
+  readFileSync: function readFileSync() { return notSupported("readFileSync"); }
+};
+
+module.exports = fsShim;
+module.exports.default = fsShim;
+`;
+const SANDPACK_PROCESS_SHIM_PACKAGE_JSON = `{
+  "name": "process",
+  "version": "0.0.0-sandpack-shim",
+  "main": "./index.js"
+}`;
+const SANDPACK_PROCESS_SHIM_INDEX_JS = `const processShim = {
+  env: {},
+  argv: ["browser"],
+  stdout: { columns: 80 },
+  stderr: { columns: 80 },
+  cwd: function cwd() { return "/"; },
+  nextTick: function nextTick(fn) {
+    var args = Array.prototype.slice.call(arguments, 1);
+    return Promise.resolve().then(function () { return fn.apply(null, args); });
+  }
+};
+
+if (typeof globalThis !== "undefined" && !globalThis.process) {
+  globalThis.process = processShim;
+}
+
+module.exports = processShim;
+module.exports.default = processShim;
+`;
 const SANDPACK_FALLBACK_THEME_VARS = {
     "--background": "0 0% 100%",
     "--foreground": "222.2 84% 4.9%",
@@ -329,10 +514,42 @@ function CopyButton() {
 }
 function RunButton({ onRun }) {
     const { sandpack } = useSandpack();
-    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => {
-            sandpack.runSandpack();
-            onRun?.();
-        }, children: "Run" }));
+    const [running, setRunning] = React.useState(false);
+    const handleRun = React.useCallback(async () => {
+        if (running)
+            return;
+        setRunning(true);
+        onRun?.();
+        try {
+            if (typeof window !== "undefined") {
+                await new Promise((resolve) => {
+                    window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()));
+                });
+            }
+            // On lazy init + hidden preview scenarios, iframe/client registration can lag by a tick.
+            for (let attempt = 0; attempt < 3; attempt += 1) {
+                await sandpack.runSandpack();
+                if (sandpack.status === "running" ||
+                    sandpack.status === "done" ||
+                    Object.keys(sandpack.clients ?? {}).length > 0) {
+                    break;
+                }
+                await new Promise((resolve) => setTimeout(resolve, 120));
+            }
+        }
+        catch (error) {
+            console.error("[SgPlayground] Failed to run Sandpack", error);
+        }
+        finally {
+            if (typeof window !== "undefined") {
+                window.setTimeout(() => setRunning(false), 150);
+            }
+            else {
+                setRunning(false);
+            }
+        }
+    }, [onRun, running, sandpack]);
+    return (_jsx(SgButton, { severity: "primary", size: "sm", loading: running, onClick: handleRun, children: running ? "Running" : "Run" }));
 }
 export default function SgPlayground(props) {
     const { code, interactive = false, codeContract = "renderBody", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
@@ -390,11 +607,28 @@ export default function SgPlayground(props) {
         "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) },
         // 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 }
+        "/node_modules/qrcode/index.js": { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true },
+        // markdown-it CLI entry uses node:fs and breaks in browser runtime.
+        "/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 }
     };
     const deps = {
         react: "^19.0.0",
         "react-dom": "^19.0.0",
+        ...DEFAULT_SANDPACK_POLYFILLS,
         ...DEFAULT_SEEDGRID_PEER_DEPENDENCIES,
         "@seedgrid/fe-components": resolvedSeedgridDependency,
         ...(dependencies ?? {})
@@ -411,7 +645,9 @@ export default function SgPlayground(props) {
                 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

package/package.json

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