Window Splitter

---
/**
 * APG Window Splitter Pattern - Astro Implementation
 *
 * A movable separator between two panes that allows users to resize
 * the relative size of each pane.
 * Uses Web Components for interactive behavior.
 *
 * @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
 */

export interface Props {
  /** Primary pane ID (required for aria-controls) */
  primaryPaneId: string;
  /** Secondary pane ID (optional, added to aria-controls) */
  secondaryPaneId?: string;
  /** Initial position as % (0-100, default: 50) */
  defaultPosition?: number;
  /** Initial collapsed state (default: false) */
  defaultCollapsed?: boolean;
  /** Position when expanding from initial collapse */
  expandedPosition?: number;
  /** Minimum position as % (default: 10) */
  min?: number;
  /** Maximum position as % (default: 90) */
  max?: number;
  /** Keyboard step as % (default: 5) */
  step?: number;
  /** Shift+Arrow step as % (default: 10) */
  largeStep?: number;
  /** Splitter orientation (default: horizontal = left-right split) */
  orientation?: 'horizontal' | 'vertical';
  /** Text direction for RTL support */
  dir?: 'ltr' | 'rtl';
  /** Whether pane can be collapsed (default: true) */
  collapsible?: boolean;
  /** Disabled state (not focusable, not operable) */
  disabled?: boolean;
  /** Readonly state (focusable but not operable) */
  readonly?: boolean;
  /** Splitter id */
  id?: string;
  /** Additional CSS class */
  class?: string;
  /** Accessible label when no visible label */
  'aria-label'?: string;
  /** Reference to external label element */
  'aria-labelledby'?: string;
  /** Reference to description element */
  'aria-describedby'?: string;
  /** Test id for testing */
  'data-testid'?: string;
}

const {
  primaryPaneId,
  secondaryPaneId,
  defaultPosition = 50,
  defaultCollapsed = false,
  expandedPosition,
  min = 10,
  max = 90,
  step = 5,
  largeStep = 10,
  orientation = 'horizontal',
  dir,
  collapsible = true,
  disabled = false,
  readonly = false,
  id,
  class: className = '',
  'aria-label': ariaLabel,
  'aria-labelledby': ariaLabelledby,
  'aria-describedby': ariaDescribedby,
  'data-testid': dataTestid,
} = Astro.props;

// Utility function
const clamp = (value: number, minVal: number, maxVal: number): number => {
  return Math.min(maxVal, Math.max(minVal, value));
};

// Calculate initial position
const initialPosition = defaultCollapsed ? 0 : clamp(defaultPosition, min, max);

// Compute aria-controls
const ariaControls = secondaryPaneId ? `${primaryPaneId} ${secondaryPaneId}` : primaryPaneId;

const isVertical = orientation === 'vertical';
---

<apg-window-splitter
  data-min={min}
  data-max={max}
  data-step={step}
  data-large-step={largeStep}
  data-orientation={orientation}
  data-dir={dir}
  data-collapsible={collapsible}
  data-disabled={disabled}
  data-readonly={readonly}
  data-default-position={defaultPosition}
  data-expanded-position={expandedPosition}
  data-collapsed={defaultCollapsed}
>
  <div
    class={`apg-window-splitter ${isVertical ? 'apg-window-splitter--vertical' : ''} ${disabled ? 'apg-window-splitter--disabled' : ''} ${className}`.trim()}
    style={`--splitter-position: ${initialPosition}%`}
  >
    <div
      role="separator"
      id={id}
      tabindex={disabled ? -1 : 0}
      aria-valuenow={initialPosition}
      aria-valuemin={min}
      aria-valuemax={max}
      aria-controls={ariaControls}
      aria-orientation={isVertical ? 'vertical' : undefined}
      aria-disabled={disabled ? true : undefined}
      aria-label={ariaLabel}
      aria-labelledby={ariaLabelledby}
      aria-describedby={ariaDescribedby}
      data-testid={dataTestid}
      class="apg-window-splitter__separator"
    >
    </div>
    {
      !disabled && !readonly && (
        <div
          class="apg-window-splitter__popup"
          role="group"
          aria-label={`Adjust ${ariaLabel || ''}`}
        >
          <button
            type="button"
            class="apg-window-splitter__popup-button"
            tabindex="-1"
            aria-label={`Collapse ${ariaLabel || ''}`}
            data-adjust="collapse"
          >
            <svg
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              style={`transform: translate(${isVertical ? '0px, -1px' : '-1px, 0px'})`}
            >
              <path d={isVertical ? 'M2 9L6 5L10 9M2 5L6 1L10 5' : 'M5 2L1 6L5 10M9 2L5 6L9 10'} />
            </svg>
          </button>
          <button
            type="button"
            class="apg-window-splitter__popup-button"
            tabindex="-1"
            aria-label={`Shrink ${ariaLabel || ''}`}
            data-adjust="decrease"
          >
            <svg
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              style={`transform: translate(${isVertical ? '0px, -1px' : '-1px, 0px'})`}
            >
              <path d={isVertical ? 'M2 8L6 4L10 8' : 'M8 2L4 6L8 10'} />
            </svg>
          </button>
          <button
            type="button"
            class="apg-window-splitter__popup-button"
            tabindex="-1"
            aria-label={`Expand ${ariaLabel || ''}`}
            data-adjust="increase"
          >
            <svg
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              style={`transform: translate(${isVertical ? '0px, 1px' : '1px, 0px'})`}
            >
              <path d={isVertical ? 'M2 4L6 8L10 4' : 'M4 2L8 6L4 10'} />
            </svg>
          </button>
          <button
            type="button"
            class="apg-window-splitter__popup-button"
            tabindex="-1"
            aria-label={`Expand ${ariaLabel || ''} to maximum`}
            data-adjust="maximize"
          >
            <svg
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              stroke="currentColor"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              style={`transform: translate(${isVertical ? '0px, 1px' : '1px, 0px'})`}
            >
              <path
                d={isVertical ? 'M2 3L6 7L10 3M2 7L6 11L10 7' : 'M3 2L7 6L3 10M7 2L11 6L7 10'}
              />
            </svg>
          </button>
        </div>
      )
    }
  </div>
</apg-window-splitter>

<script>
  const HOVER_DELAY = 300;
  const DISMISS_DELAY = 300;
  const ACTIVE_SETTLE_DELAY = 500;
  const TAP_DISTANCE_THRESHOLD = 5;
  const POPUP_OFFSET = 8;

  class ApgWindowSplitter extends HTMLElement {
    private separator: HTMLElement | null = null;
    private container: HTMLElement | null = null;
    private popup: HTMLElement | null = null;
    private isDragging = false;
    private previousPosition: number | null = null;
    private collapsed = false;

    private popupState: 'hidden' | 'showing' | 'active' = 'hidden';
    private popupPos: { x: number; y: number } | null = null;
    private hoverTimer: ReturnType<typeof setTimeout> | null = null;
    private dismissTimer: ReturnType<typeof setTimeout> | null = null;
    private activeSettleTimer: ReturnType<typeof setTimeout> | null = null;
    private pointerStart: { x: number; y: number } | null = null;
    private isMouseOverPopup = false;
    private hoverPos: { x: number; y: number } | null = null;

    // Bound event handlers (stored to properly remove listeners)
    private boundHandleKeyDown = this.handleKeyDown.bind(this);
    private boundHandlePointerDown = this.handlePointerDown.bind(this);
    private boundHandlePointerMove = this.handlePointerMove.bind(this);
    private boundHandlePointerUp = this.handlePointerUp.bind(this);
    private boundHandleSeparatorMouseEnter = this.handleSeparatorMouseEnter.bind(this);
    private boundHandleSeparatorMouseLeave = this.handleSeparatorMouseLeave.bind(this);
    private boundHandleSeparatorMouseMove = this.handleSeparatorMouseMove.bind(this);
    private boundHandleSeparatorFocus = this.handleSeparatorFocus.bind(this);
    private boundHandleSeparatorBlur = this.handleSeparatorBlur.bind(this);
    private boundHandlePopupMouseEnter = this.handlePopupMouseEnter.bind(this);
    private boundHandlePopupMouseLeave = this.handlePopupMouseLeave.bind(this);
    private boundHandlePopupKeyDown = this.handlePopupKeyDown.bind(this);
    private boundHandlePopupButtonClick = this.handlePopupButtonClick.bind(this);
    private boundHandleOutsidePointerDown = this.handleOutsidePointerDown.bind(this);

    connectedCallback() {
      this.separator = this.querySelector('[role="separator"]');
      this.container = this.querySelector('.apg-window-splitter');
      this.popup = this.querySelector('.apg-window-splitter__popup');

      // Initialize state from data attributes
      this.collapsed = this.dataset.collapsed === 'true';
      if (!this.collapsed) {
        this.previousPosition = this.currentPosition;
      }

      if (this.separator) {
        this.separator.addEventListener('keydown', this.boundHandleKeyDown);
        this.separator.addEventListener('pointerdown', this.boundHandlePointerDown);
        this.separator.addEventListener('pointermove', this.boundHandlePointerMove);
        this.separator.addEventListener('pointerup', this.boundHandlePointerUp);
        this.separator.addEventListener('mouseenter', this.boundHandleSeparatorMouseEnter);
        this.separator.addEventListener('mouseleave', this.boundHandleSeparatorMouseLeave);
        this.separator.addEventListener('mousemove', this.boundHandleSeparatorMouseMove);
        this.separator.addEventListener('focus', this.boundHandleSeparatorFocus);
        this.separator.addEventListener('blur', this.boundHandleSeparatorBlur);
      }

      if (this.popup) {
        this.popup.addEventListener('mouseenter', this.boundHandlePopupMouseEnter);
        this.popup.addEventListener('mouseleave', this.boundHandlePopupMouseLeave);
        this.popup.addEventListener('keydown', this.boundHandlePopupKeyDown);
        this.popup.addEventListener('click', this.boundHandlePopupButtonClick);
      }

      // Reflect the initial collapsed/min/max state on the popup buttons.
      this.updatePopupButtonStates();
    }

    disconnectedCallback() {
      if (this.separator) {
        this.separator.removeEventListener('keydown', this.boundHandleKeyDown);
        this.separator.removeEventListener('pointerdown', this.boundHandlePointerDown);
        this.separator.removeEventListener('pointermove', this.boundHandlePointerMove);
        this.separator.removeEventListener('pointerup', this.boundHandlePointerUp);
        this.separator.removeEventListener('mouseenter', this.boundHandleSeparatorMouseEnter);
        this.separator.removeEventListener('mouseleave', this.boundHandleSeparatorMouseLeave);
        this.separator.removeEventListener('mousemove', this.boundHandleSeparatorMouseMove);
        this.separator.removeEventListener('focus', this.boundHandleSeparatorFocus);
        this.separator.removeEventListener('blur', this.boundHandleSeparatorBlur);
      }

      if (this.popup) {
        this.popup.removeEventListener('mouseenter', this.boundHandlePopupMouseEnter);
        this.popup.removeEventListener('mouseleave', this.boundHandlePopupMouseLeave);
        this.popup.removeEventListener('keydown', this.boundHandlePopupKeyDown);
        this.popup.removeEventListener('click', this.boundHandlePopupButtonClick);
      }

      document.removeEventListener('pointerdown', this.boundHandleOutsidePointerDown);
      this.clearAllTimers();
    }

    private get min(): number {
      return Number(this.dataset.min) || 10;
    }

    private get max(): number {
      return Number(this.dataset.max) || 90;
    }

    private get step(): number {
      return Number(this.dataset.step) || 5;
    }

    private get largeStep(): number {
      return Number(this.dataset.largeStep) || 10;
    }

    private get orientation(): string {
      return this.dataset.orientation || 'horizontal';
    }

    private get isHorizontal(): boolean {
      return this.orientation === 'horizontal';
    }

    private get isVertical(): boolean {
      return this.orientation === 'vertical';
    }

    private get textDir(): string | undefined {
      return this.dataset.dir;
    }

    private get isRTL(): boolean {
      if (this.textDir === 'rtl') return true;
      if (this.textDir === 'ltr') return false;
      return document.dir === 'rtl';
    }

    private get isCollapsible(): boolean {
      return this.dataset.collapsible !== 'false';
    }

    private get isDisabled(): boolean {
      return this.dataset.disabled === 'true';
    }

    private get isReadonly(): boolean {
      return this.dataset.readonly === 'true';
    }

    private get defaultPosition(): number {
      return Number(this.dataset.defaultPosition) || 50;
    }

    private get expandedPosition(): number | undefined {
      const val = this.dataset.expandedPosition;
      return val !== undefined ? Number(val) : undefined;
    }

    private get currentPosition(): number {
      return Number(this.separator?.getAttribute('aria-valuenow')) || 0;
    }

    private clamp(value: number): number {
      return Math.min(this.max, Math.max(this.min, value));
    }

    private clearAllTimers() {
      if (this.hoverTimer) clearTimeout(this.hoverTimer);
      if (this.dismissTimer) clearTimeout(this.dismissTimer);
      if (this.activeSettleTimer) clearTimeout(this.activeSettleTimer);
      this.hoverTimer = null;
      this.dismissTimer = null;
      this.activeSettleTimer = null;
    }

    private updatePopupButtonStates() {
      if (!this.popup) return;
      const pos = this.currentPosition;
      const collapseBtn = this.popup.querySelector<HTMLButtonElement>('[data-adjust="collapse"]');
      const decreaseBtn = this.popup.querySelector<HTMLButtonElement>('[data-adjust="decrease"]');
      const increaseBtn = this.popup.querySelector<HTMLButtonElement>('[data-adjust="increase"]');
      const maximizeBtn = this.popup.querySelector<HTMLButtonElement>('[data-adjust="maximize"]');
      // While collapsed the splitter sits below `min`, so the shrink direction is
      // disabled (already minimal) and the expand direction stays enabled.
      const shrinkDisabled = this.collapsed || pos <= this.min;
      const expandDisabled = !this.collapsed && pos >= this.max;
      if (collapseBtn) {
        collapseBtn.setAttribute('aria-disabled', String(shrinkDisabled));
      }
      if (decreaseBtn) {
        decreaseBtn.setAttribute('aria-disabled', String(shrinkDisabled));
      }
      if (increaseBtn) {
        increaseBtn.setAttribute('aria-disabled', String(expandDisabled));
      }
      if (maximizeBtn) {
        maximizeBtn.setAttribute('aria-disabled', String(expandDisabled));
      }
    }

    private updatePosition(newPosition: number) {
      if (!this.separator || this.isDisabled) return;

      const clampedPosition = this.clamp(newPosition);
      const currentPosition = this.currentPosition;

      if (clampedPosition === currentPosition) return;

      // Update ARIA
      this.separator.setAttribute('aria-valuenow', String(clampedPosition));

      // Update visual via CSS custom property
      if (this.container) {
        this.container.style.setProperty('--splitter-position', `${clampedPosition}%`);
      }

      // Calculate size in px
      let sizeInPx = 0;
      if (this.container) {
        sizeInPx =
          (clampedPosition / 100) *
          (this.isHorizontal ? this.container.offsetWidth : this.container.offsetHeight);
      }

      // Update popup button disabled states
      this.updatePopupButtonStates();

      // Dispatch event
      this.dispatchEvent(
        new CustomEvent('positionchange', {
          detail: { position: clampedPosition, sizeInPx },
          bubbles: true,
        })
      );
    }

    // Expand from the collapsed state, restoring to the previous/expanded position.
    // Shared by the collapse toggle, popup buttons and keyboard handlers.
    private expandFromCollapsed() {
      if (!this.separator) return;

      const restorePosition =
        this.previousPosition ?? this.expandedPosition ?? this.defaultPosition ?? 50;
      const clampedRestore = this.clamp(restorePosition);

      this.dispatchEvent(
        new CustomEvent('collapsedchange', {
          detail: { collapsed: false, previousPosition: this.currentPosition },
          bubbles: true,
        })
      );

      this.collapsed = false;
      this.separator.setAttribute('aria-valuenow', String(clampedRestore));

      if (this.container) {
        this.container.style.setProperty('--splitter-position', `${clampedRestore}%`);
      }

      let sizeInPx = 0;
      if (this.container) {
        sizeInPx =
          (clampedRestore / 100) *
          (this.isHorizontal ? this.container.offsetWidth : this.container.offsetHeight);
      }

      this.updatePopupButtonStates();

      this.dispatchEvent(
        new CustomEvent('positionchange', {
          detail: { position: clampedRestore, sizeInPx },
          bubbles: true,
        })
      );
    }

    private handleToggleCollapse() {
      if (!this.isCollapsible || this.isDisabled || this.isReadonly) return;
      if (!this.separator) return;

      if (this.collapsed) {
        this.expandFromCollapsed();
        return;
      }

      // Collapse
      this.previousPosition = this.currentPosition;

      this.dispatchEvent(
        new CustomEvent('collapsedchange', {
          detail: { collapsed: true, previousPosition: this.currentPosition },
          bubbles: true,
        })
      );

      this.collapsed = true;
      this.separator.setAttribute('aria-valuenow', '0');

      if (this.container) {
        this.container.style.setProperty('--splitter-position', '0%');
      }

      this.updatePopupButtonStates();

      this.dispatchEvent(
        new CustomEvent('positionchange', {
          detail: { position: 0, sizeInPx: 0 },
          bubbles: true,
        })
      );
    }

    private calcPopupPosition(clientX: number, clientY: number): { x: number; y: number } | null {
      if (!this.separator) return null;
      const popupWidth = this.popup?.offsetWidth || (this.isVertical ? 34 : 120);
      const popupHeight = this.popup?.offsetHeight || (this.isVertical ? 120 : 34);
      const vw = window.innerWidth;
      const vh = window.innerHeight;

      let x: number;
      let y: number;

      if (this.isHorizontal) {
        x = clientX - popupWidth / 2;
        const belowY = clientY + POPUP_OFFSET;
        const aboveY = clientY - POPUP_OFFSET - popupHeight;
        y = belowY + popupHeight <= vh ? belowY : aboveY;
      } else {
        y = clientY - popupHeight / 2;
        const rightX = clientX + POPUP_OFFSET;
        const leftX = clientX - POPUP_OFFSET - popupWidth;
        x = rightX + popupWidth <= vw ? rightX : leftX;
      }

      x = Math.min(vw - popupWidth, Math.max(0, x));
      y = Math.min(vh - popupHeight, Math.max(0, y));

      return { x, y };
    }

    private showPopup(clientX: number, clientY: number) {
      if (this.isDisabled || this.isReadonly || !this.popup) return;

      if (this.dismissTimer) {
        clearTimeout(this.dismissTimer);
        this.dismissTimer = null;
      }

      const pos = this.calcPopupPosition(clientX, clientY);
      if (pos) {
        this.popupPos = pos;
        this.popup.style.left = `${pos.x}px`;
        this.popup.style.top = `${pos.y}px`;
        this.popup.style.flexDirection = this.isVertical ? 'column' : 'row';
        this.popup.classList.add('apg-window-splitter__popup--visible');
        this.popupState = 'showing';
        this.updatePopupButtonStates();
      }
    }

    private hidePopup() {
      this.clearAllTimers();
      document.removeEventListener('pointerdown', this.boundHandleOutsidePointerDown);
      this.popupState = 'hidden';
      this.popupPos = null;
      if (this.popup) {
        this.popup.classList.remove('apg-window-splitter__popup--visible');
      }
    }

    private handleOutsidePointerDown(event: PointerEvent) {
      if (this.popup && !this.popup.contains(event.target as Node)) {
        this.hidePopup();
      }
    }

    private scheduleDismiss() {
      if (this.dismissTimer) clearTimeout(this.dismissTimer);
      this.dismissTimer = setTimeout(() => {
        const hasFocusInside =
          this.popup?.contains(document.activeElement) || this.separator === document.activeElement;
        if (!hasFocusInside) {
          this.hidePopup();
        }
      }, DISMISS_DELAY);
    }

    private handleKeyDown(event: KeyboardEvent) {
      if (this.isDisabled || this.isReadonly) return;

      // Tab to popup buttons when popup is visible
      if (event.key === 'Tab' && !event.shiftKey && this.popupState !== 'hidden') {
        const firstBtn = this.popup?.querySelector<HTMLButtonElement>('button');
        if (firstBtn) {
          event.preventDefault();
          firstBtn.focus();
          return;
        }
      }

      const hasShift = event.shiftKey;
      const currentStep = hasShift ? this.largeStep : this.step;

      let delta = 0;
      let handled = false;

      switch (event.key) {
        case 'ArrowRight':
          if (!this.isHorizontal) break;
          delta = this.isRTL ? -currentStep : currentStep;
          handled = true;
          break;

        case 'ArrowLeft':
          if (!this.isHorizontal) break;
          delta = this.isRTL ? currentStep : -currentStep;
          handled = true;
          break;

        case 'ArrowUp':
          if (!this.isVertical) break;
          delta = -currentStep;
          handled = true;
          break;

        case 'ArrowDown':
          if (!this.isVertical) break;
          delta = currentStep;
          handled = true;
          break;

        case 'Enter':
          this.handleToggleCollapse();
          handled = true;
          break;

        case 'Home':
          // Shrink direction is a no-op while collapsed (already at minimum).
          if (!this.collapsed) this.updatePosition(this.min);
          handled = true;
          break;

        case 'End':
          if (this.collapsed) {
            this.expandFromCollapsed();
          } else {
            this.updatePosition(this.max);
          }
          handled = true;
          break;
      }

      if (handled) {
        event.preventDefault();
        if (delta !== 0) {
          if (this.collapsed) {
            // Only the expand direction wakes a collapsed splitter; shrink is a no-op.
            if (delta > 0) this.expandFromCollapsed();
          } else {
            this.updatePosition(this.currentPosition + delta);
          }
        }
      }
    }

    private handlePointerDown(event: PointerEvent) {
      if (this.isDisabled || this.isReadonly || !this.separator) return;

      event.preventDefault();

      this.pointerStart = { x: event.clientX, y: event.clientY };
      this.isDragging = false;

      if (typeof this.separator.setPointerCapture === 'function') {
        this.separator.setPointerCapture(event.pointerId);
      }

      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer);
        this.hoverTimer = null;
      }

      this.separator.focus();
    }

    private handlePointerMove(event: PointerEvent) {
      const start = this.pointerStart;
      if (!start) return;

      if (!this.isDragging) {
        const dx = event.clientX - start.x;
        const dy = event.clientY - start.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        if (distance >= TAP_DISTANCE_THRESHOLD) {
          this.isDragging = true;
          if (this.popupState !== 'hidden') this.hidePopup();
        } else {
          return;
        }
      }

      if (!this.container) return;

      // Measure the containing layout (the consumer positions the panes there).
      // The visual update is driven solely by the positionchange event, keeping
      // the component agnostic of how the consumer renders its panes.
      const measureElement = this.container.parentElement || this.container;
      const rect = measureElement.getBoundingClientRect();

      let percent: number;
      if (this.isHorizontal) {
        const x = event.clientX - rect.left;
        percent = (x / rect.width) * 100;
      } else {
        const y = event.clientY - rect.top;
        percent = (y / rect.height) * 100;
      }

      this.updatePosition(percent);
    }

    private handlePointerUp(event: PointerEvent) {
      if (this.separator && typeof this.separator.releasePointerCapture === 'function') {
        try {
          this.separator.releasePointerCapture(event.pointerId);
        } catch {
          // Ignore
        }
      }

      const start = this.pointerStart;
      if (start && !this.isDragging) {
        this.showPopup(start.x, start.y);
      }

      this.isDragging = false;
      this.pointerStart = null;
    }

    private handleSeparatorMouseEnter(event: MouseEvent) {
      if (this.isDisabled || this.isReadonly || this.isDragging) return;
      this.hoverPos = { x: event.clientX, y: event.clientY };
      if (this.popupState === 'hidden') {
        if (this.hoverTimer) clearTimeout(this.hoverTimer);
        this.hoverTimer = setTimeout(() => {
          const pos = this.hoverPos;
          if (pos) this.showPopup(pos.x, pos.y);
        }, HOVER_DELAY);
      }
      if (this.dismissTimer) {
        clearTimeout(this.dismissTimer);
        this.dismissTimer = null;
      }
    }

    private handleSeparatorMouseLeave() {
      if (this.hoverTimer) {
        clearTimeout(this.hoverTimer);
        this.hoverTimer = null;
      }
      if (this.popupState !== 'hidden') this.scheduleDismiss();
    }

    private handleSeparatorMouseMove(event: MouseEvent) {
      this.hoverPos = { x: event.clientX, y: event.clientY };
    }

    private handleSeparatorFocus() {
      if (this.isDisabled || this.isReadonly) return;
      if (this.popupState === 'hidden') {
        if (this.separator) {
          const rect = this.separator.getBoundingClientRect();
          this.showPopup(rect.left + rect.width / 2, rect.top + rect.height / 2);
        }
      }
      if (this.dismissTimer) {
        clearTimeout(this.dismissTimer);
        this.dismissTimer = null;
      }
    }

    private handleSeparatorBlur() {
      if (this.popupState !== 'hidden') {
        setTimeout(() => {
          if (
            !this.popup?.contains(document.activeElement) &&
            this.separator !== document.activeElement
          ) {
            this.scheduleDismiss();
          }
        }, 0);
      }
    }

    private handlePopupMouseEnter() {
      this.isMouseOverPopup = true;
      if (this.dismissTimer) {
        clearTimeout(this.dismissTimer);
        this.dismissTimer = null;
      }
    }

    private handlePopupMouseLeave() {
      this.isMouseOverPopup = false;
      if (this.popupState !== 'hidden') this.scheduleDismiss();
    }

    private handlePopupKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        event.preventDefault();
        this.hidePopup();
        this.separator?.focus();
      }
      if (event.key === 'Tab' && event.shiftKey) {
        event.preventDefault();
        this.hidePopup();
        this.separator?.focus();
      }
    }

    // Mark the popup as actively adjusting, then settle back to the showing state.
    private markPopupActive() {
      if (this.popupState !== 'active') {
        this.popupState = 'active';
        document.addEventListener('pointerdown', this.boundHandleOutsidePointerDown);
      }

      if (this.activeSettleTimer) clearTimeout(this.activeSettleTimer);
      this.activeSettleTimer = setTimeout(() => {
        if (this.popupState === 'active') {
          if (!this.isMouseOverPopup) {
            const pos = this.hoverPos;
            if (pos && this.popup) {
              const newPopupPos = this.calcPopupPosition(pos.x, pos.y);
              if (newPopupPos) {
                this.popup.style.left = `${newPopupPos.x}px`;
                this.popup.style.top = `${newPopupPos.y}px`;
              }
            }
          }
          this.popupState = 'showing';
        }
      }, ACTIVE_SETTLE_DELAY);
    }

    private handlePopupButtonClick(event: Event) {
      const target = (event.target as HTMLElement).closest<HTMLButtonElement>('[data-adjust]');
      if (!target) return;
      if (this.isDisabled || this.isReadonly) return;
      if (target.getAttribute('aria-disabled') === 'true') return;

      const adjustType = target.dataset.adjust;

      if (this.collapsed) {
        // Shrink direction is a no-op while collapsed (already at minimum).
        if (adjustType !== 'increase' && adjustType !== 'maximize') return;
        this.expandFromCollapsed();
        if (adjustType === 'maximize') this.updatePosition(this.max);
        this.markPopupActive();
        return;
      }

      let targetPos: number;
      switch (adjustType) {
        case 'collapse':
          targetPos = this.min;
          break;
        case 'decrease':
          targetPos = this.currentPosition - this.step;
          break;
        case 'increase':
          targetPos = this.currentPosition + this.step;
          break;
        case 'maximize':
          targetPos = this.max;
          break;
        default:
          return;
      }

      this.updatePosition(targetPos);
      this.markPopupActive();
    }

    // Public method to update position programmatically
    setPosition(newPosition: number) {
      this.updatePosition(newPosition);
    }

    // Public method to toggle collapse
    toggleCollapse() {
      this.handleToggleCollapse();
    }
  }

  if (!customElements.get('apg-window-splitter')) {
    customElements.define('apg-window-splitter', ApgWindowSplitter);
  }
</script>

---
import WindowSplitter from './WindowSplitter.astro';
---

<div class="layout">
  <div id="primary-pane">
    Primary Content
  </div>
  <WindowSplitter
    primaryPaneId="primary-pane"
    secondaryPaneId="secondary-pane"
    position={50}
    min={20}
    max={80}
    step={5}
    aria-label="Resize panels"
  />
  <div id="secondary-pane">
    Secondary Content
  </div>
</div>