@kitlangton/ghui 0.3.0 → 0.3.3

package/src/ui/primitives.tsx

@@ -1,350 +0,0 @@
-import { TextAttributes, type MouseEvent } from "@opentui/core"
-import type React from "react"
-import { colors } from "./colors.js"
-
-export const fitCell = (text: string, width: number, align: "left" | "right" = "left") => {
-	const trimmed = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
-	return align === "right" ? trimmed.padStart(width, " ") : trimmed.padEnd(width, " ")
-}
-
-export const trimCell = (text: string, width: number) => text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
-
-export const centerCell = (text: string, width: number) => {
-	const trimmed = text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
-	const left = Math.floor((width - trimmed.length) / 2)
-	return `${" ".repeat(Math.max(0, left))}${trimmed}`.padEnd(width, " ")
-}
-
-export const PlainLine = ({ text, fg = colors.text, bold = false }: { text: string; fg?: string; bold?: boolean }) => (
-	<box height={1}>
-		{bold ? (
-			<text wrapMode="none" truncate fg={fg} attributes={TextAttributes.BOLD}>
-				{text}
-			</text>
-		) : (
-			<text wrapMode="none" truncate fg={fg}>
-				{text}
-			</text>
-		)}
-	</box>
-)
-
-export const TextLine = ({ children, fg = colors.text, bg, width }: { children: React.ReactNode; fg?: string; bg?: string | undefined; width?: number }) => (
-	<box height={1} {...(width === undefined ? {} : { width })}>
-		{bg ? (
-			<text wrapMode="none" truncate fg={fg} bg={bg}>
-				{children}
-			</text>
-		) : (
-			<text wrapMode="none" truncate fg={fg}>
-				{children}
-			</text>
-		)}
-	</box>
-)
-
-export const MatchedCell = ({ text, width, query, align = "left", matchIndexes }: { text: string; width: number; query: string; align?: "left" | "right"; matchIndexes?: readonly number[] }) => {
-	const fitted = fitCell(text, width, align)
-	if (matchIndexes && matchIndexes.length > 0) {
-		const highlighted = new Set(matchIndexes.filter((index) => index >= 0 && index < fitted.length))
-		if (highlighted.size > 0) {
-			const segments: Array<{ text: string; highlight: boolean }> = []
-			for (let index = 0; index < fitted.length; index++) {
-				const char = fitted[index]!
-				const highlight = highlighted.has(index)
-				const previous = segments[segments.length - 1]
-				if (previous && previous.highlight === highlight) previous.text += char
-				else segments.push({ text: char, highlight })
-			}
-			return (
-				<>
-					{segments.map((segment, index) => segment.highlight
-						? <span key={index} fg={colors.accent} attributes={TextAttributes.BOLD}>{segment.text}</span>
-						: <span key={index}>{segment.text}</span>)}
-				</>
-			)
-		}
-	}
-	const needle = query.trim().toLowerCase()
-	const index = needle.length > 0 ? fitted.toLowerCase().indexOf(needle) : -1
-	if (index < 0) return <span>{fitted}</span>
-
-	const end = Math.min(fitted.length, index + needle.length)
-	return (
-		<>
-			{index > 0 ? <span>{fitted.slice(0, index)}</span> : null}
-			<span fg={colors.accent} attributes={TextAttributes.BOLD}>{fitted.slice(index, end)}</span>
-			{end < fitted.length ? <span>{fitted.slice(end)}</span> : null}
-		</>
-	)
-}
-
-export const SectionTitle = ({ title }: { title: string }) => (
-	<TextLine>
-		<span fg={colors.accent} attributes={TextAttributes.BOLD}>
-			{title}
-		</span>
-	</TextLine>
-)
-
-export const Filler = ({ rows, prefix }: { rows: number; prefix: string }) =>
-	<>{Array.from({ length: rows }, (_, index) => <box key={`${prefix}-${index}`} height={1} />)}</>
-
-export const PaddedRow = ({ children, backgroundColor }: { children: React.ReactNode; backgroundColor?: string }) => (
-	<box height={1} paddingLeft={1} paddingRight={1} {...(backgroundColor ? { backgroundColor } : {})}>{children}</box>
-)
-
-export const Divider = ({ width, junctionAt, junctionChar }: { width: number; junctionAt?: number; junctionChar?: string }) => {
-	if (junctionAt === undefined || junctionChar === undefined || junctionAt < 0 || junctionAt >= width) {
-		return <PlainLine text={"─".repeat(Math.max(1, width))} fg={colors.separator} />
-	}
-
-	return <PlainLine text={`${"─".repeat(junctionAt)}${junctionChar}${"─".repeat(Math.max(0, width - junctionAt - 1))}`} fg={colors.separator} />
-}
-
-export const SeparatorColumn = ({ height, junctionRows }: { height: number; junctionRows?: readonly number[] }) => {
-	const junctions = new Set(junctionRows)
-	return (
-		<box width={1} height={height} flexDirection="column">
-			{Array.from({ length: height }, (_, index) => (
-				<PlainLine key={index} text={junctions.has(index) ? "├" : "│"} fg={colors.separator} />
-			))}
-		</box>
-	)
-}
-
-export type StandardModalDims = {
-	readonly innerWidth: number
-	readonly contentWidth: number
-	readonly bodyHeight: number
-	readonly rowWidth: number
-}
-
-export const standardModalDims = (modalWidth: number, modalHeight: number): StandardModalDims => {
-	const innerWidth = Math.max(16, modalWidth - 2)
-	const contentWidth = Math.max(14, innerWidth - 2)
-	const bodyHeight = Math.max(1, modalHeight - 7)
-	return { innerWidth, contentWidth, bodyHeight, rowWidth: innerWidth }
-}
-
-export type HintItem = {
-	readonly key: string
-	readonly label: string
-	readonly when?: boolean
-	readonly keyFg?: string
-}
-
-export const HintRow = ({ items }: { items: readonly HintItem[] }) => {
-	const visible = items.filter((item) => item.when !== false)
-	return (
-		<TextLine>
-			{visible.flatMap((item, index) => [
-				<span key={`k${index}`} fg={item.keyFg ?? colors.count}>{item.key}</span>,
-				<span key={`l${index}`} fg={colors.muted}>{` ${item.label}${index < visible.length - 1 ? "  " : ""}`}</span>,
-			])}
-		</TextLine>
-	)
-}
-
-export const StandardModal = ({
-	left,
-	top,
-	width,
-	height,
-	title,
-	titleFg = colors.accent,
-	headerRight,
-	subtitle,
-	footer,
-	bodyPadding = 0,
-	children,
-}: {
-	left: number
-	top: number
-	width: number
-	height: number
-	title: string
-	titleFg?: string
-	headerRight?: { readonly text: string; readonly pending?: boolean }
-	subtitle: React.ReactNode
-	footer: React.ReactNode
-	bodyPadding?: number
-	children: React.ReactNode
-}) => {
-	const { innerWidth, contentWidth, bodyHeight } = standardModalDims(width, height)
-	const rightText = headerRight?.text ?? ""
-	const headerGap = Math.max(1, contentWidth - title.length - rightText.length)
-	return (
-		<ModalFrame left={left} top={top} width={width} height={height} junctionRows={[2, height - 4]}>
-			<PaddedRow>
-				<TextLine>
-					<span fg={titleFg} attributes={TextAttributes.BOLD}>{title}</span>
-					{headerRight ? (
-						<>
-							<span fg={colors.muted}>{" ".repeat(headerGap)}</span>
-							<span fg={headerRight.pending ? colors.status.pending : colors.muted}>{headerRight.text}</span>
-						</>
-					) : null}
-				</TextLine>
-			</PaddedRow>
-			<PaddedRow>{subtitle}</PaddedRow>
-			<Divider width={innerWidth} />
-			<box height={bodyHeight} flexDirection="column" paddingLeft={bodyPadding} paddingRight={bodyPadding}>{children}</box>
-			<Divider width={innerWidth} />
-			<PaddedRow>{footer}</PaddedRow>
-		</ModalFrame>
-	)
-}
-
-export type SearchModalDims = StandardModalDims
-
-export const searchModalDims = (modalWidth: number, modalHeight: number): SearchModalDims => {
-	const innerWidth = Math.max(16, modalWidth - 2)
-	const contentWidth = Math.max(14, innerWidth - 2)
-	const bodyHeight = Math.max(1, modalHeight - 6)
-	return { innerWidth, contentWidth, bodyHeight, rowWidth: innerWidth }
-}
-
-const searchModalTitleText = (title: string, contentWidth: number, countText: string) => {
-	const reserved = 1 + 1 + 1 + 8 + (countText.length > 0 ? countText.length + 2 : 0)
-	return trimCell(title, Math.max(6, Math.min(title.length, contentWidth - reserved)))
-}
-
-export const SearchModalHeader = ({
-	title,
-	query,
-	placeholder,
-	countText = "",
-	contentWidth,
-}: {
-	title: string
-	query: string
-	placeholder: string
-	countText?: string
-	contentWidth: number
-}) => {
-	const titleText = searchModalTitleText(title, contentWidth, countText)
-	const headerGap = 1
-	const headerDivider = "│"
-	const searchGap = 1
-	const searchStart = titleText.length + headerGap + headerDivider.length + searchGap
-	const countGap = countText.length > 0 ? 2 : 0
-	const searchWidth = Math.max(1, contentWidth - searchStart - countGap - countText.length)
-	const queryText = trimCell(query, Math.max(0, searchWidth - 1))
-	const queryPadding = Math.max(0, searchWidth - queryText.length - 1)
-	const caretFg = colors.background === "transparent" ? colors.text : colors.background
-
-	return (
-		<TextLine>
-			<span fg={colors.accent} attributes={TextAttributes.BOLD}>{titleText}</span>
-			<span>{" ".repeat(headerGap)}</span>
-			<span fg={colors.separator}>{headerDivider}</span>
-			<span>{" ".repeat(searchGap)}</span>
-			{query.length > 0 ? (
-				<>
-					<span fg={colors.text}>{queryText}</span>
-					<span bg={colors.muted} fg={caretFg}> </span>
-					{queryPadding > 0 ? <span>{" ".repeat(queryPadding)}</span> : null}
-				</>
-			) : (
-				<>
-					<span bg={colors.muted} fg={caretFg}>{placeholder[0] ?? " "}</span>
-					<span fg={colors.muted}>{fitCell(placeholder.slice(1), Math.max(0, searchWidth - 1))}</span>
-				</>
-			)}
-			{countText.length > 0 && searchWidth > placeholder.length ? (
-				<>
-					<span>{" ".repeat(countGap)}</span>
-					<span fg={colors.muted}>{countText}</span>
-				</>
-			) : null}
-		</TextLine>
-	)
-}
-
-export const SearchModalFrame = ({
-	left,
-	top,
-	width,
-	height,
-	title,
-	query,
-	placeholder,
-	countText = "",
-	footer,
-	bodyPadding = 0,
-	onBodyMouseScroll,
-	children,
-}: {
-	left: number
-	top: number
-	width: number
-	height: number
-	title: string
-	query: string
-	placeholder: string
-	countText?: string
-	footer: React.ReactNode
-	bodyPadding?: number
-	onBodyMouseScroll?: (event: MouseEvent) => void
-	children: React.ReactNode
-}) => {
-	const { innerWidth, contentWidth, bodyHeight } = searchModalDims(width, height)
-	const titleText = searchModalTitleText(title, contentWidth, countText)
-	const dividerColumn = 1 + titleText.length + 1
-	return (
-		<ModalFrame left={left} top={top} width={width} height={height} junctionRows={[1, height - 4]} topJunctionColumns={[dividerColumn]}>
-			<PaddedRow>
-				<SearchModalHeader title={title} query={query} placeholder={placeholder} countText={countText} contentWidth={contentWidth} />
-			</PaddedRow>
-			<Divider width={innerWidth} junctionAt={dividerColumn} junctionChar="┴" />
-			<box height={bodyHeight} flexDirection="column" paddingLeft={bodyPadding} paddingRight={bodyPadding} {...(onBodyMouseScroll ? { onMouseScroll: onBodyMouseScroll } : {})}>{children}</box>
-			<Divider width={innerWidth} />
-			<PaddedRow>{footer}</PaddedRow>
-		</ModalFrame>
-	)
-}
-
-export const ModalFrame = ({
-	children,
-	left,
-	top,
-	width,
-	height,
-	junctionRows = [],
-	topJunctionColumns = [],
-	backgroundColor = colors.modalBackground,
-}: {
-	children: React.ReactNode
-	left: number
-	top: number
-	width: number
-	height: number
-	junctionRows?: readonly number[]
-	topJunctionColumns?: readonly number[]
-	backgroundColor?: string
-}) => {
-	const innerWidth = Math.max(1, width - 2)
-	const innerHeight = Math.max(1, height - 2)
-	const junctions = new Set(junctionRows)
-	const topJunctions = new Set(topJunctionColumns)
-	const topBorder = Array.from({ length: innerWidth }, (_, index) => topJunctions.has(index) ? "┬" : "─").join("")
-
-	return (
-		<box position="absolute" left={left} top={top} width={width} height={height} flexDirection="column" backgroundColor={backgroundColor}>
-			<PlainLine text={`┌${topBorder}┐`} fg={colors.separator} />
-			<box height={innerHeight} flexDirection="row">
-				<box width={1} height={innerHeight} flexDirection="column">
-					{Array.from({ length: innerHeight }, (_, index) => <PlainLine key={index} text={junctions.has(index) ? "├" : "│"} fg={colors.separator} />)}
-				</box>
-				<box width={innerWidth} height={innerHeight} flexDirection="column">
-					{children}
-				</box>
-				<box width={1} height={innerHeight} flexDirection="column">
-					{Array.from({ length: innerHeight }, (_, index) => <PlainLine key={index} text={junctions.has(index) ? "┤" : "│"} fg={colors.separator} />)}
-				</box>
-			</box>
-			<PlainLine text={`└${"─".repeat(innerWidth)}┘`} fg={colors.separator} />
-		</box>
-	)
-}

package/src/ui/pullRequests.ts

@@ -1,106 +0,0 @@
-import type { PullRequestItem, PullRequestLabel, ReviewStatus } from "../domain.js"
-import { colors } from "./colors.js"
-
-export const shortRepoName = (repository: string) => repository.split("/")[1] ?? repository
-
-export const repoColor = (repository: string) => colors.repos[shortRepoName(repository) as keyof typeof colors.repos] ?? colors.repos.default
-
-const REVIEW_LABEL: Partial<Record<ReviewStatus, string>> = {
-	draft: "draft",
-	approved: "approved",
-	changes: "changes",
-	review: "review",
-}
-
-export const reviewLabel = (pullRequest: PullRequestItem) => REVIEW_LABEL[pullRequest.reviewStatus] ?? null
-
-export const checkLabel = (pullRequest: PullRequestItem) => pullRequest.checkSummary
-
-export const statusColor = (status: PullRequestItem["reviewStatus"] | PullRequestItem["checkStatus"]) => colors.status[status]
-
-const REVIEW_ICON: Record<ReviewStatus, string> = {
-	draft: "◌",
-	approved: "✓",
-	changes: "!",
-	review: "◐",
-	none: "·",
-}
-
-export const reviewIcon = (pullRequest: PullRequestItem) => {
-	if (pullRequest.state === "merged") return "✓"
-	if (pullRequest.state === "closed") return "×"
-	if (pullRequest.autoMergeEnabled) return "↻"
-	return REVIEW_ICON[pullRequest.reviewStatus]
-}
-
-export interface PullRequestRowDisplay {
-	readonly indicatorFg: string
-	readonly rowFg: string
-	readonly numberFg: string
-	readonly checkFg: string
-	readonly checkText: string
-}
-
-export const pullRequestRowDisplay = (pullRequest: PullRequestItem, selected: boolean): PullRequestRowDisplay => {
-	const isMerged = pullRequest.state === "merged"
-	const isClosed = pullRequest.state === "closed"
-	const isFinal = isMerged || isClosed
-	const indicatorFg = isMerged ? colors.status.passing
-		: isClosed ? colors.muted
-		: pullRequest.autoMergeEnabled ? colors.accent
-		: statusColor(pullRequest.reviewStatus)
-	const checkFg = isMerged ? colors.status.passing : isClosed ? colors.muted : statusColor(pullRequest.checkStatus)
-	const checkText = isMerged ? "merged" : isClosed ? "closed" : pullRequest.checkSummary?.replace(/^checks\s+/, "") ?? ""
-	return {
-		indicatorFg,
-		rowFg: selected ? colors.selectedText : isFinal ? colors.muted : colors.text,
-		numberFg: selected ? colors.accent : isFinal ? colors.muted : colors.count,
-		checkFg,
-		checkText,
-	}
-}
-
-const fallbackLabelColor = (name: string) => {
-	let hash = 0
-	for (const char of name) {
-		hash = (hash * 31 + char.charCodeAt(0)) >>> 0
-	}
-	const hue = hash % 360
-	return `hsl(${hue} 55% 35%)`
-}
-
-export const labelColor = (label: PullRequestLabel) => label.color ?? fallbackLabelColor(label.name)
-
-export const labelTextColor = (color: string) => {
-	if (color.startsWith("#") && color.length === 7) {
-		const red = Number.parseInt(color.slice(1, 3), 16)
-		const green = Number.parseInt(color.slice(3, 5), 16)
-		const blue = Number.parseInt(color.slice(5, 7), 16)
-		const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255
-		return luminance > 0.6 ? "#111111" : "#f8fafc"
-	}
-	return "#f8fafc"
-}
-
-export const groupBy = <T,>(items: readonly T[], getKey: (item: T) => string, orderedKeys: readonly string[] = []) => {
-	const groups = new Map<string, T[]>()
-	for (const item of items) {
-		const key = getKey(item)
-		const existing = groups.get(key)
-		if (existing) {
-			existing.push(item)
-		} else {
-			groups.set(key, [item])
-		}
-	}
-
-	const order = new Map(orderedKeys.map((key, index) => [key, index]))
-	return [...groups.entries()].sort((left, right) => {
-		const leftIndex = order.get(left[0])
-		const rightIndex = order.get(right[0])
-		if (leftIndex !== undefined && rightIndex !== undefined) return leftIndex - rightIndex
-		if (leftIndex !== undefined) return -1
-		if (rightIndex !== undefined) return 1
-		return left[0].localeCompare(right[0])
-	})
-}

package/src/ui/singleLineInput.ts

@@ -1,26 +0,0 @@
-export interface SingleLineInputKey {
-	readonly name: string
-	readonly sequence: string
-	readonly ctrl?: boolean
-	readonly meta?: boolean
-}
-
-export const deleteLastWord = (value: string) => value.replace(/\s*\S+\s*$/, "")
-
-export const singleLineText = (text: string) => text.replace(/[\r\n]+/g, " ")
-
-export const printableKeyText = (key: Pick<SingleLineInputKey, "ctrl" | "meta" | "sequence">) => {
-	if (key.ctrl || key.meta || key.sequence.length === 0) return null
-	// oxlint-disable-next-line no-control-regex -- intentional: skip control characters
-	return /^[^\u0000-\u001f\u007f]+$/.test(key.sequence) ? key.sequence : null
-}
-
-export const editSingleLineInput = (value: string, key: SingleLineInputKey) => {
-	if (key.ctrl && key.name === "u") return ""
-	if (key.ctrl && key.name === "w") return deleteLastWord(value)
-	if (key.name === "backspace") return value.slice(0, -1)
-	const text = printableKeyText(key)
-	return text ? value + text : null
-}
-
-export const isSingleLineInputKey = (key: SingleLineInputKey) => editSingleLineInput("", key) !== null

package/src/ui/spinner.ts

@@ -1 +0,0 @@
-export const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const;