@leftium/logo 0.0.2 → 0.1.0

package/dist/app-logo/iconify.d.ts

@@ -0,0 +1,21 @@
+import type { IconSourceType } from './types.js';
+/**
+ * Resolved icon data ready for rendering/export.
+ */
+export interface ResolvedIcon {
+    /** The raw SVG markup (without the outer <svg> wrapper for Iconify/data-url/svg sources) */
+    svgContent: string;
+    /** The viewBox of the original icon SVG */
+    viewBox: string;
+    /** Whether the icon uses currentColor (monochrome) vs hardcoded colors (multicolor) */
+    isMonochrome: boolean;
+    /** The detected source type */
+    sourceType: IconSourceType;
+}
+/**
+ * Resolve an icon prop value to SVG data ready for rendering.
+ *
+ * Handles all 4 source types: Iconify ID, emoji, inline SVG, data URL.
+ * For emoji, returns a special SVG text element instead of path data.
+ */
+export declare function resolveIcon(icon: string): Promise<ResolvedIcon>;

package/dist/app-logo/iconify.js

@@ -0,0 +1,134 @@
+import { detectIconSource } from './defaults.js';
+/** Cached Iconify SVG strings keyed by icon ID */
+const iconCache = new Map();
+/**
+ * Fetch an Iconify icon SVG by its ID (e.g. "mdi:rocket-launch").
+ * Results are cached in memory for the session.
+ */
+async function fetchIconifySvg(iconId) {
+    const cached = iconCache.get(iconId);
+    if (cached)
+        return cached;
+    const [prefix, name] = iconId.split(':');
+    if (!prefix || !name) {
+        throw new Error(`Invalid Iconify icon ID: "${iconId}". Expected format: "prefix:name"`);
+    }
+    const url = `https://api.iconify.design/${prefix}/${name}.svg`;
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to fetch icon "${iconId}": ${response.status} ${response.statusText}`);
+    }
+    const svg = await response.text();
+    iconCache.set(iconId, svg);
+    return svg;
+}
+/**
+ * Decode a data URL to an SVG string.
+ * Supports both base64 and plain-text encoded data URLs.
+ */
+function decodeDataUrl(dataUrl) {
+    // data:image/svg+xml;base64,PHN2Zy...
+    // data:image/svg+xml,%3Csvg...
+    // data:image/svg+xml;utf8,<svg...
+    const commaIndex = dataUrl.indexOf(',');
+    if (commaIndex === -1) {
+        throw new Error('Invalid data URL: no comma separator found');
+    }
+    const meta = dataUrl.substring(0, commaIndex);
+    const data = dataUrl.substring(commaIndex + 1);
+    if (meta.includes(';base64')) {
+        return atob(data);
+    }
+    // URL-encoded or UTF-8
+    return decodeURIComponent(data);
+}
+/**
+ * Parse viewBox from an SVG string. Falls back to "0 0 24 24" (Iconify default).
+ */
+function parseViewBox(svg) {
+    const match = svg.match(/viewBox=["']([^"']+)["']/);
+    return match?.[1] ?? '0 0 24 24';
+}
+/**
+ * Extract the inner content of an SVG element (everything between <svg> and </svg>).
+ */
+function extractSvgContent(svg) {
+    // Remove the outer <svg ...> and </svg> tags
+    const openTagEnd = svg.indexOf('>');
+    const closeTagStart = svg.lastIndexOf('</svg>');
+    if (openTagEnd === -1 || closeTagStart === -1) {
+        return svg; // Return as-is if we can't parse
+    }
+    return svg.substring(openTagEnd + 1, closeTagStart).trim();
+}
+/**
+ * Detect whether an SVG is monochrome (uses currentColor) or multicolor (hardcoded fills).
+ *
+ * Heuristic: if the SVG contains "currentColor" it's monochrome.
+ * If it contains hardcoded color values (hex, rgb, named colors) in fill/stroke attributes,
+ * it's multicolor.
+ */
+function detectMonochrome(svg) {
+    // If it explicitly uses currentColor, it's monochrome
+    if (svg.includes('currentColor'))
+        return true;
+    // Check for hardcoded fill/stroke colors (hex, rgb, named colors)
+    // If we find fill or stroke with a value that's not "none" or "currentColor", it's multicolor
+    const colorAttrPattern = /(?:fill|stroke)=["'](?!none|currentColor)([^"']+)["']/gi;
+    const hasHardcodedColors = colorAttrPattern.test(svg);
+    // Also check for fill/stroke in style attributes
+    const styleColorPattern = /(?:fill|stroke)\s*:\s*(?!none|currentColor)([^;"']+)/gi;
+    const hasStyleColors = styleColorPattern.test(svg);
+    if (hasHardcodedColors || hasStyleColors)
+        return false;
+    // No colors found at all -- treat as monochrome (will use currentColor behavior)
+    return true;
+}
+/**
+ * Resolve an icon prop value to SVG data ready for rendering.
+ *
+ * Handles all 4 source types: Iconify ID, emoji, inline SVG, data URL.
+ * For emoji, returns a special SVG text element instead of path data.
+ */
+export async function resolveIcon(icon) {
+    const sourceType = detectIconSource(icon);
+    switch (sourceType) {
+        case 'iconify': {
+            const svg = await fetchIconifySvg(icon);
+            return {
+                svgContent: extractSvgContent(svg),
+                viewBox: parseViewBox(svg),
+                isMonochrome: detectMonochrome(svg),
+                sourceType
+            };
+        }
+        case 'data-url': {
+            const svg = decodeDataUrl(icon);
+            return {
+                svgContent: extractSvgContent(svg),
+                viewBox: parseViewBox(svg),
+                isMonochrome: detectMonochrome(svg),
+                sourceType
+            };
+        }
+        case 'svg': {
+            const svg = icon.trim();
+            return {
+                svgContent: extractSvgContent(svg),
+                viewBox: parseViewBox(svg),
+                isMonochrome: detectMonochrome(svg),
+                sourceType
+            };
+        }
+        case 'emoji': {
+            // For emoji, we create a text-based SVG element
+            // The viewBox is set to a standard size; the emoji is centered
+            return {
+                svgContent: `<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="80" font-family="'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif">${icon}</text>`,
+                viewBox: '0 0 100 100',
+                isMonochrome: false,
+                sourceType
+            };
+        }
+    }
+}

package/dist/app-logo/squircle.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Superellipse / corner-shape path generation.
+ *
+ * Follows the CSS Borders Level 4 specification for corner-shape rendering.
+ * Maps CornerShape keywords to superellipse parameters and generates SVG paths.
+ *
+ * The CSS spec defines the curve parametrically:
+ *   K = 2^abs(curvature)
+ *   For T in [0, 1]: point = mapPointToCorner(T^K, (1-T)^K)
+ *
+ * @see https://drafts.csswg.org/css-borders-4/#corner-shape-rendering
+ */
+import type { CornerShape } from './types.js';
+/**
+ * Map a CornerShape keyword or superellipse(n) to its numeric curvature parameter.
+ *
+ * CSS spec keyword -> superellipse parameter:
+ *   round       -> 1    (standard elliptical arc)
+ *   squircle    -> 2    (iOS-style continuous curvature)
+ *   square      -> Infinity  (sharp 90 deg corner)
+ *   bevel       -> 0    (straight diagonal cut)
+ *   scoop       -> -1   (inward concave curve)
+ *   notch       -> -Infinity (inward right-angle cut)
+ */
+export declare function cornerShapeToK(shape: CornerShape): number;
+/**
+ * Generate an SVG path `d` attribute for a rounded rectangle with a
+ * superellipse corner shape.
+ *
+ * The curve for each corner is sampled parametrically per the CSS Borders L4 spec:
+ *   K = 2^abs(curvature)
+ *   point(T) = mapPointToCorner(T^K, (1-T)^K) for T in [0, 1]
+ *
+ * For convex shapes (curvature > 0), the curve bulges outward.
+ * For concave shapes (curvature < 0), the center reference flips to the
+ * outer corner, creating inward "scoop" curves.
+ *
+ * @param size - Square side length in pixels
+ * @param cornerRadius - Corner radius as percentage (0-50)
+ * @param cornerShape - CornerShape keyword or superellipse(n)
+ * @returns SVG path `d` string
+ */
+export declare function generateCornerPath(size: number, cornerRadius: number, cornerShape: CornerShape): string;

package/dist/app-logo/squircle.js

@@ -0,0 +1,213 @@
+/**
+ * Superellipse / corner-shape path generation.
+ *
+ * Follows the CSS Borders Level 4 specification for corner-shape rendering.
+ * Maps CornerShape keywords to superellipse parameters and generates SVG paths.
+ *
+ * The CSS spec defines the curve parametrically:
+ *   K = 2^abs(curvature)
+ *   For T in [0, 1]: point = mapPointToCorner(T^K, (1-T)^K)
+ *
+ * @see https://drafts.csswg.org/css-borders-4/#corner-shape-rendering
+ */
+/** Number of line segments to sample per corner arc. */
+const SEGMENTS = 64;
+/**
+ * Map a CornerShape keyword or superellipse(n) to its numeric curvature parameter.
+ *
+ * CSS spec keyword -> superellipse parameter:
+ *   round       -> 1    (standard elliptical arc)
+ *   squircle    -> 2    (iOS-style continuous curvature)
+ *   square      -> Infinity  (sharp 90 deg corner)
+ *   bevel       -> 0    (straight diagonal cut)
+ *   scoop       -> -1   (inward concave curve)
+ *   notch       -> -Infinity (inward right-angle cut)
+ */
+export function cornerShapeToK(shape) {
+    switch (shape) {
+        case 'round':
+            return 1;
+        case 'squircle':
+            return 2;
+        case 'square':
+            return Infinity;
+        case 'bevel':
+            return 0;
+        case 'scoop':
+            return -1;
+        case 'notch':
+            return -Infinity;
+        default: {
+            // superellipse(n) -- parse the numeric value
+            const match = shape.match(/^superellipse\((.+)\)$/);
+            if (match) {
+                const val = match[1].trim();
+                if (val === 'infinity')
+                    return Infinity;
+                if (val === '-infinity')
+                    return -Infinity;
+                const n = Number(val);
+                if (!isNaN(n))
+                    return n;
+            }
+            return 1; // fallback to round
+        }
+    }
+}
+/**
+ * Generate an SVG path `d` attribute for a rounded rectangle with a
+ * superellipse corner shape.
+ *
+ * The curve for each corner is sampled parametrically per the CSS Borders L4 spec:
+ *   K = 2^abs(curvature)
+ *   point(T) = mapPointToCorner(T^K, (1-T)^K) for T in [0, 1]
+ *
+ * For convex shapes (curvature > 0), the curve bulges outward.
+ * For concave shapes (curvature < 0), the center reference flips to the
+ * outer corner, creating inward "scoop" curves.
+ *
+ * @param size - Square side length in pixels
+ * @param cornerRadius - Corner radius as percentage (0-50)
+ * @param cornerShape - CornerShape keyword or superellipse(n)
+ * @returns SVG path `d` string
+ */
+export function generateCornerPath(size, cornerRadius, cornerShape) {
+    // No rounding needed
+    if (cornerRadius <= 0) {
+        return `M0,0 H${size} V${size} H0 Z`;
+    }
+    const curvature = cornerShapeToK(cornerShape);
+    // square (Infinity): sharp corners, radius is ignored
+    if (curvature === Infinity) {
+        return `M0,0 H${size} V${size} H0 Z`;
+    }
+    // Convert percentage to pixels, clamped to half the side
+    const r = Math.min((cornerRadius / 100) * size, size / 2);
+    // notch (-Infinity): inward right-angle cut at each corner.
+    // Goes from tangent point on one edge INWARD to the corner-region center,
+    // then back out to the tangent point on the other edge (concave square corner).
+    if (curvature === -Infinity) {
+        return [
+            `M${rd(r)},0`,
+            `H${rd(size - r)}`,
+            // top-right: inward to center of corner region, then out
+            `L${rd(size - r)},${rd(r)}`,
+            `L${rd(size)},${rd(r)}`,
+            `V${rd(size - r)}`,
+            // bottom-right: inward to center, then out
+            `L${rd(size - r)},${rd(size - r)}`,
+            `L${rd(size - r)},${rd(size)}`,
+            `H${rd(r)}`,
+            // bottom-left: inward to center, then out
+            `L${rd(r)},${rd(size - r)}`,
+            `L0,${rd(size - r)}`,
+            `V${rd(r)}`,
+            // top-left: inward to center, then out
+            `L${rd(r)},${rd(r)}`,
+            `L${rd(r)},0`,
+            `Z`
+        ].join(' ');
+    }
+    // bevel (0): straight diagonal cut from tangent to tangent
+    if (curvature === 0) {
+        return [
+            `M${rd(r)},0`,
+            `H${rd(size - r)}`,
+            `L${rd(size)},${rd(r)}`,
+            `V${rd(size - r)}`,
+            `L${rd(size - r)},${rd(size)}`,
+            `H${rd(r)}`,
+            `L0,${rd(size - r)}`,
+            `V${rd(r)}`,
+            `Z`
+        ].join(' ');
+    }
+    // round (1): use SVG arc commands for a perfect quarter-ellipse.
+    // This matches what browsers render for border-radius and is exact,
+    // unlike the parametric approximation.
+    if (curvature === 1) {
+        return [
+            `M${rd(r)},0`,
+            `H${rd(size - r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 ${rd(size)},${rd(r)}`,
+            `V${rd(size - r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 ${rd(size - r)},${rd(size)}`,
+            `H${rd(r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 0,${rd(size - r)}`,
+            `V${rd(r)}`,
+            `A${rd(r)},${rd(r)} 0 0 1 ${rd(r)},0`,
+            `Z`
+        ].join(' ');
+    }
+    // Parametric superellipse curve.
+    // K = 2^abs(curvature) per the CSS spec: "Let K be 0.5^(-abs(curvature))"
+    const K = Math.pow(2, Math.abs(curvature));
+    // Invert: for the outline path (not clip-out), convex shapes use outer corner as ref
+    const useOuterAsRef = curvature > 0;
+    // Sample the corner arc and return SVG line-to commands.
+    //
+    // The CSS spec generates a "clip-out" path (what to REMOVE from the rect).
+    // Since we generate the OUTLINE path (what to KEEP), we invert the reference:
+    // - Convex (squircle, round): curveCenter = outerCorner (curve bows outward)
+    // - Concave (scoop): curveCenter = cornerCenter (curve bows inward)
+    //
+    // The parametric curve maps (T^K, (1-T)^K) through mapPointToCorner,
+    // which scales by vectors from curveCenter to the two tangent points.
+    const parts = [`M${rd(size - r)},0`];
+    // Top-right corner: start=(size-r, 0), end=(size, r), outer=(size, 0), center=(size-r, r)
+    parts.push(sampleCorner(size - r, 0, size, r, size, 0, size - r, r, K, useOuterAsRef));
+    // Right edge
+    parts.push(`L${rd(size)},${rd(size - r)}`);
+    // Bottom-right corner: start=(size, size-r), end=(size-r, size), outer=(size, size), center=(size-r, size-r)
+    parts.push(sampleCorner(size, size - r, size - r, size, size, size, size - r, size - r, K, useOuterAsRef));
+    // Bottom edge
+    parts.push(`L${rd(r)},${rd(size)}`);
+    // Bottom-left corner: start=(r, size), end=(0, size-r), outer=(0, size), center=(r, size-r)
+    parts.push(sampleCorner(r, size, 0, size - r, 0, size, r, size - r, K, useOuterAsRef));
+    // Left edge
+    parts.push(`L0,${rd(r)}`);
+    // Top-left corner: start=(0, r), end=(r, 0), outer=(0, 0), center=(r, r)
+    parts.push(sampleCorner(0, r, r, 0, 0, 0, r, r, K, useOuterAsRef));
+    parts.push('Z');
+    return parts.join(' ');
+}
+/**
+ * Sample a superellipse corner arc as SVG line-to commands.
+ *
+ * @param sx, sy - Start point (tangent point on the "start" edge)
+ * @param ex, ey - End point (tangent point on the "end" edge)
+ * @param ox, oy - Outer corner point (the actual rectangle corner)
+ * @param cx, cy - Center point (diagonally opposite the outer corner within the corner region)
+ * @param K - Exponent: 2^abs(curvature)
+ * @param useOuterAsRef - Whether to use outer corner as the curve reference point
+ */
+function sampleCorner(sx, sy, ex, ey, ox, oy, cx, cy, K, useOuterAsRef) {
+    // For convex shapes (outline path), use outer corner so curve bows outward.
+    // For concave shapes (outline path), use inner center so curve bows inward.
+    const refX = useOuterAsRef ? ox : cx;
+    const refY = useOuterAsRef ? oy : cy;
+    // Vectors from curveCenter to the tangent points
+    const toEndX = ex - refX;
+    const toEndY = ey - refY;
+    const toStartX = sx - refX;
+    const toStartY = sy - refY;
+    const cmds = [];
+    // Sample T from 0 to 1 (exclusive of 0 since we're already at start)
+    for (let i = 1; i <= SEGMENTS; i++) {
+        const t = i / SEGMENTS;
+        const xParam = Math.pow(t, K);
+        const yParam = Math.pow(1 - t, K);
+        // mapPointToCorner(xParam, yParam):
+        //   refPoint + toEnd * xParam + toStart * yParam
+        const px = refX + toEndX * xParam + toStartX * yParam;
+        const py = refY + toEndY * xParam + toStartY * yParam;
+        cmds.push(`L${rd(px)},${rd(py)}`);
+    }
+    return cmds.join(' ');
+}
+/**
+ * Round a number to 2 decimal places for clean SVG output.
+ */
+function rd(n) {
+    return Math.round(n * 100) / 100;
+}

package/dist/app-logo/types.d.ts

@@ -0,0 +1,37 @@
+export type IconColorMode = 'auto' | 'original' | 'monochrome' | 'grayscale' | 'grayscale-tint' | {
+    hue: number;
+    saturation?: number;
+};
+export type CornerShape = 'round' | 'squircle' | 'square' | 'bevel' | 'scoop' | 'notch' | `superellipse(${number})`;
+export interface GradientConfig {
+    colors: string[];
+    stops?: number[];
+    angle?: number;
+    position?: number;
+    scale?: number;
+}
+export interface AppLogoProps {
+    icon?: string;
+    iconColor?: string;
+    iconColorMode?: IconColorMode;
+    iconSize?: number;
+    iconOffsetX?: number;
+    iconOffsetY?: number;
+    iconRotation?: number;
+    cornerRadius?: number;
+    cornerShape?: CornerShape;
+    background?: string | GradientConfig;
+    size?: number;
+}
+export interface AppLogoConfig {
+    icon: string;
+    iconColor?: string;
+    iconColorMode?: IconColorMode;
+    background?: AppLogoProps['background'];
+    cornerRadius?: number;
+    cornerShape?: CornerShape;
+    logo?: Partial<AppLogoProps>;
+    favicon?: Partial<AppLogoProps>;
+}
+/** Detected source type of the icon prop value */
+export type IconSourceType = 'iconify' | 'emoji' | 'svg' | 'data-url';

package/dist/app-logo/types.js

@@ -0,0 +1 @@
+export {};

package/dist/assets/logo-parts/glow-squircle.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Squircle variant of glow (50% radius, K=2 superellipse) -->
+
+<svg
+   width="1375.7469"
+   height="1375.7469"
+   viewBox="0 0 1375.7469 1375.7469"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1">
+    <filter
+       style="color-interpolation-filters:sRGB"
+       id="filter3"
+       x="-0.10799999"
+       y="-0.108"
+       width="1.216"
+       height="1.216">
+      <feGaussianBlur
+         stdDeviation="50.911691"
+         id="feGaussianBlur3" />
+    </filter>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-122.54569,-162.64743)">
+    <g
+       id="g1"
+       transform="translate(253.40376,284.58137)"
+       style="display:inline">
+      <g
+         id="g8"
+         style="display:inline">
+        <path
+           style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter3)"
+           id="path2"
+           transform="translate(-8.6700182, 0.25409326)"
+           d="M565.69,0 L600.22,0 L633.15,0 L664.52,0 L694.39,0.01 L722.8,0.02 L749.81,0.04 L775.45,0.08 L799.78,0.14 L822.83,0.22 L844.67,0.34 L865.32,0.49 L884.84,0.7 L903.27,0.96 L920.64,1.3 L937,1.71 L952.38,2.21 L966.84,2.82 L980.4,3.54 L993.11,4.39 L1004.99,5.39 L1016.1,6.56 L1026.45,7.9 L1036.09,9.44 L1045.05,11.19 L1053.37,13.17 L1061.07,15.41 L1068.18,17.92 L1074.74,20.72 L1080.77,23.85 L1086.31,27.31 L1091.38,31.14 L1096.02,35.36 L1100.23,39.99 L1104.06,45.06 L1107.52,50.6 L1110.65,56.63 L1113.45,63.19 L1115.96,70.31 L1118.2,78 L1120.18,86.32 L1121.94,95.28 L1123.47,104.92 L1124.81,115.27 L1125.98,126.38 L1126.98,138.26 L1127.83,150.97 L1128.55,164.53 L1129.16,178.99 L1129.66,194.37 L1130.08,210.73 L1130.41,228.11 L1130.67,246.53 L1130.88,266.05 L1131.03,286.7 L1131.15,308.54 L1131.23,331.59 L1131.29,355.92 L1131.33,381.56 L1131.35,408.57 L1131.36,436.98 L1131.37,466.85 L1131.37,498.22 L1131.37,531.15 L1131.37,565.69 L1131.37,565.69 L1131.37,600.22 L1131.37,633.15 L1131.37,664.52 L1131.36,694.39 L1131.35,722.8 L1131.33,749.81 L1131.29,775.45 L1131.23,799.78 L1131.15,822.83 L1131.03,844.67 L1130.88,865.32 L1130.67,884.84 L1130.41,903.27 L1130.08,920.64 L1129.66,937 L1129.16,952.38 L1128.55,966.84 L1127.83,980.4 L1126.98,993.11 L1125.98,1004.99 L1124.81,1016.1 L1123.47,1026.45 L1121.94,1036.09 L1120.18,1045.05 L1118.2,1053.37 L1115.96,1061.07 L1113.45,1068.18 L1110.65,1074.74 L1107.52,1080.77 L1104.06,1086.31 L1100.23,1091.38 L1096.02,1096.02 L1091.38,1100.23 L1086.31,1104.06 L1080.77,1107.52 L1074.74,1110.65 L1068.18,1113.45 L1061.07,1115.96 L1053.37,1118.2 L1045.05,1120.18 L1036.09,1121.94 L1026.45,1123.47 L1016.1,1124.81 L1004.99,1125.98 L993.11,1126.98 L980.4,1127.83 L966.84,1128.55 L952.38,1129.16 L937,1129.66 L920.64,1130.08 L903.27,1130.41 L884.84,1130.67 L865.32,1130.88 L844.67,1131.03 L822.83,1131.15 L799.78,1131.23 L775.45,1131.29 L749.81,1131.33 L722.8,1131.35 L694.39,1131.36 L664.52,1131.37 L633.15,1131.37 L600.22,1131.37 L565.69,1131.37 L565.69,1131.37 L531.15,1131.37 L498.22,1131.37 L466.85,1131.37 L436.98,1131.36 L408.57,1131.35 L381.56,1131.33 L355.92,1131.29 L331.59,1131.23 L308.54,1131.15 L286.7,1131.03 L266.05,1130.88 L246.53,1130.67 L228.11,1130.41 L210.73,1130.08 L194.37,1129.66 L178.99,1129.16 L164.53,1128.55 L150.97,1127.83 L138.26,1126.98 L126.38,1125.98 L115.27,1124.81 L104.92,1123.47 L95.28,1121.94 L86.32,1120.18 L78,1118.2 L70.31,1115.96 L63.19,1113.45 L56.63,1110.65 L50.6,1107.52 L45.06,1104.06 L39.99,1100.23 L35.36,1096.02 L31.14,1091.38 L27.31,1086.31 L23.85,1080.77 L20.72,1074.74 L17.92,1068.18 L15.41,1061.07 L13.17,1053.37 L11.19,1045.05 L9.44,1036.09 L7.9,1026.45 L6.56,1016.1 L5.39,1004.99 L4.39,993.11 L3.54,980.4 L2.82,966.84 L2.21,952.38 L1.71,937 L1.3,920.64 L0.96,903.27 L0.7,884.84 L0.49,865.32 L0.34,844.67 L0.22,822.83 L0.14,799.78 L0.08,775.45 L0.04,749.81 L0.02,722.8 L0.01,694.39 L0,664.52 L0,633.15 L0,600.22 L0,565.69 L0,565.69 L0,531.15 L0,498.22 L0,466.85 L0.01,436.98 L0.02,408.57 L0.04,381.56 L0.08,355.92 L0.14,331.59 L0.22,308.54 L0.34,286.7 L0.49,266.05 L0.7,246.53 L0.96,228.11 L1.3,210.73 L1.71,194.37 L2.21,178.99 L2.82,164.53 L3.54,150.97 L4.39,138.26 L5.39,126.38 L6.56,115.27 L7.9,104.92 L9.44,95.28 L11.19,86.32 L13.17,78 L15.41,70.31 L17.92,63.19 L20.72,56.63 L23.85,50.6 L27.31,45.06 L31.14,39.99 L35.36,35.36 L39.99,31.14 L45.06,27.31 L50.6,23.85 L56.63,20.72 L63.19,17.92 L70.31,15.41 L78,13.17 L86.32,11.19 L95.28,9.44 L104.92,7.9 L115.27,6.56 L126.38,5.39 L138.26,4.39 L150.97,3.54 L164.53,2.82 L178.99,2.21 L194.37,1.71 L210.73,1.3 L228.11,0.96 L246.53,0.7 L266.05,0.49 L286.7,0.34 L308.54,0.22 L331.59,0.14 L355.92,0.08 L381.56,0.04 L408.57,0.02 L436.98,0.01 L466.85,0 L498.22,0 L531.15,0 L565.69,0 Z" />
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/index.d.ts

@@ -1,5 +1,10 @@
-import LeftiumLogo from './LeftiumLogo.svelte';
-import toggleAnimation from './LeftiumLogo.svelte';
-import setAnimated from './LeftiumLogo.svelte';
+import LeftiumLogo, { toggleAnimation, setAnimated } from './LeftiumLogo.svelte';
 import favicon from './assets/favicon.svg';
 export { LeftiumLogo, toggleAnimation, setAnimated, favicon };
+export { default as AppLogo } from './AppLogo.svelte';
+export type { AppLogoProps, AppLogoConfig, GradientConfig, IconColorMode, CornerShape } from './app-logo/types.js';
+export { generateAppLogoSvg } from './app-logo/generate-svg.js';
+export { generateAppLogoPng } from './app-logo/generate-png.js';
+export { LEFTIUM_GRADIENT } from './app-logo/defaults.js';
+export { generateCornerPath, cornerShapeToK } from './app-logo/squircle.js';
+export { applyColorMode } from './app-logo/color-transform.js';

package/dist/index.js

@@ -1,6 +1,12 @@
 // Reexport your entry components here
-import LeftiumLogo from './LeftiumLogo.svelte';
-import toggleAnimation from './LeftiumLogo.svelte';
-import setAnimated from './LeftiumLogo.svelte';
+import LeftiumLogo, { toggleAnimation, setAnimated } from './LeftiumLogo.svelte';
 import favicon from './assets/favicon.svg';
 export { LeftiumLogo, toggleAnimation, setAnimated, favicon };
+// Phase 1: AppLogo component and generation utilities
+export { default as AppLogo } from './AppLogo.svelte';
+export { generateAppLogoSvg } from './app-logo/generate-svg.js';
+export { generateAppLogoPng } from './app-logo/generate-png.js';
+export { LEFTIUM_GRADIENT } from './app-logo/defaults.js';
+// Phase 2: Advanced styling utilities
+export { generateCornerPath, cornerShapeToK } from './app-logo/squircle.js';
+export { applyColorMode } from './app-logo/color-transform.js';

package/dist/webgl-ripples/webgl-ripples.d.ts

@@ -16,7 +16,3 @@ export declare class Ripples {
 	set(property: string, value: unknown): void;
 	updateSize(): void;
 }
-
-export default Ripples;
-
-export declare function isWebGLSupported(): boolean;

package/dist/webgl-ripples/webgl-ripples.js

@@ -1 +1 @@
-const isBrowser="undefined"!=typeof window&&"undefined"!=typeof document;let gl=null,config=null,transparentPixels=null;function isPercentage(e){return"%"===e[e.length-1]}function loadConfig(){if(!isBrowser)return null;const e=document.createElement("canvas");if(gl=e.getContext("webgl")||e.getContext("experimental-webgl"),!gl)return null;const t={};if(["OES_texture_float","OES_texture_half_float","OES_texture_float_linear","OES_texture_half_float_linear"].forEach(e=>{const i=gl.getExtension(e);i&&(t[e]=i)}),!t.OES_texture_float)return null;const i=[];function r(e,i,r){const n="OES_texture_"+e,s=n+"_linear",o=s in t,a=[n];return o&&a.push(s),{type:i,arrayType:r,linearSupport:o,extensions:a}}i.push(r("float",gl.FLOAT,Float32Array)),t.OES_texture_half_float&&i.push(r("half_float",t.OES_texture_half_float.HALF_FLOAT_OES,null));const n=gl.createTexture(),s=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,s),gl.bindTexture(gl.TEXTURE_2D,n),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);let o=null;for(let e=0;e<i.length;e++)if(gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,32,32,0,gl.RGBA,i[e].type,null),gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,n,0),gl.checkFramebufferStatus(gl.FRAMEBUFFER)===gl.FRAMEBUFFER_COMPLETE){o=i[e];break}return o}function createImageData(e,t){if(!isBrowser)return null;try{return new ImageData(e,t)}catch{return document.createElement("canvas").getContext("2d").createImageData(e,t)}}function translateBackgroundPosition(e){const t=e.split(" ");if(1!==t.length)return t.map(t=>{switch(e){case"center":return"50%";case"top":case"left":return"0";case"right":case"bottom":return"100%";default:return t}});switch(e){case"center":return["50%","50%"];case"top":return["50%","0"];case"bottom":return["50%","100%"];case"left":return["0","50%"];case"right":return["100%","50%"];default:return[e,"50%"]}}function createProgram(e,t){function i(e,t){const i=gl.createShader(e);if(gl.shaderSource(i,t),gl.compileShader(i),!gl.getShaderParameter(i,gl.COMPILE_STATUS))throw new Error("compile error: "+gl.getShaderInfoLog(i));return i}const r={};if(r.id=gl.createProgram(),gl.attachShader(r.id,i(gl.VERTEX_SHADER,e)),gl.attachShader(r.id,i(gl.FRAGMENT_SHADER,t)),gl.linkProgram(r.id),!gl.getProgramParameter(r.id,gl.LINK_STATUS))throw new Error("link error: "+gl.getProgramInfoLog(r.id));r.uniforms={},r.locations={},gl.useProgram(r.id),gl.enableVertexAttribArray(0);let n,s,o=/uniform (\w+) (\w+)/g,a=e+t;for(;null!=(n=o.exec(a));)s=n[2],r.locations[s]=gl.getUniformLocation(r.id,s);return r}function bindTexture(e,t){gl.activeTexture(gl.TEXTURE0+(t||0)),gl.bindTexture(gl.TEXTURE_2D,e)}function extractUrl(e){const t=/url\(["']?([^"']*)["']?\)/.exec(e);return null==t?null:t[1]}function isDataUri(e){return e.match(/^data:/)}isBrowser&&(config=loadConfig(),transparentPixels=createImageData(32,32));const DEFAULTS={imageUrl:null,dropRadius:15,perturbance:.04,resolution:512,interactive:!0,crossOrigin:"",wavePropagation:2,dampening:.997};class Ripples{constructor(e,t){if(!isBrowser)return console.warn("Ripples: Cannot initialize in non-browser environment"),void(this.destroyed=!0);if(this.el="string"==typeof e?document.querySelector(e):e,!this.el)return void console.error("Ripples: Element not found.",e);this.options={...DEFAULTS,...t},this.interactive=this.options.interactive,this.resolution=this.options.resolution,this.textureDelta=new Float32Array([1/this.resolution,1/this.resolution]),this.perturbance=this.options.perturbance,this.dropRadius=this.options.dropRadius,this.crossOrigin=this.options.crossOrigin,this.imageUrl=this.options.imageUrl;const i=this.el.clientWidth,r=this.el.clientHeight;if(0===i||0===r)return console.warn("Ripples: Element has zero dimensions. Deferring initialization."),this.pendingInitialization=!0,this.destroyed=!1,this.visible=!1,this.running=!1,this.inited=!1,void this.observeVisibility();const n=document.createElement("canvas");if(n.width=i,n.height=r,this.canvas=n,this.canvas.style.position="absolute",this.canvas.style.inset=0,0===n.width||0===n.height)return console.warn("Ripples: Canvas has zero dimensions. Deferring initialization."),this.pendingInitialization=!0,this.destroyed=!1,this.visible=!1,this.running=!1,this.inited=!1,void this.observeVisibility();if(this.el.append(n),this.context=gl=n.getContext("webgl")||n.getContext("experimental-webgl"),!this.context)return console.error("Ripples: WebGL is not supported by your browser or is disabled."),void(this.destroyed=!0);config&&config.extensions&&config.extensions.forEach(e=>{gl.getExtension(e)}),this.abortController=new AbortController;const s=this.signal=this.abortController.signal;this.updateSize=this.updateSize.bind(this),window.addEventListener("resize",this.updateSize,{signal:s}),this.textures=[],this.framebuffers=[],this.bufferWriteIndex=0,this.bufferReadIndex=1;const o=config?config.arrayType:null,a=o?new o(this.resolution*this.resolution*4):null;for(let e=0;e<2;e++){const e=gl.createTexture(),t=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,t),gl.bindTexture(gl.TEXTURE_2D,e),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,config&&config.linearSupport?gl.LINEAR:gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,config&&config.linearSupport?gl.LINEAR:gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,this.resolution,this.resolution,0,gl.RGBA,config&&config.type||gl.UNSIGNED_BYTE,a),gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,e,0),this.textures.push(e),this.framebuffers.push(t)}this.quad=gl.createBuffer(),gl.bindBuffer(gl.ARRAY_BUFFER,this.quad),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,1,1,-1,1]),gl.STATIC_DRAW),this.initShaders(),this.initTexture(),this.setTransparentTexture(),this.originalCssBackgroundImage=getComputedStyle(this.el).backgroundImage,this.originalInlineCss=this.el.style.backgroundImage,this.loadImage(),gl.clearColor(0,0,0,0),gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA),this.visible=!0,this.running=!0,this.inited=!0,this.destroyed=!1,this.setupPointerEvents(),this.animationId=null;const l=()=>{this.destroyed||(this.step(),this.running||this.needsRender?this.animationId=requestAnimationFrame(l):this.animationId=null)};return this.animationId=requestAnimationFrame(l),this}observeVisibility(){isBrowser&&this.el&&("undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{if(this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}else this.inited&&this.canvas&&this.updateSize()}),this.resizeObserver.observe(this.el)),"undefined"!=typeof IntersectionObserver&&(this.intersectionObserver=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting&&this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}})}),this.intersectionObserver.observe(this.el)),this.resizeObserver||this.intersectionObserver||(this.visibilityCheckInterval=setInterval(()=>{if(this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}},500)))}completeInitialization(){if(!this.pendingInitialization||this.inited)return;console.log("Ripples: Element now visible, completing initialization."),this.pendingInitialization=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityCheckInterval&&(clearInterval(this.visibilityCheckInterval),this.visibilityCheckInterval=null);const e=this.options,t=this.el;Object.assign(this,new Ripples(t,e))}setupPointerEvents(){const e=()=>{const e=Math.max(this.el.clientWidth,this.el.clientHeight),t=Math.max(1,150/e);return Math.min(.04,.01*t)},t=t=>{if(this.visible&&this.running&&this.interactive){const i=t.changedTouches,r=e();for(let e=0;e<i.length;e++)this.dropAtPointer(i[e],1*this.dropRadius,r)}},i=this.signal;this.el.addEventListener("mousemove",t=>{this.visible&&this.running&&this.interactive&&this.dropAtPointer(t,1*this.dropRadius,e())},{signal:i}),this.el.addEventListener("touchmove",t,{signal:i,passive:!1}),this.el.addEventListener("touchstart",t,{signal:i,passive:!0}),this.el.addEventListener("mousedown",e=>{this.visible&&this.running&&this.interactive&&this.dropAtPointer(e,1.5*this.dropRadius,.14)},{signal:i})}loadImage(){gl=this.context;const e=this.imageUrl||extractUrl(this.originalCssBackgroundImage)||extractUrl(getComputedStyle(this.el).backgroundImage);if(e==this.imageSource)return;if(this.imageSource=e,!this.imageSource)return void this.setTransparentTexture();const t=new Image;t.onload=()=>{function e(e){return!(e&e-1)}gl=this.context;const i=e(t.width)&&e(t.height)?gl.REPEAT:gl.CLAMP_TO_EDGE;gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,i),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,i),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,t),this.backgroundWidth=t.width,this.backgroundHeight=t.height},t.onerror=()=>{gl=this.context,this.setTransparentTexture()},t.crossOrigin=isDataUri(this.imageSource)?null:this.crossOrigin,t.src=this.imageSource}step(){this.pendingInitialization||this.destroyed||(gl=this.context,gl&&this.canvas&&0!==this.canvas.width&&0!==this.canvas.height&&this.visible&&(this.computeTextureBoundaries(),this.running&&(this.update(),this.render())))}drawQuad(){gl.bindBuffer(gl.ARRAY_BUFFER,this.quad),gl.vertexAttribPointer(0,2,gl.FLOAT,!1,0,0),gl.drawArrays(gl.TRIANGLE_FAN,0,4)}render(){gl&&this.canvas&&0!==this.canvas.width&&0!==this.canvas.height&&(gl.bindFramebuffer(gl.FRAMEBUFFER,null),gl.viewport(0,0,this.canvas.width,this.canvas.height),gl.enable(gl.BLEND),gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT),gl.useProgram(this.renderProgram.id),bindTexture(this.backgroundTexture,0),bindTexture(this.textures[0],1),gl.uniform1f(this.renderProgram.locations.perturbance,this.perturbance),gl.uniform2fv(this.renderProgram.locations.topLeft,this.renderProgram.uniforms.topLeft),gl.uniform2fv(this.renderProgram.locations.bottomRight,this.renderProgram.uniforms.bottomRight),gl.uniform2fv(this.renderProgram.locations.containerRatio,this.renderProgram.uniforms.containerRatio),gl.uniform1i(this.renderProgram.locations.samplerBackground,0),gl.uniform1i(this.renderProgram.locations.samplerRipples,1),this.drawQuad(),gl.disable(gl.BLEND))}update(){gl&&0!==this.resolution&&(gl.viewport(0,0,this.resolution,this.resolution),gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[this.bufferWriteIndex]),bindTexture(this.textures[this.bufferReadIndex]),gl.useProgram(this.updateProgram.id),gl.uniform1f(this.updateProgram.locations.wavePropagation,this.options.wavePropagation),gl.uniform1f(this.updateProgram.locations.dampening,this.options.dampening),this.drawQuad(),this.swapBufferIndices())}swapBufferIndices(){this.bufferWriteIndex=1-this.bufferWriteIndex,this.bufferReadIndex=1-this.bufferReadIndex}computeTextureBoundaries(){const e=getComputedStyle(this.el),t=e.backgroundSize,i=e.backgroundAttachment,r=translateBackgroundPosition(e.backgroundPosition);let n,s,o;if("fixed"==i)n={left:window.pageXOffset,top:window.pageYOffset},n.width=window.innerWidth,n.height=window.innerHeight;else{const e=this.el.getBoundingClientRect();n={left:e.left+window.pageXOffset,top:e.top+window.pageYOffset},n.width=this.el.clientWidth,n.height=this.el.clientHeight}if("cover"==t){const e=Math.max(n.width/this.backgroundWidth,n.height/this.backgroundHeight);s=this.backgroundWidth*e,o=this.backgroundHeight*e}else if("contain"==t){const e=Math.min(n.width/this.backgroundWidth,n.height/this.backgroundHeight);s=this.backgroundWidth*e,o=this.backgroundHeight*e}else{const e=t.split(" ");s=e[0]||"",o=e[1]||s,isPercentage(s)?s=n.width*parseFloat(s)/100:"auto"!=s&&(s=parseFloat(s)),isPercentage(o)?o=n.height*parseFloat(o)/100:"auto"!=o&&(o=parseFloat(o)),"auto"==s&&"auto"==o?(s=this.backgroundWidth,o=this.backgroundHeight):("auto"==s&&(s=this.backgroundWidth*(o/this.backgroundHeight)),"auto"==o&&(o=this.backgroundHeight*(s/this.backgroundWidth)))}let a=r[0],l=r[1];a=isPercentage(a)?n.left+(n.width-s)*parseFloat(a)/100:n.left+parseFloat(a),l=isPercentage(l)?n.top+(n.height-o)*parseFloat(l)/100:n.top+parseFloat(l);const g=this.el.getBoundingClientRect(),h=g.left+window.pageXOffset,d=g.top+window.pageYOffset;this.renderProgram.uniforms.topLeft=new Float32Array([(h-a)/s,(d-l)/o]),this.renderProgram.uniforms.bottomRight=new Float32Array([this.renderProgram.uniforms.topLeft[0]+this.el.clientWidth/s,this.renderProgram.uniforms.topLeft[1]+this.el.clientHeight/o]);const c=Math.max(this.canvas.width,this.canvas.height);this.renderProgram.uniforms.containerRatio=new Float32Array([this.canvas.width/c,this.canvas.height/c])}initShaders(){if(!gl)return;const e=["attribute vec2 vertex;","varying vec2 coord;","void main() {","coord = vertex * 0.5 + 0.5;","gl_Position = vec4(vertex, 0.0, 1.0);","}"].join("\n");this.dropProgram=createProgram(e,["precision highp float;","const float PI = 3.141592653589793;","uniform sampler2D texture;","uniform vec2 center;","uniform float radius;","uniform float strength;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);","drop = 0.5 - cos(drop * PI) * 0.5;","info.r += drop * strength;","gl_FragColor = info;","}"].join("\n")),this.updateProgram=createProgram(e,["precision highp float;","uniform sampler2D texture;","uniform vec2 delta;","uniform float wavePropagation;","uniform float dampening;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","vec2 dx = vec2(delta.x, 0.0);","vec2 dy = vec2(0.0, delta.y);","// Detect edges and apply boundary conditions","float edgeFactor = 1.0;","if (coord.x <= delta.x || coord.x >= 1.0 - delta.x ||","    coord.y <= delta.y || coord.y >= 1.0 - delta.y) {","    edgeFactor = 0.95; // Dampen waves near edges more aggressively","}","float average = (","texture2D(texture, coord - dx).r +","texture2D(texture, coord - dy).r +","texture2D(texture, coord + dx).r +","texture2D(texture, coord + dy).r",") * 0.25;","// Wave propagation and dampening with configurable parameters","info.g += (average - info.r) * wavePropagation;","info.g *= dampening * edgeFactor;","info.r += info.g;","// Clamp values to prevent overflow artifacts","info.r = clamp(info.r, -1.0, 1.0);","info.g = clamp(info.g, -1.0, 1.0);","gl_FragColor = info;","}"].join("\n")),gl.uniform2fv(this.updateProgram.locations.delta,this.textureDelta),gl.uniform1f(this.updateProgram.locations.wavePropagation,this.options.wavePropagation),gl.uniform1f(this.updateProgram.locations.dampening,this.options.dampening),this.renderProgram=createProgram(["precision highp float;","attribute vec2 vertex;","uniform vec2 topLeft;","uniform vec2 bottomRight;","uniform vec2 containerRatio;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);","backgroundCoord.y = 1.0 - backgroundCoord.y;","ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;","gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);","}"].join("\n"),["precision highp float;","uniform sampler2D samplerBackground;","uniform sampler2D samplerRipples;","uniform vec2 delta;","uniform float perturbance;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","float height = texture2D(samplerRipples, ripplesCoord).r;","// Sample neighboring pixels for calculating normals","vec2 texelSize = delta;","float heightX = texture2D(samplerRipples, clamp(ripplesCoord + vec2(texelSize.x, 0.0), 0.0, 1.0)).r;","float heightY = texture2D(samplerRipples, clamp(ripplesCoord + vec2(0.0, texelSize.y), 0.0, 1.0)).r;","vec3 dx = vec3(texelSize.x, heightX - height, 0.0);","vec3 dy = vec3(0.0, heightY - height, texelSize.y);","vec2 offset = -normalize(cross(dy, dx)).xz;","// Apply edge fading to reduce artifacts at boundaries","float edgeFade = 1.0;","float edgeDistance = 0.05;","edgeFade *= smoothstep(0.0, edgeDistance, ripplesCoord.x);","edgeFade *= smoothstep(0.0, edgeDistance, ripplesCoord.y);","edgeFade *= smoothstep(0.0, edgeDistance, 1.0 - ripplesCoord.x);","edgeFade *= smoothstep(0.0, edgeDistance, 1.0 - ripplesCoord.y);","float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0) * edgeFade;","gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance * edgeFade) + specular;","}"].join("\n")),gl.uniform2fv(this.renderProgram.locations.delta,this.textureDelta)}initTexture(){gl&&(this.backgroundTexture=gl.createTexture(),gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR))}setTransparentTexture(){gl&&(gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,transparentPixels))}dropAtPointer(e,t,i){if(!this.canvas||this.pendingInitialization)return;const r=this.canvas.getBoundingClientRect();let n,s;void 0!==e.clientX?(n=e.clientX-r.left,s=e.clientY-r.top):(n=e.pageX-(r.left+window.pageXOffset),s=e.pageY-(r.top+window.pageYOffset)),n<0||n>r.width||s<0||s>r.height||(this.canvas.width===r.width&&this.canvas.height===r.height||(n*=this.canvas.width/r.width,s*=this.canvas.height/r.height),this.drop(n,s,t,i))}drop(e,t,i,r){if(gl=this.context,!gl)return;const n=this.el.clientWidth,s=this.el.clientHeight,o=Math.max(n,s);i/=o;const a=new Float32Array([(2*e-n)/o,(s-2*t)/o]);gl.viewport(0,0,this.resolution,this.resolution),gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[this.bufferWriteIndex]),bindTexture(this.textures[this.bufferReadIndex]),gl.useProgram(this.dropProgram.id),gl.uniform2fv(this.dropProgram.locations.center,a),gl.uniform1f(this.dropProgram.locations.radius,i),gl.uniform1f(this.dropProgram.locations.strength,r),this.drawQuad(),this.swapBufferIndices()}updateSize(){const e=this.el.clientWidth,t=this.el.clientHeight;e===this.canvas.width&&t===this.canvas.height||(this.canvas.width=e,this.canvas.height=t)}destroy(){this.destroyed=!0,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityCheckInterval&&(clearInterval(this.visibilityCheckInterval),this.visibilityCheckInterval=null),this.abortController&&this.abortController.abort(),this.canvas&&this.canvas.remove();const e=this.context;e&&(this.quad&&e.deleteBuffer(this.quad),this.dropProgram&&e.deleteProgram(this.dropProgram.id),this.updateProgram&&e.deleteProgram(this.updateProgram.id),this.renderProgram&&e.deleteProgram(this.renderProgram.id),this.backgroundTexture&&e.deleteTexture(this.backgroundTexture),this.textures&&this.textures.forEach(t=>e.deleteTexture(t)),this.framebuffers&&this.framebuffers.forEach(t=>e.deleteFramebuffer(t)),gl===e&&(gl=null),this.context=null)}pause(){this.destroyed||(this.running=!1,this.needsRender=!0,setTimeout(()=>{this.needsRender=!1},50))}play(){if(!this.destroyed&&(this.running=!0,!this.animationId)){const e=()=>{this.destroyed||(this.step(),this.running||this.needsRender?this.animationId=requestAnimationFrame(e):this.animationId=null)};this.animationId=requestAnimationFrame(e)}}reset(){if(this.destroyed||!gl)return;gl=this.context;const e=config?config.arrayType:null,t=e?new e(this.resolution*this.resolution*4):null;for(let e=0;e<2;e++)gl.bindTexture(gl.TEXTURE_2D,this.textures[e]),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,this.resolution,this.resolution,0,gl.RGBA,config&&config.type||gl.UNSIGNED_BYTE,t)}set(e,t){if(!this.destroyed)switch(e){case"dropRadius":case"perturbance":case"interactive":case"crossOrigin":this[e]=t,this.options[e]=t;break;case"imageUrl":this.imageUrl=t,this.options.imageUrl=t,this.loadImage();break;case"resolution":console.warn("Ripples: Changing 'resolution' dynamically is not supported. Please re-initialize the Ripples instance.");break;default:console.warn(`Ripples: Property "${e}" is not a settable option.`)}}}export{Ripples};export default Ripples;export const isWebGLSupported=()=>!!isBrowser&&null!==config;
+const isBrowser="undefined"!=typeof window&&"undefined"!=typeof document;let gl=null,config=null,transparentPixels=null;function isPercentage(e){return"%"===e[e.length-1]}function loadConfig(){if(!isBrowser)return null;const e=document.createElement("canvas");if(gl=e.getContext("webgl")||e.getContext("experimental-webgl"),!gl)return null;const t={};if(["OES_texture_float","OES_texture_half_float","OES_texture_float_linear","OES_texture_half_float_linear"].forEach(e=>{const i=gl.getExtension(e);i&&(t[e]=i)}),!t.OES_texture_float)return null;const i=[];function r(e,i,r){const n="OES_texture_"+e,s=n+"_linear",o=s in t,a=[n];return o&&a.push(s),{type:i,arrayType:r,linearSupport:o,extensions:a}}i.push(r("float",gl.FLOAT,Float32Array)),t.OES_texture_half_float&&i.push(r("half_float",t.OES_texture_half_float.HALF_FLOAT_OES,null));const n=gl.createTexture(),s=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,s),gl.bindTexture(gl.TEXTURE_2D,n),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE);let o=null;for(let e=0;e<i.length;e++)if(gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,32,32,0,gl.RGBA,i[e].type,null),gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,n,0),gl.checkFramebufferStatus(gl.FRAMEBUFFER)===gl.FRAMEBUFFER_COMPLETE){o=i[e];break}return o}function createImageData(e,t){if(!isBrowser)return null;try{return new ImageData(e,t)}catch{return document.createElement("canvas").getContext("2d").createImageData(e,t)}}function translateBackgroundPosition(e){const t=e.split(" ");if(1!==t.length)return t.map(t=>{switch(e){case"center":return"50%";case"top":case"left":return"0";case"right":case"bottom":return"100%";default:return t}});switch(e){case"center":return["50%","50%"];case"top":return["50%","0"];case"bottom":return["50%","100%"];case"left":return["0","50%"];case"right":return["100%","50%"];default:return[e,"50%"]}}function createProgram(e,t){function i(e,t){const i=gl.createShader(e);if(gl.shaderSource(i,t),gl.compileShader(i),!gl.getShaderParameter(i,gl.COMPILE_STATUS))throw new Error("compile error: "+gl.getShaderInfoLog(i));return i}const r={};if(r.id=gl.createProgram(),gl.attachShader(r.id,i(gl.VERTEX_SHADER,e)),gl.attachShader(r.id,i(gl.FRAGMENT_SHADER,t)),gl.linkProgram(r.id),!gl.getProgramParameter(r.id,gl.LINK_STATUS))throw new Error("link error: "+gl.getProgramInfoLog(r.id));r.uniforms={},r.locations={},gl.useProgram(r.id),gl.enableVertexAttribArray(0);let n,s,o=/uniform (\w+) (\w+)/g,a=e+t;for(;null!=(n=o.exec(a));)s=n[2],r.locations[s]=gl.getUniformLocation(r.id,s);return r}function bindTexture(e,t){gl.activeTexture(gl.TEXTURE0+(t||0)),gl.bindTexture(gl.TEXTURE_2D,e)}function extractUrl(e){const t=/url\(["']?([^"']*)["']?\)/.exec(e);return null==t?null:t[1]}function isDataUri(e){return e.match(/^data:/)}isBrowser&&(config=loadConfig(),transparentPixels=createImageData(32,32));const DEFAULTS={imageUrl:null,dropRadius:15,perturbance:.04,resolution:512,interactive:!0,crossOrigin:"",wavePropagation:2,dampening:.997};class Ripples{constructor(e,t){if(!isBrowser)return console.warn("Ripples: Cannot initialize in non-browser environment"),void(this.destroyed=!0);if(this.el="string"==typeof e?document.querySelector(e):e,!this.el)return void console.error("Ripples: Element not found.",e);this.options={...DEFAULTS,...t},this.interactive=this.options.interactive,this.resolution=this.options.resolution,this.textureDelta=new Float32Array([1/this.resolution,1/this.resolution]),this.perturbance=this.options.perturbance,this.dropRadius=this.options.dropRadius,this.crossOrigin=this.options.crossOrigin,this.imageUrl=this.options.imageUrl;const i=this.el.clientWidth,r=this.el.clientHeight;if(0===i||0===r)return console.warn("Ripples: Element has zero dimensions. Deferring initialization."),this.pendingInitialization=!0,this.destroyed=!1,this.visible=!1,this.running=!1,this.inited=!1,void this.observeVisibility();const n=document.createElement("canvas");if(n.width=i,n.height=r,this.canvas=n,this.canvas.style.position="absolute",this.canvas.style.inset=0,0===n.width||0===n.height)return console.warn("Ripples: Canvas has zero dimensions. Deferring initialization."),this.pendingInitialization=!0,this.destroyed=!1,this.visible=!1,this.running=!1,this.inited=!1,void this.observeVisibility();if(this.el.append(n),this.context=gl=n.getContext("webgl")||n.getContext("experimental-webgl"),!this.context)return console.error("Ripples: WebGL is not supported by your browser or is disabled."),void(this.destroyed=!0);config&&config.extensions&&config.extensions.forEach(e=>{gl.getExtension(e)}),this.abortController=new AbortController;const s=this.signal=this.abortController.signal;this.updateSize=this.updateSize.bind(this),window.addEventListener("resize",this.updateSize,{signal:s}),this.textures=[],this.framebuffers=[],this.bufferWriteIndex=0,this.bufferReadIndex=1;const o=config?config.arrayType:null,a=o?new o(this.resolution*this.resolution*4):null;for(let e=0;e<2;e++){const e=gl.createTexture(),t=gl.createFramebuffer();gl.bindFramebuffer(gl.FRAMEBUFFER,t),gl.bindTexture(gl.TEXTURE_2D,e),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,config&&config.linearSupport?gl.LINEAR:gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,config&&config.linearSupport?gl.LINEAR:gl.NEAREST),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,gl.CLAMP_TO_EDGE),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,gl.CLAMP_TO_EDGE),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,this.resolution,this.resolution,0,gl.RGBA,config&&config.type||gl.UNSIGNED_BYTE,a),gl.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,e,0),this.textures.push(e),this.framebuffers.push(t)}this.quad=gl.createBuffer(),gl.bindBuffer(gl.ARRAY_BUFFER,this.quad),gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,1,1,-1,1]),gl.STATIC_DRAW),this.initShaders(),this.initTexture(),this.setTransparentTexture(),this.originalCssBackgroundImage=getComputedStyle(this.el).backgroundImage,this.originalInlineCss=this.el.style.backgroundImage,this.loadImage(),gl.clearColor(0,0,0,0),gl.blendFunc(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA),this.visible=!0,this.running=!0,this.inited=!0,this.destroyed=!1,this.setupPointerEvents(),this.animationId=null;const l=()=>{this.destroyed||(this.step(),this.running||this.needsRender?this.animationId=requestAnimationFrame(l):this.animationId=null)};return this.animationId=requestAnimationFrame(l),this}observeVisibility(){isBrowser&&this.el&&("undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{if(this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}else this.inited&&this.canvas&&this.updateSize()}),this.resizeObserver.observe(this.el)),"undefined"!=typeof IntersectionObserver&&(this.intersectionObserver=new IntersectionObserver(e=>{e.forEach(e=>{if(e.isIntersecting&&this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}})}),this.intersectionObserver.observe(this.el)),this.resizeObserver||this.intersectionObserver||(this.visibilityCheckInterval=setInterval(()=>{if(this.pendingInitialization){const e=this.el.clientWidth,t=this.el.clientHeight;e>0&&t>0&&this.completeInitialization()}},500)))}completeInitialization(){if(!this.pendingInitialization||this.inited)return;console.log("Ripples: Element now visible, completing initialization."),this.pendingInitialization=!1,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityCheckInterval&&(clearInterval(this.visibilityCheckInterval),this.visibilityCheckInterval=null);const e=this.options,t=this.el;Object.assign(this,new Ripples(t,e))}setupPointerEvents(){const e=()=>{const e=Math.max(this.el.clientWidth,this.el.clientHeight),t=Math.max(1,150/e);return Math.min(.04,.01*t)},t=t=>{if(this.visible&&this.running&&this.interactive){const i=t.changedTouches,r=e();for(let e=0;e<i.length;e++)this.dropAtPointer(i[e],1*this.dropRadius,r)}},i=this.signal;this.el.addEventListener("mousemove",t=>{this.visible&&this.running&&this.interactive&&this.dropAtPointer(t,1*this.dropRadius,e())},{signal:i}),this.el.addEventListener("touchmove",t,{signal:i,passive:!1}),this.el.addEventListener("touchstart",t,{signal:i,passive:!0}),this.el.addEventListener("mousedown",e=>{this.visible&&this.running&&this.interactive&&this.dropAtPointer(e,1.5*this.dropRadius,.14)},{signal:i})}loadImage(){gl=this.context;const e=this.imageUrl||extractUrl(this.originalCssBackgroundImage)||extractUrl(getComputedStyle(this.el).backgroundImage);if(e==this.imageSource)return;if(this.imageSource=e,!this.imageSource)return void this.setTransparentTexture();const t=new Image;t.onload=()=>{function e(e){return!(e&e-1)}gl=this.context;const i=e(t.width)&&e(t.height)?gl.REPEAT:gl.CLAMP_TO_EDGE;gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_S,i),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_WRAP_T,i),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,t),this.backgroundWidth=t.width,this.backgroundHeight=t.height},t.onerror=()=>{gl=this.context,this.setTransparentTexture()},t.crossOrigin=isDataUri(this.imageSource)?null:this.crossOrigin,t.src=this.imageSource}step(){this.pendingInitialization||this.destroyed||(gl=this.context,gl&&this.canvas&&0!==this.canvas.width&&0!==this.canvas.height&&this.visible&&(this.computeTextureBoundaries(),this.running&&(this.update(),this.render())))}drawQuad(){gl.bindBuffer(gl.ARRAY_BUFFER,this.quad),gl.vertexAttribPointer(0,2,gl.FLOAT,!1,0,0),gl.drawArrays(gl.TRIANGLE_FAN,0,4)}render(){gl&&this.canvas&&0!==this.canvas.width&&0!==this.canvas.height&&(gl.bindFramebuffer(gl.FRAMEBUFFER,null),gl.viewport(0,0,this.canvas.width,this.canvas.height),gl.enable(gl.BLEND),gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT),gl.useProgram(this.renderProgram.id),bindTexture(this.backgroundTexture,0),bindTexture(this.textures[0],1),gl.uniform1f(this.renderProgram.locations.perturbance,this.perturbance),gl.uniform2fv(this.renderProgram.locations.topLeft,this.renderProgram.uniforms.topLeft),gl.uniform2fv(this.renderProgram.locations.bottomRight,this.renderProgram.uniforms.bottomRight),gl.uniform2fv(this.renderProgram.locations.containerRatio,this.renderProgram.uniforms.containerRatio),gl.uniform1i(this.renderProgram.locations.samplerBackground,0),gl.uniform1i(this.renderProgram.locations.samplerRipples,1),this.drawQuad(),gl.disable(gl.BLEND))}update(){gl&&0!==this.resolution&&(gl.viewport(0,0,this.resolution,this.resolution),gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[this.bufferWriteIndex]),bindTexture(this.textures[this.bufferReadIndex]),gl.useProgram(this.updateProgram.id),gl.uniform1f(this.updateProgram.locations.wavePropagation,this.options.wavePropagation),gl.uniform1f(this.updateProgram.locations.dampening,this.options.dampening),this.drawQuad(),this.swapBufferIndices())}swapBufferIndices(){this.bufferWriteIndex=1-this.bufferWriteIndex,this.bufferReadIndex=1-this.bufferReadIndex}computeTextureBoundaries(){const e=getComputedStyle(this.el),t=e.backgroundSize,i=e.backgroundAttachment,r=translateBackgroundPosition(e.backgroundPosition);let n,s,o;if("fixed"==i)n={left:window.pageXOffset,top:window.pageYOffset},n.width=window.innerWidth,n.height=window.innerHeight;else{const e=this.el.getBoundingClientRect();n={left:e.left+window.pageXOffset,top:e.top+window.pageYOffset},n.width=this.el.clientWidth,n.height=this.el.clientHeight}if("cover"==t){const e=Math.max(n.width/this.backgroundWidth,n.height/this.backgroundHeight);s=this.backgroundWidth*e,o=this.backgroundHeight*e}else if("contain"==t){const e=Math.min(n.width/this.backgroundWidth,n.height/this.backgroundHeight);s=this.backgroundWidth*e,o=this.backgroundHeight*e}else{const e=t.split(" ");s=e[0]||"",o=e[1]||s,isPercentage(s)?s=n.width*parseFloat(s)/100:"auto"!=s&&(s=parseFloat(s)),isPercentage(o)?o=n.height*parseFloat(o)/100:"auto"!=o&&(o=parseFloat(o)),"auto"==s&&"auto"==o?(s=this.backgroundWidth,o=this.backgroundHeight):("auto"==s&&(s=this.backgroundWidth*(o/this.backgroundHeight)),"auto"==o&&(o=this.backgroundHeight*(s/this.backgroundWidth)))}let a=r[0],l=r[1];a=isPercentage(a)?n.left+(n.width-s)*parseFloat(a)/100:n.left+parseFloat(a),l=isPercentage(l)?n.top+(n.height-o)*parseFloat(l)/100:n.top+parseFloat(l);const g=this.el.getBoundingClientRect(),h=g.left+window.pageXOffset,d=g.top+window.pageYOffset;this.renderProgram.uniforms.topLeft=new Float32Array([(h-a)/s,(d-l)/o]),this.renderProgram.uniforms.bottomRight=new Float32Array([this.renderProgram.uniforms.topLeft[0]+this.el.clientWidth/s,this.renderProgram.uniforms.topLeft[1]+this.el.clientHeight/o]);const c=Math.max(this.canvas.width,this.canvas.height);this.renderProgram.uniforms.containerRatio=new Float32Array([this.canvas.width/c,this.canvas.height/c])}initShaders(){if(!gl)return;const e=["attribute vec2 vertex;","varying vec2 coord;","void main() {","coord = vertex * 0.5 + 0.5;","gl_Position = vec4(vertex, 0.0, 1.0);","}"].join("\n");this.dropProgram=createProgram(e,["precision highp float;","const float PI = 3.141592653589793;","uniform sampler2D texture;","uniform vec2 center;","uniform float radius;","uniform float strength;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);","drop = 0.5 - cos(drop * PI) * 0.5;","info.r += drop * strength;","gl_FragColor = info;","}"].join("\n")),this.updateProgram=createProgram(e,["precision highp float;","uniform sampler2D texture;","uniform vec2 delta;","uniform float wavePropagation;","uniform float dampening;","varying vec2 coord;","void main() {","vec4 info = texture2D(texture, coord);","vec2 dx = vec2(delta.x, 0.0);","vec2 dy = vec2(0.0, delta.y);","// Detect edges and apply boundary conditions","float edgeFactor = 1.0;","if (coord.x <= delta.x || coord.x >= 1.0 - delta.x ||","    coord.y <= delta.y || coord.y >= 1.0 - delta.y) {","    edgeFactor = 0.95; // Dampen waves near edges more aggressively","}","float average = (","texture2D(texture, coord - dx).r +","texture2D(texture, coord - dy).r +","texture2D(texture, coord + dx).r +","texture2D(texture, coord + dy).r",") * 0.25;","// Wave propagation and dampening with configurable parameters","info.g += (average - info.r) * wavePropagation;","info.g *= dampening * edgeFactor;","info.r += info.g;","// Clamp values to prevent overflow artifacts","info.r = clamp(info.r, -1.0, 1.0);","info.g = clamp(info.g, -1.0, 1.0);","gl_FragColor = info;","}"].join("\n")),gl.uniform2fv(this.updateProgram.locations.delta,this.textureDelta),gl.uniform1f(this.updateProgram.locations.wavePropagation,this.options.wavePropagation),gl.uniform1f(this.updateProgram.locations.dampening,this.options.dampening),this.renderProgram=createProgram(["precision highp float;","attribute vec2 vertex;","uniform vec2 topLeft;","uniform vec2 bottomRight;","uniform vec2 containerRatio;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","backgroundCoord = mix(topLeft, bottomRight, vertex * 0.5 + 0.5);","backgroundCoord.y = 1.0 - backgroundCoord.y;","ripplesCoord = vec2(vertex.x, -vertex.y) * containerRatio * 0.5 + 0.5;","gl_Position = vec4(vertex.x, -vertex.y, 0.0, 1.0);","}"].join("\n"),["precision highp float;","uniform sampler2D samplerBackground;","uniform sampler2D samplerRipples;","uniform vec2 delta;","uniform float perturbance;","varying vec2 ripplesCoord;","varying vec2 backgroundCoord;","void main() {","float height = texture2D(samplerRipples, ripplesCoord).r;","// Sample neighboring pixels for calculating normals","vec2 texelSize = delta;","float heightX = texture2D(samplerRipples, clamp(ripplesCoord + vec2(texelSize.x, 0.0), 0.0, 1.0)).r;","float heightY = texture2D(samplerRipples, clamp(ripplesCoord + vec2(0.0, texelSize.y), 0.0, 1.0)).r;","vec3 dx = vec3(texelSize.x, heightX - height, 0.0);","vec3 dy = vec3(0.0, heightY - height, texelSize.y);","vec2 offset = -normalize(cross(dy, dx)).xz;","// Apply edge fading to reduce artifacts at boundaries","float edgeFade = 1.0;","float edgeDistance = 0.05;","edgeFade *= smoothstep(0.0, edgeDistance, ripplesCoord.x);","edgeFade *= smoothstep(0.0, edgeDistance, ripplesCoord.y);","edgeFade *= smoothstep(0.0, edgeDistance, 1.0 - ripplesCoord.x);","edgeFade *= smoothstep(0.0, edgeDistance, 1.0 - ripplesCoord.y);","float specular = pow(max(0.0, dot(offset, normalize(vec2(-0.6, 1.0)))), 4.0) * edgeFade;","gl_FragColor = texture2D(samplerBackground, backgroundCoord + offset * perturbance * edgeFade) + specular;","}"].join("\n")),gl.uniform2fv(this.renderProgram.locations.delta,this.textureDelta)}initTexture(){gl&&(this.backgroundTexture=gl.createTexture(),gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR),gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR))}setTransparentTexture(){gl&&(gl.bindTexture(gl.TEXTURE_2D,this.backgroundTexture),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,transparentPixels))}dropAtPointer(e,t,i){if(!this.canvas||this.pendingInitialization)return;const r=this.canvas.getBoundingClientRect();let n,s;void 0!==e.clientX?(n=e.clientX-r.left,s=e.clientY-r.top):(n=e.pageX-(r.left+window.pageXOffset),s=e.pageY-(r.top+window.pageYOffset)),n<0||n>r.width||s<0||s>r.height||(this.canvas.width===r.width&&this.canvas.height===r.height||(n*=this.canvas.width/r.width,s*=this.canvas.height/r.height),this.drop(n,s,t,i))}drop(e,t,i,r){if(gl=this.context,!gl)return;const n=this.el.clientWidth,s=this.el.clientHeight,o=Math.max(n,s);i/=o;const a=new Float32Array([(2*e-n)/o,(s-2*t)/o]);gl.viewport(0,0,this.resolution,this.resolution),gl.bindFramebuffer(gl.FRAMEBUFFER,this.framebuffers[this.bufferWriteIndex]),bindTexture(this.textures[this.bufferReadIndex]),gl.useProgram(this.dropProgram.id),gl.uniform2fv(this.dropProgram.locations.center,a),gl.uniform1f(this.dropProgram.locations.radius,i),gl.uniform1f(this.dropProgram.locations.strength,r),this.drawQuad(),this.swapBufferIndices()}updateSize(){const e=this.el.clientWidth,t=this.el.clientHeight;e===this.canvas.width&&t===this.canvas.height||(this.canvas.width=e,this.canvas.height=t)}destroy(){this.destroyed=!0,this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=null),this.visibilityCheckInterval&&(clearInterval(this.visibilityCheckInterval),this.visibilityCheckInterval=null),this.abortController&&this.abortController.abort(),this.canvas&&this.canvas.remove();const e=this.context;e&&(this.quad&&e.deleteBuffer(this.quad),this.dropProgram&&e.deleteProgram(this.dropProgram.id),this.updateProgram&&e.deleteProgram(this.updateProgram.id),this.renderProgram&&e.deleteProgram(this.renderProgram.id),this.backgroundTexture&&e.deleteTexture(this.backgroundTexture),this.textures&&this.textures.forEach(t=>e.deleteTexture(t)),this.framebuffers&&this.framebuffers.forEach(t=>e.deleteFramebuffer(t)),gl===e&&(gl=null),this.context=null)}pause(){this.destroyed||(this.running=!1,this.needsRender=!0,setTimeout(()=>{this.needsRender=!1},50))}play(){if(!this.destroyed&&(this.running=!0,!this.animationId)){const e=()=>{this.destroyed||(this.step(),this.running||this.needsRender?this.animationId=requestAnimationFrame(e):this.animationId=null)};this.animationId=requestAnimationFrame(e)}}reset(){if(this.destroyed||!gl)return;gl=this.context;const e=config?config.arrayType:null,t=e?new e(this.resolution*this.resolution*4):null;for(let e=0;e<2;e++)gl.bindTexture(gl.TEXTURE_2D,this.textures[e]),gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,this.resolution,this.resolution,0,gl.RGBA,config&&config.type||gl.UNSIGNED_BYTE,t)}set(e,t){if(!this.destroyed)switch(e){case"dropRadius":case"perturbance":case"interactive":case"crossOrigin":this[e]=t,this.options[e]=t;break;case"imageUrl":this.imageUrl=t,this.options.imageUrl=t,this.loadImage();break;case"resolution":console.warn("Ripples: Changing 'resolution' dynamically is not supported. Please re-initialize the Ripples instance.");break;default:console.warn(`Ripples: Property "${e}" is not a settable option.`)}}}export{Ripples};