@upstart.gg/vite-plugins 0.1.84 → 0.1.85

package/src/vite-plugin-upstart-attrs.ts

@@ -70,7 +70,8 @@ export interface EditableSegment {
 // Registry entry for editable elements (text, rich-text, className, mixed-text)
 export interface EditableEntry {
   file: string;
-  type: "text" | "rich-text" | "className" | "mixed-text" | "image";
+  // "element": the full source range of a JSX element the editor can move (drag & drop).
+  type: "text" | "rich-text" | "className" | "mixed-text" | "image" | "element";
   startOffset: number;
   endOffset: number;
   originalContent: string;
@@ -120,6 +121,8 @@ interface TransformState {
    * `function Hero({ heroImageSrc = "/images/hero.webp" })`.
    */
   paramDefaults: Map<string, StringLiteralNode>[];
+  /** Start offsets of the enclosing functions, innermost last — used as the drag & drop scope. */
+  functionStack: number[];
 }
 
 type StringLiteralNode = NodeWithRange & { type: "Literal"; value: string };
@@ -290,13 +293,14 @@ export function transformWithOxc(code: string, filePath: string) {
     tFunctions: new Map(),
     constantNodes: new Map(),
     paramDefaults: [],
+    functionStack: [],
   };
 
   let modified = false;
 
   // Use zimmerframe to walk and transform the AST
   walk(ast.program as Program, state, {
-    _(node: Node, { state, next }: { state: TransformState; next: () => void }) {
+    _(node: Node, { state, next, path }: { state: TransformState; next: () => void; path: Node[] }) {
       // Track useTranslation() calls to resolve t() function namespaces
       if (node.type === "VariableDeclaration") {
         trackUseTranslation(node, state);
@@ -326,7 +330,9 @@ export function transformWithOxc(code: string, filePath: string) {
         node.type === "ArrowFunctionExpression"
       ) {
         state.paramDefaults.push(collectParamStringDefaults((node as any).params ?? []));
+        state.functionStack.push(hasRange(node) ? node.start : -1);
         next();
+        state.functionStack.pop();
         state.paramDefaults.pop();
         return;
       }
@@ -715,6 +721,44 @@ export function transformWithOxc(code: string, filePath: string) {
           }
         }
 
+        // Movable element (editor drag & drop): any HTML element that is a direct child of
+        // another JSX element, so moving its source range keeps valid JSX. Elements rendered in
+        // a loop or conditionally are never movable, nor components (their DOM may not carry
+        // the attributes) and what lives in <head>, an <svg> or a <Trans>. The only content of an
+        // HTML element is not movable either: its parent is what gets moved (one handle per
+        // visual block, and no empty wrapper left behind).
+        const scopeStart = state.functionStack[state.functionStack.length - 1];
+        const parent = path[path.length - 1];
+        if (
+          tagName &&
+          /^[a-z]/.test(tagName) &&
+          !NON_MOVABLE_TAGS.has(tagName) &&
+          !isInsideNonMovableContainer(path) &&
+          !isOnlyContentOfHtmlElement(jsxNode, parent) &&
+          state.loopStack.length === 0 &&
+          scopeStart !== undefined &&
+          scopeStart >= 0 &&
+          (parent?.type === "JSXElement" || parent?.type === "JSXFragment") &&
+          hasRange(jsxNode)
+        ) {
+          const id = generateId(state.filePath, jsxNode);
+          editableRegistry.set(id, {
+            file: state.filePath,
+            type: "element",
+            startOffset: jsxNode.start,
+            endOffset: jsxNode.end,
+            originalContent: state.code.slice(jsxNode.start, jsxNode.end),
+            context: {
+              parentTag:
+                parent.type === "JSXElement"
+                  ? (getJSXElementName(parent.openingElement) ?? "unknown")
+                  : "fragment",
+            },
+          });
+          attributes.push(`data-upstart-move-id="${escapeProp(id)}"`);
+          attributes.push(`data-upstart-move-scope="${escapeProp(`${state.filePath}:${scopeStart}`)}"`);
+        }
+
         // Inject attributes if any
         if (insertPos !== -1 && attributes.length > 0) {
           const attrString = " " + attributes.join(" ");
@@ -737,6 +781,53 @@ export function transformWithOxc(code: string, filePath: string) {
   };
 }
 
+// Elements the editor never offers to move (document structure, invisible or meaningless alone).
+const NON_MOVABLE_TAGS = new Set([
+  "html",
+  "head",
+  "body",
+  "meta",
+  "link",
+  "script",
+  "style",
+  "title",
+  "base",
+  "br",
+  "wbr",
+  "source",
+  "track",
+  "option",
+  "optgroup",
+]);
+
+// Ancestors whose children are not movable: <head> content, SVG internals, <Trans> slots.
+const NON_MOVABLE_CONTAINERS = new Set(["head", "svg", "Trans"]);
+
+function isInsideNonMovableContainer(path: Node[]): boolean {
+  return path.some((node) => {
+    if (node.type !== "JSXElement") return false;
+    const name = getJSXElementName((node as JSXElement).openingElement);
+    return name !== null && NON_MOVABLE_CONTAINERS.has(name);
+  });
+}
+
+/**
+ * True when `node` is the only meaningful child of an HTML element: no sibling element,
+ * non-blank text or expression. Children of components are not concerned (a component is
+ * never movable itself, so its child stays the way to move that content).
+ */
+function isOnlyContentOfHtmlElement(node: JSXElement, parent: Node | undefined): boolean {
+  if (parent?.type !== "JSXElement") return false;
+  const parentName = getJSXElementName((parent as JSXElement).openingElement);
+  if (!parentName || !/^[a-z]/.test(parentName)) return false;
+  return (parent as JSXElement).children.every((child) => {
+    if (child === node) return true;
+    if (child.type === "JSXText") return (child as { value: string }).value.trim() === "";
+    if (child.type === "JSXExpressionContainer") return child.expression.type === "JSXEmptyExpression";
+    return false;
+  });
+}
+
 // Helper: Get JSX element name
 function getJSXElementName(opening: JSXOpeningElement): string | null {
   if (opening.name.type === "JSXIdentifier") {

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

@@ -1,6 +1,7 @@
 import { getCurrentMode } from "./state.js";
 import { sendToParent } from "./utils.js";
 import { getLabels } from "./labels.js";
+import { baseButton, createControlsLayer, cssAttr, setIcon } from "./controls-ui.js";
 
 // Editor-only controls for inline-array .map() lists. Add/delete are staged LOCALLY
 // (no server round-trip per action): "×" marks an item for removal, "+" inserts an
@@ -191,12 +192,7 @@ export function hideArrayControls(): void {
 
 function ensureLayer(): HTMLDivElement {
   if (layer) return layer;
-  layer = document.createElement("div");
-  layer.id = "upstart-array-controls";
-  layer.style.cssText =
-    "position: absolute; top: 0; left: 0; width: 0; height: 0; " +
-    "pointer-events: none; z-index: 2147483646;";
-  document.body.appendChild(layer);
+  layer = createControlsLayer("upstart-array-controls");
   return layer;
 }
 
@@ -237,10 +233,6 @@ function isReordered(arrayId: string): boolean {
   return false;
 }
 
-function cssAttr(value: string): string {
-  return value.replace(/["\\]/g, "\\$&");
-}
-
 function textOf(el: HTMLElement): string {
   return (el.textContent ?? "").trim();
 }
@@ -261,36 +253,6 @@ function applyDeletionStyle(item: HTMLElement, marked: boolean): void {
 // Buttons
 // ---------------------------------------------------------------------------
 
-// Geometric SVG icons — centred by the flex container + viewBox, so they don't
-// depend on the host page's font metrics (which left text glyphs mis-aligned).
-const ICON_PATHS: Record<string, string> = {
-  plus: '<path d="M12 5v14M5 12h14"/>',
-  cross: '<path d="M6 6 18 18M18 6 6 18"/>',
-  check: '<path d="M5 12.5 10 17.5 19 7"/>',
-  restore: '<path d="M3 4v5h5"/><path d="M3.5 9a8.5 8.5 0 1 0 2.2-3.8L3 9"/>',
-  grip: '<circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/>',
-};
-
-function setIcon(btn: HTMLElement, name: keyof typeof ICON_PATHS, px: number): void {
-  const dots = name === "grip";
-  btn.innerHTML =
-    `<svg width="${px}" height="${px}" viewBox="0 0 24 24" ` +
-    `fill="${dots ? "currentColor" : "none"}" stroke="${dots ? "none" : "currentColor"}" ` +
-    'stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" ' +
-    `style="display:block;pointer-events:none">${ICON_PATHS[name]}</svg>`;
-}
-
-function baseButton(top: number, left: number, size: number, bg: string): HTMLButtonElement {
-  const btn = document.createElement("button");
-  btn.type = "button";
-  btn.style.cssText =
-    `position: absolute; top: ${top}px; left: ${left}px; width: ${size}px; height: ${size}px; ` +
-    "padding: 0; display: flex; align-items: center; justify-content: center; " +
-    `background: ${bg}; color: #fff; border: 1px solid #fff; border-radius: 50%; ` +
-    "line-height: 1; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.3);";
-  return btn;
-}
-
 function makeItemDeleteButton(
   arrayId: string,
   index: number,

package/src/vite-plugin-upstart-editor/runtime/click-handler.ts

@@ -206,6 +206,15 @@ function handleSelectClick(event: MouseEvent, target: HTMLElement): void {
 
 function handleClick(event: MouseEvent): void {
   const mode = getCurrentMode();
+  if (mode === "move") {
+    // The page is inert while moving elements: following a link or submitting a form would
+    // reload the page and drop the staged moves. The move controls handle their own clicks.
+    const target = event.target as HTMLElement | null;
+    if (target?.closest("#upstart-move-controls, #upstart-move-bar")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    return;
+  }
   if (mode !== "edit" && mode !== "select") {
     return;
   }
@@ -225,9 +234,14 @@ function handleClick(event: MouseEvent): void {
     return;
   }
 
-  // Editor-only chrome (the array ×/+/✓ controls) and locally-staged draft list
-  // items handle their own clicks and must never be treated as element selection.
-  if (target.closest("#upstart-array-controls, [data-upstart-draft-item]")) {
+  // Editor-only chrome (the array ×/+/✓ controls, the move handles and pending-moves bar)
+  // and locally-staged draft list items handle their own clicks and must never be treated
+  // as element selection.
+  if (
+    target.closest(
+      "#upstart-array-controls, #upstart-move-controls, #upstart-move-bar, [data-upstart-draft-item]",
+    )
+  ) {
     return;
   }
 

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

@@ -0,0 +1,48 @@
+// Shared building blocks of the editor-only controls (array list buttons, move handles).
+
+// Geometric SVG icons — centred by the flex container + viewBox, so they don't
+// depend on the host page's font metrics (which left text glyphs mis-aligned).
+const ICON_PATHS = {
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  cross: '<path d="M6 6 18 18M18 6 6 18"/>',
+  check: '<path d="M5 12.5 10 17.5 19 7"/>',
+  restore: '<path d="M3 4v5h5"/><path d="M3.5 9a8.5 8.5 0 1 0 2.2-3.8L3 9"/>',
+  grip: '<circle cx="9" cy="6" r="1.5"/><circle cx="15" cy="6" r="1.5"/><circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/><circle cx="9" cy="18" r="1.5"/><circle cx="15" cy="18" r="1.5"/>',
+} as const;
+
+export type IconName = keyof typeof ICON_PATHS;
+
+export function setIcon(btn: HTMLElement, name: IconName, px: number): void {
+  const dots = name === "grip";
+  btn.innerHTML =
+    `<svg width="${px}" height="${px}" viewBox="0 0 24 24" ` +
+    `fill="${dots ? "currentColor" : "none"}" stroke="${dots ? "none" : "currentColor"}" ` +
+    'stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" ' +
+    `style="display:block;pointer-events:none">${ICON_PATHS[name]}</svg>`;
+}
+
+export function baseButton(top: number, left: number, size: number, bg: string): HTMLButtonElement {
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.style.cssText =
+    `position: absolute; top: ${top}px; left: ${left}px; width: ${size}px; height: ${size}px; ` +
+    "padding: 0; display: flex; align-items: center; justify-content: center; " +
+    `background: ${bg}; color: #fff; border: 1px solid #fff; border-radius: 50%; ` +
+    "line-height: 1; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 3px rgba(0,0,0,0.3);";
+  return btn;
+}
+
+/** Absolutely positioned, click-through layer appended to <body> that hosts editor controls. */
+export function createControlsLayer(id: string): HTMLDivElement {
+  const layer = document.createElement("div");
+  layer.id = id;
+  layer.style.cssText =
+    "position: absolute; top: 0; left: 0; width: 0; height: 0; " +
+    "pointer-events: none; z-index: 2147483646;";
+  document.body.appendChild(layer);
+  return layer;
+}
+
+export function cssAttr(value: string): string {
+  return value.replace(/["\\]/g, "\\$&");
+}

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

@@ -4,6 +4,12 @@ import { initErrorHandler } from "./error-handler.js";
 import { installDomGuard } from "./dom-guard.js";
 import { initTextEditor, activateAllEditors, destroyAllActiveEditors } from "./text-editor.js";
 import { initArrayControls, refreshArrayControls, hideArrayControls } from "./array-controls.js";
+import {
+  initMoveControls,
+  refreshMoveControls,
+  hideMoveControls,
+  onMovesApplyFailed,
+} from "./move-controls.js";
 import { initFormGuard } from "./form-guard.js";
 import { sendToParent } from "./utils.js";
 import { getCurrentMode, setCurrentMode, clearSelection, removeSelection, getSelection } from "./state.js";
@@ -22,13 +28,20 @@ export function setMode(mode: EditorMode): void {
   console.log(`[Upstart Editor] Setting mode to: ${mode}`);
   if (mode === "edit") {
     disableSelectMode();
+    disableMoveMode();
     enableEditMode();
   } else if (mode === "select") {
     disableEditMode();
+    disableMoveMode();
     enableSelectMode();
+  } else if (mode === "move") {
+    disableEditMode();
+    disableSelectMode();
+    enableMoveMode();
   } else {
     disableEditMode();
     disableSelectMode();
+    disableMoveMode();
   }
 }
 
@@ -156,6 +169,7 @@ export function initUpstartEditor(): void {
     initClickHandler();
     initHoverOverlay();
     initArrayControls();
+    initMoveControls();
     initFormGuard();
     initErrorHandler();
     initRouteReporter();
@@ -266,6 +280,8 @@ function handleParentMessage(event: MessageEvent): void {
     sendToParent({ type: "selection-changed", selection: getSelection() });
   } else if (message.type === "set-labels") {
     setLabels(message.labels);
+  } else if (message.type === "moves-apply-failed") {
+    onMovesApplyFailed();
   }
 }
 
@@ -303,6 +319,21 @@ function enableSelectMode(): void {
   document.documentElement.setAttribute("data-upstart-select-mode", "");
 }
 
+function enableMoveMode(): void {
+  console.log("[Upstart Editor] Move mode enabled");
+  document.documentElement.setAttribute("data-upstart-move-mode", "");
+  refreshMoveControls();
+}
+
+/**
+ * Staged moves are kept when leaving the mode (the moved elements stay where they were
+ * dropped); the pending-moves bar comes back with the mode.
+ */
+function disableMoveMode(): void {
+  document.documentElement.removeAttribute("data-upstart-move-mode");
+  hideMoveControls();
+}
+
 function disableSelectMode(): void {
   document.documentElement.removeAttribute("data-upstart-select-mode");
   hideOverlays();

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

@@ -11,6 +11,11 @@ export interface RuntimeLabels {
   addItem: string;
   applyChanges: string;
   dragToReorder: string;
+  dragToMove: string;
+  pendingMoves: string;
+  undoMove: string;
+  discardMoves: string;
+  applyMoves: string;
   clickToEdit: string;
   startTyping: string;
   recoveryTitle: string;
@@ -34,6 +39,11 @@ export const DEFAULT_LABELS: Readonly<RuntimeLabels> = Object.freeze({
   addItem: "Add item",
   applyChanges: "Apply changes",
   dragToReorder: "Drag to reorder",
+  dragToMove: "Drag to move",
+  pendingMoves: "Moves not saved yet:",
+  undoMove: "Undo",
+  discardMoves: "Discard all",
+  applyMoves: "Apply",
   clickToEdit: "Click to edit...",
   startTyping: "Start typing...",
   recoveryTitle: "The preview needs a refresh",