@hoox-sh/hoox-tui 0.3.0 → 0.3.2

package/src/components/ui/select.tsx

@@ -5,23 +5,11 @@
 
 /** @jsxImportSource @opentui/react */
 /**
- * SelectModal — a thin wrapper combining @opentui-ui/dialog modal behavior
- * with keyboard-navigable option selection, styled with Hoox color tokens.
- *
- * Keyboard navigation:
- *   - Up/Down (or j/k): move selection
- *   - Enter: confirm selection
- *   - Escape: dismiss
- *
- * All colors use Colors tokens from @hoox-sh/hoox-shared (no hardcoded hex).
+ * SelectModal — keyboard-navigable option picker via in-house DialogHandle.
+ * Does not depend on @opentui-ui/dialog (nested OpenTUI crash on global install).
  */
-import { useState } from "react";
-import {
-  type DialogId,
-  type PromptContext,
-  useDialogKeyboard,
-} from "@opentui-ui/dialog/react";
-import { Colors } from "@hoox-sh/hoox-shared";
+import type { DialogHandle } from "./dialog";
+import { showChoice } from "./dialog";
 
 // ── Types ──────────────────────────────────────────────────────────────────
 
@@ -45,153 +33,17 @@ export interface SelectModalOptions {
   closeOnClickOutside?: boolean;
 }
 
-/** Dialog handle — the subset of useDialog() needed by SelectModal */
-export interface SelectDialogHandle {
-  prompt<T>(options: {
-    content: (ctx: PromptContext<T>) => unknown;
-    fallback?: T;
-    closeOnClickOutside?: boolean;
-  }): Promise<T | undefined>;
-}
-
-// ── Internal: keyboard-navigable option list ───────────────────────────────
-
-/** Props for the selectable option list rendered inside the dialog */
-interface SelectListProps {
-  options: SelectOption[];
-  accentColor: string;
-  foregroundColor: string;
-  mutedColor: string;
-  highlightColor: string;
-  resolve: (value: string) => void;
-  dismiss: () => void;
-  dialogId: DialogId;
-}
-
-/**
- * Internal component that renders a keyboard-navigable option list.
- * Uses useDialogKeyboard scoped to the dialog so that only the topmost
- * dialog receives keyboard events.
- */
-function SelectList({
-  options,
-  accentColor,
-  foregroundColor,
-  mutedColor,
-  highlightColor,
-  resolve,
-  dismiss,
-  dialogId,
-}: SelectListProps) {
-  const [selectedIndex, setSelectedIndex] = useState(0);
-
-  useDialogKeyboard((key) => {
-    if (key.name === "down" || key.name === "j") {
-      setSelectedIndex((prev) => (prev < options.length - 1 ? prev + 1 : 0));
-    }
-    if (key.name === "up" || key.name === "k") {
-      setSelectedIndex((prev) => (prev > 0 ? prev - 1 : options.length - 1));
-    }
-    if (key.name === "return") {
-      const selected = options[selectedIndex];
-      if (selected) resolve(selected.key);
-    }
-    if (key.name === "escape") {
-      dismiss();
-    }
-  }, dialogId);
-
-  return (
-    <box flexDirection="column" gap={0}>
-      {options.map((opt, idx) => (
-        <box flexDirection="row" gap={2} paddingLeft={1} paddingRight={1}>
-          {/* Selection indicator */}
-          <text fg={idx === selectedIndex ? accentColor : mutedColor}>
-            {idx === selectedIndex ? "▶" : " "}
-          </text>
-          {/* Option label */}
-          <text
-            fg={idx === selectedIndex ? foregroundColor : mutedColor}
-            bg={idx === selectedIndex ? highlightColor : undefined}
-            onMouseUp={() => resolve(opt.key)}
-          >
-            {opt.label}
-          </text>
-          {/* Optional description */}
-          {opt.description && (
-            <text dim fg={mutedColor}>
-              — {opt.description}
-            </text>
-          )}
-        </box>
-      ))}
-    </box>
-  );
-}
-
-// ── Public API ─────────────────────────────────────────────────────────────
-
 /**
  * Show a modal select dialog with keyboard navigation.
- *
- * Returns the selected option's `key`, or `undefined` if dismissed
- * (via Escape, clicking outside, or pressing Cancel).
- *
- * Keyboard controls:
- *   - Up/Down or j/k: move selection highlight
- *   - Enter: confirm current selection
- *   - Escape: dismiss
- *
- * @example
- * const chosen = await showSelectModal(dialog, {
- *   title: "Select Worker",
- *   options: [
- *     { key: "worker-a", label: "Alpha Worker", description: "US-East" },
- *     { key: "worker-b", label: "Beta Worker",  description: "EU-West" },
- *   ],
- * })
+ * Returns the selected option's `key`, or `undefined` if dismissed.
  */
 export async function showSelectModal(
-  dialog: SelectDialogHandle,
+  dialog: DialogHandle,
   opts: SelectModalOptions
 ): Promise<string | undefined> {
-  const { title, options, closeOnClickOutside = true } = opts;
-
-  return dialog.prompt<string>({
-    content: (ctx: PromptContext<string>) => (
-      <box flexDirection="column" padding={1} gap={1}>
-        {/* Header */}
-        <text fg={Colors.accent}>
-          <b>{title}</b>
-        </text>
-        <text dim fg={Colors.muted}>
-          Use ↑↓ to navigate, Enter to select, Esc to cancel
-        </text>
-
-        {/* Divider */}
-        <box height={1} />
-
-        {/* Selectable list */}
-        <SelectList
-          options={options}
-          accentColor={Colors.accent}
-          foregroundColor={Colors.foreground}
-          mutedColor={Colors.muted}
-          highlightColor={Colors.card}
-          resolve={ctx.resolve}
-          dismiss={ctx.dismiss}
-          dialogId={ctx.dialogId}
-        />
-
-        {/* Footer actions */}
-        <box flexDirection="row" justifyContent="flex-end" paddingTop={1}>
-          <text fg={Colors.muted} onMouseUp={ctx.dismiss}>
-            {"  Cancel  "}
-          </text>
-        </box>
-      </box>
-    ),
-    fallback: undefined,
-    closeOnClickOutside,
+  return showChoice(dialog, {
+    title: opts.title,
+    choices: opts.options,
+    closeOnClickOutside: opts.closeOnClickOutside ?? true,
   });
 }

package/src/components/ui/toast.tsx

@@ -4,15 +4,16 @@
  */
 
 /**
- * Thin wrappers around @opentui-ui/toast with Hoox color token defaults.
- * Provides toast helper functions (success, error, warning, info, loading)
- * pre-configured with Hoox design system colors and durations.
+ * Fail-closed toast helpers.
  *
- * All helpers use the global toast singleton from @opentui-ui/toast.
- * A ToasterRenderable must be initialized in the app root before calling
- * these functions (see app.tsx).
+ * `@opentui-ui/toast@0.0.5` peers on old OpenTUI and often installs a nested
+ * `@opentui/core` that re-registers env vars (e.g. OPENTUI_FORCE_WCWIDTH)
+ * with a conflicting schema — that hard-crashes `hoox-tui` on global install.
+ *
+ * We therefore never import `@opentui-ui/toast` at module load. Helpers are
+ * pure no-ops (return a stub id). Connection/auth UX uses the status bar
+ * and service-store alerts instead.
  */
-import { toast, TOAST_DURATION } from "@opentui-ui/toast";
 import { Colors } from "@hoox-sh/hoox-shared";
 
 // ── Types ──────────────────────────────────────────────────────────────────
@@ -29,128 +30,79 @@ export interface ToastOptions {
   action?: { label: string; onClick: () => void };
   /** Show a close button on the toast (default: false) */
   closeButton?: boolean;
+  /** Optional id when updating an existing toast */
+  id?: ToastId;
 }
 
 /** Returned toast ID for programmatic control */
 export type ToastId = string | number;
 
-// ── Hoox-styled toast style overrides ──────────────────────────────────────
-
-/** Base style shared across all toast types */
-const baseStyle = {
-  backgroundColor: Colors.card,
-  foregroundColor: Colors.foreground,
-  borderColor: Colors.border,
-  paddingX: 1,
-  paddingY: 0,
-};
+// Keep style tokens referenced so callers/tests can still import Colors path
+// and so future re-enable of a compatible toast lib has defaults ready.
+void Colors;
 
-/** Per-type border color overrides using Hoox design tokens */
-const hooxTypeStyles = {
-  success: { borderColor: Colors.success },
-  error: { borderColor: Colors.error },
-  warning: { borderColor: Colors.warning },
-  info: { borderColor: Colors.highlight },
-  loading: { borderColor: Colors.dim },
-};
+let toastSeq = 0;
+function nextId(): ToastId {
+  toastSeq += 1;
+  return `toast-noop-${toastSeq}`;
+}
 
-// ── Toast helper functions ─────────────────────────────────────────────────
+// ── Toast helper functions (no-op, fail-closed) ────────────────────────────
 
 /**
  * Show a success toast notification.
- * Uses green border (Colors.success) and 3s auto-dismiss.
- *
- * @example
- * toastSuccess("Worker deployed successfully")
+ * Currently a no-op (see module doc) — status bar / alerts carry feedback.
  */
-export function toastSuccess(message: string, options?: ToastOptions): ToastId {
-  return toast.success(message, {
-    ...options,
-    style: { ...baseStyle, ...hooxTypeStyles.success },
-    duration: options?.duration ?? TOAST_DURATION.SHORT,
-  });
+export function toastSuccess(
+  _message: string,
+  _options?: ToastOptions
+): ToastId {
+  return nextId();
 }
 
 /**
  * Show an error toast notification.
- * Uses red border (Colors.error) and 6s auto-dismiss.
- *
- * @example
- * toastError("Failed to connect to API", { description: "Check your network" })
+ * Currently a no-op (see module doc).
  */
-export function toastError(message: string, options?: ToastOptions): ToastId {
-  return toast.error(message, {
-    ...options,
-    style: { ...baseStyle, ...hooxTypeStyles.error },
-    duration: options?.duration ?? TOAST_DURATION.LONG,
-  });
+export function toastError(_message: string, _options?: ToastOptions): ToastId {
+  return nextId();
 }
 
 /**
  * Show a warning toast notification.
- * Uses amber border (Colors.warning) and 6s auto-dismiss.
- *
- * @example
- * toastWarning("Rate limit approaching", { description: "Slow down requests" })
+ * Currently a no-op (see module doc).
  */
-export function toastWarning(message: string, options?: ToastOptions): ToastId {
-  return toast.warning(message, {
-    ...options,
-    style: { ...baseStyle, ...hooxTypeStyles.warning },
-    duration: options?.duration ?? TOAST_DURATION.LONG,
-  });
+export function toastWarning(
+  _message: string,
+  _options?: ToastOptions
+): ToastId {
+  return nextId();
 }
 
 /**
  * Show an info toast notification.
- * Uses accent border (Colors.accent, orange) and 4s auto-dismiss.
- *
- * @example
- * toastInfo("New version available", { action: { label: "Update", onClick: () => {} } })
+ * Currently a no-op (see module doc).
  */
-export function toastInfo(message: string, options?: ToastOptions): ToastId {
-  return toast.info(message, {
-    ...options,
-    style: { ...baseStyle, ...hooxTypeStyles.info },
-    duration: options?.duration ?? TOAST_DURATION.DEFAULT,
-  });
+export function toastInfo(_message: string, _options?: ToastOptions): ToastId {
+  return nextId();
 }
 
 /**
  * Show a persistent loading toast notification.
- * Uses muted border (Colors.muted) and does NOT auto-dismiss.
- * Returns the toast ID so it can be updated to success/error later.
- *
- * @example
- * const id = toastLoading("Deploying worker...")
- * try {
- *   await deploy()
- *   toastSuccess("Deployed!", { id })
- * } catch {
- *   toastError("Deploy failed", { id })
- * }
+ * Currently a no-op (see module doc).
  */
 export function toastLoading(
-  message: string,
-  options?: Omit<ToastOptions, "duration">
+  _message: string,
+  _options?: Omit<ToastOptions, "duration">
 ): ToastId {
-  return toast.loading(message, {
-    ...options,
-    style: { ...baseStyle, ...hooxTypeStyles.loading },
-    duration: TOAST_DURATION.PERSISTENT,
-  } as ToastOptions);
+  return nextId();
 }
 
 /**
- * Dismiss a specific toast or all toasts.
- * Thin wrapper around toast.dismiss().
- *
- * @example
- * dismissToast(id)   // dismiss specific
- * dismissToast()     // dismiss all
+ * Dismiss a specific toast or all toasts (no-op).
  */
-export function dismissToast(id?: ToastId): void {
-  toast.dismiss(id as string | number | undefined);
+export function dismissToast(_id?: ToastId): void {
+  // no-op
 }
 
 // ── Clipboard copy feedback ────────────────────────────────────────────────

package/src/components/views/service-manager.test.tsx

@@ -60,35 +60,16 @@ function makeWorker(overrides: Partial<WorkerInfo> = {}): WorkerInfo {
 /** Create a mock DialogHandle that records calls */
 function mockDialog(shouldConfirm: boolean = true): DialogHandle {
   return {
-    confirm: mock(
-      async (options: { content: unknown; closeOnClickOutside?: boolean }) => {
-        // Execute content to validate it renders
-        if (
-          typeof (options.content as (ctx: unknown) => unknown) === "function"
-        ) {
-          (
-            options.content as (ctx: {
-              resolve: (v: boolean) => void;
-            }) => unknown
-          )({
-            resolve: () => {},
-          });
-        }
-        return shouldConfirm;
-      }
-    ),
+    confirm: mock(async () => shouldConfirm),
     choice: async <K extends string>(options: {
-      content: unknown;
       fallback?: K;
-      closeOnClickOutside?: boolean;
-    }): Promise<K | undefined> => {
-      return options.fallback;
-    },
-    show: mock(
-      (_options: { content: () => unknown; id?: string | number }) =>
-        "loading-1"
-    ),
-    close: mock((_id?: string | number) => {}),
+    }): Promise<K | undefined> => options.fallback,
+    show: mock(() => "loading-1"),
+    close: mock(() => {}),
+    confirmSimple: mock(async () => shouldConfirm),
+    choiceSimple: async <K extends string>(options: {
+      fallback?: K;
+    }): Promise<K | undefined> => options.fallback,
   };
 }
 

package/src/hooks/shell-overlay.ts

@@ -10,11 +10,12 @@
  */
 import { useKeyboard } from "@opentui/react";
 import { useUIStore } from "@hoox-sh/hoox-shared";
+import { isHooxDialogOpen } from "../components/ui/dialog-state";
 
-/** True when palette or a UI-store modal owns the keyboard. */
+/** True when palette, UI modal, or in-house DialogProvider owns the keyboard. */
 export function isShellOverlayOpen(): boolean {
   const s = useUIStore.getState();
-  return Boolean(s.commandPaletteOpen || s.modal);
+  return Boolean(s.commandPaletteOpen || s.modal || isHooxDialogOpen());
 }
 
 /** Key shape from OpenTUI; fields optional at the type boundary. */

package/src/main.tsx

@@ -13,7 +13,6 @@
  */
 import { createCliRenderer } from "@opentui/core";
 import { createRoot } from "@opentui/react";
-import { ToasterRenderable } from "@opentui-ui/toast";
 import { CrashRecoveryApp } from "./app";
 import {
   Colors,
@@ -103,19 +102,11 @@ async function main() {
   // Set renderer ref so hooks + components can access it via getRendererRef()
   setRendererRef(renderer);
 
-  // Mount toast host so connection/auth toasts actually render
-  try {
-    const root = (
-      renderer as unknown as {
-        root: { add: (node: unknown) => void };
-      }
-    ).root;
-    root.add(new ToasterRenderable(renderer));
-  } catch (err) {
-    await tuiDevLog.warn("startup", "Toaster mount failed — toasts may no-op", {
-      error: err instanceof Error ? err.message : String(err),
-    });
-  }
+  // Note: @opentui-ui/toast ToasterRenderable is intentionally NOT mounted.
+  // toast@0.0.5 peers on ancient @opentui and nests a second core that
+  // re-registers OPENTUI_FORCE_WCWIDTH (crash on global install). Connection
+  // feedback still surfaces via the status bar + service-store alerts.
+  // Toast helpers in components/ui/toast.tsx are fail-closed no-ops.
 
   // Mouse drag-select → clipboard (OSC 52 + system tools)
   enableAutoCopyOnSelection(