@valbuild/shared 0.150.10 → 0.150.11

package/dist/getSitemapTree-97b3166f.esm.js

@@ -0,0 +1,1381 @@
+import { _ as _typeof, a as _slicedToArray, b as _asyncToGenerator, c as _regenerator, d as _objectSpread2, e as _toConsumableArray, f as _createForOfIteratorHelper } from './createForOfIteratorHelper-9b80f1a2.esm.js';
+import { Internal, tanStackSegmentsOfRoutePath } from '@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 (_typeof(value) !== "object" || value === null) return false;
+  return Object.entries(value).every(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      path = _ref2[0],
+      file = _ref2[1];
+    return /^[A-Za-z0-9_][A-Za-z0-9_./-]*$/.test(path) && !path.includes("..") && _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 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(id, files, options) {
+    var _options$container;
+    var container, registration, worker;
+    return _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 (_typeof(answer) === "object" && answer !== null && "ok" in answer && answer.ok === true) {
+                resolve();
+              } else {
+                reject(new Error(_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 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(api) {
+    var fetchImpl,
+      res,
+      body,
+      siteUrl,
+      _args2 = arguments;
+    return _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 (!(_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 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(origin, options) {
+    var site;
+    return _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 (_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 (_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 (_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 _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(_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 _objectSpread2(_objectSpread2(_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 _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 _objectSpread2(_objectSpread2(_objectSpread2({
+      kind: "link"
+    }, textOf(element) !== "" ? {
+      text: textOf(element)
+    } : {}), href !== undefined ? {
+      href: href
+    } : {}), base());
+  }
+  if (tag === "button" || element.getAttribute("role") === "button") {
+    return _objectSpread2({
+      kind: "button",
+      text: textOf(element)
+    }, base());
+  }
+  if (tag === "img") {
+    var alt = element.getAttribute("alt");
+    var src = element.getAttribute("src");
+    return _objectSpread2(_objectSpread2(_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 _objectSpread2(_objectSpread2({
+      kind: "input"
+    }, label !== "" ? {
+      text: label
+    } : {}), base());
+  }
+  if (tag === "header" || tag === "nav" || tag === "main" || tag === "section" || tag === "footer" || tag === "aside") {
+    return _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 _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(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 _objectSpread2(_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 _objectSpread2(_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(paths),
+    _step;
+  try {
+    var _loop = function _loop() {
+        var path = _step.value;
+        var urlPath = path.urlPath,
+          moduleFilePathS = path.moduleFilePath;
+        var moduleFilePath = moduleFilePathS;
+        if (!urlPath.startsWith("/")) {
+          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 = 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 = Internal.joinModuleFilePathAndModulePath(moduleFilePath, "\"".concat(fullPath, "\""));
+          var node = hasChildren ? _objectSpread2(_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 = 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", "");
+}
+
+export { quickPreviewSiteOrigin as A, isDesignTabOrigin as B, parseRoutePattern as C, DEFAULT_CANVAS_SELECTION as D, formatRoutePattern as E, getNextAppRouterSourceFolder as F, getTanStackRouterSourceFolder as G, getPageRouterSourceFolder as H, isTanStackRoutesFolder as I, getPageRouterSitemapTree as J, getPatternFromModuleFilePath as K, QUICK_PREVIEW_PARAM as Q, 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, watchPageLocation as n, readPageSnapshot as o, pageLocationOf as p, findBySelector as q, restoreScroll as r, startElementPicking as s, QUICK_PREVIEW_SERVICE_WORKER_PATH as t, QUICK_PREVIEW_STORE_MESSAGE as u, isQuickPreviewFiles as v, withValCanvasParam as w, QUICK_PREVIEW_SERVICE_WORKER_SOURCE as x, storeQuickPreview as y, withQuickPreviewParam as z };