@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;
|
|
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
|
|
12
|
-
|
|
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"
|
|
610
|
-
"/node_modules/qrcode/index.js"
|
|
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"
|
|
618
|
-
"/node_modules/assert/index.js"
|
|
619
|
-
"/node_modules/util/package.json"
|
|
620
|
-
"/node_modules/util/index.js"
|
|
621
|
-
"/node_modules/path/package.json"
|
|
622
|
-
"/node_modules/path/index.js"
|
|
623
|
-
"/node_modules/fs/package.json"
|
|
624
|
-
"/node_modules/fs/index.js"
|
|
625
|
-
"/node_modules/process/package.json"
|
|
626
|
-
"/node_modules/process/index.js"
|
|
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
|
-
|
|
630
|
-
|
|
631
|
-
...
|
|
632
|
-
...
|
|
633
|
-
|
|
634
|
-
...(
|
|
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 }));
|