@mkbabb/glass-ui 0.2.0

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

@@ -0,0 +1,9 @@
+export { default as GlassDock } from "./GlassDock.vue";
+export { default as DockPopover } from "./DockPopover.vue";
+export { default as DockLayerGroup } from "./DockLayerGroup.vue";
+export { useDockState, useDockTransition, useLayerTransition, usePopupMutex, DOCK_ACTION_BAR_KEY, isTeleportedTarget } from "./composables";
+export type { UseDockStateOptions, DockState } from "./composables";
+export type { UseDockTransitionOptions } from "./composables";
+export type { UseLayerTransitionOptions, UseLayerTransitionReturn } from "./composables";
+export type { UsePopupMutexOptions, UsePopupMutexReturn } from "./composables";
+export type { DockAction, DockActionBar } from "./composables";

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

@@ -0,0 +1,64 @@
+<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/expandable-container/index.ts

@@ -0,0 +1 @@
+export { default as ExpandableContainer } from "./ExpandableContainer.vue";

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

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

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

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

@@ -0,0 +1,20 @@
+<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/icon-tooltip/index.ts

@@ -0,0 +1 @@
+export { default as IconTooltip } from "./IconTooltip.vue";

package/src/components/custom/index.ts

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

@@ -0,0 +1,55 @@
+<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/index.ts

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

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

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

@@ -0,0 +1,73 @@
+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/infinite-scroll/index.ts

@@ -0,0 +1 @@
+export { default as InfiniteScroll } from "./InfiniteScroll.vue";

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

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

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

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

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

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

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

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

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

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