@interactive-inc/claude-funnel 0.7.1 → 0.8.0

package/lib/tui/components/ui/hascii/file-tree.tsx

@@ -0,0 +1,142 @@
+import { useState } from "react"
+import type { HasciiTheme } from "@/tui/utils/hascii/theme"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+import { usePressable } from "@/tui/hooks/hascii/use-pressable"
+
+export type FileTreeNode = {
+  id: string
+  label: string
+  children?: FileTreeNode[]
+}
+
+export type Props = {
+  nodes: FileTreeNode[]
+  indent?: number
+  defaultExpanded?: string[]
+  expanded?: string[]
+  onToggle?: (id: string, isOpen: boolean) => void
+  selectedId?: string | null
+  onSelect?: (id: string) => void
+}
+
+type Row = {
+  node: FileTreeNode
+  depth: number
+  hasChildren: boolean
+  isOpen: boolean
+}
+
+type RowProps = {
+  row: Row
+  indent: number
+  isSelected: boolean
+  onPress: () => void
+}
+
+const pickRowBg = (
+  isActive: boolean,
+  isHovered: boolean,
+  isPressed: boolean,
+  theme: HasciiTheme,
+): string | undefined => {
+  if (isPressed) return theme.color.secondaryActive
+  if (isHovered && isActive) return theme.color.hoverActive
+  if (isHovered) return theme.color.secondaryHover
+  if (isActive) return theme.color.secondaryActive
+  return undefined
+}
+
+/** Internal row used by HasciiFileTree. Tracks the standard hover/active palette and renders ▾/▸ for folders. */
+function HasciiFileTreeRow(props: RowProps) {
+  const theme = useHasciiTheme()
+  const press = usePressable({ onPress: props.onPress })
+
+  const bg = pickRowBg(props.isSelected, press.isHovered, press.isPressed, theme)
+
+  const indentText = " ".repeat(props.row.depth * props.indent)
+  const marker = !props.row.hasChildren ? " " : props.row.isOpen ? "▾" : "▸"
+
+  return (
+    <box
+      flexDirection="row"
+      alignItems="center"
+      paddingLeft={1}
+      paddingRight={1}
+      height={1}
+      backgroundColor={bg}
+      {...press.bind}
+    >
+      <text fg={theme.color.mutedForeground}>{indentText}</text>
+      <text fg={theme.color.mutedForeground}>{marker} </text>
+      <text fg={theme.color.foreground}>{props.row.node.label}</text>
+    </box>
+  )
+}
+
+const flatten = (nodes: FileTreeNode[], depth: number, openSet: Set<string>): Row[] => {
+  const rows: Row[] = []
+
+  for (const node of nodes) {
+    const hasChildren = (node.children?.length ?? 0) > 0
+    const isOpen = openSet.has(node.id)
+
+    rows.push({ node, depth, hasChildren, isOpen })
+
+    if (hasChildren && isOpen) {
+      const childRows = flatten(node.children ?? [], depth + 1, openSet)
+      for (const childRow of childRows) rows.push(childRow)
+    }
+  }
+
+  return rows
+}
+
+/** Indented IDE-style file tree. Folder rows show ▾/▸ and toggle on click; leaf rows just select. */
+export function HasciiFileTree(props: Props) {
+  const indent = props.indent ?? 2
+
+  const internalState = useState<string[]>(props.defaultExpanded ?? [])
+  const internalOpen = internalState[0]
+  const setInternalOpen = internalState[1]
+
+  const expanded = props.expanded ?? internalOpen
+  const openSet = new Set(expanded)
+
+  const selectedState = useState<string | null>(props.selectedId ?? null)
+  const internalSelected = selectedState[0]
+  const setInternalSelected = selectedState[1]
+
+  const selected = props.selectedId !== undefined ? props.selectedId : internalSelected
+
+  const toggle = (id: string) => {
+    const isOpen = openSet.has(id)
+    const next = isOpen ? expanded.filter((entry) => entry !== id) : [...expanded, id]
+
+    if (props.expanded === undefined) setInternalOpen(next)
+    props.onToggle?.(id, !isOpen)
+  }
+
+  const select = (id: string) => {
+    if (props.selectedId === undefined) setInternalSelected(id)
+    props.onSelect?.(id)
+  }
+
+  const rows = flatten(props.nodes, 0, openSet)
+
+  return (
+    <box flexDirection="column">
+      {rows.map((row) => (
+        <HasciiFileTreeRow
+          key={row.node.id}
+          row={row}
+          indent={indent}
+          isSelected={row.node.id === selected}
+          onPress={() => {
+            select(row.node.id)
+            if (row.hasChildren) toggle(row.node.id)
+          }}
+        />
+      ))}
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/focus-group.tsx

@@ -0,0 +1,62 @@
+import { useKeyboard } from "@opentui/react"
+import { createContext, useContext, useState } from "react"
+import type { ReactNode } from "react"
+
+type ContextValue = {
+  currentId: string | null
+  setCurrentId: (id: string) => void
+}
+
+const HasciiFocusContext = createContext<ContextValue | null>(null)
+
+/** Returns whether the provided focusId matches the surrounding HasciiFocusGroup's current focus. */
+export function useHasciiFocus(focusId: string | undefined): boolean {
+  const ctx = useContext(HasciiFocusContext)
+
+  if (!ctx || focusId === undefined) return false
+  return ctx.currentId === focusId
+}
+
+/** Returns the imperative API of the surrounding HasciiFocusGroup. Null when used outside a group. */
+export function useHasciiFocusController(): ContextValue | null {
+  return useContext(HasciiFocusContext)
+}
+
+/** Computes the next focus index. Wraps at both ends. */
+export function nextFocusIndex(currentIndex: number, length: number, isShift: boolean): number {
+  if (length === 0) return -1
+
+  return isShift ? (currentIndex - 1 + length) % length : (currentIndex + 1) % length
+}
+
+export type Props = {
+  ids: readonly string[]
+  defaultId?: string
+  children: ReactNode
+}
+
+/** Manages keyboard focus across an ordered list of children. Tab cycles forward; Shift+Tab cycles back. */
+export function HasciiFocusGroup(props: Props) {
+  const initialId = props.defaultId ?? props.ids[0] ?? null
+
+  const currentState = useState<string | null>(initialId)
+  const currentId = currentState[0]
+  const setCurrentId = currentState[1]
+
+  useKeyboard((key) => {
+    if (key.name !== "tab" || props.ids.length === 0) return
+
+    const currentIndex = currentId ? props.ids.indexOf(currentId) : -1
+    const next = nextFocusIndex(currentIndex, props.ids.length, key.shift ?? false)
+
+    const target = props.ids[next]
+    if (target !== undefined) setCurrentId(target)
+  })
+
+  const value: ContextValue = {
+    currentId,
+    setCurrentId: (id: string) => setCurrentId(id),
+  }
+
+  return <HasciiFocusContext.Provider value={value}>{props.children}</HasciiFocusContext.Provider>
+}

package/lib/tui/components/ui/hascii/form-item.tsx

@@ -0,0 +1,43 @@
+import { useId } from "react"
+import type { ReactNode } from "react"
+import { HasciiFormItemProvider } from "@/tui/utils/hascii/form-item-context"
+import { useHasciiInputFocus } from "@/tui/utils/hascii/input-focus-context"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export type Props = {
+  label: string
+  labelWidth?: number
+  children: ReactNode
+}
+
+/** Horizontal form row: a fixed-width label on the left, the field on the right. The label background brightens while the wrapped HasciiInput is focused (requires HasciiInputFocusProvider in the tree). */
+export function HasciiFormItem(props: Props) {
+  const labelWidth = props.labelWidth ?? 12
+  const theme = useHasciiTheme()
+
+  const id = useId()
+  const inputFocus = useHasciiInputFocus()
+  const isInputFocused = inputFocus?.focusedId === id
+
+  const labelBg = isInputFocused ? theme.color.secondaryActive : theme.color.popover
+  const labelFg = isInputFocused ? theme.color.foreground : theme.color.mutedForeground
+
+  return (
+    <HasciiFormItemProvider value={{ focusId: id }}>
+      <box flexDirection="row" alignItems="center">
+        <box
+          width={labelWidth}
+          height={3}
+          paddingLeft={2}
+          paddingRight={2}
+          alignItems="flex-start"
+          justifyContent="center"
+          backgroundColor={labelBg}
+        >
+          <text fg={labelFg}>{props.label}</text>
+        </box>
+        {props.children}
+      </box>
+    </HasciiFormItemProvider>
+  )
+}

package/lib/tui/components/ui/hascii/input-otp.tsx

@@ -0,0 +1,86 @@
+import { useKeyboard } from "@opentui/react"
+import { useState } from "react"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export type Props = {
+  length?: number
+  value?: string
+  defaultValue?: string
+  isFocused?: boolean
+  onChange?: (value: string) => void
+  onComplete?: (value: string) => void
+}
+
+const isDigit = (key: string): boolean => /^[0-9]$/.test(key)
+
+/** OTP slot row. Uncontrolled by default — type digits to fill, backspace to erase. */
+export function HasciiInputOtp(props: Props) {
+  const length = props.length ?? 6
+  const isFocused = props.isFocused ?? true
+  const theme = useHasciiTheme()
+
+  const internalState = useState(props.defaultValue ?? "")
+  const internal = internalState[0]
+  const setInternal = internalState[1]
+
+  const value = props.value ?? internal
+
+  const setValue = (next: string) => {
+    if (props.value === undefined) setInternal(next)
+    props.onChange?.(next)
+
+    if (next.length === length) props.onComplete?.(next)
+  }
+
+  useKeyboard((key) => {
+    if (!isFocused) return
+
+    if (key.name === "backspace") {
+      if (value.length > 0) setValue(value.slice(0, -1))
+      return
+    }
+
+    if (isDigit(key.name) && value.length < length) {
+      setValue(value + key.name)
+    }
+  })
+
+  const slots: number[] = []
+  for (let index = 0; index < length; index++) slots.push(index)
+
+  const focusedIndex = Math.min(value.length, length - 1)
+
+  return (
+    <box flexDirection="row" gap={1}>
+      {slots.map((index) => {
+        const char = value[index]
+        const isSlotFocused = isFocused && index === focusedIndex
+        const isFilled = char !== undefined
+
+        const borderColor = isSlotFocused
+          ? theme.color.ring
+          : isFilled
+            ? theme.color.border
+            : theme.color.input
+
+        return (
+          <box
+            key={index}
+            border
+            borderStyle="rounded"
+            borderColor={borderColor}
+            backgroundColor={theme.color.background}
+            width={5}
+            height={3}
+            alignItems="center"
+            justifyContent="center"
+          >
+            <text fg={isFilled ? theme.color.foreground : theme.color.mutedForeground}>
+              {char ?? "·"}
+            </text>
+          </box>
+        )
+      })}
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/input.tsx

@@ -0,0 +1,130 @@
+import { useKeyboard } from "@opentui/react"
+import { useId, useState } from "react"
+import { useHasciiFormItem } from "@/tui/utils/hascii/form-item-context"
+import { useHasciiInputFocus } from "@/tui/utils/hascii/input-focus-context"
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+import { usePressable } from "@/tui/hooks/hascii/use-pressable"
+
+type Variant = "default" | "outline"
+
+export type Props = {
+  variant?: Variant
+  placeholder?: string
+  value?: string
+  width?: number
+  defaultFocused?: boolean
+  onInput?: (value: string) => void
+  onChange?: (value: string) => void
+}
+
+/** Single-line text input. Click to focus, Esc / outside click to blur (requires HasciiInputFocusProvider for outside click). */
+export function HasciiInput(props: Props) {
+  const variant = props.variant ?? "default"
+  const width = props.width ?? 32
+  const placeholder = props.placeholder ?? ""
+
+  const fallbackId = useId()
+  const formItem = useHasciiFormItem()
+  const id = formItem?.focusId ?? fallbackId
+  const focusCtx = useHasciiInputFocus()
+  const fallbackState = useState(props.defaultFocused ?? false)
+  const isFocused = focusCtx ? focusCtx.focusedId === id : fallbackState[0]
+
+  const focus = (): void => {
+    if (focusCtx) focusCtx.setFocusedId(id)
+    else fallbackState[1](true)
+  }
+
+  const blur = (): void => {
+    if (focusCtx) focusCtx.setFocusedId(null)
+    else fallbackState[1](false)
+  }
+
+  const theme = useHasciiTheme()
+  const press = usePressable()
+
+  useKeyboard((key) => {
+    if (!isFocused) return
+    if (key.name === "escape") blur()
+  })
+
+  if (variant === "outline") {
+    const borderColor = press.isPressed
+      ? theme.color.foreground
+      : isFocused
+        ? theme.color.ring
+        : press.isHovered
+          ? theme.color.mutedForeground
+          : theme.color.input
+
+    return (
+      <box
+        border
+        borderStyle="rounded"
+        borderColor={borderColor}
+        height={3}
+        width={width}
+        paddingLeft={1}
+        paddingRight={1}
+        backgroundColor={theme.color.background}
+        justifyContent="center"
+        {...press.bind}
+        onMouseDown={(event) => {
+          event.stopPropagation()
+          press.bind.onMouseDown()
+          focus()
+        }}
+      >
+        <input
+          focused={isFocused}
+          placeholder={placeholder}
+          value={props.value}
+          textColor={theme.color.foreground}
+          placeholderColor={theme.color.mutedForeground}
+          cursorColor={theme.color.foreground}
+          onInput={props.onInput}
+          onChange={props.onChange}
+        />
+      </box>
+    )
+  }
+
+  const bg = press.isPressed
+    ? theme.color.secondaryActive
+    : isFocused || press.isHovered
+      ? theme.color.secondaryHover
+      : theme.color.muted
+
+  return (
+    <box
+      height={3}
+      width={width}
+      paddingLeft={2}
+      paddingRight={2}
+      backgroundColor={bg}
+      justifyContent="center"
+      {...press.bind}
+      onMouseDown={(event) => {
+        event.stopPropagation()
+        press.bind.onMouseDown()
+        focus()
+      }}
+    >
+      <input
+        focused={isFocused}
+        placeholder={placeholder}
+        value={props.value}
+        textColor={theme.color.foreground}
+        placeholderColor={theme.color.mutedForeground}
+        cursorColor={theme.color.foreground}
+        onInput={props.onInput}
+        onChange={props.onChange}
+      />
+      {isFocused ? (
+        <box position="absolute" bottom={0} left={0} right={0}>
+          <text fg={theme.color.primary}>{"▁".repeat(width)}</text>
+        </box>
+      ) : null}
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/pagination.tsx

@@ -0,0 +1,105 @@
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+import { usePressable } from "@/tui/hooks/hascii/use-pressable"
+
+export type Props = {
+  page: number
+  pageCount: number
+  onChange?: (page: number) => void
+}
+
+type ButtonProps = {
+  label: string
+  isActive?: boolean
+  isDisabled?: boolean
+  onPress: () => void
+}
+
+function PageButton(props: ButtonProps) {
+  const theme = useHasciiTheme()
+  const press = usePressable({
+    isDisabled: props.isDisabled,
+    onPress: props.onPress,
+  })
+
+  const fg = props.isDisabled
+    ? theme.color.mutedForeground
+    : props.isActive
+      ? theme.color.primaryForeground
+      : theme.color.foreground
+
+  const bg = props.isDisabled
+    ? undefined
+    : props.isActive
+      ? theme.color.primary
+      : press.isPressed
+        ? theme.color.accentActive
+        : press.isHovered
+          ? theme.color.accentHover
+          : undefined
+
+  return (
+    <box paddingLeft={1} paddingRight={1} height={1} backgroundColor={bg} {...press.bind}>
+      <text fg={fg}>{props.label}</text>
+    </box>
+  )
+}
+
+export const buildPageList = (page: number, pageCount: number): (number | null)[] => {
+  if (pageCount <= 7) {
+    const list: number[] = []
+    for (let index = 1; index <= pageCount; index++) list.push(index)
+    return list
+  }
+
+  const result: (number | null)[] = [1]
+  const left = Math.max(2, page - 1)
+  const right = Math.min(pageCount - 1, page + 1)
+
+  if (left > 2) result.push(null)
+  for (let index = left; index <= right; index++) result.push(index)
+  if (right < pageCount - 1) result.push(null)
+
+  result.push(pageCount)
+  return result
+}
+
+/** Page navigator with previous, next, and numeric jumps. Renders ellipses when collapsed. */
+export function HasciiPagination(props: Props) {
+  const theme = useHasciiTheme()
+
+  const change = (next: number) => {
+    if (next < 1 || next > props.pageCount || next === props.page) return
+    props.onChange?.(next)
+  }
+
+  const pages = buildPageList(props.page, props.pageCount)
+
+  return (
+    <box flexDirection="row" gap={1} alignItems="center">
+      <PageButton label="<" isDisabled={props.page <= 1} onPress={() => change(props.page - 1)} />
+      {pages.map((entry, index) => {
+        if (entry === null) {
+          return (
+            <box key={`gap-${index}`} paddingLeft={1} paddingRight={1}>
+              <text fg={theme.color.mutedForeground}>…</text>
+            </box>
+          )
+        }
+
+        return (
+          <PageButton
+            key={entry}
+            label={String(entry)}
+            isActive={entry === props.page}
+            onPress={() => change(entry)}
+          />
+        )
+      })}
+      <PageButton
+        label=">"
+        isDisabled={props.page >= props.pageCount}
+        onPress={() => change(props.page + 1)}
+      />
+    </box>
+  )
+}

package/lib/tui/components/ui/hascii/progress.tsx

@@ -0,0 +1,28 @@
+import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
+
+export type Props = {
+  value?: number
+  width?: number
+  fillColor?: string
+  trackColor?: string
+}
+
+/** Horizontal progress bar. Value is 0–1; clamped on render. */
+export function HasciiProgress(props: Props) {
+  const value = Math.max(0, Math.min(1, props.value ?? 0))
+  const width = props.width ?? 32
+
+  const theme = useHasciiTheme()
+  const fillColor = props.fillColor ?? theme.color.primary
+  const trackColor = props.trackColor ?? theme.color.muted
+
+  const filled = Math.round(value * width)
+  const empty = width - filled
+
+  return (
+    <box flexDirection="row" width={width} height={1}>
+      {filled > 0 ? <box width={filled} height={1} backgroundColor={fillColor} /> : null}
+      {empty > 0 ? <box width={empty} height={1} backgroundColor={trackColor} /> : null}
+    </box>
+  )
+}