<script>
  // Invisible resize-handle overlays around each Kon window edge.
  // Needed because Kon runs with decorations off, so the WM
  // provides no resize affordance on KDE/GNOME Wayland.
  //
  // Architecture: eight fixed-position divs are the click target for
  // resize. Because the divs themselves are the event target (not any
  // ancestor), the delegated handler for data-tauri-drag-region walks
  // the ancestors of the div, finds no drag-region, and does not start
  // a window move. This gives us a clean separation: resize wins on
  // the edges, drag wins on the titlebar.
  //
  // Hit zone sizes come from CSS custom properties so every Kon window
  // across the app stays identical. See the kon-resize-edge and
  // kon-resize-corner custom properties in app.css.
  //
  // Placement requirement: instances of this component MUST be mounted
  // as a sibling of the animated/transformed layout root (not a child),
  // or fixed positioning becomes relative to that transformed ancestor
  // instead of the viewport.

  import { getCurrentWindow } from "@tauri-apps/api/window";
  import { hasTauriRuntime } from "$lib/utils/runtime.js";

  const enabled = hasTauriRuntime();

  async function startResize(e, direction) {
    if (!enabled) return;
    if (e.button !== 0) return;
    e.preventDefault();
    e.stopPropagation();
    // Lock the pointer to this handle BEFORE asking Wayland to begin a
    // resize. Without capture, KWin xdg_toplevel.resize grab arrives
    // between mousedown synthesis and pointer movement, often losing the
    // diagonal component and collapsing a corner drag to a single axis.
    // pointerdown + setPointerCapture keeps the direction pinned.
    try {
      e.currentTarget?.setPointerCapture?.(e.pointerId);
    } catch {}
    try {
      await getCurrentWindow().startResizeDragging(direction);
    } catch {}
  }
</script>

{#if enabled}
  <div class="kon-rh kon-rh-n" onpointerdown={(e) => startResize(e,"North")}></div>
  <div class="kon-rh kon-rh-s" onpointerdown={(e) => startResize(e,"South")}></div>
  <div class="kon-rh kon-rh-w" onpointerdown={(e) => startResize(e,"West")}></div>
  <div class="kon-rh kon-rh-e" onpointerdown={(e) => startResize(e,"East")}></div>

  <div class="kon-rh kon-rh-nw" onpointerdown={(e) => startResize(e,"NorthWest")}></div>
  <div class="kon-rh kon-rh-ne" onpointerdown={(e) => startResize(e,"NorthEast")}></div>
  <div class="kon-rh kon-rh-sw" onpointerdown={(e) => startResize(e,"SouthWest")}></div>
  <div class="kon-rh kon-rh-se" onpointerdown={(e) => startResize(e,"SouthEast")}></div>
{/if}
