@imput/helium-prism 0.1.0

package/dist/components/GradientShimmer.svelte

@@ -0,0 +1,467 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { ClassValue } from "svelte/elements";
+    import * as Shimmer from "../gradient-shimmer";
+
+    const GRAIN_SIZE = 180;
+
+    type Colors = {
+        alpha: number;
+        grainAlpha: number;
+        grainLuminance: number;
+        grainContrast: number;
+        grainSaturation: number;
+        introAlpha: number;
+        start: string;
+        highlight: string;
+        speedUpShineBoost: number;
+    };
+
+    type Props = {
+        intro?: boolean;
+        background?: boolean;
+        class?: ClassValue;
+    };
+
+    let {
+        intro: shouldIntro,
+        background,
+        class: className,
+    }: Props = $props();
+
+    let canvas: HTMLCanvasElement;
+    let shimmerController: Shimmer.GradientShimmerControls | null = null;
+
+    const createGrainPattern = (
+        context: CanvasRenderingContext2D,
+        colors: Colors,
+    ) => {
+        const grainCanvas = document.createElement("canvas");
+        const grainContext = grainCanvas.getContext("2d")!;
+
+        grainCanvas.width = GRAIN_SIZE;
+        grainCanvas.height = GRAIN_SIZE;
+
+        const imageData = grainContext.createImageData(
+            GRAIN_SIZE,
+            GRAIN_SIZE,
+        );
+        const pixels = imageData.data;
+
+        for (let index = 0; index < pixels.length; index += 4) {
+            const luminance = colors.grainLuminance
+                + (Math.random() - 0.5) * colors.grainContrast;
+            const redShift = (Math.random() - 0.5) * colors.grainSaturation;
+            const greenShift = (Math.random() - 0.5) * colors.grainSaturation;
+            const blueShift = (Math.random() - 0.5) * colors.grainSaturation;
+
+            pixels[index] = Shimmer.clamp(luminance + redShift, 0, 255);
+            pixels[index + 1] = Shimmer.clamp(luminance + greenShift, 0, 255);
+            pixels[index + 2] = Shimmer.clamp(luminance + blueShift, 0, 255);
+            pixels[index + 3] = 255;
+        }
+
+        grainContext.putImageData(imageData, 0, 0);
+
+        return context.createPattern(grainCanvas, "repeat")!;
+    };
+
+    export function intro() {
+        shimmerController?.intro();
+    }
+
+    export function emphasize() {
+        shimmerController?.emphasize();
+    }
+
+    const drawGrain = (
+        context: CanvasRenderingContext2D,
+        pattern: CanvasPattern,
+        size: Shimmer.Size,
+        colors: Colors,
+    ) => {
+        context.save();
+        context.globalAlpha = colors.grainAlpha;
+        context.globalCompositeOperation = "overlay";
+        context.fillStyle = pattern;
+        context.fillRect(0, 0, size.width, size.height);
+        context.restore();
+    };
+
+    const drawStripe = (
+        context: CanvasRenderingContext2D,
+        stripe: Shimmer.Stripe,
+        index: number,
+        stripeWidth: number,
+        size: Shimmer.Size,
+        colors: Colors,
+        time: number,
+        introAnimation: Shimmer.IntroAnimation | null,
+        stripeCount: number,
+        wavePhase: number,
+        secondaryWavePhase: number,
+        shineProgress: number,
+    ) => {
+        const revealProgress = Shimmer.getIntroRevealProgress(
+            time,
+            introAnimation,
+            index,
+            stripeCount,
+        );
+        const idleProgress = Shimmer.getIntroIdleProgress(
+            time,
+            introAnimation,
+            index,
+            stripeCount,
+        );
+        const alpha = colors.introAlpha
+            + (colors.alpha - colors.introAlpha) * idleProgress;
+        const x = Shimmer.snapToDevicePixel(index * stripeWidth, size.dpr);
+        const nextX = index === stripeCount - 1
+            ? size.width
+            : Shimmer.snapToDevicePixel((index + 1) * stripeWidth, size.dpr);
+        const width = nextX - x;
+        const introCenter = Shimmer.lerp(
+            Shimmer.INTRO.startCenter,
+            Shimmer.INTRO.idleCenter,
+            revealProgress,
+        );
+        const idleCenter = Shimmer.getIdleCenter(
+            stripe,
+            wavePhase,
+            secondaryWavePhase,
+        );
+        const center = introCenter + (idleCenter - introCenter) * idleProgress;
+        const bandStart = Shimmer.clamp(
+            center - Shimmer.GRADIENT.bandWidth,
+            Shimmer.GRADIENT.minStop,
+            Shimmer.GRADIENT.maxStop,
+        );
+        const bandEnd = Shimmer.clamp(
+            center + Shimmer.GRADIENT.bandWidth,
+            Shimmer.GRADIENT.minStop,
+            Shimmer.GRADIENT.maxStop,
+        );
+        const gradient = context.createLinearGradient(
+            x,
+            size.height * -0.35,
+            nextX,
+            size.height * 1.35,
+        );
+
+        context.globalAlpha = alpha;
+        context.fillStyle = colors.start;
+        context.fillRect(x, 0, width, size.height);
+
+        gradient.addColorStop(0, colors.highlight);
+        gradient.addColorStop(bandStart, colors.start);
+        gradient.addColorStop(center, colors.highlight);
+        gradient.addColorStop(bandEnd, colors.start);
+        gradient.addColorStop(1, colors.start);
+
+        context.globalAlpha = Shimmer.clamp(
+            alpha * (1 + shineProgress * colors.speedUpShineBoost),
+        ) * revealProgress;
+        context.fillStyle = gradient;
+        context.fillRect(x, 0, width, size.height);
+    };
+
+    onMount(() => {
+        const context = canvas.getContext("2d", {
+            alpha: true,
+            colorSpace: "display-p3",
+        });
+
+        if (!context) {
+            return;
+        }
+
+        const stripes: Shimmer.Stripe[] = [];
+        const colorSchemeQuery = window.matchMedia(
+            "(prefers-color-scheme: dark)",
+        );
+        const reducedMotionQuery = window.matchMedia(
+            "(prefers-reduced-motion: reduce)",
+        );
+
+        let size: Shimmer.Size;
+        let stripeWidth: number;
+        let colors: Colors;
+        let grainPattern: CanvasPattern | null = null;
+        let animationFrame: number | null = null;
+        let resizeFrame: number | null = null;
+        let introAnimation: Shimmer.IntroAnimation | null = null;
+        let speedUpAnimation: Shimmer.WaveSpeedUpAnimation | null = null;
+        let wavePhase = Shimmer.getRandomWavePhase();
+        let secondaryWavePhase = -wavePhase * 0.7;
+        let lastFrameTime: number | null = null;
+
+        const cancelResizeFrame = () => {
+            if (resizeFrame === null) {
+                return;
+            }
+
+            cancelAnimationFrame(resizeFrame);
+            resizeFrame = null;
+        };
+
+        const cancelAnimation = () => {
+            if (animationFrame === null) {
+                return;
+            }
+
+            cancelAnimationFrame(animationFrame);
+            animationFrame = null;
+        };
+
+        const startIntro = () => {
+            if (reducedMotionQuery.matches) {
+                introAnimation = null;
+                drawFrame(performance.now());
+                return;
+            }
+
+            introAnimation = { startedAt: performance.now() };
+        };
+
+        const startWaveSpeedUp = () => {
+            if (reducedMotionQuery.matches) {
+                speedUpAnimation = null;
+                drawFrame(performance.now());
+                return;
+            }
+
+            const time = performance.now();
+
+            speedUpAnimation = Shimmer.triggerSpeedUpAnimation(
+                time,
+                speedUpAnimation,
+            );
+        };
+
+        const controller: Shimmer.GradientShimmerControls = {
+            intro: startIntro,
+            emphasize: startWaveSpeedUp,
+        };
+
+        const readColors = () => {
+            const styles = getComputedStyle(canvas);
+
+            colors = {
+                alpha: Shimmer.readCssNumber(styles, "--shimmer-alpha"),
+                grainAlpha: Shimmer.readCssNumber(
+                    styles,
+                    "--shimmer-grain-alpha",
+                ),
+                grainLuminance: Shimmer.readCssNumber(
+                    styles,
+                    "--shimmer-grain-luminance",
+                ),
+                grainContrast: Shimmer.readCssNumber(
+                    styles,
+                    "--shimmer-grain-contrast",
+                ),
+                grainSaturation: Shimmer.readCssNumber(
+                    styles,
+                    "--shimmer-grain-saturation",
+                ),
+                introAlpha: Shimmer.readCssNumber(
+                    styles,
+                    "--shimmer-intro-alpha",
+                ),
+                start: Shimmer.readCssString(styles, "--shimmer-start"),
+                highlight: Shimmer.readCssString(
+                    styles,
+                    "--shimmer-highlight",
+                ),
+                speedUpShineBoost: Shimmer.readCssNumber(
+                    styles,
+                    "--shimmer-speed-up-shine-boost",
+                ),
+            };
+            grainPattern = createGrainPattern(context, colors);
+        };
+
+        const applyResize = () => {
+            size = Shimmer.resizeCanvas(canvas, context);
+            stripeWidth = Shimmer.syncStripeCount(stripes, size.width);
+            readColors();
+        };
+
+        const scheduleResize = () => {
+            cancelResizeFrame();
+            resizeFrame = requestAnimationFrame((time) => {
+                applyResize();
+                drawFrame(time);
+            });
+        };
+
+        const drawFrame = (time: number) => {
+            const reducedMotion = reducedMotionQuery.matches;
+            const deltaSeconds = reducedMotion || lastFrameTime === null
+                ? 0
+                : Math.min((time - lastFrameTime) / 1000, 0.064);
+            const speedUpState = Shimmer.updateSpeedUpAnimation(
+                time,
+                speedUpAnimation,
+            );
+            const activeIntroAnimation = reducedMotion ? null : introAnimation;
+
+            lastFrameTime = reducedMotion ? null : time;
+            speedUpAnimation = reducedMotion ? null : speedUpState.animation;
+
+            if (!reducedMotion) {
+                wavePhase += Shimmer.IDLE_WAVE.speed
+                    * speedUpState.multiplier
+                    * deltaSeconds;
+                secondaryWavePhase += Shimmer.IDLE_WAVE.secondarySpeed
+                    * speedUpState.multiplier
+                    * deltaSeconds;
+            }
+
+            context.globalAlpha = 1;
+            context.clearRect(0, 0, size.width, size.height);
+
+            for (const [index, stripe] of stripes.entries()) {
+                drawStripe(
+                    context,
+                    stripe,
+                    index,
+                    stripeWidth,
+                    size,
+                    colors,
+                    time,
+                    activeIntroAnimation,
+                    stripes.length,
+                    wavePhase,
+                    secondaryWavePhase,
+                    reducedMotion ? 0 : speedUpState.shineProgress,
+                );
+            }
+
+            if (grainPattern) {
+                drawGrain(context, grainPattern, size, colors);
+            }
+
+            if (Shimmer.isIntroComplete(time, introAnimation, stripes.length)) {
+                introAnimation = null;
+            }
+        };
+
+        const draw = (time: number) => {
+            animationFrame = null;
+            drawFrame(time);
+
+            if (!reducedMotionQuery.matches) {
+                animationFrame = requestAnimationFrame(draw);
+            }
+        };
+
+        const requestAnimation = () => {
+            if (animationFrame !== null || reducedMotionQuery.matches) {
+                return;
+            }
+
+            animationFrame = requestAnimationFrame(draw);
+        };
+
+        applyResize();
+
+        if (shouldIntro !== false) {
+            startIntro();
+        }
+
+        shimmerController = controller;
+
+        const resizeObserver = new ResizeObserver(scheduleResize);
+        resizeObserver.observe(canvas);
+
+        const scheduleColorRead = () => {
+            cancelResizeFrame();
+            resizeFrame = requestAnimationFrame((time) => {
+                readColors();
+                drawFrame(time);
+            });
+        };
+
+        const themeObserver = new MutationObserver(scheduleColorRead);
+        themeObserver.observe(document.documentElement, { attributes: true });
+
+        const updateMotionPreference = () => {
+            if (reducedMotionQuery.matches) {
+                introAnimation = null;
+                speedUpAnimation = null;
+                cancelAnimation();
+                drawFrame(performance.now());
+                return;
+            }
+
+            lastFrameTime = null;
+            requestAnimation();
+        };
+
+        colorSchemeQuery.addEventListener("change", scheduleColorRead);
+        reducedMotionQuery.addEventListener("change", updateMotionPreference);
+
+        updateMotionPreference();
+
+        return () => {
+            if (shimmerController === controller) {
+                shimmerController = null;
+            }
+
+            cancelAnimation();
+            cancelResizeFrame();
+            resizeObserver.disconnect();
+            themeObserver.disconnect();
+            colorSchemeQuery.removeEventListener("change", scheduleColorRead);
+            reducedMotionQuery.removeEventListener("change", updateMotionPreference);
+        };
+    });
+</script>
+
+<canvas
+    bind:this={canvas}
+    class={[background && "background", className]}
+    aria-hidden="true"
+></canvas>
+
+<style>
+    canvas {
+        --shimmer-alpha: 0.35;
+        --shimmer-grain-alpha: 0.15;
+        --shimmer-grain-luminance: 220;
+        --shimmer-grain-contrast: 34;
+        --shimmer-grain-saturation: 8;
+        --shimmer-intro-alpha: 0.6;
+        --shimmer-speed-up-shine-boost: 0.3;
+        --shimmer-highlight: var(--bg-gradient-end);
+        --shimmer-start: var(--bg-gradient-start);
+
+        display: block;
+        z-index: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+    }
+
+    canvas.background {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        canvas {
+            --shimmer-alpha: 0.7;
+            --shimmer-grain-alpha: 0.15;
+            --shimmer-grain-luminance: 144;
+            --shimmer-grain-contrast: 64;
+            --shimmer-grain-saturation: 32;
+            --shimmer-intro-alpha: 1;
+            --shimmer-speed-up-shine-boost: 0.15;
+        }
+    }
+</style>

package/dist/components/GradientShimmer.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ClassValue } from "svelte/elements";
+type Props = {
+    intro?: boolean;
+    background?: boolean;
+    class?: ClassValue;
+};
+declare const GradientShimmer: import("svelte").Component<Props, {
+    intro: () => void;
+    emphasize: () => void;
+}, "">;
+type GradientShimmer = ReturnType<typeof GradientShimmer>;
+export default GradientShimmer;
+//# sourceMappingURL=GradientShimmer.svelte.d.ts.map

package/dist/components/GradientShimmer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GradientShimmer.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/GradientShimmer.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAgB9C,KAAK,KAAK,GAAG;IACT,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AA6ZN,QAAA,MAAM,eAAe;;;MAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/HeliumLogo.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type { ClassValue } from "svelte/elements";
+    import HeliumLogoRaw from "./logos/HeliumLogoRaw.svelte";
+    import HeliumTextRaw from "./logos/HeliumTextRaw.svelte";
+
+    type Props = {
+        height?: string;
+        text?: boolean;
+        class?: ClassValue;
+    };
+
+    let {
+        height = "28px",
+        text = false,
+        class: className,
+    }: Props = $props();
+</script>
+
+<span class={["helium-logo", className]} style:height aria-hidden="true">
+    {#if text}
+        <HeliumTextRaw />
+    {:else}
+        <HeliumLogoRaw />
+    {/if}
+</span>
+
+<style>
+    .helium-logo {
+        display: inline-flex;
+        color: currentColor;
+        flex: 0 0 auto;
+        width: auto;
+    }
+
+    .helium-logo :global(svg) {
+        display: block;
+        width: auto;
+        height: 100%;
+    }
+</style>

package/dist/components/HeliumLogo.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ClassValue } from "svelte/elements";
+type Props = {
+    height?: string;
+    text?: boolean;
+    class?: ClassValue;
+};
+declare const HeliumLogo: import("svelte").Component<Props, {}, "">;
+type HeliumLogo = ReturnType<typeof HeliumLogo>;
+export default HeliumLogo;
+//# sourceMappingURL=HeliumLogo.svelte.d.ts.map

package/dist/components/HeliumLogo.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeliumLogo.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/HeliumLogo.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAK9C,KAAK,KAAK,GAAG;IACT,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,UAAU,CAAC;CACtB,CAAC;AA0BN,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/Input.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLInputAttributes } from "svelte/elements";
+
+    type NativeInputProps = Omit<
+        HTMLInputAttributes,
+        "aria-label" | "id" | "input" | "size" | "value" | "width"
+    >;
+
+    type Props = NativeInputProps & {
+        id: string;
+        "aria-label": string;
+        value?: HTMLInputAttributes["value"];
+        small?: boolean;
+        width?: string;
+        input?: HTMLInputElement | undefined;
+        leading?: Snippet;
+        trailing?: Snippet;
+    };
+
+    let {
+        id,
+        value = $bindable(),
+        small = false,
+        width,
+        input = $bindable(),
+        leading,
+        trailing,
+        class: className,
+        placeholder,
+        "aria-label": ariaLabel,
+        disabled,
+        ...rest
+    }: Props = $props();
+</script>
+
+<label
+    class={["input-field", small && "small", disabled && "disabled", className]}
+    style:width
+>
+    {#if leading}
+        <span class="input-accessory" aria-hidden="true">
+            {@render leading()}
+        </span>
+    {/if}
+    <input
+        bind:this={input}
+        bind:value
+        {id}
+        {placeholder}
+        aria-label={ariaLabel}
+        {disabled}
+        {...rest}
+    />
+    {#if trailing}
+        <span class="input-accessory" aria-hidden="true">
+            {@render trailing()}
+        </span>
+    {/if}
+</label>
+
+<style>
+    .input-field {
+        --input-font-size: 16px;
+        --input-icon-size: 18px;
+        --input-line-height: 122%;
+        --input-padding: 13px 16px;
+
+        padding: var(--input-padding);
+        min-height: 46px;
+    }
+
+    .small {
+        --input-font-size: 14px;
+        --input-icon-size: 16px;
+        --input-line-height: 120%;
+        --input-padding: 10px 16px;
+
+        min-height: 38px;
+    }
+
+    input {
+        font-size: var(--input-font-size);
+        line-height: var(--input-line-height);
+        padding: 0;
+
+        &[type="number"] {
+            appearance: textfield;
+            -moz-appearance: textfield;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+    }
+
+    .input-accessory {
+        color: var(--tertiary);
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+    }
+
+    .input-field:focus-within .input-accessory {
+        color: var(--primary);
+    }
+
+    .input-accessory :global(svg) {
+        width: var(--input-icon-size);
+        height: var(--input-icon-size);
+        stroke-width: 1.8px;
+    }
+</style>

package/dist/components/Input.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
+type NativeInputProps = Omit<HTMLInputAttributes, "aria-label" | "id" | "input" | "size" | "value" | "width">;
+type Props = NativeInputProps & {
+    id: string;
+    "aria-label": string;
+    value?: HTMLInputAttributes["value"];
+    small?: boolean;
+    width?: string;
+    input?: HTMLInputElement | undefined;
+    leading?: Snippet;
+    trailing?: Snippet;
+};
+declare const Input: import("svelte").Component<Props, {}, "value" | "input">;
+type Input = ReturnType<typeof Input>;
+export default Input;
+//# sourceMappingURL=Input.svelte.d.ts.map

package/dist/components/Input.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/components/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAGvD,KAAK,gBAAgB,GAAG,IAAI,CACxB,mBAAmB,EACnB,YAAY,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAC7D,CAAC;AAEF,KAAK,KAAK,GAAG,gBAAgB,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAyCN,QAAA,MAAM,KAAK,0DAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}