create-mcp-use-app 2.0.0-beta.3 → 2.0.0-beta.5

package/dist/templates/mcp-apps/views/my-view/MeshGradient.tsx

@@ -0,0 +1,299 @@
+import { useEffect, useRef } from "react";
+
+// Hero mesh palette (light landing surfaces)
+const MESH_COLORS = ["#e0eaff", "#f9ffbd", "#dedede", "#ffffff"];
+const HERO_MESH_SPEED = 1.15;
+const HERO_MESH_SWIRL = 0.95;
+const ORB_MAX_WIDTH_PX = 800;
+
+const VERT = `#version 300 es
+precision mediump float;
+in vec4 a_position;
+uniform vec2 u_resolution;
+out vec2 v_objectUV;
+void main(){
+  gl_Position=a_position;
+  vec2 uv=a_position.xy*0.5;
+  float box=min(u_resolution.x,u_resolution.y);
+  vec2 scale=box>0.0?u_resolution/box:vec2(1.);
+  v_objectUV=uv*scale;
+}`;
+
+const FRAG = `#version 300 es
+precision mediump float;
+uniform float u_time;
+uniform vec4 u_colors[4];
+uniform float u_colorsCount;
+uniform float u_distortion;
+uniform float u_swirl;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+in vec2 v_objectUV;
+out vec4 fragColor;
+vec2 rotate(vec2 uv,float th){return mat2(cos(th),sin(th),-sin(th),cos(th))*uv;}
+float hash21(vec2 p){
+  p=fract(p*vec2(0.3183099,0.3678794))+0.1;
+  p+=dot(p,p+19.19);
+  return fract(p.x*p.y);
+}
+float valueNoise(vec2 st){
+  vec2 i=floor(st);vec2 f=fract(st);
+  float a=hash21(i),b=hash21(i+vec2(1.,0.)),c=hash21(i+vec2(0.,1.)),d=hash21(i+vec2(1.,1.));
+  vec2 u=f*f*(3.-2.*f);
+  return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);
+}
+vec2 getPosition(int i,float t){
+  float a=float(i)*.37,b=.6+fract(float(i)/3.)*.9,c=.8+fract(float(i+1)/4.);
+  float x=sin(t*b+a),y=cos(t*c+a*1.5);
+  return .5+.5*vec2(x,y);
+}
+void main(){
+  vec2 uv=v_objectUV;uv+=.5;
+  vec2 grainUV=uv*1000.;
+  float grain=valueNoise(grainUV);
+  float mixerGrain=.4*u_grainMixer*(grain-.5);
+  float t=.5*(u_time+41.5);
+  float radius=smoothstep(0.,1.,length(uv-.5));
+  float center=1.-radius;
+  for(float i=1.;i<=2.;i++){
+    uv.x+=u_distortion*center/i*sin(t+i*.4*smoothstep(0.,1.,uv.y))*cos(.2*t+i*2.4*smoothstep(0.,1.,uv.y));
+    uv.y+=u_distortion*center/i*cos(t+i*2.*smoothstep(0.,1.,uv.x));
+  }
+  vec2 uvR=uv-vec2(.5);
+  float angle=3.*u_swirl*radius;
+  uvR=rotate(uvR,-angle);uvR+=vec2(.5);
+  vec3 color=vec3(0.);float opacity=0.,totalWeight=0.;
+  for(int i=0;i<4;i++){
+    if(i>=int(u_colorsCount))break;
+    vec2 pos=getPosition(i,t)+mixerGrain;
+    vec3 cf=u_colors[i].rgb*u_colors[i].a;
+    float opacityF=u_colors[i].a;
+    float dist=length(uvR-pos);
+    dist=pow(dist,3.5);
+    float w=1./(dist+1e-3);
+    color+=cf*w;opacity+=opacityF*w;totalWeight+=w;
+  }
+  color/=max(1e-4,totalWeight);
+  opacity/=max(1e-4,totalWeight);
+  float grainO=valueNoise(rotate(grainUV,1.)+vec2(3.));
+  grainO=mix(grainO,valueNoise(rotate(grainUV,2.)+vec2(-1.)),.5);
+  grainO=pow(grainO,1.3);
+  float grainOV=grainO*2.-1.;
+  vec3 grainOC=vec3(step(0.,grainOV));
+  float grainOS=u_grainOverlay*abs(grainOV);
+  grainOS=pow(grainOS,.8);
+  color=mix(color,grainOC,.35*grainOS);
+  opacity+=.5*grainOS;
+  fragColor=vec4(color,clamp(opacity,0.,1.));
+}`;
+
+function hexToRgba(hex: string): [number, number, number, number] {
+  return [
+    parseInt(hex.slice(1, 3), 16) / 255,
+    parseInt(hex.slice(3, 5), 16) / 255,
+    parseInt(hex.slice(5, 7), 16) / 255,
+    1,
+  ];
+}
+
+/** WebGL2 mesh gradient canvas (self-contained; no external deps). */
+function MeshGradientCanvas({
+  className,
+  colors = MESH_COLORS,
+  distortion = 0.8,
+  swirl = 0.1,
+  grainMixer = 0,
+  grainOverlay = 0.2,
+  speed = 1,
+}: {
+  className?: string;
+  colors?: string[];
+  distortion?: number;
+  swirl?: number;
+  grainMixer?: number;
+  grainOverlay?: number;
+  speed?: number;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const propsRef = useRef({
+    colors,
+    distortion,
+    swirl,
+    grainMixer,
+    grainOverlay,
+    speed,
+  });
+  propsRef.current = {
+    colors,
+    distortion,
+    swirl,
+    grainMixer,
+    grainOverlay,
+    speed,
+  };
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const wrap = wrapRef.current;
+    if (!canvas || !wrap) return;
+
+    const gl = canvas.getContext("webgl2");
+    if (!gl) return;
+
+    const compileShader = (type: number, src: string) => {
+      const shader = gl.createShader(type);
+      if (!shader) return null;
+      gl.shaderSource(shader, src);
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error(gl.getShaderInfoLog(shader));
+        return null;
+      }
+      return shader;
+    };
+
+    const vs = compileShader(gl.VERTEX_SHADER, VERT);
+    const fs = compileShader(gl.FRAGMENT_SHADER, FRAG);
+    if (!vs || !fs) return;
+
+    const prog = gl.createProgram();
+    if (!prog) return;
+    gl.attachShader(prog, vs);
+    gl.attachShader(prog, fs);
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+      console.error(gl.getProgramInfoLog(prog));
+      return;
+    }
+    gl.useProgram(prog);
+
+    const posLoc = gl.getAttribLocation(prog, "a_position");
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+      gl.STATIC_DRAW
+    );
+    gl.enableVertexAttribArray(posLoc);
+    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+
+    const uTime = gl.getUniformLocation(prog, "u_time");
+    const uResolution = gl.getUniformLocation(prog, "u_resolution");
+    const uColors = [0, 1, 2, 3].map((i) =>
+      gl.getUniformLocation(prog, `u_colors[${i}]`)
+    );
+    const uColorsCount = gl.getUniformLocation(prog, "u_colorsCount");
+    const uDistortion = gl.getUniformLocation(prog, "u_distortion");
+    const uSwirl = gl.getUniformLocation(prog, "u_swirl");
+    const uGrainMixer = gl.getUniformLocation(prog, "u_grainMixer");
+    const uGrainOverlay = gl.getUniformLocation(prog, "u_grainOverlay");
+
+    let frameMs = 0;
+    let lastNow = performance.now();
+    let raf = 0;
+
+    const resize = () => {
+      const dpr = Math.min(2, window.devicePixelRatio || 1);
+      canvas.width = Math.floor(wrap.clientWidth * dpr);
+      canvas.height = Math.floor(wrap.clientHeight * dpr);
+      gl.viewport(0, 0, canvas.width, canvas.height);
+    };
+
+    const draw = (now: number) => {
+      if (document.hidden) {
+        lastNow = now;
+        raf = requestAnimationFrame(draw);
+        return;
+      }
+      const {
+        colors: currentColors,
+        distortion: currentDistortion,
+        swirl: currentSwirl,
+        grainMixer: currentGrainMixer,
+        grainOverlay: currentGrainOverlay,
+        speed: currentSpeed,
+      } = propsRef.current;
+      const dt = now - lastNow;
+      lastNow = now;
+      frameMs += dt * currentSpeed;
+      const rgbaColors = currentColors.map(hexToRgba);
+      gl.uniform1f(uTime, frameMs * 1e-3);
+      gl.uniform2f(uResolution, canvas.width, canvas.height);
+      for (let i = 0; i < 4; i++) {
+        const loc = uColors[i];
+        if (loc) gl.uniform4fv(loc, rgbaColors[i] ?? [1, 1, 1, 1]);
+      }
+      gl.uniform1f(uColorsCount, rgbaColors.length);
+      gl.uniform1f(uDistortion, currentDistortion);
+      gl.uniform1f(uSwirl, currentSwirl);
+      gl.uniform1f(uGrainMixer, currentGrainMixer);
+      gl.uniform1f(uGrainOverlay, currentGrainOverlay);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+      raf = requestAnimationFrame(draw);
+    };
+
+    resize();
+    const ro = new ResizeObserver(resize);
+    ro.observe(wrap);
+    raf = requestAnimationFrame(draw);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+    };
+  }, []);
+
+  return (
+    <div ref={wrapRef} className={className}>
+      <canvas ref={canvasRef} className="h-full w-full" aria-hidden />
+    </div>
+  );
+}
+
+function MeshOrbContent() {
+  return (
+    <>
+      <div className="absolute inset-0 bg-[#edf2ff]" />
+      <MeshGradientCanvas
+        className="absolute inset-0 h-full w-full"
+        colors={MESH_COLORS}
+        distortion={0.8}
+        swirl={HERO_MESH_SWIRL}
+        grainMixer={0}
+        grainOverlay={0.3}
+        speed={HERO_MESH_SPEED}
+      />
+    </>
+  );
+}
+
+/** Mesh disc peeking from the bottom — 80% of card width, capped at 800px. */
+export function HeroMeshOrb({ flow = false }: { flow?: boolean }) {
+  if (flow) {
+    return (
+      <div
+        className="relative z-0 mt-2 w-full overflow-hidden pb-[22%]"
+        aria-hidden
+      >
+        <div
+          className="absolute bottom-0 left-1/2 aspect-square w-full -translate-x-1/2 translate-y-[78%] overflow-hidden rounded-full opacity-90"
+          style={{ maxWidth: ORB_MAX_WIDTH_PX }}
+        >
+          <MeshOrbContent />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="pointer-events-none absolute bottom-0 left-1/2 z-0 aspect-square w-[80%] -translate-x-1/2 translate-y-[78%] overflow-hidden rounded-full opacity-90"
+      style={{ maxWidth: ORB_MAX_WIDTH_PX }}
+      aria-hidden
+    >
+      <MeshOrbContent />
+    </div>
+  );
+}

package/dist/templates/mcp-apps/views/my-view/Tooltip.tsx

@@ -0,0 +1,75 @@
+import { useRef, useState, type ReactNode } from "react";
+
+/** Hover/focus tooltip clamped to the nearest [data-card-shell] ancestor. */
+export function Tooltip({
+  label,
+  children,
+  multiline = false,
+}: {
+  label: string;
+  children: ReactNode;
+  multiline?: boolean;
+}) {
+  const wrapRef = useRef<HTMLSpanElement>(null);
+  const tipRef = useRef<HTMLSpanElement>(null);
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState({ left: 0, maxWidth: 320 });
+
+  const show = () => {
+    const wrap = wrapRef.current;
+    const tip = tipRef.current;
+    const card = wrap?.closest("[data-card-shell]");
+    if (!wrap || !tip || !card) {
+      setOpen(true);
+      return;
+    }
+    const pad = 12;
+    const cardR = card.getBoundingClientRect();
+    const wrapR = wrap.getBoundingClientRect();
+    const maxWidth = Math.min(320, Math.max(160, cardR.width - pad * 2));
+    Object.assign(tip.style, {
+      maxWidth: `${maxWidth}px`,
+      visibility: "hidden",
+      opacity: "1",
+    });
+    const w = tip.offsetWidth;
+    tip.style.visibility = "";
+    tip.style.opacity = "";
+    const left =
+      Math.max(
+        cardR.left + pad,
+        Math.min(wrapR.left + wrapR.width / 2 - w / 2, cardR.right - pad - w)
+      ) - wrapR.left;
+    setPos({ left, maxWidth });
+    setOpen(true);
+  };
+
+  return (
+    <span
+      ref={wrapRef}
+      className="relative inline-flex"
+      onMouseEnter={show}
+      onMouseLeave={() => setOpen(false)}
+      onFocus={show}
+      onBlur={() => setOpen(false)}
+    >
+      {children}
+      <span
+        ref={tipRef}
+        role="tooltip"
+        style={{
+          left: pos.left,
+          maxWidth: pos.maxWidth,
+          opacity: open ? 1 : 0,
+        }}
+        className={`pointer-events-none absolute top-full z-30 mt-1.5 w-max rounded-lg bg-zinc-900 px-3 py-2 text-[11px] font-medium text-white transition-opacity duration-200 dark:bg-zinc-800 dark:text-neutral-100 ${
+          multiline
+            ? "whitespace-normal text-left leading-snug"
+            : "whitespace-nowrap"
+        }`}
+      >
+        {label}
+      </span>
+    </span>
+  );
+}

package/dist/templates/mcp-apps/views/my-view/icons.tsx

@@ -0,0 +1,142 @@
+export function ExpandIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+    </svg>
+  );
+}
+
+export function PipIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <rect x="2" y="4" width="20" height="14" rx="2" />
+      <rect x="13" y="11" width="7" height="5" rx="1" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function CloseIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+export function SunIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" />
+    </svg>
+  );
+}
+
+export function MoonIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+    </svg>
+  );
+}
+
+export function SmartphoneIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
+      <path d="M12 18h.01" />
+    </svg>
+  );
+}
+
+export function MonitorIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <rect width="20" height="14" x="2" y="3" rx="2" />
+      <path d="M8 21h8M12 17v4" />
+    </svg>
+  );
+}
+
+export function ExternalLinkIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      aria-hidden
+    >
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" y1="14" x2="21" y2="3" />
+    </svg>
+  );
+}

package/dist/templates/mcp-apps/views/my-view/view.css

@@ -0,0 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
+
+.hero-title {
+  font-family: "Outfit", sans-serif;
+}