@interactive-inc/claude-funnel 0.8.1 → 0.10.1

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

@@ -1,142 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,86 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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>
-  )
-}