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

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;
@@ -20,5 +21,6 @@ export type SgPlaygroundProps = {
     defaultOpen?: boolean;
     cardId?: string;
 };
+export type SgPlaygroundPreset = "auto" | "basic" | "seedgrid" | "editor" | "full";
 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;AA6jBF,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":"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"}

package/dist/others/SgPlayground.js

@@ -8,10 +8,15 @@ 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_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,11 +32,29 @@ 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"
@@ -67,6 +90,50 @@ 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;
+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_PACKAGE_JSON = `{
   "name": "assert",
   "version": "0.0.0-sandpack-shim",
@@ -314,6 +381,14 @@ 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 parseRgbParts(raw) {
     const value = raw.trim();
     if (!value)
@@ -514,13 +589,45 @@ function CopyButton() {
 }
 function RunButton({ onRun }) {
     const { sandpack } = useSandpack();
-    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => {
-            sandpack.runSandpack();
-            onRun?.();
-        }, children: "Run" }));
+    const [running, setRunning] = React.useState(false);
+    const handleRun = React.useCallback(async () => {
+        if (running)
+            return;
+        setRunning(true);
+        onRun?.();
+        try {
+            if (typeof window !== "undefined") {
+                await new Promise((resolve) => {
+                    window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()));
+                });
+            }
+            // On lazy init + hidden preview scenarios, iframe/client registration can lag by a tick.
+            for (let attempt = 0; attempt < 3; attempt += 1) {
+                await sandpack.runSandpack();
+                if (sandpack.status === "running" ||
+                    sandpack.status === "done" ||
+                    Object.keys(sandpack.clients ?? {}).length > 0) {
+                    break;
+                }
+                await new Promise((resolve) => setTimeout(resolve, 120));
+            }
+        }
+        catch (error) {
+            console.error("[SgPlayground] Failed to run Sandpack", error);
+        }
+        finally {
+            if (typeof window !== "undefined") {
+                window.setTimeout(() => setRunning(false), 150);
+            }
+            else {
+                setRunning(false);
+            }
+        }
+    }, [onRun, running, sandpack]);
+    return (_jsx(SgButton, { severity: "primary", size: "sm", loading: running, onClick: handleRun, children: running ? "Running" : "Run" }));
 }
 export default function SgPlayground(props) {
-    const { code, interactive = false, codeContract = "renderBody", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
+    const { code, interactive = false, codeContract = "renderBody", preset = "auto", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, dependencies, defaultImports, previewWrapperClassName = "h-[420px] rounded-xl border border-border bg-muted/30 p-3", seedgridDependency, 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);
@@ -570,36 +677,97 @@ 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 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/package.json"] = { code: SANDPACK_QRCODE_SHIM_PACKAGE_JSON, hidden: true };
+        files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, 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/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"),
+            hidden: true
+        };
+        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}/package.json`] = {
+                code: createEsmShimPackageJson(packageName),
+                hidden: true
+            };
+            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
@@ -619,11 +787,11 @@ export default function SgPlayground(props) {
                 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"
+            }, 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-4",
+  "version": "2026.3.2-6",
   "type": "module",
   "repository": {
     "type": "git",