promptslide 0.3.17 → 0.3.19

package/src/core/slide-renderer.tsx

@@ -13,6 +13,7 @@ import { DEFAULT_SLIDE_TRANSITION, getSlideVariants } from "./transitions"
 // =============================================================================
 
 export interface SlideRendererProps {
+  playbackKey?: number
   slides: SlideConfig[]
   currentSlide: number
   animationStep: number
@@ -33,6 +34,7 @@ export interface SlideRendererProps {
  * Extracted from SlideDeck so it can be reused in SlideEmbed and other contexts.
  */
 export function SlideRenderer({
+  playbackKey,
   slides,
   currentSlide,
   animationStep,
@@ -58,6 +60,7 @@ export function SlideRenderer({
     <AnimatePresence initial={false}>
       <motion.div
         key={currentSlide}
+        data-slide-render-index={currentSlide}
         variants={slideVariants}
         initial="enter"
         animate="center"
@@ -75,11 +78,9 @@ export function SlideRenderer({
           totalSteps={totalSteps}
           showAllAnimations={showAllAnimations}
         >
-          <SlideErrorBoundary
-            slideIndex={currentSlide}
-            slideTitle={slides[currentSlide]?.title}
-          >
+          <SlideErrorBoundary slideIndex={currentSlide} slideTitle={slides[currentSlide]?.title}>
             <CurrentSlideComponent
+              key={playbackKey}
               slideNumber={currentSlide + 1}
               totalSlides={slides.length}
             />

package/src/core/toolbar-action.tsx

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithoutRef } from "react"
+
+import { cn } from "./utils"
+
+type ToolbarActionProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  "aria-label" | "aria-pressed" | "className"
+> & {
+  label: string
+  selected?: boolean
+}
+
+/** Shared icon action for both the viewer toolbar and the editor's toolbar portal. */
+export function ToolbarAction({
+  label,
+  selected,
+  title = label,
+  children,
+  ...props
+}: ToolbarActionProps) {
+  return (
+    <button
+      {...props}
+      type="button"
+      aria-label={label}
+      aria-pressed={selected}
+      title={title}
+      className={cn(
+        "relative inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-transparent transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF6B35] disabled:cursor-default disabled:opacity-35 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0",
+        selected
+          ? "border-[#FF6B35]/50 bg-[#FF6B35]/15 text-[#FF6B35] enabled:hover:border-[#FF6B35] enabled:hover:bg-[#FF6B35]/25"
+          : "text-neutral-400 enabled:hover:bg-neutral-800 enabled:hover:text-white"
+      )}
+    >
+      {children}
+    </button>
+  )
+}

package/src/core/types.ts

@@ -136,3 +136,17 @@ export interface LayoutBaseProps extends SlideProps {
   hideFooter?: boolean
   className?: string
 }
+
+/** Durations in seconds, including the initial state at dwell[0]. */
+export interface LoopSlideConfig {
+  excluded?: boolean
+  /** Step count when these timings were edited; used to flag changes. */
+  steps?: number
+  dwell?: (number | null)[]
+}
+
+export interface LoopConfig {
+  version: 1
+  defaultDuration: number
+  slides: Record<string, LoopSlideConfig>
+}

package/src/core/use-slide-navigation.ts

@@ -67,6 +67,8 @@ export interface UseSlideNavigationReturn {
   advance: () => void
   goBack: () => void
   goToSlide: (index: number) => void
+  goToStep: (step: number) => void
+  restartAtSlide: (index: number) => void
   onTransitionComplete: () => void
 }
 
@@ -206,6 +208,29 @@ export function useSlideNavigation({
     [currentSlide, slides.length, onSlideChange]
   )
 
+  const goToStep = useCallback(
+    (step: number) => {
+      if (!Number.isInteger(step)) return
+      setQueuedAction(null)
+      setAnimationStep(Math.max(0, Math.min(step, slides[currentSlide]?.steps ?? 0)))
+      setNavState(previous => ({ ...previous, direction: 0 }))
+    },
+    [slides, currentSlide]
+  )
+
+  const restartAtSlide = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= slides.length) return
+      setQueuedAction(null)
+      setAnimationStep(0)
+      setCurrentSlide(index)
+      // Same-slide restarts do not have a transition to complete.
+      setNavState({ status: index === currentSlide ? "idle" : "transitioning", direction: 1 })
+      onSlideChange?.(index)
+    },
+    [slides.length, currentSlide, onSlideChange]
+  )
+
   useEffect(() => {
     if (navState.status === "idle" && queuedAction !== null) {
       setQueuedAction(null)
@@ -227,6 +252,8 @@ export function useSlideNavigation({
     advance,
     goBack,
     goToSlide,
+    goToStep,
+    restartAtSlide,
     onTransitionComplete
   }
 }

package/src/core/view-menu.tsx

@@ -0,0 +1,130 @@
+import { Check, ChevronDown, Grid3X3, List, Monitor } from "lucide-react"
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react"
+
+import { cn } from "./utils"
+
+export type ViewMode = "slide" | "list" | "grid"
+
+const views = [
+  { mode: "slide", label: "Presentation view", shortcut: "V", icon: Monitor },
+  { mode: "list", label: "List view", shortcut: "L", icon: List },
+  { mode: "grid", label: "Grid view", shortcut: "G", icon: Grid3X3 }
+] as const
+
+export function ViewMenu({
+  value,
+  onChange,
+  disabled
+}: {
+  value: ViewMode
+  onChange: (mode: ViewMode) => void
+  disabled: boolean
+}) {
+  const [open, setOpen] = useState(false)
+  const id = useId()
+  const root = useRef<HTMLDivElement>(null)
+  const trigger = useRef<HTMLButtonElement>(null)
+  const active = views.find(view => view.mode === value)!
+  const Icon = active.icon
+
+  useLayoutEffect(() => {
+    if (open) root.current?.querySelector<HTMLElement>('[aria-checked="true"]')?.focus()
+  }, [open])
+  useEffect(() => {
+    if (!open) return
+    const close = (event: PointerEvent) => {
+      if (!root.current?.contains(event.target as Node)) setOpen(false)
+    }
+    document.addEventListener("pointerdown", close)
+    return () => document.removeEventListener("pointerdown", close)
+  }, [open])
+
+  return (
+    <div
+      role="group"
+      aria-label="View selector"
+      ref={root}
+      className="relative flex"
+      onBlur={event => {
+        const next = event.relatedTarget
+        if (next && !event.currentTarget.contains(next)) setOpen(false)
+      }}
+      onKeyDown={event => {
+        // Toolbar navigation must not trigger slide advancement or deck shortcuts.
+        event.stopPropagation()
+        if (event.key === "Escape") {
+          setOpen(false)
+          trigger.current?.focus()
+        } else if (open && event.key === "Tab") {
+          trigger.current?.focus()
+          setOpen(false)
+        } else if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+          event.preventDefault()
+          if (!open) {
+            setOpen(true)
+            return
+          }
+          const items = Array.from(
+            root.current!.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]')
+          )
+          const index = items.indexOf(document.activeElement as HTMLButtonElement)
+          const next =
+            event.key === "Home"
+              ? 0
+              : event.key === "End"
+                ? items.length - 1
+                : (index + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length
+          items[next]?.focus()
+        }
+      }}
+    >
+      <button
+        ref={trigger}
+        disabled={disabled}
+        aria-label="View options"
+        title={`View options · ${active.label}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-controls={open ? id : undefined}
+        className="inline-flex h-8 items-center gap-1.5 rounded-md bg-neutral-800 px-2 text-white hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-orange-500"
+        onClick={() => setOpen(previous => !previous)}
+      >
+        <Icon size={16} />
+        <ChevronDown size={12} />
+      </button>
+      {open && (
+        <div
+          id={id}
+          role="menu"
+          aria-label="View options"
+          className="absolute left-0 top-10 w-56 rounded-lg border border-neutral-700 bg-neutral-950 p-1 text-sm text-white"
+        >
+          {views.map(({ mode, label, shortcut, icon: OptionIcon }) => (
+            <button
+              key={mode}
+              role="menuitemradio"
+              aria-checked={mode === value}
+              tabIndex={-1}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-2 text-left text-neutral-300 hover:bg-neutral-800 focus:bg-neutral-800 focus:outline-none",
+                mode === value && "text-white"
+              )}
+              onClick={() => {
+                onChange(mode)
+                setOpen(false)
+                trigger.current?.focus()
+              }}
+            >
+              <OptionIcon size={16} />
+              <span className="flex-1">{label}</span>
+              <span aria-hidden="true" className="text-xs text-neutral-500">
+                {shortcut}
+              </span>
+              <Check size={14} className={mode === value ? "text-orange-400" : "invisible"} />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/editor/README.md

@@ -0,0 +1,45 @@
+# Development source editor
+
+Run `promptslide studio` and choose **Edit** in the top-right toolbar, or **Elements** in the shared inspector. The core viewer owns the inspector's tabs, docking, and close control; the editor portals its tools into the Elements slot. The editor is injected by the development Vite plugin. Production builds, registry previews, embeds, and export pages do not load it. No editable-component migration is needed.
+
+## Workflow
+
+- Double-click literal text to edit it in place. Select an existing element, or use Slide elements. Shift-click selects several elements. Double-click a selected group to reach the element under the pointer; click outside the slide to deselect.
+- Edit literal text and title/subtitle/eyebrow properties, appearance, image URLs, or public asset paths in Design. Arrange contains positioning and alignment controls.
+- Drag selection outlines to move. The lower handle resizes; the upper handle rotates. Arrow keys nudge by one design pixel, Shift by ten. Alt disables snapping. All geometry is measured in the 1280 × 720 design canvas.
+- Align selected elements along either axis or distribute three or more with equal gaps. Bring forward / Send back set stacking order.
+- For images, adjust the frame size, objectFit, objectPosition, and inset crop.
+- Select a range in Text and apply bold, italic, or underline. Save existing text changes first. Range formatting creates ordinary styled JSX spans, which can subsequently be selected individually.
+- Structure supports inserting text, shapes, and images into JSX containers and duplicating/deleting direct JSX children. Root components and expressions cannot be deleted. Duplicates preview immediately and support Undo and Discard; save to edit copies independently. Insertions render after Save; range formatting previews immediately.
+- Switching from Elements to Slide settings or Comments uses the same Save / Discard / Keep editing guard as closing the editor. Keeping editing (or cancelling the dialog) cancels the pending panel switch. Loop timing drafts stay in the viewer across panel changes and source saves.
+- Undo/redo affects the buffered draft. Save batches edits to source; Discard restores the source rendering. Close requires resolving unsaved changes. The browser tab retains its draft across hot reloads. Export draft downloads the pending operations for recovery.
+- Editing uses the original viewer canvas, styling, and animation wrappers. Leave Edit to reveal steps normally; opening Edit preserves the currently visible content.
+
+## Source semantics
+
+Instrumentation adds source coordinates and a SHA-256 file revision only to the transformed development module. The original TSX is unchanged until Save. Intrinsic DOM elements and `motion.*` elements are supported. Source files must resolve inside the project's `src/` directory; symlinks outside it are rejected.
+
+A style change belongs to a JSX definition, so it affects all instances of that definition, including shared layouts. Movement uses the individual CSS `translate` property, preserving normal flex/grid flow and existing Motion transforms; rotation uses `rotate`. Resizing sets explicit frame dimensions. It does not convert the deck into an absolute-positioned document.
+
+For direct local `array.map(item => <p>{item.title}</p>)` expressions over literal object arrays, text edits address the selected array item. Imported arrays, spreads, ambiguous bindings, computed expressions, and mixed children are intentionally read-only. Edit those expressions in code. Simple local component text props are resolved automatically when their rendered text is selected, without requiring the component to forward DOM metadata. Ambiguous or imported prop relationships remain unsupported. Shared appearance controls require opting in when multiple matching instances are present on the current slide.
+
+Every batch checks all file revisions and validates all resulting TSX syntax before writing. Stale edits receive HTTP 409. Export or discard the draft and reselect from the current source; there is no force-overwrite button. Deleting an element discards pending edits on that element and its descendants. Other parent/child structural edits that overlap must be saved separately. This is optimistic concurrency protection, not a filesystem transaction across external processes. A save failure rolls back files still matching this operation's output.
+
+The endpoint uses a per-server random token, checks cross-site fetches, limits payload size and operation counts, and only runs in Vite serve mode. Studio enables editing on its default loopback interface. Passing `--host` (including `--host=...`) disables the editor, source instrumentation, and editor endpoint so shared previews cannot edit source files. The client token is a request guard, not authentication for network clients.
+
+## Verification
+
+- `node --test packages/cli/test/editor.test.mjs`: source edits, escaping, conflicts, batch validation, path restrictions, and array instances.
+- `node packages/cli/test/editor.browser.mjs`: isolated temporary deck; text/history, save/reload, concurrent edits, scaled dragging, and production bundle exclusion. Requires the package's Playwright Chromium installation.
+- `tsc -p packages/cli/tsconfig.json --noEmit`: editor and engine types.
+
+Implementation uses TypeScript's JSX parser and original-range patches. No OpenSlide source code is vendored.
+
+## Inspector protocol
+
+The viewer's inspector is part of the production core; the source editor remains development-only.
+`EditorLauncher` discovers the existing toolbar, panel, canvas, and overlay slots, announces
+`promptslide:editor-ready`, and handles `promptslide:editor-request` to open or request a guarded
+close. `promptslide:editor-state` acknowledges actual open/closed state. The viewer commits a
+pending tab change only after a closed acknowledgement; `promptslide:editor-close-cancelled`
+clears that pending change. Source edits and their history stay in the editor's own React root.

package/src/editor/geometry.ts

@@ -0,0 +1,76 @@
+export interface Rect {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+export function translated(value: string, dx: number, dy: number) {
+  // Computed translate may contain percentages or calc() with spaces. Keep
+  // those units so movement does not remove centering or break after resizing.
+  const axes: string[] = []
+  let depth = 0,
+    start = 0
+  const input = value.trim()
+  for (let i = 0; i <= input.length; i++) {
+    const char = input[i]
+    if (char === "(") depth++
+    if (char === ")") depth--
+    if (i === input.length || (depth === 0 && /\s/.test(char!))) {
+      if (i > start) axes.push(input.slice(start, i))
+      start = i + 1
+    }
+  }
+  if (axes[0] === "none") axes.length = 0
+  const offset = (axis: string, delta: number) => {
+    if (!delta) return axis
+    if (/^-?(?:\d*\.)?\d+px$/.test(axis)) return `${parseFloat(axis) + delta}px`
+    return `calc(${axis} ${delta < 0 ? "-" : "+"} ${Math.abs(delta)}px)`
+  }
+  return [offset(axes[0] || "0px", dx), offset(axes[1] || "0px", dy), ...axes.slice(2)].join(" ")
+}
+export function snap(rect: Rect, others: Rect[], tolerance = 6) {
+  const xs = [0, 640, 1280, ...others.flatMap(r => [r.x, r.x + r.width / 2, r.x + r.width])]
+  const ys = [0, 360, 720, ...others.flatMap(r => [r.y, r.y + r.height / 2, r.y + r.height])]
+  const closest = (values: number[], targets: number[]) => {
+    let delta = tolerance + 1
+    let guide: number | undefined
+    for (const v of values)
+      for (const t of targets)
+        if (Math.abs(t - v) < Math.abs(delta)) {
+          delta = t - v
+          guide = t
+        }
+    return Math.abs(delta) <= tolerance ? { delta, guide } : { delta: 0, guide: undefined }
+  }
+  const x = closest([rect.x, rect.x + rect.width / 2, rect.x + rect.width], xs)
+  const y = closest([rect.y, rect.y + rect.height / 2, rect.y + rect.height], ys)
+  return { x: rect.x + x.delta, y: rect.y + y.delta, guideX: x.guide, guideY: y.guide }
+}
+export function aligned(
+  rects: Rect[],
+  axis: "x" | "y",
+  mode: "start" | "center" | "end" | "distribute"
+) {
+  const size = axis === "x" ? "width" : "height"
+  if (mode === "distribute") {
+    if (rects.length < 3) return rects.map(r => r[axis])
+    const sorted = rects.map((r, i) => ({ ...r, i })).sort((a, b) => a[axis] - b[axis])
+    const first = sorted[0]!,
+      last = sorted[sorted.length - 1]!
+    const gap =
+      (last[axis] + last[size] - first[axis] - sorted.reduce((s, r) => s + r[size], 0)) /
+      (rects.length - 1)
+    const result: number[] = []
+    let pos = first[axis]
+    for (const r of sorted) {
+      result[r.i] = pos
+      pos += r[size] + gap
+    }
+    return result
+  }
+  const min = Math.min(...rects.map(r => r[axis])),
+    max = Math.max(...rects.map(r => r[axis] + r[size]))
+  return rects.map(r =>
+    mode === "start" ? min : mode === "end" ? max - r[size] : (min + max - r[size]) / 2
+  )
+}

package/src/editor/mount.ts

@@ -0,0 +1,24 @@
+import { createElement } from "react"
+import { createRoot } from "react-dom/client"
+
+import { EditorLauncher } from "./studio"
+
+// Keep mounting outside the component module so React Fast Refresh can retain
+// the open editor, its draft, and its history when the sidebar code changes.
+export function mountEditor(
+  _slides: unknown,
+  _theme: unknown,
+  token: string,
+  initiallyOpen = false
+) {
+  if (document.getElementById("promptslide-editor-root")) return
+  const host = document.createElement("div")
+  host.id = "promptslide-editor-root"
+  document.body.appendChild(host)
+  const root = createRoot(host)
+  root.render(createElement(EditorLauncher, { token, initiallyOpen }))
+  return () => {
+    root.unmount()
+    host.remove()
+  }
+}

package/src/editor/plugin.mjs

@@ -0,0 +1,189 @@
+import { randomBytes } from "node:crypto"
+import {
+  readFileSync,
+  realpathSync,
+  writeFileSync,
+  renameSync,
+  statSync,
+  readdirSync
+} from "node:fs"
+import nodePath, { resolve, relative, sep, dirname } from "node:path"
+import { fileURLToPath } from "node:url"
+
+import { describe, editSource, instrument, revision } from "./source.mjs"
+
+export function sourceModulePath(base, id, paths = nodePath) {
+  const path = paths.resolve(id.split("?")[0])
+  const rel = paths.relative(base, path)
+  if (
+    !rel ||
+    rel === ".." ||
+    rel.startsWith(".." + paths.sep) ||
+    paths.isAbsolute(rel) ||
+    !/\.[jt]sx$/.test(path)
+  )
+    return
+  return path
+}
+
+export function editorPlugin({ root }) {
+  root = realpathSync(root)
+  const token = randomBytes(24).toString("hex")
+  const base = resolve(root, "src")
+  const client = resolve(dirname(fileURLToPath(import.meta.url)), "mount.ts")
+  const clientUrl = "/@fs/" + client
+  function sourcePath(path) {
+    if (typeof path !== "string" || !/\.[jt]sx$/.test(path)) throw new Error("Invalid source path")
+    const resolved = realpathSync(resolve(root, path))
+    const realBase = realpathSync(base)
+    if (!resolved.startsWith(realBase + sep)) throw new Error("Source must be inside project src/")
+    return resolved
+  }
+  return {
+    name: "promptslide-editor",
+    apply: "serve",
+    enforce: "pre",
+    transform(code, id) {
+      const path = sourceModulePath(base, id)
+      if (!path) return
+      return { code: instrument(code, relative(root, path)), map: null }
+    },
+    resolveId(id) {
+      if (id === "virtual:promptslide-editor") return "\0" + id
+    },
+    load(id) {
+      if (id !== "\0virtual:promptslide-editor") return
+      return `import { mountEditor } from ${JSON.stringify(clientUrl)};
+import { slides } from ${JSON.stringify(resolve(root, "src/deck-config.ts"))};
+import { theme } from ${JSON.stringify(resolve(root, "src/theme.ts"))};
+const dispose = mountEditor(slides, theme, ${JSON.stringify(token)}, import.meta.hot?.data.open ?? false);
+if (import.meta.hot) {
+  import.meta.hot.accept();
+  import.meta.hot.dispose((data) => {
+    data.open = document.querySelector('[data-ps-edit-action][aria-pressed="true"]') !== null;
+    dispose?.();
+    window.dispatchEvent(new Event("promptslide:editor-refresh"));
+  });
+}`
+    },
+    transformIndexHtml(html, ctx) {
+      const url = new URL(ctx.originalUrl ?? ctx.path, "http://localhost")
+      if (url.searchParams.get("pdf") === "true" || url.searchParams.get("export") === "true")
+        return
+      if (ctx.path !== "/" && ctx.path !== "/index.html") return
+      return {
+        html,
+        tags: [
+          {
+            tag: "script",
+            attrs: { type: "module", src: "/@id/virtual:promptslide-editor" },
+            injectTo: "body"
+          }
+        ]
+      }
+    },
+    configureServer(server) {
+      server.middlewares.use("/__promptslide_editor", (req, res) => {
+        const send = (status, data) => {
+          res.statusCode = status
+          res.setHeader("Content-Type", "application/json")
+          res.end(JSON.stringify(data))
+        }
+        if (
+          req.method !== "POST" ||
+          req.headers["x-promptslide-editor"] !== token ||
+          req.headers["sec-fetch-site"] === "cross-site"
+        )
+          return send(403, { error: "Editor access denied" })
+        let body = ""
+        req.on("data", chunk => {
+          body += chunk
+          if (body.length > 2_000_000) req.destroy()
+        })
+        req.on("end", () => {
+          try {
+            const data = JSON.parse(body)
+            if (data.action === "sources") {
+              const paths = []
+              function walk(directory) {
+                for (const entry of readdirSync(directory, { withFileTypes: true })) {
+                  if (
+                    entry.name.startsWith(".") ||
+                    entry.name === "node_modules" ||
+                    entry.isSymbolicLink()
+                  )
+                    continue
+                  const path = resolve(directory, entry.name)
+                  if (entry.isDirectory()) walk(path)
+                  else if (entry.isFile() && /\.[jt]sx$/.test(path))
+                    paths.push(relative(root, path))
+                }
+              }
+              walk(base)
+              return send(200, { paths: paths.sort() })
+            }
+            if (data.action === "inspect") {
+              const text = readFileSync(sourcePath(data.path), "utf8")
+              return send(200, { revision: revision(text), nodes: describe(text) })
+            }
+            if (
+              data.action !== "save" ||
+              !Array.isArray(data.files) ||
+              !data.files.length ||
+              data.files.length > 100
+            )
+              throw new Error("Invalid edit batch")
+            const seen = new Set()
+            const prepared = data.files.map(file => {
+              const path = sourcePath(file.path)
+              if (seen.has(path)) throw new Error("Duplicate file")
+              seen.add(path)
+              const before = readFileSync(path, "utf8")
+              if (revision(before) !== file.revision) {
+                const error = new Error(
+                  `Conflict in ${file.path}. Source changed; discard or export your draft before reloading.`
+                )
+                error.status = 409
+                throw error
+              }
+              if (!Array.isArray(file.edits) || file.edits.length > 1000)
+                throw new Error("Invalid edits")
+              return {
+                path,
+                before,
+                after: editSource(before, file.edits),
+                mode: statSync(path).mode
+              }
+            })
+            // No asynchronous gap between revision checks and commits. Roll back our writes if a commit fails.
+            const written = []
+            try {
+              for (const file of prepared) {
+                if (readFileSync(file.path, "utf8") !== file.before)
+                  throw new Error("Source changed during save")
+                const temp = file.path + ".promptslide-" + randomBytes(6).toString("hex")
+                writeFileSync(temp, file.after, { flag: "wx", mode: file.mode })
+                renameSync(temp, file.path)
+                written.push(file)
+              }
+            } catch (error) {
+              for (const file of written.reverse())
+                if (readFileSync(file.path, "utf8") === file.after)
+                  writeFileSync(file.path, file.before)
+              throw error
+            }
+            // Invalidate synchronously so a reload immediately after Save cannot receive
+            // the old transform while the filesystem watcher is still debouncing.
+            for (const file of prepared) {
+              for (const module of server.moduleGraph?.getModulesByFile(file.path) || [])
+                server.moduleGraph.invalidateModule(module)
+            }
+            send(200, { saved: prepared.length })
+          } catch (error) {
+            send(error.status || 400, { error: error.message })
+          }
+        })
+      })
+    }
+  }
+}