@ratiosolver/flick 0.2.7 → 0.2.9

package/dist/app.d.ts

@@ -0,0 +1,61 @@
+import { Component } from "./component";
+/**
+ * The `App` class implements the singleton pattern and manages the state and behavior of the application.
+ * It allows for the selection of components and notifies registered listeners of various events.
+ *
+ * @implements {AppListener}
+ */
+export declare class App implements AppListener {
+    private static instance;
+    private selected_comp;
+    private app_listeners;
+    private constructor();
+    static get_instance(): App;
+    /**
+     * Display a toast message.
+     *
+     * @param {string} info The information to display.
+     */
+    toast(info: string): void;
+    /**
+     * Get the selected component.
+     *
+     * @returns {Component<Node> | null} The selected component.
+     */
+    get_selected_component(): Component<Node> | null;
+    /**
+     * Set the selected component.
+     *
+     * @param {Component<Node> | null} component The component to select.
+     */
+    selected_component(component: Component<Node> | null): void;
+    /**
+     * Add an application listener.
+     *
+     * @param {AppListener} listener The listener to add.
+     */
+    add_app_listener(listener: AppListener): void;
+    /**
+     * Remove an application listener.
+     *
+     * @param {AppListener} listener The listener to remove.
+     */
+    remove_app_listener(listener: AppListener): void;
+}
+/**
+ * The `AppListener` interface defines the methods that an object must implement to listen to application events.
+ */
+export interface AppListener {
+    /**
+     * Request to display a toast message.
+     *
+     * @param {string} info The information to display.
+     */
+    toast(info: string): void;
+    /**
+     * Notification that a component has been selected.
+     *
+     * @param {Component<Node> | null} component The selected component.
+     */
+    selected_component(component: Component<Node> | null): void;
+}

package/dist/app.js

@@ -0,0 +1,61 @@
+/**
+ * The `App` class implements the singleton pattern and manages the state and behavior of the application.
+ * It allows for the selection of components and notifies registered listeners of various events.
+ *
+ * @implements {AppListener}
+ */
+export class App {
+    constructor() {
+        this.selected_comp = null;
+        this.app_listeners = new Set();
+    }
+    static get_instance() {
+        if (!App.instance)
+            App.instance = new App();
+        return App.instance;
+    }
+    /**
+     * Display a toast message.
+     *
+     * @param {string} info The information to display.
+     */
+    toast(info) { for (const listener of this.app_listeners) {
+        listener.toast(info);
+    } }
+    /**
+     * Get the selected component.
+     *
+     * @returns {Component<Node> | null} The selected component.
+     */
+    get_selected_component() { return this.selected_comp; }
+    /**
+     * Set the selected component.
+     *
+     * @param {Component<Node> | null} component The component to select.
+     */
+    selected_component(component) {
+        if (this.selected_comp)
+            this.selected_comp.remove();
+        this.selected_comp = component;
+        for (const listener of this.app_listeners) {
+            listener.selected_component(component);
+        }
+    }
+    /**
+     * Add an application listener.
+     *
+     * @param {AppListener} listener The listener to add.
+     */
+    add_app_listener(listener) {
+        this.app_listeners.add(listener);
+    }
+    /**
+     * Remove an application listener.
+     *
+     * @param {AppListener} listener The listener to remove.
+     */
+    remove_app_listener(listener) {
+        this.app_listeners.delete(listener);
+    }
+}
+//# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,OAAO,GAAG;IAMd;QAHQ,kBAAa,GAA2B,IAAI,CAAC;QAC7C,kBAAa,GAAqB,IAAI,GAAG,EAAE,CAAC;IAE5B,CAAC;IAEzB,MAAM,CAAC,YAAY;QACjB,IAAI,CAAC,GAAG,CAAC,QAAQ;YACf,GAAG,CAAC,QAAQ,GAAG,IAAI,GAAG,EAAE,CAAC;QAC3B,OAAO,GAAG,CAAC,QAAQ,CAAC;IACtB,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,IAAY,IAAU,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;QAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IAAC,CAAC,CAAC,CAAC;IAElG;;;;OAIG;IACH,sBAAsB,KAA6B,OAAO,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;IAE/E;;;;OAIG;IACH,kBAAkB,CAAC,SAAiC;QAClD,IAAI,IAAI,CAAC,aAAa;YACpB,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QAC9B,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAC/B,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YAAC,QAAQ,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC;QAAC,CAAC;IACxF,CAAC;IAED;;;;OAIG;IACH,gBAAgB,CAAC,QAAqB;QACpC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED;;;;OAIG;IACH,mBAAmB,CAAC,QAAqB;QACvC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;IACtC,CAAC;CACF"}

package/dist/component.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Abstract base class representing a UI component backed by a DOM Node.
+ *
+ * @typeParam N - The type of DOM Node associated with this component.
+ *
+ * @remarks
+ * - Manages mounting state and child components.
+ * - Handles DOM node insertion and removal.
+ * - Provides lifecycle hooks for mounting and unmounting.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends Component<HTMLElement> {
+ *   mounted() {
+ *     // Called when the component is mounted
+ *   }
+ *   unmounting() {
+ *     // Called before the component is unmounted
+ *   }
+ * }
+ * ```
+ *
+ * @property node - The DOM node associated with this component.
+ * @property is_mounted - Indicates whether the component is currently mounted.
+ * @property child_nodes - The set of child components.
+ *
+ * @method add_child - Adds a child component and appends its node.
+ * @method remove_child - Removes a child component and its node.
+ * @method remove - Unmounts and removes this component's node from the DOM.
+ * @method mount - Mounts this component to a parent component.
+ * @method mounted - Lifecycle hook called after mounting.
+ * @method unmounting - Lifecycle hook called before unmounting.
+ */
+export declare abstract class Component<N extends Node> {
+    readonly node: N;
+    private is_mounted;
+    private readonly child_nodes;
+    constructor(node: N);
+    /**
+     * Adds a child component to this component.
+     *
+     * This method appends the child's node to this component's node and adds the child to the internal set of child nodes.
+     * If this component is already mounted, the child will also be marked as mounted.
+     *
+     * @param child - The child component to add.
+     */
+    add_child(child: Component<Node>): void;
+    /**
+     * Adds a child component before a specified node within this component.
+     *
+     * This method inserts the child's node before the specified node in this component's node
+     * and adds the child to the internal set of child nodes.
+     * If this component is already mounted, the child will also be marked as mounted.
+     *
+     * @param child - The child component to add.
+     * @param node - The node before which the child's node will be inserted.
+     */
+    add_child_before(child: Component<Node>, node: Node): void;
+    /**
+     * Removes a child component from the current component.
+     *
+     * Attempts to delete the specified child from the `child_nodes` collection.
+     * If successful, it also calls the child's `remove()` method.
+     * Throws an error if the child is not found in the collection.
+     *
+     * @param child - The child component to remove.
+     * @throws {Error} If the child is not found in the `child_nodes` collection.
+     */
+    remove_child(child: Component<Node>): void;
+    /**
+     * Removes the component from the DOM and marks it as unmounted.
+     *
+     * This method first sets the component's state to unmounted by calling `set_unmounted()`.
+     * If the associated node is an instance of `HTMLElement`, it removes the node from the DOM.
+     */
+    remove(): void;
+    private set_mounted;
+    private set_unmounted;
+    /**
+     * Attaches this component to a parent component.
+     *
+     * This method performs the following steps:
+     * 1. Adds all child nodes of this component to the parent's child node set.
+     * 2. Appends this component's DOM node to the parent's DOM node.
+     * 3. Marks all child nodes of this component as mounted.
+     *
+     * @param parent - The parent component to attach this component to.
+     */
+    attach_to(parent: Component<Node>): void;
+    /**
+     * Lifecycle hook called after the component has been mounted to the DOM.
+     * Override this method to perform initialization tasks such as fetching data or setting up event listeners.
+     */
+    mounted(): void;
+    /**
+     * Called when the component is about to be unmounted from the DOM.
+     * Override this method to perform cleanup tasks such as removing event listeners,
+     * cancelling network requests, or releasing resources.
+     */
+    unmounting(): void;
+}
+/**
+ * An abstract component class that associates a payload of type `P` with a DOM node of type `N`.
+ *
+ * @typeParam P - The type of the payload data associated with the component.
+ * @typeParam N - The type of the DOM node, extending `Node`, that this component wraps.
+ * @extends Component<N>
+ *
+ * @property payload - The payload data associated with this component.
+ *
+ * @param node - The DOM node to associate with this component.
+ * @param payload - The payload data to associate with this component.
+ */
+export declare abstract class PayloadComponent<N extends Node, P> extends Component<N> {
+    readonly payload: P;
+    constructor(node: N, payload: P);
+}
+export declare class Fragment extends Component<DocumentFragment> {
+    constructor();
+}

package/dist/component.js

@@ -0,0 +1,161 @@
+/**
+ * Abstract base class representing a UI component backed by a DOM Node.
+ *
+ * @typeParam N - The type of DOM Node associated with this component.
+ *
+ * @remarks
+ * - Manages mounting state and child components.
+ * - Handles DOM node insertion and removal.
+ * - Provides lifecycle hooks for mounting and unmounting.
+ *
+ * @example
+ * ```typescript
+ * class MyComponent extends Component<HTMLElement> {
+ *   mounted() {
+ *     // Called when the component is mounted
+ *   }
+ *   unmounting() {
+ *     // Called before the component is unmounted
+ *   }
+ * }
+ * ```
+ *
+ * @property node - The DOM node associated with this component.
+ * @property is_mounted - Indicates whether the component is currently mounted.
+ * @property child_nodes - The set of child components.
+ *
+ * @method add_child - Adds a child component and appends its node.
+ * @method remove_child - Removes a child component and its node.
+ * @method remove - Unmounts and removes this component's node from the DOM.
+ * @method mount - Mounts this component to a parent component.
+ * @method mounted - Lifecycle hook called after mounting.
+ * @method unmounting - Lifecycle hook called before unmounting.
+ */
+export class Component {
+    constructor(node) {
+        this.child_nodes = new Set(); // The children of the component
+        this.node = node;
+        this.is_mounted = node.isConnected;
+    }
+    /**
+     * Adds a child component to this component.
+     *
+     * This method appends the child's node to this component's node and adds the child to the internal set of child nodes.
+     * If this component is already mounted, the child will also be marked as mounted.
+     *
+     * @param child - The child component to add.
+     */
+    add_child(child) {
+        this.child_nodes.add(child);
+        this.node.appendChild(child.node);
+        if (this.is_mounted)
+            child.set_mounted();
+    }
+    /**
+     * Adds a child component before a specified node within this component.
+     *
+     * This method inserts the child's node before the specified node in this component's node
+     * and adds the child to the internal set of child nodes.
+     * If this component is already mounted, the child will also be marked as mounted.
+     *
+     * @param child - The child component to add.
+     * @param node - The node before which the child's node will be inserted.
+     */
+    add_child_before(child, node) {
+        this.child_nodes.add(child);
+        this.node.insertBefore(child.node, node);
+        if (this.is_mounted)
+            child.set_mounted();
+    }
+    /**
+     * Removes a child component from the current component.
+     *
+     * Attempts to delete the specified child from the `child_nodes` collection.
+     * If successful, it also calls the child's `remove()` method.
+     * Throws an error if the child is not found in the collection.
+     *
+     * @param child - The child component to remove.
+     * @throws {Error} If the child is not found in the `child_nodes` collection.
+     */
+    remove_child(child) {
+        if (this.child_nodes.delete(child))
+            child.remove();
+        else
+            throw new Error('Child not found');
+    }
+    /**
+     * Removes the component from the DOM and marks it as unmounted.
+     *
+     * This method first sets the component's state to unmounted by calling `set_unmounted()`.
+     * If the associated node is an instance of `HTMLElement`, it removes the node from the DOM.
+     */
+    remove() {
+        this.set_unmounted();
+        if (this.node instanceof HTMLElement)
+            this.node.remove();
+    }
+    set_mounted() {
+        this.is_mounted = true;
+        for (const child of this.child_nodes)
+            child.set_mounted();
+        this.mounted();
+    }
+    set_unmounted() {
+        this.unmounting();
+        for (const child of this.child_nodes)
+            child.set_unmounted();
+        this.is_mounted = false;
+    }
+    /**
+     * Attaches this component to a parent component.
+     *
+     * This method performs the following steps:
+     * 1. Adds all child nodes of this component to the parent's child node set.
+     * 2. Appends this component's DOM node to the parent's DOM node.
+     * 3. Marks all child nodes of this component as mounted.
+     *
+     * @param parent - The parent component to attach this component to.
+     */
+    attach_to(parent) {
+        for (const child of this.child_nodes)
+            parent.child_nodes.add(child);
+        parent.node.appendChild(this.node);
+        for (const child of this.child_nodes)
+            child.set_mounted();
+    }
+    /**
+     * Lifecycle hook called after the component has been mounted to the DOM.
+     * Override this method to perform initialization tasks such as fetching data or setting up event listeners.
+     */
+    mounted() { }
+    /**
+     * Called when the component is about to be unmounted from the DOM.
+     * Override this method to perform cleanup tasks such as removing event listeners,
+     * cancelling network requests, or releasing resources.
+     */
+    unmounting() { }
+}
+/**
+ * An abstract component class that associates a payload of type `P` with a DOM node of type `N`.
+ *
+ * @typeParam P - The type of the payload data associated with the component.
+ * @typeParam N - The type of the DOM node, extending `Node`, that this component wraps.
+ * @extends Component<N>
+ *
+ * @property payload - The payload data associated with this component.
+ *
+ * @param node - The DOM node to associate with this component.
+ * @param payload - The payload data to associate with this component.
+ */
+export class PayloadComponent extends Component {
+    constructor(node, payload) {
+        super(node);
+        this.payload = payload;
+    }
+}
+export class Fragment extends Component {
+    constructor() {
+        super(document.createDocumentFragment());
+    }
+}
+//# sourceMappingURL=component.js.map

package/dist/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../src/component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,OAAgB,SAAS;IAM7B,YAAY,IAAO;QAFF,gBAAW,GAAyB,IAAI,GAAG,EAAE,CAAC,CAAC,gCAAgC;QAG9F,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,CAAC;IAED;;;;;;;OAOG;IACH,SAAS,CAAC,KAAsB;QAC9B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,UAAU;YACjB,KAAK,CAAC,WAAW,EAAE,CAAC;IACxB,CAAC;IAED;;;;;;;;;OASG;IACH,gBAAgB,CAAC,KAAsB,EAAE,IAAU;QACjD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QACzC,IAAI,IAAI,CAAC,UAAU;YACjB,KAAK,CAAC,WAAW,EAAE,CAAC;IACxB,CAAC;IAED;;;;;;;;;OASG;IACH,YAAY,CAAC,KAAsB;QACjC,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC;YAChC,KAAK,CAAC,MAAM,EAAE,CAAC;;YAEf,MAAM,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC;IACvC,CAAC;IAED;;;;;OAKG;IACH,MAAM;QACJ,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,IAAI,CAAC,IAAI,YAAY,WAAW;YAClC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;IACvB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW;YAClC,KAAK,CAAC,WAAW,EAAE,CAAC;QACtB,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW;YAClC,KAAK,CAAC,aAAa,EAAE,CAAC;QACxB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED;;;;;;;;;OASG;IACH,SAAS,CAAC,MAAuB;QAC/B,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW;YAClC,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnC,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,WAAW;YAClC,KAAK,CAAC,WAAW,EAAE,CAAC;IACxB,CAAC;IAED;;;OAGG;IACH,OAAO,KAAW,CAAC;IACnB;;;;OAIG;IACH,UAAU,KAAW,CAAC;CACvB;AAED;;;;;;;;;;;GAWG;AACH,MAAM,OAAgB,gBAAoC,SAAQ,SAAY;IAI5E,YAAY,IAAO,EAAE,OAAU;QAC7B,KAAK,CAAC,IAAI,CAAC,CAAC;QACZ,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;IACzB,CAAC;CACF;AAED,MAAM,OAAO,QAAS,SAAQ,SAA2B;IAEvD;QACE,KAAK,CAAC,QAAQ,CAAC,sBAAsB,EAAE,CAAC,CAAC;IAC3C,CAAC;CACF"}

package/dist/components/app.d.ts

@@ -2,7 +2,7 @@ import { VNode, VNodeChildren } from 'snabbdom';
 export declare function Brand(content: VNodeChildren, onClick?: () => void): VNode;
 export declare function OffcanvasBrand(content: VNodeChildren, id?: string): VNode;
 export declare function IconBrand(icon: string, width?: number, height?: number, name?: string, onClick?: () => void): VNode;
-export declare function NavbarItem(text: string, onClick?: () => void, active?: boolean): VNode;
+export declare function NavbarItem(content: VNodeChildren, onClick?: () => void, active?: boolean): VNode;
 export declare function NavbarList(items: VNodeChildren[]): VNode;
 export declare function Navbar(brand?: VNodeChildren, navbar_content?: VNodeChildren, id?: string): VNode;
 export declare function App(navbar?: VNodeChildren, content?: VNodeChildren): VNode;

package/dist/components/app.js

@@ -34,12 +34,12 @@ export function IconBrand(icon, width = 30, height = 30, name, onClick) {
         name ? ` ${name}` : ''
     ]);
 }
-export function NavbarItem(text, onClick, active = false) {
+export function NavbarItem(content, onClick, active = false) {
     return h('li.nav-item', { style: { cursor: 'pointer' } }, [
         h('a.nav-link', {
             class: { active },
             on: { click: onClick || (() => { }) }
-        }, text)
+        }, content)
     ]);
 }
 export function NavbarList(items) {

package/dist/components/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/components/app.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../src/components/app.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,CAAC,EAAwB,MAAM,UAAU,CAAC;AAEnD,MAAM,UAAU,KAAK,CAAC,OAAsB,EAAE,OAAoB;IAChE,OAAO,CAAC,CAAC,gBAAgB,EACvB;QACE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;QAClD,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE;KACtC,EAAE,OAAO,CAAC,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,OAAsB,EAAE,KAAa,iBAAiB;IACnF,OAAO,CAAC,CAAC,gBAAgB,EAAE;QACzB,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;QAC5B,KAAK,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE;QAC9B,EAAE,EAAE;YACF,KAAK,EAAE,GAAG,EAAE;gBACV,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;gBACvC,IAAI,EAAE;oBACJ,SAAS,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;YAC7C,CAAC;SACF;KACF,EAAE,OAAO,CAAC,CAAC;AACd,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAY,EAAE,QAAgB,EAAE,EAAE,SAAiB,EAAE,EAAE,IAAa,EAAE,OAAoB;IAClH,OAAO,CAAC,CAAC,gBAAgB,EAAE;QACzB,CAAC,CAAC,KAAK,EAAE;YACP,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAAE;YAClD,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI;gBACT,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,MAAM;gBACd,GAAG,EAAE,IAAI,IAAI,YAAY;aAC1B;YACD,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE;SACtC,CAAC;QACF,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;KACvB,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,OAAsB,EAAE,OAAoB,EAAE,SAAkB,KAAK;IAC9F,OAAO,CAAC,CAAC,aAAa,EACpB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QAClC,CAAC,CAAC,YAAY,EAAE;YACd,KAAK,EAAE,EAAE,MAAM,EAAE;YACjB,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,EAAE;SACtC,EAAE,OAAO,CAAC;KACZ,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,OAAO,CAAC,CAAC,oCAAoC,EAAE,KAAK,CAAC,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,MAAM,CAAC,QAAuB,KAAK,CAAC,OAAO,CAAC,EAAE,cAA8B,EAAE,EAAE,GAAG,wBAAwB;IACzH,OAAO,CAAC,CAAC,8CAA8C,EAAE;QACvD,CAAC,CAAC,qBAAqB,EAAE;YACvB,KAAK;YACL,CAAC,CAAC,uBAAuB,EAAE;gBACzB,KAAK,EAAE;oBACL,IAAI,EAAE,QAAQ;iBACf;gBACD,KAAK,EAAE;oBACL,gBAAgB,EAAE,UAAU;oBAC5B,gBAAgB,EAAE,IAAI,EAAE,EAAE;oBAC1B,eAAe,EAAE,EAAE;oBACnB,eAAe,EAAE,OAAO;oBACxB,YAAY,EAAE,mBAAmB;iBAClC;aACF,EAAE;gBACD,CAAC,CAAC,0BAA0B,CAAC;aAC9B,CAAC;YACF,CAAC,CAAC,OAAO,EAAE,2BAA2B,EAAE,cAAc,CAAC;SACxD,CAAC;KACH,CAAC,CAAC;AACL,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,SAAwB,MAAM,EAAE,EAAE,OAAuB;IAC3E,OAAO,CAAC,CAAC,mCAAmC,EAAE;QAC5C,MAAM;QACN,OAAO;KACR,CAAC,CAAC;AACL,CAAC"}

package/dist/components/brand.d.ts

@@ -0,0 +1,15 @@
+import { Component } from "../app";
+export declare class BrandComponent extends Component<void, HTMLAnchorElement> {
+    /**
+     * Creates a new brand component for the navigation bar.
+     *
+     * @param name - The display name of the brand. Defaults to 'Flick'.
+     * @param icon - The source URL or path for the brand icon. Defaults to 'favicon.ico'.
+     * @param icon_width - The width of the brand icon in pixels. Defaults to 32.
+     * @param icon_height - The height of the brand icon in pixels. Defaults to 32.
+     *
+     * The constructor initializes the brand element with an icon and text,
+     * styled and aligned for use in a navigation bar.
+     */
+    constructor(name?: string, icon?: string, icon_width?: number, icon_height?: number);
+}

package/dist/components/brand.js

@@ -0,0 +1,39 @@
+import { Component } from "../app";
+export class BrandComponent extends Component {
+    /**
+     * Creates a new brand component for the navigation bar.
+     *
+     * @param name - The display name of the brand. Defaults to 'Flick'.
+     * @param icon - The source URL or path for the brand icon. Defaults to 'favicon.ico'.
+     * @param icon_width - The width of the brand icon in pixels. Defaults to 32.
+     * @param icon_height - The height of the brand icon in pixels. Defaults to 32.
+     *
+     * The constructor initializes the brand element with an icon and text,
+     * styled and aligned for use in a navigation bar.
+     */
+    constructor(name = 'Flick', icon = 'favicon.ico', icon_width = 32, icon_height = 32) {
+        super(undefined, document.createElement('a'));
+        this.element.classList.add('navbar-brand');
+        this.element.href = '#';
+        const brand_container = document.createElement('div');
+        brand_container.style.display = 'flex';
+        brand_container.style.alignItems = 'center';
+        brand_container.style.gap = '0.5rem'; // Add space between icon and text
+        const brand_icon = document.createElement('img');
+        brand_icon.src = icon;
+        brand_icon.alt = name;
+        brand_icon.width = icon_width;
+        brand_icon.height = icon_height;
+        brand_icon.classList.add('d-inline-block', 'align-text-top');
+        brand_container.appendChild(brand_icon);
+        if (name) {
+            brand_icon.classList.add('me-1');
+            const brand_text = document.createElement('span');
+            brand_text.textContent = name;
+            brand_text.style.fontWeight = '500'; // Make text slightly bolder
+            brand_container.appendChild(brand_text);
+        }
+        this.element.appendChild(brand_container);
+    }
+}
+//# sourceMappingURL=brand.js.map

package/dist/components/brand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brand.js","sourceRoot":"","sources":["../../src/components/brand.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,OAAO,cAAe,SAAQ,SAAkC;IAEpE;;;;;;;;;;OAUG;IACH,YAAY,OAAe,OAAO,EAAE,OAAe,aAAa,EAAE,aAAqB,EAAE,EAAE,cAAsB,EAAE;QACjH,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,GAAG,CAAC;QAExB,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACtD,eAAe,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACvC,eAAe,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;QAC5C,eAAe,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC,CAAC,kCAAkC;QAExE,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,UAAU,CAAC,GAAG,GAAG,IAAI,CAAC;QACtB,UAAU,CAAC,GAAG,GAAG,IAAI,CAAC;QACtB,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC;QAC9B,UAAU,CAAC,MAAM,GAAG,WAAW,CAAC;QAChC,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,CAAC;QAC7D,eAAe,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAExC,IAAI,IAAI,EAAE,CAAC;YACT,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;YAEjC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAClD,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC;YAC9B,UAAU,CAAC,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,CAAC,4BAA4B;YAEjE,eAAe,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;IAC5C,CAAC;CACF"}

package/dist/components/checkbox.d.ts

@@ -0,0 +1,49 @@
+import { PayloadComponent } from "../component";
+/**
+ * A generic checkbox UI component that associates a payload with a checkbox input element.
+ *
+ * This component renders a checkbox with an optional label and allows tracking its checked state.
+ * It provides hooks (`selected` and `unselected`) for custom behavior when the checkbox is toggled.
+ *
+ * @typeParam P - The type of the payload associated with the checkbox.
+ *
+ * @example
+ * ```typescript
+ * class MyCheckbox extends CheckboxComponent<MyPayloadType> {
+ *   selected() {
+ *     // Custom logic when checked
+ *   }
+ *   unselected() {
+ *     // Custom logic when unchecked
+ *   }
+ * }
+ * ```
+ */
+export declare class CheckboxComponent<P> extends PayloadComponent<HTMLDivElement, P> {
+    private readonly checkbox;
+    /**
+     * Creates a new CheckboxComponent.
+     *
+     * @param payload The payload associated with the checkbox.
+     * @param id_factory A function to generate the ID for the checkbox based on the payload.
+     * @param selected Whether the checkbox is initially selected.
+     * @param label Optional label for the checkbox.
+     */
+    constructor(payload: P, id_factory: (payload: P) => string, selected?: boolean, label?: string);
+    /**
+     * Sets the checked state of the checkbox.
+     *
+     * @param checked The new checked state.
+     */
+    set_checked(checked: boolean): void;
+    /**
+     * Callback when the checkbox is selected.
+     * Override this method to define custom behavior when the checkbox is selected.
+     */
+    selected(): void;
+    /**
+     * Callback when the checkbox is unselected.
+     * Override this method to define custom behavior when the checkbox is unselected.
+     */
+    unselected(): void;
+}

package/dist/components/checkbox.js

@@ -0,0 +1,77 @@
+import { PayloadComponent } from "../component";
+/**
+ * A generic checkbox UI component that associates a payload with a checkbox input element.
+ *
+ * This component renders a checkbox with an optional label and allows tracking its checked state.
+ * It provides hooks (`selected` and `unselected`) for custom behavior when the checkbox is toggled.
+ *
+ * @typeParam P - The type of the payload associated with the checkbox.
+ *
+ * @example
+ * ```typescript
+ * class MyCheckbox extends CheckboxComponent<MyPayloadType> {
+ *   selected() {
+ *     // Custom logic when checked
+ *   }
+ *   unselected() {
+ *     // Custom logic when unchecked
+ *   }
+ * }
+ * ```
+ */
+export class CheckboxComponent extends PayloadComponent {
+    /**
+     * Creates a new CheckboxComponent.
+     *
+     * @param payload The payload associated with the checkbox.
+     * @param id_factory A function to generate the ID for the checkbox based on the payload.
+     * @param selected Whether the checkbox is initially selected.
+     * @param label Optional label for the checkbox.
+     */
+    constructor(payload, id_factory, selected = false, label) {
+        super(document.createElement('div'), payload);
+        this.node.classList.add('form-check');
+        this.checkbox = document.createElement('input');
+        this.checkbox.type = 'checkbox';
+        this.checkbox.classList.add('form-check-input');
+        this.checkbox.checked = selected;
+        this.checkbox.id = id_factory(payload);
+        this.node.appendChild(this.checkbox);
+        if (label) {
+            const labelElement = document.createElement('label');
+            labelElement.classList.add('form-check-label');
+            labelElement.textContent = label;
+            labelElement.setAttribute('for', this.checkbox.id);
+            this.node.appendChild(labelElement);
+        }
+        this.checkbox.addEventListener('click', () => {
+            if (this.checkbox.checked)
+                this.selected();
+            else
+                this.unselected();
+        });
+    }
+    /**
+     * Sets the checked state of the checkbox.
+     *
+     * @param checked The new checked state.
+     */
+    set_checked(checked) {
+        this.checkbox.checked = checked;
+        if (checked)
+            this.selected();
+        else
+            this.unselected();
+    }
+    /**
+     * Callback when the checkbox is selected.
+     * Override this method to define custom behavior when the checkbox is selected.
+     */
+    selected() { }
+    /**
+     * Callback when the checkbox is unselected.
+     * Override this method to define custom behavior when the checkbox is unselected.
+     */
+    unselected() { }
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/components/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,OAAO,iBAAqB,SAAQ,gBAAmC;IAI3E;;;;;;;OAOG;IACH,YAAY,OAAU,EAAE,UAAkC,EAAE,WAAoB,KAAK,EAAE,KAAc;QACnG,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAEtC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,IAAI,GAAG,UAAU,CAAC;QAChC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAErC,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACrD,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;YAC/C,YAAY,CAAC,WAAW,GAAG,KAAK,CAAC;YACjC,YAAY,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACnD,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QACtC,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YAC3C,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO;gBACvB,IAAI,CAAC,QAAQ,EAAE,CAAC;;gBAEhB,IAAI,CAAC,UAAU,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,OAAgB;QAC1B,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,OAAO,CAAC;QAChC,IAAI,OAAO;YACT,IAAI,CAAC,QAAQ,EAAE,CAAC;;YAEhB,IAAI,CAAC,UAAU,EAAE,CAAC;IACtB,CAAC;IAED;;;OAGG;IACH,QAAQ,KAAW,CAAC;IAEpB;;;OAGG;IACH,UAAU,KAAW,CAAC;CACvB"}

package/dist/components/sidebar.d.ts

@@ -0,0 +1,5 @@
+import { Component } from "../component";
+import { Selector, SelectorGroup } from "../utils/selector";
+export declare class Sidebar extends Component<HTMLDivElement> {
+    constructor(group: SelectorGroup, top: Map<HTMLAnchorElement, Selector>, bottom?: Map<HTMLAnchorElement, Selector>);
+}