@moltenagentic/human-elements 0.1.0

package/dist/index.js

@@ -0,0 +1,1000 @@
+'use client';
+
+// src/components/TechGrid.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var GRID = 160;
+var HALF = GRID / 2;
+var ARM = 10;
+var TONES = {
+  molten: {
+    line: "rgba(200,70,35,0.14)",
+    cross: "rgba(200,70,35,0.45)",
+    dot: "rgba(200,70,35,0.25)"
+  },
+  dark: {
+    line: "rgba(0,0,0,0.18)",
+    cross: "rgba(0,0,0,0.4)",
+    dot: "rgba(0,0,0,0.22)"
+  }
+};
+function TechGrid({
+  className = "",
+  zIndex = 3,
+  tone = "molten",
+  id = "",
+  style
+}) {
+  const { line, cross, dot } = TONES[tone];
+  const gridId = `tech-grid${id ? `-${id}` : ""}`;
+  const crossId = `crosshairs${id ? `-${id}` : ""}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: `pointer-events-none ${className}`,
+      style: { zIndex, ...style },
+      children: [
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "pattern",
+            {
+              id: gridId,
+              width: GRID,
+              height: GRID,
+              patternUnits: "userSpaceOnUse",
+              children: [
+                /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: GRID, y2: "0", stroke: line, strokeWidth: "0.5" }),
+                /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: GRID, stroke: line, strokeWidth: "0.5" }),
+                /* @__PURE__ */ jsx("circle", { cx: HALF, cy: 0, r: "1.5", fill: dot }),
+                /* @__PURE__ */ jsx("circle", { cx: 0, cy: HALF, r: "1.5", fill: dot }),
+                /* @__PURE__ */ jsx("circle", { cx: HALF, cy: HALF, r: "1.5", fill: dot })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "pattern",
+            {
+              id: crossId,
+              width: GRID,
+              height: GRID,
+              patternUnits: "userSpaceOnUse",
+              patternTransform: `translate(${-HALF},${-HALF})`,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: HALF - ARM,
+                    y1: HALF,
+                    x2: HALF + ARM,
+                    y2: HALF,
+                    stroke: cross,
+                    strokeWidth: "1"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "line",
+                  {
+                    x1: HALF,
+                    y1: HALF - ARM,
+                    x2: HALF,
+                    y2: HALF + ARM,
+                    stroke: cross,
+                    strokeWidth: "1"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${gridId})` }),
+        /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#${crossId})` })
+      ]
+    }
+  );
+}
+
+// src/components/GridMesh.tsx
+import { useEffect, useRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function GridMesh({
+  className = "",
+  opacity = 0.6,
+  gridSize = 50,
+  strokeColor = "rgba(255, 255, 255, 0.03)"
+}) {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animationFrameId;
+    let time = 0;
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    const draw = () => {
+      if (!ctx || !canvas) return;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const cols = Math.ceil(canvas.width / gridSize) + 1;
+      const rows = Math.ceil(canvas.height / gridSize) + 1;
+      time += 5e-3;
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = 1;
+      for (let i = 0; i < rows; i++) {
+        ctx.beginPath();
+        for (let j = 0; j < cols; j++) {
+          const x = j * gridSize;
+          const y = i * gridSize + Math.sin(time + j * 0.1) * 10 + Math.cos(time * 0.5 + i * 0.1) * 8;
+          if (j === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+      }
+      for (let j = 0; j < cols; j++) {
+        ctx.beginPath();
+        for (let i = 0; i < rows; i++) {
+          const x = j * gridSize + Math.sin(time + i * 0.1) * 10 + Math.cos(time * 0.7 + j * 0.1) * 8;
+          const y = i * gridSize;
+          if (i === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+      }
+      animationFrameId = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => {
+      window.removeEventListener("resize", resize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [gridSize, strokeColor]);
+  return /* @__PURE__ */ jsx2(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: `absolute inset-0 w-full h-full pointer-events-none ${className}`,
+      style: { opacity }
+    }
+  );
+}
+
+// src/components/LavaScene.tsx
+import { useRef as useRef2, useMemo, useEffect as useEffect2 } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var noiseGLSL = (
+  /* glsl */
+  `
+vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}
+vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}
+vec4 permute(vec4 x){return mod289(((x*34.0)+10.0)*x);}
+vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}
+
+float snoise(vec3 v){
+  const vec2 C=vec2(1.0/6.0,1.0/3.0);
+  const vec4 D=vec4(0.0,0.5,1.0,2.0);
+  vec3 i=floor(v+dot(v,C.yyy));
+  vec3 x0=v-i+dot(i,C.xxx);
+  vec3 g=step(x0.yzx,x0.xyz);
+  vec3 l=1.0-g;
+  vec3 i1=min(g.xyz,l.zxy);
+  vec3 i2=max(g.xyz,l.zxy);
+  vec3 x1=x0-i1+C.xxx;
+  vec3 x2=x0-i2+C.yyy;
+  vec3 x3=x0-D.yyy;
+  i=mod289(i);
+  vec4 p=permute(permute(permute(
+    i.z+vec4(0.0,i1.z,i2.z,1.0))
+    +i.y+vec4(0.0,i1.y,i2.y,1.0))
+    +i.x+vec4(0.0,i1.x,i2.x,1.0));
+  float n_=0.142857142857;
+  vec3 ns=n_*D.wyz-D.xzx;
+  vec4 j=p-49.0*floor(p*ns.z*ns.z);
+  vec4 x_=floor(j*ns.z);
+  vec4 y_=floor(j-7.0*x_);
+  vec4 x=x_*ns.x+ns.yyyy;
+  vec4 y=y_*ns.x+ns.yyyy;
+  vec4 h=1.0-abs(x)-abs(y);
+  vec4 b0=vec4(x.xy,y.xy);
+  vec4 b1=vec4(x.zw,y.zw);
+  vec4 s0=floor(b0)*2.0+1.0;
+  vec4 s1=floor(b1)*2.0+1.0;
+  vec4 sh=-step(h,vec4(0.0));
+  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;
+  vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;
+  vec3 p0=vec3(a0.xy,h.x);
+  vec3 p1=vec3(a0.zw,h.y);
+  vec3 p2=vec3(a1.xy,h.z);
+  vec3 p3=vec3(a1.zw,h.w);
+  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));
+  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;
+  vec4 m=max(0.5-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);
+  m=m*m;
+  return 105.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
+}
+`
+);
+var vertexShader = (
+  /* glsl */
+  `
+uniform float uTime;
+${noiseGLSL}
+varying float vDisplacement;
+varying vec3 vNormal;
+varying vec3 vWorldPosition;
+
+void main() {
+  float n1 = snoise(position * 1.5 + uTime * 0.15) * 0.4;
+  float n2 = snoise(position * 3.0 + uTime * 0.3) * 0.2;
+  float n3 = snoise(position * 6.0 - uTime * 0.2) * 0.1;
+  float displacement = n1 + n2 + n3;
+
+  vec3 newPos = position + normal * displacement;
+  vDisplacement = displacement;
+  vNormal = normalize(normalMatrix * normal);
+  vWorldPosition = (modelMatrix * vec4(newPos, 1.0)).xyz;
+
+  gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
+}
+`
+);
+var fragmentShader = (
+  /* glsl */
+  `
+uniform float uTime;
+varying float vDisplacement;
+varying vec3 vNormal;
+varying vec3 vWorldPosition;
+
+void main() {
+  float d = smoothstep(-0.5, 0.7, vDisplacement);
+
+  vec3 c0 = vec3(0.337, 0.055, 0.141);
+  vec3 c1 = vec3(0.671, 0.106, 0.114);
+  vec3 c2 = vec3(0.855, 0.220, 0.086);
+  vec3 c3 = vec3(0.969, 0.500, 0.055);
+  vec3 c4 = vec3(0.984, 0.624, 0.051);
+  vec3 c5 = vec3(1.0, 0.95, 0.85);
+
+  vec3 color;
+  if (d < 0.15)      color = mix(c0, c1, d / 0.15);
+  else if (d < 0.35) color = mix(c1, c2, (d - 0.15) / 0.2);
+  else if (d < 0.55) color = mix(c2, c3, (d - 0.35) / 0.2);
+  else if (d < 0.75) color = mix(c3, c4, (d - 0.55) / 0.2);
+  else                color = mix(c4, c5, (d - 0.75) / 0.25);
+
+  vec3 viewDir = normalize(cameraPosition - vWorldPosition);
+  float fresnel = pow(1.0 - max(dot(vNormal, viewDir), 0.0), 3.0);
+  color += c4 * fresnel * 0.5;
+
+  color *= 1.0 + 0.06 * sin(uTime * 0.7);
+
+  gl_FragColor = vec4(color, 1.0);
+}
+`
+);
+function LavaSphere({ yOffset = 0.6 }) {
+  const meshRef = useRef2(null);
+  const matRef = useRef2(null);
+  const mouse = useRef2({ x: 0, y: 0 });
+  useEffect2(() => {
+    const onMove = (e) => {
+      mouse.current.x = (e.clientX / window.innerWidth - 0.5) * 2;
+      mouse.current.y = -(e.clientY / window.innerHeight - 0.5) * 2;
+    };
+    window.addEventListener("mousemove", onMove);
+    return () => window.removeEventListener("mousemove", onMove);
+  }, []);
+  const uniforms = useMemo(() => ({ uTime: { value: 0 } }), []);
+  useFrame(({ clock }) => {
+    if (matRef.current) matRef.current.uniforms.uTime.value = clock.elapsedTime;
+    if (meshRef.current) {
+      const m = meshRef.current;
+      m.rotation.x = THREE.MathUtils.lerp(m.rotation.x, mouse.current.y * 0.15, 0.02);
+      m.rotation.y = THREE.MathUtils.lerp(
+        m.rotation.y,
+        mouse.current.x * 0.25 + clock.elapsedTime * 0.06,
+        0.02
+      );
+    }
+  });
+  return /* @__PURE__ */ jsxs2("mesh", { ref: meshRef, position: [0, yOffset, 0], children: [
+    /* @__PURE__ */ jsx3("icosahedronGeometry", { args: [1.5, 64] }),
+    /* @__PURE__ */ jsx3(
+      "shaderMaterial",
+      {
+        ref: matRef,
+        vertexShader,
+        fragmentShader,
+        uniforms
+      }
+    )
+  ] });
+}
+function EmberParticles() {
+  const ref = useRef2(null);
+  const count = 180;
+  const { positions, velocities } = useMemo(() => {
+    const pos = new Float32Array(count * 3);
+    const vel = new Float32Array(count * 3);
+    for (let i = 0; i < count; i++) {
+      const i3 = i * 3;
+      pos[i3] = (Math.random() - 0.5) * 10;
+      pos[i3 + 1] = Math.random() * 8 - 4;
+      pos[i3 + 2] = (Math.random() - 0.5) * 6;
+      vel[i3] = (Math.random() - 0.5) * 3e-3;
+      vel[i3 + 1] = Math.random() * 6e-3 + 2e-3;
+      vel[i3 + 2] = (Math.random() - 0.5) * 2e-3;
+    }
+    return { positions: pos, velocities: vel };
+  }, []);
+  const sizes = useMemo(() => {
+    const s = new Float32Array(count);
+    for (let i = 0; i < count; i++) s[i] = Math.random() * 0.04 + 0.01;
+    return s;
+  }, []);
+  useFrame(() => {
+    if (!ref.current) return;
+    const arr = ref.current.geometry.attributes.position.array;
+    for (let i = 0; i < count; i++) {
+      const i3 = i * 3;
+      arr[i3] += velocities[i3];
+      arr[i3 + 1] += velocities[i3 + 1];
+      arr[i3 + 2] += velocities[i3 + 2];
+      if (arr[i3 + 1] > 5) {
+        arr[i3] = (Math.random() - 0.5) * 10;
+        arr[i3 + 1] = -5;
+        arr[i3 + 2] = (Math.random() - 0.5) * 6;
+      }
+    }
+    ref.current.geometry.attributes.position.needsUpdate = true;
+  });
+  return /* @__PURE__ */ jsxs2("points", { ref, children: [
+    /* @__PURE__ */ jsxs2("bufferGeometry", { children: [
+      /* @__PURE__ */ jsx3("bufferAttribute", { attach: "attributes-position", args: [positions, 3] }),
+      /* @__PURE__ */ jsx3("bufferAttribute", { attach: "attributes-size", args: [sizes, 1] })
+    ] }),
+    /* @__PURE__ */ jsx3("pointsMaterial", { size: 0.035, color: "#fb9f0d", transparent: true, opacity: 0.5, sizeAttenuation: true })
+  ] });
+}
+function LavaScene({ centered = false }) {
+  const yOffset = centered ? 0 : 0.6;
+  return /* @__PURE__ */ jsxs2(
+    Canvas,
+    {
+      camera: { position: [0, 0, 5], fov: 45 },
+      gl: { antialias: true, alpha: true },
+      style: { background: "transparent" },
+      children: [
+        /* @__PURE__ */ jsx3("ambientLight", { intensity: 0.08 }),
+        /* @__PURE__ */ jsx3("pointLight", { position: [5, 5, 5], intensity: 0.5, color: "#fb9f0d" }),
+        /* @__PURE__ */ jsx3("pointLight", { position: [-5, -3, 3], intensity: 0.3, color: "#ab1b1d" }),
+        /* @__PURE__ */ jsx3(LavaSphere, { yOffset }),
+        /* @__PURE__ */ jsx3(EmberParticles, {})
+      ]
+    }
+  );
+}
+
+// src/components/EmberField.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var COLORS = {
+  molten: [
+    [251, 159, 13],
+    [247, 128, 14],
+    [237, 99, 20],
+    [218, 56, 22]
+  ],
+  dark: [
+    [0, 0, 0],
+    [20, 8, 2],
+    [40, 16, 4],
+    [10, 4, 1]
+  ]
+};
+function randomColor(tone) {
+  const palette = COLORS[tone];
+  return [...palette[Math.floor(Math.random() * palette.length)]];
+}
+function createParticle(w, h, tone, fromBottom = false) {
+  return {
+    x: Math.random() * w,
+    y: fromBottom ? h + Math.random() * 40 : Math.random() * h,
+    vx: (Math.random() - 0.5) * 0.3,
+    vy: -(Math.random() * 0.6 + 0.2),
+    size: Math.random() * 2.5 + 0.8,
+    opacity: Math.random() * 0.5 + 0.2,
+    drift: (Math.random() - 0.5) * 2e-3
+  };
+}
+function EmberField({
+  tone = "molten",
+  count = 60,
+  className = "",
+  style
+}) {
+  const canvasRef = useRef3(null);
+  useEffect3(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    let animId;
+    let particles = [];
+    const resize = () => {
+      canvas.width = canvas.offsetWidth * window.devicePixelRatio;
+      canvas.height = canvas.offsetHeight * window.devicePixelRatio;
+      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    };
+    const init = () => {
+      resize();
+      const w = canvas.offsetWidth;
+      const h = canvas.offsetHeight;
+      particles = Array.from({ length: count }, () => ({
+        ...createParticle(w, h, tone),
+        color: randomColor(tone)
+      }));
+    };
+    init();
+    window.addEventListener("resize", init);
+    const draw = () => {
+      const w = canvas.offsetWidth;
+      const h = canvas.offsetHeight;
+      ctx.clearRect(0, 0, w, h);
+      for (const p of particles) {
+        p.x += p.vx;
+        p.y += p.vy;
+        p.vx += p.drift;
+        if (p.y < -10 || p.x < -10 || p.x > w + 10) {
+          Object.assign(p, createParticle(w, h, tone, true));
+          p.color = randomColor(tone);
+        }
+        const [r, g, b] = p.color;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+        ctx.fillStyle = `rgba(${r},${g},${b},${p.opacity})`;
+        ctx.fill();
+      }
+      animId = requestAnimationFrame(draw);
+    };
+    draw();
+    return () => {
+      window.removeEventListener("resize", init);
+      cancelAnimationFrame(animId);
+    };
+  }, [tone, count]);
+  return /* @__PURE__ */ jsx4(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: `absolute inset-0 w-full h-full pointer-events-none ${className}`,
+      style
+    }
+  );
+}
+
+// src/components/Vignette.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Vignette({ className = "", zIndex = 2 }) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: `fixed inset-0 pointer-events-none vignette ${className}`,
+      style: { zIndex }
+    }
+  );
+}
+
+// src/components/SphereGlow.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SphereGlow({ className = "", zIndex = 1 }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: `fixed inset-0 pointer-events-none ${className}`,
+      style: { zIndex },
+      children: /* @__PURE__ */ jsx6("div", { className: "sphere-glow" })
+    }
+  );
+}
+
+// src/components/MoltenButton.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var sizeClasses = {
+  xs: "px-2.5 py-1 text-[10px]",
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2 text-sm",
+  lg: "px-8 py-4 text-sm"
+};
+var variantClasses = {
+  molten: "bg-black text-white hover:bg-zinc-900 rainbow-border-button",
+  outline: "bg-transparent border border-zinc-700 text-white hover:bg-zinc-800",
+  ghost: "bg-transparent text-white hover:bg-zinc-800/50"
+};
+function MoltenButton({
+  children,
+  href,
+  variant = "molten",
+  size = "sm",
+  fullWidth = false,
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const classes = [
+    "relative inline-flex items-center justify-center gap-1.5",
+    "rounded-lg font-medium transition-all cursor-pointer",
+    sizeClasses[size],
+    fullWidth ? "w-full" : "",
+    disabled ? "bg-zinc-800 text-zinc-500 cursor-not-allowed" : variantClasses[variant],
+    className
+  ].filter(Boolean).join(" ");
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx7("a", { href, className: classes, children });
+  }
+  return /* @__PURE__ */ jsx7("button", { disabled, className: classes, ...props, children });
+}
+
+// src/components/GlassCard.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var variantClasses2 = {
+  default: "glass-card",
+  subtle: "glass-card-subtle",
+  minimal: "glass-card-minimal"
+};
+function GlassCard({
+  children,
+  variant = "default",
+  glow = false,
+  wave = false,
+  cornerFrame = false,
+  className = "",
+  ...props
+}) {
+  const classes = [
+    variantClasses2[variant],
+    "rounded-2xl",
+    glow ? "molten-card-glow" : "",
+    wave ? "molten-wave-card" : "",
+    cornerFrame ? "corner-frame" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx8("div", { className: classes, ...props, children });
+}
+
+// src/components/MoltenText.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function MoltenText({
+  children,
+  as: Tag = "span",
+  animated = false,
+  className = "",
+  ...props
+}) {
+  const classes = [
+    animated ? "rainbow-text-animated" : "molten-text",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx9(Tag, { className: classes, ...props, children });
+}
+
+// src/components/Page.tsx
+import { useEffect as useEffect4, useState } from "react";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+function Page({
+  children,
+  ptMobile = 20,
+  ptDesktop = 24,
+  pb = 6,
+  px = 6,
+  maxWidth = "max-w-6xl",
+  centered = true,
+  showGrid = true,
+  nav,
+  overlay
+}) {
+  const [isDesktop, setIsDesktop] = useState(false);
+  useEffect4(() => {
+    const handleResize = () => setIsDesktop(window.innerWidth >= 1024);
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const toRem = (units) => `${units * 4 / 16}rem`;
+  const paddingTop = isDesktop ? toRem(ptDesktop) : toRem(ptMobile);
+  return /* @__PURE__ */ jsxs3("main", { className: "relative min-h-screen bg-black overflow-hidden", children: [
+    showGrid && /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 z-0", children: /* @__PURE__ */ jsx10(GridMesh, {}) }),
+    /* @__PURE__ */ jsxs3("div", { className: "relative z-10", children: [
+      nav,
+      /* @__PURE__ */ jsx10(
+        "div",
+        {
+          style: {
+            paddingTop,
+            paddingBottom: toRem(pb),
+            paddingLeft: toRem(px),
+            paddingRight: toRem(px)
+          },
+          className: `min-h-screen ${centered ? "flex flex-col justify-center" : ""}`,
+          children: /* @__PURE__ */ jsx10("div", { className: `${maxWidth} mx-auto w-full`, children })
+        }
+      )
+    ] }),
+    overlay,
+    /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 pointer-events-none bg-gradient-radial from-transparent via-transparent to-black/40" })
+  ] });
+}
+
+// src/components/ProductNav.tsx
+import { useState as useState2, useRef as useRef4, useEffect as useEffect5, useCallback, forwardRef } from "react";
+import gsap from "gsap";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+var BTN_SIZE = 40;
+var BTN_BG = "rgba(24, 24, 27, 0.9)";
+function NavIconButton({
+  children,
+  onClick,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx11(
+    "button",
+    {
+      onClick,
+      className: `relative flex items-center justify-center rounded-xl transition-all cursor-pointer rainbow-border-button text-white ${className}`,
+      style: {
+        width: BTN_SIZE,
+        height: Math.round(BTN_SIZE * 1.1),
+        background: BTN_BG,
+        backdropFilter: "blur(24px)"
+      },
+      children
+    }
+  );
+}
+var ExpandedMenu = forwardRef(
+  ({ menuGroups, xUrl, communityLabel, onClose }, ref) => {
+    const colCount = menuGroups.length + 1;
+    return /* @__PURE__ */ jsx11(
+      "div",
+      {
+        ref,
+        className: "fixed top-0 left-0 right-0 backdrop-blur-xl",
+        style: { transform: "translateY(-100%)", visibility: "hidden", zIndex: 40, background: "rgba(0, 0, 0, 0.95)" },
+        children: /* @__PURE__ */ jsx11("div", { className: "menu-content p-8 pt-20 max-w-2xl mx-auto", children: /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "grid gap-8",
+            style: { gridTemplateColumns: `repeat(${colCount}, 1fr)` },
+            children: [
+              menuGroups.map((group) => /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx11("span", { className: "text-[10px] tracking-[0.2em] text-zinc-500 uppercase font-medium block mb-4", children: group.title }),
+                group.links.map((link) => /* @__PURE__ */ jsx11(
+                  "a",
+                  {
+                    href: link.href,
+                    target: link.external ? "_blank" : void 0,
+                    rel: link.external ? "noopener noreferrer" : void 0,
+                    onClick: onClose,
+                    className: "block text-2xl font-light text-white hover:text-zinc-300 transition-colors py-1",
+                    children: link.label
+                  },
+                  link.href
+                ))
+              ] }, group.title)),
+              /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsx11("span", { className: "text-[10px] tracking-[0.2em] text-zinc-500 uppercase font-medium block mb-4", children: communityLabel }),
+                /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-2 pt-1", children: /* @__PURE__ */ jsx11(
+                  "a",
+                  {
+                    href: xUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center text-white hover:bg-zinc-700 transition-colors",
+                    children: /* @__PURE__ */ jsx11("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx11("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }) })
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ) })
+      }
+    );
+  }
+);
+ExpandedMenu.displayName = "ExpandedMenu";
+function ProductNav({
+  logo,
+  logoHref = "/",
+  menuGroups = [],
+  leftExtra,
+  leftPanel,
+  leftPanelOpen = false,
+  onLeftPanelChange,
+  rightAction,
+  rightExtra,
+  xUrl = "https://x.com/moltenagentic",
+  communityLabel = "Community",
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = useState2(false);
+  const [leftPanelVisible, setLeftPanelVisible] = useState2(false);
+  const isLeftOpen = leftPanelOpen;
+  const setIsLeftOpen = useCallback((v) => {
+    const next = typeof v === "function" ? v(leftPanelOpen) : v;
+    onLeftPanelChange?.(next);
+  }, [leftPanelOpen, onLeftPanelChange]);
+  const navBarRef = useRef4(null);
+  const menuRef = useRef4(null);
+  const leftPanelRef = useRef4(null);
+  const isAnimating = useRef4(false);
+  const hasMenu = menuGroups.length > 0;
+  const slideOpen = useCallback((panelRef) => {
+    if (isAnimating.current || !navBarRef.current || !panelRef.current) return;
+    isAnimating.current = true;
+    const tl = gsap.timeline({
+      onComplete: () => {
+        isAnimating.current = false;
+      }
+    });
+    gsap.set(panelRef.current, { visibility: "visible" });
+    tl.to(navBarRef.current.querySelectorAll(".nav-content"), {
+      opacity: 0,
+      duration: 0.15
+    });
+    tl.to(panelRef.current, {
+      y: 0,
+      duration: 0.4,
+      ease: "power3.out"
+    }, "-=0.1");
+    tl.to(panelRef.current.querySelectorAll(".menu-content > div"), {
+      opacity: 1,
+      y: 0,
+      duration: 0.3,
+      stagger: 0.05
+    }, "-=0.2");
+  }, []);
+  const slideClose = useCallback((panelRef, onDone) => {
+    if (isAnimating.current || !navBarRef.current || !panelRef.current) return;
+    isAnimating.current = true;
+    const panel = panelRef.current;
+    const tl = gsap.timeline({
+      onComplete: () => {
+        isAnimating.current = false;
+        gsap.set(panel, { visibility: "hidden", y: "-100%" });
+        onDone?.();
+      }
+    });
+    tl.to(panel.querySelectorAll(".menu-content > div"), {
+      opacity: 0,
+      y: -10,
+      duration: 0.2,
+      stagger: 0.03
+    });
+    tl.to(panel, {
+      y: "-100%",
+      duration: 0.35,
+      ease: "power3.in"
+    }, "-=0.1");
+    tl.to(navBarRef.current.querySelectorAll(".nav-content"), {
+      opacity: 1,
+      duration: 0.2
+    }, "-=0.15");
+  }, []);
+  useEffect5(() => {
+    if (isOpen) slideOpen(menuRef);
+    else slideClose(menuRef);
+  }, [isOpen, slideOpen, slideClose]);
+  useEffect5(() => {
+    if (isLeftOpen) {
+      setLeftPanelVisible(true);
+      if (isOpen) setIsOpen(false);
+      slideOpen(leftPanelRef);
+    } else {
+      slideClose(leftPanelRef, () => setLeftPanelVisible(false));
+    }
+  }, [isLeftOpen, slideOpen, slideClose]);
+  const toggleMenu = useCallback(() => {
+    if (isLeftOpen) setIsLeftOpen(false);
+    setIsOpen((v) => !v);
+  }, [isLeftOpen]);
+  useEffect5(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        if (isOpen) setIsOpen(false);
+        if (isLeftOpen) setIsLeftOpen(false);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, isLeftOpen]);
+  const anyOpen = isOpen || isLeftOpen;
+  return /* @__PURE__ */ jsxs4("nav", { className: `relative z-50 w-full max-w-2xl mx-auto px-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs4("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs4("div", { style: { position: "absolute", left: "8px", top: "50%", transform: "translateY(-50%)", display: "flex", alignItems: "center", gap: "20px", zIndex: leftPanelVisible ? 30 : 60 }, children: [
+        leftExtra,
+        hasMenu && /* @__PURE__ */ jsx11(NavIconButton, { onClick: toggleMenu, children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", gap: "5px" }, children: [
+          /* @__PURE__ */ jsx11("span", { style: {
+            display: "block",
+            width: "16px",
+            height: "2px",
+            background: "currentColor",
+            transition: "all 0.2s",
+            transformOrigin: "center",
+            transform: isOpen ? "translateY(7px) rotate(45deg)" : "none"
+          } }),
+          /* @__PURE__ */ jsx11("span", { style: {
+            display: "block",
+            width: "16px",
+            height: "2px",
+            background: "currentColor",
+            transition: "all 0.2s",
+            opacity: isOpen ? 0 : 1
+          } }),
+          /* @__PURE__ */ jsx11("span", { style: {
+            display: "block",
+            width: "16px",
+            height: "2px",
+            background: "currentColor",
+            transition: "all 0.2s",
+            transformOrigin: "center",
+            transform: isOpen ? "translateY(-7px) rotate(-45deg)" : "none"
+          } })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          ref: navBarRef,
+          className: "relative px-2 flex items-center justify-between",
+          children: [
+            /* @__PURE__ */ jsx11("div", { className: "nav-content", style: { width: "56px" } }),
+            /* @__PURE__ */ jsx11("div", { className: "nav-content absolute left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsx11("a", { href: logoHref, className: "block hover:opacity-80 transition-opacity", children: logo ?? /* @__PURE__ */ jsx11("span", { style: { fontSize: "18px", fontWeight: 900, color: "#fff" }, children: "M" }) }) }),
+            /* @__PURE__ */ jsxs4("div", { className: "nav-content", style: { display: "flex", alignItems: "center", gap: "20px" }, children: [
+              rightAction && (rightAction.href ? /* @__PURE__ */ jsx11("a", { href: rightAction.href, title: rightAction.label, children: /* @__PURE__ */ jsx11(NavIconButton, { children: rightAction.icon }) }) : /* @__PURE__ */ jsx11(NavIconButton, { onClick: rightAction.onClick, children: rightAction.icon })),
+              rightExtra
+            ] })
+          ]
+        }
+      ),
+      hasMenu && /* @__PURE__ */ jsx11(
+        ExpandedMenu,
+        {
+          ref: menuRef,
+          menuGroups,
+          xUrl,
+          communityLabel,
+          onClose: () => setIsOpen(false)
+        }
+      ),
+      leftPanel && /* @__PURE__ */ jsx11(
+        "div",
+        {
+          ref: leftPanelRef,
+          className: "fixed top-0 left-0 right-0 backdrop-blur-xl",
+          style: { transform: "translateY(-100%)", visibility: "hidden", zIndex: 40, background: "rgba(0, 0, 0, 0.95)" },
+          children: /* @__PURE__ */ jsx11("div", { className: "menu-content p-8 pt-20 max-w-2xl mx-auto", children: typeof leftPanel === "function" ? leftPanel(() => setIsLeftOpen(false)) : leftPanel })
+        }
+      )
+    ] }),
+    anyOpen && /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: "fixed inset-0",
+        style: { background: "rgba(0, 0, 0, 0.5)", zIndex: 30 },
+        onClick: () => {
+          setIsOpen(false);
+          setIsLeftOpen(false);
+        }
+      }
+    )
+  ] });
+}
+
+// src/theme/MoltenThemeProvider.tsx
+import { createContext, useContext, useState as useState3, useEffect as useEffect6, useCallback as useCallback2 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var MoltenThemeContext = createContext({
+  theme: "day",
+  setTheme: () => {
+  },
+  toggle: () => {
+  }
+});
+var STORAGE_KEY = "molten-theme";
+function MoltenThemeProvider({ children, defaultTheme = "day" }) {
+  const [theme, setThemeState] = useState3(defaultTheme);
+  useEffect6(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === "day" || stored === "night") {
+      setThemeState(stored);
+      document.documentElement.dataset.theme = stored;
+    } else {
+      document.documentElement.dataset.theme = defaultTheme;
+    }
+  }, [defaultTheme]);
+  const setTheme = useCallback2((next) => {
+    setThemeState(next);
+    document.documentElement.dataset.theme = next;
+    localStorage.setItem(STORAGE_KEY, next);
+  }, []);
+  const toggle = useCallback2(() => {
+    setTheme(theme === "day" ? "night" : "day");
+  }, [theme, setTheme]);
+  return /* @__PURE__ */ jsx12(MoltenThemeContext.Provider, { value: { theme, setTheme, toggle }, children });
+}
+function useMoltenTheme() {
+  return useContext(MoltenThemeContext);
+}
+
+// src/components/HalfHero.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+var fieldClasses = {
+  default: "molten-field",
+  intense: "molten-field-intense",
+  subtle: "molten-field-subtle",
+  vignette: "molten-field-vignette"
+};
+function HalfHero({
+  children,
+  nav,
+  className = "",
+  height = "50vh",
+  fieldVariant = "default",
+  showEmbers = true,
+  emberCount = 40,
+  showGrid = true
+}) {
+  const { theme } = useMoltenTheme();
+  const isNight = theme === "night";
+  const gridTone = isNight ? "molten" : "dark";
+  const emberTone = isNight ? "molten" : "dark";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: `relative overflow-hidden flex flex-col ${fieldClasses[fieldVariant]} ${className}`,
+      style: { minHeight: height, color: isNight ? "#fff" : "#000" },
+      children: [
+        showGrid && /* @__PURE__ */ jsx13(TechGrid, { tone: gridTone, id: "hero", className: "absolute inset-0 w-full h-full", style: { zIndex: 3 } }),
+        showEmbers && /* @__PURE__ */ jsx13(EmberField, { tone: emberTone, count: emberCount, style: { zIndex: 5 } }),
+        nav && /* @__PURE__ */ jsx13("div", { className: "relative pt-4 he-nav-spacing", style: { zIndex: 30 }, children: nav }),
+        /* @__PURE__ */ jsxs5("div", { className: "relative flex-1 flex flex-col items-center px-4 he-content-spacing", style: { zIndex: 10 }, children: [
+          /* @__PURE__ */ jsx13("div", { style: { flex: 1 } }),
+          children,
+          /* @__PURE__ */ jsx13("div", { style: { flex: 1 } })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ProductShell.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function ProductShell({
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx14("main", { className: `relative min-h-screen bg-black text-white ${className}`, children });
+}
+export {
+  EmberField,
+  GlassCard,
+  GridMesh,
+  HalfHero,
+  LavaScene,
+  MoltenButton,
+  MoltenText,
+  MoltenThemeProvider,
+  Page,
+  ProductNav,
+  ProductShell,
+  SphereGlow,
+  TechGrid,
+  Vignette,
+  useMoltenTheme
+};
+//# sourceMappingURL=index.js.map