@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/menus/SgDockMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SgDockMenu.d.ts","sourceRoot":"","sources":["../../src/menus/SgDockMenu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GAAG,aAAa,GAAG,aAAa,GAC1C,YAAY,GAAG,eAAe,GAC9B,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC;AAElD,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG;IAC3B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sBAAsB;IACtB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,yCAAyC;IACzC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,MAAM,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACpC,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAkFD,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAghB1D"}

package/dist/menus/SgDockMenu.js

@@ -0,0 +1,480 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { t, useComponentsI18n } from "../i18n";
+import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
+/* ── constants ── */
+const EDGE = 24;
+const POS_CSS = {
+    "left-top": { top: EDGE, left: EDGE },
+    "left-center": { left: EDGE, top: "50%" },
+    "left-bottom": { bottom: EDGE, left: EDGE },
+    "center-top": { top: EDGE, left: "50%" },
+    "center-bottom": { bottom: EDGE, left: "50%" },
+    "right-top": { top: EDGE, right: EDGE },
+    "right-center": { right: EDGE, top: "50%" },
+    "right-bottom": { bottom: EDGE, right: EDGE },
+};
+const CENTER_TX = {
+    "left-center": "translateY(-50%)",
+    "right-center": "translateY(-50%)",
+    "center-top": "translateX(-50%)",
+    "center-bottom": "translateX(-50%)",
+};
+const ELEV_CLS = {
+    none: "",
+    sm: "shadow-sm",
+    md: "shadow-md shadow-black/15",
+    lg: "shadow-lg shadow-black/20",
+};
+function getLiftDirection(position, orientation) {
+    if (orientation === "horizontal") {
+        return position.includes("bottom") ? -1 : 1;
+    }
+    return position.startsWith("left") ? 1 : -1;
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function parseStoredDragPosition(raw) {
+    const value = typeof raw === "string" ? (() => {
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    })() : raw;
+    if (!value ||
+        typeof value !== "object" ||
+        typeof value.x !== "number" ||
+        typeof value.y !== "number" ||
+        !Number.isFinite(value.x) ||
+        !Number.isFinite(value.y)) {
+        return null;
+    }
+    return {
+        x: value.x,
+        y: value.y
+    };
+}
+/* ── orientation helper ── */
+function getOrientation(position) {
+    if (position === "center-top" || position === "center-bottom")
+        return "horizontal";
+    if (position === "left-center" || position === "right-center")
+        return "vertical";
+    // For corners, default to horizontal
+    return "horizontal";
+}
+/* ── component ── */
+export function SgDockMenu(props) {
+    const i18n = useComponentsI18n();
+    const hasEnvironmentProvider = useHasSgEnvironmentProvider();
+    const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
+    const { id, items, position = "center-bottom", enableDragDrop = false, dragId, offset, className = "", itemClassName = "", zIndex = 50, itemSize = 48, gap = 16, backgroundColor = "rgba(255, 255, 255, 0.95)", showLabels = true, magnify = true, magnifyScale = 1.5, borderRadius = 16, elevation = "lg", style, } = props;
+    const [dragPos, setDragPos] = React.useState(null);
+    const dragPosRef = React.useRef(null);
+    const hasStoredPosRef = React.useRef(false);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [hoveredIndex, setHoveredIndex] = React.useState(null);
+    const dragStart = React.useRef(null);
+    const dragMoved = React.useRef(false);
+    const containerRef = React.useRef(null);
+    const orientation = getOrientation(position);
+    const liftDirection = getLiftDirection(position, orientation);
+    const crossPadding = Math.max(8, Math.round(gap * 0.6));
+    const edgePadding = Math.max(Math.round(gap * 2.2), Math.round(itemSize * 0.45));
+    const isAbsolutePosition = style?.position === "absolute";
+    const storageKey = dragId
+        ? `sg-dockmenu-pos:${dragId}:${isAbsolutePosition ? "parent" : "viewport"}`
+        : null;
+    const loadStoredPosition = React.useCallback(async () => {
+        if (!storageKey)
+            return null;
+        if (hasEnvironmentProvider) {
+            try {
+                const loaded = await loadPersistedState(storageKey);
+                if (loaded === null || loaded === undefined)
+                    return null;
+                const parsed = parseStoredDragPosition(loaded);
+                if (!parsed) {
+                    await clearPersistedState(storageKey);
+                    return null;
+                }
+                return parsed;
+            }
+            catch {
+                return null;
+            }
+        }
+        try {
+            const raw = localStorage.getItem(storageKey);
+            if (!raw)
+                return null;
+            const parsed = parseStoredDragPosition(raw);
+            if (!parsed) {
+                localStorage.removeItem(storageKey);
+                return null;
+            }
+            return parsed;
+        }
+        catch {
+            return null;
+        }
+    }, [clearPersistedState, hasEnvironmentProvider, loadPersistedState, storageKey]);
+    const saveStoredPosition = React.useCallback(async (nextPos) => {
+        if (!storageKey)
+            return;
+        if (hasEnvironmentProvider) {
+            try {
+                await savePersistedState(storageKey, nextPos);
+            }
+            catch {
+                // ignore
+            }
+            return;
+        }
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(nextPos));
+        }
+        catch {
+            // ignore
+        }
+    }, [hasEnvironmentProvider, savePersistedState, storageKey]);
+    const clearStoredPosition = React.useCallback(async () => {
+        if (!storageKey)
+            return;
+        if (hasEnvironmentProvider) {
+            try {
+                await clearPersistedState(storageKey);
+            }
+            catch {
+                // ignore
+            }
+            return;
+        }
+        try {
+            localStorage.removeItem(storageKey);
+        }
+        catch {
+            // ignore
+        }
+    }, [clearPersistedState, hasEnvironmentProvider, storageKey]);
+    const getDragBounds = React.useCallback(() => {
+        if (!containerRef.current)
+            return null;
+        const element = containerRef.current;
+        const elementRect = element.getBoundingClientRect();
+        if (isAbsolutePosition) {
+            const parent = element.offsetParent;
+            if (!parent)
+                return null;
+            const parentRect = parent.getBoundingClientRect();
+            return {
+                originX: parentRect.left,
+                originY: parentRect.top,
+                minX: 0,
+                minY: 0,
+                maxX: Math.max(0, parent.clientWidth - elementRect.width),
+                maxY: Math.max(0, parent.clientHeight - elementRect.height)
+            };
+        }
+        return {
+            originX: 0,
+            originY: 0,
+            minX: 0,
+            minY: 0,
+            maxX: Math.max(0, window.innerWidth - elementRect.width),
+            maxY: Math.max(0, window.innerHeight - elementRect.height)
+        };
+    }, [isAbsolutePosition]);
+    // Load stored position
+    React.useEffect(() => {
+        if (!enableDragDrop || !storageKey)
+            return;
+        if (!containerRef.current)
+            return;
+        let alive = true;
+        (async () => {
+            const parsed = await loadStoredPosition();
+            if (!alive || !parsed)
+                return;
+            const bounds = getDragBounds();
+            if (!bounds)
+                return;
+            const clamped = {
+                x: clamp(parsed.x, bounds.minX, bounds.maxX),
+                y: clamp(parsed.y, bounds.minY, bounds.maxY)
+            };
+            dragPosRef.current = clamped;
+            setDragPos(clamped);
+            hasStoredPosRef.current = true;
+        })();
+        return () => {
+            alive = false;
+        };
+    }, [enableDragDrop, getDragBounds, loadStoredPosition, storageKey]);
+    React.useEffect(() => {
+        if (!enableDragDrop || !isDragging)
+            return;
+        const previous = document.body.style.cursor;
+        document.body.style.cursor = "grabbing";
+        return () => {
+            document.body.style.cursor = previous;
+        };
+    }, [enableDragDrop, isDragging]);
+    const handlePointerDown = React.useCallback((event) => {
+        if (event.button !== 0)
+            return;
+        if (!enableDragDrop)
+            return;
+        if (!containerRef.current)
+            return;
+        const bounds = getDragBounds();
+        if (!bounds)
+            return;
+        // Don't start drag if clicking on an item
+        const target = event.target;
+        if (target.closest('[data-dock-item]'))
+            return;
+        event.preventDefault();
+        const rect = containerRef.current.getBoundingClientRect();
+        dragStart.current = {
+            x: event.clientX,
+            y: event.clientY,
+            left: rect.left - bounds.originX,
+            top: rect.top - bounds.originY
+        };
+        dragMoved.current = false;
+        setIsDragging(true);
+        const handleMove = (moveEvent) => {
+            if (!dragStart.current)
+                return;
+            const dx = moveEvent.clientX - dragStart.current.x;
+            const dy = moveEvent.clientY - dragStart.current.y;
+            if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+                dragMoved.current = true;
+            }
+            const nextPos = {
+                x: clamp(dragStart.current.left + dx, bounds.minX, bounds.maxX),
+                y: clamp(dragStart.current.top + dy, bounds.minY, bounds.maxY)
+            };
+            dragPosRef.current = nextPos;
+            setDragPos(nextPos);
+            hasStoredPosRef.current = true;
+        };
+        const handleUp = () => {
+            setIsDragging(false);
+            dragStart.current = null;
+            if (enableDragDrop && storageKey && dragPosRef.current) {
+                void saveStoredPosition(dragPosRef.current);
+            }
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+            window.removeEventListener("pointercancel", handleUp);
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+        window.addEventListener("pointercancel", handleUp);
+    }, [enableDragDrop, getDragBounds, saveStoredPosition, storageKey]);
+    const handleContextMenu = React.useCallback((event) => {
+        if (!enableDragDrop || !dragId)
+            return;
+        if (!hasStoredPosRef.current)
+            return;
+        event.preventDefault();
+        setMenuOpen(true);
+    }, [enableDragDrop, dragId]);
+    const handleResetPosition = React.useCallback(() => {
+        if (!storageKey)
+            return;
+        void clearStoredPosition();
+        dragPosRef.current = null;
+        setDragPos(null);
+        setMenuOpen(false);
+        hasStoredPosRef.current = false;
+        dragMoved.current = false;
+    }, [clearStoredPosition, storageKey]);
+    const handleItemClick = React.useCallback((item) => {
+        if (item.disabled)
+            return;
+        if (dragMoved.current) {
+            dragMoved.current = false;
+            return;
+        }
+        item.onClick?.();
+    }, []);
+    // Container position
+    const posStyle = {
+        position: "fixed",
+        ...POS_CSS[position],
+        zIndex
+    };
+    if (enableDragDrop && dragPos) {
+        posStyle.left = dragPos.x;
+        posStyle.top = dragPos.y;
+        delete posStyle.right;
+        delete posStyle.bottom;
+    }
+    if (offset?.x) {
+        if (posStyle.right !== undefined)
+            posStyle.right = (typeof posStyle.right === "number" ? posStyle.right : 0) - offset.x;
+        else if (posStyle.left !== undefined)
+            posStyle.left = (typeof posStyle.left === "number" ? posStyle.left : 0) + offset.x;
+    }
+    if (offset?.y) {
+        if (posStyle.bottom !== undefined)
+            posStyle.bottom = (typeof posStyle.bottom === "number" ? posStyle.bottom : 0) - offset.y;
+        else if (posStyle.top !== undefined)
+            posStyle.top = (typeof posStyle.top === "number" ? posStyle.top : 0) + offset.y;
+    }
+    const txParts = [];
+    const ctx = !(enableDragDrop && dragPos) ? CENTER_TX[position] : undefined;
+    if (ctx)
+        txParts.push(ctx);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: containerRef, id: id, className: `sg-dock ${className} ${ELEV_CLS[elevation]}`, style: {
+                    ...posStyle,
+                    ...style,
+                    transform: txParts.join(" "),
+                    cursor: enableDragDrop ? (isDragging ? "grabbing" : "grab") : "default",
+                }, onPointerDown: handlePointerDown, onContextMenu: handleContextMenu, children: _jsx("div", { className: "sg-dock-container", style: {
+                        display: "flex",
+                        flexDirection: orientation === "horizontal" ? "row" : "column",
+                        alignItems: "center",
+                        gap: `${gap}px`,
+                        ...(orientation === "horizontal"
+                            ? {
+                                paddingTop: crossPadding,
+                                paddingBottom: crossPadding,
+                                paddingLeft: edgePadding,
+                                paddingRight: edgePadding
+                            }
+                            : {
+                                paddingTop: edgePadding,
+                                paddingBottom: edgePadding,
+                                paddingLeft: crossPadding,
+                                paddingRight: crossPadding
+                            }),
+                        backgroundColor,
+                        borderRadius: `${borderRadius}px`,
+                        backdropFilter: "blur(10px)",
+                        transition: "all 0.3s ease",
+                    }, children: items.map((item, index) => {
+                        const isHovered = hoveredIndex === index;
+                        const hasMagnifyCurve = magnify && hoveredIndex !== null;
+                        const distance = hasMagnifyCurve ? Math.abs(index - hoveredIndex) : Number.POSITIVE_INFINITY;
+                        const influence = hasMagnifyCurve ? Math.max(0, 1 - distance / 3) : 0;
+                        const curve = influence * influence;
+                        const scale = 1 + (magnifyScale - 1) * curve;
+                        const liftPx = curve * Math.min(itemSize * 0.4, 18);
+                        const spreadBase = Math.max(0, itemSize * (magnifyScale - 1) * 0.68 + gap * 0.12);
+                        const spreadCurve = hasMagnifyCurve && distance > 0
+                            ? Math.max(0, 1 - (distance - 1) * 0.1)
+                            : 0;
+                        const spreadSign = hasMagnifyCurve && hoveredIndex !== null ? Math.sign(index - hoveredIndex) : 0;
+                        const spreadPx = spreadSign === 0 ? 0 : spreadSign * spreadBase * spreadCurve;
+                        const translateX = (orientation === "vertical" ? liftDirection * liftPx : 0) +
+                            (orientation === "horizontal" ? spreadPx : 0);
+                        const translateY = (orientation === "horizontal" ? liftDirection * liftPx : 0) +
+                            (orientation === "vertical" ? spreadPx : 0);
+                        const transformOrigin = orientation === "horizontal"
+                            ? liftDirection < 0
+                                ? "50% 100%"
+                                : "50% 0%"
+                            : liftDirection > 0
+                                ? "0% 50%"
+                                : "100% 50%";
+                        return (_jsxs("div", { "data-dock-item": true, className: `sg-dock-item ${itemClassName} ${item.className ?? ""}`, style: {
+                                position: "relative",
+                                width: itemSize,
+                                height: itemSize,
+                                transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale})`,
+                                transformOrigin,
+                                transition: "transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1)",
+                                willChange: "transform",
+                                cursor: item.disabled ? "not-allowed" : "pointer",
+                                opacity: item.disabled ? 0.5 : 1,
+                                zIndex: isHovered ? 3 : curve > 0 ? 2 : 1,
+                            }, onMouseEnter: () => setHoveredIndex(index), onMouseLeave: () => setHoveredIndex(null), onClick: () => handleItemClick(item), children: [_jsx("div", { className: "sg-dock-item-icon", style: {
+                                        width: "100%",
+                                        height: "100%",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        borderRadius: `${borderRadius * 0.5}px`,
+                                        backgroundColor: "rgba(0, 0, 0, 0.05)",
+                                        transition: "background-color 0.2s ease",
+                                    }, onMouseEnter: (e) => {
+                                        e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.1)";
+                                    }, onMouseLeave: (e) => {
+                                        e.currentTarget.style.backgroundColor = "rgba(0, 0, 0, 0.05)";
+                                    }, children: item.icon }), item.badge && (_jsx("div", { className: "sg-dock-item-badge", style: {
+                                        position: "absolute",
+                                        top: -4,
+                                        right: -4,
+                                        backgroundColor: "hsl(var(--destructive))",
+                                        color: "white",
+                                        borderRadius: "50%",
+                                        minWidth: 20,
+                                        height: 20,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        fontSize: 11,
+                                        fontWeight: 600,
+                                        padding: "0 4px",
+                                        boxShadow: "0 2px 4px rgba(0,0,0,0.2)",
+                                    }, children: item.badge })), showLabels && isHovered && (_jsx("div", { className: "sg-dock-item-label", style: {
+                                        position: "absolute",
+                                        ...(orientation === "horizontal"
+                                            ? { bottom: "100%", left: "50%", transform: "translateX(-50%)", marginBottom: 8 }
+                                            : position.startsWith("left")
+                                                ? { left: "100%", top: "50%", transform: "translateY(-50%)", marginLeft: 8 }
+                                                : { right: "100%", top: "50%", transform: "translateY(-50%)", marginRight: 8 }),
+                                        backgroundColor: "rgba(0, 0, 0, 0.8)",
+                                        color: "white",
+                                        padding: "4px 8px",
+                                        borderRadius: 6,
+                                        fontSize: 12,
+                                        fontWeight: 500,
+                                        whiteSpace: "nowrap",
+                                        pointerEvents: "none",
+                                        zIndex: 1000,
+                                    }, children: item.label }))] }, item.id));
+                    }) }) }), menuOpen && (_jsx("div", { style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    zIndex: zIndex + 1,
+                }, onClick: () => setMenuOpen(false), children: _jsxs("div", { style: {
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        backgroundColor: "white",
+                        borderRadius: 12,
+                        padding: 24,
+                        boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+                        maxWidth: 400,
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { style: { margin: 0, marginBottom: 12, fontSize: 18, fontWeight: 600 }, children: t(i18n, "components.dock.resetPosition") }), _jsx("p", { style: { margin: 0, marginBottom: 16, fontSize: 14, color: "hsl(var(--muted-foreground))" }, children: t(i18n, "components.dock.resetConfirm") }), _jsxs("div", { style: { display: "flex", gap: 8, justifyContent: "flex-end" }, children: [_jsx("button", { onClick: () => setMenuOpen(false), style: {
+                                        padding: "8px 16px",
+                                        borderRadius: 6,
+                                        border: "1px solid hsl(var(--border))",
+                                        backgroundColor: "transparent",
+                                        cursor: "pointer",
+                                        fontSize: 14,
+                                    }, children: t(i18n, "components.actions.cancel") }), _jsx("button", { onClick: handleResetPosition, style: {
+                                        padding: "8px 16px",
+                                        borderRadius: 6,
+                                        border: "none",
+                                        backgroundColor: "hsl(var(--primary))",
+                                        color: "white",
+                                        cursor: "pointer",
+                                        fontSize: 14,
+                                        fontWeight: 500,
+                                    }, children: t(i18n, "components.actions.confirm") })] })] }) }))] }));
+}

package/dist/others/SgPlayground.js

@@ -7,7 +7,7 @@ import { SgCard } from "../layout/SgCard";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.6";
+const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.9";
 const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
     "@codesandbox/sandpack-react": "^2.20.0",
     "react-hook-form": "^7.0.0",
@@ -64,44 +64,44 @@ const SANDPACK_CORE_THEME_VARS = [
     "--border",
     "--ring"
 ];
-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; }
 `;
 function parseRgbParts(raw) {
     const value = raw.trim();
@@ -217,10 +217,10 @@ function buildSandpackStylesCss(themeVars, previewPadding) {
         .sort(([a], [b]) => a.localeCompare(b))
         .map(([varName, value]) => `  ${varName}: ${value};`)
         .join("\n");
-    return `:root {
-${rootVars}
-}
-
+    return `:root {
+${rootVars}
+}
+
 ${SANDPACK_BASE_STYLES_CSS}`;
 }
 function ReadonlyBlock({ code }) {
@@ -233,30 +233,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) {
@@ -340,14 +340,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 = codeContract === "appFile"
         ? code