@umbra.ui/core 0.1.0

package/dist/components/navigation/adaptive/useAdaptiveLayout.d.ts

@@ -0,0 +1,27 @@
+import { type Ref, type ComputedRef } from "vue";
+import type { View, InternalView } from "./types";
+import type { useResponsiveContainer } from "./useContainerMonitor";
+type ResponsiveMonitor = ReturnType<typeof useResponsiveContainer>;
+interface AdaptiveLayoutState {
+    views: Ref<InternalView[]>;
+    offScreenViewsLeading: ComputedRef<InternalView[]>;
+    offScreenViewsTrailing: ComputedRef<InternalView[]>;
+    onScreenViews: ComputedRef<InternalView[]>;
+    overlayViews: ComputedRef<InternalView[]>;
+    monitor: Ref<ResponsiveMonitor | null>;
+    methods: {
+        add: (view: View, animated?: boolean) => void;
+        remove: (id: string, animated?: boolean) => void;
+        replace: (id: string, view: View, animated?: boolean) => void;
+        show: (id: string, animated?: boolean) => void;
+        hide: (id: string, animated?: boolean) => void;
+        push: (id: string, animated?: boolean) => void;
+        pop: (id: string, animated?: boolean) => void;
+        setMethods: (methods: any) => void;
+        setMonitor: (monitor: ResponsiveMonitor) => void;
+    };
+    initialized: Ref<boolean>;
+}
+export declare const useAdaptiveLayoutState: (key?: string | symbol) => AdaptiveLayoutState;
+export {};
+//# sourceMappingURL=useAdaptiveLayout.d.ts.map

package/dist/components/navigation/adaptive/useAdaptiveLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAdaptiveLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/useAdaptiveLayout.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,GAAG,EACR,KAAK,WAAW,EACjB,MAAM,KAAK,CAAC;AACb,OAAO,KAAK,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAClD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAEpE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAEnE,UAAU,mBAAmB;IAC3B,KAAK,EAAE,GAAG,CAAC,YAAY,EAAE,CAAC,CAAC;IAC3B,qBAAqB,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC;IACnD,sBAAsB,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC;IACpD,aAAa,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC;IAC3C,YAAY,EAAE,WAAW,CAAC,YAAY,EAAE,CAAC,CAAC;IAC1C,OAAO,EAAE,GAAG,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IACvC,OAAO,EAAE;QACP,GAAG,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QAC9C,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QACjD,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QAC9D,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QAC/C,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QAC/C,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QAC/C,GAAG,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;QAC9C,UAAU,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,IAAI,CAAC;QACnC,UAAU,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC;KAClD,CAAC;IACF,WAAW,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;CAC3B;AAID,eAAO,MAAM,sBAAsB,GAAI,MAAK,MAAM,GAAG,MAAiB,wBAoDrE,CAAC"}

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

@@ -0,0 +1,40 @@
+import { ref, computed, reactive, shallowRef, } from "vue";
+const layoutStates = new Map();
+export const useAdaptiveLayoutState = (key = Symbol()) => {
+    if (!layoutStates.has(key)) {
+        const views = ref([]);
+        const initialized = ref(false);
+        const monitor = shallowRef(null);
+        const offScreenViewsLeading = computed(() => views.value.filter((view) => view.location === "leading"));
+        const offScreenViewsTrailing = computed(() => views.value.filter((view) => view.location === "trailing"));
+        const onScreenViews = computed(() => views.value.filter((view) => view.location === "onscreen"));
+        const overlayViews = computed(() => views.value.filter((view) => view.location === "overlay"));
+        const methods = reactive({
+            add: () => console.warn("Layout not initialized"),
+            remove: () => console.warn("Layout not initialized"),
+            replace: () => console.warn("Layout not initialized"),
+            show: () => console.warn("Layout not initialized"),
+            hide: () => console.warn("Layout not initialized"),
+            push: () => console.warn("Layout not initialized"),
+            pop: () => console.warn("Layout not initialized"),
+            setMethods: (newMethods) => {
+                Object.assign(methods, newMethods);
+                initialized.value = true;
+            },
+            setMonitor: (newMonitor) => {
+                monitor.value = newMonitor;
+            },
+        });
+        layoutStates.set(key, {
+            views,
+            offScreenViewsLeading,
+            offScreenViewsTrailing,
+            onScreenViews,
+            overlayViews,
+            monitor,
+            methods,
+            initialized,
+        });
+    }
+    return layoutStates.get(key);
+};

package/dist/components/navigation/adaptive/useBreakpoints.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from "vue";
+import { InternalView } from "./types";
+export declare const useBreakpoints: (views: Ref<InternalView[]>) => {
+    setupForBreakpoint: (oldBreakpoint: string | null, currentBreakpoint: string | null) => void;
+};
+//# sourceMappingURL=useBreakpoints.d.ts.map

package/dist/components/navigation/adaptive/useBreakpoints.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBreakpoints.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/useBreakpoints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,cAAc,GAAI,OAAO,GAAG,CAAC,YAAY,EAAE,CAAC;wCAEtC,MAAM,GAAG,IAAI,qBACT,MAAM,GAAG,IAAI;CAkCnC,CAAC"}

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

@@ -0,0 +1,37 @@
+export const useBreakpoints = (views) => {
+    const setupForBreakpoint = (oldBreakpoint, currentBreakpoint) => {
+        switch (currentBreakpoint) {
+            case "mobile":
+                // Mark all views except the 1st one in location 'trailing'
+                views.value.forEach((view, index) => {
+                    if (index === 0) {
+                        view.location = "onscreen";
+                    }
+                    else {
+                        view.location = "trailing";
+                    }
+                });
+                break;
+            case "tablet":
+                // Mark all views except the last one in location 'leading'
+                views.value.forEach((view, index) => {
+                    if (index === views.value.length - 1) {
+                        view.location = "onscreen";
+                    }
+                    else {
+                        view.location = "leading";
+                    }
+                });
+                break;
+            case "desktop":
+                // Mark all views for location 'onscreen'
+                views.value.forEach((view) => {
+                    view.location = "onscreen";
+                });
+                break;
+        }
+    };
+    return {
+        setupForBreakpoint,
+    };
+};

package/dist/components/navigation/adaptive/useContainerMonitor.d.ts

@@ -0,0 +1,93 @@
+import { type Ref } from "vue";
+export declare const DEFAULT_BREAKPOINTS: {
+    readonly mobile: {
+        readonly min: 0;
+        readonly max: 639;
+    };
+    readonly tablet: {
+        readonly min: 640;
+        readonly max: 1023;
+    };
+    readonly desktop: {
+        readonly min: 1024;
+        readonly max: number;
+    };
+};
+export type BreakpointName = string;
+export interface BreakpointRange {
+    min: number;
+    max: number;
+}
+export interface BreakpointConfig {
+    [key: BreakpointName]: BreakpointRange;
+}
+export interface ContainerMonitorOptions {
+    breakpoints?: BreakpointConfig;
+    debounceMs?: number;
+}
+export interface ContainerDimensions {
+    width: number;
+    height: number;
+}
+export declare const useContainerMonitor: (elementRef: Ref<HTMLElement | undefined>, options?: ContainerMonitorOptions) => {
+    isBreakpoint: (name: BreakpointName) => boolean;
+    isBreakpointOrAbove: (name: BreakpointName) => boolean;
+    isBreakpointOrBelow: (name: BreakpointName) => boolean;
+    isBetweenBreakpoints: (min: BreakpointName, max: BreakpointName) => boolean;
+    restart: () => void;
+    breakpoints: {
+        readonly mobile: {
+            readonly min: 0;
+            readonly max: 639;
+        };
+        readonly tablet: {
+            readonly min: 640;
+            readonly max: 1023;
+        };
+        readonly desktop: {
+            readonly min: 1024;
+            readonly max: number;
+        };
+    } | BreakpointConfig;
+    dimensions: Ref<{
+        width: number;
+        height: number;
+    }, ContainerDimensions | {
+        width: number;
+        height: number;
+    }>;
+    currentBreakpoint: Ref<string | null, string | null>;
+    previousBreakpoint: Ref<string | null, string | null>;
+};
+export declare const useResponsiveContainer: (elementRef: Ref<HTMLElement | undefined>, customBreakpoints?: Partial<BreakpointConfig>) => {
+    isBreakpoint: (name: BreakpointName) => boolean;
+    isBreakpointOrAbove: (name: BreakpointName) => boolean;
+    isBreakpointOrBelow: (name: BreakpointName) => boolean;
+    isBetweenBreakpoints: (min: BreakpointName, max: BreakpointName) => boolean;
+    restart: () => void;
+    breakpoints: {
+        readonly mobile: {
+            readonly min: 0;
+            readonly max: 639;
+        };
+        readonly tablet: {
+            readonly min: 640;
+            readonly max: 1023;
+        };
+        readonly desktop: {
+            readonly min: 1024;
+            readonly max: number;
+        };
+    } | BreakpointConfig;
+    dimensions: Ref<{
+        width: number;
+        height: number;
+    }, ContainerDimensions | {
+        width: number;
+        height: number;
+    }>;
+    currentBreakpoint: Ref<string | null, string | null>;
+    previousBreakpoint: Ref<string | null, string | null>;
+};
+export { DEFAULT_BREAKPOINTS as breakpoints };
+//# sourceMappingURL=useContainerMonitor.d.ts.map

package/dist/components/navigation/adaptive/useContainerMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContainerMonitor.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/useContainerMonitor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAGtE,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;CAItB,CAAC;AAGX,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC;AAEpC,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,cAAc,GAAG,eAAe,CAAC;CACxC;AAED,MAAM,WAAW,uBAAuB;IACtC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAgBD,eAAO,MAAM,mBAAmB,GAC9B,YAAY,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,EACxC,UAAS,uBAA4B;yBAyBT,cAAc,KAAG,OAAO;gCAIjB,cAAc,KAAG,OAAO;gCAUxB,cAAc,KAAG,OAAO;gCAWpD,cAAc,OACd,cAAc,KAClB,OAAO;;;;;;;;;;;;;;;;;eAxEH,MAAM;gBACL,MAAM;;eADP,MAAM;gBACL,MAAM;;;;CA0Kf,CAAC;AAGF,eAAO,MAAM,sBAAsB,GACjC,YAAY,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,EACxC,oBAAoB,OAAO,CAAC,gBAAgB,CAAC;yBAnIjB,cAAc,KAAG,OAAO;gCAIjB,cAAc,KAAG,OAAO;gCAUxB,cAAc,KAAG,OAAO;gCAWpD,cAAc,OACd,cAAc,KAClB,OAAO;;;;;;;;;;;;;;;;;eAxEH,MAAM;gBACL,MAAM;;eADP,MAAM;gBACL,MAAM;;;;CAsLf,CAAC;AAGF,OAAO,EAAE,mBAAmB,IAAI,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,145 @@
+import { ref, computed, onMounted, onUnmounted } from "vue";
+// Default breakpoint configuration
+export const DEFAULT_BREAKPOINTS = {
+    mobile: { min: 0, max: 639 },
+    tablet: { min: 640, max: 1023 },
+    desktop: { min: 1024, max: Infinity },
+};
+// Utility function to find the current breakpoint
+const findCurrentBreakpoint = (width, breakpoints) => {
+    for (const [name, range] of Object.entries(breakpoints)) {
+        if (width >= range.min && width <= range.max) {
+            return name;
+        }
+    }
+    return null;
+};
+// Main composable
+export const useContainerMonitor = (elementRef, options = {}) => {
+    const { breakpoints = DEFAULT_BREAKPOINTS, debounceMs = 16, // ~60fps
+     } = options;
+    // Reactive state
+    const dimensions = ref({ width: 0, height: 0 });
+    const currentBreakpoint = ref(null);
+    const previousBreakpoint = ref(null);
+    // Computed properties for easy breakpoint checking
+    const breakpointQueries = computed(() => {
+        const queries = {};
+        Object.keys(breakpoints).forEach((name) => {
+            queries[`is${name.charAt(0).toUpperCase() + name.slice(1)}`] =
+                currentBreakpoint.value === name;
+        });
+        return queries;
+    });
+    // Utility functions for responsive checks
+    const isBreakpoint = (name) => {
+        return currentBreakpoint.value === name;
+    };
+    const isBreakpointOrAbove = (name) => {
+        if (!currentBreakpoint.value)
+            return false;
+        const currentWidth = dimensions.value.width;
+        const targetRange = breakpoints[name];
+        if (!targetRange)
+            return false;
+        return currentWidth >= targetRange.min;
+    };
+    const isBreakpointOrBelow = (name) => {
+        if (!currentBreakpoint.value)
+            return false;
+        const currentWidth = dimensions.value.width;
+        const targetRange = breakpoints[name];
+        if (!targetRange)
+            return false;
+        return currentWidth <= targetRange.max;
+    };
+    const isBetweenBreakpoints = (min, max) => {
+        const currentWidth = dimensions.value.width;
+        const minRange = breakpoints[min];
+        const maxRange = breakpoints[max];
+        if (!minRange || !maxRange)
+            return false;
+        return currentWidth >= minRange.min && currentWidth <= maxRange.max;
+    };
+    // Resize observer and debouncing
+    let resizeObserver = null;
+    let debounceTimer = null;
+    const updateDimensions = (entries) => {
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+        }
+        debounceTimer = window.setTimeout(() => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const { width, height } = entry.contentRect;
+            // Update dimensions
+            dimensions.value = { width, height };
+            // Update breakpoint
+            const newBreakpoint = findCurrentBreakpoint(width, breakpoints);
+            if (newBreakpoint !== currentBreakpoint.value) {
+                previousBreakpoint.value = currentBreakpoint.value;
+                currentBreakpoint.value = newBreakpoint;
+            }
+        }, debounceMs);
+    };
+    // Initialize observer
+    const startObserver = () => {
+        if (!elementRef.value || resizeObserver)
+            return;
+        resizeObserver = new ResizeObserver(updateDimensions);
+        resizeObserver.observe(elementRef.value);
+        // Get initial dimensions
+        const rect = elementRef.value.getBoundingClientRect();
+        dimensions.value = { width: rect.width, height: rect.height };
+        currentBreakpoint.value = findCurrentBreakpoint(rect.width, breakpoints);
+    };
+    const stopObserver = () => {
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            resizeObserver = null;
+        }
+        if (debounceTimer) {
+            clearTimeout(debounceTimer);
+            debounceTimer = null;
+        }
+    };
+    // Lifecycle hooks
+    onMounted(() => {
+        startObserver();
+    });
+    onUnmounted(() => {
+        stopObserver();
+    });
+    // Watch for element ref changes
+    const restart = () => {
+        stopObserver();
+        startObserver();
+    };
+    return {
+        // Reactive state
+        dimensions,
+        currentBreakpoint,
+        previousBreakpoint,
+        // Computed breakpoint queries (isTablet, isMobile, etc.)
+        ...breakpointQueries.value,
+        // Utility functions
+        isBreakpoint,
+        isBreakpointOrAbove,
+        isBreakpointOrBelow,
+        isBetweenBreakpoints,
+        // Control functions
+        restart,
+        // Configuration
+        breakpoints,
+    };
+};
+// Convenience composable for common use cases
+export const useResponsiveContainer = (elementRef, customBreakpoints) => {
+    const breakpoints = customBreakpoints
+        ? { ...DEFAULT_BREAKPOINTS, ...customBreakpoints }
+        : DEFAULT_BREAKPOINTS;
+    return useContainerMonitor(elementRef, { breakpoints });
+};
+// Export default breakpoints for convenience
+export { DEFAULT_BREAKPOINTS as breakpoints };

package/dist/components/navigation/adaptive/useViewAnimation.d.ts

@@ -0,0 +1,31 @@
+import { type Ref } from "vue";
+import { InternalView } from "./types";
+export declare const useViewAnimation: (views: Ref<InternalView[]>, instanceKey: string, containerDimensions: Ref<{
+    width: number;
+    height: number;
+}>, padding: string, gap: string) => {
+    splitViewShow: (id: string) => Promise<void>;
+    splitViewHide: (id: string) => Promise<void>;
+    splitViewPush: (id?: string | null) => Promise<void>;
+    splitViewPop: (id?: string | null) => Promise<void>;
+    slideoverShow: (id: string) => Promise<void>;
+    slideoverHide: () => Promise<void>;
+    slideoverPush: (id?: string | null) => Promise<void>;
+    slideoverPop: (id?: string | null) => Promise<void>;
+    navstackShow: (id: string) => Promise<void>;
+    navstackPush: () => Promise<void>;
+    navstackPop: (id: string) => Promise<void>;
+    getOffscreenLeadingId: () => string;
+    getOffscreenTrailingId: () => string;
+    getOnscreenId: () => string;
+    getViewId: (view: InternalView) => string;
+    getDarkenId: () => string;
+    getOverlayId: () => string;
+    getViewElements: () => HTMLElement[];
+    isOnscreen: (view: InternalView) => boolean;
+    hasPrecedingViews: (id: string, location: string) => boolean;
+    isOverlayOpen: Ref<boolean, boolean>;
+    getSingleViewBefore: (id: string) => InternalView | null;
+    getSingleViewAfter: (id: string) => InternalView | null;
+};
+//# sourceMappingURL=useViewAnimation.d.ts.map

package/dist/components/navigation/adaptive/useViewAnimation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useViewAnimation.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/adaptive/useViewAnimation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAcvC,eAAO,MAAM,gBAAgB,GAC3B,OAAO,GAAG,CAAC,YAAY,EAAE,CAAC,EAC1B,aAAa,MAAM,EACnB,qBAAqB,GAAG,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,EAC3D,SAAS,MAAM,EACf,KAAK,MAAM;wBAuNsB,MAAM;wBAMN,MAAM;yBAUN,MAAM,GAAG,IAAI;wBAgBd,MAAM,GAAG,IAAI;wBAwLZ,MAAM;;yBA0CN,MAAM,GAAG,IAAI;wBAkDd,MAAM,GAAG,IAAI;uBAgEb,MAAM;;sBAYP,MAAM;;;;sBA3iBZ,YAAY;;;2BAIT,WAAW,EAAE;uBA6Ff,YAAY;4BAIP,MAAM,YAAY,MAAM;;8BAhCtB,MAAM,KAAG,YAAY,GAAG,IAAI;6BAU7B,MAAM,KAAG,YAAY,GAAG,IAAI;CA+jB7D,CAAC"}