@ixfx/components 0.2.5 → 0.3.0

package/dist/tickled-styles-Bg3QbcrD.js.map

@@ -1 +1 @@
-{"version":3,"file":"tickled-styles-Bg3QbcrD.js","names":[],"sources":["../src/interaction/tickled-controller.ts","../src/interaction/tickled-styles.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Represents an item that can be tickled (highlighted via hover or keyboard navigation)\n */\nexport type TickledItem<T = unknown> = {\n  /**\n   * Unique identifier for the item (e.g., index, id, path)\n   */\n  readonly id: T;\n\n  /**\n   * Whether the item is currently enabled/interactive\n   */\n  readonly enabled?: boolean;\n};\n\n/**\n * Input mode determines which mechanism controls the tickled state\n */\nexport type InputMode = `keyboard` | `mouse`;\n\n/**\n * Configuration for TickledController\n */\nexport type TickledControllerConfig<T> = {\n  /**\n   * Function to retrieve all items that can be tickled\n   */\n  getItems: () => ReadonlyArray<TickledItem<T>>;\n\n  /**\n   * Optional callback when an item becomes tickled\n   * Use this for side effects like opening submenus\n   * @param id - The id of the newly tickled item, or undefined if nothing is tickled\n   */\n  onTickle?: (id: T | undefined) => void;\n\n  /**\n   * Optional callback fired after any state change (tickled id or input mode)\n   * Use this to sync DOM attributes for slotted content that can't use reactive rendering\n   *\n   * For components that render items directly, this is usually not needed as\n   * Lit's reactive rendering will handle updates automatically via requestUpdate()\n   *\n   * @example\n   * ```ts\n   * onStateChange: () => {\n   *   // Sync data-tickled attributes for slotted items\n   *   const items = this.getItems();\n   *   items.forEach((item, i) => {\n   *     if (this.tickled.isTickled(i)) {\n   *       item.setAttribute('data-tickled', '');\n   *     } else {\n   *       item.removeAttribute('data-tickled');\n   *     }\n   *   });\n   * }\n   * ```\n   */\n  onStateChange?: () => void;\n\n  /**\n   * Optional initial input mode (defaults to 'mouse')\n   */\n  initialInputMode?: InputMode;\n};\n\n/**\n * ReactiveController that manages \"tickled\" state for interactive lists.\n *\n * A \"tickled\" item is one that is under active attention via hover (mouse mode)\n * or keyboard focus (keyboard mode). Only one item can be tickled at a time.\n *\n * The input mode determines which mechanism controls tickled state:\n * - Mouse mode: hover controls tickled, keyboard navigation ignored\n * - Keyboard mode: keyboard navigation controls tickled, hover ignored\n *\n * Last interaction wins - any mouse hover switches to mouse mode, any keyboard\n * navigation switches to keyboard mode.\n *\n * ## Global Mouse Tracking\n *\n * This controller uses a singleton global `pointermove` listener to track actual\n * mouse movement. This prevents `pointerenter` events caused by content scrolling\n * from incorrectly switching to mouse mode when the user is actually using keyboard\n * navigation.\n *\n * @example\n * ```ts\n * class MyList extends LitElement {\n *   private tickled = new TickledController(this, {\n *     getItems: () => this.items.map((item, i) => ({ id: i, enabled: !item.disabled })),\n *     onTickle: (id) => {\n *       // Optional: perform side effect when item is tickled\n *       console.log('Tickled item:', id);\n *     }\n *   });\n *\n *   render() {\n *     return html`\n *       <ul @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}>\n *         ${this.items.map((item, i) => html`\n *           <li\n *             class=\"item ${this.tickled.isTickled(i) ? 'tickled' : ''}\"\n *             @pointerenter=${() => this.tickled.handlePointerEnter(i)}\n *           >${item.label}</li>\n *         `)}\n *       </ul>\n *     `;\n *   }\n *\n *   private handleKeyDown(e: KeyboardEvent) {\n *     if (e.key === 'ArrowDown') {\n *       this.tickled.handleKeyboardNavigation('next');\n *     } else if (e.key === 'ArrowUp') {\n *       this.tickled.handleKeyboardNavigation('previous');\n *     }\n *   }\n * }\n * ```\n */\nexport class TickledController<T = number> implements ReactiveController {\n  private host: ReactiveControllerHost;\n  private config: TickledControllerConfig<T>;\n  private _tickledId: T | undefined = undefined;\n  private _inputMode: InputMode;\n\n  private static _lastMouseClientX: number = Number.NaN;\n  private static _lastMouseClientY: number = Number.NaN;\n  private static _mouseMovedSinceKeyboard: boolean = true;\n  private static _globalListenerAttached: boolean = false;\n\n  constructor(host: ReactiveControllerHost, config: TickledControllerConfig<T>) {\n    this.host = host;\n    this.config = config;\n    this._inputMode = config.initialInputMode ?? `mouse`;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    if (!TickledController._globalListenerAttached) {\n      document.addEventListener(`pointermove`, (e: PointerEvent) => {\n        TickledController.handleGlobalPointerMove(e.clientX, e.clientY);\n      }, { passive: true });\n      TickledController._globalListenerAttached = true;\n    }\n  }\n\n  hostDisconnected(): void {\n    // No-op: global listener persists for the lifetime of the page\n  }\n\n  /**\n   * Get the current input mode\n   */\n  get inputMode(): InputMode {\n    return this._inputMode;\n  }\n\n  /**\n   * Get the currently tickled item id\n   */\n  get tickledId(): T | undefined {\n    return this._tickledId;\n  }\n\n  /**\n   * Check if a specific item is tickled\n   */\n  isTickled(id: T): boolean {\n    return this._tickledId === id;\n  }\n\n  /**\n   * Handle global pointer move event.\n   * Called automatically by the global listener.\n   * Tracks mouse movement to distinguish real hover from content scrolling.\n   */\n  private static handleGlobalPointerMove(clientX: number, clientY: number): void {\n    if (!Number.isNaN(TickledController._lastMouseClientX)) {\n      if (\n        clientX !== TickledController._lastMouseClientX\n        || clientY !== TickledController._lastMouseClientY\n      ) {\n        TickledController._mouseMovedSinceKeyboard = true;\n      }\n    }\n    TickledController._lastMouseClientX = clientX;\n    TickledController._lastMouseClientY = clientY;\n  }\n\n  /**\n   * Check if actual mouse movement has occurred since last keyboard interaction.\n   * Used to distinguish real hover/leave from content-scrolling-induced events.\n   */\n  static get hasMouseMovedSinceKeyboard(): boolean {\n    return TickledController._mouseMovedSinceKeyboard;\n  }\n\n  /**\n   * Handle pointer enter event on an item (mouse hover).\n   * Only processes if actual mouse movement is detected (not content scrolling).\n   * Switches to mouse mode and tickles the item.\n   */\n  handlePointerEnter(id: T): void {\n    if (!TickledController._mouseMovedSinceKeyboard) {\n      return;\n    }\n\n    const items = this.config.getItems();\n    const item = items.find(item => item.id === id);\n    if (item && item.enabled === false) {\n      return;\n    }\n\n    const modeChanged = this._inputMode !== `mouse`;\n    this._inputMode = `mouse`;\n\n    const previousId = this._tickledId;\n    this._tickledId = id;\n\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if ((previousId !== id || modeChanged) && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Handle pointer leave event on an item.\n   * Only clears tickled state if actual mouse movement is detected.\n   * @param _e The pointer event (not used, but kept for API compatibility)\n   */\n  handlePointerLeave(_e: PointerEvent): void {\n    if (TickledController._mouseMovedSinceKeyboard) {\n      this.clearTickled();\n    }\n  }\n\n  /**\n   * Handle keyboard navigation.\n   * Switches to keyboard mode and moves tickled state.\n   *\n   * @param direction - 'next', 'previous', 'first', 'last', or specific id\n   */\n  handleKeyboardNavigation(direction: `next` | `previous` | `first` | `last` | T): void {\n    const modeChanged = this._inputMode !== `keyboard`;\n    this._inputMode = `keyboard`;\n\n    const items = this.config.getItems();\n    const enabledItems = items.filter(item => item.enabled !== false);\n\n    if (enabledItems.length === 0) {\n      return;\n    }\n\n    let newId: T | undefined;\n\n    if (direction === `first`) {\n      newId = enabledItems[0].id;\n    } else if (direction === `last`) {\n      newId = enabledItems.at(-1)?.id;\n    } else if (direction === `next` || direction === `previous`) {\n      const currentIndex = enabledItems.findIndex(item => item.id === this._tickledId);\n\n      if (currentIndex === -1) {\n        newId = direction === `next` ? enabledItems[0].id : enabledItems.at(-1)?.id;\n      } else {\n        const delta = direction === `next` ? 1 : -1;\n        const newIndex = currentIndex + delta;\n\n        if (newIndex >= 0 && newIndex < enabledItems.length) {\n          newId = enabledItems[newIndex].id;\n        }\n        // If newIndex is out of bounds, keep current tickled item\n      }\n    } else {\n      const item = enabledItems.find(item => item.id === direction);\n      if (item) {\n        newId = item.id;\n      }\n    }\n\n    if (newId !== undefined) {\n      const previousId = this._tickledId;\n      this._tickledId = newId;\n      this.host.requestUpdate();\n\n      if (previousId !== newId && this.config.onTickle) {\n        this.config.onTickle(newId);\n      }\n\n      if ((previousId !== newId || modeChanged) && this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the tickled item (useful for programmatic control).\n   * Does NOT change input mode.\n   */\n  setTickled(id: T | undefined): void {\n    const previousId = this._tickledId;\n    this._tickledId = id;\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if (previousId !== id && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Clear the tickled state (e.g., on pointer leave).\n   * Note: For pointer leave events, prefer using handlePointerLeave() which\n   * checks for actual mouse movement.\n   */\n  clearTickled(): void {\n    if (this._tickledId !== undefined) {\n      this._tickledId = undefined;\n      this.host.requestUpdate();\n\n      if (this.config.onTickle) {\n        this.config.onTickle(undefined);\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the input mode.\n   * When switching to keyboard mode, resets the mouse movement tracking.\n   */\n  setInputMode(mode: InputMode): void {\n    if (this._inputMode !== mode) {\n      this._inputMode = mode;\n      this.host.requestUpdate();\n\n      if (mode === `keyboard`) {\n        TickledController._mouseMovedSinceKeyboard = false;\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n}\n","import { css } from 'lit';\n\n/**\n * Shared CSS styles for tickled interaction pattern.\n *\n * Tickled state is controlled via the `.tickled` CSS class (applied by TickledController).\n * The `tickledItemStyles` provides base styling that all tickled components should use.\n *\n * ## CSS Variable Contract\n *\n * **Style variables (default values defined in `tickledItemStyles`):**\n * - `--item-bg`: Default background (default: transparent)\n * - `--item-bg-tickled`: Background when tickled (default: rgba(0, 0, 0, 0.06))\n * - `--item-bg-selected`: Background when selected (default: rgba(25, 118, 210, 1))\n * - `--item-bg-selected-tickled`: Background when selected AND tickled (default: rgba(21, 101, 192, 1))\n * - `--item-border`: Border style (default: 1px solid transparent)\n * - `--item-border-tickled`: Border when tickled (default: 1px solid var(--accent))\n * - `--item-border-selected`: Border when selected (default: 1px solid rgba(25, 118, 210, 1))\n * - `--item-text-tickled`: Text color when tickled (default: inherit)\n * - `--item-text-selected`: Text color when selected (default: #fff)\n * - `--item-padding`: Item padding (default: 4px 8px)\n * - `--item-border-radius`: Border radius (default: 4px)\n * - `--item-icon-spacing`: Gap between icon and text (default: 4px)\n *\n * ## Usage\n *\n * Components should import both `tickledStyles` and `tickledItemStyles`:\n *\n * ```ts\n * import { tickledStyles, tickledItemStyles } from '../interaction/index.js';\n *\n * class MyComponent extends LitElement {\n *   static styles = [\n *     tickledStyles,\n *     tickledItemStyles,\n *     css`\n *       :host {\n *         --item-bg-tickled: #e0e0e0;\n *         --item-bg-selected: #1976d2;\n *       }\n *     `\n *   ];\n * }\n * ```\n */\n\nexport const tickledStyles = css`\n  /**\n   * No suppression needed - tickled styling is always active.\n   */\n`;\n\n/**\n * Shared item styling for tickled components.\n *\n * Provides base styles for interactive items with tickled and selected states.\n * Components should import this in addition to `tickledStyles` and can override\n * CSS variables to customize appearance.\n */\nexport const tickledItemStyles = css`\n  :host {\n    --item-bg: transparent;\n    --item-bg-tickled: rgba(0, 0, 0, 0.06);\n    --item-bg-selected: rgba(25, 118, 210, 1);\n    --item-bg-selected-tickled: rgba(21, 101, 192, 1);\n    --item-border: 1px solid transparent;\n    --item-border-tickled: 1px solid var(--accent);\n    --item-border-selected: 1px solid rgba(25, 118, 210, 1);\n    --item-text: inherit;\n    --item-text-tickled: inherit;\n    --item-text-selected: #fff;\n    --item-padding: 4px 8px;\n    --item-border-radius: 4px;\n    --item-icon-spacing: 4px;\n  }\n\n  .item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--item-icon-spacing);\n    padding: var(--item-padding);\n    background: var(--item-bg);\n    border: var(--item-border);\n    border-radius: var(--item-border-radius);\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    transition: background var(--transition, 0.1s ease-out), border-color var(--transition, 0.1s ease-out);\n  }\n\n  .item.tickled {\n    background: var(--item-bg-tickled);\n    border-color: var(--item-border-tickled);\n    color: var(--item-text-tickled);\n  }\n\n  .item.selected {\n    background: var(--item-bg-selected);\n    border-color: var(--item-border-selected);\n    color: var(--item-text-selected);\n  }\n\n  .item.selected.tickled {\n    background: var(--item-bg-selected-tickled);\n    outline: 2px dashed var(--surface-3);\n    outline-offset: -2px;\n  }\n`;"],"mappings":"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"}
+{"version":3,"file":"tickled-styles-Bg3QbcrD.js","names":[],"sources":["../src/interaction/tickled-controller.ts","../src/interaction/tickled-styles.ts"],"sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Represents an item that can be tickled (highlighted via hover or keyboard navigation)\n */\nexport type TickledItem<T = unknown> = {\n  /**\n   * Unique identifier for the item (e.g., index, id, path)\n   */\n  readonly id: T;\n\n  /**\n   * Whether the item is currently enabled/interactive\n   */\n  readonly enabled?: boolean;\n};\n\n/**\n * Input mode determines which mechanism controls the tickled state\n */\nexport type InputMode = `keyboard` | `mouse`;\n\n/**\n * Configuration for TickledController\n */\nexport type TickledControllerConfig<T> = {\n  /**\n   * Function to retrieve all items that can be tickled\n   */\n  getItems: () => ReadonlyArray<TickledItem<T>>;\n\n  /**\n   * Optional callback when an item becomes tickled\n   * Use this for side effects like opening submenus\n   * @param id - The id of the newly tickled item, or undefined if nothing is tickled\n   */\n  onTickle?: (id: T | undefined) => void;\n\n  /**\n   * Optional callback fired after any state change (tickled id or input mode)\n   * Use this to sync DOM attributes for slotted content that can't use reactive rendering\n   *\n   * For components that render items directly, this is usually not needed as\n   * Lit's reactive rendering will handle updates automatically via requestUpdate()\n   *\n   * @example\n   * ```ts\n   * onStateChange: () => {\n   *   // Sync data-tickled attributes for slotted items\n   *   const items = this.getItems();\n   *   items.forEach((item, i) => {\n   *     if (this.tickled.isTickled(i)) {\n   *       item.setAttribute('data-tickled', '');\n   *     } else {\n   *       item.removeAttribute('data-tickled');\n   *     }\n   *   });\n   * }\n   * ```\n   */\n  onStateChange?: () => void;\n\n  /**\n   * Optional initial input mode (defaults to 'mouse')\n   */\n  initialInputMode?: InputMode;\n};\n\n/**\n * ReactiveController that manages \"tickled\" state for interactive lists.\n *\n * A \"tickled\" item is one that is under active attention via hover (mouse mode)\n * or keyboard focus (keyboard mode). Only one item can be tickled at a time.\n *\n * The input mode determines which mechanism controls tickled state:\n * - Mouse mode: hover controls tickled, keyboard navigation ignored\n * - Keyboard mode: keyboard navigation controls tickled, hover ignored\n *\n * Last interaction wins - any mouse hover switches to mouse mode, any keyboard\n * navigation switches to keyboard mode.\n *\n * ## Global Mouse Tracking\n *\n * This controller uses a singleton global `pointermove` listener to track actual\n * mouse movement. This prevents `pointerenter` events caused by content scrolling\n * from incorrectly switching to mouse mode when the user is actually using keyboard\n * navigation.\n *\n * @example\n * ```ts\n * class MyList extends LitElement {\n *   private tickled = new TickledController(this, {\n *     getItems: () => this.items.map((item, i) => ({ id: i, enabled: !item.disabled })),\n *     onTickle: (id) => {\n *       // Optional: perform side effect when item is tickled\n *       console.log('Tickled item:', id);\n *     }\n *   });\n *\n *   render() {\n *     return html`\n *       <ul @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}>\n *         ${this.items.map((item, i) => html`\n *           <li\n *             class=\"item ${this.tickled.isTickled(i) ? 'tickled' : ''}\"\n *             @pointerenter=${() => this.tickled.handlePointerEnter(i)}\n *           >${item.label}</li>\n *         `)}\n *       </ul>\n *     `;\n *   }\n *\n *   private handleKeyDown(e: KeyboardEvent) {\n *     if (e.key === 'ArrowDown') {\n *       this.tickled.handleKeyboardNavigation('next');\n *     } else if (e.key === 'ArrowUp') {\n *       this.tickled.handleKeyboardNavigation('previous');\n *     }\n *   }\n * }\n * ```\n */\nexport class TickledController<T = number> implements ReactiveController {\n  private host: ReactiveControllerHost;\n  private config: TickledControllerConfig<T>;\n  private _tickledId: T | undefined = undefined;\n  private _inputMode: InputMode;\n\n  private static _lastMouseClientX: number = Number.NaN;\n  private static _lastMouseClientY: number = Number.NaN;\n  private static _mouseMovedSinceKeyboard: boolean = true;\n  private static _globalListenerAttached: boolean = false;\n\n  constructor(host: ReactiveControllerHost, config: TickledControllerConfig<T>) {\n    this.host = host;\n    this.config = config;\n    this._inputMode = config.initialInputMode ?? `mouse`;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    if (!TickledController._globalListenerAttached) {\n      document.addEventListener(`pointermove`, (e: PointerEvent) => {\n        TickledController.handleGlobalPointerMove(e.clientX, e.clientY);\n      }, { passive: true });\n      TickledController._globalListenerAttached = true;\n    }\n  }\n\n  hostDisconnected(): void {\n    // No-op: global listener persists for the lifetime of the page\n  }\n\n  /**\n   * Get the current input mode\n   */\n  get inputMode(): InputMode {\n    return this._inputMode;\n  }\n\n  /**\n   * Get the currently tickled item id\n   */\n  get tickledId(): T | undefined {\n    return this._tickledId;\n  }\n\n  /**\n   * Check if a specific item is tickled\n   */\n  isTickled(id: T): boolean {\n    return this._tickledId === id;\n  }\n\n  /**\n   * Handle global pointer move event.\n   * Called automatically by the global listener.\n   * Tracks mouse movement to distinguish real hover from content scrolling.\n   */\n  private static handleGlobalPointerMove(clientX: number, clientY: number): void {\n    if (!Number.isNaN(TickledController._lastMouseClientX)) {\n      if (\n        clientX !== TickledController._lastMouseClientX\n        || clientY !== TickledController._lastMouseClientY\n      ) {\n        TickledController._mouseMovedSinceKeyboard = true;\n      }\n    }\n    TickledController._lastMouseClientX = clientX;\n    TickledController._lastMouseClientY = clientY;\n  }\n\n  /**\n   * Check if actual mouse movement has occurred since last keyboard interaction.\n   * Used to distinguish real hover/leave from content-scrolling-induced events.\n   */\n  static get hasMouseMovedSinceKeyboard(): boolean {\n    return TickledController._mouseMovedSinceKeyboard;\n  }\n\n  /**\n   * Handle pointer enter event on an item (mouse hover).\n   * Only processes if actual mouse movement is detected (not content scrolling).\n   * Switches to mouse mode and tickles the item.\n   */\n  handlePointerEnter(id: T): void {\n    if (!TickledController._mouseMovedSinceKeyboard) {\n      return;\n    }\n\n    const items = this.config.getItems();\n    const item = items.find(item => item.id === id);\n    if (item && item.enabled === false) {\n      return;\n    }\n\n    const modeChanged = this._inputMode !== `mouse`;\n    this._inputMode = `mouse`;\n\n    const previousId = this._tickledId;\n    this._tickledId = id;\n\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if ((previousId !== id || modeChanged) && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Handle pointer leave event on an item.\n   * Only clears tickled state if actual mouse movement is detected.\n   * @param _e The pointer event (not used, but kept for API compatibility)\n   */\n  handlePointerLeave(_e: PointerEvent): void {\n    if (TickledController._mouseMovedSinceKeyboard) {\n      this.clearTickled();\n    }\n  }\n\n  /**\n   * Handle keyboard navigation.\n   * Switches to keyboard mode and moves tickled state.\n   *\n   * @param direction - 'next', 'previous', 'first', 'last', or specific id\n   */\n  handleKeyboardNavigation(direction: `next` | `previous` | `first` | `last` | T): void {\n    const modeChanged = this._inputMode !== `keyboard`;\n    this._inputMode = `keyboard`;\n\n    const items = this.config.getItems();\n    const enabledItems = items.filter(item => item.enabled !== false);\n\n    if (enabledItems.length === 0) {\n      return;\n    }\n\n    let newId: T | undefined;\n\n    if (direction === `first`) {\n      newId = enabledItems[0].id;\n    } else if (direction === `last`) {\n      newId = enabledItems.at(-1)?.id;\n    } else if (direction === `next` || direction === `previous`) {\n      const currentIndex = enabledItems.findIndex(item => item.id === this._tickledId);\n\n      if (currentIndex === -1) {\n        newId = direction === `next` ? enabledItems[0].id : enabledItems.at(-1)?.id;\n      } else {\n        const delta = direction === `next` ? 1 : -1;\n        const newIndex = currentIndex + delta;\n\n        if (newIndex >= 0 && newIndex < enabledItems.length) {\n          newId = enabledItems[newIndex].id;\n        }\n        // If newIndex is out of bounds, keep current tickled item\n      }\n    } else {\n      const item = enabledItems.find(item => item.id === direction);\n      if (item) {\n        newId = item.id;\n      }\n    }\n\n    if (newId !== undefined) {\n      const previousId = this._tickledId;\n      this._tickledId = newId;\n      this.host.requestUpdate();\n\n      if (previousId !== newId && this.config.onTickle) {\n        this.config.onTickle(newId);\n      }\n\n      if ((previousId !== newId || modeChanged) && this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the tickled item (useful for programmatic control).\n   * Does NOT change input mode.\n   */\n  setTickled(id: T | undefined): void {\n    const previousId = this._tickledId;\n    this._tickledId = id;\n    this.host.requestUpdate();\n\n    if (previousId !== id && this.config.onTickle) {\n      this.config.onTickle(id);\n    }\n\n    if (previousId !== id && this.config.onStateChange) {\n      this.config.onStateChange();\n    }\n  }\n\n  /**\n   * Clear the tickled state (e.g., on pointer leave).\n   * Note: For pointer leave events, prefer using handlePointerLeave() which\n   * checks for actual mouse movement.\n   */\n  clearTickled(): void {\n    if (this._tickledId !== undefined) {\n      this._tickledId = undefined;\n      this.host.requestUpdate();\n\n      if (this.config.onTickle) {\n        this.config.onTickle(undefined);\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n\n  /**\n   * Manually set the input mode.\n   * When switching to keyboard mode, resets the mouse movement tracking.\n   */\n  setInputMode(mode: InputMode): void {\n    if (this._inputMode !== mode) {\n      this._inputMode = mode;\n      this.host.requestUpdate();\n\n      if (mode === `keyboard`) {\n        TickledController._mouseMovedSinceKeyboard = false;\n      }\n\n      if (this.config.onStateChange) {\n        this.config.onStateChange();\n      }\n    }\n  }\n}\n","import { css } from 'lit';\n\n/**\n * Shared CSS styles for tickled interaction pattern.\n *\n * Tickled state is controlled via the `.tickled` CSS class (applied by TickledController).\n * The `tickledItemStyles` provides base styling that all tickled components should use.\n *\n * ## CSS Variable Contract\n *\n * **Style variables (default values defined in `tickledItemStyles`):**\n * - `--item-bg`: Default background (default: transparent)\n * - `--item-bg-tickled`: Background when tickled (default: rgba(0, 0, 0, 0.06))\n * - `--item-bg-selected`: Background when selected (default: rgba(25, 118, 210, 1))\n * - `--item-bg-selected-tickled`: Background when selected AND tickled (default: rgba(21, 101, 192, 1))\n * - `--item-border`: Border style (default: 1px solid transparent)\n * - `--item-border-tickled`: Border when tickled (default: 1px solid var(--accent))\n * - `--item-border-selected`: Border when selected (default: 1px solid rgba(25, 118, 210, 1))\n * - `--item-text-tickled`: Text color when tickled (default: inherit)\n * - `--item-text-selected`: Text color when selected (default: #fff)\n * - `--item-padding`: Item padding (default: 4px 8px)\n * - `--item-border-radius`: Border radius (default: 4px)\n * - `--item-icon-spacing`: Gap between icon and text (default: 4px)\n *\n * ## Usage\n *\n * Components should import both `tickledStyles` and `tickledItemStyles`:\n *\n * ```ts\n * import { tickledStyles, tickledItemStyles } from '../interaction/index.js';\n *\n * class MyComponent extends LitElement {\n *   static styles = [\n *     tickledStyles,\n *     tickledItemStyles,\n *     css`\n *       :host {\n *         --item-bg-tickled: #e0e0e0;\n *         --item-bg-selected: #1976d2;\n *       }\n *     `\n *   ];\n * }\n * ```\n */\n\nexport const tickledStyles = css`\n  /**\n   * No suppression needed - tickled styling is always active.\n   */\n`;\n\n/**\n * Shared item styling for tickled components.\n *\n * Provides base styles for interactive items with tickled and selected states.\n * Components should import this in addition to `tickledStyles` and can override\n * CSS variables to customize appearance.\n */\nexport const tickledItemStyles = css`\n  :host {\n    --item-bg: transparent;\n    --item-bg-tickled: rgba(0, 0, 0, 0.06);\n    --item-bg-selected: rgba(25, 118, 210, 1);\n    --item-bg-selected-tickled: rgba(21, 101, 192, 1);\n    --item-border: 1px solid transparent;\n    --item-border-tickled: 1px solid var(--accent);\n    --item-border-selected: 1px solid rgba(25, 118, 210, 1);\n    --item-text: inherit;\n    --item-text-tickled: inherit;\n    --item-text-selected: #fff;\n    --item-padding: 4px 8px;\n    --item-border-radius: 4px;\n    --item-icon-spacing: 4px;\n  }\n\n  .item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--item-icon-spacing);\n    padding: var(--item-padding);\n    background: var(--item-bg);\n    border: var(--item-border);\n    border-radius: var(--item-border-radius);\n    cursor: pointer;\n    user-select: none;\n    white-space: nowrap;\n    transition: background var(--transition, 0.1s ease-out), border-color var(--transition, 0.1s ease-out);\n  }\n\n  .item.tickled {\n    background: var(--item-bg-tickled);\n    border-color: var(--item-border-tickled);\n    color: var(--item-text-tickled);\n  }\n\n  .item.selected {\n    background: var(--item-bg-selected);\n    border-color: var(--item-border-selected);\n    color: var(--item-text-selected);\n  }\n\n  .item.selected.tickled {\n    background: var(--item-bg-selected-tickled);\n    outline: 2px dashed var(--surface-3);\n    outline-offset: -2px;\n  }\n`;"],"mappings":"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"}

package/dist/{timeline-DBWJsSjd.js → timeline-Cv75Th2U.js}

@@ -1,7 +1,71 @@
-import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import "@clinth/vcanvas";
+//#region src/timeline/timeline-controller.ts
+/**
+* External adapter class that can configure a timeline element
+* with musical time, custom label formatting, etc.
+*
+* The controller has no import of any timeline element type.
+* Users create a controller, pass it the component instance,
+* and the controller calls the component's public API.
+*/
+var TimelineController = class {
+	#host;
+	#config;
+	#bpm = 120;
+	#timeSignatureNumerator = 4;
+	#timeSignatureDenominator = 4;
+	constructor(timeline, config) {
+		this.#host = timeline;
+		this.#config = config;
+		timeline.min = config.logicalMin;
+		timeline.max = config.logicalMax;
+		if (config.labelFormatter) timeline.formatLabel = config.labelFormatter;
+		timeline.addEventListener(`track-select`, this.#onTrackSelect);
+	}
+	/** Update the tempo (BPM) for musical time calculations. */
+	setTempo(bpm) {
+		this.#bpm = bpm;
+		this.#updateFormatLabel();
+	}
+	/** Update the time signature for musical time calculations. */
+	setTimeSignature(numerator, denominator) {
+		this.#timeSignatureNumerator = numerator;
+		this.#timeSignatureDenominator = denominator;
+		this.#updateFormatLabel();
+	}
+	/** Set the visible view range on the timeline. */
+	setViewRange(range) {
+		this.#host.setViewRange(range);
+	}
+	/** Clean up any resources held by the controller. */
+	dispose() {
+		this.#host.removeEventListener(`track-select`, this.#onTrackSelect);
+	}
+	#onTrackSelect = (e) => {
+		const detail = e.detail;
+		const trackEventIds = this.#host.getTrackEvents(detail.trackKey).map((e) => e.id);
+		if (detail.shiftKey) {
+			const current = new Set(this.#host.selectedIds);
+			for (const id of trackEventIds) if (current.has(id)) current.delete(id);
+			else current.add(id);
+			this.#host.selectedIds = [...current];
+		} else this.#host.selectedIds = trackEventIds;
+	};
+	#updateFormatLabel() {
+		if (this.#config.labelFormatter) return;
+		this.#bpm;
+		const num = this.#timeSignatureNumerator;
+		this.#host.formatLabel = (v) => {
+			const beatsPerBar = num;
+			const totalBeats = v;
+			return `${Math.floor(totalBeats / beatsPerBar) + 1}.${Math.floor(totalBeats % beatsPerBar) + 1}`;
+		};
+	}
+};
+//#endregion
 //#region src/timeline/timeline-draw.ts
 const NICE_STEPS = [
 	1,
@@ -12,15 +76,15 @@ const NICE_STEPS = [
 /**
 * Dispatch to adaptive or fixed grid mode.
 */
-const resolveGrid = (viewRange, userScale, viewportWidth, mode = `adaptive`, fixedMinorStep, ppu) => {
+function resolveGrid(viewRange, userScale, viewportWidth, mode = `adaptive`, fixedMinorStep, ppu) {
 	if (mode === `fixed` && fixedMinorStep !== void 0 && ppu !== void 0) return resolveFixedGrid(fixedMinorStep, ppu);
 	return resolveAdaptiveGrid(viewRange, userScale, viewportWidth);
-};
+}
 /**
 * Compute a nice major/minor grid resolution for the current view.
 * Uses a 1-2-5-10 "nice number" algorithm.
 */
-const resolveAdaptiveGrid = (viewRange, userScale, viewportWidth) => {
+function resolveAdaptiveGrid(viewRange, userScale, viewportWidth) {
 	const span = viewRange.max - viewRange.min;
 	if (span <= 0 || viewportWidth <= 0) return {
 		majorStep: 100,
@@ -29,7 +93,7 @@ const resolveAdaptiveGrid = (viewRange, userScale, viewportWidth) => {
 	};
 	const targetPx = 80 * scaleMultiplier(userScale);
 	const rawStep = span / Math.max(2, Math.floor(viewportWidth / targetPx));
-	const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+	const magnitude = 10 ** Math.floor(Math.log10(rawStep));
 	let bestStep = magnitude;
 	for (const n of NICE_STEPS) {
 		const candidate = n * magnitude;
@@ -46,14 +110,14 @@ const resolveAdaptiveGrid = (viewRange, userScale, viewportWidth) => {
 		minorDivisions,
 		minorStep
 	};
-};
+}
 /**
 * Fixed grid: user specifies a base minor step in logical units.
 * If the minor step at current zoom would produce lines < 5px apart,
 * double the effective step until they're >= 5px.
 * Major = 4× effective minor.
 */
-const resolveFixedGrid = (baseMinorStep, ppu) => {
+function resolveFixedGrid(baseMinorStep, ppu) {
 	const MIN_PX_BETWEEN = 5;
 	let effectiveMinor = baseMinorStep;
 	while (effectiveMinor * ppu < MIN_PX_BETWEEN && effectiveMinor < 0xe8d4a51000) effectiveMinor *= 2;
@@ -63,8 +127,8 @@ const resolveFixedGrid = (baseMinorStep, ppu) => {
 		minorDivisions,
 		minorStep: effectiveMinor
 	};
-};
-const scaleMultiplier = (scale) => {
+}
+function scaleMultiplier(scale) {
 	switch (scale) {
 		case `x-wide`: return 2;
 		case `wide`: return 1.5;
@@ -73,8 +137,8 @@ const scaleMultiplier = (scale) => {
 		case `x-slim`: return .5;
 		default: return 1;
 	}
-};
-const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
+}
+function drawMajorMinorGrid(ctx, region, resolution, altMajorBg, vars, ppu) {
 	const { majorStep, minorStep } = resolution;
 	if (majorStep <= 0) return;
 	const regionEnd = region.x + region.width;
@@ -88,7 +152,7 @@ const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
 	}
 	if (minorStep > 0) {
 		ctx.strokeStyle = vars[`--timeline-grid-minor-color`] ?? `rgba(255,255,255,0.05)`;
-		ctx.lineWidth = parseFloat(vars[`--timeline-grid-minor-width`] ?? `0.5`);
+		ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-minor-width`] ?? `0.5`);
 		ctx.beginPath();
 		const firstMinor = Math.floor(region.x / minorStep) * minorStep;
 		for (let val = firstMinor; val < regionEnd; val += minorStep) {
@@ -100,7 +164,7 @@ const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
 		ctx.stroke();
 	}
 	ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
-	ctx.lineWidth = parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
+	ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
 	ctx.beginPath();
 	const firstMajor = Math.floor(region.x / majorStep) * majorStep;
 	for (let val = firstMajor; val < regionEnd; val += majorStep) {
@@ -109,13 +173,13 @@ const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
 		ctx.lineTo(px, region.y + region.height);
 	}
 	ctx.stroke();
-};
+}
 /**
 * Draw the axis header band. With 2D virtualization the axis is "sticky" —
 * it is always drawn at the current vertical scroll position (`scrollTop`)
 * so it appears fixed at the viewport top.
 */
-const drawAxis = (ctx, region, resolution, axisHeight, formatLabel, vars, ppu, scrollTop = 0) => {
+function drawAxis(ctx, region, resolution, axisHeight, formatLabel, vars, ppu, scrollTop = 0) {
 	const { majorStep } = resolution;
 	if (majorStep <= 0 || axisHeight <= 0) return;
 	const axisTop = scrollTop;
@@ -127,7 +191,7 @@ const drawAxis = (ctx, region, resolution, axisHeight, formatLabel, vars, ppu, s
 	const bgLeft = region.x * ppu;
 	ctx.fillRect(bgLeft, axisTop, region.width * ppu, bgHeight);
 	ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
-	ctx.lineWidth = parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
+	ctx.lineWidth = Number.parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
 	ctx.beginPath();
 	const firstMajor = Math.ceil(region.x / majorStep) * majorStep;
 	for (let val = firstMajor; val < regionEnd; val += majorStep) {
@@ -152,8 +216,8 @@ const drawAxis = (ctx, region, resolution, axisHeight, formatLabel, vars, ppu, s
 		ctx.fillText(formatLabel(val), px + labelPadding, axisTop + bgHeight / 2);
 	}
 	ctx.textAlign = `start`;
-};
-const drawTrackBackgrounds = (ctx, region, trackLayout, tracks, vars, ppu) => {
+}
+function drawTrackBackgrounds(ctx, region, trackLayout, tracks, vars, ppu) {
 	const bgDefault = vars[`--timeline-track-bg`] ?? `#1a1a1a`;
 	const bgAlt = vars[`--timeline-track-bg-alt`] ?? `#1e1e1e`;
 	for (let i = 0; i < trackLayout.length; i++) {
@@ -161,7 +225,7 @@ const drawTrackBackgrounds = (ctx, region, trackLayout, tracks, vars, ppu) => {
 		if (layout.y + layout.height < region.y) continue;
 		if (layout.y > region.y + region.height) break;
 		const track = tracks.find((t) => t.key === layout.trackKey);
-		ctx.fillStyle = track?.color ? track.color + `22` : i % 2 === 0 ? bgDefault : bgAlt;
+		ctx.fillStyle = track?.color ? `${track.color}22` : i % 2 === 0 ? bgDefault : bgAlt;
 		ctx.fillRect(region.x * ppu, layout.y, region.width * ppu, layout.height);
 		ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
 		ctx.lineWidth = .5;
@@ -170,13 +234,13 @@ const drawTrackBackgrounds = (ctx, region, trackLayout, tracks, vars, ppu) => {
 		ctx.lineTo((region.x + region.width) * ppu, layout.y + layout.height);
 		ctx.stroke();
 	}
-};
-const drawEventRects = (ctx, region, events, trackLayout, selectedIds, tickledId, drag, vars, ppu) => {
+}
+function drawEventRects(ctx, region, events, trackLayout, selectedIds, tickledId, drag, vars, ppu) {
 	const eventBg = vars[`--timeline-event-bg`] ?? `#3498db`;
 	const eventSelectedBg = vars[`--timeline-event-selected-bg`] ?? `#5dade2`;
 	const eventTickledBg = vars[`--timeline-event-tickled-bg`] ?? `#444`;
 	const eventLabelColor = vars[`--timeline-event-label-color`] ?? `#fff`;
-	const radius = parseFloat(vars[`--timeline-event-radius`] ?? `4`);
+	const radius = Number.parseFloat(vars[`--timeline-event-radius`] ?? `4`);
 	const regionEnd = region.x + region.width;
 	const padding = 3;
 	for (const evt of events) {
@@ -230,8 +294,8 @@ const drawEventRects = (ctx, region, events, trackLayout, selectedIds, tickledId
 			ctx.restore();
 		}
 	}
-};
-const drawMarquee = (ctx, drag, ppu) => {
+}
+function drawMarquee(ctx, drag, ppu) {
 	if (drag.kind !== `marquee`) return;
 	const x1 = Math.min(drag.startLogicalX, drag.currentLogicalX) * ppu;
 	const x2 = Math.max(drag.startLogicalX, drag.currentLogicalX) * ppu;
@@ -242,8 +306,8 @@ const drawMarquee = (ctx, drag, ppu) => {
 	ctx.strokeStyle = `rgba(100, 150, 255, 0.6)`;
 	ctx.lineWidth = 1;
 	ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
-};
-const drawRoundRect = (ctx, x, y, w, h, r) => {
+}
+function drawRoundRect(ctx, x, y, w, h, r) {
 	r = Math.max(0, r);
 	ctx.moveTo(x + r, y);
 	ctx.arcTo(x + w, y, x + w, y + h, r);
@@ -251,7 +315,7 @@ const drawRoundRect = (ctx, x, y, w, h, r) => {
 	ctx.arcTo(x, y + h, x, y, r);
 	ctx.arcTo(x, y, x + w, y, r);
 	ctx.closePath();
-};
+}
 const TIMELINE_CSS_VARS = [
 	`--timeline-bg`,
 	`--timeline-track-bg`,
@@ -268,12 +332,12 @@ const TIMELINE_CSS_VARS = [
 	`--timeline-event-radius`,
 	`--timeline-axis-label-color`
 ];
-const resolveCssVars = (host) => {
+function resolveCssVars(host) {
 	const computed = getComputedStyle(host);
 	const vars = {};
 	for (const v of TIMELINE_CSS_VARS) vars[v] = computed.getPropertyValue(v).trim();
 	return vars;
-};
+}
 //#endregion
 //#region src/timeline/timeline-interactions.ts
 /** Hit zone near the edge of an event (px in screen space) */
@@ -282,13 +346,17 @@ const EDGE_HIT_PX = 8;
 * Convert a vcanvas logical (pixel) coordinate to timeline logical units.
 * vcanvas pixel coordinates are in the 1:1 pixel space; divide by ppu then add min.
 */
-const canvasToTimeline = (canvasX, ppu, min) => canvasX / ppu + min;
+function canvasToTimeline(canvasX, ppu, min) {
+	return canvasX / ppu + min;
+}
 /**
 * Convert screen-space pixel distance to timeline logical units.
 * Used for edge hit threshold: how many logical units does EDGE_HIT_PX correspond to.
 */
-const pxToLogicalUnits = (ppu) => ppu > 0 ? 1 / ppu : 1;
-const hitTest = (logicalX, y, events, trackLayout, ppu) => {
+function pxToLogicalUnits(ppu) {
+	return ppu > 0 ? 1 / ppu : 1;
+}
+function hitTest(logicalX, y, events, trackLayout, ppu) {
 	const track = trackLayout.find((tl) => y >= tl.y && y < tl.y + tl.height);
 	if (!track) return {
 		kind: `empty`,
@@ -321,17 +389,19 @@ const hitTest = (logicalX, y, events, trackLayout, ppu) => {
 		y,
 		trackKey: track.trackKey
 	};
-};
-const trackAtY = (y, trackLayout) => {
+}
+function trackAtY(y, trackLayout) {
 	return trackLayout.find((tl) => y >= tl.y && y < tl.y + tl.height)?.trackKey;
-};
+}
 /** Sensitivity: how many pixels of vertical drag = 1 e-fold of zoom */
 const ZOOM_SENSITIVITY_PX = 100;
 /**
 * Subtract a deadzone from a value.
 * Returns 0 if |value| <= deadzone, otherwise value shifted toward zero by deadzone.
 */
-const applyDeadzone = (value, deadzone) => Math.abs(value) > deadzone ? value - Math.sign(value) * deadzone : 0;
+function applyDeadzone(value, deadzone) {
+	return Math.abs(value) > deadzone ? value - Math.sign(value) * deadzone : 0;
+}
 /**
 * Compute new ppu + viewMin from an axis-zoom drag.
 * Vertical delta (dy) controls zoom (up = zoom in, down = zoom out), anchored at `anchorUnit`.
@@ -339,7 +409,7 @@ const applyDeadzone = (value, deadzone) => Math.abs(value) > deadzone ? value -
 *
 * Returns { ppu, viewMin } — the caller uses host.setZoomPan() to apply.
 */
-const computeAxisZoom = (startViewMin, startPpu, anchorUnit, dx, dy) => {
+function computeAxisZoom(startViewMin, startPpu, anchorUnit, dx, dy) {
 	const newPpu = startPpu * Math.exp(-dy / ZOOM_SENSITIVITY_PX);
 	let newMin = anchorUnit - (anchorUnit - startViewMin) * startPpu / newPpu;
 	if (newPpu > 0) newMin += -dx / newPpu;
@@ -347,7 +417,7 @@ const computeAxisZoom = (startViewMin, startPpu, anchorUnit, dx, dy) => {
 		ppu: newPpu,
 		viewMin: newMin
 	};
-};
+}
 /**
 * Compute new vertical view range from a v-axis-zoom drag.
 * Horizontal delta (dx) controls zoom (right = zoom in, left = zoom out),
@@ -356,7 +426,7 @@ const computeAxisZoom = (startViewMin, startPpu, anchorUnit, dx, dy) => {
 *
 * Returns { vMin, vMax } — the caller uses host.setVerticalZoomPan() to apply.
 */
-const computeVerticalAxisZoom = (startVMin, startVMax, startVScale, anchorBaseY, dx, dy) => {
+function computeVerticalAxisZoom(startVMin, startVMax, startVScale, anchorBaseY, dx, dy) {
 	const startSpan = startVMax - startVMin;
 	const newSpan = startSpan * Math.exp(-dx / ZOOM_SENSITIVITY_PX);
 	let newMin = anchorBaseY - (startSpan > 0 ? (anchorBaseY - startVMin) / startSpan : .5) * newSpan;
@@ -365,12 +435,12 @@ const computeVerticalAxisZoom = (startVMin, startVMax, startVScale, anchorBaseY,
 		vMin: newMin,
 		vMax: newMin + newSpan
 	};
-};
+}
 /**
 * Attaches pointer and keyboard interaction handlers to the timeline.
 * Returns a cleanup function.
 */
-const attachTimelineInteractions = (host, vcanvasEl) => {
+function attachTimelineInteractions(host, vcanvasEl) {
 	const ac = new AbortController();
 	const signal = ac.signal;
 	vcanvasEl.addEventListener(`pointerdown`, (e) => {
@@ -431,7 +501,6 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 				currentLogicalX: lx,
 				currentY: ly
 			};
-			return;
 		}
 	}, { signal });
 	vcanvasEl.addEventListener(`pointermove`, (e) => {
@@ -504,7 +573,6 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 				end: newEnd
 			} : ev);
 			vcanvasEl.invalidateAll();
-			return;
 		}
 	}, { signal });
 	vcanvasEl.addEventListener(`pointerup`, (e) => {
@@ -577,8 +645,8 @@ const attachTimelineInteractions = (host, vcanvasEl) => {
 		}
 	}, { signal });
 	return () => ac.abort();
-};
-const handleHover = (host, vcanvasEl, e) => {
+}
+function handleHover(host, vcanvasEl, e) {
 	const ppu = host.pxPerUnit;
 	const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);
 	const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);
@@ -602,22 +670,22 @@ const handleHover = (host, vcanvasEl, e) => {
 		host._tickledId = newTickledId;
 		vcanvasEl.invalidateAll();
 	}
-};
-const toggleSelection = (host, eventId) => {
+}
+function toggleSelection(host, eventId) {
 	const next = new Set(host._selectedIds);
 	if (next.has(eventId)) next.delete(eventId);
 	else next.add(eventId);
 	host._selectedIds = next;
 	fireSelectionChange(host);
 	host.getVCanvas()?.invalidateAll();
-};
-const fireSelectionChange = (host) => {
+}
+function fireSelectionChange(host) {
 	host.dispatchEvent(new CustomEvent(`selection-change`, {
 		detail: { selectedIds: [...host._selectedIds] },
 		bubbles: true,
 		composed: true
 	}));
-};
+}
 //#endregion
 //#region src/timeline/timeline-styles.ts
 const timelineStyles = css`
@@ -941,7 +1009,7 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "resizable", void 0);
-TimelineTrackTabElement = __decorate([customElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+TimelineTrackTabElement = __decorate([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
 //#endregion
 //#region src/timeline/timeline-element.ts
 /** Reasonable maximum ppu to prevent infinite zoom-in */
@@ -1677,72 +1745,8 @@ __decorate([state()], IxfxTimelineElement.prototype, "_trackHeightOverrides", vo
 __decorate([state()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
 __decorate([state()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
 __decorate([state()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
-IxfxTimelineElement = __decorate([customElement(`ixfx-timeline`)], IxfxTimelineElement);
-//#endregion
-//#region src/timeline/timeline-controller.ts
-/**
-* External adapter class that can configure a timeline element
-* with musical time, custom label formatting, etc.
-* 
-* The controller has no import of any timeline element type.
-* Users create a controller, pass it the component instance,
-* and the controller calls the component's public API.
-*/
-var TimelineController = class {
-	#host;
-	#config;
-	#bpm = 120;
-	#timeSignatureNumerator = 4;
-	#timeSignatureDenominator = 4;
-	constructor(timeline, config) {
-		this.#host = timeline;
-		this.#config = config;
-		timeline.min = config.logicalMin;
-		timeline.max = config.logicalMax;
-		if (config.labelFormatter) timeline.formatLabel = config.labelFormatter;
-		timeline.addEventListener(`track-select`, this.#onTrackSelect);
-	}
-	/** Update the tempo (BPM) for musical time calculations. */
-	setTempo(bpm) {
-		this.#bpm = bpm;
-		this.#updateFormatLabel();
-	}
-	/** Update the time signature for musical time calculations. */
-	setTimeSignature(numerator, denominator) {
-		this.#timeSignatureNumerator = numerator;
-		this.#timeSignatureDenominator = denominator;
-		this.#updateFormatLabel();
-	}
-	/** Set the visible view range on the timeline. */
-	setViewRange(range) {
-		this.#host.setViewRange(range);
-	}
-	/** Clean up any resources held by the controller. */
-	dispose() {
-		this.#host.removeEventListener(`track-select`, this.#onTrackSelect);
-	}
-	#onTrackSelect = (e) => {
-		const detail = e.detail;
-		const trackEventIds = this.#host.getTrackEvents(detail.trackKey).map((e) => e.id);
-		if (detail.shiftKey) {
-			const current = new Set(this.#host.selectedIds);
-			for (const id of trackEventIds) if (current.has(id)) current.delete(id);
-			else current.add(id);
-			this.#host.selectedIds = [...current];
-		} else this.#host.selectedIds = trackEventIds;
-	};
-	#updateFormatLabel() {
-		if (this.#config.labelFormatter) return;
-		this.#bpm;
-		const num = this.#timeSignatureNumerator;
-		this.#host.formatLabel = (v) => {
-			const beatsPerBar = num;
-			const totalBeats = v;
-			return `${Math.floor(totalBeats / beatsPerBar) + 1}.${Math.floor(totalBeats % beatsPerBar) + 1}`;
-		};
-	}
-};
+IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
 //#endregion
-export { attachTimelineInteractions as a, timelineStyles as i, IxfxTimelineElement as n, resolveCssVars as o, TimelineTrackTabElement as r, resolveGrid as s, TimelineController as t };
+export { resolveCssVars as a, attachTimelineInteractions as i, TimelineTrackTabElement as n, resolveGrid as o, timelineStyles as r, TimelineController as s, IxfxTimelineElement as t };
 
-//# sourceMappingURL=timeline-DBWJsSjd.js.map
+//# sourceMappingURL=timeline-Cv75Th2U.js.map