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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,6 +2,7 @@ export type SgPlaygroundProps = {
2
2
  code: string;
3
3
  interactive?: boolean;
4
4
  codeContract?: "renderBody" | "appFile";
5
+ preset?: SgPlaygroundPreset;
5
6
  title?: string;
6
7
  description?: string;
7
8
  height?: number | string;
@@ -20,5 +21,6 @@ export type SgPlaygroundProps = {
20
21
  defaultOpen?: boolean;
21
22
  cardId?: string;
22
23
  };
24
+ export type SgPlaygroundPreset = "auto" | "basic" | "seedgrid" | "editor" | "full";
23
25
  export default function SgPlayground(props: Readonly<SgPlaygroundProps>): import("react/jsx-runtime").JSX.Element;
24
26
  //# sourceMappingURL=SgPlayground.d.ts.map
@@ -1 +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;AAimBF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAyPtE"}
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,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"}
@@ -8,10 +8,15 @@ function cn(...parts) {
8
8
  return parts.filter(Boolean).join(" ");
9
9
  }
10
10
  const DEFAULT_SEEDGRID_DEPENDENCY = "latest";
11
- const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
12
- "@codesandbox/sandpack-react": "^2.20.0",
11
+ const DEFAULT_SANDBOX_BASE_DEPENDENCIES = {
12
+ react: "18.2.0",
13
+ "react-dom": "18.2.0"
14
+ };
15
+ const DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES = {
13
16
  "react-hook-form": "^7.0.0",
14
- "lucide-react": "^0.468.0",
17
+ "lucide-react": "^0.468.0"
18
+ };
19
+ const DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES = {
15
20
  "@tiptap/core": "^2.9.1",
16
21
  "@tiptap/react": "^2.9.1",
17
22
  "@tiptap/pm": "^2.9.1",
@@ -27,11 +32,29 @@ const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
27
32
  "@tiptap/extension-superscript": "^2.9.1",
28
33
  "@tiptap/extension-font-family": "^2.9.1"
29
34
  };
35
+ const DEFAULT_SANDBOX_HOST_DEPENDENCIES = {
36
+ "@codesandbox/sandpack-react": "^2.20.0"
37
+ };
30
38
  const DEFAULT_SANDPACK_POLYFILLS = {
31
39
  assert: "^2.1.0",
32
40
  process: "^0.11.10",
33
41
  util: "^0.12.5"
34
42
  };
43
+ const TIPTAP_SHIM_PACKAGES = [
44
+ "@tiptap/core",
45
+ "@tiptap/pm",
46
+ "@tiptap/starter-kit",
47
+ "@tiptap/extension-underline",
48
+ "@tiptap/extension-link",
49
+ "@tiptap/extension-image",
50
+ "@tiptap/extension-text-align",
51
+ "@tiptap/extension-text-style",
52
+ "@tiptap/extension-color",
53
+ "@tiptap/extension-highlight",
54
+ "@tiptap/extension-subscript",
55
+ "@tiptap/extension-superscript",
56
+ "@tiptap/extension-font-family"
57
+ ];
35
58
  const SANDPACK_EXTERNAL_RESOURCES = [
36
59
  // Prebuilt utility CSS so classes from @seedgrid/fe-components can render inside Sandpack
37
60
  "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";
67
90
  export default markdownit;
68
91
  export { markdownit };
69
92
  `;
93
+ function createEsmShimPackageJson(name) {
94
+ return `{
95
+ "name": "${name}",
96
+ "version": "0.0.0-sandpack-shim",
97
+ "type": "module",
98
+ "main": "./index.js",
99
+ "module": "./index.js",
100
+ "exports": {
101
+ ".": "./index.js"
102
+ }
103
+ }`;
104
+ }
105
+ const SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS = `export const SandpackProvider = ({ children }) => children ?? null;
106
+ export const SandpackCodeEditor = () => null;
107
+ export const SandpackPreview = () => null;
108
+ export const useSandpack = () => ({
109
+ sandpack: {
110
+ activeFile: "/App.tsx",
111
+ files: { "/App.tsx": { code: "" } },
112
+ runSandpack: async () => {},
113
+ clients: {},
114
+ status: "idle"
115
+ },
116
+ dispatch: () => {},
117
+ listen: () => () => {}
118
+ });
119
+ export default {};
120
+ `;
121
+ const SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS = `export const EditorContent = () => null;
122
+ export const BubbleMenu = () => null;
123
+ export const FloatingMenu = () => null;
124
+ export const useEditor = () => null;
125
+ export default {};
126
+ `;
127
+ const SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS = `const extension = {
128
+ configure() {
129
+ return extension;
130
+ },
131
+ extend() {
132
+ return extension;
133
+ }
134
+ };
135
+ export default extension;
136
+ `;
70
137
  const SANDPACK_ASSERT_SHIM_PACKAGE_JSON = `{
71
138
  "name": "assert",
72
139
  "version": "0.0.0-sandpack-shim",
@@ -314,6 +381,14 @@ body {
314
381
  .size-4 { width: 1rem; height: 1rem; }
315
382
  .size-5 { width: 1.25rem; height: 1.25rem; }
316
383
  `;
384
+ const SANDPACK_HOST_STYLES_CSS = `
385
+ .sg-playground-preview .sp-cube-wrapper {
386
+ top: 8px !important;
387
+ right: 8px !important;
388
+ bottom: auto !important;
389
+ left: auto !important;
390
+ }
391
+ `;
317
392
  function parseRgbParts(raw) {
318
393
  const value = raw.trim();
319
394
  if (!value)
@@ -552,7 +627,7 @@ function RunButton({ onRun }) {
552
627
  return (_jsx(SgButton, { severity: "primary", size: "sm", loading: running, onClick: handleRun, children: running ? "Running" : "Run" }));
553
628
  }
554
629
  export default function SgPlayground(props) {
555
- 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;
630
+ 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;
556
631
  const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
557
632
  const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
558
633
  const [isExpanded, setIsExpanded] = React.useState(false);
@@ -602,36 +677,97 @@ export default function SgPlayground(props) {
602
677
  const resolvedSeedgridDependency = seedgridDependency ??
603
678
  process.env.NEXT_PUBLIC_SANDPACK_SEEDGRID_DEPENDENCY ??
604
679
  DEFAULT_SEEDGRID_DEPENDENCY;
680
+ const requestedDeps = dependencies ?? {};
681
+ const requestedDepKeys = Object.keys(requestedDeps);
682
+ const codeUsesSeedgrid = /from\s+["']@seedgrid\/fe-components["']/.test(appTsx);
683
+ const codeUsesTextEditor = /\bSgTextEditor\b/.test(appTsx);
684
+ const codeUsesPlaygroundComponent = /\bSgPlayground\b/.test(appTsx);
685
+ const resolvedPreset = preset === "auto"
686
+ ? codeUsesTextEditor
687
+ ? "editor"
688
+ : codeUsesSeedgrid
689
+ ? "seedgrid"
690
+ : "basic"
691
+ : preset;
692
+ const includeSeedgridDependency = resolvedPreset === "seedgrid" ||
693
+ resolvedPreset === "editor" ||
694
+ resolvedPreset === "full" ||
695
+ requestedDepKeys.includes("@seedgrid/fe-components");
696
+ const includeEditorDependencies = resolvedPreset === "editor" ||
697
+ resolvedPreset === "full" ||
698
+ codeUsesTextEditor ||
699
+ requestedDepKeys.some((dep) => dep.startsWith("@tiptap/"));
700
+ const includeSandpackReactDependency = resolvedPreset === "full" ||
701
+ codeUsesPlaygroundComponent ||
702
+ requestedDepKeys.includes("@codesandbox/sandpack-react");
703
+ const shouldShimSandpackReact = includeSeedgridDependency && !includeSandpackReactDependency;
704
+ const shouldShimTiptap = includeSeedgridDependency && !includeEditorDependencies;
705
+ const shouldIncludeNodePolyfills = includeEditorDependencies;
605
706
  const files = {
606
707
  "/App.tsx": { code: appTsx, active: true },
607
- "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) },
708
+ "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
709
+ };
710
+ if (includeSeedgridDependency) {
608
711
  // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
609
- "/node_modules/qrcode/package.json": { code: SANDPACK_QRCODE_SHIM_PACKAGE_JSON, hidden: true },
610
- "/node_modules/qrcode/index.js": { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true },
712
+ files["/node_modules/qrcode/package.json"] = { code: SANDPACK_QRCODE_SHIM_PACKAGE_JSON, hidden: true };
713
+ files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
714
+ }
715
+ if (shouldIncludeNodePolyfills) {
611
716
  // markdown-it CLI entry uses node:fs and breaks in browser runtime.
612
- "/node_modules/markdown-it/bin/markdown-it.mjs": {
717
+ files["/node_modules/markdown-it/bin/markdown-it.mjs"] = {
613
718
  code: SANDPACK_MARKDOWN_IT_BIN_SHIM,
614
719
  hidden: true
615
- },
720
+ };
616
721
  // Node builtin compatibility shims used by transitive dependencies (e.g. argparse from markdown-it/tiptap).
617
- "/node_modules/assert/package.json": { code: SANDPACK_ASSERT_SHIM_PACKAGE_JSON, hidden: true },
618
- "/node_modules/assert/index.js": { code: SANDPACK_ASSERT_SHIM_INDEX_JS, hidden: true },
619
- "/node_modules/util/package.json": { code: SANDPACK_UTIL_SHIM_PACKAGE_JSON, hidden: true },
620
- "/node_modules/util/index.js": { code: SANDPACK_UTIL_SHIM_INDEX_JS, hidden: true },
621
- "/node_modules/path/package.json": { code: SANDPACK_PATH_SHIM_PACKAGE_JSON, hidden: true },
622
- "/node_modules/path/index.js": { code: SANDPACK_PATH_SHIM_INDEX_JS, hidden: true },
623
- "/node_modules/fs/package.json": { code: SANDPACK_FS_SHIM_PACKAGE_JSON, hidden: true },
624
- "/node_modules/fs/index.js": { code: SANDPACK_FS_SHIM_INDEX_JS, hidden: true },
625
- "/node_modules/process/package.json": { code: SANDPACK_PROCESS_SHIM_PACKAGE_JSON, hidden: true },
626
- "/node_modules/process/index.js": { code: SANDPACK_PROCESS_SHIM_INDEX_JS, hidden: true }
627
- };
722
+ files["/node_modules/assert/package.json"] = { code: SANDPACK_ASSERT_SHIM_PACKAGE_JSON, hidden: true };
723
+ files["/node_modules/assert/index.js"] = { code: SANDPACK_ASSERT_SHIM_INDEX_JS, hidden: true };
724
+ files["/node_modules/util/package.json"] = { code: SANDPACK_UTIL_SHIM_PACKAGE_JSON, hidden: true };
725
+ files["/node_modules/util/index.js"] = { code: SANDPACK_UTIL_SHIM_INDEX_JS, hidden: true };
726
+ files["/node_modules/path/package.json"] = { code: SANDPACK_PATH_SHIM_PACKAGE_JSON, hidden: true };
727
+ files["/node_modules/path/index.js"] = { code: SANDPACK_PATH_SHIM_INDEX_JS, hidden: true };
728
+ files["/node_modules/fs/package.json"] = { code: SANDPACK_FS_SHIM_PACKAGE_JSON, hidden: true };
729
+ files["/node_modules/fs/index.js"] = { code: SANDPACK_FS_SHIM_INDEX_JS, hidden: true };
730
+ files["/node_modules/process/package.json"] = { code: SANDPACK_PROCESS_SHIM_PACKAGE_JSON, hidden: true };
731
+ files["/node_modules/process/index.js"] = { code: SANDPACK_PROCESS_SHIM_INDEX_JS, hidden: true };
732
+ }
733
+ if (shouldShimSandpackReact) {
734
+ files["/node_modules/@codesandbox/sandpack-react/package.json"] = {
735
+ code: createEsmShimPackageJson("@codesandbox/sandpack-react"),
736
+ hidden: true
737
+ };
738
+ files["/node_modules/@codesandbox/sandpack-react/index.js"] = {
739
+ code: SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS,
740
+ hidden: true
741
+ };
742
+ }
743
+ if (shouldShimTiptap) {
744
+ files["/node_modules/@tiptap/react/package.json"] = {
745
+ code: createEsmShimPackageJson("@tiptap/react"),
746
+ hidden: true
747
+ };
748
+ files["/node_modules/@tiptap/react/index.js"] = {
749
+ code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
750
+ hidden: true
751
+ };
752
+ for (const packageName of TIPTAP_SHIM_PACKAGES) {
753
+ files[`/node_modules/${packageName}/package.json`] = {
754
+ code: createEsmShimPackageJson(packageName),
755
+ hidden: true
756
+ };
757
+ files[`/node_modules/${packageName}/index.js`] = {
758
+ code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
759
+ hidden: true
760
+ };
761
+ }
762
+ }
628
763
  const deps = {
629
- react: "^19.0.0",
630
- "react-dom": "^19.0.0",
631
- ...DEFAULT_SANDPACK_POLYFILLS,
632
- ...DEFAULT_SEEDGRID_PEER_DEPENDENCIES,
633
- "@seedgrid/fe-components": resolvedSeedgridDependency,
634
- ...(dependencies ?? {})
764
+ ...DEFAULT_SANDBOX_BASE_DEPENDENCIES,
765
+ ...(includeSeedgridDependency ? DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES : {}),
766
+ ...(includeEditorDependencies ? DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES : {}),
767
+ ...(includeSandpackReactDependency ? DEFAULT_SANDBOX_HOST_DEPENDENCIES : {}),
768
+ ...(shouldIncludeNodePolyfills ? DEFAULT_SANDPACK_POLYFILLS : {}),
769
+ ...(includeSeedgridDependency ? { "@seedgrid/fe-components": resolvedSeedgridDependency } : {}),
770
+ ...requestedDeps
635
771
  };
636
772
  const currentHeight = isExpanded ? expandedHeight : height;
637
773
  const resizeClass = !resizable
@@ -651,11 +787,11 @@ export default function SgPlayground(props) {
651
787
  activeFile: "/App.tsx",
652
788
  visibleFiles: ["/App.tsx"],
653
789
  externalResources: SANDPACK_EXTERNAL_RESOURCES
654
- }, 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"
790
+ }, 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"
655
791
  ? "border-primary text-foreground"
656
792
  : "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"
657
793
  ? "border-primary text-foreground"
658
- : "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 })] }));
794
+ : "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 })] }));
659
795
  if (!withCard)
660
796
  return content;
661
797
  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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seedgrid/fe-components",
3
- "version": "2026.3.2-5",
3
+ "version": "2026.3.2-6",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",