@bergetai/ui 0.3.5 → 0.4.0

package/dist/index.cjs

@@ -85,6 +85,7 @@ __export(index_exports, {
   DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
   DropdownMenuTrigger: () => DropdownMenuTrigger,
   EU_COUNTRY_CODES: () => EU_COUNTRY_CODES,
+  FOG_BRAND_PALETTE: () => FOG_BRAND_PALETTE,
   FeatureList: () => FeatureList,
   Field: () => Field,
   FieldContent: () => FieldContent,
@@ -96,6 +97,7 @@ __export(index_exports, {
   FieldSeparator: () => FieldSeparator,
   FieldSet: () => FieldSet,
   FieldTitle: () => FieldTitle,
+  FogIllustration: () => FogIllustration,
   Grid: () => Grid,
   HeroBlock: () => HeroBlock,
   Icon: () => Icon,
@@ -3694,6 +3696,324 @@ var WindowFrame = React43.forwardRef(
   }
 );
 WindowFrame.displayName = "WindowFrame";
+
+// src/components/fog-illustration/FogIllustration.tsx
+var import_react4 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var FOG_BRAND_PALETTE = {
+  ink: "#171a1a",
+  milk: "#f7f5ed",
+  moss: "#598c6b"
+};
+var hexToRgb = (hex) => {
+  let h = hex.replace("#", "");
+  if (h.length === 3)
+    h = h.split("").map((c) => c + c).join("");
+  const n = Number.parseInt(h, 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+};
+var hexToRgbAll = (p) => ({
+  ink: hexToRgb(p.ink),
+  milk: hexToRgb(p.milk),
+  moss: hexToRgb(p.moss)
+});
+var VERT = `#version 300 es
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+var SCENE_FRAG = `#version 300 es
+precision highp float;
+out vec4 outColor;
+uniform vec2 uRes;
+uniform float uTime;
+uniform sampler2D uNoise;
+
+float noise(vec3 x) {
+  // 3D value noise from the 2D random texture \u2014 iq's two-slice trick:
+  // z slices are tiled into the u axis, two neighbours mixed by fract(z).
+  vec3 p = floor(x), f = fract(x);
+  f = f * f * (3.0 - 2.0 * f);
+  vec2 uv = (p.xy + vec2(37.0, 239.0) * p.z) + f.xy;
+  vec2 rg = texture(uNoise, (uv + 0.5) / 256.0).xy;
+  return mix(rg.x, rg.y, f.z) * 2.0 - 1.0;
+}
+
+float ground(vec3 pos, int oct) {
+  float f = 0.0;
+  float s = 1.4;
+  vec3 p = pos * s * 0.1;
+  for (int i = 0; i < 6; i++) {
+    if (i >= oct) break;
+    f += abs(noise(p)) * s;
+    p = vec3(p.z * 5.0, p.xy * 3.0 + p.yx * 4.0 * vec2(1, -1)) * 2.0 / 5.0;
+    s /= 2.0;
+  }
+  return (pos.y + f) * 0.8;
+}
+
+float fogD(vec3 pos, int oct) {
+  float f = 0.0;
+  float s = 1.0;
+  vec3 p = pos * 0.7;
+  p += uTime * vec3(0.0, -0.02, 0.02);
+  for (int i = 0; i < 6; i++) {
+    if (i >= oct) break;
+    f += noise(p) * s;
+    p = vec3(p.z * 5.0, p.xy * 3.0 + p.yx * 4.0 * vec2(1, -1)) * 2.0 / 5.0;
+    s /= 1.7;
+  }
+  f += smoothstep(0.2, 0.0, abs(pos.y + 1.0)) * 0.4;
+  f += smoothstep(0.35, 0.15, abs(pos.y - 0.02)) * 0.7;
+  f *= 1.0 - smoothstep(-0.1, 0.55, pos.y);
+  f = smoothstep(0.45, 1.7, f);
+  float g = ground(pos, 2);
+  f *= 1.0 - g / (abs(g) + 0.04);
+  return f;
+}
+
+float airD(vec3 pos) { return exp2(-pos.y / 5.0 - 3.0); }
+
+void main() {
+  float time = uTime * 0.2;
+  vec3 velocity = vec3(1.0, 0.0, 0.0);
+  vec3 camPos = vec3(sin(time * 0.618) * 0.4, 0.62 + 0.08 * sin(time), 0.0) + time * velocity;
+  vec3 camLook = vec3(-1.0, -0.3, 4.0) + (time - sin(time)) * velocity;
+
+  vec2 fc = gl_FragCoord.xy;
+  vec3 ray = vec3((fc - uRes * 0.5) / uRes.x, 1.0);
+  vec3 camDir = normalize(camLook - camPos);
+  vec3 camRight = normalize(cross(vec3(0.0, 1.0, 0.0), camDir));
+  vec3 camUp = cross(camDir, camRight);
+  ray = normalize(ray.x * camRight + ray.y * camUp + ray.z * camDir);
+
+  vec3 sunDir = normalize(vec3(-3.0, 2.0, 1.0));
+
+  vec3 pos = camPos;
+  float absorption = 1.0;
+  float emission = 0.0;
+  float fogFactor = 0.0;
+  float lastStride = 0.0;
+  float lastFog = 0.0;
+  float lastAir = 0.0;
+
+  for (int i = 0; i < 80; i++) {
+    float h = ground(pos, 4);
+    float fog = fogD(pos, 3);
+    float fogIntegral = lastStride * mix(fog, lastFog, 0.5);
+    float air = airD(pos);
+    float airIntegral = lastStride * mix(air, lastAir, 0.5);
+
+    float fogAbsDelta = pow(0.1, fogIntegral);
+    float fogEmiDelta = 1.0 - fogAbsDelta;
+    float shadowStep = 0.07;
+    float shadow = (fog - fogD(pos + sunDir * shadowStep, 2)) / shadowStep;
+    fogEmiDelta *= mix(0.2, 0.85, smoothstep(-1.0, 1.0, shadow));
+
+    float airAbsDelta = pow(0.55, airIntegral);
+    float airEmiDelta = (1.0 - pow(0.55, airIntegral)) * 0.5;
+
+    float absDelta = fogAbsDelta * airAbsDelta;
+    emission += absorption * sqrt(absDelta) * (fogEmiDelta + airEmiDelta);
+    absorption *= absDelta;
+
+    fogFactor = max(fogFactor, (1.0 - absorption) * step(0.05, fog));
+
+    lastFog = fog;
+    lastAir = air;
+    h = min(h, 0.1);
+    lastStride = h;
+    pos += h * ray;
+    if (h < 0.001) break;
+  }
+
+  float brightness;
+  if (absorption > 0.02) {
+    // terrain visible \u2014 light it
+    vec2 d = vec2(-1.0, 1.0) * 0.02;
+    vec3 normal = normalize(
+      ground(pos + d.xxx, 5) * d.xxx +
+      ground(pos + d.xyy, 5) * d.xyy +
+      ground(pos + d.yxy, 5) * d.yxy +
+      ground(pos + d.yyx, 5) * d.yyx
+    );
+    float ao = smoothstep(-0.2, 1.5, ground(pos + normal * 0.3, 5) / 0.3);
+    float shade = (0.5 * ao + 0.5 * max(dot(normal, sunDir), 0.0)) * 0.65;
+    brightness = shade * absorption + emission;
+  } else {
+    brightness = emission;
+  }
+
+  // Clear sky \u2014 rays that escape upward land on milk, whatever the
+  // haze did. The poster look: light sky, dark ridges, fog between.
+  float sky = smoothstep(-0.15, 0.35, ray.y) * 0.92;
+  brightness = max(brightness, sky * absorption);
+
+  outColor = vec4(clamp(brightness, 0.0, 1.0), clamp(fogFactor, 0.0, 1.0), 0.0, 1.0);
+}`;
+var DITHER_FRAG = `#version 300 es
+precision highp float;
+out vec4 outColor;
+uniform vec2 uRes;
+uniform float uDot;
+uniform sampler2D uScene;
+uniform vec3 uInk;
+uniform vec3 uMilk;
+uniform vec3 uMoss;
+
+float bayer2(vec2 a) { a = floor(a); return fract(a.x / 2.0 + a.y * a.y * 0.75); }
+float bayer4(vec2 a) { return bayer2(0.5 * a) * 0.25 + bayer2(a); }
+float hash12(vec2 p) {
+  vec3 p3 = fract(vec3(p.xyx) * 0.1031);
+  p3 += dot(p3, p3.yzx + 33.33);
+  return fract((p3.x + p3.y) * p3.z);
+}
+
+void main() {
+  // Chunky cells: one dot decision per uDot\xD7uDot block \u2014 the dither
+  // reads as visible pixels, not 1px noise.
+  vec2 cell = floor(gl_FragCoord.xy / uDot);
+  vec4 scene = texture(uScene, (cell * uDot + uDot * 0.5) / uRes);
+  float darkness = 1.0 - scene.r;
+  float jitter = (hash12(cell) - 0.5) * 0.3;
+  float on = step(darkness, bayer4(cell) + jitter);
+  vec3 col = scene.g > 0.5 ? uMoss : uInk;
+  outColor = vec4(mix(col, uMilk, on), 1.0);
+}`;
+var compile = (gl, type, src) => {
+  const sh = gl.createShader(type);
+  if (!sh) throw new Error("shader creation failed");
+  gl.shaderSource(sh, src);
+  gl.compileShader(sh);
+  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
+    throw new Error(gl.getShaderInfoLog(sh) || "shader compile failed");
+  }
+  return sh;
+};
+var program = (gl, frag) => {
+  const p = gl.createProgram();
+  if (!p) throw new Error("program creation failed");
+  gl.attachShader(p, compile(gl, gl.VERTEX_SHADER, VERT));
+  gl.attachShader(p, compile(gl, gl.FRAGMENT_SHADER, frag));
+  gl.linkProgram(p);
+  if (!gl.getProgramParameter(p, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(p) || "program link failed");
+  }
+  return p;
+};
+var FogIllustration = ({ palette, speed = 1, className }) => {
+  const ref = (0, import_react4.useRef)(null);
+  const live = (0, import_react4.useRef)({ palette: { ...FOG_BRAND_PALETTE, ...palette }, speed });
+  live.current = { palette: { ...FOG_BRAND_PALETTE, ...palette }, speed };
+  (0, import_react4.useEffect)(() => {
+    const canvas = ref.current;
+    const parent = canvas?.parentElement;
+    if (!canvas || !parent) return;
+    const gl = canvas.getContext("webgl2", {
+      antialias: false,
+      alpha: false,
+      preserveDrawingBuffer: true
+    });
+    if (!gl) return;
+    let sceneProg;
+    let ditherProg;
+    try {
+      sceneProg = program(gl, SCENE_FRAG);
+      ditherProg = program(gl, DITHER_FRAG);
+    } catch (err) {
+      console.error("fog shader failed:", err);
+      return;
+    }
+    const noiseTex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, noiseTex);
+    const N = 256;
+    const data = new Uint8Array(N * N * 4);
+    for (let i = 0; i < data.length; i += 4) {
+      data[i] = Math.random() * 256;
+      data[i + 1] = Math.random() * 256;
+      data[i + 2] = Math.random() * 256;
+      data[i + 3] = 255;
+    }
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, N, N, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    const sceneTex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, sceneTex);
+    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);
+    const fbo = gl.createFramebuffer();
+    const SCALE = 0.3;
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const start = performance.now();
+    let raf = 0;
+    let last = 0;
+    const render = (elapsed) => {
+      const w = parent.clientWidth;
+      const h = parent.clientHeight;
+      if (w === 0 || h === 0) return;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      if (canvas.width !== Math.round(w * dpr) || canvas.height !== Math.round(h * dpr)) {
+        canvas.width = Math.round(w * dpr);
+        canvas.height = Math.round(h * dpr);
+      }
+      const sceneW = Math.max(64, Math.round(w * SCALE));
+      const sceneH = Math.max(64, Math.round(h * SCALE));
+      gl.bindTexture(gl.TEXTURE_2D, sceneTex);
+      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, sceneW, sceneH, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      const t = elapsed * live.current.speed;
+      gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+      gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, sceneTex, 0);
+      gl.viewport(0, 0, sceneW, sceneH);
+      gl.useProgram(sceneProg);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, noiseTex);
+      gl.uniform1i(gl.getUniformLocation(sceneProg, "uNoise"), 0);
+      gl.uniform2f(gl.getUniformLocation(sceneProg, "uRes"), sceneW, sceneH);
+      gl.uniform1f(gl.getUniformLocation(sceneProg, "uTime"), t);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+      const { ink, milk, moss } = hexToRgbAll(live.current.palette);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.useProgram(ditherProg);
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, sceneTex);
+      gl.uniform1i(gl.getUniformLocation(ditherProg, "uScene"), 0);
+      gl.uniform2f(gl.getUniformLocation(ditherProg, "uRes"), canvas.width, canvas.height);
+      gl.uniform1f(gl.getUniformLocation(ditherProg, "uDot"), Math.max(3, Math.round(dpr * 2)));
+      gl.uniform3f(gl.getUniformLocation(ditherProg, "uInk"), ...ink);
+      gl.uniform3f(gl.getUniformLocation(ditherProg, "uMilk"), ...milk);
+      gl.uniform3f(gl.getUniformLocation(ditherProg, "uMoss"), ...moss);
+      gl.drawArrays(gl.TRIANGLES, 0, 3);
+    };
+    render(0);
+    if (!reduced) {
+      const frame = (now) => {
+        if (now - last >= 1e3 / 30) {
+          last = now;
+          render((now - start) / 1e3);
+        }
+        raf = requestAnimationFrame(frame);
+      };
+      raf = requestAnimationFrame(frame);
+    }
+    const observer = new ResizeObserver(() => render((performance.now() - start) / 1e3));
+    observer.observe(parent);
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+      gl.deleteProgram(sceneProg);
+      gl.deleteProgram(ditherProg);
+      gl.deleteTexture(noiseTex);
+      gl.deleteTexture(sceneTex);
+      gl.deleteFramebuffer(fbo);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
@@ -3751,6 +4071,7 @@ WindowFrame.displayName = "WindowFrame";
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   EU_COUNTRY_CODES,
+  FOG_BRAND_PALETTE,
   FeatureList,
   Field,
   FieldContent,
@@ -3762,6 +4083,7 @@ WindowFrame.displayName = "WindowFrame";
   FieldSeparator,
   FieldSet,
   FieldTitle,
+  FogIllustration,
   Grid,
   HeroBlock,
   Icon,