@mkbabb/glass-ui 0.3.0 → 2.1.0

package/src/components/custom/sidebar/composables/useTreeIndex.ts

@@ -1,152 +0,0 @@
-import type { TreeNode, TreeIndexEntry, SidebarSection, SidebarIndexEntry } from "../types";
-
-// ---------------------------------------------------------------------------
-// Generic composable — builds index + provides helpers with `getChildren` support
-// ---------------------------------------------------------------------------
-
-/**
- * Builds a flat index of all nodes in a tree for O(1) lookup with hierarchy
- * metadata.  Returns the index plus `isActive`, `isInActiveChain`, and
- * `isDescendant` helpers that close over the index.
- *
- * Accepts an optional `getChildren` callback so callers with custom tree
- * shapes (e.g. nodes whose children live under a different property name)
- * don't need to conform to `TreeNode.children`.
- */
-export function useTreeIndex<T extends TreeNode>(
-    roots: T[],
-    options?: { getChildren?: (node: T) => T[] | undefined },
-) {
-    const getChildren =
-        options?.getChildren ?? ((n: T) => n.children as T[] | undefined);
-    const index = new Map<string, TreeIndexEntry<T>>();
-
-    function walk(
-        list: T[],
-        depth: number,
-        parentId: string | null,
-        rootId: string,
-        rootIndex: number,
-    ) {
-        for (const node of list) {
-            const ri = depth === 0 ? roots.indexOf(node) : rootIndex;
-            const rid = depth === 0 ? node.id : rootId;
-            index.set(node.id, {
-                node,
-                depth,
-                rootId: rid,
-                parentId: depth === 0 ? node.id : parentId,
-                rootIndex: ri,
-            });
-            const children = getChildren(node);
-            if (children) {
-                walk(
-                    children,
-                    depth + 1,
-                    depth === 0 ? node.id : parentId,
-                    rid,
-                    ri,
-                );
-            }
-        }
-    }
-    walk(roots, 0, null, "", 0);
-
-    /** Check if `id` is the active node. */
-    function isActive(id: string, activeId: string | null): boolean {
-        return id === activeId;
-    }
-
-    /** Check if `id` is an ancestor of or equal to `activeId`. */
-    function isInActiveChain(id: string, activeId: string | null): boolean {
-        if (!activeId) return false;
-        const entry = index.get(activeId);
-        if (!entry) return false;
-        if (id === activeId) return true;
-        if (id === entry.parentId) return true;
-        const target = index.get(id);
-        if (!target) return false;
-        return isDescendant(activeId, id);
-    }
-
-    /** Check if `childId` is a descendant of `ancestorId`. */
-    function isDescendant(childId: string, ancestorId: string): boolean {
-        const ancestor = index.get(ancestorId);
-        if (!ancestor) return false;
-        const children = getChildren(ancestor.node);
-        if (!children) return false;
-        for (const child of children) {
-            if (child.id === childId) return true;
-            if (isDescendant(childId, child.id)) return true;
-        }
-        return false;
-    }
-
-    return { index, isActive, isInActiveChain, isDescendant };
-}
-
-// ---------------------------------------------------------------------------
-// Legacy pure-function API — delegates to useTreeIndex under the hood
-// ---------------------------------------------------------------------------
-
-/**
- * Builds a flat index of all nodes in a sidebar tree for O(1) lookup
- * with hierarchy metadata.  Pure function, no Vue reactivity.
- *
- * @deprecated Prefer `useTreeIndex` which also returns helper functions.
- */
-export function buildTreeIndex(roots: SidebarSection[]): Map<string, SidebarIndexEntry> {
-    return useTreeIndex(roots).index;
-}
-
-/**
- * Check if `id` is the active section.
- *
- * Standalone variant kept for backward compatibility — the composable
- * returned by `useTreeIndex` includes the same helper.
- */
-export function isActive(id: string, activeId: string | null): boolean {
-    return id === activeId;
-}
-
-/**
- * Check if `id` is an ancestor of or equal to `activeId`.
- *
- * Standalone variant kept for backward compatibility — the composable
- * returned by `useTreeIndex` includes the same helper.
- */
-export function isInActiveChain(
-    id: string,
-    activeId: string | null,
-    index: Map<string, SidebarIndexEntry>,
-    roots: SidebarSection[],
-): boolean {
-    if (!activeId) return false;
-    const entry = index.get(activeId);
-    if (!entry) return false;
-    if (id === activeId) return true;
-    if (id === entry.parentId) return true;
-    const target = index.get(id);
-    if (!target) return false;
-
-    // Use the generic isDescendant via a one-off useTreeIndex call
-    // to avoid duplicating the recursive logic.
-    return _isDescendantLegacy(activeId, id, index);
-}
-
-/** Legacy isDescendant that operates on an externally-built index. */
-function _isDescendantLegacy(
-    childId: string,
-    ancestorId: string,
-    index: Map<string, SidebarIndexEntry>,
-): boolean {
-    const ancestor = index.get(ancestorId);
-    if (!ancestor) return false;
-    const children = ancestor.node.children;
-    if (!children) return false;
-    for (const child of children) {
-        if (child.id === childId) return true;
-        if (_isDescendantLegacy(childId, child.id, index)) return true;
-    }
-    return false;
-}

package/src/components/custom/sidebar/index.ts

@@ -1,15 +0,0 @@
-export { default as ProgressiveSidebar } from "./ProgressiveSidebar.vue";
-export { useSidebarState } from "./composables/useSidebarState";
-export type { UseSidebarStateOptions } from "./composables/useSidebarState";
-export { useSidebarFollow } from "./composables/useSidebarFollow";
-export type { SidebarFollowOptions } from "./composables/useSidebarFollow";
-export { useScrollTracker } from "./composables/useScrollTracker";
-export { useTreeIndex, buildTreeIndex, isActive, isInActiveChain } from "./composables/useTreeIndex";
-export type {
-    TreeNode,
-    TreeIndexEntry,
-    SidebarSection,
-    SidebarIndexEntry,
-    SidebarState,
-    ScrollTrackerOptions,
-} from "./types";

package/src/components/custom/sidebar/types.ts

@@ -1,50 +0,0 @@
-import type { Ref, ComputedRef } from "vue";
-
-/** Minimal interface for tree-structured content with scroll targets. */
-export interface TreeNode {
-    id: string;
-    children?: TreeNode[];
-}
-
-/** Generic flat index entry for a tree node. */
-export interface TreeIndexEntry<T extends TreeNode = TreeNode> {
-    node: T;
-    depth: number;
-    /** ID of the root-level ancestor (self.id when depth === 0). */
-    rootId: string;
-    /** Direct parent ID (self.id for root nodes). */
-    parentId: string | null;
-    /** Index within root-level nodes. */
-    rootIndex: number;
-}
-
-/** A section in the sidebar tree. */
-export interface SidebarSection extends TreeNode {
-    title: string;
-    children?: SidebarSection[];
-    level?: number;
-}
-
-/** Flat index entry for a sidebar section (backward-compatible alias). */
-export type SidebarIndexEntry = TreeIndexEntry<SidebarSection>;
-
-/** Options for scroll tracking. */
-export interface ScrollTrackerOptions {
-    /** IntersectionObserver rootMargin. Default: "-20% 0px -60% 0px" */
-    rootMargin?: string;
-    threshold?: number;
-}
-
-/** Reactive state returned by `useSidebarState`. */
-export interface SidebarState {
-    sections: SidebarSection[];
-    activeId: Ref<string | null>;
-    activeRootId: ComputedRef<string | null>;
-    treeIndex: Map<string, SidebarIndexEntry>;
-    isExpanded(id: string): boolean;
-    toggleSection(id: string): void;
-    navigateTo(id: string): void;
-    scrollToTop(): void;
-    isActive(id: string): boolean;
-    isInActiveChain(id: string): boolean;
-}

package/src/components/custom/tabs/BouncyTabs.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { type HTMLAttributes } from "vue";
-import BouncyToggle from "./BouncyToggle.vue";
-import type { ToggleOption } from "./BouncyToggle.vue";
-
-export interface TabOption {
-    label: string;
-    value: string;
-}
-
-const props = withDefaults(defineProps<{
-    options: TabOption[];
-    modelValue: string;
-    /** "default" = subtle muted slider; "pill" = solid foreground pill */
-    variant?: "default" | "pill";
-    class?: HTMLAttributes["class"];
-}>(), {
-    variant: "default",
-});
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string];
-}>();
-
-function onUpdate(value: string | string[]) {
-    emit("update:modelValue", value as string);
-}
-</script>
-
-<template>
-    <BouncyToggle
-        :options="(options as ToggleOption[])"
-        :model-value="modelValue"
-        :variant="variant"
-        :class="props.class"
-        :multi-select="false"
-        @update:model-value="onUpdate"
-    />
-</template>

package/src/components/custom/tabs/BouncyToggle.vue

@@ -1,352 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed, onMounted, onUnmounted, nextTick, type HTMLAttributes } from "vue";
-import { cn } from "../../../utils";
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-    TooltipProvider,
-} from "../../ui/tooltip";
-
-export interface ToggleOption {
-    label: string;
-    value: string;
-    icon?: string;
-    disabled?: boolean;
-    tooltip?: string;
-}
-
-export interface BouncyToggleProps {
-    options: ToggleOption[];
-    modelValue: string | string[];
-    multiSelect?: boolean;
-    /** "default" = subtle muted slider; "pill" = solid foreground pill */
-    variant?: "default" | "pill";
-    class?: HTMLAttributes["class"];
-}
-
-const props = withDefaults(defineProps<BouncyToggleProps>(), {
-    multiSelect: false,
-    variant: "default",
-});
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string | string[]];
-}>();
-
-const containerRef = ref<HTMLElement | null>(null);
-const buttonRefs = ref<HTMLElement[]>([]);
-
-// ── Computed state ──
-
-const isPill = computed(() => props.variant === "pill");
-
-const activeValues = computed<string[]>(() => {
-    if (props.multiSelect) {
-        return Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
-    }
-    return [props.modelValue as string];
-});
-
-const isActive = (value: string) => activeValues.value.includes(value);
-
-// ── Single-select slider style ──
-
-const singleSliderStyle = ref<Record<string, string>>({
-    width: "0px",
-    transform: "translateX(0px)",
-    opacity: "0",
-});
-
-function updateSingleSlider() {
-    if (props.multiSelect) return;
-    const idx = props.options.findIndex((o) => o.value === (props.modelValue as string));
-    if (idx < 0 || !buttonRefs.value[idx]) return;
-    const btn = buttonRefs.value[idx];
-    singleSliderStyle.value = {
-        width: `${btn.offsetWidth}px`,
-        transform: `translateX(${btn.offsetLeft}px)`,
-        opacity: "1",
-    };
-}
-
-// ── Multi-select slider styles ──
-
-const multiSliderStyles = ref<Record<string, Record<string, string>>>({});
-
-function updateMultiSliders() {
-    if (!props.multiSelect) return;
-    const styles: Record<string, Record<string, string>> = {};
-    for (const value of activeValues.value) {
-        const optionIdx = props.options.findIndex((o) => o.value === value);
-        const btn = buttonRefs.value[optionIdx];
-        if (!btn) continue;
-        styles[value] = {
-            width: `${btn.offsetWidth}px`,
-            transform: `translateX(${btn.offsetLeft}px)`,
-            opacity: "1",
-        };
-    }
-    multiSliderStyles.value = styles;
-}
-
-// ── Unified update ──
-
-function updateSliders() {
-    if (props.multiSelect) {
-        updateMultiSliders();
-    } else {
-        updateSingleSlider();
-    }
-}
-
-// ── Button press animation (Web Animations API) ──
-
-function animatePress(btn: HTMLElement) {
-    // Cancel any in-flight press animations on this button
-    btn.getAnimations().forEach((a) => a.cancel());
-
-    btn.animate(
-        [
-            { transform: "scale(1)" },
-            { transform: "scale(0.93)", offset: 0.25 },
-            { transform: "scale(1.02)", offset: 0.7 },
-            { transform: "scale(1)" },
-        ],
-        {
-            duration: 200,
-            easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)", // --spring-bouncy (Web Animations API needs literal value)
-        },
-    );
-}
-
-// ── Selection handler ──
-
-function select(value: string, idx: number) {
-    const option = props.options[idx];
-    if (option?.disabled) return;
-
-    const btn = buttonRefs.value[idx];
-    if (btn) {
-        animatePress(btn);
-    }
-
-    if (props.multiSelect) {
-        const current = [...activeValues.value];
-        const existingIdx = current.indexOf(value);
-        if (existingIdx > -1) {
-            // Don't deselect the last remaining value
-            if (current.length > 1) {
-                current.splice(existingIdx, 1);
-            }
-        } else {
-            current.push(value);
-        }
-        emit("update:modelValue", current);
-    } else {
-        emit("update:modelValue", value);
-    }
-}
-
-// ── Watchers ──
-
-watch(() => props.modelValue, () => nextTick(updateSliders), { deep: true });
-watch(() => props.options, () => nextTick(updateSliders), { deep: true });
-
-// ── Lifecycle ──
-
-let resizeObserver: ResizeObserver | null = null;
-
-onMounted(() => {
-    nextTick(updateSliders);
-    if (containerRef.value) {
-        resizeObserver = new ResizeObserver(() => updateSliders());
-        resizeObserver.observe(containerRef.value);
-    }
-});
-
-onUnmounted(() => {
-    resizeObserver?.disconnect();
-});
-</script>
-
-<template>
-    <div
-        ref="containerRef"
-        :class="cn(
-            isPill ? 'bouncy-toggle bouncy-toggle--pill' : 'bouncy-toggle',
-            props.class,
-        )"
-    >
-        <!-- Single-select slider -->
-        <div
-            v-if="!multiSelect"
-            :class="isPill ? 'bouncy-slider bouncy-slider--pill' : 'bouncy-slider'"
-            :style="singleSliderStyle"
-        />
-
-        <!-- Multi-select sliders (one per active value) -->
-        <template v-if="multiSelect">
-            <div
-                v-for="value in activeValues"
-                :key="'slider-' + value"
-                :class="isPill ? 'bouncy-slider bouncy-slider--pill' : 'bouncy-slider'"
-                :style="multiSliderStyles[value] ?? { opacity: '0' }"
-            />
-        </template>
-
-        <!-- Buttons -->
-        <template v-for="(option, idx) in options" :key="option.value">
-            <!-- With tooltip -->
-            <TooltipProvider v-if="option.tooltip" :delay-duration="200">
-                <Tooltip>
-                    <TooltipTrigger as-child>
-                        <button
-                            :ref="(el) => { if (el) buttonRefs[idx] = el as HTMLElement }"
-                            :class="[
-                                isPill ? 'bouncy-btn bouncy-btn--pill' : 'bouncy-btn',
-                                { 'is-active': isActive(option.value) },
-                                option.disabled && 'is-disabled',
-                            ]"
-                            :disabled="option.disabled"
-                            @click="select(option.value, idx)"
-                        >
-                            <slot name="option" :option="option" :active="isActive(option.value)">
-                                {{ option.label }}
-                            </slot>
-                        </button>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom" :side-offset="8">
-                        {{ option.tooltip }}
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
-
-            <!-- Without tooltip -->
-            <button
-                v-else
-                :ref="(el) => { if (el) buttonRefs[idx] = el as HTMLElement }"
-                :class="[
-                    isPill ? 'bouncy-btn bouncy-btn--pill' : 'bouncy-btn',
-                    { 'is-active': isActive(option.value) },
-                    option.disabled && 'is-disabled',
-                ]"
-                :disabled="option.disabled"
-                @click="select(option.value, idx)"
-            >
-                <slot name="option" :option="option" :active="isActive(option.value)">
-                    {{ option.label }}
-                </slot>
-            </button>
-        </template>
-    </div>
-</template>
-
-<style scoped>
-/* ── Default variant ── */
-.bouncy-toggle {
-    position: relative;
-    display: inline-grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-    padding: 0.1875rem;
-    border-radius: 0.4375rem;
-    background: color-mix(in srgb, var(--muted) 50%, transparent);
-}
-
-@media (min-width: 640px) {
-    .bouncy-toggle {
-        padding: 0.25rem;
-        border-radius: 0.5rem;
-    }
-}
-
-.bouncy-slider {
-    position: absolute;
-    background: var(--background);
-    z-index: 0;
-    inset-block: 0.1875rem;
-    border-radius: 0.3125rem;
-    box-shadow:
-        0 1px 3px rgba(0, 0, 0, 0.08),
-        0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent);
-    transition:
-        transform var(--duration-normal) var(--spring-snappy),
-        width var(--duration-normal) var(--spring-snappy),
-        opacity var(--duration-fast) ease;
-}
-
-@media (min-width: 640px) {
-    .bouncy-slider {
-        inset-block: 0.25rem;
-        border-radius: 0.375rem;
-    }
-}
-
-.bouncy-btn {
-    position: relative;
-    z-index: 10;
-    border: none;
-    background: none;
-    font-weight: 500;
-    cursor: pointer;
-    white-space: nowrap;
-    padding: 0.25rem 0.625rem;
-    border-radius: 0.3125rem;
-    font: inherit;
-    font-size: 0.8125rem;
-    color: var(--muted-foreground);
-    transition: color var(--duration-fast) ease;
-}
-
-@media (min-width: 640px) {
-    .bouncy-btn {
-        padding: 0.3125rem 0.75rem;
-        font-size: 0.875rem;
-    }
-}
-
-.bouncy-btn.is-active {
-    color: var(--foreground);
-}
-
-.bouncy-btn.is-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-    pointer-events: none;
-    filter: blur(0.5px);
-}
-
-/* ── Pill variant ── */
-.bouncy-toggle--pill {
-    border-radius: var(--radius-pill);
-    background: color-mix(in srgb, var(--foreground) 5%, transparent);
-    padding: 0.125rem;
-    gap: 0.125rem;
-}
-
-.bouncy-slider--pill {
-    border-radius: var(--radius-pill);
-    background: var(--foreground);
-    box-shadow: none;
-    inset-block: 0.125rem;
-}
-
-.bouncy-btn--pill {
-    border-radius: var(--radius-pill);
-    padding: 0.125rem 0.625rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-}
-
-@media (min-width: 640px) {
-    .bouncy-btn--pill {
-        padding: 0.125rem 0.625rem;
-        font-size: 0.75rem;
-    }
-}
-
-.bouncy-btn--pill.is-active {
-    color: var(--background);
-}
-</style>