@valbuild/shared 0.150.8 → 0.150.11

package/dist/getSitemapTree-5354ce90.cjs.prod.js

@@ -0,0 +1,1421 @@
+'use strict';
+
+var createForOfIteratorHelper = require('./createForOfIteratorHelper-9ca2078d.cjs.prod.js');
+var core = require('@valbuild/core');
+
+var VAL_CONFIG_SESSION_STORAGE_KEY = "val-config";
+var VAL_THEME_SESSION_STORAGE_KEY = "val-theme";
+var VAL_AI_SESSION_STORAGE_KEY = "val-ai-session";
+
+/**
+ * A quick preview: a proposal's page, running the proposal's CLIENT code
+ * built in the design tab, without a build being uploaded or served
+ * (valbuild/home `docs/design-tab.md`).
+ *
+ * A full build of a proposal bundles the app for the server and the browser,
+ * uploads it, and has the platform render every page before it is served --
+ * minutes. Most of what the design tab changes is components and styles,
+ * which the browser half alone shows. So the tab bundles the app in its
+ * builder worker, and a service worker on the proposal's address hands the
+ * page that bundle instead of the served one:
+ *
+ * 1. The tab sends the files (`/_app/app.js`, its chunks, the stylesheet and
+ *    assets) to the page in the preview, over the canvas protocol.
+ * 2. The page -- the bridge, which is the only thing at that origin the tab
+ *    can talk to -- registers {@link QUICK_PREVIEW_SERVICE_WORKER_SOURCE}
+ *    and stores the files in it (Cache Storage, so a worker the browser
+ *    stopped still has them).
+ * 3. The tab opens the page with `?val_quick=<id>`. The worker serves that
+ *    document's `/_app/` requests from the files, and everything else from
+ *    the network: the HTML is the last build's, rendered by its server, and
+ *    the new code takes it over in the browser.
+ *
+ * What it cannot show, and the tab says so: anything on the server. Server
+ * functions, API routes and loaders that run there are the last build's, as
+ * is the page's first render and its `head`. A new dependency is not there
+ * either. A build is still what decides, before Publish.
+ *
+ * Only a document opened with the parameter is served from the files, so a
+ * visitor to the proposal's address -- even in the same browser -- is never
+ * given them.
+ */
+
+/** The parameter a quick preview's page is opened with. */
+var QUICK_PREVIEW_PARAM = "val_quick";
+
+/** Where Val's API serves the worker: under `/api/val`. */
+var QUICK_PREVIEW_SERVICE_WORKER_PATH = "/quick-preview-sw.js";
+
+/** What the page sends the worker to store a preview's files. */
+var QUICK_PREVIEW_STORE_MESSAGE = "val-quick-preview-store";
+
+/**
+ * A preview's files, by their path under `/_app/`: `app.js`, `c-<hash>.js`,
+ * `app.css`, `a/<hash>.png`. A binary file is base64.
+ */
+
+/**
+ * The files of a quick preview: paths under `/_app/` with no way out of it,
+ * each a string body and a type.
+ */
+function isQuickPreviewFiles(value) {
+  if (createForOfIteratorHelper._typeof(value) !== "object" || value === null) return false;
+  return Object.entries(value).every(function (_ref) {
+    var _ref2 = createForOfIteratorHelper._slicedToArray(_ref, 2),
+      path = _ref2[0],
+      file = _ref2[1];
+    return /^[A-Za-z0-9_][A-Za-z0-9_./-]*$/.test(path) && !path.includes("..") && createForOfIteratorHelper._typeof(file) === "object" && file !== null && typeof file.body === "string" && typeof file.contentType === "string";
+  });
+}
+
+/**
+ * The worker, as the source it is served as: plain, and small, because it is
+ * served as a file of its own (`demoServiceWorker.ts` is the same).
+ */
+var QUICK_PREVIEW_SERVICE_WORKER_SOURCE = "\n\"use strict\";\nconst PARAM = \"".concat(QUICK_PREVIEW_PARAM, "\";\nconst CACHE = \"val-quick-preview\";\nconst PREFIX = \"/__val_quick/\";\nconst INDEX = PREFIX + \"index\";\nconst KEEP = 4;\n\nself.addEventListener(\"install\", () => self.skipWaiting());\nself.addEventListener(\"activate\", (event) => {\n  event.waitUntil(self.clients.claim());\n});\n\nself.addEventListener(\"message\", (event) => {\n  const data = event.data;\n  if (!data || data.type !== \"").concat(QUICK_PREVIEW_STORE_MESSAGE, "\") return;\n  const port = event.ports && event.ports[0];\n  event.waitUntil(\n    store(data.id, data.files).then(\n      () => port && port.postMessage({ ok: true }),\n      (error) =>\n        port &&\n        port.postMessage({\n          ok: false,\n          message: String((error && error.message) || error),\n        }),\n    ),\n  );\n});\n\nfunction keyOf(id, path) {\n  return PREFIX + id + \"/\" + path;\n}\n\nasync function store(id, files) {\n  const cache = await caches.open(CACHE);\n  for (const path of Object.keys(files)) {\n    const file = files[path];\n    const body = file.base64\n      ? Uint8Array.from(atob(file.body), (c) => c.charCodeAt(0))\n      : file.body;\n    await cache.put(\n      keyOf(id, path),\n      new Response(body, {\n        headers: { \"Content-Type\": file.contentType, \"Cache-Control\": \"no-store\" },\n      }),\n    );\n  }\n  // The newest few previews are kept; older ones are deleted.\n  const index = await cache.match(INDEX);\n  const ids = [id].concat(\n    (index ? await index.json() : []).filter((other) => other !== id),\n  );\n  const dropped = ids.slice(KEEP);\n  if (dropped.length > 0) {\n    for (const request of await cache.keys()) {\n      const path = new URL(request.url).pathname;\n      if (dropped.some((old) => path.startsWith(PREFIX + old + \"/\"))) {\n        await cache.delete(request);\n      }\n    }\n  }\n  await cache.put(INDEX, new Response(JSON.stringify(ids.slice(0, KEEP))));\n}\n\n/** Which preview a document is: by its id, or by the address it was opened at. */\nconst byClient = new Map();\nasync function previewOf(clientId) {\n  if (!clientId) return null;\n  if (byClient.has(clientId)) return byClient.get(clientId);\n  const client = await self.clients.get(clientId);\n  const id = client ? new URL(client.url).searchParams.get(PARAM) : null;\n  byClient.set(clientId, id);\n  return id;\n}\n\nself.addEventListener(\"fetch\", (event) => {\n  const url = new URL(event.request.url);\n  if (url.origin !== self.location.origin) return;\n  if (event.request.mode === \"navigate\") {\n    if (event.resultingClientId) {\n      byClient.set(event.resultingClientId, url.searchParams.get(PARAM));\n    }\n    return;\n  }\n  if (!url.pathname.startsWith(\"/_app/\")) return;\n  event.respondWith(serve(event, url));\n});\n\nasync function serve(event, url) {\n  const id = await previewOf(event.clientId);\n  if (id) {\n    const hit = await caches.match(keyOf(id, url.pathname.slice(6)), {\n      cacheName: CACHE,\n    });\n    if (hit) return hit;\n  }\n  return fetch(event.request);\n}\n");
+
+/** How long the worker is given to install and store a preview. */
+var STORE_TIMEOUT_MS = 30000;
+
+/**
+ * Store a preview's files in the worker, registering it first: what the
+ * bridge does when the tab sends `quickPreview`. `swUrl` is the worker's
+ * address on this origin (`/api/val` + {@link QUICK_PREVIEW_SERVICE_WORKER_PATH}).
+ */
+function storeQuickPreview(_x, _x2, _x3) {
+  return _storeQuickPreview.apply(this, arguments);
+}
+
+/** The registration's worker, once it is active. */
+function _storeQuickPreview() {
+  _storeQuickPreview = createForOfIteratorHelper._asyncToGenerator(/*#__PURE__*/createForOfIteratorHelper._regenerator().m(function _callee(id, files, options) {
+    var _options$container;
+    var container, registration, worker;
+    return createForOfIteratorHelper._regenerator().w(function (_context) {
+      while (1) switch (_context.n) {
+        case 0:
+          container = (_options$container = options.container) !== null && _options$container !== void 0 ? _options$container : typeof navigator !== "undefined" ? navigator.serviceWorker : undefined;
+          if (!(container === undefined)) {
+            _context.n = 1;
+            break;
+          }
+          throw new Error("This browser cannot show a quick preview here: it has no service workers on this address (a private window, or one that is not https).");
+        case 1:
+          _context.n = 2;
+          return container.register(options.swUrl, {
+            scope: "/"
+          });
+        case 2:
+          registration = _context.v;
+          _context.n = 3;
+          return activeWorker(registration);
+        case 3:
+          worker = _context.v;
+          _context.n = 4;
+          return new Promise(function (resolve, reject) {
+            var channel = new MessageChannel();
+            var timer = setTimeout(function () {
+              return reject(new Error("The quick preview's worker did not store the files."));
+            }, STORE_TIMEOUT_MS);
+            channel.port1.onmessage = function (event) {
+              clearTimeout(timer);
+              var answer = event.data;
+              if (createForOfIteratorHelper._typeof(answer) === "object" && answer !== null && "ok" in answer && answer.ok === true) {
+                resolve();
+              } else {
+                reject(new Error(createForOfIteratorHelper._typeof(answer) === "object" && answer !== null && "message" in answer && typeof answer.message === "string" ? answer.message : "The quick preview's worker could not store the files."));
+              }
+            };
+            worker.postMessage({
+              type: QUICK_PREVIEW_STORE_MESSAGE,
+              id: id,
+              files: files
+            }, [channel.port2]);
+          });
+        case 4:
+          return _context.a(2);
+      }
+    }, _callee);
+  }));
+  return _storeQuickPreview.apply(this, arguments);
+}
+function activeWorker(registration) {
+  var _registration$install;
+  var active = registration.active;
+  if (active !== null) return Promise.resolve(active);
+  var pending = (_registration$install = registration.installing) !== null && _registration$install !== void 0 ? _registration$install : registration.waiting;
+  if (pending === null) {
+    return Promise.reject(new Error("The quick preview's worker did not install."));
+  }
+  return new Promise(function (resolve, reject) {
+    var timer = setTimeout(function () {
+      return reject(new Error("The quick preview's worker did not start."));
+    }, STORE_TIMEOUT_MS);
+    pending.addEventListener("statechange", function () {
+      if (pending.state === "activated") {
+        clearTimeout(timer);
+        resolve(pending);
+      } else if (pending.state === "redundant") {
+        clearTimeout(timer);
+        reject(new Error("The quick preview's worker was replaced."));
+      }
+    });
+  });
+}
+
+/** The address of a page as a quick preview `id`. */
+function withQuickPreviewParam(url, id) {
+  var parsed = new URL(url);
+  parsed.searchParams.set(QUICK_PREVIEW_PARAM, id);
+  return parsed.toString();
+}
+
+/**
+ * The one origin allowed to send this page a quick preview: the site's, where
+ * the design tab is, as this page's own Val server says it (the proposals
+ * list's `siteUrl`). `null` when it does not say.
+ *
+ * A quick preview is code that runs on this address, so the bridge takes one
+ * only from its parent, and only when that parent is the site: a page that
+ * framed this one could otherwise post a script into the worker and open
+ * the frame on it.
+ */
+function quickPreviewSiteOrigin(_x4) {
+  return _quickPreviewSiteOrigin.apply(this, arguments);
+}
+
+/** The site's origin, as this page's server named it: asked once per page. */
+function _quickPreviewSiteOrigin() {
+  _quickPreviewSiteOrigin = createForOfIteratorHelper._asyncToGenerator(/*#__PURE__*/createForOfIteratorHelper._regenerator().m(function _callee2(api) {
+    var fetchImpl,
+      res,
+      body,
+      siteUrl,
+      _args2 = arguments;
+    return createForOfIteratorHelper._regenerator().w(function (_context2) {
+      while (1) switch (_context2.p = _context2.n) {
+        case 0:
+          fetchImpl = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : fetch;
+          _context2.n = 1;
+          return fetchImpl("".concat(api.replace(/\/+$/, ""), "/proposals-api"), {
+            credentials: "same-origin",
+            headers: {
+              Accept: "application/json"
+            }
+          });
+        case 1:
+          res = _context2.v;
+          if (res.ok) {
+            _context2.n = 2;
+            break;
+          }
+          return _context2.a(2, null);
+        case 2:
+          _context2.n = 3;
+          return res.json();
+        case 3:
+          body = _context2.v;
+          if (!(createForOfIteratorHelper._typeof(body) !== "object" || body === null || !("siteUrl" in body))) {
+            _context2.n = 4;
+            break;
+          }
+          return _context2.a(2, null);
+        case 4:
+          siteUrl = body.siteUrl;
+          if (!(typeof siteUrl !== "string")) {
+            _context2.n = 5;
+            break;
+          }
+          return _context2.a(2, null);
+        case 5:
+          _context2.p = 5;
+          return _context2.a(2, new URL(siteUrl).origin);
+        case 6:
+          _context2.p = 6;
+          _context2.v;
+          return _context2.a(2, null);
+      }
+    }, _callee2, null, [[5, 6]]);
+  }));
+  return _quickPreviewSiteOrigin.apply(this, arguments);
+}
+var siteOriginOnce = null;
+
+/**
+ * Whether `origin` may ask this page for what only the design tab should
+ * have -- what is on it (`readPage`), or code to run (`quickPreview`): this
+ * page's own origin (the Studio's canvas), or the site's, where the design
+ * tab is ({@link quickPreviewSiteOrigin}). Asked of the server once, and
+ * again only while it has not said.
+ */
+function isDesignTabOrigin(_x5, _x6) {
+  return _isDesignTabOrigin.apply(this, arguments);
+}
+function _isDesignTabOrigin() {
+  _isDesignTabOrigin = createForOfIteratorHelper._asyncToGenerator(/*#__PURE__*/createForOfIteratorHelper._regenerator().m(function _callee3(origin, options) {
+    var site;
+    return createForOfIteratorHelper._regenerator().w(function (_context3) {
+      while (1) switch (_context3.n) {
+        case 0:
+          if (!(origin === options.own)) {
+            _context3.n = 1;
+            break;
+          }
+          return _context3.a(2, true);
+        case 1:
+          siteOriginOnce !== null && siteOriginOnce !== void 0 ? siteOriginOnce : siteOriginOnce = quickPreviewSiteOrigin(options.api, options.fetchImpl)["catch"](function () {
+            return null;
+          });
+          _context3.n = 2;
+          return siteOriginOnce;
+        case 2:
+          site = _context3.v;
+          if (site === null) siteOriginOnce = null;
+          return _context3.a(2, site !== null && site === origin);
+      }
+    }, _callee3);
+  }));
+  return _isDesignTabOrigin.apply(this, arguments);
+}
+
+/** Marks a page load as the studio's canvas frame. */
+var VAL_CANVAS_PARAM = "val_canvas";
+
+/**
+ * Every message is tagged with this, and the tag is checked on receipt.
+ *
+ * A window receives messages from anything that has a handle on it —
+ * extensions, embeds, other frames — and `event.data` is whatever they chose to
+ * send. Checking a discriminator before reading anything else is what keeps a
+ * stray message from being read as a canvas instruction.
+ */
+var VAL_CANVAS_MESSAGE = "val-canvas";
+
+/** One element on the page that Val has a path for. */
+
+/**
+ * The colours Val outlines the page's content in, when nobody has said
+ * otherwise.
+ *
+ * They mirror `--bg-page-selection` and `--bg-page-selection-soft` in
+ * `packages/ui/spa/index.css`, and they are literals here because the page the
+ * bridge runs in has none of Val's stylesheet — no `:host`, no tokens, nothing
+ * to inherit. A CSS custom property genuinely cannot reach across that
+ * boundary, which is why the colours are SENT (see the `theme` message below)
+ * rather than derived.
+ *
+ * They live beside the protocol rather than with the theme code on purpose:
+ * `@valbuild/shared/client` is what the bridge imports, and it exists to keep
+ * production bundles small (see the docblock on that entrypoint). Two strings
+ * cost nothing; the accent generator that produces the non-default values is
+ * ~350 lines of colour maths that no visitor to a Val site should download.
+ *
+ * `canvasSelectionDefaults.test.ts` holds them equal to the stylesheet.
+ */
+var DEFAULT_CANVAS_SELECTION = "#079455";
+var DEFAULT_CANVAS_SELECTION_SOFT = "rgba(7, 148, 85, 0.4)";
+
+/** What the page tells the studio. */
+
+/** What the studio tells the page. */
+
+/** Narrow an unknown `event.data` to a message from the page. */
+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" || message.type === "elementPickingStopped" || message.type === "elementPicked" && isPickedElement(data.element) || message.type === "location" && isPageLocation(data) || message.type === "pageRead" && typeof data.requestId === "string" || message.type === "quickPreviewStored" && typeof data.id === "string";
+}
+function isPageLocation(value) {
+  var location = value;
+  return typeof location.path === "string" && location.path.startsWith("/") && typeof location.scrollX === "number" && typeof location.scrollY === "number";
+}
+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.
+ *
+ * A whitelist rather than an escape, and the reason is where these two strings
+ * end up: the bridge writes them into a `<style>` element in the CUSTOMER's
+ * document with `dangerouslySetInnerHTML`, so a value containing `</style>` is
+ * a script tag away from running in someone else's page. A page can be
+ * `postMessage`d by any window holding a handle on it, and this guard is the
+ * only thing between such a message and that sink.
+ *
+ * The two shapes are exactly what `themeCustomProperties` produces — a hex, and
+ * the `rgba()` it derives the soft outline as. Narrowing the contract is easier
+ * to keep true than sanitising an open one, and a forged message that passes
+ * this can do no more than pick a different colour.
+ */
+var CANVAS_SELECTION_COLOR = /^(?:#[0-9a-f]{3,8}|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\))$/i;
+function isCanvasSelectionColor(value) {
+  return typeof value === "string" && CANVAS_SELECTION_COLOR.test(value);
+}
+
+/** Narrow an unknown `event.data` to a message from the studio. */
+function isValCanvasStudioMessage(data) {
+  if (createForOfIteratorHelper._typeof(data) !== "object" || data === null) return false;
+  var message = data;
+  if (message.val !== VAL_CANVAS_MESSAGE) return false;
+  if (message.type === "theme") {
+    // Checked here and not in the bridge: a rejected message is never applied
+    // 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);
+  }
+  if (message.type === "scrollTo") {
+    var scroll = data;
+    return typeof scroll.x === "number" && Number.isFinite(scroll.x) && typeof scroll.y === "number" && Number.isFinite(scroll.y);
+  }
+  if (message.type === "quickPreview") {
+    var preview = data;
+    return typeof preview.id === "string" && /^[A-Za-z0-9_-]{1,64}$/.test(preview.id) && isQuickPreviewFiles(preview.files);
+  }
+  if (message.type === "readPage") {
+    var read = data;
+    return typeof read.requestId === "string" && (read.selector === undefined || typeof read.selector === "string") && (read.maxItems === undefined || typeof read.maxItems === "number");
+  }
+  return message.type === "rescan" || message.type === "highlight" || message.type === "setPicking" || message.type === "sourceUpdate" || message.type === "sourcesSynced";
+}
+
+/**
+ * Whether this document is showing in the studio's canvas frame.
+ *
+ * The parameter marks the document the studio LOADED, and that is not always
+ * the document the frame ends up holding. A frame navigates on its own: a site
+ * with a login of its own redirects a signed-out canvas to its sign-in page,
+ * and the sign-in sends it back to wherever the site chooses. Each of those is
+ * a new document without the parameter, and it used to render Val's whole
+ * overlay inside the canvas — a studio in the studio, which never told the
+ * canvas it was there, so the canvas never went live again until reloaded.
+ *
+ * So where the frame SITS answers too: a document whose parent is the studio
+ * is in the canvas, whatever its own address says. `parentPathname` is that
+ * parent's path: `null` for a top-level document, and for a parent on another
+ * origin, whose `location` cannot be read and which is not the studio anyway.
+ */
+function isValCanvasFrame(search) {
+  var parentPathname = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  if (parentPathname !== null && isValStudioPathname(parentPathname)) {
+    return true;
+  }
+  try {
+    return new URLSearchParams(search).get(VAL_CANVAS_PARAM) !== null;
+  } catch (_unused) {
+    return false;
+  }
+}
+
+/** Whether a path is the studio's own route, where the canvas lives. */
+function isValStudioPathname(pathname) {
+  return pathname === "/val" || pathname.startsWith("/val/");
+}
+
+/** Add the canvas marker to a page URL. */
+function withValCanvasParam(url) {
+  var separator = url.includes("?") ? "&" : "?";
+  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$1 = 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$1 ? "".concat(text.slice(0, TEXT_LENGTH$1 - 1), "\u2026") : text,
+    classes: Array.from(element.classList).slice(0, CLASSES),
+    selector: selectorOf$1(element, root)
+  }, valPath !== undefined ? {
+    valPath: valPath
+  } : {});
+}
+function selectorOf$1(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;
+  }
+}
+
+/** How far a touch may move and still be a tap, not a scroll. */
+var TAP_SLOP_PX = 10;
+/** How long a touch may be held and still be a tap. */
+var TAP_MS = 600;
+/** How long after a tap its click may still arrive. */
+var TAP_CLICK_MS = 800;
+/**
+ * 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);
+  };
+  /*
+   * A tap. iOS Safari dispatches no click for a tap on an element nothing on
+   * the way to it listens to -- a listener on the body does not count -- so
+   * a tap is taken from the pointer events: a touch that went up where it
+   * came down, soon, picks. One that moved is a scroll, which the browser
+   * reports as `pointercancel` or as distance, and picks nothing.
+   */
+  var down = null;
+  /** When a tap last picked: the click a browser may still send is the same tap. */
+  var tappedAt = -Infinity;
+  var onPointerDown = function onPointerDown(event) {
+    down = event.pointerType !== "mouse" && options.active() ? {
+      x: event.clientX,
+      y: event.clientY,
+      at: Date.now()
+    } : null;
+  };
+  var onPointerCancel = function onPointerCancel() {
+    down = null;
+  };
+  var onPointerUp = function onPointerUp(event) {
+    var start = down;
+    down = null;
+    if (start === null || !options.active()) return;
+    var moved = Math.hypot(event.clientX - start.x, event.clientY - start.y);
+    if (moved > TAP_SLOP_PX || Date.now() - start.at > TAP_MS) return;
+    var element = target(event);
+    if (element === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    tappedAt = Date.now();
+    options.onHover(element);
+    options.onPick(element);
+  };
+  var onClick = function onClick(event) {
+    if (!picking(event)) return;
+    var element = target(event);
+    if (element === null) return;
+    event.preventDefault();
+    event.stopPropagation();
+    // Already picked by the tap this click comes from.
+    if (Date.now() - tappedAt < TAP_CLICK_MS) return;
+    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("pointerdown", onPointerDown, true);
+  root.addEventListener("pointerup", onPointerUp, true);
+  root.addEventListener("pointercancel", onPointerCancel, 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("pointerdown", onPointerDown, true);
+    root.removeEventListener("pointerup", onPointerUp, true);
+    root.removeEventListener("pointercancel", onPointerCancel, 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();
+    }
+  };
+}
+
+/** Where the page is: what a new build is opened at. */
+
+/** A box on the page, in CSS pixels from the top of the document. */
+
+/** One thing a reader would notice on the page, in document order. */
+
+/** One element in detail: what `read_page` answers for a `selector`. */
+
+var TEXT_LENGTH = 160;
+var DEFAULT_MAX_ITEMS = 300;
+var MAX_CHILDREN = 40;
+
+/** The computed styles worth reading back: type, colour, spacing, layout. */
+var STYLES = ["display", "position", "font-family", "font-size", "font-weight", "line-height", "letter-spacing", "text-align", "text-transform", "color", "background-color", "background-image", "margin", "padding", "gap", "border", "border-radius", "box-shadow", "width", "height", "max-width", "flex-direction", "justify-content", "align-items", "grid-template-columns", "opacity", "overflow"];
+
+/** Where `win` is now. */
+function pageLocationOf(win) {
+  var url = new URL(win.location.href);
+  // The canvas's own parameter is not part of where the page is.
+  url.searchParams["delete"](VAL_CANVAS_PARAM);
+  // Nor is which quick preview it shows: the next build is not that one.
+  url.searchParams["delete"](QUICK_PREVIEW_PARAM);
+  return {
+    path: "".concat(url.pathname).concat(url.search).concat(url.hash),
+    scrollX: Math.round(win.scrollX),
+    scrollY: Math.round(win.scrollY)
+  };
+}
+
+/**
+ * Report where the page is as it moves: on scroll, a little after it settles,
+ * and when it navigates -- which a client-side router does without an event,
+ * so the address is also looked at now and then. Returns the way to stop.
+ */
+function watchPageLocation(win, onChange, options) {
+  var _options$settleMs, _options$pollMs;
+  var settleMs = (_options$settleMs = options === null || options === void 0 ? void 0 : options.settleMs) !== null && _options$settleMs !== void 0 ? _options$settleMs : 200;
+  var pollMs = (_options$pollMs = options === null || options === void 0 ? void 0 : options.pollMs) !== null && _options$pollMs !== void 0 ? _options$pollMs : 500;
+  var last = "";
+  var report = function report() {
+    var location = pageLocationOf(win);
+    var key = JSON.stringify(location);
+    if (key === last) return;
+    last = key;
+    onChange(location);
+  };
+  var settle = null;
+  var onScroll = function onScroll() {
+    if (settle !== null) clearTimeout(settle);
+    settle = setTimeout(function () {
+      settle = null;
+      report();
+    }, settleMs);
+  };
+  win.addEventListener("scroll", onScroll, {
+    passive: true
+  });
+  win.addEventListener("popstate", report);
+  var poll = setInterval(report, pollMs);
+  report();
+  return function () {
+    win.removeEventListener("scroll", onScroll);
+    win.removeEventListener("popstate", report);
+    clearInterval(poll);
+    if (settle !== null) clearTimeout(settle);
+  };
+}
+
+/**
+ * Scroll to where the last build was, once the page is tall enough to: a page
+ * that is still loading its content is shorter than it will be, so this tries
+ * again each frame for a while rather than stopping at the bottom of half a
+ * page. Returns the way to stop trying.
+ */
+function restoreScroll(win, x, y, options) {
+  var _options$withinMs;
+  var until = Date.now() + ((_options$withinMs = options === null || options === void 0 ? void 0 : options.withinMs) !== null && _options$withinMs !== void 0 ? _options$withinMs : 2000);
+  var frame = null;
+  var _attempt = function attempt() {
+    frame = null;
+    win.scrollTo(x, y);
+    var reached = Math.abs(win.scrollY - y) < 2 && Math.abs(win.scrollX - x) < 2;
+    if (!reached && Date.now() < until) {
+      frame = win.requestAnimationFrame(_attempt);
+    }
+  };
+  _attempt();
+  return function () {
+    if (frame !== null) win.cancelAnimationFrame(frame);
+  };
+}
+
+/**
+ * What is on the page, as a reader would take it in: headings, text, links,
+ * buttons, images and inputs, in order, each with where it is. With a
+ * `selector`, that element in detail -- its computed styles, how many lines
+ * its text wraps to, and its children.
+ *
+ * `root` is what selectors are written from: the body, as `describeElement`
+ * writes them for a picked element.
+ */
+function readPageSnapshot(doc, options) {
+  var _options$maxItems, _win$scrollY, _win$location$href, _win$innerWidth, _win$innerHeight;
+  var win = doc.defaultView;
+  var root = doc.body;
+  var maxItems = (_options$maxItems = options === null || options === void 0 ? void 0 : options.maxItems) !== null && _options$maxItems !== void 0 ? _options$maxItems : DEFAULT_MAX_ITEMS;
+  var outline = [];
+  var truncated = false;
+  var scope = (options === null || options === void 0 ? void 0 : options.selector) !== undefined ? findBySelector(root, options.selector) : null;
+  var walkRoot = scope !== null && scope !== void 0 ? scope : root;
+  // A hidden element is skipped with all that is in it.
+  var walker = doc.createTreeWalker(walkRoot, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: function acceptNode(candidate) {
+      return candidate instanceof Element && isHidden(candidate, win) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+    }
+  });
+  var node = walker.currentNode;
+  while (node !== null) {
+    if (node instanceof Element) {
+      var item = outlineItemOf(node, root, win);
+      if (item !== null) {
+        if (outline.length >= maxItems) {
+          truncated = true;
+          break;
+        }
+        outline.push(item);
+      }
+    }
+    node = walker.nextNode();
+  }
+  var scrollY = Math.round((_win$scrollY = win === null || win === void 0 ? void 0 : win.scrollY) !== null && _win$scrollY !== void 0 ? _win$scrollY : 0);
+  return createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+    url: (_win$location$href = win === null || win === void 0 ? void 0 : win.location.href) !== null && _win$location$href !== void 0 ? _win$location$href : "",
+    title: doc.title,
+    viewport: {
+      width: (_win$innerWidth = win === null || win === void 0 ? void 0 : win.innerWidth) !== null && _win$innerWidth !== void 0 ? _win$innerWidth : 0,
+      height: (_win$innerHeight = win === null || win === void 0 ? void 0 : win.innerHeight) !== null && _win$innerHeight !== void 0 ? _win$innerHeight : 0,
+      scrollY: scrollY,
+      pageHeight: Math.round(doc.documentElement.scrollHeight)
+    },
+    outline: outline
+  }, truncated ? {
+    truncated: true
+  } : {}), scope !== null ? {
+    element: detailOf(scope, root, win)
+  } : {}), (options === null || options === void 0 ? void 0 : options.selector) !== undefined && scope === null ? {
+    notFound: options.selector
+  } : {});
+}
+
+/**
+ * The element a selector names, written as `describeElement` writes them --
+ * from the body down, or from an element with an id -- or any selector a
+ * person would write.
+ */
+function findBySelector(root, selector) {
+  try {
+    var _root$querySelector;
+    return (_root$querySelector = root.querySelector(":scope > ".concat(selector))) !== null && _root$querySelector !== void 0 ? _root$querySelector : root.ownerDocument.querySelector(selector);
+  } catch (_unused) {
+    return null;
+  }
+}
+function outlineItemOf(element, root, win) {
+  var tag = element.tagName.toLowerCase();
+  var base = function base() {
+    return {
+      tag: tag,
+      selector: selectorOf(element, root),
+      box: boxOf(element, win)
+    };
+  };
+  var heading = /^h([1-6])$/.exec(tag);
+  if (heading !== null) {
+    return createForOfIteratorHelper._objectSpread2({
+      kind: "heading",
+      level: Number(heading[1]),
+      text: textOf(element)
+    }, base());
+  }
+  if (tag === "a") {
+    var _element$getAttribute;
+    var href = (_element$getAttribute = element.getAttribute("href")) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : undefined;
+    return createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+      kind: "link"
+    }, textOf(element) !== "" ? {
+      text: textOf(element)
+    } : {}), href !== undefined ? {
+      href: href
+    } : {}), base());
+  }
+  if (tag === "button" || element.getAttribute("role") === "button") {
+    return createForOfIteratorHelper._objectSpread2({
+      kind: "button",
+      text: textOf(element)
+    }, base());
+  }
+  if (tag === "img") {
+    var alt = element.getAttribute("alt");
+    var src = element.getAttribute("src");
+    return createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+      kind: "image"
+    }, alt !== null ? {
+      alt: alt
+    } : {}), src !== null ? {
+      src: shorten(src)
+    } : {}), base());
+  }
+  if (tag === "input" || tag === "textarea" || tag === "select") {
+    var _ref, _ref2, _element$getAttribute2;
+    var label = (_ref = (_ref2 = (_element$getAttribute2 = element.getAttribute("aria-label")) !== null && _element$getAttribute2 !== void 0 ? _element$getAttribute2 : element.getAttribute("placeholder")) !== null && _ref2 !== void 0 ? _ref2 : element.getAttribute("name")) !== null && _ref !== void 0 ? _ref : "";
+    return createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+      kind: "input"
+    }, label !== "" ? {
+      text: label
+    } : {}), base());
+  }
+  if (tag === "header" || tag === "nav" || tag === "main" || tag === "section" || tag === "footer" || tag === "aside") {
+    return createForOfIteratorHelper._objectSpread2({
+      kind: "section"
+    }, base());
+  }
+  // Text: an element that holds words of its own, not only through children
+  // already listed (a heading, a link) -- a paragraph, a list item, a label.
+  if (tag === "p" || tag === "li" || tag === "blockquote" || tag === "figcaption" || tag === "label" || tag === "td" || tag === "th" || hasOwnText(element)) {
+    var text = textOf(element);
+    if (text === "" || insideListed(element)) return null;
+    return createForOfIteratorHelper._objectSpread2({
+      kind: "text",
+      text: text
+    }, base());
+  }
+  return null;
+}
+
+/**
+ * Already part of something the outline names: a link's or a button's words,
+ * or a `<strong>` in a paragraph that is listed whole.
+ */
+function insideListed(element) {
+  var parent = element.parentElement;
+  return parent !== null && parent.closest("a, button, h1, h2, h3, h4, h5, h6, [role='button'], p, li, blockquote, figcaption, label, td, th") !== null;
+}
+function hasOwnText(element) {
+  for (var _i = 0, _Array$from = Array.from(element.childNodes); _i < _Array$from.length; _i++) {
+    var _child$textContent;
+    var child = _Array$from[_i];
+    if (child.nodeType === 3 && ((_child$textContent = child.textContent) !== null && _child$textContent !== void 0 ? _child$textContent : "").trim() !== "") {
+      return true;
+    }
+  }
+  return false;
+}
+function detailOf(element, root, win) {
+  var _win$getComputedStyle;
+  var styles = {};
+  var computed = (_win$getComputedStyle = win === null || win === void 0 ? void 0 : win.getComputedStyle(element)) !== null && _win$getComputedStyle !== void 0 ? _win$getComputedStyle : null;
+  if (computed !== null) {
+    var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(STYLES),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var property = _step.value;
+        var value = computed.getPropertyValue(property);
+        if (value !== "" && value !== "none" && value !== "normal") {
+          styles[property] = value;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  var box = boxOf(element, win);
+  var lineHeight = computed !== null ? parseFloat(computed.getPropertyValue("line-height")) : NaN;
+  var lines = Number.isFinite(lineHeight) && lineHeight > 0 && box.height > 0 ? Math.max(1, Math.round(box.height / lineHeight)) : undefined;
+  return createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+    selector: selectorOf(element, root),
+    tag: element.tagName.toLowerCase(),
+    text: textOf(element),
+    box: box
+  }, lines !== undefined ? {
+    lines: lines
+  } : {}), {}, {
+    styles: styles,
+    children: Array.from(element.children).slice(0, MAX_CHILDREN).map(function (child) {
+      var text = textOf(child);
+      return createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+        tag: child.tagName.toLowerCase(),
+        selector: selectorOf(child, root)
+      }, text !== "" ? {
+        text: text
+      } : {}), {}, {
+        box: boxOf(child, win)
+      });
+    })
+  });
+}
+function isHidden(element, win) {
+  var tag = element.tagName.toLowerCase();
+  if (tag === "script" || tag === "style" || tag === "noscript" || tag === "template") {
+    return true;
+  }
+  // The picker's own outlines, and what the page hides from everyone.
+  if (element.hasAttribute("data-val-picker") || element.hasAttribute("hidden") || element.getAttribute("aria-hidden") === "true") {
+    return true;
+  }
+  var style = win === null || win === void 0 ? void 0 : win.getComputedStyle(element);
+  return (style === null || style === void 0 ? void 0 : style.display) === "none" || (style === null || style === void 0 ? void 0 : style.visibility) === "hidden";
+}
+function boxOf(element, win) {
+  var _win$scrollX, _win$scrollY2;
+  var rect = element.getBoundingClientRect();
+  return {
+    x: Math.round(rect.left + ((_win$scrollX = win === null || win === void 0 ? void 0 : win.scrollX) !== null && _win$scrollX !== void 0 ? _win$scrollX : 0)),
+    y: Math.round(rect.top + ((_win$scrollY2 = win === null || win === void 0 ? void 0 : win.scrollY) !== null && _win$scrollY2 !== void 0 ? _win$scrollY2 : 0)),
+    width: Math.round(rect.width),
+    height: Math.round(rect.height)
+  };
+}
+function textOf(element) {
+  var _element$textContent;
+  return shorten(((_element$textContent = element.textContent) !== null && _element$textContent !== void 0 ? _element$textContent : "").replace(/\s+/g, " ").trim());
+}
+function shorten(text) {
+  return text.length > TEXT_LENGTH ? "".concat(text.slice(0, TEXT_LENGTH - 1), "\u2026") : text;
+}
+
+/** As `describeElement` writes it: from `root` down, or from an id. */
+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(" > ");
+}
+
+function parseRoutePattern(pattern) {
+  if (pattern === "" || pattern === "/") {
+    return [];
+  }
+  var p = pattern.startsWith("/") ? pattern.slice(1) : pattern;
+  return p.split("/").map(function (part) {
+    var isOptionalParam = part.startsWith("[[") && part.endsWith("]]");
+    var isNonOptionalParam = part.startsWith("[") && part.endsWith("]");
+    var nameStart = isOptionalParam ? 2 : isNonOptionalParam ? 1 : 0;
+    var nameEnd = part.indexOf("]", nameStart);
+    var isArrayParam = part.slice(nameStart, nameStart + 3) === "...";
+    var paramName = part.slice(nameStart + (isArrayParam ? 3 : 0), nameEnd);
+    if (isOptionalParam || isNonOptionalParam) {
+      if (isArrayParam) {
+        return {
+          type: "array-param",
+          paramName: paramName,
+          optional: isOptionalParam
+        };
+      } else {
+        return {
+          type: "string-param",
+          paramName: paramName,
+          optional: isOptionalParam
+        };
+      }
+    }
+    return {
+      type: "literal",
+      name: part
+    };
+  });
+}
+
+/**
+ * A parsed pattern written back as segments: the inverse of
+ * {@link parseRoutePattern}, in the vocabulary core's `matchRoutePattern`
+ * reads.
+ */
+function formatRoutePattern(pattern) {
+  return pattern.map(function (part) {
+    if (part.type === "literal") {
+      return part.name;
+    }
+    var inner = part.type === "string-param" ? part.paramName : "...".concat(part.paramName);
+    return part.optional ? "[[".concat(inner, "]]") : "[".concat(inner, "]");
+  });
+}
+
+function getNextAppRouterSourceFolder(moduleFilePath) {
+  if (moduleFilePath.startsWith("/app")) {
+    return "/app";
+  } else if (moduleFilePath.startsWith("/src/app")) {
+    return "/src/app";
+  }
+  return null;
+}
+
+/**
+ * The folder a TanStack Router app keeps its route files in.
+ *
+ * The same question as above for the other convention: `routes/` at the project
+ * root, or under `src/`. A Val module for a route lives beside the route file
+ * and is named the same way, so this is the prefix to strip before reading the
+ * route pattern out of the rest.
+ */
+function getTanStackRouterSourceFolder(moduleFilePath) {
+  if (moduleFilePath.startsWith("/routes/")) {
+    return "/routes";
+  } else if (moduleFilePath.startsWith("/src/routes/")) {
+    return "/src/routes";
+  }
+  return null;
+}
+
+/**
+ * The route folder of whichever page router this module belongs to.
+ *
+ * The two conventions have disjoint prefixes — `app/` versus `routes/` — so a
+ * module file path answers this on its own, which is what the Studio needs: it
+ * walks every schema in the project and has no framework to ask.
+ */
+function getPageRouterSourceFolder(moduleFilePath) {
+  var _getNextAppRouterSour;
+  return (_getNextAppRouterSour = getNextAppRouterSourceFolder(moduleFilePath)) !== null && _getNextAppRouterSour !== void 0 ? _getNextAppRouterSour : getTanStackRouterSourceFolder(moduleFilePath);
+}
+
+/**
+ * Whether a route folder is a TanStack Router one.
+ *
+ * Exported so the pattern derivation and the source-folder detection cannot
+ * drift apart about what `/src/routes` means.
+ */
+function isTanStackRoutesFolder(srcFolder) {
+  return srcFolder === "/routes" || srcFolder === "/src/routes";
+}
+
+// Strictly speaking this should be in the framework packages but it's shared,
+// because we want to use it in the ui package. We want to resolve that somehow.
+//
+// It is one function for both page routers because the tree it builds is made
+// of URL paths, which is the same thing in either: only `srcFolder` and the
+// pattern derivation differ, and both of those are arguments (or the one call
+// below).
+function getPageRouterSitemapTree(srcFolder, paths) {
+  var root = {
+    type: "node",
+    name: "/",
+    children: []
+  };
+  var _iterator = createForOfIteratorHelper._createForOfIteratorHelper(paths),
+    _step;
+  try {
+    var _loop = function _loop() {
+        var path = _step.value;
+        var urlPath = path.urlPath,
+          moduleFilePathS = path.moduleFilePath;
+        var moduleFilePath = moduleFilePathS;
+        if (!urlPath.startsWith("/")) {
+          core.Internal.log.error("urlPath must start with /: ".concat(urlPath));
+          return 0; // continue
+        }
+        var pattern = getPatternFromModuleFilePath(moduleFilePath, srcFolder);
+        if (urlPath === "/") {
+          var fullPath = "/";
+          root.pattern = getPatternFromModuleFilePath(moduleFilePath, srcFolder);
+          root.page = {
+            fullPath: fullPath
+          };
+          root.sourcePath = core.Internal.joinModuleFilePathAndModulePath(moduleFilePath, "\"".concat(fullPath, "\""));
+          root.moduleFilePath = moduleFilePath;
+          return 0; // continue
+        }
+        var pathParts = urlPath.split("/").slice(1).filter(Boolean);
+        var currentNode = root;
+        pathParts.forEach(function (part, index) {
+          var hasChildren = index < pathParts.length - 1;
+          var isLast = index === pathParts.length - 1;
+          var fullPath = "/" + pathParts.slice(0, index + 1).join("/");
+          var sourcePath = core.Internal.joinModuleFilePathAndModulePath(moduleFilePath, "\"".concat(fullPath, "\""));
+          var node = hasChildren ? createForOfIteratorHelper._objectSpread2(createForOfIteratorHelper._objectSpread2({
+            type: "node",
+            name: part,
+            pattern: pattern,
+            moduleFilePath: moduleFilePath
+          }, isLast ? {
+            page: {
+              fullPath: fullPath
+            },
+            sourcePath: sourcePath
+          } : {}), {}, {
+            children: []
+          }) : {
+            type: "leaf",
+            name: part,
+            pattern: pattern,
+            fullPath: fullPath,
+            moduleFilePath: moduleFilePath,
+            sourcePath: sourcePath,
+            children: []
+          };
+          var existingNodeIndex = currentNode.children.findIndex(function (node) {
+            return node.name === part;
+          });
+          if (existingNodeIndex === -1) {
+            currentNode.children.push(node);
+            if (currentNode.type === "node") {
+              currentNode.isLinear = true;
+              if (currentNode.children.length > 1) {
+                delete currentNode.isLinear;
+              }
+            }
+            currentNode = node;
+          } else {
+            var existingNode = currentNode.children[existingNodeIndex];
+            if (existingNode.type === "leaf" && hasChildren) {
+              var _sourcePath = existingNode.sourcePath;
+              // convert leaf to node
+              currentNode.children[existingNodeIndex] = {
+                type: "node",
+                name: part,
+                pattern: pattern,
+                page: {
+                  fullPath: fullPath
+                },
+                sourcePath: _sourcePath,
+                children: existingNode.children,
+                moduleFilePath: moduleFilePath
+              };
+              currentNode = currentNode.children[existingNodeIndex];
+            } else if (existingNode.type === "node" && isLast) {
+              // add page, source path and module file path
+              existingNode.page = {
+                fullPath: fullPath
+              };
+              existingNode.sourcePath = sourcePath;
+              existingNode.moduleFilePath = moduleFilePath;
+              existingNode.pattern = pattern;
+            } else {
+              currentNode = currentNode.children[existingNodeIndex];
+            }
+          }
+        });
+      },
+      _ret;
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _ret = _loop();
+      if (_ret === 0) continue;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return root;
+}
+
+/**
+ * The route pattern a page-router module serves, e.g. `/blogs/[blog]`.
+ *
+ * Written in Next's vocabulary for both routers on purpose: the pattern is read
+ * by `parseRoutePattern`, the sitemap and the Studio's key inputs, none of which
+ * should have to know which framework the project uses. The TanStack branch
+ * translates that framework's conventions into it; see
+ * `tanStackSegmentsOfRoutePath` in `@valbuild/core` for the rules.
+ */
+function getPatternFromModuleFilePath(moduleFilePath, srcFolder) {
+  if (isTanStackRoutesFolder(srcFolder)) {
+    var routePath = moduleFilePath.slice(srcFolder.length).replace(/\.val\.[tj]sx?$/, "");
+    var segments = core.tanStackSegmentsOfRoutePath(routePath);
+    // "" rather than "/" for the root, so it matches what the Next branch
+    // returns for `/app/page.val.ts` — `parseRoutePattern` reads both as [].
+    return segments.length === 0 ? "" : "/".concat(segments.join("/"));
+  }
+  return moduleFilePath.replace(srcFolder, "")
+  // TODO: hacky!
+  // remove route groups
+  .replace(/\/\([^/]+\)/g, "") // not sure we want to do this?
+  .replace("/page.val.ts", "").replace("/page.val.js", "");
+}
+
+exports.DEFAULT_CANVAS_SELECTION = DEFAULT_CANVAS_SELECTION;
+exports.DEFAULT_CANVAS_SELECTION_SOFT = DEFAULT_CANVAS_SELECTION_SOFT;
+exports.QUICK_PREVIEW_PARAM = QUICK_PREVIEW_PARAM;
+exports.QUICK_PREVIEW_SERVICE_WORKER_PATH = QUICK_PREVIEW_SERVICE_WORKER_PATH;
+exports.QUICK_PREVIEW_SERVICE_WORKER_SOURCE = QUICK_PREVIEW_SERVICE_WORKER_SOURCE;
+exports.QUICK_PREVIEW_STORE_MESSAGE = QUICK_PREVIEW_STORE_MESSAGE;
+exports.VAL_AI_SESSION_STORAGE_KEY = VAL_AI_SESSION_STORAGE_KEY;
+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.findBySelector = findBySelector;
+exports.formatRoutePattern = formatRoutePattern;
+exports.getNextAppRouterSourceFolder = getNextAppRouterSourceFolder;
+exports.getPageRouterSitemapTree = getPageRouterSitemapTree;
+exports.getPageRouterSourceFolder = getPageRouterSourceFolder;
+exports.getPatternFromModuleFilePath = getPatternFromModuleFilePath;
+exports.getTanStackRouterSourceFolder = getTanStackRouterSourceFolder;
+exports.isDesignTabOrigin = isDesignTabOrigin;
+exports.isQuickPreviewFiles = isQuickPreviewFiles;
+exports.isTanStackRoutesFolder = isTanStackRoutesFolder;
+exports.isValCanvasFrame = isValCanvasFrame;
+exports.isValCanvasPageMessage = isValCanvasPageMessage;
+exports.isValCanvasStudioMessage = isValCanvasStudioMessage;
+exports.modifierLabel = modifierLabel;
+exports.pageLocationOf = pageLocationOf;
+exports.parseRoutePattern = parseRoutePattern;
+exports.quickPreviewSiteOrigin = quickPreviewSiteOrigin;
+exports.readPageSnapshot = readPageSnapshot;
+exports.restoreScroll = restoreScroll;
+exports.startElementPicking = startElementPicking;
+exports.storeQuickPreview = storeQuickPreview;
+exports.watchPageLocation = watchPageLocation;
+exports.withQuickPreviewParam = withQuickPreviewParam;
+exports.withValCanvasParam = withValCanvasParam;