@silvery/examples 0.5.6 → 0.17.4

package/apps/search-filter.tsx

@@ -1,240 +0,0 @@
-/**
- * Search Filter Example
- *
- * Demonstrates React concurrent features for responsive typing:
- * - useTransition for low-priority state updates
- * - useDeferredValue for deferred filtering
- * - Typing remains responsive even with heavy filtering
- */
-
-import React, { useState, useDeferredValue, useTransition } from "react"
-import { render, Box, Text, Kbd, Muted, Strong, Lead, useInput, useApp, createTerm, type Key } from "silvery"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "Search Filter",
-  description: "useTransition + useDeferredValue for responsive concurrent search",
-  features: ["useDeferredValue", "useTransition", "useInput"],
-}
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface Item {
-  id: number
-  name: string
-  category: string
-  tags: string[]
-}
-
-// ============================================================================
-// Data
-// ============================================================================
-
-const items: Item[] = [
-  {
-    id: 1,
-    name: "React Hooks Guide",
-    category: "docs",
-    tags: ["react", "hooks", "tutorial"],
-  },
-  {
-    id: 2,
-    name: "TypeScript Patterns",
-    category: "docs",
-    tags: ["typescript", "patterns"],
-  },
-  {
-    id: 3,
-    name: "Build Configuration",
-    category: "config",
-    tags: ["webpack", "vite", "build"],
-  },
-  {
-    id: 4,
-    name: "Testing Best Practices",
-    category: "docs",
-    tags: ["testing", "jest", "vitest"],
-  },
-  {
-    id: 5,
-    name: "API Documentation",
-    category: "docs",
-    tags: ["api", "rest", "graphql"],
-  },
-  {
-    id: 6,
-    name: "Database Schema",
-    category: "config",
-    tags: ["database", "sql", "migration"],
-  },
-  {
-    id: 7,
-    name: "Authentication Flow",
-    category: "docs",
-    tags: ["auth", "security", "jwt"],
-  },
-  {
-    id: 8,
-    name: "CI/CD Pipeline",
-    category: "config",
-    tags: ["ci", "deployment", "github"],
-  },
-  {
-    id: 9,
-    name: "Performance Tuning",
-    category: "docs",
-    tags: ["performance", "optimization"],
-  },
-  {
-    id: 10,
-    name: "Error Handling",
-    category: "docs",
-    tags: ["errors", "debugging", "logging"],
-  },
-  {
-    id: 11,
-    name: "State Management",
-    category: "docs",
-    tags: ["state", "redux", "zustand"],
-  },
-  {
-    id: 12,
-    name: "CSS Architecture",
-    category: "docs",
-    tags: ["css", "tailwind", "styled"],
-  },
-  {
-    id: 13,
-    name: "Security Guidelines",
-    category: "docs",
-    tags: ["security", "owasp", "audit"],
-  },
-  {
-    id: 14,
-    name: "Deployment Scripts",
-    category: "config",
-    tags: ["deploy", "docker", "k8s"],
-  },
-  {
-    id: 15,
-    name: "Monitoring Setup",
-    category: "config",
-    tags: ["monitoring", "metrics", "logs"],
-  },
-]
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function SearchInput({ value, onChange }: { value: string; onChange: (v: string) => void }) {
-  return (
-    <Box>
-      <Strong color="$primary">Search: </Strong>
-      <Text>{value}</Text>
-      <Text dim>|</Text>
-    </Box>
-  )
-}
-
-function FilteredList({ query, isPending }: { query: string; isPending: boolean }) {
-  // Simulate expensive filtering (in real app this might be fuzzy search)
-  const filtered = items.filter((item) => {
-    const searchLower = query.toLowerCase()
-    return (
-      item.name.toLowerCase().includes(searchLower) ||
-      item.category.toLowerCase().includes(searchLower) ||
-      item.tags.some((tag) => tag.toLowerCase().includes(searchLower))
-    )
-  })
-
-  return (
-    <Box flexDirection="column" marginTop={1}>
-      <Box marginBottom={1}>
-        <Muted>
-          {filtered.length} results
-          {isPending && " (filtering...)"}
-        </Muted>
-      </Box>
-      {filtered.map((item) => (
-        <Box key={item.id} marginBottom={1}>
-          <Text bold>{item.name}</Text>
-          <Text dim> [{item.category}]</Text>
-          <Text color="$muted"> {item.tags.join(", ")}</Text>
-        </Box>
-      ))}
-      {filtered.length === 0 && <Lead>No matches found</Lead>}
-    </Box>
-  )
-}
-
-export function SearchApp() {
-  const { exit } = useApp()
-  const [query, setQuery] = useState("")
-
-  // useDeferredValue: The filtered list uses a deferred version of the query
-  // This keeps typing responsive while the list catches up
-  const deferredQuery = useDeferredValue(query)
-
-  // useTransition: Mark filtering as low-priority (optional, shows pending state)
-  const [isPending, startTransition] = useTransition()
-
-  useInput((input: string, key: Key) => {
-    if (key.escape) {
-      exit()
-      return
-    }
-
-    if (key.backspace || key.delete) {
-      // Backspace: remove last character
-      startTransition(() => {
-        setQuery((prev) => prev.slice(0, -1))
-      })
-      return
-    }
-
-    // Add printable characters
-    if (input && !key.ctrl && !key.meta) {
-      startTransition(() => {
-        setQuery((prev) => prev + input)
-      })
-    }
-  })
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <SearchInput value={query} onChange={setQuery} />
-
-      {/* List uses deferredQuery so typing stays responsive */}
-      <Box flexGrow={1}>
-        <FilteredList query={deferredQuery} isPending={isPending} />
-      </Box>
-
-      <Muted>
-        {" "}
-        <Kbd>type</Kbd> to search <Kbd>Esc/q</Kbd> quit
-      </Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="type to search  Esc quit">
-      <SearchApp />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}

package/apps/selection.tsx

@@ -1,342 +0,0 @@
-/**
- * Selection Model Demo
- *
- * Demonstrates the silvery selection model from docs/design/selection-model.md:
- * - Node selection (click, j/k)
- * - Multi-select (Cmd+click toggle, Shift+j/k extend)
- * - Text editing (Enter → edit, Escape → node mode)
- * - Mode ladder: text ──Esc──► node ──Esc──► board
- * - Live status bar showing Selection state
- *
- * Run: bun examples/apps/selection.tsx
- */
-
-import React, { useState, useCallback } from "react"
-import { Box, Text, type SilveryMouseEvent } from "silvery"
-import { run, useInput, type Key } from "silvery/runtime"
-
-// ============================================================================
-// Selection Model (pure functions — the whole design doc in ~60 lines)
-// ============================================================================
-
-type ID = string
-
-type TextPoint = { nodeId: ID; offset: number }
-
-type Selection = {
-  nodes: readonly [ID, ...ID[]]
-  text?: readonly [TextPoint] | readonly [TextPoint, TextPoint]
-}
-
-const S = {
-  // Read
-  cursor: (sel: Selection): ID => sel.nodes[0],
-  anchor: (sel: Selection): ID => sel.nodes.at(-1)!,
-  ids: (sel: Selection): ReadonlySet<ID> => new Set(sel.nodes),
-  includes: (sel: Selection, id: ID): boolean => sel.nodes.includes(id),
-  isEditing: (sel: Selection): boolean => !!sel.text,
-  inputMode: (sel: Selection | undefined): "board" | "node" | "text" => (!sel ? "board" : sel.text ? "text" : "node"),
-
-  // Node mutations (clear text)
-  select: (id: ID): Selection => ({ nodes: [id] }),
-
-  toggle(sel: Selection, id: ID): Selection | undefined {
-    if (sel.nodes.includes(id)) {
-      const rest = sel.nodes.filter((n) => n !== id) as unknown as [ID, ...ID[]]
-      return rest.length > 0 ? { nodes: rest } : undefined
-    }
-    return { nodes: [id, ...sel.nodes] }
-  },
-
-  extend(sel: Selection, id: ID, allIds: readonly ID[]): Selection {
-    const anchorIdx = allIds.indexOf(S.anchor(sel))
-    const targetIdx = allIds.indexOf(id)
-    if (anchorIdx < 0 || targetIdx < 0) return sel
-    const lo = Math.min(anchorIdx, targetIdx)
-    const hi = Math.max(anchorIdx, targetIdx)
-    const range = allIds.slice(lo, hi + 1)
-    // cursor first, anchor last
-    const nodes = targetIdx <= anchorIdx ? (range as [ID, ...ID[]]) : ([...range].reverse() as [ID, ...ID[]])
-    return { nodes }
-  },
-
-  areaSelect(_sel: Selection | undefined, hitIds: readonly ID[], mode: "replace" | "xor"): Selection | undefined {
-    if (mode === "replace") {
-      return hitIds.length > 0 ? { nodes: hitIds as [ID, ...ID[]] } : undefined
-    }
-    // XOR: toggle each hit against current
-    let result = _sel
-    for (const id of hitIds) {
-      result = result ? S.toggle(result, id) : S.select(id)
-    }
-    return result
-  },
-
-  clear: (): undefined => undefined,
-
-  collapseToCursor(sel: Selection): Selection {
-    return { nodes: [sel.nodes[0]] }
-  },
-
-  // Text mutations (don't touch nodes)
-  edit(sel: Selection, offset: number): Selection {
-    return { ...sel, text: [{ nodeId: sel.nodes[0], offset }] }
-  },
-
-  stopEditing(sel: Selection): Selection {
-    const { text: _, ...rest } = sel
-    return rest as Selection
-  },
-}
-
-// ============================================================================
-// Demo Data
-// ============================================================================
-
-const ITEMS: { id: ID; label: string }[] = [
-  { id: "inbox", label: "Inbox" },
-  { id: "today", label: "Today" },
-  { id: "next", label: "Next Actions" },
-  { id: "projects", label: "Projects" },
-  { id: "waiting", label: "Waiting For" },
-  { id: "someday", label: "Someday / Maybe" },
-  { id: "reference", label: "Reference" },
-  { id: "calendar", label: "Calendar" },
-  { id: "review", label: "Weekly Review" },
-  { id: "done", label: "Done" },
-]
-const ALL_IDS = ITEMS.map((i) => i.id)
-
-// ============================================================================
-// Components
-// ============================================================================
-
-function ItemRow({
-  item,
-  sel,
-  onSelect,
-}: {
-  item: { id: ID; label: string }
-  sel: Selection | undefined
-  onSelect: (id: ID, meta: boolean, shift: boolean) => void
-}) {
-  const isCursor = sel ? S.cursor(sel) === item.id : false
-  const isAnchor = sel ? S.anchor(sel) === item.id : false
-  const isSelected = sel ? S.includes(sel, item.id) : false
-  const isEditing = isCursor && sel ? S.isEditing(sel) : false
-
-  const marker = isCursor ? "►" : isSelected ? "●" : " "
-  const anchorMark = isAnchor && !isCursor ? " ⚓" : ""
-
-  return (
-    <Box
-      onClick={(e: SilveryMouseEvent) => onSelect(item.id, e.metaKey, e.shiftKey)}
-      onDoubleClick={() => onSelect(item.id, false, false)}
-    >
-      <Text color={isSelected ? "$primary" : "$muted"}>{marker} </Text>
-      {isEditing ? (
-        <Text backgroundColor="$surface" color="$text" bold>
-          {" "}
-          {item.label}
-          <Text color="$primary">│</Text>{" "}
-        </Text>
-      ) : (
-        <Text
-          bold={isCursor}
-          color={isCursor ? "$primary" : isSelected ? "$primary" : "$text"}
-          dim={!isSelected && !isCursor}
-        >
-          {item.label}
-        </Text>
-      )}
-      <Text color="$muted" dim>
-        {anchorMark}
-      </Text>
-    </Box>
-  )
-}
-
-function StatusBar({ sel }: { sel: Selection | undefined }) {
-  const mode = S.inputMode(sel)
-  const modeColor = mode === "text" ? "$success" : mode === "node" ? "$primary" : "$muted"
-
-  return (
-    <Box flexDirection="column" borderStyle="single" borderColor="$border" paddingX={1}>
-      <Box gap={2}>
-        <Text color={modeColor} bold>
-          {mode.toUpperCase()}
-        </Text>
-        {sel && (
-          <>
-            <Text color="$muted">
-              cursor=<Text color="$primary">{S.cursor(sel)}</Text>
-            </Text>
-            <Text color="$muted">
-              anchor=<Text color="$text">{S.anchor(sel)}</Text>
-            </Text>
-            <Text color="$muted">
-              selected=<Text color="$text">{sel.nodes.length}</Text>
-            </Text>
-            {sel.text && (
-              <Text color="$muted">
-                text=<Text color="$success">offset {sel.text[0].offset}</Text>
-              </Text>
-            )}
-          </>
-        )}
-      </Box>
-      <Text color="$muted" dim>
-        j/k nav · Enter edit · Esc back · Shift+j/k extend · Cmd+click toggle · q quit
-      </Text>
-    </Box>
-  )
-}
-
-function SelectionDemo() {
-  const [sel, setSel] = useState<Selection | undefined>(undefined)
-  const [editTexts, setEditTexts] = useState<Record<ID, string>>(() =>
-    Object.fromEntries(ITEMS.map((i) => [i.id, i.label])),
-  )
-
-  const cursorIndex = sel ? ALL_IDS.indexOf(S.cursor(sel)) : -1
-
-  const handleSelect = useCallback((id: ID, meta: boolean, shift: boolean) => {
-    setSel((prev) => {
-      if (meta && prev) return S.toggle(prev, id)
-      if (shift && prev) return S.extend(prev, id, ALL_IDS)
-      return S.select(id)
-    })
-  }, [])
-
-  useInput((input: string, key: Key) => {
-    if (input === "q" || (key.escape && !sel)) return "exit"
-
-    const mode = S.inputMode(sel)
-
-    // Text mode: handle typing
-    if (mode === "text" && sel) {
-      if (key.escape) {
-        setSel(S.stopEditing(sel))
-        return
-      }
-      if (key.backspace && sel.text) {
-        const nodeId = S.cursor(sel)
-        const offset = sel.text[0].offset
-        if (offset > 0) {
-          setEditTexts((prev) => ({
-            ...prev,
-            [nodeId]: prev[nodeId]!.slice(0, offset - 1) + prev[nodeId]!.slice(offset),
-          }))
-          setSel(S.edit(sel, offset - 1))
-        }
-        return
-      }
-      if (key.leftArrow && sel.text) {
-        setSel(S.edit(sel, Math.max(0, sel.text[0].offset - 1)))
-        return
-      }
-      if (key.rightArrow && sel.text) {
-        const maxLen = editTexts[S.cursor(sel)]?.length ?? 0
-        setSel(S.edit(sel, Math.min(maxLen, sel.text[0].offset + 1)))
-        return
-      }
-      // Printable character
-      if (input && !key.ctrl && !key.meta && sel.text) {
-        const nodeId = S.cursor(sel)
-        const offset = sel.text[0].offset
-        setEditTexts((prev) => ({
-          ...prev,
-          [nodeId]: prev[nodeId]!.slice(0, offset) + input + prev[nodeId]!.slice(offset),
-        }))
-        setSel(S.edit(sel, offset + input.length))
-        return
-      }
-      return
-    }
-
-    // Node mode
-    if (mode === "node" && sel) {
-      if (key.escape) {
-        // Mode ladder: multi → single → board
-        if (sel.nodes.length > 1) {
-          setSel(S.collapseToCursor(sel))
-        } else {
-          setSel(S.clear())
-        }
-        return
-      }
-      if (key.return) {
-        const text = editTexts[S.cursor(sel)] ?? ""
-        setSel(S.edit(sel, text.length))
-        return
-      }
-      if (input === "j" || key.downArrow) {
-        const next = Math.min(ALL_IDS.length - 1, cursorIndex + 1)
-        if (key.shift) {
-          setSel(S.extend(sel, ALL_IDS[next]!, ALL_IDS))
-        } else {
-          setSel(S.select(ALL_IDS[next]!))
-        }
-        return
-      }
-      if (input === "k" || key.upArrow) {
-        const next = Math.max(0, cursorIndex - 1)
-        if (key.shift) {
-          setSel(S.extend(sel, ALL_IDS[next]!, ALL_IDS))
-        } else {
-          setSel(S.select(ALL_IDS[next]!))
-        }
-        return
-      }
-      return
-    }
-
-    // Board mode — any nav enters node mode
-    if (input === "j" || key.downArrow) setSel(S.select(ALL_IDS[0]!))
-    if (input === "k" || key.upArrow) setSel(S.select(ALL_IDS.at(-1)!))
-  })
-
-  // Sync edit texts back to items for display
-  const displayItems = ITEMS.map((item) => ({ ...item, label: editTexts[item.id] ?? item.label }))
-
-  return (
-    <Box flexDirection="column" padding={1} height="100%">
-      <Box marginBottom={1}>
-        <Text bold color="$primary">
-          Selection Model Demo
-        </Text>
-        <Text color="$muted"> — silvery reactive selection</Text>
-      </Box>
-
-      <Box flexDirection="column" flexGrow={1} borderStyle="round" borderColor="$border" overflow="hidden">
-        {displayItems.map((item) => (
-          <ItemRow key={item.id} item={item} sel={sel} onSelect={handleSelect} />
-        ))}
-      </Box>
-
-      <StatusBar sel={sel} />
-
-      <Box marginTop={1} flexDirection="column">
-        <Text color="$muted" dim>
-          nodes=[{sel?.nodes.join(", ") ?? ""}]
-        </Text>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-export const meta = {
-  name: "Selection",
-  description: "Reactive selection model — node/text modes, multi-select, mode ladder",
-  demo: true,
-  features: ["Selection model", "mode ladder", "multi-select", "text editing"],
-}
-
-if (import.meta.main) {
-  using handle = await run(<SelectionDemo />, { mode: "fullscreen" })
-  await handle.waitUntilExit()
-}