@togo-framework/ui 0.1.6 → 0.1.7

package/dist/index.d.ts

@@ -4104,10 +4104,12 @@ interface TypingTerminalProps {
     typeMs?: number;
     /** ms between streamed output lines. */
     lineMs?: number;
-    /** Loop the playback (default true). */
+    /** Loop the playback. Default false — plays once, then offers Replay. */
     loop?: boolean;
+    /** Fixed body height (px). The window never grows/jumps while typing. */
+    height?: number;
 }
-declare function TypingTerminal({ steps, endSlot, title, className, typeMs, lineMs, loop }: TypingTerminalProps): React$1.JSX.Element;
+declare function TypingTerminal({ steps, endSlot, title, className, typeMs, lineMs, loop, height }: TypingTerminalProps): React$1.JSX.Element;
 declare namespace TypingTerminal {
     var displayName: string;
 }

package/dist/index.js

@@ -16269,6 +16269,7 @@ CommandPalette.displayName = "CommandPalette";
 
 // src/components/marketing/Terminal.tsx
 import * as React32 from "react";
+import { RotateCcw as RotateCcw3 } from "lucide-react";
 import { jsx as jsx101, jsxs as jsxs89 } from "react/jsx-runtime";
 function fullFrame(steps) {
   const lines = [];
@@ -16284,16 +16285,25 @@ function fullFrame(steps) {
   return { lines, showEnd: true };
 }
 var keepStaticFrame = () => typeof window !== "undefined" && (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || navigator?.webdriver === true);
-function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", className, typeMs = 26, lineMs = 110, loop = true }) {
+function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", className, typeMs = 26, lineMs = 110, loop = false, height = 360 }) {
   const [frame, setFrame] = React32.useState(() => fullFrame(steps));
+  const [done, setDone] = React32.useState(false);
+  const [runId, setRunId] = React32.useState(0);
   const scrollRef = React32.useRef(null);
   React32.useEffect(() => {
-    if (keepStaticFrame()) return;
+    if (keepStaticFrame()) {
+      setDone(true);
+      return;
+    }
     let alive = true;
     const timers = [];
     const wait = (ms) => new Promise((res) => timers.push(setTimeout(res, ms)));
+    const toBottom = () => {
+      if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    };
     async function run() {
-      while (alive) {
+      setDone(false);
+      do {
         const lines = [];
         setFrame({ lines: [], showEnd: false });
         for (let i = 0; i < steps.length && alive; i++) {
@@ -16308,6 +16318,7 @@ function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", classNa
               ] }, `c${i}`)],
               showEnd: false
             });
+            toBottom();
             await wait(typeMs);
           }
           lines.push(/* @__PURE__ */ jsxs89("div", { className: "whitespace-pre-wrap break-words", children: [
@@ -16318,31 +16329,47 @@ function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", classNa
           for (let j = 0; j < (s.out?.length || 0) && alive; j++) {
             lines.push(/* @__PURE__ */ jsx101("div", { className: "whitespace-pre-wrap break-words text-muted-foreground", children: s.out[j] }, `o${i}-${j}`));
             setFrame({ lines: [...lines], showEnd: false });
-            if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+            toBottom();
             await wait(lineMs);
           }
         }
         if (!alive) return;
         setFrame({ lines: [...lines], showEnd: true });
-        if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-        if (!loop) return;
+        toBottom();
+        if (!loop) {
+          setDone(true);
+          return;
+        }
         await wait(4200);
-      }
+      } while (alive);
     }
     run();
     return () => {
       alive = false;
       timers.forEach(clearTimeout);
     };
-  }, [steps, typeMs, lineMs, loop]);
+  }, [steps, typeMs, lineMs, loop, runId]);
   return /* @__PURE__ */ jsxs89("div", { className: cn("rounded-2xl border border-border overflow-hidden bg-[#080b0f] shadow-2xl", className), children: [
     /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-2 px-4 py-3 border-b border-border", children: [
       /* @__PURE__ */ jsx101("span", { className: "w-3 h-3 rounded-full bg-[#ff5f57]" }),
       /* @__PURE__ */ jsx101("span", { className: "w-3 h-3 rounded-full bg-[#febc2e]" }),
       /* @__PURE__ */ jsx101("span", { className: "w-3 h-3 rounded-full bg-[#28c840]" }),
-      /* @__PURE__ */ jsx101("span", { className: "ms-2 font-mono text-xs text-muted-foreground", children: title })
+      /* @__PURE__ */ jsx101("span", { className: "ms-2 font-mono text-xs text-muted-foreground", children: title }),
+      done && !loop && /* @__PURE__ */ jsxs89(
+        "button",
+        {
+          type: "button",
+          onClick: () => setRunId((n) => n + 1),
+          className: "ms-auto inline-flex items-center gap-1.5 rounded-md border border-white/12 bg-white/[0.04] px-2.5 py-1 font-mono text-[11px] text-muted-foreground hover:text-foreground hover:bg-white/[0.08] transition-colors",
+          "aria-label": "Replay the terminal demo",
+          children: [
+            /* @__PURE__ */ jsx101(RotateCcw3, { size: 12 }),
+            " Replay"
+          ]
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs89("div", { ref: scrollRef, className: "p-5 font-mono text-[12.5px] sm:text-[13px] leading-[1.9] max-h-[340px] overflow-auto", children: [
+    /* @__PURE__ */ jsxs89("div", { ref: scrollRef, className: "p-5 font-mono text-[12.5px] sm:text-[13px] leading-[1.9] overflow-auto", style: { height }, children: [
       frame.lines,
       frame.showEnd && endSlot ? /* @__PURE__ */ jsx101("div", { className: "mt-4 pt-4 border-t border-white/10", children: endSlot }) : null
     ] })
@@ -16351,26 +16378,103 @@ function TypingTerminal({ steps, endSlot, title = "~/myapp \u2014 togo", classNa
 TypingTerminal.displayName = "TypingTerminal";
 
 // src/components/marketing/MascotMark.tsx
+import * as React33 from "react";
 import { jsx as jsx102, jsxs as jsxs90 } from "react/jsx-runtime";
+var EYES = [
+  { x: 0.405, y: 0.45 },
+  { x: 0.595, y: 0.45 }
+];
+var EYE_W = 0.085;
+var PUPIL_RATIO = 0.52;
+var MAX_OFF = (1 - PUPIL_RATIO) / 2 * 100;
 var KEYFRAMES = `
 @keyframes tgMascotFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
-@keyframes tgMascotChar {
-  0%,100%   { transform: rotate(0deg) scaleX(1) scaleY(1); }
-  44%       { transform: rotate(0deg) scaleX(1) scaleY(1); }
-  48%       { transform: rotate(-3deg) scaleX(1.04) scaleY(0.92); } /* squash nod */
-  52%       { transform: rotate(-3deg) scaleX(0.98) scaleY(1.05); } /* stretch */
-  60%       { transform: rotate(3deg)  scaleX(1) scaleY(1); }
-  72%       { transform: rotate(0deg)  scaleX(1) scaleY(1); }
-}
 .tg-mascot { will-change: transform; animation: tgMascotFloat 6s ease-in-out infinite; }
-.tg-mascot > img { display:block; width:100%; height:100%; transform-origin: 50% 70%; animation: tgMascotChar 5.5s ease-in-out infinite; }
-@media (prefers-reduced-motion: reduce) {
-  .tg-mascot, .tg-mascot > img { animation: none !important; }
-}`;
+@media (prefers-reduced-motion: reduce) { .tg-mascot { animation: none !important; } }`;
 function MascotMark({ src = "/togo-mark.svg", alt = "ToGO", className }) {
-  return /* @__PURE__ */ jsxs90("div", { className: cn("tg-mascot", className), children: [
+  const ref = React33.useRef(null);
+  const [active, setActive] = React33.useState(false);
+  const [look, setLook] = React33.useState({ dx: 0, dy: 0 });
+  React33.useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;
+    setActive(true);
+    let raf = 0;
+    const onMove = (e) => {
+      const el = ref.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const cx = r.left + r.width / 2;
+      const cy = r.top + r.height * 0.45;
+      const dx = Math.max(-1, Math.min(1, (e.clientX - cx) / (r.width * 0.85)));
+      const dy = Math.max(-1, Math.min(1, (e.clientY - cy) / (r.height * 0.85)));
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => setLook({ dx, dy }));
+    };
+    const recenter = () => setLook({ dx: 0, dy: 0 });
+    window.addEventListener("pointermove", onMove, { passive: true });
+    window.addEventListener("pointerleave", recenter);
+    document.addEventListener("mouseleave", recenter);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerleave", recenter);
+      document.removeEventListener("mouseleave", recenter);
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+  const tilt = active ? look.dx * 4 : 0;
+  return /* @__PURE__ */ jsxs90("div", { ref, className: cn("tg-mascot", className), style: { position: "relative", display: "inline-block" }, children: [
     /* @__PURE__ */ jsx102("style", { children: KEYFRAMES }),
-    /* @__PURE__ */ jsx102("img", { src, alt, draggable: false })
+    /* @__PURE__ */ jsxs90(
+      "div",
+      {
+        style: {
+          position: "relative",
+          transform: active ? `rotate(${tilt}deg)` : void 0,
+          transformOrigin: "50% 75%",
+          transition: "transform .25s ease-out"
+        },
+        children: [
+          /* @__PURE__ */ jsx102("img", { src, alt, draggable: false, style: { display: "block", width: "100%", height: "100%" } }),
+          active && EYES.map((eye, i) => /* @__PURE__ */ jsx102(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: {
+                position: "absolute",
+                left: `${eye.x * 100}%`,
+                top: `${eye.y * 100}%`,
+                width: `${EYE_W * 100}%`,
+                aspectRatio: "1",
+                transform: "translate(-50%,-50%)",
+                borderRadius: "9999px",
+                background: "rgba(255,255,255,.94)",
+                boxShadow: "inset 0 2px 4px rgba(8,16,40,.28)"
+              },
+              children: /* @__PURE__ */ jsx102(
+                "span",
+                {
+                  style: {
+                    position: "absolute",
+                    left: `${50 + look.dx * MAX_OFF}%`,
+                    top: `${50 + look.dy * MAX_OFF}%`,
+                    width: `${PUPIL_RATIO * 100}%`,
+                    aspectRatio: "1",
+                    transform: "translate(-50%,-50%)",
+                    borderRadius: "9999px",
+                    background: "#0a1733",
+                    boxShadow: "inset 1.5px -1.5px 2px rgba(255,255,255,.35)",
+                    transition: "left .12s ease-out, top .12s ease-out"
+                  }
+                }
+              )
+            },
+            i
+          ))
+        ]
+      }
+    )
   ] });
 }
 MascotMark.displayName = "MascotMark";