ecklf 1.0.0 → 1.0.1

package/dist/App.js

@@ -79,7 +79,7 @@ export const App = () => {
     const d = data;
     const projects = d.projects;
     const current = projects[selected];
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, justifyContent: "center", children: [_jsx(Box, { children: _jsx(Greeting, {}) }), _jsx(Text, { bold: true, color: "whiteBright", children: d.name }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: d.tagline }), _jsx(Text, { color: "gray", children: d.subtitle })] })] }), _jsx(Box, { width: 28, height: 14, justifyContent: "flex-end", children: _jsx(Knot, { cols: 26, rows: 14 }) })] }), _jsxs(Box, { marginTop: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "whiteBright", children: "Projects" }), _jsxs(Text, { color: "gray", children: ["  ", d.source === "live" ? "● live" : "○ offline"] })] }), _jsx(Box, { flexDirection: "column", children: projects.map((p, i) => {
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Box, { height: 1, children: _jsx(Greeting, {}) }), _jsx(Text, { bold: true, color: "whiteBright", children: d.name }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: "gray", children: d.tagline }), _jsx(Text, { color: "gray", children: d.subtitle })] })] }), _jsx(Box, { width: 28, height: 14, justifyContent: "flex-end", children: _jsx(Knot, { cols: 26, rows: 14 }) })] }), _jsxs(Box, { marginTop: 1, marginBottom: 1, children: [_jsx(Text, { bold: true, color: "whiteBright", children: "Projects" }), _jsxs(Text, { color: "gray", children: ["  ", d.source === "live" ? "● live" : "○ offline"] })] }), _jsx(Box, { flexDirection: "column", children: projects.map((p, i) => {
                     const active = i === selected;
                     return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { children: [_jsx(Text, { color: active ? ACCENT : "gray", children: active ? "❯ " : "  " }), _jsx(Text, { bold: true, color: active ? "whiteBright" : "white", children: p.title })] }), active && (_jsx(Box, { marginLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: p.description }) }))] }, p.github));
                 }) }), mode === "action" && (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["Open ", _jsx(Text, { color: "whiteBright", children: current.title }), " \u2192"] }), _jsxs(Box, { marginTop: 0, children: [_jsx(Text, { color: actionChoice === 0 ? "black" : ACCENT, backgroundColor: actionChoice === 0 ? ACCENT : undefined, children: " Website " }), _jsx(Text, { children: " " }), _jsx(Text, { color: actionChoice === 1 ? "black" : ACCENT, backgroundColor: actionChoice === 1 ? ACCENT : undefined, children: " GitHub " })] })] })), opened && mode === "list" && (_jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: "greenBright", children: "\u2197 opened " }), _jsx(Text, { color: "gray", children: opened })] })), _jsx(Box, { marginTop: 1, children: mode === "list" ? (_jsx(Text, { color: "gray", dimColor: true, children: "\u2191/\u2193 navigate \u00B7 \u21B5 open\u2026 \u00B7 w website \u00B7 g github \u00B7 q quit" })) : (_jsx(Text, { color: "gray", dimColor: true, children: "\u2190/\u2192 choose \u00B7 \u21B5 confirm \u00B7 esc back" })) })] }));

package/dist/Greeting.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
 import { Text } from "ink";
+import { useClock } from "./hooks.js";
 // Multi-language greetings, cycled with a typewriter effect — mirrors the
 // animated headline on ecklf.com.
 const GREETINGS = [
@@ -17,46 +17,45 @@ const GREETINGS = [
     "Hej",
     "Merhaba",
 ];
-export const Greeting = () => {
-    const [index, setIndex] = useState(0);
-    const [text, setText] = useState("");
-    const [phase, setPhase] = useState("typing");
-    const [cursorOn, setCursorOn] = useState(true);
-    const timer = useRef();
-    // Blinking cursor.
-    useEffect(() => {
-        const id = setInterval(() => setCursorOn((c) => !c), 450);
-        return () => clearInterval(id);
-    }, []);
-    useEffect(() => {
-        const word = GREETINGS[index];
-        const schedule = (fn, ms) => {
-            timer.current = setTimeout(fn, ms);
-        };
-        if (phase === "typing") {
-            if (text.length < word.length) {
-                schedule(() => setText(word.slice(0, text.length + 1)), 90);
-            }
-            else {
-                setPhase("holding");
-            }
-        }
-        else if (phase === "holding") {
-            schedule(() => setPhase("deleting"), 1400);
-        }
-        else {
-            if (text.length > 0) {
-                schedule(() => setText(word.slice(0, text.length - 1)), 45);
+const TYPE_MS = 110; // per character while typing
+const DELETE_MS = 50; // per character while deleting
+const HOLD_MS = 1300; // pause once fully typed
+/**
+ * Derive the typewriter state purely from elapsed time. Driven by a single
+ * clock so there is no setTimeout/re-render race.
+ */
+function compute(ms) {
+    let t = ms;
+    let i = 0;
+    // Walk through words until we land inside the current cycle.
+    // Guard against runaway loops by bounding iterations.
+    for (let guard = 0; guard < 100000; guard++) {
+        const word = GREETINGS[i % GREETINGS.length];
+        const typeDur = word.length * TYPE_MS;
+        const deleteDur = word.length * DELETE_MS;
+        const cycle = typeDur + HOLD_MS + deleteDur;
+        if (t < cycle) {
+            if (t < typeDur) {
+                const chars = Math.floor(t / TYPE_MS) + 1;
+                return { text: word.slice(0, Math.min(chars, word.length)), word };
             }
-            else {
-                setIndex((i) => (i + 1) % GREETINGS.length);
-                setPhase("typing");
+            if (t < typeDur + HOLD_MS) {
+                return { text: word, word };
             }
+            const dt = t - typeDur - HOLD_MS;
+            const removed = Math.floor(dt / DELETE_MS) + 1;
+            const len = Math.max(0, word.length - removed);
+            return { text: word.slice(0, len), word };
         }
-        return () => {
-            if (timer.current)
-                clearTimeout(timer.current);
-        };
-    }, [text, phase, index]);
+        t -= cycle;
+        i++;
+    }
+    return { text: "", word: GREETINGS[0] };
+}
+export const Greeting = () => {
+    const seconds = useClock(20);
+    const ms = seconds * 1000;
+    const { text } = compute(ms);
+    const cursorOn = Math.floor(seconds * 2) % 2 === 0;
     return (_jsxs(Text, { bold: true, color: "white", children: [text, _jsx(Text, { color: "cyanBright", children: cursorOn ? "▋" : " " })] }));
 };

package/dist/cli.js

@@ -20,7 +20,7 @@ if (args.includes("--help") || args.includes("-h")) {
     process.exit(0);
 }
 if (args.includes("--version") || args.includes("-v")) {
-    console.log("1.0.0");
+    console.log("1.0.1");
     process.exit(0);
 }
 if (!process.stdin.isTTY) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecklf",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A terminal UI for ecklf.com — browse Florentin's projects and open them on the web or GitHub, with a spinning ASCII wireframe and typed greetings.",
   "keywords": [
     "ecklf",