@netless/telebox-insider 0.2.25 → 1.0.0-alpha.2

package/dist/TeleBox/constants.d.ts

@@ -14,11 +14,8 @@ export declare enum TELE_BOX_EVENT {
     Close = "close",
     Focus = "focus",
     Blur = "blur",
-    Move = "move",
-    Resize = "resize",
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
-    VisualResize = "visual_resize",
     ZIndex = "z_index",
     State = "state",
     Minimized = "minimized",

package/dist/TeleBox/index.d.ts

@@ -1,80 +1,120 @@
 import "./style.scss";
+import Emittery from "emittery";
 import { SideEffectManager } from "side-effect-manager";
-import { Val, ValEnhancedResult, ValSideEffectBinder } from "value-enhancer";
-import { TeleTitleBar } from "../TeleTitleBar";
-import type { TeleBoxConfig, TeleBoxRect, TeleBoxEvents, TeleBoxState, TeleBoxDelegateEvents, TeleBoxCoord, TeleBoxSize, TeleBoxColorScheme } from "./typings";
+import type { ReadonlyVal, ReadonlyValEnhancedResult, ValEnhancedResult } from "value-enhancer";
+import { Val } from "value-enhancer";
+import type { TeleTitleBar } from "../TeleTitleBar";
+import type { TeleBoxConfig, TeleBoxState, TeleBoxCoord, TeleBoxSize, TeleBoxRect } from "./typings";
 export * from "./constants";
 export * from "./typings";
+declare type RequiredTeleBoxConfig = Required<TeleBoxConfig>;
 declare type ValConfig = {
-    prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
-    darkMode: Val<boolean, boolean>;
-    containerRect: Val<TeleBoxRect, boolean>;
-    collectorRect: Val<TeleBoxRect | undefined, boolean>;
-    /** Box title. Default empty. */
-    title: Val<string, boolean>;
-    /** Is box visible */
-    visible: Val<boolean, boolean>;
-    /** Is box readonly */
-    readonly: Val<boolean, boolean>;
-    /** Able to resize box window */
-    resizable: Val<boolean, boolean>;
-    /** Able to drag box window */
-    draggable: Val<boolean, boolean>;
-    /** Restrict box to always be within the containing area. */
-    fence: Val<boolean, boolean>;
-    /** Fixed width/height ratio for box window. */
-    fixRatio: Val<boolean, boolean>;
-    focus: Val<boolean, boolean>;
-    zIndex: Val<number, boolean>;
-    /** Is box minimized. Default false. */
-    minimized: Val<boolean, boolean>;
-    /** Is box maximized. Default false. */
-    maximized: Val<boolean, boolean>;
-    $userContent: Val<HTMLElement | undefined>;
-    $userFooter: Val<HTMLElement | undefined>;
-    $userStyles: Val<HTMLStyleElement | undefined>;
+    title: Val<RequiredTeleBoxConfig["title"], boolean>;
+    visible: Val<RequiredTeleBoxConfig["visible"], boolean>;
+    resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
+    draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
+    ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
 };
-export interface TeleBox extends ValEnhancedResult<ValConfig> {
+declare type ReadonlyValConfig = {
+    darkMode: RequiredTeleBoxConfig["darkMode$"];
+    fence: RequiredTeleBoxConfig["fence$"];
+    minimized: RequiredTeleBoxConfig["minimized$"];
+    maximized: RequiredTeleBoxConfig["maximized$"];
+    readonly: RequiredTeleBoxConfig["readonly$"];
+    rootRect: RequiredTeleBoxConfig["rootRect$"];
+    managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    collectorRect: RequiredTeleBoxConfig["collectorRect$"];
+    zIndex: Val<RequiredTeleBoxConfig["zIndex"], boolean>;
+    focus: Val<RequiredTeleBoxConfig["focus"], boolean>;
+    $userContent: Val<TeleBoxConfig["content"], boolean>;
+    $userFooter: Val<TeleBoxConfig["footer"], boolean>;
+    $userStyles: Val<TeleBoxConfig["styles"], boolean>;
+    minSize: Val<TeleBoxSize, boolean>;
+    intrinsicSize: Val<TeleBoxSize, boolean>;
+    intrinsicCoord: Val<TeleBoxCoord, boolean>;
+    pxMinSize: ReadonlyVal<TeleBoxSize, boolean>;
+    pxIntrinsicSize: ReadonlyVal<TeleBoxSize, boolean>;
+    pxIntrinsicCoord: ReadonlyVal<TeleBoxCoord, boolean>;
+    state: ReadonlyVal<TeleBoxState, boolean>;
+    highlightStage: ReadonlyVal<boolean, boolean>;
+    boxHighlightStage: Val<boolean | null, boolean>;
+    contentRect: Val<TeleBoxRect>;
+    contentStageRect: ReadonlyVal<TeleBoxRect | null>;
+};
+declare type CombinedValEnhancedResult = ReadonlyValEnhancedResult<ReadonlyValConfig> & ValEnhancedResult<ValConfig>;
+export interface TeleBox extends CombinedValEnhancedResult {
 }
 export declare class TeleBox {
-    constructor({ id, title, prefersColorScheme, darkMode, visible, width, height, minWidth, minHeight, x, y, minimized, maximized, readonly, resizable, draggable, fence, fixRatio, focus, zIndex, namespace, titleBar, content, footer, styles, containerRect, collectorRect, }?: TeleBoxConfig);
+    constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, ratio, focus, zIndex, titleBar, content, footer, styles, highlightStage, darkMode$, fence$, minimized$, maximized$, readonly$, root$, rootRect$, managerStageRect$, stageRatio$, collectorRect$, managerHighlightStage$, }: TeleBoxConfig);
     readonly id: string;
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     readonly namespace: string;
-    readonly events: TeleBoxEvents;
-    readonly _delegateEvents: TeleBoxDelegateEvents;
+    readonly events: Emittery<{
+        dark_mode: boolean;
+        prefers_color_scheme: "light" | "dark" | "auto";
+        close: undefined;
+        focus: undefined;
+        blur: undefined;
+        intrinsic_move: {
+            x: number;
+            y: number;
+        };
+        intrinsic_resize: {
+            width: number;
+            height: number;
+        };
+        z_index: number;
+        state: "normal" | "minimized" | "maximized";
+        minimized: boolean;
+        maximized: boolean;
+        readonly: boolean;
+        destroyed: undefined;
+    }, {
+        dark_mode: boolean;
+        prefers_color_scheme: "light" | "dark" | "auto";
+        close: undefined;
+        focus: undefined;
+        blur: undefined;
+        intrinsic_move: {
+            x: number;
+            y: number;
+        };
+        intrinsic_resize: {
+            width: number;
+            height: number;
+        };
+        z_index: number;
+        state: "normal" | "minimized" | "maximized";
+        minimized: boolean;
+        maximized: boolean;
+        readonly: boolean;
+        destroyed: undefined;
+    }, "close" | "focus" | "blur" | "destroyed">;
+    readonly _delegateEvents: Emittery<{
+        close: undefined;
+        maximize: undefined;
+        minimize: undefined;
+    }, {
+        close: undefined;
+        maximize: undefined;
+        minimize: undefined;
+    }, "close" | "maximize" | "minimize">;
     protected _sideEffect: SideEffectManager;
-    protected _valSideEffectBinder: ValSideEffectBinder;
     titleBar: TeleTitleBar;
-    _minSize$: Val<TeleBoxSize, boolean>;
-    _size$: Val<TeleBoxSize, boolean>;
-    _intrinsicSize$: Val<TeleBoxSize, boolean>;
-    _visualSize$: Val<TeleBoxSize, boolean>;
-    _coord$: Val<TeleBoxCoord, boolean>;
-    _intrinsicCoord$: Val<TeleBoxCoord, boolean>;
-    get darkMode(): boolean;
-    _state$: Val<TeleBoxState, boolean>;
-    get state(): TeleBoxState;
-    /** @deprecated use setMaximized and setMinimized instead */
-    setState(state: TeleBoxState, skipUpdate?: boolean): this;
-    /** Minimum box width relative to container element. 0~1. Default 0. */
+    /** Minimum box width relative to stage area. 0~1. Default 0. */
     get minWidth(): number;
-    /** Minimum box height relative to container element. 0~1. Default 0. */
+    /** Minimum box height relative to stage area. 0~1. Default 0. */
     get minHeight(): number;
     /**
-     * @param minWidth Minimum box width relative to container element. 0~1.
+     * @param minWidth Minimum box width relative to stage area. 0~1.
      * @returns this
      */
-    setMinWidth(minWidth: number, skipUpdate?: boolean): this;
+    setMinWidth(minWidth: number, skipUpdate?: boolean): void;
     /**
      * @param minHeight Minimum box height relative to container element. 0~1.
      * @returns this
      */
-    setMinHeight(minHeight: number, skipUpdate?: boolean): this;
-    /** Intrinsic box width relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.5. */
-    get intrinsicWidth(): number;
-    /** Intrinsic box height relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.5. */
-    get intrinsicHeight(): number;
+    setMinHeight(minHeight: number, skipUpdate?: boolean): void;
     /**
      * Resize box.
      * @param width Box width relative to container element. 0~1.
@@ -82,72 +122,54 @@ export declare class TeleBox {
      * @param skipUpdate Skip emitting event.
      * @returns this
      */
-    resize(width: number, height: number, skipUpdate?: boolean): this;
-    /** Box width relative to container element. 0~1. Default 0.5. */
-    get width(): number;
-    /** Box height relative to container element. 0~1. Default 0.5. */
-    get height(): number;
-    /** Box width in pixels. */
-    get absoluteWidth(): number;
-    /** Box height in pixels. */
-    get absoluteHeight(): number;
-    /** Actual rendered box width relative to container element. 0~1. Default 0.5. */
-    get visualWidth(): number;
-    /** Actual rendered box height relative to container element. 0~1. Default 0.5. */
-    get visualHeight(): number;
+    resize(width: number, height: number, skipUpdate?: boolean): void;
     /** Intrinsic box x position relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.1. */
     get intrinsicX(): number;
     /** Intrinsic box y position relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.1. */
     get intrinsicY(): number;
+    /** Intrinsic box width relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.1. */
+    get intrinsicWidth(): number;
+    /** Intrinsic box height relative to container element(without counting the effect of maximization or minimization). 0~1. Default 0.1. */
+    get intrinsicHeight(): number;
     /**
      * Move box position.
-     * @param x x position relative to container element. 0~1.
-     * @param y y position relative to container element. 0~1.
+     * @param x x position in px.
+     * @param y y position in px.
      * @param skipUpdate Skip emitting event.
      * @returns this
      */
-    move(x: number, y: number, skipUpdate?: boolean): this;
-    /** Box x position relative to container element. 0~1. Default 0.1. */
-    get x(): number;
-    /** Box y position relative to container element. 0~1. Default 0.1. */
-    get y(): number;
+    protected move(x: number, y: number, skipUpdate?: boolean): void;
     /**
      * Resize + Move, with respect to fixed ratio.
-     * @param x x position relative to container element. 0~1.
-     * @param y y position relative to container element. 0~1.
-     * @param width Box width relative to container element. 0~1.
-     * @param height Box height relative to container element. 0~1.
+     * @param x x position in px.
+     * @param y y position in px.
+     * @param width Box width in px.
+     * @param height Box height in px.
      * @param skipUpdate Skip emitting event.
      * @returns this
      */
-    transform(x: number, y: number, width: number, height: number, skipUpdate?: boolean): this;
-    /**
-     * Mount box to a container element.
-     */
-    mount(container: HTMLElement): this;
-    /**
-     * Unmount box from the container element.
-     */
-    unmount(): this;
+    protected transform(x: number, y: number, width: number, height: number, skipUpdate?: boolean): void;
     /**
      * Mount dom to box content.
      */
-    mountContent(content: HTMLElement): this;
+    mountContent(content: HTMLElement): void;
     /**
      * Unmount content from the box.
      */
-    unmountContent(): this;
+    unmountContent(): void;
     /**
      * Mount dom to box Footer.
      */
-    mountFooter(footer: HTMLElement): this;
+    mountFooter(footer: HTMLElement): void;
     /**
      * Unmount Footer from the box.
      */
-    unmountFooter(): this;
+    unmountFooter(): void;
     getUserStyles(): HTMLStyleElement | undefined;
-    mountStyles(styles: string | HTMLStyleElement): this;
-    unmountStyles(): this;
+    mountStyles(styles: string | HTMLStyleElement): void;
+    unmountStyles(): void;
+    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. */
+    setHighlightStage(highlightStage: boolean | null): void;
     /** DOM of the box */
     $box: HTMLElement;
     /** DOM of the box content */
@@ -156,12 +178,11 @@ export declare class TeleBox {
     $titleBar: HTMLElement;
     /** DOM of the box footer */
     $footer: HTMLElement;
-    protected _renderSideEffect: SideEffectManager;
-    render(root?: HTMLElement): HTMLElement;
+    protected render(): HTMLElement;
     protected _handleTrackStart?: (ev: MouseEvent | TouchEvent) => void;
     handleTrackStart: (ev: MouseEvent | TouchEvent) => void;
     protected _renderResizeHandlers(): void;
-    destroy(): void;
+    destroy(): Promise<void>;
     /**
      * Wrap a className with namespace
      */

package/dist/TeleBox/typings.d.ts

@@ -1,4 +1,5 @@
-import type EventEmitter from "eventemitter3";
+import type Emittery from "emittery";
+import type { ReadonlyVal } from "value-enhancer";
 import type { TeleTitleBar } from "../TeleTitleBar";
 import type { TeleBoxDragHandleType, TELE_BOX_EVENT, TELE_BOX_DELEGATE_EVENT, TELE_BOX_RESIZE_HANDLE, TELE_BOX_STATE, TELE_BOX_COLOR_SCHEME } from "./constants";
 export declare type TeleBoxColorScheme = `${TELE_BOX_COLOR_SCHEME}`;
@@ -22,40 +23,28 @@ export interface TeleBoxConfig {
     readonly id?: string;
     /** Box title. Default empty. */
     readonly title?: string;
-    /** Prefers Box color scheme. Default light. */
-    readonly prefersColorScheme?: TeleBoxColorScheme;
-    /** Actual Box Dark Mode */
-    readonly darkMode?: boolean;
     /** Box visible. Default true. */
     readonly visible?: boolean;
-    /** Box width relative to root element. 0~1. Default 0.5. */
+    /** Box width relative to stage area. 0~1. Default 0.5. */
     readonly width?: number;
-    /** Box height relative to root element. 0~1. Default 0.5. */
+    /** Box height relative to stage area. 0~1. Default 0.5. */
     readonly height?: number;
-    /** Minimum box width relative to root element. 0~1. Default 0. */
+    /** Minimum box width relative to stage area. 0~1. Default 0. */
     readonly minWidth?: number;
-    /** Minimum box height relative to root element. 0~1. Default 0. */
+    /** Minimum box height relative to stage area. 0~1. Default 0. */
     readonly minHeight?: number;
-    /** x position relative to root element. 0~1. Default 0.1. */
+    /** x position relative to stage area. 0~1. Default 0.1. */
     readonly x?: number;
-    /** y position relative to root element. 0~1. Default 0.1. */
+    /** y position relative to stage area. 0~1. Default 0.1. */
     readonly y?: number;
-    /** Maximize box. Default false. */
-    readonly maximized?: boolean;
-    /** Minimize box. Overwrites maximized state. Default false. */
-    readonly minimized?: boolean;
     /** The initial state of the box. Default normal. */
     readonly state?: TeleBoxState;
-    /** Is box readonly */
-    readonly readonly?: boolean;
     /** Able to resize box window. Default true. */
     readonly resizable?: boolean;
     /** Able to drag box window Default true. */
     readonly draggable?: boolean;
-    /** Restrict box to always be within the containing area. Default true. */
-    readonly fence?: boolean;
-    /** Fixed width/height ratio for box window. Default false. */
-    readonly fixRatio?: boolean;
+    /** Fixed height/width ratio for box window. No ratio limit if <= 0. Default -1. */
+    readonly ratio?: number;
     /** Box focused. */
     readonly focus?: boolean;
     /** Base z-index for box. */
@@ -70,26 +59,38 @@ export interface TeleBoxConfig {
     readonly footer?: HTMLElement;
     /** Box content styles. */
     readonly styles?: HTMLStyleElement;
-    /** Position and dimension of container */
-    readonly containerRect?: TeleBoxRect;
+    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. Default null. */
+    readonly highlightStage?: boolean | null;
+    /** Actual Box Dark Mode */
+    readonly darkMode$: ReadonlyVal<boolean, boolean>;
+    /** Restrict box to always be within the stage area. Default false. */
+    readonly fence$: ReadonlyVal<boolean, boolean>;
+    /** Maximize box. Default false. */
+    readonly maximized$: ReadonlyVal<boolean, boolean>;
+    /** Minimize box. Overwrites maximized state. Default false. */
+    readonly minimized$: ReadonlyVal<boolean, boolean>;
+    /** Is box readonly */
+    readonly readonly$: ReadonlyVal<boolean, boolean>;
+    /** Root element to mount boxes */
+    readonly root$: ReadonlyVal<HTMLElement | null>;
+    /** Position and dimension of root element */
+    readonly rootRect$: ReadonlyVal<TeleBoxRect>;
+    /** Position and dimension of stage area */
+    readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
+    /** Stage area height/with ratio. No ratio if <= 0. */
+    readonly stageRatio$: ReadonlyVal<number, boolean>;
     /** Position and dimension of collector */
-    readonly collectorRect?: TeleBoxRect;
+    readonly collectorRect$: ReadonlyVal<TeleBoxRect | undefined>;
+    /** highlight stage settings from manager */
+    readonly managerHighlightStage$: ReadonlyVal<boolean>;
 }
 declare type CheckTeleBoxConfig<T extends Record<`${TELE_BOX_EVENT}`, any>> = T;
 export declare type TeleBoxEventConfig = CheckTeleBoxConfig<{
     dark_mode: boolean;
     prefers_color_scheme: TeleBoxColorScheme;
-    close: void;
-    focus: void;
-    blur: void;
-    move: {
-        x: number;
-        y: number;
-    };
-    resize: {
-        width: number;
-        height: number;
-    };
+    close: undefined;
+    focus: undefined;
+    blur: undefined;
     intrinsic_move: {
         x: number;
         y: number;
@@ -98,36 +99,22 @@ export declare type TeleBoxEventConfig = CheckTeleBoxConfig<{
         width: number;
         height: number;
     };
-    visual_resize: {
-        width: number;
-        height: number;
-    };
     z_index: number;
     state: TeleBoxState;
     minimized: boolean;
     maximized: boolean;
     readonly: boolean;
-    destroyed: void;
+    destroyed: undefined;
 }>;
 export declare type TeleBoxEvent = keyof TeleBoxEventConfig;
-export interface TeleBoxEvents extends EventEmitter<TeleBoxEvent> {
-    on<U extends TeleBoxEvent>(event: U, listener: (value: TeleBoxEventConfig[U]) => void): this;
-    once<U extends TeleBoxEvent>(event: U, listener: (value: TeleBoxEventConfig[U]) => void): this;
-    addListener<U extends TeleBoxEvent>(event: U, listener: (value: TeleBoxEventConfig[U]) => void): this;
-    emit<U extends TeleBoxEvent>(event: U, ...value: TeleBoxEventConfig[U] extends void ? [] : [TeleBoxEventConfig[U]]): boolean;
-}
+export declare type TeleBoxEvents = Emittery<TeleBoxEventConfig>;
 export declare type TeleBoxHandleType = TELE_BOX_RESIZE_HANDLE | typeof TeleBoxDragHandleType;
 declare type CheckTeleBoxDelegateConfig<T extends Record<`${TELE_BOX_DELEGATE_EVENT}`, any>> = T;
 export declare type TeleBoxDelegateEventConfig = CheckTeleBoxDelegateConfig<{
-    close: void;
-    maximize: void;
-    minimize: void;
+    close: undefined;
+    maximize: undefined;
+    minimize: undefined;
 }>;
 export declare type TeleBoxDelegateEvent = keyof TeleBoxDelegateEventConfig;
-export interface TeleBoxDelegateEvents extends EventEmitter<TeleBoxDelegateEvent> {
-    on<U extends TeleBoxDelegateEvent>(event: U, listener: (value: TeleBoxDelegateEventConfig[U]) => void): this;
-    once<U extends TeleBoxDelegateEvent>(event: U, listener: (value: TeleBoxDelegateEventConfig[U]) => void): this;
-    addListener<U extends TeleBoxDelegateEvent>(event: U, listener: (value: TeleBoxDelegateEventConfig[U]) => void): this;
-    emit<U extends TeleBoxDelegateEvent>(event: U, ...value: TeleBoxDelegateEventConfig[U] extends void ? [] : [TeleBoxDelegateEventConfig[U]]): boolean;
-}
+export declare type TeleBoxDelegateEvents = Emittery<TeleBoxDelegateEventConfig>;
 export {};

package/dist/TeleBoxCollector/index.d.ts

@@ -1,39 +1,35 @@
 import "./style.scss";
-import { TeleStyles } from "../typings";
+import type { TeleStyles } from "../typings";
+import type { ReadonlyVal, ReadonlyValEnhancedResult, ValEnhancedResult } from "value-enhancer";
+import { Val } from "value-enhancer";
+import { SideEffectManager } from "side-effect-manager";
+import type { TeleBoxRect } from "../TeleBox/typings";
 export interface TeleBoxCollectorConfig {
-    visible?: boolean;
-    readonly?: boolean;
-    darkMode?: boolean;
     namespace?: string;
     styles?: TeleStyles;
-    onClick?: () => void;
+    root$: ReadonlyVal<HTMLElement | null>;
+    minimized$: Val<boolean>;
+    readonly$: ReadonlyVal<boolean>;
+    darkMode$: ReadonlyVal<boolean>;
+    rootRect$: ReadonlyVal<TeleBoxRect>;
+}
+declare type ValConfig = {
+    styles: Val<TeleStyles>;
+    el: Val<HTMLElement>;
+};
+declare type ReadonlyValConfig = {
+    rect: ReadonlyVal<TeleBoxRect | undefined>;
+    visible: ReadonlyVal<boolean>;
+    root: ReadonlyVal<HTMLElement | null>;
+};
+declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
+export interface TeleBoxCollector extends CombinedValEnhancedResult {
 }
 export declare class TeleBoxCollector {
-    constructor({ visible, readonly, darkMode, namespace, styles, onClick, }?: TeleBoxCollectorConfig);
-    readonly styles: TeleStyles;
+    constructor({ minimized$, readonly$, darkMode$, rootRect$, namespace, styles, root$, }: TeleBoxCollectorConfig);
     readonly namespace: string;
-    get visible(): boolean;
-    get readonly(): boolean;
-    get darkMode(): boolean;
-    onClick: (() => void) | undefined;
-    $collector: HTMLElement | undefined;
-    /**
-     * Mount collector to a root element.
-     */
-    mount(root: HTMLElement): this;
-    /**
-     * Unmount collector from the root element.
-     */
-    unmount(): this;
-    setVisible(visible: boolean): this;
-    setReadonly(readonly: boolean): this;
-    setDarkMode(darkMode: boolean): this;
-    setStyles(styles: TeleStyles): this;
-    render(): HTMLElement;
+    protected readonly _sideEffect: SideEffectManager;
     destroy(): void;
     wrapClassName(className: string): string;
-    protected _visible: boolean;
-    protected _readonly: boolean;
-    protected _darkMode: boolean;
-    protected handleCollectorClick: () => void;
 }
+export {};

package/dist/TeleBoxManager/MaxTitleBar/index.d.ts

@@ -1,29 +1,25 @@
 import "./style.scss";
 import type { TeleBox } from "../../TeleBox";
-import { DefaultTitleBar, DefaultTitleBarConfig } from "../../TeleTitleBar";
-import { TeleBoxRect, TeleBoxState } from "../../TeleBox/typings";
-export declare type MaxTitleBarTeleBox = Pick<TeleBox, "id" | "title" | "readonly">;
+import type { DefaultTitleBarConfig } from "../../TeleTitleBar";
+import { DefaultTitleBar } from "../../TeleTitleBar";
+import type { TeleBoxRect } from "../../TeleBox/typings";
+import type { ReadonlyVal } from "value-enhancer";
+export declare type MaxTitleBarTitle = Pick<TeleBox, "id" | "title">;
 export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
-    darkMode: boolean;
-    boxes: MaxTitleBarTeleBox[];
-    containerRect: TeleBoxRect;
-    focusedBox?: MaxTitleBarTeleBox;
+    darkMode$: ReadonlyVal<boolean>;
+    boxes$: ReadonlyVal<TeleBox[]>;
+    rootRect$: ReadonlyVal<TeleBoxRect>;
+    root$: ReadonlyVal<HTMLElement | null>;
 }
 export declare class MaxTitleBar extends DefaultTitleBar {
     constructor(config: MaxTitleBarConfig);
-    focusBox(box?: MaxTitleBarTeleBox): void;
-    setContainerRect(rect: TeleBoxRect): void;
-    setBoxes(boxes: MaxTitleBarTeleBox[]): void;
-    setState(state: TeleBoxState): void;
-    setReadonly(readonly: boolean): void;
-    setDarkMode(darkMode: boolean): void;
+    focusBox(box?: TeleBox): void;
     render(): HTMLElement;
     destroy(): void;
-    updateTitles(): void;
     protected renderTitles(): HTMLElement;
-    protected darkMode: boolean;
+    focusedBox: TeleBox | undefined;
+    protected darkMode$: MaxTitleBarConfig["darkMode$"];
+    protected boxes$: MaxTitleBarConfig["boxes$"];
+    protected rootRect$: MaxTitleBarConfig["rootRect$"];
     protected $titles: HTMLElement | undefined;
-    protected boxes: MaxTitleBarTeleBox[];
-    focusedBox: MaxTitleBarTeleBox | undefined;
-    protected containerRect: TeleBoxRect;
 }

package/dist/TeleBoxManager/constants.d.ts

@@ -6,11 +6,8 @@ export declare enum TELE_BOX_MANAGER_EVENT {
     State = "state",
     Maximized = "maximized",
     Minimized = "minimized",
-    Move = "move",
-    Resize = "resize",
     IntrinsicMove = "intrinsic_move",
     IntrinsicResize = "intrinsic_resize",
-    VisualResize = "visual_resize",
     ZIndex = "z_index",
     PrefersColorScheme = "prefers_color_scheme",
     DarkMode = "dark_mode"