@lkangd/cc-env 1.2.1 → 1.3.1

package/dist/ink/preset-edit-app.js

@@ -1,19 +1,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
+import { useTextInput } from './hooks/use-text-input.js';
+import { TextInputDisplay } from './components/text-input.js';
 export function PresetEditApp({ name, env: initialEnv, onSubmit }) {
     const { exit } = useApp();
     const [entries, setEntries] = useState(Object.entries(initialEnv));
     const [cursor, setCursor] = useState(0);
     const [editing, setEditing] = useState(null);
-    const [textInput, setTextInput] = useState('');
+    const textInput = useTextInput();
     const [error, setError] = useState();
     const [step, setStep] = useState('list');
     useInput((input, key) => {
         if (key.escape || input === 'q') {
             if (editing !== null) {
                 setEditing(null);
-                setTextInput('');
+                textInput.reset();
                 setError(undefined);
                 return;
             }
@@ -33,7 +35,7 @@ export function PresetEditApp({ name, env: initialEnv, onSubmit }) {
             if (key.return && entries.length > 0) {
                 const entry = entries[cursor];
                 if (entry) {
-                    setTextInput(`${entry[0]}=${entry[1]}`);
+                    textInput.reset(`${entry[0]}=${entry[1]}`);
                     setEditing(cursor);
                     setError(undefined);
                 }
@@ -45,7 +47,7 @@ export function PresetEditApp({ name, env: initialEnv, onSubmit }) {
                 return;
             }
             if (input === 'a') {
-                setTextInput('');
+                textInput.reset();
                 setEditing(entries.length);
                 setError(undefined);
                 return;
@@ -56,18 +58,14 @@ export function PresetEditApp({ name, env: initialEnv, onSubmit }) {
             }
         }
         if (editing !== null) {
-            if (key.backspace || key.delete) {
-                setTextInput((v) => v.slice(0, -1));
-                return;
-            }
             if (key.return) {
-                const sep = textInput.indexOf('=');
+                const sep = textInput.value.indexOf('=');
                 if (sep <= 0) {
                     setError('Format must be KEY=VALUE');
                     return;
                 }
-                const k = textInput.slice(0, sep);
-                const v = textInput.slice(sep + 1);
+                const k = textInput.value.slice(0, sep);
+                const v = textInput.value.slice(sep + 1);
                 if (!/^[A-Z0-9_]+$/.test(k)) {
                     setError('Key must match [A-Z0-9_]+');
                     return;
@@ -83,14 +81,12 @@ export function PresetEditApp({ name, env: initialEnv, onSubmit }) {
                     return next;
                 });
                 setEditing(null);
-                setTextInput('');
+                textInput.reset();
                 setError(undefined);
                 return;
             }
-            if (input && !key.ctrl && !key.meta) {
-                setTextInput((v) => v + input);
+            if (textInput.handleKey(input, key))
                 return;
-            }
         }
         if (step === 'confirm') {
             if (key.return) {
@@ -108,5 +104,5 @@ export function PresetEditApp({ name, env: initialEnv, onSubmit }) {
     if (step === 'confirm') {
         return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: ["Save changes to preset \"", name, "\"?"] }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: entries.map(([k, v]) => (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "\u2022 " }), _jsx(Text, { color: "magenta", children: k }), _jsx(Text, { dimColor: true, children: "=" }), _jsx(Text, { children: v })] }, k))) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "Press enter to confirm \u00B7 q to go back" }) })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: ["Editing preset: ", name] }), _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 enter edit \u00B7 d delete \u00B7 a add \u00B7 s save \u00B7 q cancel" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [entries.map(([k, v], i) => (_jsxs(Box, { children: [_jsx(Text, { children: i === cursor ? '❯ ' : '  ' }), _jsx(Text, { color: "magenta", children: k }), _jsx(Text, { dimColor: true, children: "=" }), _jsx(Text, { children: v })] }, k))), entries.length === 0 && _jsx(Text, { dimColor: true, children: "No entries. Press a to add." })] }), editing !== null && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: editing < entries.length ? 'Edit entry' : 'Add entry' }), _jsxs(Box, { children: [_jsxs(Text, { dimColor: true, children: ['>', " "] }), _jsx(Text, { color: "cyan", children: textInput }), _jsx(Text, { dimColor: true, children: "\u2588" })] }), error ? _jsx(Text, { color: "red", children: error }) : null] }))] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: ["Editing preset: ", name] }), _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 enter edit \u00B7 d delete \u00B7 a add \u00B7 s save \u00B7 q cancel" }), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [entries.map(([k, v], i) => (_jsxs(Box, { children: [_jsx(Text, { children: i === cursor ? '❯ ' : '  ' }), _jsx(Text, { color: "magenta", children: k }), _jsx(Text, { dimColor: true, children: "=" }), _jsx(Text, { children: v })] }, k))), entries.length === 0 && _jsx(Text, { dimColor: true, children: "No entries. Press a to add." })] }), editing !== null && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, children: editing < entries.length ? 'Edit entry' : 'Add entry' }), _jsx(TextInputDisplay, { value: textInput.value, cursorPos: textInput.cursorPos }), error ? _jsx(Text, { color: "red", children: error }) : null] }))] }));
 }

package/dist/ink/restore-app.js

@@ -3,6 +3,21 @@ import { useEffect, useMemo, useState } from 'react';
 import { Box, Text, useApp, useInput } from 'ink';
 import { advanceRestoreFlow } from '../flows/restore-flow.js';
 import { EnvEntries, EnvSummary } from './summary.js';
+export function getRestorePreviewSections(record) {
+    if (!record) {
+        return [];
+    }
+    if (record.action === 'init' || record.action === 'preset-create') {
+        return record.sources
+            .filter((source) => Object.keys(source.backup).length > 0)
+            .map((source) => ({
+            file: source.file,
+            entries: Object.entries(source.backup)
+                .sort(([left], [right]) => left.localeCompare(right)),
+        }));
+    }
+    return [];
+}
 export function RestoreApp({ state, onSubmit, }) {
     const { exit } = useApp();
     const [currentState, setCurrentState] = useState(state);
@@ -13,9 +28,11 @@ export function RestoreApp({ state, onSubmit, }) {
         ? recordAtCursor
         : selectedRecord ?? currentState.records[0];
     const restoreEntries = useMemo(() => activeRecord
-        ? Object.entries(activeRecord.action === 'init'
+        ? Object.entries(activeRecord.action === 'init' || activeRecord.action === 'preset-create'
             ? Object.fromEntries(activeRecord.sources.flatMap((s) => Object.entries(s.backup)))
-            : activeRecord.backup).sort(([left], [right]) => left.localeCompare(right))
+            : activeRecord.action === 'restore'
+                ? activeRecord.backup
+                : {}).sort(([left], [right]) => left.localeCompare(right))
         : [], [activeRecord]);
     const fromFiles = useMemo(() => {
         if (!activeRecord || activeRecord.action !== 'init') {
@@ -23,12 +40,7 @@ export function RestoreApp({ state, onSubmit, }) {
         }
         return activeRecord.shellWrites.map((sw) => sw.filePath);
     }, [activeRecord]);
-    const toFiles = useMemo(() => {
-        if (!activeRecord || activeRecord.action !== 'init') {
-            return [];
-        }
-        return activeRecord.sources.map((s) => s.file);
-    }, [activeRecord]);
+    const previewSections = useMemo(() => getRestorePreviewSections(activeRecord), [activeRecord]);
     useEffect(() => {
         setCurrentState(state);
         setCursor(0);
@@ -96,7 +108,10 @@ export function RestoreApp({ state, onSubmit, }) {
             exit();
         }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "Restore record" }), currentState.step === 'record' ? (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 enter confirm \u00B7 q cancel" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Box, { flexDirection: "column", width: 28, marginRight: 2, children: [_jsx(Text, { bold: true, color: "cyan", children: "History" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: currentState.records.map((record, index) => (_jsxs(Text, { children: [index === cursor ? '❯ ' : '  ', record.timestamp] }, record.timestamp))) })] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "green", paddingX: 1, children: [_jsx(Text, { bold: true, color: "green", children: "Preview" }), activeRecord?.action === 'init' ? (_jsxs(Box, { flexDirection: "column", children: [fromFiles.length > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "From:" }), fromFiles.map((file) => (_jsxs(Text, { color: "cyan", children: ["  ", file] }, file)))] })) : null, toFiles.length > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "To:" }), toFiles.map((file) => (_jsxs(Text, { color: "cyan", children: ["  ", file] }, file)))] })) : null] })) : (_jsxs(Text, { dimColor: true, children: ["Restore to ", activeRecord?.targetType === 'preset' ? `preset ${activeRecord.targetName}` : activeRecord?.targetType ?? 'settings'] })), _jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(EnvEntries, { entries: restoreEntries }) })] })] })] })) : null, currentState.step === 'target' ? (_jsxs(Text, { children: ["Select target for ", selectedRecord?.timestamp ?? 'record', ": settings or preset"] })) : null, currentState.step === 'confirm' && selectedRecord?.action === 'init' ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: ["Confirm restore from ", _jsx(Text, { color: "cyan", children: selectedRecord.timestamp })] }), _jsx(EnvSummary, { title: "Will restore", entries: restoreEntries, ...(fromFiles.length > 0 ? { fromFiles } : {}), ...(toFiles.length > 0 ? { toFiles } : {}) })] })) : null, currentState.step === 'confirm' && selectedRecord?.action !== 'init' ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: ["Confirm restore from ", _jsx(Text, { color: "cyan", children: selectedRecord?.timestamp ?? 'record' }), " to", ' ', _jsx(Text, { color: "green", children: currentState.targetType === 'preset'
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: "Restore record" }), currentState.step === 'record' ? (_jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 enter confirm \u00B7 q cancel" }), _jsxs(Box, { marginTop: 1, children: [_jsxs(Box, { flexDirection: "column", width: 28, marginRight: 2, children: [_jsx(Text, { bold: true, color: "cyan", children: "History" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: currentState.groups.map((group) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { dimColor: true, children: group.title }), currentState.records.slice(group.start, group.end).map((record, index) => {
+                                                    const actualIndex = group.start + index;
+                                                    return (_jsxs(Text, { children: [actualIndex === cursor ? '❯ ' : '  ', record.timestamp] }, record.timestamp));
+                                                })] }, group.title))) })] }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "green", paddingX: 1, children: [_jsx(Text, { bold: true, color: "green", children: "Preview" }), activeRecord?.action === 'restore' ? (_jsxs(Text, { dimColor: true, children: ["Restore to ", activeRecord.targetType === 'preset' ? `preset ${activeRecord.targetName}` : activeRecord.targetType] })) : null, previewSections.map((section) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "cyan", children: section.file }), _jsx(EnvEntries, { entries: section.entries })] }, section.file))), previewSections.length === 0 ? (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsx(EnvEntries, { entries: restoreEntries }) })) : null] })] })] })) : null, currentState.step === 'target' ? (_jsxs(Text, { children: ["Select target for ", selectedRecord?.timestamp ?? 'record', ": settings or preset"] })) : null, currentState.step === 'confirm' && selectedRecord?.action === 'init' ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: ["Confirm restore from ", _jsx(Text, { color: "cyan", children: selectedRecord.timestamp })] }), _jsx(EnvSummary, { title: "Will restore", entries: restoreEntries, ...(fromFiles.length > 0 ? { fromFiles } : {}), toFiles: previewSections.map((section) => section.file) })] })) : null, currentState.step === 'confirm' && selectedRecord?.action === 'preset-create' ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: ["Confirm restore from ", _jsx(Text, { color: "cyan", children: selectedRecord.timestamp })] }), previewSections.map((section) => (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: "cyan", children: section.file }), _jsx(EnvEntries, { entries: section.entries })] }, section.file)))] })) : null, currentState.step === 'confirm' && selectedRecord?.action === 'restore' ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: ["Confirm restore from ", _jsx(Text, { color: "cyan", children: selectedRecord.timestamp }), " to", ' ', _jsx(Text, { color: "green", children: currentState.targetType === 'preset'
                                     ? `preset ${currentState.targetName}`
                                     : currentState.targetType ?? 'settings' })] }), _jsx(EnvSummary, { title: "Will restore", entries: restoreEntries })] })) : null, currentState.step === 'done' ? (_jsxs(Text, { color: "green", children: ['\n', "Restore complete"] })) : null, currentState.step !== 'done' ? (_jsx(Text, { children: "Press Enter to confirm or q to cancel" })) : null] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lkangd/cc-env",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "description": "Manage runtime environment variables for Claude Code",
   "homepage": "https://github.com/lkangd/cc-env#readme",
   "bugs": {
@@ -20,7 +20,8 @@
     "node": ">=20.19.2"
   },
   "bin": {
-    "cc-env": "dist/cli.js"
+    "cc-env": "dist/cli.js",
+    "ccenv": "dist/cli.js"
   },
   "files": [
     "dist",

package/dist/ink/init-app.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Box, Text, useApp, useInput } from 'ink';
-import { advanceInitFlow, createInitFlowState, } from '../flows/init-flow.js';
-export function InitApp({ keys = [], requiredKeys = [], sourceFiles = [], onSubmit, }) {
-    const { exit } = useApp();
-    const [cursor, setCursor] = useState(0);
-    const [flowState, setFlowState] = useState(() => createInitFlowState(keys, requiredKeys));
-    useEffect(() => {
-        if (!onSubmit) {
-            return;
-        }
-        if (keys.length === 0) {
-            onSubmit({ confirmed: false, selectedKeys: [] });
-            exit();
-        }
-    }, [exit, keys.length, onSubmit]);
-    useInput((input, key) => {
-        if (!onSubmit) {
-            return;
-        }
-        if (key.upArrow || input === 'k') {
-            setCursor((c) => Math.max(0, c - 1));
-            return;
-        }
-        if (key.downArrow || input === 'j') {
-            setCursor((c) => Math.min(keys.length - 1, c + 1));
-            return;
-        }
-        if (input === ' ') {
-            const targetKey = keys[cursor];
-            if (targetKey) {
-                setFlowState((prev) => advanceInitFlow(prev, { type: 'toggle-key', key: targetKey }));
-            }
-            return;
-        }
-        if (key.return) {
-            onSubmit({ confirmed: true, selectedKeys: flowState.selectedKeys });
-            exit();
-            return;
-        }
-        if (key.escape || input.toLowerCase() === 'q') {
-            onSubmit({ confirmed: false, selectedKeys: [] });
-            exit();
-        }
-    });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "Select env keys to migrate into managed shell config" }), sourceFiles.length > 0 ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Source:" }), sourceFiles.map((file) => (_jsxs(Text, { color: "cyan", children: ["  ", file] }, file)))] })) : null, _jsx(Text, { dimColor: true, children: "\u2191/k \u2193/j navigate \u00B7 space toggle \u00B7 enter confirm \u00B7 q cancel" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: keys.map((key, i) => {
-                    const isRequired = requiredKeys.includes(key);
-                    const isSelected = flowState.selectedKeys.includes(key);
-                    const isCursor = i === cursor;
-                    const checkbox = isSelected ? '[x]' : '[ ]';
-                    return (_jsxs(Box, { children: [_jsx(Text, { children: isCursor ? '❯ ' : '  ' }), _jsx(Text, { color: isSelected ? 'green' : '', children: checkbox }), _jsxs(Text, { children: [" ", key] }), isRequired ? _jsx(Text, { dimColor: true, children: " (required)" }) : null] }, key));
-                }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: [flowState.selectedKeys.length, " of ", keys.length, " selected"] }) })] }));
-}