@sleepy-ai/cli 0.1.16 → 0.1.17

package/src/cli/cmd/tui/ui/dialog-select.tsx

@@ -1,467 +0,0 @@
-import { InputRenderable, RGBA, ScrollBoxRenderable, TextAttributes } from "@opentui/core"
-import { useTheme, selectedForeground } from "@tui/context/theme"
-import { entries, filter, flatMap, groupBy, pipe } from "remeda"
-import { batch, createEffect, createMemo, For, Show, type JSX, on } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useKeyboard, useTerminalDimensions } from "@opentui/solid"
-import * as fuzzysort from "fuzzysort"
-import { isDeepEqual } from "remeda"
-import { useDialog, type DialogContext } from "@tui/ui/dialog"
-import { useKeybind } from "@tui/context/keybind"
-import { Keybind } from "@/util"
-import { Locale } from "@/util"
-import { getScrollAcceleration } from "../util/scroll"
-import { pinyinSearch } from "../util/pinyin"
-import { useTuiConfig } from "../context/tui-config"
-import { useLanguage } from "@tui/context/language"
-
-export interface DialogSelectProps<T> {
-  title: string
-  placeholder?: string
-  options: DialogSelectOption<T>[]
-  flat?: boolean
-  ref?: (ref: DialogSelectRef<T>) => void
-  onMove?: (option: DialogSelectOption<T>) => void
-  onFilter?: (query: string) => void
-  onSelect?: (option: DialogSelectOption<T>) => void
-  skipFilter?: boolean
-  keybind?: {
-    keybind?: Keybind.Info
-    title: string
-    side?: "left" | "right"
-    disabled?: boolean
-    onTrigger: (option: DialogSelectOption<T>) => void
-  }[]
-  current?: T
-  /** Optional muted subtitle shown under the title (e.g. a usage hint). */
-  hint?: string
-}
-
-export interface DialogSelectOption<T = any> {
-  title: string
-  value: T
-  description?: string
-  footer?: JSX.Element | string
-  category?: string
-  /** Extra latin search terms (e.g. English keywords) so the item is findable without switching input method. */
-  keywords?: string[]
-  categoryView?: JSX.Element
-  disabled?: boolean
-  bg?: RGBA
-  gutter?: JSX.Element
-  margin?: JSX.Element
-  onSelect?: (ctx: DialogContext) => void
-}
-
-export type DialogSelectRef<T> = {
-  filter: string
-  filtered: DialogSelectOption<T>[]
-}
-
-export function DialogSelect<T>(props: DialogSelectProps<T>) {
-  const dialog = useDialog()
-  const { theme } = useTheme()
-  const tuiConfig = useTuiConfig()
-  const t = useLanguage().t
-  const scrollAcceleration = createMemo(() => getScrollAcceleration(tuiConfig))
-
-  const [store, setStore] = createStore({
-    selected: 0,
-    filter: "",
-    input: "keyboard" as "keyboard" | "mouse",
-  })
-
-  createEffect(
-    on(
-      () => props.current,
-      (current) => {
-        if (current) {
-          const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, current))
-          if (currentIndex >= 0) {
-            setStore("selected", currentIndex)
-          }
-        }
-      },
-    ),
-  )
-
-  let input: InputRenderable
-
-  const filtered = createMemo(() => {
-    if (props.skipFilter) return props.options.filter((x) => x.disabled !== true)
-    const needle = store.filter.toLowerCase()
-    const options = pipe(
-      props.options,
-      filter((x) => x.disabled !== true),
-    )
-    if (!needle) return options
-
-    // prioritize title matches (weight: 2) over category matches (weight: 1).
-    // users typically search by the item name, and not its category.
-    // keywords carry latin/English aliases (weight 2) and pinyin carries a
-    // romanized form of the title (weight 1), so CJK-locale users can search by
-    // English keyword or pinyin without switching input method.
-    const result = fuzzysort
-      .go(needle, options, {
-        keys: [
-          "title",
-          "category",
-          (o) => o.keywords?.join(" ") ?? "",
-          (o) => pinyinSearch(o.title),
-        ],
-        scoreFn: (r) => r[0].score * 2 + r[1].score + r[2].score * 2 + r[3].score,
-      })
-      .map((x) => x.obj)
-
-    return result
-  })
-
-  // When the filter changes due to how TUI works, the mousemove might still be triggered
-  // via a synthetic event as the layout moves underneath the cursor. This is a workaround to make sure the input mode remains keyboard
-  // that the mouseover event doesn't trigger when filtering.
-  createEffect(() => {
-    filtered()
-    setStore("input", "keyboard")
-  })
-
-  const flatten = createMemo(() => props.flat && store.filter.length > 0)
-
-  const grouped = createMemo<[string, DialogSelectOption<T>[]][]>(() => {
-    if (flatten()) return [["", filtered()]]
-    const result = pipe(
-      filtered(),
-      groupBy((x) => x.category ?? ""),
-      // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
-      entries(),
-    )
-    return result
-  })
-
-  const flat = createMemo(() => {
-    return pipe(
-      grouped(),
-      flatMap(([_, options]) => options),
-    )
-  })
-
-  const rows = createMemo(() => {
-    const headers = grouped().reduce((acc, [category], i) => {
-      if (!category) return acc
-      return acc + (i > 0 ? 2 : 1)
-    }, 0)
-    return flat().length + headers
-  })
-
-  const dimensions = useTerminalDimensions()
-  const height = createMemo(() => Math.min(rows(), Math.floor(dimensions().height / 2) - 6))
-
-  const selected = createMemo(() => flat()[store.selected])
-
-  createEffect(
-    on([() => store.filter, () => props.current], ([filter, current]) => {
-      setTimeout(() => {
-        if (filter.length > 0) {
-          moveTo(0, true)
-        } else if (current) {
-          const currentIndex = flat().findIndex((opt) => isDeepEqual(opt.value, current))
-          if (currentIndex >= 0) {
-            moveTo(currentIndex, true)
-          }
-        }
-      }, 0)
-    }),
-  )
-
-  function move(direction: number) {
-    if (flat().length === 0) return
-    let next = store.selected + direction
-    if (next < 0) next = flat().length - 1
-    if (next >= flat().length) next = 0
-    moveTo(next, true)
-  }
-
-  function moveTo(next: number, center = false) {
-    setStore("selected", next)
-    const option = selected()
-    if (option) props.onMove?.(option)
-    if (!scroll) return
-    const target = scroll.getChildren().find((child) => child.id === String(next))
-    if (!target) return
-    const y = target.y - scroll.y
-    if (center) {
-      const centerOffset = Math.floor(scroll.height / 2)
-      scroll.scrollBy(y - centerOffset)
-    } else {
-      if (y >= scroll.height) {
-        scroll.scrollBy(y - scroll.height + 1)
-      }
-      if (y < 0) {
-        scroll.scrollBy(y)
-        if (next === 0) {
-          scroll.scrollTo(0)
-        }
-      }
-    }
-  }
-
-  const keybind = useKeybind()
-  useKeyboard((evt) => {
-    setStore("input", "keyboard")
-
-    if (evt.name === "up" || (evt.ctrl && evt.name === "p")) move(-1)
-    if (evt.name === "down" || (evt.ctrl && evt.name === "n")) move(1)
-    if (evt.name === "pageup") move(-10)
-    if (evt.name === "pagedown") move(10)
-    if (evt.name === "home") moveTo(0)
-    if (evt.name === "end") moveTo(flat().length - 1)
-
-    if (evt.name === "return") {
-      const option = selected()
-      if (option) {
-        evt.preventDefault()
-        evt.stopPropagation()
-        if (option.onSelect) option.onSelect(dialog)
-        props.onSelect?.(option)
-      }
-    }
-
-    for (const item of props.keybind ?? []) {
-      if (item.disabled || !item.keybind) continue
-      if (Keybind.match(item.keybind, keybind.parse(evt))) {
-        const s = selected()
-        if (s) {
-          evt.preventDefault()
-          item.onTrigger(s)
-        }
-      }
-    }
-  })
-
-  let scroll: ScrollBoxRenderable | undefined
-  const ref: DialogSelectRef<T> = {
-    get filter() {
-      return store.filter
-    },
-    get filtered() {
-      return filtered()
-    },
-  }
-  props.ref?.(ref)
-
-  const keybinds = createMemo(() => props.keybind?.filter((x) => !x.disabled && x.keybind) ?? [])
-  const left = createMemo(() => keybinds().filter((item) => item.side !== "right"))
-  const right = createMemo(() => keybinds().filter((item) => item.side === "right"))
-
-  return (
-    <box gap={1} paddingBottom={1}>
-      <box paddingLeft={4} paddingRight={4}>
-        <box flexDirection="row" justifyContent="space-between">
-          <text fg={theme.text} attributes={TextAttributes.BOLD}>
-            {props.title}
-          </text>
-          <text fg={theme.textMuted} onMouseUp={() => dialog.clear()}>
-            {t("tui.dialog.close_hint")}
-          </text>
-        </box>
-        <Show when={props.hint}>
-          <box paddingTop={1} alignItems="center">
-            <text fg={theme.textMuted}>{props.hint}</text>
-          </box>
-        </Show>
-        <Show when={!props.skipFilter}>
-          <box paddingTop={1}>
-            <input
-              onInput={(e) => {
-                batch(() => {
-                  setStore("filter", e)
-                  props.onFilter?.(e)
-                })
-              }}
-              focusedBackgroundColor={theme.backgroundPanel}
-              cursorColor={theme.primary}
-              focusedTextColor={theme.textMuted}
-              ref={(r) => {
-                input = r
-                input.traits = { status: "FILTER" }
-                setTimeout(() => {
-                  if (!input) return
-                  if (input.isDestroyed) return
-                  input.focus()
-                }, 1)
-              }}
-              placeholder={props.placeholder ?? t("tui.dialog.select.placeholder")}
-              placeholderColor={theme.textMuted}
-            />
-          </box>
-        </Show>
-      </box>
-      <Show
-        when={grouped().length > 0}
-        fallback={
-          <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-            <text fg={theme.textMuted}>{t("tui.dialog.select.no_results")}</text>
-          </box>
-        }
-      >
-        <scrollbox
-          paddingLeft={1}
-          paddingRight={1}
-          scrollbarOptions={{ visible: false }}
-          scrollAcceleration={scrollAcceleration()}
-          ref={(r: ScrollBoxRenderable) => (scroll = r)}
-          maxHeight={height()}
-        >
-          <For each={grouped()}>
-            {([category, options], index) => (
-              <>
-                <Show when={category}>
-                  <box paddingTop={index() > 0 ? 1 : 0} paddingLeft={3}>
-                    <Show
-                      when={options[0]?.categoryView}
-                      fallback={
-                        <text fg={theme.accent} attributes={TextAttributes.BOLD}>
-                          {category}
-                        </text>
-                      }
-                    >
-                      {options[0]?.categoryView}
-                    </Show>
-                  </box>
-                </Show>
-                <For each={options}>
-                  {(option) => {
-                    const rowIndex = createMemo(() => flat().indexOf(option))
-                    const active = createMemo(() => rowIndex() === store.selected)
-                    const current = createMemo(() => isDeepEqual(option.value, props.current))
-                    return (
-                      <box
-                        id={String(rowIndex())}
-                        flexDirection="row"
-                        position="relative"
-                        onMouseMove={() => {
-                          setStore("input", "mouse")
-                        }}
-                        onMouseUp={() => {
-                          option.onSelect?.(dialog)
-                          props.onSelect?.(option)
-                        }}
-                        onMouseOver={() => {
-                          if (store.input !== "mouse") return
-                          if (rowIndex() === -1) return
-                          moveTo(rowIndex())
-                        }}
-                        onMouseDown={() => {
-                          if (rowIndex() === -1) return
-                          moveTo(rowIndex())
-                        }}
-                        backgroundColor={active() ? (option.bg ?? theme.primary) : RGBA.fromInts(0, 0, 0, 0)}
-                        paddingLeft={current() || option.gutter ? 1 : 3}
-                        paddingRight={3}
-                        gap={1}
-                      >
-                        <Show when={!current() && option.margin}>
-                          <box position="absolute" left={1} flexShrink={0}>
-                            {option.margin}
-                          </box>
-                        </Show>
-                        <Option
-                          title={option.title}
-                          footer={flatten() ? (option.category ?? option.footer) : option.footer}
-                          description={option.description !== category ? option.description : undefined}
-                          active={active()}
-                          current={current()}
-                          gutter={option.gutter}
-                        />
-                      </box>
-                    )
-                  }}
-                </For>
-              </>
-            )}
-          </For>
-        </scrollbox>
-      </Show>
-      <Show when={keybinds().length} fallback={<box flexShrink={0} />}>
-        <box
-          paddingRight={2}
-          paddingLeft={4}
-          flexDirection="row"
-          justifyContent="space-between"
-          flexShrink={0}
-          paddingTop={1}
-        >
-          <box flexDirection="row" gap={2}>
-            <For each={left()}>
-              {(item) => (
-                <text>
-                  <span style={{ fg: theme.text }}>
-                    <b>{item.title}</b>{" "}
-                  </span>
-                  <span style={{ fg: theme.textMuted }}>{Keybind.toString(item.keybind)}</span>
-                </text>
-              )}
-            </For>
-          </box>
-          <box flexDirection="row" gap={2}>
-            <For each={right()}>
-              {(item) => (
-                <text>
-                  <span style={{ fg: theme.text }}>
-                    <b>{item.title}</b>{" "}
-                  </span>
-                  <span style={{ fg: theme.textMuted }}>{Keybind.toString(item.keybind)}</span>
-                </text>
-              )}
-            </For>
-          </box>
-        </box>
-      </Show>
-    </box>
-  )
-}
-
-function Option(props: {
-  title: string
-  description?: string
-  active?: boolean
-  current?: boolean
-  footer?: JSX.Element | string
-  gutter?: JSX.Element
-  onMouseOver?: () => void
-}) {
-  const { theme } = useTheme()
-  const fg = selectedForeground(theme)
-
-  return (
-    <>
-      <Show when={props.current}>
-        <text flexShrink={0} fg={props.active ? fg : props.current ? theme.primary : theme.text} marginRight={0}>
-          ●
-        </text>
-      </Show>
-      <Show when={!props.current && props.gutter}>
-        <box flexShrink={0} marginRight={0}>
-          {props.gutter}
-        </box>
-      </Show>
-      <text
-        flexGrow={1}
-        fg={props.active ? fg : props.current ? theme.primary : theme.text}
-        attributes={props.active ? TextAttributes.BOLD : undefined}
-        overflow="hidden"
-        wrapMode="none"
-        paddingLeft={3}
-      >
-        {Locale.truncate(props.title, 61)}
-        <Show when={props.description}>
-          <span style={{ fg: props.active ? fg : theme.textMuted }}> {props.description}</span>
-        </Show>
-      </text>
-      <Show when={props.footer}>
-        <box flexShrink={0}>
-          <text fg={props.active ? fg : theme.textMuted}>{props.footer}</text>
-        </box>
-      </Show>
-    </>
-  )
-}

package/src/cli/cmd/tui/ui/dialog.tsx

@@ -1,207 +0,0 @@
-import { useKeyboard, useRenderer, useTerminalDimensions } from "@opentui/solid"
-import { batch, createContext, Show, useContext, type JSX, type ParentProps } from "solid-js"
-import { useTheme } from "@tui/context/theme"
-import { MouseButton, Renderable, RGBA } from "@opentui/core"
-import { createStore } from "solid-js/store"
-import { useToast } from "./toast"
-import { Flag } from "@/flag/flag"
-import * as Selection from "@tui/util/selection"
-import * as Clipboard from "@tui/util/clipboard"
-import { useLanguage } from "@tui/context/language"
-
-export function Dialog(
-  props: ParentProps<{
-    size?: "medium" | "large" | "xlarge"
-    onClose: () => void
-  }>,
-) {
-  const dimensions = useTerminalDimensions()
-  const { theme } = useTheme()
-  const renderer = useRenderer()
-  const toast = useToast()
-  const t = useLanguage().t
-
-  let dismiss = false
-  const width = () => {
-    if (props.size === "xlarge") return 116
-    if (props.size === "large") return 88
-    return 60
-  }
-
-  return (
-    <box
-      onMouseDown={() => {
-        dismiss = !!renderer.getSelection()
-      }}
-      onMouseUp={() => {
-        if (dismiss) {
-          dismiss = false
-          return
-        }
-        props.onClose?.()
-      }}
-      width={dimensions().width}
-      height={dimensions().height}
-      alignItems="center"
-      position="absolute"
-      zIndex={3000}
-      paddingTop={dimensions().height / 4}
-      left={0}
-      top={0}
-      backgroundColor={RGBA.fromInts(0, 0, 0, 150)}
-    >
-      <box
-        onMouseUp={(e) => {
-          dismiss = false
-          if (!Flag.SLEEPYCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) {
-            const text = renderer.getSelection()?.getSelectedText()
-            if (text) {
-              Clipboard.copy(text)
-                .then(() => toast.show({ message: t("tui.toast.copied_to_clipboard"), variant: "info" }))
-                .catch(toast.error)
-            }
-          }
-          e.stopPropagation()
-        }}
-        width={width()}
-        maxWidth={dimensions().width - 2}
-        backgroundColor={theme.backgroundPanel}
-        paddingTop={1}
-      >
-        {props.children}
-      </box>
-    </box>
-  )
-}
-
-function init() {
-  const [store, setStore] = createStore({
-    stack: [] as {
-      element: JSX.Element
-      onClose?: () => void
-    }[],
-    size: "medium" as "medium" | "large" | "xlarge",
-  })
-
-  const renderer = useRenderer()
-
-  useKeyboard((evt) => {
-    if (store.stack.length === 0) return
-    if (evt.defaultPrevented) return
-    if ((evt.name === "escape" || (evt.ctrl && evt.name === "c")) && renderer.getSelection()?.getSelectedText()) return
-    if (evt.name === "escape" || (evt.ctrl && evt.name === "c")) {
-      if (renderer.getSelection()) {
-        renderer.clearSelection()
-      }
-      const current = store.stack.at(-1)!
-      current.onClose?.()
-      setStore("stack", store.stack.slice(0, -1))
-      evt.preventDefault()
-      evt.stopPropagation()
-      refocus()
-    }
-  })
-
-  let focus: Renderable | null
-  function refocus() {
-    setTimeout(() => {
-      if (!focus) return
-      if (focus.isDestroyed) return
-      function find(item: Renderable) {
-        for (const child of item.getChildren()) {
-          if (child === focus) return true
-          if (find(child)) return true
-        }
-        return false
-      }
-      const found = find(renderer.root)
-      if (!found) return
-      focus.focus()
-    }, 1)
-  }
-
-  return {
-    clear() {
-      for (const item of store.stack) {
-        if (item.onClose) item.onClose()
-      }
-      batch(() => {
-        setStore("size", "medium")
-        setStore("stack", [])
-      })
-      refocus()
-    },
-    replace(input: any, onClose?: () => void) {
-      if (store.stack.length === 0) {
-        focus = renderer.currentFocusedRenderable
-        focus?.blur()
-      }
-      for (const item of store.stack) {
-        if (item.onClose) item.onClose()
-      }
-      setStore("size", "medium")
-      setStore("stack", [
-        {
-          element: input,
-          onClose,
-        },
-      ])
-    },
-    get stack() {
-      return store.stack
-    },
-    get size() {
-      return store.size
-    },
-    setSize(size: "medium" | "large" | "xlarge") {
-      setStore("size", size)
-    },
-  }
-}
-
-export type DialogContext = ReturnType<typeof init>
-
-const ctx = createContext<DialogContext>()
-
-export function DialogProvider(props: ParentProps) {
-  const value = init()
-  const renderer = useRenderer()
-  const toast = useToast()
-  const t = useLanguage().t
-  return (
-    <ctx.Provider value={value}>
-      {props.children}
-      <box
-        position="absolute"
-        zIndex={3000}
-        onMouseDown={(evt) => {
-          if (!Flag.SLEEPYCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT) return
-          if (evt.button !== MouseButton.RIGHT) return
-
-          if (!Selection.copy(renderer, toast, t("tui.toast.copied_to_clipboard"))) return
-          evt.preventDefault()
-          evt.stopPropagation()
-        }}
-        onMouseUp={
-          !Flag.SLEEPYCODE_EXPERIMENTAL_DISABLE_COPY_ON_SELECT
-            ? () => Selection.copy(renderer, toast, t("tui.toast.copied_to_clipboard"))
-            : undefined
-        }
-      >
-        <Show when={value.stack.length}>
-          <Dialog onClose={() => value.clear()} size={value.size}>
-            {value.stack.at(-1)!.element}
-          </Dialog>
-        </Show>
-      </box>
-    </ctx.Provider>
-  )
-}
-
-export function useDialog() {
-  const value = useContext(ctx)
-  if (!value) {
-    throw new Error("useDialog must be used within a DialogProvider")
-  }
-  return value
-}

package/src/cli/cmd/tui/ui/link.tsx

@@ -1,28 +0,0 @@
-import type { JSX } from "solid-js"
-import type { RGBA } from "@opentui/core"
-import open from "open"
-
-export interface LinkProps {
-  href: string
-  children?: JSX.Element | string
-  fg?: RGBA
-}
-
-/**
- * Link component that renders clickable hyperlinks.
- * Clicking anywhere on the link text opens the URL in the default browser.
- */
-export function Link(props: LinkProps) {
-  const displayText = props.children ?? props.href
-
-  return (
-    <text
-      fg={props.fg}
-      onMouseUp={() => {
-        open(props.href).catch(() => {})
-      }}
-    >
-      {displayText}
-    </text>
-  )
-}