@simon_he/vue-tui 1.1.6 → 1.1.7

package/dist/vue/browser/types.d.ts

@@ -0,0 +1,52 @@
+import type { TVideoFrame, TVideoFrameFormat } from "../video/types.js";
+export type TBrowserModifiers = Readonly<{
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+    meta: boolean;
+}>;
+export type TBrowserInputEvent = Readonly<{
+    type: "pointermove" | "pointerdown" | "pointerup";
+    x: number;
+    y: number;
+    button?: number;
+    buttons?: number;
+    modifiers: TBrowserModifiers;
+}> | Readonly<{
+    type: "wheel";
+    x: number;
+    y: number;
+    deltaY: number;
+    modifiers: TBrowserModifiers;
+}> | Readonly<{
+    type: "keydown" | "keyup";
+    key: string;
+    code: string;
+    repeat: boolean;
+    modifiers: TBrowserModifiers;
+}> | Readonly<{
+    type: "text" | "paste";
+    text: string;
+}>;
+export type TBrowserSessionContext = Readonly<{
+    url: string;
+    signal: AbortSignal;
+    maxFps: number;
+    pixelWidth: number;
+    pixelHeight: number;
+    preferredFormat: TVideoFrameFormat;
+    onNavigate: (url: string) => void;
+    onTitleChange: (title: string) => void;
+}>;
+export type TBrowserSession = Readonly<{
+    frames: AsyncIterable<TVideoFrame>;
+    dispatch: (event: TBrowserInputEvent) => void | Promise<void>;
+    navigate?: (url: string) => void | Promise<void>;
+    back?: () => void | Promise<void>;
+    forward?: () => void | Promise<void>;
+    reload?: () => void | Promise<void>;
+    newPage?: () => void | Promise<void>;
+    closePage?: () => boolean | void | Promise<boolean | void>;
+    close: () => void | Promise<void>;
+}>;
+export type TBrowserSessionFactory = (context: TBrowserSessionContext) => TBrowserSession | Promise<TBrowserSession>;

package/dist/vue/components/TBrowser.d.ts

@@ -0,0 +1,231 @@
+import type { ExtractPublicPropTypes, PropType } from "vue";
+import type { Style } from "../../core/types.js";
+import type { TBrowserInputEvent, TBrowserSession, TBrowserSessionFactory } from "../browser/types.js";
+import type { TVideoFrameEvent } from "../video/types.js";
+export declare const tBrowserProps: {
+    readonly x: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly y: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly w: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly h: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly url: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly sessionFactory: {
+        readonly type: PropType<TBrowserSessionFactory>;
+        readonly required: true;
+    };
+    readonly autoFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly maxFps: {
+        readonly type: NumberConstructor;
+        readonly default: 60;
+    };
+    readonly pixelWidth: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly pixelHeight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly fallback: {
+        readonly type: StringConstructor;
+        readonly default: "[browser requires terminal graphics]";
+    };
+    readonly style: {
+        readonly type: PropType<Style>;
+        readonly default: undefined;
+    };
+    readonly clear: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+export type TBrowserProps = ExtractPublicPropTypes<typeof tBrowserProps>;
+export declare const TBrowser: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly x: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly y: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly w: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly h: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly url: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly sessionFactory: {
+        readonly type: PropType<TBrowserSessionFactory>;
+        readonly required: true;
+    };
+    readonly autoFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly maxFps: {
+        readonly type: NumberConstructor;
+        readonly default: 60;
+    };
+    readonly pixelWidth: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly pixelHeight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly fallback: {
+        readonly type: StringConstructor;
+        readonly default: "[browser requires terminal graphics]";
+    };
+    readonly style: {
+        readonly type: PropType<Style>;
+        readonly default: undefined;
+    };
+    readonly clear: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (_session: TBrowserSession) => true;
+    frame: (_event: TVideoFrameEvent) => true;
+    navigate: (_url: string) => true;
+    titleChange: (_title: string) => true;
+    requestAddress: () => true;
+    close: () => true;
+    error: (_error: unknown) => true;
+}, string, (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps), Readonly<import("vue").ExtractPropTypes<{
+    readonly x: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly y: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly w: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly h: {
+        readonly type: NumberConstructor;
+        readonly required: true;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly url: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly sessionFactory: {
+        readonly type: PropType<TBrowserSessionFactory>;
+        readonly required: true;
+    };
+    readonly autoFocus: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly maxFps: {
+        readonly type: NumberConstructor;
+        readonly default: 60;
+    };
+    readonly pixelWidth: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly pixelHeight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly fallback: {
+        readonly type: StringConstructor;
+        readonly default: "[browser requires terminal graphics]";
+    };
+    readonly style: {
+        readonly type: PropType<Style>;
+        readonly default: undefined;
+    };
+    readonly clear: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onError?: ((_error: unknown) => any) | undefined;
+    onFrame?: ((_event: Readonly<{
+        timestampMs: number;
+        pixelWidth: number;
+        pixelHeight: number;
+        droppedFrames: number;
+        durationMs?: number;
+        playbackRate?: import("../video/types.js").TVideoPlaybackRate;
+    }>) => any) | undefined;
+    onReady?: ((_session: Readonly<{
+        frames: AsyncIterable<import("../video/types.js").TVideoFrame>;
+        dispatch: (event: TBrowserInputEvent) => void | Promise<void>;
+        navigate?: (url: string) => void | Promise<void>;
+        back?: () => void | Promise<void>;
+        forward?: () => void | Promise<void>;
+        reload?: () => void | Promise<void>;
+        newPage?: () => void | Promise<void>;
+        closePage?: () => boolean | void | Promise<boolean | void>;
+        close: () => void | Promise<void>;
+    }>) => any) | undefined;
+    onNavigate?: ((_url: string) => any) | undefined;
+    onTitleChange?: ((_title: string) => any) | undefined;
+    onRequestAddress?: (() => any) | undefined;
+}>, {
+    readonly style: Readonly<{
+        fg?: string;
+        bg?: string;
+        bold?: boolean;
+        dim?: boolean;
+        italic?: boolean;
+        underline?: boolean;
+        inverse?: boolean;
+        href?: string;
+    }>;
+    readonly zIndex: number;
+    readonly clear: boolean;
+    readonly fallback: string;
+    readonly autoFocus: boolean;
+    readonly maxFps: number;
+    readonly pixelWidth: number;
+    readonly pixelHeight: number;
+}, {}>;

package/dist/vue.cjs

@@ -4481,21 +4481,32 @@ var nextImeOwnerId = 0, nextPasteImageId = 0, TInput = (0, import_vue15.defineCo
       let hasValue = getValue().length > 0, hasMentions = (props.mentions?.length ?? 0) > 0, hasMultiline = (props.multilineTexts?.length ?? 0) > 0;
       !hasValue && !hasMentions && !hasMultiline || (anchor.value = null, hasMentions && emitMentions([]), hasMultiline && emit("update:multilineTexts", []), hasValue || cursor.value !== 0 ? (pushUndoSnapshot(""), applyEdit("", 0)) : (ensureCursorVisible(), syncImeAnchorNow(), scheduler.invalidate()));
     }
-    function deleteSelectionIfAny(value) {
-      let sel = selection.value;
-      if (!sel)
+    function deleteRangeIfAny(value, start, end) {
+      let from = clamp2(Math.min(start, end), 0, value.length), to = clamp2(Math.max(start, end), 0, value.length);
+      if (to <= from)
         return { value, cursor: cursor.value, deleted: !1 };
-      let tokenStart = countMultilineTokens2(value, sel.start), tokenEnd = countMultilineTokens2(value, sel.end);
+      let tokenStart = countMultilineTokens2(value, from), tokenEnd = countMultilineTokens2(value, to);
       if (tokenEnd > tokenStart) {
         let current = props.multilineTexts ?? [], nextMultiline = [...current.slice(0, tokenStart), ...current.slice(tokenEnd)];
         emit("update:multilineTexts", nextMultiline);
       }
-      let mentionStart = countMentionTokens3(value, sel.start), mentionEnd = countMentionTokens3(value, sel.end);
+      let mentionStart = countMentionTokens3(value, from), mentionEnd = countMentionTokens3(value, to);
       if (mentionEnd > mentionStart) {
         let current = pendingMentions.value ?? props.mentions ?? [], nextMentions = [...current.slice(0, mentionStart), ...current.slice(mentionEnd)];
         emitMentions(nextMentions);
       }
-      return { value: value.slice(0, sel.start) + value.slice(sel.end), cursor: sel.start, deleted: !0 };
+      return { value: value.slice(0, from) + value.slice(to), cursor: from, deleted: !0 };
+    }
+    function deleteSelectionIfAny(value) {
+      let sel = selection.value;
+      return sel ? deleteRangeIfAny(value, sel.start, sel.end) : { value, cursor: cursor.value, deleted: !1 };
+    }
+    function deleteToLineBoundary(value, direction) {
+      let sel = selection.value;
+      if (sel)
+        return deleteRangeIfAny(value, sel.start, sel.end);
+      let { line, lines } = indexToLineCellCol(value, cursor.value), target = direction === "start" ? lines[line].start : lines[line].end;
+      return deleteRangeIfAny(value, cursor.value, target);
     }
     function insertText(rawText) {
       let text = rawText || "";
@@ -5051,7 +5062,13 @@ var nextImeOwnerId = 0, nextPasteImageId = 0, TInput = (0, import_vue15.defineCo
         }
         return;
       }
-      let clearWithDeleteOrBackspace = !!(!e.altKey && (e.ctrlKey && !e.metaKey || e.metaKey && !e.ctrlKey));
+      let clearWithDeleteOrBackspace = !!(!e.altKey && e.ctrlKey && !e.metaKey);
+      if (e.metaKey && !e.ctrlKey && !e.altKey && (e.key === "Backspace" || e.key === "Delete")) {
+        e.preventDefault(), e.stopPropagation();
+        let next = deleteToLineBoundary(value, e.key === "Backspace" ? "start" : "end");
+        next.deleted && (pushUndoSnapshot(next.value), applyEdit(next.value, next.cursor));
+        return;
+      }
       if (e.key === "Delete" && clearWithDeleteOrBackspace) {
         e.preventDefault(), e.stopPropagation(), clearAll();
         return;
@@ -5509,7 +5526,7 @@ var nextImeOwnerId = 0, nextPasteImageId = 0, TInput = (0, import_vue15.defineCo
         }
       }
     })), (0, import_vue15.onBeforeUnmount)(() => {
-      stopBlink();
+      stopBlink(), imeAnchor?.value?.ownerId === imeOwnerId && (imeAnchor.value = null);
     }), () => (0, import_vue15.h)("span", rootProps);
   }
 });

package/dist/vue.js

@@ -3,19 +3,20 @@ import "./ansi-palette-BHF1rN7R.js";
 import "./hyperlink-clbb_ha_.js";
 import "./dom-renderer-BfwAEQMf.js";
 import { EventZIndexContextKey, LayoutContextKey, RenderStackKey, TInputPluginsContextKey, TPathPickerProviderContextKey, VisibilityContextKey, injectionKey, intersectRect, padEndByCells$1 as padEndByCells, repeatChar, sanitizeInlineText, sanitizeTextBlock, sliceByCells, sliceByCellsRange, spaces, textCellWidth$1 as textCellWidth, translateRect, useLayout, useRenderNode, useRenderStack, useTerminal, useTerminalNode, useVisibility, wrapByCells } from "./rect-JzWMJxxc.js";
-import { TText, TView, clamp, createTheme, fitCellText, linkifyTextSegments, mergeStyle, tuiDefaultTheme } from "./linkify-CL9wwnZN.js";
+import { clamp, createTheme, fitCellText, linkifyTextSegments, mergeStyle, tuiDefaultTheme } from "./linkify-CklfA1vp.js";
 import "./runtime-Byf8XXOT.js";
 import "./frame-perf-CHpWhbC4.js";
 import "./trace-Bh8WnoMo.js";
 import "./env-Cl8qmNFN.js";
-import { TAutocompleteInput, TBadge, TCheckbox, TCode, TDataTable, TDivider, TForm, TFormContextKey, TFormField, TLink, TLinkifyText, TList, TPasswordInput, TProgress, TRadioGroup, TSlider, TSpinner, TSwitch, TTable, TTag, TToastViewport, TTree, TerminalProvider, createTInputHostPlugin, useTForm } from "./TTree-kk8ntrpg.js";
+import { TAutocompleteInput, TBadge, TCheckbox, TCode, TDataTable, TDivider, TForm, TFormContextKey, TFormField, TLink, TLinkifyText, TList, TPasswordInput, TProgress, TRadioGroup, TSlider, TSpinner, TSwitch, TTable, TTag, TToastViewport, TTree, TerminalProvider, createTInputHostPlugin, useTForm } from "./TTree-3W5A2_EH.js";
 import "./terminal-selection-4W1SJj4c.js";
 import "./debug-logger-CmsGI4of.js";
-import { TBox, TCommandPalette, TDialog, TInput, TRenderPlane, TSelect, clamp$1, computeCommandPaletteMatchRanges, createOverlayFocusStack, isCommitMention, isWhitespace, mentionChipStyle, padEndByCells as padEndByCells$1, resolveOverlayPlacement, sliceByCellsWindow, textCellWidth as textCellWidth$1 } from "./TSelect-CMBOOFwK.js";
-import { normalizePath, stripTrailingSlash } from "./path-mnSgEpCm.js";
-import { applyWheelScroll, createWheelScrollState } from "./wheel-scroll-DASkEZr-.js";
-import { parsePathQuery, resolveUserPath, suggestPaths } from "./path-suggest-Dndu4dTi.js";
-import { TMermaid$1 as TMermaid, TMermaidText$1 as TMermaidText, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal } from "./TMermaidText-wLnMMvVS.js";
+import { TBox, TCommandPalette, TDialog, TInput, TRenderPlane, TSelect, clamp$1, computeCommandPaletteMatchRanges, createOverlayFocusStack, isCommitMention, isWhitespace, mentionChipStyle, padEndByCells as padEndByCells$1, resolveOverlayPlacement, sliceByCellsWindow, textCellWidth as textCellWidth$1 } from "./TSelect-CCsjjCOr.js";
+import { TText, TView } from "./frame-mailbox-DaTrfyaF.js";
+import { normalizePath, stripTrailingSlash } from "./path-BI9W15Zt.js";
+import { applyWheelScroll, createWheelScrollState } from "./wheel-scroll-CQ22Hcyj.js";
+import { parsePathQuery, resolveUserPath, suggestPaths } from "./path-suggest-fPzRsgPv.js";
+import { TMermaid$1 as TMermaid, TMermaidText$1 as TMermaidText, isSimpleMermaidFlowchartSource, markMermaidRenderErrorFatal } from "./TMermaidText-C1akgJPU.js";
 import { Comment, Fragment, computed, defineComponent, h, inject, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, shallowReactive, shallowRef, watch, watchEffect } from "vue";
 
 //#region src/observability/cli-latency.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simon_he/vue-tui",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Vue 3 terminal UI components and renderers for browser DOM, CLI stdout, logs, markdown transcripts, and agent consoles",
   "keywords": [
     "agent-console",
@@ -85,6 +85,9 @@
       "experimental": [
         "./dist/experimental.d.ts"
       ],
+      "experimental/browser": [
+        "./dist/experimental/browser.d.ts"
+      ],
       "experimental/video/node": [
         "./dist/experimental/video/node.d.ts"
       ],
@@ -190,6 +193,16 @@
         "default": "./dist/experimental.cjs"
       }
     },
+    "./experimental/browser": {
+      "import": {
+        "types": "./dist/experimental/browser.d.ts",
+        "default": "./dist/experimental/browser.js"
+      },
+      "require": {
+        "types": "./dist/experimental/browser.d.cts",
+        "default": "./dist/experimental/browser.cjs"
+      }
+    },
     "./experimental/video/node": {
       "import": {
         "types": "./dist/experimental/video/node.d.ts",
@@ -246,7 +259,7 @@
     "access": "public"
   },
   "dependencies": {
-    "stream-markdown-parser": "1.2.3"
+    "stream-markdown-parser": "1.2.12"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.5",
@@ -351,6 +364,7 @@
     "run:contra-text:terminal": "tsx examples/contra-terminal.ts",
     "example:contra-text:smoke": "VT_SMOKE=1 tsx examples/contra-terminal.ts",
     "run:nes:terminal": "tsx examples/nes-terminal.ts",
+    "run:browser:terminal": "tsx examples/browser-component-demo.ts",
     "example:nes:smoke": "VT_SMOKE=1 tsx examples/nes-terminal.ts",
     "check:nes:rom": "tsx examples/nes/check-rom.ts",
     "check:nes:input": "tsx examples/nes/input-flip-check.ts",