@semos-labs/create-glyph 0.1.74 → 0.1.76

package/dist/index.js

@@ -95,7 +95,7 @@ function templateTsconfig() {
 }
 function templateMainTsx(name) {
   const displayName = name.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
-  return `import React, { useState, useCallback } from "react";
+  return `import React, { useState, useCallback, useRef } from "react";
 import {
   render,
   Box,
@@ -108,6 +108,7 @@ import {
   Spacer,
   useApp,
 } from "@semos-labs/glyph";
+import type { Key, InputHandle } from "@semos-labs/glyph";
 
 // \u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
 
@@ -123,6 +124,7 @@ let nextId = 1;
 
 function App() {
   const { exit } = useApp();
+  const inputRef = useRef<InputHandle>(null);
 
   const [todos, setTodos] = useState<Todo[]>([
     { id: nextId++, text: "Learn Glyph basics", done: true },
@@ -139,8 +141,20 @@ function App() {
     if (!text) return;
     setTodos((prev) => [...prev, { id: nextId++, text, done: false }]);
     setNewTodo("");
+    // Re-focus the input after adding
+    setTimeout(() => inputRef.current?.focus(), 0);
   }, [newTodo]);
 
+  const handleInputKey = useCallback(
+    (key: Key) => {
+      if (key.name === "return") {
+        handleAdd();
+        return true; // Consume the key
+      }
+    },
+    [handleAdd],
+  );
+
   const handleToggle = useCallback((id: number) => {
     setTodos((prev) =>
       prev.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
@@ -180,19 +194,20 @@ function App() {
       <Box style={{ flexDirection: "row", gap: 1 }}>
         <Box style={{ flexGrow: 1 }}>
           <Input
+            ref={inputRef}
             value={newTodo}
             onChange={setNewTodo}
+            onKeyPress={handleInputKey}
             placeholder="What needs to be done?"
-            onSubmit={handleAdd}
-            style={{ bg: "blackBright", paddingX: 1 }}
-            focusedStyle={{ bg: "white", color: "black", paddingX: 1 }}
+            style={{ border: "round", borderColor: "blackBright", paddingX: 1 }}
+            focusedStyle={{ border: "round", borderColor: "cyan", color: "white", paddingX: 1 }}
           />
         </Box>
         <Button
           label=" add "
           onPress={handleAdd}
-          style={{ bg: "blackBright", paddingX: 1 }}
-          focusedStyle={{ bg: "cyan", color: "black", paddingX: 1 }}
+          style={{ border: "round", borderColor: "blackBright", paddingX: 1 }}
+          focusedStyle={{ border: "round", borderColor: "cyan", bg: "cyan", color: "black", paddingX: 1 }}
         />
       </Box>
 
@@ -207,15 +222,15 @@ function App() {
               checked={todo.done}
               onChange={() => handleToggle(todo.id)}
               label={todo.text}
-              style={todo.done ? { dim: true } : {}}
+              style={todo.done ? { dim: true, color: "blackBright" } : { color: "white" }}
               focusedStyle={{ color: "cyanBright" }}
             />
             <Spacer />
             <Button
               label=" \xD7 "
               onPress={() => handleDelete(todo.id)}
-              style={{ dim: true }}
-              focusedStyle={{ color: "red" }}
+              style={{ color: "blackBright" }}
+              focusedStyle={{ color: "redBright" }}
             />
           </Box>
         ))}
@@ -224,7 +239,7 @@ function App() {
       {/* Footer */}
       <Spacer />
       <Text style={{ dim: true }}>
-        tab navigate \xB7 space toggle \xB7 enter submit \xB7 q quit
+        tab navigate \xB7 space toggle \xB7 enter add \xB7 q quit
       </Text>
     </Box>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semos-labs/create-glyph",
-  "version": "0.1.74",
+  "version": "0.1.76",
   "description": "Scaffold a new Glyph terminal UI app",
   "type": "module",
   "bin": {
@@ -31,6 +31,6 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/nick-skriabin/glyph.git"
+    "url": "git+https://github.com/semos-labs/glyph.git"
   }
 }