relmio 0.2.7 → 0.2.8

package/CHANGELOG.md

@@ -7,6 +7,16 @@ checks the registry separately after publication.
 
 ## Unreleased
 
+## [0.2.8] - 2026-08-02
+
+### Changed
+
+- Replace the local browser wizard's text appearance selector with compact,
+  accessible System/Light/Dark icons, while keeping the original horizontal
+  Signal Spine flow and touch-friendly behavior.
+- Serve the bundled Lucide SVG assets from the wizard and include them in the
+  npm package so offline and Node-free browser launches render consistently.
+
 ## [0.2.7] - 2026-08-02
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "relmio",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "Turn a supported ChatGPT/Codex OAuth sign-in into a private OpenAI-compatible endpoint, starting with self-hosted n8n.",
   "keywords": [
     "relmio",

package/src/ui/icons/monitor.svg

@@ -0,0 +1,6 @@
+<!-- Lucide monitor icon, ISC licensed: https://lucide.dev/license -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="20" height="14" x="2" y="3" rx="2" />
+  <line x1="8" x2="16" y1="21" y2="21" />
+  <line x1="12" x2="12" y1="17" y2="21" />
+</svg>

package/src/ui/icons/moon.svg

@@ -0,0 +1,4 @@
+<!-- Lucide moon icon, ISC licensed: https://lucide.dev/license -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" />
+</svg>

package/src/ui/icons/sun.svg

@@ -0,0 +1,12 @@
+<!-- Lucide sun icon, ISC licensed: https://lucide.dev/license -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="4" />
+  <path d="M12 2v2" />
+  <path d="M12 20v2" />
+  <path d="m4.93 4.93 1.41 1.41" />
+  <path d="m17.66 17.66 1.41 1.41" />
+  <path d="M2 12h2" />
+  <path d="M20 12h2" />
+  <path d="m6.34 17.66-1.41 1.41" />
+  <path d="m19.07 4.93-1.41 1.41" />
+</svg>

package/src/ui/index.html

@@ -35,17 +35,20 @@
       <div class="header-actions">
         <fieldset class="theme-picker">
           <legend class="visually-hidden">Color theme</legend>
-          <label>
+          <label title="Use system appearance">
             <input type="radio" name="color-theme" value="system" checked />
-            <span>System</span>
+            <span class="theme-icon theme-icon-system" aria-hidden="true"></span>
+            <span class="visually-hidden">System</span>
           </label>
-          <label>
+          <label title="Use light appearance">
             <input type="radio" name="color-theme" value="light" />
-            <span>Light</span>
+            <span class="theme-icon theme-icon-light" aria-hidden="true"></span>
+            <span class="visually-hidden">Light</span>
           </label>
-          <label>
+          <label title="Use dark appearance">
             <input type="radio" name="color-theme" value="dark" />
-            <span>Dark</span>
+            <span class="theme-icon theme-icon-dark" aria-hidden="true"></span>
+            <span class="visually-hidden">Dark</span>
           </label>
         </fieldset>
         <span class="local-badge">Runs only on this computer</span>

package/src/ui/styles.css

@@ -201,9 +201,9 @@ a:focus-visible {
   min-width: 0;
   margin: 0;
   padding: 0.1875rem;
-  border: 1px solid var(--border);
-  border-radius: 0.625rem;
-  background: var(--surface-muted);
+  border: 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--text) 88%, var(--border));
 }
 
 .theme-picker label {
@@ -217,29 +217,50 @@ a:focus-visible {
   pointer-events: none;
 }
 
-.theme-picker span {
-  min-height: 2rem;
+.theme-picker .theme-icon {
+  width: 1.75rem;
+  min-height: 1.75rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 0.625rem;
-  border-radius: 0.4375rem;
-  color: var(--text-muted);
-  font-size: 0.6875rem;
-  font-weight: 700;
+  padding: 0;
+  border-radius: 999px;
+  color: rgb(255 255 255 / 72%);
   transition:
     color 160ms var(--ease),
     background 160ms var(--ease),
     box-shadow 160ms var(--ease);
 }
 
-.theme-picker input:checked + span {
+.theme-picker .theme-icon::before {
+  width: 1rem;
+  height: 1rem;
+  content: "";
+  display: block;
+  background: currentColor;
+  mask: center / contain no-repeat var(--theme-icon);
+  -webkit-mask: center / contain no-repeat var(--theme-icon);
+}
+
+.theme-icon-system {
+  --theme-icon: url("/icons/monitor.svg");
+}
+
+.theme-icon-light {
+  --theme-icon: url("/icons/sun.svg");
+}
+
+.theme-icon-dark {
+  --theme-icon: url("/icons/moon.svg");
+}
+
+.theme-picker input:checked + .theme-icon {
   color: var(--text);
   background: var(--surface);
   box-shadow: var(--shadow-sm);
 }
 
-.theme-picker input:focus-visible + span {
+.theme-picker input:focus-visible + .theme-icon {
   outline: 3px solid #f2a94a;
   outline-offset: 2px;
 }
@@ -1050,10 +1071,6 @@ footer p {
     gap: 0.375rem;
   }
 
-  .theme-picker span {
-    padding-inline: 0.5rem;
-  }
-
   .shell {
     width: min(100% - 1rem, 54rem);
     padding-top: 2rem;

package/src/web/server.js

@@ -182,6 +182,9 @@ async function loadDefaultUiFiles() {
     readFile(new URL("../ui/theme.js", import.meta.url), "utf8"),
     readFile(new URL("../ui/time.js", import.meta.url), "utf8"),
     readFile(new URL("../ui/styles.css", import.meta.url), "utf8"),
+    readFile(new URL("../ui/icons/monitor.svg", import.meta.url), "utf8"),
+    readFile(new URL("../ui/icons/sun.svg", import.meta.url), "utf8"),
+    readFile(new URL("../ui/icons/moon.svg", import.meta.url), "utf8"),
   ]);
 
   return {
@@ -190,6 +193,9 @@ async function loadDefaultUiFiles() {
     "/theme.js": files[2],
     "/time.js": files[3],
     "/styles.css": files[4],
+    "/icons/monitor.svg": files[5],
+    "/icons/sun.svg": files[6],
+    "/icons/moon.svg": files[7],
   };
 }
 
@@ -421,9 +427,11 @@ function createRequestHandler(state) {
       const contentType =
         path.endsWith(".js")
           ? "text/javascript; charset=utf-8"
-          : path === "/styles.css"
-            ? "text/css; charset=utf-8"
-            : "text/html; charset=utf-8";
+          : path.endsWith(".svg")
+            ? "image/svg+xml; charset=utf-8"
+            : path === "/styles.css"
+              ? "text/css; charset=utf-8"
+              : "text/html; charset=utf-8";
       const contents = state.uiFiles[path];
       response.writeHead(200, {
         "Content-Type": contentType,