@upstart.gg/vite-plugins 0.1.83 → 0.1.85

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();
@@ -237,6 +251,21 @@ function handleParentMessage(event: MessageEvent): void {
     } else if (styleEl) {
       styleEl.remove();
     }
+  } else if (message.type === "preview-theme") {
+    // Appended last in <head> so it wins over the theme's own variables until it is cleared.
+    const STYLE_ID = "upstart-preview-theme";
+    let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+    const css = typeof message.css === "string" ? message.css : "";
+    if (css) {
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.id = STYLE_ID;
+      }
+      styleEl.textContent = css;
+      document.head.appendChild(styleEl);
+    } else if (styleEl) {
+      styleEl.remove();
+    }
   } else if (message.type === "request-scroll-position") {
     sendToParent({ type: "scroll-position", x: window.scrollX, y: window.scrollY });
   } else if (message.type === "restore-scroll-position") {
@@ -251,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();
   }
 }
 
@@ -288,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",