@seedgrid/fe-components 2026.3.1 → 2026.3.2-2

package/dist/digits/roller3d-digit/SgRoller3DDigit.d.ts

@@ -1,5 +1,5 @@
 export type SgRoller3DDigitProps = {
-    /** Current value to display — must be present in `items` */
+    /** Current value to display — must be present in `items` */
     value: string;
     /**
      * Ordered list of all possible values this roller can show.
@@ -7,31 +7,33 @@ export type SgRoller3DDigitProps = {
      * @default ["0","1","2","3","4","5","6","7","8","9"]
      */
     items?: string[];
-    /** Font size in pixels — controls overall scale */
+    /** Font size in pixels — controls overall scale */
     fontSize?: number;
+    /** Transition duration in milliseconds */
+    transitionMs?: number;
     /** Additional CSS classes on the outer wrapper */
     className?: string;
 };
 /**
- * SgRoller3DDigit — a vertical drum/roller that animates between values.
+ * SgRoller3DDigit — a vertical drum/roller that animates between values.
  *
  * Renders a scrolling strip of items and smoothly transitions to the
  * position of `value` in the `items` list using a CSS transform.
  * Works with digits, letters, padded numbers or any custom strings.
  *
  * @example
- * // Digit roller (default 0–9)
+ * // Digit roller (default 0–9)
  * <SgRoller3DDigit value="7" fontSize={32} />
  *
  * @example
- * // Padded time roller (e.g. minutes 00–59)
+ * // Padded time roller (e.g. minutes 00–59)
  * const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
  * <SgRoller3DDigit value="42" items={MINUTES} fontSize={22} />
  *
  * @example
- * // Letter roller (A–Z) — animate names character by character
+ * // Letter roller (A–Z) — animate names character by character
  * const ALPHA = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
  * <SgRoller3DDigit value="M" items={ALPHA} fontSize={32} />
  */
-export declare function SgRoller3DDigit({ value, items, fontSize, className, }: SgRoller3DDigitProps): import("react/jsx-runtime").JSX.Element;
+export declare function SgRoller3DDigit({ value, items, fontSize, transitionMs, className, }: SgRoller3DDigitProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=SgRoller3DDigit.d.ts.map

package/dist/digits/roller3d-digit/SgRoller3DDigit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SgRoller3DDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/roller3d-digit/SgRoller3DDigit.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG;IACjC,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAqB,EACrB,QAAa,EACb,SAAS,GACV,EAAE,oBAAoB,2CAoDtB"}
+{"version":3,"file":"SgRoller3DDigit.d.ts","sourceRoot":"","sources":["../../../src/digits/roller3d-digit/SgRoller3DDigit.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,oBAAoB,GAAG;IACjC,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAqB,EACrB,QAAa,EACb,YAAkB,EAClB,SAAS,GACV,EAAE,oBAAoB,2CAoDtB"}

package/dist/digits/roller3d-digit/SgRoller3DDigit.js

@@ -4,27 +4,27 @@ function cn(...parts) {
 }
 const DEFAULT_ITEMS = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 /**
- * SgRoller3DDigit — a vertical drum/roller that animates between values.
+ * SgRoller3DDigit — a vertical drum/roller that animates between values.
  *
  * Renders a scrolling strip of items and smoothly transitions to the
  * position of `value` in the `items` list using a CSS transform.
  * Works with digits, letters, padded numbers or any custom strings.
  *
  * @example
- * // Digit roller (default 0–9)
+ * // Digit roller (default 0–9)
  * <SgRoller3DDigit value="7" fontSize={32} />
  *
  * @example
- * // Padded time roller (e.g. minutes 00–59)
+ * // Padded time roller (e.g. minutes 00–59)
  * const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, "0"));
  * <SgRoller3DDigit value="42" items={MINUTES} fontSize={22} />
  *
  * @example
- * // Letter roller (A–Z) — animate names character by character
+ * // Letter roller (A–Z) — animate names character by character
  * const ALPHA = Array.from("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
  * <SgRoller3DDigit value="M" items={ALPHA} fontSize={32} />
  */
-export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, className, }) {
+export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, transitionMs = 500, className, }) {
     const idx = Math.max(0, items.indexOf(value));
     // Dimensions are derived from fontSize so the component scales uniformly.
     // The ratios match the original SgClock roller3d proportions exactly when
@@ -38,7 +38,7 @@ export function SgRoller3DDigit({ value, items = DEFAULT_ITEMS, fontSize = 32, c
         // top fade
         "before:absolute before:inset-0 before:z-10 before:bg-gradient-to-b before:from-black/[0.06] before:to-transparent before:content-['']", 
         // bottom fade
-        "after:absolute after:inset-0 after:z-10 after:bg-gradient-to-t after:from-black/[0.12] after:to-transparent after:content-['']", className), style: { width: w, height: h }, children: [_jsx("div", { className: "absolute left-0 right-0 top-1/2 z-20 h-px bg-red-500/70" }), _jsx("div", { className: "absolute left-0 top-0 w-full transition-transform duration-500 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] [mask-image:linear-gradient(to_bottom,transparent,black_22%,black_78%,transparent)]", style: { transform: `translateY(${translateY}px)` }, children: items.map((item, i) => (_jsx("div", { className: "flex select-none items-center justify-center font-medium tabular-nums", style: {
+        "after:absolute after:inset-0 after:z-10 after:bg-gradient-to-t after:from-black/[0.12] after:to-transparent after:content-['']", className), style: { width: w, height: h }, children: [_jsx("div", { className: "absolute left-0 right-0 top-1/2 z-20 h-px bg-red-500/70" }), _jsx("div", { className: "absolute left-0 top-0 w-full transition-transform [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] [mask-image:linear-gradient(to_bottom,transparent,black_22%,black_78%,transparent)]", style: { transform: `translateY(${translateY}px)`, transitionDuration: `${transitionMs}ms` }, children: items.map((item, i) => (_jsx("div", { className: "flex select-none items-center justify-center font-medium tabular-nums", style: {
                         height: itemH,
                         fontSize,
                         lineHeight: 1,

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":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAqB,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGpF,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGpE,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GACnB,OAAO,GACP,QAAQ,GACR,iBAAiB,GACjB,eAAe,GACf,WAAW,GACX,QAAQ,GACR,oBAAoB,GACpB,kBAAkB,CAAC;AAEvB,MAAM,MAAM,0BAA0B,GAClC,iBAAiB,GACjB,kBAAkB,GAClB,aAAa,GACb,cAAc,GACd,eAAe,CAAC;AAEpB,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,eAAe,CAAC;IAE5B,KAAK,CAAC,EAAE,WAAW,CAAC;IAEpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IAExB,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrD,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC,WAAW,CAAC,EAAE,qBAAqB,CAAC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,0BAA0B,CAAC;IAElD,IAAI,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,mBAAmB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAE9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAE7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAC;IAEzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAEpD,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEvC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AA0QF,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CAuiDlD;yBAviDe,MAAM"}

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.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;AAqVF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoMtE"}
+{"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;AAsXF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAoOtE"}

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.9";
+const DEFAULT_SEEDGRID_DEPENDENCY = "latest";
 const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
     "@codesandbox/sandpack-react": "^2.20.0",
     "react-hook-form": "^7.0.0",
@@ -29,6 +29,30 @@ 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_PACKAGE_JSON = `{
+  "name": "qrcode",
+  "version": "0.0.0-sandpack-shim",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "exports": {
+    ".": "./index.js"
+  }
+}`;
+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_FALLBACK_THEME_VARS = {
     "--background": "0 0% 100%",
     "--foreground": "222.2 84% 4.9%",
@@ -301,15 +325,19 @@ function CopyButton() {
     }, [copyState]);
     return (_jsx(SgButton, { appearance: "outline", size: "sm", onClick: handleCopy, children: copyState === "success" ? "Copiado" : copyState === "error" ? "Erro" : "Copiar" }));
 }
-function RunButton() {
+function RunButton({ onRun }) {
     const { sandpack } = useSandpack();
-    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => sandpack.runSandpack(), children: "Run" }));
+    return (_jsx(SgButton, { severity: "primary", size: "sm", onClick: () => {
+            sandpack.runSandpack();
+            onRun?.();
+        }, children: "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 effectivePreviewPadding = normalizeCssSize(previewPadding ?? (codeContract === "appFile" ? 12 : 0));
-    const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss(readThemeVarsFromHost(), effectivePreviewPadding));
+    const [sandpackStylesCss, setSandpackStylesCss] = React.useState(() => buildSandpackStylesCss({}, effectivePreviewPadding));
     const [isExpanded, setIsExpanded] = React.useState(false);
+    const [activePanel, setActivePanel] = React.useState("code");
     React.useEffect(() => {
         if (typeof window === "undefined")
             return;
@@ -357,7 +385,10 @@ export default function SgPlayground(props) {
         DEFAULT_SEEDGRID_DEPENDENCY;
     const files = {
         "/App.tsx": { code: appTsx, active: true },
-        "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) }
+        "/styles.css": { code: sandpackStylesCss || buildSandpackStylesCss({}, effectivePreviewPadding) },
+        // Compatibility shim for legacy @seedgrid/fe-components builds that still import "qrcode" (node-only path).
+        "/node_modules/qrcode/package.json": { code: SANDPACK_QRCODE_SHIM_PACKAGE_JSON, hidden: true },
+        "/node_modules/qrcode/index.js": { code: SANDPACK_QRCODE_SHIM_INDEX_JS, hidden: true }
     };
     const deps = {
         react: "^19.0.0",
@@ -376,13 +407,17 @@ export default function SgPlayground(props) {
                 : "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",
+                bundlerURL: "https://sandpack.seedgrid.com.br",
+                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, {})] })] }), _jsxs("div", { className: cn("grid overflow-auto min-h-[260px] min-w-[480px]", resizeClass), style: {
-                        gridTemplateColumns: "1fr 1fr",
-                        height: currentHeight
-                    }, children: [_jsxs("div", { className: "min-w-0 border-r border-border", 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: "min-w-0", 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 })] }));
+            }, 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"
+                                ? "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 })] }));
     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.1",
+  "version": "2026.3.2-2",
   "type": "module",
   "repository": {
     "type": "git",
@@ -58,7 +58,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 +66,6 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.20.0",
     "@pqina/flip": "^1.8.4",
-    "qrcode": "^1.5.4"
+    "qrcode.react": "^4.2.0"
   }
 }