@bud.sh/app 0.5.1 → 0.6.0

package/dist/{server/assets/bridge-B_Blt55E.js → node/assets/bridge-DQSBYHmw.js}

@@ -1,3 +1,4 @@
+import { i as reactGrabAdapterModule, r as reactAdapterExpression } from "./module-3GgtT4Xs.js";
 //#region ../picker/src/lib/runtime.ts
 /**
 * The page side of every picker: Bud's DOM picker composed with a framework adapter. It runs in
@@ -390,10 +391,34 @@ function pickerRuntime(adapter, name) {
 }
 //#endregion
 //#region ../picker/src/lib/module.ts
+/** The picker module's ID in the project's dev server, served by Bud's Vite plugin. */
+var PICKER_MODULE_ID = "\0bud-picker";
 /** Where pages import the picker module from. */
 var PICKER_MODULE_URL = "/@id/__x00__bud-picker";
 /** Where a picker script leaves the picker in a page that has no module to import it from. */
 var PICKER_GLOBAL = "__budPicker";
+/** A built-in picker's adapter module, which imports the framework from the project. */
+var PICKER_ADAPTER_MODULE_ID = "\0bud-picker-adapter";
+function runtime() {
+	return `((__name) => (${pickerRuntime.toString()}))((target) => target)`;
+}
+/**
+* The picker module's text: Bud's DOM picker composed with the configured adapter.
+* @param name - The picker's name, recorded on every anchor.
+* @param adapter - Where the adapter's page module is imported from, or null for the DOM picker.
+* @returns ES module text exporting describe, locate, pick and cancel.
+*/
+function pickerModule(name, adapter) {
+	return [
+		adapter ? `import adapter from ${JSON.stringify(adapter)}` : "const adapter = null",
+		`const picker = (${runtime()})(adapter ?? null, ${JSON.stringify(name)})`,
+		"export const describe = picker.describe",
+		"export const locate = picker.locate",
+		"export const pick = picker.pick",
+		"export const cancel = picker.cancel",
+		"export const index = picker.index"
+	].join("\n");
+}
 /**
 * The picker as a classic script, for pages no Bud Vite plugin serves, such as builds of a
 * branch: running it leaves the picker on `window.__budPicker` (once) and evaluates to it.
@@ -403,302 +428,111 @@ var PICKER_GLOBAL = "__budPicker";
 * @returns Script text.
 */
 function pickerScript(name, adapter) {
-	return `(globalThis.${PICKER_GLOBAL} ??= (${pickerRuntime.toString()})(${adapter ?? "null"}, ${JSON.stringify(name)}))`;
-}
-//#endregion
-//#region ../picker-react-grab/src/lib/adapter.ts
-/**
-* The page side of `bud:react` and `bud:react-grab`: an element's component and source come from
-* React's development build, its block is the component's outermost element, and with React Grab
-* its own selection picks. It runs in the project's pages as module or script text, so it must not
-* reference anything outside its own body. The line comes from React's own stack, mapped through
-* the module's source map, so it is exact whichever React Grab a project runs; React Grab's own
-* answer fills in what that can't find. Production builds keep no source, so only the DOM picker's
-* own description remains.
-* @param grab - The project's `react-grab` module, or null to read React alone. Importing it
-*   starts React Grab if it isn't yet.
-* @param helpers - Resolves file names and source map positions.
-* @returns The picker adapter.
-*/
-function reactGrabAdapter(grab, helpers) {
-	let { sourceFile, projectFrames, sourceMapLookup } = helpers;
-	let plugin = "bud:picker";
-	let maps = /* @__PURE__ */ new Map();
-	let host = 5;
-	function fiberOf(element) {
-		let key = Object.keys(element).find((name) => name.startsWith("__reactFiber$"));
-		return key ? element[key] ?? null : null;
-	}
-	function outermost(component) {
-		let node = component.child;
-		while (node && node.tag !== host) node = node.child;
-		return node?.stateNode instanceof Element ? node.stateNode : null;
-	}
-	function sourceMap(url) {
-		let cached = maps.get(url);
-		if (cached) return cached;
-		cached = fetch(url).then((response) => response.ok ? response.text() : "").then(async (text) => {
-			let reference = /\/\/[#@] sourceMappingURL=(\S+)\s*$/.exec(text)?.[1];
-			let address = new URL(reference ?? `${url.replace(/[?#].*$/, "")}.map`, url);
-			if (address.protocol !== "data:" && address.origin !== location.origin) return null;
-			let response = await fetch(address);
-			let map = response.ok ? await response.json() : null;
-			let lookup = map && typeof map === "object" ? sourceMapLookup(map) : null;
-			return lookup ? {
-				lookup,
-				base: address.protocol === "data:" ? url : address.href
-			} : null;
-		}).catch(() => null);
-		maps.set(url, cached);
-		if (maps.size > 50) maps.delete(maps.keys().next().value);
-		return cached;
-	}
-	function servedPath(source, base, stack) {
-		if (source.startsWith("/") && !source.startsWith("//")) return sourceFile(source, stack, location.origin);
-		let url = new URL(source, base);
-		return url.origin === location.origin && !url.pathname.startsWith("/@") && !url.pathname.includes("/node_modules/") ? url.pathname : null;
-	}
-	async function written(stack) {
-		let frames = projectFrames(stack, location.origin);
-		for (let frame of frames) {
-			let map = await sourceMap(frame.url);
-			let position = map ? map.lookup(frame.line, frame.column) : {
-				source: frame.url,
-				line: frame.line,
-				column: frame.column
-			};
-			if (!position) continue;
-			let file = servedPath(position.source, map?.base ?? frame.url, stack);
-			if (file) return {
-				name: frame.name,
-				file,
-				line: position.line,
-				column: position.column
-			};
-		}
-		return frames[0] ? {
-			name: frames[0].name,
-			file: null,
-			line: null,
-			column: null
-		} : null;
-	}
-	function ownerName(element) {
-		let type = fiberOf(element)?._debugOwner?.type;
-		let name = type && typeof type === "object" ? type.displayName ?? type.name : null;
-		return typeof name === "string" && name ? name : null;
-	}
-	let adapter = {
-		async describe(element) {
-			let api = grab?.getGlobalApi() ?? null;
-			let stack = fiberOf(element)?._debugStack?.stack ?? "";
-			let mapped = stack ? await written(stack).catch(() => null) : null;
-			let found = !mapped?.file && api ? await api.getSource(element).catch(() => null) : null;
-			let component = mapped?.name ?? found?.componentName ?? api?.getDisplayName(element) ?? ownerName(element);
-			if (!mapped?.file && !found && !component) return null;
-			if (mapped?.file) return { source: {
-				component: component || null,
-				file: mapped.file,
-				line: mapped.line,
-				column: mapped.column
-			} };
-			let file = found?.filePath ? sourceFile(found.filePath, stack, location.origin) : null;
-			let line = found?.lineNumber && found.lineNumber > 0 ? found.lineNumber : null;
-			let column = found?.columnNumber != null && found.columnNumber >= 0 ? found.columnNumber + 1 : null;
-			return { source: {
-				component: component || null,
-				file,
-				line,
-				column
-			} };
-		},
-		block(element) {
-			for (let owner = fiberOf(element)?._debugOwner; owner; owner = owner._debugOwner) {
-				let outer = outermost(owner);
-				if (outer && outer !== document.body && outer.contains(element)) return outer;
-			}
-			return null;
-		}
-	};
-	if (!grab) return adapter;
-	return {
-		...adapter,
-		pick(signal) {
-			let api = grab.getGlobalApi();
-			if (!api || signal.aborted) return Promise.resolve(null);
-			return new Promise((resolve) => {
-				let settled = false;
-				let tidy = () => {
-					api.unregisterPlugin(plugin);
-					if (api.isActive()) api.deactivate();
-				};
-				let finish = (element, during) => {
-					if (settled) return;
-					settled = true;
-					signal.removeEventListener("abort", cancel);
-					resolve(element);
-					if (during) setTimeout(tidy, 1e3);
-					else tidy();
-				};
-				let cancel = () => finish(null, false);
-				signal.addEventListener("abort", cancel, { once: true });
-				api.unregisterPlugin(plugin);
-				api.registerPlugin({
-					name: plugin,
-					theme: { grabbedBoxes: { enabled: false } },
-					hooks: {
-						onElementSelect(element) {
-							finish(element, true);
-							return true;
-						},
-						onDeactivate: () => finish(null, true)
-					}
-				});
-				api.activate();
-			});
-		}
-	};
-}
-//#endregion
-//#region ../picker-react-grab/src/lib/source-map.ts
-/**
-* The frames of React's stack for an element that may have run in the project's own code, in
-* order: the first one whose source is the project's is the component that rendered it.
-* Dependencies the dev server serves apart, Vite's own modules and other origins are left out; a
-* build bundles dependencies with the project, so their frames stay for their source maps to
-* tell apart. It runs in the project's pages as module text, so it must not reference anything
-* outside its own body.
-* @param stack - React's stack for the element, as `Error.stack` text.
-* @param origin - The page's origin.
-* @returns The frames, possibly none.
-*/
-function projectFrames(stack, origin) {
-	let frames = [];
-	for (let text of stack.split("\n")) {
-		let match = /^\s*at (?:(.+?) \()?(https?:\/\/[^\s()]+?):(\d+):(\d+)\)?\s*$/.exec(text);
-		if (!match) continue;
-		let url = new URL(match[2]);
-		if (url.origin !== origin || url.pathname.startsWith("/@") || url.pathname.includes("/node_modules/")) continue;
-		let name = match[1]?.replace(/^Object\./, "") ?? null;
-		frames.push({
-			name,
-			url: url.href,
-			line: Number(match[3]),
-			column: Number(match[4])
-		});
-	}
-	return frames;
-}
-/**
-* Decodes a module's source map once, for looking up many positions in it. It runs in the
-* project's pages as module text, so it must not reference anything outside its own body.
-* @param map - The source map, as parsed JSON.
-* @returns Maps a generated line and column, counted from one, to the original position; null
-*   for a map that can't be read.
-*/
-function sourceMapLookup(map) {
-	if (typeof map.mappings !== "string" || !Array.isArray(map.sources)) return null;
-	let sources = map.sources;
-	let root = typeof map.sourceRoot === "string" && map.sourceRoot ? map.sourceRoot : "";
-	let digits = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
-	let lines = [];
-	let source = 0;
-	let sourceLine = 0;
-	let sourceColumn = 0;
-	for (let text of map.mappings.split(";")) {
-		let generated = 0;
-		let segments = [];
-		for (let segment of text.split(",")) {
-			if (!segment) continue;
-			let values = [];
-			let value = 0;
-			let shift = 0;
-			for (let character of segment) {
-				let digit = digits.indexOf(character);
-				if (digit < 0) return null;
-				value += (digit & 31) << shift;
-				if (digit & 32) shift += 5;
-				else {
-					values.push(value & 1 ? -(value >>> 1) : value >>> 1);
-					value = 0;
-					shift = 0;
-				}
-			}
-			generated += values[0] ?? 0;
-			if (values.length < 4) continue;
-			source += values[1];
-			sourceLine += values[2];
-			sourceColumn += values[3];
-			segments.push([
-				generated,
-				source,
-				sourceLine,
-				sourceColumn
-			]);
-		}
-		lines.push(segments);
-	}
-	return (line, column) => {
-		let found = null;
-		for (let segment of lines[line - 1] ?? []) if (segment[0] <= column - 1) found = segment;
-		let name = found ? sources[found[1]] : null;
-		if (!found || typeof name !== "string") return null;
-		return {
-			source: root ? `${root.replace(/\/$/, "")}/${name}` : name,
-			line: found[2] + 1,
-			column: found[3] + 1
-		};
-	};
+	return `(globalThis.${PICKER_GLOBAL} ??= (${runtime()})(${adapter ?? "null"}, ${JSON.stringify(name)}))`;
 }
 //#endregion
-//#region ../picker-react-grab/src/lib/source.ts
+//#region src/bridge.ts
 /**
-* The project path of a file React Grab names. React Grab maps React's stack through the dev
-* server's source maps, whose sources are relative to the module that names them (Vite writes
-* `card.tsx` for `/src/components/card.tsx`). The module's address is still in React's own stack,
-* so the file resolves against the first frame from the page's origin that shares its name. It runs
-* in the project's pages as module text, so it must not reference anything outside its own body.
-* @param file - The file React Grab reported: a name, a relative or absolute path, or a URL.
-* @param stack - React's stack for the element, as `Error.stack` text.
-* @param origin - The page's origin; frames from elsewhere are never the project's.
-* @returns A path as the dev server serves it, such as `/src/components/card.tsx`, or null.
+* Hosts add this to the project's own pages during development, so Bud's Pages browser can follow
+* a page it shows in a cross-origin frame. It does nothing outside a frame, answers only its
+* parent, and reports where the page is. It receives nothing but back, forward, reload and the
+* picker's requests: `bud:pick` runs the project's picker and answers `bud:picked` with the
+* element, where it is on the page and the page's width; `bud:pick-cancel` ends a pick.
 */
-function sourceFile(file, stack, origin) {
-	let served = (url) => url.origin === origin && !url.pathname.startsWith("/@") && !url.pathname.includes("/node_modules/") && !/[\\\u0000-\u001f\u007f]/.test(url.pathname);
-	if (/^https?:\/\//.test(file)) {
-		let url = new URL(file);
-		return served(url) ? url.pathname : null;
-	}
-	let name = file.split("/").pop();
-	for (let line of stack.split("\n")) {
-		let match = /(https?:\/\/[^\s()]+?)(?::\d+){1,2}\)?\s*$/.exec(line);
-		if (!match) continue;
-		let frame = new URL(match[1]);
-		if (!served(frame) || frame.pathname.split("/").pop() !== name) continue;
-		if (file.startsWith("/")) return file.endsWith(frame.pathname) ? frame.pathname : null;
-		let resolved = new URL(file, frame);
-		return served(resolved) ? resolved.pathname : null;
-	}
-	return null;
-}
-function helpers() {
-	return [
-		"{",
-		`  sourceFile: ${sourceFile.toString()},`,
-		`  projectFrames: ${projectFrames.toString()},`,
-		`  sourceMapLookup: ${sourceMapLookup.toString()},`,
-		"}"
-	].join("\n");
-}
+var bridgeScript = `(() => {
+  if (window.parent === window || window.__budBridge) return
+  window.__budBridge = true
+  let parentOrigin = null
+  let send = () => {
+    if (!parentOrigin) return
+    window.parent.postMessage(
+      {
+        type: 'bud:location',
+        path: location.pathname + location.search + location.hash,
+        title: document.title,
+      },
+      parentOrigin,
+    )
+  }
+  addEventListener('message', (event) => {
+    if (event.source !== window.parent) return
+    let type = event.data && event.data.type
+    if (type === 'bud:hello') {
+      parentOrigin = event.origin
+      send()
+    } else if (event.origin !== parentOrigin) return
+    else if (type === 'bud:back') history.back()
+    else if (type === 'bud:forward') history.forward()
+    else if (type === 'bud:reload') location.reload()
+    else if (type === 'bud:pick') pick(event.data.id, event.origin)
+    else if (type === 'bud:pick-cancel') picker().then((module) => module.cancel(), () => {})
+  })
+  let picker = () => import(${JSON.stringify(PICKER_MODULE_URL)})
+  // The element a person picks, its point in page pixels and where it shows in the viewport, for
+  // the parent that asked.
+  let pick = async (id, origin) => {
+    if (typeof id !== 'string' || id.length > 64) return
+    let anchor = null
+    let point = null
+    let view = null
+    try {
+      anchor = await (await picker()).pick()
+    } catch {}
+    try {
+      let element = anchor && document.querySelector(anchor.selector)
+      if (element) {
+        let rect = element.getBoundingClientRect()
+        point = {
+          x: rect.left + scrollX + anchor.offsetX * rect.width,
+          y: rect.top + scrollY + anchor.offsetY * rect.height,
+          width: document.documentElement.clientWidth,
+        }
+        view = {
+          x: rect.left + anchor.offsetX * rect.width,
+          y: rect.top + anchor.offsetY * rect.height,
+        }
+      }
+    } catch {}
+    window.parent.postMessage(
+      {
+        type: 'bud:picked',
+        id,
+        path: location.pathname + location.search + location.hash,
+        anchor,
+        point,
+        view,
+      },
+      origin,
+    )
+  }
+  for (let method of ['pushState', 'replaceState']) {
+    let original = history[method]
+    history[method] = function (...args) {
+      let result = original.apply(this, args)
+      queueMicrotask(send)
+      return result
+    }
+  }
+  addEventListener('popstate', send)
+  addEventListener('hashchange', send)
+  addEventListener('load', send)
+  new MutationObserver(send).observe(document.head || document.documentElement, {
+    subtree: true,
+    childList: true,
+    characterData: true,
+  })
+})()`;
 /**
-* An expression that builds the React adapter without React Grab, for module or script text.
-* It needs nothing from the project, so pages without a dev server can run it too.
-* @returns JavaScript expression text evaluating to the picker adapter.
+* The page modules a project's picker runs as, by module ID. Hosts serve them to the project's
+* own pages during development; they hold no Bud state, only the picker's page code.
+* @param picker - The project's configured picker.
+* @returns Module text by ID, the picker module first.
 */
-function reactAdapterExpression() {
-	return `(${reactGrabAdapter.toString()})(null, ${helpers()})`;
+function pickerModules(picker) {
+	if (picker.name === "bud:react-grab" || picker.name === "bud:react") return /* @__PURE__ */ new Map([[PICKER_MODULE_ID, pickerModule(picker.name, PICKER_ADAPTER_MODULE_ID)], [PICKER_ADAPTER_MODULE_ID, picker.name === "bud:react-grab" ? reactGrabAdapterModule() : `export default ${reactAdapterExpression()}`]]);
+	let adapter = picker.module ? `/${picker.module.slice(2)}` : null;
+	return /* @__PURE__ */ new Map([[PICKER_MODULE_ID, pickerModule(picker.name, adapter)]]);
 }
-`${JSON.stringify(PICKER_MODULE_URL)}`;
 /**
 * The picker as a classic script, for pages no Bud Vite plugin serves, such as a branch's build.
 * React pickers read React's development build without React Grab, which such pages can't import;
@@ -711,4 +545,4 @@ function pickerPageScript(picker) {
 	return pickerScript(picker.module ? "bud:dom" : picker.name, null);
 }
 //#endregion
-export { PICKER_MODULE_URL as n, pickerPageScript as t };
+export { PICKER_MODULE_URL as a, PICKER_MODULE_ID as i, pickerModules as n, pickerPageScript as r, bridgeScript as t };