@seedgrid/fe-playground 0.1.0 → 2026.3.19-1

package/README.md

@@ -1,17 +1,78 @@
-# @seedgrid/fe-playground
-
-Pacote separado para o `SgPlayground`, com editor + preview baseado em Sandpack.
-
-## Instalacao
-
-```bash
-pnpm add @seedgrid/fe-playground @seedgrid/fe-components
-```
-
-## Uso rapido
-
-```tsx
-import { SgPlayground } from "@seedgrid/fe-playground";
-
-<SgPlayground code={`<div>Hello</div>`} />;
-```
+# @seedgrid/fe-playground
+
+Wrapper leve em torno do `SgPlayground`, um componente baseado em Sandpack que combina editor, preview e runtime SeedGrid dentro de um card responsivo.
+
+## Características
+
+- Presets (`auto`, `basic`, `seedgrid`, `editor`, `full`) que ajustam dependências, shims e comportamento do bundler.
+- Experiência integrada com botões e cartões SeedGrid (`SgButton`, `SgCard`), incluindo cabeçalho customizável e modos colapsáveis.
+- Suporte a registries NPM privadas através de `npmRegistries`, controle de tamanho (`resizable`, `height`, `expandedHeight`) e carregamento automático de dependências (`seedgridDependency`).
+- Ambiente seguro para bibliotecas pesadas: evita o download de lucide, markdown-it e qrcode quando o preset não exige.
+- Hooks internos do Sandpack via `SandpackProvider`, `SandpackCodeEditor` e `SandpackPreview`.
+
+## Instalação
+
+```bash
+pnpm add @seedgrid/fe-playground @seedgrid/fe-components
+```
+
+## Como utilizar
+
+```tsx
+import { SgPlayground } from "@seedgrid/fe-playground";
+
+export function PlaygroundExample() {
+  return (
+    <SgPlayground
+      code={`<>Olá SeedGrid!</>`}
+      preset="seedgrid"
+      interactive
+      title="Experimentando componentes"
+      description="Duplo clique para editar o código do componente."
+      expandedHeight="500px"
+      resizable
+      previewPadding={24}
+    />
+  );
+}
+```
+
+## Props em destaque
+
+- `code`: string com JSX/TSX inicial.
+- `preset`: escolhe configurações prontas (`auto`, `basic`, `seedgrid`, `editor`, `full`).
+- `interactive`: ativa interação no preview.
+- `dependencies`: adiciona dependências extras ao sandbox.
+- `npmRegistries`: lista de registries private com `registryUrl`, `enabledScopes` e `registryAuthToken`.
+- `expandable`, `collapsible`, `defaultOpen`: controla se o card inicia aberto e pode ser recolhido.
+- `seedgridDependency`: força uma versão específica da runtime SeedGrid.
+
+## Recursos
+
+- [Sandpack React](https://sandpack.codesandbox.io) para editor + preview isolado.
+- Fidelity SeedGrid com `SgButton`, `SgCard` e estilos compartilhados.
+- Presets que simulam o ambiente dos componentes oficiais do design system.
+
+## Exemplo avançado
+
+```tsx
+<SgPlayground
+  code={`<Badge label="Novo!" color="success" />`}
+  preset="full"
+  withCard
+  collapsible
+  defaultOpen={false}
+  npmRegistries={[
+    {
+      registryUrl: "https://registry.npmjs.org/",
+      enabledScopes: ["@seedgrid"],
+      limitToScopes: true
+    }
+  ]}
+  dependencies={{
+    "@seedgrid/fe-components": "workspace:*",
+    "@seedgrid/fe-theme": "workspace:*"
+  }}
+/>
+```
+

package/dist/SgPlayground.js

@@ -18,26 +18,26 @@ const DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES = {
 };
 // lucide-react is a heavy peer dep (~1400 icons). For non-full presets we shim it with
 // a generic SVG placeholder to avoid OOM in the browser bundler.
-const SANDPACK_LUCIDE_REACT_SHIM_INDEX_JS = `const React = require("react");
-const Icon = function(props) {
-  return React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: props.size || props.width || 16,
-    height: props.size || props.height || 16,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: props.color || "currentColor",
-    strokeWidth: props.strokeWidth || 2,
-    className: props.className
-  });
-};
-const proxy = new Proxy({}, {
-  get: function(_, key) {
-    if (key === "__esModule") return true;
-    return Icon;
-  }
-});
-module.exports = proxy;
+const SANDPACK_LUCIDE_REACT_SHIM_INDEX_JS = `const React = require("react");
+const Icon = function(props) {
+  return React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: props.size || props.width || 16,
+    height: props.size || props.height || 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: props.color || "currentColor",
+    strokeWidth: props.strokeWidth || 2,
+    className: props.className
+  });
+};
+const proxy = new Proxy({}, {
+  get: function(_, key) {
+    if (key === "__esModule") return true;
+    return Icon;
+  }
+});
+module.exports = proxy;
 `;
 const DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES = {
     "@tiptap/core": "^2.9.1",
@@ -79,26 +79,26 @@ const TIPTAP_SHIM_PACKAGES = [
     "@tiptap/extension-font-family"
 ];
 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."
-  );
-
-const qrcodeShim = {
-  toDataURL() {
-    return Promise.reject(makeError());
-  }
-};
-
-export const toDataURL = (...args) => qrcodeShim.toDataURL(...args);
-export default qrcodeShim;
+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."
+  );
+
+const qrcodeShim = {
+  toDataURL() {
+    return Promise.reject(makeError());
+  }
+};
+
+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_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_MARKDOWN_IT_PACKAGE_JSON_SHIM = JSON.stringify({
     name: "markdown-it",
@@ -120,230 +120,230 @@ const SANDPACK_MARKDOWN_IT_PACKAGE_JSON_SHIM = JSON.stringify({
         "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;
-export const useSandpack = () => ({
-  sandpack: {
-    activeFile: "/App.tsx",
-    files: { "/App.tsx": { code: "" } },
-    runSandpack: async () => {},
-    clients: {},
-    status: "idle"
-  },
-  dispatch: () => {},
-  listen: () => () => {}
-});
-export default {};
+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_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_TIPTAP_EXTENSION_SHIM_INDEX_JS = `const extension = {
+  configure() {
+    return extension;
+  },
+  extend() {
+    return extension;
+  }
+};
+export default extension;
 `;
-const SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS = `import * as React from "react";
-
-export function SgTextEditor() {
-  return React.createElement(
-    "div",
-    {
-      style: {
-        padding: "0.75rem",
-        border: "1px solid #e4e4e7",
-        borderRadius: "0.5rem",
-        fontSize: "0.875rem",
-        color: "#6b7280",
-        background: "#f9fafb"
-      }
-    },
-    "SgTextEditor is disabled in this sandbox preset."
-  );
-}
-
-export default SgTextEditor;
+const SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS = `import * as React from "react";
+
+export function SgTextEditor() {
+  return React.createElement(
+    "div",
+    {
+      style: {
+        padding: "0.75rem",
+        border: "1px solid #e4e4e7",
+        borderRadius: "0.5rem",
+        fontSize: "0.875rem",
+        color: "#6b7280",
+        background: "#f9fafb"
+      }
+    },
+    "SgTextEditor is disabled in this sandbox preset."
+  );
+}
+
+export default SgTextEditor;
 `;
-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_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_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_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_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_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_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_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_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_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_NODE_ASSERT_ALIAS_SHIM_INDEX_JS = `const assertShim = require("assert");
-module.exports = assertShim;
-module.exports.default = assertShim;
+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_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_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_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_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_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",
@@ -613,65 +613,65 @@ const SANDPACK_SG_VARS = [
     "--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;
-}
-
-html, body, #root {
-  margin: 0;
-  min-height: 100%;
-}
-
-#root {
-  padding: var(--sg-preview-padding, 0px);
-}
-
-body {
-  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-  background: rgb(var(--sg-bg, 255 255 255));
-  color: rgb(var(--sg-text, 11 11 12));
-}
-
-/* Classes with arbitrary values used by SeedGrid components */
-.bg-\\[var\\(--sg-btn-bg\\)\\] { background-color: var(--sg-btn-bg); }
-.text-\\[var\\(--sg-btn-fg\\)\\] { color: var(--sg-btn-fg); }
-.border-\\[var\\(--sg-btn-border\\)\\] { border-color: var(--sg-btn-border); }
-.hover\\:bg-\\[var\\(--sg-btn-hover-bg\\)\\]:hover { background-color: var(--sg-btn-hover-bg); }
-.hover\\:text-\\[var\\(--sg-btn-hover-fg\\)\\]:hover { color: var(--sg-btn-hover-fg); }
-.hover\\:border-\\[var\\(--sg-btn-hover-border\\)\\]:hover { border-color: var(--sg-btn-hover-border); }
-.active\\:bg-\\[var\\(--sg-btn-active-bg\\)\\]:active { background-color: var(--sg-btn-active-bg); }
-.focus-visible\\:ring-\\[var\\(--sg-btn-ring\\)\\]:focus-visible { box-shadow: 0 0 0 4px var(--sg-btn-ring); }
-.hover\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.12\\)\\]:hover { background-color: rgb(var(--sg-btn-tint) / 0.12); }
-.active\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.18\\)\\]:active { background-color: rgb(var(--sg-btn-tint) / 0.18); }
-.hover\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.10\\)\\]:hover { background-color: rgb(var(--sg-btn-tint) / 0.10); }
-.active\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.16\\)\\]:active { background-color: rgb(var(--sg-btn-tint) / 0.16); }
-.transition-\\[background-color\\,color\\,border-color\\,box-shadow\\,transform\\] {
-  transition-property: background-color, color, border-color, box-shadow, transform;
-}
-.active\\:translate-y-\\[0\\.5px\\]:active { transform: translateY(0.5px); }
-.size-4 { width: 1rem; height: 1rem; }
-.size-5 { width: 1.25rem; height: 1.25rem; }
+const SANDPACK_BASE_STYLES_CSS = `* {
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  margin: 0;
+  min-height: 100%;
+}
+
+#root {
+  padding: var(--sg-preview-padding, 0px);
+}
+
+body {
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  background: rgb(var(--sg-bg, 255 255 255));
+  color: rgb(var(--sg-text, 11 11 12));
+}
+
+/* Classes with arbitrary values used by SeedGrid components */
+.bg-\\[var\\(--sg-btn-bg\\)\\] { background-color: var(--sg-btn-bg); }
+.text-\\[var\\(--sg-btn-fg\\)\\] { color: var(--sg-btn-fg); }
+.border-\\[var\\(--sg-btn-border\\)\\] { border-color: var(--sg-btn-border); }
+.hover\\:bg-\\[var\\(--sg-btn-hover-bg\\)\\]:hover { background-color: var(--sg-btn-hover-bg); }
+.hover\\:text-\\[var\\(--sg-btn-hover-fg\\)\\]:hover { color: var(--sg-btn-hover-fg); }
+.hover\\:border-\\[var\\(--sg-btn-hover-border\\)\\]:hover { border-color: var(--sg-btn-hover-border); }
+.active\\:bg-\\[var\\(--sg-btn-active-bg\\)\\]:active { background-color: var(--sg-btn-active-bg); }
+.focus-visible\\:ring-\\[var\\(--sg-btn-ring\\)\\]:focus-visible { box-shadow: 0 0 0 4px var(--sg-btn-ring); }
+.hover\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.12\\)\\]:hover { background-color: rgb(var(--sg-btn-tint) / 0.12); }
+.active\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.18\\)\\]:active { background-color: rgb(var(--sg-btn-tint) / 0.18); }
+.hover\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.10\\)\\]:hover { background-color: rgb(var(--sg-btn-tint) / 0.10); }
+.active\\:bg-\\[rgb\\(var\\(--sg-btn-tint\\)\\/0\\.16\\)\\]:active { background-color: rgb(var(--sg-btn-tint) / 0.16); }
+.transition-\\[background-color\\,color\\,border-color\\,box-shadow\\,transform\\] {
+  transition-property: background-color, color, border-color, box-shadow, transform;
+}
+.active\\:translate-y-\\[0\\.5px\\]:active { transform: translateY(0.5px); }
+.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;
-}
+const SANDPACK_HOST_STYLES_CSS = `
+.sg-playground-preview .sp-cube-wrapper {
+  top: 8px !important;
+  right: 8px !important;
+  bottom: auto !important;
+  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>
+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();
@@ -920,11 +920,11 @@ function buildSandpackStylesCss(themeVars, previewPadding, hostCss = "") {
         .sort(([a], [b]) => a.localeCompare(b))
         .map(([varName, value]) => `  ${varName}: ${value};`)
         .join("\n");
-    return `:root {
-${rootVars}
-}
-
-${SANDPACK_BASE_STYLES_CSS}
+    return `:root {
+${rootVars}
+}
+
+${SANDPACK_BASE_STYLES_CSS}
 ${hostCss ? `\n\n${hostCss}` : ""}`;
 }
 function ReadonlyBlock({ code }) {
@@ -937,30 +937,30 @@ function buildAppTsxFromRenderBody(renderBody, defaultImports, wrapperClassName)
         .map((line) => (line ? `        ${line}` : ""))
         .join("\n");
     if (!wrapperClassName) {
-        return `import * as React from "react";
-${defaultImports}
-
-export default function App() {
-  return (
-    <>
-${body}
-    </>
-  );
-}
+        return `import * as React from "react";
+${defaultImports}
+
+export default function App() {
+  return (
+    <>
+${body}
+    </>
+  );
+}
 `;
     }
-    return `import * as React from "react";
-${defaultImports}
-
-export default function App() {
-  return (
-    <div className="${wrapperClassName}">
-      <>
-${body}
-      </>
-    </div>
-  );
-}
+    return `import * as React from "react";
+${defaultImports}
+
+export default function App() {
+  return (
+    <div className="${wrapperClassName}">
+      <>
+${body}
+      </>
+    </div>
+  );
+}
 `;
 }
 async function copyText(text) {
@@ -1090,14 +1090,14 @@ export default function SgPlayground(props) {
             }
         };
     }, [effectivePreviewPadding]);
-    const seedgridDefaultImports = defaultImports ?? `import {
-  SgScreen,
-  SgMainPanel,
-  SgPanel,
-  SgGrid,
-  SgStack,
-  SgButton,
-  SgAutocomplete
+    const seedgridDefaultImports = defaultImports ?? `import {
+  SgScreen,
+  SgMainPanel,
+  SgPanel,
+  SgGrid,
+  SgStack,
+  SgButton,
+  SgAutocomplete
 } from "@seedgrid/fe-components";`;
     const appTsx = React.useMemo(() => codeContract === "appFile"
         ? code

package/package.json

@@ -1,49 +1,49 @@
-{
-    "name":  "@seedgrid/fe-playground",
-    "version":  "0.1.0",
-    "license":  "MIT",
-    "type":  "module",
-    "repository":  {
-                       "type":  "git",
-                       "url":  "git+https://github.com/SeedGrid/seedgrid-fe-components.git",
-                       "directory":  "packages/seedgrid-fe-playground"
-                   },
-    "homepage":  "https://github.com/SeedGrid/seedgrid-fe-components/tree/main/packages/seedgrid-fe-playground",
-    "bugs":  {
-                 "url":  "https://github.com/SeedGrid/seedgrid-fe-components/issues"
-             },
-    "main":  "dist/index.js",
-    "types":  "dist/index.d.ts",
-    "exports":  {
-                    ".":  {
-                              "types":  "./dist/index.d.ts",
-                              "default":  "./dist/index.js"
-                          }
-                },
-    "sideEffects":  false,
-    "files":  [
-                  "dist"
-              ],
-    "scripts":  {
-                    "clean":  "node -e \"require(\u0027node:fs\u0027).rmSync(\u0027dist\u0027, { recursive: true, force: true })\"",
-                    "build":  "pnpm run clean \u0026\u0026 tsc -p tsconfig.json",
-                    "dev":  "tsc -p tsconfig.json --watch --preserveWatchOutput",
-                    "typecheck":  "tsc -p tsconfig.json --noEmit"
-                },
-    "peerDependencies":  {
-                             "@seedgrid/fe-components":  "^0.2.10",
-                             "react":  "^18.2.0 || ^19.0.0",
-                             "react-dom":  "^18.2.0 || ^19.0.0"
-                         },
-    "dependencies":  {
-                         "@codesandbox/sandpack-react":  "^2.20.0"
-                     },
-    "devDependencies":  {
-                            "@seedgrid/fe-components":  "workspace:*",
-                            "@types/react":  "^19.0.0",
-                            "@types/react-dom":  "^19.0.0",
-                            "react":  "19.0.0",
-                            "react-dom":  "19.0.0",
-                            "typescript":  "^5.5.4"
-                        }
-}
+{
+  "name": "@seedgrid/fe-playground",
+  "version": "2026.3.19-1",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SeedGrid/seedgrid-fe-components",
+    "directory": "packages/seedgrid-fe-playground"
+  },
+  "homepage": "https://github.com/SeedGrid/seedgrid-fe-components/tree/main/packages/seedgrid-fe-playground",
+  "bugs": {
+    "url": "https://github.com/SeedGrid/seedgrid-fe-components/issues"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "pnpm run clean && tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "@seedgrid/fe-components": "^0.2.10",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-react": "^2.20.0"
+  },
+  "devDependencies": {
+    "@seedgrid/fe-components": "workspace:*",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "typescript": "^5.5.4"
+  }
+}