@netless/telebox-insider 1.0.0-alpha.3 → 1.0.0-alpha.32

package/dist/TeleBox/index.d.ts

@@ -13,22 +13,33 @@ declare type ValConfig = {
     visible: Val<RequiredTeleBoxConfig["visible"], boolean>;
     resizable: Val<RequiredTeleBoxConfig["resizable"], boolean>;
     draggable: Val<RequiredTeleBoxConfig["draggable"], boolean>;
-    ratio: Val<RequiredTeleBoxConfig["ratio"], boolean>;
+    boxRatio: Val<RequiredTeleBoxConfig["boxRatio"], boolean>;
+    boxMinimized: Val<boolean | null, boolean>;
+    boxMaximized: Val<boolean | null, boolean>;
+    boxReadonly: Val<boolean | null, boolean>;
+    stageRatio: Val<RequiredTeleBoxConfig["stageRatio"], boolean>;
+    stageStyle: Val<RequiredTeleBoxConfig["stageStyle"], boolean>;
+    bodyStyle: Val<RequiredTeleBoxConfig["bodyStyle"], boolean>;
 };
-declare type ReadonlyValConfig = {
+declare type PropsValConfig = {
     darkMode: RequiredTeleBoxConfig["darkMode$"];
     fence: RequiredTeleBoxConfig["fence$"];
-    minimized: RequiredTeleBoxConfig["minimized$"];
-    maximized: RequiredTeleBoxConfig["maximized$"];
-    readonly: RequiredTeleBoxConfig["readonly$"];
     rootRect: RequiredTeleBoxConfig["rootRect$"];
+    managerMinimized: RequiredTeleBoxConfig["managerMinimized$"];
+    managerMaximized: RequiredTeleBoxConfig["managerMaximized$"];
+    managerReadonly: RequiredTeleBoxConfig["managerReadonly$"];
     managerStageRect: RequiredTeleBoxConfig["managerStageRect$"];
+    managerStageRatio: RequiredTeleBoxConfig["managerStageRatio$"];
+    defaultBoxStageStyle: RequiredTeleBoxConfig["defaultBoxStageStyle$"];
+    defaultBoxBodyStyle: RequiredTeleBoxConfig["defaultBoxBodyStyle$"];
     collectorRect: RequiredTeleBoxConfig["collectorRect$"];
+};
+declare type MyReadonlyValConfig = {
     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>;
+    minimized: ReadonlyVal<boolean, boolean>;
+    maximized: ReadonlyVal<boolean, boolean>;
+    readonly: ReadonlyVal<boolean, boolean>;
     minSize: Val<TeleBoxSize, boolean>;
     intrinsicSize: Val<TeleBoxSize, boolean>;
     intrinsicCoord: Val<TeleBoxCoord, boolean>;
@@ -36,19 +47,19 @@ declare type ReadonlyValConfig = {
     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>;
+    bodyRect: Val<TeleBoxRect>;
+    stageRect: ReadonlyVal<TeleBoxRect>;
 };
-declare type CombinedValEnhancedResult = ReadonlyValEnhancedResult<ReadonlyValConfig> & ValEnhancedResult<ValConfig>;
+declare type CombinedValEnhancedResult = ReadonlyValEnhancedResult<PropsValConfig & MyReadonlyValConfig> & ValEnhancedResult<ValConfig>;
 export interface TeleBox extends CombinedValEnhancedResult {
 }
 export declare class TeleBox {
-    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);
+    constructor({ id, title, namespace, visible, width, height, minWidth, minHeight, x, y, resizable, draggable, boxRatio, focus, zIndex, stageRatio, enableShadowDOM, titleBar, content, stage, footer, styles, userStyles, bodyStyle, stageStyle, darkMode$, fence$, root, rootRect$, managerMinimized$, managerMaximized$, managerReadonly$, managerStageRect$, managerStageRatio$, defaultBoxBodyStyle$, defaultBoxStageStyle$, collectorRect$, }: TeleBoxConfig);
     readonly id: string;
     /** ClassName Prefix. For CSS styling. Default "telebox" */
     readonly namespace: string;
+    /** Enable shadow DOM for box content. Default true. */
+    readonly enableShadowDOM: boolean;
     readonly events: Emittery<{
         dark_mode: boolean;
         prefers_color_scheme: "light" | "dark" | "auto";
@@ -149,39 +160,52 @@ export declare class TeleBox {
      * @returns this
      */
     protected transform(x: number, y: number, width: number, height: number, skipUpdate?: boolean): void;
-    /**
-     * Mount dom to box content.
-     */
+    private $authorContent?;
+    /** Mount dom to box content. */
     mountContent(content: HTMLElement): void;
-    /**
-     * Unmount content from the box.
-     */
+    /**  Unmount content from the box. */
     unmountContent(): void;
-    /**
-     * Mount dom to box Footer.
-     */
+    private $authorStage?;
+    /** Mount dom to box stage. */
+    mountStage(stage: HTMLElement): void;
+    /** Unmount content from the box. */
+    unmountStage(): void;
+    private $authorFooter?;
+    /** Mount dom to box Footer. */
     mountFooter(footer: HTMLElement): void;
-    /**
-     * Unmount Footer from the box.
-     */
+    /** Unmount Footer from the box. */
     unmountFooter(): void;
-    getUserStyles(): HTMLStyleElement | undefined;
-    mountStyles(styles: string | HTMLStyleElement): void;
+    /** Mount styles for box content */
+    mountStyles(styles: string): void;
+    /** Umount styles for box content */
     unmountStyles(): void;
-    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. */
-    setHighlightStage(highlightStage: boolean | null): void;
+    /** Mount user styles for box content */
+    mountUserStyles(styles: string): void;
+    /** Umount user styles for box content */
+    unmountUserStyles(): void;
     /** DOM of the box */
     $box: HTMLElement;
-    /** DOM of the box content */
+    /** DOM of main area of the box. Including $body and $footer. */
+    $main: HTMLElement;
+    /** DOM of the box body */
+    $body: HTMLElement;
+    /** DOM of the box content container inside box body */
     $content: HTMLElement;
-    /** DOM of the box title bar */
+    /** DOM of the box stage area inside box body */
+    $stage?: HTMLElement;
+    /** DOM of custom box content styles */
+    $styles: HTMLStyleElement;
+    /** DOM of end user custom box content styles */
+    $userStyles: HTMLStyleElement;
+    /** DOM of the box title bar container */
     $titleBar: HTMLElement;
-    /** DOM of the box footer */
+    /** DOM of the box footer container */
     $footer: HTMLElement;
-    protected render(): HTMLElement;
-    protected _handleTrackStart?: (ev: MouseEvent | TouchEvent) => void;
-    handleTrackStart: (ev: MouseEvent | TouchEvent) => void;
-    protected _renderResizeHandlers(): void;
+    private _render;
+    private _renderStage;
+    private _handleTrackStart?;
+    handleTrackStart: (ev: PointerEvent) => void;
+    private _renderResizeHandlers;
     destroy(): Promise<void>;
     /**
      * Wrap a className with namespace
@@ -189,4 +213,4 @@ export declare class TeleBox {
     wrapClassName(className: string): string;
 }
 declare type PropKeys<K = keyof TeleBox> = K extends keyof TeleBox ? TeleBox[K] extends Function ? never : K : never;
-export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "mountFooter" | "mountStyles" | "handleTrackStart">;
+export declare type ReadonlyTeleBox = Pick<TeleBox, PropKeys | "wrapClassName" | "mountContent" | "unmountContent" | "mountFooter" | "unmountFooter" | "mountStage" | "unmountStage" | "mountStyles" | "unmountStyles" | "setTitle" | "setDraggable" | "setResizable" | "setVisible" | "setBoxRatio" | "setStageRatio" | "setStageStyle" | "setBodyStyle" | "handleTrackStart" | "onValChanged">;

package/dist/TeleBox/typings.d.ts

@@ -44,45 +44,57 @@ export interface TeleBoxConfig {
     /** Able to drag box window Default true. */
     readonly draggable?: boolean;
     /** Fixed height/width ratio for box window. No ratio limit if <= 0. Default -1. */
-    readonly ratio?: number;
+    readonly boxRatio?: number;
     /** Box focused. */
     readonly focus?: boolean;
     /** Base z-index for box. */
     readonly zIndex?: number;
+    /** Box content stage ratio. Follow manager stage ratio if null. Default null. */
+    readonly stageRatio?: number | null;
     /** Classname Prefix. For CSS styling. Default "telebox". */
     readonly namespace?: string;
+    /** Enable shadow DOM for box content. Default true. */
+    readonly enableShadowDOM?: boolean;
     /** TeleTitleBar Instance. */
     readonly titleBar?: TeleTitleBar;
-    /** Box content. */
+    /** Box content element. */
     readonly content?: HTMLElement;
-    /** Box footer. */
+    /** Stage element. */
+    readonly stage?: HTMLElement;
+    /** Box footer element. */
     readonly footer?: HTMLElement;
     /** Box content styles. */
-    readonly styles?: HTMLStyleElement;
-    /** Show stage frame and grey-out the non-stage area. Inherit setting from manager if null. Default null. */
-    readonly highlightStage?: boolean | null;
+    readonly styles?: string;
+    /** Box content styles from end users. */
+    readonly userStyles?: string;
+    /** Custom styles for box content container. Inherit from manager container style if null. Default null. */
+    readonly bodyStyle?: string | null;
+    /** Custom styles for box content stage. Inherit from manager stage style if null. Default null. */
+    readonly stageStyle?: string | 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>;
+    readonly root: HTMLElement;
     /** Position and dimension of root element */
     readonly rootRect$: ReadonlyVal<TeleBoxRect>;
+    /** Maximize state from manager. Default false. */
+    readonly managerMaximized$: ReadonlyVal<boolean, boolean>;
+    /** Minimize state from manager. Overwrites maximized state. Default false. */
+    readonly managerMinimized$: ReadonlyVal<boolean, boolean>;
+    /** Manager readonly state. */
+    readonly managerReadonly$: ReadonlyVal<boolean, boolean>;
     /** Position and dimension of stage area */
     readonly managerStageRect$: ReadonlyVal<TeleBoxRect>;
     /** Stage area height/with ratio. No ratio if <= 0. */
-    readonly stageRatio$: ReadonlyVal<number, boolean>;
+    readonly managerStageRatio$: ReadonlyVal<number, boolean>;
+    /** Default content styles for all boxes */
+    readonly defaultBoxBodyStyle$: ReadonlyVal<string | null>;
+    /** Default stage styles for all boxes */
+    readonly defaultBoxStageStyle$: ReadonlyVal<string | null>;
     /** Position and dimension of collector */
     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<{

package/dist/TeleBox/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TeleBoxRect } from "./typings";
+export declare function calcStageRect([rootRect, ratio]: [
+    TeleBoxRect,
+    number
+]): TeleBoxRect;

package/dist/TeleBoxCollector/index.d.ts

@@ -7,26 +7,25 @@ import type { TeleBoxRect } from "../TeleBox/typings";
 export interface TeleBoxCollectorConfig {
     namespace?: string;
     styles?: TeleStyles;
-    root$: ReadonlyVal<HTMLElement | null>;
-    minimized$: Val<boolean>;
+    root: HTMLElement;
+    minimized$: ReadonlyVal<boolean>;
     readonly$: ReadonlyVal<boolean>;
     darkMode$: ReadonlyVal<boolean>;
-    rootRect$: ReadonlyVal<TeleBoxRect>;
+    onClick?: () => void;
 }
 declare type ValConfig = {
     styles: Val<TeleStyles>;
-    el: Val<HTMLElement>;
+    $collector: Val<HTMLElement>;
 };
-declare type ReadonlyValConfig = {
+declare type MyReadonlyValConfig = {
     rect: ReadonlyVal<TeleBoxRect | undefined>;
     visible: ReadonlyVal<boolean>;
-    root: ReadonlyVal<HTMLElement | null>;
 };
-declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
+declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<MyReadonlyValConfig>;
 export interface TeleBoxCollector extends CombinedValEnhancedResult {
 }
 export declare class TeleBoxCollector {
-    constructor({ minimized$, readonly$, darkMode$, rootRect$, namespace, styles, root$, }: TeleBoxCollectorConfig);
+    constructor({ minimized$, readonly$, darkMode$, namespace, styles, root, onClick, }: TeleBoxCollectorConfig);
     readonly namespace: string;
     protected readonly _sideEffect: SideEffectManager;
     destroy(): void;

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

@@ -9,7 +9,7 @@ export interface MaxTitleBarConfig extends DefaultTitleBarConfig {
     darkMode$: ReadonlyVal<boolean>;
     boxes$: ReadonlyVal<TeleBox[]>;
     rootRect$: ReadonlyVal<TeleBoxRect>;
-    root$: ReadonlyVal<HTMLElement | null>;
+    root: HTMLElement;
 }
 export declare class MaxTitleBar extends DefaultTitleBar {
     constructor(config: MaxTitleBarConfig);

package/dist/TeleBoxManager/index.d.ts

@@ -1,3 +1,4 @@
+import "./style.scss";
 import { SideEffectManager } from "side-effect-manager";
 import type { ReadonlyVal, ValEnhancedResult, ReadonlyValEnhancedResult } from "value-enhancer";
 import { Val } from "value-enhancer";
@@ -5,7 +6,7 @@ import Emittery from "emittery";
 import type { ReadonlyTeleBox, TeleBoxColorScheme, TeleBoxRect, TeleBoxState } from "../TeleBox";
 import { TeleBox } from "../TeleBox";
 import { TeleBoxCollector } from "../TeleBoxCollector";
-import type { TeleBoxManagerConfig, TeleBoxManagerCreateConfig, TeleBoxManagerQueryConfig, TeleBoxManagerUpdateConfig } from "./typings";
+import type { TeleBoxManagerConfig, TeleBoxManagerCreateConfig, TeleBoxFullscreen, TeleBoxManagerQueryConfig, TeleBoxManagerThemeConfig, TeleBoxManagerUpdateConfig } from "./typings";
 import { MaxTitleBar } from "./MaxTitleBar";
 export * from "./typings";
 export * from "./constants";
@@ -15,21 +16,27 @@ declare type ReadonlyValConfig = {
     root: Val<HTMLElement | null>;
     rootRect: Val<TeleBoxRect>;
     stageRect: ReadonlyVal<TeleBoxRect>;
+    minimized: ReadonlyVal<boolean, boolean>;
+    maximized: ReadonlyVal<boolean, boolean>;
 };
 declare type ValConfig = {
+    fullscreen: Val<TeleBoxFullscreen>;
     prefersColorScheme: Val<TeleBoxColorScheme, boolean>;
     readonly: Val<boolean, boolean>;
-    minimized: Val<boolean, boolean>;
-    maximized: Val<boolean, boolean>;
     fence: Val<boolean, boolean>;
     stageRatio: Val<number, boolean>;
-    highlightStage: Val<boolean, boolean>;
+    containerStyle: Val<string>;
+    stageStyle: Val<string>;
+    defaultBoxBodyStyle: Val<string | null>;
+    defaultBoxStageStyle: Val<string | null>;
 };
 declare type CombinedValEnhancedResult = ValEnhancedResult<ValConfig> & ReadonlyValEnhancedResult<ReadonlyValConfig>;
 export interface TeleBoxManager extends CombinedValEnhancedResult {
 }
 export declare class TeleBoxManager {
-    constructor({ root, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, highlightStage, }?: TeleBoxManagerConfig);
+    constructor({ root, fullscreen, prefersColorScheme, minimized, maximized, fence, collector, namespace, readonly, stageRatio, containerStyle, stageStyle, defaultBoxBodyStyle, defaultBoxStageStyle, theme, }?: TeleBoxManagerConfig);
+    readonly $container: HTMLDivElement;
+    readonly $stage: HTMLDivElement;
     get boxes(): ReadonlyArray<TeleBox>;
     get topBox(): TeleBox | undefined;
     readonly events: Emittery<{
@@ -67,6 +74,8 @@ export declare class TeleBoxManager {
     }, never>;
     protected _sideEffect: SideEffectManager;
     readonly namespace: string;
+    setMinimized: (minimized: boolean, skipUpdate?: boolean) => void;
+    setMaximized: (maximized: boolean, skipUpdate?: boolean) => void;
     /** @deprecated use setMaximized and setMinimized instead */
     setState(state: TeleBoxState, skipUpdate?: boolean): this;
     create(config?: TeleBoxManagerCreateConfig, smartPosition?: boolean): ReadonlyTeleBox;
@@ -77,6 +86,7 @@ export declare class TeleBoxManager {
     remove(boxOrID: string | TeleBox, skipUpdate?: boolean): ReadonlyTeleBox | undefined;
     removeTopBox(): ReadonlyTeleBox | undefined;
     removeAll(skipUpdate?: boolean): ReadonlyTeleBox[];
+    setTheme(theme: TeleBoxManagerThemeConfig): void;
     /**
      * Mount manager to a container element.
      */

package/dist/TeleBoxManager/typings.d.ts

@@ -6,6 +6,8 @@ import type { TELE_BOX_MANAGER_EVENT } from "./constants";
 export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     /** Element to mount boxes. */
     readonly root?: HTMLElement | null;
+    /** Fullscreen mode. Default false. */
+    readonly fullscreen?: TeleBoxFullscreen;
     /** Stage area height/with ratio. No ratio if <= 0. Default -1. */
     readonly stageRatio?: number;
     /** Where the minimized boxes go. */
@@ -20,13 +22,21 @@ export interface TeleBoxManagerConfig extends Pick<TeleBoxConfig, "namespace"> {
     readonly minimized?: boolean;
     /** Is box readonly */
     readonly readonly?: boolean;
-    /** Show stage frame and grey-out the non-stage area. Default true. */
-    readonly highlightStage?: boolean;
+    /** Custom styles for telebox manager container */
+    readonly containerStyle?: string;
+    /** Custom styles for telebox manager stage */
+    readonly stageStyle?: string;
+    /** Custom `style` attribute value for content area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxBodyStyle?: string | null;
+    /** Custom `style` attribute value for stage area of all boxes. Can be overwritten by box. */
+    readonly defaultBoxStageStyle?: string | null;
+    /** Theme variable */
+    readonly theme?: TeleBoxManagerThemeConfig;
 }
-declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "ratio" | "zIndex";
-export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer" | "id" | "focus">;
-export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, "title" | "visible" | "resizable" | "draggable" | "ratio" | "zIndex" | "id" | "focus">;
-export declare type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "footer">;
+declare type TeleBoxManagerBoxConfigBaseProps = "title" | "visible" | "width" | "height" | "minWidth" | "minHeight" | "x" | "y" | "resizable" | "draggable" | "boxRatio" | "zIndex" | "stageRatio";
+export declare type TeleBoxManagerCreateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer" | "styles" | "bodyStyle" | "stageStyle" | "id" | "focus" | "enableShadowDOM">;
+export declare type TeleBoxManagerQueryConfig = Pick<TeleBoxConfig, "title" | "visible" | "resizable" | "draggable" | "boxRatio" | "stageRatio" | "zIndex" | "id" | "focus">;
+export declare type TeleBoxManagerUpdateConfig = Pick<TeleBoxConfig, TeleBoxManagerBoxConfigBaseProps | "content" | "stage" | "footer">;
 declare type CheckTeleBoxManagerConfig<T extends Record<`${TELE_BOX_MANAGER_EVENT}`, any>> = T;
 export declare type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     focused: ReadonlyTeleBox | undefined;
@@ -46,4 +56,38 @@ export declare type TeleBoxManagerEventConfig = CheckTeleBoxManagerConfig<{
     dark_mode: boolean;
 }>;
 export declare type TeleBoxManagerEvent = keyof TeleBoxManagerEventConfig;
+/**
+ * Fullscreen mode.
+ * - `true`: fullscreen mode. hide titlebar for single tab.
+ * - `false`: normal mode.
+ * - `"no-titlebar"`: always hide titlebar
+ * - `"always-titlebar"`: always show titlebar
+ */
+export declare type TeleBoxFullscreen = boolean | "no-titlebar" | "always-titlebar";
+export declare type TeleBoxManagerThemeConfig = {
+    managerContainerBackground?: string | null;
+    managerStageBackground?: string | null;
+    managerStageShadow?: string | null;
+    boxContainerBackground?: string | null;
+    boxStageBackground?: string | null;
+    boxStageShadow?: string | null;
+    boxColor?: string | null;
+    boxBorder?: string | null;
+    boxShadow?: string | null;
+    boxFooterColor?: string | null;
+    boxFooterBackground?: string | null;
+    titlebarColor?: string | null;
+    titlebarBackground?: string | null;
+    titlebarBorderBottom?: string | null;
+    titlebarTabColor?: string | null;
+    titlebarTabFocusColor?: string | null;
+    titlebarTabBackground?: string | null;
+    titlebarTabDividerColor?: string | null;
+    collectorBackground?: string | null;
+    collectorShadow?: string | null;
+    titlebarIconMinimize?: string | null;
+    titlebarIconMaximize?: string | null;
+    titlebarIconMaximizeActive?: string | null;
+    titlebarIconClose?: string | null;
+};
 export {};

package/dist/TeleTitleBar/DefaultTitleBar/index.d.ts

@@ -2,7 +2,7 @@ import "./style.scss";
 import { SideEffectManager } from "side-effect-manager";
 import type { TeleBoxState } from "../../TeleBox/typings";
 import type { TeleTitleBar, TeleTitleBarConfig, TeleTitleBarEvent } from "../typings";
-import { Val } from "value-enhancer";
+import type { ReadonlyVal } from "value-enhancer";
 export declare type DefaultTitleBarButton = TeleTitleBarEvent & {
     readonly iconClassName: string;
     readonly isActive?: (state: TeleBoxState) => boolean;
@@ -11,12 +11,10 @@ export interface DefaultTitleBarConfig extends TeleTitleBarConfig {
     buttons?: ReadonlyArray<DefaultTitleBarButton>;
 }
 export declare class DefaultTitleBar implements TeleTitleBar {
-    constructor({ readonly$, state$, title, buttons, onEvent, onDragStart, namespace, }: DefaultTitleBarConfig);
+    constructor({ readonly$, state$, title$, buttons, onEvent, onDragStart, namespace, }: DefaultTitleBarConfig);
     readonly namespace: string;
     $titleBar: HTMLElement | undefined;
     $dragArea: HTMLElement;
-    get title(): string;
-    setTitle(title: string): void;
     render(): HTMLElement;
     renderDragArea(): HTMLElement;
     dragHandle(): HTMLElement | undefined;
@@ -25,7 +23,7 @@ export declare class DefaultTitleBar implements TeleTitleBar {
     onEvent?: TeleTitleBarConfig["onEvent"];
     onDragStart?: TeleTitleBarConfig["onDragStart"];
     protected readonly$: TeleTitleBarConfig["readonly$"];
-    protected title$: Val<string>;
+    protected title$: ReadonlyVal<string>;
     protected buttons: ReadonlyArray<DefaultTitleBarButton>;
     protected state$: TeleTitleBarConfig["state$"];
     protected sideEffect: SideEffectManager;
@@ -34,11 +32,5 @@ export declare class DefaultTitleBar implements TeleTitleBar {
         clientX: number;
         clientY: number;
     };
-    protected handleTitleBarClick: (ev: MouseEvent) => void;
-    protected lastTitleBarTouch: {
-        timestamp: number;
-        clientX: number;
-        clientY: number;
-    };
-    protected handleTitleBarTouch: (ev: TouchEvent) => void;
+    protected handleTitleBarClick: (ev: PointerEvent) => void;
 }

package/dist/TeleTitleBar/typings.d.ts

@@ -9,11 +9,11 @@ export declare type TeleTitleBarEvent<U = keyof TeleBoxDelegateEventConfig> = U
 } : never;
 export interface TeleTitleBarConfig {
     readonly$: ReadonlyVal<boolean, boolean>;
-    title?: string;
+    title$: ReadonlyVal<string, boolean>;
     state$: ReadonlyVal<TeleBoxState, boolean>;
     namespace?: string;
     onEvent?: (event: TeleTitleBarEvent) => void;
-    onDragStart?: (event: MouseEvent | TouchEvent) => void;
+    onDragStart?: (event: PointerEvent) => void;
 }
 export interface TeleTitleBar {
     render(): HTMLElement;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import "./scss/fancy-scrollbar.scss";
 export * from "./TeleBox";
 export * from "./TeleTitleBar";
 export * from "./TeleBoxManager";