giggles 0.3.12 → 0.3.14

package/README.md

@@ -4,10 +4,42 @@
 
 # giggles
 
-the easiest way to build terminal apps with react.
+giggles is a batteries-included react framework for building terminal apps. built on ink, it handles focus, input routing, screen navigation, and theming out of the box so you can skip the plumbing and build.
 
-```
+inspired by the [charmbracelet](https://github.com/charmbracelet) ecosystem, it comes with a rich set of UI components, hooks for focus and navigation management, and terminal utilities for things like running shell commands.
+
+to get started, run
+
+```bash
 npx create-giggles-app
 ```
 
-see [giggles.zzzzion.com](https://giggles.zzzzion.com) for docs.
+see [giggles.zzzzion.com](https://giggles.zzzzion.com) for API documentation and live demos.
+
+## sample ui components
+
+for a full list of UI components, see [giggles/ui](https://giggles.zzzzion.com/ui). here are a few samples:
+
+### viewport
+
+![viewport](https://github.com/user-attachments/assets/df6ec2fd-cb15-4359-9e3d-1f41431e7853)
+
+### markdown
+
+<img width="594" height="603" alt="image" src="https://github.com/user-attachments/assets/fc5648e4-3791-450c-adea-44b7057db071" />
+
+### code block
+
+supports syntax highlighting with [prism](https://prismjs.com/index.html#supported-languages). just import 'prism/language' and you're good to go!
+
+<img width="548" height="527" alt="code-block" src="https://github.com/user-attachments/assets/fd9952fa-55ea-4c70-aadb-7a772d791018" />
+
+### multi-select
+
+![multi-select](https://github.com/user-attachments/assets/7acc3b61-7f11-4168-bd1c-ef847a5f266a)
+
+### spinner
+
+ported from [charmbracelet/bubbles](https://github.com/charmbracelet/bubbles/blob/master/spinner/spinner.go).
+
+![spinner](https://github.com/user-attachments/assets/4d6af189-8bb5-4539-9f7e-23aeb7487737)

package/dist/{chunk-5BONVNP7.js → chunk-N2MMNJV3.js}

@@ -26,9 +26,12 @@ import { Box } from "ink";
 import { Fragment, jsx } from "react/jsx-runtime";
 var _a;
 var isTTY = typeof process !== "undefined" && ((_a = process.stdout) == null ? void 0 : _a.write);
+function FullScreenBox({ children }) {
+  const { rows, columns } = useTerminalSize();
+  return /* @__PURE__ */ jsx(Box, { height: rows, width: columns, children });
+}
 function AlternateScreen({ children, fullScreen = true }) {
   const [ready, setReady] = useState2(!isTTY);
-  const { rows, columns } = useTerminalSize();
   useEffect2(() => {
     if (!isTTY) return;
     process.stdout.write("\x1B[?1049h");
@@ -40,7 +43,7 @@ function AlternateScreen({ children, fullScreen = true }) {
     };
   }, []);
   if (!ready) return null;
-  return fullScreen ? /* @__PURE__ */ jsx(Box, { height: rows, width: columns, children }) : /* @__PURE__ */ jsx(Fragment, { children });
+  return fullScreen ? /* @__PURE__ */ jsx(FullScreenBox, { children }) : /* @__PURE__ */ jsx(Fragment, { children });
 }
 
 export {

package/dist/index.js

@@ -12,13 +12,13 @@ import {
   useKeybindingRegistry,
   useKeybindings
 } from "./chunk-CKA5JJ4B.js";
+import {
+  AlternateScreen
+} from "./chunk-N2MMNJV3.js";
 import {
   ThemeProvider,
   useTheme
 } from "./chunk-EVD6YPS3.js";
-import {
-  AlternateScreen
-} from "./chunk-5BONVNP7.js";
 
 // src/core/GigglesProvider.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/terminal/index.js

@@ -1,11 +1,59 @@
-import {
-  useShellOut,
-  useTerminalFocus
-} from "../chunk-4LEJFY5C.js";
 import {
   AlternateScreen,
   useTerminalSize
-} from "../chunk-5BONVNP7.js";
+} from "../chunk-N2MMNJV3.js";
+
+// src/terminal/hooks/useTerminalFocus.ts
+import { useEffect, useRef } from "react";
+function useTerminalFocus(callback) {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
+  useEffect(() => {
+    const handler = (data) => {
+      const str = data.toString();
+      if (str.includes("\x1B[I")) callbackRef.current(true);
+      if (str.includes("\x1B[O")) callbackRef.current(false);
+    };
+    process.stdin.on("data", handler);
+    const timer = setTimeout(() => {
+      process.stdout.write("\x1B[?1004h");
+    }, 0);
+    return () => {
+      clearTimeout(timer);
+      process.stdout.write("\x1B[?1004l");
+      process.stdin.off("data", handler);
+    };
+  }, []);
+}
+
+// src/terminal/hooks/useShellout.ts
+import { execa } from "execa";
+import { useCallback, useState } from "react";
+import { useStdin } from "ink";
+function useShellOut() {
+  const [, setRedrawCount] = useState(0);
+  const { setRawMode } = useStdin();
+  const run = useCallback(
+    async (command) => {
+      process.stdout.write("\x1B[?1049l");
+      setRawMode(false);
+      try {
+        const result = await execa(command, { stdio: "inherit", shell: true, reject: false });
+        return { exitCode: result.exitCode ?? 0 };
+      } finally {
+        setRawMode(true);
+        process.stdout.write("\x1B[?1049h");
+        process.stdout.write("\x1B[2J");
+        process.stdout.write("\x1B[H");
+        setRedrawCount((c) => c + 1);
+      }
+    },
+    [setRawMode]
+  );
+  return {
+    run
+  };
+}
 export {
   AlternateScreen,
   useShellOut,

package/dist/ui/index.js

@@ -11,10 +11,6 @@ import {
 import {
   useTheme
 } from "../chunk-EVD6YPS3.js";
-import "../chunk-4LEJFY5C.js";
-import {
-  useTerminalSize
-} from "../chunk-5BONVNP7.js";
 
 // src/ui/CommandPalette.tsx
 import { useState } from "react";
@@ -876,16 +872,10 @@ function Badge({ children, color, background, variant = "round" }) {
 import { useState as useState7 } from "react";
 import { Box as Box9, Text as Text10, measureElement as measureElement2 } from "ink";
 import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs12 } from "react/jsx-runtime";
-function parsePercentage(value, total) {
-  const pct = parseFloat(value);
-  return isNaN(pct) ? 0 : Math.floor(pct / 100 * total);
-}
 function Panel({ children, title, width, borderColor, footer, ...boxProps }) {
   const theme = useTheme();
-  const { columns } = useTerminalSize();
   const color = borderColor ?? theme.borderColor;
-  const initialWidth = typeof width === "number" ? width : typeof width === "string" && width.endsWith("%") ? parsePercentage(width, columns) : 0;
-  const [measuredWidth, setMeasuredWidth] = useState7(initialWidth);
+  const [measuredWidth, setMeasuredWidth] = useState7(typeof width === "number" ? width : 0);
   const effectiveWidth = typeof width === "number" ? width : measuredWidth;
   const renderTopBorder = () => {
     if (effectiveWidth === 0) return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "giggles",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "license": "MIT",
   "repository": {
     "type": "git",

package/dist/chunk-4LEJFY5C.js

@@ -1,56 +0,0 @@
-// src/terminal/hooks/useTerminalFocus.ts
-import { useEffect, useRef } from "react";
-function useTerminalFocus(callback) {
-  const callbackRef = useRef(callback);
-  callbackRef.current = callback;
-  useEffect(() => {
-    const handler = (data) => {
-      const str = data.toString();
-      if (str.includes("\x1B[I")) callbackRef.current(true);
-      if (str.includes("\x1B[O")) callbackRef.current(false);
-    };
-    process.stdin.on("data", handler);
-    const timer = setTimeout(() => {
-      process.stdout.write("\x1B[?1004h");
-    }, 0);
-    return () => {
-      clearTimeout(timer);
-      process.stdout.write("\x1B[?1004l");
-      process.stdin.off("data", handler);
-    };
-  }, []);
-}
-
-// src/terminal/hooks/useShellout.ts
-import { execa } from "execa";
-import { useCallback, useState } from "react";
-import { useStdin } from "ink";
-function useShellOut() {
-  const [, setRedrawCount] = useState(0);
-  const { setRawMode } = useStdin();
-  const run = useCallback(
-    async (command) => {
-      process.stdout.write("\x1B[?1049l");
-      setRawMode(false);
-      try {
-        const result = await execa(command, { stdio: "inherit", shell: true, reject: false });
-        return { exitCode: result.exitCode ?? 0 };
-      } finally {
-        setRawMode(true);
-        process.stdout.write("\x1B[?1049h");
-        process.stdout.write("\x1B[2J");
-        process.stdout.write("\x1B[H");
-        setRedrawCount((c) => c + 1);
-      }
-    },
-    [setRawMode]
-  );
-  return {
-    run
-  };
-}
-
-export {
-  useTerminalFocus,
-  useShellOut
-};