hmr-serve 0.1.3 → 0.1.4

package/README.md

@@ -1,14 +1,17 @@
 # hmr-serve
 
-<!-- Add once CI is green:
-[![CI](https://github.com/<owner>/hmr-serve/actions/workflows/ci.yml/badge.svg)](https://github.com/<owner>/hmr-serve/actions/workflows/ci.yml)
--->
+[![CI](https://github.com/floodtide/hmr-serve/actions/workflows/ci.yml/badge.svg)](https://github.com/floodtide/hmr-serve/actions/workflows/ci.yml)
+
+<p align="center">
+  <img src="docs/screenshot.png" width="900" alt="hmr-serve in the browser: a VSCode-style file tree on the left and a live, rendered Markdown pane on the right" />
+</p>
+
+HMR-serve is inspired by `npm run dev` and by [`serve`](https://www.npmjs.com/package/serve). It turns any folder into a hot-loading web app, because sometimes it's nice to preview HTML, Markdown, images and other files in the browser.
 
 Point `hmr-serve` at any folder and review it live in the browser: a VSCode-style
-file tree on the left, a content pane on the right, and **instant updates as files
-change on disk** — powered by Vite's real dev server and
-[HMR](https://vitejs.dev/guide/features.html#hot-module-replacement) client, not a
-hand-rolled watcher/websocket.
+file tree on the left, a content pane on the right and **instant updates as files
+change on disk**, powered by Vite's real dev server and
+[HMR](https://vitejs.dev/guide/features.html#hot-module-replacement) client. 🔥
 
 **HMR** (Hot Module Replacement) is the mechanism that pushes file changes into the
 browser over a WebSocket so the page updates without a full refresh. This project
@@ -24,8 +27,7 @@ npx hmr-serve ./some-folder
 # → opens http://localhost:5183 with a live tree + content pane
 ```
 
-Or run it like **[serve](https://www.npmjs.com/package/serve)** without the nav — serves directory
-listing or `index.html` if present, plus rendered Markdown, CSV/TSV, all with HMR:
+Or run it like **[serve](https://www.npmjs.com/package/serve)** without the nav, which serves a directory listing or `index.html` if present, plus rendered Markdown, CSV/TSV, all with HMR:
 
 ```bash
 npx hmr-serve ./some-folder --no-nav
@@ -51,11 +53,11 @@ hmr [dir]              Folder to serve (default: current directory)
 **Default (nav) mode** shows a VS Code-style file tree and content pane. Supported
 types: **Markdown** (rendered), **HTML** (sandboxed iframe), **code** (`.css`,
 `.js`, `.ts`, `.json`, … syntax-highlighted), **text**, **CSV/TSV** (tables),
-**images**, and **video**. A gear menu toggles which categories show in the tree,
+**images** and **video**. A gear menu toggles which categories show in the tree,
 plus an **Other files** option. Choices are remembered per folder (localStorage).
 
 **`--no-nav`** skips the tree UI: if the folder has `index.html` (or `index.htm`),
-that is the root page; otherwise you get a directory listing. Markdown, CSV, and
+that is the root page; otherwise you get a directory listing. Markdown, CSV and
 TSV are still rendered to HTML, and edits hot-reload via Vite.
 
 ## Architecture
@@ -83,7 +85,7 @@ so **relative** links and assets inside a framed doc (`href="contact.html"`,
 `<img src="logo.png">`) resolve against the real folder layout. The selected file
 is reflected in a clean, bookmarkable URL under the served folder's name — e.g.
 serving `./aurora-notes` gives `/aurora-notes/docs/intro.md`. These are real
-History-API paths (no `#`): shareable, reload-safe, and back/forward works.
+History-API paths (no `#`): shareable, reload-safe and back/forward works.
 Unknown paths 404 rather than rendering the app, so a stray absolute link can't
 nest the shell inside the content pane.
 

package/dist/cli/banner.js

@@ -21,6 +21,7 @@ function paint(code, text, enabled) {
 }
 /** Strip ANSI escapes so padding uses visible width. */
 function visibleLength(text) {
+    // eslint-disable-next-line no-control-regex -- ESC (\x1b) is the ANSI escape we strip
     return text.replace(/\x1b\[[0-9;]*m/g, '').length;
 }
 /** Vite-style URL: cyan, with the port bolded. */

package/dist/cli/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../src/cli/banner.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"banner.js","sourceRoot":"","sources":["../../src/cli/banner.ts"],"names":[],"mappings":"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"}

package/dist/server/renderers/markdown.js

@@ -1,7 +1,41 @@
 import MarkdownIt from 'markdown-it';
 import hljs from 'highlight.js';
 import { createRequire } from 'node:module';
-import { basename } from 'node:path';
+import { basename, posix } from 'node:path';
+/** Where the server streams raw file bytes (mirror of the plugin's raw route). */
+const RAW_BASE = '/__hmrserve/raw/';
+/**
+ * Rendered markdown is injected into the app-shell DOM (not an iframe), so a
+ * relative `<img src="pic.png">` would resolve against the shell URL and 404.
+ * Rewrite relative asset URLs to the raw endpoint, resolved against the markdown
+ * file's own directory. Absolute/external/anchor/data URLs are left untouched,
+ * and `href` (links) is deliberately not rewritten so in-app navigation still works.
+ */
+function resolveAssetUrl(mdDir, value) {
+    const v = value.trim();
+    if (!v)
+        return value;
+    // scheme: (http:, data:, …), protocol-relative //, root-absolute /, or #anchor.
+    if (/^[a-z][a-z0-9+.-]*:/i.test(v) || /^(\/\/|\/|#)/.test(v))
+        return value;
+    const cut = v.search(/[?#]/);
+    const pathPart = cut >= 0 ? v.slice(0, cut) : v;
+    const suffix = cut >= 0 ? v.slice(cut) : '';
+    const resolved = posix.normalize(posix.join(mdDir, pathPart));
+    // Never point outside the served root.
+    if (resolved.startsWith('..'))
+        return value;
+    const encoded = resolved.split('/').map(encodeURIComponent).join('/');
+    return `${RAW_BASE}${encoded}${suffix}`;
+}
+const ASSET_ATTR_RE = /\b(src|poster)=(?:"([^"]*)"|'([^']*)')/gi;
+function rewriteRelativeAssets(html, mdDir) {
+    return html.replace(ASSET_ATTR_RE, (match, attr, dq, sq) => {
+        const value = dq ?? sq ?? '';
+        const next = resolveAssetUrl(mdDir, value);
+        return next === value ? match : `${attr}="${next}"`;
+    });
+}
 const require = createRequire(import.meta.url);
 const taskLists = require('markdown-it-task-lists');
 const md = new MarkdownIt({
@@ -34,9 +68,10 @@ export const markdownRenderer = {
     extensions: ['md', 'markdown'],
     category: 'markdown',
     render({ raw, path }) {
+        const mdDir = posix.dirname(path); // '.' at the root
         return {
             kind: 'html',
-            html: md.render(raw),
+            html: rewriteRelativeAssets(md.render(raw), mdDir === '.' ? '' : mdDir),
             title: deriveTitle(raw, path),
         };
     },

package/dist/server/renderers/markdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/server/renderers/markdown.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAGrC,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,MAAM,SAAS,GAAG,OAAO,CAAC,wBAAwB,CAA4C,CAAC;AAE/F,MAAM,EAAE,GAAG,IAAI,UAAU,CAAC;IACxB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,IAAI;IACjB,6EAA6E;IAC7E,8EAA8E;IAC9E,wDAAwD;IACxD,SAAS,CAAC,GAAG,EAAE,IAAI;QACjB,IAAI,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC;gBACH,OAAO,2BAA2B,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC;YACjG,CAAC;YAAC,MAAM,CAAC;gBACP,mCAAmC;YACrC,CAAC;QACH,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,CAAC,CAAC,GAAG,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;AAEpD,yDAAyD;AACzD,SAAS,WAAW,CAAC,GAAW,EAAE,IAAY;IAC5C,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC,2BAA2B,CAAC,CAAC;IACnD,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC;QAAE,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACnC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;AACxB,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAa;IACxC,UAAU,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC;IAC9B,QAAQ,EAAE,UAAU;IACpB,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,EAAe;QAC/B,OAAO;YACL,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;YACpB,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,IAAI,CAAC;SAC9B,CAAC;IACJ,CAAC;CACF,CAAC"}
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/server/renderers/markdown.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmr-serve",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Point at any folder and review it live in the browser — VSCode-style file tree + content pane, powered by Vite's dev server and HMR client.",
   "type": "module",
   "license": "MIT",

package/src/client/App.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="app">
-    <aside class="sidebar" :class="{ 'is-collapsed': sidebarCollapsed }" data-testid="sidebar">
+    <aside
+      class="sidebar"
+      :class="{ 'is-collapsed': sidebarCollapsed }"
+      :style="sidebarStyle"
+      data-testid="sidebar"
+    >
       <div class="sidebar-header">
         <span v-if="!sidebarCollapsed" class="brand">hmr-serve</span>
         <div class="sidebar-actions">
@@ -9,8 +14,10 @@
             :categories="categories"
             :visible="visibleCategories"
             :show-other-files="showOtherFiles"
+            :theme="theme"
             @change="onCategoriesChange"
             @update:show-other-files="onShowOtherFilesChange"
+            @update:theme="onThemeChange"
           />
           <button
             type="button"
@@ -50,17 +57,18 @@
             <li v-if="visibleHits.length === 0" class="empty" data-testid="search-empty">
               No matches
             </li>
-            <li
-              v-for="hit in visibleHits"
-              :key="hit.path"
-              class="search-hit"
-              data-testid="search-hit"
-              :data-path="hit.path"
-              :class="{ selected: hit.path === selectedPath }"
-              @click="select(hit.path)"
-            >
-              <span class="hit-title">{{ hit.title }}</span>
-              <span class="hit-snippet">{{ hit.snippet }}</span>
+            <li v-for="hit in visibleHits" :key="hit.path" class="search-hit-item">
+              <a
+                class="search-hit"
+                data-testid="search-hit"
+                :data-path="hit.path"
+                :href="hrefFor(hit.path)"
+                :class="{ selected: hit.path === selectedPath }"
+                @click="onHitClick($event, hit.path)"
+              >
+                <span class="hit-title">{{ hit.title }}</span>
+                <span class="hit-snippet">{{ hit.snippet }}</span>
+              </a>
             </li>
           </ul>
           <file-tree
@@ -73,6 +81,19 @@
         </div>
       </template>
     </aside>
+    <div
+      v-if="!sidebarCollapsed"
+      class="sidebar-resizer"
+      :class="{ active: resizing }"
+      data-testid="sidebar-resizer"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize sidebar"
+      tabindex="0"
+      :aria-valuenow="sidebarWidth"
+      @pointerdown="onResizeStart"
+      @keydown="onResizeKey"
+    ></div>
     <main class="main">
       <content-pane
         :path="selectedPath"
@@ -89,15 +110,20 @@ import { defineComponent } from 'vue';
 import type { CategoryInfo, FileCategory, FileNode, SearchHit } from '../shared/types';
 import { fetchConfig, fetchTree, search } from './api';
 import { onFileUpdate } from './hmr';
-import { readPath, writePath } from './router';
+import { hrefFor, isPlainNavClick, readPath, writePath } from './router';
 import {
+  SIDEBAR_DEFAULT_WIDTH,
+  clampSidebarWidth,
   loadShowOtherFiles,
   loadSidebarCollapsed,
+  loadSidebarWidth,
   loadVisibleCategories,
   saveShowOtherFiles,
   saveSidebarCollapsed,
+  saveSidebarWidth,
   saveVisibleCategories,
 } from './settings';
+import { applyTheme, loadTheme, saveTheme, type Theme } from './theme';
 import FileTree from './components/FileTree.vue';
 import ContentPane from './components/ContentPane.vue';
 import SearchBox from './components/SearchBox.vue';
@@ -111,7 +137,10 @@ interface AppData {
   categories: CategoryInfo[];
   visibleCategories: FileCategory[];
   showOtherFiles: boolean;
+  theme: Theme;
   sidebarCollapsed: boolean;
+  sidebarWidth: number;
+  resizing: boolean;
   mount: string;
   searchTimer: ReturnType<typeof setTimeout> | null;
   unsubscribe: (() => void) | null;
@@ -158,13 +187,20 @@ export default defineComponent({
       categories: [],
       visibleCategories: [],
       showOtherFiles: false,
+      theme: loadTheme(),
       sidebarCollapsed: false,
+      sidebarWidth: SIDEBAR_DEFAULT_WIDTH,
+      resizing: false,
       mount: window.__HMR_SERVE_MOUNT__ ?? '',
       searchTimer: null,
       unsubscribe: null,
     };
   },
   computed: {
+    // Inline width for the expanded sidebar; collapsed state is CSS-driven.
+    sidebarStyle(): Record<string, string> {
+      return this.sidebarCollapsed ? {} : { width: `${this.sidebarWidth}px` };
+    },
     // Every extension the server can preview — used to spot "other" files.
     supportedExtensions(): string[] {
       return this.categories.flatMap((c) => c.extensions);
@@ -206,6 +242,7 @@ export default defineComponent({
     );
     this.showOtherFiles = loadShowOtherFiles(this.mount);
     this.sidebarCollapsed = loadSidebarCollapsed(this.mount);
+    this.sidebarWidth = loadSidebarWidth(this.mount);
     // Structural changes (add/unlink) reshape the tree; a change may alter a
     // file's searchable text. Refresh both so the nav and results stay live.
     this.unsubscribe = onFileUpdate((update) => {
@@ -238,15 +275,69 @@ export default defineComponent({
       this.showOtherFiles = show;
       saveShowOtherFiles(this.mount, show);
     },
+    onThemeChange(theme: Theme): void {
+      this.theme = theme;
+      saveTheme(theme);
+      applyTheme(theme);
+    },
     toggleSidebar(): void {
       this.sidebarCollapsed = !this.sidebarCollapsed;
       saveSidebarCollapsed(this.mount, this.sidebarCollapsed);
     },
+    // Drag-to-resize the sidebar. Width tracks the pointer live; the final value
+    // is clamped and persisted on release. Pointer capture + a body class keep
+    // the drag smooth even when the cursor moves over the content iframe.
+    onResizeStart(event: PointerEvent): void {
+      if (this.sidebarCollapsed) return;
+      event.preventDefault();
+      this.resizing = true;
+      document.body.classList.add('is-resizing');
+      const handle = event.currentTarget as HTMLElement;
+      handle.setPointerCapture(event.pointerId);
+      handle.addEventListener('pointermove', this.onResizeMove);
+      handle.addEventListener('pointerup', this.onResizeEnd);
+      handle.addEventListener('pointercancel', this.onResizeEnd);
+    },
+    onResizeMove(event: PointerEvent): void {
+      if (!this.resizing) return;
+      // Sidebar hugs the left edge, so its width is the pointer's x position.
+      this.sidebarWidth = clampSidebarWidth(event.clientX);
+    },
+    onResizeEnd(event: PointerEvent): void {
+      if (!this.resizing) return;
+      this.resizing = false;
+      document.body.classList.remove('is-resizing');
+      const handle = event.currentTarget as HTMLElement;
+      handle.releasePointerCapture?.(event.pointerId);
+      handle.removeEventListener('pointermove', this.onResizeMove);
+      handle.removeEventListener('pointerup', this.onResizeEnd);
+      handle.removeEventListener('pointercancel', this.onResizeEnd);
+      saveSidebarWidth(this.mount, this.sidebarWidth);
+    },
+    // Keyboard resize for accessibility (left/right arrows on the handle).
+    onResizeKey(event: KeyboardEvent): void {
+      const step = event.shiftKey ? 32 : 8;
+      let next = this.sidebarWidth;
+      if (event.key === 'ArrowLeft') next -= step;
+      else if (event.key === 'ArrowRight') next += step;
+      else return;
+      event.preventDefault();
+      this.sidebarWidth = clampSidebarWidth(next);
+      saveSidebarWidth(this.mount, this.sidebarWidth);
+    },
+    hrefFor,
     // User-initiated selection (tree / search hit): a normal history push.
     select(path: string): void {
       this.selectedPath = path;
       writePath(path);
     },
+    // Search hits are anchors too — plain click navigates in-app; modified/middle
+    // clicks fall through so the browser opens a new tab/window.
+    onHitClick(event: MouseEvent, path: string): void {
+      if (!isPlainNavClick(event)) return;
+      event.preventDefault();
+      this.select(path);
+    },
     // Mirror a navigation the iframe made itself (an in-page link click): the
     // iframe already added a history entry, so replace rather than push to keep
     // one entry per navigation.

package/src/client/components/SettingsMenu.vue

@@ -50,6 +50,59 @@
         <button type="button" @click="setAll(true)">All</button>
         <button type="button" @click="setAll(false)">None</button>
       </div>
+      <div class="settings-divider" role="separator"></div>
+      <div class="settings-title">Appearance</div>
+      <div class="settings-actions theme-actions">
+        <button
+          type="button"
+          data-testid="theme-dark"
+          aria-label="Dark mode"
+          title="Dark"
+          :aria-pressed="theme === 'dark'"
+          :class="{ active: theme === 'dark' }"
+          @click="setTheme('dark')"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+          </svg>
+        </button>
+        <button
+          type="button"
+          data-testid="theme-light"
+          aria-label="Light mode"
+          title="Light"
+          :aria-pressed="theme === 'light'"
+          :class="{ active: theme === 'light' }"
+          @click="setTheme('light')"
+        >
+          <svg
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="4" />
+            <path
+              d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -57,6 +110,7 @@
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue';
 import type { CategoryInfo, FileCategory } from '../../shared/types';
+import type { Theme } from '../theme';
 
 export default defineComponent({
   name: 'SettingsMenu',
@@ -64,10 +118,12 @@ export default defineComponent({
     categories: { type: Array as PropType<CategoryInfo[]>, required: true },
     visible: { type: Array as PropType<FileCategory[]>, required: true },
     showOtherFiles: { type: Boolean, default: false },
+    theme: { type: String as PropType<Theme>, default: 'dark' },
   },
   emits: {
     change: (value: FileCategory[]) => Array.isArray(value),
     'update:showOtherFiles': (value: boolean) => typeof value === 'boolean',
+    'update:theme': (value: Theme) => value === 'dark' || value === 'light',
   },
   data() {
     return { open: false };
@@ -92,6 +148,9 @@ export default defineComponent({
       this.$emit('change', on ? this.categories.map((c) => c.id) : []);
       this.$emit('update:showOtherFiles', on);
     },
+    setTheme(theme: Theme): void {
+      this.$emit('update:theme', theme);
+    },
     toggleOpen(): void {
       this.open = !this.open;
       if (this.open) document.addEventListener('mousedown', this.onDocMouseDown);

package/src/client/components/TreeNode.vue

@@ -31,24 +31,26 @@
         @toggle="$emit('toggle', $event)"
       />
     </ul>
-    <div
+    <a
       v-else-if="node.type === 'file'"
       class="node file"
       role="treeitem"
       data-testid="file-node"
       :data-path="node.path"
+      :href="hrefFor(node.path)"
       :class="{ selected: node.path === selectedPath }"
-      @click="$emit('select', node.path)"
+      @click="onFileClick"
     >
       <file-icon :ext="node.ext || ''" />
       <span class="name">{{ node.name }}</span>
-    </div>
+    </a>
   </li>
 </template>
 
 <script lang="ts">
 import { defineComponent, type PropType } from 'vue';
 import type { FileNode } from '../../shared/types';
+import { hrefFor, isPlainNavClick } from '../router';
 import FileIcon from './FileIcon.vue';
 
 export default defineComponent({
@@ -72,5 +74,15 @@ export default defineComponent({
       return this.forceExpanded || this.expandedPaths.includes(this.node.path);
     },
   },
+  methods: {
+    hrefFor,
+    // Plain left-click navigates in-app; modified/middle clicks fall through so
+    // the browser can open the anchor in a new tab/window.
+    onFileClick(event: MouseEvent): void {
+      if (!isPlainNavClick(event)) return;
+      event.preventDefault();
+      this.$emit('select', this.node.path);
+    },
+  },
 });
 </script>

package/src/client/favicon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
   <!-- App tile  matches shell chrome -->
   <rect width="32" height="32" rx="7" fill="#1e1e1e"/>
   <!-- Page body -->

package/src/client/main.ts

@@ -1,6 +1,13 @@
 import { createApp } from 'vue';
 import App from './App.vue';
-import 'github-markdown-css/github-markdown-dark.css';
+import darkMarkdownCss from 'github-markdown-css/github-markdown-dark.css?url';
+import lightMarkdownCss from 'github-markdown-css/github-markdown-light.css?url';
+import { applyTheme, loadTheme, setMarkdownThemes } from './theme';
 import './styles.css';
 
+// Same GitHub markdown stylesheets as before — swapped by theme so MD/CSV/TSV
+// keep github-markdown-css table/typography styling in both modes.
+setMarkdownThemes({ dark: darkMarkdownCss, light: lightMarkdownCss });
+applyTheme(loadTheme());
+
 createApp(App).mount('#app');

package/src/client/router.ts

@@ -27,6 +27,26 @@ function toUrl(prefix: string, path: string): string {
   return `${prefix}/${path.split('/').map(encodeURIComponent).join('/')}`;
 }
 
+/** The bookmarkable URL for a file path — used as the `href` on nav links so
+ *  they're real anchors (right-click → open in new tab, hover preview, etc.). */
+export function hrefFor(path: string): string {
+  return toUrl(mount(), path);
+}
+
+/** Whether a click on an anchor should be handled as in-app navigation rather
+ *  than left to the browser. False for modified/middle clicks so the browser
+ *  can open a new tab/window natively. */
+export function isPlainNavClick(event: MouseEvent): boolean {
+  return (
+    event.button === 0 &&
+    !event.metaKey &&
+    !event.ctrlKey &&
+    !event.shiftKey &&
+    !event.altKey &&
+    !event.defaultPrevented
+  );
+}
+
 /** Reflect the selected path into the URL. Pushes a new history entry by default
  *  (so Back works); pass `replace` when mirroring a navigation that already
  *  created its own history entry (e.g. an in-iframe link click) to avoid a

package/src/client/settings.ts

@@ -7,6 +7,12 @@ const CATEGORIES_KEY_PREFIX = 'hmr-serve:visible-categories:';
 const OTHER_FILES_KEY_PREFIX = 'hmr-serve:show-other-files:';
 const EXPANDED_DIRS_KEY_PREFIX = 'hmr-serve:expanded-dirs:';
 const SIDEBAR_COLLAPSED_KEY_PREFIX = 'hmr-serve:sidebar-collapsed:';
+const SIDEBAR_WIDTH_KEY_PREFIX = 'hmr-serve:sidebar-width:';
+
+/** Sidebar width bounds (px). The default matches the CSS `.sidebar` width. */
+export const SIDEBAR_MIN_WIDTH = 180;
+export const SIDEBAR_MAX_WIDTH = 600;
+export const SIDEBAR_DEFAULT_WIDTH = 280;
 
 function categoriesKey(mount: string): string {
   return `${CATEGORIES_KEY_PREFIX}${mount || '/'}`;
@@ -24,6 +30,15 @@ function sidebarCollapsedKey(mount: string): string {
   return `${SIDEBAR_COLLAPSED_KEY_PREFIX}${mount || '/'}`;
 }
 
+function sidebarWidthKey(mount: string): string {
+  return `${SIDEBAR_WIDTH_KEY_PREFIX}${mount || '/'}`;
+}
+
+/** Clamp a width to the allowed range. */
+export function clampSidebarWidth(px: number): number {
+  return Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, Math.round(px)));
+}
+
 /** Load saved visible categories, defaulting to all when unset or unreadable.
  *  Saved values are intersected with `all` so removing a category later can't
  *  leave a stale id in the set. */
@@ -87,6 +102,27 @@ export function saveSidebarCollapsed(mount: string, collapsed: boolean): void {
   }
 }
 
+/** Saved sidebar width in px, clamped to bounds. Defaults when unset/unreadable. */
+export function loadSidebarWidth(mount: string): number {
+  try {
+    const raw = localStorage.getItem(sidebarWidthKey(mount));
+    if (raw == null) return SIDEBAR_DEFAULT_WIDTH;
+    const px = Number(raw);
+    if (!Number.isFinite(px)) return SIDEBAR_DEFAULT_WIDTH;
+    return clampSidebarWidth(px);
+  } catch {
+    return SIDEBAR_DEFAULT_WIDTH;
+  }
+}
+
+export function saveSidebarWidth(mount: string, px: number): void {
+  try {
+    localStorage.setItem(sidebarWidthKey(mount), String(clampSidebarWidth(px)));
+  } catch {
+    // Ignore storage failures.
+  }
+}
+
 /** Directory paths that should start expanded. Missing/corrupt storage → []. */
 export function loadExpandedDirs(mount: string): string[] {
   try {

package/src/client/styles.css

@@ -1,4 +1,5 @@
 :root {
+  color-scheme: dark;
   --bg: #1e1e1e;
   --bg-side: #252526;
   --bg-hover: #2a2d2e;
@@ -9,10 +10,34 @@
   --fg-nav-active: #ffffff;
   --border: #333333;
   --accent: #4daafc;
+  --chrome-surface: #2a2a2a;
+  --chrome-border: #3a3a3a;
+  --chrome-fg: #c8c8c8;
+  --chrome-fg-active: #ffffff;
+  --danger: #f48771;
   --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
+[data-theme='light'] {
+  color-scheme: light;
+  --bg: #ffffff;
+  --bg-side: #f3f3f3;
+  --bg-hover: #e8e8e8;
+  --bg-sel: #cce8ff;
+  --fg: #1e1e1e;
+  --fg-dim: #6e6e6e;
+  --fg-nav: #3c3c3c;
+  --fg-nav-active: #1e1e1e;
+  --border: #e0e0e0;
+  --accent: #0066bf;
+  --chrome-surface: #ececec;
+  --chrome-border: #d0d0d0;
+  --chrome-fg: #3c3c3c;
+  --chrome-fg-active: #1e1e1e;
+  --danger: #c72e0f;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -41,6 +66,7 @@ body {
 .sidebar {
   display: flex;
   flex-direction: column;
+  flex-shrink: 0;
   width: 280px;
   min-width: 180px;
   min-height: 0;
@@ -48,6 +74,31 @@ body {
   border-right: 1px solid var(--border);
 }
 
+/* Drag handle between the sidebar and content. Sits on the sidebar's right edge
+ * and widens its hit area without shifting layout. */
+.sidebar-resizer {
+  flex-shrink: 0;
+  width: 5px;
+  cursor: col-resize;
+  background: transparent;
+  transition: background 0.12s ease;
+  touch-action: none;
+}
+
+.sidebar-resizer:hover,
+.sidebar-resizer:focus-visible,
+.sidebar-resizer.active {
+  background: var(--accent);
+  outline: none;
+}
+
+/* While dragging, force the resize cursor everywhere and suppress selection so
+ * moving over the content iframe stays smooth. */
+body.is-resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
 .sidebar-header {
   display: flex;
   align-items: center;
@@ -160,6 +211,7 @@ body {
   font-weight: 400;
   line-height: 1.5;
   color: var(--fg-nav);
+  text-decoration: none;
 }
 
 .node:hover {
@@ -211,9 +263,12 @@ body {
 }
 
 .search-hit {
+  display: block;
   padding: 6px 12px;
   cursor: pointer;
   border-bottom: 1px solid var(--border);
+  color: var(--fg);
+  text-decoration: none;
 }
 
 .search-hit:hover {
@@ -273,8 +328,8 @@ body {
   align-items: center;
   padding: 2px;
   border-radius: 8px;
-  background: #2a2a2a;
-  border: 1px solid #3a3a3a;
+  background: var(--chrome-surface);
+  border: 1px solid var(--chrome-border);
   flex-shrink: 0;
 }
 
@@ -288,7 +343,7 @@ body {
   border: 1px solid transparent;
   border-radius: 6px;
   background: transparent;
-  color: #8a8a8a;
+  color: var(--fg-dim);
   cursor: pointer;
 }
 
@@ -297,15 +352,15 @@ body {
 }
 
 .view-toggle-btn.active {
-  color: #fff;
-  background: #3a3a3a;
-  border-color: #4daafc;
+  color: var(--chrome-fg-active);
+  background: var(--bg-hover);
+  border-color: var(--accent);
 }
 
 .pane-label {
   font-size: 13px;
   font-weight: 500;
-  color: #c8c8c8;
+  color: var(--chrome-fg);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -320,20 +375,20 @@ body {
   padding: 0;
   flex-shrink: 0;
   border-radius: 8px;
-  border: 1px solid #3a3a3a;
-  background: #2a2a2a;
-  color: #c8c8c8;
+  border: 1px solid var(--chrome-border);
+  background: var(--chrome-surface);
+  color: var(--chrome-fg);
   cursor: pointer;
 }
 
 .fullscreen-btn:hover {
-  color: #fff;
-  border-color: #4daafc;
+  color: var(--chrome-fg-active);
+  border-color: var(--accent);
 }
 
 .fullscreen-btn[aria-pressed='true'] {
-  border-color: #4daafc;
-  color: #fff;
+  border-color: var(--accent);
+  color: var(--chrome-fg-active);
 }
 
 .pane-body {
@@ -348,7 +403,7 @@ body {
 }
 
 .status.error {
-  color: #f48771;
+  color: var(--danger);
 }
 
 .raw-frame {
@@ -473,6 +528,75 @@ body {
   font-weight: 600;
 }
 
+/* Light-mode syntax colors (VS Code Light+ inspired). */
+[data-theme='light'] .hljs-comment,
+[data-theme='light'] .hljs-quote {
+  color: #008000;
+}
+
+[data-theme='light'] .hljs-keyword,
+[data-theme='light'] .hljs-selector-tag,
+[data-theme='light'] .hljs-literal,
+[data-theme='light'] .hljs-tag,
+[data-theme='light'] .hljs-name,
+[data-theme='light'] .hljs-doctag {
+  color: #0000ff;
+}
+
+[data-theme='light'] .hljs-string,
+[data-theme='light'] .hljs-regexp,
+[data-theme='light'] .hljs-meta .hljs-string {
+  color: #a31515;
+}
+
+[data-theme='light'] .hljs-number,
+[data-theme='light'] .hljs-symbol,
+[data-theme='light'] .hljs-bullet {
+  color: #098658;
+}
+
+[data-theme='light'] .hljs-title,
+[data-theme='light'] .hljs-title.function_,
+[data-theme='light'] .hljs-section {
+  color: #795e26;
+}
+
+[data-theme='light'] .hljs-built_in,
+[data-theme='light'] .hljs-type,
+[data-theme='light'] .hljs-title.class_,
+[data-theme='light'] .hljs-class .hljs-title {
+  color: #267f99;
+}
+
+[data-theme='light'] .hljs-attr,
+[data-theme='light'] .hljs-attribute,
+[data-theme='light'] .hljs-variable,
+[data-theme='light'] .hljs-template-variable,
+[data-theme='light'] .hljs-property,
+[data-theme='light'] .hljs-params {
+  color: #001080;
+}
+
+[data-theme='light'] .hljs-selector-class,
+[data-theme='light'] .hljs-selector-id,
+[data-theme='light'] .hljs-selector-attr,
+[data-theme='light'] .hljs-selector-pseudo {
+  color: #800000;
+}
+
+[data-theme='light'] .hljs-meta,
+[data-theme='light'] .hljs-meta .hljs-keyword {
+  color: #0000ff;
+}
+
+[data-theme='light'] .hljs-deletion {
+  color: #a31515;
+}
+
+[data-theme='light'] .hljs-addition {
+  color: #098658;
+}
+
 /* File-type filter (gear) */
 .settings {
   position: relative;
@@ -512,6 +636,10 @@ body {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
 }
 
+[data-theme='light'] .settings-popover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
 .settings-title {
   padding: 2px 6px 6px;
   font-size: 12px;
@@ -562,6 +690,24 @@ body {
   background: var(--bg-hover);
 }
 
+.settings-actions button.active {
+  color: var(--fg);
+  border-color: var(--accent);
+  background: var(--bg-hover);
+}
+
+.theme-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 30px;
+  padding: 6px;
+}
+
+.theme-actions button svg {
+  display: block;
+}
+
 /* Image / video preview */
 .media-wrap {
   display: flex;

package/src/client/theme.ts

@@ -0,0 +1,51 @@
+export type Theme = 'dark' | 'light';
+
+const THEME_KEY = 'hmr-serve:theme';
+const MARKDOWN_LINK_ID = 'hmr-markdown-theme';
+
+/** Vite-resolved markdown stylesheet URLs, registered from `main.ts`. */
+let markdownCss: Record<Theme, string> | null = null;
+
+/** Register the GitHub markdown CSS URLs (from Vite `?url` imports). */
+export function setMarkdownThemes(urls: Record<Theme, string>): void {
+  markdownCss = urls;
+}
+
+/** Load the saved UI theme. Defaults to dark (matches the original chrome). */
+export function loadTheme(): Theme {
+  try {
+    const raw = localStorage.getItem(THEME_KEY);
+    if (raw === 'light' || raw === 'dark') return raw;
+  } catch {
+    // Ignore storage failures.
+  }
+  return 'dark';
+}
+
+export function saveTheme(theme: Theme): void {
+  try {
+    localStorage.setItem(THEME_KEY, theme);
+  } catch {
+    // Ignore storage failures — theme still applies in-session.
+  }
+}
+
+/**
+ * Apply the theme to the app shell (and markdown/code/csv previews).
+ * Sandboxed HTML iframes keep their own styles — they are not themed.
+ */
+export function applyTheme(theme: Theme): void {
+  document.documentElement.dataset.theme = theme;
+  document.documentElement.style.colorScheme = theme;
+
+  if (!markdownCss) return;
+
+  let link = document.getElementById(MARKDOWN_LINK_ID) as HTMLLinkElement | null;
+  if (!link) {
+    link = document.createElement('link');
+    link.id = MARKDOWN_LINK_ID;
+    link.rel = 'stylesheet';
+    document.head.appendChild(link);
+  }
+  link.href = markdownCss[theme];
+}