@mkbabb/glass-ui 0.2.0

package/src/composables/glass/webgpu/glassShader.wgsl

@@ -0,0 +1,173 @@
+// glass-ui WebGPU glass shader
+// Features: variable blur, real-time refraction, caustics, dynamic specular
+//
+// This shader is designed to be used with a full-screen quad.
+// It reads from a background texture and applies glass effects
+// for each registered glass panel.
+
+struct Uniforms {
+    resolution: vec2f,           // Canvas resolution
+    glass_bounds: vec4f,         // Glass panel rect (x, y, w, h) in UV space
+    blur_radius: f32,            // Base blur radius
+    refraction_strength: f32,    // Snell's law displacement strength
+    chromatic_aberration: f32,   // Edge chromatic aberration strength
+    caustic_intensity: f32,      // Caustic light pattern intensity
+    light_pos: vec2f,            // Virtual light source position (UV)
+    time: f32,                   // Animation time (seconds)
+    _pad: f32,                   // Alignment padding
+};
+
+@group(0) @binding(0) var<uniform> u: Uniforms;
+@group(0) @binding(1) var background_texture: texture_2d<f32>;
+@group(0) @binding(2) var background_sampler: sampler;
+
+// Pseudo-random hash for noise generation
+fn hash21(p: vec2f) -> f32 {
+    var p3 = fract(vec3f(p.xyx) * 0.1031);
+    p3 += dot(p3, p3.yzx + 33.33);
+    return fract((p3.x + p3.y) * p3.z);
+}
+
+// Simplex-style noise for caustics
+fn noise(p: vec2f) -> f32 {
+    let i = floor(p);
+    let f = fract(p);
+    let u_curve = f * f * (3.0 - 2.0 * f);
+
+    return mix(
+        mix(hash21(i), hash21(i + vec2f(1.0, 0.0)), u_curve.x),
+        mix(hash21(i + vec2f(0.0, 1.0)), hash21(i + vec2f(1.0, 1.0)), u_curve.x),
+        u_curve.y
+    );
+}
+
+// Fractal Brownian Motion for caustic patterns
+fn fbm(p: vec2f) -> f32 {
+    var value = 0.0;
+    var amplitude = 0.5;
+    var frequency = 1.0;
+    var pos = p;
+
+    for (var i = 0; i < 5; i++) {
+        value += amplitude * noise(pos * frequency);
+        pos += vec2f(1.7, 9.2);
+        amplitude *= 0.5;
+        frequency *= 2.0;
+    }
+    return value;
+}
+
+// Caustic light pattern — animated voronoi-like cells
+fn caustics(uv: vec2f, time: f32) -> f32 {
+    let p = uv * 8.0 + vec2f(time * 0.3, time * 0.2);
+    let n1 = fbm(p);
+    let n2 = fbm(p + vec2f(1.3, 2.7) + time * 0.1);
+    let pattern = fbm(p + vec2f(n1, n2) * 2.0);
+    return smoothstep(0.3, 0.7, pattern);
+}
+
+// Fresnel approximation (Schlick)
+fn fresnel(cos_theta: f32, ior: f32) -> f32 {
+    let r0 = pow((1.0 - ior) / (1.0 + ior), 2.0);
+    return r0 + (1.0 - r0) * pow(1.0 - cos_theta, 5.0);
+}
+
+// Distance from UV to nearest edge of glass panel
+fn edge_distance(uv: vec2f) -> f32 {
+    let glass_min = u.glass_bounds.xy;
+    let glass_max = u.glass_bounds.xy + u.glass_bounds.zw;
+    let d = min(uv - glass_min, glass_max - uv);
+    return min(d.x, d.y);
+}
+
+@fragment
+fn fs_main(@builtin(position) frag_coord: vec4f) -> @location(0) vec4f {
+    let uv = frag_coord.xy / u.resolution;
+    let pixel_size = 1.0 / u.resolution;
+
+    // Check if fragment is inside the glass panel
+    let glass_min = u.glass_bounds.xy;
+    let glass_max = u.glass_bounds.xy + u.glass_bounds.zw;
+
+    if (uv.x < glass_min.x || uv.x > glass_max.x ||
+        uv.y < glass_min.y || uv.y > glass_max.y) {
+        return textureSample(background_texture, background_sampler, uv);
+    }
+
+    // Progressive blur — variable radius based on edge distance
+    let edge_dist = edge_distance(uv);
+    let max_edge_dist = min(u.glass_bounds.z, u.glass_bounds.w) * 0.5;
+    let blur_factor = smoothstep(0.0, max_edge_dist * 0.3, edge_dist);
+    let effective_blur = u.blur_radius * (0.4 + 0.6 * blur_factor);
+
+    // Refraction displacement
+    let center = u.glass_bounds.xy + u.glass_bounds.zw * 0.5;
+    let from_center = uv - center;
+    let refraction_offset = from_center * u.refraction_strength * 0.02;
+
+    // Depth-aware blur kernel
+    var blur_color = vec3f(0.0);
+    var total_weight = 0.0;
+    let samples = i32(min(effective_blur * 2.0, 16.0));
+    let sigma = max(effective_blur * 0.5, 0.1);
+
+    for (var x = -8; x <= 8; x++) {
+        for (var y = -8; y <= 8; y++) {
+            if (abs(x) > samples || abs(y) > samples) { continue; }
+
+            let offset = vec2f(f32(x), f32(y)) * pixel_size * effective_blur * 0.1;
+            let dist_sq = f32(x * x + y * y);
+            let weight = exp(-dist_sq / (2.0 * sigma * sigma));
+
+            let sample_uv = uv + offset + refraction_offset;
+            blur_color += textureSample(background_texture, background_sampler, sample_uv).rgb * weight;
+            total_weight += weight;
+        }
+    }
+    blur_color /= total_weight;
+
+    // Chromatic aberration at edges
+    if (u.chromatic_aberration > 0.0) {
+        let edge_strength = 1.0 - smoothstep(0.0, max_edge_dist * 0.15, edge_dist);
+        let aberration_dir = normalize(from_center) * edge_strength * u.chromatic_aberration * 0.003;
+
+        let r = textureSample(background_texture, background_sampler, uv + refraction_offset + aberration_dir).r;
+        let b = textureSample(background_texture, background_sampler, uv + refraction_offset - aberration_dir).b;
+        blur_color.x = mix(blur_color.x, r, edge_strength * 0.5);
+        blur_color.z = mix(blur_color.z, b, edge_strength * 0.5);
+    }
+
+    // Caustic light pattern
+    var caustic_light = 0.0;
+    if (u.caustic_intensity > 0.0) {
+        let local_uv = (uv - glass_min) / u.glass_bounds.zw;
+        caustic_light = caustics(local_uv, u.time) * u.caustic_intensity;
+    }
+
+    // Specular highlight with cursor-tracking light
+    let normal_xy = from_center / (u.glass_bounds.zw * 0.5);
+    let normal = normalize(vec3f(normal_xy * 0.3, 1.0));
+    let view_dir = vec3f(0.0, 0.0, 1.0);
+    let cos_theta = max(dot(view_dir, normal), 0.0);
+    var spec = fresnel(cos_theta, 1.5);
+
+    // Light-source-aware specular
+    let light_dir = normalize(u.light_pos - uv);
+    let light_dot = max(dot(normal_xy, light_dir), 0.0);
+    spec *= 0.3 + 0.7 * light_dot;
+
+    // Combine
+    let result = blur_color + vec3f(spec * 0.15 + caustic_light * 0.08);
+    let alpha = 0.85 + spec * 0.1;
+
+    return vec4f(result, alpha);
+}
+
+// Vertex shader — full-screen triangle
+@vertex
+fn vs_main(@builtin(vertex_index) vertex_index: u32) -> @builtin(position) vec4f {
+    // Full-screen triangle trick: 3 vertices cover the entire viewport
+    let x = f32(i32(vertex_index) / 2) * 4.0 - 1.0;
+    let y = f32(i32(vertex_index) % 2) * 4.0 - 1.0;
+    return vec4f(x, y, 0.0, 1.0);
+}

package/src/composables/index.ts

@@ -0,0 +1,32 @@
+export * from "./interaction";
+export { copyToClipboard } from "./useClipboard";
+export { useGlobalDark, type UseGlobalDarkOptions } from "./useGlobalDark";
+export * from "./useKeyboardShortcuts";
+export * from "./useWatercolorBlob";
+export { useCharSplit } from "./useCharSplit";
+export * from "./glass";
+export * from "./pagination";
+export * from "./prng";
+export * from "./virtual";
+export * from "../components/custom/infinite-scroll/composables";
+
+// Sidebar composables and types
+export {
+    useTreeIndex,
+    useScrollTracker,
+    useSidebarFollow,
+    useSidebarState,
+    buildTreeIndex,
+    isActive,
+    isInActiveChain,
+} from "../components/custom/sidebar";
+export type {
+    TreeNode,
+    TreeIndexEntry,
+    SidebarSection,
+    SidebarIndexEntry,
+    SidebarState,
+    ScrollTrackerOptions,
+    SidebarFollowOptions,
+    UseSidebarStateOptions,
+} from "../components/custom/sidebar";

package/src/composables/infinite-scroll/index.ts

@@ -0,0 +1,2 @@
+export { useInfiniteScroll } from "./useInfiniteScroll";
+export type { InfiniteScrollOptions, InfiniteScrollReturn } from "./types";

package/src/composables/infinite-scroll/types.ts

@@ -0,0 +1,25 @@
+import type { Ref, MaybeRefOrGetter } from "vue";
+
+export interface InfiniteScrollOptions {
+    /** The scrollable container element. Defaults to window if not provided. */
+    scrollContainer?: Ref<HTMLElement | null>;
+    /** Distance in pixels from the bottom to trigger loading (default: 200) */
+    threshold?: number;
+    /** Whether more data is available */
+    hasMore: MaybeRefOrGetter<boolean>;
+    /** Whether data is currently loading */
+    isLoading: MaybeRefOrGetter<boolean>;
+    /** Callback invoked when the sentinel enters the viewport */
+    onLoadMore: () => void | Promise<void>;
+}
+
+export interface InfiniteScrollReturn {
+    /** Ref to bind to the sentinel element */
+    sentinelRef: Ref<HTMLElement | null>;
+    /** Error message from the last failed load, or null */
+    error: Ref<string | null>;
+    /** Manually trigger a check (e.g., after DOM updates) */
+    check: () => void;
+    /** Stop observing and reset error state */
+    stop: () => void;
+}

package/src/composables/infinite-scroll/useInfiniteScroll.ts

@@ -0,0 +1,101 @@
+import { ref, watch, onScopeDispose, toValue, type MaybeRefOrGetter } from "vue";
+import type { InfiniteScrollOptions, InfiniteScrollReturn } from "./types";
+
+/**
+ * Composable for infinite scroll with IntersectionObserver.
+ *
+ * Watches a sentinel element at the bottom of the scrollable area.
+ * When it enters the viewport and `hasMore` is true / `isLoading` is false,
+ * the `onLoadMore` callback fires.
+ */
+export function useInfiniteScroll(options: InfiniteScrollOptions): InfiniteScrollReturn {
+    const { threshold = 200, hasMore, isLoading, onLoadMore } = options;
+    const sentinelRef = ref<HTMLElement | null>(null);
+    const error = ref<string | null>(null);
+    let observer: IntersectionObserver | null = null;
+
+    function shouldLoad(): boolean {
+        return toValue(hasMore) && !toValue(isLoading);
+    }
+
+    function handleIntersect(entries: IntersectionObserverEntry[]) {
+        for (const entry of entries) {
+            if (entry.isIntersecting && shouldLoad()) {
+                error.value = null;
+                try {
+                    const result = onLoadMore();
+                    // Handle async onLoadMore callbacks
+                    if (result && typeof (result as any).catch === "function") {
+                        (result as Promise<unknown>).catch((e: unknown) => {
+                            error.value =
+                                e instanceof Error ? e.message : "Failed to load more";
+                        });
+                    }
+                } catch (e) {
+                    error.value =
+                        e instanceof Error ? e.message : "Failed to load more";
+                }
+            }
+        }
+    }
+
+    function setupObserver(el: HTMLElement) {
+        teardown();
+        observer = new IntersectionObserver(handleIntersect, {
+            root: options.scrollContainer?.value ?? null,
+            rootMargin: `0px 0px ${threshold}px 0px`,
+        });
+        observer.observe(el);
+    }
+
+    function teardown() {
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+        error.value = null;
+    }
+
+    function check() {
+        if (sentinelRef.value && shouldLoad()) {
+            error.value = null;
+            try {
+                const result = onLoadMore();
+                if (result && typeof (result as any).catch === "function") {
+                    (result as Promise<unknown>).catch((e: unknown) => {
+                        error.value =
+                            e instanceof Error ? e.message : "Failed to load more";
+                    });
+                }
+            } catch (e) {
+                error.value =
+                    e instanceof Error ? e.message : "Failed to load more";
+            }
+        }
+    }
+
+    watch(sentinelRef, (el) => {
+        if (el) setupObserver(el);
+        else teardown();
+    });
+
+    // Re-check when loading finishes (new content may be short enough to need another load)
+    watch(
+        () => toValue(isLoading),
+        (loading) => {
+            if (!loading && sentinelRef.value) {
+                // Defer to next tick so DOM updates first
+                requestAnimationFrame(check);
+            }
+        },
+    );
+
+    onScopeDispose(teardown);
+
+    return {
+        sentinelRef,
+        error,
+        check,
+        stop: teardown,
+    };
+}

package/src/composables/interaction/index.ts

@@ -0,0 +1,5 @@
+export { useHeightTransition } from "./useHeightTransition";
+export { useHoverPopover } from "./useHoverPopover";
+export { useHoverToggle } from "./useHoverToggle";
+export { useLeaveTimer } from "./useLeaveTimer";
+export { useTouchGate } from "./useTouchGate";

package/src/composables/interaction/useHeightTransition.ts

@@ -0,0 +1,82 @@
+const DEFAULT_EXPAND_DURATION = "var(--duration-normal, 0.3s)";
+const DEFAULT_COLLAPSE_DURATION = "var(--duration-fast, 0.2s)";
+const EXPAND_EASING = "var(--spring-smooth, cubic-bezier(0.16, 1, 0.3, 1))";
+const COLLAPSE_EASING = "var(--ease-out, cubic-bezier(0, 0, 0.2, 1))";
+
+export function useHeightTransition(options?: {
+    expandDuration?: string;
+    collapseDuration?: string;
+    onBeforeCollapse?: () => void;
+    onAfterExpand?: () => void;
+}) {
+    const expandDuration = options?.expandDuration ?? DEFAULT_EXPAND_DURATION;
+    const collapseDuration = options?.collapseDuration ?? DEFAULT_COLLAPSE_DURATION;
+
+    function onBeforeEnter(el: Element) {
+        const htmlEl = el as HTMLElement;
+        htmlEl.style.height = "0";
+        htmlEl.style.opacity = "0";
+    }
+
+    function onEnter(el: Element, done: () => void) {
+        const htmlEl = el as HTMLElement;
+        const targetHeight = htmlEl.scrollHeight;
+        htmlEl.style.transition = `height ${expandDuration} ${EXPAND_EASING}, opacity ${expandDuration} ease`;
+        // Force reflow
+        void htmlEl.offsetHeight;
+        htmlEl.style.height = `${targetHeight}px`;
+        htmlEl.style.opacity = "1";
+        htmlEl.addEventListener("transitionend", function handler(e) {
+            if (e.propertyName !== "height") return;
+            htmlEl.removeEventListener("transitionend", handler);
+            done();
+        });
+    }
+
+    function onAfterEnter(el: Element) {
+        const htmlEl = el as HTMLElement;
+        htmlEl.style.height = "";
+        htmlEl.style.transition = "";
+        htmlEl.style.opacity = "";
+        options?.onAfterExpand?.();
+        htmlEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+
+    function onBeforeLeave(el: Element) {
+        const htmlEl = el as HTMLElement;
+        options?.onBeforeCollapse?.();
+        htmlEl.style.height = `${htmlEl.scrollHeight}px`;
+        // Force reflow
+        void htmlEl.offsetHeight;
+    }
+
+    function onLeave(el: Element, done: () => void) {
+        const htmlEl = el as HTMLElement;
+        htmlEl.style.transition = `height ${collapseDuration} ${COLLAPSE_EASING}, opacity ${collapseDuration} ease`;
+        // Force reflow
+        void htmlEl.offsetHeight;
+        htmlEl.style.height = "0";
+        htmlEl.style.opacity = "0";
+        htmlEl.addEventListener("transitionend", function handler(e) {
+            if (e.propertyName !== "height") return;
+            htmlEl.removeEventListener("transitionend", handler);
+            done();
+        });
+    }
+
+    function onAfterLeave(el: Element) {
+        const htmlEl = el as HTMLElement;
+        htmlEl.style.height = "";
+        htmlEl.style.transition = "";
+        htmlEl.style.opacity = "";
+    }
+
+    return {
+        onBeforeEnter,
+        onEnter,
+        onAfterEnter,
+        onBeforeLeave,
+        onLeave,
+        onAfterLeave,
+    };
+}

package/src/composables/interaction/useHoverPopover.ts

@@ -0,0 +1,64 @@
+import { ref, reactive, nextTick } from "vue";
+import { useLeaveTimer } from "./useLeaveTimer";
+
+const CAN_HOVER = typeof window !== "undefined" && window.matchMedia("(hover: hover)").matches;
+
+/**
+ * Shared hover-timer + floating-panel positioning pattern.
+ * Used by components with hover-activated popover panels (e.g. swatch grids).
+ */
+export function useHoverPopover(options?: { canHover?: boolean }) {
+    const canHover = options?.canHover ?? CAN_HOVER;
+
+    const openIndex = ref<number | null>(null);
+    const style = reactive({ top: "0px", left: "0px" });
+    const leaveTimer = useLeaveTimer(250);
+
+    function positionPanel(swatchEl: Element, offsetY = -42) {
+        const rect = swatchEl.getBoundingClientRect();
+        style.top = `${rect.top + offsetY}px`;
+        style.left = `${rect.left + rect.width / 2}px`;
+    }
+
+    function onHover(index: number, e: PointerEvent) {
+        if (!canHover || e.pointerType === "touch") return;
+        cancelLeave();
+        openIndex.value = index;
+        nextTick(() => positionPanel(e.currentTarget as Element));
+    }
+
+    function onLeave() {
+        if (!canHover) return;
+        leaveTimer.schedule(() => { openIndex.value = null; });
+    }
+
+    function cancelLeave() {
+        leaveTimer.cancel();
+    }
+
+    function close() {
+        cancelLeave();
+        openIndex.value = null;
+    }
+
+    function onPopoverUpdateTouch(open: boolean, index: number) {
+        openIndex.value = open ? index : null;
+    }
+
+    function onSwatchClick(index: number) {
+        cancelLeave();
+        openIndex.value = openIndex.value === index ? null : index;
+    }
+
+    return {
+        canHover,
+        openIndex,
+        style,
+        onHover,
+        onLeave,
+        cancelLeave,
+        close,
+        onPopoverUpdateTouch,
+        onSwatchClick,
+    };
+}

package/src/composables/interaction/useHoverToggle.ts

@@ -0,0 +1,103 @@
+import { ref, computed, onBeforeUnmount } from "vue";
+import type { Ref, ComputedRef } from "vue";
+
+export interface UseHoverToggleOptions {
+    /** Delay before auto-collapse after mouse leaves (ms) */
+    collapseDelay?: number;
+    /** If true, clicking toggles persistent open state; clicking elsewhere collapses */
+    persistOnClick?: boolean;
+    /** If true, starts expanded */
+    startExpanded?: boolean;
+}
+
+export interface UseHoverToggleReturn {
+    isExpanded: Ref<boolean>;
+    isPinned: Ref<boolean>;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onClickToggle: () => void;
+    onClickOutside: () => void;
+    /** Bind all listeners to a container element */
+    containerProps: ComputedRef<Record<string, Function>>;
+}
+
+export function useHoverToggle(options: UseHoverToggleOptions = {}): UseHoverToggleReturn {
+    const {
+        collapseDelay = 2500,
+        persistOnClick = true,
+        startExpanded = false,
+    } = options;
+
+    const isExpanded = ref(startExpanded);
+    const isPinned = ref(false);
+    let collapseTimer: ReturnType<typeof setTimeout> | null = null;
+
+    function clearTimer() {
+        if (collapseTimer) {
+            clearTimeout(collapseTimer);
+            collapseTimer = null;
+        }
+    }
+
+    function scheduleCollapse() {
+        clearTimer();
+        collapseTimer = setTimeout(() => {
+            isExpanded.value = false;
+        }, collapseDelay);
+    }
+
+    function onMouseEnter() {
+        clearTimer();
+        isExpanded.value = true;
+    }
+
+    function onMouseLeave() {
+        if (!isPinned.value) {
+            scheduleCollapse();
+        }
+    }
+
+    function onClickToggle() {
+        if (persistOnClick) {
+            if (isPinned.value) {
+                isPinned.value = false;
+                scheduleCollapse();
+            } else {
+                isPinned.value = true;
+                isExpanded.value = true;
+                clearTimer();
+            }
+        } else {
+            clearTimer();
+            isExpanded.value = !isExpanded.value;
+            if (isExpanded.value) {
+                scheduleCollapse();
+            }
+        }
+    }
+
+    function onClickOutside() {
+        if (isPinned.value) {
+            isPinned.value = false;
+        }
+        isExpanded.value = false;
+        clearTimer();
+    }
+
+    const containerProps = computed(() => ({
+        onMouseenter: onMouseEnter,
+        onMouseleave: onMouseLeave,
+    }));
+
+    onBeforeUnmount(clearTimer);
+
+    return {
+        isExpanded,
+        isPinned,
+        onMouseEnter,
+        onMouseLeave,
+        onClickToggle,
+        onClickOutside,
+        containerProps,
+    };
+}

package/src/composables/interaction/useLeaveTimer.ts

@@ -0,0 +1,17 @@
+export function useLeaveTimer(delay = 250) {
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    function schedule(callback: () => void) {
+        cancel();
+        timer = setTimeout(callback, delay);
+    }
+
+    function cancel() {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    }
+
+    return { schedule, cancel };
+}