import { createSignal, createEffect, onCleanup, type Component } from 'solid-js'; import clsx from 'clsx'; /** * Window chrome clip-path polygon (8 vertices). * TL: straight corner. TR: deep notch for floating controls island. * BL: 45-degree angled slope (20px depth). BR: straight corner. */ export const CHROME_CLIP_PATH = `polygon( 0 0, calc(100% - 182px) 0, calc(100% - 140px) 42px, calc(100% - 16px) 42px, 100% 58px, 100% 100%, 20px 100%, 0 calc(100% - 20px) )`; interface GlowPerimeterProps { class?: string; } /** * Animated glow-line perimeter (WIN-02). * SVG path with stroke draws a 2px ring 6px inset from the window edge. * Sweep uses a conic-gradient CSS mask for perfectly smooth leading/trailing fades. * Four edge-strip divs with backdrop-filter create frosted glass margin between glow ring and chrome edge. * Z-index 10 renders above all content. */ export const GlowPerimeter: Component = (rawProps) => { let containerRef: HTMLDivElement | undefined; const [size, setSize] = createSignal({ w: 0, h: 0 }); // Track container dimensions createEffect(() => { if (!containerRef) return; const observer = new ResizeObserver((entries) => { const rect = entries[0].contentRect; setSize({ w: Math.round(rect.width), h: Math.round(rect.height) }); }); observer.observe(containerRef); onCleanup(() => observer.disconnect()); }); /** * SVG path for the glow ring, 6px perpendicular inset from CHROME_CLIP_PATH. * 8 vertices matching the window chrome shape. */ const glowPath = () => { const { w, h } = size(); if (w === 0 || h === 0) return ''; return [ `M 6,6`, `L ${w - 185},6`, // top edge `L ${w - 143},48`, // notch left diagonal `L ${w - 19},48`, // notch bottom `L ${w - 6},61`, // notch right diagonal `L ${w - 6},${h - 6}`, // right edge → BR `L 23,${h - 6}`, // bottom edge → BL `L 6,${h - 23}`, // BL diagonal `Z`, // left edge → TL ].join(' '); }; /** Shared blur style for edge strips (const + spread for reliable SolidJS rendering) */ const blurStyle = { 'backdrop-filter': 'blur(12px)', '-webkit-backdrop-filter': 'blur(12px)', }; /** * SVG path for the margin ring (evenodd). * Outer rect = full bounds, inner path = glow ring polygon. * Used for the dark tint fill — covers entire margin strip with no gaps, * including diagonal areas that blur strip divs can't darken uniformly. */ const marginRingPath = () => { const { w, h } = size(); if (w === 0 || h === 0) return ''; return [ // Outer path: matches CHROME_CLIP_PATH exactly (8 vertices) `M 0,0 L ${w - 182},0 L ${w - 140},42 L ${w - 16},42 L ${w},58 L ${w},${h} L 20,${h} L 0,${h - 20} Z`, // Inner path: glow ring (6px inset) `M 6,6 L ${w - 185},6 L ${w - 143},48 L ${w - 19},48 L ${w - 6},61 L ${w - 6},${h - 6} L 23,${h - 6} L 6,${h - 23} Z`, ].join(' '); }; return (
{/* Diagonal/notch blur strips — rendered FIRST so straight strips sit on top, hiding anti-aliased edges at joints. Parent clip-path trims excess. */} {/* BL corner diagonal: 45° strip covering margin between chrome (0,h-20)→(20,h) and glow (6,h-23)→(23,h-6) */} {size().w > 0 && (
)} {/* TR notch left diagonal: 45° strip covering margin along (w-182,0)→(w-140,42) */} {size().w > 0 && (
)} {/* TR notch horizontal: margin strip along bottom of notch (y=42 to y=48) */} {size().w > 0 && (
)} {/* TR notch right diagonal: 45° strip covering margin along (w-16,42)→(w,58) */} {size().w > 0 && (
)} {/* Straight edge blur strips — on top of diagonal divs to hide seams */}
{/* Dark tint ring — SVG evenodd covers entire margin strip continuously, including diagonals where blur divs alone can't darken uniformly */} {/* Base ring — always visible, subtle glow */} {/* Sweep — single path masked by conic-gradient for smooth fade on both edges */}
); };