react-marketing-ui 0.0.2 → 0.0.4

package/dist/grainient.mjs

@@ -1,4 +1,329 @@
-export { grainient_default as default } from './chunk-CTZEI2YS.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { Renderer, Triangle, Mesh, Program } from 'ogl';
+import { useRef, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var vertex = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+var fragment = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}
+float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}
+void mainImage(out vec4 o, vec2 C){
+  float t=iTime*uTimeSpeed;
+  vec2 uv=C/iResolution.xy;
+  float ratio=iResolution.x/iResolution.y;
+  vec2 tuv=uv-0.5+uCenterOffset;
+  tuv/=max(uZoom,0.001);
+  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+  tuv.y*=1.0/ratio;
+  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+  tuv.y*=ratio;
+  float frequency=uWarpFrequency;
+  float ws=max(uWarpStrength,0.001);
+  float amplitude=uWarpAmplitude/ws;
+  float warpTime=t*uWarpSpeed;
+  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+  vec3 colLav=uColor1;
+  vec3 colOrg=uColor2;
+  vec3 colDark=uColor3;
+  float b=uColorBalance;
+  float s=max(uBlendSoftness,0.0);
+  mat2 blendRot=Rot(radians(uBlendAngle));
+  float blendX=(tuv*blendRot).x;
+  float edge0=-0.3-b-s;
+  float edge1=0.2-b+s;
+  float v0=0.5-b+s;
+  float v1=-0.3-b-s;
+  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+  vec2 grainUv=uv*max(uGrainScale,0.001);
+  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+  col+=(grain-0.5)*uGrainAmount;
+  col=(col-0.5)*uContrast+0.5;
+  float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+  col=mix(vec3(luma),col,uSaturation);
+  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+  col=clamp(col,0.0,1.0);
+  o=vec4(col,1.0);
+}
+void main(){
+  vec4 o=vec4(0.0);
+  mainImage(o,gl_FragCoord.xy);
+  fragColor=o;
+}
+`;
+function createGrainientProgram(gl) {
+  return new Program(gl, {
+    vertex,
+    fragment,
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: { value: new Float32Array([1, 1]) },
+      uTimeSpeed: { value: 0.25 },
+      uColorBalance: { value: 0 },
+      uWarpStrength: { value: 1 },
+      uWarpFrequency: { value: 5 },
+      uWarpSpeed: { value: 2 },
+      uWarpAmplitude: { value: 50 },
+      uBlendAngle: { value: 0 },
+      uBlendSoftness: { value: 0.05 },
+      uRotationAmount: { value: 500 },
+      uNoiseScale: { value: 2 },
+      uGrainAmount: { value: 0.1 },
+      uGrainScale: { value: 2 },
+      uGrainAnimated: { value: 0 },
+      uContrast: { value: 1.5 },
+      uGamma: { value: 1 },
+      uSaturation: { value: 1 },
+      uCenterOffset: { value: new Float32Array([0, 0]) },
+      uZoom: { value: 0.9 },
+      uColor1: { value: new Float32Array([1, 1, 1]) },
+      uColor2: { value: new Float32Array([1, 1, 1]) },
+      uColor3: { value: new Float32Array([1, 1, 1]) }
+    }
+  });
+}
+var ctxMap = /* @__PURE__ */ new WeakMap();
+var HEX_COLOR_RE = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+var hexToRgb = (hex) => {
+  const result = HEX_COLOR_RE.exec(hex);
+  if (!result) return [1, 1, 1];
+  const [, r = "ff", g = "ff", b = "ff"] = result;
+  return [Number.parseInt(r, 16) / 255, Number.parseInt(g, 16) / 255, Number.parseInt(b, 16) / 255];
+};
+var prefersReducedMotion = () => typeof globalThis !== "undefined" && globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+var isLowPowerClient = () => {
+  if (typeof globalThis === "undefined") return false;
+  const narrow = globalThis.matchMedia?.("(max-width: 1023px)").matches === true;
+  const fewCores = typeof navigator !== "undefined" && typeof navigator.hardwareConcurrency === "number" && navigator.hardwareConcurrency <= 4;
+  return narrow || fewCores;
+};
+var GRAIN_LAYER = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E")`;
+var fallbackGradient = (c1, c2, c3) => `${GRAIN_LAYER}, linear-gradient(135deg, ${c1} 0%, ${c2} 55%, ${c3} 100%)`;
+var applyStaticBg = (el, src) => {
+  el.style.backgroundImage = `url(${src})`;
+  el.style.backgroundSize = "cover";
+  el.style.backgroundPosition = "center";
+};
+function initGrainient(container) {
+  const renderer = new Renderer({
+    webgl: 2,
+    alpha: true,
+    antialias: false,
+    dpr: Math.min(globalThis.devicePixelRatio || 1, 2)
+  });
+  const gl = renderer.gl;
+  const canvas = gl.canvas;
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.display = "block";
+  container.appendChild(canvas);
+  const geometry = new Triangle(gl);
+  const program = createGrainientProgram(gl);
+  const mesh = new Mesh(gl, { geometry, program });
+  ctxMap.set(container, { renderer, program, mesh });
+  const setSize = () => {
+    const rect = container.getBoundingClientRect();
+    renderer.setSize(Math.max(1, Math.floor(rect.width)), Math.max(1, Math.floor(rect.height)));
+    const res = program.uniforms.iResolution.value;
+    res[0] = gl.drawingBufferWidth;
+    res[1] = gl.drawingBufferHeight;
+    renderer.render({ scene: mesh });
+  };
+  const ro = new ResizeObserver(setSize);
+  ro.observe(container);
+  setSize();
+  let raf = 0;
+  let isVisible = true;
+  let isPageVisible = !document.hidden;
+  const t0 = performance.now();
+  const loop = (t) => {
+    program.uniforms.iTime.value = (t - t0) * 1e-3;
+    renderer.render({ scene: mesh });
+    raf = requestAnimationFrame(loop);
+  };
+  const tryStart = () => {
+    if (isVisible && isPageVisible && raf === 0) raf = requestAnimationFrame(loop);
+  };
+  const tryStop = () => {
+    if (raf !== 0) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+  };
+  const reduce = prefersReducedMotion();
+  const io = new IntersectionObserver(
+    ([entry]) => {
+      if (!entry) return;
+      isVisible = entry.isIntersecting;
+      if (isVisible) tryStart();
+      else tryStop();
+    },
+    { threshold: 0 }
+  );
+  if (!reduce) io.observe(container);
+  const onVisibility = () => {
+    isPageVisible = !document.hidden;
+    if (isPageVisible) tryStart();
+    else tryStop();
+  };
+  if (!reduce) document.addEventListener("visibilitychange", onVisibility);
+  if (!reduce) tryStart();
+  return () => {
+    tryStop();
+    ro.disconnect();
+    io.disconnect();
+    document.removeEventListener("visibilitychange", onVisibility);
+    ctxMap.delete(container);
+    try {
+      container.removeChild(canvas);
+    } catch {
+    }
+  };
+}
+var Grainient = (props) => {
+  const {
+    timeSpeed = 0.25,
+    colorBalance = 0,
+    warpStrength = 1,
+    warpFrequency = 5,
+    warpSpeed = 2,
+    warpAmplitude = 50,
+    blendAngle = 0,
+    blendSoftness = 0.05,
+    rotationAmount = 500,
+    noiseScale = 2,
+    grainAmount = 0.1,
+    grainScale = 2,
+    grainAnimated = false,
+    contrast = 1.5,
+    gamma = 1,
+    saturation = 1,
+    centerX = 0,
+    centerY = 0,
+    zoom = 0.9,
+    color1 = "#FF9FFC",
+    color2 = "#5227FF",
+    color3 = "#B497CF",
+    staticSrc = "",
+    className = ""
+  } = props;
+  const containerRef = useRef(null);
+  const fallbackRef = useRef(false);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (isLowPowerClient() || prefersReducedMotion()) {
+      fallbackRef.current = true;
+      container.dataset.fallback = "true";
+      if (staticSrc) applyStaticBg(container, staticSrc);
+      else container.style.background = fallbackGradient(color1, color2, color3);
+      return;
+    }
+    return initGrainient(container);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (fallbackRef.current) {
+      if (staticSrc) applyStaticBg(container, staticSrc);
+      else container.style.background = fallbackGradient(color1, color2, color3);
+      return;
+    }
+    const ctx = ctxMap.get(container);
+    if (!ctx) return;
+    const { program, renderer, mesh } = ctx;
+    const u = program.uniforms;
+    u.uTimeSpeed.value = timeSpeed;
+    u.uColorBalance.value = colorBalance;
+    u.uWarpStrength.value = warpStrength;
+    u.uWarpFrequency.value = warpFrequency;
+    u.uWarpSpeed.value = warpSpeed;
+    u.uWarpAmplitude.value = warpAmplitude;
+    u.uBlendAngle.value = blendAngle;
+    u.uBlendSoftness.value = blendSoftness;
+    u.uRotationAmount.value = rotationAmount;
+    u.uNoiseScale.value = noiseScale;
+    u.uGrainAmount.value = grainAmount;
+    u.uGrainScale.value = grainScale;
+    u.uGrainAnimated.value = grainAnimated ? 1 : 0;
+    u.uContrast.value = contrast;
+    u.uGamma.value = gamma;
+    u.uSaturation.value = saturation;
+    u.uCenterOffset.value = new Float32Array([centerX, centerY]);
+    u.uZoom.value = zoom;
+    u.uColor1.value = new Float32Array(hexToRgb(color1));
+    u.uColor2.value = new Float32Array(hexToRgb(color2));
+    u.uColor3.value = new Float32Array(hexToRgb(color3));
+    if (prefersReducedMotion()) renderer.render({ scene: mesh });
+  }, [
+    timeSpeed,
+    colorBalance,
+    warpStrength,
+    warpFrequency,
+    warpSpeed,
+    warpAmplitude,
+    blendAngle,
+    blendSoftness,
+    rotationAmount,
+    noiseScale,
+    grainAmount,
+    grainScale,
+    grainAnimated,
+    contrast,
+    gamma,
+    saturation,
+    centerX,
+    centerY,
+    zoom,
+    color1,
+    color2,
+    color3,
+    staticSrc
+  ]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("grainient-container", className) });
+};
+var grainient_default = Grainient;
+
+export { grainient_default as default };
 //# sourceMappingURL=grainient.mjs.map
 //# sourceMappingURL=grainient.mjs.map

package/dist/grainient.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"grainient.mjs"}
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/grainient.shader.ts","../src/components/grainient.tsx"],"names":[],"mappings":"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","file":"grainient.mjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","import { type Mesh, Program, type Renderer } from 'ogl';\n\n// Keep renderer/program alive across re-renders so the uniform-sync effect can\n// update uniforms without ever rebuilding the WebGL context.\nconst vertex = `#version 300 es\nin vec2 position;\nvoid main() {\n  gl_Position = vec4(position, 0.0, 1.0);\n}\n`;\n\nconst fragment = `#version 300 es\nprecision highp float;\nuniform vec2 iResolution;\nuniform float iTime;\nuniform float uTimeSpeed;\nuniform float uColorBalance;\nuniform float uWarpStrength;\nuniform float uWarpFrequency;\nuniform float uWarpSpeed;\nuniform float uWarpAmplitude;\nuniform float uBlendAngle;\nuniform float uBlendSoftness;\nuniform float uRotationAmount;\nuniform float uNoiseScale;\nuniform float uGrainAmount;\nuniform float uGrainScale;\nuniform float uGrainAnimated;\nuniform float uContrast;\nuniform float uGamma;\nuniform float uSaturation;\nuniform vec2 uCenterOffset;\nuniform float uZoom;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nout vec4 fragColor;\n#define S(a,b,t) smoothstep(a,b,t)\nmat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}\nvec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}\nfloat noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}\nvoid mainImage(out vec4 o, vec2 C){\n  float t=iTime*uTimeSpeed;\n  vec2 uv=C/iResolution.xy;\n  float ratio=iResolution.x/iResolution.y;\n  vec2 tuv=uv-0.5+uCenterOffset;\n  tuv/=max(uZoom,0.001);\n  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);\n  tuv.y*=1.0/ratio;\n  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));\n  tuv.y*=ratio;\n  float frequency=uWarpFrequency;\n  float ws=max(uWarpStrength,0.001);\n  float amplitude=uWarpAmplitude/ws;\n  float warpTime=t*uWarpSpeed;\n  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;\n  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);\n  vec3 colLav=uColor1;\n  vec3 colOrg=uColor2;\n  vec3 colDark=uColor3;\n  float b=uColorBalance;\n  float s=max(uBlendSoftness,0.0);\n  mat2 blendRot=Rot(radians(uBlendAngle));\n  float blendX=(tuv*blendRot).x;\n  float edge0=-0.3-b-s;\n  float edge1=0.2-b+s;\n  float v0=0.5-b+s;\n  float v1=-0.3-b-s;\n  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));\n  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));\n  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));\n  vec2 grainUv=uv*max(uGrainScale,0.001);\n  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}\n  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);\n  col+=(grain-0.5)*uGrainAmount;\n  col=(col-0.5)*uContrast+0.5;\n  float luma=dot(col,vec3(0.2126,0.7152,0.0722));\n  col=mix(vec3(luma),col,uSaturation);\n  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));\n  col=clamp(col,0.0,1.0);\n  o=vec4(col,1.0);\n}\nvoid main(){\n  vec4 o=vec4(0.0);\n  mainImage(o,gl_FragCoord.xy);\n  fragColor=o;\n}\n`;\n\nexport type GrainientContext = { renderer: Renderer; program: Program; mesh: Mesh };\n\nexport function createGrainientProgram(gl: Renderer['gl']): Program {\n  return new Program(gl, {\n    vertex,\n    fragment,\n    uniforms: {\n      iTime: { value: 0 },\n      iResolution: { value: new Float32Array([1, 1]) },\n      uTimeSpeed: { value: 0.25 },\n      uColorBalance: { value: 0.0 },\n      uWarpStrength: { value: 1.0 },\n      uWarpFrequency: { value: 5.0 },\n      uWarpSpeed: { value: 2.0 },\n      uWarpAmplitude: { value: 50.0 },\n      uBlendAngle: { value: 0.0 },\n      uBlendSoftness: { value: 0.05 },\n      uRotationAmount: { value: 500.0 },\n      uNoiseScale: { value: 2.0 },\n      uGrainAmount: { value: 0.1 },\n      uGrainScale: { value: 2.0 },\n      uGrainAnimated: { value: 0.0 },\n      uContrast: { value: 1.5 },\n      uGamma: { value: 1.0 },\n      uSaturation: { value: 1.0 },\n      uCenterOffset: { value: new Float32Array([0, 0]) },\n      uZoom: { value: 0.9 },\n      uColor1: { value: new Float32Array([1, 1, 1]) },\n      uColor2: { value: new Float32Array([1, 1, 1]) },\n      uColor3: { value: new Float32Array([1, 1, 1]) },\n    },\n  });\n}\n\nexport const ctxMap = new WeakMap<HTMLElement, GrainientContext>();\n","'use client';\n\nimport { Mesh, Renderer, Triangle } from 'ogl';\nimport { useEffect, useRef } from 'react';\nimport { cn } from '../lib/utils.js';\nimport { createGrainientProgram, ctxMap } from './grainient.shader.js';\nimport type { GrainientProps } from './grainient.types.js';\nimport './grainient.css';\n\nconst HEX_COLOR_RE = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const result = HEX_COLOR_RE.exec(hex);\n  if (!result) return [1, 1, 1];\n  // The regex guarantees all three capture groups when it matches; the defaults\n  // only silence noUncheckedIndexedAccess.\n  const [, r = 'ff', g = 'ff', b = 'ff'] = result;\n  return [Number.parseInt(r, 16) / 255, Number.parseInt(g, 16) / 255, Number.parseInt(b, 16) / 255];\n};\n\n// framer-motion's MotionConfig only governs declarative motion.* components, so\n// this raw-WebGL canvas carries its own prefers-reduced-motion check.\nconst prefersReducedMotion = () =>\n  typeof globalThis !== 'undefined' && globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches === true;\n\n// The home page mounts four Grainient canvases at once; browsers cap live WebGL\n// contexts (~8-16) and each costs GPU/CPU. On low-power clients — narrow viewports\n// or few CPU cores — skip WebGL and let the static background stand in.\nconst isLowPowerClient = () => {\n  if (typeof globalThis === 'undefined') return false;\n  const narrow = globalThis.matchMedia?.('(max-width: 1023px)').matches === true;\n  const fewCores =\n    typeof navigator !== 'undefined' && typeof navigator.hardwareConcurrency === 'number' && navigator.hardwareConcurrency <= 4;\n  return narrow || fewCores;\n};\n\n// A tiling SVG feTurbulence tile that stands in for the shader's film grain,\n// inlined so it needs no network request.\nconst GRAIN_LAYER = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E\")`;\n\n// CSS gradient fallback when no pre-rendered image is available.\nconst fallbackGradient = (c1: string, c2: string, c3: string) =>\n  `${GRAIN_LAYER}, linear-gradient(135deg, ${c1} 0%, ${c2} 55%, ${c3} 100%)`;\n\n// Apply a pre-rendered static image as a cover background.\nconst applyStaticBg = (el: HTMLDivElement, src: string) => {\n  el.style.backgroundImage = `url(${src})`;\n  el.style.backgroundSize = 'cover';\n  el.style.backgroundPosition = 'center';\n};\n\n// Build the WebGL context, wire up resize/visibility observers, and run the\n// render loop. Returns a cleanup that tears everything back down.\nfunction initGrainient(container: HTMLDivElement): () => void {\n  const renderer = new Renderer({\n    webgl: 2,\n    alpha: true,\n    antialias: false,\n    dpr: Math.min(globalThis.devicePixelRatio || 1, 2),\n  });\n\n  const gl = renderer.gl;\n  const canvas = gl.canvas;\n  canvas.style.width = '100%';\n  canvas.style.height = '100%';\n  canvas.style.display = 'block';\n  container.appendChild(canvas);\n\n  const geometry = new Triangle(gl);\n  const program = createGrainientProgram(gl);\n  const mesh = new Mesh(gl, { geometry, program });\n  ctxMap.set(container, { renderer, program, mesh });\n\n  const setSize = () => {\n    const rect = container.getBoundingClientRect();\n    renderer.setSize(Math.max(1, Math.floor(rect.width)), Math.max(1, Math.floor(rect.height)));\n    const res: Float32Array = program.uniforms.iResolution.value;\n    res[0] = gl.drawingBufferWidth;\n    res[1] = gl.drawingBufferHeight;\n    renderer.render({ scene: mesh });\n  };\n\n  const ro = new ResizeObserver(setSize);\n  ro.observe(container);\n  setSize();\n\n  let raf = 0;\n  let isVisible = true;\n  let isPageVisible = !document.hidden;\n  const t0 = performance.now();\n\n  const loop = (t: number) => {\n    program.uniforms.iTime.value = (t - t0) * 0.001;\n    renderer.render({ scene: mesh });\n    raf = requestAnimationFrame(loop);\n  };\n\n  const tryStart = () => {\n    if (isVisible && isPageVisible && raf === 0) raf = requestAnimationFrame(loop);\n  };\n  const tryStop = () => {\n    if (raf !== 0) {\n      cancelAnimationFrame(raf);\n      raf = 0;\n    }\n  };\n\n  // Reduced motion: render a single static frame and never start the RAF loop.\n  const reduce = prefersReducedMotion();\n\n  const io = new IntersectionObserver(\n    ([entry]) => {\n      if (!entry) return;\n      isVisible = entry.isIntersecting;\n      if (isVisible) tryStart();\n      else tryStop();\n    },\n    { threshold: 0 },\n  );\n  if (!reduce) io.observe(container);\n\n  const onVisibility = () => {\n    isPageVisible = !document.hidden;\n    if (isPageVisible) tryStart();\n    else tryStop();\n  };\n  if (!reduce) document.addEventListener('visibilitychange', onVisibility);\n  if (!reduce) tryStart();\n\n  return () => {\n    tryStop();\n    ro.disconnect();\n    io.disconnect();\n    document.removeEventListener('visibilitychange', onVisibility);\n    ctxMap.delete(container);\n    try {\n      container.removeChild(canvas);\n    } catch {\n      /* ignore */\n    }\n  };\n}\n\nconst Grainient = (props: GrainientProps) => {\n  const {\n    timeSpeed = 0.25,\n    colorBalance = 0.0,\n    warpStrength = 1.0,\n    warpFrequency = 5.0,\n    warpSpeed = 2.0,\n    warpAmplitude = 50.0,\n    blendAngle = 0.0,\n    blendSoftness = 0.05,\n    rotationAmount = 500.0,\n    noiseScale = 2.0,\n    grainAmount = 0.1,\n    grainScale = 2.0,\n    grainAnimated = false,\n    contrast = 1.5,\n    gamma = 1.0,\n    saturation = 1.0,\n    centerX = 0.0,\n    centerY = 0.0,\n    zoom = 0.9,\n    color1 = '#FF9FFC',\n    color2 = '#5227FF',\n    color3 = '#B497CF',\n    staticSrc = '',\n    className = '',\n  } = props;\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  // Set once on mount: when true, WebGL is skipped and a static background stands in.\n  const fallbackRef = useRef(false);\n\n  // Effect 1: build WebGL context once, pause when offscreen / tab hidden.\n  // When a pre-rendered image is available, low-power clients and\n  // prefers-reduced-motion users get it as a zero-GPU-cost background.\n  // The renderer is created once on mount; color changes are handled in Effect 2.\n  // biome-ignore lint/plugin: creates the WebGL renderer once on mount and tears it down on unmount — imperative GPU setup with no derived-state form.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: mount-only WebGL setup; color/staticSrc changes are handled in Effect 2.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n    if (isLowPowerClient() || prefersReducedMotion()) {\n      fallbackRef.current = true;\n      container.dataset.fallback = 'true';\n      if (staticSrc) applyStaticBg(container, staticSrc);\n      else container.style.background = fallbackGradient(color1, color2, color3);\n      return;\n    }\n    return initGrainient(container);\n  }, []); // renderer created once\n\n  // Effect 2: sync props to uniforms — zero GPU cost, no teardown.\n  // biome-ignore lint/plugin: imperatively writes props into mutable WebGL uniform objects (an external system); there is no render-time equivalent.\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Fallback clients have no WebGL context; re-apply the background so a\n    // later color/src change still reaches the static background.\n    if (fallbackRef.current) {\n      if (staticSrc) applyStaticBg(container, staticSrc);\n      else container.style.background = fallbackGradient(color1, color2, color3);\n      return;\n    }\n\n    const ctx = ctxMap.get(container);\n    if (!ctx) return;\n\n    const { program, renderer, mesh } = ctx;\n    const u = program.uniforms;\n\n    u.uTimeSpeed.value = timeSpeed;\n    u.uColorBalance.value = colorBalance;\n    u.uWarpStrength.value = warpStrength;\n    u.uWarpFrequency.value = warpFrequency;\n    u.uWarpSpeed.value = warpSpeed;\n    u.uWarpAmplitude.value = warpAmplitude;\n    u.uBlendAngle.value = blendAngle;\n    u.uBlendSoftness.value = blendSoftness;\n    u.uRotationAmount.value = rotationAmount;\n    u.uNoiseScale.value = noiseScale;\n    u.uGrainAmount.value = grainAmount;\n    u.uGrainScale.value = grainScale;\n    u.uGrainAnimated.value = grainAnimated ? 1.0 : 0.0;\n    u.uContrast.value = contrast;\n    u.uGamma.value = gamma;\n    u.uSaturation.value = saturation;\n    u.uCenterOffset.value = new Float32Array([centerX, centerY]);\n    u.uZoom.value = zoom;\n    u.uColor1.value = new Float32Array(hexToRgb(color1));\n    u.uColor2.value = new Float32Array(hexToRgb(color2));\n    u.uColor3.value = new Float32Array(hexToRgb(color3));\n\n    // Under reduced motion the RAF loop never starts; draw one frame here so\n    // the real colors appear (the first frame from setSize() is all-white).\n    if (prefersReducedMotion()) renderer.render({ scene: mesh });\n  }, [\n    timeSpeed,\n    colorBalance,\n    warpStrength,\n    warpFrequency,\n    warpSpeed,\n    warpAmplitude,\n    blendAngle,\n    blendSoftness,\n    rotationAmount,\n    noiseScale,\n    grainAmount,\n    grainScale,\n    grainAnimated,\n    contrast,\n    gamma,\n    saturation,\n    centerX,\n    centerY,\n    zoom,\n    color1,\n    color2,\n    color3,\n    staticSrc,\n  ]);\n\n  return <div ref={containerRef} className={cn('grainient-container', className)} />;\n};\n\nexport default Grainient;\n"]}

package/dist/highlighter.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var framerMotion = require('framer-motion');

package/dist/highlighter.mjs

@@ -1,5 +1,124 @@
-export { Highlighter } from './chunk-5QQAPGR2.mjs';
-import './chunk-EYHT2EWJ.mjs';
-import './chunk-QAWSH567.mjs';
+"use client";
+import { useInView } from 'framer-motion';
+import { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import { annotate } from 'rough-notation';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function useMediaQuery(query, defaultState = false) {
+  const [matches, setMatches] = useState(defaultState);
+  useEffect(() => {
+    const mql = globalThis.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = (e) => setMatches(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function resolveColor(element, color) {
+  if (!color.startsWith("var(")) return color;
+  const token = color.slice(4, -1).trim();
+  return globalThis.getComputedStyle(element).getPropertyValue(token).trim() || color;
+}
+var BREAKPOINTS = [
+  ["xs", 30],
+  ["sm", 40],
+  ["md", 50],
+  ["lg", 64],
+  ["xl", 80],
+  ["2xl", 96]
+];
+function getBreakpoint() {
+  let current = "base";
+  for (const [name, rem] of BREAKPOINTS) {
+    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;
+  }
+  return current;
+}
+function onBreakpointChange(listener) {
+  const queries = BREAKPOINTS.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));
+  for (const query of queries) query.addEventListener("change", listener);
+  return () => {
+    for (const query of queries) query.removeEventListener("change", listener);
+  };
+}
+function Highlighter({
+  children,
+  className,
+  action = "highlight",
+  color = "var(--marker-highlight)",
+  strokeWidth = 1.5,
+  animationDuration = 600,
+  delay = 0,
+  iterations = 2,
+  padding = 2,
+  multiline = true,
+  isView = false
+}) {
+  const elementRef = useRef(null);
+  const isInView = useInView(elementRef, { once: true, margin: "-10%" });
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [themeVersion, setThemeVersion] = useState(0);
+  const shouldShow = !isView || isInView;
+  useLayoutEffect(() => {
+    const observer = new MutationObserver(() => setThemeVersion((v) => v + 1));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!(shouldShow && element)) return;
+    let annotation;
+    let untrack;
+    const draw = () => {
+      annotation = annotate(element, {
+        type: action,
+        color: resolveColor(element, color),
+        strokeWidth,
+        animationDuration,
+        animate: !reducedMotion,
+        iterations,
+        padding,
+        multiline
+      });
+      annotation.show();
+      let drawnAt = getBreakpoint();
+      untrack = onBreakpointChange(() => {
+        const current = getBreakpoint();
+        if (current === drawnAt) return;
+        drawnAt = current;
+        annotation?.show();
+      });
+    };
+    const startDelay = reducedMotion ? 0 : delay;
+    const timer = startDelay > 0 ? globalThis.setTimeout(draw, startDelay) : void 0;
+    if (timer === void 0) draw();
+    return () => {
+      globalThis.clearTimeout(timer);
+      untrack?.();
+      annotation?.remove();
+    };
+  }, [
+    shouldShow,
+    action,
+    color,
+    strokeWidth,
+    animationDuration,
+    delay,
+    iterations,
+    padding,
+    multiline,
+    reducedMotion,
+    themeVersion
+  ]);
+  return /* @__PURE__ */ jsx("span", { className: cn("relative inline-block bg-transparent", className), children: /* @__PURE__ */ jsx("span", { ref: elementRef, children }) });
+}
+
+export { Highlighter };
 //# sourceMappingURL=highlighter.mjs.map
 //# sourceMappingURL=highlighter.mjs.map

package/dist/highlighter.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"highlighter.mjs"}
+{"version":3,"sources":["../src/lib/use-media-query.ts","../src/lib/utils.ts","../src/components/highlighter.tsx"],"names":["useState"],"mappings":"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","file":"highlighter.mjs","sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Tracks a CSS media query, returning `true` when it matches.\n *\n * The default return before hydration is `false`; pass `defaultState`\n * to set a different initial value (e.g. `true` for dark-mode queries\n * whose SSR default is dark).\n */\nexport function useMediaQuery(query: string, defaultState = false): boolean {\n  const [matches, setMatches] = useState(defaultState);\n\n  // biome-ignore lint/plugin: subscribes to a matchMedia listener — an imperative side effect with no derived-state equivalent.\n  useEffect(() => {\n    const mql = globalThis.matchMedia(query);\n    setMatches(mql.matches);\n\n    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, [query]);\n\n  return matches;\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","'use client';\n\nimport { useInView } from 'framer-motion';\nimport { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { annotate } from 'rough-notation';\nimport type { RoughAnnotation } from 'rough-notation/lib/model';\nimport { useMediaQuery } from '../lib/use-media-query.js';\nimport { cn } from '../lib/utils.js';\n\ntype AnnotationAction = 'highlight' | 'underline' | 'box' | 'circle' | 'strike-through' | 'crossed-off' | 'bracket';\n\n/**\n * rough-notation writes the colour straight into the SVG's `stroke` presentation\n * attribute, where `var()` is never substituted — so a design token has to be\n * resolved against the live element before it is handed over.\n */\nfunction resolveColor(element: Element, color: string): string {\n  if (!color.startsWith('var(')) return color;\n  const token = color.slice(4, -1).trim();\n  return globalThis.getComputedStyle(element).getPropertyValue(token).trim() || color;\n}\n\n/**\n * The site's breakpoints, ascending, in the `rem` units Tailwind emits them in —\n * so they keep tracking the root font size the way the CSS does. Mirrored from\n * the library's `@theme` block (`xs` and `md` are custom, the rest are defaults).\n */\nconst BREAKPOINTS = [\n  ['xs', 30],\n  ['sm', 40],\n  ['md', 50],\n  ['lg', 64],\n  ['xl', 80],\n  ['2xl', 96],\n] as const;\n\ntype Breakpoint = 'base' | (typeof BREAKPOINTS)[number][0];\n\n/** `'base'` is the implicit below-`xs` band — the widths no `min-width` query claims. */\nfunction getBreakpoint(): Breakpoint {\n  let current: Breakpoint = 'base';\n  for (const [name, rem] of BREAKPOINTS) {\n    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;\n  }\n  return current;\n}\n\n/**\n * Call `listener` whenever the viewport crosses a breakpoint. Returns the\n * unsubscribe.\n *\n * The imperative counterpart to a `useBreakpoint` hook, for work that has to land\n * in the *same frame* as the layout change. Media-query change events fire during\n * the rendering steps, before `requestAnimationFrame` and before paint, so a\n * listener that writes to the DOM here is painted with the new layout rather than\n * one frame behind it.\n */\nfunction onBreakpointChange(listener: () => void): () => void {\n  const queries = BREAKPOINTS.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));\n  for (const query of queries) query.addEventListener('change', listener);\n  return () => {\n    for (const query of queries) query.removeEventListener('change', listener);\n  };\n}\n\ntype HighlighterProps = {\n  /** The words to annotate. Rendered inline, so they inherit the surrounding type. */\n  children: ReactNode;\n  className?: string;\n  /**\n   * Which marker stroke to draw.\n   * @default 'highlight'\n   */\n  action?: AnnotationAction;\n  /**\n   * Stroke colour. Accepts a `var(--token)` string, which is resolved against\n   * the live element and re-resolved whenever the theme flips.\n   * @default 'var(--marker-highlight)'\n   */\n  color?: string;\n  /** @default 1.5 */\n  strokeWidth?: number;\n  /** Milliseconds the stroke takes to draw itself on. @default 600 */\n  animationDuration?: number;\n  /**\n   * Milliseconds to hold the stroke back before it starts drawing. Ignored under\n   * reduced motion, where there is no draw-on to stagger.\n   * @default 0\n   */\n  delay?: number;\n  /** Passes over the same stroke, which is what makes it read as hand-drawn. @default 2 */\n  iterations?: number;\n  /** Pixels of slack between the text box and the stroke. @default 2 */\n  padding?: number;\n  /** Annotate every line the text wraps onto, rather than one box around all of them. @default true */\n  multiline?: boolean;\n  /** Hold the stroke back until the text scrolls into view. @default false */\n  isView?: boolean;\n};\n\n/**\n * Draws a hand-drawn marker stroke over a word or phrase.\n *\n * The stroke is an SVG that rough-notation injects on the client, so the\n * exported HTML ships the bare text and nothing about the layout depends on JS\n * having run. Readers who ask for reduced motion get the stroke without the\n * draw-on animation.\n */\nexport function Highlighter({\n  children,\n  className,\n  action = 'highlight',\n  color = 'var(--marker-highlight)',\n  strokeWidth = 1.5,\n  animationDuration = 600,\n  delay = 0,\n  iterations = 2,\n  padding = 2,\n  multiline = true,\n  isView = false,\n}: HighlighterProps) {\n  const elementRef = useRef<HTMLSpanElement>(null);\n  const isInView = useInView(elementRef, { once: true, margin: '-10%' });\n  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  // Only a re-run trigger: the colour itself comes from the computed style, which\n  // is already correct on first paint because the theme class is set before\n  // hydration. The observer below bumps this whenever the class attribute flips.\n  const [themeVersion, setThemeVersion] = useState(0);\n\n  const shouldShow = !isView || isInView;\n\n  // Theme flips land as a class swap on <html> (the `.dark` class toggled by the\n  // theme provider), and rough-notation bakes the *resolved* token into the\n  // SVG's stroke attribute — which does not track var(). Re-running the draw\n  // effect with a freshly resolved colour is what repaints the stroke.\n  useLayoutEffect(() => {\n    const observer = new MutationObserver(() => setThemeVersion((v) => v + 1));\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });\n    return () => observer.disconnect();\n  }, []);\n\n  // Imperatively injects and tears down a rough-notation SVG measured off live\n  // DOM layout — a post-render side effect with no render-time equivalent.\n  // biome-ignore lint/correctness/useExhaustiveDependencies: `themeVersion` is a redraw trigger, not a read value — the token resolves to a different colour per theme, so a flip has to repaint the stroke.\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (!(shouldShow && element)) return;\n\n    let annotation: RoughAnnotation | undefined;\n    let untrack: (() => void) | undefined;\n\n    const draw = () => {\n      annotation = annotate(element, {\n        type: action,\n        color: resolveColor(element, color),\n        strokeWidth,\n        animationDuration,\n        animate: !reducedMotion,\n        iterations,\n        padding,\n        multiline,\n      });\n      annotation.show();\n\n      // The wrapper below already carries the stroke wherever the page moves the\n      // text, so the only thing left that can stale it is a change in the text's\n      // own shape — which on a breakpoint-driven layout means a breakpoint. This\n      // is subscribed directly rather than through a `useBreakpoint` hook because\n      // a React state round-trip commits a frame or more after the browser has\n      // painted the new layout, which is exactly the lag being chased out.\n      // `show()` on a still-showing annotation re-renders un-animated, so the\n      // stroke resizes without replaying the draw-on.\n      let drawnAt = getBreakpoint();\n      untrack = onBreakpointChange(() => {\n        const current = getBreakpoint();\n        if (current === drawnAt) return;\n        drawnAt = current;\n        annotation?.show();\n      });\n    };\n\n    const startDelay = reducedMotion ? 0 : delay;\n    const timer = startDelay > 0 ? globalThis.setTimeout(draw, startDelay) : undefined;\n    if (timer === undefined) draw();\n\n    return () => {\n      globalThis.clearTimeout(timer);\n      untrack?.();\n      annotation?.remove();\n    };\n  }, [\n    shouldShow,\n    action,\n    color,\n    strokeWidth,\n    animationDuration,\n    delay,\n    iterations,\n    padding,\n    multiline,\n    reducedMotion,\n    themeVersion,\n  ]);\n\n  // Two spans, and both earn their place.\n  //\n  // rough-notation injects its SVG as a *sibling* of the annotated element, laid\n  // out `position: absolute; top: 0; left: 0`, with the stroke's coordinates baked\n  // as offsets from wherever that SVG lands. Left alone it resolves against\n  // whatever positioned ancestor it happens to find — for a centred, shrink-wrapped\n  // page section, effectively the viewport — so every reflow that slid the text\n  // sideways slid it out from under its own stroke, and only a redraw put it back.\n  // The `relative` wrapper makes the SVG resolve against a box the text sits\n  // inside instead, so the two now move as one and no listener is involved.\n  //\n  // The inner span stays plain `inline`, which is what makes `multiline` work:\n  // `getClientRects()` on an inline reports one box per line, so wrapped text gets\n  // a stroke per line rather than one slab drawn around the whole paragraph.\n  return (\n    <span className={cn('relative inline-block bg-transparent', className)}>\n      <span ref={elementRef}>{children}</span>\n    </span>\n  );\n}\n\nexport type { AnnotationAction, HighlighterProps };\n"]}

package/dist/index.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var accordion = require('@base-ui/react/accordion');
@@ -13,7 +14,6 @@ var shadersReact = require('@paper-design/shaders-react');
 var navigationMenu = require('@base-ui/react/navigation-menu');
 var reactSlot = require('@radix-ui/react-slot');
 
-// src/components/accordion.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }