@hypericon/mico 0.3.8 → 0.3.10

package/dist/components/index.d.ts

@@ -4,4 +4,5 @@ export * from "./icon";
 export * from "./markdown";
 export * from "./markdown-editor";
 export * from "./menu";
+export * from "./pagination";
 export * from "./table";

package/dist/components/index.js

@@ -26,7 +26,7 @@ __exportStar(require("./markdown"), exports);
 __exportStar(require("./markdown-editor"), exports);
 __exportStar(require("./menu"), exports);
 // export * from "./modal";
-// export * from "./pagination";
+__exportStar(require("./pagination"), exports);
 // export * from "./popover";
 // export * from "./reorderable-list";
 __exportStar(require("./table"), exports);

package/dist/components/markdown-editor/MarkdownEditor.d.ts

@@ -12,6 +12,8 @@ export declare const MarkdownEditor: m.Component<{
     highlight?: boolean;
     /** @default true */
     enableShortcuts?: boolean;
+    /** Function called on licking the help button. The button is hidden if the function is undefined. */
+    onHelp?: () => any;
     class?: string;
     style?: string;
 }, {

package/dist/components/markdown-editor/MarkdownEditor.js

@@ -133,6 +133,11 @@ exports.MarkdownEditor = {
                                 onclick: () => this.state.applyLink(),
                             }, (0, mithril_1.default)(Icon_1.Icon, { fas: "link" })),
                         ]),
+                        attrs.onHelp !== undefined ? (0, mithril_1.default)(".editor-button-group", [
+                            (0, mithril_1.default)("button", {
+                                onclick: () => { var _a; return (_a = attrs.onHelp) === null || _a === void 0 ? void 0 : _a.call(attrs); },
+                            }, (0, mithril_1.default)(Icon_1.Icon, { far: "circle-question" })),
+                        ]) : [],
                     ]),
                     // Editor content
                     (0, mithril_1.default)("textarea.editor-textarea", {

package/dist/components/pagination/Pagination.d.ts

@@ -0,0 +1,40 @@
+import m from "mithril";
+export type PaginationLayout = "left" | "middle" | "right";
+export interface PaginationAttrs {
+    /** The start of the range currently being displayed */
+    from: number;
+    /** The end of the range currently being displayed */
+    to: number;
+    /** The total number of all records available for display */
+    of: number;
+    /** Optionally override the "x-y of z" message, or disable it entirely with `false` */
+    xToYOfZ?: string | m.Vnode<any, any> | false;
+    /** Called when clicking the "next" button. The button is not displayed if this function is undefined. */
+    next?: (ev: MouseEvent) => any;
+    /** Called when clicking the "prev" button. The button is not displayed if this function is undefined. */
+    prev?: (ev: MouseEvent) => any;
+    /** Called when clicking the "first" button. The button is not displayed if this function is undefined. */
+    first?: (ev: MouseEvent) => any;
+    /** Called when clicking the "last" button. The button is not displayed if this function is undefined. */
+    last?: (ev: MouseEvent) => any;
+    /** Indicate the user is at the start of the data */
+    isAtStart?: boolean;
+    /** Indicate the user is at the end of the data */
+    isAtEnd?: boolean;
+    /** Override how the pagination should float along the row */
+    layout?: PaginationLayout;
+    /** Enable display and selection of page sizes */
+    size?: {
+        /** The current size of the page */
+        size: number;
+        /** Function called when a new page size is selected */
+        onselect: (size: number) => any;
+        /** Override the default list of available sizes to choose from */
+        sizes?: number[];
+    };
+    /** CSS classes to apply to the row container element */
+    class?: string;
+    /** CSS styles to apply to the row container element */
+    style?: string;
+}
+export declare const Pagination: m.Component<PaginationAttrs>;

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const pagination_settings_1 = require("./pagination-settings");
+const icon_1 = require("../icon");
+exports.Pagination = {
+    view({ attrs }) {
+        var _a, _b;
+        const layout = (attrs.layout || pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.layout);
+        return (0, mithril_1.default)(".mico-pagination", {
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""}`,
+            style: `${(_b = attrs.style) !== null && _b !== void 0 ? _b : ""} display: flex; align-items: center;`,
+        }, [
+            (layout === "middle" || layout === "right") ? (0, mithril_1.default)("", { style: "flex: 1;" }) : [],
+            (attrs.size) ? [
+                (0, mithril_1.default)("span", `Page size:`),
+                (0, mithril_1.default)("select.mico-pagination-select", {
+                    value: attrs.size.size,
+                    oninput: (e) => attrs.size.onselect(Number(e.target.value)),
+                }, (attrs.size.sizes || pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.pageSizes).map(s => (0, mithril_1.default)("option", s))),
+            ] : [],
+            (attrs.xToYOfZ !== undefined) ? [
+                (attrs.xToYOfZ === false) ? [] :
+                    (typeof attrs.xToYOfZ === "string") ? (0, mithril_1.default)("span.mico-pagination-xtoyofz", attrs.xToYOfZ) :
+                        attrs.xToYOfZ,
+            ] : [
+                (0, mithril_1.default)("span.mico-pagination-xtoyofz", `${attrs.from}-${attrs.to} of ${attrs.of}`),
+            ],
+            (attrs.first !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
+                disabled: attrs.isAtStart,
+                title: "First page",
+                onclick: (ev) => { var _a; return (_a = attrs.first) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.first
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.first)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "backward-step" }),
+            ]) : [],
+            (attrs.prev !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
+                disabled: attrs.isAtStart,
+                title: "Previous page",
+                onclick: (ev) => { var _a; return (_a = attrs.prev) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.prev
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.prev)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angle-left" }),
+            ]) : [],
+            (attrs.next !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
+                disabled: attrs.isAtEnd,
+                title: "Next page",
+                onclick: (ev) => { var _a; return (_a = attrs.next) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.next
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.next)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "angle-right" }),
+            ]) : [],
+            (attrs.last !== undefined) ? (0, mithril_1.default)("button.mico-pagination-button", {
+                disabled: attrs.isAtEnd,
+                title: "Last page",
+                onclick: (ev) => { var _a; return (_a = attrs.last) === null || _a === void 0 ? void 0 : _a.call(attrs, ev); },
+            }, [
+                pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.last
+                    ? (0, mithril_1.default)(pagination_settings_1.PAGINATION_DEFAULT_SETTINGS.iconComponents.last)
+                    : (0, mithril_1.default)(icon_1.Icon, { fas: "forward-step" }),
+            ]) : [],
+            (layout === "middle" || layout === "left") ? (0, mithril_1.default)("", { style: "flex: 1;" }) : [],
+        ]);
+    },
+};

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

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export * from "./pagination-settings";

package/dist/components/pagination/index.js

@@ -1 +1,18 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Pagination"), exports);
+__exportStar(require("./pagination-settings"), exports);

package/dist/components/pagination/pagination-settings.d.ts

@@ -0,0 +1,17 @@
+import m from "mithril";
+/**
+ * Default common settings for pagination components
+ */
+export declare const PAGINATION_DEFAULT_SETTINGS: {
+    /** "left" | "middle" | "right" */
+    layout: string;
+    pageSize: number;
+    pageSizes: number[];
+    /** Optionally override the default icon components displayed in the pagination buttons */
+    iconComponents: {
+        first: m.Component<any, any> | undefined;
+        prev: m.Component<any, any> | undefined;
+        next: m.Component<any, any> | undefined;
+        last: m.Component<any, any> | undefined;
+    };
+};

package/dist/components/pagination/pagination-settings.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PAGINATION_DEFAULT_SETTINGS = void 0;
+/**
+ * Default common settings for pagination components
+ */
+exports.PAGINATION_DEFAULT_SETTINGS = {
+    /** "left" | "middle" | "right" */
+    layout: "right",
+    pageSize: 25,
+    pageSizes: [25, 50, 100],
+    /** Optionally override the default icon components displayed in the pagination buttons */
+    iconComponents: {
+        first: undefined,
+        prev: undefined,
+        next: undefined,
+        last: undefined,
+    },
+};

package/dist/components/panel-tree/PanelTree.d.ts

@@ -0,0 +1,26 @@
+import m from "mithril";
+export declare const PanelTreePanel: m.Component<{
+    /** The data subtree associated with this panel */
+    data: object;
+    /** The type of parent container (if any) to inform how the dragging target is highlighted (or not) */
+    parentType: "row" | "column" | undefined;
+    /** Remove the data associated with this panel from the canonical tree to be inserted elsewhere */
+    remove: () => void;
+    /** Insert the given subtree either before or after the current node as a sibling in the tree */
+    insert: (subtree: object, before: boolean) => void;
+    debugLabel?: string;
+    class?: string;
+    style?: string;
+}, {
+    /** Whether the current drag is over the "start" or "end" of the panel, according to the parent direction */
+    isOverStart: boolean;
+    el: HTMLElement;
+}>;
+export declare const PanelTreeHandle: m.Component<{
+    /** The data subtree associated with this panel */
+    data: object;
+    /** Remove the data associated with this panel from the canonical tree to be inserted elsewhere */
+    remove: () => void;
+}, {
+    el: HTMLElement;
+}>;

package/dist/components/panel-tree/PanelTree.js

@@ -0,0 +1,180 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelTreeHandle = exports.PanelTreePanel = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const panel_tree_constants_1 = require("./panel-tree-constants");
+const panel_tree_store_1 = require("./panel-tree-store");
+const panel_tree_utils_1 = require("./panel-tree-utils");
+/** Data about the state of the ongoing drag operation */
+const PTStore = new panel_tree_store_1.PanelTreeStore();
+exports.PanelTreePanel = {
+    oninit() {
+        // this.isDragOver = false;
+    },
+    oncreate({ dom }) {
+        this.el = dom;
+    },
+    onupdate({ dom }) {
+        this.el = dom;
+    },
+    view({ attrs, children }) {
+        var _a, _b, _c;
+        const { parentType, data } = attrs;
+        const isOver = PTStore.isDragging && PTStore.overEl === this.el;
+        const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
+        const isValidTarget = (parentType !== undefined) && (PTStore.draggedData !== data) && !isRecursive;
+        let dragBorder = "border border-grey-300 dark:border-grey-700";
+        if (isOver && isValidTarget) {
+            if (parentType === "row" && this.isOverStart) {
+                dragBorder = "border-primary border-l-4";
+            }
+            else if (parentType === "row" && !this.isOverStart) {
+                dragBorder = "border-primary border-r-4";
+            }
+            else if (parentType === "column" && this.isOverStart) {
+                dragBorder = "border-primary border-t-4";
+            }
+            else if (parentType === "column" && !this.isOverStart) {
+                dragBorder = "border-primary border-b-4";
+            }
+        }
+        if (isOver && !isValidTarget) {
+            dragBorder = "border-grey-500 border";
+        }
+        const onOver = (ev) => {
+            var _a;
+            if (!PTStore.isDragging)
+                return;
+            ev.stopImmediatePropagation();
+            ev.preventDefault();
+            // PANEL_TREE_DEBUG ?? console.debug("is dragging over panel with parent " + parentType);
+            const { dragEv, touchEv } = panel_tree_utils_1.PanelTreeUtils.dragOrTouch(ev);
+            PTStore.overEl = this.el;
+            const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
+            const isValidTarget = parentType !== undefined && PTStore.draggedData !== data && !isRecursive;
+            if (isValidTarget) {
+                // this.isDragOver = true;
+                PTStore.dropEffect = (parentType === undefined) ? "none" : "move";
+                if (dragEv === null || dragEv === void 0 ? void 0 : dragEv.dataTransfer) {
+                    dragEv.dataTransfer.dropEffect = PTStore.dropEffect;
+                }
+                // Determine if the drag is over the "starting end" of the panel
+                const overDiv = ev.currentTarget;
+                const targetRect = overDiv.getBoundingClientRect();
+                if (parentType === "row") {
+                    const leftToMouse = panel_tree_utils_1.PanelTreeUtils.eventXPos(ev) - targetRect.left;
+                    const isLeft = leftToMouse < (targetRect.width - leftToMouse);
+                    this.isOverStart = isLeft;
+                }
+                else {
+                    const topToMouse = panel_tree_utils_1.PanelTreeUtils.eventYPos(ev) - targetRect.top;
+                    const isAbove = topToMouse < (targetRect.height - topToMouse);
+                    this.isOverStart = isAbove;
+                }
+                panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`dragging over valid target, ${this.isOverStart ? "over start" : "over end"}`);
+            }
+            else {
+                panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`dragging over invalid target`);
+            }
+        };
+        const onDrop = (ev) => {
+            var _a;
+            if (!PTStore.isDragging)
+                return;
+            ev.stopImmediatePropagation();
+            // this.isDragOver = false;
+            PTStore.dropTargetData = data;
+            PTStore.dropTargetPanel = this.el;
+            const isRecursive = (_a = PTStore.draggedPanel) === null || _a === void 0 ? void 0 : _a.contains(this.el);
+            const movedData = PTStore.draggedData;
+            panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`drag dropped, dataTransfer data: ${JSON.stringify(movedData)}`);
+            if (movedData && movedData !== data && !isRecursive) {
+                setTimeout(() => {
+                    panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`Instruct tree to insert subtree: ${JSON.stringify(movedData)}`);
+                    attrs.insert(movedData, this.isOverStart);
+                    mithril_1.default.redraw();
+                }, 1);
+            }
+            PTStore.isDragging = false;
+        };
+        const onEnd = (ev) => {
+            // ev.stopImmediatePropagation();
+            // this.isDragOver = false;
+            panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug("drag ended");
+            // No op?
+            PTStore.isDragging = false;
+        };
+        return (0, mithril_1.default)(`.${panel_tree_constants_1.PANEL_TREE_PANEL_CLASS}.flex-1.rounded.shadow-md`, {
+            // TODO
+            // class: `${attrs.class ?? ""} ${mobileMode.isMob ? "p-1" : "p-2"} ${dragBorder}`,
+            class: `${(_b = attrs.class) !== null && _b !== void 0 ? _b : ""} p-1 ${dragBorder}`,
+            style: (_c = attrs.style) !== null && _c !== void 0 ? _c : "",
+            ondragover: (ev) => {
+                return onOver(ev);
+            },
+            ondragleave: (ev) => {
+                // ev.stopImmediatePropagation();
+                // if (ev.currentTarget === this.el) {
+                //   PANEL_TREE_DEBUG ?? console.debug("drag leave target", ev.target);
+                //   PANEL_TREE_DEBUG ?? console.debug("drag leave current target", ev.currentTarget);
+                //   // PANEL_TREE_DEBUG ?? console.debug(`Leaving panel ${attrs.debugLabel}`);
+                //   // this.isDragOver = false;
+                // }
+            },
+            ondrop: (ev) => {
+                return onDrop(ev);
+            },
+            ondragend: (ev) => {
+                return onEnd(ev);
+            },
+            // Event redispatched from the drag handle
+            ontouchmove: (ev) => {
+                return onOver(ev);
+            },
+            // Event redispatched from the drag handle
+            ontouchend: (ev) => {
+                return onDrop(ev);
+            },
+        }, children);
+    },
+};
+exports.PanelTreeHandle = {
+    oninit() { },
+    oncreate({ dom }) {
+        this.el = dom;
+    },
+    view({ attrs }) {
+        const { data } = attrs;
+        return (0, mithril_1.default)(".px-2.py-1.flex.items-center.cursor-move", {
+            // TODO
+            // ...tooltipSpread("Reposition this element", { delay: 1_000 }),
+            draggable: true,
+            ondragstart: (ev) => PTStore.onStartDraggingHandle(ev, data),
+            ondragend: (ev) => PTStore.onEndDraggingHandle(ev, data, () => { var _a; return (_a = attrs.remove) === null || _a === void 0 ? void 0 : _a.call(attrs); }),
+            ontouchstart: (ev) => PTStore.onStartDraggingHandle(ev, data),
+            // Redispatch the event to the panel that the touch is currently over
+            ontouchmove: (ev) => {
+                if (PTStore.isDragging) {
+                    // Disable scrolling if there is an ongoing drag
+                    ev.stopImmediatePropagation();
+                    ev.preventDefault();
+                    panel_tree_utils_1.PanelTreeUtils.dispatchTouchEventToHoveredPanel(ev);
+                }
+            },
+            ontouchend: (ev) => {
+                // Re-dispatch the event first to set the drop target data
+                panel_tree_utils_1.PanelTreeUtils.dispatchTouchEventToLastHoveredPanel(ev);
+                // Next, handle the end of the drag and possibly call the function to remove the panel
+                PTStore.onEndDraggingHandle(ev, data, () => { var _a; return (_a = attrs.remove) === null || _a === void 0 ? void 0 : _a.call(attrs); });
+            },
+            ontouchcancel: (ev) => {
+                PTStore.isDragging = false;
+            },
+        }, [
+            (0, mithril_1.default)("i.fas.fa-grip-vertical.text-icon"),
+        ]);
+    },
+};

package/dist/components/panel-tree/index.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/panel-tree/panel-tree-constants.d.ts

@@ -0,0 +1,3 @@
+/** The CSS class applied all panel tree panels */
+export declare const PANEL_TREE_PANEL_CLASS = "panel-tree-panel";
+export declare const PANEL_TREE_DEBUG = false;

package/dist/components/panel-tree/panel-tree-constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PANEL_TREE_DEBUG = exports.PANEL_TREE_PANEL_CLASS = void 0;
+/** The CSS class applied all panel tree panels */
+exports.PANEL_TREE_PANEL_CLASS = "panel-tree-panel";
+exports.PANEL_TREE_DEBUG = false;

package/dist/components/panel-tree/panel-tree-store.d.ts

@@ -0,0 +1,23 @@
+export declare class PanelTreeStore {
+    /** If there is an ongoing drag operation */
+    isDragging: boolean;
+    /** The panel in the tree being moved by an ongoing drag operation */
+    draggedPanel: HTMLElement | undefined;
+    /** The panel in the tree that has just had a drag event dropped onto it */
+    dropTargetPanel: HTMLElement | undefined;
+    /** The panel over which the ongoing drag was last dragged */
+    overEl: HTMLElement | undefined;
+    /** The data being "moved" by the drag operation */
+    draggedData: object | undefined;
+    /** The data associated with the target for the drop action */
+    dropTargetData: object | undefined;
+    /** Mirrored from `dragEvent.dataTransfer.dropEffect` to support touch drags */
+    dropEffect: "none" | "copy" | "link" | "move" | undefined;
+    /** Whether the current drop operation is recursive */
+    get isRecursive(): boolean;
+    constructor();
+    /** The user has started dragging a handle of a panel */
+    onStartDraggingHandle(ev: DragEvent | TouchEvent, data: object): void;
+    /** The user has stopped dragging a handle of a panel */
+    onEndDraggingHandle(ev: DragEvent | TouchEvent, data: object, remove: () => void): void;
+}

package/dist/components/panel-tree/panel-tree-store.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelTreeStore = void 0;
+const panel_tree_constants_1 = require("./panel-tree-constants");
+const panel_tree_utils_1 = require("./panel-tree-utils");
+class PanelTreeStore {
+    /** Whether the current drop operation is recursive */
+    get isRecursive() {
+        return (this.draggedPanel !== undefined) &&
+            (this.dropTargetPanel !== undefined) &&
+            (this.draggedPanel.contains(this.dropTargetPanel));
+    }
+    constructor() {
+        /** If there is an ongoing drag operation */
+        this.isDragging = false;
+        /** The panel in the tree being moved by an ongoing drag operation */
+        this.draggedPanel = undefined;
+        /** The panel in the tree that has just had a drag event dropped onto it */
+        this.dropTargetPanel = undefined;
+        /** The panel over which the ongoing drag was last dragged */
+        this.overEl = undefined;
+        /** The data being "moved" by the drag operation */
+        this.draggedData = undefined;
+        /** The data associated with the target for the drop action */
+        this.dropTargetData = undefined;
+        /** Mirrored from `dragEvent.dataTransfer.dropEffect` to support touch drags */
+        this.dropEffect = undefined;
+    }
+    /** The user has started dragging a handle of a panel */
+    onStartDraggingHandle(ev, data) {
+        var _a;
+        ev.stopImmediatePropagation();
+        // ev.preventDefault();
+        const { dragEv, touchEv } = panel_tree_utils_1.PanelTreeUtils.dragOrTouch(ev);
+        const parentPanel = panel_tree_utils_1.PanelTreeUtils.findParentPanel(ev.currentTarget);
+        // logger.debug(``)
+        if (parentPanel) {
+            this.isDragging = true;
+            this.draggedData = data;
+            this.draggedPanel = parentPanel;
+            panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`Begin dragging, handle data: ${JSON.stringify(data)}`);
+            const parentRect = parentPanel.getBoundingClientRect();
+            if (dragEv) {
+                (_a = dragEv.dataTransfer) === null || _a === void 0 ? void 0 : _a.setDragImage(parentPanel, dragEv.clientX - parentRect.left, dragEv.clientY - parentRect.top);
+            }
+        }
+    }
+    /** The user has stopped dragging a handle of a panel */
+    onEndDraggingHandle(ev, data, remove) {
+        ev.stopImmediatePropagation();
+        const { dragEv, touchEv } = panel_tree_utils_1.PanelTreeUtils.dragOrTouch(ev);
+        const isRecursive = this.isRecursive; // STORE.dropTargetPanel && STORE.draggedPanel?.contains(STORE.dropTargetPanel);
+        panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`End dragging, dropEffect: ${this.dropEffect}, handle data: ${JSON.stringify(data)}`);
+        if (this.dropEffect === "move") {
+            if (this.dropTargetData !== data && !isRecursive) {
+                panel_tree_constants_1.PANEL_TREE_DEBUG !== null && panel_tree_constants_1.PANEL_TREE_DEBUG !== void 0 ? panel_tree_constants_1.PANEL_TREE_DEBUG : console.debug(`Instruct tree to remove subtree: ${JSON.stringify(data)}`);
+                remove === null || remove === void 0 ? void 0 : remove();
+            }
+        }
+        this.isDragging = false;
+    }
+}
+exports.PanelTreeStore = PanelTreeStore;

package/dist/components/panel-tree/panel-tree-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Stateless utility functions used by the PanelTree component
+ */
+export declare class PanelTreeUtils {
+    /** The last panel that was targetted when re-dispatching a touch event */
+    static lastTouchHoverPanel: HTMLElement | undefined;
+    /** Find the first parent element of the given element that contains the CSS class for panel tree panels */
+    static findParentPanel(handleEl: HTMLElement): HTMLElement | undefined;
+    static dragOrTouch(ev: DragEvent | TouchEvent): {
+        dragEv: DragEvent | undefined;
+        touchEv: TouchEvent | undefined;
+    };
+    static eventXPos(ev: DragEvent | TouchEvent): number;
+    static eventYPos(ev: DragEvent | TouchEvent): number;
+    static dispatchTouchEventToHoveredPanel(ev: TouchEvent): void;
+    static dispatchTouchEventToLastHoveredPanel(ev: TouchEvent): void;
+}

package/dist/components/panel-tree/panel-tree-utils.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelTreeUtils = void 0;
+const panel_tree_constants_1 = require("./panel-tree-constants");
+/**
+ * Stateless utility functions used by the PanelTree component
+ */
+class PanelTreeUtils {
+    /** Find the first parent element of the given element that contains the CSS class for panel tree panels */
+    static findParentPanel(handleEl) {
+        const parent = handleEl.parentElement;
+        if (!parent)
+            return;
+        if (parent.classList.contains(panel_tree_constants_1.PANEL_TREE_PANEL_CLASS))
+            return parent;
+        return this.findParentPanel(parent);
+    }
+    static dragOrTouch(ev) {
+        const dragEv = ev.type.includes("drag") ? ev : undefined;
+        const touchEv = (ev.type.includes("touch")) ? ev : undefined;
+        return {
+            dragEv,
+            touchEv,
+        };
+    }
+    static eventXPos(ev) {
+        if (ev.type.includes("touch")) {
+            return ev.touches[0].clientX;
+        }
+        else {
+            return ev.clientX;
+        }
+    }
+    static eventYPos(ev) {
+        if (ev.type.includes("touch")) {
+            return ev.touches[0].clientY;
+        }
+        else {
+            return ev.clientY;
+        }
+    }
+    static dispatchTouchEventToHoveredPanel(ev) {
+        // Find element dragged over
+        const overEl = document.elementFromPoint(ev.touches[0].clientX, ev.touches[0].clientY);
+        const panel = overEl ? this.findParentPanel(overEl) : undefined;
+        if (panel) {
+            this.lastTouchHoverPanel = panel;
+            const evCopy = new TouchEvent(ev.type, ev);
+            panel.dispatchEvent(evCopy);
+        }
+    }
+    static dispatchTouchEventToLastHoveredPanel(ev) {
+        if (this.lastTouchHoverPanel) {
+            const evCopy = new TouchEvent(ev.type, ev);
+            this.lastTouchHoverPanel.dispatchEvent(evCopy);
+        }
+    }
+}
+exports.PanelTreeUtils = PanelTreeUtils;

package/dist/components/reorderable-list/RedorderableList.d.ts

@@ -0,0 +1,55 @@
+import m from "mithril";
+/**
+ * A reorderable list of items. Expects a list of reorderable list items in children.
+ *
+ * ! The divs containing the content of the items must be passed as a 1-D list to
+ * the reorderable list's children. E.g.:
+ *
+ * ```ts
+ * m(ReorderableList, {...}, ["one", "two"]),
+ * ```
+ *
+ * Or (note the list spread):
+ *
+ * ```ts
+ * m(ReorderableList, {...}, [
+ *  ...someList.map(item => m("", {...}, [...])),
+ * ]),
+ * ```
+ *
+ * The divs defining the content of the items are displayed in a flex row, and are encouraged
+ * to flex themselves to fill the row.
+ *
+ * Example of applying a reordering:
+ *
+ * ```ts
+ * const dragged = this.items.splice(fromIndex, 1)[0];
+ * this.items.splice(toIndex, 0, dragged);
+ * ```
+ */
+export declare const ReorderableList: m.Component<{
+    /** A reorder instruction from the user */
+    reorder: (fromIndex: number, toIndex: number) => any;
+    /** Function called when a reordering drag begins */
+    reorderStart?: (ev: MouseEvent | TouchEvent) => any;
+    /** Function called after a reordering drag has finished */
+    reorderEnd?: (ev: MouseEvent | TouchEvent) => any;
+    /** Message to display when there are no items in the list */
+    emptyMessage?: string | m.Vnode<any, any>;
+    /** Disable reordering and the UI prompts */
+    disableReordering?: boolean;
+    /** Optionally hide the row numbers and narrow the reorder grip area */
+    hideNumbers?: boolean;
+    /** Optional space-separated CSS classes to apply to the container div */
+    class?: string;
+    /** Optional space-separated CSS classes to apply to each reorderable item row div */
+    itemClass?: string;
+    /** Optional CSS styles to apply to the container div */
+    style?: string;
+    /** Optional HTML ID for the div containing the list rows */
+    id?: string;
+}, {
+    draggingIndex: number | undefined;
+    draggedOverIndex: number | undefined;
+    draggedOverTop: boolean | undefined;
+}>;

package/dist/components/reorderable-list/RedorderableList.js

@@ -0,0 +1,208 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReorderableList = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const utils_1 = require("../../utils");
+/**
+ * A reorderable list of items. Expects a list of reorderable list items in children.
+ *
+ * ! The divs containing the content of the items must be passed as a 1-D list to
+ * the reorderable list's children. E.g.:
+ *
+ * ```ts
+ * m(ReorderableList, {...}, ["one", "two"]),
+ * ```
+ *
+ * Or (note the list spread):
+ *
+ * ```ts
+ * m(ReorderableList, {...}, [
+ *  ...someList.map(item => m("", {...}, [...])),
+ * ]),
+ * ```
+ *
+ * The divs defining the content of the items are displayed in a flex row, and are encouraged
+ * to flex themselves to fill the row.
+ *
+ * Example of applying a reordering:
+ *
+ * ```ts
+ * const dragged = this.items.splice(fromIndex, 1)[0];
+ * this.items.splice(toIndex, 0, dragged);
+ * ```
+ */
+exports.ReorderableList = {
+    oninit({ attrs }) {
+        this.draggingIndex = undefined;
+        this.draggedOverIndex = undefined;
+        this.draggedOverTop = undefined;
+        // this.beginDrag = (ev: MouseEvent, index: number) => {
+        //   this.draggingIndex = index;
+        // };
+        // this.dragOver = (ev: MouseEvent, index: number) => {
+        //   if (this.draggingIndex === undefined) return;
+        //   this.draggedOverIndex = index;
+        // };
+        // this.endDrag = (ev: MouseEvent) => {
+        //   const bothIndicesDefined = (this.draggingIndex !== undefined && this.draggedOverIndex !== undefined);
+        //   const indicesDifferent = (this.draggingIndex !== this.draggedOverIndex);
+        //   if (bothIndicesDefined && indicesDifferent) {
+        //     attrs.reorder?.(this.draggingIndex!, this.draggedOverIndex!);
+        //   }
+        //   this.draggingIndex = undefined;
+        //   this.draggedOverIndex = undefined;
+        // };
+    },
+    view({ attrs, children }) {
+        const childArr = children instanceof Array ? children : [children];
+        const disableReordering = attrs.disableReordering === true;
+        const beginDrag = (ev, index) => {
+            var _a;
+            if (disableReordering)
+                return;
+            this.draggingIndex = index;
+            (_a = attrs.reorderStart) === null || _a === void 0 ? void 0 : _a.call(attrs, ev);
+        };
+        const dragOver = (ev, index, isAbove) => {
+            if (disableReordering)
+                return;
+            if (this.draggingIndex === undefined)
+                return;
+            this.draggedOverIndex = index;
+            this.draggedOverTop = isAbove;
+        };
+        const endDrag = (ev) => {
+            var _a, _b;
+            if (disableReordering)
+                return;
+            const bothIndicesDefined = (this.draggingIndex !== undefined && this.draggedOverIndex !== undefined);
+            const indicesDifferent = (this.draggingIndex !== this.draggedOverIndex);
+            if (bothIndicesDefined && indicesDifferent) {
+                let from = this.draggingIndex;
+                let to = this.draggedOverIndex;
+                if (from < to && this.draggedOverTop === true) {
+                    to--;
+                }
+                else if (to < from && this.draggedOverTop === false) {
+                    to++;
+                }
+                (_a = attrs.reorder) === null || _a === void 0 ? void 0 : _a.call(attrs, from, to);
+            }
+            if (this.draggingIndex !== undefined) {
+                (_b = attrs.reorderEnd) === null || _b === void 0 ? void 0 : _b.call(attrs, ev);
+            }
+            this.draggingIndex = undefined;
+            this.draggedOverIndex = undefined;
+            this.draggedOverTop = undefined;
+        };
+        return (0, mithril_1.default)("", {
+            id: attrs.id,
+            class: `${attrs.class || ""} no-select`,
+            style: `${attrs.style || ""}`,
+            onmouseup: (ev) => endDrag(ev),
+            onmouseleave: (ev) => endDrag(ev),
+            ontouchmove: (ev) => {
+                var _a, _b;
+                if (disableReordering)
+                    return;
+                // This div, which contains the reorderable rows
+                const rowContainerEl = ev.currentTarget;
+                const touchX = (_a = ev.touches.item(0)) === null || _a === void 0 ? void 0 : _a.clientX;
+                const touchY = (_b = ev.touches.item(0)) === null || _b === void 0 ? void 0 : _b.clientY;
+                if (!touchX || !touchY)
+                    return;
+                let overIndex = undefined;
+                let isAbove = undefined;
+                for (let i = 0; i < rowContainerEl.children.length; i++) {
+                    const childEl = rowContainerEl.children[i];
+                    const childElBounds = childEl.getBoundingClientRect();
+                    if ((0, utils_1.coordsWithinElement)(touchX, touchY, childEl)) {
+                        overIndex = i;
+                        const boundsTopToTouch = touchY - childElBounds.top;
+                        isAbove = boundsTopToTouch < (childElBounds.height - boundsTopToTouch);
+                    }
+                }
+                // console.log(`touch move, in ${rowContainerEl}, coords: ${touchX}, ${touchY}, over child index: ${overIndex}`);
+                if (overIndex !== undefined && isAbove !== undefined) {
+                    dragOver(ev, overIndex, isAbove);
+                }
+            },
+            ontouchend: (ev) => {
+                endDrag(ev);
+            },
+            ontouchcancel: (ev) => {
+                endDrag(ev);
+            },
+        }, [
+            (childArr.length === 0) ? attrs.emptyMessage || (0, mithril_1.default)("p", "No items to display") : [],
+            childArr.map((item, childIndex) => {
+                return (0, mithril_1.default)(ReorderableListItem, {
+                    itemIndex: childIndex,
+                    draggedOverIndex: this.draggedOverIndex,
+                    draggedOverTop: this.draggedOverTop,
+                    key: item.hasOwnProperty("key") ? item.key : undefined,
+                    class: attrs.itemClass,
+                    disableReordering,
+                    hideNumbers: attrs.hideNumbers,
+                    mouseOverFn: (ev) => {
+                        const targetRect = ev.currentTarget.getBoundingClientRect();
+                        const rectTopToEvent = ev.clientY - targetRect.top;
+                        const isAbove = rectTopToEvent < (targetRect.height - rectTopToEvent);
+                        // console.log(`mouse over, index ${childIndex}, target: ${ev.target}`);
+                        dragOver(ev, childIndex, isAbove);
+                    },
+                    mouseDownFn: (ev) => beginDrag(ev, childIndex),
+                    touchStartFn: (ev) => {
+                        // console.log(`touch start, index ${childIndex}, target: ${ev.target}`);
+                        ev.preventDefault();
+                        beginDrag(ev, childIndex);
+                    },
+                }, [
+                    item,
+                ]);
+            }),
+        ]);
+    }
+};
+/**
+ * An item in the reorderable list.
+ *
+ * Contains a reordering handle with the row index, then the main content of the item.
+ */
+const ReorderableListItem = {
+    view({ attrs, children }) {
+        var _a;
+        const { disableReordering, hideNumbers } = attrs;
+        const dragBorderClass = (attrs.draggedOverIndex !== attrs.itemIndex)
+            ? ""
+            : attrs.draggedOverTop
+                ? "border-t-2 border-primary"
+                : "border-b-2 border-primary";
+        return (0, mithril_1.default)(".flex.flex-row.items-stretch.space-x-2", {
+            key: attrs.key,
+            class: `${(_a = attrs.class) !== null && _a !== void 0 ? _a : ""} ${dragBorderClass}`,
+            style: ``,
+            onmousemove: (ev) => attrs.mouseOverFn(ev),
+        }, [
+            // Draggable index row header
+            (0, mithril_1.default)(".flex.items-center.space-x-2", {
+                style: `width: ${hideNumbers ? "30px" : "50px"};`,
+                class: `${disableReordering ? "text-hint" : "cursor-move"}`,
+                onmousedown: (ev) => attrs.mouseDownFn(ev),
+                ontouchstart: (ev) => attrs.touchStartFn(ev),
+            }, [
+                (0, mithril_1.default)(`i.fas.fa-grip-vertical`, {
+                    class: `${disableReordering ? "text-hint" : "text-grey-700 dark:text-grey-300"} ${hideNumbers ? "pl-2" : ""}`,
+                }),
+                hideNumbers
+                    ? []
+                    : (0, mithril_1.default)("", attrs.itemIndex + 1),
+            ]),
+            // The content in the reorderable item
+            children,
+        ]);
+    }
+};

package/dist/components/tab-panel/TabPanel.d.ts

@@ -0,0 +1,23 @@
+import m from "mithril";
+import { TabPanelSettings } from "./tab-panel-settings";
+export interface TabPanelAttrs {
+    /** Labels of the tabs, in order. Any undefined labels or children are completely ignored. */
+    labels: (string | m.Vnode<any> | undefined)[];
+    /** Optional settings to apply to the tab panel, alongside any default settings */
+    settings?: TabPanelSettings;
+    /** If present, this field is given a function that can then be used to request tab index changes */
+    getRequestFn?: (requestFn: (index: number) => void) => any;
+}
+interface TabPanelState {
+    /** The currently selected index */
+    index: number;
+    /** Function to set the selected index, clamping it within actual possibilities */
+    setIndex: (index: number) => void;
+    /** The total number of tabs in the panel (completely ignoring undefined children) */
+    tabCount: number;
+}
+/**
+ * If a child pane is undefined, it is completely ignored.
+ */
+export declare const TabPanel: m.Component<TabPanelAttrs, TabPanelState>;
+export {};

package/dist/components/tab-panel/TabPanel.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const tab_panel_default_settings_1 = require("./tab-panel-default-settings");
+/**
+ * If a child pane is undefined, it is completely ignored.
+ */
+exports.TabPanel = {
+    oninit({ attrs, state, children }) {
+        var _a, _b, _c;
+        state.tabCount = countChildren(children);
+        state.setIndex = (index) => {
+            var _a, _b;
+            const lastIndex = state.tabCount - 1;
+            if (index < 0)
+                index = 0;
+            if (index > lastIndex)
+                index = lastIndex;
+            state.index = index;
+            if ((_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.persistenceKey)
+                localStorage.setItem((_b = attrs.settings) === null || _b === void 0 ? void 0 : _b.persistenceKey, String(index));
+        };
+        if ((_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.persistenceKey) {
+            const loaded = localStorage.getItem((_b = attrs.settings) === null || _b === void 0 ? void 0 : _b.persistenceKey);
+            state.setIndex(Number(loaded));
+        }
+        else {
+            state.setIndex(((_c = attrs.settings) === null || _c === void 0 ? void 0 : _c.initialIndex) || 0);
+        }
+        // If a request function has been asked for, return it
+        if (attrs.getRequestFn) {
+            attrs.getRequestFn(state.setIndex);
+        }
+    },
+    onremove({ attrs, state }) {
+        state.setIndex = () => undefined;
+    },
+    onbeforeupdate({ attrs, state, children }) {
+        // Ensure any children added/removed since last redraw are accounted for
+        if (children instanceof Array)
+            children = children.filter(c => c !== undefined);
+        state.tabCount = countChildren(children);
+    },
+    view({ attrs, state, children }) {
+        var _a, _b, _c, _d, _e, _f;
+        // Ignore undefined children and labels
+        if (children instanceof Array)
+            children = children.filter(c => c !== undefined);
+        const labels = attrs.labels.filter(l => l !== undefined);
+        return (0, mithril_1.default)("", {
+            class: `${tab_panel_default_settings_1.DEFAULT_TAB_PANEL_SETTINGS.class.tabPanel} ${(_b = (_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.tabPanel}`,
+        }, [
+            // m(Draggable, {
+            //   // TODO: wire up to allow draggable scrolling on desktop
+            //   ondrag: ({ x, y }) => {},
+            // }, [
+            (0, mithril_1.default)("", {
+                class: `${tab_panel_default_settings_1.DEFAULT_TAB_PANEL_SETTINGS.class.buttonBar} ${(_d = (_c = attrs.settings) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.buttonBar}`,
+            }, indices(state.tabCount).map(index => {
+                var _a, _b, _c, _d, _e, _f;
+                return (0, mithril_1.default)("button", {
+                    class: (tab_panel_default_settings_1.DEFAULT_TAB_PANEL_SETTINGS.class.tabButton + " " + ((_b = (_a = attrs.settings) === null || _a === void 0 ? void 0 : _a.classes) === null || _b === void 0 ? void 0 : _b.tabButton) + " " +
+                        (state.index === index ? tab_panel_default_settings_1.DEFAULT_TAB_PANEL_SETTINGS.class.tabButtonSelected : tab_panel_default_settings_1.DEFAULT_TAB_PANEL_SETTINGS.class.tabButtonUnselected) + " " +
+                        (state.index === index ? (_d = (_c = attrs.settings) === null || _c === void 0 ? void 0 : _c.classes) === null || _d === void 0 ? void 0 : _d.tabButtonSelected : (_f = (_e = attrs.settings) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.tabButtonUnselected)),
+                    onclick: () => state.setIndex(index),
+                }, labels[index] || `Tab ${index + 1}`);
+            })),
+            // ]),
+            (0, mithril_1.default)("div", {
+                class: `${tab_panel_default_settings_1.DEFAULT_TAB_PANEL_SETTINGS.class.selectedPane} ${(_f = (_e = attrs.settings) === null || _e === void 0 ? void 0 : _e.classes) === null || _f === void 0 ? void 0 : _f.selectedPane}`,
+            }, [
+                (!(children instanceof Array)) ? children :
+                    children.map((child, index) => (0, mithril_1.default)("", {
+                        style: `display: ${index === state.index ? "block" : "none"}`,
+                    }, child)),
+            ]),
+        ]);
+    }
+};
+function countChildren(children) {
+    if (children === undefined)
+        return 0;
+    if (children instanceof Array)
+        return children.filter(c => c !== undefined).length;
+    return 1;
+}
+/** Converts a count to a list of indices */
+function indices(count) {
+    return Array(count).fill(0).map((val, index) => index);
+}

package/dist/components/tab-panel/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./tab-panel-default-settings";
+export * from "./tab-panel-settings";
+export * from "./TabPanel";

package/dist/components/tab-panel/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./tab-panel-default-settings"), exports);
+__exportStar(require("./tab-panel-settings"), exports);
+__exportStar(require("./TabPanel"), exports);

package/dist/components/tab-panel/tab-panel-default-settings.d.ts

@@ -0,0 +1,17 @@
+export declare const DEFAULT_TAB_PANEL_SETTINGS: {
+    /** Optional CSS classes to apply to parts of the tab panel */
+    class: {
+        /** Space-separated CSS classes to apply to the entire tab panel */
+        tabPanel: string;
+        /** Space-separated CSS classes to apply to the panel's button bar */
+        buttonBar: string;
+        /** Space-separated CSS classes to apply to all tab buttons */
+        tabButton: string;
+        /** Space-separated CSS classes to apply to the currently-selected tab button */
+        tabButtonUnselected: string;
+        /** Space-separated CSS classes to apply to all the currently-unselected tab buttons */
+        tabButtonSelected: string;
+        /** Space-separated CSS classes to apply to the tab's contents pane displaying the selected child */
+        selectedPane: string;
+    };
+};

package/dist/components/tab-panel/tab-panel-default-settings.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_TAB_PANEL_SETTINGS = void 0;
+exports.DEFAULT_TAB_PANEL_SETTINGS = {
+    /** Optional CSS classes to apply to parts of the tab panel */
+    class: {
+        /** Space-separated CSS classes to apply to the entire tab panel */
+        tabPanel: "",
+        /** Space-separated CSS classes to apply to the panel's button bar */
+        buttonBar: "",
+        /** Space-separated CSS classes to apply to all tab buttons */
+        tabButton: "",
+        /** Space-separated CSS classes to apply to the currently-selected tab button */
+        tabButtonUnselected: "",
+        /** Space-separated CSS classes to apply to all the currently-unselected tab buttons */
+        tabButtonSelected: "",
+        /** Space-separated CSS classes to apply to the tab's contents pane displaying the selected child */
+        selectedPane: "",
+    },
+};

package/dist/components/tab-panel/tab-panel-settings.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Settings that customise the behaviour of a tab panel
+ */
+export interface TabPanelSettings {
+    /** The index of the tab initially selected, default = 0 */
+    initialIndex?: number;
+    /** How to position the tabs in the row, default = "left" (NOT IMPLEMENTED) */
+    align?: "left" | "right" | "center" | "justify";
+    /** How to handle overflowing tabs in the row (NOT IMPLEMENTED) */
+    overflow?: "scroll" | "wrap" | "hide";
+    /** Optional key to use to persist the tab panel's selected tab to local storage */
+    persistenceKey?: string;
+    /** Optional CSS classes to apply to parts of the tab panel */
+    classes?: {
+        /** Space-separated CSS classes to apply to the entire tab panel */
+        tabPanel?: string;
+        /** Space-separated CSS classes to apply to the panel's button bar */
+        buttonBar?: string;
+        /** Space-separated CSS classes to apply to all tab buttons */
+        tabButton?: string;
+        /** Space-separated CSS classes to apply to the currently-selected tab button */
+        tabButtonSelected?: string;
+        /** Space-separated CSS classes to apply to all the currently-unselected tab buttons */
+        tabButtonUnselected?: string;
+        /** Space-separated CSS classes to apply to the tab's contents pane displaying the selected child */
+        selectedPane?: string;
+    };
+}

package/dist/components/tab-panel/tab-panel-settings.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// export const DEFAULT_TAB_PANEL_SETTINGS: TabPanelSettings = {
+//   classes: {
+//     tabPanel: "w-full my-4",
+//     buttonBar: "flex flex-row items-center overflow-scroll hide-scrollbar border-gray-800 border-b-2",
+//     tabButton: "btn border border-gray-800 outline-none focus:outline-none",
+//     tabButtonUnselected: "btn-dark",
+//     tabButtonSelected: "text-black bg-white",
+//     selectedPane: "",
+//   },
+// };

package/dist/utils/dom.d.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * @param x
+ * @param y
+ * @param element
+ * @param strict
+ * @returns
+ */
+export declare function coordsWithinElement(x: number, y: number, element: Element, strict?: boolean): boolean;
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+export declare function mouseWithinElement(ev: MouseEvent, element: Element): boolean;

package/dist/utils/dom.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mouseWithinElement = exports.coordsWithinElement = void 0;
+/**
+ *
+ * @param x
+ * @param y
+ * @param element
+ * @param strict
+ * @returns
+ */
+function coordsWithinElement(x, y, element, strict = false) {
+    const rect = element.getBoundingClientRect();
+    return strict
+        ? (rect.left < x && x < rect.right && rect.top < y && y < rect.bottom)
+        : (rect.left <= x && x <= rect.right && rect.top <= y && y <= rect.bottom);
+}
+exports.coordsWithinElement = coordsWithinElement;
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+function mouseWithinElement(ev, element) {
+    const elementRect = element.getBoundingClientRect();
+    const isWithin = (ev.clientY >= elementRect.top) &&
+        (ev.clientY <= elementRect.bottom) &&
+        (ev.clientX >= elementRect.left) &&
+        (ev.clientX <= elementRect.right);
+    return isWithin;
+}
+exports.mouseWithinElement = mouseWithinElement;

package/dist/utils/events.d.ts

@@ -1,8 +1 @@
 export declare function dragEventFiles(ev: DragEvent): File[];
-/**
- * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
- * @param ev
- * @param element
- * @returns
- */
-export declare function mouseWithinElement(ev: MouseEvent, element: Element): boolean;

package/dist/utils/events.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mouseWithinElement = exports.dragEventFiles = void 0;
+exports.dragEventFiles = void 0;
 function dragEventFiles(ev) {
     var _a, _b, _c;
     const files = [];
@@ -27,18 +27,3 @@ function dragEventFiles(ev) {
     return files;
 }
 exports.dragEventFiles = dragEventFiles;
-/**
- * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
- * @param ev
- * @param element
- * @returns
- */
-function mouseWithinElement(ev, element) {
-    const elementRect = element.getBoundingClientRect();
-    const isWithin = (ev.clientY >= elementRect.top) &&
-        (ev.clientY <= elementRect.bottom) &&
-        (ev.clientX >= elementRect.left) &&
-        (ev.clientX <= elementRect.right);
-    return isWithin;
-}
-exports.mouseWithinElement = mouseWithinElement;

package/dist/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./date-time";
+export * from "./dom";
 export * from "./events";

package/dist/utils/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./date-time"), exports);
+__exportStar(require("./dom"), exports);
 __exportStar(require("./events"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",
@@ -14,10 +14,12 @@
     "predeploy": "npm run build-docs",
     "deploy": "git push origin master:deploy",
     "publish-deploy": "npm publish && npm run deploy",
+    "deploy-publish": "npm run publish-deploy",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
+    "@hypericon/utils": "^0.5.5",
     "dompurify": "^3.0.3",
     "highlight.js": "^11.8.0",
     "marked": "^4.3.0",