@promptctl/rich-js 0.18.1 → 0.20.0

package/dist/widgets/slider.d.ts

@@ -20,7 +20,7 @@
 import { Segment } from "../core/segment.js";
 import { type RenderOptions } from "../core/protocol.js";
 import type { TerminalTheme } from "../core/color.js";
-import { WidgetBase } from "./widget-base.js";
+import { ThemedWidget } from "./themed-widget.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
 export interface SliderOptions {
     value?: number;
@@ -32,7 +32,7 @@ export interface SliderOptions {
     disabled?: boolean;
     theme?: TerminalTheme;
 }
-export declare class Slider extends WidgetBase {
+export declare class Slider extends ThemedWidget {
     readonly id: string;
     readonly focusable = true;
     accessor value: number;
@@ -40,10 +40,8 @@ export declare class Slider extends WidgetBase {
     accessor max: number;
     accessor step: number;
     accessor width: number;
-    private accessor _theme;
     private _dragging;
     constructor(options?: SliderOptions);
-    setTheme(theme: TerminalTheme): void;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     private setValue;
@@ -53,5 +51,4 @@ export declare class Slider extends WidgetBase {
         minimum: number;
         maximum: number;
     };
-    private resolvePalette;
 }

package/dist/widgets/slider.js

@@ -54,13 +54,12 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
 import { observable, action, observableRef } from "mobx";
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
-import { ColorSpec } from "../core/color.js";
-import { DEFAULT_TERMINAL_THEME } from "../themes/terminalThemes.js";
 import { drawable } from "../core/protocol.js";
-import { WidgetBase } from "./widget-base.js";
+import { ThemedWidget } from "./themed-widget.js";
+import { ink } from "./ink.js";
 const DEFAULT_WIDTH = 20;
 let Slider = (() => {
-    let _classSuper = WidgetBase;
+    let _classSuper = ThemedWidget;
     let _instanceExtraInitializers = [];
     let _value_decorators;
     let _value_initializers = [];
@@ -77,10 +76,6 @@ let Slider = (() => {
     let _width_decorators;
     let _width_initializers = [];
     let _width_extraInitializers = [];
-    let __theme_decorators;
-    let __theme_initializers = [];
-    let __theme_extraInitializers = [];
-    let _setTheme_decorators;
     let _handleKey_decorators;
     let _handleMouse_decorators;
     let _setValue_decorators;
@@ -92,8 +87,6 @@ let Slider = (() => {
             _max_decorators = [observableRef];
             _step_decorators = [observableRef];
             _width_decorators = [observableRef];
-            __theme_decorators = [observableRef];
-            _setTheme_decorators = [action];
             _handleKey_decorators = [action];
             _handleMouse_decorators = [action];
             _setValue_decorators = [action];
@@ -102,8 +95,6 @@ let Slider = (() => {
             __esDecorate(this, null, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
             __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
             __esDecorate(this, null, _width_decorators, { kind: "accessor", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
-            __esDecorate(this, null, __theme_decorators, { kind: "accessor", name: "_theme", static: false, private: false, access: { has: obj => "_theme" in obj, get: obj => obj._theme, set: (obj, value) => { obj._theme = value; } }, metadata: _metadata }, __theme_initializers, __theme_extraInitializers);
-            __esDecorate(this, null, _setTheme_decorators, { kind: "method", name: "setTheme", static: false, private: false, access: { has: obj => "setTheme" in obj, get: obj => obj.setTheme }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleKey_decorators, { kind: "method", name: "handleKey", static: false, private: false, access: { has: obj => "handleKey" in obj, get: obj => obj.handleKey }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _handleMouse_decorators, { kind: "method", name: "handleMouse", static: false, private: false, access: { has: obj => "handleMouse" in obj, get: obj => obj.handleMouse }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _setValue_decorators, { kind: "method", name: "setValue", static: false, private: false, access: { has: obj => "setValue" in obj, get: obj => obj.setValue }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -126,15 +117,9 @@ let Slider = (() => {
         #width_accessor_storage = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _width_initializers, void 0));
         get width() { return this.#width_accessor_storage; }
         set width(value) { this.#width_accessor_storage = value; }
-        #_theme_accessor_storage = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, __theme_initializers, void 0));
-        // [LAW:types-are-the-program] @observableRef so setTheme() triggers a
-        // re-render — render() reads _theme.palette, so the theme reference must
-        // participate in MobX reactivity for Screen's autorun to fire on swap.
-        get _theme() { return this.#_theme_accessor_storage; }
-        set _theme(value) { this.#_theme_accessor_storage = value; }
-        _dragging = (__runInitializers(this, __theme_extraInitializers), false);
+        _dragging = (__runInitializers(this, _width_extraInitializers), false);
         constructor(options = {}) {
-            super();
+            super(options.theme);
             this.id = options.id ?? `slider-${Math.random().toString(36).slice(2, 8)}`;
             this.min = options.min ?? 0;
             this.max = options.max ?? 100;
@@ -150,9 +135,7 @@ let Slider = (() => {
             this.width = width;
             this.value = clampSnap(options.value ?? this.min, this.min, this.max, this.step);
             this.disabled = options.disabled ?? false;
-            this._theme = options.theme ?? DEFAULT_TERMINAL_THEME;
         }
-        setTheme(theme) { this._theme = theme; }
         // --- Event handlers ---
         handleKey(event) {
             if (this.disabled)
@@ -225,14 +208,14 @@ let Slider = (() => {
             const markerIdx = Math.round(fraction * (this.width - 1));
             const baseAttrs = { underline: this.focused };
             const filledStyle = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true, ...baseAttrs })
-                : new Style({ color: this.resolvePalette("primary"), ...baseAttrs });
+                ? new Style({ ...this.disabledInk, ...baseAttrs })
+                : new Style({ ...ink(this.theme, "text-primary", "background"), ...baseAttrs });
             const unfilledStyle = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true, ...baseAttrs })
-                : new Style({ color: this.resolvePalette("surface"), ...baseAttrs });
+                ? new Style({ ...this.disabledInk, ...baseAttrs })
+                : new Style({ ...ink(this.theme, "foreground", "background"), dim: true, ...baseAttrs });
             const markerStyle = this.disabled
-                ? new Style({ color: "#666666", bgcolor: "#333333", dim: true, bold: true, ...baseAttrs })
-                : new Style({ color: this.resolvePalette("primary"), bold: true, ...baseAttrs });
+                ? new Style({ ...this.disabledInk, bold: true, ...baseAttrs })
+                : new Style({ ...ink(this.theme, "text-primary", "background"), bold: true, ...baseAttrs });
             const segments = [];
             if (markerIdx > 0) {
                 segments.push(new Segment(trackChar.repeat(markerIdx), filledStyle));
@@ -247,12 +230,6 @@ let Slider = (() => {
         measure(_options) {
             return { minimum: this.width, maximum: this.width };
         }
-        // --- Palette resolution ---
-        resolvePalette(key) {
-            const rgba = this._theme.palette.get(key);
-            // [LAW:no-defensive-null-guards] palette must contain all keys.
-            return ColorSpec.fromRgba(rgba);
-        }
     };
 })();
 export { Slider };

package/dist/widgets/text-input.d.ts

@@ -22,10 +22,15 @@
  * [LAW:types-are-the-program] Three integer spaces coexist: `CellCol` (terminal
  * cell columns), `CodeUnit` (JS UTF-16 indices), and `CodePoint` (code-unit
  * offsets that are additionally on a Unicode code-point boundary — a subtype of
- * `CodeUnit`). `cursorPosition` is `CodePoint`; it is never inside a surrogate
- * pair by construction. Visual positions are `CellCol`. The three are never
+ * `CodeUnit`). `cursorPosition` is `CodePoint`, and stronger: its setter
+ * parses any offset to a grapheme-cluster boundary. Visual positions are `CellCol`. The three are never
  * interchangeable — the type system enforces this at every crossing point.
  *
+ * [LAW:one-source-of-truth] The cursor moves, deletes and draws one grapheme
+ * cluster at a time (`nextGrapheme` / `prevGrapheme`) — the unit `cellLen`
+ * measures — so `👍🏽` is one step and one cursor cell, never a glyph and a
+ * stray skin-tone swatch.
+ *
  * Keymap (readline / emacs compatible):
  *
  *   ─── motion ───
@@ -57,10 +62,10 @@
  */
 import { Segment } from "../core/segment.js";
 import { Style } from "../core/style.js";
-import { type CellCol, type CodePoint } from "../core/cells.js";
+import { type CellCol, type CodePoint, type CodeUnit } from "../core/cells.js";
 import { type RenderOptions } from "../core/protocol.js";
 import type { TerminalTheme } from "../core/color.js";
-import { WidgetBase } from "./widget-base.js";
+import { ThemedWidget } from "./themed-widget.js";
 import type { KeyEvent, WidgetMouseEvent } from "./types.js";
 /**
  * A soft-wrap strategy. Given one logical line of text and cell-width budgets,
@@ -182,13 +187,16 @@ export interface TextInputOptions {
      */
     contentStyle?: Style;
 }
-export declare class TextInput extends WidgetBase {
+export declare class TextInput extends ThemedWidget {
     readonly id: string;
     readonly focusable = true;
-    accessor value: string;
-    accessor cursorPosition: CodePoint;
+    private accessor _value;
+    private accessor _cursor;
+    get value(): string;
+    set value(v: string);
+    get cursorPosition(): CodePoint;
+    set cursorPosition(p: CodeUnit);
     accessor placeholder: string;
-    private _theme;
     private readonly _maxLength;
     private readonly _password;
     private readonly _multiline;
@@ -217,9 +225,9 @@ export declare class TextInput extends WidgetBase {
     private _killBuffer;
     private _scrollStart;
     private _singleLineViewportStart;
+    private _singleLineAsciiOnly;
     readonly multiline: boolean;
     constructor(options?: TextInputOptions);
-    setTheme(theme: TerminalTheme): void;
     handleKey(event: KeyEvent): void;
     handleMouse(event: WidgetMouseEvent): void;
     setHovered(value: boolean): void;
@@ -247,7 +255,9 @@ export declare class TextInput extends WidgetBase {
     private _lineStart;
     private _lineEnd;
     private _insertText;
+    protected get ground(): Style;
     protected draw(options: RenderOptions): Iterable<Segment>;
+    private _shown;
     private _renderSingleLine;
     private _renderMultiline;
     private _emitRowContent;
@@ -270,5 +280,4 @@ export declare class TextInput extends WidgetBase {
      *   - no render has happened yet (cache is empty).
      */
     get scrollIndicatorText(): string | undefined;
-    private resolvePalette;
 }