@alumbwe/anvil 1.0.0 → 1.0.1

package/src/components/segmented-control.tsx

@@ -1,187 +0,0 @@
-import React, { useState } from 'react'
-import stringWidth from 'string-width'
-
-import { Button } from './button'
-import { useTheme } from '../hooks/use-theme'
-
-import type { ChatTheme } from '../types/theme-system'
-
-export interface Segment {
-  id: string
-  label: string
-  isBold?: boolean
-  isSelected?: boolean
-  defaultHighlighted?: boolean // Highlighted when nothing else is hovered
-  disabled?: boolean // Gray out and de-emphasize disabled items
-}
-
-/**
- * SegmentedControlProps
- *
- * Renders a bordered segmented toggle. Pure UI; all behavior is driven by
- * the parent via callbacks.
- */
-interface SegmentedControlProps {
-  segments: Segment[]
-  onSegmentClick?: (id: string) => void
-  onMouseOver?: () => void
-  onMouseOut?: () => void
-}
-
-export const SegmentedControl = ({
-  segments,
-  onSegmentClick,
-  onMouseOver,
-  onMouseOut,
-}: SegmentedControlProps) => {
-  const theme = useTheme()
-  const [hoveredId, setHoveredId] = useState<string | null>(null)
-  const [hasHoveredSinceOpen, setHasHoveredSinceOpen] = useState(false)
-
-  const processedSegments = processSegments(
-    segments,
-    hoveredId,
-    hasHoveredSinceOpen,
-    theme,
-  )
-  const hoveredIndex = hoveredId
-    ? processedSegments.findIndex((s) => s.id === hoveredId)
-    : processedSegments.length - 1
-
-  return (
-    <box
-      style={{
-        flexDirection: 'row',
-        gap: 0,
-        backgroundColor: 'transparent',
-      }}
-      onMouseOver={onMouseOver}
-      onMouseOut={() => {
-        setHoveredId(null)
-        onMouseOut && onMouseOut()
-      }}
-    >
-      {/* Segments rendered with dynamic left/right edges based on hover */}
-      {processedSegments.map((seg, idx) => {
-        const leftOfHovered = idx <= hoveredIndex
-        const rightOfHovered = idx >= hoveredIndex
-
-        return (
-          <React.Fragment key={seg.id}>
-            {leftOfHovered ? (
-              <box style={{ flexDirection: 'column', gap: 0 }}>
-                <text fg={seg.frameColor} selectable={false}>╭</text>
-                <text fg={seg.frameColor} selectable={false}>│</text>
-                <text fg={seg.frameColor} selectable={false}>╰</text>
-              </box>
-            ) : null}
-
-            <Button
-              onClick={() => onSegmentClick && onSegmentClick(seg.id)}
-              onMouseOver={() => {
-                setHoveredId(seg.id)
-                setHasHoveredSinceOpen(true)
-              }}
-              style={{
-                flexDirection: 'column',
-                gap: 0,
-                width: seg.width,
-                minWidth: seg.width,
-              }}
-            >
-              <text fg={seg.frameColor}>{seg.topBorder}</text>
-              <text fg={seg.textColor}>
-                {seg.isItalic ? (
-                  <i>{seg.content}</i>
-                ) : seg.isBold ? (
-                  <b>{seg.content}</b>
-                ) : (
-                  seg.content
-                )}
-              </text>
-              <text fg={seg.frameColor}>{seg.bottomBorder}</text>
-            </Button>
-
-            {rightOfHovered ? (
-              <box style={{ flexDirection: 'column', gap: 0 }}>
-                <text fg={seg.frameColor} selectable={false}>╮</text>
-                <text fg={seg.frameColor} selectable={false}>│</text>
-                <text fg={seg.frameColor} selectable={false}>╯</text>
-              </box>
-            ) : null}
-          </React.Fragment>
-        )
-      })}
-    </box>
-  )
-}
-
-export type ProcessedSegment = {
-  id: string
-  topBorder: string
-  content: string
-  bottomBorder: string
-  frameColor: string
-  leftBorderColor: string
-  textColor: string
-  isHovered: boolean
-  isBold: boolean
-  isItalic: boolean
-  label: string
-  width: number
-}
-
-/**
- * Pure function that maps input segments + UI state to render-ready
- * segment descriptors. This is exported for unit testing.
- */
-export const processSegments = (
-  segments: Segment[],
-  hoveredId: string | null,
-  hasHoveredSinceOpen: boolean,
-  theme: ChatTheme,
-): ProcessedSegment[] => {
-  return segments.map((seg) => {
-    // Normalized flags
-    const isDisabled = !!seg.disabled
-    const isSelected = !!seg.isSelected
-    const defaultHL = !!seg.defaultHighlighted
-
-    // Hover and highlight state
-    const canHover = !isSelected || defaultHL
-    const isHovered = hoveredId === seg.id && canHover
-    const isDefaultHighlighted = defaultHL && !hasHoveredSinceOpen
-    const isHighlighted = isHovered || isDefaultHighlighted
-
-    // Emphasis
-    const isBold = !!(seg.isBold || isHovered || (isSelected && isHighlighted))
-
-    // Colors
-    const frameColor = isHighlighted ? theme.foreground : theme.border
-    const textMuted = isDisabled || (isSelected && !isHighlighted)
-    const textColor = textMuted ? theme.muted : theme.foreground
-
-    // Content + metrics
-    const content = ` ${seg.label} `
-    const width = stringWidth(content)
-    const horizontal = '─'.repeat(width)
-
-    // Return render-ready descriptor
-    // - Computed (complex conditions): frameColor, textColor, isBold
-    // - Inlined (simple): isItalic (disabled), leftBorderColor (= frameColor)
-    return {
-      id: seg.id,
-      topBorder: horizontal,
-      content,
-      bottomBorder: horizontal,
-      frameColor,
-      leftBorderColor: frameColor,
-      textColor,
-      isHovered,
-      isBold,
-      isItalic: isDisabled,
-      label: seg.label,
-      width,
-    }
-  })
-}

package/src/components/selectable-list.tsx

@@ -1,248 +0,0 @@
-/**
- * SelectableList - A reusable list component with keyboard navigation and hover support
- *
- * Features:
- * - Keyboard navigation (controlled by parent via focusedIndex)
- * - Hover highlighting
- * - Scrollbox with configurable height
- * - Theme-aware highlighting (theme.primary background when focused/hovered)
- */
-
-import { TextAttributes } from '@opentui/core'
-import React, {
-  useEffect,
-  useRef,
-  useState,
-  useCallback,
-  useImperativeHandle,
-  forwardRef,
-} from 'react'
-
-import { Button } from './button'
-import { useTheme } from '../hooks/use-theme'
-
-import type { ScrollBoxRenderable } from '@opentui/core'
-
-export interface SelectableListItem {
-  id: string
-  label: string
-  icon?: string
-  secondary?: string
-  /** If true, the label will be displayed in an accent color */
-  accent?: boolean
-  /** If true, secondary text is hidden (used only for search filtering) */
-  hideSecondary?: boolean
-}
-
-export interface SelectableListProps {
-  items: SelectableListItem[]
-  focusedIndex: number
-  /** Optional max height - if not provided, list fills available space */
-  maxHeight?: number
-  onSelect: (item: SelectableListItem, index: number) => void
-  actionLabel?: string
-  onAction?: (item: SelectableListItem, index: number) => void
-  onFocusChange?: (index: number) => void
-  emptyMessage?: string
-}
-
-export interface SelectableListHandle {
-  scrollToFocused: () => void
-}
-
-export const SelectableList = forwardRef<
-  SelectableListHandle,
-  SelectableListProps
->(
-  (
-    {
-      items,
-      focusedIndex,
-      maxHeight,
-      onSelect,
-      actionLabel,
-      onAction,
-      onFocusChange,
-      emptyMessage = 'No items',
-    },
-    ref,
-  ) => {
-    const theme = useTheme()
-    const scrollRef = useRef<ScrollBoxRenderable | null>(null)
-    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
-
-    const scrollToIndex = useCallback(
-      (index: number) => {
-        const scrollbox = scrollRef.current
-        if (!scrollbox || items.length === 0) return
-
-        const itemHeight = 1
-        const focusedTop = index * itemHeight
-        const focusedBottom = focusedTop + itemHeight
-
-        const viewportHeight = scrollbox.viewport.height
-        const currentScroll = scrollbox.scrollTop
-
-        if (focusedTop < currentScroll) {
-          scrollbox.scrollTop = focusedTop
-        } else if (focusedBottom > currentScroll + viewportHeight) {
-          scrollbox.scrollTop = focusedBottom - viewportHeight
-        }
-      },
-      [items.length],
-    )
-
-    // Expose scroll method to parent
-    useImperativeHandle(
-      ref,
-      () => ({
-        scrollToFocused: () => {
-          scrollToIndex(focusedIndex)
-        },
-      }),
-      [focusedIndex, scrollToIndex],
-    )
-
-    // Auto-scroll when focusedIndex changes and clear hover state
-    useEffect(() => {
-      scrollToIndex(focusedIndex)
-      // Clear hover state when keyboard navigation happens
-      setHoveredIndex(null)
-    }, [focusedIndex, scrollToIndex])
-
-    if (items.length === 0) {
-      return (
-        <box style={{ paddingLeft: 1, paddingTop: 1 }}>
-          <text style={{ fg: theme.muted }}>{emptyMessage}</text>
-        </box>
-      )
-    }
-
-    return (
-      <scrollbox
-        ref={scrollRef}
-        scrollX={false}
-        scrollbarOptions={{ visible: false }}
-        verticalScrollbarOptions={{
-          visible: true,
-          trackOptions: { width: 1 },
-        }}
-        style={{
-          height: maxHeight ?? '100%',
-          flexGrow: maxHeight ? 0 : 1,
-          rootOptions: {
-            flexDirection: 'row',
-            backgroundColor: 'transparent',
-          },
-          wrapperOptions: {
-            border: false,
-            backgroundColor: 'transparent',
-            flexDirection: 'column',
-          },
-          contentOptions: {
-            flexDirection: 'column',
-            gap: 0,
-            backgroundColor: 'transparent',
-          },
-        }}
-      >
-        {items.map((item, idx) => {
-          const isFocused = idx === focusedIndex
-          const isHovered = idx === hoveredIndex
-          const isHighlighted = isFocused || isHovered
-
-          // Use subtle highlight that works in both light and dark themes
-          const backgroundColor = isHighlighted
-            ? theme.surfaceHover
-            : 'transparent'
-          const textColor = isHighlighted ? theme.foreground : theme.muted
-
-          return (
-            <box
-              key={item.id}
-              style={{
-                flexDirection: 'row',
-                width: '100%',
-                backgroundColor,
-                height: 1,
-                overflow: 'hidden',
-              }}
-              onMouseOver={() => {
-                setHoveredIndex(idx)
-                onFocusChange?.(idx)
-              }}
-              onMouseOut={() => {
-                if (hoveredIndex === idx) {
-                  setHoveredIndex(null)
-                }
-              }}
-            >
-              <Button
-                onClick={() => onSelect(item, idx)}
-                style={{
-                  flexDirection: 'row',
-                  gap: 3,
-                  flexGrow: 1,
-                  flexShrink: 1,
-                  paddingLeft: 1,
-                  paddingRight: 1,
-                  paddingTop: 0,
-                  paddingBottom: 0,
-                  height: 1,
-                  overflow: 'hidden',
-                }}
-              >
-                {item.icon && (
-                  <text
-                    style={{
-                      fg: isHighlighted ? theme.foreground : theme.muted,
-                    }}
-                  >
-                    {item.icon}
-                  </text>
-                )}
-                <text
-                  style={{
-                    fg:
-                      item.accent && !isHighlighted ? theme.primary : textColor,
-                    attributes:
-                      item.accent || isHighlighted
-                        ? TextAttributes.BOLD
-                        : undefined,
-                  }}
-                >
-                  {item.label}
-                </text>
-                {item.secondary && !item.hideSecondary && (
-                  <text style={{ fg: theme.muted }}>{item.secondary}</text>
-                )}
-              </Button>
-              {actionLabel && onAction && (
-                <Button
-                  onClick={() => onAction(item, idx)}
-                  style={{
-                    paddingLeft: 1,
-                    paddingRight: 1,
-                    paddingTop: 0,
-                    paddingBottom: 0,
-                    height: 1,
-                    flexShrink: 0,
-                    marginRight: 1,
-                  }}
-                >
-                  <text
-                    style={{ fg: isHighlighted ? theme.error : theme.muted }}
-                  >
-                    {actionLabel}
-                  </text>
-                </Button>
-              )}
-            </box>
-          )
-        })}
-      </scrollbox>
-    )
-  },
-)
-
-SelectableList.displayName = 'SelectableList'

package/src/components/selected-chips.tsx

@@ -1,80 +0,0 @@
-import { TextAttributes } from '@opentui/core'
-import React, { useState } from 'react'
-
-import { Button } from './button'
-import { useTheme } from '../hooks/use-theme'
-import { BORDER_CHARS } from '../utils/ui-constants'
-
-interface SelectedChipsProps {
-  selectedAgents: Array<{ id: string; displayName: string }>
-  onRemove: (agentId: string) => void
-}
-
-export const SelectedChips: React.FC<SelectedChipsProps> = ({
-  selectedAgents,
-  onRemove,
-}) => {
-  const theme = useTheme()
-  const [hoveredChipId, setHoveredChipId] = useState<string | null>(null)
-
-  if (selectedAgents.length === 0) {
-    return null
-  }
-
-  return (
-    <box style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 1, paddingRight: 1, flexWrap: 'wrap' }}>
-      {selectedAgents.map((agent) => {
-        const isHovered = hoveredChipId === agent.id
-        const displayText = agent.displayName !== agent.id
-          ? agent.displayName
-          : agent.id
-
-        return (
-          <Button
-            key={agent.id}
-            onClick={() => onRemove(agent.id)}
-            onMouseOver={() => setHoveredChipId(agent.id)}
-            onMouseOut={() => setHoveredChipId(null)}
-            style={{
-              backgroundColor: 'transparent',
-              paddingLeft: 0,
-              paddingRight: 0,
-              paddingTop: 0,
-              paddingBottom: 0,
-            }}
-          >
-            <box
-              border
-              borderStyle="single"
-              borderColor={isHovered ? theme.error : theme.success}
-              customBorderChars={BORDER_CHARS}
-              style={{
-                flexDirection: 'row',
-                gap: 1,
-                paddingLeft: 1,
-                paddingRight: 1,
-              }}
-            >
-              <text
-                style={{
-                  fg: isHovered ? theme.error : theme.success,
-                  attributes: TextAttributes.BOLD,
-                }}
-              >
-                {displayText}
-              </text>
-              <text
-                style={{
-                  fg: isHovered ? theme.error : theme.muted,
-                }}
-              >
-                ✕
-              </text>
-            </box>
-          </Button>
-        )
-      })}
-
-    </box>
-  )
-}

package/src/components/separator.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-
-import { useTheme } from '../hooks/use-theme'
-
-interface SeparatorProps {
-  width: number
-  /**
-   * How much to reduce the width by to account for padding/borders
-   * @default 0
-   */
-  widthOffset?: number
-  /**
-   * Character to use for the separator line
-   * @default '─'
-   */
-  char?: string
-  /**
-   * Color of the separator (uses theme.border by default)
-   */
-  color?: string
-}
-
-export const Separator: React.FC<SeparatorProps> = ({
-  width,
-  widthOffset = 0,
-  char = '─',
-  color,
-}) => {
-  const theme = useTheme()
-  const separatorWidth = Math.max(1, width - widthOffset)
-  const fgColor = color || theme.border
-
-  return (
-    <box style={{ height: 1, flexShrink: 0 }}>
-      <text style={{ wrapMode: 'none' }}>
-        <span fg={fgColor}>{char.repeat(separatorWidth)}</span>
-      </text>
-    </box>
-  )
-}