@carlesandres/house 0.4.13 → 0.5.0

package/src/CommandPalette.tsx

@@ -1,214 +0,0 @@
-/**
- * CommandPalette — modal overlay for searching and running commands.
- *
- * Render-only: state lives in Browser.tsx alongside filterOpen
- * (#70 design log §state location). Key handling sits in Browser.tsx's
- * `useKeyboard` palette-branch, mirroring the filterOpen pattern.
- *
- * Commands are grouped by semantic category while preserving command order
- * inside each group. Browser.tsx owns the query and selected command index;
- * this component turns those commands into render rows and keeps the selected
- * row visible when the list is taller than the modal body.
- */
-
-import { RGBA } from "@opentui/core"
-import { colors } from "./theme/colors.ts"
-import { PromptRow } from "./PromptRow.tsx"
-import type { AppCommand } from "./commands/types.ts"
-
-// Semi-transparent black scrim painted across the viewport behind the modal.
-// Opentui composites it over the chrome underneath, so the rest of the UI
-// reads as darkened while the modal stays fully opaque. Mirrors opencode's
-// dialog backdrop (cli/cmd/tui/ui/dialog.tsx).
-const SCRIM = RGBA.fromInts(0, 0, 0, 150)
-
-export interface CommandPaletteProps {
-	readonly commands: readonly AppCommand[]
-	readonly query: string
-	readonly selectedIndex: number
-	readonly viewportWidth: number
-	readonly viewportHeight: number
-}
-
-const FOOTER_HINT = "↑↓ select  enter run  esc close"
-const CATEGORY_ORDER = ["Navigation", "View", "File", "Appearance", "App"] as const
-
-type PaletteRow =
-	| { readonly kind: "spacer"; readonly key: string }
-	| { readonly kind: "header"; readonly key: string; readonly text: string }
-	| {
-			readonly kind: "command"
-			readonly key: string
-			readonly command: AppCommand
-			readonly commandIndex: number
-	  }
-
-export const orderCommandsForPalette = (commands: readonly AppCommand[]): readonly AppCommand[] => {
-	const grouped = new Map<string, AppCommand[]>()
-	for (const command of commands) {
-		const category = command.category ?? "Other"
-		const list = grouped.get(category)
-		if (list) list.push(command)
-		else grouped.set(category, [command])
-	}
-
-	const orderedCategories = [
-		...CATEGORY_ORDER.filter((category) => grouped.has(category)),
-		...Array.from(grouped.keys()).filter((category) => !CATEGORY_ORDER.includes(category as never)),
-	]
-
-	return orderedCategories.flatMap((category) => grouped.get(category) ?? [])
-}
-
-const buildRows = (commands: readonly AppCommand[]): readonly PaletteRow[] => {
-	const orderedCommands = orderCommandsForPalette(commands)
-	const rows: PaletteRow[] = []
-	let previousCategory: string | null = null
-	let commandIndex = 0
-	for (const command of orderedCommands) {
-		const category = command.category ?? "Other"
-		if (category !== previousCategory) {
-			if (previousCategory !== null) rows.push({ kind: "spacer", key: `spacer-${category}` })
-			rows.push({ kind: "header", key: `header-${category}`, text: category })
-			previousCategory = category
-		}
-		rows.push({ kind: "command", key: command.id, command, commandIndex })
-		commandIndex += 1
-	}
-	return rows
-}
-
-export const CommandPalette = ({
-	commands,
-	query,
-	selectedIndex,
-	viewportWidth,
-	viewportHeight,
-}: CommandPaletteProps) => {
-	const overlayWidth = Math.min(viewportWidth - 4, 64)
-	const rows = buildRows(commands)
-	// Reserve: 2 for border (top+bottom), 1 query row, 1 spacer below query,
-	// 1 spacer above footer, 1 footer row. Body gets the rest. Keep a one-row
-	// viewport margin above and below when possible; the modal itself already
-	// owns a border and clips its body, so a larger fixed margin needlessly hides
-	// the final command on medium-height terminals.
-	const chrome = 2 + 1 + 1 + 1 + 1
-	const maxBody = Math.max(1, viewportHeight - 2 - chrome)
-	const desiredBody = Math.max(1, rows.length || 1)
-	const bodyHeight = Math.min(desiredBody, maxBody)
-	const overlayHeight = chrome + bodyHeight
-	const left = Math.max(0, Math.floor((viewportWidth - overlayWidth) / 2))
-	const top = Math.max(0, Math.floor((viewportHeight - overlayHeight) / 2))
-
-	// Inner content width: overlay minus 1-cell border + 1-cell padding on each side.
-	const rowWidth = Math.max(4, overlayWidth - 4)
-
-	// Window the visible slice around the selected command row. Headers and
-	// spacers are render-only rows, so selection still tracks command indexes.
-	const scrollTop = (() => {
-		if (rows.length <= bodyHeight) return 0
-		const maxScroll = rows.length - bodyHeight
-		let s = 0
-		const selectedRowIndex = rows.findIndex(
-			(row) => row.kind === "command" && row.commandIndex === selectedIndex,
-		)
-		if (selectedRowIndex >= bodyHeight) s = selectedRowIndex - bodyHeight + 1
-		return Math.max(0, Math.min(s, maxScroll))
-	})()
-	const visible = rows.slice(scrollTop, scrollTop + bodyHeight)
-
-	// Shortcut column width — long enough for `shift+t`-style chords but
-	// trimmed to prevent the title from being squeezed below ~16 cells.
-	const SHORTCUT_WIDTH = 10
-	const titleWidth = Math.max(8, rowWidth - 2 /* selector */ - SHORTCUT_WIDTH - 1 /* gap */)
-
-	const fit = (s: string, width: number): string =>
-		s.length === width
-			? s
-			: s.length > width
-				? s.slice(0, Math.max(0, width - 1)) + "…"
-				: s + " ".repeat(width - s.length)
-
-	const fitRight = (s: string, width: number): string =>
-		s.length >= width ? s.slice(0, width) : " ".repeat(width - s.length) + s
-
-	return (
-		<box
-			position="absolute"
-			left={0}
-			top={0}
-			width={viewportWidth}
-			height={viewportHeight}
-			zIndex={20}
-			style={{ backgroundColor: SCRIM }}
-		>
-			<box
-				position="absolute"
-				left={left}
-				top={top}
-				width={overlayWidth}
-				height={overlayHeight}
-				title=" Commands "
-				titleAlignment="left"
-				paddingLeft={1}
-				paddingRight={1}
-				style={{
-					border: true,
-					borderColor: colors.textMuted,
-					flexDirection: "column",
-					backgroundColor: colors.backgroundPanel,
-				}}
-			>
-				<PromptRow query={query} editing={true} width={rowWidth} />
-				<text content=" " />
-				{commands.length === 0 ? (
-					<text wrapMode="none" content="  (no matches)" style={{ fg: colors.textMuted }} />
-				) : (
-					visible.map((row) => {
-						if (row.kind === "spacer") {
-							return <text key={row.key} content=" " />
-						}
-						if (row.kind === "header") {
-							return (
-								<text
-									key={row.key}
-									wrapMode="none"
-									content={fit(row.text, rowWidth)}
-									style={{ fg: colors.textMuted, attributes: 1 }}
-								/>
-							)
-						}
-						const cmd = row.command
-						const isSelected = row.commandIndex === selectedIndex
-						const selector = isSelected ? "▸ " : "  "
-						const titleText = fit(cmd.title, titleWidth)
-						const shortcutText = cmd.shortcut
-							? fitRight(cmd.shortcut, SHORTCUT_WIDTH)
-							: " ".repeat(SHORTCUT_WIDTH)
-						// Title and shortcut render as separate spans so the shortcut
-						// can use `textMuted` while the title uses `text`/`primary`.
-						// Same trick opencode pulls with `--text-weak` — the theme
-						// guarantees the contrast, we just pick the right role.
-						const titleFg = isSelected ? colors.primary : colors.text
-						return (
-							<text
-								key={cmd.id}
-								wrapMode="none"
-								style={isSelected ? { bg: colors.backgroundElement } : {}}
-							>
-								<span style={{ fg: titleFg }}>{`${selector}${titleText} `}</span>
-								<span style={{ fg: colors.textMuted }}>{shortcutText}</span>
-							</text>
-						)
-					})
-				)}
-				<text content=" " />
-				<text
-					wrapMode="none"
-					content={fit(FOOTER_HINT, rowWidth)}
-					style={{ fg: colors.textMuted }}
-				/>
-			</box>
-		</box>
-	)
-}

package/src/Footer.tsx

@@ -1,258 +0,0 @@
-/**
- * Footer — single-row chrome under the two-pane area.
- *
- * Renders either a notice line (when one is active) or a compact hint row
- * derived from the keymap. Hints are filtered by each binding's `when`
- * against the current context, so the row reflects what the user can
- * actually do right now. Overflow is handled by truncating from the right
- * (later-in-array bindings drop off first).
- *
- * Empty vault: the footer renders normally even when no markdown files
- * were discovered. Intentional — `q:quit` and `?:help` are exactly what an
- * empty-vault user needs as an exit and discoverability anchor.
- *
- * The filter input does not live here — it renders as a row inside the
- * sidebar (see Browser.tsx). The pattern mirrors ghui's PR list, where the
- * filter is part of the list it filters.
- *
- * Width math uses terminal-style string width instead of raw string length so
- * ambiguous glyphs such as `↵` don't steal spacing from the label beside them.
- */
-
-import stringWidth from "string-width"
-import type React from "react"
-import type { KeyBinding } from "./keymap/keymap.ts"
-import { displayKey } from "./keymap/displayKey.ts"
-import { Spinner } from "./Spinner.tsx"
-import { StatusIndicator, type StatusIndicatorProps } from "./StatusIndicator.tsx"
-import { colors } from "./theme/colors.ts"
-
-/** Rows the Footer occupies. Importers use it for layout math so a future
- *  taller footer doesn't require touching two files. */
-export const FOOTER_HEIGHT = 1
-
-export interface FooterProps<C> {
-	readonly bindings: readonly KeyBinding<C>[]
-	readonly ctx: C
-	readonly width: number
-	readonly notice?: string | null
-	/** Persistent status line (e.g. "indexing… 42"). Distinct from `notice`:
-	 *  no TTL, cleared by the caller when the underlying activity finishes.
-	 *  Loses to `notice` when both are set so transient toasts still surface. */
-	readonly discoveryStatus?: string | null
-	/** Persistent compact state/status indicators, rendered after built-in warning indicators. */
-	readonly indicators?: readonly (StatusIndicatorProps & { readonly id: string })[]
-	/** Test seam: override spinner tick speed so tests don't sleep on the full
-	 *  production interval. Ignored when discoveryStatus is null. */
-	readonly discoverySpinnerIntervalMs?: number
-	readonly discoverySpinnerInitialFrameIndex?: number
-	/** Test seam: deterministic footer spinner driver. */
-	readonly discoverySpinnerRegisterTick?: ((tick: () => void) => void) | null
-	/** Optional toggle callback for the discovery-warning popover. */
-	readonly onDiscoveryWarningToggle?: () => void
-}
-
-const normalizeStatusLine = (status: string): string => status.replace(/\s+/g, " ").trim()
-
-const HINT_SEPARATOR = "  "
-
-interface Hint {
-	readonly key: string
-	readonly label: string
-}
-
-const hintWidth = (h: Hint): number => stringWidth(h.key) + 1 + stringWidth(h.label) // key + " " + label
-
-const formatHint = <C,>(b: KeyBinding<C>): Hint | null => {
-	if (!b.hint) return null
-	const first = b.keys[0]
-	if (!first) return null
-	return { key: displayKey(first), label: b.hint }
-}
-
-/** Drop hints from the end until they fit within `width`. If not even the
- *  first hint fits, fall back to the bare key truncated to width, so the row
- *  is never silently blank on tight viewports. */
-const fitHints = (hints: readonly Hint[], width: number): Hint[] => {
-	if (width <= 0 || hints.length === 0) return []
-	const acc: Hint[] = []
-	let used = 0
-	for (const h of hints) {
-		const add = acc.length === 0 ? hintWidth(h) : HINT_SEPARATOR.length + hintWidth(h)
-		if (used + add > width) break
-		acc.push(h)
-		used += add
-	}
-	if (acc.length > 0) return acc
-	const first = hints[0]!
-	return [{ key: first.key.slice(0, width), label: "" }]
-}
-
-const STATUS_SEPARATOR = " · "
-const NON_WARNING_STATUS_PREFIX_WIDTH = 2 // 1-cell spinner + 1-cell spacer
-
-const isPartialDiscoveryWarning = (status: string | null): boolean =>
-	status?.startsWith("scan incomplete:") ?? false
-
-export const Footer = <C,>({
-	bindings,
-	ctx,
-	width,
-	notice,
-	discoveryStatus,
-	indicators = [],
-	discoverySpinnerIntervalMs,
-	discoverySpinnerInitialFrameIndex,
-	discoverySpinnerRegisterTick,
-	onDiscoveryWarningToggle,
-}: FooterProps<C>) => {
-	const usableWidth = Math.max(0, width - 2) // 1-cell horizontal padding each side
-
-	const rowStyle = {
-		width,
-		height: FOOTER_HEIGHT,
-		flexShrink: 0,
-		flexDirection: "row",
-		paddingLeft: 1,
-		paddingRight: 1,
-		backgroundColor: colors.backgroundPanel,
-	} as const
-
-	const hints: Hint[] = []
-	for (const b of bindings) {
-		// Hint visibility prefers `hintWhen` (binding-specific) over `when`
-		// (dispatch gate). Falling back to `when` keeps the original
-		// "hint shows when binding is enabled" behavior for the common case.
-		const visibleGate = b.hintWhen ?? b.when
-		if (visibleGate && !visibleGate(ctx)) continue
-		const h = formatHint(b)
-		if (h !== null) hints.push(h)
-	}
-
-	// Discovery status sits left of the hints, separated by " · ". On tight
-	// viewports it claims its budget first; hints fit into the remainder so
-	// the indicator stays visible while less-essential hints drop off.
-	const status =
-		discoveryStatus && discoveryStatus.length > 0 ? normalizeStatusLine(discoveryStatus) : null
-	const isPartialWarning = isPartialDiscoveryWarning(status)
-	const renderedIndicators = [
-		...(isPartialWarning
-			? [
-					{
-						id: "discovery-warning",
-						icon: "!",
-						variant: "warning" as const,
-						active: true,
-						...(onDiscoveryWarningToggle === undefined
-							? {}
-							: { onMouseUp: onDiscoveryWarningToggle }),
-					},
-				]
-			: []),
-		...indicators,
-	]
-	const indicatorBudget = Math.min(usableWidth, renderedIndicators.length * 3)
-	const contentBudget = Math.max(0, usableWidth - indicatorBudget)
-	const statusChromeWidth = status
-		? (isPartialWarning ? 0 : NON_WARNING_STATUS_PREFIX_WIDTH) + STATUS_SEPARATOR.length
-		: 0
-	const statusBudget = status
-		? Math.min((isPartialWarning ? 0 : status.length) + statusChromeWidth, contentBudget)
-		: 0
-	const hintsWidth = Math.max(0, contentBudget - statusBudget)
-	const visibleHints = fitHints(hints, hintsWidth)
-	const nonWarningStatusPrefixBudget =
-		status && !isPartialWarning ? Math.min(NON_WARNING_STATUS_PREFIX_WIDTH, statusBudget) : 0
-	const statusContent = status ? status.slice(0, Math.max(0, statusBudget - statusChromeWidth)) : ""
-	const statusSeparatorContent = status
-		? STATUS_SEPARATOR.slice(
-				0,
-				Math.max(0, statusBudget - nonWarningStatusPrefixBudget - statusContent.length),
-			)
-		: ""
-	const noticeContent = notice
-		? notice.length > contentBudget
-			? notice.slice(0, contentBudget)
-			: notice
-		: null
-	const renderIndicators = () =>
-		renderedIndicators.map(({ id, ...props }) => <StatusIndicator key={id} {...props} />)
-
-	// Two-tone hint row: keys render in `text` (foreground-strength), the
-	// `:label` portion in `textMuted`. Matches ghui's footer treatment so
-	// the key — the actionable token — visually leads each hint.
-	const renderHints = () =>
-		visibleHints.flatMap((h, i) => {
-			const sep =
-				i > 0
-					? [
-							<text
-								key={`s${i}`}
-								content={HINT_SEPARATOR}
-								wrapMode="none"
-								style={{ fg: colors.textMuted }}
-							/>,
-						]
-					: []
-			return [
-				...sep,
-				<text key={`k${i}`} content={h.key} wrapMode="none" style={{ fg: colors.text }} />,
-				<text
-					key={`l${i}`}
-					content={` ${h.label}`}
-					wrapMode="none"
-					style={{ fg: colors.textMuted }}
-				/>,
-			]
-		})
-
-	// Priority: notice > (status + hints). Discovery status uses the secondary
-	// token: active metadata, but not a warning/error event.
-	if (noticeContent !== null) {
-		return (
-			<box style={rowStyle}>
-				{renderIndicators()}
-				<text content={noticeContent} wrapMode="none" style={{ fg: colors.primary }} />
-			</box>
-		)
-	}
-
-	if (status !== null) {
-		const spinnerProps = {
-			fg: colors.secondary,
-			...(discoverySpinnerIntervalMs === undefined
-				? {}
-				: { intervalMs: discoverySpinnerIntervalMs }),
-			...(discoverySpinnerInitialFrameIndex === undefined
-				? {}
-				: { initialFrameIndex: discoverySpinnerInitialFrameIndex }),
-			...(discoverySpinnerRegisterTick === undefined
-				? {}
-				: { registerTick: discoverySpinnerRegisterTick }),
-		} satisfies React.ComponentProps<typeof Spinner>
-
-		return (
-			<box style={rowStyle}>
-				{renderIndicators()}
-				{nonWarningStatusPrefixBudget >= 1 ? <Spinner {...spinnerProps} /> : null}
-				{nonWarningStatusPrefixBudget >= 2 ? (
-					<text content=" " wrapMode="none" style={{ fg: colors.textMuted }} />
-				) : null}
-				{isPartialWarning ? null : (
-					<text content={statusContent} wrapMode="none" style={{ fg: colors.secondary }} />
-				)}
-				{statusSeparatorContent.length > 0 && (
-					<text content={statusSeparatorContent} wrapMode="none" style={{ fg: colors.textMuted }} />
-				)}
-				{renderHints()}
-			</box>
-		)
-	}
-
-	return (
-		<box style={rowStyle}>
-			{renderIndicators()}
-			{renderHints()}
-		</box>
-	)
-}

package/src/Header.tsx

@@ -1,71 +0,0 @@
-/**
- * Header — single-row chrome above the two-pane area.
- *
- * Borderless single line modeled on ghui's PlainLine header: brand and
- * current filename on the left, version on the right. The row is
- * informational, not interactive — see issue #38 for the design discussion.
- *
- * Width degrades gracefully: the version drops first when the row gets
- * tight, then the filename, leaving the brand mark as the irreducible
- * identity element. Always rendered — the row is worth one cell on any
- * viewport so the user never loses the filename indicator (notably, when
- * the sidebar drawer overlays the reader on narrow viewports).
- */
-
-import pkg from "../package.json" with { type: "json" }
-import { BRAND, BRAND_NAME } from "./brand.ts"
-import { colors } from "./theme/colors.ts"
-
-export const HEADER_HEIGHT = 1
-
-const FILE_SEPARATOR = " · "
-
-export interface HeaderProps {
-	readonly width: number
-	/** Currently selected file's relative path. When set, the Header shows
-	 *  it next to the brand mark — replaces the per-pane border title that
-	 *  used to carry this information. */
-	readonly currentFile?: string | null
-	/** Optional override for the version string (testing). Defaults to
-	 *  the running package's version. */
-	readonly version?: string
-}
-
-export const Header = ({ width, currentFile, version = pkg.version }: HeaderProps) => {
-	const brand = `${BRAND} ${BRAND_NAME}`
-	const right = `v${version}`
-	const file = currentFile && currentFile.length > 0 ? currentFile : null
-	const usableWidth = Math.max(0, width - 2) // 1-cell horizontal padding each side
-
-	// Priority: brand > filename > version. Brand is the irreducible identity
-	// anchor. Filename is per-selection useful info — keep it before the
-	// largely-static version string. `1` is the minimum gap between left and
-	// right groups so they never visually collide.
-	const leftWithFile = file !== null ? `${brand}${FILE_SEPARATOR}${file}` : brand
-	const showFileWithVersion = leftWithFile.length + 1 + right.length <= usableWidth
-	const showFileWithoutVersion = leftWithFile.length <= usableWidth
-	const showFile = file !== null && (showFileWithVersion || showFileWithoutVersion)
-	const left = showFile ? leftWithFile : brand
-	const showRight = left.length + 1 + right.length <= usableWidth
-
-	return (
-		<box
-			style={{
-				width,
-				height: HEADER_HEIGHT,
-				flexShrink: 0,
-				flexDirection: "row",
-				justifyContent: "space-between",
-				paddingLeft: 1,
-				paddingRight: 1,
-				backgroundColor: colors.backgroundPanel,
-			}}
-		>
-			<text wrapMode="none">
-				<span style={{ fg: colors.text }}>{brand}</span>
-				{showFile && <span style={{ fg: colors.textMuted }}>{`${FILE_SEPARATOR}${file}`}</span>}
-			</text>
-			{showRight && <text content={right} wrapMode="none" style={{ fg: colors.text }} />}
-		</box>
-	)
-}

package/src/PromptRow.tsx

@@ -1,51 +0,0 @@
-/**
- * PromptRow — single-line `> query` row shared by the sidebar filter and
- * the command palette query input.
- *
- * Render-only: the parent owns query state and the focus/editing flag.
- * The `> ` prefix renders in `primary` or `secondary` so it
- * reads as chrome, not placeholder text — only the body span shifts color
- * (primary while editing, text when applied, textMuted as placeholder).
- *
- * Overflow: when editing, an overflowing body anchors its right edge with a
- * leading `…` so the cursor stays on screen; otherwise it anchors the left
- * edge with a trailing `…`.
- */
-
-import { colors } from "./theme/colors.ts"
-
-export interface PromptRowProps {
-	readonly query: string
-	/** True while the input is focused — shows a cursor and uses primary fg. */
-	readonly editing: boolean
-	/** Body fallback when !editing && query === "". Pass without the `> ` prefix. */
-	readonly placeholder?: string
-	/** Total cell width available for the row (prefix + body). */
-	readonly width: number
-}
-
-const PREFIX = "> "
-const CURSOR = "▏"
-
-export const PromptRow = ({ query, editing, placeholder = "", width }: PromptRowProps) => {
-	const bodyBudget = Math.max(1, width - PREFIX.length)
-
-	const rawBody = editing ? `${query}${CURSOR}` : query.length > 0 ? query : placeholder
-	const bodyFg = editing ? colors.primary : query.length > 0 ? colors.text : colors.textMuted
-
-	const body =
-		rawBody.length <= bodyBudget
-			? rawBody
-			: editing
-				? "…" + rawBody.slice(rawBody.length - bodyBudget + 1)
-				: rawBody.slice(0, bodyBudget - 1) + "…"
-
-	const prefixFg = editing ? colors.secondary : colors.primary
-
-	return (
-		<text wrapMode="none">
-			<span style={{ fg: prefixFg }}>{PREFIX}</span>
-			<span style={{ fg: bodyFg }}>{body}</span>
-		</text>
-	)
-}

package/src/Spinner.tsx

@@ -1,39 +0,0 @@
-import { useEffect, useRef, useState } from "react"
-import { colors } from "./theme/colors.ts"
-
-const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"] as const
-const FRAME_COUNT = FRAMES.length
-const normalizeFrameIndex = (index: number) => ((index % FRAME_COUNT) + FRAME_COUNT) % FRAME_COUNT
-
-export interface SpinnerProps {
-	readonly fg?: string
-	readonly intervalMs?: number
-	readonly initialFrameIndex?: number
-	/** Test seam: deterministic driver for frame advancement. When present,
-	 *  Spinner registers its tick callback here instead of starting an interval. */
-	readonly registerTick?: ((tick: () => void) => void) | null
-}
-
-export const Spinner = ({
-	fg = colors.textMuted,
-	intervalMs = 100,
-	initialFrameIndex = 0,
-	registerTick = null,
-}: SpinnerProps) => {
-	const [index, setIndex] = useState(() => normalizeFrameIndex(initialFrameIndex))
-	const tickRef = useRef<() => void>(() => undefined)
-	tickRef.current = () => setIndex((prev) => (prev + 1) % FRAME_COUNT)
-
-	useEffect(() => {
-		if (registerTick) {
-			registerTick(() => tickRef.current())
-			return
-		}
-		const id = setInterval(() => {
-			tickRef.current()
-		}, intervalMs)
-		return () => clearInterval(id)
-	}, [intervalMs, registerTick])
-
-	return <text content={FRAMES[index] ?? FRAMES[0]} wrapMode="none" style={{ fg }} />
-}

package/src/StatusIndicator.tsx

@@ -1,55 +0,0 @@
-import { colors } from "./theme/colors.ts"
-
-export type StatusIndicatorVariant = "info" | "warning" | "error" | "success"
-
-export interface StatusIndicatorProps {
-	readonly icon: string
-	readonly variant?: StatusIndicatorVariant
-	readonly active?: boolean
-	readonly onMouseUp?: () => void
-}
-
-export const statusIndicatorFg = (variant: StatusIndicatorVariant): string => {
-	switch (variant) {
-		case "info":
-			return colors.info
-		case "warning":
-			return colors.warning
-		case "error":
-			return colors.error
-		case "success":
-			return colors.success
-	}
-}
-
-export const StatusIndicator = ({
-	icon,
-	variant = "info",
-	active = true,
-	onMouseUp,
-}: StatusIndicatorProps) => {
-	const activeColor = statusIndicatorFg(variant)
-	const backgroundColor = active ? activeColor : colors.backgroundElement
-
-	return (
-		<box
-			{...(onMouseUp === undefined ? {} : { onMouseUp })}
-			style={{
-				width: 3,
-				height: 1,
-				flexDirection: "row",
-				backgroundColor,
-			}}
-		>
-			<text
-				content={` ${icon} `}
-				wrapMode="none"
-				style={{
-					fg: active ? colors.backgroundPanel : colors.textMuted,
-					bg: backgroundColor,
-					attributes: active ? 1 : 0,
-				}}
-			/>
-		</box>
-	)
-}