@seedgrid/fe-components 0.2.9 → 2026.3.1

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"}

package/dist/layout/SgExpandablePanel.js

@@ -0,0 +1,302 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+function cn(...parts) {
+    return parts.filter(Boolean).join(" ");
+}
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(value, max));
+}
+function toCssSize(value, fallback) {
+    if (value === undefined || value === null)
+        return `${fallback}px`;
+    if (typeof value === "number")
+        return `${value}px`;
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? trimmed : `${fallback}px`;
+}
+function parsePx(value) {
+    if (typeof value === "number" && Number.isFinite(value))
+        return value;
+    if (typeof value !== "string")
+        return undefined;
+    const trimmed = value.trim().toLowerCase();
+    if (!trimmed)
+        return undefined;
+    const match = /^(-?\d+(?:\.\d+)?)(px)?$/.exec(trimmed);
+    if (!match)
+        return undefined;
+    const parsed = Number(match[1]);
+    return Number.isFinite(parsed) ? parsed : undefined;
+}
+function axisForDirection(direction) {
+    return direction === "left" || direction === "right" ? "x" : "y";
+}
+function closedTransform(direction) {
+    if (direction === "right")
+        return "-translate-x-full";
+    if (direction === "left")
+        return "translate-x-full";
+    if (direction === "bottom")
+        return "-translate-y-full";
+    return "translate-y-full";
+}
+function elevationClass(elevation) {
+    if (elevation === "sm")
+        return "shadow-sm";
+    if (elevation === "md")
+        return "shadow-md";
+    if (elevation === "lg")
+        return "shadow-lg";
+    return "";
+}
+function roundedClass(rounded) {
+    if (rounded === "none")
+        return "rounded-none";
+    if (rounded === "md")
+        return "rounded-md";
+    if (rounded === "lg")
+        return "rounded-lg";
+    return "rounded-xl";
+}
+function getFocusableElements(root) {
+    return Array.from(root.querySelectorAll(`button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])`)).filter((el) => !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true");
+}
+export const SgExpandablePanel = React.forwardRef(function SgExpandablePanel(props, ref) {
+    const { header, children, footer, handle, open, defaultOpen = false, onOpenChange, expandTo, placement = "start", mode = "inline", size, resizable = false, onSizeChange, closeOnOutsideClick, closeOnEsc = true, trapFocus, showBackdrop = true, animation, elevation = "md", border = true, rounded = "lg", ariaLabel, role, className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, style } = props;
+    const isControlled = open !== undefined;
+    const [openUncontrolled, setOpenUncontrolled] = React.useState(defaultOpen);
+    const isOpen = isControlled ? !!open : openUncontrolled;
+    const setOpen = React.useCallback((next) => {
+        if (!isControlled)
+            setOpenUncontrolled(next);
+        onOpenChange?.(next);
+    }, [isControlled, onOpenChange]);
+    const axis = axisForDirection(expandTo);
+    const fallbackMainSize = axis === "x" ? 320 : 280;
+    const [mainSize, setMainSize] = React.useState(size?.default ?? fallbackMainSize);
+    React.useEffect(() => {
+        if (size?.default !== undefined) {
+            setMainSize(size.default);
+        }
+    }, [size?.default]);
+    const minPx = parsePx(size?.min) ?? (axis === "x" ? 180 : 140);
+    const maxPx = parsePx(size?.max) ?? Number.POSITIVE_INFINITY;
+    const mainSizeCss = toCssSize(mainSize, fallbackMainSize);
+    const minSizeCss = size?.min !== undefined ? toCssSize(size.min, minPx) : undefined;
+    const maxSizeCss = size?.max !== undefined && Number.isFinite(maxPx)
+        ? toCssSize(size.max, maxPx)
+        : size?.max !== undefined
+            ? toCssSize(size.max, fallbackMainSize)
+            : undefined;
+    const resolvedTrapFocus = trapFocus ?? mode === "overlay";
+    const resolvedCloseOnOutsideClick = closeOnOutsideClick ?? mode === "overlay";
+    const shouldRenderBackdrop = showBackdrop || resolvedCloseOnOutsideClick;
+    const animationType = animation?.type ?? "slide";
+    const durationMs = animation?.durationMs ?? 180;
+    const [mounted, setMounted] = React.useState(false);
+    const [present, setPresent] = React.useState(isOpen);
+    const [entered, setEntered] = React.useState(isOpen);
+    React.useEffect(() => {
+        setMounted(true);
+    }, []);
+    React.useEffect(() => {
+        if (mode !== "overlay") {
+            setEntered(isOpen);
+            return;
+        }
+        if (isOpen) {
+            setPresent(true);
+            const id = window.requestAnimationFrame(() => setEntered(true));
+            return () => window.cancelAnimationFrame(id);
+        }
+        setEntered(false);
+        const delay = animationType === "none" ? 0 : durationMs;
+        const id = window.setTimeout(() => setPresent(false), delay);
+        return () => window.clearTimeout(id);
+    }, [mode, isOpen, animationType, durationMs]);
+    React.useEffect(() => {
+        if (mode !== "overlay" || !present || !isOpen)
+            return;
+        const original = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = original;
+        };
+    }, [mode, present, isOpen]);
+    const panelRef = React.useRef(null);
+    const overlayRef = React.useRef(null);
+    const mergedRef = React.useMemo(() => (node) => {
+        panelRef.current = node;
+        if (typeof ref === "function")
+            ref(node);
+        else if (ref)
+            ref.current = node;
+    }, [ref]);
+    const lastActiveRef = React.useRef(null);
+    React.useEffect(() => {
+        if (mode !== "overlay" || !isOpen)
+            return;
+        lastActiveRef.current = document.activeElement;
+        const id = window.setTimeout(() => {
+            const root = panelRef.current;
+            if (!root)
+                return;
+            const focusables = getFocusableElements(root);
+            (focusables[0] ?? root).focus?.();
+        }, 0);
+        return () => window.clearTimeout(id);
+    }, [mode, isOpen]);
+    React.useEffect(() => {
+        if (mode !== "overlay")
+            return;
+        if (isOpen || present)
+            return;
+        lastActiveRef.current?.focus?.();
+    }, [mode, isOpen, present]);
+    React.useEffect(() => {
+        if (mode !== "overlay" || !isOpen)
+            return;
+        const onKeyDown = (event) => {
+            if (closeOnEsc && event.key === "Escape") {
+                event.preventDefault();
+                setOpen(false);
+                return;
+            }
+            if (!resolvedTrapFocus || event.key !== "Tab")
+                return;
+            const root = panelRef.current;
+            if (!root)
+                return;
+            const focusables = getFocusableElements(root);
+            if (focusables.length === 0)
+                return;
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            if (!first || !last)
+                return;
+            const active = document.activeElement;
+            if (!event.shiftKey && active === last) {
+                event.preventDefault();
+                first.focus();
+            }
+            else if (event.shiftKey && active === first) {
+                event.preventDefault();
+                last.focus();
+            }
+        };
+        document.addEventListener("keydown", onKeyDown);
+        return () => document.removeEventListener("keydown", onKeyDown);
+    }, [mode, isOpen, closeOnEsc, resolvedTrapFocus, setOpen]);
+    const resizeState = React.useRef(null);
+    const onResizeStart = React.useCallback((event) => {
+        if (!resizable)
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = panel.getBoundingClientRect();
+        resizeState.current = {
+            startX: event.clientX,
+            startY: event.clientY,
+            startSize: axis === "x" ? rect.width : rect.height
+        };
+        const onMove = (moveEvent) => {
+            if (!resizeState.current)
+                return;
+            const dx = moveEvent.clientX - resizeState.current.startX;
+            const dy = moveEvent.clientY - resizeState.current.startY;
+            const delta = axis === "x"
+                ? expandTo === "right"
+                    ? dx
+                    : -dx
+                : expandTo === "bottom"
+                    ? dy
+                    : -dy;
+            const next = clamp(resizeState.current.startSize + delta, minPx, maxPx);
+            setMainSize(next);
+            onSizeChange?.(next);
+        };
+        const onUp = () => {
+            resizeState.current = null;
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onUp);
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onUp);
+    }, [axis, expandTo, maxPx, minPx, onSizeChange, resizable]);
+    const panelBaseClass = cn("relative min-h-0 min-w-0 overflow-hidden bg-background text-foreground", "flex flex-col", border ? "border border-border" : "", roundedClass(rounded), elevationClass(elevation), animationType === "none"
+        ? ""
+        : "transition-[transform,opacity,width,height] ease-out", contentClassName);
+    const panelRole = role ?? (mode === "overlay" ? "dialog" : "region");
+    const panelAriaLabel = ariaLabel ?? "Expandable panel";
+    const transitionStyle = animationType === "none" ? { transitionDuration: "0ms" } : { transitionDuration: `${durationMs}ms` };
+    const resizeHandleClass = expandTo === "right"
+        ? "absolute inset-y-0 right-0 w-1 cursor-ew-resize"
+        : expandTo === "left"
+            ? "absolute inset-y-0 left-0 w-1 cursor-ew-resize"
+            : expandTo === "bottom"
+                ? "absolute inset-x-0 bottom-0 h-1 cursor-ns-resize"
+                : "absolute inset-x-0 top-0 h-1 cursor-ns-resize";
+    const renderPanelContent = (extraStyle, stateClass) => (_jsxs("div", { ref: mergedRef, role: panelRole, "aria-modal": mode === "overlay" ? true : undefined, "aria-label": panelAriaLabel, tabIndex: -1, className: cn(panelBaseClass, stateClass, className), style: { ...extraStyle, ...style, ...transitionStyle }, children: [handle ? _jsx("div", { className: "px-3 pt-2", children: handle }) : null, header ? (_jsx("div", { className: cn("shrink-0 border-b border-border px-4 py-3", headerClassName), children: header })) : null, _jsx("div", { className: cn("min-h-0 flex-1 overflow-auto px-4 py-3", bodyClassName), children: children }), footer ? (_jsx("div", { className: cn("shrink-0 border-t border-border px-4 py-3", footerClassName), children: footer })) : null, resizable ? (_jsx("div", { className: cn(resizeHandleClass, "z-20 bg-transparent transition-colors hover:bg-primary/20 active:bg-primary/30"), onPointerDown: onResizeStart, "aria-hidden": "true" })) : null] }));
+    if (mode === "inline") {
+        const wrapperStyle = axis === "x"
+            ? {
+                width: isOpen ? mainSizeCss : "0px",
+                minWidth: isOpen ? minSizeCss : undefined,
+                maxWidth: maxSizeCss
+            }
+            : {
+                height: isOpen ? mainSizeCss : "0px",
+                minHeight: isOpen ? minSizeCss : undefined,
+                maxHeight: maxSizeCss
+            };
+        const inlineStateClass = animationType === "fade"
+            ? isOpen
+                ? "opacity-100"
+                : "opacity-0"
+            : animationType === "slide"
+                ? cn(isOpen ? "opacity-100 translate-x-0 translate-y-0" : "opacity-0", !isOpen ? closedTransform(expandTo) : "")
+                : "";
+        return (_jsx("div", { className: cn("relative min-h-0 min-w-0 overflow-hidden", animationType === "none" ? "" : "transition-[width,height,opacity] ease-out"), style: { ...wrapperStyle, ...transitionStyle }, children: renderPanelContent(axis === "x"
+                ? { width: "100%", minWidth: 0, height: "100%" }
+                : { height: "100%", minHeight: 0, width: "100%" }, inlineStateClass) }));
+    }
+    if (!mounted || !present)
+        return null;
+    const overlayContainerClass = axis === "x"
+        ? cn("fixed inset-0 z-[1000] flex pointer-events-none", expandTo === "right" ? "justify-start" : "justify-end", placement === "start" ? "items-start" : placement === "center" ? "items-center" : "items-end")
+        : cn("fixed inset-0 z-[1000] flex flex-col pointer-events-none", expandTo === "bottom" ? "justify-start" : "justify-end", placement === "start" ? "items-start" : placement === "center" ? "items-center" : "items-end");
+    const overlayPanelStyle = axis === "x"
+        ? {
+            width: mainSizeCss,
+            minWidth: minSizeCss,
+            maxWidth: maxSizeCss,
+            height: placement === "center" ? "calc(100% - 2rem)" : "100%"
+        }
+        : {
+            height: mainSizeCss,
+            minHeight: minSizeCss,
+            maxHeight: maxSizeCss,
+            width: placement === "center" ? "calc(100% - 2rem)" : "100%"
+        };
+    const overlayStateClass = animationType === "fade"
+        ? entered
+            ? "opacity-100"
+            : "opacity-0"
+        : animationType === "slide"
+            ? cn(entered ? "opacity-100 translate-x-0 translate-y-0" : "opacity-0", !entered ? closedTransform(expandTo) : "")
+            : "";
+    return createPortal(_jsxs("div", { className: "fixed inset-0 z-[1000] pointer-events-none", children: [shouldRenderBackdrop ? (_jsx("div", { ref: overlayRef, className: cn("absolute inset-0 pointer-events-auto", showBackdrop ? "bg-black/40 backdrop-blur-[1px]" : "bg-transparent", animationType === "none" ? "" : "transition-opacity ease-out", entered ? "opacity-100" : "opacity-0", overlayClassName), style: transitionStyle, onMouseDown: (event) => {
+                    if (!resolvedCloseOnOutsideClick)
+                        return;
+                    if (event.target === overlayRef.current)
+                        setOpen(false);
+                } })) : null, _jsx("div", { className: overlayContainerClass, children: _jsx("div", { className: "pointer-events-auto", children: renderPanelContent(overlayPanelStyle, overlayStateClass) }) })] }), document.body);
+});
+SgExpandablePanel.displayName = "SgExpandablePanel";