@semos-labs/create-glyph 0.1.79 → 0.1.81

package/README.md

@@ -0,0 +1,58 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/semos-labs/glyph/main/images/Glyph.png" alt="Glyph" width="200">
+</p>
+
+<h1 align="center">create-glyph</h1>
+
+<p align="center">
+  <strong>Scaffold a new <a href="https://github.com/semos-labs/glyph">Glyph</a> terminal UI app in seconds</strong>
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@semos-labs/create-glyph"><img src="https://img.shields.io/npm/v/@semos-labs/create-glyph?color=crimson&logo=npm" alt="npm version"></a>
+  <img src="https://img.shields.io/badge/License-MIT-blue" alt="MIT License">
+</p>
+
+---
+
+## Usage
+
+```bash
+# bun
+bun create @semos-labs/glyph my-app
+
+# npm
+npm create @semos-labs/glyph my-app
+
+# pnpm
+pnpm create @semos-labs/glyph my-app
+
+# yarn
+yarn create @semos-labs/glyph my-app
+```
+
+This will create a `my-app` directory with a ready-to-run Glyph project — a small todo app that demonstrates components, focus management, keybinds, and more.
+
+```bash
+cd my-app && bun dev
+```
+
+## What you get
+
+- **TypeScript** project with `tsconfig.json` pre-configured
+- **Example app** showcasing `Box`, `Text`, `Input`, `Button`, `Checkbox`, `Progress`, `Keybind`, `JumpNav`, and more
+- **Dependencies** installed automatically
+
+## What is Glyph?
+
+[Glyph](https://github.com/semos-labs/glyph) is a React renderer for the terminal. Build real TUI applications with the same component model you use on the web — flexbox layout (powered by Yoga), focus management, keyboard input, and efficient diff-based rendering.
+
+```
+npm install @semos-labs/glyph
+```
+
+→ **[Full documentation & examples](https://github.com/semos-labs/glyph)**
+
+## License
+
+MIT

package/dist/index.js

@@ -106,11 +106,12 @@ import {
   Button,
   Checkbox,
   Keybind,
+  JumpNav,
   Progress,
   Spacer,
   useApp,
 } from "@semos-labs/glyph";
-import type { Key, InputHandle } from "@semos-labs/glyph";
+import type { Key, InputHandle, CheckboxHandle } 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
 
@@ -127,6 +128,7 @@ let nextId = 1;
 function App() {
   const { exit } = useApp();
   const inputRef = useRef<InputHandle>(null);
+  const checkboxRefs = useRef(new Map<number, CheckboxHandle>());
 
   const [todos, setTodos] = useState<Todo[]>([
     { id: nextId++, text: "Learn Glyph basics", done: true },
@@ -167,7 +169,17 @@ function App() {
     setTodos((prev) => prev.filter((t) => t.id !== id));
   }, []);
 
+  const handleDeleteFocused = useCallback(() => {
+    for (const [id, handle] of checkboxRefs.current) {
+      if (handle.isFocused) {
+        handleDelete(id);
+        break;
+      }
+    }
+  }, [handleDelete]);
+
   return (
+    <JumpNav>
     <Box
       style={{
         flexDirection: "column",
@@ -177,8 +189,9 @@ function App() {
         gap: 1,
       }}
     >
-      {/* Quit shortcut */}
+      {/* Shortcuts */}
       <Keybind keypress="q" onPress={() => exit()} />
+      <Keybind keypress="ctrl+d" onPress={handleDeleteFocused} />
 
       {/* Header */}
       <Box style={{ flexDirection: "row", alignItems: "center" }}>
@@ -200,14 +213,14 @@ function App() {
           onChange={setNewTodo}
           onKeyPress={handleInputKey}
           placeholder="What needs to be done?"
-          style={{ flexGrow: 1, border: "round", borderColor: "blackBright", paddingX: 1 }}
-          focusedStyle={{ border: "round", borderColor: "cyan", color: "white", paddingX: 1 }}
+          style={{ flexGrow: 1, paddingX: 1, color: "white" }}
+          focusedStyle={{ paddingX: 1, color: "white", bg: "blackBright" }}
         />
         <Button
           label="  add  "
           onPress={handleAdd}
-          style={{ border: "round", borderColor: "blackBright", paddingX: 2 }}
-          focusedStyle={{ border: "round", borderColor: "cyan", bg: "cyan", color: "black", paddingX: 2 }}
+          style={{ color: "blackBright" }}
+          focusedStyle={{ bg: "cyan", color: "black" }}
         />
       </Box>
 
@@ -217,31 +230,28 @@ function App() {
           <Text style={{ dim: true, italic: true }}>No todos yet. Add one above!</Text>
         )}
         {todos.map((todo) => (
-          <Box key={todo.id} style={{ flexDirection: "row", gap: 1, alignItems: "center" }}>
-            <Checkbox
-              checked={todo.done}
-              onChange={() => handleToggle(todo.id)}
-              label={todo.text}
-              style={todo.done ? { dim: true, color: "blackBright" } : { color: "white" }}
-              focusedStyle={{ color: "black", bg: "cyan", bold: true }}
-            />
-            <Spacer />
-            <Button
-              label=" \xD7 "
-              onPress={() => handleDelete(todo.id)}
-              style={{ color: "blackBright" }}
-              focusedStyle={{ color: "black", bg: "red", bold: true }}
-            />
-          </Box>
+          <Checkbox
+            key={todo.id}
+            ref={(h) => {
+              if (h) checkboxRefs.current.set(todo.id, h);
+              else checkboxRefs.current.delete(todo.id);
+            }}
+            checked={todo.done}
+            onChange={() => handleToggle(todo.id)}
+            label={todo.text}
+            style={todo.done ? { dim: true, color: "blackBright" } : { color: "white" }}
+            focusedStyle={{ color: "black", bg: "cyan", bold: true }}
+          />
         ))}
       </Box>
 
       {/* Footer */}
       <Spacer />
       <Text style={{ dim: true }}>
-        tab navigate \xB7 space toggle \xB7 enter add \xB7 q quit
+        tab navigate \xB7 ctrl+o jump \xB7 space toggle \xB7 enter add \xB7 ctrl+d delete \xB7 q quit
       </Text>
     </Box>
+    </JumpNav>
   );
 }
 
@@ -301,15 +311,11 @@ function main() {
   const dirName = path.basename(targetDir);
   const pm = detectPackageManager();
   console.log();
-  console.log(`  ${cyan("\u25C6")} ${bold("Creating")} ${green(dirName)}${dim("...")}`);
   if (fs.existsSync(targetDir)) {
     const entries = fs.readdirSync(targetDir);
     if (entries.length > 0) {
-      console.log(
-        `
-  ${red("\u2717")} Directory ${bold(dirName)} already exists and is not empty.
-`
-      );
+      console.log(`  ${red("\u2717")} Directory ${bold(dirName)} already exists and is not empty.
+`);
       process.exit(1);
     }
   }
@@ -321,31 +327,22 @@ function main() {
     [".gitignore", templateGitignore()]
   ];
   for (const [filePath, content] of files) {
-    const fullPath = path.join(targetDir, filePath);
-    fs.writeFileSync(fullPath, content, "utf-8");
-    console.log(`  ${dim("\u251C")} ${green("+")} ${filePath}`);
+    fs.writeFileSync(path.join(targetDir, filePath), content, "utf-8");
   }
-  console.log();
-  console.log(`  ${cyan("\u25C6")} ${bold("Installing dependencies")}${dim("...")}`);
-  console.log();
+  console.log(`  ${green("\u2713")} Created project structure`);
   try {
     execSync(getInstallCommand(pm), {
       cwd: targetDir,
-      stdio: "inherit"
+      stdio: "pipe"
     });
-    console.log();
-    console.log(`  ${green("\u2713")} Dependencies installed!`);
+    console.log(`  ${green("\u2713")} Installed dependencies`);
   } catch {
-    console.log();
-    console.log(`  ${yellow("\u26A0")} Install failed. You can run it manually:`);
-    console.log(`    ${cyan("cd")} ${dirName} && ${cyan(getInstallCommand(pm))}`);
+    console.log(`  ${yellow("\u26A0")} Could not install dependencies \u2014 run ${cyan(getInstallCommand(pm))} manually`);
   }
+  console.log(`  ${green("\u2713")} Ready to build something great`);
   console.log();
-  console.log(`  ${green("\u2713")} ${bold(dirName)} is ready! Run this to get started:`);
-  console.log();
-  console.log(`    ${bold(cyan(`cd ${dirName} && ${getRunCommand(pm)}`))}`);
-  console.log();
-  console.log(`  ${dim("Happy hacking! \u2726")}`);
+  console.log(`  ${dim("Next:")}`);
+  console.log(`  ${bold(cyan(`cd ${dirName} && ${getRunCommand(pm)}`))}`);
   console.log();
 }
 main();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semos-labs/create-glyph",
-  "version": "0.1.79",
+  "version": "0.1.81",
   "description": "Scaffold a new Glyph terminal UI app",
   "type": "module",
   "bin": {