@nastechai-research/ui 0.18.2

package/dist/ui/components/overlays/lens.js

@@ -0,0 +1,60 @@
+"use client";
+import { atom } from "nanostores";
+import { setControlValue } from "../../../hooks/use-smooth-controls.js";
+export const LENS_0 = {
+  Globe: { innerColor: "#170d02", innerOpacity: 0.1, outerColor: "#FFAC02" },
+  Lens: {
+    bgBlend: "difference",
+    bgColor: "#041C1C",
+    bgOpacity: 1,
+    fgColor: "#FFFFFF",
+    fgOpacity: 0,
+    fillerOpacity: 0.033,
+    mgColor: "#ffe6cb",
+    mgOpacity: 1
+  }
+};
+export const LENS_5I = {
+  Globe: { innerColor: "#170d02", innerOpacity: 0.3, outerColor: "#FFAC02" },
+  Lens: {
+    bgBlend: "multiply",
+    bgColor: "#170d02",
+    bgOpacity: 1,
+    fgColor: "#FFFFFF",
+    fgOpacity: 1,
+    fillerOpacity: 0.06,
+    mgColor: "#FFAC02",
+    mgOpacity: 1
+  }
+};
+export const lens0 = (l, g) => ({
+  Globe: { ...LENS_0.Globe, ...g },
+  Lens: { ...LENS_0.Lens, ...l }
+});
+export const lens5i = (l, g) => ({
+  Globe: { ...LENS_5I.Globe, ...g },
+  Lens: { ...LENS_5I.Lens, ...l }
+});
+export const LENSES = [
+  ["0", LENS_0],
+  ["1", lens0({ bgColor: "#0A1F1F" })],
+  ["2", lens0({ bgColor: "#0E0313", mgColor: "#e6cbff" })],
+  ["3", lens5i({ mgColor: "#FFAC02" })],
+  ["4", lens5i({ bgColor: "#0E0313", mgColor: "#FF5500" })],
+  ["5", lens0({ bgColor: "#1540B1", bgOpacity: 0.7 })],
+  ["5i", LENS_5I],
+  ["6", lens5i({ bgColor: "#170D02", mgColor: "#00E5FF" })]
+];
+export const applyLens = (preset, animate = false) => Object.entries(preset).forEach(
+  ([g, v]) => Object.entries(v).forEach(
+    ([k, val]) => setControlValue(g, k, val, { animate })
+  )
+);
+export const $lightMode = atom(true);
+export const toggleLens = () => {
+  const isLight = $lightMode.get();
+  const next = isLight ? LENS_0 : LENS_5I;
+  $lightMode.set(!isLight);
+  applyLens(next, true);
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IGF0b20gfSBmcm9tICduYW5vc3RvcmVzJ1xuXG5pbXBvcnQgeyBzZXRDb250cm9sVmFsdWUgfSBmcm9tICcuLi8uLi8uLi9ob29rcy91c2Utc21vb3RoLWNvbnRyb2xzJ1xuXG5leHBvcnQgY29uc3QgTEVOU18wID0ge1xuICBHbG9iZTogeyBpbm5lckNvbG9yOiAnIzE3MGQwMicsIGlubmVyT3BhY2l0eTogMC4xLCBvdXRlckNvbG9yOiAnI0ZGQUMwMicgfSxcbiAgTGVuczoge1xuICAgIGJnQmxlbmQ6ICdkaWZmZXJlbmNlJyxcbiAgICBiZ0NvbG9yOiAnIzA0MUMxQycsXG4gICAgYmdPcGFjaXR5OiAxLFxuICAgIGZnQ29sb3I6ICcjRkZGRkZGJyxcbiAgICBmZ09wYWNpdHk6IDAsXG4gICAgZmlsbGVyT3BhY2l0eTogMC4wMzMsXG4gICAgbWdDb2xvcjogJyNmZmU2Y2InLFxuICAgIG1nT3BhY2l0eTogMVxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBMRU5TXzVJID0ge1xuICBHbG9iZTogeyBpbm5lckNvbG9yOiAnIzE3MGQwMicsIGlubmVyT3BhY2l0eTogMC4zLCBvdXRlckNvbG9yOiAnI0ZGQUMwMicgfSxcbiAgTGVuczoge1xuICAgIGJnQmxlbmQ6ICdtdWx0aXBseScsXG4gICAgYmdDb2xvcjogJyMxNzBkMDInLFxuICAgIGJnT3BhY2l0eTogMSxcbiAgICBmZ0NvbG9yOiAnI0ZGRkZGRicsXG4gICAgZmdPcGFjaXR5OiAxLFxuICAgIGZpbGxlck9wYWNpdHk6IDAuMDYsXG4gICAgbWdDb2xvcjogJyNGRkFDMDInLFxuICAgIG1nT3BhY2l0eTogMVxuICB9XG59XG5cbmV4cG9ydCBjb25zdCBsZW5zMCA9IChcbiAgbD86IFBhcnRpYWw8dHlwZW9mIExFTlNfMC5MZW5zPixcbiAgZz86IFBhcnRpYWw8dHlwZW9mIExFTlNfMC5HbG9iZT5cbik6IExlbnNQcmVzZXQgPT4gKHtcbiAgR2xvYmU6IHsgLi4uTEVOU18wLkdsb2JlLCAuLi5nIH0sXG4gIExlbnM6IHsgLi4uTEVOU18wLkxlbnMsIC4uLmwgfVxufSlcblxuLy8gVGhlIEhlcm1lcyBsaWdodC1tb2RlIGxvb2sgaXMgcHJvZHVjZWQgYnkgYSBmdWxsc2NyZWVuIG9wYXF1ZS13aGl0ZVxuLy8gYG1peC1ibGVuZC1tb2RlOiBkaWZmZXJlbmNlYCBmb3JlZ3JvdW5kIGxheWVyIHRoYXQgaW52ZXJ0cyBldmVyeXRoaW5nLlxuLy8gQ29sb3JlZCBsZW5zZXMgdGhhdCB3YW50IGEgXCJ3aGl0ZSArIGFjY2VudFwiIGxvb2sgTVVTVCBiZSBidWlsdCBmcm9tXG4vLyBMRU5TXzVJLCBub3QgTEVOU18wIFx1MjAxNCBvdGhlcndpc2UgYGJnQmxlbmQ6ICdkaWZmZXJlbmNlJ2AgKyBhbiBvcGFxdWVcbi8vIGNvbG9yZWQgYmcgKyBhY3RpdmUgZmcgaW52ZXJzaW9uIGxhbmQgaGFsZndheSBiZXR3ZWVuIGRhcmsgYW5kIGxpZ2h0XG4vLyBtb2RlIGFuZCBwcm9kdWNlIGEgbXVkZHkgd2FybSB3YXNoIGluc3RlYWQgb2YgYSBjbGVhbiBpbnZlcnNpb24uXG5leHBvcnQgY29uc3QgbGVuczVpID0gKFxuICBsPzogUGFydGlhbDx0eXBlb2YgTEVOU181SS5MZW5zPixcbiAgZz86IFBhcnRpYWw8dHlwZW9mIExFTlNfNUkuR2xvYmU+XG4pOiBMZW5zUHJlc2V0ID0+ICh7XG4gIEdsb2JlOiB7IC4uLkxFTlNfNUkuR2xvYmUsIC4uLmcgfSxcbiAgTGVuczogeyAuLi5MRU5TXzVJLkxlbnMsIC4uLmwgfVxufSlcblxuLy8gQWNjZW50IGNvbG9ycyBhcmUgdGhlICpwcmUtaW52ZXJzaW9uKiBzb3VyY2U7IGFmdGVyIHRoZSBkaWZmZXJlbmNlIEZHXG4vLyBsYXllciB0aGV5IHJlYWQgYXMgdGhlaXIgdmlzdWFsIGNvbXBsZW1lbnQuIGUuZy4gYCNGRkFDMDJgIChvcmFuZ2UpXG4vLyByZW5kZXJzIGFzIGJsdWUgIzAwNTNGRCBvbiBzY3JlZW4gXHUyMDE0IHRoYXQncyB0aGUgZGVmYXVsdCBMRU5TXzVJIGFjY2VudC5cbmV4cG9ydCBjb25zdCBMRU5TRVM6IFtzdHJpbmcsIExlbnNQcmVzZXRdW10gPSBbXG4gIFsnMCcsIExFTlNfMF0sXG4gIFsnMScsIGxlbnMwKHsgYmdDb2xvcjogJyMwQTFGMUYnIH0pXSxcbiAgWycyJywgbGVuczAoeyBiZ0NvbG9yOiAnIzBFMDMxMycsIG1nQ29sb3I6ICcjZTZjYmZmJyB9KV0sXG4gIFsnMycsIGxlbnM1aSh7IG1nQ29sb3I6ICcjRkZBQzAyJyB9KV0sXG4gIFsnNCcsIGxlbnM1aSh7IGJnQ29sb3I6ICcjMEUwMzEzJywgbWdDb2xvcjogJyNGRjU1MDAnIH0pXSxcbiAgWyc1JywgbGVuczAoeyBiZ0NvbG9yOiAnIzE1NDBCMScsIGJnT3BhY2l0eTogMC43IH0pXSxcbiAgWyc1aScsIExFTlNfNUldLFxuICBbJzYnLCBsZW5zNWkoeyBiZ0NvbG9yOiAnIzE3MEQwMicsIG1nQ29sb3I6ICcjMDBFNUZGJyB9KV1cbl1cblxuZXhwb3J0IGNvbnN0IGFwcGx5TGVucyA9IChwcmVzZXQ6IExlbnNQcmVzZXQsIGFuaW1hdGUgPSBmYWxzZSkgPT5cbiAgT2JqZWN0LmVudHJpZXMocHJlc2V0KS5mb3JFYWNoKChbZywgdl0pID0+XG4gICAgT2JqZWN0LmVudHJpZXModikuZm9yRWFjaCgoW2ssIHZhbF0pID0+XG4gICAgICBzZXRDb250cm9sVmFsdWUoZywgaywgdmFsLCB7IGFuaW1hdGUgfSlcbiAgICApXG4gIClcblxuZXhwb3J0IGNvbnN0ICRsaWdodE1vZGUgPSBhdG9tKHRydWUpXG5cbmV4cG9ydCBjb25zdCB0b2dnbGVMZW5zID0gKCkgPT4ge1xuICBjb25zdCBpc0xpZ2h0ID0gJGxpZ2h0TW9kZS5nZXQoKVxuICBjb25zdCBuZXh0ID0gaXNMaWdodCA/IExFTlNfMCA6IExFTlNfNUlcblxuICAkbGlnaHRNb2RlLnNldCghaXNMaWdodClcbiAgYXBwbHlMZW5zKG5leHQsIHRydWUpXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgTGVuc1ByZXNldCB7XG4gIEdsb2JlOiB0eXBlb2YgTEVOU18wLkdsb2JlXG4gIExlbnM6IHR5cGVvZiBMRU5TXzAuTGVuc1xufVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUVBLFNBQVMsWUFBWTtBQUVyQixTQUFTLHVCQUF1QjtBQUV6QixhQUFNLFNBQVM7QUFBQSxFQUNwQixPQUFPLEVBQUUsWUFBWSxXQUFXLGNBQWMsS0FBSyxZQUFZLFVBQVU7QUFBQSxFQUN6RSxNQUFNO0FBQUEsSUFDSixTQUFTO0FBQUEsSUFDVCxTQUFTO0FBQUEsSUFDVCxXQUFXO0FBQUEsSUFDWCxTQUFTO0FBQUEsSUFDVCxXQUFXO0FBQUEsSUFDWCxlQUFlO0FBQUEsSUFDZixTQUFTO0FBQUEsSUFDVCxXQUFXO0FBQUEsRUFDYjtBQUNGO0FBRU8sYUFBTSxVQUFVO0FBQUEsRUFDckIsT0FBTyxFQUFFLFlBQVksV0FBVyxjQUFjLEtBQUssWUFBWSxVQUFVO0FBQUEsRUFDekUsTUFBTTtBQUFBLElBQ0osU0FBUztBQUFBLElBQ1QsU0FBUztBQUFBLElBQ1QsV0FBVztBQUFBLElBQ1gsU0FBUztBQUFBLElBQ1QsV0FBVztBQUFBLElBQ1gsZUFBZTtBQUFBLElBQ2YsU0FBUztBQUFBLElBQ1QsV0FBVztBQUFBLEVBQ2I7QUFDRjtBQUVPLGFBQU0sUUFBUSxDQUNuQixHQUNBLE9BQ2dCO0FBQUEsRUFDaEIsT0FBTyxFQUFFLEdBQUcsT0FBTyxPQUFPLEdBQUcsRUFBRTtBQUFBLEVBQy9CLE1BQU0sRUFBRSxHQUFHLE9BQU8sTUFBTSxHQUFHLEVBQUU7QUFDL0I7QUFRTyxhQUFNLFNBQVMsQ0FDcEIsR0FDQSxPQUNnQjtBQUFBLEVBQ2hCLE9BQU8sRUFBRSxHQUFHLFFBQVEsT0FBTyxHQUFHLEVBQUU7QUFBQSxFQUNoQyxNQUFNLEVBQUUsR0FBRyxRQUFRLE1BQU0sR0FBRyxFQUFFO0FBQ2hDO0FBS08sYUFBTSxTQUFpQztBQUFBLEVBQzVDLENBQUMsS0FBSyxNQUFNO0FBQUEsRUFDWixDQUFDLEtBQUssTUFBTSxFQUFFLFNBQVMsVUFBVSxDQUFDLENBQUM7QUFBQSxFQUNuQyxDQUFDLEtBQUssTUFBTSxFQUFFLFNBQVMsV0FBVyxTQUFTLFVBQVUsQ0FBQyxDQUFDO0FBQUEsRUFDdkQsQ0FBQyxLQUFLLE9BQU8sRUFBRSxTQUFTLFVBQVUsQ0FBQyxDQUFDO0FBQUEsRUFDcEMsQ0FBQyxLQUFLLE9BQU8sRUFBRSxTQUFTLFdBQVcsU0FBUyxVQUFVLENBQUMsQ0FBQztBQUFBLEVBQ3hELENBQUMsS0FBSyxNQUFNLEVBQUUsU0FBUyxXQUFXLFdBQVcsSUFBSSxDQUFDLENBQUM7QUFBQSxFQUNuRCxDQUFDLE1BQU0sT0FBTztBQUFBLEVBQ2QsQ0FBQyxLQUFLLE9BQU8sRUFBRSxTQUFTLFdBQVcsU0FBUyxVQUFVLENBQUMsQ0FBQztBQUMxRDtBQUVPLGFBQU0sWUFBWSxDQUFDLFFBQW9CLFVBQVUsVUFDdEQsT0FBTyxRQUFRLE1BQU0sRUFBRTtBQUFBLEVBQVEsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxNQUNuQyxPQUFPLFFBQVEsQ0FBQyxFQUFFO0FBQUEsSUFBUSxDQUFDLENBQUMsR0FBRyxHQUFHLE1BQ2hDLGdCQUFnQixHQUFHLEdBQUcsS0FBSyxFQUFFLFFBQVEsQ0FBQztBQUFBLEVBQ3hDO0FBQ0Y7QUFFSyxhQUFNLGFBQWEsS0FBSyxJQUFJO0FBRTVCLGFBQU0sYUFBYSxNQUFNO0FBQzlCLFFBQU0sVUFBVSxXQUFXLElBQUk7QUFDL0IsUUFBTSxPQUFPLFVBQVUsU0FBUztBQUVoQyxhQUFXLElBQUksQ0FBQyxPQUFPO0FBQ3ZCLFlBQVUsTUFBTSxJQUFJO0FBQ3RCOyIsCiAgIm5hbWVzIjogW10KfQo=

package/dist/ui/components/overlays/noise.d.ts

@@ -0,0 +1,6 @@
+export declare function Noise({ className, style }: NoiseProps): import("react").JSX.Element | null;
+interface NoiseProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export {};

package/dist/ui/components/overlays/noise.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { $gpuTier, useGpuTier } from "../../../hooks/use-gpu-tier.js";
+import { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+import { cn, hexToVec3 } from "../../../utils/index.js";
+import { BLEND_MODES } from "./blend-modes.js";
+const vert = (
+  /*glsl*/
+  `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`
+);
+const frag = (
+  /*glsl*/
+  `
+  uniform vec2 uRes;
+  uniform float uDpr, uSize, uDensity, uOpacity;
+  uniform vec3 uColor;
+  varying vec2 vUv;
+
+  float hash(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() {
+    float n = hash(floor(vUv * uRes / (uSize * uDpr)));
+    gl_FragColor = vec4(uColor, step(1.0 - uDensity, n)) * uOpacity;
+  }
+`
+);
+export function Noise({ className, style }) {
+  const gpuTier = useGpuTier();
+  const c = useSmoothControls(
+    "Effects/Noise",
+    {
+      blend: { options: BLEND_MODES, value: "color-dodge" },
+      color: { value: "#eaeaea" },
+      density: { max: 1, min: 0, step: 0.01, value: 0.11 },
+      enabled: { value: true },
+      opacity: { max: 1, min: 0, step: 0.01, value: 0.55 },
+      size: { max: 10, min: 0.1, step: 0.1, value: 1 }
+    },
+    { collapsed: true }
+  );
+  const canvasRef = useRef(null);
+  const enabled = c.enabled && gpuTier > 0;
+  useEffect(() => {
+    if (!canvasRef.current || !enabled) {
+      return;
+    }
+    let renderer;
+    try {
+      renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        canvas: canvasRef.current,
+        premultipliedAlpha: false
+      });
+    } catch {
+      $gpuTier.set(0);
+      return;
+    }
+    renderer.setClearColor(0, 0);
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const geo = new THREE.PlaneGeometry(2, 2);
+    const mat = new THREE.ShaderMaterial({
+      fragmentShader: frag,
+      transparent: true,
+      uniforms: {
+        uColor: { value: hexToVec3(c.color) },
+        uDensity: { value: c.density },
+        uDpr: { value: 1 },
+        uOpacity: { value: c.opacity },
+        uRes: { value: new THREE.Vector2() },
+        uSize: { value: c.size }
+      },
+      vertexShader: vert
+    });
+    scene.add(new THREE.Mesh(geo, mat));
+    const dpr = Math.min(devicePixelRatio, 1.5);
+    const render = () => {
+      mat.uniforms.uColor.value = hexToVec3(c.color);
+      mat.uniforms.uDensity.value = c.density;
+      mat.uniforms.uOpacity.value = c.opacity;
+      mat.uniforms.uSize.value = c.size;
+      mat.uniforms.uDpr.value = dpr;
+      renderer.render(scene, camera);
+    };
+    const resize = () => {
+      renderer.setSize(innerWidth, innerHeight);
+      renderer.setPixelRatio(dpr);
+      mat.uniforms.uRes.value.set(innerWidth * dpr, innerHeight * dpr);
+      render();
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    const onVisibility = () => {
+      if (!document.hidden) render();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("resize", resize);
+      document.removeEventListener("visibilitychange", onVisibility);
+      mat.dispose();
+      geo.dispose();
+      renderer.dispose();
+    };
+  }, [
+    enabled,
+    gpuTier,
+    c.color,
+    c.density,
+    c.opacity,
+    c.size
+  ]);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      className: cn("h-full w-full", className),
+      ref: canvasRef,
+      style: { mixBlendMode: c.blend, ...style }
+    }
+  );
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZUVmZmVjdCwgdXNlUmVmIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgKiBhcyBUSFJFRSBmcm9tICd0aHJlZSdcblxuaW1wb3J0IHsgJGdwdVRpZXIsIHVzZUdwdVRpZXIgfSBmcm9tICcuLi8uLi8uLi9ob29rcy91c2UtZ3B1LXRpZXInXG5pbXBvcnQgeyB1c2VTbW9vdGhDb250cm9scyB9IGZyb20gJy4uLy4uLy4uL2hvb2tzL3VzZS1zbW9vdGgtY29udHJvbHMnXG5pbXBvcnQgeyBjbiwgaGV4VG9WZWMzIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnXG5cbmltcG9ydCB7IEJMRU5EX01PREVTIH0gZnJvbSAnLi9ibGVuZC1tb2RlcydcblxuY29uc3QgdmVydCA9IC8qZ2xzbCovIGBcbiAgdmFyeWluZyB2ZWMyIHZVdjtcbiAgdm9pZCBtYWluKCkge1xuICAgIHZVdiA9IHV2O1xuICAgIGdsX1Bvc2l0aW9uID0gcHJvamVjdGlvbk1hdHJpeCAqIG1vZGVsVmlld01hdHJpeCAqIHZlYzQocG9zaXRpb24sIDEuMCk7XG4gIH1cbmBcblxuY29uc3QgZnJhZyA9IC8qZ2xzbCovIGBcbiAgdW5pZm9ybSB2ZWMyIHVSZXM7XG4gIHVuaWZvcm0gZmxvYXQgdURwciwgdVNpemUsIHVEZW5zaXR5LCB1T3BhY2l0eTtcbiAgdW5pZm9ybSB2ZWMzIHVDb2xvcjtcbiAgdmFyeWluZyB2ZWMyIHZVdjtcblxuICBmbG9hdCBoYXNoKHZlYzIgcCkge1xuICAgIHZlYzMgcDMgPSBmcmFjdCh2ZWMzKHAueHl4KSAqIDAuMTAzMSk7XG4gICAgcDMgKz0gZG90KHAzLCBwMy55enggKyAzMy4zMyk7XG4gICAgcmV0dXJuIGZyYWN0KChwMy54ICsgcDMueSkgKiBwMy56KTtcbiAgfVxuXG4gIHZvaWQgbWFpbigpIHtcbiAgICBmbG9hdCBuID0gaGFzaChmbG9vcih2VXYgKiB1UmVzIC8gKHVTaXplICogdURwcikpKTtcbiAgICBnbF9GcmFnQ29sb3IgPSB2ZWM0KHVDb2xvciwgc3RlcCgxLjAgLSB1RGVuc2l0eSwgbikpICogdU9wYWNpdHk7XG4gIH1cbmBcblxuZXhwb3J0IGZ1bmN0aW9uIE5vaXNlKHsgY2xhc3NOYW1lLCBzdHlsZSB9OiBOb2lzZVByb3BzKSB7XG4gIGNvbnN0IGdwdVRpZXIgPSB1c2VHcHVUaWVyKClcblxuICBjb25zdCBjID0gdXNlU21vb3RoQ29udHJvbHMoXG4gICAgJ0VmZmVjdHMvTm9pc2UnLFxuICAgIHtcbiAgICAgIGJsZW5kOiB7IG9wdGlvbnM6IEJMRU5EX01PREVTLCB2YWx1ZTogJ2NvbG9yLWRvZGdlJyBhcyBjb25zdCB9LFxuICAgICAgY29sb3I6IHsgdmFsdWU6ICcjZWFlYWVhJyB9LFxuICAgICAgZGVuc2l0eTogeyBtYXg6IDEsIG1pbjogMCwgc3RlcDogMC4wMSwgdmFsdWU6IDAuMTEgfSxcbiAgICAgIGVuYWJsZWQ6IHsgdmFsdWU6IHRydWUgfSxcbiAgICAgIG9wYWNpdHk6IHsgbWF4OiAxLCBtaW46IDAsIHN0ZXA6IDAuMDEsIHZhbHVlOiAwLjU1IH0sXG4gICAgICBzaXplOiB7IG1heDogMTAsIG1pbjogMC4xLCBzdGVwOiAwLjEsIHZhbHVlOiAxIH1cbiAgICB9LFxuICAgIHsgY29sbGFwc2VkOiB0cnVlIH1cbiAgKVxuXG4gIGNvbnN0IGNhbnZhc1JlZiA9IHVzZVJlZjxIVE1MQ2FudmFzRWxlbWVudD4obnVsbClcblxuICBjb25zdCBlbmFibGVkID0gYy5lbmFibGVkICYmIGdwdVRpZXIgPiAwXG5cbiAgLy8gVGhlIG5vaXNlIHNoYWRlciBpcyBmdWxseSBkZXRlcm1pbmlzdGljOiBnaXZlbiB0aGUgc2FtZSB1bmlmb3JtcyBpdFxuICAvLyBwcm9kdWNlcyBhbiBpZGVudGljYWwgb3V0cHV0IGV2ZXJ5IGZyYW1lLiBUaGUgcHJldmlvdXMgdmVyc2lvbiByYW5cbiAgLy8gaXQgYXQgNjBmcHMgZm9yZXZlciwgd2hpY2ggb24gYSByZXRpbmEgZGlzcGxheSB3aXRoIG1peC1ibGVuZC1tb2RlXG4gIC8vIGlzIGVub3VnaCB0byBwZWcgdGhlIEdQVS9jb21wb3NpdG9yIGZvciB0aGUgZW50aXJlIGxpZmV0aW1lIG9mIHRoZVxuICAvLyBwYWdlICh0aGlzIGlzIHRoZSBkb21pbmFudCBjb250cmlidXRvciB0byB0aGUgXCJmYW5zIGdvIGNyYXp5IGFmdGVyXG4gIC8vIGEgZmV3IGhvdXJzIG9mIGlkbGVcIiBzeW1wdG9tKS5cbiAgLy9cbiAgLy8gSW5zdGVhZCB3ZSByZW5kZXIgZXhhY3RseSBvbmNlIG9uIG1vdW50LCBhbmQgcmUtcmVuZGVyIG9ubHkgd2hlblxuICAvLyB0aGUgdXNlci1jb250cm9sbGFibGUgdW5pZm9ybXMgY2hhbmdlIG9yIHRoZSB2aWV3cG9ydCByZXNpemVzLlxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICghY2FudmFzUmVmLmN1cnJlbnQgfHwgIWVuYWJsZWQpIHtcbiAgICAgIHJldHVyblxuICAgIH1cblxuICAgIGxldCByZW5kZXJlcjogVEhSRUUuV2ViR0xSZW5kZXJlclxuXG4gICAgdHJ5IHtcbiAgICAgIHJlbmRlcmVyID0gbmV3IFRIUkVFLldlYkdMUmVuZGVyZXIoe1xuICAgICAgICBhbHBoYTogdHJ1ZSxcbiAgICAgICAgY2FudmFzOiBjYW52YXNSZWYuY3VycmVudCxcbiAgICAgICAgcHJlbXVsdGlwbGllZEFscGhhOiBmYWxzZVxuICAgICAgfSlcbiAgICB9IGNhdGNoIHtcbiAgICAgICRncHVUaWVyLnNldCgwKVxuXG4gICAgICByZXR1cm5cbiAgICB9XG5cbiAgICByZW5kZXJlci5zZXRDbGVhckNvbG9yKDB4MDAwMDAwLCAwKVxuXG4gICAgY29uc3Qgc2NlbmUgPSBuZXcgVEhSRUUuU2NlbmUoKVxuICAgIGNvbnN0IGNhbWVyYSA9IG5ldyBUSFJFRS5PcnRob2dyYXBoaWNDYW1lcmEoLTEsIDEsIDEsIC0xLCAwLCAxKVxuICAgIGNvbnN0IGdlbyA9IG5ldyBUSFJFRS5QbGFuZUdlb21ldHJ5KDIsIDIpXG5cbiAgICBjb25zdCBtYXQgPSBuZXcgVEhSRUUuU2hhZGVyTWF0ZXJpYWwoe1xuICAgICAgZnJhZ21lbnRTaGFkZXI6IGZyYWcsXG4gICAgICB0cmFuc3BhcmVudDogdHJ1ZSxcbiAgICAgIHVuaWZvcm1zOiB7XG4gICAgICAgIHVDb2xvcjogeyB2YWx1ZTogaGV4VG9WZWMzKGMuY29sb3IpIH0sXG4gICAgICAgIHVEZW5zaXR5OiB7IHZhbHVlOiBjLmRlbnNpdHkgfSxcbiAgICAgICAgdURwcjogeyB2YWx1ZTogMSB9LFxuICAgICAgICB1T3BhY2l0eTogeyB2YWx1ZTogYy5vcGFjaXR5IH0sXG4gICAgICAgIHVSZXM6IHsgdmFsdWU6IG5ldyBUSFJFRS5WZWN0b3IyKCkgfSxcbiAgICAgICAgdVNpemU6IHsgdmFsdWU6IGMuc2l6ZSB9XG4gICAgICB9LFxuICAgICAgdmVydGV4U2hhZGVyOiB2ZXJ0XG4gICAgfSlcblxuICAgIHNjZW5lLmFkZChuZXcgVEhSRUUuTWVzaChnZW8sIG1hdCkpXG5cbiAgICAvLyBDYXAgcGl4ZWwgcmF0aW8gYXQgMS41IFx1MjAxNCBub2lzZSBpcyBpbnRlbnRpb25hbGx5IHBpeGVsYXRlZCwgc28gdGhlXG4gICAgLy8gZXh0cmEgcmV0aW5hIHNhbXBsZXMgYXJlIHdhc3RlZCBmaWxscmF0ZS5cbiAgICBjb25zdCBkcHIgPSBNYXRoLm1pbihkZXZpY2VQaXhlbFJhdGlvLCAxLjUpXG5cbiAgICBjb25zdCByZW5kZXIgPSAoKSA9PiB7XG4gICAgICBtYXQudW5pZm9ybXMudUNvbG9yLnZhbHVlID0gaGV4VG9WZWMzKGMuY29sb3IpXG4gICAgICBtYXQudW5pZm9ybXMudURlbnNpdHkudmFsdWUgPSBjLmRlbnNpdHlcbiAgICAgIG1hdC51bmlmb3Jtcy51T3BhY2l0eS52YWx1ZSA9IGMub3BhY2l0eVxuICAgICAgbWF0LnVuaWZvcm1zLnVTaXplLnZhbHVlID0gYy5zaXplXG4gICAgICBtYXQudW5pZm9ybXMudURwci52YWx1ZSA9IGRwclxuICAgICAgcmVuZGVyZXIucmVuZGVyKHNjZW5lLCBjYW1lcmEpXG4gICAgfVxuXG4gICAgY29uc3QgcmVzaXplID0gKCkgPT4ge1xuICAgICAgcmVuZGVyZXIuc2V0U2l6ZShpbm5lcldpZHRoLCBpbm5lckhlaWdodClcbiAgICAgIHJlbmRlcmVyLnNldFBpeGVsUmF0aW8oZHByKVxuICAgICAgbWF0LnVuaWZvcm1zLnVSZXMudmFsdWUuc2V0KGlubmVyV2lkdGggKiBkcHIsIGlubmVySGVpZ2h0ICogZHByKVxuICAgICAgcmVuZGVyKClcbiAgICB9XG5cbiAgICByZXNpemUoKVxuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCByZXNpemUpXG5cbiAgICAvLyBSZS1yZW5kZXIgd2hlbiB0aGUgdGFiIGJlY29tZXMgdmlzaWJsZSBhZ2FpbiwgaW4gY2FzZSB0aGUgR0xcbiAgICAvLyBjb250ZXh0IHdhcyBkaXNjYXJkZWQgYnkgdGhlIGJyb3dzZXIgd2hpbGUgdGhlIHBhZ2Ugd2FzXG4gICAgLy8gYmFja2dyb3VuZGVkIFx1MjAxNCBvdGhlcndpc2Ugd2UgY2FuIGNvbWUgYmFjayB0byBhIHRyYW5zcGFyZW50IGNhbnZhcy5cbiAgICBjb25zdCBvblZpc2liaWxpdHkgPSAoKSA9PiB7XG4gICAgICBpZiAoIWRvY3VtZW50LmhpZGRlbikgcmVuZGVyKClcbiAgICB9XG5cbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCd2aXNpYmlsaXR5Y2hhbmdlJywgb25WaXNpYmlsaXR5KVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIHdpbmRvdy5yZW1vdmVFdmVudExpc3RlbmVyKCdyZXNpemUnLCByZXNpemUpXG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCd2aXNpYmlsaXR5Y2hhbmdlJywgb25WaXNpYmlsaXR5KVxuXG4gICAgICBtYXQuZGlzcG9zZSgpXG4gICAgICBnZW8uZGlzcG9zZSgpXG4gICAgICByZW5kZXJlci5kaXNwb3NlKClcbiAgICB9XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIHJlYWN0LWhvb2tzL2V4aGF1c3RpdmUtZGVwc1xuICB9LCBbXG4gICAgZW5hYmxlZCxcbiAgICBncHVUaWVyLFxuICAgIGMuY29sb3IsXG4gICAgYy5kZW5zaXR5LFxuICAgIGMub3BhY2l0eSxcbiAgICBjLnNpemVcbiAgXSlcblxuICBpZiAoIWVuYWJsZWQpIHtcbiAgICByZXR1cm4gbnVsbFxuICB9XG5cbiAgcmV0dXJuIChcbiAgICA8Y2FudmFzXG4gICAgICBjbGFzc05hbWU9e2NuKCdoLWZ1bGwgdy1mdWxsJywgY2xhc3NOYW1lKX1cbiAgICAgIHJlZj17Y2FudmFzUmVmfVxuICAgICAgc3R5bGU9e3sgbWl4QmxlbmRNb2RlOiBjLmJsZW5kLCAuLi5zdHlsZSB9fVxuICAgIC8+XG4gIClcbn1cblxuaW50ZXJmYWNlIE5vaXNlUHJvcHMge1xuICBjbGFzc05hbWU/OiBzdHJpbmdcbiAgc3R5bGU/OiBSZWFjdC5DU1NQcm9wZXJ0aWVzXG59XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBa0tJO0FBaEtKLFNBQVMsV0FBVyxjQUFjO0FBQ2xDLFlBQVksV0FBVztBQUV2QixTQUFTLFVBQVUsa0JBQWtCO0FBQ3JDLFNBQVMseUJBQXlCO0FBQ2xDLFNBQVMsSUFBSSxpQkFBaUI7QUFFOUIsU0FBUyxtQkFBbUI7QUFFNUIsTUFBTTtBQUFBO0FBQUEsRUFBZ0I7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQVF0QixNQUFNO0FBQUE7QUFBQSxFQUFnQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFrQmYsZ0JBQVMsTUFBTSxFQUFFLFdBQVcsTUFBTSxHQUFlO0FBQ3RELFFBQU0sVUFBVSxXQUFXO0FBRTNCLFFBQU0sSUFBSTtBQUFBLElBQ1I7QUFBQSxJQUNBO0FBQUEsTUFDRSxPQUFPLEVBQUUsU0FBUyxhQUFhLE9B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

package/dist/ui/components/overlays/vignette.d.ts

@@ -0,0 +1,6 @@
+export declare function Vignette({ className, style }: VignetteProps): import("react").JSX.Element | null;
+interface VignetteProps {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export {};

package/dist/ui/components/overlays/vignette.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+import { cn } from "../../../utils/index.js";
+import { hexToRgb } from "../../../utils/color.js";
+import { BLEND_MODES } from "./blend-modes.js";
+export function Vignette({ className, style }) {
+  const c = useSmoothControls(
+    "Effects/Vignette",
+    {
+      blend: { options: BLEND_MODES, value: "lighten" },
+      bottomLeft: { max: 1, min: 0, step: 0.01, value: 0 },
+      bottomRight: { max: 1, min: 0, step: 0.01, value: 0 },
+      color: { value: "#ffbd38" },
+      enabled: { value: true },
+      opacity: { max: 1, min: 0, step: 0.01, value: 0.22 },
+      size: { max: 1, min: 0, step: 0.01, value: 1 },
+      topLeft: { max: 1, min: 0, step: 0.01, value: 0.35 },
+      topRight: { max: 1, min: 0, step: 0.01, value: 0 }
+    },
+    { collapsed: true }
+  );
+  if (!c.enabled) return null;
+  const rgb = hexToRgb(c.color);
+  const s = c.size * 60;
+  const grad = (x, y, i) => i > 0 && `radial-gradient(ellipse at ${x}% ${y}%, rgba(${rgb},0) ${s}%, rgba(${rgb},${i}) 100%)`;
+  const bg = [
+    grad(0, 0, c.topLeft),
+    grad(100, 0, c.topRight),
+    grad(0, 100, c.bottomLeft),
+    grad(100, 100, c.bottomRight)
+  ].filter(Boolean);
+  if (!bg.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-full w-full", className),
+      style: {
+        background: bg.join(", "),
+        mixBlendMode: c.blend,
+        opacity: c.opacity,
+        ...style
+      }
+    }
+  );
+}
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiPHN0ZGluPiJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiJ3VzZSBjbGllbnQnXG5cbmltcG9ydCB7IHVzZVNtb290aENvbnRyb2xzIH0gZnJvbSAnLi4vLi4vLi4vaG9va3MvdXNlLXNtb290aC1jb250cm9scydcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vLi4vLi4vdXRpbHMnXG5pbXBvcnQgeyBoZXhUb1JnYiB9IGZyb20gJy4uLy4uLy4uL3V0aWxzL2NvbG9yJ1xuXG5pbXBvcnQgeyBCTEVORF9NT0RFUyB9IGZyb20gJy4vYmxlbmQtbW9kZXMnXG5cbmV4cG9ydCBmdW5jdGlvbiBWaWduZXR0ZSh7IGNsYXNzTmFtZSwgc3R5bGUgfTogVmlnbmV0dGVQcm9wcykge1xuICBjb25zdCBjID0gdXNlU21vb3RoQ29udHJvbHMoXG4gICAgJ0VmZmVjdHMvVmlnbmV0dGUnLFxuICAgIHtcbiAgICAgIGJsZW5kOiB7IG9wdGlvbnM6IEJMRU5EX01PREVTLCB2YWx1ZTogJ2xpZ2h0ZW4nIGFzIGNvbnN0IH0sXG4gICAgICBib3R0b21MZWZ0OiB7IG1heDogMSwgbWluOiAwLCBzdGVwOiAwLjAxLCB2YWx1ZTogMCB9LFxuICAgICAgYm90dG9tUmlnaHQ6IHsgbWF4OiAxLCBtaW46IDAsIHN0ZXA6IDAuMDEsIHZhbHVlOiAwIH0sXG4gICAgICBjb2xvcjogeyB2YWx1ZTogJyNmZmJkMzgnIH0sXG4gICAgICBlbmFibGVkOiB7IHZhbHVlOiB0cnVlIH0sXG4gICAgICBvcGFjaXR5OiB7IG1heDogMSwgbWluOiAwLCBzdGVwOiAwLjAxLCB2YWx1ZTogMC4yMiB9LFxuICAgICAgc2l6ZTogeyBtYXg6IDEsIG1pbjogMCwgc3RlcDogMC4wMSwgdmFsdWU6IDEgfSxcbiAgICAgIHRvcExlZnQ6IHsgbWF4OiAxLCBtaW46IDAsIHN0ZXA6IDAuMDEsIHZhbHVlOiAwLjM1IH0sXG4gICAgICB0b3BSaWdodDogeyBtYXg6IDEsIG1pbjogMCwgc3RlcDogMC4wMSwgdmFsdWU6IDAgfVxuICAgIH0sXG4gICAgeyBjb2xsYXBzZWQ6IHRydWUgfVxuICApXG5cbiAgaWYgKCFjLmVuYWJsZWQpIHJldHVybiBudWxsXG5cbiAgY29uc3QgcmdiID0gaGV4VG9SZ2IoYy5jb2xvcilcbiAgY29uc3QgcyA9IGMuc2l6ZSAqIDYwXG5cbiAgY29uc3QgZ3JhZCA9ICh4OiBudW1iZXIsIHk6IG51bWJlciwgaTogbnVtYmVyKSA9PlxuICAgIGkgPiAwICYmXG4gICAgYHJhZGlhbC1ncmFkaWVudChlbGxpcHNlIGF0ICR7eH0lICR7eX0lLCByZ2JhKCR7cmdifSwwKSAke3N9JSwgcmdiYSgke3JnYn0sJHtpfSkgMTAwJSlgXG5cbiAgY29uc3QgYmcgPSBbXG4gICAgZ3JhZCgwLCAwLCBjLnRvcExlZnQpLFxuICAgIGdyYWQoMTAwLCAwLCBjLnRvcFJpZ2h0KSxcbiAgICBncmFkKDAsIDEwMCwgYy5ib3R0b21MZWZ0KSxcbiAgICBncmFkKDEwMCwgMTAwLCBjLmJvdHRvbVJpZ2h0KVxuICBdLmZpbHRlcihCb29sZWFuKVxuXG4gIGlmICghYmcubGVuZ3RoKSByZXR1cm4gbnVsbFxuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY2xhc3NOYW1lPXtjbignaC1mdWxsIHctZnVsbCcsIGNsYXNzTmFtZSl9XG4gICAgICBzdHlsZT17e1xuICAgICAgICBiYWNrZ3JvdW5kOiBiZy5qb2luKCcsICcpLFxuICAgICAgICBtaXhCbGVuZE1vZGU6IGMuYmxlbmQsXG4gICAgICAgIG9wYWNpdHk6IGMub3BhY2l0eSxcbiAgICAgICAgLi4uc3R5bGVcbiAgICAgIH19XG4gICAgLz5cbiAgKVxufVxuXG5pbnRlcmZhY2UgVmlnbmV0dGVQcm9wcyB7XG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICBzdHlsZT86IFJlYWN0LkNTU1Byb3BlcnRpZXNcbn1cbiJdLAogICJtYXBwaW5ncyI6ICI7QUE0Q0k7QUExQ0osU0FBUyx5QkFBeUI7QUFDbEMsU0FBUyxVQUFVO0FBQ25CLFNBQVMsZ0JBQWdCO0FBRXpCLFNBQVMsbUJBQW1CO0FBRXJCLGdCQUFTLFNBQVMsRUFBRSxXQUFXLE1BQU0sR0FBa0I7QUFDNUQsUUFBTSxJQUFJO0FBQUEsSUFDUjtBQUFBLElBQ0E7QUFBQSxNQUNFLE9BQU8sRUFBRSxTQUFTLGFBQWEsT0FBTyxVQUFtQjtBQUFBLE1BQ3pELFlBQVksRUFBRSxLQUFLLEdBQUcsS0FBSyxHQUFHLE1BQU0sTUFBTSxPQUFPLEVBQUU7QUFBQSxNQUNuRCxhQUFhLEVBQUUsS0FBSyxHQUFHLEtBQUssR0FBRyxNQUFNLE1BQU0sT0FBTyxFQUFFO0FBQUEsTUFDcEQsT0FBTyxFQUFFLE9BQU8sVUFBVTtBQUFBLE1BQzFCLFNBQVMsRUFBRSxPQUFPLEtBQUs7QUFBQSxNQUN2QixTQUFTLEVBQUUsS0FBSyxHQUFHLEtBQUssR0FBRyxNQUFNLE1BQU0sT0FBTyxLQUFLO0FBQUEsTUFDbkQsTUFBTSxFQUFFLEtBQUssR0FBRyxLQUFLLEdBQUcsTUFBTSxNQUFNLE9BQU8sRUFBRTtBQUFBLE1BQzdDLFNBQVMsRUFBRSxLQUFLLEdBQUcsS0FBSyxHQUFHLE1BQU0sTUFBTSxPQUFPLEtBQUs7QUFBQSxNQUNuRCxVQUFVLEVBQUUsS0FBSyxHQUFHLEtBQUssR0FBRyxNQUFNLE1BQU0sT0FBTyxFQUFFO0FBQUEsSUFDbkQ7QUFBQSxJQUNBLEVBQUUsV0FBVyxLQUFLO0FBQUEsRUFDcEI7QUFFQSxNQUFJLENBQUMsRUFBRSxRQUFTLFFBQU87QUFFdkIsUUFBTSxNQUFNLFNBQVMsRUFBRSxLQUFLO0FBQzVCLFFBQU0sSUFBSSxFQUFFLE9BQU87QUFFbkIsUUFBTSxPQUFPLENBQUMsR0FBVyxHQUFXLE1BQ2xDLElBQUksS0FDSiw4QkFBOEIsQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLE9BQU8sQ0FBQyxXQUFXLEdBQUcsSUFBSSxDQUFDO0FBRWhGLFFBQU0sS0FBSztBQUFBLElBQ1QsS0FBSyxHQUFHLEdBQUcsRUFBRSxPQUFPO0FBQUEsSUFDcEIsS0FBSyxLQUFLLEdBQUcsRUFBRSxRQUFRO0FBQUEsSUFDdkIsS0FBSyxHQUFHLEtBQUssRUFBRSxVQUFVO0FBQUEsSUFDekIsS0FBSyxLQUFLLEtBQUssRUFBRSxXQUFXO0FBQUEsRUFDOUIsRUFBRSxPQUFPLE9BQU87QUFFaEIsTUFBSSxDQUFDLEdBQUcsT0FBUSxRQUFPO0FBRXZCLFNBQ0U7QUFBQSxJQUFDO0FBQUE7QUFBQSxNQUNDLFdBQVcsR0FBRyxpQkFBaUIsU0FBUztBQUFBLE1BQ3hDLE9BQU87QUFBQSxRQUNMLFlBQVksR0FBRyxLQUFLLElBQUk7QUFBQSxRQUN4QixjQUFjLEVBQUU7QUFBQSxRQUNoQixTQUFTLEVBQUU7QUFBQSxRQUNYLEdBQUc7QUFBQSxNQUNMO0FBQUE7QUFBQSxFQUNGO0FBRUo7IiwKICAibmFtZXMiOiBbXQp9Cg==

package/dist/ui/components/poster.d.ts

@@ -0,0 +1,62 @@
+import type { AutoPlayPattern } from './image-distortion';
+/**
+ * Social-ready glitchy card built around the haptic-distortion image
+ * component. The poster runs the sword-guy distortion on an auto-animated
+ * slash pattern so it can be screen-recorded as a GIF without a human
+ * moving a cursor.
+ *
+ * Two variants, matching actual use cases:
+ * - `'vibe'` (default): full-bleed distorted image with just registration
+ *   marks and a tiny "Hermes Agent" mark in the corner — mirrors the
+ *   overlay on the Hermes agent website.
+ * - `'dispatch'`: broadcast-card layout with sidebar copy, numbered tags,
+ *   and chrome — for when the poster needs to carry information.
+ */
+export declare function Poster({ aspect, autoPlay, body, border, channel, children, className, cornerMarks, eyebrow, headline, layout, scale, seal, signature, src, tags, tint, tintStrength, variant, ...rest }: PosterProps): import("react").JSX.Element;
+export type PosterAspect = 'landscape' | 'portrait' | 'square' | 'story' | 'wide';
+export type PosterVariant = 'dispatch' | 'vibe';
+export interface PosterProps {
+    /** Output aspect ratio. Picks sensible defaults for common social formats. */
+    aspect?: PosterAspect;
+    /** Distortion choreography pattern. Default: `'slash'`. */
+    autoPlay?: AutoPlayPattern;
+    /** (`dispatch` only) Descriptive copy under the headline. */
+    body?: React.ReactNode;
+    /** Show the thin outer frame around the poster. Default `true`. */
+    border?: boolean;
+    /** Tiny broadcast-station label. Optional in `vibe`; shown in header in `dispatch`. */
+    channel?: React.ReactNode;
+    /** (`dispatch` only) Override the sidebar content (takes precedence over headline/body). */
+    children?: React.ReactNode;
+    className?: string;
+    /** Show the small `+` die-line registration marks in the image corners. Default `true`. */
+    cornerMarks?: boolean;
+    /** (`dispatch` only) Small tagline above the headline. */
+    eyebrow?: React.ReactNode;
+    /** (`dispatch` only) Big expanded-typography headline. Pass an array of strings to stack lines. */
+    headline?: string[] | string;
+    /** (`dispatch` only) Force stacked vs split layout. Default inferred from `aspect`. */
+    layout?: 'split' | 'stacked';
+    /** Render scale. 1 = full canvas (1080px+ base width). */
+    scale?: number;
+    /** (`dispatch` only) Small legal / signature line at the bottom-right. */
+    seal?: React.ReactNode;
+    /**
+     * Signature mark. In `vibe` this is the small "Hermes Agent" overlay in the
+     * bottom-right. In `dispatch` this is the URL / CTA in the footer.
+     */
+    signature?: React.ReactNode;
+    /** Override the poster image. Defaults to the Hermes "filler-bg0" asset. */
+    src?: string;
+    /** (`dispatch` only) Ranked list of features / pricing tiers rendered as a numbered sidebar list. */
+    tags?: string[];
+    /** Shader tint overlay. Great for tier-colored variants. */
+    tint?: string;
+    /** Active / inactive tint strength — defaults match `ImageDistortion`. */
+    tintStrength?: {
+        active: number;
+        inactive: number;
+    };
+    /** Layout variant. `'vibe'` (default) is full-bleed image; `'dispatch'` is the broadcast-card with sidebar copy. */
+    variant?: PosterVariant;
+}