@ixfx/components 0.2.4 → 0.2.5

package/dist/tabs.js

@@ -0,0 +1,203 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/tabs/tab-list.ts
+let TabListElement = class TabListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.flip = false;
+		this.scrollable = false;
+		this.#items = [];
+		this.#onSlotChange = () => {
+			this.updateComplete.then(() => {
+				this.#items = (this.shadowRoot?.querySelector(`slot`))?.assignedElements({ flatten: true }) ?? [];
+				this.#syncIndicatorColors();
+			});
+		};
+		this.#onKeyUp = (event) => {
+			const key = event.key;
+			if (this.#isVertical) {
+				if (key === `ArrowUp`) this.#selectPrevious();
+				else if (key === `ArrowDown`) this.#selectNext();
+			} else if (key === `ArrowRight`) this.#selectNext();
+			else if (key === `ArrowLeft`) this.#selectPrevious();
+		};
+		this.#onSlotClick = (event) => {
+			this.focus();
+			const t = event.target.closest(`ixfx-tab-list-item`);
+			if (!t) return;
+			const previous = this.getSelectedElement();
+			this.selectElement(t);
+			const forId = t.getAttribute(`for`);
+			const previousId = previous?.id;
+			this.dispatchEvent(new CustomEvent(`change`, {
+				bubbles: true,
+				detail: {
+					previous: previousId,
+					selected: t.id,
+					for: forId ?? ``
+				}
+			}));
+		};
+	}
+	#items;
+	get #isVertical() {
+		return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;
+	}
+	get #containerClass() {
+		return this.scrollable ? `${this.orientation} scrollable` : this.orientation;
+	}
+	render() {
+		return html`
+    <div 
+      tabindex=0 
+      @keyup=${this.#onKeyUp} 
+      @click=${this.#onSlotClick} 
+      id="container" 
+      class=${this.#containerClass}
+    >
+      <slot @slotchange=${this.#onSlotChange}></slot>
+    </div>`;
+	}
+	#onSlotChange;
+	firstUpdated() {
+		this.updateComplete.then(() => {
+			if (this.#items.length > 0) this.#syncIndicatorColors();
+		});
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		this.classList.toggle("scrollable", this.scrollable);
+	}
+	#syncIndicatorColors() {
+		for (const item of this.#items) {
+			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
+			item.style.setProperty(`--indicator-color-top`, `transparent`);
+			item.style.setProperty(`--indicator-color-left`, `transparent`);
+			item.style.setProperty(`--indicator-color-right`, `transparent`);
+			if (item.hasAttribute(`selected`)) {
+				if (this.orientation === `horizontal` && !this.flip) item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
+				else if (this.orientation === `horizontal` && this.flip) item.style.setProperty(`--indicator-color-top`, `var(--accent)`);
+				else if (this.#isVertical && !this.flip) item.style.setProperty(`--indicator-color-right`, `var(--accent)`);
+				else if (this.#isVertical && this.flip) item.style.setProperty(`--indicator-color-left`, `var(--accent)`);
+			}
+		}
+	}
+	#onKeyUp;
+	getSelectedElement() {
+		for (const el of this.#items) if (this.#isSelected(el)) return el;
+	}
+	#isSelected(el) {
+		if (el.getAttribute(`selected`) === null) return false;
+		return el.hasAttribute(`selected`);
+	}
+	selectElement(el) {
+		const existing = this.getSelectedElement();
+		if (existing) {
+			existing.removeAttribute(`selected`);
+			existing.style.setProperty(`--indicator-color-bottom`, `transparent`);
+			existing.style.setProperty(`--indicator-color-top`, `transparent`);
+			existing.style.setProperty(`--indicator-color-left`, `transparent`);
+			existing.style.setProperty(`--indicator-color-right`, `transparent`);
+		}
+		el.setAttribute(`selected`, ``);
+		if (this.orientation === `horizontal` && !this.flip) el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);
+		else if (this.orientation === `horizontal` && this.flip) el.style.setProperty(`--indicator-color-top`, `var(--accent)`);
+		else if (this.#isVertical && !this.flip) el.style.setProperty(`--indicator-color-right`, `var(--accent)`);
+		else if (this.#isVertical && this.flip) el.style.setProperty(`--indicator-color-left`, `var(--accent)`);
+	}
+	#selectNext() {
+		let found = false;
+		for (const el of this.#items) if (this.#isSelected(el) && !found) found = true;
+		else if (found) {
+			this.selectElement(el);
+			break;
+		}
+	}
+	#selectPrevious() {
+		let prev;
+		for (const el of this.#items) if (this.#isSelected(el) && prev) this.selectElement(prev);
+		else prev = el;
+	}
+	#onSlotClick;
+	static {
+		this.styles = css`
+    :host {
+      display: inline-block;
+      --activated-colour: var(--accent);
+      --colour: var(--surface-4);
+      --scroll-max-height: 200px;
+      --allow-overflow: hidden;
+    }
+    :host(.scrollable) {
+      max-height: var(--scroll-max-height);
+    }
+    text {
+      user-select:none;
+    }
+    #container {
+      display:flex;
+    }
+    #container.horizontal {
+      flex-direction: row;
+      overflow: hidden;
+    }
+    #container.horizontal.scrollable {
+      overflow-x: auto;
+      --allow-overflow: visible;
+    }
+    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {
+      flex-shrink: 0;
+    }
+    #container.vertical-stack {
+      flex-direction: column;
+    }
+    #container.vertical-stack.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-stack.scrollable {
+      overflow-y: auto;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+    }
+    #container.vertical-side {
+      flex-direction: column;
+    }
+    #container.vertical-side.flip {
+      flex-direction: column-reverse;
+    }
+    #container.vertical-side.scrollable {
+      overflow-y: auto;
+      max-height: var(--scroll-max-height);
+      --allow-overflow: visible;
+    }
+
+    ::slotted(ixfx-tab-list-item) {
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    #container.vertical-side ::slotted(ixfx-tab-list-item) {
+      writing-mode: vertical-lr;
+      text-orientation: mixed;
+    }
+    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {
+      writing-mode: vertical-rl;
+      text-orientation: mixed;
+    }
+
+    ::slotted(.activated) {
+      --colour: var(--activated-colour);
+    }
+  `;
+	}
+};
+__decorate([property({ type: String })], TabListElement.prototype, "orientation", void 0);
+__decorate([property({ type: Boolean })], TabListElement.prototype, "flip", void 0);
+__decorate([property({ type: Boolean })], TabListElement.prototype, "scrollable", void 0);
+TabListElement = __decorate([customElement(`ixfx-tab-list`)], TabListElement);
+//#endregion
+export { TabListElement };
+
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":["#items","#syncIndicatorColors","#isVertical","#selectPrevious","#selectNext","#containerClass","#onKeyUp","#onSlotClick","#onSlotChange","#isSelected"],"sources":["../src/tabs/tab-list.ts"],"sourcesContent":["import type { TabListItemElement } from \"./tab-list-item.js\";\nimport type { PropertyValues } from \"lit\";\nimport { css, html, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\n/**\n * Events\n * 'change' - new tab selected { previous:string, selected:string, for:string }\n */\nexport type TabListChangeDetail = {\n  readonly previous: string | undefined;\n  readonly selected: string;\n  readonly for: string;\n};\n\nexport type TabListChangeEvent = CustomEvent<TabListChangeDetail>;\n\n@customElement(`ixfx-tab-list`)\nexport class TabListElement extends LitElement {\n  @property({ type: String })\n  orientation: `horizontal` | `vertical-stack` | `vertical-side` = `horizontal`;\n\n  @property({ type: Boolean })\n  flip = false;\n\n  @property({ type: Boolean })\n  scrollable = false;\n\n  #items: TabListItemElement[] = [];\n\n  get #isVertical(): boolean {\n    return this.orientation === `vertical-stack` || this.orientation === `vertical-side`;\n  }\n\n  get #containerClass(): string {\n    return this.scrollable ? `${this.orientation} scrollable` : this.orientation;\n  }\n\n  override render() {\n    return html`\n    <div \n      tabindex=0 \n      @keyup=${this.#onKeyUp} \n      @click=${this.#onSlotClick} \n      id=\"container\" \n      class=${this.#containerClass}\n    >\n      <slot @slotchange=${this.#onSlotChange}></slot>\n    </div>`;\n  }\n\n  #onSlotChange = () => {\n    this.updateComplete.then(() => {\n      this.#items = (this.shadowRoot?.querySelector(`slot`) as HTMLSlotElement)\n        ?.assignedElements({ flatten: true }) as TabListItemElement[] ?? [];\n      this.#syncIndicatorColors();\n    });\n  };\n\n  override firstUpdated() {\n    this.updateComplete.then(() => {\n      if (this.#items.length > 0) {\n        this.#syncIndicatorColors();\n      }\n    });\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n    this.classList.toggle('scrollable', this.scrollable);\n  }\n\n  #syncIndicatorColors() {\n    for (const item of this.#items) {\n      item.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      item.style.setProperty(`--indicator-color-top`, `transparent`);\n      item.style.setProperty(`--indicator-color-left`, `transparent`);\n      item.style.setProperty(`--indicator-color-right`, `transparent`);\n\n      if (item.hasAttribute(`selected`)) {\n        if (this.orientation === `horizontal` && !this.flip) {\n          item.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n        } else if (this.orientation === `horizontal` && this.flip) {\n          item.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n        } else if (this.#isVertical && !this.flip) {\n          item.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n        } else if (this.#isVertical && this.flip) {\n          item.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n        }\n      }\n    }\n  }\n\n  #onKeyUp = (event: KeyboardEvent) => {\n    const key = event.key;\n    if (this.#isVertical) {\n      if (key === `ArrowUp`) {\n        this.#selectPrevious();\n      } else if (key === `ArrowDown`) {\n        this.#selectNext();\n      }\n    } else {\n      if (key === `ArrowRight`) {\n        this.#selectNext();\n      } else if (key === `ArrowLeft`) {\n        this.#selectPrevious();\n      }\n    }\n  };\n\n  getSelectedElement() {\n    for (const el of this.#items) {\n      if (this.#isSelected(el))\n        return el;\n    }\n  }\n\n  #isSelected(el: HTMLElement) {\n    const v = el.getAttribute(`selected`);\n    if (v === null)\n      return false;\n    return (el.hasAttribute(`selected`));\n  }\n\n  selectElement(el: HTMLElement) {\n    const existing = this.getSelectedElement();\n    if (existing) {\n      existing.removeAttribute(`selected`);\n      existing.style.setProperty(`--indicator-color-bottom`, `transparent`);\n      existing.style.setProperty(`--indicator-color-top`, `transparent`);\n      existing.style.setProperty(`--indicator-color-left`, `transparent`);\n      existing.style.setProperty(`--indicator-color-right`, `transparent`);\n    }\n\n    el.setAttribute(`selected`, ``);\n\n    if (this.orientation === `horizontal` && !this.flip) {\n      el.style.setProperty(`--indicator-color-bottom`, `var(--accent)`);\n    } else if (this.orientation === `horizontal` && this.flip) {\n      el.style.setProperty(`--indicator-color-top`, `var(--accent)`);\n    } else if (this.#isVertical && !this.flip) {\n      el.style.setProperty(`--indicator-color-right`, `var(--accent)`);\n    } else if (this.#isVertical && this.flip) {\n      el.style.setProperty(`--indicator-color-left`, `var(--accent)`);\n    }\n  }\n\n  #selectNext() {\n    let found = false;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && !found) {\n        found = true;\n      } else if (found) {\n        this.selectElement(el);\n        break;\n      }\n    }\n  }\n\n  #selectPrevious() {\n    let prev: HTMLElement | undefined;\n    for (const el of this.#items) {\n      if (this.#isSelected(el) && prev) {\n        this.selectElement(prev);\n      } else {\n        prev = el;\n      }\n    }\n  }\n\n  #onSlotClick = (event: MouseEvent) => {\n    this.focus();\n    const t = (event.target as HTMLElement).closest(`ixfx-tab-list-item`);\n    if (!t)\n      return;\n    const previous = this.getSelectedElement();\n    this.selectElement(t);\n\n    const forId = t.getAttribute(`for`);\n    const previousId = previous?.id;\n    this.dispatchEvent(new CustomEvent<TabListChangeDetail>(`change`, {\n      bubbles: true,\n      detail: {\n        previous: previousId,\n        selected: t.id,\n        for: forId ?? ``,\n      },\n    }));\n  };\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      --activated-colour: var(--accent);\n      --colour: var(--surface-4);\n      --scroll-max-height: 200px;\n      --allow-overflow: hidden;\n    }\n    :host(.scrollable) {\n      max-height: var(--scroll-max-height);\n    }\n    text {\n      user-select:none;\n    }\n    #container {\n      display:flex;\n    }\n    #container.horizontal {\n      flex-direction: row;\n      overflow: hidden;\n    }\n    #container.horizontal.scrollable {\n      overflow-x: auto;\n      --allow-overflow: visible;\n    }\n    #container.horizontal.scrollable ::slotted(ixfx-tab-list-item) {\n      flex-shrink: 0;\n    }\n    #container.vertical-stack {\n      flex-direction: column;\n    }\n    #container.vertical-stack.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-stack.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n    #container.vertical-side {\n      flex-direction: column;\n    }\n    #container.vertical-side.flip {\n      flex-direction: column-reverse;\n    }\n    #container.vertical-side.scrollable {\n      overflow-y: auto;\n      max-height: var(--scroll-max-height);\n      --allow-overflow: visible;\n    }\n\n    ::slotted(ixfx-tab-list-item) {\n      flex: 1 1 auto;\n      min-width: 0;\n    }\n\n    #container.vertical-side ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-lr;\n      text-orientation: mixed;\n    }\n    #container.vertical-side.flip ::slotted(ixfx-tab-list-item) {\n      writing-mode: vertical-rl;\n      text-orientation: mixed;\n    }\n\n    ::slotted(.activated) {\n      --colour: var(--activated-colour);\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ixfx-tab-list\": TabListElement;\n  }\n}\n"],"mappings":"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"}

package/dist/tickled-controller-Cq1Va0rR.d.ts

@@ -0,0 +1,218 @@
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+//#region node_modules/.pnpm/@ixfx+collections@0.56.12/node_modules/@ixfx/collections/dist/index-rrpZOWbs.d.ts
+/**
+* Traversable Tree.
+*
+* Creatable from:
+* {@link Trees.FromObject.asDynamicTraversable}: Create based on dynamic reading of an object
+* {@link Trees.TraversableTree}: Create based on an {@link Trees.TreeNode}, a {@link Trees.TraversableTree} or an object (same as calling asDynamicTraversable).
+* Use {@link Trees.isTraversable} to check if an object is this type.
+*/
+type TraversableTree<TValue> = {
+  /**
+  * Direct children of node
+  */
+  children: () => IterableIterator<TraversableTree<TValue>>;
+  /**
+  * Direct parent of node
+  */
+  getParent: () => TraversableTree<TValue> | undefined;
+  /**
+  * Value of node
+  */
+  getValue: () => TValue;
+  /**
+  * Object reference that acts as the identity of the node
+  */
+  getIdentity: () => any;
+};
+//#endregion
+//#region src/interaction/tickled-controller.d.ts
+/**
+ * Represents an item that can be tickled (highlighted via hover or keyboard navigation)
+ */
+type TickledItem<T = unknown> = {
+  /**
+   * Unique identifier for the item (e.g., index, id, path)
+   */
+  readonly id: T;
+  /**
+   * Whether the item is currently enabled/interactive
+   */
+  readonly enabled?: boolean;
+};
+/**
+ * Input mode determines which mechanism controls the tickled state
+ */
+type InputMode = `keyboard` | `mouse`;
+/**
+ * Configuration for TickledController
+ */
+type TickledControllerConfig<T> = {
+  /**
+   * Function to retrieve all items that can be tickled
+   */
+  getItems: () => ReadonlyArray<TickledItem<T>>;
+  /**
+   * Optional callback when an item becomes tickled
+   * Use this for side effects like opening submenus
+   * @param id - The id of the newly tickled item, or undefined if nothing is tickled
+   */
+  onTickle?: (id: T | undefined) => void;
+  /**
+   * Optional callback fired after any state change (tickled id or input mode)
+   * Use this to sync DOM attributes for slotted content that can't use reactive rendering
+   *
+   * For components that render items directly, this is usually not needed as
+   * Lit's reactive rendering will handle updates automatically via requestUpdate()
+   *
+   * @example
+   * ```ts
+   * onStateChange: () => {
+   *   // Sync data-tickled attributes for slotted items
+   *   const items = this.getItems();
+   *   items.forEach((item, i) => {
+   *     if (this.tickled.isTickled(i)) {
+   *       item.setAttribute('data-tickled', '');
+   *     } else {
+   *       item.removeAttribute('data-tickled');
+   *     }
+   *   });
+   * }
+   * ```
+   */
+  onStateChange?: () => void;
+  /**
+   * Optional initial input mode (defaults to 'mouse')
+   */
+  initialInputMode?: InputMode;
+};
+/**
+ * ReactiveController that manages "tickled" state for interactive lists.
+ *
+ * A "tickled" item is one that is under active attention via hover (mouse mode)
+ * or keyboard focus (keyboard mode). Only one item can be tickled at a time.
+ *
+ * The input mode determines which mechanism controls tickled state:
+ * - Mouse mode: hover controls tickled, keyboard navigation ignored
+ * - Keyboard mode: keyboard navigation controls tickled, hover ignored
+ *
+ * Last interaction wins - any mouse hover switches to mouse mode, any keyboard
+ * navigation switches to keyboard mode.
+ *
+ * ## Global Mouse Tracking
+ *
+ * This controller uses a singleton global `pointermove` listener to track actual
+ * mouse movement. This prevents `pointerenter` events caused by content scrolling
+ * from incorrectly switching to mouse mode when the user is actually using keyboard
+ * navigation.
+ *
+ * @example
+ * ```ts
+ * class MyList extends LitElement {
+ *   private tickled = new TickledController(this, {
+ *     getItems: () => this.items.map((item, i) => ({ id: i, enabled: !item.disabled })),
+ *     onTickle: (id) => {
+ *       // Optional: perform side effect when item is tickled
+ *       console.log('Tickled item:', id);
+ *     }
+ *   });
+ *
+ *   render() {
+ *     return html`
+ *       <ul @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}>
+ *         ${this.items.map((item, i) => html`
+ *           <li
+ *             class="item ${this.tickled.isTickled(i) ? 'tickled' : ''}"
+ *             @pointerenter=${() => this.tickled.handlePointerEnter(i)}
+ *           >${item.label}</li>
+ *         `)}
+ *       </ul>
+ *     `;
+ *   }
+ *
+ *   private handleKeyDown(e: KeyboardEvent) {
+ *     if (e.key === 'ArrowDown') {
+ *       this.tickled.handleKeyboardNavigation('next');
+ *     } else if (e.key === 'ArrowUp') {
+ *       this.tickled.handleKeyboardNavigation('previous');
+ *     }
+ *   }
+ * }
+ * ```
+ */
+declare class TickledController<T = number> implements ReactiveController {
+  private host;
+  private config;
+  private _tickledId;
+  private _inputMode;
+  private static _lastMouseClientX;
+  private static _lastMouseClientY;
+  private static _mouseMovedSinceKeyboard;
+  private static _globalListenerAttached;
+  constructor(host: ReactiveControllerHost, config: TickledControllerConfig<T>);
+  hostConnected(): void;
+  hostDisconnected(): void;
+  /**
+   * Get the current input mode
+   */
+  get inputMode(): InputMode;
+  /**
+   * Get the currently tickled item id
+   */
+  get tickledId(): T | undefined;
+  /**
+   * Check if a specific item is tickled
+   */
+  isTickled(id: T): boolean;
+  /**
+   * Handle global pointer move event.
+   * Called automatically by the global listener.
+   * Tracks mouse movement to distinguish real hover from content scrolling.
+   */
+  private static handleGlobalPointerMove;
+  /**
+   * Check if actual mouse movement has occurred since last keyboard interaction.
+   * Used to distinguish real hover/leave from content-scrolling-induced events.
+   */
+  static get hasMouseMovedSinceKeyboard(): boolean;
+  /**
+   * Handle pointer enter event on an item (mouse hover).
+   * Only processes if actual mouse movement is detected (not content scrolling).
+   * Switches to mouse mode and tickles the item.
+   */
+  handlePointerEnter(id: T): void;
+  /**
+   * Handle pointer leave event on an item.
+   * Only clears tickled state if actual mouse movement is detected.
+   * @param _e The pointer event (not used, but kept for API compatibility)
+   */
+  handlePointerLeave(_e: PointerEvent): void;
+  /**
+   * Handle keyboard navigation.
+   * Switches to keyboard mode and moves tickled state.
+   *
+   * @param direction - 'next', 'previous', 'first', 'last', or specific id
+   */
+  handleKeyboardNavigation(direction: `next` | `previous` | `first` | `last` | T): void;
+  /**
+   * Manually set the tickled item (useful for programmatic control).
+   * Does NOT change input mode.
+   */
+  setTickled(id: T | undefined): void;
+  /**
+   * Clear the tickled state (e.g., on pointer leave).
+   * Note: For pointer leave events, prefer using handlePointerLeave() which
+   * checks for actual mouse movement.
+   */
+  clearTickled(): void;
+  /**
+   * Manually set the input mode.
+   * When switching to keyboard mode, resets the mouse movement tracking.
+   */
+  setInputMode(mode: InputMode): void;
+}
+//#endregion
+export { TraversableTree as n, TickledController as t };
+//# sourceMappingURL=tickled-controller-Cq1Va0rR.d.ts.map

package/dist/tickled-controller-Cq1Va0rR.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tickled-controller-Cq1Va0rR.d.ts","names":["Comparer","IsEqual","Result","LabelledValue","TValue","LabelledSingleValue","LabelledValues","label","value","values","TreeNode","ReadonlyArray","parent","childrenStore","SimplifiedNode","LabelledNode","TraversableTree","IterableIterator","children","getParent","getValue","getIdentity","TraverseObjectEntry","Readonly","name","sourceValue","leafValue","_kind","TraverseObjectEntryWithAncestors","ancestors","TraverseObjectEntryStatic","TraverseObjectPathOpts","separator","WrappedNode","T","wraps","remove","add","child","addValue","hasChild","queryValue","queryParentsValue","eq","findParentsValue","parentsValues","hasAnyChild","hasParent","hasAnyParent","DiffAnnotation","a","b","valueChanged","childChanged","added","removed","DiffNode","toString","compare$1","tree_mutable_d_exports","asDynamicTraversable$1","breadthFirst$2","children$2","childrenLength$1","childrenValues","compare","computeMaxDepth","createNode$1","depthFirst$3","findAnyChildByValue$2","findChildByValue$1","followValue$1","fromPlainObject","getRoot","hasAnyChild$1","hasAnyParent$1","hasChild$1","hasParent$1","nodeDepth","parents$1","queryByValue","remove$1","removeValuelessNodesFromChild","root$2","rootWrapped$1","setChildren","siblings$2","stripParentage","throwTreeTest","toStringDeep$4","treeTest","wrap$1","asDynamicTraversable","breadthFirst","childrenLength","createNode","depthFirst","findAnyChildByValue","findChildByValue","followValue","parents","root","rootWrapped","siblings","toStringDeep","wrap","node","n","Array","seen","ok","msg","prospectiveChild","prospectiveParent","Generator","Record","indent","nodeValue","depth","continuePredicate","pathed_d_exports","PathOpts","Pathed","addValueByPath","children$1","childrenLengthByPath","clearValuesByPath","findAnyChildByValue$1","hasValue","parentValues","removeValueByPath","siblings$1","siblingsValues","toStringDeep$3","valueByPath","valuesByPath","startsWithSeparator","duplicates","Partial","private","constructor","pathOpts","path","validate","prettyPrint","hasPath","getNode","getPath","includeNode","getValues","clearValues","searchStart","start","maxDepth","traverse_object_d_exports","ChildrenOptions","CreateOptions","create$1","createSimplified","createWrapped","depthFirst$2","getByPath","prettyPrintEntries","toStringDeep$2","traceByPath","create","entries","options","filter","Iterable","valuesAtLeaves","traversable_tree_d_exports","breadthFirst$1","couldAddChild","depthFirst$1","find$2","findAnyParentByValue","findByValue","findParentByValue","hasAnyChildValue","hasAnyParentValue","hasChildValue","hasParentValue","toStringDeep$1","find","tree","TV","possibleParent","possibleParentValue","possibleChild","possibleChildValue","possibleValue","predicate","order","nodes","binary_tree_d_exports","BinaryChildSide","WrappedBinaryNode","addLeft","addRight","balanceFactor","find$1","fromArray$1","getLeft","getRight","grandparent","hasLeft","hasRight","height","inOrder$1","isLeaf","isParentLeftChild","isParentRightChild","leftSubtreeHeightFn","parentChildSide","postOrder$1","preOrder$1","removeNode","rightSubtreeHeightFn","root$1","setLeft","setRight","sibling","toArray","uncle","fromArray","inOrder","postOrder","preOrder","left","right","leftSubtreeHeight","rightSubtreeHeight","has","array","binary_search_tree_d_exports","Bst","BstNode","insert","max","min","valuesInOrder","comparer","toArrayInOrder","isSingleValue","v","isMultiValue","index_d_exports","isTraversable","isTreeNode","toTraversable","BinarySearchTree","BinaryTree","FromObject","Mutable","Traverse","C","D","E","S","_","c","d","f","g","h","i","l","m","o","p","r","s","t","u","w","x","y"],"sources":["../node_modules/.pnpm/@ixfx+collections@0.56.12/node_modules/@ixfx/collections/dist/index-rrpZOWbs.d.ts","../src/interaction/tickled-controller.ts"],"x_google_ignoreList":[0],"mappings":";;;;;;;;;;;KAgFKgB,eAAAA;ECyQgB;;;EDrQnBE,QAAAA,QAAgBD,gBAAAA,CAAiBD,eAAAA,CAAgBZ,MAAAA;ECsCpB;;;EDlC7Be,SAAAA,QAAiBH,eAAAA,CAAgBZ,MAAAA;ECqCzB;;;EDjCRgB,QAAAA,QAAgBhB,MAAAA;ECsCD;;;EDlCfiB,WAAAA;AAAAA;;;;;AAzBuD;KClE7C,WAAA;ED2EQjB;;;EAAAA,SCvET,EAAA,EAAI,CAAA;ED+EoBA;;;EAAAA,SC1ExB,OAAA;AAAA;;;;KAMC,SAAA;;;;KAKA,uBAAA;EDmEVgB;;;EC/DA,QAAA,QAAgB,aAAA,CAAc,WAAA,CAAY,CAAA;EDmE/B;;;;AC3Fb;EA+BE,QAAA,IAAY,EAAA,EAAI,CAAA;EA/BK;;;;;;;;AAevB;;;;;AAKA;;;;;;;;;EAmCE,aAAA;EAnCkC;;;EAwClC,gBAAA,GAAmB,SAAA;AAAA;;;;;;;;;AAyDrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,iBAAA,wBAAyC,kBAAA;EAAA,QAC5C,IAAA;EAAA,QACA,MAAA;EAAA,QACA,UAAA;EAAA,QACA,UAAA;EAAA,eAEO,iBAAA;EAAA,eACA,iBAAA;EAAA,eACA,wBAAA;EAAA,eACA,uBAAA;cAEH,IAAA,EAAM,sBAAA,EAAwB,MAAA,EAAQ,uBAAA,CAAwB,CAAA;EAO1E,aAAA,CAAA;EASA,gBAAA,CAAA;EAoMmB;;;EAAA,IA7Lf,SAAA,CAAA,GAAa,SAAA;;;;MAOb,SAAA,CAAA,GAAa,CAAA;;;;EAOjB,SAAA,CAAU,EAAA,EAAI,CAAA;;;;;;iBASC,uBAAA;;;;;aAiBJ,0BAAA,CAAA;;;;;;EASX,kBAAA,CAAmB,EAAA,EAAI,CAAA;;;;;;EAiCvB,kBAAA,CAAmB,EAAA,EAAI,YAAA;;;;;;;EAYvB,wBAAA,CAAyB,SAAA,2CAAoD,CAAA;;;;;EAyD7E,UAAA,CAAW,EAAA,EAAI,CAAA;;;;;;EAmBf,YAAA,CAAA;;;;;EAmBA,YAAA,CAAa,IAAA,EAAM,SAAA;AAAA"}