bitty-tui 0.0.17 → 0.0.18

package/dist/cli.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from "ink";
 import App from "./app.js";
 import { StatusMessageProvider } from "./hooks/status-message.js";
+import { MouseProvider } from "./hooks/use-mouse.js";
 import { readPackageUpSync } from "read-package-up";
 import { art } from "./theme/art.js";
 import path from "node:path";
@@ -26,4 +27,4 @@ if (args.includes("--help") || args.includes("-h")) {
 `);
     process.exit(0);
 }
-render(_jsx(StatusMessageProvider, { children: _jsx(App, {}) }));
+render(_jsx(StatusMessageProvider, { children: _jsx(MouseProvider, { children: _jsx(App, {}) }) }));

package/dist/components/Button.js

@@ -1,24 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Text, Box, useFocus, useInput } from "ink";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import { primary } from "../theme/style.js";
+import { useMouseTarget } from "../hooks/use-mouse.js";
 export const Button = ({ isActive = true, doubleConfirm, onClick, children, autoFocus = false, ...props }) => {
-    const { isFocused } = useFocus({ autoFocus: autoFocus });
+    const generatedId = useId();
+    const { isFocused } = useFocus({ id: generatedId, autoFocus: autoFocus });
     const [askConfirm, setAskConfirm] = useState(false);
     const timeoutRef = useRef(null);
-    useInput((input, key) => {
-        if (key.return) {
-            if (timeoutRef.current)
-                clearTimeout(timeoutRef.current);
-            if (doubleConfirm && !askConfirm) {
-                setAskConfirm(true);
-                timeoutRef.current = setTimeout(() => setAskConfirm(false), 1000);
-                return;
-            }
-            if (askConfirm)
-                setAskConfirm(false);
-            onClick();
+    const boxRef = useRef(null);
+    const handlePress = () => {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        if (doubleConfirm && !askConfirm) {
+            setAskConfirm(true);
+            timeoutRef.current = setTimeout(() => setAskConfirm(false), 1000);
+            return;
         }
+        if (askConfirm)
+            setAskConfirm(false);
+        onClick();
+    };
+    useMouseTarget(generatedId, boxRef, { onClick: handlePress });
+    useInput((input, key) => {
+        if (key.return)
+            handlePress();
     }, { isActive: isFocused && isActive });
-    return (_jsx(Box, { borderStyle: "round", borderColor: isFocused && isActive ? primary : "gray", alignItems: "center", justifyContent: "center", ...props, children: _jsx(Text, { color: isFocused && isActive ? (askConfirm ? "yellow" : "white") : "gray", children: askConfirm ? "Confirm?" : children }) }));
+    return (_jsx(Box, { ref: boxRef, borderStyle: "round", borderColor: isFocused && isActive ? primary : "gray", alignItems: "center", justifyContent: "center", ...props, children: _jsx(Text, { color: isFocused && isActive ? (askConfirm ? "yellow" : "white") : "gray", children: askConfirm ? "Confirm?" : children }) }));
 };

package/dist/components/Checkbox.js

@@ -1,12 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, Box, useFocus, useInput } from "ink";
+import { useId, useRef } from "react";
 import { primary } from "../theme/style.js";
+import { useMouseTarget } from "../hooks/use-mouse.js";
 export const Checkbox = ({ isActive = true, value, label, onToggle, ...props }) => {
-    const { isFocused } = useFocus();
+    const generatedId = useId();
+    const { isFocused } = useFocus({ id: generatedId });
+    const boxRef = useRef(null);
+    useMouseTarget(generatedId, boxRef, {
+        onClick: () => onToggle(!value),
+    });
     useInput((input, key) => {
         if (input === " ") {
             onToggle(!value);
         }
     }, { isActive: isFocused && isActive });
-    return (_jsxs(Box, { ...props, children: [_jsx(Box, { width: 5, height: 3, flexShrink: 0, borderStyle: "round", borderColor: isFocused && isActive ? primary : "gray", children: value && (_jsx(Box, { width: 1, height: 1, marginLeft: 1, children: _jsx(Text, { color: isFocused && isActive ? primary : "gray", children: "X" }) })) }), _jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsx(Text, { children: label }) })] }));
+    return (_jsxs(Box, { ref: boxRef, ...props, children: [_jsx(Box, { width: 5, height: 3, flexShrink: 0, borderStyle: "round", borderColor: isFocused && isActive ? primary : "gray", children: value && (_jsx(Box, { width: 1, height: 1, marginLeft: 1, children: _jsx(Text, { color: isFocused && isActive ? primary : "gray", children: "X" }) })) }), _jsx(Box, { marginTop: 1, marginLeft: 1, children: _jsx(Text, { children: label }) })] }));
 };

package/dist/components/ScrollView.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from "react";
-export declare const ScrollView: <T>({ count, list, isActive, selectedIndex, onSelect, onSubmit, children, }: {
+export declare const ScrollView: <T>({ count, list, isActive, selectedIndex, onSelect, onSubmit, offsetRef, children, }: {
     count: number;
     list: T[];
     isActive: boolean;
     selectedIndex: number;
     onSelect?: (position: number) => void;
     onSubmit?: (position: number) => void;
+    offsetRef?: React.MutableRefObject<number>;
     children: (arg: {
         el: T;
         index: number;

package/dist/components/ScrollView.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, useInput } from "ink";
 import { useEffect, useState } from "react";
-export const ScrollView = ({ count, list, isActive, selectedIndex, onSelect, onSubmit, children, }) => {
+export const ScrollView = ({ count, list, isActive, selectedIndex, onSelect, onSubmit, offsetRef, children, }) => {
     const [offset, setOffset] = useState(0);
+    if (offsetRef)
+        offsetRef.current = offset;
     useInput((input, key) => {
         if (key.upArrow) {
             if (selectedIndex === offset && offset > 0) {

package/dist/components/TextInput.js

@@ -1,16 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Text, Box, useFocus, useInput, useFocusManager } from "ink";
+import { Text, Box, useFocus, useInput, useFocusManager, } from "ink";
 import { primary } from "../theme/style.js";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import clipboard from "clipboardy";
 import chalk from "chalk";
 import { useStatusMessage } from "../hooks/status-message.js";
+import { useMouseTarget } from "../hooks/use-mouse.js";
 export const TextInput = ({ id, placeholder, value, isPassword, showPasswordOnFocus, isActive, autoFocus, inline, multiline, maxLines = 1, onChange, onSubmit, onCopy, ...props }) => {
     const [cursor, setCursor] = useState(onChange ? value.length : 0);
     const [scrollOffset, setScrollOffset] = useState(0);
-    const { isFocused } = useFocus({ id, isActive, autoFocus });
+    const generatedId = useId();
+    const effectiveId = id ?? generatedId;
+    const { isFocused } = useFocus({ id: effectiveId, isActive, autoFocus });
     const { showStatusMessage } = useStatusMessage();
     const { focusNext } = useFocusManager();
+    const boxRef = useRef(null);
+    useMouseTarget(effectiveId, boxRef);
     const displayValue = useMemo(() => {
         let displayValue = value;
         if (isPassword && (showPasswordOnFocus ? !isFocused : true)) {
@@ -189,5 +194,5 @@ export const TextInput = ({ id, placeholder, value, isPassword, showPasswordOnFo
             }
         }
     }, { isActive: isFocused });
-    return (_jsx(Box, { borderStyle: "round", borderColor: isFocused ? primary : "gray", borderBottom: !inline, borderTop: !inline, borderLeft: !inline, borderRight: !inline, flexGrow: 1, flexShrink: 0, paddingX: inline ? 0 : 1, overflow: "hidden", minHeight: inline ? 1 : 3, ...props, children: _jsx(Text, { color: value ? "white" : "gray", children: displayValue }) }));
+    return (_jsx(Box, { ref: boxRef, borderStyle: "round", borderColor: isFocused ? primary : "gray", borderBottom: !inline, borderTop: !inline, borderLeft: !inline, borderRight: !inline, flexGrow: 1, flexShrink: 0, paddingX: inline ? 0 : 1, overflow: "hidden", minHeight: inline ? 1 : 3, ...props, children: _jsx(Text, { color: value ? "white" : "gray", children: displayValue }) }));
 };

package/dist/dashboard/DashboardView.js

@@ -8,6 +8,7 @@ import { HelpBar } from "./components/HelpBar.js";
 import { primary } from "../theme/style.js";
 import { bwClient, clearConfig, emptyCipher, useBwSync } from "../hooks/bw.js";
 import { useStatusMessage } from "../hooks/status-message.js";
+import { useMouseSubscribe } from "../hooks/use-mouse.js";
 export function DashboardView({ onLogout }) {
     const { sync, error, fetchSync } = useBwSync();
     const [syncState, setSyncState] = useState(sync);
@@ -46,13 +47,20 @@ export function DashboardView({ onLogout }) {
         await clearConfig();
         onLogout();
     };
+    useMouseSubscribe((targetId) => {
+        if (targetId === "search") {
+            setFocusedComponent("search");
+        }
+        else if (targetId === "list") {
+            setFocusedComponent("list");
+        }
+        else {
+            setFocusedComponent("detail");
+        }
+    });
     useEffect(() => {
         setSyncState(sync);
     }, [sync]);
-    useEffect(() => {
-        if (focusedComponent === "detail")
-            focusNext();
-    }, [focusedComponent]);
     useEffect(() => {
         if (error)
             showStatusMessage(error, "error");

package/dist/dashboard/components/VaultList.js

@@ -5,6 +5,8 @@ import { CipherType } from "../../clients/bw.js";
 import { ScrollView } from "../../components/ScrollView.js";
 import clipboard from "clipboardy";
 import { useStatusMessage } from "../../hooks/status-message.js";
+import { useRef } from "react";
+import { useMouseTarget } from "../../hooks/use-mouse.js";
 const getTypeIcon = (type) => {
     switch (type) {
         case CipherType.Login:
@@ -22,6 +24,18 @@ const getTypeIcon = (type) => {
 export function VaultList({ filteredCiphers, isFocused, selected, onSelect, }) {
     const { stdout } = useStdout();
     const { showStatusMessage } = useStatusMessage();
+    const boxRef = useRef(null);
+    const scrollOffsetRef = useRef(0);
+    useMouseTarget("list", boxRef, {
+        noFocus: true,
+        onClick: (_relX, relY) => {
+            const visibleIndex = relY - 1; // -1 for border
+            const actualIndex = scrollOffsetRef.current + visibleIndex;
+            if (actualIndex >= 0 && actualIndex < filteredCiphers.length) {
+                onSelect(actualIndex);
+            }
+        },
+    });
     useInput((input, key) => {
         const cipher = selected !== null ? filteredCiphers[selected] : null;
         let field, fldName;
@@ -64,5 +78,5 @@ export function VaultList({ filteredCiphers, isFocused, selected, onSelect, }) {
             showStatusMessage(`📋 Copied ${fldName} to clipboard!`, "success");
         }
     }, { isActive: isFocused });
-    return (_jsx(Box, { flexDirection: "column", width: "40%", borderStyle: "round", borderColor: isFocused ? primaryLight : "gray", borderRightColor: "gray", paddingX: 1, overflow: "hidden", children: _jsx(ScrollView, { isActive: isFocused, count: Math.max(stdout.rows - 14, 20), list: filteredCiphers, selectedIndex: selected ?? 0, onSelect: onSelect, children: ({ el: cipher, selected }) => (_jsxs(Box, { justifyContent: "space-between", backgroundColor: selected ? (isFocused ? primary : primaryDark) : "", children: [_jsxs(Box, { children: [_jsxs(Text, { children: [getTypeIcon(cipher.type), " "] }), _jsx(Text, { color: selected && isFocused ? "white" : "default", wrap: "truncate", children: cipher.name })] }), cipher.favorite && _jsx(Text, { color: "yellow", children: "\u2605" })] }, cipher.id)) }) }));
+    return (_jsx(Box, { ref: boxRef, flexDirection: "column", width: "40%", borderStyle: "round", borderColor: isFocused ? primaryLight : "gray", borderRightColor: "gray", paddingX: 1, overflow: "hidden", children: _jsx(ScrollView, { isActive: isFocused, count: Math.max(stdout.rows - 14, 20), list: filteredCiphers, selectedIndex: selected ?? 0, onSelect: onSelect, offsetRef: scrollOffsetRef, children: ({ el: cipher, selected }) => (_jsxs(Box, { justifyContent: "space-between", backgroundColor: selected ? (isFocused ? primary : primaryDark) : "", children: [_jsxs(Box, { children: [_jsxs(Text, { children: [getTypeIcon(cipher.type), " "] }), _jsx(Text, { color: selected && isFocused ? "white" : "default", wrap: "truncate", children: cipher.name })] }), cipher.favorite && _jsx(Text, { color: "yellow", children: "\u2605" })] }, cipher.id)) }) }));
 }

package/dist/hooks/use-mouse.d.ts

@@ -0,0 +1,11 @@
+import { type DOMElement } from "ink";
+type TargetOptions = {
+    noFocus?: boolean;
+    onClick?: (relX: number, relY: number) => void;
+};
+export declare const MouseProvider: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useMouseTarget: (id: string, ref: React.RefObject<DOMElement | null>, options?: TargetOptions) => void;
+export declare const useMouseSubscribe: (listener: (targetId: string) => void) => void;
+export {};

package/dist/hooks/use-mouse.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useCallback, useEffect, useRef, } from "react";
+import { useStdin, useFocusManager, measureElement, } from "ink";
+const MouseContext = createContext({
+    registerTarget: () => { },
+    unregisterTarget: () => { },
+    subscribe: () => () => { },
+});
+const mouseSequenceRe = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/;
+function getAbsolutePosition(node) {
+    let currentNode = node;
+    let x = 0;
+    let y = 0;
+    while (currentNode?.parentNode) {
+        if (!currentNode.yogaNode)
+            return undefined;
+        x += currentNode.yogaNode.getComputedLeft();
+        y += currentNode.yogaNode.getComputedTop();
+        currentNode = currentNode.parentNode;
+    }
+    return { x, y };
+}
+export const MouseProvider = ({ children, }) => {
+    const { internal_eventEmitter } = useStdin();
+    const { focus } = useFocusManager();
+    const targetsRef = useRef(new Map());
+    const listenersRef = useRef(new Set());
+    const focusRef = useRef(focus);
+    focusRef.current = focus;
+    const registerTarget = useCallback((id, ref, options) => {
+        targetsRef.current.set(id, { ref, ...options });
+    }, []);
+    const unregisterTarget = useCallback((id) => {
+        targetsRef.current.delete(id);
+    }, []);
+    const subscribe = useCallback((listener) => {
+        listenersRef.current.add(listener);
+        return () => {
+            listenersRef.current.delete(listener);
+        };
+    }, []);
+    const handleClick = useCallback((x, y) => {
+        for (const [id, target] of targetsRef.current) {
+            const node = target.ref.current;
+            if (!node)
+                continue;
+            const pos = getAbsolutePosition(node);
+            if (!pos)
+                continue;
+            const { width, height } = measureElement(node);
+            if (x >= pos.x &&
+                x < pos.x + width &&
+                y >= pos.y &&
+                y < pos.y + height) {
+                for (const listener of listenersRef.current) {
+                    listener(id);
+                }
+                if (!target.noFocus) {
+                    focusRef.current(id);
+                }
+                target.onClick?.(x - pos.x, y - pos.y);
+                return;
+            }
+        }
+    }, []);
+    const handleClickRef = useRef(handleClick);
+    handleClickRef.current = handleClick;
+    useEffect(() => {
+        if (!internal_eventEmitter)
+            return;
+        // Enable SGR mouse tracking mode
+        process.stdout.write("\x1b[?1000h\x1b[?1006h");
+        // Patch event emitter to intercept mouse sequences
+        const originalEmit = internal_eventEmitter.emit.bind(internal_eventEmitter);
+        internal_eventEmitter.emit = (event, ...args) => {
+            if (event === "input") {
+                const data = args[0];
+                const match = mouseSequenceRe.exec(data);
+                if (match) {
+                    const button = parseInt(match[1], 10);
+                    const x = parseInt(match[2], 10) - 1;
+                    const y = parseInt(match[3], 10) - 1;
+                    const isPress = match[4] === "M";
+                    if (isPress && (button & 3) === 0) {
+                        handleClickRef.current(x, y);
+                    }
+                    return true;
+                }
+            }
+            return originalEmit(event, ...args);
+        };
+        const disableMouse = () => {
+            process.stdout.write("\x1b[?1006l\x1b[?1000l");
+        };
+        process.on("exit", disableMouse);
+        return () => {
+            internal_eventEmitter.emit = originalEmit;
+            disableMouse();
+            process.removeListener("exit", disableMouse);
+        };
+    }, [internal_eventEmitter]);
+    return (_jsx(MouseContext.Provider, { value: { registerTarget, unregisterTarget, subscribe }, children: children }));
+};
+export const useMouseTarget = (id, ref, options) => {
+    const { registerTarget, unregisterTarget } = useContext(MouseContext);
+    const onClickRef = useRef(options?.onClick);
+    onClickRef.current = options?.onClick;
+    useEffect(() => {
+        registerTarget(id, ref, {
+            noFocus: options?.noFocus,
+            onClick: (x, y) => onClickRef.current?.(x, y),
+        });
+        return () => unregisterTarget(id);
+    }, [id, ref, registerTarget, unregisterTarget, options?.noFocus]);
+};
+export const useMouseSubscribe = (listener) => {
+    const { subscribe } = useContext(MouseContext);
+    const listenerRef = useRef(listener);
+    listenerRef.current = listener;
+    useEffect(() => {
+        const stableListener = (id) => listenerRef.current(id);
+        return subscribe(stableListener);
+    }, [subscribe]);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitty-tui",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "MIT",
   "repository": "https://github.com/mceck/bitty",
   "keywords": [