@frixaco/anitrack 0.0.6 → 0.0.8

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@frixaco/anitrack",
-  "version": "0.0.6",
-  "module": "index.ts",
+  "version": "0.0.8",
   "type": "module",
   "bin": {
     "anitrack": "./index.ts"
   },
   "files": [
     "index.ts",
-    "colors.ts"
+    "colors.ts",
+    "progress-bar.ts",
+    "README.md"
   ],
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "bun run index.ts"
   },
   "dependencies": {
-    "@frixaco/letui": "^0.0.10"
+    "@frixaco/letui": "^0.0.11"
   },
   "devDependencies": {
-    "@types/bun": "1.3.5"
-  },
-  "peerDependencies": {
-    "typescript": "^5"
+    "@types/bun": "1.3.9"
   }
 }

package/progress-bar.ts

@@ -0,0 +1,100 @@
+import type { Node } from "@frixaco/letui";
+import { $, ff, Row, Text } from "@frixaco/letui";
+
+export type LoadingBarProps = {
+  dotColor: number;
+  trackColor: number;
+  flexGrow?: number;
+  interval?: number; // ms between frames
+};
+
+export type LoadingBarController = {
+  node: Node;
+  start: () => void;
+  stop: () => void;
+};
+
+export function LoadingBar(props: LoadingBarProps): LoadingBarController {
+  const { dotColor, trackColor, flexGrow = 1, interval = 80 } = props;
+
+  const position = $(0);
+  const direction = $(1); // 1 = right, -1 = left
+  const active = $(false);
+  let timer: Timer | null = null;
+
+  const leftTrack = Text({
+    text: "",
+    background: trackColor,
+    foreground: trackColor,
+  });
+  const dot = Text({ text: "", background: dotColor, foreground: dotColor });
+  const rightTrack = Text({
+    text: "",
+    background: trackColor,
+    foreground: trackColor,
+  });
+
+  const node = Row({ flexGrow }, [leftTrack, dot, rightTrack]);
+
+  // React to position changes
+  ff(() => {
+    const isActive = active();
+    const pos = position();
+    const width = node.frameWidth();
+    if (width === 0 || !isActive) return;
+
+    const maxPos = width - 1;
+    const clampedPos = Math.max(0, Math.min(pos, maxPos));
+
+    leftTrack.setStyle?.({ text: " ".repeat(clampedPos) });
+    dot.setStyle?.({ text: " " });
+    rightTrack.setStyle?.({ text: " ".repeat(maxPos - clampedPos) });
+  });
+
+  function clearTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  function start() {
+    if (active()) return;
+    active(true);
+    position(0);
+    direction(1);
+
+    timer = setInterval(() => {
+      const width = node.frameWidth();
+      if (width === 0) return;
+
+      const maxPos = width - 1;
+      const pos = position();
+      const dir = direction();
+
+      const step = 12;
+      const nextPos = pos + dir * step;
+      if (nextPos >= maxPos) {
+        direction(-1);
+        position(maxPos);
+      } else if (nextPos <= 0) {
+        direction(1);
+        position(0);
+      } else {
+        position(nextPos);
+      }
+    }, interval);
+  }
+
+  function stop() {
+    clearTimer();
+    active(false);
+    position(0);
+    // Clear all three segments
+    leftTrack.setStyle?.({ text: "" });
+    dot.setStyle?.({ text: "" });
+    rightTrack.setStyle?.({ text: "" });
+  }
+
+  return { node, start, stop };
+}