@silvery/examples 0.5.2 → 0.5.4

package/{examples/apps → apps}/dev-tools.tsx

@@ -32,7 +32,6 @@ import {
   useInput,
   useApp,
   createTerm,
-  H1,
   Strong,
   Kbd,
   Muted,
@@ -180,8 +179,25 @@ function LogRow({ entry, isSelected }: { entry: LogEntry; isSelected: boolean })
   const badge = LEVEL_BADGES[entry.level]
   const color = LEVEL_COLORS[entry.level]
 
+  // When selected, use $primary-fg for all text to ensure contrast against $primary bg.
+  // When not selected, use level-specific colors for visual distinction.
+  if (isSelected) {
+    return (
+      <Box paddingX={1} backgroundColor="$primary">
+        <Text color="$primary-fg">{formatTime(entry.timestamp)} </Text>
+        <Text color="$primary-fg" bold>
+          {badge}
+        </Text>
+        <Text color="$primary-fg"> [{entry.source.padEnd(9)}] </Text>
+        <Text color="$primary-fg" bold>
+          {entry.message}
+        </Text>
+      </Box>
+    )
+  }
+
   return (
-    <Box paddingX={1} backgroundColor={isSelected ? "$primary" : undefined}>
+    <Box paddingX={1}>
       <Muted>{formatTime(entry.timestamp)} </Muted>
       <Strong color={color}>{badge}</Strong>
       <Muted> [{entry.source.padEnd(9)}] </Muted>
@@ -240,7 +256,6 @@ const rng = seededRandom(12345)
 
 export function DevTools() {
   const { exit } = useApp()
-  const { width } = useBoxRect()
   const [entries, setEntries] = useState<LogEntry[]>(() => generateInitialLogs(INITIAL_COUNT))
   const [cursor, setCursor] = useState(INITIAL_COUNT - 1)
   const [autoScroll, setAutoScroll] = useState(true)
@@ -320,25 +335,34 @@ export function DevTools() {
   )
 
   return (
-    <Box flexDirection="column" flexGrow={1}>
+    <Box flexDirection="column" flexGrow={1} padding={1}>
       {/* Header */}
-      <Box paddingX={1} justifyContent="space-between">
+      <Box justifyContent="space-between" backgroundColor="$surfacebg">
         <Box gap={2}>
-          <H1>Log Viewer</H1>
+          <Text bold color="$primary">
+            {"▸"} Log Viewer
+          </Text>
           <LevelCounts entries={entries} />
         </Box>
         <Box gap={1}>
-          <Strong color="$primary">{cursor + 1}</Strong>
-          <Muted>/ {entries.length}</Muted>
           {autoScroll && (
-            <Text color="$success" bold>
-              {" "}
-              LIVE
+            <Text backgroundColor="$success" color="$success-fg" bold>
+              {" LIVE "}
             </Text>
           )}
+          <Strong color="$primary">{cursor + 1}</Strong>
+          <Muted>/ {entries.length}</Muted>
         </Box>
       </Box>
 
+      {/* Column headers */}
+      <Box paddingX={1}>
+        <Muted>{"Time     "} </Muted>
+        <Muted>{"Lvl"} </Muted>
+        <Muted>{"[Source   ]"} </Muted>
+        <Muted>Message</Muted>
+      </Box>
+
       <Box paddingX={1}>
         <Divider />
       </Box>
@@ -347,14 +371,6 @@ export function DevTools() {
       <Box flexGrow={1} flexDirection="column">
         <LogListArea entries={entries} cursor={cursor} />
       </Box>
-
-      {/* Help bar */}
-      <Box paddingX={1} justifyContent="space-between">
-        <Muted>
-          <Kbd>j/k</Kbd> navigate <Kbd>g/G</Kbd> start/end <Kbd>d/i/w/e</Kbd> add log <Kbd>c</Kbd> clear{" "}
-          <Kbd>Esc/q</Kbd> quit
-        </Muted>
-      </Box>
     </Box>
   )
 }

package/{examples/apps → apps}/inline-bench.tsx

@@ -133,4 +133,6 @@ async function main() {
   }
 }
 
-main().catch(console.error)
+if (import.meta.main) {
+  main().catch(console.error)
+}

package/{examples/apps → apps}/kanban.tsx

@@ -9,7 +9,7 @@
  */
 
 import React, { useState } from "react"
-import { render, Box, Text, Kbd, Muted, useInput, useApp, createTerm, type Key } from "silvery"
+import { render, Box, Text, useInput, useApp, createTerm, type Key } from "silvery"
 import { ExampleBanner, type ExampleMeta } from "../_banner.js"
 
 export const meta: ExampleMeta = {
@@ -102,15 +102,19 @@ function Tag({ name }: { name: string }) {
 
 function CardComponent({ card, isSelected }: { card: Card; isSelected: boolean }) {
   return (
-    <Box flexDirection="column" borderStyle="round" borderColor={isSelected ? "$primary" : "$border"} paddingX={1}>
+    <Box flexDirection="column" borderStyle="round" borderColor={isSelected ? "$primary" : "$border"}>
       {isSelected ? (
-        <Text backgroundColor="$primary" color="black" bold>
-          {card.title}
-        </Text>
+        <Box backgroundColor="$primary" paddingX={1}>
+          <Text color="$primary-fg" bold wrap="truncate">
+            {card.title}
+          </Text>
+        </Box>
       ) : (
-        <Text>{card.title}</Text>
+        <Box paddingX={1}>
+          <Text wrap="truncate">{card.title}</Text>
+        </Box>
       )}
-      <Box gap={1}>
+      <Box gap={1} paddingX={1}>
         {card.tags.map((tag) => (
           <Tag key={tag} name={tag} />
         ))}
@@ -129,12 +133,18 @@ function ColumnComponent({
   selectedCardIndex: number
 }) {
   return (
-    <Box flexDirection="column" flexGrow={1} borderStyle="single" borderColor={isSelected ? "$primary" : "$border"}>
+    <Box
+      flexDirection="column"
+      flexGrow={1}
+      flexBasis={0}
+      borderStyle="single"
+      borderColor={isSelected ? "$primary" : "$border"}
+    >
       <Box backgroundColor={isSelected ? "$primary" : undefined} paddingX={1}>
-        <Text bold color={isSelected ? "black" : "$text"}>
+        <Text bold color={isSelected ? "$primary-fg" : "$text"}>
           {column.title}
         </Text>
-        <Text color={isSelected ? "black" : "$muted"}> ({column.cards.length})</Text>
+        <Text color={isSelected ? "$primary-fg" : "$muted"}> ({column.cards.length})</Text>
       </Box>
 
       <Box
@@ -143,7 +153,6 @@ function ColumnComponent({
         overflow="scroll"
         scrollTo={isSelected ? selectedCardIndex : undefined}
         flexGrow={1}
-        gap={1}
       >
         {column.cards.map((card, cardIndex) => (
           <CardComponent key={card.id} card={card} isSelected={isSelected && cardIndex === selectedCardIndex} />
@@ -159,15 +168,6 @@ function ColumnComponent({
   )
 }
 
-function HelpBar() {
-  return (
-    <Muted>
-      {" "}
-      <Kbd>h/l</Kbd> column <Kbd>j/k</Kbd> card <Kbd>{"</"}</Kbd> move <Kbd>Esc/q</Kbd> quit
-    </Muted>
-  )
-}
-
 export function KanbanBoard() {
   const { exit } = useApp()
   const [columns, setColumns] = useState<Column[]>(initialColumns)
@@ -241,8 +241,6 @@ export function KanbanBoard() {
           />
         ))}
       </Box>
-
-      <HelpBar />
     </Box>
   )
 }

package/{examples/apps → apps}/layout-ref.tsx

@@ -76,8 +76,8 @@ function ImperativeAccessDemo() {
   }
 
   return (
-    <Box ref={boxRef} flexDirection="column" borderStyle="double" borderColor="magenta" padding={1}>
-      <H1 color="magenta">Imperative Access (BoxHandle)</H1>
+    <Box ref={boxRef} flexDirection="column" borderStyle="double" borderColor="$accent" padding={1}>
+      <H1 color="$accent">Imperative Access (BoxHandle)</H1>
       <Muted>Press 'i' to inspect this box</Muted>
       <Box marginTop={1}>
         <Text>{info}</Text>
@@ -116,13 +116,13 @@ export function LayoutRefApp() {
     <Box flexDirection="column" padding={1}>
       {/* Row of resizable panes with onLayout callbacks */}
       <Box flexDirection="row" gap={1} height={8}>
-        <ResizablePane title="Pane A" color="green" onLayoutChange={handleLayoutChange("a")} />
-        <ResizablePane title="Pane B" color="blue" onLayoutChange={handleLayoutChange("b")} />
-        <ResizablePane title="Pane C" color="cyan" onLayoutChange={handleLayoutChange("c")} />
+        <ResizablePane title="Pane A" color="$success" onLayoutChange={handleLayoutChange("a")} />
+        <ResizablePane title="Pane B" color="$info" onLayoutChange={handleLayoutChange("b")} />
+        <ResizablePane title="Pane C" color="$primary" onLayoutChange={handleLayoutChange("c")} />
       </Box>
 
       {/* Show layout info from onLayout callbacks */}
-      <Box marginTop={1} borderStyle="single" borderColor="gray" padding={1}>
+      <Box marginTop={1} borderStyle="single" borderColor="$border" padding={1}>
         <Box flexDirection="column">
           <Text bold dim>
             onLayout Results:

package/{examples/apps → apps}/panes/index.tsx

@@ -9,7 +9,7 @@
 
 import React, { useState, useEffect, useMemo } from "react"
 import { Box, Text, ListView } from "silvery"
-import { SearchProvider, SearchBar, useSearch } from "silvery"
+import { SearchProvider, SearchBar, useSearch } from "@silvery/ag-react"
 import { run, useInput, type Key } from "silvery/runtime"
 import type { ExampleMeta } from "../../_banner.js"
 import { SCRIPT } from "../aichat/script.js"

package/{examples/apps → apps}/paste-demo.tsx

@@ -68,7 +68,7 @@ function PasteEventCard({ event, isLatest }: { event: PasteEvent; isLatest: bool
       marginBottom={0}
     >
       <Box justifyContent="space-between">
-        <H1 color={isLatest ? "$primary" : "white"}>Paste #{event.id}</H1>
+        <H1 color={isLatest ? "$primary" : undefined}>Paste #{event.id}</H1>
         <Small>{event.timestamp}</Small>
       </Box>
       <Box gap={2}>
@@ -80,7 +80,7 @@ function PasteEventCard({ event, isLatest }: { event: PasteEvent; isLatest: bool
         </Small>
       </Box>
       <Box marginTop={1}>
-        <Text color="yellow">{displayText}</Text>
+        <Text color="$warning">{displayText}</Text>
       </Box>
     </Box>
   )

package/{examples/apps → apps}/scroll.tsx

@@ -38,7 +38,7 @@ export function ScrollExample() {
   })
 
   return (
-    <Box flexDirection="column" width={60} height={20}>
+    <Box flexDirection="column" padding={1} width={60} height={20}>
       <Box
         flexGrow={1}
         flexDirection="column"
@@ -50,7 +50,7 @@ export function ScrollExample() {
       >
         {items.map((item, index) => (
           <Box key={item.id} paddingX={1} backgroundColor={index === selectedIndex ? "$primary" : undefined}>
-            <Text color={index === selectedIndex ? "black" : "white"} bold={index === selectedIndex}>
+            <Text color={index === selectedIndex ? "$primary-fg" : undefined} bold={index === selectedIndex}>
               {item.title}
             </Text>
           </Box>

package/{examples/apps → apps}/search-filter.tsx

@@ -162,7 +162,7 @@ function FilteredList({ query, isPending }: { query: string; isPending: boolean
         <Box key={item.id} marginBottom={1}>
           <Text bold>{item.name}</Text>
           <Text dim> [{item.category}]</Text>
-          <Text color="gray"> {item.tags.join(", ")}</Text>
+          <Text color="$muted"> {item.tags.join(", ")}</Text>
         </Box>
       ))}
       {filtered.length === 0 && <Lead>No matches found</Lead>}

package/apps/selection.tsx

@@ -0,0 +1,342 @@
+/**
+ * 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()
+}