@seedgrid/fe-components 0.2.10 → 2026.3.1

package/dist/layout/SgCarousel.js

@@ -0,0 +1,166 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { ChevronLeft, ChevronRight, ChevronUp, ChevronDown } from "lucide-react";
+export function SgCarousel(props) {
+    const { id, items, numVisible = 1, numScroll = 1, orientation = "horizontal", circular = true, autoPlay = false, autoPlayInterval = 3000, showNavigators = true, showIndicators = true, className = "", itemClassName = "", width = "100%", height, gap = 16, onIndexChange, customNavigators } = props;
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const [isHovered, setIsHovered] = React.useState(false);
+    const timerRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const lastNotifiedIndexRef = React.useRef(activeIndex);
+    const [viewportSize, setViewportSize] = React.useState({ width: 0, height: 0 });
+    const safeNumVisible = Math.max(1, numVisible);
+    const safeNumScroll = Math.max(1, numScroll);
+    const itemCount = items.length;
+    const maxStartIndex = Math.max(itemCount - safeNumVisible, 0);
+    const totalPages = itemCount === 0 ? 0 : Math.floor(maxStartIndex / safeNumScroll) + 1;
+    const isHorizontal = orientation === "horizontal";
+    // Auto play logic
+    React.useEffect(() => {
+        if (autoPlay && !isHovered) {
+            timerRef.current = setInterval(() => {
+                handleNext();
+            }, autoPlayInterval);
+        }
+        return () => {
+            if (timerRef.current) {
+                clearInterval(timerRef.current);
+            }
+        };
+    }, [autoPlay, autoPlayInterval, isHovered, activeIndex]);
+    // Keep active index within bounds when props/items change.
+    React.useEffect(() => {
+        setActiveIndex((prev) => Math.min(Math.max(prev, 0), maxStartIndex));
+    }, [maxStartIndex]);
+    // Notify parent after the state is committed, avoiding setState during render warnings.
+    React.useEffect(() => {
+        if (lastNotifiedIndexRef.current === activeIndex)
+            return;
+        lastNotifiedIndexRef.current = activeIndex;
+        onIndexChange?.(activeIndex);
+    }, [activeIndex, onIndexChange]);
+    React.useEffect(() => {
+        const element = containerRef.current;
+        if (!element)
+            return;
+        const updateSize = () => {
+            const rect = element.getBoundingClientRect();
+            setViewportSize({ width: rect.width, height: rect.height });
+        };
+        updateSize();
+        if (typeof ResizeObserver === "undefined") {
+            window.addEventListener("resize", updateSize);
+            return () => {
+                window.removeEventListener("resize", updateSize);
+            };
+        }
+        const observer = new ResizeObserver(updateSize);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    const handleNext = () => {
+        setActiveIndex((prev) => {
+            if (itemCount === 0)
+                return 0;
+            const next = prev + safeNumScroll;
+            if (next > maxStartIndex) {
+                return circular ? 0 : maxStartIndex;
+            }
+            return next;
+        });
+    };
+    const handlePrev = () => {
+        setActiveIndex((prev) => {
+            if (itemCount === 0)
+                return 0;
+            const next = prev - safeNumScroll;
+            if (next < 0) {
+                return circular ? maxStartIndex : 0;
+            }
+            return next;
+        });
+    };
+    const handleIndicatorClick = (index) => {
+        const next = Math.min(index * safeNumScroll, maxStartIndex);
+        setActiveIndex(next);
+    };
+    const canGoPrev = circular ? maxStartIndex > 0 : activeIndex > 0;
+    const canGoNext = circular ? maxStartIndex > 0 : activeIndex < maxStartIndex;
+    const itemPercent = 100 / safeNumVisible;
+    const gapPerItem = (gap * (safeNumVisible - 1)) / safeNumVisible;
+    const itemExtentCss = `calc(${itemPercent}% - ${gapPerItem}px)`;
+    const getTransformValue = () => {
+        const viewportExtent = isHorizontal ? viewportSize.width : viewportSize.height;
+        if (viewportExtent > 0) {
+            const itemExtent = Math.max(0, (viewportExtent - gap * (safeNumVisible - 1)) / safeNumVisible);
+            const step = itemExtent + gap;
+            const offsetPx = activeIndex * step;
+            return isHorizontal
+                ? `translate3d(-${offsetPx}px, 0, 0)`
+                : `translate3d(0, -${offsetPx}px, 0)`;
+        }
+        // Fallback before first measure.
+        const itemPercent = 100 / safeNumVisible;
+        const fallbackGap = (activeIndex * gap) / safeNumVisible;
+        const fallbackOffset = activeIndex * itemPercent;
+        return isHorizontal
+            ? `translateX(calc(-${fallbackOffset}% - ${fallbackGap}px))`
+            : `translateY(calc(-${fallbackOffset}% - ${fallbackGap}px))`;
+    };
+    const NavButton = ({ direction, onClick, disabled }) => {
+        const isPrev = direction === "prev";
+        const Icon = isHorizontal
+            ? isPrev ? ChevronLeft : ChevronRight
+            : isPrev ? ChevronUp : ChevronDown;
+        const customButton = isPrev ? customNavigators?.prev : customNavigators?.next;
+        if (customButton) {
+            return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: `
+            absolute z-10 flex items-center justify-center transition-all
+            ${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 cursor-pointer"}
+            ${isHorizontal
+                    ? `top-1/2 -translate-y-1/2 ${isPrev ? "left-2" : "right-2"}`
+                    : `left-1/2 -translate-x-1/2 ${isPrev ? "-top-5" : "-bottom-5"}`}
+          `, children: customButton }));
+        }
+        return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, className: `
+          absolute z-10 flex h-10 w-10 items-center justify-center rounded-full
+          bg-white/90 shadow-lg opacity-70 transition-all
+          ${disabled ? "opacity-30 cursor-not-allowed" : "hover:opacity-100 hover:bg-white cursor-pointer"}
+          ${isHorizontal
+                ? `top-1/2 -translate-y-1/2 ${isPrev ? "left-2" : "right-2"}`
+                : `left-1/2 -translate-x-1/2 ${isPrev ? "-top-5" : "-bottom-5"}`}
+        `, children: _jsx(Icon, { className: "h-6 w-6 text-foreground" }) }));
+    };
+    return (_jsxs("div", { id: id, className: `relative ${className}`, style: { width, height }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [showNavigators && (_jsxs(_Fragment, { children: [_jsx(NavButton, { direction: "prev", onClick: handlePrev, disabled: !canGoPrev }), _jsx(NavButton, { direction: "next", onClick: handleNext, disabled: !canGoNext })] })), _jsx("div", { ref: containerRef, className: "h-full w-full overflow-hidden rounded-lg", children: _jsx("div", { className: `
+            flex transition-transform duration-500 ease-in-out
+            ${isHorizontal ? "flex-row" : "flex-col"}
+          `, style: {
+                        transform: getTransformValue(),
+                        gap: `${gap}px`,
+                        height: isHorizontal ? undefined : "100%"
+                    }, children: items.map((item, index) => (_jsx("div", { className: `
+                flex-shrink-0
+                ${itemClassName}
+              `, style: {
+                            width: isHorizontal ? itemExtentCss : "100%",
+                            height: isHorizontal ? "100%" : itemExtentCss
+                        }, children: item }, index))) }) }), showIndicators && (_jsx("div", { className: `
+            absolute flex gap-2 z-10
+            ${isHorizontal
+                    ? "bottom-4 left-1/2 -translate-x-1/2 flex-row"
+                    : "-right-6 top-1/2 -translate-y-1/2 flex-col"}
+          `, children: Array.from({ length: totalPages }).map((_, index) => {
+                    const isActive = Math.floor(activeIndex / safeNumScroll) === index;
+                    return (_jsx("button", { type: "button", onClick: () => handleIndicatorClick(index), className: `
+                  transition-all
+                  ${isHorizontal ? "h-2" : "w-2"}
+                  ${isActive
+                            ? `${isHorizontal ? "w-8" : "h-8"} bg-primary`
+                            : `${isHorizontal ? "w-2" : "h-2"} bg-white/60 hover:bg-white/80`}
+                  rounded-full
+                `, "aria-label": `Go to slide ${index + 1}` }, index));
+                }) }))] }));
+}

package/dist/layout/SgDockLayout.d.ts

@@ -17,13 +17,27 @@ export type SgDockLayoutProps = {
     children: React.ReactNode;
     defaultState?: SgDockLayoutState;
 };
+export type SgDockDropIndicator = {
+    zone: SgDockZoneId;
+    index: number;
+};
 type DockContextValue = {
     layoutId: string;
     getZoneElement: (zone: SgDockZoneId) => HTMLDivElement | null;
     registerZone: (zone: SgDockZoneId, el: HTMLDivElement | null) => void;
     getZoneAtPoint: (x: number, y: number) => SgDockZoneId | null;
+    getDropPlacementAtPoint: (x: number, y: number, draggingToolbarId: string) => SgDockDropIndicator | null;
+    getZoneToolbarCount: (zone: SgDockZoneId) => number;
+    isDropPreviewActive: boolean;
+    setDropPreviewActive: (next: boolean) => void;
+    draggingToolbarId: string | null;
+    setDraggingToolbarId: (toolbarId: string | null) => void;
+    dropIndicator: SgDockDropIndicator | null;
+    setDropIndicator: (next: SgDockDropIndicator | null) => void;
     getToolbarZone: (id: string) => SgDockZoneId | null;
+    getToolbarOrder: (id: string) => number | undefined;
     moveToolbar: (id: string, zone: SgDockZoneId) => void;
+    placeToolbar: (id: string, zone: SgDockZoneId, index: number) => void;
     ensureToolbar: (id: string, state: Partial<SgDockToolbarState>) => void;
     getToolbarCollapsed: (id: string) => boolean | undefined;
     setToolbarCollapsed: (id: string, next: boolean) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"SgDockLayout.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockLayout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAExE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,OAAO,EAAE,CAAC,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;CAC9C,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,iBAAiB,CAAC;CAClC,CAAC;AAIF,KAAK,gBAAgB,GAAG;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,cAAc,GAAG,IAAI,CAAC;IAC9D,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,cAAc,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IAC9D,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,YAAY,GAAG,IAAI,CAAC;IACpD,WAAW,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACtD,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxE,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,GAAG,SAAS,CAAC;IACzD,mBAAmB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1D,CAAC;AAIF,wBAAgB,eAAe,4BAE9B;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqH9D;yBArHe,YAAY"}
+{"version":3,"file":"SgDockLayout.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockLayout.tsx"],"names":[],"mappings":"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"}

package/dist/layout/SgDockLayout.js

@@ -9,11 +9,26 @@ export function useSgDockLayout() {
 const EMPTY_STATE = { version: 1, toolbars: {} };
 export function SgDockLayout(props) {
     const { id, className, children, defaultState } = props;
-    const { value: persisted, setValue } = useSgPersistentState({
+    const { value: persisted, setValue, hydrated } = useSgPersistentState({
         baseKey: `dock-layout:${id}`,
         defaultValue: defaultState ?? EMPTY_STATE
     });
+    const [isDropPreviewActive, setIsDropPreviewActive] = React.useState(false);
+    const [draggingToolbarId, setDraggingToolbarIdState] = React.useState(null);
+    const [dropIndicator, setDropIndicator] = React.useState(null);
     const zonesRef = React.useRef(new Map());
+    const getSortedZoneToolbarIds = React.useCallback((state, zone, excludingId) => {
+        return Object.values(state)
+            .filter((tb) => tb.zone === zone && tb.id !== excludingId)
+            .sort((a, b) => {
+            const orderA = a.order ?? 0;
+            const orderB = b.order ?? 0;
+            if (orderA !== orderB)
+                return orderA - orderB;
+            return a.id.localeCompare(b.id);
+        })
+            .map((tb) => tb.id);
+    }, []);
     const registerZone = React.useCallback((zone, el) => {
         if (!el) {
             zonesRef.current.delete(zone);
@@ -33,43 +48,150 @@ export function SgDockLayout(props) {
         }
         return null;
     }, []);
+    const getDropPlacementAtPoint = React.useCallback((x, y, draggingToolbarId) => {
+        const zone = getZoneAtPoint(x, y);
+        if (!zone)
+            return null;
+        const zoneEl = zonesRef.current.get(zone);
+        if (!zoneEl)
+            return null;
+        const axisHorizontal = zone === "top" || zone === "bottom";
+        const toolbarEls = Array.from(zoneEl.querySelectorAll("[data-sg-toolbar-root='true'][data-sg-toolbar-id]"))
+            .filter((el) => el.dataset.sgToolbarId !== draggingToolbarId)
+            .sort((a, b) => {
+            const rectA = a.getBoundingClientRect();
+            const rectB = b.getBoundingClientRect();
+            if (axisHorizontal) {
+                if (rectA.top !== rectB.top)
+                    return rectA.top - rectB.top;
+                return rectA.left - rectB.left;
+            }
+            if (rectA.left !== rectB.left)
+                return rectA.left - rectB.left;
+            return rectA.top - rectB.top;
+        });
+        const cursorMajor = axisHorizontal ? x : y;
+        let index = toolbarEls.length;
+        for (let i = 0; i < toolbarEls.length; i += 1) {
+            const toolbarEl = toolbarEls[i];
+            if (!toolbarEl)
+                continue;
+            const rect = toolbarEl.getBoundingClientRect();
+            const majorCenter = axisHorizontal ? rect.left + rect.width / 2 : rect.top + rect.height / 2;
+            if (cursorMajor < majorCenter) {
+                index = i;
+                break;
+            }
+        }
+        return { zone, index };
+    }, [getZoneAtPoint]);
+    const setDropPreviewActive = React.useCallback((next) => {
+        setIsDropPreviewActive((prev) => (prev === next ? prev : next));
+        if (!next) {
+            setDropIndicator(null);
+            setDraggingToolbarIdState(null);
+        }
+    }, []);
+    const setDraggingToolbarId = React.useCallback((toolbarId) => {
+        setDraggingToolbarIdState((prev) => (prev === toolbarId ? prev : toolbarId));
+    }, []);
+    React.useEffect(() => {
+        if (!isDropPreviewActive)
+            return;
+        const clearPreview = () => setDropPreviewActive(false);
+        const handleVisibilityChange = () => {
+            if (document.hidden)
+                clearPreview();
+        };
+        window.addEventListener("pointerup", clearPreview);
+        window.addEventListener("pointercancel", clearPreview);
+        window.addEventListener("blur", clearPreview);
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            window.removeEventListener("pointerup", clearPreview);
+            window.removeEventListener("pointercancel", clearPreview);
+            window.removeEventListener("blur", clearPreview);
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+        };
+    }, [isDropPreviewActive, setDropPreviewActive]);
     const getToolbarZone = React.useCallback((toolbarId) => persisted.toolbars[toolbarId]?.zone ?? null, [persisted]);
+    const getToolbarOrder = React.useCallback((toolbarId) => {
+        const toolbar = persisted.toolbars[toolbarId];
+        if (!toolbar)
+            return undefined;
+        if (draggingToolbarId && toolbarId === draggingToolbarId)
+            return undefined;
+        const ids = getSortedZoneToolbarIds(persisted.toolbars, toolbar.zone, draggingToolbarId ?? undefined);
+        const index = ids.indexOf(toolbarId);
+        return index === -1 ? undefined : index;
+    }, [draggingToolbarId, getSortedZoneToolbarIds, persisted]);
+    const getZoneToolbarCount = React.useCallback((zone) => {
+        const zoneEl = zonesRef.current.get(zone);
+        if (!zoneEl)
+            return 0;
+        return Array.from(zoneEl.querySelectorAll("[data-sg-toolbar-root='true'][data-sg-toolbar-id]")).filter((el) => el.dataset.sgToolbarId !== draggingToolbarId).length;
+    }, [draggingToolbarId]);
     const ensureToolbar = React.useCallback((toolbarId, state) => {
+        if (!hydrated)
+            return;
         setValue((prev) => {
             if (prev.toolbars[toolbarId])
                 return prev;
+            const targetZone = state.zone ?? "free";
+            const zoneIds = getSortedZoneToolbarIds(prev.toolbars, targetZone);
             return {
                 ...prev,
                 toolbars: {
                     ...prev.toolbars,
                     [toolbarId]: {
                         id: toolbarId,
-                        zone: state.zone ?? "free",
+                        zone: targetZone,
                         collapsed: state.collapsed ?? false,
                         orientation: state.orientation,
-                        order: state.order ?? Object.keys(prev.toolbars).length
+                        order: state.order ?? zoneIds.length
                     }
                 }
             };
         });
-    }, [setValue]);
-    const moveToolbar = React.useCallback((toolbarId, zone) => {
+    }, [getSortedZoneToolbarIds, hydrated, setValue]);
+    const placeToolbar = React.useCallback((toolbarId, zone, index) => {
         setValue((prev) => {
             const current = prev.toolbars[toolbarId];
             if (!current)
                 return prev;
+            const sourceZone = current.zone;
+            const targetZone = zone;
+            const nextToolbars = {
+                ...prev.toolbars
+            };
+            const targetIds = getSortedZoneToolbarIds(prev.toolbars, targetZone, toolbarId);
+            const safeIndex = Math.max(0, Math.min(index, targetIds.length));
+            targetIds.splice(safeIndex, 0, toolbarId);
+            targetIds.forEach((tbId, i) => {
+                const base = nextToolbars[tbId];
+                if (!base)
+                    return;
+                nextToolbars[tbId] = { ...base, zone: targetZone, order: i };
+            });
+            if (sourceZone !== targetZone) {
+                const sourceIds = getSortedZoneToolbarIds(prev.toolbars, sourceZone, toolbarId);
+                sourceIds.forEach((tbId, i) => {
+                    const base = nextToolbars[tbId];
+                    if (!base)
+                        return;
+                    nextToolbars[tbId] = { ...base, order: i };
+                });
+            }
             return {
                 ...prev,
-                toolbars: {
-                    ...prev.toolbars,
-                    [toolbarId]: {
-                        ...current,
-                        zone
-                    }
-                }
+                toolbars: nextToolbars
             };
         });
-    }, [setValue]);
+    }, [getSortedZoneToolbarIds, setValue]);
+    const moveToolbar = React.useCallback((toolbarId, zone) => {
+        const currentZoneIds = getSortedZoneToolbarIds(persisted.toolbars, zone, toolbarId);
+        placeToolbar(toolbarId, zone, currentZoneIds.length);
+    }, [getSortedZoneToolbarIds, persisted.toolbars, placeToolbar]);
     const getToolbarCollapsed = React.useCallback((toolbarId) => persisted.toolbars[toolbarId]?.collapsed, [persisted]);
     const setToolbarCollapsed = React.useCallback((toolbarId, next) => {
         setValue((prev) => {
@@ -90,8 +212,18 @@ export function SgDockLayout(props) {
         getZoneElement,
         registerZone,
         getZoneAtPoint,
+        getDropPlacementAtPoint,
+        getZoneToolbarCount,
+        isDropPreviewActive,
+        setDropPreviewActive,
+        draggingToolbarId,
+        setDraggingToolbarId,
+        dropIndicator,
+        setDropIndicator,
         getToolbarZone,
+        getToolbarOrder,
         moveToolbar,
+        placeToolbar,
         ensureToolbar,
         getToolbarCollapsed,
         setToolbarCollapsed

package/dist/layout/SgDockScreen.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type SgDockLayoutState } from "./SgDockLayout";
+import { type SgScreenProps } from "./SgScreen";
+export type SgDockScreenProps = Omit<SgScreenProps, "children" | "id"> & {
+    id: string;
+    screenId?: string;
+    defaultState?: SgDockLayoutState;
+    layoutClassName?: string;
+    children?: React.ReactNode;
+};
+export declare function SgDockScreen(props: Readonly<SgDockScreenProps>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SgDockScreen {
+    var displayName: string;
+}
+//# sourceMappingURL=SgDockScreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgDockScreen.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockScreen.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAM1D,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,IAAI,CAAC,GAAG;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAIF,wBAAgB,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,iBAAiB,CAAC,2CAqB9D;yBArBe,YAAY"}

package/dist/layout/SgDockScreen.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SgDockLayout } from "./SgDockLayout";
+import { SgScreen } from "./SgScreen";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+const AUTO_LAYOUT_ROOT_CLASS = "relative grid h-full w-full min-h-0 min-w-0 grid-cols-[12rem_1fr_12rem] grid-rows-[auto_1fr_auto]";
+export function SgDockScreen(props) {
+    const { id, screenId, defaultState, layoutClassName, children, ...screenProps } = props;
+    return (_jsx(SgScreen, { ...screenProps, id: screenId, children: _jsx(SgDockLayout, { id: id, defaultState: defaultState, className: cn(AUTO_LAYOUT_ROOT_CLASS, layoutClassName), children: children }) }));
+}
+SgDockScreen.displayName = "SgDockScreen";

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

@@ -1 +1 @@
-{"version":3,"file":"SgDockZone.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockZone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAMF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CAwB1D;yBAxBe,UAAU"}
+{"version":3,"file":"SgDockZone.d.ts","sourceRoot":"","sources":["../../src/layout/SgDockZone.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAGpE,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,YAAY,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAeF,wBAAgB,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,2CA0E1D;yBA1Ee,UAAU"}

package/dist/layout/SgDockZone.js

@@ -1,20 +1,54 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { useSgDockLayout } from "./SgDockLayout";
+import { t, useComponentsI18n } from "../i18n";
 function cn(...parts) {
     return parts.filter(Boolean).join(" ");
 }
+const POSITION_CLASS_PATTERN = /(?:^|\s)!?(?:(?:[a-z0-9-]+:)+)?(?:static|fixed|absolute|relative|sticky)(?=\s|$)/i;
+const DEFAULT_ZONE_LAYOUT_CLASS = {
+    top: "col-span-3 row-start-1 items-start",
+    bottom: "col-span-3 row-start-3 items-end",
+    left: "col-start-1 row-start-2 items-start",
+    right: "col-start-3 row-start-2 items-start",
+    free: "col-start-2 row-start-2 items-center justify-center"
+};
 export function SgDockZone(props) {
     const { zone, className, children } = props;
     const dock = useSgDockLayout();
+    const i18n = useComponentsI18n();
     const ref = React.useRef(null);
+    const showDropPreview = Boolean(dock?.isDropPreviewActive);
+    const dropIndicator = dock?.dropIndicator ?? null;
+    const zoneToolbarCount = dock?.getZoneToolbarCount(zone) ?? 0;
+    const showSlotPreview = showDropPreview && zone !== "free" && Boolean(dock?.draggingToolbarId);
+    const dropSlotIndexes = React.useMemo(() => {
+        if (!showSlotPreview)
+            return [];
+        const slotCount = Math.max(1, zoneToolbarCount + 1);
+        return Array.from({ length: slotCount }, (_, i) => i);
+    }, [showSlotPreview, zoneToolbarCount]);
+    const isHorizontalZone = zone === "top" || zone === "bottom";
+    const isVerticalZone = zone === "left" || zone === "right";
+    const hasExplicitPositionClass = POSITION_CLASS_PATTERN.test(className ?? "");
+    const hasCustomClass = Boolean(className?.trim());
+    const zoneDefaultLayoutClass = hasCustomClass ? null : DEFAULT_ZONE_LAYOUT_CLASS[zone];
     React.useEffect(() => {
         if (!dock)
             return;
         dock.registerZone(zone, ref.current);
         return () => dock.registerZone(zone, null);
     }, [dock, zone]);
-    return (_jsx("div", { ref: ref, "data-sg-dock-zone": zone, className: cn("relative flex gap-3 p-3", zone === "top" || zone === "bottom" ? "flex-row items-center" : "flex-col items-center", className), children: children }));
+    return (_jsxs("div", { ref: ref, "data-sg-dock-zone": zone, className: cn(hasExplicitPositionClass ? "flex min-h-0 min-w-0 gap-3 p-2" : "relative flex min-h-0 min-w-0 gap-3 p-2", isHorizontalZone
+            ? "flex-row flex-wrap items-start content-start"
+            : isVerticalZone
+                ? "flex-col flex-wrap items-start content-start"
+                : "flex-col items-center", showDropPreview ? "rounded-xl border-2 border-dashed border-border/70 bg-background/40 p-3 transition-colors duration-150" : null, showDropPreview && isHorizontalZone ? "min-h-16" : null, showDropPreview && isVerticalZone ? "min-w-24" : null, zoneDefaultLayoutClass, className), children: [children, dropSlotIndexes.map((slotIndex) => {
+                const isActiveSlot = dropIndicator?.zone === zone && dropIndicator.index === slotIndex;
+                return (_jsx("span", { className: cn("pointer-events-none relative z-[2] inline-flex shrink-0 items-center justify-center rounded border border-dashed text-[11px] font-semibold uppercase tracking-wide transition-colors duration-100", isHorizontalZone ? "h-10 w-16" : "h-8 w-20 self-center", isActiveSlot
+                        ? "border-primary/70 bg-background/95 text-primary"
+                        : "border-border/60 bg-background/70 text-foreground/50"), style: { order: slotIndex * 2 - 1 }, "aria-hidden": "true", children: "><" }, `drop-slot-${zone}-${slotIndex}`));
+            }), showDropPreview && !showSlotPreview ? (_jsx("span", { className: "pointer-events-none absolute inset-0 z-[1] flex items-center justify-center text-xs font-semibold uppercase tracking-wide text-foreground/70", "aria-hidden": "true", children: t(i18n, "components.dock.dropHere") })) : null] }));
 }
 SgDockZone.displayName = "SgDockZone";

package/dist/layout/SgExpandablePanel.d.ts

@@ -0,0 +1,50 @@
+import * as React from "react";
+export type SgExpandablePanelDirection = "left" | "right" | "top" | "bottom";
+export type SgExpandablePanelPlacement = "start" | "center" | "end";
+export type SgExpandablePanelMode = "inline" | "overlay";
+export type SgExpandablePanelElevation = "none" | "sm" | "md" | "lg";
+export type SgExpandablePanelRounded = "none" | "md" | "lg" | "xl";
+export type SgExpandablePanelRole = "dialog" | "region";
+export type SgExpandablePanelSize = {
+    min?: number | string;
+    max?: number | string;
+    default?: number | string;
+};
+export type SgExpandablePanelAnimation = {
+    type?: "slide" | "fade" | "none";
+    durationMs?: number;
+};
+export type SgExpandablePanelProps = {
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    handle?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    expandTo: SgExpandablePanelDirection;
+    placement?: SgExpandablePanelPlacement;
+    mode?: SgExpandablePanelMode;
+    size?: SgExpandablePanelSize;
+    resizable?: boolean;
+    onSizeChange?: (size: number | string) => void;
+    closeOnOutsideClick?: boolean;
+    closeOnEsc?: boolean;
+    trapFocus?: boolean;
+    showBackdrop?: boolean;
+    animation?: SgExpandablePanelAnimation;
+    elevation?: SgExpandablePanelElevation;
+    border?: boolean;
+    rounded?: SgExpandablePanelRounded;
+    ariaLabel?: string;
+    role?: SgExpandablePanelRole;
+    className?: string;
+    contentClassName?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    footerClassName?: string;
+    overlayClassName?: string;
+    style?: React.CSSProperties;
+};
+export declare const SgExpandablePanel: React.ForwardRefExoticComponent<SgExpandablePanelProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SgExpandablePanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SgExpandablePanel.d.ts","sourceRoot":"","sources":["../../src/layout/SgExpandablePanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC7E,MAAM,MAAM,0BAA0B,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AACpE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,SAAS,CAAC;AACzD,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACrE,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAExD,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEvC,QAAQ,EAAE,0BAA0B,CAAC;IACrC,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAE7B,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAE/C,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,SAAS,CAAC,EAAE,0BAA0B,CAAC;IAEvC,SAAS,CAAC,EAAE,0BAA0B,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IAEnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAE7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA6DF,eAAO,MAAM,iBAAiB,+FA4Y7B,CAAC"}