@motifx-community/ui 0.0.0-stage → 0.1.0-beta.0

package/dist/components/slider/slider-show-value.d.ts

@@ -0,0 +1,2 @@
+/** When the value shows in a bubble over the thumb: `never`, while it is moved (`drag`), or `always`. */
+export type SliderShowValue = 'never' | 'drag' | 'always';

package/dist/components/slider/slider-value.d.ts

@@ -0,0 +1,2 @@
+/** One number, or `[start, end]` for a range slider. */
+export type SliderValue = number | [number, number];

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,32 @@
+import type { Bind, IBaseProp } from '@motifx/core';
+import { ToggleField } from '../checkbox/ToggleField';
+import type { SwitchProps } from './switch-props';
+import type { SwitchStateText } from './switch-state-text';
+/**
+ * An on / off switch: a native checkbox with `role="switch"`, drawn as a track with a thumb that
+ * slides. Space and Enter flip it; `onText` / `offText` show in the track or next to it.
+ *
+ * @example
+ * <Switch label="&Wi-Fi" x-model={() => this.settings.wifi} />
+ * <Switch label="Sync" onText="On" offText="Off" showStateText="beside" />
+ *
+ * const dark = new Switch({ label: 'Dark mode' });
+ * this.panel.controls.add(dark);
+ * dark.onValueChanged((e) => this.applyTheme(e.value));
+ */
+export declare class Switch extends ToggleField<boolean, SwitchProps> {
+    constructor(props?: IBaseProp<SwitchProps>);
+    get onText(): string;
+    set onText(value: Bind<string>);
+    get offText(): string;
+    set offText(value: Bind<string>);
+    get showStateText(): SwitchStateText;
+    set showStateText(value: Bind<SwitchStateText>);
+    protected emptyValue(): boolean;
+    protected normalizeValue(value: boolean): boolean;
+    /** `required` means it must be on. */
+    protected isEmptyValue(value: boolean): boolean;
+    protected renderValue(value: boolean): void;
+    protected nextValue(): boolean;
+    private renderStateText;
+}

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

@@ -0,0 +1,3 @@
+export { Switch } from './Switch';
+export type { SwitchProps } from './switch-props';
+export type { SwitchStateText } from './switch-state-text';

package/dist/components/switch/switch-props.d.ts

@@ -0,0 +1,12 @@
+import type { Bind } from '@motifx/core';
+import type { ToggleFieldProps } from '../checkbox/toggle-field-props';
+import type { SwitchStateText } from './switch-state-text';
+/** Props of `Switch`. Each one is also a settable, reactive property. */
+export interface SwitchProps extends ToggleFieldProps<boolean> {
+    /** Shown while it is on, e.g. `On`. */
+    onText?: Bind<string>;
+    /** Shown while it is off, e.g. `Off`. */
+    offText?: Bind<string>;
+    /** Where the on / off text shows. Default `'inside'`. */
+    showStateText?: Bind<SwitchStateText>;
+}

package/dist/components/switch/switch-state-text.d.ts

@@ -0,0 +1,2 @@
+/** Where a switch shows its on / off text: in the track, next to it, or not at all. */
+export type SwitchStateText = 'inside' | 'beside' | 'none';

package/dist/components/tabdocs/AutoHideStrip.d.ts

@@ -0,0 +1,31 @@
+import type { TabDockArea } from './TabDockArea';
+import type { TabDocumentManager } from './TabDocumentManager';
+/**
+ * The tab titles of a folded dock area, along the manager's edge (a toolbar). Choosing one (a
+ * click, Enter or Space, or resting the pointer on it when `autoHideHover` is on) slides the area
+ * out over the documents with that document shown; the arrow keys go along the titles.
+ */
+export declare class AutoHideStrip {
+    private readonly manager;
+    private readonly area;
+    readonly element: HTMLDivElement;
+    private readonly buttons;
+    /** What lets go of each title's icon. */
+    private readonly icons;
+    private readonly stops;
+    private hoverTimer;
+    private leaveTimer;
+    private current;
+    constructor(manager: TabDocumentManager, area: TabDockArea);
+    /** Focuses the title of the document shown last (the one slid out), else the first. */
+    focusActive(): boolean;
+    dispose(): void;
+    private render;
+    private buttonOf;
+    private documentAt;
+    private key;
+    /** Resting on a title slides the area out after `autoHideDelay`. */
+    private hoverOn;
+    /** The pointer left the titles and the area: one slid out by resting on a title slides back. */
+    private hoverOff;
+}

package/dist/components/tabdocs/DockDropTarget.d.ts

@@ -0,0 +1,34 @@
+import type { TabDockSide } from './tab-dock-side';
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabDragSubject } from './tab-drag-subject';
+import type { TabDropMarks } from './tab-drop-marks';
+import type { TabDropPlace } from './tab-drop-place';
+import type { TabDropSide } from './tab-drop-side';
+import type { TabDropTarget } from './tab-drop-target';
+import type { TabGroup } from './TabGroup';
+/**
+ * The drop target of docking, asked before the built-in one: the dock guides (a cross over the
+ * group under the pointer, one at each edge of the manager) when `dockGuides` is on, the strips of
+ * folded dock areas, and floating, which a drop away from every guide and strip does. A floating
+ * window moved by its title area stays where it is let go.
+ */
+export declare class DockDropTarget implements TabDropTarget {
+    private readonly manager;
+    readonly kinds: string[];
+    private readonly guides;
+    private pointed;
+    constructor(manager: TabDocumentManager);
+    placeAt(x: number, y: number, drag: TabDragSubject): TabDropPlace | null;
+    marks(place: TabDropPlace, drag: TabDragSubject): TabDropMarks;
+    drop(place: TabDropPlace, drag: TabDragSubject): boolean;
+    /** The pointer is over this manager (`point`), or gone from it: the guides follow it. */
+    follow(point: {
+        x: number;
+        y: number;
+    } | null, drag: TabDragSubject): void;
+    /** Into the dock area of `side`; `null` when what is dragged may not go there, or is alone there already. */
+    areaPlace(side: TabDockSide, drag: TabDragSubject): TabDropPlace | null;
+    /** A guide of the cross over a group: into it or beside it, as the group's own drop zones would. */
+    guidePlace(group: TabGroup, side: TabDropSide, drag: TabDragSubject): TabDropPlace | null;
+    dispose(): void;
+}

package/dist/components/tabdocs/DockGuides.d.ts

@@ -0,0 +1,35 @@
+import type { TabDockSide } from './tab-dock-side';
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabDropSide } from './tab-drop-side';
+import type { DockGuideHit } from './dock-guide-hit';
+import type { TabGroup } from './TabGroup';
+/**
+ * The dock guides a drag shows: a cross over the group under the pointer (its middle and four
+ * sides) and one guide in the middle of each of the manager's edges. They sit above everything,
+ * never take the pointer, and the one pointed at shows it. In a new browser window they show in it.
+ */
+export declare class DockGuides {
+    private readonly manager;
+    private readonly cross;
+    private readonly edges;
+    /** Each shown guide's box, and what it stands for. */
+    private shown;
+    /** Where they show: the manager's element, or a new window's. */
+    private root;
+    constructor(manager: TabDocumentManager);
+    /**
+     * Shows the cross over `group` with the sides it may take, and the edge guides of `docks`. The
+     * edge guides stay put; over a short or narrow manager the cross moves off them.
+     */
+    show(group: TabGroup | null, sides: readonly TabDropSide[], docks: readonly TabDockSide[], root?: HTMLElement): void;
+    /** The guide under a point of the viewport. */
+    hit(x: number, y: number): DockGuideHit | null;
+    /** Marks the guide pointed at (`null`: none). */
+    point(hit: DockGuideHit | null): void;
+    hide(): void;
+    dispose(): void;
+    private put;
+    private guide;
+    /** How big a guide is and how far apart they stand: their style's (the gap), 32 and 8 pixels where nothing is laid out. */
+    private measure;
+}

package/dist/components/tabdocs/DocumentList.d.ts

@@ -0,0 +1,76 @@
+import { MenuList } from '../../parts/menu/MenuList';
+import type { MenuItem } from '../../parts/menu/menu-item';
+import { Popup } from '../../parts/popup/Popup';
+import { TextBox } from '../textbox/TextBox';
+import type { TabDocument } from './TabDocument';
+import type { TabDocumentManager } from './TabDocumentManager';
+/**
+ * A menu of documents, for the group's "…" button (a search above the documents, a few commands
+ * with them) and for the recently used list (walked with the keys while a modifier is held). The
+ * documents are items of the kit's menu, so they look like the commands. The manager holds one of each.
+ */
+export declare class DocumentList {
+    private readonly manager;
+    private readonly kind;
+    readonly popup: Popup;
+    readonly documentMenu: MenuList;
+    /** The commands of the "…" menu; `null` in the recently used list. */
+    readonly commandMenu: MenuList | null;
+    readonly search: TextBox | null;
+    /** The search and the documents, shown or hidden together. */
+    private readonly part;
+    /** The line between the commands and the documents. */
+    private readonly line;
+    private documents;
+    /** The documents the menu shows: the ones the search finds. */
+    private shown;
+    private active;
+    /** The documents come from several groups: each one says which. */
+    private groups;
+    private commandsFirst;
+    private held;
+    private returnFocus;
+    constructor(manager: TabDocumentManager, kind: 'open' | 'recent');
+    get isOpen(): boolean;
+    /**
+     * Opens next to `anchor` with `documents`, `start` focused (or, under the search, in sight).
+     * `held`: the modifiers that opened it; letting go of them opens the focused document.
+     * `active`: the document marked as the one shown. `commandsFirst`: the commands above the
+     * documents; `list: false` shows only the commands.
+     */
+    open(anchor: HTMLElement, documents: readonly TabDocument[], start: number, commands?: MenuItem[], held?: KeyboardEvent | null, options?: {
+        commandsFirst?: boolean;
+        list?: boolean;
+        active?: TabDocument | null;
+    }): void;
+    /** The recently used list: the next (or previous) document, around the ends. */
+    walk(by: number): void;
+    close(): void;
+    dispose(): void;
+    /** Draws the documents whose title has `text`, or a dimmed "No items" when none has. */
+    private showDocuments;
+    /** A document as a menu item: its title, then what tells it apart (its description, its group when the menu has every group's). */
+    private menuItem;
+    /** The unsaved mark at the end of a document's item, and the words for it in its name. */
+    private markUnsaved;
+    /** Scrolls the documents, and only them, to show `item`. */
+    private keepInSight;
+    private documentItems;
+    private itemOf;
+    private focusedDocument;
+    private choose;
+    /**
+     * Enter opens the focused document, also with the modifier still held. In the "…" menu Up and
+     * Down go on from the search to the documents and the commands and around, Tab goes from one
+     * part to the next, and typing on a document goes back to the search with what was typed.
+     */
+    private onKeyDown;
+    /** The parts of the "…" menu that show, top to bottom. */
+    private parts;
+    private step;
+    /** Tab and Shift+Tab: the next part, or out of the menu (which closes it) from the last one. */
+    private tabTo;
+    private typeInSearch;
+    private readonly onKeyUp;
+    private stopHolding;
+}

package/dist/components/tabdocs/DocumentTab.d.ts

@@ -0,0 +1,66 @@
+import { Component, type ComponentBase } from '@motifx/core';
+import type { TabDocument } from './TabDocument';
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabGroup } from './TabGroup';
+/**
+ * An open document in the manager: its tab in a group's strip and its panel. Both move with it from
+ * group to group; the content in the panel is never made again for a move.
+ */
+export declare class DocumentTab {
+    readonly document: TabDocument;
+    private manager;
+    readonly header: HTMLButtonElement;
+    readonly panel: Component<HTMLDivElement>;
+    group: TabGroup | null;
+    /** What had focus last in the panel. */
+    lastFocus: HTMLElement | null;
+    private readonly label;
+    private readonly letter;
+    private readonly close;
+    private readonly pin;
+    private readonly unsaved;
+    private readonly status;
+    private description;
+    private icon;
+    private releaseIcon;
+    private badge;
+    private tooltip;
+    private tipHolder;
+    private closeKey;
+    private content;
+    private shown;
+    /** What scrolled in the panel: a hidden element tells no scroll, and a move into another window loses it. */
+    private readonly scrolls;
+    /** The document the panel was in when it was hidden. */
+    private hiddenIn;
+    private readonly stops;
+    constructor(document: TabDocument, manager: TabDocumentManager);
+    /** The content, `null` while it is not built. */
+    get contentComponent(): ComponentBase | null;
+    /** Shows or hides the panel; the content is built or let go as its lifetime says. */
+    show(on: boolean): void;
+    /** Builds the content now when its lifetime is `keep`. */
+    prepare(): void;
+    /** Moves focus into the panel: where it was last, else the first control, else the tab. `still`: the page does not scroll to it (an area sliding out). */
+    focusContent(still?: boolean): boolean;
+    /** A panel with nothing to focus in it takes focus itself, so Tab reaches it. */
+    updatePanelFocus(): void;
+    /** The tooltip lives next to the strip of the group the tab is in. */
+    attachTooltip(holder: Component<HTMLDivElement> | null): void;
+    /** The tab goes to another manager (dragged there): from now on it follows that manager's settings. */
+    moveTo(manager: TabDocumentManager): void;
+    dispose(): void;
+    private noteScroll;
+    private restoreScrolls;
+    private lifetime;
+    private build;
+    private release;
+    private tooltipText;
+    /** Follows `read` with a binding of the manager: a `reState()` of the manager or the page reads it again. */
+    private watch;
+    private render;
+    private renderTooltip;
+    private renderDescription;
+    private renderIcon;
+    private renderBadge;
+}

package/dist/components/tabdocs/DropMarks.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What a drag shows for a manager: the translucent area a drop would take, and the mark between
+ * two tabs where a tab would go. Both sit in the manager's element, fixed in the viewport above its
+ * floating windows; the area glides from place to place (the motion tokens, so reduced motion
+ * makes it jump).
+ */
+export declare class DropMarks {
+    private readonly root;
+    private readonly area;
+    private readonly mark;
+    constructor(root: HTMLElement);
+    /** Shows the area and the mark (viewport boxes); `null` hides one. */
+    show(area: DOMRect | null, mark: DOMRect | null): void;
+    hide(): void;
+    private place;
+}

package/dist/components/tabdocs/LayoutDropTarget.d.ts

@@ -0,0 +1,39 @@
+import type { SplitDirection } from './split-direction';
+import type { TabBrowserWindow } from './TabBrowserWindow';
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabDragSubject } from './tab-drag-subject';
+import type { TabDropMarks } from './tab-drop-marks';
+import type { TabDropTarget } from './tab-drop-target';
+import type { TabDropPlace } from './tab-drop-place';
+import type { TabDropSide } from './tab-drop-side';
+import type { TabGroup } from './TabGroup';
+/**
+ * The drop target every manager has: a group's strip (among its tabs, or at the end), a group's
+ * content (its centre, or one of its edges for a new group there), and the edges of the whole
+ * layout (a thin band along the manager's sides, for a new group along that side); in a new
+ * browser window, the edges of its layout.
+ */
+export declare class LayoutDropTarget implements TabDropTarget {
+    private readonly manager;
+    readonly kinds: string[];
+    constructor(manager: TabDocumentManager);
+    placeAt(x: number, y: number, drag: TabDragSubject): TabDropPlace | null;
+    marks(place: TabDropPlace, drag: TabDragSubject): TabDropMarks;
+    drop(place: TabDropPlace, drag: TabDragSubject): boolean;
+    /** The place among a group's tabs, `null` when nothing would change or the group takes nothing. */
+    stripPlace(group: TabGroup, index: number, drag: TabDragSubject): TabDropPlace | null;
+    /** Into a group or beside it; `null` when the group takes nothing there or nothing would change. */
+    groupPlace(group: TabGroup, side: TabDropSide, drag: TabDragSubject): TabDropPlace | null;
+    /** A new group along an edge of the layout (of a new window's, `host`); `null` when nothing would change. */
+    edgePlace(side: SplitDirection, drag: TabDragSubject, host?: TabBrowserWindow | null): TabDropPlace | null;
+    /** The place in a group's strip under the pointer: before the first tab whose middle is past it. */
+    indexAt(group: TabGroup, x: number, y: number, drag: TabDragSubject): number;
+    private clampIndex;
+    private markAt;
+    /** Which side of the content the pointer is near (`dropEdgeSize` from it), else the centre. */
+    private sideAt;
+    /** The edge of the layout the pointer is on: a band along the content of a group that touches that edge. */
+    private layoutEdgeAt;
+    /** The room a new group along an edge of the layout (of a new window's, `host`) would get. */
+    private edgeArea;
+}

package/dist/components/tabdocs/MoveByKeys.d.ts

@@ -0,0 +1,31 @@
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabDrag } from './TabDrag';
+import type { TabDragSubject } from './tab-drag-subject';
+/**
+ * "Move to…": a tab or a group moved from the keyboard, through the same drag session as the
+ * pointer, with the same drop areas shown. The arrows pick a side of a group; an arrow towards the
+ * side already chosen goes on to the next group that way, then to the edge of the layout, the dock
+ * area of that side and a floating window of its own, and the other way back. Tab goes to the next
+ * group, Enter drops, Escape puts everything back. Each place is announced.
+ */
+export declare class MoveByKeys {
+    private readonly manager;
+    private readonly drag;
+    private where;
+    private stop;
+    constructor(manager: TabDocumentManager, drag: TabDrag);
+    get isOn(): boolean;
+    /** Starts it for a document (its tab is `source`) or a group. */
+    start(subject: TabDragSubject, source: HTMLElement | null): boolean;
+    /** Drops where it points (`drop`), or puts everything back. */
+    end(drop: boolean): boolean;
+    private key;
+    /** An arrow: a side, the next group that way (or the layout's edge), or back to the centre. */
+    private go;
+    private cycle;
+    private rtl;
+    /** Every group it can go to: this manager's, then those of the managers of its `dragGroup`. */
+    private groups;
+    /** Aims the drag where it points, shows the areas and says where that is. */
+    private show;
+}

package/dist/components/tabdocs/NewWindowDropTarget.d.ts

@@ -0,0 +1,19 @@
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabDragSubject } from './tab-drag-subject';
+import type { TabDropMarks } from './tab-drop-marks';
+import type { TabDropPlace } from './tab-drop-place';
+import type { TabDropTarget } from './tab-drop-target';
+/**
+ * Where a drag goes past the edge of its browser window: from the main window into a new window
+ * at that place on the screen, from a new window back to the main window. The drag finds these
+ * places itself (the pointer is outside every manager there); this target makes the drop.
+ */
+export declare class NewWindowDropTarget implements TabDropTarget {
+    private readonly manager;
+    readonly kinds: string[];
+    constructor(manager: TabDocumentManager);
+    /** Points inside a window are never this target's. */
+    placeAt(): TabDropPlace | null;
+    marks(): TabDropMarks;
+    drop(place: TabDropPlace, drag: TabDragSubject): boolean;
+}

package/dist/components/tabdocs/PhoneBar.d.ts

@@ -0,0 +1,33 @@
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabPresenter } from './TabPresenter';
+/**
+ * The bar above the document a phone shows: its title (a swipe on it goes to the document beside,
+ * a tap opens its commands), its close button, and the number of open documents, which opens the
+ * list of them.
+ */
+export declare class PhoneBar {
+    private readonly manager;
+    private readonly presenter;
+    readonly element: HTMLDivElement;
+    private readonly title;
+    private readonly label;
+    private readonly icon;
+    private readonly unsaved;
+    private readonly close;
+    private readonly count;
+    private releaseIcon;
+    private shown;
+    private swipe;
+    constructor(manager: TabDocumentManager, presenter: TabPresenter);
+    render(): void;
+    dispose(): void;
+    /** The commands of the document shown, as an action sheet. */
+    private openCommands;
+    private key;
+    /** To the document beside the one shown, round at the ends. */
+    private go;
+    private renderIcon;
+    private touchStart;
+    private touchMove;
+    private touchEnd;
+}

package/dist/components/tabdocs/PhoneList.d.ts

@@ -0,0 +1,54 @@
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabPresenter } from './TabPresenter';
+/**
+ * The full-screen list of a phone's open documents, in a sheet: a search, the groups as sections
+ * (the floating windows' too), pinned documents first. A tap opens a document, a swipe sideways
+ * closes it, a long press lifts it to drag it elsewhere in its group or into another, and a long
+ * press let go where it was opens its commands. The keys: up and down, Enter, Delete, Alt with up
+ * or down to move it, the Menu key for its commands.
+ */
+export declare class PhoneList {
+    private readonly manager;
+    private readonly presenter;
+    private readonly sheet;
+    private readonly search;
+    private readonly sections;
+    private readonly empty;
+    private readonly rows;
+    private readonly lists;
+    private query;
+    private gesture;
+    constructor(manager: TabDocumentManager, presenter: TabPresenter);
+    get isOpen(): boolean;
+    open(): boolean;
+    close(): boolean;
+    dispose(): void;
+    /** Draws the sections and rows again for the documents open now. */
+    render(): void;
+    private listOf;
+    private rowOf;
+    private filter;
+    /** One row is a Tab stop: the active document's, else the first shown. */
+    private renderRoving;
+    private visibleRows;
+    private rowByElement;
+    private docOf;
+    private listen;
+    /** A document chosen: the list closes and the phone shows it. */
+    private choose;
+    private closeDocument;
+    private neighbour;
+    private key;
+    /** Moves a document one place up or down its group; past an end, into the group before or after. */
+    private moveBy;
+    private touchStart;
+    /** The long press: the row lifts and follows the finger up and down. */
+    private lift;
+    private touchMove;
+    /** The lifted row goes where the finger is: before or after the row under it, or into an empty section. */
+    private dragTo;
+    private touchEnd;
+    private endGesture;
+    /** The lifted row let go: where it is now is where the document goes; not moved, its commands open. */
+    private drop;
+}

package/dist/components/tabdocs/PhoneTools.d.ts

@@ -0,0 +1,20 @@
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabPresenter } from './TabPresenter';
+/**
+ * The bar at the bottom of a phone: a button for each tool of the dock areas, which opens its area in
+ * a bottom sheet (or a drawer) with that tool, and closes it again. The arrow keys go along it.
+ */
+export declare class PhoneTools {
+    private readonly manager;
+    private readonly presenter;
+    readonly element: HTMLDivElement;
+    private readonly buttons;
+    constructor(manager: TabDocumentManager, presenter: TabPresenter);
+    render(): void;
+    dispose(): void;
+    private entryOf;
+    private documentAt;
+    /** A tool's button: opens its area with it, or closes the area when it shows it already. */
+    private toggle;
+    private key;
+}

package/dist/components/tabdocs/SplitSash.d.ts

@@ -0,0 +1,23 @@
+import type { SashOwner } from './sash-owner';
+import type { TabDocumentManager } from './TabDocumentManager';
+/**
+ * The splitter between two neighbours of a split, or between a dock area and the documents (the
+ * ARIA window splitter pattern): the pointer drags it, the keys move it (see the manager's `keys`),
+ * a double click evens a split's sizes or gives a dock area its first size again.
+ */
+export declare class SplitSash {
+    readonly split: SashOwner;
+    private readonly manager;
+    readonly element: HTMLDivElement;
+    private drag;
+    /** The splitter whose element this is. */
+    static of(element: Element | null): SplitSash | null;
+    constructor(split: SashOwner, manager: TabDocumentManager);
+    /** The index of the child before it. */
+    get index(): number;
+    private start;
+    private move;
+    private end;
+    /** Where the pointer is along the split, growing in the reading direction. */
+    private position;
+}

package/dist/components/tabdocs/TabBarSettings.d.ts

@@ -0,0 +1,35 @@
+import { type Bind } from '@motifx/core';
+import type { TabBarButton } from './tab-bar-button';
+import type { TabBarButtonSize } from './tab-bar-button-size';
+import type { TabLayoutBar } from './tab-layout-bar';
+import type { TabSize } from './tab-size';
+/**
+ * The look of the strips of a dock area or a floating window. Each setting is a value or a
+ * function, which is followed; `null` (the default) follows the manager's `compact…` prop of the
+ * same name.
+ */
+export declare class TabBarSettings {
+    private readonly own;
+    /** Buttons that scroll its strips when the tabs do not fit. Reactive. */
+    get scrollButtons(): boolean | null;
+    set scrollButtons(value: Bind<boolean | null>);
+    /** How wide its tabs are. Reactive. */
+    get tabSize(): TabSize | null;
+    set tabSize(value: Bind<TabSize | null>);
+    /** The narrowest its tabs get, in pixels. Reactive. */
+    get tabMinWidth(): number | null;
+    set tabMinWidth(value: Bind<number | null>);
+    /** A strip with one document shows it as a title. Reactive. */
+    get singleTabTitle(): boolean | null;
+    set singleTabTitle(value: Bind<boolean | null>);
+    /** The built-in buttons that stay in its toolbars; the others go into the "…" menu. `'all'`: every button, as among the documents; `'auto'`: as the manager's `compactBarButtons` says it. Reactive. */
+    get barButtons(): readonly TabBarButton[] | 'all' | 'auto' | null;
+    set barButtons(value: Bind<readonly TabBarButton[] | 'all' | 'auto' | null>);
+    /** How large the buttons of its toolbars are. Reactive. */
+    get barButtonSize(): TabBarButtonSize | null;
+    set barButtonSize(value: Bind<TabBarButtonSize | null>);
+    /** @internal The settings given as plain values, for `saveLayout`; a function is the app's to give again. */
+    savedBar(): TabLayoutBar | undefined;
+    /** @internal Puts back what `savedBar` wrote. */
+    restoreBar(saved: TabLayoutBar | undefined): void;
+}

package/dist/components/tabdocs/TabBrowserWindow.d.ts

@@ -0,0 +1,60 @@
+import { DropMarks } from './DropMarks';
+import type { LayoutItem } from './layout-item';
+import type { TabDocument } from './TabDocument';
+import type { TabDocumentManager } from './TabDocumentManager';
+import type { TabGroup } from './TabGroup';
+import type { TabRect } from './tab-rect';
+/**
+ * A browser window of a `TabDocumentManager`, opened by `moveToNewWindow`: it holds groups as the
+ * documents' area does (split, resized and dragged the same way), with the page's look, the
+ * manager's keys and menus. Its title follows its active document. When it is closed its documents
+ * go back to the main window, or close (`newWindowCloseAction`). The manager makes and closes these
+ * windows; the methods here go through it, with its events.
+ */
+export declare class TabBrowserWindow {
+    private readonly owner;
+    /** The browser window. */
+    readonly window: Window;
+    /** The manager's look in that window, filling it: the groups are laid out in it. */
+    readonly element: HTMLDivElement;
+    /** @internal The top of its layout. */
+    root: LayoutItem | null;
+    /** @internal Where its documents go back to: the group they came from. */
+    home: TabGroup | null;
+    /** @internal What a drag shows in this window. */
+    readonly marks: DropMarks;
+    /** @internal Its announcements: a screen reader reads those of the window it is in. */
+    readonly live: HTMLDivElement;
+    /** @internal When it last had focus: the window in front comes last in `browserWindows`. */
+    focusedAt: number;
+    private readonly active;
+    private readonly stops;
+    private gone;
+    constructor(owner: TabDocumentManager, view: Window);
+    get manager(): TabDocumentManager;
+    /** Its place and size on the screen, in pixels (the browser tells no change of place: read it when needed). */
+    get rect(): TabRect;
+    /** Its groups, in layout order. Reactive. */
+    get groups(): readonly TabGroup[];
+    /** Reactive. */
+    get documents(): readonly TabDocument[];
+    /** The group used last in it. Reactive. */
+    get activeGroup(): TabGroup | null;
+    /** The active document of its group used last; its title is the window's. Reactive. */
+    get activeDocument(): TabDocument | null;
+    /** Its place among the manager's `browserWindows`. Reactive. */
+    get index(): number;
+    /** Brings its documents back to the main window, where they came from; the window closes. */
+    moveToMainWindow(): boolean;
+    /** Closes it: its documents go back to the main window or close, as `newWindowCloseAction` (or `onWindowClosing`) says. */
+    close(): Promise<boolean>;
+    /** Brings it to the front and focuses what had focus in it last. */
+    focus(): boolean;
+    /** @internal */
+    markActive(group: TabGroup): void;
+    /** @internal Whether the browser window is still there. */
+    get isOpen(): boolean;
+    /** @internal Closes the browser window, without a word to the manager. */
+    dispose(): void;
+    private closedByBrowser;
+}