@timmo001/groundwork-tui 0.9.31 → 0.9.32

package/README.md

@@ -8,8 +8,10 @@ look and keys.
 import { AppHeader, formatHelpBar, loadTheme } from "@timmo001/groundwork-tui";
 ```
 
-- `loadTheme` reads `GW_THEME` and `GW_MODE` (Base and dark by default), and
-  `themeFor` picks a theme and mode directly.
+- `loadTheme` reads `GW_THEME` and `GW_MODE`. Without `GW_THEME` it's the
+  desktop's Omarchy theme where there is one, otherwise Base and dark.
+  `themeFor` picks a theme and mode directly, and `omarchyThemeFor` maps an
+  Omarchy `colors.toml`.
 - `AppHeader` and `PaneHeader` are one-row titles. `HeaderBlock` is the
   app's name as ASCII art over `formatHeaderBar`, a breadcrumb with a status
   dot and details that drop off when the terminal is narrow.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timmo001/groundwork-tui",
-  "version": "0.9.31",
+  "version": "0.9.32",
   "description": "Groundwork's terminal components: OpenTUI renderables on the terminal tokens",
   "license": "Apache-2.0",
   "type": "module",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@opentui/core": "0.8.1",
-    "@timmo001/groundwork-tokens": "0.9.31",
+    "@timmo001/groundwork-tokens": "0.9.32",
     "effect": "4.1.1",
     "fuse.js": "7.5.0"
   },

package/src/index.ts

@@ -73,7 +73,17 @@ export {
 
 export { surfaceBackground } from "./styles.ts";
 
-export { DEFAULT_THEME, loadTheme, themeFor, type Theme } from "./theme.ts";
+export {
+  DEFAULT_THEME,
+  loadTheme,
+  omarchyThemeFor,
+  resolveTheme,
+  themeFor,
+  themeOptions,
+  type Theme,
+  type ThemeOption,
+  type ThemePick,
+} from "./theme.ts";
 
 export { Tile, type TileOptions } from "./tile.ts";
 

package/src/menu-grid.ts

@@ -1,7 +1,7 @@
 /**
  * The menu grid: sections of wrapping tiles, each under a section heading,
  * in a scroll box the app owns. The arrow keys move to the nearest tile in
- * that direction, across sections too.
+ * that direction, across sections too, and a click picks a tile.
  *
  * @module
  */
@@ -33,6 +33,8 @@ export interface MenuGridOptions {
   readonly scroll: ScrollBoxRenderable;
   /** 28 columns by default */
   readonly tileWidth?: number;
+  /** Called with a tile's id when it's clicked, after it's highlighted */
+  readonly onActivate?: (id: string) => void;
 }
 
 interface GridSection {
@@ -63,6 +65,7 @@ export class MenuGrid {
   private readonly theme: Theme;
   private readonly scroll: ScrollBoxRenderable;
   private readonly tileWidth: number;
+  private readonly onActivate: ((id: string) => void) | undefined;
   private sections: GridSection[] = [];
   private readonly tiles = new Map<string, Tile>();
   private sectionIndex = 0;
@@ -74,6 +77,7 @@ export class MenuGrid {
     this.theme = theme;
     this.scroll = options.scroll;
     this.tileWidth = options.tileWidth ?? 28;
+    this.onActivate = options.onActivate;
 
     renderer.on("resize", () => {
       if (this.focused) this.applySelection();
@@ -116,9 +120,11 @@ export class MenuGrid {
 
       if (heading) this.scroll.add(heading.box);
 
+      const sectionIndex = this.sections.length;
+
       this.sections.push({ items: section.items, heading });
 
-      for (const item of section.items) {
+      for (const [tileIndex, item] of section.items.entries()) {
         const tile = new Tile(this.renderer, this.theme, {
           id: `${this.scroll.id}-tile-${item.id}`,
           primary: item.primary,
@@ -127,6 +133,16 @@ export class MenuGrid {
           width: this.tileWidth,
         });
 
+        // A click highlights the tile and runs it, as Enter does in the app
+        tile.box.onMouseDown = (event) => {
+          if (event.button !== 0) return;
+
+          this.sectionIndex = sectionIndex;
+          this.tileIndex = tileIndex;
+          this.focus();
+          this.onActivate?.(item.id);
+        };
+
         this.tiles.set(item.id, tile);
         this.scroll.add(tile.box);
       }

package/src/menu-list.ts

@@ -60,7 +60,7 @@ export interface MenuListOptions<Item extends MenuListItem> {
   readonly items: readonly Item[];
   /** Active color theme */
   readonly theme: Theme;
-  /** Called when the user presses Enter on an item */
+  /** Called when the user presses Enter on an item, or clicks it */
   readonly onSelect: (item: Item) => void;
   /** Called when the highlighted item changes */
   readonly onSelectionChanged?: (item: Item) => void;
@@ -99,8 +99,8 @@ const isPrintable = (key: KeyEvent): boolean =>
 
 /**
  * A scrolling menu of two-line rows: the icon and title, then the
- * description. Up and Down move, Enter selects, Escape clears the filter or
- * goes back, and Backspace removes a filter character or goes back.
+ * description. Up and Down move, Enter or a click selects, Escape clears the
+ * filter or goes back, and Backspace removes a filter character or goes back.
  */
 export class MenuList<
   Item extends MenuListItem = MenuListItem,
@@ -346,11 +346,7 @@ export class MenuList<
     }
 
     if (key.name === "return") {
-      const entry = this.rows[this.selectedIndex]?.entry;
-
-      if (entry?.kind === "item") this.options.onSelect(entry.item);
-      else if (entry?.kind === "next") this.turnPage(1);
-      else if (entry?.kind === "previous") this.turnPage(-1);
+      this.activate(this.selectedIndex);
 
       return true;
     }
@@ -366,6 +362,15 @@ export class MenuList<
     return super.handleKeyPress(key);
   }
 
+  /** Runs a row: selects its item, or turns the page. */
+  private activate(index: number): void {
+    const entry = this.rows[index]?.entry;
+
+    if (entry?.kind === "item") this.options.onSelect(entry.item);
+    else if (entry?.kind === "next") this.turnPage(1);
+    else if (entry?.kind === "previous") this.turnPage(-1);
+  }
+
   /** `/` opens the filter, which then takes every key until Escape or Enter. */
   private handleSlashFilter(key: KeyEvent): boolean {
     if (!this.slashFilterOpen) {
@@ -646,7 +651,29 @@ export class MenuList<
     container.add(iconCol);
     container.add(textCol);
 
-    return { container, iconText, titleText, descText, entry };
+    const row: MenuRow<Item> = {
+      container,
+      iconText,
+      titleText,
+      descText,
+      entry,
+    };
+
+    // A click selects the row and runs it, as Enter does
+    container.onMouseDown = (event) => {
+      const rowIndex = this.rows.indexOf(row);
+
+      if (event.button !== 0 || rowIndex < 0 || row.entry.kind === "group")
+        return;
+
+      this.focus();
+
+      if (rowIndex !== this.selectedIndex) this.applySelection(rowIndex);
+
+      this.activate(rowIndex);
+    };
+
+    return row;
   }
 
   private paintRow(row: MenuRow<Item>, selected: boolean): void {

package/src/theme.ts

@@ -1,12 +1,20 @@
 /**
  * Terminal colors from Groundwork's tokens: the roles of one theme and mode,
  * placed into the slots the terminal components use, and picked with
- * `GW_THEME` and `GW_MODE` (Base and dark by default).
+ * `GW_THEME` and `GW_MODE`. With no `GW_THEME`, it's the desktop's Omarchy
+ * theme where there is one, otherwise Base and dark.
  *
  * @module
  */
+import { readOmarchyTheme } from "@timmo001/groundwork-tokens/omarchy-current";
 import { opentuiThemes } from "@timmo001/groundwork-tokens/opentui";
-import { Config, Effect } from "effect";
+import { coreThemeChoices } from "@timmo001/groundwork-tokens/page";
+import {
+  hexModes,
+  omarchyTheme,
+  runtimeTheme,
+} from "@timmo001/groundwork-tokens/runtime";
+import { Config, Effect, Option, Result } from "effect";
 
 /** Semantic color slots for the TUI */
 export interface Theme {
@@ -44,26 +52,33 @@ export interface Theme {
 
 type ThemeId = keyof typeof opentuiThemes;
 
-type Roles = (typeof opentuiThemes)["base"]["dark"];
-
-/** Places a theme's terminal roles into the TUI's slots. */
-const fromRoles = (roles: Roles): Theme => ({
-  bg: roles["surface-lower"],
-  bgElevated: roles["surface-default"],
-  bgSelected: roles["fill-neutral-selected"],
-  bgInput: roles["surface-raised"],
-  accent: roles.accent,
-  accentFg: roles["on-accent"],
-  surface: roles["border-normal"],
-  fg: roles["text-primary"],
-  fgMuted: roles["text-secondary"],
-  fgSubtle: roles["text-disabled"],
-  fgGhost: roles["border-loud"],
-  green: roles.success,
-  red: roles.danger,
-  yellow: roles.warning,
-  transparent: false,
-});
+type RoleName = keyof (typeof opentuiThemes)["base"]["dark"];
+
+/**
+ * Places a theme's terminal roles into the TUI's slots. A theme solved at
+ * runtime has the same roles; Base's dark fills any it lacks.
+ */
+const fromRoles = (roles: Partial<Record<RoleName, string>>): Theme => {
+  const role = (name: RoleName) => roles[name] ?? opentuiThemes.base.dark[name];
+
+  return {
+    bg: role("surface-lower"),
+    bgElevated: role("surface-default"),
+    bgSelected: role("fill-neutral-selected"),
+    bgInput: role("surface-raised"),
+    accent: role("accent"),
+    accentFg: role("on-accent"),
+    surface: role("border-normal"),
+    fg: role("text-primary"),
+    fgMuted: role("text-secondary"),
+    fgSubtle: role("text-disabled"),
+    fgGhost: role("border-loud"),
+    green: role("success"),
+    red: role("danger"),
+    yellow: role("warning"),
+    transparent: false,
+  };
+};
 
 const isTheme = (id: string): id is ThemeId => id in opentuiThemes;
 
@@ -85,16 +100,105 @@ export const themeFor = (id: string, mode: string): Theme => {
 };
 
 /**
- * Loads the theme from `GW_THEME` (a core theme's id) and `GW_MODE` (`light`,
- * `dark` or `darker`), falling back to Base and dark.
+ * An Omarchy `colors.toml`'s slots in `mode`, or in the theme's own mode when
+ * it doesn't have that one. Undefined when the file doesn't map.
+ */
+export const omarchyThemeFor = (
+  colors: string,
+  mode?: string,
+): Theme | undefined => {
+  const parsed = omarchyTheme(colors);
+
+  if (Result.isFailure(parsed)) return undefined;
+
+  const modes = hexModes(runtimeTheme(parsed.success).theme);
+
+  const roles =
+    (mode === undefined ? undefined : modes[mode]) ??
+    modes[parsed.success.mode];
+
+  return roles === undefined ? undefined : fromRoles(roles);
+};
+
+/** A theme a TUI can offer in a picker, with the modes it has. */
+export interface ThemeOption {
+  readonly id: string;
+  readonly name: string;
+  readonly modes: readonly string[];
+}
+
+/**
+ * The themes to offer in a picker: the desktop's Omarchy theme first where
+ * there is one, then the core themes.
+ */
+export const themeOptions: Effect.Effect<readonly ThemeOption[]> = Effect.gen(
+  function* () {
+    const core = coreThemeChoices.map(({ id, name }) => ({
+      id,
+      name,
+      modes: Object.keys(isTheme(id) ? opentuiThemes[id] : {}),
+    }));
+
+    const current = yield* Effect.promise(readOmarchyTheme);
+    const parsed = current === null ? undefined : omarchyTheme(current.colors);
+
+    if (current === null || parsed === undefined || Result.isFailure(parsed))
+      return core;
+
+    const omarchy = {
+      id: "omarchy",
+      name: `Omarchy (${current.name})`,
+      modes: Object.keys(hexModes(runtimeTheme(parsed.success).theme)),
+    };
+
+    return [omarchy, ...core];
+  },
+);
+
+/** A theme and mode to show; either can be left to the defaults. */
+export interface ThemePick {
+  /** A core theme's id, or `omarchy` for the desktop's Omarchy theme */
+  readonly theme?: string | undefined;
+  /** `light`, `dark` or `darker` */
+  readonly mode?: string | undefined;
+}
+
+/**
+ * A pick's slots. Without a theme it's the desktop's Omarchy theme where
+ * there is one, otherwise Base; without a mode it's the Omarchy theme's own,
+ * otherwise dark.
+ */
+export const resolveTheme = (pick: ThemePick): Effect.Effect<Theme> =>
+  Effect.gen(function* () {
+    if (pick.theme === undefined || pick.theme === "omarchy") {
+      const current = yield* Effect.promise(readOmarchyTheme);
+
+      const theme =
+        current === null
+          ? undefined
+          : omarchyThemeFor(current.colors, pick.mode);
+
+      if (theme !== undefined) return theme;
+    }
+
+    return themeFor(pick.theme ?? "base", pick.mode ?? "dark");
+  });
+
+/**
+ * Loads the theme from `GW_THEME` and `GW_MODE` (`light`, `dark` or
+ * `darker`), as `resolveTheme` picks it: `GW_THEME` is a core theme's id, or
+ * `omarchy` for the desktop's Omarchy theme, which is also the default where
+ * Omarchy is installed.
  */
 export const loadTheme: Effect.Effect<Theme> = Effect.gen(function* () {
-  const id = yield* Config.String("GW_THEME").pipe(Config.withDefault("base"));
+  const theme = yield* Config.option(Config.String("GW_THEME"));
 
-  const mode = yield* Config.Literals(
-    ["light", "dark", "darker"],
-    "GW_MODE",
-  ).pipe(Config.withDefault("dark"));
+  const mode = yield* Config.option(
+    Config.Literals(["light", "dark", "darker"], "GW_MODE"),
+  );
 
-  return themeFor(id, mode);
+  return yield* resolveTheme({
+    theme: Option.getOrUndefined(theme),
+    mode: Option.getOrUndefined(mode),
+  });
 }).pipe(Effect.orElseSucceed(() => DEFAULT_THEME));