leonvogt · leonvogt · Sep 11, 2025 · Sep 10, 2025
diff --git a/build.js b/build.js
@@ -60,7 +60,7 @@ const esbuildConfig = {
   metafile: true,
   alias: {
     $src: path.resolve(__dirname, "src"),
-    $shoelace: path.resolve(__dirname, "src/shoelace"),
+    $uikit: path.resolve(__dirname, "src/uikit"),
     $components: path.resolve(__dirname, "src/components"),
     $utils: path.resolve(__dirname, "src/utils"),
     $lib: path.resolve(__dirname, "src/lib"),
@@ -92,18 +92,6 @@ const esbuildConfig = {
   ],
 }
 
-const copyAssets = async () => {
-  // Copy default Shoelace icons
-  await fs.copy("node_modules/@shoelace-style/shoelace/dist/assets", "public/dist/assets")
-
-  // Copy Font Awesome icons
-  // Currently commented out, since we copy the necessary icons directly to public/icons folder.
-  // That way we can copy specific icons from different sources and don't need to import a whole library.
-  // await fs.copy("node_modules/@fortawesome/fontawesome-free/svgs/solid", "public/dist/assets/fontawesome/solid")
-  // await fs.copy("node_modules/@fortawesome/fontawesome-free/svgs/regular", "public/dist/assets/fontawesome/regular")
-  console.log("Copied assets")
-}
-
 async function generateManifest() {
   try {
     const template = await fs.readFile(templatePath, "utf8")
@@ -122,7 +110,6 @@ const buildAndWatch = async () => {
 
 async function buildProject() {
   await generateManifest()
-  await copyAssets()
 
   if (process.argv.includes("--watch")) {
     buildAndWatch()

diff --git a/jsconfig.json b/jsconfig.json
@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "paths": {
       "$src/*": ["src/*"],
-      "$shoelace/*": ["src/shoelace/*"],
+      "$uikit/*": ["src/uikit/*"],
       "$components/*": ["src/components/*"],
       "$utils/*": ["src/utils/*"],
       "$lib/*": ["src/lib/*"]

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,8 +6,8 @@
     "format": "npx prettier --write ."
   },
   "dependencies": {
+    "@awesome.me/webawesome": "^3.0.0-beta.4",
     "@number-flow/svelte": "^0.3.9",
-    "@shoelace-style/shoelace": "^2.20.1",
     "esbuild-svelte": "^0.9.3",
     "highlight.js": "^11.11.1",
     "svelte": "^5.33.18",

diff --git a/public/panel.html b/public/panel.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html class="wa-theme-default wa-palette-default wa-brand-blue" lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/src/browser_panel/panel/App.svelte b/src/browser_panel/panel/App.svelte
@@ -1,20 +1,5 @@
 <script>
-  import "@shoelace-style/shoelace/dist/themes/light.css"
-  import "@shoelace-style/shoelace/dist/shoelace.js"
-
-  // Set Shoelace base path to point to the correct location of the Shoelace icons
-  import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js"
-  setBasePath("/dist")
-
-  // Register our custom icons
-  import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/icon-library.js"
-  registerIconLibrary("custom", {
-    resolver: (name) => {
-      return `/icons/${name}.svg`
-    },
-    mutator: (svg) => svg.setAttribute("fill", "currentColor"),
-  })
-
+  import "$uikit/webawesome.svelte.js"
   import { getDevtoolInstance, setDevtoolInstance } from "$lib/devtool.js"
   import { handleResize } from "../theme.svelte.js"
   import { connection } from "../State.svelte.js"
@@ -55,16 +40,16 @@
 </script>
 
 {#if connection.isPermanentlyDisconnected}
-  <sl-alert variant="danger" class="m-5" open>
-    <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
+  <wa-callout variant="danger" class="m-5">
+    <wa-icon slot="icon" name="triangle-exclamation"></wa-icon>
     <strong>Connection Timeout</strong><br />
     Unable to connect to the current page. Try closing and reopening the inspection panel to resolve the issue.
     <div class="mt-4">
       If this issue persists, consider reporting it on GitHub:
       <br />
       <a href="https://github.com/leonvogt/hotwire-dev-tools/issues/new" target="_blank" rel="noopener noreferrer">https://github.com/leonvogt/hotwire-dev-tools/issues/new</a>
     </div>
-  </sl-alert>
+  </wa-callout>
 {:else if devToolOptionsLoaded}
   <main {@attach addEventListeners}>
     <div id="container">
@@ -96,7 +81,7 @@
   <div class="h-100vh d-flex justify-content-center align-items-center flex-column gap-5">
     <div class="show-in-200ms">
       <div class="mb-2">Setting up Hotwire DevTool...</div>
-      <sl-skeleton effect="sheen"></sl-skeleton>
+      <p><wa-skeleton effect="sheen"></wa-skeleton></p>
     </div>
     <div class="show-in-1000ms text-align-center">
       <div class="mb-2">Hmm... this is taking a bit longer than expected.</div>
@@ -109,7 +94,7 @@
         <div>If there isn't something showing up, you can also try to inspect the extension itself by:</div>
         <br />
         <div>
-          Opening the "Debug Add-ons" page in Firefox: <u>about:debugging#/runtime/this-firefox</u>
+          Open the "Debug Add-ons" page in Firefox: <u>about:debugging#/runtime/this-firefox</u>
         </div>
         <div>Then clicking on the "Inspect" button next to the Hotwire DevTool. There you should see the console output.</div>
       {/if}

diff --git a/src/browser_panel/panel/tabs/LogsTab.svelte b/src/browser_panel/panel/tabs/LogsTab.svelte
@@ -8,7 +8,7 @@
   import { horizontalPanes } from "../../theme.svelte.js"
   import { getDevtoolInstance } from "$lib/devtool.js"
 
-  import IconButton from "$shoelace/IconButton.svelte"
+  import IconButton from "$uikit/IconButton.svelte"
   import CopyButton from "$components/CopyButton.svelte"
   import InspectButton from "$components/InspectButton.svelte"
   import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
@@ -115,31 +115,29 @@
           <div class="d-flex justify-content-center align-items-center position-relative">
             <h2>Events</h2>
             <div class="position-absolute end-0">
-              <sl-dropdown stayOpenOnSelect={true} class="mb-2">
-                <sl-button slot="trigger" caret>
-                  <sl-icon name="funnel"></sl-icon>
-                </sl-button>
-                <sl-menu>
-                  {#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]}
-                    <sl-menu-item role="button" tabindex="0" onkeyup={() => handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}>
-                      <strong>{groupName}</strong>
-                    </sl-menu-item>
+              <wa-dropdown class="mb-2">
+                <wa-button slot="trigger" with-caret label="Filter Events">
+                  <wa-icon name="funnel"></wa-icon>
+                </wa-button>
+                {#each Object.entries(TURBO_EVENTS_GROUPED) as [groupName, events]}
+                  <wa-dropdown-item role="button" tabindex="0" onkeyup={() => handleFilterGroupToggle(groupName)} onclick={() => handleFilterGroupToggle(groupName)}>
+                    <strong>{groupName}</strong>
+                  </wa-dropdown-item>
 
-                    {#each events as event}
-                      <sl-menu-item
-                        class="turbo-event-menu-item"
-                        type="checkbox"
-                        role="button"
-                        tabindex="0"
-                        onkeyup={(e) => handleFilterToggle(e)}
-                        onclick={(e) => handleFilterToggle(e)}
-                        value={event}
-                        checked={turboEventsFilter.includes(event)}>{event}</sl-menu-item
-                      >
-                    {/each}
+                  {#each events as event}
+                    <wa-dropdown-item
+                      class="turbo-event-menu-item"
+                      type="checkbox"
+                      role="button"
+                      tabindex="0"
+                      onkeyup={(e) => handleFilterToggle(e)}
+                      onclick={(e) => handleFilterToggle(e)}
+                      value={event}
+                      checked={turboEventsFilter.includes(event)}>{event}</wa-dropdown-item
+                    >
                   {/each}
-                </sl-menu>
-              </sl-dropdown>
+                {/each}
+              </wa-dropdown>
               {#if turboEvents.length > 0}
                 <IconButton name="trash2" onclick={clearTurboEvents}></IconButton>
               {/if}

diff --git a/src/browser_panel/panel/tabs/StimulusTab.svelte b/src/browser_panel/panel/tabs/StimulusTab.svelte
@@ -5,7 +5,7 @@
   import CopyButton from "$components/CopyButton.svelte"
   import InspectButton from "$components/InspectButton.svelte"
   import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
-  import IconButton from "$shoelace/IconButton.svelte"
+  import IconButton from "$uikit/IconButton.svelte"
   import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte"
   import { getStimulusData } from "../../State.svelte.js"
   import { flattenNodes, handleKeyboardNavigation } from "$utils/utils.js"

diff --git a/src/browser_panel/panel/tabs/TurboTab.svelte b/src/browser_panel/panel/tabs/TurboTab.svelte
@@ -6,7 +6,7 @@
   import CopyButton from "$components/CopyButton.svelte"
   import InspectButton from "$components/InspectButton.svelte"
   import ScrollIntoViewButton from "$components/ScrollIntoViewButton.svelte"
-  import IconButton from "$shoelace/IconButton.svelte"
+  import IconButton from "$uikit/IconButton.svelte"
   import HTMLRenderer from "$src/browser_panel/HTMLRenderer.svelte"
   import { getTurboFrames, getTurboCables, getTurboStreams, clearTurboStreams } from "../../State.svelte.js"
   import { debounce, handleKeyboardNavigation } from "$utils/utils.js"
@@ -198,12 +198,11 @@
             <h2>Streams</h2>
             <div class="position-absolute end-0">
               {#if turboStreams.length > 0}
-                <IconButton name="trash2" onclick={clearTurboStreams}></IconButton>
+                <IconButton name="trash" onclick={clearTurboStreams}></IconButton>
               {/if}
               {#if turboCables.length > 0}
-                <sl-tooltip content={`${connectedTurboCablesCount()} / ${turboCables.length} Turbo Stream WebSockets are connected`}>
-                  <sl-icon name="circle-fill" class="turbo-cable-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></sl-icon>
-                </sl-tooltip>
+                <wa-tooltip for="turbo-cable-indication-icon">{`${connectedTurboCablesCount()} / ${turboCables.length} Turbo Stream WebSockets are connected`}</wa-tooltip>
+                <wa-icon name="circle" id="turbo-cable-indication-icon" class:connected={connectedTurboCablesCount() == turboCables.length}></wa-icon>
               {/if}
             </div>
           </div>
@@ -270,7 +269,7 @@
         </div>
         <div>
           {#if frame.attributes.busy !== undefined}
-            <sl-spinner></sl-spinner>
+            <wa-spinner></wa-spinner>
           {/if}
           <InspectButton class="btn-hoverable me-2" {selector}></InspectButton>
         </div>
@@ -291,9 +290,9 @@
         <div class="d-flex flex-column h-100">
           <div class="d-flex justify-content-center align-items-center position-relative">
             <h2>Frames</h2>
-            <sl-badge class="count-badge count-badge--small position-absolute end-0" variant="neutral" pill>
+            <wa-badge variant="neutral" style="font-size: var(--wa-font-size-xs);" class="position-absolute end-0" pill>
               <NumberFlow value={turboFrameCount()} animated={!isFirstFrameCountRender} />
-            </sl-badge>
+            </wa-badge>
           </div>
           <div class="scrollable-list" {@attach addTurboFrameListListeners}>
             {#if turboFrames.length > 0}
@@ -413,11 +412,11 @@
 </Splitpanes>
 
 <style>
-  .turbo-cable-icon {
-    color: var(--sl-color-danger-500);
+  #turbo-cable-indication-icon {
+    color: var(--wa-color-danger-fill-loud);
   }
-  .turbo-cable-icon.connected {
-    color: var(--sl-color-success-500);
+  #turbo-cable-indication-icon.connected {
+    color: var(--wa-color-success-fill-loud);
   }
 
   /* To prevent flickering when reloading async Turbo Frames */