@silvery/examples 0.5.6 → 0.17.4

package/apps/text-selection-demo.tsx

@@ -1,189 +0,0 @@
-/**
- * Text Selection Demo
- *
- * Demonstrates silvery's real text selection system using the useSelection hook.
- * Shows userSelect modes (text, none, contain) and live selection state readout.
- *
- * Run: bun vendor/silvery/examples/apps/text-selection-demo.tsx
- */
-
-import React from "react"
-import { Box, Text, H1, H2, Small, Muted, Strong, Kbd, HR } from "silvery"
-import { createApp } from "@silvery/create/create-app"
-import { pipe, withReact, withTerminal, withDomEvents } from "@silvery/create/plugins"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-import { useSelection } from "../../packages/ag-react/src/hooks/useSelection"
-
-export const meta: ExampleMeta = {
-  name: "Text Selection",
-  description: "Real selection via useSelection hook, userSelect modes, live state readout",
-  demo: true,
-  features: ["useSelection()", "userSelect prop", "CapabilityRegistry", "mouse drag selection"],
-}
-
-// ============================================================================
-// Selectable text panel (default — userSelect="text")
-// ============================================================================
-
-function SelectableTextPanel(): React.ReactElement {
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="$border" paddingX={1} flexGrow={1}>
-      <H2>Selectable Text</H2>
-      <Small>userSelect="text" (default)</Small>
-      <Box height={1} />
-      <Text>Drag your mouse over this text to select it.</Text>
-      <Text>Multi-line selections work across paragraphs.</Text>
-      <Box height={1} />
-      <Text color="$muted">The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.</Text>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Non-selectable panel (userSelect="none")
-// ============================================================================
-
-function NonSelectablePanel(): React.ReactElement {
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="$border" paddingX={1} flexGrow={1} userSelect="none">
-      <H2>Non-Selectable</H2>
-      <Small>userSelect="none"</Small>
-      <Box height={1} />
-      <Text>This area cannot be selected by mouse drag.</Text>
-      <Text>Click events still work normally here.</Text>
-      <Box height={1} />
-      <Muted>Hold Alt and drag to override and select anyway.</Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Contained panel (userSelect="contain")
-// ============================================================================
-
-function ContainedPanel(): React.ReactElement {
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="$warning" paddingX={1} flexGrow={1}>
-      <H2 color="$warning">Contained Selection</H2>
-      <Small>userSelect="contain"</Small>
-      <Box height={1} />
-      <Box flexDirection="column" borderStyle="round" borderColor="$primary" paddingX={1} userSelect="contain">
-        <Text bold color="$primary">
-          Selection Boundary
-        </Text>
-        <Box height={1} />
-        <Text>Selection cannot escape this container.</Text>
-        <Text>Try dragging past the border — it clips.</Text>
-        <Box height={1} />
-        <Text color="$success">Useful for modals, side panes, overlays.</Text>
-      </Box>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Live selection state readout via useSelection()
-// ============================================================================
-
-function SelectionStatePanel(): React.ReactElement {
-  const selection = useSelection()
-
-  return (
-    <Box flexDirection="column" borderStyle="round" borderColor="$info" paddingX={1} flexGrow={1}>
-      <H2 color="$info">Selection State</H2>
-      <Small>Live readout from useSelection()</Small>
-      <Box height={1} />
-      {!selection ? (
-        <Text color="$muted">useSelection() returned undefined — feature not installed</Text>
-      ) : selection.range ? (
-        <>
-          <Box gap={1}>
-            <Strong>Status:</Strong>
-            <Text color="$success">{selection.selecting ? "Selecting..." : "Selected"}</Text>
-          </Box>
-          <Box gap={1}>
-            <Strong>Source:</Strong>
-            <Text>{selection.source ?? "unknown"}</Text>
-          </Box>
-          <Box gap={1}>
-            <Strong>Anchor:</Strong>
-            <Text>
-              ({selection.range.anchor.col}, {selection.range.anchor.row})
-            </Text>
-          </Box>
-          <Box gap={1}>
-            <Strong>Head:</Strong>
-            <Text>
-              ({selection.range.head.col}, {selection.range.head.row})
-            </Text>
-          </Box>
-        </>
-      ) : (
-        <Text color="$muted">No active selection — drag to select text</Text>
-      )}
-    </Box>
-  )
-}
-
-// ============================================================================
-// Status bar
-// ============================================================================
-
-function StatusBar(): React.ReactElement {
-  return (
-    <Box flexDirection="row" gap={2} paddingX={1} flexShrink={0} userSelect="none">
-      <Muted>
-        <Kbd>Drag</Kbd> select <Kbd>Alt+Drag</Kbd> force select <Kbd>Ctrl+C</Kbd> quit
-      </Muted>
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main app
-// ============================================================================
-
-function TextSelectionDemo(): React.ReactElement {
-  return (
-    <Box flexDirection="column" padding={1} gap={1} height="100%">
-      <Box>
-        <H1 color="$primary">Text Selection Demo</H1>
-        <Muted> — real selection via useSelection()</Muted>
-      </Box>
-
-      {/* Top row: selectable + non-selectable */}
-      <Box flexDirection="row" gap={1} flexGrow={1}>
-        <SelectableTextPanel />
-        <NonSelectablePanel />
-      </Box>
-
-      {/* Bottom row: contained + live state readout */}
-      <Box flexDirection="row" gap={1} flexGrow={1}>
-        <ContainedPanel />
-        <SelectionStatePanel />
-      </Box>
-
-      <HR />
-      <StatusBar />
-    </Box>
-  )
-}
-
-// ============================================================================
-// Main
-// ============================================================================
-
-if (import.meta.main) {
-  const app = pipe(
-    createApp(() => () => ({})) as any,
-    withReact(
-      <ExampleBanner meta={meta} controls="Drag select  Alt+Drag force select  Ctrl+C quit">
-        <TextSelectionDemo />
-      </ExampleBanner>,
-    ),
-    withTerminal(process as any, { mouse: true }),
-    withDomEvents(),
-  )
-  using handle = await app.run()
-  await handle.waitUntilExit()
-}

package/apps/textarea.tsx

@@ -1,155 +0,0 @@
-/**
- * TextArea Example — Split-Pane Note Editor
- *
- * A note-taking app demonstrating:
- * - Multi-line text input with word wrapping and pre-filled content
- * - Split-pane layout: editor (2/3) + saved notes sidebar (1/3)
- * - Tab focus cycling between panes
- * - Cursor movement (arrow keys, Home/End, Ctrl+A/E)
- * - Kill operations (Ctrl+K, Ctrl+U)
- * - Word/character stats in the header
- * - Submit with Ctrl+Enter to collect notes
- */
-
-import React, { useState } from "react"
-import { render, Box, Text, H1, Strong, Muted, TextArea, useInput, useApp, createTerm, type Key } from "silvery"
-import { ExampleBanner, type ExampleMeta } from "../_banner.js"
-
-export const meta: ExampleMeta = {
-  name: "TextArea",
-  description: "Split-pane note editor with word wrap, kill ring, and note collection",
-  features: ["TextArea", "Split pane layout", "Ctrl+Enter submit", "Tab focus cycling"],
-}
-
-const INITIAL_CONTENT = `# Release Notes — Silvery v0.1
-
-## New Features
-
-- **Flexbox layout engine** — CSS-compatible sizing,
-  wrapping, and gap support via Flexily
-- **38 built-in color palettes** — from Dracula
-  to Solarized, Nord to Catppuccin
-- **Incremental rendering** — only changed cells
-  are repainted, no full-screen flicker
-
-## Breaking Changes
-
-- Dropped Node.js 18 support (now requires >=20)
-- Renamed \`useTerminal()\` to \`useTerm()\`
-
-## Performance
-
-Benchmark results on an M4 MacBook Pro:
-  Initial render:  2.1ms (80x24)
-  Incremental:     0.3ms (typical diff)
-  Layout:          0.8ms (1000 nodes)
-
-Thanks to all contributors!`
-
-export function NoteEditor() {
-  const { exit } = useApp()
-  const [notes, setNotes] = useState<string[]>([])
-  const [value, setValue] = useState(INITIAL_CONTENT)
-  const [focusIndex, setFocusIndex] = useState(0)
-
-  useInput((input: string, key: Key) => {
-    if (key.escape) {
-      exit()
-    }
-    if (key.tab && !key.shift) {
-      setFocusIndex((prev) => (prev + 1) % 2)
-    }
-    if (key.tab && key.shift) {
-      setFocusIndex((prev) => (prev - 1 + 2) % 2)
-    }
-  })
-
-  function handleSubmit(text: string) {
-    if (text.trim()) {
-      setNotes((prev) => [...prev, text.trim()])
-      setValue("")
-    }
-  }
-
-  const lines = value.split("\n").length
-  const chars = value.length
-  const words = value.split(/\s+/).filter(Boolean).length
-
-  return (
-    <Box flexDirection="column" flexGrow={1} padding={1}>
-      <Box flexDirection="row" gap={1} flexGrow={1}>
-        {/* Main editor */}
-        <Box
-          borderStyle="round"
-          borderColor={focusIndex === 0 ? "$primary" : "$border"}
-          flexDirection="column"
-          flexGrow={3}
-          flexBasis={0}
-        >
-          <Box paddingX={1} justifyContent="space-between">
-            <H1>Editor</H1>
-            <Muted>
-              {lines} lines, {words} words, {chars} chars
-            </Muted>
-          </Box>
-          <Text> </Text>
-          <Box paddingX={1} flexGrow={1}>
-            <TextArea
-              value={value}
-              onChange={setValue}
-              onSubmit={handleSubmit}
-              height={16}
-              isActive={focusIndex === 0}
-            />
-          </Box>
-        </Box>
-
-        {/* Saved notes sidebar */}
-        <Box
-          borderStyle="round"
-          borderColor={focusIndex === 1 ? "$primary" : "$border"}
-          flexDirection="column"
-          flexGrow={2}
-          flexBasis={0}
-        >
-          <Box paddingX={1}>
-            <H1>Notes</H1>
-            <Muted> ({notes.length})</Muted>
-          </Box>
-          <Text> </Text>
-          <Box flexDirection="column" paddingX={1} overflow="scroll" flexGrow={1}>
-            {notes.length === 0 ? (
-              <Muted>No notes yet.</Muted>
-            ) : (
-              notes.map((note, i) => (
-                <Box key={i} flexDirection="column" marginBottom={1}>
-                  <Text wrap="truncate">
-                    <Strong color="$success">#{i + 1}</Strong> {note.split("\n")[0]}
-                  </Text>
-                  <Muted>
-                    {note.split("\n").length} lines, {note.length} chars
-                  </Muted>
-                </Box>
-              ))
-            )}
-          </Box>
-        </Box>
-      </Box>
-    </Box>
-  )
-}
-
-async function main() {
-  using term = createTerm()
-  const { waitUntilExit } = await render(
-    <ExampleBanner meta={meta} controls="Tab switch pane  Ctrl+Enter submit  Esc quit">
-      <NoteEditor />
-    </ExampleBanner>,
-    term,
-  )
-  await waitUntilExit()
-}
-
-if (import.meta.main) {
-  main().catch(console.error)
-}