@upstart.gg/vite-plugins 0.1.84 → 0.1.85

package/src/vite-plugin-upstart-editor/runtime/move-controls.ts

@@ -0,0 +1,536 @@
+import { getCurrentMode } from "./state.js";
+import { sendToParent } from "./utils.js";
+import { getLabels } from "./labels.js";
+import { hideOverlays } from "./hover-overlay.js";
+import { baseButton, createControlsLayer, cssAttr, setIcon } from "./controls-ui.js";
+
+// Editor-only drag & drop of simple elements (texts, images). Movable elements carry
+// `data-upstart-move-id` (their source range in the registry) and `data-upstart-move-scope`
+// (the component they belong to), both injected by vite-plugin-upstart-attrs. A grip shows on
+// the hovered element; dragging it shows an insertion bar before/after another element of the
+// same component at the same level (sibling or cousin). The drop moves the element in the preview DOM only and stages the move: a bar
+// lets the user undo the last move, discard them all, or apply them as a single
+// `moveElements` source edit (then the editor rebuilds and reloads the preview). React keeps
+// working on the moved nodes thanks to the DOM guard.
+
+const MOVE_ID_ATTR = "data-upstart-move-id";
+const MOVE_SCOPE_ATTR = "data-upstart-move-scope";
+// Set on the element a hovered handle would move, to outline it.
+const PREVIEW_ATTR = "data-upstart-move-preview";
+// Handles shown at once: the hovered element and its closest movable ancestors (whole blocks).
+const MAX_HANDLES = 3;
+// Handles are larger on touch screens, so a finger can grab them.
+const HANDLE_SIZE_FINE = 16;
+const HANDLE_SIZE_COARSE = 28;
+
+function isCoarsePointer(): boolean {
+  return typeof matchMedia === "function" && matchMedia("(pointer: coarse)").matches;
+}
+
+function handleSize(): number {
+  return isCoarsePointer() ? HANDLE_SIZE_COARSE : HANDLE_SIZE_FINE;
+}
+
+// How far (px) from a target the pointer may be and still drop next to it.
+const SNAP_DISTANCE = 48;
+// Distance (px) from the viewport edge at which the page scrolls while dragging.
+const AUTO_SCROLL_EDGE = 40;
+const AUTO_SCROLL_STEP = 12;
+
+export type DropPosition = "before" | "after";
+
+export interface DropTarget {
+  element: HTMLElement;
+  position: DropPosition;
+  /** Insertion axis: "vertical" for stacked blocks, "horizontal" for side-by-side elements. */
+  axis: "vertical" | "horizontal";
+}
+
+let layer: HTMLDivElement | null = null;
+let isInitialized = false;
+let rafId: number | null = null;
+let hoveredItem: HTMLElement | null = null;
+// Touch screens have no hover: a tap selects the element instead, and it stays outlined.
+let lastPointerType = "mouse";
+let indicator: HTMLDivElement | null = null;
+const buttonOwner = new WeakMap<HTMLElement, HTMLElement>();
+
+let drag: { source: HTMLElement; target: DropTarget | null } | null = null;
+
+// Staged moves, oldest first. Each one remembers where the node was, so undoing them in
+// reverse order restores the original DOM exactly.
+interface StagedMove {
+  node: HTMLElement;
+  fromParent: Node;
+  fromNext: Node | null;
+  id: string;
+  targetId: string;
+  position: DropPosition;
+}
+const staged: StagedMove[] = [];
+let bar: HTMLDivElement | null = null;
+let applying = false;
+
+export function initMoveControls(): void {
+  if (typeof document === "undefined" || isInitialized) return;
+  isInitialized = true;
+  window.addEventListener("scroll", scheduleRefresh, { passive: true, capture: true });
+  window.addEventListener("resize", scheduleRefresh, { passive: true });
+  document.addEventListener("mouseover", onHoverMove, { passive: true });
+  document.addEventListener("pointerdown", onTapSelect, { capture: true, passive: true });
+  document.addEventListener("keydown", onUndoKey);
+  installStyles();
+}
+
+// Stylesheet (not inline styles) so the pending-moves bar can switch to a column layout on
+// narrow viewports.
+function installStyles(): void {
+  if (document.getElementById("upstart-move-styles")) return;
+  const style = document.createElement("style");
+  style.id = "upstart-move-styles";
+  style.textContent = `
+[${PREVIEW_ATTR}] { outline: 2px dashed #7270c6 !important; outline-offset: 2px; }
+#upstart-move-bar {
+  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 2147483647;
+  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px;
+  background: #1f1d3a; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+  font: 500 13px/1.2 system-ui, -apple-system, sans-serif; white-space: nowrap; pointer-events: auto;
+  box-sizing: border-box;
+}
+#upstart-move-bar button {
+  padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35);
+  background: transparent; color: #fff; font: inherit; cursor: pointer; box-sizing: border-box;
+}
+#upstart-move-bar button[data-primary] { background: #16a34a; border-color: #16a34a; }
+#upstart-move-bar button:disabled { opacity: 0.6; cursor: wait; }
+@media (max-width: 560px) {
+  #upstart-move-bar {
+    flex-direction: column; align-items: stretch; width: calc(100% - 32px); max-width: 360px;
+    padding: 12px; gap: 8px; border-radius: 16px; white-space: normal; text-align: center;
+  }
+  #upstart-move-bar button { width: 100%; padding: 10px 12px; }
+}
+`;
+  document.head.appendChild(style);
+}
+
+export function refreshMoveControls(): void {
+  if (typeof document === "undefined") return;
+  if (getCurrentMode() !== "move") {
+    hideMoveControls();
+    return;
+  }
+  // The layer holds the insertion bar while dragging: leave it to the drag handlers.
+  if (drag) return;
+  renderBar();
+
+  const root = ensureLayer();
+  root.replaceChildren();
+  clearPreview();
+  if (!hoveredItem || !document.contains(hoveredItem)) return;
+  if (lastPointerType !== "mouse") hoveredItem.setAttribute(PREVIEW_ATTR, "");
+
+  // One handle per element of the chain, at its top-left corner, nudged to the right when
+  // it would cover the handle of an element sharing the same corner. Placed from the largest
+  // element to the smallest, so handles read outer block → inner element, left to right.
+  const size = handleSize();
+  const placed: { top: number; left: number }[] = [];
+  for (const el of handleChain(hoveredItem).reverse()) {
+    const rect = el.getBoundingClientRect();
+    const top = rect.top + window.scrollY - size / 2;
+    let left = rect.left + window.scrollX - size / 2;
+    while (placed.some((p) => Math.abs(p.top - top) < size + 2 && Math.abs(p.left - left) < size + 2)) {
+      left += size + 4;
+    }
+    placed.push({ top, left });
+    const btn = makeHandle(el, top, left, size);
+    buttonOwner.set(btn, hoveredItem);
+    root.appendChild(btn);
+  }
+}
+
+/**
+ * The elements offered for moving when `item` is hovered: itself and its closest movable
+ * ancestors, so a whole block can be grabbed from any of its children. Elements alone in
+ * their component (nowhere to go) are skipped.
+ */
+function handleChain(item: HTMLElement): HTMLElement[] {
+  const chain: HTMLElement[] = [];
+  for (
+    let el: HTMLElement | null = item;
+    el && chain.length < MAX_HANDLES;
+    el = el.parentElement?.closest<HTMLElement>(`[${MOVE_ID_ATTR}]`) ?? null
+  ) {
+    if (candidatesFor(el).length > 0) chain.push(el);
+  }
+  return chain;
+}
+
+function clearPreview(): void {
+  for (const el of document.querySelectorAll(`[${PREVIEW_ATTR}]`)) el.removeAttribute(PREVIEW_ATTR);
+}
+
+export function hideMoveControls(): void {
+  if (drag) endDrag(false);
+  hoveredItem = null;
+  if (layer) layer.replaceChildren();
+  clearPreview();
+  bar?.remove();
+  bar = null;
+}
+
+function ensureLayer(): HTMLDivElement {
+  if (!layer || !document.contains(layer)) layer = createControlsLayer("upstart-move-controls");
+  return layer;
+}
+
+// Touch: tapping the page selects the movable element under the finger (or clears the
+// selection), since there is no hover to reveal its handles.
+function onTapSelect(e: PointerEvent): void {
+  lastPointerType = e.pointerType;
+  if (e.pointerType === "mouse" || getCurrentMode() !== "move" || drag) return;
+  const target = e.target as HTMLElement | null;
+  if (!target || layer?.contains(target) || bar?.contains(target)) return;
+  hoveredItem = target.closest<HTMLElement>(`[${MOVE_ID_ATTR}]`);
+  scheduleRefresh();
+}
+
+function onHoverMove(e: MouseEvent): void {
+  // Compatibility mouse events follow a tap: the tap already chose the element.
+  if (getCurrentMode() !== "move" || drag || lastPointerType !== "mouse") return;
+  const owner = hoverOwner(e.target as HTMLElement | null);
+  if (owner !== hoveredItem) {
+    hoveredItem = owner;
+    scheduleRefresh();
+  }
+}
+
+// The movable element under the pointer, or the one owning the hovered handle.
+function hoverOwner(target: HTMLElement | null): HTMLElement | null {
+  if (!target) return null;
+  if (layer?.contains(target)) {
+    const owner = buttonOwner.get(target);
+    return owner && document.contains(owner) ? owner : null;
+  }
+  return target.closest<HTMLElement>(`[${MOVE_ID_ATTR}]`);
+}
+
+interface TreeNode {
+  parentElement: TreeNode | null;
+}
+
+/**
+ * True when `el` is at the same level as `source`: a sibling (same container), or a cousin
+ * (a child of a container next to the source's own — the other column, the next card).
+ */
+export function isSameLevel(source: TreeNode, el: TreeNode): boolean {
+  if (el === source) return false;
+  const parent = source.parentElement;
+  const elParent = el.parentElement;
+  if (!parent || !elParent) return false;
+  if (elParent === parent) return true;
+  // A cousin's container must not be the source itself (that would be a child of it).
+  return (
+    elParent !== source && elParent.parentElement !== null && elParent.parentElement === parent.parentElement
+  );
+}
+
+/**
+ * Elements `source` can be dropped next to: movable elements of the same component that are
+ * at the same level (siblings and cousins, see `isSameLevel`).
+ */
+export function candidatesFor(source: HTMLElement): HTMLElement[] {
+  const scope = source.getAttribute(MOVE_SCOPE_ATTR);
+  if (!scope) return [];
+  return [...document.querySelectorAll<HTMLElement>(`[${MOVE_SCOPE_ATTR}="${cssAttr(scope)}"]`)].filter(
+    (el) => isSameLevel(source, el),
+  );
+}
+
+function axisOf(el: HTMLElement): DropTarget["axis"] {
+  const display = getComputedStyle(el).display;
+  if (display.startsWith("inline")) return "horizontal";
+  const parent = el.parentElement;
+  if (!parent) return "vertical";
+  const style = getComputedStyle(parent);
+  if (style.display.includes("grid")) return "horizontal";
+  if (style.display.includes("flex") && !style.flexDirection.startsWith("column")) return "horizontal";
+  return "vertical";
+}
+
+interface Rect {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+/**
+ * The item a drop at (x, y) lands next to: the one under the pointer (the smallest, should
+ * several overlap), or else the nearest one within SNAP_DISTANCE.
+ */
+export function pickNearest<T>(
+  items: { item: T; rect: Rect }[],
+  x: number,
+  y: number,
+): { item: T; rect: Rect } | null {
+  let best: { item: T; rect: Rect; score: number } | null = null;
+  for (const { item, rect } of items) {
+    if (rect.width === 0 && rect.height === 0) continue;
+    const dx = Math.max(rect.left - x, 0, x - rect.right);
+    const dy = Math.max(rect.top - y, 0, y - rect.bottom);
+    const distance = Math.hypot(dx, dy);
+    if (distance > SNAP_DISTANCE) continue;
+    const score = distance === 0 ? -1 / Math.max(rect.width * rect.height, 1) : distance;
+    if (!best || score < best.score) best = { item, rect, score };
+  }
+  return best && { item: best.item, rect: best.rect };
+}
+
+/** Before or after an element, from the pointer vs the element's middle along the axis. */
+export function dropPosition(rect: Rect, axis: DropTarget["axis"], x: number, y: number): DropPosition {
+  const after = axis === "horizontal" ? x > rect.left + rect.width / 2 : y > rect.top + rect.height / 2;
+  return after ? "after" : "before";
+}
+
+function findDropTarget(source: HTMLElement, x: number, y: number): DropTarget | null {
+  const items = candidatesFor(source).map((item) => ({ item, rect: item.getBoundingClientRect() }));
+  const best = pickNearest(items, x, y);
+  if (!best) return null;
+  const axis = axisOf(best.item);
+  return { element: best.item, position: dropPosition(best.rect, axis, x, y), axis };
+}
+
+function makeHandle(item: HTMLElement, top: number, left: number, size: number): HTMLButtonElement {
+  const btn = baseButton(top, left, size, "#7270c6");
+  setIcon(btn, "grip", Math.round(size * 0.7));
+  btn.title = `${getLabels().dragToMove} (<${item.tagName.toLowerCase()}>)`;
+  btn.style.cursor = "grab";
+  // Without it, a touch drag is taken for a page scroll: the browser cancels the pointer
+  // events, so neither the insertion bar nor the drop would happen.
+  btn.style.touchAction = "none";
+  btn.addEventListener("pointerenter", () => {
+    clearPreview();
+    item.setAttribute(PREVIEW_ATTR, "");
+  });
+  btn.addEventListener("pointerleave", () => item.removeAttribute(PREVIEW_ATTR));
+  btn.addEventListener("pointerdown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // Capture keeps the pointerup (and so the click) on the handle, so releasing the
+    // button over the page never reaches the editor's click handler.
+    btn.setPointerCapture?.(e.pointerId);
+    startDrag(item, btn);
+  });
+  btn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  });
+  return btn;
+}
+
+function startDrag(source: HTMLElement, handle: HTMLElement): void {
+  drag = { source, target: null };
+  hideOverlays();
+  clearPreview();
+  // Keep only the grabbed handle: it holds the pointer capture, so it must stay in the DOM.
+  for (const child of [...(layer?.children ?? [])]) if (child !== handle) child.remove();
+  source.style.opacity = "0.5";
+  document.body.style.userSelect = "none";
+  document.documentElement.style.cursor = "grabbing";
+  document.addEventListener("pointermove", onDragMove);
+  document.addEventListener("pointerup", onDragDrop, { once: true });
+  document.addEventListener("pointercancel", onDragCancel, { once: true });
+  document.addEventListener("keydown", onDragKey, true);
+}
+
+function onDragCancel(): void {
+  endDrag(false);
+}
+
+function onDragMove(e: PointerEvent): void {
+  if (!drag) return;
+  if (e.clientY < AUTO_SCROLL_EDGE) window.scrollBy(0, -AUTO_SCROLL_STEP);
+  else if (e.clientY > window.innerHeight - AUTO_SCROLL_EDGE) window.scrollBy(0, AUTO_SCROLL_STEP);
+  drag.target = findDropTarget(drag.source, e.clientX, e.clientY);
+  drawIndicator(drag.target);
+}
+
+function onDragDrop(): void {
+  endDrag(true);
+}
+
+function onDragKey(e: KeyboardEvent): void {
+  if (e.key !== "Escape") return;
+  e.preventDefault();
+  e.stopPropagation();
+  endDrag(false);
+}
+
+function endDrag(commit: boolean): void {
+  document.removeEventListener("pointermove", onDragMove);
+  document.removeEventListener("pointerup", onDragDrop);
+  document.removeEventListener("pointercancel", onDragCancel);
+  document.removeEventListener("keydown", onDragKey, true);
+  document.body.style.removeProperty("user-select");
+  document.documentElement.style.removeProperty("cursor");
+  const current = drag;
+  drag = null;
+  if (!current) return;
+  current.source.style.removeProperty("opacity");
+  layer?.replaceChildren();
+  indicator = null;
+  if (commit && current.target) stageMove(current.source, current.target);
+  scheduleRefresh();
+}
+
+// Dropping right where the element already is (next to its own neighbour) changes nothing.
+function isNoOp(source: HTMLElement, target: DropTarget): boolean {
+  const el = target.element;
+  return target.position === "after"
+    ? el.nextElementSibling === source
+    : el.previousElementSibling === source;
+}
+
+function stageMove(source: HTMLElement, target: DropTarget): void {
+  const id = source.getAttribute(MOVE_ID_ATTR);
+  const targetId = target.element.getAttribute(MOVE_ID_ATTR);
+  const fromParent = source.parentNode;
+  if (!id || !targetId || !fromParent || isNoOp(source, target)) return;
+  staged.push({
+    node: source,
+    fromParent,
+    fromNext: source.nextSibling,
+    id,
+    targetId,
+    position: target.position,
+  });
+  if (target.position === "after") target.element.after(source);
+  else target.element.before(source);
+}
+
+/** Undo the last staged move (the DOM goes back to where it was before that drop). */
+export function undoLastMove(): void {
+  const move = staged.pop();
+  if (!move) return;
+  const { node, fromParent, fromNext } = move;
+  fromParent.insertBefore(node, fromNext && fromNext.parentNode === fromParent ? fromNext : null);
+  scheduleRefresh();
+}
+
+export function discardMoves(): void {
+  while (staged.length > 0) undoLastMove();
+}
+
+/** The staged moves, as sent to the editor on apply. */
+export function getStagedMoves(): { id: string; targetId: string; position: DropPosition }[] {
+  return staged.map(({ id, targetId, position }) => ({ id, targetId, position }));
+}
+
+function applyMoves(): void {
+  if (staged.length === 0 || applying) return;
+  // The editor rebuilds then reloads the preview, which resets this runtime. Until then the
+  // staged moves are kept, so a failed apply can still be undone.
+  applying = true;
+  sendToParent({ type: "text-edit", payload: { action: "moveElements", moves: getStagedMoves() } });
+  renderBar();
+}
+
+/** The editor could not apply the moves: keep them staged and let the user retry or undo. */
+export function onMovesApplyFailed(): void {
+  applying = false;
+  renderBar();
+}
+
+// Cmd/Ctrl+Z undoes the last move, unless the focus is in a form field.
+function onUndoKey(e: KeyboardEvent): void {
+  if (staged.length === 0 || applying || getCurrentMode() !== "move") return;
+  if (e.key.toLowerCase() !== "z" || !(e.metaKey || e.ctrlKey) || e.shiftKey || e.altKey) return;
+  const active = document.activeElement as HTMLElement | null;
+  if (active?.isContentEditable || active?.closest("input, textarea, select")) return;
+  e.preventDefault();
+  undoLastMove();
+}
+
+function renderBar(): void {
+  // A navigation replaced the page: the staged nodes are gone along with their moves.
+  if (staged.some((m) => !document.contains(m.node))) {
+    staged.length = 0;
+    applying = false;
+  }
+  if (staged.length === 0) {
+    bar?.remove();
+    bar = null;
+    return;
+  }
+  if (!bar || !document.contains(bar)) {
+    bar = document.createElement("div");
+    bar.id = "upstart-move-bar";
+    document.body.appendChild(bar);
+  }
+  const labels = getLabels();
+  const text = document.createElement("span");
+  text.textContent = `${labels.pendingMoves} ${staged.length}`;
+  bar.replaceChildren(
+    text,
+    barButton(labels.undoMove, false, undoLastMove),
+    barButton(labels.discardMoves, false, discardMoves),
+    barButton(labels.applyMoves, true, applyMoves),
+  );
+}
+
+function barButton(label: string, primary: boolean, action: () => void): HTMLButtonElement {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.textContent = label;
+  btn.disabled = applying;
+  if (primary) btn.setAttribute("data-primary", "");
+  btn.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    action();
+  });
+  return btn;
+}
+
+function drawIndicator(target: DropTarget | null): void {
+  indicator?.remove();
+  indicator = null;
+  if (!target) return;
+  const root = ensureLayer();
+  const r = target.element.getBoundingClientRect();
+  const line = document.createElement("div");
+  const thickness = 3;
+  const x = window.scrollX;
+  const y = window.scrollY;
+  const box =
+    target.axis === "vertical"
+      ? {
+          top: (target.position === "before" ? r.top - 4 : r.bottom + 4) + y - thickness / 2,
+          left: r.left + x,
+          width: r.width,
+          height: thickness,
+        }
+      : {
+          top: r.top + y,
+          left: (target.position === "before" ? r.left - 4 : r.right + 4) + x - thickness / 2,
+          width: thickness,
+          height: r.height,
+        };
+  line.setAttribute("data-upstart-drop-indicator", target.position);
+  line.style.cssText =
+    `position: absolute; top: ${box.top}px; left: ${box.left}px; width: ${box.width}px; ` +
+    `height: ${box.height}px; background: #7270c6; border-radius: 2px; pointer-events: none;`;
+  root.appendChild(line);
+  indicator = line;
+}
+
+function scheduleRefresh(): void {
+  if (rafId !== null) return;
+  rafId = requestAnimationFrame(() => {
+    rafId = null;
+    refreshMoveControls();
+  });
+}

package/src/vite-plugin-upstart-editor/runtime/types.ts

@@ -5,6 +5,7 @@ import type {
   PayloadArrayItemAdd,
   PayloadArrayItemDelete,
   PayloadArraySet,
+  PayloadMoveElements,
 } from "~/upstart-editor-api";
 import type { RuntimeLabels } from "./labels.js";
 
@@ -15,8 +16,9 @@ export type { RuntimeLabels } from "./labels.js";
  * - preview: navigate the site, no editing
  * - edit: click an element to edit it (inspector / inline text)
  * - select: pick multiple elements to attach to the next chat message
+ * - move: drag & drop elements, staged in the preview until applied
  */
-export type EditorMode = "preview" | "edit" | "select";
+export type EditorMode = "preview" | "edit" | "select" | "move";
 
 /**
  * A reference to an element picked in "select" mode. Built from the data-upstart-*
@@ -104,7 +106,8 @@ export type EditorMessage =
         | PayloadEditTextDirect
         | PayloadArrayItemAdd
         | PayloadArrayItemDelete
-        | PayloadArraySet;
+        | PayloadArraySet
+        | PayloadMoveElements;
     }
   | { type: "editor-ready"; path?: string }
   | { type: "editor-navigated"; path?: string }
@@ -158,6 +161,8 @@ export type ParentMessage =
   | { type: "restore-scroll-position"; x: number; y: number }
   | { type: "clear-selection" }
   | { type: "deselect"; key: string }
+  /** Applying the staged element moves failed: they stay staged in the preview. */
+  | { type: "moves-apply-failed" }
   /** Translated labels for the controls the runtime renders (see `runtime/labels.ts`). */
   | { type: "set-labels"; labels: Partial<RuntimeLabels> };