@mkbabb/glass-ui 0.2.0

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

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,39 @@
+<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

@@ -0,0 +1,352 @@
+<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>