@silvery/examples 0.17.3 → 0.17.5

package/apps/spatial-focus-demo.tsx

@@ -1,372 +0,0 @@
-/**
- * Spatial Focus Navigation Demo — Kanban Board
- *
- * A kanban board where arrow keys spatially navigate between cards across columns.
- * Uses React state for focus tracking with spatial nearest-neighbor lookup.
- *
- * Cards have varied heights to prove spatial navigation handles non-uniform layouts.
- * Focus is shown via yellow border and bold title on the focused card.
- *
- * Run: bun vendor/silvery/examples/apps/spatial-focus-demo.tsx
- */
-
-import React, { useState, useMemo } from "react"
-import { Box, Text } from "silvery"
-import { run, useInput, type Key } from "silvery/runtime"
-
-// ============================================================================
-// Data
-// ============================================================================
-
-interface CardData {
-  id: string
-  title: string
-  description?: string
-  tags: string[]
-  priority?: "low" | "medium" | "high"
-}
-
-interface ColumnData {
-  id: string
-  title: string
-  cards: CardData[]
-}
-
-const columns: ColumnData[] = [
-  {
-    id: "backlog",
-    title: "Backlog",
-    cards: [
-      { id: "b1", title: "Design system audit", tags: ["design"], priority: "low" },
-      {
-        id: "b2",
-        title: "Refactor auth module",
-        description: "Move from JWT to session-based auth.\nUpdate all middleware.\nAdd refresh token rotation.",
-        tags: ["backend", "security"],
-        priority: "high",
-      },
-      { id: "b3", title: "Add dark mode", tags: ["frontend"] },
-      {
-        id: "b4",
-        title: "Database migration tool",
-        description: "Schema versioning with rollback support.",
-        tags: ["backend", "devops"],
-        priority: "medium",
-      },
-      { id: "b5", title: "Update dependencies", tags: ["maintenance"] },
-    ],
-  },
-  {
-    id: "todo",
-    title: "To Do",
-    cards: [
-      {
-        id: "t1",
-        title: "User dashboard",
-        description: "Activity feed, stats overview,\nrecent projects, and quick actions.",
-        tags: ["frontend", "ux"],
-        priority: "high",
-      },
-      { id: "t2", title: "API rate limiting", tags: ["backend"], priority: "medium" },
-      {
-        id: "t3",
-        title: "E2E test suite",
-        description: "Cover critical user flows:\n- Login/signup\n- Project CRUD\n- Team management\n- Billing",
-        tags: ["testing"],
-        priority: "high",
-      },
-      { id: "t4", title: "Webhook support", tags: ["backend", "api"] },
-    ],
-  },
-  {
-    id: "progress",
-    title: "In Progress",
-    cards: [
-      {
-        id: "p1",
-        title: "Search feature",
-        description: "Full-text search with filters.",
-        tags: ["frontend", "backend"],
-        priority: "high",
-      },
-      { id: "p2", title: "Fix memory leak", tags: ["bug"], priority: "high" },
-      {
-        id: "p3",
-        title: "CI/CD pipeline",
-        description: "GitHub Actions workflow:\n- Lint + typecheck\n- Unit tests\n- E2E tests\n- Deploy to staging",
-        tags: ["devops"],
-        priority: "medium",
-      },
-    ],
-  },
-  {
-    id: "done",
-    title: "Done",
-    cards: [
-      { id: "d1", title: "Project setup", tags: ["devops"] },
-      {
-        id: "d2",
-        title: "Auth system",
-        description: "Login, signup, password reset,\nOAuth providers.",
-        tags: ["backend", "security"],
-      },
-      { id: "d3", title: "Landing page", tags: ["frontend", "design"] },
-    ],
-  },
-]
-
-// ============================================================================
-// Spatial navigation — find nearest card in direction
-// ============================================================================
-
-interface CardPosition {
-  id: string
-  colIndex: number
-  cardIndex: number
-}
-
-function buildIndex(): Map<string, CardPosition> {
-  const index = new Map<string, CardPosition>()
-  for (let ci = 0; ci < columns.length; ci++) {
-    for (let ri = 0; ri < columns[ci]!.cards.length; ri++) {
-      const card = columns[ci]!.cards[ri]!
-      index.set(card.id, { id: card.id, colIndex: ci, cardIndex: ri })
-    }
-  }
-  return index
-}
-
-function navigate(
-  currentId: string,
-  direction: "up" | "down" | "left" | "right",
-  index: Map<string, CardPosition>,
-): string {
-  const pos = index.get(currentId)
-  if (!pos) return currentId
-
-  switch (direction) {
-    case "up": {
-      if (pos.cardIndex > 0) {
-        return columns[pos.colIndex]!.cards[pos.cardIndex - 1]!.id
-      }
-      return currentId
-    }
-    case "down": {
-      const col = columns[pos.colIndex]!
-      if (pos.cardIndex < col.cards.length - 1) {
-        return col.cards[pos.cardIndex + 1]!.id
-      }
-      return currentId
-    }
-    case "left": {
-      if (pos.colIndex > 0) {
-        const targetCol = columns[pos.colIndex - 1]!
-        const targetIdx = Math.min(pos.cardIndex, targetCol.cards.length - 1)
-        return targetCol.cards[targetIdx]!.id
-      }
-      return currentId
-    }
-    case "right": {
-      if (pos.colIndex < columns.length - 1) {
-        const targetCol = columns[pos.colIndex + 1]!
-        const targetIdx = Math.min(pos.cardIndex, targetCol.cards.length - 1)
-        return targetCol.cards[targetIdx]!.id
-      }
-      return currentId
-    }
-  }
-}
-
-// ============================================================================
-// Tag colors
-// ============================================================================
-
-const tagColors: Record<string, string> = {
-  frontend: "$info",
-  backend: "$accent",
-  design: "$warning",
-  devops: "$success",
-  testing: "$primary",
-  ux: "$muted",
-  security: "$error",
-  bug: "$error",
-  api: "$primary",
-  maintenance: "$muted",
-}
-
-const prioritySymbols: Record<string, { symbol: string; color: string }> = {
-  high: { symbol: "▲", color: "$error" },
-  medium: { symbol: "◆", color: "$warning" },
-  low: { symbol: "▽", color: "$muted" },
-}
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function Tag({ name }: { name: string }) {
-  const color = tagColors[name] ?? "$muted"
-  return (
-    <Text color={color} dim>
-      #{name}
-    </Text>
-  )
-}
-
-function CardView({ card, focused }: { card: CardData; focused: boolean }) {
-  const priority = card.priority ? prioritySymbols[card.priority] : null
-
-  return (
-    <Box testID={card.id} flexDirection="column" borderStyle="round" borderColor={focused ? "$warning" : "$border"}>
-      <Box paddingX={1} gap={1}>
-        {priority && <Text color={priority.color}>{priority.symbol}</Text>}
-        <Text bold={focused} color={focused ? "$warning" : undefined} wrap="truncate">
-          {card.title}
-        </Text>
-      </Box>
-      {card.description && (
-        <Box paddingX={1}>
-          <Text color="$muted" dim wrap="truncate">
-            {card.description}
-          </Text>
-        </Box>
-      )}
-      <Box gap={1} paddingX={1}>
-        {card.tags.map((tag) => (
-          <Tag key={tag} name={tag} />
-        ))}
-      </Box>
-    </Box>
-  )
-}
-
-function ColumnView({ column, focusedCardId }: { column: ColumnData; focusedCardId: string | null }) {
-  const hasFocus = column.cards.some((c) => c.id === focusedCardId)
-
-  return (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
-      flexBasis={0}
-      borderStyle="single"
-      borderColor={hasFocus ? "$warning" : "$border"}
-    >
-      <Box backgroundColor={hasFocus ? "$warning" : undefined} paddingX={1}>
-        <Text bold color={hasFocus ? "$warning-fg" : undefined}>
-          {column.title}
-        </Text>
-        <Text color={hasFocus ? "$warning-fg" : "$muted"}> ({column.cards.length})</Text>
-      </Box>
-      <Box flexDirection="column" paddingX={1} flexGrow={1}>
-        {column.cards.map((card) => (
-          <CardView key={card.id} card={card} focused={card.id === focusedCardId} />
-        ))}
-      </Box>
-    </Box>
-  )
-}
-
-function StatusBar({ focusedId }: { focusedId: string | null }) {
-  let focusedColumn: string | null = null
-  let focusedCard: CardData | null = null
-  for (const col of columns) {
-    const card = col.cards.find((c) => c.id === focusedId)
-    if (card) {
-      focusedColumn = col.title
-      focusedCard = card
-      break
-    }
-  }
-
-  return (
-    <Box paddingX={1} gap={2}>
-      <Text color="$muted" dim>
-        ←↑↓→/hjkl navigate
-      </Text>
-      <Text color="$muted" dim>
-        q quit
-      </Text>
-      {focusedCard && (
-        <>
-          <Text color="$border">│</Text>
-          <Text color="$warning">{focusedColumn}</Text>
-          <Text color="$muted">→</Text>
-          <Text>{focusedCard.title}</Text>
-        </>
-      )}
-    </Box>
-  )
-}
-
-function SpatialFocusBoard() {
-  const [focusedId, setFocusedId] = useState<string>("b1")
-  const index = useMemo(() => buildIndex(), [])
-
-  useInput((input: string, key: Key) => {
-    if (input === "q") return "exit"
-
-    // Use arrow keys OR hjkl — but not both for the same direction.
-    // Arrow keys take priority (key.upArrow etc. are set by the parser).
-    const hasArrow = key.upArrow || key.downArrow || key.leftArrow || key.rightArrow
-    const dir = key.upArrow
-      ? "up"
-      : key.downArrow
-        ? "down"
-        : key.leftArrow
-          ? "left"
-          : key.rightArrow
-            ? "right"
-            : !hasArrow && input === "k"
-              ? "up"
-              : !hasArrow && input === "j"
-                ? "down"
-                : !hasArrow && input === "h"
-                  ? "left"
-                  : !hasArrow && input === "l"
-                    ? "right"
-                    : null
-
-    if (dir) {
-      setFocusedId((id) => navigate(id, dir, index))
-    }
-  })
-
-  return (
-    <Box flexDirection="column" padding={1} height="100%">
-      <Box marginBottom={1} paddingX={1} gap={1}>
-        <Text bold color="$warning">
-          Spatial Focus
-        </Text>
-        <Text color="$muted">— arrow keys / hjkl navigate between cards across columns</Text>
-      </Box>
-
-      <Box flexGrow={1} flexDirection="row" gap={1} overflow="hidden">
-        {columns.map((column) => (
-          <ColumnView key={column.id} column={column} focusedCardId={focusedId} />
-        ))}
-      </Box>
-
-      <StatusBar focusedId={focusedId} />
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-export const meta = {
-  name: "Spatial Focus",
-  description: "Kanban board with spatial navigation — arrow keys / hjkl move between cards across columns",
-  demo: true,
-  features: ["spatial navigation", "kanban layout", "varied card heights", "column focus tracking"],
-}
-
-export async function main() {
-  using handle = await run(<SpatialFocusBoard />, { mode: "fullscreen" })
-  await handle.waitUntilExit()
-}
-
-if (import.meta.main) {
-  await main()
-}

package/apps/task-list.tsx

@@ -1,271 +0,0 @@
-/**
- * Task List Example
- *
- * A scrollable task list demonstrating:
- * - 50+ items for scrolling demonstration
- * - overflow="hidden" with manual scroll state
- * - Toggle task completion with space
- * - Variable height items (some with subtasks)
- */
-
-import React, { useState, useMemo } from "react"
-import { render, Box, Text, Kbd, Muted, useInput, useApp, createTerm, type Key } from "silvery"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Task List",
-  description: "Scrollable list with priority badges, toggles, and expandable subtasks",
-  features: ["ListView", "variable estimateHeight", "Box overflow"],
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface Task {
-  id: number
-  title: string
-  completed: boolean
-  priority: "high" | "medium" | "low"
-  subtasks?: string[]
-}
-
-// ============================================================================
-// Data Generation
-// ============================================================================
-
-function generateTasks(count: number): Task[] {
-  const priorities: Array<"high" | "medium" | "low"> = ["high", "medium", "low"]
-  const taskTemplates = [
-    "Review pull request",
-    "Update documentation",
-    "Fix bug in authentication",
-    "Implement new feature",
-    "Write unit tests",
-    "Refactor legacy code",
-    "Update dependencies",
-    "Create API endpoint",
-    "Design database schema",
-    "Optimize performance",
-    "Add error handling",
-    "Setup CI/CD pipeline",
-    "Write integration tests",
-    "Code review feedback",
-    "Deploy to staging",
-  ]
-
-  const subtaskTemplates = [
-    ["Research solutions", "Implement changes", "Test thoroughly"],
-    ["Check requirements", "Update code"],
-    ["Review with team", "Make adjustments", "Get approval", "Merge"],
-  ]
-
-  return Array.from({ length: count }, (_, i) => ({
-    id: i + 1,
-    title: `${taskTemplates[i % taskTemplates.length]} #${Math.floor(i / taskTemplates.length) + 1}`,
-    completed: Math.random() > 0.7,
-    priority: priorities[i % 3] as "high" | "medium" | "low",
-    // Every 5th task has subtasks
-    subtasks: i % 5 === 0 ? subtaskTemplates[i % subtaskTemplates.length] : undefined,
-  }))
-}
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function PriorityBadge({ priority }: { priority: "high" | "medium" | "low" }) {
-  const colors = {
-    high: "$error",
-    medium: "$warning",
-    low: "$success",
-  }
-  const symbols = {
-    high: "!!!",
-    medium: "!!",
-    low: "!",
-  }
-
-  return (
-    <Text color={colors[priority]} bold>
-      [{symbols[priority]}]
-    </Text>
-  )
-}
-
-function TaskItem({ task, isSelected, isExpanded }: { task: Task; isSelected: boolean; isExpanded: boolean }) {
-  const checkbox = task.completed ? "[x]" : "[ ]"
-  const hasSubtasks = task.subtasks && task.subtasks.length > 0
-
-  return (
-    <Box flexDirection="column">
-      <Box>
-        {isSelected ? (
-          <Text backgroundColor="$primary" color="$primary-fg">
-            {" "}
-            {checkbox} {task.title}{" "}
-          </Text>
-        ) : (
-          <Text strikethrough={task.completed} dim={task.completed}>
-            {checkbox} {task.title}
-          </Text>
-        )}{" "}
-        <PriorityBadge priority={task.priority} />
-        {hasSubtasks && <Text dim> ({task.subtasks!.length} subtasks)</Text>}
-      </Box>
-      {hasSubtasks && isExpanded && (
-        <Box flexDirection="column" marginLeft={4}>
-          {task.subtasks!.map((subtask, idx) => (
-            <Text key={idx} dim>
-              - {subtask}
-            </Text>
-          ))}
-        </Box>
-      )}
-    </Box>
-  )
-}
-
-function StatusBar({
-  tasks,
-  cursor,
-  scrollOffset,
-  visibleCount,
-}: {
-  tasks: Task[]
-  cursor: number
-  scrollOffset: number
-  visibleCount: number
-}) {
-  const completed = tasks.filter((t) => t.completed).length
-  const total = tasks.length
-  const percent = Math.round((completed / total) * 100)
-
-  return (
-    <Box justifyContent="space-between">
-      <Muted>
-        {" "}
-        <Kbd>j/k</Kbd> navigate <Kbd>space</Kbd> toggle <Kbd>enter</Kbd> expand <Kbd>Esc/q</Kbd> quit
-      </Muted>
-      <Muted>
-        {" "}
-        <Text bold>{completed}</Text>/{total} ({percent}%) | {cursor + 1}/{total}{" "}
-      </Muted>
-    </Box>
-  )
-}
-
-export function TaskList() {
-  const { exit } = useApp()
-  const [tasks, setTasks] = useState(() => generateTasks(60))
-  const [cursor, setCursor] = useState(0)
-  const [expandedTasks, setExpandedTasks] = useState<Set<number>>(new Set())
-
-  // Fixed visible count (in a real app, this would use useBoxRect)
-  const visibleCount = 15
-
-  // Calculate scroll offset to keep cursor visible
-  const scrollOffset = useMemo(() => {
-    const halfVisible = Math.floor(visibleCount / 2)
-    const maxOffset = Math.max(0, tasks.length - visibleCount)
-
-    // Keep cursor centered when possible
-    let offset = cursor - halfVisible
-    offset = Math.max(0, Math.min(offset, maxOffset))
-    return offset
-  }, [cursor, visibleCount, tasks.length])
-
-  // Get visible tasks
-  const visibleTasks = useMemo(() => {
-    return tasks.slice(scrollOffset, scrollOffset + visibleCount)
-  }, [tasks, scrollOffset, visibleCount])
-
-  useInput((input: string, key: Key) => {
-    if (input === "q" || key.escape) {
-      exit()
-    }
-    if (key.upArrow || input === "k") {
-      setCursor((prev) => Math.max(0, prev - 1))
-    }
-    if (key.downArrow || input === "j") {
-      setCursor((prev) => Math.min(tasks.length - 1, prev + 1))
-    }
-    if (key.pageUp) {
-      setCursor((prev) => Math.max(0, prev - visibleCount))
-    }
-    if (key.pageDown) {
-      setCursor((prev) => Math.min(tasks.length - 1, prev + visibleCount))
-    }
-    if (key.home) {
-      setCursor(0)
-    }
-    if (key.end) {
-      setCursor(tasks.length - 1)
-    }
-    if (input === " ") {
-      // Toggle completion
-      setTasks((prev) => prev.map((task, idx) => (idx === cursor ? { ...task, completed: !task.completed } : task)))
-    }
-    if (key.return || input === "e") {
-      // Toggle expand/collapse subtasks
-      const taskId = tasks[cursor]?.id
-      if (taskId !== undefined && tasks[cursor]?.subtasks) {
-        setExpandedTasks((prev) => {
-          const next = new Set(prev)
-          if (next.has(taskId)) {
-            next.delete(taskId)
-          } else {
-            next.add(taskId)
-          }
-          return next
-        })
-      }
-    }
-  })
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Box
-        flexGrow={1}
-        flexDirection="column"
-        borderStyle="round"
-        borderColor="$border"
-        overflow="hidden"
-        height={visibleCount + 2}
-      >
-        {visibleTasks.map((task, visibleIndex) => {
-          const actualIndex = scrollOffset + visibleIndex
-          return (
-            <TaskItem
-              key={task.id}
-              task={task}
-              isSelected={actualIndex === cursor}
-              isExpanded={expandedTasks.has(task.id)}
-            />
-          )
-        })}
-      </Box>
-
-      <StatusBar tasks={tasks} cursor={cursor} scrollOffset={scrollOffset} visibleCount={visibleCount} />
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-export async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="j/k navigate  space toggle  enter expand  Esc/q quit">
-      <TaskList />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  await main()
-}