@bergetai/ui 0.3.5 → 0.4.0

package/dist/index.d.cts

@@ -657,4 +657,37 @@ interface WindowFrameProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const WindowFrame: React$1.ForwardRefExoticComponent<WindowFrameProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, HeroBlock, type HeroBlockProps, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };
+/**
+ * FogIllustration — a volumetric fog raymarcher rendered as chunky
+ * 1-bit dither in a given palette.
+ *
+ * Two GPU passes: the scene is raymarched at low internal resolution
+ * (ridged fbm ground, drifting fog volumes, air haze — the fog hides
+ * the low resolution), then a full-resolution pass thresholds the
+ * scene against a Bayer matrix with hash jitter: ink dots on milk,
+ * with moss-tinted dots where fog dominates.
+ *
+ * The canvas fills its parent element; give the parent a size.
+ * Pauses under prefers-reduced-motion after one frame.
+ */
+type FogPalette = {
+    /** Dark terrain and dither ink. */
+    ink: string;
+    /** Background the dots sit on. */
+    milk: string;
+    /** Tint for dots where fog dominates. */
+    moss: string;
+};
+/** The Berget brand palette, as rendered sRGB. */
+declare const FOG_BRAND_PALETTE: FogPalette;
+interface FogIllustrationProps {
+    /** Colors as hex strings. Unset keys fall back to the brand palette. */
+    palette?: Partial<FogPalette>;
+    /** Flight speed multiplier @default 1 */
+    speed?: number;
+    /** Additional CSS classes for the canvas element */
+    className?: string;
+}
+declare const FogIllustration: ({ palette, speed, className }: FogIllustrationProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, HeroBlock, type HeroBlockProps, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };

package/dist/index.d.ts

@@ -657,4 +657,37 @@ interface WindowFrameProps extends React$1.HTMLAttributes<HTMLDivElement> {
 }
 declare const WindowFrame: React$1.ForwardRefExoticComponent<WindowFrameProps & React$1.RefAttributes<HTMLDivElement>>;
 
-export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, HeroBlock, type HeroBlockProps, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };
+/**
+ * FogIllustration — a volumetric fog raymarcher rendered as chunky
+ * 1-bit dither in a given palette.
+ *
+ * Two GPU passes: the scene is raymarched at low internal resolution
+ * (ridged fbm ground, drifting fog volumes, air haze — the fog hides
+ * the low resolution), then a full-resolution pass thresholds the
+ * scene against a Bayer matrix with hash jitter: ink dots on milk,
+ * with moss-tinted dots where fog dominates.
+ *
+ * The canvas fills its parent element; give the parent a size.
+ * Pauses under prefers-reduced-motion after one frame.
+ */
+type FogPalette = {
+    /** Dark terrain and dither ink. */
+    ink: string;
+    /** Background the dots sit on. */
+    milk: string;
+    /** Tint for dots where fog dominates. */
+    moss: string;
+};
+/** The Berget brand palette, as rendered sRGB. */
+declare const FOG_BRAND_PALETTE: FogPalette;
+interface FogIllustrationProps {
+    /** Colors as hex strings. Unset keys fall back to the brand palette. */
+    palette?: Partial<FogPalette>;
+    /** Flight speed multiplier @default 1 */
+    speed?: number;
+    /** Additional CSS classes for the canvas element */
+    className?: string;
+}
+declare const FogIllustration: ({ palette, speed, className }: FogIllustrationProps) => react_jsx_runtime.JSX.Element;
+
+export { Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Badge, type BadgeProps, BergetLogo, type BergetLogoProps, Box, type BoxProps, type SpacingScale as BoxSpacingScale, Button, type ButtonProps, COUNTRIES, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, CodeBlock, type CodeBlockProps, Container, type ContainerProps, type Country, CountrySelect, type CountrySelectProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EU_COUNTRY_CODES, FOG_BRAND_PALETTE, FeatureList, type FeatureListProps, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FogIllustration, type FogIllustrationProps, type FogPalette, Grid, type GridColsScale, type GridProps, type GridRowsScale, type SpacingScale$1 as GridSpacingScale, HeroBlock, type HeroBlockProps, Icon, type IconProps, Input, type InputProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemProps, ItemSeparator, ItemTitle, Label, LanguageSelect, type LanguageSelectOption, type LanguageSelectProps, Link, type LinkProps, List, ListHeader, type ListHeaderProps, ListItem, type ListItemProps, type ListProps, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Select, type SelectOption, type SelectProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, type TerminalExample, TextArea, type TextAreaProps, type Theme, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, Typography, type TypographyProps, WindowFrame, type WindowFrameProps, type WindowTab, alertVariants, badgeVariants, boxVariants, buttonVariants, cardVariants, checkboxVariants, containerVariants, getCountryByCode, getCountryByName, gridVariants, isEUCountry, linkVariants, navigationMenuTriggerStyle, selectVariants, switchRootVariants, switchThumbVariants, textAreaVariants, typographyVariants, useTheme };

package/dist/index.js

@@ -3495,6 +3495,324 @@ var WindowFrame = React43.forwardRef(
   }
 );
 WindowFrame.displayName = "WindowFrame";
+
+// src/components/fog-illustration/FogIllustration.tsx
+import { useEffect as useEffect3, useRef } from "react";
+import { jsx as jsx44 } from "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 = useRef(null);
+  const live = useRef({ palette: { ...FOG_BRAND_PALETTE, ...palette }, speed });
+  live.current = { palette: { ...FOG_BRAND_PALETTE, ...palette }, speed };
+  useEffect3(() => {
+    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__ */ jsx44("canvas", { ref, "aria-hidden": "true", className: cn("size-full", className) });
+};
 export {
   Alert2 as Alert,
   AlertDescription,
@@ -3551,6 +3869,7 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   EU_COUNTRY_CODES,
+  FOG_BRAND_PALETTE,
   FeatureList,
   Field,
   FieldContent,
@@ -3562,6 +3881,7 @@ export {
   FieldSeparator,
   FieldSet,
   FieldTitle,
+  FogIllustration,
   Grid,
   HeroBlock,
   Icon,