living-documentation 7.7.0 → 7.9.0

package/dist/src/frontend/boot.js

@@ -12,6 +12,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   setupSearch();
   wcRestorePrefs();
   if (typeof initFileAttach === "function") initFileAttach();
+  if (typeof initSidebarResize === "function") initSidebarResize();
   await loadConfig();
   if (typeof initMarkerState === "function") initMarkerState();
   if (typeof initFullWidthState === "function") initFullWidthState();

package/dist/src/frontend/diagram/main.js

@@ -295,5 +295,5 @@ document.getElementById('darkIcon').textContent =
 })();
 
 // ── Bootstrap ─────────────────────────────────────────────────────────────────
-
-loadDiagramList();
+// loadDiagramList() is invoked from the inline IIFE in diagram.html after
+// window.initI18n() resolves, so t() returns localised strings (not raw keys).

package/dist/src/frontend/diagram.html

@@ -1225,6 +1225,7 @@
     <script type="module">
       import { NODE_COLORS, NODE_L_RATIOS, DEFAULT_NODE_PALETTE, DEFAULT_EDGE_PALETTE, deriveNodeColors } from '/diagram/constants.js';
       import { st } from '/diagram/state.js';
+      import { loadDiagramList } from '/diagram/persistence.js';
       (async () => {
         // diagramNodePalette: array of 15 bg hex strings (positional, matching DEFAULT_NODE_PALETTE)
         // diagramEdgePalette: array of hex strings
@@ -1273,6 +1274,7 @@
           ec.appendChild(btn);
         });
         window.applyI18n();
+        loadDiagramList();
       })();
     </script>
   </body>

package/dist/src/frontend/index.html

@@ -40,6 +40,7 @@
     <script defer src="/dark-mode.js"></script>
     <script defer src="/config.js"></script>
     <script defer src="/sidebar.js"></script>
+    <script defer src="/sidebar-resize.js"></script>
     <script defer src="/search.js"></script>
     <script defer src="/image-paste.js"></script>
     <script defer src="/file-attach.js"></script>

package/dist/src/frontend/sidebar-resize.js

@@ -0,0 +1,98 @@
+// ── Sidebar horizontal resize ───────────────────────────────────────────────
+// Drag a handle on the sidebar's right edge to resize it.
+// Width is persisted in localStorage (`ld-sidebar-w`) across reloads.
+// The toggle (toggleSidebar) keeps working because it only flips the `hidden`
+// class — width stays intact on the element.
+
+(function () {
+  const STORAGE_KEY = "ld-sidebar-w";
+  const MIN_W = 200;
+  const MAX_W = 600;
+
+  function applyStoredWidth() {
+    const sidebar = document.getElementById("sidebar");
+    if (!sidebar) return;
+    let w = parseInt(localStorage.getItem(STORAGE_KEY) || "", 10);
+    if (!Number.isFinite(w)) return;
+    w = Math.max(MIN_W, Math.min(MAX_W, w));
+    sidebar.classList.remove("w-72");
+    sidebar.style.width = w + "px";
+  }
+
+  function initSidebarResize() {
+    const sidebar = document.getElementById("sidebar");
+    if (!sidebar) return;
+
+    applyStoredWidth();
+
+    const handle = document.createElement("div");
+    handle.id = "sidebar-resize-handle";
+    handle.setAttribute("aria-hidden", "true");
+    handle.style.cssText = [
+      "position:absolute",
+      "top:0",
+      "right:-2px",
+      "width:6px",
+      "height:100%",
+      "cursor:col-resize",
+      "z-index:20",
+      "user-select:none",
+      "background:transparent",
+      "transition:background 0.15s ease",
+    ].join(";");
+    handle.addEventListener("mouseenter", () => {
+      handle.style.background = "rgba(59,130,246,0.35)";
+    });
+    handle.addEventListener("mouseleave", () => {
+      if (!handle.dataset.dragging) handle.style.background = "transparent";
+    });
+
+    // Sidebar needs `relative` so the absolutely-positioned handle anchors to it.
+    sidebar.style.position = "relative";
+    sidebar.appendChild(handle);
+
+    let startX = 0;
+    let startW = 0;
+
+    function onMove(e) {
+      const dx = e.clientX - startX;
+      let w = startW + dx;
+      w = Math.max(MIN_W, Math.min(MAX_W, w));
+      sidebar.style.width = w + "px";
+    }
+
+    function onUp() {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      delete handle.dataset.dragging;
+      handle.style.background = "transparent";
+      const finalW = parseInt(sidebar.style.width, 10);
+      if (Number.isFinite(finalW)) {
+        try {
+          localStorage.setItem(STORAGE_KEY, String(finalW));
+        } catch {
+          /* ignore */
+        }
+      }
+    }
+
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      startX = e.clientX;
+      startW = sidebar.getBoundingClientRect().width;
+      // Drop the Tailwind width class so inline width takes over for good.
+      sidebar.classList.remove("w-72");
+      sidebar.style.width = startW + "px";
+      handle.dataset.dragging = "1";
+      handle.style.background = "rgba(59,130,246,0.55)";
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    });
+  }
+
+  window.initSidebarResize = initSidebarResize;
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "living-documentation",
-  "version": "7.7.0",
+  "version": "7.9.0",
   "description": "A CLI tool that serves a local Markdown documentation viewer",
   "main": "dist/src/server.js",
   "bin": {