@xp266/dshtui 0.1.0

package/src/ui/message/wave.ts

@@ -0,0 +1,98 @@
+import type { MarkStyle, Segment } from '../../core/segments.ts'
+
+const WAVE_STEPS = 6
+const LIGHTEN_SPAN = 0.6
+
+interface Hsl {
+  h: number
+  s: number
+  l: number
+}
+
+const palettes = new Map<string, string[]>()
+
+export function wavePalette(base: string): string[] {
+  const cached = palettes.get(base)
+  if (cached !== undefined) return cached
+  const parsed = hexToHsl(base)
+  if (parsed === undefined) return [base]
+  const palette: string[] = []
+  for (let step = 0; step < WAVE_STEPS; step++) {
+    const lightness = parsed.l + (1 - parsed.l) * ((step + 1) / WAVE_STEPS) * LIGHTEN_SPAN
+    palette.push(hslToHex({ h: parsed.h, s: parsed.s, l: lightness }))
+  }
+  palettes.set(base, palette)
+  return palette
+}
+
+/**
+ * Comet wave: the lightest of the six palette colors leads at `head`, trailing
+ * progressively darker colors behind it until they blend back into `rest`. The
+ * band travels right one step per phase tick, fully exits past the last
+ * character, shows one all-rest frame, then re-enters from the left.
+ */
+export function waveSegments(text: string, phase: number, palette: string[], rest: string, base: MarkStyle = {}): Segment[] {
+  if (text === '' || palette.length === 0) return []
+  const clusters = [...text]
+  const cycle = clusters.length + WAVE_STEPS
+  const head = ((phase % cycle) + cycle) % cycle
+  const segments: Segment[] = []
+  let runText = ''
+  let runColor: string | undefined
+  const flush = (): void => {
+    if (runText === '' || runColor === undefined) return
+    segments.push({ text: runText, style: { ...base, color: runColor } })
+    runText = ''
+  }
+  for (let index = 0; index < clusters.length; index++) {
+    const offset = head - index
+    const color = offset >= 0 && offset < WAVE_STEPS ? palette[WAVE_STEPS - 1 - offset]! : rest
+    if (runColor !== undefined && color !== runColor) {
+      flush()
+    }
+    runColor = color
+    runText += clusters[index]
+  }
+  flush()
+  return segments
+}
+
+function hexToHsl(hex: string): Hsl | undefined {
+  const match = /^#([\da-f]{6})$/i.exec(hex)
+  if (match === null) return undefined
+  const value = Number.parseInt(match[1]!, 16)
+  const r = ((value >> 16) & 0xff) / 255
+  const g = ((value >> 8) & 0xff) / 255
+  const b = (value & 0xff) / 255
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+  if (max === min) return { h: 0, s: 0, l }
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+  let h: number
+  if (max === r) h = (g - b) / d + (g < b ? 6 : 0)
+  else if (max === g) h = (b - r) / d + 2
+  else h = (r - g) / d + 4
+  return { h: h * 60, s, l }
+}
+
+function hslToHex({ h, s, l }: Hsl): string {
+  const hue = ((h % 360) + 360) % 360
+  const c = (1 - Math.abs(2 * l - 1)) * s
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1))
+  const m = l - c / 2
+  let r = 0
+  let g = 0
+  let b = 0
+  if (hue < 60) [r, g, b] = [c, x, 0]
+  else if (hue < 120) [r, g, b] = [x, c, 0]
+  else if (hue < 180) [r, g, b] = [0, c, x]
+  else if (hue < 240) [r, g, b] = [0, x, c]
+  else if (hue < 300) [r, g, b] = [x, 0, c]
+  else [r, g, b] = [c, 0, x]
+  const toHex = (channel: number): string => Math.round((channel + m) * 255)
+    .toString(16)
+    .padStart(2, '0')
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}

package/src/ui/overlay.ts

@@ -0,0 +1,22 @@
+import { useCallback, useState } from 'react'
+
+export interface OverlayStack<T> {
+  top: T | undefined
+  push(entry: T): void
+  pop(): void
+}
+
+export function useOverlayStack<T>(initial: T[] = []): OverlayStack<T> {
+  const [entries, setEntries] = useState<T[]>(initial)
+  const push = useCallback((entry: T) => {
+    setEntries(current => [...current, entry])
+  }, [])
+  const pop = useCallback(() => {
+    setEntries(current => current.slice(0, -1))
+  }, [])
+  return {
+    top: entries[entries.length - 1],
+    push,
+    pop,
+  }
+}

package/src/ui/panels/approval-panel.tsx

@@ -0,0 +1,193 @@
+import { Box, Text, useInput } from 'ink'
+import { panelAnchorRow } from '../layout-service.ts'
+import { isKeyConsumed } from '../key-arbiter.ts'
+import { useEffect, useState } from 'react'
+import type { Ref } from 'react'
+import { useImperativeHandle } from 'react'
+import { wrapLines } from '../../core/text.ts'
+import { mergeRuns } from '../../core/segments.ts'
+import type { Segment } from '../../core/segments.ts'
+import { COLORS } from '../../theme.ts'
+import { glyphs } from '../../terminal/glyphs.ts'
+import { CHROME_TEXT_X } from '../../core/metrics.ts'
+import { writeCursorShape } from '../../terminal/cursor-shape.ts'
+import { SelectableText } from '../selection.tsx'
+import { PanelSurface, panelLegend } from './surface.tsx'
+import type { PanelPointerHandle, PanelRow } from './surface.tsx'
+
+export type { PanelPointerHandle } from './surface.tsx'
+
+export const APPROVAL_SECTION_ROWS = 3
+const BUTTON_GAP_TEXT = ' '.repeat(8)
+const BUTTON_ALLOW_TEXT = 'Allow once'
+const ALLOW_BLOCK = ` ${BUTTON_ALLOW_TEXT} `
+const REJECT_BLOCK = ' Reject '
+export const APPROVAL_BUTTON_COLS = {
+  allow: CHROME_TEXT_X,
+  reject: CHROME_TEXT_X + ALLOW_BLOCK.length + BUTTON_GAP_TEXT.length,
+}
+
+export interface ApprovalPanelProps {
+  handleRef?: Ref<PanelPointerHandle>
+  reason?: string
+  command?: string
+  background: string
+  active: boolean
+  columns: number
+  rows: number
+  innerWidth: number
+  blockWidth: number
+  onDecide(outcome: 'allowed-once' | 'rejected'): void
+  onResize(height: number): void
+}
+
+function section(text: string | undefined, innerWidth: number): string[] {
+  if (text === undefined || text.trim() === '') return []
+  return wrapLines(text, innerWidth)
+}
+
+function reasonSection(raw: string | undefined, innerWidth: number): Segment[][] {
+  if (raw === undefined || raw.trim() === '') return []
+  const colon = raw.indexOf(':')
+  const rows: Segment[][] = []
+  if (colon === -1) {
+    for (const line of wrapLines(raw, Math.max(4, innerWidth))) {
+      rows.push([{ text: line, style: { color: COLORS.errorText } }])
+    }
+    return rows
+  }
+  rows.push([{ text: raw.slice(0, colon + 1), style: { color: COLORS.errorText } }])
+  const description = raw.slice(colon + 1).trim()
+  if (description !== '') {
+    rows.push([])
+    for (const line of wrapLines(description, Math.max(4, innerWidth))) {
+      rows.push([{ text: line, style: {} }])
+    }
+  }
+  return rows
+}
+
+function commandSection(lines: string[]): Segment[][] {
+  return lines.map(line => [{ text: line, style: { color: COLORS.warning } }])
+}
+
+function clamp(value: number, max: number): number {
+  return Math.max(0, Math.min(max, value))
+}
+
+export function ApprovalPanel({ handleRef, reason, command, background, active, columns, rows, innerWidth, blockWidth, onDecide, onResize }: ApprovalPanelProps) {
+  const [focusAllow, setFocusAllow] = useState(true)
+  const [scroll, setScroll] = useState({ reason: 0, command: 0 })
+  const allReason = reasonSection(reason, innerWidth)
+  const allCommand = section(command, innerWidth)
+  const reasonOverflow = Math.max(0, allReason.length - APPROVAL_SECTION_ROWS)
+  const commandOverflow = Math.max(0, allCommand.length - APPROVAL_SECTION_ROWS)
+  useEffect(() => {
+    setScroll(current => ({
+      reason: Math.min(current.reason, reasonOverflow),
+      command: Math.min(current.command, commandOverflow),
+    }))
+  }, [reasonOverflow, commandOverflow])
+  const visibleReason = allReason.slice(scroll.reason, scroll.reason + APPROVAL_SECTION_ROWS)
+  const visibleCommand = allCommand.slice(scroll.command, scroll.command + APPROVAL_SECTION_ROWS)
+  const showCommand = visibleCommand.some(line => line.trim() !== '')
+  const body: PanelRow[] = []
+  for (const row of visibleReason) body.push({ segments: row })
+  if (visibleReason.length > 0) body.push({ segments: [] })
+  if (showCommand) {
+    for (const row of commandSection(visibleCommand)) body.push({ segments: row })
+    body.push({ segments: [] })
+  }
+  const buttonRowIndex = body.length
+  const legend = panelLegend([
+    { key: glyphs.pageFlip, description: 'select' },
+    { key: 'enter', description: 'submit' },
+  ])
+  body.push({ segments: mergeRuns([{ text: BUTTON_ALLOW_TEXT + BUTTON_GAP_TEXT + 'Reject', style: {} }]) })
+  body.push({ segments: [] })
+  body.push({ segments: legend })
+  const bodyCount = body.length
+  const totalHeight = bodyCount + 2
+  const bodyStart = panelAnchorRow(rows, bodyCount)
+  useEffect(() => {
+    writeCursorShape('hide')
+    return () => {
+      writeCursorShape('show')
+      writeCursorShape('reset')
+    }
+  }, [])
+  useEffect(() => {
+    onResize(totalHeight)
+  }, [totalHeight])
+  useImperativeHandle(handleRef, () => ({
+    clickAt(y, x) {
+      if (!active) return
+      if (y !== bodyStart + buttonRowIndex) return
+      if (x >= APPROVAL_BUTTON_COLS.allow && x < APPROVAL_BUTTON_COLS.allow + ALLOW_BLOCK.length) {
+        onDecide('allowed-once')
+        return
+      }
+      if (x >= APPROVAL_BUTTON_COLS.reject && x < APPROVAL_BUTTON_COLS.reject + REJECT_BLOCK.length) {
+        onDecide('rejected')
+      }
+    },
+    wheel(dir) {
+      if (!active) return false
+      const delta = dir === -1 ? -1 : 1
+      if (reasonOverflow > 0) {
+        setScroll(current => ({ ...current, reason: clamp(current.reason + delta, reasonOverflow) }))
+        return true
+      }
+      if (commandOverflow > 0) {
+        setScroll(current => ({ ...current, command: clamp(current.command + delta, commandOverflow) }))
+        return true
+      }
+      return false
+    },
+  }))
+  useInput((input, key) => {
+    if (!active || isKeyConsumed()) return
+    if (key.leftArrow || key.rightArrow || key.tab) {
+      setFocusAllow(current => !current)
+      return
+    }
+    if (key.upArrow || key.downArrow) {
+      const delta = key.upArrow ? -1 : 1
+      if (reasonOverflow > 0) {
+        setScroll(current => ({ ...current, reason: clamp(current.reason + delta, reasonOverflow) }))
+      } else if (commandOverflow > 0) {
+        setScroll(current => ({ ...current, command: clamp(current.command + delta, commandOverflow) }))
+      }
+      return
+    }
+    if (key.return) {
+      onDecide(focusAllow ? 'allowed-once' : 'rejected')
+      return
+    }
+    if (key.escape) {
+      onDecide('rejected')
+    }
+  })
+  const buttonY = bodyStart + buttonRowIndex
+  return (
+    <PanelSurface
+      columns={columns}
+      rows={rows}
+      body={body.map((row, index) => index === buttonRowIndex
+        ? {
+            segments: row.segments,
+            content: (
+              <Box flexDirection="row">
+                <SelectableText y={buttonY} col={APPROVAL_BUTTON_COLS.allow} text={ALLOW_BLOCK} inverse={focusAllow} />
+                <Text>{BUTTON_GAP_TEXT}</Text>
+                <SelectableText y={buttonY} col={APPROVAL_BUTTON_COLS.reject} text={REJECT_BLOCK} inverse={!focusAllow} />
+              </Box>
+            ),
+          }
+        : row)}
+      bodyStart={bodyStart}
+      background={background}
+      blockWidth={blockWidth}
+    />
+  )
+}

package/src/ui/panels/exports.ts

@@ -0,0 +1,3 @@
+export { PanelSurface, panelLegend } from './surface.tsx'
+export { panelAnchorRow } from '../layout-service.ts'
+export type { PanelRow, PanelHint, PanelLegendOptions, PanelPointerHandle } from './surface.tsx'