feat: mount vue apps, not web components (#1639)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Standalone web bundle with auto-mount utilities and a self-contained
test page.
* New responsive modal components for consistent mobile/desktop dialogs.
  * Header actions to copy OS/API versions.

* **Improvements**
* Refreshed UI styles (muted borders), accessibility and animation
refinements.
  * Theming updates and Tailwind v4–aligned, component-scoped styles.
  * Runtime GraphQL endpoint override and CSRF header support.

* **Bug Fixes**
* Safer network fetching and improved manifest/asset loading with
duplicate protection.

* **Tests/Chores**
* Parallel plugin tests, new extractor test suite, and updated
build/test scripts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

@tailwind-shared/base-utilities.css

@@ -1,7 +1,7 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
-@layer utilities {
-  :host {
+/* Utility defaults for web components (when we were using shadow DOM) */
+:host {
     --tw-divide-y-reverse: 0;
     --tw-border-style: solid;
     --tw-font-weight: initial;
@@ -48,21 +48,20 @@
     --tw-drop-shadow: initial;
     --tw-duration: initial;
     --tw-ease: initial;
-  }
 }
 
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: hsl(var(--border));
-  }
+/* Global border color - this is what's causing the issue! */
+/* Commenting out since it affects all elements globally
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: hsl(var(--border));
+}
+*/
 
-
-
-  body {
+body {
     --color-alpha: #1c1b1b;
     --color-beta: #f2f2f2;
     --color-gamma: #999999;
@@ -74,8 +73,7 @@
     --ring-shadow: 0 0 var(--color-beta);
   }
 
-  button:not(:disabled),
-  [role='button']:not(:disabled) {
-    cursor: pointer;
-  }
+button:not(:disabled),
+[role='button']:not(:disabled) {
+  cursor: pointer;
 }

@tailwind-shared/css-variables.css

@@ -1,7 +1,11 @@
 /* Hybrid theme system: Native CSS + Theme Store fallback */
-@layer base {
-  /* Light mode defaults */
-  :root {
+
+/* Light mode defaults */
+:root {
+    /* Override Tailwind v4 global styles to use webgui variables */
+    --ui-bg: var(--background-color) !important;
+    --ui-text: var(--text-color) !important;
+    
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
     --muted: 0 0% 96.1%;
@@ -30,6 +34,10 @@
 
   /* Dark mode */
   .dark {
+    /* Override Tailwind v4 global styles to use webgui variables */
+    --ui-bg: var(--background-color) !important;
+    --ui-text: var(--text-color) !important;
+    
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --muted: 0 0% 14.9%;
@@ -62,69 +70,4 @@
     --background: 0 0% 3.9%;
     --foreground: 0 0% 98%;
     --border: 0 0% 14.9%;
-  }
-
-  /* For web components: inherit CSS variables from the host */
-  :host {
-    --background: inherit;
-    --foreground: inherit;
-    --muted: inherit;
-    --muted-foreground: inherit;
-    --popover: inherit;
-    --popover-foreground: inherit;
-    --card: inherit;
-    --card-foreground: inherit;
-    --border: inherit;
-    --input: inherit;
-    --primary: inherit;
-    --primary-foreground: inherit;
-    --secondary: inherit;
-    --secondary-foreground: inherit;
-    --accent: inherit;
-    --accent-foreground: inherit;
-    --destructive: inherit;
-    --destructive-foreground: inherit;
-    --ring: inherit;
-    --chart-1: inherit;
-    --chart-2: inherit;
-    --chart-3: inherit;
-    --chart-4: inherit;
-    --chart-5: inherit;
-  }
-
-  /* Class-based dark mode support for web components using :host-context */
-  :host-context(.dark) {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-
-  /* Alternative class-based dark mode support for specific Unraid themes */
-  :host-context(.dark[data-theme='black']),
-  :host-context(.dark[data-theme='gray']) {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-  }
-}
+  }

@tailwind-shared/index.css

@@ -2,4 +2,4 @@
 @import './css-variables.css';
 @import './unraid-theme.css';
 @import './base-utilities.css';
-@import './sonner.css';
+@import './sonner.css';