@umbra.ui/core 0.1.0

package/dist/components/navigation/adaptive/useViewResize.js

@@ -0,0 +1,146 @@
+// useViewResize.ts
+import { ref, watch, onUnmounted } from "vue";
+export const useViewResize = (onScreenViews, config, props, getViewId, // Changed from (index: number) => string
+getOnscreenId) => {
+    const resizing = ref(null);
+    const resizeTooltip = ref({
+        visible: false,
+        x: 0,
+        y: 0,
+        width: 0,
+    });
+    const updateViewWidth = (viewId, width) => {
+        const view = onScreenViews.value.find((v) => v.id === viewId);
+        if (view) {
+            view.currentWidth = width;
+        }
+    };
+    const calculateMaxWidthWithoutOverflow = (viewIndex) => {
+        const container = document.querySelector(`#${getOnscreenId()}`);
+        if (!container) {
+            return Infinity;
+        }
+        const containerWidth = container.clientWidth;
+        const containerPadding = parseFloat(props.padding) || 0;
+        const gap = parseFloat(props.gap) || 0;
+        // Calculate available width considering padding
+        let availableWidth = containerWidth - containerPadding * 2;
+        // Calculate total width used by other views
+        let totalOtherViewsWidth = 0;
+        for (let i = 0; i < onScreenViews.value.length; i++) {
+            if (i !== viewIndex) {
+                const view = onScreenViews.value[i];
+                const viewElement = document.getElementById(getViewId(view) // Changed from getViewId(i)
+                );
+                if (viewElement) {
+                    // For views that aren't the last one, use their current width
+                    // For the last view (if it's not the one being resized), use its minimum width
+                    if (i === onScreenViews.value.length - 1) {
+                        // Last view uses its minimum width when calculating constraints
+                        totalOtherViewsWidth += view.minWidth || config.defaultMinWidth;
+                    }
+                    else {
+                        // Use actual width for non-last views
+                        totalOtherViewsWidth +=
+                            view.currentWidth || viewElement.offsetWidth;
+                    }
+                }
+            }
+        }
+        // Calculate gaps between views
+        const totalGaps = gap * (onScreenViews.value.length - 1);
+        // Calculate maximum width for the resizing view
+        const maxWidth = availableWidth - totalOtherViewsWidth - totalGaps;
+        // Ensure we return a positive value
+        return Math.max(config.defaultMinWidth, maxWidth);
+    };
+    const startResize = (viewId, event) => {
+        const view = onScreenViews.value.find((v) => v.id === viewId);
+        if (!view) {
+            return;
+        }
+        // Use getViewId to find the element more reliably
+        const viewElement = document.getElementById(getViewId(view));
+        if (!viewElement) {
+            return;
+        }
+        const currentWidth = view.currentWidth || viewElement.offsetWidth;
+        resizing.value = {
+            viewId,
+            startX: event.clientX,
+            startWidth: currentWidth,
+        };
+        // Show tooltip with initial width
+        resizeTooltip.value = {
+            visible: true,
+            x: event.clientX,
+            y: event.clientY - 40,
+            width: Math.round(currentWidth),
+        };
+        // Prevent text selection during resize
+        document.body.style.userSelect = "none";
+        event.preventDefault();
+    };
+    const handleMouseResize = (event) => {
+        if (!resizing.value)
+            return;
+        const view = onScreenViews.value.find((v) => v.id === resizing.value?.viewId);
+        if (!view)
+            return;
+        const viewIndex = onScreenViews.value.findIndex((v) => v.id === resizing.value?.viewId);
+        if (viewIndex === -1)
+            return;
+        const deltaX = event.clientX - resizing.value.startX;
+        const newWidth = resizing.value.startWidth + deltaX;
+        // Apply constraints
+        const minWidth = view.minWidth || config.defaultMinWidth;
+        const maxWidthFromView = view.maxWidth || Infinity;
+        const maxWidthFromContainer = calculateMaxWidthWithoutOverflow(viewIndex);
+        const maxWidth = Math.min(maxWidthFromView, maxWidthFromContainer);
+        const constrainedWidth = Math.max(minWidth, Math.min(newWidth, maxWidth));
+        // Update width through the callback function
+        updateViewWidth(view.id, constrainedWidth);
+        // Check if a constraint was hit
+        const isConstrained = newWidth !== constrainedWidth;
+        // Update tooltip position and value
+        resizeTooltip.value = {
+            visible: !isConstrained, // Hide when hitting a constraint
+            x: event.clientX,
+            y: event.clientY - 40,
+            width: Math.round(constrainedWidth),
+        };
+    };
+    const endResize = () => {
+        if (!resizing.value)
+            return;
+        resizing.value = null;
+        document.body.style.userSelect = "";
+        // Hide tooltip
+        resizeTooltip.value.visible = false;
+    };
+    // Set up event listeners when resizing starts/ends
+    watch(resizing, (newVal) => {
+        if (newVal) {
+            document.addEventListener("mousemove", handleMouseResize);
+            document.addEventListener("mouseup", endResize);
+        }
+        else {
+            document.removeEventListener("mousemove", handleMouseResize);
+            document.removeEventListener("mouseup", endResize);
+        }
+    });
+    // Cleanup on unmount
+    const cleanup = () => {
+        document.removeEventListener("mousemove", handleMouseResize);
+        document.removeEventListener("mouseup", endResize);
+    };
+    onUnmounted(() => {
+        cleanup();
+    });
+    return {
+        resizing,
+        resizeTooltip,
+        startResize,
+        updateViewWidth,
+    };
+};

package/dist/components/navigation/navstack/useNavigationStack.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from "vue";
+import { Pane } from "../types";
+export declare function useNavigationStack(initialPanes: Pane[], taskKey: string): {
+    panes: Ref<{
+        name: string;
+        background: string;
+        foreground: string;
+        component: any;
+        props: Record<string, any>;
+    }[], Pane[] | {
+        name: string;
+        background: string;
+        foreground: string;
+        component: any;
+        props: Record<string, any>;
+    }[]>;
+    visiblePanes: import("vue").ComputedRef<boolean[]>;
+    currentIndex: Ref<number, number>;
+    navigate: (index: number, animated?: boolean) => void;
+    addPane: (pane: Pane, navigateToNew?: boolean) => void;
+    removePane: (index: number) => void;
+    insertPane: (index: number, pane: Pane, navigateToNew?: boolean) => void;
+    updatePanes: (newPanes: Pane[]) => void;
+};
+//# sourceMappingURL=useNavigationStack.d.ts.map

package/dist/components/navigation/navstack/useNavigationStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNavigationStack.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/navstack/useNavigationStack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,GAAG,EAAmB,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM;;;;;;;;;;;;;;;;sBAO7C,MAAM,aAAY,OAAO;oBA4E3B,IAAI,kBAAiB,OAAO;wBAWxB,MAAM;wBAqBxB,MAAM,QACP,IAAI,kBACK,OAAO;4BAqBO,IAAI,EAAE;EAkBtC"}

package/dist/components/navigation/navstack/useNavigationStack.js

@@ -0,0 +1,133 @@
+import { ref, computed } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+gsap.registerPlugin(Flip);
+export function useNavigationStack(initialPanes, taskKey) {
+    const panes = ref(initialPanes);
+    const currentIndex = ref(0);
+    const visiblePanes = computed(() => panes.value.map((_, index) => index === currentIndex.value));
+    const navigate = (index, animated = true) => {
+        // Ensure index is within bounds
+        if (index < 0 || index >= panes.value.length) {
+            console.warn(`Navigation index ${index} out of bounds`);
+            return;
+        }
+        const offscreenLeft = document.getElementById(`${taskKey}-offscreen-left`);
+        const onscreen = document.getElementById(`${taskKey}-onscreen`);
+        const offscreenRight = document.getElementById(`${taskKey}-offscreen-right`);
+        if (!offscreenLeft || !onscreen || !offscreenRight) {
+            console.log(`Elements are null for key \`${taskKey}\`. Unable to animate`);
+            return;
+        }
+        // Hide all panes initially
+        panes.value.forEach((_, idx) => {
+            const element = document.getElementById(`${taskKey}-pane-${idx}`);
+            if (element) {
+                element.style.display = "none";
+            }
+        });
+        let states = [];
+        const next = document.getElementById(`${taskKey}-pane-${index}`);
+        if (next) {
+            next.style.display = "grid";
+            states.push(next);
+        }
+        const current = onscreen.children[0];
+        if (current) {
+            current.style.display = "grid";
+            states.push(current);
+        }
+        if (!animated) {
+            states = [];
+        }
+        const state = Flip.getState(states);
+        // Reorganize panes
+        for (let i = 0; i < panes.value.length; i++) {
+            const pane = document.getElementById(`${taskKey}-pane-${i}`);
+            if (!pane)
+                continue;
+            if (i < index) {
+                pane.parentNode?.removeChild(pane);
+                offscreenLeft.appendChild(pane);
+            }
+            else if (i > index) {
+                pane.parentNode?.removeChild(pane);
+                offscreenRight.appendChild(pane);
+            }
+            else {
+                pane.parentNode?.removeChild(pane);
+                onscreen.appendChild(pane);
+            }
+        }
+        currentIndex.value = index;
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        }).then(() => {
+            if (current && current !== next) {
+                current.style.display = "none";
+            }
+        });
+    };
+    const addPane = (pane, navigateToNew = false) => {
+        panes.value.push(pane);
+        // Wait for next tick to ensure DOM is updated
+        setTimeout(() => {
+            if (navigateToNew) {
+                navigate(panes.value.length - 1, true);
+            }
+        }, 0);
+    };
+    const removePane = (index) => {
+        if (index < 0 || index >= panes.value.length) {
+            console.warn(`Cannot remove pane at index ${index}`);
+            return;
+        }
+        // If we're removing the current pane, navigate away first
+        if (index === currentIndex.value) {
+            const newIndex = index > 0 ? index - 1 : 0;
+            if (panes.value.length > 1) {
+                navigate(newIndex, false);
+            }
+        }
+        else if (index < currentIndex.value) {
+            // Adjust current index if removing a pane before current
+            currentIndex.value--;
+        }
+        panes.value.splice(index, 1);
+    };
+    const insertPane = (index, pane, navigateToNew = false) => {
+        if (index < 0 || index > panes.value.length) {
+            console.warn(`Cannot insert pane at index ${index}`);
+            return;
+        }
+        panes.value.splice(index, 0, pane);
+        // Adjust current index if inserting before current position
+        if (index <= currentIndex.value) {
+            currentIndex.value++;
+        }
+        setTimeout(() => {
+            if (navigateToNew) {
+                navigate(index, true);
+            }
+        }, 0);
+    };
+    const updatePanes = (newPanes) => {
+        panes.value = newPanes;
+        // Reset to first pane if current index is out of bounds
+        if (currentIndex.value >= newPanes.length) {
+            navigate(0, false);
+        }
+    };
+    return {
+        panes,
+        visiblePanes,
+        currentIndex,
+        navigate,
+        addPane,
+        removePane,
+        insertPane,
+        updatePanes,
+    };
+}

package/dist/components/navigation/slideover/useSlideoverController.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from "vue";
+interface Pane {
+    name: string;
+    background: string;
+    foreground: string;
+    component: any;
+    props: Record<string, any>;
+}
+export declare const useSlideoverController: (panes: Pane[], componentId: string) => {
+    visiblePanes: Ref<boolean[], boolean[]>;
+    currentPaneIndex: import("vue").ComputedRef<number>;
+    showPane: (index: number) => void;
+    hidePane: (index: number) => void;
+    togglePane: (index: number) => void;
+    showAll: () => void;
+    hideAll: () => void;
+    navigate: (index: number, animated?: boolean) => void;
+};
+export {};
+//# sourceMappingURL=useSlideoverController.d.ts.map

package/dist/components/navigation/slideover/useSlideoverController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSlideoverController.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/slideover/useSlideoverController.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,GAAG,EAAY,MAAM,KAAK,CAAC;AAMzC,UAAU,IAAI;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,GAAG,CAAC;IACf,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,sBAAsB,GAAI,OAAO,IAAI,EAAE,EAAE,aAAa,MAAM;;;sBAqC9C,MAAM;sBAiDN,MAAM;wBAyCJ,MAAM;;;sBA6HR,MAAM,aAAY,OAAO;CAqDnD,CAAC"}

package/dist/components/navigation/slideover/useSlideoverController.js

@@ -0,0 +1,267 @@
+import { ref, computed } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+gsap.registerPlugin(Flip);
+export const useSlideoverController = (panes, componentId) => {
+    // State to track visibility of panes
+    const visiblePanes = ref(panes.map(() => false));
+    // Track the current active pane index
+    const currentPaneIndex = computed(() => {
+        // Find the highest index that's visible
+        for (let i = visiblePanes.value.length - 1; i >= 0; i--) {
+            if (visiblePanes.value[i]) {
+                return i;
+            }
+        }
+        return -1;
+    });
+    // Helper functions to get unique element IDs
+    const getOffscreenId = () => `${componentId}-offscreen`;
+    const getOnscreenId = () => `${componentId}-onscreen`;
+    const getOverlayId = () => `${componentId}-overlay`;
+    const getDarkenId = () => `${componentId}-darken`;
+    const getPaneId = (index) => `${componentId}-pane-${index}`;
+    // Animate darken overlay
+    const animateDarken = (show) => {
+        const darken = document.getElementById(getDarkenId());
+        if (!darken)
+            return;
+        if (show) {
+            darken.style.pointerEvents = "all";
+            gsap.to(darken, { duration: 0.5, opacity: 1, ease: "circ.outOut" });
+        }
+        else {
+            darken.style.pointerEvents = "none";
+            gsap.to(darken, { duration: 0.5, opacity: 0, ease: "circ.outOut" });
+        }
+    };
+    // Show a specific pane and all panes after it
+    const showPane = (index) => {
+        const offscreen = document.getElementById(getOffscreenId());
+        const overlay = document.getElementById(getOverlayId());
+        if (!offscreen || !overlay) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        // Don't show if it's the main pane (last one)
+        if (index >= panes.length - 1)
+            return;
+        // Get state for animation
+        const paneElements = panes
+            .slice(0, -1) // Exclude main pane
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Show all panes from the selected index onward
+        for (let i = 0; i < panes.length - 1; i++) {
+            const pane = document.getElementById(getPaneId(i));
+            if (pane) {
+                if (i >= index) {
+                    visiblePanes.value[i] = true;
+                    pane.parentNode?.removeChild(pane);
+                    overlay.appendChild(pane);
+                }
+                else {
+                    visiblePanes.value[i] = false;
+                    pane.parentNode?.removeChild(pane);
+                    offscreen.appendChild(pane);
+                }
+            }
+        }
+        // Animate
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+        // Show darken overlay if any panes are visible
+        animateDarken(true);
+    };
+    // Hide a specific pane and all panes before it
+    const hidePane = (index) => {
+        const offscreen = document.getElementById(getOffscreenId());
+        const overlay = document.getElementById(getOverlayId());
+        if (!offscreen || !overlay) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        // Get state for animation
+        const paneElements = panes
+            .slice(0, -1)
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Hide all panes up to and including the specified index
+        for (let i = 0; i <= index && i < panes.length - 1; i++) {
+            const pane = document.getElementById(getPaneId(i));
+            if (pane) {
+                visiblePanes.value[i] = false;
+                pane.parentNode?.removeChild(pane);
+                offscreen.appendChild(pane);
+            }
+        }
+        // Animate
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+        // Hide darken if no panes are visible
+        const anyVisible = visiblePanes.value.slice(0, -1).some((v) => v);
+        animateDarken(anyVisible);
+    };
+    // Toggle a pane at a specific index
+    const togglePane = (index) => {
+        if (index <= 0 || index >= panes.length - 1)
+            return;
+        const offscreen = document.getElementById(getOffscreenId());
+        const overlay = document.getElementById(getOverlayId());
+        if (!offscreen || !overlay) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        // Get state for animation
+        const paneElements = panes
+            .slice(0, -1)
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // If the previous pane is visible, hide all before this one
+        if (visiblePanes.value[index - 1]) {
+            for (let i = 0; i < index; i++) {
+                const pane = document.getElementById(getPaneId(i));
+                if (pane) {
+                    visiblePanes.value[i] = false;
+                    pane.parentNode?.removeChild(pane);
+                    offscreen.appendChild(pane);
+                }
+            }
+        }
+        else {
+            // Show only the pane immediately before the clicked pane
+            const pane = document.getElementById(getPaneId(index - 1));
+            if (pane) {
+                visiblePanes.value[index - 1] = true;
+                pane.parentNode?.removeChild(pane);
+                overlay.insertBefore(pane, overlay.children[index - 1] || null);
+            }
+        }
+        // Animate
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+        animateDarken(true);
+    };
+    // Show all secondary panes
+    const showAll = () => {
+        const offscreen = document.getElementById(getOffscreenId());
+        const overlay = document.getElementById(getOverlayId());
+        if (!offscreen || !overlay) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        const paneElements = panes
+            .slice(0, -1)
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Move all secondary panes to overlay
+        for (let i = 0; i < panes.length - 1; i++) {
+            const pane = document.getElementById(getPaneId(i));
+            if (pane) {
+                visiblePanes.value[i] = true;
+                pane.parentNode?.removeChild(pane);
+                overlay.appendChild(pane);
+            }
+        }
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+        animateDarken(true);
+    };
+    // Hide all secondary panes
+    const hideAll = () => {
+        const offscreen = document.getElementById(getOffscreenId());
+        const overlay = document.getElementById(getOverlayId());
+        if (!offscreen || !overlay) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        const paneElements = panes
+            .slice(0, -1)
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Move all panes from overlay to offscreen
+        for (let i = 0; i < panes.length - 1; i++) {
+            const pane = document.getElementById(getPaneId(i));
+            if (pane) {
+                visiblePanes.value[i] = false;
+                pane.parentNode?.removeChild(pane);
+                offscreen.appendChild(pane);
+            }
+        }
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+        animateDarken(false);
+    };
+    // Navigate to a specific pane (show it and hide others)
+    const navigate = (index, animated = true) => {
+        if (index < 0 || index >= panes.length)
+            return;
+        // If navigating to the main pane, hide all
+        if (index === panes.length - 1) {
+            hideAll();
+            return;
+        }
+        // If not animated, directly manipulate DOM without GSAP
+        if (!animated) {
+            const offscreen = document.getElementById(getOffscreenId());
+            const overlay = document.getElementById(getOverlayId());
+            if (!offscreen || !overlay)
+                return;
+            // Reset all panes
+            for (let i = 0; i < panes.length - 1; i++) {
+                const pane = document.getElementById(getPaneId(i));
+                if (pane) {
+                    pane.parentNode?.removeChild(pane);
+                    if (i === index) {
+                        visiblePanes.value[i] = true;
+                        overlay.appendChild(pane);
+                    }
+                    else {
+                        visiblePanes.value[i] = false;
+                        offscreen.appendChild(pane);
+                    }
+                }
+            }
+            // Set darken state instantly
+            const darken = document.getElementById(getDarkenId());
+            if (darken) {
+                darken.style.opacity = "1";
+                darken.style.pointerEvents = "all";
+            }
+        }
+        else {
+            // Otherwise show the requested pane with animation
+            showPane(index);
+        }
+    };
+    return {
+        visiblePanes,
+        currentPaneIndex,
+        showPane,
+        hidePane,
+        togglePane,
+        showAll,
+        hideAll,
+        navigate,
+    };
+};

package/dist/components/navigation/splitview/useSplitViewController.d.ts

@@ -0,0 +1,20 @@
+import { Ref } from "vue";
+import { Pane } from "../types";
+export declare const useSplitViewController: (panes: Pane[] | Ref<Pane[]>, componentId: string) => {
+    visiblePanes: Ref<boolean[], boolean[]>;
+    currentPaneIndex: import("vue").ComputedRef<number>;
+    lastVisibilityEvent: Ref<{
+        type: "show" | "hide";
+        index: number;
+    } | null, {
+        type: "show" | "hide";
+        index: number;
+    } | null>;
+    showPane: (index: number) => void;
+    hidePane: (index: number) => void;
+    togglePane: (index: number) => void;
+    showAll: () => void;
+    hideAll: () => void;
+    navigate: (index: number, animated?: boolean) => void;
+};
+//# sourceMappingURL=useSplitViewController.d.ts.map

package/dist/components/navigation/splitview/useSplitViewController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitViewController.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/splitview/useSplitViewController.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,GAAG,EAA0B,MAAM,KAAK,CAAC;AAGvD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAIhC,eAAO,MAAM,sBAAsB,GACjC,OAAO,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,EAAE,CAAC,EAC3B,aAAa,MAAM;;;;cAUX,MAAM,GAAG,MAAM;eACd,MAAM;;cADP,MAAM,GAAG,MAAM;eACd,MAAM;;sBA2BU,MAAM;sBAqDN,MAAM;wBAqCJ,MAAM;;;sBAwIR,MAAM,aAAY,OAAO;CAiHnD,CAAC"}