From 27d85a0b28a82ad0eb4e44130d5702f81648a423 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Sun, 19 Apr 2026 17:42:20 +0100
Subject: [PATCH] fix(tailwind): move ResizeHandles CSS to app.css global sheet

@tailwindcss/vite:generate:serve threw 'Invalid declaration:
getCurrentWindow' on ResizeHandles.svelte?svelte&type=style&lang.css
even after comment sanitisation. The style block is plain CSS with no
Tailwind directives, but the per-component virtual CSS module route
was hitting a parse bug in the Tailwind v4 + Svelte 5 combination.

Workaround: move the CSS into app.css (class names are already
component-specific, no scoping loss) and drop the component-local
<style> block. This sidesteps the virtual-module route entirely.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app.css                             | 80 +++++++++++++++++++++++
 src/lib/components/ResizeHandles.svelte | 85 -------------------------
 2 files changed, 80 insertions(+), 85 deletions(-)

diff --git a/src/app.css b/src/app.css
index 5db522b..7011d4e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -411,3 +411,83 @@ textarea, input, [data-no-transition] {
   animation-iteration-count: 1 !important;
   transition-duration: 0.01ms !important;
 }
+
+/* === Window resize handles (see ResizeHandles.svelte) ===
+   Lives in the global sheet so @tailwindcss/vite does not try to
+   parse it as a per-component virtual CSS module, which triggers an
+   "Invalid declaration" error on plain CSS inputs in some Tailwind v4
+   + Svelte 5 combinations. */
+.kon-rh {
+  position: fixed;
+  z-index: 2147483646;
+  background: transparent;
+  pointer-events: auto;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.kon-rh-nw,
+.kon-rh-ne,
+.kon-rh-sw,
+.kon-rh-se {
+  z-index: 2147483647;
+}
+
+.kon-rh-n {
+  top: 0;
+  left: var(--kon-resize-corner);
+  right: var(--kon-resize-corner);
+  height: var(--kon-resize-edge);
+  cursor: n-resize;
+}
+.kon-rh-s {
+  bottom: 0;
+  left: var(--kon-resize-corner);
+  right: var(--kon-resize-corner);
+  height: var(--kon-resize-edge);
+  cursor: s-resize;
+}
+.kon-rh-w {
+  top: var(--kon-resize-corner);
+  bottom: var(--kon-resize-corner);
+  left: 0;
+  width: var(--kon-resize-edge);
+  cursor: w-resize;
+}
+.kon-rh-e {
+  top: var(--kon-resize-corner);
+  bottom: var(--kon-resize-corner);
+  right: 0;
+  width: var(--kon-resize-edge);
+  cursor: e-resize;
+}
+
+.kon-rh-nw {
+  top: 0;
+  left: 0;
+  width: var(--kon-resize-corner);
+  height: var(--kon-resize-corner);
+  cursor: nw-resize;
+}
+.kon-rh-ne {
+  top: 0;
+  right: 0;
+  width: var(--kon-resize-corner);
+  height: var(--kon-resize-corner);
+  cursor: ne-resize;
+}
+.kon-rh-sw {
+  bottom: 0;
+  left: 0;
+  width: var(--kon-resize-corner);
+  height: var(--kon-resize-corner);
+  cursor: sw-resize;
+}
+.kon-rh-se {
+  bottom: 0;
+  right: 0;
+  width: var(--kon-resize-corner);
+  height: var(--kon-resize-corner);
+  cursor: se-resize;
+}
diff --git a/src/lib/components/ResizeHandles.svelte b/src/lib/components/ResizeHandles.svelte
index e75c9bf..0ee6e58 100644
--- a/src/lib/components/ResizeHandles.svelte
+++ b/src/lib/components/ResizeHandles.svelte
@@ -44,98 +44,13 @@
 </script>
 
 {#if enabled}
-  <!-- Edge strips. Inset by corner size so edge and corner zones do not overlap. -->
   <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>
 
-  <!-- Corner hit zones, larger for easier diagonal targeting. -->
   <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}
-
-<style>
-  .kon-rh {
-    position: fixed;
-    z-index: 2147483646;
-    background: transparent;
-    pointer-events: auto;
-    /* Prevent the browser from consuming the pointerdown for its own
-       defaults (text selection, drag scroll) before we capture it. */
-    touch-action: none;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  /* Corners stack above edges so, at the 1-2 px of overlap on some
-     compositors, a corner click is never mistaken for an edge click. */
-  .kon-rh-nw,
-  .kon-rh-ne,
-  .kon-rh-sw,
-  .kon-rh-se {
-    z-index: 2147483647;
-  }
-
-  /* Edges */
-  .kon-rh-n {
-    top: 0;
-    left: var(--kon-resize-corner);
-    right: var(--kon-resize-corner);
-    height: var(--kon-resize-edge);
-    cursor: n-resize;
-  }
-  .kon-rh-s {
-    bottom: 0;
-    left: var(--kon-resize-corner);
-    right: var(--kon-resize-corner);
-    height: var(--kon-resize-edge);
-    cursor: s-resize;
-  }
-  .kon-rh-w {
-    top: var(--kon-resize-corner);
-    bottom: var(--kon-resize-corner);
-    left: 0;
-    width: var(--kon-resize-edge);
-    cursor: w-resize;
-  }
-  .kon-rh-e {
-    top: var(--kon-resize-corner);
-    bottom: var(--kon-resize-corner);
-    right: 0;
-    width: var(--kon-resize-edge);
-    cursor: e-resize;
-  }
-
-  /* Corners */
-  .kon-rh-nw {
-    top: 0;
-    left: 0;
-    width: var(--kon-resize-corner);
-    height: var(--kon-resize-corner);
-    cursor: nw-resize;
-  }
-  .kon-rh-ne {
-    top: 0;
-    right: 0;
-    width: var(--kon-resize-corner);
-    height: var(--kon-resize-corner);
-    cursor: ne-resize;
-  }
-  .kon-rh-sw {
-    bottom: 0;
-    left: 0;
-    width: var(--kon-resize-corner);
-    height: var(--kon-resize-corner);
-    cursor: sw-resize;
-  }
-  .kon-rh-se {
-    bottom: 0;
-    right: 0;
-    width: var(--kon-resize-corner);
-    height: var(--kon-resize-corner);
-    cursor: se-resize;
-  }
-</style>