iCode-TUI 0.29.1__py3-none-any.whl

chrys/app/tui/widgets/color_picker/__init__.py

@@ -0,0 +1,254 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2026. All rights reserved.
+
+"""An independent color editor. The caller owns transactions and theme previews."""
+
+from __future__ import annotations
+
+import math
+
+from rich.text import Text
+from textual import events, on
+from textual.app import ComposeResult
+from textual.color import Color
+from textual.containers import HorizontalGroup, VerticalGroup
+from textual.message import Message
+from textual.widget import Widget
+from textual.widgets import Label
+
+from chrys.app.tui.i18n import render_str, widget_localizer
+from chrys.app.tui.widgets.input import EnhancedInput as Input
+from chrys.foundation.i18n import MessageDef, msg
+
+from .controls import ColorComparison, ColorPlane
+from .model import ColorEditContext, ColorValue
+
+_EXPRESSION = msg("tui.color_picker.expression", fallback="Color expression / HEX")
+_COMPARISON = msg("tui.color_picker.comparison", fallback="Original / Preview · checkerboard and actual background")
+_HUE = msg("tui.color_picker.hue", fallback="Hue")
+_ALPHA = msg("tui.color_picker.alpha", fallback="Opacity")
+_INVALID = msg("tui.color_picker.invalid", fallback="Enter a valid color; the last valid preview is kept.")
+_OPAQUE = msg("tui.color_picker.opaque", fallback="This field requires an opaque RGB color.")
+_RANGE = msg("tui.color_picker.range", fallback="Use RGB 0-255, H 0-360, S/V/A 0-100.")
+
+
+class ColorPicker(Widget):
+    """RGB, HSV and alpha controls which preserve untouched source expressions."""
+
+    DEFAULT_CSS = """
+    ColorPicker {
+        height: auto;
+        & > HorizontalGroup { height: auto; }
+        .planes { width: 2fr; padding-right: 2; height: auto; }
+        .numbers { width: 1fr; min-width: 24; height: auto; padding: 1; background: $foreground 4%; }
+        .channels { height: auto; margin-top: 1; }
+        .channel { width: 1fr; height: auto; margin-right: 1; }
+        .channel:last-child { margin-right: 0; }
+        .channel Label { text-align: center; width: 1fr; }
+        Label { color: $text-muted; }
+        Input {
+            width: 1fr;
+            height: 1;
+            border: none;
+            background: $foreground 8%;
+            padding: 0 1;
+        }
+        Input:focus { border: none; background: $foreground 12%; }
+        ColorComparison { margin-bottom: 1; }
+        .validation-error { color: $error; background: transparent; height: auto; min-height: 1; width: 1fr; }
+        .caption { height: auto; width: 1fr; }
+        &.compact > HorizontalGroup { layout: vertical; }
+        &.compact .planes { width: 1fr; padding-right: 0; }
+        &.compact .numbers { width: 1fr; }
+        &.compact ColorPlane.sv { height: 7; }
+    }
+    """
+
+    class Changed(Message):
+        """Emitted only for user edits, never by mounting or synchronizing controls."""
+
+        def __init__(self, picker: ColorPicker, value: str) -> None:
+            super().__init__()
+            self.picker = picker
+            self.value = value
+            self.context = picker.context
+
+    class ValidityChanged(Message):
+        """Let a containing dialog reflect invalid input in its confirm action."""
+
+        def __init__(self, picker: ColorPicker) -> None:
+            super().__init__()
+            self.picker = picker
+            self.context = picker.context
+            self.valid = picker.valid
+
+    def __init__(
+        self,
+        value: str,
+        *,
+        original: str | None = None,
+        seed: Color | None = None,
+        background: Color | None = None,
+        allow_alpha: bool = True,
+        context: ColorEditContext | None = None,
+    ) -> None:
+        super().__init__()
+        self.state = ColorValue.from_expression(value, seed=seed)
+        self.original = self.state if original is None else ColorValue.from_expression(original, seed=seed)
+        self.background = background or Color(32, 32, 32)
+        self.allow_alpha = allow_alpha
+        self.valid = True
+        self.context = context
+        self._input_values: dict[str, str] = {}
+        self._error_message: MessageDef | None = None
+
+    @property
+    def value(self) -> str:
+        return self.state.expression
+
+    def compose(self) -> ComposeResult:
+        self._input_values = {
+            "color-expression": self.value,
+            **{f"channel-{key}": value for key, value in self._values().items()},
+        }
+        localizer = widget_localizer(self)
+        yield Label(Text(render_str(localizer, _COMPARISON.bind())), id="color-comparison-label", classes="caption")
+        comparison = ColorComparison(self.original.color, self.background)
+        comparison.color = self.state.color
+        yield comparison
+        with HorizontalGroup():
+            with VerticalGroup(classes="planes"):
+                yield ColorPlane("sv", self.state, id="color-sv")
+                yield Label(Text(render_str(localizer, _HUE.bind())), id="color-hue-label")
+                yield ColorPlane("hue", self.state, id="color-hue")
+                if self.allow_alpha:
+                    yield Label(Text(render_str(localizer, _ALPHA.bind())), id="color-alpha-label")
+                    yield ColorPlane("alpha", self.state, id="color-alpha")
+            with VerticalGroup(classes="numbers"):
+                yield Label(
+                    Text(render_str(localizer, _EXPRESSION.bind())), id="color-expression-label", classes="caption"
+                )
+                yield Input(self.value, id="color-expression")
+                groups = [("r", "g", "b"), ("h", "s", "v")]
+                if self.allow_alpha:
+                    groups.append(("a",))
+                for names in groups:
+                    with HorizontalGroup(classes="channels"):
+                        for name in names:
+                            with VerticalGroup(classes="channel"):
+                                yield Label(Text(name.upper()))
+                                yield Input(self._values()[name], id=f"channel-{name}")
+        yield Label(Text(""), id="color-error", classes="validation-error")
+
+    def on_resize(self, event: events.Resize) -> None:
+        self.set_class(event.size.width < 62, "compact")
+
+    def refresh_localization(self) -> None:
+        """Keep input text, invalid edits, focus and plane selection intact."""
+        localizer = widget_localizer(self)
+        for name, definition in (
+            ("comparison", _COMPARISON),
+            ("hue", _HUE),
+            ("alpha", _ALPHA),
+            ("expression", _EXPRESSION),
+        ):
+            if name != "alpha" or self.allow_alpha:
+                self.query_one(f"#color-{name}-label", Label).update(Text(render_str(localizer, definition.bind())))
+        self._show_error(self._error_message)
+
+    def _show_error(self, message: MessageDef | None) -> None:
+        self._error_message = message
+        self.query_one("#color-error", Label).update(
+            Text(render_str(widget_localizer(self), message.bind()) if message is not None else "")
+        )
+
+    def _values(self) -> dict[str, str]:
+        r, g, b = self.state.color.rgb
+        return {
+            "r": str(r),
+            "g": str(g),
+            "b": str(b),
+            "h": f"{self.state.hue * 360:.2f}".rstrip("0").rstrip(".") or "0",
+            "s": f"{self.state.saturation * 100:.2f}".rstrip("0").rstrip(".") or "0",
+            "v": f"{self.state.color.hsv.v * 100:.2f}".rstrip("0").rstrip(".") or "0",
+            "a": f"{self.state.color.a * 100:.2f}".rstrip("0").rstrip(".") or "0",
+        }
+
+    def _publish(self, value: ColorValue, *, source: str | None = None) -> None:
+        if not self.allow_alpha and (value.color.a != 1 or value.color.ansi is not None):
+            self._set_valid(False)
+            self._show_error(_OPAQUE)
+            return
+        old = self.state
+        self.state = value
+        self._set_valid(True)
+        self._show_error(None)
+        values = {"color-expression": value.expression, **{f"channel-{k}": v for k, v in self._values().items()}}
+        with self.prevent(Input.Changed):
+            for control in self.query(Input):
+                if control.id != source:
+                    control.value = values[control.id or ""]
+                self._input_values[control.id or ""] = control.value
+        for plane in self.query(ColorPlane):
+            plane.set_value(value)
+        comparison = self.query_one(ColorComparison)
+        if comparison.color != value.color:
+            comparison.color = value.color
+            comparison.refresh()
+        if old.expression != value.expression:
+            self.post_message(self.Changed(self, value.expression))
+
+    def _set_valid(self, valid: bool) -> None:
+        if valid != self.valid:
+            self.valid = valid
+            self.post_message(self.ValidityChanged(self))
+
+    @on(ColorPlane.Adjusted)
+    def _plane_adjusted(self, event: ColorPlane.Adjusted) -> None:
+        event.stop()
+        self._publish(event.value)
+
+    @on(Input.Changed)
+    def _input_changed(self, event: Input.Changed) -> None:
+        event.stop()
+        if not self.is_mounted or event.value != event.input.value:
+            return
+        control_id = event.input.id or ""
+        if self._input_values.get(control_id) == event.value:
+            return
+        self._input_values[control_id] = event.value
+        value = None
+        if control_id == "color-expression":
+            value = self.state.with_expression(event.value)
+        else:
+            # Each channel changes independently; typing a partial number never
+            # forces the other six fields through rounded display values.
+            try:
+                number = float(event.value)
+            except ValueError:
+                number = math.nan
+            channel = control_id.removeprefix("channel-")
+            limit = 255 if channel in {"r", "g", "b"} else 360 if channel == "h" else 100
+            if math.isfinite(number) and 0 <= number <= limit:
+                if channel in {"r", "g", "b"} and number.is_integer():
+                    rgb = dict(zip(("r", "g", "b"), self.state.color.rgb, strict=True))
+                    rgb[channel] = int(number)
+                    value = self.state.with_rgb(rgb["r"], rgb["g"], rgb["b"], self.state.color.a)
+                elif channel == "a":
+                    value = self.state.with_alpha(number / 100)
+                elif channel in {"h", "s", "v"}:
+                    hsv = {"h": self.state.hue, "s": self.state.saturation, "v": self.state.color.hsv.v}
+                    hsv[channel] = number / limit
+                    value = self.state.with_hsv(hsv["h"], hsv["s"], hsv["v"])
+        if value is None:
+            self._set_valid(False)
+            message = _INVALID if control_id == "color-expression" else _RANGE
+            self._show_error(message)
+        else:
+            self._publish(value, source=control_id)
+
+    def restore_original(self) -> None:
+        """Restore the input exactly, including expressions and original precision."""
+        self._publish(self.original)
+
+
+__all__ = ["ColorEditContext", "ColorPicker", "ColorValue"]

chrys/app/tui/widgets/color_picker/controls.py

@@ -0,0 +1,171 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2026. All rights reserved.
+
+"""Keyboard and mouse surfaces for the Chrys color picker."""
+
+from __future__ import annotations
+
+from typing import ClassVar, Literal
+
+from rich.segment import Segment
+from rich.style import Style
+from textual import events
+from textual.binding import Binding
+from textual.color import Color
+from textual.message import Message
+from textual.strip import Strip
+from textual.widget import Widget
+
+from .model import ColorValue
+
+Axis = Literal["sv", "hue", "alpha"]
+
+
+class ColorPlane(Widget, can_focus=True):
+    """A focusable color surface with bounded dragging, including outside its bounds."""
+
+    ALLOW_SELECT = False
+    DEFAULT_CSS = """
+    ColorPlane {
+        height: 3;
+        border: blank $tui-border-foreground;
+        &:focus { border: solid $tui-border-foreground; }
+        &.sv { height: 12; }
+    }
+    """
+    BINDINGS: ClassVar[list[Binding]] = [
+        Binding("left", "step(-1, 0, 1)", show=False),
+        Binding("right", "step(1, 0, 1)", show=False),
+        Binding("up", "step(0, -1, 1)", show=False),
+        Binding("down", "step(0, 1, 1)", show=False),
+        Binding("shift+left", "step(-1, 0, 10)", show=False),
+        Binding("shift+right", "step(1, 0, 10)", show=False),
+        Binding("shift+up", "step(0, -1, 10)", show=False),
+        Binding("shift+down", "step(0, 1, 10)", show=False),
+        Binding("home", "edge(0)", show=False),
+        Binding("end", "edge(1)", show=False),
+    ]
+
+    class Adjusted(Message):
+        """A user edit; rendering and initialization never emit this message."""
+
+        def __init__(self, plane: ColorPlane, value: ColorValue) -> None:
+            super().__init__()
+            self.plane = plane
+            self.value = value
+
+    def __init__(self, axis: Axis, value: ColorValue, *, id: str) -> None:
+        super().__init__(id=id, classes=axis)
+        self.axis = axis
+        self.value = value
+        self._dragging = False
+
+    def set_value(self, value: ColorValue) -> None:
+        if value != self.value:
+            self.value = value
+            self.refresh()
+
+    def _coordinates(self) -> tuple[float, float]:
+        if self.axis == "sv":
+            return self.value.saturation, 1 - self.value.color.hsv.v
+        return (self.value.hue if self.axis == "hue" else self.value.color.a), 0.5
+
+    def _edit(self, x: float, y: float) -> None:
+        x, y = max(0.0, min(1.0, x)), max(0.0, min(1.0, y))
+        if self.axis == "sv":
+            value = self.value.with_hsv(self.value.hue, x, 1 - y)
+        elif self.axis == "hue":
+            value = self.value.with_hsv(x, self.value.saturation, self.value.color.hsv.v)
+        else:
+            value = self.value.with_alpha(x)
+        if value != self.value:
+            self.set_value(value)
+            self.post_message(self.Adjusted(self, value))
+
+    def action_step(self, dx: int, dy: int, multiplier: int) -> None:
+        x, y = self._coordinates()
+        if self.axis == "sv":
+            self._edit(x + dx * multiplier / 100, y + dy * multiplier / 100)
+        else:
+            self._edit(x + (dx - dy) * multiplier / (360 if self.axis == "hue" else 100), y)
+
+    def action_edge(self, edge: int) -> None:
+        self._edit(edge, self._coordinates()[1])
+
+    def _edit_at_mouse(self, event: events.MouseEvent) -> None:
+        region = self.content_region
+        self._edit(
+            (event.screen_x - region.x) / max(1, region.width - 1),
+            (event.screen_y - region.y) / max(1, region.height - 1),
+        )
+
+    def on_mouse_down(self, event: events.MouseDown) -> None:
+        if event.button != 1:
+            return
+        event.stop()
+        event.prevent_default()
+        self.focus()
+        self._dragging = True
+        self.capture_mouse()
+        self._edit_at_mouse(event)
+
+    def on_mouse_move(self, event: events.MouseMove) -> None:
+        if self._dragging:
+            event.stop()
+            self._edit_at_mouse(event)
+
+    def on_mouse_up(self, event: events.MouseUp) -> None:
+        if self._dragging:
+            event.stop()
+            self._edit_at_mouse(event)
+            self._dragging = False
+            self.release_mouse()
+
+    def on_blur(self) -> None:
+        if self._dragging:
+            self._dragging = False
+            self.release_mouse()
+
+    def on_unmount(self) -> None:
+        self.on_blur()
+
+    def render_line(self, y: int) -> Strip:
+        width, height = self.content_size
+        point_x, point_y = self._coordinates()
+        cursor = round(point_x * max(0, width - 1)), round(point_y * max(0, height - 1))
+        segments: list[Segment] = []
+        for x in range(width):
+            fraction = x / max(1, width - 1)
+            if self.axis == "sv":
+                color = Color.from_hsv(self.value.hue, fraction, 1 - y / max(1, height - 1))
+            elif self.axis == "hue":
+                color = Color.from_hsv(fraction, 1, 1)
+            else:
+                tile = Color(190, 190, 190) if (x // 2 + y) % 2 else Color(90, 90, 90)
+                color = tile.blend(self.value.color.with_alpha(1), fraction)
+            style = Style(color=color.get_contrast_text().with_alpha(1).rich_color, bgcolor=color.rich_color)
+            segments.append(Segment("◆" if (x, y) == cursor else " ", style))
+        return Strip(segments)
+
+
+class ColorComparison(Widget):
+    """Original and candidate over checkerboard and the caller's real background."""
+
+    ALLOW_SELECT = False
+    DEFAULT_CSS = "ColorComparison { height: 3; }"
+
+    def __init__(self, original: Color, background: Color) -> None:
+        super().__init__()
+        self.original = original
+        self.color = original
+        self.background = background
+
+    def render_line(self, y: int) -> Strip:
+        width = self.content_size.width
+        segments: list[Segment] = []
+        for x in range(width):
+            color = self.original if x < width // 2 else self.color
+            tile = Color(180, 180, 180) if (x // 2 + y) % 2 else Color(80, 80, 80)
+            background = tile if y < 2 else self.background
+            composed = background.blend(color.with_alpha(1), color.a)
+            segments.append(Segment(" ", Style(bgcolor=composed.rich_color)))
+        return Strip(segments)

chrys/app/tui/widgets/color_picker/model.py

@@ -0,0 +1,89 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2026. All rights reserved.
+
+"""Lossless input expressions and explicitly edited RGB/HSV values."""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+
+from textual.color import Color, ColorParseError
+
+
+@dataclass(frozen=True)
+class ColorEditContext:
+    """Opaque caller correlation, carried unchanged on every edit message."""
+
+    document: str
+    field: str
+    transaction: str
+
+
+def parse_color(value: str) -> Color | None:
+    """Return a concrete color, leaving automatic CSS expressions to the caller."""
+    try:
+        color = Color.parse(value)
+    except ColorParseError:
+        return None
+    return None if color.auto else color
+
+
+def _edited_expression(color: Color) -> str:
+    if color.a == 1:
+        return color.hex
+    # Numeric opacity should not silently truncate to an 8-bit HEX alpha.
+    alpha = f"{color.a:.16f}".rstrip("0").rstrip(".")
+    return f"rgba({color.r}, {color.g}, {color.b}, {alpha})"
+
+
+@dataclass(frozen=True)
+class ColorValue:
+    """Keep the original spelling until the user actually changes the color.
+
+    Hue is independent of RGB so black and gray do not erase a hue selection.
+    Previewing an expression never serializes it through an RGB approximation.
+    """
+
+    expression: str
+    color: Color
+    hue: float
+    saturation: float
+
+    @classmethod
+    def from_expression(cls, expression: str, *, seed: Color | None = None) -> ColorValue:
+        color = parse_color(expression) or seed or Color(255, 255, 255)
+        hsv = color.hsv
+        return cls(expression, color, hsv.h, hsv.s)
+
+    def with_expression(self, expression: str) -> ColorValue | None:
+        if expression == self.expression:
+            return self
+        color = parse_color(expression)
+        if color is None:
+            return None
+        hsv = color.hsv
+        return ColorValue(expression, color, hsv.h if hsv.s and hsv.v else self.hue, hsv.s)
+
+    def with_rgb(self, red: int, green: int, blue: int, alpha: float) -> ColorValue:
+        color = Color(red, green, blue, alpha).clamped
+        if color == self.color:
+            return self
+        hsv = color.hsv
+        return ColorValue(_edited_expression(color), color, hsv.h if hsv.s and hsv.v else self.hue, hsv.s)
+
+    def with_hsv(self, hue: float, saturation: float, value: float) -> ColorValue:
+        hue = max(0.0, min(1.0, hue))
+        saturation = max(0.0, min(1.0, saturation))
+        value = max(0.0, min(1.0, value))
+        if (hue, saturation, value) == (self.hue, self.saturation, self.color.hsv.v):
+            return self
+        color = Color.from_hsv(hue, saturation, value).with_alpha(self.color.a)
+        # Selecting a hue while black is meaningful, but isn't a color edit yet.
+        expression = self.expression if color == self.color else _edited_expression(color)
+        return ColorValue(expression, color, hue, saturation)
+
+    def with_alpha(self, alpha: float) -> ColorValue:
+        alpha = max(0.0, min(1.0, alpha))
+        if alpha == self.color.a:
+            return self
+        color = self.color.with_alpha(alpha)
+        return ColorValue(_edited_expression(color), color, self.hue, self.saturation)

chrys/app/tui/widgets/dialog_buttons.py

@@ -0,0 +1,58 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2026. All rights reserved.
+
+"""Shared dialog button rows."""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+from typing import TYPE_CHECKING, Literal
+
+from rich.text import Text
+from textual.containers import HorizontalGroup
+from textual.content import Content
+from textual.widgets import Button
+
+if TYPE_CHECKING:
+    from textual.app import ComposeResult
+
+
+@dataclass(frozen=True, slots=True)
+class DialogButtonSpec:
+    """Button configuration for :class:`DialogButtonRow`."""
+
+    label: Content | Text | str
+    id: str
+    variant: Literal["default", "primary", "success", "warning", "error"] = "primary"
+    flat: bool = True
+    disabled: bool = False
+
+
+class DialogButtonRow(HorizontalGroup):
+    """Standard docked button row used by modal dialogs."""
+
+    DEFAULT_CSS = """
+    DialogButtonRow {
+        dock: bottom;
+        align: center top;
+        height: 3;
+        padding: 0 1;
+    }
+
+    DialogButtonRow > Button {
+        margin: 0 1;
+    }
+    """
+
+    def __init__(self, *buttons: DialogButtonSpec, id: str | None = None, classes: str | None = None) -> None:
+        super().__init__(id=id, classes=classes)
+        self._buttons = buttons
+
+    def compose(self) -> ComposeResult:
+        for button in self._buttons:
+            yield Button(
+                button.label,
+                id=button.id,
+                variant=button.variant,
+                flat=button.flat,
+                disabled=button.disabled,
+            )

chrys/app/tui/widgets/dialog_scroll.py

@@ -0,0 +1,24 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2026. All rights reserved.
+
+"""Shared scrollable body for auto-height dialogs."""
+
+from __future__ import annotations
+
+from textual.containers import VerticalScroll
+
+
+class StableAutoHeightScroll(VerticalScroll):
+    """Auto-height dialog body whose content width is stable as scrolling toggles."""
+
+    DEFAULT_CSS = """
+    StableAutoHeightScroll {
+        width: 100%;
+        height: auto;
+        max-height: 1fr;
+        overflow-y: auto;
+        /* Keep wrapped content from changing height when the scrollbar appears. */
+        padding: 0 0 0 1;
+        scrollbar-size: 1 1;
+        scrollbar-gutter: stable;
+    }
+    """

chrys/app/tui/widgets/diff_view/__init__.py

@@ -0,0 +1,20 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2026. All rights reserved.
+
+"""Diff widgets: two texts compared, with syntax highlighting and the edits within lines marked.
+
+`DiffView` is the viewer, split or unified, scrolling under its own scrollbars and drawing only
+the rows on screen. `chrys.app.tui.widgets.diff_view.inline` has the single-widget unified diff
+that the chat embeds.
+"""
+
+from chrys.app.tui.widgets.diff_view.code import CodeColumn
+from chrys.app.tui.widgets.diff_view.gutter import GutterColumn
+from chrys.app.tui.widgets.diff_view.protocols import SupportsPrepare
+from chrys.app.tui.widgets.diff_view.widget import DiffView
+
+__all__ = [
+    "CodeColumn",
+    "DiffView",
+    "GutterColumn",
+    "SupportsPrepare",
+]

chrys/app/tui/widgets/diff_view/cells.py

@@ -0,0 +1,59 @@
+# Copyright (c) Huawei Technologies Co., Ltd. 2026. All rights reserved.
+
+"""What stands beside a line of code: its number and its annotation.
+
+These are plain functions of a row and the look of the app. The gutter columns of the scrolling
+diff and the single-widget diff of the chat both draw with them, so the two cannot drift apart.
+"""
+
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from textual.content import Content
+
+from chrys.app.tui.widgets import HATCH_GLYPH
+from chrys.app.tui.widgets.diff_view.rows import RowKind
+
+if TYPE_CHECKING:
+    from chrys.app.tui.widgets.diff_view.palette import DiffLook
+    from chrys.app.tui.widgets.diff_view.rows import DiffRow, Side
+
+EDGE = "▎"
+ANNOTATIONS = {RowKind.ADDED: "+", RowKind.REMOVED: "-"}
+ANNOTATION_WIDTH = 3
+"""A ``+`` or ``-`` with a space on either side."""
+COLLAPSED_ANNOTATION_WIDTH = 1
+"""What is left of the cell when annotations are switched off: the space ahead of the code."""
+
+
+def number_cell_width(digits: int) -> int:
+    """The width of a number cell: the edge or a space, the digits, and a space."""
+    return digits + 2
+
+
+def number_cell(row: DiffRow, look: DiffLook, *, side: Side, digits: int, edge: bool) -> Content:
+    """The line number of ``row`` in the text of ``side``, right-aligned in ``digits`` columns.
+
+    With ``edge`` the cell opens with a bar in the color of the row's kind, which also shows on a
+    row that has no number on this side.
+    """
+    if row.is_placeholder:
+        return Content.styled(HATCH_GLYPH * number_cell_width(digits), look.hatch)
+    number = row.number(side)
+    cell = Content(f"{EDGE if edge else ' '}{'' if number is None else number:>{digits}} ")
+    if number is not None:
+        cell = cell.stylize(look.palette.number[row.kind], 1 if edge else 0)
+    if edge:
+        cell = cell.stylize(look.palette.edge[row.kind], 0, 1)
+    return cell
+
+
+def annotation_cell(row: DiffRow, look: DiffLook) -> Content:
+    """The ``+`` or ``-`` of a changed row on the background of its line; blank for any other row."""
+    if row.is_placeholder:
+        return Content.styled(HATCH_GLYPH * ANNOTATION_WIDTH, look.hatch)
+    annotation = ANNOTATIONS.get(row.kind)
+    if annotation is None:
+        return Content(" " * ANNOTATION_WIDTH)
+    return Content(f" {annotation} ").stylize(look.line_style(row.kind)).stylize("bold")