@umbra.ui/core 0.1.10 → 0.1.12

package/dist/components/controls/Dropdown/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/controls/SegmentedControl/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/dialogs/Alert/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/dialogs/Toast/{types.js → types.mjs}

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastPresets = void 0;
 // Preset configurations for common scenarios
-exports.ToastPresets = {
+export const ToastPresets = {
     quick: { duration: 2000 },
     persistent: { duration: 0, dismissible: true },
     important: {

package/dist/components/dialogs/Toast/{useToast.js → useToast.mjs}

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToast = exports.ToastPlugin = void 0;
 // useToast.ts
-const vue_1 = require("vue");
+import { ref, computed, nextTick, inject } from "vue";
 const TOAST_INJECTION_KEY = Symbol("toast");
 class ToastManager {
     constructor() {
-        this.toasts = (0, vue_1.ref)([]);
+        this.toasts = ref([]);
         this.toastIdCounter = 0;
-        this.currentToastStyle = (0, vue_1.ref)("bar");
+        this.currentToastStyle = ref("bar");
         // Expose reactive toasts
-        this.toastList = (0, vue_1.computed)(() => this.toasts.value);
+        this.toastList = computed(() => this.toasts.value);
         // Expose reactive toast style
-        this.toastStyle = (0, vue_1.computed)(() => this.currentToastStyle.value);
+        this.toastStyle = computed(() => this.currentToastStyle.value);
         // Convenience methods
         this.showSuccess = (title, description, options) => this.addToast({ title, description, toastType: "success", ...options });
         this.showError = (title, description, options) => this.addToast({ title, description, toastType: "error", ...options });
@@ -38,7 +35,7 @@ class ToastManager {
         };
         this.toasts.value.push(toast);
         // Trigger show animation on next tick
-        await (0, vue_1.nextTick)();
+        await nextTick();
         const toastInstance = this.toasts.value.find((t) => t.id === id);
         if (toastInstance) {
             toastInstance.show = true;
@@ -61,7 +58,7 @@ class ToastManager {
 // Singleton instance
 let toastManager = null;
 // Plugin for Vue app installation
-exports.ToastPlugin = {
+export const ToastPlugin = {
     install(app) {
         if (!toastManager) {
             toastManager = new ToastManager();
@@ -70,9 +67,9 @@ exports.ToastPlugin = {
     },
 };
 // Composable for components
-const useToast = () => {
+export const useToast = () => {
     // Try to inject first (if using plugin)
-    const injected = (0, vue_1.inject)(TOAST_INJECTION_KEY, null);
+    const injected = inject(TOAST_INJECTION_KEY, null);
     // Fall back to singleton if not using plugin
     if (!toastManager && !injected) {
         toastManager = new ToastManager();
@@ -91,4 +88,3 @@ const useToast = () => {
         showInfo: manager.showInfo.bind(manager),
     };
 };
-exports.useToast = useToast;

package/dist/components/indicators/Tooltip/{tooltip.js → tooltip.mjs}

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.vTooltip = void 0;
-const useTooltip_1 = require("./useTooltip");
-exports.vTooltip = {
+import { useTooltip } from "./useTooltip";
+export const vTooltip = {
     mounted(el, binding) {
         const config = typeof binding.value === "string"
             ? { content: binding.value }
             : binding.value;
         if (config && config.content) {
-            const { bindTooltip } = (0, useTooltip_1.useTooltip)(config);
+            const { bindTooltip } = useTooltip(config);
             el._tooltipCleanup = bindTooltip(el);
         }
     },
@@ -23,7 +20,7 @@ exports.vTooltip = {
             ? { content: binding.value }
             : binding.value;
         if (config && config.content) {
-            const { bindTooltip } = (0, useTooltip_1.useTooltip)(config);
+            const { bindTooltip } = useTooltip(config);
             el._tooltipCleanup = bindTooltip(el);
         }
     },

package/dist/components/indicators/Tooltip/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/indicators/Tooltip/{useTooltip.js → useTooltip.mjs}

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTooltip = exports.useTooltipProvider = void 0;
-const vue_1 = require("vue");
-const tooltipState = (0, vue_1.reactive)({
+import { reactive } from "vue";
+const tooltipState = reactive({
     isVisible: false,
     content: "",
     targetElement: null,
     placement: "top",
     offset: 2,
 });
-const useTooltipProvider = () => {
+export const useTooltipProvider = () => {
     const showTooltip = async (element, config) => {
         tooltipState.content = config.content;
         tooltipState.placement = config.placement || "top";
@@ -28,9 +25,8 @@ const useTooltipProvider = () => {
         hideTooltip,
     };
 };
-exports.useTooltipProvider = useTooltipProvider;
-const useTooltip = (config) => {
-    const { showTooltip, hideTooltip } = (0, exports.useTooltipProvider)();
+export const useTooltip = (config) => {
+    const { showTooltip, hideTooltip } = useTooltipProvider();
     const bindTooltip = (element) => {
         // Handle Vue component instances
         let actualElement = element;
@@ -59,4 +55,3 @@ const useTooltip = (config) => {
         hideTooltip,
     };
 };
-exports.useTooltip = useTooltip;

package/dist/components/inputs/Tags/{tag-bar-styles.js → tag-bar-styles.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCustomColor = exports.getTagBarStyle = void 0;
-require("./theme.css");
+import "./theme.css";
 // Base style templates for tag bar types
 const baseStyles = {
     default: {
@@ -231,7 +228,6 @@ const isCustomColor = (barStyle) => {
     const predefinedStyles = ["primary", "secondary", "tertiary", "quaternary"];
     return !predefinedStyles.includes(barStyle);
 };
-exports.isCustomColor = isCustomColor;
 // Generate style for custom colors
 const generateCustomColorStyle = (barType, customColor) => {
     const baseStyle = baseStyles[barType] || baseStyles.default;
@@ -313,4 +309,5 @@ const getTagBarStyle = (type = "default", style = "primary") => {
         };
     }
 };
-exports.getTagBarStyle = getTagBarStyle;
+// Export for use in your component
+export { getTagBarStyle, isCustomColor };

package/dist/components/inputs/Tags/{types.js → types.mjs}

@@ -1,48 +1,9 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagTheme = exports.TAG_STYLE_PRESETS = exports.COLOR_PRESETS = exports.createStyledTag = exports.generateTagStyle = exports.getColorMode = void 0;
-const tinycolor2_1 = __importDefault(require("tinycolor2"));
-const colors = __importStar(require("@umbra.ui/colors"));
-const theme_1 = require("../../../theme");
+import tinycolor from "tinycolor2";
+import * as colors from "@umbra.ui/colors";
+import { getThemeConfig } from "../../../theme";
 // Color mode detection function that uses theme or falls back to system
-const getColorMode = () => {
-    const config = (0, theme_1.getThemeConfig)();
+export const getColorMode = () => {
+    const config = getThemeConfig();
     // If a theme is provided, use its color mode
     if (config?.customThemeColorMode) {
         return config.customThemeColorMode;
@@ -52,7 +13,6 @@ const getColorMode = () => {
         ? "dark"
         : "light";
 };
-exports.getColorMode = getColorMode;
 // Size presets
 const SIZE_PRESETS = {
     sm: { padding: "0.125rem 0.375rem", fontSize: "0.75rem" },
@@ -61,7 +21,7 @@ const SIZE_PRESETS = {
 };
 // Helper to get Radix colors based on color mode
 const getRadixColor = (colorName, step, alpha = false) => {
-    const isDark = (0, exports.getColorMode)() === "dark";
+    const isDark = getColorMode() === "dark";
     const colorKey = isDark ? `${colorName}Dark` : colorName;
     const alphaKey = alpha ? "A" : "";
     const colorScale = colors[`${colorKey}${alphaKey}`];
@@ -144,8 +104,8 @@ const generateDefaultStyleFromColor = (colorScheme) => {
     }
     else {
         // Use custom hex color
-        const baseColor = (0, tinycolor2_1.default)(colorScheme);
-        const isDark = (0, exports.getColorMode)() === "dark";
+        const baseColor = tinycolor(colorScheme);
+        const isDark = getColorMode() === "dark";
         return {
             container: {
                 backgroundColor: isDark
@@ -168,7 +128,7 @@ const generateDefaultStyleFromColor = (colorScheme) => {
     }
 };
 // Main style generation function - much simpler!
-const generateTagStyle = (config = {}) => {
+export const generateTagStyle = (config = {}) => {
     let baseStyle = { ...DEFAULT_STYLE };
     // If a color scheme is provided, generate default colors from it
     if (config.colorScheme) {
@@ -202,16 +162,14 @@ const generateTagStyle = (config = {}) => {
     };
     return style;
 };
-exports.generateTagStyle = generateTagStyle;
 // Helper to create tag with style
-const createStyledTag = (id, title, styleConfig) => ({
+export const createStyledTag = (id, title, styleConfig) => ({
     id,
     title,
     style: styleConfig,
 });
-exports.createStyledTag = createStyledTag;
 // Preset color schemes using Radix colors
-exports.COLOR_PRESETS = {
+export const COLOR_PRESETS = {
     primary: "blue",
     success: "green",
     warning: "amber",
@@ -220,7 +178,7 @@ exports.COLOR_PRESETS = {
     neutral: "gray",
 };
 // Example preset styles that developers can use or override
-exports.TAG_STYLE_PRESETS = {
+export const TAG_STYLE_PRESETS = {
     default: {
         borderRadius: "999px",
         padding: "0.235rem 0.588rem",
@@ -244,16 +202,15 @@ exports.TAG_STYLE_PRESETS = {
     },
 };
 // Utility class for managing tag themes (simplified)
-class TagTheme {
+export class TagTheme {
     constructor(defaultStyle = {}) {
         this.defaultStyle = defaultStyle;
     }
     generateStyle(overrides) {
-        return (0, exports.generateTagStyle)({ ...this.defaultStyle, ...overrides });
+        return generateTagStyle({ ...this.defaultStyle, ...overrides });
     }
     // Create a tag with the theme's default style
     createTag(id, title, overrides) {
-        return (0, exports.createStyledTag)(id, title, { ...this.defaultStyle, ...overrides });
+        return createStyledTag(id, title, { ...this.defaultStyle, ...overrides });
     }
 }
-exports.TagTheme = TagTheme;

package/dist/components/inputs/search/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation/adaptive/types.mjs

@@ -0,0 +1 @@
+export {};

package/dist/components/navigation/adaptive/{useAdaptiveLayout.js → useAdaptiveLayout.mjs}

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAdaptiveLayoutState = void 0;
-const vue_1 = require("vue");
+import { ref, computed, reactive, shallowRef, } from "vue";
 const layoutStates = new Map();
-const useAdaptiveLayoutState = (key = Symbol()) => {
+export const useAdaptiveLayoutState = (key = Symbol()) => {
     if (!layoutStates.has(key)) {
-        const views = (0, vue_1.ref)([]);
-        const initialized = (0, vue_1.ref)(false);
-        const monitor = (0, vue_1.shallowRef)(null);
-        const offScreenViewsLeading = (0, vue_1.computed)(() => views.value.filter((view) => view.location === "leading"));
-        const offScreenViewsTrailing = (0, vue_1.computed)(() => views.value.filter((view) => view.location === "trailing"));
-        const onScreenViews = (0, vue_1.computed)(() => views.value.filter((view) => view.location === "onscreen"));
-        const overlayViews = (0, vue_1.computed)(() => views.value.filter((view) => view.location === "overlay"));
-        const methods = (0, vue_1.reactive)({
+        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"),
@@ -41,4 +38,3 @@ const useAdaptiveLayoutState = (key = Symbol()) => {
     }
     return layoutStates.get(key);
 };
-exports.useAdaptiveLayoutState = useAdaptiveLayoutState;

package/dist/components/navigation/adaptive/{useBreakpoints.js → useBreakpoints.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBreakpoints = void 0;
-const useBreakpoints = (views) => {
+export const useBreakpoints = (views) => {
     const setupForBreakpoint = (oldBreakpoint, currentBreakpoint) => {
         switch (currentBreakpoint) {
             case "mobile":
@@ -38,4 +35,3 @@ const useBreakpoints = (views) => {
         setupForBreakpoint,
     };
 };
-exports.useBreakpoints = useBreakpoints;

package/dist/components/navigation/adaptive/{useContainerMonitor.js → useContainerMonitor.mjs}

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.breakpoints = exports.useResponsiveContainer = exports.useContainerMonitor = exports.DEFAULT_BREAKPOINTS = void 0;
-const vue_1 = require("vue");
+import { ref, computed, onMounted, onUnmounted } from "vue";
 // Default breakpoint configuration
-exports.DEFAULT_BREAKPOINTS = {
+export const DEFAULT_BREAKPOINTS = {
     mobile: { min: 0, max: 639 },
     tablet: { min: 640, max: 1023 },
     desktop: { min: 1024, max: Infinity },
 };
-exports.breakpoints = exports.DEFAULT_BREAKPOINTS;
 // Utility function to find the current breakpoint
 const findCurrentBreakpoint = (width, breakpoints) => {
     for (const [name, range] of Object.entries(breakpoints)) {
@@ -19,15 +15,15 @@ const findCurrentBreakpoint = (width, breakpoints) => {
     return null;
 };
 // Main composable
-const useContainerMonitor = (elementRef, options = {}) => {
-    const { breakpoints = exports.DEFAULT_BREAKPOINTS, debounceMs = 16, // ~60fps
+export const useContainerMonitor = (elementRef, options = {}) => {
+    const { breakpoints = DEFAULT_BREAKPOINTS, debounceMs = 16, // ~60fps
      } = options;
     // Reactive state
-    const dimensions = (0, vue_1.ref)({ width: 0, height: 0 });
-    const currentBreakpoint = (0, vue_1.ref)(null);
-    const previousBreakpoint = (0, vue_1.ref)(null);
+    const dimensions = ref({ width: 0, height: 0 });
+    const currentBreakpoint = ref(null);
+    const previousBreakpoint = ref(null);
     // Computed properties for easy breakpoint checking
-    const breakpointQueries = (0, vue_1.computed)(() => {
+    const breakpointQueries = computed(() => {
         const queries = {};
         Object.keys(breakpoints).forEach((name) => {
             queries[`is${name.charAt(0).toUpperCase() + name.slice(1)}`] =
@@ -109,10 +105,10 @@ const useContainerMonitor = (elementRef, options = {}) => {
         }
     };
     // Lifecycle hooks
-    (0, vue_1.onMounted)(() => {
+    onMounted(() => {
         startObserver();
     });
-    (0, vue_1.onUnmounted)(() => {
+    onUnmounted(() => {
         stopObserver();
     });
     // Watch for element ref changes
@@ -138,12 +134,12 @@ const useContainerMonitor = (elementRef, options = {}) => {
         breakpoints,
     };
 };
-exports.useContainerMonitor = useContainerMonitor;
 // Convenience composable for common use cases
-const useResponsiveContainer = (elementRef, customBreakpoints) => {
+export const useResponsiveContainer = (elementRef, customBreakpoints) => {
     const breakpoints = customBreakpoints
-        ? { ...exports.DEFAULT_BREAKPOINTS, ...customBreakpoints }
-        : exports.DEFAULT_BREAKPOINTS;
-    return (0, exports.useContainerMonitor)(elementRef, { breakpoints });
+        ? { ...DEFAULT_BREAKPOINTS, ...customBreakpoints }
+        : DEFAULT_BREAKPOINTS;
+    return useContainerMonitor(elementRef, { breakpoints });
 };
-exports.useResponsiveContainer = useResponsiveContainer;
+// Export default breakpoints for convenience
+export { DEFAULT_BREAKPOINTS as breakpoints };

package/dist/components/navigation/adaptive/{useViewAnimation.js → useViewAnimation.mjs}

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useViewAnimation = void 0;
-const vue_1 = require("vue");
-const Flip_1 = require("gsap/Flip");
-const gsap_1 = __importDefault(require("gsap"));
-gsap_1.default.registerPlugin(Flip_1.Flip);
-const animationInProgress = (0, vue_1.ref)(false);
+import { nextTick, ref } from "vue";
+import { Flip } from "gsap/Flip";
+import gsap from "gsap";
+gsap.registerPlugin(Flip);
+const animationInProgress = ref(false);
 /*
 # FLIP Order of Operations
 Step 1: Get State
@@ -16,7 +10,7 @@ Step 3: Manipulate DOM
 Step 4: Animate
 Step 5: Update Data (vue reactive state)
 */
-const useViewAnimation = (views, instanceKey, containerDimensions, padding, gap) => {
+export const useViewAnimation = (views, instanceKey, containerDimensions, padding, gap) => {
     /*
      * Basic animation function
      */
@@ -27,11 +21,11 @@ const useViewAnimation = (views, instanceKey, containerDimensions, padding, gap)
         }
         animationInProgress.value = true;
         // Step 1: Get State
-        const state = Flip_1.Flip.getState(targets);
+        const state = Flip.getState(targets);
         // Step 2: Manipulate DOM
         manipulateDOMFn();
         // Step 3: Animate
-        return Flip_1.Flip.from(state, {
+        return Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,
@@ -367,7 +361,7 @@ const useViewAnimation = (views, instanceKey, containerDimensions, padding, gap)
                 view.location = "overlay";
             }
         }
-        await (0, vue_1.nextTick)();
+        await nextTick();
         const overlay = document.getElementById(getOverlayId());
         if (!overlay)
             return;
@@ -568,7 +562,7 @@ const useViewAnimation = (views, instanceKey, containerDimensions, padding, gap)
     /*
     State
     */
-    const isOverlayOpen = (0, vue_1.ref)(false);
+    const isOverlayOpen = ref(false);
     return {
         splitViewShow,
         splitViewHide,
@@ -595,4 +589,3 @@ const useViewAnimation = (views, instanceKey, containerDimensions, padding, gap)
         getSingleViewAfter,
     };
 };
-exports.useViewAnimation = useViewAnimation;

package/dist/components/navigation/adaptive/{useViewResize.js → useViewResize.mjs}

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useViewResize = void 0;
 // useViewResize.ts
-const vue_1 = require("vue");
-const useViewResize = (onScreenViews, config, props, getViewId, // Changed from (index: number) => string
+import { ref, watch, onUnmounted } from "vue";
+export const useViewResize = (onScreenViews, config, props, getViewId, // Changed from (index: number) => string
 getOnscreenId) => {
-    const resizing = (0, vue_1.ref)(null);
-    const resizeTooltip = (0, vue_1.ref)({
+    const resizing = ref(null);
+    const resizeTooltip = ref({
         visible: false,
         x: 0,
         y: 0,
@@ -122,7 +119,7 @@ getOnscreenId) => {
         resizeTooltip.value.visible = false;
     };
     // Set up event listeners when resizing starts/ends
-    (0, vue_1.watch)(resizing, (newVal) => {
+    watch(resizing, (newVal) => {
         if (newVal) {
             document.addEventListener("mousemove", handleMouseResize);
             document.addEventListener("mouseup", endResize);
@@ -137,7 +134,7 @@ getOnscreenId) => {
         document.removeEventListener("mousemove", handleMouseResize);
         document.removeEventListener("mouseup", endResize);
     };
-    (0, vue_1.onUnmounted)(() => {
+    onUnmounted(() => {
         cleanup();
     });
     return {
@@ -147,4 +144,3 @@ getOnscreenId) => {
         updateViewWidth,
     };
 };
-exports.useViewResize = useViewResize;

package/dist/components/navigation/navstack/{useNavigationStack.js → useNavigationStack.mjs}

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNavigationStack = useNavigationStack;
-const vue_1 = require("vue");
-const gsap_1 = require("gsap");
-const Flip_1 = require("gsap/Flip");
-gsap_1.gsap.registerPlugin(Flip_1.Flip);
-function useNavigationStack(initialPanes, taskKey) {
-    const panes = (0, vue_1.ref)(initialPanes);
-    const currentIndex = (0, vue_1.ref)(0);
-    const visiblePanes = (0, vue_1.computed)(() => panes.value.map((_, index) => index === currentIndex.value));
+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) {
@@ -43,7 +40,7 @@ function useNavigationStack(initialPanes, taskKey) {
         if (!animated) {
             states = [];
         }
-        const state = Flip_1.Flip.getState(states);
+        const state = Flip.getState(states);
         // Reorganize panes
         for (let i = 0; i < panes.value.length; i++) {
             const pane = document.getElementById(`${taskKey}-pane-${i}`);
@@ -63,7 +60,7 @@ function useNavigationStack(initialPanes, taskKey) {
             }
         }
         currentIndex.value = index;
-        Flip_1.Flip.from(state, {
+        Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,