wgsl-edit 0.0.21 → 0.0.23

package/dist/WgslEdit-CYb8MVnU.js

@@ -0,0 +1,762 @@
+import { createWeslLinter, wesl } from "./Language.js";
+import { HighlightStyle, bracketMatching, defaultHighlightStyle, foldGutter, foldKeymap, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { forceLinting, lintKeymap } from "@codemirror/lint";
+import { fileToModulePath, link } from "wesl";
+import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { searchKeymap } from "@codemirror/search";
+import { Compartment, EditorState, Text } from "@codemirror/state";
+import { EditorView, crosshairCursor, drawSelection, dropCursor, gutters, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+import { fetchPackagesByName } from "wesl-fetch";
+//#region src/WgslEdit.css?inline
+var WgslEdit_default = ":host {\n  --tab-bar-bg: transparent;\n  --tab-border: #ccc;\n  --tab-color: #999;\n  --tab-active-bg: #fff;\n  --tab-active-color: #222;\n  --tab-accent: #5f61d8;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-height: 100px;\n}\n\n:host(.dark) {\n  --tab-bar-bg: transparent;\n  --tab-border: #555;\n  --tab-color: #999;\n  --tab-active-bg: #1e1e1e;\n  --tab-active-color: #fff;\n}\n\n.tab-bar {\n  --bar-v: 6px;\n  --bar-h: 8px;\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: var(--bar-v) var(--bar-h);\n  background: var(--tab-bar-bg);\n  flex-shrink: 0;\n  position: relative;\n}\n\n.tab-bar::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--tab-border);\n}\n\n.tab {\n  --tab-v: 5px;\n  --tab-h: 12px;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  padding: var(--tab-v) var(--tab-h);\n  background: transparent;\n  border: none;\n  border-radius: 0;\n  color: var(--tab-color);\n  cursor: pointer;\n  position: relative;\n  font-size: 15px;\n  font-family: system-ui, sans-serif;\n}\n\n.tab.active {\n  color: var(--tab-accent);\n  font-weight: 600;\n  padding-bottom: calc(var(--tab-v) + var(--bar-v) + 0.5px);\n  margin-bottom: calc(-1 * (var(--bar-v) + 0.5px));\n  position: relative;\n  z-index: 1;\n  border-bottom: 2px solid var(--tab-accent);\n}\n\n.tab.active:first-child {\n  margin-left: calc(-1 * var(--bar-h));\n  padding-left: calc(var(--tab-h) + var(--bar-h));\n}\n\n.tab-close {\n  position: absolute;\n  right: -8px;\n  /* top: 2px; */\n  width: 16px;\n  height: 16px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  opacity: 0;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.tab:hover .tab-close {\n  opacity: 0.6;\n}\n\n.tab-close:hover {\n  opacity: 1;\n}\n\n.tab-rename {\n  background: var(--tab-active-bg);\n  border: 1px solid var(--tab-border);\n  border-radius: 4px;\n  color: var(--tab-active-color);\n  font-size: 15px;\n  font-family: system-ui, sans-serif;\n  padding: 0 4px;\n  outline: none;\n}\n\n.tab-add {\n  padding: 0 10px;\n  background: transparent;\n  border: none;\n  color: var(--tab-color);\n  cursor: pointer;\n  font-size: 25px;\n  line-height: 1;\n}\n\n.tab-add:hover {\n  color: var(--tab-active-color);\n}\n\n.editor-container {\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n  padding: var(--editor-padding, 16px 0 0);\n}\n\n.cm-editor {\n  height: 100%;\n  font-size: var(--editor-font-size, 14px);\n}\n\n.cm-scroller {\n  overflow: auto;\n}\n\n.snackbar {\n  position: absolute;\n  bottom: 16px;\n  left: 16px;\n  background: #e8e8e8;\n  color: #333;\n  padding: 10px 20px;\n  border-radius: 8px;\n  font-size: 14px;\n  font-family: system-ui, sans-serif;\n  line-height: 1.4;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.2s;\n  z-index: 10;\n}\n\n:host(.dark) .snackbar {\n  background: #3a3a3a;\n  color: #e0e0e0;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);\n}\n\n.snackbar.visible {\n  opacity: 1;\n}\n";
+//#endregion
+//#region src/WgslEdit.ts
+const light = {
+	variable: "#000f80",
+	keyword: "#0000ff",
+	control: "#af00db",
+	type: "#891a1a",
+	fn: "#795e26",
+	number: "#098658",
+	comment: "#008000",
+	modulePath: "#0070c1"
+};
+const dark = {
+	variable: "#9cdcfe",
+	keyword: "#569cd6",
+	control: "#c586c0",
+	type: "#4ec9b0",
+	fn: "#dcdcaa",
+	number: "#b5cea8",
+	comment: "#6a9955",
+	modulePath: "#4fc1ff"
+};
+const lightColors = weslColors(light);
+const darkColors = weslColors(dark);
+let cachedStyleSheet;
+var WgslEdit = class extends HTMLElement {
+	static observedAttributes = [
+		"src",
+		"readonly",
+		"theme",
+		"shader-root",
+		"tabs",
+		"lint",
+		"lint-from",
+		"line-numbers",
+		"fetch-libs"
+	];
+	editorView = null;
+	editorContainer;
+	tabBar;
+	snackbar;
+	readonlyCompartment = new Compartment();
+	themeCompartment = new Compartment();
+	lintCompartment = new Compartment();
+	lineNumbersCompartment = new Compartment();
+	_pendingSource = null;
+	_theme = "auto";
+	_mediaQuery = null;
+	_lineNumbers = false;
+	_files = /* @__PURE__ */ new Map();
+	_activeFile = "";
+	_rootModuleName;
+	_tabs = true;
+	_lint = "on";
+	_fetchLibs = true;
+	_conditions = {};
+	_packageName;
+	_libs = [];
+	_ignorePackages = ["constants", "env"];
+	_fetchingPkgs = /* @__PURE__ */ new Set();
+	_fetchedPkgs = /* @__PURE__ */ new Set();
+	_snackTimer;
+	_externalDiagnostics = [];
+	_lintFromEl = null;
+	/** Bound listeners for lint-from element's compile events. */
+	_boundCompileError = this.onCompileError.bind(this);
+	_boundCompileSuccess = this.onCompileSuccess.bind(this);
+	constructor() {
+		super();
+		const shadow = this.attachShadow({ mode: "open" });
+		shadow.adoptedStyleSheets = [getStyles()];
+		this.tabBar = document.createElement("div");
+		this.tabBar.className = "tab-bar";
+		shadow.appendChild(this.tabBar);
+		this.editorContainer = document.createElement("div");
+		this.editorContainer.className = "editor-container";
+		shadow.appendChild(this.editorContainer);
+		this.snackbar = document.createElement("div");
+		this.snackbar.className = "snackbar";
+		this.snackbar.textContent = "Loading…";
+		shadow.appendChild(this.snackbar);
+	}
+	connectedCallback() {
+		this.initEditor();
+		this.loadInitialContent();
+		upgradeProperty(this, "conditions");
+		upgradeProperty(this, "source");
+		upgradeProperty(this, "sources");
+		upgradeProperty(this, "project");
+	}
+	disconnectedCallback() {
+		this.connectLintSource(null);
+		this.editorView?.destroy();
+		this.editorView = null;
+	}
+	attributeChangedCallback(name, _old, value) {
+		if (name === "src" && value && this.editorView) this.loadFromUrl(value);
+		else if (name === "readonly") this.updateReadonly();
+		else if (name === "theme") this.theme = value || "auto";
+		else if (name === "tabs") {
+			this._tabs = value !== "false";
+			this.renderTabs();
+		} else if (name === "lint") {
+			this._lint = value || "on";
+			this.updateLint();
+		} else if (name === "lint-from") this.connectLintSource(value);
+		else if (name === "line-numbers") {
+			this._lineNumbers = value === "true";
+			this.updateLineNumbers();
+		} else if (name === "fetch-libs") {
+			this._fetchLibs = value !== "false";
+			this.updateLint();
+		}
+	}
+	/** Conditions for conditional compilation (@if/@elif/@else). */
+	get conditions() {
+		return this._conditions;
+	}
+	set conditions(value) {
+		this._conditions = value;
+		this.updateLint();
+		this.dispatchChange();
+	}
+	/** Active file content (single-file API). */
+	get source() {
+		return this.editorView?.state.doc.toString() ?? this._pendingSource ?? "";
+	}
+	/** Set active file content (single-file API). Auto-creates a default file entry. */
+	set source(value) {
+		if (!this._activeFile && this._files.size === 0) {
+			this._files.set("main.wesl", { doc: Text.of(value.split("\n")) });
+			this._activeFile = "main.wesl";
+			this.renderTabs();
+		}
+		if (this.editorView) {
+			const to = this.editorView.state.doc.length;
+			this.editorView.dispatch({ changes: {
+				from: 0,
+				to,
+				insert: value
+			} });
+		} else {
+			this._pendingSource = value;
+			const entry = this._files.get(this._activeFile);
+			if (entry) entry.doc = Text.of(value.split("\n"));
+		}
+	}
+	/** All file contents keyed by module path (e.g., "package::main"). */
+	get sources() {
+		this.saveCurrentFileState();
+		const pkg = this._packageName ?? "package";
+		const result = {};
+		for (const [tabName, state] of this._files) result[fileToModulePath(tabName, pkg, false)] = state.doc.toString();
+		return result;
+	}
+	/** Set all files (replaces existing). */
+	set sources(value) {
+		this._files.clear();
+		for (const [key, content] of Object.entries(value)) {
+			const tabName = toTabName(key);
+			this._files.set(tabName, { doc: Text.of(content.split("\n")) });
+		}
+		const firstKey = Object.keys(value)[0];
+		if (firstKey) this.switchToFile(toTabName(firstKey));
+		this.renderTabs();
+	}
+	/** Load a full project config (sources, conditions, packageName, etc.). */
+	set project(value) {
+		const { weslSrc, rootModuleName, conditions, packageName, libs } = value;
+		if (conditions !== void 0) this._conditions = conditions;
+		if (packageName !== void 0) this._packageName = packageName;
+		if (libs !== void 0) this._libs = libs;
+		if (rootModuleName !== void 0) this._rootModuleName = rootModuleName;
+		if (weslSrc) {
+			this.sources = weslSrc;
+			const tab = toTabName(rootModuleName ?? this._rootModuleName ?? "");
+			if (tab) this.activeFile = tab;
+		}
+		this.updateLint();
+	}
+	/** Link/compile WESL sources into WGSL. Returns the compiled WGSL string. */
+	async link(options) {
+		const pkg = this._packageName ?? "package";
+		const rootModuleName = this._rootModuleName ?? fileToModulePath(this._activeFile, pkg, false);
+		return (await link({
+			weslSrc: this.sources,
+			rootModuleName,
+			conditions: this._conditions,
+			libs: this._libs,
+			packageName: pkg,
+			...options
+		})).dest;
+	}
+	/** Library bundles for linking (set via project). */
+	get libs() {
+		return this._libs;
+	}
+	/** Root module for linking (stable across tab switches). */
+	get rootModuleName() {
+		return this._rootModuleName;
+	}
+	set rootModuleName(value) {
+		this._rootModuleName = value;
+		this.dispatchChange();
+	}
+	/** Currently active file name (selected tab). */
+	get activeFile() {
+		return this._activeFile;
+	}
+	/** Switch to a file by name. */
+	set activeFile(name) {
+		this.switchToFile(name);
+	}
+	/** List of file names in order. */
+	get fileNames() {
+		return Array.from(this._files.keys());
+	}
+	/** Tab bar visibility. */
+	get tabs() {
+		return this._tabs;
+	}
+	set tabs(value) {
+		this._tabs = value;
+		this.renderTabs();
+	}
+	/** Lint mode: "on" (default) or "off". */
+	get lint() {
+		return this._lint;
+	}
+	set lint(value) {
+		this._lint = value;
+		this.updateLint();
+	}
+	/** Line numbers visibility (default: true). */
+	get lineNumbers() {
+		return this._lineNumbers;
+	}
+	set lineNumbers(value) {
+		this._lineNumbers = value;
+		if (value) this.setAttribute("line-numbers", "true");
+		else this.removeAttribute("line-numbers");
+	}
+	/** Whether to auto-fetch missing library packages from npm (default: true). */
+	get fetchLibs() {
+		return this._fetchLibs;
+	}
+	set fetchLibs(value) {
+		this._fetchLibs = value;
+		if (value) this.removeAttribute("fetch-libs");
+		else this.setAttribute("fetch-libs", "false");
+	}
+	/** Whether the editor is currently loading content. */
+	get loading() {
+		return this.snackbar.classList.contains("visible");
+	}
+	set loading(value) {
+		if (value) this.showSnack("Loading…");
+		else this.hideSnack();
+	}
+	/** Show the snackbar with a message. Auto-hides after `ms` if provided. */
+	showSnack(msg, ms) {
+		clearTimeout(this._snackTimer);
+		this.snackbar.textContent = msg;
+		this.snackbar.classList.add("visible");
+		console.log("wgsl-edit showSnack:", msg);
+		if (ms) this._snackTimer = setTimeout(() => this.hideSnack(), ms);
+	}
+	hideSnack() {
+		clearTimeout(this._snackTimer);
+		this.snackbar.classList.remove("visible");
+	}
+	get readonly() {
+		return this.hasAttribute("readonly");
+	}
+	set readonly(value) {
+		if (value) this.setAttribute("readonly", "");
+		else this.removeAttribute("readonly");
+	}
+	get theme() {
+		return this._theme;
+	}
+	set theme(value) {
+		this._theme = value;
+		this.updateTheme();
+	}
+	get shaderRoot() {
+		return this.getAttribute("shader-root");
+	}
+	set shaderRoot(value) {
+		if (value) this.setAttribute("shader-root", value);
+		else this.removeAttribute("shader-root");
+	}
+	/** Add a new file. */
+	addFile(name, content = "") {
+		if (this._files.has(name)) return;
+		this._files.set(name, { doc: Text.of(content.split("\n")) });
+		this.switchToFile(name);
+		this.renderTabs();
+		this.dispatchFileChange("add", name);
+	}
+	/** Remove a file. */
+	removeFile(name) {
+		if (!this._files.has(name) || this._files.size <= 1) return;
+		this._files.delete(name);
+		if (this._activeFile === name) {
+			const firstFile = this._files.keys().next().value;
+			this.switchToFile(firstFile);
+		}
+		this.renderTabs();
+		this.dispatchFileChange("remove", name);
+	}
+	/** Rename a file. */
+	renameFile(oldName, newName) {
+		const state = this._files.get(oldName);
+		if (!state || this._files.has(newName)) return;
+		this._files.delete(oldName);
+		this._files.set(newName, state);
+		if (this._activeFile === oldName) this._activeFile = newName;
+		this.renderTabs();
+		this.dispatchFileChange("rename", newName);
+	}
+	/** Switch to a file, saving current state and restoring target state. */
+	switchToFile(name) {
+		if (!this._files.has(name) || name === this._activeFile) return;
+		this.saveCurrentFileState();
+		this._activeFile = name;
+		const fileState = this._files.get(name);
+		if (this.editorView) {
+			const changes = {
+				from: 0,
+				to: this.editorView.state.doc.length,
+				insert: fileState.doc.toString()
+			};
+			const effects = EditorView.scrollIntoView(fileState.scrollPos ?? 0);
+			this.editorView.dispatch({
+				changes,
+				selection: fileState.selection,
+				effects
+			});
+		}
+		this.renderTabs();
+	}
+	/** Save current editor state to the active file. */
+	saveCurrentFileState() {
+		if (!this.editorView || !this._activeFile) return;
+		const state = this._files.get(this._activeFile);
+		if (state) {
+			state.doc = this.editorView.state.doc;
+			state.selection = this.editorView.state.selection;
+			state.scrollPos = this.editorView.scrollDOM.scrollTop;
+		}
+	}
+	dispatchChange() {
+		const { source, sources, conditions, _rootModuleName: rootModuleName, libs } = this;
+		const detail = {
+			source,
+			sources,
+			rootModuleName,
+			conditions,
+			libs
+		};
+		this.dispatchEvent(new CustomEvent("change", { detail }));
+	}
+	dispatchFileChange(action, file) {
+		this.dispatchEvent(new CustomEvent("file-change", { detail: {
+			action,
+			file
+		} }));
+	}
+	initEditor() {
+		this.readInitialAttributes();
+		this.parseInlineContent();
+		this._mediaQuery = matchMedia("(prefers-color-scheme: dark)");
+		this._mediaQuery.addEventListener("change", () => this.updateTheme());
+		const firstFile = this._files.keys().next().value;
+		const initialDoc = this._pendingSource ?? (firstFile ? this._files.get(firstFile).doc.toString() : "");
+		this._pendingSource = null;
+		if (firstFile) this._activeFile = firstFile;
+		else if (initialDoc) {
+			this._files.set("main.wesl", { doc: Text.of(initialDoc.split("\n")) });
+			this._activeFile = "main.wesl";
+		}
+		this.editorView = new EditorView({
+			state: EditorState.create({
+				doc: initialDoc,
+				extensions: this.buildExtensions()
+			}),
+			parent: this.editorContainer
+		});
+		this.renderTabs();
+	}
+	readInitialAttributes() {
+		const themeAttr = this.getAttribute("theme");
+		if (themeAttr) this._theme = themeAttr;
+		const tabsAttr = this.getAttribute("tabs");
+		if (tabsAttr !== null) this._tabs = tabsAttr !== "false";
+		const lintAttr = this.getAttribute("lint");
+		if (lintAttr) this._lint = lintAttr;
+		const lineNumAttr = this.getAttribute("line-numbers");
+		if (lineNumAttr !== null) this._lineNumbers = lineNumAttr === "true";
+		const lintFromAttr = this.getAttribute("lint-from");
+		if (lintFromAttr) this.connectLintSource(lintFromAttr);
+	}
+	buildExtensions() {
+		const baseTheme = EditorView.theme({
+			".cm-content": { padding: "0" },
+			".cm-line": { padding: "0" },
+			".cm-panels": { position: "relative" }
+		});
+		return [
+			gutters({ fixed: false }),
+			lineNumbers(),
+			highlightActiveLineGutter(),
+			highlightSpecialChars(),
+			history(),
+			foldGutter(),
+			drawSelection(),
+			dropCursor(),
+			EditorState.allowMultipleSelections.of(true),
+			indentOnInput(),
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			bracketMatching(),
+			closeBrackets(),
+			autocompletion(),
+			rectangularSelection(),
+			crosshairCursor(),
+			highlightActiveLine(),
+			keymap.of([
+				...closeBracketsKeymap,
+				...defaultKeymap,
+				...searchKeymap,
+				...historyKeymap,
+				...foldKeymap,
+				...completionKeymap,
+				...lintKeymap
+			]),
+			wesl(),
+			baseTheme,
+			this.themeCompartment.of(this.resolveTheme()),
+			this.readonlyCompartment.of(EditorState.readOnly.of(this.readonly)),
+			this.lintCompartment.of(this.resolveLint()),
+			this.lineNumbersCompartment.of(this.resolveLineNumbers()),
+			EditorView.updateListener.of((update) => {
+				if (update.docChanged) {
+					this._externalDiagnostics = [];
+					this.saveCurrentFileState();
+					this.dispatchChange();
+				}
+			})
+		];
+	}
+	resolveTheme() {
+		const isDark = this._theme === "dark" || this._theme === "auto" && matchMedia("(prefers-color-scheme: dark)").matches;
+		this.classList.toggle("dark", isDark);
+		return [EditorView.theme({}, { dark: isDark }), isDark ? darkColors : lightColors];
+	}
+	updateTheme() {
+		this.editorView?.dispatch({ effects: this.themeCompartment.reconfigure(this.resolveTheme()) });
+	}
+	updateReadonly() {
+		this.editorView?.dispatch({ effects: this.readonlyCompartment.reconfigure(EditorState.readOnly.of(this.readonly)) });
+		this.renderTabs();
+	}
+	resolveLint() {
+		if (this._lint === "off") return [];
+		return createWeslLinter({
+			getSources: () => this.sources,
+			rootModule: () => fileToModulePath(this._activeFile, this._packageName ?? "package", false),
+			conditions: () => this._conditions,
+			packageName: () => this._packageName,
+			getExternalDiagnostics: () => this._externalDiagnostics,
+			getLibs: () => this._libs,
+			fetchLibs: this._fetchLibs ? (pkgs) => this.fetchLibsOnDemand(pkgs) : void 0,
+			ignorePackages: () => this._ignorePackages
+		});
+	}
+	/** Fetch missing library packages, deduplicating in-flight requests. */
+	async fetchLibsOnDemand(packageNames) {
+		const needed = packageNames.filter((n) => !this._fetchedPkgs.has(n) && !this._fetchingPkgs.has(n));
+		if (needed.length === 0) return [];
+		for (const n of needed) this._fetchingPkgs.add(n);
+		this.showSnack(`Loading ${needed.join(", ")}…`);
+		try {
+			const bundles = await fetchPackagesByName(needed);
+			this._libs = [...this._libs, ...bundles];
+			for (const n of needed) this._fetchedPkgs.add(n);
+			if (bundles.length > 0) {
+				this.showSnack(`Loaded ${needed.join(", ")}`, 3e3);
+				this._externalDiagnostics = [];
+				this.dispatchChange();
+			} else this.hideSnack();
+			return bundles;
+		} catch (e) {
+			console.warn("wgsl-edit: failed to fetch packages:", needed, e);
+			this.showSnack(`Failed to load ${needed.join(", ")}`, 3e3);
+			return [];
+		} finally {
+			for (const n of needed) this._fetchingPkgs.delete(n);
+		}
+	}
+	updateLint() {
+		this.editorView?.dispatch({ effects: this.lintCompartment.reconfigure(this.resolveLint()) });
+	}
+	/** Listen for compile-error/compile-success events from a lint source element. */
+	connectLintSource(id) {
+		if (this._lintFromEl) {
+			this._lintFromEl.removeEventListener("compile-error", this._boundCompileError);
+			this._lintFromEl.removeEventListener("compile-success", this._boundCompileSuccess);
+			this._lintFromEl = null;
+		}
+		this._externalDiagnostics = [];
+		if (!id) return;
+		const el = document.getElementById(id);
+		if (!el) return;
+		this._lintFromEl = el;
+		el.addEventListener("compile-error", this._boundCompileError);
+		el.addEventListener("compile-success", this._boundCompileSuccess);
+	}
+	onCompileError(e) {
+		const detail = e.detail;
+		if (!this.editorView || detail.source === "wesl") return;
+		const doc = this.editorView.state.doc;
+		const pkg = this._packageName ?? "package";
+		const activeModule = fileToModulePath(this._activeFile, pkg, false);
+		this._externalDiagnostics = detail.locations.filter((loc) => {
+			if (!loc.file) return true;
+			return fileToModulePath(loc.file, pkg, false) === activeModule;
+		}).map((loc) => {
+			const line = doc.line(Math.max(1, Math.min(loc.line, doc.lines)));
+			const from = Math.min(line.from + (loc.column ?? 0), doc.length);
+			return {
+				from,
+				to: Math.min(from + (loc.length ?? 1), doc.length),
+				severity: loc.severity,
+				message: loc.message,
+				source: "WebGPU"
+			};
+		});
+		if (this._externalDiagnostics.length) forceLinting(this.editorView);
+	}
+	onCompileSuccess() {
+		if (this._externalDiagnostics.length === 0) return;
+		this._externalDiagnostics = [];
+		if (this.editorView) forceLinting(this.editorView);
+	}
+	resolveLineNumbers() {
+		return this._lineNumbers ? [] : EditorView.theme({ ".cm-gutters": { display: "none" } });
+	}
+	updateLineNumbers() {
+		this.editorView?.dispatch({ effects: this.lineNumbersCompartment.reconfigure(this.resolveLineNumbers()) });
+	}
+	/** Parse script tags into _files. Supports single or multi-file via data-name. */
+	parseInlineContent() {
+		const scripts = Array.from(this.querySelectorAll("script[type=\"text/wgsl\"], script[type=\"text/wesl\"]"));
+		if (scripts.length === 0) {
+			const content = this.textContent?.trim() ?? "";
+			if (content) this._files.set("main.wesl", { doc: Text.of(content.split("\n")) });
+			return;
+		}
+		for (const script of scripts) {
+			const name = script.getAttribute("data-name") || "main.wesl";
+			const content = script.textContent?.trim() ?? "";
+			this._files.set(name, { doc: Text.of(content.split("\n")) });
+		}
+	}
+	/** Render tab bar based on files and visibility mode. */
+	renderTabs() {
+		this.tabBar.style.display = this._tabs ? "flex" : "none";
+		if (!this._tabs) return;
+		this.tabBar.innerHTML = "";
+		for (const name of this._files.keys()) this.tabBar.appendChild(this.createTab(name));
+		if (!this.readonly) this.tabBar.appendChild(this.createAddButton());
+	}
+	/** Create a tab button for a file. */
+	createTab(name) {
+		const tab = document.createElement("button");
+		tab.className = "tab" + (name === this._activeFile ? " active" : "");
+		const nameSpan = document.createElement("span");
+		nameSpan.className = "tab-name";
+		nameSpan.textContent = name;
+		if (!this.readonly) {
+			nameSpan.addEventListener("dblclick", (e) => {
+				e.stopPropagation();
+				this.startRenameTab(tab, nameSpan, name);
+			});
+			const closeBtn = document.createElement("button");
+			closeBtn.className = "tab-close";
+			closeBtn.textContent = "×";
+			closeBtn.addEventListener("click", (e) => {
+				e.stopPropagation();
+				this.removeFile(name);
+			});
+			tab.append(nameSpan, closeBtn);
+		} else tab.append(nameSpan);
+		tab.addEventListener("click", () => this.switchToFile(name));
+		return tab;
+	}
+	/** Create the "+" button for adding new files. */
+	createAddButton() {
+		const btn = document.createElement("button");
+		btn.className = "tab-add";
+		btn.textContent = "+";
+		btn.addEventListener("click", () => {
+			let name = "new.wesl";
+			let i = 1;
+			while (this._files.has(name)) name = `new${i++}.wesl`;
+			this.addFile(name);
+		});
+		return btn;
+	}
+	/** Start inline rename of a tab. */
+	startRenameTab(tab, nameSpan, oldName) {
+		const input = document.createElement("input");
+		input.className = "tab-rename";
+		input.value = oldName;
+		input.size = Math.max(oldName.length, 8);
+		const finishRename = () => {
+			const newName = input.value.trim() || oldName;
+			if (newName !== oldName && !this._files.has(newName)) this.renameFile(oldName, newName);
+			else {
+				nameSpan.style.display = "";
+				input.remove();
+			}
+		};
+		input.addEventListener("keydown", (e) => {
+			if (e.key === "Enter") {
+				e.preventDefault();
+				finishRename();
+			}
+			if (e.key === "Escape") {
+				nameSpan.style.display = "";
+				input.remove();
+			}
+		});
+		input.addEventListener("blur", finishRename);
+		input.addEventListener("input", () => {
+			input.size = Math.max(input.value.length, 8);
+		});
+		nameSpan.style.display = "none";
+		tab.insertBefore(input, nameSpan);
+		input.focus();
+		input.select();
+	}
+	async loadFromUrl(url) {
+		this.loading = true;
+		try {
+			const response = await fetch(url);
+			if (!response.ok) throw new Error(`Failed to fetch ${url}: ${response.status}`);
+			this.source = await response.text();
+		} catch (e) {
+			console.error("wgsl-edit: Failed to load source:", e);
+		} finally {
+			this.loading = false;
+		}
+	}
+	loadInitialContent() {
+		const src = this.getAttribute("src");
+		if (src) this.loadFromUrl(src);
+	}
+};
+function weslColors(c) {
+	return syntaxHighlighting(HighlightStyle.define([
+		{
+			tag: tags.variableName,
+			color: c.variable
+		},
+		{
+			tag: tags.definition(tags.variableName),
+			color: c.variable
+		},
+		{
+			tag: tags.propertyName,
+			color: c.variable
+		},
+		{
+			tag: tags.keyword,
+			color: c.keyword
+		},
+		{
+			tag: tags.definitionKeyword,
+			color: c.keyword
+		},
+		{
+			tag: tags.controlKeyword,
+			color: c.control
+		},
+		{
+			tag: tags.bool,
+			color: c.keyword
+		},
+		{
+			tag: tags.typeName,
+			color: c.type
+		},
+		{
+			tag: tags.definition(tags.typeName),
+			color: c.type
+		},
+		{
+			tag: tags.function(tags.variableName),
+			color: c.fn
+		},
+		{
+			tag: tags.function(tags.definition(tags.variableName)),
+			color: c.fn
+		},
+		{
+			tag: tags.number,
+			color: c.number
+		},
+		{
+			tag: tags.lineComment,
+			color: c.comment
+		},
+		{
+			tag: tags.blockComment,
+			color: c.comment
+		},
+		{
+			tag: tags.namespace,
+			color: c.modulePath
+		}
+	], { all: {
+		fontWeight: "normal",
+		fontStyle: "normal"
+	} }));
+}
+function getStyles() {
+	if (!cachedStyleSheet) {
+		cachedStyleSheet = new CSSStyleSheet();
+		cachedStyleSheet.replaceSync(WgslEdit_default);
+	}
+	return cachedStyleSheet;
+}
+/** Absorb instance properties set before custom element upgrade. */
+function upgradeProperty(el, prop) {
+	if (Object.hasOwn(el, prop)) {
+		const value = el[prop];
+		delete el[prop];
+		el[prop] = value;
+	}
+}
+/** Convert a module path or file path to a tab name: "package::main" -> "main", "main.wesl" -> "main.wesl" */
+function toTabName(key) {
+	if (key.includes("::")) return key.replace(/^[^:]+::/, "").replaceAll("::", "/");
+	return key.replace(/^\.\//, "");
+}
+//#endregion
+export { WgslEdit as t };