motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-K3HQEHJ6.js

@@ -0,0 +1,663 @@
+"use client";
+import {
+  UserPlusIcon
+} from "./chunk-SKEE23KW.js";
+import {
+  CreditCardIcon
+} from "./chunk-GVWOJJ3T.js";
+import {
+  HistoryIcon
+} from "./chunk-BPE43MTT.js";
+import {
+  FILE_TEXT
+} from "./chunk-OINRQUYT.js";
+import {
+  MailCheckIcon
+} from "./chunk-CEQ56RF6.js";
+import {
+  RotateCCWIcon
+} from "./chunk-YURGXJSP.js";
+import {
+  DownloadIcon
+} from "./chunk-IKM7EEYN.js";
+import {
+  SearchIcon
+} from "./chunk-WOR2GMMN.js";
+import {
+  ZapIcon
+} from "./chunk-6GRDT3OE.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  UsersIcon
+} from "./chunk-NB5CB65C.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/aura-card/aura-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SCENES = [
+  {
+    query: "billing",
+    results: [
+      { label: "Open billing settings", icon: "card", hint: "G B" },
+      { label: "Billing history", icon: "history" },
+      { label: "Download invoices", icon: "download" }
+    ],
+    pick: 0
+  },
+  {
+    query: "deploy",
+    results: [
+      { label: "Deploy to production", icon: "deploy", hint: "D P" },
+      { label: "Roll back last deploy", icon: "undo" },
+      { label: "Deploy logs", icon: "file" }
+    ],
+    pick: 1
+  },
+  {
+    query: "invite",
+    results: [
+      { label: "Invite a teammate", icon: "invite", hint: "I" },
+      { label: "Team members", icon: "team" },
+      { label: "Pending invites", icon: "mail" }
+    ],
+    pick: 0
+  }
+];
+var ICONS = {
+  card: CreditCardIcon,
+  history: HistoryIcon,
+  download: DownloadIcon,
+  deploy: ZapIcon,
+  undo: RotateCCWIcon,
+  file: FILE_TEXT,
+  invite: UserPlusIcon,
+  team: UsersIcon,
+  mail: MailCheckIcon
+};
+var DEFAULT_COLORS = [
+  "#1f3bff",
+  "#4f7cff",
+  "#9db8ff",
+  "#dfe7ff"
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var PILL = { type: "spring", stiffness: 520, damping: 40 };
+var VERTEX = `attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}`;
+var FRAGMENT = `precision highp float;
+uniform vec2 r;uniform float t;uniform float now;uniform float warp;uniform float grain;uniform float ripple;
+uniform vec2 m;uniform vec3 rp;uniform vec3 c0;uniform vec3 c1;uniform vec3 c2;uniform vec3 c3;uniform vec3 ca;
+float hash(vec2 p){p=fract(p*vec2(123.34,456.21));p+=dot(p,p+45.32);return fract(p.x*p.y);}
+float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);vec2 u=f*f*(3.-2.*f);
+return mix(mix(hash(i),hash(i+vec2(1.,0.)),u.x),mix(hash(i+vec2(0.,1.)),hash(i+1.),u.x),u.y);}
+float fbm(vec2 p){float v=0.,a=.5;for(int i=0;i<5;i++){v+=a*vnoise(p);p*=2.03;a*=.5;}return v;}
+void main(){
+vec2 uv=gl_FragCoord.xy/r;float asp=r.x/r.y;vec2 p=vec2(uv.x*asp,uv.y);
+vec2 home=vec2(.08*asp,-.06);vec2 anchor=mix(home,vec2(m.x*asp,m.y),.28);
+float s=1.1+warp*1.8;
+vec2 q=vec2(fbm(p*s+vec2(0.,t*.12)),fbm(p*s+vec2(5.2,1.3)-vec2(t*.1,0.)));
+vec2 w=p+(q-.5)*(.18+warp*.95);
+vec2 rpos=vec2(rp.x*asp,rp.y);float age=now-rp.z;float dr=length(p-rpos);
+float wave=rp.z<0.?0.:exp(-pow((dr-age*.75)*9.,2.))*exp(-age*1.3)*ripple;
+w+=normalize(p-rpos+1e-4)*wave*.09;
+float d=length(w-anchor);
+float rings=sin(d*26.-t*2.4)*ripple*.045*exp(-d*1.1);
+float f=1.-smoothstep(.0,.82,d+rings+(fbm(w*2.+t*.05)-.5)*.22);
+vec3 col=mix(c3,c2,smoothstep(.15,.45,f));col=mix(col,c1,smoothstep(.4,.7,f));col=mix(col,c0,smoothstep(.65,.95,f));
+col=mix(vec3(1.),col,smoothstep(.06,.5,f));
+vec2 a2=vec2(.92*asp,.1)+vec2(sin(t*.31),cos(t*.23))*.07+(vec2(m.x*asp,m.y)-home)*.1;
+float f2=1.-smoothstep(.0,.7,length(w-a2)+(fbm(w*2.4-t*.06)-.5)*.3);
+vec3 acc=mix(mix(ca,vec3(1.),.55),ca,smoothstep(.35,.9,f2));
+col=mix(col,acc,smoothstep(.05,.6,f2)*(1.-.45*smoothstep(.6,.95,f)));
+col+=(wave*.25+max(rings,0.)*1.2)*f;
+float g=hash(gl_FragCoord.xy+fract(now*7.31)*vec2(97.,57.))-.5;
+// Grain only where there is colour: the white of the card stays clean.
+float cover=max(smoothstep(.06,.5,f),smoothstep(.05,.6,f2));
+col+=g*grain*.22*cover;
+gl_FragColor=vec4(col,1.);}`;
+var rgb = (hex) => {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  const n = parseInt(full, 16);
+  return [(n >> 16 & 255) / 255, (n >> 8 & 255) / 255, (n & 255) / 255];
+};
+var HOME = { x: 0.12, y: 0.02 };
+function Keycap({
+  label,
+  down,
+  shown,
+  delay,
+  still
+}) {
+  return /* @__PURE__ */ jsxs(
+    motion.span,
+    {
+      initial: still ? false : { opacity: 0, y: 12, scale: 0.85 },
+      animate: shown ? { opacity: 1, y: 0, scale: 1 } : void 0,
+      transition: {
+        type: "spring",
+        stiffness: 380,
+        damping: 22,
+        delay: still ? 0 : delay
+      },
+      className: "relative block size-14",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-0 translate-y-1 rounded-2xl bg-[#242423]/[0.12]" }),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            animate: { y: down ? 4 : 0 },
+            transition: down ? { duration: 0.08 } : { type: "spring", stiffness: 600, damping: 18 },
+            className: "relative grid size-14 place-items-center rounded-2xl bg-white/85 text-xl font-medium text-[#242423] shadow-[inset_0_-2px_0_rgba(36,36,35,0.06)] ring-1 ring-white/80 backdrop-blur-md",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function Match({ label, query }) {
+  const at = query ? label.toLowerCase().indexOf(query.toLowerCase()) : -1;
+  if (at < 0) return /* @__PURE__ */ jsx(Fragment, { children: label });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label.slice(0, at),
+    /* @__PURE__ */ jsx("span", { className: "font-semibold text-[#242423]", children: label.slice(at, at + query.length) }),
+    label.slice(at + query.length)
+  ] });
+}
+var Kbd = ({
+  children,
+  lit
+}) => /* @__PURE__ */ jsx(
+  motion.span,
+  {
+    animate: {
+      scale: lit ? 0.88 : 1,
+      backgroundColor: lit ? "rgba(255,255,255,1)" : "rgba(255,255,255,0.7)"
+    },
+    transition: { type: "spring", stiffness: 600, damping: 22 },
+    className: "grid h-5 min-w-5 place-items-center rounded-md px-1 text-xs font-medium text-zinc-600 shadow-[0_1px_0_rgba(36,36,35,0.08)]",
+    children
+  }
+);
+var AuraCard = React.forwardRef(
+  function AuraCard2({
+    title = "Everything, one keystroke away",
+    description = "Press \u2318K from anywhere, type a few letters and run any action without leaving the keyboard.",
+    scenes = DEFAULT_SCENES,
+    keys = ["\u2318", "K"],
+    colors = DEFAULT_COLORS,
+    accent = "#ff86c8",
+    grain = 1,
+    noise = 0.5,
+    speed = 0.6,
+    ripple = 0.5,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const id = React.useId();
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const canvas = React.useRef(null);
+    const rows = React.useRef([]);
+    const seen = useInView(root, { once: true, amount: 0.3 });
+    const visible = useInView(root, { amount: 0.05 });
+    const shown = seen || still;
+    const params = React.useRef({
+      grain,
+      noise,
+      speed,
+      ripple,
+      colors,
+      accent
+    });
+    params.current = { grain, noise, speed, ripple, colors, accent };
+    const pointer = React.useRef({
+      x: HOME.x,
+      y: HOME.y,
+      tx: HOME.x,
+      ty: HOME.y
+    });
+    const wave = React.useRef({ x: 0, y: 0, at: -1 });
+    const clock = React.useRef({ t: 0, now: 0, last: 0 });
+    const pulse = React.useCallback((x, y) => {
+      const el = root.current;
+      if (!el) return;
+      wave.current = {
+        x: x / el.clientWidth,
+        y: 1 - y / el.clientHeight,
+        at: clock.current.now
+      };
+    }, []);
+    const pulseFrom = React.useCallback(
+      (el) => {
+        const box = root.current?.getBoundingClientRect();
+        if (!el || !box) return;
+        const r = el.getBoundingClientRect();
+        pulse(r.left - box.left + r.width / 2, r.top - box.top + r.height / 2);
+      },
+      [pulse]
+    );
+    React.useEffect(() => {
+      const el = canvas.current;
+      if (!el) return;
+      const gl = el.getContext("webgl", {
+        antialias: false,
+        premultipliedAlpha: false
+      });
+      if (!gl) {
+        const c = params.current.colors;
+        el.style.background = `radial-gradient(70% 55% at 95% 95%, ${params.current.accent}, transparent 70%), radial-gradient(120% 90% at 10% 100%, ${c[0]}, ${c[1]} 30%, ${c[2]} 50%, #fff 75%)`;
+        return;
+      }
+      const compile = (type, src) => {
+        const s = gl.createShader(type);
+        gl.shaderSource(s, src);
+        gl.compileShader(s);
+        return s;
+      };
+      const prog = gl.createProgram();
+      gl.attachShader(prog, compile(gl.VERTEX_SHADER, VERTEX));
+      gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FRAGMENT));
+      gl.linkProgram(prog);
+      gl.useProgram(prog);
+      gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+        gl.STATIC_DRAW
+      );
+      const at = gl.getAttribLocation(prog, "p");
+      gl.enableVertexAttribArray(at);
+      gl.vertexAttribPointer(at, 2, gl.FLOAT, false, 0, 0);
+      const u = (n) => gl.getUniformLocation(prog, n);
+      const U = {
+        r: u("r"),
+        t: u("t"),
+        now: u("now"),
+        warp: u("warp"),
+        grain: u("grain"),
+        ripple: u("ripple"),
+        m: u("m"),
+        rp: u("rp"),
+        c0: u("c0"),
+        c1: u("c1"),
+        c2: u("c2"),
+        c3: u("c3"),
+        ca: u("ca")
+      };
+      const draw = () => {
+        const dpr = Math.min(1.5, window.devicePixelRatio || 1);
+        const w = Math.max(1, Math.round(el.clientWidth * dpr));
+        const h = Math.max(1, Math.round(el.clientHeight * dpr));
+        if (el.width !== w || el.height !== h) {
+          el.width = w;
+          el.height = h;
+        }
+        const p = params.current;
+        const ptr = pointer.current;
+        const wv = wave.current;
+        gl.viewport(0, 0, w, h);
+        gl.uniform2f(U.r, w, h);
+        gl.uniform1f(U.t, clock.current.t);
+        gl.uniform1f(U.now, clock.current.now);
+        gl.uniform1f(U.warp, p.noise);
+        gl.uniform1f(U.grain, p.grain);
+        gl.uniform1f(U.ripple, p.ripple);
+        gl.uniform2f(U.m, ptr.x, ptr.y);
+        gl.uniform3f(U.rp, wv.x, wv.y, wv.at);
+        gl.uniform3fv(U.c0, rgb(p.colors[0]));
+        gl.uniform3fv(U.c1, rgb(p.colors[1]));
+        gl.uniform3fv(U.c2, rgb(p.colors[2]));
+        gl.uniform3fv(U.c3, rgb(p.colors[3]));
+        gl.uniform3fv(U.ca, rgb(p.accent));
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      };
+      if (still) {
+        clock.current.t = 3;
+        draw();
+        return;
+      }
+      if (!visible) {
+        draw();
+        return;
+      }
+      let raf = 0;
+      clock.current.last = performance.now();
+      const frame = (ms) => {
+        raf = requestAnimationFrame(frame);
+        if (document.hidden) return;
+        const dt = Math.min(0.05, (ms - clock.current.last) / 1e3);
+        clock.current.last = ms;
+        clock.current.now += dt;
+        clock.current.t += dt * params.current.speed;
+        const ptr = pointer.current;
+        const k = 1 - Math.exp(-dt * 3);
+        ptr.x += (ptr.tx - ptr.x) * k;
+        ptr.y += (ptr.ty - ptr.y) * k;
+        draw();
+      };
+      raf = requestAnimationFrame(frame);
+      return () => cancelAnimationFrame(raf);
+    }, [still, visible]);
+    const [scene, setScene] = React.useState(0);
+    const [typed, setTyped] = React.useState(
+      still ? scenes[0]?.query ?? "" : ""
+    );
+    const [listed, setListed] = React.useState(still);
+    const [active, setActive] = React.useState(
+      still ? scenes[0]?.pick ?? 0 : 0
+    );
+    const [ran, setRan] = React.useState(false);
+    const [key, setKey] = React.useState(
+      null
+    );
+    const [paused, setPaused] = React.useState(false);
+    const current = scenes[scene % Math.max(1, scenes.length)];
+    const run = React.useCallback(
+      (i) => {
+        setActive(i);
+        setRan(true);
+        pulseFrom(rows.current[i]);
+      },
+      [pulseFrom]
+    );
+    React.useEffect(() => {
+      if (still || !seen || !visible || paused || !current) return;
+      const timers = [];
+      let at = 0;
+      const after = (ms, fn) => {
+        at += ms;
+        timers.push(window.setTimeout(fn, at));
+      };
+      setTyped("");
+      setListed(false);
+      setRan(false);
+      setActive(0);
+      after(400, () => setKey("cmd"));
+      after(140, () => setKey("k"));
+      after(160, () => setKey(null));
+      for (let i = 1; i <= current.query.length; i++)
+        after(i === 1 ? 300 : 70 + Math.random() * 60, () => {
+          setTyped(current.query.slice(0, i));
+          if (i === 2) setListed(true);
+        });
+      after(10, () => setListed(true));
+      const pick = Math.min(current.pick ?? 0, current.results.length - 1);
+      for (let i = 1; i <= pick; i++) {
+        after(i === 1 ? 650 : 420, () => {
+          setKey("down");
+          setActive(i);
+        });
+        after(120, () => setKey(null));
+      }
+      after(700, () => {
+        setKey("enter");
+        run(pick);
+      });
+      after(140, () => setKey(null));
+      after(1300, () => setListed(false));
+      after(450, () => setScene((n) => (n + 1) % scenes.length));
+      return () => timers.forEach((t) => window.clearTimeout(t));
+    }, [scene, seen, visible, still, paused]);
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: root,
+        initial: still ? false : { opacity: 0, y: 18 },
+        animate: shown ? { opacity: 1, y: 0 } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        onPointerMove: (e) => {
+          const r = e.currentTarget.getBoundingClientRect();
+          pointer.current.tx = (e.clientX - r.left) / r.width;
+          pointer.current.ty = 1 - (e.clientY - r.top) / r.height;
+        },
+        onPointerLeave: () => {
+          pointer.current.tx = HOME.x;
+          pointer.current.ty = HOME.y;
+        },
+        onPointerDown: (e) => {
+          if (e.target.closest("[data-palette]")) return;
+          const r = e.currentTarget.getBoundingClientRect();
+          pulse(e.clientX - r.left, e.clientY - r.top);
+        },
+        className: cn(
+          "relative isolate h-[480px] w-[400px] max-w-full overflow-hidden rounded-[32px] bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "canvas",
+            {
+              ref: canvas,
+              "aria-hidden": true,
+              className: "absolute inset-0 -z-10 size-full"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "px-7 pt-7", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold tracking-tight", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-[300px] text-pretty text-sm leading-relaxed text-zinc-600", children: description })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "mt-7 flex justify-center gap-2.5", children: [
+            /* @__PURE__ */ jsx(
+              Keycap,
+              {
+                label: keys[0],
+                down: key === "cmd" || key === "k",
+                shown,
+                delay: 0.35,
+                still
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Keycap,
+              {
+                label: keys[1],
+                down: key === "k",
+                shown,
+                delay: 0.43,
+                still
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              "data-palette": true,
+              onPointerEnter: () => setPaused(true),
+              onPointerLeave: () => setPaused(false),
+              initial: still ? false : { opacity: 0, y: 24, filter: "blur(8px)" },
+              animate: shown ? {
+                opacity: 1,
+                y: 0,
+                filter: "blur(0px)",
+                scale: key === "k" ? 0.985 : 1
+              } : void 0,
+              transition: {
+                duration: 0.6,
+                ease: GLIDE,
+                delay: still || seen ? 0 : 0.2,
+                scale: { type: "spring", stiffness: 500, damping: 20 }
+              },
+              className: "absolute inset-x-5 bottom-5 rounded-3xl bg-white/60 p-2 shadow-[0_12px_40px_-16px_rgba(20,30,90,0.35)] ring-1 ring-white/70 backdrop-blur-xl",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: current ? `Command palette: ${current.query}` : "" }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "flex h-12 items-center gap-2.5 rounded-2xl bg-white/85 px-3.5 shadow-[0_1px_2px_rgba(0,0,0,0.05)]",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        SearchIcon,
+                        {
+                          className: "size-4 text-zinc-400",
+                          active: typed.length > 0 && typed.length < 3
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center text-sm text-[#242423]", children: [
+                        /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            initial: { opacity: 0 },
+                            animate: { opacity: 1 },
+                            exit: { opacity: 0, filter: "blur(4px)" },
+                            transition: { duration: 0.2 },
+                            className: cn("truncate", !typed && "text-zinc-400"),
+                            children: typed || "Type a command or search"
+                          },
+                          typed ? `q-${scene}` : "empty"
+                        ) }),
+                        !still && typed && !ran && /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            className: "ml-px inline-block h-4 w-px bg-[#242423]",
+                            animate: { opacity: [1, 1, 0, 0] },
+                            transition: {
+                              duration: 1,
+                              repeat: Infinity,
+                              times: [0, 0.5, 0.5, 1]
+                            }
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "flex gap-1", children: [
+                        /* @__PURE__ */ jsx(Kbd, { lit: key === "cmd" || key === "k", children: keys[0] }),
+                        /* @__PURE__ */ jsx(Kbd, { lit: key === "k", children: keys[1] })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "relative mt-1.5 h-[132px]", children: /* @__PURE__ */ jsx(AnimatePresence, { children: listed && current && /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: "absolute inset-0 flex flex-col gap-0.5",
+                    exit: {
+                      opacity: 0,
+                      filter: "blur(6px)",
+                      y: -4,
+                      transition: { duration: 0.3 }
+                    },
+                    children: current.results.slice(0, 3).map((res, i) => {
+                      const Icon = ICONS[res.icon];
+                      const on = active === i;
+                      return /* @__PURE__ */ jsxs(
+                        motion.div,
+                        {
+                          ref: (el) => {
+                            rows.current[i] = el;
+                          },
+                          role: "button",
+                          tabIndex: -1,
+                          onPointerEnter: () => {
+                            setActive(i);
+                            setRan(false);
+                          },
+                          onClick: () => run(i),
+                          initial: still ? false : { opacity: 0, y: 6, filter: "blur(4px)" },
+                          animate: {
+                            opacity: 1,
+                            y: 0,
+                            filter: "blur(0px)",
+                            scale: on && ran ? [1, 0.97, 1] : 1
+                          },
+                          transition: {
+                            duration: 0.3,
+                            ease: GLIDE,
+                            delay: still ? 0 : i * 0.05
+                          },
+                          className: "relative flex h-10 cursor-pointer items-center gap-3 rounded-xl px-2 text-sm",
+                          children: [
+                            on && /* @__PURE__ */ jsx(
+                              motion.span,
+                              {
+                                layoutId: `${id}-row`,
+                                className: "absolute inset-0 rounded-xl bg-white/90 shadow-[0_1px_2px_rgba(0,0,0,0.06)]",
+                                transition: still ? { duration: 0 } : PILL
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "relative grid size-7 place-items-center rounded-lg transition-colors",
+                                  on ? "bg-white" : "bg-white/60 text-zinc-500"
+                                ),
+                                style: on ? { color: colors[0] } : void 0,
+                                children: /* @__PURE__ */ jsx(Icon, { className: "size-4", active: on && ran })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn(
+                                  "relative min-w-0 flex-1 truncate",
+                                  on ? "text-[#242423]" : "text-zinc-600"
+                                ),
+                                children: /* @__PURE__ */ jsx(Match, { label: res.label, query: typed })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx("span", { className: "relative", children: on ? /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                              motion.span,
+                              {
+                                initial: { opacity: 0, scale: 0.6 },
+                                animate: { opacity: 1, scale: 1 },
+                                exit: { opacity: 0, scale: 0.6 },
+                                transition: {
+                                  type: "spring",
+                                  stiffness: 600,
+                                  damping: 26
+                                },
+                                className: "grid",
+                                children: ran ? /* @__PURE__ */ jsx("span", { className: "grid size-5 place-items-center rounded-md bg-[#269a5a] text-white", children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", active: true }) }) : /* @__PURE__ */ jsx(Kbd, { lit: key === "enter", children: "\u21B5" })
+                              },
+                              ran ? "done" : "enter"
+                            ) }) : res.hint ? /* @__PURE__ */ jsx("span", { className: "text-xs tracking-wide text-zinc-400", children: res.hint }) : null })
+                          ]
+                        },
+                        res.label
+                      );
+                    })
+                  },
+                  `list-${scene}`
+                ) }) }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    "aria-hidden": true,
+                    className: "mt-1 flex items-center justify-between px-2 pb-1 pt-1 text-xs text-zinc-500",
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx(Kbd, { children: "\u2191" }),
+                        /* @__PURE__ */ jsx(Kbd, { lit: key === "down", children: "\u2193" }),
+                        "to move"
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx(Kbd, { lit: key === "enter", children: "\u21B5" }),
+                        "to run"
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  AuraCard
+};