@jxsuite/studio 0.29.0 → 0.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.29.0",
+  "version": "0.30.1",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -23,7 +23,7 @@
     "provenance": true
   },
   "scripts": {
-    "build": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked && bun build ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
+    "build": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked && bun run scripts/build-workers.ts",
     "build:metafile": "bun build ./src/studio.ts --outdir dist --target browser --sourcemap=linked --metafile=metafile.json",
     "gen:webdata": "bun run scripts/gen-webdata.js",
     "test": "bun test --isolate",
@@ -31,11 +31,11 @@
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
-    "@jxsuite/parser": "^0.29.0",
-    "@jxsuite/runtime": "^0.29.0",
-    "@jxsuite/schema": "^0.29.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
+    "@jxsuite/parser": "^0.30.1",
+    "@jxsuite/runtime": "^0.30.1",
+    "@jxsuite/schema": "^0.30.1",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -79,11 +79,11 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.10.2",
+    "@happy-dom/global-registrator": "^20.10.6",
     "@types/mdast": "^4.0.4",
-    "@webref/css": "^8.5.8",
+    "@webref/css": "^8.6.0",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.81.0"
+    "@webref/idl": "^3.81.1"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/editor/context-menu.ts

@@ -70,10 +70,12 @@ function nodeToHtml(node: JxNode | string): string {
 async function writeToClipboard(json: Record<string, unknown>) {
   workspace.clipboard = json;
   try {
+    const jxBlob = new Blob([JSON.stringify(json)], { type: JX_MIME });
+    const htmlBlob = new Blob([nodeToHtml(json)], { type: "text/html" });
     await navigator.clipboard.write([
       new ClipboardItem({
-        [JX_MIME]: new Blob([JSON.stringify(json)], { type: JX_MIME }),
-        "text/html": new Blob([nodeToHtml(json)], { type: "text/html" }),
+        [JX_MIME]: jxBlob,
+        "text/html": htmlBlob,
       }),
     ]);
   } catch {

package/src/files/files.ts

@@ -16,6 +16,7 @@ import { createState, projectState, requireProjectState, setProjectState } from
 import { getPlatform } from "../platform";
 import { statusMessage } from "../panels/statusbar";
 import { loadComponentRegistry } from "./components";
+import { markLocalMutation } from "./fs-events";
 import {
   draggable,
   dropTargetForElements,
@@ -44,6 +45,7 @@ import type { TemplateResult } from "lit-html";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 import type { StudioState } from "../state.js";
 import type { Tab } from "../tabs/tab.js";
+import type { RenameResult } from "../types";
 
 // ─── File icon map ────────────────────────────────────────────────────────────
 
@@ -636,8 +638,9 @@ export function registerFileTreeDnD({ renderLeftPanel }: { renderLeftPanel: () =
  */
 async function moveFileEntry(oldPath: string, newPath: string, renderLeftPanel: () => void) {
   const platform = getPlatform();
+  markLocalMutation(oldPath, newPath);
   try {
-    await platform.renameFile(oldPath, newPath);
+    const report = await platform.renameFile(oldPath, newPath);
 
     // Update open tabs referencing the moved path
     for (const [id] of workspace.tabs.entries()) {
@@ -662,6 +665,7 @@ async function moveFileEntry(oldPath: string, newPath: string, renderLeftPanel:
       requireProjectState().expanded.add(newParent);
     }
 
+    reloadRewrittenTabs(report, newPath);
     renderLeftPanel();
     statusMessage(`Moved to ${newPath}`);
   } catch (error) {
@@ -779,6 +783,7 @@ async function createNewFile(dirPath: string, renderLeftPanel: () => void) {
     return;
   }
   const path = dirPath === "." ? name : `${dirPath}/${name}`;
+  markLocalMutation(path);
   await loadFormats();
   const format = formatForPath(name);
   const content =
@@ -849,6 +854,28 @@ function showRenameFileDialog(currentName: string): Promise<string | null> {
   });
 }
 
+/** Build the status-bar message for a rename, summarising any reference/tag rewrites. */
+function renameStatus(newName: string, report: RenameResult): string {
+  const refs = report.references;
+  const tagNote = report.tag ? `; tag → <${report.tag.to}> (${report.tag.refsUpdated})` : "";
+  if (refs && refs.refsUpdated > 0) {
+    return `Renamed to ${newName}; updated ${refs.refsUpdated} reference(s) in ${refs.filesChanged} file(s)${tagNote}`;
+  }
+  if (tagNote) {
+    return `Renamed to ${newName}${tagNote}`;
+  }
+  return `Renamed to ${newName}`;
+}
+
+/** Reload any open tabs whose references the refactor rewrote (so the editor shows new paths). */
+function reloadRewrittenTabs(report: RenameResult, skipPath: string): void {
+  for (const f of report.references?.files ?? []) {
+    if (f.path !== skipPath && workspace.tabs.has(f.path)) {
+      void reloadFileInTab(f.path);
+    }
+  }
+}
+
 async function renameFile(
   entry: { name: string; path: string; type: string },
   renderLeftPanel: () => void,
@@ -862,9 +889,10 @@ async function renameFile(
     ? entryPath.slice(0, entryPath.lastIndexOf("/"))
     : ".";
   const newPath = parentDirPath === "." ? newName : `${parentDirPath}/${newName}`;
+  markLocalMutation(entry.path, newPath);
   try {
     const platform = getPlatform();
-    await platform.renameFile(entry.path, newPath);
+    const report = await platform.renameFile(entry.path, newPath);
     await loadDirectory(parentDirPath);
     if (requireProjectState().selectedPath === entry.path) {
       requireProjectState().selectedPath = newPath;
@@ -872,8 +900,9 @@ async function renameFile(
     if (workspace.tabs.has(entry.path)) {
       renameTab(entry.path, newPath, newPath);
     }
+    reloadRewrittenTabs(report, newPath);
     renderLeftPanel();
-    statusMessage(`Renamed to ${newName}`);
+    statusMessage(renameStatus(newName, report));
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }
@@ -892,6 +921,7 @@ async function deleteFile(
   }
   try {
     const platform = getPlatform();
+    markLocalMutation(entry.path);
     await platform.deleteFile(entry.path);
     const delPath = entry.path.replaceAll("\\", "/");
     const parentDirPath = delPath.includes("/") ? delPath.slice(0, delPath.lastIndexOf("/")) : ".";
@@ -1045,6 +1075,16 @@ export async function openFileInTab(path: string) {
  *
  * @param {string} path
  */
+/** Reload an open tab from disk when an external change arrives — but only if it is not dirty. */
+export function reloadCleanTab(path: string): void {
+  for (const [, tab] of workspace.tabs.entries()) {
+    if (tab.documentPath === path && !tab.doc.dirty) {
+      void reloadFileInTab(path);
+      return;
+    }
+  }
+}
+
 export async function reloadFileInTab(path: string) {
   for (const [, tab] of workspace.tabs.entries()) {
     if (tab.documentPath === path) {

package/src/files/fs-events.ts

@@ -0,0 +1,162 @@
+/// <reference lib="dom" />
+/**
+ * Fs-events.ts — reconcile backend filesystem events into the cached sidebar tree.
+ *
+ * `applyFsEvents` is a pure, in-place reducer over `projectState.dirs`/`expanded` (unit-testable
+ * without a DOM). `startFsSync` is the only impure part: it feature-detects the platform's
+ * `subscribeFileEvents`, debounces bursts, drops the echoes of the user's own local mutations, and
+ * triggers a single re-render through the existing left-panel render path (no imperative DOM).
+ */
+
+import { getPlatform } from "../platform";
+import { projectState } from "../store";
+import type { DirEntry, FsEvent } from "../types";
+
+const RECENT_MS = 1500;
+const recentLocal = new Map<string, number>();
+
+const norm = (p: string) => p.replaceAll("\\", "/");
+
+/** Mark paths the user just mutated locally so the watcher's echo of them is ignored briefly. */
+export function markLocalMutation(...paths: string[]): void {
+  const expiry = Date.now() + RECENT_MS;
+  for (const p of paths) {
+    if (p) {
+      recentLocal.set(norm(p), expiry);
+    }
+  }
+}
+
+/** True while a path is within the recent-local-mutation window (self-cleans on expiry). */
+export function isRecentLocal(path: string): boolean {
+  const key = norm(path);
+  const expiry = recentLocal.get(key);
+  if (expiry === undefined) {
+    return false;
+  }
+  if (Date.now() > expiry) {
+    recentLocal.delete(key);
+    return false;
+  }
+  return true;
+}
+
+function parentDir(path: string): string {
+  const i = path.lastIndexOf("/");
+  return i === -1 ? "." : path.slice(0, i);
+}
+
+function baseName(path: string): string {
+  const i = path.lastIndexOf("/");
+  return i === -1 ? path : path.slice(i + 1);
+}
+
+/**
+ * Apply backend FS events to the cached directory tree in place, returning the set of directories
+ * whose contents changed. Idempotent — re-adding an existing entry or removing an absent one is a
+ * no-op, which absorbs watcher echoes. `change` events touch no tree state (name/type are stable).
+ */
+export function applyFsEvents(
+  dirs: Map<string, DirEntry[]>,
+  expanded: Set<string>,
+  events: FsEvent[],
+): Set<string> {
+  const changedDirs = new Set<string>();
+  for (const ev of events) {
+    const parent = parentDir(ev.path);
+    if (ev.type === "add" || ev.type === "addDir") {
+      const entries = dirs.get(parent);
+      if (entries && !entries.some((e) => e.path === ev.path)) {
+        entries.push({
+          name: baseName(ev.path),
+          path: ev.path,
+          type: ev.isDir ? "directory" : "file",
+        });
+        changedDirs.add(parent);
+      }
+      if (ev.type === "addDir" && !dirs.has(ev.path)) {
+        dirs.set(ev.path, []);
+      }
+    } else if (ev.type === "unlink" || ev.type === "unlinkDir") {
+      const entries = dirs.get(parent);
+      if (entries) {
+        const idx = entries.findIndex((e) => e.path === ev.path);
+        if (idx !== -1) {
+          entries.splice(idx, 1);
+          changedDirs.add(parent);
+        }
+      }
+      if (ev.type === "unlinkDir") {
+        dirs.delete(ev.path);
+        const nestedDirs: string[] = [];
+        for (const key of dirs.keys()) {
+          if (key.startsWith(`${ev.path}/`)) {
+            nestedDirs.push(key);
+          }
+        }
+        for (const key of nestedDirs) {
+          dirs.delete(key);
+        }
+        const staleExpanded: string[] = [];
+        for (const key of expanded) {
+          if (key === ev.path || key.startsWith(`${ev.path}/`)) {
+            staleExpanded.push(key);
+          }
+        }
+        for (const key of staleExpanded) {
+          expanded.delete(key);
+        }
+      }
+    }
+  }
+  return changedDirs;
+}
+
+export interface FsSyncContext {
+  renderLeftPanel: () => void;
+  /** Optional hook for an external content change to an open file (e.g. reload a clean tab). */
+  onContentChange?: (path: string) => void;
+}
+
+/**
+ * Subscribe the sidebar to backend filesystem events. Returns an unsubscribe function; a no-op when
+ * the platform has no watcher (desktop without one, or tests). Bursts are debounced into one
+ * render.
+ */
+export function startFsSync(ctx: FsSyncContext): () => void {
+  const platform = getPlatform();
+  if (!platform.subscribeFileEvents) {
+    return () => {};
+  }
+  let pending: FsEvent[] = [];
+  let timer: ReturnType<typeof setTimeout> | null = null;
+
+  const flush = () => {
+    timer = null;
+    const state = projectState;
+    const batch = pending.filter((e) => !isRecentLocal(e.path));
+    pending = [];
+    if (!state || batch.length === 0) {
+      return;
+    }
+    const changedDirs = applyFsEvents(state.dirs, state.expanded, batch);
+    if (ctx.onContentChange) {
+      for (const ev of batch) {
+        if (ev.type === "change") {
+          ctx.onContentChange(ev.path);
+        }
+      }
+    }
+    if (changedDirs.size > 0) {
+      ctx.renderLeftPanel();
+    }
+  };
+
+  return platform.subscribeFileEvents((events) => {
+    pending.push(...events);
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(flush, 50);
+  });
+}

package/src/panels/dnd.ts

@@ -67,8 +67,8 @@ export function registerLayersDnD() {
     for (const row of container.querySelectorAll("[data-dnd-row]") as NodeListOf<HTMLElement>) {
       const rowPath = (row.dataset.path as string)
         .split("/")
-        .map((s: string) => (/^\d+$/.test(s) ? Number.parseInt(s, 10) : s)) as JxPath;
-      const rowDepth = Number.parseInt(row.dataset.dndDepth as string, 10) || 0;
+        .map((s: string) => (/^\d+$/.test(s) ? Math.trunc(Number(s)) : s)) as JxPath;
+      const rowDepth = Math.trunc(Number(row.dataset.dndDepth as string)) || 0;
       const isVoid = Object.hasOwn(row.dataset, "dndVoid");
       const isExpanded = Object.hasOwn(row.dataset, "dndExpanded");
 

package/src/panels/signals-panel.ts

@@ -706,9 +706,9 @@ function renderSignalEditorTemplate(
         : signalFieldRow("Default", defaultVal, (v: string) => {
             let parsed: unknown = v;
             if (def.type === "integer") {
-              parsed = Number.parseInt(v, 10) || 0;
+              parsed = Math.trunc(Number(v)) || 0;
             } else if (def.type === "number") {
-              parsed = Number.parseFloat(v) || 0;
+              parsed = Number(v) || 0;
             } else if (def.type === "boolean") {
               parsed = v === "true";
             } else if (def.type === "array" || def.type === "object") {
@@ -860,7 +860,7 @@ function renderDataSourceFields(
       )}
       ${signalFieldRow("Version", String(def.version || 1), (v: string) =>
         transactDoc(activeTab.value, (t) =>
-          mutateUpdateDef(t, name, { version: Number.parseInt(v, 10) || 1 }),
+          mutateUpdateDef(t, name, { version: Math.trunc(Number(v)) || 1 }),
         ),
       )}
     `;
@@ -1279,6 +1279,14 @@ function resolveSchemaEnum(
  * @param {(val: unknown) => void} onChange
  * @param {Record<string, unknown>} [parentDef] - Parent def for resolving dependent enum refs
  */
+/** Parse a numeric field value, returning NaN for blank input (so callers can treat it as unset). */
+function parseNumericField(raw: string, integer: boolean): number {
+  if (raw.trim() === "") {
+    return Number.NaN;
+  }
+  return integer ? Math.trunc(Number(raw)) : Number(raw);
+}
+
 function renderInlineField(
   key: string,
   schema: Record<string, unknown>,
@@ -1319,10 +1327,10 @@ function renderInlineField(
       .value=${value !== undefined ? value : nothing}
       step=${schema.type === "integer" ? "1" : nothing}
       @change=${(e: Event) => {
-        const parsed =
-          schema.type === "integer"
-            ? Number.parseInt((e.target as HTMLInputElement).value, 10)
-            : Number.parseFloat((e.target as HTMLInputElement).value);
+        const parsed = parseNumericField(
+          (e.target as HTMLInputElement).value,
+          schema.type === "integer",
+        );
         onChange(Number.isNaN(parsed) ? undefined : parsed);
       }}
     ></sp-number-field>`;
@@ -1439,10 +1447,10 @@ export function renderSchemaFieldsTemplate(
           @change=${(e: Event) => {
             clearTimeout(debounce);
             debounce = setTimeout(() => {
-              const parsed =
-                ps.type === "integer"
-                  ? Number.parseInt((e.target as HTMLInputElement).value, 10)
-                  : Number.parseFloat((e.target as HTMLInputElement).value);
+              const parsed = parseNumericField(
+                (e.target as HTMLInputElement).value,
+                ps.type === "integer",
+              );
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateDef(t, name, {
                   [prop]: Number.isNaN(parsed) ? undefined : parsed,

package/src/platforms/devserver.ts

@@ -9,7 +9,7 @@
  */
 
 import type { ProjectConfig } from "@jxsuite/schema/types";
-import type { DirEntry } from "../types";
+import type { DirEntry, FsEvent, RenameResult } from "../types";
 
 /** A directory entry from the server, tolerating extra wire fields. */
 type WireDirEntry = DirEntry & Record<string, unknown>;
@@ -298,7 +298,7 @@ export function createDevServerPlatform() {
      * @param {string} from
      * @param {string} to
      */
-    async renameFile(from: string, to: string) {
+    async renameFile(from: string, to: string): Promise<RenameResult> {
       const res = await fetch("/__studio/file/rename", {
         body: JSON.stringify({ from: serverPath(from), to: serverPath(to) }),
         headers: { "Content-Type": "application/json" },
@@ -307,6 +307,58 @@ export function createDevServerPlatform() {
       if (!res.ok) {
         throw new Error(`Failed to rename: ${from} → ${to}`);
       }
+      const report = await readJson<RenameResult>(res);
+      // Map server-root-relative report paths back to project-relative for the studio.
+      if (typeof report.from === "string") {
+        report.from = stripRoot(report.from);
+      }
+      if (typeof report.to === "string") {
+        report.to = stripRoot(report.to);
+      }
+      for (const f of report.references?.files ?? []) {
+        f.path = stripRoot(f.path);
+      }
+      for (const e of report.errors ?? []) {
+        e.path = stripRoot(e.path);
+      }
+      return report;
+    },
+
+    /**
+     * Subscribe to filesystem change events over the dev server's SSE stream. Listens for the named
+     * "fs" event (the preview iframe's default `onmessage` ignores it), strips paths to
+     * project-relative, and drops events for sibling projects outside the active root.
+     */
+    subscribeFileEvents(handler: (events: FsEvent[]) => void) {
+      if (typeof EventSource === "undefined") {
+        return () => {};
+      }
+      const es = new EventSource("/__reload");
+      es.addEventListener("fs", (ev: MessageEvent) => {
+        let payload: { events?: FsEvent[] };
+        try {
+          payload = JSON.parse(ev.data as string) as { events?: FsEvent[] };
+        } catch {
+          return;
+        }
+        const events: FsEvent[] = [];
+        for (const e of payload.events ?? []) {
+          const raw = e.path.replaceAll("\\", "/");
+          if (_projectRoot && raw !== _projectRoot && !raw.startsWith(`${_projectRoot}/`)) {
+            continue;
+          }
+          const path = stripRoot(raw);
+          if (path && !path.startsWith("..")) {
+            events.push({ isDir: e.isDir, path, type: e.type });
+          }
+        }
+        if (events.length > 0) {
+          handler(events);
+        }
+      });
+      return () => {
+        es.close();
+      };
     },
 
     /** @param {string} _path */

package/src/studio.ts

@@ -59,8 +59,10 @@ import {
   openFileInTab,
   openHomePage,
   registerFileTreeDnD,
+  reloadCleanTab,
   setupTreeKeyboard,
 } from "./files/files";
+import { startFsSync } from "./files/fs-events";
 import { renderImportsTemplate } from "./panels/imports-panel";
 import { renderHeadTemplate } from "./panels/head-panel";
 import { exportCemManifest as _exportCemManifest } from "./services/cem-export";
@@ -506,6 +508,13 @@ function safeRenderRightPanel() {
 // Now that renderers are registered, bootstrap
 registerFunctionCompletions();
 
+let fsUnsub: (() => void) | null = null;
+/** (Re)subscribe the sidebar to backend filesystem events for the active project. */
+function ensureFsSync() {
+  fsUnsub?.();
+  fsUnsub = startFsSync({ onContentChange: reloadCleanTab, renderLeftPanel });
+}
+
 const _urlParams = new URLSearchParams(location.search);
 const _projectParam = _urlParams.get("project") || _urlParams.get("open");
 
@@ -646,6 +655,7 @@ if (_projectParam) {
   // Normal mode: probe for project at server root
   void loadProject();
   render();
+  ensureFsSync();
 }
 
 // ─── Left panel: delegated to panels/left-panel.js ───────────────────────────
@@ -657,11 +667,13 @@ function renderLeftPanel() {
 function loadProject() {
   return _loadProject();
 }
-function openProject() {
-  return _openProject({
+async function openProject() {
+  const result = await _openProject({
     renderActivityBar: () => renderActivityBar(),
     renderLeftPanel,
   });
+  ensureFsSync();
+  return result;
 }
 async function openRecentProject(root: string) {
   try {
@@ -728,6 +740,7 @@ async function openRecentProject(root: string) {
     statusMessage(`Opened project: ${requireProjectState().name}`);
 
     await openHomePage();
+    ensureFsSync();
   } catch (error) {
     statusMessage(`Error: ${errorMessage(error)}`);
   }

package/src/types.ts

@@ -69,6 +69,30 @@ export interface DirEntry {
   modified?: string;
 }
 
+/** A filesystem change pushed from the backend (project-relative, forward-slashed path). */
+export interface FsEvent {
+  type: "add" | "change" | "unlink" | "addDir" | "unlinkDir";
+  path: string;
+  isDir: boolean;
+}
+
+/** Result of a rename, including the references rewritten across the project (refactor report). */
+export interface RenameResult {
+  ok: boolean;
+  from: string;
+  to: string;
+  isDir?: boolean;
+  references?: {
+    filesChanged: number;
+    refsUpdated: number;
+    files: { path: string; count: number }[];
+  };
+  errors?: { path: string; error: string }[];
+  tag?: { from: string; to: string; filesChanged: number; refsUpdated: number };
+  tagSkipped?: string;
+  error?: string;
+}
+
 export interface StudioPlatform {
   id: string;
   projectRoot: string;
@@ -90,8 +114,13 @@ export interface StudioPlatform {
   writeFile: (path: string, content: string) => Promise<void>;
   uploadFile: (path: string, data: string | File | Blob | ArrayBuffer) => Promise<unknown>;
   deleteFile: (path: string) => Promise<void>;
-  renameFile: (from: string, to: string) => Promise<void>;
+  renameFile: (from: string, to: string) => Promise<RenameResult>;
   createDirectory: (path: string) => Promise<void>;
+  /**
+   * Subscribe to backend filesystem change events for the active project. Returns an unsubscribe
+   * function. Optional: platforms without a watcher omit it and the sidebar stays manual-refresh.
+   */
+  subscribeFileEvents?: (handler: (events: FsEvent[]) => void) => () => void;
   discoverComponents: (dir?: string) => Promise<ComponentMeta[]>;
   addPackage: (name: string) => Promise<unknown>;
   removePackage: (name: string) => Promise<unknown>;

package/src/ui/panel-resize.ts

@@ -16,6 +16,11 @@ const DEFAULT_RIGHT = 280;
 
 const root = document.documentElement;
 
+/** Read a px-valued CSS custom property as a number (e.g. "320px" → 320). */
+function readPxVar(cssVar: string): number {
+  return Number(getComputedStyle(root).getPropertyValue(cssVar).replace(/px$/, ""));
+}
+
 // ─── Restore saved widths & collapse state ──────────────────────────────────
 
 try {
@@ -68,8 +73,7 @@ function setupHandle(
     handle.classList.add("dragging");
     document.body.style.userSelect = "none";
 
-    const current =
-      Number.parseInt(getComputedStyle(root).getPropertyValue(cssVar), 10) || defaultWidth;
+    const current = readPxVar(cssVar) || defaultWidth;
     drag = { startWidth: current, startX: e.clientX };
   });
 
@@ -105,11 +109,8 @@ function setupHandle(
 }
 
 function persistWidths() {
-  const left =
-    Number.parseInt(getComputedStyle(root).getPropertyValue("--panel-w-left"), 10) || DEFAULT_LEFT;
-  const right =
-    Number.parseInt(getComputedStyle(root).getPropertyValue("--panel-w-right"), 10) ||
-    DEFAULT_RIGHT;
+  const left = readPxVar("--panel-w-left") || DEFAULT_LEFT;
+  const right = readPxVar("--panel-w-right") || DEFAULT_RIGHT;
   try {
     localStorage.setItem(STORAGE_KEY, JSON.stringify({ left, right }));
   } catch {

package/src/ui/unit-selector.ts

@@ -44,6 +44,9 @@ export function renderUnitSelector(
   } else if (match) {
     displayValue = match[1]!;
   } else if (strVal !== "") {
+    // Intentional partial parse: shorthand like "10px 20px" displays its leading number.
+    // Number() yields NaN for those, so Number.parseFloat stays (see unit-selector tests).
+    // oxlint-disable-next-line unicorn/prefer-number-coercion
     const num = Number.parseFloat(strVal);
     displayValue = Number.isNaN(num) ? strVal : String(num);
   } else {

package/src/utils/canvas-media.ts

@@ -25,15 +25,15 @@ export function parseMediaEntries(mediaDef?: Record<string, string> | null) {
   for (const [name, query] of Object.entries(mediaDef)) {
     if (name === "--") {
       const wm = String(query).match(/^(\d+)\s*px$/);
-      baseWidth = wm ? Number.parseFloat(wm[1]!) : 320;
+      baseWidth = wm ? Number(wm[1]!) : 320;
       continue;
     }
     const minMatch = query.match(/min-width:\s*([\d.]+)px/);
     const maxMatch = query.match(/max-width:\s*([\d.]+)px/);
     if (minMatch) {
-      sizes.push({ name, query, type: "min", width: Number.parseFloat(minMatch[1]!) });
+      sizes.push({ name, query, type: "min", width: Number(minMatch[1]!) });
     } else if (maxMatch) {
-      sizes.push({ name, query, type: "max", width: Number.parseFloat(maxMatch[1]!) });
+      sizes.push({ name, query, type: "max", width: Number(maxMatch[1]!) });
     } else {
       features.push({ name, query });
     }