@xp266/dshtui 0.1.0

package/src/ui/selection.tsx

@@ -0,0 +1,148 @@
+import { createContext, useContext, memo } from 'react'
+import type { ReactNode } from 'react'
+import { useLayoutEffect, useRef } from 'react'
+import { Text } from 'ink'
+import { colToCharIndex, textWidth } from '../core/text.ts'
+import { selectedRange } from '../model/selection.ts'
+import type { LineSelection } from '../model/selection.ts'
+import { envelopeOverlaps, registerRowPiece } from './selection-registry.ts'
+import { useOrigin } from './region.tsx'
+import type { Segment } from '../core/segments.ts'
+import { COLORS } from '../theme.ts'
+
+export const SelectionContext = createContext<LineSelection | null>(null)
+
+export interface SelectableTextProps {
+  y: number
+  col: number
+  text?: string
+  segments?: Segment[]
+  color?: string
+  bold?: boolean
+  inverse?: boolean
+  backgroundColor?: string
+  messageLayer?: boolean
+  flow?: boolean
+}
+
+interface SelectableContentProps {
+  content: string
+  segments?: Segment[]
+  color?: string
+  bold: boolean
+  inverse: boolean
+  backgroundColor?: string
+  sliceStart: number
+  sliceEnd: number
+}
+
+const SelectableContent = memo(function SelectableContent({ content, segments, color, bold, inverse, backgroundColor, sliceStart, sliceEnd }: SelectableContentProps) {
+  const hasSlice = sliceStart >= 0 && sliceEnd > sliceStart
+  if (hasSlice) {
+    const highlight = (
+      <Text backgroundColor={COLORS.selectionBg} color={COLORS.selectionFg}>
+        {content.slice(sliceStart, sliceEnd)}
+      </Text>
+    )
+    if (segments !== undefined) {
+      return (
+        <Text backgroundColor={backgroundColor}>
+          {renderSegments(segments, 0, sliceStart, color ?? COLORS.ink)}
+          {highlight}
+          {renderSegments(segments, sliceEnd, content.length, color ?? COLORS.ink)}
+        </Text>
+      )
+    }
+    return (
+      <Text backgroundColor={backgroundColor} inverse={inverse} color={color ?? COLORS.ink} bold={bold}>
+        {content.slice(0, sliceStart)}
+        {highlight}
+        {content.slice(sliceEnd)}
+      </Text>
+    )
+  }
+  if (segments !== undefined) {
+    return <Text backgroundColor={backgroundColor}>{renderSegments(segments, 0, content.length, color ?? COLORS.ink)}</Text>
+  }
+  return (
+    <Text backgroundColor={backgroundColor} inverse={inverse} color={color ?? COLORS.ink} bold={bold}>
+      {content}
+    </Text>
+  )
+}, (prev, next) => (
+  prev.content === next.content &&
+  prev.segments === next.segments &&
+  prev.color === next.color &&
+  prev.bold === next.bold &&
+  prev.inverse === next.inverse &&
+  prev.backgroundColor === next.backgroundColor &&
+  prev.sliceStart === next.sliceStart &&
+  prev.sliceEnd === next.sliceEnd
+))
+
+export const SelectableText = function SelectableText({ y, col, text, segments, color, bold = false, inverse = false, backgroundColor, messageLayer = false, flow = false }: SelectableTextProps) {
+  const selection = useContext(SelectionContext)
+  const origin = useOrigin()
+  const absY = origin.y + y
+  const absCol = origin.x + col
+  const content = text ?? (segments?.map(segment => segment.text).join('') ?? '')
+  const pieceId = useRef({})
+  useLayoutEffect(() => {
+    registerRowPiece(pieceId.current, absY, { col: absCol, text: content, ...(messageLayer ? { layer: 'message' as const } : {}) })
+    return () => registerRowPiece(pieceId.current, absY, null)
+  }, [absY, absCol, content, messageLayer])
+  let sliceStart = -1
+  let sliceEnd = -1
+  if (selection !== null) {
+    const range = selectedRange(selection, absY)
+    if (range !== null && (flow || envelopeOverlaps(selection, absCol, textWidth(content)))) {
+      const lineWidth = textWidth(content)
+      const start = Math.max(range.start, absCol)
+      const end = Math.min(range.end, absCol + lineWidth)
+      if (start < end) {
+        sliceStart = colToCharIndex(content, start - absCol)
+        sliceEnd = colToCharIndex(content, end - absCol)
+      }
+    }
+  }
+  return (
+    <SelectableContent
+      content={content}
+      segments={segments}
+      color={color}
+      bold={bold}
+      inverse={inverse}
+      backgroundColor={backgroundColor}
+      sliceStart={sliceStart}
+      sliceEnd={sliceEnd}
+    />
+  )
+}
+
+function renderSegments(segments: Segment[], start: number, end: number, baseColor?: string): ReactNode[] {
+  const out: ReactNode[] = []
+  let offset = 0
+  for (const segment of segments) {
+    const segmentStart = offset
+    const segmentEnd = offset + segment.text.length
+    offset = segmentEnd
+    if (segmentEnd <= start || segmentStart >= end) continue
+    const from = Math.max(0, start - segmentStart)
+    const to = Math.min(segment.text.length, end - segmentStart)
+    if (from >= to) continue
+    out.push(
+      <Text
+        key={out.length}
+        color={segment.style.color ?? baseColor}
+        bold={segment.style.bold}
+        italic={segment.style.italic}
+        underline={segment.style.underline}
+        strikethrough={segment.style.strike}
+        backgroundColor={segment.style.background}
+      >
+        {segment.text.slice(from, to)}
+      </Text>,
+    )
+  }
+  return out
+}

package/src/ui/spinner-tick.tsx

@@ -0,0 +1,24 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+
+export const SpinnerTickContext = createContext(0)
+
+export function useSpinnerTick(): number {
+  return useContext(SpinnerTickContext)
+}
+
+/**
+ * Owns the 10Hz busy animation tick. Keeping the tick in context instead of
+ * App state confines each tick to the components that consume it (spinner
+ * rows, status bar); the rest of the App tree does not re-render.
+ */
+export function SpinnerTickProvider({ busy, children }: { busy: boolean; children: ReactNode }) {
+  const [tick, setTick] = useState(0)
+  useEffect(() => {
+    if (!busy) return
+    setTick(0)
+    const timer = setInterval(() => setTick(tick => tick + 1), 100)
+    return () => clearInterval(timer)
+  }, [busy])
+  return <SpinnerTickContext.Provider value={busy ? tick : 0}>{children}</SpinnerTickContext.Provider>
+}

package/src/ui/use-available-windows.ts

@@ -0,0 +1,31 @@
+import { useSyncExternalStore } from 'react'
+import { hasWindowServices, subscribeWindowServices } from './window-services.ts'
+import { listWindows, subscribeWindows } from './windows.ts'
+import type { WindowContribution } from './windows.ts'
+
+const EMPTY: WindowContribution[] = []
+let cache: WindowContribution[] = EMPTY
+
+function subscribe(next: () => void): () => void {
+  const offWindows = subscribeWindows(() => {
+    cache = listWindows().filter(entry => hasWindowServices(entry.required))
+    next()
+  })
+  const offServices = subscribeWindowServices(() => {
+    cache = listWindows().filter(entry => hasWindowServices(entry.required))
+    next()
+  })
+  cache = listWindows().filter(entry => hasWindowServices(entry.required))
+  return () => {
+    offWindows()
+    offServices()
+  }
+}
+
+function snapshot(): WindowContribution[] {
+  return cache
+}
+
+export function useAvailableWindows(): WindowContribution[] {
+  return useSyncExternalStore(subscribe, snapshot, () => EMPTY)
+}

package/src/ui/widgets/actions.tsx

@@ -0,0 +1,84 @@
+import { Box, Text } from 'ink'
+import { actionPositions } from '../dialog/geometry.ts'
+import { textWidth } from '../../core/text.ts'
+import { SelectableText } from '../selection.tsx'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import type { ClickHit, ClickActions } from './types.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type ActionsItem = Extract<DialogItem, { type: 'actions' }>
+
+function paddedLabel(label: string): string {
+  return ` ${label} `
+}
+
+export function hitActionZone(item: ActionsItem, width: number, localX: number): 'confirm' | 'cancel' | null {
+  const positions = actionPositions(width, paddedLabel(item.confirmLabel), paddedLabel(item.cancelLabel))
+  if (localX >= positions.confirmX && localX < positions.confirmX + textWidth(paddedLabel(item.confirmLabel))) return 'confirm'
+  if (localX >= positions.cancelX && localX < positions.cancelX + textWidth(paddedLabel(item.cancelLabel))) return 'cancel'
+  return null
+}
+
+registerWidget<ActionsItem>('actions', {
+  selectable: true,
+  fullRowFocus: true,
+  stops: () => 2,
+  height() {
+    return 1
+  },
+  paintWidth() {
+    return 0
+  },
+  render({ item, focused, width, y, x, subCol }) {
+    const confirmLabel = paddedLabel(item.confirmLabel)
+    const cancelLabel = paddedLabel(item.cancelLabel)
+    const positions = actionPositions(width, confirmLabel, cancelLabel)
+    const mid = positions.cancelX - (positions.confirmX + textWidth(confirmLabel))
+    return (
+      <Box flexDirection="row">
+        <Text>{' '.repeat(positions.confirmX)}</Text>
+        <SelectableText
+          y={y}
+          col={x + positions.confirmX}
+          text={confirmLabel}
+          inverse={focused && subCol === 0}
+        />
+        <Text>{' '.repeat(Math.max(0, mid))}</Text>
+        <SelectableText
+          y={y}
+          col={x + positions.cancelX}
+          text={cancelLabel}
+          inverse={focused && subCol === 1}
+        />
+      </Box>
+    )
+  },
+  onLeftRight(item, direction, api) {
+    api.navigate(direction === 1 ? 'right' : 'left')
+    return true
+  },
+  onEnter(item, api) {
+    if (api.subCol === 1) item.onCancel()
+    else item.onConfirm()
+    return true
+  },
+  onClick(item, hit: ClickHit, actions: ClickActions) {
+    if (hit.localY !== 0) {
+      actions.focus(0)
+      return true
+    }
+    const zone = hitActionZone(item, hit.width, hit.localX)
+    if (zone === 'confirm') {
+      actions.focus(0)
+      item.onConfirm()
+      return true
+    }
+    if (zone === 'cancel') {
+      actions.focus(1)
+      item.onCancel()
+      return true
+    }
+    actions.focus(0)
+    return true
+  },
+}, { order: BUILTIN_WIDGET_ORDER })

package/src/ui/widgets/button.tsx

@@ -0,0 +1,57 @@
+import { Box } from 'ink'
+import { padToWidth, textWidth, truncate } from '../../core/text.ts'
+import { COLORS } from '../../theme.ts'
+import { SelectableText } from '../selection.tsx'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import type { PaintArgs } from './types.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type ButtonItem = Extract<DialogItem, { type: 'button' }>
+
+function paintButton(item: ButtonItem, paint: PaintArgs<ButtonItem>) {
+  const { width, y, x, focused } = paint
+  if (item.right !== undefined) {
+    const right = truncate(item.right, Math.floor(width / 2))
+    const leftWidth = Math.max(1, width - textWidth(right))
+    const label = padToWidth(truncate(item.label, leftWidth), leftWidth)
+    if (focused) {
+      return (
+        <Box>
+          <SelectableText y={y} col={x} text={label} inverse color={item.rightColor} />
+          <SelectableText y={y} col={x + leftWidth} text={right} inverse color={item.rightColor} />
+        </Box>
+      )
+    }
+    return (
+      <Box width={width} justifyContent="space-between">
+        <SelectableText y={y} col={x} text={item.label} />
+        <SelectableText y={y} col={x + width - textWidth(right)} text={right} color={item.rightColor ?? COLORS.dialogHintText} />
+      </Box>
+    )
+  }
+  if (focused) return <SelectableText y={y} col={x} text={padToWidth(truncate(item.label, width), width)} inverse />
+  return <SelectableText y={y} col={x} text={item.label} />
+}
+
+registerWidget<ButtonItem>('button', {
+  selectable: true,
+  height() {
+    return 1
+  },
+  paintWidth(item) {
+    return textWidth(item.label + (item.right ?? ''))
+  },
+  searchTexts(item, searchRight) {
+    return searchRight && item.right !== undefined ? [item.label, item.right] : [item.label]
+  },
+  render(paint) {
+    return paintButton(paint.item, paint)
+  },
+  onEnter(item) {
+    item.onPress()
+    return true
+  },
+  activate(item) {
+    item.onPress()
+  },
+}, { order: BUILTIN_WIDGET_ORDER })

package/src/ui/widgets/checkbox.tsx

@@ -0,0 +1,58 @@
+import { Box } from 'ink'
+import { COLORS } from '../../theme.ts'
+import { glyphs } from '../../terminal/glyphs.ts'
+import { padToWidth, textWidth, truncate } from '../../core/text.ts'
+import { SelectableText } from '../selection.tsx'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import type { PaintArgs } from './types.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type CheckboxItem = Extract<DialogItem, { type: 'checkbox' }>
+
+function paintCheckbox(item: CheckboxItem, paint: PaintArgs<CheckboxItem>) {
+  const { width, y, x, focused } = paint
+  const label = padToWidth(truncate(item.label, width - 2), width - 2)
+  const check = item.checked ? ` ${glyphs.tick}` : '  '
+  if (focused) {
+    return (
+      <Box>
+        <SelectableText y={y} col={x} text={label} inverse />
+        <SelectableText y={y} col={x + width - 2} text={check} inverse />
+      </Box>
+    )
+  }
+  return (
+    <Box>
+      <SelectableText y={y} col={x} text={label} />
+      {item.checked && (
+          <SelectableText y={y} col={x + width - 2} text={` ${glyphs.tick}`} color={COLORS.success} />
+      )}
+    </Box>
+  )
+}
+
+registerWidget<CheckboxItem>('checkbox', {
+  selectable: true,
+  height() {
+    return 1
+  },
+  paintWidth(item) {
+    return textWidth(item.label)
+  },
+  searchTexts(item) {
+    return [item.label]
+  },
+  render(paint) {
+    return paintCheckbox(paint.item, paint)
+  },
+  onEnter(item) {
+    item.onConfirm()
+    return true
+  },
+  onSpace(item) {
+    item.onToggle()
+  },
+  activate(item) {
+    item.onConfirm()
+  },
+}, { order: BUILTIN_WIDGET_ORDER })

package/src/ui/widgets/header.tsx

@@ -0,0 +1,36 @@
+import { Box, Text } from 'ink'
+import { COLORS } from '../../theme.ts'
+import { textWidth } from '../../core/text.ts'
+import { SelectableText } from '../selection.tsx'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type HeaderItem = Extract<DialogItem, { type: 'header' }>
+
+registerWidget<HeaderItem>('header', {
+  selectable: false,
+  height(item) {
+    return item.leadingBlank === true ? 2 : 1
+  },
+  paintWidth(item) {
+    return textWidth(item.label)
+  },
+  onEnter() {
+    return true
+  },
+  render({ item, y, x, clip }) {
+    const lead = item.leadingBlank === true && clip === 0 ? 1 : 0
+    const label = (
+      <SelectableText y={y + lead} col={x} text={item.label} color={COLORS.sectionHeader} bold />
+    )
+    if (lead === 0) return label
+    return (
+      <Box flexDirection="column">
+        <Box height={1}>
+          <Text> </Text>
+        </Box>
+        {label}
+      </Box>
+    )
+  },
+}, { order: BUILTIN_WIDGET_ORDER })

package/src/ui/widgets/index.ts

@@ -0,0 +1,8 @@
+import './header.tsx'
+import './actions.tsx'
+import './input.tsx'
+import './select.tsx'
+import './button.tsx'
+import './checkbox.tsx'
+import './search.tsx'
+import './static.tsx'

package/src/ui/widgets/input.tsx

@@ -0,0 +1,76 @@
+import { Box, Text } from 'ink'
+import { COLORS } from '../../theme.ts'
+import { locToPoint, textWidth, wrapLines } from '../../core/text.ts'
+import { caretNonceBold, caretNonceColor, caretNonceText } from '../../core/caret-nonce.ts'
+import { SelectableText } from '../selection.tsx'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import { INPUT_MAX_ROWS } from '../dialog/sizes.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type InputItem = Extract<DialogItem, { type: 'input' }>
+
+function scrollStart(lines: number, caretRow: number): number {
+  return Math.min(Math.max(caretRow - (INPUT_MAX_ROWS - 1), 0), Math.max(0, lines - INPUT_MAX_ROWS))
+}
+
+registerWidget<InputItem>('input', {
+  selectable: true,
+  editable: true,
+  height(item, width) {
+    return 2 + Math.min(wrapLines(item.value, width).length, INPUT_MAX_ROWS)
+  },
+  paintWidth(item) {
+    return textWidth(item.label)
+  },
+  caret(item, cursor, width) {
+    const point = locToPoint(item.value, width, cursor)
+    const lines = wrapLines(item.value, width).length
+    return { dy: 1 + point.row - scrollStart(lines, point.row), dx: point.col }
+  },
+  render({ item, focused, cursor, width, y, x, clip }) {
+    const lines = wrapLines(item.value, width)
+    const shown = Math.min(lines.length, INPUT_MAX_ROWS)
+    const point = cursor === undefined ? null : locToPoint(item.value, width, cursor)
+    const first = point === null ? 0 : scrollStart(lines.length, point.row)
+    const parts = []
+    if (clip === 0) {
+      parts.push(
+        <Box key="label" height={1}>
+          <SelectableText y={y} col={x} text={item.label} color={focused ? undefined : COLORS.dialogHintText} />
+        </Box>,
+      )
+    }
+    for (let index = 0; index < shown; index++) {
+      if (1 + index < clip) continue
+      const currentY = y + 1 + index - clip
+      parts.push(
+        <Box key={index} width={width} height={1} backgroundColor={COLORS.dialogInputBackground}>
+          <SelectableText y={currentY} col={x} text={lines[first + index]!} />
+        </Box>,
+      )
+    }
+    parts.push(
+      <Box key="pad" height={1}>
+        <Text
+          color={focused && cursor !== undefined ? caretNonceColor(cursor) : undefined}
+          bold={focused && cursor !== undefined ? caretNonceBold(cursor) : undefined}
+        >
+          {focused && cursor !== undefined ? caretNonceText(cursor) : ' '}
+        </Text>
+      </Box>,
+    )
+    return <Box flexDirection="column">{parts}</Box>
+  },
+  onLeftRight(item, direction, api) {
+    if (direction === -1 && api.cursor > 0) api.setCursor(api.cursor - 1)
+    if (direction === 1 && api.cursor < item.value.length) api.setCursor(api.cursor + 1)
+    return true
+  },
+  onEnter(item) {
+    if (item.onEnter !== undefined) {
+      item.onEnter()
+      return true
+    }
+    return false
+  },
+}, { order: BUILTIN_WIDGET_ORDER })

package/src/ui/widgets/registry.ts

@@ -0,0 +1,32 @@
+import { createElement } from 'react'
+import { Text } from 'ink'
+import { keyedRegistry } from '../../kernel/registry.ts'
+import type { DialogItem } from '../dialog/items.ts'
+import type { WidgetDef } from '../../contract/index.ts'
+
+type AnyWidgetDef = WidgetDef<DialogItem>
+
+const widgets = keyedRegistry<AnyWidgetDef>()
+
+function fallbackWidget(type: string): AnyWidgetDef {
+  return {
+    height: () => 1,
+    paintWidth: () => 24,
+    render: ({ item }: { item: DialogItem }) => {
+      const label = (item as { label?: unknown }).label
+      const text = typeof label === 'string' && label !== '' ? `${type}: ${label}` : `${type}: (unknown item)`
+      return createElement(Text, { dimColor: true }, text)
+    },
+  } as unknown as AnyWidgetDef
+}
+
+export function registerWidget<I extends { type: string }>(type: I['type'], def: WidgetDef<I>, options?: { order?: number }): () => void {
+  return widgets.register(type, def as unknown as AnyWidgetDef, options)
+}
+
+/** Builtin widgets register as high-order fallback layers; plugin widgets override by default. */
+export const BUILTIN_WIDGET_ORDER = 500
+
+export function widgetOf(type: DialogItem['type']): AnyWidgetDef {
+  return widgets.get(type) ?? fallbackWidget(type)
+}

package/src/ui/widgets/search.tsx

@@ -0,0 +1,59 @@
+import { Box, Text } from 'ink'
+import { COLORS } from '../../theme.ts'
+import { caretScrollStart, padToWidth, textWidth, truncate } from '../../core/text.ts'
+import { SelectableText } from '../selection.tsx'
+import { caretNonceBold, caretNonceColor, caretNonceText } from '../../core/caret-nonce.ts'
+import { BUILTIN_WIDGET_ORDER, registerWidget } from './registry.ts'
+import type { DialogItem } from '../dialog/items.ts'
+
+type SearchItem = Extract<DialogItem, { type: 'search' }>
+
+export function searchTextOf(item: SearchItem): string {
+  return item.value === '' ? 'Search' : item.value
+}
+
+registerWidget<SearchItem>('search', {
+  selectable: true,
+  editable: true,
+  height() {
+    return 2
+  },
+  paintWidth(item) {
+    return textWidth(searchTextOf(item))
+  },
+  onLeftRight(item, direction, api) {
+    const next = Math.max(0, Math.min(item.value.length, api.cursor + direction))
+    if (next === api.cursor) return false
+    api.setCursor(next)
+    return true
+  },
+  render({ item, cursor, width, y, x, clip }) {
+    const isEmpty = item.value === ''
+    const start = caretScrollStart(item.value, cursor ?? item.value.length, width)
+    const text = isEmpty ? 'Search' : truncate(item.value.slice(start), width)
+    if (clip !== 0) {
+      return (
+        <Box flexDirection="column">
+          <Box height={1}>
+            <Text> </Text>
+          </Box>
+        </Box>
+      )
+    }
+    return (
+      <Box flexDirection="column">
+      <Box width={width} backgroundColor={COLORS.dialogInputBackground}>
+        <SelectableText y={y} col={x} text={padToWidth(text, width)} color={isEmpty ? COLORS.dialogHintText : undefined} />
+      </Box>
+        <Box height={1}>
+          <Text
+            color={cursor !== undefined ? caretNonceColor(cursor) : undefined}
+            bold={cursor !== undefined ? caretNonceBold(cursor) : undefined}
+          >
+            {cursor !== undefined ? caretNonceText(cursor) : ' '}
+          </Text>
+        </Box>
+      </Box>
+    )
+  },
+}, { order: BUILTIN_WIDGET_ORDER })