@seedgrid/fe-playground 2026.11.0 → 2026.11.2

package/dist/SgPlayground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../src/SgPlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,KAAK,uBAAuB,GAAG;IAC7B,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,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,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,iBAAiB,GACzB,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,uBAAuB,CAAC,GACpE,CAAC;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,uBAAuB,CAAC,CAAC;AAMzE,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;AA6nCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAmoBtE"}
+{"version":3,"file":"SgPlayground.d.ts","sourceRoot":"","sources":["../src/SgPlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,KAAK,uBAAuB,GAAG;IAC7B,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,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,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,iBAAiB,GACzB,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,cAAc,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,uBAAuB,CAAC,GACpE,CAAC;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG,uBAAuB,CAAC,CAAC;AAMzE,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;AAoqCF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAuoBtE"}

package/dist/SgPlayground.js

@@ -655,6 +655,9 @@ body {
 .size-4 { width: 1rem; height: 1rem; }
 .size-5 { width: 1.25rem; height: 1.25rem; }
 `;
+// Responsive layout of the playground (code | preview). It lives here, not in Tailwind utilities, because
+// consumers' Tailwind builds only generate classes found in THEIR content globs: with `md:block` etc. missing,
+// the code panel hidden by Run on small screens never came back on desktop ("code disappears after Run").
 const SANDPACK_HOST_STYLES_CSS = `
 .sg-playground-preview .sp-cube-wrapper {
   top: 8px !important;
@@ -662,6 +665,21 @@ const SANDPACK_HOST_STYLES_CSS = `
   bottom: auto !important;
   left: auto !important;
 }
+.sg-pg-tabs { display: flex; }
+.sg-pg-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  min-height: 260px;
+  overflow: auto;
+}
+.sg-pg-panel { min-width: 0; }
+.sg-pg-panel[data-mobile-hidden="true"] { display: none; }
+@media (min-width: 768px) {
+  .sg-pg-tabs { display: none; }
+  .sg-pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .sg-pg-panel[data-mobile-hidden="true"] { display: block; }
+  .sg-pg-code { border-right-width: 1px; border-right-style: solid; }
+}
 `;
 // Keep CRA's expected HTML entry file path for react/react-ts templates.
 const SANDPACK_TAILWIND_INDEX_HTML = `<!DOCTYPE html>
@@ -1008,6 +1026,25 @@ function CopyButton() {
     }, [copyState]);
     return (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: handleCopy, children: copyState === "success" ? "Copiado" : copyState === "error" ? "Erro" : "Copiar" }));
 }
+/**
+ * Pushes host theme/CSS changes into the sandbox without touching the user-edited files.
+ * SandpackProvider resets EVERY file to the `files` prop whenever that prop changes identity, so
+ * keeping the (host-dependent) stylesheet inside `files` made any theme/style mutation of <html>
+ * wipe the code the user had typed. The stylesheet is now seeded once and kept in sync via updateFile.
+ */
+function StylesSync({ css }) {
+    const { sandpack } = useSandpack();
+    const updateFileRef = React.useRef(sandpack.updateFile);
+    updateFileRef.current = sandpack.updateFile;
+    const lastCssRef = React.useRef(css);
+    React.useEffect(() => {
+        if (lastCssRef.current === css)
+            return;
+        lastCssRef.current = css;
+        updateFileRef.current("/styles.css", css);
+    }, [css]);
+    return null;
+}
 function RunButton({ onRun }) {
     const { sandpack } = useSandpack();
     const [running, setRunning] = React.useState(false);
@@ -1209,10 +1246,14 @@ export default function SgPlayground(props) {
             console.warn = originalWarn;
         };
     }, [shouldIncludeNodePolyfills]);
+    // Seed value only: later changes reach the sandbox through <StylesSync/> so they never reset the editor.
+    const initialStylesCssRef = React.useRef(sandpackStylesCss);
     const files = React.useMemo(() => {
         const nextFiles = {
             "/App.tsx": { code: appTsx, active: true },
-            "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
+            "/styles.css": {
+                code: initialStylesCssRef.current || buildSandpackStylesCss({}, effectivePreviewPadding)
+            }
         };
         if (includeSeedgridDependency) {
             // Intercept the package entry point and redirect to the pre-compiled sandbox bundle
@@ -1434,7 +1475,6 @@ export default function SgPlayground(props) {
         appTsx,
         effectivePreviewPadding,
         includeSeedgridDependency,
-        sandpackStylesCss,
         shouldIncludeNodePolyfills,
         shouldShimLucide,
         shouldShimSandpackReact,
@@ -1482,11 +1522,11 @@ export default function SgPlayground(props) {
         visibleFiles: ["/App.tsx"],
         externalResources: includeSeedgridDependency ? SANDPACK_EXTERNAL_RESOURCES : []
     }), [includeSeedgridDependency, resolvedBundlerTimeoutMs, resolvedBundlerURL]);
-    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), style: withCard ? undefined : style, children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, theme: sandpackTheme, 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 content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), style: withCard ? undefined : style, children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, theme: sandpackTheme, children: [_jsx("style", { children: SANDPACK_HOST_STYLES_CSS }), _jsx(StylesSync, { css: sandpackStylesCss }), _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: "sg-pg-tabs 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\u00C3\u00B3digo" }), _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, { 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), style: withCard ? undefined : style, children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: resolvedCode })] }));
+                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("preview"), children: "Preview" })] }), _jsxs("div", { className: cn("sg-pg-grid", resizeClass), style: { height: currentHeight }, children: [_jsxs("div", { className: "sg-pg-panel sg-pg-code border-border", "data-mobile-hidden": activePanel !== "code" ? "true" : "false", 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: "sg-pg-panel", "data-mobile-hidden": activePanel !== "preview" ? "true" : "false", 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), style: withCard ? undefined : style, children: [withCard ? null : title ? _jsx("div", { className: "text-sm font-medium", children: title }) : null, _jsx(ReadonlyBlock, { code: resolvedCode })] }));
     if (!withCard)
         return content;
     return (_jsx(SgCard, { id: cardId, title: title ?? "Codigo", description: description, collapsible: collapsible, defaultOpen: defaultOpen, className: cn("rounded-lg", className), style: style, bodyClassName: "p-0", children: content }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-playground",
-  "version": "2026.11.0",
+  "version": "2026.11.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -38,7 +38,7 @@
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "typescript": "^5.5.4",
-    "@seedgrid/fe-components": "2026.11.0"
+    "@seedgrid/fe-components": "2026.11.2"
   },
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",