@tooee/choose 0.7.3 → 0.9.0

package/src/choose-list.tsx

@@ -1,148 +1,2 @@
-import { useEffect, useRef } from "react";
-import type { ReactNode } from "react";
-import type { ScrollBoxRenderable } from "@opentui/core";
-import { useTheme } from "@tooee/themes";
-import { ChooseHighlightedText } from "./choose-highlighted-text.js";
-import type { FuzzyMatch } from "./fuzzy.js";
-import type { ChooseItem } from "./types.js";
-import type { UseChooseResult } from "./use-choose.js";
-
-export interface ChooseItemRenderContext {
-  item: ChooseItem;
-  match: FuzzyMatch;
-  index: number;
-  originalIndex: number;
-  positions: number[];
-  isActive: boolean;
-  isSelected: boolean;
-  defaultContent: ReactNode;
-}
-
-export interface ChooseListProps {
-  choose: UseChooseResult;
-  /** Fullscreen defaults to activate; picker overlays default to submit. */
-  rowClick?: "activate" | "submit" | "none";
-  renderItem?: (context: ChooseItemRenderContext) => ReactNode;
-  loadingContent?: ReactNode;
-  errorContent?: (error: string) => ReactNode;
-  emptyContent?: ReactNode;
-  /** Mouse guard for visible rows covered by another surface. */
-  suspended?: boolean;
-}
-
-const ThemedLine = function ThemedLine({
-  content,
-  color,
-}: {
-  content: ReactNode;
-  color: string;
-}): ReactNode {
-  return (
-    <box height={1} style={{ paddingLeft: 2 }}>
-      {typeof content === "string" ? <text content={content} fg={color} /> : content}
-    </box>
-  );
-};
-
-const defaultErrorContent = function defaultErrorContent(error: string): ReactNode {
-  return `Error: ${error}`;
-};
-
-/** Scrollable chooser rows plus loading/error/empty presentation. */
-export const ChooseList = function ChooseList({
-  choose,
-  rowClick = "activate",
-  renderItem,
-  loadingContent = "Loading...",
-  errorContent = defaultErrorContent,
-  emptyContent,
-  suspended,
-}: ChooseListProps): ReactNode {
-  const { theme } = useTheme();
-  const scrollRef = useRef<ScrollBoxRenderable>(null);
-  const { state, controller } = choose;
-  const interactionSuspended = choose.view.suspended || (suspended ?? false);
-
-  useEffect(() => {
-    const activeMatch = state.matches[state.activeIndex];
-    if (scrollRef.current && activeMatch !== undefined) {
-      scrollRef.current.scrollChildIntoView(`choose-item-${activeMatch.originalIndex}`);
-    }
-  }, [state.activeIndex, state.matches]);
-
-  return (
-    <scrollbox ref={scrollRef} style={{ flexGrow: 1 }} focused={false}>
-      {state.loading && <ThemedLine content={loadingContent} color={theme.textMuted} />}
-
-      {!state.loading && state.error !== null && state.error !== "" && (
-        <ThemedLine content={errorContent(state.error)} color={theme.error} />
-      )}
-
-      {!state.loading &&
-        (state.error?.length ?? 0) === 0 &&
-        state.matches.length === 0 &&
-        emptyContent !== null &&
-        emptyContent !== undefined && <ThemedLine content={emptyContent} color={theme.textMuted} />}
-
-      {state.matches.map((match, index): ReactNode => {
-        const isActive = index === state.activeIndex;
-        const isSelected = state.selectedOriginalIndices.has(match.originalIndex);
-        const defaultContent = (
-          <text fg={isActive ? theme.primary : theme.text} style={{ flexGrow: 1 }}>
-            {state.multi && (
-              <span fg={isSelected ? theme.accent : theme.textMuted}>
-                {isSelected ? "✓ " : "  "}
-              </span>
-            )}
-            {(match.item.icon?.length ?? 0) > 0 && (
-              <span fg={theme.textMuted}>{`${match.item.icon} `}</span>
-            )}
-            <ChooseHighlightedText
-              text={match.item.text}
-              positions={match.positions}
-              highlightColor={theme.warning}
-            />
-            {(match.item.description?.length ?? 0) > 0 && (
-              <span fg={theme.textMuted}>{`  ${match.item.description}`}</span>
-            )}
-          </text>
-        );
-        const context: ChooseItemRenderContext = {
-          defaultContent,
-          index,
-          isActive,
-          isSelected,
-          item: match.item,
-          match,
-          originalIndex: match.originalIndex,
-          positions: match.positions,
-        };
-
-        return (
-          <box
-            key={match.originalIndex}
-            id={`choose-item-${match.originalIndex}`}
-            flexDirection="row"
-            backgroundColor={isActive ? theme.backgroundElement : undefined}
-            style={{ paddingLeft: 1, paddingRight: 1 }}
-            onMouseDown={(event) => {
-              if (interactionSuspended || event.button !== 0 || rowClick === "none") {
-                return;
-              }
-              if (rowClick === "submit") {
-                event.preventDefault();
-                event.stopPropagation();
-                controller.setActiveIndex(index);
-                controller.submit();
-              } else {
-                controller.setActiveIndex(index);
-              }
-            }}
-          >
-            {renderItem ? renderItem(context) : defaultContent}
-          </box>
-        );
-      })}
-    </scrollbox>
-  );
-};
+export { ChooseList } from "@tooee/renderers";
+export type { ChooseItemRenderContext, ChooseListProps } from "@tooee/renderers";

package/src/choose-panel.tsx

@@ -1,7 +1,9 @@
 import type { ReactNode } from "react";
+import type { MouseEvent } from "@opentui/core";
 import { useMode } from "@tooee/commands";
 import type { Mode } from "@tooee/commands";
-import { CloseButton, useTheme } from "@tooee/themes";
+import { OverlayPanel } from "@tooee/layout";
+import type { PanelInset, PanelInsetValue } from "@tooee/layout";
 
 export const buildChooseHints = function buildChooseHints(
   mode: Mode,
@@ -25,14 +27,8 @@ export const buildChooseHints = function buildChooseHints(
   return options.extra ? [...base, ...options.extra] : base;
 };
 
-export type ChoosePanelInsetValue = number | "auto" | `${number}%`;
-
-export interface ChoosePanelInset {
-  left?: ChoosePanelInsetValue;
-  right?: ChoosePanelInsetValue;
-  top?: ChoosePanelInsetValue;
-  bottom?: ChoosePanelInsetValue;
-}
+export type ChoosePanelInsetValue = PanelInsetValue;
+export type ChoosePanelInset = PanelInset;
 
 export interface ChoosePanelProps {
   title?: ReactNode;
@@ -44,9 +40,10 @@ export interface ChoosePanelProps {
   footer?: ReactNode;
   onClose?: () => void;
   inset?: ChoosePanelInset;
+  onMouseDown?: (event: MouseEvent) => void;
 }
 
-/** Bordered chooser chrome with filter, content, hint/status, and footer slots. */
+/** Chooser-specific overlay panel with mode-aware default hints. */
 export const ChoosePanel = function ChoosePanel({
   title,
   filter,
@@ -57,74 +54,24 @@ export const ChoosePanel = function ChoosePanel({
   footer,
   onClose,
   inset,
+  onMouseDown,
 }: ChoosePanelProps): ReactNode {
-  const { theme } = useTheme();
   const mode = useMode();
   const defaults = buildChooseHints(mode, { multi });
   const hintContent = hints ? hints({ defaults, mode }) : defaults.join("  ");
 
   return (
-    <box
-      position="absolute"
-      left={inset?.left ?? "20%"}
-      right={inset?.right ?? "20%"}
-      top={inset?.top ?? "20%"}
-      bottom={inset?.bottom ?? "20%"}
-      flexDirection="column"
-      backgroundColor={theme.backgroundPanel}
-      border
-      borderColor={theme.borderActive}
+    <OverlayPanel
+      title={title}
+      prompt={filter}
+      hints={hintContent}
+      statusRight={statusRight}
+      footer={footer}
+      onClose={onClose}
+      inset={inset}
+      onMouseDown={onMouseDown}
     >
-      {title !== null && title !== undefined && (
-        <box
-          flexDirection="row"
-          height={1}
-          paddingLeft={1}
-          paddingRight={1}
-          backgroundColor={theme.backgroundElement}
-        >
-          {typeof title === "string" ? (
-            <text content={title} fg={theme.accent} style={{ flexGrow: 1 }} />
-          ) : (
-            <box flexDirection="row" style={{ flexGrow: 1 }}>
-              {title}
-            </box>
-          )}
-          {onClose && <CloseButton onClose={onClose} />}
-        </box>
-      )}
-
-      {filter}
       {children}
-
-      {footer !== null && footer !== undefined && (
-        <box height={1} paddingLeft={1} paddingRight={1}>
-          {footer}
-        </box>
-      )}
-
-      <box
-        flexDirection="row"
-        height={1}
-        paddingLeft={1}
-        paddingRight={1}
-        backgroundColor={theme.backgroundElement}
-      >
-        <box flexDirection="row" style={{ flexGrow: 1 }}>
-          {typeof hintContent === "string" ? (
-            <text content={hintContent} fg={theme.textMuted} />
-          ) : (
-            hintContent
-          )}
-        </box>
-        {statusRight !== null &&
-          statusRight !== undefined &&
-          (typeof statusRight === "string" ? (
-            <text content={statusRight} fg={theme.textMuted} />
-          ) : (
-            statusRight
-          ))}
-      </box>
-    </box>
+    </OverlayPanel>
   );
 };

package/src/choose-store.ts

@@ -0,0 +1,12 @@
+export {
+  createChooseStore,
+  selectActiveIndex,
+  selectError,
+  selectFilterQuery,
+  selectItems,
+  selectLoading,
+  selectMatches,
+  selectReloadRevision,
+  selectSelectedOriginalIndices,
+} from "@tooee/renderers";
+export type { ChooseStore, ChooseStoreContext, ChooseStoreEvents } from "@tooee/renderers";

package/src/choose.public-contract.typecheck.ts

@@ -0,0 +1,12 @@
+/** Compile-time checks for the Choose component's 0.9 public props. */
+import type { ChooseProps } from "./choose.js";
+
+type Assert<T extends true> = T;
+type IsNever<T> = [T] extends [never] ? true : false;
+type Has<TKeys, TName> = [Extract<TKeys, TName>] extends [never] ? false : true;
+
+type Props = keyof ChooseProps;
+type RetainedProps = Assert<Has<Props, "actions" | "multi" | "prompt" | "title">>;
+type RemovedProps = Assert<IsNever<Extract<Props, "commands" | "options">>>;
+
+export type ChoosePublicContractChecks = [RetainedProps, RemovedProps];

package/src/choose.tsx

@@ -1,10 +1,10 @@
 import { useImperativeHandle } from "react";
-import type { Ref } from "react";
+import type { ReactNode, Ref } from "react";
 import { AppLayout } from "@tooee/layout";
 import { useHasOverlay, useHasModalOverlay } from "@tooee/overlays";
 import { useTheme } from "@tooee/themes";
 import { useThemeCommands, useQuitCommand } from "@tooee/shell";
-import { useCommandContext } from "@tooee/commands";
+import { useSurfaceInvoke } from "@tooee/commands";
 import type { ActionDefinition } from "@tooee/commands";
 import { ChooseFilter } from "./choose-filter.js";
 import { ChooseList } from "./choose-list.js";
@@ -14,13 +14,9 @@ import type { ChooseContentProvider, ChooseOptions, ChooseResult } from "./types
 import { useChoose } from "./use-choose.js";
 import type { ChooseController } from "./use-choose.js";
 
-export interface ChooseProps {
+export interface ChooseProps extends ChooseOptions {
   contentProvider: ChooseContentProvider;
-  options?: ChooseOptions;
-  /** Legacy name retained for source compatibility. */
   actions?: ActionDefinition[];
-  /** Additive alias used by new chooser compositions. */
-  commands?: ActionDefinition[];
   controllerRef?: Ref<ChooseController>;
   renderItem?: ChooseListProps["renderItem"];
   /**
@@ -38,18 +34,19 @@ export interface ChooseProps {
 
 export const Choose = function Choose({
   contentProvider,
-  options,
   actions,
-  commands,
   controllerRef,
-  renderItem,
-  onConfirm,
+  emptyMessage,
+  multi = false,
   onCancel,
-}: ChooseProps): React.ReactNode {
+  onConfirm,
+  placeholder,
+  prompt,
+  renderItem,
+  title,
+}: ChooseProps): ReactNode {
   const { theme } = useTheme();
-  const { invoke } = useCommandContext();
-  const effectiveCommands = commands ?? actions;
-  const multi = options?.multi ?? false;
+  const { invoke } = useSurfaceInvoke();
 
   const { name: themeName } = useThemeCommands();
   useQuitCommand({ onQuit: () => onCancel?.() });
@@ -58,13 +55,13 @@ export const Choose = function Choose({
   const hasModalOverlay = useHasModalOverlay();
 
   const choose = useChoose({
-    commands: effectiveCommands,
+    commands: actions,
     multi,
     onCancel,
     onSubmit: (result) => {
       // Standalone behaviour: a command named `submit` wins over `onConfirm`, so
       // action-driven CLIs keep their own submit semantics.
-      if (effectiveCommands?.some((action) => action.id === "submit") === true) {
+      if (actions?.some((action) => action.id === "submit") === true) {
         invoke("submit");
         return;
       }
@@ -98,10 +95,10 @@ export const Choose = function Choose({
 
   const hints = buildChooseHints(choose.view.mode, { multi });
   let titleBar: { title: string } | undefined;
-  if (options?.title !== undefined && options.title !== "") {
-    titleBar = { title: options.title };
-  } else if (options?.prompt !== undefined && options.prompt !== "") {
-    titleBar = { title: options.prompt };
+  if (title !== undefined && title !== "") {
+    titleBar = { title };
+  } else if (prompt !== undefined && prompt !== "") {
+    titleBar = { title: prompt };
   }
 
   return (
@@ -125,15 +122,14 @@ export const Choose = function Choose({
           { label: "", value: hints.join("  ") },
         ],
       }}
-      scrollProps={{ focused: false }}
     >
       <box flexDirection="column" style={{ flexGrow: 1 }}>
-        <ChooseFilter choose={choose} placeholder={options?.placeholder} />
+        <ChooseFilter choose={choose} placeholder={placeholder} />
         <ChooseList
           choose={choose}
           rowClick="activate"
           renderItem={renderItem}
-          emptyContent={options?.emptyMessage}
+          emptyContent={emptyMessage}
           suspended={hasModalOverlay}
         />
       </box>

package/src/fuzzy.ts

@@ -1,28 +1,2 @@
-import { fuzzyMatchPositions } from "@tooee/fuzzy";
-import type { ChooseItem } from "./types.js";
-
-export interface FuzzyMatch {
-  item: ChooseItem;
-  originalIndex: number;
-  score: number;
-  positions: number[];
-}
-
-export const fuzzyFilter = function fuzzyFilter(items: ChooseItem[], query: string): FuzzyMatch[] {
-  if (!query) {
-    return items.map((item, i) => ({ item, originalIndex: i, positions: [], score: 0 }));
-  }
-
-  const results: FuzzyMatch[] = [];
-
-  for (let i = 0; i < items.length; i += 1) {
-    const item = items[i];
-    const match = fuzzyMatchPositions(query, item.text);
-    if (match) {
-      results.push({ item, originalIndex: i, positions: match.positions, score: match.score });
-    }
-  }
-
-  results.sort((a, b) => b.score - a.score);
-  return results;
-};
+export { fuzzyFilter } from "@tooee/renderers";
+export type { FuzzyMatch } from "@tooee/renderers";

package/src/launch.tsx

@@ -2,6 +2,7 @@ import { runCliSession } from "@tooee/shell";
 import type { ActionDefinition } from "@tooee/commands";
 import { Choose } from "./choose.js";
 import type { ChooseContentProvider, ChooseOptions, ChooseResult } from "./types.js";
+import type { ReactNode } from "react";
 
 export interface ChooseLaunchOptions {
   contentProvider: ChooseContentProvider;
@@ -13,10 +14,14 @@ export const launch = async function launch(
   opts: ChooseLaunchOptions,
 ): Promise<ChooseResult | null> {
   const result = await runCliSession<ChooseResult>(
-    ({ resolve, cancel }): React.ReactNode => (
+    ({ resolve, cancel }): ReactNode => (
       <Choose
         contentProvider={opts.contentProvider}
-        options={opts.options}
+        title={opts.options?.title}
+        prompt={opts.options?.prompt}
+        placeholder={opts.options?.placeholder}
+        multi={opts.options?.multi}
+        emptyMessage={opts.options?.emptyMessage}
         actions={opts.actions}
         onConfirm={resolve}
         onCancel={cancel}
@@ -25,6 +30,7 @@ export const launch = async function launch(
     {
       provider: { initialMode: "insert" },
       stdinPolicy: "tty-if-piped",
+      stdoutPolicy: "tty-if-redirected",
     },
   );
   return result;

package/src/source.ts

@@ -1,18 +1 @@
-import type { ChooseItem, ChooseSource } from "./types.js";
-
-/** Resolve every public Choose source shape through one compatibility boundary. */
-export const loadChooseSource = function loadChooseSource(
-  source: ChooseSource,
-): ChooseItem[] | Promise<ChooseItem[]> {
-  if (Array.isArray(source)) {
-    return source;
-  }
-  if (typeof source === "function") {
-    return source();
-  }
-  return source.load();
-};
-
-export const chooseSourceError = function chooseSourceError(error: unknown): string {
-  return error instanceof Error ? error.message : String(error);
-};
+export { loadChooseSource } from "@tooee/renderers";

package/src/types.ts

@@ -1,28 +1,7 @@
-export interface ChooseItem {
-  text: string;
-  value?: string;
-  icon?: string;
-  description?: string;
-}
-
-export interface ChooseContentProvider {
-  load: () => Promise<ChooseItem[]> | ChooseItem[];
-}
-
-/** Any item source accepted by the shared chooser core. */
-export type ChooseSource =
-  | ChooseItem[]
-  | ChooseContentProvider
-  | (() => ChooseItem[] | Promise<ChooseItem[]>);
-
-export interface ChooseResult {
-  items: ChooseItem[];
-}
-
-export interface ChooseOptions {
-  multi?: boolean;
-  title?: string;
-  prompt?: string;
-  placeholder?: string;
-  emptyMessage?: string;
-}
+export type {
+  ChooseContentProvider,
+  ChooseItem,
+  ChooseOptions,
+  ChooseResult,
+  ChooseSource,
+} from "@tooee/renderers";