@umbra.ui/core 0.1.0

package/dist/components/navigation/splitview/useSplitViewController.js

@@ -0,0 +1,325 @@
+//useSplitViewController.ts
+import { ref, computed, unref, watch } from "vue";
+import { gsap } from "gsap";
+import { Flip } from "gsap/Flip";
+gsap.registerPlugin(Flip);
+export const useSplitViewController = (panes, componentId) => {
+    // Get the actual panes array
+    const panesArray = computed(() => unref(panes));
+    // State to track visibility of panes
+    const visiblePanes = ref(panesArray.value.map(() => true));
+    // Vue-native event stream for visibility changes
+    const lastVisibilityEvent = ref(null);
+    // Watch for changes in panes and update visiblePanes accordingly
+    watch(panesArray, (newPanes) => {
+        visiblePanes.value = newPanes.map((_, index) => index === newPanes.length - 1 ? true : visiblePanes.value[index] || false);
+    });
+    // Track the current visible pane indices
+    const currentPaneIndex = computed(() => {
+        // Find the highest index that's visible (excluding the last pane which is always visible)
+        for (let i = visiblePanes.value.length - 2; 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 getPaneId = (index) => `${componentId}-pane-${index}`;
+    // Show a specific pane
+    const showPane = (index) => {
+        if (index < 0 || index >= panesArray.value.length - 1)
+            return;
+        const offscreen = document.getElementById(getOffscreenId());
+        const onscreen = document.getElementById(getOnscreenId());
+        if (!offscreen || !onscreen) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        // Get state for animation
+        const paneElements = panesArray.value
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Show the specified pane
+        const pane = document.getElementById(getPaneId(index));
+        if (pane && !visiblePanes.value[index]) {
+            visiblePanes.value[index] = true;
+            pane.parentNode?.removeChild(pane);
+            // Insert at correct position
+            let insertBefore = null;
+            for (let i = index + 1; i < panesArray.value.length; i++) {
+                const nextPane = document.getElementById(getPaneId(i));
+                if (nextPane && nextPane.parentNode === onscreen) {
+                    insertBefore = nextPane;
+                    break;
+                }
+            }
+            if (insertBefore) {
+                onscreen.insertBefore(pane, insertBefore);
+            }
+            else {
+                onscreen.appendChild(pane);
+            }
+            lastVisibilityEvent.value = { type: "show", index };
+        }
+        // Animate
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+    };
+    // Hide a specific pane
+    const hidePane = (index) => {
+        if (index < 0 || index >= panesArray.value.length - 1)
+            return;
+        const offscreen = document.getElementById(getOffscreenId());
+        const onscreen = document.getElementById(getOnscreenId());
+        if (!offscreen || !onscreen) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        // Get state for animation
+        const paneElements = panesArray.value
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Hide the specified pane
+        const pane = document.getElementById(getPaneId(index));
+        if (pane && visiblePanes.value[index]) {
+            visiblePanes.value[index] = false;
+            pane.parentNode?.removeChild(pane);
+            offscreen.appendChild(pane);
+            lastVisibilityEvent.value = { type: "hide", index };
+        }
+        // Animate
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+    };
+    // Toggle a pane at a specific index (handle click behavior)
+    const togglePane = (index) => {
+        if (index <= 0)
+            return;
+        const offscreen = document.getElementById(getOffscreenId());
+        const onscreen = document.getElementById(getOnscreenId());
+        if (!offscreen || !onscreen) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        // Get state for animation
+        const paneElements = panesArray.value
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Hide all panes before the clicked pane
+        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);
+                    lastVisibilityEvent.value = { type: "hide", index: i };
+                }
+            }
+        }
+        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);
+                onscreen.insertBefore(pane, onscreen.children[index - 1] || null);
+                lastVisibilityEvent.value = { type: "show", index: index - 1 };
+            }
+        }
+        // Animate
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+    };
+    // Show all panes
+    const showAll = () => {
+        const offscreen = document.getElementById(getOffscreenId());
+        const onscreen = document.getElementById(getOnscreenId());
+        if (!offscreen || !onscreen) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        const paneElements = panesArray.value
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Show all panes except the last one (which is always visible)
+        for (let i = 0; i < panesArray.value.length - 1; i++) {
+            const pane = document.getElementById(getPaneId(i));
+            if (pane && !visiblePanes.value[i]) {
+                visiblePanes.value[i] = true;
+                pane.parentNode?.removeChild(pane);
+                // Insert at correct position
+                let insertBefore = null;
+                for (let j = i + 1; j < panesArray.value.length; j++) {
+                    const nextPane = document.getElementById(getPaneId(j));
+                    if (nextPane && nextPane.parentNode === onscreen) {
+                        insertBefore = nextPane;
+                        break;
+                    }
+                }
+                if (insertBefore) {
+                    onscreen.insertBefore(pane, insertBefore);
+                }
+                else {
+                    onscreen.appendChild(pane);
+                }
+                lastVisibilityEvent.value = { type: "show", index: i };
+            }
+        }
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+    };
+    // Hide all panes except the last one
+    const hideAll = () => {
+        const offscreen = document.getElementById(getOffscreenId());
+        const onscreen = document.getElementById(getOnscreenId());
+        if (!offscreen || !onscreen) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        const paneElements = panesArray.value
+            .map((_, i) => document.getElementById(getPaneId(i)))
+            .filter((el) => el !== null);
+        const state = Flip.getState(paneElements);
+        // Hide all panes except the last one
+        for (let i = 0; i < panesArray.value.length - 1; i++) {
+            const pane = document.getElementById(getPaneId(i));
+            if (pane && visiblePanes.value[i]) {
+                visiblePanes.value[i] = false;
+                pane.parentNode?.removeChild(pane);
+                offscreen.appendChild(pane);
+                lastVisibilityEvent.value = { type: "hide", index: i };
+            }
+        }
+        Flip.from(state, {
+            duration: 0.3,
+            ease: "power1.inOut",
+            absolute: true,
+        });
+    };
+    // Navigate to show only a specific pane (and hide others)
+    const navigate = (index, animated = true) => {
+        if (index < 0 || index >= panesArray.value.length)
+            return;
+        // If navigating to the last pane, hide all others
+        if (index === panesArray.value.length - 1) {
+            hideAll();
+            return;
+        }
+        const offscreen = document.getElementById(getOffscreenId());
+        const onscreen = document.getElementById(getOnscreenId());
+        if (!offscreen || !onscreen) {
+            console.error(`Elements are null for key '${componentId}'. Unable to animate`);
+            return;
+        }
+        if (!animated) {
+            // Direct manipulation without animation
+            for (let i = 0; i < panesArray.value.length - 1; i++) {
+                const pane = document.getElementById(getPaneId(i));
+                if (pane) {
+                    pane.parentNode?.removeChild(pane);
+                    if (i === index) {
+                        visiblePanes.value[i] = true;
+                        // Find correct position
+                        let insertBefore = null;
+                        for (let j = i + 1; j < panesArray.value.length; j++) {
+                            const nextPane = document.getElementById(getPaneId(j));
+                            if (nextPane && nextPane.parentNode === onscreen) {
+                                insertBefore = nextPane;
+                                break;
+                            }
+                        }
+                        if (insertBefore) {
+                            onscreen.insertBefore(pane, insertBefore);
+                        }
+                        else {
+                            onscreen.appendChild(pane);
+                        }
+                        lastVisibilityEvent.value = { type: "show", index: i };
+                    }
+                    else {
+                        visiblePanes.value[i] = false;
+                        offscreen.appendChild(pane);
+                        lastVisibilityEvent.value = { type: "hide", index: i };
+                    }
+                }
+            }
+        }
+        else {
+            // Animated navigation
+            const paneElements = panesArray.value
+                .map((_, i) => document.getElementById(getPaneId(i)))
+                .filter((el) => el !== null);
+            const state = Flip.getState(paneElements);
+            // First hide all panes
+            for (let i = 0; i < panesArray.value.length - 1; i++) {
+                if (i !== index && visiblePanes.value[i]) {
+                    const pane = document.getElementById(getPaneId(i));
+                    if (pane) {
+                        visiblePanes.value[i] = false;
+                        pane.parentNode?.removeChild(pane);
+                        offscreen.appendChild(pane);
+                        lastVisibilityEvent.value = { type: "hide", index: i };
+                    }
+                }
+            }
+            // Then show the target pane
+            const targetPane = document.getElementById(getPaneId(index));
+            if (targetPane && !visiblePanes.value[index]) {
+                visiblePanes.value[index] = true;
+                targetPane.parentNode?.removeChild(targetPane);
+                // Find correct position
+                let insertBefore = null;
+                for (let j = index + 1; j < panesArray.value.length; j++) {
+                    const nextPane = document.getElementById(getPaneId(j));
+                    if (nextPane && nextPane.parentNode === onscreen) {
+                        insertBefore = nextPane;
+                        break;
+                    }
+                }
+                if (insertBefore) {
+                    onscreen.insertBefore(targetPane, insertBefore);
+                }
+                else {
+                    onscreen.appendChild(targetPane);
+                }
+                lastVisibilityEvent.value = { type: "show", index };
+            }
+            Flip.from(state, {
+                duration: 0.3,
+                ease: "power1.inOut",
+                absolute: true,
+            });
+        }
+    };
+    return {
+        visiblePanes,
+        currentPaneIndex,
+        lastVisibilityEvent,
+        showPane,
+        hidePane,
+        togglePane,
+        showAll,
+        hideAll,
+        navigate,
+    };
+};

package/dist/components/navigation/tabcontroller/types.d.ts

@@ -0,0 +1,21 @@
+import type { Ref } from "vue";
+export interface Tab {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    disabled?: boolean;
+}
+export interface TabControllerContext {
+    tabs: Ref<Tab[]>;
+    activeTab: Ref<string>;
+    registerTab: (tab: Tab) => void;
+    unregisterTab: (id: string) => void;
+    setActiveTab: (id: string) => void;
+    goToTab: (index: number) => void;
+    nextTab: () => void;
+    previousTab: () => void;
+    animated: boolean;
+}
+export type TabPosition = "top" | "bottom";
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/tabcontroller/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabcontroller/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE/B,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;IACjB,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvB,WAAW,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,QAAQ,CAAC"}

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

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

package/dist/components/navigation/tabcontroller/useTabController.d.ts

@@ -0,0 +1,5 @@
+import { type InjectionKey } from "vue";
+import type { TabControllerContext } from "./types";
+export declare const TabControllerKey: InjectionKey<TabControllerContext>;
+export declare const useTabController: () => TabControllerContext;
+//# sourceMappingURL=useTabController.d.ts.map

package/dist/components/navigation/tabcontroller/useTabController.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabController.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabcontroller/useTabController.ts"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,gBAAgB,EAAE,YAAY,CAAC,oBAAoB,CACvC,CAAC;AAE1B,eAAO,MAAM,gBAAgB,QAAO,oBAUnC,CAAC"}

package/dist/components/navigation/tabcontroller/useTabController.js

@@ -0,0 +1,10 @@
+// ============= useTabController.ts =============
+import { inject } from "vue";
+export const TabControllerKey = Symbol("TabController");
+export const useTabController = () => {
+    const context = inject(TabControllerKey);
+    if (!context) {
+        throw new Error("useTabController must be used within a TabController component");
+    }
+    return context;
+};

package/dist/components/navigation/types.d.ts

@@ -0,0 +1,8 @@
+export interface Pane {
+    name: string;
+    background: string;
+    foreground: string;
+    component: any;
+    props: Record<string, any>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/navigation/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,IAAI;IACnB,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"}

package/dist/components/navigation/types.js

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

package/dist/components/pickers/CollectionPicker/types.d.ts

@@ -0,0 +1,11 @@
+export interface CollectionItem {
+    id: string;
+    title: string;
+}
+export interface CollectionData {
+    items: CollectionItem[];
+    selected: CollectionItem | null;
+    onItemCreation: (title: string) => Promise<CollectionItem>;
+    onItemSelection: (item: CollectionItem) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/pickers/CollectionPicker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/pickers/CollectionPicker/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,CAAC;IAC3D,eAAe,EAAE,CAAC,IAAI,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD"}

package/dist/components/pickers/CollectionPicker/types.js

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

package/dist/components/pickers/ColorPicker/colors.d.ts

@@ -0,0 +1,13 @@
+export interface ColorGroup {
+    name: string;
+    colors: Color[];
+}
+export interface Color {
+    name: string | null;
+    hex: string;
+    weight: number | null;
+}
+export declare const colors: Color[];
+export declare const colorPickerColors: Record<string, Color>;
+export declare const colorGroups: ColorGroup[];
+//# sourceMappingURL=colors.d.ts.map

package/dist/components/pickers/ColorPicker/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../../src/components/pickers/ColorPicker/colors.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB;AACD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,EA6LzB,CAAC;AAGF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAM,CAAC;AAW3D,eAAO,MAAM,WAAW,EAAE,UAAU,EAqFnC,CAAC"}