@gridland/demo 0.2.12 → 0.2.13

package/bin/cli.mjs

@@ -1,5 +1,6 @@
 #!/usr/bin/env node
 import { readFileSync } from "node:fs";
+import { execSync, spawnSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
 import { dirname, join } from "node:path";
 
@@ -17,7 +18,7 @@ if (!name || name === "--help" || name === "-h") {
     console.log(`  ${d}`);
   }
   console.log("\nExamples:");
-  console.log("  npx @gridland/demo ascii");
+  console.log("  bunx @gridland/demo ascii");
   console.log("  bunx @gridland/demo gradient");
   process.exit(name ? 0 : 1);
 }
@@ -28,5 +29,22 @@ if (!AVAILABLE_DEMOS.includes(name)) {
   process.exit(1);
 }
 
-const { runDemo } = await import("../dist/run.js");
-await runDemo(name);
+// @opentui/core uses bun:ffi for the native terminal renderer, so we must run under bun
+let hasBun = false;
+try {
+  execSync("bun --version", { stdio: "ignore" });
+  hasBun = true;
+} catch {}
+
+if (!hasBun) {
+  console.error("Error: bun is required to run gridland demos.");
+  console.error("Install it with: curl -fsSL https://bun.sh/install | bash");
+  console.error("\nThen run: bunx @gridland/demo " + name);
+  process.exit(1);
+}
+
+const runPath = join(__dirname, "../dist/run.js");
+const { status } = spawnSync("bun", ["-e", `import("${runPath}").then(m => m.runDemo("${name}"))`], {
+  stdio: "inherit",
+});
+process.exit(status ?? 1);

package/dist/run.js

@@ -299,11 +299,10 @@ function SelectInput({
       list.push(item);
       grouped.set(group, list);
     }
-    let groupIndex = 0;
+    let first = true;
     for (const [group, groupItems] of grouped) {
-      if (groupIndex > 0) {
-        rows.push({ type: "separator" });
-      }
+      if (!first) rows.push({ type: "separator" });
+      first = false;
       if (group) {
         rows.push({ type: "group", label: group });
       }
@@ -312,7 +311,6 @@ function SelectInput({
         selectable.push({ item, index });
         index++;
       }
-      groupIndex++;
     }
     return { flatRows: rows, selectableItems: selectable };
   }, [items]);
@@ -480,6 +478,7 @@ function MultiSelect({
   enableClear = true,
   highlightColor,
   checkboxColor,
+  allowEmpty = false,
   onSubmit,
   useKeyboard: useKeyboard3
 }) {
@@ -496,10 +495,8 @@ function MultiSelect({
     selected: new Set(isControlled ? controlledSelected : defaultSelected),
     submitted: false
   });
-  const currentSelected = useMemo2(
-    () => isControlled ? new Set(controlledSelected) : state.selected,
-    [isControlled, controlledSelected, state.selected]
-  );
+  const cursorRef = useRef2(0);
+  const currentSelected = isControlled ? new Set(controlledSelected) : state.selected;
   const { flatRows, selectableItems } = useMemo2(() => {
     const rows = [];
     const selectable = [];
@@ -511,11 +508,10 @@ function MultiSelect({
       list.push(item);
       grouped.set(group, list);
     }
-    let groupIndex = 0;
+    let first = true;
     for (const [group, groupItems] of grouped) {
-      if (groupIndex > 0) {
-        rows.push({ type: "separator" });
-      }
+      if (!first) rows.push({ type: "separator" });
+      first = false;
       if (group) {
         rows.push({ type: "group", label: group });
       }
@@ -524,10 +520,12 @@ function MultiSelect({
         selectable.push({ item, index });
         index++;
       }
-      groupIndex++;
     }
     return { flatRows: rows, selectableItems: selectable };
   }, [items]);
+  const hasSubmitRow = allowEmpty || currentSelected.size > 0;
+  const totalPositions = selectableItems.length + (hasSubmitRow ? 1 : 0);
+  const isOnSubmit = hasSubmitRow && state.cursor === selectableItems.length;
   const visibleCount = limit ?? VISIBLE2;
   const cursorRowIndex = flatRows.findIndex((r) => r.type === "item" && r.index === state.cursor);
   const scrollOffset = Math.max(0, Math.min(cursorRowIndex - Math.floor(visibleCount / 2), flatRows.length - visibleCount));
@@ -542,28 +540,38 @@ function MultiSelect({
   const diamondColor = invalid ? theme.error : disabled ? theme.muted : theme.accent;
   useKeyboard3?.((event) => {
     if (state.submitted || disabled) return;
+    const move = (direction) => {
+      let next = cursorRef.current + direction;
+      if (next < 0) next = totalPositions - 1;
+      if (next >= totalPositions) next = 0;
+      cursorRef.current = next;
+      dispatch({ type: "MOVE", direction, max: totalPositions });
+    };
     if (event.name === "up" || event.name === "k") {
-      dispatch({ type: "MOVE", direction: -1, max: selectableItems.length });
+      move(-1);
     } else if (event.name === "down" || event.name === "j") {
-      dispatch({ type: "MOVE", direction: 1, max: selectableItems.length });
+      move(1);
     } else if (event.name === "return") {
-      const current = selectableItems[state.cursor];
-      if (current && !current.item.disabled) {
-        const isDeselecting = currentSelected.has(current.item.value);
-        if (!isDeselecting && maxCount !== void 0 && currentSelected.size >= maxCount) return;
-        const next = new Set(currentSelected);
-        if (isDeselecting) next.delete(current.item.value);
-        else next.add(current.item.value);
-        setSelected(Array.from(next));
+      const onSubmitRow = hasSubmitRow && cursorRef.current === selectableItems.length;
+      if (onSubmitRow) {
+        dispatch({ type: "SUBMIT" });
+        onSubmit?.(Array.from(currentSelected));
+      } else {
+        const current = selectableItems[cursorRef.current];
+        if (current && !current.item.disabled) {
+          const isDeselecting = currentSelected.has(current.item.value);
+          if (!isDeselecting && maxCount !== void 0 && currentSelected.size >= maxCount) return;
+          const next = new Set(currentSelected);
+          if (isDeselecting) next.delete(current.item.value);
+          else next.add(current.item.value);
+          setSelected(Array.from(next));
+        }
       }
     } else if (event.name === "a" && enableSelectAll) {
       const enabledValues = items.filter((i) => !i.disabled).map((i) => i.value);
       setSelected(maxCount !== void 0 ? enabledValues.slice(0, maxCount) : enabledValues);
     } else if (event.name === "x" && enableClear) {
       setSelected([]);
-    } else if (event.name === "space" && currentSelected.size > 0) {
-      dispatch({ type: "SUBMIT" });
-      onSubmit?.(Array.from(currentSelected));
     }
   });
   if (state.submitted) {
@@ -661,12 +669,17 @@ function MultiSelect({
         /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: itemColor, dim: isItemDisabled }), children: item.label })
       ] }, item.key ?? String(item.value));
     }),
-    currentSelected.size > 0 && /* @__PURE__ */ jsxs6("text", { children: [
+    hasSubmitRow && /* @__PURE__ */ jsxs6("text", { children: [
       /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: theme.muted }), children: [
         BAR2,
         " "
       ] }),
-      /* @__PURE__ */ jsx10("span", { style: textStyle({ dim: true }), children: "  space to submit" })
+      /* @__PURE__ */ jsxs6("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : void 0 }), children: [
+        isOnSubmit ? CURSOR2 : " ",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : theme.muted }), children: "\u21B3 " }),
+      /* @__PURE__ */ jsx10("span", { style: textStyle({ fg: isOnSubmit ? resolvedHighlight : theme.text }), children: "Submit" })
     ] })
   ] });
 }
@@ -1262,7 +1275,7 @@ function InstallBox() {
       flexShrink: 0,
       children: /* @__PURE__ */ jsxs14("text", { children: [
         /* @__PURE__ */ jsx20("span", { style: textStyle({ dim: true }), children: "$ " }),
-        /* @__PURE__ */ jsx20("span", { style: textStyle({ bold: true }), children: "npm create " }),
+        /* @__PURE__ */ jsx20("span", { style: textStyle({ bold: true }), children: "bun create " }),
         /* @__PURE__ */ jsx20("span", { style: textStyle({ fg: theme.accent }), children: "gridland" })
       ] })
     }
@@ -1533,7 +1546,7 @@ function LandingApp({ useKeyboard: useKeyboard3 }) {
                   flexShrink: 0,
                   children: /* @__PURE__ */ jsxs17("text", { children: [
                     /* @__PURE__ */ jsx24("span", { style: textStyle({ dim: true }), children: "$ " }),
-                    /* @__PURE__ */ jsx24("span", { style: textStyle({ bold: true }), children: "npx " }),
+                    /* @__PURE__ */ jsx24("span", { style: textStyle({ bold: true }), children: "bunx " }),
                     /* @__PURE__ */ jsx24("span", { style: textStyle({ fg: theme.accent }), children: "@gridland/demo landing" })
                   ] })
                 }
@@ -1684,7 +1697,6 @@ function MultiSelectApp() {
       { key: "enter", label: "select" },
       { key: "a", label: "all" },
       { key: "x", label: "clear" },
-      { key: "space", label: "submit" },
       { key: "q", label: "quit" }
     ] })
   ] });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridland/demo",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "type": "module",
   "description": "Run gridland component demos from anywhere",
   "bin": {