@fiete/drift 1.0.1 → 1.0.2

package/README.md

@@ -13,25 +13,9 @@ npm install -g @brechtknecht/drift
 ```bash
 drift          # open the TUI browser
 drift add      # add a new command interactively
-drift add "git log --oneline -20"                                      # pre-fill the command
-drift add "cd /project && npm run dev" --desc "Start dev" --tags "node,dev"  # save without TUI
-drift remove <id>
+drift add "git log --oneline -20"   # pre-fill the command
 ```
 
-## TUI controls
-
-| Key | Action |
-|-----|--------|
-| `↑` / `↓` | Navigate |
-| `Shift+↑` / `Shift+↓` | Reorder |
-| `/` | Enter search mode |
-| `ESC` | Exit search / quit |
-| `Enter` | Execute command |
-| `Ctrl+E` | Copy to clipboard |
-| `a` | Add new command |
-| `e` | Edit selected |
-| `Ctrl+D` | Delete selected |
-
 ## Commands
 
 Each saved command has:
@@ -40,10 +24,6 @@ Each saved command has:
 - **Directory** *(optional)* — when set, executing or copying prepends `cd <dir> &&`
 - **Tags** — for organisation and search
 
-## Search
-
-Press `/` to enter search mode. Fuzzy search across command text, description, and tags. Press `Enter` to lock the filter, `ESC` to clear.
-
 ## Data
 
 Commands are stored at `~/.config/drift/commands.json`.

package/dist/{Browser-6EKJ6MS7.js → Browser-UPOZVAV4.js}

@@ -6,8 +6,8 @@ import {
 import "./chunk-V6RC35DD.js";
 
 // src/ui/Browser.tsx
-import { useState as useState2, useCallback as useCallback2 } from "react";
-import { Box as Box6, Text as Text6, useInput as useInput3, useApp } from "ink";
+import { useState as useState3, useCallback as useCallback2 } from "react";
+import { Box as Box7, Text as Text7, useInput as useInput4, useApp } from "ink";
 import clipboard from "clipboardy";
 
 // src/hooks/useFuzzySearch.ts
@@ -226,19 +226,158 @@ function EditModal({ command, onSave, onCancel }) {
   );
 }
 
-// src/ui/Browser.tsx
+// src/ui/Onboarding.tsx
+import { useEffect, useRef, useState as useState2 } from "react";
+import { Box as Box6, Text as Text6, useInput as useInput3 } from "ink";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var W = 64;
+var H = 20;
+var PATHS = [
+  // 1 — bottom-center → sweep hard left → exit top-right (original)
+  [{ x: 0.45, y: 1.12 }, { x: 0.45, y: 0.55 }, { x: 0.1, y: 0.12 }, { x: 1.12, y: 0.1 }],
+  // 2 — bottom-right → wide left arc → exit left-middle
+  [{ x: 0.8, y: 1.12 }, { x: 0.8, y: 0.45 }, { x: 0.15, y: 0.18 }, { x: -0.12, y: 0.45 }],
+  // 3 — bottom-left → arc right → exit top-right (mirror of 1)
+  [{ x: 0.22, y: 1.12 }, { x: 0.22, y: 0.55 }, { x: 0.88, y: 0.12 }, { x: 1.12, y: 0.1 }],
+  // 4 — left-middle → sweep right across → exit top-right
+  [{ x: -0.12, y: 0.7 }, { x: 0.22, y: 0.7 }, { x: 0.78, y: 0.12 }, { x: 1.12, y: 0.12 }],
+  // 5 — right-middle → sweep left across → exit top-left
+  [{ x: 1.12, y: 0.7 }, { x: 0.78, y: 0.7 }, { x: 0.22, y: 0.12 }, { x: -0.12, y: 0.12 }]
+];
+function bezier(bp, t) {
+  const m = 1 - t;
+  return {
+    x: m * m * m * bp[0].x + 3 * m * m * t * bp[1].x + 3 * m * t * t * bp[2].x + t * t * t * bp[3].x,
+    y: m * m * m * bp[0].y + 3 * m * m * t * bp[1].y + 3 * m * t * t * bp[2].y + t * t * t * bp[3].y
+  };
+}
+function bezierAngleDeg(bp, t) {
+  const d = 1e-3;
+  const a = bezier(bp, Math.max(0, t - d));
+  const b = bezier(bp, Math.min(1, t + d));
+  return Math.atan2(b.y - a.y, b.x - a.x) * 180 / Math.PI;
+}
+var SKID_CH = ["\u2500", "\u2572", "\u2502", "\u2571", "\u2500", "\u2572", "\u2502", "\u2571"];
+var SMOKE_CH = ["\u2217", "\xB0", "\xB7", "`", "'", "~", "\u2218", "*"];
+var DURATION = 4200;
+var PAUSE = 900;
+var TRAIL_DT = 0.016;
+var DRIFT_DEG = 24;
+function spawnTrail(marks, smokes, carX, carY, bodyDeg) {
+  const bRad = bodyDeg * Math.PI / 180;
+  const rearX = carX - Math.cos(bRad) * 3.5;
+  const rearY = carY - Math.sin(bRad) * 3.5;
+  const pRad = bRad + Math.PI / 2;
+  const ws = 1.8;
+  const di = Math.round((bodyDeg % 360 + 360) % 360 / 45) % 8;
+  const sk = SKID_CH[di];
+  marks.push({ x: rearX + Math.cos(pRad) * ws, y: rearY + Math.sin(pRad) * ws, ch: sk, age: 0, maxAge: 90 });
+  marks.push({ x: rearX - Math.cos(pRad) * ws, y: rearY - Math.sin(pRad) * ws, ch: sk, age: 0, maxAge: 90 });
+  const count = Math.random() < 0.5 ? 1 : 2;
+  for (let i = 0; i < count; i++) {
+    smokes.push({
+      x: rearX + (Math.random() - 0.5) * 5,
+      y: rearY + (Math.random() - 0.5) * 2.5,
+      ch: SMOKE_CH[Math.floor(Math.random() * SMOKE_CH.length)],
+      age: 0,
+      maxAge: 28
+    });
+  }
+}
+function renderFrame(marks, smokes) {
+  const buf = Array.from({ length: H }, () => new Array(W).fill(" "));
+  function blit(x, y, ch) {
+    const xi = Math.round(x), yi = Math.round(y);
+    if (xi >= 0 && xi < W && yi >= 0 && yi < H) buf[yi][xi] = ch;
+  }
+  for (const m of marks) {
+    const fade = m.age / m.maxAge;
+    if (fade < 0.5) blit(m.x, m.y, m.ch);
+    else if (fade < 0.75) blit(m.x, m.y, "\xB7");
+    else blit(m.x, m.y, ".");
+  }
+  for (const s of smokes) {
+    if (s.age / s.maxAge < 0.65) blit(s.x, s.y, s.ch);
+  }
+  return buf.map((row) => row.join("")).join("\n");
+}
+function Onboarding({ onDismiss }) {
+  const [canvas, setCanvas] = useState2(() => Array(H).fill(" ".repeat(W)).join("\n"));
+  const anim = useRef({
+    marks: [],
+    smokes: [],
+    lastTrail: -1,
+    startTime: Date.now(),
+    pathIndex: 0,
+    cycleCount: 0
+  });
+  useInput3(() => {
+    onDismiss();
+  });
+  useEffect(() => {
+    const id = setInterval(() => {
+      const s = anim.current;
+      const elapsed = Date.now() - s.startTime;
+      const cycle = elapsed % (DURATION + PAUSE);
+      if (cycle < 40) {
+        s.cycleCount++;
+        s.pathIndex = s.cycleCount % PATHS.length;
+        s.lastTrail = -1;
+      }
+      const bp = PATHS[s.pathIndex];
+      const T = cycle < DURATION ? cycle / DURATION : 1;
+      const pos = bezier(bp, T);
+      const velDeg = bezierAngleDeg(bp, T);
+      const bodyDeg = velDeg + DRIFT_DEG;
+      if (T < 0.99 && T - s.lastTrail >= TRAIL_DT) {
+        s.lastTrail = T;
+        spawnTrail(s.marks, s.smokes, pos.x * W, pos.y * H, bodyDeg);
+      }
+      for (const m of s.marks) m.age++;
+      for (const sm of s.smokes) sm.age++;
+      s.marks = s.marks.filter((m) => m.age < m.maxAge);
+      s.smokes = s.smokes.filter((sm) => sm.age < sm.maxAge);
+      setCanvas(renderFrame(s.marks, s.smokes));
+    }, 40);
+    return () => clearInterval(id);
+  }, []);
+  const termH = process.stdout.rows ?? 24;
+  return /* @__PURE__ */ jsx6(Box6, { height: termH, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxs6(
+    Box6,
+    {
+      borderStyle: "round",
+      borderColor: "white",
+      flexDirection: "column",
+      paddingX: 2,
+      paddingY: 1,
+      width: W + 8,
+      children: [
+        /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: [
+          /* @__PURE__ */ jsx6(Text6, { bold: true, children: " drift " }),
+          /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "your commands. always within reach." })
+        ] }),
+        /* @__PURE__ */ jsx6(Box6, { width: W, children: /* @__PURE__ */ jsx6(Text6, { children: canvas }) }),
+        /* @__PURE__ */ jsx6(Box6, { justifyContent: "center", marginTop: 1, children: /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: "press any key to continue" }) })
+      ]
+    }
+  ) });
+}
+
+// src/ui/Browser.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var HEADER_ROWS = 4;
 var FOOTER_ROWS = 3;
-function Browser({ onExecute }) {
+function Browser({ onExecute, forceOnboarding = false }) {
   const { exit } = useApp();
   const { commands, updateCommand, moveCommand, removeCommand } = useStore();
-  const [query, setQuery] = useState2("");
-  const [isSearching, setIsSearching] = useState2(false);
-  const [selectedIndex, setSelectedIndex] = useState2(0);
-  const [viewportStart, setViewportStart] = useState2(0);
-  const [screen, setScreen] = useState2("browser");
-  const [statusMessage, setStatusMessage] = useState2("");
+  const [query, setQuery] = useState3("");
+  const [isSearching, setIsSearching] = useState3(false);
+  const [selectedIndex, setSelectedIndex] = useState3(0);
+  const [viewportStart, setViewportStart] = useState3(0);
+  const [screen, setScreen] = useState3(
+    () => forceOnboarding || commands.length === 0 ? "onboarding" : "browser"
+  );
+  const [statusMessage, setStatusMessage] = useState3("");
   const filtered = useFuzzySearch(commands, query);
   const clampedIndex = Math.min(selectedIndex, Math.max(0, filtered.length - 1));
   const selected = filtered[clampedIndex] ?? null;
@@ -262,7 +401,7 @@ function Browser({ onExecute }) {
     },
     [filtered.length, visibleRows]
   );
-  useInput3(
+  useInput4(
     (input, key) => {
       if (screen === "confirm-delete") return;
       if (isSearching) {
@@ -357,8 +496,11 @@ function Browser({ onExecute }) {
     },
     { isActive: screen === "browser" }
   );
+  if (screen === "onboarding") {
+    return /* @__PURE__ */ jsx7(Onboarding, { onDismiss: () => setScreen("browser") });
+  }
   if (screen === "add") {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       AddForm,
       {
         onSave: () => {
@@ -370,9 +512,9 @@ function Browser({ onExecute }) {
     );
   }
   const isOverlay = screen === "confirm-delete" || screen === "edit";
-  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", height: process.stdout.rows ?? 24, children: [
-    /* @__PURE__ */ jsx6(SearchBar, { query, isSearching, total: commands.length, filtered: filtered.length }),
-    /* @__PURE__ */ jsx6(Box6, { flexDirection: "column", flexGrow: 1, children: filtered.length === 0 ? /* @__PURE__ */ jsx6(Box6, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx6(Text6, { color: "gray", dimColor: true, children: commands.length === 0 ? "No commands saved yet. Press `a` to add your first command." : "No matches. Keep typing or clear the search." }) }) : visibleCommands.map((cmd, i) => /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs7(Box7, { flexDirection: "column", height: process.stdout.rows ?? 24, children: [
+    /* @__PURE__ */ jsx7(SearchBar, { query, isSearching, total: commands.length, filtered: filtered.length }),
+    /* @__PURE__ */ jsx7(Box7, { flexDirection: "column", flexGrow: 1, children: filtered.length === 0 ? /* @__PURE__ */ jsx7(Box7, { paddingX: 2, paddingY: 1, children: /* @__PURE__ */ jsx7(Text7, { color: "gray", dimColor: true, children: commands.length === 0 ? "No commands saved yet. Press `a` to add your first command." : "No matches. Keep typing or clear the search." }) }) : visibleCommands.map((cmd, i) => /* @__PURE__ */ jsx7(
       CommandItem,
       {
         command: cmd,
@@ -381,7 +523,7 @@ function Browser({ onExecute }) {
       },
       cmd.id
     )) }),
-    screen === "edit" && selected && /* @__PURE__ */ jsx6(
+    screen === "edit" && selected && /* @__PURE__ */ jsx7(
       EditModal,
       {
         command: selected,
@@ -393,7 +535,7 @@ function Browser({ onExecute }) {
         onCancel: () => setScreen("browser")
       }
     ),
-    screen === "confirm-delete" && selected && /* @__PURE__ */ jsx6(
+    screen === "confirm-delete" && selected && /* @__PURE__ */ jsx7(
       ConfirmDelete,
       {
         command: selected,
@@ -406,7 +548,7 @@ function Browser({ onExecute }) {
         onCancel: () => setScreen("browser")
       }
     ),
-    /* @__PURE__ */ jsx6(StatusBar, { message: statusMessage })
+    /* @__PURE__ */ jsx7(StatusBar, { message: statusMessage })
   ] });
 }
 export {

package/dist/index.js

@@ -6,13 +6,16 @@ import { render } from "ink";
 import React from "react";
 import { execa } from "execa";
 program.name("drift").description("cmdvault \u2014 A TUI command vault for your shell").version("1.0.0");
-program.command("list", { isDefault: true }).description("Browse saved commands (default)").action(async () => {
-  const { Browser } = await import("./Browser-6EKJ6MS7.js");
+program.command("list", { isDefault: true }).description("Browse saved commands (default)").option("--onboarding", "Force the onboarding screen (debug)").action(async (opts) => {
+  const { Browser } = await import("./Browser-UPOZVAV4.js");
   let commandToRun;
   const { waitUntilExit } = render(
-    React.createElement(Browser, { onExecute: (cmd) => {
-      commandToRun = cmd;
-    } })
+    React.createElement(Browser, {
+      onExecute: (cmd) => {
+        commandToRun = cmd;
+      },
+      forceOnboarding: opts.onboarding ?? false
+    })
   );
   await waitUntilExit();
   process.stdout.write("\x1Bc");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiete/drift",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A TUI command vault for your shell",
   "type": "module",
   "bin": {