@pathscale/ui 1.2.10 → 1.3.0

package/dist/components/metal-border/engine/shaders.js

@@ -0,0 +1,215 @@
+const VERT_SHADER_SRC = `
+  attribute vec2 a_position;
+  void main() { gl_Position = vec4(a_position, 0.0, 1.0); }
+`;
+const FRAG_SHADER_SRC = `
+  precision highp float;
+
+  uniform vec2 u_resolution;
+  uniform float u_time;
+  uniform vec3 u_color1, u_color2, u_color3, u_color4, u_color5, u_color6, u_color7;
+  uniform float u_alpha1, u_alpha2, u_alpha3, u_alpha4, u_alpha5, u_alpha6, u_alpha7;
+  uniform float u_intensity, u_scale, u_direction;
+  uniform float u_softness, u_distortion, u_complexity, u_shape;
+  uniform float u_vignette, u_vigOpacity, u_blur, u_shaderOpacity;
+
+  vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec2 mod289v2(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+  vec3 permute(vec3 x) { return mod289((x * 34.0 + 1.0) * x); }
+
+  float snoise(vec2 v) {
+    const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+                        -0.577350269189626, 0.024390243902439);
+    vec2 i = floor(v + dot(v, C.yy));
+    vec2 x0 = v - i + dot(i, C.xx);
+    vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+    vec4 x12 = x0.xyxy + C.xxzz;
+    x12.xy -= i1;
+    i = mod289v2(i);
+    vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+    vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+    m = m * m; m = m * m;
+    vec3 x_ = 2.0 * fract(p * C.www) - 1.0;
+    vec3 h = abs(x_) - 0.5;
+    vec3 ox = floor(x_ + 0.5);
+    vec3 a0 = x_ - ox;
+    m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+    vec3 g;
+    g.x = a0.x * x0.x + h.x * x0.y;
+    g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+    return 130.0 * dot(m, g);
+  }
+
+  float fbm(vec2 p, float oct) {
+    float val = 0.0, amp = 0.5;
+    int n = int(oct);
+    for (int i = 0; i < 7; i++) {
+      if (i >= n) break;
+      val += amp * snoise(p);
+      p *= 2.0;
+      amp *= 0.5;
+    }
+    return val;
+  }
+
+  float nfbm(vec2 p) { return fbm(p, 3.0 + u_complexity * 4.0); }
+
+  /* 5-stop palette used by effect 1 (Plasma) — direct port of \`palette\` from
+   * the canonical engine. Stops at t = 0, 0.25, 0.5, 0.75, 1.0. */
+  vec3 palette(float t) {
+    t = clamp(t, 0.0, 1.0);
+    t = t * t * (3.0 - 2.0 * t);
+    float k = 64.0;
+    float w1 = u_alpha1 * exp(-k * t * t);
+    float w2 = u_alpha2 * exp(-k * (t - 0.25) * (t - 0.25));
+    float w3 = u_alpha3 * exp(-k * (t - 0.5)  * (t - 0.5));
+    float w4 = u_alpha4 * exp(-k * (t - 0.75) * (t - 0.75));
+    float w5 = u_alpha5 * exp(-k * (t - 1.0)  * (t - 1.0));
+    float total = w1 + w2 + w3 + w4 + w5 + 0.0001;
+    return (u_color1 * w1 + u_color2 * w2 + u_color3 * w3 +
+            u_color4 * w4 + u_color5 * w5) / total;
+  }
+
+  /* Per-pixel alpha that re-introduces transparency when the user dials any
+   * palette stop's alpha below 1. Same \`paletteAlpha\` from the canonical
+   * engine. With every preset shipping all-1 alphas, this returns ~1 for every
+   * pixel — but mirroring it keeps custom-preset behaviour identical. */
+  float paletteAlpha(float t) {
+    t = clamp(t, 0.0, 1.0);
+    t = t * t * (3.0 - 2.0 * t);
+    float k = 64.0;
+    float w1 = u_alpha1 * exp(-k * t * t);
+    float w2 = u_alpha2 * exp(-k * (t - 0.25) * (t - 0.25));
+    float w3 = u_alpha3 * exp(-k * (t - 0.5)  * (t - 0.5));
+    float w4 = u_alpha4 * exp(-k * (t - 0.75) * (t - 0.75));
+    float w5 = u_alpha5 * exp(-k * (t - 1.0)  * (t - 1.0));
+    float totalW = w1 + w2 + w3 + w4 + w5 + 0.0001;
+    float rawW = exp(-k * t * t)
+               + exp(-k * (t - 0.25) * (t - 0.25))
+               + exp(-k * (t - 0.5)  * (t - 0.5))
+               + exp(-k * (t - 0.75) * (t - 0.75))
+               + exp(-k * (t - 1.0)  * (t - 1.0))
+               + 0.0001;
+    return totalW / rawW;
+  }
+
+  vec2 warp(vec2 p, float t) {
+    float str = u_distortion * 2.0;
+    return vec2(
+      nfbm(p + vec2(t * 0.1, 0.0)),
+      nfbm(p + vec2(0.0, t * 0.12) + 5.0)
+    ) * str;
+  }
+
+  /* Plasma: four sine bands warped by an FBM field, mapped through the
+   * 5-stop palette. Identical to effect 1 in the canonical engine. */
+  vec3 computeEffect(vec2 uv, float aspect, float t, float dist, float cpx) {
+    vec2 p = (uv - 0.5) * u_scale;
+    p.x *= aspect;
+    p += vec2(cos(u_direction), sin(u_direction)) * t * 0.15;
+
+    float freq = 3.0 + cpx * 8.0;
+    float val = 0.0;
+    val += sin(p.x * freq + t);
+    val += sin(p.y * freq + t * 1.3);
+    val += sin((p.x + p.y) * freq * 0.7 + t * 0.7);
+    val += sin(length(p) * freq * 0.8 - t * 1.5);
+    vec2 w = warp(p, t);
+    val += (w.x + w.y) * dist;
+    val = val * 0.2 * u_intensity + 0.5;
+
+    return palette(clamp(val, 0.0, 1.0));
+  }
+
+  void main() {
+    vec2 uv = gl_FragCoord.xy / u_resolution;
+    float aspect = u_resolution.x / u_resolution.y;
+    float t = u_time;          // JS already multiplied u_time by preset.speed.
+    float dist = u_distortion;
+    float cpx = u_complexity;
+
+    /* 5-tap cross blur (center + cardinal offsets). The chromatic/silver/gold
+     * presets all ship with blur=1 so this path is always active. 5 taps
+     * instead of the canonical engine's 9 saves ~44% fragment work; the
+     * perceptual difference is nil because the output is already soft from
+     * the plasma's low spatial frequency and CSS blur on reflections. */
+    vec3 col;
+    if (u_blur < 0.01) {
+      col = computeEffect(uv, aspect, t, dist, cpx);
+    } else {
+      float r = u_blur * 0.02;
+      col  = computeEffect(uv,                  aspect, t, dist, cpx) * 0.4;
+      col += computeEffect(uv + vec2( r, 0.0),  aspect, t, dist, cpx) * 0.15;
+      col += computeEffect(uv + vec2(-r, 0.0),  aspect, t, dist, cpx) * 0.15;
+      col += computeEffect(uv + vec2(0.0,  r),  aspect, t, dist, cpx) * 0.15;
+      col += computeEffect(uv + vec2(0.0, -r),  aspect, t, dist, cpx) * 0.15;
+    }
+
+    /* Gamma punch — adds the contrast pop that defines the chromatic
+     * highlights. From the canonical engine: \`col = pow(col, vec3(1.3))\`. */
+    col = pow(col, vec3(1.3));
+
+    /* Vignette — soft edge darkening so corners read as recessed. The 40-px
+     * scale at the bottom of the formula is hard-coded in the canonical
+     * engine; we keep it for visual parity. */
+    float edgeDist = min(min(uv.x, 1.0 - uv.x), min(uv.y, 1.0 - uv.y));
+    float vigPx = 40.0 / min(u_resolution.x, u_resolution.y);
+    float vigRange = vigPx * (1.0 + u_vignette * 3.0);
+    float vig = edgeDist * edgeDist / (vigRange * vigRange);
+    vig = smoothstep(0.0, 1.0, vig);
+    col *= mix(1.0, vig, u_vignette * u_vigOpacity);
+
+    /* Per-pixel alpha. With all-1 alphas the formula collapses to ~1 but the
+     * computation matches the canonical engine so custom presets behave the
+     * same. */
+    float colorAlpha = (u_alpha1 + u_alpha2 + u_alpha3 + u_alpha4 + u_alpha5) / 5.0;
+    if (colorAlpha < 0.999) {
+      vec3 c1d = col - u_color1, c2d = col - u_color2, c3d = col - u_color3,
+           c4d = col - u_color4, c5d = col - u_color5;
+      float prox1 = exp(-8.0 * dot(c1d, c1d));
+      float prox2 = exp(-8.0 * dot(c2d, c2d));
+      float prox3 = exp(-8.0 * dot(c3d, c3d));
+      float prox4 = exp(-8.0 * dot(c4d, c4d));
+      float prox5 = exp(-8.0 * dot(c5d, c5d));
+      float pTotal = prox1 + prox2 + prox3 + prox4 + prox5 + 0.0001;
+      colorAlpha = (prox1 * u_alpha1 + prox2 * u_alpha2 + prox3 * u_alpha3 +
+                    prox4 * u_alpha4 + prox5 * u_alpha5) / pTotal;
+    }
+    float alpha = colorAlpha;
+
+    /* Touch the unused-at-effect-1 uniforms so GL drivers that complain about
+     * declared-but-unread uniforms (some Mali / Adreno builds do) keep them
+     * live. The contribution is provably zero. */
+    alpha += 0.0 * (u_softness + u_shape +
+                    u_alpha6 + u_alpha7 +
+                    u_color6.x + u_color7.x);
+
+    gl_FragColor = vec4(col, alpha * u_shaderOpacity);
+  }
+`;
+function compileShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader) throw new Error('metal-fx: gl.createShader returned null');
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const info = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`metal-fx: shader compile failed: ${info ?? '(no info log)'}`);
+    }
+    return shader;
+}
+function linkProgram(gl, vert, frag) {
+    const program = gl.createProgram();
+    if (!program) throw new Error('metal-fx: gl.createProgram returned null');
+    gl.attachShader(program, vert);
+    gl.attachShader(program, frag);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const info = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`metal-fx: program link failed: ${info ?? '(no info log)'}`);
+    }
+    return program;
+}
+export { FRAG_SHADER_SRC, VERT_SHADER_SRC, compileShader, linkProgram };

package/dist/components/metal-border/engine/tween.d.ts

@@ -0,0 +1,17 @@
+export type EaseFn = (t: number) => number;
+export declare const ease: {
+    readonly linear: (t: number) => number;
+    readonly smoothstep: (t: number) => number;
+};
+export interface Tween {
+    from: number;
+    to: number;
+    dur: number;
+    ease: EaseFn;
+    startMs: number;
+    val: number;
+    done: boolean;
+}
+export declare function tween(from: number, to: number, dur: number, e?: EaseFn): Tween;
+export declare function tweenStart(tw: Tween, nowMs: number): void;
+export declare function tweenTick(tw: Tween, nowMs: number): number;

package/dist/components/metal-border/engine/tween.js

@@ -0,0 +1,28 @@
+const ease = {
+    linear: (t)=>t,
+    smoothstep: (t)=>t * t * (3 - 2 * t)
+};
+function tween(from, to, dur, e = ease.linear) {
+    return {
+        from,
+        to,
+        dur,
+        ease: e,
+        startMs: -1,
+        val: from,
+        done: false
+    };
+}
+function tweenStart(tw, nowMs) {
+    tw.startMs = nowMs;
+    tw.val = tw.from;
+    tw.done = false;
+}
+function tweenTick(tw, nowMs) {
+    if (tw.done || tw.startMs < 0) return tw.val;
+    const t = Math.min(1, (nowMs - tw.startMs) / tw.dur);
+    tw.val = tw.from + (tw.to - tw.from) * tw.ease(t);
+    if (t >= 1) tw.done = true;
+    return tw.val;
+}
+export { ease, tween, tweenStart, tweenTick };

package/dist/components/metal-border/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MetalBorder } from "./MetalBorder";
+export type { MetalBorderProps, MetalBorderKind, MetalBorderPreset, MetalBorderResolvedTheme, MetalBorderTheme, } from "./MetalBorder";

package/dist/components/metal-border/index.js

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

package/dist/components/meter/Meter.css

@@ -1,89 +1,89 @@
-@layer components {
-  .meter {
-    display: grid;
-    width: 100%;
-    gap: 0.25rem;
-    grid-template-areas:
-      "label output"
-      "track track";
-    grid-template-columns: 1fr auto;
-
-    --meter-fill: var(--color-accent);
-  }
-
-  .meter [data-slot="label"] {
-    grid-area: label;
-    width: fit-content;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-  }
-
-  .meter__output {
-    grid-area: output;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .meter__track {
-    grid-area: track;
-    position: relative;
-    overflow: hidden;
-    border-radius: 9999px;
-    background: var(--color-base-200);
-    height: 0.5rem;
-  }
-
-  .meter__fill {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    border-radius: 9999px;
-    background-color: var(--meter-fill);
-    transition: width 300ms var(--ease-out);
-  }
-
-  .meter--sm .meter__track {
-    height: 0.25rem;
-  }
-
-  .meter--lg .meter__track {
-    height: 0.75rem;
-  }
-
-  .meter--default {
-    --meter-fill: var(--color-base-content);
-  }
-
-  .meter--accent {
-    --meter-fill: var(--color-accent);
-  }
-
-  .meter--success {
-    --meter-fill: var(--color-success);
-  }
-
-  .meter--warning {
-    --meter-fill: var(--color-warning);
-  }
-
-  .meter--danger {
-    --meter-fill: var(--color-danger);
-  }
-
-  .meter--disabled,
-  .meter[aria-disabled="true"],
-  .meter[data-disabled="true"] {
-    opacity: 0.6;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .meter__fill {
-      transition: none;
-    }
-  }
-}
-
+@layer components {
+  .meter {
+    display: grid;
+    width: 100%;
+    gap: 0.25rem;
+    grid-template-areas:
+      "label output"
+      "track track";
+    grid-template-columns: 1fr auto;
+
+    --meter-fill: var(--color-accent);
+  }
+
+  .meter [data-slot="label"] {
+    grid-area: label;
+    width: fit-content;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+  }
+
+  .meter__output {
+    grid-area: output;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .meter__track {
+    grid-area: track;
+    position: relative;
+    overflow: hidden;
+    border-radius: 9999px;
+    background: var(--color-base-200);
+    height: 0.5rem;
+  }
+
+  .meter__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: 9999px;
+    background-color: var(--meter-fill);
+    transition: width 300ms var(--ease-out);
+  }
+
+  .meter--sm .meter__track {
+    height: 0.25rem;
+  }
+
+  .meter--lg .meter__track {
+    height: 0.75rem;
+  }
+
+  .meter--default {
+    --meter-fill: var(--color-base-content);
+  }
+
+  .meter--accent {
+    --meter-fill: var(--color-accent);
+  }
+
+  .meter--success {
+    --meter-fill: var(--color-success);
+  }
+
+  .meter--warning {
+    --meter-fill: var(--color-warning);
+  }
+
+  .meter--danger {
+    --meter-fill: var(--color-danger);
+  }
+
+  .meter--disabled,
+  .meter[aria-disabled="true"],
+  .meter[data-disabled="true"] {
+    opacity: 0.6;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .meter__fill {
+      transition: none;
+    }
+  }
+}
+