{activity.referenced ? '★' : activity.active ? '●' : '○'}
@@ -90,7 +90,7 @@ export default function SensorList({
key={id}
hub={hub}
id={id}
- badge={groupFor ? null : badgeFor?.(id) ?? null}
+ badge={groupFor ? null : (badgeFor?.(id) ?? null)}
activity={activityFor?.(id) ?? null}
/>
))}
diff --git a/client/src/lib/widgets/ThemePreview.tsx b/client/src/lib/widgets/ThemePreview.tsx
index 07b2ba2..d080ee7 100644
--- a/client/src/lib/widgets/ThemePreview.tsx
+++ b/client/src/lib/widgets/ThemePreview.tsx
@@ -4,7 +4,7 @@
// injects into the studio document, so editing a token (or switching theme) restyles the preview
// live, exactly as it will the overlay. Kept dependency-light (no spectrum/now-playing) so it needs
// no extra context. Co-located test in ThemePreview.test.tsx.
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
import { createTelemetryHub, type SensorSample, type TelemetryHub } from '../core/telemetry';
import { createWidget } from '../core/widget';
import type { WidgetInstance } from '../core/layout';
@@ -46,9 +46,10 @@ function build(
}
export default function ThemePreview() {
+ // new Date()/Date.now() is fine in a live component (only the screenshot gallery freezes the clock);
+ // seeded once at mount via lazy state so the render body stays pure.
+ const [now] = useState(() => Date.now());
const { hub, items } = useMemo(() => {
- // new Date() is fine in a live component (only the screenshot gallery freezes the clock).
- const now = Date.now();
return {
hub: seedHub(now),
items: [
@@ -60,7 +61,7 @@ export default function ThemePreview() {
build('button', 'tp-btn', 90, 38, undefined, { label: 'tap' })
]
};
- }, []);
+ }, [now]);
return (
diff --git a/client/src/lib/widgets/WidgetHost.tsx b/client/src/lib/widgets/WidgetHost.tsx
index e8fbb5c..890f25d 100644
--- a/client/src/lib/widgets/WidgetHost.tsx
+++ b/client/src/lib/widgets/WidgetHost.tsx
@@ -341,8 +341,8 @@ function WidgetHost({
style={
flow
? // Slot mode (CSS layout): fill the FlowNode slot that owns position/size; only the
- // live drag ghost is applied here.
- { width: '100%', height: '100%', transform: `translate(${ghost.dx}px, ${ghost.dy}px)` }
+ // live drag ghost is applied here.
+ { width: '100%', height: '100%', transform: `translate(${ghost.dx}px, ${ghost.dy}px)` }
: {
left: `${rect.x}px`,
top: `${rect.y}px`,
@@ -351,7 +351,7 @@ function WidgetHost({
width: contentSize ? 'max-content' : `${rect.w}px`,
height: contentSize ? 'max-content' : `${rect.h}px`,
transform: `translate(${ghost.dx}px, ${ghost.dy}px)`
- }
+ }
}
data-w={domId}
data-type={instance.type}
diff --git a/client/src/lib/widgets/WidgetPreview.tsx b/client/src/lib/widgets/WidgetPreview.tsx
index 779004b..7692bf2 100644
--- a/client/src/lib/widgets/WidgetPreview.tsx
+++ b/client/src/lib/widgets/WidgetPreview.tsx
@@ -4,7 +4,7 @@
// preview matches how it renders on the canvas, theme tokens and all. A tree is drawn at its native
// size and scaled to fit the box. Self-sourcing / bespoke widgets that need the backend (now-playing,
// spectrum, HA…) just render their idle state here, which still previews their chrome.
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
import { createTelemetryHub, type SensorSample, type TelemetryHub } from '../core/telemetry';
import { createWidget } from '../core/widget';
import { leaf, type LayoutNode, type WidgetInstance } from '../core/layoutTree';
@@ -73,7 +73,9 @@ type Props = {
};
export default function WidgetPreview({ type, node, size, w = 200, h = 120 }: Props) {
- const hub = useMemo(() => seedHub(Date.now()), []);
+ // Seed the demo clock once at mount via lazy state, keeping Date.now() (impure) out of render.
+ const [now] = useState(() => Date.now());
+ const hub = useMemo(() => seedHub(now), [now]);
// Normalise to a (tree, native-size) pair: a type becomes a one-leaf tree at the box size (scale 1);
// a def/template tree keeps its authored size and is scaled to fit.
const { tree, nat } = useMemo<{ tree: LayoutNode | null; nat: { w: number; h: number } }>(() => {
diff --git a/client/src/lib/widgets/canvas/alignControls.ts b/client/src/lib/widgets/canvas/alignControls.ts
index a89479b..77db5fe 100644
--- a/client/src/lib/widgets/canvas/alignControls.ts
+++ b/client/src/lib/widgets/canvas/alignControls.ts
@@ -79,14 +79,14 @@ export function containerAlignControls(c: Container): AlignControl[] {
field: 'justify',
value: c.justify ?? 'start',
options: optionsFor('horizontal', 'justify')
- }
+ }
: {
axis: 'horizontal',
label: 'Horizontal',
field: 'align',
value: c.align ?? 'stretch',
options: optionsFor('horizontal', 'align')
- };
+ };
const vertical: AlignControl = mainHorizontal
? {
axis: 'vertical',
@@ -94,14 +94,14 @@ export function containerAlignControls(c: Container): AlignControl[] {
field: 'align',
value: c.align ?? 'stretch',
options: optionsFor('vertical', 'align')
- }
+ }
: {
axis: 'vertical',
label: 'Vertical',
field: 'justify',
value: c.justify ?? 'start',
options: optionsFor('vertical', 'justify')
- };
+ };
return [horizontal, vertical];
}
diff --git a/client/src/lib/widgets/canvas/editorOps.ts b/client/src/lib/widgets/canvas/editorOps.ts
index bd35c2f..c782907 100644
--- a/client/src/lib/widgets/canvas/editorOps.ts
+++ b/client/src/lib/widgets/canvas/editorOps.ts
@@ -294,7 +294,7 @@ export function splitNode(
gap: node.gap,
pad: node.pad,
justify: node.justify
- })
+ })
: null;
let patch: Partial;
if (dir === 'grid') {
@@ -381,7 +381,7 @@ export function patchContainerOp(s: EditorState, id: string, patch: Partial ({ ...n, children: (n as Container).children.slice(0, cap) } as LayoutNode)
+ (n) => ({ ...n, children: (n as Container).children.slice(0, cap) }) as LayoutNode
);
}
}
@@ -406,7 +406,7 @@ export function setNodeBasis(s: EditorState, id: string, basis: Length | undefin
export function setNodeBases(s: EditorState, entries: { id: string; basis: Length }[]): Patch {
let root = s.monitor.root;
for (const { id, basis } of entries) {
- root = updateNode(root, id, (n) => ({ ...n, basis } as LayoutNode));
+ root = updateNode(root, id, (n) => ({ ...n, basis }) as LayoutNode);
}
return { monitor: { ...s.monitor, root } };
}
diff --git a/client/src/lib/widgets/canvas/menuPreview.ts b/client/src/lib/widgets/canvas/menuPreview.ts
index 4f9612f..c9856ed 100644
--- a/client/src/lib/widgets/canvas/menuPreview.ts
+++ b/client/src/lib/widgets/canvas/menuPreview.ts
@@ -49,10 +49,11 @@ function splitRegions(
rows,
gap,
pad,
- children: Array.from(
- { length: cols * rows },
- (_, i): Container => ({ id: `__pc${i}`, kind: 'col', children: [] })
- )
+ children: Array.from({ length: cols * rows }, (_, i): Container => ({
+ id: `__pc${i}`,
+ kind: 'col',
+ children: []
+ }))
};
return gridCellRects(synthetic, box);
}
diff --git a/client/src/lib/widgets/canvas/setTokens.test.ts b/client/src/lib/widgets/canvas/setTokens.test.ts
index c1b647a..2363199 100644
--- a/client/src/lib/widgets/canvas/setTokens.test.ts
+++ b/client/src/lib/widgets/canvas/setTokens.test.ts
@@ -3,7 +3,7 @@ import { setTokens } from './editorOps';
// setTokens only reads `tokenOverrides`, so a minimal partial state suffices.
const state = (tokenOverrides: Record = {}) =>
- ({ tokenOverrides } as unknown as Parameters[0]);
+ ({ tokenOverrides }) as unknown as Parameters[0];
describe('setTokens op (wallpaper auto-theme)', () => {
it('merges a whole map over the existing overrides', () => {
diff --git a/client/src/lib/widgets/canvas/useBackground.test.ts b/client/src/lib/widgets/canvas/useBackground.test.ts
index 51ef3aa..9e68f18 100644
--- a/client/src/lib/widgets/canvas/useBackground.test.ts
+++ b/client/src/lib/widgets/canvas/useBackground.test.ts
@@ -16,7 +16,7 @@ vi.mock('../../overlay', () => ({
import { useBackground } from './useBackground';
const monitor = (over: Partial = {}): MonitorLayout =>
- ({ root: {}, floating: [], ...over } as MonitorLayout);
+ ({ root: {}, floating: [], ...over }) as MonitorLayout;
beforeEach(() => {
listWallpapers.mockResolvedValue(['a.png', 'b.mp4']);
diff --git a/client/src/lib/widgets/canvas/useCanvasPointer.test.ts b/client/src/lib/widgets/canvas/useCanvasPointer.test.ts
index 15efcdd..7b0fb5a 100644
--- a/client/src/lib/widgets/canvas/useCanvasPointer.test.ts
+++ b/client/src/lib/widgets/canvas/useCanvasPointer.test.ts
@@ -47,7 +47,7 @@ const ev = (o: Over) =>
target: canvasEl,
preventDefault: () => undefined,
...o
- } as unknown as React.MouseEvent);
+ }) as unknown as React.MouseEvent;
// Release any window listeners a pan/marquee attached, and reset transient state between cases.
function release() {
@@ -55,7 +55,7 @@ function release() {
}
const rend = (selectId: string, rect: { x: number; y: number; w: number; h: number }): Renderable =>
- ({ selectId, rect } as unknown as Renderable);
+ ({ selectId, rect }) as unknown as Renderable;
afterEach(() => {
release();
diff --git a/client/src/lib/widgets/canvas/useCanvasPointer.ts b/client/src/lib/widgets/canvas/useCanvasPointer.ts
index 13ea957..0c1d614 100644
--- a/client/src/lib/widgets/canvas/useCanvasPointer.ts
+++ b/client/src/lib/widgets/canvas/useCanvasPointer.ts
@@ -64,6 +64,9 @@ export function useCanvasPointer(deps: CanvasPointerDeps): CanvasPointer {
const marqueeStart = useRef<{ x: number; y: number } | null>(null);
const marqueeAdditive = useRef(false);
const panStart = useRef<{ x: number; y: number; panX: number; panY: number } | null>(null);
+ // The live marquee rect, tracked in a ref (written by the mousedown/mousemove handlers alongside
+ // setMarquee) so onMarqueeUp reads the final rect without touching the ref during render.
+ const marqueeCurrent = useRef(null);
// canvas-relative coords (undo the rail inset).
const toCanvas = useCallback(
@@ -98,12 +101,18 @@ export function useCanvasPointer(deps: CanvasPointerDeps): CanvasPointer {
},
[deps]
);
- const onPanUp = useCallback(() => {
- window.removeEventListener('mousemove', onPanMove);
- window.removeEventListener('mouseup', onPanUp);
- panStart.current = null;
- setPanning(false);
- }, [onPanMove]);
+ // Named function expression so the removeEventListener can reference the handler via its own
+ // in-scope name (the same fn object addEventListener registered) instead of the outer const —
+ // which the compiler would flag as "accessed before it is declared".
+ const onPanUp = useCallback(
+ function onPanUp() {
+ window.removeEventListener('mousemove', onPanMove);
+ window.removeEventListener('mouseup', onPanUp);
+ panStart.current = null;
+ setPanning(false);
+ },
+ [onPanMove]
+ );
const startPan = useCallback(
(event: React.MouseEvent) => {
const p = deps.pan();
@@ -121,37 +130,40 @@ export function useCanvasPointer(deps: CanvasPointerDeps): CanvasPointer {
const start = marqueeStart.current;
if (!start) return;
const p = toCanvas(event.clientX, event.clientY);
- setMarquee({
+ const rect: Rect = {
x: Math.min(p.x, start.x),
y: Math.min(p.y, start.y),
w: Math.abs(p.x - start.x),
h: Math.abs(p.y - start.y)
- });
+ };
+ marqueeCurrent.current = rect; // keep the ref in step with state (both set here, off-render)
+ setMarquee(rect);
},
[toCanvas]
);
- const onMarqueeUp = useCallback(() => {
- window.removeEventListener('mousemove', onMarqueeMove);
- window.removeEventListener('mouseup', onMarqueeUp);
- const m = marqueeCurrent.current;
- setMarquee(null);
- marqueeStart.current = null;
- if (!m || (m.w < 3 && m.h < 3)) return; // a click, not a drag → leave selection as cleared
- const a = canvasToWorld(m.x, m.y);
- const b = canvasToWorld(m.x + m.w, m.y + m.h);
- const box: Rect = { x: a.x, y: a.y, w: b.x - a.x, h: b.y - a.y };
- const { ids, primary } = marqueeSelection(
- deps.renderables(),
- box,
- marqueeAdditive.current,
- deps.selectedIds()
- );
- deps.setSelection(ids, primary);
- }, [onMarqueeMove, canvasToWorld, deps]);
-
- // Mirror the live marquee into a ref so onMarqueeUp reads the final rect (it set state async).
- const marqueeCurrent = useRef(null);
- marqueeCurrent.current = marquee;
+ // Named function expression (see onPanUp) so removeEventListener can reference the handler itself.
+ const onMarqueeUp = useCallback(
+ function onMarqueeUp() {
+ window.removeEventListener('mousemove', onMarqueeMove);
+ window.removeEventListener('mouseup', onMarqueeUp);
+ const m = marqueeCurrent.current;
+ setMarquee(null);
+ marqueeStart.current = null;
+ marqueeCurrent.current = null;
+ if (!m || (m.w < 3 && m.h < 3)) return; // a click, not a drag → leave selection as cleared
+ const a = canvasToWorld(m.x, m.y);
+ const b = canvasToWorld(m.x + m.w, m.y + m.h);
+ const box: Rect = { x: a.x, y: a.y, w: b.x - a.x, h: b.y - a.y };
+ const { ids, primary } = marqueeSelection(
+ deps.renderables(),
+ box,
+ marqueeAdditive.current,
+ deps.selectedIds()
+ );
+ deps.setSelection(ids, primary);
+ },
+ [onMarqueeMove, canvasToWorld, deps]
+ );
const onCanvasMouseDown = useCallback(
(event: React.MouseEvent) => {
@@ -195,7 +207,9 @@ export function useCanvasPointer(deps: CanvasPointerDeps): CanvasPointer {
const additive = hit.id === 'studio.marqueeAdd';
const p = toCanvas(event.clientX, event.clientY);
marqueeStart.current = p;
- setMarquee({ x: p.x, y: p.y, w: 0, h: 0 });
+ const rect: Rect = { x: p.x, y: p.y, w: 0, h: 0 };
+ marqueeCurrent.current = rect; // seed the ref so a click (no move) reads {w:0,h:0}
+ setMarquee(rect);
marqueeAdditive.current = additive;
if (!additive) deps.clearSelection();
window.addEventListener('mousemove', onMarqueeMove);
diff --git a/client/src/lib/widgets/canvas/useDefEditor.ts b/client/src/lib/widgets/canvas/useDefEditor.ts
index 9e990a9..b1c2bc0 100644
--- a/client/src/lib/widgets/canvas/useDefEditor.ts
+++ b/client/src/lib/widgets/canvas/useDefEditor.ts
@@ -3,7 +3,7 @@
// blocks switching widgets from the list while one is already open. The def-edit MODE itself
// (enterDefEdit / endDefEdit / preview) lives in the editor model's reducer — this hook is just
// the studio-bar/list-side wrappers plus the rename/delete prompts around handleOp.
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
import type { LayoutOp } from '../ops';
import { defInUse, type EditorModel } from './useEditorModel';
import type { EditorState } from './types';
@@ -39,11 +39,14 @@ export function useDefEditor({
dispatch,
handleOp
}: Deps): DefEditor {
- // Latest values for the stable callbacks (read synchronously — no stale closure).
+ // Latest values for the stable callbacks (read in event handlers — no stale closure). Mirrored in
+ // a commit effect (not during render); the callbacks only read these later, from user actions.
const editingDefIdRef = useRef(editingDefId);
- editingDefIdRef.current = editingDefId;
const previewingRef = useRef(previewing);
- previewingRef.current = previewing;
+ useEffect(() => {
+ editingDefIdRef.current = editingDefId;
+ previewingRef.current = previewing;
+ });
const foldOpenDef = useCallback(() => {
// A read-only preview is discarded (endPreview); a real def edit is folded back (endDefEdit).
diff --git a/client/src/lib/widgets/canvas/useEditorModel.ts b/client/src/lib/widgets/canvas/useEditorModel.ts
index 9da96d9..5f55d4e 100644
--- a/client/src/lib/widgets/canvas/useEditorModel.ts
+++ b/client/src/lib/widgets/canvas/useEditorModel.ts
@@ -439,7 +439,7 @@ function reduceDefEdit(state: EditorState, action: DefEditAction): EditorState {
? {
...state.library,
defs: state.library.defs.map((d) => (d.id === editingDefId ? { ...d, child } : d))
- }
+ }
: state.library;
let next: EditorState = {
...state,
diff --git a/client/src/lib/widgets/canvas/useKeyboard.ts b/client/src/lib/widgets/canvas/useKeyboard.ts
index 7bb3dc1..9cf313f 100644
--- a/client/src/lib/widgets/canvas/useKeyboard.ts
+++ b/client/src/lib/widgets/canvas/useKeyboard.ts
@@ -54,8 +54,11 @@ export function useKeyboard(deps: KeyboardDeps): {
setSpaceDown(v);
};
// Hold deps in a ref so the window listeners stay stable (registered once) but read latest.
+ // Mirrored in a commit effect (before the mount effect below only reads d.current from listeners).
const d = useRef(deps);
- d.current = deps;
+ useEffect(() => {
+ d.current = deps;
+ });
useEffect(() => {
const onKeydown = (event: KeyboardEvent) => {
diff --git a/client/src/lib/widgets/canvas/usePaneSizes.ts b/client/src/lib/widgets/canvas/usePaneSizes.ts
index 6448491..652b745 100644
--- a/client/src/lib/widgets/canvas/usePaneSizes.ts
+++ b/client/src/lib/widgets/canvas/usePaneSizes.ts
@@ -4,7 +4,14 @@
// from localStorage, exposes them as inline vars (overriding the CSS defaults), and drives a divider
// drag. Persisted per-machine (a UI pref, not part of the portable widgets.json). The drag math is
// pure (clampPane / applyDelta) and unit-tested in usePaneSizes.test.ts.
-import { useCallback, useRef, useState, type CSSProperties, type PointerEvent } from 'react';
+import {
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+ type CSSProperties,
+ type PointerEvent
+} from 'react';
import { readJson, writeJson } from '../../../stores/persist';
@@ -50,8 +57,11 @@ export type PaneSizing = {
export function usePaneSizes(studio: boolean): PaneSizing {
const [sizes, setSizes] = useState(() => (studio ? load() : PANE_DEFAULTS));
+ // Mirror the latest sizes for the pointer handlers (startResize / onUp read it later, off-render).
const sizesRef = useRef(sizes);
- sizesRef.current = sizes;
+ useEffect(() => {
+ sizesRef.current = sizes;
+ });
const startResize = useCallback((edge: Edge, e: PointerEvent) => {
e.preventDefault();
@@ -75,7 +85,7 @@ export function usePaneSizes(studio: boolean): PaneSizing {
'--rail-l': `${sizes.railL}px`,
'--rail-r': `${sizes.railR}px`,
'--tree-w': `${sizes.treeW}px`
- } as CSSProperties)
+ } as CSSProperties)
: {};
return { vars, startResize };
diff --git a/client/src/lib/widgets/canvas/usePersistence.ts b/client/src/lib/widgets/canvas/usePersistence.ts
index 4b8eefa..9148e6e 100644
--- a/client/src/lib/widgets/canvas/usePersistence.ts
+++ b/client/src/lib/widgets/canvas/usePersistence.ts
@@ -52,17 +52,21 @@ export function usePersistence(state: EditorState, myMonitor: string): Persisten
savedMonitor: state.savedMonitor,
studio: state.studio
});
- view.current = {
- myMonitor,
- monitor: state.monitor,
- library: state.library,
- selectedTheme: state.selectedTheme,
- themeLock: state.themeLock,
- tokenOverrides: state.tokenOverrides,
- editingDefId: state.editingDefId,
- savedMonitor: state.savedMonitor,
- studio: state.studio
- };
+ // Refresh the mirror in a commit effect (not during render); the debounced writer + Save read
+ // view.current later (via setTimeout / a button press), never synchronously in this render.
+ useEffect(() => {
+ view.current = {
+ myMonitor,
+ monitor: state.monitor,
+ library: state.library,
+ selectedTheme: state.selectedTheme,
+ themeLock: state.themeLock,
+ tokenOverrides: state.tokenOverrides,
+ editingDefId: state.editingDefId,
+ savedMonitor: state.savedMonitor,
+ studio: state.studio
+ };
+ });
// While editing a def we must fold the scoped editing tree back into the library before a
// write — but the library set is reducer-owned. The Canvas runs `endDefEdit`/save through the
diff --git a/client/src/lib/widgets/canvas/useSacks.test.ts b/client/src/lib/widgets/canvas/useSacks.test.ts
index acf0875..194511a 100644
--- a/client/src/lib/widgets/canvas/useSacks.test.ts
+++ b/client/src/lib/widgets/canvas/useSacks.test.ts
@@ -113,7 +113,7 @@ describe('refreshSacks (section-open peek)', () => {
theme: { name: 'Nord', css: 'x' },
tokens: { '--a': '1', '--b': '2' }
})
- )
+ )
: 'not a sack'
);
const { result } = setup({ navSection: 'sacks' });
diff --git a/client/src/lib/widgets/canvas/useSacks.ts b/client/src/lib/widgets/canvas/useSacks.ts
index 75fccc0..e3b8fb9 100644
--- a/client/src/lib/widgets/canvas/useSacks.ts
+++ b/client/src/lib/widgets/canvas/useSacks.ts
@@ -72,9 +72,11 @@ export function useSacks({
// Names + a peek inside each (count of defs, theme name, override count) so the Import list can
// say what a sack contains instead of a bare filename. Sacks are small local JSON; reading each
// on section-open is cheap. A file that doesn't parse still lists (widgets: null → "unreadable").
- const refreshSacks = useCallback(async () => {
+ // Pure I/O (no setState) so it can be awaited from an effect's async closure without the compiler
+ // treating it as a synchronous effect state update.
+ const loadSackInfos = useCallback(async (): Promise => {
const names = await listSacks();
- const infos = await Promise.all(
+ return Promise.all(
names.map(async (name): Promise => {
const raw = await readSack(name);
const sack = raw ? unpackSack(raw) : null;
@@ -87,8 +89,11 @@ export function useSacks({
};
})
);
- setSackInfos(infos);
}, []);
+ // Reload the list into state — used by event handlers (exportSack), not from an effect body.
+ const refreshSacks = useCallback(async () => {
+ setSackInfos(await loadSackInfos());
+ }, [loadSackInfos]);
const exportSack = useCallback(async () => {
if (editingDefId != null) {
@@ -166,10 +171,19 @@ export function useSacks({
[editingDefId, commitOp, setThemeList, adoptTheme]
);
- // Load the saved sacks (+ their summaries) when the Sacks section opens.
+ // Load the saved sacks (+ their summaries) when the Sacks section opens. setState lives in the
+ // async .then() (not the effect body), and a cancel guard drops a stale load if the section
+ // closes / the studio unmounts mid-flight.
useEffect(() => {
- if (studio && navSection === 'sacks') void refreshSacks();
- }, [studio, navSection, refreshSacks]);
+ if (!(studio && navSection === 'sacks')) return;
+ let cancelled = false;
+ void loadSackInfos().then((infos) => {
+ if (!cancelled) setSackInfos(infos);
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [studio, navSection, loadSackInfos]);
return { sackInfos, exportSack, importSack };
}
diff --git a/client/src/lib/widgets/canvas/useSplitters.test.ts b/client/src/lib/widgets/canvas/useSplitters.test.ts
index d006c94..ffca17b 100644
--- a/client/src/lib/widgets/canvas/useSplitters.test.ts
+++ b/client/src/lib/widgets/canvas/useSplitters.test.ts
@@ -195,7 +195,7 @@ describe('onSplitReset (double-click → even pair)', () => {
describe('onSplitKey (WCAG keyboard nudge)', () => {
const key = (k: string, shift = false) =>
- ({ key: k, shiftKey: shift, preventDefault: vi.fn() } as unknown as React.KeyboardEvent);
+ ({ key: k, shiftKey: shift, preventDefault: vi.fn() }) as unknown as React.KeyboardEvent;
// fr of child A after the n-th commit, run against a real row monitor.
const frA = (commitOp: ReturnType['commitOp'], call: number) => {
const patch = commitOp.mock.calls[call][0](stateWith(rowMonitor()));
diff --git a/client/src/lib/widgets/canvas/useStudioInit.ts b/client/src/lib/widgets/canvas/useStudioInit.ts
index c683b7a..9848e7a 100644
--- a/client/src/lib/widgets/canvas/useStudioInit.ts
+++ b/client/src/lib/widgets/canvas/useStudioInit.ts
@@ -38,9 +38,12 @@ export type StudioInitDeps = {
};
export function useStudioInit(deps: StudioInitDeps): void {
- // Hold deps in a ref so the mount effect reads the latest callbacks without re-running.
+ // Hold deps in a ref so the mount effect reads the latest callbacks without re-running. Mirrored in
+ // a commit effect (before the mount effect below, which only reads d.current from async callbacks).
const d = useRef(deps);
- d.current = deps;
+ useEffect(() => {
+ d.current = deps;
+ });
useEffect(() => {
let cancelled = false;
@@ -201,7 +204,7 @@ export function useStudioInit(deps: StudioInitDeps): void {
stopDisplayWatch?.();
d.current.clearPreviewWrite();
};
- // Run once on mount (non-idempotent). eslint-disable to keep the empty dep list intentional.
- // eslint-disable-next-line react-hooks/exhaustive-deps
+ // Run once on mount (non-idempotent). The body reads only the stable `d` ref, so the empty dep
+ // list is intentional and needs no exhaustive-deps suppression.
}, []);
}
diff --git a/client/src/lib/widgets/canvas/useThemes.ts b/client/src/lib/widgets/canvas/useThemes.ts
index 60bf527..e244817 100644
--- a/client/src/lib/widgets/canvas/useThemes.ts
+++ b/client/src/lib/widgets/canvas/useThemes.ts
@@ -63,8 +63,11 @@ export function useThemes({ studio, selectedTheme, dispatch, commitOp }: Deps):
const [userThemeSwatches, setUserThemeSwatches] = useState>({});
// applyTheme reads the latest selectedTheme via a ref (it's called from listeners + after sets).
+ // Mirrored in a commit effect (not during render); every read happens later, off-render.
const themeRef = useRef(selectedTheme);
- themeRef.current = selectedTheme;
+ useEffect(() => {
+ themeRef.current = selectedTheme;
+ });
const applyTheme = useCallback(async () => {
setThemeCss(await resolveThemeCss(themeRef.current));
diff --git a/client/src/lib/widgets/canvas/useZoomFit.test.ts b/client/src/lib/widgets/canvas/useZoomFit.test.ts
index 17f145b..2c20470 100644
--- a/client/src/lib/widgets/canvas/useZoomFit.test.ts
+++ b/client/src/lib/widgets/canvas/useZoomFit.test.ts
@@ -27,7 +27,7 @@ function makeCanvas(left = 0, top = 0): HTMLDivElement {
x: left,
y: top,
toJSON: () => ({})
- } as DOMRect);
+ }) as DOMRect;
document.body.appendChild(el);
return el;
}
diff --git a/client/src/lib/widgets/canvas/useZoomFit.ts b/client/src/lib/widgets/canvas/useZoomFit.ts
index 0b62ec3..7347d5d 100644
--- a/client/src/lib/widgets/canvas/useZoomFit.ts
+++ b/client/src/lib/widgets/canvas/useZoomFit.ts
@@ -33,14 +33,20 @@ export function useZoomFit(opts: {
const { studio, myMonitor, monSize, stageW, stageH, canvasRef } = opts;
const [pan, setPan] = useState({ panX: 0, panY: 0, zoom: 1 });
// Read the latest overrides without re-subscribing the native wheel listener (its effect deps stay
- // [studio, canvasRef]); a new overrides fn each render just updates the ref.
+ // [studio, canvasRef]); a new overrides fn each render just updates the ref (in a commit effect —
+ // the wheel listener reads it later).
const overridesRef = useRef(opts.overrides ?? NO_OVERRIDES);
- overridesRef.current = opts.overrides ?? NO_OVERRIDES;
+ useEffect(() => {
+ overridesRef.current = opts.overrides ?? NO_OVERRIDES;
+ });
// fit() reads the latest sizes via a ref so it's a stable callback (used by the Fit button + the
- // auto-fit effect) without re-subscribing.
+ // auto-fit effect) without re-subscribing. Mirrored in a commit effect declared BEFORE the auto-fit
+ // effect below, so sizes.current is fresh by the time that effect calls fit().
const sizes = useRef({ monSize, stageW, stageH });
- sizes.current = { monSize, stageW, stageH };
+ useEffect(() => {
+ sizes.current = { monSize, stageW, stageH };
+ });
const fit = useCallback(() => {
const { monSize: m, stageW: sw, stageH: sh } = sizes.current;
diff --git a/client/src/lib/widgets/meters/Countdown.tsx b/client/src/lib/widgets/meters/Countdown.tsx
index fe12252..acc55d5 100644
--- a/client/src/lib/widgets/meters/Countdown.tsx
+++ b/client/src/lib/widgets/meters/Countdown.tsx
@@ -2,7 +2,7 @@
// or runs an auto-cycling Pomodoro rhythm — both driven by the wall clock on a 1s tick, like Clock.
// Distinct from the manual Timer widget (which has start/pause controls). The time math is pure
// (core/countdown.ts); this just ticks and renders. BARE DOM, styled via --np-* / --cd-* tokens.
-import { useEffect, useRef, useState, type CSSProperties } from 'react';
+import { useEffect, useState, type CSSProperties } from 'react';
import {
formatCountdown,
parseTarget,
@@ -34,8 +34,9 @@ export default function Countdown({
}: Props) {
const [now, setNow] = useState(() => Date.now());
// Pomodoro anchor: when this widget mounted. The rhythm runs from here (resets on reload — fine for
- // a "where am I in the cycle" display; the manual Timer covers precise start/pause).
- const startRef = useRef(now);
+ // a "where am I in the cycle" display; the manual Timer covers precise start/pause). Seeded from the
+ // initial `now` and held in state so it stays stable across ticks without a during-render ref read.
+ const [start] = useState(now);
useEffect(() => {
const timer = setInterval(() => setNow(Date.now()), 1000);
@@ -49,7 +50,7 @@ export default function Countdown({
let phase: string;
if (mode === 'pomodoro') {
- const p = pomodoroAt(now - startRef.current, workMin * 60_000, breakMin * 60_000);
+ const p = pomodoroAt(now - start, workMin * 60_000, breakMin * 60_000);
value = formatCountdown(p.remainingMs, 'ms');
phase = p.phase; // 'work' | 'break'
sub = `${p.phase === 'work' ? 'Work' : 'Break'} · #${p.cycle}`;
diff --git a/client/src/lib/widgets/meters/CpuCoresCanvas.tsx b/client/src/lib/widgets/meters/CpuCoresCanvas.tsx
index f5ce519..07312cb 100644
--- a/client/src/lib/widgets/meters/CpuCoresCanvas.tsx
+++ b/client/src/lib/widgets/meters/CpuCoresCanvas.tsx
@@ -30,9 +30,12 @@ const DEFAULT_GAP = 4;
export default function CpuCoresCanvas(props: Props) {
const canvasRef = useRef(null);
- // Latest props read by the draw without re-subscribing the ResizeObserver.
+ // Latest props read by the draw without re-subscribing the ResizeObserver. Written in a commit
+ // effect (not during render) — the draw only reads it later from the ResizeObserver / telemetry tick.
const propsRef = useRef(props);
- propsRef.current = props;
+ useEffect(() => {
+ propsRef.current = props;
+ });
const draw = useCallback((): void => {
const canvas = canvasRef.current;
diff --git a/client/src/lib/widgets/meters/HaInput.tsx b/client/src/lib/widgets/meters/HaInput.tsx
index 21aba94..c8b4bf4 100644
--- a/client/src/lib/widgets/meters/HaInput.tsx
+++ b/client/src/lib/widgets/meters/HaInput.tsx
@@ -84,7 +84,7 @@ export default function HaInput({ value = null, label, onControl }: Props) {
min={a.min ?? 0}
max={a.max ?? 100}
step={a.step ?? 1}
- value={Number.isFinite(num) ? num : a.min ?? 0}
+ value={Number.isFinite(num) ? num : (a.min ?? 0)}
aria-label={`${name} value`}
onChange={(e) => {
const c = inputNumberSetValue(Number(e.currentTarget.value), a);
diff --git a/client/src/lib/widgets/meters/Iframe.tsx b/client/src/lib/widgets/meters/Iframe.tsx
index 28a39fe..dcc5b5a 100644
Binary files a/client/src/lib/widgets/meters/Iframe.tsx and b/client/src/lib/widgets/meters/Iframe.tsx differ
diff --git a/client/src/lib/widgets/meters/MonitorSourcesEditor.tsx b/client/src/lib/widgets/meters/MonitorSourcesEditor.tsx
index 1548afb..78a4fdd 100644
--- a/client/src/lib/widgets/meters/MonitorSourcesEditor.tsx
+++ b/client/src/lib/widgets/meters/MonitorSourcesEditor.tsx
@@ -19,20 +19,50 @@ export default function MonitorSourcesEditor({ value, monitor, onChange }: Props
const [detected, setDetected] = useState([]);
const [loading, setLoading] = useState(true);
- const scan = useCallback(async (): Promise => {
- setLoading(true);
+ // The DDC/CI probe (a Tauri call). Resolves to the chosen monitor's supported inputs — it does NOT
+ // touch state itself, so callers own when to apply the result (in a `.then` callback, never a
+ // synchronous setState in the effect body → no cascading setState-in-effect).
+ const scan = useCallback(async (): Promise => {
const list = await listMonitorInputs(monitor || undefined);
const target = monitor
? list.find((m) => m.gdi === monitor)
- : list.find((m) => m.primary) ?? list[0];
- setDetected(target?.supported ?? []);
- setLoading(false);
+ : (list.find((m) => m.primary) ?? list[0]);
+ return target?.supported ?? [];
}, [monitor]);
+ // Show the detecting state again when the chosen monitor changes — flagged during render
+ // (adjust-during-render, so it isn't a setState-in-effect); the effect below runs the probe.
+ const [prevMonitor, setPrevMonitor] = useState(monitor);
+ if (monitor !== prevMonitor) {
+ setPrevMonitor(monitor);
+ setLoading(true);
+ }
+
+ // Probe on mount and whenever the monitor (hence `scan`) changes; a stale in-flight probe is
+ // ignored so a fast monitor switch can't apply the wrong result. setState lives in the `.then`
+ // callback, keeping the effect body free of a synchronous setState.
useEffect(() => {
- void scan();
+ let cancelled = false;
+ void scan().then((supported) => {
+ if (cancelled) return;
+ setDetected(supported);
+ setLoading(false);
+ });
+ return () => {
+ cancelled = true;
+ };
}, [scan]);
+ // Manual rescan (button, so setState is a plain event-handler update): re-probe the same monitor,
+ // showing the detecting state meanwhile.
+ const rescan = (): void => {
+ setLoading(true);
+ void scan().then((supported) => {
+ setDetected(supported);
+ setLoading(false);
+ });
+ };
+
const rows = sourceEditorRows(detected, value);
const emit = (next: SourceEditorRow[]): void => onChange(buildSourceSpec(next));
const toggle = (i: number): void =>
@@ -47,12 +77,7 @@ export default function MonitorSourcesEditor({ value, monitor, onChange }: Props
{loading ? 'detecting inputs…' : `${rows.length} input${rows.length === 1 ? '' : 's'}`}
-