@seedgrid/fe-components 2026.3.2 → 2026.3.3

package/dist/gadgets/qr-code/SgQRCode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgQRCode.d.ts","sourceRoot":"","sources":["../../../src/gadgets/qr-code/SgQRCode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,4BAA4B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,kDAyItD;yBAzIe,QAAQ"}
+{"version":3,"file":"SgQRCode.d.ts","sourceRoot":"","sources":["../../../src/gadgets/qr-code/SgQRCode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyC/B,MAAM,MAAM,4BAA4B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,kDA8FtD;yBA9Fe,QAAQ"}

package/dist/gadgets/qr-code/SgQRCode.js

@@ -1,70 +1,44 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import QRCode from "qrcode";
+import { QRCodeSVG } from "qrcode.react";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
+class QrErrorBoundary extends React.Component {
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        this.props.onError?.(error);
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.resetKey !== this.props.resetKey && this.state.hasError) {
+            this.setState({ hasError: false });
+        }
+    }
+    render() {
+        if (this.state.hasError)
+            return this.props.fallback;
+        return this.props.children;
+    }
+}
 export function SgQRCode(props) {
     const { value, size = 220, margin = 2, fgColor = "#000000", bgColor = "#FFFFFF", errorCorrectionLevel = "H", logoSrc, logoAlt = "Logo", logoSize, logoPadding = 6, logoBackgroundColor = "#FFFFFF", logoBorderRadius = 12, imageClassName, logoClassName, emptyFallback, onGenerateError, className, style, ...rest } = props;
-    const [qrDataUrl, setQrDataUrl] = React.useState("");
-    const [hasError, setHasError] = React.useState(false);
     const normalizedValue = value?.trim() ?? "";
     const safeSize = Math.max(64, Math.round(size));
     const safeMargin = Math.max(0, Math.round(margin));
     const safeLogoPadding = Math.max(0, Math.round(logoPadding));
     const safeLogoSize = Math.max(18, Math.min(safeSize, Math.round(logoSize ?? safeSize * 0.22)));
     const logoContainerSize = safeLogoSize + safeLogoPadding * 2;
-    React.useEffect(() => {
-        let active = true;
-        if (!normalizedValue) {
-            setQrDataUrl("");
-            setHasError(false);
-            return () => {
-                active = false;
-            };
-        }
-        QRCode.toDataURL(normalizedValue, {
-            width: safeSize,
-            margin: safeMargin,
-            color: {
-                dark: fgColor,
-                light: bgColor
-            },
-            errorCorrectionLevel
-        })
-            .then((dataUrl) => {
-            if (!active)
-                return;
-            setQrDataUrl(dataUrl);
-            setHasError(false);
-        })
-            .catch((cause) => {
-            if (!active)
-                return;
-            const error = cause instanceof Error ? cause : new Error("Failed to generate QR code");
-            setQrDataUrl("");
-            setHasError(true);
-            onGenerateError?.(error);
-        });
-        return () => {
-            active = false;
-        };
-    }, [
-        normalizedValue,
-        safeSize,
-        safeMargin,
-        fgColor,
-        bgColor,
-        errorCorrectionLevel,
-        onGenerateError
-    ]);
+    const qrResetKey = `${normalizedValue}|${safeSize}|${safeMargin}|${fgColor}|${bgColor}|${errorCorrectionLevel}`;
     if (!normalizedValue) {
         if (!emptyFallback)
             return null;
         return (_jsx("div", { className: cn("inline-flex items-center justify-center", className), style: { width: safeSize, height: safeSize, ...style }, ...rest, children: emptyFallback }));
     }
-    return (_jsxs("div", { className: cn("relative inline-flex items-center justify-center", className), style: { width: safeSize, height: safeSize, ...style }, ...rest, children: [qrDataUrl && !hasError ? (_jsx("img", { src: qrDataUrl, alt: "QR Code", width: safeSize, height: safeSize, className: cn("block h-full w-full", imageClassName), draggable: false })) : (_jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-muted/40", "aria-hidden": "true" })), logoSrc && qrDataUrl && !hasError ? (_jsx("span", { className: cn("absolute inline-flex items-center justify-center overflow-hidden", logoClassName), style: {
+    return (_jsxs("div", { className: cn("relative inline-flex items-center justify-center", className), style: { width: safeSize, height: safeSize, ...style }, ...rest, children: [_jsx(QrErrorBoundary, { resetKey: qrResetKey, onError: onGenerateError, fallback: _jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-muted/40", "aria-hidden": "true" }), children: _jsx(QRCodeSVG, { value: normalizedValue, size: safeSize, marginSize: safeMargin, fgColor: fgColor, bgColor: bgColor, level: errorCorrectionLevel, title: "QR Code", className: cn("block h-full w-full", imageClassName) }) }), logoSrc ? (_jsx("span", { className: cn("absolute inline-flex items-center justify-center overflow-hidden", logoClassName), style: {
                     width: logoContainerSize,
                     height: logoContainerSize,
                     padding: safeLogoPadding,

package/dist/layout/SgMenu.d.ts

@@ -4,6 +4,7 @@ import { type SgDockZoneId } from "./SgDockLayout";
 export type SgMenuNode = {
     id: string;
     label: string;
+    hint?: string;
     url?: string;
     children?: SgMenuNode[];
     disabled?: boolean;

package/dist/layout/SgMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgMenu.d.ts","sourceRoot":"","sources":["../../src/layout/SgMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SgMenu.d.ts","sourceRoot":"","sources":["../../src/layout/SgMenu.tsx"],"names":[],"mappings":"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"}

package/dist/layout/SgMenu.js

@@ -290,6 +290,8 @@ export function SgMenu(props) {
     const [searchValue, setSearchValue] = React.useState("");
     const menuRootRef = React.useRef(null);
     const sidebarShellRef = React.useRef(null);
+    const menuHintAnchorRef = React.useRef(null);
+    const [menuHint, setMenuHint] = React.useState(null);
     const [dockDragActive, setDockDragActive] = React.useState(false);
     const [horizontalDockAlign, setHorizontalDockAlign] = React.useState(null);
     const dockDragStartRef = React.useRef(null);
@@ -326,6 +328,41 @@ export function SgMenu(props) {
     const isVerticalDockZone = effectiveDockZone === "left" || effectiveDockZone === "right";
     const tieredOpenToLeft = resolvedPosition === "right" ||
         (isHorizontalDockZone && horizontalDockAlign === "right");
+    const hideMenuHint = React.useCallback(() => {
+        menuHintAnchorRef.current = null;
+        setMenuHint(null);
+    }, []);
+    const resolveMenuHintPosition = React.useCallback((anchor) => {
+        if (!anchor.target.isConnected)
+            return null;
+        const rect = anchor.target.getBoundingClientRect();
+        if (anchor.placement === "right") {
+            return {
+                x: rect.right + 8,
+                y: rect.top + (rect.height / 2)
+            };
+        }
+        return {
+            x: rect.left + (rect.width / 2),
+            y: rect.top - 8
+        };
+    }, []);
+    const showMenuHint = React.useCallback((target, text, placement = "top") => {
+        if (!text)
+            return;
+        const anchor = { target, text, placement };
+        menuHintAnchorRef.current = anchor;
+        const nextPosition = resolveMenuHintPosition(anchor);
+        if (!nextPosition) {
+            hideMenuHint();
+            return;
+        }
+        setMenuHint({
+            text: anchor.text,
+            placement: anchor.placement,
+            ...nextPosition
+        });
+    }, [hideMenuHint, resolveMenuHintPosition]);
     const [localActiveId, setLocalActiveId] = React.useState(selection?.activeId);
     const [tieredPath, setTieredPath] = React.useState([]);
     const [megaActiveId, setMegaActiveId] = React.useState(menu[0]?.id);
@@ -431,6 +468,40 @@ export function SgMenu(props) {
         document.addEventListener("pointerdown", handlePointerDown);
         return () => document.removeEventListener("pointerdown", handlePointerDown);
     }, [effectiveMenuStyle]);
+    const hasVisibleMenuHint = menuHint !== null;
+    React.useEffect(() => {
+        if (!hasVisibleMenuHint || !menuHintAnchorRef.current)
+            return;
+        const reposition = () => {
+            const anchor = menuHintAnchorRef.current;
+            if (!anchor)
+                return;
+            const nextPosition = resolveMenuHintPosition(anchor);
+            if (!nextPosition) {
+                hideMenuHint();
+                return;
+            }
+            setMenuHint({
+                text: anchor.text,
+                placement: anchor.placement,
+                ...nextPosition
+            });
+        };
+        reposition();
+        window.addEventListener("scroll", reposition, true);
+        window.addEventListener("resize", reposition);
+        return () => {
+            window.removeEventListener("scroll", reposition, true);
+            window.removeEventListener("resize", reposition);
+        };
+    }, [hasVisibleMenuHint, hideMenuHint, resolveMenuHintPosition]);
+    React.useEffect(() => {
+        const anchor = menuHintAnchorRef.current;
+        if (!anchor)
+            return;
+        if (!anchor.target.isConnected)
+            hideMenuHint();
+    }, [filteredMenu, effectiveMenuStyle, isCollapsed, drawerOpen, pinnedState, hideMenuHint]);
     const toggleExpanded = React.useCallback((nodeId) => {
         setExpandedIds((prev) => {
             const next = new Set(prev);
@@ -454,6 +525,7 @@ export function SgMenu(props) {
     const activateNode = React.useCallback((node) => {
         if (node.disabled)
             return;
+        hideMenuHint();
         onItemClick?.(node);
         setLocalActiveId(node.id);
         const hasUrl = typeof node.url === "string" && node.url.length > 0;
@@ -477,7 +549,8 @@ export function SgMenu(props) {
         onNavigate,
         pinnedState,
         setDrawerOpen,
-        variant
+        variant,
+        hideMenuHint
     ]);
     const handleDockDragPointerDown = React.useCallback((event) => {
         if (event.button !== 0)
@@ -654,11 +727,15 @@ export function SgMenu(props) {
         const disabled = !!node.disabled;
         const iconNode = resolveIcon(node);
         const hideChildren = isCollapsed;
+        const nodeHint = node.hint ?? (isCollapsed ? node.label : undefined);
+        const nodeHintPlacement = "right";
         return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: cn("group flex items-center rounded-md", densityCfg.row, densityCfg.gap, isExactActive
                         ? "bg-primary/15 text-primary"
                         : isBranchActive
                             ? "bg-muted/60 text-foreground"
-                            : "text-foreground hover:bg-muted/60", disabled ? "cursor-not-allowed opacity-55" : ""), style: isCollapsed ? undefined : { paddingLeft: 8 + depth * indent }, title: isCollapsed ? node.label : undefined, children: [_jsxs("button", { ref: (el) => {
+                            : "text-foreground hover:bg-muted/60", disabled ? "cursor-not-allowed opacity-55" : ""), style: isCollapsed ? undefined : { paddingLeft: 8 + depth * indent }, onMouseEnter: nodeHint
+                        ? (event) => showMenuHint(event.currentTarget, nodeHint, nodeHintPlacement)
+                        : undefined, onMouseLeave: nodeHint ? hideMenuHint : undefined, children: [_jsxs("button", { ref: (el) => {
                                 itemRefs.current[node.id] = el;
                             }, "data-sg-menu-node": node.id, type: "button", "aria-disabled": disabled || undefined, "aria-current": isExactActive ? "page" : undefined, onFocus: () => setFocusedId(node.id), onClick: () => {
                                 if (disabled)
@@ -681,6 +758,8 @@ export function SgMenu(props) {
         hasSearch,
         indent,
         isCollapsed,
+        hideMenuHint,
+        showMenuHint,
         toggleExpanded
     ]);
     const renderFlatAction = React.useCallback((node, className) => {
@@ -688,7 +767,7 @@ export function SgMenu(props) {
         const isBranchActive = activeSets.branch.has(node.id);
         const hasChildren = !!node.children?.length;
         const iconNode = resolveIcon(node);
-        return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onClick: () => {
+        return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onMouseEnter: node.hint ? (event) => showMenuHint(event.currentTarget, node.hint) : undefined, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                 if (node.disabled)
                     return;
                 if (hasChildren && !node.url && !node.onClick)
@@ -699,7 +778,7 @@ export function SgMenu(props) {
                 : isBranchActive
                     ? "bg-muted/60 text-foreground"
                     : "text-foreground hover:bg-muted/60", node.disabled ? "cursor-not-allowed opacity-55" : "", className), children: [_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center rounded", densityCfg.icon, iconNode ? "" : "bg-muted text-[10px] font-semibold"), children: iconNode ?? firstChars(node.label, 1) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: node.label }), hasChildren ? _jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground" }) : null] }, node.id));
-    }, [activateNode, activeSets.branch, activeSets.exact, densityCfg.icon]);
+    }, [activateNode, activeSets.branch, activeSets.exact, densityCfg.icon, hideMenuHint, showMenuHint]);
     const renderTieredLevels = React.useCallback((nodes, depth) => {
         if (!nodes.length)
             return null;
@@ -712,7 +791,9 @@ export function SgMenu(props) {
                         const isOpen = activeIdAtDepth === node.id;
                         const isExactActive = activeSets.exact.has(node.id);
                         const iconNode = resolveIcon(node);
-                        return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onMouseEnter: () => {
+                        return (_jsxs("button", { type: "button", disabled: node.disabled, "aria-current": isExactActive ? "page" : undefined, onMouseEnter: (event) => {
+                                if (node.hint)
+                                    showMenuHint(event.currentTarget, node.hint);
                                 if (!openSubmenuOnHover)
                                     return;
                                 if (!hasChildren) {
@@ -720,7 +801,7 @@ export function SgMenu(props) {
                                     return;
                                 }
                                 setTieredPath((prev) => [...prev.slice(0, depth), node.id]);
-                            }, onClick: () => {
+                            }, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                                 if (node.disabled)
                                     return;
                                 if (hasChildren) {
@@ -739,7 +820,16 @@ export function SgMenu(props) {
                     }) }), activeNode?.children?.length
                     ? renderTieredLevels(activeNode.children, depth + 1)
                     : null] }));
-    }, [activateNode, activeSets.exact, densityCfg.icon, openSubmenuOnHover, tieredOpenToLeft, tieredPath]);
+    }, [
+        activateNode,
+        activeSets.exact,
+        densityCfg.icon,
+        hideMenuHint,
+        openSubmenuOnHover,
+        showMenuHint,
+        tieredOpenToLeft,
+        tieredPath
+    ]);
     const renderMegaColumns = React.useCallback((nodes) => {
         if (!nodes.length) {
             return _jsx("div", { className: "text-sm text-muted-foreground", children: "No items found." });
@@ -763,7 +853,12 @@ export function SgMenu(props) {
                             const hasChildren = !!node.children?.length;
                             const active = activeMegaNode?.id === node.id;
                             const iconNode = resolveIcon(node);
-                            return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: () => hasChildren && setMegaActiveId(node.id), onClick: () => {
+                            return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: (event) => {
+                                    if (node.hint)
+                                        showMenuHint(event.currentTarget, node.hint);
+                                    if (hasChildren)
+                                        setMegaActiveId(node.id);
+                                }, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                                     if (node.disabled)
                                         return;
                                     if (hasChildren) {
@@ -778,7 +873,12 @@ export function SgMenu(props) {
                         const hasChildren = !!node.children?.length;
                         const active = activeMegaNode?.id === node.id;
                         const iconNode = resolveIcon(node);
-                        return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: () => hasChildren && setMegaActiveId(node.id), onClick: () => {
+                        return (_jsxs("button", { type: "button", disabled: node.disabled, onMouseEnter: (event) => {
+                                if (node.hint)
+                                    showMenuHint(event.currentTarget, node.hint);
+                                if (hasChildren)
+                                    setMegaActiveId(node.id);
+                            }, onMouseLeave: node.hint ? hideMenuHint : undefined, onClick: () => {
                                 if (node.disabled)
                                     return;
                                 if (hasChildren) {
@@ -896,11 +996,18 @@ export function SgMenu(props) {
                 : undefined,
             ...style
         }, children: [shellHeaderRow, !isCollapsed ? (_jsx("div", { className: cn("absolute z-50 flex flex-col bg-background text-foreground", effectiveMenuStyle === "tiered" ? "overflow-visible" : "overflow-auto", effectiveDockZone === "bottom" ? "bottom-full" : "top-full", horizontalDockAlign === "right" ? "right-0" : "left-0", "min-w-[240px]", effectiveMenuStyle !== "tiered" ? "max-h-[60vh]" : "", "border border-border", elevationClass(elevation === "none" ? "sm" : elevation)), children: shellContentArea })) : null] })) : (sidebarShell);
+    const menuHintNode = menuHint && typeof document !== "undefined"
+        ? createPortal(_jsx("span", { className: "pointer-events-none fixed z-[1200] max-w-[min(28rem,calc(100vw-24px))] rounded bg-foreground/90 px-2 py-1 text-[11px] text-background shadow-md whitespace-normal break-words", style: {
+                left: menuHint.x,
+                top: menuHint.y,
+                transform: menuHint.placement === "right" ? "translateY(-50%)" : "translate(-50%, -100%)"
+            }, children: menuHint.text }), document.body)
+        : null;
     if (dockMode && portalTarget) {
-        return createPortal(shellForRender, portalTarget);
+        return (_jsxs(_Fragment, { children: [createPortal(shellForRender, portalTarget), menuHintNode] }));
     }
     if (variant === "drawer") {
-        return (_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: !pinnedState, closeOnEsc: !pinnedState, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", className: className, style: style, children: shellBody }));
+        return (_jsxs(_Fragment, { children: [_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: !pinnedState, closeOnEsc: !pinnedState, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", className: className, style: style, children: shellBody }), menuHintNode] }));
     }
     if (variant === "hybrid") {
         return (_jsxs(_Fragment, { children: [shellForRender, !pinnedState ? (_jsx(SgExpandablePanel, { mode: "overlay", open: drawerOpen, onOpenChange: setDrawerOpen, expandTo: resolvedPosition === "left" ? "right" : "left", placement: "start", size: resolvedOverlaySize, animation: { type: "slide", durationMs: 180 }, border: border, elevation: elevation === "md" ? "lg" : elevation, rounded: "none", closeOnOutsideClick: true, closeOnEsc: true, trapFocus: true, showBackdrop: overlayBackdropResolved, ariaLabel: ariaLabel, role: "dialog", children: _jsx(SgMenu, { menu: menu, selection: { activeId: effectiveActiveId, activeUrl: effectiveActiveUrl }, brand: brand, user: user, userMenu: userMenu, variant: "inline", menuStyle: menuStyle, position: position, density: density, indent: indent, collapsed: false, collapsedWidth: collapsedWidth, expandedWidth: expandedWidth, mode: mode, expandedIds: expandedIds, onExpandedIdsChange: setExpandedIds, showCollapseButton: false, showPinButton: showPinButton, pinned: pinnedState, onPinnedChange: (next) => {
@@ -918,9 +1025,9 @@ export function SgMenu(props) {
                         }, onAction: onAction, onItemClick: (node) => {
                             setLocalActiveId(node.id);
                             onItemClick?.(node);
-                        }, ariaLabel: ariaLabel, keyboardNavigation: keyboardNavigation, openSubmenuOnHover: openSubmenuOnHover, search: search, elevation: "none", border: false, footer: footer }) })) : null] }));
+                        }, ariaLabel: ariaLabel, keyboardNavigation: keyboardNavigation, openSubmenuOnHover: openSubmenuOnHover, search: search, elevation: "none", border: false, footer: footer }) })) : null, menuHintNode] }));
     }
-    return shellForRender;
+    return (_jsxs(_Fragment, { children: [shellForRender, menuHintNode] }));
 }
 SgMenu.displayName = "SgMenu";
 function CollapseIcon(props) {

package/dist/layout/SgPageControl.d.ts

@@ -2,6 +2,7 @@ import * as React from "react";
 export type SgPageControlPageProps = {
     id?: string;
     title: React.ReactNode;
+    hint?: string;
     icon?: React.ReactNode;
     hidden?: boolean;
     disabled?: boolean;

package/dist/layout/SgPageControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgPageControl.d.ts","sourceRoot":"","sources":["../../src/layout/SgPageControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACrD,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACtD,IAAI,CAAC;IAEV,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAiCF,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAgQhE;yBAhQe,aAAa;;;AAoQ7B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CAExE;yBAFe,iBAAiB"}
+{"version":3,"file":"SgPageControl.d.ts","sourceRoot":"","sources":["../../src/layout/SgPageControl.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,oBAAoB,CAAC,EAAE,CACrB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACrD,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,CACpB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,sBAAsB,CAAA;KAAE,KACtD,IAAI,CAAC;IAEV,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IAEzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC;IAChC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAiCF,wBAAgB,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,kBAAkB,CAAC,2CAiQhE;yBAjQe,aAAa;;;AAqQ7B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,2CAExE;yBAFe,iBAAiB"}

package/dist/layout/SgPageControl.js

@@ -137,7 +137,7 @@ export function SgPageControl(props) {
                     const panelId = `${rootId}-panel-${record.id}`;
                     return (_jsxs("button", { ref: (el) => {
                             tabsRef.current[index] = el;
-                        }, type: "button", id: tabId, role: "tab", "aria-controls": panelId, "aria-selected": isActive, tabIndex: isActive ? 0 : -1, disabled: record.props.disabled, onClick: () => selectPage(record.id), className: cn("inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium transition-colors", sizeClasses.tab, tabStyle.base, isActive ? tabStyle.active : tabStyle.inactive, fullWidthTabs ? "w-full" : "", record.props.disabled ? "cursor-not-allowed opacity-45" : "", tabClassName, record.props.tabClassName), children: [record.props.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: record.props.icon })) : null, _jsx("span", { className: "truncate", children: record.props.title })] }, record.id));
+                        }, type: "button", id: tabId, role: "tab", "aria-controls": panelId, "aria-selected": isActive, tabIndex: isActive ? 0 : -1, title: record.props.hint, disabled: record.props.disabled, onClick: () => selectPage(record.id), className: cn("inline-flex shrink-0 items-center justify-center whitespace-nowrap font-medium transition-colors", sizeClasses.tab, tabStyle.base, isActive ? tabStyle.active : tabStyle.inactive, fullWidthTabs ? "w-full" : "", record.props.disabled ? "cursor-not-allowed opacity-45" : "", tabClassName, record.props.tabClassName), children: [record.props.icon ? (_jsx("span", { className: cn("inline-flex items-center justify-center", sizeClasses.icon), children: record.props.icon })) : null, _jsx("span", { className: "truncate", children: record.props.title })] }, record.id));
                 }) }), _jsx("div", { className: cn("rounded-b-md border border-t-0 border-border bg-background", panelClassName), children: visiblePages.length === 0 ? (_jsx("div", { className: cn(sizeClasses.panel, "text-sm text-muted-foreground"), children: emptyMessage })) : keepMounted ? (visiblePages.map((record) => {
                     const isActive = record.id === resolvedActiveId;
                     const tabId = `${rootId}-tab-${record.id}`;

package/dist/others/SgPlayground.d.ts

@@ -2,6 +2,7 @@ export type SgPlaygroundProps = {
     code: string;
     interactive?: boolean;
     codeContract?: "renderBody" | "appFile";
+    preset?: SgPlaygroundPreset;
     title?: string;
     description?: string;
     height?: number | string;
@@ -15,10 +16,21 @@ export type SgPlaygroundProps = {
     defaultImports?: string;
     previewWrapperClassName?: string;
     seedgridDependency?: string;
+    bundlerURL?: string;
+    bundlerTimeoutMs?: number;
+    npmRegistries?: SgPlaygroundNpmRegistry[];
     withCard?: boolean;
     collapsible?: boolean;
     defaultOpen?: boolean;
     cardId?: string;
 };
+export type SgPlaygroundPreset = "auto" | "basic" | "seedgrid" | "editor" | "full";
+export type SgPlaygroundNpmRegistry = {
+    enabledScopes: string[];
+    limitToScopes: boolean;
+    registryUrl: string;
+    proxyEnabled: boolean;
+    registryAuthToken?: string;
+};
 export default function SgPlayground(props: Readonly<SgPlaygroundProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SgPlayground.d.ts.map

package/dist/others/SgPlayground.d.ts.map

@@ -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;AA4VF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAgOtE"}
+{"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,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,uBAAuB,EAAE,CAAC;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;AACnF,MAAM,MAAM,uBAAuB,GAAG;IACpC,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AA0vBF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAsZtE"}

package/dist/others/SgPlayground.js

@@ -7,12 +7,21 @@ import { SgCard } from "../layout/SgCard";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
-const DEFAULT_SEEDGRID_DEPENDENCY = "2026.3.1";
-const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
-    "@codesandbox/sandpack-react": "^2.20.0",
+const DEFAULT_SEEDGRID_DEPENDENCY = "latest";
+const DEFAULT_SANDPACK_BUNDLER_URL = "https://sandpack.seedgrid.com.br";
+const DEFAULT_SANDPACK_BUNDLER_TIMEOUT_MS = 60000;
+const DEFAULT_SANDBOX_BASE_DEPENDENCIES = {
+    react: "18.2.0",
+    "react-dom": "18.2.0"
+};
+const DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES = {
     "react-hook-form": "^7.0.0",
-    "lucide-react": "^0.468.0",
+    "lucide-react": "^0.468.0"
+};
+const DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES = {
+    "@tiptap/core": "^2.9.1",
     "@tiptap/react": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
     "@tiptap/extension-underline": "^2.9.1",
     "@tiptap/extension-link": "^2.9.1",
@@ -25,10 +34,255 @@ const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
     "@tiptap/extension-superscript": "^2.9.1",
     "@tiptap/extension-font-family": "^2.9.1"
 };
+const DEFAULT_SANDBOX_HOST_DEPENDENCIES = {
+    "@codesandbox/sandpack-react": "^2.20.0"
+};
+const DEFAULT_SANDPACK_POLYFILLS = {
+    assert: "^2.1.0",
+    process: "^0.11.10",
+    util: "^0.12.5"
+};
+const TIPTAP_SHIM_PACKAGES = [
+    "@tiptap/core",
+    "@tiptap/pm",
+    "@tiptap/starter-kit",
+    "@tiptap/extension-underline",
+    "@tiptap/extension-link",
+    "@tiptap/extension-image",
+    "@tiptap/extension-text-align",
+    "@tiptap/extension-text-style",
+    "@tiptap/extension-color",
+    "@tiptap/extension-highlight",
+    "@tiptap/extension-subscript",
+    "@tiptap/extension-superscript",
+    "@tiptap/extension-font-family"
+];
 const SANDPACK_EXTERNAL_RESOURCES = [
     // Prebuilt utility CSS so classes from @seedgrid/fe-components can render inside Sandpack
     "https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css"
 ];
+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_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_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_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_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_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_FALLBACK_THEME_VARS = {
     "--background": "0 0% 100%",
     "--foreground": "222.2 84% 4.9%",
@@ -103,6 +357,100 @@ body {
 .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;
+}
+`;
+function normalizeUrl(raw, fallback) {
+    const value = raw?.trim();
+    if (!value)
+        return fallback;
+    try {
+        const parsed = new URL(value);
+        return parsed.toString().replace(/\/+$/, "");
+    }
+    catch {
+        return fallback;
+    }
+}
+function normalizeTimeoutMs(value, fallback) {
+    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
+        return fallback;
+    }
+    return Math.round(value);
+}
+function parseBooleanFlag(value, fallback) {
+    const normalized = value?.trim().toLowerCase();
+    if (!normalized)
+        return fallback;
+    if (normalized === "1" || normalized === "true" || normalized === "yes" || normalized === "on") {
+        return true;
+    }
+    if (normalized === "0" || normalized === "false" || normalized === "no" || normalized === "off") {
+        return false;
+    }
+    return fallback;
+}
+function resolveDefaultNpmRegistriesFromEnv() {
+    const registryUrlRaw = process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_URL?.trim();
+    if (!registryUrlRaw)
+        return undefined;
+    const scopesRaw = process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_SCOPES;
+    const enabledScopes = (scopesRaw ?? "@seedgrid")
+        .split(",")
+        .map((scope) => scope.trim())
+        .filter(Boolean);
+    const limitToScopes = parseBooleanFlag(process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_LIMIT_TO_SCOPES, true);
+    const proxyEnabled = parseBooleanFlag(process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_PROXY_ENABLED, false);
+    const registryAuthToken = process.env.NEXT_PUBLIC_SANDPACK_NPM_REGISTRY_AUTH_TOKEN?.trim();
+    return [
+        {
+            enabledScopes,
+            limitToScopes,
+            registryUrl: registryUrlRaw.replace(/\/+$/, ""),
+            proxyEnabled,
+            ...(registryAuthToken ? { registryAuthToken } : {})
+        }
+    ];
+}
+function buildCjsModule(value) {
+    const serialized = JSON.stringify(value);
+    return `const data = ${serialized};
+module.exports = data;
+module.exports.default = data;
+`;
+}
+const SANDPACK_MIN_COMPONENT_MESSAGES = {
+    "components.actions.clear": "Clear",
+    "components.actions.cancel": "Cancel",
+    "components.actions.confirm": "Confirm",
+    "components.inputs.required": "Required field.",
+    "components.inputs.maxLength": "Maximum {max} characters.",
+    "components.inputs.minLength": "Minimum {min} characters.",
+    "components.inputs.minWords": "Minimum {min} words.",
+    "components.inputs.email.invalid": "Invalid email.",
+    "components.inputs.phone.invalid": "Invalid phone.",
+    "components.inputs.date.invalid": "Invalid date.",
+    "components.inputs.number.min": "Value must be at least {min}.",
+    "components.inputs.number.max": "Value must be at most {max}.",
+    "components.password.show": "Show password",
+    "components.password.hide": "Hide password",
+    "components.autocomplete.empty": "No records found.",
+    "components.autocomplete.loading": "Loading...",
+    "components.rating.cancel": "Cancel rating",
+    "components.radiogroup.cancel": "No option"
+};
+const SANDPACK_SEEDGRID_PT_BR_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_PT_PT_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_EN_US_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_ES_JSON_SHIM = buildCjsModule(SANDPACK_MIN_COMPONENT_MESSAGES);
+const SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM = buildCjsModule({
+    blockedEmailDomains: []
+});
 function parseRgbParts(raw) {
     const value = raw.trim();
     if (!value)
@@ -303,13 +651,45 @@ function CopyButton() {
 }
 function RunButton({ onRun }) {
     const { sandpack } = useSandpack();
-    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => {
-            sandpack.runSandpack();
-            onRun?.();
-        }, children: "Run" }));
+    const [running, setRunning] = React.useState(false);
+    const handleRun = React.useCallback(async () => {
+        if (running)
+            return;
+        setRunning(true);
+        onRun?.();
+        try {
+            if (typeof window !== "undefined") {
+                await new Promise((resolve) => {
+                    window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()));
+                });
+            }
+            // On lazy init + hidden preview scenarios, iframe/client registration can lag by a tick.
+            for (let attempt = 0; attempt < 3; attempt += 1) {
+                await sandpack.runSandpack();
+                if (sandpack.status === "running" ||
+                    sandpack.status === "done" ||
+                    Object.keys(sandpack.clients ?? {}).length > 0) {
+                    break;
+                }
+                await new Promise((resolve) => setTimeout(resolve, 120));
+            }
+        }
+        catch (error) {
+            console.error("[SgPlayground] Failed to run Sandpack", error);
+        }
+        finally {
+            if (typeof window !== "undefined") {
+                window.setTimeout(() => setRunning(false), 150);
+            }
+            else {
+                setRunning(false);
+            }
+        }
+    }, [onRun, running, sandpack]);
+    return (_jsx(SgButton, { severity: "primary", size: "sm", loading: running, onClick: handleRun, children: running ? "Running" : "Run" }));
 }
 export default function SgPlayground(props) {
-    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;
+    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, bundlerURL, bundlerTimeoutMs, npmRegistries, withCard = true, collapsible = true, defaultOpen = true, cardId } = props;
     const effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
     const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
     const [isExpanded, setIsExpanded] = React.useState(false);
@@ -359,16 +739,149 @@ export default function SgPlayground(props) {
     const resolvedSeedgridDependency = seedgridDependency ??
         process.env.NEXT_PUBLIC_SANDPACK_SEEDGRID_DEPENDENCY ??
         DEFAULT_SEEDGRID_DEPENDENCY;
+    const requestedDeps = dependencies ?? {};
+    const requestedDepKeys = Object.keys(requestedDeps);
+    const resolvedBundlerURL = normalizeUrl(bundlerURL ?? process.env.NEXT_PUBLIC_SANDPACK_BUNDLER_URL, DEFAULT_SANDPACK_BUNDLER_URL);
+    const resolvedBundlerTimeoutMs = normalizeTimeoutMs(bundlerTimeoutMs ??
+        Number(process.env.NEXT_PUBLIC_SANDPACK_BUNDLER_TIMEOUT_MS ?? Number.NaN), DEFAULT_SANDPACK_BUNDLER_TIMEOUT_MS);
+    const resolvedNpmRegistries = React.useMemo(() => npmRegistries ?? resolveDefaultNpmRegistriesFromEnv(), [npmRegistries]);
+    React.useEffect(() => {
+        if (!interactive)
+            return;
+        if (!parseBooleanFlag(process.env.NEXT_PUBLIC_SANDPACK_DEBUG, false))
+            return;
+        console.info("[SgPlayground] Sandpack runtime config", {
+            bundlerURL: resolvedBundlerURL,
+            bundlerTimeoutMs: resolvedBundlerTimeoutMs,
+            npmRegistries: (resolvedNpmRegistries ?? []).map((registry) => ({
+                enabledScopes: registry.enabledScopes,
+                limitToScopes: registry.limitToScopes,
+                registryUrl: registry.registryUrl,
+                proxyEnabled: registry.proxyEnabled
+            }))
+        });
+    }, [interactive, resolvedBundlerTimeoutMs, resolvedBundlerURL, resolvedNpmRegistries]);
+    const codeUsesSeedgrid = /from\s+["']@seedgrid\/fe-components["']/.test(appTsx);
+    const codeUsesTextEditor = /\bSgTextEditor\b/.test(appTsx);
+    const codeUsesPlaygroundComponent = /\bSgPlayground\b/.test(appTsx);
+    const resolvedPreset = preset === "auto"
+        ? codeUsesTextEditor
+            ? "editor"
+            : codeUsesSeedgrid
+                ? "seedgrid"
+                : "basic"
+        : preset;
+    const includeSeedgridDependency = resolvedPreset === "seedgrid" ||
+        resolvedPreset === "editor" ||
+        resolvedPreset === "full" ||
+        requestedDepKeys.includes("@seedgrid/fe-components");
+    const includeEditorDependencies = resolvedPreset === "editor" ||
+        resolvedPreset === "full" ||
+        codeUsesTextEditor ||
+        requestedDepKeys.some((dep) => dep.startsWith("@tiptap/"));
+    const includeSandpackReactDependency = resolvedPreset === "full" ||
+        codeUsesPlaygroundComponent ||
+        requestedDepKeys.includes("@codesandbox/sandpack-react");
+    const shouldShimSandpackReact = includeSeedgridDependency && !includeSandpackReactDependency;
+    const shouldShimTiptap = includeSeedgridDependency && !includeEditorDependencies;
+    const shouldIncludeNodePolyfills = includeEditorDependencies;
     const files = {
         "/App.tsx": { code: appTsx, active: true },
         "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
     };
+    if (includeSeedgridDependency) {
+        // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
+        files["/node_modules/qrcode/index.js"] = { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true };
+        // Sandpack runtime can evaluate JSON files as plain JS modules.
+        // Provide CJS-compatible shims to keep @seedgrid/fe-components i18n/validators working.
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/pt-BR.json"] = {
+            code: SANDPACK_SEEDGRID_PT_BR_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/pt-PT.json"] = {
+            code: SANDPACK_SEEDGRID_PT_PT_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/en-US.json"] = {
+            code: SANDPACK_SEEDGRID_EN_US_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/i18n/es.json"] = {
+            code: SANDPACK_SEEDGRID_ES_JSON_SHIM,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/blocked-email-domains.json"] = {
+            code: SANDPACK_SEEDGRID_BLOCKED_EMAIL_DOMAINS_JSON_SHIM,
+            hidden: true
+        };
+    }
+    if (shouldIncludeNodePolyfills) {
+        // markdown-it CLI entry uses node:fs and breaks in browser runtime.
+        files["/node_modules/markdown-it/bin/markdown-it.mjs"] = {
+            code: SANDPACK_MARKDOWN_IT_BIN_SHIM,
+            hidden: true
+        };
+        // Node builtin compatibility shims used by transitive dependencies (e.g. argparse from markdown-it/tiptap).
+        files["/node_modules/assert/index.js"] = { code: SANDPACK_ASSERT_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/util/index.js"] = { code: SANDPACK_UTIL_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/path/index.js"] = { code: SANDPACK_PATH_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/fs/index.js"] = { code: SANDPACK_FS_SHIM_INDEX_JS, hidden: true };
+        files["/node_modules/process/index.js"] = { code: SANDPACK_PROCESS_SHIM_INDEX_JS, hidden: true };
+    }
+    if (shouldShimSandpackReact) {
+        files["/node_modules/@codesandbox/sandpack-react/index.js"] = {
+            code: SANDPACK_SANDBOX_SANDPACK_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+    }
+    if (shouldShimTiptap) {
+        files["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor.js"] = {
+            code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor"] = {
+            code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
+            hidden: true
+        };
+        files["/node_modules/@seedgrid/fe-components/dist/inputs/SgTextEditor.mjs"] = {
+            code: SANDPACK_SEEDGRID_TEXT_EDITOR_SHIM_INDEX_JS,
+            hidden: true
+        };
+        files["/node_modules/@tiptap/react/package.json"] = {
+            code: JSON.stringify({ name: "@tiptap/react", version: "0.0.0-shim", main: "index.js", module: "index.mjs" }),
+            hidden: true
+        };
+        files["/node_modules/@tiptap/react/index.js"] = {
+            code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+        files["/node_modules/@tiptap/react/index.mjs"] = {
+            code: SANDPACK_TIPTAP_REACT_SHIM_INDEX_JS,
+            hidden: true
+        };
+        for (const packageName of TIPTAP_SHIM_PACKAGES) {
+            files[`/node_modules/${packageName}/package.json`] = {
+                code: JSON.stringify({ name: packageName, version: "0.0.0-shim", main: "index.js", module: "index.mjs" }),
+                hidden: true
+            };
+            files[`/node_modules/${packageName}/index.js`] = {
+                code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+                hidden: true
+            };
+            files[`/node_modules/${packageName}/index.mjs`] = {
+                code: SANDPACK_TIPTAP_EXTENSION_SHIM_INDEX_JS,
+                hidden: true
+            };
+        }
+    }
     const deps = {
-        react: "^19.0.0",
-        "react-dom": "^19.0.0",
-        ...DEFAULT_SEEDGRID_PEER_DEPENDENCIES,
-        "@seedgrid/fe-components": resolvedSeedgridDependency,
-        ...(dependencies ?? {})
+        ...DEFAULT_SANDBOX_BASE_DEPENDENCIES,
+        ...(includeSeedgridDependency ? DEFAULT_SEEDGRID_RUNTIME_DEPENDENCIES : {}),
+        ...(includeEditorDependencies ? DEFAULT_SEEDGRID_EDITOR_DEPENDENCIES : {}),
+        ...(includeSandpackReactDependency ? DEFAULT_SANDBOX_HOST_DEPENDENCIES : {}),
+        ...(shouldIncludeNodePolyfills ? DEFAULT_SANDPACK_POLYFILLS : {}),
+        ...(includeSeedgridDependency ? { "@seedgrid/fe-components": resolvedSeedgridDependency } : {}),
+        ...requestedDeps
     };
     const currentHeight = isExpanded ? expandedHeight : height;
     const resizeClass = !resizable
@@ -378,18 +891,27 @@ export default function SgPlayground(props) {
             : resizeAxis === "horizontal"
                 ? "resize-x"
                 : "resize";
-    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: { dependencies: deps }, options: {
-                autorun: false,
-                initMode: "lazy",
-                bundlerTimeOut: 60000,
-                activeFile: "/App.tsx",
-                visibleFiles: ["/App.tsx"],
-                externalResources: SANDPACK_EXTERNAL_RESOURCES
-            }, 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"
+    const sandpackCustomSetup = React.useMemo(() => ({
+        dependencies: deps,
+        entry: "/index.tsx",
+        ...(resolvedNpmRegistries ? { npmRegistries: resolvedNpmRegistries } : {})
+    }), [deps, resolvedNpmRegistries]);
+    const sandpackOptions = React.useMemo(() => ({
+        autorun: false,
+        initMode: "lazy",
+        bundlerURL: resolvedBundlerURL,
+        // Keep both keys while sandpack typings/runtime differ across versions.
+        bundlerTimeOut: resolvedBundlerTimeoutMs,
+        bundlerTimeout: resolvedBundlerTimeoutMs,
+        activeFile: "/App.tsx",
+        visibleFiles: ["/App.tsx"],
+        externalResources: SANDPACK_EXTERNAL_RESOURCES
+    }), [resolvedBundlerTimeoutMs, resolvedBundlerURL]);
+    const content = interactive ? (_jsx("div", { className: cn(withCard ? "" : "rounded-lg border border-border", withCard ? undefined : className), children: _jsxs(SandpackProvider, { template: "react-ts", files: files, customSetup: sandpackCustomSetup, options: sandpackOptions, 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"
                                 ? "border-primary text-foreground"
                                 : "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"
                                 ? "border-primary text-foreground"
-                                : "border-transparent text-muted-foreground hover:text-foreground"), onClick: () => setActivePanel("preview"), children: "Preview" })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px]", "grid-cols-1 md:grid-cols-2", resizeClass), style: { height: currentHeight }, children: [_jsxs("div", { className: cn("min-w-0 md:border-r border-border", activePanel !== "code" ? "hidden md:block" : ""), children: [_jsx(SandpackCodeEditor, { showLineNumbers: true, wrapContent: true, showTabs: false, showRunButton: false, style: { height: "100%" } }), _jsx("div", { className: "flex justify-end border-t border-border px-3 py-2", children: _jsx(CopyButton, {}) })] }), _jsx("div", { className: cn("min-w-0", activePanel !== "preview" ? "hidden md:block" : ""), children: _jsx(SandpackPreview, { 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 })] }));
+                                : "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 })] }));
     if (!withCard)
         return content;
     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

@@ -1,6 +1,6 @@
 {
   "name": "@seedgrid/fe-components",
-  "version": "2026.3.2",
+  "version": "2026.3.3",
   "type": "module",
   "repository": {
     "type": "git",
@@ -29,11 +29,13 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "peerDependencies": {
+    "@tiptap/core": "^2.9.1",
     "@tiptap/extension-color": "^2.9.1",
     "@tiptap/extension-font-family": "^2.9.1",
     "@tiptap/extension-highlight": "^2.9.1",
     "@tiptap/extension-image": "^2.9.1",
     "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
     "@tiptap/extension-subscript": "^2.9.1",
     "@tiptap/extension-superscript": "^2.9.1",
     "@tiptap/extension-text-align": "^2.9.1",
@@ -46,11 +48,13 @@
     "react-hook-form": "^7.0.0"
   },
   "devDependencies": {
+    "@tiptap/core": "^2.9.1",
     "@tiptap/extension-color": "^2.9.1",
     "@tiptap/extension-font-family": "^2.9.1",
     "@tiptap/extension-highlight": "^2.9.1",
     "@tiptap/extension-image": "^2.9.1",
     "@tiptap/extension-link": "^2.9.1",
+    "@tiptap/pm": "^2.9.1",
     "@tiptap/extension-subscript": "^2.9.1",
     "@tiptap/extension-superscript": "^2.9.1",
     "@tiptap/extension-text-align": "^2.9.1",
@@ -58,7 +62,6 @@
     "@tiptap/extension-underline": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
-    "@types/qrcode": "^1.5.6",
     "lucide-react": "^0.468.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
@@ -67,6 +70,6 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.20.0",
     "@pqina/flip": "^1.8.4",
-    "qrcode": "^1.5.4"
+    "qrcode.react": "^4.2.0"
   }
 }