@umbra.ui/core 0.1.8 → 0.1.9

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

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/dialogs/Toast/types.js

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

package/dist/components/dialogs/Toast/useToast.js

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

package/dist/components/indicators/Tooltip/tooltip.js

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

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

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/indicators/Tooltip/useTooltip.js

@@ -1,12 +1,15 @@
-import { reactive } from "vue";
-const tooltipState = reactive({
+"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)({
     isVisible: false,
     content: "",
     targetElement: null,
     placement: "top",
     offset: 2,
 });
-export const useTooltipProvider = () => {
+const useTooltipProvider = () => {
     const showTooltip = async (element, config) => {
         tooltipState.content = config.content;
         tooltipState.placement = config.placement || "top";
@@ -25,8 +28,9 @@ export const useTooltipProvider = () => {
         hideTooltip,
     };
 };
-export const useTooltip = (config) => {
-    const { showTooltip, hideTooltip } = useTooltipProvider();
+exports.useTooltipProvider = useTooltipProvider;
+const useTooltip = (config) => {
+    const { showTooltip, hideTooltip } = (0, exports.useTooltipProvider)();
     const bindTooltip = (element) => {
         // Handle Vue component instances
         let actualElement = element;
@@ -55,3 +59,4 @@ export const useTooltip = (config) => {
         hideTooltip,
     };
 };
+exports.useTooltip = useTooltip;

package/dist/components/inputs/Tags/tag-bar-styles.js

@@ -1,4 +1,7 @@
-import "./theme.css";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCustomColor = exports.getTagBarStyle = void 0;
+require("./theme.css");
 // Base style templates for tag bar types
 const baseStyles = {
     default: {
@@ -228,6 +231,7 @@ 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;
@@ -309,5 +313,4 @@ const getTagBarStyle = (type = "default", style = "primary") => {
         };
     }
 };
-// Export for use in your component
-export { getTagBarStyle, isCustomColor };
+exports.getTagBarStyle = getTagBarStyle;

package/dist/components/inputs/Tags/types.js

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

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

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,15 +1,18 @@
-import { ref, computed, reactive, shallowRef, } from "vue";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAdaptiveLayoutState = void 0;
+const vue_1 = require("vue");
 const layoutStates = new Map();
-export const useAdaptiveLayoutState = (key = Symbol()) => {
+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({
+        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)({
             add: () => console.warn("Layout not initialized"),
             remove: () => console.warn("Layout not initialized"),
             replace: () => console.warn("Layout not initialized"),
@@ -38,3 +41,4 @@ export const useAdaptiveLayoutState = (key = Symbol()) => {
     }
     return layoutStates.get(key);
 };
+exports.useAdaptiveLayoutState = useAdaptiveLayoutState;

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

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

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

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

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

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

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

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

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

@@ -1,11 +1,14 @@
-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));
+"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));
     const navigate = (index, animated = true) => {
         // Ensure index is within bounds
         if (index < 0 || index >= panes.value.length) {
@@ -40,7 +43,7 @@ export function useNavigationStack(initialPanes, taskKey) {
         if (!animated) {
             states = [];
         }
-        const state = Flip.getState(states);
+        const state = Flip_1.Flip.getState(states);
         // Reorganize panes
         for (let i = 0; i < panes.value.length; i++) {
             const pane = document.getElementById(`${taskKey}-pane-${i}`);
@@ -60,7 +63,7 @@ export function useNavigationStack(initialPanes, taskKey) {
             }
         }
         currentIndex.value = index;
-        Flip.from(state, {
+        Flip_1.Flip.from(state, {
             duration: 0.3,
             ease: "power1.inOut",
             absolute: true,