sculpted 0.0.0 → 0.1.0

package/dist/runtime.mjs

@@ -0,0 +1,613 @@
+import { _ as markerClassForEditId, g as editIdsFromMarkerClassList, r as DEFAULT_EDIT_ID_ATTRIBUTE } from "./protocol-BJm-xGHP.mjs";
+//#region src/runtime.ts
+const DEFAULT_GLOBAL_NAME = "__PANDA_INSPECTOR__";
+const PREVIEW_STYLE_ID = "panda-inspector-preview-styles";
+const HIGHLIGHT_ID = "panda-inspector-highlight";
+var PandaRuntimeInspector = class {
+	version = 1;
+	manifestEndpoint;
+	editorMetadataEndpoint;
+	writebackEndpoint;
+	tokenWritebackEndpoint;
+	openSourceEndpoint;
+	styleModuleEndpoint;
+	#attributes;
+	#environment;
+	#manifest;
+	#editorMetadata;
+	#entries = /* @__PURE__ */ new Map();
+	#stopInspecting;
+	#forcedStateElement;
+	constructor(options = {}, environment = browserEnvironment()) {
+		this.manifestEndpoint = options.manifestEndpoint ?? "/@panda-inspector/manifest";
+		this.editorMetadataEndpoint = options.editorMetadataEndpoint ?? "/@panda-inspector/editor-metadata";
+		this.writebackEndpoint = options.writebackEndpoint ?? "/@panda-inspector/writeback";
+		this.tokenWritebackEndpoint = options.tokenWritebackEndpoint ?? "/@panda-inspector/token-writeback";
+		this.openSourceEndpoint = options.openSourceEndpoint ?? "/@panda-inspector/open-source";
+		this.styleModuleEndpoint = options.styleModuleEndpoint ?? "/@panda-inspector/style-module";
+		this.#attributes = {
+			editId: options.attributes?.editId ?? "data-panda-edit-id",
+			source: options.attributes?.source ?? "data-panda-source",
+			jsxSource: options.attributes?.jsxSource ?? "data-panda-jsx-source",
+			component: options.attributes?.component ?? "data-preact-component",
+			forcedState: options.attributes?.forcedState ?? "data-panda-forced-state"
+		};
+		this.#environment = environment;
+	}
+	async loadManifest() {
+		const response = await this.#environment.fetch(this.manifestEndpoint, { cache: "no-store" });
+		if (!response.ok) throw new Error(`Failed to load Panda inspector manifest: ${response.status}`);
+		const manifest = await response.json();
+		this.#manifest = manifest;
+		this.#entries = new Map(manifest.entries.map((entry) => [entry.id, entry]));
+		return manifest;
+	}
+	async getManifest() {
+		return this.#manifest ?? this.loadManifest();
+	}
+	async loadEditorMetadata() {
+		const response = await this.#environment.fetch(this.editorMetadataEndpoint, { cache: "no-store" });
+		if (!response.ok) throw new Error(`Failed to load Panda editor metadata: ${response.status}`);
+		const metadata = await response.json();
+		this.#editorMetadata = metadata;
+		return metadata;
+	}
+	async getEditorMetadata() {
+		return this.#editorMetadata ?? this.loadEditorMetadata();
+	}
+	getEntry(id) {
+		return this.#entries.get(id);
+	}
+	async requestStyleEdit(request, write) {
+		const result = await (await this.#environment.fetch(this.writebackEndpoint, {
+			method: "POST",
+			cache: "no-store",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				...request,
+				options: {
+					...request.options,
+					write
+				}
+			})
+		})).json();
+		if (result.ok && result.manifestUpdate) await this.loadManifest();
+		return result;
+	}
+	async requestStyleEditBatch(requests, write) {
+		const batch = {
+			kind: "panda-css-batch",
+			requests,
+			options: { write }
+		};
+		const result = await (await this.#environment.fetch(this.writebackEndpoint, {
+			method: "POST",
+			cache: "no-store",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify(batch)
+		})).json();
+		if (result.ok && result.manifestUpdate) await this.loadManifest();
+		return result.responses;
+	}
+	async requestInlineCssSource(request, write) {
+		const result = await (await this.#environment.fetch(this.writebackEndpoint, {
+			method: "POST",
+			cache: "no-store",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				...request,
+				options: {
+					...request.options,
+					write
+				}
+			})
+		})).json();
+		if (result.ok && result.manifestUpdate) await this.loadManifest();
+		return result;
+	}
+	async getComponentStyleModule(componentSource) {
+		return await (await this.#environment.fetch(this.styleModuleEndpoint, {
+			method: "POST",
+			cache: "no-store",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({ componentSource })
+		})).json();
+	}
+	async requestStyleModuleEdit(request, write) {
+		const result = await (await this.#environment.fetch(this.writebackEndpoint, {
+			method: "POST",
+			cache: "no-store",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				...request,
+				options: {
+					...request.options,
+					write
+				}
+			})
+		})).json();
+		if (result.ok && result.manifestUpdate) await this.loadManifest();
+		return result;
+	}
+	async requestTokenConfigEdit(request, write) {
+		const result = await (await this.#environment.fetch(this.tokenWritebackEndpoint, {
+			method: "POST",
+			cache: "no-store",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				...request,
+				options: {
+					...request.options,
+					write
+				}
+			})
+		})).json();
+		if (result.ok && result.metadataUpdate) await this.loadEditorMetadata();
+		return result;
+	}
+	async openSourceLocation(request) {
+		const result = await (await this.#environment.fetch(this.openSourceEndpoint, {
+			method: "POST",
+			cache: "no-store",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify(request)
+		})).json();
+		if (!result.ok) return result;
+		try {
+			const editorResponse = await this.#environment.fetch(result.openEditorUrl, { cache: "no-store" });
+			if (editorResponse.ok) return result;
+			return {
+				ok: false,
+				error: {
+					code: "open-failed",
+					message: `Vite editor opener returned ${editorResponse.status}.`,
+					details: { file: result.file }
+				}
+			};
+		} catch (error) {
+			return {
+				ok: false,
+				error: {
+					code: "open-failed",
+					message: error instanceof Error ? error.message : String(error),
+					details: { file: result.file }
+				}
+			};
+		}
+	}
+	async selectElement(element) {
+		await this.getManifest();
+		const markerEditIds = editIdsFromMarkerClassList(element.getAttribute("class") ?? "");
+		const attributeEditIds = (element.getAttribute(this.#attributes.editId) ?? "").split(/\s+/).filter(Boolean);
+		const jsxSource = element.getAttribute(this.#attributes.jsxSource)?.trim() || void 0;
+		const jsxSourceEditIds = markerEditIds.length === 0 && attributeEditIds.length === 0 && jsxSource ? this.#entriesForJsxSource(jsxSource).map((entry) => entry.id) : [];
+		const targetIds = markerEditIds.length > 0 ? markerEditIds : attributeEditIds.length > 0 ? attributeEditIds : jsxSourceEditIds;
+		const editId = targetIds.join(" ") || void 0;
+		const source = element.getAttribute(this.#attributes.source) ?? void 0;
+		const component = element.getAttribute(this.#attributes.component) ?? void 0;
+		const evidence = this.#elementEvidence(element);
+		if (!editId) return {
+			state: "no-panda-metadata",
+			source,
+			component,
+			targets: [],
+			editableTargets: [],
+			readonlyTargets: [],
+			missingTargetIds: [],
+			evidence,
+			message: "Selected element does not include Panda inspector metadata."
+		};
+		const targets = [];
+		const missingTargetIds = [];
+		for (const targetId of targetIds) {
+			const target = this.#entries.get(targetId);
+			if (target) targets.push(target);
+			else missingTargetIds.push(targetId);
+		}
+		const editableTargets = targets.filter(isEditableTarget);
+		const readonlyTargets = targets.filter((target) => !isEditableTarget(target));
+		const targetGroups = {
+			editableTargets,
+			readonlyTargets,
+			missingTargetIds
+		};
+		if (editableTargets.length > 0 && (readonlyTargets.length > 0 || missingTargetIds.length > 0)) return {
+			state: "mixed-targets",
+			editId,
+			source,
+			component,
+			targets,
+			...targetGroups,
+			evidence,
+			message: "Selected element includes editable and read-only Panda source targets."
+		};
+		if (editableTargets.length > 1) return {
+			state: "multiple-supported-targets",
+			editId,
+			source,
+			component,
+			targets,
+			...targetGroups,
+			evidence,
+			message: "Selected element maps to multiple editable Panda css() objects."
+		};
+		if (editableTargets[0]) return {
+			state: "single-supported-target",
+			editId,
+			source,
+			component,
+			targets,
+			...targetGroups,
+			evidence
+		};
+		if (missingTargetIds.length > 0) return {
+			state: "stale-target",
+			editId,
+			source,
+			component,
+			targets,
+			...targetGroups,
+			evidence,
+			message: "Selected element metadata no longer exists in the current manifest."
+		};
+		const target = readonlyTargets[0];
+		return {
+			state: targetIds.length > 1 ? "multiple-targets" : "unsupported-target",
+			editId,
+			source,
+			component,
+			targets,
+			...targetGroups,
+			evidence,
+			message: target?.reason ?? "Selected Panda source target is not editable."
+		};
+	}
+	startInspecting(onSelect, onStop) {
+		this.stopInspecting();
+		const { window } = this.#environment;
+		const onPointerMove = (event) => {
+			const element = this.inspectableElementFromPoint(event.clientX, event.clientY);
+			if (!element) {
+				this.#clearHighlight();
+				return;
+			}
+			this.highlightElement(element);
+		};
+		const onClick = (event) => {
+			const element = this.inspectableElementFromPoint(event.clientX, event.clientY);
+			if (!element) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.stopInspecting();
+			this.selectElement(element).then((info) => {
+				onSelect?.(info, element);
+			});
+		};
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				this.stopInspecting();
+			}
+		};
+		window.addEventListener("pointermove", onPointerMove, true);
+		window.addEventListener("click", onClick, true);
+		window.addEventListener("keydown", onKeyDown, true);
+		this.#stopInspecting = () => {
+			window.removeEventListener("pointermove", onPointerMove, true);
+			window.removeEventListener("click", onClick, true);
+			window.removeEventListener("keydown", onKeyDown, true);
+			this.#clearHighlight();
+			this.#stopInspecting = void 0;
+			onStop?.();
+		};
+		return this.#stopInspecting;
+	}
+	stopInspecting() {
+		this.#stopInspecting?.();
+	}
+	highlightElement(element) {
+		this.highlightElements([element]);
+	}
+	highlightElements(elements) {
+		this.#highlightElements(elements);
+	}
+	highlightSourceTarget(editId) {
+		this.highlightElements(this.sourceTargetElements(editId));
+	}
+	sourceTargetElements(editId) {
+		const markerClass = markerClassForEditId(editId);
+		const entry = this.#entries.get(editId);
+		const selector = [
+			`.${markerClass}`,
+			`[${this.#attributes.editId}~=${cssStringLiteral(editId)}]`,
+			entry?.jsxSource ? `[${this.#attributes.jsxSource}=${cssStringLiteral(entry.jsxSource)}]` : void 0,
+			...(entry?.jsxSourceAliases ?? []).map((source) => `[${this.#attributes.jsxSource}=${cssStringLiteral(source)}]`)
+		].filter((item) => item !== void 0).join(", ");
+		return Array.from(this.#environment.document.querySelectorAll(selector)).filter((element) => !isInspectorOwnedElement(element));
+	}
+	clearHighlight() {
+		this.#clearHighlight();
+	}
+	applyForcedStates(element, states) {
+		this.clearForcedStates();
+		if (!element || states.length === 0) return;
+		element.setAttribute(this.#attributes.forcedState, states.join(" "));
+		this.#forcedStateElement = element;
+	}
+	clearForcedStates() {
+		this.#forcedStateElement?.removeAttribute(this.#attributes.forcedState);
+		this.#forcedStateElement = void 0;
+	}
+	metadataBackedElementFromPoint(x, y) {
+		const element = this.#environment.document.elementFromPoint(x, y);
+		if (!element || isInspectorOwnedElement(element)) return void 0;
+		return metadataBackedElement(element, this.#attributes);
+	}
+	inspectableElementFromPoint(x, y) {
+		const element = this.#environment.document.elementFromPoint(x, y);
+		return element && !isInspectorOwnedElement(element) ? element : void 0;
+	}
+	applyPreview(preview) {
+		const style = this.#previewStyleElement();
+		style.textContent = preview.rules.flatMap((rule) => {
+			const markerClass = markerClassForEditId(rule.editId);
+			const entry = this.#entries.get(rule.editId);
+			const blocks = [];
+			const declarationsByCondition = /* @__PURE__ */ new Map();
+			for (const declaration of rule.declarations) declarationsByCondition.set(declaration.condition, [...declarationsByCondition.get(declaration.condition) ?? [], declaration]);
+			for (const [condition, declarationsForCondition] of declarationsByCondition) {
+				const declarations = declarationsForCondition.map((declaration) => `  ${declaration.property}: ${declaration.value} !important;`).join("\n");
+				const selectors = [
+					`.${escapeCssClass(markerClass)}`,
+					`[${DEFAULT_EDIT_ID_ATTRIBUTE}~="${escapeCssAttribute(rule.editId)}"]`,
+					entry?.jsxSource ? `[${this.#attributes.jsxSource}="${escapeCssAttribute(entry.jsxSource)}"]` : void 0,
+					...(entry?.jsxSourceAliases ?? []).map((source) => `[${this.#attributes.jsxSource}="${escapeCssAttribute(source)}"]`)
+				].filter((selector) => selector !== void 0).flatMap((selector) => condition ? previewConditionSelectors(selector, condition, this.#attributes) : selector).join(", ");
+				blocks.push(`${selectors} {\n${declarations}\n}`);
+			}
+			return blocks;
+		}).join("\n\n");
+		this.#environment.document.head.append(style);
+	}
+	clearPreview() {
+		this.#environment.document.getElementById(PREVIEW_STYLE_ID)?.remove();
+	}
+	#elementEvidence(element) {
+		return {
+			computedStyles: computedStyleSnapshot(this.#environment.window, this.#environment.document, element),
+			propertyContext: propertyContextSnapshot(this.#environment.window, element),
+			attributes: attributeSnapshot(element),
+			bounds: boundsSnapshot(element),
+			ancestors: ancestorSnapshot(element),
+			componentLayers: componentLayerSnapshot(element, this.#attributes)
+		};
+	}
+	#previewStyleElement() {
+		const { document } = this.#environment;
+		const existing = document.getElementById(PREVIEW_STYLE_ID);
+		if (existing?.tagName === "STYLE") return existing;
+		const style = document.createElement("style");
+		style.id = PREVIEW_STYLE_ID;
+		style.setAttribute("data-panda-inspector-owned", "true");
+		document.head.append(style);
+		return style;
+	}
+	#entriesForJsxSource(jsxSource) {
+		return Array.from(this.#entries.values()).filter((entry) => entry.jsxSource === jsxSource || (entry.jsxSourceAliases ?? []).includes(jsxSource));
+	}
+	#highlightElements(elements) {
+		const { document } = this.#environment;
+		if (elements.length === 0) {
+			this.#clearHighlight();
+			return;
+		}
+		const existing = document.getElementById(HIGHLIGHT_ID);
+		const highlight = existing ?? document.createElement("div");
+		highlight.id = HIGHLIGHT_ID;
+		highlight.setAttribute("data-panda-inspector-owned", "true");
+		highlight.setAttribute("style", [
+			"position: fixed",
+			"pointer-events: none",
+			"z-index: 2147483647",
+			"inset: 0"
+		].join("; "));
+		highlight.textContent = "";
+		for (const element of elements) {
+			const bounds = element.getBoundingClientRect();
+			const outline = document.createElement("div");
+			outline.setAttribute("style", [
+				"position: fixed",
+				"pointer-events: none",
+				"border: 2px solid #1683d8",
+				"box-sizing: border-box",
+				`left: ${bounds.left}px`,
+				`top: ${bounds.top}px`,
+				`width: ${bounds.width}px`,
+				`height: ${bounds.height}px`
+			].join("; "));
+			highlight.append(outline);
+		}
+		if (!existing) document.body.append(highlight);
+	}
+	#clearHighlight() {
+		this.#environment.document.getElementById(HIGHLIGHT_ID)?.remove();
+	}
+};
+function installPandaInspectorRuntime(options = {}) {
+	const environment = browserEnvironment();
+	const runtime = new PandaRuntimeInspector(options, environment);
+	const globalName = options.globalName ?? DEFAULT_GLOBAL_NAME;
+	environment.window[globalName] = runtime;
+	return runtime;
+}
+function browserEnvironment() {
+	if (typeof window === "undefined" || typeof document === "undefined") throw new Error("Panda inspector runtime requires a browser environment.");
+	return {
+		window,
+		document,
+		fetch: window.fetch.bind(window)
+	};
+}
+function computedStyleSnapshot(window, document, element) {
+	const style = window.getComputedStyle(element);
+	const defaultElement = document.createElement(element.tagName.toLowerCase());
+	defaultElement.setAttribute("data-panda-inspector-owned", "true");
+	document.body.append(defaultElement);
+	const defaultStyle = window.getComputedStyle(defaultElement);
+	const declarations = [];
+	try {
+		for (const property of style) {
+			const value = style.getPropertyValue(property);
+			if (value === defaultStyle.getPropertyValue(property)) continue;
+			declarations.push({
+				property,
+				value
+			});
+		}
+	} finally {
+		defaultElement.remove();
+	}
+	return declarations;
+}
+function propertyContextSnapshot(window, element) {
+	const style = window.getComputedStyle(element);
+	const parentStyle = element.parentElement ? window.getComputedStyle(element.parentElement) : void 0;
+	return {
+		tagName: element.tagName.toLowerCase(),
+		display: style.getPropertyValue("display") || "inline",
+		parentDisplay: parentStyle?.getPropertyValue("display") || void 0,
+		position: style.getPropertyValue("position") || "static",
+		overflow: style.getPropertyValue("overflow") || "visible",
+		overflowX: style.getPropertyValue("overflow-x") || "visible",
+		overflowY: style.getPropertyValue("overflow-y") || "visible",
+		whiteSpace: style.getPropertyValue("white-space") || "normal"
+	};
+}
+function attributeSnapshot(element) {
+	return Array.from(element.attributes, (attribute) => ({
+		name: attribute.name,
+		value: attribute.value
+	}));
+}
+function boundsSnapshot(element) {
+	const bounds = element.getBoundingClientRect();
+	return {
+		x: bounds.x,
+		y: bounds.y,
+		width: bounds.width,
+		height: bounds.height
+	};
+}
+function ancestorSnapshot(element) {
+	const ancestors = [];
+	let current = element.parentElement;
+	while (current) {
+		ancestors.push(current.tagName.toLowerCase());
+		current = current.parentElement;
+	}
+	return ancestors;
+}
+function componentLayerSnapshot(element, attributes) {
+	const layers = [];
+	const pendingElements = [];
+	let current = element;
+	let activeComponent;
+	let depth = 0;
+	while (current && depth < 24) {
+		const ownComponent = current.getAttribute(attributes.component)?.trim() || void 0;
+		const snapshot = componentLayerElementSnapshot(current, element, attributes);
+		if (!ownComponent && !activeComponent) {
+			pendingElements.push(snapshot);
+			current = current.parentElement;
+			depth += 1;
+			continue;
+		}
+		const component = ownComponent || activeComponent;
+		if (component !== activeComponent) {
+			layers.push({
+				component,
+				elements: []
+			});
+			activeComponent = component;
+			layers[layers.length - 1]?.elements.push(...pendingElements);
+			pendingElements.length = 0;
+		}
+		layers[layers.length - 1]?.elements.push(snapshot);
+		current = current.parentElement;
+		depth += 1;
+	}
+	if (pendingElements.length > 0) layers.push({
+		component: "DOM",
+		elements: pendingElements
+	});
+	return layers.filter((layer) => layer.elements.length > 0);
+}
+function componentLayerElementSnapshot(current, inspectedElement, attributes) {
+	const tagName = current.tagName.toLowerCase();
+	return {
+		tagName,
+		source: current.getAttribute(attributes.jsxSource)?.trim() || void 0,
+		element: tagName === "html" || tagName === "body" ? void 0 : current,
+		inspected: current === inspectedElement
+	};
+}
+function metadataBackedElement(element, attributes) {
+	let current = element;
+	while (current) {
+		if (isInspectorOwnedElement(current)) return void 0;
+		if (hasPandaMetadata(current, attributes)) return current;
+		current = current.parentElement;
+	}
+}
+function hasPandaMetadata(element, attributes) {
+	if (editIdsFromMarkerClassList(element.getAttribute("class") ?? "").length > 0) return true;
+	return (element.getAttribute(attributes.editId) ?? "").split(/\s+/).filter(Boolean).length > 0;
+}
+function cssStringLiteral(value) {
+	return `"${value.replace(/["\\\n\r\f]/g, (character) => {
+		if (character === "\n") return "\\a ";
+		if (character === "\r") return "\\d ";
+		if (character === "\f") return "\\c ";
+		return `\\${character}`;
+	})}"`;
+}
+function isInspectorOwnedElement(element) {
+	let current = element;
+	while (current) {
+		if (current.getAttribute("data-panda-inspector-owned") === "true" || current.getAttribute("data-panda-inspector-panel") === "true") return true;
+		if (current.parentElement) {
+			current = current.parentElement;
+			continue;
+		}
+		if (typeof current.getRootNode !== "function") return false;
+		const root = current.getRootNode();
+		current = isShadowRoot(root) ? root.host : null;
+	}
+	return false;
+}
+function isShadowRoot(root) {
+	return typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot;
+}
+function isEditableTarget(target) {
+	return target.kind === "panda-css";
+}
+function escapeCssAttribute(value) {
+	return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+}
+function escapeCssClass(value) {
+	return value.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+}
+function previewConditionSelectors(selector, condition, attributes) {
+	const forcedSelector = `${selector}[${attributes.forcedState}~="${escapeCssAttribute(condition)}"]`;
+	const pseudoSelector = previewConditionPseudoSelector(condition);
+	return pseudoSelector ? [`${selector}${pseudoSelector}`, forcedSelector] : [forcedSelector];
+}
+function previewConditionPseudoSelector(condition) {
+	if (condition === "hover") return ":hover";
+	if (condition === "focus") return ":focus";
+	if (condition === "focus-visible") return ":focus-visible";
+	if (condition === "active") return ":active";
+}
+//#endregion
+export { PandaRuntimeInspector, installPandaInspectorRuntime };