@tooee/choose 0.8.0 → 0.9.1

package/src/choose-highlighted-text.tsx

@@ -1,49 +1,2 @@
-import { Fragment } from "react";
-import type { ReactNode } from "react";
-
-export interface ChooseHighlightedTextProps {
-  text: string;
-  positions: number[];
-  highlightColor: string;
-}
-
-/** Render fuzzy-match characters with one shared segmentation implementation. */
-export const ChooseHighlightedText = function ChooseHighlightedText({
-  text,
-  positions,
-  highlightColor,
-}: ChooseHighlightedTextProps): ReactNode {
-  if (positions.length === 0) {
-    return text;
-  }
-
-  const positionSet = new Set(positions);
-  const parts: { text: string; highlighted: boolean }[] = [];
-  let current = "";
-  let currentHighlighted = false;
-
-  for (let index = 0; index < text.length; index += 1) {
-    const highlighted = positionSet.has(index);
-    if (index === 0) {
-      current = text[index];
-      currentHighlighted = highlighted;
-    } else if (highlighted === currentHighlighted) {
-      current += text[index];
-    } else {
-      parts.push({ highlighted: currentHighlighted, text: current });
-      current = text[index];
-      currentHighlighted = highlighted;
-    }
-  }
-  if (current) {
-    parts.push({ highlighted: currentHighlighted, text: current });
-  }
-
-  return parts.map(
-    (part, index): ReactNode => (
-      <Fragment key={index}>
-        {part.highlighted ? <span fg={highlightColor}>{part.text}</span> : part.text}
-      </Fragment>
-    ),
-  );
-};
+export { ChooseHighlightedText } from "@tooee/renderers";
+export type { ChooseHighlightedTextProps } from "@tooee/renderers";

package/src/choose-list.tsx

@@ -1,156 +1,2 @@
-import { useEffect, useRef } from "react";
-import type { ReactNode } from "react";
-import { decodeReactContent } from "@tooee/layout";
-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 {
-  const decoded = decodeReactContent(content);
-  let rendered: ReactNode = null;
-  if (decoded.kind === "string") {
-    rendered = <text content={decoded.value} fg={color} />;
-  } else if (decoded.kind === "node") {
-    rendered = decoded.value;
-  }
-  return (
-    <box height={1} style={{ paddingLeft: 2 }}>
-      {rendered}
-    </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-store.ts

@@ -1,146 +1,12 @@
-import { createStore } from "@xstate/store";
-import { fuzzyFilter } from "./fuzzy.js";
-import type { FuzzyMatch } from "./fuzzy.js";
-import type { ChooseItem } from "./types.js";
-
-export interface ChooseStoreContext {
-  items: ChooseItem[];
-  matches: FuzzyMatch[];
-  filterQuery: string;
-  activeIndex: number;
-  selectedOriginalIndices: ReadonlySet<number>;
-  loading: boolean;
-  error: string | null;
-  requestId: number;
-  reloadRevision: number;
-}
-
-interface ChooseStoreEventDefinitions {
-  filterChanged: { query: string };
-  activeIndexSet: { index: number };
-  moved: { delta: number };
-  activeToggled: Record<never, never>;
-  requestStarted: Record<never, never>;
-  loadingStarted: { requestId: number };
-  loadSucceeded: { requestId: number; items: ChooseItem[] };
-  loadFailed: { requestId: number; error: string };
-  reloadRequested: Record<never, never>;
-}
-
-export type ChooseStoreEvents = {
-  [EventName in keyof ChooseStoreEventDefinitions]: ChooseStoreEventDefinitions[EventName];
-};
-
-const replaceItems = function replaceItems(
-  ctx: ChooseStoreContext,
-  items: ChooseItem[],
-): ChooseStoreContext {
-  return {
-    ...ctx,
-    activeIndex: 0,
-    items,
-    matches: fuzzyFilter(items, ctx.filterQuery),
-    selectedOriginalIndices: new Set(),
-  };
-};
-
-const clampActiveIndex = function clampActiveIndex(index: number, matchCount: number): number {
-  return Math.min(Math.max(0, matchCount - 1), Math.max(0, index));
-};
-
-export const createChooseStore = function createChooseStore(options: {
-  items?: ChooseItem[];
-  initialFilter?: string;
-  loading?: boolean;
-}) {
-  const items = options.items ?? [];
-  const filterQuery = options.initialFilter ?? "";
-
-  return createStore<ChooseStoreContext, ChooseStoreEvents>({
-    context: {
-      activeIndex: 0,
-      error: null,
-      filterQuery,
-      items,
-      loading: options.loading ?? false,
-      matches: fuzzyFilter(items, filterQuery),
-      reloadRevision: 0,
-      requestId: 0,
-      selectedOriginalIndices: new Set(),
-    },
-    on: {
-      activeIndexSet: (ctx, event) => {
-        const activeIndex = clampActiveIndex(event.index, ctx.matches.length);
-        return activeIndex === ctx.activeIndex ? ctx : { ...ctx, activeIndex };
-      },
-      activeToggled: (ctx) => {
-        const originalIndex = ctx.matches[ctx.activeIndex]?.originalIndex;
-        if (originalIndex === undefined) {
-          return ctx;
-        }
-        const selectedOriginalIndices = new Set(ctx.selectedOriginalIndices);
-        if (selectedOriginalIndices.has(originalIndex)) {
-          selectedOriginalIndices.delete(originalIndex);
-        } else {
-          selectedOriginalIndices.add(originalIndex);
-        }
-        return { ...ctx, selectedOriginalIndices };
-      },
-      filterChanged: (ctx, event) => {
-        if (event.query === ctx.filterQuery) {
-          return ctx;
-        }
-        return {
-          ...ctx,
-          activeIndex: 0,
-          filterQuery: event.query,
-          matches: fuzzyFilter(ctx.items, event.query),
-        };
-      },
-      loadFailed: (ctx, event) => {
-        if (event.requestId !== ctx.requestId) {
-          return ctx;
-        }
-        return {
-          ...replaceItems(ctx, []),
-          error: event.error,
-          loading: false,
-        };
-      },
-      loadSucceeded: (ctx, event) => {
-        if (event.requestId !== ctx.requestId) {
-          return ctx;
-        }
-        return {
-          ...replaceItems(ctx, event.items),
-          error: null,
-          loading: false,
-        };
-      },
-      loadingStarted: (ctx, event) =>
-        event.requestId === ctx.requestId && !ctx.loading ? { ...ctx, loading: true } : ctx,
-      moved: (ctx, event) => {
-        const activeIndex = clampActiveIndex(ctx.activeIndex + event.delta, ctx.matches.length);
-        return activeIndex === ctx.activeIndex ? ctx : { ...ctx, activeIndex };
-      },
-      reloadRequested: (ctx) => ({ ...ctx, reloadRevision: ctx.reloadRevision + 1 }),
-      requestStarted: (ctx) => ({
-        ...ctx,
-        error: null,
-        requestId: ctx.requestId + 1,
-      }),
-    },
-  });
-};
-
-export type ChooseStore = ReturnType<typeof createChooseStore>;
-
-export const selectItems = (ctx: ChooseStoreContext): ChooseItem[] => ctx.items;
-export const selectMatches = (ctx: ChooseStoreContext): FuzzyMatch[] => ctx.matches;
-export const selectFilterQuery = (ctx: ChooseStoreContext): string => ctx.filterQuery;
-export const selectActiveIndex = (ctx: ChooseStoreContext): number => ctx.activeIndex;
-export const selectSelectedOriginalIndices = (ctx: ChooseStoreContext): ReadonlySet<number> =>
-  ctx.selectedOriginalIndices;
-export const selectLoading = (ctx: ChooseStoreContext): boolean => ctx.loading;
-export const selectError = (ctx: ChooseStoreContext): string | null => ctx.error;
-export const selectReloadRevision = (ctx: ChooseStoreContext): number => ctx.reloadRevision;
+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

@@ -16,11 +16,7 @@ import type { ChooseController } from "./use-choose.js";
 
 export interface ChooseProps extends ChooseOptions {
   contentProvider: ChooseContentProvider;
-  /** @deprecated Pass chooser options as top-level props. This alias will be removed in 0.9.0. */
-  options?: ChooseOptions;
   actions?: ActionDefinition[];
-  /** @deprecated Use `actions`. This alias will be removed in 0.9.0. */
-  commands?: ActionDefinition[];
   controllerRef?: Ref<ChooseController>;
   renderItem?: ChooseListProps["renderItem"];
   /**
@@ -36,35 +32,19 @@ export interface ChooseProps extends ChooseOptions {
   onCancel?: () => void;
 }
 
-interface ResolvedChooseProps extends ChooseOptions {
-  actions?: ActionDefinition[];
-}
-
-const resolveChooseProps = function resolveChooseProps(props: ChooseProps): ResolvedChooseProps {
-  // oxlint-disable-next-line typescript/no-deprecated -- compatibility alias remains supported until 0.9.0
-  const { options } = props;
-  // oxlint-disable-next-line typescript/no-deprecated -- compatibility alias remains supported until 0.9.0
-  const { commands } = props;
-  return {
-    actions: props.actions ?? commands,
-    emptyMessage: props.emptyMessage ?? options?.emptyMessage,
-    multi: props.multi ?? options?.multi,
-    placeholder: props.placeholder ?? options?.placeholder,
-    prompt: props.prompt ?? options?.prompt,
-    title: props.title ?? options?.title,
-  };
-};
-
-export const Choose = function Choose(props: ChooseProps): ReactNode {
-  const { contentProvider, controllerRef, renderItem, onConfirm, onCancel } = props;
-  const {
-    actions: effectiveActions,
-    emptyMessage,
-    multi = false,
-    placeholder,
-    prompt,
-    title,
-  } = resolveChooseProps(props);
+export const Choose = function Choose({
+  contentProvider,
+  actions,
+  controllerRef,
+  emptyMessage,
+  multi = false,
+  onCancel,
+  onConfirm,
+  placeholder,
+  prompt,
+  renderItem,
+  title,
+}: ChooseProps): ReactNode {
   const { theme } = useTheme();
   const { invoke } = useSurfaceInvoke();
 
@@ -75,13 +55,13 @@ export const Choose = function Choose(props: ChooseProps): ReactNode {
   const hasModalOverlay = useHasModalOverlay();
 
   const choose = useChoose({
-    commands: effectiveActions,
+    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 (effectiveActions?.some((action) => action.id === "submit") === true) {
+      if (actions?.some((action) => action.id === "submit") === true) {
         invoke("submit");
         return;
       }

package/src/fuzzy.ts

@@ -1,13 +1,2 @@
-import { rankBy } 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[] {
-  return rankBy(items, query, (item) => item.text);
-};
+export { fuzzyFilter } from "@tooee/renderers";
+export type { FuzzyMatch } from "@tooee/renderers";

package/src/launch.tsx

@@ -30,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,36 +1 @@
-import type { ChooseContentProvider, ChooseItem, ChooseSource } from "./types.js";
-
-type DecodedChooseSource =
-  | { kind: "items"; items: ChooseItem[] }
-  | { kind: "loader"; load: () => ChooseItem[] | Promise<ChooseItem[]> }
-  | { kind: "provider"; provider: ChooseContentProvider };
-
-const decodeChooseSource = function decodeChooseSource(source: ChooseSource): DecodedChooseSource {
-  if (Array.isArray(source)) {
-    return { items: source, kind: "items" };
-  }
-  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- public source boundary distinguishes the documented loader callback from a provider
-  if (typeof source === "function") {
-    return { kind: "loader", load: source };
-  }
-  return { kind: "provider", provider: source };
-};
-
-/** Resolve every public Choose source shape through one compatibility boundary. */
-export const loadChooseSource = function loadChooseSource(
-  source: ChooseSource,
-): ChooseItem[] | Promise<ChooseItem[]> {
-  const decoded = decodeChooseSource(source);
-  if (decoded.kind === "items") {
-    return decoded.items;
-  }
-  if (decoded.kind === "loader") {
-    return decoded.load();
-  }
-  return decoded.provider.load();
-};
-
-// oxlint-disable-next-line anti-slop/no-unknown-parameters -- caught loader failures enter here before conversion to display text
-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";