@umbra.ui/core 0.1.0

package/src/components/navigation/adaptive/types.ts

@@ -0,0 +1,19 @@
+import { Component, markRaw } from "vue";
+
+export interface View {
+  id: string;
+  component: Component | ReturnType<typeof markRaw<Component>>;
+  props?: Record<string, unknown>;
+  minWidth?: number;
+  maxWidth?: number;
+  currentWidth?: number;
+  label?: string;
+}
+
+export type ViewLayout = "splitview" | "slideover" | "navstack" | "adaptive";
+
+export type ViewLocation = "leading" | "trailing" | "onscreen" | "overlay";
+
+export interface InternalView extends View {
+  location: ViewLocation;
+}

package/src/components/navigation/adaptive/useAdaptiveLayout.ts

@@ -0,0 +1,89 @@
+import {
+  ref,
+  computed,
+  reactive,
+  shallowRef,
+  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>;
+}
+
+const layoutStates = new Map<string | symbol, AdaptiveLayoutState>();
+
+export const useAdaptiveLayoutState = (key: string | symbol = Symbol()) => {
+  if (!layoutStates.has(key)) {
+    const views = ref<InternalView[]>([]);
+    const initialized = ref(false);
+    const monitor = shallowRef<ResponsiveMonitor | null>(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: any) => {
+        Object.assign(methods, newMethods);
+        initialized.value = true;
+      },
+      setMonitor: (newMonitor: ResponsiveMonitor) => {
+        monitor.value = newMonitor;
+      },
+    });
+
+    layoutStates.set(key, {
+      views,
+      offScreenViewsLeading,
+      offScreenViewsTrailing,
+      onScreenViews,
+      overlayViews,
+      monitor,
+      methods,
+      initialized,
+    });
+  }
+
+  return layoutStates.get(key)!;
+};

package/src/components/navigation/adaptive/useBreakpoints.ts

@@ -0,0 +1,41 @@
+import { Ref } from "vue";
+import { InternalView } from "./types";
+
+export const useBreakpoints = (views: Ref<InternalView[]>) => {
+  const setupForBreakpoint = (
+    oldBreakpoint: string | null,
+    currentBreakpoint: string | null
+  ) => {
+    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/src/components/navigation/adaptive/useContainerMonitor.ts

@@ -0,0 +1,214 @@
+import { ref, computed, onMounted, onUnmounted, type Ref } from "vue";
+
+// Default breakpoint configuration
+export const DEFAULT_BREAKPOINTS = {
+  mobile: { min: 0, max: 639 },
+  tablet: { min: 640, max: 1023 },
+  desktop: { min: 1024, max: Infinity },
+} as const;
+
+// Types
+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;
+}
+
+// Utility function to find the current breakpoint
+const findCurrentBreakpoint = (
+  width: number,
+  breakpoints: BreakpointConfig
+): BreakpointName | null => {
+  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: Ref<HTMLElement | undefined>,
+  options: ContainerMonitorOptions = {}
+) => {
+  const {
+    breakpoints = DEFAULT_BREAKPOINTS,
+    debounceMs = 16, // ~60fps
+  } = options;
+
+  // Reactive state
+  const dimensions = ref<ContainerDimensions>({ width: 0, height: 0 });
+  const currentBreakpoint = ref<BreakpointName | null>(null);
+  const previousBreakpoint = ref<BreakpointName | null>(null);
+
+  // Computed properties for easy breakpoint checking
+  const breakpointQueries = computed(() => {
+    const queries: Record<string, boolean> = {};
+
+    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: BreakpointName): boolean => {
+    return currentBreakpoint.value === name;
+  };
+
+  const isBreakpointOrAbove = (name: BreakpointName): boolean => {
+    if (!currentBreakpoint.value) return false;
+
+    const currentWidth = dimensions.value.width;
+    const targetRange = breakpoints[name as keyof typeof breakpoints];
+    if (!targetRange) return false;
+
+    return currentWidth >= targetRange.min;
+  };
+
+  const isBreakpointOrBelow = (name: BreakpointName): boolean => {
+    if (!currentBreakpoint.value) return false;
+
+    const currentWidth = dimensions.value.width;
+    const targetRange = breakpoints[name as keyof typeof breakpoints];
+    if (!targetRange) return false;
+
+    return currentWidth <= targetRange.max;
+  };
+
+  const isBetweenBreakpoints = (
+    min: BreakpointName,
+    max: BreakpointName
+  ): boolean => {
+    const currentWidth = dimensions.value.width;
+    const minRange = breakpoints[min as keyof typeof breakpoints];
+    const maxRange = breakpoints[max as keyof typeof breakpoints];
+
+    if (!minRange || !maxRange) return false;
+
+    return currentWidth >= minRange.min && currentWidth <= maxRange.max;
+  };
+
+  // Resize observer and debouncing
+  let resizeObserver: ResizeObserver | null = null;
+  let debounceTimer: number | null = null;
+
+  const updateDimensions = (entries: ResizeObserverEntry[]) => {
+    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: Ref<HTMLElement | undefined>,
+  customBreakpoints?: Partial<BreakpointConfig>
+) => {
+  const breakpoints = customBreakpoints
+    ? { ...DEFAULT_BREAKPOINTS, ...customBreakpoints }
+    : DEFAULT_BREAKPOINTS;
+
+  return useContainerMonitor(elementRef, { breakpoints });
+};
+
+// Export default breakpoints for convenience
+export { DEFAULT_BREAKPOINTS as breakpoints };