@simon_he/vue-tui 1.1.1 → 1.1.2

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

@@ -0,0 +1,291 @@
+import type { ExtractPublicPropTypes, PropType } from "vue";
+import type { Style } from "../../core/types.js";
+import type { TVideoFrameEvent, TVideoFrameSource, TVideoPlaybackRate } from "../video/types.js";
+export declare const tVideoProps: {
+    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 src: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly frameSource: {
+        readonly type: PropType<TVideoFrameSource>;
+        readonly required: true;
+    };
+    readonly paused: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly playbackRate: {
+        readonly type: PropType<TVideoPlaybackRate>;
+        readonly default: undefined;
+    };
+    readonly controls: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly controlsLayout: {
+        readonly type: PropType<TVideoControlsLayout>;
+        readonly default: "compact";
+    };
+    readonly durationMs: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly loop: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly maxFps: {
+        readonly type: NumberConstructor;
+        readonly default: 12;
+    };
+    readonly pixelWidth: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly pixelHeight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly fallback: {
+        readonly type: StringConstructor;
+        readonly default: "[video]";
+    };
+    readonly style: {
+        readonly type: PropType<Style>;
+        readonly default: undefined;
+    };
+    readonly clear: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+export type TVideoControlsLayout = "compact" | "cinema";
+export type TVideoProps = ExtractPublicPropTypes<typeof tVideoProps>;
+export type TVideoSeekEvent = Readonly<{
+    timestampMs: number;
+    durationMs?: number;
+}>;
+export declare const TVideo: 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 src: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly frameSource: {
+        readonly type: PropType<TVideoFrameSource>;
+        readonly required: true;
+    };
+    readonly paused: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly playbackRate: {
+        readonly type: PropType<TVideoPlaybackRate>;
+        readonly default: undefined;
+    };
+    readonly controls: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly controlsLayout: {
+        readonly type: PropType<TVideoControlsLayout>;
+        readonly default: "compact";
+    };
+    readonly durationMs: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly loop: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly maxFps: {
+        readonly type: NumberConstructor;
+        readonly default: 12;
+    };
+    readonly pixelWidth: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly pixelHeight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly fallback: {
+        readonly type: StringConstructor;
+        readonly default: "[video]";
+    };
+    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, {
+    frame: (_event: TVideoFrameEvent) => true;
+    ended: () => true;
+    error: (_error: unknown) => true;
+    seek: (_event: TVideoSeekEvent) => true;
+    "update:paused": (_paused: boolean) => true;
+    "update:playbackRate": (_rate: TVideoPlaybackRate) => 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 src: {
+        readonly type: StringConstructor;
+        readonly required: true;
+    };
+    readonly frameSource: {
+        readonly type: PropType<TVideoFrameSource>;
+        readonly required: true;
+    };
+    readonly paused: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly playbackRate: {
+        readonly type: PropType<TVideoPlaybackRate>;
+        readonly default: undefined;
+    };
+    readonly controls: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly controlsLayout: {
+        readonly type: PropType<TVideoControlsLayout>;
+        readonly default: "compact";
+    };
+    readonly durationMs: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly loop: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly maxFps: {
+        readonly type: NumberConstructor;
+        readonly default: 12;
+    };
+    readonly pixelWidth: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly pixelHeight: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    readonly fallback: {
+        readonly type: StringConstructor;
+        readonly default: "[video]";
+    };
+    readonly style: {
+        readonly type: PropType<Style>;
+        readonly default: undefined;
+    };
+    readonly clear: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+}>> & Readonly<{
+    onEnded?: (() => any) | undefined;
+    onError?: ((_error: unknown) => any) | undefined;
+    onFrame?: ((_event: Readonly<{
+        timestampMs: number;
+        pixelWidth: number;
+        pixelHeight: number;
+        droppedFrames: number;
+        durationMs?: number;
+        playbackRate?: TVideoPlaybackRate;
+    }>) => any) | undefined;
+    onSeek?: ((_event: Readonly<{
+        timestampMs: number;
+        durationMs?: number;
+    }>) => any) | undefined;
+    "onUpdate:paused"?: ((_paused: boolean) => any) | undefined;
+    "onUpdate:playbackRate"?: ((_rate: TVideoPlaybackRate) => any) | undefined;
+}>, {
+    readonly style: Readonly<{
+        fg?: string;
+        bg?: string;
+        bold?: boolean;
+        dim?: boolean;
+        italic?: boolean;
+        underline?: boolean;
+        inverse?: boolean;
+        href?: string;
+    }>;
+    readonly durationMs: number;
+    readonly zIndex: number;
+    readonly clear: boolean;
+    readonly controls: boolean;
+    readonly fallback: string;
+    readonly maxFps: number;
+    readonly pixelWidth: number;
+    readonly pixelHeight: number;
+    readonly paused: boolean;
+    readonly playbackRate: TVideoPlaybackRate;
+    readonly controlsLayout: TVideoControlsLayout;
+    readonly loop: boolean;
+}, {}>;

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

@@ -0,0 +1,39 @@
+export type TVideoFrameFormat = "png" | "gray8";
+export type TVideoPlaybackRate = 1 | 2 | 3;
+export type TVideoFrame = Readonly<{
+    format?: "png";
+    png: Uint8Array;
+    timestampMs?: number;
+    durationMs?: number;
+    pixelWidth?: number;
+    pixelHeight?: number;
+    fingerprint?: string | number;
+}> | Readonly<{
+    format: "gray8";
+    pixels: Uint8Array;
+    pixelWidth: number;
+    pixelHeight: number;
+    timestampMs?: number;
+    durationMs?: number;
+    fingerprint?: string | number;
+}>;
+export type TVideoFrameSourceContext = Readonly<{
+    src: string;
+    signal: AbortSignal;
+    maxFps: number;
+    pixelWidth: number;
+    pixelHeight: number;
+    startAtMs: number;
+    playbackRate: TVideoPlaybackRate;
+    loop: boolean;
+    preferredFormat: TVideoFrameFormat;
+}>;
+export type TVideoFrameSource = (context: TVideoFrameSourceContext) => AsyncIterable<TVideoFrame> | Promise<AsyncIterable<TVideoFrame>>;
+export type TVideoFrameEvent = Readonly<{
+    timestampMs: number;
+    pixelWidth: number;
+    pixelHeight: number;
+    droppedFrames: number;
+    durationMs?: number;
+    playbackRate?: TVideoPlaybackRate;
+}>;

package/dist/vue.js

@@ -1,22 +1,21 @@
-import "./create-terminal-DXuZ2fci.js";
+import "./hyperlink-_1FAj7Wq.js";
 import { charCellWidth } from "./width-GqllnV8C.js";
-import "./hyperlink-B35-O-cW.js";
-import "./ansi-palette-CNXqFciC.js";
-import "./dom-renderer-DNzmg2As.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-Ng-3eKzF.js";
-import { TView, clamp, createTheme, fitCellText, linkifyTextSegments, mergeStyle, tuiDefaultTheme } from "./linkify-CuuquMQT.js";
-import "./runtime-D77C03RM.js";
-import "./frame-perf-BBhE-iuS.js";
-import "./trace-CYHDKM1m.js";
-import "./env-DNCzvX8b.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-DKGiuIcM.js";
-import "./terminal-selection-CQYr--26.js";
-import "./debug-logger-ChY_PXVk.js";
-import { TBox, TCommandPalette, TDialog, TInput, TRenderPlane, TSelect, TText, clamp$1, computeCommandPaletteMatchRanges, createOverlayFocusStack, isCommitMention, isWhitespace, mentionChipStyle, padEndByCells as padEndByCells$1, resolveOverlayPlacement, sliceByCellsWindow, textCellWidth as textCellWidth$1 } from "./TSelect-CiyMvwl-.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-CXm_L969.js";
+import "./ansi-palette-CH6jc2Z7.js";
+import "./dom-renderer-DXx8fWzD.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-DUpeDfBg.js";
+import { TText, TView, clamp, createTheme, fitCellText, linkifyTextSegments, mergeStyle, tuiDefaultTheme } from "./linkify-D68T7rdW.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-CGdE-CYu.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-tJ87rKPM.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-frVr8Ysb.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.1",
+  "version": "1.1.2",
   "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,12 @@
       "experimental": [
         "./dist/experimental.d.ts"
       ],
+      "experimental/video/node": [
+        "./dist/experimental/video/node.d.ts"
+      ],
+      "experimental/3d/bun": [
+        "./dist/experimental/3d/bun.d.ts"
+      ],
       "agent": [
         "./dist/agent.d.ts"
       ],
@@ -184,6 +190,26 @@
         "default": "./dist/experimental.cjs"
       }
     },
+    "./experimental/video/node": {
+      "import": {
+        "types": "./dist/experimental/video/node.d.ts",
+        "default": "./dist/experimental/video/node.js"
+      },
+      "require": {
+        "types": "./dist/experimental/video/node.d.cts",
+        "default": "./dist/experimental/video/node.cjs"
+      }
+    },
+    "./experimental/3d/bun": {
+      "import": {
+        "types": "./dist/experimental/3d/bun.d.ts",
+        "default": "./dist/experimental/3d/bun.js"
+      },
+      "require": {
+        "types": "./dist/experimental/3d/bun.d.cts",
+        "default": "./dist/experimental/3d/bun.cjs"
+      }
+    },
     "./agent": {
       "import": {
         "types": "./dist/agent.d.ts",
@@ -230,6 +256,7 @@
     "@vitest/coverage-v8": "^4.1.9",
     "beautiful-mermaid": "^1.1.3",
     "bumpp": "^8.2.1",
+    "bun-webgpu": "0.1.7",
     "esbuild": "^0.20.2",
     "happy-dom": "^17.6.3",
     "lint-staged": "^13.3.0",
@@ -249,11 +276,15 @@
   },
   "peerDependencies": {
     "beautiful-mermaid": "^1.1.3",
+    "bun-webgpu": "^0.1.7",
     "vue": ">=3.3.0 <4"
   },
   "peerDependenciesMeta": {
     "beautiful-mermaid": {
       "optional": true
+    },
+    "bun-webgpu": {
+      "optional": true
     }
   },
   "lint-staged": {
@@ -294,6 +325,12 @@
     "run:component:terminal:list": "tsx scripts/run-component-terminal.ts --list",
     "run:github-contribution-card": "pnpm -C apps/simon-terminal-card dev",
     "run:logo:terminal": "tsx examples/vue-tui-logo-terminal.ts",
+    "run:3d:terminal": "bun examples/t3d-terminal-badge.ts",
+    "run:repo-3d-badge": "bun repo-3d-badge/src/cli.ts",
+    "example:3d:smoke": "VT_SMOKE=1 bun examples/t3d-terminal-badge.ts",
+    "run:flappy:terminal": "tsx examples/flappy-bird-terminal.ts",
+    "example:flappy:smoke": "VT_SMOKE=1 tsx examples/flappy-bird-terminal.ts",
+    "test:3d:bun": "bun scripts/smoke-bun-3d.ts",
     "run:image-showcase:terminal": "tsx examples/image-showcase.ts",
     "run:katex-showcase:terminal": "tsx examples/katex-showcase.ts",
     "trace:terminal-resize": "node scripts/trace-terminal-resize.mjs",