@interactive-inc/claude-funnel 0.10.0 → 0.15.1

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

@@ -1,194 +0,0 @@
-import { useKeyboard } from "@opentui/react"
-import { useState } from "react"
-import type { ReactNode } from "react"
-import { useHasciiFocus } from "@/tui/components/ui/hascii/focus-group"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import { usePressable } from "@/tui/hooks/hascii/use-pressable"
-
-type Variant = "default" | "secondary" | "outline" | "ghost" | "destructive"
-type Size = "default" | "sm" | "md" | "lg"
-
-export type Props = {
-  variant?: Variant
-  size?: Size
-  focusId?: string
-  isFocused?: boolean
-  isDisabled?: boolean
-  onPress?: () => void
-  children?: ReactNode
-}
-
-type ResolvedSize = "sm" | "md" | "lg"
-
-const sizeDims: Record<ResolvedSize, { paddingX: number; height: number }> = {
-  sm: { paddingX: 1, height: 1 },
-  md: { paddingX: 2, height: 1 },
-  lg: { paddingX: 2, height: 3 },
-}
-
-const resolveSize = (size: Size): ResolvedSize => (size === "default" ? "md" : size)
-
-const pickBg = (
-  rest: string | undefined,
-  hover: string,
-  active: string,
-  isHover: boolean,
-  isActive: boolean,
-): string | undefined => {
-  if (isActive) return active
-  if (isHover) return hover
-  return rest
-}
-
-/** A focusable terminal button. Background cycles through rest, hover, and active states. */
-export function HasciiButton(props: Props) {
-  const variant = props.variant ?? "default"
-  const size = props.size ?? "default"
-  const groupFocused = useHasciiFocus(props.focusId)
-  const isFocused = props.isFocused ?? groupFocused
-  const isDisabled = props.isDisabled ?? false
-
-  const theme = useHasciiTheme()
-  const resolvedSize = resolveSize(size)
-  const dims = sizeDims[resolvedSize]
-
-  const press = usePressable({ isDisabled, onPress: props.onPress })
-
-  const flashState = useState(false)
-  const flashed = flashState[0]
-  const setFlashed = flashState[1]
-
-  const isHover = press.isHovered && !press.isPressed && !flashed
-  const isActive = press.isPressed || flashed
-
-  useKeyboard((key) => {
-    if (!isFocused || isDisabled) return
-
-    if (key.name === "return" || key.name === "space") {
-      setFlashed(true)
-      props.onPress?.()
-      setTimeout(() => setFlashed(false), 120)
-    }
-  })
-
-  if (variant === "outline") {
-    const tone = isDisabled
-      ? theme.color.border
-      : isActive
-        ? theme.color.primaryActive
-        : isHover
-          ? theme.color.primaryHover
-          : theme.color.primary
-
-    const outlinePaddingX = resolvedSize === "sm" ? 0 : resolvedSize === "md" ? 1 : 2
-    const outlineHeight = 3
-
-    return (
-      <box
-        paddingLeft={outlinePaddingX}
-        paddingRight={outlinePaddingX}
-        height={outlineHeight}
-        border={outlineHeight >= 3}
-        borderStyle="rounded"
-        borderColor={tone}
-        alignItems="center"
-        justifyContent="center"
-        {...press.bind}
-      >
-        <text fg={tone}>{props.children}</text>
-      </box>
-    )
-  }
-
-  if (variant === "ghost") {
-    const fg = isDisabled ? theme.color.mutedForeground : theme.color.foreground
-    const bg = pickBg(undefined, theme.color.accentHover, theme.color.accent, isHover, isActive)
-
-    return (
-      <box
-        paddingLeft={dims.paddingX}
-        paddingRight={dims.paddingX}
-        height={dims.height}
-        backgroundColor={bg}
-        alignItems="center"
-        justifyContent="center"
-        {...press.bind}
-      >
-        <text fg={fg}>{props.children}</text>
-      </box>
-    )
-  }
-
-  if (variant === "secondary") {
-    const fg = isDisabled ? theme.color.mutedForeground : theme.color.secondaryForeground
-    const bg = pickBg(
-      theme.color.secondary,
-      theme.color.secondaryHover,
-      theme.color.secondaryActive,
-      isHover,
-      isActive,
-    )
-
-    return (
-      <box
-        paddingLeft={dims.paddingX}
-        paddingRight={dims.paddingX}
-        height={dims.height}
-        backgroundColor={bg}
-        alignItems="center"
-        justifyContent="center"
-        {...press.bind}
-      >
-        <text fg={fg}>{props.children}</text>
-      </box>
-    )
-  }
-
-  if (variant === "destructive") {
-    const fg = isDisabled ? theme.color.mutedForeground : theme.color.destructiveForeground
-    const bg = pickBg(
-      theme.color.destructive,
-      theme.color.destructiveHover,
-      theme.color.destructiveActive,
-      isHover,
-      isActive,
-    )
-
-    return (
-      <box
-        paddingLeft={dims.paddingX}
-        paddingRight={dims.paddingX}
-        height={dims.height}
-        backgroundColor={bg}
-        alignItems="center"
-        justifyContent="center"
-        {...press.bind}
-      >
-        <text fg={fg}>{props.children}</text>
-      </box>
-    )
-  }
-
-  const fg = isDisabled ? theme.color.mutedForeground : theme.color.primaryForeground
-  const bg = pickBg(
-    theme.color.primary,
-    theme.color.primaryHover,
-    theme.color.primaryActive,
-    isHover,
-    isActive,
-  )
-
-  return (
-    <box
-      paddingLeft={dims.paddingX}
-      paddingRight={dims.paddingX}
-      height={dims.height}
-      backgroundColor={bg}
-      alignItems="center"
-      justifyContent="center"
-      {...press.bind}
-    >
-      <text fg={fg}>{props.children}</text>
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/card-content.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Vertical content region inside a HasciiCard. paddingY=1 keeps the body separated from neighbouring header and footer. */
-export function HasciiCardContent(props: Props) {
-  return (
-    <box flexDirection="column" gap={1} paddingTop={1} paddingBottom={1}>
-      {props.children}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/card-description.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Secondary descriptive text rendered under a HasciiCardTitle. */
-export function HasciiCardDescription(props: Props) {
-  const theme = useHasciiTheme()
-
-  return <text fg={theme.color.mutedForeground}>{props.children}</text>
-}

package/lib/tui/components/ui/hascii/card-footer.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Horizontal footer region for action rows inside a HasciiCard. */
-export function HasciiCardFooter(props: Props) {
-  return (
-    <box flexDirection="row" justifyContent="flex-end" gap={1}>
-      {props.children}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/card-header.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Vertical heading group typically holding HasciiCardTitle and HasciiCardDescription. */
-export function HasciiCardHeader(props: Props) {
-  return (
-    <box flexDirection="column" gap={0}>
-      {props.children}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/card-title.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Primary title text inside a card header. */
-export function HasciiCardTitle(props: Props) {
-  const theme = useHasciiTheme()
-
-  return <text fg={theme.color.foreground}>{props.children}</text>
-}

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

@@ -1,27 +0,0 @@
-import type { ReactNode } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type Props = {
-  width?: number
-  children?: ReactNode
-}
-
-/** Filled container that frames its children. Use with HasciiCardHeader, HasciiCardContent, and HasciiCardFooter. */
-export function HasciiCard(props: Props) {
-  const theme = useHasciiTheme()
-
-  return (
-    <box
-      backgroundColor={theme.color.card}
-      flexDirection="column"
-      paddingTop={1}
-      paddingBottom={1}
-      paddingLeft={2}
-      paddingRight={2}
-      gap={0}
-      width={props.width}
-    >
-      {props.children}
-    </box>
-  )
-}

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

@@ -1,65 +0,0 @@
-import type { ReactNode } from "react"
-import { useState } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import { usePressable } from "@/tui/hooks/hascii/use-pressable"
-
-type Type = "ballot" | "square"
-
-export type Props = {
-  type?: Type
-  isChecked?: boolean
-  defaultChecked?: boolean
-  isDisabled?: boolean
-  onChange?: (next: boolean) => void
-  children?: ReactNode
-}
-
-const GLYPHS: Record<Type, { checked: string; unchecked: string }> = {
-  ballot: { checked: "☑", unchecked: "☐" },
-  square: { checked: "■", unchecked: "□" },
-}
-
-/** Single checkbox row. type="ballot" (default) uses ☐/☑; type="square" matches the stepper's ■/□ glyphs. */
-export function HasciiCheckbox(props: Props) {
-  const type = props.type ?? "ballot"
-  const isDisabled = props.isDisabled ?? false
-  const theme = useHasciiTheme()
-
-  const internalState = useState(props.defaultChecked ?? false)
-  const internal = internalState[0]
-  const setInternal = internalState[1]
-
-  const isChecked = props.isChecked ?? internal
-
-  const toggle = () => {
-    const next = !isChecked
-
-    if (props.isChecked === undefined) setInternal(next)
-    props.onChange?.(next)
-  }
-
-  const press = usePressable({ isDisabled, onPress: toggle })
-
-  const glyphFg = isDisabled
-    ? theme.color.mutedForeground
-    : isChecked
-      ? theme.color.primary
-      : press.isHovered
-        ? theme.color.foreground
-        : theme.color.mutedForeground
-
-  const labelFg = isDisabled ? theme.color.mutedForeground : theme.color.foreground
-
-  const glyphs = GLYPHS[type]
-
-  return (
-    <box flexDirection="row" alignItems="center" {...press.bind}>
-      <text fg={glyphFg}>{isChecked ? glyphs.checked : glyphs.unchecked}</text>
-      {props.children !== undefined ? (
-        <box paddingLeft={2}>
-          <text fg={labelFg}>{props.children}</text>
-        </box>
-      ) : null}
-    </box>
-  )
-}

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

@@ -1,159 +0,0 @@
-import { useKeyboard } from "@opentui/react"
-import { useState } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-import { usePressable } from "@/tui/hooks/hascii/use-pressable"
-import { HasciiInput } from "@/tui/components/ui/hascii/input"
-
-export type CommandItem = {
-  id: string
-  label: string
-  hint?: string
-}
-
-export type Props = {
-  items: CommandItem[]
-  placeholder?: string
-  width?: number
-  maxRows?: number
-  isFocused?: boolean
-  onRun?: (id: string) => void
-}
-
-type RowProps = {
-  item: CommandItem
-  isActive: boolean
-  onHover: () => void
-  onPress: () => void
-}
-
-const ROW_HEIGHT = 1
-
-/** Internal row used by HasciiCommand. Hover moves the active cursor; only the active row gets a bg + ▏ left rule. */
-function HasciiCommandRow(props: RowProps) {
-  const theme = useHasciiTheme()
-  const press = usePressable({ onPress: props.onPress })
-
-  const bg = props.isActive ? theme.color.secondaryActive : undefined
-
-  return (
-    <box
-      flexDirection="row"
-      alignItems="center"
-      justifyContent="space-between"
-      paddingLeft={2}
-      paddingRight={2}
-      height={ROW_HEIGHT}
-      backgroundColor={bg}
-      onMouseOver={() => {
-        press.bind.onMouseOver()
-        props.onHover()
-      }}
-      onMouseOut={press.bind.onMouseOut}
-      onMouseDown={press.bind.onMouseDown}
-      onMouseUp={press.bind.onMouseUp}
-    >
-      {props.isActive ? (
-        <box position="absolute" left={0} top={0} bottom={0} flexDirection="column">
-          {Array.from({ length: ROW_HEIGHT }, (_, index) => (
-            <text key={index} fg={theme.color.primary}>
-              ▏
-            </text>
-          ))}
-        </box>
-      ) : null}
-      <text fg={theme.color.foreground}>{props.item.label}</text>
-      {props.item.hint !== undefined ? (
-        <text fg={theme.color.mutedForeground}>{props.item.hint}</text>
-      ) : null}
-    </box>
-  )
-}
-
-const matches = (item: CommandItem, query: string): boolean => {
-  if (query.length === 0) return true
-
-  const needle = query.toLowerCase()
-  return item.label.toLowerCase().includes(needle)
-}
-
-/** Keyboard-driven palette: type to filter, ↑/↓ moves the cursor (also moved by hover), Enter runs. The input bar is HasciiInput. */
-export function HasciiCommand(props: Props) {
-  const width = props.width ?? 48
-  const maxRows = props.maxRows ?? 8
-  const isFocused = props.isFocused ?? true
-  const placeholder = props.placeholder ?? "type a command…"
-  const theme = useHasciiTheme()
-
-  const queryState = useState("")
-  const query = queryState[0]
-  const setQuery = queryState[1]
-
-  const indexState = useState(0)
-  const activeIndex = indexState[0]
-  const setActiveIndex = indexState[1]
-
-  const filtered = props.items.filter((item) => matches(item, query))
-  const safeIndex = filtered.length === 0 ? 0 : Math.min(activeIndex, filtered.length - 1)
-
-  useKeyboard((key) => {
-    if (!isFocused) return
-
-    if (key.name === "up") {
-      setActiveIndex(Math.max(0, safeIndex - 1))
-      return
-    }
-
-    if (key.name === "down") {
-      setActiveIndex(Math.min(filtered.length - 1, safeIndex + 1))
-      return
-    }
-
-    if (key.name === "return") {
-      const item = filtered[safeIndex]
-      if (item) props.onRun?.(item.id)
-      return
-    }
-  })
-
-  return (
-    <box width={width} backgroundColor={theme.color.card} flexDirection="column">
-      <HasciiInput
-        defaultFocused={isFocused}
-        width={width}
-        value={query}
-        placeholder={placeholder}
-        onInput={(value) => {
-          setQuery(value)
-          setActiveIndex(0)
-        }}
-      />
-      <box height={maxRows}>
-        {filtered.length === 0 ? (
-          <box paddingLeft={2} paddingRight={2} height={1}>
-            <text fg={theme.color.mutedForeground}>no matches</text>
-          </box>
-        ) : (
-          <scrollbox
-            flexGrow={1}
-            scrollY
-            stickyScroll={false}
-            contentOptions={{ flexDirection: "column", gap: 0 }}
-          >
-            {filtered.map((item, index) => (
-              <HasciiCommandRow
-                key={item.id}
-                item={item}
-                isActive={index === safeIndex}
-                onHover={() => setActiveIndex(index)}
-                onPress={() => {
-                  setActiveIndex(index)
-                  props.onRun?.(item.id)
-                }}
-              />
-            ))}
-          </scrollbox>
-        )}
-      </box>
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/dialog-content.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Vertical body region inside a HasciiDialog. */
-export function HasciiDialogContent(props: Props) {
-  return (
-    <box flexDirection="column" gap={1}>
-      {props.children}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/dialog-description.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Secondary descriptive text rendered under a HasciiDialogTitle. */
-export function HasciiDialogDescription(props: Props) {
-  const theme = useHasciiTheme()
-
-  return <text fg={theme.color.mutedForeground}>{props.children}</text>
-}

package/lib/tui/components/ui/hascii/dialog-footer.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Horizontal action row, right-aligned, at the bottom of a HasciiDialog. */
-export function HasciiDialogFooter(props: Props) {
-  return (
-    <box flexDirection="row" gap={1} justifyContent="flex-end" marginTop={1}>
-      {props.children}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/dialog-header.tsx

@@ -1,14 +0,0 @@
-import type { ReactNode } from "react"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Dialog header. Stacks the children vertically with the standard 1-cell gap. */
-export function HasciiDialogHeader(props: Props) {
-  return (
-    <box flexDirection="column" gap={1}>
-      {props.children}
-    </box>
-  )
-}

package/lib/tui/components/ui/hascii/dialog-title.tsx

@@ -1,13 +0,0 @@
-import type { ReactNode } from "react"
-import { useHasciiTheme } from "@/tui/utils/hascii/theme-context"
-
-export type Props = {
-  children?: ReactNode
-}
-
-/** Primary title text inside a HasciiDialogHeader. */
-export function HasciiDialogTitle(props: Props) {
-  const theme = useHasciiTheme()
-
-  return <text fg={theme.color.foreground}>{props.children}</text>
-}

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

@@ -1,27 +0,0 @@
-import type { ReactNode } from "react"
-import { HasciiButton } from "@/tui/components/ui/hascii/button"
-import { HasciiCard } from "@/tui/components/ui/hascii/card"
-
-export type Props = {
-  width?: number
-  onClose?: () => void
-  children?: ReactNode
-}
-
-/** Floating dialog. Wraps a HasciiCard for layout and renders a default-variant x button just above the card's top-right corner when onClose is provided. */
-export function HasciiDialog(props: Props) {
-  const width = props.width ?? 48
-
-  return (
-    <box width={width} paddingTop={1}>
-      <HasciiCard width={width}>{props.children}</HasciiCard>
-      {props.onClose ? (
-        <box position="absolute" top={0} right={0}>
-          <HasciiButton variant="secondary" size="default" onPress={props.onClose}>
-            x
-          </HasciiButton>
-        </box>
-      ) : null}
-    </box>
-  )
-}