@valbuild/shared 0.150.3 → 0.150.8

package/dist/{getSitemapTree-5afbc3ac.esm.js → getSitemapTree-b6161fd8.esm.js}

@@ -1,4 +1,4 @@
-import { _ as _typeof, a as _createForOfIteratorHelper, b as _objectSpread2 } from './createForOfIteratorHelper-3db5d737.esm.js';
+import { _ as _typeof, a as _objectSpread2, b as _toConsumableArray, c as _createForOfIteratorHelper } from './createForOfIteratorHelper-666a6d17.esm.js';
 import { Internal, tanStackSegmentsOfRoutePath } from '@valbuild/core';
 
 var VAL_CONFIG_SESSION_STORAGE_KEY = "val-config";
@@ -73,8 +73,16 @@ function isValCanvasPageMessage(data) {
   if (_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 (_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.
@@ -106,6 +114,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";
 }
 
@@ -148,6 +160,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 _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(_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 [];
@@ -389,4 +714,4 @@ function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
   .replace("/page.val.ts", "").replace("/page.val.js", "");
 }
 
-export { DEFAULT_CANVAS_SELECTION as D, VAL_CONFIG_SESSION_STORAGE_KEY as V, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, formatRoutePattern as h, isValCanvasPageMessage as i, getNextAppRouterSourceFolder as j, getTanStackRouterSourceFolder as k, getPageRouterSourceFolder as l, isTanStackRoutesFolder as m, getPageRouterSitemapTree as n, getPatternFromModuleFilePath as o, parseRoutePattern as p, withValCanvasParam as w };
+export { DEFAULT_CANVAS_SELECTION as D, VAL_CONFIG_SESSION_STORAGE_KEY as V, VAL_THEME_SESSION_STORAGE_KEY as a, VAL_AI_SESSION_STORAGE_KEY as b, VAL_CANVAS_PARAM as c, VAL_CANVAS_MESSAGE as d, DEFAULT_CANVAS_SELECTION_SOFT as e, isValCanvasStudioMessage as f, isValCanvasFrame as g, describeElement as h, isValCanvasPageMessage as i, attachElementPicker as j, createPickerOverlay as k, elementLabel as l, modifierLabel as m, formatRoutePattern as n, getNextAppRouterSourceFolder as o, parseRoutePattern as p, getTanStackRouterSourceFolder as q, getPageRouterSourceFolder as r, startElementPicking as s, isTanStackRoutesFolder as t, getPageRouterSitemapTree as u, getPatternFromModuleFilePath as v, withValCanvasParam as w };