@vnejs/plugins.views.screens.history 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,6 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.history.contract";
+import { HistoryController } from "./modules/controller.js";
+import { History } from "./modules/history.js";
+import { HistoryView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [HistoryController, History, HistoryView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,24 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+import type { HistoryClickPayload, HistoryEntry, HistoryPluginState } from "../utils/history.js";
+export declare class HistoryController extends ModuleController<HistoryPluginEvents, HistoryPluginConstants, HistoryPluginSettings, HistoryPluginParams, HistoryPluginState> {
+    name: string;
+    emitHide: () => undefined;
+    updateEvent: "vne:history:update";
+    controls: {
+        abstract_back: () => undefined;
+        abstract_menu: () => undefined;
+        abstract_gamemenu: () => undefined;
+        abstract_arrow_up: () => undefined;
+        abstract_arrow_bottom: () => undefined;
+        abstract_accept: () => undefined;
+    };
+    controlsIndex: number;
+    subscribe: () => void;
+    beforeShow: () => Promise<void>;
+    afterHide: () => void;
+    onAccept: () => false | undefined;
+    onClick: ({ uid }?: HistoryClickPayload) => false | undefined;
+    onStateSet: () => undefined;
+    getHistoryText: ({ label, text, args, uid }: HistoryEntry) => Promise<string>;
+}

package/dist/modules/controller.js

@@ -0,0 +1,40 @@
+import { ModuleController } from "@vnejs/module.components";
+export class HistoryController extends ModuleController {
+    name = "history.controller";
+    emitHide = () => void this.emit(this.EVENTS.HISTORY.HIDE);
+    updateEvent = this.EVENTS.HISTORY.UPDATE;
+    controls = {
+        [this.CONST.CONTROLS.BUTTONS.BACK]: () => void this.emitHide(),
+        [this.CONST.CONTROLS.BUTTONS.MENU]: () => void this.emitHide(),
+        [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => void this.emitHide(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => void this.decCurrentItem(),
+        [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.incCurrentItem(),
+        [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.emit(this.EVENTS.HISTORY.ACCEPT),
+    };
+    controlsIndex = this.PARAMS.HISTORY.ZINDEX;
+    subscribe = () => {
+        this.on(this.EVENTS.HISTORY.SHOW, this.onShow);
+        this.on(this.EVENTS.HISTORY.HIDE, this.onHide);
+        this.on(this.EVENTS.HISTORY.ACCEPT, this.onAccept);
+        this.on(this.EVENTS.HISTORY.CLICK, this.onClick);
+        this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    };
+    beforeShow = async () => {
+        const history = this.globalState.history.history;
+        this.maxCurrentItem = history.length - 1;
+        this.updateState({
+            historyLocs: await Promise.all(history.map(this.getHistoryText)),
+            historyKeys: (await this.emitOne(this.EVENTS.HISTORY.KEYS)),
+            history,
+        });
+    };
+    afterHide = () => this.setDefaultState();
+    onAccept = () => this.currentItem !== null &&
+        void this.emit(this.EVENTS.HISTORY.CLICK, { uid: this.globalState.history.history[this.currentItem].uid });
+    onClick = ({ uid } = {}) => this.state.historyKeys?.includes(uid) && void this.emit(this.EVENTS.HISTORY.LOAD, { uid });
+    onStateSet = () => void this.emit(this.EVENTS.HISTORY.HIDE, { isForce: true });
+    getHistoryText = async ({ label, text, args, uid }) => {
+        const state = (await this.emitOne(this.EVENTS.HISTORY.GET, { uid }));
+        return this.emitOne(this.EVENTS.TEXT.REPLACE, { label, text, args, state });
+    };
+}

package/dist/modules/history.d.ts

@@ -0,0 +1,18 @@
+import "@vnejs/plugins.core.scenario.contract";
+import { Module, type ModuleGlobalStateRegistry } from "@vnejs/module";
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+import type { HistoryAddPayload, HistoryGetPayload, HistoryLoadPayload, HistoryModuleState } from "../utils/history.js";
+export declare class History extends Module<HistoryPluginEvents, HistoryPluginConstants, HistoryPluginSettings, HistoryPluginParams, HistoryModuleState> {
+    name: string;
+    isLoadInProcess: boolean;
+    subscribe: () => void;
+    init: () => Promise<unknown[]> | undefined;
+    onHistoryAdd: (historyObj?: HistoryAddPayload) => Promise<void>;
+    onHistoryLoad: ({ uid }?: HistoryLoadPayload) => Promise<undefined>;
+    onHistoryBack: () => false | 0 | Promise<unknown[]> | undefined;
+    onHistoryKeys: () => Promise<unknown> | undefined;
+    onHistoryGet: ({ uid }?: HistoryGetPayload) => Promise<unknown> | undefined;
+    onStateSet: (payload: ModuleGlobalStateRegistry) => Promise<void>;
+    updateHistoryKeys: () => Promise<unknown[]>;
+    getDefaultState: () => HistoryModuleState;
+}

package/dist/modules/history.js

@@ -0,0 +1,48 @@
+import "@vnejs/plugins.core.scenario.contract";
+import { Module } from "@vnejs/module";
+export class History extends Module {
+    name = "history";
+    isLoadInProcess = false;
+    subscribe = () => {
+        this.on(this.EVENTS.HISTORY.ADD, this.onHistoryAdd);
+        this.on(this.EVENTS.HISTORY.GET, this.onHistoryGet);
+        this.on(this.EVENTS.HISTORY.LOAD, this.onHistoryLoad);
+        this.on(this.EVENTS.HISTORY.BACK, this.onHistoryBack);
+        this.on(this.EVENTS.HISTORY.KEYS, this.onHistoryKeys);
+        this.on(this.EVENTS.STATE.CLEAR, this.setDefaultState);
+        this.on(this.EVENTS.STATE.SET, this.onStateSet);
+    };
+    init = () => this.emit(this.EVENTS.MEMORY.REG, { module: this.name });
+    onHistoryAdd = async (historyObj = {}) => {
+        if (this.isLoadInProcess)
+            return;
+        const [state, uid] = (await Promise.all([this.emitOne(this.EVENTS.STATE.GET), this.emitOne(this.EVENTS.VENDORS.UID)]));
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "add", uid } });
+        await this.emit(this.EVENTS.MEMORY.SET, { module: this.name, key: uid, value: state });
+        this.state.history.push({ uid, ...historyObj });
+        if (this.state.history.length > this.PARAMS.HISTORY.MAX_LENGTH)
+            this.state.history = this.state.history.slice(this.state.history.length - this.PARAMS.HISTORY.MAX_LENGTH, this.state.history.length);
+        this.updateHistoryKeys();
+    };
+    onHistoryLoad = async ({ uid } = {}) => {
+        this.isLoadInProcess = true;
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load start", uid } });
+        const state = (await this.emitOne(this.EVENTS.HISTORY.GET, { uid }));
+        if (!state)
+            return void this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load deleted", uid } });
+        await this.emit(this.EVENTS.STATE.LOAD, await this.emitOne(this.EVENTS.VENDORS.CLONE, state));
+        this.emit(this.EVENTS.SCENARIO.LABEL_GET, { label: state.scenario?.label });
+        this.isLoadInProcess = false;
+        this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load end", uid } });
+        this.updateHistoryKeys();
+    };
+    onHistoryBack = () => !this.isLoadInProcess && this.state.history.length && this.emit(this.EVENTS.HISTORY.LOAD, { uid: this.state.history[this.state.history.length - 1].uid });
+    onHistoryKeys = () => this.emitOne(this.EVENTS.MEMORY.KEYS, { module: this.name });
+    onHistoryGet = ({ uid = "" } = {}) => this.emitOne(this.EVENTS.MEMORY.GET, { module: this.name, key: uid });
+    onStateSet = async (payload) => {
+        const state = payload[this.name];
+        return this.setState((await this.emitOne(this.EVENTS.VENDORS.CLONE, state)));
+    };
+    updateHistoryKeys = () => Promise.all(this.state.history.map(({ uid }) => this.emitOne(this.EVENTS.HISTORY.GET, { uid })));
+    getDefaultState = () => ({ history: [] });
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,11 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+import type { HistoryPluginState } from "../utils/history.js";
+export declare class HistoryView extends ModuleView<HistoryPluginEvents, HistoryPluginConstants, HistoryPluginSettings, HistoryPluginParams, HistoryPluginState> {
+    name: string;
+    locLabel: string;
+    animationTime: number;
+    updateEvent: "vne:history:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<HistoryPluginState>;
+    updateHandler: (state?: HistoryPluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class HistoryView extends ModuleView {
+    name = "history.view";
+    locLabel = this.PARAMS.HISTORY.LOC_LABEL;
+    animationTime = this.PARAMS.HISTORY.TRANSITION;
+    updateEvent = this.EVENTS.HISTORY.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as VendorsPluginName, SubscribeEvents as VendorsSubscribeEvents } from "@vnejs/plugins.core.vendors.contract";
+import type { Params as TextParams, PluginName as TextPluginName, SubscribeEvents as TextSubscribeEvents } from "@vnejs/plugins.text.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.history.contract";
+export type HistoryPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<MemoryPluginName, MemorySubscribeEvents> & Record<StatePluginName, StateSubscribeEvents> & Record<VendorsPluginName, VendorsSubscribeEvents> & Record<LogsPluginName, LogsSubscribeEvents> & Record<ScenarioPluginName, ScenarioSubscribeEvents> & Record<TextPluginName, TextSubscribeEvents>;
+export type HistoryPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type HistoryPluginSettings = ModuleComponentsSettings;
+export type HistoryPluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<TextPluginName, TextParams>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/history.d.ts

@@ -0,0 +1,43 @@
+import type { Module, ModuleGlobalState } from "@vnejs/module";
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+export type HistoryEntry = {
+    uid: string;
+    label?: string;
+    text?: string;
+    args?: Record<string, unknown>;
+    speaker?: string;
+    meet?: number | string;
+};
+export type HistoryModuleState = {
+    history: HistoryEntry[];
+};
+export type HistoryPluginState = {
+    isShow: boolean;
+    isForce: boolean;
+    locs?: Record<string, string>;
+    history?: HistoryEntry[];
+    historyLocs?: string[];
+    historyKeys?: (string | null | undefined)[];
+    currentItem?: number | null;
+};
+export type HistoryViewContext = {
+    emit: Module<HistoryPluginEvents, HistoryPluginConstants, HistoryPluginSettings, HistoryPluginParams, HistoryPluginState>["emit"];
+    EVENTS: HistoryPluginEvents;
+    PARAMS: HistoryPluginParams;
+};
+export type HistoryAddPayload = Partial<HistoryEntry>;
+export type HistoryGetPayload = {
+    uid?: string;
+};
+export type HistoryLoadPayload = {
+    uid?: string;
+};
+export type HistoryClickPayload = {
+    uid?: string;
+};
+export type HistoryReplacePayload = {
+    label?: string;
+    text?: string;
+    args?: Record<string, unknown>;
+    state?: ModuleGlobalState;
+};

package/dist/utils/history.js

@@ -0,0 +1 @@
+export {};

package/dist/view/components/HistoryClose.d.ts

@@ -0,0 +1,6 @@
+import type { HistoryViewContext } from "../../utils/history.js";
+type HistoryCloseProps = HistoryViewContext & {
+    locs?: Record<string, string>;
+};
+export declare const HistoryClose: ({ locs, emit, EVENTS, PARAMS }: HistoryCloseProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/HistoryClose.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { PositionBox, Text } from "@vnejs/uis.react";
+export const HistoryClose = ({ locs = {}, emit, EVENTS, PARAMS }) => {
+    const onClick = useCallback(() => void emit(EVENTS.HISTORY.HIDE), [emit, EVENTS.HISTORY.HIDE]);
+    const propsText = useMemo(() => ({ ...PARAMS.HISTORY.VIEW_PROPS.close.text, text: locs.back, onClick }), [locs, PARAMS.HISTORY.VIEW_PROPS.close.text, onClick]);
+    return (_jsx(PositionBox, { ...PARAMS.HISTORY.VIEW_PROPS.close.position, children: _jsx(Text, { ...propsText }) }));
+};

package/dist/view/components/HistoryLines.d.ts

@@ -0,0 +1,11 @@
+import type { HistoryEntry, HistoryViewContext } from "../../utils/history.js";
+type HistoryLinesProps = HistoryViewContext & {
+    isShow?: boolean;
+    history?: HistoryEntry[];
+    currentItem?: number | null;
+    historyLocs?: string[];
+    historyKeys?: (string | null | undefined)[];
+    locs?: Record<string, string>;
+};
+export declare const HistoryLines: ({ isShow, history, currentItem, historyLocs, historyKeys, locs, emit, EVENTS, PARAMS, }: HistoryLinesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/view/components/HistoryLines.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { PositionBox, Text, TextControls } from "@vnejs/uis.react";
+const scrollToBottom = (scrollbarWrapRef) => {
+    if (!scrollbarWrapRef.current)
+        return requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+    if (scrollbarWrapRef.current.clientHeight === scrollbarWrapRef.current.scrollHeight || scrollbarWrapRef.current.scrollTop !== 0)
+        return;
+    scrollbarWrapRef.current.scrollTop = 9999999;
+    requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+};
+export const HistoryLines = ({ isShow = false, history = [], currentItem = null, historyLocs = [], historyKeys = [], locs = {}, emit, EVENTS, PARAMS, }) => {
+    const scrollbarWrapRef = useRef(null);
+    const onClick = useCallback((uid) => historyKeys.includes(uid) && void emit(EVENTS.HISTORY.CLICK, { uid }), [historyKeys, emit, EVENTS.HISTORY.CLICK]);
+    const mapTexts = useCallback(({ text, uid, speaker, meet }, i) => {
+        const speakers = PARAMS.TEXT.SPEAKERS_INFO;
+        const { speakerColor = "white" } = (speakers[speaker || ""] || speakers.default || {});
+        const speakerName = locs[`speaker.${speaker}.${meet}`];
+        return {
+            text: (historyLocs && historyLocs[i]) || text,
+            value: uid,
+            textPrefix: speakerName ? `${speakerName}: ` : undefined,
+            colorPrefix: speakerColor,
+            weightPrefix: Text.WEIGHT.BOLD,
+            isHoverable: Boolean(historyKeys.find((key) => key === uid)),
+        };
+    }, [historyLocs, historyKeys, locs, PARAMS.TEXT.SPEAKERS_INFO]);
+    useEffect(() => {
+        if (isShow)
+            requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+    }, [isShow]);
+    const texts = useMemo(() => history.map(mapTexts), [history, mapTexts]);
+    const propsView = PARAMS.HISTORY.VIEW_PROPS.lines;
+    const propsControlsCommon = useMemo(() => ({ ...propsView.controls, onClick, scrollbarWrapRef }), [propsView.controls, onClick]);
+    const propsControls = useMemo(() => ({ ...propsControlsCommon, texts, selectedIndex: currentItem ?? undefined }), [propsControlsCommon, texts, currentItem]);
+    return (_jsx(PositionBox, { ...propsView.position, children: _jsx(TextControls, { ...propsControls }) }));
+};

package/dist/view/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./HistoryClose.js";
+export * from "./HistoryLines.js";

package/dist/view/components/index.js

@@ -0,0 +1,2 @@
+export * from "./HistoryClose.js";
+export * from "./HistoryLines.js";

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { HistoryPluginState } from "../utils/history.js";
+export declare const render: ViewRenderFunc<HistoryPluginState>;

package/dist/view/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Screen, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+import { HistoryClose, HistoryLines } from "./components/index.js";
+const History = ({ store, onMount, PARAMS, emit, EVENTS }) => {
+    const { isShow = false, isForce = false, locs = {}, history = [], historyLocs = [], historyKeys = [], currentItem = null, } = useStoreState(store, onMount);
+    const viewProps = useMemo(() => ({ emit, EVENTS, PARAMS }), [emit, EVENTS, PARAMS]);
+    const propsScreen = useMemo(() => ({ ...PARAMS.HISTORY.VIEW_PROPS.screen, isShow, isForce }), [isShow, isForce, PARAMS.HISTORY.VIEW_PROPS.screen]);
+    const propsHistory = useMemo(() => ({ history, historyLocs, historyKeys }), [history, historyLocs, historyKeys]);
+    const propsLines = useMemo(() => ({ ...viewProps, ...propsHistory, isShow, currentItem, locs }), [viewProps, propsHistory, isShow, currentItem, locs]);
+    const propsClose = useMemo(() => ({ ...viewProps, locs }), [viewProps, locs]);
+    return (_jsxs(Screen, { ...propsScreen, children: [_jsx(HistoryLines, { ...propsLines }), _jsx(HistoryClose, { ...propsClose })] }));
+};
+export const render = createRenderFunc(History);

package/package.json

@@ -1,17 +1,52 @@
 {
   "name": "@vnejs/plugins.views.screens.history",
-  "version": "0.1.8",
-  "main": "index.js",
+  "version": "0.1.9",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx @vnejs/monorepo package",
     "publish:major:plugin": "npm run publish:major",
     "publish:minor:plugin": "npm run publish:minor",
     "publish:patch:plugin": "npm run publish:patch",
-    "publish:major": "npm version major && npm publish --access public",
-    "publish:minor": "npm version minor && npm publish --access public",
-    "publish:patch": "npm version patch && npm publish --access public"
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.views.screens.history.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.1.0",
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.controls.contract": "~0.0.1",
+    "@vnejs/plugins.core.logs.contract": "~0.0.1",
+    "@vnejs/plugins.core.memory.contract": "~0.0.1",
+    "@vnejs/plugins.core.scenario.contract": "~0.0.1",
+    "@vnejs/plugins.core.state.contract": "~0.0.1",
+    "@vnejs/plugins.core.vendors.contract": "~0.0.1",
+    "@vnejs/plugins.text.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

@@ -0,0 +1,8 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.screens.history.contract";
+
+import { HistoryController } from "./modules/controller.js";
+import { History } from "./modules/history.js";
+import { HistoryView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [HistoryController, History, HistoryView]);

package/src/modules/controller.ts

@@ -0,0 +1,64 @@
+import { ModuleController } from "@vnejs/module.components";
+
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+import type { ModuleGlobalState } from "@vnejs/module";
+
+import type { HistoryClickPayload, HistoryEntry, HistoryModuleState, HistoryPluginState, HistoryReplacePayload } from "../utils/history.js";
+
+export class HistoryController extends ModuleController<
+  HistoryPluginEvents,
+  HistoryPluginConstants,
+  HistoryPluginSettings,
+  HistoryPluginParams,
+  HistoryPluginState
+> {
+  name = "history.controller";
+
+  emitHide = () => void this.emit(this.EVENTS.HISTORY.HIDE);
+
+  updateEvent = this.EVENTS.HISTORY.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: () => void this.emitHide(),
+    [this.CONST.CONTROLS.BUTTONS.MENU]: () => void this.emitHide(),
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: () => void this.emitHide(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: () => void this.decCurrentItem(),
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: () => void this.incCurrentItem(),
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => void this.emit(this.EVENTS.HISTORY.ACCEPT),
+  };
+  controlsIndex = this.PARAMS.HISTORY.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.HISTORY.SHOW, this.onShow);
+    this.on(this.EVENTS.HISTORY.HIDE, this.onHide);
+    this.on(this.EVENTS.HISTORY.ACCEPT, this.onAccept);
+    this.on(this.EVENTS.HISTORY.CLICK, this.onClick);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+
+  beforeShow = async () => {
+    const history = (this.globalState.history as HistoryModuleState).history;
+
+    this.maxCurrentItem = history.length - 1;
+
+    this.updateState({
+      historyLocs: await Promise.all(history.map(this.getHistoryText)),
+      historyKeys: (await this.emitOne(this.EVENTS.HISTORY.KEYS)) as (string | null | undefined)[],
+      history,
+    });
+  };
+  afterHide = () => this.setDefaultState();
+
+  onAccept = () =>
+    this.currentItem !== null &&
+    void this.emit(this.EVENTS.HISTORY.CLICK, { uid: (this.globalState.history as HistoryModuleState).history[this.currentItem].uid });
+  onClick = ({ uid }: HistoryClickPayload = {}) => this.state.historyKeys?.includes(uid) && void this.emit(this.EVENTS.HISTORY.LOAD, { uid });
+
+  onStateSet = () => void this.emit(this.EVENTS.HISTORY.HIDE, { isForce: true });
+
+  getHistoryText = async ({ label, text, args, uid }: HistoryEntry) => {
+    const state = (await this.emitOne(this.EVENTS.HISTORY.GET, { uid })) as ModuleGlobalState;
+
+    return this.emitOne(this.EVENTS.TEXT.REPLACE, { label, text, args, state } satisfies HistoryReplacePayload) as Promise<string>;
+  };
+}

package/{modules/history.js → src/modules/history.ts}

@@ -1,6 +1,11 @@
-import { Module } from "@vnejs/module";
+import "@vnejs/plugins.core.scenario.contract";
 
-export class History extends Module {
+import { Module, type ModuleGlobalState, type ModuleGlobalStateRegistry } from "@vnejs/module";
+
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+import type { HistoryAddPayload, HistoryGetPayload, HistoryLoadPayload, HistoryModuleState } from "../utils/history.js";
+
+export class History extends Module<HistoryPluginEvents, HistoryPluginConstants, HistoryPluginSettings, HistoryPluginParams, HistoryModuleState> {
   name = "history";
 
   isLoadInProcess = false;
@@ -18,10 +23,10 @@ export class History extends Module {
 
   init = () => this.emit(this.EVENTS.MEMORY.REG, { module: this.name });
 
-  onHistoryAdd = async (historyObj = {}) => {
+  onHistoryAdd = async (historyObj: HistoryAddPayload = {}) => {
     if (this.isLoadInProcess) return;
 
-    const [state, uid] = await Promise.all([this.emitOne(this.EVENTS.STATE.GET), this.emitOne(this.EVENTS.VENDORS.UID)]);
+    const [state, uid] = (await Promise.all([this.emitOne(this.EVENTS.STATE.GET), this.emitOne(this.EVENTS.VENDORS.UID)])) as [ModuleGlobalState, string];
 
     this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "add", uid } });
 
@@ -34,18 +39,18 @@ export class History extends Module {
 
     this.updateHistoryKeys();
   };
-  onHistoryLoad = async ({ uid } = {}) => {
+  onHistoryLoad = async ({ uid }: HistoryLoadPayload = {}) => {
     this.isLoadInProcess = true;
 
     this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load start", uid } });
 
-    const state = await this.emitOne(this.EVENTS.HISTORY.GET, { uid });
+    const state = (await this.emitOne(this.EVENTS.HISTORY.GET, { uid })) as ModuleGlobalState | null | undefined;
 
     if (!state) return void this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load deleted", uid } });
 
     await this.emit(this.EVENTS.STATE.LOAD, await this.emitOne(this.EVENTS.VENDORS.CLONE, state));
 
-    this.emit(this.EVENTS.SCENARIO.LABEL_GET, { label: state.scenario.label });
+    this.emit(this.EVENTS.SCENARIO.LABEL_GET, { label: state.scenario?.label });
 
     this.isLoadInProcess = false;
 
@@ -56,11 +61,15 @@ export class History extends Module {
   onHistoryBack = () =>
     !this.isLoadInProcess && this.state.history.length && this.emit(this.EVENTS.HISTORY.LOAD, { uid: this.state.history[this.state.history.length - 1].uid });
   onHistoryKeys = () => this.emitOne(this.EVENTS.MEMORY.KEYS, { module: this.name });
-  onHistoryGet = ({ uid = "" } = {}) => this.emitOne(this.EVENTS.MEMORY.GET, { module: this.name, key: uid });
+  onHistoryGet = ({ uid = "" }: HistoryGetPayload = {}) => this.emitOne(this.EVENTS.MEMORY.GET, { module: this.name, key: uid });
 
-  onStateSet = async ({ [this.name]: state } = {}) => this.setState(await this.emitOne(this.EVENTS.VENDORS.CLONE, state));
+  onStateSet = async (payload: ModuleGlobalStateRegistry) => {
+    const state = payload[this.name] as HistoryModuleState | undefined;
+
+    return this.setState((await this.emitOne(this.EVENTS.VENDORS.CLONE, state)) as HistoryModuleState);
+  };
 
-  updateHistoryKeys = () => Promise.all(this.state.history.map(({ uid = "" } = {}) => this.emitOne(this.EVENTS.HISTORY.GET, { uid })));
+  updateHistoryKeys = () => Promise.all(this.state.history.map(({ uid }) => this.emitOne(this.EVENTS.HISTORY.GET, { uid })));
 
-  getDefaultState = () => ({ history: [] });
+  getDefaultState = (): HistoryModuleState => ({ history: [] });
 }

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+import type { HistoryPluginState } from "../utils/history.js";
+
+export class HistoryView extends ModuleView<
+  HistoryPluginEvents,
+  HistoryPluginConstants,
+  HistoryPluginSettings,
+  HistoryPluginParams,
+  HistoryPluginState
+> {
+  name = "history.view";
+
+  locLabel = this.PARAMS.HISTORY.LOC_LABEL;
+  animationTime = this.PARAMS.HISTORY.TRANSITION;
+  updateEvent = this.EVENTS.HISTORY.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,24 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as LogsPluginName, SubscribeEvents as LogsSubscribeEvents } from "@vnejs/plugins.core.logs.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as VendorsPluginName, SubscribeEvents as VendorsSubscribeEvents } from "@vnejs/plugins.core.vendors.contract";
+import type { Params as TextParams, PluginName as TextPluginName, SubscribeEvents as TextSubscribeEvents } from "@vnejs/plugins.text.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.screens.history.contract";
+
+export type HistoryPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<MemoryPluginName, MemorySubscribeEvents> &
+  Record<StatePluginName, StateSubscribeEvents> &
+  Record<VendorsPluginName, VendorsSubscribeEvents> &
+  Record<LogsPluginName, LogsSubscribeEvents> &
+  Record<ScenarioPluginName, ScenarioSubscribeEvents> &
+  Record<TextPluginName, TextSubscribeEvents>;
+
+export type HistoryPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type HistoryPluginSettings = ModuleComponentsSettings;
+
+export type HistoryPluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<TextPluginName, TextParams>;

package/src/utils/history.ts

@@ -0,0 +1,53 @@
+import type { Module, ModuleGlobalState } from "@vnejs/module";
+
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+
+export type HistoryEntry = {
+  uid: string;
+  label?: string;
+  text?: string;
+  args?: Record<string, unknown>;
+  speaker?: string;
+  meet?: number | string;
+};
+
+export type HistoryModuleState = {
+  history: HistoryEntry[];
+};
+
+export type HistoryPluginState = {
+  isShow: boolean;
+  isForce: boolean;
+  locs?: Record<string, string>;
+  history?: HistoryEntry[];
+  historyLocs?: string[];
+  historyKeys?: (string | null | undefined)[];
+  currentItem?: number | null;
+};
+
+export type HistoryViewContext = {
+  emit: Module<HistoryPluginEvents, HistoryPluginConstants, HistoryPluginSettings, HistoryPluginParams, HistoryPluginState>["emit"];
+  EVENTS: HistoryPluginEvents;
+  PARAMS: HistoryPluginParams;
+};
+
+export type HistoryAddPayload = Partial<HistoryEntry>;
+
+export type HistoryGetPayload = {
+  uid?: string;
+};
+
+export type HistoryLoadPayload = {
+  uid?: string;
+};
+
+export type HistoryClickPayload = {
+  uid?: string;
+};
+
+export type HistoryReplacePayload = {
+  label?: string;
+  text?: string;
+  args?: Record<string, unknown>;
+  state?: ModuleGlobalState;
+};

package/src/view/components/HistoryClose.tsx

@@ -0,0 +1,21 @@
+import { useCallback, useMemo } from "react";
+
+import { PositionBox, Text } from "@vnejs/uis.react";
+
+import type { HistoryViewContext } from "../../utils/history.js";
+
+type HistoryCloseProps = HistoryViewContext & {
+  locs?: Record<string, string>;
+};
+
+export const HistoryClose = ({ locs = {}, emit, EVENTS, PARAMS }: HistoryCloseProps) => {
+  const onClick = useCallback(() => void emit(EVENTS.HISTORY.HIDE), [emit, EVENTS.HISTORY.HIDE]);
+
+  const propsText = useMemo(() => ({ ...PARAMS.HISTORY.VIEW_PROPS.close.text, text: locs.back, onClick }), [locs, PARAMS.HISTORY.VIEW_PROPS.close.text, onClick]);
+
+  return (
+    <PositionBox {...PARAMS.HISTORY.VIEW_PROPS.close.position}>
+      <Text {...propsText} />
+    </PositionBox>
+  );
+};

package/src/view/components/HistoryLines.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import type { TextSpeakerInfo } from "@vnejs/plugins.text.contract";
+import { PositionBox, Text, TextControls } from "@vnejs/uis.react";
+
+import type { HistoryEntry, HistoryViewContext } from "../../utils/history.js";
+
+type HistoryLinesProps = HistoryViewContext & {
+  isShow?: boolean;
+  history?: HistoryEntry[];
+  currentItem?: number | null;
+  historyLocs?: string[];
+  historyKeys?: (string | null | undefined)[];
+  locs?: Record<string, string>;
+};
+
+const scrollToBottom = (scrollbarWrapRef: React.RefObject<HTMLDivElement | null>) => {
+  if (!scrollbarWrapRef.current) return requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+  if (scrollbarWrapRef.current.clientHeight === scrollbarWrapRef.current.scrollHeight || scrollbarWrapRef.current.scrollTop !== 0) return;
+
+  scrollbarWrapRef.current.scrollTop = 9999999;
+  requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+};
+
+export const HistoryLines = ({
+  isShow = false,
+  history = [],
+  currentItem = null,
+  historyLocs = [],
+  historyKeys = [],
+  locs = {},
+  emit,
+  EVENTS,
+  PARAMS,
+}: HistoryLinesProps) => {
+  const scrollbarWrapRef = useRef<HTMLDivElement | null>(null);
+
+  const onClick = useCallback(
+    (uid?: unknown) => historyKeys.includes(uid as string) && void emit(EVENTS.HISTORY.CLICK, { uid }),
+    [historyKeys, emit, EVENTS.HISTORY.CLICK],
+  );
+
+  const mapTexts = useCallback(
+    ({ text, uid, speaker, meet }: HistoryEntry, i: number) => {
+      const speakers = PARAMS.TEXT.SPEAKERS_INFO;
+
+      const { speakerColor = "white" } = (speakers[speaker || ""] || speakers.default || {}) as TextSpeakerInfo;
+      const speakerName = locs[`speaker.${speaker}.${meet}`];
+
+      return {
+        text: (historyLocs && historyLocs[i]) || text,
+        value: uid,
+        textPrefix: speakerName ? `${speakerName}: ` : undefined,
+        colorPrefix: speakerColor,
+        weightPrefix: Text.WEIGHT.BOLD,
+        isHoverable: Boolean(historyKeys.find((key) => key === uid)),
+      };
+    },
+    [historyLocs, historyKeys, locs, PARAMS.TEXT.SPEAKERS_INFO],
+  );
+
+  useEffect(() => {
+    if (isShow) requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+  }, [isShow]);
+
+  const texts = useMemo(() => history.map(mapTexts), [history, mapTexts]);
+
+  const propsView = PARAMS.HISTORY.VIEW_PROPS.lines;
+
+  const propsControlsCommon = useMemo(() => ({ ...propsView.controls, onClick, scrollbarWrapRef }), [propsView.controls, onClick]);
+  const propsControls = useMemo(() => ({ ...propsControlsCommon, texts, selectedIndex: currentItem ?? undefined }), [propsControlsCommon, texts, currentItem]);
+
+  return (
+    <PositionBox {...propsView.position}>
+      <TextControls {...propsControls} />
+    </PositionBox>
+  );
+};

package/src/view/components/index.ts

@@ -0,0 +1,2 @@
+export * from "./HistoryClose.js";
+export * from "./HistoryLines.js";

package/src/view/index.tsx

@@ -0,0 +1,42 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Screen, createRenderFunc, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { HistoryPluginConstants, HistoryPluginEvents, HistoryPluginParams, HistoryPluginSettings } from "../types.js";
+import type { HistoryPluginState, HistoryViewContext } from "../utils/history.js";
+import { HistoryClose, HistoryLines } from "./components/index.js";
+
+type HistoryComponentProps = ReactComponentProps<
+  HistoryPluginEvents,
+  HistoryPluginConstants,
+  HistoryPluginSettings,
+  HistoryPluginParams,
+  HistoryPluginState
+>;
+
+const History = ({ store, onMount, PARAMS, emit, EVENTS }: HistoryComponentProps) => {
+  const {
+    isShow = false,
+    isForce = false,
+    locs = {},
+    history = [],
+    historyLocs = [],
+    historyKeys = [],
+    currentItem = null,
+  } = useStoreState<HistoryPluginState>(store, onMount);
+
+  const viewProps = useMemo<HistoryViewContext>(() => ({ emit, EVENTS, PARAMS }), [emit, EVENTS, PARAMS]);
+  const propsScreen = useMemo(() => ({ ...PARAMS.HISTORY.VIEW_PROPS.screen, isShow, isForce }), [isShow, isForce, PARAMS.HISTORY.VIEW_PROPS.screen]);
+  const propsHistory = useMemo(() => ({ history, historyLocs, historyKeys }), [history, historyLocs, historyKeys]);
+  const propsLines = useMemo(() => ({ ...viewProps, ...propsHistory, isShow, currentItem, locs }), [viewProps, propsHistory, isShow, currentItem, locs]);
+  const propsClose = useMemo(() => ({ ...viewProps, locs }), [viewProps, locs]);
+
+  return (
+    <Screen {...propsScreen}>
+      <HistoryLines {...propsLines} />
+      <HistoryClose {...propsClose} />
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<HistoryPluginState> = createRenderFunc(History);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/events.js

@@ -1,14 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  GET: "vne:history:get",
-  ADD: "vne:history:add",
-  LOAD: "vne:history:load",
-  BACK: "vne:history:back",
-  KEYS: "vne:history:keys",
-  CLEAR: "vne:history:clear",
-
-  HIDE: "vne:history:hide",
-  SHOW: "vne:history:show",
-  CLICK: "vne:history:click",
-  UPDATE: "vne:history:update",
-  ACCEPT: "vne:history:accept",
-};

package/const/params.js

@@ -1,11 +0,0 @@
-export const MAX_LENGTH = 50;
-
-export const ZINDEX = 2000;
-export const TRANSITION = 300;
-export const LOC_LABEL = "history";
-
-export const VIEW_PROPS = {
-  screen: { isDisableAutoread: true, withBlur: true, withDark: true, zIndex: ZINDEX, transition: TRANSITION },
-  lines: { position: { top: 120, left: 120, right: 120 }, controls: { wrapHeight: 1800, withScrollbar: true, flexGap: 36, textSize: 60, textMarginTop: 36 } },
-  close: { position: { bottom: 120, left: 120 }, text: { size: 60 } },
-};

package/index.js

@@ -1,10 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { HistoryController } from "./modules/controller";
-import { History } from "./modules/history";
-import { HistoryView } from "./modules/view";
-
-regPlugin("HISTORY", { events: SUBSCRIBE_EVENTS, params }, [HistoryController, History, HistoryView]);

package/modules/controller.js

@@ -1,49 +0,0 @@
-import { ModuleController } from "@vnejs/module.components";
-
-export class HistoryController extends ModuleController {
-  name = "history.controller";
-
-  emitHide = () => this.emit(this.EVENTS.HISTORY.HIDE);
-
-  updateEvent = this.EVENTS.HISTORY.UPDATE;
-  controls = {
-    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
-    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.HISTORY.ACCEPT),
-  };
-  controlsIndex = this.PARAMS.HISTORY.ZINDEX;
-
-  subscribe = () => {
-    this.on(this.EVENTS.HISTORY.SHOW, this.onShow);
-    this.on(this.EVENTS.HISTORY.HIDE, this.onHide);
-    this.on(this.EVENTS.HISTORY.ACCEPT, this.onAccept);
-    this.on(this.EVENTS.HISTORY.CLICK, this.onClick);
-
-    this.on(this.EVENTS.STATE.SET, this.onStateSet);
-  };
-
-  beforeShow = async () => {
-    this.maxCurrentItem = this.globalState.history.history.length - 1;
-
-    this.updateState({
-      historyLocs: await Promise.all(this.globalState.history.history.map(this.getHistoryText)),
-      historyKeys: await this.emitOne(this.EVENTS.HISTORY.KEYS),
-      history: this.globalState.history.history,
-    });
-  };
-  afterHide = () => this.setDefaultState();
-
-  onAccept = () => this.currentItem !== null && this.emit(this.EVENTS.HISTORY.CLICK, { uid: this.globalState.history.history[this.currentItem].uid });
-  onClick = ({ uid } = {}) => this.state.historyKeys.includes(uid) && this.emit(this.EVENTS.HISTORY.LOAD, { uid });
-
-  onStateSet = () => this.emit(this.EVENTS.HISTORY.HIDE, { isForce: true });
-
-  getHistoryText = async ({ label, text, args, uid } = {}) => {
-    const state = await this.emitOne(this.EVENTS.HISTORY.GET, { uid });
-
-    return this.emitOne(this.EVENTS.TEXT.REPLACE, { label, text, args, state });
-  };
-}

package/modules/view.js

@@ -1,14 +0,0 @@
-import { ModuleView } from "@vnejs/module.components";
-
-import { render } from "../view";
-
-export class HistoryView extends ModuleView {
-  name = "history.view";
-
-  locLabel = this.PARAMS.HISTORY.LOC_LABEL;
-  animationTime = this.PARAMS.HISTORY.TRANSITION;
-  updateEvent = this.EVENTS.HISTORY.UPDATE;
-
-  renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
-}

package/view/components/HistoryClose.jsx

@@ -1,15 +0,0 @@
-import { useCallback, useMemo } from "react";
-
-import { PositionBox, Text } from "@vnejs/uis.react";
-
-export const HistoryClose = ({ locs = {}, ...props } = {}) => {
-  const onClick = useCallback(() => props.emit(props.EVENTS.HISTORY.HIDE), []);
-
-  const propsText = useMemo(() => ({ ...props.PARAMS.HISTORY.VIEW_PROPS.close.text, text: locs.back, onClick }), [locs]);
-
-  return (
-    <PositionBox {...props.PARAMS.HISTORY.VIEW_PROPS.close.position}>
-      <Text {...propsText} />
-    </PositionBox>
-  );
-};

package/view/components/HistoryLines.jsx

@@ -1,53 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
-
-import { PositionBox, Text, TextControls } from "@vnejs/uis.react";
-
-const scrollToBottom = (scrollbarWrapRef) => {
-  if (!scrollbarWrapRef.current) return requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
-  if (scrollbarWrapRef.current.clientHeight === scrollbarWrapRef.current.scrollHeight || scrollbarWrapRef.current.scrollTop !== 0) return;
-
-  scrollbarWrapRef.current.scrollTop = 9999999;
-  requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
-};
-
-export const HistoryLines = ({ isShow = false, history = [], currentItem = null, historyLocs = [], historyKeys = [], locs = {}, ...props } = {}) => {
-  const scrollbarWrapRef = useRef(null);
-
-  const onClick = useCallback((uid) => historyKeys.includes(uid) && props.emit(props.EVENTS.HISTORY.CLICK, { uid }), [historyKeys]);
-
-  const mapTexts = useCallback(
-    ({ text, uid, speaker, meet }, i) => {
-      const speakers = props.PARAMS.TEXT.SPEAKERS_INFO;
-
-      const { speakerColor = "white" } = speakers[speaker] || speakers.default;
-      const speakerName = locs[`speaker.${speaker}.${meet}`];
-
-      return {
-        text: (historyLocs && historyLocs[i]) || text,
-        value: uid,
-        textPrefix: speakerName ? `${speakerName}: ` : undefined,
-        colorPrefix: speakerColor,
-        weightPrefix: Text.WEIGHT.BOLD,
-        isHoverable: Boolean(historyKeys.find((key) => key === uid)),
-      };
-    },
-    [historyLocs, historyKeys],
-  );
-
-  useEffect(() => {
-    if (isShow) requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
-  }, [isShow]);
-
-  const texts = useMemo(() => history.map(mapTexts), [history, mapTexts]);
-
-  const propsView = props.PARAMS.HISTORY.VIEW_PROPS.lines;
-
-  const propsControlsCommon = useMemo(() => ({ ...propsView.controls, onClick, scrollbarWrapRef }), [scrollbarWrapRef]);
-  const propsControls = useMemo(() => ({ ...propsControlsCommon, texts, selectedIndex: currentItem }), [texts, currentItem]);
-
-  return (
-    <PositionBox {...propsView.position}>
-      <TextControls {...propsControls} />
-    </PositionBox>
-  );
-};

package/view/components/index.js

@@ -1,2 +0,0 @@
-export * from "./HistoryClose";
-export * from "./HistoryLines";

package/view/index.jsx

@@ -1,27 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { Screen } from "@vnejs/uis.react";
-
-import { HistoryClose, HistoryLines } from "./components";
-
-const History = ({ store, onMount, ...props } = {}) => {
-  const [{ isShow = false, isForce = false, locs = {}, history = [], historyLocs = [], historyKeys = [], currentItem = null }, setState] = useState({});
-
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
-
-  const propsScreen = useMemo(() => ({ ...props.PARAMS.HISTORY.VIEW_PROPS.screen, isShow, isForce }), [isShow, isForce]);
-  const propsHistory = useMemo(() => ({ history, historyLocs, historyKeys }), [history, historyLocs, historyKeys]);
-  const propsLines = useMemo(() => ({ ...props, ...propsHistory, isShow, currentItem, locs }), [propsHistory, isShow, currentItem, locs]);
-  const propsClose = useMemo(() => ({ ...props, locs }), [locs]);
-
-  return (
-    <Screen {...propsScreen}>
-      <HistoryLines {...propsLines} />
-      <HistoryClose {...propsClose} />
-    </Screen>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<History {...props} />);