tmux-ide 2.6.0 → 2.6.1

package/packages/daemon/src/tui/team/sessions.ts

@@ -0,0 +1,344 @@
+/**
+ * Data layer for the team TUI.
+ *
+ * Enumerates every live tmux session and rolls each one up to an agent
+ * status. Detection is TWO-LAYER: a fresh `@agent_state` pane option —
+ * written by a lifecycle-hook integration (`tmux-ide integration install
+ * claude`) or any self-reporting agent — is AUTHORITATIVE; only panes
+ * without authority fall back to snapshot scraping (pick a manifest by the
+ * pane command, capture, classify, fold through the persistent
+ * `StatusTracker` so the cross-tick `done` surfaces). Pane statuses roll up
+ * to a single session status.
+ */
+import { execFileSync } from "node:child_process";
+import {
+  classifyInstant,
+  parseAuthority,
+  type AgentStatus,
+  type StatusTracker,
+} from "../detect/classify.ts";
+import type { AgentManifest } from "../detect/manifest.ts";
+import { readProcessTable, resolveAgentCommand } from "../detect/process-tree.ts";
+import { readPaneSnapshot } from "../detect/snapshot.ts";
+
+export interface TeamSession {
+  name: string;
+  attached: boolean;
+  windows: number;
+  panes: number;
+  status: AgentStatus;
+  /**
+   * Per-window (tmux tab) rollup: one entry per window the session owns, in
+   * ascending window-index order. The `windows` count above stays for compat;
+   * this is the richer breakdown the switcher/cockpit navigate.
+   */
+  windowList: TeamWindow[];
+}
+
+/**
+ * A single tmux window (tab) within a session, with its panes' statuses rolled
+ * up to one status (highest severity wins, like a session rollup).
+ */
+export interface TeamWindow {
+  /** `window_index` — tmux's own index (may be non-contiguous). */
+  index: number;
+  /** `window_name`. */
+  name: string;
+  /** Whether this is the session's active (foreground) window. */
+  active: boolean;
+  /** How many panes the window owns. */
+  panes: number;
+  /** Rolled-up status of the window's panes. */
+  status: AgentStatus;
+}
+
+/**
+ * A single pane's resolved detail, handed to {@link ListTeamSessionsOpts.onPane}
+ * as each pane is classified. `agent` is the resolved agent id, or `null` for a
+ * non-agent pane (no manifest, or the `shell` catch-all — those get no chip).
+ * `status` is the final status (authority when fresh, else scraped/tracked).
+ */
+export interface PaneDetail {
+  sessionName: string;
+  paneId: string;
+  agent: string | null;
+  status: AgentStatus;
+}
+
+interface PaneRecord {
+  /** tmux pane id, e.g. `%5`. */
+  id: string;
+  /** `pane_pid` — the pane's immediate process, root of its process tree. */
+  pid: number;
+  /** `pane_current_command`. */
+  cmd: string;
+  /** `pane_title`. */
+  title: string;
+  /** Raw `@agent_state` pane option (authority layer), if set. */
+  authority: string;
+  /** Raw `@agent_hint` pane option — forces a manifest when set. */
+  hint: string;
+  /** `window_index` — the window (tab) this pane lives in. */
+  windowIndex: number;
+  /** `window_name`. */
+  windowName: string;
+  /** `window_active` — whether this pane's window is the session's active one. */
+  windowActive: boolean;
+  /** `@tmux_ide_sidebar` — set on the app's own nav-column pane. Such panes are
+   *  chrome, not agents, so they're excluded from the status rollup entirely. */
+  sidebar: boolean;
+}
+
+/** The pane option that marks the app's sidebar (nav-column) pane. */
+export const SIDEBAR_PANE_OPTION = "@tmux_ide_sidebar";
+
+/**
+ * PURE — drop the app's own sidebar panes from a session's pane list. The
+ * sidebar is chrome (it renders the fleet nav column), so it must never fold
+ * into the session's agent-status rollup, pane count, or window breakdown.
+ */
+export function excludeSidebarPanes<T extends { sidebar: boolean }>(panes: T[]): T[] {
+  return panes.filter((pane) => !pane.sidebar);
+}
+
+/** Severity order — highest present status wins in a rollup. */
+const SEVERITY: AgentStatus[] = ["blocked", "working", "done", "idle", "unknown"];
+
+/**
+ * Whether a session should appear in the switcher. Any `_`-prefixed session is
+ * internal plumbing (the `_tmux-ide-chrome` updater, scratch sessions, …) and
+ * is filtered out so the cockpit never lists — or navigates into — infrastructure.
+ */
+export function isListableSession(name: string): boolean {
+  return !name.startsWith("_");
+}
+
+function tmux(args: string[]): string {
+  try {
+    return execFileSync("tmux", args, {
+      encoding: "utf8",
+      stdio: ["ignore", "pipe", "ignore"],
+    }).trim();
+  } catch {
+    return "";
+  }
+}
+
+/** Options for {@link listTeamSessions}. */
+export interface ListTeamSessionsOpts {
+  /**
+   * Name of the currently-attached/viewed session, if any — its panes are
+   * marked seen (acknowledging any pending `done`).
+   */
+  viewed?: string;
+  /**
+   * Per-pane sink, invoked once per pane with its resolved agent + final
+   * status as it's classified. Lets a caller (the chrome updater) recover the
+   * per-pane truth the rollup throws away, WITHOUT a second scan. When absent,
+   * the extra manifest resolution for authority panes is skipped — existing
+   * callers see zero behavior change.
+   */
+  onPane?: (pane: PaneDetail) => void;
+}
+
+/**
+ * List every live tmux session with a rolled-up agent status.
+ *
+ * @param tracker Persistent status tracker threaded across refreshes so the
+ *   cross-tick `done` state can be inferred.
+ * @param opts See {@link ListTeamSessionsOpts}.
+ */
+export function listTeamSessions(
+  tracker: StatusTracker,
+  opts: ListTeamSessionsOpts = {},
+): TeamSession[] {
+  const raw = tmux([
+    "list-sessions",
+    "-F",
+    "#{session_name}\t#{session_attached}\t#{session_windows}",
+  ]);
+  if (!raw) return [];
+
+  const panesBySession = collectPanes();
+  // One `ps` read per call — a single ~10-20ms syscall shared across every
+  // fallback pane, so the manifest lookup can walk each pane's process tree
+  // instead of matching on the (usually generic) pane_current_command.
+  const processTable = readProcessTable();
+
+  return raw
+    .split("\n")
+    .filter(Boolean)
+    .filter((line) => isListableSession(line.split("\t")[0] ?? ""))
+    .map((line) => {
+      const [name = "", attached = "", windows = "0"] = line.split("\t");
+      // Sidebar panes are chrome, not agents — drop them before any rollup so
+      // they never pollute the session status, pane count, or window list.
+      const panes = excludeSidebarPanes(panesBySession.get(name) ?? []);
+      const seen = opts.viewed === name;
+
+      const nowSec = Math.floor(Date.now() / 1000);
+      const wantPane = typeof opts.onPane === "function";
+      const statuses = panes.map((pane) => {
+        // AUTHORITY first: a fresh hook-reported state outranks scraping.
+        const authority = parseAuthority(pane.authority, nowSec);
+        let status: AgentStatus;
+        // The manifest is resolved in the fallback anyway; for authority panes
+        // we only resolve it (cheaply — the process table is already loaded, no
+        // capture) when a pane sink wants the agent name for a chip.
+        let manifest: AgentManifest | undefined;
+        if (authority !== null) {
+          if (authority === "done" && seen) {
+            // Viewing acknowledges a finished agent — persist the ack so the
+            // pane doesn't flip back to done on the next tick.
+            ackDone(pane.id, nowSec);
+            status = "idle";
+          } else {
+            status = authority;
+          }
+          if (wantPane) {
+            manifest = resolveAgentCommand(pane.cmd, pane.pid, processTable, {
+              hint: pane.hint,
+            }).manifest;
+          }
+        } else {
+          // FALLBACK: snapshot scraping. Resolve the real agent from the pane's
+          // process tree (pane_current_command alone is usually just node/bun/sh).
+          // Only capture recognized agent panes; unknown commands stay "unknown"
+          // without a capture-pane round-trip.
+          manifest = resolveAgentCommand(pane.cmd, pane.pid, processTable, {
+            hint: pane.hint,
+          }).manifest;
+          const instant = manifest
+            ? classifyInstant({ ...readPaneSnapshot(pane.id), title: pane.title }, manifest)
+            : "unknown";
+          status = tracker.update(pane.id, instant, { seen });
+        }
+        // The `shell` catch-all isn't a real agent — a raw shell pane gets no
+        // chip (agent null → empty chip → border falls back to the pane title).
+        opts.onPane?.({
+          sessionName: name,
+          paneId: pane.id,
+          agent: manifest && manifest.id !== "shell" ? manifest.id : null,
+          status,
+        });
+        return status;
+      });
+
+      return {
+        name,
+        attached: attached === "1",
+        windows: Number(windows) || 0,
+        panes: panes.length,
+        status: rollupStatus(statuses),
+        // `panes` and `statuses` are parallel (statuses = panes.map(...)), so
+        // the pure rollup can group each pane's window with its resolved status.
+        windowList: rollupWindows(panes, statuses),
+      };
+    });
+}
+
+/** One `list-panes -a` call, grouped by session — avoids N tmux calls. */
+function collectPanes(): Map<string, PaneRecord[]> {
+  const raw = tmux([
+    "list-panes",
+    "-a",
+    "-F",
+    // Window fields sit before pane_title so the (tab-safe) title stays the
+    // trailing catch-all — window names don't contain tabs in practice.
+    `#{session_name}\t#{pane_id}\t#{pane_pid}\t#{pane_current_command}\t#{@agent_state}\t#{@agent_hint}\t#{${SIDEBAR_PANE_OPTION}}\t#{window_index}\t#{window_name}\t#{window_active}\t#{pane_title}`,
+  ]);
+  const bySession = new Map<string, PaneRecord[]>();
+  for (const line of raw.split("\n").filter(Boolean)) {
+    const [
+      session = "",
+      id = "",
+      pid = "",
+      cmd = "",
+      authority = "",
+      hint = "",
+      sidebar = "",
+      windowIndex = "0",
+      windowName = "",
+      windowActive = "0",
+      ...titleParts
+    ] = line.split("\t");
+    if (!session) continue;
+    const list = bySession.get(session) ?? [];
+    list.push({
+      id,
+      pid: Number(pid) || 0,
+      cmd,
+      authority,
+      hint,
+      sidebar: sidebar === "1",
+      windowIndex: Number(windowIndex) || 0,
+      windowName,
+      windowActive: windowActive === "1",
+      title: titleParts.join("\t"),
+    });
+    bySession.set(session, list);
+  }
+  return bySession;
+}
+
+/**
+ * Acknowledge an authority-reported `done` for a viewed pane by rewriting its
+ * option to idle — otherwise the stamped "done" would resurface every tick.
+ */
+function ackDone(paneId: string, nowSec: number): void {
+  tmux(["set-option", "-p", "-t", paneId, "@agent_state", `idle:${nowSec}`]);
+}
+
+/**
+ * Roll a session's per-pane statuses up to a single status. The highest
+ * present severity wins (blocked > working > done > idle > unknown), so
+ * `unknown` only surfaces when nothing else is present. An empty session
+ * (no panes) rolls up to `"idle"`.
+ */
+export function rollupStatus(statuses: AgentStatus[]): AgentStatus {
+  if (statuses.length === 0) return "idle";
+  const present = new Set(statuses);
+  for (const status of SEVERITY) {
+    if (present.has(status)) return status;
+  }
+  return "unknown";
+}
+
+/** The window fields {@link rollupWindows} needs from each pane — PaneRecord fits. */
+export interface WindowPaneInput {
+  windowIndex: number;
+  windowName: string;
+  windowActive: boolean;
+}
+
+/**
+ * Group a session's panes into per-window rollups — PURE.
+ *
+ * `panes[i]` and `statuses[i]` are parallel (one status per pane). Panes are
+ * bucketed by `windowIndex`; each window's panes roll up to a single status via
+ * {@link rollupStatus}, its `name` taken from the first pane seen and `active`
+ * true if ANY of its panes report `window_active`. Windows come back in
+ * ascending index order. An empty pane list yields an empty window list.
+ */
+export function rollupWindows(panes: WindowPaneInput[], statuses: AgentStatus[]): TeamWindow[] {
+  const byIndex = new Map<number, { name: string; active: boolean; statuses: AgentStatus[] }>();
+  panes.forEach((pane, i) => {
+    let entry = byIndex.get(pane.windowIndex);
+    if (!entry) {
+      entry = { name: pane.windowName, active: false, statuses: [] };
+      byIndex.set(pane.windowIndex, entry);
+    }
+    if (pane.windowActive) entry.active = true;
+    const status = statuses[i];
+    if (status) entry.statuses.push(status);
+  });
+  return [...byIndex.entries()]
+    .sort(([a], [b]) => a - b)
+    .map(([index, entry]) => ({
+      index,
+      name: entry.name,
+      active: entry.active,
+      panes: entry.statuses.length,
+      status: rollupStatus(entry.statuses),
+    }));
+}

package/packages/daemon/src/tui/team/tree.ts

@@ -0,0 +1,62 @@
+/**
+ * The flat row-node union shared by the picker popup and the sidebar column.
+ *
+ * Both surfaces navigate the same three-tier tree — project → session → window
+ * — with a single flat cursor. This module is the PURE builder for that ordered
+ * node list so the two callers can't drift: `treeNodes` produces the union for a
+ * given cursor/expansion policy, `findCursor` locates a cursor within it.
+ *
+ * The cursor is the `(pi, si, wi)` triple, where `si:-1` marks a project row and
+ * `wi:-1` a session (or project) row — identical to the picker's original
+ * inline `pickerNodes`.
+ */
+
+/** A flat cursor position: project index, session index (-1 = project row),
+ *  window index (-1 = session/project row). */
+export interface TreeCursor {
+  pi: number;
+  si: number;
+  wi: number;
+}
+
+/** The minimal project shape the node builder needs — a structural subset of
+ *  TeamProject so tests can pass plain fixtures. */
+export interface TreeProjectLike {
+  sessions: Array<{ windowList: readonly unknown[] }>;
+}
+
+/**
+ * PURE — build the ordered flat node union for the tree.
+ *
+ * For every project a project row is emitted. Its sessions are expanded when the
+ * project is the active one, OR always when `expandAllProjects` is set (the
+ * sidebar shows the whole fleet; the picker only opens the active project).
+ * Window rows are emitted only under the ACTIVE session (`pi===activeProject &&
+ * si===activeSession`), so exactly one session's windows are ever expanded.
+ */
+export function treeNodes(
+  projects: readonly TreeProjectLike[],
+  activeProject: number,
+  activeSession: number,
+  opts: { expandAllProjects?: boolean } = {},
+): TreeCursor[] {
+  const expandAll = opts.expandAllProjects ?? false;
+  const nodes: TreeCursor[] = [];
+  projects.forEach((proj, pi) => {
+    nodes.push({ pi, si: -1, wi: -1 });
+    if (!expandAll && pi !== activeProject) return;
+    proj.sessions.forEach((sess, si) => {
+      nodes.push({ pi, si, wi: -1 });
+      if (pi === activeProject && si === activeSession) {
+        sess.windowList.forEach((_w, wi) => nodes.push({ pi, si, wi }));
+      }
+    });
+  });
+  return nodes;
+}
+
+/** PURE — index of `cursor` in `nodes`, or -1 when absent (e.g. after a refresh
+ *  dropped the row). */
+export function findCursor(nodes: readonly TreeCursor[], cursor: TreeCursor): number {
+  return nodes.findIndex((n) => n.pi === cursor.pi && n.si === cursor.si && n.wi === cursor.wi);
+}

package/packages/daemon/src/types.ts

@@ -0,0 +1,13 @@
+export type {
+  Pane,
+  Row,
+  ThemeConfig,
+  OrchestratorYamlConfig,
+  CommandCenterConfig,
+  DashboardConfig,
+  IdeConfig,
+  PaneAction,
+  SessionState,
+} from "./schemas/ide-config.ts";
+
+export type TmuxCommand = string[];

package/packages/daemon/src/ui/index.ts

@@ -0,0 +1,32 @@
+// Environment-detecting UI entry point.
+//
+// Detects whether code is running in a browser (window exists) or terminal
+// (Node/Bun) and re-exports the appropriate backend. Widgets import from
+// this module to work in both environments without code changes.
+//
+// Usage:
+//   import { render, useKeyboard, RGBA, TextAttributes } from "../../ui/index.ts";
+//
+// Terminal backend: re-exports @opentui/solid + @opentui/core
+// Web backend: re-exports DOM-based mirror components
+
+// Use a compile-time constant so bundlers can tree-shake the unused backend.
+// In browser builds, `typeof window !== "undefined"` is true and the terminal
+// branch is eliminated. In Node/Bun, the web branch is eliminated.
+const IS_BROWSER = typeof window !== "undefined";
+
+if (IS_BROWSER) {
+  // Re-export web backend at module level for static analysis
+}
+
+// We use conditional re-export via a barrel pattern.
+// Bundlers (Bun, webpack, turbopack) resolve this statically.
+// For runtime detection, we export from web by default (browser-first)
+// and terminal widgets import from ./terminal/index.ts directly.
+//
+// The web backend is safe to import in Node because it only touches
+// the DOM inside render() and hooks (which are never called in terminal mode).
+export * from "./web/index.ts";
+
+// Also re-export shared types so they're available regardless of backend
+export type { BoxProps, TextProps, ScrollBoxProps, InputProps } from "./types.ts";

package/packages/daemon/src/ui/terminal/index.ts

@@ -0,0 +1,9 @@
+// Terminal backend — re-exports @opentui/solid and @opentui/core for terminal rendering.
+// Widgets importing from src/ui/ will get these exports when running in Node/Bun.
+
+// Render and hooks
+export { render, useKeyboard, useTerminalDimensions } from "@opentui/solid";
+
+// Core primitives and types
+export { RGBA, TextAttributes } from "@opentui/core";
+export type { ScrollBoxRenderable, InputRenderable } from "@opentui/core";

package/packages/daemon/src/ui/types.ts

@@ -0,0 +1,91 @@
+export interface RGBA {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+export function rgbaFromInts(r: number, g: number, b: number, a?: number): RGBA {
+  return { r, g, b, a: a ?? 255 };
+}
+
+export const TextAttributes = {
+  NONE: 0,
+  BOLD: 1,
+  DIM: 2,
+  ITALIC: 4,
+  UNDERLINE: 8,
+  BLINK: 16,
+  INVERSE: 32,
+  HIDDEN: 64,
+  STRIKETHROUGH: 128,
+} as const;
+
+export interface BoxProps {
+  id?: string;
+  flexDirection?: "row" | "column";
+  flexGrow?: number;
+  flexShrink?: number;
+  gap?: number;
+  justifyContent?: "flex-start" | "center" | "flex-end" | "space-between";
+  alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+  position?: "relative" | "absolute";
+  overflow?: "visible" | "hidden";
+  width?: number | string;
+  height?: number | string;
+  maxWidth?: number | string;
+  maxHeight?: number | string;
+  padding?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  backgroundColor?: RGBA;
+  border?: string[];
+  borderColor?: RGBA;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+  // Mouse events
+  onMouseDown?: (e: unknown) => void;
+  onMouseUp?: (e: unknown) => void;
+  onMouseMove?: (e: unknown) => void;
+  onMouseOver?: (e: unknown) => void;
+  // Children
+  children?: unknown;
+  ref?: (el: unknown) => void;
+}
+
+export interface TextProps {
+  fg?: RGBA;
+  bg?: RGBA;
+  attributes?: number;
+  wrapMode?: "none" | "word" | "char";
+  width?: number | string;
+  height?: number | string;
+  flexGrow?: number;
+  flexShrink?: number;
+  // Mouse events
+  onMouseUp?: (e: unknown) => void;
+  onMouseDown?: (e: unknown) => void;
+  children?: unknown;
+}
+
+export interface ScrollBoxProps extends BoxProps {
+  verticalScrollbarOptions?: unknown;
+  stickyScroll?: boolean;
+  stickyStart?: "bottom" | "top";
+}
+
+export interface InputProps {
+  value?: string;
+  placeholder?: string;
+  onInput?: (value: string) => void;
+  focusedBackgroundColor?: RGBA;
+  cursorColor?: RGBA;
+  focusedTextColor?: RGBA;
+  onMouseDown?: (e: unknown) => void;
+  ref?: (el: unknown) => void;
+  children?: unknown;
+}

package/packages/daemon/src/ui/web/base.css

@@ -0,0 +1,80 @@
+/* Base styles for the web terminal backend.
+ * Import this in your HTML or bundler entry point to get terminal-like appearance.
+ * These styles are also injected automatically by render() at runtime.
+ */
+
+:root {
+  --ui-line-height: 1.4em;
+  --ui-font-family:
+    "IBM Plex Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono",
+    monospace;
+  --ui-font-size: 13px;
+  --ui-bg: rgb(19, 16, 16);
+  --ui-fg: rgb(232, 228, 228);
+  --ui-scrollbar-track: rgb(25, 25, 35);
+  --ui-scrollbar-thumb: rgb(60, 60, 80);
+  --ui-scrollbar-thumb-hover: rgb(80, 80, 100);
+}
+
+body,
+#root {
+  font-family: var(--ui-font-family);
+  font-size: var(--ui-font-size);
+  line-height: var(--ui-line-height);
+  background: var(--ui-bg);
+  color: var(--ui-fg);
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+/* Flex-column by default — matches terminal box model */
+div {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+span {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+input {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: transparent;
+  color: inherit;
+  border: none;
+  outline: none;
+}
+
+input::placeholder {
+  color: rgba(232, 228, 228, 0.4);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--ui-scrollbar-track);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ui-scrollbar-thumb);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ui-scrollbar-thumb-hover);
+}

package/packages/daemon/src/ui/web/components/Box.tsx

@@ -0,0 +1,59 @@
+import type { JSX, ParentProps } from "solid-js";
+import { rgbaToCSS } from "../utils/color.ts";
+import type { BoxProps } from "../../types.ts";
+
+export function Box(props: ParentProps<BoxProps>) {
+  const style = (): JSX.CSSProperties => ({
+    display: "flex",
+    "flex-direction": props.flexDirection ?? "column",
+    "flex-grow": props.flexGrow,
+    "flex-shrink": props.flexShrink,
+    gap: props.gap !== undefined ? `${props.gap}ch` : undefined,
+    "justify-content": props.justifyContent,
+    "align-items": props.alignItems,
+    position: props.position ?? "relative",
+    overflow: props.overflow,
+    width: typeof props.width === "number" ? `${props.width}ch` : props.width,
+    height:
+      typeof props.height === "number"
+        ? `calc(${props.height} * var(--line-height))`
+        : props.height,
+    "max-width": typeof props.maxWidth === "number" ? `${props.maxWidth}ch` : props.maxWidth,
+    "max-height":
+      typeof props.maxHeight === "number"
+        ? `calc(${props.maxHeight} * var(--line-height))`
+        : props.maxHeight,
+    padding:
+      props.padding !== undefined
+        ? `calc(${props.padding} * var(--line-height)) ${props.padding}ch`
+        : undefined,
+    "padding-left": props.paddingLeft !== undefined ? `${props.paddingLeft}ch` : undefined,
+    "padding-right": props.paddingRight !== undefined ? `${props.paddingRight}ch` : undefined,
+    "padding-top":
+      props.paddingTop !== undefined ? `calc(${props.paddingTop} * var(--line-height))` : undefined,
+    "padding-bottom":
+      props.paddingBottom !== undefined
+        ? `calc(${props.paddingBottom} * var(--line-height))`
+        : undefined,
+    background: props.backgroundColor ? rgbaToCSS(props.backgroundColor) : undefined,
+    "border-color": props.borderColor ? rgbaToCSS(props.borderColor) : undefined,
+    top: props.top !== undefined ? `calc(${props.top} * var(--line-height))` : undefined,
+    left: props.left !== undefined ? `${props.left}ch` : undefined,
+    right: props.right !== undefined ? `${props.right}ch` : undefined,
+    bottom: props.bottom !== undefined ? `calc(${props.bottom} * var(--line-height))` : undefined,
+  });
+
+  return (
+    <div
+      id={props.id}
+      style={style()}
+      onMouseDown={props.onMouseDown}
+      onMouseUp={props.onMouseUp}
+      onMouseMove={props.onMouseMove}
+      onMouseOver={props.onMouseOver}
+      ref={props.ref}
+    >
+      {props.children}
+    </div>
+  );
+}