@vibes.diy/base 14.3.106 → 14.3.109

package/components/vibe-menu/parts/ThinkingLine.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { BRIEF_FACES } from "./brief-faces-art.js";
+export function formatBuildElapsed(elapsedMs) {
+    const clamped = Number.isFinite(elapsedMs) ? Math.max(0, Math.floor(elapsedMs / 1000)) : 0;
+    const seconds = clamped % 60;
+    const minutes = Math.floor(clamped / 60) % 60;
+    const hours = Math.floor(clamped / 3600);
+    const two = (n) => (n < 10 ? `0${n}` : `${n}`);
+    if (hours > 0)
+        return `${hours}:${two(minutes)}:${two(seconds)}`;
+    return `${two(minutes)}:${two(seconds)}`;
+}
+const FACES_CSS = `
+  .thinking-line-face {
+    grid-area: 1 / 1; width: 100%; height: 100%; opacity: 0;
+    animation: thinking-line-faces ${(BRIEF_FACES.length * 0.35).toFixed(2)}s steps(1) infinite;
+  }
+  .thinking-line-face path { fill: var(--faces-ink, light-dark(#000, #fff)); }
+  @keyframes thinking-line-faces {
+    0% { opacity: 1; }
+    ${(100 / BRIEF_FACES.length).toFixed(3)}% { opacity: 0; }
+    100% { opacity: 0; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .thinking-line-face { animation: none; }
+    .thinking-line-face:first-child { opacity: 1; }
+  }
+`;
+export function FacesGlyph({ size = 18, ink = "contrast", style }) {
+    const inkVar = ink === "current" ? { "--faces-ink": "currentColor" } : null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("style", null, FACES_CSS),
+        React.createElement("span", { "aria-hidden": true, className: "vm-faces", "data-testid": "thinking-line-glyph", style: { display: "grid", width: size, height: size, flexShrink: 0, ...inkVar, ...style } }, BRIEF_FACES.map((face, index) => (React.createElement("svg", { key: face.viewBox, className: "thinking-line-face", style: { animationDelay: `${(index * 0.35).toFixed(2)}s` }, viewBox: face.viewBox, fill: "none", preserveAspectRatio: "xMidYMid meet" }, face.paths.map((path, pathIndex) => (React.createElement("path", { key: pathIndex, ...path })))))))));
+}
+export function useElapsedText(startedAtMs, stoppedAtMs) {
+    const [now, setNow] = useState(undefined);
+    const stopped = stoppedAtMs !== undefined;
+    useEffect(() => {
+        if (startedAtMs === undefined || stopped)
+            return;
+        setNow(Date.now());
+        const id = setInterval(() => {
+            setNow(Date.now());
+        }, 1000);
+        const onVisible = () => {
+            setNow(Date.now());
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => {
+            clearInterval(id);
+            document.removeEventListener("visibilitychange", onVisible);
+        };
+    }, [startedAtMs, stopped]);
+    if (startedAtMs === undefined)
+        return undefined;
+    if (stoppedAtMs !== undefined)
+        return formatBuildElapsed(Math.max(0, stoppedAtMs - startedAtMs));
+    if (now === undefined)
+        return undefined;
+    return formatBuildElapsed(now - startedAtMs);
+}
+export function LiveThinkingLine({ verb, startedAtMs, stoppedAtMs, ink, }) {
+    return (React.createElement(ThinkingLine, { verb: verb, wrapping: stoppedAtMs !== undefined, elapsed: useElapsedText(startedAtMs, stoppedAtMs), ink: ink }));
+}
+export function ThinkingLine({ verb, elapsed, complete = false, wrapping = false, ink }) {
+    const word = complete ? "Vibe is ready, enjoy." : (verb ?? "Waiting for a response");
+    return (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: "flex w-full min-w-0 items-baseline gap-2", "data-testid": "thinking-line" },
+            complete === false && wrapping === false && (React.createElement(FacesGlyph, { size: 18, ink: ink, style: { alignSelf: "flex-start", marginTop: "calc(0.75em - 9px)" } })),
+            complete === false && elapsed !== undefined && (React.createElement("span", { "aria-hidden": true, className: "min-w-0 shrink-0", "data-testid": "thinking-line-elapsed", style: { fontVariantNumeric: "tabular-nums" } }, elapsed)),
+            complete === false && elapsed !== undefined && (React.createElement("span", { "aria-hidden": true, className: "shrink-0" }, "\u00B7")),
+            React.createElement("span", { role: "status", "aria-live": "polite", className: "min-w-0 truncate", "data-testid": "thinking-line-verb", title: word },
+                word,
+                complete === false && wrapping === false ? "…" : ""))));
+}
+//# sourceMappingURL=ThinkingLine.js.map

package/components/vibe-menu/parts/ThinkingLine.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingLine.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/parts/ThinkingLine.tsx"],"names":[],"mappings":"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"}

package/components/vibe-menu/parts/brief-faces-art.d.ts

@@ -0,0 +1,12 @@
+export interface BriefMotifPath {
+    readonly d: string;
+    readonly fill: string;
+    readonly stroke?: string;
+    readonly strokeWidth?: number;
+    readonly transform?: string;
+}
+export interface BriefMotif {
+    readonly viewBox: string;
+    readonly paths: readonly BriefMotifPath[];
+}
+export declare const BRIEF_FACES: readonly BriefMotif[];