@upstart.gg/vite-plugins 0.1.83 → 0.1.85

package/src/site-theme.ts

@@ -0,0 +1,205 @@
+/**
+ * The site's colors, editable from the editor's "Colors" panel.
+ *
+ * A site's colors live in its theme file (`app/config/themes/<id>.json`, the one `site.json` names
+ * as the default), read by the theme plugin at build time. A new site also keeps the palettes the
+ * client was offered when choosing its look (`docs/mockups/<direction>/` and its `palettes/<n>/`
+ * variants, see the `PaletteVariants` tool): the panel offers them again, next to a free picker.
+ *
+ * Saving also records in `docs/DESIGN.md` that the user chose the colors themselves: agents read
+ * the brief before any UI work, and would otherwise bring the brief's palette back.
+ */
+
+import fs from "fs/promises";
+import path from "path";
+import z from "zod";
+
+/** The theme colors the panel edits, in the theme file's naming. */
+export const EDITABLE_THEME_COLORS = [
+  "base100",
+  "base200",
+  "base300",
+  "baseContent",
+  "primary",
+  "primaryContent",
+  "secondary",
+  "secondaryContent",
+  "accent",
+  "accentContent",
+  "neutral",
+  "neutralContent",
+] as const;
+export type EditableThemeColor = (typeof EDITABLE_THEME_COLORS)[number];
+export type ThemeColors = Partial<Record<EditableThemeColor, string>>;
+
+/** A CSS color as theme files hold them: oklch(), hex, rgb() or hsl(). */
+const cssColor = z
+  .string()
+  .trim()
+  .max(80)
+  .regex(/^(#[0-9a-fA-F]{3,8}|(oklch|oklab|rgba?|hsla?)\([0-9.,%\s/+-]+\))$/, "Not a CSS color");
+
+export const payloadGetTheme = z.object({ action: z.literal("getTheme") });
+export type PayloadGetTheme = z.infer<typeof payloadGetTheme>;
+
+export const payloadSetTheme = z.object({
+  action: z.literal("setTheme"),
+  colors: z.partialRecord(z.enum(EDITABLE_THEME_COLORS), cssColor),
+});
+export type PayloadSetTheme = z.infer<typeof payloadSetTheme>;
+
+export interface ThemePalette {
+  /** Stable id: "current" for the chosen mockup, "palette-<n>" for its variants. */
+  id: string;
+  /** The catalog palette's description, when known (e.g. "Blush base, deep rose text…"). */
+  label: string;
+  colors: ThemeColors;
+}
+
+export type GetThemeResult =
+  | { success: true; themeId: string; colors: ThemeColors; palettes: ThemePalette[] }
+  | { success: false; error: string };
+
+export type SetThemeResult = { success: true; filePaths: string[] } | { success: false; error: string };
+
+/** Mockup token (Tailwind config of a mockup) → theme color. */
+const MOCKUP_TOKENS: Record<string, EditableThemeColor> = {
+  "base-100": "base100",
+  "base-200": "base200",
+  "base-300": "base300",
+  "base-content": "baseContent",
+  primary: "primary",
+  "primary-content": "primaryContent",
+  secondary: "secondary",
+  "secondary-content": "secondaryContent",
+  accent: "accent",
+  "accent-content": "accentContent",
+  neutral: "neutral",
+  "neutral-content": "neutralContent",
+};
+
+/** The colors a mockup sets in its Tailwind config, in the theme's naming. */
+export function mockupThemeColors(html: string): ThemeColors {
+  const script = [...html.matchAll(/<script\b[^>]*>([\s\S]*?)<\/script>/g)].find((m) =>
+    m[1].includes("tailwind.config"),
+  )?.[1];
+  const colors: ThemeColors = {};
+  if (!script) return colors;
+  for (const [token, key] of Object.entries(MOCKUP_TOKENS)) {
+    const pattern = new RegExp(`['"]?${token.replace(/-/g, "\\-")}['"]?\\s*:\\s*(['"])([^'"]*)\\1`);
+    const value = pattern.exec(script)?.[2];
+    if (value && cssColor.safeParse(value).success) colors[key] = value.trim();
+  }
+  return colors;
+}
+
+/** The block `setTheme` keeps up to date at the end of the brief. */
+const BRIEF_START = "<!-- upstart:theme-colors -->";
+const BRIEF_END = "<!-- /upstart:theme-colors -->";
+
+export function briefWithUserColors(brief: string, themeFile: string): string {
+  const block = [
+    BRIEF_START,
+    "## Colors chosen by the user",
+    `The user set the site's colors themselves in the editor. \`${themeFile}\` is the source of truth for colors and wins over any palette above: keep its values, and use its tokens (bg-base-100, text-primary…) rather than new colors.`,
+    BRIEF_END,
+  ].join("\n");
+  const start = brief.indexOf(BRIEF_START);
+  const end = brief.indexOf(BRIEF_END);
+  if (start !== -1 && end > start) {
+    return `${brief.slice(0, start)}${block}${brief.slice(end + BRIEF_END.length)}`;
+  }
+  return `${brief.trimEnd()}\n\n${block}\n`;
+}
+
+/** The theme file the site uses by default, from `app/config/site.json`. */
+async function defaultThemeFile(projectRoot: string): Promise<{ themeId: string; filePath: string } | null> {
+  try {
+    const site = JSON.parse(
+      await fs.readFile(path.join(projectRoot, "app", "config", "site.json"), "utf-8"),
+    ) as {
+      themes?: { light?: string; dark?: string; default?: "light" | "dark" };
+    };
+    const themeId = site.themes?.[site.themes.default ?? "light"] ?? site.themes?.light;
+    if (!themeId || !/^[a-z0-9-]+$/.test(themeId)) return null;
+    return { themeId, filePath: path.join(projectRoot, "app", "config", "themes", `${themeId}.json`) };
+  } catch {
+    return null;
+  }
+}
+
+/** The mockup the brief names as its reference (`docs/mockups/<direction>/…`). */
+async function chosenMockup(projectRoot: string): Promise<string | null> {
+  const brief = await fs.readFile(path.join(projectRoot, "docs", "DESIGN.md"), "utf-8").catch(() => "");
+  return /docs\/mockups\/([a-z0-9-]+)\//.exec(brief)?.[1] ?? null;
+}
+
+/** The palettes the client was offered for the chosen mockup; none for an older site. */
+export async function offeredPalettes(projectRoot: string): Promise<ThemePalette[]> {
+  const direction = await chosenMockup(projectRoot);
+  if (!direction) return [];
+  const dir = path.join(projectRoot, "docs", "mockups", direction);
+  const readPalette = async (id: string, folder: string): Promise<ThemePalette | null> => {
+    const html = await fs.readFile(path.join(folder, "index.html"), "utf-8").catch(() => "");
+    const colors = mockupThemeColors(html);
+    if (Object.keys(colors).length < 3) return null;
+    const variant = await fs
+      .readFile(path.join(folder, "variant.json"), "utf-8")
+      .then((raw) => JSON.parse(raw) as { palette?: string })
+      .catch((): { palette?: string } => ({}));
+    return { id, label: variant.palette ?? "", colors };
+  };
+  const variants = await fs.readdir(path.join(dir, "palettes")).catch((): string[] => []);
+  const palettes = await Promise.all([
+    readPalette("current", dir),
+    ...variants
+      .filter((n) => /^\d+$/.test(n))
+      .sort((a, b) => Number(a) - Number(b))
+      .map((n) => readPalette(`palette-${n}`, path.join(dir, "palettes", n))),
+  ]);
+  return palettes.filter((p): p is ThemePalette => p !== null);
+}
+
+export async function getSiteTheme(projectRoot: string): Promise<GetThemeResult> {
+  const theme = await defaultThemeFile(projectRoot);
+  if (!theme) return { success: false, error: "This site has no theme in app/config/site.json" };
+  try {
+    const content = JSON.parse(await fs.readFile(theme.filePath, "utf-8")) as {
+      colors?: Record<string, string>;
+    };
+    const colors: ThemeColors = {};
+    for (const key of EDITABLE_THEME_COLORS) {
+      const value = content.colors?.[key];
+      if (typeof value === "string") colors[key] = value;
+    }
+    return { success: true, themeId: theme.themeId, colors, palettes: await offeredPalettes(projectRoot) };
+  } catch {
+    return { success: false, error: `The theme file app/config/themes/${theme.themeId}.json is missing` };
+  }
+}
+
+export async function setSiteTheme(projectRoot: string, params: PayloadSetTheme): Promise<SetThemeResult> {
+  const parsed = payloadSetTheme.safeParse(params);
+  if (!parsed.success) return { success: false, error: `Invalid payload: ${parsed.error.message}` };
+  if (Object.keys(parsed.data.colors).length === 0) return { success: true, filePaths: [] };
+  const theme = await defaultThemeFile(projectRoot);
+  if (!theme) return { success: false, error: "This site has no theme in app/config/site.json" };
+  try {
+    const content = JSON.parse(await fs.readFile(theme.filePath, "utf-8")) as {
+      colors?: Record<string, string>;
+    };
+    content.colors = { ...content.colors, ...parsed.data.colors };
+    await fs.writeFile(theme.filePath, `${JSON.stringify(content, null, 2)}\n`);
+    const filePaths = [theme.filePath];
+
+    const briefPath = path.join(projectRoot, "docs", "DESIGN.md");
+    const brief = await fs.readFile(briefPath, "utf-8").catch(() => null);
+    if (brief !== null) {
+      await fs.writeFile(briefPath, briefWithUserColors(brief, path.relative(projectRoot, theme.filePath)));
+      filePaths.push(briefPath);
+    }
+    return { success: true, filePaths };
+  } catch (err) {
+    return { success: false, error: String(err) };
+  }
+}

package/src/tests/move-controls.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, test } from "vitest";
+import { dropPosition, isSameLevel, pickNearest } from "../vite-plugin-upstart-editor/runtime/move-controls";
+
+const rect = (left: number, top: number, width: number, height: number) => ({
+  left,
+  top,
+  width,
+  height,
+  right: left + width,
+  bottom: top + height,
+});
+
+describe("pickNearest", () => {
+  const title = { item: "title", rect: rect(0, 0, 400, 40) };
+  const text = { item: "text", rect: rect(0, 60, 400, 100) };
+
+  test("picks the element under the pointer", () => {
+    expect(pickNearest([title, text], 100, 80)?.item).toBe("text");
+  });
+
+  test("picks the innermost of nested elements", () => {
+    const strong = { item: "strong", rect: rect(10, 70, 50, 20) };
+    expect(pickNearest([text, strong], 20, 75)?.item).toBe("strong");
+  });
+
+  test("snaps to the nearest element in the gap between two elements", () => {
+    expect(pickNearest([title, text], 100, 45)?.item).toBe("title");
+    expect(pickNearest([title, text], 100, 57)?.item).toBe("text");
+  });
+
+  test("ignores elements too far away and hidden ones", () => {
+    expect(pickNearest([title, text], 100, 400)).toBeNull();
+    expect(pickNearest([{ item: "hidden", rect: rect(0, 0, 0, 0) }], 0, 0)).toBeNull();
+  });
+});
+
+describe("dropPosition", () => {
+  const r = rect(0, 0, 200, 100);
+
+  test("uses the vertical middle for stacked elements", () => {
+    expect(dropPosition(r, "vertical", 190, 20)).toBe("before");
+    expect(dropPosition(r, "vertical", 10, 80)).toBe("after");
+  });
+
+  test("uses the horizontal middle for side-by-side elements", () => {
+    expect(dropPosition(r, "horizontal", 20, 90)).toBe("before");
+    expect(dropPosition(r, "horizontal", 150, 10)).toBe("after");
+  });
+});
+
+describe("isSameLevel", () => {
+  type Node = { name: string; parentElement: Node | null };
+  const node = (name: string, parent: Node | null): Node => ({ name, parentElement: parent });
+
+  // section > [colA > [img, title], colB > [text], aside > nested > [deep]]
+  const root = node("root", null);
+  const section = node("section", root);
+  const colA = node("colA", section);
+  const colB = node("colB", section);
+  const img = node("img", colA);
+  const title = node("title", colA);
+  const text = node("text", colB);
+  const aside = node("aside", section);
+  const nested = node("nested", aside);
+  const deep = node("deep", nested);
+
+  test("siblings are at the same level", () => {
+    expect(isSameLevel(img, title)).toBe(true);
+    expect(isSameLevel(colA, colB)).toBe(true);
+  });
+
+  test("cousins (children of a neighbouring container) are at the same level", () => {
+    expect(isSameLevel(img, text)).toBe(true);
+    expect(isSameLevel(text, title)).toBe(true);
+    expect(isSameLevel(img, nested)).toBe(true);
+  });
+
+  test("the element itself, its parent and deeper or higher elements are not", () => {
+    expect(isSameLevel(img, img)).toBe(false);
+    expect(isSameLevel(img, colA)).toBe(false);
+    expect(isSameLevel(img, section)).toBe(false);
+    expect(isSameLevel(img, deep)).toBe(false);
+    expect(isSameLevel(colA, img)).toBe(false);
+    expect(isSameLevel(colA, text)).toBe(false);
+  });
+});

package/src/tests/site-theme.test.ts

@@ -0,0 +1,122 @@
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { mkdtempSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import {
+  briefWithUserColors,
+  getSiteTheme,
+  mockupThemeColors,
+  offeredPalettes,
+  setSiteTheme,
+} from "../site-theme";
+
+let root: string;
+const write = (rel: string, content: string) => {
+  const file = join(root, rel);
+  mkdirSync(join(file, ".."), { recursive: true });
+  writeFileSync(file, content);
+};
+const mockup = (base: string, primary: string) => `<html><head><script>
+tailwind.config = { theme: { extend: { colors: {
+  'base-100': '${base}',
+  "base-content": "oklch(24% 0.03 50)",
+  primary: '${primary}',
+  'primary-content': 'oklch(98% 0.01 85)',
+} } } };
+</script></head><body></body></html>`;
+
+beforeEach(() => {
+  root = mkdtempSync(join(tmpdir(), "site-theme-"));
+  write("app/config/site.json", JSON.stringify({ themes: { light: "wedding", default: "light" } }));
+  write(
+    "app/config/themes/wedding.json",
+    JSON.stringify({
+      id: "wedding",
+      colors: { base100: "oklch(98% 0.01 85)", primary: "oklch(50% 0.1 300)", info: "#00f" },
+    }),
+  );
+});
+afterEach(() => rmSync(root, { recursive: true, force: true }));
+
+describe("mockupThemeColors", () => {
+  it("maps a mockup's Tailwind tokens to the theme's colors", () => {
+    expect(mockupThemeColors(mockup("oklch(97% 0.02 15)", "#a33"))).toEqual({
+      base100: "oklch(97% 0.02 15)",
+      baseContent: "oklch(24% 0.03 50)",
+      primary: "#a33",
+      primaryContent: "oklch(98% 0.01 85)",
+    });
+    expect(mockupThemeColors("<html></html>")).toEqual({});
+  });
+});
+
+describe("getSiteTheme", () => {
+  it("reads the editable colors of the site's default theme", async () => {
+    const theme = await getSiteTheme(root);
+    expect(theme).toEqual({
+      success: true,
+      themeId: "wedding",
+      colors: { base100: "oklch(98% 0.01 85)", primary: "oklch(50% 0.1 300)" },
+      palettes: [],
+    });
+  });
+
+  it("offers the palettes shown with the chosen mockup, the current one first", async () => {
+    write("docs/DESIGN.md", "Reference mockup: `docs/mockups/romantic-floral/palettes/2/index.html`");
+    write("docs/mockups/romantic-floral/index.html", mockup("oklch(98% 0.01 85)", "oklch(50% 0.1 300)"));
+    write("docs/mockups/romantic-floral/variant.json", JSON.stringify({ palette: "Lavender-mist base" }));
+    write(
+      "docs/mockups/romantic-floral/palettes/2/index.html",
+      mockup("oklch(97% 0.02 15)", "oklch(48% 0.14 10)"),
+    );
+    write(
+      "docs/mockups/romantic-floral/palettes/1/index.html",
+      mockup("oklch(98% 0.015 95)", "oklch(48% 0.09 235)"),
+    );
+    write("docs/mockups/romantic-floral/palettes/1/variant.json", JSON.stringify({ palette: "Ivory base" }));
+    const palettes = await offeredPalettes(root);
+    expect(palettes.map((p) => [p.id, p.label])).toEqual([
+      ["current", "Lavender-mist base"],
+      ["palette-1", "Ivory base"],
+      ["palette-2", ""],
+    ]);
+    expect(palettes[2].colors.primary).toBe("oklch(48% 0.14 10)");
+  });
+
+  it("offers no palette to a site without mockups", async () => {
+    write("docs/DESIGN.md", "# Design brief");
+    expect(await offeredPalettes(root)).toEqual([]);
+  });
+});
+
+describe("setSiteTheme", () => {
+  it("merges the colors into the theme file and tells the brief they are the user's", async () => {
+    write("docs/DESIGN.md", "# Design brief\n\nPalette: lavender.");
+    const result = await setSiteTheme(root, { action: "setTheme", colors: { primary: "#aa3355" } });
+    expect(result).toEqual({
+      success: true,
+      filePaths: [join(root, "app/config/themes/wedding.json"), join(root, "docs/DESIGN.md")],
+    });
+    const theme = JSON.parse(readFileSync(join(root, "app/config/themes/wedding.json"), "utf-8"));
+    expect(theme.colors).toEqual({ base100: "oklch(98% 0.01 85)", primary: "#aa3355", info: "#00f" });
+    expect(readFileSync(join(root, "docs/DESIGN.md"), "utf-8")).toContain("## Colors chosen by the user");
+  });
+
+  it("refuses what is not a CSS color", async () => {
+    const result = await setSiteTheme(root, {
+      action: "setTheme",
+      colors: { primary: "red; background: url(x)" },
+    });
+    expect(result.success).toBe(false);
+  });
+});
+
+describe("briefWithUserColors", () => {
+  it("keeps a single block, updated in place", () => {
+    const once = briefWithUserColors("# Brief\n", "app/config/themes/a.json");
+    const twice = briefWithUserColors(`${once}\n## Later section\n`, "app/config/themes/b.json");
+    expect(twice.match(/Colors chosen by the user/g)).toHaveLength(1);
+    expect(twice).toContain("app/config/themes/b.json");
+    expect(twice).toContain("## Later section");
+  });
+});

package/src/tests/upstart-editor-api-move-element.test.ts

@@ -0,0 +1,220 @@
+import { describe, test, expect, beforeEach, afterEach } from "vitest";
+import fs from "fs/promises";
+import path from "path";
+import os from "os";
+import { UpstartEditorAPI, mapOffset, moveRange } from "../upstart-editor-api";
+import { transformWithOxc, getRegistry, clearRegistry } from "../vite-plugin-upstart-attrs";
+
+const FILE = "app/components/Hero.tsx";
+
+const HERO = `export function Hero() {
+  return (
+    <section className="hero">
+      <h1>Welcome</h1>
+      <p>Some text</p>
+      <div className="media">
+        <img src="/images/hero.webp" alt="" />
+        <span>Caption</span>
+      </div>
+    </section>
+  );
+}
+`;
+
+type Position = "before" | "after";
+
+describe("moveElements", () => {
+  let tempDir: string;
+  let api: UpstartEditorAPI;
+
+  // Run the attrs plugin on `code`, register it in the API and write the file; returns the
+  // movable element ids keyed by tag name.
+  async function setup(code: string): Promise<Record<string, string>> {
+    clearRegistry();
+    transformWithOxc(code, FILE);
+    const ids: Record<string, string> = {};
+    for (const [id, entry] of Object.entries(getRegistry())) {
+      if (entry.type !== "element") continue;
+      const tag = entry.originalContent.match(/^<([a-z0-9]+)/)?.[1];
+      if (tag) ids[tag] = id;
+    }
+    await fs.mkdir(path.join(tempDir, "app", "components"), { recursive: true });
+    await fs.writeFile(path.join(tempDir, FILE), code);
+    api.setRegistry({ version: 1, generatedAt: "", elements: getRegistry() });
+    return ids;
+  }
+
+  const read = () => fs.readFile(path.join(tempDir, FILE), "utf-8");
+  const move = (...moves: [id: string, targetId: string, position: Position][]) =>
+    api.moveElements({
+      action: "moveElements",
+      moves: moves.map(([id, targetId, position]) => ({ id, targetId, position })),
+    });
+
+  beforeEach(async () => {
+    tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-move-"));
+    api = new UpstartEditorAPI(tempDir, path.join(tempDir, "registry.json"));
+  });
+
+  afterEach(async () => {
+    clearRegistry();
+    await fs.rm(tempDir, { recursive: true, force: true });
+  });
+
+  test("moves an element after a sibling", async () => {
+    const ids = await setup(HERO);
+    const result = await move([ids.h1, ids.p, "after"]);
+    expect(result).toEqual({ success: true, filePaths: [path.join(tempDir, FILE)] });
+    expect(await read()).toBe(
+      HERO.replace("<h1>Welcome</h1>\n      <p>Some text</p>", "<p>Some text</p>\n      <h1>Welcome</h1>"),
+    );
+  });
+
+  test("moves an element before a sibling", async () => {
+    const ids = await setup(HERO);
+    expect((await move([ids.p, ids.h1, "before"])).success).toBe(true);
+    expect(await read()).toContain("<p>Some text</p>\n      <h1>Welcome</h1>");
+  });
+
+  test("re-indents an element moved to another nesting level", async () => {
+    const ids = await setup(HERO);
+    expect((await move([ids.img, ids.h1, "before"])).success).toBe(true);
+    const code = await read();
+    expect(code).toContain(
+      '<section className="hero">\n      <img src="/images/hero.webp" alt="" />\n      <h1>',
+    );
+    expect(code).toContain('<div className="media">\n        <span>Caption</span>\n      </div>');
+  });
+
+  test("applies several moves in order, tracking the elements an earlier move shifted", async () => {
+    const ids = await setup(HERO);
+    const result = await move(
+      [ids.img, ids.h1, "before"],
+      [ids.h1, ids.p, "after"],
+      [ids.img, ids.h1, "after"],
+    );
+    expect(result.success).toBe(true);
+    expect(await read()).toContain(
+      '<section className="hero">\n      <p>Some text</p>\n      <h1>Welcome</h1>\n      <img src="/images/hero.webp" alt="" />\n      <div className="media">',
+    );
+  });
+
+  test("a move undone by a later one leaves the file unchanged and reports no file", async () => {
+    const ids = await setup(HERO);
+    const result = await move([ids.h1, ids.p, "after"], [ids.h1, ids.p, "before"]);
+    expect(result).toEqual({ success: true, filePaths: [] });
+    expect(await read()).toBe(HERO);
+  });
+
+  test("moving an element next to itself leaves the file unchanged", async () => {
+    const ids = await setup(HERO);
+    expect(await move([ids.p, ids.h1, "after"])).toEqual({ success: true, filePaths: [] });
+    expect(await read()).toBe(HERO);
+  });
+
+  test("finds an element whose offsets shifted after an earlier edit", async () => {
+    const ids = await setup(HERO);
+    await fs.writeFile(path.join(tempDir, FILE), `// edited\n${HERO}`);
+    expect((await move([ids.h1, ids.p, "after"])).success).toBe(true);
+    expect(await read()).toContain("<p>Some text</p>\n      <h1>Welcome</h1>");
+  });
+
+  test("refuses elements from different files and writes nothing", async () => {
+    const ids = await setup(HERO);
+    const elements = getRegistry();
+    elements[ids.p] = { ...elements[ids.p], file: "app/components/Other.tsx" };
+    api.setRegistry({ version: 1, generatedAt: "", elements });
+    expect((await move([ids.h1, ids.img, "after"], [ids.h1, ids.p, "after"])).success).toBe(false);
+    expect(await read()).toBe(HERO);
+  });
+
+  test("refuses ids that are not movable elements", async () => {
+    const ids = await setup(HERO);
+    const classNameId = Object.entries(getRegistry()).find(([, e]) => e.type === "className")![0];
+    expect((await move([classNameId, ids.h1, "after"])).success).toBe(false);
+  });
+
+  test("refuses to move an element into itself", async () => {
+    const code = `export function A() {
+  return (
+    <div>
+      <p>
+        Hello <strong>world</strong>
+      </p>
+    </div>
+  );
+}
+`;
+    await fs.mkdir(path.join(tempDir, "app", "components"), { recursive: true });
+    await fs.writeFile(path.join(tempDir, FILE), code);
+    const outer = code.slice(code.indexOf("<p>"), code.indexOf("</p>") + 4);
+    api.setRegistry({
+      version: 1,
+      generatedAt: "",
+      elements: {
+        outer: {
+          file: FILE,
+          type: "element",
+          startOffset: code.indexOf("<p>"),
+          endOffset: code.indexOf("<p>") + outer.length,
+          originalContent: outer,
+          context: { parentTag: "div" },
+        },
+        inner: {
+          file: FILE,
+          type: "element",
+          startOffset: code.indexOf("<strong>"),
+          endOffset: code.indexOf("</strong>") + 9,
+          originalContent: "<strong>world</strong>",
+          context: { parentTag: "p" },
+        },
+      },
+    });
+    expect((await move(["outer", "inner", "after"])).success).toBe(false);
+    expect(await read()).toBe(code);
+  });
+});
+
+describe("moveRange", () => {
+  const range = (code: string, part: string) => {
+    const start = code.indexOf(part);
+    return { start, end: start + part.length };
+  };
+
+  test("moves inline elements as-is", () => {
+    const code = "<p><a>1</a> <b>2</b></p>";
+    const edit = moveRange(code, range(code, "<b>2</b>"), range(code, "<a>1</a>"), "before");
+    expect(edit.code).toBe("<p><b>2</b><a>1</a> </p>");
+    expect(edit.code.slice(edit.moved.start, edit.moved.end)).toBe("<b>2</b>");
+  });
+
+  test("moves an element after the last line of the file", () => {
+    const code = "  <a />\n  <b />";
+    const edit = moveRange(code, range(code, "<a />"), range(code, "<b />"), "after");
+    expect(edit.code).toBe("  <b />\n  <a />");
+    expect(edit.code.slice(edit.moved.start, edit.moved.end)).toBe("<a />");
+  });
+
+  test("moves a multi-line element and keeps its inner indentation", () => {
+    const code = "    <ul>\n      <li>x</li>\n    </ul>\n  <p>y</p>\n";
+    const edit = moveRange(
+      code,
+      range(code, "<ul>\n      <li>x</li>\n    </ul>"),
+      range(code, "<p>y</p>"),
+      "after",
+    );
+    expect(edit.code).toBe("  <p>y</p>\n  <ul>\n    <li>x</li>\n  </ul>\n");
+    expect(edit.code.slice(edit.moved.start, edit.moved.end)).toBe("<ul>\n    <li>x</li>\n  </ul>");
+  });
+
+  test("mapOffset follows the elements around the move", () => {
+    const code = "<a />\n<b />\n<c />\n<d />\n";
+    const edit = moveRange(code, range(code, "<a />"), range(code, "<c />"), "after");
+    expect(edit.code).toBe("<b />\n<c />\n<a />\n<d />\n");
+    for (const tag of ["<b />", "<c />", "<d />"]) {
+      const r = range(code, tag);
+      const start = mapOffset(edit, r.start, false);
+      expect(edit.code.slice(start, mapOffset(edit, r.end, true))).toBe(tag);
+    }
+  });
+});