@daydreamui/tokens 0.0.0-stage → 0.4.0

package/dist/index.js

@@ -0,0 +1,1658 @@
+import { className, createComponent, delegateEvents, effect, insert, readShallow, ref, setAttribute, setStyleProperty, style, template } from "@solidjs/web";
+import { For, Show, createEffect, createSignal, onCleanup, onSettled, untrack } from "solid-js";
+function valueMapper(before, after, rootSize) {
+	const old = new Map(before.map((t) => [t.name.slice(2), t.value]));
+	const available = new Set(after.map((t) => t.name.slice(2)));
+	const parser = document.createElement("span").style;
+	const colors = new Map();
+	const color = (value) => {
+		const cached = colors.get(value);
+		if (cached !== void 0) return cached;
+		const probe = document.createElement("span");
+		probe.style.color = value;
+		if (!probe.style.color || /^(transparent|currentcolor|inherit|initial|unset|revert|revert-layer)$/.test(probe.style.color)) return "";
+		probe.style.position = "fixed";
+		probe.style.visibility = "hidden";
+		document.documentElement.append(probe);
+		try {
+			const normalized = getComputedStyle(probe).color;
+			colors.set(value, normalized);
+			return normalized;
+		} finally {
+			probe.remove();
+		}
+	};
+	const oldColors = new Map([...old].map(([name, value]) => [name, color(value)]));
+	const variable = (name) => available.has(name) ? `var(--tokens-${name})` : null;
+	const colorValue = (value, names) => {
+		const normalized = color(value);
+		if (!normalized || [
+			"transparent",
+			"currentcolor",
+			"inherit",
+			"initial",
+			"unset"
+		].includes(normalized)) return null;
+		const name = names.find((name) => available.has(name) && oldColors.get(name) === normalized);
+		return name ? variable(name) : null;
+	};
+	const scaled = (value, role) => {
+		if (!available.has(role)) return null;
+		const source = old.get(role) ?? "";
+		if (!/^\d+(?:\.\d+)?px$/.test(source)) return null;
+		const baseline = parseFloat(source);
+		if (!(baseline > 0)) return null;
+		const converted = value.split(/\s+/).map((piece) => {
+			const length = /^([\d.]+)(px|rem)$/.exec(piece);
+			if (!length || Number(length[1]) === 0) return piece;
+			const px = Number(length[1]) * (length[2] === "rem" ? rootSize : 1);
+			const ratio = Math.round(px / baseline * 1e4) / 1e4;
+			return ratio === 1 ? `var(--tokens-${role})` : `calc(var(--tokens-${role}) * ${ratio})`;
+		});
+		return converted.join(" ") === value ? null : converted.join(" ");
+	};
+	return (property, value, use) => {
+		if (value.includes("var(") || value.includes("env(") || /^(inherit|initial|unset|revert|revert-layer|normal|none)$/.test(value)) return null;
+		if (property.startsWith("--")) {
+			if (!use.customProperties || property.startsWith("--tokens-")) return null;
+			return colorValue(value, [
+				"primary",
+				"background",
+				"foreground",
+				"card",
+				"muted",
+				"muted-foreground",
+				"border",
+				"primary-foreground"
+			]);
+		}
+		if (property === "color") return colorValue(value, use.control ? [
+			"primary-foreground",
+			"foreground",
+			"muted-foreground",
+			"primary"
+		] : [
+			"foreground",
+			"muted-foreground",
+			"primary",
+			"primary-foreground"
+		]);
+		if (property === "background-color" || property === "background") {
+			const names = use.control ? [
+				"primary",
+				"card",
+				"background",
+				"muted"
+			] : [
+				"background",
+				"card",
+				"muted",
+				"primary"
+			];
+			return colorValue(value, names);
+		}
+		if (/^border(-(?:top|right|bottom|left))?-color$/.test(property) || property === "outline-color") return colorValue(value, [
+			"border",
+			"primary",
+			"foreground"
+		]);
+		if (/^(border(-(?:top|right|bottom|left))?|outline)$/.test(property)) {
+			parser.cssText = "";
+			parser.setProperty(property, value);
+			const part = parser.getPropertyValue(`${property}-color`);
+			const mapped = colorValue(part, [
+				"border",
+				"primary",
+				"foreground"
+			]);
+			const serialized = parser.getPropertyValue(property);
+			return mapped && part && serialized.includes(part) ? serialized.replace(part, mapped) : null;
+		}
+		const themeFont = (family) => {
+			parser.fontFamily = "";
+			parser.fontFamily = old.get(use.heading ? "font-heading" : "font-sans") ?? old.get("font-sans") ?? "";
+			const baseline = parser.fontFamily;
+			parser.fontFamily = "";
+			parser.fontFamily = family;
+			return baseline && baseline === parser.fontFamily ? variable(use.heading ? "font-heading" : "font-sans") ?? variable("font-sans") : null;
+		};
+		if (property === "font-family") return themeFont(value);
+		if (property === "font") {
+			parser.cssText = "";
+			parser.font = value;
+			const family = parser.fontFamily;
+			const font = parser.font;
+			const mapped = themeFont(family);
+			if (!family || !mapped || !font.includes(family)) return null;
+			const weight = use.heading ? variable("heading-weight") : null;
+			if (!weight) return font.replace(family, mapped);
+			parser.font = font;
+			parser.fontWeight = "normal";
+			return `${weight} ${parser.font.replace(family, mapped)}`;
+		}
+		if (use.heading && property === "font-weight") return variable("heading-weight");
+		if (use.heading && property === "letter-spacing") return variable("heading-tracking");
+		if (/^border(-(?:top|bottom)-(?:left|right))?-radius$/.test(property)) return scaled(value, "radius");
+		if (/^(padding(-(?:top|right|bottom|left|block|inline|block-start|block-end|inline-start|inline-end))?|gap|row-gap|column-gap)$/.test(property)) return scaled(value, "spacing");
+		return null;
+	};
+}
+function adoptDeclarations(text, core, map, use) {
+	let result = text;
+	for (const declaration of core.cssDeclarations(text).reverse()) {
+		const value = map(declaration.property, declaration.value, use);
+		if (!value) continue;
+		const searchable = text.slice(...declaration.range).replace(/"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\/\*[\s\S]*?\*\//g, (part) => part.startsWith("/*") ? " ".repeat(part.length) : part);
+		const at = searchable.indexOf(declaration.value, searchable.indexOf(":") + 1);
+		if (at < 0) continue;
+		const start = declaration.range[0] + at;
+		result = result.slice(0, start) + value + result.slice(start + declaration.value.length);
+	}
+	return result;
+}
+function extractionViewports(dd, context) {
+	const ids = new Set(context.itemSelection());
+	const selected = context.selection();
+	if (selected) ids.add(dd.pageElement(selected)?.viewportId ?? selected);
+	return dd.core.viewportItems(dd.document()).filter((v) => ids.has(v.id));
+}
+function ranked(bucket) {
+	return [...bucket.values()].sort((a, b) => b.uses.size - a.uses.size);
+}
+function visibleColor(value) {
+	if (value === "transparent") return false;
+	const alpha = value.includes("/") ? value.slice(value.lastIndexOf("/") + 1) : /^rgba\(/i.test(value) ? value.split(",")[3] : void 0;
+	return alpha === void 0 || parseFloat(alpha) !== 0;
+}
+function extractTheme(dd, context) {
+	const viewports = extractionViewports(dd, context);
+	if (!viewports.length) throw new Error("Select one or more page viewports first.");
+	const buckets = new Map();
+	const pages = new Set();
+	let truncated = false;
+	for (const viewport of viewports) {
+		const rootId = dd.pageFind(viewport.id, "html");
+		const root = rootId ? dd.geometry.node(rootId) : null;
+		if (!root) throw new Error("A selected page is still mounting. Try extracting again.");
+		const path = viewport.payload.page;
+		pages.add(path);
+		const add = (name, value, node, property) => {
+			if (!value || value.includes("<")) return;
+			const selector = dd.core.uniqueSelector(node);
+			const key = JSON.stringify([
+				path,
+				selector,
+				property
+			]);
+			const bucket = buckets.get(name) ?? new Map();
+			const observation = bucket.get(value) ?? {
+				value,
+				uses: new Map()
+			};
+			observation.uses.set(key, `${path} · ${selector} · ${property} · ${viewport.frame?.width ?? 1024}px`);
+			bucket.set(value, observation);
+			buckets.set(name, bucket);
+		};
+		const body = root.querySelector("body") ?? root;
+		const rootStyle = getComputedStyle(root);
+		const bodyStyle = getComputedStyle(body);
+		const background = visibleColor(bodyStyle.backgroundColor) ? bodyStyle.backgroundColor : rootStyle.backgroundColor;
+		if (visibleColor(background)) add("background", background, visibleColor(bodyStyle.backgroundColor) ? body : root, "background-color");
+		add("foreground", bodyStyle.color, body, "color");
+		add("font-sans", bodyStyle.fontFamily, body, "font-family");
+		const visit = (node) => {
+			const style = getComputedStyle(node);
+			if (style.display === "none" || style.contentVisibility === "hidden" || Number(style.opacity) === 0) return;
+			const rects = node.getClientRects();
+			if (style.visibility === "visible" && [...rects].some((r) => r.width > 0 && r.height > 0)) {
+				const control = node.matches("button, [role=\"button\"], input[type=\"submit\"], input[type=\"button\"]") && !node.matches(":disabled, [aria-disabled=\"true\"]");
+				const hasText = [...node.childNodes].some((child) => child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) || node.matches("input, textarea, select");
+				if (visibleColor(style.backgroundColor)) {
+					add("surface", style.backgroundColor, node, "background-color");
+					if (control && style.backgroundColor !== background) {
+						add("primary", style.backgroundColor, node, "background-color");
+						add(`action-text:${style.backgroundColor}`, style.color, node, "color");
+					} else if (node !== body && node !== root && style.backgroundColor !== background) add("card", style.backgroundColor, node, "background-color");
+				}
+				if (node.matches("h1, h2, h3, h4, h5, h6")) add("font-heading", style.fontFamily, node, "font-family");
+				if (hasText) {
+					add("color", style.color, node, "color");
+					if (!control && style.color !== bodyStyle.color) add("muted-foreground", style.color, node, "color");
+					for (const property of [
+						"font-family",
+						"font-size",
+						"font-weight",
+						"line-height"
+					]) add(property, style.getPropertyValue(property), node, property);
+				}
+				for (const side of [
+					"top",
+					"right",
+					"bottom",
+					"left"
+				]) {
+					const width = style.getPropertyValue(`border-${side}-width`);
+					const color = style.getPropertyValue(`border-${side}-color`);
+					if (parseFloat(width) > 0 && visibleColor(color)) {
+						add("border", color, node, `border-${side}-color`);
+						add("border-width", width, node, `border-${side}-width`);
+					}
+					const padding = style.getPropertyValue(`padding-${side}`);
+					if (parseFloat(padding) > 0) add("spacing", padding, node, `padding-${side}`);
+				}
+				for (const property of ["row-gap", "column-gap"]) {
+					const value = style.getPropertyValue(property);
+					if (parseFloat(value) > 0) add("spacing", value, node, property);
+				}
+				for (const corner of [
+					"top-left",
+					"top-right",
+					"bottom-right",
+					"bottom-left"
+				]) {
+					const property = `border-${corner}-radius`;
+					const value = style.getPropertyValue(property);
+					if (parseFloat(value) > 0) add("radius", value, node, property);
+				}
+				if (style.boxShadow !== "none") add("shadow", style.boxShadow, node, "box-shadow");
+			}
+			for (const child of node.children) walk(child);
+		};
+		let visited = 0;
+		const walk = (node) => {
+			if (++visited > 2e3) {
+				truncated = true;
+				return;
+			}
+			visit(node);
+		};
+		walk(body);
+	}
+	const tokens = [];
+	const addToken = (name, observation) => {
+		if (!observation) return;
+		const evidence = [...observation.uses.values()];
+		tokens.push({
+			name: `--${name}`,
+			value: observation.value,
+			source: `${evidence.length} observations · ${evidence.slice(0, 3).join("; ")}${evidence.length > 3 ? "; …" : ""}`
+		});
+	};
+	const top = (name) => ranked(buckets.get(name) ?? new Map())[0];
+	for (const name of [
+		"background",
+		"foreground",
+		"card",
+		"muted-foreground",
+		"primary",
+		"border",
+		"font-sans",
+		"font-heading",
+		"radius",
+		"spacing"
+	]) addToken(name, top(name));
+	const primary = top("primary");
+	if (primary) addToken("primary-foreground", top(`action-text:${primary.value}`));
+	for (const name of [
+		"background",
+		"foreground",
+		"card",
+		"primary",
+		"surface",
+		"color",
+		"font-family",
+		"font-size",
+		"font-weight",
+		"line-height",
+		"border-width",
+		"radius",
+		"spacing",
+		"shadow"
+	]) {
+		const values = ranked(buckets.get(name) ?? new Map());
+		if (values.length > 5) truncated = true;
+		values.slice(0, 5).forEach((value, i) => {
+			if (!tokens.some((t) => t.name === `--${name}` && t.value === value.value)) addToken(`${name}-${i + 1}`, value);
+		});
+	}
+	if (!tokens.length) throw new Error("No visible page styles were found in this selection.");
+	return {
+		tokens,
+		pages: pages.size,
+		viewports: viewports.length,
+		truncated
+	};
+}
+function readTokens(css, core) {
+	if (css.length > 64e3) throw new Error("Use a token block under 64 KB.");
+	if (css.includes("<")) throw new Error("Use CSS values without HTML tags.");
+	const blocks = core.cssBlocks(css);
+	const sheet = new CSSStyleSheet();
+	sheet.replaceSync(css);
+	if (!blocks.length || sheet.cssRules.length !== blocks.length) throw new Error("Theme tokens must form a complete :root block.");
+	const tokens = new Map();
+	for (const [index, block] of blocks.entries()) {
+		const rule = sheet.cssRules[index];
+		if (!(rule instanceof CSSStyleRule) || rule.selectorText !== ":root" || block.children.length || block.statement || css[block.range[1] - 1] !== "}") throw new Error("Only :root token blocks are supported, without dark-mode, component or @theme rules.");
+		for (const declaration of block.declarations) {
+			if (!declaration.property.startsWith("--") || declaration.important) throw new Error("Use custom properties without !important in the token block.");
+			const value = rule.style.getPropertyValue(declaration.property).trim();
+			if (!value) throw new Error(`Check the value of ${declaration.property}.`);
+			tokens.set(declaration.property, value);
+		}
+		if (rule.style.length !== new Set(block.declarations.map((d) => d.property)).size) throw new Error("Some declarations could not be read. Check the token block.");
+	}
+	if (!tokens.size || tokens.size > 100) throw new Error("A theme must contain between 1 and 100 tokens.");
+	return [...tokens].map(([name, value]) => ({
+		name,
+		value
+	}));
+}
+function declarations(tokens) {
+	return tokens.map(({ name, value }) => `${CSS.escape(name)}: ${value};`).join("\n");
+}
+function tokenCss(tokens) {
+	return `:root {\n${declarations(tokens)}\n}\n`;
+}
+function changedToken(token, value, core) {
+	const probe = new CSSStyleSheet();
+	probe.replaceSync(`:root { ${CSS.escape(token.name)}: ${value};\n--tokens-validation-sentinel: valid; }`);
+	const rule = probe.cssRules[0];
+	if (!(rule instanceof CSSStyleRule) || rule.style.getPropertyValue("--tokens-validation-sentinel").trim() !== "valid") throw new Error("Enter a complete CSS value.");
+	const parsed = readTokens(`:root { ${CSS.escape(token.name)}: ${value}; }`, core);
+	if (parsed.length !== 1 || parsed[0].name !== token.name || value.includes(";")) throw new Error("Enter one CSS value, without a semicolon.");
+	return parsed[0];
+}
+function managedTokens(tokens) {
+	const names = new Set(tokens.map((t) => t.name));
+	return tokens.map((t) => ({
+		name: `--tokens-${t.name.slice(2)}`,
+		value: t.value.replace(/"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|var\(\s*(--[\w-]+)(?=[\s,)])/g, (part, name) => name && names.has(name) ? part.replace(name, `--tokens-${name.slice(2)}`) : part)
+	}));
+}
+var headings = "h1, h2, h3, h4, h5, h6";
+var actions = "button, [role=\"button\"], input[type=\"submit\"], input[type=\"button\"]";
+var fields = "input:not([type]), input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], input[type=\"search\"], input[type=\"number\"], textarea, select";
+var themeSelector = ":root:where(html)";
+var themeSelectors = [themeSelector, ...[
+	headings,
+	actions,
+	fields
+].map((s) => `:where(html) :where(${s})`)];
+function themeRules(tokens, defaults = true) {
+	const names = new Set(tokens.map((t) => t.name));
+	const written = managedTokens(tokens);
+	const properties = (pairs) => pairs.filter(([, name]) => names.has(`--${name}`)).map(([property, name]) => `${property}: var(--tokens-${name});`).join("\n");
+	return [
+		{
+			selector: themeSelector,
+			match: "html",
+			body: declarations(written) + "\n" + (defaults ? properties([
+				["background-color", "background"],
+				["color", "foreground"],
+				["font-family", "font-sans"]
+			]) : "")
+		},
+		{
+			selector: themeSelectors[1],
+			match: headings,
+			body: properties([
+				["font-family", "font-heading"],
+				["font-weight", "heading-weight"],
+				["letter-spacing", "heading-tracking"]
+			])
+		},
+		{
+			selector: themeSelectors[2],
+			match: actions,
+			body: properties([
+				["background-color", "primary"],
+				["color", "primary-foreground"],
+				["border-color", "border"],
+				["border-radius", "radius"],
+				["font-family", "font-sans"]
+			])
+		},
+		{
+			selector: themeSelectors[3],
+			match: fields,
+			body: properties([
+				["background-color", "card"],
+				["color", "foreground"],
+				["border-color", "border"],
+				["border-radius", "radius"],
+				["font-family", "font-sans"]
+			])
+		}
+	];
+}
+var sheetIdentity = (path, source) => "file" in source ? source.file : `${path}:${JSON.stringify(source)}`;
+function planAdoption(dd, viewportId, path, tokens) {
+	const rootId = dd.pageFind(viewportId, "html");
+	const root = rootId ? dd.geometry.node(rootId) : null;
+	if (!root) throw new Error("A selected page is still mounting. Try Apply again.");
+	const nodes = [root, ...root.querySelectorAll("*")];
+	if (nodes.length > 2e3) throw new Error("Theme adoption supports up to 2,000 elements per page.");
+	const map = valueMapper(extractTheme(dd, {
+		selection: () => viewportId,
+		itemSelection: () => [viewportId]
+	}).tokens, tokens, parseFloat(getComputedStyle(root).fontSize));
+	const rules = new Map();
+	const edits = [];
+	for (const node of nodes) {
+		if (node.matches("head, head *, script, style, template")) continue;
+		const selector = dd.core.uniqueSelector(node);
+		const id = dd.pageFind(viewportId, selector);
+		if (!id) continue;
+		const stack = dd.pageStack(id);
+		if (!stack) continue;
+		const use = {
+			heading: node.matches("h1, h2, h3, h4, h5, h6"),
+			control: node.matches("button, [role=\"button\"], input[type=\"submit\"], input[type=\"button\"]")
+		};
+		if (stack.own) {
+			const next = adoptDeclarations(stack.own, dd.core, map, use);
+			if (next !== stack.own) edits.push({
+				file: path,
+				selector,
+				edit: {
+					kind: "style",
+					elementId: id,
+					expected: stack.own,
+					declarations: next
+				}
+			});
+		}
+		for (const rule of stack.rules) {
+			if (themeSelectors.includes(rule.prelude)) continue;
+			const prior = rules.get(rule.key);
+			if (prior) {
+				prior.use.heading &&= use.heading;
+				prior.use.control &&= use.control;
+			} else rules.set(rule.key, {
+				rule,
+				selector,
+				use: {
+					...use,
+					customProperties: node === root && rule.active && !rule.conditions.length && !rule.parents.length
+				}
+			});
+		}
+	}
+	for (const { rule, use, selector } of rules.values()) {
+		const next = adoptDeclarations(rule.declarations, dd.core, map, use);
+		if (next !== rule.declarations && !rule.editable) throw new Error(`Cannot adopt the theme because ${rule.prelude} is in a read-only or unsupported rule. Make that stylesheet editable first.`);
+		if (next !== rule.declarations) edits.push({
+			file: sheetIdentity(path, rule.sheet),
+			sheet: rule.sheet,
+			selector,
+			edit: {
+				kind: "rule",
+				viewportId,
+				key: rule.key,
+				expected: rule.declarations,
+				declarations: next
+			}
+		});
+	}
+	return edits.sort((a, b) => Number(a.edit.kind === "style") - Number(b.edit.kind === "style"));
+}
+var sameSource = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+function hasAuthoredLayers(page) {
+	const containsLayer = (rules) => [...rules].some((rule) => rule instanceof CSSLayerBlockRule || rule instanceof CSSLayerStatementRule || "cssRules" in rule && containsLayer(rule.cssRules));
+	return page.sheets.some((source) => {
+		const sheet = new CSSStyleSheet();
+		sheet.replaceSync(source.text);
+		return containsLayer(sheet.cssRules);
+	});
+}
+function unconditionalSheet(page, source) {
+	const doc = new DOMParser().parseFromString(page.html, "text/html");
+	const stored = page.sheets.find((s) => sameSource(s.source, source));
+	const base = new URL(page.path.split("/").map(encodeURIComponent).join("/"), "https://tokens.invalid/");
+	const elements = [...doc.querySelectorAll("link, style")].filter((el) => {
+		if ("style" in source) return el.localName === "style" && el.textContent === stored?.text.replace(/\r\n?/g, "\n");
+		if (!("file" in source) || el.localName !== "link") return false;
+		try {
+			const url = new URL(el.getAttribute("href") ?? "", base);
+			return url.origin === base.origin && decodeURIComponent(url.pathname.slice(1)) === source.file;
+		} catch {
+			return false;
+		}
+	});
+	if (!elements.length) return "file" in source;
+	return elements.every((el) => {
+		const media = new CSSStyleSheet({ media: el.getAttribute("media") ?? "" }).media.mediaText;
+		return media === "" || media === "all";
+	});
+}
+function mergeDeclarations(core, before, after, tokensOnly = false) {
+	const replacing = new Set(core.cssDeclarations(after).map((d) => d.property));
+	let kept = before;
+	for (const d of core.cssDeclarations(before).reverse()) if (replacing.has(d.property) || tokensOnly && !d.property.startsWith("--")) kept = kept.slice(0, d.range[0]) + kept.slice(d.range[1]);
+	else if (d.property.startsWith("--") && replacing.has(`--tokens-${d.property.slice(2)}`)) {
+		const alias = `${CSS.escape(d.property)}: var(--tokens-${d.property.slice(2)})${d.important ? " !important" : ""};`;
+		kept = kept.slice(0, d.range[0]) + alias + kept.slice(d.range[1]);
+	}
+	return `${kept.trim()}\n${after}`.trim();
+}
+function hasTheme(dd, target) {
+	const id = dd.pageFind(target.viewportId, "html");
+	return id && dd.pageStack(id)?.rules.some((r) => r.prelude === ":root:where(html)" && sameSource(r.sheet, target.source));
+}
+function writeThemeSheet(dd, transaction, target, tokens, defaults, consumers, suppressDefaults) {
+	for (const { selector, match, body } of themeRules(tokens, defaults && !suppressDefaults)) {
+		if (!suppressDefaults && (!body || !defaults && selector !== ":root:where(html)")) continue;
+		let viewportId = target.viewportId;
+		let id = null;
+		for (const consumer of consumers) {
+			const rootId = dd.pageFind(consumer.viewportId, "html");
+			const root = rootId ? dd.geometry.node(rootId) : null;
+			const node = match === "html" ? root : root?.querySelector(match);
+			if (!node) continue;
+			viewportId = consumer.viewportId;
+			id = dd.pageFind(viewportId, dd.core.uniqueSelector(node));
+			if (id) break;
+		}
+		if (!id) continue;
+		const rule = id && dd.pageStack(id)?.rules.find((r) => r.prelude === selector && r.editable && !r.parents.length && sameSource(r.sheet, target.source));
+		const next = suppressDefaults && selector !== ":root:where(html)" ? "" : body;
+		if (!rule && !next) continue;
+		const result = transaction.write(rule ? {
+			kind: "rule",
+			viewportId,
+			key: rule.key,
+			expected: rule.declarations,
+			declarations: suppressDefaults && selector !== ":root:where(html)" ? "" : mergeDeclarations(dd.core, rule.declarations, next, suppressDefaults)
+		} : {
+			kind: "add",
+			viewportId,
+			sheet: target.source,
+			selector,
+			declarations: next
+		});
+		if (typeof result === "string") throw new Error(result);
+	}
+}
+function selectedPages(dd, context) {
+	const targets = [];
+	const pages = new Set();
+	for (const viewport of extractionViewports(dd, context)) {
+		const root = dd.pageFind(viewport.id, "html");
+		const stack = root ? dd.pageStack(root) : null;
+		if (!stack) return [];
+		if (pages.has(viewport.payload.page)) continue;
+		pages.add(viewport.payload.page);
+		targets.push({
+			viewportId: viewport.id,
+			path: viewport.payload.page,
+			stack
+		});
+	}
+	return targets;
+}
+function applyTokens(dd, context, tokens) {
+	const targets = selectedPages(dd, context);
+	if (!targets.length) throw new Error("Select editable page viewports on the canvas first.");
+	readTokens(tokenCss(tokens), dd.core);
+	const planned = targets.flatMap((target) => planAdoption(dd, target.viewportId, target.path, tokens));
+	const sheets = new Map();
+	const include = (target, defaults) => {
+		const file = sheetIdentity(target.path, target.source);
+		const prior = sheets.get(file);
+		sheets.set(file, {
+			target: defaults ? target : prior?.target ?? target,
+			defaults: defaults || !!prior?.defaults
+		});
+	};
+	for (const target of targets) {
+		const page = dd.page(target.path);
+		if (!page) throw new Error("A selected page changed. Try Apply again.");
+		const landing = target.stack.sheets.filter((s) => s.editable && (s.absent || unconditionalSheet(page, s.source))).at(-1);
+		if (landing) include({
+			...target,
+			source: landing.source
+		}, true);
+		else throw new Error(`${target.path} needs an editable stylesheet without a media restriction before applying a theme.`);
+		for (const sheet of target.stack.sheets) {
+			const entry = {
+				...target,
+				source: sheet.source
+			};
+			if (sheet.editable && hasTheme(dd, entry)) include(entry, false);
+		}
+		for (const entry of planned) if (entry.edit.kind === "rule" && entry.edit.viewportId === target.viewportId && entry.sheet) include({
+			...target,
+			source: entry.sheet
+		}, false);
+	}
+	const layeredSheets = new Set();
+	const mountedConsumers = [...targets];
+	const selectedIds = new Set(targets.map((target) => target.viewportId));
+	for (const viewport of dd.core.viewportItems(dd.document())) {
+		if (!selectedIds.has(viewport.id)) {
+			const root = dd.pageFind(viewport.id, "html");
+			const stack = root ? dd.pageStack(root) : null;
+			if (stack) mountedConsumers.push({
+				viewportId: viewport.id,
+				path: viewport.payload.page,
+				stack
+			});
+		}
+		const page = dd.page(viewport.payload.page);
+		if (page && hasAuthoredLayers(page)) for (const sheet of page.sheets) layeredSheets.add(sheetIdentity(page.path, sheet.source));
+	}
+	const transaction = dd.beginItemTransaction();
+	try {
+		const equivalent = (a, b) => JSON.stringify(dd.core.cssDeclarations(a).map(({ property, value, important }) => [
+			property,
+			value,
+			important
+		])) === JSON.stringify(dd.core.cssDeclarations(b).map(({ property, value, important }) => [
+			property,
+			value,
+			important
+		]));
+		for (const entry of planned) {
+			const edit = entry.edit;
+			if (edit.kind !== "rule") continue;
+			const id = dd.pageFind(edit.viewportId, entry.selector);
+			const rule = id && dd.pageStack(id)?.rules.find((r) => r.key === edit.key);
+			if (!rule) throw new Error("A selected page changed. Try Apply again.");
+			if (equivalent(rule.declarations, edit.declarations)) continue;
+			if (!equivalent(rule.declarations, edit.expected)) throw new Error("Selected pages assign different theme roles to a shared rule. Apply to one page at a time.");
+			const result = transaction.write({
+				...edit,
+				expected: rule.declarations
+			});
+			if (typeof result === "string") throw new Error(result);
+			for (const remaining of planned) if (remaining.edit.kind === "rule" && remaining.edit.viewportId === edit.viewportId) remaining.edit.key = result.moved[remaining.edit.key] ?? remaining.edit.key;
+		}
+		for (const { target, defaults } of sheets.values()) writeThemeSheet(dd, transaction, target, tokens, defaults, (layeredSheets.has(sheetIdentity(target.path, target.source)) ? mountedConsumers : targets).filter((consumer) => consumer.stack.sheets.some((s) => sheetIdentity(consumer.path, s.source) === sheetIdentity(target.path, target.source))).map((consumer) => ({
+			...consumer,
+			source: target.source
+		})), layeredSheets.has(sheetIdentity(target.path, target.source)));
+		for (const entry of planned) {
+			if (entry.edit.kind !== "style") continue;
+			const viewportId = targets.find((t) => t.path === entry.file).viewportId;
+			const id = dd.pageFind(viewportId, entry.selector);
+			if (!id) throw new Error("A selected page changed. Try Apply again.");
+			const result = transaction.write({
+				...entry.edit,
+				elementId: id
+			});
+			if (typeof result === "string") throw new Error(result);
+		}
+		transaction.commit();
+	} catch (cause) {
+		transaction.cancel();
+		throw cause;
+	}
+	return targets.map((target) => target.path).join(", ");
+}
+var specimenStyles = `
+html { background-color: var(--tokens-background, #f6f3ec); color: var(--tokens-foreground, #242a25); font-family: var(--tokens-font-sans, system-ui); }
+* { box-sizing: border-box; }
+body { margin: 0; padding: clamp(24px, 5vw, 56px); }
+main { max-width: 960px; margin: auto; }
+header { display: flex; gap: 24px; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--tokens-border, #d5d7cc); padding-bottom: 24px; }
+h1, h2 { font-family: var(--tokens-font-heading, var(--tokens-font-sans, system-ui)); letter-spacing: var(--tokens-heading-tracking, normal); }
+h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); font-weight: var(--tokens-heading-weight, 500); line-height: 1.1; }
+h2 { margin: 0 0 16px; font-size: 22px; font-weight: var(--tokens-heading-weight, 500); }
+p { line-height: 1.6; margin: 8px 0 20px; }
+small, .muted { color: var(--tokens-muted-foreground, #62685f); }
+.layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: calc(var(--tokens-spacing, 16px) * 2); margin-top: 32px; }
+section { min-width: 0; }
+.card { padding: calc(var(--tokens-spacing, 16px) * 1.5); border: 1px solid var(--tokens-border, #d5d7cc); background-color: var(--tokens-card, #fffdf7); border-radius: var(--tokens-radius, 8px); }
+.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tokens-spacing, 16px); }
+button, input, select { font: inherit; border-radius: var(--tokens-radius, 8px); padding: 10px 16px; border: 1px solid var(--tokens-border, #d5d7cc); }
+button { background-color: var(--tokens-primary, #355c48); color: var(--tokens-primary-foreground, white); cursor: pointer; }
+button.secondary { background-color: var(--tokens-card, #fffdf7); color: var(--tokens-foreground, #242a25); }
+button:disabled { opacity: .5; cursor: default; }
+button:hover:not(:disabled) { filter: brightness(.92); }
+:focus-visible { outline: 2px solid var(--tokens-primary, #355c48); outline-offset: 3px; }
+label { display: grid; gap: 8px; margin: 20px 0; }
+input, select { min-width: 0; width: 100%; background-color: var(--tokens-background, #f6f3ec); color: var(--tokens-foreground, #242a25); }
+.tag { display: inline-block; padding: 4px 10px; border-radius: var(--tokens-radius, 8px); background-color: var(--tokens-muted, #eae6dc); font-size: 13px; }
+.palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 32px; }
+.swatch { height: 64px; border: 1px solid var(--tokens-border, #d5d7cc); border-radius: var(--tokens-radius, 8px); }
+.swatch:nth-child(1) { background-color: var(--tokens-primary, #355c48); }
+.swatch:nth-child(2) { background-color: var(--tokens-foreground, #242a25); }
+.swatch:nth-child(3) { background-color: var(--tokens-muted, #eae6dc); }
+.swatch:nth-child(4) { background-color: var(--tokens-card, #fffdf7); }
+footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--tokens-border, #d5d7cc); font-size: 13px; }
+@media (max-width: 640px) { .layout { grid-template-columns: 1fr; } header { flex-direction: column; gap: 12px; } }
+`;
+function specimen(tokens) {
+	return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Theme specimen</title><style>${themeSelector} { ${declarations(managedTokens(tokens))} }</style><style>${specimenStyles}</style></head>
+<body><main>
+<header><h1>A little more character.</h1><small>Theme specimen · Daydream</small></header>
+<div class="layout">
+<section><div class="card"><span class="tag">Field notes</span><h2 style="margin-top: 24px">Make room for good ideas.</h2>
+<p>A place to collect the details, share a thought, and find the next thing worth making.</p>
+<div class="row"><button type="button">Start a collection</button><button type="button" class="secondary">Explore</button></div></div>
+<h2 style="margin-top: 32px">Color and contrast</h2><div class="palette" aria-label="Theme colors"><div class="swatch"></div><div class="swatch"></div><div class="swatch"></div><div class="swatch"></div></div>
+<h2>Words with a point of view.</h2><p class="muted">A typeface changes the voice. Space changes the pace. Small decisions make the whole feel like yours.</p></section>
+<section class="card"><h2>The everyday details</h2><p class="muted">Inputs, actions, and the space between.</p>
+<label>Collection name<input value="Things worth keeping"></label>
+<label>Visibility<select><option>Only me</option><option>Everyone on the team</option></select></label>
+<div class="row"><button type="button">Save collection</button><button type="button" disabled>Saving…</button></div>
+<footer>Saved locally. Ready for your next idea.</footer></section>
+</div><footer class="muted">Real HTML and CSS. Resize this viewport to compare the same theme on a smaller screen.</footer>
+</main></body></html>`;
+}
+function createProbe({ ask, answer, target, debounceMs = 400 }) {
+	let running = null;
+	let again = false;
+	let timer;
+	let gone = false;
+	const run = async () => {
+		let reachable;
+		try {
+			reachable = await ask() === true;
+		} catch {
+			reachable = false;
+		}
+		if (!gone) answer(reachable);
+	};
+	const probe = (soon = false) => {
+		if (gone) return;
+		if (soon) {
+			clearTimeout(timer);
+			timer = setTimeout(() => probe(), debounceMs);
+			return;
+		}
+		if (running !== null) {
+			again = true;
+			return;
+		}
+		running = run().finally(() => {
+			running = null;
+			if (again) {
+				again = false;
+				probe();
+			}
+		});
+	};
+	const focused = () => probe(true);
+	target?.addEventListener("focus", focused);
+	return {
+		probe,
+		async settled() {
+			while (running !== null) await running;
+		},
+		dispose() {
+			gone = true;
+			clearTimeout(timer);
+			target?.removeEventListener("focus", focused);
+		}
+	};
+}
+var COLOR_KINDS = ["color"];
+var SIZE_KINDS = ["number", "dimension"];
+var FONT_KINDS = ["font"];
+var ROLES = [
+	[
+		"background",
+		[
+			"background",
+			"bg",
+			"canvas",
+			"page",
+			"surface-0"
+		],
+		COLOR_KINDS
+	],
+	[
+		"foreground",
+		[
+			"foreground",
+			"fg",
+			"text",
+			"text-primary",
+			"text-default",
+			"on-background",
+			"ink"
+		],
+		COLOR_KINDS
+	],
+	[
+		"card",
+		[
+			"card",
+			"surface",
+			"elevated",
+			"panel"
+		],
+		COLOR_KINDS
+	],
+	[
+		"muted",
+		[
+			"muted",
+			"subtle",
+			"secondary-surface"
+		],
+		COLOR_KINDS
+	],
+	[
+		"muted-foreground",
+		[
+			"muted-foreground",
+			"text-secondary",
+			"secondary",
+			"hint",
+			"placeholder"
+		],
+		COLOR_KINDS
+	],
+	[
+		"primary",
+		[
+			"primary",
+			"brand",
+			"accent",
+			"action",
+			"cta"
+		],
+		COLOR_KINDS
+	],
+	[
+		"primary-foreground",
+		[
+			"primary-foreground",
+			"on-primary",
+			"on-brand",
+			"on-accent"
+		],
+		COLOR_KINDS
+	],
+	[
+		"border",
+		[
+			"border",
+			"stroke",
+			"outline",
+			"divider"
+		],
+		COLOR_KINDS
+	],
+	[
+		"radius",
+		[
+			"radius",
+			"corner",
+			"rounded"
+		],
+		SIZE_KINDS
+	],
+	[
+		"spacing",
+		[
+			"spacing",
+			"space",
+			"gap",
+			"unit"
+		],
+		SIZE_KINDS
+	],
+	[
+		"font-sans",
+		[
+			"font-sans",
+			"font-family",
+			"sans",
+			"body-font",
+			"font-body"
+		],
+		FONT_KINDS
+	],
+	[
+		"font-heading",
+		[
+			"font-heading",
+			"heading-font",
+			"display"
+		],
+		FONT_KINDS
+	],
+	[
+		"heading-weight",
+		["heading-weight", "weight-bold"],
+		["number", "keyword"]
+	],
+	[
+		"heading-tracking",
+		[
+			"heading-tracking",
+			"tracking",
+			"letter-spacing"
+		],
+		SIZE_KINDS
+	]
+];
+new Map(ROLES.map(([role, , kinds]) => [role, kinds]));
+var aliasTarget = (token) => /^var\((--[\w-]+)\)$/.exec(token.value)?.[1];
+function withoutDanglingAliases(tokens) {
+	const byName = new Map(tokens.map((t) => [t.name, t]));
+	const reachesValue = (token) => {
+		const seen = new Set();
+		for (let at = token; at !== void 0; at = byName.get(aliasTarget(at) ?? "")) {
+			if (aliasTarget(at) === void 0) return true;
+			if (seen.has(at.name)) return false;
+			seen.add(at.name);
+		}
+		return false;
+	};
+	return tokens.filter(reachesValue);
+}
+new Set(ROLES.map(([role]) => `--${role}`));
+function isFigmaExtract(answer) {
+	if (typeof answer !== "object" || answer === null) return false;
+	const given = answer;
+	return Array.isArray(given["tokens"]) && given["tokens"].every((t) => typeof t === "object" && t !== null && typeof t.name === "string" && t.name.startsWith("--") && typeof t.value === "string") && typeof given["origin"] === "string" && typeof given["omitted"] === "number";
+}
+var samples = [
+	{
+		name: "Apple",
+		reference: "https://www.apple.com/",
+		colors: [
+			"#f5f5f7",
+			"#1d1d1f",
+			"#ffffff",
+			"#e8e8ed",
+			"#65656b",
+			"#0071e3",
+			"#ffffff",
+			"#d2d2d7"
+		],
+		radius: "20px",
+		spacing: "20px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "system-ui, -apple-system, sans-serif",
+		weight: "600",
+		tracking: "-.035em"
+	},
+	{
+		name: "BMW",
+		reference: "https://www.bmw.com/",
+		colors: [
+			"#f2f4f7",
+			"#17191c",
+			"#ffffff",
+			"#e4e9f0",
+			"#5c6470",
+			"#1c69d4",
+			"#ffffff",
+			"#cbd2dc"
+		],
+		radius: "2px",
+		spacing: "20px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "Arial, Helvetica, sans-serif",
+		weight: "600",
+		tracking: "-.025em"
+	},
+	{
+		name: "Spotify",
+		reference: "https://open.spotify.com/",
+		colors: [
+			"#121212",
+			"#ffffff",
+			"#181818",
+			"#282828",
+			"#b3b3b3",
+			"#1ed760",
+			"#07150c",
+			"#3e3e3e"
+		],
+		radius: "24px",
+		spacing: "16px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "system-ui, sans-serif",
+		weight: "800",
+		tracking: "-.04em"
+	},
+	{
+		name: "Airbnb",
+		reference: "https://www.airbnb.com/",
+		colors: [
+			"#fff9f6",
+			"#222222",
+			"#ffffff",
+			"#f9e6e8",
+			"#71615f",
+			"#d90b46",
+			"#ffffff",
+			"#e8d5d4"
+		],
+		radius: "16px",
+		spacing: "20px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "system-ui, sans-serif",
+		weight: "600",
+		tracking: "-.025em"
+	},
+	{
+		name: "Nike",
+		reference: "https://www.nike.com/",
+		colors: [
+			"#ffffff",
+			"#111111",
+			"#f5f5f5",
+			"#e8e8e8",
+			"#666666",
+			"#111111",
+			"#ffffff",
+			"#d1d1d1"
+		],
+		radius: "2px",
+		spacing: "20px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "\"Arial Black\", Arial, sans-serif",
+		weight: "900",
+		tracking: "-.055em"
+	},
+	{
+		name: "Stripe",
+		reference: "https://stripe.com/",
+		colors: [
+			"#f6f9fc",
+			"#0a2540",
+			"#ffffff",
+			"#e6edff",
+			"#425466",
+			"#635bff",
+			"#ffffff",
+			"#d5deea"
+		],
+		radius: "8px",
+		spacing: "20px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "system-ui, sans-serif",
+		weight: "650",
+		tracking: "-.04em"
+	},
+	{
+		name: "Linear",
+		reference: "https://linear.app/",
+		colors: [
+			"#101114",
+			"#f0f1f5",
+			"#191a20",
+			"#262831",
+			"#a4a7b5",
+			"#b5b7ff",
+			"#171731",
+			"#353743"
+		],
+		radius: "8px",
+		spacing: "12px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "system-ui, sans-serif",
+		weight: "500",
+		tracking: "-.035em"
+	},
+	{
+		name: "Notion",
+		reference: "https://www.notion.com/",
+		colors: [
+			"#fffefb",
+			"#2f2d29",
+			"#ffffff",
+			"#f0eee9",
+			"#706c65",
+			"#37352f",
+			"#ffffff",
+			"#dfddd7"
+		],
+		radius: "4px",
+		spacing: "16px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "Georgia, \"Times New Roman\", serif",
+		weight: "500",
+		tracking: "-.025em"
+	},
+	{
+		name: "IKEA",
+		reference: "https://www.ikea.com/",
+		colors: [
+			"#ffffff",
+			"#111111",
+			"#f5f5f5",
+			"#fff3b0",
+			"#626262",
+			"#ffda1a",
+			"#003e7d",
+			"#d6d6d6"
+		],
+		radius: "24px",
+		spacing: "20px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "Arial, Helvetica, sans-serif",
+		weight: "700",
+		tracking: "-.025em"
+	},
+	{
+		name: "Ferrari",
+		reference: "https://www.ferrari.com/",
+		colors: [
+			"#181818",
+			"#faf7f2",
+			"#242424",
+			"#35312e",
+			"#b9b2aa",
+			"#e32119",
+			"#ffffff",
+			"#49433e"
+		],
+		radius: "0px",
+		spacing: "24px",
+		font: "system-ui, -apple-system, sans-serif",
+		heading: "\"Arial Narrow\", Arial, sans-serif",
+		weight: "700",
+		tracking: "-.03em"
+	}
+];
+function sampleTokens(index) {
+	const sample = samples[index];
+	return [
+		...[
+			"background",
+			"foreground",
+			"card",
+			"muted",
+			"muted-foreground",
+			"primary",
+			"primary-foreground",
+			"border"
+		].map((name, i) => ({
+			name: `--${name}`,
+			value: sample.colors[i]
+		})),
+		{
+			name: "--radius",
+			value: sample.radius
+		},
+		{
+			name: "--font-sans",
+			value: sample.font
+		},
+		{
+			name: "--spacing",
+			value: sample.spacing
+		},
+		{
+			name: "--font-heading",
+			value: sample.heading
+		},
+		{
+			name: "--heading-weight",
+			value: sample.weight
+		},
+		{
+			name: "--heading-tracking",
+			value: sample.tracking
+		}
+	];
+}
+var _tmpl$$1 = template(`<button type=button>From Figma`);
+var _tmpl$2$1 = template(`<section aria-label="Theme starting point"><div><span>Presets</span><div><button type=button aria-label="Previous presets">‹</button><button type=button aria-label="Next presets">›</button></div></div><div aria-label="Brand-inspired presets"role=group></div><div><button type=button>Extract from selection`);
+var _tmpl$3$1 = template(`<button type=button><span aria-hidden=true>`);
+var _tmpl$4 = template(`<i>`);
+function ThemeSources(props) {
+	let track;
+	const [atStart, setAtStart] = createSignal(true);
+	const [atEnd, setAtEnd] = createSignal(false);
+	const updateBounds = () => {
+		setAtStart(track.scrollLeft <= 1);
+		setAtEnd(track.scrollLeft + track.clientWidth >= track.scrollWidth - 1);
+	};
+	const move = (direction) => {
+		track.scrollBy({ left: direction * (track.clientWidth + 6) });
+		updateBounds();
+	};
+	onSettled(() => {
+		const observer = new ResizeObserver(updateBounds);
+		observer.observe(track);
+		updateBounds();
+		return () => observer.disconnect();
+	});
+	var _el$ = _tmpl$2$1();
+	var _el$2 = _el$.firstChild;
+	var _el$5 = _el$2.firstChild.nextSibling.firstChild;
+	var _el$6 = _el$5.nextSibling;
+	var _el$7 = _el$2.nextSibling;
+	var _el$8 = _el$7.nextSibling;
+	var _el$9 = _el$8.firstChild;
+	_el$5._$$click = () => move(-1);
+	_el$6._$$click = () => move(1);
+	_el$7.addEventListener("scroll", updateBounds);
+	var _ref$ = track;
+	typeof _ref$ === "function" || Array.isArray(_ref$) ? ref(() => {
+		return _ref$;
+	}, _el$7) : track = _el$7;
+	insert(_el$7, createComponent(For, {
+		each: samples,
+		children: (sample, index) => (() => {
+			var _el$11 = _tmpl$3$1();
+			var _el$12 = _el$11.firstChild;
+			_el$11._$$click = () => {
+				props.draft.load(sampleTokens(index()), `${sample.name} inspired`, sample.name);
+				props.onPreset();
+			};
+			insert(_el$12, createComponent(For, {
+				get each() {
+					return [
+						sample.colors[0],
+						sample.colors[1],
+						sample.colors[5]
+					];
+				},
+				children: (color) => (() => {
+					var _el$13 = _tmpl$4();
+					setStyleProperty(_el$13, "background-color", color);
+					return _el$13;
+				})()
+			}));
+			insert(_el$11, () => {
+				return sample.name;
+			}, null);
+			effect(() => {
+				return {
+					e: sample.name,
+					t: `${sample.name} inspired · unofficial interpretation`,
+					a: props.draft.preset() === sample.name ? "true" : "false",
+					o: `${props.prefix}-preset-colors`
+				};
+			}, ({ e, t, a, o }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$11, "aria-label", e);
+				t !== _p$?.t && setAttribute(_el$11, "title", t);
+				a !== _p$?.a && setAttribute(_el$11, "aria-pressed", a);
+				className(_el$12, o, _p$?.o);
+			});
+			return _el$11;
+		})()
+	}));
+	_el$9._$$click = () => props.onExtract();
+	insert(_el$8, createComponent(Show, {
+		get when() {
+			return props.figma;
+		},
+		get children() {
+			var _el$10 = _tmpl$$1();
+			_el$10._$$click = () => props.onFigma();
+			effect(() => props.busy, (_v$) => {
+				setAttribute(_el$10, "disabled", _v$);
+			});
+			return _el$10;
+		}
+	}), null);
+	effect(() => {
+		return {
+			e: `${props.prefix}-sources`,
+			t: `${props.prefix}-preset-heading`,
+			a: atStart(),
+			o: atEnd(),
+			i: `${props.prefix}-presets`,
+			n: `${props.prefix}-extractors`,
+			s: `${props.prefix}-extract`,
+			h: !props.extractable || props.busy
+		};
+	}, ({ e, t, a, o, i, n, s, h }, _p$) => {
+		className(_el$, e, _p$?.e);
+		className(_el$2, t, _p$?.t);
+		a !== _p$?.a && setAttribute(_el$5, "disabled", a);
+		o !== _p$?.o && setAttribute(_el$6, "disabled", o);
+		className(_el$7, i, _p$?.i);
+		className(_el$8, n, _p$?.n);
+		className(_el$9, s, _p$?.s);
+		h !== _p$?.h && setAttribute(_el$9, "disabled", h);
+	});
+	return _el$;
+}
+delegateEvents(["click"]);
+var _tmpl$ = template(`<div><div><div><strong></strong><span></span></div><button type=button>Reset edits</button></div><div aria-label="Theme preview"><h3>Make it feel like you.</h3><p>A few small decisions.<br>A different point of view.</p><span>Start a collection</span><div aria-hidden=true></div></div><details><summary>Refine tokens · </summary><fieldset><legend>Edit a value, then press Enter</legend></fieldset></details><div><button type=button>Apply to selected viewports</button><button type=button></button></div><p role=status></p><p role=alert>`);
+var _tmpl$2 = template(`<span>`);
+var _tmpl$3 = template(`<label><span></span><input>`);
+function figmaSentence(cause) {
+	const said = (cause instanceof Error ? cause.message : String(cause)).trim();
+	if (!said) return "Figma could not answer.";
+	return /[.!?]$/.test(said) ? said : `${said}.`;
+}
+function ThemePanel(props) {
+	const p = untrack(() => props.prefix);
+	const [status, setStatus] = createSignal("");
+	const [error, setError] = createSignal("");
+	const [busy, setBusy] = createSignal(false);
+	const [extractable, setExtractable] = createSignal(0);
+	const [canApply, setCanApply] = createSignal(false);
+	const [figma, setFigma] = createSignal(false);
+	let alive = true;
+	onCleanup(() => {
+		alive = false;
+	});
+	const probe = createProbe({
+		ask: async () => await props.dd.hostPart.call("figma-reachable") === true,
+		answer: (reachable) => setFigma(reachable),
+		target: window
+	});
+	const projectHook = untrack(() => {
+		probe.probe();
+		return props.dd.on("project", () => probe.probe());
+	});
+	onCleanup(() => {
+		probe.dispose();
+		projectHook.dispose();
+	});
+	createEffect(() => [
+		props.context.selection(),
+		[...props.context.itemSelection()],
+		props.dd.documentVersion(),
+		props.dd.interactionVersion()
+	], () => untrack(() => {
+		setExtractable(extractionViewports(props.dd, props.context).length);
+		setCanApply(selectedPages(props.dd, props.context).length > 0);
+	}));
+	const report = (action) => {
+		setError("");
+		try {
+			setStatus(action());
+		} catch (cause) {
+			setError(cause instanceof Error ? cause.message : String(cause));
+		}
+	};
+	const edit = (token, input) => report(() => untrack(() => {
+		try {
+			const next = changedToken(token, input.value, props.dd.core);
+			props.draft.edit(props.draft.tokens().map((t) => t.name === token.name ? next : t));
+			return "Preview updated. Apply to write these tokens to the selected viewports.";
+		} catch (cause) {
+			input.value = token.value;
+			throw cause;
+		}
+	}));
+	const create = async () => {
+		if (busy()) return;
+		const version = props.dd.loadVersion();
+		const html = specimen(props.draft.tokens());
+		setBusy(true);
+		setError("");
+		try {
+			const made = await props.dd.createPage(html, { frame: { width: 960 } });
+			if (!alive || props.dd.loadVersion() !== version) return;
+			props.dd.select(made.viewportId);
+			props.dd.canvas.reveal([made.viewportId]);
+			setStatus(`Created ${made.path}. Edit the preview, then Apply to update the canvas.`);
+		} catch (cause) {
+			if (alive && props.dd.loadVersion() === version) setError(cause instanceof Error ? cause.message : String(cause));
+		} finally {
+			if (alive) setBusy(false);
+		}
+	};
+	const fromFigma = async () => {
+		if (busy()) return;
+		const version = props.dd.loadVersion();
+		setBusy(true);
+		setError("");
+		try {
+			const answer = await props.dd.hostPart.call("figma-extract");
+			if (!alive || props.dd.loadVersion() !== version) return;
+			if (!isFigmaExtract(answer)) throw new Error("The host part answered no tokens.");
+			const tokens = [];
+			for (const token of answer.tokens) try {
+				tokens.push(...readTokens(tokenCss([token]), props.dd.core));
+			} catch {}
+			const left = answer.omitted + answer.tokens.length - tokens.length;
+			const resolved = withoutDanglingAliases(tokens);
+			if (!resolved.length) throw new Error("No usable variables in the Figma selection.");
+			props.draft.load(resolved, answer.origin);
+			setStatus(`Extracted ${resolved.length} tokens from Figma${left > 0 ? `, ${left} left out` : ""}. Ready to refine.`);
+		} catch (cause) {
+			if (alive && props.dd.loadVersion() === version) setError(figmaSentence(cause));
+		} finally {
+			if (alive) setBusy(false);
+		}
+	};
+	const extract = () => report(() => untrack(() => {
+		const result = extractTheme(props.dd, props.context);
+		props.draft.load(result.tokens, `Extracted from ${result.pages} page${result.pages === 1 ? "" : "s"}`);
+		return `Extracted ${result.tokens.length} tokens. Ready to refine.`;
+	}));
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.firstChild;
+	var _el$4 = _el$3.firstChild;
+	var _el$5 = _el$4.nextSibling;
+	var _el$6 = _el$3.nextSibling;
+	var _el$7 = _el$2.nextSibling;
+	var _el$10 = _el$7.firstChild.nextSibling.nextSibling;
+	var _el$11 = _el$10.nextSibling;
+	var _el$12 = _el$7.nextSibling;
+	var _el$13 = _el$12.firstChild;
+	_el$13.firstChild;
+	var _el$15 = _el$13.nextSibling;
+	var _el$16 = _el$15.firstChild;
+	var _el$17 = _el$12.nextSibling;
+	var _el$18 = _el$17.firstChild;
+	var _el$19 = _el$18.nextSibling;
+	var _el$20 = _el$17.nextSibling;
+	var _el$21 = _el$20.nextSibling;
+	insert(_el$, createComponent(ThemeSources, {
+		prefix: p,
+		get draft() {
+			return props.draft;
+		},
+		get extractable() {
+			return extractable();
+		},
+		get figma() {
+			return figma();
+		},
+		get busy() {
+			return busy();
+		},
+		onExtract: extract,
+		onFigma: () => void fromFigma(),
+		onPreset: () => {
+			setError("");
+			setStatus("Preset loaded into the preview. Your pages are unchanged.");
+		}
+	}), _el$2);
+	insert(_el$4, () => {
+		return props.draft.origin();
+	});
+	insert(_el$5, () => {
+		return props.draft.modified() ? "Edited preview" : "Preview only";
+	});
+	_el$6._$$click = () => {
+		props.draft.reset();
+		setError("");
+		setStatus("Preview edits reset. Your pages are unchanged.");
+	};
+	insert(_el$11, createComponent(For, {
+		each: [
+			"primary",
+			"foreground",
+			"muted",
+			"card"
+		],
+		children: (name) => (() => {
+			var _el$22 = _tmpl$2();
+			setStyleProperty(_el$22, "background-color", `var(--${name})`);
+			effect(() => `${p}-swatch`, (_v$, _$p) => {
+				className(_el$22, _v$, _$p);
+			});
+			return _el$22;
+		})()
+	}));
+	insert(_el$13, () => {
+		return props.draft.tokens().length;
+	}, null);
+	insert(_el$15, createComponent(For, {
+		get each() {
+			return props.draft.tokens();
+		},
+		children: (token) => (() => {
+			var _el$23 = _tmpl$3();
+			var _el$24 = _el$23.firstChild;
+			var _el$25 = _el$24.nextSibling;
+			insert(_el$24, () => {
+				return token.name;
+			});
+			_el$25._$$keydown = (event) => {
+				if (event.key === "Enter") event.currentTarget.blur();
+			};
+			_el$25.addEventListener("change", (event) => edit(token, event.currentTarget));
+			effect(() => {
+				return {
+					e: `${p}-token`,
+					t: token.value
+				};
+			}, ({ e, t }, _p$) => {
+				className(_el$23, e, _p$?.e);
+				_el$25.value = t ?? "";
+			});
+			return _el$23;
+		})()
+	}), null);
+	_el$18._$$click = () => report(() => untrack(() => `Applied to ${applyTokens(props.dd, props.context, props.draft.tokens())}. Undo is available in Daydream.`));
+	_el$19._$$click = () => void create();
+	insert(_el$19, () => {
+		return busy() ? "Creating specimen…" : "Create specimen page";
+	});
+	insert(_el$20, status);
+	insert(_el$21, error);
+	effect(() => {
+		return {
+			e: readShallow(p),
+			t: `${p}-preview-heading`,
+			a: `${p}-note`,
+			o: !props.draft.modified(),
+			i: `${p}-preview`,
+			n: readShallow(Object.fromEntries(props.draft.tokens().map((t) => [t.name, t.value]))),
+			s: `${p}-sample`,
+			h: `${p}-swatches`,
+			r: `${p}-note`,
+			d: `${p}-actions`,
+			l: `${p}-primary`,
+			u: !canApply() || busy(),
+			c: busy(),
+			w: `${p}-status`,
+			m: `${p}-status ${p}-error`
+		};
+	}, ({ e, t, a, o, i, n, s, h, r, d, l, u, c, w, m }, _p$) => {
+		className(_el$, e, _p$?.e);
+		className(_el$2, t, _p$?.t);
+		className(_el$5, a, _p$?.a);
+		o !== _p$?.o && setAttribute(_el$6, "disabled", o);
+		className(_el$7, i, _p$?.i);
+		style(_el$7, n, _p$?.n);
+		className(_el$10, s, _p$?.s);
+		className(_el$11, h, _p$?.h);
+		className(_el$16, r, _p$?.r);
+		className(_el$17, d, _p$?.d);
+		className(_el$18, l, _p$?.l);
+		u !== _p$?.u && setAttribute(_el$18, "disabled", u);
+		c !== _p$?.c && setAttribute(_el$19, "disabled", c);
+		className(_el$20, w, _p$?.w);
+		className(_el$21, m, _p$?.m);
+	});
+	return _el$;
+}
+delegateEvents(["click", "keydown"]);
+function createThemeDraft() {
+	const initial = () => ({
+		tokens: sampleTokens(0),
+		origin: `${samples[0].name} inspired`,
+		preset: samples[0].name
+	});
+	const [base, setBase] = createSignal(initial());
+	const [edits, setEdits] = createSignal(null);
+	return {
+		tokens: () => edits() ?? base().tokens,
+		origin: () => base().origin,
+		preset: () => edits() ? "" : base().preset,
+		modified: () => edits() !== null,
+		edit: (tokens) => setEdits(tokens),
+		reset: () => setEdits(null),
+		load: (tokens, origin, preset = "") => {
+			setBase({
+				tokens,
+				origin,
+				preset
+			});
+			setEdits(null);
+		},
+		clear: () => {
+			setBase(initial());
+			setEdits(null);
+		}
+	};
+}
+var css = (p) => `
+.${p} { padding: 6px 14px 14px; color: var(--dream-app-bright, #c8c8ce); font-size: 12px; line-height: 1.5; overflow: auto; min-height: 0; }
+.${p} * { box-sizing: border-box; }
+.${p} p { margin: 0 0 12px; }
+.${p} .${p}-note { color: var(--dream-app-dim, #9a9aa0); font-size: 11px; overflow-wrap: anywhere; }
+.${p} button, .${p} input { font: inherit; color: inherit; background: var(--dream-app-field, #26262b); border: 1px solid var(--dream-app-line-strong, #4a4a52); border-radius: 4px; }
+.${p} button { padding: 5px 9px; cursor: pointer; }
+.${p} button:hover:not(:disabled) { background: var(--dream-app-hover, #36363d); }
+.${p} button:disabled { opacity: .5; cursor: default; }
+.${p} :focus-visible { outline: 2px solid var(--dream-app-accent, #8ab9ff); outline-offset: 2px; }
+.${p}-sources { border-bottom: 1px solid var(--dream-app-line, #3a3a41); margin-bottom: 14px; }
+.${p}-extractors { display: flex; gap: 6px; margin-bottom: 14px; }
+.${p}-extractors button { flex: 1 1 0; min-width: 0; }
+.${p}-preset-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.${p}-preset-heading > div { display: flex; gap: 4px; }
+.${p}-preset-heading button { width: 26px; padding: 0; font-size: 20px; line-height: 24px; }
+.${p}-presets { display: flex; gap: 6px; margin-bottom: 8px; padding: 3px 0 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--dream-app-muted, #55555f) transparent; }
+.${p}-presets button { flex: 0 0 calc((100% - 12px) / 3); min-width: 0; scroll-snap-align: start; }
+.${p}-presets button:focus-visible { outline-offset: -3px; }
+.${p}-presets button[aria-pressed=true] { border-color: var(--dream-app-text, #b8b8c0); background: var(--dream-app-hover, #37373e); }
+.${p}-preset-colors { display: flex; justify-content: center; margin: 3px 0 6px; }
+.${p}-preset-colors i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--dream-app-line, #ffffff30); }
+.${p}-preset-colors i + i { margin-left: -4px; }
+.${p}-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
+.${p}-preview-heading strong { display: block; font-weight: 600; }
+.${p}-preview-heading button { flex-shrink: 0; font-size: 11px; }
+.${p}-preview { padding: 20px; margin-bottom: 16px; border-radius: 6px; background-color: var(--background, #f6f3ec); color: var(--foreground, #242a25); font-family: var(--font-sans, system-ui); }
+.${p}-preview h3 { font-size: 24px; font-family: var(--font-heading, var(--font-sans, system-ui)); font-weight: var(--heading-weight, 500); letter-spacing: var(--heading-tracking, normal); line-height: 1.2; margin: 0 0 10px; }
+.${p}-preview p { color: var(--muted-foreground, #62685f); }
+.${p}-preview .${p}-sample { display: inline-block; padding: 8px 12px; background-color: var(--primary, #355c48); color: var(--primary-foreground, white); border-radius: var(--radius, 8px); }
+.${p}-swatches { display: flex; gap: 5px; margin-top: 16px; }
+.${p}-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border, #d5d7cc); }
+.${p} fieldset { border: 0; margin: 0; padding: 0; }
+.${p} legend { font-weight: 600; margin-bottom: 8px; }
+.${p}-token { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 7px; }
+.${p}-token span { overflow-wrap: anywhere; font-size: 11px; font-family: var(--dream-app-mono, monospace); }
+.${p}-token input { width: 100%; min-width: 0; padding: 5px 6px; font-size: 11px; font-family: var(--dream-app-mono, monospace); }
+.${p} details { margin-top: 14px; }
+.${p} summary { cursor: pointer; margin-bottom: 8px; }
+.${p}-actions { display: grid; gap: 8px; margin-top: 14px; border-top: 1px solid var(--dream-app-line, #3a3a41); padding-top: 14px; }
+.${p}-actions .${p}-primary { background: var(--dream-app-accent-fill, #d8dbe0); color: var(--dream-app-on-accent, #202126); border-color: var(--dream-app-accent-fill, #d8dbe0); }
+.${p}-actions .${p}-primary:hover:not(:disabled) { background: var(--dream-app-accent-fill, #eef0f3); filter: brightness(1.08); }
+.${p} .${p}-status { margin: 10px 0 0; font-size: 11px; overflow-wrap: anywhere; }
+.${p} .${p}-error { color: var(--dream-app-danger, #ffb7a9); }
+`;
+function activate(dd) {
+	const draft = createThemeDraft();
+	dd.on("project", draft.clear);
+	const prefix = dd.plugin.id.replace(/[^A-Za-z0-9_-]/g, "-");
+	dd.registerPanel({
+		id: "tokens",
+		title: "Tokens",
+		ariaLabel: "Tokens",
+		styles: css(prefix),
+		grow: 1,
+		render: (context) => createComponent(ThemePanel, {
+			dd,
+			context,
+			prefix,
+			draft
+		})
+	});
+}
+export { activate as default };