@seedgrid/fe-components 0.2.9 → 2026.3.1

package/dist/layout/SgToolBar.js

@@ -1,8 +1,9 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createPortal } from "react-dom";
 import { useSgDockLayout } from "./SgDockLayout";
+import { useHasSgEnvironmentProvider, useSgPersistence } from "../environment/SgEnvironmentProvider";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
@@ -51,6 +52,50 @@ const BTN_COLORS = {
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
 }
+function parseStoredDragPosition(raw) {
+    const value = typeof raw === "string" ? (() => {
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            return null;
+        }
+    })() : raw;
+    if (!value ||
+        typeof value !== "object" ||
+        typeof value.x !== "number" ||
+        typeof value.y !== "number" ||
+        !Number.isFinite(value.x) ||
+        !Number.isFinite(value.y)) {
+        return null;
+    }
+    return {
+        x: value.x,
+        y: value.y
+    };
+}
+function resolveOrientationDirection(orientationDirection) {
+    switch (orientationDirection) {
+        case "horizontal-right":
+            return { orientation: "horizontal", direction: "left" };
+        case "horizontal-left":
+            return { orientation: "horizontal", direction: "right" };
+        case "vertical-up":
+            return { orientation: "vertical", direction: "up" };
+        case "vertical-down":
+        default:
+            return { orientation: "vertical", direction: "down" };
+    }
+}
+function resolveDockOrientationDirection(orientationDirection, inDock, zone) {
+    if (!inDock || zone === "free")
+        return orientationDirection;
+    if (zone === "top" || zone === "bottom") {
+        return orientationDirection.startsWith("horizontal") ? orientationDirection : "horizontal-left";
+    }
+    return orientationDirection.startsWith("vertical") ? orientationDirection : "vertical-down";
+}
+const SgToolbarOrientationContext = React.createContext("vertical");
 function useControlledState(args) {
     const { value, defaultValue, onChange } = args;
     const [internal, setInternal] = React.useState(defaultValue);
@@ -64,11 +109,21 @@ function useControlledState(args) {
     return [current, set];
 }
 export function SgToolBar(props) {
-    const { id, title, orientation = "vertical", size, className, style, dockZone, draggable = true, freeDrag = true, defaultPosition, collapsible = true, collapsed, defaultCollapsed = false, collapseDirection, onCollapsedChange, children } = props;
+    const hasEnvironmentProvider = useHasSgEnvironmentProvider();
+    const { load: loadPersistedState, save: savePersistedState, clear: clearPersistedState } = useSgPersistence();
+    const { id, title, orientationDirection, buttonsPerDirection, bgColorTitle, bgColor, size, className, style, dockZone, draggable = false, freeDrag = false, defaultPosition, collapsible = true, collapsed, defaultCollapsed = false, onCollapsedChange, children } = props;
     const dock = useSgDockLayout();
     const inDock = !!dock;
     const assignedZone = inDock ? dock.getToolbarZone(id) : null;
     const effectiveZone = assignedZone ?? dockZone ?? "free";
+    const toolbarOrder = inDock ? dock.getToolbarOrder(id) : undefined;
+    const toolbarRenderOrder = toolbarOrder !== undefined ? toolbarOrder * 2 : undefined;
+    const [dragHoverZone, setDragHoverZone] = React.useState(null);
+    const dragHoverZoneRef = React.useRef(null);
+    const dragPlacementRef = React.useRef(null);
+    const zoneForOrientation = inDock && !freeDrag && dragHoverZone ? dragHoverZone : effectiveZone;
+    const resolvedOrientationDirection = resolveDockOrientationDirection(orientationDirection ?? "vertical-down", inDock, zoneForOrientation);
+    const { orientation, direction } = resolveOrientationDirection(resolvedOrientationDirection);
     const portalTarget = inDock ? dock.getZoneElement(effectiveZone) : null;
     const [isCollapsed, setIsCollapsed] = useControlledState({
         value: collapsed ?? (inDock ? dock.getToolbarCollapsed(id) : undefined),
@@ -79,10 +134,106 @@ export function SgToolBar(props) {
                 dock.setToolbarCollapsed(id, next);
         }
     });
-    const [dragPos, setDragPos] = React.useState(defaultPosition ?? null);
+    const [dragPos, setDragPos] = React.useState(null);
+    const dragPosRef = React.useRef(null);
+    const [dragActive, setDragActive] = React.useState(false);
     const dragStart = React.useRef(null);
     const dragMoved = React.useRef(false);
     const containerRef = React.useRef(null);
+    const storageKey = React.useMemo(() => `sg-toolbar-pos:${id}`, [id]);
+    const setDragHoverZoneSafe = React.useCallback((next) => {
+        if (dragHoverZoneRef.current === next)
+            return;
+        dragHoverZoneRef.current = next;
+        setDragHoverZone(next);
+    }, []);
+    const loadStoredPosition = React.useCallback(async () => {
+        if (!storageKey)
+            return null;
+        if (hasEnvironmentProvider) {
+            try {
+                const loaded = await loadPersistedState(storageKey);
+                if (loaded === null || loaded === undefined)
+                    return null;
+                const parsed = parseStoredDragPosition(loaded);
+                if (!parsed) {
+                    await clearPersistedState(storageKey);
+                    return null;
+                }
+                return parsed;
+            }
+            catch {
+                return null;
+            }
+        }
+        try {
+            const raw = localStorage.getItem(storageKey);
+            if (!raw)
+                return null;
+            const parsed = parseStoredDragPosition(raw);
+            if (!parsed) {
+                localStorage.removeItem(storageKey);
+                return null;
+            }
+            return parsed;
+        }
+        catch {
+            return null;
+        }
+    }, [clearPersistedState, hasEnvironmentProvider, loadPersistedState, storageKey]);
+    const saveStoredPosition = React.useCallback(async (nextPos) => {
+        if (!storageKey)
+            return;
+        if (hasEnvironmentProvider) {
+            try {
+                await savePersistedState(storageKey, nextPos);
+            }
+            catch {
+                // ignore
+            }
+            return;
+        }
+        try {
+            localStorage.setItem(storageKey, JSON.stringify(nextPos));
+        }
+        catch {
+            // ignore
+        }
+    }, [hasEnvironmentProvider, savePersistedState, storageKey]);
+    const resolveFreeDragMode = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container)
+            return "fixed";
+        const offsetParent = container.offsetParent;
+        if (offsetParent instanceof HTMLElement &&
+            offsetParent !== document.body &&
+            offsetParent !== document.documentElement) {
+            return "absolute";
+        }
+        return "fixed";
+    }, []);
+    const getDragBounds = React.useCallback((mode) => {
+        if (!containerRef.current)
+            return null;
+        const rect = containerRef.current.getBoundingClientRect();
+        if (mode === "absolute") {
+            const offsetParent = containerRef.current.offsetParent;
+            if (offsetParent instanceof HTMLElement) {
+                return {
+                    minX: 0,
+                    minY: 0,
+                    maxX: Math.max(0, offsetParent.clientWidth - rect.width),
+                    maxY: Math.max(0, offsetParent.clientHeight - rect.height)
+                };
+            }
+        }
+        return {
+            minX: 0,
+            minY: 0,
+            maxX: Math.max(0, window.innerWidth - rect.width),
+            maxY: Math.max(0, window.innerHeight - rect.height)
+        };
+    }, []);
     React.useEffect(() => {
         if (!inDock)
             return;
@@ -92,6 +243,57 @@ export function SgToolBar(props) {
             orientation
         });
     }, [dock, id, effectiveZone, defaultCollapsed, inDock, orientation]);
+    React.useEffect(() => {
+        dragPosRef.current = dragPos;
+    }, [dragPos]);
+    React.useEffect(() => {
+        if (!freeDrag)
+            return;
+        let alive = true;
+        (async () => {
+            const parsed = await loadStoredPosition();
+            if (!alive || !parsed)
+                return;
+            const mode = resolveFreeDragMode();
+            const bounds = getDragBounds(mode);
+            if (!bounds)
+                return;
+            const next = {
+                x: clamp(parsed.x, bounds.minX, bounds.maxX),
+                y: clamp(parsed.y, bounds.minY, bounds.maxY),
+                mode
+            };
+            dragPosRef.current = next;
+            setDragPos(next);
+        })();
+        return () => {
+            alive = false;
+        };
+    }, [freeDrag, getDragBounds, loadStoredPosition, resolveFreeDragMode]);
+    React.useEffect(() => {
+        const defaultX = defaultPosition?.x;
+        const defaultY = defaultPosition?.y;
+        if (defaultX === undefined || defaultY === undefined || !freeDrag)
+            return;
+        const nextMode = resolveFreeDragMode();
+        setDragPos((prev) => {
+            if (prev)
+                return prev;
+            return { x: defaultX, y: defaultY, mode: nextMode };
+        });
+    }, [defaultPosition?.x, defaultPosition?.y, freeDrag, resolveFreeDragMode]);
+    React.useEffect(() => {
+        if (!dragActive)
+            return;
+        const previousBodyCursor = document.body.style.cursor;
+        const previousHtmlCursor = document.documentElement.style.cursor;
+        document.body.style.cursor = "grabbing";
+        document.documentElement.style.cursor = "grabbing";
+        return () => {
+            document.body.style.cursor = previousBodyCursor;
+            document.documentElement.style.cursor = previousHtmlCursor;
+        };
+    }, [dragActive]);
     const handlePointerDown = React.useCallback((event) => {
         if (event.button !== 0)
             return;
@@ -103,12 +305,66 @@ export function SgToolBar(props) {
             return;
         event.preventDefault();
         const rect = containerRef.current.getBoundingClientRect();
+        const dockInstance = dock;
+        const resolveDockPlacement = (clientX, clientY, toolbarLeft, toolbarTop, toolbarWidth, toolbarHeight) => {
+            if (!dockInstance)
+                return { zone: null, placement: null };
+            const zone = dockInstance.getZoneAtPoint(clientX, clientY);
+            if (!zone)
+                return { zone: null, placement: null };
+            const zoneEl = dockInstance.getZoneElement(zone);
+            const zoneRect = zoneEl?.getBoundingClientRect();
+            const isHorizontalZone = zone === "top" || zone === "bottom";
+            const isVerticalZone = zone === "left" || zone === "right";
+            const rawX = isHorizontalZone
+                ? toolbarLeft
+                : isVerticalZone
+                    ? toolbarLeft + toolbarWidth / 2
+                    : clientX;
+            const rawY = isVerticalZone
+                ? toolbarTop
+                : isHorizontalZone
+                    ? toolbarTop + toolbarHeight / 2
+                    : clientY;
+            const sampleX = zoneRect ? clamp(rawX, zoneRect.left + 1, zoneRect.right - 1) : rawX;
+            const sampleY = zoneRect ? clamp(rawY, zoneRect.top + 1, zoneRect.bottom - 1) : rawY;
+            return {
+                zone,
+                placement: dockInstance.getDropPlacementAtPoint(sampleX, sampleY, id)
+            };
+        };
+        if (inDock && !freeDrag && dockInstance) {
+            dockInstance.setDraggingToolbarId(id);
+            dockInstance.setDropPreviewActive(true);
+            const initial = resolveDockPlacement(event.clientX, event.clientY, rect.left, rect.top, rect.width, rect.height);
+            dragPlacementRef.current = initial.placement;
+            dockInstance.setDropIndicator(initial.placement);
+            const initialZone = initial.zone ?? effectiveZone;
+            setDragHoverZoneSafe(initialZone);
+        }
+        const dragMode = freeDrag
+            ? (inDock ? "fixed" : resolveFreeDragMode())
+            : "fixed";
+        let initialLeft = rect.left;
+        let initialTop = rect.top;
+        if (dragMode === "absolute") {
+            const offsetParent = containerRef.current.offsetParent;
+            if (offsetParent instanceof HTMLElement) {
+                const parentRect = offsetParent.getBoundingClientRect();
+                initialLeft = rect.left - parentRect.left;
+                initialTop = rect.top - parentRect.top;
+            }
+        }
         dragStart.current = {
             x: event.clientX,
             y: event.clientY,
-            left: rect.left,
-            top: rect.top
+            left: initialLeft,
+            top: initialTop,
+            mode: dragMode,
+            width: rect.width,
+            height: rect.height
         };
+        setDragActive(true);
         dragMoved.current = false;
         const handleMove = (moveEvent) => {
             if (!dragStart.current)
@@ -117,83 +373,233 @@ export function SgToolBar(props) {
             const dy = moveEvent.clientY - dragStart.current.y;
             if (Math.abs(dx) > 3 || Math.abs(dy) > 3)
                 dragMoved.current = true;
-            const next = { x: dragStart.current.left + dx, y: dragStart.current.top + dy };
+            const bounds = getDragBounds(dragStart.current.mode);
+            const next = {
+                x: bounds ? clamp(dragStart.current.left + dx, bounds.minX, bounds.maxX) : dragStart.current.left + dx,
+                y: bounds ? clamp(dragStart.current.top + dy, bounds.minY, bounds.maxY) : dragStart.current.top + dy,
+                mode: dragStart.current.mode
+            };
+            dragPosRef.current = next;
             setDragPos(next);
+            if (inDock && !freeDrag && dockInstance) {
+                const placementSourceLeft = dragStart.current.mode === "fixed" ? next.x : moveEvent.clientX;
+                const placementSourceTop = dragStart.current.mode === "fixed" ? next.y : moveEvent.clientY;
+                const resolved = resolveDockPlacement(moveEvent.clientX, moveEvent.clientY, placementSourceLeft, placementSourceTop, dragStart.current.width, dragStart.current.height);
+                dragPlacementRef.current = resolved.placement;
+                dockInstance.setDropIndicator(resolved.placement);
+                setDragHoverZoneSafe(resolved.zone);
+            }
         };
         const handleUp = (upEvent) => {
             window.removeEventListener("pointermove", handleMove);
             window.removeEventListener("pointerup", handleUp);
             window.removeEventListener("pointercancel", handleUp);
+            const activeDrag = dragStart.current;
+            const currentDragPos = dragPosRef.current;
+            const placementSourceLeft = inDock && !freeDrag && activeDrag && currentDragPos?.mode === "fixed"
+                ? currentDragPos.x
+                : upEvent.clientX;
+            const placementSourceTop = inDock && !freeDrag && activeDrag && currentDragPos?.mode === "fixed"
+                ? currentDragPos.y
+                : upEvent.clientY;
+            const resolvedFinal = inDock && !freeDrag && dockInstance
+                ? resolveDockPlacement(upEvent.clientX, upEvent.clientY, placementSourceLeft, placementSourceTop, activeDrag?.width ?? rect.width, activeDrag?.height ?? rect.height)
+                : { zone: null, placement: null };
+            const finalPlacement = inDock && !freeDrag && dockInstance
+                ? resolvedFinal.placement ?? dragPlacementRef.current
+                : null;
+            const finalZone = finalPlacement?.zone ??
+                (inDock && !freeDrag && dockInstance ? resolvedFinal.zone : null);
+            dragPlacementRef.current = null;
+            setDragActive(false);
+            setDragHoverZoneSafe(null);
+            if (inDock && !freeDrag && dockInstance) {
+                dockInstance.setDropIndicator(null);
+                dockInstance.setDraggingToolbarId(null);
+                dockInstance.setDropPreviewActive(false);
+            }
             if (!dragStart.current)
                 return;
+            const start = dragStart.current;
             dragStart.current = null;
             if (!dragMoved.current)
                 return;
-            if (inDock) {
-                const zone = dock.getZoneAtPoint(upEvent.clientX, upEvent.clientY);
-                if (zone)
-                    dock.moveToolbar(id, zone);
-                setDragPos(null);
+            if (freeDrag) {
+                const current = dragPosRef.current ?? {
+                    x: start.left,
+                    y: start.top,
+                    mode: start.mode
+                };
+                const bounds = getDragBounds(current.mode);
+                const clamped = bounds
+                    ? {
+                        x: clamp(current.x, bounds.minX, bounds.maxX),
+                        y: clamp(current.y, bounds.minY, bounds.maxY),
+                        mode: current.mode
+                    }
+                    : current;
+                dragPosRef.current = clamped;
+                setDragPos(clamped);
+                void saveStoredPosition({ x: clamped.x, y: clamped.y });
             }
-            else if (freeDrag) {
-                const wh = containerRef.current?.getBoundingClientRect();
-                if (wh) {
-                    const maxX = Math.max(0, window.innerWidth - wh.width);
-                    const maxY = Math.max(0, window.innerHeight - wh.height);
-                    setDragPos({
-                        x: clamp(dragPos?.x ?? wh.left, 0, maxX),
-                        y: clamp(dragPos?.y ?? wh.top, 0, maxY)
-                    });
+            else if (inDock && dockInstance) {
+                if (finalPlacement) {
+                    dockInstance.placeToolbar(id, finalPlacement.zone, finalPlacement.index);
                 }
+                else if (finalZone) {
+                    dockInstance.moveToolbar(id, finalZone);
+                }
+                dragPosRef.current = null;
+                setDragPos(null);
             }
         };
         window.addEventListener("pointermove", handleMove);
         window.addEventListener("pointerup", handleUp);
         window.addEventListener("pointercancel", handleUp);
-    }, [draggable, freeDrag, inDock, dock, id, dragPos]);
-    const direction = collapseDirection ??
-        (orientation === "horizontal"
-            ? "left"
-            : "top");
-    const toolbar = (_jsxs("div", { ref: containerRef, className: cn("select-none rounded-xl border border-border bg-background shadow-sm", "flex", orientation === "horizontal" ? "flex-row items-center" : "flex-col items-center", className), style: {
-            width: size?.w,
-            height: size?.h,
-            position: dragPos ? "fixed" : undefined,
-            left: dragPos?.x,
-            top: dragPos?.y,
-            zIndex: dragPos ? 1000 : undefined,
-            ...style
-        }, onPointerDown: handlePointerDown, children: [(title || collapsible) && (_jsxs("div", { className: cn("flex items-center gap-2 px-2 py-1 border-b border-border w-full", orientation === "horizontal" ? "border-b-0 border-r" : ""), children: [title ? (_jsx("span", { className: cn("text-xs font-semibold text-foreground truncate", isCollapsed ? "hidden" : ""), children: title })) : null, collapsible ? (_jsx("button", { type: "button", className: "ml-auto inline-flex size-6 items-center justify-center rounded-md hover:bg-muted", onClick: () => setIsCollapsed(!isCollapsed), onPointerDown: (e) => e.stopPropagation(), "aria-label": "Toggle toolbar", children: _jsx(CollapseIcon, { direction: direction, collapsed: isCollapsed }) })) : null] })), _jsx("div", { className: cn("flex gap-2 p-2", orientation === "horizontal" ? "flex-row" : "flex-col", isCollapsed ? "opacity-90" : ""), children: React.Children.map(children, (child) => {
-                    if (!isCollapsed)
-                        return child;
-                    if (!React.isValidElement(child))
-                        return child;
-                    return React.cloneElement(child, { hideLabel: true });
-                }) })] }));
+    }, [
+        draggable,
+        freeDrag,
+        inDock,
+        dock,
+        id,
+        effectiveZone,
+        resolveFreeDragMode,
+        getDragBounds,
+        saveStoredPosition,
+        setDragHoverZoneSafe
+    ]);
+    const showContent = !isCollapsed;
+    const openUp = orientation === "vertical" && direction === "up";
+    const openLeft = orientation === "horizontal" && direction === "left";
+    const detachFromDockFlow = dragActive && inDock && !freeDrag;
+    const normalizedButtonsPerDirection = Number.isFinite(buttonsPerDirection) && typeof buttonsPerDirection === "number" && buttonsPerDirection > 0
+        ? Math.floor(buttonsPerDirection)
+        : undefined;
+    const showLeadingCollapseButton = orientation === "horizontal" && openLeft && showContent;
+    const collapseIconDirection = resolvedOrientationDirection === "horizontal-right" ? "right" : direction;
+    const content = showContent ? (_jsx("div", { className: cn("gap-2 p-2", normalizedButtonsPerDirection
+            ? "grid"
+            : orientation === "horizontal"
+                ? "flex flex-row"
+                : "flex flex-col"), style: normalizedButtonsPerDirection
+            ? orientation === "horizontal"
+                ? { gridTemplateColumns: `repeat(${normalizedButtonsPerDirection}, max-content)` }
+                : {
+                    gridTemplateRows: `repeat(${normalizedButtonsPerDirection}, max-content)`,
+                    gridAutoFlow: "column"
+                }
+            : undefined, children: children })) : null;
+    const toolbar = (_jsx(SgToolbarOrientationContext.Provider, { value: orientation, children: _jsxs("div", { ref: containerRef, "data-sg-toolbar-root": "true", "data-sg-toolbar-id": id, className: cn("select-none rounded-xl border border-border bg-background shadow-sm", orientation === "horizontal" ? "inline-flex flex-row items-center" : "inline-flex flex-col items-center", className), style: {
+                width: size?.w,
+                height: size?.h,
+                backgroundColor: bgColor,
+                cursor: draggable ? (dragActive ? "grabbing" : "grab") : undefined,
+                position: dragPos?.mode,
+                left: dragPos?.x,
+                top: dragPos?.y,
+                order: detachFromDockFlow ? undefined : toolbarRenderOrder,
+                zIndex: dragPos ? 1000 : undefined,
+                ...style
+            }, onPointerDown: handlePointerDown, children: [openUp || openLeft ? content : null, (title || collapsible) && (_jsxs("div", { className: cn("flex items-center gap-2 px-2 py-1", orientation === "horizontal" ? "w-auto" : "w-full", orientation === "horizontal"
+                        ? showContent
+                            ? (openLeft ? "border-l border-border" : "border-r border-border")
+                            : ""
+                        : showContent
+                            ? (openUp ? "border-t border-border" : "border-b border-border")
+                            : ""), style: { backgroundColor: bgColorTitle }, children: [collapsible && showLeadingCollapseButton ? (_jsx("button", { type: "button", className: "inline-flex size-6 items-center justify-center rounded-md hover:bg-muted", onClick: () => setIsCollapsed(!isCollapsed), onPointerDown: (e) => e.stopPropagation(), "aria-label": "Toggle toolbar", children: _jsx(CollapseIcon, { direction: collapseIconDirection, collapsed: isCollapsed }) })) : null, title ? (_jsx("span", { className: "text-xs font-semibold text-foreground truncate", children: title })) : null, collapsible && !showLeadingCollapseButton ? (_jsx("button", { type: "button", className: "ml-auto inline-flex size-6 items-center justify-center rounded-md hover:bg-muted", onClick: () => setIsCollapsed(!isCollapsed), onPointerDown: (e) => e.stopPropagation(), "aria-label": "Toggle toolbar", children: _jsx(CollapseIcon, { direction: collapseIconDirection, collapsed: isCollapsed }) })) : null] })), openUp || openLeft ? null : content] }) }));
+    const needsCenterWrapper = inDock && (effectiveZone === "right" || effectiveZone === "left");
+    const toolbarForRender = needsCenterWrapper && !detachFromDockFlow ? (_jsx("div", { style: { width: "100%", display: "flex", justifyContent: "center", order: toolbarRenderOrder }, children: toolbar })) : toolbar;
     if (portalTarget) {
-        return createPortal(toolbar, portalTarget);
+        return createPortal(toolbarForRender, portalTarget);
     }
-    return toolbar;
+    return toolbarForRender;
 }
 export function SgToolbarIconButton(props) {
-    const { icon, hint, severity = "plain", disabled, onClick, hideLabel } = props;
+    const { icon, label, showLabel = true, hint, loading = false, severity = "plain", disabled, onClick, hideLabel } = props;
+    const toolbarOrientation = React.useContext(SgToolbarOrientationContext);
+    const isHorizontalToolbar = toolbarOrientation === "horizontal";
     const c = BTN_COLORS[severity];
     const text = typeof icon === "string" ? icon : null;
-    return (_jsxs("button", { type: "button", disabled: disabled, onClick: onClick, title: hint, className: cn("group", "relative inline-flex items-center justify-center rounded-lg", "transition-[transform,filter] duration-150", "hover:brightness-95 active:brightness-90", "focus-visible:outline-none focus-visible:ring-4", "disabled:opacity-50 disabled:cursor-not-allowed"), style: {
-            width: 40,
-            height: 40,
-            backgroundColor: c.bg,
-            color: c.fg,
-            ["--tw-ring-color"]: c.ring
-        }, children: [icon && typeof icon !== "string" ? (_jsx("span", { className: "inline-flex", children: icon })) : (_jsx("span", { className: "text-[10px] font-semibold", children: text?.slice(0, 2) })), !hideLabel && hint ? (_jsx("span", { className: "pointer-events-none absolute top-full mt-1 whitespace-nowrap rounded bg-foreground/90 px-2 py-1 text-[11px] text-background opacity-0 transition-opacity duration-150 group-hover:opacity-100", children: hint })) : null] }));
+    const hasVisibleLabel = Boolean(label) && showLabel && !hideLabel;
+    const [isPending, setIsPending] = React.useState(false);
+    const isLoading = loading || isPending;
+    const showHintTooltip = Boolean(hint) && !hideLabel;
+    const [hintPosition, setHintPosition] = React.useState({ x: 0, y: 0 });
+    const [isHintHovered, setIsHintHovered] = React.useState(false);
+    const buttonRef = React.useRef(null);
+    const handleClick = React.useCallback(() => {
+        if (!onClick || disabled || isLoading)
+            return;
+        const result = onClick();
+        if (!result || typeof result.then !== "function")
+            return;
+        setIsPending(true);
+        void result.finally(() => {
+            setIsPending(false);
+        });
+    }, [disabled, isLoading, onClick]);
+    const updateHintPosition = React.useCallback(() => {
+        if (!buttonRef.current)
+            return;
+        const buttonRect = buttonRef.current.getBoundingClientRect();
+        const toolbarRoot = buttonRef.current.closest("[data-sg-toolbar-root='true']");
+        const toolbarRect = toolbarRoot instanceof HTMLElement ? toolbarRoot.getBoundingClientRect() : null;
+        if (isHorizontalToolbar) {
+            const baseY = toolbarRect ? toolbarRect.top : buttonRect.top;
+            setHintPosition({
+                x: buttonRect.left + (buttonRect.width / 2),
+                y: baseY - 8
+            });
+            return;
+        }
+        const baseX = toolbarRect ? toolbarRect.right : buttonRect.right;
+        setHintPosition({
+            x: baseX + 8,
+            y: buttonRect.top + (buttonRect.height / 2)
+        });
+    }, [isHorizontalToolbar]);
+    React.useEffect(() => {
+        if (!showHintTooltip || !isHintHovered)
+            return;
+        updateHintPosition();
+        const handleReposition = () => updateHintPosition();
+        window.addEventListener("scroll", handleReposition, true);
+        window.addEventListener("resize", handleReposition);
+        return () => {
+            window.removeEventListener("scroll", handleReposition, true);
+            window.removeEventListener("resize", handleReposition);
+        };
+    }, [isHintHovered, showHintTooltip, updateHintPosition]);
+    const hintNode = showHintTooltip && isHintHovered && typeof document !== "undefined"
+        ? createPortal(_jsx("span", { className: "pointer-events-none fixed z-[1200] whitespace-nowrap rounded bg-foreground/90 px-2 py-1 text-[11px] text-background", style: {
+                left: hintPosition.x,
+                top: hintPosition.y,
+                transform: isHorizontalToolbar ? "translate(-50%, -100%)" : "translateY(-50%)"
+            }, children: hint }), document.body)
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: buttonRef, type: "button", disabled: disabled || isLoading, onClick: handleClick, "aria-busy": isLoading || undefined, onMouseEnter: showHintTooltip ? () => {
+                    updateHintPosition();
+                    setIsHintHovered(true);
+                } : undefined, onMouseLeave: showHintTooltip ? () => setIsHintHovered(false) : undefined, "aria-label": hint ?? label ?? text ?? undefined, className: cn("group", "relative inline-flex items-center justify-center rounded-lg", "transition-[transform,filter] duration-150", "hover:brightness-95 active:brightness-90", "focus-visible:outline-none focus-visible:ring-4", "disabled:opacity-50 disabled:cursor-not-allowed", hasVisibleLabel ? "gap-2 px-2 pr-3" : ""), style: {
+                    width: hasVisibleLabel ? undefined : 40,
+                    minWidth: 40,
+                    height: 40,
+                    backgroundColor: c.bg,
+                    color: c.fg,
+                    ["--tw-ring-color"]: c.ring
+                }, children: [isLoading ? (_jsx("span", { className: "inline-flex size-4 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent" })) : icon && typeof icon !== "string" ? (_jsx("span", { className: "inline-flex shrink-0", children: icon })) : (_jsx("span", { className: "shrink-0 text-[10px] font-semibold", children: text?.slice(0, 2) })), hasVisibleLabel ? (_jsx("span", { className: "text-xs font-medium leading-none", children: label })) : null] }), hintNode] }));
 }
 function CollapseIcon(props) {
     const { direction, collapsed } = props;
-    const rot = direction === "left" ? (collapsed ? 180 : 0)
-        : direction === "right" ? (collapsed ? 0 : 180)
-            : direction === "top" ? (collapsed ? 180 : 0)
-                : (collapsed ? 0 : 180);
-    return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-4", style: { transform: `rotate(${rot}deg)` }, "aria-hidden": "true", children: _jsx("path", { d: "M8 5l8 7-8 7", fill: "currentColor" }) }));
+    const arrowUp = "M6 15l6-6 6 6";
+    const arrowDown = "M6 9l6 6 6-6";
+    const arrowLeft = "M15 6l-6 6 6 6";
+    const arrowRight = "M9 6l6 6-6 6";
+    const path = direction === "down" ? (collapsed ? arrowDown : arrowUp)
+        : direction === "up" ? (collapsed ? arrowUp : arrowDown)
+            : direction === "left" ? (collapsed ? arrowLeft : arrowRight)
+                : (collapsed ? arrowRight : arrowLeft);
+    return (_jsx("svg", { viewBox: "0 0 24 24", className: "size-4", "aria-hidden": "true", children: _jsx("path", { d: path, fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 SgToolBar.displayName = "SgToolBar";
 SgToolbarIconButton.displayName = "SgToolbarIconButton";

package/dist/menus/SgDockMenu.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+export type SgDockMenuPosition = "left-top" | "left-center" | "left-bottom" | "center-top" | "center-bottom" | "right-top" | "right-center" | "right-bottom";
+export type SgDockMenuOrientation = "horizontal" | "vertical";
+export type SgDockMenuItem = {
+    /** Unique identifier */
+    id: string;
+    /** Icon to display */
+    icon: React.ReactNode;
+    /** Label/tooltip text */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Badge content */
+    badge?: string | number;
+    /** Custom class name */
+    className?: string;
+};
+export interface SgDockMenuProps {
+    /** Unique identifier for the dock */
+    id?: string;
+    /** Items to display in the dock */
+    items: SgDockMenuItem[];
+    /** Position of the dock */
+    position?: SgDockMenuPosition;
+    /** Enable drag and drop repositioning */
+    enableDragDrop?: boolean;
+    /** ID for persisting drag position */
+    dragId?: string;
+    /** Offset from the edge */
+    offset?: {
+        x?: number;
+        y?: number;
+    };
+    /** Custom class name for container */
+    className?: string;
+    /** Custom class name for items */
+    itemClassName?: string;
+    /** Z-index */
+    zIndex?: number;
+    /** Item size in pixels */
+    itemSize?: number;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Background color */
+    backgroundColor?: string;
+    /** Show labels on hover */
+    showLabels?: boolean;
+    /** Magnification effect on hover */
+    magnify?: boolean;
+    /** Magnification scale */
+    magnifyScale?: number;
+    /** Border radius */
+    borderRadius?: number;
+    /** Shadow elevation */
+    elevation?: "none" | "sm" | "md" | "lg";
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare function SgDockMenu(props: Readonly<SgDockMenuProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SgDockMenu.d.ts.map