@oh-my-pi/pi-tui 17.3.8 → 17.4.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## [Unreleased]
 
+## [17.4.0] - 2026-08-20
+
+### Added
+
+- Added composer border styles (`box`, `claude`, `pi`, `borderless`) via `ComposerStyle` objects and `getComposerStyle`, unifying chrome geometry and rendering across the editor and previews.
+- Added support for warning risk notes and row markers in settings lists.
+
 ## [17.3.8] - 2026-08-19
 
 ### Fixed

package/dist/types/components/composer/borderless.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Chrome-free composer: a bare `❯ ` prompt with no rules or borders. Also the
+ * effective style whenever a host calls `setBorderVisible(false)` (hook
+ * editors, agents hub). The status bar renders as a plain standalone bottom
+ * bar with both segment groups.
+ */
+import type { ComposerStyle } from "./types.js";
+export declare const borderlessComposerStyle: ComposerStyle;

package/dist/types/components/composer/box.d.ts

@@ -0,0 +1,2 @@
+import type { ComposerStyle } from "./types.js";
+export declare const boxComposerStyle: ComposerStyle;

package/dist/types/components/composer/claude.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Claude Code-like composer: full-width horizontal rules above and below a
+ * borderless `❯ ` prompt. The right status group rides the top rule as a
+ * bg chip near the right edge (`─────── hi ─`); the left group renders as a
+ * plain standalone bottom bar that yields its row to the autocomplete menu.
+ */
+import type { ComposerStyle } from "./types.js";
+export declare const claudeComposerStyle: ComposerStyle;

package/dist/types/components/composer/field.d.ts

@@ -0,0 +1,3 @@
+import type { ComposerStyle } from "./types.js";
+/** One-row filled field with accent caps. */
+export declare const fieldComposerStyle: ComposerStyle;

package/dist/types/components/composer/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./borderless.js";
+export * from "./box.js";
+export * from "./claude.js";
+export * from "./field.js";
+export * from "./pi.js";
+export * from "./rail.js";
+export * from "./registry.js";
+export * from "./rule.js";
+export * from "./types.js";

package/dist/types/components/composer/pi.d.ts

@@ -0,0 +1,2 @@
+import type { ComposerStyle } from "./types.js";
+export declare const piComposerStyle: ComposerStyle;

package/dist/types/components/composer/rail.d.ts

@@ -0,0 +1,3 @@
+import type { ComposerStyle } from "./types.js";
+/** Filled composer surface anchored by a single left accent rail. */
+export declare const railComposerStyle: ComposerStyle;

package/dist/types/components/composer/registry.d.ts

@@ -0,0 +1,12 @@
+import type { ComposerStyle, EditorBorderStyle } from "./types.js";
+/** Whether an id names a composer style shipped by pi-tui. */
+export declare function isBuiltinComposerStyle(id: string): boolean;
+/**
+ * Register one extension-owned composer style for this process.
+ *
+ * Built-in ids and duplicate extension ids are rejected. The returned disposer
+ * removes only this registration.
+ */
+export declare function registerComposerStyle(style: ComposerStyle): () => void;
+/** Style object for a composer shape; unknown ids fall back to `box`. */
+export declare function getComposerStyle(id: EditorBorderStyle): ComposerStyle;

package/dist/types/components/composer/rule.d.ts

@@ -0,0 +1,7 @@
+import type { ComposerChromeContext, ComposerStyle } from "./types.js";
+/** Draw a full-width rule with status content docked at its right edge.
+ * Over-wide content is truncated (keeping one rule cell on each side) rather
+ * than dropped, so the chip survives narrow terminals and previews. */
+export declare function renderTopRule(ctx: ComposerChromeContext): string;
+/** Composer style with one status-bearing top rule and no bottom chrome. */
+export declare const ruleComposerStyle: ComposerStyle;

package/dist/types/components/composer/types.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Composer chrome contract. A {@link ComposerStyle} owns everything about how
+ * the input editor's frame looks — top/bottom chrome, per-row side chrome,
+ * default padding and prompt gutter — plus metadata telling the host where the
+ * status bar attaches. The editor, the /settings preview, and the setup-wizard
+ * preview all render through the same style object, so the three surfaces can
+ * never drift apart.
+ */
+import type { SymbolTheme } from "../../symbols.js";
+/** Box-drawing glyph set used for composer chrome (the theme's `boxRound`). */
+export type ComposerBox = SymbolTheme["boxRound"];
+/** Built-in composer shape identifiers shipped by pi-tui. */
+export declare const BUILTIN_EDITOR_BORDER_STYLES: readonly ["box", "claude", "pi", "borderless", "rule", "field", "rail"];
+/** Identifier for a built-in composer shape. */
+export type BuiltinEditorBorderStyle = (typeof BUILTIN_EDITOR_BORDER_STYLES)[number];
+/** Composer shape identifier; extensions may register additional strings. */
+export type EditorBorderStyle = string;
+/** Pre-rendered status content injected into the top chrome. */
+export interface EditorTopBorder {
+    /** The status content (already styled) */
+    content: string;
+    /** Visible width of the content */
+    width: number;
+    /** Optional logical revision that changes independently of available width. */
+    revision?: number;
+}
+/** Inputs shared by every chrome row. */
+export interface ComposerChromeContext {
+    /** Full terminal width available to the composer. */
+    width: number;
+    /** Horizontal padding inside the side chrome. */
+    paddingX: number;
+    borderColor: (str: string) => string;
+    /** Stable accent used by shape-defining chrome such as field caps and rails. */
+    accentColor: (str: string) => string;
+    /** Background fill for composer surfaces; preserves the fill across nested SGR resets. */
+    surfaceColor: (str: string) => string;
+    /** Box-drawing glyph set (theme's `boxRound`). */
+    box: ComposerBox;
+    /** Status content for the top chrome; box embeds it after the corner while
+     * rule-based styles dock it against the right edge. */
+    topBorder?: EditorTopBorder;
+}
+/** Inputs for one content row. */
+export interface ComposerRowContext extends ComposerChromeContext {
+    /** Fully decorated row text (cursor glyph / IME marker included). */
+    text: string;
+    /** Spaces padding the text out to the content width. */
+    pad: string;
+    /** Prompt gutter cells for this row ("" when the style has none). */
+    gutter: string;
+    isLastRow: boolean;
+    /** Cells the end-of-line cursor overflowed into the right chrome (box). */
+    cursorOverflow: number;
+    /** Emit an empty right chrome after the cursor so terminal-local IME
+     *  preedit cannot shift the frame (box last row). */
+    imeSafeCursorTail: boolean;
+    /** Row lies inside the right-border scrollbar thumb (box). */
+    scrollbarThumb: boolean;
+}
+export interface ComposerStyle {
+    readonly id: EditorBorderStyle;
+    /** Content rows carry left/right border glyphs; drives the cursor-reserve
+     *  column, IME-safe layout, and the right-border scrollbar. */
+    readonly sideBorders: boolean;
+    /** Rows consumed by top+bottom chrome (drives maxHeight budgeting). */
+    readonly verticalChrome: 0 | 1 | 2;
+    /** Where the host should attach the status bar: embedded in the top border,
+     * docked onto a top rule, or detached into a standalone bottom bar. */
+    readonly statusAttachment: "top-border" | "top-rule-chip" | "none";
+    /** Which segment groups the standalone bottom status bar shows. */
+    readonly bottomBar: "none" | "left" | "full";
+    /** Insert a blank spacer row between the editor and the standalone bottom
+     * bar. Styles without bottom chrome need it so the bar doesn't sit flush
+     * against the last input row. */
+    readonly bottomBarGap: boolean;
+    /** Default prompt gutter when the host sets none. */
+    readonly defaultPromptGutter: string | undefined;
+    /** Default horizontal padding; `themePaddingX` is the theme's request. */
+    defaultPaddingX(themePaddingX: number | undefined): number;
+    /** Cells consumed per side on content rows (border glyph + padding). */
+    sideChromeWidth(paddingX: number): number;
+    /** Top chrome row; `undefined` renders none. */
+    renderTop(ctx: ComposerChromeContext): string | undefined;
+    /** Chrome-wrapped content row; box's IME-safe last row emits two rows. */
+    renderRow(ctx: ComposerRowContext): string[];
+    /** Bottom chrome row; `undefined` renders none (box merges the bottom
+     *  border into its last content row). */
+    renderBottom(ctx: ComposerChromeContext): string | undefined;
+}

package/dist/types/components/editor.d.ts

@@ -1,23 +1,21 @@
 import { type AutocompleteProvider } from "../autocomplete.js";
 import type { SymbolTheme } from "../symbols.js";
 import { type Component, type Focusable } from "../tui.js";
+import { type EditorBorderStyle, type EditorTopBorder } from "./composer/index.js";
+export type { EditorBorderStyle, EditorTopBorder };
 import { type SelectListTheme } from "./select-list.js";
 export interface EditorTheme {
     borderColor: (str: string) => string;
+    /** Stable accent for composer chrome that should not follow the mutable border state. */
+    accentColor?: (str: string) => string;
+    /** Background fill used by filled composer styles. */
+    surfaceColor?: (str: string) => string;
     selectList: SelectListTheme;
     symbols: SymbolTheme;
     editorPaddingX?: number;
     /** Style function for inline hint/ghost text (dim text after cursor) */
     hintStyle?: (text: string) => string;
 }
-export interface EditorTopBorder {
-    /** The status content (already styled) */
-    content: string;
-    /** Visible width of the content */
-    width: number;
-    /** Optional logical revision that changes independently of available width. */
-    revision?: number;
-}
 interface HistoryEntry {
     prompt: string;
 }
@@ -86,6 +84,10 @@ export declare class Editor implements Component, Focusable {
      */
     setBorderVisible(borderVisible: boolean): void;
     setPromptGutter(promptGutter: string | undefined): void;
+    getBorderStyle(): EditorBorderStyle;
+    setBorderStyle(style: EditorBorderStyle): void;
+    /** True while the autocomplete/slash-command menu is open below the editor. */
+    isAutocompleteActive(): boolean;
     /**
      * Get the available width for top border content given a total terminal width.
      * Accounts for the border characters and horizontal padding when visible.
@@ -163,4 +165,3 @@ export declare class Editor implements Component, Focusable {
     insertPaste(content: string): void;
     isShowingAutocomplete(): boolean;
 }
-export {};

package/dist/types/components/settings-list.d.ts

@@ -7,6 +7,8 @@ export interface SettingItem {
     label: string;
     /** Optional description shown when selected */
     description?: string;
+    /** Optional risk note shown in warning styling above the description, with a glyph on the row. */
+    warning?: string;
     /** Current value to display (right side) */
     currentValue: string;
     /** If provided, Enter/Space cycles through these values */
@@ -22,6 +24,10 @@ export interface SettingsListTheme {
     label: (text: string, selected: boolean, changed: boolean) => string;
     value: (text: string, selected: boolean, changed: boolean) => string;
     description: (text: string) => string;
+    /** Style for risk notes and the row warning glyph. Falls back to `description` when omitted. */
+    warning?: (text: string) => string;
+    /** Glyph marking rows that carry a `warning`. Omitted hides the row marker. */
+    warningMark?: string;
     cursor: string;
     hint: (text: string) => string;
     /** Style for section heading rows (dimmed when outside the active section). Falls back to `hint` when omitted. */
@@ -55,7 +61,7 @@ export interface SettingsListOptions {
     /** Fixed split-sidebar width (columns incl. indent+gap); default derives from section names. */
     sidebarWidth?: number;
 }
-/** Searchable text for a setting item: label, id, value, description, and cycle values. */
+/** Searchable text for a setting item: label, id, value, description, warning, and cycle values. */
 export declare function getSettingItemFilterText(item: SettingItem): string;
 export declare class SettingsList implements Component {
     #private;

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./autocomplete.js";
 export * from "./components/box.js";
 export * from "./components/cancellable-loader.js";
+export * from "./components/composer/index.js";
 export * from "./components/editor.js";
 export * from "./components/image.js";
 export * from "./components/input.js";

package/dist/types/utils.d.ts

@@ -47,7 +47,6 @@ export declare function getSegmenter(): Intl.Segmenter;
  */
 export declare function visibleWidth(str: string): number;
 /**
- * True when a row carries a Kitty OSC 66 text-sizing span (`\x1b]66;…`).
  * Scaled spans must bypass wrapping/padding and, when scaled up, reserve the
  * terminal rows their multicell glyphs flow into.
  */

package/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "@oh-my-pi/pi-tui",
-	"version": "17.3.8",
+	"version": "17.4.0",
 	"description": "Terminal User Interface library with differential rendering for efficient text-based applications",
 	"homepage": "https://omp.sh",
 	"author": "Can Boluk",
@@ -37,8 +37,8 @@
 		"fmt": "biome format --write ."
 	},
 	"dependencies": {
-		"@oh-my-pi/pi-natives": "17.3.8",
-		"@oh-my-pi/pi-utils": "17.3.8"
+		"@oh-my-pi/pi-natives": "17.4.0",
+		"@oh-my-pi/pi-utils": "17.4.0"
 	},
 	"devDependencies": {
 		"ghostty-web": "^0.4.0"

package/src/components/composer/borderless.ts

@@ -0,0 +1,37 @@
+/**
+ * Chrome-free composer: a bare `❯ ` prompt with no rules or borders. Also the
+ * effective style whenever a host calls `setBorderVisible(false)` (hook
+ * editors, agents hub). The status bar renders as a plain standalone bottom
+ * bar with both segment groups.
+ */
+import type { ComposerRowContext, ComposerStyle } from "./types";
+
+export const borderlessComposerStyle: ComposerStyle = {
+	id: "borderless",
+	sideBorders: false,
+	verticalChrome: 0,
+	statusAttachment: "none",
+	bottomBar: "full",
+	bottomBarGap: false,
+	defaultPromptGutter: "❯ ",
+
+	defaultPaddingX(): number {
+		return 0;
+	},
+
+	sideChromeWidth(): number {
+		return 0;
+	},
+
+	renderTop(): undefined {
+		return undefined;
+	},
+
+	renderRow(ctx: ComposerRowContext): string[] {
+		return [ctx.gutter + ctx.text + ctx.pad];
+	},
+
+	renderBottom(): undefined {
+		return undefined;
+	},
+};

package/src/components/composer/box.ts

@@ -0,0 +1,85 @@
+/**
+ * The classic omp composer: rounded frame, status line embedded in the top
+ * border, and the last content row merged into the bottom border
+ * (`╰─ text … ─╯`), keeping a one-line prompt at two rows total.
+ */
+import { padding, truncateToWidth, visibleWidth } from "../../utils";
+import type { ComposerChromeContext, ComposerRowContext, ComposerStyle } from "./types";
+
+export const boxComposerStyle: ComposerStyle = {
+	id: "box",
+	sideBorders: true,
+	verticalChrome: 2,
+	statusAttachment: "top-border",
+	bottomBar: "none",
+	bottomBarGap: false,
+	defaultPromptGutter: undefined,
+
+	defaultPaddingX(themePaddingX: number | undefined): number {
+		return Math.max(0, themePaddingX ?? 2);
+	},
+
+	sideChromeWidth(paddingX: number): number {
+		return paddingX + 1;
+	},
+
+	renderTop(ctx: ComposerChromeContext): string {
+		const { box, paddingX, width, borderColor, topBorder } = ctx;
+		const topLeft = borderColor(`${box.topLeft}${box.horizontal.repeat(paddingX)}`);
+		const topRight = borderColor(`${box.horizontal.repeat(paddingX)}${box.topRight}`);
+		const topFillWidth = Math.max(0, width - this.sideChromeWidth(paddingX) * 2);
+		if (!topBorder) {
+			return topLeft + borderColor(box.horizontal.repeat(topFillWidth)) + topRight;
+		}
+		const { content, width: statusWidth } = topBorder;
+		if (statusWidth <= topFillWidth) {
+			// Status fits - add fill after it
+			const fillWidth = topFillWidth - statusWidth;
+			return topLeft + content + borderColor(box.horizontal.repeat(fillWidth)) + topRight;
+		}
+		// Status too long - truncate it
+		const truncated = truncateToWidth(content, Math.max(0, topFillWidth - 1));
+		const truncatedWidth = visibleWidth(truncated);
+		const fillWidth = Math.max(0, topFillWidth - truncatedWidth);
+		return topLeft + truncated + borderColor(box.horizontal.repeat(fillWidth)) + topRight;
+	},
+
+	renderRow(ctx: ComposerRowContext): string[] {
+		const { box, paddingX, width, borderColor, text, pad, isLastRow } = ctx;
+		// When the end-of-line cursor glyph (or a wide trailing grapheme) extends
+		// past the content width, shrink the right chrome by the exact overflow
+		// count: drop padding spaces first, then the trailing `─`, but never the
+		// corner/vertical bar itself.
+		const rightChromeCells = Math.max(1, paddingX + 1 - ctx.cursorOverflow);
+		if (isLastRow && ctx.imeSafeCursorTail) {
+			// Terminal frontends render IME marked text locally before committed
+			// bytes reach the application. Keep the end-of-input cursor row empty
+			// to its right so insertion cannot shift box chrome onto the next row.
+			const leftBorder = borderColor(`${box.vertical}${padding(paddingX)}`);
+			const bottomBorder = borderColor(
+				`${box.bottomLeft}${box.horizontal.repeat(Math.max(0, width - 2))}${box.bottomRight}`,
+			);
+			return [leftBorder + text, bottomBorder];
+		}
+		if (isLastRow) {
+			const bottomLeft = borderColor(`${box.bottomLeft}${box.horizontal}${padding(Math.max(0, paddingX - 1))}`);
+			const rightPad = Math.max(0, rightChromeCells - 2);
+			const includeHorizontal = rightChromeCells >= 2;
+			const bottomRightAdjusted = borderColor(
+				`${padding(rightPad)}${includeHorizontal ? box.horizontal : ""}${box.bottomRight}`,
+			);
+			return [`${bottomLeft}${text}${pad}${bottomRightAdjusted}`];
+		}
+		const leftBorder = borderColor(`${box.vertical}${padding(paddingX)}`);
+		// When the scrollbar is active, replace the right border vertical with a
+		// thumb glyph (█) inside the thumb range, keeping the track (│) elsewhere.
+		const rightGlyph = ctx.scrollbarThumb ? "█" : box.vertical;
+		const rightBorder = borderColor(`${padding(Math.max(0, rightChromeCells - 1))}${rightGlyph}`);
+		return [leftBorder + text + pad + rightBorder];
+	},
+
+	renderBottom(): undefined {
+		// The bottom border is merged into the last content row.
+		return undefined;
+	},
+};

package/src/components/composer/claude.ts

@@ -0,0 +1,39 @@
+/**
+ * Claude Code-like composer: full-width horizontal rules above and below a
+ * borderless `❯ ` prompt. The right status group rides the top rule as a
+ * bg chip near the right edge (`─────── hi ─`); the left group renders as a
+ * plain standalone bottom bar that yields its row to the autocomplete menu.
+ */
+
+import { renderTopRule } from "./rule";
+import type { ComposerChromeContext, ComposerRowContext, ComposerStyle } from "./types";
+
+export const claudeComposerStyle: ComposerStyle = {
+	id: "claude",
+	sideBorders: false,
+	verticalChrome: 2,
+	statusAttachment: "top-rule-chip",
+	bottomBar: "left",
+	bottomBarGap: false,
+	defaultPromptGutter: "❯ ",
+
+	defaultPaddingX(): number {
+		return 0;
+	},
+
+	sideChromeWidth(paddingX: number): number {
+		return paddingX;
+	},
+
+	renderTop(ctx: ComposerChromeContext): string {
+		return renderTopRule(ctx);
+	},
+
+	renderRow(ctx: ComposerRowContext): string[] {
+		return [ctx.gutter + ctx.text + ctx.pad];
+	},
+
+	renderBottom(ctx: ComposerChromeContext): string {
+		return ctx.borderColor(ctx.box.horizontal.repeat(ctx.width));
+	},
+};

package/src/components/composer/field.ts

@@ -0,0 +1,47 @@
+/**
+ * Compact filled composer: every input row is a one-line field with accent end
+ * caps and a subtle surface fill. The complete status line remains below it.
+ */
+import { padding } from "../../utils";
+import type { ComposerRowContext, ComposerStyle } from "./types";
+
+const LEFT_CAP = "▐";
+const RIGHT_CAP = "▌";
+
+/** One-row filled field with accent caps. */
+export const fieldComposerStyle: ComposerStyle = {
+	id: "field",
+	sideBorders: true,
+	verticalChrome: 0,
+	statusAttachment: "none",
+	bottomBar: "full",
+	bottomBarGap: true,
+	defaultPromptGutter: undefined,
+
+	defaultPaddingX(): number {
+		return 1;
+	},
+
+	sideChromeWidth(paddingX: number): number {
+		return paddingX + 1;
+	},
+
+	renderTop(): undefined {
+		return undefined;
+	},
+
+	renderRow(ctx: ComposerRowContext): string[] {
+		const left = ctx.accentColor(LEFT_CAP);
+		const leftFill = padding(ctx.paddingX) + ctx.gutter + ctx.text;
+		if (ctx.imeSafeCursorTail) return [left + ctx.surfaceColor(leftFill)];
+
+		const rightChromeCells = Math.max(1, ctx.paddingX + 1 - ctx.cursorOverflow);
+		const interior = leftFill + ctx.pad + padding(rightChromeCells - 1);
+		const rightGlyph = ctx.scrollbarThumb ? "█" : RIGHT_CAP;
+		return [left + ctx.surfaceColor(interior) + ctx.accentColor(rightGlyph)];
+	},
+
+	renderBottom(): undefined {
+		return undefined;
+	},
+};

package/src/components/composer/index.ts

@@ -0,0 +1,9 @@
+export * from "./borderless";
+export * from "./box";
+export * from "./claude";
+export * from "./field";
+export * from "./pi";
+export * from "./rail";
+export * from "./registry";
+export * from "./rule";
+export * from "./types";

package/src/components/composer/pi.ts

@@ -0,0 +1,37 @@
+/**
+ * Upstream-pi composer: full-width horizontal rules above and below plain
+ * padded text — no side borders, no prompt gutter. The status bar renders as
+ * a plain standalone bottom bar with both segment groups.
+ */
+import { padding } from "../../utils";
+import type { ComposerChromeContext, ComposerRowContext, ComposerStyle } from "./types";
+
+export const piComposerStyle: ComposerStyle = {
+	id: "pi",
+	sideBorders: false,
+	verticalChrome: 2,
+	statusAttachment: "none",
+	bottomBar: "full",
+	bottomBarGap: false,
+	defaultPromptGutter: undefined,
+
+	defaultPaddingX(): number {
+		return 1;
+	},
+
+	sideChromeWidth(paddingX: number): number {
+		return paddingX;
+	},
+
+	renderTop(ctx: ComposerChromeContext): string {
+		return ctx.borderColor(ctx.box.horizontal.repeat(ctx.width));
+	},
+
+	renderRow(ctx: ComposerRowContext): string[] {
+		return [padding(this.sideChromeWidth(ctx.paddingX)) + ctx.gutter + ctx.text + ctx.pad];
+	},
+
+	renderBottom(ctx: ComposerChromeContext): string {
+		return ctx.borderColor(ctx.box.horizontal.repeat(ctx.width));
+	},
+};

package/src/components/composer/rail.ts

@@ -0,0 +1,48 @@
+/**
+ * Filled composer with one strong accent rail on the left. The asymmetric
+ * silhouette separates input from transcript without enclosing it in a box.
+ */
+import { padding } from "../../utils";
+import type { ComposerRowContext, ComposerStyle } from "./types";
+
+const ACCENT_RAIL = "▎";
+
+/** Filled composer surface anchored by a single left accent rail. */
+export const railComposerStyle: ComposerStyle = {
+	id: "rail",
+	sideBorders: true,
+	verticalChrome: 0,
+	statusAttachment: "none",
+	bottomBar: "full",
+	bottomBarGap: true,
+	defaultPromptGutter: undefined,
+
+	defaultPaddingX(): number {
+		return 1;
+	},
+
+	sideChromeWidth(paddingX: number): number {
+		return paddingX + 1;
+	},
+
+	renderTop(): undefined {
+		return undefined;
+	},
+
+	renderRow(ctx: ComposerRowContext): string[] {
+		const rail = ctx.accentColor(ACCENT_RAIL);
+		const leftFill = padding(ctx.paddingX) + ctx.gutter + ctx.text;
+		if (ctx.imeSafeCursorTail) return [rail + ctx.surfaceColor(leftFill)];
+
+		const rightFillCells = Math.max(0, ctx.paddingX + 1 - ctx.cursorOverflow);
+		if (ctx.scrollbarThumb && rightFillCells > 0) {
+			const interior = leftFill + ctx.pad + padding(rightFillCells - 1);
+			return [rail + ctx.surfaceColor(interior) + ctx.accentColor("█")];
+		}
+		return [rail + ctx.surfaceColor(leftFill + ctx.pad + padding(rightFillCells))];
+	},
+
+	renderBottom(): undefined {
+		return undefined;
+	},
+};

package/src/components/composer/registry.ts

@@ -0,0 +1,46 @@
+import { borderlessComposerStyle } from "./borderless";
+import { boxComposerStyle } from "./box";
+import { claudeComposerStyle } from "./claude";
+import { fieldComposerStyle } from "./field";
+import { piComposerStyle } from "./pi";
+import { railComposerStyle } from "./rail";
+import { ruleComposerStyle } from "./rule";
+import type { ComposerStyle, EditorBorderStyle } from "./types";
+
+const BUILTIN_COMPOSER_STYLES: Readonly<Record<string, ComposerStyle>> = {
+	box: boxComposerStyle,
+	claude: claudeComposerStyle,
+	pi: piComposerStyle,
+	borderless: borderlessComposerStyle,
+	rule: ruleComposerStyle,
+	field: fieldComposerStyle,
+	rail: railComposerStyle,
+};
+const extensionComposerStyles = new Map<string, ComposerStyle>();
+
+/** Whether an id names a composer style shipped by pi-tui. */
+export function isBuiltinComposerStyle(id: string): boolean {
+	return Object.hasOwn(BUILTIN_COMPOSER_STYLES, id);
+}
+
+/**
+ * Register one extension-owned composer style for this process.
+ *
+ * Built-in ids and duplicate extension ids are rejected. The returned disposer
+ * removes only this registration.
+ */
+export function registerComposerStyle(style: ComposerStyle): () => void {
+	const id = style.id.trim();
+	if (id.length === 0 || id !== style.id) throw new TypeError("Composer style id must be a non-empty trimmed string");
+	if (isBuiltinComposerStyle(id)) throw new Error(`Cannot replace built-in composer style "${id}"`);
+	if (extensionComposerStyles.has(id)) throw new Error(`Composer style "${id}" is already registered`);
+	extensionComposerStyles.set(id, style);
+	return () => {
+		if (extensionComposerStyles.get(id) === style) extensionComposerStyles.delete(id);
+	};
+}
+
+/** Style object for a composer shape; unknown ids fall back to `box`. */
+export function getComposerStyle(id: EditorBorderStyle): ComposerStyle {
+	return extensionComposerStyles.get(id) ?? BUILTIN_COMPOSER_STYLES[id] ?? boxComposerStyle;
+}