@mkbabb/glass-ui 0.3.0 → 2.1.0

package/src/components/custom/aurora/Aurora.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useAurora, type AuroraConfig } from "./composables/useAurora";
-
-export interface AuroraProps {
-    colors?: string[];
-    blobCount?: number;
-    baseRadius?: number;
-    blur?: number;
-    speed?: number;
-    alphaLight?: number;
-    alphaDark?: number;
-    orbitAmplitude?: number;
-}
-
-const props = defineProps<AuroraProps>();
-const canvasRef = ref<HTMLCanvasElement | null>(null);
-const { config } = useAurora(canvasRef, {
-    colors: props.colors,
-    blobCount: props.blobCount,
-    baseRadius: props.baseRadius,
-    blur: props.blur,
-    speed: props.speed,
-    alphaLight: props.alphaLight,
-    alphaDark: props.alphaDark,
-    orbitAmplitude: props.orbitAmplitude,
-});
-
-defineExpose({ config });
-</script>
-
-<template>
-    <canvas ref="canvasRef" aria-hidden="true" />
-</template>

package/src/components/custom/aurora/composables/color.ts

@@ -1,122 +0,0 @@
-/**
- * OKLCH color math for derived palette generation.
- *
- * Pipeline: sRGB [0–255] → linear sRGB → OKLab → OKLCh (polar)
- * Manipulate L (lightness) and H (hue) in perceptually uniform space,
- * then convert back: OKLCh → OKLab → linear sRGB → sRGB [0–255].
- */
-
-export function clamp(v: number, min: number, max: number): number {
-    return v < min ? min : v > max ? max : v;
-}
-
-function linearize(c: number): number {
-    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-}
-
-function delinearize(c: number): number {
-    return c <= 0.0031308
-        ? 12.92 * c
-        : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
-}
-
-export function srgbToOKLab(
-    r: number,
-    g: number,
-    b: number,
-): [number, number, number] {
-    const lr = linearize(r);
-    const lg = linearize(g);
-    const lb = linearize(b);
-
-    const l_ = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
-    const m_ = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
-    const s_ = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
-
-    return [
-        0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
-        1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
-        0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
-    ];
-}
-
-export function oklabToOklch(
-    L: number,
-    a: number,
-    b: number,
-): [number, number, number] {
-    const C = Math.sqrt(a * a + b * b);
-    const H = ((Math.atan2(b, a) * 180) / Math.PI + 360) % 360;
-    return [L, C, H];
-}
-
-export function oklchToOklab(
-    L: number,
-    C: number,
-    H: number,
-): [number, number, number] {
-    const rad = (H * Math.PI) / 180;
-    return [L, C * Math.cos(rad), C * Math.sin(rad)];
-}
-
-export function oklabToRgb255(
-    L: number,
-    a: number,
-    b: number,
-): [number, number, number] {
-    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
-    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
-    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
-
-    const l = l_ * l_ * l_;
-    const m = m_ * m_ * m_;
-    const s = s_ * s_ * s_;
-
-    const r = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
-    const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
-    const bv = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
-
-    return [
-        clamp(Math.round(delinearize(r) * 255), 0, 255),
-        clamp(Math.round(delinearize(g) * 255), 0, 255),
-        clamp(Math.round(delinearize(bv) * 255), 0, 255),
-    ];
-}
-
-/** sRGB [0–255] → OKLCh [L:0–1, C:0–~0.4, H:0–360°]. */
-export function rgbToOklch(
-    r: number,
-    g: number,
-    b: number,
-): [number, number, number] {
-    const [L, a, b_] = srgbToOKLab(r / 255, g / 255, b / 255);
-    return oklabToOklch(L, a, b_);
-}
-
-/** OKLCh → sRGB [0–255] (clamped & rounded). */
-export function oklchToRgb(
-    L: number,
-    C: number,
-    H: number,
-): [number, number, number] {
-    const [la, a, b] = oklchToOklab(L, C, H);
-    return oklabToRgb255(la, a, b);
-}
-
-/**
- * Parse a CSS color string to [r, g, b] (0-255) using browser's canvas parser.
- */
-let _parseCtx: CanvasRenderingContext2D | null = null;
-export function cssToRgb(css: string): [number, number, number] {
-    if (!_parseCtx) {
-        const c = document.createElement("canvas");
-        c.width = c.height = 1;
-        _parseCtx = c.getContext("2d", { willReadFrequently: true })!;
-    }
-    _parseCtx.clearRect(0, 0, 1, 1);
-    _parseCtx.fillStyle = "#808080";
-    _parseCtx.fillStyle = css;
-    _parseCtx.fillRect(0, 0, 1, 1);
-    const d = _parseCtx.getImageData(0, 0, 1, 1).data;
-    return [d[0]!, d[1]!, d[2]!];
-}

package/src/components/custom/aurora/composables/useAurora.ts

@@ -1,352 +0,0 @@
-import {
-    onBeforeUnmount,
-    onMounted,
-    reactive,
-    isReactive,
-    watch,
-    toValue,
-    type Ref,
-    type MaybeRef,
-} from "vue";
-import { clamp, cssToRgb, rgbToOklch, oklchToRgb } from "./color";
-
-// ── Config ──────────────────────────────────────────────────────────────────
-
-export interface AuroraConfig {
-    /** "explicit" uses the `colors` array. "derived" generates palette from baseColor via OKLCH. */
-    colorMode: "explicit" | "derived";
-    /** Explicit color array (CSS strings). Used when colorMode === "explicit". */
-    colors: string[];
-
-    /** OKLCH lightness shift for large blobs (first half). Used when colorMode === "derived". */
-    lShiftLarge: number;
-    /** OKLCH lightness shift for small blobs (second half). */
-    lShiftSmall: number;
-    /** OKLCH hue rotation for large blobs (degrees). */
-    hueShiftLarge: number;
-    /** OKLCH hue rotation for small blobs (degrees). */
-    hueShiftSmall: number;
-
-    blobCount: number;
-    baseRadius: number;
-    radiusVariance: number;
-    /** Fraction of blobs anchored to viewport vs page (0 = all page, 1 = all viewport). */
-    viewportAnchorRatio: number;
-
-    blur: number;
-    speed: number;
-    orbitAmplitude: number;
-    blendMode: GlobalCompositeOperation;
-
-    /** Gradient stop positions (fraction of blob radius). */
-    gradStop2: number;
-    gradStop3: number;
-    gradStop4: number;
-
-    alphaLight: number;
-    alphaDark: number;
-
-    /** "none" = transparent clear, "theme" = white/black based on dark mode, "color" = baseColor tint. */
-    surfaceMode: "none" | "theme" | "color";
-    surfaceAlpha: number;
-}
-
-export const DEFAULT_AURORA_CONFIG: AuroraConfig = {
-    colorMode: "explicit",
-    colors: ["#c084fc", "#60a5fa", "#f472b6", "#34d399", "#fbbf24", "#fb923c", "#a78bfa", "#38bdf8"],
-    lShiftLarge: 0.15,
-    lShiftSmall: 0.10,
-    hueShiftLarge: 25,
-    hueShiftSmall: 55,
-    blobCount: 8,
-    baseRadius: 0.32,
-    radiusVariance: 0.08,
-    viewportAnchorRatio: 0.5,
-    blur: 80,
-    speed: 0.4,
-    orbitAmplitude: 0.12,
-    blendMode: "source-over",
-    gradStop2: 0.35,
-    gradStop3: 0.65,
-    gradStop4: 1.0,
-    alphaLight: 0.35,
-    alphaDark: 0.18,
-    surfaceMode: "none",
-    surfaceAlpha: 0,
-};
-
-/** Preset: atmosphere-style (single base color, OKLCH-derived palette, surface fill). */
-export const ATMOSPHERE_PRESET: Partial<AuroraConfig> = {
-    colorMode: "derived",
-    blobCount: 10,
-    baseRadius: 0.10,
-    radiusVariance: 0.015,
-    viewportAnchorRatio: 1.0,
-    blur: 8,
-    speed: 0.10,
-    orbitAmplitude: 0.45,
-    gradStop2: 0.30,
-    gradStop3: 0.60,
-    gradStop4: 1.00,
-    alphaLight: 0.33,
-    alphaDark: 0.09,
-    surfaceMode: "theme",
-    surfaceAlpha: 0.97,
-    lShiftLarge: 0.15,
-    lShiftSmall: 0.10,
-    hueShiftLarge: 25,
-    hueShiftSmall: 55,
-};
-
-// ── Internals ───────────────────────────────────────────────────────────────
-
-interface Blob {
-    anchorX: number;
-    anchorY: number;
-    mode: "viewport" | "page";
-    radius: number;
-    color: [number, number, number];
-    phaseX: number;
-    phaseY: number;
-    freqX: number;
-    freqY: number;
-}
-
-const PHI = 1.618033988749895;
-const SQRT2 = 1.4142135623730951;
-
-function isDarkMode(): boolean {
-    return document.documentElement.classList.contains("dark");
-}
-
-function rgba(r: number, g: number, b: number, a: number): string {
-    return `rgba(${clamp(Math.round(r), 0, 255)},${clamp(Math.round(g), 0, 255)},${clamp(Math.round(b), 0, 255)},${a})`;
-}
-
-// ── Composable ──────────────────────────────────────────────────────────────
-
-/**
- * Unified aurora/atmosphere background composable.
- *
- * Two color modes:
- * - **explicit**: Uses the `colors` array directly (aurora default)
- * - **derived**: Generates palette from a single `baseColor` via OKLCH shifts (atmosphere style)
- *
- * @param canvasRef  — template ref to the `<canvas>` element
- * @param userConfig — reactive config object (mutations propagate live) or partial overrides
- * @param baseColor  — reactive CSS color for "derived" mode
- */
-export function useAurora(
-    canvasRef: Ref<HTMLCanvasElement | null>,
-    userConfig?: Partial<AuroraConfig> | AuroraConfig,
-    baseColor?: MaybeRef<string>,
-) {
-    const cfg: AuroraConfig = isReactive(userConfig)
-        ? (userConfig as AuroraConfig)
-        : reactive<AuroraConfig>({ ...DEFAULT_AURORA_CONFIG, ...userConfig });
-
-    let blobs: Blob[] = [];
-    let animId = 0;
-    let dark = false;
-    let dpr = 1;
-    let observer: MutationObserver | null = null;
-    let mediaQuery: MediaQueryList | null = null;
-
-    /** Derive palette from a single base color via OKLCH lightness/hue shifts. */
-    function deriveColors(count: number): Array<[number, number, number]> {
-        const cssColor = toValue(baseColor) ?? "#c084fc";
-        const [r, g, b] = cssToRgb(cssColor);
-        const [L, C, H] = rgbToOklch(r, g, b);
-
-        const colors: Array<[number, number, number]> = [];
-        for (let i = 0; i < count; i++) {
-            const isSmall = i >= Math.ceil(count / 2);
-            const lShift = isSmall ? cfg.lShiftSmall : cfg.lShiftLarge;
-            const hShift = isSmall ? cfg.hueShiftSmall : cfg.hueShiftLarge;
-            const sign = i % 2 === 0 ? 1 : -1;
-            const lAmount = lShift * (0.5 + (i / count) * 0.5) * sign;
-            const hAmount = hShift * ((i + 1) / count) * (i % 3 === 0 ? -1 : 1);
-            colors.push(oklchToRgb(clamp(L + lAmount, 0, 1), C, (H + hAmount + 360) % 360));
-        }
-        return colors;
-    }
-
-    function getSurface(): { rgb: [number, number, number]; alpha: number } {
-        if (cfg.surfaceMode === "none") return { rgb: [0, 0, 0], alpha: 0 };
-        if (cfg.surfaceMode === "color") {
-            const cssColor = toValue(baseColor) ?? "#c084fc";
-            return { rgb: cssToRgb(cssColor), alpha: cfg.surfaceAlpha };
-        }
-        return { rgb: dark ? [10, 10, 15] : [255, 255, 255], alpha: cfg.surfaceAlpha };
-    }
-
-    function buildBlobs() {
-        const canvas = canvasRef.value;
-        if (!canvas) return;
-
-        const vw = canvas.width / dpr;
-        const vh = canvas.height / dpr;
-        const diagonal = Math.sqrt(vw * vw + vh * vh);
-        const pageHeight = Math.max(document.documentElement.scrollHeight, vh);
-
-        const vpCount = Math.round(cfg.blobCount * cfg.viewportAnchorRatio);
-        const pageCount = cfg.blobCount - vpCount;
-        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
-
-        const colorList: Array<[number, number, number]> =
-            cfg.colorMode === "derived"
-                ? deriveColors(cfg.blobCount)
-                : cfg.colors.map(c => cssToRgb(c));
-
-        blobs = [];
-
-        for (let i = 0; i < vpCount; i++) {
-            const ci = i % colorList.length;
-            const radiusFrac = cfg.baseRadius + ((i / Math.max(vpCount, 1)) - 0.5) * cfg.radiusVariance * 2;
-            const angle = i * goldenAngle;
-            blobs.push({
-                anchorX: 0.5 + Math.cos(angle) * 0.3,
-                anchorY: 0.5 + Math.sin(angle) * 0.35,
-                mode: "viewport" as const,
-                radius: diagonal * Math.max(radiusFrac, 0.12),
-                color: colorList[ci],
-                phaseX: (i * PHI * Math.PI * 2) % (Math.PI * 2),
-                phaseY: (i * SQRT2 * Math.PI * 2) % (Math.PI * 2),
-                freqX: 0.0002 + i * 0.00005,
-                freqY: 0.00018 + i * 0.00006,
-            });
-        }
-
-        for (let i = 0; i < pageCount; i++) {
-            const ci = (vpCount + i) % colorList.length;
-            const radiusFrac = cfg.baseRadius + ((i / Math.max(pageCount, 1)) - 0.5) * cfg.radiusVariance * 2;
-            const angle = (vpCount + i) * goldenAngle;
-            const yPage = ((i + 0.5) / pageCount) * pageHeight;
-            blobs.push({
-                anchorX: 0.5 + Math.cos(angle) * 0.35,
-                anchorY: yPage,
-                mode: "page" as const,
-                radius: diagonal * Math.max(radiusFrac, 0.12),
-                color: colorList[ci],
-                phaseX: ((vpCount + i) * PHI * Math.PI * 2) % (Math.PI * 2),
-                phaseY: ((vpCount + i) * SQRT2 * Math.PI * 2) % (Math.PI * 2),
-                freqX: 0.00025 + i * 0.00006,
-                freqY: 0.0002 + i * 0.00007,
-            });
-        }
-    }
-
-    function resize() {
-        const canvas = canvasRef.value;
-        if (!canvas) return;
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        if (vw === 0 || vh === 0) return;
-        dpr = Math.min(window.devicePixelRatio, 1.5);
-        canvas.width = Math.ceil(vw * dpr);
-        canvas.height = Math.ceil(vh * dpr);
-        buildBlobs();
-    }
-
-    function draw(time: number) {
-        const canvas = canvasRef.value;
-        if (!canvas) return;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) return;
-
-        const vw = canvas.width / dpr;
-        const vh = canvas.height / dpr;
-        if (vw === 0 || vh === 0) { animId = requestAnimationFrame(draw); return; }
-
-        const scrollY = window.scrollY;
-        ctx.save();
-        ctx.scale(dpr, dpr);
-
-        // Surface fill
-        const surface = getSurface();
-        if (surface.alpha > 0) {
-            ctx.globalAlpha = surface.alpha;
-            ctx.globalCompositeOperation = "source-over";
-            ctx.filter = "none";
-            ctx.fillStyle = rgba(surface.rgb[0], surface.rgb[1], surface.rgb[2], 1);
-            ctx.fillRect(0, 0, vw, vh);
-            ctx.globalAlpha = 1;
-        } else {
-            ctx.clearRect(0, 0, vw, vh);
-        }
-
-        ctx.filter = `blur(${cfg.blur}px) saturate(140%)`;
-        ctx.globalCompositeOperation = cfg.blendMode;
-
-        const alpha = dark ? cfg.alphaDark : cfg.alphaLight;
-        const alphaScale = cfg.surfaceMode === "theme" ? (dark ? 0.6 : 2.2) : 1.0;
-        const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-        const speedMul = reducedMotion ? 0.05 : cfg.speed;
-
-        for (const blob of blobs) {
-            let cx: number, cy: number;
-            if (blob.mode === "viewport") {
-                cx = blob.anchorX * vw;
-                cy = blob.anchorY * vh;
-            } else {
-                cx = blob.anchorX * vw;
-                cy = blob.anchorY - scrollY;
-            }
-
-            cx += Math.sin(time * blob.freqX * speedMul + blob.phaseX) * vw * cfg.orbitAmplitude;
-            cy += Math.cos(time * blob.freqY * speedMul + blob.phaseY) * vh * cfg.orbitAmplitude;
-
-            if (cy + blob.radius < -blob.radius * 0.5 || cy - blob.radius > vh + blob.radius * 0.5) continue;
-
-            const [r, g, b] = blob.color;
-            const desat = dark ? 0.7 : 1.0;
-            const dr = Math.round(r * desat + 128 * (1 - desat));
-            const dg = Math.round(g * desat + 128 * (1 - desat));
-            const db = Math.round(b * desat + 128 * (1 - desat));
-
-            const peakAlpha = alpha * alphaScale;
-
-            const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, blob.radius);
-            grad.addColorStop(0, rgba(dr, dg, db, peakAlpha));
-            grad.addColorStop(cfg.gradStop2, rgba(dr, dg, db, peakAlpha * 0.6));
-            grad.addColorStop(cfg.gradStop3, rgba(dr, dg, db, peakAlpha * 0.2));
-            grad.addColorStop(cfg.gradStop4, rgba(dr, dg, db, 0));
-
-            ctx.fillStyle = grad;
-            ctx.fillRect(cx - blob.radius, cy - blob.radius, blob.radius * 2, blob.radius * 2);
-        }
-
-        ctx.restore();
-        animId = requestAnimationFrame(draw);
-    }
-
-    function onThemeChange() { dark = isDarkMode(); }
-
-    onMounted(() => {
-        dark = isDarkMode();
-        observer = new MutationObserver(onThemeChange);
-        observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
-        mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-        mediaQuery.addEventListener("change", onThemeChange);
-        resize();
-        window.addEventListener("resize", resize);
-        animId = requestAnimationFrame(draw);
-    });
-
-    onBeforeUnmount(() => {
-        cancelAnimationFrame(animId);
-        window.removeEventListener("resize", resize);
-        observer?.disconnect();
-        mediaQuery?.removeEventListener("change", onThemeChange);
-    });
-
-    watch(
-        () => [cfg.colors, cfg.blobCount, cfg.baseRadius, cfg.radiusVariance,
-               cfg.viewportAnchorRatio, cfg.colorMode, cfg.lShiftLarge, cfg.lShiftSmall,
-               cfg.hueShiftLarge, cfg.hueShiftSmall, toValue(baseColor)],
-        () => buildBlobs(),
-        { deep: true },
-    );
-
-    return { config: cfg };
-}

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

@@ -1,8 +0,0 @@
-export { default as Aurora } from "./Aurora.vue";
-export type { AuroraProps } from "./Aurora.vue";
-export {
-    useAurora,
-    type AuroraConfig,
-    DEFAULT_AURORA_CONFIG,
-    ATMOSPHERE_PRESET,
-} from "./composables/useAurora";

package/src/components/custom/confirm-dialog/ConfirmDialog.vue

@@ -1,88 +0,0 @@
-<template>
-    <Transition name="fade">
-        <div
-            v-if="open"
-            class="absolute inset-0 z-popover grid place-items-center bg-black/50 rounded-2xl"
-            @click.self="!loading && (open = false)"
-            @keydown.escape="!loading && (open = false)"
-        >
-            <Transition name="confirm-panel" appear>
-                <div
-                    v-if="open"
-                    class="w-[calc(100%-2rem)] sm:max-w-sm bg-card text-card-foreground border border-border rounded-2xl shadow-lg"
-                >
-                    <div class="p-6 grid gap-4">
-                        <div class="grid gap-2">
-                            <h2 class="font-display text-lg font-semibold leading-none tracking-tight">
-                                {{ title }}
-                            </h2>
-                            <div class="font-mono-code text-sm text-muted-foreground">
-                                <slot>{{ description }}</slot>
-                            </div>
-                        </div>
-                        <div class="flex justify-end gap-2">
-                            <Button
-                                variant="outline"
-                                class="cursor-pointer rounded-full"
-                                :disabled="loading"
-                                @click="open = false"
-                            >
-                                Cancel
-                            </Button>
-                            <Button
-                                :variant="destructive ? 'destructive' : 'default'"
-                                class="cursor-pointer gap-1.5 rounded-full"
-                                :disabled="loading"
-                                @click="onConfirm"
-                            >
-                                <LoaderCircle
-                                    v-if="loading"
-                                    class="size-4 animate-spin"
-                                />
-                                <slot name="action">{{ confirmLabel }}</slot>
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-            </Transition>
-        </div>
-    </Transition>
-</template>
-
-<script setup lang="ts">
-import { LoaderCircle } from "lucide-vue-next";
-import { Button } from "../../ui/button";
-
-const props = defineProps<{
-    title: string;
-    description?: string;
-    confirmLabel: string;
-    destructive?: boolean;
-    loading?: boolean;
-}>();
-
-const open = defineModel<boolean>("open", { default: false });
-const emit = defineEmits<{ confirm: [] }>();
-
-function onConfirm() {
-    if (props.loading) return;
-    emit("confirm");
-    open.value = false;
-}
-</script>
-
-<style scoped>
-.confirm-panel-enter-active {
-    transition: opacity var(--duration-normal) var(--ease-out),
-                transform var(--duration-normal) var(--ease-out);
-}
-.confirm-panel-leave-active {
-    transition: opacity var(--duration-fast) var(--ease-in),
-                transform var(--duration-fast) var(--ease-in);
-}
-.confirm-panel-enter-from,
-.confirm-panel-leave-to {
-    opacity: 0;
-    transform: scale(0.95);
-}
-</style>

package/src/components/custom/controls/DarkModeToggle.vue

@@ -1,96 +0,0 @@
-<template>
-    <!-- Credit to Kevin Powell at https://codepen.io/kevinpowell/pen/PomqjxO -->
-    <component
-        :is="passive ? 'div' : 'button'"
-        class="dark-mode-toggle-button"
-        v-bind="$attrs"
-        @click="!passive && toggleDark()"
-    >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="472.39"
-            height="472.39"
-            viewBox="0 0 472.39 472.39"
-        >
-            <g class="toggle-sun">
-                <path
-                    d="M403.21,167V69.18H305.38L236.2,0,167,69.18H69.18V167L0,236.2l69.18,69.18v97.83H167l69.18,69.18,69.18-69.18h97.83V305.38l69.18-69.18Zm-167,198.17a129,129,0,1,1,129-129A129,129,0,0,1,236.2,365.19Z"
-                />
-            </g>
-            <g class="toggle-circle">
-                <circle cx="236.2" cy="236.2" r="90" />
-            </g>
-        </svg>
-    </component>
-</template>
-
-<script setup lang="ts">
-import { watchEffect } from "vue";
-import { useGlobalDark } from "../../../composables/useGlobalDark";
-
-const props = defineProps<{
-    passive?: boolean;
-    /**
-     * When true, CSS transitions on `<html>` and all descendants are
-     * temporarily suppressed during dark mode toggle to prevent jank.
-     * @default false
-     */
-    disableTransitions?: boolean;
-}>();
-
-const { toggleDark, setDisableTransitions } = useGlobalDark();
-
-watchEffect(() => {
-    setDisableTransitions(props.disableTransitions ?? false);
-});
-</script>
-
-<style scoped>
-.dark-mode-toggle-button {
-    cursor: pointer;
-    border: 0;
-    padding: 0;
-    border-radius: var(--radius-pill);
-    position: relative;
-    isolation: isolate;
-    background: none;
-    opacity: 0.8;
-
-    transition: opacity var(--duration-normal) var(--ease-standard),
-                background var(--duration-normal) var(--ease-standard);
-
-    z-index: var(--z-popover);
-
-    svg {
-        fill: var(--foreground);
-        width: 100%;
-        height: 100%;
-    }
-
-    &:hover,
-    &:focus {
-        outline: none;
-        opacity: 1;
-        background: hsl(0 0% 50% / 0.15);
-    }
-}
-
-.toggle-sun {
-    transform-origin: center center;
-    transition: transform 750ms var(--spring-bouncy);
-}
-
-.toggle-circle {
-    transform: translateX(0%);
-    transition: transform 500ms var(--ease-out);
-}
-
-/* Dark mode styles — use :where(.dark) so it doesn't leak to <html> */
-:where(.dark) .dark-mode-toggle-button .toggle-sun {
-    transform: rotate(0.5turn);
-}
-
-:where(.dark) .dark-mode-toggle-button .toggle-circle {
-    transform: translateX(-15%);
-}
-</style>