@mkbabb/glass-ui 0.3.0 → 2.0.0

package/src/components/custom/expandable-container/ExpandableContainer.vue

@@ -1,64 +0,0 @@
-<template>
-    <!-- Normal mode: render inline -->
-    <div v-if="!isFullscreen" class="relative" v-bind="$attrs">
-        <button
-            class="absolute z-10 rounded-lg bg-card/70 [backdrop-filter:var(--glass-blur-subtle)] p-1.5 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40"
-            :class="buttonPosition === 'left' ? 'left-2 top-2' : 'right-2 top-2'"
-            title="Fullscreen"
-            @click="isFullscreen = true"
-        >
-            <Maximize2 class="h-4 w-4" />
-        </button>
-        <slot :fullscreen="false" />
-    </div>
-
-    <!-- Fullscreen mode: teleport to body -->
-    <Teleport to="body">
-        <div
-            v-if="isFullscreen"
-            class="fixed inset-0 z-modal flex flex-col bg-background"
-        >
-            <button
-                class="absolute z-10 rounded-lg bg-card/70 [backdrop-filter:var(--glass-blur-subtle)] p-2 text-muted-foreground hover:text-foreground transition-colors shadow-sm border border-border/40"
-                :class="buttonPosition === 'left' ? 'left-3 top-3' : 'right-3 top-3'"
-                title="Exit fullscreen"
-                @click="isFullscreen = false"
-            >
-                <Minimize2 class="h-4 w-4" />
-            </button>
-            <div class="h-full w-full">
-                <slot :fullscreen="true" />
-            </div>
-        </div>
-    </Teleport>
-</template>
-
-<script setup lang="ts">
-import { ref, watch, onUnmounted, defineOptions } from "vue";
-
-defineOptions({ inheritAttrs: false });
-import { Maximize2, Minimize2 } from "lucide-vue-next";
-
-withDefaults(defineProps<{
-    buttonPosition?: "left" | "right";
-}>(), {
-    buttonPosition: "right",
-});
-
-const isFullscreen = ref(false);
-
-watch(isFullscreen, (fs) => {
-    document.body.style.overflow = fs ? "hidden" : "";
-});
-
-function onKeydown(e: KeyboardEvent) {
-    if (e.key === "Escape" && isFullscreen.value) {
-        isFullscreen.value = false;
-    }
-}
-document.addEventListener("keydown", onKeydown);
-onUnmounted(() => {
-    document.removeEventListener("keydown", onKeydown);
-    document.body.style.overflow = "";
-});
-</script>

package/src/components/custom/glass-panel/GlassPanel.vue

@@ -1,98 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount } from "vue";
-import {
-    useGlassRenderer,
-    createGlassFilter,
-    destroyGlassFilter,
-    type GlassTier,
-    type GlassFilterState,
-} from "../../../composables/glass/useGlassRenderer";
-import { cn } from "../../../utils/cn";
-
-export interface GlassPanelProps {
-    /** Force a specific rendering tier */
-    tier?: GlassTier;
-    /** Blur radius (default: 16) */
-    blur?: number;
-    /** Refraction strength 0-1 (default: 0.3) */
-    refraction?: number;
-    /** Chromatic aberration strength 0-1 (default: 0) */
-    chromaticAberration?: boolean;
-    /** Glass variant for CSS tier */
-    variant?: "default" | "medium" | "elevated";
-    /** Additional classes */
-    class?: string;
-}
-
-const props = withDefaults(defineProps<GlassPanelProps>(), {
-    blur: 16,
-    refraction: 0.3,
-    chromaticAberration: false,
-    variant: "default",
-});
-
-const panelRef = ref<HTMLElement | null>(null);
-const renderer = useGlassRenderer({ preferredTier: props.tier });
-const activeTier = computed(() => props.tier ?? renderer.tier.value);
-
-const cssClass = computed(() => {
-    // SVG-filter tier: no glass CSS class (filter applied directly via JS)
-    if (activeTier.value === "svg-filter") {
-        return cn("glass-panel glass-panel--svg", props.class);
-    }
-
-    if (activeTier.value === "fallback") {
-        return cn("glass-panel glass-panel--fallback", props.class);
-    }
-
-    // CSS tier
-    const variantClass =
-        props.variant === "elevated"
-            ? "glass-elevated"
-            : props.variant === "medium"
-              ? "glass-medium"
-              : "glass-default";
-
-    return cn("glass-panel", variantClass, props.class);
-});
-
-let filterState: GlassFilterState | null = null;
-
-onMounted(() => {
-    if (panelRef.value && activeTier.value === "svg-filter") {
-        filterState = createGlassFilter(panelRef.value, {
-            blur: props.blur,
-            refraction: props.refraction,
-            chromaticAberration: props.chromaticAberration ? 0.5 : 0,
-        });
-    }
-});
-
-onBeforeUnmount(() => {
-    if (filterState) {
-        destroyGlassFilter(filterState);
-    }
-});
-</script>
-
-<template>
-    <div ref="panelRef" :class="cssClass">
-        <slot />
-    </div>
-</template>
-
-<style scoped>
-.glass-panel {
-    position: relative;
-}
-
-.glass-panel--svg {
-    /* Background tint for SVG filter tier */
-    background: color-mix(in srgb, var(--card) 15%, transparent);
-}
-
-.glass-panel--fallback {
-    background: color-mix(in srgb, var(--card) 92%, transparent);
-    border: 1px solid color-mix(in srgb, var(--border) 35%, transparent);
-}
-</style>

package/src/components/custom/glass-panel/index.ts

@@ -1,2 +0,0 @@
-export { default as GlassPanel } from "./GlassPanel.vue";
-export type { GlassPanelProps } from "./GlassPanel.vue";

package/src/components/custom/icon-tooltip/IconTooltip.vue

@@ -1,20 +0,0 @@
-<template>
-    <Tooltip>
-        <TooltipTrigger as-child>
-            <slot />
-        </TooltipTrigger>
-        <TooltipContent class="font-display text-base">{{ text }}</TooltipContent>
-    </Tooltip>
-</template>
-
-<script setup lang="ts">
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "../../ui/tooltip";
-
-defineProps<{
-    text: string;
-}>();
-</script>

package/src/components/custom/index.ts

@@ -1,15 +0,0 @@
-export * from "./confirm-dialog";
-export * from "./controls";
-export * from "./dock";
-export * from "./expandable-container";
-export * from "./icon-tooltip";
-export * from "./infinite-scroll";
-export * from "./labeled-field";
-export * from "./metaballs";
-export * from "./search";
-export * from "./sidebar";
-export * from "./tabs";
-export * from "./timeline";
-export * from "./typewriter";
-export * from "./glass-panel";
-export * from "./aurora";

package/src/components/custom/infinite-scroll/InfiniteScroll.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { ref, toRef } from "vue";
-import { useInfiniteScroll } from "./composables";
-
-const props = withDefaults(
-    defineProps<{
-        /** Whether more data is available */
-        hasMore: boolean;
-        /** Whether data is currently loading */
-        isLoading: boolean;
-        /** Distance from bottom to trigger (px) */
-        threshold?: number;
-    }>(),
-    {
-        threshold: 200,
-    },
-);
-
-const emit = defineEmits<{
-    "load-more": [];
-}>();
-
-const scrollContainer = ref<HTMLElement | null>(null);
-
-const { sentinelRef } = useInfiniteScroll({
-    scrollContainer,
-    threshold: props.threshold,
-    hasMore: toRef(() => props.hasMore),
-    isLoading: toRef(() => props.isLoading),
-    onLoadMore: () => emit("load-more"),
-});
-</script>
-
-<template>
-    <div ref="scrollContainer">
-        <slot />
-
-        <!-- Sentinel observed by IntersectionObserver -->
-        <div ref="sentinelRef" class="h-px w-full" aria-hidden="true" />
-
-        <!-- Loading indicator -->
-        <div v-if="isLoading" class="flex justify-center py-4">
-            <slot name="loading">
-                <div
-                    class="h-5 w-5 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent"
-                />
-            </slot>
-        </div>
-
-        <!-- End of list -->
-        <div v-else-if="!hasMore" class="py-4 text-center text-sm text-muted-foreground">
-            <slot name="end" />
-        </div>
-    </div>
-</template>

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

@@ -1,23 +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;
-}
-
-export interface InfiniteScrollReturn {
-    /** Ref to bind to the sentinel element */
-    sentinelRef: Ref<HTMLElement | null>;
-    /** Manually trigger a check (e.g., after DOM updates) */
-    check: () => void;
-    /** Stop observing */
-    stop: () => void;
-}

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

@@ -1,73 +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);
-    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()) {
-                onLoadMore();
-            }
-        }
-    }
-
-    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;
-        }
-    }
-
-    function check() {
-        if (sentinelRef.value && shouldLoad()) {
-            onLoadMore();
-        }
-    }
-
-    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,
-        check,
-        stop: teardown,
-    };
-}

package/src/components/custom/labeled-field/LabeledInput.vue

@@ -1,29 +0,0 @@
-<template>
-    <IconTooltip :text="tooltip">
-        <label :class="labelClass ?? 'font-display text-lg text-muted-foreground cursor-help'">{{ label }}</label>
-    </IconTooltip>
-    <Input
-        :type="type ?? 'string'"
-        :class="inputClass ?? 'font-mono-code'"
-        :model-value="modelValue"
-        @change="(e: Event) => emit('update:modelValue', (e.target as HTMLInputElement).value)"
-    />
-</template>
-
-<script setup lang="ts">
-import { IconTooltip } from "../icon-tooltip";
-import { Input } from "../../ui/input";
-
-defineProps<{
-    modelValue: string | number;
-    label: string;
-    tooltip: string;
-    labelClass?: string;
-    inputClass?: string;
-    type?: string;
-}>();
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string];
-}>();
-</script>

package/src/components/custom/labeled-field/LabeledSelect.vue

@@ -1,59 +0,0 @@
-<template>
-    <IconTooltip :text="tooltip">
-        <label :class="labelClass ?? 'font-display text-lg text-muted-foreground cursor-help'">{{ label }}</label>
-    </IconTooltip>
-    <Select
-        :model-value="modelValue"
-        :open="isOpen"
-        @update:open="(v: boolean) => emit('update:open', v)"
-        @update:model-value="(v: any) => emit('update:modelValue', v)"
-    >
-        <SelectTrigger class="font-mono-code">
-            <SelectValue />
-        </SelectTrigger>
-        <SelectContent>
-            <SelectGroup class="font-mono-code">
-                <SelectItem
-                    v-for="item in items"
-                    :key="item"
-                    :value="item"
-                >
-                    {{ item }}
-                    <template #description>
-                        <span
-                            v-if="descriptions?.[item]"
-                            class="ml-auto pl-2 text-2xs text-muted-foreground whitespace-nowrap"
-                        >{{ descriptions[item] }}</span>
-                    </template>
-                </SelectItem>
-            </SelectGroup>
-        </SelectContent>
-    </Select>
-</template>
-
-<script setup lang="ts">
-import { IconTooltip } from "../icon-tooltip";
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "../../ui/select";
-
-defineProps<{
-    modelValue: string;
-    isOpen: boolean;
-    items: readonly string[];
-    descriptions?: Record<string, string>;
-    label: string;
-    tooltip: string;
-    labelClass?: string;
-}>();
-
-const emit = defineEmits<{
-    "update:modelValue": [value: string];
-    "update:open": [value: boolean];
-}>();
-</script>

package/src/components/custom/labeled-field/LabeledSlider.vue

@@ -1,32 +0,0 @@
-<template>
-    <IconTooltip :text="tooltip">
-        <label :class="labelClass ?? 'font-display text-base text-muted-foreground cursor-help'">{{ label }}</label>
-    </IconTooltip>
-    <Slider
-        class="py-2"
-        :min="min"
-        :max="max"
-        :step="step"
-        :model-value="[modelValue]"
-        @update:model-value="(v: number[] | undefined) => { if (v) emit('update:modelValue', v[0]!) }"
-    />
-</template>
-
-<script setup lang="ts">
-import { IconTooltip } from "../icon-tooltip";
-import { Slider } from "../../ui/slider";
-
-defineProps<{
-    modelValue: number;
-    label: string;
-    tooltip: string;
-    labelClass?: string;
-    min: number;
-    max: number;
-    step: number;
-}>();
-
-const emit = defineEmits<{
-    "update:modelValue": [value: number];
-}>();
-</script>

package/src/components/custom/labeled-field/LabeledSwitch.vue

@@ -1,27 +0,0 @@
-<template>
-    <IconTooltip :text="tooltip">
-        <label :class="labelClass ?? 'font-display text-base text-muted-foreground cursor-help'">{{ label }}</label>
-    </IconTooltip>
-    <div class="flex items-center">
-        <Switch
-            :checked="checked"
-            @update:checked="(v: boolean) => emit('update:checked', v)"
-        />
-    </div>
-</template>
-
-<script setup lang="ts">
-import { IconTooltip } from "../icon-tooltip";
-import { Switch } from "../../ui/switch";
-
-defineProps<{
-    checked: boolean;
-    label: string;
-    tooltip: string;
-    labelClass?: string;
-}>();
-
-const emit = defineEmits<{
-    "update:checked": [value: boolean];
-}>();
-</script>

package/src/components/custom/labeled-field/index.ts

@@ -1,4 +0,0 @@
-export { default as LabeledInput } from "./LabeledInput.vue";
-export { default as LabeledSelect } from "./LabeledSelect.vue";
-export { default as LabeledSlider } from "./LabeledSlider.vue";
-export { default as LabeledSwitch } from "./LabeledSwitch.vue";

package/src/components/custom/metaballs/MetaballCanvas.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useMetaballs } from "./useMetaballs";
-import type { MetaballConfig } from "./types";
-
-const props = defineProps<{
-    config?: MetaballConfig;
-}>();
-
-const canvasRef = ref<HTMLCanvasElement | null>(null);
-const { isSupported } = useMetaballs(canvasRef, props.config);
-
-defineExpose({ isSupported });
-</script>
-
-<template>
-    <canvas
-        v-if="isSupported"
-        ref="canvasRef"
-        class="pointer-events-none fixed inset-0 -z-10 h-full w-full"
-    />
-    <slot v-else name="fallback" />
-</template>

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

@@ -1,4 +0,0 @@
-export { default as MetaballCanvas } from "./MetaballCanvas.vue";
-export { useMetaballs } from "./useMetaballs";
-export type { MetaballConfig } from "./types";
-export { DEFAULT_METABALL_CONFIG } from "./types";

package/src/components/custom/metaballs/shaders.ts

@@ -1,63 +0,0 @@
-export const VERTEX_SHADER = `
-attribute vec2 a_position;
-void main() {
-    gl_Position = vec4(a_position, 0.0, 1.0);
-}
-`;
-
-/**
- * Metaball fragment shader.
- *
- * Computes a density field per pixel by summing inverse-square
- * contributions from all blobs. Pixels above the threshold
- * render as colored goo with smooth edges.
- */
-export const FRAGMENT_SHADER = `
-precision mediump float;
-
-#define MAX_BLOBS 16
-
-uniform vec2 u_resolution;
-uniform int u_blobCount;
-uniform vec3 u_positions[MAX_BLOBS];
-uniform vec3 u_colors[MAX_BLOBS];
-uniform float u_threshold;
-uniform float u_edgeSoftness;
-uniform float u_bgAlpha;
-
-void main() {
-    vec2 uv = gl_FragCoord.xy / u_resolution;
-    float aspect = u_resolution.x / u_resolution.y;
-    vec2 coord = vec2(uv.x * aspect, uv.y);
-
-    float density = 0.0;
-    vec3 color = vec3(0.0);
-
-    for (int i = 0; i < MAX_BLOBS; i++) {
-        if (i >= u_blobCount) break;
-
-        vec2 pos = vec2(u_positions[i].x * aspect, u_positions[i].y);
-        float radius = u_positions[i].z;
-        float dist = distance(coord, pos);
-        float contrib = (radius * radius) / (dist * dist + 0.0001);
-
-        density += contrib;
-        color += contrib * u_colors[i];
-    }
-
-    if (density > u_threshold * 0.4) {
-        color /= density;
-        // Gooey edge: slightly wider smoothstep for organic merge zone
-        float edge = smoothstep(
-            u_threshold * (1.0 - u_edgeSoftness),
-            u_threshold * (1.0 + u_edgeSoftness * 0.3),
-            density
-        );
-        // Solid core with soft goo boundary — full color at core
-        gl_FragColor = vec4(color, edge * (1.0 - u_bgAlpha * 0.3));
-    } else {
-        // Background: transparent (let page bg show through) with optional tint
-        gl_FragColor = vec4(0.0, 0.0, 0.0, u_bgAlpha * 0.15);
-    }
-}
-`;

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

@@ -1,29 +0,0 @@
-export interface MetaballConfig {
-    /** Number of blobs (default 8, max 16 for shader uniform limit) */
-    blobCount?: number;
-    /** Animation speed multiplier (default 0.08) */
-    speed?: number;
-    /** Density threshold for surface rendering (default 1.0, higher = sharper edges) */
-    threshold?: number;
-    /** Base blob radius as fraction of viewport (default 0.12) */
-    baseRadius?: number;
-    /** Orbital drift amplitude as fraction of viewport (default 0.3) */
-    orbitAmplitude?: number;
-    /** CSS color strings for blob colors (cycles if fewer than blobCount) */
-    colors?: string[];
-    /** Background alpha (0 = fully transparent, default 0) */
-    bgAlpha?: number;
-    /** Edge softness — smoothstep range as fraction of threshold (default 0.3) */
-    edgeSoftness?: number;
-}
-
-export const DEFAULT_METABALL_CONFIG: Required<MetaballConfig> = {
-    blobCount: 8,
-    speed: 0.08,
-    threshold: 1.0,
-    baseRadius: 0.12,
-    orbitAmplitude: 0.3,
-    colors: ["#E31937", "#FF6B35", "#FFA726", "#EF5350"],
-    bgAlpha: 0,
-    edgeSoftness: 0.3,
-};