@mkbabb/glass-ui 0.3.0 → 2.1.0

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

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

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

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-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 };
-}