@motifx-community/ui 0.1.0-beta.2 → 0.1.0-beta.3

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

@@ -12,7 +12,7 @@ export interface PopoverProps extends ControlProps {
     title?: Bind<string>;
     /** What screen readers call it when it has no title. */
     label?: Bind<string>;
-    /** Content from code, after the JSX children. */
+    /** Content programmatically, after the JSX children. */
     content?: Bind<ComponentBase | null | undefined>;
     /** Default `'click'`. */
     showOn?: Bind<PopoverShowOn>;

package/dist/components/resizable/Resizable.d.ts

@@ -0,0 +1,84 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { WindowBox } from "../../parts/window/window-box";
+import type { ResizeEventArgs } from "./resize-event-args";
+import type { ResizableProps, ResizeEdge, ResizeHandles, ResizeSize } from "./resizable-props";
+interface Limits {
+    minW: number;
+    minH: number;
+    maxW: number;
+    maxH: number;
+}
+/**
+ * A box the user resizes from its sides and corners with the pointer, or with the arrow keys on the grip in its
+ * end corner. The JSX children are its content. It stays at least `minWidth` × `minHeight`, at most the maximums,
+ * and inside `area` when one is given; `keepAspectRatio` keeps its shape. A box laid out by its position
+ * (`absolute`, `fixed`) also moves when a start or top side is dragged, so the far side stays; one in the flow
+ * only changes size.
+ *
+ * @example
+ * <Resizable minWidth={160} minHeight={100} x-model={() => this.layout.size}><Panel padding="md">…</Panel></Resizable>
+ * <Resizable handles={['end', 'bottom', 'bottom-end']} area="parent" keepAspectRatio><img src="…" /></Resizable>
+ */
+export declare class Resizable extends Control<HTMLDivElement, ResizableProps> {
+    starting: Emitter<ResizeEventArgs>;
+    resizing: Emitter<ResizeEventArgs>;
+    resized: Emitter<ResizeEventArgs>;
+    frame: HTMLDivElement;
+    grip: Component<HTMLDivElement>;
+    live: Component<HTMLSpanElement>;
+    constructor(props?: IBaseProp<ResizableProps>);
+    get handles(): ResizeHandles;
+    set handles(value: Bind<ResizeHandles>);
+    get minWidth(): number;
+    set minWidth(value: Bind<number>);
+    get minHeight(): number;
+    set minHeight(value: Bind<number>);
+    get maxWidth(): number | null;
+    set maxWidth(value: Bind<number | null>);
+    get maxHeight(): number | null;
+    set maxHeight(value: Bind<number | null>);
+    get area(): 'parent' | HTMLElement | null;
+    set area(value: Bind<'parent' | HTMLElement | null>);
+    get keepAspectRatio(): boolean;
+    set keepAspectRatio(value: Bind<boolean>);
+    get step(): number;
+    set step(value: Bind<number>);
+    get width(): number | string | null;
+    set width(value: Bind<number | string | null>);
+    get height(): number | string | null;
+    set height(value: Bind<number | string | null>);
+    get size(): ResizeSize | null;
+    set size(value: Bind<ResizeSize | null>);
+    /** `size`, for `x-model`. */
+    get value(): ResizeSize | null;
+    set value(value: ResizeSize | null);
+    /** A resize is about to begin from a handle (`edge`); `cancel` keeps the size. */
+    get onResizeStarting(): MotifEvent<ResizeEventArgs>;
+    /** The box is being resized (`width`, `height` so far). */
+    get onResizing(): MotifEvent<ResizeEventArgs>;
+    /** A resize ended: the pointer let go, or a key moved a side. */
+    get onResized(): MotifEvent<ResizeEventArgs>;
+    /** The box's size in pixels now. */
+    get currentSize(): ResizeSize;
+    /** The grip in the end corner, the Tab stop that takes the keys. */
+    get gripElement(): HTMLDivElement;
+    length(value: number | string | null | undefined): string;
+    allowed(): Set<ResizeEdge>;
+    drawHandles(): void;
+    box(): WindowBox;
+    room(): {
+        w: number;
+        h: number;
+    };
+    limits(): Limits;
+    get positioned(): boolean;
+    physical(edge: ResizeEdge): ResizeEdge;
+    next(edge: ResizeEdge, start: WindowBox, dx: number, dy: number): WindowBox;
+    applyBox(box: WindowBox): void;
+    args(edge: ResizeEdge, box: WindowBox, event?: Event): ResizeEventArgs;
+    pointerDown(e: PointerEvent, given: ResizeEdge | null): void;
+    keyDown(e: KeyboardEvent): void;
+    finish(edge: ResizeEdge, box: WindowBox, event?: Event): void;
+}
+export {};

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

@@ -0,0 +1,3 @@
+export { Resizable } from './Resizable';
+export type { ResizableProps, ResizeEdge, ResizeHandles, ResizeSize } from './resizable-props';
+export type { ResizeEventArgs } from './resize-event-args';

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

@@ -0,0 +1,41 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { WindowEdge } from '../../parts/window/window-edge';
+import type { ResizeEventArgs } from './resize-event-args';
+/** A side or a corner the box is resized from; `start` and `end` follow the reading direction. */
+export type ResizeEdge = WindowEdge;
+/** Which handles the box has: every side and corner, the sides, the corners, or a list of them. */
+export type ResizeHandles = 'all' | 'edges' | 'corners' | readonly ResizeEdge[];
+/** The box's size in pixels. */
+export interface ResizeSize {
+    width: number;
+    height: number;
+}
+/** Props of `Resizable`. Each one is also a settable property; a function is followed. */
+export interface ResizableProps extends ControlProps {
+    /** Default `'all'`. */
+    handles?: Bind<ResizeHandles>;
+    /** The least width and height, in pixels. Default `30`. */
+    minWidth?: Bind<number>;
+    minHeight?: Bind<number>;
+    /** The most width and height, in pixels; `null` for no limit. Default `null`. */
+    maxWidth?: Bind<number | null>;
+    maxHeight?: Bind<number | null>;
+    /** The box stays inside this: its parent, or an element it lies in. Default `null`, no limit. */
+    area?: Bind<'parent' | HTMLElement | null>;
+    /** The width and the height keep their ratio. Default `false`. */
+    keepAspectRatio?: Bind<boolean>;
+    /** Pixels an arrow key changes a side by. Default `10`. */
+    step?: Bind<number>;
+    /** The width to start with, a CSS length or pixels. Without one the content decides. */
+    width?: Bind<number | string | null>;
+    height?: Bind<number | string | null>;
+    /** The size in pixels: given, it is applied; after every resize the new one is written to `x-model`. */
+    size?: Bind<ResizeSize | null>;
+    /** A resize is about to begin from a handle; cancelable. */
+    onResizeStarting?: (e: ResizeEventArgs) => void;
+    /** The box is being resized. */
+    onResizing?: (e: ResizeEventArgs) => void;
+    /** A resize ended (the pointer let go, or a key moved a side). */
+    onResized?: (e: ResizeEventArgs) => void;
+}

package/dist/components/resizable/resize-event-args.d.ts

@@ -0,0 +1,13 @@
+import type { EventArgs } from '@motifx/core';
+import type { Resizable } from './Resizable';
+import type { ResizeEdge } from './resizable-props';
+/** A resize begins (`cancel = true` keeps the size), goes on, or ended: the edge it is from and the size in pixels. */
+export interface ResizeEventArgs extends EventArgs {
+    edge: ResizeEdge;
+    width: number;
+    height: number;
+    /** By a handle or a key, else from the props. */
+    byUser: boolean;
+    source: Resizable;
+    event?: Event;
+}

package/dist/components/scheduler/AppointmentEditor.d.ts

@@ -129,7 +129,7 @@ export declare class AppointmentEditor<T> implements DragHost<T> {
     private unsave;
     /** A change to a series that did not go through: `onDataError` says what was saved and whether it was taken back. */
     private failed;
-    /** What a change reaches: the setting's answer, the occurrence from code, else the user's answer. */
+    /** What a change reaches: the setting's answer, the occurrence programmatically, else the user's answer. */
     private scopeFor;
     /**
      * Asks the user what a change (or a delete) of an occurrence reaches: `onSeriesAsking` first (it

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

@@ -112,7 +112,7 @@ export interface SchedulerProps<T> extends ControlProps, SchedulerTemplates<T> {
      * browser's. An appointment's own zone (`fields.startTimeZone`) is the one its series repeats in.
      */
     timeZone?: Bind<string | null>;
-    /** What changing or deleting an occurrence of a series reaches: `'ask'` (default) asks the user; from code it is the occurrence. */
+    /** What changing or deleting an occurrence of a series reaches: `'ask'` (default) asks the user; programmatically it is the occurrence. */
     seriesEdit?: Bind<SeriesEditMode>;
     /** Occurrences of a series, and ones changed apart from it, carry a mark where the design language draws one. Default `true`. */
     recurrenceMarks?: Bind<boolean>;

package/dist/components/scrollview/ScrollView.d.ts

@@ -17,7 +17,7 @@ interface Pull {
 /**
  * Content that scrolls in a box of its own, with the scrollbars shown as told (`showScrollbar`), a pull from the top
  * that asks for what is new (`pullToRefresh`, `onPullDown`) and a reach near the end that asks for more
- * (`loadOnReachBottom`, `onReachBottom`). `scrollTo`, `scrollBy` and `scrollToElement` move it from code.
+ * (`loadOnReachBottom`, `onReachBottom`). `scrollTo`, `scrollBy` and `scrollToElement` move it programmatically.
  *
  * @example
  * <ScrollView style="block-size: 20rem" pullToRefresh onPullDown={e => (e.promise = this.reload())} loadOnReachBottom onReachBottom={e => (e.promise = this.loadMore())}>

package/dist/components/skeleton/Skeleton.d.ts

@@ -34,7 +34,7 @@ export declare class Skeleton extends Control<HTMLDivElement, SkeletonProps> {
     set loading(value: Bind<boolean>);
     get label(): string;
     set label(value: Bind<string>);
-    /** The part holding what shows once loaded, for adding to it from code. */
+    /** The part holding what shows once loaded, for adding to it programmatically. */
     get content(): Component<HTMLDivElement>;
     onMounted(): void;
     private countOf;

package/dist/components/speeddial/SpeedDial.d.ts

@@ -0,0 +1,129 @@
+import { Component, Emitter, type Bind, type ComponentBase, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { IconSource } from "../../core/icon-source";
+import { Tooltip } from "../tooltip/Tooltip";
+import type { SpeedDialAction } from "./speed-dial-action";
+import type { SpeedDialActionClickEventArgs } from "./speed-dial-action-click-event-args";
+import type { SpeedDialEventArgs } from "./speed-dial-event-args";
+import type { SpeedDialDirection, SpeedDialLayout, SpeedDialPosition, SpeedDialProps, SpeedDialRelativeTo } from "./speed-dial-props";
+import type { SpeedDialTooltip } from "./speed-dial-tooltip";
+type Side = 'top' | 'bottom' | 'start' | 'end';
+interface Look {
+    item: unknown;
+    key: string | null;
+    text: string;
+    glyph: string;
+    icon: IconSource | null;
+    enabled: boolean;
+    visible: boolean;
+    click: ((e: SpeedDialActionClickEventArgs) => void) | null;
+    tooltip: string | boolean | SpeedDialTooltip | undefined;
+}
+interface ActionPart {
+    item: unknown;
+    button: Component<HTMLButtonElement>;
+    iconHost: Component<HTMLSpanElement>;
+    glyph: Component<HTMLSpanElement>;
+    icon: ComponentBase | null;
+    label: Component<HTMLSpanElement>;
+    tooltip: Tooltip | null;
+}
+/**
+ * A round button in a corner of the page (or in the flow) that opens its actions when pressed: each a round button
+ * with a glyph, in a line with a label beside it, or on a circle around the button with a tooltip. With one action
+ * shown, the main button does it itself. The actions are a menu for the keys: the arrows move, Enter and Space
+ * choose, Escape closes.
+ *
+ * @example
+ * <SpeedDial text="New" actions={[{ text: 'Note', glyph: 'pencil', click: () => this.newNote() }, { text: 'Event', glyph: 'calendar', click: () => this.newEvent() }]} />
+ * <SpeedDial layout="quarter-circle" actions={() => this.tools} />
+ * <SpeedDial position="inline" direction="end" extended text="Share" actions={() => this.shareTargets} />
+ */
+export declare class SpeedDial extends Control<HTMLDivElement, SpeedDialProps> {
+    opened: Emitter<SpeedDialEventArgs>;
+    closed: Emitter<SpeedDialEventArgs>;
+    actionClick: Emitter<SpeedDialActionClickEventArgs>;
+    fan: Component<HTMLDivElement>;
+    main: Component<HTMLButtonElement>;
+    mainGlyph: Component<HTMLSpanElement>;
+    mainText: Component<HTMLSpanElement>;
+    parts: ActionPart[];
+    looks: Look[];
+    mainTooltip: Tooltip | null;
+    stopItems: (() => void) | null;
+    byUser: boolean;
+    ready: boolean;
+    outside: (e: PointerEvent) => void;
+    constructor(props?: IBaseProp<SpeedDialProps>);
+    get actions(): readonly SpeedDialAction[];
+    set actions(value: Bind<readonly SpeedDialAction[]>);
+    get glyph(): string;
+    set glyph(value: Bind<string>);
+    get openGlyph(): string;
+    set openGlyph(value: Bind<string>);
+    get extended(): boolean;
+    set extended(value: Bind<boolean>);
+    get layout(): SpeedDialLayout;
+    set layout(value: Bind<SpeedDialLayout>);
+    get radius(): number | null;
+    set radius(value: Bind<number | null>);
+    get direction(): SpeedDialDirection;
+    set direction(value: Bind<SpeedDialDirection>);
+    get position(): SpeedDialPosition;
+    set position(value: Bind<SpeedDialPosition>);
+    get relativeTo(): SpeedDialRelativeTo;
+    set relativeTo(value: Bind<SpeedDialRelativeTo>);
+    get open(): boolean;
+    set open(value: Bind<boolean>);
+    /** `open`, for `x-model`. */
+    get value(): boolean;
+    set value(value: boolean);
+    get closeOnAction(): boolean;
+    set closeOnAction(value: Bind<boolean>);
+    get showLabels(): boolean;
+    set showLabels(value: Bind<boolean>);
+    get tooltip(): boolean | SpeedDialTooltip;
+    set tooltip(value: Bind<boolean | SpeedDialTooltip>);
+    /** The actions opened. */
+    get onOpened(): MotifEvent<SpeedDialEventArgs>;
+    /** The actions closed. */
+    get onClosed(): MotifEvent<SpeedDialEventArgs>;
+    /** An action was pressed (`index`, `action`). */
+    get onActionClick(): MotifEvent<SpeedDialActionClickEventArgs>;
+    /** Whether the actions are open. */
+    get isOpen(): boolean;
+    /** The main button. */
+    get mainElement(): HTMLButtonElement;
+    /** The one action shown, when there is exactly one: the main button does it itself. */
+    get single(): Look | null;
+    /** Opens the actions from code. */
+    show(): void;
+    /** Closes the actions from code. */
+    close(): void;
+    /** Opens the actions, or closes them. */
+    toggle(): void;
+    /** Reads the actions again after they were changed in place. */
+    refresh(): void;
+    renderItems(): void;
+    lookOf(item: unknown): Look;
+    drawActions(): void;
+    makeAction(look: Look): ActionPart;
+    drawLayout(): void;
+    lineDirection(): 'up' | 'down' | 'start' | 'end';
+    lineSide(): Side;
+    sideAt(angle: number): Side;
+    awayFromEdges(): SpeedDialDirection;
+    tooltipOf(look: Look, side: Side): SpeedDialTooltip | null;
+    drawTooltips(): void;
+    drawMain(): void;
+    drawOpen(): void;
+    setOpen(on: boolean, byUser: boolean, event?: Event): void;
+    shownActions(): ActionPart[];
+    run(index: number, event: Event): void;
+    mainClick(e: MouseEvent): void;
+    mainKeyDown(e: KeyboardEvent): void;
+    fanKeyDown(e: KeyboardEvent): void;
+    moveKeys(): [string[], string[]];
+    fanClick(e: MouseEvent): void;
+}
+export {};

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

@@ -0,0 +1,6 @@
+export { SpeedDial } from './SpeedDial';
+export type { SpeedDialAction } from './speed-dial-action';
+export type { SpeedDialProps, SpeedDialDirection, SpeedDialLayout, SpeedDialPosition, SpeedDialRelativeTo } from './speed-dial-props';
+export type { SpeedDialTooltip } from './speed-dial-tooltip';
+export type { SpeedDialEventArgs } from './speed-dial-event-args';
+export type { SpeedDialActionClickEventArgs } from './speed-dial-action-click-event-args';

package/dist/components/speeddial/speed-dial-action-click-event-args.d.ts

@@ -0,0 +1,9 @@
+import type { SpeedDial } from './SpeedDial';
+/** An action was pressed (or the main button, when it stands for the only action). */
+export interface SpeedDialActionClickEventArgs {
+    index: number;
+    /** The action as given. */
+    action: unknown;
+    source: SpeedDial;
+    event: Event;
+}

package/dist/components/speeddial/speed-dial-action.d.ts

@@ -0,0 +1,25 @@
+import type { Bind } from '@motifx/core';
+import type { IconSource } from '../../core/icon-source';
+import type { SpeedDialActionClickEventArgs } from './speed-dial-action-click-event-args';
+import type { SpeedDialTooltip } from './speed-dial-tooltip';
+/** One action of the `SpeedDial`: a round button with a glyph or an icon, its text as a label beside it. */
+export interface SpeedDialAction {
+    /** Names the action in the events; without one its index does. */
+    key?: string;
+    /** The label beside the button, and what screen readers call it. */
+    text: Bind<string>;
+    /** A glyph of the kit's set (`pencil`, `trash`, `plus`…). */
+    glyph?: Bind<string>;
+    /** An icon of your own: an address, an element or a component, in place of the glyph. */
+    icon?: IconSource;
+    /** Its tooltip: a text of its own, its options, or `false` for none. Wins over the speed dial's `tooltip`. */
+    tooltip?: Bind<string | boolean | SpeedDialTooltip>;
+    /** Default `true`. */
+    enabled?: Bind<boolean>;
+    /** Default `true`. */
+    visible?: Bind<boolean>;
+    /** What the action does; `onActionClick` is told too. */
+    click?: (e: SpeedDialActionClickEventArgs) => void;
+    /** Anything of your own. */
+    data?: unknown;
+}

package/dist/components/speeddial/speed-dial-event-args.d.ts

@@ -0,0 +1,8 @@
+import type { SpeedDial } from './SpeedDial';
+/** The actions opened or closed. */
+export interface SpeedDialEventArgs {
+    /** By a press or a key, else from code. */
+    byUser: boolean;
+    source: SpeedDial;
+    event?: Event;
+}

package/dist/components/speeddial/speed-dial-props.d.ts

@@ -0,0 +1,49 @@
+import type { Bind } from '@motifx/core';
+import type { ControlProps } from '../../core/control';
+import type { SpeedDialAction } from './speed-dial-action';
+import type { SpeedDialActionClickEventArgs } from './speed-dial-action-click-event-args';
+import type { SpeedDialEventArgs } from './speed-dial-event-args';
+import type { SpeedDialTooltip } from './speed-dial-tooltip';
+/** How the actions lie: in a line from the main button, or on a circle, a half or a quarter of one around it. */
+export type SpeedDialLayout = 'linear' | 'circle' | 'semi-circle' | 'quarter-circle';
+/** Where the actions go from the main button. A line takes the first word of a diagonal. */
+export type SpeedDialDirection = 'up' | 'down' | 'start' | 'end' | 'up-start' | 'up-end' | 'down-start' | 'down-end';
+/** A corner, an edge's middle or the centre of what it is placed in, or `inline` in the flow of the page. */
+export type SpeedDialPosition = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start' | 'bottom' | 'top' | 'start' | 'end' | 'center' | 'inline';
+/** What `position` is measured in: the viewport, or the nearest positioned parent. */
+export type SpeedDialRelativeTo = 'viewport' | 'parent';
+/** Props of `SpeedDial`. Each one is also a settable property; a function is followed. */
+export interface SpeedDialProps extends ControlProps {
+    /** The actions, in the order they fan out. With one shown, the main button does it itself. */
+    actions?: Bind<readonly SpeedDialAction[]>;
+    /** The main button's glyph. Default `'plus'`. */
+    glyph?: Bind<string>;
+    /** The main button's glyph while the actions are open. Default `'dismiss'`. */
+    openGlyph?: Bind<string>;
+    /** What screen readers call the main button, and its text when `extended`. Default: the kit's "Actions". */
+    text?: Bind<string>;
+    /** The main button shows its `text` beside the glyph. Default `false`. */
+    extended?: Bind<boolean>;
+    /** Default `'linear'`. */
+    layout?: Bind<SpeedDialLayout>;
+    /** Pixels from the main button's centre to the actions' centres, around it. Default: just enough to keep them apart. */
+    radius?: Bind<number | null>;
+    /** Default: away from the edges `position` names; `'up'` in the centre and inline. */
+    direction?: Bind<SpeedDialDirection>;
+    /** Default `'bottom-end'`. */
+    position?: Bind<SpeedDialPosition>;
+    /** Default `'viewport'`. */
+    relativeTo?: Bind<SpeedDialRelativeTo>;
+    /** The actions are open. `x-model` binds it two-way. Default `false`. */
+    open?: Bind<boolean>;
+    /** A press on an action closes the fan. Default `true`. */
+    closeOnAction?: Bind<boolean>;
+    /** The actions' labels are shown beside them while open. Default: in a line yes, around the button no. */
+    showLabels?: Bind<boolean>;
+    /** Tooltips on the actions, with their text unless an action says otherwise; options go to each `Tooltip`. Default: while the labels are off. */
+    tooltip?: Bind<boolean | SpeedDialTooltip>;
+    onOpened?: (e: SpeedDialEventArgs) => void;
+    onClosed?: (e: SpeedDialEventArgs) => void;
+    /** An action was pressed. */
+    onActionClick?: (e: SpeedDialActionClickEventArgs) => void;
+}

package/dist/components/speeddial/speed-dial-tooltip.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipProps } from '../tooltip/tooltip-props';
+/** Options of an action's tooltip: what a `Tooltip` takes, but its target. */
+export type SpeedDialTooltip = Omit<TooltipProps, 'target'>;

package/dist/components/splitter/SplitPane.d.ts

@@ -0,0 +1,45 @@
+import { type Bind, type IBaseProp } from "@motifx/core";
+import { Panel } from "../layout/Panel";
+import type { SplitPaneProps } from "./split-pane-props";
+import type { Splitter } from "./Splitter";
+/**
+ * One pane of a `Splitter`: a `Panel` with its place in the split: `size` (pixels, a share, or an equal share of
+ * what is left), `minSize`, `maxSize`, whether the handles next to it may hide it (`collapsible`) or change its
+ * size (`resizable`).
+ *
+ * @example
+ * <Splitter>
+ *   <SplitPane size={240} minSize={160} collapsible><FolderTree /></SplitPane>
+ *   <SplitPane><MessageList /></SplitPane>
+ *   <SplitPane size="30%" scrollable="vertical"><Preview /></SplitPane>
+ * </Splitter>
+ */
+export declare class SplitPane extends Panel {
+    owner: Splitter | null;
+    constructor(props?: IBaseProp<SplitPaneProps>);
+    /** The `key` prop (also when written as the JSX `key`), `''` without one. */
+    get key(): string;
+    set key(value: Bind<string>);
+    get size(): number | string | null;
+    set size(value: Bind<number | string | null>);
+    get minSize(): number;
+    set minSize(value: Bind<number>);
+    get maxSize(): number | null;
+    set maxSize(value: Bind<number | null>);
+    /** This pane's own setting; `undefined` follows the splitter. */
+    get collapsible(): boolean | undefined;
+    set collapsible(value: Bind<boolean | undefined>);
+    get collapsed(): boolean;
+    set collapsed(value: Bind<boolean>);
+    get resizable(): boolean;
+    set resizable(value: Bind<boolean>);
+    /** Whether the handles next to it may hide it: its own `collapsible`, else the splitter's. */
+    get isCollapsible(): boolean;
+    /** Hides the pane as the handle's button does; `false` when it may not be hidden or `onCollapsing` refused. */
+    collapse(): boolean;
+    /** Shows the pane again. */
+    expand(): boolean;
+    /** @internal The user hid or showed the pane: the change is the pane's own, not its binding's. */
+    setCollapsed(on: boolean): void;
+    protected applyProperty(name: string, value: unknown): void;
+}

package/dist/components/splitter/Splitter.d.ts

@@ -0,0 +1,116 @@
+import { Component, Emitter, type Bind, type Event as MotifEvent, type IBaseProp } from "@motifx/core";
+import { Control } from "../../core/control";
+import type { LayoutOrientation } from "../layout/layout-orientation";
+import { SplitPane } from "./SplitPane";
+import type { SplitterCollapseEventArgs } from "./splitter-collapse-event-args";
+import type { SplitterProps } from "./splitter-props";
+import type { SplitterResizeEventArgs } from "./splitter-resize-event-args";
+interface Lay {
+    px: number | null;
+    fr: number;
+}
+interface Handle {
+    cell: Component<HTMLDivElement>;
+    bar: Component<HTMLDivElement>;
+    before: Component<HTMLButtonElement>;
+    after: Component<HTMLButtonElement>;
+    beforeGlyph: Component<HTMLSpanElement>;
+    afterGlyph: Component<HTMLSpanElement>;
+}
+interface Drag {
+    pointer: number;
+    handle: number;
+    from: number;
+    a: number;
+    b: number;
+}
+/**
+ * Panes side by side or one under the other, as many as needed, with a handle between each two that the pointer
+ * drags and the keys move (the window splitter pattern); a handle resizes the two panes next to it, the rest keep
+ * their room. A pane is a `SplitPane`: pixels, a share or an equal share of what is left, least and most sizes, and
+ * it may be hidden from its handle (`collapsible`). A pane may hold another splitter.
+ *
+ * @example
+ * <Splitter x-model={() => this.layout.sizes}>
+ *   <SplitPane size={240} minSize={160} collapsible><FolderTree /></SplitPane>
+ *   <SplitPane minSize={320}><Editor /></SplitPane>
+ *   <SplitPane size="30%"><Preview /></SplitPane>
+ * </Splitter>
+ */
+export declare class Splitter extends Control<HTMLDivElement, SplitterProps> {
+    resizing: Emitter<SplitterResizeEventArgs>;
+    resized: Emitter<SplitterResizeEventArgs>;
+    collapsing: Emitter<SplitterCollapseEventArgs>;
+    collapsedEvent: Emitter<SplitterCollapseEventArgs>;
+    panes: SplitPane[];
+    handles: Handle[];
+    lay: Map<SplitPane, Lay>;
+    drag: Drag | null;
+    ready: boolean;
+    constructor(props?: IBaseProp<SplitterProps>);
+    get orientation(): LayoutOrientation;
+    set orientation(value: Bind<LayoutOrientation>);
+    get resizable(): boolean;
+    set resizable(value: Bind<boolean>);
+    get collapsible(): boolean;
+    set collapsible(value: Bind<boolean>);
+    get step(): number;
+    set step(value: Bind<number>);
+    /** The sizes given; see `sizes` in the props. The pixels now are `currentSizes`. */
+    get sizes(): readonly (number | string | null)[] | null;
+    set sizes(value: Bind<readonly (number | string | null)[] | null>);
+    /** `sizes`, for `x-model`. */
+    get value(): readonly (number | string | null)[] | null;
+    set value(value: readonly (number | string | null)[] | null);
+    /** A handle is being dragged (`handle`, `sizes` in pixels). */
+    get onResizing(): MotifEvent<SplitterResizeEventArgs>;
+    /** A drag ended or a key moved a handle. */
+    get onResized(): MotifEvent<SplitterResizeEventArgs>;
+    /** A pane is about to be hidden or shown again (`pane`, `collapsed`); `cancel` leaves it. */
+    get onCollapsing(): MotifEvent<SplitterCollapseEventArgs>;
+    /** A pane was hidden or shown again. */
+    get onCollapsed(): MotifEvent<SplitterCollapseEventArgs>;
+    /** The panes' pixels along the split now, in pane order; 0 for a hidden pane. */
+    get currentSizes(): number[];
+    /** How many panes there are, hidden ones too. */
+    get count(): number;
+    /** Adds a pane at the end. */
+    add(pane: SplitPane): SplitPane;
+    /** Adds a pane at `index`. */
+    insert(index: number, pane: SplitPane): SplitPane;
+    /** Removes a pane and disposes it. */
+    remove(pane: SplitPane): boolean;
+    /** Hides a pane, the neighbours taking its room; `false` when it is not here, hidden already, or `onCollapsing` refused. */
+    collapse(pane: SplitPane | number): boolean;
+    /** Shows a hidden pane again. */
+    expand(pane: SplitPane | number): boolean;
+    onBuilt(): void;
+    onDisposing(): void;
+    /** @internal A pane's limits, collapsed state, visibility or `resizable` changed. */
+    paneChanged(): void;
+    /** @internal A pane's own `size` changed: the layout starts from the sizes again. */
+    sizeChanged(): void;
+    /** @internal A pane was disposed on its own. */
+    paneGone(pane: SplitPane): void;
+    place(pane: SplitPane, index: number): void;
+    forget(pane: SplitPane): void;
+    shownPanes(): SplitPane[];
+    get horizontal(): boolean;
+    readSizes(): void;
+    tracks(panes: SplitPane[]): string;
+    relayout(): void;
+    makeHandle(): Handle;
+    drawHandles(): void;
+    canResize(handle: number): boolean;
+    measure(panes: SplitPane[]): number[];
+    freeze(panes: SplitPane[]): void;
+    apply(handle: number, a: number, total: number): boolean;
+    tell(emitter: Emitter<SplitterResizeEventArgs>, handle: number, event?: Event): void;
+    fold(target: SplitPane | number, on: boolean, byUser: boolean, event?: Event): boolean;
+    foldFromHandle(handle: Handle, side: 'before' | 'after', event: Event): void;
+    keyDown(e: KeyboardEvent): void;
+    pointerDown(e: PointerEvent, handle: Handle): void;
+    pointerMove(e: PointerEvent): void;
+    pointerUp(e: PointerEvent): void;
+}
+export {};

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

@@ -0,0 +1,6 @@
+export { Splitter } from './Splitter';
+export { SplitPane } from './SplitPane';
+export type { SplitterProps } from './splitter-props';
+export type { SplitPaneProps } from './split-pane-props';
+export type { SplitterResizeEventArgs } from './splitter-resize-event-args';
+export type { SplitterCollapseEventArgs } from './splitter-collapse-event-args';

package/dist/components/splitter/split-pane-props.d.ts

@@ -0,0 +1,21 @@
+import type { Bind, ComponentBase } from '@motifx/core';
+import type { PanelProps } from '../layout/panel-props';
+/** Props of `SplitPane`, one pane of a `Splitter`: a `Panel` (padding, scrolling, a frame) with its place in the split. */
+export interface SplitPaneProps extends PanelProps {
+    /** Names the pane; the JSX `key` is read too. */
+    key?: Bind<string>;
+    /** Pixels, a share (`'30%'`) of the room the shares divide, or `null` for an equal share of what is left. Default `null`. */
+    size?: Bind<number | string | null>;
+    /** The least it gets, in pixels. Default `0`. */
+    minSize?: Bind<number>;
+    /** The most it gets, in pixels; `null` for no limit. Default `null`. */
+    maxSize?: Bind<number | null>;
+    /** The handles next to it can hide it (a button on the handle, Enter on it). `undefined` follows the splitter. */
+    collapsible?: Bind<boolean | undefined>;
+    /** Hidden, the neighbours taking its room. Default `false`. */
+    collapsed?: Bind<boolean>;
+    /** The handles next to it can change its size. Default `true`. */
+    resizable?: Bind<boolean>;
+    /** Content made with the pane, besides the JSX children. */
+    content?: () => ComponentBase | readonly ComponentBase[];
+}

package/dist/components/splitter/splitter-collapse-event-args.d.ts

@@ -0,0 +1,13 @@
+import type { EventArgs } from '@motifx/core';
+import type { SplitPane } from './SplitPane';
+import type { Splitter } from './Splitter';
+/** A pane is about to be hidden (`collapsed: true`) or shown again; `cancel = true` leaves it as it is. */
+export interface SplitterCollapseEventArgs extends EventArgs {
+    pane: SplitPane;
+    index: number;
+    collapsed: boolean;
+    /** By a button on the handle or Enter on it, else programmatically. */
+    byUser: boolean;
+    source: Splitter;
+    event?: Event;
+}