Consistency polish from the audit (§2.4, §2.7, harness wording)

- HighlightContextMenu now uses shared clampMenuPosition with the same
  measure-then-show pattern as SlideContextMenu
- added previewSlideSettings() alongside the project/highlight helpers
  and routed every raw ui.previewSlides.get / ui.previewProject read
  (SlideTimingSliders, effective-settings, CodeEditor) through the
  helper layer
- SaveRaceHarness keeps the prefix mode (it characterizes the pre-fix
  bug by design); stale React-era comments in the harness, toast mock
  and typing suite now describe the pre-migration wiring instead

Author: codewiththiha

src/features/editor/CodeEditor.svelte

@@ -15,6 +15,7 @@
     type Project,
   } from "$lib/types";
   import { ui } from "$lib/stores/ui-state.svelte";
+  import { previewProjectSetting } from "@/features/settings/preview-settings";
   import HighlightContextMenu from "@/features/highlights/HighlightContextMenu.svelte";
   import { untrack } from "svelte";
   import { createCodeEditorState } from "./code-editor-state.svelte";
@@ -73,7 +74,7 @@
 
   const rawEditorFontSize = $derived(project.settings.editorFontSize || 14);
   const editorFontSize = $derived(
-    ui.previewProject.editorFontSize ?? rawEditorFontSize,
+    previewProjectSetting("editorFontSize") ?? rawEditorFontSize,
   );
   const lineHeight = 1.55;
   const lineCount = $derived(Math.max(1, code.split("\n").length));

src/features/editor/SlideTimingSliders.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import {
-    ui,
     setPreviewProjectSetting,
     setPreviewSlideSetting,
   } from "$lib/stores/ui-state.svelte";
+  import {
+    previewProjectSettings,
+    previewSlideSettings,
+  } from "@/features/settings/preview-settings";
   import {
     updateProjectSettingsMutation,
     updateSlideSettingsMutation,
@@ -19,8 +22,8 @@
   const settingsMutation = updateSlideSettingsMutation(projectId);
   const projectSettingsMutation = updateProjectSettingsMutation(projectId);
 
-  const previewProject = $derived(ui.previewProject);
-  const previewSlide = $derived(ui.previewSlides.get(slide.id));
+  const previewProject = $derived(previewProjectSettings());
+  const previewSlide = $derived(previewSlideSettings(slide.id));
   const globalTransitionEnabled = $derived(
     project.settings.useGlobalTransition,
   );

src/features/highlights/HighlightContextMenu.svelte

@@ -8,6 +8,7 @@
   import { Highlighter as HighlightIcon, X } from "@lucide/svelte";
   import { Z_INDEX } from "$lib/ui/Overlay.svelte";
   import { pop } from "$lib/ui/transitions/pop";
+  import { clampMenuPosition } from "$lib/lib/menu-position";
 
   let {
     visible,
@@ -17,23 +18,47 @@
   }: {
     /** Whether the menu is visible */
     visible: boolean;
-    /** Position where the menu should appear */
+    /** Pointer point (client coordinates) */
     position: { x: number; y: number };
     /** Callback when "Add Highlight" is clicked */
     onAddHighlight: () => void;
     /** Callback to close the menu */
     onClose: () => void;
   } = $props();
+
+  let menuEl = $state<HTMLDivElement | null>(null);
+  let resolved = $state({ x: -9999, y: -9999 });
+  let positioned = $state(false);
+
+  // Measure-then-show before paint (same as SlideContextMenu): keeps the
+  // menu inside the viewport without a flash at the raw click point.
+  $effect(() => {
+    if (!visible || !menuEl) return;
+    void position.x;
+    void position.y;
+    positioned = false;
+    const rect = menuEl.getBoundingClientRect();
+    resolved = clampMenuPosition({
+      x: position.x,
+      y: position.y,
+      width: rect.width,
+      height: rect.height,
+    });
+    positioned = true;
+  });
 </script>
 
 {#if visible}
   <div
+    bind:this={menuEl}
     use:clickOutside={{ onOutside: onClose, delayMs: 50 }}
     use:escapeKey={{ onEscape: onClose, delayMs: 50 }}
     class="fixed min-w-[180px] rounded-lg border border-border/80 bg-card/95 py-1 shadow-xl backdrop-blur-md"
     role="menu"
     aria-label="Highlight actions"
-    style="left: {position.x}px; top: {position.y}px; z-index: {Z_INDEX.contextMenu};"
+    style="left: {resolved.x}px; top: {resolved.y}px; z-index: {Z_INDEX.contextMenu}; opacity: {positioned
+      ? 1
+      : 0};"
     transition:pop={{}}
   >
     <button

src/features/settings/effective-settings.svelte.ts

@@ -1,16 +1,17 @@
-import { ui } from "$lib/stores/ui-state.svelte";
 import type { Project, Slide } from "$lib/types";
+import {
+  previewProjectSettings,
+  previewSlideSettings,
+} from "./preview-settings";
 
 export function createEffectiveSettings(
   project: () => Project,
   slide?: () => Slide | undefined,
 ) {
   const settings = $derived(project().settings);
   const target = $derived(slide?.() ?? project().slides[0]);
-  const previewProject = $derived(ui.previewProject);
-  const previewSlide = $derived(
-    target ? ui.previewSlides.get(target.id) : undefined,
-  );
+  const previewProject = $derived(previewProjectSettings());
+  const previewSlide = $derived(previewSlideSettings(target?.id));
 
   const result = $derived.by(() => {
     const globalTransitionDuration =

src/features/settings/preview-settings.ts

@@ -5,7 +5,10 @@
  *   const fontSize = $derived(previewProjectSetting("fontSize") ?? project.settings.fontSize);
  */
 import { ui } from "$lib/stores/ui-state.svelte";
-import type { PreviewProjectSettings } from "$lib/stores/types";
+import type {
+  PreviewProjectSettings,
+  PreviewSlideSettings,
+} from "$lib/stores/types";
 import type { Highlight } from "$lib/types";
 
 export function previewProjectSettings(): PreviewProjectSettings {
@@ -18,6 +21,12 @@ export function previewProjectSetting<K extends keyof PreviewProjectSettings>(
   return ui.previewProject[key];
 }
 
+export function previewSlideSettings(
+  slideId: string | undefined,
+): PreviewSlideSettings | undefined {
+  return slideId ? ui.previewSlides.get(slideId) : undefined;
+}
+
 export function previewHighlightSettings(
   highlightId: string | undefined,
 ): Partial<Highlight> | undefined {

tests/codeeditor-typing.test.mts

@@ -13,8 +13,9 @@
  *
  * Svelte 5 port note: the mounted editor renders an UNCONTROLLED textarea
  * (value written once at mount; typing/save cycles never re-assign it from
- * code), which structurally removes the regression+teleport path the React
- * version had. These tests keep asserting that invariant end-to-end.
+ * code), which structurally removes the regression+teleport path the
+ * pre-migration controlled version had. These tests keep asserting that
+ * invariant end-to-end.
  */
 // MUST be the first import (installs document/window for the components).
 import "./helpers/jsdom-env.mts";

tests/harness/SaveRaceHarness.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
   /**
    * SaveRaceHarness — models the Svelte CodeEditor's value wiring for the
-   * save-race suite (the React-era harness did the same for the controlled
-   * React textarea). Mounted by tests/editor-save-race.test.mts.
+   * save-race suite. Mounted by tests/editor-save-race.test.mts.
    *
-   * mode "queued":  current wiring — UNCONTROLLED textarea (the Svelte editor
-   *                 never writes `value` programmatically after mount), local
-   *                 code shadow + the real queued updateSlideCodeMutation hook.
-   * mode "prefix":  characterization of the pre-fix bug — CONTROLLED-ish
-   *                 textarea (framework re-assigns value on every computed
-   *                 change, like the old React component did) + an unqueued
-   *                 save path with the exact onSuccess the pre-fix hook had.
+   * mode "queued":  current wiring — UNCONTROLLED textarea (the editor never
+   *                 writes `value` programmatically after mount), local code
+   *                 shadow + the real queued updateSlideCodeMutation hook.
+   * mode "prefix":  deliberate characterization of the pre-fix bug — a
+   *                 CONTROLLED-ish textarea (the harness re-assigns value on
+   *                 every computed change, like the pre-migration controlled
+   *                 editor did) + an unqueued save path with the exact
+   *                 onSuccess the pre-fix hook had. Kept on purpose: the
+   *                 suite asserts the bug stays dead across both wirings.
    */
   import { createQuery } from "@tanstack/svelte-query";
   import {

tests/mocks/toast.mock.mts

@@ -1,4 +1,4 @@
-/** Mock of src/lib/toast — the real one pulls in sonner/React components. */
+/** Mock of $lib/lib/toast — keeps the notify surface without the toast UI layer. */
 export const toastCalls: Array<{ kind: string; msg: string }> = [];
 export const notify = {
   success: (msg: string) => {