@valbuild/shared 0.150.2 → 0.150.8

package/dist/{getSitemapTree-667bcb3c.cjs.prod.js → getSitemapTree-873f7266.cjs.prod.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var createForOfIteratorHelper = require('./createForOfIteratorHelper-90e6a8b6.cjs.prod.js');
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-fef4fa7d.cjs.prod.js');
 var core = require('@valbuild/core');
 
 var VAL_CONFIG_SESSION_STORAGE_KEY = "val-config";
@@ -75,8 +75,16 @@ function isValCanvasPageMessage(data) {
   if (createForOfIteratorHelper._typeof(data) !== "object" || data === null) return false;
   var message = data;
   if (message.val !== VAL_CANVAS_MESSAGE) return false;
-  return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing";
+  return message.type === "ready" || message.type === "elements" || message.type === "clicked" || message.type === "pinch" || message.type === "zoom" || message.type === "refreshing" || message.type === "elementPickingStopped" || message.type === "elementPicked" && isPickedElement(data.element);
 }
+function isPickedElement(value) {
+  if (createForOfIteratorHelper._typeof(value) !== "object" || value === null) return false;
+  var element = value;
+  return typeof element.tag === "string" && typeof element.text === "string" && typeof element.selector === "string" && Array.isArray(element.classes) && element.classes.every(function (item) {
+    return typeof item === "string";
+  }) && (element.valPath === undefined || typeof element.valPath === "string");
+}
+var PICK_MODIFIERS = ["alt", "meta", "shift", "ctrl"];
 
 /**
  * Whether a value is a colour a `theme` message may carry.
@@ -108,6 +116,10 @@ function isValCanvasStudioMessage(data) {
     // at all, and there is one guard rather than one per framework binding.
     return isCanvasSelectionColor(message.selection) && isCanvasSelectionColor(message.selectionSoft);
   }
+  if (message.type === "pickElements") {
+    var pick = data;
+    return typeof pick.enabled === "boolean" && typeof pick.active === "boolean" && typeof pick.keepPicked === "boolean" && PICK_MODIFIERS.includes(pick.modifier);
+  }
   return message.type === "rescan" || message.type === "highlight" || message.type === "setPicking" || message.type === "sourceUpdate" || message.type === "sourcesSynced";
 }
 
@@ -150,6 +162,319 @@ function withValCanvasParam(url) {
   return "".concat(url).concat(separator).concat(VAL_CANVAS_PARAM, "=1");
 }
 
+/**
+ * Pointing at anything on a page, as Lovable's picker does: hover outlines
+ * the element under the pointer, a click picks it, and the assistant is told
+ * which (valbuild/home `docs/design-tab.md`).
+ *
+ * ANY element, not only what Val marks. The design tab changes code, and the
+ * thing a person wants changed is as often a wrapper, a gap or a button as a
+ * field -- so a field's path is extra information when there is one
+ * (`valPath`), never the condition for picking.
+ *
+ * Picking is on while a MODIFIER is held, so the page stays a page: links
+ * follow, menus open, and nothing has to be switched back off. `active`
+ * turns it on without one, for a Select button or a touch screen.
+ *
+ * Plain DOM, nothing of React's or the Studio's, and in `shared` because
+ * both halves need it: the canvas bridge (`@valbuild/next`,
+ * `@valbuild/tanstack`) runs it inside the proposal's page, which is another
+ * origin than the design tab and the only place the page's elements can be
+ * reached; the Studio's stories run it on a page of their own. Only the
+ * `PickedElement` crosses the frame (`valCanvasProtocol.ts`).
+ */
+
+var TEXT_LENGTH = 80;
+var CLASSES = 6;
+function describeElement(element, root) {
+  var _element$textContent, _element$closest$getA, _element$closest;
+  var text = ((_element$textContent = element.textContent) !== null && _element$textContent !== void 0 ? _element$textContent : "").replace(/\s+/g, " ").trim();
+  var valPath = (_element$closest$getA = (_element$closest = element.closest("[data-val-path]")) === null || _element$closest === void 0 ? void 0 : _element$closest.getAttribute("data-val-path")) !== null && _element$closest$getA !== void 0 ? _element$closest$getA : undefined;
+  return createForOfIteratorHelper._objectSpread2({
+    tag: element.tagName.toLowerCase(),
+    text: text.length > TEXT_LENGTH ? "".concat(text.slice(0, TEXT_LENGTH - 1), "\u2026") : text,
+    classes: Array.from(element.classList).slice(0, CLASSES),
+    selector: selectorOf(element, root)
+  }, valPath !== undefined ? {
+    valPath: valPath
+  } : {});
+}
+function selectorOf(element, root) {
+  var parts = [];
+  var at = element;
+  while (at !== null && at !== root) {
+    var tag = at.tagName.toLowerCase();
+    if (at.id !== "") {
+      parts.unshift("".concat(tag, "#").concat(at.id));
+      break;
+    }
+    var parent = at.parentElement;
+    var same = parent === null ? [] : Array.from(parent.children).filter(function (sibling) {
+      var _at;
+      return sibling.tagName === ((_at = at) === null || _at === void 0 ? void 0 : _at.tagName);
+    });
+    parts.unshift(same.length > 1 ? "".concat(tag, ":nth-of-type(").concat(same.indexOf(at) + 1, ")") : tag);
+    at = parent;
+  }
+  return parts.join(" > ");
+}
+
+/** What a person is told to hold, on their own keyboard. */
+function modifierLabel(modifier, mac) {
+  switch (modifier) {
+    case "alt":
+      return mac ? "⌥" : "Alt";
+    case "meta":
+      return mac ? "⌘" : "Win";
+    case "shift":
+      return mac ? "⇧" : "Shift";
+    case "ctrl":
+      return mac ? "⌃" : "Ctrl";
+  }
+}
+function held(event, modifier) {
+  switch (modifier) {
+    case "alt":
+      return event.altKey;
+    case "meta":
+      return event.metaKey;
+    case "shift":
+      return event.shiftKey;
+    case "ctrl":
+      return event.ctrlKey;
+  }
+}
+/**
+ * Listens on `root` (capturing, so the page's own handlers never see a pick)
+ * and returns what stops it.
+ */
+function attachElementPicker(root, options) {
+  var win = root.ownerDocument.defaultView;
+  var last = null;
+  var picking = function picking(event) {
+    return options.active() || held(event, options.modifier);
+  };
+  var target = function target(event) {
+    return event.target instanceof Element && root.contains(event.target) ? event.target : null;
+  };
+  var onMove = function onMove(event) {
+    last = {
+      x: event.clientX,
+      y: event.clientY
+    };
+    options.onHover(picking(event) ? target(event) : null);
+  };
+  var onClick = function onClick(event) {
+    if (!picking(event)) return;
+    var element = target(event);
+    if (element === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    options.onPick(element);
+  };
+  // Pressing the modifier with the pointer still: outline what is under it
+  // now, rather than after the next move.
+  var onKey = function onKey(event) {
+    if (!picking(event)) {
+      options.onHover(null);
+      return;
+    }
+    if (last === null) return;
+    var under = root.ownerDocument.elementFromPoint(last.x, last.y);
+    options.onHover(under !== null && root.contains(under) ? under : null);
+  };
+  var onLeave = function onLeave() {
+    last = null;
+    options.onHover(null);
+  };
+  root.addEventListener("mousemove", onMove, true);
+  root.addEventListener("click", onClick, true);
+  root.addEventListener("mouseleave", onLeave);
+  win === null || win === void 0 || win.addEventListener("keydown", onKey, true);
+  win === null || win === void 0 || win.addEventListener("keyup", onKey, true);
+  return function () {
+    root.removeEventListener("mousemove", onMove, true);
+    root.removeEventListener("click", onClick, true);
+    root.removeEventListener("mouseleave", onLeave);
+    win === null || win === void 0 || win.removeEventListener("keydown", onKey, true);
+    win === null || win === void 0 || win.removeEventListener("keyup", onKey, true);
+  };
+}
+
+/**
+ * The outlines over the page while picking: the element under the pointer,
+ * named, and the one picked.
+ *
+ * Boxes `position: fixed` on top of everything, with `pointer-events: none`,
+ * appended to the page's body -- not outlines on the elements themselves.
+ * The canvas's field outlines are a stylesheet so they cannot disturb the
+ * page's layout (`ValCanvasBridge`); a fixed box is out of the flow, so it
+ * cannot either, and it is the one way to put a NAME beside any element, which
+ * a selector cannot reach.
+ *
+ * In a shadow root of one host element: the bridge re-measures the page on
+ * every `style` change under `body`, and a box that follows the pointer
+ * changes its style every frame. Inside a shadow root those changes are not
+ * the page's, so the host's one insertion is all the bridge sees.
+ */
+
+var TOP = "2147483647";
+function createPickerOverlay(doc, initialColor) {
+  var color = initialColor;
+  var shown = {
+    hover: null,
+    picked: null
+  };
+  var host = doc.createElement("div");
+  host.setAttribute("data-val-picker", "");
+  var shadow = host.attachShadow({
+    mode: "open"
+  });
+  doc.body.appendChild(host);
+  var box = function box(kind) {
+    var el = doc.createElement("div");
+    el.setAttribute("data-kind", kind);
+    Object.assign(el.style, {
+      position: "fixed",
+      pointerEvents: "none",
+      zIndex: TOP,
+      boxSizing: "border-box",
+      display: "none"
+    });
+    shadow.appendChild(el);
+    return el;
+  };
+  var boxes = {
+    hover: box("hover"),
+    picked: box("picked")
+  };
+  var label = doc.createElement("span");
+  Object.assign(label.style, {
+    position: "absolute",
+    left: "-2px",
+    padding: "1px 4px",
+    borderRadius: "2px",
+    font: "500 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace",
+    color: "#fff",
+    whiteSpace: "nowrap"
+  });
+  boxes.hover.appendChild(label);
+  // The pointer says it is picking, and a link under it is not a link.
+  var cursor = doc.createElement("style");
+  cursor.textContent = "[data-val-picking] * { cursor: crosshair !important; }";
+  doc.head.appendChild(cursor);
+  var place = function place(kind) {
+    var element = shown[kind];
+    var el = boxes[kind];
+    if (element === null || !element.isConnected) {
+      el.style.display = "none";
+      return;
+    }
+    var rect = element.getBoundingClientRect();
+    Object.assign(el.style, {
+      display: "block",
+      top: "".concat(rect.top - 2, "px"),
+      left: "".concat(rect.left - 2, "px"),
+      width: "".concat(rect.width + 4, "px"),
+      height: "".concat(rect.height + 4, "px"),
+      border: "2px ".concat(kind === "hover" ? "solid" : "dashed", " ").concat(color)
+    });
+    if (kind === "hover") {
+      label.textContent = elementLabel(element);
+      label.style.background = color;
+      // Above the box, unless that is off the top of the window.
+      if (rect.top >= 18) {
+        label.style.top = "";
+        label.style.bottom = "100%";
+      } else {
+        label.style.bottom = "";
+        label.style.top = "100%";
+      }
+    }
+  };
+  var frame = null;
+  var win = doc.defaultView;
+  var reposition = function reposition() {
+    if (frame !== null || win === null) return;
+    frame = win.requestAnimationFrame(function () {
+      frame = null;
+      place("hover");
+      place("picked");
+    });
+  };
+  win === null || win === void 0 || win.addEventListener("scroll", reposition, true);
+  win === null || win === void 0 || win.addEventListener("resize", reposition);
+  return {
+    show: function show(kind, element) {
+      shown[kind] = element;
+      if (kind === "hover") {
+        if (element !== null) {
+          doc.documentElement.setAttribute("data-val-picking", "");
+        } else {
+          doc.documentElement.removeAttribute("data-val-picking");
+        }
+      }
+      place(kind);
+    },
+    setColor: function setColor(next) {
+      color = next;
+      place("hover");
+      place("picked");
+    },
+    destroy: function destroy() {
+      if (frame !== null) win === null || win === void 0 || win.cancelAnimationFrame(frame);
+      win === null || win === void 0 || win.removeEventListener("scroll", reposition, true);
+      win === null || win === void 0 || win.removeEventListener("resize", reposition);
+      host.remove();
+      cursor.remove();
+      doc.documentElement.removeAttribute("data-val-picking");
+    }
+  };
+}
+
+/** `h2.mb-6.text-2xl`: what the hover box is named. */
+function elementLabel(element) {
+  var classes = Array.from(element.classList).slice(0, 2);
+  return [element.tagName.toLowerCase()].concat(createForOfIteratorHelper._toConsumableArray(classes)).join(".");
+}
+/**
+ * Picking on a page, whole: the listeners, the outlines, and Esc to stop
+ * picking without the modifier. What a canvas bridge mounts.
+ */
+function startElementPicking(root, options) {
+  var _doc$defaultView;
+  var doc = root.ownerDocument;
+  var overlay = createPickerOverlay(doc, options.color);
+  var detach = attachElementPicker(root, {
+    modifier: options.modifier,
+    active: options.active,
+    onHover: function onHover(element) {
+      return overlay.show("hover", element);
+    },
+    onPick: function onPick(element) {
+      overlay.show("hover", null);
+      overlay.show("picked", element);
+      options.onPick(describeElement(element, root));
+    }
+  });
+  var onKey = function onKey(event) {
+    if (event.key === "Escape" && options.active()) options.onStop();
+  };
+  (_doc$defaultView = doc.defaultView) === null || _doc$defaultView === void 0 || _doc$defaultView.addEventListener("keydown", onKey);
+  return {
+    clearPicked: function clearPicked() {
+      return overlay.show("picked", null);
+    },
+    setColor: overlay.setColor,
+    stop: function stop() {
+      var _doc$defaultView2;
+      (_doc$defaultView2 = doc.defaultView) === null || _doc$defaultView2 === void 0 || _doc$defaultView2.removeEventListener("keydown", onKey);
+      detach();
+      overlay.destroy();
+    }
+  };
+}
+
 function parseRoutePattern(pattern) {
   if (pattern === "" || pattern === "/") {
     return [];
@@ -398,6 +723,10 @@ exports.VAL_CANVAS_MESSAGE = VAL_CANVAS_MESSAGE;
 exports.VAL_CANVAS_PARAM = VAL_CANVAS_PARAM;
 exports.VAL_CONFIG_SESSION_STORAGE_KEY = VAL_CONFIG_SESSION_STORAGE_KEY;
 exports.VAL_THEME_SESSION_STORAGE_KEY = VAL_THEME_SESSION_STORAGE_KEY;
+exports.attachElementPicker = attachElementPicker;
+exports.createPickerOverlay = createPickerOverlay;
+exports.describeElement = describeElement;
+exports.elementLabel = elementLabel;
 exports.formatRoutePattern = formatRoutePattern;
 exports.getNextAppRouterSourceFolder = getNextAppRouterSourceFolder;
 exports.getPageRouterSitemapTree = getPageRouterSitemapTree;
@@ -408,5 +737,7 @@ exports.isTanStackRoutesFolder = isTanStackRoutesFolder;
 exports.isValCanvasFrame = isValCanvasFrame;
 exports.isValCanvasPageMessage = isValCanvasPageMessage;
 exports.isValCanvasStudioMessage = isValCanvasStudioMessage;
+exports.modifierLabel = modifierLabel;
 exports.parseRoutePattern = parseRoutePattern;
+exports.startElementPicking = startElementPicking;
 exports.withValCanvasParam = withValCanvasParam;