@interactive-inc/claude-funnel 0.4.1 → 0.8.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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