@seedgrid/fe-playground 2026.3.26 → 2026.3.27-2

package/dist/SgPlayground.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
-export type SgPlaygroundProps = {
-    code: string;
+type SgPlaygroundSharedProps = {
     interactive?: boolean;
     codeContract?: "renderBody" | "appFile";
     preset?: SgPlaygroundPreset;
@@ -26,6 +25,13 @@ export type SgPlaygroundProps = {
     defaultOpen?: boolean;
     cardId?: string;
 };
+export type SgPlaygroundProps = ({
+    code: string;
+    playgroundFile?: never;
+} & SgPlaygroundSharedProps) | ({
+    playgroundFile: string;
+    code?: never;
+} & SgPlaygroundSharedProps);
 export type SgPlaygroundPreset = "auto" | "basic" | "seedgrid" | "editor" | "full";
 export type SgPlaygroundNpmRegistry = {
     enabledScopes: string[];
@@ -35,4 +41,5 @@ export type SgPlaygroundNpmRegistry = {
     registryAuthToken?: string;
 };
 export default function SgPlayground(props: Readonly<SgPlaygroundProps>): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=SgPlayground.d.ts.map

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,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,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,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,2CAkmBtE"}
+{"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,2CAooBtE"}

package/dist/SgPlayground.js

@@ -6,6 +6,9 @@ import { SgButton, SgCard } from "@seedgrid/fe-components";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
+function getInlinePlaygroundCode(props) {
+    return "code" in props ? (props.code ?? "") : "";
+}
 const DEFAULT_SEEDGRID_DEPENDENCY = "latest";
 const DEFAULT_SANDPACK_BUNDLER_URL = "https://sandpack.seedgrid.com.br";
 const DEFAULT_SANDPACK_BUNDLER_TIMEOUT_MS = 60000;
@@ -1052,12 +1055,43 @@ function shouldSuppressCoreJsProviderWarning(args) {
     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, style, 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 { interactive = false, codeContract = "renderBody", preset = "auto", title, description, height = 360, expandedHeight = "70vh", expandable = true, resizable = true, resizeAxis = "vertical", previewPadding, className, style, 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 [resolvedCode, setResolvedCode] = React.useState(() => getInlinePlaygroundCode(props));
     const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
     const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
     const [sandpackTheme, setSandpackTheme] = React.useState(() => resolveSandpackThemeFromHost());
     const [isExpanded, setIsExpanded] = React.useState(false);
     const [activePanel, setActivePanel] = React.useState("code");
+    React.useEffect(() => {
+        if ("code" in props) {
+            setResolvedCode(props.code ?? "");
+            return;
+        }
+        let active = true;
+        const loadPlaygroundFile = async () => {
+            try {
+                const response = await fetch(`/api/showcase-code?path=${encodeURIComponent(props.playgroundFile)}`, {
+                    cache: "no-store"
+                });
+                if (!response.ok) {
+                    throw new Error(`Failed to load playground file: ${props.playgroundFile}`);
+                }
+                const payload = await response.json();
+                if (active) {
+                    setResolvedCode(payload.code ?? "");
+                }
+            }
+            catch {
+                if (active) {
+                    setResolvedCode(`// Failed to load playground file: ${props.playgroundFile}`);
+                }
+            }
+        };
+        void loadPlaygroundFile();
+        return () => {
+            active = false;
+        };
+    }, [props.code, props.playgroundFile]);
     React.useEffect(() => {
         if (typeof window === "undefined")
             return;
@@ -1100,8 +1134,8 @@ export default function SgPlayground(props) {
   SgAutocomplete
 } from "@seedgrid/fe-components";`;
     const appTsx = React.useMemo(() => codeContract === "appFile"
-        ? code
-        : buildAppTsxFromRenderBody(code, seedgridDefaultImports, previewWrapperClassName), [code, codeContract, previewWrapperClassName, seedgridDefaultImports]);
+        ? resolvedCode
+        : buildAppTsxFromRenderBody(resolvedCode, seedgridDefaultImports, previewWrapperClassName), [codeContract, previewWrapperClassName, resolvedCode, seedgridDefaultImports]);
     const resolvedSeedgridDependency = seedgridDependency ??
         process.env.NEXT_PUBLIC_SANDPACK_SEEDGRID_DEPENDENCY ??
         DEFAULT_SEEDGRID_DEPENDENCY;
@@ -1453,7 +1487,7 @@ export default function SgPlayground(props) {
                                 ? "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: 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), 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.3.26",
+  "version": "2026.3.27-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.3.26"
+    "@seedgrid/fe-components": "2026.3.27-2"
   },
   "scripts": {
     "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",